diff --git a/src/Client/src/components/AboutTabs.tsx b/src/Client/src/components/AboutTabs.tsx
index 56e0d73..0ae4fbd 100644
--- a/src/Client/src/components/AboutTabs.tsx
+++ b/src/Client/src/components/AboutTabs.tsx
@@ -1,10 +1,7 @@
 import { Tab } from "@headlessui/react";
 import { Fragment } from "react";
 import Subtitle from "./Subtitle";
-
-function classNames(...classes: string[]) {
-  return classes.filter(Boolean).join(" ");
-}
+import buildClassNames from "../helpers/cssClassFormatter";
 
 export default function AboutTabs() {
   return (
@@ -14,7 +11,7 @@ export default function AboutTabs() {
           <Tab.List className="-mb-px flex space-x-8">
             <Tab
               className={({ selected }) =>
-                classNames(
+                buildClassNames(
                   selected
                     ? "border-gray-300 text-gray-200"
                     : "border-transparent hover:border-gray-300 hover:text-gray-200",
@@ -26,7 +23,7 @@ export default function AboutTabs() {
             </Tab>
             <Tab
               className={({ selected }) =>
-                classNames(
+                buildClassNames(
                   selected
                     ? "border-gray-300 text-gray-200"
                     : "border-transparent hover:border-gray-300 hover:text-gray-200",
@@ -38,7 +35,7 @@ export default function AboutTabs() {
             </Tab>
             <Tab
               className={({ selected }) =>
-                classNames(
+                buildClassNames(
                   selected
                     ? "border-gray-300 text-gray-200"
                     : "border-transparent hover:border-gray-300 hover:text-gray-200",
diff --git a/src/Client/src/components/Link.tsx b/src/Client/src/components/Link.tsx
index a0982d0..d6178ce 100644
--- a/src/Client/src/components/Link.tsx
+++ b/src/Client/src/components/Link.tsx
@@ -1,3 +1,5 @@
+import buildClassNames from "../helpers/cssClassFormatter";
+
 interface Props {
   children: string;
   href?: string;
@@ -7,7 +9,7 @@ interface Props {
 
 export default function Link({ children, href, target, className }: Props) {
   const defaultStyles = "underline underline-offset-2 hover:underline-offset-4";
-  const styles = className ? `${defaultStyles} ${className}` : defaultStyles;
+  const styles = buildClassNames(className ? className : "", defaultStyles);
 
   return (
     <a href={href} target={target} className={styles}>
diff --git a/src/Client/src/components/Subtitle.tsx b/src/Client/src/components/Subtitle.tsx
index a84f69d..6593962 100644
--- a/src/Client/src/components/Subtitle.tsx
+++ b/src/Client/src/components/Subtitle.tsx
@@ -1,3 +1,5 @@
+import buildClassNames from "../helpers/cssClassFormatter";
+
 interface Props {
   children: string;
   className?: string | null;
@@ -5,7 +7,7 @@ interface Props {
 
 export default function Subtitle({ children, className }: Props) {
   const defaultStyles = "text-2xl py-4 font-semibold";
-  const styles = className ? `${defaultStyles} ${className}` : defaultStyles;
+  const styles = buildClassNames(className ? className : "", defaultStyles);
 
   return <h2 className={styles}>{children}</h2>;
 }
diff --git a/src/Client/src/components/Text.tsx b/src/Client/src/components/Text.tsx
index 5748f66..c5abf0c 100644
--- a/src/Client/src/components/Text.tsx
+++ b/src/Client/src/components/Text.tsx
@@ -1,4 +1,5 @@
 import { ReactNode } from "react";
+import buildClassNames from "../helpers/cssClassFormatter";
 
 interface Props {
   children: ReactNode;
@@ -7,7 +8,7 @@ interface Props {
 
 export default function Text({ children, className }: Props) {
   const defaultStyles = "text-lg py-2";
-  const styles = className ? `${defaultStyles} ${className}` : defaultStyles;
+  const styles = buildClassNames(className ? className : "", defaultStyles);
 
   return <p className={styles}>{children}</p>;
 }
diff --git a/src/Client/src/components/Title.tsx b/src/Client/src/components/Title.tsx
index ba25493..cff535b 100644
--- a/src/Client/src/components/Title.tsx
+++ b/src/Client/src/components/Title.tsx
@@ -1,3 +1,5 @@
+import buildClassNames from "../helpers/cssClassFormatter";
+
 interface Props {
   children: string;
   className?: string | null;
@@ -5,7 +7,7 @@ interface Props {
 
 export default function Title({ children, className }: Props) {
   const defaultStyles = "text-4xl py-4";
-  const styles = className ? `${defaultStyles} ${className}` : defaultStyles;
+  const styles = buildClassNames(className ? className : "", defaultStyles);
 
   return <h1 className={styles}>{children}</h1>;
 }
diff --git a/src/Client/src/helpers/cssClassFormatter.ts b/src/Client/src/helpers/cssClassFormatter.ts
new file mode 100644
index 0000000..6f94766
--- /dev/null
+++ b/src/Client/src/helpers/cssClassFormatter.ts
@@ -0,0 +1,3 @@
+export default function buildClassNames(...classes: string[]) {
+  return classes.filter(Boolean).join(" ");
+}