diff --git a/components/PageHeader.tsx b/components/PageHeader.tsx
new file mode 100644
index 0000000..b169feb
--- /dev/null
+++ b/components/PageHeader.tsx
@@ -0,0 +1,23 @@
+import React from "react";
+
+export default function PageHeader({
+  title,
+  description,
+  icon,
+}: {
+  title: string;
+  description: string;
+  icon: string;
+}) {
+  return (
+    <div className="flex items-center gap-3">
+      <i
+        className={`${icon} text-primary text-3xl sm:text-4xl drop-shadow`}
+      ></i>
+      <div>
+        <p className="text-3xl capitalize font-thin">{title}</p>
+        <p>{description}</p>
+      </div>
+    </div>
+  );
+}
diff --git a/pages/dashboard.tsx b/pages/dashboard.tsx
index d12381b..0297941 100644
--- a/pages/dashboard.tsx
+++ b/pages/dashboard.tsx
@@ -13,6 +13,7 @@ import { toast } from "react-hot-toast";
 import { MigrationFormat, MigrationRequest } from "@/types/global";
 import DashboardItem from "@/components/DashboardItem";
 import NewLinkModal from "@/components/ModalContent/NewLinkModal";
+import PageHeader from "@/components/PageHeader";
 
 export default function Dashboard() {
   const { collections } = useCollectionStore();
@@ -93,14 +94,7 @@ export default function Dashboard() {
   return (
     <MainLayout>
       <div style={{ flex: "1 1 auto" }} className="p-5 flex flex-col gap-5">
-        <div className="flex items-center gap-3">
-          <i className="bi-house text-primary text-3xl sm:text-4xl drop-shadow"></i>
-          <div>
-            <p className="text-3xl capitalize font-thin">Dashboard</p>
-
-            <p>A brief overview of your data</p>
-          </div>
-        </div>
+        <PageHeader icon={'bi-house '} title={'Dashboard'} description={"A brief overview of your data"} />
 
         <div>
           <div className="flex justify-evenly flex-col md:flex-row md:items-center gap-2 md:w-full h-full rounded-2xl p-8 border border-neutral-content bg-base-200">