diff --git a/views/index.html b/views/index.html
index 453c163..1b99c61 100644
--- a/views/index.html
+++ b/views/index.html
@@ -3,46 +3,100 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta name="description" content="Yet Another Simple WebRTC Video Chat">
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="description" content="Yet Another Simple WebRTC Video Chat" />
 
     <title>YASWVC</title>
 
-    <link id="favicon" rel="icon" href="https://glitch.com/edit/favicon-app.ico" type="image/x-icon">
+    <link
+      id="favicon"
+      rel="icon"
+      href="https://glitch.com/edit/favicon-app.ico"
+      type="image/x-icon"
+    />
     <!-- import the webpage's stylesheet -->
-    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
-    <link rel="stylesheet" href="/style.css">
+    <link
+      rel="stylesheet"
+      href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
+    />
+    <link rel="stylesheet" href="/style.css" />
 
     <!-- import libraries -->
     <script src="/lib/peerjs.js"></script>
-    
+    <!-- development version, includes helpful console warnings -->
+    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+
     <!-- import the webpage's client-side javascript file -->
     <script src="/main.js" type="module"></script>
-    
   </head>
-  <body>
+  <body class="bg-dark text-white">
     <!-- Image and text -->
-    <nav class="navbar navbar-light bg-light">
-      <a class="navbar-brand" href="#">
-        <img src="/docs/4.5/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="" loading="lazy">
-        Yet Another Simple WebRTC Video Chat
+    <nav class="navbar navbar-dark bg-dark">
+      <a class="navbar-brand" href="#" style="margin: 0 auto;">
+        <img
+          src="https://getbootstrap.com/docs/4.5/assets/brand/bootstrap-solid.svg"
+          width="30"
+          height="30"
+          class="d-inline-block align-top"
+          alt=""
+          loading="lazy"
+        />
+        <span
+          ><strong>YASWVC</strong> - Yet Another Simple WebRTC Video Chat</span
+        >
       </a>
     </nav>
     <div class="container pt-3">
       <div class="row">
+        <!-- self -->
         <div class="col-6">
-          <div class="card">            
+          <div class="card text-dark">
             <video id="localVideo" class="card-img-top" autoplay></video>
-            <h5 class="card-title">Me</h5>
             <div class="card-body">
-              <p class="card-text"></p>
+              <h5 class="card-title">It'se me!</h5>
+              <!-- audio source -->
+              <div class="form-group">
+                <label for="audioSource">Audio input source: </label>
+                <select id="audioSource" class="form-control"></select>
+              </div>
+              <!-- audio output -->
+              <div class="form-group">
+                <label for="audioOutput">Audio output destination: </label>
+                <select id="audioOutput" class="form-control"></select>
+              </div>
+              <!-- video source -->
+              <div class="form-group">
+                <label for="videoSource">Video source: </label>
+                <select id="videoSource" class="form-control"></select>
+              </div>
             </div>
           </div>
         </div>
+        <!-- peers -->
         <div class="col-6">
-          <div class="card">            
+          <div class="card text-dark">
+            <div class="card-body">
+              <h5 class="card-title">Remote</h5>
+              <input type="text" id="connect-to-peer" class="form-control" placeholder="paste-peer-id-here">
+              <br>
+              <button class="btn btn-sm btn-success" onclick="connectToPeer()">
+                Connect
+              </button>
+              <button class="btn btn-sm btn-danger" onclick="disconnectFromPeer()">
+                Disconnect
+              </button>
+              <div class="messages"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- peers -->
+      <div class="row mt-3">        
+        <!-- peer -->
+        <div class="col-6">
+          <div class="card">
             <video id="remoteVideo" class="card-img-top" autoplay></video>
             <h5 class="card-title">Remote</h5>
             <div class="card-body">
@@ -50,33 +104,7 @@
             </div>
           </div>
         </div>
-      </div>  
-    </div>  
-    <input type="text" id="connect-to-peer" />
-    <button onclick="connectToPeer()">
-      Connect
-    </button>
-    <button onclick="disconnectFromPeer()">
-      Disconnect
-    </button>
-    <hr>    
-    <p>Get available audio, video sources and audio output devices from <code>mediaDevices.enumerateDevices()</code>
-        then set the source for <code>getUserMedia()</code> using a <code>deviceId</code> constraint.</p>
-
-    <div class="select">
-        <label for="audioSource">Audio input source: </label><select id="audioSource"></select>
-    </div>
-
-    <div class="select">
-        <label for="audioOutput">Audio output destination: </label><select id="audioOutput"></select>
-    </div>
-
-    <div class="select">
-        <label for="videoSource">Video source: </label><select id="videoSource"></select>
-    </div>
-    <hr>
-    <div class="messages">
-      
+      </div>
     </div>
 
     <footer>Made with <a href="https://glitch.com">Glitch</a>!</footer>
