diff --git a/src/pages/stock/screener/components/canvas/CanvasLayout.jsx b/src/pages/stock/screener/components/canvas/CanvasLayout.jsx
new file mode 100644
index 0000000..f7f02d4
--- /dev/null
+++ b/src/pages/stock/screener/components/canvas/CanvasLayout.jsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import ScreenerCanvas from './ScreenerCanvas';
+import ResultTable     from '../ResultTable';
+import TelegramPreview from '../TelegramPreview';
+import RunHistoryList  from '../RunHistoryList';
+
+export default function CanvasLayout({
+  meta, settings, setLocal, save, dirty,
+  result, running, previewHistory, runPreview, runSave, selectPreview,
+  runs, runs_loading, selectRun, selectedRun,
+  compareId, setCompareId,
+}) {
+  const compareItem = previewHistory.find((p) => p.id === compareId);
+  const compareResult = compareItem?.result ?? null;
+  const activeResult = selectedRun || result;
+
+  return (
+    <div className="screener-canvas-layout">
+      <section className="screener-canvas-area">
+        <ScreenerCanvas
+          meta={meta}
+          settings={settings}
+          setLocal={setLocal}
+          result={activeResult}
+          running={running}
+          dirty={dirty}
+          onRunPreview={() => runPreview(settings)}
+          onRunSave={() => runSave(settings)}
+          onPersistSettings={save}
+        />
+      </section>
+      <section className="screener-canvas-results">
+        <div className="screener-canvas-results-main">
+          <ResultTable
+            result={activeResult}
+            compareWith={compareResult}
+            compareLabel={compareItem ? new Date(compareItem.timestamp).toLocaleTimeString() : null}
+          />
+          <TelegramPreview payload={activeResult?.telegram_payload} />
+        </div>
+        <aside className="screener-canvas-results-side">
+          <RunHistoryList
+            runs={runs}
+            loading={runs_loading}
+            onSelect={selectRun}
+            selectedId={selectedRun?.meta?.id}
+            previewHistory={previewHistory}
+            onSelectPreview={selectPreview}
+            onSetCompare={setCompareId}
+            compareId={compareId}
+          />
+        </aside>
+      </section>
+    </div>
+  );
+}