diff --git a/src/lib/services/models/course-utils.ts b/src/lib/services/models/course-utils.ts
index f32a58c9..823805f3 100644
--- a/src/lib/services/models/course-utils.ts
+++ b/src/lib/services/models/course-utils.ts
@@ -1,4 +1,4 @@
-import { addIcon } from "$lib/ui/themes/theme-controller.svelte";
+import { themeService } from "$lib/ui/themes/theme-controller.svelte";
 import type { Composite, Course, IconNav, Lo, LoType, Topic } from "./lo-types";
 import { filterByType, setShowHide } from "./lo-utils";
 
@@ -51,7 +51,7 @@ export function createCompanions(course: Course) {
   if (course.properties.companions) {
     for (const [key, value] of Object.entries(course.properties.companions)) {
       const companion: any = value;
-      addIcon(key, companion.icon);
+      themeService.addIcon(key, companion.icon);
       course.companions.bar.push({
         link: companion.link,
         type: key,
diff --git a/src/lib/services/models/lo-types.ts b/src/lib/services/models/lo-types.ts
index e3cce801..8ec8b9b1 100644
--- a/src/lib/services/models/lo-types.ts
+++ b/src/lib/services/models/lo-types.ts
@@ -54,6 +54,13 @@ export type IconNavBar = {
   bar: IconNav[];
 };
 
+export type IconLib = Record<string, IconType>;
+
+export type Theme = {
+  name: string;
+  icons: IconLib;
+};
+
 export interface LearningRecord {
   date: Date;
   pageLoads: number;
diff --git a/src/lib/ui/components/Card.svelte b/src/lib/ui/components/Card.svelte
index aa069656..28054a6d 100644
--- a/src/lib/ui/components/Card.svelte
+++ b/src/lib/ui/components/Card.svelte
@@ -12,9 +12,9 @@
     textSize
   } from "$lib/runes";
 
-  import { getTypeColour } from "../themes/theme-controller.svelte";
   import type { CardDetails } from "$lib/services/types.svelte";
   import Icon from "$lib/ui/components/Icon.svelte";
+  import { themeService } from "../themes/theme-controller.svelte";
 
   let { cardDetails } = $props<{ cardDetails: CardDetails }>();
   let target = $state("");
@@ -104,8 +104,8 @@
 
 <a href={cardDetails.route} {target}>
   <div
-    class="card preset-filled-{getTypeColour(cardDetails.type)}-100-900 border-[1px]
-    border-y-8 border-{getTypeColour(
+    class="card preset-filled-{themeService.getTypeColour(cardDetails.type)}-100-900 border-[1px]
+    border-y-8 border-{themeService.getTypeColour(
       cardDetails.type
     )}-500 m-2 {cardWidths.value} transition-all hover:scale-105 {cardHeight.value}
     flex flex-col"
diff --git a/src/lib/ui/components/Icon.svelte b/src/lib/ui/components/Icon.svelte
index 033f93ca..5ba33147 100644
--- a/src/lib/ui/components/Icon.svelte
+++ b/src/lib/ui/components/Icon.svelte
@@ -2,7 +2,7 @@
   import Icon from "@iconify/svelte";
 
   import { Tooltip } from "@skeletonlabs/skeleton-svelte";
-  import { getIcon } from "../themes/theme-controller.svelte";
+  import { themeService } from "../themes/theme-controller.svelte";
 
   interface Props {
     type?: string;
@@ -51,11 +51,21 @@
   {#if type}
     {#if link}
       <a class="btn btn-sm" {target} href={link}>
-        <Icon icon={getIcon(type).type} color={legacyIconColour(getIcon(type).color)} {width} {height} />
+        <Icon
+          icon={themeService.getIcon(type).type}
+          color={legacyIconColour(themeService.getIcon(type).color)}
+          {width}
+          {height}
+        />
         {text}
       </a>
     {:else}
-      <Icon icon={getIcon(type).type} color={legacyIconColour(getIcon(type).color)} {width} {height} />
+      <Icon
+        icon={themeService.getIcon(type).type}
+        color={legacyIconColour(themeService.getIcon(type).color)}
+        {width}
+        {height}
+      />
     {/if}
   {:else if link}
     <a {target} href={link}>
diff --git a/src/lib/ui/learning-objects/content/Video.svelte b/src/lib/ui/learning-objects/content/Video.svelte
index 2b8c8e5e..c52fa1b3 100644
--- a/src/lib/ui/learning-objects/content/Video.svelte
+++ b/src/lib/ui/learning-objects/content/Video.svelte
@@ -2,7 +2,7 @@
   import { onMount } from "svelte";
   import type { Lo } from "$lib/services/models/lo-types";
   import { currentCourse } from "$lib/runes";
-  import { getIcon } from "../../themes/theme-controller.svelte";
+  import { themeService } from "$lib/ui/themes/theme-controller.svelte";
 
   let firefox = $state(false);
 
@@ -33,7 +33,7 @@
   });
 
   if (lo && lo.type === "panelvideo") {
-    lo.icon = { type: getIcon("video").type, color: getIcon("video").color };
+    lo.icon = { type: themeService.getIcon("video").type, color: themeService.getIcon("video").color };
   }
 
   if (lo.videoids) {
diff --git a/src/lib/ui/themes/LayoutMenu.svelte b/src/lib/ui/themes/LayoutMenu.svelte
index a041d6d0..b7720799 100644
--- a/src/lib/ui/themes/LayoutMenu.svelte
+++ b/src/lib/ui/themes/LayoutMenu.svelte
@@ -1,20 +1,20 @@
 <script lang="ts">
-  import { setDisplayMode, setTheme, themes } from "./theme-controller.svelte";
   import { currentTheme, lightMode } from "$lib/runes";
   import Menu from "$lib/ui/components/Menu.svelte";
   import { layout } from "$lib/runes";
   import MenuItem from "$lib/ui/components/MenuItem.svelte";
   import Icon from "../components/Icon.svelte";
+  import { themeService } from "./theme-controller.svelte";
 
   function changeTheme(theme: string): void {
-    setTheme(theme);
+    themeService.setTheme(theme);
   }
 
   function toggleDisplayMode(): void {
     if (lightMode.value === "dark") {
-      setDisplayMode("light");
+      themeService.setDisplayMode("light");
     } else {
-      setDisplayMode("dark");
+      themeService.setDisplayMode("dark");
     }
   }
 
@@ -44,7 +44,7 @@
   <hr />
   <h6>Themes</h6>
   <ul class="list">
-    {#each themes as theme}
+    {#each themeService.themes as theme}
       <MenuItem
         type="lightMode"
         isActive={currentTheme.value === theme.name}
diff --git a/src/lib/ui/themes/icons/festive-icons.ts b/src/lib/ui/themes/icons/festive-icons.ts
index 8ed3fc35..549483e9 100644
--- a/src/lib/ui/themes/icons/festive-icons.ts
+++ b/src/lib/ui/themes/icons/festive-icons.ts
@@ -1,4 +1,6 @@
-export const FestiveIcons = {
+import type { IconLib } from "$lib/services/models/lo-types";
+
+export const FestiveIcons: IconLib = {
   // Home Icon
   programHome: { type: "tabler:christmas-ball", color: "success" },
 
diff --git a/src/lib/ui/themes/icons/fluent-icons.ts b/src/lib/ui/themes/icons/fluent-icons.ts
index 69fd0e81..6ba96630 100644
--- a/src/lib/ui/themes/icons/fluent-icons.ts
+++ b/src/lib/ui/themes/icons/fluent-icons.ts
@@ -1,4 +1,6 @@
-export const FluentIconLib = {
+import type { IconLib } from "$lib/services/models/lo-types";
+
+export const FluentIconLib: IconLib = {
   // Home Icon
   programHome: { type: "fluent:home-24-filled", color: "success" },
 
diff --git a/src/lib/ui/themes/icons/halloween-icons.ts b/src/lib/ui/themes/icons/halloween-icons.ts
index 074cf173..a0344a67 100644
--- a/src/lib/ui/themes/icons/halloween-icons.ts
+++ b/src/lib/ui/themes/icons/halloween-icons.ts
@@ -1,4 +1,6 @@
-export const HalloweenIconLib = {
+import type { IconLib } from "$lib/services/models/lo-types";
+
+export const HalloweenIconLib: IconLib = {
   // Home type
   programHome: { type: "cib:nodemon", color: "warning" },
 
diff --git a/src/lib/ui/themes/icons/hero-icons.ts b/src/lib/ui/themes/icons/hero-icons.ts
index ab4f1041..52eff59c 100644
--- a/src/lib/ui/themes/icons/hero-icons.ts
+++ b/src/lib/ui/themes/icons/hero-icons.ts
@@ -1,4 +1,6 @@
-export const HeroIconLib = {
+import type { IconLib } from "$lib/services/models/lo-types";
+
+export const HeroIconLib: IconLib = {
   // Home Icon
   programHome: { type: "heroicons-outline:home", color: "success" },
 
diff --git a/src/lib/ui/themes/theme-controller.svelte.ts b/src/lib/ui/themes/theme-controller.svelte.ts
index a41a3f1a..981a6a44 100644
--- a/src/lib/ui/themes/theme-controller.svelte.ts
+++ b/src/lib/ui/themes/theme-controller.svelte.ts
@@ -1,79 +1,90 @@
 import { currentTheme, lightMode } from "$lib/runes";
-import type { IconType } from "$lib/services/models/lo-types";
+import type { IconType, Theme } from "$lib/services/models/lo-types";
 import { FluentIconLib } from "./icons/fluent-icons";
 import { HeroIconLib } from "./icons/hero-icons";
 import { FestiveIcons } from "./icons/festive-icons";
 import { makeItSnow, makeItStopSnowing } from "./events/festive.svelte";
 
-export const themes = [
-  { name: "tutors", icons: FluentIconLib },
-  { name: "classic", icons: FluentIconLib },
-  { name: "dyslexia", icons: FluentIconLib },
-  { name: "festive", icons: FestiveIcons },
-  { name: "nouveau", icons: FluentIconLib },
-  { name: "rose", icons: FluentIconLib },
-  { name: "cerberus", icons: FluentIconLib }
-];
+export const themeService = {
+  themes: [
+    { name: "tutors", icons: FluentIconLib },
+    { name: "classic", icons: FluentIconLib },
+    { name: "dyslexia", icons: FluentIconLib },
+    { name: "festive", icons: FestiveIcons },
+    { name: "nouveau", icons: FluentIconLib },
+    { name: "rose", icons: FluentIconLib },
+    { name: "cerberus", icons: FluentIconLib }
+  ] as Theme[],
 
-export function initDisplay(): void {
-  if (localStorage.modeCurrent) {
-    lightMode.value = localStorage.modeCurrent;
-  } else {
-    lightMode.value = "light";
-  }
-  setDisplayMode(localStorage.modeCurrent);
-  setTheme(localStorage.theme);
-}
+  isSnowing: false,
 
-export function setDisplayMode(mode: string): void {
-  lightMode.value = mode;
-  localStorage.modeCurrent = mode;
-  if (mode === "dark") {
-    document.body.classList.add("dark");
-  } else {
-    document.body.classList.remove("dark");
-  }
-}
+  initDisplay(): void {
+    if (localStorage.modeCurrent) {
+      lightMode.value = localStorage.modeCurrent;
+    } else {
+      lightMode.value = "light";
+    }
+    this.setDisplayMode(localStorage.modeCurrent);
+    this.setTheme(localStorage.theme);
+  },
 
-export function setTheme(theme: string): void {
-  if (!theme) {
-    theme = "tutors";
-  }
-  if (themes.find((theme) => theme.name === currentTheme.value)) {
-    currentTheme.value = theme;
-  } else {
-    currentTheme.value = "tutors";
-  }
-  document.body.setAttribute("data-theme", currentTheme.value);
-  localStorage.theme = currentTheme.value;
+  setDisplayMode(mode: string): void {
+    lightMode.value = mode;
+    localStorage.modeCurrent = mode;
+    if (mode === "dark") {
+      document.body.classList.add("dark");
+    } else {
+      document.body.classList.remove("dark");
+    }
+  },
 
-  if (currentTheme.value === "festive") {
-    makeItSnow();
-  } else {
-    makeItStopSnowing();
-  }
-}
+  setTheme(theme: string): void {
+    if (!theme) {
+      theme = "tutors";
+    }
+    if (themeService.themes.find((theme) => theme.name === currentTheme.value)) {
+      currentTheme.value = theme;
+    } else {
+      currentTheme.value = "tutors";
+    }
+    document.body.setAttribute("data-theme", currentTheme.value);
+    localStorage.theme = currentTheme.value;
+    this.eventTrigger();
+  },
 
-export function getIcon(type: string): IconType {
-  const iconLib = themes.find((theme) => theme.name === currentTheme.value)?.icons;
-  if (iconLib && iconLib[type]) {
-    return iconLib[type];
-  } else {
-    console.log("No type found for icon", type);
-    return FluentIconLib.tutors;
-  }
-}
+  getIcon(type: string): IconType {
+    const iconLib = themeService.themes.find((theme) => theme.name === currentTheme.value)?.icons;
+    if (iconLib && iconLib[type]) {
+      return iconLib[type];
+    } else {
+      console.log("No type found for icon", type);
+      return FluentIconLib.tutors;
+    }
+  },
+
+  addIcon(type: string, icon: IconType) {
+    FluentIconLib[type] = icon;
+    HeroIconLib[type] = icon;
+    FestiveIcons[type] = icon;
+  },
 
-export function addIcon(type: string, icon: IconType) {
-  FluentIconLib[type] = icon;
-  HeroIconLib[type] = icon;
-  FestiveIcons[type] = icon;
-}
+  getTypeColour(type: string): string {
+    const iconLib = themeService.themes.find((theme) => theme.name === currentTheme.value)?.icons;
+    if (iconLib && iconLib[type]) {
+      return iconLib[type].color;
+    }
+    return "primary";
+  },
 
-export function getTypeColour(type: string): string {
-  const iconLib = themes.find((theme) => theme.name === currentTheme.value)?.icons;
-  if (iconLib && iconLib[type]) {
-    return iconLib[type].color;
+  eventTrigger(): void {
+    if (currentTheme.value === "festive") {
+      makeItSnow();
+      this.isSnowing = true;
+    } else {
+      if (this.isSnowing) {
+        this.isSnowing = false;
+        makeItStopSnowing();
+      }
+    }
   }
-  return "primary";
-}
+};
diff --git a/src/routes/(auth)/auth/SigninWithGithub.svelte b/src/routes/(auth)/auth/SigninWithGithub.svelte
index 7703da8b..b283aa12 100644
--- a/src/routes/(auth)/auth/SigninWithGithub.svelte
+++ b/src/routes/(auth)/auth/SigninWithGithub.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-  import { getIcon } from "$lib/ui/themes/theme-controller.svelte";
   import Icon from "@iconify/svelte";
   import { Progress } from "@skeletonlabs/skeleton-svelte";
   import { tutorsConnectService } from "$lib/services/connect.svelte";
   import TutorsTerms from "./TutorsTerms.svelte";
+  import { themeService } from "$lib/ui/themes/theme-controller.svelte";
 
   let showProgress = $state(false);
   interface Props {
@@ -20,7 +20,10 @@
 
 <div class="bg-surface-100-800 mx-auto mb-2 place-items-center overflow-hidden rounded-xl p-4">
   <div class="flex flex-wrap justify-center">
-    <div class="card w-4/5 border-y-8 !bg-surface-50 dark:!bg-surface-700 border-{getIcon('note').color}-500 m-2">
+    <div
+      class="card w-4/5 border-y-8 !bg-surface-50 dark:!bg-surface-700 border-{themeService.getIcon('note')
+        .color}-500 m-2"
+    >
       <header class="card-header flex flex-row items-center justify-between p-3">
         <div class="flex-auto text-center !text-black dark:!text-white">Tutors Sign In</div>
       </header>
@@ -45,7 +48,10 @@
         {/if}
       </footer>
     </div>
-    <div class="card w-4/5 border-y-8 !bg-surface-50 dark:!bg-surface-700 border-{getIcon('topic').color}-500 m-2">
+    <div
+      class="card w-4/5 border-y-8 !bg-surface-50 dark:!bg-surface-700 border-{themeService.getIcon('topic')
+        .color}-500 m-2"
+    >
       <footer class="card-footer mt-4">
         <article class="prose mx-auto w-[80%] max-w-none dark:prose-invert">
           <TutorsTerms />
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 31c2e0d5..bc99eb87 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -4,7 +4,7 @@
   import type { PageData } from "./$types";
   import { onMount } from "svelte";
   import { browser } from "$app/environment";
-  import { initDisplay, setTheme } from "$lib/ui/themes/theme-controller.svelte";
+  import { themeService } from "$lib/ui/themes/theme-controller.svelte";
 
   interface Props {
     data: PageData;
@@ -18,7 +18,7 @@
 
   onMount(async () => {
     if (browser) {
-      initDisplay();
+      themeService.initDisplay();
     }
   });
 </script>