diff --git a/app/creator/layout.tsx b/app/creator/(home)/layout.tsx
similarity index 100%
rename from app/creator/layout.tsx
rename to app/creator/(home)/layout.tsx
diff --git a/app/creator/page.tsx b/app/creator/(home)/page.tsx
similarity index 100%
rename from app/creator/page.tsx
rename to app/creator/(home)/page.tsx
diff --git a/app/studio/layout.tsx b/app/creator/studio/layout.tsx
similarity index 97%
rename from app/studio/layout.tsx
rename to app/creator/studio/layout.tsx
index a49e6c7..ccdf5fa 100644
--- a/app/studio/layout.tsx
+++ b/app/creator/studio/layout.tsx
@@ -5,7 +5,7 @@ import type { Metadata } from 'next';
 import Image from 'next/image';
 import Link from 'next/link';
 import React from 'react';
-import Sidebar from '../components/common/SideBar';
+import Sidebar from '../../../components/common/SideBar';
 
 export const metadata: Metadata = {
     title: 'Studio',
@@ -97,7 +97,7 @@ function layout({ children }: Props) {
                         {children}
                         </div>
                         {/* Inner Editor SideBar */}
-                        <div className='w-[70px] p-1 md:p-2 bg-white gap-1 flex flex-col justify-between items-center align-middle px-2 md:px-5 border-t-2 border overflow-y-auto no-scrollbar'>
+                        <div className='w-[70px] p-1 md:p-2 bg-white gap-1 flex flex-col  items-center align-middle px-2 md:px-5 border-t-2 border overflow-y-auto no-scrollbar'>
                             <Book1 size={24} color='#555555' className="cursor-pointer hover:opacity-70 my-2" aria-label="Book"/>
                             <Layer size={24} color='#555555' className="cursor-pointer hover:opacity-70 my-2" aria-label="Layers"/>
                             <SearchNormal1 size={24} color='#555555' className="cursor-pointer hover:opacity-70 my-2" aria-label="Search"/>
diff --git a/app/creator/trash/page.tsx b/app/creator/trash/page.tsx
index d0e779e..2017932 100644
--- a/app/creator/trash/page.tsx
+++ b/app/creator/trash/page.tsx
@@ -1,7 +1,7 @@
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
 
-import TrashCards, { Trash } from "@/app/components/cards/TrashCards";
-import EmptyRecords from "@/app/components/common/EmptyRecords";
+import TrashCards, { Trash } from "@/components/cards/TrashCards";
+import EmptyRecords from "@/components/common/EmptyRecords";
 
 const TrashPage = () => {
     const trashData: Trash[] = [
diff --git a/app/studio/page.tsx b/app/studio/page.tsx
deleted file mode 100644
index 36da491..0000000
--- a/app/studio/page.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { Button } from '@/components/ui/button';
-import { AddSquare, Trash } from 'iconsax-react';
-import Image from 'next/image';
-import React from 'react';
-
-export default function Studio() {
-    return (
-        <div className='w-[450px] flex flex-col gap-3 mt-24'>
-            <div className='flex justify-between items-center w-full '>
-                <p className='text-sm' >Page 1/1</p>
-                <div className='flex gap-2'>
-                    <AddSquare size={20} color='#555555' className="cursor-pointer hover:opacity-70 my-2" aria-label="Add page" />
-                    <Trash size={20} color='#555555' className="cursor-pointer hover:opacity-70 my-2" aria-label="Delete page" />
-                </div>
-
-            </div>
-            <div className='bg-white rounded-lg flex justify-around w-[450px] p-5'>
-                <Image src={"/images/Ebook.png"} alt="image1" width={100} height={550} className='w-[350px] h-[450px]' />
-            </div>
-            <Button variant="outline" className='w-full bg-transparent  p-2'>Add new page</Button>
-        </div>
-    )
-}
diff --git a/app/components/cards/TrashCards.tsx b/components/cards/TrashCards.tsx
similarity index 100%
rename from app/components/cards/TrashCards.tsx
rename to components/cards/TrashCards.tsx
diff --git a/app/components/common/ActionButtons.tsx b/components/common/ActionButtons.tsx
similarity index 100%
rename from app/components/common/ActionButtons.tsx
rename to components/common/ActionButtons.tsx
diff --git a/app/components/common/EmptyRecords.tsx b/components/common/EmptyRecords.tsx
similarity index 100%
rename from app/components/common/EmptyRecords.tsx
rename to components/common/EmptyRecords.tsx
diff --git a/app/components/common/SideBar.tsx b/components/common/SideBar.tsx
similarity index 100%
rename from app/components/common/SideBar.tsx
rename to components/common/SideBar.tsx
diff --git a/components/custom/Play_Ground.tsx b/components/custom/Play_Ground.tsx
index e1c84cb..49d5574 100644
--- a/components/custom/Play_Ground.tsx
+++ b/components/custom/Play_Ground.tsx
@@ -2,7 +2,7 @@ import Frame from "./Frame";
 
 export default function PlayGround() {
   return (
-    <div className="w-full">
+    <div className="w-full mt-24">
       <Frame />
     </div>
   );