diff --git a/frontend/src/styles/index.scss b/frontend/src/styles/index.scss
index d30e0c3..f7aea28 100644
--- a/frontend/src/styles/index.scss
+++ b/frontend/src/styles/index.scss
@@ -1,47 +1,65 @@
-/* Import Inter Font */
+  /* ---------------------------------------------
+   Import Google Fonts
+--------------------------------------------- */
+
+/* Inter font: versatile, modern sans-serif for body text */
 @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap");
 
-/* Import Montserrat Font */
+/* Montserrat font: geometric sans-serif, often used for headings */
 @import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
 
-/* Tailwind Directives */
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+/* ---------------------------------------------
+   Tailwind CSS Directives
+--------------------------------------------- */
+@tailwind base;       /* Import Tailwind's base styles (reset/normalize) */
+@tailwind components; /* Import Tailwind's component styles */
+@tailwind utilities;  /* Import Tailwind utility classes */
 
+/* ---------------------------------------------
+   Custom Base Styles Layer
+--------------------------------------------- */
 @layer base {
+  /* Remove default outline on focus for all elements */
   * {
     @apply focus:outline-none;
   }
 
+  /* Enable smooth scrolling for anchor links */
   html {
     scroll-behavior: smooth;
   }
 
+  /* Body background and text color, with dark mode support */
   body {
     @apply bg-neutral-50 text-neutral-900 dark:bg-neutral-900 dark:text-neutral-100;
   }
 
+  /* Paragraph line height */
   p {
     @apply leading-normal;
   }
 
+  /* Common input and textarea styles */
   input,
   textarea {
-    @apply rounded px-4 py-2 transition;
-    @apply border border-transparent border-opacity-50 focus:border-neutral-400 dark:focus:border-neutral-600;
+    @apply rounded px-4 py-2 transition; /* Rounded corners, padding, smooth transitions */
+    @apply border border-transparent border-opacity-50 focus:border-neutral-400 dark:focus:border-neutral-600; 
+    /* Semi-transparent border by default; changes on focus with light/dark mode support */
   }
 }
 
+/* ---------------------------------------------
+   Custom Utilities Layer
+--------------------------------------------- */
 @layer utilities {
-  /* Hide scrollbar for Chrome, Safari and Opera */
+  /* Hide scrollbar for Chrome, Safari, and Opera */
   .no-scrollbar::-webkit-scrollbar {
     display: none;
   }
 
-  /* Hide scrollbar for IE, Edge and Firefox */
+  /* Hide scrollbar for IE, Edge, and Firefox */
   .no-scrollbar {
     -ms-overflow-style: none; /* IE and Edge */
-    scrollbar-width: none; /* Firefox */
+    scrollbar-width: none;    /* Firefox */
   }
 }