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"/>

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[] = [

app/studio/page.tsx

@@ -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>
-    )
-}

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>
   );