diff --git a/webapi/index.py b/webapi/index.py
index 56f9ff0..b406cb5 100644
--- a/webapi/index.py
+++ b/webapi/index.py
@@ -282,8 +282,7 @@ def logout():
 def about():
     msg = """
         <h3>Welcome to MuPIFDB web interface</h3>
-        <p><a href=\"http://www.mupif.org\">MuPIF</a> is open-source, modular, object-oriented integration platform allowing to create complex, distributed, multiphysics simulation workflows across the scales and processing chains by combining existing simulation tools. <a href=\"https://github.com/mupif/mupifDB\">MuPIFDB</a> is database layer (based on MongoDB) and workflow manager/scheduler for MuPIF with REST API.</p>
-        <p>The MuPIFDB web interface allows to use MupifDB REST API from web browser in a user friendly way, allowing to inspect all the stored data and to intialize, schedule and monitor individual workflow executions.</p> 
+        <p><a href=\"http://www.mupif.org\">MuPIF</a> MuPIF is open-source, modular, object-oriented simulation platform allowing to create complex, distributed, multiphysics simulation workflows across the scales and processing chains by combining existing simulation tools. Its data management system allows to build digital twin representations of physical systems, enhanced with predictive simulations to explore virtual paths in a secure distributed environment with full data traceability.</p> 
     """
     return my_render_template('basic.html', body=Markup(msg), login=login_header_html())
 
diff --git a/webapi/static/style.css b/webapi/static/style.css
index ad4f290..dd79504 100644
--- a/webapi/static/style.css
+++ b/webapi/static/style.css
@@ -1,3 +1,17 @@
+*, *::before, *::after {
+    /*font-kerning: normal;*/
+    /*font-variant-numeric: lining-nums proportional-nums;*/
+    /*font-variant-ligatures: common-ligatures contextual;*/
+    outline: none;
+    box-sizing: border-box;
+    margin: 0;
+}
+
+html {
+    overflow-y:scroll;
+    font-family: Arial, Helvetica, sans-serif;
+}
+
 .sidenav {
     height: 100%;
     width: 160px;
@@ -21,9 +35,72 @@
 }
 
 .footer {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
     clear: both;
     width: 100%;
     text-align: center;
+    height: 60px;
+    position: fixed;
+    bottom: 0;
+    /*background-color: #1976D2;*/
+    border-top: 1px solid silver;
+    background-color: #e8e8e8;
+    padding: 0 10px;
+}
+
+.header {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    background-color: #e8e8e8;
+    /*background-color: #1976D2;*/
+    padding: 10px 10px 10px 20px;
+    height: 80px;
+
+}
+
+.menu {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    gap: 32px;
+    background-color: #e8e8e8;
+    /*background-color: #1976D2;*/
+    padding: 3px 32px;
+    /*height: 30px;*/
+    border-bottom: 1px solid silver;
+}
+
+.menu a, .menu a:visited {
+    display: block;
+    background-color: transparent;
+    border-radius: 3px;
+    color: black;
+    text-decoration: none;
+    padding: 6px 16px;
+    vertical-align: center;
+    text-align: center;
+}
+
+.menu a:hover {
+    display: block;
+    background-color: silver;
+
+}
+
+.header_caption {
+    text-align: center;
+    vertical-align: center;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    font-size: 32px;
+    /*font-weight: bold;*/
+    color: #3f3f3f;
+
 }
 
 table {
@@ -40,21 +117,22 @@ head {
 
 .main {
     clear: both;
-    background-color: rgb(238, 242, 255);
     min-height: 200px;
+    padding-bottom: 200px;
 }
 
 body {
     clear: both;
     height: auto;
+    background-color: #f8f8f8;
 }
 
 .right {
     font-size: 16px; /* Increased text to enable scrolling */
-    padding: 0px 10px;
     /*float: right;*/
     /*width: 100%;*/
-    background-color: rgb(238, 242, 255);
+    /*background-color: rgb(238, 242, 255);*/
+    padding: 32px 16px 16px 16px;
 }
 
 .sidenav, .right {
diff --git a/webapi/templates/layout.html b/webapi/templates/layout.html
index 4e648ec..266d772 100644
--- a/webapi/templates/layout.html
+++ b/webapi/templates/layout.html
@@ -7,24 +7,32 @@
         {% endblock %}
     </head>
     <body>
-        <div style="display: flex;flex-direction: row;justify-content: space-between;">
-            <div style="display: flex;flex-direction: row;gap: 10px;">
-                <img src="/static/images/mupif-logo.png" height="60px" align="right">
-                <img src="/static/images/ctu-logo.png" height="60px" align="right">
+        <div class="header">
+            <div style="display: flex;flex-direction: row;gap: 64px;">
                 <img src="{% block projectLogoUrl %}{% endblock %}" height="60px" align="left">
-                <div><p>MuPIFDB web interface</p></div>
+                <div class="header_caption">MuPIF DB web interface</div>
             </div>
             <div class="block_login">{% block login %}{% endblock %}</div>
         </div>
+        <div class="menu">
+            <a href="/about">About</a>
+            <a href="/status">Status</a>
+            <a href="/usecases">Usecases</a>
+            <a href="/workflows">Workflows</a>
+            <a href="/workflowexecutions">Executions</a>
+            <a href="/contact">Contact</a>
+        </div>
         <div class="main">
-            {% include 'navigation.html' %}
+{#            {% include 'navigation.html' %}#}
             <div class="right">
                 {% block content %}{% endblock %}
             </div>
         </div>
         <div class="footer">
             {% block footer %}
-            &copy; Copyright CTU in Prague.
+                <img src="/static/images/mupif-logo.png" height="50px" align="right">
+                &copy; Copyright CTU in Prague.
+                <img src="/static/images/ctu-logo.png" height="50px" align="right">
             {% endblock %}
         </div>
     </body>
diff --git a/webapi/templates/navigation.html b/webapi/templates/navigation.html
index 1e88448..873a7b7 100644
--- a/webapi/templates/navigation.html
+++ b/webapi/templates/navigation.html
@@ -5,4 +5,4 @@
     <a href="/workflows">Workflows</a>
     <a href="/workflowexecutions">Executions</a>
     <a href="/contact">Contact</a>
-  </div>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/webapi/templates/stat.html b/webapi/templates/stat.html
index 74c6169..5a11c89 100644
--- a/webapi/templates/stat.html
+++ b/webapi/templates/stat.html
@@ -1,9 +1,11 @@
 {% extends "layout.html" %}
+{% block title %} {{ title }} {% endblock %}
+{% block login %} {{ login }} {% endblock %}
 {% block projectLogoUrl %} {{ projectLogoUrl }} {% endblock %}
 {% block head %}
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js " integrity="sha256-XF29CBwU1MWLaGEnsELogU6Y6rcc5nCkhhx89nFMIDQ=" crossorigin=" anonymous "></script>
-<title>{% block title %}{{ title }}{% endblock %}</title>
+{#<title>{% block title %}{{ title }}{% endblock %}</title>#}
 {% endblock %}
 {% block content %}
 <div>