diff --git a/src/components/cards/docs.jsx b/src/components/cards/docs.jsx
index 3cc2e14..a8f413c 100644
--- a/src/components/cards/docs.jsx
+++ b/src/components/cards/docs.jsx
@@ -2,9 +2,9 @@ import React from "react";
 import { Link } from "gatsby";
 import { node2slug } from "../../utils";
 
-const DocsCard = ({ md }) => {
+const DocsCard = ({ md, width }) => {
 
-    return <article className="card card bg-base-200 shadow-xl w-full mx-10 md:w-2/3 mb-5">
+    return <article className={"card card bg-base-200 shadow-xl mx-10 mb-5 " + (width || "w-full md:w-2/3")}>
         <div className="card-body">
             <h2 className="card-title">{md.frontmatter.title}</h2>
             <p>
diff --git a/src/components/drawer.jsx b/src/components/drawer.jsx
index 1a96966..c001c58 100644
--- a/src/components/drawer.jsx
+++ b/src/components/drawer.jsx
@@ -4,30 +4,54 @@ import React from "react"
 import { Link } from "gatsby"
 import { node2slug } from "../utils"
 
+function ChildrenNodes({nodes, parent}) {
+    const filtered = nodes.filter(it => {
+        return it.frontmatter.parent === parent
+    })
+
+    if (filtered.length < 1) return <></>
+
+    if (parent === null) {
+        return <>{filtered.map(it => {
+            return <li>
+                <Link to={node2slug(it)}>{it.frontmatter.title}</Link>
+                <ChildrenNodes nodes={nodes} parent={it.frontmatter.title} />
+            </li> 
+        })}</>
+    }
+
+    return <a><details>{filtered.map(it => {
+        return <li>
+            <Link to={node2slug(it)}>{it.frontmatter.title}</Link>
+            <ChildrenNodes nodes={nodes} parent={it.frontmatter.title} />
+        </li> 
+    })}</details></a>
+}
+
 const Drawer = () => (
     <ul className="menu p-4 overflow-y-auto w-80 bg-base-100 text-base-content">
         <li><Link to="/">Home</Link></li>
         <li><Link to="/repos">Repositories</Link></li>
         <div className="divider">Docs</div>
-        <li><Link to="/docs">Documentation</Link></li>
         <li><a href="/dokka/">Dokka</a></li>
+        <li><Link to="/docs">Documentation</Link></li>
         <StaticQuery
             query={graphql`
                 query {
-                    allMarkdownRemark {
-                            nodes {
-                                frontmatter {
-                                    title
-                                }
-                                fileAbsolutePath
-                            }
+                    allMarkdownRemark(sort: {fields: frontmatter___order}) {
+                        nodes {
+                        frontmatter {
+                            title
+                            order
+                            parent
+                        }
+                        fileAbsolutePath
                         }
                     }
+                }
             `}
             render={data => (
-                <>{data.allMarkdownRemark.nodes.map(it => {
-                    return <li><Link to={node2slug(it)}>{it.frontmatter.title}</Link></li> 
-                })}</>
+                <ChildrenNodes nodes={Array.from(data.allMarkdownRemark.nodes)} parent={null} />
             )}
         />
     </ul>)
diff --git a/src/components/layout.jsx b/src/components/layout.jsx
index 1015a71..817d59f 100644
--- a/src/components/layout.jsx
+++ b/src/components/layout.jsx
@@ -6,19 +6,31 @@ import Drawer from "./drawer"
 import './layout.css'
 
 const Layout = ({ children }) => (
-<div className="drawer bg-base">
-    <input id="drawer" type="checkbox" className="drawer-toggle" />
-    <div className="drawer-content items-center flex flex-none flex-col">
-        <Navbar />
-        <div className="pb-10 w-full text-base-content">
-            {children}
+    <div className="drawer bg-base min-h-screen">
+        <input id="drawer" type="checkbox" className="drawer-toggle" />
+        <div className="drawer-content items-center flex flex-none flex-col min-h-screen">
+            <Navbar />
+            <div className="pb-10 w-full text-base-content grow">
+                {children}
+            </div>
+            <footer class="footer footer-center p-10 mt-15 bg-base-200 text-base-content rounded gap-2">
+                <div class="grid grid-flow-col gap-4">
+                    <a class="link link-hover" href="https://discord.gg/5Hus6fM">Contact</a>
+                    <a class="link link-hover" href="https://github.com/recloudstream/">Github</a>
+                    <a class="link link-hover" href="https://discord.gg/5Hus6fM">Discord</a>
+                    <a class="link link-hover" href="https://matrix.to/#/#lagrapps:matrix.org">Matrix</a>
+                    <a class="link link-hover" onClick={() => {window.open("https://www.youtube.com/watch?v=f-UIBVsRSDQ")}}>DMCA</a>
+                </div>
+                <div>
+                    <p>Website by <a className="link" href="https://wilkins.ml" target="_blank">Cloudburst</a></p>
+                </div>
+            </footer>
+        </div>
+        <div className="drawer-side">
+            <label for="drawer" className="drawer-overlay backdrop-blur-sm"></label>
+            <Drawer />
         </div>
     </div>
-    <div className="drawer-side">
-        <label for="drawer" className="drawer-overlay backdrop-blur-sm"></label>
-        <Drawer />
-    </div>
-</div>
 )
 
 export default Layout
\ No newline at end of file
diff --git a/src/pages/docs/devs/create-your-own-json-repository.md b/src/pages/docs/devs/create-your-own-json-repository.md
index ab852cf..5b5852c 100644
--- a/src/pages/docs/devs/create-your-own-json-repository.md
+++ b/src/pages/docs/devs/create-your-own-json-repository.md
@@ -1,5 +1,7 @@
 ---
 title: Creating your own JSON repository
+parent: For extension developers
+order: 4
 ---
 
 # Creating your own JSON repository
diff --git a/src/pages/docs/devs/create-your-own-providers.md b/src/pages/docs/devs/create-your-own-providers.md
index 187b933..eb6dfb3 100644
--- a/src/pages/docs/devs/create-your-own-providers.md
+++ b/src/pages/docs/devs/create-your-own-providers.md
@@ -1,5 +1,7 @@
 ---
 title: Creating your own providers
+parent: For extension developers
+order: 2
 ---
 
 # Creating your own Providers
diff --git a/src/pages/docs/devs/index.md b/src/pages/docs/devs/index.md
index 3742fb2..9a58050 100644
--- a/src/pages/docs/devs/index.md
+++ b/src/pages/docs/devs/index.md
@@ -1,5 +1,7 @@
 ---
 title: For extension developers
+parent: null
+order: 2
 ---
 
 # For extension developers
diff --git a/src/pages/docs/devs/scraping/devtools_detectors.md b/src/pages/docs/devs/scraping/devtools_detectors.md
index 9b6294b..40d9a51 100644
--- a/src/pages/docs/devs/scraping/devtools_detectors.md
+++ b/src/pages/docs/devs/scraping/devtools_detectors.md
@@ -1,5 +1,7 @@
 ---
 title: Devtools detector
+parent: Scraping tutorial
+order: 3
 ---
 
 **TL;DR**: You are going to get fucked by sites detecting your devtools, the easiest bypass for this is using [a web sniffer extension](https://chrome.google.com/webstore/detail/web-sniffer/ndfgffclcpdbgghfgkmooklaendohaef?hl=en)
diff --git a/src/pages/docs/devs/scraping/disguising_your_scraper.md b/src/pages/docs/devs/scraping/disguising_your_scraper.md
index 86a10c6..689dedf 100644
--- a/src/pages/docs/devs/scraping/disguising_your_scraper.md
+++ b/src/pages/docs/devs/scraping/disguising_your_scraper.md
@@ -1,5 +1,7 @@
 ---
 title: Disguishing your scrapers
+parent: Scraping tutorial
+order: 4
 ---
 
 # Disguishing your scrapers
diff --git a/src/pages/docs/devs/scraping/finding_video_links.md b/src/pages/docs/devs/scraping/finding_video_links.md
index 0fa6a08..59cf479 100644
--- a/src/pages/docs/devs/scraping/finding_video_links.md
+++ b/src/pages/docs/devs/scraping/finding_video_links.md
@@ -1,5 +1,7 @@
 ---
 title: Finding video links
+parent: Scraping tutorial
+order: 5
 ---
 
 # Finding video links
diff --git a/src/pages/docs/devs/scraping/index.md b/src/pages/docs/devs/scraping/index.md
index a3ded86..c604cb7 100644
--- a/src/pages/docs/devs/scraping/index.md
+++ b/src/pages/docs/devs/scraping/index.md
@@ -1,5 +1,7 @@
 ---
 title: Scraping tutorial
+parent: For extension developers
+order: 3
 ---
 
 # Requests based scraping tutorial
diff --git a/src/pages/docs/devs/scraping/starting.md b/src/pages/docs/devs/scraping/starting.md
index 2880f09..00b3d1c 100644
--- a/src/pages/docs/devs/scraping/starting.md
+++ b/src/pages/docs/devs/scraping/starting.md
@@ -1,5 +1,7 @@
 ---
 title: Starting
+parent: Scraping tutorial
+order: 1
 ---
 
 Scraping is just downloading a webpage and getting the wanted information from it. 
diff --git a/src/pages/docs/devs/scraping/using_apis.md b/src/pages/docs/devs/scraping/using_apis.md
index 47d84fe..2c6f09a 100644
--- a/src/pages/docs/devs/scraping/using_apis.md
+++ b/src/pages/docs/devs/scraping/using_apis.md
@@ -1,5 +1,7 @@
 ---
 title: Using APIs
+parent: Scraping tutorial
+order: 2
 ---
 
 ### About
diff --git a/src/pages/docs/devs/using-plugin-template.md b/src/pages/docs/devs/using-plugin-template.md
index 4f986b6..196aac4 100644
--- a/src/pages/docs/devs/using-plugin-template.md
+++ b/src/pages/docs/devs/using-plugin-template.md
@@ -1,5 +1,7 @@
 ---
 title: Using plugin template
+parent: For extension developers
+order: 1
 ---
 
 # Using the template
diff --git a/src/pages/docs/index.js b/src/pages/docs/index.js
index 34dc54c..e507467 100644
--- a/src/pages/docs/index.js
+++ b/src/pages/docs/index.js
@@ -11,7 +11,10 @@ const DocsPage = () => {
             <StaticQuery
                 query={graphql`
                 query {
-                    allMarkdownRemark {
+                    allMarkdownRemark(
+                        sort: {fields: frontmatter___order}
+                        filter: {frontmatter: {parent: {eq: null}}}
+                    ) {
                             nodes {
                                 id
                                 frontmatter {
@@ -40,8 +43,8 @@ export default DocsPage
 export function Head() {
     return (
         <>
-            <title>Cloudstream 404</title>
-            <meta property="og:title" content="Cloudstream" />
+            <title>Cloudstream Docs</title>
+            <meta property="og:title" content="Cloudstream Docs" />
             <meta property="og:description" content="Cloudstream is an Android app for streaming and downloading Movies, TV-Series and Anime." />
             <meta property="og:image" content={bgImage} />
             <meta property="og:image:type" content="image/png" />
diff --git a/src/pages/docs/users/index.md b/src/pages/docs/users/index.md
index 5d4c6d4..a7cd1be 100644
--- a/src/pages/docs/users/index.md
+++ b/src/pages/docs/users/index.md
@@ -1,5 +1,7 @@
 ---
 title: For users
+parent: null
+order: 1
 ---
 
 # Cloudstream
diff --git a/src/pages/docs/users/local-plugins.md b/src/pages/docs/users/local-plugins.md
index 93c1e22..f329223 100644
--- a/src/pages/docs/users/local-plugins.md
+++ b/src/pages/docs/users/local-plugins.md
@@ -1,5 +1,7 @@
 ---
 title: Using local extensions
+parent: For users
+order: 1
 ---
 
 It is possible to use extensions without using repositories. This can be useful when prototyping. 
diff --git a/src/templates/default.jsx b/src/templates/default.jsx
index 80ee16b..904c3b4 100644
--- a/src/templates/default.jsx
+++ b/src/templates/default.jsx
@@ -2,6 +2,7 @@ import React from "react"
 import { Link, graphql } from "gatsby"
 import Layout from "../components/layout"
 import bgImage from "../media/phones.png"
+import DocsCard from "../components/cards/docs"
 
 import rehypeReact from "rehype-react"
 
@@ -28,10 +29,10 @@ const componentMap = {
     return <li className="step" {...props} />
   },
   table: (props) => {
-    return <table className="table w-full" {...props} /> 
+    return <table className="table w-full" {...props} />
   },
   tr: (props) => {
-    return <tr className="hover" {...props} /> 
+    return <tr className="hover" {...props} />
   },
   hr: (props) => {
     return <div className="divider" {...props} />
@@ -39,7 +40,7 @@ const componentMap = {
 }
 
 
-export default function PageTemplate({ data: { markdownRemark } }) {
+export default function PageTemplate({ data: { markdownRemark, allMarkdownRemark } }) {
   const renderAst = new rehypeReact({
     createElement: React.createElement,
     components: componentMap,
@@ -48,6 +49,10 @@ export default function PageTemplate({ data: { markdownRemark } }) {
     }
   }).Compiler
 
+  const filtered = allMarkdownRemark.nodes.filter(it => it.frontmatter.parent === markdownRemark.frontmatter.title).map(it => {
+    return <DocsCard md={it} key={it} width="w-full" />
+  })
+
   return (
     <Layout>
       <div className="flex items-center w-full flex-col">
@@ -60,16 +65,22 @@ export default function PageTemplate({ data: { markdownRemark } }) {
         </div>
         <div className="w-full mx-10 md:w-2/3 card bg-base-200 shadow-xl">
           <div className="card-body">
-            <h2 class="card-title">{markdownRemark.frontmatter.title}</h2>
+            <h1 class="card-title text-xl">{markdownRemark.frontmatter.title}</h1>
             {renderAst(markdownRemark.htmlAst)}
           </div>
         </div>
+        {filtered.length > 0 && <>
+          <div class="divider text-xl mt-5">Children</div>
+          <div className="grid gap-5 w-full px-10 place-items-center auto-rows-max grid-flow-row-dense grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
+            {filtered}
+          </div></>}
+
       </div>
     </Layout>
   )
 }
 
-export function Head({data}) {
+export function Head({ data }) {
   return (
     <>
       <title>{data.markdownRemark.frontmatter.title}</title>
@@ -92,5 +103,19 @@ export const pageQuery = graphql`
       excerpt
       htmlAst
     }
+    allMarkdownRemark(
+      sort: {fields: frontmatter___order}
+      filter: {frontmatter: {parent: {ne: null}}}
+    ) {
+      nodes {
+        frontmatter {
+          title
+          order
+          parent
+        }
+        fileAbsolutePath
+        excerpt
+      }
+    }
   }
 `