diff --git a/.gitmodules b/.gitmodules
new file mode 100644
index 0000000..4a36cd3
--- /dev/null
+++ b/.gitmodules
@@ -0,0 +1,3 @@
+[submodule "public/css/spectre"]
+	path = public/css/spectre
+	url = https://github.com/picturepan2/spectre
diff --git a/grado.nimble b/grado.nimble
index 6be5838..5ee0c22 100644
--- a/grado.nimble
+++ b/grado.nimble
@@ -14,7 +14,10 @@ bin           = @["app"]
 requires "nim >= 2.0.0"
 requires "karax >= 1.2.2"
 requires "prologue >= 0.6.4"
+requires "sass >= 0.2.0"
+requires "kdl >= 2.0.1"
 
 task frontend, "Compiles the frontend to JavaScript":
+  exec "nimble c -r --mm:refc src/buildcss"
   exec "nim js --outdir:public/js src/frontend"
 
diff --git a/public/css/spectre b/public/css/spectre
new file mode 160000
index 0000000..8847251
--- /dev/null
+++ b/public/css/spectre
@@ -0,0 +1 @@
+Subproject commit 8847251d71b4dac27e8407cbdb71ae89ce156a43
diff --git a/public/css/style.css b/public/css/style.css
deleted file mode 100644
index ebb33e4..0000000
--- a/public/css/style.css
+++ /dev/null
@@ -1,10 +0,0 @@
-body {
-	margin: 0;
-	background:#0C0D11;
-	color: white;
-}
-
-html, body, #ROOT {
-	height: 100%;
-/*	width: 100%;*/
-}
diff --git a/public/css/style.sass b/public/css/style.sass
new file mode 100644
index 0000000..4e1d05b
--- /dev/null
+++ b/public/css/style.sass
@@ -0,0 +1,14 @@
+// @import "custom-style"
+
+// Import full Spectre source code
+@import "spectre/src/spectre"
+
+body
+	margin: 0
+	background:#0C0D11
+	color: white
+
+
+html, body, #ROOT
+	height: 100%
+/*	width: 100%;*/
diff --git a/src/buildcss.nim b/src/buildcss.nim
new file mode 100644
index 0000000..5ec3309
--- /dev/null
+++ b/src/buildcss.nim
@@ -0,0 +1,33 @@
+import std/os
+import sass
+
+import config as _
+
+proc buildCSS*(cssFilename = "style") =
+  let publicLoc = "public"
+  var includePaths: seq[string] = @[]
+  # Check for a styles override.
+  var hostname = config.hostname
+  if not dirExists(hostname):
+    hostname = "localhost.local"
+
+  let dir = getCurrentDir() / hostname / "public"
+  includePaths.add(dir / "css")
+  createDir(publicLoc / "images")
+  let logo = publicLoc / "images" / "logo.png"
+  removeFile(logo)
+  createSymlink(
+    dir / "images" / "logo.png",
+    logo
+  )
+
+  let cssLoc = publicLoc / "css"
+  sass.compileFile(
+    cssLoc / (cssFilename & ".sass"),
+    cssLoc / (cssFilename & ".css"),
+    includePaths=includePaths
+  )
+
+when isMainModule:
+  buildCSS()
+  echo("CSS Built successfully")
\ No newline at end of file
diff --git a/src/config.kdl b/src/config.kdl
new file mode 100644
index 0000000..f151554
--- /dev/null
+++ b/src/config.kdl
@@ -0,0 +1,4 @@
+title "Grado"
+appPath "/"
+port 8081
+hostname "hostname.com"
diff --git a/src/config.nim b/src/config.nim
index e40c246..b2593f0 100644
--- a/src/config.nim
+++ b/src/config.nim
@@ -1,5 +1,12 @@
-const
-  title* {.define.} = "Grado"
-  appPath* {.define.} = "/" # Path where the app is: https://www.example.com/ or https://www.example.com/app
-  port* {.define.} = 8081
+import std/os
+import kdl, kdl/[decoder]
 
+type
+  Config* = object
+    title*: string
+    appPath*: string # Path where the app is: https://www.example.com/ or https://www.example.com/app
+    port*: int
+    hostname*: string
+
+const configPath* {.define.} = currentSourcePath.parentDir() / "config.kdl"
+const config* = configPath.parseKdlFile().decodeKdl(Config)
diff --git a/src/frontend/routes.nim b/src/frontend/routes.nim
index 68ced0b..6a1d085 100644
--- a/src/frontend/routes.nim
+++ b/src/frontend/routes.nim
@@ -4,7 +4,7 @@ import std/[tables, uri, dom]
 import karax/[karaxdsl, vdom]
 
 import patterns, utils
-from ../config import nil
+import ../config as _
 
 type
   Params* = Table[string, string]