diff --git a/package.json b/package.json
index c687aa28..cd67a340 100644
--- a/package.json
+++ b/package.json
@@ -151,7 +151,6 @@
     "unified": "10.1.2",
     "unist-builder": "4.0.0",
     "unist-util-visit": "5.0.0",
-    "use-onclickoutside": "0.4.1",
     "uuid": "9.0.0",
     "viem": "1.6.7",
     "wagmi": "1.3.10",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b21dc340..33926b90 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -368,9 +368,6 @@ dependencies:
   unist-util-visit:
     specifier: 5.0.0
     version: 5.0.0
-  use-onclickoutside:
-    specifier: 0.4.1
-    version: 0.4.1(@types/react@18.2.21)(react@18.2.0)
   uuid:
     specifier: 9.0.0
     version: 9.0.0
@@ -4137,10 +4134,6 @@ packages:
       smoothscroll: 0.4.0
     dev: false
 
-  /are-passive-events-supported@1.1.1:
-    resolution: {integrity: sha512-5wnvlvB/dTbfrCvJ027Y4L4gW/6Mwoy1uFSavney0YO++GU+0e/flnjiBBwH+1kh7xNCgCOGvmJC3s32joYbww==}
-    dev: false
-
   /arg@5.0.2:
     resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==}
 
@@ -11456,18 +11449,6 @@ packages:
       use-isomorphic-layout-effect: 1.1.2(@types/react@18.2.21)(react@18.2.0)
     dev: false
 
-  /use-onclickoutside@0.4.1(@types/react@18.2.21)(react@18.2.0):
-    resolution: {integrity: sha512-hAo1viJ9D2mPffUig4EWCwE4as7fq84HANk3MCkY3rhXk5oMl0mjLCLF/OhzWIhTaITcAcDDcnaxRdMHPq+sww==}
-    peerDependencies:
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0
-    dependencies:
-      are-passive-events-supported: 1.1.1
-      react: 18.2.0
-      use-latest: 1.2.1(@types/react@18.2.21)(react@18.2.0)
-    transitivePeerDependencies:
-      - '@types/react'
-    dev: false
-
   /use-sidecar@1.1.2(@types/react@18.2.21)(react@18.2.0):
     resolution: {integrity: sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==}
     engines: {node: '>=10'}
diff --git a/src/app/dashboard/[subdomain]/editor/portfolio-editor.tsx b/src/app/dashboard/[subdomain]/editor/portfolio-editor.tsx
index 35b5a3cc..f393b229 100644
--- a/src/app/dashboard/[subdomain]/editor/portfolio-editor.tsx
+++ b/src/app/dashboard/[subdomain]/editor/portfolio-editor.tsx
@@ -226,61 +226,56 @@ export default function PortfolioEditor() {
 
   return (
     <>
-      <DashboardMain fullWidth>
-        <div className="min-w-[270px] max-w-screen-lg flex flex-col space-y-8">
-          {page.isLoading ? (
-            <div className="flex justify-center items-center min-h-[300px]">
-              {t("Loading")}...
+      <DashboardMain className="max-w-screen-lg" title="Edit portfolio">
+        {page.isLoading ? (
+          <div className="flex justify-center items-center min-h-[300px]">
+            {t("Loading")}...
+          </div>
+        ) : (
+          <>
+            <EditorExtraProperties />
+            <div className="flex justify-between h-14 items-center text-sm mt-8">
+              <div className="flex items-center space-x-3 flex-shrink-0">
+                <PublishButton
+                  savePage={savePage}
+                  deletePage={deletePage}
+                  twitterShareUrl={
+                    page.data && site.data
+                      ? getTwitterShareUrl({
+                          page: page.data,
+                          site: site.data,
+                          t,
+                        })
+                      : ""
+                  }
+                  published={visibility !== PageVisibilityEnum.Draft}
+                  isSaving={
+                    createPage.isLoading ||
+                    updatePage.isLoading ||
+                    deleteP.isLoading
+                  }
+                  isDisabled={false}
+                  type={type}
+                  isModified={visibility === PageVisibilityEnum.Modified}
+                  discardChanges={discardChanges}
+                  placement="top-start"
+                />
+                <span
+                  className={cn(
+                    `text-sm capitalize`,
+                    visibility === PageVisibilityEnum.Draft
+                      ? `text-zinc-300`
+                      : visibility === PageVisibilityEnum.Modified
+                      ? "text-orange-600"
+                      : "text-green-600",
+                  )}
+                >
+                  {t(visibility as string)}
+                </span>
+              </div>
             </div>
-          ) : (
-            <>
-              <div className={`pt-10 flex w-full min-w-[840px] px-5`}>
-                <EditorExtraProperties />
-              </div>
-              <div
-                className={`flex justify-between px-5 h-14 items-center text-sm`}
-              >
-                <div className="flex items-center space-x-3 flex-shrink-0">
-                  <PublishButton
-                    savePage={savePage}
-                    deletePage={deletePage}
-                    twitterShareUrl={
-                      page.data && site.data
-                        ? getTwitterShareUrl({
-                            page: page.data,
-                            site: site.data,
-                            t,
-                          })
-                        : ""
-                    }
-                    published={visibility !== PageVisibilityEnum.Draft}
-                    isSaving={
-                      createPage.isLoading ||
-                      updatePage.isLoading ||
-                      deleteP.isLoading
-                    }
-                    isDisabled={false}
-                    type={type}
-                    isModified={visibility === PageVisibilityEnum.Modified}
-                    discardChanges={discardChanges}
-                  />
-                  <span
-                    className={cn(
-                      `text-sm capitalize`,
-                      visibility === PageVisibilityEnum.Draft
-                        ? `text-zinc-300`
-                        : visibility === PageVisibilityEnum.Modified
-                        ? "text-orange-600"
-                        : "text-green-600",
-                    )}
-                  >
-                    {t(visibility as string)}
-                  </span>
-                </div>
-              </div>
-            </>
-          )}
-        </div>
+          </>
+        )}
       </DashboardMain>
     </>
   )
diff --git a/src/components/dashboard/PublishButton.tsx b/src/components/dashboard/PublishButton.tsx
index fc9a0cdc..3a1d6658 100644
--- a/src/components/dashboard/PublishButton.tsx
+++ b/src/components/dashboard/PublishButton.tsx
@@ -1,6 +1,8 @@
-import { useEffect, useRef, useState } from "react"
-import useOnClickOutside from "use-onclickoutside"
+import { useState } from "react"
 
+import { Placement } from "@floating-ui/react"
+
+import { Menu } from "~/components//ui/Menu"
 import { DeleteConfirmationModal } from "~/components/common/DeleteConfirmationModal"
 import { useTranslation } from "~/lib/i18n/client"
 import { NoteType } from "~/lib/types"
@@ -17,6 +19,7 @@ export const PublishButton = ({
   isModified,
   twitterShareUrl,
   type,
+  placement = "bottom-end",
 }: {
   savePage: () => void
   deletePage: () => void
@@ -27,23 +30,10 @@ export const PublishButton = ({
   type: NoteType
   isModified: boolean
   discardChanges: () => void
+  placement?: Placement
 }) => {
-  const [showDropdown, setShowDropdown] = useState(false)
-  const dropdownRef = useRef<HTMLDivElement | null>(null)
-  const triggerRef = useRef<HTMLButtonElement | null>(null)
   const { t } = useTranslation("dashboard")
 
-  useOnClickOutside(dropdownRef, (e) => {
-    if (triggerRef.current?.contains(e.target as any)) return
-    setShowDropdown(false)
-  })
-
-  useEffect(() => {
-    if (isSaving) {
-      setShowDropdown(false)
-    }
-  }, [isSaving])
-
   const [deleteConfirmModalOpen, setDeleteConfirmModalOpen] =
     useState<boolean>(false)
 
@@ -60,26 +50,19 @@ export const PublishButton = ({
           {t(published ? "Update" : "Publish")}
         </Button>
         {published && (
-          <Button
-            isAutoWidth
-            style={{ padding: "0 8px" }}
-            onClick={() => {
-              setShowDropdown(!showDropdown)
-            }}
-            ref={triggerRef}
-            isDisabled={isSaving}
-          >
-            <i className="icon-[mingcute--down-line]" />
-          </Button>
-        )}
-      </ButtonGroup>
-      {showDropdown && (
-        <div
-          className="absolute right-0 min-w-[200px] pt-2 z-10"
-          ref={dropdownRef}
-        >
-          <div className="bg-white py-2 rounded-lg shadow-modal">
-            {published && (
+          <Menu
+            placement={placement}
+            target={
+              <Button
+                isAutoWidth
+                style={{ padding: "0 8px" }}
+                isDisabled={isSaving}
+                className="!rounded-r-full"
+              >
+                <i className="icon-[mingcute--down-line]" />
+              </Button>
+            }
+            dropdown={
               <div>
                 <button
                   className="flex w-full h-8 hover:bg-zinc-100 items-center px-5"
@@ -105,10 +88,10 @@ export const PublishButton = ({
                   {t("Delete")}
                 </button>
               </div>
-            )}
-          </div>
-        </div>
-      )}
+            }
+          />
+        )}
+      </ButtonGroup>
       <DeleteConfirmationModal
         open={deleteConfirmModalOpen}
         setOpen={setDeleteConfirmModalOpen}