diff --git a/public/index.html b/public/index.html
index 03cc87c2..aeda7e5a 100644
--- a/public/index.html
+++ b/public/index.html
@@ -7,23 +7,38 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 </head>
 <body>
-  <!-- Popup content -->
-  <div class="popup-container" id="popup">
-    <p>Try the Konami Code!</p>
+  <div id="popup">
+    <p class="popup-text">Try mobile version of the website</p>
+    <p class="popup-text">Try the Konami Code!</p>
     <button onclick="closePopup()">Close</button>
   </div>
 
-  <button onclick="toggleMode()" class="toggle-button">Toggle Mode</button>
-  <h1>Weather App</h1>
-  <div class="search-container">
-    <input type="text" id="location-input" placeholder="Enter location...">
-    <button onclick="searchWeather()">Search</button>
+  <div id="header-container">
+    <div id="weather-app-icon">
+      <img src="images/015-meteorology.png" alt="Weather App Icon">
+    </div>
+    <div id="weather-app-title">
+      <h1>Weather App</h1>
+    </div>
+    <div class="mode-switch">
+      <input type="range" min="1" max="3" value="2" class="slider" id="modeSlider">
+      <p>Mode: <span id="modeText">Default</span></p>
+    </div>
+  </div>
+  
+  <div id="search-container">
+    <div id="location-input-div">
+      <input type="text" id="location-input-field" placeholder="Enter location...">
+    </div>
+    <div id="search-button-div">
+      <button id="search-button" onclick="searchWeatherOnClick()">Search</button>
+    </div>    
   </div>
-  <ul id="suggestions-list"></ul>
+  
+  <div id="suggestions-list" style="display: block;"></div>
 
-  <div class="weather-container">
-    <div id="current-weather-title" style="display: none;"><h2>Current Weather</h2> </div>
-    <div id="current-weather"></div>
+  <div id="weather-container">
+    <div id="current-weather" style="display: none;"></div>
     <h2 id="forecast-title" style="display: none;">Forecast</h2>
     <div class="forecast-table-container">
       <table id="forecast-table" class="forecast-table" style="display: none;">
diff --git a/public/styles.css b/public/styles.css
index 8e3ab3b9..6c68b021 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -1,3 +1,24 @@
+:root {
+  --default-background-color: #f0f0f0;
+  --default-text-color: #333;
+  --default-text-p-color: #666;
+  --default-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+  --default-hover-color: #a3a3a3;
+  --default-border-color: #000;
+  --light-background-color: #fff;
+  --light-text-color: #333;
+  --light-text-p-color: #666;
+  --light-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+  --light-hover-color: #b4b4b4;
+  --light-border-color: #000;
+  --dark-background-color: #333;
+  --dark-text-color: #fff;
+  --dark-text-p-color: #b4b4b4;
+  --dark-box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.1);
+  --dark-hover-color: #5f5f5f;
+  --dark-border-color: #fff;
+}
+
 /* Styles for desktop and larger screens */
 @media only screen and (min-width: 768px) {
   /* Adjustments for larger screens */
@@ -12,14 +33,29 @@
     color: #333;
   }
 
-  .toggle-button {
-    position: absolute;
-    top: 10px;
-    right: 10px;
-    padding: 8px 16px;
+  #suggestions-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  #suggestions-list li {
+    padding: 10px;
     cursor: pointer;
   }
   
+  #suggestions-list li:hover {
+    background-color: #525252;
+  }
+
+  #forecast-title {
+    padding: 10px;
+    cursor: pointer;
+  }
+  #forecast-title:hover {
+    background-color: #525252;
+  }
+  
   .dark-mode {
     /* Dark mode styles */
     font-family: Arial, sans-serif;
@@ -44,6 +80,24 @@
     background-color: #555;
     color: #fff;
   }
+
+  .dark-mode #current-weather {
+    background-color: #505050;
+    border-radius: 8px;
+    padding: 20px;
+    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+    margin: 20px auto;
+    max-width: 500px;
+  }
+
+  .dark-mode #current-weather h3 {
+    color: #ebebeb;
+    margin-bottom: 10px;
+  }
+  
+  .dark-mode #current-weather p {
+    color: #b4b4b4;
+  }
   
   h1 {
     text-align: center;
@@ -64,7 +118,7 @@
     cursor: pointer;
   }
   
-  .weather-container {
+  #weather-container {
     max-width: 100vw;
     margin: 0 auto;
   }
@@ -84,6 +138,25 @@
   th {
     background-color: #f2f2f2;
   }
+
+  /* Customize the appearance of the current weather data */
+  #current-weather {
+    background-color: #fff;
+    border-radius: 8px;
+    padding: 20px;
+    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+    margin: 20px auto;
+    max-width: 500px;
+  }
+
+  #current-weather h3 {
+    color: #333;
+    margin-bottom: 10px;
+  }
+  
+  #current-weather p {
+    color: #666;
+  }
   
   .forecast-table-container {
     max-height: 500px; /* Set the maximum height for the container */
@@ -95,7 +168,7 @@
     table-layout: fixed;
   }
   
-  .popup-container {
+  .popup {
     display: none;
     position: fixed;
     top: 50%;
@@ -106,11 +179,11 @@
     border: 1px solid #000000;
     z-index: 9999;
   }
-  .popup-container p {
+  .popup p {
     margin: 0;
     color: #000000;
   }
-  .popup-container button {
+  .popup button {
     margin-left: auto;
     margin-right: auto;
     display: block;
@@ -123,45 +196,407 @@
 @media only screen and (max-width: 767px) {
   /* Adjustments for smaller screens */
 
-  body {
+  .default-mode {
+    /* Default mode styles */
     font-family: Arial, sans-serif;
-    font-size: 10px;
+    font-size: 11px;
     margin: 0;
     padding: 10px;
+    background-color: var(--default-background-color);
+    color: var(--default-text-color);
+  }
+  
+  .light-mode {
     /* Default light mode styles */
-    background-color: #f0f0f0;
-    color: #333;
+    font-family: Arial, sans-serif;
+    font-size: 11px;
+    margin: 0;
+    padding: 10px;
+    background-color: var(--light-background-color);
+    color: var(--light-text-color);
+  }
+  
+  .dark-mode {
+    /* Dark mode styles */
+    font-family: Arial, sans-serif;
+    font-size: 11px;
+    margin: 0;
+    padding: 10px;
+    background-color: var(--dark-background-color);
+    color: var(--dark-text-color);
+  }
+
+  .mode-switch {
+    background-color: var(--default-background-color);
+    float: right;
+    border-radius: 8px;
+    padding: 10px;
+    box-shadow:var(--default-box-shadow);
+    color: var(--default-text-color);
+    flex: auto;
+    max-width: 80px;
+    height: 50px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .light-mode .mode-switch {
+    background-color: var(--light-background-color);
+    color: var(--light-text-color);
+    box-shadow:var(--light-box-shadow);
+  }
+
+  .dark-mode .mode-switch {
+    background-color: var(--dark-background-color);
+    color: var(--dark-text-color);
+    box-shadow:var(--dark-box-shadow);
+  }
+
+  /* TODO: Change Slider color depending on mode */
+
+  .slider {
+    width: 75px;
   }
 
-  .toggle-button {
-    position: absolute;
-    top: 10px;
-    right: 10px;
-    padding: 8px 16px;
+  #modeText {
+    font-size: 11px;
+  }
+  .default-mode #header-container {
+    background-color: var(--default-background-color);
+    margin: 0 auto;
+    max-width: 100%;
+    display: flex;
+    flex-direction: row;
+    margin-bottom: 5px;
+  }
+  .light-mode #header-container {
+    background-color: var(--light-background-color);
+    margin: 0 auto;
+    max-width: 100%;
+    display: flex;
+    flex-direction: row;
+    margin-bottom: 5px;
+  }
+  .dark-mode #header-container {
+    background-color: var(--dark-background-color);
+    margin: 0 auto;
+    max-width: 100%;
+    display: flex;
+    flex-direction: row;
+    margin-bottom: 5px;
+  }
+  .default-mode #weather-app-icon {
+    color: var(--default-text-color);
+    text-align: center;
+    margin-top: 0px;
+    margin-right: 5px;
+    border-radius: 8px;
+    max-width: 50px;
+    height: 50px;
+    padding: 10px;
+    box-shadow:var(--default-box-shadow);
+    color: var(--default-text-color);
+    flex: auto;
     cursor: pointer;
   }
+  .default-mode #weather-app-icon img {
+    height: 50px;
+    width: 50px;
+    cursor: pointer;
+  }
+
+  .light-mode #weather-app-icon {
+    color: var(--light-text-color);
+    text-align: center;
+    margin-top: 0px;
+    margin-right: 5px;
+    border-radius: 8px;
+    max-width: 50px;
+    height: 50px;
+    padding: 10px;
+    box-shadow:var(--light-box-shadow);
+    color: var(--light-text-color);
+    flex: auto;
+    cursor: pointer;
+  }
+  .light-mode #weather-app-icon img {
+    height: 50px;
+    width: 50px;
+    cursor: pointer;
+  }
+  .dark-mode #weather-app-icon {
+    color: var(--dark-text-color);
+    text-align: center;
+    margin-top: 0px;
+    margin-right: 5px;
+    border-radius: 8px;
+    max-width: 50px;
+    height: 50px;
+    padding: 10px;
+    box-shadow:var(--dark-box-shadow);
+    color: var(--dark-text-color);
+    flex: auto;
+    cursor: pointer;
+  }
+  .dark-mode #weather-app-icon img {
+    height: 50px;
+    width: 50px;
+    cursor: pointer;
+  }
+  .default-mode #weather-app-title {
+    color: var(--default-text-color);
+    text-align: center;
+    margin-top: 0px;
+    margin-right: 5px;
+    border-radius: 8px;
+    height: 50px;
+    padding: 10px;
+    box-shadow:var(--default-box-shadow);
+    color: var(--default-text-color);
+    flex: auto;
+  }
+  .light-mode #weather-app-title {
+    color: var(--light-text-color);
+    text-align: center;
+    margin-top: 0px;
+    margin-right: 5px;
+    border-radius: 8px;
+    height: 50px;
+    padding: 10px;
+    box-shadow:var(--light-box-shadow);
+    color: var(--light-text-color);
+    flex: auto;
+  }
+  .dark-mode #weather-app-title {
+    color: var(--dark-text-color);
+    text-align: center;
+    margin-top: 0px;
+    margin-right: 5px;
+    border-radius: 8px;
+    height: 50px;
+    padding: 10px;
+    box-shadow:var(--dark-box-shadow);
+    color: var(--dark-text-color);
+    flex: auto;
+  }
+
+  .default-mode #search-container {
+    text-align: right;
+    margin-bottom: 5px;
+    max-width: 100%;
+    display: flex;
+    flex-direction: row;
+  }
+  .light-mode #search-container {
+    text-align: right;
+    margin-bottom: 5px;
+    max-width: 100%;
+    display: flex;
+    flex-direction: row;
+  }
+  .dark-mode #search-container {
+    text-align: right;
+    margin-bottom: 5px;
+    max-width: 100%;
+    display: flex;
+    flex-direction: row;
+  }
+
+  .default-mode #location-input-div {
+    max-width: 100%;
+    margin-right: 10px;
+    flex: auto;
+  }
+  .default-mode #location-input-field {
+    padding: 8px;
+    width: 100%;
+    border-radius: 8px;
+    background-color: var(--default-background-color);
+    box-shadow:var(--default-box-shadow);
+    color: var(--default-text-color);
+  }
+  .light-mode #location-input-div {
+    max-width: 100%;
+    margin-right: 10px;
+    flex: auto;
+  }
+  .light-mode #location-input-field {
+    padding: 8px;
+    width: 100%;
+    border-radius: 8px;
+    background-color: var(--light-background-color);
+    box-shadow:var(--light-box-shadow);
+    color: var(--light-text-color);
+  }
+  .dark-mode #location-input-div {
+    max-width: 100%;
+    margin-right: 10px;
+    flex: auto;
+  }
+  .dark-mode #location-input-field {
+    padding: 8px;
+    width: 100%;
+    border-radius: 8px;
+    background-color: var(--dark-background-color);
+    box-shadow:var(--dark-box-shadow);
+    color: var(--dark-text-color);
+  }
   
-  .dark-mode {
-    /* Dark mode styles */
-    background-color: #333;
-    color: #fff;
+  .default-mode #search-button-div {
+    max-width: 100px;
+    flex: auto;
+  }
+  .default-mode #search-button {
+    cursor: pointer;
+    border-radius: 8px;
+    background-color: var(--default-background-color);
+    box-shadow:var(--default-box-shadow);
+    color: var(--default-text-color);
+  }
+  .light-mode #search-button-div {
+    max-width: 100px;
+    flex: auto;
+  }
+  .light-mode #search-button {
+    cursor: pointer;
+    border-radius: 8px;
+    background-color: var(--light-background-color);
+    box-shadow:var(--light-box-shadow);
+    color: var(--light-text-color);
+  }
+  .dark-mode #search-button-div {
+    max-width: 100px;
+    flex: auto;
+  }
+  .dark-mode #search-button {
+    cursor: pointer;
+    border-radius: 8px;
+    background-color: var(--dark-background-color);
+    box-shadow:var(--dark-box-shadow);
+    color: var(--dark-text-color);
+  }
+
+  .default-mode #suggestions-list {
+    list-style: none;
+    border-radius: 8px;
+    padding: 10px;
+    margin: 0;
+  }
+  .default-mode #suggestions-list li {
+    padding: 5px;
+    cursor: pointer;
+  }
+  .default-mode #suggestions-list li:hover {
+    background-color: var(--default-hover-color);
+  }
+
+  .light-mode #suggestions-list {
+    list-style: none;
+    border-radius: 8px;
+    padding: 10px;
+    margin: 0;
+  }
+  .light-mode #suggestions-list li {
+    padding: 5px;
+    cursor: pointer;
+  }
+  .light-mode #suggestions-list li:hover {
+    background-color: var(--light-hover-color);
+  }
+
+  .dark-mode #suggestions-list {
+    list-style: none;
+    border-radius: 8px;
+    padding: 10px;
+    margin: 0;
+  }
+  .dark-mode #suggestions-list li {
+    padding: 5px;
+    cursor: pointer;
+  }
+  .dark-mode #suggestions-list li:hover {
+    background-color: var(--dark-hover-color);
+  }
+
+  .default-mode #current-weather {
+    background-color:var(--default-background-color);
+    border-radius: 8px;
+    padding: 10px;
+    color: var(--default-text-color);
+    box-shadow: var(--default-box-shadow);
+    max-width: 100%;
+  }
+  .default-mode #current-weather h3 {
+    color: var(--default-text-color);
+    margin-top: 0px;
+    text-align: center;
+  }
+  .default-mode #current-weather p {
+    color: var(--default-text-p-color);
+  }
+
+  .light-mode #current-weather {
+    background-color: var(--light-background-color);
+    border-radius: 8px;
+    padding: 10px;
+    box-shadow: var(--light-box-shadow);
+    max-width: 100%;
+  }
+  .light-mode #current-weather h3 {
+    color: var(--light-text-color);
+    margin-top: 0px;
+    text-align: center;
+  }
+  .light-mode #current-weather p {
+    color: var(--light-text-p-color);
+  }
+
+  .dark-mode #current-weather {
+    background-color: var(--dark-background-color);
+    border-radius: 8px;
+    padding: 10px;
+    box-shadow: var(--dark-box-shadow);
+    max-width: 100%;
+  }
+
+  .dark-mode #current-weather h3 {
+    color: var(--dark-text-color);
+    margin-top: 0px;
+    text-align: center;
   }
   
+  .dark-mode #current-weather p {
+    color: var(--dark-text-p-color);
+  }
+  
+  .light-mode table {
+    /* Table styles for light mode */
+    border: 1px solid #000;
+  }
+  .light-mode th {
+    background-color: #f2f2f2;
+    color: #000;
+  }
+  .light-mode td {
+    background-color: #fff;
+    color: #000;
+  }
+
   .dark-mode table {
     /* Table styles for dark mode */
     border: 1px solid #fff;
   }
-  
   .dark-mode th {
     background-color: #444;
     color: #fff;
   }
-  
   .dark-mode td {
     background-color: #555;
     color: #fff;
   }
-  
+
   h1 {
     text-align: center;
   }
@@ -181,7 +616,7 @@
     cursor: pointer;
   }
   
-  .weather-container {
+  #weather-container {
     max-width: 100vw;
     margin: 0 auto;
   }
@@ -201,6 +636,24 @@
   th {
     background-color: #f2f2f2;
   }
+
+  #current-weather {
+    background-color: #fff;
+    border-radius: 8px;
+    padding: 20px;
+    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+    margin: 20px auto;
+    max-width: 500px;
+  }
+
+  #current-weather h3 {
+    color: #333;
+    margin-bottom: 10px;
+  }
+  
+  #current-weather p {
+    color: #666;
+  }
   
   .forecast-table-container {
     max-height: 500px; /* Set the maximum height for the container */
@@ -212,29 +665,32 @@
     table-layout: fixed;
   }
   
-  .popup-container {
+  #popup {
     display: none;
     position: fixed;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    background: #888888;
-    padding: 20px;
-    border: 1px solid #000000;
+    background: #e9e9e9;
+    padding: 10px;
+    border: 1px solid var(--default-border-color);
+    border-radius: 8px;
+    box-shadow: var(--default-box-shadow);
+    margin: 20px auto;
     z-index: 9999;
   }
-  .popup-container p {
-    margin: 0;
+  #popup .popup-text {
+    margin-top: 5px;
     color: #000000;
+    text-align: center;
   }
-  .popup-container button {
+  #popup button {
+    padding: 5px 5px;
     margin-left: auto;
     margin-right: auto;
+    border-radius: 5px;
     display: block;
   }
-
-  /* For example: Modify layout, reduce padding/margins, etc. */
-  /* Add your CSS rules here */
 }
 
 
diff --git a/src/images/001-sun.png b/src/images/001-sun.png
new file mode 100644
index 00000000..931ad367
Binary files /dev/null and b/src/images/001-sun.png differ
diff --git a/src/images/002-cloudy.png b/src/images/002-cloudy.png
new file mode 100644
index 00000000..7d012d0e
Binary files /dev/null and b/src/images/002-cloudy.png differ
diff --git a/src/images/003-computing-cloud.png b/src/images/003-computing-cloud.png
new file mode 100644
index 00000000..57fffbc7
Binary files /dev/null and b/src/images/003-computing-cloud.png differ
diff --git a/src/images/004-storm.png b/src/images/004-storm.png
new file mode 100644
index 00000000..668446e4
Binary files /dev/null and b/src/images/004-storm.png differ
diff --git a/src/images/005-hot.png b/src/images/005-hot.png
new file mode 100644
index 00000000..33796218
Binary files /dev/null and b/src/images/005-hot.png differ
diff --git a/src/images/006-snowflake.png b/src/images/006-snowflake.png
new file mode 100644
index 00000000..3b66093f
Binary files /dev/null and b/src/images/006-snowflake.png differ
diff --git a/src/images/007-snow.png b/src/images/007-snow.png
new file mode 100644
index 00000000..e13e3bac
Binary files /dev/null and b/src/images/007-snow.png differ
diff --git a/src/images/008-rain.png b/src/images/008-rain.png
new file mode 100644
index 00000000..cf6a8d9f
Binary files /dev/null and b/src/images/008-rain.png differ
diff --git a/src/images/009-cloudy-1.png b/src/images/009-cloudy-1.png
new file mode 100644
index 00000000..ec77c1ff
Binary files /dev/null and b/src/images/009-cloudy-1.png differ
diff --git a/src/images/010-rain-1.png b/src/images/010-rain-1.png
new file mode 100644
index 00000000..e902c54f
Binary files /dev/null and b/src/images/010-rain-1.png differ
diff --git a/src/images/011-cold.png b/src/images/011-cold.png
new file mode 100644
index 00000000..7c5136d9
Binary files /dev/null and b/src/images/011-cold.png differ
diff --git a/src/images/012-crescent-moon.png b/src/images/012-crescent-moon.png
new file mode 100644
index 00000000..eeefd250
Binary files /dev/null and b/src/images/012-crescent-moon.png differ
diff --git a/src/images/013-moon.png b/src/images/013-moon.png
new file mode 100644
index 00000000..60289963
Binary files /dev/null and b/src/images/013-moon.png differ
diff --git a/src/images/014-wind.png b/src/images/014-wind.png
new file mode 100644
index 00000000..760f469c
Binary files /dev/null and b/src/images/014-wind.png differ
diff --git a/src/images/015-meteorology.png b/src/images/015-meteorology.png
new file mode 100644
index 00000000..269dfef8
Binary files /dev/null and b/src/images/015-meteorology.png differ
diff --git a/src/images/016-forecast.png b/src/images/016-forecast.png
new file mode 100644
index 00000000..3e32c5c3
Binary files /dev/null and b/src/images/016-forecast.png differ
diff --git a/src/index.html b/src/index.html
index 03cc87c2..aeda7e5a 100644
--- a/src/index.html
+++ b/src/index.html
@@ -7,23 +7,38 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 </head>
 <body>
-  <!-- Popup content -->
-  <div class="popup-container" id="popup">
-    <p>Try the Konami Code!</p>
+  <div id="popup">
+    <p class="popup-text">Try mobile version of the website</p>
+    <p class="popup-text">Try the Konami Code!</p>
     <button onclick="closePopup()">Close</button>
   </div>
 
-  <button onclick="toggleMode()" class="toggle-button">Toggle Mode</button>
-  <h1>Weather App</h1>
-  <div class="search-container">
-    <input type="text" id="location-input" placeholder="Enter location...">
-    <button onclick="searchWeather()">Search</button>
+  <div id="header-container">
+    <div id="weather-app-icon">
+      <img src="images/015-meteorology.png" alt="Weather App Icon">
+    </div>
+    <div id="weather-app-title">
+      <h1>Weather App</h1>
+    </div>
+    <div class="mode-switch">
+      <input type="range" min="1" max="3" value="2" class="slider" id="modeSlider">
+      <p>Mode: <span id="modeText">Default</span></p>
+    </div>
+  </div>
+  
+  <div id="search-container">
+    <div id="location-input-div">
+      <input type="text" id="location-input-field" placeholder="Enter location...">
+    </div>
+    <div id="search-button-div">
+      <button id="search-button" onclick="searchWeatherOnClick()">Search</button>
+    </div>    
   </div>
-  <ul id="suggestions-list"></ul>
+  
+  <div id="suggestions-list" style="display: block;"></div>
 
-  <div class="weather-container">
-    <div id="current-weather-title" style="display: none;"><h2>Current Weather</h2> </div>
-    <div id="current-weather"></div>
+  <div id="weather-container">
+    <div id="current-weather" style="display: none;"></div>
     <h2 id="forecast-title" style="display: none;">Forecast</h2>
     <div class="forecast-table-container">
       <table id="forecast-table" class="forecast-table" style="display: none;">
diff --git a/src/index.js b/src/index.js
index 658af018..d017f710 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,25 +1,47 @@
-let isDarkMode = false;
+// TODO: Current Weather background change depending on weather only on default mode, Light mode and Dark mode background doesn't change
+// TODO: Slider for Modes: Light, Default, Dark
+// TODO: Developer Mode for OpenWeatherMap API Key
+// TODO: 
 
-function toggleMode() {
-  const body = document.body;
-  body.classList.toggle('dark-mode');
-  isDarkMode = !isDarkMode;
+// TODO: Change before commit
 
-  // Save user preference to localStorage
-  localStorage.setItem('darkMode', isDarkMode);
-}
-
-// Check user preference in localStorage on page load
-window.onload = function () {
-  const userPrefersDark = localStorage.getItem('darkMode') === 'true';
+const apiKey = process.env.REACT_APP_OPENWEATHERMAPAPI;
+const mapboxToken = process.env.REACT_APP_MAPBOXTOKEN;
 
-  if (userPrefersDark) {
-    toggleMode();
+const modeSlider = document.getElementById('modeSlider');
+const modeText = document.getElementById('modeText');
+const MODE_KEY = 'websiteMode';
+
+function updateMode(mode) {
+  switch (mode) {
+    case 'Light':
+      document.body.classList.remove('dark-mode');
+      document.body.classList.add('light-mode');
+      document.body.classList.remove('default-mode');
+      break;
+    case 'Default':
+      document.body.classList.remove('dark-mode', 'light-mode');
+      document.body.classList.add('default-mode');
+      break;
+    case 'Dark':
+      document.body.classList.remove('light-mode');
+      document.body.classList.add('dark-mode');
+      document.body.classList.remove('default-mode');
+      break;
+    default:
+      break;
   }
-};
+  modeText.textContent = mode;
+  localStorage.setItem(MODE_KEY, mode);
+}
 
-const apiKey = process.env.REACT_APP_OPENWEATHERMAPAPI;
-const mapboxToken = process.env.REACT_APP_MAPBOXTOKEN;
+if (localStorage.getItem(MODE_KEY)) {
+  const savedMode = localStorage.getItem(MODE_KEY);
+  modeSlider.value = savedMode === 'Light' ? '1' : savedMode === 'Dark' ? '3' : '2';
+  updateMode(savedMode);
+} else {
+  updateMode('Default'); // Set default mode if no saved mode is found
+}
 
 // Function to fetch location suggestions from MapBox API
 async function getLocationSuggestions(query) {
@@ -36,6 +58,7 @@ async function getLocationSuggestions(query) {
 // Function to display location suggestions
 function displayLocationSuggestions(suggestions) {
   const suggestionsList = document.getElementById('suggestions-list');
+  suggestionsList.style.display = 'block';
   suggestionsList.innerHTML = '';
 
   suggestions.forEach(suggestion => {
@@ -47,23 +70,30 @@ function displayLocationSuggestions(suggestions) {
 }
 
 // Function to handle the selection of a location from suggestions
-async function selectLocation(coordinates, placeName) {
+async function selectLocation(coordinates, place_name) {
   const [longitude, latitude] = coordinates; // Correctly extract latitude and longitude
 
   try {
     const weatherData = await getWeatherData(latitude, longitude);
     const forecastData = await getForecastData(latitude, longitude);
   
-    displayCurrentWeather(weatherData);
+    displayCurrentWeather(weatherData, place_name);
     displayForecastData(forecastData);
 
     // Set selected suggestion to the input box
-    const locationInput = document.getElementById('location-input');
-    locationInput.value = `${placeName}`;
+    const locationInput = document.getElementById('location-input-field');
+    locationInput.value = `${place_name}`;
 
     // Clear suggestions list from the DOM
     const suggestionsList = document.getElementById('suggestions-list');
     suggestionsList.innerHTML = '';
+    
+    // Hide the suggestions list
+    suggestionsList.style.display = 'none';
+
+    // Move cursor out of the input field
+    locationInput.blur(); 
+
   } catch (error) {
     console.error('Error fetching weather data:', error);
     // Handle error - for example, display an error message to the user
@@ -72,7 +102,7 @@ async function selectLocation(coordinates, placeName) {
 
 // Function to handle user input for location autocomplete
 async function handleInput() {
-  const locationInput = document.getElementById('location-input').value;
+  const locationInput = document.getElementById('location-input-field').value;
   if (locationInput.length > 0) {
     const suggestions = await getLocationSuggestions(locationInput);
     displayLocationSuggestions(suggestions);
@@ -97,18 +127,19 @@ async function getForecastData(latitude, longitude) {
 }
 
 // Function to display current weather
-function displayCurrentWeather(weather) {
+function displayCurrentWeather(weather, place_name) {
   const currentWeatherElement = document.getElementById('current-weather');
   currentWeatherElement.innerHTML = `
+    <h3>Current Weather in ${place_name}</h3>
     <p>Temperature: ${weather.main.temp}°C</p>
     <p>Feels Like: ${weather.main.feels_like}°C</p>
     <p>Pressure: ${weather.main.pressure} hPa</p>
     <p>Humidity: ${weather.main.humidity}%</p>
   `;
 
-  // Display the current weather title
-  const currentWeatherTitle = document.getElementById('current-weather-title');
-  currentWeatherTitle.style.display = 'block';
+  // Display the current weather element
+  const currentWeather = document.getElementById('current-weather');
+  currentWeather.style.display = 'block';
 }
 
 // Function to display forecast data in a table
@@ -142,12 +173,22 @@ function displayForecastData(forecast) {
   const forecastTitle = document.getElementById('forecast-title');
   const forecastTable = document.getElementById('forecast-table');
   forecastTitle.style.display = 'block';
-  forecastTable.style.display = 'table';
+  forecastTable.style.display = 'none';
+}
+
+// Function to handle the toggle of forecast table visibility
+function toggleForecastTable() {
+  const forecastTable = document.getElementById('forecast-table');
+  if (forecastTable.style.display === 'none') {
+    forecastTable.style.display = 'table';
+  } else {
+    forecastTable.style.display = 'none';
+  }
 }
 
 // Function to handle the search and retrieve weather data
 async function searchWeather() {
-  const locationInput = document.getElementById('location-input').value;
+  const locationInput = document.getElementById('location-input-field').value;
   
   // Fetch coordinates using MapBox geocoding API
   const mapboxResponse = await fetch(`https://api.mapbox.com/geocoding/v5/mapbox.places/${locationInput}.json?access_token=${mapboxToken}`);
@@ -160,13 +201,13 @@ async function searchWeather() {
   const weatherData = await getWeatherData(`${latitude},${longitude}`);
   const forecastData = await getForecastData(`${latitude},${longitude}`);
   
-  displayCurrentWeather(weatherData);
+  displayCurrentWeather(weatherData, mapboxData.features[0].place_name);
   displayForecastData(forecastData);
 }
 
 // Function to handle search when button is clicked or Enter is pressed
 function searchWeatherOnClick() {
-  const locationInput = document.getElementById('location-input').value;
+  const locationInput = document.getElementById('location-input-field').value;
 
   if (locationInput.length > 0) {
     // Fetch suggestions from MapBox API
@@ -174,8 +215,8 @@ function searchWeatherOnClick() {
       .then(suggestions => {
         if (suggestions.length > 0) {
           const coordinates = suggestions[0].coordinates;
-          const placeName = suggestions[0].place_name;
-          selectLocation(coordinates, placeName);
+          const place_name = suggestions[0].place_name;
+          selectLocation(coordinates, place_name);
         }
       })
       .catch(error => {
@@ -183,6 +224,14 @@ function searchWeatherOnClick() {
         // Handle error - for example, display an error message to the user
       });
   }
+  else {
+    alert('Please enter a location to search for weather data.');
+  }
+}
+
+function clearInputField() {
+  const locationInput = document.getElementById('location-input-field');
+  locationInput.value = ''; // Clear the input field value
 }
 
 function displayPopupOnDesktop() {
@@ -200,8 +249,7 @@ function closePopup() {
 }
 
 // Set timeout to display the popup after 20 seconds for desktop devices
-setTimeout(displayPopupOnDesktop, 5000); // 20 seconds in milliseconds 
-// TODO: Change to 20 seconds
+setTimeout(displayPopupOnDesktop, 20000); // 20 seconds in milliseconds 
 
 const konamiCode = ['ArrowUp', 'ArrowUp', 'ArrowDown', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowLeft', 'ArrowRight', 'b', 'a'];
 let konamiCodeIndex = 0;
@@ -224,12 +272,23 @@ function checkKonamiCode(event) {
 }
 
 // Attach an event listener to the input field for real-time suggestions
-const inputField = document.getElementById('location-input');
+const inputField = document.getElementById('location-input-field');
 inputField.addEventListener('input', handleInput);
 
-const searchButton = document.querySelector('button');
+const searchButton = document.getElementById('search-button');
 searchButton.addEventListener('click', searchWeatherOnClick);
 
+const locationInput = document.getElementById('location-input-field');
+locationInput.addEventListener('click', clearInputField);
+
+const forecastTitle = document.getElementById('forecast-title');
+forecastTitle.addEventListener('click', toggleForecastTable);
+
+const weatherAppIcon = document.getElementById('weather-app-icon');
+weatherAppIcon.addEventListener('click', () => {
+  location.reload();
+});
+
 // Handle Enter key press
 inputField.addEventListener('keypress', function(event) {
   if (event.key === 'Enter') {
@@ -245,3 +304,24 @@ document.addEventListener('keydown', function(event) {
     checkKonamiCode(event);
   }
 });
+
+// Event listener for mode slider change
+modeSlider.addEventListener('input', () => {
+  let mode = 'Default';
+
+  switch (parseInt(modeSlider.value)) {
+    case 1:
+      mode = 'Light';
+      break;
+    case 2:
+      mode = 'Default';
+      break;
+    case 3:
+      mode = 'Dark';
+      break;
+    default:
+      break;
+  }
+
+  updateMode(mode);
+});
\ No newline at end of file
diff --git a/src/styles.css b/src/styles.css
index 8e3ab3b9..6c68b021 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1,3 +1,24 @@
+:root {
+  --default-background-color: #f0f0f0;
+  --default-text-color: #333;
+  --default-text-p-color: #666;
+  --default-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+  --default-hover-color: #a3a3a3;
+  --default-border-color: #000;
+  --light-background-color: #fff;
+  --light-text-color: #333;
+  --light-text-p-color: #666;
+  --light-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+  --light-hover-color: #b4b4b4;
+  --light-border-color: #000;
+  --dark-background-color: #333;
+  --dark-text-color: #fff;
+  --dark-text-p-color: #b4b4b4;
+  --dark-box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.1);
+  --dark-hover-color: #5f5f5f;
+  --dark-border-color: #fff;
+}
+
 /* Styles for desktop and larger screens */
 @media only screen and (min-width: 768px) {
   /* Adjustments for larger screens */
@@ -12,14 +33,29 @@
     color: #333;
   }
 
-  .toggle-button {
-    position: absolute;
-    top: 10px;
-    right: 10px;
-    padding: 8px 16px;
+  #suggestions-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  #suggestions-list li {
+    padding: 10px;
     cursor: pointer;
   }
   
+  #suggestions-list li:hover {
+    background-color: #525252;
+  }
+
+  #forecast-title {
+    padding: 10px;
+    cursor: pointer;
+  }
+  #forecast-title:hover {
+    background-color: #525252;
+  }
+  
   .dark-mode {
     /* Dark mode styles */
     font-family: Arial, sans-serif;
@@ -44,6 +80,24 @@
     background-color: #555;
     color: #fff;
   }
+
+  .dark-mode #current-weather {
+    background-color: #505050;
+    border-radius: 8px;
+    padding: 20px;
+    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+    margin: 20px auto;
+    max-width: 500px;
+  }
+
+  .dark-mode #current-weather h3 {
+    color: #ebebeb;
+    margin-bottom: 10px;
+  }
+  
+  .dark-mode #current-weather p {
+    color: #b4b4b4;
+  }
   
   h1 {
     text-align: center;
@@ -64,7 +118,7 @@
     cursor: pointer;
   }
   
-  .weather-container {
+  #weather-container {
     max-width: 100vw;
     margin: 0 auto;
   }
@@ -84,6 +138,25 @@
   th {
     background-color: #f2f2f2;
   }
+
+  /* Customize the appearance of the current weather data */
+  #current-weather {
+    background-color: #fff;
+    border-radius: 8px;
+    padding: 20px;
+    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+    margin: 20px auto;
+    max-width: 500px;
+  }
+
+  #current-weather h3 {
+    color: #333;
+    margin-bottom: 10px;
+  }
+  
+  #current-weather p {
+    color: #666;
+  }
   
   .forecast-table-container {
     max-height: 500px; /* Set the maximum height for the container */
@@ -95,7 +168,7 @@
     table-layout: fixed;
   }
   
-  .popup-container {
+  .popup {
     display: none;
     position: fixed;
     top: 50%;
@@ -106,11 +179,11 @@
     border: 1px solid #000000;
     z-index: 9999;
   }
-  .popup-container p {
+  .popup p {
     margin: 0;
     color: #000000;
   }
-  .popup-container button {
+  .popup button {
     margin-left: auto;
     margin-right: auto;
     display: block;
@@ -123,45 +196,407 @@
 @media only screen and (max-width: 767px) {
   /* Adjustments for smaller screens */
 
-  body {
+  .default-mode {
+    /* Default mode styles */
     font-family: Arial, sans-serif;
-    font-size: 10px;
+    font-size: 11px;
     margin: 0;
     padding: 10px;
+    background-color: var(--default-background-color);
+    color: var(--default-text-color);
+  }
+  
+  .light-mode {
     /* Default light mode styles */
-    background-color: #f0f0f0;
-    color: #333;
+    font-family: Arial, sans-serif;
+    font-size: 11px;
+    margin: 0;
+    padding: 10px;
+    background-color: var(--light-background-color);
+    color: var(--light-text-color);
+  }
+  
+  .dark-mode {
+    /* Dark mode styles */
+    font-family: Arial, sans-serif;
+    font-size: 11px;
+    margin: 0;
+    padding: 10px;
+    background-color: var(--dark-background-color);
+    color: var(--dark-text-color);
+  }
+
+  .mode-switch {
+    background-color: var(--default-background-color);
+    float: right;
+    border-radius: 8px;
+    padding: 10px;
+    box-shadow:var(--default-box-shadow);
+    color: var(--default-text-color);
+    flex: auto;
+    max-width: 80px;
+    height: 50px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .light-mode .mode-switch {
+    background-color: var(--light-background-color);
+    color: var(--light-text-color);
+    box-shadow:var(--light-box-shadow);
+  }
+
+  .dark-mode .mode-switch {
+    background-color: var(--dark-background-color);
+    color: var(--dark-text-color);
+    box-shadow:var(--dark-box-shadow);
+  }
+
+  /* TODO: Change Slider color depending on mode */
+
+  .slider {
+    width: 75px;
   }
 
-  .toggle-button {
-    position: absolute;
-    top: 10px;
-    right: 10px;
-    padding: 8px 16px;
+  #modeText {
+    font-size: 11px;
+  }
+  .default-mode #header-container {
+    background-color: var(--default-background-color);
+    margin: 0 auto;
+    max-width: 100%;
+    display: flex;
+    flex-direction: row;
+    margin-bottom: 5px;
+  }
+  .light-mode #header-container {
+    background-color: var(--light-background-color);
+    margin: 0 auto;
+    max-width: 100%;
+    display: flex;
+    flex-direction: row;
+    margin-bottom: 5px;
+  }
+  .dark-mode #header-container {
+    background-color: var(--dark-background-color);
+    margin: 0 auto;
+    max-width: 100%;
+    display: flex;
+    flex-direction: row;
+    margin-bottom: 5px;
+  }
+  .default-mode #weather-app-icon {
+    color: var(--default-text-color);
+    text-align: center;
+    margin-top: 0px;
+    margin-right: 5px;
+    border-radius: 8px;
+    max-width: 50px;
+    height: 50px;
+    padding: 10px;
+    box-shadow:var(--default-box-shadow);
+    color: var(--default-text-color);
+    flex: auto;
     cursor: pointer;
   }
+  .default-mode #weather-app-icon img {
+    height: 50px;
+    width: 50px;
+    cursor: pointer;
+  }
+
+  .light-mode #weather-app-icon {
+    color: var(--light-text-color);
+    text-align: center;
+    margin-top: 0px;
+    margin-right: 5px;
+    border-radius: 8px;
+    max-width: 50px;
+    height: 50px;
+    padding: 10px;
+    box-shadow:var(--light-box-shadow);
+    color: var(--light-text-color);
+    flex: auto;
+    cursor: pointer;
+  }
+  .light-mode #weather-app-icon img {
+    height: 50px;
+    width: 50px;
+    cursor: pointer;
+  }
+  .dark-mode #weather-app-icon {
+    color: var(--dark-text-color);
+    text-align: center;
+    margin-top: 0px;
+    margin-right: 5px;
+    border-radius: 8px;
+    max-width: 50px;
+    height: 50px;
+    padding: 10px;
+    box-shadow:var(--dark-box-shadow);
+    color: var(--dark-text-color);
+    flex: auto;
+    cursor: pointer;
+  }
+  .dark-mode #weather-app-icon img {
+    height: 50px;
+    width: 50px;
+    cursor: pointer;
+  }
+  .default-mode #weather-app-title {
+    color: var(--default-text-color);
+    text-align: center;
+    margin-top: 0px;
+    margin-right: 5px;
+    border-radius: 8px;
+    height: 50px;
+    padding: 10px;
+    box-shadow:var(--default-box-shadow);
+    color: var(--default-text-color);
+    flex: auto;
+  }
+  .light-mode #weather-app-title {
+    color: var(--light-text-color);
+    text-align: center;
+    margin-top: 0px;
+    margin-right: 5px;
+    border-radius: 8px;
+    height: 50px;
+    padding: 10px;
+    box-shadow:var(--light-box-shadow);
+    color: var(--light-text-color);
+    flex: auto;
+  }
+  .dark-mode #weather-app-title {
+    color: var(--dark-text-color);
+    text-align: center;
+    margin-top: 0px;
+    margin-right: 5px;
+    border-radius: 8px;
+    height: 50px;
+    padding: 10px;
+    box-shadow:var(--dark-box-shadow);
+    color: var(--dark-text-color);
+    flex: auto;
+  }
+
+  .default-mode #search-container {
+    text-align: right;
+    margin-bottom: 5px;
+    max-width: 100%;
+    display: flex;
+    flex-direction: row;
+  }
+  .light-mode #search-container {
+    text-align: right;
+    margin-bottom: 5px;
+    max-width: 100%;
+    display: flex;
+    flex-direction: row;
+  }
+  .dark-mode #search-container {
+    text-align: right;
+    margin-bottom: 5px;
+    max-width: 100%;
+    display: flex;
+    flex-direction: row;
+  }
+
+  .default-mode #location-input-div {
+    max-width: 100%;
+    margin-right: 10px;
+    flex: auto;
+  }
+  .default-mode #location-input-field {
+    padding: 8px;
+    width: 100%;
+    border-radius: 8px;
+    background-color: var(--default-background-color);
+    box-shadow:var(--default-box-shadow);
+    color: var(--default-text-color);
+  }
+  .light-mode #location-input-div {
+    max-width: 100%;
+    margin-right: 10px;
+    flex: auto;
+  }
+  .light-mode #location-input-field {
+    padding: 8px;
+    width: 100%;
+    border-radius: 8px;
+    background-color: var(--light-background-color);
+    box-shadow:var(--light-box-shadow);
+    color: var(--light-text-color);
+  }
+  .dark-mode #location-input-div {
+    max-width: 100%;
+    margin-right: 10px;
+    flex: auto;
+  }
+  .dark-mode #location-input-field {
+    padding: 8px;
+    width: 100%;
+    border-radius: 8px;
+    background-color: var(--dark-background-color);
+    box-shadow:var(--dark-box-shadow);
+    color: var(--dark-text-color);
+  }
   
-  .dark-mode {
-    /* Dark mode styles */
-    background-color: #333;
-    color: #fff;
+  .default-mode #search-button-div {
+    max-width: 100px;
+    flex: auto;
+  }
+  .default-mode #search-button {
+    cursor: pointer;
+    border-radius: 8px;
+    background-color: var(--default-background-color);
+    box-shadow:var(--default-box-shadow);
+    color: var(--default-text-color);
+  }
+  .light-mode #search-button-div {
+    max-width: 100px;
+    flex: auto;
+  }
+  .light-mode #search-button {
+    cursor: pointer;
+    border-radius: 8px;
+    background-color: var(--light-background-color);
+    box-shadow:var(--light-box-shadow);
+    color: var(--light-text-color);
+  }
+  .dark-mode #search-button-div {
+    max-width: 100px;
+    flex: auto;
+  }
+  .dark-mode #search-button {
+    cursor: pointer;
+    border-radius: 8px;
+    background-color: var(--dark-background-color);
+    box-shadow:var(--dark-box-shadow);
+    color: var(--dark-text-color);
+  }
+
+  .default-mode #suggestions-list {
+    list-style: none;
+    border-radius: 8px;
+    padding: 10px;
+    margin: 0;
+  }
+  .default-mode #suggestions-list li {
+    padding: 5px;
+    cursor: pointer;
+  }
+  .default-mode #suggestions-list li:hover {
+    background-color: var(--default-hover-color);
+  }
+
+  .light-mode #suggestions-list {
+    list-style: none;
+    border-radius: 8px;
+    padding: 10px;
+    margin: 0;
+  }
+  .light-mode #suggestions-list li {
+    padding: 5px;
+    cursor: pointer;
+  }
+  .light-mode #suggestions-list li:hover {
+    background-color: var(--light-hover-color);
+  }
+
+  .dark-mode #suggestions-list {
+    list-style: none;
+    border-radius: 8px;
+    padding: 10px;
+    margin: 0;
+  }
+  .dark-mode #suggestions-list li {
+    padding: 5px;
+    cursor: pointer;
+  }
+  .dark-mode #suggestions-list li:hover {
+    background-color: var(--dark-hover-color);
+  }
+
+  .default-mode #current-weather {
+    background-color:var(--default-background-color);
+    border-radius: 8px;
+    padding: 10px;
+    color: var(--default-text-color);
+    box-shadow: var(--default-box-shadow);
+    max-width: 100%;
+  }
+  .default-mode #current-weather h3 {
+    color: var(--default-text-color);
+    margin-top: 0px;
+    text-align: center;
+  }
+  .default-mode #current-weather p {
+    color: var(--default-text-p-color);
+  }
+
+  .light-mode #current-weather {
+    background-color: var(--light-background-color);
+    border-radius: 8px;
+    padding: 10px;
+    box-shadow: var(--light-box-shadow);
+    max-width: 100%;
+  }
+  .light-mode #current-weather h3 {
+    color: var(--light-text-color);
+    margin-top: 0px;
+    text-align: center;
+  }
+  .light-mode #current-weather p {
+    color: var(--light-text-p-color);
+  }
+
+  .dark-mode #current-weather {
+    background-color: var(--dark-background-color);
+    border-radius: 8px;
+    padding: 10px;
+    box-shadow: var(--dark-box-shadow);
+    max-width: 100%;
+  }
+
+  .dark-mode #current-weather h3 {
+    color: var(--dark-text-color);
+    margin-top: 0px;
+    text-align: center;
   }
   
+  .dark-mode #current-weather p {
+    color: var(--dark-text-p-color);
+  }
+  
+  .light-mode table {
+    /* Table styles for light mode */
+    border: 1px solid #000;
+  }
+  .light-mode th {
+    background-color: #f2f2f2;
+    color: #000;
+  }
+  .light-mode td {
+    background-color: #fff;
+    color: #000;
+  }
+
   .dark-mode table {
     /* Table styles for dark mode */
     border: 1px solid #fff;
   }
-  
   .dark-mode th {
     background-color: #444;
     color: #fff;
   }
-  
   .dark-mode td {
     background-color: #555;
     color: #fff;
   }
-  
+
   h1 {
     text-align: center;
   }
@@ -181,7 +616,7 @@
     cursor: pointer;
   }
   
-  .weather-container {
+  #weather-container {
     max-width: 100vw;
     margin: 0 auto;
   }
@@ -201,6 +636,24 @@
   th {
     background-color: #f2f2f2;
   }
+
+  #current-weather {
+    background-color: #fff;
+    border-radius: 8px;
+    padding: 20px;
+    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+    margin: 20px auto;
+    max-width: 500px;
+  }
+
+  #current-weather h3 {
+    color: #333;
+    margin-bottom: 10px;
+  }
+  
+  #current-weather p {
+    color: #666;
+  }
   
   .forecast-table-container {
     max-height: 500px; /* Set the maximum height for the container */
@@ -212,29 +665,32 @@
     table-layout: fixed;
   }
   
-  .popup-container {
+  #popup {
     display: none;
     position: fixed;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    background: #888888;
-    padding: 20px;
-    border: 1px solid #000000;
+    background: #e9e9e9;
+    padding: 10px;
+    border: 1px solid var(--default-border-color);
+    border-radius: 8px;
+    box-shadow: var(--default-box-shadow);
+    margin: 20px auto;
     z-index: 9999;
   }
-  .popup-container p {
-    margin: 0;
+  #popup .popup-text {
+    margin-top: 5px;
     color: #000000;
+    text-align: center;
   }
-  .popup-container button {
+  #popup button {
+    padding: 5px 5px;
     margin-left: auto;
     margin-right: auto;
+    border-radius: 5px;
     display: block;
   }
-
-  /* For example: Modify layout, reduce padding/margins, etc. */
-  /* Add your CSS rules here */
 }
 
 
