[ Update UI Tamplate ]

src/index.css

@@ -1,3 +1,8 @@
+@import url('https://fonts.googleapis.com/css2?family=Oxygen:wght@300;400;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
+
+
+
 *{
   margin: 0;
   padding: 0;
@@ -5,6 +10,17 @@
 }
 
 
+body {
+  margin: 0;
+  padding: 0;
+  font-family: "Roboto", serif;
+}
+
+.Oxygen{
+  font-family: "Oxygen", serif 
+}
+
+
 .active {
   background-color: #02A0A0 !important;
   color: #fff !important;
@@ -116,3 +132,32 @@
   right: 40%;
 }
 
+
+/* Style the scrollbar */
+::-webkit-scrollbar {
+  width: 6px; /* Width of the vertical scrollbar */
+  height: 12px; /* Height of the horizontal scrollbar */
+}
+
+/* Style the scrollbar track (the background area) */
+::-webkit-scrollbar-track {
+  background-color: #f1f1f1;
+  border-radius: 10px;
+}
+
+/* Style the scrollbar thumb (the draggable part) */
+::-webkit-scrollbar-thumb {
+  background-color: #c8c8c8cf;
+  /* Gray color for the thumb */
+  border-radius: 10px;
+  border: 1px solid #f1f1f1; /* Border around the thumb */
+}
+
+/* Style the scrollbar thumb on hover */
+::-webkit-scrollbar-thumb:hover {
+  background-color: #555; /* Darker gray when hovered */
+}
+
+input:focus-visible {
+  border: none !important;
+}