diff --git a/person_detection/app.py b/person_detection/app.py
index fc0b9c7..bc72e96 100644
--- a/person_detection/app.py
+++ b/person_detection/app.py
@@ -8,6 +8,7 @@
 from flask import Flask, render_template, Response
 from argparse import ArgumentParser, SUPPRESS
 
+import config
 from person_detection import Camera
 
 
@@ -16,9 +17,9 @@
 
 @app.route('/')
 def index():
+    global cameras
     """Video streaming home page."""
-    return render_template('index.html', devices=[0, 1, 2, 3])
-
+    return render_template('index.html', devices=config.cameras)
 
 def gen(camera):
     """Video streaming generator function."""
diff --git a/person_detection/config.py b/person_detection/config.py
new file mode 100644
index 0000000..4aa9d1e
--- /dev/null
+++ b/person_detection/config.py
@@ -0,0 +1,6 @@
+"""
+SPDX-FileCopyrightText: 2020-present Open Networking Foundation <info@opennetworking.org>
+SPDX-License-Identifier: LicenseRef-ONF-Member-1.01
+"""
+
+cameras = {"0": "Ain's desk", "1":"Large conference room", "2":"Shad's desk", "3":"Unknown"}
diff --git a/person_detection/templates/index.html b/person_detection/templates/index.html
index 43a4c6b..0cb83e7 100644
--- a/person_detection/templates/index.html
+++ b/person_detection/templates/index.html
@@ -1,11 +1,30 @@
 <html>
   <head>
     <title>Person Detection - Aether Edge Application</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
   </head>
   <body>
-    <h1>Person Detection - Aether Edge Application</h1>
-    {% for x in devices %}
-      <img src="{{ url_for('video_feed', device=x) }}">
-    {% endfor %}
+    <main>
+      <div class="container">
+        <div class=row>
+          <h2 class="pb-2 border-bottom">Person Detection - Aether Edge Application</h2>
+        </div>
+        <div class="row">
+          {% for x, y in devices.items() %}
+          <div class="col-6">
+            <div class="card">
+              <img src="{{ url_for('video_feed', device=x) }}" class="card-img-top" alt="...">
+              <div class="card-body">
+                <h5 class="card-title">Camera {{ x }}</h5>
+                <p class="card-text">{{ y }}</p>
+              </div>
+            </div>
+          </div>
+          {% endfor %}
+        </div>
+      </div>
+    </main>
+    <h1></h1>
   </body>
 </html>