diff --git a/styles/feedback.css b/styles/feedback.css
new file mode 100644
index 00000000..64b49b5b
--- /dev/null
+++ b/styles/feedback.css
@@ -0,0 +1,269 @@
+.star-rating {
+ display: flex;
+ flex-direction: row-reverse;
+ justify-content: center;
+ /* Center the stars horizontally */
+ align-items: center;
+ /* Center the stars vertically if needed */
+ margin: 0 auto;
+ /* Ensure it doesn't shift due to outer spacing */
+ }
+
+ .star-rating input {
+ display: none;
+ }
+
+ .star-rating label {
+ cursor: pointer;
+ width: 30px;
+ height: 30px;
+ margin-right: 5px;
+ background-image: url('data:image/svg+xml;charset=UTF-8,
');
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: 100%;
+ }
+
+ .star-rating label:hover,
+ .star-rating label:hover~label,
+ .star-rating input:checked~label {
+ background-image: url('data:image/svg+xml;charset=UTF-8,
');
+ }
+
+
+ body {
+ font-family: Arial, sans-serif;
+ margin: 0;
+ padding: 20px;
+ background-color: #FAFCFE;
+ color: var(--primary-color);
+ }
+
+ .content {
+ max-width: 1200px;
+ margin: 40px auto;
+ /* Keep vertical margin for spacing from header and footer */
+ padding: 40px;
+ /* Add significant padding inside the content area */
+ display: flex;
+ flex-direction: column;
+ box-shadow: 0 4px 6px rgba(53, 46, 46, 0.285);
+ position: relative;
+ }
+
+ .feedback-header {
+ background-color: transparent;
+ /* Remove the dark background */
+ position: relative;
+ /* Add this to allow absolute positioning of the image */
+ padding: 10px 20px;
+ top: 0;
+ left: 0;
+ right: 0;
+ z-index: -1;
+
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ }
+
+ .feedback-header h1 {
+ font-size: 24px;
+ margin-bottom: 20px;
+ color: #EE66A6;
+ background-color: #FAFCFE;
+ }
+
+ .feedback-header img {
+ max-width: 100%;
+ height: auto;
+ z-index: -1;
+ max-height: 300px;
+ /* Adjust as needed */
+ object-fit: cover;
+ margin-bottom: 20px;
+ }
+
+ .feedback-header,
+ .feedback-header img {
+ border: none !important;
+ border-bottom: none !important;
+ text-decoration: none !important;
+ outline: none !important;
+ box-shadow: none !important;
+ }
+
+ main {
+ padding: 20px;
+ }
+
+ h2 {
+ font-size: 18px;
+ color: var(--secondary-color);
+ margin-top: 20px;
+ }
+
+ .tickmarks {
+ display: flex;
+ justify-content: space-between;
+ margin: 10px 0;
+ width: 100%;
+ /* Ensure tick marks take the full width of the container */
+ }
+
+ .tickmarks span {
+ display: inline-block;
+ padding: 8px 12px;
+ border: 2px solid #EE66A6;
+ /* Border color for the circle */
+ border-radius: 30%;
+ /* Make the span circular */
+ background-color: transparent;
+ color: black;
+ font-weight: bold;
+ transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
+ cursor: pointer;
+ }
+
+ /* Hover effect */
+ .tickmarks span:hover {
+ transform: scale(1.5);
+ /* Make the span larger when hovered */
+ background-color: #EE66A6;
+ color: white;
+ /* Change text color on hover */
+ }
+
+ input[type="range"] {
+ width: 100%;
+ margin: 10px 0;
+ }
+
+ textarea {
+ width: 100%;
+ height: 100px;
+ margin: 10px 0;
+ padding: 10px;
+ border: 1px solid var(--bg-color);
+ }
+
+ button {
+ width: 100%;
+ padding: 10px;
+ background-color: var(--primary-color);
+ color: white;
+ border: none;
+ cursor: pointer;
+ margin-top: 20px;
+ }
+
+ button:hover {
+ background-color: var(--secondary-color);
+ }
+
+ button:hover {
+ background-color: var(--secondary-color);
+ }
+
+ @media (min-width: 768px) {
+ .content {
+ flex-direction: row;
+ }
+
+ header,
+ main {
+ flex: 1;
+ }
+
+ .center-select {
+ display: flex;
+ justify-content: center;
+ /* Centers the selects horizontally */
+ align-items: center;
+ /* Vertically centers them if the container has a height */
+ gap: 10px;
+ /* Optional: Adds some space between the selects */
+ }
+ }
+
+ .feedback-header img {
+ transition: transform 0.3s ease, filter 0.3s ease;
+ }
+
+ .feedback-header img:hover {
+ transform: scale(1.05);
+ filter: brightness(1.1);
+ }
+
+ /* Hover effect for the content div */
+ .content {
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
+ }
+
+ .content:hover {
+ transform: scale(1.02);
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+ }
+
+ textarea,
+ input[type="range"] {
+ transition: transform 0.3s ease, border 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
+ border: 1px solid #ccc;
+ padding: 10px;
+ border-radius: 5px;
+ font-size: 16px;
+ }
+
+ textarea:hover,
+ input[type="range"]:hover {
+ transform: scale(1.02);
+ border: 2px solid #EE66A6;
+ background-color: #f0f8ff;
+ box-shadow: 0 4px 8px rgba(0, 123, 255, 0.2);
+ }
+
+ /* Focus styles */
+ textarea:focus,
+ input[type="range"]:focus {
+ border: 2px solid #EE66A6;
+ outline: none;
+ box-shadow: 0 0 8px rgba(0, 86, 179, 0.3);
+ }
+
+ .star-rating label {
+ transition: color 0.3s ease, transform 0.3s ease, filter 0.3s ease;
+ }
+
+ .star-rating label:hover,
+ .star-rating label:hover~label {
+ color: #ffb400;
+ transform: scale(1.2);
+ filter: drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.1));
+ }
+
+ /* Hover effect for the feedback button */
+ #feedback-btn {
+ transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
+ background-color: #EE66A6;
+ color: #fff;
+ border: none;
+ padding: 12px 24px;
+ border-radius: 5px;
+ cursor: pointer;
+ font-size: 16px;
+ font-weight: bold;
+ box-shadow: 0 4px 8px rgba(0, 123, 255, 0.2);
+ text-transform: uppercase;
+ }
+
+ #feedback-btn:hover {
+ background-color: #eb3e8f;
+ transform: scale(1.05);
+ box-shadow: 0 6px 12px rgba(0, 86, 179, 0.3);
+ }
+
+ #feedback-btn:active {
+ transform: scale(1);
+ box-shadow: 0 2px 6px rgba(0, 86, 179, 0.3);
+ }
+
diff --git a/subscriptions.html b/subscriptions.html
index 4aa67c36..1bd8be73 100644
--- a/subscriptions.html
+++ b/subscriptions.html
@@ -76,6 +76,7 @@
Delivery
Dine In
Catering
+
Feedback
Subscriptions
+ 
+ 
+