diff --git a/resources/public/index.html b/resources/public/index.html
index 6597f18..fffc482 100644
--- a/resources/public/index.html
+++ b/resources/public/index.html
@@ -8,13 +8,18 @@
       content="width=device-width, initial-scale=1.0, shrink-to-fit=no"
     />
     <title>Clojure demos</title>
+    <meta
+      name="description"
+      content="Examples & Guides on using various libraries and technologies with in the clojure eco system's"
+    />
     <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
     <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
     <link
       rel="stylesheet"
       type="text/css"
-      href="https://unpkg.com/tachyons@4.12.0/css/tachyons.min.css"
+      href="ohttps://unpkg.com/tachyons@4.12.0/css/tachyons.min.css"
     />
+    <script src="https://cdn.tailwindcss.com"></script>
     <link
       href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&family=Roboto&display=swap"
       rel="stylesheet"
@@ -109,7 +114,7 @@
     </script>
   </head>
 
-  <body class="f5 sans-serif">
+  <body>
     <div id="app">loading here</div>
     <script
       src="/cljs-out/main_bundle.js"
diff --git a/src/clojure_demo/core.cljs b/src/clojure_demo/core.cljs
index 9b62f9d..e25e291 100644
--- a/src/clojure_demo/core.cljs
+++ b/src/clojure_demo/core.cljs
@@ -23,6 +23,7 @@
    [sci.configs.reagent.reagent :as sci-reagent]
    [sci.configs.tonsky.datascript :as sci-datascript]
    [sci.core :as sci]
+   [clojure-demo.tailwind-theme :refer [tailwind-theme]]
    [spec-tools.data-spec :as ds]))
 
 (def languages
@@ -97,17 +98,15 @@
     (reagent/create-class
      {:display-name "Error Boundary"
 ;      :component-did-catch (fn [this err info] #_(reset! err-state [err info]))
-       :get-derived-state-from-error (fn [e]
-                                       (reset! err-state e #_[err info])
-                                            #js {})
+      :get-derived-state-from-error (fn [e]
+                                      (reset! err-state e #_[err info])
+                                      #js {})
       :reagent-render (fn [children]
-                        (if @err-state 
+                        (if @err-state
                           [:div (str @err-state)]
                           children
                           ;(into [:<>] children)
                           ))})))
-
-
 (defn code-editor
   [{:keys [exports class results]} content]
   (let [language class
@@ -148,7 +147,7 @@
       :component-will-unmount (fn [_] (.destroy @view))
       :reagent-render (fn []
                         (if exports
-                          nil ;[:<>]
+                          nil
                           [:div.mb2
                            [:div.ba.ma0.f5.b--black-05.pa2.overflow-auto.editor {:ref #(reset! editor %)}]
                            (when @evaled-result
@@ -163,7 +162,7 @@
                                  "silent" ""
                                  @evaled-result)]])]))})))
 
-(def theme
+(def theme-tachyon
   (merge tachyon-theme
          {:SRC code-editor
           :HEADER1 (fn [v _]  [:h1.f2.fw6.f3-ns.lh-title.mt0.mb2 {:id (slugify v)} [:a {:name (slugify v)} v]])
@@ -173,7 +172,17 @@
           :BULLETS :ul.mt0
           :LINK :a #_link-handler}))
 
-(def theme-toc
+(def theme
+  (merge tailwind-theme
+         {:SRC code-editor
+          :HEADER1 (fn [v _]  [:h1.text-2xl.fw6.lh-title.mt0.mb2 {:id (slugify v)} [:a {:name (slugify v)} v]])
+          :HEADER2 (fn [v _] [:h2.text-xl.fw6.lh-title.mt0.mb2 {:id (slugify v)} [:a {:name (slugify v)} v]])
+          :HEADER3 (fn [v _] [:h2.text-base.lh-title.mt0.mb2 {:id (slugify v)} [:a {:name (slugify v)} v]])
+          :LINE :p.f5.f5-ns.lh-copy.mt0
+          :BULLETS :ul.mt0
+          :LINK :a #_link-handler}))
+
+(def theme-toc-tachyon
   (merge tachyon-theme
          {:HEADER1 (fn [v _] [:li [:a {:href (str "#" (slugify v))}
                                    [:span.f4.fw6.f3-ns.lh-title.mt0.mb2 v]]])
@@ -188,6 +197,21 @@
           :HEADER6 (fn [v _] [:li.ml10 [:a {:href (str "#" (slugify v))}
                                         [:span.f6.fw6.f5-ns.lh-title.mt0.mb2 v]]])}))
 
+(def theme-toc
+  (merge tailwind-theme
+         {:HEADER1 (fn [v _] [:li [:a {:href (str "#" (slugify v))}
+                                   [:span.text-xl.fw6.lh-title.mt0.mb2 v]]])
+          :HEADER2 (fn [v _] [:li.ml-4 [:a {:href (str "#" (slugify v))}
+                                        [:span.text-lg.fw6.lh-title.mt0.mb2 v]]])
+          :HEADER3 (fn [v _] [:li.ml-8 [:a {:href (str "#" (slugify v))}
+                                        [:span.text-base.fw6.lh-title.mt0.mb2 v]]])
+          :HEADER4 (fn [v _] [:li.ml-12 [:a {:href (str "#" (slugify v))}
+                                         [:span.text-sm.fw6.lh-title.mt0.mb2 v]]])
+          :HEADER5 (fn [v _] [:li.ml-26 [:a {:href (str "#" (slugify v))}
+                                         [:span.text-xs.fw6.f5-ns.lh-title.mt0.mb2 v]]])
+          :HEADER6 (fn [v _] [:li.ml-30 [:a {:href (str "#" (slugify v))}
+                                         [:span.text-xs.fw6.f5-ns.lh-title.mt0.mb2 v]]])}))
+
 ;; put constant data here
 (def site-data
   {:homepage {:intro "Clojure tutorials examples and exploration"}
@@ -198,16 +222,38 @@
                       :key ::dialects
                       :demos [{:title "Clojure"
                                :description "The original language running on the jvm with access to the java eco system"
-                                :page "clojure-info"}
-                               {:title "Clojurescript"
-                                :description "Clojure running in the browser or on top of node, with access to the js eco system."
-                                :page "clojurescript-info"}
-                               {:title "ClojureCLR"
-                                :description "Clojure running on microsofts CLR with access to .net ecosystem"
-                                :page "clojureclr-info"}
-                               {:title "ClojureDart"
-                                :description "Clojure for dart, use clojure to build apps using flutter"
-                                :page "clojuredart-info"}]}
+                               :icon-image "https://clojure.org/images/clojure-logo-120b.png"
+                               :page "clojure-info"}
+                              {:title "Clojurescript"
+                               :description "Clojure running in the browser or on top of node, with access to the js eco system."
+                               :icon-image "https://clojurescript.org/images/cljs-logo-60b.png"
+                               :page "clojurescript-info"}
+                              {:title "ClojureCLR"
+                               :description "Clojure running on microsofts CLR with access to .net ecosystem"
+                               :icon-image "https://clojure.org/images/clojure-logo-120b.png"
+
+                               :page "clojureclr-info"}
+                              {:title "ClojureDart"
+                               :description "Clojure for dart, use clojure to build apps using flutter"
+                               :page "clojuredart-info"}]}
+           :dsl {:title "DSL's"
+                 :key ::dsl
+                 :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. "
+                 :demos [{:title "Hiccup HTML Demo"
+                          :page "hiccup-dsl-demo"
+                          :description "Hiccup is a DSL for generating HTML it uses data structures over strings to generate html, this makes it far easier to dynamically generate html by using the language constructs to manipulate the tree."
+                         ; :link (rfe/href ::demo {:page "hiccup-dsl-demo"})
+                          :icon-image "https://miro.medium.com/max/1400/1*CEYFj5R57UFyCXts2nsBqA.png"}
+                         {:title "Honey SQL Demo"
+                          :page "honey-sql-demo"
+                          :description "Similar to honey but for SQL allows you to split apart your complex queries into parts and compose them together."
+                       ;   :link (rfe/href ::demo {:page "honey-dsl-demo"})
+                          :icon-image "https://miro.medium.com/max/1400/1*CEYFj5R57UFyCXts2nsBqA.png"}
+                         {:title "Datalog Demo"
+                          :page "datalog-demo"
+                          :description "Datalog is a popular DSL with in the clojure for querying deductive database system's"
+                       ;   :link (rfe/href ::demo {:page "datalog-demo"})
+                          :icon-image "https://raw.githubusercontent.com/tonsky/datascript/master/extras/logo.svg"}]}
            :devops {:title "Deployment & testing"
                     :intro "Running, Testing and deploying your software in a CI pipeline"
                     :key ::devops
@@ -222,21 +268,7 @@
            :terminology {:title "Terminology"
                          :intro ""
                          :key ::terminology}
-           :dsl {:title "DSL's"
-                 :key ::dsl
-                 :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. "
-                 :demos [{:title "Hiccup HTML Demo"
-                          :page "hiccup-dsl-demo"
-                         ; :link (rfe/href ::demo {:page "hiccup-dsl-demo"})
-                          :icon-image "https://miro.medium.com/max/1400/1*CEYFj5R57UFyCXts2nsBqA.png"}
-                         {:title "Honey SQL Demo"
-                          :page "honey-sql-demo"
-                       ;   :link (rfe/href ::demo {:page "honey-dsl-demo"})
-                          :icon-image "https://miro.medium.com/max/1400/1*CEYFj5R57UFyCXts2nsBqA.png"}
-                         {:title "Datalog Demo"
-                          :page "datalog-demo"
-                       ;   :link (rfe/href ::demo {:page "datalog-demo"})
-                          :icon-image "https://raw.githubusercontent.com/tonsky/datascript/master/extras/logo.svg"}]}}
+           }
    :demos
    {:hiccup-dsl-demo
     {:file "documents/hiccup-dsl-demo.org" :git-link "https://github.com/atomjuice/dsl-demo"}
@@ -270,49 +302,44 @@
 ;; form one component to render article tiles
 (defn articles [{:keys [title body articles]}]
   [:section.mw7.center.avenir
-   [:h2.baskerville.fw1.ph3.ph0-l title]
-   (when body [:p body])
+   [:h2.text-4xl.mt-4.mb-4 title]
+   (when body [:p.mb-8 body])
    (map (fn [{:keys [title author link description img-src img-alt]}]
           [:article.bt.bb.b--black-10 {:key title}
-           [:a.db.pv4.ph3.ph0-l.no-underline.black.dim {:href link}
-            [:div.flex.flex-column.flex-row-ns
+           [:a {:href link}
+            [:div.flex.flex-column.flex-row-ns.p-4
              (when img-src
-               [:div.pr3-ns.mb4.mb0-ns.w-100.w-40-ns
-                [:img.db {:src img-src :alt img-alt}]])
-             [:div.w-100.w-60-ns.pl3-ns
-              [:h1.f3.fw1.baskerville.mt0.lh-title title]
-              [:p.f6.f5-l.lh-copy description]
-              [:p.f6.lh-copy.mv0 author]]]]])
+               [:div.flex-none #_{:class "w-1/3"}
+                [:img.w-48 #_h-24.block {:src img-src :alt img-alt}]])
+
+             [:div.ml-4.flex-grow #_{:class "w-2/3"}
+              [:h1.text-2xl title]
+              [:p description]
+              [:p author]]]]])
         articles)])
 
-
-(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 key] :or {text nil title nil}}]
-  [:a.link.dim.white.dib.mr3 {:key (or key href) :href href :title title} text])
+  [:a.link.m-2 {:key (or key href) :class "hover:text-grey-200" :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] (mapv navbar-link links))])
+  [:header.text-white.bg-zinc-900.p-6.pl-12.w-full
+   (into [:nav.uppercase.font-medium.text-sm] (mapv navbar-link links))]
+  #_[:header.bg-black-90.w-100.ph3.pv3.pv4-ns.ph4-m.ph5-l
+     (into [:nav.f6.fw6.ttu.tracked] (mapv navbar-link links))])
 
 (defn footer []
-  [:footer.bg-near-black.white-80.pv4.ph3.ph5-m.ph6-l.mid-gray.w-full
-   [:a.f6.dib.ph2.link.mid-gray.dim
-    {:target "_blank" :href "https://matrix.to/#/@oly:matrix.org"}
-    "Contact me"]])
-
-;; 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.
-(defn my-component [title value]
-  (let [local-state (reagent/atom value)]
-    (fn [title]
-      [:h1 {:class (when @local-state "hide")
-            :on-click (fn [] (swap! local-state inc))} (str title " " @local-state)])))
-
-;; form one homepage component
+  [:footer.bg-zinc-800.text-slate-400.p-8.m-auto.w-full
+   [:div.m-auto {:class "w-4/5"}
+    [:a.hover:text-slate-200
+     {:target "_blank" :href "https://matrix.to/#/@oly:matrix.org"}
+     "Contact me"]]]
+  #_[:div
+     [:footer.bg-near-black.white-80.pv4.ph3.ph5-m.ph6-l.mid-gray.w-full
+      [:a.f6.dib.ph2.link.mid-gray.dim
+       {:target "_blank" :href "https://matrix.to/#/@oly:matrix.org"}
+       "Contact me"]]])
 
 (defn home-page []
   [:<>
@@ -333,7 +360,7 @@
   (let [group (keyword (name (:name (:data route))))]
     [:<>
      [articles
-      {:title (-> site-data :pages group :title) 
+      {:title (-> site-data :pages group :title)
        :body (-> site-data :pages group :intro)
        :articles
        (mapv (fn fmt-map [demo]
@@ -345,12 +372,7 @@
 
 (defn dialects-page [route]
   [:<>
-   [grouped-page route #_ (keyword (name (:name (:data route))))]])
-
-#_(defn dsl-page [route]
-  [:<>
-   [grouped-page route]
-   ])
+   [grouped-page route #_(keyword (name (:name (:data route))))]])
 
 (def toc (partial contains? (into #{} (map keyword [:HEADER1 :HEADER2 :HEADER3 :HEADER4 :HEADER5 :HEADER6]))))
 (def org-code (partial contains? (into #{} (map keyword [:SRC]))))
@@ -378,45 +400,9 @@
    :code (filter (fn filter-code [tag] (org-code (first tag))) dsl)
    :body (filter (fn filter-body [tag] (body (first tag))) dsl)})
 
-;; form two component render demo
-;;(h/org->split (parse document1))
-(defn demo-page [route]
-  (let [demo-key (keyword (-> route :parameters :path :page))
-        content (reagent/atom {})]
-    (GET (str "/" (-> site-data :demos demo-key :file))
-      {:response-format (raw-response-format)
-       :handler (fn [response]
-                  ;;(prn (org->replacements theme (parse response) ))
-                  ;;[:LINE "" [:LINK {:href "https://github.com/weavejester/hiccup"} "https://github.com/weavejester/hiccup"]]
-                  (->> response
-                       parse
-                       org->split2
-                       (reset! content)))})
-
-    (fn [route]
-      (if @content
-        [:main.mt4.mw7.center.avenir
-         [:h1.f3.f2-ns (:content (last (first (:header @content))))]
-         [:div.mw7.center.avenir
-          (into [:ol] (org->replacements theme-toc (:toc @content)))]
-         [:p "The code in these examples is evaluated when modified, you can highlight a partial expression to evalute the selection, You can also download the code as a tar if you like and use it in your favourite editor."]
-         [:a.f6.link.dim.ph3.pv2.mb2.dib.white.bg-dark-blue
-          {:download (str (slugify (:content (last (first (:header @content))))) ".tar")
-           :title (:content (last (first (:header @content))))
-           :href (.createObjectURL
-                  js/URL
-                  (js/Blob. #js [(build-file-tar-hm
-                                  (build-tarts-map
-                                   (:code @content)))]
-                            {:type "application/tar"}))}
-          "Download Code"]
-         [:div.mw7.center.avenir
-          (into [:div] (org->replacements theme (:body @content)))]]
-        [:<>]))))
-
 ;; form one render about page component
 (defn about-page []
-  [:main.mt4
+  [:div
    [:section.mw7.center.avenir
     [:h1 "Clojure library examples to aid learning"]
     [:p ""]
@@ -424,7 +410,6 @@
               :description (-> site-data :lorem)
               :tagline "https://tachyons.io/components/"}]]])
 
-
 ;; define our page routes passed into reitit later on
 (def routes
   [["/"
@@ -456,11 +441,11 @@
     {:name ::about
      :view about-page}]
 
-   ["/demo/:page"
-    {:name ::demo
-     :view demo-page
-     :parameters {:path {:page string?}
-                  :query {(ds/opt :foo) keyword?}}}]])
+   #_["/demo/:page"
+      {:name ::demo
+       :view demo-page
+       :parameters {:path {:page string?}
+                    :query {(ds/opt :foo) keyword?}}}]])
 
 ;; 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
@@ -473,7 +458,7 @@
             [;;{:href (rfe/href ::dsl) :text "DSL's" :key "dsl"}
              {:title "Domain Specific Languages" :href (rfe/href ::about) :text "About" :key "about"}
              #_{:href (rfe/href ::i-do-not-exist) :text "missing"}])]
-   [:main.ma4
+   [:main.m-auto {:class "w-3/5"}
     (when-let [view (-> @site-state :current-route :data :view)] [view (-> @site-state :current-route)])]
    [footer]])
 
diff --git a/src/clojure_demo/tailwind_theme.cljs b/src/clojure_demo/tailwind_theme.cljs
new file mode 100644
index 0000000..18f470b
--- /dev/null
+++ b/src/clojure_demo/tailwind_theme.cljs
@@ -0,0 +1,51 @@
+(ns clojure-demo.tailwind-theme)
+
+(def tailwind-theme
+  {:TITLE :header.f2.fw6.f2-ns.lh-title.mt0.mb2
+   ;:DESCRIPTION :p
+   :HEADER1 :h1.f3.fw6.f3-ns.lh-title.mt0.mb2
+   :HEADER2 :h2.f3.fw6.f3-ns.lh-title.mt0.mb2
+   :HEADER3 :h3
+   :HEADER4 :h4
+   :HEADER5 :h5
+   :TODO :span
+   :VERBATIM :code
+   :CODE :code
+
+   :MAIN :main
+
+   :THUMBNAIL nil
+   :DESCRIPTION :meta ;(fn [v] [:span {:name (str v)} ])
+   :CATEGORY :meta ;(fn [v] [:span {:name (str v)} ])
+   :SLUG :meta ;(fn [v] [:span {:name (str v)} ])
+   :DATE :meta ;(fn [v] [:span {:name (str v)} ])
+   :FILETAGS :meta ;(fn [v] [:span {:name (str v)} ])
+   :NAME :meta ;(fn [v] [:span {:name (str v)} ])
+
+   :TABLE :table.collapse.ba.br2.b--black-10.pv2.ph3
+   :TBODY :tbody
+   :THEAD :thead
+   :TR :tr.striped--light-gray
+   :TD :td.pv2.ph3
+
+   ;;TODO this is a src attrib probably worth handling this differently
+   ;;perhaps allow custom functions instead of a simple replace
+   :LANGUAGE :class
+   :SRC :pre.bg-near-black.silver.pa2.hljs.roboto.overflow-auto.klipse
+   :RESULTS :pre.bg-near-black.silver.pa2.hljs.roboto.overflow-auto
+   :EXAMPLE :pre.bg-near-black.silver.pa2.hljs.roboto.overflow-auto
+   :COMMENT nil
+   :CAPTION :span
+   :I :i
+   :U :u
+   :B :b
+   ;;:LINK link-handler
+   :IMG :img
+   ;; probably remove these 2
+   :A :a
+   :P :p
+   :BR :br
+   :LINE :p.f5.f4-ns.lh-copy.mt0
+   :BULLETS-ORDERED :ol
+   :BULLETS :ul
+   :BULLET :li})
diff --git a/src/clojure_demos/tailwind_theme.cljs b/src/clojure_demos/tailwind_theme.cljs
new file mode 100644
index 0000000..4648fbf
--- /dev/null
+++ b/src/clojure_demos/tailwind_theme.cljs
@@ -0,0 +1,51 @@
+(ns clojure-demos.tailwind-theme)
+
+(def tailwind-theme
+  {:TITLE :header.f2.fw6.f2-ns.lh-title.mt0.mb2
+   ;:DESCRIPTION :p
+   :HEADER1 :h1.f3.fw6.f3-ns.lh-title.mt0.mb2
+   :HEADER2 :h2.f3.fw6.f3-ns.lh-title.mt0.mb2
+   :HEADER3 :h3
+   :HEADER4 :h4
+   :HEADER5 :h5
+   :TODO :span
+   :VERBATIM :code
+   :CODE :code
+
+   :MAIN :main
+
+   :THUMBNAIL nil
+   :DESCRIPTION :meta ;(fn [v] [:span {:name (str v)} ])
+   :CATEGORY :meta ;(fn [v] [:span {:name (str v)} ])
+   :SLUG :meta ;(fn [v] [:span {:name (str v)} ])
+   :DATE :meta ;(fn [v] [:span {:name (str v)} ])
+   :FILETAGS :meta ;(fn [v] [:span {:name (str v)} ])
+   :NAME :meta ;(fn [v] [:span {:name (str v)} ])
+
+   :TABLE :table.collapse.ba.br2.b--black-10.pv2.ph3
+   :TBODY :tbody
+   :THEAD :thead
+   :TR :tr.striped--light-gray
+   :TD :td.pv2.ph3
+
+   ;;TODO this is a src attrib probably worth handling this differently
+   ;;perhaps allow custom functions instead of a simple replace
+   :LANGUAGE :class
+   :SRC :pre.bg-near-black.silver.pa2.hljs.roboto.overflow-auto.klipse
+   :RESULTS :pre.bg-near-black.silver.pa2.hljs.roboto.overflow-auto
+   :EXAMPLE :pre.bg-near-black.silver.pa2.hljs.roboto.overflow-auto
+   :COMMENT nil
+   :CAPTION :span
+   :I :i
+   :U :u
+   :B :b
+   :LINK link-handler
+   :IMG :img
+   ;; probably remove these 2
+   :A :a
+   :P :p
+   :BR :br
+   :LINE :p.f5.f4-ns.lh-copy.mt0
+   :BULLETS-ORDERED :ol
+   :BULLETS :ul
+   :BULLET :li})
