diff --git a/apps/36-blocks/src/app/create-project/create-project.component.html b/apps/36-blocks/src/app/create-project/create-project.component.html
index b5099f6c..ba3f0942 100644
--- a/apps/36-blocks/src/app/create-project/create-project.component.html
+++ b/apps/36-blocks/src/app/create-project/create-project.component.html
@@ -1,4 +1,4 @@
-<div class="app-content flex justify-center h-screen">
+<div class="flex justify-center h-screen">
     <div class="w-3/4 border rounded-8 bg-gray" labelPosition="bottom">
         @if (currentstep === 1) {
         <div
diff --git a/apps/36-blocks/src/app/features/create-feature/create-feature.component.html b/apps/36-blocks/src/app/features/create-feature/create-feature.component.html
index f2263f20..0fc04aac 100644
--- a/apps/36-blocks/src/app/features/create-feature/create-feature.component.html
+++ b/apps/36-blocks/src/app/features/create-feature/create-feature.component.html
@@ -1,4 +1,4 @@
-<div class="app-content flex flex-col">
+<div class="flex flex-col">
     @if ((isLoading$ | async) || (loadingScript | async)) { <proxy-loader></proxy-loader> }
     <div class="flex justify-start gap-2 mb-6" [class.items-start]="isEditMode" [class.items-center]="!isEditMode">
         <button type="button" matIconButton [routerLink]="['/app', 'features']">
@@ -326,22 +326,20 @@ <h4 class="my-0 font-semibold text-base text-on-surface">Add New Block</h4>
                     </mat-tab>
                     <mat-tab label="Event Catalog">
                         <div class="p-6 flex flex-col gap-4">
-                            <div class="rounded-xl border broder-color overflow-hidden">
-                                <div class="flex items-center justify-between px-4 py-3 border-b broder-color bg-color">
+                            <div class="card-with-header">
+                                <div class="card-with-header--header justify-between">
                                     <div class="flex items-center gap-2 text-color">
                                         <mat-icon class="!text-base !w-4">bolt</mat-icon>
                                         <span class="mat-body-2 font-semibold">Event Catalog</span>
                                     </div>
                                     @if (webhookEventsData?.length) {
-                                    <span
-                                        class="text-xs font-medium px-2 py-0.5 rounded-full bg-[var(--color-common-hover)] text-color"
-                                    >
+                                    <span class="text-xs font-medium px-2 py-0.5 rounded-full text-color">
                                         {{ webhookEventsData.length }} events
                                     </span>
                                     }
                                 </div>
                                 @if (webhookEventsData?.length) {
-                                <div class="p-4">
+                                <div class="bg-color p-4">
                                     <mat-accordion>
                                         @for (event of webhookEventsData; track event) {
                                         <mat-expansion-panel class="!mb-2">
@@ -381,7 +379,7 @@ <h4 class="my-0 font-semibold text-base text-on-surface">Add New Block</h4>
                                     </mat-accordion>
                                 </div>
                                 } @else {
-                                <div class="flex flex-col items-center justify-center py-16 gap-3">
+                                <div class="bg-color flex flex-col items-center justify-center py-16 gap-3">
                                     <mat-icon class="text-color opacity-30 !text-[48px] !w-12 !h-12">bolt</mat-icon>
                                     <div class="flex flex-col items-center gap-1">
                                         <p class="mat-body-1 font-semibold text-color m-0">No events available</p>
@@ -582,9 +580,9 @@ <h3 class="template-card__title">Custom Mapping</h3>
 </ng-template>
 
 <ng-template #configureMethodFormContent let-serviceForm="serviceForm">
-    <div class="flex flex-col grow rounded-xl broder-color overflow-hidden" [class.border]="!serviceForm">
+    <div class="flex flex-col grow card-with-header" [class.border]="!serviceForm">
         @if ((selectedMethod | async)?.method_services; as methodServices) { @if (!serviceForm) {
-        <div class="flex items-center gap-2 px-4 py-3 border-b broder-color bg-color">
+        <div class="card-with-header--header">
             <mat-icon class="!text-base !w-4 text-color">tune</mat-icon>
             <span
                 class="mat-body-2 font-semibold"
@@ -592,7 +590,7 @@ <h3 class="template-card__title">Custom Mapping</h3>
             >
         </div>
         } @if (serviceForm ?? featureForm.get('serviceDetails')?.at(selectedServiceIndex); as formToUse) {
-        <div class="flex flex-col gap-3" [class.p-4]="!serviceForm">
+        <div class="bg-color flex flex-col gap-3" [class.p-4]="!serviceForm">
             <form [formGroup]="formToUse" class="flex flex-col gap-1">
                 @if (methodServices?.[selectedServiceIndex]?.requirements; as requirements) { @if
                 ((formToUse.controls.requirements.controls | keyvalue)?.length) {
@@ -632,7 +630,7 @@ <h3 class="template-card__title">Custom Mapping</h3>
                     <proxy-copy-button matSuffix [copyData]="callbackUrl" tooltip="Copy URL"></proxy-copy-button>
                 </mat-form-field>
                 } @if (isEditMode) {
-                <div class="flex items-center justify-between py-3 px-3 rounded-lg bg-[var(--color-common-hover)]">
+                <div class="flex items-center justify-between py-3 px-3 rounded-lg">
                     <span class="mat-body-2">Enable Service</span>
                     <mat-slide-toggle color="primary" [formControl]="formToUse.controls.is_enable"></mat-slide-toggle>
                 </div>
@@ -678,14 +676,14 @@ <h2 mat-dialog-title class="m-0">{{ getSelectedServiceName() }}</h2>
     <div class="flex flex-col gap-3 my-6 grow text-color">
         @if (configureMethodsTableData.length === 0) {
         <div
-            class="flex flex-col items-center justify-center py-10 gap-2 rounded-xl border border-dashed broder-color bg-color"
+            class="flex flex-col items-center justify-center py-10 gap-2 rounded-xl border border-dashed border-color bg-color"
         >
             <mat-icon class="secondary-text-color opacity-40 !text-4xl !w-9 !h-9">tune</mat-icon>
             <p class="mat-body-2 text-color m-0">No methods available</p>
         </div>
         } @else {
-        <div class="rounded-xl border broder-color overflow-hidden">
-            <div class="grid grid-cols-[1fr_auto_auto] items-center px-4 py-2 bg-color border-b broder-color">
+        <div class="card-with-header">
+            <div class="grid grid-cols-[1fr_auto_auto] items-center px-4 py-2 bg-color border-b border-color">
                 <span class="mat-body-2 font-semibold text-color uppercase tracking-wide text-xs">Method</span>
                 <span class="mat-body-2 font-semibold text-color uppercase tracking-wide text-xs w-20 text-center"
                     >Enable</span
@@ -696,15 +694,15 @@ <h2 mat-dialog-title class="m-0">{{ getSelectedServiceName() }}</h2>
             </div>
             @for (row of configureMethodsTableData; track row.index) {
             <div
-                class="grid grid-cols-[1fr_auto_auto] items-center px-4 py-3 hover:bg-[var(--color-common-hover)] transition-colors duration-150"
+                class="grid grid-cols-[1fr_auto_auto] items-center px-4 py-3 transition-colors duration-150"
                 [class.border-b]="!$last"
-                [class.broder-color]="!$last"
+                [class.border-color]="!$last"
             >
                 <div class="flex items-center gap-2 min-w-0">
                     <span class="mat-body-2 font-medium truncate">{{ row.name }}</span>
                     @if (row.index === 0) {
                     <span
-                        class="inline-flex items-center px-1.5 py-0.5 rounded-full text-[10px] font-semibold bg-[var(--color-common-primary-light,#e8f5e9)] text-[var(--color-common-primary)] leading-none"
+                        class="inline-flex items-center px-1.5 py-0.5 rounded-full text-[10px] font-semibold text-[var(--color-common-primary)] leading-none"
                     >
                         default
                     </span>
@@ -813,11 +811,10 @@ <h2 class="mat-h2 font-semibold text-light-gray mb-0" [style.color]="getEffectiv
         <div
             class="flex flex-col items-center gap-1 w-full"
             [class.dark-theme-login]="featureForm.get('brandingDetails.theme')?.value === WidgetTheme.Dark"
-            [class.preview-input-field]="featureForm.get('brandingDetails.theme')?.value === WidgetTheme.Dark"
         >
             <mat-form-field appearance="outline" class="w-[85%]">
                 <mat-label>Email or Phone</mat-label>
-                <input matInput type="text" placeholder="Enter Email or Phone" />
+                <input matInput type="text" placeholder="Enter email or phone" />
             </mat-form-field>
 
             <mat-form-field appearance="outline" class="w-[85%]">
@@ -963,13 +960,13 @@ <h2 class="mat-h2 font-semibold text-light-gray mb-0" [style.color]="getEffectiv
 
 <ng-template #authorizationSetup>
     <div class="flex gap-6 my-4 max-lg:flex-col">
-        <div class="flex flex-col gap-5 flex-1 min-w-0">
-            <div class="rounded-xl border broder-color overflow-hidden">
-                <div class="flex items-center gap-2 px-4 py-3 text-color border-b broder-color bg-color">
+        <div class="flex flex-col gap-5 flex-1 min-w-0 w-1/2 max-2xl:w-full">
+            <div class="card-with-header">
+                <div class="card-with-header--header">
                     <mat-icon class="!text-base !w-4">settings</mat-icon>
                     <span class="mat-body-2 font-semibold">Session & Token Settings</span>
                 </div>
-                <div class="flex flex-col gap-1 px-4 pt-4 pb-4 max-w-md max-lg:max-w-full">
+                <div class="bg-color flex flex-col gap-1 px-4 pt-4 pb-4">
                     <ng-container
                         *ngTemplateOutlet="
                             inputField;
@@ -1014,9 +1011,7 @@ <h2 class="mat-h2 font-semibold text-light-gray mb-0" [style.color]="getEffectiv
                         "
                     ></ng-container>
                     @if (isEditMode && featureForm.get('primaryDetails.feature_id')?.value === 1) {
-                    <div
-                        class="flex items-center justify-between gap-3 py-3 px-3 my-3 rounded-lg bg-[var(--color-common-hover)]"
-                    >
+                    <div class="flex items-center justify-between gap-3 py-3 px-3 my-3 rounded-lg">
                         <div class="flex flex-col gap-0.5">
                             <span class="mat-body-2 font-medium">Block new user sign-ups</span>
                             <span class="text-xs text-color">Prevent new users from registering via this block</span>
@@ -1031,18 +1026,18 @@ <h2 class="mat-h2 font-semibold text-light-gray mb-0" [style.color]="getEffectiv
             </div>
 
             @if (((isEditMode ? featureDetails$ : selectedMethod) | async)?.authorization_format?.format; as code) {
-            <div class="rounded-xl border broder-color overflow-hidden">
-                <div class="flex items-center justify-between px-4 py-3 border-b broder-color bg-color">
+            <div class="card-with-header">
+                <div class="card-with-header--header justify-between">
                     <div class="flex items-center gap-2 text-color">
                         <mat-icon class="!text-base !w-4">data_object</mat-icon>
                         <span class="mat-body-2 font-semibold">JWT Payload Format</span>
                     </div>
                     <proxy-copy-button [copyData]="code | json" tooltip="Copy JSON"></proxy-copy-button>
                 </div>
-                <div class="overflow-auto code-snippet-view">
+                <div class="bg-color overflow-auto code-snippet-view">
                     <markdown [data]="code | json | language: 'javascript'"></markdown>
                 </div>
-                <div class="flex px-4 py-3 items-center border-t broder-color bg-color text-color">
+                <div class="bg-color flex px-4 py-3 items-center border-t border-color bg-color text-color">
                     <mat-icon class="!text-base">info</mat-icon>
                     <p class="mat-body-2 m-0 text-xs">
                         JSON format you will receive after login as JWT in Authorization key
@@ -1061,31 +1056,31 @@ <h2 class="mat-h2 font-semibold text-light-gray mb-0" [style.color]="getEffectiv
 
 <ng-template #designAndCode>
     <div class="flex flex-col gap-4">
-        <div class="rounded-xl border broder-color overflow-hidden">
-            <div class="flex items-center justify-between px-4 py-3 border-b broder-color bg-color">
+        <div class="card-with-header">
+            <div class="card-with-header--header justify-between">
                 <div class="flex items-center gap-2">
                     <mat-icon class="!text-base !w-4 text-color">code</mat-icon>
                     <span class="mat-body-2 font-semibold">Integration Script</span>
                 </div>
                 <proxy-copy-button [copyData]="proxyAuthScript" tooltip="Copy Script"></proxy-copy-button>
             </div>
-            <div class="overflow-auto code-snippet-view">
+            <div class="bg-color overflow-auto code-snippet-view">
                 <markdown [data]="proxyAuthScript | language: 'javascript'"></markdown>
             </div>
         </div>
 
-        <div class="rounded-xl border broder-color overflow-hidden">
-            <div class="flex items-center justify-between px-4 py-3 border-b broder-color bg-color">
+        <div class="card-with-header">
+            <div class="card-with-header--header justify-between">
                 <div class="flex items-center gap-2">
                     <mat-icon class="!text-base !w-4 text-color">html</mat-icon>
                     <span class="mat-body-2 font-semibold">Button Container Div</span>
                 </div>
                 <proxy-copy-button [copyData]="demoDiv()" tooltip="Copy Code"></proxy-copy-button>
             </div>
-            <div class="overflow-auto code-snippet-view">
+            <div class="bg-color overflow-auto code-snippet-view">
                 <markdown [data]="demoDiv() | language: 'html'"></markdown>
             </div>
-            <div class="flex px-4 py-3 flex-col border-t broder-color bg-color">
+            <div class="bg-color flex items-center px-4 py-3 border-t border-color bg-color">
                 <mat-icon class="!text-base text-color">info</mat-icon>
                 <p class="mat-body-2 text-color m-0 text-xs">
                     The social login button is shown in a dialog by default. Add this div to your UI to render it inline
@@ -1106,12 +1101,12 @@ <h2 class="mat-h2 font-semibold text-light-gray mb-0" [style.color]="getEffectiv
 
 <ng-template #webhook>
     <div class="flex flex-col gap-6 my-4">
-        <div class="rounded-xl border broder-color overflow-hidden">
-            <div class="flex items-center gap-2 px-4 py-3 text-color border-b broder-color bg-color">
+        <div class="card-with-header">
+            <div class="card-with-header--header">
                 <mat-icon class="!text-base !w-4">webhook</mat-icon>
                 <span class="mat-body-2 font-semibold">Webhook Configuration</span>
             </div>
-            <div class="flex flex-col gap-1 px-4 pt-4 pb-4 max-w-xl max-lg:max-w-full">
+            <div class="bg-color flex flex-col gap-1 px-4 pt-4 pb-4">
                 <ng-container
                     *ngTemplateOutlet="
                         inputField;
@@ -1410,7 +1405,7 @@ <h5 class="mat-h5 my-0">Billable Metrics / Items</h5>
                             <td mat-cell *matCellDef="let element" data-label="Code">
                                 <div class="flex items-center gap-1">
                                     <span
-                                        class="font-mono text-xs px-2 py-0.5 rounded-4 [background-color:var(--color-common-chip-bg)] [color:var(--color-common-text-2)]"
+                                        class="font-mono text-xs px-2 py-0.5 rounded-4 [background-color:var(--color-common-chip-bg)]"
                                         >{{ element.code }}</span
                                     >
                                     <proxy-copy-button
@@ -1438,7 +1433,7 @@ <h5 class="mat-h5 my-0">Billable Metrics / Items</h5>
                             <th mat-header-cell *matHeaderCellDef mat-sort-header>Aggregation</th>
                             <td mat-cell *matCellDef="let element" data-label="Aggregation">
                                 <span
-                                    class="inline-flex items-center px-2 py-0.5 rounded-4 text-xs font-medium [background-color:var(--color-common-chip-bg)] [color:var(--color-common-text-2)]"
+                                    class="inline-flex items-center px-2 py-0.5 rounded-4 text-xs font-medium [background-color:var(--color-common-chip-bg)]"
                                 >
                                     {{ getAggregationLabel(element?.aggregation_type) }}
                                 </span>
@@ -1645,7 +1640,7 @@ <h5 class="mat-h5 my-0">Created Plans</h5>
                             <td mat-cell *matCellDef="let element" data-label="Code">
                                 <div class="flex items-center gap-1">
                                     <span
-                                        class="font-mono text-xs px-2 py-0.5 rounded-4 [background-color:var(--color-common-chip-bg)] [color:var(--color-common-text-2)]"
+                                        class="font-mono text-xs px-2 py-0.5 rounded-4 [background-color:var(--color-common-chip-bg)]"
                                         >{{ element.code }}</span
                                     >
                                     <proxy-copy-button
@@ -1680,7 +1675,7 @@ <h5 class="mat-h5 my-0">Created Plans</h5>
                             <th mat-header-cell *matHeaderCellDef mat-sort-header>Currency</th>
                             <td mat-cell *matCellDef="let element" data-label="Currency">
                                 <span
-                                    class="inline-flex items-center px-2 py-0.5 rounded-4 text-xs font-medium uppercase [background-color:var(--color-common-chip-bg)] [color:var(--color-common-text-2)]"
+                                    class="inline-flex items-center px-2 py-0.5 rounded-4 text-xs font-medium uppercase [background-color:var(--color-common-chip-bg)]"
                                 >
                                     {{ element.amount_currency }}
                                 </span>
@@ -1691,7 +1686,7 @@ <h5 class="mat-h5 my-0">Created Plans</h5>
                             <th mat-header-cell *matHeaderCellDef mat-sort-header>Status</th>
                             <td mat-cell *matCellDef="let element" data-label="Status">
                                 <span
-                                    class="inline-flex items-center px-2 py-0.5 rounded-4 text-xs font-medium [background-color:var(--color-common-chip-bg)] [color:var(--color-common-text-2)]"
+                                    class="inline-flex items-center px-2 py-0.5 rounded-4 text-xs font-medium [background-color:var(--color-common-chip-bg)]"
                                 >
                                     {{ getAggregationLabel(element?.aggregation_type) }}
                                 </span>
@@ -1760,7 +1755,7 @@ <h5 class="mat-h5 my-0">Taxes</h5>
                             <th mat-header-cell *matHeaderCellDef>Code</th>
                             <td mat-cell *matCellDef="let tax" data-label="Code">
                                 <span
-                                    class="font-mono text-xs px-2 py-0.5 rounded-4 [background-color:var(--color-common-chip-bg)] [color:var(--color-common-text-2)]"
+                                    class="font-mono text-xs px-2 py-0.5 rounded-4 [background-color:var(--color-common-chip-bg)]"
                                     >{{ tax.code }}</span
                                 >
                             </td>
@@ -1769,8 +1764,7 @@ <h5 class="mat-h5 my-0">Taxes</h5>
                             <th mat-header-cell *matHeaderCellDef>Rate (%)</th>
                             <td mat-cell *matCellDef="let tax" data-label="Rate">
                                 <span class="font-semibold tabular-nums"
-                                    >{{ tax.rate
-                                    }}<span class="text-xs [color:var(--color-common-text-2)] ml-0.5">%</span></span
+                                    >{{ tax.rate }}<span class="text-xs ml-0.5">%</span></span
                                 >
                             </td>
                         </ng-container>
@@ -1871,14 +1865,14 @@ <h5 class="mat-h5 my-0">Taxes</h5>
 <ng-template #brandingStepContent>
     <div class="flex gap-6 grow min-h-[400px] branding-step-content max-lg:flex-col justify-between mb-3">
         <!-- Left: Branding form -->
-        <div class="flex flex-col gap-4 branding-form w-1/2 max-lg:w-full overflow-y-auto pr-1">
+        <div class="flex flex-col gap-4 branding-form w-1/2 max-2xl:w-full overflow-y-auto pr-1">
             <!-- Logo Section -->
-            <div class="rounded-xl border broder-color overflow-hidden">
-                <div class="flex items-center gap-2 px-4 py-3 border-b broder-color bg-color">
+            <div class="card-with-header">
+                <div class="card-with-header--header">
                     <mat-icon class="!text-base !w-4 text-color">image</mat-icon>
                     <span class="mat-body-2 font-semibold">Logo</span>
                 </div>
-                <div class="px-4 pt-4 pb-3 flex flex-col gap-3">
+                <div class="bg-color px-4 pt-4 pb-3 flex flex-col gap-3">
                     <mat-radio-group
                         [value]="logoInputMode"
                         (change)="logoInputMode = $event.value"
@@ -1940,12 +1934,12 @@ <h5 class="mat-h5 my-0">Taxes</h5>
             </div>
 
             <!-- Appearance Section -->
-            <div class="rounded-xl border broder-color overflow-hidden">
-                <div class="flex items-center gap-2 px-4 py-3 border-b broder-color bg-color">
+            <div class="card-with-header">
+                <div class="card-with-header--header">
                     <mat-icon class="!text-base !w-4 text-color">tune</mat-icon>
                     <span class="mat-body-2 font-semibold">Appearance</span>
                 </div>
-                <div class="px-4 pt-4 pb-2 flex flex-col gap-1">
+                <div class="bg-color px-4 pt-4 pb-2 flex flex-col gap-1">
                     <ng-container
                         *ngTemplateOutlet="
                             inputField;
@@ -2010,12 +2004,12 @@ <h5 class="mat-h5 my-0">Taxes</h5>
 
             <!-- Display Options (auth feature only) -->
             @if (featureForm.get('primaryDetails.feature_id')?.value === 1) {
-            <div class="rounded-xl border broder-color overflow-hidden">
-                <div class="flex items-center gap-2 px-4 py-3 border-b broder-color bg-color">
+            <div class="card-with-header">
+                <div class="card-with-header--header">
                     <mat-icon class="!text-base !w-4 text-color">toggle_on</mat-icon>
                     <span class="mat-body-2 font-semibold">Display Options</span>
                 </div>
-                <div class="flex flex-col divide-y divide-[var(--color-common-border)]">
+                <div class="bg-color flex flex-col divide-y divide-[var(--color-common-border)]">
                     <div class="flex items-center justify-between gap-3 px-4 py-3">
                         <span class="mat-body-2">Show social login as icon</span>
                         <mat-slide-toggle
@@ -2037,12 +2031,12 @@ <h5 class="mat-h5 my-0">Taxes</h5>
             }
 
             <!-- Colors Section -->
-            <div class="rounded-xl border broder-color overflow-hidden">
-                <div class="flex items-center gap-2 px-4 py-3 border-b broder-color bg-color">
+            <div class="card-with-header">
+                <div class="card-with-header--header">
                     <mat-icon class="!text-base !w-4 text-color">palette</mat-icon>
                     <span class="mat-body-2 font-semibold">Colors</span>
                 </div>
-                <div class="flex flex-col divide-y divide-[var(--color-common-border)]">
+                <div class="bg-color flex flex-col divide-y divide-[var(--color-common-border)]">
                     <div class="flex items-center justify-between gap-3 px-4 py-3">
                         <div class="flex flex-col gap-0.5">
                             <label class="mat-body-2 font-medium">Primary color</label>
@@ -2054,7 +2048,7 @@ <h5 class="mat-h5 my-0">Taxes</h5>
                             }}</span>
                             <input
                                 type="color"
-                                class="w-8 h-8 cursor-pointer border broder-color rounded-lg overflow-hidden p-0.5"
+                                class="w-8 h-8 cursor-pointer border border-color rounded-lg overflow-hidden p-0.5"
                                 [value]="
                                     featureForm.get('brandingDetails.light_theme_primary_color')?.value || '#000000'
                                 "
@@ -2077,7 +2071,7 @@ <h5 class="mat-h5 my-0">Taxes</h5>
                             }}</span>
                             <input
                                 type="color"
-                                class="w-8 h-8 cursor-pointer border broder-color rounded-lg overflow-hidden p-0.5"
+                                class="w-8 h-8 cursor-pointer border border-color rounded-lg overflow-hidden p-0.5"
                                 [value]="
                                     featureForm.get('brandingDetails.dark_theme_primary_color')?.value || '#ffffff'
                                 "
@@ -2097,7 +2091,7 @@ <h5 class="mat-h5 my-0">Taxes</h5>
                             }}</span>
                             <input
                                 type="color"
-                                class="w-8 h-8 cursor-pointer border broder-color rounded-lg overflow-hidden p-0.5"
+                                class="w-8 h-8 cursor-pointer border border-color rounded-lg overflow-hidden p-0.5"
                                 [value]="featureForm.get('brandingDetails.button_color')?.value || '#19E6CE'"
                                 (input)="
                                     featureForm.get('brandingDetails.button_color')?.setValue($any($event.target).value)
@@ -2113,7 +2107,7 @@ <h5 class="mat-h5 my-0">Taxes</h5>
                             }}</span>
                             <input
                                 type="color"
-                                class="w-8 h-8 cursor-pointer border broder-color rounded-lg overflow-hidden p-0.5"
+                                class="w-8 h-8 cursor-pointer border border-color rounded-lg overflow-hidden p-0.5"
                                 [value]="featureForm.get('brandingDetails.button_hover_color')?.value || '#19E6CE'"
                                 (input)="
                                     featureForm
@@ -2131,7 +2125,7 @@ <h5 class="mat-h5 my-0">Taxes</h5>
                             }}</span>
                             <input
                                 type="color"
-                                class="w-8 h-8 cursor-pointer border broder-color rounded-lg overflow-hidden p-0.5"
+                                class="w-8 h-8 cursor-pointer border border-color rounded-lg overflow-hidden p-0.5"
                                 [value]="featureForm.get('brandingDetails.button_text_color')?.value || '#000000'"
                                 (input)="
                                     featureForm
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 6d8b7cc6..ed0c21a1 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
@@ -1,7 +1,6 @@
 .code-snippet-view {
     transition: min-height 0.2s linear;
     min-width: 500px;
-    max-width: 800px;
 }
 
 .active {
@@ -147,20 +146,6 @@
     color: var(--color-common-primary) !important;
 }
 
-.preview-input-field {
-    input {
-        border: none;
-        outline: none;
-        background: transparent;
-        width: 100%;
-
-        &::placeholder {
-            color: var(--color-common-text);
-            opacity: 1;
-        }
-    }
-}
-
 .custom-toggle-group {
     display: inline-flex;
     border-radius: 8px;
diff --git a/apps/36-blocks/src/app/features/feature/feature.component.html b/apps/36-blocks/src/app/features/feature/feature.component.html
index 1b7acef0..f3f59f57 100644
--- a/apps/36-blocks/src/app/features/feature/feature.component.html
+++ b/apps/36-blocks/src/app/features/feature/feature.component.html
@@ -1,5 +1,5 @@
 @if (loading$ | async; as loading) {
-<div class="app-content flex flex-col">
+<div class="flex flex-col">
     @if (loading.dataLoading && (hasSomeFeatures$ | async) === null) { <proxy-loader></proxy-loader> }
 
     <!-- Action Bar -->
@@ -60,7 +60,7 @@ <h4 class="my-0 text-secondary mat-body-1 font-semibold">Blocks</h4>
                         <th mat-header-cell *matHeaderCellDef mat-sort-header class="width-md-300">Name</th>
                         <td mat-cell *matCellDef="let element" data-label="Name">
                             @if (!loading.dataLoading) {
-                            <span class="font-semibold text-sm text-color">{{ element.name }}</span>
+                            <span>{{ element.name }}</span>
                             } @else {
                             <ng-container [ngTemplateOutlet]="loadingRef"></ng-container>
                             }
@@ -76,7 +76,7 @@ <h4 class="my-0 text-secondary mat-body-1 font-semibold">Blocks</h4>
                                 <span
                                     [matTooltip]="element.reference_id"
                                     matTooltipPosition="above"
-                                    class="cursor-pointer font-mono text-xs bg-[var(--color-common-chip-bg)] px-2 py-0.5 rounded-4 [color:var(--color-common-text-2)] min-w-[150px]"
+                                    class="cursor-pointer font-mono text-xs px-2 py-0.5 rounded-4 min-w-[150px]"
                                 >
                                     {{
                                         element.reference_id?.length > 15
@@ -102,11 +102,7 @@ <h4 class="my-0 text-secondary mat-body-1 font-semibold">Blocks</h4>
                         <th mat-header-cell *matHeaderCellDef mat-sort-header class="width-md-200">Method</th>
                         <td mat-cell *matCellDef="let element" data-label="Method">
                             @if (!loading.dataLoading) { @if (element.method?.name) {
-                            <span
-                                class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-[var(--color-common-chip-bg)] [color:var(--color-common-text-2)]"
-                            >
-                                {{ element.method?.name }}
-                            </span>
+                            {{ element.method?.name }}
                             } } @else {
                             <ng-container [ngTemplateOutlet]="loadingRef"></ng-container>
                             }
@@ -118,11 +114,7 @@ <h4 class="my-0 text-secondary mat-body-1 font-semibold">Blocks</h4>
                         <th mat-header-cell *matHeaderCellDef mat-sort-header class="width-md-200">Type</th>
                         <td mat-cell *matCellDef="let element" data-label="Type">
                             @if (!loading.dataLoading) { @if (element.feature?.name) {
-                            <span
-                                class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-[var(--color-common-chip-bg)] [color:var(--color-common-text-2)]"
-                            >
-                                {{ element.feature?.name }}
-                            </span>
+                            {{ element.feature?.name }}
                             } } @else {
                             <ng-container [ngTemplateOutlet]="loadingRef"></ng-container>
                             }
diff --git a/apps/36-blocks/src/app/layout/layout.component.html b/apps/36-blocks/src/app/layout/layout.component.html
index 7346e4a0..28fdccc5 100644
--- a/apps/36-blocks/src/app/layout/layout.component.html
+++ b/apps/36-blocks/src/app/layout/layout.component.html
@@ -1,19 +1,18 @@
 <div class="flex w-full h-full" [class.collapsed-sidebar]="!(isSideNavOpen | async)">
     <div
-        class="flex flex-col transition-all duration-200 mat-drawer-content max-desktop:fixed max-desktop:z-[999] max-desktop:top-0 max-desktop:bottom-0"
+        class="flex flex-col transition-all duration-200 mat-drawer-content max-desktop:fixed max-desktop:z-[999] max-desktop:top-0 max-desktop:bottom-0 bg-color p-2"
         [class.mat-drawer-toggle-btn-hover]="isSideNavOpen | async"
-        [class]="!(isSideNavOpen | async) ? 'overflow-hidden !w-[56px]' : 'w-[246px]'"
+        [class]="!(isSideNavOpen | async) ? 'overflow-hidden !w-[56px] p-1.5' : 'w-[246px]'"
     >
-        <div
-            class="flex items-center mat-drawer-header"
-            [class]="!(isSideNavOpen | async) ? 'flex-col gap-2 mt-3' : ''"
-        >
+        <div class="flex items-center py-2" [class]="!(isSideNavOpen | async) ? 'flex-col gap-2' : ''">
             <div
                 class="flex items-center grow gap-2 mat-drawer-header-title px-4"
                 #clientsMenuTrigger="matMenuTrigger"
                 [matMenuTriggerFor]="clientsMenu"
             >
+                @if (!(isSideNavOpen | async)) {
                 <mat-icon class="mat-icon-22">apps</mat-icon>
+                }
                 <div
                     class="flex items-center gap-x-1 mat-drawer-header-subtitle cursor-pointer"
                     [class.hidden]="!(isSideNavOpen | async)"
@@ -102,7 +101,7 @@
                 </mat-slide-toggle>
             </div>
             }
-            <button matButton [matMenuTriggerFor]="menu">
+            <button class="!rounded-lg" matButton [matMenuTriggerFor]="menu">
                 <div class="flex items-center">
                     @if (user.photoURL) {
                     <img [src]="user.photoURL" alt="No Image" class="w-7 h-7 rounded-full" loading="lazy" />
@@ -114,7 +113,7 @@
                     <div class="flex flex-col" style="width: 140px">
                         <h6 [class.hidden]="!(isSideNavOpen | async)" class="username m-0">{{ user.displayName }}</h6>
                     </div>
-                    <mat-icon class="mx-1 text-secondary material-icons-outlined">keyboard_arrow_up</mat-icon>
+                    <mat-icon class="mx-1 material-icons-outlined">keyboard_arrow_up</mat-icon>
                 </div>
             </button>
             <mat-menu #menu="matMenu" class="profile-menu ml-1">
@@ -126,7 +125,7 @@ <h4 class="m-0 py-2 px-6 text-dark font-medium">{{ user.displayName }}</h4>
         </div>
         }
     </div>
-    <div class="flex-1 flex flex-col overflow-hidden">
+    <div class="flex-1 flex flex-col app-content">
         <!-- Content::START -->
         <router-outlet></router-outlet>
         <div id="ChatbotContainer" class="h-screen w-full"></div>
diff --git a/apps/36-blocks/src/app/layout/main-left-side-nav/main-left-side-nav.component.html b/apps/36-blocks/src/app/layout/main-left-side-nav/main-left-side-nav.component.html
index f99d729b..3d407cbf 100644
--- a/apps/36-blocks/src/app/layout/main-left-side-nav/main-left-side-nav.component.html
+++ b/apps/36-blocks/src/app/layout/main-left-side-nav/main-left-side-nav.component.html
@@ -4,11 +4,12 @@
     <a
         mat-list-item
         [routerLink]="[item.route]"
-        routerLinkActive="active-list-item"
+        routerLinkActive="mdc-list-item--activated"
         [matTooltipPosition]="'right'"
         [matTooltip]="isSideNavOpen() ? item.label : ''"
+        [style.padding]="isSideNavOpen() ? '10px' : ''"
     >
-        <mat-icon matListIcon aria-hidden="false">{{ item.icon }}</mat-icon>
+        <mat-icon matListIcon [class.mr-3]="!isSideNavOpen()" aria-hidden="false">{{ item.icon }}</mat-icon>
         <span [class.hidden]="isSideNavOpen()" matLine>{{ item.label }}</span>
     </a>
     }
diff --git a/apps/36-blocks/src/app/layout/main-left-side-nav/main-left-side-nav.component.scss b/apps/36-blocks/src/app/layout/main-left-side-nav/main-left-side-nav.component.scss
index 8fe41612..7b74e3b3 100644
--- a/apps/36-blocks/src/app/layout/main-left-side-nav/main-left-side-nav.component.scss
+++ b/apps/36-blocks/src/app/layout/main-left-side-nav/main-left-side-nav.component.scss
@@ -1,6 +1,7 @@
-:host {
-    a.active-list-item::before {
-        background-color: var(--mat-list-list-item-hover-state-layer-color, var(--mat-sys-on-surface));
-        opacity: var(--mat-list-list-item-hover-state-layer-opacity, var(--mat-sys-hover-state-layer-opacity));
+.service-list {
+    .mat-mdc-list-item {
+        border-radius: 8px !important;
+        height: 42px !important;
+        margin-bottom: 2px;
     }
 }
diff --git a/apps/36-blocks/src/app/logs/log/log.component.html b/apps/36-blocks/src/app/logs/log/log.component.html
index 140b5110..d484f343 100644
--- a/apps/36-blocks/src/app/logs/log/log.component.html
+++ b/apps/36-blocks/src/app/logs/log/log.component.html
@@ -1,4 +1,4 @@
-<div class="app-content flex flex-col">
+<div class="flex flex-col">
     @if (isLoading$ | async) {
     <proxy-loader></proxy-loader>
     }
@@ -217,10 +217,7 @@
                     <ng-container matColumnDef="user_ip">
                         <th mat-header-cell *matHeaderCellDef mat-sort-header>User IP</th>
                         <td mat-cell *matCellDef="let element" data-label="User IP">
-                            <span
-                                class="font-mono text-xs bg-[var(--color-common-chip-bg)] px-2 py-0.5 rounded-4 [color:var(--color-common-text-2)]"
-                                >{{ element.user_ip }}</span
-                            >
+                            <span class="font-mono text-xs px-2 py-0.5 rounded-4">{{ element.user_ip }}</span>
                         </td>
                     </ng-container>
 
@@ -228,9 +225,7 @@
                     <ng-container matColumnDef="endpoint">
                         <th mat-header-cell *matHeaderCellDef>Endpoint</th>
                         <td mat-cell *matCellDef="let element" class="w-b-hyphens" data-label="Endpoint">
-                            <span class="font-mono text-xs [color:var(--color-common-text-2)]">{{
-                                element.endpoint
-                            }}</span>
+                            <span class="font-mono text-xs">{{ element.endpoint }}</span>
                         </td>
                     </ng-container>
 
@@ -267,7 +262,7 @@
                         <th mat-header-cell *matHeaderCellDef mat-sort-header>Response time</th>
                         <td mat-cell *matCellDef="let element" data-label="Response time">
                             @if (element.response_time != null) {
-                            <span class="text-sm [color:var(--color-common-text-2)]"
+                            <span class="text-sm"
                                 >{{ element.response_time }}<span class="text-xs text-grey ml-0.5">ms</span></span
                             >
                             }
diff --git a/apps/36-blocks/src/app/register/register.component.html b/apps/36-blocks/src/app/register/register.component.html
index 5888541a..da5b1aa2 100644
--- a/apps/36-blocks/src/app/register/register.component.html
+++ b/apps/36-blocks/src/app/register/register.component.html
@@ -1,4 +1,4 @@
-<div class="app-content flex justify-center items-center">
+<div class="flex justify-center items-center">
     <mat-card class="outline-card min-w-[720px] max-tablet:min-w-[80%]">
         <h2 class="flex justify-center">Register</h2>
         <div>
diff --git a/apps/36-blocks/src/app/users/management/management.component.html b/apps/36-blocks/src/app/users/management/management.component.html
index 47e58963..4b794a2a 100644
--- a/apps/36-blocks/src/app/users/management/management.component.html
+++ b/apps/36-blocks/src/app/users/management/management.component.html
@@ -55,7 +55,7 @@
                             <ng-container matColumnDef="role">
                                 <th mat-header-cell *matHeaderCellDef>Role</th>
                                 <td mat-cell *matCellDef="let element" data-label="Role">
-                                    <span class="font-semibold text-sm text-color">{{ element.role }}</span>
+                                    <span>{{ element.role }}</span>
                                 </td>
                             </ng-container>
 
@@ -65,11 +65,7 @@
                                 <td mat-cell *matCellDef="let element" data-label="Permissions">
                                     <div class="flex flex-wrap gap-1.5 py-2">
                                         @for (permission of element.permissionsList; track permission.name) {
-                                        <span
-                                            class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-[var(--color-common-chip-bg)] [color:var(--color-common-text-2)]"
-                                        >
-                                            {{ permission.name }}
-                                        </span>
+                                        {{ permission.name }}
                                         }
                                     </div>
                                 </td>
@@ -168,9 +164,9 @@
                             <ng-container matColumnDef="permission">
                                 <th mat-header-cell *matHeaderCellDef>Permission</th>
                                 <td mat-cell *matCellDef="let element" data-label="Permission">
-                                    <p class="font-semibold text-sm text-color m-0">{{ element.name }}</p>
+                                    <p class="m-0">{{ element.name }}</p>
                                     @if (element.description) {
-                                    <p class="text-xs [color:var(--color-common-text-2)] mt-0.5 m-0">
+                                    <p class="text-xs mt-0.5 m-0">
                                         {{ element.description }}
                                     </p>
                                     }
@@ -240,18 +236,18 @@
             <!-- ── Snippet Tab ── -->
             @if (selectedSectionIndex === 2) {
             <div class="flex flex-col gap-4 max-w-2xl">
-                <div class="rounded-xl border broder-color overflow-hidden">
-                    <div class="flex items-center justify-between px-4 py-3 border-b broder-color bg-color">
+                <div class="card-with-header">
+                    <div class="card-with-header--header justify-between">
                         <div class="flex items-center gap-2">
                             <mat-icon class="!text-base !w-4 !h-4 secondary-text-color opacity-70">code</mat-icon>
                             <span class="mat-body-2 font-semibold">Integration Script</span>
                         </div>
                         <proxy-copy-button [copyData]="userManagementScript" tooltip="Copy Script"></proxy-copy-button>
                     </div>
-                    <div class="overflow-auto code-snippet-view">
+                    <div class="bg-color overflow-auto code-snippet-view">
                         <markdown [data]="userManagementScript | language: 'javascript'"></markdown>
                     </div>
-                    <div class="flex gap-2 px-4 py-3 border-t broder-color bg-color">
+                    <div class="bg-color flex gap-2 px-4 py-3 border-t border-color bg-color">
                         <mat-icon class="!text-sm !w-3.5 !h-3.5 secondary-text-color opacity-60 shrink-0 mt-0.5"
                             >info</mat-icon
                         >
@@ -260,15 +256,15 @@
                         </p>
                     </div>
                 </div>
-                <div class="rounded-xl border broder-color overflow-hidden">
-                    <div class="flex items-center justify-between px-4 py-3 border-b broder-color bg-color">
+                <div class="card-with-header">
+                    <div class="card-with-header--header justify-between">
                         <div class="flex items-center gap-2">
                             <mat-icon class="!text-base !w-4 !h-4 secondary-text-color opacity-70">html</mat-icon>
                             <span class="mat-body-2 font-semibold">Container HTML</span>
                         </div>
                         <proxy-copy-button [copyData]="userProxyContainerHtml" tooltip="Copy Code"></proxy-copy-button>
                     </div>
-                    <div class="overflow-auto code-snippet-view">
+                    <div class="bg-color overflow-auto code-snippet-view">
                         <markdown [data]="userProxyContainerHtml | language: 'html'"></markdown>
                     </div>
                 </div>
@@ -283,9 +279,7 @@
                 <form [formGroup]="defaultRolesForm" class="flex flex-col gap-6">
                     <mat-card class="outline-card p-5">
                         <mat-card-content class="flex items-start gap-3 !p-0">
-                            <div
-                                class="mt-0.5 w-8 h-8 rounded-lg bg-[var(--color-common-bg-light)] flex items-center justify-center shrink-0"
-                            >
+                            <div class="mt-0.5 w-8 h-8 rounded-lg flex items-center justify-center shrink-0">
                                 <mat-icon class="material-icons-outlined mat-icon-18 [color:var(--color-common-icon)]"
                                     >person_add</mat-icon
                                 >
@@ -307,9 +301,7 @@
 
                     <mat-card class="outline-card p-5">
                         <mat-card-content class="flex items-start gap-3 !p-0">
-                            <div
-                                class="mt-0.5 w-8 h-8 rounded-lg bg-[var(--color-common-bg-light)] flex items-center justify-center shrink-0"
-                            >
+                            <div class="mt-0.5 w-8 h-8 rounded-lg flex items-center justify-center shrink-0">
                                 <mat-icon class="material-icons-outlined mat-icon-18 [color:var(--color-common-icon)]"
                                     >group_add</mat-icon
                                 >
@@ -331,9 +323,7 @@
 
                     <mat-card class="outline-card p-5">
                         <mat-card-content class="flex items-start gap-3 !p-0">
-                            <div
-                                class="mt-0.5 w-8 h-8 rounded-lg bg-[var(--color-common-bg-light)] flex items-center justify-center shrink-0"
-                            >
+                            <div class="mt-0.5 w-8 h-8 rounded-lg flex items-center justify-center shrink-0">
                                 <mat-icon class="material-icons-outlined mat-icon-18 [color:var(--color-common-icon)]"
                                     >visibility_off</mat-icon
                                 >
diff --git a/apps/36-blocks/src/app/users/user/user.component.html b/apps/36-blocks/src/app/users/user/user.component.html
index 313a7ba7..fe2609c9 100644
--- a/apps/36-blocks/src/app/users/user/user.component.html
+++ b/apps/36-blocks/src/app/users/user/user.component.html
@@ -1,5 +1,5 @@
 @if (loading$ | async; as loading) {
-<div class="app-content flex flex-col h-full">
+<div class="flex flex-col h-full">
     <mat-tab-group mat-stretch-tabs="false" animationDuration="200ms">
         <!-- User Tab -->
         <mat-tab label="User">
@@ -82,7 +82,7 @@
                                 <th mat-header-cell *matHeaderCellDef mat-sort-header class="width-md-300">Name</th>
                                 <td mat-cell *matCellDef="let element" data-label="Name">
                                     @if (!loading.dataLoading) {
-                                    <span class="font-semibold text-sm text-color">{{ element.name }}</span>
+                                    <span>{{ element.name }}</span>
                                     } @else {
                                     <ng-container [ngTemplateOutlet]="loadingRef"></ng-container>
                                     }
@@ -94,7 +94,7 @@
                                 <th mat-header-cell *matHeaderCellDef mat-sort-header class="width-md-300">Email</th>
                                 <td mat-cell *matCellDef="let element" data-label="Email">
                                     @if (!loading.dataLoading) {
-                                    <span class="text-sm [color:var(--color-common-text-2)]">{{ element.email }}</span>
+                                    <span class="text-sm">{{ element.email }}</span>
                                     } @else {
                                     <ng-container [ngTemplateOutlet]="loadingRef"></ng-container>
                                     }
@@ -106,9 +106,7 @@
                                 <th mat-header-cell *matHeaderCellDef mat-sort-header>Phone Number</th>
                                 <td mat-cell *matCellDef="let element" data-label="Phone Number">
                                     @if (!loading.dataLoading) {
-                                    <span class="text-sm [color:var(--color-common-text-2)]">{{
-                                        element.mobile ?? '-'
-                                    }}</span>
+                                    <span class="text-sm">{{ element.mobile ?? '-' }}</span>
                                     } @else {
                                     <ng-container [ngTemplateOutlet]="loadingRef"></ng-container>
                                     }
@@ -124,7 +122,7 @@
                                         <span
                                             [matTooltip]="element?.id"
                                             matTooltipPosition="above"
-                                            class="cursor-pointer font-mono text-xs bg-[var(--color-common-chip-bg)] px-2 py-0.5 rounded-4 [color:var(--color-common-text-2)] min-w-[120px]"
+                                            class="cursor-pointer font-mono text-xs px-2 py-0.5 rounded-4 min-w-[120px]"
                                         >
                                             {{
                                                 element?.id?.length > 15
@@ -148,11 +146,7 @@
                                 <th mat-header-cell *matHeaderCellDef mat-sort-header>Block Name</th>
                                 <td mat-cell *matCellDef="let element" data-label="Block Name">
                                     @if (!loading.dataLoading) { @if (element?.feature_configuration?.name) {
-                                    <span
-                                        class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-[var(--color-common-chip-bg)] [color:var(--color-common-text-2)]"
-                                    >
-                                        {{ element.feature_configuration.name }}
-                                    </span>
+                                    {{ element.feature_configuration.name }}
                                     } @else {
                                     <span class="text-sm secondary-text-color">-</span>
                                     } } @else {
diff --git a/apps/36-blocks/src/assets/scss/component/_utility-classes.scss b/apps/36-blocks/src/assets/scss/component/_utility-classes.scss
new file mode 100644
index 00000000..639a11e5
--- /dev/null
+++ b/apps/36-blocks/src/assets/scss/component/_utility-classes.scss
@@ -0,0 +1,19 @@
+// ─────────────────────────────────────────────────────────────────────────────
+// Utility Classes — Project-wide reusable semantic classes
+//
+// Use these classes to maintain visual consistency across the app.
+// Colors are driven by --mat-sys-* and --color-common-* CSS custom properties
+// so they automatically adapt to light / dark theme.
+// ─────────────────────────────────────────────────────────────────────────────
+
+// ─── Card ────────────────────────────────────────────────────────────────────
+.card-with-header {
+    @apply rounded-xl border overflow-hidden;
+    border-color: var(--color-common-border);
+
+    &--header {
+        @apply flex items-center gap-2 px-4 py-3 border-b;
+        background-color: var(--color-common-bg) !important;
+        border-color: inherit !important;
+    }
+}
diff --git a/apps/36-blocks/src/assets/scss/theme/_custom-palette.scss b/apps/36-blocks/src/assets/scss/theme/_custom-palette.scss
index 07bd90bc..115477e0 100644
--- a/apps/36-blocks/src/assets/scss/theme/_custom-palette.scss
+++ b/apps/36-blocks/src/assets/scss/theme/_custom-palette.scss
@@ -4,119 +4,119 @@
 @use 'sass:map';
 @use '@angular/material' as mat;
 
-// Note: Color palettes are generated from primary: #19E6CE
+// Note: Color palettes are generated from primary: #0F766E, secondary: #0F766E, tertiary: #0EA5E9, neutral: #FFFFFF, neutral variant: #E5E7EB, error: #DC2626
 $_palettes: (
     primary: (
         0: #000000,
-        10: #00201c,
-        20: #003730,
-        25: #00443c,
-        30: #005047,
-        35: #005d53,
-        40: #006b5f,
-        50: #008677,
-        60: #00a391,
-        70: #00c0ac,
-        80: #00dfc7,
-        90: #46fce3,
-        95: #b5fff0,
-        98: #e5fff8,
-        99: #f3fffb,
+        10: #00201d,
+        20: #003733,
+        25: #00433e,
+        30: #00504a,
+        35: #005d56,
+        40: #006a63,
+        50: #27847c,
+        60: #479e96,
+        70: #64bab0,
+        80: #80d5cb,
+        90: #9cf2e8,
+        95: #b2fff5,
+        98: #e4fffa,
+        99: #f2fffc,
         100: #ffffff,
     ),
     secondary: (
         0: #000000,
-        10: #00201c,
-        20: #003730,
-        25: #00443c,
-        30: #105047,
-        35: #205c52,
-        40: #2e685e,
-        50: #488177,
-        60: #629b90,
-        70: #7db6ab,
-        80: #97d2c6,
-        90: #b3eee2,
-        95: #c1fdf0,
-        98: #e5fff8,
-        99: #f3fffb,
+        10: #00201d,
+        20: #003733,
+        25: #00433e,
+        30: #00504a,
+        35: #005d56,
+        40: #006a63,
+        50: #27847c,
+        60: #479e96,
+        70: #64bab0,
+        80: #80d5cb,
+        90: #9cf2e8,
+        95: #b2fff5,
+        98: #e4fffa,
+        99: #f2fffc,
         100: #ffffff,
     ),
     tertiary: (
         0: #000000,
-        10: #071942,
-        20: #1f2f58,
-        25: #2b3a64,
-        30: #364570,
-        35: #42517c,
-        40: #4e5d89,
-        50: #6776a4,
-        60: #808fbf,
-        70: #9baadb,
-        80: #b6c5f8,
-        90: #dbe1ff,
-        95: #eef0ff,
-        98: #faf8ff,
-        99: #fefbff,
+        10: #001e2f,
+        20: #00344d,
+        25: #00405d,
+        30: #004c6e,
+        35: #00587f,
+        40: #006591,
+        50: #007fb5,
+        60: #009ada,
+        70: #34b5fa,
+        80: #89ceff,
+        90: #c9e6ff,
+        95: #e5f2ff,
+        98: #f6faff,
+        99: #fcfcff,
         100: #ffffff,
     ),
     neutral: (
         0: #000000,
-        10: #151d1b,
-        20: #2a3230,
-        25: #353d3b,
-        30: #404846,
-        35: #4c5452,
-        40: #58605e,
-        50: #707976,
-        60: #8a9390,
-        70: #a5adaa,
-        80: #c0c8c5,
-        90: #dce4e1,
-        95: #eaf3ef,
-        98: #f3fbf8,
-        99: #f6fefb,
+        10: #1a1c1c,
+        20: #2f3131,
+        25: #3a3c3c,
+        30: #454747,
+        35: #515353,
+        40: #5d5f5f,
+        50: #767777,
+        60: #909191,
+        70: #aaabab,
+        80: #c6c6c7,
+        90: #e2e2e2,
+        95: #f0f1f1,
+        98: #f9f9f9,
+        99: #fcfcfc,
         100: #ffffff,
-        4: #08100e,
-        6: #0d1513,
-        12: #19211f,
-        17: #242c2a,
-        22: #2e3634,
-        24: #333b39,
-        87: #d3dcd9,
-        92: #e2eae7,
-        94: #e7f0ec,
-        96: #edf5f2,
+        4: #0c0f0f,
+        6: #121414,
+        12: #1e2020,
+        17: #282a2b,
+        22: #333535,
+        24: #37393a,
+        87: #dadada,
+        92: #e8e8e8,
+        94: #eeeeee,
+        96: #f3f3f4,
     ),
     neutral-variant: (
         0: #000000,
-        10: #101e1b,
-        20: #253330,
-        25: #303e3b,
-        30: #3b4a46,
-        35: #465552,
-        40: #52625e,
-        50: #6b7a76,
-        60: #849490,
-        70: #9eafaa,
-        80: #bacac5,
-        90: #d5e6e1,
-        95: #e4f4ef,
-        98: #ecfdf8,
-        99: #f3fffb,
+        10: #191c1f,
+        20: #2d3134,
+        25: #383c3f,
+        30: #44474a,
+        35: #505356,
+        40: #5c5f62,
+        50: #74777b,
+        60: #8e9195,
+        70: #a9abaf,
+        80: #c4c7ca,
+        90: #e0e2e6,
+        95: #eff1f5,
+        98: #f7f9fd,
+        99: #fcfcff,
         100: #ffffff,
     ),
     error: (
         0: #000000,
         10: #410002,
         20: #690005,
-        25: #7e0007,
-        30: #93000a,
-        35: #a80710,
-        40: #ba1a1a,
-        50: #de3730,
-        60: #ff5449,
-        70: #ff897d,
+        25: #7d0008,
+        30: #93000b,
+        35: #a9000f,
+        40: #bf0715,
+        50: #e42c2a,
+        60: #ff544a,
+        70: #ff897e,
         80: #ffb4ab,
         90: #ffdad6,
         95: #ffedea,
diff --git a/apps/36-blocks/src/styles.scss b/apps/36-blocks/src/styles.scss
index 0a282700..3158fe49 100644
--- a/apps/36-blocks/src/styles.scss
+++ b/apps/36-blocks/src/styles.scss
@@ -11,6 +11,7 @@
 @use 'assets/scss/component/loader';
 @use 'assets/scss/component/icon';
 @use 'assets/scss/component/animation';
+@use 'assets/scss/component/utility-classes';
 @use '../../shared/scss/global';
 body {
     background: var(--mat-sys-surface);
@@ -22,7 +23,7 @@ body {
 .bg-color {
     background-color: var(--color-common-bg) !important;
 }
-.broder-color {
+.border-color {
     border-color: var(--color-common-border) !important;
 }
 .secondary-text-color {
@@ -30,7 +31,7 @@ body {
 }
 /*Main*/
 .app-content {
-    padding: 16px;
+    padding: 24px;
     min-height: 100%;
     height: 100vh;
     overflow-y: auto;
@@ -52,3 +53,8 @@ body {
         width: 100%;
     }
 }
+
+pre[class*='language-'] {
+    margin: 0 !important;
+    border-radius: 0 !important;
+}