diff --git a/src/layout/appconfigurator.ts b/src/layout/appconfigurator.ts
index 2d9f1f5..5bf46ab 100644
--- a/src/layout/appconfigurator.ts
+++ b/src/layout/appconfigurator.ts
@@ -22,9 +22,7 @@ const presets = {
     standalone: true,
     imports: [CommonModule, FormsModule, InputSwitchModule, ButtonModule, RadioButtonModule, SelectButtonModule, ToggleSwitchModule],
     template: `
-        <div
-            class="config-panel hidden absolute top-[3.25rem] right-0 w-64 p-4 bg-surface-0 dark:bg-surface-900 border border-surface rounded-border origin-top shadow-[0px_3px_5px_rgba(0,0,0,0.02),0px_0px_2px_rgba(0,0,0,0.05),0px_1px_4px_rgba(0,0,0,0.08)]"
-        >
+        <div class="absolute top-[3.25rem] right-0 w-64 p-4 bg-surface-0 dark:bg-surface-900 border border-surface rounded-border origin-top shadow-[0px_3px_5px_rgba(0,0,0,0.02),0px_0px_2px_rgba(0,0,0,0.05),0px_1px_4px_rgba(0,0,0,0.08)]">
             <div class="flex flex-col gap-4">
                 <div>
                     <span class="text-sm text-muted-color font-semibold">Primary</span>
@@ -34,11 +32,13 @@ const presets = {
                                 type="button"
                                 [title]="primaryColor.name"
                                 (click)="updateColors($event, 'primary', primaryColor)"
-                                [ngClass]="{ 'active-color': primaryColor.name === selectedPrimaryColor() }"
+                                [ngClass]="{ 'outline-primary': primaryColor.name === selectedPrimaryColor() }"
+                                class="border-none w-5 h-5 rounded-full p-0 cursor-pointer outline-none outline-offset-1"
                                 [style]="{
-                                'background-color': primaryColor.name === 'noir' ? 'var(--text-color)' : primaryColor?.palette['500']
-                            }"
-                            ></button>
+                                    'background-color': primaryColor.name === 'noir' ? 'var(--text-color)' : primaryColor?.palette['500']
+                                }"
+                            >
+                        </button>
                         }
                     </div>
                 </div>
@@ -50,10 +50,11 @@ const presets = {
                                 type="button"
                                 [title]="surface.name"
                                 (click)="updateColors($event, 'surface', surface)"
-                                [ngClass]="{ 'active-color': selectedSurfaceColor() ? selectedSurfaceColor() === surface.name : layoutService.layoutConfig().darkTheme ? surface.name === 'zinc' : surface.name === 'slate' }"
+                                [ngClass]="{ 'outline-primary': selectedSurfaceColor() ? selectedSurfaceColor() === surface.name : layoutService.layoutConfig().darkTheme ? surface.name === 'zinc' : surface.name === 'slate' }"
+                                class="border-none w-5 h-5 rounded-full p-0 cursor-pointer outline-none outline-offset-1"
                                 [style]="{
-                                'background-color': surface.name === 'noir' ? 'var(--text-color)' : surface?.palette['500']
-                            }"
+                                    'background-color': surface.name === 'noir' ? 'var(--text-color)' : surface?.palette['500']
+                                }"
                             ></button>
                         }
                     </div>
@@ -61,18 +62,17 @@ const presets = {
                 <div class="flex flex-col gap-2">
                     <span class="text-sm text-muted-color font-semibold">Presets</span>
                     <p-selectbutton [options]="presets" [ngModel]="selectedPreset()" (ngModelChange)="onPresetChange($event)" [allowEmpty]="false" />
-
                 </div>
                 <div class="flex flex-col gap-2">
                     <span class="text-sm text-muted-color font-semibold">Menu Mode</span>
-                    <p-selectbutton [ngModel]="menuMode()" (ngModelChange)="onMenuModeChange($event)" [options]="presets" [allowEmpty]="false"  />
+                    <p-selectbutton [ngModel]="menuMode()" (ngModelChange)="onMenuModeChange($event)" [options]="presets" [allowEmpty]="false" />
                 </div>
             </div>
         </div>
     `,
     host: {
         class: 'config-panel hidden'
-    },
+    }
 })
 export class AppConfigurator {
     config: PrimeNG = inject(PrimeNG);
@@ -86,7 +86,6 @@ export class AppConfigurator {
     ngOnInit() {
         if (isPlatformBrowser(this.platformId)) {
             this.onPresetChange(this.layoutService.layoutConfig().preset);
-
         }
     }