diff --git a/project.clj b/project.clj
index 71b4b12..78c9888 100644
--- a/project.clj
+++ b/project.clj
@@ -20,7 +20,7 @@
                  [ring/ring-json "0.5.0"]
                  [hiccup "1.0.5"]
                  ;[joshavg/formulare "0.6.0"]
-
+                 
                  ;; compojure uses old transitive dependencies of ring
                  ;; specifiy them here explicitly so newer versions
                  ;; will be used
@@ -56,7 +56,7 @@
                  [dorothy "0.0.7"]]
 
   :profiles {:dev {:plugins [;; web stuff
-                             [lein-less "1.7.5"]
+                             #_[lein-less "1.7.5"]
 
                              [joshavg/lein-neo4j "0.5.0"]
 
@@ -67,14 +67,12 @@
                              [lein-cloverage "LATEST"]
                              [lein-kibit "LATEST"]
 ;                             [cider/cider-nrepl "0.26.0"]
-]}
+                             ]}
              :uberjar {:aot :all
                        :main wanijo.main}}
 
   :neo4j {:path "neo4j"}
-  :repl-options {:init-ns wanijo.infra.repl}
-  :less {:source-paths ["resources/app/stylesheets"]
-         :target-path "resources/public/css"}
-  :aliases {"uberjar" ["do" ["less" "once"] "uberjar"]}
+  :repl-options {:init-ns wanijo.infra.repl} 
+  :aliases {"uberjar" ["do" #_["less" "once"] "uberjar"]}
   :hiera {:cluster-depth 2}
   :eastwood {:namespaces [:source-paths]})
diff --git a/resources/app/stylesheets/app.less b/resources/public/css/style.css
similarity index 67%
rename from resources/app/stylesheets/app.less
rename to resources/public/css/style.css
index 340be0d..ddef709 100644
--- a/resources/app/stylesheets/app.less
+++ b/resources/public/css/style.css
@@ -1,22 +1,24 @@
-@ci-highlight: Highlight;
-@error-color: #e00;
-@warn-color: #eebc00;
-@accent-color: #efefef;
-@body-background-color: #fcfcfc;
-@background-color: #eee;
-@ci-color: #aaa;
-@border-stack: 1px solid @ci-color;
-@text-padding-v: .2rem;
-@text-padding-h: 1rem;
-@accent-border-width: .3rem;
-@accent-border: @accent-border-width solid @ci-color;
-@element-margin: .6rem;
+:root {
+    --cli-highlight: Highlight;
+    --error-color: #e00;
+    --warn-color: #eebc00;
+    --accent-color: #efefef;
+    --body-background-color: #fcfcfc;
+    --background-color: #eee;
+    --ci-color: #aaa;
+    --border-stack: 1px solid @ci-color;
+    --text-padding-v: .2rem;
+    --text-padding-h: 1rem;
+    --accent-border-width: .3rem;
+    --accent-border: var(--accent-border-width) solid var(--ci-color);
+    --element-margin: .6rem;
+}
 
 body {
     font-family: sans-serif;
     margin: 0;
     padding: 0;
-    background-color: @body-background-color;
+    background-color: var(--body-background-color);
 }
 
 a:link,
@@ -40,11 +42,11 @@ img, svg {
 }
 
 .thin-border {
-    border: @border-stack;
+    border: var(--border-stack);
 }
 
 .__icon {
-    color: @ci-highlight;
+    color: var(--ci-highlight);
     font-weight: bold;
 }
 
@@ -65,11 +67,11 @@ img, svg {
 
     h2 {
         font-size: 1.3rem;
-        border-bottom: 1px solid @ci-highlight;
+        border-bottom: 1px solid var(--ci-highlight);
     }
 
     .attr-type-markdown {
-        border: 1px solid @ci-color;
+        border: 1px solid var(--ci-color);
         border-radius: .5rem;
         padding: 1rem;
 
@@ -98,7 +100,7 @@ img, svg {
     }
 
     header, footer, main, nav, aside {
-        padding: @text-padding-v @text-padding-h;
+        padding: var(--text-padding-v) var(--text-padding-h);
     }
 
     header {
@@ -106,24 +108,23 @@ img, svg {
         display: grid;
         grid-template-columns: 40% 60%;
         align-items: center;
-        margin: 0 @element-margin;
-        //noinspection CssUnknownTarget
+        margin: 0 var(--element-margin);
         background-image: url("/img/logo-full-flipped.svg");
         background-size: contain;
         background-position: right;
         background-origin: content-box;
         background-repeat: no-repeat;
-        border-bottom: 1px solid @ci-color;
+        border-bottom: 1px solid var(--ci-color);
 
         .app-title {
             grid-column: 1;
             font-size: 1.5rem;
 
             .app-title__hello {
-		font-size: 1rem;
-		margin-left: @text-padding-h;
-		font-weight: normal;
-		font-style: italic;
+                font-size: 1rem;
+                margin-left: var(--text-padding-h);
+                font-weight: normal;
+                font-style: italic;
             }
         }
 
@@ -132,22 +133,22 @@ img, svg {
             grid-column: 2;
 
             .header-content__link {
-		display: inline-block;
-		margin-right: @accent-border-width;
+                display: inline-block;
+                margin-right: var(--accent-border-width);
             }
         }
     }
 
     nav {
         grid-area: nav;
-        padding-right: @element-margin;
-        border-right: 1px solid @ci-color;
-        margin-top: @element-margin;
-        margin-left: @element-margin;
+        padding-right: var(--element-margin);
+        border-right: 1px solid var(--ci-color);
+        margin-top: var(--element-margin);
+        margin-left: var(--element-margin);
 
         h2::before {
             content: "▤ ";
-            color: @ci-highlight;
+            color: var(--ci-highlight);
         }
 
         h2 {
@@ -211,12 +212,12 @@ form, .sub-form {
         grid-column: 1 e("/") 3;
         grid-template-columns: 30% 70%;
         grid-auto-flow: row;
-        margin-bottom: @text-padding-h;
+        margin-bottom: var(--text-padding-h);
     }
 
     label, input, select, textarea, .flash {
         margin-bottom: .7rem;
-        padding: @text-padding-v @text-padding-h / 2;
+        padding: var(--text-padding-v) calc(var(--text-padding-h) / 2);
     }
 
     textarea {
@@ -243,7 +244,7 @@ form, .sub-form {
 .flash {
     grid-column: 1 e("/") 3;
     .thin-border;
-    border-left-width: @accent-border-width;
+    border-left-width: var(--accent-border-width);
     padding: .7rem;
 
     .flash__field {
@@ -257,10 +258,10 @@ form, .sub-form {
 
 .flash--error {
     .flash;
-    border-color: @error-color;
+    border-color: var(--error-color);
 
     .flash__heading--error {
-        background-color: @error-color;
+        background-color: var(--error-color);
         color: white;
         margin: -.7rem -.7rem 0;
     }
@@ -268,10 +269,10 @@ form, .sub-form {
 
 .flash--warn {
     .flash;
-    border-color: @warn-color;
+    border-color: var(--warn-color);
 
     .flash__heading--error {
-        background-color: @warn-color;
+        background-color: var(--warn-color);
         color: white;
         margin: -.7rem -.7rem 0;
     }
@@ -303,11 +304,14 @@ table {
     thead {
         position: sticky;
         top: 0;
-        background-color: @body-background-color;
+        background-color: var(--body-background-color);
 
         th {
-            padding: @text-padding-v @text-padding-h
-                @text-padding-v + .3rem @text-padding-v;
+            padding:
+                var(--text-padding-v)
+                var(--text-padding-h)
+                calc(var(--text-padding-v) + .3rem)
+                var(--text-padding-v);
         }
 
         th[data-sort=desc]::after {
@@ -323,8 +327,10 @@ table {
 
     tbody {
         td {
-            border-bottom: @border-stack;
-            padding: @text-padding-v * 2 @text-padding-h / 2h;
+            border-bottom: var(--border-stack);
+            padding:
+                calc(var(--text-padding-v) * 2)
+                calc(var(--text-padding-h) / 2h);
         }
 
         input[type=submit] {
@@ -332,7 +338,7 @@ table {
         }
 
         tr:hover {
-            background-color: @accent-color;
+            background-color: var(--accent-color);
         }
     }
 }
@@ -362,7 +368,7 @@ table {
     }
 
     button, input {
-        margin-right: @element-margin;
+        margin-right: var(--element-margin);
         margin-bottom: 0;
     }
 }
@@ -379,31 +385,31 @@ table {
 }
 
 .single-tag {
-    border: 1px solid @ci-color;
-    border-left: .5rem solid @ci-highlight;
+    border: 1px solid var(--ci-color);
+    border-left: .5rem solid var(--ci-highlight);
     border-radius: .5rem;
     padding: .1rem .4rem;
 }
 
 .vis-canvas {
-    border: 1px solid @ci-highlight;
+    border: 1px solid var(--ci-highlight);
     height: 45rem;
 }
 
 @media (max-width: 768px) {
 
     .grid {
-	grid-template-columns: auto;
-	grid-template-areas: "header" "nav" "main" "footer";
+        grid-template-columns: auto;
+        grid-template-areas: "header" "nav" "main" "footer";
 
-	header {
-	    grid-template-columns: auto;
+        header {
+            grid-template-columns: auto;
 
-	    .header-content {
-		grid-column: 1;
-		text-align: center;
-	    }
-	}
+            .header-content {
+                grid-column: 1;
+                text-align: center;
+            }
+        }
     }
 
 }
diff --git a/src/wanijo/infra/view.clj b/src/wanijo/infra/view.clj
index ab97f6d..08815ba 100644
--- a/src/wanijo/infra/view.clj
+++ b/src/wanijo/infra/view.clj
@@ -42,7 +42,7 @@
       [:meta {:name "viewport"
               :content "width=device-width,initial-scale=1,shrink-to-fit=no"}]
       [:title (h (str (when title (str title " - ")) "wanijo"))]
-      (include-css "/css/app.css")
+      (include-css "/css/style.css")
       (include-js "/js/scripts.js")
       head]
      [:body