diff --git a/services/frontend/src/components/Modal/service/Create.tsx b/services/frontend/src/components/Modal/service/Create.tsx
index bbddbce..71d84c6 100644
--- a/services/frontend/src/components/Modal/service/Create.tsx
+++ b/services/frontend/src/components/Modal/service/Create.tsx
@@ -14,6 +14,7 @@ import Build from "./Build";
 import { styled } from "@mui/joy";
 import Environment from "./Environment";
 import Deploy from "./Deploy";
+import { classNames } from "../../../utils/styles";
 
 interface IModalServiceProps {
   onHide: CallbackFunction;
@@ -60,10 +61,6 @@ const ModalServiceCreate = (props: IModalServiceProps) => {
 
   const initialValues = useMemo(() => getInitialValues(), []);
 
-  const classNames = (...classes: string[]) => {
-    return classes.filter(Boolean).join(" ");
-  };
-
   return (
     <div className="fixed z-50 inset-0 overflow-y-auto">
       <div className="justify-center items-center flex overflow-x-hidden overflow-y-auto fixed inset-0 outline-none focus:outline-none">
diff --git a/services/frontend/src/components/Modal/service/Edit.tsx b/services/frontend/src/components/Modal/service/Edit.tsx
index 6144e4a..b42c10a 100644
--- a/services/frontend/src/components/Modal/service/Edit.tsx
+++ b/services/frontend/src/components/Modal/service/Edit.tsx
@@ -14,6 +14,7 @@ import {
 import Environment from "./Environment";
 import Build from "./Build";
 import Deploy from "./Deploy";
+import { classNames } from "../../../utils/styles";
 
 export interface IModalServiceProps {
   node: IServiceNodeItem;
@@ -35,10 +36,6 @@ const ModalServiceEdit = (props: IModalServiceProps) => {
     [selectedNode]
   );
 
-  const classNames = (...classes: string[]) => {
-    return classes.filter(Boolean).join(" ");
-  };
-
   useEffect(() => {
     if (node) {
       setSelectedNode(node);
diff --git a/services/frontend/src/components/Modal/volume/CreateVolumeModal.tsx b/services/frontend/src/components/Modal/volume/CreateVolumeModal.tsx
index 54d550b..abdd642 100644
--- a/services/frontend/src/components/Modal/volume/CreateVolumeModal.tsx
+++ b/services/frontend/src/components/Modal/volume/CreateVolumeModal.tsx
@@ -10,14 +10,13 @@ import {
 } from "./form-utils";
 import General from "./General";
 import { CallbackFunction } from "../../../types";
+import { classNames } from "../../../utils/styles";
 
 interface ICreateVolumeModalProps {
   onHide: CallbackFunction;
   onAddEndpoint: CallbackFunction;
 }
 
-const classNames = (...classes: string[]) => classes.filter(Boolean).join(" ");
-
 const CreateVolumeModal = (props: ICreateVolumeModalProps) => {
   const { onHide, onAddEndpoint } = props;
   const [openTab, setOpenTab] = useState("General");
diff --git a/services/frontend/src/components/Modal/volume/EditVolumeModal.tsx b/services/frontend/src/components/Modal/volume/EditVolumeModal.tsx
index f681452..cc20a9f 100644
--- a/services/frontend/src/components/Modal/volume/EditVolumeModal.tsx
+++ b/services/frontend/src/components/Modal/volume/EditVolumeModal.tsx
@@ -9,6 +9,7 @@ import {
   tabs,
   validationSchema
 } from "./form-utils";
+import { classNames } from "../../../utils/styles";
 
 interface IEditVolumeModal {
   node: IVolumeNodeItem;
@@ -16,10 +17,6 @@ interface IEditVolumeModal {
   onUpdateEndpoint: CallbackFunction;
 }
 
-const classNames = (...classes: string[]) => {
-  return classes.filter(Boolean).join(" ");
-};
-
 const EditVolumeModal = (props: IEditVolumeModal) => {
   const { node, onHide, onUpdateEndpoint } = props;
   const [openTab, setOpenTab] = useState("General");
diff --git a/services/frontend/src/components/global/SideBar.tsx b/services/frontend/src/components/global/SideBar.tsx
index 16c08a9..d552509 100644
--- a/services/frontend/src/components/global/SideBar.tsx
+++ b/services/frontend/src/components/global/SideBar.tsx
@@ -3,6 +3,7 @@ import { BookOpenIcon } from "@heroicons/react/outline";
 import { Link } from "react-router-dom";
 import UserMenu from "./UserMenu";
 import Logo from "./logo";
+import { classNames } from "../../utils/styles";
 
 interface ISideBarProps {
   state: any;
@@ -21,9 +22,7 @@ export default function SideBar(props: ISideBarProps) {
       current: pathname.match(projRegex) ? true : false
     }
   ];
-  const classNames = (...classes: any[]) => {
-    return classes.filter(Boolean).join(" ");
-  };
+
   const userName = state.user ? state.user.username : "";
 
   return (