diff --git a/ui/desktop/src/components/BaseChat.tsx b/ui/desktop/src/components/BaseChat.tsx
index dabe49dc3b..3ca243e957 100644
--- a/ui/desktop/src/components/BaseChat.tsx
+++ b/ui/desktop/src/components/BaseChat.tsx
@@ -533,17 +533,17 @@ function BaseChatContent({
                 </>
               ) : !recipeConfig && showPopularTopics ? (
                 /* Show PopularChatTopics when no messages, no recipe, and showPopularTopics is true (Pair view) */
-                <div className="relative">
-                  <PopularChatTopics append={(text: string) => append(text)} />
-                  
-                  {/* Show pending invites if enabled - positioned on the right side */}
+                <div className="absolute bottom-0 left-0">
+                  {/* Show pending invites above popular topics if enabled */}
                   {showPendingInvites && (
                     <PendingInvitesInHistory showInChatHistory={false} />
                   )}
+                  
+                  <PopularChatTopics append={(text: string) => append(text)} />
                 </div>
               ) : showPendingInvites ? (
                 /* Show only pending invites when no messages and showPendingInvites is true */
-                <div className="relative">
+                <div className="absolute bottom-0 left-0">
                   <PendingInvitesInHistory showInChatHistory={false} />
                 </div>
               ) : null /* Show nothing when messages.length === 0 && suppressEmptyState === true */
diff --git a/ui/desktop/src/components/PendingInvitesInHistory.tsx b/ui/desktop/src/components/PendingInvitesInHistory.tsx
index 38069983b0..0a29a174f4 100644
--- a/ui/desktop/src/components/PendingInvitesInHistory.tsx
+++ b/ui/desktop/src/components/PendingInvitesInHistory.tsx
@@ -192,13 +192,13 @@ const PendingInvitesInHistory: React.FC<PendingInvitesInHistoryProps> = ({
     );
   }
 
-  // Separate section style (shows as a dedicated section matching PopularChatTopics)
+  // Separate section style (shows above PopularChatTopics with same styling)
   return (
-    <div className={`absolute bottom-0 right-0 p-6 max-w-md ${className}`}>
+    <div className={`p-6 max-w-md ${className}`}>
       <h3 className="text-text-muted text-sm mb-1">
         Outstanding invitations ({pendingInvites.length})
       </h3>
-      <div className="space-y-1">
+      <div className="space-y-1 mb-8">
         <AnimatePresence>
           {pendingInvites.map((invite) => (
             <motion.div