diff --git a/public/css/styles.css b/public/css/styles.css
index 19ee8e1..232b82c 100644
--- a/public/css/styles.css
+++ b/public/css/styles.css
@@ -1079,7 +1079,6 @@ h3 {
   border: solid 2px purple;
   max-height: 24.625em;
   overflow: scroll;
-  overflow-x:  hidden;
   -webkit-overflow-scrolling: touch;
 }
 
@@ -1974,6 +1973,66 @@ section.image {
   box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.5);
 }
 
+.light-mode .rateus-modal {
+  display: none; /* Hidden by default */
+  position: fixed;
+  z-index: 1;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  background-color: rgba(0, 0, 0, 0.5); /* White background with transparency */
+}
+
+.light-mode .rateus-container {
+  max-width: 600px;
+  margin: 100px auto; /* Position the container a bit lower */
+  padding: 20px;
+  background-color: #f0ffff;
+  border-radius: 10px;
+  text-align: center;
+}
+
+.light-mode .rating-slider {
+  margin: 20px 0;
+  position: relative;
+  width: 80%;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.light-mode .rating-slider input[type="range"] {
+  width: 100%;
+  height: 15px;
+  background: linear-gradient(90deg, #ffcc00 60%, #ccc 60%);
+  border-radius: 10px;
+  outline: none;
+  opacity: 0.9;
+  -webkit-transition: opacity .15s ease-in-out;
+  transition: opacity .15s ease-in-out;
+}
+
+.light-mode .rating-slider input[type="range"]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 25px;
+  height: 25px;
+  background: #ffcc00;
+  cursor: pointer;
+  border-radius: 50%;
+  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.2);
+}
+
+.light-mode .rating-slider input[type="range"]::-moz-range-thumb {
+  width: 25px;
+  height: 25px;
+  background: #ffcc00;
+  cursor: pointer;
+  border-radius: 50%;
+  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.2);
+} 
+
 textarea {
   width: 100%;
   padding: 10px;