diff --git a/package.json b/package.json
index 3913ec0..8bb14b5 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "flowbite-vue",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "repository": "https://github.com/themesberg/flowbite-vue.git",
   "author": "themesberg",
   "license": "MIT",
diff --git a/src/components/utils/FlowbiteThemable/composables/useFlowbiteThemable.ts b/src/components/utils/FlowbiteThemable/composables/useFlowbiteThemable.ts
index a1c2063..f000aca 100644
--- a/src/components/utils/FlowbiteThemable/composables/useFlowbiteThemable.ts
+++ b/src/components/utils/FlowbiteThemable/composables/useFlowbiteThemable.ts
@@ -1,6 +1,6 @@
 import type { FlowbiteTheme } from '../types'
 import type { Ref } from 'vue'
-import { computed, inject } from 'vue'
+import { computed, inject, ref } from 'vue'
 import { FLOWBITE_THEMABLE_INJECTION_KEY } from '../injection/config'
 
 type UseFlowbiteThemableReturns = {
@@ -65,38 +65,38 @@ const flowbiteThemeClasses: FlowbiteThemes<FlowbiteTheme> = {
 
 export function useFlowbiteThemable(): UseFlowbiteThemableReturns {
 
-    const theme = inject<Ref<FlowbiteTheme>>(FLOWBITE_THEMABLE_INJECTION_KEY)
+    const theme = inject<Ref<FlowbiteTheme | null>>(FLOWBITE_THEMABLE_INJECTION_KEY, ref(null))
 
     const isActive = computed(() => !!theme?.value)
-    const color = computed(() => theme?.value)
+    const color = computed(() => theme?.value || undefined)
 
     const backgroundClasses = computed(() => {
-        if(!theme) return ''
+        if(!theme.value) return ''
         return flowbiteThemeClasses[theme.value].background
     })
 
     const disabledClasses = computed(() => {
-        if(!theme) return ''
+        if(!theme.value) return ''
         return flowbiteThemeClasses[theme.value].disabled
     })
 
     const hoverClasses = computed(() => {
-        if(!theme) return ''
+        if(!theme.value) return ''
         return flowbiteThemeClasses[theme.value].hover
     })
 
     const textClasses = computed(() => {
-        if(!theme) return ''
+        if(!theme.value) return ''
         return flowbiteThemeClasses[theme.value].text
     })
 
     const borderClasses = computed(() => {
-        if(!theme) return ''
+        if(!theme.value) return ''
         return flowbiteThemeClasses[theme.value].border
     })
 
     const focusClasses = computed(() => {
-        if(!theme) return ''
+        if(!theme.value) return ''
         return flowbiteThemeClasses[theme.value].focus
     })