diff --git a/src/pages/deployment/chronicle/index.tsx b/src/pages/deployment/chronicle/index.tsx
new file mode 100644
index 00000000..cbb7bf2e
--- /dev/null
+++ b/src/pages/deployment/chronicle/index.tsx
@@ -0,0 +1,71 @@
+import * as React from 'react';
+import { styled } from '@mui/system';
+import Box from '@mui/material/Box';
+import Tab from '@mui/material/Tab';
+import Tabs from '@mui/material/Tabs';
+
+import Explorer from './Explorer';
+import Playground from './Playground';
+
+interface TabPanelProps {
+ children?: React.ReactNode;
+ index: number;
+ value: number;
+}
+
+const VerticalFillContainer = styled('div')({
+ display: 'flex',
+ flexDirection: 'column',
+ flexGrow: 1,
+ width: '100%',
+})
+
+function CustomTabPanel(props: TabPanelProps) {
+ const { children, value, index, ...other } = props;
+
+ return (
+
+ {value === index && children}
+
+ );
+}
+
+function a11yProps(index: number) {
+ return {
+ id: `simple-tab-${index}`,
+ 'aria-controls': `simple-tabpanel-${index}`,
+ };
+}
+
+export default function BasicTabs() {
+ const [value, setValue] = React.useState(0);
+
+ const handleChange = (event: React.SyntheticEvent, newValue: number) => {
+ setValue(newValue);
+ };
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}