diff --git a/frontend/src/pages/Dashboard/Statistics/index.tsx b/frontend/src/pages/Dashboard/Statistics/index.tsx
index f3be2f7..68337ff 100644
--- a/frontend/src/pages/Dashboard/Statistics/index.tsx
+++ b/frontend/src/pages/Dashboard/Statistics/index.tsx
@@ -37,60 +37,96 @@ const Statistics = ({ organization }: { organization: any }) => {
   }, [organization?.slug]);
 
   return (
-    <div className="col-span-12 rounded-md border border-stroke bg-white p-7.5 shadow-default dark:border-strokedark dark:bg-boxdark">
-      <div className="grid grid-cols-1 gap-5 sm:grid-cols-2 xl:grid-cols-4 xl:gap-0">
-        <div className="flex items-center justify-center gap-2 border-b border-stroke pb-5 dark:border-strokedark xl:border-b-0 xl:border-r xl:pb-0">
-          {documents.status === 'loading' ? (
-            <PreLoader />
-          ) : (
-            <div className="flex flex-col items-center">
-              <h4 className="mb-0.5 text-xl font-bold text-black dark:text-white md:text-title-lg">
-                {nFormatter(documents.value)}
-              </h4>
-              <p className="text-sm font-medium">
-                {pluralize('Document', documents.value)}
-              </p>
-            </div>
-          )}
-        </div>
+    // <div className="col-span-12 rounded-md border border-stroke bg-white p-7.5 shadow-default dark:border-strokedark dark:bg-boxdark">
+    //   <div className="grid grid-cols-1 gap-5 sm:grid-cols-2 xl:grid-cols-4 xl:gap-0">
+    //     <div className="flex items-center justify-center gap-2 border-b border-stroke pb-5 dark:border-strokedark xl:border-b-0 xl:border-r xl:pb-0">
+    //       {documents.status === 'loading' ? (
+    //         <PreLoader />
+    //       ) : (
+    //         <div className="flex flex-col items-center">
+    //           <h4 className="mb-0.5 text-xl font-bold text-black dark:text-white md:text-title-lg">
+    //             {nFormatter(documents.value)}
+    //           </h4>
+    //           <p className="text-sm font-medium">
+    //             {pluralize('Document', documents.value)}
+    //           </p>
+    //         </div>
+    //       )}
+    //     </div>
 
-        <div className="flex items-center justify-center gap-2 border-b border-stroke pb-5 dark:border-strokedark xl:border-b-0 xl:border-r xl:pb-0">
-          {vectors.status === 'loading' ? (
-            <PreLoader />
-          ) : (
-            <div className="flex flex-col items-center">
-              <h4 className="mb-0.5 text-xl font-bold text-black dark:text-white md:text-title-lg">
-                {nFormatter(vectors.value)}
-              </h4>
-              <p className="text-sm font-medium">
-                {pluralize('Vector', vectors.value)}
-              </p>
-            </div>
-          )}
-        </div>
+    //     <div className="flex items-center justify-center gap-2 border-b border-stroke pb-5 dark:border-strokedark xl:border-b-0 xl:border-r xl:pb-0">
+    //       {vectors.status === 'loading' ? (
+    //         <PreLoader />
+    //       ) : (
+    //         <div className="flex flex-col items-center">
+    //           <h4 className="mb-0.5 text-xl font-bold text-black dark:text-white md:text-title-lg">
+    //             {nFormatter(vectors.value)}
+    //           </h4>
+    //           <p className="text-sm font-medium">
+    //             {pluralize('Vector', vectors.value)}
+    //           </p>
+    //         </div>
+    //       )}
+    //     </div>
 
-        <div className="flex items-center justify-center gap-2 border-b border-stroke pb-5 dark:border-strokedark sm:border-b-0 sm:pb-0 xl:border-r">
-          {cache.status === 'loading' ? (
-            <PreLoader />
-          ) : (
-            <div className="flex flex-col items-center">
-              <h4 className="mb-0.5 text-xl font-bold text-black dark:text-white md:text-title-lg">
-                {humanFileSize(cache.value)}
-              </h4>
-              <p className="text-sm font-medium">Vector Cache (MB)</p>
-            </div>
-          )}
-        </div>
+    //     <div className="flex items-center justify-center gap-2 border-b border-stroke pb-5 dark:border-strokedark sm:border-b-0 sm:pb-0 xl:border-r">
+    //       {cache.status === 'loading' ? (
+    //         <PreLoader />
+    //       ) : (
+    //         <div className="flex flex-col items-center">
+    //           <h4 className="mb-0.5 text-xl font-bold text-black dark:text-white md:text-title-lg">
+    //             {humanFileSize(cache.value)}
+    //           </h4>
+    //           <p className="text-sm font-medium">Vector Cache (MB)</p>
+    //         </div>
+    //       )}
+    //     </div>
 
-        <div className="flex items-center justify-center gap-2">
-          <div className="flex flex-col items-center">
-            <h4 className="mb-0.5 text-xl font-bold text-black dark:text-white md:text-title-lg">
-              {organization?.lastUpdated
-                ? moment(organization.lastUpdated).fromNow()
-                : moment(organization.createdAt).fromNow()}
-            </h4>
-            <p className="text-sm font-medium">Last Modified</p>
-          </div>
+    //     <div className="flex items-center justify-center gap-2">
+    //       <div className="flex flex-col items-center">
+    //         <h4 className="mb-0.5 text-xl font-bold text-black dark:text-white md:text-title-lg">
+    //           {organization?.lastUpdated
+    //             ? moment(organization.lastUpdated).fromNow()
+    //             : moment(organization.createdAt).fromNow()}
+    //         </h4>
+    //         <p className="text-sm font-medium">Last Modified</p>
+    //       </div>
+    //     </div>
+    //   </div>
+    // </div>
+
+    <div className="-mt-4 flex w-full items-center">
+      <div className=" ml-4 flex items-center gap-x-6">
+        <div className="flex items-center gap-x-1">
+          <span className="font-['Plus Jakarta Sans'] text-sm font-bold uppercase leading-[18px] tracking-wide text-white">
+            Documents
+          </span>
+          <span className="font-['JetBrains Mono'] text-sm font-bold uppercase leading-[18px] tracking-wide text-white">
+            {' '}
+          </span>
+          <span className="font-['JetBrains Mono'] text-sm font-extrabold uppercase leading-[18px] tracking-wide text-white">
+            ({nFormatter(documents.value)})
+          </span>
+        </div>
+      </div>
+
+      <div className="ml-4 mr-48 w-full rounded-xl border-2 border-white/20 px-5 py-2  text-sky-400">
+        <div className="flex items-center justify-between whitespace-nowrap">
+          <span className="font-jetbrains uppercase text-white">
+            {pluralize('Vector', vectors.value)}:{' '}
+            <span className=" font-jetbrainsbold">
+              {nFormatter(vectors.value)}
+            </span>
+          </span>
+          <span className="font-jetbrains uppercase text-white">
+            Vector Cache:{' '}
+            <span className=" font-jetbrainsbold">
+              {humanFileSize(cache.value)}
+            </span>
+          </span>
+          <span className="font-jetbrains uppercase text-white">
+            Dimensions: <span className=" font-jetbrainsbold">{10}</span>
+          </span>
         </div>
       </div>
     </div>
diff --git a/frontend/src/pages/Dashboard/index.tsx b/frontend/src/pages/Dashboard/index.tsx
index d3134b7..ccf7a18 100644
--- a/frontend/src/pages/Dashboard/index.tsx
+++ b/frontend/src/pages/Dashboard/index.tsx
@@ -12,6 +12,13 @@ import DocumentsList from './DocumentsList';
 import Organization from '../../models/organization';
 import ApiKeyCard from './ApiKey';
 import ConnectorCard from './Connector';
+import truncate from 'truncate';
+
+import ChromaLogo from '../../images/vectordbs/chroma.png';
+import PineconeLogo from '../../images/vectordbs/pinecone-inverted.png';
+import qDrantLogo from '../../images/vectordbs/qdrant.png';
+import WeaviateLogo from '../../images/vectordbs/weaviate.png';
+import { GearSix } from '@phosphor-icons/react';
 
 export default function Dashboard() {
   const { slug } = useParams();
@@ -97,18 +104,25 @@ export default function Dashboard() {
       workspaces={workspaces}
       hasMoreWorkspaces={hasMoreWorkspaces}
       loadMoreWorkspaces={fetchWorkspaces}
+      headerExtendedItems={
+        <OrganizationHeader
+          organization={organization}
+          workspace={workspaces?.[0]}
+          connector={connector}
+          deleteWorkspace={() => {}}
+        />
+      }
     >
       {!!organization && (
         <div className="mb-4 grid grid-cols-1 gap-4 md:grid-cols-2 md:gap-6 xl:grid-cols-4 2xl:gap-7.5">
-          <ConnectorCard
+          {/* <ConnectorCard
             knownConnector={connector}
             organization={organization}
             workspaces={workspaces}
           />
-          <ApiKeyCard organization={organization} />
+          <ApiKeyCard organization={organization} /> */}
         </div>
       )}
-
       <Statistics organization={organization} />
       <div className="mt-4 grid grid-cols-12 gap-4 md:mt-6 md:gap-6 2xl:mt-7.5 2xl:gap-7.5">
         <div className="col-span-12 xl:col-span-8">
@@ -128,3 +142,70 @@ export default function Dashboard() {
     </AppLayout>
   );
 }
+
+function OrganizationHeader({
+  organization,
+  workspace,
+  connector,
+  deleteWorkspace,
+}: any) {
+  let logo;
+  switch (connector?.type) {
+    case 'chroma':
+      logo = ChromaLogo;
+      break;
+    case 'qdrant':
+      logo = qDrantLogo;
+      break;
+    case 'weaviate':
+      logo = WeaviateLogo;
+      break;
+    default:
+      logo = PineconeLogo;
+  }
+
+  return (
+    <>
+      <div className=" mr-10 w-full rounded-xl border-2 border-white/20 px-5 py-2 text-sky-400">
+        <div className="flex items-center gap-x-2">
+          <span className="text-lg font-medium text-white">
+            {truncate(organization?.name, 20)}
+          </span>
+        </div>
+      </div>
+      <div className="flex gap-x-3">
+        <button
+          onClick={() =>
+            window.document?.getElementById('edit-connector-modal')?.showModal()
+          }
+          className="flex h-11 w-11 items-center justify-center rounded-lg border-2 border-white border-opacity-20 transition-all duration-300 hover:bg-opacity-5"
+        >
+          <img
+            src={logo}
+            alt="Connector logo"
+            className="h-full p-1 grayscale"
+          />
+        </button>
+
+        <button
+          onClick={() =>
+            document?.getElementById('sync-connector-modal')?.showModal()
+          }
+          className="inline-flex h-11 w-[74px] flex-col items-center justify-center gap-2.5 rounded-lg bg-white bg-opacity-10 px-5 py-2.5 transition-all duration-300 hover:bg-opacity-5"
+        >
+          <div className="h-[25.53px] w-11 text-center font-['Satoshi'] text-base font-bold text-white">
+            Sync
+          </div>
+        </button>
+        <button
+          onClick={() =>
+            window.document?.getElementById('edit-connector-modal')?.showModal()
+          }
+          className="flex h-11 w-11 items-center justify-center rounded-lg border-2 border-white border-opacity-20 text-white transition-all duration-300 hover:bg-opacity-5"
+        >
+          <GearSix size={28} />
+        </button>
+      </div>
+    </>
+  );
+}
diff --git a/frontend/src/pages/DocumentView/index.tsx b/frontend/src/pages/DocumentView/index.tsx
index 474aef0..51ff6c4 100644
--- a/frontend/src/pages/DocumentView/index.tsx
+++ b/frontend/src/pages/DocumentView/index.tsx
@@ -169,7 +169,7 @@ function DocumentViewHeader({ organization, workspace, document }: any) {
   return (
     <>
       <div className=" mr-10 w-full rounded-xl border-2 border-white/20 px-5 py-2 text-sky-400">
-        <div className="flex items-center gap-x-2">
+        <div className="flex items-center gap-x-2 text-lg">
           <a
             href={paths.organization(organization)}
             className="text-sky-400 hover:cursor-pointer hover:underline"
@@ -188,7 +188,9 @@ function DocumentViewHeader({ organization, workspace, document }: any) {
           <div className="text-sky-400" style={{ transform: 'rotate(270deg)' }}>
             <CaretDown weight="bold" />
           </div>
-          <span className="text-white">{truncate(document?.name, 30)}</span>
+          <span className="text-lg font-medium text-white">
+            {truncate(document?.name, 30)}
+          </span>
         </div>
       </div>
       <div className="flex gap-x-3">
diff --git a/frontend/src/pages/WorkspaceDashboard/index.tsx b/frontend/src/pages/WorkspaceDashboard/index.tsx
index ccbec2c..28101bd 100644
--- a/frontend/src/pages/WorkspaceDashboard/index.tsx
+++ b/frontend/src/pages/WorkspaceDashboard/index.tsx
@@ -801,7 +801,7 @@ function WorkspaceViewHeader({
   return (
     <>
       <div className=" mr-10 w-full rounded-xl border-2 border-white/20 px-5 py-2 text-sky-400">
-        <div className="flex items-center gap-x-2">
+        <div className="flex items-center gap-x-2 text-lg">
           <a
             href={paths.organization(organization)}
             className="text-sky-400 hover:cursor-pointer hover:underline"
@@ -811,7 +811,9 @@ function WorkspaceViewHeader({
           <div className="text-sky-400" style={{ transform: 'rotate(270deg)' }}>
             <CaretDown weight="bold" />
           </div>
-          <span className="text-white">{truncate(workspace?.name, 20)}</span>
+          <span className="text-lg font-medium text-white">
+            {truncate(workspace?.name, 20)}
+          </span>
         </div>
       </div>
       <div className="flex gap-x-3">