diff --git a/reagent-reitit-demo/readme.org b/reagent-reitit-demo/readme.org
index 4f99506..b069e22 100644
--- a/reagent-reitit-demo/readme.org
+++ b/reagent-reitit-demo/readme.org
@@ -47,6 +47,24 @@ In the example below the function just returns some hiccup with the parameters i
   [:a.link.dim.white.dib.mr3 {:key href :href href :title title} text])
 #+END_SRC
 
+#+BEGIN_SRC clojurescript
+(defn product-card
+  [{:keys [title amount description link]}]
+  [:article.br2.ba.dark-gray.b--black-10.ma2.w-100.w-50-m.w-25-l.mw5
+   [:img.db.w-100.br2.br--top {:src link}]
+   [:div.pa2.ph3-ns.pb3-ns
+    [:div.dt.w-100.mt1
+     [:div.dtc [:h1.f5.f4-ns.mv0 title]]
+     [:div.dtc.tr [:h2.f5.mv0 amount]]]
+    [:p.f6.lh-copy.measure.mt2.mid-gray description]]])
+
+(product-card
+      {:title "Cat 01"
+       :amount "£54.59"
+       :description "Cat description here"
+       :link "http://placekitten.com/g/600/300"})
+#+END_SRC
+
 
 ** Form 2 components
 In form two we can track local state inside a component a click counter being a basic example.
diff --git a/reagent-reitit-demo/resources/public/documents/clojure-basics.org b/reagent-reitit-demo/resources/public/documents/clojure-basics.org
index a8ee66c..15ad412 100644
--- a/reagent-reitit-demo/resources/public/documents/clojure-basics.org
+++ b/reagent-reitit-demo/resources/public/documents/clojure-basics.org
@@ -18,7 +18,7 @@ There a few ways to comment code in this language.
  - #_ prefixed before a bracket will comments out everything between the opening and closing bracket, this is most hopefull to comment out entire blocks in one go.
  - Another method is to use rich comments which is a function which stops the evaluation of everything inside the block, this is extremely useful as you can run the code from your IDE but it will not be executed in production.
 
-#+BEGIN_SRC clojure :tangle src/core.cljc
+#+BEGIN_SRC clojure :results verbatim :tangle src/core.cljc
 ; comments are semi colon, linters will treat alignment different bassed on the number of semi colons
 
 ; comment out the block of code from starting bracket to matching closing bracket
@@ -37,7 +37,7 @@ There a few ways to comment code in this language.
 
 Clojure has a rich set of data types, including numbers, strings, characters, booleans, and nil.
 
-#+BEGIN_SRC clojure :tangle src/core.cljc
+#+BEGIN_SRC clojure :results verbatim :tangle src/core.cljc
 ;; comments are semi colon, linters will treat alignment different bassed on the number of semi colons
 ;;Integers
 1234
@@ -62,14 +62,14 @@ true false
 ;; Null or None is just nil
 nil
 ;; Regex patterns are strings prefixed with a hash symbol
-#"^Begins with this text"
+(clojure.string/replace "find & replace in a string" #"&" "and"  )
 #+END_SRC
 
 ** Collections of data
 
 Clojure also has a number of compound data types, such as lists, vectors, maps, and sets.
 
-#+BEGIN_SRC clojure :tangle src/core.cljc
+#+BEGIN_SRC clojure :results verbatim :tangle src/core.cljc
 ;; List are wrapped in brackets, space or comma act as seerators
 ;; Lists are special in that they need to be escaped to be treated as data
 ;; using the list function or the quote symbol, which is short hand and explained later.
@@ -102,7 +102,7 @@ All functions return a value, this is always the last statement called inside th
 
 When ever you see an opening bracket the value after is always a function unless the bracket is preceded by a character in which case this is a macro a common macro is ='(1 2)= which is the same as typing (list 1 2) so a function is still the first parameter.
 
-#+BEGIN_SRC clojure :tangle src/core.cljc
+#+BEGIN_SRC clojure :results verbatim :tangle src/core.cljc
 ;; this code add's two number together, its starts with a bracket and call a function called + with 2 parameters
 (+ 1 1)
 
@@ -117,7 +117,7 @@ All maths operators are also functions, meaning you start with the operation the
 
 This goes back to function as the first item in a list then the arguments.
 
-#+BEGIN_SRC clojure :tangle src/core.cljc
+#+BEGIN_SRC clojure :results verbatim :tangle src/core.cljc
 ;; This is equivalend to 1 + 2 + 3 in other languages
 (+ 1 2 3)
 
@@ -129,7 +129,7 @@ This goes back to function as the first item in a list then the arguments.
 ** Variables
 Variables in clojure are defined with =def= function, how ever unlike other languages you can not change these unless using some construct which allows the value to be changed like an atom.
 
-#+BEGIN_SRC clojure :tangle src/core.cljc
+#+BEGIN_SRC clojure :results verbatim :tangle src/core.cljc
 ;; These define variable Which can not change
 (def my-string "A string once set does not change")
 (def my-number 3.14)
@@ -174,7 +174,7 @@ Similar rules apply to if conditions =if=, =and=, =or= and =not= are also functi
 
 When needing multiple conditions look into, =cond= =condp= or =case=
 
-#+BEGIN_SRC clojure :tangle src/core.cljc
+#+BEGIN_SRC clojure :results verbatim :tangle src/core.cljc
 ;; OR AND NOT can be used by there own as function calls
 (or nil 1)
 (and nil 1)
@@ -194,7 +194,7 @@ When needing multiple conditions look into, =cond= =condp= or =case=
 
 ;; If you need to call multiple function when only one is allowed use the do function.
 (if (true? (not true))
-  (do 
+  (do
     (prn "first thing todo")
     (prn "second thing todo, last statement will be the return")
     1)
@@ -206,7 +206,7 @@ For the most part you will use =map= =filter= and =reduce= which apply a functio
 
 You can also use loop which takes your initial values as params inside the [] block and you call recur supplying the updated values in each iteration, not calling recur will end the loop.
 
-#+BEGIN_SRC clojure :tangle src/core.cljc
+#+BEGIN_SRC clojure :results verbatim :tangle src/core.cljc
 ;; set n to 0 initially, increment in each loop while n is less than 5 return n value when this is no longer the case
 (loop [n 0]
   (if (< n 5)
@@ -214,7 +214,7 @@ You can also use loop which takes your initial values as params inside the [] bl
 #+END_SRC
 
 For loops are also available in a similar fashion to =loop=
-#+BEGIN_SRC clojure :tangle src/core.cljc
+#+BEGIN_SRC clojure :results verbatim :tangle src/core.cljc
 ;; loop over the sequence of numbers, assigning each to X until the end
 ;; run any functions on the value in the rest of the body
 (for [x [1 2 3 4 5 6]]
@@ -228,7 +228,7 @@ One of the fundamentals to working with hashmap's in clojure is that keywords ar
 This has some really nice side effects, one being it is very easy to navigate your hasahmap's the example below shows how to pull out the value 2.
 
 *** Basic value fetching
-#+BEGIN_SRC clojure :tangle src/core.cljc
+#+BEGIN_SRC clojure :results verbatim :tangle src/core.cljc
 (def my-hashmap {:top-lvl-key {:first-key 1 :second-key 2}})
 
 ;; you can get the value in a number of ways.
@@ -247,9 +247,9 @@ This has some really nice side effects, one being it is very easy to navigate yo
 
 You can use de-structuring in clojure to explode out keys when passed to a function.
 Using =:or= we can set default values if the key is missing, the :as keyword can be used to access the unstructured map.
-#+BEGIN_SRC clojure :tangle src/core.cljc
+#+BEGIN_SRC clojure :results verbatim :tangle src/core.cljc
 (defn my-fn [{:keys [id name value missing] :or {missing "not set"} :as my-hashmap}]
-  [id name value missing my-hashmap])
+  (clojure.string/join " - " [id name value missing my-hashmap]))
 
 (my-fn {:id 1 :name "bob" :value 456})
 #+END_SRC
@@ -284,7 +284,7 @@ Below you will find some simple examples, it is worth noting that some of the wi
 ;; #_ this is the comment block it
 
 
-#+BEGIN_SRC clojure :tangle src/core.cljc
+#+BEGIN_SRC clojure :results verbatim :tangle src/core.cljc
 ;; : Colon indicates a keyword's
 
 ;; :: Double colon makes a namespaced keyword, what ever is defined at the top of your file under (ns)
diff --git a/reagent-reitit-demo/resources/public/documents/reagent-reitit.org b/reagent-reitit-demo/resources/public/documents/reagent-reitit.org
index 1981b12..7c1ea6a 100644
--- a/reagent-reitit-demo/resources/public/documents/reagent-reitit.org
+++ b/reagent-reitit-demo/resources/public/documents/reagent-reitit.org
@@ -1,32 +1,7 @@
 #+TITLE: Minimal clojurescript reagent reitit example
 
 
-https://github.com/reagent-project/reagent
 
-https://purelyfunctional.tv/guide/reagent/#what-is-reagent
-
-https://github.com/metosin/reitit
-
-https://www.metosin.fi/blog/reitit/
-
-* Figwheel Main
-https://figwheel.org/
-
-https://figwheel.org/docs/hot_reloading.html
-
-Figwheel is a tool that does hot reloading of your code, it greatly simplifys the tooling required to develop and deploy your applications.
-
-You can control how reloading works by using meta data in your project, usually adding it as a tag on your main namespace, and hooking your main function which calls =reagent/render= 
-
-
-#+BEGIN_SRC clojurescript
-;;(require '[reagent.core :as r])
-(ns ^:figwheel-hooks core.demo)
-#+END_SRC
-
-#+BEGIN_SRC clojurescript
-(defn ^:after-load render-site [])
-#+END_SRC
 
 * Components
 Reagent allow multiple ways to create components with increasing complexity.
@@ -142,3 +117,14 @@ To create a link to a route, you can use the =rfe/href= function which takes a l
 #+BEGIN_SRC clojurescript
 [:a {:href (rfe/href ::frontpage)} "example link"]
 #+END_SRC
+
+
+* Further reading
+
+https://github.com/reagent-project/reagent
+
+https://purelyfunctional.tv/guide/reagent/#what-is-reagent
+
+https://github.com/metosin/reitit
+
+https://www.metosin.fi/blog/reitit/
diff --git a/reagent-reitit-demo/resources/public/index.html b/reagent-reitit-demo/resources/public/index.html
index 74707f6..bffd533 100644
--- a/reagent-reitit-demo/resources/public/index.html
+++ b/reagent-reitit-demo/resources/public/index.html
@@ -87,7 +87,7 @@
     <meta name="robots" content="noindex">
 </head>
 
-<body>
+<body class="f5 sans-serif">
     <div id="app">
       loading here
     </div>
diff --git a/reagent-reitit-demo/shadow-cljs.edn b/reagent-reitit-demo/shadow-cljs.edn
index 7ae8091..1caf1b8 100644
--- a/reagent-reitit-demo/shadow-cljs.edn
+++ b/reagent-reitit-demo/shadow-cljs.edn
@@ -8,5 +8,8 @@
                 :compiler-options {:infer-externs :auto
                                    :externs ["datascript/externs.js"]
                                    :output-feature-set :es6}
+
                 :modules {:main_bundle {:init-fn clojure-demo.core/startup!}}
-                :devtools {:after-load app.main/reload!}}}}
+                :devtools {:after-load app.main/reload!
+                           ;:watch-dir ["resources/public/documents/*.org"]
+                           :watch-path ["documents/*.org"]}}}}
diff --git a/reagent-reitit-demo/src/clojure_demo/core.cljs b/reagent-reitit-demo/src/clojure_demo/core.cljs
index 97a76c5..22b3a88 100644
--- a/reagent-reitit-demo/src/clojure_demo/core.cljs
+++ b/reagent-reitit-demo/src/clojure_demo/core.cljs
@@ -104,27 +104,31 @@
     (reagent/create-class
      {:component-did-mount
       (fn [_]
+        ;(prn "mounted")
+        ;(prn @editor)
+        ;(prn (.current @editor))
         (reset! view (EditorView.
                       (clj->js  (merge {} #_(get languages language)
                                        {:state start-state
                                         ;:mode "yaml"
                                         :mode "clojure"
                                         :updateListener prn
-                                        :parent @editor})))))
+                                        :parent @editor })))))
       :component-will-unmount (fn [_] (.destroy @view))
       :reagent-render (fn []
-                        [:div
+                        [:div.mb2
                          [:div.ba.ma0.f5.b--black-05.pa2.overflow-auto.editor {:ref #(reset! editor %)}]
-                         [:pre.ba.ma0.f6.code.b--black-05.pa2.pl4.overflow-auto
-                          {:style {:white-space "pre-line"}}
-                          ;; See org mode :results key
-                          (case results
-                            "verbatim" (str @evaled-result)
-                            "value" (str @evaled-result)
-                            "output" @evaled-result
-                            "silent" ""
-                            @evaled-result)
-                          ]])})))
+                         (when @evaled-result 
+                           [:pre.ba.ma0.f6.code.b--black-05.pa2.pl4.overflow-auto
+                            {:style {:white-space "pre-line"}}
+                            ;; See org mode :results key
+                            (case results
+                              "verbatim" (str @evaled-result)
+                              "value" (str @evaled-result)
+                              "output" @evaled-result
+                              "silent" ""
+                              @evaled-result)])])})))
+
 
 (defn link-handler [v _]
   (prn v)
@@ -145,14 +149,17 @@
 
 (def theme
   (merge tachyon-theme
-         {:SRC code-editor
+         {;:SRC code-editor
+          :HEADER1 (fn [v _] [:h1.f3.fw6.f3-ns.lh-title.mt0.mb2 {:title "title-here"} v])
+          :HEADER2 (fn [v _] [:h1.f3.fw6.f3-ns.lh-title.mt0.mb2 {:title "title-here"} v])
+          :LINE :p.f5.f5-ns.lh-copy.mt0
           :LINK :a #_link-handler}))
 
 
-
 ;; put constant data here
 (def site-data
   {:homepage {:intro "Clojure tutorials examples and exploration"}
+   :dslpage {:intro "A domain-specific language (DSL) is a language designed to be used for a specific task or domain, clojure has a rich set of DSL some popular DSL's are listed on this page with example's on usage. "}
    :lorem "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."
    :demos
    {:dsl-demo
@@ -216,14 +223,15 @@
 (defn circle [{:keys [img alt]}]
   [:div.pa4.tc [:img.br-100.ba.h3.w3.dib {:src img :alt alt}]])
 
+
 ;; form one component to render a nav link
-(defn navbar-link [{:keys [href title text] :or {text nil title nil}}]
-  [:a.link.dim.white.dib.mr3 {:key href :href href :title title} text])
+(defn navbar-link [{:keys [href title text key] :or {text nil title nil}}]
+  [:a.link.dim.white.dib.mr3 {:key (or key href) :href href :title title} text])
 
 ;; form one component to render a navbar
 (defn navbar [links]
   [:header.bg-black-90.w-100.ph3.pv3.pv4-ns.ph4-m.ph5-l
-   (into [:nav.f6.fw6.ttu.tracked] (map navbar-link links))])
+   (into [:nav.f6.fw6.ttu.tracked] (mapv navbar-link links))])
 
 ;; form2 component notice the render function takes the same param as the component function
 ;; this is important, you can hit issues if you forget this in form 2 components.
@@ -258,7 +266,7 @@
   [:<>
    [articles
     {:title "Clojure Demos"
-     :body (-> site-data :homepage :intro)
+     :body (-> site-data :dslpage :intro)
      :articles
      [{:title "Hiccup HTML Demo"
        :link (rfe/href ::demo {:page "dsl-demo"})
@@ -357,14 +365,12 @@
 
 ;; top level component contains nav and adds in the select page into a containing element
 ;; we are adding in a style sheet but this will often be done in index.html
-(defn  current-page []
-  [:<>
-   ;;[:link {:rel "stylesheet" :href "https://raw.githubusercontent.com/FarhadG/code-mirror-themes/master/themes/rdark.css"}]
-   ;;[:link {:rel "stylesheet" :href "https://unpkg.com/tachyons@4.12.0/css/tachyons.min.css"}]
-   [navbar [{:href (rfe/href ::frontpage) :title "title here" :text "home"}
-            {:href (rfe/href ::dsl) :text "DSL's"}
-            {:href (rfe/href ::about) :text "About"}
-            {:href (rfe/href ::i-do-not-exist) :text "missing"}]]
+(defn current-page []
+  [:div
+   [navbar [{:href (rfe/href ::frontpage) :title "title here" :text "home" :key "homepage"}
+            {:href (rfe/href ::dsl) :text "DSL's" :key "dsl"}
+            {:href (rfe/href ::about) :text "About" :key "about"}
+            #_{:href (rfe/href ::i-do-not-exist) :text "missing"}]]
    [:main.mt4
     (when-let [view (-> @site-state :current-route :data :view)] [view (-> @site-state :current-route)])]])
 
@@ -384,7 +390,6 @@
   (mount-root-page))
 
 (defn startup! []
-
   (rfe/start!
    (rf/router routes {:data {:coercion rss/coercion}})
    (fn [m] (swap! site-state assoc :current-route m))