diff --git a/app/routers/audio.py b/app/routers/audio.py
index f85c75b7..c53ed9ca 100644
--- a/app/routers/audio.py
+++ b/app/routers/audio.py
@@ -37,11 +37,9 @@ def audio_settings(
     user: User = Depends(current_user),
 ) -> templates.TemplateResponse:
     """A route to the audio settings.
-
     Args:
         request (Request): the http request
         session (Session): the database.
-
     Returns:
         templates.TemplateResponse: renders the audio.html page
         with the relevant information.
@@ -75,7 +73,6 @@ async def get_choices(
     user: User = Depends(current_user),
 ) -> RedirectResponse:
     """This function saves users' choices in the db.
-
     Args:
         request (Request): the http request
         session (Session): the database.
@@ -92,7 +89,6 @@ async def get_choices(
         sfx_vol (Optional[int], optional): a number in the range (0, 1)
         indicating the desired sfx volume, or None if disabled.
         user (User): current user.
-
     Returns:
         RedirectResponse: redirect the user to home.html.
     """
@@ -113,10 +109,8 @@ async def start_audio(
     user: User = Depends(current_user),
 ) -> RedirectResponse:
     """Starts audio according to audio settings.
-
     Args:
         session (Session): the database.
-
     Returns:
         RedirectResponse: redirect the user to home.html.
     """
diff --git a/app/static/credits_style.css b/app/static/credits_style.css
index 3234e564..398db3c9 100644
--- a/app/static/credits_style.css
+++ b/app/static/credits_style.css
@@ -1,6 +1,7 @@
 body {
 	margin-left: 6.25em;
 	margin-right: 6.25em;
+	background-color: var(--backgroundcol);
 }
 
 div.gallery {
diff --git a/app/static/global.css b/app/static/global.css
index c7e2deb4..96647c6e 100644
--- a/app/static/global.css
+++ b/app/static/global.css
@@ -49,14 +49,14 @@ body {
 }
 
 body {
-    background-color: #F7F7F7;
-    color: #222831;
-    font-family: "Assistant", "Ariel", sans-serif;
-    font-weight: 400;
-    line-height: 1.7;
-    text-rendering: optimizeLegibility;
-    scroll-behavior: smooth;
-    width: 100%;
+  background-color: var(--backgroundcol);
+  color: var(--textcolor);
+  font-family: "Assistant", "Ariel", sans-serif;
+  font-weight: 400;
+  line-height: 1.7;
+  text-rendering: optimizeLegibility;
+  scroll-behavior: smooth;
+  width: 100%;
 }
 
 a {
diff --git a/app/static/grid_style.css b/app/static/grid_style.css
index 63a4b598..a29baa5c 100644
--- a/app/static/grid_style.css
+++ b/app/static/grid_style.css
@@ -1,3 +1,22 @@
+:root[data-color-mode="regular"] {
+  --backgroundcol: #F7F7F7;
+  --textcolor: #222831;
+  --start-of-month: #E9ECEf;
+  --primary-variant: #FFDE4D;
+  --secondary: #EF5454;
+  --borders: #E7E7E7;
+  --borders-variant: #F7F7F7;
+}
+
+:root[data-color-mode="dark"] {
+  --backgroundcol: #000000;
+  --textcolor: #EEEEEE;
+  --start-of-month: #8C28BF;
+  --secondary: #EF5454;
+  --borders: #E7E7E7;
+  --borders-variant: #F7F7F7;
+}
+
 * {
   margin: 0;
   padding: 0;
@@ -24,7 +43,7 @@ nav {
   position: sticky;
   display: flex;
   flex-direction: column;
-  top:var(--space_s);
+  top: var(--space_s);
 }
 
 .fixed-features,
@@ -37,6 +56,7 @@ nav {
   flex: 1;
   display: flex;
   flex-direction: column;
+  background: var(--backgroundcol);
 }
 
 .user-features {
@@ -84,10 +104,12 @@ nav {
 }
 
 .settings-open {
-    width: 20rem;
+  width: 20rem;
 }
 
-img {fill: var(--background);}
+img {
+  fill: var(--background);
+}
 
 header {
   z-index: 5;
@@ -96,7 +118,8 @@ header {
   display: flex;
   grid-flow: row wrap;
   margin: 0 var(--space_s);
-  background-color: var(--background);
+  margin: 0 1rem 0 1rem;
+  background-color: var(--backgroundcol);
 }
 
 header div {
@@ -135,7 +158,8 @@ main {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
   margin: var(--space_s) var(--space_s) 0 var(--space_s);
-  background-color: var(--background);
+  margin: 1rem 1rem 0 1rem;
+  background-color: var(--backgroundcol);
   align-self: stretch;
 }
 
@@ -192,9 +216,13 @@ main {
   font-weight: 400;
 }
 
-.day:hover {border: 0.1rem solid var(--primary);}
+.day:hover {
+  border: 0.1rem solid var(--primary);
+}
 
-.day:hover .day-number{color: var(--negative);}
+.day:hover .day-number {
+  color: var(--negative);
+}
 
 .day:hover .add-small {
   display: block;
@@ -288,7 +316,7 @@ main {
   height: 1.5rem;
 }
 
-.month-event div{
+.month-event div {
   height: 1.5rem;
   width: 100%;
   transition: all 0.3s ease;
@@ -334,31 +362,59 @@ main {
 }
 
 /* Text Colors */
-.text-yellow {color: var(--secondary);}
+.text-yellow {
+  color: var(--secondary);
+}
 
-.text-gray {color: var(--on-surface);}
+.text-gray {
+  color: var(--on-surface);
+}
 
-.text-lightgray {color: var(--background);}
+.text-lightgray {
+  color: var(--background);
+}
 
-.text-darkblue {color: var(--primary);}
+.text-darkblue {
+  color: var(--primary);
+}
 
 /* Borders */
-.border-dash-darkblue {border: 0.125rem dashed  var(--primary);}
+.border-dash-darkblue {
+  border: 0.125rem dashed var(--primary);
+}
 
-.border-darkblue {border: 0.125rem solid  var(--primary);}
+.border-darkblue {
+  border: 0.125rem solid var(--primary);
+}
 
-.underline-yellow {border-bottom: 0.25rem solid  var(--secondary);}
+.underline-yellow {
+  border-bottom: 0.25rem solid var(--secondary);
+}
 
 /* Background Color */
-.background-darkblue {background-color: var(--primary-variant);}
+.background-darkblue {
+  background-color: var(--primary-variant);
+}
 
-.background-red {background-color: var(--negative);}
+.background-red {
+  background-color: var(--negative);
+}
+
+.background-yellow {
+  background-color: var(--secondary);
+}
 
-.background-lightgray {background-color: var(--surface);}
+.background-green {
+  background-color: var(--positive);
+}
 
-.background-yellow {background-color: var(--secondary);}
+.background-lightgray {
+  background-color: var(--start-of-month);
+}
 
-.background-green {background-color: var(--positive);}
+.background-green {
+  background-color: var(--bold_tertiary);
+}
 
 /* Buttons */
 
@@ -376,4 +432,8 @@ main {
 .dates-calc {
     background-color: #222831;
     color: white;
-}
\ No newline at end of file
+}
+
+#darkmode {
+  cursor: pointer;
+}
diff --git a/app/static/images/calendar.png b/app/static/images/calendar.png
new file mode 100644
index 00000000..bde6774c
Binary files /dev/null and b/app/static/images/calendar.png differ
diff --git a/app/static/js/darkmode.js b/app/static/js/darkmode.js
new file mode 100644
index 00000000..0e4eeb7b
--- /dev/null
+++ b/app/static/js/darkmode.js
@@ -0,0 +1,29 @@
+const ROOT = document.documentElement;
+
+window.addEventListener("DOMContentLoaded", (event) => {
+  const button = document.getElementById("darkmode");
+  let isDarkMode = localStorage.getItem("isDarkMode") == "true";
+  setThemeMode(isDarkMode, button, ROOT);
+  button.addEventListener("click", (event) => {
+    isDarkMode = !isDarkMode;
+    localStorage.setItem("isDarkMode", isDarkMode);
+    setThemeMode(isDarkMode, button, ROOT);
+  });
+});
+
+function changeIcon(mode) {
+  const modeButton = document.getElementById("darkmode");
+  modeButton.name = mode;
+}
+
+function setThemeMode(isDarkMode, button, root) {
+  if (isDarkMode) {
+    root.dataset['colorMode'] = "dark";
+    button.name = "moon";
+    changeIcon("moon");
+  } else {
+    root.dataset['colorMode'] = "regular";
+    button.name = "moon-outline";
+    changeIcon("moon-outline");
+  }
+}
diff --git a/app/static/style.css b/app/static/style.css
index 799245ba..0d50dd25 100644
--- a/app/static/style.css
+++ b/app/static/style.css
@@ -1,3 +1,19 @@
+:root[data-color-mode="regular"] {
+  --backgroundcol: #F7F7F7;
+  --textcolor: #222831;
+  --navcolor: rgba(0, 0, 0, 0.55);
+  --navhovercolor: rgba(0, 0, 0, 0.7);
+  --cardcolor: #FFF;
+}
+
+:root[data-color-mode="dark"] {
+  --backgroundcol: #000000;
+  --textcolor: #EEEEEE;
+  --navcolor: #E9ECEF;
+  --navhovercolor: rgb(255 255 255);
+  --cardcolor: #230A88;
+}
+
 .profile-image {
   width: 7em;
 }
@@ -88,7 +104,12 @@ p {
   margin: 0;
 }
 
+.card {
+  background-color: var(--cardcolor);
+}
+
 .card-body {
+  color: var(--textcolor);
   overflow: auto;
 }
 
@@ -146,6 +167,31 @@ p {
   margin-top: 1em;
 }
 
+.relative.overflow-hidden {
+  background-color: var(--backgroundcol);
+  height: 100vh;
+}
+
+.navbar-light .navbar-nav .nav-link {
+  color: var(--navcolor);
+}
+
+.navbar-light .navbar-nav .nav-link:hover {
+  color: var(--navhovercolor);
+}
+
+.main-text-color {
+  color: var(--textcolor);
+}
+
+.cal-img {
+  text-align: center;
+}
+
+#darkmode {
+  cursor: pointer;
+}
+
 .upload-file {
   margin: auto 1em auto 0em;
 }
diff --git a/app/templates/agenda.html b/app/templates/agenda.html
index 54b65208..42d4ba47 100644
--- a/app/templates/agenda.html
+++ b/app/templates/agenda.html
@@ -56,7 +56,7 @@
     </div>
   </div>
 
-  <div class="pt-4 px-5">
+  <div class="pt-4 px-5 main-text-color">
     {% if start_date > end_date %}
       <p>{{ gettext("Start date is greater than end date") }}</p>
     {% elif events | length == 0 %}
diff --git a/app/templates/base.html b/app/templates/base.html
index d6039fb4..b8655f92 100644
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-color-mode="regular">
 
 <head>
     {% block head %}
@@ -75,6 +75,11 @@
                               <ion-icon name="notifications-outline"></ion-icon>
                           </a>
                         </li>
+                        <li class="nav-item">
+                            <a class="nav-link">
+                                <ion-icon id="darkmode" name="moon-outline"></ion-icon>
+                            </a>
+                        </li>
                     </ul>
                 </div>
             </nav>
@@ -92,6 +97,7 @@
     <script src="{{ url_for('static', path='/horoscope.js') }}"></script>
     <script src="{{ url_for('static', path='/graph.js') }}"></script>
     <script type="text/javascript" src="{{ url_for( 'static', path='/audio_settings.js' ) }}"></script>
+    <script src="{{ url_for('static', path='/js/darkmode.js') }}"></script>
     <script src="{{ url_for('static', path='/joke.js') }}"></script>
     <script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
     <audio id="my-audio" muted="true"></audio>
diff --git a/app/templates/categories.html b/app/templates/categories.html
index c70e8b1e..8bf15440 100644
--- a/app/templates/categories.html
+++ b/app/templates/categories.html
@@ -3,23 +3,22 @@
 {% block head %}
 {{ super() }}
 <link href="{{ url_for('static', path='/categories_style.css') }}" rel="stylesheet">
-<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
 {% endblock %}
 
 {% block content %}
 <div class="container mt-4">
-<h1>It's time to make some decisions</h1>
-<h1>
-  Here you can create your unique categories and choose your favorite color
-</h1>
+  <h1 class="main-text-color">It's time to make some decisions</h1>
+  <h1 class="main-text-color">
+    Here you can create your unique categories and choose your favorite color
+  </h1>
 
-<form action="/categories" method="POST" required>
-  <label for="category_name">Name your category:</label>
-  <p><input type="text" id ="name" name="name"></p>
-  <label for="category_color">Choose your favorite color:</label>
-  <p><input type="color"  class="custom" id ="color", name="color"></p>
-  <p><button type="submit" class="btn btn-success" value="submit">Submit</button></p>
-</form>
+  <form action="/categories" method="POST" required>
+    <label class="main-text-color" for="category_name">Name your category:</label>
+    <p><input type="text" id ="name" name="name"></p>
+    <label class="main-text-color" for="category_color">Choose your favorite color:</label>
+    <p><input type="color"  class="custom" id ="color", name="color"></p>
+    <p><button type="submit" class="btn btn-success" value="submit">Submit</button></p>
+  </form>
 </div>
 {% if message %}
   <div class="container mt-4">
diff --git a/app/templates/credits.html b/app/templates/credits.html
index 04d714dc..7b136bb8 100644
--- a/app/templates/credits.html
+++ b/app/templates/credits.html
@@ -6,7 +6,7 @@
 {% endblock %}
 
 {% block content %}
-    <h1>Say hello to our developers:</h1>
+    <h1 class="main-text-color">Say hello to our developers:</h1>
     {% for credit in credit_list %}
         <div class="gallery">
             <img src="{{ url_for('static', path='/credits_pictures/' + credit.picture + '.PNG') }}" alt="{{credit.name}}">
diff --git a/app/templates/four_o_four.j2 b/app/templates/four_o_four.j2
index cdaca95d..316df65e 100644
--- a/app/templates/four_o_four.j2
+++ b/app/templates/four_o_four.j2
@@ -5,7 +5,7 @@
 {% block content %}
 
 <div class="container">
-    <h2 class="fs-1">
+    <h2 class="fs-1 main-text-color">
         Not implemented</h2>
 </div>
 
diff --git a/app/templates/friendview.html b/app/templates/friendview.html
index 4eae3b60..81d8eeff 100644
--- a/app/templates/friendview.html
+++ b/app/templates/friendview.html
@@ -5,7 +5,7 @@
 {% endblock %}
 {% block content %}
 <div class="container mt-4">
-    <h1>Friends View </h1>
+    <h1 class="main-text-color">Friends View </h1>
 </div>
 <form method="GET" action="/friendview/">
     <div class="mb-3 friend-view">
@@ -16,7 +16,7 @@ <h1>Friends View </h1>
 </form>
 <div class="container mt-4">
     {% if events | length == 0 %}
-      <h2>No mutual events found...</h2>
+      <h2 class="main-text-color">No mutual events found...</h2>
     {% else %}
       <h2>Mutual events with {{ my_friend }} </h2>
         {% for event in events %}
diff --git a/app/templates/index.html b/app/templates/index.html
index 7e967f1f..29b1f89f 100644
--- a/app/templates/index.html
+++ b/app/templates/index.html
@@ -3,23 +3,24 @@
 {% block content %}
 
 <div class="mx-auto">
-  <main class="d-flex justify-content-center">
-    <div>
-      <h2 class="fs-1 fw-bold">
-        PyLendar
-        <br>
-      </h2>
-      <p>
-        Open Source Calendar built with Python
-      </p>
-      <div class="d-flex position-relative">
-        <div class="container mx-auto gap-3">
+    <main class="d-flex justify-content-center">
+        <div class="main-text-color">
+            <h2 class="fs-1 fw-bold">
+                PyLendar
+                <br>
+            </h2>
+            <p>
+                Open Source Calendar built with Python
+            </p>
+            <div class="d-flex position-relative">
+                <div class="container mx-auto gap-3">
 
                     {% if quote %}
                     {% if not quote.author%}
                     <p><i>"{{ quote.text }}"</i></p>
                     {% else %}
-                    <p><i>"{{ quote.text }}"</i> <span style="font-size: small;">&nbsp; \ {{quote.author}}</span>
+                    <p><i>"{{ quote.text }}"</i> <span
+                            style="font-size: small;">&nbsp; \ {{quote.author}}</span>
                     </p>
                     {% endif %}
                     {% endif %}
@@ -29,22 +30,21 @@ <h2 class="fs-1 fw-bold">
                 <a id="on">Start Audio</a>
                 <a id="off">Stop Audio</a>
             </div>
+            <div class="d-flex justify-content-center">
+                <div class="d-flex justify-content-center">
+                    <a href="{{ url_for('calendar') }}"
+                       class="btn btn-lg btn-primary shadow-lg bg-body p-3 mb-5 bg-gradient2 landing-page-button"
+                       type="button">
+                        <span>Get Started</span>
+                    </a>
+                </div>
+            </div>
         </div>
-      </div>
-      <div class="d-flex justify-content-center">
-        <div class="d-flex justify-content-center">
-          <a href="{{ url_for('calendar') }}"
-             class="btn btn-lg btn-primary shadow-lg bg-body p-3 mb-5 bg-gradient2 landing-page-button"
-             type="button">
-            <span>Get Started</span>
-          </a>
-        </div>
-      </div>
+    </main>
+    <div class="cal-img">
+        <img src="{{ url_for('static', path='/images/calendar.png') }}"
+             alt="calendar image">
     </div>
-  </main>
-  <div>
-    <img class="d-block w-100" src="{{ url_for('static', path='/images/calendar.jpg') }}" alt="calendar image">
-  </div>
 </div>
 
-{% endblock %}
+{% endblock %}
\ No newline at end of file
diff --git a/app/templates/invitations.html b/app/templates/invitations.html
new file mode 100644
index 00000000..e69de29b
diff --git a/app/templates/login.html b/app/templates/login.html
index 9b8b116e..94276998 100644
--- a/app/templates/login.html
+++ b/app/templates/login.html
@@ -1,11 +1,11 @@
 {% extends "partials/index/index_base.html" %}
 {% block content %}
     <div class="container">
-        <h3>Login</h3>
+        <h3 class="main-text-color">Login</h3>
         {% if message %}
             <div class="alert" style="color: red;">{{ message }}</div>
         {% endif %}
-        <form method="post">
+        <form method="post" class="main-text-color">
             <div class="row">
                 <label for="username" class="col-sm-2 col-form-label">Username</label>
                 <div class="col-auto">
diff --git a/app/templates/partials/base.html b/app/templates/partials/base.html
index 790a617d..6fc3ffaa 100644
--- a/app/templates/partials/base.html
+++ b/app/templates/partials/base.html
@@ -41,5 +41,6 @@
 <body>
 {% block body %}
 {% endblock %}
+<script src="{{ url_for('static', path='/js/darkmode.js') }}"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/app/templates/partials/calendar/navigation.html b/app/templates/partials/calendar/navigation.html
index ed73747d..ca83f4bd 100644
--- a/app/templates/partials/calendar/navigation.html
+++ b/app/templates/partials/calendar/navigation.html
@@ -29,6 +29,9 @@
           <ion-icon name="information-circle-outline"></ion-icon>
         </a>
       </div>
+      <div>
+        <ion-icon id="darkmode" name="moon-outline"></ion-icon>
+      </div>
     </div>
 
     <div class="user-features">
@@ -36,10 +39,8 @@
         <ion-icon name="chatbox"></ion-icon>
       </div>
     </div>
-
     <div id="open-features">
       <ion-icon name="ellipsis-vertical"></ion-icon>
     </div>
-
   </div>
 </nav>
diff --git a/app/templates/partials/index/navigation.html b/app/templates/partials/index/navigation.html
index 60baf35d..96df630b 100644
--- a/app/templates/partials/index/navigation.html
+++ b/app/templates/partials/index/navigation.html
@@ -49,6 +49,11 @@
                 <li class="nav-item">
                     <a class="nav-link" href="{{ url_for('medications') }}">Medication</a>
                 </li>
+                <li class="nav-item">
+                    <a class="nav-link">
+                        <ion-icon id="darkmode" name="moon-outline"></ion-icon>
+                    </a>
+                </li>
             </ul>
         </div>
     </div>
diff --git a/app/templates/partials/user_profile/middle_content/event_card.html b/app/templates/partials/user_profile/middle_content/event_card.html
index 53474f6a..070598e9 100644
--- a/app/templates/partials/user_profile/middle_content/event_card.html
+++ b/app/templates/partials/user_profile/middle_content/event_card.html
@@ -1,6 +1,6 @@
 <div class="card card-event mb-2 pb-0">
   <div class="card-header d-flex justify-content-between">
-    <small><i>Upcoming event on {{ event.start.strftime("%d/%m/%Y %H:%M") }}</i></small>
+    <small class="main-text-color"><i>Upcoming event on {{ event.start.strftime("%d/%m/%Y %H:%M") }}</i></small>
     <!-- Event settings -->
     {% include 'partials/user_profile/middle_content/event_settings.html' %}
   </div>
diff --git a/app/templates/register.html b/app/templates/register.html
index 8c136120..91eac437 100644
--- a/app/templates/register.html
+++ b/app/templates/register.html
@@ -1,8 +1,8 @@
 {% extends "partials/index/index_base.html" %}
 {% block content %}
     <div class="container">
-        <h3>Please Register</h3>
-        <form method="post">
+        <h3 class="main-text-color">Please Register</h3>
+        <form method="post" class="main-text-color">
             <div class="row">
                 <label for="username" class="col-sm-2 col-form-label">Username</label>
                 <div class="col-auto">
diff --git a/app/templates/search.html b/app/templates/search.html
index 36fcaa2d..adb98bc2 100644
--- a/app/templates/search.html
+++ b/app/templates/search.html
@@ -3,7 +3,7 @@
 
 {% block content %}
 
-  <div class="container mt-4">
+  <div class="container mt-4 main-text-color">
     <h1>Hello, {{ username }}</h1>
     <form name="searchForm" action="/search" onsubmit="return validateForm()" method="POST" required>
       <div class="form-row align-items-center">
@@ -20,7 +20,7 @@ <h1>Hello, {{ username }}</h1>
   </div>
 
   {% if message %}
-    <div class="container mt-4">
+    <div class="container mt-4 main-text-color">
       {{ message }}
     </div>
   {% endif %}