diff --git a/src/kapidox/data/htmlresource/css/kapidox.css b/src/kapidox/data/htmlresource/css/kapidox.css
--- a/src/kapidox/data/htmlresource/css/kapidox.css
+++ b/src/kapidox/data/htmlresource/css/kapidox.css
@@ -8,6 +8,13 @@
 /**
  * Global
  */
+:root {
+    --base: white;
+    --on-base: black;
+    --plasma-blue: #54a3d8;
+    --on-plasma-blue: white;
+}
+
 html {
     margin: 0;
 }
@@ -22,6 +29,156 @@
     line-height: 1.4em;
 }
 
+#navbar
+{
+    height: 50px;
+    background-color: var(--base);
+    color: var(--on-base);
+    border-bottom: 4px solid var(--plasma-blue);
+}
+
+#navbar .container {
+    height: 100%;
+    max-width: 800px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+.navbar-nav.breadcrumb {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+.navbar-nav.breadcrumb a {
+    padding: 13px;
+    font-size: 20px;
+}
+
+.navbar-nav > li {
+    float: initial;
+}
+
+.breadcrumb {
+    margin-bottom: 0;
+    height: 100%;
+    background-color: transparent;
+}
+
+li.active a {
+    background-color: var(--plasma-blue);
+    color: var(--on-plasma-blue);
+}
+
+#body_wrapper.container {
+    margin-right: initial;
+    display: flex;
+    justify-content: center;
+    align-content: center;
+    min-height: 100vh;
+}
+
+@media (min-width: 768px) {
+    #api-kde-org-sidebar {
+        position: fixed;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        width: 300px;
+        box-shadow: 0 1px 4px 0 rgba(0,0,0,.37);
+        z-index: 9999;
+        scrollbar-width: none;
+        overflow-y: scroll;
+        padding-bottom: 40px;
+    }
+    #api-kde-org-sidebar::-webkit-scrollbar {
+        display: none;
+    }
+    #body_wrapper.container {
+        margin-left: 300px;
+        width: 100%;
+        max-width: calc(99vw - 300px);
+    }
+    #navbar {
+        margin-left: 300px;
+    }
+    .footer {
+        margin-left: 300px;
+        max-width: calc(100vw - 300px);
+    }
+}
+
+#sidebar-header {
+    height: 100px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background-color: var(--plasma-blue);
+    color: var(--on-plasma-blue);
+}
+
+#sidebar-header a {
+    color: white;
+}
+
+#sidebar-header h2 {
+    font-size: 30px;
+    font-weight: 700;
+}
+
+@media (max-width: 767px) {
+    .navbar-nav {
+        margin: 0;
+    }
+    #sidebar-header {
+        display: none;
+    }
+}
+
+#main-column {
+    width: 100%;
+    max-width: 1200px;
+}
+
+h1, h2, h3, h4, h5, h6, legend {
+    font-family: "Noto Sans", "Helvetica Neue", Arial, sans-serif;
+    margin-top: 0;
+    font-weight: 700;
+    color: var(--on-base);
+}
+
+h2.groupheader {
+    color: var(--on-base);
+    border-bottom: 0;
+    margin-bottom: 8px;
+}
+
+h1 {
+    font-size: 300%;
+    margin-bottom: 8px;
+}
+
+h2, h2.groupheader {
+    font-size: 240%;
+    margin-bottom: 8px;
+}
+
+h3 {
+    font-size: 180%;
+    margin-bottom: 8px;
+}
+
+h4 {
+    font-size: 140%;
+    margin-bottom: 8px;
+}
+
+h5 {
+    font-size: 120%;
+    margin-bottom: 10px;
+}
+
 #navbar .navbar-brand
 {
     padding-top:0;
@@ -57,8 +214,8 @@
 }
 
 .bg-primary {
-    background-color: #0057ae;
-    color: #ffffff;
+    background-color: var(--plasma-blue);
+    color: var(--on-plasma-blue);
 }
 
 footer a {
@@ -70,11 +227,6 @@
     color: #ffffff;
 }
 
-.page-header {
-    margin-top: 0;
-    box-shadow: 0px 13px 12px -17px grey;
-}
-
 #left h2 {
     font-size: 1.2em;
 }
@@ -97,17 +249,17 @@
 .menu-title {
     margin: 0.6em 0 1.2em 0;
     padding:0;
-    color: #ffffff;
-    background-color: #0057ae;
+    color: var(--on-plasma-blue);
+    background-color: var(--plasma-blue);
 }
 
 .menu-title h2 {
     margin: 0;
     padding: 0.4em 1.3em 0.2em 1.3em;
     line-height:1.2em;
     font-size: 1.2em;
     font-weight: normal;
-    color: #ffffff;
+    color: var(--on-plasma-blue);
 }
 
 .menu-content dl {
@@ -128,15 +280,71 @@
  */
 
 .product-row {
-    background: #fff;
-    padding: .6em;
+    background: #ffffff;
+    border: 1px solid rgba(0,0,0,.2);
+    border-radius: 3px;
+    padding: 12px;
     margin-bottom: 15px;
+    transition: all 0.3s;
+}
+
+.product-row:hover {
+    border: 1px solid transparent;
+    box-shadow: 0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12);
+    transform: translateY(-2);
+    transition: all 0.3s;
+}
+
+table.fieldtable {
+    width: initial;
+    border: 1px solid rgba(0,0,0,.2);
+    border-radius: 0px;
+    box-shadow: none;
+}
+
+.fieldtable th {
+    background-image: none;
+    background-color: rgba(0,0,0,.2);
+    border-bottom: 1px solid rgba(0,0,0,.1);
+}
+
+.fieldtable td.fieldtype, .fieldtable td.fieldname {
+    border-bottom: 1px solid rgba(0,0,0,.1);
+    border-right: 1px solid rgba(0,0,0,.1);
+}
+
+.fieldtable td.fielddoc {
+    border-bottom: 1px solid rgba(0,0,0,.1);
+}
+
+table.params .paramname {
+    padding-right: 10px;
 }
 
 .product-logo {
     margin-top: .5em;
 }
 
+#kde-main-row {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.kde-product-row {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+.kde-product-column {
+    margin-left: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+}
+
 /**
  * Subgroup
  */
@@ -318,15 +526,20 @@
     display: none;
 }
 
+.memdoc {
+    border: 0;
+    border-radius: 0px 0px 6px 6px;
+    box-shadow: 0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12);
+}
+
 .memproto, dl.reflist dt {
-    background:  #0057ae;
+    background: var(--plasma-blue);
+    color: var(--on-plasma-blue);
     border-radius: 0;
-    border: 1px solid #0057ae;
 }
 
 .memname {
-    color: #eeeeee;
-    font-weight: bold;
+    color: var(--on-plasma-blue);
     text-shadow: none;
 }
 
@@ -350,22 +563,38 @@
 }
 
 .memproto span.mlabel {
-    background: #bbbbff;
-    color: #005766;
+    padding: 6px;
+    border: 0;
+    border-radius: 4px;
+    background: var(--base);
+    color: var(--on-base);
 }
 
 /**
  * Fragments
  */
 .fragment .line {
     line-height: 1.4;
+    white-space: pre;
 }
 
 /* Use div.fragment, not pre.fragment. pre.fragment is used for @verbatim blocks, which must keep their border */
 div.fragment {
-    background-color: #fefefe;
-    border: none;
-    border-radius: 5px;
+    background-color: #eff0f1;
+    border: 1px solid rgba(0,0,0,.2);
+    border-radius: 10px;
+    padding: 10px;
+    margin-top: 10px;
+    margin-bottom: 10px;
+    box-shadow: 0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12);
+}
+
+span.icona {
+    display: none;
+}
+
+table.directory td {
+    padding-bottom: 20px;
 }
 
 /**
diff --git a/src/kapidox/data/templates/base.html b/src/kapidox/data/templates/base.html
--- a/src/kapidox/data/templates/base.html
+++ b/src/kapidox/data/templates/base.html
@@ -45,43 +45,24 @@
     <li><a href="#cp-menu" accesskey="5">Skip to link menu</a></li>
   </ul>
 
-  <nav id="navbar" class="navbar navbar-static-top bg-primary">
+  <nav id="navbar" class="navbar navbar-static-top">
     <div class="container">
-      <div class="navbar-header">
-        <a class="navbar-brand" href="#">
-          <img alt="Brand" id="navbar-logo" src="{{ resources }}/kde-white.svg"/>
-        </a>
-      </div>
-      <p id="navbar-title" class="navbar-text">
-        {{title}} {#% block title %}{% endblock %#}
-      </p>
-    </div>
-  </nav>
-
-  <nav class="navbar">
-    <div class="container">
-      <ol class="breadcrumb navbar-nav">
-      {% for entry in breadcrumbs.entries %}
-        <li{% if loop.last %} class="active"{% endif %}><a href="{{ entry.href }}">{{ entry.text }}</a></li>
-      {% endfor %}
-      </ol>
-
-        <ul class="nav navbar-nav navbar-right">
-          <li><a href="https://www.kde.org/">KDE Home</a></li>
-          <li><a href="https://kde.org/contact/">Contact Us</a></li>
-        </ul>
-      </div>
+        <ol class="breadcrumb navbar-nav">
+        {% for entry in breadcrumbs.entries %}
+          <li{% if loop.last %} class="active"{% endif %}><a href="{{ entry.href }}">{{ entry.text }}</a></li>
+        {% endfor %}
+        </ol>
     </div>
   </nav> <!-- /header -->
 
-  <div id="body_wrapper" class="container">
-    <div class="row">
-      <div id="left" class="col-md-3">
-        {% block sidebar %}{% endblock %}
-      </div> <!-- /left -->
+  <div id="api-kde-org-sidebar">
+    {% block sidebar %}{% endblock %}
+  </div>
 
+  <div id="body_wrapper" class="container">
+    <div id="kde-main-row" class="row">
       <!-- begin main content -->
-      <div id="right" class="col-md-9">
+      <div id="main-column" class="col-md-9">
         <div class="row-fluid">
           <div class="page-header">
 
diff --git a/src/kapidox/data/templates/frontpage-sidebar.html b/src/kapidox/data/templates/frontpage-sidebar.html
--- a/src/kapidox/data/templates/frontpage-sidebar.html
+++ b/src/kapidox/data/templates/frontpage-sidebar.html
@@ -1,15 +1,16 @@
-<div class="menu-box">
+<div id="sidebar-header" class="menu-box">
     <div class="menu-title">
-        <h2>KDE Products for developers</h2>
+        <h2><a href="https://api.kde.org">api.kde.org</a></h2>
     </div>
+</div>
+<div class="menu-box">
     <div class="menu-content">
-    <p>Description of what you can find here</p>
-    <p>If you are looking for documentation about KDE software or how to use Plasma, please refer to our <a href="https://userbase.kde.org">userbase website</a>.</p>
+        <p>If you are looking for documentation about KDE software or how to use Plasma, please refer to our <a href="https://userbase.kde.org">userbase website</a>.</p>
     </div>
 </div>
 <div class="menu-box">
     <div class="menu-title">
-    <h2>Other KDE Products</h2>
+        <h2>Other KDE Products</h2>
     </div>
     <div class="menu-content">
     <ul>
diff --git a/src/kapidox/data/templates/frontpage.html b/src/kapidox/data/templates/frontpage.html
--- a/src/kapidox/data/templates/frontpage.html
+++ b/src/kapidox/data/templates/frontpage.html
@@ -3,69 +3,68 @@
 {% block page_title %}{{title}}{% endblock %}
 
 {% block head %}
-  <script type="text/javascript" src="{{resources}}/notetip.js"></script>
-  <script type="text/javascript" src="{{resources}}/frameworks.js"></script>
-  <link rel="stylesheet" type="text/css" href="{{resources}}/frameworks.css" />
-  <script>
-  $(document).ready(main);
-  </script>
+<script type="text/javascript" src="{{resources}}/notetip.js"></script>
+<script type="text/javascript" src="{{resources}}/frameworks.js"></script>
+<link rel="stylesheet" type="text/css" href="{{resources}}/frameworks.css" />
+<script>
+    $(document).ready(main);
+</script>
 {% endblock %}
 
 {% block title %}
-    The KDE products
+KDE Products
 {% endblock %}
 
 {% block content %}
-              <div class="textblock">
-                {% for para in intro %}
-                  <p>{{ para }}</p>
-                {% endfor %}
-              </div>
-              <h3>List of our products</h3>
+<div class="textblock">
+    {% for para in intro %}
+    <p>{{ para }}</p>
+    {% endfor %}
+</div>
 
-              {% for product in product_list | sort(attribute='name')%}
-                <div class="row">
-                  <div class="col-md-9">
-                    <div class="product-row">
-                      <div class="row">
+{% for product in product_list | sort(attribute='name')%}
+<div class="row">
+    <div class="col-md-9">
+        <div class="product-row">
+            <div class="kde-product-row">
 
-                        <div class="col-md-2 product-logo">
-                          <img src="{% if product.logo_url %} {{ product.logo_url }} {% else %}{{resources}}/default_product.png{% endif %}" width="80px" />
-                        </div>
+                <img src="{% if product.logo_url %} {{ product.logo_url }} {% else %}{{resources}}/default_product.png{% endif %}"
+                    width="80px" />
 
-                        <div class="col-md-10 product-descr">
-                          <ul class="list-unstyled">
-                            <li class=product-name><a name="prod-{{ product.name }}" href="{{ product.href }}">{{ product.fancyname }}</a></li>
-                            <li>{{ product.description }}</li>
-                            <li class="prod-maintainers"><b>Maintainer{% if product.maintainers | length > 1 %}s{% endif %}:</b>
-                          {% for maintainer in product.maintainers %}
-                              <a href="mailto:{{ maintainer.email }}">{{ maintainer.name }}</a>{% if not loop.last %},{% endif %}
-                          {% else %}
-                              <a href="mailto:kde-devel@kde.org">The KDE Community</a>
-                          {% endfor %}
-                            </li>
-                          {% if product.platforms %}
-                            <li class="prod-platforms"><b>Platform{% if product.platforms | length > 1 %}s{% endif %}:</b>
-                            {{ product.platforms | sort | join(' | ') }}</li>
-                          {% endif %}
-                          {% if qch or man %}
-                            <li class="prod-download">
-                            {% if qch %} [<a href="qch/{{product.name}}.qch">QCH file</a>]{% endif %}
-                            {% if man %} <a href="qch/{{product.name}}.man">MAN</a>{% endif %}
-                            </li>
-                          {% endif %}
-
-                          <!--<li>?? avaliable versions vX.X | vY.Y</li> -->
-                          </ul>
-                        </div> <!-- product-descr -->
-                      </div> <!-- row -->
-                    </div> <!-- product-row -->
-                  </div>
-                </div> <!-- row -->
-              {% endfor %}
+                <div class="kde-product-column">
+                    <h4><a name="prod-{{ product.name }}" href="{{ product.href }}">{{ product.fancyname }}</a></h4>
+                    <p>
+                        {{ product.description }}
+                    </p>
+                    <div>
+                        <b>Maintainer{% if product.maintainers | length > 1 %}s{% endif %}:</b>
+                        {% for maintainer in product.maintainers %}
+                        <a
+                            href="mailto:{{ maintainer.email }}">{{ maintainer.name }}</a>{% if not loop.last %},{% endif %}
+                        {% else %}
+                        <a href="mailto:kde-devel@kde.org">The KDE Community</a>
+                        {% endfor %}
+                    </div>
+                    {% if product.platforms %}
+                    <p>
+                        <b>Platform{% if product.platforms | length > 1 %}s{% endif %}:</b>{{ product.platforms | sort | join(' | ') }}
+                    </p>
+                    {% endif %}
+                    {% if qch or man %}
+                    <li class="prod-download">
+                        {% if qch %} [<a href="qch/{{product.name}}.qch">QCH file</a>]{% endif %}
+                        {% if man %} <a href="qch/{{product.name}}.man">MAN</a>{% endif %}
+                    </li>
+                    {% endif %}
+                </div>
+            </div> <!-- row -->
+        </div> <!-- product-row -->
+    </div>
+</div> <!-- row -->
+{% endfor %}
 
 {% endblock content %}
 
 {% block sidebar %}
-    {% include "frontpage-sidebar.html" %}
-{% endblock %}
+{% include "frontpage-sidebar.html" %}
+{% endblock %}
\ No newline at end of file
diff --git a/src/kapidox/data/templates/library-sidebar.html b/src/kapidox/data/templates/library-sidebar.html
--- a/src/kapidox/data/templates/library-sidebar.html
+++ b/src/kapidox/data/templates/library-sidebar.html
@@ -1,3 +1,8 @@
+<div id="sidebar-header" class="menu-box">
+  <div class="menu-title">
+      <h2><a href="https://api.kde.org">api.kde.org</a></h2>
+  </div>
+</div>
 <div class="menu-box">
   <a name="cp-menu" />
   <div class="menu-title">
@@ -22,7 +27,7 @@
   </div>
   <div class="menu-content">
     <form name="guideform">
-      <select class="form-control" name="guidelinks" style="width:100%;" onChange="window.location=document.guideform.guidelinks.options[document.guideform.guidelinks.selectedIndex].value">
+      <select class="form-control" name="guidelinks" style="width:80%;margin-left:auto;margin-right:auto;" onChange="window.location=document.guideform.guidelinks.options[document.guideform.guidelinks.selectedIndex].value">
         <option value="annotated.html">-- Choose --</option>
         {% for class in class_map.classes %}
         <option value="{{class.filename}}">{{class.classname}}</option>
diff --git a/src/kapidox/data/templates/subgroup-sidebar.html b/src/kapidox/data/templates/subgroup-sidebar.html
--- a/src/kapidox/data/templates/subgroup-sidebar.html
+++ b/src/kapidox/data/templates/subgroup-sidebar.html
@@ -1,3 +1,8 @@
+<div id="sidebar-header" class="menu-box">
+    <div class="menu-title">
+        <h2><a href="https://api.kde.org">api.kde.org</a></h2>
+    </div>
+</div>
 <div class="menu-box">
     <div class="menu-title">
     <h2>Table of Content</h2>