diff --git a/components/markdown/accordion.tsx b/components/markdown/AccordionMdx.tsx
similarity index 100%
rename from components/markdown/accordion.tsx
rename to components/markdown/AccordionMdx.tsx
diff --git a/components/markdown/button.tsx b/components/markdown/ButtonMdx.tsx
similarity index 100%
rename from components/markdown/button.tsx
rename to components/markdown/ButtonMdx.tsx
diff --git a/components/markdown/cardgroup.tsx b/components/markdown/CardGroupMdx.tsx
similarity index 100%
rename from components/markdown/cardgroup.tsx
rename to components/markdown/CardGroupMdx.tsx
diff --git a/components/markdown/card.tsx b/components/markdown/CardMdx.tsx
similarity index 100%
rename from components/markdown/card.tsx
rename to components/markdown/CardMdx.tsx
diff --git a/components/markdown/copy.tsx b/components/markdown/CopyMdx.tsx
similarity index 100%
rename from components/markdown/copy.tsx
rename to components/markdown/CopyMdx.tsx
diff --git a/components/markdown/image.tsx b/components/markdown/ImageMdx.tsx
similarity index 100%
rename from components/markdown/image.tsx
rename to components/markdown/ImageMdx.tsx
diff --git a/components/markdown/link.tsx b/components/markdown/LinkMdx.tsx
similarity index 100%
rename from components/markdown/link.tsx
rename to components/markdown/LinkMdx.tsx
diff --git a/components/markdown/note.tsx b/components/markdown/NoteMdx.tsx
similarity index 100%
rename from components/markdown/note.tsx
rename to components/markdown/NoteMdx.tsx
diff --git a/components/markdown/outlet.tsx b/components/markdown/OutletMdx.tsx
similarity index 100%
rename from components/markdown/outlet.tsx
rename to components/markdown/OutletMdx.tsx
diff --git a/components/markdown/pre.tsx b/components/markdown/PreMdx.tsx
similarity index 93%
rename from components/markdown/pre.tsx
rename to components/markdown/PreMdx.tsx
index 2f831e4..172211c 100644
--- a/components/markdown/pre.tsx
+++ b/components/markdown/PreMdx.tsx
@@ -1,5 +1,5 @@
 import { ComponentProps } from "react";
-import Copy from "./copy";
+import Copy from "./CopyMdx";
 
 export default function Pre({
   children,
diff --git a/components/markdown/stepper.tsx b/components/markdown/StepperMdx.tsx
similarity index 100%
rename from components/markdown/stepper.tsx
rename to components/markdown/StepperMdx.tsx
diff --git a/components/markdown/tooltips.tsx b/components/markdown/TooltipsMdx.tsx
similarity index 100%
rename from components/markdown/tooltips.tsx
rename to components/markdown/TooltipsMdx.tsx
diff --git a/components/markdown/youtube.tsx b/components/markdown/YoutubeMdx.tsx
similarity index 100%
rename from components/markdown/youtube.tsx
rename to components/markdown/YoutubeMdx.tsx
diff --git a/contents/docs/getting-started/components/release-note/index.mdx b/contents/docs/getting-started/components/release-note/index.mdx
index d2298d4..cbe5d5d 100644
--- a/contents/docs/getting-started/components/release-note/index.mdx
+++ b/contents/docs/getting-started/components/release-note/index.mdx
@@ -32,22 +32,7 @@ To fill in the Release Note content that will be displayed on the Changelog page
 ## Preview : Render Output
 
 <Accordion title="Show Render">
-    ## v1.3.0 - Jan 31, 2024
-
-    > Release Note Feature to Make it Easier to Write Changelogs
-
-    ![Your Image Alt Text](https://docubook.pro/images/example-img.png)
-
-    ### Added
-
-    - New Release Note Feature
-    - New Layout for Changelog page
-    - New Changelog page
-    - add Release Note Component
-    - Easily write release notes directly from the CHANGELOG.md file
-    - Toc for versioning
-    - Write with the markdown tag
-    - add lib / changelog.ts
+![show demo changelog](/images/view-changelog.png)
 </Accordion>
 
 ## Changes Category
diff --git a/docu.json b/docu.json
index 1dc8bc9..59e1b7e 100644
--- a/docu.json
+++ b/docu.json
@@ -75,19 +75,19 @@
           "title": "Components",
           "href": "/components",
           "items": [
-            { "title": "Stepper", "href": "/stepper" },
-            { "title": "Tabs", "href": "/tabs" },
-            { "title": "Note", "href": "/note" },
+            { "title": "Accordion", "href": "/accordion" },
+            { "title": "Button", "href": "/button" },
+            { "title": "Card", "href": "/card" },
+            { "title": "Card Group", "href": "/card-group" },
             { "title": "Code Block", "href": "/code-block" },
             { "title": "Image", "href": "/image" },
             { "title": "Link", "href": "/link" },
-            { "title": "Youtube", "href": "/youtube" },
-            { "title": "Tooltips", "href": "/tooltips" },
-            { "title": "Cards", "href": "/card" },
-            { "title": "Card Group", "href": "/card-group" },
-            { "title": "Button", "href": "/button" },
-            { "title": "Accordion", "href": "/accordion" },
+            { "title": "Note", "href": "/note" },
             { "title": "Release Note", "href": "/release-note" },
+            { "title": "Stepper", "href": "/stepper" },
+            { "title": "Tabs", "href": "/tabs" },
+            { "title": "Tooltips", "href": "/tooltips" },
+            { "title": "Youtube", "href": "/youtube" },
             { "title": "Custom", "href": "/custom" }
           ]
         },
diff --git a/lib/markdown.ts b/lib/markdown.ts
index 084754a..327414a 100644
--- a/lib/markdown.ts
+++ b/lib/markdown.ts
@@ -12,18 +12,18 @@ import matter from "gray-matter";
 
 // custom components imports
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import Pre from "@/components/markdown/pre";
-import Note from "@/components/markdown/note";
-import { Stepper, StepperItem } from "@/components/markdown/stepper";
-import Image from "@/components/markdown/image";
-import Link from "@/components/markdown/link";
-import Outlet from "@/components/markdown/outlet";
-import Youtube from "@/components/markdown/youtube";
-import Tooltip from "@/components/markdown/tooltips";
-import Card from "@/components/markdown/card";
-import Button from "@/components/markdown/button";
-import Accordion from "@/components/markdown/accordion";
-import CardGroup from "@/components/markdown/cardgroup";
+import Pre from "@/components/markdown/PreMdx";
+import Note from "@/components/markdown/NoteMdx";
+import { Stepper, StepperItem } from "@/components/markdown/StepperMdx";
+import Image from "@/components/markdown/ImageMdx";
+import Link from "@/components/markdown/LinkMdx";
+import Outlet from "@/components/markdown/OutletMdx";
+import Youtube from "@/components/markdown/YoutubeMdx";
+import Tooltip from "@/components/markdown/TooltipsMdx";
+import Card from "@/components/markdown/CardMdx";
+import Button from "@/components/markdown/ButtonMdx";
+import Accordion from "@/components/markdown/AccordionMdx";
+import CardGroup from "@/components/markdown/CardGroupMdx";
 
 // add custom components
 const components = {
diff --git a/public/images/view-changelog.png b/public/images/view-changelog.png
new file mode 100644
index 0000000..cf7c6e0
Binary files /dev/null and b/public/images/view-changelog.png differ
diff --git a/styles/syntax.css b/styles/syntax.css
index ec270f4..8078d3e 100644
--- a/styles/syntax.css
+++ b/styles/syntax.css
@@ -99,11 +99,6 @@
   border-radius: 8px; /* Sudut melengkung pada iframe */
 }
 
-.youtube:hover {
-  transform: scale(1.05); /* Efek hover zoom */
-  transition: transform 0.3s ease;
-}
-
 li#changelog {
   position: relative;
   padding-left: 1.5em;