diff --git a/packages/analytics/public/css/style.css b/packages/analytics/public/css/style.css
index d973b00..7d2e5ef 100644
--- a/packages/analytics/public/css/style.css
+++ b/packages/analytics/public/css/style.css
@@ -9,7 +9,7 @@ th {
   border-collapse: collapse;
   border-spacing: 0;
   width: 100%;
-  border: 2px solid black;
+  border: 2px solid #dcdcdd;
 }
 
 th,
@@ -17,3 +17,117 @@ td {
   width: 1px;
   white-space: nowrap;
 }
+
+body {
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  background-color: #000000;
+  color: #333;
+  margin: 0;
+  padding: 20px;
+  box-sizing: border-box;
+}
+
+.title h1 {
+  color: #00ff00;
+  text-align: center;
+  font-size: 50px;
+  margin-top: 50px;
+  font-family:
+    ui-monospace,
+    SFMono-Regular,
+    Menlo,
+    Monaco,
+    Consolas,
+    Liberation Mono,
+    Courier New,
+    monospace;
+}
+
+.title img {
+  width: 135px;
+}
+.title {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  gap: 30px;
+  margin-bottom: 30px;
+}
+.heading {
+  color: #ffffff;
+}
+
+nav {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  gap: 30px;
+}
+
+.nav a {
+  color: white;
+  text-decoration: none;
+  font-weight: 600;
+  font-size: 20px;
+}
+
+.data-table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-top: 20px;
+  color: #dcdcdd;
+
+  background-color: #24262e;
+}
+
+.data-table td {
+  padding: 10px;
+  text-align: left;
+  font-weight: 400;
+}
+
+.data-table a {
+  color: #00dd00;
+  font-weight: 500;
+}
+
+.data-table th {
+  color: #dcdcdd;
+  padding: 10px;
+  border: 1px solid #dcdcdd;
+  text-align: left;
+}
+
+.container {
+  background-color: #24262e;
+  padding: 20px;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
+.sort {
+  display: flex;
+  margin-bottom: 25px;
+  gap: 15px;
+}
+
+.sort a {
+  background-color: #24262e;
+  height: 50px;
+  padding: 0 5 0 5;
+  border-radius: 10px;
+  text-decoration: none !important;
+}
+
+.sort .btn h3 {
+  margin: 15 3 0 3;
+  font-weight: 600;
+  color: #dcdcdd;
+  font-size: 15px;
+}
+
+.pagination {
+  width: 100%;
+  justify-content: center;
+  margin-top: 20px;
+}
diff --git a/packages/analytics/views/commands.handlebars b/packages/analytics/views/commands.handlebars
index f2252cd..6ee7acb 100644
--- a/packages/analytics/views/commands.handlebars
+++ b/packages/analytics/views/commands.handlebars
@@ -1,11 +1,15 @@
-<h1>Commands</h1>
+<h1 class='heading'>Commands</h1>
 <div>
-  <h2>Error commands</h2>
-  <div class='pagination'>
-    <a href='/commands?order=asc'>Ascending</a>
-    <a href='/commands?order=desc'>Descending</a>
+  <h2 class='heading'>Error commands</h2>
+  <div class='sort'>
+    <a href='/commands?order=asc'><div class='btn'>
+        <h3>Ascending</h3>
+      </div></a>
+    <a href='/commands?order=desc'><div class='btn'>
+        <h3>Descending</h3>
+      </div></a>
   </div>
-  <table>
+  <table class='data-table'>
     <tr>
       <th>Command</th>
       <th>User</th>
@@ -25,7 +29,9 @@
       </tr>
     {{/each}}
   </table>
-  <div class='pagination'>
-    <a href='/commands?nextKey={{nextKey}}&order={{order}}'>Next</a>
+  <div class='pagination sort'>
+    <a href='/commands?nextKey={{nextKey}}&order={{order}}'><div class='btn'>
+        <h3>Next</h3>
+      </div></a>
   </div>
 </div>
\ No newline at end of file
diff --git a/packages/analytics/views/home.handlebars b/packages/analytics/views/home.handlebars
index d96f890..7d774cd 100644
--- a/packages/analytics/views/home.handlebars
+++ b/packages/analytics/views/home.handlebars
@@ -1,22 +1,27 @@
-<h1>Welcome to {{title}}</h1>
-<div>
-  <h2>Overview</h2>
-  <table>
-    <tr>
-      <th>Registered Users</th>
-      <td>{{userCount}}</td>
-    </tr>
-    <tr>
-      <th>Total Started Quests</th>
-      <td>{{totalQuests}}</td>
-    </tr>
-    <tr>
-      <th>Completed Quests</th>
-      <td>{{totalCompleted}}</td>
-    </tr>
-    <tr>
-      <th>Completed Rate</th>
-      <td>{{completedRate}}%</td>
-    </tr>
-  </table>
-</div>
\ No newline at end of file
+<body>
+  <div class='title'>
+    <img src='icon_totem.svg' class='styled-image' />
+    <h1>Welcome to {{title}}</h1>
+  </div>
+  <div class='container'>
+    <h2 class='heading'>Overview</h2>
+    <table class='data-table'>
+      <tr>
+        <th>Registered Users</th>
+        <td>{{userCount}}</td>
+      </tr>
+      <tr>
+        <th>Total Started Quests</th>
+        <td>{{totalQuests}}</td>
+      </tr>
+      <tr>
+        <th>Completed Quests</th>
+        <td>{{totalCompleted}}</td>
+      </tr>
+      <tr>
+        <th>Completed Rate</th>
+        <td>{{completedRate}}%</td>
+      </tr>
+    </table>
+  </div>
+</body>
\ No newline at end of file
diff --git a/packages/analytics/views/layouts/main.handlebars b/packages/analytics/views/layouts/main.handlebars
index 6306555..8062d43 100644
--- a/packages/analytics/views/layouts/main.handlebars
+++ b/packages/analytics/views/layouts/main.handlebars
@@ -4,14 +4,12 @@
     <link rel='stylesheet' href='/css/style.css' />
   </head>
   <body>
-    <nav>
-      <ul>
-        <li><a href='/'>Home</a></li>
-        <li><a href='/users'>Users</a></li>
-        <li><a href='/quests'>Quests</a></li>
-        <li><a href='/commands'>Commands</a></li>
-        <li><a href='/sessions'>Sessions</a></li>
-      </ul>
+    <nav class='nav'>
+      <div><a href='/'>Home</a></div>
+      <div><a href='/users'>Users</a></div>
+      <div><a href='/quests'>Quests</a></div>
+      <div><a href='/commands'>Commands</a></div>
+      <div><a href='/sessions'>Sessions</a></div>
     </nav>
     {{{body}}}
   </body>
diff --git a/packages/analytics/views/quests.handlebars b/packages/analytics/views/quests.handlebars
index 9347e7e..c80095f 100644
--- a/packages/analytics/views/quests.handlebars
+++ b/packages/analytics/views/quests.handlebars
@@ -1,6 +1,6 @@
-<h1>Quests</h1>
+<h1 class='heading'>Quests</h1>
 <div>
-  <table>
+  <table class='data-table'>
     <tr>
       <th>Id</th>
       <th>Started</th>
diff --git a/packages/analytics/views/sessionDetail.handlebars b/packages/analytics/views/sessionDetail.handlebars
index c209bfc..f6af4fa 100644
--- a/packages/analytics/views/sessionDetail.handlebars
+++ b/packages/analytics/views/sessionDetail.handlebars
@@ -1,7 +1,7 @@
-<h1>{{title}}</h1>
-<div>
-  {{#with session}}
-    <table>
+{{#with session}}<h1 class='heading'>Session {{_id}}</h1>
+  <div>
+
+    <table class='data-table'>
       <tr>
         <th>Quest</th>
         <td>{{quest}}</td>
@@ -32,9 +32,9 @@
       </tr>
     </table>
 
-    <h2>Commands</h2>
+    <h2 class='heading'>Commands</h2>
 
-    <table>
+    <table class='data-table'>
       <tr>
         <th>Stage</th>
         <th>PWD</th>
@@ -54,5 +54,5 @@
         </tr>
       {{/each}}
     </table>
-  {{/with}}
-</div>
\ No newline at end of file
+
+  </div>{{/with}}
\ No newline at end of file
diff --git a/packages/analytics/views/sessions.handlebars b/packages/analytics/views/sessions.handlebars
index 613435f..765ce13 100644
--- a/packages/analytics/views/sessions.handlebars
+++ b/packages/analytics/views/sessions.handlebars
@@ -1,10 +1,14 @@
-<h1>Sessions</h1>
-<div class='pagination'>
-  <a href='/sessions?order=asc'>Ascending</a>
-  <a href='/sessions?order=desc'>Descending</a>
+<h1 class='heading'>Sessions</h1>
+<div class='sort'>
+  <a href='/sessions?order=asc'><div class='btn'>
+      <h3>Ascending</h3>
+    </div></a>
+  <a href='/sessions?order=desc'><div class='btn'>
+      <h3>Descending</h3>
+    </div></a>
 </div>
 <div>
-  <table>
+  <table class='data-table'>
     <tr>
       <th>User</th>
       <th>Quest</th>
@@ -29,6 +33,8 @@
     {{/each}}
   </table>
 </div>
-<div class='pagination'>
-  <a href='/sessions?nextKey={{nextKey}}&order={{order}}'>Next</a>
+<div class='pagination sort'>
+  <a href='/sessions?nextKey={{nextKey}}&order={{order}}'><div class='btn'>
+      <h3>Next</h3>
+    </div></a>
 </div>
\ No newline at end of file
diff --git a/packages/analytics/views/users.handlebars b/packages/analytics/views/users.handlebars
index d3312ef..093052f 100644
--- a/packages/analytics/views/users.handlebars
+++ b/packages/analytics/views/users.handlebars
@@ -1,10 +1,14 @@
-<h1>Users List</h1>
-<div class='pagination'>
-  <a href='/users?order=asc'>Ascending</a>
-  <a href='/users?order=desc'>Descending</a>
+<h1 class='heading'>Users List</h1>
+<div class='sort'>
+  <a href='/users?order=asc'><div class='btn'>
+      <h3>Ascending</h3>
+    </div></a>
+  <a href='/users?order=desc'><div class='btn'>
+      <h3>Descending</h3>
+    </div></a>
 </div>
 <div>
-  <table>
+  <table class='data-table'>
     <tr>
       <th>Username</th>
       <th>Last Activity</th>
@@ -25,6 +29,8 @@
     {{/each}}
   </table>
 </div>
-<div class='pagination'>
-  <a href='/users?nextKey={{nextKey}}&order={{order}}'>Next</a>
+<div class='pagination sort'>
+  <a href='/users?nextKey={{nextKey}}&order={{order}}'><div class='btn'>
+      <h3>Next</h3>
+    </div></a>
 </div>
\ No newline at end of file
diff --git a/packages/analytics/views/usersDetail.handlebars b/packages/analytics/views/usersDetail.handlebars
index 3e1f643..983948a 100644
--- a/packages/analytics/views/usersDetail.handlebars
+++ b/packages/analytics/views/usersDetail.handlebars
@@ -1,6 +1,6 @@
-<h1>{{user}}'s Sessions History</h1>
+<h1 class='heading'>{{user}}'s Sessions History</h1>
 <div>
-  <table>
+  <table class='data-table'>
     <tr>
       <th>Quest</th>
       <th>Status</th>