diff --git a/src/frontend/src/constants.tsx b/src/frontend/src/constants.tsx
index 99a1beb7f..4dfcbc898 100644
--- a/src/frontend/src/constants.tsx
+++ b/src/frontend/src/constants.tsx
@@ -179,14 +179,6 @@ export const COLUMN_DIV_STYLE =
  */
 export const NAV_DISPLAY_STYLE =
   " w-full flex justify-between py-12 pb-2 px-6 ";
-
-/**
- * The base text for subtitle of code dialog
- * @constant
- */
-export const BUTTON_DIV_STYLE = " flex gap-2 ";
-(" focus:ring-1 focus:ring-offset-1 focus:ring-ring focus:outline-none ");
-
 /**
  * Header text for user projects
  * @constant
diff --git a/src/frontend/src/index.css b/src/frontend/src/index.css
index 15a0b4b2e..09d19db88 100644
--- a/src/frontend/src/index.css
+++ b/src/frontend/src/index.css
@@ -143,6 +143,18 @@ The cursor: default; property value restores the browser's default cursor style
 
 
 @layer components {
+  .extra-side-bar-save-disable {
+    @apply text-muted-foreground
+  }
+  .extra-side-bar-buttons {
+    @apply relative inline-flex w-full items-center justify-center rounded-md bg-background   px-2 py-2 text-foreground shadow-sm ring-1 ring-inset ring-input transition-all duration-500 ease-in-out
+  }
+  .extra-side-bar-buttons:hover {
+    @apply hover:bg-muted
+  }
+  .button-div-style {
+    @apply gap-2 flex
+  }
   .input-primary:focus{
     @apply focus:placeholder-transparent focus:ring-ring focus:border-ring
   }
@@ -161,4 +173,5 @@ The cursor: default; property value restores the browser's default cursor style
   .input-dialog{
     @apply text-ring cursor-pointer bg-transparent
   }
+
 }
\ No newline at end of file
diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
index e03cb521b..a3f7da7bc 100644
--- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
@@ -63,7 +63,7 @@ export default function ExtraSidebar() {
       <div className="mb-2 mt-2 flex w-full items-center justify-between gap-2 px-2">
         <ShadTooltip content="Import" side="top">
           <button
-            className="relative inline-flex w-full items-center justify-center rounded-md bg-background   px-2 py-2 text-foreground shadow-sm ring-1 ring-inset ring-input transition-all duration-500 ease-in-out hover:bg-muted"
+            className="extra-side-bar-buttons"
             onClick={() => {
               // openPopUp(<ImportModal />);
               uploadFlow();
@@ -76,7 +76,7 @@ export default function ExtraSidebar() {
         <ShadTooltip content="Export" side="top">
           <button
             className={classNames(
-              "relative inline-flex w-full items-center justify-center rounded-md bg-background   px-2 py-2 text-foreground shadow-sm ring-1 ring-inset  ring-input transition-all duration-500 ease-in-out hover:bg-muted"
+              "extra-side-bar-buttons"
             )}
             onClick={(event) => {
               openPopUp(<ExportModal />);
@@ -88,7 +88,7 @@ export default function ExtraSidebar() {
         <ShadTooltip content="Code" side="top">
           <button
             className={classNames(
-              "relative inline-flex w-full items-center justify-center rounded-md bg-background   px-2 py-2 text-foreground shadow-sm ring-1 ring-inset  ring-input transition-all duration-500 ease-in-out hover:bg-muted"
+              "extra-side-bar-buttons"
             )}
             onClick={(event) => {
               openPopUp(<ApiModal flow={flows.find((f) => f.id === tabId)} />);
@@ -100,7 +100,7 @@ export default function ExtraSidebar() {
 
         <ShadTooltip content="Save" side="top">
           <button
-            className="relative inline-flex w-full items-center justify-center rounded-md bg-background   px-2 py-2 text-foreground shadow-sm ring-1 ring-inset  ring-input transition-all duration-500 ease-in-out hover:bg-muted"
+            className="extra-side-bar-buttons"
             onClick={(event) => {
               saveFlow(flows.find((f) => f.id === tabId));
               setSuccessData({ title: "Changes saved successfully" });
@@ -110,7 +110,7 @@ export default function ExtraSidebar() {
             <Save
               strokeWidth={1.5}
               className={
-                "h-5 w-5" + (isPending ? " " : " text-muted-foreground")
+                "h-5 w-5" + (isPending ? " " : " extra-side-bar-save-disable")
               }
             ></Save>
           </button>
diff --git a/src/frontend/src/pages/MainPage/index.tsx b/src/frontend/src/pages/MainPage/index.tsx
index 657ae8bd8..0b45a94ae 100644
--- a/src/frontend/src/pages/MainPage/index.tsx
+++ b/src/frontend/src/pages/MainPage/index.tsx
@@ -5,7 +5,6 @@ import { Button } from "../../components/ui/button";
 import { Link, useNavigate } from "react-router-dom";
 import { CardComponent } from "../../components/cardComponent";
 import { USER_PROJECTS_HEADER } from "../../constants";
-import { BUTTON_DIV_STYLE } from "../../constants";
 export default function HomePage() {
   const { flows, setTabId, downloadFlows, uploadFlows, addFlow, removeFlow } =
     useContext(TabsContext);
@@ -20,7 +19,7 @@ export default function HomePage() {
           <Home className="w-6" />
           {USER_PROJECTS_HEADER}
         </span>
-        <div className={`${BUTTON_DIV_STYLE}`}>
+        <div className="button-div-style">
           <Button
             variant="primary"
             onClick={() => {