diff --git a/client/index.html b/client/index.html
index 03ef865..c7e6c61 100644
--- a/client/index.html
+++ b/client/index.html
@@ -1,8 +1,12 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="utf-8" />
-    <title>Trunk Template</title>
+    <meta charset="utf-8"/>
+    <meta content="width=device-width, initial-scale=1" name="viewport">
+    <title>Personal Tracker</title>
+    <link data-trunk href="index.scss" rel="scss">
 </head>
-<body></body>
+<body>
+<noscript>Javascript is required to use this website.</noscript>
+</body>
 </html>
diff --git a/client/index.scss b/client/index.scss
new file mode 100644
index 0000000..ddbf4bb
--- /dev/null
+++ b/client/index.scss
@@ -0,0 +1,27 @@
+html, body {
+  margin: 0;
+  height: 100%;
+}
+
+#container {
+  height: 100%;
+
+  display: flex;
+  flex-direction: column;
+}
+
+header {
+  text-align: center;
+}
+
+header > h1 {
+  margin: 0;
+}
+
+main {
+  flex: 1;
+}
+
+footer {
+  text-align: center;
+}
\ No newline at end of file
diff --git a/client/src/main.rs b/client/src/main.rs
index d6821ad..465b95a 100644
--- a/client/src/main.rs
+++ b/client/src/main.rs
@@ -2,23 +2,19 @@ use yew::prelude::*;
 
 #[function_component]
 fn App() -> Html {
-    let counter = use_state(|| 0);
-    let onclick = {
-        let counter = counter.clone();
-        move |_| {
-            let value = *counter + 2;
-            counter.set(value);
-        }
-    };
-
     html! {
-        <div>
-            <button {onclick}>{ "+1" }</button>
-            <p>{ *counter }</p>
+        <div id="container">
+            <header>
+                <h1>{ "Personal Tracker" }</h1>
+            </header>
+            <main>
+                <p>{ "Main" }</p>
+            </main>
+            <footer>{ "Personal Tracker v1" }</footer>
         </div>
     }
 }
 
 fn main() {
     yew::Renderer::<App>::new().render();
-}
\ No newline at end of file
+}
