diff --git a/src/components/preview_panel/ActionHeader.tsx b/src/components/preview_panel/ActionHeader.tsx
index 998eaa9..7694e6f 100644
--- a/src/components/preview_panel/ActionHeader.tsx
+++ b/src/components/preview_panel/ActionHeader.tsx
@@ -41,9 +41,6 @@ export type PreviewMode =
   | "configure"
   | "publish";
 
-const BUTTON_CLASS_NAME =
-  "no-app-region-drag cursor-pointer relative flex items-center gap-1 px-2 py-1 rounded-md text-[13px] font-medium z-10 hover:bg-[var(--background)]";
-
 // Preview Header component with preview mode toggle
 export const ActionHeader = () => {
   const [previewMode, setPreviewMode] = useAtom(previewModeAtom);
@@ -177,12 +174,14 @@ export const ActionHeader = () => {
       <button
         data-testid={testId}
         ref={ref}
-        className={BUTTON_CLASS_NAME}
+        className="no-app-region-drag cursor-pointer relative flex items-center gap-0.5 px-2 py-0.5 rounded-md text-xs font-medium z-10 hover:bg-[var(--background)] flex-col"
         onClick={() => selectPanel(mode)}
       >
         {icon}
-        {!isCompact && <span>{text}</span>}
-        {badge}
+        <span>
+          {!isCompact && <span>{text}</span>}
+          {badge}
+        </span>
       </button>
     );
 
@@ -199,6 +198,7 @@ export const ActionHeader = () => {
 
     return buttonContent;
   };
+  const iconSize = 15;
 
   return (
     <TooltipProvider>
@@ -220,14 +220,14 @@ export const ActionHeader = () => {
           {renderButton(
             "preview",
             previewRef,
-            <Eye size={14} />,
+            <Eye size={iconSize} />,
             "Preview",
             "preview-mode-button",
           )}
           {renderButton(
             "problems",
             problemsRef,
-            <AlertTriangle size={14} />,
+            <AlertTriangle size={iconSize} />,
             "Problems",
             "problems-mode-button",
             displayCount && (
@@ -239,21 +239,21 @@ export const ActionHeader = () => {
           {renderButton(
             "code",
             codeRef,
-            <Code size={14} />,
+            <Code size={iconSize} />,
             "Code",
             "code-mode-button",
           )}
           {renderButton(
             "configure",
             configureRef,
-            <Wrench size={14} />,
+            <Wrench size={iconSize} />,
             "Configure",
             "configure-mode-button",
           )}
           {renderButton(
             "publish",
             publishRef,
-            <Globe size={14} />,
+            <Globe size={iconSize} />,
             "Publish",
             "publish-mode-button",
           )}