diff --git a/app/(components)/[componentName]/page.tsx b/app/(components)/[componentName]/page.tsx
index ffc8c35..e517c0e 100644
--- a/app/(components)/[componentName]/page.tsx
+++ b/app/(components)/[componentName]/page.tsx
@@ -1,11 +1,14 @@
 "use client";
-import React from "react";
+import React, { useEffect } from "react";
 import components from "@/constant/components";
 import ListComponents from "@/components/sections/list-components";
 import { notFound } from "next/navigation";
 import Link from "next/link";
+import jsonDataDirectory from "@/constant/jsonDataDirectory";
+import ReactDOMServer from "react-dom/server";
 
 import { getComponentCode } from "@/utils/getComponentCode";
+import dynamic from "next/dynamic";
 
 const Components = ({ params }: { params: { componentName: string } }) => {
   const filteredComponents = components.filter((component) =>
@@ -18,36 +21,36 @@ const Components = ({ params }: { params: { componentName: string } }) => {
     return notFound();
   }
 
-  return (
-    <div>
-      {filteredComponents.map((component, index) => (
-        <div key={index} className="">
-          {component.style
-            .filter((style) =>
-              style.name
-                .toLowerCase()
-                .includes(params.componentName.toLowerCase()),
-            )
-            .map((style, index) => (
-              <div key={index}>
-                <ListComponents
-                  code={getComponentCode(style.componentCode)}
-                  name={style.name}
-                />
-              </div>
-            ))}
-        </div>
-      ))}
-      {filteredComponents.length === 0 && (
-        <p>
-          Maybe you meant{" "}
-          <Link href={`/${params.componentName}`}>
-            <a>{params.componentName}</a>
-          </Link>
-        </p>
-      )}
-    </div>
-  );
+  const componentsDancok = [];
+
+  if (jsonDataDirectory && Array.isArray(jsonDataDirectory)) {
+    const findIndexByName = jsonDataDirectory.findIndex(
+      (component) => component.name === params.componentName,
+    );
+    console.log(findIndexByName);
+    console.log(findIndexByName);
+    const countComponents = jsonDataDirectory[findIndexByName].allComponents;
+    console.log(countComponents);
+    for (let i = 0; i < countComponents.length; i++) {
+      const file = jsonDataDirectory[findIndexByName].allComponents[i];
+      const Component = dynamic(
+        () => import(`@/ui/${params.componentName}/${file}`),
+        {
+          ssr: false,
+        },
+      );
+
+      componentsDancok.push(
+        <ListComponents
+          key={`component-${i + 1}`}
+          name={file}
+          code={<Component />}
+        />,
+      );
+    }
+  }
+
+  return <div>{componentsDancok}</div>;
 };
 
 export default Components;
diff --git a/components/Iframe/index.tsx b/components/Iframe/index.tsx
new file mode 100644
index 0000000..8f5cbe5
--- /dev/null
+++ b/components/Iframe/index.tsx
@@ -0,0 +1,45 @@
+"use client";
+import "@/app/globals.css";
+import React, { FC, useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+
+interface IFrameProps {
+  children: React.ReactNode;
+  scripts?: string[] | undefined;
+  title?: string;
+  className?: any;
+}
+
+export const IframeComp: FC<IFrameProps> = ({
+  children,
+  className,
+  title,
+  scripts,
+  ...props
+}) => {
+  const [contentRef, setContentRef] = useState<any>(null);
+  const mountNode = contentRef?.contentWindow?.document.body;
+  useEffect(() => {
+    // Memasang skrip ke dalam iframe setelah komponen dimuat
+    if (mountNode && scripts.length > 0) {
+      scripts.forEach((scriptUrl) => {
+        const script = document.createElement("script");
+        script.src = scriptUrl;
+        script.async = true;
+        mountNode.appendChild(script);
+      });
+    }
+  }, [mountNode, scripts]);
+  return (
+    <iframe
+      width={"100%"}
+      title={title}
+      {...props}
+      height={`100%`}
+      className={className}
+      ref={setContentRef}
+    >
+      {mountNode && createPortal(children, mountNode)}
+    </iframe>
+  );
+};
diff --git a/components/highlighter/highlighter.tsx b/components/highlighter/highlighter.tsx
index c212b9d..95fe3a8 100644
--- a/components/highlighter/highlighter.tsx
+++ b/components/highlighter/highlighter.tsx
@@ -1,18 +1,19 @@
 import React, { Suspense, useEffect, useState } from "react";
-import Prism from "prismjs";
+
 import ButtonHighliter from "./button-highlighter";
-import "prismjs/components/prism-jsx";
+
 import "@/app/customprism.css";
+import { IframeComp } from "../Iframe";
 
 interface HighlighterProps {
-  code?: string;
   language?: string;
   componentName?: string;
+  code: React.ReactNode;
 }
 
 type SizeKey = "mobile" | "sm" | "md" | "lg" | "full";
 
-const Highlighter = ({ code, language, componentName }: HighlighterProps) => {
+const Highlighter = ({ language, componentName, code }: HighlighterProps) => {
   const [showPreview, setShowPreview] = useState(true);
   const [iframeWidth, setIframeWidth] = useState("100%");
   const [loading, setLoading] = useState(true);
@@ -32,14 +33,6 @@ const Highlighter = ({ code, language, componentName }: HighlighterProps) => {
     setIframeWidth(sizes[size] || "100%");
   };
 
-  useEffect(() => {
-    Prism.highlightAll();
-    const iframe = document.querySelector("iframe");
-    if (code) {
-      setLoading(false);
-    }
-  }, [code, language, showPreview]);
-
   return (
     <div>
       <div className="p-4">
@@ -53,7 +46,7 @@ const Highlighter = ({ code, language, componentName }: HighlighterProps) => {
               onToggle={togglePreview}
               isPreviewing={showPreview}
             />
-            <ButtonHighliter mode="copy" code={code} />
+            {/* <ButtonHighliter mode="copy" code={code} /> */}
           </div>
           <ButtonHighliter
             mode="responsiveness"
@@ -66,55 +59,16 @@ const Highlighter = ({ code, language, componentName }: HighlighterProps) => {
           <div>
             {showPreview ? (
               <div className="mt-10 h-[70vh] overflow-hidden rounded-xl border-2 border-b-4 border-r-4 border-slate-800 bg-sky-500 ">
-                {loading ? (
-                  <div className="mt-20 flex items-center justify-center font-bold text-white">
-                    Loading...
-                  </div>
-                ) : (
-                  <iframe
-                    key={code?.toString()}
-                    srcDoc={`
-                          <!doctype html>
-                          <html>
-                          <head>
-                            <meta charset="UTF-8">
-                            <meta name="viewport" content="width=device-width, initial-scale=1.0">
-                            <style>
-                           
-                            </style>
-                            <script src="https://cdn.tailwindcss.com"></script>
-                          </head>
-                          <body>
-                            <div class="flex justify-center w-full ">
-                              ${code}
-                            </div>
-                            <script>
-                              document.addEventListener('DOMContentLoaded', function() {
-                                var links = document.querySelectorAll('a');
-                                links.forEach(function(link) {
-                                  link.removeAttribute('href');
-                                  link.addEventListener('click', function(e) {
-                                    e.preventDefault();
-                                  });
-                                });
-                              });
-                            </script>
-                          </body>
-                          </html>
-                        `}
-                    title="Component Preview"
-                    width="100%"
-                    height="100%"
-                    className="w-full border-none"
-                  />
-                )}
+                <IframeComp scripts={["https://cdn.tailwindcss.com"]}>
+                  <div className="flex w-full justify-center ">{code}</div>
+                </IframeComp>
               </div>
             ) : (
               <div className="mt-10">
                 <pre
                   className={`language-${language} h-[70vh] max-h-[70vh] overflow-scroll rounded-xl border-2 border-b-4 border-r-4 border-slate-800`}
                 >
-                  <code className={`language-${language}`}>{`${code}`}</code>
+                  {/* <code className={`language-${language}`}>{`${code}`}</code> */}
                 </pre>
               </div>
             )}
diff --git a/components/sections/list-components.tsx b/components/sections/list-components.tsx
index 13df976..839e4a2 100644
--- a/components/sections/list-components.tsx
+++ b/components/sections/list-components.tsx
@@ -1,7 +1,13 @@
 import React from "react";
 import Highlighter from "../highlighter/highlighter";
 
-const ListComponents = ({ code, name }: { code: string; name: string }) => {
+const ListComponents = ({
+  code,
+  name,
+}: {
+  code: React.ReactNode;
+  name: string;
+}) => {
   return (
     <div>
       <Highlighter code={code} language="html" componentName={name} />
diff --git a/constant/jsonDataDirectory.tsx b/constant/jsonDataDirectory.tsx
new file mode 100644
index 0000000..7a9bad5
--- /dev/null
+++ b/constant/jsonDataDirectory.tsx
@@ -0,0 +1,52 @@
+const jsonDataDirectory = [
+  {
+    "id": "alert",
+    "name": "alert",
+    "allComponents": [
+      "AlertWithAction",
+      "rounded-alert",
+      "UiSimpleAlert"
+    ]
+  },
+  {
+    "id": "avatar",
+    "name": "avatar",
+    "allComponents": [
+      "simple-avatar"
+    ]
+  },
+  {
+    "id": "button",
+    "name": "button",
+    "allComponents": [
+      "button-checkbox",
+      "button-group",
+      "button-toggle"
+    ]
+  },
+  {
+    "id": "card",
+    "name": "card",
+    "allComponents": [
+      "card-image-full",
+      "simple-card"
+    ]
+  },
+  {
+    "id": "form",
+    "name": "form",
+    "allComponents": [
+      "form-icon",
+      "simple-form"
+    ]
+  },
+  {
+    "id": "textareas",
+    "name": "textareas",
+    "allComponents": [
+      "textareas"
+    ]
+  }
+];
+
+export default jsonDataDirectory;
diff --git a/next.config.js b/next.config.js
index 767719f..658404a 100644
--- a/next.config.js
+++ b/next.config.js
@@ -1,4 +1,4 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {}
+const nextConfig = {};
 
-module.exports = nextConfig
+module.exports = nextConfig;
diff --git a/package-lock.json b/package-lock.json
index a7251c5..825eb4e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,11 +9,13 @@
       "version": "0.1.0",
       "dependencies": {
         "@vercel/analytics": "^1.2.2",
+        "fs": "^0.0.1-security",
         "html": "^1.0.0",
         "next": "14.0.3",
         "prismjs": "^1.29.0",
         "react": "^18",
-        "react-dom": "^18"
+        "react-dom": "^18",
+        "uuid": "^9.0.1"
       },
       "devDependencies": {
         "@types/html": "^1.0.4",
@@ -705,6 +707,11 @@
         "url": "https://github.com/sponsors/rawify"
       }
     },
+    "node_modules/fs": {
+      "version": "0.0.1-security",
+      "resolved": "https://registry.npmjs.org/fs/-/fs-0.0.1-security.tgz",
+      "integrity": "sha512-3XY9e1pP0CVEUCdj5BmfIZxRBTSDycnbqhIOGec9QYtmVH2fbLpj86CFWkrNOkt/Fvty4KZG5lTglL9j/gJ87w=="
+    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -1757,6 +1764,18 @@
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
     },
+    "node_modules/uuid": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",
+      "integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==",
+      "funding": [
+        "https://github.com/sponsors/broofa",
+        "https://github.com/sponsors/ctavan"
+      ],
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
     "node_modules/watchpack": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
diff --git a/package.json b/package.json
index 71e424e..c0a160a 100644
--- a/package.json
+++ b/package.json
@@ -10,11 +10,13 @@
   },
   "dependencies": {
     "@vercel/analytics": "^1.2.2",
+    "fs": "^0.0.1-security",
     "html": "^1.0.0",
     "next": "14.0.3",
     "prismjs": "^1.29.0",
     "react": "^18",
-    "react-dom": "^18"
+    "react-dom": "^18",
+    "uuid": "^9.0.1"
   },
   "devDependencies": {
     "@types/html": "^1.0.4",
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 7e4bd91..a0f5421 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -5,6 +5,7 @@ const config: Config = {
     "./pages/**/*.{js,ts,jsx,tsx,mdx}",
     "./components/**/*.{js,ts,jsx,tsx,mdx}",
     "./app/**/*.{js,ts,jsx,tsx,mdx}",
+    "./ui/**/*.{js,ts,jsx,tsx,mdx",
   ],
   theme: {
     extend: {
diff --git a/utils/getComponentCode.tsx b/utils/getComponentCode.tsx
index b1f279b..8db574c 100644
--- a/utils/getComponentCode.tsx
+++ b/utils/getComponentCode.tsx
@@ -5,6 +5,6 @@ import * as beautify from "html";
 export function getComponentCode(component: React.JSX.Element): string {
   const rawCode = useClientRenderToString(component);
   const codeString = beautify.prettyPrint(`${rawCode}`, { indent_size: 2 });
-
+  console.log(codeString);
   return codeString;
 }
diff --git a/utils/getDirectoryComponents.ts b/utils/getDirectoryComponents.ts
new file mode 100644
index 0000000..2c8e3be
--- /dev/null
+++ b/utils/getDirectoryComponents.ts
@@ -0,0 +1,58 @@
+const fs = require("fs");
+const path = require("path");
+
+const main = async () => {
+  const directoryPath = path.resolve(process.cwd(), "..", "ui");
+  console.log(directoryPath);
+  try {
+    const directories: string[] = [];
+    const data: {
+      id: string;
+      name: string;
+      allComponents: string[];
+    }[] = [];
+    const items = await fs.promises.readdir(directoryPath);
+    console.log(items);
+    for (const item of items) {
+      const itemPath = path.join(directoryPath, item);
+      const stats = await fs.promises.stat(itemPath);
+      if (stats.isDirectory()) {
+        directories.push(item);
+      }
+    }
+
+    for (const directory of directories) {
+      const componentDir = path.join(process.cwd(), "..", "ui", directory);
+      console.log(componentDir);
+      const componentFiles = await fs.promises.readdir(componentDir);
+      const fileNamesWithoutExtensions = componentFiles.map(
+        (fileName) => path.parse(fileName).name,
+      );
+      data.push({
+        id: directory.toLowerCase(), // Menggunakan nama direktori sebagai ID
+        name: directory.toLowerCase(), // Menggunakan nama direktori sebagai nama komponen
+        allComponents: [...fileNamesWithoutExtensions],
+      });
+    }
+
+    const jsonData = JSON.stringify(data, null, 2);
+    const constantFolderPath = path.join(process.cwd(), "..", "constant");
+    const filePath = path.join(constantFolderPath, "jsonDataDirectory.tsx");
+
+    // Membuat folder constant jika belum ada
+    if (!fs.existsSync(constantFolderPath)) {
+      fs.mkdirSync(constantFolderPath);
+    }
+
+    fs.writeFileSync(
+      filePath,
+      `const jsonDataDirectory = ${jsonData};\n\nexport default jsonDataDirectory;\n`,
+    );
+
+    console.log("jsonDataDirectory.tsx successfully created.");
+  } catch (err) {
+    console.error("Error:", err);
+  }
+};
+
+main();