diff --git a/components/nav.html b/components/nav.html
index 6ac5e77..9f88a3b 100644
--- a/components/nav.html
+++ b/components/nav.html
@@ -1,11 +1,21 @@
-{{#each pages as page}}
-<li><a href="#{{page.id}}">{{page.title}}</a></li>
-{{/each}}
+
+    <div class="navbar">
+    <div class="navbar-section">
+            {{#each pages as page}}
+                <a class="btn btn-link" href="#{{page.id}}">{{page.title}}</a>
+            {{/each}}
+    </div>
+    <div class="navbar-section">
+    </div>
+    </div>
 
 <script>
+    import 'spectre.css/dist/spectre.min.css';
     export default {
         data() {
-            return {};
+            return {
+                searchResult: ''
+            };
         }
     }
 </script>
diff --git a/package-lock.json b/package-lock.json
index 47d6db6..1e8ad65 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2084,6 +2084,11 @@
       "integrity": "sha1-yd96NCRZSt5r0RkA1ZZpbcBrrFc=",
       "dev": true
     },
+    "spectre.css": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/spectre.css/-/spectre.css-0.5.0.tgz",
+      "integrity": "sha1-aP4MXv2J60aNSaedipTmNPo52E4="
+    },
     "stack-trace": {
       "version": "0.0.10",
       "resolved": "https://registry.npmjs.org/stack-trace/-/stack-trace-0.0.10.tgz",
@@ -2128,6 +2133,12 @@
         "pdenodeify": "0.1.0"
       }
     },
+    "steal-css": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/steal-css/-/steal-css-1.3.1.tgz",
+      "integrity": "sha1-1nAGuykxCDkv/PfTHz5ugydReHI=",
+      "dev": true
+    },
     "steal-parse-amd": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/steal-parse-amd/-/steal-parse-amd-1.0.0.tgz",
diff --git a/package.json b/package.json
index c2210d0..a3836de 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
   "license": "ISC",
   "dependencies": {
     "can-define": "^1.5.4",
+    "spectre.css": "^0.5.0",
     "steal": "^1.6.2",
     "svelte": "^1.49.1"
   },
@@ -19,7 +20,8 @@
       "html": "steal-svelte-plugin"
     },
     "plugins": [
-      "steal-svelte-plugin"
+      "steal-svelte-plugin",
+      "steal-css"
     ],
     "bundle": [
       "steal-svelte/pages/circle.html",
@@ -29,6 +31,7 @@
     ]
   },
   "devDependencies": {
+    "steal-css": "^1.3.1",
     "steal-tools": "^1.10.0"
   }
 }
diff --git a/pages/home.html b/pages/home.html
index f04e365..f334d11 100644
--- a/pages/home.html
+++ b/pages/home.html
@@ -2,9 +2,12 @@ <h1>Home</h1>
 <p>This page demonstrates a basic example of progressively loaded svelte app.</p>
 <h3>search for some data!</h3>
 
-<input bind:value="viewModel.search" />
+<div class="input-group input-inline">
+        <input bind:value="viewModel.search" class="form-input" type="text" placeholder="search" data-cip-id="cIPJQ342845639">
+        <button class="btn btn-primary input-group-btn">Search</button>
+     </div>
 
-<table>
+<table class="table">
     {{#each viewModel.data as row, index}}
         <tr on:click="select(row, viewModel)"><td>{{row.code}}</td><td>{{row.name}}</td></tr>
     {{/each}}