From 416023dee8652a002a1934591180948de25a2567 Mon Sep 17 00:00:00 2001
From: Divyanshu Shrivastava <divyanshushrivastava123@gmail.com>
Date: Tue, 31 Mar 2026 00:01:46 +0530
Subject: [PATCH] refactor: remove commented-out and unused SCSS code across
 multiple components

- Remove all commented-out styles from app.component.scss
- Remove all commented-out styles from send-otp-center.component.scss
- Remove all commented-out subscription plans styles from subscription-center.component.scss
- Remove migration comment from organization-details.component.scss
- Remove hover-actions styles from user-management.component.scss
---
 .../src/app/app.component.scss                |  41 --
 .../send-otp-center.component.scss            |  21 -
 .../subscription-center.component.scss        | 398 -----------
 .../organization-details.component.scss       |   1 -
 .../user-management.component.scss            | 153 ----
 .../user-profile/user-profile.component.scss  | 666 ------------------
 .../src/app/otp/widget/widget.component.scss  |   6 -
 .../assets/scss/component/_form-field.scss    | 118 ----
 .../src/assets/scss/component/_tabs.scss      |  24 -
 .../src/assets/scss/layout/_display.scss      |  94 ---
 .../src/assets/scss/layout/_spacing.scss      | 265 -------
 .../src/environments/environment.test.ts      |  23 -
 apps/36-blocks-widget/src/otp-global.scss     |  29 -
 apps/36-blocks-widget/src/styles.scss         |  10 -
 .../create-feature.component.scss             |  40 --
 .../src/assets/proxy-auth/test-widget.html    |  88 ---
 .../src/assets/scss/base/_dark-theme.scss     |  30 -
 .../assets/scss/base/_default-variables.scss  |  28 -
 .../src/assets/scss/base/_light-theme.scss    |  35 -
 .../src/assets/scss/base/_reset.scss          |  67 --
 .../src/assets/scss/component/_buttons.scss   | 324 ---------
 .../src/assets/scss/component/_card.scss      |  68 --
 .../src/assets/scss/component/_chart.scss     |   7 -
 .../src/assets/scss/component/_filters.scss   |  62 --
 .../assets/scss/component/_form-field.scss    | 254 -------
 .../src/assets/scss/component/_icon.scss      |  62 +-
 .../src/assets/scss/component/_mat-list.scss  |  43 --
 .../src/assets/scss/component/_menu.scss      |  74 --
 .../src/assets/scss/component/_modal.scss     | 102 ---
 .../assets/scss/component/_pagination.scss    | 120 ----
 .../assets/scss/component/_select-option.scss |  23 -
 .../assets/scss/component/_side-dialog.scss   |  41 --
 .../src/assets/scss/component/_sidenav.scss   |  33 -
 .../src/assets/scss/component/_status.scss    |  42 --
 .../src/assets/scss/component/_stepper.scss   |  72 --
 .../src/assets/scss/component/_tabs.scss      |  57 --
 .../assets/scss/component/_text-style.scss    |   0
 .../src/assets/scss/theme/_default-theme.scss |   7 -
 .../src/environments/environment.test.ts      |  21 -
 apps/36-blocks/src/styles.scss                |  27 -
 40 files changed, 20 insertions(+), 3556 deletions(-)
 delete mode 100644 apps/36-blocks-widget/src/assets/scss/component/_form-field.scss
 delete mode 100644 apps/36-blocks-widget/src/assets/scss/component/_tabs.scss
 delete mode 100644 apps/36-blocks-widget/src/assets/scss/layout/_display.scss
 delete mode 100644 apps/36-blocks-widget/src/assets/scss/layout/_spacing.scss
 delete mode 100644 apps/36-blocks-widget/src/environments/environment.test.ts
 delete mode 100644 apps/36-blocks-widget/src/otp-global.scss
 delete mode 100644 apps/36-blocks/src/assets/proxy-auth/test-widget.html
 delete mode 100644 apps/36-blocks/src/assets/scss/base/_reset.scss
 delete mode 100644 apps/36-blocks/src/assets/scss/component/_buttons.scss
 delete mode 100644 apps/36-blocks/src/assets/scss/component/_card.scss
 delete mode 100644 apps/36-blocks/src/assets/scss/component/_chart.scss
 delete mode 100644 apps/36-blocks/src/assets/scss/component/_filters.scss
 delete mode 100644 apps/36-blocks/src/assets/scss/component/_form-field.scss
 delete mode 100644 apps/36-blocks/src/assets/scss/component/_mat-list.scss
 delete mode 100644 apps/36-blocks/src/assets/scss/component/_menu.scss
 delete mode 100755 apps/36-blocks/src/assets/scss/component/_modal.scss
 delete mode 100644 apps/36-blocks/src/assets/scss/component/_pagination.scss
 delete mode 100644 apps/36-blocks/src/assets/scss/component/_select-option.scss
 delete mode 100644 apps/36-blocks/src/assets/scss/component/_side-dialog.scss
 delete mode 100644 apps/36-blocks/src/assets/scss/component/_sidenav.scss
 delete mode 100644 apps/36-blocks/src/assets/scss/component/_status.scss
 delete mode 100644 apps/36-blocks/src/assets/scss/component/_stepper.scss
 delete mode 100644 apps/36-blocks/src/assets/scss/component/_tabs.scss
 delete mode 100644 apps/36-blocks/src/assets/scss/component/_text-style.scss
 delete mode 100644 apps/36-blocks/src/environments/environment.test.ts

diff --git a/apps/36-blocks-widget/src/app/app.component.scss b/apps/36-blocks-widget/src/app/app.component.scss
index ef6ab2dc..e69de29b 100644
--- a/apps/36-blocks-widget/src/app/app.component.scss
+++ b/apps/36-blocks-widget/src/app/app.component.scss
@@ -1,41 +0,0 @@
-// .hcaptcha-container {
-//     margin: 20px 0;
-//     padding: 15px;
-//     border: 1px solid #e0e0e0;
-//     border-radius: 8px;
-//     background-color: #f9f9f9;
-//     display: flex;
-//     justify-content: center;
-// }
-
-// .captcha-status {
-//     margin: 15px 0;
-//     padding: 10px;
-//     background-color: #e8f5e8;
-//     border: 1px solid #4caf50;
-//     border-radius: 4px;
-
-//     p {
-//         margin: 0 0 10px 0;
-//         color: #2e7d32;
-//         font-weight: 500;
-//     }
-
-//     button {
-//         background-color: #f44336;
-//         color: white;
-//         border: none;
-//         padding: 8px 16px;
-//         border-radius: 4px;
-//         cursor: pointer;
-//         font-size: 14px;
-
-//         &:hover {
-//             background-color: #d32f2f;
-//         }
-//     }
-// }
-
-// // :host div {
-// //     height: 100vh;
-// // }
diff --git a/apps/36-blocks-widget/src/app/otp/component/send-otp-center/send-otp-center.component.scss b/apps/36-blocks-widget/src/app/otp/component/send-otp-center/send-otp-center.component.scss
index 7ce9555d..e69de29b 100644
--- a/apps/36-blocks-widget/src/app/otp/component/send-otp-center/send-otp-center.component.scss
+++ b/apps/36-blocks-widget/src/app/otp/component/send-otp-center/send-otp-center.component.scss
@@ -1,21 +0,0 @@
-// :host {
-//     display: flex;
-//     flex-direction: column;
-//     justify-content: center;
-//     position: relative;
-// }
-
-// /* API-driven button hover color override */
-// .has-hover-color:hover {
-//     background-color: var(--btn-hover-color) !important;
-// }
-
-// /* intl-tel-input: force wrapper to fill container */
-// :host ::ng-deep .iti {
-//     width: 100%;
-// }
-
-// /* intl-tel-input: prevent flag from overlapping input text */
-// :host ::ng-deep .iti input[type='tel'] {
-//     padding-left: 52px !important;
-// }
diff --git a/apps/36-blocks-widget/src/app/otp/component/subscription-center/subscription-center.component.scss b/apps/36-blocks-widget/src/app/otp/component/subscription-center/subscription-center.component.scss
index 57d5f6f2..e69de29b 100644
--- a/apps/36-blocks-widget/src/app/otp/component/subscription-center/subscription-center.component.scss
+++ b/apps/36-blocks-widget/src/app/otp/component/subscription-center/subscription-center.component.scss
@@ -1,398 +0,0 @@
-// @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');
-
-// .container {
-//     background: #ffffff !important;
-//     padding: 20px;
-//     text-align: left;
-//     position: relative;
-//     height: 100vh;
-//     width: 100vw;
-//     font-family: 'Outfit', sans-serif;
-//     z-index: 1;
-//     flex-direction: column;
-//     overflow-y: auto;
-//     box-sizing: border-box;
-// }
-
-// /* When used in dialog, override the positioning */
-// :host-context(.subscription-center-dialog) .container {
-//     position: relative !important;
-//     top: auto !important;
-//     left: auto !important;
-//     right: auto !important;
-//     bottom: auto !important;
-//     height: 100% !important;
-//     width: 100% !important;
-//     max-height: 700px !important;
-//     max-width: 900px !important;
-// }
-
-// /* Dialog-specific styling for better layout */
-// :host-context(.subscription-center-dialog) {
-//     .subscription-plans-container {
-//         padding: 10px !important;
-//         height: calc(100% - 40px) !important;
-//     }
-
-//     .plans-grid {
-//         justify-content: space-around !important;
-//         // align-items: flex-start !important;
-//     }
-
-//     .plan-card {
-//         flex: 0 0 280px !important;
-//         margin: 10px !important;
-//     }
-// }
-
-// // Subscription Plans Styles
-// .subscription-plans-container {
-//     flex: 1;
-//     display: flex;
-//     flex-direction: column;
-//     align-items: stretch;
-//     justify-content: flex-start;
-//     padding: 20px;
-//     min-height: auto;
-//     overflow-y: visible;
-//     font-family: 'Outfit', sans-serif;
-// }
-
-// .plans-grid {
-//     display: flex;
-//     flex-direction: row;
-//     gap: 20px;
-//     width: 100%;
-//     max-width: 100%;
-//     margin: 0;
-//     align-items: flex-start;
-//     padding: 0 0 0 20px;
-//     overflow-x: auto;
-//     // overflow-y: hidden;
-
-//     // Custom scrollbar styling
-//     &::-webkit-scrollbar {
-//         height: 8px;
-//     }
-
-//     &::-webkit-scrollbar-track {
-//         background: #f1f1f1;
-//         border-radius: 4px;
-//     }
-
-//     &::-webkit-scrollbar-thumb {
-//         background: #c1c1c1;
-//         border-radius: 4px;
-
-//         &:hover {
-//             background: #a8a8a8;
-//         }
-//     }
-
-//     // Responsive behavior for smaller screens
-//     @media (max-width: 1200px) {
-//         gap: 15px;
-//         padding: 15px;
-//     }
-
-//     @media (max-width: 768px) {
-//         flex-direction: column;
-//         align-items: center;
-//         gap: 20px;
-//         overflow-x: visible;
-//         overflow-y: auto;
-//     }
-// }
-
-// // Ensure highlighted border is always visible
-// .plan-card.highlighted {
-//     border: 2px solid #000000 !important;
-//     box-shadow: 0 0 0 0px #000000 !important;
-// }
-
-// .plan-card {
-//     background: #ffffff;
-//     border: 2px solid #e6e6e6;
-//     border-radius: 4px;
-//     padding: 26px 24px;
-//     transition: all 0.3s ease;
-//     box-shadow: none;
-//     min-width: 250px;
-//     max-width: 350px;
-//     width: 350px;
-//     flex: 1;
-//     display: flex;
-//     flex-direction: column;
-//     justify-content: flex-start;
-//     min-height: auto;
-//     max-height: none;
-//     overflow: visible;
-//     min-height: 348px;
-//     font-family: 'Outfit', sans-serif;
-// }
-
-// // Dark mode support for plan cards
-// // :host-context(.dark-theme) .plan-card {
-// //     background: var(--color-common-slate);
-// //     border: 1px solid var(--color-common-border);
-// //     color: var(--color-common-text);
-
-// //     &:hover {
-// //         transform: translateY(-8px);
-// //         box-shadow: none;
-// //     }
-
-// //     &.popular {
-// //         transform: scale(1.02);
-
-// //         &:hover {
-// //             transform: scale(1.02) translateY(-8px);
-// //         }
-// //     }
-
-// //     &.highlighted {
-// //         border: 2px solid #000000 !important;
-// //         box-shadow: 0 0 0 0px #000000 !important;
-// //     }
-// // }
-
-// // Dark mode support for highlighted cards
-// // :host-context(.dark-theme) .plan-card.highlighted {
-// //     border: 2px solid var(--color-common-text) !important;
-// //     box-shadow: 0 0 0 2px var(--color-common-text) !important;
-
-// //     // Mobile responsive
-// //     @media (max-width: 768px) {
-// //         min-width: 100%;
-// //         max-width: 400px;
-// //         width: 100%;
-// //         padding: 30px 20px;
-
-// //         &.popular {
-// //             transform: none;
-
-// //             &:hover {
-// //                 transform: translateY(-8px);
-// //             }
-// //         }
-// //     }
-// // }
-
-// .popular-badge {
-//     position: absolute;
-//     top: -12px;
-//     right: 20px;
-//     background: #4d4d4d;
-//     color: #ffffff;
-//     padding: 6px 16px;
-//     border-radius: 20px;
-//     font-size: var(--font-size-12);
-//     font-weight: 600;
-//     text-transform: uppercase;
-//     letter-spacing: 0.5px;
-// }
-
-// .plan-title {
-//     font-size: var(--font-size-28);
-//     font-weight: 700;
-//     color: var(--color-common-slate);
-//     @media (max-width: 768px) {
-//         font-size: 24px;
-//     }
-// }
-
-// .plan-price {
-//     .price-container {
-//         display: flex;
-//         align-items: flex-start;
-//         gap: 6px;
-//     }
-
-//     .price-number {
-//         font-size: 39px;
-//         font-weight: 700;
-//         color: #4d4d4d;
-//         line-height: 1;
-
-//         @media (max-width: 768px) {
-//             font-size: 42px;
-//         }
-//     }
-
-//     .price-currency {
-//         font-size: 16px;
-//         font-weight: 400;
-//         color: #666666;
-//         line-height: 1;
-//         margin-top: 4px;
-//         margin-left: 4px;
-
-//         @media (max-width: 768px) {
-//             font-size: 14px;
-//         }
-//     }
-
-//     .price-period {
-//         font-size: 18px;
-//         color: #666666;
-//         font-weight: 500;
-
-//         @media (max-width: 768px) {
-//             font-size: 16px;
-//         }
-//     }
-// }
-
-// .plan-description {
-//     .description-text {
-//         font-size: 14px;
-//         color: #666666;
-//         font-style: italic;
-//     }
-// }
-
-// .included-resources {
-//     .resource-boxes {
-//         display: flex;
-//         flex-direction: column;
-//         gap: 8px;
-//         margin-top: 6px;
-//     }
-
-//     .resource-box {
-//         border-radius: 4px;
-//         padding: 4px 2px;
-//         font-size: 14px;
-//         font-weight: 600;
-//         color: #4d4d4d;
-//         text-align: left;
-//     }
-// }
-
-// .section-title {
-//     font-size: 18px;
-//     font-weight: 600;
-//     color: #333333;
-//     margin: 0 0 8px 0;
-// }
-
-// .plan-features {
-//     list-style: none;
-
-//     .feature-item {
-//         padding: 4px 0 !important;
-//         margin-bottom: 0px !important;
-//         color: #4d4d4d;
-//         font-size: 14px;
-//         font-weight: 600;
-//         // padding-left: 20px;
-
-//         .feature-icon {
-//             font-weight: bold;
-//             font-size: 14px;
-//             color: #22c55e;
-//         }
-//     }
-// }
-
-// .plan-button {
-//     width: 65%;
-//     padding: 6px 6px;
-//     border-radius: 4px;
-//     font-size: 15px;
-//     font-weight: 400;
-//     font-family: 'Outfit', sans-serif;
-//     cursor: pointer;
-//     transition: all 0.3s ease;
-//     border: 1px solid;
-//     margin-top: auto;
-
-//     &.primary {
-//         background: #4d4d4d;
-//         color: #ffffff;
-//         border-color: #4d4d4d;
-//         font-weight: 700;
-
-//         &:hover {
-//             background: #333333;
-//             border-color: #333333;
-//         }
-//     }
-
-//     &.secondary {
-//         background: #ffffff;
-//         color: #4d4d4d;
-//         border-color: #4d4d4d;
-
-//         &:hover {
-//             background: #f8f9fa;
-//         }
-//     }
-
-//     @media (max-width: 768px) {
-//         padding: 14px 28px;
-//         font-size: 16px;
-//     }
-// }
-
-// .plan-button-hidden {
-//     padding: 16px 32px;
-//     border-radius: 12px;
-//     font-size: 18px;
-//     font-weight: 600;
-//     font-family: 'Outfit', sans-serif;
-//     background: #f8f9fa;
-//     color: #6c757d;
-//     border: 2px solid #e9ecef;
-//     margin-top: auto;
-//     cursor: not-allowed;
-
-//     @media (max-width: 768px) {
-//         padding: 14px 28px;
-//         font-size: 16px;
-//     }
-// }
-
-// .close-dialog {
-//     position: absolute;
-//     top: 16px;
-//     right: 16px;
-//     z-index: 1000;
-
-//     svg {
-//         width: 12px;
-//         height: 12px;
-//     }
-// }
-
-// .divider {
-//     height: 1px;
-//     background: #e0e0e0;
-// }
-// :host {
-//     min-height: 100px;
-//     display: flex;
-//     flex-direction: column;
-//     justify-content: center;
-//     .close-dialog {
-//         position: absolute;
-//         right: 16px;
-//         top: 16px;
-//         width: 20px;
-//         height: 20px;
-//         line-height: 20px;
-//         @media only screen and (max-width: 768px) {
-//             position: fixed;
-//         }
-//     }
-//     .input-filed-wrapper {
-//         display: flex;
-//         justify-content: center;
-//         flex-direction: column;
-//         position: relative;
-//     }
-//     .login-toggle {
-//         margin-top: 24px;
-//         font-size: 13px;
-//     }
-// }
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 76c0be11..e69de29b 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 +0,0 @@
-// Styles migrated to Tailwind CSS — no custom classes needed.
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 403805bd..e69de29b 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,153 +0,0 @@
-// ── Hover-reveal actions (cannot be done in Tailwind without JS) ─────────────
-.hover-actions {
-    opacity: 0;
-    transition: opacity 0.15s ease;
-    position: absolute;
-    top: 6px;
-    right: 12px;
-    z-index: 10;
-}
-
-.table-row:hover .hover-actions {
-    opacity: 1;
-}
-
-.user-item:hover .user-actions {
-    opacity: 1;
-    visibility: visible;
-}
-
-// ── Skeleton shimmer (keyframe animation — not in Tailwind) ───────────────────
-@keyframes shimmer {
-    0% {
-        background-position: 200% 0;
-    }
-    100% {
-        background-position: -200% 0;
-    }
-}
-
-.skeleton-avatar,
-.skeleton-text,
-.skeleton-button {
-    border-radius: 4px;
-    background: linear-gradient(
-        90deg,
-        var(--proxy-neutral-90) 25%,
-        var(--proxy-neutral-95) 50%,
-        var(--proxy-neutral-90) 75%
-    );
-    background-size: 200% 100%;
-    animation: shimmer 1.5s infinite;
-}
-
-.skeleton-avatar {
-    width: 40px;
-    height: 40px;
-    border-radius: 50%;
-}
-
-.skeleton-name {
-    width: 120px;
-    height: 16px;
-    margin-bottom: 6px;
-}
-.skeleton-email {
-    width: 180px;
-    height: 14px;
-}
-.skeleton-role {
-    width: 80px;
-    height: 14px;
-}
-.skeleton-button {
-    width: 60px;
-    height: 32px;
-}
-
-// .dark-theme .skeleton-avatar,
-// .dark-theme .skeleton-text,
-// .dark-theme .skeleton-button {
-//     background: linear-gradient(
-//         90deg,
-//         var(--proxy-neutral-30) 25%,
-//         var(--proxy-neutral-20) 50%,
-//         var(--proxy-neutral-30) 75%
-//     );
-//     background-size: 200% 100%;
-//     animation: shimmer 1.5s infinite;
-// }
-
-// ── Angular Material table cell resets ───────────────────────────────────────
-table {
-    box-shadow: none !important;
-}
-
-th,
-td {
-    border: 1px solid var(--proxy-neutral-90);
-    padding: 14px;
-    text-align: left;
-}
-td.mat-cell {
-    padding: 10px;
-}
-th {
-    font-weight: 600;
-    height: 22px;
-    padding-left: 12px !important;
-}
-td {
-    font-size: 12px;
-    height: 22px;
-}
-
-.role-column {
-    width: 25% !important;
-}
-.permissions-column {
-    width: 70% !important;
-    overflow: visible;
-    position: relative;
-}
-.permission-column {
-    overflow: visible;
-}
-.permissions-cell-content {
-    min-height: 40px;
-    padding-right: 60px;
-}
-
-// ── ::ng-deep for Material overlay/tooltip (cannot scope otherwise) ───────────
-::ng-deep .btn-danger {
-    background-color: var(--proxy-error-40) !important;
-    color: var(--proxy-neutral-100) !important;
-
-    &:hover,
-    &:focus {
-        background-color: var(--proxy-error-40) !important;
-        filter: brightness(0.85);
-    }
-}
-
-::ng-deep .permissions-tooltip,
-::ng-deep .email-tooltip {
-    background-color: rgba(0, 0, 0, 0.9) !important;
-    color: var(--proxy-neutral-100) !important;
-    font-size: 12px !important;
-    white-space: pre-line !important;
-    border-radius: 4px !important;
-    padding: 10px !important;
-    line-height: 1.4 !important;
-    text-align: left !important;
-}
-
-// ── Mobile overrides for mat-form-field hint ──────────────────────────────────
-.mobile-number-field {
-    @media (max-width: 600px) {
-        margin-bottom: 16px;
-    }
-    @media (max-width: 380px) {
-        margin-bottom: 30px;
-    }
-}
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 e852dfe0..e69de29b 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,666 +0,0 @@
-// Styling handled by Tailwind utility classes in the template.
-/*
-.container {
-    background: var(--color-common-bg);
-    padding: 15px 60px;
-    text-align: left;
-    position: relative;
-    min-height: 600px;
-    height: 100%;
-    z-index: 10;
-
-    @media (max-width: 1024px) {
-        padding: 15px;
-        width: 100%;
-    }
-    @media (max-width: 768px) {
-        padding: 10px;
-        width: 100%;
-    }
-    @media (max-width: 480px) {
-        padding: 8px;
-    }
-
-    .mb-4 {
-        margin-bottom: 24px;
-    }
-
-    .profile-card,
-    .org-card {
-        border-radius: 12px;
-        overflow: hidden;
-    }
-
-    .card-header {
-        padding: 18px 24px;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-    }
-
-    .card-title-group {
-        display: flex;
-        align-items: center;
-        gap: 10px;
-    }
-
-    .card-icon {
-        width: 34px;
-        height: 34px;
-        border-radius: 8px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-shrink: 0;
-    }
-
-    .card-title {
-        font-size: 15px;
-        font-weight: 700;
-        letter-spacing: -0.2px;
-    }
-    .card-subtitle {
-        font-size: 12px;
-        margin-top: 1px;
-    }
-
-    .btn-edit {
-        display: inline-flex !important;
-        align-items: center;
-        gap: 6px;
-        padding: 7px 16px !important;
-        border-radius: 7px !important;
-        font-size: 13px !important;
-        font-weight: 600 !important;
-        line-height: 1 !important;
-        svg {
-            flex-shrink: 0;
-        }
-    }
-
-    .profile-banner {
-        padding: 20px 24px;
-        display: flex;
-        align-items: center;
-        gap: 16px;
-    }
-
-    .avatar-stack {
-        position: relative;
-        flex-shrink: 0;
-    }
-
-    .avatar {
-        width: 56px;
-        height: 56px;
-        border-radius: 14px;
-        background: linear-gradient(135deg, #3b82f6 0%, #7c3aed 100%);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        font-size: 20px;
-        font-weight: 700;
-        color: var(--color-common-white);
-        letter-spacing: -0.5px;
-    }
-
-    .avatar-status {
-        position: absolute;
-        bottom: -2px;
-        right: -2px;
-        width: 13px;
-        height: 13px;
-        border-radius: 50%;
-        background: var(--color-common-green);
-    }
-
-    .profile-name {
-        font-size: 17px;
-        font-weight: 700;
-        letter-spacing: -0.3px;
-    }
-    .profile-email {
-        font-size: 13px;
-        margin-top: 3px;
-    }
-
-    .org-stat-chip {
-        display: inline-flex;
-        align-items: center;
-        gap: 5px;
-        font-size: 11px;
-        font-weight: 600;
-        padding: 4px 10px;
-        border-radius: 20px;
-        margin-top: 8px;
-    }
-
-    // ── VIEW MODE ──────────────────────────────────
-
-    .view-fields {
-        padding: 0;
-        display: flex;
-        flex-direction: row;
-        @media (max-width: 600px) {
-            flex-direction: column;
-        }
-    }
-
-    .view-row {
-        flex: 1;
-        display: flex;
-        align-items: center;
-        gap: 14px;
-        padding: 16px 24px;
-        transition: background 0.12s;
-        &:not(:last-child) {
-            border-right-width: 1px;
-            border-right-style: solid;
-            @media (max-width: 600px) {
-                border-right: none;
-                border-bottom-width: 1px;
-                border-bottom-style: solid;
-            }
-        }
-    }
-
-    .view-field-icon {
-        width: 32px;
-        height: 32px;
-        border-radius: 8px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-shrink: 0;
-    }
-
-    .view-field-body {
-        flex: 1;
-    }
-
-    .view-label {
-        font-size: 10px;
-        font-weight: 700;
-        text-transform: uppercase;
-        letter-spacing: 0.9px;
-        margin-bottom: 4px;
-    }
-
-    .view-value {
-        font-size: 14px;
-        font-weight: 500;
-    }
-    .view-value-empty {
-        font-style: italic;
-        font-weight: 400;
-        font-size: 13px;
-    }
-
-    // ── EDIT / FORM ────────────────────────────────
-
-    .profile-form {
-        padding: 16px 24px 0;
-    }
-
-    .fields-row {
-        display: grid;
-        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
-        gap: 8px 20px;
-        @media (max-width: 768px) {
-            grid-template-columns: 1fr;
-            gap: 4px;
-        }
-    }
-
-    .form-field-wrap {
-        display: flex;
-        flex-direction: column;
-    }
-    .full-width {
-        width: 100%;
-    }
-
-    .form-footer {
-        display: flex;
-        align-items: center;
-        justify-content: flex-end;
-        padding: 8px 0 20px;
-        margin-top: 4px;
-        flex-wrap: wrap;
-        gap: 10px;
-    }
-
-    .form-hint {
-        font-size: 12px;
-    }
-    .form-actions {
-        display: flex;
-        align-items: center;
-        gap: 10px;
-    }
-
-    .btn-cancel {
-        display: inline-flex !important;
-        align-items: center;
-        gap: 6px;
-        // padding: 7px 16px !important;
-        border-radius: 7px !important;
-        font-size: 13px !important;
-        font-weight: 600 !important;
-    }
-
-    .btn-save {
-        display: inline-flex !important;
-        align-items: center;
-        gap: 6px;
-        // padding: 9px 20px !important;
-        border-radius: 7px !important;
-        font-size: 13px !important;
-        font-weight: 600 !important;
-        svg {
-            flex-shrink: 0;
-        }
-    }
-
-    // ── ORG SECTION ───────────────────────────────
-
-    .org-count-badge {
-        font-size: 12px;
-        font-weight: 600;
-        padding: 5px 12px;
-        border-radius: 20px;
-    }
-
-    .org-cell-inner {
-        display: flex;
-        align-items: center;
-        gap: 12px;
-    }
-
-    .org-avatar-sm {
-        width: 32px;
-        height: 32px;
-        border-radius: 7px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        font-size: 11px;
-        font-weight: 700;
-        flex-shrink: 0;
-    }
-
-    .org-name {
-        font-size: 14px;
-        font-weight: 500;
-        display: flex;
-        align-items: center;
-        gap: 6px;
-        flex-wrap: wrap;
-    }
-
-    .current-org {
-        font-weight: 700 !important;
-    }
-
-    .current-badge {
-        display: inline-flex;
-        align-items: center;
-        font-size: 10px;
-        font-weight: 700;
-        text-transform: uppercase;
-        letter-spacing: 0.5px;
-        padding: 2px 8px;
-        border-radius: 20px;
-    }
-
-    .btn-leave {
-        font-size: 12px !important;
-        font-weight: 600 !important;
-        padding: 5px 13px !important;
-        border-radius: 6px !important;
-        line-height: 1.6 !important;
-        min-height: unset !important;
-        height: auto !important;
-    }
-
-    .no-data {
-        text-align: center;
-        font-size: 14px;
-        font-weight: 600;
-        padding: 32px;
-    }
-
-    // ══════════════════════════════════════════════
-    // LIGHT THEME
-    // ══════════════════════════════════════════════
-    &.light-theme {
-        color: var(--color-common-text);
-        background-color: var(--color-common-bg);
-        .profile-card,
-        .org-card {
-            background: var(--color-common-bg);
-            border: 1px solid var(--color-common-border);
-        }
-
-        .card-header {
-            background: var(--color-common-app-bg);
-            border-bottom: 1px solid var(--color-common-border);
-        }
-        .card-icon.blue {
-            background: #eff6ff;
-            svg {
-                stroke: #2563eb;
-            }
-        }
-        .card-icon.green {
-            background: #ecfdf5;
-            svg {
-                stroke: #059669;
-            }
-        }
-        .card-title {
-            color: #111827;
-        }
-        .card-subtitle {
-            color: #9ca3af;
-        }
-
-        .btn-edit {
-            color: #2563eb !important;
-            border-color: #dbeafe !important;
-            background: #eff6ff !important;
-            &:hover {
-                background: #dbeafe !important;
-            }
-        }
-
-        .profile-banner {
-            background: linear-gradient(135deg, rgba(37, 99, 235, 0.04) 0%, transparent 60%);
-            border-bottom: 1px solid var(--color-common-border);
-        }
-
-        .avatar-status {
-            border: 2.5px solid var(--color-common-white);
-        }
-        .profile-name {
-            color: #111827;
-        }
-        .profile-email {
-            color: #9ca3af;
-        }
-        .org-stat-chip {
-            background: #eff6ff;
-            color: #2563eb;
-            border: 1px solid #dbeafe;
-        }
-
-        .view-row {
-            border-right-color: var(--color-common-border);
-            border-bottom-color: var(--color-common-border);
-            &:hover {
-                background: var(--color-common-app-bg);
-            }
-        }
-        .view-field-icon {
-            background: #eff6ff;
-            svg {
-                stroke: #2563eb;
-            }
-        }
-        .view-label {
-            color: #9ca3af;
-        }
-        .view-value {
-            color: #111827;
-        }
-        .view-value-empty {
-            color: #9ca3af;
-        }
-
-        .form-hint {
-            color: #9ca3af;
-        }
-
-        .btn-cancel {
-            color: var(--color-common-text) !important;
-            border-color: var(--color-common-border) !important;
-            background: var(--color-common-bg) !important;
-            &:hover {
-                border-color: var(--color-common-grey) !important;
-            }
-        }
-        .btn-save {
-            background-color: #2563eb !important;
-            color: #ffffff !important;
-            &:hover {
-                background-color: #1d4ed8 !important;
-            }
-        }
-
-        .org-avatar-sm {
-            background: var(--color-common-bg-light);
-            border: 1px solid var(--color-common-border);
-            color: var(--color-common-grey);
-            &.current {
-                background: #eff6ff;
-                border-color: #dbeafe;
-                color: #2563eb;
-            }
-        }
-        .org-name {
-            color: var(--color-common-text);
-        }
-        .current-org {
-            color: #111827 !important;
-        }
-        .current-badge {
-            color: #059669;
-            background: #ecfdf5;
-            border: 1px solid #a7f3d0;
-        }
-        .btn-leave {
-            background-color: rgba(220, 38, 38, 0.06) !important;
-            color: var(--proxy-error-40) !important;
-            border: 1px solid rgba(220, 38, 38, 0.2) !important;
-            &:hover {
-                background-color: rgba(220, 38, 38, 0.12) !important;
-            }
-        }
-        .org-count-badge {
-            background: var(--color-common-bg-light);
-            color: var(--color-common-grey);
-            border: 1px solid var(--color-common-border);
-        }
-        .no-data {
-            color: var(--color-common-grey);
-        }
-        .success-message {
-            color: var(--color-common-green);
-        }
-        .error-message {
-            color: var(--proxy-error-40);
-        }
-    }
-
-    // ══════════════════════════════════════════════
-    // DARK THEME — background stays transparent
-    // No ::ng-deep needed — ViewEncapsulation.None
-    // ══════════════════════════════════════════════
-    &.dark-theme {
-        color: #e5e7eb;
-
-        h2,
-        h3 {
-            color: #ffffff;
-        }
-
-        .profile-card,
-        .org-card {
-            border: 1px solid rgba(255, 255, 255, 0.08) !important;
-        }
-
-        .card-header {
-            background: rgba(0, 0, 0, 0.22) !important;
-            border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
-        }
-        .card-icon.blue {
-            background: rgba(74, 158, 255, 0.2) !important;
-            svg {
-                stroke: #6ab4ff;
-            }
-        }
-        .card-icon.green {
-            background: rgba(50, 215, 75, 0.18) !important;
-            svg {
-                stroke: #4dd96a;
-            }
-        }
-        .card-title {
-            color: #ffffff !important;
-        }
-        .card-subtitle {
-            color: #c5c5ca !important;
-        }
-
-        .btn-edit {
-            color: #6ab4ff !important;
-            border-color: rgba(74, 158, 255, 0.4) !important;
-            background: rgba(74, 158, 255, 0.15) !important;
-            &:hover {
-                background: rgba(74, 158, 255, 0.25) !important;
-            }
-        }
-
-        .profile-banner {
-            background: linear-gradient(135deg, rgba(74, 158, 255, 0.08) 0%, transparent 60%) !important;
-            border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
-        }
-
-        .avatar-status {
-            border: 2.5px solid #2c2c2e !important;
-        }
-        .profile-name {
-            color: #ffffff !important;
-        }
-        .profile-email {
-            color: #c5c5ca !important;
-        }
-        .org-stat-chip {
-            background: rgba(74, 158, 255, 0.18) !important;
-            color: #6ab4ff !important;
-            border: 1px solid rgba(74, 158, 255, 0.35) !important;
-        }
-
-        .view-row {
-            border-right-color: rgba(255, 255, 255, 0.12) !important;
-            border-bottom-color: rgba(255, 255, 255, 0.12) !important;
-            &:hover {
-                background: rgba(255, 255, 255, 0.05) !important;
-            }
-        }
-        .view-field-icon {
-            background: rgba(74, 158, 255, 0.18) !important;
-            svg {
-                stroke: #6ab4ff;
-            }
-        }
-        .view-label {
-            color: #c5c5ca !important;
-        }
-        .view-value {
-            color: #ffffff !important;
-        }
-        .view-value-empty {
-            color: #9ca3af !important;
-        }
-
-        .form-hint {
-            color: #c5c5ca !important;
-        }
-
-        .btn-cancel {
-            color: #e5e7eb !important;
-            border-color: rgba(255, 255, 255, 0.4) !important;
-            background: transparent !important;
-            &:hover {
-                border-color: rgba(255, 255, 255, 0.7) !important;
-                color: #ffffff !important;
-            }
-        }
-        .btn-save {
-            background-color: #4a9eff !important;
-            color: #ffffff !important;
-            &:hover {
-                background-color: #5aaeff !important;
-            }
-        }
-
-        .org-avatar-sm {
-            background: rgba(255, 255, 255, 0.1) !important;
-            border: 1px solid rgba(255, 255, 255, 0.18) !important;
-            color: #c5c5ca !important;
-            &.current {
-                background: rgba(74, 158, 255, 0.2) !important;
-                border-color: rgba(74, 158, 255, 0.4) !important;
-                color: #6ab4ff !important;
-            }
-        }
-        .org-name {
-            color: #e5e7eb !important;
-        }
-        .current-org {
-            color: #ffffff !important;
-        }
-        .current-badge {
-            color: #4dd96a !important;
-            background: rgba(50, 215, 75, 0.15) !important;
-            border: 1px solid rgba(50, 215, 75, 0.3) !important;
-        }
-        .btn-leave {
-            background-color: rgba(255, 69, 58, 0.15) !important;
-            color: #ff6b63 !important;
-            border: 1px solid rgba(255, 69, 58, 0.35) !important;
-            &:hover {
-                background-color: rgba(255, 69, 58, 0.25) !important;
-            }
-        }
-        .org-count-badge {
-            background: rgba(255, 255, 255, 0.1) !important;
-            color: #c5c5ca !important;
-            border: 1px solid rgba(255, 255, 255, 0.18) !important;
-        }
-        .mat-card {
-            background-color: transparent !important;
-        }
-        .no-data {
-            color: #c5c5ca !important;
-        }
-        .success-message {
-            color: var(--color-common-green) !important;
-        }
-        .error-message {
-            color: var(--proxy-error-80) !important;
-        }
-    }
-
-    // ── RESPONSIVE ─────────────────────────────────
-    @media (max-width: 768px) {
-        .org-table {
-            font-size: 12px;
-        }
-        th,
-        td {
-            padding: 8px;
-        }
-    }
-    @media (max-width: 480px) {
-        .org-table {
-            width: 100%;
-            font-size: 12px;
-        }
-        .fields-row {
-            grid-template-columns: 1fr;
-        }
-    }
-}
-*/
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 96a1a69b..0f7d698f 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
@@ -5,12 +5,6 @@
 @custom-variant dark (&:where(.dark, .dark *));
 
 :host {
-    display: block !important;
-    height: inherit !important;
-    min-height: inherit !important;
-    max-height: inherit !important;
-    background: transparent !important;
-
     // Prevent client-page CSS from bleeding into the widget.
     // Shadow DOM already blocks inherited styles at the boundary,
     // but these resets guard against any CSS that targets :host from outside.
diff --git a/apps/36-blocks-widget/src/assets/scss/component/_form-field.scss b/apps/36-blocks-widget/src/assets/scss/component/_form-field.scss
deleted file mode 100644
index 8beb483b..00000000
--- a/apps/36-blocks-widget/src/assets/scss/component/_form-field.scss
+++ /dev/null
@@ -1,118 +0,0 @@
-// // Default theme changes
-// .mat-form-field {
-//     .mat-form-field-wrapper {
-//         .mat-form-field-subscript-wrapper {
-//             margin-top: 5px;
-//             padding-left: 0px;
-//             .mat-error {
-//                 font-size: 12px;
-//             }
-//         }
-//         .mat-form-field-flex {
-//             font-size: 14px;
-//             line-height: 1.225;
-//             .mat-form-field-infix {
-//                 .mat-form-field-label-wrapper {
-//                     .mat-form-field-label {
-//                         color: var(--color-common-slate);
-//                     }
-//                 }
-//             }
-//             .mat-form-field-infix {
-//                 padding: 5px 0 10px 0 !important;
-//                 .mat-input-element {
-//                     &::-webkit-input-placeholder {
-//                         /* Chrome/Opera/Safari */
-//                         color: var(--color-common-grey);
-//                         font-weight: normal;
-//                     }
-//                     &::-moz-placeholder {
-//                         /* Firefox 19+ */
-//                         color: var(--color-common-grey);
-//                         font-weight: normal;
-//                     }
-//                     &:-ms-input-placeholder {
-//                         /* IE 10+ */
-//                         color: var(--color-common-grey);
-//                         font-weight: normal;
-//                     }
-//                     &:-moz-placeholder {
-//                         /* Firefox 18- */
-//                         color: var(--color-common-grey);
-//                         font-weight: normal;
-//                     }
-//                 }
-//                 // .mat-form-field-label-wrapper {
-//                 //     .mat-form-field-required-marker {
-//                 //         display: none;
-//                 //     }
-//                 // }
-//                 &.mat-form-field-appearance-outline {
-//                     .mat-form-field-outline {
-//                         background-color: var(--color-common-white) !important;
-//                     }
-//                 }
-//             }
-//             .mat-form-field-flex {
-//                 .mat-form-field-outline {
-//                     .mat-form-field-outline-start {
-//                         border-radius: var(--border-common-radius-4) 0 0 var(--border-common-radius-4);
-//                         min-width: var(--border-common-radius-4);
-//                     }
-//                     .mat-form-field-outline-end {
-//                         border-radius: 0 var(--border-common-radius-4) var(--border-common-radius-4) 0;
-//                     }
-//                 }
-//             }
-//         }
-//         .mat-form-field-hint-wrapper {
-//             .mat-hint {
-//                 color: var(--color-common-slate);
-//                 font-size: 12px;
-//                 line-height: 16px;
-//             }
-//         }
-//     }
-
-//     &.no-space {
-//         .mat-form-field-wrapper {
-//             padding-bottom: 0px !important;
-//         }
-//     }
-// }
-
-// .mat-form-field-appearance-outline.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label,
-// .mat-form-field-appearance-outline.mat-form-field-can-float
-//     .mat-input-server:focus
-//     + .mat-form-field-label-wrapper
-//     .mat-form-field-label {
-//     transform: translateY(-15px) scale(0.7) !important;
-// }
-
-// .mat-form-field-appearance-outline .mat-form-field-label {
-//     top: 18px !important;
-// }
-
-// /* Firefox hide */
-// input[matinput][type='number'] {
-//     -moz-appearance: textfield;
-// }
-// /* Chrome, Safari, Edge, Opera */
-// input[matinput]::-webkit-outer-spin-button,
-// input[matinput]::-webkit-inner-spin-button {
-//     -webkit-appearance: none;
-//     margin: 0;
-// }
-
-// // Material Form Error
-// .mat-error {
-//     font-size: 12px;
-// }
-
-// // Used to display only first mat-error
-// mat-error {
-//     display: none !important;
-//     &:first-child {
-//         display: block !important;
-//     }
-// }
diff --git a/apps/36-blocks-widget/src/assets/scss/component/_tabs.scss b/apps/36-blocks-widget/src/assets/scss/component/_tabs.scss
deleted file mode 100644
index 98889204..00000000
--- a/apps/36-blocks-widget/src/assets/scss/component/_tabs.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-// .user-management-tabs {
-//     .mat-tab-header {
-//         .mat-tab-labels {
-//             .mat-tab-label {
-//                 font-weight: 600 !important;
-//                 color: var(--color-common-black) !important;
-//                 opacity: 1 !important;
-//                 &:focus {
-//                     color: var(--color-common-black) !important;
-//                 }
-//             }
-//         }
-//     }
-// }
-
-// .nested-tabs {
-//     .mat-tab-header {
-//         .mat-tab-labels {
-//             .mat-tab-label {
-//                 font-weight: 500 !important;
-//             }
-//         }
-//     }
-// }
diff --git a/apps/36-blocks-widget/src/assets/scss/layout/_display.scss b/apps/36-blocks-widget/src/assets/scss/layout/_display.scss
deleted file mode 100644
index 390f0f10..00000000
--- a/apps/36-blocks-widget/src/assets/scss/layout/_display.scss
+++ /dev/null
@@ -1,94 +0,0 @@
-.d-none {
-    display: none;
-}
-
-.d-block {
-    display: block !important;
-}
-
-.d-inline-block {
-    display: inline-block !important;
-}
-
-.d-flex {
-    display: flex !important;
-}
-
-.d-inline-flex {
-    display: inline-flex !important;
-}
-
-.d-grid {
-    display: grid !important;
-}
-
-.flex-column {
-    flex-direction: column;
-}
-
-.flex-row {
-    flex-direction: row;
-}
-
-.justify-content-between {
-    justify-content: space-between;
-}
-
-.justify-content-start {
-    justify-content: start;
-}
-
-.justify-content-end {
-    justify-content: flex-end;
-}
-
-.align-items-center {
-    align-items: center;
-}
-
-.align-items-start {
-    align-items: flex-start;
-}
-
-.align-items-end {
-    align-items: flex-end;
-}
-
-.align-items-stretch {
-    align-items: stretch;
-}
-
-.gap-1 {
-    gap: 4px;
-}
-.gap-2 {
-    gap: 8px;
-}
-.gap-3 {
-    gap: 16px;
-}
-.gap-4 {
-    gap: 24px;
-}
-.gap-5 {
-    gap: 32px;
-}
-
-.text-center {
-    text-align: center !important;
-}
-
-.text-left {
-    text-align: left !important;
-}
-
-.text-right {
-    text-align: right !important;
-}
-.flex-wrap {
-    flex-wrap: wrap !important;
-}
-
-.justify-content-center {
-    justify-content: center !important;
-}
diff --git a/apps/36-blocks-widget/src/assets/scss/layout/_spacing.scss b/apps/36-blocks-widget/src/assets/scss/layout/_spacing.scss
deleted file mode 100644
index 5a4a9b79..00000000
--- a/apps/36-blocks-widget/src/assets/scss/layout/_spacing.scss
+++ /dev/null
@@ -1,265 +0,0 @@
-.m-0 {
-    margin: 0 !important;
-}
-.mt-0,
-.my-0 {
-    margin-top: 0 !important;
-}
-.mr-0,
-.mx-0 {
-    margin-right: 0 !important;
-}
-.mb-0,
-.my-0 {
-    margin-bottom: 0 !important;
-}
-.ml-0,
-.mx-0 {
-    margin-left: 0 !important;
-}
-.m-1 {
-    margin: 0.25rem !important;
-}
-.mt-1,
-.my-1 {
-    margin-top: 0.25rem !important;
-}
-.mr-1,
-.mx-1 {
-    margin-right: 0.25rem !important;
-}
-.mb-1,
-.my-1 {
-    margin-bottom: 0.25rem !important;
-}
-.ml-1,
-.mx-1 {
-    margin-left: 0.25rem !important;
-}
-.m-2 {
-    margin: 0.5rem !important;
-}
-.mt-2,
-.my-2 {
-    margin-top: 0.5rem !important;
-}
-.mr-2,
-.mx-2 {
-    margin-right: 0.5rem !important;
-}
-.mb-2,
-.my-2 {
-    margin-bottom: 0.5rem !important;
-}
-.ml-2,
-.mx-2 {
-    margin-left: 0.5rem !important;
-}
-.m-3 {
-    margin: 1rem !important;
-}
-.mt-3,
-.my-3 {
-    margin-top: 1rem !important;
-}
-.mr-3,
-.mx-3 {
-    margin-right: 1rem !important;
-}
-.mb-3,
-.my-3 {
-    margin-bottom: 1rem !important;
-}
-.ml-3,
-.mx-3 {
-    margin-left: 1rem !important;
-}
-.m-4 {
-    margin: 1.5rem !important;
-}
-.mt-4,
-.my-4 {
-    margin-top: 1.5rem !important;
-}
-.mr-4,
-.mx-4 {
-    margin-right: 1.5rem !important;
-}
-.mb-4,
-.my-4 {
-    margin-bottom: 1.5rem !important;
-}
-.ml-4,
-.mx-4 {
-    margin-left: 1.5rem !important;
-}
-.m-5 {
-    margin: 3rem !important;
-}
-.mt-5,
-.my-5 {
-    margin-top: 3rem !important;
-}
-.mr-5,
-.mx-5 {
-    margin-right: 3rem !important;
-}
-.mb-5,
-.my-5 {
-    margin-bottom: 3rem !important;
-}
-.ml-5,
-.mx-5 {
-    margin-left: 3rem !important;
-}
-.p-0 {
-    padding: 0 !important;
-}
-.pt-0,
-.py-0 {
-    padding-top: 0 !important;
-}
-.pr-0,
-.px-0 {
-    padding-right: 0 !important;
-}
-.pb-0,
-.py-0 {
-    padding-bottom: 0 !important;
-}
-.pl-0,
-.px-0 {
-    padding-left: 0 !important;
-}
-.p-1 {
-    padding: 0.25rem !important;
-}
-.pt-1,
-.py-1 {
-    padding-top: 0.25rem !important;
-}
-.pr-1,
-.px-1 {
-    padding-right: 0.25rem !important;
-}
-.pb-1,
-.py-1 {
-    padding-bottom: 0.25rem !important;
-}
-.pl-1,
-.px-1 {
-    padding-left: 0.25rem !important;
-}
-.p-2 {
-    padding: 0.5rem !important;
-}
-.pt-2,
-.py-2 {
-    padding-top: 0.5rem !important;
-}
-.pr-2,
-.px-2 {
-    padding-right: 0.5rem !important;
-}
-.pb-2,
-.py-2 {
-    padding-bottom: 0.5rem !important;
-}
-.pl-2,
-.px-2 {
-    padding-left: 0.5rem !important;
-}
-.p-3 {
-    padding: 1rem !important;
-}
-.pt-3,
-.py-3 {
-    padding-top: 1rem !important;
-}
-.pr-3,
-.px-3 {
-    padding-right: 1rem !important;
-}
-.pb-3,
-.py-3 {
-    padding-bottom: 1rem !important;
-}
-.pl-3,
-.px-3 {
-    padding-left: 1rem !important;
-}
-.p-4 {
-    padding: 1.5rem !important;
-}
-.pt-4,
-.py-4 {
-    padding-top: 1.5rem !important;
-}
-.pr-4,
-.px-4 {
-    padding-right: 1.5rem !important;
-}
-.pb-4,
-.py-4 {
-    padding-bottom: 1.5rem !important;
-}
-.pl-4,
-.px-4 {
-    padding-left: 1.5rem !important;
-}
-.p-5 {
-    padding: 3rem !important;
-}
-.pt-5,
-.py-5 {
-    padding-top: 3rem !important;
-}
-.pr-5,
-.px-5 {
-    padding-right: 3rem !important;
-}
-.pb-5,
-.py-5 {
-    padding-bottom: 3rem !important;
-}
-.pl-5,
-.px-5 {
-    padding-left: 3rem !important;
-}
-
-@media (max-width: 768px) {
-    .mb-sm-20 {
-        margin-bottom: 20px;
-    }
-    .mt-sm-20 {
-        margin-top: 20px;
-    }
-}
-
-.mb-20 {
-    margin-bottom: 20px !important;
-}
-.mt-20 {
-    margin-top: 20px !important;
-}
-.mb-30 {
-    margin-bottom: 30px !important;
-}
-.mt-30 {
-    margin-top: 30px !important;
-}
-.my-20 {
-    margin-top: 20px !important;
-    margin-bottom: 20px !important;
-}
-
-.pd-1 {
-    padding: 1px !important;
-}
-
-.ml-auto {
-    margin-left: auto !important;
-}
-.mr-auto {
-    margin-right: auto !important;
-}
diff --git a/apps/36-blocks-widget/src/environments/environment.test.ts b/apps/36-blocks-widget/src/environments/environment.test.ts
deleted file mode 100644
index ad8823f6..00000000
--- a/apps/36-blocks-widget/src/environments/environment.test.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-// This file can be replaced during build by using the `fileReplacements` array.
-// `ng build` replaces `environment.ts` with `environment.prod.ts`.
-// The list of file replacements can be found in `angular.json`.
-
-import { envVariables } from './env-variables';
-
-export const environment = {
-    production: false,
-    env: 'test',
-    apiUrl: 'https://apitest.msg91.com/api',
-    baseUrl: 'https://test.proxy.msg91.com',
-    msgMidProxy: '',
-    ...envVariables,
-};
-
-/*
- * For easier debugging in development mode, you can import the following file
- * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
- *
- * This import should be commented out in production mode because it will have a negative impact
- * on performance if an error is thrown.
- */
-// import 'zone.js/plugins/zone-error';  // Included with Angular CLI.
diff --git a/apps/36-blocks-widget/src/otp-global.scss b/apps/36-blocks-widget/src/otp-global.scss
deleted file mode 100644
index 160e6605..00000000
--- a/apps/36-blocks-widget/src/otp-global.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-// .otp-verification-dialog {
-//     width: 380px;
-//     min-height: 350px;
-//     font-size: 15px;
-//     text-align: center;
-//     display: inherit;
-//     flex-direction: column;
-//     align-items: inherit;
-//     box-shadow: 0 11px 15px -7px #0003, 0 24px 38px 3px #00000024, 0 9px 46px 8px #0000001f;
-//     background: transparent;
-//     color: #000000de;
-//     z-index: 999999 !important;
-//     border-radius: 10px;
-//     padding: 25px 32px;
-//     justify-content: center;
-//     position: relative;
-//     overflow-y: auto;
-//     @media only screen and (max-width: 768px) {
-//         width: 90% !important;
-//         height: 80%;
-//         display: flex;
-//         align-items: center;
-//         justify-content: center;
-//     }
-//     &.dark-theme {
-//         background: transparent;
-//         color: #ffffff !important;
-//     }
-// }
diff --git a/apps/36-blocks-widget/src/styles.scss b/apps/36-blocks-widget/src/styles.scss
index 297ec805..70347989 100644
--- a/apps/36-blocks-widget/src/styles.scss
+++ b/apps/36-blocks-widget/src/styles.scss
@@ -1,10 +1,4 @@
-/* Layout*/
-@use 'assets/scss/layout/spacing';
-@use 'assets/scss/layout/display';
-
 /* Components*/
-@use 'assets/scss/component/form-field';
-@use 'assets/scss/component/tabs';
 @use '../../shared/scss/global';
 
 /* Widget shared UI utilities */
@@ -63,7 +57,3 @@ proxy-auth,
     font-family: 'Inter', sans-serif;
     -webkit-font-smoothing: antialiased;
 }
-
-* {
-    box-sizing: border-box;
-}
diff --git a/apps/36-blocks/src/app/features/create-feature/create-feature.component.scss b/apps/36-blocks/src/app/features/create-feature/create-feature.component.scss
index e1d66c2b..6d8b7cc6 100644
--- a/apps/36-blocks/src/app/features/create-feature/create-feature.component.scss
+++ b/apps/36-blocks/src/app/features/create-feature/create-feature.component.scss
@@ -9,46 +9,6 @@
     border-color: var(--color-dark-accent) !important;
 }
 
-// Show Configure column edit button only on row hover
-// .configure-methods-table {
-//     tr.mat-row,
-//     tr.mat-mdc-row {
-//         .mat-column-configure button {
-//             opacity: 0;
-//             transition: opacity 0.15s ease;
-//         }
-//         &:hover .mat-column-configure button {
-//             opacity: 1;
-//         }
-//     }
-//     th {
-//         font-size: var(--font-size-common-14) !important;
-//     }
-// }
-
-// Fix table borders
-// .default-table {
-//     .mat-mdc-row {
-//         border-bottom: 1px solid rgba(0, 0, 0, 0.12);
-
-//         &:last-child {
-//             border-bottom: 1px solid rgba(0, 0, 0, 0.12);
-//         }
-//     }
-
-//     .mat-mdc-header-row {
-//         border-bottom: 2px solid rgba(0, 0, 0, 0.12);
-//     }
-
-//     .mat-mdc-cell,
-//     .mat-mdc-header-cell {
-//         border-right: 1px solid rgba(0, 0, 0, 0.12);
-
-//         &:last-child {
-//             border-right: none;
-//         }
-//     }
-// }
 .organization-details-form {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
diff --git a/apps/36-blocks/src/assets/proxy-auth/test-widget.html b/apps/36-blocks/src/assets/proxy-auth/test-widget.html
deleted file mode 100644
index fba7d62d..00000000
--- a/apps/36-blocks/src/assets/proxy-auth/test-widget.html
+++ /dev/null
@@ -1,88 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-    <head>
-        <meta charset="UTF-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>Proxy Auth Widget - Single File Test</title>
-        <style>
-            body {
-                margin: 0;
-                padding: 20px;
-                font-family: system-ui, -apple-system, sans-serif;
-                background: #f5f5f5;
-            }
-            .test-container {
-                max-width: 600px;
-                margin: 0 auto;
-                background: white;
-                padding: 20px;
-                border-radius: 8px;
-                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-            }
-            h1 {
-                color: #333;
-                margin-top: 0;
-            }
-            .info {
-                background: #e3f2fd;
-                padding: 12px;
-                border-radius: 4px;
-                margin-bottom: 20px;
-                font-size: 14px;
-            }
-            #YOUR_REFERENCE_ID {
-                min-height: 200px;
-                border: 2px dashed #ccc;
-                border-radius: 4px;
-                padding: 20px;
-            }
-        </style>
-    </head>
-    <body>
-        <div class="test-container">
-            <h1>🚀 Proxy Auth Widget Test</h1>
-            <div class="info">
-                <strong>Test Status:</strong> Single-file bundle (proxy-auth.js)<br />
-                <strong>Bundle Size:</strong> ~1.3 MB (includes CSS + all assets)<br />
-                <strong>Configuration:</strong> Replace YOUR_REFERENCE_ID with your actual reference ID
-            </div>
-
-            <!-- Widget container -->
-            <div id="YOUR_REFERENCE_ID"></div>
-        </div>
-
-        <!-- Configuration -->
-        <script type="text/javascript">
-            var configuration = {
-                referenceId: 'YOUR_REFERENCE_ID', // REQUIRED: Replace with actual ID
-                theme: 'system', // 'system' | 'light' | 'dark'
-                target: '_self', // '_self' | '_blank'
-                // loginRedirectUrl: 'https://example.com/dashboard',
-                success: function (data) {
-                    console.log('✅ Login success', data);
-                    alert('Login successful! Check console for details.');
-                },
-                failure: function (error) {
-                    console.error('❌ Login failed', error);
-                    alert('Login failed. Check console for details.');
-                },
-            };
-        </script>
-
-        <!-- Load the widget - Single JS file includes everything -->
-        <script type="text/javascript">
-            var scriptElement = document.createElement('script');
-            scriptElement.src = './proxy-auth.js'; // Single file - no external dependencies
-            scriptElement.onload = function () {
-                console.log('✅ Widget script loaded');
-                console.log('📦 Bundle includes: JS + CSS + Fonts (inlined)');
-                console.log('🎯 Initializing widget...');
-                initVerification(configuration);
-            };
-            scriptElement.onerror = function () {
-                console.error('❌ Failed to load widget script');
-            };
-            document.body.appendChild(scriptElement);
-        </script>
-    </body>
-</html>
diff --git a/apps/36-blocks/src/assets/scss/base/_dark-theme.scss b/apps/36-blocks/src/assets/scss/base/_dark-theme.scss
index e8f6e232..3c6b6c0b 100644
--- a/apps/36-blocks/src/assets/scss/base/_dark-theme.scss
+++ b/apps/36-blocks/src/assets/scss/base/_dark-theme.scss
@@ -9,10 +9,8 @@ body.dark-theme {
     --color-common-silver: rgba(123, 127, 130, 0.07);
 
     // New design color variables
-    --color-dark-primary: #171c26;
     --color-dark-accent: #19e6ce;
     --color-dark-accent-light: #19e6ce1a;
-    --color-dark-muted: #a7afbe;
 
     --color-common-bg: var(--color-common-dark);
     --color-common-text: var(--color-common-smoke);
@@ -32,33 +30,5 @@ body.dark-theme {
     // Primary Color
     --color-common-primary: #3f51b5;
     --color-common-primary-light: rgba(80, 103, 230, 0.12);
-    --color-common-primary-dark: #29379d;
-    --color-common-primary-light-hover: rgb(80 103 230 / 32%);
-
     --color-link-color: blue;
-
-    // Table Color variables
-    --color-table-head: var(--color-common-smoke);
-    --color-table-cell: var(--color-common-smoke);
-    --color-table-head-border: var(--color-common-slate);
-    --color-table-cell-border: var(--color-common-slate);
-
-    // Sidenav colors variables
-    --color-sidenav-expanded-background: var(--color-common-primary-light);
-    --color-sidenav-border: #e1e4e8;
-    --color-sidenav-icon: var(--color-common-grey);
-
-    --color-sidenav-menu-link-background: var(--color-common-white);
-    --color-sidenav-menu-link-icon: var(--color-common-grey);
-    --color-sidenav-menu-link-text: var(--color-common-grey);
-
-    --color-sidenav-menu-hover-link-background: var(--color-common-primary);
-    --color-sidenav-menu-hover-link-text: var(--color-common-white);
-    --color-sidenav-menu-hover-link-icon: var(--color-common-white);
-
-    --color-sidenav-menu-active-link-background: var(--color-common-primary);
-    --color-sidenav-menu-active-link-text: var(--color-common-white);
-    --color-sidenav-menu-active-link-icon: var(--color-common-white);
-
-    --color-common-sidenav-shadow: 1px 0px 4px rgba(0, 0, 0, 0.5);
 }
diff --git a/apps/36-blocks/src/assets/scss/base/_default-variables.scss b/apps/36-blocks/src/assets/scss/base/_default-variables.scss
index acda8f2a..bcd4e63a 100644
--- a/apps/36-blocks/src/assets/scss/base/_default-variables.scss
+++ b/apps/36-blocks/src/assets/scss/base/_default-variables.scss
@@ -1,60 +1,32 @@
 :root {
     // Border
-    --border-common-radius: 8px;
     --border-common-radius-4: 4px;
 
-    --font-family-common: 'DM Sans', sans-serif;
-
-    // Common Font Size
-    --font-size-common-10: 10px;
-    --font-size-common-11: 11px;
-    --font-size-common-12: 12px;
-    --font-size-common-14: 14px;
-    --font-size-common-20: 20px;
-    --font-size-common-24: 24px;
-
     // Common color
     --color-common-green: #008000;
     --color-common-scrollbar: 0, 0, 0;
     --color-common-hover: var(--color-common-silver);
 
     // New design color variables
-    --color-dark-primary: #171c26;
     --color-dark-accent: #19e6ce;
     --color-dark-accent-light: #19e6ce1a;
-    --color-dark-muted: #a7afbe;
-
-    // #1 - Hello
-    --color-hello-primary-dark: #8c5d00;
-    --color-hello-primary-light: rgba(242, 190, 85, 0.17);
 
     // #2 - Email
     --color-email-primary: #cc5229;
-    --color-email-primary-dark: #8c2e0e;
     --color-email-primary-light: rgba(204, 82, 41, 0.12);
-    --color-email-primary-hover: #af4622;
 
     // #3 - WhatsApp
     --color-whatsApp-primary: #29a653;
-    --color-whatsApp-primary-dark: #307368;
     --color-whatsApp-primary-light: rgba(111, 202, 113, 0.16);
-    --color-whatsApp-primary-hover: #238b45;
 
     // #7 - Voice
-    --color-voice-primary: #696bef;
-    --color-voice-primary-dark: #3a3ba6;
     --color-voice-primary-light: rgba(105, 107, 239, 0.12);
 
     // #8 - ShortURL
     --color-short-url-primary: #de8644;
-    --color-short-url-primary-dark: #804f13;
     --color-short-url-primary-light: rgba(229, 142, 34, 0.12);
 
     // #10 - OTP
     --color-otp-primary: #1157a6;
-    --color-otp-primary-dark: #0a3566;
     --color-otp-primary-light: rgba(56, 146, 224, 0.12);
-
-    // mat-form-field variables
-    --custom-mat-form-field-height: 48px;
 }
diff --git a/apps/36-blocks/src/assets/scss/base/_light-theme.scss b/apps/36-blocks/src/assets/scss/base/_light-theme.scss
index 957702b3..f4e652d7 100644
--- a/apps/36-blocks/src/assets/scss/base/_light-theme.scss
+++ b/apps/36-blocks/src/assets/scss/base/_light-theme.scss
@@ -9,13 +9,6 @@ body.light-theme {
     --color-common-white: #ffffff;
     --color-common-black: #000000;
 
-    --new-color-common-primary: #171c26;
-    --new-color-common-secondary: #7b879d;
-    --new-color-common-accent: #19e6ce;
-    --new-color-common-accent-light: #19e6ce1a;
-    --new-color-common-muted: #a7afbe;
-    --new-color-common-light: #f0f2f4;
-
     --color-common-silver: rgba(123, 127, 130, 0.07);
     --color-common-bg: var(--color-common-white);
     --color-common-text: var(--color-common-slate);
@@ -40,33 +33,5 @@ body.light-theme {
     // Primary Color
     --color-common-primary: #3f51b5;
     --color-common-primary-light: rgba(80, 103, 230, 0.12);
-    --color-common-primary-dark: #29379d;
-    --color-common-primary-light-hover: rgb(80 103 230 / 32%);
-
     --color-link-color: blue;
-
-    // Table Color variables
-    --color-table-head: var(--color-common-slate);
-    --color-table-cell: var(--color-common-slate);
-    --color-table-head-border: var(--color-common-smoke);
-    --color-table-cell-border: var(--color-common-smoke);
-
-    // Sidenav colors variables
-    --color-sidenav-expanded-background: var(--color-common-primary-light);
-    --color-sidenav-border: #e1e4e8;
-    --color-sidenav-icon: var(--color-common-grey);
-
-    --color-sidenav-menu-link-background: var(--color-common-white);
-    --color-sidenav-menu-link-icon: var(--color-common-grey);
-    --color-sidenav-menu-link-text: var(--color-common-grey);
-
-    --color-sidenav-menu-hover-link-background: var(--color-common-primary);
-    --color-sidenav-menu-hover-link-text: var(--color-common-white);
-    --color-sidenav-menu-hover-link-icon: var(--color-common-white);
-
-    --color-sidenav-menu-active-link-background: var(--color-common-primary);
-    --color-sidenav-menu-active-link-text: var(--color-common-white);
-    --color-sidenav-menu-active-link-icon: var(--color-common-white);
-
-    --color-common-sidenav-shadow: 1px 0px 4px rgba(0, 0, 0, 0.2);
 }
diff --git a/apps/36-blocks/src/assets/scss/base/_reset.scss b/apps/36-blocks/src/assets/scss/base/_reset.scss
deleted file mode 100644
index fd8c5cb1..00000000
--- a/apps/36-blocks/src/assets/scss/base/_reset.scss
+++ /dev/null
@@ -1,67 +0,0 @@
-// *,
-// *::before,
-// *::after {
-//     box-sizing: border-box;
-// }
-// article,
-// aside,
-// figcaption,
-// figure,
-// footer,
-// header,
-// hgroup,
-// main,
-// nav,
-// section {
-//     display: block;
-// }
-
-// a {
-//     text-decoration: none;
-// }
-// body {
-//     margin: 0;
-//     font-size: 1rem;
-//     font-weight: 400;
-//     line-height: 1.5;
-//     text-align: left;
-//     cursor: default;
-//     color: var(--color-common-text);
-//     background-color: var(--color-common-bg);
-//     font-family: var(--font-family-common);
-//     -webkit-text-size-adjust: 100%;
-// }
-
-// .mat-form-field-appearance-outline .mat-form-field-flex {
-//     font-size: 14px;
-//     // line-height: 1.225;
-// }
-// .mat-select-arrow-wrapper {
-//     vertical-align: baseline !important;
-// }
-
-// * {
-//     scrollbar-width: thin;
-//     scrollbar-color: var(--mat-sys-primary) var(--color-common-bg);
-// }
-
-// /* Works on Chrome/Edge/Safari */
-// *::-webkit-scrollbar {
-//     width: 6px;
-//     height: 6px;
-// }
-
-// *::-webkit-scrollbar-track {
-//     border-radius: var(--border-common-radius);
-//     background: transparent;
-// }
-
-// *::-webkit-scrollbar-thumb {
-//     background: rgba(var(--color-common-scrollbar), 0.1);
-//     border-radius: var(--border-common-radius);
-// }
-
-// /* Handle on hover */
-// ::-webkit-scrollbar-thumb:hover {
-//     background: rgba(var(--color-common-scrollbar), 0.5);
-// }
diff --git a/apps/36-blocks/src/assets/scss/component/_buttons.scss b/apps/36-blocks/src/assets/scss/component/_buttons.scss
deleted file mode 100644
index 12e6f07e..00000000
--- a/apps/36-blocks/src/assets/scss/component/_buttons.scss
+++ /dev/null
@@ -1,324 +0,0 @@
-// @use '../utils/mixins/common-utils' as *;
-
-// $primary-btn-height: 40px;
-// $secondary-btn-height: 30px;
-
-// .mat-button-base {
-//     &.mat-flat-button,
-//     &.mat-stroked-button,
-//     &.mat-button {
-//         border-radius: var(--border-common-radius-4);
-//         min-width: auto !important;
-//         transition: background-color 200ms cubic-bezier(0.35, 0, 0.25, 1);
-//         line-height: $primary-btn-height;
-
-//         &.mat-button-disabled {
-//             background-color: var(--color-button-bg) !important;
-//         }
-//         &.btn-medium {
-//             line-height: $secondary-btn-height !important;
-//             font-size: var(--font-size-common-12);
-//         }
-//     }
-//     // 6. Flat button
-//     &.mat-flat-button {
-//         transition: background-color 200ms cubic-bezier(0.35, 0, 0.25, 1);
-//         background-color: var(--color-dark-accent) !important;
-//         color: var(--color-dark-primary) !important;
-//         // Flat button color variation
-//         &.flat-default {
-//             @include btnHover(var(--color-button-text), var(--color-button-bg), var(--color-button-hover));
-//         }
-//         &.flat-primary-light {
-//             @include btnHover(
-//                 var(--color-common-primary),
-//                 var(--color-common-primary-light),
-//                 var(--color-common-primary-light-hover)
-//             );
-//         }
-//         &.flat-primary {
-//             background-color: var(--color-common-primary-light);
-//             color: var(--color-common-primary);
-//         }
-//         &.btn-success {
-//             @include btnHover(
-//                 var(--color-common-white),
-//                 var(--color-whatsApp-primary),
-//                 var(--color-whatsApp-primary-hover),
-//                 var(--color-common-white)
-//             );
-//         }
-//         &.btn-success-light {
-//             @include btnHover(
-//                 var(--color-whatsApp-primary),
-//                 var(--color-whatsApp-primary-light),
-//                 var(--color-whatsApp-primary),
-//                 var(--color-common-white)
-//             );
-//         }
-//         &.btn-danger-light {
-//             @include btnHover(
-//                 var(--color-email-primary),
-//                 var(--color-email-primary-light),
-//                 var(--color-email-primary),
-//                 var(--color-common-white)
-//             );
-//         }
-//         // Hover state
-//         &.mat-primary {
-//             &:hover {
-//                 background-color: var(--color-common-primary-dark);
-//             }
-//         }
-//         // Hover state
-//         &.mat-warn {
-//             @include btnHover(
-//                 var(--color-common-white),
-//                 var(--color-email-primary),
-//                 var(--color-email-primary-hover),
-//                 var(--color-common-white)
-//             );
-//         }
-//         // Flat Icon button
-//         &.flat-icon-btn {
-//             padding: 0px 12px;
-//         }
-
-//     }
-//     .mat-icon-suffix {
-//         margin-right: calc(12px - 16px);
-//         margin-left: 4px;
-//     }
-//     .mat-icon-prefix {
-//         margin-left: calc(12px - 16px);
-//         margin-right: 4px;
-//     }
-
-//     &.mat-button {
-//         @include btnHover(var(--color-button-text), transparent, var(--color-button-bg));
-//         &.mat-primary {
-//             @include btnHover(
-//                 var(--color-common-primary),
-//                 transparent,
-//                 var(--color-common-primary-light),
-//                 var(--color-common-primary)
-//             );
-//         }
-//     }
-//     &.mat-stroked-button {
-//         line-height: 38px;
-//         &:not(.mat-primary) {
-//             border-color: var(--color-dark-accent) !important;
-//             color: var(--color-dark-accent) !important;
-//         }
-//         &.mat-primary {
-//             border-color: var(--color-primary-color) !important;
-//             @include btnHover(var(--color-common-primary), transparent, var(--color-common-primary-light));
-//         }
-//     }
-//     &.remove-mat-button-focus-overlay {
-//         .mat-button-focus-overlay {
-//             display: none;
-//         }
-//     }
-// }
-
-// /* 1. Icon Button */
-// .mat-icon-button {
-//     &.icon-btn-md {
-//         @include generateIconBtn(30px, 18px, var(--color-common-text-2));
-//     }
-//     &.icon-btn-sm {
-//         @include generateIconBtn(20px, 12px, var(--color-common-text-2));
-//     }
-//     &.mat-primary {
-//         @include iconBtnHover(
-//             var(--color-common-text-2),
-//             var(--color-common-primary-light),
-//             var(--color-common-primary)
-//         );
-//     }
-//     &.mat-warn {
-//         @include iconBtnHover(var(--color-common-text-2), var(--color-email-primary-light), var(--color-email-primary));
-//     }
-//     &.mat-success {
-//         @include iconBtnHover(
-//             var(--color-common-text-2),
-//             var(--color-whatsApp-primary-light),
-//             var(--color-whatsApp-primary)
-//         );
-//     }
-//     &.mat-button-disabled {
-//         opacity: 0.6;
-//         pointer-events: none;
-//     }
-// }
-
-// .mat-btn-xs {
-//     @media only screen and (max-width: 660px) {
-//         padding-left: 12px;
-//         padding-right: 12px;
-//         .mat-icon {
-//             margin: 0px;
-//         }
-//     }
-// }
-
-// // Slider
-// .slider::-webkit-slider-thumb {
-//     background: var(--color-common-primary) !important;
-// }
-
-// // Toggle Button light theme color - https://prnt.sc/wY6YBUSpVDQF
-
-// .default-toggle-btn {
-//     border-radius: var(--border-common-radius) !important;
-//     border: none !important;
-//     box-shadow: none !important;
-//     .mat-button-toggle {
-//         font-size: var(--font-size-common-14);
-//         border-color: var(--color-common-border);
-//         // min-width: 108px;
-//         // &.mat-button-toggle-appearance-standard {
-//         //     background-color: var(--color-button-bg);
-//         //     color: var(--color-common-rock) !important;
-//         //     font-weight: 500;
-//         //     .mat-button-toggle-label-content {
-//         //         line-height: 40px !important;
-//         //     }
-//         //     &.mat-button-toggle-checked {
-//         //         background-color: var(--color-common-primary-light);
-//         //         color: var(--color-common-primary) !important;
-//         //     }
-//         // }
-//         background-color: var(--color-button-bg);
-//         color: var(--color-button-text) !important;
-//         font-weight: 500;
-//         .mat-button-toggle-label-content {
-//             line-height: 40px !important;
-//         }
-//         &.mat-button-toggle-checked {
-//             background-color: var(--color-common-primary);
-//             color: var(--color-common-white) !important;
-//             &:hover {
-//                 background-color: var(--color-common-primary-dark);
-//             }
-//         }
-//         &:hover {
-//             background-color: var(--color-button-hover);
-//         }
-//     }
-//     &.icon-type-button {
-//         .mat-button-toggle {
-//             min-width: auto;
-//         }
-//     }
-// }
-
-// // Toggle Button - https://prnt.sc/ad0qU7tV7Bg5
-// .custom-toggle-btn {
-//     border-radius: var(--border-common-radius) !important;
-//     .mat-button-toggle {
-//         font-size: var(--font-size-common-12);
-//         font-weight: 600;
-//         color: var(--color-common-text-2);
-//         border-color: var(--color-common-border);
-//         &.mat-button-toggle-checked {
-//             background-color: var(--color-common-primary) !important;
-//             color: var(--color-common-white) !important;
-//         }
-//         &.mat-button-toggle-appearance-standard {
-//             .mat-button-toggle-label-content {
-//                 line-height: 36.5px !important;
-//             }
-//         }
-//     }
-// }
-
-// // 11. Button size
-// .mat-btn-md {
-//     min-height: 26px;
-//     line-height: 30px !important;
-//     font-size: var(--font-size-common-12) !important;
-//     &.mat-btn-wran {
-//         border-color: var(--mat-sys-error) !important;
-//     }
-// }
-// .mat-btn-xs {
-//     @media only screen and (max-width: 660px) {
-//         padding-left: 12px !important;
-//         padding-right: 12px !important;
-//         .mat-icon {
-//             margin: 0px;
-//         }
-//     }
-// }
-
-// // Disabled Action on permission basis
-// .disabled-action,
-// button:disabled,
-// button[disabled],
-// button:hover:disabled,
-// button:hover[disabled],
-// button.mat-btn-md.mat-btn-wran:disabled,
-// button.mat-btn-md.mat-btn-wran[disabled],
-// button.mat-btn-md.mat-btn-wran:hover:disabled,
-// button.mat-btn-md.mat-btn-wran:hover[disabled] {
-//     pointer-events: none;
-//     color: var(--color-common-grey) !important;
-//     border-color: var(--color-common-grey) !important;
-//     .mat-icon {
-//         color: var(--color-common-grey) !important;
-//     }
-// }
-
-// // 10. Mat slide toggle button design reference - https://prnt.sc/DDH-z4jHnmH5
-// .mat-slide-toggle {
-//     &.toggle-slide {
-//         .mat-slide-toggle-content {
-//             color: var(--color-common-white);
-//         }
-//     }
-//     &.mat-checked {
-//         .mat-slide-toggle-bar {
-//             background-color: var(--color-whatsApp-primary-light) !important;
-//         }
-//         .mat-slide-toggle-thumb {
-//             background-color: var(--color-whatsApp-primary) !important;
-//         }
-//     }
-//     &.mat-disabled{
-//         .mat-slide-toggle-bar{
-//             background-color: var(--color-common-grey);
-//         }
-//         .mat-slide-toggle-thumb {
-//             background-color: var(--color-common-slate) !important;
-//         }
-//     }
-// }
-// .radio-button-custom-style {
-//     .mat-radio-button {
-//         .mat-radio-outer-circle {
-//             border-color: var(--color-dark-accent) !important;
-//         }
-
-//         .mat-radio-inner-circle {
-//             background-color: var(--color-dark-accent) !important;
-//         }
-//     }
-// }
-// .accent-color {
-//     .material-icons {
-//         &.mat-icon {
-//             &.mat-icon-no-color {
-//                 color: var(--color-dark-accent) !important;
-//                 &:hover {
-//                     color: var(--color-dark-accent) !important;
-//                 }
-//             }
-//         }
-//     }
-// }
-// .accent-bg-color {
-//     background-color: var(--color-dark-accent) !important;
-// }
diff --git a/apps/36-blocks/src/assets/scss/component/_card.scss b/apps/36-blocks/src/assets/scss/component/_card.scss
deleted file mode 100644
index 559ebc5b..00000000
--- a/apps/36-blocks/src/assets/scss/component/_card.scss
+++ /dev/null
@@ -1,68 +0,0 @@
-// @use '../utils/mixins/common-utils' as *;
-// /*
-// // Card
-// */
-// .mat-card {
-//     box-shadow: none !important;
-//     border-radius: var(--border-common-radius) !important;
-//     background-color: var(--color-common-bg) !important;
-//     &.responsive-card {
-//         @include media-breakpoint-down('tablet') {
-//             background-color: transparent !important;
-//             border: none !important;
-//         }
-//     }
-//     &.shadow-none {
-//         box-shadow: none !important;
-//     }
-//     &.outline-card {
-//         border: 1px solid var(--color-common-border);
-//         box-shadow: none !important;
-//     }
-//     @media screen and (max-width: 768px) {
-//         &.transparent-card {
-//             box-shadow: none !important;
-//             background-color: transparent !important;
-//             border-width: 0px !important;
-//         }
-//     }
-//     &.data-analytics-card {
-//         background-color: var(--color-common-graph-bg) !important;
-//     }
-
-//     &.default-card {
-//         background-color: var(--color-common-graph-bg) !important;
-//     }
-
-//     &.mat-data-card {
-//         padding: 24px 32px;
-//         .mat-data-card-content {
-//             .mat-data-card-value {
-//                 padding-left: 32px;
-//                 p {
-//                     font-weight: 500;
-//                     font-size: 14px;
-//                     line-height: 16px;
-//                     margin-bottom: 4px;
-//                 }
-//                 h3 {
-//                     font-weight: 700;
-//                     font-size: 24px;
-//                     line-height: 28px;
-//                 }
-//             }
-//         }
-//         &.delivered {
-//             color: var(--color-whatsApp-primary) !important;
-//             background-color: var(--color-whatsApp-primary-light) !important;
-//         }
-//         &.suppressed {
-//             background-color: var(--color-short-url-primary-light) !important;
-//             color: var(--color-short-url-primary) !important;
-//         }
-//         &.failed {
-//             background-color: var(--color-email-primary-light) !important;
-//             color: var(--color-email-primary) !important;
-//         }
-//     }
-// }
diff --git a/apps/36-blocks/src/assets/scss/component/_chart.scss b/apps/36-blocks/src/assets/scss/component/_chart.scss
deleted file mode 100644
index e5baf8e5..00000000
--- a/apps/36-blocks/src/assets/scss/component/_chart.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-.line-chart {
-    text {
-        fill: var(--color-common-text);
-        font-size: 10px !important;
-        line-height: 12px;
-    }
-}
diff --git a/apps/36-blocks/src/assets/scss/component/_filters.scss b/apps/36-blocks/src/assets/scss/component/_filters.scss
deleted file mode 100644
index 42fca65e..00000000
--- a/apps/36-blocks/src/assets/scss/component/_filters.scss
+++ /dev/null
@@ -1,62 +0,0 @@
-// .filter-menu {
-//     min-width: 400px !important;
-//     max-width: 400px !important;
-//     margin-top: 12px;
-//     @media (max-width: 660px) {
-//         min-width: 80vw !important;
-//         max-width: 80vw !important;
-//         max-height: 70vh;
-//     }
-//     .mat-menu-content {
-//         padding: 0px !important;
-//         .date-picker-row {
-//             padding: 20px 25px 0px 25px;
-//         }
-//         .mat-form-field {
-//             .mat-icon {
-//                 width: 16px;
-//             }
-//         }
-//         .action-button {
-//             padding: 20px 25px;
-//         }
-//     }
-// }
-
-// .client-filter-menu {
-//     min-width: 400px !important;
-//     max-width: 400px !important;
-//     margin-top: 12px;
-//     @media (max-width: 660px) {
-//         min-width: 80vw !important;
-//         max-width: 80vw !important;
-//         max-height: 70vh !important;
-//         overflow-y: hidden !important;
-//     }
-//     .mat-menu-content {
-//         padding: 0px !important;
-//         .date-picker-row {
-//             padding: 25px;
-//         }
-//         .client-filter-content {
-//             @media (max-width: 992px) {
-//                 max-height: 58vh;
-//                 overflow-y: auto;
-//             }
-//         }
-//         .mat-form-field {
-//             .mat-icon {
-//                 width: 16px;
-//             }
-//         }
-//         .action-button {
-//             padding: 20px 25px;
-//         }
-//     }
-// }
-
-// .column-sort {
-//     .mat-menu-content {
-//         max-height: 600px;
-//     }
-// }
diff --git a/apps/36-blocks/src/assets/scss/component/_form-field.scss b/apps/36-blocks/src/assets/scss/component/_form-field.scss
deleted file mode 100644
index e4618a19..00000000
--- a/apps/36-blocks/src/assets/scss/component/_form-field.scss
+++ /dev/null
@@ -1,254 +0,0 @@
-// // Default theme changes
-// .mat-form-field {
-//     .mat-form-field-wrapper {
-//         vertical-align: baseline !important;
-
-//         .mat-form-field-flex {
-//             font-size: var(--font-size-common-14);
-//             line-height: 1.225;
-//             .mat-form-field-infix {
-//                 .mat-form-field-label-wrapper {
-//                     .mat-form-field-label {
-//                         color: var(--color-common-slate);
-//                     }
-//                 }
-//             }
-//         }
-//         .mat-form-field-hint-wrapper {
-//             .mat-hint {
-//                 color: var(--color-common-slate);
-//                 font-size: 12px;
-//             }
-//         }
-//     }
-//     &.search-form-field:not(.unset-search-width)  {
-//         width: 250px;
-//     }
-// }
-
-// .mat-form-field {
-//     &.mat-form-field-appearance-legacy {
-//         &.mat-legacy-form-field-sm {
-//             .mat-form-field-wrapper {
-//                 padding-bottom: 0px;
-//             }
-//             .mat-form-field-infix {
-//                 border-top: 0px !important;
-//                 padding: 8px 0 4px 0 !important;
-//                 max-width: 100%;
-//                 // min-width: 100px;
-//                 width: 100%;
-//                 font-size: 14px;
-//             }
-//             .mat-form-field-suffix {
-//                 button {
-//                     width: 23px;
-//                     height: 23px;
-//                     min-height: 23px;
-//                     line-height: 23px;
-//                 }
-//             }
-//             .mat-form-field-underline {
-//                 bottom: 0px !important;
-//             }
-//             .mat-form-field-subscript-wrapper {
-//                 top: calc(100% - 5px);
-//                 .mat-error {
-//                     font-size: var(--font-size-common-12);
-//                 }
-//             }
-//             .mat-form-field-label {
-//                 top: 1.00125em !important;
-//             }
-//         }
-//     }
-//     &.mat-form-field-disabled {
-//         .mat-form-field-wrapper {
-//             .mat-form-field-flex {
-//                 .mat-form-field-outline {
-//                     background-color: var(--color-common-silver) !important;
-//                     border-radius: var(--border-common-radius-4) !important;
-//                 }
-//             }
-//         }
-//     }
-// }
-
-// // Default form field
-// .mat-form-field {
-//     .mat-form-field-infix {
-//         padding: 5px 0 10px 0 !important;
-//         .mat-input-element {
-//             &::-webkit-input-placeholder {
-//                 /* Chrome/Opera/Safari */
-//                 color: var(--color-common-grey);
-//                 font-weight: normal;
-//             }
-//             &::-moz-placeholder {
-//                 /* Firefox 19+ */
-//                 color: var(--color-common-grey);
-//                 font-weight: normal;
-//             }
-//             &:-ms-input-placeholder {
-//                 /* IE 10+ */
-//                 color: var(--color-common-grey);
-//                 font-weight: normal;
-//             }
-//             &:-moz-placeholder {
-//                 /* Firefox 18- */
-//                 color: var(--color-common-grey);
-//                 font-weight: normal;
-//             }
-//         }
-//         .mat-form-field-label-wrapper {
-//             .mat-form-field-required-marker {
-//                 display: none;
-//             }
-//         }
-//         &.mat-form-field-appearance-outline {
-//             .mat-form-field-outline {
-//                 background-color: var(--color-common-white) !important;
-//             }
-//         }
-//     }
-//     .mat-form-field-flex {
-//         .mat-form-field-outline {
-//             background-color: var(--color-common-white);
-//             .mat-form-field-outline-start {
-//                 border-radius: var(--border-common-radius-4) 0 0 var(--border-common-radius-4);
-//                 min-width: var(--border-common-radius-4);
-//             }
-//             .mat-form-field-outline-end {
-//                 border-radius: 0 var(--border-common-radius-4) var(--border-common-radius-4) 0;
-//             }
-//         }
-//         .mat-form-field-infix {
-//             .mat-select {
-//                 .mat-select-trigger {
-//                     .mat-select-arrow-wrapper {
-//                         transform: translateY(0%);
-//                     }
-//                 }
-//             }
-//         }
-//     }
-//     input {
-//         &.mat-input-element {
-//             color: var(--color-common-text);
-//         }
-//     }
-//     &.no-padding {
-//         .mat-form-field-wrapper {
-//             padding-bottom: 0px !important;
-//             .mat-form-field-flex {
-//                 .mat-form-field-prefix {
-//                     color: var(--color-common-grey) !important;
-//                 }
-//             }
-//         }
-//     }
-//     // Used to display only first mat-error
-//     mat-error {
-//         display: none !important;
-//         font-size: var(--font-size-common-12);
-//         &:first-child {
-//             display: block !important;
-//         }
-//     }
-// }
-
-// @-moz-document url-prefix() {
-//     .mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-prefix .mat-icon-button,
-//     .mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mat-icon-button {
-//         display: inline-block !important;
-//     }
-// }
-
-// // Disbaled stroked input form field
-// .mat-form-field-disabled .mat-form-field-underline {
-//     background-image: linear-gradient(to right, rgba(0, 0, 0, 1) 0, rgba(0, 0, 0, 0.42) 33%, #c2c7cc 0) !important;
-//     background-size: 1px 100% !important;
-//     background-repeat: repeat-x !important;
-// }
-
-// .mat-form-field-appearance-outline.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label,
-// .mat-form-field-appearance-outline.mat-form-field-can-float
-//     .mat-input-server:focus
-//     + .mat-form-field-label-wrapper
-//     .mat-form-field-label {
-//     transform: translateY(-15px) scale(0.7) !important;
-// }
-
-// .mat-form-field-appearance-outline .mat-form-field-label {
-//     top: 18px !important;
-// }
-
-// .mat-form-field-subscript-wrapper {
-//     padding: 0px !important;
-//     margin-top: 2px !important;
-//     font-size: var(--font-size-common-10);
-// }
-
-// /* Firefox hide */
-// input[matinput][type='number'] {
-//     -moz-appearance: textfield;
-// }
-// /* Chrome, Safari, Edge, Opera */
-// input[matinput]::-webkit-outer-spin-button,
-// input[matinput]::-webkit-inner-spin-button {
-//     -webkit-appearance: none;
-//     margin: 0;
-// }
-
-// .mat-form-field-outside-error {
-//     height: 21.5px;
-// }
-
-// // Input focus/highlight color
-// .mat-form-field.mat-focused {
-//     .mat-form-field-ripple {
-//         background-color: var(--color-dark-accent) !important;
-//     }
-
-//     .mat-form-field-outline-thick {
-//         color: var(--color-dark-accent) !important;
-//     }
-
-//     .mat-form-field-label {
-//         color: var(--color-dark-primary) !important;
-//     }
-// }
-
-// // MDC Form Field styles (Angular Material 15+)
-// .mat-mdc-form-field.mat-focused {
-//     .mdc-text-field--outlined:not(.mdc-text-field--disabled) {
-//         .mdc-notched-outline__leading,
-//         .mdc-notched-outline__notch,
-//         .mdc-notched-outline__trailing {
-//             border-color: var(--color-dark-accent) !important;
-//         }
-//     }
-
-//     .mdc-text-field--filled:not(.mdc-text-field--disabled) {
-//         .mdc-line-ripple::after {
-//             border-bottom-color: var(--color-dark-accent) !important;
-//         }
-//     }
-
-//     .mat-mdc-floating-label {
-//         color: var(--color-dark-primary) !important;
-//     }
-// }
-
-// // MDC focused outline
-// .mdc-text-field--focused:not(.mdc-text-field--disabled) {
-//     .mdc-notched-outline__leading,
-//     .mdc-notched-outline__notch,
-//     .mdc-notched-outline__trailing {
-//         border-color: var(--color-dark-accent) !important;
-//     }
-
-//     .mdc-floating-label {
-//         color: var(--color-dark-primary) !important;
-//     }
-// }
diff --git a/apps/36-blocks/src/assets/scss/component/_icon.scss b/apps/36-blocks/src/assets/scss/component/_icon.scss
index 86e11f57..c2678ae6 100644
--- a/apps/36-blocks/src/assets/scss/component/_icon.scss
+++ b/apps/36-blocks/src/assets/scss/component/_icon.scss
@@ -1,48 +1,26 @@
-/*
 // Material Icons
-*/
 
-.mat-icon-14 {
-    font-size: 14px !important;
-    width: 14px !important;
-    height: 14px !important;
-    line-height: 14px !important;
+@mixin mat-icon-size($size) {
+    font-size: $size !important;
+    width: $size !important;
+    height: $size !important;
+    line-height: $size !important;
 }
-.mat-icon-16 {
-    font-size: 16px !important;
-    width: 16px !important;
-    height: 16px !important;
-    line-height: 16px !important;
-}
-.mat-icon-18 {
-    font-size: 18px !important;
-    width: 18px !important;
-    height: 18px !important;
-    line-height: 18px !important;
-}
-.mat-icon-20 {
-    font-size: 20px !important;
-    width: 20px !important;
-    height: 20px !important;
-    line-height: 20px !important;
-}
-.mat-icon-22 {
-    font-size: 22px !important;
-    width: 22px !important;
-    height: 22px !important;
-    line-height: 22px !important;
-}
-.mat-icon-24 {
-    font-size: 24px !important;
-    width: 24px !important;
-    height: 24px !important;
-    line-height: 24px !important;
-}
-.mat-icon-32 {
-    font-size: 32px !important;
-    width: 32px !important;
-    height: 32px !important;
-    line-height: 32px !important;
+
+$mat-icon-sizes: (
+    14: 14px,
+    16: 16px,
+    18: 18px,
+    20: 20px,
+    22: 22px,
+    24: 24px,
+    32: 32px,
+);
+
+@each $key, $size in $mat-icon-sizes {
+    .mat-icon-#{$key} {
+        @include mat-icon-size($size);
+    }
 }
 .mat-icon-circle {
     width: 48px;
diff --git a/apps/36-blocks/src/assets/scss/component/_mat-list.scss b/apps/36-blocks/src/assets/scss/component/_mat-list.scss
deleted file mode 100644
index 601a0d44..00000000
--- a/apps/36-blocks/src/assets/scss/component/_mat-list.scss
+++ /dev/null
@@ -1,43 +0,0 @@
-// .mat-list{
-//     &.custom-nav-list{
-//         .mat-list-item{
-//             .mat-list-item-content{
-//                 padding: 0px !important;
-//             }
-//         }
-//     }
-//     &.default-list{
-//         .mat-list-item {
-//             height: 36px;
-//             font-size: 14px;
-//             color: var(--color-common-dark);
-//             cursor: pointer;
-//             margin-bottom: 4px;
-//             &.active{
-//                 background-color: var(--color-common-primary-light);
-//                 color: var(--color-common-primary);
-//             }
-//             &:hover{
-//                 background-color: var(--color-common-silver);
-//             }
-//             .mat-list-item-content{
-//                 padding-inline: 8px;
-//             }
-//         }
-//         &.mat-list-sm {
-//             .mat-list-item {
-//                 height: 28px;
-//             }
-//         }
-//     }
-// }
-// .mat-menu-hover-state{
-//     .mat-menu-item{
-//         &.active{
-//             background-color: var(--color-otp-primary-light);
-//         }
-//         &:not(.active):hover{
-//             background-color: var(--color-common-bg-lighter);
-//         }
-//     }
-// }
diff --git a/apps/36-blocks/src/assets/scss/component/_menu.scss b/apps/36-blocks/src/assets/scss/component/_menu.scss
deleted file mode 100644
index ce42e9ab..00000000
--- a/apps/36-blocks/src/assets/scss/component/_menu.scss
+++ /dev/null
@@ -1,74 +0,0 @@
-// .mat-menu-panel {
-//     border-radius: var(--border-common-radius) !important;
-// }
-// .more-menu {
-//     min-height: auto !important;
-//     .mat-menu-item {
-//         font-size: 13px;
-//         line-height: 36px;
-//         height: 36px;
-//         &.mat-menu-item-active {
-//             background-color: var(--color-common-primary-light);
-//             color: var(--color-common-primary) !important;
-//         }
-//     }
-// }
-// .form-scrollable {
-//     max-height: calc(100vh - 400px);
-//     overflow-y: auto;
-//     @media only screen and (max-width: 768px) {
-//         max-height: calc(100vh - 250px);
-//     }
-// }
-
-// .subscription-filter-menu {
-//     min-width: 500px !important;
-//     max-width: 500px !important;
-//     margin-top: 12px;
-//     .mat-form-field {
-//         .mat-form-field-wrapper {
-//             padding-bottom: 14px !important;
-//             .mat-form-field-flex {
-//                 .mat-form-field-infix {
-//                     .mat-form-field-label-wrapper {
-//                         top: -18px;
-//                     }
-//                 }
-//             }
-//         }
-//     }
-//     .form-scrollable {
-//         max-height: calc(100vh - 400px);
-//         overflow-y: auto;
-//         @media only screen and (max-width: 768px) {
-//             max-height: calc(100vh - 250px);
-//         }
-//     }
-// }
-
-// .logs-filter-menu, .profile-menu {
-//     min-width: 300px !important;
-//     max-width: 300px !important;
-//     .mat-menu-content {
-//         .mat-form-field {
-//             .mat-form-field-wrapper {
-//                 // padding-bottom: 1.34375em !important;
-//                 .mat-form-field-label-wrapper {
-//                     top: -18px !important;
-//                 }
-//             }
-//         }
-//     }
-// }
-
-// .profile-sub-dropdown {
-//     .mat-menu-item {
-//         padding: 0px 24px;
-//         height: 40px;
-//         line-height: 40px;
-//         font-size: 14px;
-//     }
-//     #scrollableWrapper {
-//         overflow-x: hidden !important;
-//     }
-// }
diff --git a/apps/36-blocks/src/assets/scss/component/_modal.scss b/apps/36-blocks/src/assets/scss/component/_modal.scss
deleted file mode 100755
index d2a5bf5e..00000000
--- a/apps/36-blocks/src/assets/scss/component/_modal.scss
+++ /dev/null
@@ -1,102 +0,0 @@
-// .mat-dialog-container {
-//     padding: 16px 24px !important;
-//     width: 450px !important;
-//     position: relative;
-//     border-radius: var(--border-common-radius) !important;
-// }
-
-// .mat-dialog-md {
-//     .mat-dialog-container {
-//         width: 100% !important;
-//     }
-// }
-
-// .mat-dialog {
-//     &.mat-dialog-lg {
-//         .mat-dialog-container {
-//             min-width: 800px !important;
-//         }
-//     }
-// }
-
-// .rejection-reason-drop + .cdk-overlay-connected-position-bounding-box {
-//     right: 16px !important;
-// }
-// .rejection-reason {
-//     min-width: 500px !important;
-//     max-width: 500px !important;
-//     margin-bottom: 10px;
-//     &.voice-file-rejection {
-//         height: 750px !important;
-//     }
-//     .mat-menu-content {
-//         padding-top: 0 !important;
-//         .rejection-reason-header {
-//             padding: 0px 16px;
-//         }
-//         .new-reason-form {
-//             padding: 0px 16px;
-//             top: 0;
-//             z-index: 999;
-//         }
-//         .rejection-list {
-//             overflow-y: auto;
-//             list-style: none;
-//             margin: 0px;
-//             padding: 16px;
-//             .rejection-item {
-//                 margin-bottom: 10px;
-//                 border: 1px dashed var(--color-common-border);
-//                 border-radius: 4px;
-//                 padding: 10px;
-//                 cursor: pointer !important;
-//                 transition: background-color 0.2s cubic-bezier(0.35, 0, 0.25, 1);
-//                 &:hover {
-//                     background-color: var(--color-sidenav-menu-hover-link-background) !important;
-//                     border-color: var(--color-sidenav-menu-hover-link-text);
-//                     .title,
-//                     .subtitle,
-//                     .mat-delete-btn,
-//                     .rejection-item-action .mat-icon {
-//                         color: var(--color-sidenav-menu-hover-link-text) !important;
-//                     }
-//                     .rejection-item-action .mat-icon {
-//                         color: var(--color-sidenav-menu-hover-link-text);
-//                     }
-//                 }
-//                 &.selected {
-//                     background-color: var(--color-sidenav-menu-active-link-background) !important;
-//                     border-color: var(--color-sidenav-menu-active-link-text);
-//                     .title,
-//                     .subtitle,
-//                     .mat-delete-btn {
-//                         color: var(--color-sidenav-menu-active-link-text) !important;
-//                     }
-//                     .rejection-item-action .mat-icon {
-//                         color: var(--color-sidenav-menu-hover-link-text);
-//                     }
-//                 }
-//             }
-//         }
-//     }
-//     .bottom-seprator {
-//         padding: 10px;
-//         display: flex;
-//         align-items: center;
-//         justify-content: center;
-//         box-shadow: 13px -6px 13px -7px #00000036;
-//         position: sticky;
-//         bottom: 0;
-//         background-color: var(--color-common-white);
-//     }
-//     .no-record-found {
-//         height: 366px;
-//         display: flex;
-//         align-items: center;
-//         justify-content: center;
-//     }
-// }
-
-// .mat-dialog-actions {
-//     margin: 0px !important;
-// }
diff --git a/apps/36-blocks/src/assets/scss/component/_pagination.scss b/apps/36-blocks/src/assets/scss/component/_pagination.scss
deleted file mode 100644
index c890bd69..00000000
--- a/apps/36-blocks/src/assets/scss/component/_pagination.scss
+++ /dev/null
@@ -1,120 +0,0 @@
-// .mat-paginator {
-//     background: var(--colo-common-bg);
-//     &.default-mat-paginator {
-//         background-color: transparent !important;
-//         .mat-form-field {
-//             .mat-form-field-wrapper {
-//                 padding-bottom: 6px !important;
-//             }
-//         }
-//         .mat-paginator-range-label {
-//             @media only screen and (max-width: 768px) {
-//                 margin: 0 10px 0 10px;
-//             }
-//         }
-//     }
-// }
-
-// .cdk-overlay-pane .mat-select-panel-wrap {
-//     margin-top: 0 !important;
-// }
-
-// // Goto pagination
-// .mat-paginator-outer-container {
-//     .mat-select-value {
-//         line-height: 16px;
-//     }
-//     .mat-paginator-page-size-label,
-//     .mat-paginator-range-label {
-//         font-size: var(--font-size-common-12);
-//     }
-//     .mat-form-field-wrapper {
-//         .mat-form-field-infix {
-//             padding: 0px 0 10px 0 !important;
-//         }
-//     }
-// }
-// .go-to-pagination {
-//     border-top: 1px solid var(--color-table-cell-border);
-//     background-color: var(--color-common-white);
-//     .mat-paginator {
-//         box-shadow: none !important;
-//         border-top: 0px;
-//         .mat-paginator-page-size-label {
-//             @media (max-width: 660px) {
-//                 display: none;
-//             }
-//         }
-//     }
-//     .go-to-container {
-//         display: flex;
-//         align-items: baseline;
-//         height: 39px;
-//         margin-top: -3px;
-//         .go-to-label {
-//             margin: 0 4px;
-//             font-size: 12px;
-//             color: var(--color-common-text);
-//             font-family: var(--font-family-common);
-//             @media (max-width: 460px) {
-//                 display: none;
-//             }
-//         }
-//         .mat-form-field {
-//             width: 56px;
-//             font-size: 12px;
-//             .mat-form-field-wrapper {
-//                 padding-bottom: 0px !important;
-//                 .mat-form-field-flex {
-//                     font-size: 12px;
-//                     .mat-form-field-infix {
-//                         padding: 4px 0 10px 0 !important;
-
-//                         .mat-select-arrow-wrapper {
-//                             transform: translateY(-15%) !important;
-//                         }
-
-//                         .mat-select-value-text {
-//                             color: var(--color-common-text);
-//                         }
-//                     }
-//                 }
-//             }
-//         }
-//     }
-//     .mat-paginator {
-//         .mat-paginator-container {
-//             @media (max-width: 460px) {
-//                 padding-right: 0px;
-//                 .mat-paginator-page-size {
-//                     margin-right: 0px !important;
-//                 }
-//                 .mat-paginator-range-label {
-//                     margin-right: 0px !important;
-//                 }
-//                 .mat-paginator-navigation-previous,
-//                 .mat-paginator-navigation-next {
-//                     width: 30px;
-//                     height: 30px;
-//                     line-height: 30px;
-//                 }
-//             }
-//         }
-//     }
-// }
-// // Add class inside Overlay useing provider
-// .custom-mat-paginator {
-//     .mat-select-panel-wrap {
-//         .mat-select-panel {
-//             border-radius: var(--border-common-radius);
-//             .mat-option {
-//                 font-size: var(--font-size-common-11);
-//             }
-//         }
-//     }
-// }
-
-// .mat-form-field-appearance-outline .mat-form-field-flex {
-//     font-size: var(--font-size-common-14);
-//     line-height: 1.225;
-// }
diff --git a/apps/36-blocks/src/assets/scss/component/_select-option.scss b/apps/36-blocks/src/assets/scss/component/_select-option.scss
deleted file mode 100644
index 1961e70d..00000000
--- a/apps/36-blocks/src/assets/scss/component/_select-option.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-// .cdk-overlay-pane {
-//     .mat-select-panel-wrap {
-//         .mat-select-panel {
-//             .mat-option {
-//                 &.mat-selected {
-//                     color: var(--color-common-text) !important;
-//                 }
-//             }
-//         }
-//     }
-// }
-
-// // Autocomplete
-// .mat-autocomplete-panel {
-//     .mat-option{
-//         font-size: 14px;
-//         height: 40px !important;
-//         line-height: 40px !important;
-//         &:hover{
-//             background-color: var(--color-common-primary-light) !important;
-//         }
-//     }
-// }
diff --git a/apps/36-blocks/src/assets/scss/component/_side-dialog.scss b/apps/36-blocks/src/assets/scss/component/_side-dialog.scss
deleted file mode 100644
index 6b712f57..00000000
--- a/apps/36-blocks/src/assets/scss/component/_side-dialog.scss
+++ /dev/null
@@ -1,41 +0,0 @@
-// .mat-right-dialog {
-//     position: absolute !important;
-//     right: 0;
-//     top: 0;
-//     height: 100%;
-//     overflow: auto;
-//     box-shadow: -4px 0px 16px #00000059;
-//     &.mat-dialog-lg {
-//         width: 535px;
-//     }
-//     &.mat-dialog-md {
-//         width: 450px;
-//     }
-//     .mat-right-dialog-container {
-//         display: flex;
-//         flex-direction: column;
-//         height: 100%;
-//     }
-//     .mat-dialog-container {
-//         width: 100% !important;
-//         padding: 0px !important;
-//         border-radius: 0px !important;
-//         .mat-right-dialog-container {
-//             .mat-right-dialog-header {
-//                 // position: sticky;
-//                 // top: 0;
-//                 // z-index: 1000;
-//                 padding: 8px 16px;
-//                 border-bottom: 1px solid var(--color-common-border);
-//                 h2 {
-//                     font-weight: var(--font-weight-medium);
-//                 }
-//             }
-//             .mat-right-dialog-content {
-//                 padding: 16px;
-//                 overflow-y: scroll;
-//                 height: 100%;
-//             }
-//         }
-//     }
-// }
diff --git a/apps/36-blocks/src/assets/scss/component/_sidenav.scss b/apps/36-blocks/src/assets/scss/component/_sidenav.scss
deleted file mode 100644
index 856aabd8..00000000
--- a/apps/36-blocks/src/assets/scss/component/_sidenav.scss
+++ /dev/null
@@ -1,33 +0,0 @@
-// .default-sidenav {
-//     .mat-nav-list {
-//         padding-top: 0px;
-//         .mat-list-item {
-//             height: 40px !important;
-//             cursor: pointer !important;
-//             color: var(--color-sidenav-menu-link-text) !important;
-//             position: relative;
-//             .mat-icon {
-//                 border-radius: 0px !important;
-//             }
-//             .mat-list-item-content {
-//                 padding: 0px 0px 0px 16px;
-//             }
-//             &.mat-list-item-disabled {
-//                 background-color: transparent;
-//                 pointer-events: none;
-//             }
-//             .mat-line {
-//                 font-size: 14px !important;
-//                 font-weight: 400;
-//                 &.menu-svg-icon {
-//                     fill: red;
-//                     svg {
-//                         path {
-//                             fill: var(--color-common-slate);
-//                         }
-//                     }
-//                 }
-//             }
-//         }
-//     }
-// }
diff --git a/apps/36-blocks/src/assets/scss/component/_status.scss b/apps/36-blocks/src/assets/scss/component/_status.scss
deleted file mode 100644
index 3f294281..00000000
--- a/apps/36-blocks/src/assets/scss/component/_status.scss
+++ /dev/null
@@ -1,42 +0,0 @@
-// .status {
-//     padding: 0px 12px;
-//     border-radius: 13px;
-//     font-size: 12px;
-//     text-transform: capitalize;
-//     font-weight: normal;
-//     width: min-content;
-//     display: inline-block;
-//     text-align: center;
-//     height: 24px;
-//     line-height: 24px;
-
-//     // Used in unverified, open, status
-//     &.status-default {
-//         background-color: var(--color-common-graph-bg) !important;
-//         color: var(--color-common-rock) !important;
-//     }
-//     // Used in in-progress status
-//     &.status-pending {
-//         color: var(--color-hello-primary-dark) !important;
-//         background-color: var(--color-hello-primary-light) !important;
-//     }
-
-//     // Used in submitted delivered
-//     &.status-success {
-//         color: var(--color-whatsApp-primary) !important;
-//         background-color: var(--color-whatsApp-primary-light) !important;
-//     }
-//     // Used in removed, rejected
-//     &.status-failed {
-//         color: var(--color-email-primary) !important;
-//         background-color: var(--color-email-primary-light) !important;
-//     }
-//     &.status-approved {
-//         color: var(--color-common-primary) !important;
-//         background-color: var(--color-common-primary-light) !important;
-//     }
-//     &.status-warning {
-//         color: var(--color-short-url-primary) !important;
-//         background-color: var(--color-short-url-primary-light) !important;
-//     }
-// }
diff --git a/apps/36-blocks/src/assets/scss/component/_stepper.scss b/apps/36-blocks/src/assets/scss/component/_stepper.scss
deleted file mode 100644
index 680a2d52..00000000
--- a/apps/36-blocks/src/assets/scss/component/_stepper.scss
+++ /dev/null
@@ -1,72 +0,0 @@
-// .mat-stepper-horizontal{
-//     .mat-horizontal-stepper-wrapper {
-//         height: 100%;
-//         .mat-horizontal-stepper-header {
-
-//             // height: 36px;
-//             padding: 16px 12px;
-//             .mat-step-label{
-//                 font-size: var(--font-size-common-12);
-//                 color: #3F4346;
-//                 font-weight: 500;
-//                 padding-top: 8px;
-//             }
-//         }
-//     }
-//     .mat-horizontal-content-container{
-//         height: 100%;
-//         padding: 0 24px 12px 24px !important;
-//     }
-//     .mat-horizontal-stepper-content{
-//         height: 100%;
-//     }
-//     // When Label Position set to labelPosition="bottom" in html
-//     &.mat-stepper-label-position-bottom{
-//         .mat-horizontal-stepper-wrapper {
-//             .mat-horizontal-stepper-header{
-//                 &-container{
-//                     padding: 8px 16px;
-//                     .mat-stepper-horizontal-line{
-//                         top: 28px;
-//                     }
-//                 }
-//                 &::before, &::after{
-//                     top: 28px;
-//                 }
-//             }
-//         }
-//     }
-// }
-
-// .mat-stepper-horizontal,
-// .mat-stepper-vertical {
-//     .mat-step-icon-selected,
-//     .mat-step-icon-state-done,
-//     .mat-step-icon-state-edit {
-//         background-color: var(--color-dark-accent) !important;
-//         color: var(--color-dark-primary) !important;
-//     }
-// }
-
-// // &.mat-stepper-starched {
-// //     .mat-horizontal-stepper-wrapper {
-// //         height: 100%;
-// //         .mat-horizontal-stepper-header {
-
-// //             // height: 36px;
-// //             padding: 16px 12px;
-// //             .mat-step-label{
-// //                 font-size: var(--font-size-common-12);
-// //                 color: #3F4346;
-// //                 font-weight: 500;
-// //                 padding-top: 8px;
-// //             }
-// //         }
-// //     }
-// //     .mat-horizontal-content-container{
-// //         height: 100%;
-// //     }
-// //     .mat-horizontal-stepper-content{
-// //         height: 100%;
-// //     }
-// // }
diff --git a/apps/36-blocks/src/assets/scss/component/_tabs.scss b/apps/36-blocks/src/assets/scss/component/_tabs.scss
deleted file mode 100644
index da415a0f..00000000
--- a/apps/36-blocks/src/assets/scss/component/_tabs.scss
+++ /dev/null
@@ -1,57 +0,0 @@
-// @use '../../../../../../node_modules/@angular/material/index' as mat;
-// /*
-// // Tabs
-// */
-// .mat-tab-header {
-//     .mat-tab-labels {
-//         margin-left: 14px;
-//         margin-right: 16px;
-//         .mat-tab-label {
-//             font-size: 14px;
-//             line-height: 22px;
-//             font-weight: 400;
-//             opacity: 1;
-//             &.mat-tab-label-active {
-//                 font-weight: 600;
-//             }
-//         }
-//     }
-// }
-
-// // MDC Tab styles (Angular Material 15+)
-// .mat-mdc-tab-group,
-// .mat-mdc-tab-nav-bar {
-//     // Active tab text color
-//     .mdc-tab--active .mdc-tab__text-label {
-//         color: var(--color-dark-accent) !important;
-//     }
-
-//     // Tab underline/indicator color - multiple selectors for compatibility
-//     .mdc-tab-indicator--active .mdc-tab-indicator__content--underline {
-//         border-color: var(--color-dark-accent) !important;
-//     }
-
-//     .mat-mdc-tab-header .mat-mdc-ink-bar {
-//         background-color: var(--color-dark-accent) !important;
-//     }
-
-//     .mat-ink-bar {
-//         background-color: var(--color-dark-accent) !important;
-//     }
-
-//     // Inactive tab text color
-//     .mdc-tab:not(.mdc-tab--active) .mdc-tab__text-label {
-//         color: var(--color-dark-primary) !important;
-//     }
-// }
-
-// // Legacy tab styles
-// .mat-tab-group {
-//     .mat-ink-bar {
-//         background-color: var(--color-dark-accent) !important;
-//     }
-
-//     .mat-tab-label-active {
-//         color: var(--color-dark-primary) !important;
-//     }
-// }
diff --git a/apps/36-blocks/src/assets/scss/component/_text-style.scss b/apps/36-blocks/src/assets/scss/component/_text-style.scss
deleted file mode 100644
index e69de29b..00000000
diff --git a/apps/36-blocks/src/assets/scss/theme/_default-theme.scss b/apps/36-blocks/src/assets/scss/theme/_default-theme.scss
index d89557d2..2b36fa35 100644
--- a/apps/36-blocks/src/assets/scss/theme/_default-theme.scss
+++ b/apps/36-blocks/src/assets/scss/theme/_default-theme.scss
@@ -11,12 +11,6 @@ html {
     @include mat.all-component-themes(theme.$light-theme);
     @include mat.system-level-colors(theme.$light-theme);
     @include mat.system-level-typography(theme.$light-theme);
-
-    // Dynamic Material Design System variables for dark theme only
-    // Explicitly picks tone 40 for primary and tone 90 for on-primary from Azure palette
-    // --mat-sys-primary: #{map.get(theme.$primary-palette, 80)};
-    //   --mat-sys-on-primary: #{map.get(theme.$theme-primary, 90)};
-    //   --mat-button-outlined-label-text-color: var(--color-white, #ffffff);
 }
 
 /* System default: follow OS dark mode when body has no theme class */
@@ -37,5 +31,4 @@ body.dark-theme {
 body.light-theme {
     @include mat.all-component-colors(theme.$light-theme);
     @include mat.system-level-colors(theme.$light-theme);
-    // --mat-sys-primary: #{map.get(theme.$primary-palette, 80)};
 }
diff --git a/apps/36-blocks/src/environments/environment.test.ts b/apps/36-blocks/src/environments/environment.test.ts
deleted file mode 100644
index 24e25d53..00000000
--- a/apps/36-blocks/src/environments/environment.test.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-// This file can be replaced during build by using the `fileReplacements` array.
-// `ng build` replaces `environment.ts` with `environment.prod.ts`.
-// The list of file replacements can be found in `angular.json`.
-
-import { envVariables } from './env-variables';
-
-export const environment = {
-    production: false,
-    env: 'dev',
-    proxyServer: 'https://test.proxy.msg91.com',
-    baseUrl: 'https://apitest.msg91.com/api',
-    ...envVariables,
-};
-/*
- * For easier debugging in development mode, you can import the following file
- * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
- *
- * This import should be commented out in production mode because it will have a negative impact
- * on performance if an error is thrown.
- */
-// import 'zone.js/plugins/zone-error';  // Included with Angular CLI.
diff --git a/apps/36-blocks/src/styles.scss b/apps/36-blocks/src/styles.scss
index 38e3c0ff..0a282700 100644
--- a/apps/36-blocks/src/styles.scss
+++ b/apps/36-blocks/src/styles.scss
@@ -3,34 +3,13 @@
 @use 'assets/scss/base/light-theme';
 @use 'assets/scss/base/dark-theme';
 
-/* Reset*/
-@use 'assets/scss/base/reset';
-/* Component*/
-@use 'assets/scss/component/modal';
-
 /* Theme*/
 @use 'assets/scss/theme/default-theme';
 
 /*Components*/
-@use 'assets/scss/component/filters';
 @use 'assets/scss/component/toast';
-// @use 'assets/scss/component/table';
 @use 'assets/scss/component/loader';
 @use 'assets/scss/component/icon';
-@use 'assets/scss/component/card';
-@use 'assets/scss/component/form-field';
-@use 'assets/scss/component/pagination';
-@use 'assets/scss/component/tabs';
-@use 'assets/scss/component/buttons';
-@use 'assets/scss/component/status';
-@use 'assets/scss/component/text-style';
-@use 'assets/scss/component/side-dialog';
-@use 'assets/scss/component/menu';
-@use 'assets/scss/component/sidenav';
-@use 'assets/scss/component/select-option';
-@use 'assets/scss/component/chart';
-@use 'assets/scss/component/mat-list';
-@use 'assets/scss/component/stepper';
 @use 'assets/scss/component/animation';
 @use '../../shared/scss/global';
 body {
@@ -73,9 +52,3 @@ body {
         width: 100%;
     }
 }
-
-// .block-feature-tabs {
-//     .mat-tab-body-wrapper {
-//         height: 100%;
-//     }
-// }