diff --git a/src/frontend/src/components/core/flowToolbarComponent/components/deploy-dropdown.tsx b/src/frontend/src/components/core/flowToolbarComponent/components/deploy-dropdown.tsx
index 2bce6133e..d911c4015 100644
--- a/src/frontend/src/components/core/flowToolbarComponent/components/deploy-dropdown.tsx
+++ b/src/frontend/src/components/core/flowToolbarComponent/components/deploy-dropdown.tsx
@@ -77,11 +77,6 @@ export default function PublishDropdown() {
     );
   };
 
-  // using js const instead of applies.css because of group tag
-  const groupStyle = "text-muted-foreground group-hover:text-foreground";
-  const externalUrlStyle =
-    "opacity-0 transition-all duration-300 group-hover:translate-x-3 group-hover:opacity-100 group-focus-visible:translate-x-3 group-focus-visible:opacity-100";
-
   return (
     <>
       <DropdownMenu>
@@ -98,37 +93,25 @@ export default function PublishDropdown() {
         </DropdownMenuTrigger>
         <DropdownMenuContent
           forceMount
-          sideOffset={10}
-          alignOffset={-10}
+          sideOffset={7}
+          alignOffset={-2}
           align="end"
-          className="min-w-[300px] max-w-[400px]"
+          className="w-full min-w-[275px]"
         >
           <DropdownMenuItem
             className="deploy-dropdown-item group"
             onClick={() => setOpenApiModal(true)}
+            data-testid="api-access-item"
           >
-            <div
-              className="group-hover:bg-accent"
-              data-testid="api-access-item"
-            >
-              <IconComponent
-                name="Code2"
-                className={`${groupStyle} icon-size mr-2`}
-              />
-              <span>API access</span>
-            </div>
+            <IconComponent name="Code2" className={`icon-size mr-2`} />
+            <span>API access</span>
           </DropdownMenuItem>
           <DropdownMenuItem
             className="deploy-dropdown-item group"
             onClick={() => setOpenExportModal(true)}
           >
-            <div className="group-hover:bg-accent">
-              <IconComponent
-                name="Download"
-                className={`${groupStyle} icon-size mr-2`}
-              />
-              <span>Export</span>
-            </div>
+            <IconComponent name="Download" className={`icon-size mr-2`} />
+            <span>Export</span>
           </DropdownMenuItem>
           <CustomLink
             className={cn("flex-1")}
@@ -138,21 +121,14 @@ export default function PublishDropdown() {
             <DropdownMenuItem
               className="deploy-dropdown-item group"
               onClick={() => {}}
+              data-testid="mcp-server-item"
             >
-              <div
-                className="group-hover:bg-accent"
-                data-testid="mcp-server-item"
-              >
-                <IconComponent
-                  name="Mcp"
-                  className={`${groupStyle} icon-size mr-2 fill-muted-foreground group-hover:fill-foreground`}
-                />
-                <span>MCP Server</span>
-                <IconComponent
-                  name="ExternalLink"
-                  className={`${groupStyle} icon-size ml-auto hidden group-hover:block`}
-                />
-              </div>
+              <IconComponent name="Mcp" className={`icon-size mr-2`} />
+              <span>MCP Server</span>
+              <IconComponent
+                name="ExternalLink"
+                className={`icon-size ml-auto hidden group-hover:block`}
+              />
             </DropdownMenuItem>
           </CustomLink>
           {ENABLE_WIDGET && (
@@ -160,74 +136,69 @@ export default function PublishDropdown() {
               onClick={() => setOpenEmbedModal(true)}
               className="deploy-dropdown-item group"
             >
-              <div className="group-hover:bg-accent">
-                <IconComponent
-                  name="Columns2"
-                  className={`${groupStyle} icon-size mr-2`}
-                />
-                <span>Embed into site</span>
-              </div>
+              <IconComponent name="Columns2" className={`icon-size mr-2`} />
+              <span>Embed into site</span>
             </DropdownMenuItem>
           )}
 
           {ENABLE_PUBLISH && (
-            <ShadTooltipComponent
-              styleClasses="truncate"
-              side="left"
-              content={
-                hasIO
-                  ? isPublished
-                    ? encodeURI(`${domain}/playground/${flowId}`)
-                    : "Activate to share a public version of this Playground"
-                  : "Add a Chat Input or Chat Output to access your flow"
-              }
+            <DropdownMenuItem
+              className="deploy-dropdown-item group"
+              disabled={!hasIO}
+              onClick={() => {}}
+              data-testid="shareable-playground"
             >
-              <div
-                className={cn(
-                  !hasIO ? "cursor-not-allowed" : "",
-                  "flex items-center",
-                )}
-                data-testid="shareable-playground"
-              >
-                <CustomLink
-                  className={cn(
-                    "flex-1",
-                    !hasIO || !isPublished
-                      ? "pointer-events-none cursor-default"
-                      : "",
-                  )}
-                  to={`/playground/${flowId}`}
-                  target="_blank"
-                >
-                  <DropdownMenuItem
-                    disabled={!hasIO || !isPublished}
-                    className="deploy-dropdown-item group flex-1"
-                    onClick={() => {}}
+              <div className="flex w-full items-center justify-between">
+                <div className="flex items-center">
+                  <ShadTooltipComponent
+                    styleClasses="truncate"
+                    side="left"
+                    content={
+                      hasIO
+                        ? isPublished
+                          ? encodeURI(`${domain}/playground/${flowId}`)
+                          : "Activate to share a public version of this Playground"
+                        : "Add a Chat Input or Chat Output to access your flow"
+                    }
                   >
-                    <div className="group-hover:bg-accent">
+                    <div className="flex items-center">
                       <IconComponent
                         name="Globe"
-                        className={`${groupStyle} icon-size mr-2`}
+                        className={cn(
+                          `icon-size mr-2`,
+                          !isPublished && "opacity-50",
+                        )}
                       />
-                      <span>Shareable Playground</span>
+
+                      {isPublished ? (
+                        <CustomLink
+                          className="flex-1"
+                          to={`/playground/${flowId}`}
+                          target="_blank"
+                        >
+                          <span>Shareable Playground</span>
+                        </CustomLink>
+                      ) : (
+                        <span className={cn(!isPublished && "opacity-50")}>
+                          Shareable Playground
+                        </span>
+                      )}
                     </div>
-                  </DropdownMenuItem>
-                </CustomLink>
-                <div className={`z-50 mr-2 text-foreground`}>
-                  <Switch
-                    data-testid="publish-switch"
-                    className="scale-[85%]"
-                    checked={isPublished}
-                    disabled={!hasIO}
-                    onClick={(e) => {
-                      e.preventDefault();
-                      e.stopPropagation();
-                      handlePublishedSwitch(isPublished);
-                    }}
-                  />
+                  </ShadTooltipComponent>
                 </div>
+                <Switch
+                  data-testid="publish-switch"
+                  className="scale-[85%]"
+                  checked={isPublished}
+                  disabled={!hasIO}
+                  onClick={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    handlePublishedSwitch(isPublished);
+                  }}
+                />
               </div>
-            </ShadTooltipComponent>
+            </DropdownMenuItem>
           )}
         </DropdownMenuContent>
       </DropdownMenu>
diff --git a/src/frontend/src/style/applies.css b/src/frontend/src/style/applies.css
index 24bd7b2b1..f730139cd 100644
--- a/src/frontend/src/style/applies.css
+++ b/src/frontend/src/style/applies.css
@@ -1277,11 +1277,7 @@
 }
 
 .deploy-dropdown-item {
-  @apply h-11 cursor-pointer px-2.5 py-1 text-sm font-normal hover:bg-background !important;
-}
-
-.deploy-dropdown-item > :first-child {
-  @apply flex h-8 w-full items-center rounded-md px-2 py-1 !important;
+  @apply cursor-pointer rounded-none px-3 py-2 text-[13px] font-normal;
 }
 
 :root {