diff --git a/frontend/src/components/theme/LookAndFeelBluelib.tsx b/frontend/src/components/theme/LookAndFeelBluelib.tsx
index 96cd5d9..acab30b 100644
--- a/frontend/src/components/theme/LookAndFeelBluelib.tsx
+++ b/frontend/src/components/theme/LookAndFeelBluelib.tsx
@@ -1,6 +1,5 @@
 import * as React from "react"
-import {useContext} from "react";
-import {LookAndFeelContext} from "./LookAndFeel";
+import {useLookAndFeel} from "./LookAndFeel";
 import {Bluelib} from "@steffo/bluelib-react";
 
 
@@ -10,7 +9,7 @@ interface LookAndFeelBluelibProps {
 
 
 export function LookAndFeelBluelib({children}: LookAndFeelBluelibProps): JSX.Element {
-    const lookAndFeel = useContext(LookAndFeelContext)
+    const lookAndFeel = useLookAndFeel()
 
     return (
         <Bluelib theme={lookAndFeel.bluelibTheme}>
diff --git a/frontend/src/components/theme/LookAndFeelHeading.tsx b/frontend/src/components/theme/LookAndFeelHeading.tsx
index 1e96899..e7de503 100644
--- a/frontend/src/components/theme/LookAndFeelHeading.tsx
+++ b/frontend/src/components/theme/LookAndFeelHeading.tsx
@@ -1,8 +1,7 @@
 import * as React from "react"
 import {HeadingProps} from "@steffo/bluelib-react/dist/components/common/Heading";
 import {Heading} from "@steffo/bluelib-react";
-import {useContext} from "react";
-import {LookAndFeelContext} from "./LookAndFeel";
+import {useLookAndFeel} from "./LookAndFeel";
 
 
 interface LookAndFeelHeadingProps extends HeadingProps {
@@ -11,7 +10,7 @@ interface LookAndFeelHeadingProps extends HeadingProps {
 
 
 export function LookAndFeelHeading({...props}: LookAndFeelHeadingProps): JSX.Element {
-    const lookAndFeel = useContext(LookAndFeelContext)
+    const lookAndFeel = useLookAndFeel()
 
     return (
         <Heading {...props}>
diff --git a/frontend/src/components/theme/LookAndFeelPageTitle.tsx b/frontend/src/components/theme/LookAndFeelPageTitle.tsx
index df39ea5..0ec2462 100644
--- a/frontend/src/components/theme/LookAndFeelPageTitle.tsx
+++ b/frontend/src/components/theme/LookAndFeelPageTitle.tsx
@@ -1,11 +1,9 @@
 import * as React from "react"
-import * as ReactDOM from "react-dom"
-import {useContext} from "react";
-import {LookAndFeelContext} from "./LookAndFeel";
+import {useLookAndFeel} from "./LookAndFeel";
 
 
 export function LookAndFeelPageTitle(): null {
-    const lookAndFeel = useContext(LookAndFeelContext)
+    const lookAndFeel = useLookAndFeel()
 
     React.useEffect(
         () => {
diff --git a/frontend/src/components/theme/SophonFooter.tsx b/frontend/src/components/theme/SophonFooter.tsx
index 8b4bd62..81c3c80 100644
--- a/frontend/src/components/theme/SophonFooter.tsx
+++ b/frontend/src/components/theme/SophonFooter.tsx
@@ -1,7 +1,6 @@
 import * as React from "react"
-import {useContext} from "react"
 import {Anchor, Footer} from "@steffo/bluelib-react";
-import {LookAndFeelContext} from "./LookAndFeel";
+import {useLookAndFeel} from "./LookAndFeel";
 
 
 const FOOTER_COLORS = {
@@ -17,7 +16,7 @@ const LICENSE_URL = "https://github.com/Steffo99/sophon/blob/main/LICENSE.txt"
 
 
 export function SophonFooter(): JSX.Element {
-    const lookAndFeel = useContext(LookAndFeelContext)
+    const lookAndFeel = useLookAndFeel()
 
     const frontendVersion = process.env.REACT_APP_VERSION
     const backendVersion = lookAndFeel.backendVersion