diff --git a/.github/workflows/static.yml b/.github/workflows/static.yml
index 5828616..582a8a9 100644
--- a/.github/workflows/static.yml
+++ b/.github/workflows/static.yml
@@ -33,7 +33,7 @@ jobs:
       - name: Setup Pages
         uses: actions/configure-pages@v2
       - name: Upload artifact
-        uses: actions/upload-pages-artifact@v1
+        uses: actions/upload-artifact@v3
         with:
           # Upload entire repository
           path: '.'
diff --git a/README.md b/README.md
index 3821bda..93b1fd3 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-# [DinoGame](https://github.com/DakshCodess/DinoGame)
+# [DinoGame](https://the-user-python.github.io/DinoGame/)
 [![test](https://img.shields.io/badge/test-passing-lightdarkgreen.svg)](https://dakshcodess.github.io/DinoGame/) 
 [![GitHub issues](https://img.shields.io/github/issues/DakshCodess/DinoGame)](https://github.com/DakshCodess/DinoGame/issues)  [![Github pull](https://img.shields.io/github/issues-pr/DakshCodess/DinoGame)](https://github.com/DakshCodess/DinoGame/pull)
 [![CodeQL](https://github.com/DakshCodess/DinoGame/actions/workflows/codeql-analysis.yml/badge.svg)](https://github.com/DakshCodess/DinoGame/actions/workflows/codeql-analysis.yml)
diff --git a/index.css b/index.css
index b3eed5f..6d1debb 100644
--- a/index.css
+++ b/index.css
@@ -4,30 +4,22 @@
   found in the LICENSE file.
 */
 
-/* Resetting default styles for HTML and body */
+/* General reset for HTML and body */
 html, body {
-  padding: 0;
   margin: 0;
+  padding: 0;
   width: 100%;
   height: 100%;
-  font-family: 'Roboto', sans-serif; /* Use a modern font */
-  background-color: #f4f4f4; /* Set a neutral background color */
-  color: #333; /* Set a default text color */
+  font-family: 'Roboto', sans-serif;
+  background-color: #f4f4f4;
+  color: #333;
+  overflow-x: hidden; /* Prevent horizontal scrolling */
 }
 
-/* Styling for reusable icon class */
+/* Reusable icon class */
 .icon {
-  user-select: none;
   display: inline-block;
-}
-
-/* Online status icon with responsive image set */
-.icon-online {
-  content: -webkit-image-set(
-    url(assets/default_100_percent/100-error-online.png) 1x,
-    url(assets/default_200_percent/200-error-online.png) 2x
-  );
-  position: relative;
+  user-select: none;
 }
 
 /* Utility class to hide elements */
@@ -36,42 +28,44 @@ html, body {
 }
 
 /* Styling for the offline page */
-
 .offline .interstitial-wrapper {
   color: #6b3b3b;
   font-size: 1.2em;
   line-height: 1.5;
   margin: 0 auto;
-  max-width: 800px;
   padding-top: 100px;
   width: 90%;
+  max-width: 800px;
+  text-align: center;
 }
 
-.offline .runner-container,
-.offline .runner-canvas {
+.offline .runner-container {
+  position: relative;
   height: 120px;
+  width: 100%;
   max-width: 800px;
+  margin: 30px auto 0;
   overflow: hidden;
-  position: absolute;
-  top: 30px;
-  width: 40px;
 }
 
 .offline .runner-canvas {
   opacity: 0.9;
-  overflow: hidden;
+  height: 100%;
+  width: 40px;
   position: absolute;
   top: 0;
+  left: 50%;
+  transform: translateX(-50%); /* Centering the canvas */
   z-index: 2;
 }
 
 .offline .controller {
-  background: rgba(247, 247, 247, 0.2);
-  height: 100vh;
-  left: 0;
   position: absolute;
   top: 0;
+  left: 0;
   width: 100vw;
+  height: 100vh;
+  background: rgba(247, 247, 247, 0.2);
   z-index: 1;
 }
 
@@ -80,28 +74,54 @@ html, body {
   display: block;
 }
 
-/* Responsive styles for small screens */
+/* Snackbar styling for mobile view */
+.snackbar {
+  position: fixed;
+  left: 0;
+  bottom: 10px;
+  width: 100%;
+  border-radius: 5px;
+  background-color: #333;
+  color: #fff;
+  padding: 10px;
+  text-align: center;
+}
+
+/* Responsive styles for mobile screens */
 @media (max-width: 480px) {
   .suggested-left > #control-buttons, 
   .suggested-right > #control-buttons {
     float: left;
   }
+  
+  .offline .interstitial-wrapper {
+    padding-top: 50px;
+    font-size: 1.1em;
+  }
 
-  /* Snackbar styling for mobile view */
-  .snackbar {
-    position: fixed;
-    left: 0;
-    bottom: 10px;
-    width: 100%;
-    border-radius: 5px;
+  /* Reducing height for mobile */
+  .offline .runner-container {
+    height: 100px;
   }
 }
 
-/* Additional styles for larger screens */
+/* Responsive styles for larger screens */
 @media (min-width: 768px) {
   body {
-    background-color: #fff; /* Set a white background for larger screens */
+    background-color: #fff;
   }
 
+  /* Make interstitial-wrapper text larger for larger screens */
+  .offline .interstitial-wrapper {
+    font-size: 1.4em;
+  }
+  
   /* Add more styles for larger screens as needed */
 }
+
+/* New hover effect for buttons */
+button:hover {
+  background-color: #555; /* Darker shade for hover effect */
+  color: #fff; /* White text on hover */
+  cursor: pointer; /* Pointer cursor on hover */
+}