Updated-codebase with Authentication flow

2025-12-23 09:28:05 +05:30 · 2025-12-23 09:28:05 +05:30 · e0e08043f1
commit e0e08043f1
47 changed files with 8380 additions and 0 deletions
--- a/.env.example
+++ b/.env.example
@ -0,0 +1,2 @@
+# API Configuration
+VITE_API_BASE_URL=http://localhost:3000/api
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/README.md
+++ b/README.md
@ -0,0 +1,141 @@
+# AgenticIQ
+
+A modern React application built with TypeScript, Tailwind CSS, and shadcn/ui, following **AgenticIQ Enterprise Coding Guidelines & Best Practices Version 1.0** from Tech4Biz Solutions Pvt Ltd.
+
+## 🚀 Features
+
+- ⚡ **Vite** - Lightning-fast build tool
+- ⚛️ **React 18** with TypeScript
+- 🎨 **Tailwind CSS** - Utility-first CSS framework
+- 🧩 **shadcn/ui** - Beautiful, accessible component library
+- 📱 **Responsive Design** - Mobile-first with 7 breakpoints
+- 🔒 **Type Safety** - Strict TypeScript configuration
+- 📦 **Path Aliases** - Clean imports with `@/` prefix
+- 🎯 **Best Practices** - Following enterprise coding standards
+
+## 📋 Prerequisites
+
+- Node.js 18+ 
+- npm or yarn
+
+## 🛠️ Installation
+
+1. Clone the repository:
+```bash
+git clone <repository-url>
+cd AgenticIQ
+```
+
+2. Install dependencies:
+```bash
+npm install
+```
+
+3. Create environment file:
+```bash
+cp .env.example .env
+```
+
+4. Start development server:
+```bash
+npm run dev
+```
+
+## 📁 Project Structure
+
+Following AgenticIQ guidelines, the project is organized as:
+
+```
+src/
+├── components/        # Reusable UI components
+│   └── ui/           # shadcn/ui components
+├── pages/            # Route-level components
+├── hooks/            # Custom React hooks
+├── services/         # API calls and external services
+├── utils/            # Helper functions
+├── types/            # TypeScript type definitions
+├── constants/        # Application constants
+└── lib/              # Third-party library configurations
+```
+
+## 🎨 Responsive Breakpoints
+
+Following AgenticIQ responsive design guidelines:
+
+- **Mobile S** (`< 375px`): Extra small mobile devices
+- **Mobile M** (`375px - 424px`): Standard mobile devices
+- **Mobile L** (`425px - 767px`): Large mobile devices
+- **Tablet** (`768px - 1023px`): Tablet devices
+- **Laptop** (`1024px - 1439px`): Laptop screens
+- **Desktop** (`1440px - 1919px`): Desktop screens
+- **Large Display** (`≥ 1920px`): Large displays
+
+## 📝 Naming Conventions
+
+Following AgenticIQ standards:
+
+- **Components/Interfaces**: `PascalCase`
+- **Functions/Variables**: `camelCase`
+- **Constants**: `SCREAMING_SNAKE_CASE`
+- **CSS Classes/Files**: `kebab-case`
+- **Private Fields**: `_camelCase`
+
+## 🧪 Available Scripts
+
+- `npm run dev` - Start development server
+- `npm run build` - Build for production
+- `npm run preview` - Preview production build
+- `npm run lint` - Run ESLint
+
+## 📚 Adding shadcn/ui Components
+
+To add new shadcn/ui components:
+
+```bash
+npx shadcn@latest add button
+npx shadcn@latest add card
+npx shadcn@latest add input
+```
+
+## 🎯 Code Quality Standards
+
+This project follows:
+
+- **File Size**: < 250 lines per file
+- **Function Parameters**: Max 4 parameters
+- **Nesting Levels**: Max 3 levels
+- **Test Coverage**: Min 80% line coverage
+- **Documentation**: JSDoc for all public functions
+
+## 🔒 Security
+
+- Input validation on client and server
+- XSS prevention
+- CSRF protection
+- Secure authentication practices
+
+## 📖 Documentation
+
+All functions include JSDoc comments with:
+- `@description` - What the function does
+- `@param` - Parameter descriptions
+- `@returns` - Return value description
+- `@throws` - Possible errors
+- `@example` - Usage examples
+
+## 🤝 Contributing
+
+Follow the AgenticIQ Enterprise Coding Guidelines when contributing:
+
+1. Use conventional commits (`feat:`, `fix:`, `docs:`, etc.)
+2. Follow branching strategy (`feature/`, `bugfix/`, `hotfix/`)
+3. Maintain code quality standards
+4. Add tests for new features
+
+## 📄 License
+
+[Your License Here]
+
+## 🙏 Acknowledgments
+
+Built following **AgenticIQ Enterprise Coding Guidelines & Best Practices Version 1.0** by Tech4Biz Solutions Pvt Ltd.
--- a/css-custom-data.json
+++ b/css-custom-data.json
@ -0,0 +1,21 @@
+{
+    "version": 1.1,
+    "atDirectives": [
+        {
+            "name": "@tailwind",
+            "description": "Use the @tailwind directive to insert Tailwind's base, components, utilities and variants styles into your CSS."
+        },
+        {
+            "name": "@apply",
+            "description": "Use @apply to inline any existing utility classes into your own custom CSS."
+        },
+        {
+            "name": "@layer",
+            "description": "Use the @layer directive to tell Tailwind which \"bucket\" a set of custom styles belong to."
+        },
+        {
+            "name": "@config",
+            "description": "Use the @config directive to specify which config file Tailwind should use when compiling that CSS file."
+        }
+    ]
+}
--- a/eslint.config.js
+++ b/eslint.config.js
@ -0,0 +1,23 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  },
+])
--- a/index.html
+++ b/index.html
@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>AgenticIQ</title>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.tsx"></script>
+</body>
+
+</html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,50 @@
+{
+    "name": "agenticiq",
+    "private": true,
+    "version": "0.0.0",
+    "type": "module",
+    "scripts": {
+        "dev": "vite",
+        "build": "tsc -b && vite build",
+        "lint": "eslint .",
+        "preview": "vite preview",
+        "test": "vitest",
+        "test:coverage": "vitest --coverage"
+    },
+    "dependencies": {
+        "@hookform/resolvers": "^3.9.1",
+        "@tailwindcss/vite": "^4.1.18",
+        "@tanstack/react-query": "^5.62.0",
+        "class-variance-authority": "^0.7.1",
+        "clsx": "^2.1.1",
+        "lucide-react": "^0.562.0",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
+        "react-hook-form": "^7.54.0",
+        "tailwind-merge": "^3.4.0",
+        "tailwindcss": "^4.1.18",
+        "tailwindcss-animate": "^1.0.7",
+        "zod": "^3.24.0",
+        "zustand": "^5.0.2"
+    },
+    "devDependencies": {
+        "@eslint/js": "^9.39.1",
+        "@testing-library/jest-dom": "^6.6.3",
+        "@testing-library/react": "^16.1.0",
+        "@types/node": "^24.10.4",
+        "@types/react": "^18.3.12",
+        "@types/react-dom": "^18.3.1",
+        "@vitejs/plugin-react-swc": "^4.2.2",
+        "autoprefixer": "^10.4.23",
+        "eslint": "^9.39.1",
+        "eslint-plugin-react-hooks": "^5.1.0",
+        "eslint-plugin-react-refresh": "^0.4.24",
+        "globals": "^16.5.0",
+        "jsdom": "^25.0.1",
+        "postcss": "^8.5.6",
+        "typescript": "~5.9.3",
+        "typescript-eslint": "^8.46.4",
+        "vite": "^7.2.4",
+        "vitest": "^2.1.8"
+    }
+}
--- a/public/vite.svg
+++ b/public/vite.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
--- a/src/App.tsx
+++ b/src/App.tsx
@ -0,0 +1,17 @@
+/**
+ * Main App component
+ * @description Root application component that renders the main layout
+ */
+
+import SignInPage from './pages/sign-in-page';
+
+/**
+ * App component
+ * @description Application entry point that renders the dashboard
+ * @returns {JSX.Element} Root application element
+ */
+function App(): JSX.Element {
+    return <SignInPage />;
+}
+
+export default App;
--- a/src/assets/decorative/bottomGradient1.png
+++ b/src/assets/decorative/bottomGradient1.png
--- a/src/assets/decorative/bottomGradient2.png
+++ b/src/assets/decorative/bottomGradient2.png
--- a/src/assets/decorative/topleft1.png
+++ b/src/assets/decorative/topleft1.png
--- a/src/assets/decorative/toprigth2.png
+++ b/src/assets/decorative/toprigth2.png
--- a/src/assets/logo/AgenticIQLogo.svg
+++ b/src/assets/logo/AgenticIQLogo.svg
--- a/src/assets/react.svg
+++ b/src/assets/react.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
--- a/src/components/auth/auth-layout.tsx
+++ b/src/components/auth/auth-layout.tsx
@ -0,0 +1,89 @@
+import type { ReactNode } from 'react';
+
+import logoImage from '@/assets/logo/AgenticIQLogo.svg';
+import topLeftDecoration from '@/assets/decorative/topleft1.png';
+import topRightDecoration from '@/assets/decorative/toprigth2.png';
+import bottomGradient1 from '@/assets/decorative/bottomGradient1.png';
+import bottomGradient2 from '@/assets/decorative/bottomGradient2.png';
+
+type AuthLayoutProps = {
+    children: ReactNode;
+};
+
+/**
+ * @description Main authentication layout wrapper with branded hero and decorative backgrounds
+ * Uses strict z-index layering with constrained, subtle background decorations
+ * Layer 0: Background images (z-0, pointer-events-none, low opacity, size-constrained)
+ * Layer 1: Content grid (z-10, relative)
+ * @returns {JSX.Element} Full-page layout with left hero and right content slot
+ */
+function AuthLayout({ children }: AuthLayoutProps): JSX.Element {
+    return (
+        <div className="relative w-full h-screen overflow-hidden bg-slate-50">
+            {/* ========== BACKGROUND LAYER (Z-0) ========== */}
+            
+            {/* Top Left Decoration */}
+            <img
+                src={topLeftDecoration}
+                alt=""
+                aria-hidden="true"
+                className="absolute top-0 left-0 z-0 w-[250px] opacity-50 pointer-events-none select-none"
+            />
+            
+            {/* Top Right Decoration */}
+            <img
+                src={topRightDecoration}
+                alt=""
+                aria-hidden="true"
+                className="absolute top-0 right-0 z-0 w-[320px] opacity-50 pointer-events-none select-none"
+            />
+            
+            {/* Bottom Wave 1 - Main wave (constrained size) */}
+            <img
+                src={bottomGradient1}
+                alt=""
+                aria-hidden="true"
+                className="absolute bottom-0 left-0 z-0 w-[40vw] max-w-[600px] opacity-20 pointer-events-none select-none"
+            />
+            
+            {/* Bottom Wave 2 - Secondary wave (smaller, offset for layered effect) */}
+            <img
+                src={bottomGradient2}
+                alt=""
+                aria-hidden="true"
+                className="absolute bottom-0 left-0 z-0 w-[35vw] max-w-[500px] opacity-20 translate-x-4 translate-y-4 pointer-events-none select-none"
+            />
+
+            {/* ========== CONTENT LAYER (Z-10) ========== */}
+            <div className="relative z-10 flex w-full h-full">
+                {/* Left Content Column */}
+                <div className="hidden lg:flex lg:w-1/2 flex-col">
+                    {/* Logo at top-left with padding */}
+                    <div className="p-12">
+                        <img src={logoImage} alt="AgenticIQ logo" className="w-48" />
+                    </div>
+                    
+                    {/* Hero Text - Centered vertically */}
+                    <div className="flex-1 flex items-center px-12 xl:px-16">
+                        <div className="max-w-lg">
+                            <h1 className="text-4xl lg:text-5xl font-bold leading-tight text-gray-900">
+                                Engineering the Future with Intelligent Agents
+                            </h1>
+                            <p className="mt-6 text-lg text-gray-600 leading-relaxed">
+                                Deploy intelligent agents that automate complex workflows, enhance decision-making, and scale
+                                your operations. Built for enterprise reliability with seamless integration capabilities.
+                            </p>
+                        </div>
+                    </div>
+                </div>
+
+                {/* Right Content Column - Card Slot */}
+                <div className="w-full lg:w-1/2 flex items-center justify-center px-6 py-12">
+                    {children}
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export default AuthLayout;
--- a/src/components/auth/login-card.tsx
+++ b/src/components/auth/login-card.tsx
@ -0,0 +1,126 @@
+import { useState } from 'react';
+import { Eye, EyeOff } from 'lucide-react';
+
+const inputClasses = [
+    'h-12 w-full rounded-lg',
+    'bg-white/10 border border-white/20',
+    'px-4 text-white placeholder:text-white/70',
+    'outline-none transition-all duration-200',
+    'focus:border-white/50 focus:ring-2 focus:ring-white/30',
+].join(' ');
+
+/**
+ * @description Login card with Figma-matched gradient, glassmorphism inputs, and social sign-in
+ * Gradient: from-[#00B4DB] (rich cyan) to-[#003399] (deep royal blue)
+ * @returns {JSX.Element} Login card component
+ */
+function LoginCard(): JSX.Element {
+    const [showPassword, setShowPassword] = useState(false);
+
+    return (
+        <div className="w-full max-w-[90%] sm:max-w-[420px] rounded-[30px] bg-gradient-to-b from-[#00B4DB] to-[#003399] p-10 shadow-2xl">
+            <header className="text-center">
+                <h2 className="text-2xl sm:text-3xl font-semibold text-white">Sign In to Your Account</h2>
+                <p className="mt-2 text-sm text-white/80">
+                    Welcome back. Please enter<br />your credentials.
+                </p>
+            </header>
+
+            <form className="mt-8 space-y-5">
+                {/* Email Field */}
+                <div className="space-y-2">
+                    <label className="text-sm font-medium text-white" htmlFor="email">
+                        Email<span className="text-cyan-300">*</span>
+                    </label>
+                    <input
+                        id="email"
+                        aria-label="Email"
+                        type="email"
+                        placeholder="Enter your email address"
+                        className={inputClasses}
+                    />
+                </div>
+
+                {/* Password Field */}
+                <div className="space-y-2">
+                    <label className="text-sm font-medium text-white" htmlFor="password">
+                        Password<span className="text-cyan-300">*</span>
+                    </label>
+                    <div className="relative">
+                        <input
+                            id="password"
+                            aria-label="Password"
+                            type={showPassword ? 'text' : 'password'}
+                            placeholder="Enter your password"
+                            className={`${inputClasses} pr-12`}
+                        />
+                        <button
+                            type="button"
+                            onClick={() => setShowPassword((prev) => !prev)}
+                            className="absolute inset-y-0 right-3 flex items-center text-white/70 hover:text-white transition-colors"
+                            aria-label={showPassword ? 'Hide password' : 'Show password'}
+                        >
+                            {showPassword ? <EyeOff size={20} /> : <Eye size={20} />}
+                        </button>
+                    </div>
+                    <div className="text-right">
+                        <a
+                            className="text-sm text-white hover:underline transition-colors"
+                            href="#"
+                        >
+                            Forgot your password?
+                        </a>
+                    </div>
+                </div>
+
+                {/* Sign In Button */}
+                <button
+                    type="button"
+                    onClick={() => console.log('Sign In clicked')}
+                    className="h-12 w-full rounded-lg bg-[#00E5FF] text-base font-semibold text-[#0F172A] transition-all duration-300 hover:bg-[#00D4ED] active:scale-[0.98]"
+                >
+                    Sign In
+                </button>
+
+                {/* Social Sign In Buttons */}
+                <div className="flex gap-3">
+                    <button
+                        type="button"
+                        onClick={() => console.log('Google sign in clicked')}
+                        className="flex h-11 flex-1 items-center justify-center gap-2 rounded-lg bg-white text-sm font-medium text-[#374151] transition-all duration-200 hover:bg-gray-100"
+                    >
+                        <svg viewBox="0 0 48 48" className="h-5 w-5" aria-hidden="true">
+                            <path fill="#EA4335" d="M24 9.5c3.05 0 5.8 1.05 7.95 3.1l5.9-5.9C33.45 2.6 29.05.5 24 .5 14.95.5 7 6.8 4.05 15.05l6.95 5.4C12.8 14.7 17.9 9.5 24 9.5z" />
+                            <path fill="#34A853" d="M46.5 24.5c0-1.55-.15-3.05-.45-4.5H24v9h12.7c-.55 2.95-2.2 5.45-4.7 7.15l7.3 5.65C43.55 38.65 46.5 32.15 46.5 24.5z" />
+                            <path fill="#FBBC05" d="M10.95 28.85a14.52 14.52 0 0 1-.8-4.35c0-1.5.3-2.95.8-4.35l-6.95-5.4C1.35 17.9.5 21.1.5 24.5s.85 6.6 2.7 9.75l7.75-5.4z" />
+                            <path fill="#4285F4" d="M24 47.5c5.05 0 9.35-1.65 12.45-4.5l-7.3-5.65c-2.05 1.35-4.7 2.15-7.15 2.15-6.1 0-11.2-5.2-12.1-11.95l-7.95 6.1C7 41.2 14.95 47.5 24 47.5z" />
+                        </svg>
+                        Sign in with Google
+                    </button>
+                    <button
+                        type="button"
+                        onClick={() => console.log('Azure sign in clicked')}
+                        className="flex h-11 flex-1 items-center justify-center gap-2 rounded-lg bg-white text-sm font-medium text-[#374151] transition-all duration-200 hover:bg-gray-100"
+                    >
+                        <span className="flex h-5 w-5 items-center justify-center rounded-sm bg-[#0078D4]" aria-hidden="true">
+                            <svg viewBox="0 0 21 21" className="h-3 w-3" fill="white">
+                                <path d="M0 10.5L7.5 0h6L0 10.5zm7.5 0L0 21h6l7.5-10.5H7.5zM15 10.5L7.5 21h6L21 10.5 13.5 0h-6l7.5 10.5z" />
+                            </svg>
+                        </span>
+                        Sign in with Azure
+                    </button>
+                </div>
+
+                {/* Register Link */}
+                <p className="text-center text-sm text-white/90">
+                    Don't have an account?{' '}
+                    <a className="font-medium text-white hover:underline" href="#">
+                        Register here
+                    </a>
+                </p>
+            </form>
+        </div>
+    );
+}
+
+export default LoginCard;
--- a/src/components/dashboard/agent-card.tsx
+++ b/src/components/dashboard/agent-card.tsx
@ -0,0 +1,49 @@
+/**
+ * Agent Card Component
+ * @description Displays agent information with tags and description
+ */
+
+/**
+ * Agent card component props interface
+ * @description Props for the AgentCard component
+ */
+export interface IAgentCardProps {
+    title: string;
+    tags: string[];
+    description: string;
+}
+
+/**
+ * AgentCard component
+ * @description Card showing agent details with tags and hover effects
+ * @param {IAgentCardProps} props - Component props
+ * @param {string} props.title - Agent title
+ * @param {string[]} props.tags - Array of tag labels
+ * @param {string} props.description - Agent description text
+ * @returns {JSX.Element} AgentCard element
+ */
+export function AgentCard({ title, tags, description }: IAgentCardProps): JSX.Element {
+    return (
+        <div className="bg-white rounded-xl p-6 shadow-sm border border-gray-100 card-hover">
+            <h3 className="text-lg font-semibold text-gray-900 mb-3">
+                {title}
+            </h3>
+
+            <div className="flex flex-wrap gap-2 mb-4">
+                {tags.map((tag, index) => (
+                    <span
+                        key={index}
+                        className="px-3 py-1 text-xs font-medium rounded-full bg-gray-100 
+                                   text-gray-700 border border-gray-200"
+                    >
+                        {tag}
+                    </span>
+                ))}
+            </div>
+
+            <p className="text-sm text-gray-600 leading-relaxed">
+                {description}
+            </p>
+        </div>
+    );
+}
--- a/src/components/dashboard/dashboard-header.tsx
+++ b/src/components/dashboard/dashboard-header.tsx
@ -0,0 +1,90 @@
+/**
+ * Dashboard Header Component
+ * @description Top header with search, notifications, and user actions
+ */
+
+import { Search, Bell, Moon, User } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { useUIStore } from '@/stores';
+
+/**
+ * DashboardHeader component
+ * @description Renders the top navigation header with search and user controls
+ * @returns {JSX.Element} Header element
+ */
+export function DashboardHeader(): JSX.Element {
+    const { toggleDarkMode } = useUIStore();
+
+    return (
+        <header className="bg-transparent sticky top-0 z-40">
+            <div className="px-4 sm:px-6 md:px-8 py-3 sm:py-4 flex items-center justify-between gap-4">
+                {/* Spacer for layout balance */}
+                <div className="flex-1 hidden lg:block" />
+
+                <div className="flex items-center gap-2 sm:gap-4 w-full lg:w-auto justify-end">
+                    {/* Search - Hidden on mobile, shown on larger screens */}
+                    <div className="relative hidden sm:block">
+                        <Search 
+                            className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" 
+                        />
+                        <input
+                            type="text"
+                            placeholder="Search"
+                            className="pl-10 pr-4 py-2 bg-gray-100 rounded-lg text-sm 
+                                       focus:outline-none focus:ring-2 focus:ring-blue-500 
+                                       w-48 md:w-64 min-h-[44px]"
+                            aria-label="Search"
+                        />
+                    </div>
+
+                    {/* Mobile Search Button */}
+                    <button 
+                        className="p-2 hover:bg-gray-100 rounded-lg transition-colors 
+                                   sm:hidden min-h-[44px] min-w-[44px] flex items-center justify-center"
+                        aria-label="Open search"
+                    >
+                        <Search className="w-5 h-5 text-gray-600" />
+                    </button>
+
+                    {/* Notification Bell */}
+                    <button 
+                        className="p-2 hover:bg-gray-100 rounded-lg transition-colors 
+                                   min-h-[44px] min-w-[44px] flex items-center justify-center"
+                        aria-label="View notifications"
+                    >
+                        <Bell className="w-5 h-5 text-gray-600" />
+                    </button>
+
+                    {/* Dark Mode Toggle */}
+                    <button 
+                        onClick={toggleDarkMode}
+                        className="p-2 hover:bg-gray-100 rounded-lg transition-colors 
+                                   min-h-[44px] min-w-[44px] flex items-center justify-center"
+                        aria-label="Toggle dark mode"
+                    >
+                        <Moon className="w-5 h-5 text-gray-600" />
+                    </button>
+
+                    {/* User Avatar */}
+                    <button 
+                        className="w-8 h-8 sm:w-10 sm:h-10 bg-gray-300 rounded-full 
+                                   flex items-center justify-center min-h-[44px] min-w-[44px]"
+                        aria-label="User menu"
+                    >
+                        <User className="w-5 h-5 text-gray-600" />
+                    </button>
+
+                    {/* Create Agent Button */}
+                    <Button 
+                        className="bg-blue-600 hover:bg-blue-700 text-white px-4 sm:px-6 py-2 
+                                   rounded-lg font-medium text-sm sm:text-base min-h-[44px]"
+                    >
+                        <span className="hidden sm:inline">+ Create Agent</span>
+                        <span className="sm:hidden">+ New</span>
+                    </Button>
+                </div>
+            </div>
+        </header>
+    );
+}
+
--- a/src/components/dashboard/index.ts
+++ b/src/components/dashboard/index.ts
@ -0,0 +1,9 @@
+/**
+ * Dashboard components barrel export
+ * @description Centralized exports for dashboard components
+ */
+
+export { Sidebar } from './sidebar';
+export { MetricCard } from './metric-card';
+export { AgentCard } from './agent-card';
+export { DashboardHeader } from './dashboard-header';
--- a/src/components/dashboard/metric-card.tsx
+++ b/src/components/dashboard/metric-card.tsx
@ -0,0 +1,53 @@
+/**
+ * Metric Card Component
+ * @description Displays metric information with gradient background
+ */
+
+/**
+ * Metric card component props interface
+ * @description Props for the MetricCard component
+ */
+export interface IMetricCardProps {
+    title: string;
+    subtitle: string;
+    value: string;
+    gradient: 'teal' | 'purple' | 'orange' | 'blue';
+}
+
+/**
+ * MetricCard component
+ * @description Card showing metric with gradient background and hover effects
+ * @param {IMetricCardProps} props - Component props
+ * @param {string} props.title - Metric title
+ * @param {string} props.subtitle - Metric subtitle
+ * @param {string} props.value - Metric display value
+ * @param {string} props.gradient - Gradient color theme
+ * @returns {JSX.Element} MetricCard element
+ */
+export function MetricCard({ 
+    title, 
+    subtitle, 
+    value, 
+    gradient 
+}: IMetricCardProps): JSX.Element {
+    const gradientClass = `gradient-${gradient}`;
+
+    return (
+        <div 
+            className={`${gradientClass} rounded-2xl p-6 text-white card-hover cursor-pointer
+                        min-h-[140px] sm:min-h-[160px]`}
+        >
+            <div className="flex flex-col h-full">
+                <div className="text-xs sm:text-sm font-medium opacity-90 mb-1">
+                    {title}
+                </div>
+                <div className="text-xs opacity-80 mb-4">
+                    {subtitle}
+                </div>
+                <div className="text-3xl sm:text-4xl font-bold mt-auto">
+                    {value}
+                </div>
+            </div>
+        </div>
+    );
+}
--- a/src/components/dashboard/sidebar.tsx
+++ b/src/components/dashboard/sidebar.tsx
@ -0,0 +1,96 @@
+/**
+ * Dashboard Sidebar Component
+ * @description Vertical navigation sidebar with icons and responsive behavior
+ */
+
+import { 
+    Home, 
+    Brain, 
+    LayoutGrid, 
+    Lightbulb, 
+    Share2, 
+    ShoppingBag, 
+    Wrench, 
+    Share, 
+    Settings2, 
+    RotateCcw, 
+    Settings 
+} from 'lucide-react';
+
+/**
+ * Navigation item interface
+ * @description Defines structure for sidebar navigation items
+ */
+interface INavigationItem {
+    icon: React.ElementType;
+    label: string;
+    isActive?: boolean;
+}
+
+/**
+ * Top navigation items
+ */
+const TOP_NAV_ITEMS: INavigationItem[] = [
+    { icon: Home, label: 'Home', isActive: true },
+    { icon: Brain, label: 'AI Agents' },
+    { icon: LayoutGrid, label: 'Dashboard' },
+    { icon: Lightbulb, label: 'Ideas' },
+    { icon: Share2, label: 'Flows' },
+    { icon: ShoppingBag, label: 'Store' },
+    { icon: Wrench, label: 'Tools' },
+    { icon: Share, label: 'Share' },
+    { icon: Settings2, label: 'Settings' },
+    { icon: RotateCcw, label: 'History' },
+];
+
+/**
+ * Sidebar component
+ * @description Left sidebar navigation with icon menu and responsive design
+ * @returns {JSX.Element} Sidebar element
+ */
+export function Sidebar(): JSX.Element {
+    return (
+        <aside 
+            className="fixed left-2 sm:left-6 top-4 sm:top-24 bottom-4 sm:bottom-6 
+                       w-12 sm:w-16 bg-gradient-to-b from-[#00A1A0] to-[#00166D] 
+                       flex flex-col items-center py-4 sm:py-6 gap-4 sm:gap-6 z-50 
+                       rounded-xl sm:rounded-2xl shadow-xl"
+        >
+            {/* Navigation Icons */}
+            <nav className="flex flex-col items-center gap-3 sm:gap-5 flex-1 w-full">
+                {TOP_NAV_ITEMS.map((item, index) => {
+                    const Icon = item.icon;
+                    
+                    return (
+                        <button
+                            key={index}
+                            className={`min-h-[44px] min-w-[44px] w-8 h-8 sm:w-10 sm:h-10 
+                                        rounded-lg sm:rounded-xl flex items-center justify-center 
+                                        transition-all duration-200 ${
+                                item.isActive
+                                    ? 'bg-white/20 text-white shadow-inner'
+                                    : 'text-white/70 hover:bg-white/10 hover:text-white'
+                            }`}
+                            aria-label={item.label}
+                        >
+                            <Icon className="w-4 h-4 sm:w-5 sm:h-5" />
+                        </button>
+                    );
+                })}
+            </nav>
+
+            {/* Bottom Settings Icon */}
+            <div className="flex flex-col gap-4 mt-auto">
+                <button 
+                    className="min-h-[44px] min-w-[44px] w-8 h-8 sm:w-10 sm:h-10 
+                               rounded-lg sm:rounded-xl flex items-center justify-center 
+                               text-white/70 hover:bg-white/10 hover:text-white 
+                               transition-all duration-200"
+                    aria-label="Settings"
+                >
+                    <Settings className="w-4 h-4 sm:w-5 sm:h-5" />
+                </button>
+            </div>
+        </aside>
+    );
+}
--- a/src/components/sign-in/sign-in-card.tsx
+++ b/src/components/sign-in/sign-in-card.tsx
@ -0,0 +1,132 @@
+import { useState } from 'react';
+import { Eye, EyeOff } from 'lucide-react';
+
+const inputClasses = [
+    'h-12 w-full rounded-lg',
+    'border border-white/30 bg-white/15',
+    'px-4 py-3 text-white placeholder:text-white/50',
+    'outline-none transition-all duration-200',
+    'focus:border-white/50 focus:ring-2 focus:ring-white/40',
+    'focus:ring-offset-2 focus:ring-offset-transparent',
+    'focus-visible:ring-2 focus-visible:ring-white/40',
+    'focus-visible:ring-offset-2 focus-visible:ring-offset-transparent',
+].join(' ');
+
+function PasswordField(): JSX.Element {
+    const [showPassword, setShowPassword] = useState(false);
+
+    return (
+        <div className="space-y-2">
+            <label className="text-sm font-medium text-white" htmlFor="password">
+                Password
+            </label>
+            <div className="relative">
+                <input
+                    id="password"
+                    aria-label="Password"
+                    type={showPassword ? 'text' : 'password'}
+                    placeholder="Enter your password"
+                    className={`${inputClasses} pr-12`}
+                />
+                <button
+                    type="button"
+                    onClick={() => setShowPassword((prev) => !prev)}
+                    className="absolute inset-y-0 right-3 flex items-center text-white/70"
+                    aria-label={showPassword ? 'Hide password' : 'Show password'}
+                >
+                    {showPassword ? <EyeOff size={20} /> : <Eye size={20} />}
+                </button>
+            </div>
+            <div className="text-right">
+                <a
+                    className="text-sm text-white transition-colors duration-200 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/50 focus-visible:ring-offset-2 focus-visible:ring-offset-transparent focus-visible:underline"
+                    href="#"
+                >
+                    Forgot your password?
+                </a>
+            </div>
+        </div>
+    );
+}
+
+function SocialButtons(): JSX.Element {
+    return (
+        <div className="flex gap-3">
+            <button
+                type="button"
+                onClick={() => console.log('Google sign in clicked')}
+                className="flex h-12 flex-1 items-center justify-center gap-2 rounded-lg bg-white text-sm font-medium text-[#374151] transition-all duration-300 hover:scale-[1.02] hover:bg-[#F3F4F6] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/40 focus-visible:ring-offset-2 focus-visible:ring-offset-transparent"
+            >
+                <span aria-hidden="true" className="h-5 w-5 rounded-full bg-white">
+                    <svg viewBox="0 0 48 48" className="h-5 w-5">
+                        <path fill="#EA4335" d="M24 9.5c3.05 0 5.8 1.05 7.95 3.1l5.9-5.9C33.45 2.6 29.05.5 24 .5 14.95.5 7 6.8 4.05 15.05l6.95 5.4C12.8 14.7 17.9 9.5 24 9.5z" />
+                        <path fill="#34A853" d="M46.5 24.5c0-1.55-.15-3.05-.45-4.5H24v9h12.7c-.55 2.95-2.2 5.45-4.7 7.15l7.3 5.65C43.55 38.65 46.5 32.15 46.5 24.5z" />
+                        <path fill="#FBBC05" d="M10.95 28.85a14.52 14.52 0 0 1-.8-4.35c0-1.5.3-2.95.8-4.35l-6.95-5.4C1.35 17.9.5 21.1.5 24.5s.85 6.6 2.7 9.75l7.75-5.4z" />
+                        <path fill="#4285F4" d="M24 47.5c5.05 0 9.35-1.65 12.45-4.5l-7.3-5.65c-2.05 1.35-4.7 2.15-7.15 2.15-6.1 0-11.2-5.2-12.1-11.95l-7.95 6.1C7 41.2 14.95 47.5 24 47.5z" />
+                        <path fill="none" d="M0 0h48v48H0z" />
+                    </svg>
+                </span>
+                Sign in with Google
+            </button>
+            <button
+                type="button"
+                onClick={() => console.log('Azure sign in clicked')}
+                className="flex h-12 flex-1 items-center justify-center gap-2 rounded-lg bg-white text-sm font-medium text-[#374151] transition-all duration-300 hover:scale-[1.02] hover:bg-[#F3F4F6] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/40 focus-visible:ring-offset-2 focus-visible:ring-offset-transparent"
+            >
+                <span aria-hidden="true" className="h-5 w-5 rounded-sm bg-[#0078D4]" />
+                Sign in with Azure
+            </button>
+        </div>
+    );
+}
+
+function SignInCard(): JSX.Element {
+    return (
+        <div className="w-full max-w-[90%] sm:max-w-[480px] rounded-3xl bg-gradient-to-b from-[#17C1B7] to-[#0A2B5C] p-8 sm:p-12 lg:p-16 shadow-2xl">
+            <header className="text-center">
+                <h2 className="text-2xl sm:text-3xl font-semibold text-white">Sign In to Your Account</h2>
+                <p className="mt-2 text-sm text-white/80">Welcome back. Please enter your credentials.</p>
+            </header>
+
+            <form className="mt-8 space-y-5">
+                <div className="space-y-2">
+                    <label className="text-sm font-medium text-white" htmlFor="email">
+                        Email
+                    </label>
+                    <input
+                        id="email"
+                        aria-label="Email"
+                        type="email"
+                        placeholder="Enter your email address"
+                        className={inputClasses}
+                    />
+                </div>
+
+                <PasswordField />
+
+                <button
+                    type="button"
+                    onClick={() => console.log('Sign In clicked')}
+                    className="h-[52px] w-full rounded-lg bg-[#00D9C8] text-base font-semibold text-[#1E293B] transition-all duration-300 hover:scale-[1.02] hover:bg-[#00C0B0] active:scale-95 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/50 focus-visible:ring-offset-2 focus-visible:ring-offset-transparent"
+                >
+                    Sign In
+                </button>
+
+                <SocialButtons />
+
+                <p className="text-center text-sm text-white/90">
+                    Don't have an account?{' '}
+                    <a
+                        className="font-medium text-white transition-colors duration-200 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/50 focus-visible:ring-offset-2 focus-visible:ring-offset-transparent"
+                        href="#"
+                    >
+                        Register here
+                    </a>
+                </p>
+            </form>
+        </div>
+    );
+}
+
+export default SignInCard;
+
--- a/src/components/ui/.gitkeep.ts
+++ b/src/components/ui/.gitkeep.ts
@ -0,0 +1,3 @@
+// Placeholder for components/ui directory
+// shadcn/ui components will be added here
+export { }
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@ -0,0 +1,108 @@
+/**
+ * Button component
+ * @description Reusable button component with variants following shadcn/ui patterns
+ */
+
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+    `inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md 
+     text-sm font-medium transition-all duration-200 focus-visible:outline-none 
+     focus-visible:ring-2 focus-visible:ring-slate-900 focus-visible:ring-offset-2
+     disabled:pointer-events-none disabled:opacity-50
+     [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0`,
+    {
+        variants: {
+            variant: {
+                default: "bg-slate-900 text-white shadow hover:bg-slate-800",
+                destructive:
+                    "bg-red-600 text-white shadow-sm hover:bg-red-700",
+                outline:
+                    "border border-slate-300 bg-white text-slate-700 shadow-sm hover:bg-slate-50",
+                secondary:
+                    "bg-slate-100 text-slate-900 shadow-sm hover:bg-slate-200",
+                ghost: "text-slate-900 hover:bg-slate-100",
+                link: "text-slate-900 underline-offset-4 hover:underline",
+            },
+            size: {
+                default: "h-9 px-4 py-2",
+                sm: "h-8 rounded-md px-3 text-xs",
+                lg: "h-10 rounded-md px-8",
+                icon: "h-9 w-9",
+            },
+        },
+        defaultVariants: {
+            variant: "default",
+            size: "default",
+        },
+    }
+);
+
+/**
+ * Button component props interface
+ * @description Props for the Button component extending HTML button attributes
+ */
+export interface IButtonProps
+    extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+        VariantProps<typeof buttonVariants> {
+    isLoading?: boolean;
+}
+
+/**
+ * Button component with multiple variants
+ * @description Accessible button component with size and variant options
+ * @param {IButtonProps} props - Component props
+ * @param {string} props.variant - Visual style variant
+ * @param {string} props.size - Button size
+ * @param {string} props.className - Additional CSS classes
+ * @param {boolean} props.isLoading - Loading state indicator
+ * @param {React.ReactNode} props.children - Button content
+ * @returns {JSX.Element} Button element
+ * @example
+ * <Button variant="default" size="lg">Click me</Button>
+ */
+const Button = React.forwardRef<HTMLButtonElement, IButtonProps>(
+    ({ className, variant, size, isLoading, children, disabled, ...props }, ref) => {
+        return (
+            <button
+                className={cn(buttonVariants({ variant, size, className }))}
+                ref={ref}
+                disabled={disabled || isLoading}
+                {...props}
+            >
+                {isLoading ? (
+                    <span className="flex items-center gap-2">
+                        <svg
+                            className="animate-spin h-4 w-4"
+                            xmlns="http://www.w3.org/2000/svg"
+                            fill="none"
+                            viewBox="0 0 24 24"
+                        >
+                            <circle
+                                className="opacity-25"
+                                cx="12"
+                                cy="12"
+                                r="10"
+                                stroke="currentColor"
+                                strokeWidth="4"
+                            />
+                            <path
+                                className="opacity-75"
+                                fill="currentColor"
+                                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+                            />
+                        </svg>
+                        Loading...
+                    </span>
+                ) : (
+                    children
+                )}
+            </button>
+        );
+    }
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };
--- a/src/constants/api.ts
+++ b/src/constants/api.ts
@ -0,0 +1,35 @@
+/**
+ * API configuration constants
+ * @description Central location for API-related configuration
+ */
+
+export const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || 'http://localhost:3000/api'
+
+export const API_TIMEOUT = 30000 // 30 seconds
+
+export const API_ENDPOINTS = {
+    AUTH: {
+        LOGIN: '/auth/login',
+        LOGOUT: '/auth/logout',
+        REGISTER: '/auth/register',
+        REFRESH: '/auth/refresh',
+    },
+    USERS: {
+        LIST: '/users',
+        DETAIL: (id: string) => `/users/${id}`,
+        CREATE: '/users',
+        UPDATE: (id: string) => `/users/${id}`,
+        DELETE: (id: string) => `/users/${id}`,
+    },
+} as const
+
+export const HTTP_STATUS = {
+    OK: 200,
+    CREATED: 201,
+    NO_CONTENT: 204,
+    BAD_REQUEST: 400,
+    UNAUTHORIZED: 401,
+    FORBIDDEN: 403,
+    NOT_FOUND: 404,
+    INTERNAL_SERVER_ERROR: 500,
+} as const
--- a/src/hooks/index.ts
+++ b/src/hooks/index.ts
@ -0,0 +1,58 @@
+/**
+ * Custom React hooks
+ * @description Reusable hooks following AgenticIQ best practices
+ */
+
+import { useState, useEffect } from 'react'
+
+/**
+ * Hook for managing media queries
+ * @description Tracks whether a media query matches
+ * @param query - Media query string
+ * @returns Boolean indicating if query matches
+ * @example
+ * const isMobile = useMediaQuery('(max-width: 768px)')
+ */
+export function useMediaQuery(query: string): boolean {
+    const [matches, setMatches] = useState(false)
+
+    useEffect(() => {
+        const media = window.matchMedia(query)
+
+        if (media.matches !== matches) {
+            setMatches(media.matches)
+        }
+
+        const listener = () => setMatches(media.matches)
+        media.addEventListener('change', listener)
+
+        return () => media.removeEventListener('change', listener)
+    }, [matches, query])
+
+    return matches
+}
+
+/**
+ * Hook for debouncing values
+ * @description Delays updating a value until after a specified delay
+ * @param value - Value to debounce
+ * @param delay - Delay in milliseconds
+ * @returns Debounced value
+ * @example
+ * const debouncedSearch = useDebounce(searchTerm, 500)
+ */
+export function useDebounce<T>(value: T, delay: number): T {
+    const [debouncedValue, setDebouncedValue] = useState<T>(value)
+
+    useEffect(() => {
+        const handler = setTimeout(() => {
+            setDebouncedValue(value)
+        }, delay)
+
+        return () => {
+            clearTimeout(handler)
+        }
+    }, [value, delay])
+
+    return debouncedValue
+}
--- a/src/index.css
+++ b/src/index.css
@ -0,0 +1,215 @@
+@import "tailwindcss";
+
+@layer base {
+    :root {
+        /* Color System */
+        --background: 0 0% 100%;
+        --foreground: 222.2 84% 4.9%;
+        --card: 0 0% 100%;
+        --card-foreground: 222.2 84% 4.9%;
+        --popover: 0 0% 100%;
+        --popover-foreground: 222.2 84% 4.9%;
+        --primary: 222.2 47.4% 11.2%;
+        --primary-foreground: 210 40% 98%;
+        --secondary: 210 40% 96.1%;
+        --secondary-foreground: 222.2 47.4% 11.2%;
+        --muted: 210 40% 96.1%;
+        --muted-foreground: 215.4 16.3% 46.9%;
+        --accent: 210 40% 96.1%;
+        --accent-foreground: 222.2 47.4% 11.2%;
+        --destructive: 0 84.2% 60.2%;
+        --destructive-foreground: 210 40% 98%;
+        --border: 214.3 31.8% 91.4%;
+        --input: 214.3 31.8% 91.4%;
+        --ring: 222.2 84% 4.9%;
+        --radius: 0.5rem;
+
+        /* Custom Dashboard Colors */
+        --sidebar-bg: 186 100% 29%;
+        --sidebar-hover: 186 100% 35%;
+        --teal-gradient-start: 186 100% 29%;
+        --teal-gradient-end: 186 80% 40%;
+        --purple-gradient-start: 280 100% 70%;
+        --purple-gradient-end: 250 100% 60%;
+        --orange-gradient-start: 30 100% 60%;
+        --orange-gradient-end: 15 100% 55%;
+        --blue-gradient-start: 220 100% 60%;
+        --blue-gradient-end: 200 100% 50%;
+    }
+
+    .dark {
+        --background: 222.2 84% 4.9%;
+        --foreground: 210 40% 98%;
+        --card: 222.2 84% 4.9%;
+        --card-foreground: 210 40% 98%;
+        --popover: 222.2 84% 4.9%;
+        --popover-foreground: 210 40% 98%;
+        --primary: 210 40% 98%;
+        --primary-foreground: 222.2 47.4% 11.2%;
+        --secondary: 217.2 32.6% 17.5%;
+        --secondary-foreground: 210 40% 98%;
+        --muted: 217.2 32.6% 17.5%;
+        --muted-foreground: 215 20.2% 65.1%;
+        --accent: 217.2 32.6% 17.5%;
+        --accent-foreground: 210 40% 98%;
+        --destructive: 0 62.8% 30.6%;
+        --destructive-foreground: 210 40% 98%;
+        --border: 217.2 32.6% 17.5%;
+        --input: 217.2 32.6% 17.5%;
+        --ring: 212.7 26.8% 83.9%;
+    }
+
+    /* Base typography - Mobile First */
+    html {
+        font-size: 14px; /* 0.875rem base for mobile */
+    }
+
+    @media (min-width: 768px) {
+        html {
+            font-size: 16px; /* 1rem base for desktop */
+        }
+    }
+
+    body {
+        @apply bg-white text-slate-900 antialiased m-0 p-0 overflow-x-hidden;
+    }
+
+    /* Focus visible for accessibility */
+    *:focus-visible {
+        @apply outline-none ring-2 ring-blue-500 ring-offset-2;
+    }
+}
+
+@layer utilities {
+    /* Gradient utilities */
+    .gradient-teal {
+        background: linear-gradient(
+            135deg,
+            hsl(var(--teal-gradient-start)),
+            hsl(var(--teal-gradient-end))
+        );
+    }
+
+    .gradient-purple {
+        background: linear-gradient(
+            135deg,
+            hsl(var(--purple-gradient-start)),
+            hsl(var(--purple-gradient-end))
+        );
+    }
+
+    .gradient-orange {
+        background: linear-gradient(
+            135deg,
+            hsl(var(--orange-gradient-start)),
+            hsl(var(--orange-gradient-end))
+        );
+    }
+
+    .gradient-blue {
+        background: linear-gradient(
+            135deg,
+            hsl(var(--blue-gradient-start)),
+            hsl(var(--blue-gradient-end))
+        );
+    }
+
+    /* Card hover animation */
+    .card-hover {
+        @apply transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
+    }
+
+    /* Sidebar icon styles */
+    .sidebar-icon {
+        @apply w-6 h-6 text-white/80 hover:text-white transition-colors cursor-pointer;
+    }
+
+    /* Sidebar icon v2 - Standard sidebar button style */
+    .sidebar-icon-v2 {
+        @apply w-10 h-10 rounded-xl flex items-center justify-center text-white/70 
+               transition-all duration-200 hover:bg-white/10 hover:text-white cursor-pointer;
+    }
+
+    /* Touch target minimum 44px for accessibility */
+    .touch-target {
+        @apply min-h-[44px] min-w-[44px];
+    }
+
+    /* Container with responsive padding */
+    .container-responsive {
+        @apply px-4 sm:px-6 md:px-8 lg:px-12;
+    }
+
+    /* Text truncation utilities */
+    .text-truncate {
+        @apply truncate;
+    }
+
+    .text-clamp-2 {
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+    }
+
+    .text-clamp-3 {
+        display: -webkit-box;
+        -webkit-line-clamp: 3;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+    }
+
+    /* Animation utilities */
+    .animate-fade-in {
+        animation: fadeIn 0.3s ease-in-out;
+    }
+
+    .animate-slide-up {
+        animation: slideUp 0.3s ease-out;
+    }
+
+    .animate-fade-up-200 {
+        animation: fadeUp 0.8s ease forwards;
+        animation-delay: 0.2s;
+    }
+
+    .animate-fade-up-400 {
+        animation: fadeUp 0.8s ease forwards;
+        animation-delay: 0.4s;
+    }
+
+    .will-change-transform-opacity {
+        will-change: transform, opacity;
+    }
+
+    @keyframes fadeIn {
+        from {
+            opacity: 0;
+        }
+        to {
+            opacity: 1;
+        }
+    }
+
+    @keyframes slideUp {
+        from {
+            opacity: 0;
+            transform: translateY(10px);
+        }
+        to {
+            opacity: 1;
+            transform: translateY(0);
+        }
+    }
+
+    @keyframes fadeUp {
+        from {
+            opacity: 0;
+            transform: translateY(20px);
+        }
+        to {
+            opacity: 1;
+            transform: translateY(0);
+        }
+    }
+}
--- a/src/lib/query-client.ts
+++ b/src/lib/query-client.ts
@ -0,0 +1,45 @@
+/**
+ * TanStack Query client configuration
+ * @description Centralized query client setup with default options
+ */
+
+import { QueryClient } from '@tanstack/react-query';
+
+/**
+ * Default stale time for queries (5 minutes)
+ */
+const DEFAULT_STALE_TIME = 5 * 60 * 1000;
+
+/**
+ * Default cache time for queries (30 minutes)
+ */
+const DEFAULT_CACHE_TIME = 30 * 60 * 1000;
+
+/**
+ * Creates and configures the QueryClient instance
+ * @description Sets up TanStack Query with optimized defaults
+ * @returns {QueryClient} Configured QueryClient instance
+ */
+export function createQueryClient(): QueryClient {
+    return new QueryClient({
+        defaultOptions: {
+            queries: {
+                staleTime: DEFAULT_STALE_TIME,
+                gcTime: DEFAULT_CACHE_TIME,
+                retry: 3,
+                retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 30000),
+                refetchOnWindowFocus: false,
+            },
+            mutations: {
+                retry: 1,
+            },
+        },
+    });
+}
+
+/**
+ * Singleton QueryClient instance
+ * @description Pre-configured query client for the application
+ */
+export const queryClient = createQueryClient();
+
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@ -0,0 +1,14 @@
+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+/**
+ * Combines class names using clsx and merges Tailwind classes
+ * @description Utility function for conditional class names with Tailwind CSS
+ * @param inputs - Class values to combine
+ * @returns Merged class string
+ * @example
+ * cn("text-red-500", condition && "bg-blue-500")
+ */
+export function cn(...inputs: ClassValue[]) {
+    return twMerge(clsx(inputs))
+}
--- a/src/main.tsx
+++ b/src/main.tsx
@ -0,0 +1,32 @@
+/**
+ * Application entry point
+ * @description Bootstraps the React application with providers
+ */
+
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { QueryClientProvider } from '@tanstack/react-query';
+import { queryClient } from '@/lib/query-client';
+import App from './App';
+import './index.css';
+
+/**
+ * Root element for React application
+ */
+const rootElement = document.getElementById('root');
+
+if (!rootElement) {
+    throw new Error('Root element not found. Ensure index.html contains a div with id="root".');
+}
+
+/**
+ * Renders the application with all required providers
+ * @description Wraps App with StrictMode and QueryClientProvider
+ */
+createRoot(rootElement).render(
+    <StrictMode>
+        <QueryClientProvider client={queryClient}>
+            <App />
+        </QueryClientProvider>
+    </StrictMode>
+);
--- a/src/pages/dashboard.tsx
+++ b/src/pages/dashboard.tsx
@ -0,0 +1,156 @@
+/**
+ * Dashboard Page Component
+ * @description Main dashboard layout with sidebar, metrics, and agent cards
+ */
+
+import { Sidebar } from '@/components/dashboard/sidebar';
+import { MetricCard } from '@/components/dashboard/metric-card';
+import { AgentCard } from '@/components/dashboard/agent-card';
+import { DashboardHeader } from '@/components/dashboard/dashboard-header';
+import { useUIStore } from '@/stores';
+
+/**
+ * Mock agents data
+ * @description Temporary data for agent cards display
+ */
+const MOCK_AGENTS = [
+    {
+        id: '1',
+        title: 'Customer Support Agent',
+        tags: ['GPT-4', 'Chat Interface'],
+        description: 'Automates customer service inquiries with intelligent escalation and context preservation.',
+    },
+    {
+        id: '2',
+        title: 'Document Analyst',
+        tags: ['Claude-3', 'PDF Processing', 'Knowledge Graph'],
+        description: 'Analyzes documents to extract insights and generate comprehensive reports automatically.',
+    },
+    {
+        id: '3',
+        title: 'Sales Qualifier',
+        tags: ['Lead Scoring', 'CRM Integration'],
+        description: 'Qualifies prospects, schedules meetings, and manages follow-up communications.',
+    },
+    {
+        id: '4',
+        title: 'Code Review Assistant',
+        tags: ['GPT-4', 'GitHub Integration'],
+        description: 'Reviews pull requests and provides actionable feedback on code quality and best practices.',
+    },
+    {
+        id: '5',
+        title: 'Data Pipeline Monitor',
+        tags: ['Real-time', 'Alerting'],
+        description: 'Monitors ETL pipelines and automatically diagnoses and reports data quality issues.',
+    },
+    {
+        id: '6',
+        title: 'Meeting Summarizer',
+        tags: ['Whisper', 'NLP'],
+        description: 'Transcribes meetings and generates structured summaries with action items.',
+    },
+] as const;
+
+/**
+ * Dashboard component
+ * @description Main dashboard page with all sections including header, metrics, and agents
+ * @returns {JSX.Element} Dashboard element
+ */
+export function Dashboard(): JSX.Element {
+    const { activeTab, setActiveTab } = useUIStore();
+
+    return (
+        <div className="min-h-screen bg-[#F0F5FF]">
+            <Sidebar />
+
+            {/* Main Content */}
+            <main className="ml-6 sm:ml-24 min-h-screen transition-all duration-300">
+                <DashboardHeader />
+
+                {/* Content Area */}
+                <div className="px-4 sm:px-6 md:px-8 py-6 sm:py-8">
+                    {/* Welcome Section */}
+                    <div className="mb-6 sm:mb-8">
+                        <h1 className="text-2xl sm:text-3xl md:text-4xl font-bold text-gray-900 mb-2">
+                            Welcome, Vijay! 👋
+                        </h1>
+                        <p className="text-sm sm:text-base text-gray-600 max-w-2xl">
+                            Monitor and manage your intelligent agents, knowledge bases, and 
+                            automated workflows from a centralized dashboard
+                        </p>
+                    </div>
+
+                    {/* Metrics Grid */}
+                    <div className="grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4 md:gap-6 mb-6 sm:mb-8">
+                        <MetricCard
+                            title="ACTIVE AGENTS"
+                            subtitle="Agents"
+                            value="03"
+                            gradient="teal"
+                        />
+                        <MetricCard
+                            title="KNOWLEDGE BASES"
+                            subtitle="Knowledge Bases"
+                            value="02"
+                            gradient="purple"
+                        />
+                        <MetricCard
+                            title="RECENT WORKFLOWS"
+                            subtitle="Workflows"
+                            value="01"
+                            gradient="orange"
+                        />
+                        <MetricCard
+                            title="CONNECTED TOOLS"
+                            subtitle="Tools"
+                            value="01"
+                            gradient="blue"
+                        />
+                    </div>
+
+                    {/* Agents Section */}
+                    <div className="bg-white rounded-xl sm:rounded-2xl shadow-sm border border-gray-200 p-4 sm:p-6">
+                        {/* Tabs */}
+                        <div className="flex gap-2 sm:gap-4 mb-4 sm:mb-6">
+                            <button
+                                onClick={() => setActiveTab('all')}
+                                className={`px-4 sm:px-6 py-2 rounded-lg font-medium text-sm sm:text-base 
+                                    transition-colors min-h-[44px] ${
+                                    activeTab === 'all'
+                                        ? 'bg-black text-white'
+                                        : 'bg-white text-gray-600 border border-gray-300 hover:bg-gray-50'
+                                }`}
+                            >
+                                All Agents
+                            </button>
+                            <button
+                                onClick={() => setActiveTab('my')}
+                                className={`px-4 sm:px-6 py-2 rounded-lg font-medium text-sm sm:text-base 
+                                    transition-colors min-h-[44px] ${
+                                    activeTab === 'my'
+                                        ? 'bg-black text-white'
+                                        : 'bg-white text-gray-600 border border-gray-300 hover:bg-gray-50'
+                                }`}
+                            >
+                                My Agents
+                            </button>
+                        </div>
+
+                        {/* Agent Cards Grid */}
+                        <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-4 sm:gap-6">
+                            {MOCK_AGENTS.map((agent) => (
+                                <AgentCard
+                                    key={agent.id}
+                                    title={agent.title}
+                                    tags={agent.tags as unknown as string[]}
+                                    description={agent.description}
+                                />
+                            ))}
+                        </div>
+                    </div>
+                </div>
+            </main>
+        </div>
+    );
+}
--- a/src/pages/sign-in-page.tsx
+++ b/src/pages/sign-in-page.tsx
@ -0,0 +1,18 @@
+/**
+ * @description Main sign-in page component for AgenticIQ application
+ * Combines left hero section with right login card
+ * @returns {JSX.Element} Complete sign-in page layout
+ */
+import AuthLayout from '@/components/auth/auth-layout';
+import LoginCard from '@/components/auth/login-card';
+
+function SignInPage(): JSX.Element {
+    return (
+        <AuthLayout>
+            <LoginCard />
+        </AuthLayout>
+    );
+}
+
+export default SignInPage;
+
--- a/src/pages/sign-in.tsx
+++ b/src/pages/sign-in.tsx
@ -0,0 +1,2 @@
+export { default } from './sign-in-page';
+
--- a/src/services/api.ts
+++ b/src/services/api.ts
@ -0,0 +1,122 @@
+/**
+ * API service layer
+ * @description Handles HTTP requests with error handling and timeout support
+ */
+
+import { API_BASE_URL, API_TIMEOUT } from '@/constants/api';
+import type { IApiResponse, IApiError } from '@/types';
+
+/**
+ * Base fetch wrapper with error handling
+ * @description Makes HTTP requests with standardized error handling and timeout
+ * @param {string} endpoint - API endpoint path
+ * @param {RequestInit} options - Fetch options
+ * @returns {Promise<IApiResponse<T>>} Promise with API response
+ * @throws {IApiError} When request fails
+ * @example
+ * const data = await fetchApi('/users', { method: 'GET' })
+ */
+export async function fetchApi<T>(
+    endpoint: string,
+    options?: RequestInit
+): Promise<IApiResponse<T>> {
+    const controller = new AbortController();
+    const timeoutId = setTimeout(() => controller.abort(), API_TIMEOUT);
+
+    try {
+        const response = await fetch(`${API_BASE_URL}${endpoint}`, {
+            ...options,
+            signal: controller.signal,
+            headers: {
+                'Content-Type': 'application/json',
+                ...options?.headers,
+            },
+        });
+
+        clearTimeout(timeoutId);
+
+        if (!response.ok) {
+            const error: IApiError = {
+                message: `HTTP ${response.status}: ${response.statusText}`,
+                code: `HTTP_${response.status}`,
+            };
+            throw error;
+        }
+
+        const data = await response.json();
+        return data;
+    } catch (error) {
+        clearTimeout(timeoutId);
+
+        if (error instanceof Error) {
+            if (error.name === 'AbortError') {
+                throw {
+                    message: 'Request timeout',
+                    code: 'TIMEOUT',
+                } as IApiError;
+            }
+            throw {
+                message: error.message,
+                code: 'NETWORK_ERROR',
+            } as IApiError;
+        }
+
+        throw error;
+    }
+}
+
+/**
+ * GET request helper
+ * @description Performs GET request to the specified endpoint
+ * @param {string} endpoint - API endpoint
+ * @returns {Promise<IApiResponse<T>>} Promise with response data
+ */
+export async function getRequest<T>(endpoint: string): Promise<IApiResponse<T>> {
+    return fetchApi<T>(endpoint, { method: 'GET' });
+}
+
+/**
+ * POST request helper
+ * @description Performs POST request with JSON body
+ * @param {string} endpoint - API endpoint
+ * @param {D} data - Request body data
+ * @returns {Promise<IApiResponse<T>>} Promise with response data
+ */
+export async function createRequest<T, D = unknown>(
+    endpoint: string,
+    data: D
+): Promise<IApiResponse<T>> {
+    return fetchApi<T>(endpoint, {
+        method: 'POST',
+        body: JSON.stringify(data),
+    });
+}
+
+/**
+ * PUT request helper
+ * @description Performs PUT request with JSON body
+ * @param {string} endpoint - API endpoint
+ * @param {D} data - Request body data
+ * @returns {Promise<IApiResponse<T>>} Promise with response data
+ */
+export async function updateRequest<T, D = unknown>(
+    endpoint: string,
+    data: D
+): Promise<IApiResponse<T>> {
+    return fetchApi<T>(endpoint, {
+        method: 'PUT',
+        body: JSON.stringify(data),
+    });
+}
+
+/**
+ * DELETE request helper
+ * @description Performs DELETE request to the specified endpoint
+ * @param {string} endpoint - API endpoint
+ * @returns {Promise<IApiResponse<T>>} Promise with response data
+ */
+export async function deleteRequest<T>(
+    endpoint: string
+): Promise<IApiResponse<T>> {
+    return fetchApi<T>(endpoint, { method: 'DELETE' });
+}
--- a/src/stores/app-store.ts
+++ b/src/stores/app-store.ts
@ -0,0 +1,71 @@
+/**
+ * Application global store
+ * @description Zustand store for application-wide state management
+ */
+
+import { create } from 'zustand';
+import { devtools, persist } from 'zustand/middleware';
+import type { IUser } from '@/types';
+
+/**
+ * Application store state interface
+ * @description Defines the shape of the application store
+ */
+interface IAppStoreState {
+    user: IUser | null;
+    isAuthenticated: boolean;
+    isInitialized: boolean;
+}
+
+/**
+ * Application store actions interface
+ * @description Defines available actions for the app store
+ */
+interface IAppStoreActions {
+    setUser: (user: IUser | null) => void;
+    setIsAuthenticated: (isAuthenticated: boolean) => void;
+    setIsInitialized: (isInitialized: boolean) => void;
+    reset: () => void;
+}
+
+type IAppStore = IAppStoreState & IAppStoreActions;
+
+const initialState: IAppStoreState = {
+    user: null,
+    isAuthenticated: false,
+    isInitialized: false,
+};
+
+/**
+ * Application global store
+ * @description Manages user authentication and app initialization state
+ * @returns {IAppStore} Store instance with state and actions
+ * @example
+ * const { user, setUser } = useAppStore()
+ */
+export const useAppStore = create<IAppStore>()(
+    devtools(
+        persist(
+            (set) => ({
+                ...initialState,
+
+                setUser: (user) => set({ user, isAuthenticated: !!user }),
+
+                setIsAuthenticated: (isAuthenticated) => set({ isAuthenticated }),
+
+                setIsInitialized: (isInitialized) => set({ isInitialized }),
+
+                reset: () => set(initialState),
+            }),
+            {
+                name: 'agenticiq-app-store',
+                partialize: (state) => ({
+                    user: state.user,
+                    isAuthenticated: state.isAuthenticated,
+                }),
+            }
+        ),
+        { name: 'AppStore' }
+    )
+);
+
--- a/src/stores/index.ts
+++ b/src/stores/index.ts
@ -0,0 +1,8 @@
+/**
+ * Zustand stores barrel export
+ * @description Centralized exports for global state stores
+ */
+
+export { useAppStore } from './app-store';
+export { useUIStore } from './ui-store';
+
--- a/src/stores/ui-store.ts
+++ b/src/stores/ui-store.ts
@ -0,0 +1,66 @@
+/**
+ * UI state store
+ * @description Zustand store for UI-related state management
+ */
+
+import { create } from 'zustand';
+import { devtools } from 'zustand/middleware';
+
+/**
+ * UI store state interface
+ * @description Defines the shape of the UI store
+ */
+interface IUIStoreState {
+    isSidebarOpen: boolean;
+    isDarkMode: boolean;
+    activeTab: 'all' | 'my';
+    isSearchOpen: boolean;
+}
+
+/**
+ * UI store actions interface
+ * @description Defines available actions for the UI store
+ */
+interface IUIStoreActions {
+    toggleSidebar: () => void;
+    setSidebarOpen: (isOpen: boolean) => void;
+    toggleDarkMode: () => void;
+    setActiveTab: (tab: 'all' | 'my') => void;
+    setSearchOpen: (isOpen: boolean) => void;
+}
+
+type IUIStore = IUIStoreState & IUIStoreActions;
+
+const initialState: IUIStoreState = {
+    isSidebarOpen: true,
+    isDarkMode: false,
+    activeTab: 'all',
+    isSearchOpen: false,
+};
+
+/**
+ * UI state store
+ * @description Manages UI state like sidebar visibility and theme
+ * @returns {IUIStore} Store instance with state and actions
+ * @example
+ * const { isSidebarOpen, toggleSidebar } = useUIStore()
+ */
+export const useUIStore = create<IUIStore>()(
+    devtools(
+        (set) => ({
+            ...initialState,
+
+            toggleSidebar: () => set((state) => ({ isSidebarOpen: !state.isSidebarOpen })),
+
+            setSidebarOpen: (isOpen) => set({ isSidebarOpen: isOpen }),
+
+            toggleDarkMode: () => set((state) => ({ isDarkMode: !state.isDarkMode })),
+
+            setActiveTab: (tab) => set({ activeTab: tab }),
+
+            setSearchOpen: (isOpen) => set({ isSearchOpen: isOpen }),
+        }),
+        { name: 'UIStore' }
+    )
+);
+
--- a/src/types/index.ts
+++ b/src/types/index.ts
@ -0,0 +1,81 @@
+/**
+ * Application-wide type definitions
+ * @description TypeScript interfaces and types for the application
+ */
+
+/**
+ * User entity interface
+ * @description Represents a user in the system
+ */
+export interface IUser {
+    id: string;
+    email: string;
+    firstName: string;
+    lastName: string;
+    createdAt: string;
+    updatedAt: string;
+}
+
+/**
+ * Generic API response wrapper
+ * @description Standard response format for all API calls
+ */
+export interface IApiResponse<T> {
+    data: T;
+    message?: string;
+    isSuccess: boolean;
+}
+
+/**
+ * API error structure
+ * @description Standard error format for API failures
+ */
+export interface IApiError {
+    message: string;
+    code: string;
+    details?: Record<string, unknown>;
+}
+
+/**
+ * Agent entity interface
+ * @description Represents an AI agent in the system
+ */
+export interface IAgent {
+    id: string;
+    title: string;
+    tags: string[];
+    description: string;
+    isActive: boolean;
+    createdAt: string;
+    updatedAt: string;
+}
+
+/**
+ * Metric data interface
+ * @description Represents dashboard metric information
+ */
+export interface IMetricData {
+    id: string;
+    title: string;
+    subtitle: string;
+    value: string;
+    gradient: 'teal' | 'purple' | 'orange' | 'blue';
+}
+
+/**
+ * Loading state type
+ * @description Represents async operation states
+ */
+export type LoadingState = 'idle' | 'loading' | 'success' | 'error';
+
+/**
+ * Navigation item interface
+ * @description Represents a sidebar navigation item
+ */
+export interface INavigationItem {
+    id: string;
+    label: string;
+    icon: string;
+    path: string;
+    isActive: boolean;
+}
--- a/src/utils/format.ts
+++ b/src/utils/format.ts
@ -0,0 +1,71 @@
+/**
+ * Formatting utility functions
+ * @description Helper functions for formatting data
+ */
+
+/**
+ * Formats a number with leading zeros
+ * @description Pads a number with leading zeros to a specified length
+ * @param {number} value - The number to format
+ * @param {number} length - Desired string length
+ * @returns {string} Formatted number string
+ * @example
+ * formatNumberWithLeadingZeros(3, 2) // Returns "03"
+ */
+export function formatNumberWithLeadingZeros(value: number, length: number = 2): string {
+    return value.toString().padStart(length, '0');
+}
+
+/**
+ * Formats a date to locale string
+ * @description Converts a date to a human-readable format
+ * @param {string | Date} date - Date to format
+ * @param {Intl.DateTimeFormatOptions} options - Formatting options
+ * @returns {string} Formatted date string
+ * @example
+ * formatDate(new Date()) // Returns "Dec 22, 2025"
+ */
+export function formatDate(
+    date: string | Date,
+    options: Intl.DateTimeFormatOptions = {
+        month: 'short',
+        day: 'numeric',
+        year: 'numeric',
+    }
+): string {
+    const dateObject = typeof date === 'string' ? new Date(date) : date;
+    return dateObject.toLocaleDateString('en-US', options);
+}
+
+/**
+ * Truncates text to a specified length
+ * @description Cuts off text at a maximum length and adds ellipsis
+ * @param {string} text - Text to truncate
+ * @param {number} maxLength - Maximum character length
+ * @returns {string} Truncated text with ellipsis if needed
+ * @example
+ * truncateText("Hello World", 5) // Returns "Hello..."
+ */
+export function truncateText(text: string, maxLength: number): string {
+    if (text.length <= maxLength) {
+        return text;
+    }
+    return `${text.slice(0, maxLength)}...`;
+}
+
+/**
+ * Formats a number as a compact string
+ * @description Converts large numbers to readable format (1K, 1M, etc.)
+ * @param {number} value - Number to format
+ * @returns {string} Formatted compact string
+ * @example
+ * formatCompactNumber(1500) // Returns "1.5K"
+ */
+export function formatCompactNumber(value: number): string {
+    const formatter = new Intl.NumberFormat('en-US', {
+        notation: 'compact',
+        compactDisplay: 'short',
+    });
+    return formatter.format(value);
+}
+
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@ -0,0 +1,9 @@
+/**
+ * Utility functions barrel export
+ * @description Centralized exports for utility functions
+ */
+
+export { cn } from '@/lib/utils';
+export * from './format';
+export * from './validation';
+
--- a/src/utils/validation.ts
+++ b/src/utils/validation.ts
@ -0,0 +1,66 @@
+/**
+ * Validation utility functions
+ * @description Helper functions for input validation
+ */
+
+/**
+ * Validates email format
+ * @description Checks if a string is a valid email address
+ * @param {string} email - Email string to validate
+ * @returns {boolean} True if valid email format
+ * @example
+ * isValidEmail("test@example.com") // Returns true
+ */
+export function isValidEmail(email: string): boolean {
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    return emailRegex.test(email);
+}
+
+/**
+ * Validates string is not empty
+ * @description Checks if a string has content after trimming
+ * @param {string} value - String to validate
+ * @returns {boolean} True if string has content
+ * @example
+ * isNotEmpty("  hello  ") // Returns true
+ */
+export function isNotEmpty(value: string): boolean {
+    return value.trim().length > 0;
+}
+
+/**
+ * Validates string length is within range
+ * @description Checks if string length falls within min and max bounds
+ * @param {string} value - String to validate
+ * @param {number} minLength - Minimum allowed length
+ * @param {number} maxLength - Maximum allowed length
+ * @returns {boolean} True if length is within range
+ * @example
+ * isValidLength("hello", 1, 10) // Returns true
+ */
+export function isValidLength(
+    value: string,
+    minLength: number,
+    maxLength: number
+): boolean {
+    const length = value.trim().length;
+    return length >= minLength && length <= maxLength;
+}
+
+/**
+ * Validates URL format
+ * @description Checks if a string is a valid URL
+ * @param {string} url - URL string to validate
+ * @returns {boolean} True if valid URL format
+ * @example
+ * isValidURL("https://example.com") // Returns true
+ */
+export function isValidURL(url: string): boolean {
+    try {
+        new URL(url);
+        return true;
+    } catch {
+        return false;
+    }
+}
+
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@ -0,0 +1,40 @@
+{
+  "compilerOptions": {
+    "incremental": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": [
+      "ES2022",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "module": "ESNext",
+    "types": [
+      "vite/client"
+    ],
+    "skipLibCheck": true,
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    /* Path Aliases */
+    "baseUrl": ".",
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ]
+    }
+  },
+  "include": [
+    "src"
+  ]
+}
--- a/tsconfig.json
+++ b/tsconfig.json
@ -0,0 +1,19 @@
+{
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ],
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ]
+    }
+  }
+}
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "incremental": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2022",
+    "lib": ["ES2022"],
+    "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["vite.config.ts"]
+}
--- a/vite.config.ts
+++ b/vite.config.ts
@ -0,0 +1,18 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react-swc'
+import path from 'path'
+import tailwindcss from '@tailwindcss/vite'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react(), tailwindcss(),
+  ],
+  server: {
+    port: 3000,
+  },
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
+})
				`@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>