diff --git a/gatsby-config.js b/gatsby-config.js
index b61de85..4f21796 100644
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -34,7 +34,7 @@ module.exports = {
       resolve: `gatsby-plugin-manifest`,
       options: {
         name: `The Programmers Hangout`,
-        short_name: `starter`,
+        short_name: `TPH`,
         start_url: `/`,
         background_color: `#663399`,
         theme_color: `#ba1a2e`,
diff --git a/package-lock.json b/package-lock.json
index e5e5e40..0f820b9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1790,6 +1790,15 @@
         "@types/react": "*"
       }
     },
+    "@types/react-treeview": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/@types/react-treeview/-/react-treeview-0.4.2.tgz",
+      "integrity": "sha512-pL2IuQrSPbOgn4wQ4B24bekCjyoa6KpereAtYroMwt3dAeFivchksF00oWkNjEoX3NBQ0gZGuu6fa1AzL5Whgw==",
+      "dev": true,
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/styled-components": {
       "version": "4.1.18",
       "resolved": "https://registry.npmjs.org/@types/styled-components/-/styled-components-4.1.18.tgz",
@@ -14092,6 +14101,14 @@
         "shallowequal": "^1.0.1"
       }
     },
+    "react-treeview": {
+      "version": "0.4.7",
+      "resolved": "https://registry.npmjs.org/react-treeview/-/react-treeview-0.4.7.tgz",
+      "integrity": "sha1-9kfgT3BJbrEfsJEsNRh+gOtg1Fg=",
+      "requires": {
+        "prop-types": "^15.5.8"
+      }
+    },
     "read": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/read/-/read-1.0.7.tgz",
diff --git a/package.json b/package.json
index 9da9037..f1a8b6c 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
     "react-dom": "^16.8.6",
     "react-helmet": "^5.2.1",
     "react-perfect-scrollbar": "^1.5.3",
+    "react-treeview": "^0.4.7",
     "styled-components": "^4.3.2"
   },
   "devDependencies": {
@@ -38,6 +39,7 @@
     "@types/react": "^16.8.23",
     "@types/react-dom": "^16.8.5",
     "@types/react-helmet": "^5.0.8",
+    "@types/react-treeview": "^0.4.2",
     "prettier": "^1.18.2",
     "@graphql-codegen/typescript": "1.4.0",
     "@graphql-codegen/typescript-operations": "1.4.0",
diff --git a/src/components/Docs/Sidebar/index.tsx b/src/components/Docs/Sidebar/index.tsx
index 2ec7ed8..699a100 100644
--- a/src/components/Docs/Sidebar/index.tsx
+++ b/src/components/Docs/Sidebar/index.tsx
@@ -1,5 +1,24 @@
 import React from "react";
+import { SidebarScroller } from "./style";
+import Tree from "react-treeview";
 
-const Sidebar = () => { }
+const makeTree = () => {
+
+}
+
+const Sidebar = () => {
+
+  return (
+    <Tree
+      nodeLabel={<div>"Javascript"</div>}
+    >
+      <Tree
+        nodeLabel={<div>"Javascript"</div>}
+      >
+        Test
+    </Tree>
+    </Tree>
+  )
+}
 
 export default Sidebar;
\ No newline at end of file
diff --git a/src/components/Docs/Sidebar/style.tsx b/src/components/Docs/Sidebar/style.tsx
new file mode 100644
index 0000000..0ba5a63
--- /dev/null
+++ b/src/components/Docs/Sidebar/style.tsx
@@ -0,0 +1,6 @@
+import styled from "styled-components";
+
+export const SidebarScroller = styled.div`
+  display: flex;
+  flex-direction: column;
+`
\ No newline at end of file
diff --git a/src/components/Docs/SidebarSection/index.tsx b/src/components/Docs/SidebarSection/index.tsx
new file mode 100644
index 0000000..6786ace
--- /dev/null
+++ b/src/components/Docs/SidebarSection/index.tsx
@@ -0,0 +1,17 @@
+import React from "react";
+import { SidebarTitle } from "./style";
+
+export interface SidebarSectionProps {
+  readonly title: string;
+}
+
+const SidebarSection = ({ title, children }: React.PropsWithChildren<SidebarSectionProps>) => {
+  return (
+    <div>
+      <SidebarTitle>{title}</SidebarTitle>
+      {children}
+    </div>
+  )
+}
+
+export default SidebarSection;
\ No newline at end of file
diff --git a/src/components/Docs/SidebarSection/style.tsx b/src/components/Docs/SidebarSection/style.tsx
new file mode 100644
index 0000000..41ebe9d
--- /dev/null
+++ b/src/components/Docs/SidebarSection/style.tsx
@@ -0,0 +1,5 @@
+import styled from "styled-components";
+
+export const SidebarTitle = styled.h3`
+  text-transform: uppercase;
+`;
\ No newline at end of file
diff --git a/src/templates/languagePost.tsx b/src/templates/languagePost.tsx
index 8483fc7..7611b9c 100644
--- a/src/templates/languagePost.tsx
+++ b/src/templates/languagePost.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import { graphql } from "gatsby";
 import SEO from "../components/SEO";
 import Layout from "../components/Layout";
+import { Sidebar } from "../components/Docs";
 
 // @todo maybe find alternative type for data
 const LanguagePost = ({ data }: any) => {
@@ -10,6 +11,7 @@ const LanguagePost = ({ data }: any) => {
   return (
     <Layout>
       <SEO title={frontmatter.title} />
+      <Sidebar />
       <div dangerouslySetInnerHTML={{ __html: html }} />
     </Layout >
   )