diff --git a/src/core/components/AskAi.tsx b/src/core/components/AskAi.tsx
index 4ed56d9..7baaf25 100644
--- a/src/core/components/AskAi.tsx
+++ b/src/core/components/AskAi.tsx
@@ -51,7 +51,7 @@ export const AIUserPrompt = ({ blockId }: { blockId: string | undefined }) => {
     <div className="">
       <div
         onClick={() => setOpen(!open)}
-        className="flex cursor-pointer items-center justify-between border-b border-border py-2 text-sm font-bold text-muted-foreground hover:underline">
+        className="flex cursor-pointer items-center justify-between border-t border-border py-2 text-sm font-medium hover:underline">
         <span>{t("Ask AI")}</span>
         <span>
           <ChevronDown className={"h-4 w-4 text-gray-500 " + (open ? "rotate-180" : "")} />
@@ -194,9 +194,9 @@ export const AISetContext = () => {
       collapsible>
       <AccordionItem value="set-context" className="border-none">
         {/*  @ts-ignore */}
-        <AccordionTrigger ref={btnRef} className="border-b border-border py-2">
+        <AccordionTrigger ref={btnRef} className="border-0 border-border py-2">
           <div className="flex w-full items-center justify-between">
-            <span className="font-bold text-muted-foreground">{t("AI Context")}</span>
+            <span className="font-medium">{t("AI Context")}</span>
           </div>
         </AccordionTrigger>
         <AccordionContent>
@@ -287,7 +287,7 @@ export const AISetContext = () => {
 export const AskAI = () => {
   const [ids] = useSelectedBlockIds();
   return (
-    <div className="mt-2">
+    <div className="no-scrollbar mt-2 flex-1 overflow-y-auto">
       <AISetContext />
       <AIUserPrompt blockId={first(ids)} />
     </div>
diff --git a/src/core/components/layout/RootLayout.tsx b/src/core/components/layout/RootLayout.tsx
index 76951c5..6884f36 100644
--- a/src/core/components/layout/RootLayout.tsx
+++ b/src/core/components/layout/RootLayout.tsx
@@ -140,9 +140,9 @@ const RootLayout: ComponentType = () => {
               initial={{ width: 280 }}
               animate={{ width: 280 }}
               transition={{ duration: 0.3, ease: "easeInOut" }}>
-              <div className="no-scrollbar overflow h-full max-h-full overflow-x-hidden">
-                <div className="flex max-h-full flex-col p-3">
-                  <h2 className="-mt-1 flex h-10 items-center space-x-1 text-base font-bold">
+              <div className="no-scrollbar overflow h-full max-h-full overflow-hidden">
+                <div className="flex h-full max-h-full flex-col overflow-hidden p-3">
+                  <h2 className="-mt-1 flex items-center space-x-1 text-base font-bold">
                     <div className="flex grow items-center gap-2">
                       <div className="flex w-full items-center justify-between gap-2">
                         {panel === "ai" ? (
@@ -151,34 +151,25 @@ const RootLayout: ComponentType = () => {
                               <LightningBoltIcon className="rtl:ml-2" /> {t("AI Assistant")}
                             </div>
                           </>
-                        ) : (
+                        ) : panel === "theme" ? (
                           <div className="flex w-full items-center justify-between gap-2">
-                            {panel === "theme" ? (
-                              <>
-                                <span className="flex items-center gap-2">
-                                  <Paintbrush className="h-4 w-4 rtl:ml-2" />
-                                  {t("Theme Settings")}
-                                </span>
-                                <Button
-                                  onClick={() => setRightPanel("block")}
-                                  variant="ghost"
-                                  size="icon"
-                                  className="text-xs text-gray-400">
-                                  <X className="h-4 w-4 rtl:ml-2" />
-                                </Button>
-                              </>
-                            ) : (
-                              <div className="flex items-center gap-2">
-                                <EditIcon size={16} className="rtl:ml-2" />
-                                {t("Block Settings")}
-                              </div>
-                            )}
+                            <span className="flex items-center gap-2">
+                              <Paintbrush className="h-4 w-4 rtl:ml-2" />
+                              {t("Theme Settings")}
+                            </span>
+                            <Button
+                              onClick={() => setRightPanel("block")}
+                              variant="ghost"
+                              size="icon"
+                              className="text-xs text-gray-400">
+                              <X className="h-4 w-4 rtl:ml-2" />
+                            </Button>
                           </div>
-                        )}
+                        ) : null}
                       </div>
                     </div>
                   </h2>
-                  <div className="flex-1">
+                  <div className="flex max-h-full w-full">
                     <Suspense fallback={<div>Loading...</div>}>
                       {panel === "ai" ? <AskAI /> : panel === "theme" ? <ThemeConfigPanel /> : <SettingsPanel />}
                     </Suspense>
diff --git a/src/core/components/settings/AskAiStyle.tsx b/src/core/components/settings/AskAiStyle.tsx
index 44142b1..bb85cd0 100644
--- a/src/core/components/settings/AskAiStyle.tsx
+++ b/src/core/components/settings/AskAiStyle.tsx
@@ -33,8 +33,8 @@ export const AskAIStyles = ({ blockId }: { blockId: string | undefined }) => {
         value={prompt}
         onChange={(e) => setPrompt(e.target.value)}
         placeholder={t("Ask AI to edit styles")}
-        className="w-full border border-border focus:border-0"
-        rows={3}
+        className="no-scrollbar my-2 w-full border border-border p-2 text-xs"
+        rows={4}
         onKeyDown={(e) => {
           if (e.key === "Enter") {
             e.preventDefault();
diff --git a/src/core/components/settings/SettingsPanel.tsx b/src/core/components/settings/SettingsPanel.tsx
index 4f84e2b..137186b 100644
--- a/src/core/components/settings/SettingsPanel.tsx
+++ b/src/core/components/settings/SettingsPanel.tsx
@@ -9,6 +9,7 @@ import { ErrorBoundary } from "react-error-boundary";
 import { BlockAttributesEditor } from "./new-panel/BlockAttributesEditor.tsx";
 import { ChevronDown } from "lucide-react";
 import { FallbackError } from "../FallbackError.tsx";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../../ui/index.ts";
 
 function BlockAttributesToggle() {
   const { t } = useTranslation();
@@ -21,7 +22,7 @@ function BlockAttributesToggle() {
     <>
       <div
         onClick={() => setShowAttributes(!showAttributes)}
-        className="flex cursor-pointer items-center justify-between border-b border-border py-2 text-sm font-bold text-muted-foreground hover:underline">
+        className="flex cursor-pointer items-center justify-between border-b border-border py-2 text-sm font-medium hover:underline">
         <span>{t("Attributes")}</span>
         <span>
           <ChevronDown className={"h-4 w-4 text-gray-500 " + (showAttributes ? "rotate-180" : "")} />
@@ -49,16 +50,27 @@ const SettingsPanel: React.FC = () => {
 
   return (
     <ErrorBoundary fallback={<FallbackError />} onError={onErrorFn}>
-      <div className={"relative flex max-h-full w-full flex-col"}>
-        <BlockSettings />
-        <br />
-        <BlockStyling />
-
-        <BlockAttributesToggle />
-        <br />
-        <br />
-        <br />
-      </div>
+      <Tabs defaultValue="settings" className="flex flex-1 flex-col">
+        <TabsList className="grid h-auto w-full grid-cols-2 p-1 py-1">
+          <TabsTrigger value="settings" className="text-xs">
+            Settings
+          </TabsTrigger>
+          <TabsTrigger value="styles" className="text-xs">
+            Styles
+          </TabsTrigger>
+        </TabsList>
+        <TabsContent value="settings" className="no-scrollbar h-full max-h-min overflow-y-auto">
+          <BlockSettings />
+          <br />
+          <br />
+        </TabsContent>
+        <TabsContent value="styles" className="no-scrollbar h-full max-h-min overflow-y-auto">
+          <BlockStyling />
+          <BlockAttributesToggle />
+          <br />
+          <br />
+        </TabsContent>
+      </Tabs>
     </ErrorBoundary>
   );
 };
diff --git a/src/core/components/settings/new-panel/SettingSection.tsx b/src/core/components/settings/new-panel/SettingSection.tsx
index 7e0534f..f685a1b 100644
--- a/src/core/components/settings/new-panel/SettingSection.tsx
+++ b/src/core/components/settings/new-panel/SettingSection.tsx
@@ -92,7 +92,7 @@ export const StylingGroup = ({ section }: any) => {
       <AccordionItem value={section.heading} className="border-none">
         <AccordionTrigger className="border-b border-border py-2 text-xs">
           <div className="flex items-center">
-            <div className="flex items-center gap-x-2 text-sm font-bold">{startCase(t(section.heading))}</div>
+            <div className="flex items-center gap-x-2 text-sm font-medium">{startCase(t(section.heading))}</div>
           </div>
         </AccordionTrigger>
         <AccordionContent className="py-2">
diff --git a/src/core/components/sidepanels/panels/theme-configuration/BorderRadiusInput.tsx b/src/core/components/sidepanels/panels/theme-configuration/BorderRadiusInput.tsx
index 58fc8c1..6bdde43 100644
--- a/src/core/components/sidepanels/panels/theme-configuration/BorderRadiusInput.tsx
+++ b/src/core/components/sidepanels/panels/theme-configuration/BorderRadiusInput.tsx
@@ -18,7 +18,7 @@ const BorderRadiusInput = ({ value, onChange, disabled }: BorderRadiusInputProps
       disabled={disabled}
       defaultValue={value.replace("px", "")}
       onChange={(e) => throttledChange(e.target.value)}
-      className="flex-1"
+      className="flex-1 cursor-pointer"
     />
   );
 };
diff --git a/src/core/components/sidepanels/panels/theme-configuration/FontSelector.tsx b/src/core/components/sidepanels/panels/theme-configuration/FontSelector.tsx
index fa8a04d..d8d3b65 100644
--- a/src/core/components/sidepanels/panels/theme-configuration/FontSelector.tsx
+++ b/src/core/components/sidepanels/panels/theme-configuration/FontSelector.tsx
@@ -64,12 +64,11 @@ const FontSelector = ({
   value: string;
   onChange: (value: string) => void;
 }) => {
-
   return (
-    <div className="">
-      <Label className="text-sm font-bold">{startCase(label)}</Label>
+    <div className="space-y-0.5">
+      <Label className="text-sm text-slate-800">{startCase(label)}</Label>
       <select
-        className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
+        className="mt-1 w-full cursor-pointer rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
         value={value}
         onChange={(e) => onChange(e.target.value)}>
         {FONTS.map((font) => (
diff --git a/src/core/components/sidepanels/panels/theme-configuration/ThemeConfigPanel.tsx b/src/core/components/sidepanels/panels/theme-configuration/ThemeConfigPanel.tsx
index d038a7d..6b23b4b 100644
--- a/src/core/components/sidepanels/panels/theme-configuration/ThemeConfigPanel.tsx
+++ b/src/core/components/sidepanels/panels/theme-configuration/ThemeConfigPanel.tsx
@@ -2,7 +2,7 @@ import * as React from "react";
 
 import { useBuilderProp } from "../../../../hooks/index.ts";
 import { useTranslation } from "react-i18next";
-import { Label, ScrollArea, Button } from "../../../../../ui";
+import { Label, Button } from "../../../../../ui";
 import { cn } from "../../../../functions/Functions.ts";
 import { BorderRadiusInput, FontSelector, ColorPickerInput } from "./index.ts";
 import { useTheme, useThemeOptions } from "../../../../hooks/useTheme.ts";
@@ -103,13 +103,12 @@ const ThemeConfigPanel: React.FC<ThemeConfigProps> = React.memo(({ className = "
       {Object.entries(group.items).map(([key]: [string, [string, string]]) => {
         const themeColor = get(themeValues, `colors.${key}.${isDarkMode ? 1 : 0}`);
         return (
-          <div key={key} className="mt-1 flex items-center">
+          <div key={key} className="mt-1 flex items-center gap-x-2">
             <ColorPickerInput
               value={themeColor as string}
               onChange={(newValue: string) => handleColorChange(key, newValue)}
             />
-            &nbsp;&nbsp;
-            <Label className="text-xs text-muted-foreground">
+            <Label className="text-xs font-normal leading-tight text-slate-600">
               {key
                 .split(/(?=[A-Z])/)
                 .join(" ")
@@ -132,17 +131,15 @@ const ThemeConfigPanel: React.FC<ThemeConfigProps> = React.memo(({ className = "
   );
 
   return (
-    <ScrollArea className={cn("h-full w-full", className)}>
+    <div className={cn("no-scrollbar h-full w-full overflow-y-auto", className)}>
       {themePresets.length > 0 && (
-        <div className="flex gap-2 pb-2">
-          <div className="w-[70%]">
-            <div className="flex w-full items-center justify-between">
-              <Label className="text-sm font-bold">{t("Presets")}</Label>
-            </div>
+        <div className="flex gap-2 py-2">
+          <div className="w-full">
+            <Label className="text-sm text-slate-800">{t("Presets")}</Label>
             <select
               value={selectedPreset}
               onChange={(e) => handlePresetChange(e.target.value)}
-              className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2">
+              className="w-full space-y-0.5 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2">
               <option value="">Select preset</option>
               {Array.isArray(themePresets) &&
                 themePresets.map((preset: any) => (
@@ -176,13 +173,10 @@ const ThemeConfigPanel: React.FC<ThemeConfigProps> = React.memo(({ className = "
 
         {/* Border Radius Section */}
         {chaiThemeOptions?.borderRadius && (
-          <div className="py-3">
-            <h4 className="text-sm font-bold">{t("Border Radius")}</h4>
-            <div className="flex items-center gap-4">
-              <BorderRadiusInput
-                value={themeValues.borderRadius}
-                onChange={handleBorderRadiusChange}
-              />
+          <div className="space-y-0.5 py-3">
+            <Label className="text-sm text-slate-800">{t("Border Radius")}</Label>
+            <div className="flex items-center gap-4 py-2">
+              <BorderRadiusInput value={themeValues.borderRadius} onChange={handleBorderRadiusChange} />
               <span className="w-12 text-sm">{themeValues.borderRadius}</span>
             </div>
           </div>
@@ -190,14 +184,9 @@ const ThemeConfigPanel: React.FC<ThemeConfigProps> = React.memo(({ className = "
 
         {/* Colors Section with Mode Switch */}
         {chaiThemeOptions?.colors && (
-          <div className="mt-4">
-            <div className="flex items-center justify-between">
-              <div className="flex items-center gap-2">
-                <h4 className="text-sm font-bold">{t("Colors")}</h4>
-              </div>
-            </div>
-
-            <div className="w-full space-y-4" key={isDarkMode ? "dark" : "light"}>
+          <div className="mt-4 space-y-0.5">
+            <Label className="text-sm text-slate-800">{t("Colors")}</Label>
+            <div className="w-full space-y-4 pt-2" key={isDarkMode ? "dark" : "light"}>
               {chaiThemeOptions.colors.map((group) => renderColorGroup(group))}
             </div>
           </div>
@@ -207,7 +196,7 @@ const ThemeConfigPanel: React.FC<ThemeConfigProps> = React.memo(({ className = "
       <br />
       <br />
       <br />
-    </ScrollArea>
+    </div>
   );
 });