diff --git a/src/templates/index.html b/src/templates/index.html
index 86a148f..d3f0190 100644
--- a/src/templates/index.html
+++ b/src/templates/index.html
@@ -20,32 +20,46 @@
 </head>
 
 <body>
-    <div id="navbar">
-        <ul class="sidenav sidenav-fixed">
-            <li>
-                <div class="user-view">
-                    <div class="background" style="background-color:  #3b6978;">
-                        <!-- <img src="images/office.jpg"> -->
-                    </div>
-                    <a href="#user"><img class="circle" src=""></a>
-                    <a href="#name"><span class="white-text name" style="padding-bottom: 5%;" class="navtitle">Port
-                            Scanner<br></span></a>
-                </div>
-            </li>
-            <li><a href="#!">Scan Port</a></li>
-            <li><a href="#!">About</a></li>
-            <li><a href="#!">Contact</a></li>
-            <center>
-                <a href="https://github.com/vinitshahdeo/PortScanner">
-                    <i class="fa fa-github" style=" font-size:48px; color:#3b6978">
-                    </i>
+      <div id="navbar">
+    <nav class="navbar navbar-expand-md navbar-light bg-light">
+      <button class="navbar-toggler" type="button" data-toggle="collapse"
+        data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
+        aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+      </button>
+      <div class="collapse navbar-collapse" id="navbarSupportedContent">
+        <ul class="navbar-nav mr-auto">
+          <li class="nav-item mb-2 mb-lg-0 me-lg-3">
+            <div>
+              <div class="background" style="background-color: #3b6978;">
+                <a href="#user"><img class="circle" src="#"></a>
+                <a href="#name">
+                  <span class="text-white name navtitle" style="padding-bottom: 5%;">
+                    Port&#8209;Scanner
+                  </span>
                 </a>
-            </center>
-
+              </div>
+            </div>
+          </li>
+          <li class="nav-item mb-2 mb-lg-0 me-lg-3">
+            <a class="nav-link" href="#">Scan&#8209;port</a>
+          </li>
+          <li class="nav-item mb-2 mb-lg-0 me-lg-3">
+            <a class="nav-link" href="#">About</a>
+          </li>
+          <li class="nav-item mb-2 mb-lg-0 me-lg-3">
+            <a class="nav-link" href="#">Contact</a>
+          </li>
         </ul>
-
-        <script type="text/javascript" src="static/js/materialize.min.js"></script>
-    </div>
+        <div class="github-icon text-lg-end text-center w-100 w-lg-auto mt-2 mt-lg-0">
+          <a href="">
+            <i class="fa fa-github" style="font-size: 40px; color: #3b6978;"></i>
+          </a>
+        </div>
+      </div>
+    </nav>
+    <script type="text/javascript" src="static/js/materialize.min.js"></script>
+  </div>
     <div id="showpage">
         <span id="showtitle">Port Scanner</span>
         <div id="line"></div>
