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>