diff --git a/src/lib/components/footer.svelte b/src/lib/components/footer.svelte
index c90761f..7c0ac5f 100644
--- a/src/lib/components/footer.svelte
+++ b/src/lib/components/footer.svelte
@@ -8,6 +8,7 @@
 
 <style>
     footer {
-        margin: 20px;
+        margin: 1em;
+        padding: 1em;
     }
 </style>
\ No newline at end of file
diff --git a/src/lib/components/nav.svelte b/src/lib/components/nav.svelte
index 969ff12..30988ec 100644
--- a/src/lib/components/nav.svelte
+++ b/src/lib/components/nav.svelte
@@ -9,17 +9,13 @@
 
 <style>
     nav {
-        margin-bottom: 1rem;
+        margin: 1em;
+        padding: 1em;
         display: flex;
     }
     .nav-button {
-        margin: 5px;
         padding: 8px;
-        background-color: var(--lightgray);
-        border-radius: 5px;
+        border-bottom: solid 1px black;
     }
 
-    .nav-button:hover {
-        background-color: var(--gray);
-    }
 </style>
\ No newline at end of file
diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
index 67514f0..604417f 100644
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@@ -14,6 +14,7 @@
     padding: 0px;
     margin: 0px;
     text-decoration: none;
+    list-style-type: none;
     color : black;
 
     --gray: rgb(160, 160, 160);
diff --git a/src/routes/about.svelte b/src/routes/about.svelte
index ada514e..e3e5683 100644
--- a/src/routes/about.svelte
+++ b/src/routes/about.svelte
@@ -1,2 +1,11 @@
-<h1>About this</h1>
-<p>This is a test website using sveltekit</p>
\ No newline at end of file
+<div class = "panel">
+    <h1>About this</h1>
+    <p>This is a test website using sveltekit</p>
+</div>
+
+<style>
+    .panel {
+        margin: 1em;
+        padding: 1em;
+    }
+</style>
\ No newline at end of file
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index 05d62cd..dd478df 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -1,12 +1,22 @@
 
-<h1>APPS</h1>
+<div class = "panel">
+    <h1>APPS</h1>
+    <ul>
+        <li><a href="/apps/todo">todo</a></li>
+    </ul>    
+</div>
 
-<ul>
-    <li><a href="/apps/todo">todo</a></li>
-</ul>
 
 <style>
-    h1 {
-        margin: 10px;
+    .panel {
+        margin: 1em;
+        padding: 1em;
+    }
+
+    ul {
+        margin: 2em;
+    }
+    li {
+        list-style-type:circle;
     }
 </style>
\ No newline at end of file