diff --git a/pages/about.html b/pages/about.html
index d297cad..9ca764d 100644
--- a/pages/about.html
+++ b/pages/about.html
@@ -1,14 +1,22 @@
 {{ template "base" . }}
 
 {{ define "content" }}
-<main class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
-  <div class="p-2 flex-fill text-wrap text-center">
-    <h1>Dela.</h1>
-    <p class="lead">Simple and elegant web TODO list</p>
-    <p class="lead">
-      <a href="/login" class="btn btn-lg btn-primary">Login</a>
-      <a href="/register" class="btn btn-lg btn-primary">Register</a>
-    </p>
+
+<main class="container my-5">
+  <div class="px-4 pt-5 my-5 text-center border shadow-lg">
+    <h1 class="display-4 fw-bold text-body-emphasis">Dela</h1>
+    <div class="col-lg-6 mx-auto">
+      <p class="lead mb-4">a dead simple and minimalistic web TODO list</p>
+      <div class="d-grid gap-2 d-sm-flex justify-content-sm-center mb-5">
+        <a href="/register" class="btn btn-primary btn-lg px-4 me-md-2 fw-bold">Register</a>
+        <a href="/login" class="btn btn-outline-secondary btn-lg px-4">Log in</a>
+      </div>
+    </div>
+    <div class="overflow-hidden" style="max-height: 30vh;">
+      <div class="container px-5">
+        <img src="/static/images/dela_main.png" class="img-fluid border rounded-3 shadow-lg mb-4" alt="Dela interface" width="980" height="700" loading="lazy">
+      </div>
+    </div>
   </div>
 </main>
 
diff --git a/pages/category.html b/pages/category.html
index f13a505..62dc70d 100644
--- a/pages/category.html
+++ b/pages/category.html
@@ -8,7 +8,7 @@
 <main class="d-flex flex-wrap">
 
 <!-- Sidebar -->
-<div id="sidebar" class="flex-shrink-1 p-2 d-flex flex-column align-items-stretch bg-body-tertiary" style="width: 380px;">
+<div id="sidebar" class="border-right shadow-lg flex-shrink-1 p-2 d-flex flex-column align-items-stretch bg-body-tertiary" style="width: 380px;">
   <a href="/" class="d-flex align-items-center flex-shrink-0 p-3 link-body-emphasis text-decoration-none border-bottom">
       <img class="bi pe-none me-2" width="30" height="24" src="/static/images/arrows-fullscreen.svg">
       <span class="fs-5 fw-semibold">Categories</span>
@@ -67,8 +67,8 @@
               <td class="todo-due">{{ .Due }}</td>
               <td class="todo-due-unix" style="display: none;">{{ .DueUnix }}</td>
               <td>
-                <button class="btn btn-success" onclick="markAsDoneRefresh({{.ID}});"><img src='/static/images/check.svg'></button>
-                <button class="btn btn-danger" onclick="deleteTodoRefresh({{.ID}});"><img src='/static/images/trash3-fill.svg'></button>
+                <button class="btn btn-success" onclick="markAsDoneRefresh('{{.ID}}');"><img src='/static/images/check.svg'></button>
+                <button class="btn btn-danger" onclick="deleteTodoRefresh('{{.ID}}');"><img src='/static/images/trash3-fill.svg'></button>
               </td>
             </tr>
           {{ end }}
@@ -91,7 +91,7 @@
               <td>{{ .TimeCreated }}</td>
               <td>{{ .CompletionTime }}</td>
               <td>
-                <button class="btn btn-danger" onclick="deleteTodoRefresh({{.ID}});"><img src='/static/images/trash3-fill.svg'></button>
+                <button class="btn btn-danger" onclick="deleteTodoRefresh('{{.ID}}');"><img src='/static/images/trash3-fill.svg'></button>
               </td>
             </tr>
           {{ end }}
diff --git a/pages/error.html b/pages/error.html
index 7e9eb97..8ea3229 100644
--- a/pages/error.html
+++ b/pages/error.html
@@ -3,9 +3,10 @@
 {{ define "content" }}
 <main class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
   <div class="p-2 flex-fill text-wrap text-center">
-    <h1>Error!</h1>
-    <p>You have encountered an error</p>
-    <p>Try to reload the page or try again later</p>
+    <h1 class="text-danger display-2">Error!</h1>
+    <img src="/static/images/emoji-frown.svg" alt="Sad face" width="128px" >
+    <p>Sorry! Something went wrong somewhere!</p>
+    <p><u>Try to reload the faulty page or try again later</u></p>
   </div>
 </main>
 
diff --git a/pages/index.html b/pages/index.html
index c4aad06..4c0a0cb 100644
--- a/pages/index.html
+++ b/pages/index.html
@@ -7,7 +7,7 @@
 
 <div class="d-flex flex-wrap">
   <!-- Sidebar -->
-  <div id="sidebar" class="flex-shrink-1 p-2 d-flex flex-column align-items-stretch bg-body-tertiary" style="width: 380px;">
+  <div id="sidebar" class="border-right shadow-lg flex-shrink-1 p-2 d-flex flex-column align-items-stretch bg-body-tertiary" style="width: 380px;">
     <a href="/" class="d-flex align-items-center flex-shrink-0 p-3 link-body-emphasis text-decoration-none border-bottom">
       <img class="bi pe-none me-2" width="30" height="24" src="/static/images/arrows-fullscreen.svg">
       <span class="fs-5 fw-semibold">Categories</span>
@@ -28,16 +28,13 @@
     </div>
 
 
-    <!-- <div class="d-flex flex-column p-4 gap-4 py-md-5 align-items-start justify-content-center"> -->
-    <div class="py-md-5">
-      <form onsubmit="return false;">
-        <input type="text" name="newCategory" class="form-control" id="new-category-input" placeholder="Category Name">
-        <input type="submit" value="Create" onclick="createNewCategory();" class="btn btn-primary">
-      </form>
+    <div class="input-group mb-3 py-md-5">
+      <input type="text" name="newCategory"aria-label="Category Name" aria-describedby="button-new-category" class="form-control" id="new-category-input" placeholder="Category Name">
+      <button id="button-new-category" onclick="createNewCategory();" class="btn btn-primary">Create</button >
     </div>
   </div>
 
-  <!-- <div class="d-flex flex-column flex-md-row p-4 gap-4 py-md-5 align-items-center justify-content-center flex-grow-1"> -->
+  <!-- Groups -->
   <div class="d-flex flex-column flex-grow-1 flex-md-row p-4 gap-4 py-md-5">
   <div class="list-group flex-grow-1">
     {{ range .Groups }}
@@ -54,7 +51,7 @@
         </a>
         {{ if .Removable }}
         <div class="small">
-          <button class="btn btn-danger" onclick="deleteCategoryRefresh({{.ID}})">
+          <button class="btn btn-danger" onclick="deleteCategoryRefresh('{{.ID}}')">
             <img src="/static/images/trash3-fill.svg" alt="Remove category">
           </button>
         </div>
@@ -65,8 +62,6 @@
   </div>
 </div>
 
-<!-- d-flex flex-column align-items-center justify-content-center -->
-
 </main>
 
 <script>
diff --git a/pages/login.html b/pages/login.html
index f8268d6..2b0d35a 100644
--- a/pages/login.html
+++ b/pages/login.html
@@ -3,26 +3,38 @@
 {{ define "content" }}
 
 
-<main class="d-flex flex-wrap align-content-center align-items-center">
-    <div class="p-2 flex-fill text-wrap text-center">
-        <!-- text-center -->
-        <h3>Log in</h3>
-        <form name="loginForm" onsubmit="return false;">
-            <p>
-                <img src="/static/images/universal-access.svg" alt="Login">
-                <input type="text" name="login" minlength="3" placeholder="Login" required>
-            </p>
-        
-            <p>
-                <img src="/static/images/key.svg" alt="Password">
-                <input type="password" name="password" minlength="3" placeholder="Password" required>
-            </p>
+<main class="d-flex flex-wrap align-content-center align-items-center container my-5 flex-column">
+    <div class="p-2 flex-fill text-wrap text-center border shadow-lg">
+        <h3 class="h3 mb-3 fw-normal">Log in</h3>
+        <form onsubmit="return false;">
+            <div class="mb-3 input-group">
+                <img src="/static/images/universal-access.svg" alt="Login" class="input-group-text">
+                <input 
+                    type="text" 
+                    class="form-control" 
+                    id="input-login" 
+                    aria-describedby="Login"
+                    aria-label="Login"
+                    placeholder="Login"
+                    required
+                    minlength="3">
+            </div>
+
+            <div class="mb-3 input-group">
+                <img src="/static/images/key.svg" alt="Password" class="input-group-text">
+                <input 
+                    type="password" 
+                    class="form-control" 
+                    id="input-password" 
+                    aria-describedby="Password"
+                    aria-label="Password"
+                    placeholder="Password"
+                    required
+                    minlength="3">
+            </div>
             
             <p><span id="error_message" class="text-danger"></span></p> 
-        
-            <p>
-                <input type="submit" value="Log in" class="btn btn-primary" onclick="logIn()">
-            </p>
+            <input type="submit" value="Log in" class="btn btn-primary" onclick="logIn()">
         </form>
             
     </div>
@@ -30,14 +42,14 @@
 
 <script>
 async function logIn() {
-    let loginForm = document.forms["loginForm"];
-
-    let login = String(loginForm.elements["login"].value).trim();
+    let loginInput = document.getElementById("input-login");
+    let login = String(loginInput.value).trim();
     if (login.length < 3) {
         return;
     }
 
-    let password = String(loginForm.elements["password"].value);
+    let passwordInput = document.getElementById("input-password");
+    let password = String(passwordInput.value);
     if (password.length < 3) {
         return;
     }
diff --git a/pages/register.html b/pages/register.html
index 932636e..88bc948 100644
--- a/pages/register.html
+++ b/pages/register.html
@@ -2,67 +2,91 @@
 
 {{ define "content" }}
 
-<main class="d-flex flex-wrap align-content-center">
-    <div class="p-2 flex-fill text-wrap text-center">
-        <h3>Register</h3>
-        <form name="registerForm" onsubmit="return false;">
-          <p>
-                <img src="/static/images/universal-access.svg" alt="Login">
-                <input type="text" name="login" minlength="3" placeholder="Login" required>
-          </p>
-        
-          <p>
-                <img src="/static/images/envelope-at.svg" alt="E-mail">
-                <input type="email" name="email" minlength="3" placeholder="login@example.com" required>
-          </p>
-        
-          <p>
-                <img src="/static/images/key.svg" alt="Password">
-                <input type="password" name="password" minlength="3" placeholder="Password" required>
-          </p>
-        
+<main class="d-flex flex-wrap align-content-center container my-5 flex-column">
+    <div class="p-2 flex-fill text-wrap text-center border shadow-lg">
+        <h3 class="h3 mb-3 fw-normal">Register <span title="Passwords are hashed client-side, your information is protected">
+            <img src="/static/images/info-circle.svg" alt="Information"></span>
+        </h3>
+        <form onsubmit="return false;">
+            <div class="mb-3 input-group">
+                <img src="/static/images/universal-access.svg" alt="Login" class="input-group-text">
+                <input 
+                    type="text" 
+                    class="form-control" 
+                    id="input-login" 
+                    aria-describedby="Login"
+                    aria-label="Login"
+                    placeholder="Login"
+                    required
+                    minlength="3">
+            </div>
+
+            <div class="mb-3 input-group">
+                <img src="/static/images/envelope-at.svg" alt="Email" class="input-group-text">
+                <input 
+                    type="email" 
+                    class="form-control" 
+                    id="input-email" 
+                    aria-describedby="Email"
+                    aria-label="login@example.com"
+                    placeholder="login@example.com"
+                    required
+                    minlength="3">
+            </div>
+
+            <div class="mb-3 input-group">
+                <img src="/static/images/key.svg" alt="Password" class="input-group-text">
+                <input 
+                    type="password" 
+                    class="form-control" 
+                    id="input-password" 
+                    aria-describedby="Password"
+                    aria-label="Password"
+                    placeholder="Password"
+                    required
+                    minlength="3">
+            </div>
+
             <p><span id="error_message" class="text-danger"></span></p> 
-        
-            <p>
-                <input type="submit" value="Register" class="btn btn-primary" onclick="register();">
-            </p>
+            <input type="submit" value="Register" class="btn btn-primary" onclick="register();">
         </form>    
     </div>
 </main>
 
 <script>
 async function register() {
-  let registerForm = document.forms["registerForm"];
-
-  let login = String(registerForm.elements["login"].value).trim();
-  if (login.length < 3) {
-      return;
-  }
+    let loginInput = document.getElementById("input-login");
+    let login = String(loginInput.value).trim();
+    if (login.length < 3) {
+        return;
+    }
 
-  let email = String(registerForm.elements["email"].value).trim();
-  if (email.length < 3) {
-      return;
-  }
+    let emailInput = document.getElementById("input-email");
+    let email = String(emailInput.value).trim();
+    if (email.length < 3) {
+        return;
+    }
 
-  let password = String(registerForm.elements["password"].value);
-  if (password.length < 3) {
-      return;
-  }
+    let passwordInput = document.getElementById("input-password");
+    let password = String(passwordInput.value);
+    if (password.length < 3) {
+        return;
+    }
 
-  let passwordSHA256 = sha256(password);
-  let postData = {
-      login: login,
-      email: email,
-      password: passwordSHA256,
-  };
+    let passwordSHA256 = sha256(password);
+    let postData = {
+        login: login,
+        email: email,
+        password: passwordSHA256,
+    };
 
-  let response = await postNewUser(postData);
+    let response = await postNewUser(postData);
 
-  if (response.ok) {
-      window.location.replace("/");
-  } else {
-      document.getElementById("error_message").innerText = await response.text();
-  }
+    if (response.ok) {
+        window.location.replace("/");
+    } else {
+        document.getElementById("error_message").innerText = await response.text();
+    }
 };
 </script>
 {{ end }}
\ No newline at end of file
diff --git a/src/main.go b/src/main.go
index b761272..e9e7559 100644
--- a/src/main.go
+++ b/src/main.go
@@ -28,7 +28,7 @@ import (
 	"path/filepath"
 )
 
-const Version string = "0.1.2"
+const Version string = "0.2.0"
 
 var (
 	printVersion *bool = flag.Bool("version", false, "Print version information and exit")
diff --git a/static/images/dela_main.png b/static/images/dela_main.png
new file mode 100644
index 0000000..d5a2adf
Binary files /dev/null and b/static/images/dela_main.png differ
diff --git a/static/images/emoji-frown.svg b/static/images/emoji-frown.svg
new file mode 100644
index 0000000..696031b
--- /dev/null
+++ b/static/images/emoji-frown.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-emoji-frown" viewBox="0 0 16 16">
+  <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/>
+  <path d="M4.285 12.433a.5.5 0 0 0 .683-.183A3.5 3.5 0 0 1 8 10.5c1.295 0 2.426.703 3.032 1.75a.5.5 0 0 0 .866-.5A4.5 4.5 0 0 0 8 9.5a4.5 4.5 0 0 0-3.898 2.25.5.5 0 0 0 .183.683M7 6.5C7 7.328 6.552 8 6 8s-1-.672-1-1.5S5.448 5 6 5s1 .672 1 1.5m4 0c0 .828-.448 1.5-1 1.5s-1-.672-1-1.5S9.448 5 10 5s1 .672 1 1.5"/>
+</svg>
\ No newline at end of file
diff --git a/static/images/info-circle.svg b/static/images/info-circle.svg
new file mode 100644
index 0000000..e2b50eb
--- /dev/null
+++ b/static/images/info-circle.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-info-circle" viewBox="0 0 16 16">
+  <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/>
+  <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0"/>
+</svg>
\ No newline at end of file