Index: src/main/resources/static/css/admin-terms.css
===================================================================
--- src/main/resources/static/css/admin-terms.css	(revision 43c909087ac1cb1edc0060980e76744ba06a74bf)
+++ src/main/resources/static/css/admin-terms.css	(revision 743de552547f72aa36d0ace8c6df4c212d5bb86d)
@@ -44,11 +44,8 @@
 }
 #active{
-    padding: 15px;
+    margin: 15px 0;
     display: flex;
     flex-direction: column;
     gap: 10px;
-    border: 1px solid #ccc;
-    border-radius: 5px;
-    background-color: #f9f9f9;
 }
 #frame{
@@ -82,4 +79,5 @@
     position: relative;
     overflow: hidden;
+    /* transform: scale(1.25); */
 }
 
@@ -133,7 +131,9 @@
     cursor: pointer;
     animation: to-top 1s forwards;
+    /* border-radius: 50%; */
 }
 #frame > *:hover{
     background-color:white;
+    transition: background-color 0.3s, transform 0.3s;
 }
 
@@ -276,7 +276,7 @@
     font-size: 14px;
     height: 30px;
-    width: 70px;
+    width: 55px;
     padding: 5px;
-    overflow: hidden;
+    overflow: hidden; /* Hide overflow if needed */
 }
 
@@ -291,5 +291,5 @@
     width: 100%;
     height: 100%;
-    background-color: rgba(0, 0, 0, 0.5);
+    background-color: rgba(0, 0, 0, 0.5); /* Dark background */
     justify-content: center;
     align-items: center;
@@ -320,12 +320,11 @@
 }
 
-#cancelBtn, #temporal-deletion, #delete-approval{
-    background-color: #ff6666;
+#cancelBtn {
+    background-color: #f44336; /* Red */
     color: white;
-    max-width: fit-content;
-}
-
-#approveBtn, #confirm-approval, #approve-carried-out{
-    background-color: #4CAF50;
+}
+
+#approveBtn {
+    background-color: #4CAF50; /* Green */
     color: white;
 }
@@ -391,5 +390,4 @@
     background-color: #f9f9f9;
 }
-
 #creation > * {
     padding-bottom: 10px;
@@ -407,14 +405,11 @@
 }
 
-#authButton{
-    position: absolute;
-    left: 1145px;
-    top: 21px;
-    width: 150px;
+#delete-all-free button {
+    padding: 10px;
+    background-color: #ff6666;
     color: white;
-    background-color: red;
-    padding: 10px;
     border: none;
     border-radius: 5px;
+    cursor: pointer;
 }
 
@@ -428,16 +423,25 @@
 }
 
+
+
+/* Table styles */
 table {
-    padding-top: 10px;
-    width: fit-content;
+    width: 320px;
     border-collapse: collapse;
     margin-bottom: 20px;
 }
 
-
-thead > tr {
+/* Table header styles */
+thead {
+    background-color: #007BFF;
+    color: white;
+}
+
+th {
     padding: 10px;
     text-align: left;
 }
+
+
 
 tbody tr {
@@ -447,5 +451,5 @@
 
 tbody tr:hover {
-    background-color: #f1f1f1;
+    background-color: #f1f1f1; /* Highlight row on hover */
 }
 
@@ -453,28 +457,2 @@
     padding: 10px;
 }
-
-#request-assets, #appointment-assets
-{
-    display: flex;
-    flex-direction: row;
-    gap: 10px;
-}
-
-h3{
-    padding-top: 20px;
-}
-#summary{
-    margin-top: 20px;
-    padding: 15px;
-    display: flex;
-    flex-direction: column;
-    border: 1px solid #ccc;
-    border-radius: 5px;
-    background-color: #f9f9f9;
-}
-#authButton{
-    position: absolute;
-    left: 1145px;
-    top: 21px;
-    width: 150px;
-}
Index: src/main/resources/static/css/admin.css
===================================================================
--- src/main/resources/static/css/admin.css	(revision 43c909087ac1cb1edc0060980e76744ba06a74bf)
+++ src/main/resources/static/css/admin.css	(revision 743de552547f72aa36d0ace8c6df4c212d5bb86d)
@@ -41,21 +41,20 @@
     padding: 30px;
     display: grid;
-
-    grid-template-columns: repeat(2, 1fr);
-    gap: 20px;
+    grid-template-columns: repeat(2, 1fr); /* Create two equal columns */
+    gap: 20px;                          /* Space between grid items */
 }
 #menu a {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
+    display: flex;                      /* Enable Flexbox for a */
+    flex-direction: column;            /* Align icon and text vertically */
+    align-items: center;               /* Center items horizontally */
     justify-content: center;
-    text-decoration: none;
-    padding: 15px;
-    border: 1px solid #ccc;
+    text-decoration: none;             /* Remove underline from links */
+    padding: 15px;                    /* Add padding inside each link */
+    border: 1px solid #ccc;           /* Optional: border around each link */
     border-radius: 5px;
     font-size: 30px; ;
 }
 #menu a:hover {
-    background-color: white;
+    background-color: white; /* Light blue background on hover */
     transition: background-color 0.3s ease;
     border: 1px solid black;
@@ -63,16 +62,5 @@
 
 #menu img {
-    max-width: 50px;
-    margin-bottom: 5px;
+    max-width: 50px;                  /* Limit the width of images */
+    margin-bottom: 5px;               /* Space between image and text */
 }
-#authButton{
-    position: absolute;
-    left: 1145px;
-    top: 21px;
-    width: 150px;
-    color: white;
-    background-color: red;
-    padding: 10px;
-    border: none;
-    border-radius: 5px;
-}
Index: src/main/resources/static/css/adminNews.css
===================================================================
--- src/main/resources/static/css/adminNews.css	(revision 43c909087ac1cb1edc0060980e76744ba06a74bf)
+++ src/main/resources/static/css/adminNews.css	(revision 743de552547f72aa36d0ace8c6df4c212d5bb86d)
@@ -27,22 +27,19 @@
 }
 .news-item{
-    display: flex;
-    flex-direction: column;
-    width: 420px;
+    display: flex; /* Aligns image and text in a row */
+    flex-direction: column; /* Change to 'row' for horizontal layout */
+    width: 260px;
     align-items: center;
     justify-content: center;
     margin: 0 15px 10px 0;
     padding: 20px;
-    border: 1px solid #ddd;
+    border: 1px solid #ddd; /* Optional: Adds a border */
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 }
-.news-item > *{
-    text-align: left;
-}
 img{
-    width: 100%;
-    max-width: 400px;
-    height: auto;
-    border-radius: 10px;
+    width: 100%; /* Make image responsive */
+    max-width: 400px; /* Set a maximum width for the image */
+    height: auto; /* Maintain aspect ratio */
+    border-radius: 10px; /* Optional: Adds rounded corners */
     margin-bottom: 15px;
 }
@@ -50,5 +47,5 @@
     font-size: 1.2rem;
     line-height: 1.5;
-    text-align: center;
+    text-align: center; /* Center the text */
     color: #333;
     margin: 0;
@@ -56,5 +53,5 @@
 @media (max-width: 768px) {
     .news-item {
-        flex-direction: column;
+        flex-direction: column; /* Stack elements on smaller screens */
     }
 }
@@ -101,4 +98,5 @@
 }
 
+/* Style for the upload button */
 #open-popup {
     padding: 10px 20px;
@@ -112,5 +110,5 @@
 
 #image-popup {
-    width: 400px;
+    width: 400px; /* Set a width for the modal */
     background-color: white;
     border-radius: 8px;
@@ -128,4 +126,5 @@
 }
 
+/* Image preview area */
 #image-preview {
     margin-top: 10px;
@@ -134,4 +133,5 @@
 }
 
+/* Style for buttons inside the popup */
 #image-popup button {
     padding: 8px 15px;
@@ -147,30 +147,25 @@
 
 #edit-button, #save-button {
-    background-color: #17a2b8;
+    background-color: #17a2b8; /* Blueish color */
 }
 
 
+/* Overlay */
 #overlay {
-    background: rgba(0, 0, 0, 0.5);
-    z-index: 999;
+    background: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
+    z-index: 999; /* Ensure it is behind the modal but above everything else */
 }
 
+/* Button hover effects */
 #image-popup button:hover, #open-popup:hover {
     opacity: 0.9;
 }
 
+
+
+/* Cancel button */
 #cancel-button {
-    background-color: #dc3545;
+    background-color: #dc3545; /* Red color */
 }
 
-#authButton{
-    position: absolute;
-    left: 1145px;
-    top: 21px;
-    width: 150px;
-    color: white;
-    background-color: red;
-    padding: 10px;
-    border: none;
-    border-radius: 5px;
-}
+
Index: src/main/resources/static/css/calendar.css
===================================================================
--- src/main/resources/static/css/calendar.css	(revision 43c909087ac1cb1edc0060980e76744ba06a74bf)
+++ src/main/resources/static/css/calendar.css	(revision 743de552547f72aa36d0ace8c6df4c212d5bb86d)
@@ -1,14 +1,15 @@
+/* Modal background */
 #confirmation-modal {
-    display: none;
-    position: absolute;
-    z-index: 1000;
+    display: none; /* Hidden by default */
+    position: absolute; /* Fixed positioning to center it on the page */
+    z-index: 1000; /* Sit on top */
     left: 38%;
     top: 40%;
-    width: 400px;
-    overflow: auto;
-    background-color: #fff;
-    border-radius: 8px;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-    text-align: center;
+    width: 400px; /* Full width */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: #fff; /* White background for the content */
+    border-radius: 8px; /* Rounded corners */
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
+    text-align: center; /* Center align text */
 }
 .model-content{
@@ -23,6 +24,7 @@
 }
 
+/* Buttons */
 button {
-    background-color: #3498db;
+    background-color: #3498db; /* Primary button color */
     border: none;
     color: #fff;
@@ -36,18 +38,19 @@
 
 button:hover {
-    background-color: #2980b9;
-    transform: scale(1.05);
+    background-color: #2980b9; /* Darker shade for hover effect */
+    transform: scale(1.05); /* Slight scale effect on hover */
 }
 
 button:active {
-    background-color: #1f77e4;
-}
-
+    background-color: #1f77e4; /* Even darker shade when active */
+}
+
+/* Cancel button with different color */
 #cancel-booking {
-    background-color: #e74c3c;
+    background-color: #e74c3c; /* Different color for cancel button */
 }
 
 #cancel-booking:hover {
-    background-color: #c0392b;
+    background-color: #c0392b; /* Darker shade for hover effect */
 }
 
@@ -115,17 +118,4 @@
 #right-side > *{
     margin:10px;
-}
-#right-side{
-    position: relative;
-    top: 50px;
-    padding: 16px;
-}
-#hourly-terms{
-    display: flex;
-    flex-wrap: wrap;
-    gap: 10px;
-}
-#right-side > *{
-    margin-bottom: 5px;
 }
 
@@ -186,4 +176,5 @@
     position: relative;
     overflow: hidden;
+    /* transform: scale(1.25); */
 }
 
@@ -241,4 +232,5 @@
     cursor: pointer;
     animation: to-top 1s forwards;
+    /* border-radius: 50%; */
 }
 
@@ -247,4 +239,7 @@
 }
 
+.calendar-days div:hover span {
+    transition: width 0.2s ease-in-out, height 0.2s ease-in-out;
+}
 
 .calendar-days div span:nth-child(1),
@@ -255,4 +250,9 @@
 }
 
+.calendar-days div:hover span:nth-child(1),
+.calendar-days div:hover span:nth-child(3) {
+    height: 100%;
+}
+
 .calendar-days div span:nth-child(1) {
     bottom: 0;
@@ -272,4 +272,8 @@
 }
 
+.calendar-days div:hover span:nth-child(2),
+.calendar-days div:hover span:nth-child(4) {
+    width: 100%;
+}
 
 .calendar-days div span:nth-child(2) {
@@ -283,5 +287,18 @@
 }
 
-.curr-date{
+.calendar-days div:hover span:nth-child(2) {
+    transition-delay: 0.2s;
+}
+
+.calendar-days div:hover span:nth-child(3) {
+    transition-delay: 0.4s;
+}
+
+.calendar-days div:hover span:nth-child(4) {
+    transition-delay: 0.6s;
+}
+
+.calendar-days div.curr-date,
+.calendar-days div.curr-date:hover {
     background-color: var(--blue);
     color: var(--white);
@@ -374,16 +391,6 @@
     }
 }
-#authButton{
-    position: absolute;
-    left: 1145px;
-    top: 21px;
-    width: 150px;
-    color: white;
-    background-color: red;
-    padding: 10px;
-    border: none;
-    border-radius: 5px;
-}
-
-
-
+
+
+
+
Index: src/main/resources/static/css/editUser.css
===================================================================
--- src/main/resources/static/css/editUser.css	(revision 43c909087ac1cb1edc0060980e76744ba06a74bf)
+++ 	(revision )
@@ -1,189 +1,0 @@
-body{
-    font-family: "Caveat", cursive;
-    margin: 30px;
-}
-#content{
-    display: flex;
-    gap: 50px;
-}
-#main-part{
-    display: flex;
-    flex-direction: column;
-    width:420px;
-    gap: 30px;
-}
-#container{
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 300px;
-    gap: 50px;
-    border: 1px solid #ccc;
-    border-radius: 5px;
-    background-color: #f9f9f9;
-    padding: 10px;
-}
-
-#container p{
-    font-weight:bold;
-    margin: 0;
-    padding-bottom: 10px;
-}
-button {
-    margin-right: 13px;
-    margin-bottom: 5px;
-    border:0;
-    border-radius: 5px;
-    padding: 10px;
-}
-
-#block-account{
-    background-color: #ff6666;
-    color: white;
-}
-#edit-profile{
-    background-color: royalblue;
-    color: white;
-}
-#saveChanges{
-    background-color: #4CAF50;
-    color: white;
-}
-#left-side, #right-side {
-    display: flex;
-    flex-direction: column;
-    gap: 15px;
-}
-
-#stat-table {
-    height: 320px;
-    width: 420px;
-    border-collapse: collapse;
-    table-layout: fixed;
-}
-#additional-table{
-    border-collapse: collapse;
-    table-layout: fixed;
-}
-#active-tableHead > tr > th, #active-table > tr > td{
-   width: fit-content;
-}
-
-#stat-table th, #stat-table td, #active-tableHead > tr > th, #active-table > tr > td {
-    text-align: center;
-    border: 1px solid #ddd;
-    padding: 12px;
-}
-
-#stat-table th, #active-tableHead > tr > th {
-    background-color: lightslategray;
-    color: #fff;
-    font-weight: bold;
-
-}
-
-
-#table-part > p{
-    font-size: 20px;
-}
-#statusDropdown{
-    margin-bottom: 25px;
-}
-#authButton{
-    position: absolute;
-    left: 1145px;
-    top: 21px;
-    width: 150px;
-    color: white;
-    background-color: red;
-    padding: 10px;
-    border: none;
-    border-radius: 5px;
-}
-
-.modal {
-    display: none; /* Hidden by default */
-    position: fixed; /* Stay in place */
-    z-index: 9999; /* Sit on top */
-    left: 0;
-    top: 0;
-    width: 100%; /* Full width */
-    height: 100%; /* Full height */
-    background-color: rgba(0, 0, 0, 0.5); /* Black background with opacity */
-    align-items: center;
-    justify-content: center;
-}
-
-/* Modal Content Box */
-.modal-content {
-    background-color: #fefefe;
-    margin: auto;
-    padding: 20px;
-    border-radius: 8px;
-    width: 300px;
-    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
-    text-align: center;
-    position: relative;
-}
-
-.close {
-    position: absolute;
-    top: 10px;
-    right: 15px;
-    color: #aaa;
-    font-size: 24px;
-    font-weight: bold;
-    cursor: pointer;
-}
-
-.close:hover,
-.close:focus {
-    color: #000;
-    text-decoration: none;
-    cursor: pointer;
-}
-
-/* Modal Heading */
-h2 {
-    margin-bottom: 15px;
-    font-size: 20px;
-}
-
-/* Input Field */
-#userInput {
-    width: 100%;
-    padding: 8px;
-    margin-bottom: 15px;
-    border: 1px solid #ccc;
-    border-radius: 4px;
-    box-sizing: border-box;
-}
-
-/* Buttons */
-.buttons {
-    display: flex;
-    justify-content: space-between;
-}
-
-.buttons button {
-    width: 48%;
-    padding: 10px;
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
-    font-size: 16px;
-}
-
-#cancelBtn {
-    background-color: #f44336;
-    color: white;
-}
-
-#approveBtn {
-    background-color: #4CAF50;
-    color: white;
-}
-
-.buttons button:hover {
-    opacity: 0.8;
-}
Index: src/main/resources/static/css/index.css
===================================================================
--- src/main/resources/static/css/index.css	(revision 43c909087ac1cb1edc0060980e76744ba06a74bf)
+++ src/main/resources/static/css/index.css	(revision 743de552547f72aa36d0ace8c6df4c212d5bb86d)
@@ -66,13 +66,13 @@
 
 .dropdown-content {
-    display: none;
-    position: absolute;
+    display: none; /* Hide dropdown by default */
+    position: absolute; /* Position relative to the list item */
     left: 0;
-    top: 100%;
-    background-color: white;
-    border: 1px solid #ddd;
-    padding: 10px;
-    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
-    width: 100%;
+    top: 100%; /* Position below the list item */
+    background-color: white; /* Background color of the dropdown */
+    border: 1px solid #ddd; /* Border of the dropdown */
+    padding: 10px; /* Padding inside the dropdown */
+    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Optional shadow for dropdown */
+    width: 100%; /* Full width of the list item */
 }
 .icon-search{
@@ -98,4 +98,5 @@
     justify-content: center;
     height: 350px;
+    /*background-color: #F3F0E7;*/
     background-color: #F7F7F5;
 }
@@ -107,6 +108,4 @@
 .items-register{
     font-family: "Kumbh Sans", sans-serif;
-    position: absolute;
-    left: 900px;
 }
 .items-register p{
@@ -118,4 +117,11 @@
 }
 
+.items-register{
+    display:flex;
+    flex-direction: column;
+    align-items: center;
+    /*background-color: #F3F0E7;*/
+}
+
 .form-imp{
     display: flex;
@@ -126,7 +132,7 @@
 }
 input , button {
-    border-radius: 5px;
-    padding: 7px;
-    border: 1px solid #9D9D9D;
+    border-radius: 5px; /* Adjust the value to make the corners more or less rounded */
+    padding: 7px; /* Optional: adds padding inside the input */
+    border: 1px solid #9D9D9D; /* Optional: adds a border around the input */
 }
 button{
@@ -134,22 +140,9 @@
     color:white;
 }
-#personalised{
-    font-size: xx-large;
-    font-family: "Caveat", cursive;
-}
 .white-part{
-    display: flex;
-    flex-direction: column;
     background-color: white;
     width: 415px;
     border-radius: 5px;
-    padding: 20px;
-}
-a {
-    text-decoration: none;
-}
-.logged-in{
-    padding: 20px;
-    font-family: "Kumbh Sans", sans-serif;
+    padding: 7px;
 }
 .split-title{
@@ -186,4 +179,5 @@
     align-items: center;
     background-color: #F7F7F5;
+    /*background-color: #F3F0E7;*/
 }
 .part2 > div{
@@ -193,5 +187,5 @@
 }
 .part2 > div:first-child {
-    justify-content: flex-end;
+    justify-content: flex-end; /* Align the content to the right */
 }
 
@@ -223,11 +217,11 @@
     background-color: transparent;
     color: darkgreen;
-    border: 2px solid darkgreen;
-    border-radius: 12px;
-    font-weight: bold;
-    padding: 10px 20px;
-    cursor: pointer;
-    font-family: "Kumbh Sans", sans-serif;
-    font-size: 16px;
+    border: 2px solid darkgreen; /* Set the border color and make it bold */
+    border-radius: 12px; /* Make the borders rounded */
+    font-weight: bold; /* Make the text bold */
+    padding: 10px 20px; /* Add some padding for better appearance */
+    cursor: pointer; /* Change the cursor to a pointer when hovered */
+    font-family: "Kumbh Sans", sans-serif; /* Match the font family */
+    font-size: 16px; /* Adjust font size as needed */
 }
 
@@ -254,6 +248,6 @@
 }
 .icons li img:hover {
-    background-color: white;
-    border-color: darkslategrey;
+    background-color: white; /* Change background color on hover */
+    border-color: darkslategrey; /* Change border color on hover */
 }
 .footer-left p img{
@@ -278,20 +272,22 @@
 }
 
+
+/*login*/
+
 .popup {
-    display: none;
-    position: fixed;
-    z-index: 2;
+    display: none; /* Hide the form */
+    position: fixed; /* Position it relative to the viewport */
+    z-index: 2; /* Ensure it appears above other content */
     left: 50%;
     top: 50%;
-    transform: translate(-50%, -50%);
-    width: 500px;
-    height: auto;
-    padding: 25px;
-    background-color: white;
-    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
-    border-radius: 10px;
-    font-family: "Kumbh Sans", sans-serif;
-}
-
+    transform: translate(-50%, -50%); /* Center it horizontally and vertically */
+    width: 500px; /* Set a fixed width for the form */
+    padding: 25px; /* Add some padding */
+    background-color: white; /* Background color of the form */
+    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); /* Add a shadow for better visibility */
+    border-radius: 10px; /* Slightly round the corners */
+}
+
+/* Style the close button */
 .popup .close-btn {
     position: absolute;
@@ -301,49 +297,42 @@
     cursor: pointer;
 }
-#submit-btn{
-    width: 120px;
-    background-color: #10B981;
-}
-#loginForm > div > h2{
-    text-align: center;
-}
-
+
+/* Add some basic styling for the form content */
 .popup-content {
-    padding: 20px;
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
+    display: flex; /* Use flexbox for layout */
+    flex-direction: column; /* Stack children vertically */
+    align-items: stretch; /* Ensure all elements take the full width */
+    text-align: center; /* Center the content */
 }
 
 .popup-content h2 {
-    margin-bottom: 20px;
+    margin-bottom: 20px; /* Add some space below the title */
 }
 
 .popup-content label {
-    display: block;
-    margin-bottom: 10px;
-    text-align: left;
+    display: block; /* Make the labels block elements */
+    margin-bottom: 10px; /* Add some space below the labels */
+    text-align: left; /* Align the text to the left */
 }
 
 .popup-content input {
-    width: 100%;
-    padding: 8px;
-    margin-bottom: 20px;
-    border: 1px solid #ccc;
-    border-radius: 5px;
+    width: 100%; /* Make the inputs take up the full width */
+    padding: 8px; /* Add some padding inside the inputs */
+    margin-bottom: 20px; /* Add space below the inputs */
+    border: 1px solid #ccc; /* Light border around inputs */
+    border-radius: 5px; /* Slightly round the input corners */
 }
 
 .popup-content button {
-    padding: 10px 20px;
-    background-color: #007BFF;
-    color: white;
-    border: none;
-    border-radius: 5px;
-    cursor: pointer;
+    padding: 10px 20px; /* Add padding to the button */
+    background-color: #007BFF; /* Button background color */
+    color: white; /* Button text color */
+    border: none; /* Remove the default border */
+    border-radius: 5px; /* Round the button corners */
+    cursor: pointer; /* Add a pointer cursor on hover */
 }
 
 .popup-content button:hover {
-    background-color: #0056b3;
+    background-color: #0056b3; /* Darken the button on hover */
 }
 body.no-scroll {
@@ -351,57 +340,7 @@
 }
 .dataForms{
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-    text-align: center;
-
-}
-#links{
-    padding: 10px;
-    display: flex;
-    flex-direction: column;
-    gap: 5px;
-    color: darkgreen;
-}
-.logged-in{
-    position: absolute;
-    left: 900px;
-    padding: 30px;
-}
-a img{
-    transform: rotate(-90deg);
-    height: 20px;
-    margin-right: 10px;
-}
-#signInForm{
-    height: 500px;
-    width: 700px;
-}
-#signInForm > div > form{
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    grid-template-rows: repeat(3, 1fr);
-    gap: 10px;
-}
-#authButton{
-    position: absolute;
-    left: 1145px;
-    top: 21px;
-    width: 150px;
-    color: white;
-    background-color: red;
-    padding: 10px;
-    border: none;
-    border-radius: 5px;
-}
-
-#create{
-    width: 200px;
-    padding: 15px;
-    background-color: #10B981;
-    position: absolute;
-    top: 80%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    margin-top: 20px;
-}
+    display: flex; /* Use flexbox for layout */
+    flex-direction: column; /* Stack children vertically */
+    align-items: stretch; /* Ensure all elements take the full width */
+    text-align: center; /* Center the content */
+}
Index: src/main/resources/static/css/terms.css
===================================================================
--- src/main/resources/static/css/terms.css	(revision 43c909087ac1cb1edc0060980e76744ba06a74bf)
+++ src/main/resources/static/css/terms.css	(revision 743de552547f72aa36d0ace8c6df4c212d5bb86d)
@@ -4,7 +4,10 @@
 body{
     font-family: var(--font-family);
+}
+#outer-frame{
     background-color: #f3f8fe;
+    width: 100%;
+    height: 100vh;
 }
-
 #header{
     display: flex;
@@ -13,12 +16,7 @@
 #menu{
     display: flex;
-    gap: 10px;
 }
 #menu *{
-    padding: 10px;
-    background-color: #17a2b8;
-    border: 0;
-    border-radius: 5px;
-    color: white;
+    padding: 8px;
 }
 table td,
@@ -26,5 +24,8 @@
     padding: 10px;
 }
-
+table{
+    /*margin: 0 auto;*/
+    width: 920px;
+}
 
 #popup {
@@ -66,40 +67,2 @@
     color: #fff;
 }
-
-table{
-    border-collapse: collapse;
-    table-layout: fixed;
-    width: max-content;
-}
-
-th, td {
-    width: fit-content;
-    text-align: center;
-    border: 1px solid #ddd;
-    padding: 12px;
-}
-
-th {
-    background-color: lightslategray;
-    color: #fff;
-
-}
-#frame{
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-}
-#requestsTableBody{
-    background-color: #eeeded;
-}
-#authButton{
-    position: absolute;
-    left: 1145px;
-    top: 21px;
-    width: 150px;
-    color: white;
-    background-color: red;
-    padding: 10px;
-    border: none;
-    border-radius: 5px;
-}
Index: src/main/resources/static/css/userInfo.css
===================================================================
--- src/main/resources/static/css/userInfo.css	(revision 43c909087ac1cb1edc0060980e76744ba06a74bf)
+++ 	(revision )
@@ -1,41 +1,0 @@
-body{
-    font-family: "Caveat", cursive;
-    background-color: aliceblue;
-}
-#box{
-    display: flex;
-    margin: 20px;
-    gap: 20px;
-}
-#coupons-frame, #news-frame{
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: start;
-}
-.new-item{
-display: flex;
-flex-direction: column;
-width: 260px;
-align-items: center;
-justify-content: center;
-margin: 0 15px 10px 0;
-padding: 20px;
-border: 1px solid #ddd;
-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-background-color: white;
-}
-h2{
-   display: flex;
-    justify-content: center;
-}
-#authButton{
-    position: absolute;
-    left: 1145px;
-    top: 21px;
-    width: 150px;
-    color: white;
-    background-color: red;
-    padding: 10px;
-    border: none;
-    border-radius: 5px;
-}
Index: src/main/resources/static/css/users-view.css
===================================================================
--- src/main/resources/static/css/users-view.css	(revision 43c909087ac1cb1edc0060980e76744ba06a74bf)
+++ src/main/resources/static/css/users-view.css	(revision 743de552547f72aa36d0ace8c6df4c212d5bb86d)
@@ -1,3 +1,3 @@
-
+/* General reset */
 * {
     margin: 0;
@@ -6,4 +6,5 @@
 }
 
+/* Styling for the entire page */
 body {
     font-family: Arial, sans-serif;
@@ -19,4 +20,5 @@
 }
 
+/* Frame that contains the whole content */
 #frame {
     width: 80%;
@@ -28,4 +30,5 @@
 }
 
+/* Header section */
 #header-part {
     display: flex;
@@ -36,4 +39,5 @@
 }
 
+/* Dropdown and labels styling */
 label {
     font-weight: bold;
@@ -56,4 +60,5 @@
 }
 
+/* Main part: the table */
 #main-part {
     margin-top: 20px;
@@ -91,4 +96,5 @@
 }
 
+/* For responsiveness */
 @media (max-width: 768px) {
     #header-part {
@@ -105,16 +111,33 @@
     display: none;
 }
-button{
-    padding: 5px;
-}
-#authButton{
-    position: absolute;
-    left: 1280px;
-    top: 21px;
-    width: 127px;
-    color: white;
-    background-color: red;
-    padding: 10px;
-    border: none;
-    border-radius: 5px;
-}
+/*.news-item{*/
+/*    display: flex; !* Aligns image and text in a row *!*/
+/*    !*flex-direction: column; !* Change to 'row' for horizontal layout *!*!*/
+/*    width: 300px;*/
+/*    align-items: center;*/
+/*    justify-content: center;*/
+/*    max-width: 800px; !* Limit max width to prevent stretching *!*/
+/*    margin: 0 auto; !* Centers the container *!*/
+/*    padding: 20px;*/
+/*    border: 1px solid #ddd; !* Optional: Adds a border *!*/
+/*    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);*/
+/*}*/
+/*img{*/
+/*    width: 100%; !* Make image responsive *!*/
+/*    max-width: 400px; !* Set a maximum width for the image *!*/
+/*    height: auto; !* Maintain aspect ratio *!*/
+/*    border-radius: 10px; !* Optional: Adds rounded corners *!*/
+/*    margin-bottom: 15px;*/
+/*}*/
+/*p{*/
+/*    font-size: 1.2rem;*/
+/*    line-height: 1.5;*/
+/*    text-align: center; !* Center the text *!*/
+/*    color: #333;*/
+/*    margin: 0;*/
+/*}*/
+/*@media (max-width: 768px) {*/
+/*    .news-item {*/
+/*        flex-direction: column; !* Stack elements on smaller screens *!*/
+/*    }*/
+/*}*/
