diff --git a/wretched-machines-frontend/src/components/ui/content-box.tsx b/wretched-machines-frontend/src/components/ui/content-box.tsx
index 59d7915..5f330f9 100644
--- a/wretched-machines-frontend/src/components/ui/content-box.tsx
+++ b/wretched-machines-frontend/src/components/ui/content-box.tsx
@@ -1,3 +1,5 @@
+import { cn } from "@/lib/utils"
+
 interface ContentBoxProps {
     title: string,
     children: React.ReactNode
@@ -5,9 +7,9 @@ interface ContentBoxProps {
 
 const ContentBox = (props: ContentBoxProps)=>{
     return(
-        <div className="shadow-lg m-10">
-            <div className="content-box-header bg-black text-white p-8 pt-4 pb-4 text-xl text-left">{props.title}</div>
-            <div className="content-box-content border-solid border-1 border-black p-8">
+        <div className={cn("shadow-lg m-10")}>
+            <div className={cn("content-box-header bg-black text-white p-8 pt-4 pb-4 text-xl text-left")}>{props.title}</div>
+            <div className={cn("content-box-content border-solid border-1 border-black p-8")}>
                 {props.children}
             </div>
         </div>
diff --git a/wretched-machines-frontend/src/components/ui/form-input.tsx b/wretched-machines-frontend/src/components/ui/form-input.tsx
index d7309ad..de3378e 100644
--- a/wretched-machines-frontend/src/components/ui/form-input.tsx
+++ b/wretched-machines-frontend/src/components/ui/form-input.tsx
@@ -1,3 +1,5 @@
+import { cn } from "@/lib/utils"
+
 interface FormTextInputProps {
     value: string,
     name: string,
@@ -23,18 +25,18 @@ interface FormLabelProps {
 
 const FormLabel = (props: FormLabelProps) => {
     const label = props.name.charAt(0).toUpperCase() + props.name.slice(1);
-    return(<label className={props.className} htmlFor={props.name}>{label}</label>);
+    return(<label className={cn(props.className)} htmlFor={props.name}>{label}</label>);
 }
 
 const FormTextInput = (props: FormTextInputProps) => {
     return(      
-            <input className={props.className} type={props.type} name={props.name} value={props.value} placeholder={props.placeholder} onChange={props.onChangeHandler}></input>
+            <input className={cn(props.className)} type={props.type} name={props.name} value={props.value} placeholder={props.placeholder} onChange={props.onChangeHandler}></input>
     );
 }
 
 const FormSubmitInput = (props: FormSubmitInputProps) => {
     return(
-            <input className={props.className} type="submit" name={props.name} value={props.value} onSubmit={props.onSubmitHandler}>{props.children}</input>
+            <input className={cn(props.className)} type="submit" name={props.name} value={props.value} onSubmit={props.onSubmitHandler}>{props.children}</input>
     );
 }
 
diff --git a/wretched-machines-frontend/src/components/ui/form.tsx b/wretched-machines-frontend/src/components/ui/form.tsx
index df2ac9b..4556bf0 100644
--- a/wretched-machines-frontend/src/components/ui/form.tsx
+++ b/wretched-machines-frontend/src/components/ui/form.tsx
@@ -1,4 +1,5 @@
 import React from "react"
+import { cn } from "@/lib/utils"
 
 interface FormProps {
     children: React.ReactNode,
@@ -8,7 +9,7 @@ interface FormProps {
 
 const Form = (props: FormProps) => {
     return(
-        <form className={props.className} action={props.formAction}>
+        <form className={cn(props.className)} action={props.formAction}>
             {props.children}
         </form>
     );
diff --git a/wretched-machines-frontend/src/components/ui/navbar.tsx b/wretched-machines-frontend/src/components/ui/navbar.tsx
index 95466b5..628ef6f 100644
--- a/wretched-machines-frontend/src/components/ui/navbar.tsx
+++ b/wretched-machines-frontend/src/components/ui/navbar.tsx
@@ -1,9 +1,9 @@
 import Link from "next/link";
-
+import { cn } from "@/lib/utils"
 
 const Navbar = () => {
     return (
-        <div className="flex h-20 bg-gray-800 text-white justify-around w-screen opacity-100 items-center">
+        <div className={cn("flex h-20 bg-gray-800 text-white justify-around w-screen opacity-100 items-center")}>
             <Link href="/">
                 <div>Home</div>
             </Link>
diff --git a/wretched-machines-frontend/src/components/ui/page-title.tsx b/wretched-machines-frontend/src/components/ui/page-title.tsx
index 0e4541b..ee3d6f8 100644
--- a/wretched-machines-frontend/src/components/ui/page-title.tsx
+++ b/wretched-machines-frontend/src/components/ui/page-title.tsx
@@ -1,3 +1,5 @@
+import { cn } from "@/lib/utils"
+
 interface PageTitleProps {
     title: string
 }
@@ -14,7 +16,7 @@ const AddSpacing = (text: string) : string => {
 const PageTitle = (props: PageTitleProps)=>{
     const title = AddSpacing(props.title);
     return(
-        <h1 className="text-4xl drop-shadow-xl text-shadow tracking-widest">{title}</h1>
+        <h1 className={cn("text-4xl drop-shadow-xl text-shadow tracking-widest")}>{title}</h1>
     );
 }