diff --git a/scripts/bundle.js b/scripts/bundle.js
index 24986c1..86a7366 100644
--- a/scripts/bundle.js
+++ b/scripts/bundle.js
@@ -28,7 +28,7 @@ const external = [
 
     await esbuild.build({
         ...configs.ts({
-            entryPoints: ['src/app.tsx'],
+            entryPoints: ['src/index.tsx'],
             outfile: path.join(outdir, 'index.js'),
         }),
         target: 'es2020',
diff --git a/scripts/dev.js b/scripts/dev.js
index 75c76d4..a2fc70a 100644
--- a/scripts/dev.js
+++ b/scripts/dev.js
@@ -21,7 +21,8 @@ const {generateHTML} = require('../src/index.html.js');
 
     const html = generateHTML({
         env: 'development',
-        csspath: path.join('/', 'index.css'),
+        jspath: 'pages.js',
+        csspath: 'pages.css',
     });
 
     await writeFile(path.join(outdir, 'index.html'), html);
@@ -29,7 +30,7 @@ const {generateHTML} = require('../src/index.html.js');
     let ctx;
 
     ctx = await esbuild.context(configs.ts({
-        entryPoints: ['src/index.tsx'],
+        entryPoints: ['src/pages.tsx'],
         outdir,
     }));
 
diff --git a/scripts/pages.js b/scripts/pages.js
index 011094b..145b7de 100644
--- a/scripts/pages.js
+++ b/scripts/pages.js
@@ -27,7 +27,7 @@ const {generateHTML} = require('../src/index.html.js');
     await writeFile(path.join(outdir, 'index.html'), html);
 
     await esbuild.build(configs.ts({
-        entryPoints: ['src/index.tsx'],
+        entryPoints: ['src/pages.tsx'],
         outfile: path.join(outdir, 'index.js'),
     }));
 })();
diff --git a/src/app.tsx b/src/app.tsx
deleted file mode 100644
index 276486c..0000000
--- a/src/app.tsx
+++ /dev/null
@@ -1,118 +0,0 @@
-import {useCallback, useState, useEffect}  from 'react';
-import {Container, Row, Col} from '@gravity-ui/uikit';
-
-import {CallOut} from './callout';
-import {InputArea} from './input-area';
-import {OutputArea} from './output-area';
-
-import {useTabs} from './useTabs';
-import {generateMD, generateHTML, generateTokens} from './generators';
-import persistRestore from './persistRestore';
-
-import './styles.css';
-
-(window as any).MonacoEnvironment = {
-  getWorker: (_, label: string) => {
-    if (label === 'json') {
-      return new Worker(
-        new URL('monaco-editor/esm/vs/language/json/json.worker?worker', 'monaco-worker'),
-      );
-    }
-    return new Worker(new URL('monaco-editor/esm/vs/editor/editor.worker?worker', 'monaco-worker'));
-  },
-};
-
-const App = () => {
-    return(<>
-      <Container>
-        <CallOut />
-        <Playground persistRestore={true} />
-      </Container>
-    </>)
-};
-
-export type PlaygroundProperties = {
-    content?: string;
-    persistRestore?: boolean;
-}
-
-function Playground(props: PlaygroundProperties) {
-  const persist = useCallback(persistRestore.persist, []);
-  const restore = useCallback(persistRestore.restore, []);
-  const content = props?.persistRestore ? restore() : props?.content
-  const [input, setInput] = useState(content ?? '');
-  const [generated, setGenerated] = useState(input);
-
-  const generate = useCallback((active: string) => {
-    if (active === 'markdown') {
-      setGenerated(generateMD(input));
-    } else if (active === 'html') {
-      setGenerated(generateHTML(input));
-    } else if (active === 'tokens') {
-      setGenerated(generateTokens(input));
-    } else if (active === 'preview') {
-      setGenerated(generateHTML(input));
-    } else {
-      setGenerated(input);
-    }
-  }, [input]);
-
-  const [
-    inputItems,
-    inputActive,
-    handleSetInputAreaTabActive
-  ] = useTabs({
-    items: [ { id: 'input', title: 'input' } ],
-    initial: 'input',
-  });
-
-  const [
-      outputItems,
-      outputActive,
-      handleSetOutputAreaTabActive
-  ] = useTabs({
-    items: [
-      { id: 'preview', title: 'html preview' },
-      { id: 'html', title: 'html' },
-      { id: 'markdown', title: 'markdown' },
-      { id: 'tokens', title: 'tokens' },
-    ],
-    initial: 'preview',
-    onSetActive: generate,
-  });
-
-  const handleInputChange = (input?: string) => {
-    setInput(input || '');
-  };
-
-  useEffect(() => {
-    generate(outputActive);
-
-    if (props?.persistRestore) {
-        persist(input);
-    }
-  }, [input]);
-
-  return (
-    <Row space={6} className="diplodoc-playground">
-      <Col s="12"/>
-      <InputArea
-        handleSelectTab={handleSetInputAreaTabActive}
-        handleInputChange={handleInputChange}
-        input={input}
-
-        tabActive={inputActive}
-        tabItems={inputItems}
-      />
-      <OutputArea
-        handleSelectTab={handleSetOutputAreaTabActive}
-        tabItems={outputItems}
-        tabActive={outputActive}
-        output={generated}
-      />
-    </Row>
-  );
-}
-
-export {App, Playground};
-export default {App, Playground};
diff --git a/src/callout.tsx b/src/callout.tsx
index 22ba547..994aac3 100644
--- a/src/callout.tsx
+++ b/src/callout.tsx
@@ -1,4 +1,4 @@
-import {Card, Text, Row, Col} from '@gravity-ui/uikit';
+import {Card, Row, Col} from '@gravity-ui/uikit';
 
 function CallOut() {
   return (<Row space={4}>
diff --git a/src/index.tsx b/src/index.tsx
index f8ec065..5f2aa7f 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,16 +1,118 @@
-import {createRoot} from 'react-dom/client';
-import {ThemeProvider} from '@gravity-ui/uikit';
+import {useCallback, useState, useEffect}  from 'react';
+import {Container, Row, Col} from '@gravity-ui/uikit';
 
-import {App} from './app';
+import {CallOut} from './callout';
+import {InputArea} from './input-area';
+import {OutputArea} from './output-area';
 
-import './index.css';
-import '@doc-tools/transform/dist/js/yfm.js';
+import {useTabs} from './useTabs';
+import {generateMD, generateHTML, generateTokens} from './generators';
+import persistRestore from './persistRestore';
 
-const container = document.getElementById('app');
-const root = createRoot(container as HTMLElement);
+import './styles.css';
 
-root.render(
-  <ThemeProvider theme="light"> 
-    <App />
-  </ThemeProvider>
-);
+(window as any).MonacoEnvironment = {
+    getWorker: (_, label: string) => {
+        if (label === 'json') {
+            return new Worker(
+                new URL('monaco-editor/esm/vs/language/json/json.worker?worker', 'monaco-worker'),
+            );
+        }
+        return new Worker(new URL('monaco-editor/esm/vs/editor/editor.worker?worker', 'monaco-worker'));
+    },
+};
+
+const App = () => {
+    return(<>
+        <Container>
+            <CallOut />
+            <Playground persistRestore={true} />
+        </Container>
+    </>)
+};
+
+export type PlaygroundProperties = {
+    content?: string;
+    persistRestore?: boolean;
+}
+
+function Playground(props: PlaygroundProperties) {
+    const persist = useCallback(persistRestore.persist, []);
+    const restore = useCallback(persistRestore.restore, []);
+    const content = props?.persistRestore ? restore() : props?.content
+    const [input, setInput] = useState(content ?? '');
+    const [generated, setGenerated] = useState(input);
+
+    const generate = useCallback((active: string) => {
+        if (active === 'markdown') {
+            setGenerated(generateMD(input));
+        } else if (active === 'html') {
+            setGenerated(generateHTML(input));
+        } else if (active === 'tokens') {
+            setGenerated(generateTokens(input));
+        } else if (active === 'preview') {
+            setGenerated(generateHTML(input));
+        } else {
+            setGenerated(input);
+        }
+    }, [input]);
+
+    const [
+        inputItems,
+        inputActive,
+        handleSetInputAreaTabActive
+    ] = useTabs({
+        items: [ { id: 'input', title: 'input' } ],
+        initial: 'input',
+    });
+
+    const [
+        outputItems,
+        outputActive,
+        handleSetOutputAreaTabActive
+    ] = useTabs({
+        items: [
+            { id: 'preview', title: 'html preview' },
+            { id: 'html', title: 'html' },
+            { id: 'markdown', title: 'markdown' },
+            { id: 'tokens', title: 'tokens' },
+        ],
+        initial: 'preview',
+        onSetActive: generate,
+    });
+
+    const handleInputChange = (input?: string) => {
+        setInput(input || '');
+    };
+
+    useEffect(() => {
+        generate(outputActive);
+
+        if (props?.persistRestore) {
+            persist(input);
+        }
+    }, [input]);
+
+    return (
+        <Row space={6} className="diplodoc-playground">
+            <Col s="12"/>
+            <InputArea
+                handleSelectTab={handleSetInputAreaTabActive}
+                handleInputChange={handleInputChange}
+                input={input}
+
+                tabActive={inputActive}
+                tabItems={inputItems}
+            />
+            <OutputArea
+                handleSelectTab={handleSetOutputAreaTabActive}
+                tabItems={outputItems}
+                tabActive={outputActive}
+                output={generated}
+            />
+        </Row>
+    );
+}
+
+export {App, Playground};
+export default {App, Playground};
diff --git a/src/pages.tsx b/src/pages.tsx
new file mode 100644
index 0000000..b02bfe1
--- /dev/null
+++ b/src/pages.tsx
@@ -0,0 +1,16 @@
+import {createRoot} from 'react-dom/client';
+import {ThemeProvider} from '@gravity-ui/uikit';
+
+import {App} from './index';
+
+import './index.css';
+import '@doc-tools/transform/dist/js/yfm.js';
+
+const container = document.getElementById('app');
+const root = createRoot(container as HTMLElement);
+
+root.render(
+    <ThemeProvider theme="light">
+            <App />
+    </ThemeProvider>
+);
diff --git a/src/persistRestore.ts b/src/persistRestore.ts
index fdc4825..ddd3694 100644
--- a/src/persistRestore.ts
+++ b/src/persistRestore.ts
@@ -1,11 +1,9 @@
-import {useCallback} from 'react';
-
 function persist(input: string) {
   try {
     const current = new URL(location.toString());
     current.searchParams.set('input', encodeURI(input) ?? '');
 
-    history.pushState(null, null, current);
+    history.pushState(null, '', current);
   } catch (err) {
     console.error(err);
   }