diff --git a/package-lock.json b/package-lock.json
index 7e19a857..816de0b9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -25,6 +25,7 @@
         "@radix-ui/colors": "^3.0.0",
         "@radix-ui/react-hover-card": "^1.1.1",
         "@radix-ui/react-icons": "^1.3.0",
+        "@radix-ui/react-popover": "^1.1.1",
         "@radix-ui/react-slot": "^1.1.0",
         "@sentry/electron": "^5.3.0",
         "@tailwindcss/typography": "^0.5.10",
@@ -3982,6 +3983,44 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-focus-guards": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.0.tgz",
+      "integrity": "sha512-w6XZNUPVv6xCpZUqb/yN9DL6auvpGX3C/ee6Hdi16v2UUy25HV2Q5bcflsiDyT/g5RwbPQ/GIT1vLkeRb+ITBw==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-focus-scope": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.0.tgz",
+      "integrity": "sha512-200UD8zylvEyL8Bx+z76RJnASR2gRMuxlgFCPAe/Q/679a/r0eK3MBVYMb7vZODZcffZBdob1EGnky78xmVvcA==",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-callback-ref": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-hover-card": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-hover-card/-/react-hover-card-1.1.1.tgz",
@@ -4020,6 +4059,59 @@
         "react": "^16.x || ^17.x || ^18.x"
       }
     },
+    "node_modules/@radix-ui/react-id": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.0.tgz",
+      "integrity": "sha512-EJUrI8yYh7WOjNOqpoJaf1jlFIH2LvtgAl+YcFqNCa+4hj64ZXmPkAKOFs/ukjz3byN6bdb/AVUqHkI8/uWWMA==",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popover": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-popover/-/react-popover-1.1.1.tgz",
+      "integrity": "sha512-3y1A3isulwnWhvTTwmIreiB8CF4L+qRjZnK1wYLO7pplddzXKby/GnZ2M7OZY3qgnl6p9AodUIHRYGXNah8Y7g==",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.0",
+        "@radix-ui/react-dismissable-layer": "1.1.0",
+        "@radix-ui/react-focus-guards": "1.1.0",
+        "@radix-ui/react-focus-scope": "1.1.0",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-popper": "1.2.0",
+        "@radix-ui/react-portal": "1.1.1",
+        "@radix-ui/react-presence": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-slot": "1.1.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "aria-hidden": "^1.1.1",
+        "react-remove-scroll": "2.5.7"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-popper": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.0.tgz",
@@ -7899,6 +7991,11 @@
       "license": "MIT",
       "optional": true
     },
+    "node_modules/detect-node-es": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
+      "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ=="
+    },
     "node_modules/devlop": {
       "version": "1.1.0",
       "license": "MIT",
@@ -10452,6 +10549,14 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/get-nonce": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-nonce/-/get-nonce-1.0.1.tgz",
+      "integrity": "sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/get-package-type": {
       "version": "0.1.0",
       "dev": true,
@@ -11167,6 +11272,14 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/invariant": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
+      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "node_modules/is-alphabetical": {
       "version": "2.0.1",
       "license": "MIT",
@@ -19199,6 +19312,51 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-remove-scroll": {
+      "version": "2.5.7",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.5.7.tgz",
+      "integrity": "sha512-FnrTWO4L7/Bhhf3CYBNArEG/yROV0tKmTv7/3h9QCFvH6sndeFf1wPqOcbFVu5VAulS5dV1wGT3GZZ/1GawqiA==",
+      "dependencies": {
+        "react-remove-scroll-bar": "^2.3.4",
+        "react-style-singleton": "^2.2.1",
+        "tslib": "^2.1.0",
+        "use-callback-ref": "^1.3.0",
+        "use-sidecar": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-remove-scroll-bar": {
+      "version": "2.3.6",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.6.tgz",
+      "integrity": "sha512-DtSYaao4mBmX+HDo5YWYdBWQwYIQQshUV/dVxFxK+KM26Wjwp1gZ6rv6OC3oujI6Bfu6Xyg3TwK533AQutsn/g==",
+      "dependencies": {
+        "react-style-singleton": "^2.2.1",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-rnd": {
       "version": "10.4.1",
       "license": "MIT",
@@ -19216,6 +19374,28 @@
       "version": "2.3.1",
       "license": "0BSD"
     },
+    "node_modules/react-style-singleton": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz",
+      "integrity": "sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==",
+      "dependencies": {
+        "get-nonce": "^1.0.0",
+        "invariant": "^2.2.4",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-switch": {
       "version": "7.0.0",
       "license": "MIT",
@@ -21413,6 +21593,26 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/use-callback-ref": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.2.tgz",
+      "integrity": "sha512-elOQwe6Q8gqZgDA8mrh44qRTQqpIHDcZ3hXTLjBe1i4ph8XpNJnO+aQf3NaG+lriLopI4HMx9VjQLfPQ6vhnoA==",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/use-debounce": {
       "version": "10.0.1",
       "resolved": "https://registry.npmjs.org/use-debounce/-/use-debounce-10.0.1.tgz",
@@ -21424,6 +21624,27 @@
         "react": ">=16.8.0"
       }
     },
+    "node_modules/use-sidecar": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.2.tgz",
+      "integrity": "sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==",
+      "dependencies": {
+        "detect-node-es": "^1.1.0",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.9.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/use-sync-external-store": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.2.tgz",
diff --git a/package.json b/package.json
index 2f738e41..7c0b6daa 100644
--- a/package.json
+++ b/package.json
@@ -44,6 +44,7 @@
     "@radix-ui/colors": "^3.0.0",
     "@radix-ui/react-hover-card": "^1.1.1",
     "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/react-popover": "^1.1.1",
     "@radix-ui/react-slot": "^1.1.0",
     "@sentry/electron": "^5.3.0",
     "@tailwindcss/typography": "^0.5.10",
diff --git a/src/components/Editor/HighlightExtension.tsx b/src/components/Editor/HighlightExtension.tsx
index b23fc984..92cc18e7 100644
--- a/src/components/Editor/HighlightExtension.tsx
+++ b/src/components/Editor/HighlightExtension.tsx
@@ -24,7 +24,7 @@ const HighlightExtension = (setHighlightData: (data: HighlightData) => void) =>
                   const { top, left, right } = editorView.coordsAtPos(to)
 
                   // Calculate the button position below the last word
-                  const buttonTop = top >= window.innerHeight ? 20 : top - 35 // Adjust the vertical offset as needed
+                  const buttonTop = top >= window.innerHeight ? 50 : top - 125 // Adjust the vertical offset as needed
                   const buttonLeft = (left + right) / 2 - 190 // Position the button horizontally centered
                   setHighlightData({
                     text: highlightedText,
diff --git a/src/components/WritingAssistant/WritingAssistant.tsx b/src/components/WritingAssistant/WritingAssistant.tsx
index 83b93e89..9703b7a7 100644
--- a/src/components/WritingAssistant/WritingAssistant.tsx
+++ b/src/components/WritingAssistant/WritingAssistant.tsx
@@ -12,6 +12,7 @@ import getClassNames, { generatePromptString, getLastMessage } from './utils'
 import { ReorChatMessage } from '../Chat/types'
 import { useFileContext } from '@/contexts/FileContext'
 import resolveLLMClient from '@/utils/llm'
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
 
 const WritingAssistant: React.FC = () => {
   const [messages, setMessages] = useState<ReorChatMessage[]>([])
@@ -247,73 +248,127 @@ const WritingAssistant: React.FC = () => {
   }
 
   if (!isSpaceTrigger && !highlightData.position) return null
+  if (isSpaceTrigger && isOptionsVisible && !getLastMessage(messages, 'assistant'))
+    return (
+      <div
+        ref={optionsContainerRef}
+        style={{
+          top: positionStyle.top,
+          left: positionStyle.left,
+        }}
+        className="absolute z-50 w-96 rounded-md border border-gray-300 bg-white p-2.5"
+      >
+        <TextField
+          inputRef={textFieldRef}
+          autoFocus
+          type="text"
+          variant="outlined"
+          size="small"
+          value={customPrompt}
+          onChange={(e) => setCustomPrompt(e.target.value)}
+          placeholder="Ask AI anything..."
+          className="mb-2.5 w-full p-1"
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') {
+              handleOption('custom', customPrompt)
+            }
+          }}
+        />
+        <div className="max-h-36 overflow-y-auto">
+          <Button
+            onClick={() => handleOption('simplify')}
+            className="mb-1 block w-full"
+            style={{ textTransform: 'none' }}
+          >
+            Simplify and condense the writing
+          </Button>
+          <Button
+            onClick={() => handleOption('copy-editor')}
+            className="mb-1 block w-full"
+            style={{ textTransform: 'none' }}
+          >
+            Fix spelling and grammar
+          </Button>
+          <Button
+            onClick={() => handleOption('takeaways')}
+            className="mb-1 block w-full"
+            style={{ textTransform: 'none' }}
+          >
+            List key Takeaways
+          </Button>
+        </div>
+      </div>
+    )
   return (
     <div>
       {!isSpaceTrigger && highlightData.position && (
-        <button
-          style={{
-            top: `${highlightData.position.top}px`,
-            left: `${highlightData.position.left + 30}px`,
-            zIndex: 50,
-          }}
-          className="absolute flex size-7 cursor-pointer items-center justify-center rounded-full border-none bg-gray-200 text-gray-600 shadow-md hover:bg-gray-300"
-          aria-label="Writing Assistant button"
-          onClick={() => setIsOptionsVisible(true)}
-          type="button"
-        >
-          <FaMagic />
-        </button>
-      )}
-      {isOptionsVisible && !getLastMessage(messages, 'assistant') && (
-        <div
-          ref={optionsContainerRef}
-          style={{
-            top: positionStyle.top,
-            left: positionStyle.left,
-          }}
-          className="absolute z-50 w-96 rounded-md border border-gray-300 bg-white p-2.5"
-        >
-          <TextField
-            inputRef={textFieldRef}
-            autoFocus
-            type="text"
-            variant="outlined"
-            size="small"
-            value={customPrompt}
-            onChange={(e) => setCustomPrompt(e.target.value)}
-            placeholder="Ask AI anything..."
-            className="mb-2.5 w-full p-1"
-            onKeyDown={(e) => {
-              if (e.key === 'Enter') {
-                handleOption('custom', customPrompt)
-              }
+        <Popover>
+          <PopoverTrigger
+            style={{
+              top: `${highlightData.position.top}px`,
+              left: `${highlightData.position.left + 30}px`,
+              zIndex: 50,
             }}
-          />
-          <div className="max-h-36 overflow-y-auto">
-            <Button
-              onClick={() => handleOption('simplify')}
-              className="mb-1 block w-full"
-              style={{ textTransform: 'none' }}
-            >
-              Simplify and condense the writing
-            </Button>
-            <Button
-              onClick={() => handleOption('copy-editor')}
-              className="mb-1 block w-full"
-              style={{ textTransform: 'none' }}
-            >
-              Fix spelling and grammar
-            </Button>
-            <Button
-              onClick={() => handleOption('takeaways')}
-              className="mb-1 block w-full"
-              style={{ textTransform: 'none' }}
+            className="absolute flex size-7 cursor-pointer items-center justify-center rounded-full border-none bg-gray-200 text-gray-600 shadow-md hover:bg-gray-300"
+            aria-label="Writing Assistant button"
+            onClick={() => setIsOptionsVisible(true)}
+            type="button"
+          >
+            <FaMagic />
+          </PopoverTrigger>
+          {isOptionsVisible && !getLastMessage(messages, 'assistant') && (
+            <PopoverContent
+              ref={optionsContainerRef}
+              style={{
+                position: 'absolute',
+                transform: 'translate(-50%, -50%)',
+              }}
+              className="absolute z-50 w-96 rounded-md border border-gray-300 bg-white p-2.5"
             >
-              List key Takeaways
-            </Button>
-          </div>
-        </div>
+              <TextField
+                inputRef={textFieldRef}
+                autoFocus
+                type="text"
+                variant="outlined"
+                size="small"
+                value={customPrompt}
+                onChange={(e) => setCustomPrompt(e.target.value)}
+                placeholder="Ask AI anything..."
+                className="mb-2.5 w-full p-1"
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter') {
+                    handleOption('custom', customPrompt)
+                  }
+                }}
+              />
+              <div className="max-h-36 overflow-y-auto">
+                <Button
+                  onClick={() => handleOption('simplify')}
+                  className="mb-1 block w-full"
+                  style={{ textTransform: 'none' }}
+                >
+                  Simplify and condense the writing
+                </Button>
+                <Button
+                  onClick={() => handleOption('copy-editor')}
+                  className="mb-1 block w-full"
+                  style={{ textTransform: 'none' }}
+                >
+                  Fix spelling and grammar
+                </Button>
+                <Button
+                  onClick={() => handleOption('takeaways')}
+                  className="mb-1 block w-full"
+                  style={{ textTransform: 'none' }}
+                >
+                  List key Takeaways
+                </Button>
+              </div>
+            </PopoverContent>
+          )}
+        </Popover>
       )}
+
       {getLastMessage(messages, 'assistant') && (
         <div
           ref={markdownContainerRef}
diff --git a/src/components/ui/popover.tsx b/src/components/ui/popover.tsx
new file mode 100644
index 00000000..de6efb7b
--- /dev/null
+++ b/src/components/ui/popover.tsx
@@ -0,0 +1,33 @@
+/* eslint-disable react/prop-types */
+/* eslint-disable react/jsx-props-no-spreading */
+import * as React from 'react'
+import * as PopoverPrimitive from '@radix-ui/react-popover'
+
+import { cn } from '@/lib/utils'
+
+const Popover = PopoverPrimitive.Root
+
+const PopoverTrigger = PopoverPrimitive.Trigger
+
+const PopoverAnchor = PopoverPrimitive.Anchor
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        className,
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+))
+PopoverContent.displayName = PopoverPrimitive.Content.displayName
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }