diff --git a/articles/uploaded/test.md b/articles/uploaded/test.md
deleted file mode 100644
index ca154db..0000000
--- a/articles/uploaded/test.md
+++ /dev/null
@@ -1,75 +0,0 @@
----
-tags:
-  - アニメ
-  - ゲーム
----
-
-Blogを表示できたら成功｡
-
-\#アニメ
-
-![vike-square-gradient.yySbJPh3.svg](..\assets\vike-square-gradient.yySbJPh3.svg)
-
-![Test20240406233811738.jpg](../assets/Test20240406233811738.jpg)
-
-この文が挿入されていたら成功
-
-[笹川真生 - 日本の九月の気層です / Mao Sasagawa - Japan's September Air Layer](https://www.youtube.com/watch?v=4-3Ogspng1I&list=RDRcDBofJ-_oA&index=12)
-
-<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/4-3Ogspng1I" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
-
-Markdownの構文一覧
-
- >
- > 引用
- >
- >  >
- > > 引用のネスト
- > > あふぁds
-
-image
-![test](Test20240406233811738.jpg)
-
-**bold**
-
-`code`
-
-~~cancel~~
-
----
-
-# タイトル
-
-|test|table|
-|----|-----|
-|row|aaa|
-
-* list
-  * nest
-* aaa
-
-1. number
-2. test
-   1. i
-   2. ii
-   3. iii
-   4. iv
-   5. v
-
-* [ ] tests
-* [x] aaa
-
-codeblock
-
-```typescript filename="test.tsx"
-const [number,setNumber] = useState(0)
-
-export default funciton home ():ReactElement {
- return(
-  <h1> home page </h1>
-  {number}
- )
-}
-```
-
-LinkCard
diff --git a/src/components/Article.tsx b/src/components/Article.tsx
new file mode 100644
index 0000000..9d73f65
--- /dev/null
+++ b/src/components/Article.tsx
@@ -0,0 +1,20 @@
+import { type ReactElement } from "react";
+import { styled as p } from "@panda/jsx";
+import "./Layout.css";
+import Test from "../../blogs/articles/uploaded/2.md";
+
+/** @type {import('mdx/types.js').MDXComponents} */
+const components = {
+  em(properties: any) {
+    return <i {...properties} />;
+  },
+};
+export default function Article(): ReactElement {
+  return (
+    <p.div w="full">
+      <div className="markdown-body">
+        <Test components={components} />
+      </div>
+    </p.div>
+  );
+}
diff --git a/src/pages/blogs/Layout.css b/src/components/Layout.css
similarity index 100%
rename from src/pages/blogs/Layout.css
rename to src/components/Layout.css
diff --git a/src/pages/blogs/+Page.tsx b/src/pages/blogs/+Page.tsx
index b222cea..8ba9900 100644
--- a/src/pages/blogs/+Page.tsx
+++ b/src/pages/blogs/+Page.tsx
@@ -1,14 +1,7 @@
 import { type ReactElement } from "react";
 import { styled as p } from "@panda/jsx";
-import "./Layout.css"
-import Test from "../../../articles/uploaded/test.md";
+import Article from "@/components/Article";
 
-/** @type {import('mdx/types.js').MDXComponents} */
-const components = {
-  em(properties: any) {
-    return <i {...properties} />;
-  },
-};
 export default function Blogs(): ReactElement {
   return (
     <p.div
@@ -18,11 +11,7 @@ export default function Blogs(): ReactElement {
       justifyContent="center"
     >
       <h1>Blogs</h1>
-      <p.div w="full">
-        <div className="markdown-body">
-          <Test components={components} />
-        </div>
-      </p.div>
+        <Article />
     </p.div>
   );
 }