diff --git a/ui/desktop/src/ChatWindow.tsx b/ui/desktop/src/ChatWindow.tsx
index fbd80dc89..d6e0648a5 100644
--- a/ui/desktop/src/ChatWindow.tsx
+++ b/ui/desktop/src/ChatWindow.tsx
@@ -9,10 +9,10 @@ import GooseMessage from './components/GooseMessage';
 import UserMessage from './components/UserMessage';
 import Input from './components/Input';
 import MoreMenu from './components/MoreMenu';
-import { Bird } from './components/ui/icons';
 import LoadingGoose from './components/LoadingGoose';
 import { ApiKeyWarning } from './components/ApiKeyWarning';
-// import fakeToolInvocations from './fixtures/tool-calls-and-results.json';
+import { askAi } from './utils/askAI';
+import WingToWing, { Working } from './components/WingToWing';
 
 export interface Chat {
   id: number;
@@ -24,34 +24,6 @@ export interface Chat {
   }>;
 }
 
-enum Working {
-  Idle = 'Idle',
-  Working = 'Working',
-}
-
-const WingView: React.FC<{
-  onExpand: () => void;
-  progressMessage: string;
-  working: Working;
-}> = ({ onExpand, progressMessage, working }) => {
-  return (
-    <div
-      onClick={onExpand}
-      className="flex items-center w-full h-28 bg-gradient-to-r from-gray-100 via-gray-200 to-gray-300 shadow-md rounded-lg p-4 cursor-pointer hover:shadow-lg transition-all duration-200">
-      {working === Working.Working && (      
-        <div className="w-10 h-10 mr-4 flex-shrink-0">
-          <Bird />
-        </div>
-      )}
-
-      {/* Status Text */}
-      <div className="flex flex-col text-left">
-        <span className="text-sm text-gray-600 font-medium">{progressMessage}</span>
-      </div>
-    </div>
-  );
-};
-
 function ChatContent({
   chats,
   setChats,
@@ -73,7 +45,6 @@ function ChatContent({
 
   const [messageMetadata, setMessageMetadata] = useState<Record<string, string[]>>({});
 
-
   const {
     messages,
     input,
@@ -115,8 +86,6 @@ function ChatContent({
     },
   });
 
-  // const messages = fakeToolInvocations;
-
   // Update chat messages when they change
   useEffect(() => {
     const updatedChats = chats.map((c) =>
@@ -304,38 +273,11 @@ export default function ChatWindow() {
               <Route path="*" element={<Navigate to="/chat/1" replace />} />
             </Routes>
           </div>
-
-          {/* Always render WingView but control its visibility */}
-          <WingView onExpand={toggleMode} progressMessage={progressMessage} working={working} />
+                    
+          <WingToWing onExpand={toggleMode} progressMessage={progressMessage} working={working} />
+          
         </>
       )}
     </div>
   );
-}
-
-/**
- * Utility to ask the LLM any question to clarify without wider context.
- */
-async function askAi(promptTemplates: string[]) {
-  const responses = await Promise.all(
-    promptTemplates.map(async (template) => {
-      const response = await fetch(getApiUrl('/ask'), {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({ prompt: template }),
-      });
-
-      if (!response.ok) {
-        throw new Error('Failed to get response');
-      }
-
-      const data = await response.json();
-
-      return data.response;
-    })
-  );
-
-  return responses;
-}
+}
\ No newline at end of file
diff --git a/ui/desktop/src/components/WingToWing.tsx b/ui/desktop/src/components/WingToWing.tsx
new file mode 100644
index 000000000..b83f49b94
--- /dev/null
+++ b/ui/desktop/src/components/WingToWing.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import { Bird } from '../components/ui/icons';
+
+export enum Working {
+  Idle = 'Idle',
+  Working = 'Working',
+}
+
+interface WingToWingProps {
+  onExpand: () => void;
+  progressMessage: string;
+  working: Working;
+}
+
+const WingToWing: React.FC<WingToWingProps> = ({ onExpand, progressMessage, working }) => {
+  return (
+    <div
+      onClick={onExpand}
+      className="flex items-center w-full h-28 bg-gradient-to-r from-gray-100 via-gray-200 to-gray-300 shadow-md rounded-lg p-4 cursor-pointer hover:shadow-lg transition-all duration-200">
+      {working === Working.Working && (      
+        <div className="w-10 h-10 mr-4 flex-shrink-0">
+          <Bird />
+        </div>
+      )}
+
+      {/* Status Text */}
+      <div className="flex flex-col text-left">
+        <span className="text-sm text-gray-600 font-medium">{progressMessage}</span>
+      </div>
+    </div>
+  );
+};
+
+export default WingToWing;
\ No newline at end of file
diff --git a/ui/desktop/src/utils/askAI.ts b/ui/desktop/src/utils/askAI.ts
new file mode 100644
index 000000000..1fc3c1cee
--- /dev/null
+++ b/ui/desktop/src/utils/askAI.ts
@@ -0,0 +1,28 @@
+import { getApiUrl } from '../config';
+
+/**
+ * Utility to ask the LLM any question to clarify without wider context.
+ */
+export async function askAi(promptTemplates: string[]) {
+  const responses = await Promise.all(
+    promptTemplates.map(async (template) => {
+      const response = await fetch(getApiUrl('/ask'), {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ prompt: template }),
+      });
+
+      if (!response.ok) {
+        throw new Error('Failed to get response');
+      }
+
+      const data = await response.json();
+
+      return data.response;
+    })
+  );
+
+  return responses;
+}
\ No newline at end of file