diff --git a/src/app/(account)/join/steps/StepOne.tsx b/src/app/(account)/join/steps/StepOne.tsx
index a4b2f996..a2d8edba 100644
--- a/src/app/(account)/join/steps/StepOne.tsx
+++ b/src/app/(account)/join/steps/StepOne.tsx
@@ -159,9 +159,9 @@ export default function StepOne() {
             </Button>
 
             <div className="my-6 mt-10 flex items-center justify-center">
-                <div className="w-full border-t border-grey"></div>
+                <div className="w-full border-t border-grey" />
                 <p className="mx-4 text-grey">or</p>
-                <div className="w-full border-t border-grey"></div>
+                <div className="w-full border-t border-grey" />
             </div>
 
             <form onSubmit={handleSignUp}>
diff --git a/src/app/(account)/settings/Sidebar.tsx b/src/app/(account)/settings/Sidebar.tsx
index 8c1c3a64..97942bd1 100644
--- a/src/app/(account)/settings/Sidebar.tsx
+++ b/src/app/(account)/settings/Sidebar.tsx
@@ -40,7 +40,7 @@ export default function Sidebar({ currentTab, onTabChange }: SidebarProps) {
                     />
                 ))}
             </div>
-            <div className="my-4 border-b-2 border-grey md:my-0 md:mr-4 md:border-r-2"></div>
+            <div className="my-4 border-b-2 border-grey md:my-0 md:mr-4 md:border-r-2" />
         </div>
     );
 }
diff --git a/src/app/(account)/settings/tabs/AccountSettings.tsx b/src/app/(account)/settings/tabs/AccountSettings.tsx
index 0c1a2c59..1fc598d4 100644
--- a/src/app/(account)/settings/tabs/AccountSettings.tsx
+++ b/src/app/(account)/settings/tabs/AccountSettings.tsx
@@ -63,7 +63,7 @@ export default function AccountSettings({
                         Membership Status: <span className="text-orange">Payment Required</span>
                     </h2>
 
-                    <div className="mb-6 border-b-2 border-black"></div>
+                    <div className="mb-6 border-b-2 border-black" />
                     <p>
                         Finalise your membership by{' '}
                         <span
@@ -78,7 +78,7 @@ export default function AccountSettings({
             )}
             <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-4">
                 <h2 className="text-2xl font-bold">Change Email</h2>
-                <div className="mb-2 border-b-2 border-black"></div>
+                <div className="mb-2 border-b-2 border-black" />
                 <p className="font-bold">Email address</p>
                 <input
                     type="email"
@@ -93,7 +93,7 @@ export default function AccountSettings({
             </form>
             <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-4">
                 <h2 className="text-2xl font-bold">Change Password</h2>
-                <div className="mb-2 border-b-2 border-black"></div>
+                <div className="mb-2 border-b-2 border-black" />
                 <div className="flex flex-col gap-2">
                     <label htmlFor="oldPassword" className="font-bold">
                         Old Password
@@ -139,7 +139,7 @@ export default function AccountSettings({
             </form>
             <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-4">
                 <h2 className="text-2xl font-bold">Change Linked Google Account</h2>
-                <div className="mb-2 border-b-2 border-black"></div>
+                <div className="mb-2 border-b-2 border-black" />
                 <p className="font-bold">Link Status: </p>
             </form>
         </div>
diff --git a/src/app/(account)/settings/tabs/MembershipSettings.tsx b/src/app/(account)/settings/tabs/MembershipSettings.tsx
index 7e9e3b07..79e15429 100644
--- a/src/app/(account)/settings/tabs/MembershipSettings.tsx
+++ b/src/app/(account)/settings/tabs/MembershipSettings.tsx
@@ -34,7 +34,7 @@ export default function MembershipSettings({
                     {payment.paid ? 'Paid' : 'Payment Required'}
                 </span>
             </h2>
-            <div className="mb-6 border-b-2 border-black"></div>
+            <div className="mb-6 border-b-2 border-black" />
             {payment.paid ? (
                 <p>
                     You are a CS Club member! Your membership expires on{' '}
@@ -51,7 +51,7 @@ export default function MembershipSettings({
                         .
                     </p>
                     <h2 className="mt-8 text-2xl font-bold">Pay Membership Fee</h2>
-                    <div className="mb-6 border-b-2 border-black"></div>
+                    <div className="mb-6 border-b-2 border-black" />
                     <Button
                         type="submit"
                         colour="orange"
diff --git a/src/app/(account)/settings/tabs/NotificationsSettings.tsx b/src/app/(account)/settings/tabs/NotificationsSettings.tsx
index df902897..8fdfa8d7 100644
--- a/src/app/(account)/settings/tabs/NotificationsSettings.tsx
+++ b/src/app/(account)/settings/tabs/NotificationsSettings.tsx
@@ -14,7 +14,7 @@ export default function NotificationsSettings() {
         <div className="relative flex w-full flex-col gap-10">
             <div>
                 <h2 className="text-2xl font-bold">Change Email Notification Settings</h2>
-                <div className="mb-2 border-b-2 border-black"></div>
+                <div className="mb-2 border-b-2 border-black" />
             </div>
             <div className="items-left flex flex-col gap-4 md:flex-row">
                 <h2 className="text-lg font-semibold">Enable Email Notifications</h2>
diff --git a/src/app/(account)/settings/tabs/PersonalInfoSettings.tsx b/src/app/(account)/settings/tabs/PersonalInfoSettings.tsx
index 3b3e52ff..f82c2fc4 100644
--- a/src/app/(account)/settings/tabs/PersonalInfoSettings.tsx
+++ b/src/app/(account)/settings/tabs/PersonalInfoSettings.tsx
@@ -65,7 +65,7 @@ export default function PersonalInfoSettings() {
     return (
         <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-4">
             <h2 className="text-2xl font-bold">Change Personal Info</h2>
-            <div className="mb-2 border-b-2 border-black"></div>
+            <div className="mb-2 border-b-2 border-black" />
             <ControlledField label="First Name" name="firstName" control={control} type="text" />
             <ControlledField label="Last Name" name="lastName" control={control} type="text" />
             <ControlledField
diff --git a/src/app/(account)/signin/page.tsx b/src/app/(account)/signin/page.tsx
index 64d469f3..9d7f2c37 100644
--- a/src/app/(account)/signin/page.tsx
+++ b/src/app/(account)/signin/page.tsx
@@ -109,9 +109,9 @@ export default function SignInPage() {
                         </Button>
 
                         <div className="my-6 mt-10 flex items-center justify-center">
-                            <div className="w-full border-t border-grey"></div>
+                            <div className="w-full border-t border-grey" />
                             <p className="mx-4 text-grey">or</p>
-                            <div className="w-full border-t border-grey"></div>
+                            <div className="w-full border-t border-grey" />
                         </div>
                         <form onSubmit={handleSignIn}>
                             <ControlledField label="Email" control={form.control} name="email" />
diff --git a/src/app/(home)/page.tsx b/src/app/(home)/page.tsx
index 1882db93..13fd40d5 100644
--- a/src/app/(home)/page.tsx
+++ b/src/app/(home)/page.tsx
@@ -27,14 +27,14 @@ export default function HomePage() {
 
                         <div className="relative z-10">
                             <h1 className="text-5xl md:text-8xl">LEARN,</h1>
-                            <div className="h-2"></div>
+                            <div className="h-2" />
                             <h1 className="text-5xl md:text-8xl">SOCIALISE,</h1>
-                            <div className="h-2"></div>
+                            <div className="h-2" />
 
                             <Title colour="yellow" font="font-black">
                                 CODE.
                             </Title>
-                            <div className="h-4 md:h-8"></div>
+                            <div className="h-4 md:h-8" />
                             <FancyRectangle colour="orange" offset="8" filled={false}>
                                 <div className="w-fit bg-orange px-2 py-2">
                                     <h2 className="text-xl md:text-3xl">Computer Science Club</h2>
@@ -232,7 +232,7 @@ export default function HomePage() {
 
             {/* CTA part 2 */}
             <section className="mb-[1em] lg:mb-[6em] xl:mb-[10em]">
-                <div className="h-24"></div>
+                <div className="h-24" />
                 <div className="mb-[3em] md:mb-[8em] lg:mb-[6em]">
                     {/* <Grid /> */}
                     <Image
@@ -254,7 +254,7 @@ export default function HomePage() {
                             <Duck colour="white" />
                         </div>
                         <div className="relative z-10 flex flex-row">
-                            <div className="h-auto w-16 bg-orange"></div>
+                            <div className="h-auto w-16 bg-orange" />
                             <div className="relative flex flex-col">
                                 <span className="relative bg-white py-8 pl-4 pr-16 text-3xl font-black text-black lg:pr-32 lg:text-6xl">
                                     Thinking about <span className="text-orange">Joining?</span>
diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
index 55dcedab..7d62f619 100644
--- a/src/app/about/page.tsx
+++ b/src/app/about/page.tsx
@@ -267,7 +267,7 @@ export default function AboutPage() {
                             <h2 className="text-4xl font-bold text-grey md:text-5xl">FAQ</h2>
                         </div>
                     </FancyRectangle>
-                    <div className="mt-8"></div>
+                    <div className="mt-8" />
                     <div className="flex flex-col gap-x-16 gap-y-8 lg:flex-row">
                         {/* FAQ */}
                         <div className="mb-8 mr-2 flex flex-col justify-items-center gap-12 lg:w-full">
diff --git a/src/components/FancyRectangle.tsx b/src/components/FancyRectangle.tsx
index b14d8e3d..07db8bc5 100644
--- a/src/components/FancyRectangle.tsx
+++ b/src/components/FancyRectangle.tsx
@@ -39,7 +39,7 @@ const FancyRectangle = ({
                     className={`absolute bottom-0 right-0 h-full w-full ${
                         filled ? BG_COLOURS[colour] : BORDER_COLOURS[colour]
                     } ${rounded ? 'rounded-xl' : ''}`}
-                ></div>
+                />
                 <div className="relative z-10 flex h-full w-full items-center justify-center">
                     {children}
                 </div>