diff --git a/eform-client/SCSS_MIGRATION_GUIDE.md b/eform-client/SCSS_MIGRATION_GUIDE.md
new file mode 100644
index 0000000000..ef7d8c1575
--- /dev/null
+++ b/eform-client/SCSS_MIGRATION_GUIDE.md
@@ -0,0 +1,353 @@
+# SCSS Structure and Material 3 Migration Guide
+
+## Overview
+
+This document provides an overview of the SCSS structure in the eForm Angular frontend and guidance for future migration to Angular Material 3 (M3).
+
+## Current State
+
+The application currently uses **Angular Material 20.x** with **Material 2 (M2) theme APIs**. The SCSS files have been refactored to follow best practices and are well-organized for future M3 migration.
+
+### SCSS File Structure
+
+```
+src/scss/
+├── components/          # Component-specific styles
+│   ├── _index.scss     # Component imports (organized by type)
+│   ├── _button.scss    # Button styles
+│   ├── _card.scss      # Card utilities
+│   ├── _chart.scss     # Chart theming (ngx-charts)
+│   ├── _form.scss      # Form field utilities
+│   ├── _modal.scss     # Modal customization
+│   ├── _table.scss     # Table theming (mtx-grid)
+│   ├── _text.scss      # Text utilities and colors
+│   └── ...             # Other component files
+├── libs/               # Third-party library styles
+│   ├── _index.scss     # Library imports
+│   ├── theme.scss      # Main theme configuration
+│   └── ...             # Library-specific styles
+├── utilities/          # Utility classes and variables
+│   ├── _index.scss     # Utilities index
+│   ├── _colors.scss    # Color variables
+│   ├── _variables.scss # Global variables
+│   ├── _flex.scss      # Flexbox utilities
+│   ├── _grid.scss      # Grid utilities
+│   ├── _spacing.scss   # Spacing utilities
+│   └── ...             # Other utilities
+└── styles.scss         # Global styles and entry point
+```
+
+## Theme Configuration
+
+### Current Implementation (M2)
+
+The theme is configured in `src/scss/libs/theme.scss`:
+
+```scss
+// Typography
+$eform-typography: mat.m2-define-typography-config(...);
+
+// Color Palettes
+$eform-light-primary: mat.m2-define-palette(mat.$m2-indigo-palette);
+$eform-light-accent: mat.m2-define-palette(mat.$m2-pink-palette);
+
+// Theme Definitions
+$eform-light-theme: mat.m2-define-light-theme((
+  color: (
+    primary: $eform-light-primary,
+    accent: $eform-light-accent,
+  ),
+  typography: $eform-typography,
+));
+```
+
+### Theme Application
+
+Themes are applied to both light and dark modes:
+
+```scss
+body {
+  @each $key, $val in (('light', $eform-light-theme), ('dark', $eform-dark-theme)) {
+    &.theme-#{$key} {
+      @include mat.all-component-themes($val);
+      @include mtx.all-component-themes($val);
+      // ... other component themes
+    }
+  }
+}
+```
+
+## Component Theming
+
+### Current Pattern
+
+Component SCSS files use mixins to apply theme-aware styles:
+
+```scss
+@mixin color($theme) {
+  $color-config: mat.m2-get-color-config($theme);
+  // Apply theme colors
+}
+
+@mixin typography($theme) {
+  $typography-config: mat.m2-get-typography-config($theme);
+  // Apply typography
+}
+
+@mixin theme($theme) {
+  $color-config: mat.m2-get-color-config($theme);
+  @if $color-config != null {
+    @include color($theme);
+    @include typography($theme);
+  }
+}
+```
+
+## Material 3 Migration Plan
+
+### When to Migrate
+
+Consider migrating to M3 when:
+- Angular Material officially deprecates M2 APIs
+- New features are only available in M3
+- The team is ready for a comprehensive update
+
+### Migration Steps
+
+#### 1. Update Theme Configuration
+
+Replace M2 theme functions with M3 equivalents in `libs/theme.scss`:
+
+**Before (M2):**
+```scss
+$eform-typography: mat.m2-define-typography-config(...);
+$eform-light-theme: mat.m2-define-light-theme(...);
+```
+
+**After (M3):**
+```scss
+$eform-typography: mat.define-typography-config(...);
+$eform-light-theme: mat.define-theme((
+  color: (
+    theme-type: light,
+    primary: mat.$azure-palette,
+  ),
+));
+```
+
+#### 2. Update Color API Calls
+
+Replace M2 color functions in component files:
+
+**Before (M2):**
+```scss
+@mixin color($theme) {
+  $color-config: mat.m2-get-color-config($theme);
+  $primary: map.get($color-config, 'primary');
+  color: mat.m2-get-color-from-palette($primary, 500);
+}
+```
+
+**After (M3):**
+```scss
+@mixin color($theme) {
+  color: mat.get-theme-color($theme, primary);
+}
+```
+
+#### 3. Update Typography API Calls
+
+Replace M2 typography functions:
+
+**Before (M2):**
+```scss
+@mixin typography($theme) {
+  $typography-config: mat.m2-get-typography-config($theme);
+  $body-text: map.get($typography-config, 'body-1');
+}
+```
+
+**After (M3):**
+```scss
+@mixin typography($theme) {
+  $typography-config: mat.get-theme-typography($theme);
+  font: mat.get-theme-typography($theme, body-large);
+}
+```
+
+#### 4. Update Component Mixins
+
+Update all component theme mixins in the `components/` directory to use M3 APIs.
+
+#### 5. Test Thoroughly
+
+- Test both light and dark themes
+- Verify all component styles render correctly
+- Check responsive behavior
+- Test across different browsers
+
+### Files to Update
+
+When migrating to M3, update these files:
+
+1. **libs/theme.scss** - Main theme configuration
+2. **components/_text.scss** - Color utilities
+3. **components/_table.scss** - Table theming
+4. **components/_chart.scss** - Chart theming
+5. Any other files using `m2-` prefixed functions
+
+### Search for M2 API Usage
+
+To find all M2 API usages, run:
+
+```bash
+grep -r "m2-" src/scss/
+```
+
+Current M2 API usages (as of last refactoring):
+- `mat.m2-define-typography-config`
+- `mat.m2-define-typography-level`
+- `mat.m2-define-palette`
+- `mat.m2-define-light-theme`
+- `mat.m2-define-dark-theme`
+- `mat.m2-get-color-config`
+- `mat.m2-get-typography-config`
+- `mat.m2-get-color-from-palette`
+
+## Best Practices
+
+### 1. Use @use and @forward
+
+✅ **Do:**
+```scss
+@use '@angular/material' as mat;
+@use '../utilities/colors' as *;
+```
+
+❌ **Don't:**
+```scss
+@import '@angular/material';
+@import '../utilities/colors';
+```
+
+### 2. Organize Styles Logically
+
+Group related styles together and use clear section headers:
+
+```scss
+/**
+ * Section Name
+ * 
+ * Description of what this section contains.
+ */
+.class-name {
+  // styles
+}
+```
+
+### 3. Document Complex Patterns
+
+Add comments explaining non-obvious behavior:
+
+```scss
+/**
+ * Progress Circle Component
+ * 
+ * Uses CSS conic-gradient for the progress arc.
+ * The --percentage custom property controls the fill.
+ */
+.progress-circle {
+  background: conic-gradient(
+    #319c4c 0%,
+    #319c4c calc(var(--percentage) * 1%),
+    lightgrey calc(var(--percentage) * 1%)
+  );
+}
+```
+
+### 4. Use CSS Custom Properties for Theming
+
+Leverage CSS variables for dynamic theming:
+
+```scss
+body, .theme-light {
+  --theme-body-font-color: #242729;
+  --tp-td-bg: #ffffff;
+}
+
+body, .theme-dark {
+  --theme-body-font-color: #e6e6e6;
+  --tp-td-bg: #424242;
+}
+```
+
+### 5. Keep Specificity Low
+
+Avoid overly specific selectors when possible:
+
+✅ **Do:**
+```scss
+.status-active {
+  color: #fff;
+  
+  span {
+    color: #fff;
+  }
+}
+```
+
+❌ **Don't:**
+```scss
+body .container .status-active span {
+  color: #fff;
+}
+```
+
+## Troubleshooting
+
+### Build Errors After Changes
+
+If you encounter build errors:
+
+1. Clear the build cache: `rm -rf dist/`
+2. Reinstall dependencies: `yarn install`
+3. Rebuild: `yarn build`
+
+### Style Not Applying
+
+If styles aren't applying:
+
+1. Check import order in `_index.scss` files
+2. Verify CSS specificity isn't being overridden
+3. Use browser DevTools to inspect computed styles
+4. Check that theme mixins are included correctly
+
+### Dark Theme Issues
+
+If dark theme styles are incorrect:
+
+1. Verify theme class is applied to `body` element
+2. Check CSS custom properties are defined for both themes
+3. Ensure component theme mixins check for `is-dark-theme`
+
+## Resources
+
+- [Angular Material Theming Guide](https://material.angular.io/guide/theming)
+- [Material Design 3](https://m3.material.io/)
+- [Sass Documentation](https://sass-lang.com/documentation)
+- [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*)
+
+## Questions?
+
+If you have questions about the SCSS structure or M3 migration:
+
+1. Review this guide thoroughly
+2. Check the inline comments in SCSS files
+3. Consult the Angular Material documentation
+4. Reach out to the development team
+
+---
+
+**Last Updated:** 2025-11-16
+**Angular Material Version:** 20.1.2
+**Theme API:** Material 2 (M2) - Compatible with M3
diff --git a/eform-client/src/scss/components/_card.scss b/eform-client/src/scss/components/_card.scss
index 836c9ccca3..ee6edac788 100644
--- a/eform-client/src/scss/components/_card.scss
+++ b/eform-client/src/scss/components/_card.scss
@@ -1,11 +1,29 @@
+/**
+ * Card Component Styles
+ * 
+ * Provides utility classes for customizing card header and body spacing.
+ * These classes allow for flexible card layouts with different padding configurations.
+ */
+
+/**
+ * Card Header Variants
+ */
+
+// Extended header with less vertical padding
 .card-header-extended {
   padding: 0.3rem 1.7rem;
 }
 
+// Simple header with standard padding
 .card-header-simple {
   padding: 1.2rem 1.7rem;
 }
 
+/**
+ * Card Body Variants
+ */
+
+// Minimal spacing for card body
 .card-body-no-spaces {
   padding: 0.2rem 1rem;
 }
diff --git a/eform-client/src/scss/components/_chart.scss b/eform-client/src/scss/components/_chart.scss
index 15a2e913f5..96d17c6ba2 100644
--- a/eform-client/src/scss/components/_chart.scss
+++ b/eform-client/src/scss/components/_chart.scss
@@ -1,13 +1,28 @@
+/**
+ * Chart Component Styles
+ * 
+ * Provides theming for ngx-charts components with support for light and dark themes.
+ * Customizes chart appearance including text, backgrounds, tooltips, and legends.
+ */
+
 @use 'sass:map';
 @use '@angular/material' as mat;
 
+/**
+ * Color Mixin
+ * 
+ * Applies theme-aware styling to chart components.
+ * Provides comprehensive dark theme support with carefully chosen colors.
+ * 
+ * @param {Map} $theme - The Material theme map
+ */
 @mixin color($theme) {
   $color-config: mat.m2-get-color-config($theme);
   $is-dark-theme: map.get($color-config, 'is-dark');
   $background: map.get(map.get($theme, 'background'), 'card');
 
   @if ($is-dark-theme) {
-    /*Backgrounds*/
+    // Dark theme color palette
     $color-bg-darkest: #13141b;
     $color-bg-darker: #1b1e27;
     $color-bg-dark: #232837;
@@ -15,16 +30,17 @@
     $color-bg-light: #455066;
     $color-bg-lighter: #5b6882;
 
-    /*Text*/
+    // Dark theme text colors
     $color-text-dark: #72809b;
     $color-text-med-dark: #919db5;
-    $color-text-med: #A0AABE;
+    $color-text-med: #a0aabe;
     $color-text-med-light: #d9dce1;
     $color-text-light: #f0f1f6;
     $color-text-lighter: #fff;
 
     background: $color-bg-darker;
 
+    // Base chart text styling
     .ngx-charts {
       text {
         fill: $color-text-med;
@@ -46,6 +62,7 @@
         fill: #fff;
       }
 
+      // Grid panel styling
       .grid-panel {
         &.odd {
           rect {
@@ -54,18 +71,21 @@
         }
       }
 
+      // Force-directed graph styling
       .force-directed-graph {
         .edge {
           stroke: $color-bg-light;
         }
       }
 
+      // Number card styling
       .number-card {
         p {
           color: $color-text-light;
         }
       }
 
+      // Gauge chart styling
       .gauge {
         .background-arc {
           path {
@@ -84,6 +104,7 @@
         }
       }
 
+      // Linear gauge styling
       .linear-gauge {
         .background-bar {
           path {
@@ -96,6 +117,7 @@
         }
       }
 
+      // Timeline styling
       .timeline {
         .brush-background {
           fill: rgba(255, 255, 255, 0.05);
@@ -109,11 +131,13 @@
         }
       }
 
+      // Polar chart styling
       .polar-chart .polar-chart-background {
         fill: rgb(30, 34, 46);
       }
     }
 
+    // Chart legend styling for dark theme
     .chart-legend {
       .legend-labels {
         background: $background !important;
@@ -144,6 +168,7 @@
       }
     }
 
+    // Advanced pie legend styling for dark theme
     .advanced-pie-legend {
       color: $color-text-med;
 
@@ -164,7 +189,8 @@
       font-size: 0.8em;
       color: $color-text-med;
     }
-  } @else { // light theme
+  } @else {
+    // Light theme legend styling
     .advanced-pie-legend {
       .legend-items-container {
         .legend-items {
@@ -172,16 +198,29 @@
         }
       }
     }
-}
+  }
 }
 
+/**
+ * Main Theme Mixin
+ * 
+ * Entry point for applying theme-specific chart styles.
+ * 
+ * @param {Map} $theme - The Material theme map
+ */
 @mixin theme($theme) {
   $color-config: mat.m2-get-color-config($theme);
+  
   @if $color-config != null {
     @include color($theme);
   }
 }
 
+/**
+ * Common Chart Styles
+ * 
+ * Styles applied regardless of theme.
+ */
 .legend-title-text {
   text-overflow: clip !important;
   padding-right: 5px;
diff --git a/eform-client/src/scss/components/_form.scss b/eform-client/src/scss/components/_form.scss
index 2cca4397db..3ae95744c7 100644
--- a/eform-client/src/scss/components/_form.scss
+++ b/eform-client/src/scss/components/_form.scss
@@ -1,18 +1,37 @@
+/**
+ * Form Component Styles
+ * 
+ * Provides utility classes for Material Design form fields with various spacing options.
+ * These classes enable flexible form layouts and consistent spacing across the application.
+ */
+
+/**
+ * Material Design Form Variants
+ */
+
+// Form field for case elements with minimal spacing
 .md-form {
   &.md-form-case-elem {
     margin-top: 0.3rem;
     margin-bottom: 0;
   }
+
+  // Form field with no spacing
   &.md-form-no-spacing {
     margin: 0 !important;
     padding: 0 !important;
   }
+
+  // Small form field with standard margin
   &.md-form-sm {
     margin: 1rem !important;
     padding: 0 !important;
   }
 }
 
+/**
+ * Material Form Field Base Styles
+ */
 .mat-mdc-form-field {
   width: 100%;
 }
diff --git a/eform-client/src/scss/components/_index.scss b/eform-client/src/scss/components/_index.scss
index dba96b25d5..009f7997c1 100644
--- a/eform-client/src/scss/components/_index.scss
+++ b/eform-client/src/scss/components/_index.scss
@@ -1,15 +1,38 @@
+/**
+ * Component Styles Index
+ * 
+ * Central import point for all component-specific styles.
+ * This file organizes component styles in a logical order and makes them
+ * available throughout the application.
+ * 
+ * Organization:
+ * - Interactive components (buttons, checkboxes, dropdowns)
+ * - Layout components (cards, modals, tables)
+ * - Content components (text, icons, charts)
+ * - UI feedback components (spinners, progress bars, tooltips, tags)
+ * 
+ * Note: Order matters for cascade and specificity rules.
+ */
+
+// Interactive Components
 @use 'button';
-@use 'material-dropdown';
-@use 'text';
 @use 'checkbox';
-@use 'icon';
-@use 'spinner';
-@use 'progress-bar';
-@use 'table';
 @use 'checkbox-material';
+@use 'material-dropdown';
+
+// Layout Components
 @use 'card';
 @use 'form';
 @use 'modal';
+@use 'table';
+
+// Content Components
+@use 'text';
+@use 'icon';
 @use 'chart';
-@use "tooltip";
-@use "tag";
+
+// UI Feedback Components
+@use 'spinner';
+@use 'progress-bar';
+@use 'tooltip';
+@use 'tag';
diff --git a/eform-client/src/scss/components/_modal.scss b/eform-client/src/scss/components/_modal.scss
index 584acd412e..42e9210cd4 100644
--- a/eform-client/src/scss/components/_modal.scss
+++ b/eform-client/src/scss/components/_modal.scss
@@ -1,27 +1,50 @@
-// Modal y fix
+/**
+ * Modal Component Styles
+ * 
+ * Customizes modal behavior and appearance with theme support.
+ * Handles scrolling behavior and dark theme styling for modal components.
+ */
+
+/**
+ * Modal Scrolling Behavior
+ * 
+ * Ensures modals are scrollable without showing scrollbars.
+ * Provides a cleaner appearance across different browsers.
+ */
 .modal-open .modal {
   overflow-y: auto;
-  -ms-overflow-style: none;  // IE 10+
-  overflow: -moz-scrollbars-none;  // Firefox
+  -ms-overflow-style: none; // IE 10+
+  overflow: -moz-scrollbars-none; // Firefox
+  
   &::-webkit-scrollbar {
-    display: none;  // Safari and Chrome
+    display: none; // Safari and Chrome
   }
 }
 
+/**
+ * Dark Theme Modal Styles
+ * 
+ * Applies dark theme colors to modal header, body, and footer.
+ * Ensures proper contrast and readability in dark mode.
+ */
 body.theme-dark {
   .modal-content {
     background-color: var(--theme-background-color);
+    
     .modal-header {
       background-color: var(--black-075);
       color: var(--theme-body-font-color);
       border-bottom: 1px solid var(--black-300);
+      
       button.close {
         color: var(--black-900);
       }
     }
+    
     .modal-body {
       color: var(--theme-body-font-color);
     }
+    
     .modal-footer {
       border-top: 1px solid var(--black-300);
     }
diff --git a/eform-client/src/scss/components/_table.scss b/eform-client/src/scss/components/_table.scss
index 056cf0e8fc..3c0726b28d 100644
--- a/eform-client/src/scss/components/_table.scss
+++ b/eform-client/src/scss/components/_table.scss
@@ -1,10 +1,22 @@
+/**
+ * Table Component Styles
+ * 
+ * Provides theming and customization for Material table components (mtx-grid).
+ * Includes color configurations for light and dark themes, and typography settings.
+ */
+
 @use 'sass:map';
 @use '@angular/material' as mat;
 
+/**
+ * Base Table Styles
+ * 
+ * Sets default styling for mtx-grid table component.
+ */
 .mtx-grid {
   max-height: 78.5vh;
   border: 0 !important;
-  outline: 1px solid rgba(255,255,255,0.2);
+  outline: 1px solid rgba(255, 255, 255, 0.2);
 
   .mat-mdc-standard-chip {
     height: unset;
@@ -18,33 +30,49 @@
     min-height: 82px;
   }
 
-  &.mtx-grid-toolbar-display-block, .mtx-grid-toolbar-display-block {
+  &.mtx-grid-toolbar-display-block,
+  .mtx-grid-toolbar-display-block {
     .mtx-grid-toolbar {
       display: block !important;
     }
   }
 }
 
+/**
+ * Color Mixin
+ * 
+ * Applies theme-aware background colors to table cells.
+ * Provides different color schemes for light and dark themes.
+ * 
+ * @param {Map} $theme - The Material theme map
+ */
 @mixin color($theme) {
   $color-config: mat.m2-get-color-config($theme);
   $is-dark-theme: map.get($color-config, 'is-dark');
+  
+  // Light theme colors
   $background-powder-color: #b3d3ea;
   $background-yellow-color: #e6d178;
   $background-red-light-color: #f8d7da;
   $background-red-dark-color: #f5a5a8;
+  
+  // Adjust colors for dark theme
   @if $is-dark-theme {
     $background-powder-color: #4c6071;
     $background-yellow-color: #7e6f3a;
     $background-red-light-color: #f8d7da;
     $background-red-dark-color: #f5a5a8;
   }
+  
   mtx-grid {
     .background-yellow {
       background-color: $background-yellow-color !important;
     }
+    
     .background-red-light {
       background-color: $background-red-light-color !important;
     }
+    
     .background-red-dark {
       background-color: $background-red-dark-color !important;
     }
@@ -54,24 +82,43 @@
     }
   }
 }
+
+/**
+ * Typography Mixin
+ * 
+ * Applies typography settings to table header and body text.
+ * Uses theme typography configuration for consistent text styling.
+ * 
+ * @param {Map} $theme - The Material theme map
+ */
 @mixin typography($theme) {
   $typography-config: mat.m2-get-typography-config($theme);
   $header-text: map.get($typography-config, 'subtitle-2');
   $normal-text: map.get($typography-config, 'body-2');
+  
   mtx-grid thead * {
     @each $prop, $value in $header-text {
-      $prop: $value;
+      #{$prop}: $value;
     }
   }
+  
   mtx-grid tbody * {
     @each $prop, $value in $normal-text {
-      $prop: $value;
+      #{$prop}: $value;
     }
   }
 }
 
+/**
+ * Main Theme Mixin
+ * 
+ * Entry point for applying all theme-specific table styles.
+ * 
+ * @param {Map} $theme - The Material theme map
+ */
 @mixin theme($theme) {
   $color-config: mat.m2-get-color-config($theme);
+  
   @if $color-config != null {
     @include color($theme);
     @include typography($theme);
diff --git a/eform-client/src/scss/components/_text.scss b/eform-client/src/scss/components/_text.scss
index c52fc569a9..0f6e0df4c4 100644
--- a/eform-client/src/scss/components/_text.scss
+++ b/eform-client/src/scss/components/_text.scss
@@ -1,16 +1,30 @@
+/**
+ * Text Component Styles
+ * 
+ * Provides utility classes and theme-aware text styling.
+ * Includes link colors, text colors, and white-space utilities.
+ */
+
 @use 'sass:map';
 @use '@angular/material' as mat;
 @use '../utilities/colors' as *;
 
+/**
+ * Link Styles
+ */
 a {
   &.link-primary {
     color: $eform-red;
+    
     &:hover {
       color: $eform-red-dark;
     }
   }
 }
 
+/**
+ * Text Color Utilities
+ */
 .text-danger {
   color: $eform-red;
 }
@@ -26,12 +40,27 @@ a {
 .text-white {
   color: white;
 }
+
+/**
+ * White-space Utilities
+ * 
+ * Generates utility classes for controlling white-space behavior.
+ * Usage: .text-nowrap, .text-pre, .text-normal, etc.
+ */
 @each $key in (nowrap, unset, break-spaces, normal, pre, pre-line, pre-wrap) {
   .text-#{$key} {
     white-space: $key;
   }
 }
 
+/**
+ * Theme-aware Text Colors Mixin
+ * 
+ * Generates text color classes based on theme palette colors.
+ * Provides .text-warn, .text-accent, and .text-primary classes.
+ * 
+ * @param {Map} $theme - The Material theme map
+ */
 @mixin color($theme) {
   $color-config: mat.m2-get-color-config($theme);
   $warn-palette: map.get($color-config, 'warn');
@@ -45,8 +74,16 @@ a {
   }
 }
 
+/**
+ * Main Theme Mixin
+ * 
+ * Entry point for applying theme-specific text styles.
+ * 
+ * @param {Map} $theme - The Material theme map
+ */
 @mixin theme($theme) {
   $color-config: mat.m2-get-color-config($theme);
+  
   @if $color-config != null {
     @include color($theme);
   }
diff --git a/eform-client/src/scss/libs/theme.scss b/eform-client/src/scss/libs/theme.scss
index bb410c10bb..fe215a05f6 100644
--- a/eform-client/src/scss/libs/theme.scss
+++ b/eform-client/src/scss/libs/theme.scss
@@ -1,21 +1,57 @@
-/* You can add global styles to this file, and also import other style files 2 */
+/**
+ * Theme Configuration for eForm Angular Frontend
+ * 
+ * This file defines the Material Design theme configuration for the application.
+ * It uses Angular Material's M2 theme APIs which are compatible with Material 2 and Material 3.
+ * 
+ * Structure:
+ * - Typography configuration
+ * - Color palettes (light and dark themes)
+ * - Theme definitions
+ * - Component theme includes
+ * 
+ * Note: When migrating to Material 3, update theme APIs from m2-* to the new M3 APIs.
+ * See: https://material.angular.io/guide/theming
+ */
 
+// Core Angular Material imports
 @use '@angular/material' as mat;
 @use '@ng-matero/extensions' as mtx;
+
+// Third-party library styles
 @use './ngx-editor/ngx-editor' as ngx-editor;
-@use '../components/text' as text;
 @use '../libs/ngx-gallery/ngx-gallery' as ngx-gallery;
+@use '../libs/ngx-toastr/ngx-toastr' as ngx-toastr;
+
+// Component theme mixins
+@use '../components/text' as text;
 @use '../components/table' as table;
 @use '../components/chart' as chart;
-@use '../libs/ngx-toastr/ngx-toastr' as ngx-toastr;
-//@use '../libs/ng-datepicker/ng-datepicker' as ng-datepicker;
 @use '../components/tag' as tag;
-@include mat.core();
 
+// Include Material core styles (only once per app)
+@include mat.core();
 
+// Typography configuration
 $letter-spacing: normal;
 $eform-font-family: Nunito Sans, Roboto, "Helvetica Neue", sans-serif;
-// Define a typography
+/**
+ * Typography Configuration
+ * 
+ * Defines custom typography levels for the application.
+ * These settings override Material's default typography scale.
+ * 
+ * Typography Levels:
+ * - headline-4: Large page titles (1.3rem, weight 400)
+ * - headline-5: Section headers (1.2rem, weight 300)
+ * - headline-6: Subsection headers (1.17rem, weight 300)
+ * - subtitle-1: Prominent text (1.15rem, weight 300)
+ * - subtitle-2: Table headers (12.8px, weight 300)
+ * - body-1: Default body text and table content (16px, weight 300)
+ * - body-2: Secondary body text (1rem, weight 300)
+ * - caption: Small text (1rem, weight 300)
+ * - button: Button text (14px, weight 300)
+ */
 $eform-typography: mat.m2-define-typography-config(
   $font-family: $eform-font-family,
   $headline-4: mat.m2-define-typography-level(
@@ -49,14 +85,14 @@ $eform-typography: mat.m2-define-typography-config(
   $subtitle-2: mat.m2-define-typography-level(
     $font-family: $eform-font-family,
     $font-weight: 300,
-    $font-size: 12.8px, // font size for: table header
+    $font-size: 12.8px,
     $line-height: 1.2,
     $letter-spacing: $letter-spacing,
   ),
   $body-1: mat.m2-define-typography-level(
     $font-family: $eform-font-family,
     $font-weight: 300,
-    $font-size: 16px, // font size for: default level text, text in table
+    $font-size: 16px,
     $line-height: 1.2,
     $letter-spacing: $letter-spacing,
   ),
@@ -77,12 +113,18 @@ $eform-typography: mat.m2-define-typography-config(
   $button: mat.m2-define-typography-level(
     $font-family: $eform-font-family,
     $font-weight: 300,
-    $font-size: 14px, //  font size for: button text, button icon(?)
+    $font-size: 14px,
     $line-height: 1.15,
     $letter-spacing: $letter-spacing,
-  ));
+  )
+);
 
-// Define a light theme
+/**
+ * Light Theme Configuration
+ * 
+ * Defines the color palette and theme for light mode.
+ * Uses Material Design color palettes with custom configurations.
+ */
 $eform-light-primary: mat.m2-define-palette(mat.$m2-indigo-palette);
 $eform-light-accent: mat.m2-define-palette(mat.$m2-pink-palette);
 $eform-light-theme: mat.m2-define-light-theme((
@@ -93,7 +135,12 @@ $eform-light-theme: mat.m2-define-light-theme((
   typography: $eform-typography,
 ));
 
-// Define a dark theme
+/**
+ * Dark Theme Configuration
+ * 
+ * Defines the color palette and theme for dark mode.
+ * Uses Material Design color palettes optimized for dark backgrounds.
+ */
 $eform-dark-primary: mat.m2-define-palette(mat.$m2-blue-grey-palette);
 $eform-dark-accent: mat.m2-define-palette(mat.$m2-pink-palette);
 $eform-dark-theme: mat.m2-define-dark-theme((
@@ -104,25 +151,42 @@ $eform-dark-theme: mat.m2-define-dark-theme((
   typography: $eform-typography,
 ));
 
+/**
+ * Theme Application
+ * 
+ * Applies theme styles to components based on the active theme (light or dark).
+ * Each theme class (.theme-light, .theme-dark) includes all component themes.
+ * 
+ * Component themes included:
+ * - Angular Material components (all-component-themes)
+ * - Matero Extensions components
+ * - Custom components (text, table, chart, tag, etc.)
+ * - Third-party libraries (ngx-editor, ngx-gallery, ngx-toastr)
+ */
 body {
   @each $key, $val in (('light', $eform-light-theme), ('dark', $eform-dark-theme)) {
     &.theme-#{$key} {
+      // Include Angular Material component themes
       @include mat.all-component-themes($val);
+      
+      // Include Matero Extensions component themes
       @include mtx.all-component-themes($val);
+      
+      // Include third-party library themes
       @include ngx-editor.theme($val);
-      @include text.theme($val);
       @include ngx-gallery.theme($val);
-      @include table.theme($val);
       @include ngx-toastr.theme($val);
+      
+      // Include custom component themes
+      @include text.theme($val);
+      @include table.theme($val);
       @include chart.theme($val);
-      //@include ng-datepicker.theme($val);
       @include tag.theme($val);
-      //@include mtx.all-experimental-component-themes($val);
     }
   }
 
   &.mat-typography {
-    margin: 0 0 0 0;
+    margin: 0;
   }
 
   #main-header-text {
@@ -130,9 +194,17 @@ body {
   }
 }
 
+/**
+ * Material Design Component Overrides
+ * 
+ * Custom styles to override default Material Design component behavior.
+ * These overrides ensure consistent styling across the application.
+ */
+
+// Chip component adjustments
 .mdc-evolution-chip__action {
   padding-top: 3px !important;
-  padding-bottom: 0px !important;
+  padding-bottom: 0 !important;
 }
 
 .mdc-evolution-chip__text-label > span {
@@ -140,18 +212,15 @@ body {
   top: -1px;
 }
 
+// Icon button sizing
 .mat-mdc-icon-button {
   padding: 0 !important;
   width: 28px !important;
   height: 28px !important;
 }
-.mat-calendar-previous-button.mdc-icon-button.mat-mdc-icon-button.mat-unthemed.mat-mdc-button-base {
-  --mdc-icon-button-state-layer-size: 40px !important;
-  width: var(--mdc-icon-button-state-layer-size) !important;
-  height: var(--mdc-icon-button-state-layer-size) !important;
-  padding: 8px !important;
-}
 
+// Calendar navigation buttons
+.mat-calendar-previous-button.mdc-icon-button.mat-mdc-icon-button.mat-unthemed.mat-mdc-button-base,
 .mat-calendar-next-button.mdc-icon-button.mat-mdc-icon-button.mat-unthemed.mat-mdc-button-base {
   --mdc-icon-button-state-layer-size: 40px !important;
   width: var(--mdc-icon-button-state-layer-size) !important;
@@ -159,33 +228,28 @@ body {
   padding: 8px !important;
 }
 
-//  padding: 0px;// !important;
-//  height: 28px;// !important;
-//  width: 28px;// !important;
-//}
-//
-//.mat-calendar-previous-button.mdc-icon-button.mat-mdc-icon-button.mat-unthemed.mat-mdc-button-base {
-//  --mdc-icon-button-state-layer-size: 40px;
-//  width: var(--mdc-icon-button-state-layer-size);
-//  height: var(--mdc-icon-button-state-layer-size);
-//  padding: 8px !important;
-//}
-
-
+// Microting UID color reference
 .microting-uid {
   color: mat.m2-get-color-from-palette(mat.$m2-indigo-palette, 300);
 }
 
+// Table header alignment
 .mat-sort-header-content {
   text-align: start !important;
 }
 
+// Dark theme text field label color
 .theme-dark {
   .mdc-text-field--filled:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-floating-label {
-    color: white; // Replace with your desired color value
+    color: white;
   }
 }
 
+/**
+ * Dialog Component Overrides
+ * 
+ * Customizes dialog appearance with rounded corners and adjusted spacing.
+ */
 .cdk-overlay-container {
   @include mat.dialog-overrides((
     container-shape: 20px,
@@ -194,7 +258,14 @@ body {
   ));
 }
 
-/* Global button shape overrides */
+/**
+ * Button Shape Customization
+ * 
+ * Applies consistent border radius to all Material button variants.
+ * This creates a more modern, rounded appearance across the application.
+ */
+
+// Standard buttons
 button.mat-mdc-raised-button,
 a.mat-mdc-raised-button,
 button.mat-mdc-unelevated-button,
@@ -206,13 +277,13 @@ a.mat-mdc-text-button {
   border-radius: 20px;
 }
 
-/* Icon buttons */
+// Icon buttons
 button.mat-mdc-icon-button,
 a.mat-mdc-icon-button {
   border-radius: 20px;
 }
 
-/* Optional: FABs */
+// Floating Action Buttons (FABs)
 button.mat-mdc-fab,
 a.mat-mdc-fab,
 button.mat-mdc-mini-fab,
diff --git a/eform-client/src/scss/styles.scss b/eform-client/src/scss/styles.scss
index 9585d887c9..17119f02ab 100644
--- a/eform-client/src/scss/styles.scss
+++ b/eform-client/src/scss/styles.scss
@@ -1,33 +1,77 @@
-/* You can add global styles to this file, and also import other style files 2 */
+/**
+ * Global Styles
+ * 
+ * This file contains application-wide styles including:
+ * - Base HTML/body styles
+ * - CSS custom properties (CSS variables) for theming
+ * - Utility classes for common patterns
+ * - Component overrides and customizations
+ * - Status and priority indicators
+ * 
+ * Structure:
+ * 1. Imports (components, utilities, libraries)
+ * 2. Base element styles
+ * 3. Theme variables
+ * 4. Utility classes
+ * 5. Status/priority classes
+ * 6. Custom component styles
+ */
+
+// Import component styles
 @use "components/index" as components;
+
+// Import utilities (variables, colors, spacing, etc.)
 @use "utilities" as *;
+
+// Import third-party library styles
 @use "libs/index" as libs;
 
+/**
+ * Font Configuration
+ */
 $eform-font-family: Nunito Sans, Roboto, "Helvetica Neue", sans-serif;
-// h-100 for base elements
-html, body {
+
+/**
+ * Base HTML and Body Styles
+ */
+html,
+body {
   height: 100vh;
   font-size: 14px;
   margin: 0;
-  --theme-body-font-color: var(--black-800);
   font-family: $eform-font-family;
+  --theme-body-font-color: var(--black-800);
 
   .mat-mdc-option {
     font-size: unset !important;
   }
 }
 
-b, strong {
+/**
+ * Typography Overrides
+ */
+b,
+strong {
   font-weight: 500;
 }
+
 h2 {
   font-weight: 300;
 }
+
+/**
+ * Layout Utilities
+ */
 .spacer {
   flex: 1 1 auto;
 }
 
-* { // for all elements with scroll
+/**
+ * Custom Scrollbar Styles
+ * 
+ * Applies custom scrollbar styling for webkit browsers.
+ */
+* {
   &::-webkit-scrollbar {
     width: 8px;
     height: 8px;
@@ -35,190 +79,223 @@ h2 {
   }
 
   &::-webkit-scrollbar-thumb {
-    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
+    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
     background-color: #999999;
   }
 
   &::-webkit-scrollbar-track {
-    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
+    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
     background-color: white;
   }
 }
 
-body, .theme-light {
+/**
+ * Light Theme CSS Custom Properties
+ */
+body,
+.theme-light {
   --black-800: #242729;
   --blue-600: #0077cc;
   --theme-body-font-color: var(--black-800);
   --tp-td-bg: #ffffff;
   --tp-th-bg: #f7f9fa;
-  --tp-border: #EBEFF2;
+  --tp-border: #ebeff2;
   --tp-text: #111827;
   --tp-white-text: black;
 }
 
-body, .theme-dark {
+/**
+ * Dark Theme CSS Custom Properties
+ */
+body,
+.theme-dark {
   --tp-td-bg: #424242;
   --tp-th-bg: #424242;
-  --tp-border: #2B2B2B;
-  --tp-text: #E6E6E6;
+  --tp-border: #2b2b2b;
+  --tp-text: #e6e6e6;
   --tp-white-text: white;
 }
 
+/**
+ * Link Styles
+ */
 a {
   text-decoration: none;
 }
 
-//.mat-icon {
-//  width: $icon-size !important;
-//  height: $icon-size !important;
-//  font-size: $icon-size;
-//  line-height: $icon-size !important;
-//}
-//.mat-mdc-menu-item .mat-icon {
-//  width: 18px;
-//  height: 18px;
-//  font-size: 18px;
-//  line-height: 18px
-//}
-
+/**
+ * Common Utility Classes
+ */
 .h-100 {
   height: 100% !important;
 }
 
 .text-center {
-  text-align: center!important;
+  text-align: center !important;
 }
 
+/**
+ * Report Case Styles
+ */
 .reportCaseUnarchive {
   color: green !important;
 }
 
+/**
+ * Status Indicator Classes
+ * 
+ * Provides visual feedback for active/inactive states.
+ */
 .status-active {
-  background-color: #4caf50 !important; /* green */
-  color: #fff !important;
-}
-.status-inactive {
-  background-color: #f44336 !important; /* red */
+  background-color: #4caf50 !important;
   color: #fff !important;
-}
 
-.status-active span {
-  color: #fff !important;
+  span {
+    color: #fff !important;
+  }
 }
 
-.status-inactive span {
+.status-inactive {
+  background-color: #f44336 !important;
   color: #fff !important;
+
+  span {
+    color: #fff !important;
+  }
 }
 
+/**
+ * Priority Indicator Classes
+ * 
+ * Color-coded priority levels for tasks and items.
+ * Range from urgent (red) to low (light red/pink).
+ */
 .priority-green {
-  background-color: #a3d7b1 !important; /* green */
-  color: #000 !important;}
+  background-color: #a3d7b1 !important;
+  color: #000 !important;
+}
 
 .priority-urgent {
-  background-color: #a71d2a !important; /* red */
+  background-color: #a71d2a !important;
   color: #fff !important;
+
+  span {
+    color: #fff !important;
+  }
 }
+
 .priority-high {
-  background-color: #dc3545 !important; /* orange */
+  background-color: #dc3545 !important;
   color: #fff !important;
+
+  span {
+    color: #fff !important;
+  }
 }
+
 .priority-medium {
-  background-color: #f5a5a8 !important; /* yellow */
+  background-color: #f5a5a8 !important;
   color: #fff !important;
+
+  span {
+    color: #fff !important;
+  }
 }
+
 .priority-low {
-  background-color: #f8d7da !important; /* green */
+  background-color: #f8d7da !important;
   color: #000 !important;
-}
 
-.priority-urgent span {
-  color: #fff !important;
-}
-.priority-high span {
-  color: #fff !important;
-}
-.priority-medium span {
-  color: #fff !important;
-}
-.priority-low span {
-  color: #000 !important;
+  span {
+    color: #000 !important;
+  }
 }
-//.background-yellow{background-color: var(--yellow) !important;}
+/**
+ * Planning Container Background Classes
+ * 
+ * Provides different background colors for planning/calendar containers.
+ * Each background class includes a styled plan-container child element.
+ */
 .grey-background {
   background-color: var(--tp-td-bg) !important;
-  border-right: 1px solid #EBEFF2 !important;
-  border-bottom: 1px solid #EBEFF2 !important;
+  border-right: 1px solid #ebeff2 !important;
+  border-bottom: 1px solid #ebeff2 !important;
   padding: 5px !important;
-}
 
-.grey-background .plan-container {
-  background-color: #EBEFF2 !important;
-  width: 100% !important;
-  height: 100% !important;
-  display: flex;
-  align-items: stretch;
-  justify-content: stretch;
-  min-height: 100px;
-  min-width: 250px !important;
+  .plan-container {
+    background-color: #ebeff2 !important;
+    width: 100% !important;
+    height: 100% !important;
+    display: flex;
+    align-items: stretch;
+    justify-content: stretch;
+    min-height: 100px;
+    min-width: 250px !important;
+  }
 }
 
 .white-background {
   background-color: var(--tp-td-bg) !important;
-  border-right: 1px solid #EBEFF2 !important;
-  border-bottom: 1px solid #EBEFF2 !important;
+  border-right: 1px solid #ebeff2 !important;
+  border-bottom: 1px solid #ebeff2 !important;
   padding: 5px !important;
-}
 
-.white-background .plan-container {
-  background-color: var(--tp-td-bg) !important;
-  width: 100% !important;
-  height: 100% !important;
-  display: flex;
-  align-items: stretch;
-  justify-content: stretch;
-  min-height: 100px;
-  min-width: 250px !important;
+  .plan-container {
+    background-color: var(--tp-td-bg) !important;
+    width: 100% !important;
+    height: 100% !important;
+    display: flex;
+    align-items: stretch;
+    justify-content: stretch;
+    min-height: 100px;
+    min-width: 250px !important;
+  }
 }
 
 .green-background {
   background-color: var(--tp-td-bg) !important;
-  border-right: 1px solid #EBEFF2 !important;
-  border-bottom: 1px solid #EBEFF2 !important;
+  border-right: 1px solid #ebeff2 !important;
+  border-bottom: 1px solid #ebeff2 !important;
   padding: 5px !important;
-}
 
-.green-background .plan-container {
-  background-color: #E2F7E7 !important;
-  width: 100% !important;
-  height: 100% !important;
-  display: flex;
-  align-items: stretch;
-  justify-content: stretch;
-  min-height: 100px;
-  min-width: 250px !important;
+  .plan-container {
+    background-color: #e2f7e7 !important;
+    width: 100% !important;
+    height: 100% !important;
+    display: flex;
+    align-items: stretch;
+    justify-content: stretch;
+    min-height: 100px;
+    min-width: 250px !important;
+  }
 }
 
 .red-background {
   background-color: var(--tp-td-bg) !important;
-  border-bottom: 1px solid #EBEFF2 !important;
-  border-right: 1px solid #EBEFF2 !important;
-}
-
-.red-background .plan-container {
-  background-color: #FFE1E1 !important;
-  width: 100% !important;
-  height: 100% !important;
-  display: flex;
-  align-items: stretch;
-  justify-content: stretch;
-  min-height: 100px;
-  min-width: 250px !important;
+  border-bottom: 1px solid #ebeff2 !important;
+  border-right: 1px solid #ebeff2 !important;
+
+  .plan-container {
+    background-color: #ffe1e1 !important;
+    width: 100% !important;
+    height: 100% !important;
+    display: flex;
+    align-items: stretch;
+    justify-content: stretch;
+    min-height: 100px;
+    min-width: 250px !important;
+  }
 }
 
+/**
+ * Icon Utility Classes
+ * 
+ * Positioning and styling for various icon types used in the application.
+ */
 .device-icon {
   position: relative !important;
   top: 5px !important;
-  color: #B3B9BF !important;
+  color: #b3b9bf !important;
 }
 
 .neutral-icon {
@@ -228,6 +305,11 @@ a {
   font-size: 20px !important;
 }
 
+/**
+ * Text Color Utility Classes
+ * 
+ * Quick color overrides for text elements.
+ */
 .black-text {
   color: black !important;
 }
@@ -241,93 +323,99 @@ a {
 }
 
 .red-text {
-  color: #DB0D0D !important;
+  color: #db0d0d !important;
 }
 
 .blue-text {
-  color: #0D96DB !important;
+  color: #0d96db !important;
 }
 
 .grey-text {
-  color: #B3B9BF !important;
+  color: #b3b9bf !important;
 }
 
+/**
+ * Progress Circle Component
+ * 
+ * Displays a circular progress indicator with optional avatar and warning icon.
+ * Uses CSS conic-gradient for the progress arc.
+ */
 .progress-circle {
   position: relative;
   width: 50px;
   height: 50px;
   border-radius: 50%;
   background: conic-gradient(
-      #319C4C 0%,
-      #319C4C calc(var(--percentage) * 1%),
-      lightgrey calc(var(--percentage) * 1%),
-      lightgrey 100%
+    #319c4c 0%,
+    #319c4c calc(var(--percentage) * 1%),
+    lightgrey calc(var(--percentage) * 1%),
+    lightgrey 100%
   );
-}
 
-.progress-circle .red-warning-avatar-icon {
-  //background-color: white;
-  color: #DB0D0D !important;
-  position: relative;
-  top: 30px;
-  left: 30px;
-  font-weight: 200 !important;
-  font-size: 17px !important;
-}
+  // Warning icon positioning
+  .red-warning-avatar-icon {
+    color: #db0d0d !important;
+    position: relative;
+    top: 30px;
+    left: 30px;
+    font-weight: 200 !important;
+    font-size: 17px !important;
+  }
 
-/* css */
-/* File: 'src/scss/styles.scss' */
-/* Keep current positioning in '.progress-circle .red-warning-avatar-icon' as-is */
+  // White circular background layer
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 4px;
+    border-radius: 50%;
+    background-color: #fff;
+  }
 
-/* Only adjust the icon box and background */
-mat-icon.red-warning-avatar-icon {
-  /* Default mat-icon box is 24x24; with font-size: 20px this yields ~2px margin */
-  width: 19px;   /* keep default */
-  height: 19px;  /* keep default */
+  // Avatar overlay
+  .avatar {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 35px;
+    height: 35px;
+    border-radius: 50%;
+    transform: translate(-50%, -50%);
+    background-size: cover;
+    background-position: center;
+  }
+}
 
+/**
+ * Warning Icon Styling
+ * 
+ * Special styling for the red warning icon used in avatar circles.
+ */
+mat-icon.red-warning-avatar-icon {
+  width: 19px;
+  height: 19px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-
-  background-color: #fff;   /* white circular background */
-  border-radius: 50%;       /* make it a circle */
-  padding: 0 !important;    /* no extra white ring */
-
-  color: #DB0D0D !important; /* keep the glyph red */
-  line-height: 1;            /* avoid extra vertical space */
-  box-sizing: border-box;
-}
-
-/* If the mat-icon inherits a color (e.g. red) you can keep the glyph colored while the circle is white */
-mat-icon.red-warning-avatar-icon {
-  color: #d32f2f; /* example icon color */
-}
-.progress-circle::before {
-  content: '';
-  position: absolute;
-  inset: 4px;
-  border-radius: 50%;
   background-color: #fff;
-}
-
-.progress-circle .avatar {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 35px;
-  height: 35px;
   border-radius: 50%;
-  transform: translate(-50%, -50%);
-  background-size: cover;
-  background-position: center;
+  padding: 0 !important;
+  color: #db0d0d !important;
+  line-height: 1;
+  box-sizing: border-box;
 }
 
+/**
+ * Planning and Layout Components
+ * 
+ * Utility classes for planning-related UI components.
+ */
 .progress-container {
   display: flex;
   align-items: center;
   padding-bottom: 4px;
   padding-top: 4px;
 }
+
 .plan-content {
   flex-grow: 1;
   padding: 5px;
@@ -345,20 +433,32 @@ mat-icon.red-warning-avatar-icon {
   flex: 1 0 0;
 }
 
+/**
+ * Toast Notification Positioning
+ */
 .toast-bottom-right {
   bottom: 0;
   right: 7px;
 }
 
+/**
+ * Spacing Utilities
+ */
 .pt-6 {
   padding-top: 1.5em;
 }
 
+/**
+ * Third-party Component Overrides
+ */
+
+// Timepicker z-index
 ngx-material-timepicker-container {
   z-index: 2000;
   position: relative;
 }
 
+// Overlay backdrop opacity
 .cdk-overlay-backdrop {
   background-color: rgba(0, 0, 0, 1) !important;
 }
diff --git a/eform-client/src/scss/utilities/_colors.scss b/eform-client/src/scss/utilities/_colors.scss
index 6949550b0a..3910f0faa9 100644
--- a/eform-client/src/scss/utilities/_colors.scss
+++ b/eform-client/src/scss/utilities/_colors.scss
@@ -1,9 +1,29 @@
-$eform-gray-light: #F1F1F1;
+/**
+ * Color Variables
+ * 
+ * Defines the core color palette used throughout the application.
+ * These colors provide semantic meaning and maintain consistency across components.
+ * 
+ * Color Categories:
+ * - Gray shades: For neutral UI elements
+ * - Red shades: For errors, warnings, and critical actions
+ * - Orange: For warnings and alerts
+ * - Green shades: For success states and positive actions
+ */
+
+// Gray color palette
+$eform-gray-light: #f1f1f1;
 $eform-gray: #263238;
 $eform-gray-dark: #000a12;
+
+// Red color palette
 $eform-red-dark: #7f0000;
-$eform-red-light: #f05545;
 $eform-red: #b71c1c;
+$eform-red-light: #f05545;
+
+// Warning/alert colors
 $eform-orange: #d9921e;
-$eform-green: #61BA5B;
-$eform-green-dark: #4B9F45;
+
+// Success/positive colors
+$eform-green: #61ba5b;
+$eform-green-dark: #4b9f45;
diff --git a/eform-client/src/scss/utilities/_index.scss b/eform-client/src/scss/utilities/_index.scss
index fa15ed1550..88727f76c4 100644
--- a/eform-client/src/scss/utilities/_index.scss
+++ b/eform-client/src/scss/utilities/_index.scss
@@ -1,5 +1,22 @@
+/**
+ * Utilities Index
+ * 
+ * Central entry point for all utility styles and variables.
+ * This file exports variables and includes utility mixins for use throughout the application.
+ * 
+ * Structure:
+ * - @forward: Exports variables and functions for use in other files
+ * - @use: Includes utility styles that generate CSS classes
+ * 
+ * Usage:
+ * @use 'utilities' as *; // Imports all forwarded items and utility classes
+ */
+
+// Export variables for use in components
 @forward "variables";
 @forward "colors";
+
+// Include utility class generators
 @use "flex";
 @use "grid";
 @use "spacing";