diff --git a/extensions/vscode/src/extension/VsCodeMessenger.ts b/extensions/vscode/src/extension/VsCodeMessenger.ts
index 23669305a3..9f26535c9f 100644
--- a/extensions/vscode/src/extension/VsCodeMessenger.ts
+++ b/extensions/vscode/src/extension/VsCodeMessenger.ts
@@ -317,6 +317,33 @@ export class VsCodeMessenger {
       editDecorationManager.clear();
     });
 
+    this.onWebview("switchMode", async (msg) => {
+      const { mode } = msg.data;
+      if (mode === "agent") {
+        // Handle agent mode activation
+        // Reset current window with user confirmation
+        const userConfirmed = await vscode.window.showInformationMessage(
+          "Switching to agent mode will reset the current window and cancel the current response generation process. Do you want to continue?",
+          "Yes",
+          "No",
+        );
+
+        if (userConfirmed !== "Yes") {
+          return;
+        }
+
+        // Cancel current response generation process
+        // Implement the logic to cancel the current response generation process here
+
+        // Apply changes directly to files in agent mode
+        // Display a progress bar in the chat window with a file name being edited and percentage of edits applied
+        // Implement the logic to apply changes directly to files and display the progress bar here
+      } else if (mode === "chat") {
+        // Handle chat mode activation
+        // Implement the logic to switch back to chat mode here
+      }
+    });
+
     /** PASS THROUGH FROM WEBVIEW TO CORE AND BACK **/
     WEBVIEW_TO_CORE_PASS_THROUGH.forEach((messageType) => {
       this.onWebview(messageType, async (msg) => {
diff --git a/gui/src/components/Footer.tsx b/gui/src/components/Footer.tsx
index b2efd221c9..7de5c76f8b 100644
--- a/gui/src/components/Footer.tsx
+++ b/gui/src/components/Footer.tsx
@@ -1,3 +1,4 @@
+import { useState } from "react";
 import { useAppSelector } from "../redux/hooks";
 import { selectDefaultModel } from "../redux/slices/configSlice";
 import { FREE_TRIAL_LIMIT_REQUESTS } from "../util/freeTrial";
@@ -6,18 +7,105 @@ import FreeTrialProgressBar from "./loaders/FreeTrialProgressBar";
 
 function Footer() {
   const defaultModel = useAppSelector(selectDefaultModel);
+  const [mode, setMode] = useState("chat");
+  const [editedFiles, setEditedFiles] = useState([]);
 
-  if (defaultModel?.provider === "free-trial") {
-    return (
-      <footer className="flex flex-col border-0 border-t border-solid border-t-zinc-700 px-2 py-2">
+  const handleModeChange = (newMode) => {
+    if (newMode !== mode) {
+      const userConfirmed = window.confirm(
+        "Switching modes will reset the current window and cancel the current response generation process. Do you want to continue?"
+      );
+
+      if (userConfirmed) {
+        setMode(newMode);
+        setEditedFiles([]);
+        // Implement the logic to cancel the current response generation process here
+      }
+    }
+  };
+
+  const handleAcceptChanges = (fileName) => {
+    // Implement the logic to accept changes made by the model here
+  };
+
+  const handleRejectChanges = (fileName) => {
+    // Implement the logic to reject changes made by the model here
+  };
+
+  const handleDiffChanges = (fileName) => {
+    // Implement the logic to show diff changes made by the model here
+  };
+
+  return (
+    <footer className="flex flex-col border-0 border-t border-solid border-t-zinc-700 px-2 py-2">
+      <div className="flex justify-between items-center mb-2">
+        <div>
+          <label>
+            <input
+              type="radio"
+              value="chat"
+              checked={mode === "chat"}
+              onChange={() => handleModeChange("chat")}
+            />
+            Chat
+          </label>
+          <label className="ml-4">
+            <input
+              type="radio"
+              value="agent"
+              checked={mode === "agent"}
+              onChange={() => handleModeChange("agent")}
+            />
+            Agent
+          </label>
+        </div>
+      </div>
+      {mode === "agent" && (
+        <div className="flex flex-col">
+          <div className="mb-2">
+            <strong>Edited Files:</strong>
+          </div>
+          <ul>
+            {editedFiles.map((file) => (
+              <li key={file.name} className="flex justify-between items-center">
+                <span
+                  className="cursor-pointer"
+                  onClick={() => {
+                    // Implement the logic to open the file in the code editor here
+                  }}
+                >
+                  {file.name}
+                </span>
+                <div>
+                  <button
+                    className="mr-2"
+                    onClick={() => handleAcceptChanges(file.name)}
+                  >
+                    Accept
+                  </button>
+                  <button
+                    className="mr-2"
+                    onClick={() => handleRejectChanges(file.name)}
+                  >
+                    Reject
+                  </button>
+                  <button onClick={() => handleDiffChanges(file.name)}>
+                    Diff
+                  </button>
+                </div>
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+      {defaultModel?.provider === "free-trial" && (
         <FreeTrialProgressBar
           completed={getLocalStorage("ftc") ?? 0}
           total={FREE_TRIAL_LIMIT_REQUESTS}
         />
-      </footer>
-    );
-  }
-  return null;
+      )}
+    </footer>
+  );
 }
 
 export default Footer;