diff --git a/app/assets/stylesheets/styles.scss b/app/assets/stylesheets/styles.scss
index bf8eddbcc..9305262aa 100644
--- a/app/assets/stylesheets/styles.scss
+++ b/app/assets/stylesheets/styles.scss
@@ -1,3 +1,6 @@
+$skills-blue: #3b7bbe;
+$skills-text-gray: #8e8e8e;
+
 @import "bootstrap";
 
 .modal-dialog {
@@ -9,58 +12,34 @@
   flex-grow: 1;
 }
 
+.cursor-pointer {
+  cursor: pointer;
+}
+
 .navbar {
   flex-direction: row;
   list-style-type: none;
   margin: 0;
   padding: 0;
-}
 
-.nav-link {
-  color: white;
-  text-decoration: none;
-}
+  .nav-link {
+    color: white;
+    text-decoration: none;
+  }
 
-.nav-pad {
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
+  .scale-icon-06 {
+    transform: scale(0.6);
+  }
 
-.nav-pad :hover {
-  cursor: pointer;
+  .scale-icon-08 {
+    transform: scale(0.8);
+  }
 }
 
-.align-center {
-  display: flex;
-  align-items: center;
+pzsh-topbar {
+  background-color: $skills-blue
 }
 
-.sticky-header {
-  position: sticky;
-  top: 0;
-}
-
-.scale-icon-06 {
-  transform: scale(0.6);
-}
-
-.scale-icon-08 {
-  transform: scale(0.8);
-}
-
-.border-r-l {
-  border-right: 1px solid;
-  border-left: 1px solid;
-}
-
-.top-bar-color {
-  background-color: #3b7bbe
-}
-
-.grey-color {
-  color: #8e8e8e;
-}
-
-.small-text {
-  font-size: 10px;
-}
+.text-gray {
+  color: $skills-text-gray;
+}
\ No newline at end of file
diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml
index 891f576fd..b87a0414a 100644
--- a/app/views/layouts/application.html.haml
+++ b/app/views/layouts/application.html.haml
@@ -11,33 +11,33 @@
     = favicon_link_tag "favicon.png"
   %body.d-flex.justify-content-center
     %pzsh-container.content
-      %div.sticky-header
-        %div.d-flex.justify-content-between
+      %div.position-sticky.top-0.z-3
+        %div.d-flex.justify-content-between.bg-white
           %div.d-flex
             %div.mb-1.mt-1
               %img{:src=> "/assets/logo.svg",:height=>"32"}
-            %text.d-flex.align-items-end.ms-2.small-text= "4.4.0"
-          %ul.navbar.grey-color
-            %li.align-center.nav-pad.border-r-l.h-100
+            %text.d-flex.align-items-end.ms-2.small= "4.4.0"
+          %ul.navbar.text-gray
+            %li.d-flex.align-items-center.cursor-pointer.ps-2.pe-2.border-start.border-end.h-100
               %pzsh-icon.scale-icon-06(name="user")
               %text= "Curtis Jackson"
-            %li.align-center.nav-pad
-              %a.align-center{:href => "https://google.com"}
-                %pzsh-icon.scale-icon-08.grey-color(name="question-circle")
-            %li.align-center.nav-pad.border-r-l.h-100
+            %li.d-flex.align-items-center.cursor-pointer.ps-2.pe-2
+              %a.d-flex.align-items-center{:href => "https://github.com/puzzle/skills/issues"}
+                %pzsh-icon.scale-icon-08.text-gray(name="question-circle")
+            %li.d-flex.align-items-center.cursor-pointer.border-start.border-end.h-100.ps-2.pe-2
               %a= "Logout"
         %div
-          %pzsh-topbar.p-0.top-bar-color
+          %pzsh-topbar.p-0
             %div.d-flex.justify-content-center
               %ul.navbar
                 %li
-                  %a.nav-link.nav-pad= "Profil"
+                  %a.nav-link.cursor-pointer.ps-2.pe-2= "Profil"
                 %li
-                  %a.nav-link.nav-pad= "Skill Suche"
+                  %a.nav-link.cursor-pointer.ps-2.pe-2= "Skill Suche"
                 %li
-                  %a.nav-link.nav-pad= "CV Suche"
+                  %a.nav-link.cursor-pointer.ps-2.pe-2= "CV Suche"
                 %li
-                  %a.nav-link.nav-pad{href: "/skills"} Skillset
+                  %a.nav-link.cursor-pointer.ps-2.pe-2{href: skills_path} Skillset
       %div.container-fluid
         %div.row.d-flex.justify-content-center
           %div