diff --git a/app/(admin)/about/loading.tsx b/app/(admin)/about/loading.tsx
index 8991eec..0f7a41b 100644
--- a/app/(admin)/about/loading.tsx
+++ b/app/(admin)/about/loading.tsx
@@ -1,38 +1,41 @@
 import { Skeleton } from '@/components/ui/skeleton';
+import { ContentLayout } from '@/components/admin-panel/content-layout';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 
 export default function AboutLoading() {
   return (
-    <Card className='rounded-lg border-none'>
-      <CardHeader className='mx-[1px] pb-9'>
-        <CardTitle className='text-xl font-semibold'>
-          <Skeleton className='h-7 w-[100px]' />
-        </CardTitle>
-        <Skeleton className='h-5 w-[300px]' />
-      </CardHeader>
-      <CardContent>
-        <div className='flex flex-col gap-4'>
-          <div className='space-y-2'>
-            <Skeleton className='h-5 w-[150px]' />
-            <Skeleton className='h-9 w-full' />
+    <ContentLayout title='About'>
+      <Card className='rounded-lg border-none'>
+        <CardHeader className='mx-[1px] pb-9'>
+          <CardTitle className='text-xl font-semibold'>
+            <Skeleton className='h-7 w-[100px]' />
+          </CardTitle>
+          <Skeleton className='h-5 w-[300px]' />
+        </CardHeader>
+        <CardContent>
+          <div className='flex flex-col gap-4'>
+            <div className='space-y-2'>
+              <Skeleton className='h-5 w-[150px]' />
+              <Skeleton className='h-9 w-full' />
+            </div>
+            <div className='space-y-2'>
+              <Skeleton className='h-5 w-[150px]' />
+              <Skeleton className='h-9 w-full' />
+            </div>
+            <div className='space-y-2'>
+              <Skeleton className='h-5 w-[150px]' />
+              <Skeleton className='h-9 w-full' />
+            </div>
+            <div className='space-y-2'>
+              <Skeleton className='h-5 w-[150px]' />
+              <Skeleton className='h-[118px] w-full' />
+            </div>
+            <div>
+              <Skeleton className='h-9 w-24 mt-2' />
+            </div>
           </div>
-          <div className='space-y-2'>
-            <Skeleton className='h-5 w-[150px]' />
-            <Skeleton className='h-9 w-full' />
-          </div>
-          <div className='space-y-2'>
-            <Skeleton className='h-5 w-[150px]' />
-            <Skeleton className='h-9 w-full' />
-          </div>
-          <div className='space-y-2'>
-            <Skeleton className='h-5 w-[150px]' />
-            <Skeleton className='h-[118px] w-full' />
-          </div>
-          <div>
-            <Skeleton className='h-9 w-24 mt-2' />
-          </div>
-        </div>
-      </CardContent>
-    </Card>
+        </CardContent>
+      </Card>
+    </ContentLayout>
   );
 }
diff --git a/app/(admin)/about/page.tsx b/app/(admin)/about/page.tsx
index 40cfef9..2cb2e1f 100644
--- a/app/(admin)/about/page.tsx
+++ b/app/(admin)/about/page.tsx
@@ -3,12 +3,13 @@ import { redirect } from 'next/navigation';
 import prismadb from '@/lib/prismadb';
 import { currentUser } from '@/lib/authentication';
 import AboutForm from '@/components/admin/about-form';
+import { ContentLayout } from '@/components/admin-panel/content-layout';
 import {
   Card,
-  CardContent,
-  CardDescription,
+  CardTitle,
   CardHeader,
-  CardTitle
+  CardContent,
+  CardDescription
 } from '@/components/ui/card';
 
 export default async function AboutPage() {
@@ -25,16 +26,18 @@ export default async function AboutPage() {
   });
 
   return (
-    <Card className='rounded-lg border-none'>
-      <CardHeader className='mx-[1px] pb-9'>
-        <CardTitle className='text-xl font-semibold'>About</CardTitle>
-        <CardDescription>
-          Manage your about section informations.
-        </CardDescription>
-      </CardHeader>
-      <CardContent>
-        <AboutForm about={about} />
-      </CardContent>
-    </Card>
+    <ContentLayout title='About'>
+      <Card className='rounded-lg border-none'>
+        <CardHeader className='mx-[1px] pb-9'>
+          <CardTitle className='text-xl font-semibold'>About</CardTitle>
+          <CardDescription>
+            Manage your about section informations.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <AboutForm about={about} />
+        </CardContent>
+      </Card>
+    </ContentLayout>
   );
 }
diff --git a/app/(admin)/account/loading.tsx b/app/(admin)/account/loading.tsx
index b4b9df3..4e59bf8 100644
--- a/app/(admin)/account/loading.tsx
+++ b/app/(admin)/account/loading.tsx
@@ -1,63 +1,66 @@
 import { Skeleton } from '@/components/ui/skeleton';
+import { ContentLayout } from '@/components/admin-panel/content-layout';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 
 export default function AccountLoading() {
   return (
-    <div className='grid lg:grid-cols-2 gap-4'>
-      <Card className='rounded-lg border-none'>
-        <CardHeader className='mx-[1px] pb-9'>
-          <CardTitle className='text-xl font-semibold'>
-            <Skeleton className='h-7 w-[100px]' />
-          </CardTitle>
-          <Skeleton className='h-5 w-[300px]' />
-        </CardHeader>
-        <CardContent>
-          <div className='flex flex-col gap-4'>
-            <div className='space-y-2'>
-              <Skeleton className='h-5 w-[150px]' />
-              <Skeleton className='h-9 w-full' />
+    <ContentLayout title='Account'>
+      <div className='grid lg:grid-cols-2 gap-4'>
+        <Card className='rounded-lg border-none'>
+          <CardHeader className='mx-[1px] pb-9'>
+            <CardTitle className='text-xl font-semibold'>
+              <Skeleton className='h-7 w-[100px]' />
+            </CardTitle>
+            <Skeleton className='h-5 w-[300px]' />
+          </CardHeader>
+          <CardContent>
+            <div className='flex flex-col gap-4'>
+              <div className='space-y-2'>
+                <Skeleton className='h-5 w-[150px]' />
+                <Skeleton className='h-9 w-full' />
+              </div>
+              <div className='space-y-2'>
+                <Skeleton className='h-5 w-[150px]' />
+                <Skeleton className='h-9 w-full' />
+              </div>
+              <div className='space-y-2'>
+                <Skeleton className='h-5 w-[150px]' />
+                <Skeleton className='h-9 w-full' />
+              </div>
+              <div>
+                <Skeleton className='h-9 w-24 mt-2' />
+              </div>
             </div>
-            <div className='space-y-2'>
-              <Skeleton className='h-5 w-[150px]' />
-              <Skeleton className='h-9 w-full' />
+          </CardContent>
+        </Card>
+        <Card className='rounded-lg border-none'>
+          <CardHeader className='mx-[1px] pb-9'>
+            <CardTitle className='text-xl font-semibold'>
+              <Skeleton className='h-7 w-[100px]' />
+            </CardTitle>
+            <Skeleton className='h-5 w-[300px]' />
+          </CardHeader>
+          <CardContent>
+            <div className='flex flex-col gap-4'>
+              <div className='space-y-2'>
+                <Skeleton className='h-5 w-[150px]' />
+                <Skeleton className='h-9 w-full' />
+              </div>
+              <div className='space-y-2'>
+                <Skeleton className='h-5 w-[150px]' />
+                <Skeleton className='h-9 w-full' />
+              </div>
+              <div className='space-y-2'>
+                <Skeleton className='h-5 w-[150px]' />
+                <Skeleton className='h-9 w-full' />
+              </div>
+              <div>
+                <Skeleton className='h-9 w-24 mt-2' />
+              </div>
             </div>
-            <div className='space-y-2'>
-              <Skeleton className='h-5 w-[150px]' />
-              <Skeleton className='h-9 w-full' />
-            </div>
-            <div>
-              <Skeleton className='h-9 w-24 mt-2' />
-            </div>
-          </div>
-        </CardContent>
-      </Card>
-      <Card className='rounded-lg border-none'>
-        <CardHeader className='mx-[1px] pb-9'>
-          <CardTitle className='text-xl font-semibold'>
-            <Skeleton className='h-7 w-[100px]' />
-          </CardTitle>
-          <Skeleton className='h-5 w-[300px]' />
-        </CardHeader>
-        <CardContent>
-          <div className='flex flex-col gap-4'>
-            <div className='space-y-2'>
-              <Skeleton className='h-5 w-[150px]' />
-              <Skeleton className='h-9 w-full' />
-            </div>
-            <div className='space-y-2'>
-              <Skeleton className='h-5 w-[150px]' />
-              <Skeleton className='h-9 w-full' />
-            </div>
-            <div className='space-y-2'>
-              <Skeleton className='h-5 w-[150px]' />
-              <Skeleton className='h-9 w-full' />
-            </div>
-            <div>
-              <Skeleton className='h-9 w-24 mt-2' />
-            </div>
-          </div>
-        </CardContent>
-      </Card>
-    </div>
+          </CardContent>
+        </Card>
+      </div>
+    </ContentLayout>
   );
 }
diff --git a/app/(admin)/account/page.tsx b/app/(admin)/account/page.tsx
index 34cad3b..0054e6c 100644
--- a/app/(admin)/account/page.tsx
+++ b/app/(admin)/account/page.tsx
@@ -4,12 +4,13 @@ import prismadb from '@/lib/prismadb';
 import { currentUser } from '@/lib/authentication';
 import ProfileForm from '@/components/admin/profile-form';
 import PasswordForm from '@/components/admin/password-form';
+import { ContentLayout } from '@/components/admin-panel/content-layout';
 import {
   Card,
-  CardContent,
-  CardDescription,
+  CardTitle,
   CardHeader,
-  CardTitle
+  CardContent,
+  CardDescription
 } from '@/components/ui/card';
 
 export default async function AccountPage() {
@@ -31,27 +32,29 @@ export default async function AccountPage() {
   });
 
   return (
-    <div className='grid lg:grid-cols-2 gap-4'>
-      <Card className='rounded-lg border-none'>
-        <CardHeader className='mx-[1px] pb-9'>
-          <CardTitle className='text-xl font-semibold'>Profile</CardTitle>
-          <CardDescription>
-            Manage your account profile informations.
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <ProfileForm user={loggedInUser} />
-        </CardContent>
-      </Card>
-      <Card className='rounded-lg border-none'>
-        <CardHeader className='mx-[1px] pb-9'>
-          <CardTitle className='text-xl font-semibold'>Password</CardTitle>
-          <CardDescription>Manage your account password.</CardDescription>
-        </CardHeader>
-        <CardContent>
-          <PasswordForm />
-        </CardContent>
-      </Card>
-    </div>
+    <ContentLayout title='Account'>
+      <div className='grid lg:grid-cols-2 gap-4'>
+        <Card className='rounded-lg border-none'>
+          <CardHeader className='mx-[1px] pb-9'>
+            <CardTitle className='text-xl font-semibold'>Profile</CardTitle>
+            <CardDescription>
+              Manage your account profile informations.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <ProfileForm user={loggedInUser} />
+          </CardContent>
+        </Card>
+        <Card className='rounded-lg border-none'>
+          <CardHeader className='mx-[1px] pb-9'>
+            <CardTitle className='text-xl font-semibold'>Password</CardTitle>
+            <CardDescription>Manage your account password.</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <PasswordForm />
+          </CardContent>
+        </Card>
+      </div>
+    </ContentLayout>
   );
 }
diff --git a/app/(admin)/dashboard/loading.tsx b/app/(admin)/dashboard/loading.tsx
index dde808c..60b4108 100644
--- a/app/(admin)/dashboard/loading.tsx
+++ b/app/(admin)/dashboard/loading.tsx
@@ -1,9 +1,10 @@
 import { Skeleton } from '@/components/ui/skeleton';
+import { ContentLayout } from '@/components/admin-panel/content-layout';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 
 export default function DashboardLoading() {
   return (
-    <>
+    <ContentLayout title='Dashboard'>
       <div className='flex items-center justify-between mb-4'>
         <Skeleton className='h-9 w-[222px]' />
         <div className='flex items-center'>
@@ -68,6 +69,6 @@ export default function DashboardLoading() {
           </CardContent>
         </Card>
       </div>
-    </>
+    </ContentLayout>
   );
 }
diff --git a/app/(admin)/dashboard/page.tsx b/app/(admin)/dashboard/page.tsx
index 7ff79c4..2c0c665 100644
--- a/app/(admin)/dashboard/page.tsx
+++ b/app/(admin)/dashboard/page.tsx
@@ -8,12 +8,13 @@ import { currentUser } from '@/lib/authentication';
 import MiniCard from '@/components/admin/mini-card';
 import RecentProject from '@/components/admin/recent-project';
 import QualificationTab from '@/components/admin/qualification-tab';
+import { ContentLayout } from '@/components/admin-panel/content-layout';
 import {
   Card,
-  CardContent,
-  CardDescription,
+  CardTitle,
   CardHeader,
-  CardTitle
+  CardContent,
+  CardDescription
 } from '@/components/ui/card';
 
 export default async function DashboardPage() {
@@ -90,7 +91,7 @@ export default async function DashboardPage() {
       : 0;
 
   return (
-    <>
+    <ContentLayout title='Dashboard'>
       <div className='flex items-center justify-between mb-4'>
         <h2 className='text-2xl md:text-3xl font-bold tracking-tight'>
           Welcome {user.name}
@@ -171,6 +172,6 @@ export default async function DashboardPage() {
           </CardContent>
         </Card>
       </div>
-    </>
+    </ContentLayout>
   );
 }
diff --git a/app/(admin)/experience/loading.tsx b/app/(admin)/experience/loading.tsx
index 2cf9e00..80c91ec 100644
--- a/app/(admin)/experience/loading.tsx
+++ b/app/(admin)/experience/loading.tsx
@@ -1,78 +1,89 @@
 import { cn } from '@/lib/utils';
 import { Skeleton } from '@/components/ui/skeleton';
+import { ContentLayout } from '@/components/admin-panel/content-layout';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 
 export default function ExperienceLoading() {
   return (
-    <div className='grid lg:grid-cols-2 gap-4'>
-      <Card className='rounded-lg border-none'>
-        <CardHeader className='mx-[1px] pb-9'>
-          <CardTitle className='text-xl font-semibold'>
-            <Skeleton className='h-7 w-[150px]' />
-          </CardTitle>
-          <Skeleton className='h-5 w-[300px]' />
-        </CardHeader>
-        <CardContent>
-          <div className='flex flex-col'>
-            {[...Array(10)].map((_, i) => (
-              <div
-                key={i}
-                className='flex items-end gap-2 sm:gap-3 justify-between'
-              >
-                <div className='grow grid grid-cols-2 gap-2 sm:gap-3'>
-                  <div className='space-y-2'>
-                    <Skeleton className={cn('h-6 w-7', i !== 0 && 'hidden')} />
-                    <Skeleton className='h-9 w-full' />
+    <ContentLayout title='Experience'>
+      <div className='grid lg:grid-cols-2 gap-4'>
+        <Card className='rounded-lg border-none'>
+          <CardHeader className='mx-[1px] pb-9'>
+            <CardTitle className='text-xl font-semibold'>
+              <Skeleton className='h-7 w-[150px]' />
+            </CardTitle>
+            <Skeleton className='h-5 w-[300px]' />
+          </CardHeader>
+          <CardContent>
+            <div className='flex flex-col'>
+              {[...Array(10)].map((_, i) => (
+                <div
+                  key={i}
+                  className='flex items-end gap-2 sm:gap-3 justify-between'
+                >
+                  <div className='grow grid grid-cols-2 gap-2 sm:gap-3'>
+                    <div className='space-y-2'>
+                      <Skeleton
+                        className={cn('h-6 w-7', i !== 0 && 'hidden')}
+                      />
+                      <Skeleton className='h-9 w-full' />
+                    </div>
+                    <div className='space-y-2'>
+                      <Skeleton
+                        className={cn('h-5 w-9', i !== 0 && 'hidden')}
+                      />
+                      <Skeleton className='h-9 w-full' />
+                    </div>
                   </div>
-                  <div className='space-y-2'>
-                    <Skeleton className={cn('h-5 w-9', i !== 0 && 'hidden')} />
-                    <Skeleton className='h-9 w-full' />
+                  <div className='grow-0'>
+                    <Skeleton className='h-9 w-9' />
                   </div>
                 </div>
-                <div className='grow-0'>
-                  <Skeleton className='h-9 w-9' />
-                </div>
-              </div>
-            ))}
-            <Skeleton className='h-8 w-[75px] mt-2' />
-            <Skeleton className='h-9 w-24 mt-5' />
-          </div>
-        </CardContent>
-      </Card>
-      <Card className='rounded-lg border-none'>
-        <CardHeader className='mx-[1px] pb-9'>
-          <CardTitle className='text-xl font-semibold'>
-            <Skeleton className='h-7 w-[150px]' />
-          </CardTitle>
-          <Skeleton className='h-5 w-[300px]' />
-        </CardHeader>
-        <CardContent>
-          <div className='flex flex-col'>
-            {[...Array(10)].map((_, i) => (
-              <div
-                key={i}
-                className='flex items-end gap-2 sm:gap-3 justify-between'
-              >
-                <div className='grow grid grid-cols-2 gap-2 sm:gap-3'>
-                  <div className='space-y-2'>
-                    <Skeleton className={cn('h-5 w-7', i !== 0 && 'hidden')} />
-                    <Skeleton className='h-9 w-full' />
+              ))}
+              <Skeleton className='h-8 w-[75px] mt-2' />
+              <Skeleton className='h-9 w-24 mt-5' />
+            </div>
+          </CardContent>
+        </Card>
+        <Card className='rounded-lg border-none'>
+          <CardHeader className='mx-[1px] pb-9'>
+            <CardTitle className='text-xl font-semibold'>
+              <Skeleton className='h-7 w-[150px]' />
+            </CardTitle>
+            <Skeleton className='h-5 w-[300px]' />
+          </CardHeader>
+          <CardContent>
+            <div className='flex flex-col'>
+              {[...Array(10)].map((_, i) => (
+                <div
+                  key={i}
+                  className='flex items-end gap-2 sm:gap-3 justify-between'
+                >
+                  <div className='grow grid grid-cols-2 gap-2 sm:gap-3'>
+                    <div className='space-y-2'>
+                      <Skeleton
+                        className={cn('h-5 w-7', i !== 0 && 'hidden')}
+                      />
+                      <Skeleton className='h-9 w-full' />
+                    </div>
+                    <div className='space-y-2'>
+                      <Skeleton
+                        className={cn('h-5 w-9', i !== 0 && 'hidden')}
+                      />
+                      <Skeleton className='h-9 w-full' />
+                    </div>
                   </div>
-                  <div className='space-y-2'>
-                    <Skeleton className={cn('h-5 w-9', i !== 0 && 'hidden')} />
-                    <Skeleton className='h-9 w-full' />
+                  <div className='grow-0'>
+                    <Skeleton className='h-9 w-9' />
                   </div>
                 </div>
-                <div className='grow-0'>
-                  <Skeleton className='h-9 w-9' />
-                </div>
-              </div>
-            ))}
-            <Skeleton className='h-8 w-[75px] mt-2' />
-            <Skeleton className='h-9 w-24 mt-5' />
-          </div>
-        </CardContent>
-      </Card>
-    </div>
+              ))}
+              <Skeleton className='h-8 w-[75px] mt-2' />
+              <Skeleton className='h-9 w-24 mt-5' />
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </ContentLayout>
   );
 }
diff --git a/app/(admin)/experience/page.tsx b/app/(admin)/experience/page.tsx
index 9bf0ca0..3efe462 100644
--- a/app/(admin)/experience/page.tsx
+++ b/app/(admin)/experience/page.tsx
@@ -3,12 +3,13 @@ import { redirect } from 'next/navigation';
 import prismadb from '@/lib/prismadb';
 import { currentUser } from '@/lib/authentication';
 import ExperienceForm from '@/components/admin/experience-form';
+import { ContentLayout } from '@/components/admin-panel/content-layout';
 import {
   Card,
-  CardContent,
-  CardDescription,
+  CardTitle,
   CardHeader,
-  CardTitle
+  CardContent,
+  CardDescription
 } from '@/components/ui/card';
 
 export default async function ExperiencePage() {
@@ -33,39 +34,41 @@ export default async function ExperiencePage() {
   });
 
   return (
-    <div className='grid lg:grid-cols-2 gap-4'>
-      <Card className='rounded-lg border-none'>
-        <CardHeader className='mx-[1px] pb-9'>
-          <CardTitle className='text-xl font-semibold'>
-            Frontend Development
-          </CardTitle>
-          <CardDescription>
-            Manage your frontend development section informations.
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <ExperienceForm
-            experienceType='FRONTEND'
-            experienceItems={frontendItems}
-          />
-        </CardContent>
-      </Card>
-      <Card className='rounded-lg border-none'>
-        <CardHeader className='mx-[1px] pb-9'>
-          <CardTitle className='text-xl font-semibold'>
-            Backend Development
-          </CardTitle>
-          <CardDescription>
-            Manage your backend development section informations.
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <ExperienceForm
-            experienceType='BACKEND'
-            experienceItems={backendItems}
-          />
-        </CardContent>
-      </Card>
-    </div>
+    <ContentLayout title='Experience'>
+      <div className='grid lg:grid-cols-2 gap-4'>
+        <Card className='rounded-lg border-none'>
+          <CardHeader className='mx-[1px] pb-9'>
+            <CardTitle className='text-xl font-semibold'>
+              Frontend Development
+            </CardTitle>
+            <CardDescription>
+              Manage your frontend development section informations.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <ExperienceForm
+              experienceType='FRONTEND'
+              experienceItems={frontendItems}
+            />
+          </CardContent>
+        </Card>
+        <Card className='rounded-lg border-none'>
+          <CardHeader className='mx-[1px] pb-9'>
+            <CardTitle className='text-xl font-semibold'>
+              Backend Development
+            </CardTitle>
+            <CardDescription>
+              Manage your backend development section informations.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <ExperienceForm
+              experienceType='BACKEND'
+              experienceItems={backendItems}
+            />
+          </CardContent>
+        </Card>
+      </div>
+    </ContentLayout>
   );
 }
diff --git a/app/(admin)/expertise/loading.tsx b/app/(admin)/expertise/loading.tsx
index 78d8354..f399a17 100644
--- a/app/(admin)/expertise/loading.tsx
+++ b/app/(admin)/expertise/loading.tsx
@@ -1,109 +1,127 @@
 import { cn } from '@/lib/utils';
 import { Skeleton } from '@/components/ui/skeleton';
+import { ContentLayout } from '@/components/admin-panel/content-layout';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 
 export default function ExpertiseLoading() {
   return (
-    <div className='grid lg:grid-cols-2 gap-4'>
-      <Card className='rounded-lg border-none'>
-        <CardHeader className='mx-[1px] pb-9'>
-          <CardTitle className='text-xl font-semibold'>
-            <Skeleton className='h-7 w-[150px]' />
-          </CardTitle>
-          <Skeleton className='h-5 w-[300px]' />
-        </CardHeader>
-        <CardContent>
-          <div className='flex flex-col'>
-            {[...Array(6)].map((_, i) => (
-              <div
-                key={i}
-                className='flex items-end gap-2 sm:gap-3 justify-between'
-              >
-                <div className='grow'>
-                  <div className='space-y-2'>
-                    <Skeleton className={cn('h-6 w-12', i !== 0 && 'hidden')} />
-                    <Skeleton
-                      className={cn('h-[23px] w-[200px]', i !== 0 && 'hidden')}
-                    />
-                    <Skeleton className='h-9 w-full' />
+    <ContentLayout title='Expertise'>
+      <div className='grid lg:grid-cols-2 gap-4'>
+        <Card className='rounded-lg border-none'>
+          <CardHeader className='mx-[1px] pb-9'>
+            <CardTitle className='text-xl font-semibold'>
+              <Skeleton className='h-7 w-[150px]' />
+            </CardTitle>
+            <Skeleton className='h-5 w-[300px]' />
+          </CardHeader>
+          <CardContent>
+            <div className='flex flex-col'>
+              {[...Array(6)].map((_, i) => (
+                <div
+                  key={i}
+                  className='flex items-end gap-2 sm:gap-3 justify-between'
+                >
+                  <div className='grow'>
+                    <div className='space-y-2'>
+                      <Skeleton
+                        className={cn('h-6 w-12', i !== 0 && 'hidden')}
+                      />
+                      <Skeleton
+                        className={cn(
+                          'h-[23px] w-[200px]',
+                          i !== 0 && 'hidden'
+                        )}
+                      />
+                      <Skeleton className='h-9 w-full' />
+                    </div>
                   </div>
-                </div>
-                <div className='grow-0'>
-                  <Skeleton className='h-9 w-9' />
-                </div>
-              </div>
-            ))}
-            <Skeleton className='h-8 w-[75px] mt-2' />
-            <Skeleton className='h-9 w-24 mt-5' />
-          </div>
-        </CardContent>
-      </Card>
-      <Card className='rounded-lg border-none'>
-        <CardHeader className='mx-[1px] pb-9'>
-          <CardTitle className='text-xl font-semibold'>
-            <Skeleton className='h-7 w-[150px]' />
-          </CardTitle>
-          <Skeleton className='h-5 w-[300px]' />
-        </CardHeader>
-        <CardContent>
-          <div className='flex flex-col'>
-            {[...Array(6)].map((_, i) => (
-              <div
-                key={i}
-                className='flex items-end gap-2 sm:gap-3 justify-between'
-              >
-                <div className='grow'>
-                  <div className='space-y-2'>
-                    <Skeleton className={cn('h-6 w-12', i !== 0 && 'hidden')} />
-                    <Skeleton
-                      className={cn('h-[23px] w-[200px]', i !== 0 && 'hidden')}
-                    />
-                    <Skeleton className='h-9 w-full' />
+                  <div className='grow-0'>
+                    <Skeleton className='h-9 w-9' />
                   </div>
                 </div>
-                <div className='grow-0'>
-                  <Skeleton className='h-9 w-9' />
-                </div>
-              </div>
-            ))}
-            <Skeleton className='h-8 w-[75px] mt-2' />
-            <Skeleton className='h-9 w-24 mt-5' />
-          </div>
-        </CardContent>
-      </Card>
-      <Card className='lg:col-span-2 rounded-lg border-none'>
-        <CardHeader className='mx-[1px] pb-9'>
-          <CardTitle className='text-xl font-semibold'>
-            <Skeleton className='h-7 w-[150px]' />
-          </CardTitle>
-          <Skeleton className='h-5 w-[300px]' />
-        </CardHeader>
-        <CardContent>
-          <div className='flex flex-col'>
-            {[...Array(5)].map((_, i) => (
-              <div
-                key={i}
-                className='flex items-end gap-2 sm:gap-3 justify-between'
-              >
-                <div className='grow'>
-                  <div className='space-y-2'>
-                    <Skeleton className={cn('h-6 w-12', i !== 0 && 'hidden')} />
-                    <Skeleton
-                      className={cn('h-[23px] w-[200px]', i !== 0 && 'hidden')}
-                    />
-                    <Skeleton className='h-9 w-full' />
+              ))}
+              <Skeleton className='h-8 w-[75px] mt-2' />
+              <Skeleton className='h-9 w-24 mt-5' />
+            </div>
+          </CardContent>
+        </Card>
+        <Card className='rounded-lg border-none'>
+          <CardHeader className='mx-[1px] pb-9'>
+            <CardTitle className='text-xl font-semibold'>
+              <Skeleton className='h-7 w-[150px]' />
+            </CardTitle>
+            <Skeleton className='h-5 w-[300px]' />
+          </CardHeader>
+          <CardContent>
+            <div className='flex flex-col'>
+              {[...Array(6)].map((_, i) => (
+                <div
+                  key={i}
+                  className='flex items-end gap-2 sm:gap-3 justify-between'
+                >
+                  <div className='grow'>
+                    <div className='space-y-2'>
+                      <Skeleton
+                        className={cn('h-6 w-12', i !== 0 && 'hidden')}
+                      />
+                      <Skeleton
+                        className={cn(
+                          'h-[23px] w-[200px]',
+                          i !== 0 && 'hidden'
+                        )}
+                      />
+                      <Skeleton className='h-9 w-full' />
+                    </div>
+                  </div>
+                  <div className='grow-0'>
+                    <Skeleton className='h-9 w-9' />
                   </div>
                 </div>
-                <div className='grow-0'>
-                  <Skeleton className='h-9 w-9' />
+              ))}
+              <Skeleton className='h-8 w-[75px] mt-2' />
+              <Skeleton className='h-9 w-24 mt-5' />
+            </div>
+          </CardContent>
+        </Card>
+        <Card className='lg:col-span-2 rounded-lg border-none'>
+          <CardHeader className='mx-[1px] pb-9'>
+            <CardTitle className='text-xl font-semibold'>
+              <Skeleton className='h-7 w-[150px]' />
+            </CardTitle>
+            <Skeleton className='h-5 w-[300px]' />
+          </CardHeader>
+          <CardContent>
+            <div className='flex flex-col'>
+              {[...Array(5)].map((_, i) => (
+                <div
+                  key={i}
+                  className='flex items-end gap-2 sm:gap-3 justify-between'
+                >
+                  <div className='grow'>
+                    <div className='space-y-2'>
+                      <Skeleton
+                        className={cn('h-6 w-12', i !== 0 && 'hidden')}
+                      />
+                      <Skeleton
+                        className={cn(
+                          'h-[23px] w-[200px]',
+                          i !== 0 && 'hidden'
+                        )}
+                      />
+                      <Skeleton className='h-9 w-full' />
+                    </div>
+                  </div>
+                  <div className='grow-0'>
+                    <Skeleton className='h-9 w-9' />
+                  </div>
                 </div>
-              </div>
-            ))}
-            <Skeleton className='h-8 w-[75px] mt-2' />
-            <Skeleton className='h-9 w-24 mt-5' />
-          </div>
-        </CardContent>
-      </Card>
-    </div>
+              ))}
+              <Skeleton className='h-8 w-[75px] mt-2' />
+              <Skeleton className='h-9 w-24 mt-5' />
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </ContentLayout>
   );
 }
diff --git a/app/(admin)/expertise/page.tsx b/app/(admin)/expertise/page.tsx
index 786310b..7ed76c8 100644
--- a/app/(admin)/expertise/page.tsx
+++ b/app/(admin)/expertise/page.tsx
@@ -3,12 +3,13 @@ import { redirect } from 'next/navigation';
 import prismadb from '@/lib/prismadb';
 import { currentUser } from '@/lib/authentication';
 import ExpertiseForm from '@/components/admin/expertise-form';
+import { ContentLayout } from '@/components/admin-panel/content-layout';
 import {
   Card,
-  CardContent,
-  CardDescription,
+  CardTitle,
   CardHeader,
-  CardTitle
+  CardContent,
+  CardDescription
 } from '@/components/ui/card';
 
 export default async function ExpertisePage() {
@@ -40,55 +41,57 @@ export default async function ExpertisePage() {
   });
 
   return (
-    <div className='grid lg:grid-cols-2 gap-4'>
-      <Card className='rounded-lg border-none'>
-        <CardHeader className='mx-[1px] pb-9'>
-          <CardTitle className='text-xl font-semibold'>
-            SEO Optimization
-          </CardTitle>
-          <CardDescription>
-            Manage your SEO optimization section informations.
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <ExpertiseForm
-            expertiseType='SEOOPTIMIZATION'
-            expertiseItems={seoOptimizationItems}
-          />
-        </CardContent>
-      </Card>
-      <Card className='rounded-lg border-none'>
-        <CardHeader className='mx-[1px] pb-9'>
-          <CardTitle className='text-xl font-semibold'>
-            Web Development
-          </CardTitle>
-          <CardDescription>
-            Manage your web development section informations.
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <ExpertiseForm
-            expertiseType='WEBDEVELOPMENT'
-            expertiseItems={webDevelopmentItems}
-          />
-        </CardContent>
-      </Card>
-      <Card className='lg:col-span-2 rounded-lg border-none'>
-        <CardHeader className='mx-[1px] pb-9'>
-          <CardTitle className='text-xl font-semibold'>
-            Content Creation
-          </CardTitle>
-          <CardDescription>
-            Manage your content creation section informations.
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <ExpertiseForm
-            expertiseType='CONTENTCREATION'
-            expertiseItems={contentCreationItems}
-          />
-        </CardContent>
-      </Card>
-    </div>
+    <ContentLayout title='Expertise'>
+      <div className='grid lg:grid-cols-2 gap-4'>
+        <Card className='rounded-lg border-none'>
+          <CardHeader className='mx-[1px] pb-9'>
+            <CardTitle className='text-xl font-semibold'>
+              SEO Optimization
+            </CardTitle>
+            <CardDescription>
+              Manage your SEO optimization section informations.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <ExpertiseForm
+              expertiseType='SEOOPTIMIZATION'
+              expertiseItems={seoOptimizationItems}
+            />
+          </CardContent>
+        </Card>
+        <Card className='rounded-lg border-none'>
+          <CardHeader className='mx-[1px] pb-9'>
+            <CardTitle className='text-xl font-semibold'>
+              Web Development
+            </CardTitle>
+            <CardDescription>
+              Manage your web development section informations.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <ExpertiseForm
+              expertiseType='WEBDEVELOPMENT'
+              expertiseItems={webDevelopmentItems}
+            />
+          </CardContent>
+        </Card>
+        <Card className='lg:col-span-2 rounded-lg border-none'>
+          <CardHeader className='mx-[1px] pb-9'>
+            <CardTitle className='text-xl font-semibold'>
+              Content Creation
+            </CardTitle>
+            <CardDescription>
+              Manage your content creation section informations.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <ExpertiseForm
+              expertiseType='CONTENTCREATION'
+              expertiseItems={contentCreationItems}
+            />
+          </CardContent>
+        </Card>
+      </div>
+    </ContentLayout>
   );
 }
diff --git a/app/(admin)/layout.tsx b/app/(admin)/layout.tsx
index 933b281..cac32f7 100644
--- a/app/(admin)/layout.tsx
+++ b/app/(admin)/layout.tsx
@@ -3,10 +3,9 @@
 import { cn } from '@/lib/utils';
 import { useStore } from '@/hooks/use-store';
 import { EdgeStoreProvider } from '@/lib/edgestore';
-import { Footer } from '@/components/admin-panel/footer';
-import Navbar from '@/components/admin-panel/navbar';
 import Sidebar from '@/components/admin-panel/sidebar';
 import ModalProvider from '@/providers/modal-provider';
+import { Footer } from '@/components/admin-panel/footer';
 import { useSidebarToggle } from '@/hooks/use-sidebar-toggle';
 
 export default function AdminLayout({
@@ -25,8 +24,7 @@ export default function AdminLayout({
           sidebar?.isOpen === false ? 'lg:ml-[90px]' : 'lg:ml-72'
         )}
       >
-        <Navbar />
-        <div className='container pt-8 pb-8 px-4 sm:px-8'>{children}</div>
+        {children}
       </main>
       <footer
         className={cn(
diff --git a/app/(admin)/miscellaneous/loading.tsx b/app/(admin)/miscellaneous/loading.tsx
index 4ba75c5..b636dad 100644
--- a/app/(admin)/miscellaneous/loading.tsx
+++ b/app/(admin)/miscellaneous/loading.tsx
@@ -1,51 +1,59 @@
 import { cn } from '@/lib/utils';
 import { Skeleton } from '@/components/ui/skeleton';
+import { ContentLayout } from '@/components/admin-panel/content-layout';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 
 export default function MiscellaneousLoading() {
   return (
-    <Card className='rounded-lg border-none'>
-      <CardHeader className='mx-[1px] pb-9'>
-        <CardTitle className='text-xl font-semibold'>
-          <Skeleton className='h-7 w-[100px]' />
-        </CardTitle>
-        <Skeleton className='h-5 w-[300px]' />
-      </CardHeader>
-      <CardContent>
-        <div className='grid lg:grid-cols-2 gap-4'>
-          {[...Array(10)].map((_, i) => (
-            <div key={i} className='space-y-2'>
-              <Skeleton className='h-5 w-[150px]' />
-              <Skeleton className='h-9 w-full' />
-            </div>
-          ))}
-          <div className='lg:col-span-2 mt-7'>
-            {[...Array(2)].map((_, i) => (
-              <div
-                key={i}
-                className='flex items-end gap-2 sm:gap-3 justify-between'
-              >
-                <div className='grow'>
-                  <div className='space-y-2'>
-                    <Skeleton className={cn('h-6 w-12', i !== 0 && 'hidden')} />
-                    <Skeleton
-                      className={cn('h-[23px] w-[200px]', i !== 0 && 'hidden')}
-                    />
-                    <Skeleton className='h-9 w-full' />
-                  </div>
-                </div>
-                <div className='grow-0'>
-                  <Skeleton className='h-9 w-9' />
-                </div>
+    <ContentLayout title='Miscellaneous'>
+      <Card className='rounded-lg border-none'>
+        <CardHeader className='mx-[1px] pb-9'>
+          <CardTitle className='text-xl font-semibold'>
+            <Skeleton className='h-7 w-[100px]' />
+          </CardTitle>
+          <Skeleton className='h-5 w-[300px]' />
+        </CardHeader>
+        <CardContent>
+          <div className='grid lg:grid-cols-2 gap-4'>
+            {[...Array(10)].map((_, i) => (
+              <div key={i} className='space-y-2'>
+                <Skeleton className='h-5 w-[150px]' />
+                <Skeleton className='h-9 w-full' />
               </div>
             ))}
-            <Skeleton className='h-8 w-[75px] mt-2' />
-          </div>
-          <div>
-            <Skeleton className='h-9 w-24 mt-2' />
+            <div className='lg:col-span-2 mt-7'>
+              {[...Array(2)].map((_, i) => (
+                <div
+                  key={i}
+                  className='flex items-end gap-2 sm:gap-3 justify-between'
+                >
+                  <div className='grow'>
+                    <div className='space-y-2'>
+                      <Skeleton
+                        className={cn('h-6 w-12', i !== 0 && 'hidden')}
+                      />
+                      <Skeleton
+                        className={cn(
+                          'h-[23px] w-[200px]',
+                          i !== 0 && 'hidden'
+                        )}
+                      />
+                      <Skeleton className='h-9 w-full' />
+                    </div>
+                  </div>
+                  <div className='grow-0'>
+                    <Skeleton className='h-9 w-9' />
+                  </div>
+                </div>
+              ))}
+              <Skeleton className='h-8 w-[75px] mt-2' />
+            </div>
+            <div>
+              <Skeleton className='h-9 w-24 mt-2' />
+            </div>
           </div>
-        </div>
-      </CardContent>
-    </Card>
+        </CardContent>
+      </Card>
+    </ContentLayout>
   );
 }
diff --git a/app/(admin)/miscellaneous/page.tsx b/app/(admin)/miscellaneous/page.tsx
index 2fef590..e0f3167 100644
--- a/app/(admin)/miscellaneous/page.tsx
+++ b/app/(admin)/miscellaneous/page.tsx
@@ -3,12 +3,13 @@ import { redirect } from 'next/navigation';
 import prismadb from '@/lib/prismadb';
 import { currentUser } from '@/lib/authentication';
 import MiscellaneousForm from '@/components/admin/miscellaneous-form';
+import { ContentLayout } from '@/components/admin-panel/content-layout';
 import {
   Card,
-  CardContent,
-  CardDescription,
+  CardTitle,
   CardHeader,
-  CardTitle
+  CardContent,
+  CardDescription
 } from '@/components/ui/card';
 
 export default async function MiscellaneousPage() {
@@ -28,16 +29,18 @@ export default async function MiscellaneousPage() {
   });
 
   return (
-    <Card className='rounded-lg border-none'>
-      <CardHeader className='mx-[1px] pb-9'>
-        <CardTitle className='text-xl font-semibold'>Miscellaneous</CardTitle>
-        <CardDescription>
-          Manage your miscellaneous informations.
-        </CardDescription>
-      </CardHeader>
-      <CardContent>
-        <MiscellaneousForm miscellaneous={miscellaneous} />
-      </CardContent>
-    </Card>
+    <ContentLayout title='Miscellaneous'>
+      <Card className='rounded-lg border-none'>
+        <CardHeader className='mx-[1px] pb-9'>
+          <CardTitle className='text-xl font-semibold'>Miscellaneous</CardTitle>
+          <CardDescription>
+            Manage your miscellaneous informations.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <MiscellaneousForm miscellaneous={miscellaneous} />
+        </CardContent>
+      </Card>
+    </ContentLayout>
   );
 }
diff --git a/app/(admin)/portfolio/[portfolioId]/edit/loading.tsx b/app/(admin)/portfolio/[portfolioId]/edit/loading.tsx
index 397be0a..8908e9e 100644
--- a/app/(admin)/portfolio/[portfolioId]/edit/loading.tsx
+++ b/app/(admin)/portfolio/[portfolioId]/edit/loading.tsx
@@ -1,10 +1,11 @@
 import { cn } from '@/lib/utils';
 import { Skeleton } from '@/components/ui/skeleton';
+import { ContentLayout } from '@/components/admin-panel/content-layout';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 
 export default function EditPortfolioLoading() {
   return (
-    <>
+    <ContentLayout title='Edit Project'>
       <Skeleton className='h-9 w-[85px] mb-4' />
       <Card className='rounded-lg border-none'>
         <CardHeader className='mx-[1px] pb-9'>
@@ -72,6 +73,6 @@ export default function EditPortfolioLoading() {
           </div>
         </CardContent>
       </Card>
-    </>
+    </ContentLayout>
   );
 }
diff --git a/app/(admin)/portfolio/[portfolioId]/edit/page.tsx b/app/(admin)/portfolio/[portfolioId]/edit/page.tsx
index 403c1a3..53bc1a8 100644
--- a/app/(admin)/portfolio/[portfolioId]/edit/page.tsx
+++ b/app/(admin)/portfolio/[portfolioId]/edit/page.tsx
@@ -4,12 +4,13 @@ import prismadb from '@/lib/prismadb';
 import BackButton from '@/components/back-button';
 import { currentUser } from '@/lib/authentication';
 import PortfolioForm from '@/components/admin/portfolio-form';
+import { ContentLayout } from '@/components/admin-panel/content-layout';
 import {
   Card,
-  CardContent,
-  CardDescription,
+  CardTitle,
   CardHeader,
-  CardTitle
+  CardContent,
+  CardDescription
 } from '@/components/ui/card';
 
 export default async function EditPortfolioPage({
@@ -34,7 +35,7 @@ export default async function EditPortfolioPage({
   });
 
   return (
-    <>
+    <ContentLayout title='Edit Project'>
       <BackButton slug='/portfolio' />
       <Card className='rounded-lg border-none'>
         <CardHeader className='mx-[1px] pb-9'>
@@ -47,6 +48,6 @@ export default async function EditPortfolioPage({
           <PortfolioForm portfolio={portfolio} />
         </CardContent>
       </Card>
-    </>
+    </ContentLayout>
   );
 }
diff --git a/app/(admin)/portfolio/create/loading.tsx b/app/(admin)/portfolio/create/loading.tsx
index 2970ea7..fb48a10 100644
--- a/app/(admin)/portfolio/create/loading.tsx
+++ b/app/(admin)/portfolio/create/loading.tsx
@@ -1,10 +1,11 @@
 import { cn } from '@/lib/utils';
 import { Skeleton } from '@/components/ui/skeleton';
+import { ContentLayout } from '@/components/admin-panel/content-layout';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 
 export default function CreatePortfolioLoading() {
   return (
-    <>
+    <ContentLayout title='New Project'>
       <Skeleton className='h-9 w-[85px] mb-4' />
       <Card className='rounded-lg border-none'>
         <CardHeader className='mx-[1px] pb-9'>
@@ -72,6 +73,6 @@ export default function CreatePortfolioLoading() {
           </div>
         </CardContent>
       </Card>
-    </>
+    </ContentLayout>
   );
 }
diff --git a/app/(admin)/portfolio/create/page.tsx b/app/(admin)/portfolio/create/page.tsx
index b578cef..0880d5b 100644
--- a/app/(admin)/portfolio/create/page.tsx
+++ b/app/(admin)/portfolio/create/page.tsx
@@ -1,16 +1,17 @@
 import BackButton from '@/components/back-button';
 import PortfolioForm from '@/components/admin/portfolio-form';
+import { ContentLayout } from '@/components/admin-panel/content-layout';
 import {
   Card,
-  CardContent,
-  CardDescription,
+  CardTitle,
   CardHeader,
-  CardTitle
+  CardContent,
+  CardDescription
 } from '@/components/ui/card';
 
 export default function CreatePortfolioPage() {
   return (
-    <>
+    <ContentLayout title='New Project'>
       <BackButton slug='/portfolio' />
       <Card className='rounded-lg border-none'>
         <CardHeader className='mx-[1px] pb-9'>
@@ -23,6 +24,6 @@ export default function CreatePortfolioPage() {
           <PortfolioForm />
         </CardContent>
       </Card>
-    </>
+    </ContentLayout>
   );
 }
diff --git a/app/(admin)/portfolio/loading.tsx b/app/(admin)/portfolio/loading.tsx
index a06bfb4..0a82575 100644
--- a/app/(admin)/portfolio/loading.tsx
+++ b/app/(admin)/portfolio/loading.tsx
@@ -1,19 +1,26 @@
 import { Skeleton } from '@/components/ui/skeleton';
+import { ContentLayout } from '@/components/admin-panel/content-layout';
 import { DataTableLoading } from '@/components/data-table/data-table-loading';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 
 export default function PortfolioLoading() {
   return (
-    <Card className='rounded-lg border-none'>
-      <CardHeader className='mx-[1px] pb-9'>
-        <CardTitle className='text-xl font-semibold'>
-          <Skeleton className='h-7 w-[100px]' />
-        </CardTitle>
-        <Skeleton className='h-5 w-[300px]' />
-      </CardHeader>
-      <CardContent>
-        <DataTableLoading tableType='portfolio' columnCount={8} rowCount={10} />
-      </CardContent>
-    </Card>
+    <ContentLayout title='All Projects'>
+      <Card className='rounded-lg border-none'>
+        <CardHeader className='mx-[1px] pb-9'>
+          <CardTitle className='text-xl font-semibold'>
+            <Skeleton className='h-7 w-[100px]' />
+          </CardTitle>
+          <Skeleton className='h-5 w-[300px]' />
+        </CardHeader>
+        <CardContent>
+          <DataTableLoading
+            tableType='portfolio'
+            columnCount={8}
+            rowCount={10}
+          />
+        </CardContent>
+      </Card>
+    </ContentLayout>
   );
 }
diff --git a/app/(admin)/portfolio/page.tsx b/app/(admin)/portfolio/page.tsx
index 3471f82..24203ea 100644
--- a/app/(admin)/portfolio/page.tsx
+++ b/app/(admin)/portfolio/page.tsx
@@ -6,12 +6,13 @@ import { currentUser } from '@/lib/authentication';
 import { DataTable } from '@/components/data-table/data-table';
 import { columns } from '@/components/admin/portfolio-table/columns';
 import AddButton from '@/components/admin/portfolio-table/add-button';
+import { ContentLayout } from '@/components/admin-panel/content-layout';
 import {
   Card,
-  CardContent,
-  CardDescription,
+  CardTitle,
   CardHeader,
-  CardTitle
+  CardContent,
+  CardDescription
 } from '@/components/ui/card';
 
 const filterOptions: {
@@ -40,22 +41,24 @@ export default async function PortfolioPage() {
   });
 
   return (
-    <Card className='rounded-lg border-none'>
-      <CardHeader className='mx-[1px] pb-9'>
-        <CardTitle className='text-xl font-semibold'>Portfolio</CardTitle>
-        <CardDescription>
-          Manage your projects list section informations.
-        </CardDescription>
-      </CardHeader>
-      <CardContent>
-        <DataTable
-          data={portfolios}
-          columns={columns}
-          options={filterOptions}
-          AddButton={<AddButton />}
-          page='portfolio'
-        />
-      </CardContent>
-    </Card>
+    <ContentLayout title='All Projects'>
+      <Card className='rounded-lg border-none'>
+        <CardHeader className='mx-[1px] pb-9'>
+          <CardTitle className='text-xl font-semibold'>Portfolio</CardTitle>
+          <CardDescription>
+            Manage your projects list section informations.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <DataTable
+            data={portfolios}
+            columns={columns}
+            options={filterOptions}
+            AddButton={<AddButton />}
+            page='portfolio'
+          />
+        </CardContent>
+      </Card>
+    </ContentLayout>
   );
 }
diff --git a/app/(admin)/qualification/loading.tsx b/app/(admin)/qualification/loading.tsx
index eafd26c..c10204a 100644
--- a/app/(admin)/qualification/loading.tsx
+++ b/app/(admin)/qualification/loading.tsx
@@ -1,19 +1,22 @@
 import { Skeleton } from '@/components/ui/skeleton';
+import { ContentLayout } from '@/components/admin-panel/content-layout';
 import { DataTableLoading } from '@/components/data-table/data-table-loading';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 
 export default function QualificationLoading() {
   return (
-    <Card className='rounded-lg border-none'>
-      <CardHeader className='mx-[1px] pb-9'>
-        <CardTitle className='text-xl font-semibold'>
-          <Skeleton className='h-7 w-[100px]' />
-        </CardTitle>
-        <Skeleton className='h-5 w-[300px]' />
-      </CardHeader>
-      <CardContent>
-        <DataTableLoading columnCount={9} rowCount={7} />
-      </CardContent>
-    </Card>
+    <ContentLayout title='Qualification'>
+      <Card className='rounded-lg border-none'>
+        <CardHeader className='mx-[1px] pb-9'>
+          <CardTitle className='text-xl font-semibold'>
+            <Skeleton className='h-7 w-[100px]' />
+          </CardTitle>
+          <Skeleton className='h-5 w-[300px]' />
+        </CardHeader>
+        <CardContent>
+          <DataTableLoading columnCount={9} rowCount={7} />
+        </CardContent>
+      </Card>
+    </ContentLayout>
   );
 }
diff --git a/app/(admin)/qualification/page.tsx b/app/(admin)/qualification/page.tsx
index 604c890..2031fbd 100644
--- a/app/(admin)/qualification/page.tsx
+++ b/app/(admin)/qualification/page.tsx
@@ -3,14 +3,15 @@ import { redirect } from 'next/navigation';
 import prismadb from '@/lib/prismadb';
 import { currentUser } from '@/lib/authentication';
 import { DataTable } from '@/components/data-table/data-table';
+import { ContentLayout } from '@/components/admin-panel/content-layout';
 import { columns } from '@/components/admin/qualification-table/columns';
 import AddButton from '@/components/admin/qualification-table/add-button';
 import {
   Card,
-  CardContent,
-  CardDescription,
+  CardTitle,
   CardHeader,
-  CardTitle
+  CardContent,
+  CardDescription
 } from '@/components/ui/card';
 
 const filterOptions = [
@@ -41,22 +42,24 @@ export default async function QualificationPage() {
   });
 
   return (
-    <Card className='rounded-lg border-none'>
-      <CardHeader className='mx-[1px] pb-9'>
-        <CardTitle className='text-xl font-semibold'>Qualification</CardTitle>
-        <CardDescription>
-          Manage your qualification section informations.
-        </CardDescription>
-      </CardHeader>
-      <CardContent>
-        <DataTable
-          data={qualifications}
-          columns={columns}
-          options={filterOptions}
-          AddButton={<AddButton />}
-          page='qualification'
-        />
-      </CardContent>
-    </Card>
+    <ContentLayout title='Qualification'>
+      <Card className='rounded-lg border-none'>
+        <CardHeader className='mx-[1px] pb-9'>
+          <CardTitle className='text-xl font-semibold'>Qualification</CardTitle>
+          <CardDescription>
+            Manage your qualification section informations.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <DataTable
+            data={qualifications}
+            columns={columns}
+            options={filterOptions}
+            AddButton={<AddButton />}
+            page='qualification'
+          />
+        </CardContent>
+      </Card>
+    </ContentLayout>
   );
 }
diff --git a/app/(admin)/resume/loading.tsx b/app/(admin)/resume/loading.tsx
index a4c2341..36e69f5 100644
--- a/app/(admin)/resume/loading.tsx
+++ b/app/(admin)/resume/loading.tsx
@@ -1,22 +1,25 @@
 import { Skeleton } from '@/components/ui/skeleton';
 import { AspectRatio } from '@/components/ui/aspect-ratio';
+import { ContentLayout } from '@/components/admin-panel/content-layout';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 
 export default function ResumeLoading() {
   return (
-    <Card className='rounded-lg border-none'>
-      <CardHeader className='mx-[1px] pb-9'>
-        <CardTitle className='text-xl font-semibold items-center flex justify-between'>
-          <Skeleton className='h-7 w-[100px]' />
-          <Skeleton className='h-7 w-[80px]' />
-        </CardTitle>
-        <Skeleton className='h-5 w-[170px]' />
-      </CardHeader>
-      <CardContent>
-        <AspectRatio ratio={210 / 297}>
-          <Skeleton className='h-full w-full' />
-        </AspectRatio>
-      </CardContent>
-    </Card>
+    <ContentLayout title='Resume'>
+      <Card className='rounded-lg border-none'>
+        <CardHeader className='mx-[1px] pb-9'>
+          <CardTitle className='text-xl font-semibold items-center flex justify-between'>
+            <Skeleton className='h-7 w-[100px]' />
+            <Skeleton className='h-7 w-[80px]' />
+          </CardTitle>
+          <Skeleton className='h-5 w-[170px]' />
+        </CardHeader>
+        <CardContent>
+          <AspectRatio ratio={210 / 297}>
+            <Skeleton className='h-full w-full' />
+          </AspectRatio>
+        </CardContent>
+      </Card>
+    </ContentLayout>
   );
 }
diff --git a/app/(admin)/resume/page.tsx b/app/(admin)/resume/page.tsx
index 5ae432d..c774a7f 100644
--- a/app/(admin)/resume/page.tsx
+++ b/app/(admin)/resume/page.tsx
@@ -4,12 +4,13 @@ import prismadb from '@/lib/prismadb';
 import { currentUser } from '@/lib/authentication';
 import ResumeIframe from '@/components/admin/resume-iframe';
 import UploadPdfButton from '@/components/admin/upload-pdf-button';
+import { ContentLayout } from '@/components/admin-panel/content-layout';
 import {
   Card,
-  CardContent,
-  CardDescription,
+  CardTitle,
   CardHeader,
-  CardTitle
+  CardContent,
+  CardDescription
 } from '@/components/ui/card';
 
 export default async function ResumePage() {
@@ -26,17 +27,19 @@ export default async function ResumePage() {
   });
 
   return (
-    <Card className='rounded-lg border-none'>
-      <CardHeader className='mx-[1px] pb-9'>
-        <CardTitle className='text-xl font-bold items-center flex justify-between'>
-          Resume
-          <UploadPdfButton resume={resume} />
-        </CardTitle>
-        <CardDescription>Manage your resume pdf file.</CardDescription>
-      </CardHeader>
-      <CardContent>
-        <ResumeIframe url={resume?.pdf ?? null} />
-      </CardContent>
-    </Card>
+    <ContentLayout title='Resume'>
+      <Card className='rounded-lg border-none'>
+        <CardHeader className='mx-[1px] pb-9'>
+          <CardTitle className='text-xl font-bold items-center flex justify-between'>
+            Resume
+            <UploadPdfButton resume={resume} />
+          </CardTitle>
+          <CardDescription>Manage your resume pdf file.</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <ResumeIframe url={resume?.pdf ?? null} />
+        </CardContent>
+      </Card>
+    </ContentLayout>
   );
 }
diff --git a/app/(admin)/tool/[toolId]/edit/loading.tsx b/app/(admin)/tool/[toolId]/edit/loading.tsx
index c5eda8b..2e919b3 100644
--- a/app/(admin)/tool/[toolId]/edit/loading.tsx
+++ b/app/(admin)/tool/[toolId]/edit/loading.tsx
@@ -1,9 +1,10 @@
 import { Skeleton } from '@/components/ui/skeleton';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { ContentLayout } from '@/components/admin-panel/content-layout';
 
 export default function EditToolLoading() {
   return (
-    <>
+    <ContentLayout title='Edit Tool'>
       <Skeleton className='h-9 w-[85px] mb-4' />
       <Card className='rounded-lg border-none'>
         <CardHeader className='mx-[1px] pb-9'>
@@ -36,6 +37,6 @@ export default function EditToolLoading() {
           </div>
         </CardContent>
       </Card>
-    </>
+    </ContentLayout>
   );
 }
diff --git a/app/(admin)/tool/[toolId]/edit/page.tsx b/app/(admin)/tool/[toolId]/edit/page.tsx
index cc1a07d..86cda99 100644
--- a/app/(admin)/tool/[toolId]/edit/page.tsx
+++ b/app/(admin)/tool/[toolId]/edit/page.tsx
@@ -4,12 +4,13 @@ import prismadb from '@/lib/prismadb';
 import BackButton from '@/components/back-button';
 import { currentUser } from '@/lib/authentication';
 import ToolForm from '@/components/admin/tool-form';
+import { ContentLayout } from '@/components/admin-panel/content-layout';
 import {
   Card,
-  CardContent,
-  CardDescription,
+  CardTitle,
   CardHeader,
-  CardTitle
+  CardContent,
+  CardDescription
 } from '@/components/ui/card';
 
 export default async function EditToolPage({
@@ -31,7 +32,7 @@ export default async function EditToolPage({
   });
 
   return (
-    <>
+    <ContentLayout title='Edit Tool'>
       <BackButton slug='/tool' />
       <Card className='rounded-lg border-none'>
         <CardHeader className='mx-[1px] pb-9'>
@@ -44,6 +45,6 @@ export default async function EditToolPage({
           <ToolForm tool={tool} />
         </CardContent>
       </Card>
-    </>
+    </ContentLayout>
   );
 }
diff --git a/app/(admin)/tool/create/loading.tsx b/app/(admin)/tool/create/loading.tsx
index 5b93de1..e99fa75 100644
--- a/app/(admin)/tool/create/loading.tsx
+++ b/app/(admin)/tool/create/loading.tsx
@@ -1,9 +1,10 @@
 import { Skeleton } from '@/components/ui/skeleton';
+import { ContentLayout } from '@/components/admin-panel/content-layout';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 
 export default function CreateToolLoading() {
   return (
-    <>
+    <ContentLayout title='New Tool'>
       <Skeleton className='h-9 w-[85px] mb-4' />
       <Card className='rounded-lg border-none'>
         <CardHeader className='mx-[1px] pb-9'>
@@ -36,6 +37,6 @@ export default function CreateToolLoading() {
           </div>
         </CardContent>
       </Card>
-    </>
+    </ContentLayout>
   );
 }
diff --git a/app/(admin)/tool/create/page.tsx b/app/(admin)/tool/create/page.tsx
index fcf03c6..01d7f39 100644
--- a/app/(admin)/tool/create/page.tsx
+++ b/app/(admin)/tool/create/page.tsx
@@ -2,15 +2,16 @@ import BackButton from '@/components/back-button';
 import ToolForm from '@/components/admin/tool-form';
 import {
   Card,
-  CardContent,
-  CardDescription,
+  CardTitle,
   CardHeader,
-  CardTitle
+  CardContent,
+  CardDescription
 } from '@/components/ui/card';
+import { ContentLayout } from '@/components/admin-panel/content-layout';
 
 export default function CreateToolPage() {
   return (
-    <>
+    <ContentLayout title='New Tool'>
       <BackButton slug='/tool' />
       <Card className='rounded-lg border-none'>
         <CardHeader className='mx-[1px] pb-9'>
@@ -23,6 +24,6 @@ export default function CreateToolPage() {
           <ToolForm />
         </CardContent>
       </Card>
-    </>
+    </ContentLayout>
   );
 }
diff --git a/app/(admin)/tool/loading.tsx b/app/(admin)/tool/loading.tsx
index ed8c731..9c00229 100644
--- a/app/(admin)/tool/loading.tsx
+++ b/app/(admin)/tool/loading.tsx
@@ -1,19 +1,22 @@
 import { Skeleton } from '@/components/ui/skeleton';
+import { ContentLayout } from '@/components/admin-panel/content-layout';
 import { DataTableLoading } from '@/components/data-table/data-table-loading';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 
 export default function ToolLoading() {
   return (
-    <Card className='rounded-lg border-none'>
-      <CardHeader className='mx-[1px] pb-9'>
-        <CardTitle className='text-xl font-semibold'>
-          <Skeleton className='h-7 w-[100px]' />
-        </CardTitle>
-        <Skeleton className='h-5 w-[300px]' />
-      </CardHeader>
-      <CardContent>
-        <DataTableLoading tableType='tool' columnCount={5} rowCount={10} />
-      </CardContent>
-    </Card>
+    <ContentLayout title='Tool & Apps'>
+      <Card className='rounded-lg border-none'>
+        <CardHeader className='mx-[1px] pb-9'>
+          <CardTitle className='text-xl font-semibold'>
+            <Skeleton className='h-7 w-[100px]' />
+          </CardTitle>
+          <Skeleton className='h-5 w-[300px]' />
+        </CardHeader>
+        <CardContent>
+          <DataTableLoading tableType='tool' columnCount={5} rowCount={10} />
+        </CardContent>
+      </Card>
+    </ContentLayout>
   );
 }
diff --git a/app/(admin)/tool/page.tsx b/app/(admin)/tool/page.tsx
index c013944..8045213 100644
--- a/app/(admin)/tool/page.tsx
+++ b/app/(admin)/tool/page.tsx
@@ -5,12 +5,13 @@ import { currentUser } from '@/lib/authentication';
 import { DataTable } from '@/components/data-table/data-table';
 import { columns } from '@/components/admin/tool-table/columns';
 import AddButton from '@/components/admin/tool-table/add-button';
+import { ContentLayout } from '@/components/admin-panel/content-layout';
 import {
   Card,
-  CardContent,
-  CardDescription,
+  CardTitle,
   CardHeader,
-  CardTitle
+  CardContent,
+  CardDescription
 } from '@/components/ui/card';
 
 const filterOptions = [
@@ -41,22 +42,24 @@ export default async function ToolPage() {
   });
 
   return (
-    <Card className='rounded-lg border-none'>
-      <CardHeader className='mx-[1px] pb-9'>
-        <CardTitle className='text-xl font-semibold'>Tool & Apps</CardTitle>
-        <CardDescription>
-          Manage your tool and apps list section informations.
-        </CardDescription>
-      </CardHeader>
-      <CardContent>
-        <DataTable
-          data={tools}
-          columns={columns}
-          options={filterOptions}
-          AddButton={<AddButton />}
-          page='tool'
-        />
-      </CardContent>
-    </Card>
+    <ContentLayout title='Tool & Apps'>
+      <Card className='rounded-lg border-none'>
+        <CardHeader className='mx-[1px] pb-9'>
+          <CardTitle className='text-xl font-semibold'>Tool & Apps</CardTitle>
+          <CardDescription>
+            Manage your tool and apps list section informations.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <DataTable
+            data={tools}
+            columns={columns}
+            options={filterOptions}
+            AddButton={<AddButton />}
+            page='tool'
+          />
+        </CardContent>
+      </Card>
+    </ContentLayout>
   );
 }
diff --git a/components/admin-panel/collapse-menu-button.tsx b/components/admin-panel/collapse-menu-button.tsx
index 3ac80bc..e13f63c 100644
--- a/components/admin-panel/collapse-menu-button.tsx
+++ b/components/admin-panel/collapse-menu-button.tsx
@@ -31,7 +31,6 @@ type Submenu = {
   href: string;
   label: string;
   active: boolean;
-  onlyTitle?: boolean;
 };
 
 interface CollapseMenuButtonProps {
@@ -99,32 +98,30 @@ export function CollapseMenuButton({
         </Button>
       </CollapsibleTrigger>
       <CollapsibleContent className='overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down'>
-        {submenus
-          .filter((submenu) => !submenu.onlyTitle)
-          .map(({ href, label, active }, index) => (
-            <Button
-              key={index}
-              variant={active ? 'secondary' : 'ghost'}
-              className='w-full justify-start h-10 mb-1'
-              asChild
-            >
-              <Link href={href}>
-                <span className='mr-4 ml-2'>
-                  <Dot size={18} />
-                </span>
-                <p
-                  className={cn(
-                    'max-w-[170px] truncate',
-                    isOpen
-                      ? 'translate-x-0 opacity-100'
-                      : '-translate-x-96 opacity-0'
-                  )}
-                >
-                  {label}
-                </p>
-              </Link>
-            </Button>
-          ))}
+        {submenus.map(({ href, label, active }, index) => (
+          <Button
+            key={index}
+            variant={active ? 'secondary' : 'ghost'}
+            className='w-full justify-start h-10 mb-1'
+            asChild
+          >
+            <Link href={href}>
+              <span className='mr-4 ml-2'>
+                <Dot size={18} />
+              </span>
+              <p
+                className={cn(
+                  'max-w-[170px] truncate',
+                  isOpen
+                    ? 'translate-x-0 opacity-100'
+                    : '-translate-x-96 opacity-0'
+                )}
+              >
+                {label}
+              </p>
+            </Link>
+          </Button>
+        ))}
       </CollapsibleContent>
     </Collapsible>
   ) : (
@@ -165,15 +162,13 @@ export function CollapseMenuButton({
           {label}
         </DropdownMenuLabel>
         <DropdownMenuSeparator />
-        {submenus
-          .filter((submenu) => !submenu.onlyTitle)
-          .map(({ href, label }, index) => (
-            <DropdownMenuItem key={index} asChild>
-              <Link className='cursor-pointer' href={href}>
-                <p className='max-w-[180px] truncate'>{label}</p>
-              </Link>
-            </DropdownMenuItem>
-          ))}
+        {submenus.map(({ href, label }, index) => (
+          <DropdownMenuItem key={index} asChild>
+            <Link className='cursor-pointer' href={href}>
+              <p className='max-w-[180px] truncate'>{label}</p>
+            </Link>
+          </DropdownMenuItem>
+        ))}
         <DropdownMenuArrow className='fill-border' />
       </DropdownMenuContent>
     </DropdownMenu>
diff --git a/components/admin-panel/content-layout.tsx b/components/admin-panel/content-layout.tsx
new file mode 100644
index 0000000..1419ca6
--- /dev/null
+++ b/components/admin-panel/content-layout.tsx
@@ -0,0 +1,15 @@
+import { Navbar } from '@/components/admin-panel/navbar';
+
+interface ContentLayoutProps {
+  title: string;
+  children: React.ReactNode;
+}
+
+export function ContentLayout({ title, children }: ContentLayoutProps) {
+  return (
+    <div>
+      <Navbar title={title} />
+      <div className='container pt-8 pb-8 px-4 sm:px-8'>{children}</div>
+    </div>
+  );
+}
diff --git a/components/admin-panel/menu.tsx b/components/admin-panel/menu.tsx
index cfe15bd..47ef451 100644
--- a/components/admin-panel/menu.tsx
+++ b/components/admin-panel/menu.tsx
@@ -5,7 +5,7 @@ import { usePathname } from 'next/navigation';
 import { Ellipsis, LogOut } from 'lucide-react';
 
 import { cn } from '@/lib/utils';
-import { getPages } from '@/lib/pages';
+import { getMenuList } from '@/lib/menu-list';
 import { Button } from '@/components/ui/button';
 import { ScrollArea } from '@/components/ui/scroll-area';
 import { CollapseMenuButton } from '@/components/admin-panel/collapse-menu-button';
@@ -22,13 +22,13 @@ interface MenuProps {
 
 export function Menu({ isOpen }: MenuProps) {
   const pathname = usePathname();
-  const pages = getPages(pathname);
+  const menuList = getMenuList(pathname);
 
   return (
     <ScrollArea className='[&>div>div[style]]:!block'>
       <nav className='mt-8 h-full w-full'>
         <ul className='flex flex-col min-h-[calc(100vh-48px-36px-16px-32px)] lg:min-h-[calc(100vh-32px-40px-32px)] items-start space-y-1 px-2'>
-          {pages.map(({ groupLabel, menus }, index) => (
+          {menuList.map(({ groupLabel, menus }, index) => (
             <li className={cn('w-full', groupLabel ? 'pt-5' : '')} key={index}>
               {(isOpen && groupLabel) || isOpen === undefined ? (
                 <p className='text-sm font-medium text-muted-foreground px-4 pb-2 max-w-[248px] truncate'>
diff --git a/components/admin-panel/navbar.tsx b/components/admin-panel/navbar.tsx
index fb6bcf8..e13a10d 100644
--- a/components/admin-panel/navbar.tsx
+++ b/components/admin-panel/navbar.tsx
@@ -1,16 +1,19 @@
 import { ModeToggle } from '@/components/mode-toggle';
 import { ViewWebsite } from '@/components/view-website';
 import { UserNav } from '@/components/admin-panel/user-nav';
-import { PageTitle } from '@/components/admin-panel/page-title';
 import { SheetMenu } from '@/components/admin-panel/sheet-menu';
 
-export default function Navbar() {
+interface NavbarProps {
+  title: string;
+}
+
+export function Navbar({ title }: NavbarProps) {
   return (
     <header className='z-10 supports-backdrop-blur:bg-background/60 sticky top-0 w-full shadow dark:shadow-secondary bg-background/95 backdrop-blur'>
       <div className='mx-4 sm:mx-8 flex h-14 items-center'>
         <div className='flex items-center space-x-4 lg:space-x-0'>
           <SheetMenu />
-          <PageTitle />
+          <h1 className='font-bold'>{title}</h1>
         </div>
         <div className='flex flex-1 items-center space-x-2 justify-end'>
           <ViewWebsite />
diff --git a/components/admin-panel/page-title.tsx b/components/admin-panel/page-title.tsx
deleted file mode 100644
index 448d62f..0000000
--- a/components/admin-panel/page-title.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-'use client';
-
-import { getPages } from '@/lib/pages';
-import { usePathname } from 'next/navigation';
-
-export function PageTitle() {
-  const pathname = usePathname();
-  const pages = getPages(pathname);
-
-  const pageTitle = pages.map(({ menus }) => {
-    const activeMenu = menus.find((menu) => menu.active);
-    return activeMenu?.submenus && activeMenu.submenus.length > 0
-      ? activeMenu.submenus.find((submenu) => submenu.active)?.label
-      : activeMenu?.label ?? '';
-  });
-
-  return <h1 className='font-bold'>{pageTitle}</h1>;
-}
diff --git a/lib/pages.ts b/lib/menu-list.ts
similarity index 87%
rename from lib/pages.ts
rename to lib/menu-list.ts
index 8865a8c..be04114 100644
--- a/lib/pages.ts
+++ b/lib/menu-list.ts
@@ -15,7 +15,6 @@ type Submenu = {
   href: string;
   label: string;
   active: boolean;
-  onlyTitle?: boolean;
 };
 
 type Menu = {
@@ -31,7 +30,7 @@ type Group = {
   menus: Menu[];
 };
 
-export function getPages(pathname: string): Group[] {
+export function getMenuList(pathname: string): Group[] {
   return [
     {
       groupLabel: '',
@@ -101,12 +100,6 @@ export function getPages(pathname: string): Group[] {
               href: '/portfolio/create',
               label: 'New Project',
               active: pathname === '/portfolio/create'
-            },
-            {
-              href: '',
-              label: 'Edit Project',
-              active: new RegExp('^/portfolio/.+/edit$').test(pathname),
-              onlyTitle: true
             }
           ]
         },
@@ -144,12 +137,6 @@ export function getPages(pathname: string): Group[] {
               href: '/tool/create',
               label: 'New Tool',
               active: pathname === '/tool/create'
-            },
-            {
-              href: '',
-              label: 'Edit Tool',
-              active: new RegExp('^/tool/.+/edit$').test(pathname),
-              onlyTitle: true
             }
           ]
         }