diff --git a/services/web/frontend/js/features/history/components/change-list/change-list.tsx b/services/web/frontend/js/features/history/components/change-list/change-list.tsx
new file mode 100644
index 0000000000..1e1b0faf56
--- /dev/null
+++ b/services/web/frontend/js/features/history/components/change-list/change-list.tsx
@@ -0,0 +1,13 @@
+import ToggleSwitch from './toggle-switch'
+import Main from './main'
+
+function ChangeList() {
+  return (
+    <aside className="change-list">
+      <ToggleSwitch />
+      <Main />
+    </aside>
+  )
+}
+
+export default ChangeList
diff --git a/services/web/frontend/js/features/history/components/change-list/main.tsx b/services/web/frontend/js/features/history/components/change-list/main.tsx
new file mode 100644
index 0000000000..435e44bea6
--- /dev/null
+++ b/services/web/frontend/js/features/history/components/change-list/main.tsx
@@ -0,0 +1,5 @@
+function Main() {
+  return <div>Change List</div>
+}
+
+export default Main
diff --git a/services/web/frontend/js/features/history/components/change-list/toggle-switch.tsx b/services/web/frontend/js/features/history/components/change-list/toggle-switch.tsx
new file mode 100644
index 0000000000..93b447a7b2
--- /dev/null
+++ b/services/web/frontend/js/features/history/components/change-list/toggle-switch.tsx
@@ -0,0 +1,5 @@
+function ToggleSwitch() {
+  return <div>Toggle Switch</div>
+}
+
+export default ToggleSwitch
diff --git a/services/web/frontend/js/features/history/components/editor/editor.tsx b/services/web/frontend/js/features/history/components/editor/editor.tsx
new file mode 100644
index 0000000000..6e8e9dcb5f
--- /dev/null
+++ b/services/web/frontend/js/features/history/components/editor/editor.tsx
@@ -0,0 +1,13 @@
+import Toolbar from './toolbar'
+import Main from './main'
+
+function Editor() {
+  return (
+    <div className="point-in-time-panel">
+      <Toolbar />
+      <Main />
+    </div>
+  )
+}
+
+export default Editor
diff --git a/services/web/frontend/js/features/history/components/editor/main.tsx b/services/web/frontend/js/features/history/components/editor/main.tsx
new file mode 100644
index 0000000000..78a01e80ed
--- /dev/null
+++ b/services/web/frontend/js/features/history/components/editor/main.tsx
@@ -0,0 +1,5 @@
+function Main() {
+  return <div>Main (editor)</div>
+}
+
+export default Main
diff --git a/services/web/frontend/js/features/history/components/editor/toolbar.tsx b/services/web/frontend/js/features/history/components/editor/toolbar.tsx
new file mode 100644
index 0000000000..9cf7fb1b87
--- /dev/null
+++ b/services/web/frontend/js/features/history/components/editor/toolbar.tsx
@@ -0,0 +1,5 @@
+function Toolbar() {
+  return <div>Toolbar</div>
+}
+
+export default Toolbar
diff --git a/services/web/frontend/js/features/history/components/history-root.tsx b/services/web/frontend/js/features/history/components/history-root.tsx
index 5932eaf58b..90e361d931 100644
--- a/services/web/frontend/js/features/history/components/history-root.tsx
+++ b/services/web/frontend/js/features/history/components/history-root.tsx
@@ -1,15 +1,20 @@
 import { createPortal } from 'react-dom'
 import HistoryFileTree from './history-file-tree'
+import ChangeList from './change-list/change-list'
+import Editor from './editor/editor'
+
+const fileTreeContainer = document.getElementById('history-file-tree')
 
 export default function HistoryRoot() {
-  const fileTreeContainer = document.getElementById('history-file-tree')
-
   return (
     <>
       {fileTreeContainer
         ? createPortal(<HistoryFileTree />, fileTreeContainer)
         : null}
-      History
+      <div className="history-react">
+        <ChangeList />
+        <Editor />
+      </div>
     </>
   )
 }
diff --git a/services/web/frontend/stylesheets/app/editor.less b/services/web/frontend/stylesheets/app/editor.less
index 232f3b4665..f4f91cd7d5 100644
--- a/services/web/frontend/stylesheets/app/editor.less
+++ b/services/web/frontend/stylesheets/app/editor.less
@@ -1,5 +1,6 @@
 @import './editor/file-tree.less';
 @import './editor/history.less';
+@import './editor/history-react.less';
 @import './editor/toolbar.less';
 @import './editor/left-menu.less';
 @import './editor/pdf.less';
diff --git a/services/web/frontend/stylesheets/app/editor/history-react.less b/services/web/frontend/stylesheets/app/editor/history-react.less
new file mode 100644
index 0000000000..e158198d5f
--- /dev/null
+++ b/services/web/frontend/stylesheets/app/editor/history-react.less
@@ -0,0 +1,22 @@
+@changesListWidth: 320px;
+
+.history-react {
+  .point-in-time-panel {
+    .full-size;
+    margin-right: @changesListWidth;
+  }
+
+  .change-list {
+    border-left: 1px solid @editor-border-color;
+    height: 100%;
+    width: @changesListWidth;
+    position: absolute;
+    right: 0;
+  }
+
+  .editor-dark {
+    .change-list {
+      border-color: @editor-dark-toolbar-border-color;
+    }
+  }
+}