diff --git a/apps/www/components/modal/ModalChat.tsx b/apps/www/components/modal/ModalChat.tsx
index 0503a9456..6b42d88e8 100644
--- a/apps/www/components/modal/ModalChat.tsx
+++ b/apps/www/components/modal/ModalChat.tsx
@@ -2,8 +2,9 @@ import { AssistantModal } from "@/components/ui/assistant-ui/assistant-modal";
 
 export const ModalChat = () => {
   return (
-    <div className="relative h-full w-full">
+    <div className="flex h-full w-full items-center justify-center p-4">
       <AssistantModal />
+      <p className="bold text-lg">The Assistant Modal is available in the bottom right corner of the screen.</p>
     </div>
   );
 };
diff --git a/packages/shadcn-registry/registry/assistant-ui/assistant-modal.tsx b/packages/shadcn-registry/registry/assistant-ui/assistant-modal.tsx
index 2211017db..6dc604ae8 100644
--- a/packages/shadcn-registry/registry/assistant-ui/assistant-modal.tsx
+++ b/packages/shadcn-registry/registry/assistant-ui/assistant-modal.tsx
@@ -21,8 +21,9 @@ export const AssistantModal = () => {
         <FloatingAssistantButton />
       </AssistantModalPrimitive.Trigger>
       <AssistantModalPrimitive.Content
+        sideOffset={16}
         className={
-          "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 slide-in-from-bottom-2 bg-popover text-popover-foreground data-[state=closed]:animate-out data-[state=open]:animate-in z-50 mb-3 h-[500px] w-[400px] rounded-xl border p-0 shadow-md outline-none"
+          "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 slide-in-from-bottom-2 bg-popover text-popover-foreground data-[state=closed]:animate-out data-[state=open]:animate-in z-50 h-[500px] w-[400px] rounded-xl border p-0 shadow-md outline-none"
         }
       >
         <Thread />