diff --git a/src/app/(app)/playground/@workspace/components/footer.tsx b/src/app/(app)/playground/@workspace/@editor/components/footer.tsx
similarity index 88%
rename from src/app/(app)/playground/@workspace/components/footer.tsx
rename to src/app/(app)/playground/@workspace/@editor/components/footer.tsx
index 79c58fa..b394351 100644
--- a/src/app/(app)/playground/@workspace/components/footer.tsx
+++ b/src/app/(app)/playground/@workspace/@editor/components/footer.tsx
@@ -4,11 +4,11 @@ import { cn } from "@/lib/utils";
 import { useEffect, useState } from "react";
 import { useCodeEditorState } from "@/store/useCodeEditor";
 
-interface WorkspaceFooterProps {
+interface WorkspaceEditorFooterProps {
   className?: string;
 }
 
-export default function WorkspaceFooter({ className, ...props }: WorkspaceFooterProps) {
+export default function WorkspaceEditorFooter({ className, ...props }: WorkspaceEditorFooterProps) {
   const { editor } = useCodeEditorState();
   const [position, setPosition] = useState<{ lineNumber: number; column: number } | null>(null);
 
diff --git a/src/app/(app)/playground/@workspace/@editor/layout.tsx b/src/app/(app)/playground/@workspace/@editor/layout.tsx
new file mode 100644
index 0000000..a0296a4
--- /dev/null
+++ b/src/app/(app)/playground/@workspace/@editor/layout.tsx
@@ -0,0 +1,14 @@
+import WorkspaceEditorFooter from "@/app/(app)/playground/@workspace/@editor/components/footer";
+
+interface WorkspaceEditorLayoutProps {
+  children: React.ReactNode;
+}
+
+export default function WorkspaceEditorLayout({ children }: WorkspaceEditorLayoutProps) {
+  return (
+    <div className="h-full flex flex-col">
+      {children}
+      <WorkspaceEditorFooter />
+    </div>
+  );
+}
diff --git a/src/app/(app)/playground/@workspace/page.tsx b/src/app/(app)/playground/@workspace/@editor/page.tsx
similarity index 62%
rename from src/app/(app)/playground/@workspace/page.tsx
rename to src/app/(app)/playground/@workspace/@editor/page.tsx
index 6e2714a..453b337 100644
--- a/src/app/(app)/playground/@workspace/page.tsx
+++ b/src/app/(app)/playground/@workspace/@editor/page.tsx
@@ -1,5 +1,5 @@
 import CodeEditor from "@/components/code-editor";
 
-export default function WorkspacePage() {
+export default function WorkspaceEditorPage() {
   return <CodeEditor />;
 }
diff --git a/src/app/(app)/playground/@workspace/layout.tsx b/src/app/(app)/playground/@workspace/layout.tsx
index 596f423..4619536 100644
--- a/src/app/(app)/playground/@workspace/layout.tsx
+++ b/src/app/(app)/playground/@workspace/layout.tsx
@@ -1,35 +1,33 @@
-import { CodeXmlIcon } from "lucide-react";
-import WorkspaceFooter from "./components/footer";
+import { SquarePenIcon } from "lucide-react";
 import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 
 interface WorkspaceLayoutProps {
-  children: React.ReactNode;
+  editor: React.ReactNode;
 }
 
-export default function WorkspaceLayout({ children }: WorkspaceLayoutProps) {
+export default function WorkspaceLayout({ editor }: WorkspaceLayoutProps) {
   return (
-    <Tabs defaultValue="code" className="h-full flex flex-col">
+    <Tabs defaultValue="editor" className="h-full flex flex-col">
       <ScrollArea className="h-9 flex-none bg-muted px-1">
         <TabsList className="gap-1 bg-transparent">
           <TabsTrigger
-            value="code"
+            value="editor"
             className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground rounded-full data-[state=active]:shadow-none"
           >
-            <CodeXmlIcon
+            <SquarePenIcon
               className="-ms-0.5 me-1.5 opacity-60"
               size={16}
               aria-hidden="true"
             />
-            Code
+            Editor
           </TabsTrigger>
         </TabsList>
         <ScrollBar orientation="horizontal" />
       </ScrollArea>
-      <TabsContent value="code" className="grow mt-0">
-        {children}
+      <TabsContent value="editor" className="grow mt-0">
+        {editor}
       </TabsContent>
-      <WorkspaceFooter />
     </Tabs>
   );
 }