diff --git a/packages/freesewing.dev/hooks/useApp.js b/packages/freesewing.dev/hooks/useApp.js
index 84175405a49..3fd010585f7 100644
--- a/packages/freesewing.dev/hooks/useApp.js
+++ b/packages/freesewing.dev/hooks/useApp.js
@@ -21,7 +21,7 @@ function useApp(full = true) {
   // React State
   const [primaryMenu, setPrimaryMenu] = useState(false)
   const [navigation, setNavigation] = useState(prebuildNavigation[language])
-
+  const [slug, setSlug] = useState('/')
 
   // State methods
   const togglePrimaryMenu = () => setPrimaryMenu(!primaryMenu)
@@ -58,12 +58,14 @@ function useApp(full = true) {
     language,
     navigation,
     primaryMenu,
+    slug,
     theme,
 
     // State setters
     setLanguage,
     setNavigation,
     setPrimaryMenu,
+    setSlug,
     setTheme,
 
     // State handlers
diff --git a/packages/freesewing.dev/pages/index.js b/packages/freesewing.dev/pages/index.js
index e1ae4c895f2..27fc3494d0c 100644
--- a/packages/freesewing.dev/pages/index.js
+++ b/packages/freesewing.dev/pages/index.js
@@ -7,6 +7,18 @@ export default (props) => {
   return (
     <Page app={app} title='FIXME: Create homepage content'>
       <Logo size={200} theme={app.theme}/>
+    <p className="bg-secondary hover:bold mr-4 hover:bg-base-100">test</p>
+    <p className="cursor-pointer label justify-start gap-4 font-lg lg:font-xl font-bold border rounded mb-2">saef</p>
+
+                <label className="cursor-pointer label justify-start gap-4 font-lg lg:font-xl font-bold">
+                  <input
+                    type="checkbox"
+                    checked={develop}
+                    className="toggle toggle-secondary"
+                    onChange={() => setDevelop(!develop)}
+                  />
+                  <span className="ml-4 label-text text-secondary">{develop ? 'Disable' : 'Enable'} Developer View</span>
+                </label>
     </Page>
   )
 }
diff --git a/packages/freesewing.dev/prebuild/mdx.en.js b/packages/freesewing.dev/prebuild/mdx.en.js
index 193e688ee6b..9b4aee702af 100644
--- a/packages/freesewing.dev/prebuild/mdx.en.js
+++ b/packages/freesewing.dev/prebuild/mdx.en.js
@@ -695,8 +695,8 @@ export default {
     "slug": "guides/prerequisites/coordinate-system"
   },
   "guides/prerequisites": {
-    "title": "Prerequisites",
-    "order": "100Prerequisites",
+    "title": "Before you start",
+    "order": "100Before you start",
     "slug": "guides/prerequisites"
   },
   "guides/prerequisites/parametric-pattern-design": {
diff --git a/packages/freesewing.dev/prebuild/navigation.js b/packages/freesewing.dev/prebuild/navigation.js
index b4a48ed3191..d3176d73bbf 100644
--- a/packages/freesewing.dev/prebuild/navigation.js
+++ b/packages/freesewing.dev/prebuild/navigation.js
@@ -822,10 +822,10 @@ export default {
         }
       },
       "prerequisites": {
-        "__title": "Prerequisites",
-        "__linktitle": "Prerequisites",
+        "__title": "Before you start",
+        "__linktitle": "Before you start",
         "__slug": "guides/prerequisites",
-        "__order": "100Prerequisites",
+        "__order": "100Before you start",
         "bezier-curves": {
           "__title": "Bézier curves",
           "__linktitle": "Bézier curves",
diff --git a/packages/freesewing.shared/components/mdx/index.js b/packages/freesewing.shared/components/mdx/index.js
index f849feacb7e..51fbce183ed 100644
--- a/packages/freesewing.shared/components/mdx/index.js
+++ b/packages/freesewing.shared/components/mdx/index.js
@@ -10,7 +10,7 @@ import rendertest from '@freesewing/rendertest'
 import tutorial from '@freesewing/tutorial'
 
 
-const mdxCustomComponents = {
+const mdxCustomComponents = (app) => ({
   // Custom components
   DesignIterator,
   Example: props => <Example
@@ -20,7 +20,7 @@ const mdxCustomComponents = {
   Fixme: props => <Popout {...props} fixme />,
   Link: props => <Popout {...props} link />,
   Note: props => <Popout {...props} note />,
-  ReadMore,
+  ReadMore: props => <ReadMore {...props} app={app} />,
   Related: props => <Popout {...props} related />,
   Tip: props => <Popout {...props} tip />,
   Warning: props => <Popout {...props} warning />,
@@ -39,7 +39,7 @@ const mdxCustomComponents = {
     </Popout>
   ),
 
-}
+})
 
 export default mdxCustomComponents
 
diff --git a/packages/freesewing.shared/components/mdx/read-more.js b/packages/freesewing.shared/components/mdx/read-more.js
index 48780090017..c0463be9ff3 100644
--- a/packages/freesewing.shared/components/mdx/read-more.js
+++ b/packages/freesewing.shared/components/mdx/read-more.js
@@ -1,4 +1,24 @@
-const ReadMore = props => <p>FIXME: Example still todo</p>
+import get from 'lodash.get'
+import orderBy from 'lodash.orderby'
+import Link from 'next/link'
+
+// Helper method to filter out the real children
+const currentChildren = current => Object.values(current)
+  .filter(entry => (typeof entry === 'object'))
+
+const ReadMore = props => {
+
+  const root = get(props.app.navigation, props.app.slug.split('/'))
+  const list = []
+  for (const page of currentChildren(root)) {
+    list.push(<li key={page.__slug}>
+      <Link href={`/${page.__slug}`}>
+        <a>{page.__title}</a>
+      </Link>
+    </li>)
+  }
+  return <ul>{list}</ul>
+}
 
 export default ReadMore
 
diff --git a/packages/freesewing.shared/components/popout.js b/packages/freesewing.shared/components/popout.js
index e04dec43dac..c4a5a79b345 100644
--- a/packages/freesewing.shared/components/popout.js
+++ b/packages/freesewing.shared/components/popout.js
@@ -10,15 +10,15 @@ const colors = {
   none: '',
 }
 
-let forceTailwind = <p className="border-accent" />
+let forceTailwind = <p className="border-accent bg-accent" />
 forceTailwind = <p className="text-accent" />
-forceTailwind = <p className="border-secondary" />
+forceTailwind = <p className="border-secondary bg-secondary" />
 forceTailwind = <p className="text-secondary" />
-forceTailwind = <p className="border-error" />
+forceTailwind = <p className="border-error bg-error" />
 forceTailwind = <p className="text-error" />
-forceTailwind = <p className="border-warning" />
+forceTailwind = <p className="border-warning bg-warning" />
 forceTailwind = <p className="text-warning" />
-forceTailwind = <p className="border-info" />
+forceTailwind = <p className="border-info bg-info" />
 forceTailwind = <p className="text-info" />
 
 const Popout = (props) => {
@@ -29,7 +29,7 @@ const Popout = (props) => {
   const color = colors[type]
 
   return (
-    <div className="relative my-8">
+    <div className={`relative my-8 bg-${color} bg-opacity-5`}>
       <div className={`
         border-l-4 px-8 py-2 shadow border-${color}`}>
         <div className={`font-bold uppercase text-${color}`}>
diff --git a/packages/freesewing.shared/components/wrappers/mdx.js b/packages/freesewing.shared/components/wrappers/mdx.js
index 7ae447d0208..ed71e203985 100644
--- a/packages/freesewing.shared/components/wrappers/mdx.js
+++ b/packages/freesewing.shared/components/wrappers/mdx.js
@@ -28,7 +28,7 @@ const MdxWrapper = ({mdx, app, components={}}) => {
    * extra components via props
    */
   const allComponents = {
-    ...customComponents,
+    ...customComponents(app),
     ...components
   }
 
diff --git a/packages/freesewing.shared/components/wrappers/page.js b/packages/freesewing.shared/components/wrappers/page.js
index 310ce3bef19..c73f6fc26c1 100644
--- a/packages/freesewing.shared/components/wrappers/page.js
+++ b/packages/freesewing.shared/components/wrappers/page.js
@@ -1,10 +1,9 @@
 import React, { useState, useEffect } from 'react'
 import { useSwipeable } from 'react-swipeable'
-//import {themeChange} from "theme-change"
+import { useRouter } from 'next/router'
 //import Head from 'next/head'
 //import { useHotkeys } from 'react-hotkeys-hook'
 //import themes from '@/shared/themes'
-//import { useRouter } from 'next/router'
 //import config from '@/site/freesewing.config.js'
 // Shared components
 import Layout from 'shared/components/layouts/default'
@@ -24,8 +23,8 @@ const AppWrapper= props => {
     trackMouse: true
   })
 
-  //const router = useRouter()
-  //const path = router.asPath
+  const router = useRouter()
+  props.app.setSlug(router.asPath.slice(1))
   //const locale = router.locale || config.language
   //const tree = useNavigation(locale, path)
 
diff --git a/packages/freesewing.shared/styles/svg-freesewing-draft.css b/packages/freesewing.shared/styles/svg-freesewing-draft.css
index 3ab9bad756e..e0721d12b6a 100644
--- a/packages/freesewing.shared/styles/svg-freesewing-draft.css
+++ b/packages/freesewing.shared/styles/svg-freesewing-draft.css
@@ -13,6 +13,7 @@ svg.freesewing.pattern {
     stroke-width: calc(var(--pattern-stroke) * var(--pattern-scale));
     stroke-linecap: round;
     stroke-linejoin: round;
+    stroke: currentColor;
   }
 
   /* Stroke width utility classes */