diff --git a/index.html b/index.html
index 575002f..62da9e0 100644
--- a/index.html
+++ b/index.html
@@ -5,28 +5,32 @@
   <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">
-  <script src="https://unpkg.com/vue@3.3.8/dist/vue.global.js"></script>
+  <!-- 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>
-    <!-- <hgroup>   -->
-      <h1>Generators Gallery</h1>
-    <!-- </hgroup> -->
+    <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 bg-dark text-white border-0">
+          <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 href="./fortune_generator/" class="btn btn-secondary">Check this out</a>
+              <a class="btn" href="./fortune_generator/">Check this out</a>
             </div>
             <div class="card-footer">
               <div id="last-update-1"></div>
@@ -34,13 +38,13 @@
           </div>
         </div>
         <div class="col-md-6">  
-          <div class="card mb-3 bg-dark text-white border-0">
+          <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 href="./quote_generator/" class="btn btn-secondary">Check this out</a>
+              <a class="btn" href="./quote_generator/">Check this out</a>
             </div>
             <div class="card-footer">
               <div id="last-update-2"></div>
diff --git a/scripts.js b/scripts.js
index f626899..b090e03 100644
--- a/scripts.js
+++ b/scripts.js
@@ -56,4 +56,11 @@ function format_time_difference(seconds) {
   }
 }
 
-get_generator_card_footer()
\ No newline at end of file
+get_generator_card_footer()
+
+let darkModeIcon = document.querySelector('#dark-mode-icon');
+
+darkModeIcon.onclick = () => {
+    darkModeIcon.classList.toggle('bx-sun');
+    document.body.classList.toggle('dark-mode');
+};
\ No newline at end of file
diff --git a/styles.css b/styles.css
index 4816430..2f72b27 100644
--- a/styles.css
+++ b/styles.css
@@ -1,10 +1,42 @@
 :root {
   --bg-color: #ffffff;
   --title-color: #363636;
+  /* button */
+  --button-color: #6c757d;
+  --button-hover-color: #565e64;
+  --button-text-color: #ffffff;
+  /* card-footer */
+  --card-bg-color: #212529;
+  --card-title-color: #ffffff;
   --card-footer-color: #343a40;
   --card-footer-text-color: #adb5bd;
 }
 
+.dark-mode {
+  --bg-color: #000000dd;
+  --title-color: #ffffffd8;
+  --dark-mode-icon-color: #efefef;
+  /* button */
+  --button-color: #9c9fa2ec;
+  --button-hover-color: #797d7fec;
+  --button-text-color: #121212;
+  /* card-footer */
+  --card-bg-color: #f8f8f8;
+  --card-title-color: #3a3a3a;
+  --card-footer-color: #e1e1e1;
+  --card-footer-text-color: #4c4c4c;
+}
+
+.btn {
+  background-color: var(--button-color);
+  color: var(--button-text-color);
+}
+
+.btn:hover {
+  background-color: var(--button-hover-color);
+  /* color: var(--button-text-color); */
+}
+
 body {
   background-color: var(--bg-color);
 }
@@ -15,6 +47,18 @@ h1 {
   color: var(--title-color);
 }
 
+h5 {
+  color: var(--title-color);
+}
+
+.card {
+  background-color: var(--card-bg-color);
+}
+
+.card-title, .card-text {
+  color: var(--card-title-color);
+}
+
 .container {
   margin-top: 30px;
 }
@@ -32,4 +76,17 @@ h1 {
   width: 4%;
   border-radius: 50%;
   overflow: hidden;
+}
+
+.row {
+  display: flex;
+}
+
+#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
