diff --git a/velconnect/routes/api.py b/velconnect/routes/api.py
index a414abb..944e43e 100644
--- a/velconnect/routes/api.py
+++ b/velconnect/routes/api.py
@@ -10,7 +10,6 @@ from random import random
 bp = Blueprint('api', __name__)
 
 
-
 @bp.route('/', methods=['GET'])
 @require_api_key(0)
 def api_home():
@@ -23,7 +22,6 @@ def api_spec():
     return send_from_directory('static', 'api_spec.json')
 
 
-
 @bp.route('/get_all_headsets', methods=['GET'])
 @require_api_key(0)
 def get_all_headsets():
@@ -86,23 +84,50 @@ def update_paring_code():
 
     return 'Success'
 
-    
 
 @bp.route('/get_headset_details/<hw_id>', methods=['GET'])
 @require_api_key(10)
 def get_headset_details(hw_id):
-    return jsonify(get_headset_details_db(hw_id))
+    values = get_headset_details_db(hw_id)
+    if len(values) == 1:
+        return jsonify(values[0])
+    else:
+        return jsonify({'error', "Can't find headset with that id."}), 400
 
 
 def get_headset_details_db(hw_id):
     conn, curr = connectToDB()
     query = """
-    SELECT * FROM `Headset` WHERE hw_id=%(hw_id)s;
+    SELECT * FROM `Headset` WHERE `hw_id`=%(hw_id)s;
     """
     curr.execute(query, {'hw_id': hw_id})
     values = [dict(row) for row in curr.fetchall()]
     curr.close()
-    return jsonify(values)
+    return values
+
+
+@bp.route('/set_headset_details/<hw_id>', methods=['POST'])
+@require_api_key(10)
+def set_headset_details(hw_id):
+    return set_headset_details_db(hw_id, request.json)
+
+
+def set_headset_details_db(hw_id, data):
+    conn, curr = connectToDB()
+    query = """
+    INSERT INTO `Headset`(
+        `hw_id`,
+        `current_room`
+    ) VALUES(
+        %(hw_id)s,
+        %(current_room)s
+    );
+    """
+    data['hw_id'] = hw_id
+    curr.execute(query, data)
+    conn.commit()
+    curr.close()
+    return 'Success'
 
 
 @bp.route('/get_room_details/<room_id>', methods=['GET'])
@@ -122,13 +147,13 @@ def get_room_details_db(room_id):
     return jsonify(values)
 
 
-@bp.route('/update_room/<room_id>', methods=['POST'])
+@bp.route('/set_room_details/<room_id>', methods=['POST'])
 @require_api_key(10)
-def update_room(room_id):
-    return jsonify(update_room_db(room_id, request.json))
+def set_room_details(room_id):
+    return jsonify(set_room_details_db(room_id, request.json))
 
 
-def update_room_db(room_id, data):
+def set_room_details_db(room_id, data):
     room_id = random.randint(0, 9999)
     conn, curr = connectToDB()
     query = """
diff --git a/velconnect/static/js/util.js b/velconnect/static/js/util.js
index 8396602..b4877ff 100644
--- a/velconnect/static/js/util.js
+++ b/velconnect/static/js/util.js
@@ -28,4 +28,35 @@ function getCookie(cname) {
         }
     }
     return "";
+}
+
+function writeClass(className, data) {
+    if (data == undefined || data == null || data.toString() == 'undefined') {
+        data = "";
+    }
+
+    let elements = document.getElementsByClassName(className);
+    Array.from(elements).forEach(e => {
+        e.innerHTML = data;
+    });
+}
+
+function writeId(idName, data) {
+    if (data == undefined || data == null || data.toString() == 'undefined') {
+        data = "";
+    }
+
+    document.getElementById(idName).innerHTML = data;
+}
+
+
+function writeSrc(className, data) {
+    if (data == undefined || data == null || data.toString() == 'undefined') {
+        data = "";
+    }
+
+    let elements = document.getElementsByClassName(className);
+    Array.from(elements).forEach(e => {
+        e.src = data;
+    });
 }
\ No newline at end of file
diff --git a/velconnect/templates/index.jinja b/velconnect/templates/index.jinja
index 7184f35..fcab8cf 100644
--- a/velconnect/templates/index.jinja
+++ b/velconnect/templates/index.jinja
@@ -34,12 +34,41 @@
     <div class="container">
 
         <div id="loading" class="loading loading-lg"></div>
-        <div id="failure">☹️</div>
+        <div id="failure" style="display: none;">☹️</div>
 
 
         <div id="headset_details" style="display: none;">
-            <h2>HW ID</h2>
-            <p id="hw_id"></p>
+            <div class="panel">
+                <div class="panel-header text-center">
+                    <figure class="avatar avatar-lg"><img src="static/favicon/android-chrome-192x192.png" alt="Avatar"></figure>
+                    <div class="panel-title h5 mt-10">Headset Info</div>
+                    <div class="panel-subtitle hw_id">---</div>
+                </div>
+                <div class="panel-body">
+                    <div class="tile tile-centered">
+                        <div class="tile-content">
+                            <div class="tile-title text-bold">Current Room</div>
+                            <input class="btn" type="text" id="current_room" placeholder="----">
+                        </div>
+                        <div class="tile-action">
+                            <button class="btn btn-link btn-action btn-lg tooltip tooltip-left"
+                                data-tooltip="Set Room ID"><i class="icon icon-send"></i></button>
+                        </div>
+                    </div>
+                    <div class="tile tile-centered">
+                        <div class="tile-content">
+                            <div class="tile-title text-bold">First Added</div>
+                            <div class="tile-subtitle date_created">---</div>
+                        </div>
+                    </div>
+                    <div class="tile tile-centered">
+                        <div class="tile-content">
+                            <div class="tile-title text-bold">Last Used</div>
+                            <div class="tile-subtitle last_used">---</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
         </div>
     </div>
 
@@ -62,9 +91,12 @@
             httpGetAsync('/api/get_headset_details/' + hw_id, (resp) => {
                 console.log(resp);
                 let respData = JSON.parse(resp);
-                if (respData['hw_id'] != '') {
-                    hw_id_field.innerText = respData['hw_id'];
-                }
+                
+                writeClass('hw_id', respData['hw_data']);
+                writeClass('current_room', respData['current_room']);
+                writeClass('date_created', respData['date_created']);
+                writeClass('last_used', respData['last_used']);
+
                 headset_details.style.display = "block";
             }, (status) => {
                 failure.style.display = "block";