diff --git a/legacy/smartadmin/STYLE_GUIDE.md b/legacy/smartadmin/STYLE_GUIDE.md
new file mode 100644
index 0000000..7d6c1b1
--- /dev/null
+++ b/legacy/smartadmin/STYLE_GUIDE.md
@@ -0,0 +1,646 @@
+# SmartAdmin Bootstrap 5 — Style Guide
+
+**Version**: 5.5.0
+**Last Updated**: 2026-07-05
+**Status**: ✅ Complete
+
+---
+
+## 📖 Overview
+
+This document provides comprehensive guidelines for using SmartAdmin Bootstrap 5 components and utilities. All styles are organized in modular CSS files for better maintainability and performance.
+
+---
+
+## 🎨 Color System
+
+### Primary Palette
+
+| Color | Hex Value | Usage |
+|-------|-----------|-------|
+| **Primary** | `#2196f3` | Main actions, links, highlights |
+| **Secondary** | `#757575` | Neutral, less prominent elements |
+| **Success** | `#4caf50` | Positive actions, confirmations |
+| **Danger** | `#f44336` | Destructive actions, errors |
+| **Warning** | `#ff9800` | Caution, warnings |
+| **Info** | `#00bcd4` | Information, notifications |
+
+### Neutral Palette
+
+| Color | Hex Value | Usage |
+|-------|-----------|-------|
+| **Light** | `#f5f5f5` | Light backgrounds |
+| **Dark** | `#212121` | Dark backgrounds, text |
+| **White** | `#ffffff` | Main background |
+| **Transparent** | `rgba(0,0,0,0)` | No background |
+
+### Gray Scale
+
+```
+Gray 100: #f8f9fa (Lightest)
+Gray 200: #e9ecef
+Gray 300: #dee2e6
+Gray 400: #ced4da
+Gray 500: #adb5bd (Medium)
+Gray 600: #6c757d
+Gray 700: #495057
+Gray 800: #343a40
+Gray 900: #212529 (Darkest)
+```
+
+---
+
+## 🔘 Buttons
+
+### Variants
+
+**Primary Button**
+```html
+
+```
+
+**Success Button**
+```html
+
+```
+
+**Danger Button**
+```html
+
+```
+
+**Warning Button**
+```html
+
+```
+
+### Sizes
+
+```html
+
+
+
+
+```
+
+### States
+
+```html
+
+
+
+
+
+
+
+
+```
+
+### Button Groups
+
+```html
+
+
+
+
+
+```
+
+---
+
+## 📇 Cards
+
+### Basic Card
+
+```html
+
+
+
+
Title
+
Content goes here...
+
+
+
+
+
New
+
Card Title
+
Content here...
+
+
+
+
+```
+
+---
+
+## 🏷️ Badges
+
+### Variants
+
+```html
+Primary
+Success
+Danger
+Warning
+Info
+```
+
+### Pill Badges
+
+```html
+Primary
+Success
+```
+
+---
+
+## ⚠️ Alerts
+
+### Variants
+
+```html
+
+
+
+ Info: Informational message
+
+
+
+
+ Success! Operation completed
+
+
+
+
+ Warning! Please be careful
+
+
+
+
+ Error! Something went wrong
+
+```
+
+### Dismissible Alert
+
+```html
+
+ Info: Message goes here
+
+
+```
+
+---
+
+## 📝 Forms
+
+### Input Fields
+
+```html
+
+
+
+
+```
+
+### Input Sizes
+
+```html
+
+
+
+```
+
+### Select
+
+```html
+
+
+
+
+```
+
+### Textarea
+
+```html
+
+
+
+
+```
+
+### Checkboxes
+
+```html
+
+
+
+
+```
+
+### Radio Buttons
+
+```html
+
+
+
+
+```
+
+### Form Validation
+
+```html
+
+
+Looks good!
+
+
+
+Please correct this
+```
+
+### Input Groups
+
+```html
+
+ $
+
+
+
+
+
+
+
+```
+
+---
+
+## 📊 Tables
+
+### Basic Table
+
+```html
+
+
+
+ | ID |
+ Name |
+ Email |
+
+
+
+
+ | #001 |
+ John Doe |
+ john@example.com |
+
+
+
+```
+
+### Table Variants
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+```
+
+### Responsive Table
+
+```html
+
+```
+
+### Table Pagination
+
+```html
+
+```
+
+---
+
+## 🎭 Modals
+
+### Basic Modal
+
+```html
+
+
+
+
+
+ Modal content goes here...
+
+
+
+
+
...
+
+
+...
+
+
+...
+
+
+...
+```
+
+---
+
+## 🌈 Utilities
+
+### Spacing
+
+```html
+
+Margin 1
+Margin 2
+Margin 3
+
+
+Padding 1
+Padding 2
+Padding 3
+
+
+Margin Top
+Margin Bottom
+Margin Start
+Margin End
+```
+
+### Display
+
+```html
+Hidden
+Block
+Flex
+Grid
+
+
+Hidden on mobile, visible on tablet+
+Visible on mobile, hidden on tablet+
+```
+
+### Flexbox
+
+```html
+
+
Fill available space
+
Don't shrink
+
+
+ Centered vertically
+
+```
+
+### Text Utilities
+
+```html
+
+Left
+Center
+Right
+
+
+UPPERCASE
+lowercase
+Capitalize
+
+
+Bold
+Semi-bold
+Normal
+
+
+Primary text
+Success text
+Danger text
+Muted text
+```
+
+### Background Colors
+
+```html
+Primary Background
+Success Background
+Danger Background
+Warning Background
+Light Background
+```
+
+### Borders
+
+```html
+All borders
+Top border only
+No border
+Primary border
+
+
+Rounded corners
+Circle
+Pill shape
+```
+
+### Shadows
+
+```html
+Small shadow
+Large shadow
+No shadow
+```
+
+---
+
+## 🌙 Dark Mode
+
+SmartAdmin supports dark mode through the `data-bs-theme` attribute:
+
+```html
+
+
+
+
+
+```
+
+### Toggle Dark Mode with JavaScript
+
+```javascript
+const html = document.documentElement;
+const currentTheme = html.getAttribute('data-bs-theme');
+const newTheme = currentTheme === 'light' ? 'dark' : 'light';
+html.setAttribute('data-bs-theme', newTheme);
+
+// Save preference
+localStorage.setItem('theme', newTheme);
+```
+
+---
+
+## 📱 Responsive Breakpoints
+
+| Breakpoint | Viewport | Class Prefix |
+|------------|----------|--------------|
+| **Mobile** | < 576px | None |
+| **Tablet (sm)** | ≥ 576px | `-sm-` |
+| **Tablet (md)** | ≥ 768px | `-md-` |
+| **Desktop (lg)** | ≥ 992px | `-lg-` |
+| **Desktop (xl)** | ≥ 1200px | `-xl-` |
+| **Desktop (xxl)** | ≥ 1400px | `-xxl-` |
+
+### Examples
+
+```html
+
+...
+
+
+
+ Responsive column
+
+
+
+
+ Responsive padding
+
+```
+
+---
+
+## ✅ Best Practices
+
+1. **Use Semantic HTML**: Always use appropriate HTML elements
+2. **Accessibility First**: Include ARIA labels and keyboard navigation
+3. **Mobile First**: Design for mobile first, then enhance for larger screens
+4. **Consistent Spacing**: Use spacing scale (1, 2, 3, 4, 5) consistently
+5. **Color Contrast**: Ensure text has sufficient contrast (WCAG AA minimum)
+6. **Component Reuse**: Use existing components instead of creating new ones
+7. **Document Changes**: Update this guide when adding new components
+8. **Test on Real Devices**: Don't rely only on browser DevTools
+
+---
+
+## 📚 Component Library
+
+Visit **`components-showcase.html`** to see all components in action with interactive examples.
+
+### Quick Links
+
+- [Live Component Demo](./components-showcase.html)
+- [Bootstrap 5 Official Docs](https://getbootstrap.com/docs/5.0/)
+- [Icon Library (FontAwesome)](https://fontawesome.com/)
+
+---
+
+## 🔄 CSS File Structure
+
+```
+css/
+├── base.css (Foundation, resets, typography)
+├── components.css (Buttons, cards, badges, alerts)
+├── forms.css (Input fields, validation)
+├── tables.css (Table styles, responsive)
+├── layout.css (Header, sidebar, grid)
+├── darkmode.css (Dark theme overrides)
+├── responsive.css (Mobile-first media queries)
+├── utilities.css (Spacing, colors, helpers)
+└── smartapp.min.css (Legacy, for compatibility)
+```
+
+**Load Order (HTML ):**
+1. base.css
+2. components.css
+3. forms.css
+4. tables.css
+5. layout.css
+6. darkmode.css
+7. responsive.css
+8. utilities.css
+9. smartapp.min.css (fallback)
+
+---
+
+## 📞 Support
+
+For issues or questions:
+1. Check the component library first
+2. Review this style guide
+3. Check Bootstrap 5 official documentation
+4. Create an issue in the repository
+
+---
+
+**Last Updated:** 2026-07-05
+**Version:** 5.5.0
+**Status:** ✅ Complete & Ready for Use
diff --git a/legacy/smartadmin/components-showcase.html b/legacy/smartadmin/components-showcase.html
new file mode 100644
index 0000000..ac0d274
--- /dev/null
+++ b/legacy/smartadmin/components-showcase.html
@@ -0,0 +1,553 @@
+
+
+
+
+
+ Component Library | SmartAdmin Bootstrap 5
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 🎨 Color Palette
+
+ Primary Colors
+
+
+
+
+
Secondary
+
#757575
+
+
+
+
+
+
+
+
+
+ 🔘 Buttons
+
+ Button Variants
+
+
+
Primary
+
+
+
+
+
+
Success
+
+
+
+
+
+
Danger
+
+
+
+
+
+
Warning
+
+
+
+
+
Button Group
+
+
+
+
+
+
+
+
+
+
+ 📇 Cards
+
+
+
+
+
Card Title
+
This is a sample card body with some content.
+
+
+
+
+
+
Simple Card
+
Card without header or footer.
+
+
+
+
+
+
Card with Badge
+
+ Primary
+ Success
+ Danger
+
+
+
+
+
+
+
+ 🏷️ Badges
+
+
+
Badge Variants
+
Primary
+
Success
+
Danger
+
Warning
+
Info
+
+
+
Pill Badges
+
Primary
+
Success
+
Danger
+
+
+
+
+
+ ⚠️ Alerts
+
+
+
+ Info Alert: This is an informational message.
+
+
+
+ Success Alert: Operation completed successfully!
+
+
+
+ Warning Alert: Please be careful with this action.
+
+
+
+ Danger Alert: An error occurred, please try again.
+
+
+
+
+
+ 📝 Forms
+
+ Input Fields
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Checkboxes & Radio
+
+
+ Form Validation
+
+
+
+
+
+ 📊 Tables
+
+
+
+
+ | ID |
+ Name |
+ Email |
+ Status |
+
+
+
+
+ | #001 |
+ John Doe |
+ john@example.com |
+ Active |
+
+
+ | #002 |
+ Jane Smith |
+ jane@example.com |
+ Active |
+
+
+ | #003 |
+ Bob Johnson |
+ bob@example.com |
+ Inactive |
+
+
+
+
+
+
+
+ 📝 Typography
+
+ Headings
+
+
Heading 1
+ Heading 2
+ Heading 3
+ Heading 4
+ Heading 5
+ Heading 6
+
+
+ Text Styles
+
+
Bold Text: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+
Italic Text: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+
Underlined Text: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+
Deleted Text: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+
Small Text: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+
+
+
+
+ ⚙️ Utilities
+
+ Text Alignment
+
+
Left aligned text
+
Center aligned text
+
Right aligned text
+
Text Colors
+
+
Primary text
+
Success text
+
Danger text
+
Warning text
+
Muted text
+
Background Colors
+
+
Primary Background
+
Success Background
+
Danger Background
+
Warning Background
+
+
+