diff --git a/index.html b/index.html
index 62da9e0..82eb9d3 100644
--- a/index.html
+++ b/index.html
@@ -1,68 +1,98 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Generators</title>
-  <link rel="icon" href="./images/lifeadventurer_rounded_logo.png">
-  <!-- bootstrap 5.3.2 -->
-  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
-  <!-- jquery 3.7.1 -->
-  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
-  <!-- box icons -->
-  <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
-  <link rel="stylesheet" href="./styles.css">
-</head>
-<body>
-  <header>
-    <div class="row">
-      <h1 class="col-md-4 col-sm-6 offset-md-4 offset-sm-3">Generators Gallery</h1>
-      <div class="col-md-1 col-sm-1 offset-md-3 offset-sm-2 bx bx-moon" id="dark-mode-icon"></div>
-    </div>
-  </header>
-  <section>
-    <div class="container">
-      <div class="row">
-        <div class="col-md-6">
-          <div class="card mb-3 border-0">
-            <img class="card-img-top" src="./images/fortune_generator_example.png" alt="fortune generator example">
-            <!-- <video src="#" autoplay></video> -->
-            <div class="card-body">
-              <h4 class="card-title">Fortune Generator</h4>
-              <p class="card-text">Get your daily fortune with just a click.</p>
-              <a class="btn" href="./fortune_generator/">Check this out</a>
-            </div>
-            <div class="card-footer">
-              <div id="last-update-1"></div>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Generators</title>
+    <link rel="icon" href="./images/lifeadventurer_rounded_logo.png" />
+    <!-- bootstrap 5.3.2 -->
+    <link
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+      integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
+      crossorigin="anonymous"
+    />
+    <!-- jquery 3.7.1 -->
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
+    <!-- box icons -->
+    <link
+      href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <header>
+        <div class="row">
+          <h1 class="col-md- col-sm-6 offset-md-3 offset-sm-3" id="main-heading">
+              Generators Gallery
+          </h1>
+          <div class="col-md-1 col-sm-1 offset-md-1 offset-sm-1 bx bx-moon" id="dark-mode-icon"></div>
+      </div>
+      </div>
+    </header>
+    <section>
+      <div class="container">
+        <div class="row">
+          <div class="col-md-6">
+            <div class="card mb-3 border-0">
+              <img
+                class="card-img-top"
+                src="./images/fortune_generator_example.png"
+                alt="fortune generator example"
+              />
+              <!-- <video src="#" autoplay></video> -->
+              <div class="card-body">
+                <h4 class="card-title">Fortune Generator</h4>
+                <p class="card-text">
+                  Get your daily fortune with just a click.
+                </p>
+                <a class="btn" href="./fortune_generator/">Check this out</a>
+              </div>
+              <div class="card-footer">
+                <div id="last-update-1"></div>
+              </div>
             </div>
           </div>
-        </div>
-        <div class="col-md-6">  
-          <div class="card mb-3 border-0">
-            <img class="card-img-top" src="./images/quote_generator_example_(2).png" alt="quote generator example">
-            <!-- <video src="#" autoplay></video> -->
-            <div class="card-body">
-              <h4 class="card-title">Quote Generator</h4>
-              <p class="card-text">Generate inspiring and thought-provoking quotes effortlessly.</p>
-              <a class="btn" href="./quote_generator/">Check this out</a>
-            </div>
-            <div class="card-footer">
-              <div id="last-update-2"></div>
+          <div class="col-md-6">
+            <div class="card mb-3 border-0">
+              <img
+                class="card-img-top"
+                src="./images/quote_generator_example_(2).png"
+                alt="quote generator example"
+              />
+              <!-- <video src="#" autoplay></video> -->
+              <div class="card-body">
+                <h4 class="card-title">Quote Generator</h4>
+                <p class="card-text">
+                  Generate inspiring and thought-provoking quotes effortlessly.
+                </p>
+                <a class="btn" href="./quote_generator/">Check this out</a>
+              </div>
+              <div class="card-footer">
+                <div id="last-update-2"></div>
+              </div>
             </div>
           </div>
         </div>
       </div>
-    </div>
-  </section>
-  <footer>
-    <div class="row text-muted py-3 me-3 float-end" id="footer-author">
-      <h5> Copyright © 2023 LifeAdventurer | All Rights Reserved. 
-        <a href="https://github.com/LifeAdventurer">
-          <img id="footer-author-icon" src="./images/lifeadventurer_rounded_logo.png" alt="footer image">
-        </a>
-      </h5>
-    </div>
-  </footer>
-  <script src="./scripts.js"></script>
-</body>
-</html>
\ No newline at end of file
+    </section>
+    <footer class="bg-body-tertiary text-center text-lg-start">
+      <div id="footer-author">
+        <h5>
+          Copyright © 2024 
+          <a href="https://github.com/LifeAdventurer" target="_blank">LifeAdventurer</a> | All
+          Rights Reserved.
+          <a href="https://github.com/LifeAdventurer">
+            <img
+              id="footer-author-icon"
+              src="./images/lifeadventurer_rounded_logo.png"
+              alt="footer image"
+            />
+          </a>
+        </h5>
+      </div>
+    </footer>
+    <script src="./scripts.js"></script>
+  </body>
+</html>
diff --git a/styles.css b/styles.css
index 2f72b27..8bba019 100644
--- a/styles.css
+++ b/styles.css
@@ -13,7 +13,7 @@
 }
 
 .dark-mode {
-  --bg-color: #000000dd;
+  --bg-color: #212121;
   --title-color: #ffffffd8;
   --dark-mode-icon-color: #efefef;
   /* button */
@@ -37,6 +37,12 @@
   /* color: var(--button-text-color); */
 }
 
+* {
+  margin: 0;
+  padding: 0px;
+  box-sizing: border-box;
+}
+
 body {
   background-color: var(--bg-color);
 }
@@ -51,42 +57,69 @@ h5 {
   color: var(--title-color);
 }
 
-.card {
-  background-color: var(--card-bg-color);
+.row {
+  display: flex;
+  align-items: center;
 }
 
-.card-title, .card-text {
-  color: var(--card-title-color);
+.row h1 {
+  margin-top: 15px;
+}
+
+#dark-mode-icon {
+  display: flex;
+  margin-top: 13px;
+  margin-left: -120px;
+  justify-content: center;
+  font-size: 2.4rem;
+  color: var(--dark-mode-icon-color);
+  cursor: pointer;
+  opacity: 85%;
 }
 
 .container {
   margin-top: 30px;
 }
 
+.card-body {
+  height: 170px;
+}
+
+.card {
+  background-color: var(--card-bg-color);
+}
+
+.card-title,
+.card-text {
+  color: var(--card-title-color);
+}
+
 .card-footer {
   background-color: var(--card-footer-color);
-  color: var(--card-footer-text-color); 
+  color: var(--card-footer-text-color);
 }
 
 #footer-author {
-  text-align: right;
+  margin-top: 15px;
+  text-align: center;
+  background-color: var(--bg-color);
+}
+
+#footer-author h5 a {
+  text-decoration: none;
 }
 
 #footer-author-icon {
+  margin-left: 10px;
   width: 4%;
   border-radius: 50%;
+  width: 40px;
+  height: 40px;
   overflow: hidden;
 }
 
-.row {
-  display: flex;
+@media only screen and (max-width: 1200px) {
+  #dark-mode-icon {
+    margin-left: 0px;
+  }
 }
-
-#dark-mode-icon {
-  margin-left: 25px;
-  margin-top: 15px;
-  font-size: 2.4rem;
-  color: var(--dark-mode-icon-color);
-  cursor: pointer;
-  opacity: 85%;
-}
\ No newline at end of file
