diff --git a/src/app/(account)/forgot-password/page.tsx b/src/app/(account)/forgot-password/page.tsx
index 203968ea..17e3f347 100644
--- a/src/app/(account)/forgot-password/page.tsx
+++ b/src/app/(account)/forgot-password/page.tsx
@@ -126,9 +126,9 @@ export default function ForgotPasswordPage() {
     });
 
     return (
-        <section className="flex justify-center">
-            <FancyRectangle colour="purple" offset="8" filled={true}>
-                <div className="z-0 w-[24rem] border-4 border-black bg-white px-8 py-8 text-black md:w-[32rem] md:px-12 md:py-12">
+        <section className="w-full max-w-lg">
+            <FancyRectangle colour="purple" offset="8" filled fullWidth>
+                <div className="z-0 w-full border-4 border-black bg-white p-8 text-black md:p-12">
                     <h3 className="text-3xl font-bold">Forgot Your Password?</h3>
                     <p className="mb-8 text-xl">{STEP_INSTRUCTIONS[step]}</p>
                     {step === 1 && (
diff --git a/src/app/(account)/join/page.tsx b/src/app/(account)/join/page.tsx
index 6147cb90..dce7418b 100644
--- a/src/app/(account)/join/page.tsx
+++ b/src/app/(account)/join/page.tsx
@@ -28,7 +28,7 @@ export default function JoinPage() {
     }, [isSignedIn]);
 
     return (
-        <main className="mx-4 flex flex-col items-center gap-8 px-4 md:mx-10 md:gap-16">
+        <main className="flex flex-col items-center gap-8 md:gap-16">
             <Title colour="purple">Join Us</Title>
             <section>
                 <div className="relative z-10 flex flex-col text-2xl font-black md:flex-row lg:text-3xl">
@@ -53,11 +53,11 @@ export default function JoinPage() {
                     </p>
                 </div>
             </section>
-            <section>
-                <FancyRectangle colour="purple" offset="8" filled={true}>
-                    <div className="z-0 w-full border-4 border-black bg-white px-12 py-12 text-black">
+            <section className="w-full max-w-lg">
+                <FancyRectangle colour="purple" offset="8" filled fullWidth>
+                    <div className="z-0 w-full border-4 border-black bg-white p-8 text-black md:p-12">
                         <h3 className="text-3xl font-bold">{heading.title}</h3>
-                        <p className="text-xl">{heading.description}</p>
+                        <p className="mb-8 text-xl">{heading.description}</p>
 
                         <SignedOut>
                             <StepOne />
diff --git a/src/app/(account)/join/steps/StepFour.tsx b/src/app/(account)/join/steps/StepFour.tsx
index a32dc9ff..4441da7e 100644
--- a/src/app/(account)/join/steps/StepFour.tsx
+++ b/src/app/(account)/join/steps/StepFour.tsx
@@ -53,11 +53,17 @@ export default function StepFour() {
                     type="checkbox"
                 />
             </div>
-            <div className="mt-8 flex justify-center space-x-4">
-                <Button onClick={prevStep} colour="orange">
+            <div className="grid grid-cols-2 gap-4">
+                <Button onClick={prevStep} colour="orange" width="w-full" size="small">
                     Back
                 </Button>
-                <Button onClick={handleSignUp} colour="purple" loading={createMember.isMutating}>
+                <Button
+                    onClick={handleSignUp}
+                    colour="purple"
+                    width="w-full"
+                    size="small"
+                    loading={createMember.isMutating}
+                >
                     Sign up
                 </Button>
             </div>
diff --git a/src/app/(account)/join/steps/StepOne.tsx b/src/app/(account)/join/steps/StepOne.tsx
index d4a710fd..a2d8edba 100644
--- a/src/app/(account)/join/steps/StepOne.tsx
+++ b/src/app/(account)/join/steps/StepOne.tsx
@@ -153,14 +153,15 @@ export default function StepOne() {
 
     return (
         <div>
-            <Button onClick={handleGoogleSignUp} colour="white" width="w-[19rem] md:w-[25.5rem]">
-                <FcGoogle className="mr-2 inline-block text-xl" /> Continue with Google
+            <Button onClick={handleGoogleSignUp} colour="white" width="w-full" size="small">
+                <FcGoogle className="mb-0.5 mr-2 inline-block text-xl" />
+                Continue with Google
             </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}>
@@ -173,11 +174,12 @@ export default function StepOne() {
                     control={form.control}
                     name="password"
                 />
-                <div className="mt-8 flex justify-center space-x-4">
+                <div className="mt-8">
                     <Button
                         colour="orange"
-                        width="w-[19rem] md:w-[25.5rem]"
+                        width="w-full"
                         type="submit"
+                        size="small"
                         loading={emailJoinLoading}
                     >
                         Continue
diff --git a/src/app/(account)/join/steps/StepThree.tsx b/src/app/(account)/join/steps/StepThree.tsx
index ad96a91b..c8d5af24 100644
--- a/src/app/(account)/join/steps/StepThree.tsx
+++ b/src/app/(account)/join/steps/StepThree.tsx
@@ -102,11 +102,11 @@ export default function StepThree() {
                     />
                 </>
             )}
-            <div className="mt-8 flex justify-center space-x-4">
-                <Button onClick={prevStep} colour="orange">
+            <div className="grid grid-cols-2 gap-4">
+                <Button onClick={prevStep} colour="orange" width="w-full" size="small">
                     Back
                 </Button>
-                <Button type="submit" colour="orange">
+                <Button type="submit" colour="orange" width="w-full" size="small">
                     Continue
                 </Button>
             </div>
diff --git a/src/app/(account)/join/steps/StepTwo.tsx b/src/app/(account)/join/steps/StepTwo.tsx
index 7e9e7de2..8331bca8 100644
--- a/src/app/(account)/join/steps/StepTwo.tsx
+++ b/src/app/(account)/join/steps/StepTwo.tsx
@@ -70,11 +70,9 @@ export default function StepTwo() {
             {form.watch('studentStatus') === 'At The University of Adelaide' && (
                 <ControlledField label="Student ID" control={form.control} name="studentId" />
             )}
-            <div className="mb-4 mt-8 flex w-full">
-                <Button colour="orange" width="w-[19rem] md:w-[25.5rem]" type="submit">
-                    Continue
-                </Button>
-            </div>
+            <Button colour="orange" width="w-full" size="small" type="submit">
+                Continue
+            </Button>
         </form>
     );
 }
diff --git a/src/app/(account)/settings/Settings.tsx b/src/app/(account)/settings/Settings.tsx
index ee14e335..8282fce5 100644
--- a/src/app/(account)/settings/Settings.tsx
+++ b/src/app/(account)/settings/Settings.tsx
@@ -26,7 +26,7 @@ export default function Settings({ settingData }: { settingData: SettingData })
     const { refresh } = useRouter();
 
     return (
-        <>
+        <div className="flex w-full flex-col gap-4 border-4 border-black bg-white px-4 py-8 text-black md:flex-row md:gap-8 md:p-12">
             <Sidebar
                 currentTab={tab}
                 onTabChange={(tab) => {
@@ -34,9 +34,9 @@ export default function Settings({ settingData }: { settingData: SettingData })
                     refresh();
                 }}
             />
-            <div className="flex w-full">
+            <div className="w-full">
                 <Tab settingData={settingData} />
             </div>
-        </>
+        </div>
     );
 }
diff --git a/src/app/(account)/settings/Sidebar.tsx b/src/app/(account)/settings/Sidebar.tsx
index ed1ba8f6..2b1ce4ea 100644
--- a/src/app/(account)/settings/Sidebar.tsx
+++ b/src/app/(account)/settings/Sidebar.tsx
@@ -10,7 +10,7 @@ function SidebarTab({ tabName, currentTab, onTabChange }: SidebarTabProps) {
     const selected = currentTab === tabName;
     return (
         <button
-            className={`text-left ${selected ? 'cursor-default font-bold' : 'hover:underline'}`}
+            className={`text-nowrap text-xl md:text-base ${selected ? 'cursor-default font-bold' : 'hover:underline'}`}
             onClick={() => {
                 if (!selected) {
                     onTabChange(tabName);
@@ -25,11 +25,14 @@ function SidebarTab({ tabName, currentTab, onTabChange }: SidebarTabProps) {
 interface SidebarProps {
     currentTab: TabNames;
     onTabChange: (tab: TabNames) => void;
+    className?: string;
 }
 
-export default function Sidebar({ currentTab, onTabChange }: SidebarProps) {
+export default function Sidebar({ currentTab, onTabChange, className }: SidebarProps) {
     return (
-        <div className="flex w-48 flex-col space-y-4 border-r-2 border-grey">
+        <div
+            className={`${className} flex flex-col items-center gap-4 overflow-y-scroll border-2 border-grey p-2 md:items-end md:overflow-visible md:border-y-0 md:border-l-0 md:border-r-2 md:py-0 md:pl-0 md:pr-8`}
+        >
             {TAB_NAMES.map((tab, i) => (
                 <SidebarTab
                     currentTab={currentTab}
diff --git a/src/app/(account)/settings/page.tsx b/src/app/(account)/settings/page.tsx
index ea1c6e11..f82ceb77 100644
--- a/src/app/(account)/settings/page.tsx
+++ b/src/app/(account)/settings/page.tsx
@@ -21,27 +21,25 @@ export default async function SettingsPage() {
     const membershipPayment = await verifyMembershipPayment(user.id);
 
     return (
-        <div className="flex flex-col">
+        <main className="flex flex-col items-center gap-8 md:gap-16">
             <div className="flex justify-center">
                 <Title colour="purple">Settings</Title>
             </div>
-            <section className="mt-12 flex justify-center">
-                <FancyRectangle colour="purple" offset="8" filled>
-                    <div className="z-0 flex w-fit gap-8 border-4 border-black bg-white px-8 py-8 text-black md:w-[48rem] md:px-12 md:py-12">
-                        {exists ? (
-                            <Settings settingData={{ membershipPayment }} />
-                        ) : (
-                            <h2 className="text-2xl">
-                                Please finishing{' '}
-                                <Link href="/join" className="font-bold text-purple">
-                                    signing up
-                                </Link>{' '}
-                                first.
-                            </h2>
-                        )}
-                    </div>
+            <section className="w-full max-w-[62rem]">
+                <FancyRectangle colour="purple" offset="8" filled fullWidth>
+                    {exists ? (
+                        <Settings settingData={{ membershipPayment }} />
+                    ) : (
+                        <h2 className="text-2xl">
+                            Please finishing{' '}
+                            <Link href="/join" className="font-bold text-purple">
+                                signing up
+                            </Link>{' '}
+                            first.
+                        </h2>
+                    )}
                 </FancyRectangle>
             </section>
-        </div>
+        </main>
     );
 }
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 e257bed9..cef990a8 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,11 +51,13 @@ 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"
                         onClick={handlePayment}
+                        width="w-full md:w-42"
+                        size="small"
                         loading={pay.isMutating}
                     >
                         Pay Online
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 2540ef35..9d7f2c37 100644
--- a/src/app/(account)/signin/page.tsx
+++ b/src/app/(account)/signin/page.tsx
@@ -91,61 +91,65 @@ export default function SignInPage() {
     };
 
     return (
-        <section className="flex justify-center">
-            <FancyRectangle colour="purple" offset="8" filled={true}>
-                <div className="z-0 w-[24rem] border-4 border-black bg-white px-8 py-8 text-black md:w-[32rem] md:px-12 md:py-12">
-                    {/* Heading */}
-                    <h3 className="text-3xl font-bold">Sign In</h3>
-                    <p className="mb-8 text-xl">Sign into your account</p>
-
-                    <Button
-                        onClick={handleGoogleSignIn}
-                        colour="white"
-                        width="w-[19rem] md:w-[25.5rem]"
-                    >
-                        <FcGoogle className="mr-2 inline-block text-xl" /> Continue with Google
-                    </Button>
-
-                    <div className="my-6 mt-10 flex items-center justify-center">
-                        <div className="w-full border-t border-grey"></div>
-                        <p className="mx-4 text-grey">or</p>
-                        <div className="w-full border-t border-grey"></div>
-                    </div>
-                    <form onSubmit={handleSignIn}>
-                        <ControlledField label="Email" control={form.control} name="email" />
-                        <ControlledField
-                            label="Password"
-                            control={form.control}
-                            name="password"
-                            type="password"
-                        />
-                        <Link
-                            href="/forgot-password"
-                            className="mb-8 flex text-lg text-orange md:text-base"
-                        >
-                            Forgot password?
-                        </Link>
+        <main className="flex flex-col items-center">
+            <section className="w-full max-w-lg">
+                <FancyRectangle colour="purple" offset="8" filled fullWidth>
+                    <div className="z-0 w-full border-4 border-black bg-white px-12 py-12 text-black">
+                        {/* Heading */}
+                        <h3 className="text-3xl font-bold">Sign In</h3>
+                        <p className="mb-8 text-xl">Sign into your account</p>
+
                         <Button
-                            type="submit"
-                            colour="orange"
-                            width="w-[19rem] md:w-[25rem]"
-                            loading={signInLoading}
+                            onClick={handleGoogleSignIn}
+                            colour="white"
+                            width="w-full"
+                            size="small"
                         >
-                            Sign In
+                            <FcGoogle className="mr-2 inline-block text-xl" /> Continue with Google
                         </Button>
-                    </form>
-
-                    {/* Sign-up option */}
-                    <div className="mt-10 flex">
-                        <p className="text-lg text-grey md:text-base">
-                            Don&apos;t have an account yet?{' '}
-                            <Link href="/join" className="text-orange">
-                                Join Us
+
+                        <div className="my-6 mt-10 flex items-center justify-center">
+                            <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>
+                        <form onSubmit={handleSignIn}>
+                            <ControlledField label="Email" control={form.control} name="email" />
+                            <ControlledField
+                                label="Password"
+                                control={form.control}
+                                name="password"
+                                type="password"
+                            />
+                            <Link
+                                href="/forgot-password"
+                                className="mb-8 flex text-lg text-orange md:text-base"
+                            >
+                                Forgot password?
                             </Link>
-                        </p>
+                            <Button
+                                type="submit"
+                                colour="orange"
+                                width="w-full"
+                                size="small"
+                                loading={signInLoading}
+                            >
+                                Sign In
+                            </Button>
+                        </form>
+
+                        {/* Sign-up option */}
+                        <div className="mt-10 flex">
+                            <p className="text-lg text-grey md:text-base">
+                                Don&apos;t have an account yet?{' '}
+                                <Link href="/join" className="text-orange">
+                                    Join Us
+                                </Link>
+                            </p>
+                        </div>
                     </div>
-                </div>
-            </FancyRectangle>
-        </section>
+                </FancyRectangle>
+            </section>
+        </main>
     );
 }
diff --git a/src/app/(home)/page.tsx b/src/app/(home)/page.tsx
index 8b321096..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>
@@ -46,7 +46,7 @@ export default function HomePage() {
                     {/* Right side */}
                     <div className="mt-12 w-full transition-all duration-500 md:w-auto lg:ml-10 lg:mt-0">
                         <div className="relative z-10 mr-2">
-                            <FancyRectangle colour="purple" offset="8" filled={true}>
+                            <FancyRectangle colour="purple" offset="8" filled>
                                 <div className="relative h-full w-full bg-white">
                                     <ImageCarousel
                                         images={CAROUSEL_IMAGES}
@@ -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/FAQ.tsx b/src/app/about/FAQ.tsx
index 41c48e18..1ba269d8 100644
--- a/src/app/about/FAQ.tsx
+++ b/src/app/about/FAQ.tsx
@@ -19,7 +19,7 @@ const FAQ = ({ question, answer, colour }: FAQProps) => {
     };
 
     return (
-        <FancyRectangle colour="white" filled={true} rounded={true} offset={'8'} fullWidth={true}>
+        <FancyRectangle colour="white" filled rounded offset={'8'} fullWidth>
             <div className="flex w-full flex-col">
                 <div
                     className={`flex h-full w-full flex-col justify-center rounded-xl border-2 bg-${colour} border-white p-4`}
diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
index e4a3532e..7d62f619 100644
--- a/src/app/about/page.tsx
+++ b/src/app/about/page.tsx
@@ -30,7 +30,7 @@ export default function AboutPage() {
                         className="absolute -z-10 ml-8 mt-8 w-0 max-w-[800px] md:w-[70vw] lg:w-[50vw]"
                     />
                     <div className="mr-2 flex">
-                        <FancyRectangle colour={'purple'} offset={'8'} filled={true} rounded={true}>
+                        <FancyRectangle colour={'purple'} offset={'8'} filled rounded>
                             <Image
                                 src={'/images/about/meet-and-greet.jpg'}
                                 alt={'Meet and Greet'}
@@ -86,7 +86,7 @@ export default function AboutPage() {
                                 <h3 className="mb-2 ml-2 md:mb-0">to</h3>
                             </div>
                         </div>
-                        <FancyRectangle colour={'purple'} offset={'8'} filled={true} rounded={true}>
+                        <FancyRectangle colour={'purple'} offset={'8'} filled rounded>
                             <Paragraph>
                                 <ul className="ml-6 list-disc">
                                     <li>
@@ -161,7 +161,7 @@ export default function AboutPage() {
                         </p>
                     </div>
                     <div className="mr-2 flex justify-center lg:justify-end">
-                        <FancyRectangle colour={'purple'} offset={'8'} filled={true} rounded={true}>
+                        <FancyRectangle colour={'purple'} offset={'8'} filled rounded>
                             <Image
                                 src={'/images/about/quiz-night.jpg'}
                                 alt={'Quiz Night'}
@@ -239,10 +239,10 @@ export default function AboutPage() {
                                 key={index}
                                 colour={member.isExecCommittee ? 'yellow' : 'white'}
                                 offset={'8'}
-                                filled={true}
-                                rounded={true}
-                                fullWidth={true}
-                                fullHeight={true}
+                                filled
+                                rounded
+                                fullWidth
+                                fullHeight
                             >
                                 <div
                                     className={`h-full w-full rounded-xl border-2 border-${member.isExecCommittee ? 'yellow' : 'white'} flex flex-col justify-center bg-grey p-4`}
@@ -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/app/events/FridayNight.tsx b/src/app/events/FridayNight.tsx
index 674ee31c..d900ab0c 100644
--- a/src/app/events/FridayNight.tsx
+++ b/src/app/events/FridayNight.tsx
@@ -52,7 +52,7 @@ function Ducks() {
 
 function Details() {
     return (
-        <FancyRectangle colour="white" offset="16" filled={true} rounded>
+        <FancyRectangle colour="white" offset="16" filled rounded>
             <Paragraph className="space-y-8">
                 <ul className="ml-6 list-disc">
                     <li>Need to blow off some steam from a long week of studying?</li>
diff --git a/src/app/events/Info.tsx b/src/app/events/Info.tsx
index 89b75b15..aaecb161 100644
--- a/src/app/events/Info.tsx
+++ b/src/app/events/Info.tsx
@@ -15,7 +15,7 @@ export default function Info({ className }: { className?: string }) {
                 <p>For further information, take a look at some of the events below!</p>
             </div>
             <div className="mb-4 mr-4">
-                <FancyRectangle colour="white" offset="16" filled={true} rounded>
+                <FancyRectangle colour="white" offset="16" filled rounded>
                     <div className="relative h-full w-full rounded bg-white p-1">
                         <ImageCarousel images={CAROUSEL_IMAGES} width={400} height={300} />
                     </div>
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index ba12f1ec..1339ac22 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -11,20 +11,31 @@ interface ButtonProps {
     type?: 'button' | 'submit' | 'reset';
     width?: string;
     loading?: boolean;
+    size?: 'base' | 'small';
     font?: string;
 }
 
-const Button = ({ children, colour, href, onClick, width, type, loading, font }: ButtonProps) => {
+const Button = ({
+    children,
+    colour,
+    href,
+    onClick,
+    width,
+    type,
+    loading,
+    font,
+    size = 'base',
+}: ButtonProps) => {
     const isAnchor = !!href;
     const Component = isAnchor ? 'a' : 'button';
 
     return (
-        <FancyRectangle colour="black" offset="4" filled>
+        <FancyRectangle colour="black" offset="4" filled fullWidth>
             <Component
                 href={isAnchor ? href : undefined}
                 onClick={onClick}
                 type={isAnchor ? undefined : type}
-                className={`${width} ${font ?? 'text-lg md:text-base'} ${BG_COLOURS[colour]} ${isAnchor ? 'hover:bg-yellow' : 'hover:enabled:bg-yellow'} whitespace-nowrap border-2 border-black px-12 py-4 font-bold transition-colors duration-300 disabled:cursor-wait disabled:grayscale md:px-2 md:py-1 lg:px-6 lg:py-2`}
+                className={`${width} ${font ?? 'text-lg md:text-base'} ${BG_COLOURS[colour]} ${isAnchor ? 'hover:bg-yellow' : 'hover:enabled:bg-yellow'} whitespace-nowrap border-2 border-black  ${size == 'base' ? 'px-16 text-lg' : 'px-4 text-sm'} py-4 font-bold transition-colors duration-300 disabled:cursor-wait disabled:grayscale md:px-2 md:py-1 md:text-base lg:px-6 lg:py-2`}
                 disabled={loading}
             >
                 {children}
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>
diff --git a/src/components/Link.tsx b/src/components/Link.tsx
index 513f0282..906e768d 100644
--- a/src/components/Link.tsx
+++ b/src/components/Link.tsx
@@ -11,7 +11,7 @@ interface LinkProps {
 
 export default function Link({ name, link, icon: Icon, borderColour }: LinkProps) {
     return (
-        <FancyRectangle colour={borderColour} offset="4" filled={true}>
+        <FancyRectangle colour={borderColour} offset="4" filled>
             <a
                 href={link}
                 target="_blank"