diff --git a/src/static/css/index.css b/src/static/css/index.css
index 1fdd337..1918f21 100644
--- a/src/static/css/index.css
+++ b/src/static/css/index.css
@@ -86,4 +86,83 @@ i{
     height:100vh;
     color:black;
     padding:2%;
-}
\ No newline at end of file
+}
+/* --- For Tablets --- */
+@media screen and (min-width: 601px) and (max-width: 992px) {
+    body {
+        flex-direction: column;
+        align-items: center;
+    }
+    #showpage, #timer, #history {
+        margin-left: 0;
+        width: 80%;
+        height: auto;
+    }
+    #timer-head {
+        font-size: 24px;
+    }
+    #seconds, #minutes {
+        font-size: 3.5em;
+    }
+    #colon {
+        font-size: 3.5em;
+    }
+    #form {
+        width: 60vw;
+        margin-left: 0;
+    }
+}
+
+/* --- For Mobile --- */
+@media screen and (max-width: 600px) {
+    body {
+        flex-direction: column;
+        align-items: center;
+        justify-content: flex-start;
+    }
+
+    #showpage {
+        margin: 0;
+        padding: 5%;
+        width: 100%;
+        height: auto;
+    }
+
+    #form {
+        width: 90vw;
+        margin: 0 auto;
+    }
+
+    /* ✅ Timer below form */
+    #timer {
+        order: 3; /* ensures timer appears AFTER the form */
+        width: 100%;
+        height: auto;
+        padding: 5%;
+        margin-top: 20px;
+        text-align: center;
+    }
+
+    #timer-head {
+        font-size: 20px;
+    }
+
+    #seconds, #minutes {
+        font-size: 2.5em;
+    }
+
+    #colon {
+        font-size: 2.5em;
+    }
+
+    #scan-port-button {
+        margin: 1vw auto;
+        display: block;
+    }
+
+    #history {
+        height: auto;
+        padding: 5%;
+        width: 100%;
+    }
+}
diff --git a/src/templates/index.html b/src/templates/index.html
index 86a148f..d0544df 100644
--- a/src/templates/index.html
+++ b/src/templates/index.html
@@ -35,12 +35,12 @@
             <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>
-                </a>
-            </center>
+            <div style="text-align:center; margin-top:20px;">
+              <a href="https://github.com/vinitshahdeo/PortScanner">
+                <i class="fa fa-github" style="font-size:48px; color:#3b6978;"></i>
+              </a>
+            </div>
+
 
         </ul>