diff --git a/app/layout.tsx b/app/layout.tsx
index 46baa5e..8d7a302 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -7,7 +7,6 @@ import RUAThemeProvider from 'components/pages/theme-provider';
 import fonts from 'lib/fonts';
 import { Metadata } from 'next';
 import 'styles/globals.css';
-import 'styles/rua.css';
 
 export const metadata: Metadata = {
   title: 'RUA',
diff --git a/app/p/[slug]/page.tsx b/app/p/[slug]/page.tsx
index dbf2d2d..154f928 100644
--- a/app/p/[slug]/page.tsx
+++ b/app/p/[slug]/page.tsx
@@ -11,6 +11,7 @@ import rehypeHighlight from 'rehype-highlight';
 import rehypeSlug from 'rehype-slug';
 import remarkGfm from 'remark-gfm';
 import { Post } from 'types';
+import 'styles/rua.css';
 
 const PostToc = dynamic(() => import('components/post/post-toc'));
 const PostCommnetLine = dynamic(
diff --git a/content/posts/leptos-dark-mode.mdx b/content/posts/leptos-dark-mode.mdx
index 7476a30..c161d6a 100644
--- a/content/posts/leptos-dark-mode.mdx
+++ b/content/posts/leptos-dark-mode.mdx
@@ -66,7 +66,12 @@ let UseColorModeReturn { mode, set_mode, .. } = use_color_mode_with_options(
 provide_context((mode, set_mode));
 ```
 
-![](Pasted%20image%2020241011164933.png)
+<Image
+  src={'/images/p/leptos-dark-mode/dark-mode.png'}
+  alt="local storage key"
+  width="735"
+  height="90"
+/>
 
 ## Library
 
diff --git a/public/images/p/leptos-dark-mode/dark-mode.png b/public/images/p/leptos-dark-mode/dark-mode.png
new file mode 100644
index 0000000..894620d
Binary files /dev/null and b/public/images/p/leptos-dark-mode/dark-mode.png differ
diff --git a/styles/globals.css b/styles/globals.css
index 1bc6041..f5d8c82 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -1,4 +1,5 @@
 @import 'tailwindcss';
+@import './rua.css';
 
 @custom-variant dark (&:is(.mocha *));