diff --git a/app.py b/app.py
index 4289658..6f3735d 100644
--- a/app.py
+++ b/app.py
@@ -5,11 +5,52 @@ app = Flask(__name__)
 
 connection = sql_utils.connect_database('ubuntu-mariadb.home','admin','password','inventory')
 
+
+@app.route('/user_search')
+def user_search():
+    data = request.args.get('data')
+    query = f'''
+SELECT u.name,u.id_num,u.assigned_asset,u.assigned_card
+FROM users u
+WHERE u.name like '%{data.upper()}%\''''
+    response = sql_utils.read_query(connection, query)
+    print(response)
+    return response
+
+@app.route('/asset_tag_search')
+def asset_tag_search():
+    data = request.args.get('data')
+    query = f'''SELECT a.asset_id, a.serial, a.model, a.category, u.name
+FROM assets a
+left JOIN users u ON u.assigned_asset=a.asset_id
+WHERE a.asset_id = {data.upper()}'''
+    response = sql_utils.read_query(connection, query)
+    return response
+
+@app.route('/serial_search')
+def serial_search():
+    data = request.args.get('data')
+    query = f'''SELECT a.asset_id, a.serial, a.model, a.category, u.name
+FROM assets a
+left JOIN users u ON u.assigned_asset=a.asset_id
+WHERE a.serial LIKE "{data.upper()}"'''
+    response = sql_utils.read_query(connection, query)
+    return response
+
 @app.route('/asset_list')
 def asset_list():
-    data = sql_utils.read_query(connection,'select * from assets;')
+    query = '''
+select a.asset_id,a.serial,a.model,a.category,u.name
+from assets a
+left join users u on u.assigned_asset=a.asset_id
+'''
+    data = sql_utils.read_query(connection,query)
     return data
 
+@app.route('/add')
+def add_data():
+    return render_template('adding.html')
+
 @app.route("/")
 def default():
     return render_template('main.html')
diff --git a/generate_data.py b/generate_data.py
index 4e9b39d..b4548e9 100644
--- a/generate_data.py
+++ b/generate_data.py
@@ -9,4 +9,6 @@ for i in range(0,100):
     serial = "".join(random.choices(alphabet, k=12))
     query = f'insert into assets (serial) values ("{serial}")'
     sql_utils.send_query(connection, query)
-    print(f'Inserting: {serial}')
\ No newline at end of file
+    print(f'Inserting: {serial}')
+
+print("test")
\ No newline at end of file
diff --git a/templates/add.js b/templates/add.js
new file mode 100644
index 0000000..e24b816
--- /dev/null
+++ b/templates/add.js
@@ -0,0 +1,3 @@
+function update_add_asset_model() {
+    
+}
\ No newline at end of file
diff --git a/templates/adding.html b/templates/adding.html
new file mode 100644
index 0000000..5ef137d
--- /dev/null
+++ b/templates/adding.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Adding</title>
+    <style>
+        td {
+            outline: black 1px solid;
+            margin: 2px;
+            padding: 2px;
+        }
+        .col {
+            width: 32%;
+            display: inline-block;
+            vertical-align: top;
+        }
+    </style>
+</head>
+
+<body>
+
+    <div class="col">
+        <h1>Add asset</h1>
+        <form action="javascript:add_asset()">
+            <label for="asset-serial">Serial:</label>
+            <input type="text" name="asset-serial" id="asset-serial">
+            <br>
+            <br>
+            <label for="asset-category">Category:</label>
+            <select name="asset-category" id="asset-category">
+                <option value="LAPTOP">Laptop</option>
+                <option value="IPAD">iPad</option>
+            </select>
+            <br>
+            <br>
+            <label for="asset-model">Model:</label>
+            <select name="asset-model" id="asset-model" disabled="disabled">
+                <option value="AIR_M1">Air M1</option>
+                <option value="AIR_M2">Air M2</option>
+                <option value="PRO_M1">Pro M1</option>
+                <option value="PRO_M2">Pro M2</option>
+            </select>
+            <br>
+            <br>
+            <button>Submit</button>
+
+        </form>
+    </div>
+    <div class="col">
+        <h1>Add user</h1>
+    </div>
+    <div class="col">
+        <h1>Add access card</h1>
+    </div>
+    <div class="col">
+        <h1>Modify asset</h1>
+    </div>
+    <div class="col">
+        <h1>Modify user</h1>
+    </div>
+    <div class="col">
+        <h1>Modify access card</h1>
+    </div>
+
+    <script src="add.js"></script>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/templates/main.html b/templates/main.html
index a1fbc4f..b291dc9 100644
--- a/templates/main.html
+++ b/templates/main.html
@@ -4,36 +4,133 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
+    <title>Searching</title>
     <style>
         td {
             outline: black 1px solid;
             margin: 2px;
             padding: 2px;
         }
+        .col {
+            width: 32%;
+            display: inline-block;
+            vertical-align: top;
+        }
     </style>
 </head>
 
 <body>
 
-    <h1>Assets</h1>
-    <table id="asset_table">
-        <tr>
-            <td>Asset tag</td>
-            <td>Serial Number</td>
-            <td>Model</td>
-            <td>Category</td>
-        </tr>
-    </table>
-
+    <div class="col">
+        <h1>Assets</h1>
+        <table id="asset_table">
+            <tr>
+                <td>Asset tag</td>
+                <td>Serial Number</td>
+                <td>Model</td>
+                <td>Category</td>
+                <td>Assigned to</td>
+            </tr>
+        </table>
     <button type="button" onclick="get_assets()">get assets</button>
+    </div>
+    <div class="col">
+        <h1>User info search</h1>
+        <label for="user-name">Name:</label>
+        <input type="text" name="user-name" id="user-name">
+        <button type="button" onclick="user_search()">Search</button>
+
+        <h2>results</h2>
+        <table id="user-search-results">
+            <tr>
+                <td>Name</td>
+                <td>ID number</td>
+                <td>Assigned asset</td>
+                <td>Assigned card</td>
+            </tr>
+        </table>
+    </div>
+    <div class="col">
+        <h1>Asset number search</h1>
+        <label for="asset-tag">Asset tag:</label>
+        <input type="text" name="asset-tag" id="asset-tag">
+        <button type="button" onclick="asset_search()">Search</button>
+
+        <h2>results</h2>
+        <div id="asset-tag-search-results">
+            <p>use the search box above to get results</p>
+        </div>
+    </div>
+
+
 
     <script>
-         async function get_assets() {
-            for (let element of document.getElementsByClassName('asset_data')) {
-                element.remove();
+        async function asset_search() {
+            let tag = document.getElementById("asset-tag").value;
+            await fetch('/asset_tag_search?data='+tag)
+                .then(response => response.json())
+                .then(data => {
+                    data = data[0];
+                    let result_element = document.getElementById('asset-tag-search-results');
+                    result_element.innerHTML = `
+                    <p>ID: ${data[0]}</p>
+                    <p>Serial: ${data[1]}</p>
+                    <p>Model: ${data[2]}</p>
+                    <p>Category: ${data[3]}</p>
+                    <p>Assigned to: ${data[4]}</p> 
+                    `;
+
+                });
+        }
+        
+        async function user_search() {
+            let user_name = document.getElementById("user-name").value;
+            let user_table = document.getElementById("user-search-results");
+            let user_entries = document.getElementsByClassName('user_data');
+            while (user_entries[0]) {
+                user_entries[0].remove();
             }
-            let table = document.getElementById("asset_table")
+            await fetch('/user_search?data='+user_name)
+                .then(response => response.json())
+                .then(data => {
+                    for (entry of data) {
+                        let tr = document.createElement('tr');
+                        tr.classList.add('user_data');
+                        for (let datum of entry) {
+                            let td = document.createElement('td');
+                            td.innerHTML = datum;
+                            tr.appendChild(td);
+                        }
+                        user_table.appendChild(tr);
+                    }
+                });
+        }
+
+        async function serial_search() {
+            let serial = document.getElementById("asset-serial").value;
+            await fetch('/serial_search?data='+serial)
+                .then(response => response.json())
+                .then(data => {
+                    data = data[0];
+                    console.log(data);
+                    let result_element = document.getElementById('search-results');
+                    result_element.innerHTML = `
+                    <p>ID: ${data[0]}</p>
+                    <p>Serial: ${data[1]}</p>
+                    <p>Model: ${data[2]}</p>
+                    <p>Category: ${data[3]}</p>
+                    <p>Assigned to: ${data[4]}</p> 
+                    `;
+
+                });
+        }
+
+        async function get_assets() {
+            let elements = document.getElementsByClassName("asset_data");
+            while (elements[0]) {
+                elements[0].remove();
+            }
+            let table = document.getElementById("asset_table");
             await fetch('/asset_list')
                 .then(response => response.json())
                 .then(data => {
@@ -48,7 +145,7 @@
                         table.appendChild(tr);
                     }
                 });
-         }
+        }
     </script>
 
 </body>
