diff --git a/components/editor/sidebar.tsx b/components/editor/sidebar.tsx
deleted file mode 100644
index 3703471..0000000
--- a/components/editor/sidebar.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import {
-  File,
-  FilePlus,
-  Folder,
-  FolderOpen,
-  FolderPlus,
-  Search,
-} from "lucide-react"
-import Image from "next/image"
-import { getIconForFile } from "vscode-icons-js"
-
-export default function Sidebar() {
-  return (
-    <div className="h-full w-56 flex flex-col text-sm items-start p-2">
-      <div className="flex w-full items-center justify-between h-8 mb-1 ">
-        <div className="text-muted-foreground">EXPLORER</div>
-        <div className="flex space-x-1">
-          <div className="h-6 w-6 text-muted-foreground ml-0.5 flex items-center justify-center translate-x-1 transition-colors bg-transparent hover:bg-muted-foreground/25 cursor-pointer rounded-sm">
-            <FilePlus className="w-4 h-4" />
-          </div>
-          <div className="h-6 w-6 text-muted-foreground ml-0.5 flex items-center justify-center translate-x-1 transition-colors bg-transparent hover:bg-muted-foreground/25 cursor-pointer rounded-sm">
-            <FolderPlus className="w-4 h-4" />
-          </div>
-          <div className="h-6 w-6 text-muted-foreground ml-0.5 flex items-center justify-center translate-x-1 transition-colors bg-transparent hover:bg-muted-foreground/25 cursor-pointer rounded-sm">
-            <Search className="w-4 h-4" />
-          </div>
-        </div>
-      </div>
-      <div className="w-full mt-2">
-        <div className="w-full flex items-center h-6 transition-colors hover:text-muted-foreground cursor-pointer">
-          {getIconForFile("index.html") ? (
-            <Image
-              src={`/icons/${getIconForFile("index.html")}`}
-              alt="File Icon"
-              width={16}
-              height={16}
-              className="mr-2"
-            />
-          ) : (
-            <File className="w-4 h-4 mr-2" />
-          )}
-          index.html
-        </div>
-        <div className="w-full flex items-center h-6 transition-colors hover:text-muted-foreground cursor-pointer">
-          {getIconForFile("index.html") ? (
-            <Image
-              src={`/icons/${getIconForFile("style.css")}`}
-              alt="File Icon"
-              width={16}
-              height={16}
-              className="mr-2"
-            />
-          ) : (
-            <File className="w-4 h-4 mr-2" />
-          )}
-          style.css
-        </div>
-        <div className="w-full flex items-center h-6 transition-colors hover:text-muted-foreground cursor-pointer">
-          <Folder className="w-4 h-4 mr-2" />
-          styles
-        </div>
-      </div>
-    </div>
-  )
-}
diff --git a/components/editor/sidebar/file.tsx b/components/editor/sidebar/file.tsx
new file mode 100644
index 0000000..3c9b390
--- /dev/null
+++ b/components/editor/sidebar/file.tsx
@@ -0,0 +1,20 @@
+"use client"
+
+import Image from "next/image"
+import { getIconForFile } from "vscode-icons-js"
+import { TFile } from "./types"
+
+export default function SidebarFile({ data }: { data: TFile }) {
+  return (
+    <div className="w-full flex items-center h-7 px-1 transition-colors hover:bg-secondary rounded-sm cursor-pointer">
+      <Image
+        src={`/icons/${getIconForFile(data.name)}`}
+        alt="File Icon"
+        width={18}
+        height={18}
+        className="mr-2"
+      />
+      {data.name}
+    </div>
+  )
+}
diff --git a/components/editor/sidebar/folder.tsx b/components/editor/sidebar/folder.tsx
new file mode 100644
index 0000000..fdb764e
--- /dev/null
+++ b/components/editor/sidebar/folder.tsx
@@ -0,0 +1,46 @@
+"use client"
+
+import Image from "next/image"
+import { useState } from "react"
+import { getIconForFolder, getIconForOpenFolder } from "vscode-icons-js"
+import { TFolder } from "./types"
+import SidebarFile from "./file"
+
+export default function SidebarFolder({ data }: { data: TFolder }) {
+  const [isOpen, setIsOpen] = useState(false)
+  const folder = isOpen
+    ? getIconForOpenFolder(data.name)
+    : getIconForFolder(data.name)
+
+  return (
+    <>
+      <div
+        onClick={() => setIsOpen((prev) => !prev)}
+        className="w-full flex items-center h-7 px-1 transition-colors hover:bg-secondary rounded-sm cursor-pointer"
+      >
+        <Image
+          src={`/icons/${folder}`}
+          alt="Folder icon"
+          width={18}
+          height={18}
+          className="mr-2"
+        />
+        {data.name}
+      </div>
+      {isOpen ? (
+        <div className="flex w-full items-stretch">
+          <div className="w-[1px] bg-border mx-2 h-full"></div>
+          <div className="flex flex-col grow">
+            {data.children.map((child) =>
+              child.type === "file" ? (
+                <SidebarFile key={child.id} data={child} />
+              ) : (
+                <SidebarFolder key={child.id} data={child} />
+              )
+            )}
+          </div>
+        </div>
+      ) : null}
+    </>
+  )
+}
diff --git a/components/editor/sidebar/index.tsx b/components/editor/sidebar/index.tsx
new file mode 100644
index 0000000..c92913b
--- /dev/null
+++ b/components/editor/sidebar/index.tsx
@@ -0,0 +1,95 @@
+import { FilePlus, FolderPlus, Search } from "lucide-react"
+import SidebarFile from "./file"
+import SidebarFolder from "./folder"
+import { TFile, TFolder } from "./types"
+
+const data: (TFile | TFolder)[] = [
+  {
+    id: "index.tsx",
+    type: "file",
+    name: "index.tsx",
+  },
+  {
+    id: "components",
+    type: "folder",
+    name: "components",
+    children: [
+      {
+        id: "navbar.tsx",
+        type: "file",
+        name: "navbar.tsx",
+      },
+      {
+        id: "ui",
+        type: "folder",
+        name: "ui",
+        children: [
+          {
+            id: "Button.tsx",
+            type: "file",
+            name: "Button.tsx",
+          },
+          {
+            id: "Input.tsx",
+            type: "file",
+            name: "Input.tsx",
+          },
+        ],
+      },
+    ],
+  },
+  {
+    id: "App.tsx",
+    type: "file",
+    name: "App.tsx",
+  },
+  {
+    id: "styles",
+    type: "folder",
+    name: "styles",
+    children: [
+      {
+        id: "style.css",
+        type: "file",
+        name: "style.css",
+      },
+      {
+        id: "index.css",
+        type: "file",
+        name: "index.css",
+      },
+    ],
+  },
+]
+
+export default function Sidebar() {
+  return (
+    <div className="h-full w-56 flex flex-col text-sm items-start p-2">
+      <div className="flex w-full items-center justify-between h-8 mb-1 ">
+        <div className="text-muted-foreground">EXPLORER</div>
+        <div className="flex space-x-1">
+          <div className="h-6 w-6 text-muted-foreground ml-0.5 flex items-center justify-center translate-x-1 transition-colors bg-transparent hover:bg-muted-foreground/25 cursor-pointer rounded-sm">
+            <FilePlus className="w-4 h-4" />
+          </div>
+          <div className="h-6 w-6 text-muted-foreground ml-0.5 flex items-center justify-center translate-x-1 transition-colors bg-transparent hover:bg-muted-foreground/25 cursor-pointer rounded-sm">
+            <FolderPlus className="w-4 h-4" />
+          </div>
+          <div className="h-6 w-6 text-muted-foreground ml-0.5 flex items-center justify-center translate-x-1 transition-colors bg-transparent hover:bg-muted-foreground/25 cursor-pointer rounded-sm">
+            <Search className="w-4 h-4" />
+          </div>
+        </div>
+      </div>
+      <div className="w-full mt-1 flex flex-col">
+        {/* <SidebarFile name="index.tsx" />
+        <SidebarFolder name="styles" /> */}
+        {data.map((child) =>
+          child.type === "file" ? (
+            <SidebarFile key={child.id} data={child} />
+          ) : (
+            <SidebarFolder key={child.id} data={child} />
+          )
+        )}
+      </div>
+    </div>
+  )
+}
diff --git a/components/editor/sidebar/types.ts b/components/editor/sidebar/types.ts
new file mode 100644
index 0000000..b8e3eae
--- /dev/null
+++ b/components/editor/sidebar/types.ts
@@ -0,0 +1,12 @@
+export type TFolder = {
+  id: string
+  type: "folder"
+  name: string
+  children: (TFile | TFolder)[]
+}
+
+export type TFile = {
+  id: string
+  type: "file"
+  name: string
+}