diff --git a/internal/gui/dashboard.go b/internal/gui/dashboard.go
index bf4524d..f6999aa 100644
--- a/internal/gui/dashboard.go
+++ b/internal/gui/dashboard.go
@@ -41,9 +41,10 @@ func (d *dashboard) empty() g.Node {
 func (d *dashboard) value(name string) g.Node {
 	return Div(
 		Class("value"),
-		Span(
+		A(
 			Class("label"),
 			g.Text(name),
+			Href("/"),
 		),
 		Span(
 			Class(name),
@@ -58,10 +59,10 @@ func (d *dashboard) content() g.Node {
 		Div(
 			Class("panel"),
 			Div(
-				d.title("jobs"),
-				Hr(),
+				d.title("Jobs"),
 				d.value("todo"),
 				d.value("pending"),
+				d.value("running"),
 				d.value("succeeded"),
 				d.value("failed"),
 				Hr(),
@@ -71,8 +72,8 @@ func (d *dashboard) content() g.Node {
 		Div(
 			Class("panel"),
 			Div(
-				d.title("workflows"),
-				Hr(),
+				d.title("Workflows"),
+				d.empty(),
 				d.empty(),
 				d.value("running"),
 				d.value("succeeded"),
diff --git a/internal/gui/layout.go b/internal/gui/layout.go
index fd6f714..1f3bf74 100644
--- a/internal/gui/layout.go
+++ b/internal/gui/layout.go
@@ -23,7 +23,7 @@ func container(node g.Node) g.Node {
 	)
 }
 
-func navbarLink(name, href, page string) g.Node {
+func navbarLink(name, href, description, page string) g.Node {
 	active := name == page
 
 	return A(
@@ -33,6 +33,7 @@ func navbarLink(name, href, page string) g.Node {
 		},
 		g.Text(name),
 		Href(href),
+		TitleAttr(description),
 	)
 }
 
@@ -51,10 +52,10 @@ func buildPage(app components.Application, name string, content g.Node) g.Node {
 					container(
 						Div(
 							Class("navbar"),
-							navbarLink(app.Name(), "/", name),
-							navbarLink("dashboard", "/dashboard", name),
-							navbarLink("jobs", "/dashboard", name),
-							navbarLink("workflows", "/dashboard", name),
+							navbarLink(app.Name(), "/", "home", name),
+							navbarLink("dashboard", "/dashboard", "number of jobs and workflows per status", name),
+							navbarLink("jobs", "/search/jobs", "search for jobs", name),
+							navbarLink("workflows", "/search/workflows", "search for workflows", name),
 						),
 					),
 				),
diff --git a/static/css/colors.css b/static/css/colors.css
new file mode 100644
index 0000000..008319e
--- /dev/null
+++ b/static/css/colors.css
@@ -0,0 +1,43 @@
+/*
+------------------------------------------------------------------------------------------------------------------------
+####### common ####### Copyright (c) 2021 mls-361 ################################################## MIT License #######
+------------------------------------------------------------------------------------------------------------------------
+*/
+
+/*https://tailwindcss.com/docs/customizing-colors*/
+
+:root {
+    /*gray*/
+    --gray-050: #F9FAFB;
+    --gray-100: #F3F4F6;
+    --gray-200: #E5E7EB;
+    --gray-300: #D1D5DB;
+    --gray-400: #9CA3AF;
+    --gray-500: #6B7280;
+    --gray-600: #4B5563;
+    --gray-700: #374151;
+    --gray-800: #1F2937;
+    --gray-900: #111827;
+    /*blue*/
+    --blue-050: #EFF6FF;
+    --blue-100: #DBEAFE;
+    --blue-200: #BFDBFE;
+    --blue-300: #93C5FD;
+    --blue-400: #60A5FA;
+    --blue-500: #3B82F6;
+    --blue-600: #2563EB;
+    --blue-700: #1D4ED8;
+    --blue-800: #1E40AF;
+    --blue-900: #1E3A8A;
+    /**/
+    --blue: #0277bd;
+    --green: #5bc254;
+    --orange: orange;
+    --red: #f24c4c;
+    --yellow: #ffc107;
+}
+
+/*
+######################################################################################################## @(°_°)@ #######
+*/
+
diff --git a/static/css/common.css b/static/css/common.css
index 8ae629e..0d6129c 100644
--- a/static/css/common.css
+++ b/static/css/common.css
@@ -5,14 +5,8 @@
 */
 
 :root {
-    --color: #eeeeee;
-    --bg-color: #1b2b34;
-    --blue1: #28c2d1;
-    --blue2: #0277bd;
-    --green: #5bc254;
-    --orange: orange;
-    --red: #f24c4c;
-    --yellow: #ffc107;
+    --color: var(--gray-200);
+    --bg-color: var(--gray-800);
 }
 
 html, body {
@@ -20,33 +14,36 @@ html, body {
     background-color: var(--bg-color);
 }
 
+header {
+    margin-top: 10px;
+}
+
 .container {
-    max-width: 80rem;
+    max-width: 1280px;
     margin-left: auto;
     margin-right: auto;
-    padding: 1rem;
+    padding: 10px;
 }
 
 .navbar {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
+    font-size: 18px;
 }
 
 .navbar .item {
     text-decoration: none;
-    margin: 5px;
+    margin: 10px;
     color: var(--color);
 }
 
 .navbar .item.active {
-    text-decoration: none;
-    margin: 5px;
-    color: var(--blue1);
+    color: var(--blue-500);
 }
 
 .navbar .item:hover {
-    color: var(--blue2);
+    color: var(--blue-600);
 }
 
 /*
diff --git a/static/css/dashboard.css b/static/css/dashboard.css
index 349ee4d..086bf57 100644
--- a/static/css/dashboard.css
+++ b/static/css/dashboard.css
@@ -7,6 +7,7 @@
 @charset "utf-8";
 
 @import url("normalize.css");
+@import url("colors.css");
 @import url("common.css");
 
 .dashboard {
@@ -16,32 +17,54 @@
 }
 
 .panel {
-    margin: 5px;
-    background-color: #333333;
-    padding: 1rem;
+    margin: 10px;
+    background-color: var(--gray-900);
+    padding: 20px 30px;
 }
 
 .title {
-    font-size: 3em;
+    font-size: 48px;
+    margin-bottom: 30px;
 }
 
 .value {
     width: 300px;
-    height: 50px;
-    font-size: 1.5em;
+    height: 90px;
+    font-size: 24px;
 }
 
 .label {
+    text-decoration: none;
     display: inline-block;
     width: 180px;
+    color: var(--color);
+}
+
+.label:hover {
+    color: var(--blue-600);
 }
 
 .todo, .pending, .running, .succeeded, .failed, .total {
     display: inline-block;
-    padding: 5px;
+    padding: 25px 5px;
     width: 120px;
     text-align: center;
-    background-color: gray; /*AFAC*/
+}
+
+.pending {
+    background-color: var(--gray-500);
+}
+
+.running {
+    background-color: var(--blue);
+}
+
+.succeeded {
+    background-color: var(--green);
+}
+
+.failed {
+    background-color: var(--red);
 }
 
 /*