diff --git a/frontend/src/components/CourseCard.vue b/frontend/src/components/CourseCard.vue
index 0e63c036..0c7d6b2d 100644
--- a/frontend/src/components/CourseCard.vue
+++ b/frontend/src/components/CourseCard.vue
@@ -1,7 +1,7 @@
 <template>
 	<div
 		v-if="course.title"
-		class="flex flex-col h-full rounded-md overflow-auto text-ink-gray-9"
+		class="flex flex-col h-full rounded-md overflow-auto text-ink-gray-9 bg-surface-cards"
 		style="min-height: 350px"
 	>
 		<div
@@ -10,7 +10,7 @@
 				course.image
 					? { backgroundImage: `url('${encodeURI(course.image)}')` }
 					: {
-							backgroundImage: getGradientColor(),
+							backgroundImage: gradientColor,
 							backgroundBlendMode: 'screen',
 					  }
 			"
@@ -137,6 +137,8 @@ import { Award, BookOpen, GraduationCap, Star, Users } from 'lucide-vue-next'
 import { sessionStore } from '@/stores/session'
 import { Tooltip } from 'frappe-ui'
 import { formatAmount } from '@/utils'
+import { theme } from '@/utils/theme'
+import { computed, watch } from 'vue'
 import CourseInstructors from '@/components/CourseInstructors.vue'
 import UserAvatar from '@/components/UserAvatar.vue'
 import ProgressBar from '@/components/ProgressBar.vue'
@@ -151,12 +153,12 @@ const props = defineProps({
 	},
 })
 
-const getGradientColor = () => {
-	let theme = localStorage.getItem('theme') == 'dark' ? 'darkMode' : 'lightMode'
+const gradientColor = computed(() => {
+	let themeMode = theme.value === 'dark' ? 'darkMode' : 'lightMode'
 	let color = props.course.card_gradient?.toLowerCase() || 'blue'
-	let colorMap = colors[theme][color]
+	let colorMap = colors[themeMode][color]
 	return `linear-gradient(to top right, black, ${colorMap[400]})`
-}
+})
 </script>
 <style>
 .course-card-pills {
diff --git a/frontend/src/components/Sidebar/UserDropdown.vue b/frontend/src/components/Sidebar/UserDropdown.vue
index 54e821d4..6c1ca8a2 100644
--- a/frontend/src/components/Sidebar/UserDropdown.vue
+++ b/frontend/src/components/Sidebar/UserDropdown.vue
@@ -68,6 +68,7 @@ import { sessionStore } from '@/stores/session'
 import { call, Dropdown, toast } from 'frappe-ui'
 import { useRouter } from 'vue-router'
 import { convertToTitleCase } from '@/utils'
+import { applyTheme, toggleTheme, theme } from '@/utils/theme'
 import { usersStore } from '@/stores/user'
 import { useSettings } from '@/stores/settings'
 import { markRaw, watch, ref, onMounted, computed } from 'vue'
@@ -94,7 +95,6 @@ let { userResource } = usersStore()
 const settingsStore = useSettings()
 let { isLoggedIn } = sessionStore()
 const showSettingsModal = ref(false)
-const theme = ref('light')
 const frappeCloudBaseEndpoint = 'https://frappecloud.com'
 const $dialog = createDialog
 
@@ -106,9 +106,8 @@ const props = defineProps({
 })
 
 onMounted(() => {
-	theme.value = localStorage.getItem('theme') || 'light'
 	if (['light', 'dark'].includes(theme.value)) {
-		document.documentElement.setAttribute('data-theme', theme.value)
+		applyTheme(theme.value)
 	}
 })
 
@@ -119,13 +118,6 @@ watch(
 	}
 )
 
-const toggleTheme = () => {
-	const currentTheme = document.documentElement.getAttribute('data-theme')
-	theme.value = currentTheme === 'dark' ? 'light' : 'dark'
-	document.documentElement.setAttribute('data-theme', theme.value)
-	localStorage.setItem('theme', theme.value)
-}
-
 const userDropdownOptions = computed(() => {
 	return [
 		{
diff --git a/frontend/src/utils/theme.ts b/frontend/src/utils/theme.ts
new file mode 100644
index 00000000..3428047a
--- /dev/null
+++ b/frontend/src/utils/theme.ts
@@ -0,0 +1,16 @@
+import { ref } from 'vue'
+
+const theme = ref<'light' | 'dark'>(localStorage.getItem('theme') as 'light' | 'dark' || 'light')
+
+const toggleTheme = () => {
+	const newTheme: 'light' | 'dark' = theme.value === 'dark' ? 'light' : 'dark'
+	applyTheme(newTheme)
+}
+
+const applyTheme = (value: 'light' | 'dark') => {
+	document.documentElement.setAttribute('data-theme', value)
+	localStorage.setItem('theme', value)
+	theme.value = value
+}
+
+export { applyTheme, toggleTheme, theme }
\ No newline at end of file