diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx
index a51c8b44f7f..f76c7f7e441 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx
@@ -124,7 +124,29 @@ const ProjectPages: NextPage = () => {
         }
       >
         <div className="space-y-5 p-8 h-full overflow-hidden flex flex-col">
-          <h3 className="text-2xl font-semibold text-brand-base">Pages</h3>
+          <div className="flex gap-4 justify-between">
+            <h3 className="text-2xl font-semibold text-brand-base">Pages</h3>
+            <div className="flex gap-x-1">
+              <button
+                type="button"
+                className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-brand-surface-2 ${
+                  viewType === "list" ? "bg-brand-surface-2" : ""
+                }`}
+                onClick={() => setViewType("list")}
+              >
+                <ListBulletIcon className="h-4 w-4" />
+              </button>
+              <button
+                type="button"
+                className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-brand-surface-2 ${
+                  viewType === "detailed" ? "bg-brand-surface-2" : ""
+                }`}
+                onClick={() => setViewType("detailed")}
+              >
+                <Squares2X2Icon className="h-4 w-4" />
+              </button>
+            </div>
+          </div>
           <Tab.Group
             as={Fragment}
             defaultIndex={currentTabValue(pageTab)}
@@ -147,7 +169,7 @@ const ProjectPages: NextPage = () => {
             }}
           >
             <Tab.List as="div" className="mb-6 flex items-center justify-between">
-              <div className="flex gap-4">
+              <div className="flex gap-4 items-center flex-wrap">
                 {tabsList.map((tab, index) => (
                   <Tab
                     key={`${tab}-${index}`}
@@ -163,26 +185,6 @@ const ProjectPages: NextPage = () => {
                   </Tab>
                 ))}
               </div>
-              <div className="flex gap-x-1">
-                <button
-                  type="button"
-                  className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-brand-surface-2 ${
-                    viewType === "list" ? "bg-brand-surface-2" : ""
-                  }`}
-                  onClick={() => setViewType("list")}
-                >
-                  <ListBulletIcon className="h-4 w-4" />
-                </button>
-                <button
-                  type="button"
-                  className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-brand-surface-2 ${
-                    viewType === "detailed" ? "bg-brand-surface-2" : ""
-                  }`}
-                  onClick={() => setViewType("detailed")}
-                >
-                  <Squares2X2Icon className="h-4 w-4" />
-                </button>
-              </div>
             </Tab.List>
             <Tab.Panels as={Fragment}>
               <Tab.Panel as="div" className="h-full overflow-y-auto space-y-5">