diff --git a/src/components/Footer.vue b/src/components/Footer.vue
index d199da1..c347088 100644
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { isDark, toggleDark } from '~/logic'
+import { isDark, toggleDark } from '~/composables'
 
 const { t, availableLocales, locale } = useI18n()
 
diff --git a/src/logic/dark.ts b/src/composables/dark.ts
similarity index 58%
rename from src/logic/dark.ts
rename to src/composables/dark.ts
index a3260a8..c745de5 100644
--- a/src/logic/dark.ts
+++ b/src/composables/dark.ts
@@ -1,4 +1,3 @@
-// import { useDark, useToggle } from '@vueuse/core'
-
+// these APIs are auto-imported from @vueuse/core
 export const isDark = useDark()
 export const toggleDark = useToggle(isDark)
diff --git a/src/logic/index.ts b/src/composables/index.ts
similarity index 100%
rename from src/logic/index.ts
rename to src/composables/index.ts
diff --git a/src/pages/README.md b/src/pages/README.md
index 0db483b..929b7c9 100644
--- a/src/pages/README.md
+++ b/src/pages/README.md
@@ -10,11 +10,11 @@ Check out [`vite-plugin-pages`](https://github.com/hannoeru/vite-plugin-pages) f
 For example, instead of having
 
 ```ts
-import { isDark } from '../../../../logic'
+import { isDark } from '../../../../composables'
 ```
 
 now, you can use
 
 ```ts
-import { isDark } from '~/logic'
+import { isDark } from '~/composables'
 ```