diff --git a/components/docs/anchor.tsx b/components/anchor.tsx
similarity index 100%
rename from components/docs/anchor.tsx
rename to components/anchor.tsx
diff --git a/components/docs/docs-breadcrumb.tsx b/components/docs-breadcrumb.tsx
similarity index 100%
rename from components/docs/docs-breadcrumb.tsx
rename to components/docs-breadcrumb.tsx
diff --git a/components/docs/docs-menu.tsx b/components/docs-menu.tsx
similarity index 100%
rename from components/docs/docs-menu.tsx
rename to components/docs-menu.tsx
diff --git a/components/docs/edit-on-github.tsx b/components/edit-on-github.tsx
similarity index 100%
rename from components/docs/edit-on-github.tsx
rename to components/edit-on-github.tsx
diff --git a/components/docs/footer.tsx b/components/footer.tsx
similarity index 77%
rename from components/docs/footer.tsx
rename to components/footer.tsx
index b1e8787..b8e84bd 100644
--- a/components/docs/footer.tsx
+++ b/components/footer.tsx
@@ -1,5 +1,5 @@
 import Link from "next/link";
-import { ModeToggle } from "@/components/docs/theme-toggle";
+import { ModeToggle } from "@/components/theme-toggle";
 import docuConfig from "@/docu.json";
 import * as LucideIcons from "lucide-react"; // Import all icons
 
@@ -12,16 +12,13 @@ export function Footer() {
         <div className="items-start justify-center hidden gap-4 lg:flex-col lg:flex lg:w-3/5">
             <h3 className="text-lg font-bold font-code">{meta.title}</h3>
             <span className="w-3/4 text-base text-wrap text-muted-foreground">{meta.description}</span>
-            {/* <div className="flex items-center gap-6 mt-2">
+            <div className="flex items-center gap-6 mt-2">
                 <FooterButtons />
-            </div> */}
+            </div>
         </div>
         <div className="flex flex-col items-start justify-center w-full gap-4 mt-4 xl:items-end lg:w-2/5">
             <p className="text-center text-muted-foreground">
-                Copyright © {new Date().getFullYear()} {footer.copyright} - Made with{" "}
-                <Link href="https://www.docubook.pro" target="_blank" rel="noopener noreferrer" className="underline underline-offset-2">
-                DocuBook
-                </Link>
+                Copyright © {new Date().getFullYear()} {footer.copyright} - <MadeWith />
             </p>
             <div className="hidden lg:flex">
                 <ModeToggle />
@@ -54,3 +51,15 @@ export function FooterButtons() {
     </>
   );
 }
+
+export function MadeWith() {
+  return (
+    <>
+      <span className="text-muted-foreground">Made with </span>
+      <span className="text-primary">
+        <Link href="https://www.docubook.pro" target="_blank" rel="noopener noreferrer" className="underline underline-offset-2 text-muted-foreground">
+            DocuBook
+        </Link></span>
+    </>
+  );
+}
diff --git a/components/home/copycommand.tsx b/components/home/copycommand.tsx
deleted file mode 100644
index 64c6cd3..0000000
--- a/components/home/copycommand.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { TerminalSquareIcon, ClipboardIcon, CheckIcon } from "lucide-react";
-
-export function CopyCommand() {
-  const [copied, setCopied] = useState(false);
-  const command = "npx @docubook/create@latest";
-
-  const copyToClipboard = () => {
-    navigator.clipboard.writeText(command);
-    setCopied(true);
-    setTimeout(() => setCopied(false), 5000);
-  };
-
-  return (
-    <div className="relative flex flex-row items-center justify-center sm:gap-2 gap-0.5 text-muted-foreground text-md mt-10 mb-12 font-code text-base font-medium group">
-      <TerminalSquareIcon className="w-5 h-5 mr-1 mt-0.5" />
-      <span className="select-all">{command}</span>
-      <button
-        onClick={copyToClipboard}
-        className="p-1 ml-1 transition-opacity rounded-md opacity-0 group-hover:opacity-100 hover:bg-gray-200 dark:hover:bg-gray-700"
-      >
-        {copied ? (
-          <CheckIcon className="w-4 h-4 text-green-500" />
-        ) : (
-          <ClipboardIcon className="w-4 h-4" />
-        )}
-      </button>
-    </div>
-  );
-}
-export default CopyCommand;
diff --git a/components/home/runtime.tsx b/components/home/runtime.tsx
deleted file mode 100644
index db67e35..0000000
--- a/components/home/runtime.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-"use client";
-
-import { useState, useEffect, useRef } from "react";
-import { Button } from "@/components/ui/button";
-import { Play } from "lucide-react";
-
-const scriptOutput = [
-  "DocuBook CLI Installer",
-  "✔ Enter your project directory name: docubook",
-  "? Choose a package manager:",
-  "> npm",
-  "  pnpm",
-  "  yarn",
-  "  bun",
-  "",
-  ":: Cloning starter from GitLab...",
-  "✔ Docubook project successfully created!",
-  "Skipping rename postcss.config.js because Bun is not installed.",
-  "",
-  "[ DocuBook Version 1.8.0 ]",
-  "",
-  "Starting the installation process...",
-  "Installation | ████████████████████████████████ | 100% 100/100",
-  "",
-  "Dependencies installed successfully using npm!",
-  "",
-  "┌────────────────────────────────────┐",
-  "│ Next Steps:                        │",
-  "│                                    │",
-  "│ 1. Navigate to project directory:  │",
-  "│    cd docubook                     │",
-  "│                                    │",
-  "│ 2. Install dependencies:           │",
-  "│    npm install                     │",
-  "│                                    │",
-  "│ 3. Start the development server:   │",
-  "│    npm run dev                     │",
-  "└────────────────────────────────────┘"
-];
-
-export function RuntimeSimulator() {
-  const [logs, setLogs] = useState<string[]>([]);
-  const [running, setRunning] = useState(false);
-  const terminalRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    if (running) {
-      setLogs([]);
-      scriptOutput.forEach((line, index) => {
-        setTimeout(() => {
-          setLogs((prev) => [...prev, line]);
-        }, index * 500);
-      });
-    }
-  }, [running]);
-
-  useEffect(() => {
-    terminalRef.current?.scrollTo({ top: terminalRef.current.scrollHeight, behavior: "smooth" });
-  }, [logs]);
-
-  return (
-    <div className="bg-gray-900 text-green-400 font-mono rounded-lg overflow-hidden w-full h-auto max-w-2xl shadow-lg">
-      <div className="bg-gray-800 text-gray-300 px-4 py-2 flex items-center space-x-2">
-        <div className="flex space-x-1">
-          <span className="w-3 h-3 bg-red-500 rounded-full"></span>
-          <span className="w-3 h-3 bg-yellow-500 rounded-full"></span>
-          <span className="w-3 h-3 bg-green-500 rounded-full"></span>
-        </div>
-        <span className="ml-3">docubook@localhost</span>
-      </div>
-      <div ref={terminalRef} className="p-4 md:h-[400px] h-72 overflow-y-auto text-left">
-        {logs.map((log, index) => (
-          <pre key={index} className="whitespace-pre-wrap">{log}</pre>
-        ))}
-      </div>
-      <div className="bg-gray-800 p-2 flex items-center space-x-2">
-        <input
-          type="text"
-          value="npx @docubook/create@latest"
-          readOnly
-          className="bg-gray-700 text-gray-300 px-2 py-1 rounded w-full text-left"
-        />
-        <Button onClick={() => setRunning(true)} className="bg-green-600 hover:bg-green-500 px-4 py-1">
-          <Play className="w-5 h-5" />
-        </Button>
-      </div>
-    </div>
-  );
-}
-
-export default RuntimeSimulator;
diff --git a/components/docs/leftbar.tsx b/components/leftbar.tsx
similarity index 100%
rename from components/docs/leftbar.tsx
rename to components/leftbar.tsx
diff --git a/components/docs/mob-toc.tsx b/components/mob-toc.tsx
similarity index 100%
rename from components/docs/mob-toc.tsx
rename to components/mob-toc.tsx
diff --git a/components/docs/navbar.tsx b/components/navbar.tsx
similarity index 100%
rename from components/docs/navbar.tsx
rename to components/navbar.tsx
diff --git a/components/docs/pagination.tsx b/components/pagination.tsx
similarity index 100%
rename from components/docs/pagination.tsx
rename to components/pagination.tsx
diff --git a/components/docs/scroll-to-top.tsx b/components/scroll-to-top.tsx
similarity index 100%
rename from components/docs/scroll-to-top.tsx
rename to components/scroll-to-top.tsx
diff --git a/components/docs/search.tsx b/components/search.tsx
similarity index 100%
rename from components/docs/search.tsx
rename to components/search.tsx
diff --git a/components/docs/sublink.tsx b/components/sublink.tsx
similarity index 100%
rename from components/docs/sublink.tsx
rename to components/sublink.tsx
diff --git a/components/docs/theme-toggle.tsx b/components/theme-toggle.tsx
similarity index 100%
rename from components/docs/theme-toggle.tsx
rename to components/theme-toggle.tsx
diff --git a/components/docs/toc-observer.tsx b/components/toc-observer.tsx
similarity index 100%
rename from components/docs/toc-observer.tsx
rename to components/toc-observer.tsx
diff --git a/components/docs/toc.tsx b/components/toc.tsx
similarity index 100%
rename from components/docs/toc.tsx
rename to components/toc.tsx
diff --git a/components/docs/typography.tsx b/components/typography.tsx
similarity index 100%
rename from components/docs/typography.tsx
rename to components/typography.tsx
diff --git a/contents/docs/getting-started/tutor-tripay/sandbox/index.mdx b/contents/docs/getting-started/tutor-tripay/sandbox/index.mdx
index 528af89..32957b5 100644
--- a/contents/docs/getting-started/tutor-tripay/sandbox/index.mdx
+++ b/contents/docs/getting-started/tutor-tripay/sandbox/index.mdx
@@ -44,3 +44,9 @@ date : 15-04-2025
     Copy `Webhook URL` yang akan digunakan sebagai URL callback pada Merchant di dashboard Tripay.
   </StepperItem>
 </Stepper>
+
+## Tutorial Video
+
+<Accordion title="API Sandbox" defaultOpen={true}>
+    <Youtube videoId="KzD4FxFDKE0" />
+</Accordion>