diff --git a/bun-env.d.ts b/bun-env.d.ts
index e847f1a4..0dfb9f2b 100644
--- a/bun-env.d.ts
+++ b/bun-env.d.ts
@@ -8,6 +8,10 @@ declare module "*.svg" {
   export = path;
 }
 
+// Plain stylesheets are imported for their side effect only; the bundler injects them. The more
+// specific "*.module.css" declaration below still wins for CSS modules.
+declare module "*.css";
+
 declare module "*.module.css" {
   /**
    * A record of class names to their corresponding CSS module classes
diff --git a/src/apps/officer-web/Screens/Dashboard/CodeEditor/index.tsx b/src/apps/officer-web/Screens/Dashboard/CodeEditor/index.tsx
new file mode 100644
index 00000000..7cb4c18e
--- /dev/null
+++ b/src/apps/officer-web/Screens/Dashboard/CodeEditor/index.tsx
@@ -0,0 +1,10 @@
+import { CodeEditorView } from 'officerdev';
+import { Widget } from 'widgets/Widget';
+
+export const CodeEditor = () => (
+  <div className="h-full w-full flex items-center justify-center">
+    <Widget title="Code Editor" className="h-[70vh] w-[70vw] overflow-hidden" resizable moveable>
+      <CodeEditorView className="h-full w-full" />
+    </Widget>
+  </div>
+);
diff --git a/src/apps/officer-web/Screens/Dashboard/Settings/ProfileSettings/Appearance.tsx b/src/apps/officer-web/Screens/Dashboard/Settings/ProfileSettings/Appearance.tsx
deleted file mode 100644
index f07a63ce..00000000
--- a/src/apps/officer-web/Screens/Dashboard/Settings/ProfileSettings/Appearance.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { useSettings } from 'state/useSettings';
-import { themes } from 'themes';
-
-export const Appearance = () => {
-  const { settings, saveSettings } = useSettings();
-
-  const handleColorThemeChange = (colorTheme: string) => {
-    saveSettings({ ...settings, appearance: { ...settings.appearance, colorTheme } });
-  };
-
-  const activeColorTheme = settings.appearance.colorTheme ?? 'DuckPond';
-
-  return (
-    <div className="grid grid-cols-2 sm:grid-cols-3 gap-2 pt-2">
-      {themes.map((t) => (
-        <button
-          key={t.id}
-          type="button"
-          onClick={() => handleColorThemeChange(t.id)}
-          className={`rounded-md px-3 py-2.5 text-sm font-medium cursor-pointer transition-colors ${
-            activeColorTheme === t.id
-              ? 'bg-duck-teal text-white ring-2 ring-duck-teal/50'
-              : 'bg-secondary text-secondary-foreground hover:bg-secondary/80'
-          }`}
-        >
-          {t.name}
-        </button>
-      ))}
-    </div>
-  );
-};
diff --git a/src/apps/officer-web/Screens/Dashboard/index.tsx b/src/apps/officer-web/Screens/Dashboard/index.tsx
index 11463e68..249b71ee 100644
--- a/src/apps/officer-web/Screens/Dashboard/index.tsx
+++ b/src/apps/officer-web/Screens/Dashboard/index.tsx
@@ -11,6 +11,7 @@ export * from './TaskLogs';
 export * from './Tasks';
 
 export * from './Files';
+export * from './CodeEditor';
 export * from './ChatHistory';
 export * from './Dashboards';
 export * from './Projects';
diff --git a/src/workspaces/officerdev/src/AppRegistry/useAppRegistry/useAppRegistry.ts b/src/workspaces/officerdev/src/AppRegistry/useAppRegistry/useAppRegistry.ts
index f3f9937c..070e7888 100644
--- a/src/workspaces/officerdev/src/AppRegistry/useAppRegistry/useAppRegistry.ts
+++ b/src/workspaces/officerdev/src/AppRegistry/useAppRegistry/useAppRegistry.ts
@@ -1,10 +1,10 @@
-import type { AppRegistry, AppRegistryEntry } from '../../components/Workspace';
+import type { AppRegistryMap, AppRegistryEntry } from '../../components/Workspace';
 import { useGlobal } from 'hooks/useGlobal';
 
 export type AppRegistryMeta = { key: string } & AppRegistryEntry;
 
 export function useAppRegistry(initialApps: AppRegistryMeta[] = []) {
-  const [registry, setRegistry] = useGlobal<AppRegistry>('APP_REGISTRY', () => metasToRegistry(initialApps));
+  const [registry, setRegistry] = useGlobal<AppRegistryMap>('APP_REGISTRY', () => metasToRegistry(initialApps));
 
   const registerApp = (key: string, entry: AppRegistryEntry) => {
     setRegistry((prev) => ({ ...prev, [key]: entry }));
@@ -15,5 +15,5 @@ export function useAppRegistry(initialApps: AppRegistryMeta[] = []) {
 
 export type UseAppRegistryType = ReturnType<typeof useAppRegistry>;
 
-const metasToRegistry = (metas: AppRegistryMeta[]): AppRegistry =>
+const metasToRegistry = (metas: AppRegistryMeta[]): AppRegistryMap =>
   Object.fromEntries(metas.map(({ key, ...entry }) => [key, entry]));
diff --git a/src/workspaces/officerdev/src/components/Workspace/AppPicker.tsx b/src/workspaces/officerdev/src/components/Workspace/AppPicker.tsx
index 96311382..8d350943 100644
--- a/src/workspaces/officerdev/src/components/Workspace/AppPicker.tsx
+++ b/src/workspaces/officerdev/src/components/Workspace/AppPicker.tsx
@@ -1,7 +1,7 @@
-import type { AppRegistry } from './types';
+import type { AppRegistryMap } from './types';
 
 type AppPickerProps = {
-  registry: AppRegistry;
+  registry: AppRegistryMap;
   onSelect: (appType: string) => void;
 };
 
diff --git a/src/workspaces/officerdev/src/components/Workspace/PanelSlot.tsx b/src/workspaces/officerdev/src/components/Workspace/PanelSlot.tsx
index 10aaa15f..7a30e014 100644
--- a/src/workspaces/officerdev/src/components/Workspace/PanelSlot.tsx
+++ b/src/workspaces/officerdev/src/components/Workspace/PanelSlot.tsx
@@ -2,7 +2,7 @@ import type { ComponentType } from 'react';
 import { useCallback } from 'react';
 import { createPortal } from 'react-dom';
 import { ArrowLeftRight, ChevronLeft, X, Minus } from 'lucide-react';
-import type { LayoutPanel, AppRegistry, PanelComponents, PanelComponentEntry } from './types';
+import type { LayoutPanel, AppRegistryMap, PanelComponents, PanelComponentEntry } from './types';
 import { useWorkspace } from './WorkspaceContext';
 import { Card } from '@/components/Card';
 import { AppPicker } from './AppPicker';
@@ -16,7 +16,7 @@ import {
 
 type PanelSlotProps = {
   panel: LayoutPanel;
-  registry: AppRegistry;
+  registry: AppRegistryMap;
   components?: PanelComponents;
   interactive: boolean;
   locked: boolean;
diff --git a/src/workspaces/officerdev/src/components/Workspace/WorkspaceLayout.tsx b/src/workspaces/officerdev/src/components/Workspace/WorkspaceLayout.tsx
index c48325aa..b128c3d7 100644
--- a/src/workspaces/officerdev/src/components/Workspace/WorkspaceLayout.tsx
+++ b/src/workspaces/officerdev/src/components/Workspace/WorkspaceLayout.tsx
@@ -1,5 +1,5 @@
 import { useCallback } from 'react';
-import type { LayoutNode, AppRegistry, PanelComponents } from './types';
+import type { LayoutNode, AppRegistryMap, PanelComponents } from './types';
 import { updateSizes } from './layout-utils';
 import { WorkspaceProvider } from './WorkspaceContext';
 import { WorkspaceRenderer } from './WorkspaceRenderer';
@@ -8,7 +8,7 @@ import { useAppRegistry } from '../../AppRegistry/useAppRegistry';
 type WorkspaceLayoutProps = {
   layout: LayoutNode;
   onLayoutChange: (layout: LayoutNode) => void;
-  registry?: AppRegistry;
+  registry?: AppRegistryMap;
   components?: PanelComponents;
   dashboardId?: string;
   cwd?: string;
diff --git a/src/workspaces/officerdev/src/components/Workspace/WorkspaceRenderer.tsx b/src/workspaces/officerdev/src/components/Workspace/WorkspaceRenderer.tsx
index 7979e369..c98a19de 100644
--- a/src/workspaces/officerdev/src/components/Workspace/WorkspaceRenderer.tsx
+++ b/src/workspaces/officerdev/src/components/Workspace/WorkspaceRenderer.tsx
@@ -1,12 +1,12 @@
 import { useCallback, useRef } from 'react';
 import { ResizablePanel, ResizablePanelGroup, ResizableHandle } from '@/components/ui/resizable';
-import type { LayoutNode, AppRegistry, PanelComponents } from './types';
+import type { LayoutNode, AppRegistryMap, PanelComponents } from './types';
 import { countPanels } from './layout-utils';
 import { PanelSlot } from './PanelSlot';
 
 type WorkspaceRendererProps = {
   layout: LayoutNode;
-  registry: AppRegistry;
+  registry: AppRegistryMap;
   components?: PanelComponents;
   interactive?: boolean;
   locked?: boolean;
@@ -58,7 +58,7 @@ export const WorkspaceRenderer = ({
 
 type LayoutNodeRendererProps = {
   node: LayoutNode;
-  registry: AppRegistry;
+  registry: AppRegistryMap;
   components?: PanelComponents;
   interactive: boolean;
   locked: boolean;
@@ -72,7 +72,7 @@ type LayoutNodeRendererProps = {
   onResized: (groupId: string, sizes: number[]) => void;
 };
 
-const getFixedHeight = (node: LayoutNode, registry: AppRegistry): number | undefined => {
+const getFixedHeight = (node: LayoutNode, registry: AppRegistryMap): number | undefined => {
   if (node.type === 'panel' && node.appType) return registry[node.appType]?.fixedHeight;
   return undefined;
 };
diff --git a/src/workspaces/officerdev/src/components/Workspace/index.ts b/src/workspaces/officerdev/src/components/Workspace/index.ts
index b61a5d4a..61875f83 100644
--- a/src/workspaces/officerdev/src/components/Workspace/index.ts
+++ b/src/workspaces/officerdev/src/components/Workspace/index.ts
@@ -1,4 +1,4 @@
-export type { LayoutNode, LayoutGroup, LayoutPanel, DashboardDefinition, DashboardState, ProjectType, ProjectDefinition, AppRegistry, AppRegistryEntry, PanelComponents, PanelComponentEntry, EphemeralPanels, HomeRoot } from './types';
+export type { LayoutNode, LayoutGroup, LayoutPanel, DashboardDefinition, DashboardState, ProjectType, ProjectDefinition, AppRegistryMap, AppRegistryEntry, PanelComponents, PanelComponentEntry, EphemeralPanels, HomeRoot } from './types';
 export type { DropPosition } from './layout-utils';
 export { createDefaultLayout, splitPanel, removePanel, setApp, updateSizes, swapPanels, movePanel, pruneEmptyPanels, countPanels, hasAnyApp } from './layout-utils';
 export type { DefaultFileSort } from './WorkspaceContext';
diff --git a/src/workspaces/officerdev/src/components/Workspace/types.ts b/src/workspaces/officerdev/src/components/Workspace/types.ts
index 73a14dcb..15bda5be 100644
--- a/src/workspaces/officerdev/src/components/Workspace/types.ts
+++ b/src/workspaces/officerdev/src/components/Workspace/types.ts
@@ -60,7 +60,7 @@ export type AppRegistryEntry = {
   availableOnPanel?: boolean;
 };
 
-export type AppRegistry = Record<string, AppRegistryEntry>;
+export type AppRegistryMap = Record<string, AppRegistryEntry>;
 
 export type PanelComponentEntry = {
   component: ComponentType;
diff --git a/src/workspaces/officerdev/src/index.ts b/src/workspaces/officerdev/src/index.ts
index 66a1a493..431b7860 100644
--- a/src/workspaces/officerdev/src/index.ts
+++ b/src/workspaces/officerdev/src/index.ts
@@ -104,7 +104,7 @@ export type {
   DashboardState,
   ProjectType,
   ProjectDefinition,
-  AppRegistry,
+  AppRegistryMap,
   AppRegistryEntry,
   PanelComponents,
   PanelComponentEntry,
diff --git a/src/workspaces/officerdev/src/useAppRegistry.ts b/src/workspaces/officerdev/src/useAppRegistry.ts
index 2fffbea2..cb46d942 100644
--- a/src/workspaces/officerdev/src/useAppRegistry.ts
+++ b/src/workspaces/officerdev/src/useAppRegistry.ts
@@ -1,5 +1,5 @@
-import type { AppRegistry } from './components/Workspace';
+import type { AppRegistryMap } from './components/Workspace';
 
-export function useAppRegistry(): AppRegistry {
+export function useAppRegistry(): AppRegistryMap {
   return {};
 }
diff --git a/src/workspaces/state/src/useSettings.ts b/src/workspaces/state/src/useSettings.ts
index 53049495..b78d1dad 100644
--- a/src/workspaces/state/src/useSettings.ts
+++ b/src/workspaces/state/src/useSettings.ts
@@ -68,7 +68,6 @@ export type UserSettings = {
   };
   appearance: {
     colorMode: 'light' | 'dark';
-    colorTheme: string;
   };
   languages: {
     spoken: string[];
@@ -105,7 +104,6 @@ export const DEFAULT_SETTINGS: UserSettings = {
   },
   appearance: {
     colorMode: 'light',
-    colorTheme: 'DuckPond',
   },
   languages: {
     spoken: ['en'],