diff --git a/components/Navbar/index.jsx b/components/Navbar/index.jsx
index 93b20c1..8aa570e 100644
--- a/components/Navbar/index.jsx
+++ b/components/Navbar/index.jsx
@@ -30,9 +30,9 @@ const Navigation = () => {
         <Link href='/'>
           <a className={style.title} translate='no'>
             <figure className={style.logo}>
-              <Image src='/mdpreview-logo.png' alt='Markdown Preview logo' title='Markdow Preview' layout='fill' />
+              <Image src='/rundevs.png' alt='Rundev logo' title='Rundev' layout='fill' />
             </figure>
-            <h1>Markdown Preview</h1>
+            <h1>Rundev</h1>
           </a>
         </Link>
         <nav className={style.navbar}>
diff --git a/components/Editor/Editor.jsx b/components/Playground/Editor/Editor.jsx
similarity index 71%
rename from components/Editor/Editor.jsx
rename to components/Playground/Editor/Editor.jsx
index 6dcc760..7ef7bd8 100644
--- a/components/Editor/Editor.jsx
+++ b/components/Playground/Editor/Editor.jsx
@@ -1,6 +1,6 @@
 import React, { useCallback, useRef } from 'react'
 import EditorCode from '@monaco-editor/react'
-import useThemes from '../../hooks/useThemes'
+import useThemes from '../../../hooks/useThemes'
 // import onedark from './onedark.json'
 import style from './editor.module.css'
 
@@ -15,13 +15,22 @@ const Editor = ({ initialDoc, onChange }) => {
 
   const handleEditorDidMount = (editor, monaco) => {
     editorRef.current = editor
+    console.log({ monaco, editor })
     // monaco.editor.defineTheme("onedark", onedark)
     // monaco.editor.setTheme("onedark")
   }
 
-  // const handleSave = () => {
-  //   // const content = editorRef.current.getValue()
-  // }
+  const handleSave = () => {
+    // const content = editorRef.current.getValue()
+  }
+
+  const options = {
+    selectOnLineNumbers: true,
+    wordWrap: 'on',
+    scrollBeyondLastLine: false,
+    renderLineHighlight: 'gutter',
+    renderIndentGuides: true,
+  }
 
   return (
     <EditorCode
@@ -31,6 +40,7 @@ const Editor = ({ initialDoc, onChange }) => {
       onChange={handleChange}
       className={style.editor}
       onMount={handleEditorDidMount}
+      options={options}
     />
   )
 }
diff --git a/components/Editor/editor.module.css b/components/Playground/Editor/editor.module.css
similarity index 100%
rename from components/Editor/editor.module.css
rename to components/Playground/Editor/editor.module.css
diff --git a/components/Editor/onedark.json b/components/Playground/Editor/onedark.json
similarity index 100%
rename from components/Editor/onedark.json
rename to components/Playground/Editor/onedark.json
diff --git a/components/Navbar/NavEditor/NavEditor.jsx b/components/Playground/NavEditor/NavEditor.jsx
similarity index 89%
rename from components/Navbar/NavEditor/NavEditor.jsx
rename to components/Playground/NavEditor/NavEditor.jsx
index 663cd28..d55ff5b 100644
--- a/components/Navbar/NavEditor/NavEditor.jsx
+++ b/components/Playground/NavEditor/NavEditor.jsx
@@ -1,6 +1,7 @@
 import React, { Fragment, useState } from 'react'
 import { useRouter } from 'next/router'
 import Image from 'next/image'
+
 import Portal from '../../Portal'
 import { Files, Setting, User } from '../../../assets/icons'
 import style from './naveditor.module.css'
@@ -12,7 +13,7 @@ const themesContent = [
   { value: 'github-dark-dimmed', label: 'GitHub Dark' }
 ]
 
-const NavEditor = () => {
+const NavEditor = ({ handleExplorer }) => {
   const [activeSetting, setActiveSetting] = useState(false)
   const router = useRouter()
   const handleMenu = () => setActiveSetting(!activeSetting)
@@ -25,10 +26,10 @@ const NavEditor = () => {
             {/* <Link href='/'> */}
             <button onClick={() => router.push('/')} className={style.tooltip} data-tooltip='Home'>
               <div />
-              <Image src='/mdpreview.webp' alt='markdown preview logo' width={25} height={25} priority={true} />
+              <Image src='/rundevs.png' alt='Rundev logo' width={25} height={25} priority={true} />
             </button>
             {/* </Link> */}
-            <button className={style.tooltip} data-tooltip='Explorer'>
+            <button onClick={handleExplorer} className={style.tooltip} data-tooltip='Explorer'>
               <Files />
             </button>
           </div>
diff --git a/components/Navbar/NavEditor/naveditor.module.css b/components/Playground/NavEditor/naveditor.module.css
similarity index 96%
rename from components/Navbar/NavEditor/naveditor.module.css
rename to components/Playground/NavEditor/naveditor.module.css
index f9c4c81..80a4c02 100644
--- a/components/Navbar/NavEditor/naveditor.module.css
+++ b/components/Playground/NavEditor/naveditor.module.css
@@ -23,7 +23,7 @@
   border-radius: 50%;
   width: 50%;
   height: 50%;
-  background-image: -webkit-linear-gradient(120deg, var(--md-cursor), var(--md-sage));
+  background-image: -webkit-linear-gradient(120deg, var(--md-cursor), var(--md-coral) 120%);
   filter: blur(5px);
   opacity: 0;
   transition: opacity .1s ease-out;
@@ -78,6 +78,7 @@
   transition: opacity .0s ease-out;
   z-index: 1;
   opacity: 0;
+  display: none;
   border-collapse: collapse;
   display: none;
 }
@@ -110,7 +111,6 @@
   height: 100%;
   width: 100%;
   z-index: 10;
-  /* background-color: rgba(0, 0, 0, 0.603); */
 }
 
 .menu {
@@ -196,6 +196,7 @@
     width:  48px;
     position: relative;
     border-right: 1px solid var(--md-divider-light-1);
+    border-bottom: 0;
   }
 
   .navEditor {
@@ -212,12 +213,9 @@
     width: 100%;
   }
 
-  .tooltip::before, .tooltip::after {
-    display: block;
-  }
-
   .tooltip:hover::before, .tooltip:hover::after {
     opacity: 1;
+    display: flex;
     transition-delay: 0.3s;
   }
 
diff --git a/components/Preview/Preview.jsx b/components/Playground/Preview/Preview.jsx
similarity index 96%
rename from components/Preview/Preview.jsx
rename to components/Playground/Preview/Preview.jsx
index 07c4e9e..6d55d2d 100644
--- a/components/Preview/Preview.jsx
+++ b/components/Playground/Preview/Preview.jsx
@@ -2,7 +2,7 @@ import React, { useEffect, useRef } from 'react'
 import highlightjs from 'highlight.js'
 import style from './preview.module.css'
 import { marked } from 'marked'
-import useThemes from '../../hooks/useThemes'
+import useThemes from '../../../hooks/useThemes'
 // import 'highlight.js/styles/github-dark.css'
 // import 'highlight.js/styles/atom-one-dark.css'
 // import 'highlight.js/styles/base16/onedark.css'
diff --git a/components/Preview/preview.module.css b/components/Playground/Preview/preview.module.css
similarity index 84%
rename from components/Preview/preview.module.css
rename to components/Playground/Preview/preview.module.css
index 3a771df..ecac76e 100644
--- a/components/Preview/preview.module.css
+++ b/components/Playground/Preview/preview.module.css
@@ -32,10 +32,12 @@
   color: var(--md-text-1);
   margin-top: 1.5rem;
   line-height: 1.25;
+  font-weight: 600;
 }
 
 .markdown h1, .markdown h2 {
   border-bottom: 1px solid var(--md-divider-light-1);
+  margin-bottom: 1rem;
 }
 
 .markdown h1 {
@@ -70,6 +72,25 @@
   color: var(--md-text-2);
 }
 
+/* Paragraph */
+
+.markdown p {
+  margin-top: 0;
+  margin-bottom: 1rem;
+  color: var(--md-text-1);
+}
+
+/* Links */
+
+.markdown a {
+  color: var(--md-text-3);
+  text-decoration: none;
+}
+
+.markdown a:hover {
+  text-decoration: underline;
+}
+
 /* Lists */
 
 .markdown ul, .markdown ol {
diff --git a/components/Playground/explorer/Explorer.jsx b/components/Playground/explorer/Explorer.jsx
new file mode 100644
index 0000000..5f639f7
--- /dev/null
+++ b/components/Playground/explorer/Explorer.jsx
@@ -0,0 +1,31 @@
+import React from 'react'
+import style from './explorer.module.css'
+const languages = { js: '.js', md: '.md' }
+const Explorer = () => {
+  const { js, md } = languages
+  return (
+    <section className={style.explorer}>
+      <header className={style.header}>
+        <h2>Explorer</h2>
+      </header>
+      <details open={true} className={style.filesmd}>
+        <summary>Markdown</summary>
+        <div className={style.file} title='markdown/readme.md' aria-selected={true} role='treeitem'>
+          <span className={style.file}>readme{md}</span>
+        </div>
+        <div className={style.file} aria-selected={true}>
+          <span className={style.file}>notes{md}</span>
+        </div>
+      </details>
+      <hr />
+      <details open={true} className={style.filesjs}>
+        <summary>JavaScript</summary>
+        <div className={style.file} aria-selected={true}>
+          <span className={style.file}>notes{js}</span>
+        </div>
+      </details>
+    </section>
+  )
+}
+
+export default Explorer
\ No newline at end of file
diff --git a/components/Playground/explorer/explorer.module.css b/components/Playground/explorer/explorer.module.css
new file mode 100644
index 0000000..f6a0a27
--- /dev/null
+++ b/components/Playground/explorer/explorer.module.css
@@ -0,0 +1,101 @@
+.explorer {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  justify-content: flex-start;
+  border-right: 1px solid var(--md-divider-light-1);
+}
+
+.explorer hr {
+  margin: 0;
+  width: 100%;
+  height: 1px;
+  border: 0;
+  background-color: var(--md-divider-light-1);
+}
+
+.header {
+  height: 48px;
+  position: relative;
+  flex-shrink: 0;
+  display: flex;
+  flex-flow: row;
+  align-items: center;
+}
+
+.header h2 {
+  font-size: 0.7rem;
+  color: var(--md-text-2);
+  font-weight: 400;
+  text-transform: uppercase;
+  padding-left: 1rem;
+}
+
+.explorer details {
+  display: flex;
+  flex-direction: column;
+  user-select: none;
+  position: relative;
+}
+
+.explorer details summary {
+  padding: 0rem 0.5rem;
+  margin: 0;
+  line-height: 20px;
+  cursor: pointer;
+  text-transform: uppercase;
+  font-size: 0.7rem;
+  font-weight: 500;
+  height: 22px;
+  width: 100%;
+  position: relative;
+  border: 1px solid transparent;
+}
+
+.explorer details[open] {
+  height: 100%;
+  overflow-y: auto;
+}
+
+.explorer details[open] summary {
+  box-shadow: 0 0 1rem rgba(73, 73, 73, 0.1);
+}
+
+.explorer details summary:focus, .file:focus {
+  border: 1px solid var(--md-cursor);
+}
+
+.filesmd div:last-child, .filesjs div:last-child {
+  margin-bottom: 1rem;
+}
+
+.filesmd div, .filesjs div {
+  padding-left: 1.2rem;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  cursor: pointer;
+}
+
+.file:hover, .file:hover {
+  background-color: var(--md-bg-3);
+}
+
+.filesmd div::before, .filesjs div::before {
+  background-image: unset;
+  font-family: 'seti';
+  font-size: 110%;
+  margin-right: 0.375rem;
+}
+
+.filesmd div::before {
+  color: #519aba;
+  content: '\E04D';
+}
+
+.filesjs div::before {
+  color: #cbcb41;
+  content: '\E051';
+
+}
diff --git a/components/Playground/footer/Footer.jsx b/components/Playground/footer/Footer.jsx
new file mode 100644
index 0000000..faa2a87
--- /dev/null
+++ b/components/Playground/footer/Footer.jsx
@@ -0,0 +1,43 @@
+import React from 'react'
+import style from './footer.module.css'
+
+const Footer = () => {
+  return (
+    <footer className={style.footer}>
+      <div>
+        <span
+          data-tooltip='Rundev Application © 2022'
+          title='Rundev Application'
+          className={style.tooltip}
+        >
+          Rundev
+        </span>
+      </div>
+      <div>
+        <span
+          data-tooltip='Indentation'
+          title='Indentation'
+          className={style.tooltip}
+        >
+          Spaces: 2
+        </span>
+        <span
+          data-tooltip='Encoding'
+          title='Encoding'
+          className={style.tooltip}
+        >
+          UTF-8
+        </span>
+        <span
+          data-tooltip='Line Sequence'
+          title='Line Sequence'
+          className={style.tooltip}
+        >
+          LF
+        </span>
+      </div>
+    </footer>
+  )
+}
+
+export default Footer
\ No newline at end of file
diff --git a/components/Playground/footer/footer.module.css b/components/Playground/footer/footer.module.css
new file mode 100644
index 0000000..05abd15
--- /dev/null
+++ b/components/Playground/footer/footer.module.css
@@ -0,0 +1,30 @@
+.footer {
+  height: 22px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  background-color: var(--md-bg-preview);
+  border-top: 1px solid var(--md-divider-light-1);
+  font-size: 0.87rem;
+  color: var(--md-text-2);
+}
+
+.footer div {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+}
+
+.footer span {
+  padding: 0 0.68rem;
+  height: 100%;
+  white-space: nowrap;
+}
+
+.footer span:hover {
+  background-color: var(--md-bg-3);
+  cursor: default;
+}
\ No newline at end of file
diff --git a/components/layout/Layout.jsx b/components/layout/Layout.jsx
index 36fb8ad..511f0e8 100644
--- a/components/layout/Layout.jsx
+++ b/components/layout/Layout.jsx
@@ -14,7 +14,7 @@ const Layout = ({ children }) => {
         <p className={style.logo}>
           <Link href='/'>
             <a>
-              <Image src='/mdpreview.webp' alt='Markdown Preview' width={150} height={150} />
+              <Image src='/rundevs.png' alt='Rundevs' width={150} height={150} />
             </a>
           </Link>
         </p>
@@ -23,15 +23,15 @@ const Layout = ({ children }) => {
         </p>
         <div className={style.footerContent}>
           <p className={style.socialFooter}>
-            <Link href='https://github.com/Simply-Markdown/mdpreview-web'>
+            <Link href='https://github.com/rundevs/rundev'>
               <a target='_blank'>GitHub</a>
             </Link>
             <Link href='/'>
               <a target='_blank'>Twitter</a>
             </Link>
-            <img src='https://badgen.net/github/release/Simply-Markdown/mdpreview-web' alt='latest release markdown preview' title='Latest release' />
+            <img src='https://badgen.net/github/release/rundevs/rundev' alt='latest release Rundev' title='Latest release' />
           </p>
-          <p>Copyright © 2022 <Link href='/'><a>Markdown Preview</a></Link></p>
+          <p>Copyright © 2022 <Link href='/'><a>Rundev</a></Link></p>
           <p className={style.dev}>Developer <Link href='https://sauterdev.vercel.app/'><a>Luis Gabriel Janco</a></Link></p>
         </div>
       </footer>
diff --git a/pages/_document.js b/pages/_document.js
index 9771bac..cd87e40 100644
--- a/pages/_document.js
+++ b/pages/_document.js
@@ -10,10 +10,10 @@ class MyDocument extends Document {
       <Html lang="en-US">
         <Head>
           <meta charSet="utf-8" />
-          <meta name='description' content='Markdown Preview is the best and easier editor on the web' />
+          <meta name='description' content='Rundev is the best and easier editor on the web' />
           <meta property="og:type" content="website" />
-          <meta property="og:title" content="Markdown Preview" />
-          <meta property="og:description" content="Markdown Preview is the best and easier editor on the web" />
+          <meta property="og:title" content="Rundev" />
+          <meta property="og:description" content="Rundev is the best and easier editor on the web" />
           <meta name="twitter:card" content="summary_large_image" />
           <link rel="icon" href="/favicon.ico" />
         </Head>
diff --git a/pages/app.js b/pages/app.js
index 0481c18..8dc0ac9 100644
--- a/pages/app.js
+++ b/pages/app.js
@@ -1,22 +1,36 @@
 import React, { Fragment, useCallback, useEffect, useState } from 'react'
-import Split from 'react-split-grid'
 import Head from 'next/head'
-import Editor from '../components/Editor/Editor'
-import NavEditor from '../components/Navbar/NavEditor/NavEditor'
-import Preview from '../components/Preview/Preview'
-import style from '../styles/app.module.css'
+import Split from 'react-split-grid'
+
+import Editor from '../components/Playground/Editor/Editor'
+import Footer from '../components/Playground/footer/Footer'
+import Preview from '../components/Playground/Preview/Preview'
+import NavEditor from '../components/Playground/NavEditor/NavEditor'
+import Explorer from '../components/Playground/explorer/Explorer'
 import useMatchQuery from '../hooks/useMatchQuery'
 import useClient from '../hooks/useClient'
+import style from '../styles/app.module.css'
 
 const App = () => {
   const [doc, setDoc] = useState(INITIAL_STATE)
   const { matched } = useMatchQuery()
   const { mounted } = useClient()
+  const [activeExplorer, setActiveExplorer] = useState(false)
 
   const handleChange = useCallback((/** @type string */ newDoc) => {
     setDoc(newDoc)
   }, [])
 
+  const handleExplorer = () => setActiveExplorer(!activeExplorer)
+
+  useEffect(() => {
+    if (activeExplorer) {
+      document.getElementById('grid-layout').style.gridTemplateColumns = '170px 7px 1fr'
+    } else {
+      document.getElementById('grid-layout').style.gridTemplateColumns = '0px 0px 1fr'
+    }
+  }, [activeExplorer])
+
   let subscribe = true
   useEffect(() => {
     if (subscribe) {
@@ -31,67 +45,45 @@ const App = () => {
   return (
     <Fragment>
       <Head>
-        <title>Markdown with preview | Edit, create, and improve your ideas ✨</title>
+        <title>Rundev | Markdown preview | Edit, create, and improve your ideas ✨</title>
       </Head>
       <main className={style.app}>
         <div className={style.appLayout}>
-          <NavEditor />
-          <Split rowMinSize={100} columnMinSize={200} render={({ getGridProps, getGutterProps }) => (
-            <div
-              id='grid'
-              className={matched ? style.gridColumn : style.gridRow}
-              {...getGridProps()}
-            >
-              <div style={{ height: '100%', position: 'relative', overflow: 'hidden' }}>
-                {mounted && <Editor initialDoc={doc} onChange={handleChange} />}
-              </div>
-              <div
-                className={matched ? style.gutterColumn : style.gutterRow}
-                {...getGutterProps(matched ? 'column' : 'row', 1)}
-              />
-              <div style={{ width: '100%', height: '100%', overflow: 'auto', position: 'relative', overflow: 'hidden' }}>
-                <Preview doc={doc} />
+          <NavEditor handleExplorer={handleExplorer} />
+          <Split
+            columnMinSize={170}
+            columnMaxSize={'90%'}
+            cursor="col-resize"
+            render={({ getGridProps: getGridLayout, getGutterProps: getGutterLayout }) => (
+              <div id='grid-layout' className={style.gridExplorer} {...getGridLayout()}>
+                <div>
+                  {activeExplorer && <Explorer />}
+                </div>
+                <div className={style.gutterColExplorer} {...getGutterLayout('column', 1)} />
+                <Split rowMinSize={100} columnMinSize={200} render={({ getGridProps, getGutterProps }) => (
+                  <div
+                    id='grid'
+                    className={matched ? style.gridColumn : style.gridRow}
+                    {...getGridProps()}
+                  >
+                    <div style={{ height: '100%', position: 'relative', overflow: 'hidden' }}>
+                      {mounted && <Editor initialDoc={doc} onChange={handleChange} />}
+                    </div>
+                    <div
+                      className={matched ? style.gutterColumn : style.gutterRow}
+                      {...getGutterProps(matched ? 'column' : 'row', 1)}
+                    />
+                    <div style={{ width: '100%', height: '100%', overflow: 'auto', position: 'relative', overflow: 'hidden' }}>
+                      <Preview doc={doc} />
+                    </div>
+                  </div>
+                )}
+                />
               </div>
-            </div>
-          )}
+            )}
           />
         </div>
-        <footer className={style.footer}>
-          <div>
-            <span
-              data-tooltip='Markdown Preview Application'
-              className={style.tooltip}
-            >
-              Markdown Preview
-            </span>
-          </div>
-          <div>
-            <span
-              data-tooltip='Indentation'
-              className={style.tooltip}
-            >
-              Spaces: 2
-            </span>
-            <span
-              data-tooltip='Encoding'
-              className={style.tooltip}
-            >
-              UTF-8
-            </span>
-            <span
-              data-tooltip='Line Sequence'
-              className={style.tooltip}
-            >
-              LF
-            </span>
-            <span
-              data-tooltip='Language'
-              className={style.tooltip}
-            >
-              Markdown
-            </span>
-          </div>
-        </footer>
+        <Footer />
       </main>
     </Fragment>
   )
diff --git a/pages/index.js b/pages/index.js
index 6d4edd9..67e7e51 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -19,8 +19,8 @@ function Home() {
   return (
     <Fragment>
       <Head>
-        <title>Markdown Preview | An editor with real-time preview</title>
-        <meta name="description" content="This application is a editor of markdown with preview." />
+        <title>Rundev | An editor with real-time preview</title>
+        <meta name="description" content="Rundev - Markdown Preview, JavaScript & other Languages in run-time." />
       </Head>
       <Layout>
         <section className={style.heroSection}>
diff --git a/public/favicon.ico b/public/favicon.ico
index 072acb4..98d610e 100644
Binary files a/public/favicon.ico and b/public/favicon.ico differ
diff --git a/public/mdpreview-logo-2.png b/public/mdpreview-logo-2.png
deleted file mode 100644
index 50af207..0000000
Binary files a/public/mdpreview-logo-2.png and /dev/null differ
diff --git a/public/mdpreview-logo.png b/public/mdpreview-logo.png
deleted file mode 100644
index ff5e474..0000000
Binary files a/public/mdpreview-logo.png and /dev/null differ
diff --git a/public/mdpreview.webp b/public/mdpreview.webp
deleted file mode 100644
index 3a41d29..0000000
Binary files a/public/mdpreview.webp and /dev/null differ
diff --git a/public/rundevs.png b/public/rundevs.png
new file mode 100644
index 0000000..ba91c9f
Binary files /dev/null and b/public/rundevs.png differ
diff --git a/public/seti.woff b/public/seti.woff
new file mode 100644
index 0000000..f0e4748
Binary files /dev/null and b/public/seti.woff differ
diff --git a/styles/app.module.css b/styles/app.module.css
index 44f684d..d5ee378 100644
--- a/styles/app.module.css
+++ b/styles/app.module.css
@@ -26,8 +26,16 @@
   overflow: hidden;
 }
 
+.gridExplorer {
+  grid-template-columns: 0px 7px 1fr;
+  height: 100%;
+  width: 100%;
+  display: grid;
+  overflow: hidden;
+}
+
 .gridColumn {
-  grid-template-columns: 1fr 8px 1fr;
+  grid-template-columns: 1fr 7px 1fr;
 }
 
 .gutterColumn {
@@ -35,11 +43,10 @@
   cursor: col-resize;
   grid-column: 2;
   transition: background-color 0.2s ease-out;
-
 }
 
 .gridRow {
-  grid-template-rows: 1fr 8px 1fr;
+  grid-template-rows: 1fr 7px 1fr;
 }
 
 .gutterRow {
@@ -50,53 +57,37 @@
 
 }
 
-.gutterColumn, .gutterRow {
+.gutterColumn, .gutterRow, .gutterColExplorer {
   background-color: var(--md-bg-preview);
 }
 
-.gutterColumn:hover, .gutterRow:hover {
+.gutterColExplorer {
+  background-color: var(--md-bg-1);
+}
+
+.gutterColumn:hover, .gutterRow:hover, .gutterColExplorer:hover {
   background-color: var(--md-malibu);
   transition: background-color 0.2s ease-out;
 }
 
-.gutterColumn:active, .gutterRow:active {
+.gutterColumn:active, .gutterRow:active, .gutterColExplorer:active {
   background-color: var(--md-cursor);
-
 }
 
-.footer {
-  height: 22px;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  width: 100%;
-  background-color: var(--md-bg-preview);
-  border-top: 1px solid var(--md-divider-light-1);
-  font-size: 0.87rem;
-  color: var(--md-text-2);
-}
-
-.footer div {
-  height: 100%;
-  display: flex;
-  align-items: center;
-}
-
-.footer span {
-  padding: 0 0.68rem;
-  height: 100%;
-}
-
-.footer span:hover {
-  background-color: var(--md-bg-3);
-  cursor: default;
+.gutterColExplorer {
+  grid-row: 1/-1;
+  grid-column: 2;
+  cursor: col-resize;
 }
 
 @media screen and (min-width: 640px ){
   .appLayout  {
     flex-direction: row;
   }
+  .gridExplorer {
+    grid-template-columns: 170px 7px 1fr;
+    height: 100%;
+  }
   .gridColumn, .gridRow {
     height: 100%;
   }
diff --git a/styles/globals.css b/styles/globals.css
index 17b85d8..9df04c3 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -72,6 +72,14 @@
   --md-nav-height: 48px;
 }
 
+@font-face {
+  src: url('https://main.vscode-cdn.net/stable/da76f93349a72022ca4670c1b84860304616aaa2/extensions/theme-seti/icons/seti.woff') format('woff');
+  font-family: 'seti';
+  font-weight: normal;
+  font-style: normal;
+  font-display: block;
+}
+
 *, :before,
 :after {
   box-sizing: border-box;