diff --git a/src/workspaces/officerdev/src/apps/SystemMonitor/BtopView.tsx b/src/workspaces/officerdev/src/apps/SystemMonitor/BtopView.tsx
index 416e5727..8f1f5094 100644
--- a/src/workspaces/officerdev/src/apps/SystemMonitor/BtopView.tsx
+++ b/src/workspaces/officerdev/src/apps/SystemMonitor/BtopView.tsx
@@ -86,7 +86,7 @@ export const BtopView = () => {
 
         {stats && (
           <>
-            <div className="grid grid-cols-1 gap-4 lg:grid-cols-3">
+            <div className="grid grid-cols-1 gap-4 @min-[600px]:grid-cols-2 @min-[960px]:grid-cols-3">
               <Card title="CPU" icon={Cpu}>
                 <div className="flex items-end justify-between">
                   <span className="text-3xl font-semibold text-foreground">{stats.cpu.usagePct.toFixed(0)}%</span>
diff --git a/src/workspaces/officerdev/src/components/Workspace/PanelSlot.tsx b/src/workspaces/officerdev/src/components/Workspace/PanelSlot.tsx
index 7a30e014..a3001b38 100644
--- a/src/workspaces/officerdev/src/components/Workspace/PanelSlot.tsx
+++ b/src/workspaces/officerdev/src/components/Workspace/PanelSlot.tsx
@@ -280,7 +280,7 @@ export const PanelSlot = ({ panel, registry, components, interactive, locked, no
   if (entry?.transparent) {
     return contextMenu(
       <div data-panel-id={panel.id} className="group/panel relative h-full w-full p-1">
-        <div className="relative h-full w-full overflow-hidden">
+        <div className="@container relative h-full w-full overflow-hidden">
           <AppComponent panelId={panel.id} />
         </div>
         {overlays}
@@ -344,7 +344,7 @@ export const PanelSlot = ({ panel, registry, components, interactive, locked, no
   ) : headerContent;
 
   const body = (
-    <div className="flex-1 min-h-0">
+    <div className="@container flex-1 min-h-0">
       <Card className="h-full w-full overflow-hidden p-0 rounded-none border-0 shadow-none">
         <AppComponent panelId={panel.id} />
       </Card>