From 729e7aa5382d20b538c24a1a818c96e7140f67eb Mon Sep 17 00:00:00 2001
From: Calum Murphy <calumthemurphy@gmail.com>
Date: Thu, 9 Jul 2026 16:53:05 +0100
Subject: [PATCH 1/3] Saving local changes

---
 frontend/app/components/Form.jsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/app/components/Form.jsx b/frontend/app/components/Form.jsx
index 16f853d..4135faf 100644
--- a/frontend/app/components/Form.jsx
+++ b/frontend/app/components/Form.jsx
@@ -891,7 +891,7 @@ export default function Form() {
                                              type="button"
                                              onClick={() => checkHpcAnswer(optionIndex)}
                                              disabled={Boolean(hpcQuestionResult)}
-                                             className={`rounded-xl border px-4 py-3 text-left text-sm font-medium transition ${
+                                             className={`rounded-xl border cursor-pointer px-4 py-3 text-left text-sm font-medium transition ${
                                                 isSelected
                                                    ? 'border-cyan-300 bg-cyan-400/20 text-white'
                                                    : 'border-white/10 bg-slate-900/40 text-slate-200 hover:border-cyan-300/40 hover:bg-cyan-400/10'
@@ -923,8 +923,8 @@ export default function Form() {
                                           }`}
                                        >
                                           {hpcQuestionResult.correct
-                                             ? 'Correct ✅'
-                                             : 'Not quite ❌'}
+                                             ? 'Correct'
+                                             : 'Not quite'}
                                        </p>
 
                                        <p className="mt-2 text-sm text-slate-200">

From 498a5df6cd04d426cc41c5b1d7d5229f05882579 Mon Sep 17 00:00:00 2001
From: Calum Murphy <calumthemurphy@gmail.com>
Date: Fri, 10 Jul 2026 09:46:22 +0100
Subject: [PATCH 2/3] Adding styling tweaks and loading icon

---
 frontend/app/animation/page.tsx               | 16 +++++++
 frontend/app/components/ClusterSettings.jsx   |  9 ++--
 frontend/app/components/Form.jsx              |  9 ++--
 frontend/app/components/Header.jsx            |  2 +-
 frontend/app/components/Loading.jsx           | 17 +++++++
 frontend/app/components/Name.jsx              | 47 +------------------
 frontend/app/components/Options.jsx           |  2 +-
 frontend/app/components/Overview.jsx          |  7 ++-
 frontend/app/components/PersonalSchedule.jsx  |  9 ++--
 frontend/app/components/PoolSettingsPage.jsx  |  9 ++--
 frontend/app/components/Report.jsx            |  2 +-
 frontend/app/components/Results.jsx           |  7 ++-
 frontend/app/components/Schedule.jsx          |  9 ++--
 frontend/app/components/TeamsSettingsPage.jsx | 11 ++---
 frontend/app/globals.css                      | 41 ++++++++++++++++
 15 files changed, 106 insertions(+), 91 deletions(-)
 create mode 100644 frontend/app/animation/page.tsx
 create mode 100644 frontend/app/components/Loading.jsx

diff --git a/frontend/app/animation/page.tsx b/frontend/app/animation/page.tsx
new file mode 100644
index 0000000..31732b2
--- /dev/null
+++ b/frontend/app/animation/page.tsx
@@ -0,0 +1,16 @@
+import Loading from "../components/Loading"
+
+export const metadata = {
+   title: 'Cluster Options'
+};
+
+export default async function AnimationPage() {
+   return (
+      <main>
+        <Loading>
+            
+        </Loading>
+         
+      </main>
+   );
+}
diff --git a/frontend/app/components/ClusterSettings.jsx b/frontend/app/components/ClusterSettings.jsx
index d4e1787..985eb7b 100644
--- a/frontend/app/components/ClusterSettings.jsx
+++ b/frontend/app/components/ClusterSettings.jsx
@@ -7,6 +7,7 @@ import { useState, useEffect, useMemo, useCallback } from 'react';
 import { useRouter, useSearchParams } from 'next/navigation';
 import { FaDatabase, FaUser } from 'react-icons/fa';
 import { IoIosArrowForward } from 'react-icons/io';
+import Loading from "../components/Loading.jsx"
 
 export default function ClusterSettingsPage() {
    const searchParams = useSearchParams();
@@ -351,9 +352,7 @@ export default function ClusterSettingsPage() {
 
    if (loadingClusters) {
       return (
-         <main className="flex min-h-screen items-center justify-center">
-            <p className="text-white">Loading cluster...</p>
-         </main>
+         <Loading/>
       );
    }
 
@@ -362,8 +361,8 @@ export default function ClusterSettingsPage() {
          <div className="relative z-10 w-full">
             <div className="p-10 ">
                {/* Header */}
-               <div className="mb-10 text-left">
-                  <h1 className="text-5xl font-bold text-white">{cluster.name}</h1>
+               <div className="mb-10 text-center md:text-left">
+                  <h1 className="text-4xl sm:text-5xl  font-bold text-white">{cluster.name}</h1>
 
                   <p className="mt-3 text-lg text-slate-300">Cluster settings and overview</p>
 
diff --git a/frontend/app/components/Form.jsx b/frontend/app/components/Form.jsx
index 4135faf..0a994be 100644
--- a/frontend/app/components/Form.jsx
+++ b/frontend/app/components/Form.jsx
@@ -5,6 +5,7 @@ import Cookies from 'js-cookie';
 import { useRouter } from 'next/navigation';
 import ReactMarkdown from 'react-markdown';
 import { FaClipboardList, FaRegCopy, FaCheck, FaLightbulb } from 'react-icons/fa';
+import Loading from "../components/Loading"
 
 function getTodayTimeMs(value) {
    const numericValue = Number(value);
@@ -449,11 +450,7 @@ export default function Form() {
 
    if (!clusterId || !nameID) {
       return (
-         <main className="flex min-h-screen items-center justify-center">
-            <div className="rounded-2xl border border-white/10 bg-white/10 px-8 py-6 text-white backdrop-blur-xl">
-               Loading report...
-            </div>
-         </main>
+        <Loading />
       );
    }
 
@@ -545,7 +542,7 @@ export default function Form() {
          <div className="relative z-10 w-full">
             <form onSubmit={handleSubmit} className="p-10">
                {/* Header */}
-               <div className="mb-10 text-left">
+               <div className="mb-10 text-center md:text-left">
                   <h1 className="text-4xl sm:text-5xl font-bold text-white">
                      Process Documentation
                   </h1>
diff --git a/frontend/app/components/Header.jsx b/frontend/app/components/Header.jsx
index 87ac385..d821c07 100644
--- a/frontend/app/components/Header.jsx
+++ b/frontend/app/components/Header.jsx
@@ -124,7 +124,7 @@ export default function Header() {
                   aria-label={mobileMenuOpen ? 'Close menu' : 'Open menu'}
                   aria-expanded={mobileMenuOpen}
                   onClick={() => setMobileMenuOpen((isOpen) => !isOpen)}
-                  className="flex h-10 w-10 cursor-pointer items-center justify-center rounded-xl border border-white/10 bg-white/10 text-2xl text-slate-100 transition hover:border-blue-300/35 hover:bg-blue-500/15 lg:hidden"
+                  className="flex h-10 w-10 cursor-pointer items-center justify-center rounded-xl text-2xl text-slate-100 transition hover:border-blue-300/35 hover:bg-blue-500/15 lg:hidden"
                >
                   {mobileMenuOpen ? <IoClose aria-hidden="true" /> : <IoMenu aria-hidden="true" />}
                </button>
diff --git a/frontend/app/components/Loading.jsx b/frontend/app/components/Loading.jsx
new file mode 100644
index 0000000..c21bbeb
--- /dev/null
+++ b/frontend/app/components/Loading.jsx
@@ -0,0 +1,17 @@
+'use client';
+
+import { FaMicrochip } from "react-icons/fa6";
+
+export default function Loading() {
+
+
+    return (
+
+       <main className="flex items-center h-screen pb-30 justify-center">
+   <div className="flex flex-col items-center justify-center text-center">
+      <FaMicrochip className="h-25 w-25 text-slate-500 animate-spin-quarter-pause" />
+      <p className="p-2 text-lg text-slate-500">Loading ...</p>
+   </div>
+</main>
+    )
+}
\ No newline at end of file
diff --git a/frontend/app/components/Name.jsx b/frontend/app/components/Name.jsx
index f7c81ec..3e53f84 100644
--- a/frontend/app/components/Name.jsx
+++ b/frontend/app/components/Name.jsx
@@ -73,52 +73,7 @@ export default function Name() {
             <div className="p-10">
                {/* Header */}
 
-               {/* <form onSubmit={handleSubmit} className="space-y-6">
-                  <div>
-                     <label
-                        htmlFor="person"
-                        className="mb-2 block text-sm font-medium text-slate-200"
-                     >
-                        Person
-                     </label>
-
-                     <Listbox value={selectedId} onChange={setSelectedId}>
-                        <div className="relative">
-                           <ListboxButton className="w-full cursor-pointer rounded-xl border border-slate-600 bg-slate-800/80 px-4 py-3 text-left text-white backdrop-blur-md outline-none transition hover:border-white/20 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30">
-                              {people.find((p) => p.id === selectedId)?.name ||
-                                 'Select a person...'}
-
-                              <span className="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-slate-400">
-                                 ▼
-                              </span>
-                           </ListboxButton>
-
-                           <ListboxOptions className="absolute z-50 mt-2 max-h-60 w-full overflow-auto rounded-xl border border-white/10 bg-slate-900/95 backdrop-blur-xl shadow-2xl">
-                              {people.map((person) => (
-                                 <ListboxOption
-                                    key={person.id}
-                                    value={person.id}
-                                    className="cursor-pointer px-4 py-3 text-white transition data-[active]:bg-blue-500/20 data-[selected]:font-semibold"
-                                 >
-                                    {person.name}
-                                 </ListboxOption>
-                              ))}
-                           </ListboxOptions>
-                        </div>
-                     </Listbox>
-                  </div>
-
-                  <button
-                     type="submit"
-                     disabled={!selectedId}
-                     className="flex w-full cursor-pointer items-center justify-center rounded-xl bg-gradient-to-r from-blue-500 to-indigo-600 px-4 py-3 font-semibold text-white shadow-lg transition hover:scale-[1.02] hover:from-blue-600 hover:to-indigo-700 disabled:cursor-not-allowed disabled:opacity-50"
-                  >
-                     <div className="flex items-center gap-1">
-                        Continue
-                        <IoIosArrowForward aria-hidden="true" />
-                     </div>
-                  </button>
-               </form> */}
+              
 
                {!selectedTeamId ? (
                   <div key="select-team" className="animate-fade-up">
diff --git a/frontend/app/components/Options.jsx b/frontend/app/components/Options.jsx
index 08f4c5a..f34c11f 100644
--- a/frontend/app/components/Options.jsx
+++ b/frontend/app/components/Options.jsx
@@ -389,7 +389,7 @@ export default function Options() {
          <div className="relative z-10 w-full">
             <div className=" p-10">
                {/* Header */}
-               <div className="mb-10 text-left">
+               <div className="mb-10 text-center md:text-left">
                   <h1 className="text-4xl sm:text-5xl font-bold text-white">Administration</h1>
 
                   <p className="mt-3 text-lg text-slate-300">
diff --git a/frontend/app/components/Overview.jsx b/frontend/app/components/Overview.jsx
index 0380030..d40e54b 100644
--- a/frontend/app/components/Overview.jsx
+++ b/frontend/app/components/Overview.jsx
@@ -3,6 +3,7 @@
 import { useState, useEffect } from 'react';
 import DatePicker from 'react-datepicker';
 import { FaCalendarAlt } from 'react-icons/fa';
+import Loading from "../components/Loading"
 
 function dateToInputValue(date) {
    if (!date) return '';
@@ -88,9 +89,7 @@ export default function Overview() {
    // Show loading
    if (!reportLoaded) {
       return (
-         <main className="flex min-h-screen items-center justify-center text-white">
-            Loading overview...
-         </main>
+         <Loading />
       );
    }
 
@@ -100,7 +99,7 @@ export default function Overview() {
          <div className="relative z-10 w-full">
             <div className="p-10 ">
                {/* Header */}
-               <div className="mb-10 text-left">
+               <div className="mb-10 text-center md:text-left">
                   <h1 className="text-4xl sm:text-5xl font-bold text-white">Reports Overview</h1>
 
                   <p className="mt-3 text-lg text-slate-300">
diff --git a/frontend/app/components/PersonalSchedule.jsx b/frontend/app/components/PersonalSchedule.jsx
index de4f58b..994e87d 100644
--- a/frontend/app/components/PersonalSchedule.jsx
+++ b/frontend/app/components/PersonalSchedule.jsx
@@ -5,6 +5,7 @@ import { useRouter } from 'next/navigation';
 import Cookies from 'js-cookie';
 import { FaFolderOpen, FaInbox, FaUser } from 'react-icons/fa';
 import { IoIosArrowForward } from 'react-icons/io';
+import Loading from "../components/Loading"
 
 const CHECK_START_BUFFER_MS = 20 * 60 * 1000;
 
@@ -192,11 +193,7 @@ export default function PersonalSchedule() {
 
    if (loading) {
       return (
-         <main className="flex min-h-screen items-center justify-center bg-gradient-to-br from-slate-900 via-slate-800 to-blue-900">
-            <div className="rounded-2xl border border-white/10 bg-white/10 px-8 py-6 text-white shadow-2xl backdrop-blur-xl">
-               Loading clusters...
-            </div>
-         </main>
+        <Loading/>
       );
    }
 
@@ -212,7 +209,7 @@ export default function PersonalSchedule() {
          <div className="relative z-10 w-full">
             <div className="rounded-3xl p-10">
                {/* Header */}
-               <div className="mb-10 text-left">
+               <div className="mb-10 text-center md:text-left">
                   <h1 className="text-4xl sm:text-5xl font-bold text-white">
                      {name}&apos;s Clusters
                   </h1>
diff --git a/frontend/app/components/PoolSettingsPage.jsx b/frontend/app/components/PoolSettingsPage.jsx
index 86027eb..405035e 100644
--- a/frontend/app/components/PoolSettingsPage.jsx
+++ b/frontend/app/components/PoolSettingsPage.jsx
@@ -3,8 +3,7 @@
 import { useEffect, useState } from 'react';
 import { FaServer } from 'react-icons/fa';
 import { useSearchParams } from 'next/navigation';
-
-import ReportSkeleton from './PoolSkeleton';
+import Loading from './Loading';
 
 export default function PoolClustersPage() {
    const searchParams = useSearchParams();
@@ -120,7 +119,7 @@ export default function PoolClustersPage() {
    }
 
    if (loading) {
-      return <ReportSkeleton />;
+      return <Loading/>;
    }
 
    if (!pool) {
@@ -139,8 +138,8 @@ export default function PoolClustersPage() {
       <main className="flex min-h-screen items-center justify-center">
          <div className="relative z-10 w-full">
             <div className="p-10">
-               <div className="text-left">
-                  <h1 className="text-5xl font-bold text-white">{pool.name}</h1>
+               <div className="text-center md:text-left">
+                  <h1 className="text-4xl sm:text-5xl  font-bold text-white">{pool.name}</h1>
 
                   <p className="mt-3 text-lg text-slate-300">
                      Manage clusters assigned to this pool.
diff --git a/frontend/app/components/Report.jsx b/frontend/app/components/Report.jsx
index cd0e814..a7b284b 100644
--- a/frontend/app/components/Report.jsx
+++ b/frontend/app/components/Report.jsx
@@ -226,7 +226,7 @@ export default function Report() {
 
                   {/* Desktop */}
                   <div className="hidden md:block overflow-x-auto">
-                     <table className="w-full text-left">
+                     <table className="w-full text-center md:text-left">
                         <thead className="bg-slate-900/50">
                            <tr>
                               <th className="px-6 py-4 text-sm text-slate-300">Outcome</th>
diff --git a/frontend/app/components/Results.jsx b/frontend/app/components/Results.jsx
index 0bf6edb..b7d019c 100644
--- a/frontend/app/components/Results.jsx
+++ b/frontend/app/components/Results.jsx
@@ -7,6 +7,7 @@ import { FaDatabase, FaUser } from 'react-icons/fa';
 import { IoIosArrowForward } from 'react-icons/io';
 import DatePicker from 'react-datepicker';
 import { FaCalendarAlt } from 'react-icons/fa';
+import Loading from './Loading';
 
 function dateToInputValue(date) {
    if (!date) return '';
@@ -195,9 +196,7 @@ export default function ResultsPage() {
 
    if (!clustersLoaded) {
       return (
-         <main className="flex min-h-screen items-center justify-center text-white">
-            Loading clusters...
-         </main>
+       <Loading />
       );
    }
 
@@ -206,7 +205,7 @@ export default function ResultsPage() {
          <div className="relative z-10 w-full ">
             <div className=" p-10">
                {/* HEADER */}
-               <div className="mb-10 text-left">
+               <div className="mb-10 text-center md:text-left">
                   <h1 className="text-4xl sm:text-5xl font-bold text-white">Report Explorer </h1>
 
                   <p className="mt-3 text-lg text-slate-300">Find reports by cluster or by week.</p>
diff --git a/frontend/app/components/Schedule.jsx b/frontend/app/components/Schedule.jsx
index 5310215..02be08a 100644
--- a/frontend/app/components/Schedule.jsx
+++ b/frontend/app/components/Schedule.jsx
@@ -5,6 +5,7 @@ import { IoSwapHorizontal } from 'react-icons/io5';
 import { IoIosArrowForward, IoMdDoneAll } from 'react-icons/io';
 import { BsThreeDots } from 'react-icons/bs';
 import { IoCloseSharp } from 'react-icons/io5';
+import Loading from './Loading';
 
 function formatDateParam(date) {
    const year = date.getFullYear();
@@ -197,11 +198,7 @@ export default function Schedule() {
 
    if (loading || !schedule) {
       return (
-         <main className="flex items-center justify-center py-10">
-            <div className="rounded-2xl bg-white/10 px-8 py-6 text-white backdrop-blur-xl">
-               Loading schedule...
-            </div>
-         </main>
+        <Loading/>
       );
    }
 
@@ -211,7 +208,7 @@ export default function Schedule() {
             {/* Header */}
             <div className="mb-6 grid gap-4 text-center md:grid-cols-[1fr_auto] md:items-start md:text-left">
                <div className="order-1md:col-start-1 md:row-start-1">
-                  <h1 className="text-4xl font-bold text-white">Weekly Schedule</h1>
+                  <h1 className="text-4xl sm:text-5xl font-bold text-white">Weekly Schedule</h1>
                   <p className="mt-2  text-slate-300">Week beginning {formattedWeekBeginning}</p>
                </div>
 
diff --git a/frontend/app/components/TeamsSettingsPage.jsx b/frontend/app/components/TeamsSettingsPage.jsx
index 21a16b2..4728379 100644
--- a/frontend/app/components/TeamsSettingsPage.jsx
+++ b/frontend/app/components/TeamsSettingsPage.jsx
@@ -6,6 +6,7 @@ import Link from 'next/link';
 import { Listbox, ListboxButton, ListboxOptions, ListboxOption } from '@headlessui/react';
 import { FaLayerGroup, FaUser, FaUsers } from 'react-icons/fa';
 import { IoIosSettings } from 'react-icons/io';
+import Loading from "../components/Loading"
 
 function timeInputToInt(value) {
    if (!value) return null;
@@ -154,7 +155,7 @@ export default function TeamSettingsPage() {
    if (!team) {
       return (
          <main className="flex min-h-screen items-center justify-center bg-gradient-to-br from-slate-900 via-slate-800 to-blue-900 p-6">
-            <div className="rounded-3xl border border-white/10 bg-white/10 p-10 text-center shadow-2xl backdrop-blur-xl">
+            <div className="text-center p-10">
                <h1 className="mb-4 text-4xl font-bold text-white">Team not found</h1>
 
                <p className="mb-6 text-slate-300">No team exists with ID: {teamId}</p>
@@ -376,9 +377,7 @@ export default function TeamSettingsPage() {
 
    if (loadingTeams) {
       return (
-         <main className="flex min-h-screen items-center justify-center">
-            <p className="text-white">Loading team...</p>
-         </main>
+        <Loading />
       );
    }
 
@@ -394,8 +393,8 @@ export default function TeamSettingsPage() {
       <main className="flex min-h-screen items-center justify-center">
          <div className="relative z-10 w-full">
             <div className="p-10">
-               <div className="text-left">
-                  <h1 className="text-5xl font-bold text-white">{team.name}</h1>
+               <div className="text-center md:text-left">
+                  <h1 className="text-4xl sm:text-5xl font-bold text-white">{team.name}</h1>
 
                   <p className="mt-3 text-lg text-slate-300">
                      Manage users and pools assigned to this team.
diff --git a/frontend/app/globals.css b/frontend/app/globals.css
index c9c981a..ac3e7f9 100644
--- a/frontend/app/globals.css
+++ b/frontend/app/globals.css
@@ -84,3 +84,44 @@ body {
 .results-datepicker .react-datepicker__triangle {
    display: none;
 }
+@keyframes spinQuarterPause {
+   0% {
+      transform: rotate(0deg);
+   }
+
+   10% {
+      transform: rotate(90deg);
+   }
+
+   25% {
+      transform: rotate(90deg);
+   }
+
+   35% {
+      transform: rotate(180deg);
+   }
+
+   50% {
+      transform: rotate(180deg);
+   }
+
+   60% {
+      transform: rotate(270deg);
+   }
+
+   75% {
+      transform: rotate(270deg);
+   }
+
+   85% {
+      transform: rotate(360deg);
+   }
+
+   100% {
+      transform: rotate(360deg);
+   }
+}
+
+.animate-spin-quarter-pause {
+   animation: spinQuarterPause 6s ease-out infinite;
+}
\ No newline at end of file

From 4cbd8507e83a74b178f7dea56d26b6a7a08b0465 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Fri, 10 Jul 2026 08:47:44 +0000
Subject: [PATCH 3/3] chore: apply formatting

---
 frontend/app/animation/page.tsx               |  7 ++----
 frontend/app/components/ClusterSettings.jsx   |  6 ++---
 frontend/app/components/Form.jsx              | 10 +++-----
 frontend/app/components/Loading.jsx           | 23 ++++++++-----------
 frontend/app/components/Name.jsx              |  2 --
 frontend/app/components/Overview.jsx          |  6 ++---
 frontend/app/components/PersonalSchedule.jsx  |  6 ++---
 frontend/app/components/PoolSettingsPage.jsx  |  2 +-
 frontend/app/components/Results.jsx           |  4 +---
 frontend/app/components/Schedule.jsx          |  4 +---
 frontend/app/components/TeamsSettingsPage.jsx |  6 ++---
 frontend/app/globals.css                      |  2 +-
 12 files changed, 27 insertions(+), 51 deletions(-)

diff --git a/frontend/app/animation/page.tsx b/frontend/app/animation/page.tsx
index 31732b2..15a88fa 100644
--- a/frontend/app/animation/page.tsx
+++ b/frontend/app/animation/page.tsx
@@ -1,4 +1,4 @@
-import Loading from "../components/Loading"
+import Loading from '../components/Loading';
 
 export const metadata = {
    title: 'Cluster Options'
@@ -7,10 +7,7 @@ export const metadata = {
 export default async function AnimationPage() {
    return (
       <main>
-        <Loading>
-            
-        </Loading>
-         
+         <Loading></Loading>
       </main>
    );
 }
diff --git a/frontend/app/components/ClusterSettings.jsx b/frontend/app/components/ClusterSettings.jsx
index 985eb7b..833db7b 100644
--- a/frontend/app/components/ClusterSettings.jsx
+++ b/frontend/app/components/ClusterSettings.jsx
@@ -7,7 +7,7 @@ import { useState, useEffect, useMemo, useCallback } from 'react';
 import { useRouter, useSearchParams } from 'next/navigation';
 import { FaDatabase, FaUser } from 'react-icons/fa';
 import { IoIosArrowForward } from 'react-icons/io';
-import Loading from "../components/Loading.jsx"
+import Loading from '../components/Loading.jsx';
 
 export default function ClusterSettingsPage() {
    const searchParams = useSearchParams();
@@ -351,9 +351,7 @@ export default function ClusterSettingsPage() {
    }
 
    if (loadingClusters) {
-      return (
-         <Loading/>
-      );
+      return <Loading />;
    }
 
    return (
diff --git a/frontend/app/components/Form.jsx b/frontend/app/components/Form.jsx
index 0a994be..ded49db 100644
--- a/frontend/app/components/Form.jsx
+++ b/frontend/app/components/Form.jsx
@@ -5,7 +5,7 @@ import Cookies from 'js-cookie';
 import { useRouter } from 'next/navigation';
 import ReactMarkdown from 'react-markdown';
 import { FaClipboardList, FaRegCopy, FaCheck, FaLightbulb } from 'react-icons/fa';
-import Loading from "../components/Loading"
+import Loading from '../components/Loading';
 
 function getTodayTimeMs(value) {
    const numericValue = Number(value);
@@ -449,9 +449,7 @@ export default function Form() {
    }
 
    if (!clusterId || !nameID) {
-      return (
-        <Loading />
-      );
+      return <Loading />;
    }
 
    // DELETE METHOD
@@ -919,9 +917,7 @@ export default function Form() {
                                                 : 'text-red-300'
                                           }`}
                                        >
-                                          {hpcQuestionResult.correct
-                                             ? 'Correct'
-                                             : 'Not quite'}
+                                          {hpcQuestionResult.correct ? 'Correct' : 'Not quite'}
                                        </p>
 
                                        <p className="mt-2 text-sm text-slate-200">
diff --git a/frontend/app/components/Loading.jsx b/frontend/app/components/Loading.jsx
index c21bbeb..16a7aa7 100644
--- a/frontend/app/components/Loading.jsx
+++ b/frontend/app/components/Loading.jsx
@@ -1,17 +1,14 @@
 'use client';
 
-import { FaMicrochip } from "react-icons/fa6";
+import { FaMicrochip } from 'react-icons/fa6';
 
 export default function Loading() {
-
-
-    return (
-
-       <main className="flex items-center h-screen pb-30 justify-center">
-   <div className="flex flex-col items-center justify-center text-center">
-      <FaMicrochip className="h-25 w-25 text-slate-500 animate-spin-quarter-pause" />
-      <p className="p-2 text-lg text-slate-500">Loading ...</p>
-   </div>
-</main>
-    )
-}
\ No newline at end of file
+   return (
+      <main className="flex items-center h-screen pb-30 justify-center">
+         <div className="flex flex-col items-center justify-center text-center">
+            <FaMicrochip className="h-25 w-25 text-slate-500 animate-spin-quarter-pause" />
+            <p className="p-2 text-lg text-slate-500">Loading ...</p>
+         </div>
+      </main>
+   );
+}
diff --git a/frontend/app/components/Name.jsx b/frontend/app/components/Name.jsx
index 3e53f84..5b7fc20 100644
--- a/frontend/app/components/Name.jsx
+++ b/frontend/app/components/Name.jsx
@@ -73,8 +73,6 @@ export default function Name() {
             <div className="p-10">
                {/* Header */}
 
-              
-
                {!selectedTeamId ? (
                   <div key="select-team" className="animate-fade-up">
                      <div className="text-center">
diff --git a/frontend/app/components/Overview.jsx b/frontend/app/components/Overview.jsx
index d40e54b..0944ee1 100644
--- a/frontend/app/components/Overview.jsx
+++ b/frontend/app/components/Overview.jsx
@@ -3,7 +3,7 @@
 import { useState, useEffect } from 'react';
 import DatePicker from 'react-datepicker';
 import { FaCalendarAlt } from 'react-icons/fa';
-import Loading from "../components/Loading"
+import Loading from '../components/Loading';
 
 function dateToInputValue(date) {
    if (!date) return '';
@@ -88,9 +88,7 @@ export default function Overview() {
 
    // Show loading
    if (!reportLoaded) {
-      return (
-         <Loading />
-      );
+      return <Loading />;
    }
 
    // Page
diff --git a/frontend/app/components/PersonalSchedule.jsx b/frontend/app/components/PersonalSchedule.jsx
index 994e87d..12e4ec1 100644
--- a/frontend/app/components/PersonalSchedule.jsx
+++ b/frontend/app/components/PersonalSchedule.jsx
@@ -5,7 +5,7 @@ import { useRouter } from 'next/navigation';
 import Cookies from 'js-cookie';
 import { FaFolderOpen, FaInbox, FaUser } from 'react-icons/fa';
 import { IoIosArrowForward } from 'react-icons/io';
-import Loading from "../components/Loading"
+import Loading from '../components/Loading';
 
 const CHECK_START_BUFFER_MS = 20 * 60 * 1000;
 
@@ -192,9 +192,7 @@ export default function PersonalSchedule() {
    }, [router, userId]);
 
    if (loading) {
-      return (
-        <Loading/>
-      );
+      return <Loading />;
    }
 
    const handleClusterClick = (cluster) => {
diff --git a/frontend/app/components/PoolSettingsPage.jsx b/frontend/app/components/PoolSettingsPage.jsx
index 405035e..e9c03c7 100644
--- a/frontend/app/components/PoolSettingsPage.jsx
+++ b/frontend/app/components/PoolSettingsPage.jsx
@@ -119,7 +119,7 @@ export default function PoolClustersPage() {
    }
 
    if (loading) {
-      return <Loading/>;
+      return <Loading />;
    }
 
    if (!pool) {
diff --git a/frontend/app/components/Results.jsx b/frontend/app/components/Results.jsx
index b7d019c..f6d46a8 100644
--- a/frontend/app/components/Results.jsx
+++ b/frontend/app/components/Results.jsx
@@ -195,9 +195,7 @@ export default function ResultsPage() {
    }, [clusters, selectedClusterId]);
 
    if (!clustersLoaded) {
-      return (
-       <Loading />
-      );
+      return <Loading />;
    }
 
    return (
diff --git a/frontend/app/components/Schedule.jsx b/frontend/app/components/Schedule.jsx
index 02be08a..6fbf274 100644
--- a/frontend/app/components/Schedule.jsx
+++ b/frontend/app/components/Schedule.jsx
@@ -197,9 +197,7 @@ export default function Schedule() {
    }, [swapTarget]);
 
    if (loading || !schedule) {
-      return (
-        <Loading/>
-      );
+      return <Loading />;
    }
 
    return (
diff --git a/frontend/app/components/TeamsSettingsPage.jsx b/frontend/app/components/TeamsSettingsPage.jsx
index 4728379..1fe9ef6 100644
--- a/frontend/app/components/TeamsSettingsPage.jsx
+++ b/frontend/app/components/TeamsSettingsPage.jsx
@@ -6,7 +6,7 @@ import Link from 'next/link';
 import { Listbox, ListboxButton, ListboxOptions, ListboxOption } from '@headlessui/react';
 import { FaLayerGroup, FaUser, FaUsers } from 'react-icons/fa';
 import { IoIosSettings } from 'react-icons/io';
-import Loading from "../components/Loading"
+import Loading from '../components/Loading';
 
 function timeInputToInt(value) {
    if (!value) return null;
@@ -376,9 +376,7 @@ export default function TeamSettingsPage() {
    };
 
    if (loadingTeams) {
-      return (
-        <Loading />
-      );
+      return <Loading />;
    }
 
    if (!team) {
diff --git a/frontend/app/globals.css b/frontend/app/globals.css
index ac3e7f9..c256eec 100644
--- a/frontend/app/globals.css
+++ b/frontend/app/globals.css
@@ -124,4 +124,4 @@ body {
 
 .animate-spin-quarter-pause {
    animation: spinQuarterPause 6s ease-out infinite;
-}
\ No newline at end of file
+}