diff --git a/QUICK-START-STATIC-BUILDS.md b/QUICK-START-STATIC-BUILDS.md
deleted file mode 100644
index 5ea10e54..00000000
--- a/QUICK-START-STATIC-BUILDS.md
+++ /dev/null
@@ -1,117 +0,0 @@
-# Quick Start: Static Build Strategy
-
-## 🚀 Quick Commands
-
-### Build for Production
-```bash
-npm run build:proxy-auth:prod
-```
-Creates:
-- `proxy-auth.js` → Static from `stable-builds/prod/`
-- `proxy-auth-new.js` → Latest build
-
-### Build for Test
-```bash
-npm run build:proxy-auth:test
-```
-Creates:
-- `proxy-auth.js` → Static from `stable-builds/test/`
-- `proxy-auth-new.js` → Latest build
-
-### Build for Stage
-```bash
-npm run build:proxy-auth:stage
-```
-Creates:
-- `proxy-auth.js` → Static from `stable-builds/test/`
-- `proxy-auth-new.js` → Latest build
-
-## 📍 Where Files Are Created
-
-Both locations get the same files:
-
-1. **Source assets**: `apps/36-blocks/src/assets/proxy-auth/`
-2. **Dist output**: `dist/apps/36-blocks/browser/assets/proxy-auth/`
-
-## 🧪 Testing New Builds
-
-### Step 1: Build
-```bash
-npm run build:proxy-auth:test
-```
-
-### Step 2: Test with proxy-auth-new.js
-```html
-<script src="https://test.proxy.msg91.com/assets/proxy-auth/proxy-auth-new.js"></script>
-```
-
-### Step 3: If tests pass, promote to stable
-```bash
-# Copy tested build to stable
-cp dist/apps/36-blocks/browser/assets/proxy-auth/proxy-auth-new.js \
-   stable-builds/prod/proxy-auth.js
-
-# Rebuild to update deployments
-npm run build:proxy-auth:prod
-```
-
-## 🔄 Promoting Builds Checklist
-
-Before updating stable builds:
-
-- [ ] New build tested in test environment
-- [ ] No console errors
-- [ ] Authentication flows work
-- [ ] Social logins functional
-- [ ] Mobile responsiveness verified
-- [ ] Dark mode working
-
-Then:
-
-```bash
-# Update stable files
-cp dist/apps/36-blocks/browser/assets/proxy-auth/proxy-auth-new.js stable-builds/prod/proxy-auth.js
-cp dist/apps/36-blocks/browser/assets/proxy-auth/proxy-auth-new.js stable-builds/test/proxy-auth.js
-
-# Commit
-git add stable-builds/
-git commit -m "chore: promote tested build to stable"
-
-# Rebuild
-npm run build:prod
-```
-
-## 📋 Current URLs
-
-### Production
-- **Stable**: `https://proxy.msg91.com/assets/proxy-auth/proxy-auth.js`
-- **Testing**: `https://proxy.msg91.com/assets/proxy-auth/proxy-auth-new.js`
-
-### Test
-- **Stable**: `https://test.proxy.msg91.com/assets/proxy-auth/proxy-auth.js`
-- **Testing**: `https://test.proxy.msg91.com/assets/proxy-auth/proxy-auth-new.js`
-
-## ⚠️ Important Notes
-
-1. **Never deploy without testing** - Always test `proxy-auth-new.js` first
-2. **Keep stable-builds in git** - These are your production safety net
-3. **Check file sizes** - Build warns if >3 MB
-4. **Document changes** - Update changelog when promoting builds
-
-## 📖 Full Documentation
-
-See `STATIC-BUILD-STRATEGY.md` for:
-- Complete architecture details
-- Revert instructions
-- Troubleshooting guide
-- Change history
-
----
-
-**Quick Help**: If you just want to build normally, use:
-```bash
-npm run build:proxy-auth:prod  # Production
-npm run build:proxy-auth:test  # Test
-```
-
-The static file strategy works automatically! 🎉
diff --git a/STATIC-BUILD-STRATEGY.md b/STATIC-BUILD-STRATEGY.md
deleted file mode 100644
index 5ef653d2..00000000
--- a/STATIC-BUILD-STRATEGY.md
+++ /dev/null
@@ -1,319 +0,0 @@
-# Static Build Strategy for proxy-auth.js
-
-## 📋 Overview
-
-This document explains the static file strategy implemented for the 36Blocks authentication widget (`proxy-auth.js`). This strategy ensures **backward compatibility** for existing clients while allowing safe testing of new builds.
-
-## 🎯 Problem Statement
-
-Production clients depend on stable URLs:
-- **Production**: `https://proxy.msg91.com/assets/proxy-auth/proxy-auth.js`
-- **Test**: `https://test.proxy.msg91.com/assets/proxy-auth/proxy-auth.js`
-
-Direct deployment of new builds could break existing client integrations. We needed a way to:
-1. Keep stable, tested versions available at these URLs
-2. Test new builds safely before rolling them out
-3. Provide an easy rollback mechanism
-
-## 🏗️ Solution Architecture
-
-### File Structure
-
-```
-proxy-ui/
-├── stable-builds/
-│   ├── prod/
-│   │   └── proxy-auth.js          # Stable production build
-│   └── test/
-│       └── proxy-auth.js          # Stable test build
-│
-├── apps/36-blocks-widget/
-│   └── build-elements.js          # Modified build script
-│
-└── dist/apps/36-blocks/browser/assets/proxy-auth/
-    ├── proxy-auth.js              # STATIC (copied from stable-builds)
-    └── proxy-auth-new.js          # LATEST BUILD (for testing)
-```
-
-### Build Process
-
-When you run the build, the script now:
-
-1. **Builds the widget** from source code
-2. **Creates TWO files**:
-   - `proxy-auth-new.js` → Latest build from source (for testing)
-   - `proxy-auth.js` → Static copy from `stable-builds/{env}/` (for production clients)
-
-### Environment Mapping
-
-| Build Config | Stable Source | Output |
-|-------------|---------------|--------|
-| `production` | `stable-builds/prod/proxy-auth.js` | Production deployment |
-| `test` | `stable-builds/test/proxy-auth.js` | Test deployment |
-| `stage` | `stable-builds/test/proxy-auth.js` | Staging deployment |
-
-## 🚀 Usage
-
-### Building for Production
-
-```bash
-# Build widget
-nx build 36-blocks-widget --configuration=production
-
-# Run build-elements script (automatically uses 'production' env)
-node apps/36-blocks-widget/build-elements.js production
-```
-
-### Building for Test/Stage
-
-```bash
-# Build widget
-nx build 36-blocks-widget --configuration=test
-
-# Run build-elements script with test environment
-node apps/36-blocks-widget/build-elements.js test
-```
-
-### Testing New Builds
-
-To test a new build before promoting it to stable:
-
-1. Build the widget
-2. Use `proxy-auth-new.js` in your test environment:
-   ```html
-   <script src="https://test.proxy.msg91.com/assets/proxy-auth/proxy-auth-new.js"></script>
-   ```
-3. Verify functionality
-4. If successful, promote the build (see below)
-
-### Promoting a New Build to Stable
-
-When a new build is thoroughly tested and ready for production:
-
-```bash
-# 1. Copy the tested build to stable-builds
-cp dist/apps/36-blocks/browser/assets/proxy-auth/proxy-auth-new.js \
-   stable-builds/prod/proxy-auth.js
-
-# 2. For test environment
-cp dist/apps/36-blocks/browser/assets/proxy-auth/proxy-auth-new.js \
-   stable-builds/test/proxy-auth.js
-
-# 3. Rebuild to update the deployed proxy-auth.js
-node apps/36-blocks-widget/build-elements.js production
-```
-
-**Alternative**: Update stable files manually after verifying in production.
-
-## 🔄 How to Revert to Direct Build (Old Behavior)
-
-If you need to remove the static file strategy and go back to direct builds:
-
-### Step 1: Restore Original build-elements.js
-
-Replace the current `build-elements.js` with this simplified version:
-
-```javascript
-const fs = require('fs-extra');
-const path = require('path');
-
-(async function build() {
-    const distDir = './dist/apps/36-blocks-widget/browser';
-    const outDir = './apps/36-blocks/src/assets/proxy-auth';
-
-    if (!(await fs.pathExists(distDir))) {
-        throw new Error(`Widget dist not found: ${distDir}`);
-    }
-
-    const allFiles = await fs.readdir(distDir);
-    const priority = ['polyfills', 'vendor', 'main'];
-    const jsFiles = allFiles
-        .filter((f) => f.endsWith('.js'))
-        .sort((a, b) => {
-            const getPriority = (f) => {
-                const index = priority.findIndex((p) => f.includes(p));
-                return index === -1 ? priority.length : index;
-            };
-            return getPriority(a) - getPriority(b);
-        });
-
-    if (jsFiles.length === 0) {
-        throw new Error(`No JS files found in ${distDir}`);
-    }
-
-    console.info('Concatenating:', jsFiles);
-
-    const contents = [];
-    for (const file of jsFiles) {
-        contents.push(await fs.readFile(path.join(distDir, file), 'utf8'));
-    }
-
-    const stylesPath = path.join(distDir, 'styles.css');
-    if (await fs.pathExists(stylesPath)) {
-        console.info('Inlining styles.css...');
-        const cssContent = await fs.readFile(stylesPath, 'utf8');
-        const escapedCSS = cssContent.replace(/\\/g, '\\\\').replace(/`/g, '\\`').replace(/\$/g, '\\$');
-        
-        const styleInjector = `
-(function() {
-    if (typeof window === 'undefined' || !window.document) return;
-    if (document.getElementById('proxy-auth-widget-styles')) return;
-    
-    var style = document.createElement('style');
-    style.id = 'proxy-auth-widget-styles';
-    style.textContent = \`${escapedCSS}\`;
-    
-    if (!window.__proxyAuth) window.__proxyAuth = {};
-    window.__proxyAuth.inlinedStyles = \`${escapedCSS}\`;
-    
-    (document.head || document.getElementsByTagName('head')[0]).appendChild(style);
-})();
-`;
-        contents.push(styleInjector);
-    } else {
-        console.warn('styles.css not found - skipping CSS inlining');
-    }
-
-    await fs.ensureDir(outDir);
-    const outPath = path.join(outDir, 'proxy-auth.js');
-    await fs.writeFile(outPath, contents.join('\n'));
-
-    const distOutDir = './dist/apps/36-blocks/browser/assets/proxy-auth';
-    await fs.ensureDir(distOutDir);
-    await fs.copyFile(outPath, path.join(distOutDir, 'proxy-auth.js'));
-
-    const stats = await fs.stat(outPath);
-    const sizeMB = (stats.size / 1048576).toFixed(2);
-    console.info(`proxy-auth.js created: ${sizeMB} MB`);
-    console.info(`Copied to: ${distOutDir}/proxy-auth.js`);
-    if (stats.size > 3 * 1048576) {
-        console.warn('WARNING: proxy-auth.js exceeds 3 MB — check for bundle bloat!');
-    }
-
-    console.info('Elements created successfully!');
-})();
-```
-
-### Step 2: Remove Static Files (Optional)
-
-```bash
-# Remove stable-builds directory if no longer needed
-rm -rf stable-builds/
-```
-
-### Step 3: Clean Build
-
-```bash
-# Clean and rebuild
-rm -rf dist/
-nx build 36-blocks-widget --configuration=production
-node apps/36-blocks-widget/build-elements.js
-```
-
-## 📊 File Sizes Reference
-
-Current stable builds:
-- **Production** (`stable-builds/prod/proxy-auth.js`): ~1.5 MB
-- **Test** (`stable-builds/test/proxy-auth.js`): ~1.7 MB
-
-## ⚠️ Important Notes
-
-1. **Never delete `stable-builds/` directory** — it contains production-critical files
-2. **Always test `proxy-auth-new.js`** before promoting to stable
-3. **Keep `stable-builds/` in version control** — these are your rollback point
-4. **Monitor bundle sizes** — the script warns if builds exceed 3 MB
-5. **Environment detection** — script uses command line argument or defaults to 'production'
-
-## 🔍 Verification
-
-After building, verify the output:
-
-```bash
-# Check both files exist
-ls -lh dist/apps/36-blocks/browser/assets/proxy-auth/
-
-# Should show:
-# - proxy-auth.js     (static, from stable-builds)
-# - proxy-auth-new.js (latest build)
-```
-
-## 📝 Change Log
-
-- **2026-04-09**: Initial implementation of static build strategy
-  - Modified `build-elements.js` to support dual-file output
-  - Created `stable-builds/` directory structure
-  - Added environment-aware build process
-
-## 🤝 Contributing
-
-When making changes to the build process:
-
-1. Test with both production and test configurations
-2. Verify file sizes remain reasonable (<3 MB)
-3. Update this documentation if behavior changes
-4. Keep stable-builds in sync with tested releases
-
-## � Troubleshooting
-
-### Issue: proxy-auth-new.js has wrong credentials
-
-If `proxy-auth-new.js` is built with TEST credentials on production:
-
-#### **Step 1: Enable Debug Logging**
-
-The `tools/set-env.js` script automatically logs debug info when running in CI (AWS Amplify). Look for these lines in AWS build logs:
-
-```
-[set-env DEBUG] Environment detection:
-  CI: true
-  NODE_ENV: production
-  AWS_BRANCH: production
-  isCI: true
-[set-env DEBUG] AUTH_UI_ENCODE_KEY = 6bd88de3...
-[set-env DEBUG] AUTH_UI_IV_KEY = 9df117bc...
-```
-
-The first 8 characters help you verify which credentials are being read **without exposing secrets**.
-
-#### **Step 2: Compare Values**
-
-Check if the preview matches your **production** or **test** credentials:
-- Production `AUTH_UI_ENCODE_KEY` starts with: `6bd88de3` → ✅ Correct
-- Test `AUTH_UI_ENCODE_KEY` starts with: `XXXXXXXX` → ❌ Wrong environment
-
-#### **Step 3: Common Fixes**
-
-**If AWS shows wrong values:**
-1. Check AWS Amplify environment variables are set correctly
-2. Verify the branch-specific env vars use correct suffix (`_PROD` vs `_TEST`)
-3. Ensure `.env` file is created before `npm run build:prod` runs
-
-**If set-env reads wrong values:**
-1. Check `.env` file creation in AWS YML
-2. Verify `dotenv` is loading the file correctly
-3. Check for environment variable conflicts in AWS settings
-
-#### **Step 4: Manual Verification**
-
-Add this to AWS YML **after** creating `.env`:
-
-```yaml
-- cat .env  # Shows what's in .env file (secrets will be visible in logs!)
-```
-
-⚠️ **Warning**: This exposes secrets in build logs. Remove after debugging.
-
-## �📞 Support
-
-If you encounter issues:
-
-1. Check the build script output for warnings
-2. Verify `stable-builds/{env}/proxy-auth.js` exists
-3. Ensure build script receives correct environment argument
-4. Review the **debug logs** from `set-env` for credential verification
-5. Compare first 8 chars of credentials in logs vs expected values
-
----
-
-**Last Updated**: April 9, 2026  
-**Maintained By**: 36Blocks Development Team
\ No newline at end of file
diff --git a/apps/36-blocks-widget/build-elements.js b/apps/36-blocks-widget/build-elements.js
index 3e7783bb..77d4a791 100755
--- a/apps/36-blocks-widget/build-elements.js
+++ b/apps/36-blocks-widget/build-elements.js
@@ -1,3 +1,17 @@
+/**
+ * build-elements.js
+ *
+ * Post-build script for the 36Blocks widget.
+ * Concatenates all Angular Element output chunks (polyfills → vendor → main),
+ * inlines the compiled CSS, wraps everything in a singleton guard to prevent
+ * duplicate execution when the script is loaded more than once, and writes
+ * the final self-contained bundle to the host app's public assets directory.
+ *
+ * Output: dist/apps/36-blocks/browser/assets/proxy-auth/proxy-auth.js
+ *
+ * Usage (package.json / nx.json):
+ *   node apps/36-blocks-widget/build-elements.js
+ */
 const fs = require('fs-extra');
 const path = require('path');
 
@@ -69,9 +83,83 @@ const path = require('path');
 
     await fs.ensureDir(distOutDir);
 
-    // Write the fresh build directly to dist — no intermediate src/assets copy needed
+    // Wrap the entire bundle in a singleton guard so loading the script a second
+    // time (e.g. duplicate <script> tags on the client page) is a complete no-op.
+    const bundleBody = contents.join('\n');
+
+    const buildDate = new Date().toISOString();
+    const banner = `/**
+ * 36Blocks Authentication Widget — proxy-auth.js
+ *
+ * Copyright (c) ${new Date().getFullYear()} Walkover. All rights reserved.
+ *
+ * This script is auto-generated. Do not edit directly.
+ * Built: ${buildDate}
+ *
+ * Usage — Authorization (type: 'authorization'):
+ *
+ *   <!-- 1. Mount point: id must exactly match referenceId -->
+ *   <div id="YOUR_REFERENCE_ID"></div>
+ *
+ *   <!-- 2. Define config -->
+ *   <script type="text/javascript">
+ *     var configuration = {
+ *       referenceId: 'YOUR_REFERENCE_ID',  // must match the div id above
+ *       type: 'authorization',             // default — can be omitted
+ *       theme: 'system',                   // 'system' | 'light' | 'dark'  (default: 'system')
+ *       success: function(data)  { console.log('success', data); },
+ *       failure: function(error) { console.log('failure', error); },
+ *     };
+ *   <\/script>
+ *
+ *   <!-- 3. Load script and call initVerification -->
+ *   <script type="text/javascript" onload="initVerification(configuration)" src="SCRIPT_URL"><\/script>
+ *
+ * ---
+ *
+ * Usage — Authenticated views (type: 'user-profile' | 'user-management' | 'organization-details'):
+ *
+ *   <!-- 1. Mount point: use the fixed id "userProxyContainer" for authenticated views -->
+ *   <div id="userProxyContainer"></div>
+ *
+ *   <!-- 2. Define config -->
+ *   <script type="text/javascript">
+ *     var configuration = {
+ *       type: 'user-profile',              // 'user-profile' | 'user-management' | 'organization-details'
+ *       authToken: 'ENCRYPTED_TOKEN',      // required — obtained from the authorization success callback
+ *       theme: 'system',                   // 'system' | 'light' | 'dark'  (default: 'system')
+ *       success: function(data)  { console.log('success', data); },
+ *       failure: function(error) { console.log('failure', error); },
+ *     };
+ *   <\/script>
+ *
+ *   <!-- 3. Load script and call initVerification -->
+ *   <script type="text/javascript" onload="initVerification(configuration)" src="SCRIPT_URL"><\/script>
+ *
+ * Duplicate-load safe: loading this script more than once on the same page
+ * is a no-op — only the first execution registers the custom element.
+ */`;
+
+    // JS is single-threaded in the browser — two <script> tags execute serially,
+    // never in parallel, so a simple flag check is sufficient and race-free.
+    const guardedBundle = `${banner}
+(function() {
+    if (window.__proxyAuthLoaded) { return; }
+    window.__proxyAuthLoaded = true;
+${bundleBody}
+})();
+`;
+
+    // Write the fresh build to dist (production / CI path)
     const outPath = path.join(distOutDir, 'proxy-auth.js');
-    await fs.writeFile(outPath, contents.join('\n'));
+    await fs.writeFile(outPath, guardedBundle);
+
+    // Also copy to the app's source assets so the Angular dev server can serve it
+    // at /assets/proxy-auth/proxy-auth.js without a production build.
+    const srcAssetsDir = './apps/36-blocks/src/assets/proxy-auth';
+    const srcAssetsPath = path.join(srcAssetsDir, 'proxy-auth.js');
+    await fs.ensureDir(srcAssetsDir);
+    await fs.copyFile(outPath, srcAssetsPath);
 
     const stats = await fs.stat(outPath);
     const sizeMB = (stats.size / 1048576).toFixed(2);
@@ -80,7 +168,9 @@ const path = require('path');
         console.warn('WARNING: proxy-auth.js exceeds 3 MB — check for bundle bloat!');
     }
     console.info(`✓ Written to: ${distOutDir}/`);
+    console.info(`✓ Dev copy:   ${srcAssetsDir}/`);
 
     console.info('\n🎉 Elements created successfully!');
     console.info(`   • ${distOutDir}/proxy-auth.js → LATEST BUILD (${sizeMB} MB)`);
+    console.info(`   • ${srcAssetsDir}/proxy-auth.js → DEV SERVER COPY`);
 })();
diff --git a/apps/36-blocks-widget/src/app/app.component.ts b/apps/36-blocks-widget/src/app/app.component.ts
index 2e98ea84..5269e5ec 100644
--- a/apps/36-blocks-widget/src/app/app.component.ts
+++ b/apps/36-blocks-widget/src/app/app.component.ts
@@ -7,9 +7,9 @@ import { WidgetThemeService } from './otp/service/widget-theme.service';
 
 const REFERENCE_ID = '4512365o177529298869d0d23cc0453';
 const THEME: WidgetTheme = WidgetTheme.System;
-const TYPE: PublicScriptType = PublicScriptType.UserProfile;
+const TYPE: PublicScriptType = PublicScriptType.UserManagement;
 const AUTH_TOKEN =
-    'ZDZCVkV3SjltT0s4S0lxMWc2cnFVZ0lDU2hhVXRvdG1jckx4VHdrZXg2bXZ1dmVjb2FoSzY1VzJYK0J1eXAyZEQ3M2VzclBWckFVQ1ozbFZ3bWU3NE5GekpMOVRwSU92Ylp2SFYzaVRzQ1J0VXM0T3pEY3JyMUNPVG14TGF3cHVKQ2lHd0NPc1BzOEplcm15NEZEckJTN2tFakdVNmF2WTBNL2l4VjdrSnk1azJLTnZtVEhDa3Q1QzkvczlQalpzVEJsNCt1TlBSSWEvbzFqand0Y2pwZz09';
+    'cmtQRzJ4KzBwajJ4QS9vOVFMR1ZmamxLaGFGazlRcnpiOUM4NFhPWXdDZkRDV293T0VWV0tFV1NFbVlmVTE2WkRsUHFVUk5ybHREUHk2VjdLM2FDNFcybDF6MjJnOFY5MjNZTVdQVVVWVWVJTDJHakNHNFRadVJwWDRmUVZrakVCNVVTdGZhSVRadmlYVEZTS1FJZTl2cSsycUpaQVpCZ2JyYmoxVVBPYTI0bXpBLy9lUkozTTJTVU9XWUl6VjI4a3ZyVGlOajVmczkvK0VNc3hXa3Mzdz09';
 
 @Component({
     selector: 'proxy-root',
diff --git a/apps/36-blocks-widget/src/app/otp/component/register/register.component.scss b/apps/36-blocks-widget/src/app/otp/component/register/register.component.scss
index b5f52a47..f026f5ee 100644
--- a/apps/36-blocks-widget/src/app/otp/component/register/register.component.scss
+++ b/apps/36-blocks-widget/src/app/otp/component/register/register.component.scss
@@ -27,37 +27,3 @@
     outline: 2px solid var(--proxy-error-40);
     outline-offset: -1px;
 }
-
-/* Dark mode — .dark class is on the dialog portal ancestor */
-:host-context(.dark) ::ng-deep .iti .iti__country-list {
-    background-color: #1f2937;
-    border-color: #374151;
-    color: #f9fafb;
-}
-
-:host-context(.dark) ::ng-deep .iti__country {
-    color: #f9fafb !important;
-}
-
-:host-context(.dark) ::ng-deep .iti__country:hover,
-:host-context(.dark) ::ng-deep .iti__country.iti__highlight {
-    background-color: #312e81 !important;
-}
-
-:host-context(.dark) ::ng-deep .iti__dial-code {
-    color: #9ca3af;
-}
-
-:host-context(.dark) ::ng-deep .iti__divider {
-    border-bottom-color: #374151;
-}
-
-:host-context(.dark) ::ng-deep .iti__selected-flag:hover,
-:host-context(.dark) ::ng-deep .iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag {
-    background-color: rgba(255, 255, 255, 0.08);
-}
-
-:host-context(.dark) ::ng-deep input[type='tel'] {
-    color: #f9fafb;
-    background-color: transparent;
-}
diff --git a/apps/36-blocks-widget/src/app/otp/organization-details/organization-details.component.html b/apps/36-blocks-widget/src/app/otp/organization-details/organization-details.component.html
index 7e37d9c9..a2b72ea9 100644
--- a/apps/36-blocks-widget/src/app/otp/organization-details/organization-details.component.html
+++ b/apps/36-blocks-widget/src/app/otp/organization-details/organization-details.component.html
@@ -191,10 +191,11 @@ <h2 id="org-edit-dialog-title" class="w-dialog-title">Edit Organization</h2>
                                 </p>
                             } @else if (
                                 organizationForm.get('companyName')?.touched &&
-                                organizationForm.get('companyName')?.hasError('minlength')
+                                organizationForm.get('companyName')?.hasError('pattern')
                             ) {
                                 <p id="org-company-name-error" role="alert" class="w-field-error">
-                                    Company name must be at least 3 characters.
+                                    Company name must start with a letter or number and contain only letters, numbers,
+                                    underscores, or spaces.
                                 </p>
                             }
                         </div>
diff --git a/apps/36-blocks-widget/src/app/otp/organization-details/organization-details.component.scss b/apps/36-blocks-widget/src/app/otp/organization-details/organization-details.component.scss
index 8edd9a5c..e0383f32 100644
--- a/apps/36-blocks-widget/src/app/otp/organization-details/organization-details.component.scss
+++ b/apps/36-blocks-widget/src/app/otp/organization-details/organization-details.component.scss
@@ -1,5 +1,6 @@
 @use 'tailwindcss';
 @use '../../../assets/scss/widget-ui' as *;
+@use '../../../assets/scss/shadow-reset';
 @custom-variant dark (&:where(.dark, .dark *));
 
 :host {
diff --git a/apps/36-blocks-widget/src/app/otp/organization-details/organization-details.component.ts b/apps/36-blocks-widget/src/app/otp/organization-details/organization-details.component.ts
index 9f924943..bb994cda 100644
--- a/apps/36-blocks-widget/src/app/otp/organization-details/organization-details.component.ts
+++ b/apps/36-blocks-widget/src/app/otp/organization-details/organization-details.component.ts
@@ -25,7 +25,7 @@ import { BaseComponent } from 'libs/ui/base-component/src/lib/base-component/bas
 import { OtpService } from '../service/otp.service';
 import { WidgetThemeService } from '../service/widget-theme.service';
 import { finalize, takeUntil } from 'rxjs';
-import { EMAIL_REGEX } from '@proxy/regex';
+import { COMPANY_NAME_REGEX, EMAIL_REGEX } from '@proxy/regex';
 
 @Component({
     selector: 'organization-details',
@@ -43,7 +43,7 @@ export class OrganizationDetailsComponent extends BaseComponent implements OnIni
     readonly isDark = computed(() => this.themeService.isDark$());
 
     public organizationForm = new FormGroup({
-        companyName: new FormControl<string>('', [Validators.required, Validators.minLength(3)]),
+        companyName: new FormControl<string>('', [Validators.required, Validators.pattern(COMPANY_NAME_REGEX)]),
         email: new FormControl<string>('', [Validators.required, Validators.pattern(EMAIL_REGEX)]),
         phoneNumber: new FormControl<string>('', [Validators.pattern(/^$|^[0-9]{10,15}$/)]),
         timezone: new FormControl<string>(''),
diff --git a/apps/36-blocks-widget/src/app/otp/user-management/add-user-dialog.component.ts b/apps/36-blocks-widget/src/app/otp/user-management/add-user-dialog.component.ts
index cc0396c7..d872b2da 100644
--- a/apps/36-blocks-widget/src/app/otp/user-management/add-user-dialog.component.ts
+++ b/apps/36-blocks-widget/src/app/otp/user-management/add-user-dialog.component.ts
@@ -21,6 +21,7 @@ import { WidgetTheme } from '@proxy/constant';
 import { WidgetDialogRef } from '../service/widget-dialog.service';
 import { ToastService } from '../service/toast.service';
 import { ToastComponent } from '../service/toast.component';
+import { NAME_REGEX } from '@proxy/regex';
 
 /**
  * Standalone Add-User dialog.
@@ -179,7 +180,7 @@ export class AddUserDialogComponent implements OnInit, OnDestroy {
 
     ngOnInit(): void {
         this.form = this.fb.group({
-            name: ['', [Validators.required, Validators.pattern(/^[\p{L}\s'-]+$/u)]],
+            name: ['', [Validators.required, Validators.pattern(NAME_REGEX)]],
             email: ['', [Validators.required, Validators.email]],
             mobileNumber: ['', [Validators.pattern(/^(\+?[1-9]\d{1,14}|[0-9]{10})$/)]],
             role: [''],
diff --git a/apps/36-blocks-widget/src/app/otp/user-management/user-management.component.html b/apps/36-blocks-widget/src/app/otp/user-management/user-management.component.html
index 6aeed9cd..f8752656 100644
--- a/apps/36-blocks-widget/src/app/otp/user-management/user-management.component.html
+++ b/apps/36-blocks-widget/src/app/otp/user-management/user-management.component.html
@@ -836,6 +836,12 @@ <h2 id="dialog-title" class="w-dialog-title">
                                         addUserForm.get('name')?.hasError('required')
                                     ) {
                                         <p id="user-name-error" role="alert" class="w-field-error">Name is required</p>
+                                    } @else if (
+                                        addUserForm.get('name')?.touched && addUserForm.get('name')?.hasError('pattern')
+                                    ) {
+                                        <p id="user-name-error" role="alert" class="w-field-error">
+                                            Invalid name format.
+                                        </p>
                                     }
                                 </div>
                                 <div>
diff --git a/apps/36-blocks-widget/src/app/otp/user-management/user-management.component.scss b/apps/36-blocks-widget/src/app/otp/user-management/user-management.component.scss
index 74c4d6e4..18b9a3ba 100644
--- a/apps/36-blocks-widget/src/app/otp/user-management/user-management.component.scss
+++ b/apps/36-blocks-widget/src/app/otp/user-management/user-management.component.scss
@@ -1,5 +1,6 @@
 @use 'tailwindcss';
 @use '../../../assets/scss/widget-ui' as *;
+@use '../../../assets/scss/shadow-reset';
 @custom-variant dark (&:where(.dark, .dark *));
 
 :host {
diff --git a/apps/36-blocks-widget/src/app/otp/user-management/user-management.component.ts b/apps/36-blocks-widget/src/app/otp/user-management/user-management.component.ts
index e2c4985b..99913dbd 100644
--- a/apps/36-blocks-widget/src/app/otp/user-management/user-management.component.ts
+++ b/apps/36-blocks-widget/src/app/otp/user-management/user-management.component.ts
@@ -21,6 +21,7 @@ import { CommonModule } from '@angular/common';
 import { ToastService } from '../service/toast.service';
 import { ToastComponent } from '../service/toast.component';
 import { WidgetTheme } from '@proxy/constant';
+import { NAME_REGEX } from '@proxy/regex';
 import { FormsModule, ReactiveFormsModule, FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { Actions, ofType } from '@ngrx/effects';
@@ -41,6 +42,7 @@ import {
     updateRoleData,
     updateUserPermissionData,
     updateUserRoleData,
+    deleteUserData,
 } from '../store/selectors';
 import { isEqual } from 'lodash-es';
 import { WidgetThemeService } from '../service/widget-theme.service';
@@ -275,6 +277,17 @@ export class UserManagementComponent implements OnInit, AfterViewInit, OnDestroy
                 }
             });
 
+        this.store
+            .pipe(select(deleteUserData), distinctUntilChanged(isEqual), takeUntilDestroyed(this.destroyRef))
+            .subscribe((res) => {
+                if (res) {
+                    this.getCompanyUsers();
+                    const message = res?.data?.message || res?.message || 'User removed successfully.';
+                    this.toastService.success(message);
+                    this.cdr.markForCheck();
+                }
+            });
+
         this.actions$
             .pipe(
                 ofType(
@@ -285,7 +298,8 @@ export class UserManagementComponent implements OnInit, AfterViewInit, OnDestroy
                     otpActions.addUserError,
                     otpActions.updateCompanyUserError,
                     otpActions.updateUserRoleError,
-                    otpActions.updateUserPermissionError
+                    otpActions.updateUserPermissionError,
+                    otpActions.deleteUserError
                 ),
                 takeUntilDestroyed(this.destroyRef)
             )
@@ -309,7 +323,7 @@ export class UserManagementComponent implements OnInit, AfterViewInit, OnDestroy
             });
 
         this.addUserForm = this.fb.group({
-            name: ['', Validators.required],
+            name: ['', [Validators.required, Validators.pattern(NAME_REGEX)]],
             email: ['', [Validators.required, Validators.email]],
             mobileNumber: ['', [Validators.pattern(/^(\+?[1-9]\d{1,14}|[0-9]{10})$/)]],
             role: [''],
@@ -399,8 +413,6 @@ export class UserManagementComponent implements OnInit, AfterViewInit, OnDestroy
     public confirmDelete(): void {
         if (this.pendingDeleteUser) {
             const userId = (this.pendingDeleteUser as any).user_id;
-            this.userData = this.userData.filter((u: any) => u.user_id !== userId);
-            this.totalUsers = Math.max(0, this.totalUsers - 1);
             this.store.dispatch(otpActions.deleteUser({ companyId: userId, authToken: this.userToken() }));
         }
         this.cancelDelete();
diff --git a/apps/36-blocks-widget/src/app/otp/user-profile/user-profile.component.html b/apps/36-blocks-widget/src/app/otp/user-profile/user-profile.component.html
index f81f7434..c4000eb4 100644
--- a/apps/36-blocks-widget/src/app/otp/user-profile/user-profile.component.html
+++ b/apps/36-blocks-widget/src/app/otp/user-profile/user-profile.component.html
@@ -257,7 +257,7 @@ <h2 class="text-sm font-semibold text-gray-900 dark:text-white">Organizations</h
                                     (click)="openModal(org?.id)"
                                     class="w-btn-danger-sm opacity-0 group-hover:opacity-100 transition-opacity duration-150"
                                 >
-                                    ↗ Leave
+                                    Leave
                                 </button>
                             }
                         </div>
diff --git a/apps/36-blocks-widget/src/app/otp/user-profile/user-profile.component.scss b/apps/36-blocks-widget/src/app/otp/user-profile/user-profile.component.scss
index 8edd9a5c..e0383f32 100644
--- a/apps/36-blocks-widget/src/app/otp/user-profile/user-profile.component.scss
+++ b/apps/36-blocks-widget/src/app/otp/user-profile/user-profile.component.scss
@@ -1,5 +1,6 @@
 @use 'tailwindcss';
 @use '../../../assets/scss/widget-ui' as *;
+@use '../../../assets/scss/shadow-reset';
 @custom-variant dark (&:where(.dark, .dark *));
 
 :host {
diff --git a/apps/36-blocks-widget/src/app/otp/user-profile/user-profile.component.ts b/apps/36-blocks-widget/src/app/otp/user-profile/user-profile.component.ts
index 6476598b..8b67f0de 100644
--- a/apps/36-blocks-widget/src/app/otp/user-profile/user-profile.component.ts
+++ b/apps/36-blocks-widget/src/app/otp/user-profile/user-profile.component.ts
@@ -24,8 +24,9 @@ import { ConfirmDialogComponent } from '../ui/confirm-dialog.component';
 import { FormControl, FormGroup, Validators } from '@angular/forms';
 import { BehaviorSubject, distinctUntilChanged, map, Observable, takeUntil, take, filter, skip } from 'rxjs';
 import { IAppState } from '../store/app.state';
+import { Actions, ofType } from '@ngrx/effects';
 import { select, Store } from '@ngrx/store';
-import { getUserDetails, leaveCompany, updateUser } from '../store/actions/otp.action';
+import { getUserDetails, leaveCompany, leaveCompanyError, updateUser } from '../store/actions/otp.action';
 import {
     error,
     getUserProfileData,
@@ -35,7 +36,7 @@ import {
 } from '../store/selectors';
 import { BaseComponent } from '@proxy/ui/base-component';
 import { isEqual } from 'lodash-es';
-import { UPDATE_REGEX } from '@proxy/regex';
+import { NAME_REGEX } from '@proxy/regex';
 import { WidgetTheme } from '@proxy/constant';
 import { WidgetThemeService } from '../service/widget-theme.service';
 @Component({
@@ -87,7 +88,7 @@ export class UserProfileComponent extends BaseComponent implements OnInit, After
     // authToken: string = '';
 
     clientForm = new FormGroup({
-        name: new FormControl('', [Validators.required, Validators.pattern(UPDATE_REGEX)]),
+        name: new FormControl('', [Validators.required, Validators.pattern(NAME_REGEX)]),
         mobile: new FormControl({ value: '', disabled: true }),
         email: new FormControl({ value: '', disabled: true }),
     });
@@ -95,6 +96,7 @@ export class UserProfileComponent extends BaseComponent implements OnInit, After
     public readonly isEditing = signal(false);
 
     private store = inject<Store<IAppState>>(Store);
+    private readonly actions$ = inject(Actions);
     readonly toastService = inject(ToastService);
     private readonly widgetPortal = inject(WidgetPortalService);
     private readonly cdr = inject(ChangeDetectorRef);
@@ -182,18 +184,33 @@ export class UserProfileComponent extends BaseComponent implements OnInit, After
     }
 
     confirmLeave(): void {
+        const companyId = this.confirmDialogCompanyId();
         this.confirmDialogPortalRef?.detach();
         this.confirmDialogPortalRef = null;
-        const companyId = this.confirmDialogCompanyId();
-        this.confirmDialogCompanyId.set(null);
         if (!companyId) return;
-        this.store.dispatch(leaveCompany({ companyId, authToken: this.authToken() }));
-        this.deleteCompany$.pipe(filter(Boolean), take(1)).subscribe((res) => {
-            if (res) {
+
+        this.actions$
+            .pipe(ofType(leaveCompanyError), take(1), takeUntil(this.destroy$))
+            .subscribe(({ errorResponse }) => {
+                const errorMessage =
+                    errorResponse?.error?.errors?.message ||
+                    errorResponse?.error?.data?.message ||
+                    errorResponse?.error?.message ||
+                    errorResponse?.errors?.message ||
+                    errorResponse?.data?.message ||
+                    errorResponse?.message ||
+                    'Failed to leave the organisation.';
+                this.toastService.error(errorMessage);
+            });
+
+        this.deleteCompany$.pipe(filter(Boolean), take(1)).subscribe((response) => {
+            if (response) {
                 window.parent.postMessage({ type: 'proxy', data: { event: 'userLeftCompany', companyId } }, '*');
                 this.store.dispatch(getUserDetails({ request: this.authToken() }));
             }
         });
+
+        this.store.dispatch(leaveCompany({ companyId, authToken: this.authToken() }));
     }
 
     public openEditDialog(): void {
diff --git a/apps/36-blocks-widget/src/app/otp/widget/widget.component.scss b/apps/36-blocks-widget/src/app/otp/widget/widget.component.scss
index 0a1c3665..5e827d5d 100644
--- a/apps/36-blocks-widget/src/app/otp/widget/widget.component.scss
+++ b/apps/36-blocks-widget/src/app/otp/widget/widget.component.scss
@@ -1,5 +1,6 @@
 @use 'intl-tel-input/build/css/intlTelInput.css';
 @use 'tailwindcss';
+@use '../../../assets/scss/shadow-reset';
 @source not inline("group-[aria-current=page]:text-indigo-600");
 @custom-variant dark (&:where(.dark, .dark *));
 
diff --git a/apps/36-blocks-widget/src/app/otp/widget/widget.component.ts b/apps/36-blocks-widget/src/app/otp/widget/widget.component.ts
index 349592d3..b449f59d 100644
--- a/apps/36-blocks-widget/src/app/otp/widget/widget.component.ts
+++ b/apps/36-blocks-widget/src/app/otp/widget/widget.component.ts
@@ -1254,6 +1254,8 @@ export class ProxyAuthWidgetComponent extends BaseComponent implements OnInit, O
             setTimeout(() => {
                 this.appendCreateAccountText(element);
             }, 100);
+
+            this.reapplyInjectedButtonTheme(this.themeService.isDark$());
         }
     }
 
@@ -1498,7 +1500,7 @@ export class ProxyAuthWidgetComponent extends BaseComponent implements OnInit, O
 
         // Powered by footer
         const poweredBy: HTMLParagraphElement = this.renderer.createElement('a');
-        poweredBy.setAttribute('href', 'https://proxy.msg91.com');
+        poweredBy.setAttribute('href', 'https://36blocks.com');
         poweredBy.setAttribute('target', '_blank');
         poweredBy.setAttribute('rel', 'noopener noreferrer');
         poweredBy.setAttribute('data-powered-by', 'true');
@@ -1686,7 +1688,10 @@ export class ProxyAuthWidgetComponent extends BaseComponent implements OnInit, O
     }
 
     private reapplyInjectedButtonTheme(dark: boolean): void {
-        const container = this.referenceElement;
+        const container =
+            this.type === PublicScriptType.Authorization
+                ? (this.buttonContainerEl?.nativeElement ?? null)
+                : (this.referenceElement ?? null);
         if (!container) return;
 
         const selectWidgetTheme = this.widgetTheme() as any;
diff --git a/apps/36-blocks-widget/src/assets/scss/_shadow-reset.scss b/apps/36-blocks-widget/src/assets/scss/_shadow-reset.scss
new file mode 100644
index 00000000..15cc49ef
--- /dev/null
+++ b/apps/36-blocks-widget/src/assets/scss/_shadow-reset.scss
@@ -0,0 +1,12 @@
+// Shadow DOM universal reset — import this in every component that uses
+// ViewEncapsulation.ShadowDom or ShadowDom-scoped styles.
+// This selector is fully encapsulated: it cannot affect anything outside
+// the component's shadow root.
+*,
+*::before,
+*::after {
+    font-family: Inter, ui-sans-serif, system-ui, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    box-sizing: border-box;
+}
diff --git a/apps/36-blocks-widget/src/environments/environment.stage.ts b/apps/36-blocks-widget/src/environments/environment.stage.ts
index 8426ed43..a5261f30 100644
--- a/apps/36-blocks-widget/src/environments/environment.stage.ts
+++ b/apps/36-blocks-widget/src/environments/environment.stage.ts
@@ -4,7 +4,7 @@ export const environment = {
     production: true,
     env: 'prod',
     apiUrl: 'https://routes.msg91.com/api',
-    baseUrl: 'https://proxy.msg91.com',
+    baseUrl: 'https://36blocks.com',
     msgMidProxy: '',
     ...envVariables,
 };
diff --git a/apps/36-blocks-widget/src/main.ts b/apps/36-blocks-widget/src/main.ts
index 3ec68ed5..efe4f75d 100644
--- a/apps/36-blocks-widget/src/main.ts
+++ b/apps/36-blocks-widget/src/main.ts
@@ -22,58 +22,51 @@ import { environment } from './environments/environment';
 // Side-effect import — registers window.initVerification, showUserManagement, hideUserManagement
 import './app/init-verification';
 
-// Double-load protection — prevents duplicate Angular app if script is loaded twice
-if ((window as any).__proxyAuthLoaded) {
-    console.warn('[36Blocks] Script already loaded — skipping bootstrap.');
-} else {
-    (window as any).__proxyAuthLoaded = true;
-
-    createApplication({
-        providers: [
-            provideZoneChangeDetection({ eventCoalescing: true }),
-            provideHttpClient(),
-            provideAnimations(),
-            provideStore(reducers, {
-                runtimeChecks: {
-                    strictStateImmutability: true,
-                    strictActionImmutability: true,
-                },
-            }),
-            provideEffects([OtpEffects]),
-            ...(!environment.production ? [provideStoreDevtools({ maxAge: 25, serialize: true })] : []),
-            // ng-hcaptcha may not expose standalone providers — use importProvidersFrom as safe fallback
-            importProvidersFrom(NgHcaptchaModule.forRoot({ siteKey: environment.hCaptchaSiteKey })),
-            OtpService,
-            OtpUtilityService,
-            OtpWidgetService,
-            WidgetThemeService,
-            { provide: ProxyBaseUrls.Env, useValue: environment.env },
-            {
-                provide: ProxyBaseUrls.BaseURL,
-                useValue: environment.apiUrl + environment.msgMidProxy,
-            },
-            {
-                provide: ProxyBaseUrls.ClientURL,
-                useValue: environment.apiUrl + environment.msgMidProxy,
+createApplication({
+    providers: [
+        provideZoneChangeDetection({ eventCoalescing: true }),
+        provideHttpClient(),
+        provideAnimations(),
+        provideStore(reducers, {
+            runtimeChecks: {
+                strictStateImmutability: true,
+                strictActionImmutability: true,
             },
-        ],
-    }).then((appRef) => {
-        const injector = appRef.injector;
-        try {
-            if (!customElements.get('proxy-auth')) {
-                const el = createCustomElement(ProxyAuthWidgetComponent, { injector });
-                customElements.define('proxy-auth', el);
-            }
-        } catch (e) {
-            console.warn('[36Blocks] Custom element registration failed:', e);
+        }),
+        provideEffects([OtpEffects]),
+        ...(!environment.production ? [provideStoreDevtools({ maxAge: 25, serialize: true })] : []),
+        // ng-hcaptcha may not expose standalone providers — use importProvidersFrom as safe fallback
+        importProvidersFrom(NgHcaptchaModule.forRoot({ siteKey: environment.hCaptchaSiteKey })),
+        OtpService,
+        OtpUtilityService,
+        OtpWidgetService,
+        WidgetThemeService,
+        { provide: ProxyBaseUrls.Env, useValue: environment.env },
+        {
+            provide: ProxyBaseUrls.BaseURL,
+            useValue: environment.apiUrl + environment.msgMidProxy,
+        },
+        {
+            provide: ProxyBaseUrls.ClientURL,
+            useValue: environment.apiUrl + environment.msgMidProxy,
+        },
+    ],
+}).then((appRef) => {
+    const injector = appRef.injector;
+    try {
+        if (!customElements.get('proxy-auth')) {
+            const el = createCustomElement(ProxyAuthWidgetComponent, { injector });
+            customElements.define('proxy-auth', el);
         }
+    } catch (e) {
+        console.warn('[36Blocks] Custom element registration failed:', e);
+    }
 
-        // Eagerly instantiate UserManagementBridgeService so its constructor runs
-        // immediately after bootstrap. This registers the window event listener for
-        // WidgetEvent.OpenInviteMemberDialog and drains any events that were buffered
-        // in window.__proxyAuth.pendingDialogEvents before Angular bootstrapped.
-        // Without this, the service is created lazily only when UserManagementComponent
-        // is first mounted, causing the event to be silently swallowed.
-        injector.get(UserManagementBridgeService);
-    });
-}
+    // Eagerly instantiate UserManagementBridgeService so its constructor runs
+    // immediately after bootstrap. This registers the window event listener for
+    // WidgetEvent.OpenInviteMemberDialog and drains any events that were buffered
+    // in window.__proxyAuth.pendingDialogEvents before Angular bootstrapped.
+    // Without this, the service is created lazily only when UserManagementComponent
+    // is first mounted, causing the event to be silently swallowed.
+    injector.get(UserManagementBridgeService);
+});
diff --git a/apps/36-blocks-widget/src/styles.scss b/apps/36-blocks-widget/src/styles.scss
index 176a914e..f2df191a 100644
--- a/apps/36-blocks-widget/src/styles.scss
+++ b/apps/36-blocks-widget/src/styles.scss
@@ -49,10 +49,3 @@ body {
         }
     }
 }
-
-*,
-proxy-auth,
-.iti__country-list {
-    font-family: 'Inter', sans-serif;
-    -webkit-font-smoothing: antialiased;
-}
diff --git a/apps/36-blocks/src/app/panel/dashboard/breakdown-chart/breakdown-chart.component.html b/apps/36-blocks/src/app/panel/dashboard/breakdown-chart/breakdown-chart.component.html
new file mode 100644
index 00000000..c0d4e59a
--- /dev/null
+++ b/apps/36-blocks/src/app/panel/dashboard/breakdown-chart/breakdown-chart.component.html
@@ -0,0 +1,76 @@
+<div class="rounded-2xl bg-color shadow-sm p-5 flex flex-col gap-2 relative">
+    <!-- Card Header -->
+    <div class="flex items-center justify-between">
+        <div class="flex items-center gap-1">
+            <span class="text-base font-bold">Breakdown</span>
+            <mat-icon
+                class="mat-icon-16 text-gray-400 cursor-default"
+                [matTooltip]="infoTooltip"
+                matTooltipPosition="above"
+                >info_outline</mat-icon
+            >
+        </div>
+        <button mat-icon-button class="w-7 h-7 leading-7" (click)="openExpand()" matTooltip="Expand">
+            <mat-icon class="mat-icon-16 text-gray-400">open_in_full</mat-icon>
+        </button>
+    </div>
+
+    <!-- Loading Skeleton -->
+    @if (isLoading()) {
+        <div class="animate-pulse flex flex-col gap-3 mt-2">
+            <div class="h-48 rounded bg-gray-100"></div>
+        </div>
+    }
+
+    <!-- Error -->
+    @if (error()) {
+        <div class="flex items-center gap-2 text-red-500 text-sm">
+            <mat-icon class="mat-icon-18">error_outline</mat-icon>
+            {{ error() }}
+        </div>
+    }
+
+    <!-- Pie Chart -->
+    @if (!isLoading() && !error()) {
+        @if (chartData().length) {
+            <div #chartEl class="!h-60 !w-full"></div>
+            <div class="flex justify-end mt-1 xl:absolute top-[40%] right-[10%]">
+                <mat-form-field class="no-padding w-32">
+                    <mat-select [value]="selectedGroupBy()" (valueChange)="onGroupByChange($event)">
+                        @for (opt of groupByOptions; track opt.value) {
+                            <mat-option [value]="opt.value">{{ opt.label }}</mat-option>
+                        }
+                    </mat-select>
+                </mat-form-field>
+            </div>
+        } @else {
+            <div class="flex flex-col items-center justify-center h-48 gap-2 text-gray-400">
+                <mat-icon class="w-10 h-10 opacity-30" style="font-size: 40px">pie_chart</mat-icon>
+                <span class="text-sm">No data for this period</span>
+            </div>
+            <div class="flex justify-end mt-1">
+                <mat-form-field class="no-padding w-32">
+                    <mat-select [value]="selectedGroupBy()" (valueChange)="onGroupByChange($event)">
+                        @for (opt of groupByOptions; track opt.value) {
+                            <mat-option [value]="opt.value">{{ opt.label }}</mat-option>
+                        }
+                    </mat-select>
+                </mat-form-field>
+            </div>
+        }
+    }
+</div>
+
+<ng-template #expandTpl>
+    <div class="flex items-center justify-between px-6 pt-5 pb-2">
+        <span class="text-base font-semibold">
+            Breakdown — {{ groupByOptions.find(o => o.value === selectedGroupBy())?.label ?? '' }}
+        </span>
+        <button mat-icon-button (click)="closeExpand()">
+            <mat-icon>close</mat-icon>
+        </button>
+    </div>
+    <div class="px-6 pb-6">
+        <div data-expand-chart="breakdown" style="height: 460px; width: 100%"></div>
+    </div>
+</ng-template>
diff --git a/apps/36-blocks/src/app/panel/dashboard/breakdown-chart/breakdown-chart.component.ts b/apps/36-blocks/src/app/panel/dashboard/breakdown-chart/breakdown-chart.component.ts
new file mode 100644
index 00000000..5524ee99
--- /dev/null
+++ b/apps/36-blocks/src/app/panel/dashboard/breakdown-chart/breakdown-chart.component.ts
@@ -0,0 +1,194 @@
+import {
+    ChangeDetectionStrategy,
+    Component,
+    ElementRef,
+    OnDestroy,
+    TemplateRef,
+    ViewChild,
+    effect,
+    inject,
+    input,
+    signal,
+} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatIconModule } from '@angular/material/icon';
+import { MatSelectModule } from '@angular/material/select';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { FormsModule } from '@angular/forms';
+import { BaseComponent } from '@proxy/ui/base-component';
+import { AnalyticsService } from '@proxy/services/proxy/analytics';
+import { takeUntil } from 'rxjs';
+import * as echarts from 'echarts';
+import { MatButtonModule } from '@angular/material/button';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatDialog, MatDialogRef } from '@angular/material/dialog';
+import { INFO_TOOLTIPS } from '@proxy/constant';
+import {
+    BreakdownGroupBy,
+    IBreakdownGroupByOption,
+    IBreakdownParams,
+    GROUP_BY_OPTIONS,
+    TimeseriesInterval,
+    intervalForRange,
+} from '../dashboard.models';
+
+@Component({
+    selector: 'breakdown-chart',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    imports: [
+        CommonModule,
+        MatIconModule,
+        MatSelectModule,
+        MatFormFieldModule,
+        FormsModule,
+        MatButtonModule,
+        MatTooltipModule,
+    ],
+    templateUrl: './breakdown-chart.component.html',
+})
+export class BreakdownChartComponent extends BaseComponent implements OnDestroy {
+    readonly infoTooltip = INFO_TOOLTIPS.dashboard.charts.breakdown;
+    @ViewChild('chartEl', { static: false }) chartEl!: ElementRef<HTMLDivElement>;
+    @ViewChild('expandTpl', { static: false }) expandTpl!: TemplateRef<any>;
+
+    range = input<string>('week');
+    featureConfigurationId = input<number | null>(null);
+
+    private analyticsService = inject(AnalyticsService);
+    private dialog = inject(MatDialog);
+    private expandDialogRef: MatDialogRef<any> | null = null;
+    private chart: echarts.ECharts | null = null;
+    private themeObserver: MutationObserver | null = null;
+
+    readonly isLoading = signal(false);
+    readonly error = signal<string | null>(null);
+    readonly chartData = signal<{ key: string; count: number }[]>([]);
+
+    selectedGroupBy = signal<BreakdownGroupBy>(BreakdownGroupBy.type);
+    selectedInterval = signal<TimeseriesInterval>(TimeseriesInterval.day);
+
+    readonly groupByOptions: IBreakdownGroupByOption[] = GROUP_BY_OPTIONS;
+
+    readonly palette = ['#6366f1', '#8b5cf6', '#06b6d4', '#10b981', '#f59e0b', '#ef4444'];
+
+    constructor() {
+        super();
+        this.watchTheme();
+        effect(() => {
+            const range = this.range();
+            const interval = intervalForRange(range);
+            this.selectedInterval.set(interval);
+            const params: IBreakdownParams = {
+                range: range as any,
+                group_by: this.selectedGroupBy(),
+                interval,
+            };
+            const fcId = this.featureConfigurationId();
+            if (fcId) params.feature_configuration_id = fcId;
+            this.fetchBreakdown(params);
+        });
+    }
+
+    fetchBreakdown(params: IBreakdownParams): void {
+        this.isLoading.set(true);
+        this.error.set(null);
+        this.chartData.set([]);
+
+        this.analyticsService
+            .getBreakdown(params)
+            .pipe(takeUntil(this.destroy$))
+            .subscribe({
+                next: (res: any) => {
+                    const data = res?.data?.data ?? [];
+                    this.chartData.set(data);
+                    this.isLoading.set(false);
+                    setTimeout(() => this.renderChart(), 0);
+                },
+                error: (err: any) => {
+                    this.error.set(err?.message ?? 'Failed to load breakdown');
+                    this.isLoading.set(false);
+                },
+            });
+    }
+
+    onGroupByChange(value: BreakdownGroupBy): void {
+        this.selectedGroupBy.set(value);
+    }
+
+    closeExpand(): void {
+        this.expandDialogRef?.close();
+    }
+
+    openExpand(): void {
+        const ref = (this.expandDialogRef = this.dialog.open(this.expandTpl, {
+            panelClass: ['mat-dialog', 'mat-dialog-lg'],
+        }));
+        ref.afterOpened().subscribe(() => {
+            const el = document.querySelector('[data-expand-chart="breakdown"]') as HTMLDivElement;
+            if (!el) return;
+            const expandChart = echarts.init(el);
+            expandChart.setOption(this.getPieOption({ expanded: true }));
+            ref.afterClosed().subscribe(() => expandChart.dispose());
+        });
+    }
+
+    private getCssVar(name: string): string {
+        return getComputedStyle(this.chartEl.nativeElement).getPropertyValue(name).trim();
+    }
+
+    private watchTheme(): void {
+        this.themeObserver?.disconnect();
+        this.themeObserver = new MutationObserver(() => {
+            if (this.chartData().length) this.renderChart();
+        });
+        this.themeObserver.observe(document.body, { attributes: true, attributeFilter: ['class'] });
+    }
+
+    private getPieOption(opts: { expanded?: boolean } = {}): any {
+        const borderColor = this.chartEl?.nativeElement ? this.getCssVar('--color-common-border') : '';
+        const textColor = this.chartEl?.nativeElement ? this.getCssVar('--color-common-text') : '';
+        const bgColor = this.chartEl?.nativeElement ? this.getCssVar('--color-common-bg') : '';
+        return {
+            backgroundColor: 'transparent',
+            tooltip: {
+                trigger: 'item',
+                formatter: '{b}: {c} ({d}%)',
+                ...(bgColor ? { backgroundColor: bgColor, borderColor, textStyle: { color: textColor } } : {}),
+            },
+            legend: {
+                bottom: 0,
+                left: 'center',
+                textStyle: { fontSize: opts.expanded ? 12 : 11, color: textColor || undefined },
+            },
+            series: [
+                {
+                    type: 'pie',
+                    radius: opts.expanded ? ['38%', '65%'] : ['40%', '70%'],
+                    center: ['50%', '45%'],
+                    data: this.chartData().map((d, i) => ({
+                        name: d.key,
+                        value: d.count,
+                        itemStyle: { color: this.palette[i % this.palette.length] },
+                    })),
+                    label: opts.expanded ? { show: true, formatter: '{b}\n{d}%', fontSize: 12 } : { show: false },
+                    emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0,0,0,0.2)' } },
+                },
+            ],
+        };
+    }
+
+    private renderChart(): void {
+        if (!this.chartEl?.nativeElement) return;
+        if (this.chart) {
+            this.chart.dispose();
+        }
+        this.chart = echarts.init(this.chartEl.nativeElement);
+        this.chart.setOption(this.getPieOption());
+    }
+
+    override ngOnDestroy(): void {
+        this.themeObserver?.disconnect();
+        this.chart?.dispose();
+        super.ngOnDestroy();
+    }
+}
diff --git a/apps/36-blocks/src/app/panel/dashboard/dashboard.component.html b/apps/36-blocks/src/app/panel/dashboard/dashboard.component.html
index cd3446a2..e17631c1 100644
--- a/apps/36-blocks/src/app/panel/dashboard/dashboard.component.html
+++ b/apps/36-blocks/src/app/panel/dashboard/dashboard.component.html
@@ -1,32 +1,94 @@
-<div class="coming-soon-container flex flex-1 w-full items-center justify-center min-h-[calc(100vh-64px)] p-10">
-    <div class="coming-soon-content text-center max-w-[600px]">
-        <div class="icon-wrapper inline-flex items-center justify-center w-[120px] h-[120px] rounded-full mb-8">
-            <mat-icon class="coming-soon-icon">rocket_launch</mat-icon>
+<div class="flex flex-col gap-5 h-full">
+    <!-- Header -->
+    <div class="flex flex-wrap items-center justify-between gap-4">
+        <h2 class="my-0 text-xl font-bold">Analytics Overview</h2>
+        <div class="flex items-center gap-3">
+            <mat-form-field class="no-padding">
+                <mat-icon matPrefix class="mat-icon-18 text-gray-400 mr-1">search</mat-icon>
+                <input
+                    matInput
+                    type="text"
+                    placeholder="All Blocks"
+                    [formControl]="featureSearchControl"
+                    [matAutocomplete]="featureAutocomplete"
+                    (input)="onFeatureInputChange($any($event.target).value)"
+                />
+                @if (featureConfigurationId()) {
+                    <button matSuffix mat-icon-button aria-label="Clear" (click)="onFeatureInputClear()">
+                        <mat-icon class="mat-icon-18">close</mat-icon>
+                    </button>
+                }
+                <mat-autocomplete
+                    #featureAutocomplete="matAutocomplete"
+                    [displayWith]="displayFeatureName"
+                    (optionSelected)="onFeatureSelected($event)"
+                >
+                    <mat-option value="">All Blocks</mat-option>
+                    @for (feature of filteredFeatures(); track feature.id) {
+                        <mat-option [value]="feature.id">{{ feature.name }}</mat-option>
+                    }
+                    @if (filteredFeatures().length === 0 && featureSearchQuery()) {
+                        <mat-option disabled>No blocks found</mat-option>
+                    }
+                </mat-autocomplete>
+            </mat-form-field>
+            <mat-form-field class="no-padding w-36">
+                <mat-select [value]="range()" (valueChange)="onRangeChange($event)">
+                    @for (opt of rangeOptions; track opt.value) {
+                        <mat-option [value]="opt.value">{{ opt.label }}</mat-option>
+                    }
+                </mat-select>
+            </mat-form-field>
         </div>
-        <h1 class="coming-soon-title text-5xl font-bold tracking-tight mb-4">Coming Soon</h1>
-        <p class="coming-soon-subtitle text-xl font-medium mb-3">We're working hard to bring you something amazing.</p>
-        <p class="coming-soon-description text-base leading-relaxed mb-10">
-            Our dashboard is under construction. Stay tuned for powerful analytics and insights.
-        </p>
-        <div class="coming-soon-features flex justify-center gap-8 flex-wrap">
-            <div
-                class="feature-item flex flex-col items-center gap-2 px-6 py-5 rounded-xl border transition-all duration-300 cursor-default"
-            >
-                <mat-icon class="feature-icon">analytics</mat-icon>
-                <span class="text-sm font-medium">Analytics</span>
-            </div>
-            <div
-                class="feature-item flex flex-col items-center gap-2 px-6 py-5 rounded-xl border transition-all duration-300 cursor-default"
-            >
-                <mat-icon class="feature-icon">insights</mat-icon>
-                <span class="text-sm font-medium">Insights</span>
-            </div>
-            <div
-                class="feature-item flex flex-col items-center gap-2 px-6 py-5 rounded-xl border transition-all duration-300 cursor-default"
-            >
-                <mat-icon class="feature-icon">trending_up</mat-icon>
-                <span class="text-sm font-medium">Reports</span>
-            </div>
+    </div>
+
+    <!-- Error -->
+    @if (overviewError()) {
+        <div class="rounded-xl border border-red-200 bg-red-50 p-4 text-red-600 mat-body-2 flex items-center gap-2">
+            <mat-icon class="mat-icon-18">error_outline</mat-icon>
+            {{ overviewError() }}
         </div>
+    }
+
+    <!-- KPI Cards -->
+    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
+        @if (isLoadingOverview()) {
+            @for (i of [1, 2, 3, 4]; track i) {
+                <div class="rounded-2xl bg-color p-5 animate-pulse shadow-sm">
+                    <div class="h-3 w-24 rounded bg-gray-200 mb-4"></div>
+                    <div class="h-8 w-16 rounded bg-gray-200 mb-2"></div>
+                    <div class="h-3 w-28 rounded bg-gray-100"></div>
+                </div>
+            }
+        } @else {
+            @for (card of overviewCards; track card.key) {
+                <div class="rounded-2xl bg-color p-5 shadow-sm flex flex-col gap-1">
+                    <div class="flex items-center gap-2 mb-1">
+                        <span
+                            class="inline-flex items-center justify-center w-8 h-8 rounded-lg bg-teal-400/10 border border-teal-400/20"
+                        >
+                            <mat-icon class="mat-icon-18 text-primary">{{ card.icon }}</mat-icon>
+                        </span>
+                        <span class="text-sm font-medium flex-1">{{ card.label }}</span>
+                        <mat-icon
+                            class="mat-icon-16 cursor-default"
+                            [matTooltip]="card.infoTooltip"
+                            matTooltipPosition="above"
+                            >info_outline</mat-icon
+                        >
+                    </div>
+                    <p class="text-3xl font-bold m-0 leading-tight">
+                        {{ getCardValue(overviewData(), card.valueKey) | number }}
+                    </p>
+                    <span class="text-xs mt-1">{{ card.sub }}</span>
+                </div>
+            }
+        }
+    </div>
+
+    <!-- Charts 2x2 Grid -->
+    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+        <timeseries-chart [range]="range()" [featureConfigurationId]="featureConfigurationId()"></timeseries-chart>
+        <breakdown-chart [range]="range()" [featureConfigurationId]="featureConfigurationId()"></breakdown-chart>
     </div>
 </div>
diff --git a/apps/36-blocks/src/app/panel/dashboard/dashboard.component.scss b/apps/36-blocks/src/app/panel/dashboard/dashboard.component.scss
index 08e76427..e69de29b 100644
--- a/apps/36-blocks/src/app/panel/dashboard/dashboard.component.scss
+++ b/apps/36-blocks/src/app/panel/dashboard/dashboard.component.scss
@@ -1,78 +0,0 @@
-:host {
-    display: flex;
-    width: 100%;
-    height: 100%;
-}
-
-.coming-soon-content {
-    animation: fadeInUp 0.8s ease-out;
-}
-
-.icon-wrapper {
-    background: linear-gradient(135deg, var(--color-dark-accent) 0%, #15b8a0 100%);
-    animation: pulse 2s infinite;
-}
-
-.coming-soon-icon {
-    font-size: 56px !important;
-    width: 56px !important;
-    height: 56px !important;
-    color: var(--color-common-white);
-}
-
-.coming-soon-title {
-    color: var(--color-common-text);
-}
-
-.coming-soon-subtitle {
-    color: var(--color-dark-accent);
-}
-
-.coming-soon-description {
-    color: var(--color-common-placeholder);
-}
-
-.feature-item {
-    background: var(--color-common-bg);
-    border-color: var(--color-common-border);
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
-
-    &:hover {
-        background: var(--color-dark-accent-light);
-        border-color: var(--color-dark-accent);
-        transform: translateY(-4px);
-        box-shadow: 0 10px 20px -5px rgba(25, 230, 206, 0.2);
-    }
-
-    .feature-icon {
-        font-size: 32px !important;
-        width: 32px !important;
-        height: 32px !important;
-        color: var(--color-dark-accent);
-    }
-
-    span {
-        color: var(--color-common-text);
-    }
-}
-
-@keyframes fadeInUp {
-    from {
-        opacity: 0;
-        transform: translateY(30px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-@keyframes pulse {
-    0%,
-    100% {
-        box-shadow: 0 0 0 0 rgba(25, 230, 206, 0.4);
-    }
-    50% {
-        box-shadow: 0 0 0 20px rgba(25, 230, 206, 0);
-    }
-}
diff --git a/apps/36-blocks/src/app/panel/dashboard/dashboard.component.ts b/apps/36-blocks/src/app/panel/dashboard/dashboard.component.ts
index 7bd41d24..958236da 100644
--- a/apps/36-blocks/src/app/panel/dashboard/dashboard.component.ts
+++ b/apps/36-blocks/src/app/panel/dashboard/dashboard.component.ts
@@ -1,13 +1,148 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, OnInit, computed, effect, inject, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { DateRange, IAnalyticsParams, OVERVIEW_CARDS, RANGE_OPTIONS } from './dashboard.models';
 import { RouterModule } from '@angular/router';
 import { MatIconModule } from '@angular/material/icon';
+import { MatSelectModule } from '@angular/material/select';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatButtonModule } from '@angular/material/button';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { FormsModule, ReactiveFormsModule, FormControl } from '@angular/forms';
+import { MatAutocompleteModule, MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
+import { MatInputModule } from '@angular/material/input';
 import { BaseComponent } from '@proxy/ui/base-component';
+import { AnalyticsService } from '@proxy/services/proxy/analytics';
+import { FeaturesService } from '@proxy/services/proxy/features';
+import { IFeature } from '@proxy/models/features-model';
+import { TimeseriesChartComponent } from './timeseries-chart/timeseries-chart.component';
+import { BreakdownChartComponent } from './breakdown-chart/breakdown-chart.component';
+import { takeUntil } from 'rxjs';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.OnPush,
     selector: 'proxy-dashboard',
-    imports: [RouterModule, MatIconModule],
+    imports: [
+        CommonModule,
+        RouterModule,
+        MatIconModule,
+        MatSelectModule,
+        MatFormFieldModule,
+        MatButtonModule,
+        MatTooltipModule,
+        FormsModule,
+        ReactiveFormsModule,
+        MatAutocompleteModule,
+        MatInputModule,
+        TimeseriesChartComponent,
+        BreakdownChartComponent,
+    ],
     templateUrl: './dashboard.component.html',
-    styleUrl: './dashboard.component.scss',
 })
-export class DashboardComponent extends BaseComponent {}
+export class DashboardComponent extends BaseComponent implements OnInit {
+    private analyticsService = inject(AnalyticsService);
+    private featuresService = inject(FeaturesService);
+
+    readonly features = signal<IFeature[]>([]);
+    readonly isLoadingFeatures = signal(false);
+
+    readonly featureSearchControl = new FormControl('');
+    readonly featureSearchQuery = signal('');
+
+    readonly filteredFeatures = computed(() => {
+        const query = this.featureSearchQuery().toLowerCase().trim();
+        if (!query) return this.features();
+        return this.features().filter((feature) => feature.name?.toLowerCase().includes(query));
+    });
+
+    readonly range = signal<DateRange>(DateRange.week);
+    readonly featureConfigurationId = signal<number | string | null>('');
+
+    readonly overviewData = signal<any>(null);
+    readonly isLoadingOverview = signal<boolean>(false);
+    readonly overviewError = signal<string | null>(null);
+
+    readonly params = computed<IAnalyticsParams>(() => {
+        const base: IAnalyticsParams = { range: this.range() };
+        const fcId = this.featureConfigurationId();
+        if (fcId !== '' && fcId !== null) base.feature_configuration_id = fcId as number;
+        return base;
+    });
+
+    readonly overviewCards = OVERVIEW_CARDS;
+
+    getCardValue(data: any, path: string): number {
+        return path.split('.').reduce((acc, k) => acc?.[k], data) ?? 0;
+    }
+
+    readonly rangeOptions = RANGE_OPTIONS;
+
+    constructor() {
+        super();
+        effect(() => {
+            const p = this.params();
+            this.fetchOverview(p);
+        });
+    }
+
+    ngOnInit(): void {
+        this.fetchFeatures();
+    }
+
+    fetchFeatures(): void {
+        this.isLoadingFeatures.set(true);
+        this.featuresService
+            .getFeature({})
+            .pipe(takeUntil(this.destroy$))
+            .subscribe({
+                next: (res: any) => {
+                    this.features.set(res?.data?.data ?? []);
+                    this.isLoadingFeatures.set(false);
+                },
+                error: () => this.isLoadingFeatures.set(false),
+            });
+    }
+
+    displayFeatureName = (value: number | string | null): string => {
+        if (!value) return '';
+        return this.features().find((feature) => feature.id === value)?.name ?? '';
+    };
+
+    onFeatureInputChange(value: string): void {
+        this.featureSearchQuery.set(value);
+    }
+
+    onFeatureSelected(event: MatAutocompleteSelectedEvent): void {
+        this.featureConfigurationId.set(event.option.value ?? '');
+        this.featureSearchQuery.set('');
+    }
+
+    onFeatureInputClear(): void {
+        this.featureSearchControl.setValue('');
+        this.featureSearchQuery.set('');
+        this.featureConfigurationId.set('');
+    }
+
+    fetchOverview(params: IAnalyticsParams): void {
+        this.isLoadingOverview.set(true);
+        this.overviewData.set(null);
+        this.overviewError.set(null);
+
+        this.analyticsService
+            .getOverview(params)
+            .pipe(takeUntil(this.destroy$))
+            .subscribe({
+                next: (res: any) => {
+                    this.overviewData.set(res?.data ?? null);
+                    this.isLoadingOverview.set(false);
+                },
+                error: (err: any) => {
+                    this.overviewError.set(err?.message ?? 'Failed to load overview');
+                    this.isLoadingOverview.set(false);
+                },
+            });
+    }
+
+    onRangeChange(value: DateRange): void {
+        this.range.set(value);
+    }
+}
diff --git a/apps/36-blocks/src/app/panel/dashboard/dashboard.models.ts b/apps/36-blocks/src/app/panel/dashboard/dashboard.models.ts
new file mode 100644
index 00000000..0c59c191
--- /dev/null
+++ b/apps/36-blocks/src/app/panel/dashboard/dashboard.models.ts
@@ -0,0 +1,164 @@
+import { INFO_TOOLTIPS } from '@proxy/constant';
+
+export type Interval = 'hour' | 'day' | 'week';
+
+export interface IAnalyticsParams {
+    feature_configuration_id?: number;
+    range?: 'day' | 'week' | 'month';
+    start?: string;
+    end?: string;
+}
+
+export interface ITimeseriesParams extends IAnalyticsParams {
+    metric: 'signups' | 'logins' | 'active_users';
+    interval: Interval;
+}
+
+export interface IBreakdownParams extends IAnalyticsParams {
+    group_by: 'service_id' | 'source' | 'type' | 'country';
+    interval?: Interval;
+}
+
+export enum DateRange {
+    day = 'day',
+    week = 'week',
+    month = 'month',
+}
+
+export interface IRangeOption {
+    label: string;
+    value: DateRange;
+}
+
+export interface IOverviewCard {
+    key: string;
+    valueKey: string;
+    label: string;
+    icon: string;
+    sub: string;
+    infoTooltip: string;
+}
+
+export enum TimeseriesMetric {
+    logins = 'logins',
+    signups = 'signups',
+    active_users = 'active_users',
+}
+
+export enum TimeseriesInterval {
+    hour = 'hour',
+    day = 'day',
+    week = 'week',
+}
+
+export interface IIntervalOption {
+    label: string;
+    value: TimeseriesInterval;
+}
+
+export interface ITimeseriesMetricConfig {
+    label: string;
+    value: TimeseriesMetric;
+    color: string;
+    infoTooltip: string;
+}
+
+export interface ITimeseriesSeries {
+    label: string;
+    color: string;
+    infoTooltip: string;
+    data: { period: string; value: number }[];
+}
+
+export enum BreakdownGroupBy {
+    service_id = 'service_id',
+    source = 'source',
+    type = 'type',
+    country = 'country',
+}
+
+export interface IBreakdownGroupByOption {
+    label: string;
+    value: BreakdownGroupBy;
+}
+
+export const OVERVIEW_CARDS: IOverviewCard[] = [
+    {
+        key: 'users',
+        valueKey: 'users.client_total',
+        label: 'Total Users',
+        icon: 'people',
+        sub: 'registered total',
+        infoTooltip: INFO_TOOLTIPS.dashboard.overviewCards.users,
+    },
+    {
+        key: 'signups',
+        valueKey: 'signups.total',
+        label: 'Signups',
+        icon: 'person_add',
+        sub: 'in selected period',
+        infoTooltip: INFO_TOOLTIPS.dashboard.overviewCards.signups,
+    },
+    {
+        key: 'logins',
+        valueKey: 'logins.total',
+        label: 'Logins',
+        icon: 'login',
+        sub: 'in selected period',
+        infoTooltip: INFO_TOOLTIPS.dashboard.overviewCards.logins,
+    },
+    {
+        key: 'active_users',
+        valueKey: 'active_users.unique',
+        label: 'Active Users',
+        icon: 'group',
+        sub: 'unique in period',
+        infoTooltip: INFO_TOOLTIPS.dashboard.overviewCards.active_users,
+    },
+];
+
+export const RANGE_OPTIONS: IRangeOption[] = [
+    { label: 'Today', value: DateRange.day },
+    { label: 'This Week', value: DateRange.week },
+    { label: 'This Month', value: DateRange.month },
+];
+
+export const TIMESERIES_METRICS: Record<TimeseriesMetric, ITimeseriesMetricConfig> = {
+    [TimeseriesMetric.signups]: {
+        label: 'Signups',
+        value: TimeseriesMetric.signups,
+        color: '#10b981',
+        infoTooltip: INFO_TOOLTIPS.dashboard.charts.signups,
+    },
+    [TimeseriesMetric.logins]: {
+        label: 'Logins',
+        value: TimeseriesMetric.logins,
+        color: '#6366f1',
+        infoTooltip: INFO_TOOLTIPS.dashboard.charts.logins,
+    },
+    [TimeseriesMetric.active_users]: {
+        label: 'Active Users',
+        value: TimeseriesMetric.active_users,
+        color: '#f59e0b',
+        infoTooltip: INFO_TOOLTIPS.dashboard.charts.active_users,
+    },
+};
+
+export const INTERVAL_OPTIONS: Record<TimeseriesInterval, IIntervalOption> = {
+    [TimeseriesInterval.hour]: { label: 'Hourly', value: TimeseriesInterval.hour },
+    [TimeseriesInterval.day]: { label: 'Daily', value: TimeseriesInterval.day },
+    [TimeseriesInterval.week]: { label: 'Weekly', value: TimeseriesInterval.week },
+};
+
+export const GROUP_BY_OPTIONS: IBreakdownGroupByOption[] = [
+    { label: 'By Type', value: BreakdownGroupBy.type },
+    // { label: 'By Source', value: BreakdownGroupBy.source },
+    { label: 'By Service', value: BreakdownGroupBy.service_id },
+    { label: 'By Country', value: BreakdownGroupBy.country },
+];
+
+export function intervalForRange(range: string): TimeseriesInterval {
+    if (range === DateRange.day) return TimeseriesInterval.hour;
+    if (range === DateRange.month) return TimeseriesInterval.week;
+    return TimeseriesInterval.day;
+}
diff --git a/apps/36-blocks/src/app/panel/dashboard/timeseries-chart/timeseries-chart.component.html b/apps/36-blocks/src/app/panel/dashboard/timeseries-chart/timeseries-chart.component.html
new file mode 100644
index 00000000..0acb9c20
--- /dev/null
+++ b/apps/36-blocks/src/app/panel/dashboard/timeseries-chart/timeseries-chart.component.html
@@ -0,0 +1,68 @@
+<!-- Loading Skeleton -->
+@if (isLoading()) {
+    <div class="animate-pulse flex flex-col gap-3">
+        <div class="h-4 w-1/3 rounded bg-gray-200"></div>
+        <div class="h-48 rounded bg-gray-100"></div>
+    </div>
+}
+
+<!-- Error -->
+@if (error()) {
+    <div class="flex items-center gap-2 text-red-500 mat-body-2">
+        <mat-icon class="mat-icon-18">error_outline</mat-icon>
+        {{ error() }}
+    </div>
+}
+
+<!-- Charts: bare cards, parent grid controls layout -->
+@if (isLoading()) {
+    <div class="rounded-2xl bg-color shadow-sm p-5 animate-pulse">
+        <div class="h-4 w-24 rounded bg-gray-200 mb-4"></div>
+        <div class="h-48 rounded bg-gray-100"></div>
+    </div>
+    <div class="rounded-2xl bg-color shadow-sm p-5 animate-pulse">
+        <div class="h-4 w-24 rounded bg-gray-200 mb-4"></div>
+        <div class="h-48 rounded bg-gray-100"></div>
+    </div>
+}
+@if (!isLoading() && seriesList().length) {
+    @for (s of seriesList(); track s.label) {
+        <div class="rounded-2xl bg-color shadow-sm p-5 flex flex-col gap-2">
+            <div class="flex items-center justify-between">
+                <div class="flex items-center gap-1">
+                    <span class="text-base font-bold" [style.color]="s.color">{{ s.label }}</span>
+                    <mat-icon
+                        class="mat-icon-16 text-gray-400 cursor-default"
+                        [matTooltip]="s.infoTooltip"
+                        matTooltipPosition="above"
+                        >info_outline</mat-icon
+                    >
+                </div>
+                <button mat-icon-button class="w-7 h-7 leading-7" (click)="openExpand(s)" matTooltip="Expand">
+                    <mat-icon class="mat-icon-16 text-gray-400">open_in_full</mat-icon>
+                </button>
+            </div>
+            <div #chartEl class="!h-60 !w-full"></div>
+        </div>
+    }
+}
+@if (!isLoading() && !seriesList().length) {
+    <div
+        class="col-span-2 rounded-2xl bg-color shadow-sm p-5 flex flex-col items-center justify-center h-48 gap-2 text-gray-400"
+    >
+        <mat-icon class="w-12 h-12 opacity-30" style="font-size: 48px">show_chart</mat-icon>
+        <span class="text-sm">No data for this period</span>
+    </div>
+}
+
+<ng-template #expandTpl>
+    <div class="flex items-center justify-between px-6 pt-5 pb-2">
+        <span class="text-base font-semibold" [style.color]="expandSeries()?.color">{{ expandSeries()?.label }}</span>
+        <button mat-icon-button (click)="closeExpand()">
+            <mat-icon>close</mat-icon>
+        </button>
+    </div>
+    <div class="px-6 pb-6">
+        <div data-expand-chart="timeseries" style="height: 420px; width: 100%"></div>
+    </div>
+</ng-template>
diff --git a/apps/36-blocks/src/app/panel/dashboard/timeseries-chart/timeseries-chart.component.ts b/apps/36-blocks/src/app/panel/dashboard/timeseries-chart/timeseries-chart.component.ts
new file mode 100644
index 00000000..ab68e605
--- /dev/null
+++ b/apps/36-blocks/src/app/panel/dashboard/timeseries-chart/timeseries-chart.component.ts
@@ -0,0 +1,257 @@
+import {
+    ChangeDetectionStrategy,
+    Component,
+    ElementRef,
+    OnDestroy,
+    QueryList,
+    TemplateRef,
+    ViewChild,
+    ViewChildren,
+    effect,
+    inject,
+    input,
+    signal,
+} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatIconModule } from '@angular/material/icon';
+import { MatSelectModule } from '@angular/material/select';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { FormsModule } from '@angular/forms';
+import { BaseComponent } from '@proxy/ui/base-component';
+import { AnalyticsService } from '@proxy/services/proxy/analytics';
+import { forkJoin, takeUntil } from 'rxjs';
+import * as echarts from 'echarts';
+import { MatCardModule } from '@angular/material/card';
+import { MatButtonModule } from '@angular/material/button';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatDialog, MatDialogRef } from '@angular/material/dialog';
+import {
+    TimeseriesInterval,
+    ITimeseriesSeries,
+    ITimeseriesParams,
+    INTERVAL_OPTIONS,
+    TIMESERIES_METRICS,
+    intervalForRange,
+} from '../dashboard.models';
+
+@Component({
+    selector: 'timeseries-chart',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    host: { style: 'display: contents' },
+    imports: [
+        CommonModule,
+        MatIconModule,
+        MatSelectModule,
+        MatFormFieldModule,
+        FormsModule,
+        MatCardModule,
+        MatButtonModule,
+        MatTooltipModule,
+    ],
+    templateUrl: './timeseries-chart.component.html',
+})
+export class TimeseriesChartComponent extends BaseComponent implements OnDestroy {
+    @ViewChildren('chartEl') chartEls!: QueryList<ElementRef<HTMLDivElement>>;
+    @ViewChild('expandTpl', { static: false }) expandTpl!: TemplateRef<any>;
+
+    range = input<string>('week');
+    featureConfigurationId = input<number | null>(null);
+
+    private analyticsService = inject(AnalyticsService);
+    private dialog = inject(MatDialog);
+    private expandDialogRef: MatDialogRef<any> | null = null;
+
+    readonly isLoading = signal(false);
+    readonly error = signal<string | null>(null);
+    readonly seriesList = signal<ITimeseriesSeries[]>([]);
+    readonly expandSeries = signal<ITimeseriesSeries | null>(null);
+
+    selectedInterval = signal<TimeseriesInterval>(TimeseriesInterval.day);
+
+    readonly metrics = TIMESERIES_METRICS;
+
+    readonly intervalOptions = INTERVAL_OPTIONS;
+
+    constructor() {
+        super();
+        effect(() => {
+            const range = this.range();
+            this.selectedInterval.set(intervalForRange(range));
+            const fcId = this.featureConfigurationId();
+            this.fetchAllMetrics(fcId);
+        });
+        this.watchTheme();
+    }
+
+    fetchAllMetrics(fcId: number | null): void {
+        this.isLoading.set(true);
+        this.error.set(null);
+        this.seriesList.set([]);
+
+        const calls = Object.values(this.metrics).map((m) => {
+            const params: ITimeseriesParams = {
+                range: this.range() as any,
+                metric: m.value,
+                interval: this.selectedInterval(),
+            };
+            if (fcId) params.feature_configuration_id = fcId;
+            return this.analyticsService.getTimeseries(params);
+        });
+
+        forkJoin(calls)
+            .pipe(takeUntil(this.destroy$))
+            .subscribe({
+                next: (results: any[]) => {
+                    const metricValues = Object.values(this.metrics);
+                    const list = results.map((res, i) => ({
+                        label: metricValues[i]!.label,
+                        color: metricValues[i]!.color,
+                        infoTooltip: metricValues[i]!.infoTooltip,
+                        data: (res?.data?.data ?? []) as { period: string; value: number }[],
+                    }));
+                    this.seriesList.set(list);
+                    this.isLoading.set(false);
+                    setTimeout(() => this.renderCharts(), 0);
+                },
+                error: (err: any) => {
+                    this.error.set(err?.message ?? 'Failed to load timeseries');
+                    this.isLoading.set(false);
+                },
+            });
+    }
+
+    private charts: echarts.ECharts[] = [];
+    private themeObserver: MutationObserver | null = null;
+
+    private getCssVar(el: HTMLElement, name: string): string {
+        return getComputedStyle(el).getPropertyValue(name).trim();
+    }
+
+    private watchTheme(): void {
+        this.themeObserver?.disconnect();
+        this.themeObserver = new MutationObserver(() => this.renderCharts());
+        this.themeObserver.observe(document.body, { attributes: true, attributeFilter: ['class'] });
+    }
+
+    private renderCharts(): void {
+        this.charts.forEach((c) => c?.dispose());
+        this.charts = [];
+
+        const list = this.seriesList();
+        list.forEach((s, i) => {
+            const el = this.chartEls?.get(i)?.nativeElement;
+            if (!el) return;
+
+            const borderColor = this.getCssVar(el, '--color-common-border');
+            const textColor = this.getCssVar(el, '--color-common-text');
+            const bgColor = this.getCssVar(el, '--color-common-bg');
+
+            if (this.charts[i]) this.charts[i].dispose();
+            this.charts[i] = echarts.init(el);
+            this.charts[i].setOption(
+                {
+                    backgroundColor: 'transparent',
+                    tooltip: {
+                        trigger: 'axis',
+                        backgroundColor: bgColor,
+                        borderColor: borderColor,
+                        textStyle: { color: textColor },
+                    },
+                    grid: { top: 8, right: 16, bottom: 36, left: 48 },
+                    xAxis: {
+                        type: 'category',
+                        data: s.data.map((d) => d.period),
+                        axisLabel: { fontSize: 10, color: textColor },
+                        axisLine: { lineStyle: { color: borderColor } },
+                        splitLine: { show: false },
+                    },
+                    yAxis: {
+                        type: 'value',
+                        axisLabel: { fontSize: 10, color: textColor },
+                        splitLine: { lineStyle: { color: borderColor } },
+                    },
+                    series: [
+                        {
+                            name: s.label,
+                            type: 'line',
+                            data: s.data.map((d) => d.value),
+                            smooth: true,
+                            symbol: 'circle',
+                            symbolSize: 5,
+                            lineStyle: { width: 2, color: s.color },
+                            itemStyle: { color: s.color },
+                            areaStyle: {
+                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                    { offset: 0, color: s.color + '33' },
+                                    { offset: 1, color: s.color + '05' },
+                                ]),
+                            },
+                        },
+                    ],
+                },
+                true
+            );
+        });
+    }
+
+    closeExpand(): void {
+        this.expandDialogRef?.close();
+    }
+
+    openExpand(s: ITimeseriesSeries): void {
+        this.expandSeries.set(s);
+        const ref = (this.expandDialogRef = this.dialog.open(this.expandTpl, {
+            panelClass: ['mat-dialog', 'mat-dialog-lg'],
+        }));
+        ref.afterOpened().subscribe(() => {
+            const el = document.querySelector('[data-expand-chart="timeseries"]') as HTMLDivElement;
+            if (!el) return;
+            const expandChart = echarts.init(el);
+            expandChart.setOption({
+                tooltip: { trigger: 'axis' },
+                grid: { top: 16, right: 24, bottom: 40, left: 56 },
+                xAxis: {
+                    type: 'category',
+                    data: s.data.map((d) => d.period),
+                    axisLabel: { fontSize: 11 },
+                    axisLine: { lineStyle: { color: '#e5e7eb' } },
+                    splitLine: { show: false },
+                },
+                yAxis: {
+                    type: 'value',
+                    axisLabel: { fontSize: 11 },
+                    splitLine: { lineStyle: { color: '#e5e7eb' } },
+                },
+                series: [
+                    {
+                        name: s.label,
+                        type: 'line',
+                        data: s.data.map((d) => d.value),
+                        smooth: true,
+                        symbol: 'circle',
+                        symbolSize: 6,
+                        lineStyle: { width: 2, color: s.color },
+                        itemStyle: { color: s.color },
+                        areaStyle: {
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                { offset: 0, color: s.color + '33' },
+                                { offset: 1, color: s.color + '05' },
+                            ]),
+                        },
+                    },
+                ],
+            });
+            ref.afterClosed().subscribe(() => expandChart.dispose());
+        });
+    }
+
+    onIntervalChange(value: TimeseriesInterval): void {
+        this.selectedInterval.set(value);
+    }
+
+    override ngOnDestroy(): void {
+        this.themeObserver?.disconnect();
+        this.charts.forEach((c) => c?.dispose());
+        super.ngOnDestroy();
+    }
+}
diff --git a/apps/36-blocks/src/app/panel/features/create-feature/create-feature.component.html b/apps/36-blocks/src/app/panel/features/create-feature/create-feature.component.html
index 9e401c5f..61f97e62 100644
--- a/apps/36-blocks/src/app/panel/features/create-feature/create-feature.component.html
+++ b/apps/36-blocks/src/app/panel/features/create-feature/create-feature.component.html
@@ -907,7 +907,7 @@ <h2 class="mat-h2 font-semibold text-light-gray mb-0" [style.color]="getEffectiv
 
             <!-- Powered by 36Blocks footer -->
             <a
-                href="https://proxy.msg91.com"
+                href="https://36blocks.com"
                 target="_blank"
                 rel="noopener noreferrer"
                 class="flex items-center justify-center gap-1 text-[11px] font-[inherit] leading-none m-2 text-color"
diff --git a/apps/36-blocks/src/app/panel/features/create-feature/feature-preview/widget-preview/widget-preview.component.html b/apps/36-blocks/src/app/panel/features/create-feature/feature-preview/widget-preview/widget-preview.component.html
index bfee6a43..86391b44 100644
--- a/apps/36-blocks/src/app/panel/features/create-feature/feature-preview/widget-preview/widget-preview.component.html
+++ b/apps/36-blocks/src/app/panel/features/create-feature/feature-preview/widget-preview/widget-preview.component.html
@@ -123,15 +123,21 @@ <h1 class="text-base font-semibold text-color leading-tight">Widget Preview</h1>
         <!-- Preview content -->
         @for (tab of tabs; track tab.id) {
             @if (activeTab() === tab.id) {
-                <div [class]="viewMode() !== 'preview' ? 'hidden' : 'flex'" class="flex-1 flex-col overflow-hidden">
+                <div
+                    class="flex-1 flex-col overflow-hidden"
+                    [class.hidden]="viewMode() !== 'preview'"
+                    [class.flex]="viewMode() === 'preview'"
+                >
                     <div
                         class="flex-1 flex justify-center overflow-auto transition-colors duration-300"
-                        [class]="isDark() ? 'bg-gray-950' : 'bg-white'"
+                        [class.bg-gray-950]="isDark()"
+                        [class.bg-white]="!isDark()"
                         [class.items-center]="tab.id == PublicScriptType.Authorization"
                     >
                         <div
                             [id]="tab.id === PublicScriptType.Authorization ? referenceId() : proxyDomId"
-                            [class]="tab.id != PublicScriptType.Authorization ? 'w-full h-full' : ''"
+                            [class.w-full]="tab.id != PublicScriptType.Authorization"
+                            [class.h-full]="tab.id != PublicScriptType.Authorization"
                         ></div>
                     </div>
                 </div>
diff --git a/apps/36-blocks/src/app/panel/features/create-feature/feature-preview/widget-preview/widget-preview.component.ts b/apps/36-blocks/src/app/panel/features/create-feature/feature-preview/widget-preview/widget-preview.component.ts
index 93dcc0f7..337b8146 100644
--- a/apps/36-blocks/src/app/panel/features/create-feature/feature-preview/widget-preview/widget-preview.component.ts
+++ b/apps/36-blocks/src/app/panel/features/create-feature/feature-preview/widget-preview/widget-preview.component.ts
@@ -1,6 +1,5 @@
 import { CommonModule, NgTemplateOutlet } from '@angular/common';
 import {
-    AfterViewInit,
     Component,
     Injector,
     afterNextRender,
@@ -66,7 +65,7 @@ export type PreviewTab =
     templateUrl: './widget-preview.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class WidgetPreviewComponent implements AfterViewInit {
+export class WidgetPreviewComponent {
     private router = inject(Router);
     private route = inject(ActivatedRoute);
     private location = inject(Location);
@@ -90,7 +89,7 @@ export class WidgetPreviewComponent implements AfterViewInit {
     protected readonly proxyDomId = PROXY_DOM_ID;
 
     protected readonly referenceId = signal<string | null>(this.route.snapshot.paramMap.get('referenceId'));
-    private scriptLoaded = false;
+    private scriptInjected = false;
 
     public activeTab = signal<PreviewTab>(PublicScriptType.Authorization);
     public readonly activeTabLabel = computed(() => this.tabs.find((t) => t.id === this.activeTab())?.label ?? '');
@@ -177,7 +176,7 @@ export class WidgetPreviewComponent implements AfterViewInit {
 
     ngAfterViewInit(): void {
         this.sideNavService.open();
-        setTimeout(() => this.launchWidget());
+        afterNextRender(() => this.launchWidget(), { injector: this._injector });
     }
 
     private originStorageKey(): string | null {
@@ -243,7 +242,7 @@ export class WidgetPreviewComponent implements AfterViewInit {
             queryParamsHandling: 'merge',
             replaceUrl: true,
         });
-        setTimeout(() => this.launchWidget(), 100);
+        afterNextRender(() => this.launchWidget(), { injector: this._injector });
     }
 
     public onThemeChange(newTheme: WidgetTheme): void {
@@ -254,7 +253,7 @@ export class WidgetPreviewComponent implements AfterViewInit {
             queryParamsHandling: 'merge',
             replaceUrl: true,
         });
-        setTimeout(() => this.launchWidget(), 50);
+        afterNextRender(() => this.launchWidget(), { injector: this._injector });
     }
 
     public logOut(): void {
@@ -325,8 +324,12 @@ export class WidgetPreviewComponent implements AfterViewInit {
             return;
         }
 
-        if (!this.scriptLoaded) {
-            this.scriptLoaded = true;
+        // Use the global flag so re-created component instances don't inject the script again.
+        // window.__proxyAuthLoaded is set by proxy-auth.js on first execution.
+        const alreadyInjected = this.scriptInjected || !!(window as any)['__proxyAuthLoaded'];
+
+        if (!alreadyInjected) {
+            this.scriptInjected = true;
             const script = document.createElement('script');
             script.type = 'text/javascript';
             script.src = ProxyAuthScriptUrl(environment.proxyServer, new Date().getTime());
diff --git a/apps/36-blocks/src/app/website/home/home.component.ts b/apps/36-blocks/src/app/website/home/home.component.ts
index 472bffd5..706f67a7 100644
--- a/apps/36-blocks/src/app/website/home/home.component.ts
+++ b/apps/36-blocks/src/app/website/home/home.component.ts
@@ -204,7 +204,7 @@ export class HomeComponent extends BaseComponent implements OnInit {
             label: 'Everything You Need to Manage Users',
             accentWord: 'Securely',
             desc: 'Replace months of custom authentication development with production-ready components built for security, scale, and speed.',
-            gridCols: 'grid-cols-1 md:grid-cols-3 sm:grid-cols-2 lg:grid-cols-4',
+            gridCols: 'grid-cols-1 md:grid-cols-3 sm:grid-cols-2',
             cards: this.platformFeatures,
         },
         {
@@ -268,7 +268,7 @@ export class HomeComponent extends BaseComponent implements OnInit {
         },
         {
             num: '18',
-            html: `    <span class="token attr-name">src</span>=<span class="token string">"https://proxy.msg91.com/..."</span><span class="token tag">&gt;</span>`,
+            html: `    <span class="token attr-name">src</span>=<span class="token string">"https://36blocks.com/..."</span><span class="token tag">&gt;</span>`,
         },
         { num: '19', html: `  <span class="token tag">&lt;/script&gt;</span>` },
     ]);
diff --git a/apps/36-blocks/src/environments/environment.prod.ts b/apps/36-blocks/src/environments/environment.prod.ts
index 6fa6e962..5a4bc571 100644
--- a/apps/36-blocks/src/environments/environment.prod.ts
+++ b/apps/36-blocks/src/environments/environment.prod.ts
@@ -3,6 +3,7 @@ import { envVariables } from './env-variables';
 export const environment = {
     production: true,
     env: 'prod',
+    googleClientId: '',
     proxyServer: 'https://proxy.msg91.com',
     baseUrl: 'https://routes.msg91.com/api',
     ...envVariables,
diff --git a/apps/36-blocks/src/environments/environment.stage.ts b/apps/36-blocks/src/environments/environment.stage.ts
index 639b3d93..4a857f86 100644
--- a/apps/36-blocks/src/environments/environment.stage.ts
+++ b/apps/36-blocks/src/environments/environment.stage.ts
@@ -7,7 +7,8 @@ import { envVariables } from './env-variables';
 export const environment = {
     production: false,
     env: 'dev',
-    proxyServer: 'https://proxy.msg91.com',
+    googleClientId: '',
+    proxyServer: 'https://36blocks.com',
     baseUrl: 'https://routes.msg91.com/api',
     ...envVariables,
 };
diff --git a/apps/36-blocks/src/environments/environment.test.ts b/apps/36-blocks/src/environments/environment.test.ts
index 0131d87c..2c363b65 100644
--- a/apps/36-blocks/src/environments/environment.test.ts
+++ b/apps/36-blocks/src/environments/environment.test.ts
@@ -3,6 +3,7 @@ import { envVariables } from './env-variables';
 export const environment = {
     production: true,
     env: 'test',
+    googleClientId: '',
     proxyServer: 'https://test.proxy.msg91.com',
     baseUrl: 'https://apitest.msg91.com/api',
     ...envVariables,
diff --git a/apps/36-blocks/src/environments/environment.ts b/apps/36-blocks/src/environments/environment.ts
index e5a76fc4..5510301c 100644
--- a/apps/36-blocks/src/environments/environment.ts
+++ b/apps/36-blocks/src/environments/environment.ts
@@ -7,6 +7,7 @@ import { envVariables } from './env-variables';
 export const environment = {
     production: false,
     env: 'local',
+    googleClientId: '',
     proxyServer: 'http://localhost:4200',
     baseUrl: 'https://apitest.msg91.com/api',
     ...envVariables,
diff --git a/apps/shared/assets/utils/intl-tel-input-custom.scss b/apps/shared/assets/utils/intl-tel-input-custom.scss
index a5294406..cb0255b8 100644
--- a/apps/shared/assets/utils/intl-tel-input-custom.scss
+++ b/apps/shared/assets/utils/intl-tel-input-custom.scss
@@ -50,12 +50,12 @@
     height: 0;
     border-left: 3px solid transparent;
     border-right: 3px solid transparent;
-    border-top: 4px solid #555;
+    border-top: 4px solid #6b7280;
 }
 
 .iti__arrow--up {
     border-top: none;
-    border-bottom: 4px solid #555;
+    border-bottom: 4px solid #6b7280;
 }
 
 .iti__country-list {
@@ -65,8 +65,8 @@
     padding: 0;
     margin: 0 0 0 -1px;
     box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
-    background-color: white;
-    border: 1px solid #ccc;
+    background-color: #ffffff;
+    border: 1px solid #d1d5db;
     white-space: nowrap;
     max-height: 200px;
     overflow-y: scroll;
@@ -93,7 +93,7 @@
 .iti__divider {
     padding-bottom: 5px;
     margin-bottom: 5px;
-    border-bottom: 1px solid #ccc;
+    border-bottom: 1px solid #d1d5db;
 }
 
 .iti__country {
@@ -102,7 +102,7 @@
 }
 
 .iti__dial-code {
-    color: #999;
+    color: #6b7280;
 }
 
 .iti__country.iti__highlight {
@@ -1519,10 +1519,10 @@
 
 .iti__flag {
     height: 15px;
-    box-shadow: 0px 0px 1px 0px #888;
+    box-shadow: 0px 0px 1px 0px #9ca3af;
     background-image: url('https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.19/img/flags.png') !important;
     background-repeat: no-repeat;
-    background-color: #dbdbdb;
+    background-color: #e5e7eb;
     background-position: 20px 0;
 }
 
@@ -1559,7 +1559,7 @@
 #phone:focus,
 [id^='init-contact']:focus {
     border-color: transparent;
-    outline: 2px solid #1e75ba !important;
+    outline: 2px solid var(--proxy-primary-40, #4f46e5) !important;
 }
 
 /* // .iti__selected-flag {
@@ -1587,13 +1587,14 @@
     position: absolute !important;
     bottom: 0 !important;
     top: auto !important;
-    left: auto !important;
+    left: 0 !important;
     transform: translateY(101%) !important;
     box-shadow: none;
     font-size: 14px;
     margin-left: 0;
-    width: 316px;
-    max-width: 100%;
+    min-width: 280px;
+    width: max-content;
+    max-width: min(316px, calc(100vw - 2rem));
     max-height: 250px;
 }
 
@@ -1617,7 +1618,7 @@
     overflow: hidden !important;
     text-overflow: ellipsis;
     padding: 10px 10px !important;
-    color: #3f4346 !important;
+    color: #374151 !important;
     font-weight: 500 !important;
 }
 
@@ -1627,7 +1628,7 @@
 
 .iti__country:hover,
 .iti__country.iti__highlight {
-    background-color: #d5e0f8 !important;
+    background-color: #e0e7ff !important;
 }
 
 /* // .iti .iti__country-list {
@@ -1717,13 +1718,13 @@
 //     border-radius: 8px !important;
 // } */
 .selected-dial-code {
-    color: #8f9396;
+    color: #6b7280;
 }
 
 .dropdown-menu.country-dropdown {
     width: 291px !important;
     border-radius: 8px 8px 0px 0px !important;
-    border-color: #d5d9dc !important;
+    border-color: #d1d5db !important;
 }
 
 .dropdown-menu.country-dropdown ul {
@@ -1743,14 +1744,14 @@
 //     color: #3f4346;
 // } */
 .invalid-input {
-    outline: 2px solid #cc5229;
+    outline: 2px solid var(--proxy-error-40, #dc2626);
 }
 
 /* Dark mode — triggered by .dark class on root element */
 .dark .iti .iti__country-list {
-    background-color: #1f2937;
-    border-color: #374151;
-    color: #f9fafb;
+    background-color: #1f2937; /* gray-800 */
+    border-color: #374151; /* gray-700 */
+    color: #f9fafb; /* gray-50 */
 }
 
 .dark .iti__country {
@@ -1759,15 +1760,15 @@
 
 .dark .iti__country:hover,
 .dark .iti__country.iti__highlight {
-    background-color: #312e81 !important;
+    background-color: #312e81 !important; /* indigo-900 */
 }
 
 .dark .iti__dial-code {
-    color: #9ca3af;
+    color: #9ca3af; /* gray-400 */
 }
 
 .dark .iti__divider {
-    border-bottom-color: #374151;
+    border-bottom-color: #374151; /* gray-700 */
 }
 
 .dark .iti__selected-flag:hover,
@@ -1777,6 +1778,6 @@
 
 .dark #phone,
 .dark [id^='init-contact'] {
-    color: #f9fafb;
+    color: #f9fafb; /* gray-50 */
     background-color: transparent;
 }
diff --git a/libs/constant/src/index.ts b/libs/constant/src/index.ts
index a44e5ced..cecec4b9 100644
--- a/libs/constant/src/index.ts
+++ b/libs/constant/src/index.ts
@@ -3,6 +3,7 @@ import { COMMA, ENTER, SPACE } from '@angular/cdk/keycodes';
 
 import { cloneDeep } from 'lodash-es';
 export * from './drop-down';
+export * from './info-tooltips';
 export * from './mat-icon';
 export * from './jitsi-calling';
 export * from './permission-mapping';
diff --git a/libs/constant/src/info-tooltips.ts b/libs/constant/src/info-tooltips.ts
new file mode 100644
index 00000000..4f6be26b
--- /dev/null
+++ b/libs/constant/src/info-tooltips.ts
@@ -0,0 +1,61 @@
+/**
+ * INFO_TOOLTIPS
+ *
+ * Global registry for all info-icon tooltip strings across the panel.
+ * Organised by page/section. Import from @proxy/constant and bind to
+ * [matTooltip] on an <mat-icon>info_outline</mat-icon> element.
+ *
+ * Usage in TS:
+ *   import { INFO_TOOLTIPS } from '@proxy/constant';
+ *   readonly tip = INFO_TOOLTIPS.dashboard.overviewCards.signups;
+ *
+ * Usage in HTML (after exposing via a class property or directly):
+ *   <mat-icon [matTooltip]="INFO_TOOLTIPS.features.apiKey" matTooltipPosition="above"
+ *             style="font-size:16px;width:16px;height:16px;" class="text-gray-400 cursor-default">
+ *     info_outline
+ *   </mat-icon>
+ */
+export const INFO_TOOLTIPS = {
+    /** ─── Analytics Dashboard ────────────────────────────────────────────── */
+    dashboard: {
+        overviewCards: {
+            signups: 'Total number of new user sign-ups during the selected time period.',
+            logins: 'Total number of login events recorded during the selected time period.',
+            active_users: 'Count of unique users who performed at least one action in the selected period.',
+            users: 'Cumulative total of all registered users on your platform.',
+        },
+        charts: {
+            logins: 'Daily login trend showing how user login activity changes over time.',
+            signups: 'Daily sign-up trend showing new user registrations over time.',
+            active_users: 'Daily active user trend showing unique engaged users over time.',
+            breakdown: 'Distribution of activity grouped by the selected dimension (type, source, or service).',
+        },
+    },
+
+    /** ─── Features / Blocks ──────────────────────────────────────────────── */
+    features: {
+        apiKey: 'Unique key used to authenticate API requests for this feature/block.',
+        webhookUrl: 'Endpoint that receives real-time event notifications from this block.',
+        rateLimiting: 'Maximum number of requests allowed per minute for this block.',
+        authMethods: 'Authentication strategies enabled for this block (OTP, Google, Microsoft, etc.).',
+        subscriptionPlan: 'Plan that governs the usage quota and billing for this block.',
+    },
+
+    /** ─── Logs ───────────────────────────────────────────────────────────── */
+    logs: {
+        requestId: 'Unique identifier for each individual API request.',
+        statusCode: 'HTTP response code returned for this request.',
+        latency: 'Time taken (in ms) to process and respond to the request.',
+        environment: 'The project environment (e.g. Production, Staging) that handled the request.',
+    },
+
+    /** ─── Users / User Management ───────────────────────────────────────── */
+    users: {
+        totalUsers: 'Total registered users across all environments for this project.',
+        activeUsers: 'Users who have performed at least one action in the last 30 days.',
+        blockedUsers: 'Users whose access has been revoked or suspended.',
+        lastLogin: 'Timestamp of the most recent successful login for this user.',
+    },
+} as const;
+
+export type InfoTooltips = typeof INFO_TOOLTIPS;
diff --git a/libs/regex/src/index.ts b/libs/regex/src/index.ts
index 9211fee4..07552932 100644
--- a/libs/regex/src/index.ts
+++ b/libs/regex/src/index.ts
@@ -64,9 +64,8 @@ export const CAMPAIGN_NAME_REGEX = /^[a-zA-Z0-9][a-zA-Z0-9_\s]+$/;
 export const ALPHANUMERIC_WITH_DASH_CAPS_AND_STARTS_WITH_ALPHABET_REGEX = /^[A-Za-z][A-Za-z0-9\-\_]*$/;
 export const PERMISSION_NAME_REGEX = /^[a-zA-Z0-9_\s]+$/;
 export const NON_ASCII_PRINTABLE_CHARACTERS_REGEX = /[^\t\r\n\x20-\x7E]/;
-export const FULL_NAME_REGEX = /^([\w])+\s+([\w\s])+$/i;
 export const PASSWORD_REGEX = /(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[\W_]).*/; // Should Contain at least one lowercase letter, one uppercase letter, one number and one symbol
-export const NAME_REGEX = /^([a-zA-Z]+\s)*[a-zA-Z]+$/i;
+export const NAME_REGEX = /^[a-zA-Z][a-zA-Z\s]{2,49}$/;
 export const EMAIL_OR_MOBILE_REGEX =
     /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$|^[0-9]{7,15}$/;
-export const UPDATE_REGEX = /^[a-zA-Z0-9][a-zA-Z0-9_\s]+$/;
+export const COMPANY_NAME_REGEX = /^[a-zA-Z0-9][a-zA-Z0-9_\s]+$/;
diff --git a/libs/services/proxy/analytics/src/index.ts b/libs/services/proxy/analytics/src/index.ts
new file mode 100644
index 00000000..e1facd4d
--- /dev/null
+++ b/libs/services/proxy/analytics/src/index.ts
@@ -0,0 +1 @@
+export * from './lib/analytics.service';
diff --git a/libs/services/proxy/analytics/src/lib/analytics.service.ts b/libs/services/proxy/analytics/src/lib/analytics.service.ts
new file mode 100644
index 00000000..dd600e79
--- /dev/null
+++ b/libs/services/proxy/analytics/src/lib/analytics.service.ts
@@ -0,0 +1,32 @@
+import { Inject, Injectable } from '@angular/core';
+import { HttpWrapperService } from '@proxy/services/httpWrapper';
+import { ProxyBaseUrls } from '@proxy/models/root-models';
+import { Observable } from 'rxjs';
+import { AnalyticsUrls } from '@proxy/urls/analytics-urls';
+import {
+    IAnalyticsParams,
+    IBreakdownParams,
+    ITimeseriesParams,
+} from 'apps/36-blocks/src/app/panel/dashboard/dashboard.models';
+
+@Injectable({
+    providedIn: 'root',
+})
+export class AnalyticsService {
+    constructor(
+        private http: HttpWrapperService,
+        @Inject(ProxyBaseUrls.BaseURL) private baseURL: string
+    ) {}
+
+    public getOverview(params: IAnalyticsParams): Observable<any> {
+        return this.http.get(AnalyticsUrls.overview(this.baseURL), params);
+    }
+
+    public getTimeseries(params: ITimeseriesParams): Observable<any> {
+        return this.http.get(AnalyticsUrls.timeseries(this.baseURL), params);
+    }
+
+    public getBreakdown(params: IBreakdownParams): Observable<any> {
+        return this.http.get(AnalyticsUrls.breakdown(this.baseURL), params);
+    }
+}
diff --git a/libs/urls/analytics-urls/src/index.ts b/libs/urls/analytics-urls/src/index.ts
new file mode 100644
index 00000000..b6c3f0bb
--- /dev/null
+++ b/libs/urls/analytics-urls/src/index.ts
@@ -0,0 +1,7 @@
+import { createUrl } from '@proxy/service';
+
+export const AnalyticsUrls = {
+    overview: (baseUrl: string) => createUrl(baseUrl, 'analytics/overview'),
+    timeseries: (baseUrl: string) => createUrl(baseUrl, 'analytics/timeseries'),
+    breakdown: (baseUrl: string) => createUrl(baseUrl, 'analytics/breakdown'),
+};
diff --git a/package-lock.json b/package-lock.json
index b65ab05f..479690cf 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -57,6 +57,7 @@
                 "d3-time-format": "3.0.0",
                 "d3-transition": "3.0.1",
                 "dayjs": "1.11.7",
+                "echarts": "^6.0.0",
                 "express": "^5.2.1",
                 "firebase": "^12.10.0",
                 "froala-editor": "4.0.15",
@@ -22971,6 +22972,22 @@
                 "safer-buffer": "^2.1.0"
             }
         },
+        "node_modules/echarts": {
+            "version": "6.0.0",
+            "resolved": "https://registry.npmjs.org/echarts/-/echarts-6.0.0.tgz",
+            "integrity": "sha512-Tte/grDQRiETQP4xz3iZWSvoHrkCQtwqd6hs+mifXcjrCuo2iKWbajFObuLJVBlDIJlOzgQPd1hsaKt/3+OMkQ==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "tslib": "2.3.0",
+                "zrender": "6.0.0"
+            }
+        },
+        "node_modules/echarts/node_modules/tslib": {
+            "version": "2.3.0",
+            "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+            "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
+            "license": "0BSD"
+        },
         "node_modules/ee-first": {
             "version": "1.1.1",
             "license": "MIT"
@@ -39735,6 +39752,21 @@
             "resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.15.1.tgz",
             "integrity": "sha512-XE96n56IQpJM7NAoXswY3XRLcWFW83xe0BiAOeMD7K5k5xecOeul3Qcpx6GqEeeHNkW5DWL5zOyTbEfB4eti8w==",
             "license": "MIT"
+        },
+        "node_modules/zrender": {
+            "version": "6.0.0",
+            "resolved": "https://registry.npmjs.org/zrender/-/zrender-6.0.0.tgz",
+            "integrity": "sha512-41dFXEEXuJpNecuUQq6JlbybmnHaqqpGlbH1yxnA5V9MMP4SbohSVZsJIwz+zdjQXSSlR1Vc34EgH1zxyTDvhg==",
+            "license": "BSD-3-Clause",
+            "dependencies": {
+                "tslib": "2.3.0"
+            }
+        },
+        "node_modules/zrender/node_modules/tslib": {
+            "version": "2.3.0",
+            "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+            "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
+            "license": "0BSD"
         }
     }
 }
diff --git a/package.json b/package.json
index 7d910a8f..a820ad81 100755
--- a/package.json
+++ b/package.json
@@ -99,6 +99,7 @@
         "d3-time-format": "3.0.0",
         "d3-transition": "3.0.1",
         "dayjs": "1.11.7",
+        "echarts": "^6.0.0",
         "express": "^5.2.1",
         "firebase": "^12.10.0",
         "froala-editor": "4.0.15",
diff --git a/tsconfig.base.json b/tsconfig.base.json
index 9419cbf4..b5543d95 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -48,6 +48,7 @@
             ],
             "@proxy/services/login": ["libs/services/login/src/index.ts"],
             "@proxy/services/proxy/auth": ["libs/services/proxy/auth/src/index.ts"],
+            "@proxy/services/proxy/analytics": ["libs/services/proxy/analytics/src/index.ts"],
             "@proxy/services/proxy/create-project": ["libs/services/proxy/create-project/src/index.ts"],
             "@proxy/services/proxy/features": ["libs/services/proxy/features/src/index.ts"],
             "@proxy/services/proxy/logs": ["libs/services/proxy/logs/src/index.ts"],
@@ -66,6 +67,7 @@
             "@proxy/ui/search": ["libs/ui/search/src/index.ts"],
             "@proxy/ui/service-list": ["libs/ui/service-list/src/index.ts"],
             "@proxy/ui/virtual-scroll": ["libs/ui/virtual-scroll/src/index.ts"],
+            "@proxy/urls/analytics-urls": ["libs/urls/analytics-urls/src/index.ts"],
             "@proxy/urls/create-project-urls": ["libs/urls/create-project-urls/src/index.ts"],
             "@proxy/urls/features-url": ["libs/urls/features-url/src/index.ts"],
             "@proxy/urls/logs-urls": ["libs/urls/logs-urls/src/index.ts"],