diff --git a/src/apps/officer-web/Screens/Dashboard/Layout.tsx b/src/apps/officer-web/Screens/Dashboard/Layout.tsx
index 91522d2b..8d25bab6 100644
--- a/src/apps/officer-web/Screens/Dashboard/Layout.tsx
+++ b/src/apps/officer-web/Screens/Dashboard/Layout.tsx
@@ -130,7 +130,8 @@ export function DashboardLayout({ children, mobileFull }: DashboardLayoutProps)
           </header>
 
           <div className={`flex-1 min-h-0 ${mobileFull ? 'pb-0 md:pb-20' : 'pb-16 md:pb-20'}`}>
-            {isProduction && passkeyCount === 0 ? <PasskeyGate /> : children}
+            {/* {isProduction && passkeyCount === 0 ? <PasskeyGate /> : children} */}
+            {children}
           </div>
           <Dock items={dockItems} className={mobileFull ? 'hidden md:flex' : 'flex'} />
         </div>
diff --git a/src/apps/officer-web/Screens/Dashboard/Settings/ResourceSettings/index.tsx b/src/apps/officer-web/Screens/Dashboard/Settings/ResourceSettings/index.tsx
index 024dc351..c9a99de9 100644
--- a/src/apps/officer-web/Screens/Dashboard/Settings/ResourceSettings/index.tsx
+++ b/src/apps/officer-web/Screens/Dashboard/Settings/ResourceSettings/index.tsx
@@ -6,6 +6,8 @@ import { Button } from '@/components/ui/button';
 import { Card } from '@/components/Card';
 import { useClient } from 'hooks/useClient';
 import { DashboardLayout } from '../../Layout';
+import { EmbeddableChat, useClaude, useOpenCode } from 'plugins/Chat/client';
+import { useVisibleClaudeModels, useVisibleOpenCodeModels } from '@/state/useModels';
 
 type AppStatus = {
   id: string;
@@ -77,10 +79,12 @@ export const ResourceSettings = () => {
     return app.hasUpdate && !(app.manualUpdateCommand ?? app.manualInstallCommand);
   };
 
+  const [provider, setProvider] = useState<'claude' | 'opencode'>('claude');
+
   return (
     <DashboardLayout>
-      <div className="flex justify-center h-full px-4 py-8 overflow-y-auto">
-        <Card className="w-full max-w-2xl h-fit p-6">
+      <div className="flex h-full gap-4 px-4 py-8 overflow-hidden">
+        <Card className="w-full max-w-2xl h-fit p-6 overflow-y-auto">
           <h2 className="text-lg font-bold text-duck-dark mb-1">Applications</h2>
           <p className="text-sm text-duck-dark/60 mb-6">System tools and dependencies used by Officer.dev</p>
 
@@ -163,7 +167,47 @@ export const ResourceSettings = () => {
             </div>
           )}
         </Card>
+
+        <Card className="flex-1 min-w-0 flex flex-col overflow-hidden">
+          {provider === 'claude' ? (
+            <ClaudeChat key="claude" onProviderChange={setProvider} />
+          ) : (
+            <OpenCodeChat key="opencode" onProviderChange={setProvider} />
+          )}
+        </Card>
       </div>
     </DashboardLayout>
   );
 };
+
+type ChatInnerProps = {
+  onProviderChange: (p: 'claude' | 'opencode') => void;
+};
+
+const ClaudeChat = ({ onProviderChange }: ChatInnerProps) => {
+  const chat = useClaude(undefined, undefined, { replaceUrl: false });
+  const models = useVisibleClaudeModels();
+  return (
+    <EmbeddableChat
+      chat={chat}
+      provider="claude"
+      availableModels={models}
+      onProviderChange={onProviderChange}
+      className="flex-1 min-h-0"
+    />
+  );
+};
+
+const OpenCodeChat = ({ onProviderChange }: ChatInnerProps) => {
+  const chat = useOpenCode(undefined, undefined, { replaceUrl: false });
+  const models = useVisibleOpenCodeModels();
+  return (
+    <EmbeddableChat
+      chat={chat}
+      provider="opencode"
+      availableModels={models}
+      onProviderChange={onProviderChange}
+      className="flex-1 min-h-0"
+    />
+  );
+};