diff --git a/backend/common/src/helper.py b/backend/common/src/helper.py
index 5f001f8d..d2ec8538 100644
--- a/backend/common/src/helper.py
+++ b/backend/common/src/helper.py
@@ -231,7 +231,7 @@ def ta_host_parser(ta_host: str) -> tuple[list[str], list[str]]:
 def get_stylesheets() -> list:
     """Get all valid stylesheets from /static/css"""
 
-    stylesheets = ["dark.css", "light.css", "matrix.css", "midnight.css"]
+    stylesheets = ["dark.css", "light.css", "matrix.css", "midnight.css", "custom.css"]
     return stylesheets
 
 
diff --git a/frontend/src/configuration/colours/components/css/dark.css b/frontend/public/css/custom.css
similarity index 100%
rename from frontend/src/configuration/colours/components/css/dark.css
rename to frontend/public/css/custom.css
diff --git a/frontend/public/css/dark.css b/frontend/public/css/dark.css
new file mode 100644
index 00000000..1ac16ca6
--- /dev/null
+++ b/frontend/public/css/dark.css
@@ -0,0 +1,16 @@
+:root {
+  --main-bg: #00202f;
+  --highlight-bg: #00293b;
+  --highlight-error: #990202;
+  --highlight-error-light: #c44343;
+  --highlight-bg-transparent: #00293baf;
+  --main-font: #eeeeee;
+  --accent-font-dark: #259485;
+  --accent-font-light: #97d4c8;
+  --img-filter: invert(50%) sepia(9%) saturate(2940%) hue-rotate(122deg) brightness(94%)
+    contrast(90%);
+  --img-filter-error: invert(16%) sepia(60%) saturate(3717%) hue-rotate(349deg) brightness(86%)
+    contrast(120%);
+  --banner: url('/img/banner-tube-archivist-dark.png');
+  --logo: url('/img/logo-tube-archivist-dark.png');
+}
diff --git a/frontend/src/configuration/colours/components/css/light.css b/frontend/public/css/light.css
similarity index 100%
rename from frontend/src/configuration/colours/components/css/light.css
rename to frontend/public/css/light.css
diff --git a/frontend/src/configuration/colours/components/css/matrix.css b/frontend/public/css/matrix.css
similarity index 100%
rename from frontend/src/configuration/colours/components/css/matrix.css
rename to frontend/public/css/matrix.css
diff --git a/frontend/src/configuration/colours/components/css/midnight.css b/frontend/public/css/midnight.css
similarity index 100%
rename from frontend/src/configuration/colours/components/css/midnight.css
rename to frontend/public/css/midnight.css
diff --git a/frontend/src/api/actions/updateUserConfig.ts b/frontend/src/api/actions/updateUserConfig.ts
index 06eeddab..84c5ce3d 100644
--- a/frontend/src/api/actions/updateUserConfig.ts
+++ b/frontend/src/api/actions/updateUserConfig.ts
@@ -1,7 +1,12 @@
 import { SortByType, SortOrderType, ViewLayoutType } from '../../pages/Home';
 import APIClient from '../../functions/APIClient';
 
-export type ColourVariants = 'dark.css' | 'light.css' | 'matrix.css' | 'midnight.css';
+export type ColourVariants =
+  | 'dark.css'
+  | 'light.css'
+  | 'matrix.css'
+  | 'midnight.css'
+  | 'custom.css';
 
 export const FileSizeUnits = {
   Binary: 'binary',
diff --git a/frontend/src/configuration/colours/Colours.tsx b/frontend/src/configuration/colours/Colours.tsx
new file mode 100644
index 00000000..c4654f32
--- /dev/null
+++ b/frontend/src/configuration/colours/Colours.tsx
@@ -0,0 +1,34 @@
+import { useUserConfigStore } from '../../stores/UserConfigStore';
+import { ColourConstant } from './colourConstant';
+import CustomStylesheet from './components/Custom';
+import DarkStylesheet from './components/Dark';
+import LightStylesheet from './components/Light';
+import MatrixStylesheet from './components/Matrix';
+import MidnightStylesheet from './components/Midnight';
+
+const Colours = () => {
+  const { userConfig } = useUserConfigStore();
+  const stylesheet = userConfig?.stylesheet;
+
+  switch (stylesheet) {
+    case ColourConstant.Dark:
+      return <DarkStylesheet />;
+
+    case ColourConstant.Matrix:
+      return <MatrixStylesheet />;
+
+    case ColourConstant.Midnight:
+      return <MidnightStylesheet />;
+
+    case ColourConstant.Light:
+      return <LightStylesheet />;
+
+    case ColourConstant.Custom:
+      return <CustomStylesheet />;
+
+    default:
+      return <DarkStylesheet />;
+  }
+};
+
+export default Colours;
diff --git a/frontend/src/configuration/colours/colourConstant.ts b/frontend/src/configuration/colours/colourConstant.ts
new file mode 100644
index 00000000..b910fe9a
--- /dev/null
+++ b/frontend/src/configuration/colours/colourConstant.ts
@@ -0,0 +1,7 @@
+export const ColourConstant = {
+  Dark: 'dark.css',
+  Light: 'light.css',
+  Matrix: 'matrix.css',
+  Midnight: 'midnight.css',
+  Custom: 'custom.css',
+};
diff --git a/frontend/src/configuration/colours/components/Custom.tsx b/frontend/src/configuration/colours/components/Custom.tsx
new file mode 100644
index 00000000..d89533ce
--- /dev/null
+++ b/frontend/src/configuration/colours/components/Custom.tsx
@@ -0,0 +1,9 @@
+const CustomStylesheet = () => {
+  return (
+    <head>
+      <link rel="stylesheet" href="/css/custom.css" />
+    </head>
+  );
+};
+
+export default CustomStylesheet;
diff --git a/frontend/src/configuration/colours/components/Dark.tsx b/frontend/src/configuration/colours/components/Dark.tsx
index 126f0f7d..778d194a 100644
--- a/frontend/src/configuration/colours/components/Dark.tsx
+++ b/frontend/src/configuration/colours/components/Dark.tsx
@@ -1,7 +1,9 @@
-import './css/dark.css';
-
 const DarkStylesheet = () => {
-  return <></>;
+  return (
+    <head>
+      <link rel="stylesheet" href="/css/dark.css" />
+    </head>
+  );
 };
 
 export default DarkStylesheet;
diff --git a/frontend/src/configuration/colours/components/Light.tsx b/frontend/src/configuration/colours/components/Light.tsx
index cdbeeda2..a9e3a6dd 100644
--- a/frontend/src/configuration/colours/components/Light.tsx
+++ b/frontend/src/configuration/colours/components/Light.tsx
@@ -1,7 +1,9 @@
-import './css/light.css';
-
 const LightStylesheet = () => {
-  return <></>;
+  return (
+    <head>
+      <link rel="stylesheet" href="/css/light.css" />
+    </head>
+  );
 };
 
 export default LightStylesheet;
diff --git a/frontend/src/configuration/colours/components/Matrix.tsx b/frontend/src/configuration/colours/components/Matrix.tsx
index 50db1d95..4625b7a2 100644
--- a/frontend/src/configuration/colours/components/Matrix.tsx
+++ b/frontend/src/configuration/colours/components/Matrix.tsx
@@ -1,7 +1,9 @@
-import './css/matrix.css';
-
 const MatrixStylesheet = () => {
-  return <></>;
+  return (
+    <head>
+      <link rel="stylesheet" href="/css/matrix.css" />
+    </head>
+  );
 };
 
 export default MatrixStylesheet;
diff --git a/frontend/src/configuration/colours/components/Midnight.tsx b/frontend/src/configuration/colours/components/Midnight.tsx
index cf777736..672eb00f 100644
--- a/frontend/src/configuration/colours/components/Midnight.tsx
+++ b/frontend/src/configuration/colours/components/Midnight.tsx
@@ -1,7 +1,9 @@
-import './css/midnight.css';
-
 const MidnightStylesheet = () => {
-  return <></>;
+  return (
+    <head>
+      <link rel="stylesheet" href="/css/midnight.css" />
+    </head>
+  );
 };
 
 export default MidnightStylesheet;
diff --git a/frontend/src/configuration/colours/useColours.ts b/frontend/src/configuration/colours/useColours.ts
deleted file mode 100644
index 0c2a131d..00000000
--- a/frontend/src/configuration/colours/useColours.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { useUserConfigStore } from '../../stores/UserConfigStore';
-
-export const ColourConstant = {
-  Dark: 'dark.css',
-  Light: 'light.css',
-  Matrix: 'matrix.css',
-  Midnight: 'midnight.css',
-};
-
-const useColours = () => {
-  const { userConfig } = useUserConfigStore();
-  const stylesheet = userConfig?.stylesheet;
-
-  switch (stylesheet) {
-    case ColourConstant.Dark:
-      return import('./components/Dark');
-
-    case ColourConstant.Matrix:
-      return import('./components/Matrix');
-
-    case ColourConstant.Midnight:
-      return import('./components/Midnight');
-
-    case ColourConstant.Light:
-      return import('./components/Light');
-
-    default:
-      return import('./components/Dark');
-  }
-};
-
-export default useColours;
diff --git a/frontend/src/pages/Base.tsx b/frontend/src/pages/Base.tsx
index 6a3d959b..5c46fb68 100644
--- a/frontend/src/pages/Base.tsx
+++ b/frontend/src/pages/Base.tsx
@@ -1,6 +1,6 @@
 import { Outlet, useLoaderData, useLocation, useSearchParams } from 'react-router-dom';
 import Footer from '../components/Footer';
-import useColours from '../configuration/colours/useColours';
+import Colours from '../configuration/colours/Colours';
 import { UserConfigType } from '../api/actions/updateUserConfig';
 import { useEffect, useState } from 'react';
 import Navigation from '../components/Navigation';
@@ -94,10 +94,9 @@ const Base = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [currentPage]);
 
-  useColours();
-
   return (
     <>
+      <Colours />
       <div className="main-content">
         <Navigation />
         {/** Outlet: https://reactrouter.com/en/main/components/outlet */}
diff --git a/frontend/src/pages/ErrorPage.tsx b/frontend/src/pages/ErrorPage.tsx
index fb4e6481..d1dac58a 100644
--- a/frontend/src/pages/ErrorPage.tsx
+++ b/frontend/src/pages/ErrorPage.tsx
@@ -1,5 +1,5 @@
 import { useRouteError } from 'react-router-dom';
-import useColours from '../configuration/colours/useColours';
+import Colours from '../configuration/colours/Colours';
 
 // This is not always the correct response
 type ErrorType = {
@@ -9,13 +9,13 @@ type ErrorType = {
 
 const ErrorPage = () => {
   const error = useRouteError() as ErrorType;
-  useColours();
 
   console.error('ErrorPage', error);
 
   return (
     <>
       <title>TA | Oops!</title>
+      <Colours />
 
       <div id="error-page" style={{ margin: '10%' }}>
         <h1>Oops!</h1>
diff --git a/frontend/src/pages/Login.tsx b/frontend/src/pages/Login.tsx
index bc2aa60b..da8a0385 100644
--- a/frontend/src/pages/Login.tsx
+++ b/frontend/src/pages/Login.tsx
@@ -1,14 +1,12 @@
 import { useEffect, useState } from 'react';
 import Routes from '../configuration/routes/RouteList';
 import { useNavigate } from 'react-router-dom';
-import useColours from '../configuration/colours/useColours';
+import Colours from '../configuration/colours/Colours';
 import Button from '../components/Button';
 import signIn from '../api/actions/signIn';
 import loadAuth from '../api/loader/loadAuth';
 
 const Login = () => {
-  useColours();
-
   const navigate = useNavigate();
 
   const [username, setUsername] = useState('');
@@ -76,6 +74,7 @@ const Login = () => {
   return (
     <>
       <title>TA | Welcome</title>
+      <Colours />
       <div className="boxed-content login-page">
         <img alt="tube-archivist-logo" />
         <h1>Tube Archivist</h1>
diff --git a/frontend/src/pages/NotFound.tsx b/frontend/src/pages/NotFound.tsx
index 46dfb7a7..ea681f80 100644
--- a/frontend/src/pages/NotFound.tsx
+++ b/frontend/src/pages/NotFound.tsx
@@ -1,13 +1,12 @@
 import { Link } from 'react-router-dom';
-import useColours from '../configuration/colours/useColours';
+import Colours from '../configuration/colours/Colours';
 import Routes from '../configuration/routes/RouteList';
 
 const NotFound = ({ failType = 'page' }) => {
-  useColours();
-
   return (
     <>
       <title>404 | Not found</title>
+      <Colours />
       <div id="error-page" style={{ margin: '10%' }}>
         <h1>Oops!</h1>
         <p>
diff --git a/frontend/src/pages/SettingsUser.tsx b/frontend/src/pages/SettingsUser.tsx
index da46c26c..b822eb05 100644
--- a/frontend/src/pages/SettingsUser.tsx
+++ b/frontend/src/pages/SettingsUser.tsx
@@ -1,10 +1,8 @@
-import { useNavigate } from 'react-router-dom';
 import updateUserConfig, {
   ColourVariants,
   FileSizeUnits,
   UserConfigType,
 } from '../api/actions/updateUserConfig';
-import { ColourConstant } from '../configuration/colours/useColours';
 import SettingsNavigation from '../components/SettingsNavigation';
 import Notifications from '../components/Notifications';
 import Button from '../components/Button';
@@ -12,14 +10,13 @@ import useIsAdmin from '../functions/useIsAdmin';
 import { useUserConfigStore } from '../stores/UserConfigStore';
 import { useEffect, useState } from 'react';
 import ToggleConfig from '../components/ToggleConfig';
+import { ColourConstant } from '../configuration/colours/colourConstant';
 
 const SettingsUser = () => {
   const { userConfig, setUserConfig } = useUserConfigStore();
   const isAdmin = useIsAdmin();
-  const navigate = useNavigate();
 
   const [styleSheet, setStyleSheet] = useState<ColourVariants>(userConfig.stylesheet);
-  const [styleSheetRefresh, setStyleSheetRefresh] = useState(false);
   const [pageSize, setPageSize] = useState<number>(userConfig.page_size);
   const [showHelpText, setShowHelpText] = useState(userConfig.show_help_text);
   const [selectedFileSizeUnit, setSelectedFileSizeUnit] = useState(FileSizeUnits.Binary);
@@ -41,7 +38,6 @@ const SettingsUser = () => {
   const handleStyleSheetChange = async (selectedStyleSheet: ColourVariants) => {
     handleUserConfigUpdate({ stylesheet: selectedStyleSheet });
     setStyleSheet(selectedStyleSheet);
-    setStyleSheetRefresh(true);
   };
 
   const handlePageSizeChange = async () => {
@@ -65,11 +61,6 @@ const SettingsUser = () => {
     }
   };
 
-  const handlePageRefresh = () => {
-    navigate(0);
-    setStyleSheetRefresh(false);
-  };
-
   return (
     <>
       <title>TA | User Settings</title>
@@ -104,7 +95,6 @@ const SettingsUser = () => {
                     );
                   })}
                 </select>
-                {styleSheetRefresh && <button onClick={handlePageRefresh}>Refresh</button>}
               </div>
             </div>