diff --git a/docs/todo3.md b/docs/todo3.md
index ff6d9a4..68b23a3 100644
--- a/docs/todo3.md
+++ b/docs/todo3.md
@@ -315,4 +315,6 @@ refactor rss and json feed
 ProjectCard and test markdown
 PostCardSmall
 extract types from constants
+update yarn scripts for eslint, prettier, types
+404 page design
 ```
diff --git a/src/components/ThemeScript.astro b/src/components/ThemeScript.astro
index 236c1f0..da7b346 100644
--- a/src/components/ThemeScript.astro
+++ b/src/components/ThemeScript.astro
@@ -4,8 +4,8 @@ import * as themeConstants from '@/constants/themes';
 
 {/* Inlined to avoid flash of white content. */}
 <script is:inline define:vars={{ themeConstants }}>
-  const { LOCAL_STORAGE_THEME_KEY, MODES, THEME_ATTRIBUTE, THEME_CHANGE_EVENT, THEMES } =
-    themeConstants;
+  const { MODES, THEMES, THEME_CONFIG } = themeConstants;
+  const { THEME_ATTRIBUTE, THEME_CHANGE_EVENT, LOCAL_STORAGE_THEME_KEY } = THEME_CONFIG;
 
   // this is JavaScript, not TypeScript
   const defaultThemes = { light: THEMES[0], dark: THEMES[1] };
diff --git a/src/components/ThemeToggle.astro b/src/components/ThemeToggle.astro
index f0580d3..3ea33dc 100644
--- a/src/components/ThemeToggle.astro
+++ b/src/components/ThemeToggle.astro
@@ -11,7 +11,9 @@ import { Icon } from 'astro-icon/components';
 <script>
   import { getNextTheme } from 'utils/dom';
 
-  import { THEME_CHANGE_EVENT } from '@/constants/themes';
+  import { THEME_CONFIG } from '@/constants/themes';
+
+  const { THEME_CHANGE_EVENT } = THEME_CONFIG;
 
   class ThemeToggle extends HTMLElement {
     #controller: AbortController | undefined;
diff --git a/src/constants/collections.ts b/src/constants/collections.ts
index fb67f33..44ab0b2 100644
--- a/src/constants/collections.ts
+++ b/src/constants/collections.ts
@@ -54,8 +54,6 @@ export const CATEGORIES = [
   },
 ] as const;
 
-export type CategoryType = (typeof CATEGORIES)[number];
-
 // use imported images here
 export const DEFAULTS_POST = {
   TITLE: DEFAULT_METADATA.title,
diff --git a/src/constants/navigation.ts b/src/constants/navigation.ts
index 3d09d8e..bfb3220 100644
--- a/src/constants/navigation.ts
+++ b/src/constants/navigation.ts
@@ -31,5 +31,3 @@ export const NAVIGATION_ITEMS = [
   //   path: ROUTES.RESUME,
   // },
 ] as const;
-
-export type NavigationItem = (typeof NAVIGATION_ITEMS)[number];
diff --git a/src/constants/themes.ts b/src/constants/themes.ts
index 5827b35..02bffab 100644
--- a/src/constants/themes.ts
+++ b/src/constants/themes.ts
@@ -1,5 +1,3 @@
-export type Theme = (typeof THEMES)[number];
-
 export const MODES = {
   dark: 'dark',
   light: 'light',
@@ -29,8 +27,9 @@ export const THEMES = [
   },
 ] as const;
 
-export const MODE_CLASS = 'dark' as const;
-export const THEME_ATTRIBUTE = 'data-theme' as const;
-export const THEME_CHANGE_EVENT = 'theme-change' as const;
-
-export const LOCAL_STORAGE_THEME_KEY = 'theme' as const;
+export const THEME_CONFIG = {
+  MODE_CLASS: 'dark',
+  THEME_ATTRIBUTE: 'data-theme',
+  THEME_CHANGE_EVENT: 'theme-change',
+  LOCAL_STORAGE_THEME_KEY: 'theme',
+} as const;
diff --git a/src/modules/post/category.ts b/src/modules/post/category.ts
index eed5bd0..0d1f17b 100644
--- a/src/modules/post/category.ts
+++ b/src/modules/post/category.ts
@@ -1,7 +1,7 @@
 import { CATEGORIES } from '@/constants/collections';
 import { ROUTES } from '@/constants/routes';
 
-import type { CategoryType } from '@/constants/collections';
+import type { CategoryType } from '@/types/constants';
 import type { Filter, FilterLink, PostCollection } from '@/types/post';
 
 export const getAllCategories = (posts: PostCollection[]): string[] =>
diff --git a/src/types/constants.ts b/src/types/constants.ts
new file mode 100644
index 0000000..eed7d10
--- /dev/null
+++ b/src/types/constants.ts
@@ -0,0 +1,12 @@
+import type { CATEGORIES } from '@/constants/collections';
+import type { PAGE_METADATA } from '@/constants/metadata';
+import type { NAVIGATION_ITEMS } from '@/constants/navigation';
+import type { THEMES } from '@/constants/themes';
+
+export type CategoryType = (typeof CATEGORIES)[number];
+
+export type PageMetadataKey = keyof typeof PAGE_METADATA;
+
+export type NavigationItem = (typeof NAVIGATION_ITEMS)[number];
+
+export type Theme = (typeof THEMES)[number];
diff --git a/src/utils/dom.ts b/src/utils/dom.ts
index 8273766..6962f9a 100644
--- a/src/utils/dom.ts
+++ b/src/utils/dom.ts
@@ -1,6 +1,8 @@
-import { DEFAULT_THEMES, MODE_CLASS, MODES, THEME_ATTRIBUTE, THEMES } from '@/constants/themes';
+import { DEFAULT_THEMES, MODES, THEME_CONFIG, THEMES } from '@/constants/themes';
 
-import type { Theme } from '@/constants/themes';
+import type { Theme } from '@/types/constants';
+
+const { MODE_CLASS, THEME_ATTRIBUTE } = THEME_CONFIG;
 
 export const getCurrentMode = () =>
   document.documentElement.classList.contains(MODE_CLASS) ? MODES.dark : MODES.light;
diff --git a/src/utils/metadata.ts b/src/utils/metadata.ts
index da15c3e..256c008 100644
--- a/src/utils/metadata.ts
+++ b/src/utils/metadata.ts
@@ -1,8 +1,8 @@
 import { DEFAULT_METADATA, dotSeparator, PAGE_METADATA } from '@/constants/metadata';
 import { getOpenGraphImagePath } from './open-graph-image';
 
-import type { PageMetadataKey } from '@/constants/metadata';
 import type { Metadata } from '@/types/common';
+import type { PageMetadataKey } from '@/types/constants';
 
 export const getPageMetadata = (path: PageMetadataKey): Metadata => {
   const image = getOpenGraphImagePath(path);
diff --git a/src/utils/navigation.ts b/src/utils/navigation.ts
index e2e037f..d26967d 100644
--- a/src/utils/navigation.ts
+++ b/src/utils/navigation.ts
@@ -1,7 +1,7 @@
 import { NAVIGATION_ITEMS } from '@/constants/navigation';
 import { ROUTES } from '@/constants/routes';
 
-import type { NavigationItem } from '@/constants/navigation';
+import type { NavigationItem } from '@/types/constants';
 
 export const getActiveNavItemPath = (routePathname: string): NavigationItem['path'] | undefined => {
   let activeNavItem: NavigationItem | undefined = undefined;