diff --git a/root/static/css/style.css b/root/static/css/style.css
index 415ec984..f11384ff 100644
--- a/root/static/css/style.css
+++ b/root/static/css/style.css
@@ -31,7 +31,6 @@ body {
 
 header {
     margin: 0;
-    background-color: #4CAF50;
 }
 
 header nav ul {
@@ -39,8 +38,9 @@ header nav ul {
     padding-left: 0;
 }
 
-header nav li {
-    display: inline;
+header nav .nav-item {
+    display: inline-flex;
+    align-items: center;
 }
 
 /* "Logout" must be button for POST request but style like link */
@@ -108,44 +108,17 @@ header #user_nav ul {
     align-items: flex-end;
 }
 
-header #user_nav ul p + div {
-    margin-top: 1em;
-}
-
-header #user_nav ul div:only-child {
-    margin-top: 3em;
-}
-
-header #user_nav h4 {
-    margin: 0;
-    padding: 0 0.5em 0 0.5em;
-    color: #f5f5ef;
-}
-
-header #user_nav h4 a {
-    color: #f5f5ef;
-}
-
-header nav input[name="logout"] {
-    background-color: #4CAF50;
-    color: #333333;
-}
-
-header nav input[name="logout"]:active,
-header nav input[name="logout"]:hover {
-    color: #f5f5ef;
-
-    box-shadow:         0px 0px 0px grey !important;
-}
-
 /*** project nav ***/
 
 header #project_nav a:hover {
-    background-color:#f5f5ef;
-    color: #333333;
+    color: #4CAF50;
 }
 
 /*** submenu nav ***/
+header #submenu_nav {
+    background-color: #4CAF50;
+}
+
 header #submenu_nav a:hover,
 header #submenu_nav a.current {
     color: #f5f5ef !important;
@@ -328,10 +301,52 @@ input[type=number].editable-content:not(:focus) {
     display: none;
 }
 
+.btn:focus {
+    box-shadow: none !important;
+}
+
+a.dark-link, button.dark-link {
+    color: #f5f5ef !important;
+}
+
+a.dark-link:hover, button.dark-link:hover {
+    text-decoration: none !important;
+    color: #4CAF50 !important;
+}
+
+.content-box {
+    background-color: var(--bs-light);
+    padding: 1.5rem;
+    border-radius: 1rem;
+    margin-bottom: 1rem;
+}
+
+.item-box {
+    background-color: #4CAF50;
+    width: 100px;
+    height: 100px;
+    padding: 0.5rem;
+    border-radius: 0.5rem;
+    display: flex;
+    align-items: center;
+    overflow: hidden; 
+}
+
+.item-box span {
+    display: inline;
+    width: 100%;
+    word-wrap: break-word;
+    white-space: normal;
+    -moz-hyphens: auto;
+   -o-hyphens: auto;
+   -webkit-hyphens: auto;
+   -ms-hyphens: auto;
+   hyphens: auto;
+}
+
 /******** footer part ********/
 
 footer {
-    background-color: #333333;
     color: #f5f5ef;
     position: absolute; /*necessary to position it at the bottom in all cases*/
     bottom: 0;
diff --git a/root/templates/homepage.tt b/root/templates/homepage.tt
index a22727c0..e4a5f7f7 100644
--- a/root/templates/homepage.tt
+++ b/root/templates/homepage.tt
@@ -1,25 +1,34 @@
 [% INCLUDE 'homepage_intro.tt' %]
 
+<div class="content-box">
 [% INCLUDE 'includes/recipes_of_the_day.tt' %]
 
-<h2>Recent public recipes</h2>
+        <h2>Recent public recipes</h2>
 
-<ul>
+        <ul class="list-unstyled d-flex flex-wrap gap-3">
 [% FOR recipe IN public_recipes %]
-    <li><a href="[% recipe.url %]">[% recipe.name | html %]</a></li>
+                <li><a class="item-box text-white" href="[% recipe.url %]"><span>[% recipe.name | html %]</span></a></li>
+[% END %]
+        </ul>
+
+[% IF public_recipes.size == 0 %]
+        <p><i>It looks like you don't have any recent public recipes yet.</i></p>
 [% END %]
-</ul>
 
 [% IF public_recipes.size == max_recipes %]
-    <p>Browse <a href="[% recipes_url %]">all public recipes</a></p>
+        <p>Browse <a href="[% recipes_url %]">all public recipes</a></p>
 [% END %]
 
-<h2>Active public Projects</h2>
+        <h2>Active public projects</h2>
 
-<ul>
+        <ul class="list-unstyled d-flex flex-wrap gap-3">
 [% FOR proj IN active_public_projects # don't overwrite $project! %]
-    <li>
-        <a href="[% proj.url %]">[% proj.name | html %]</a>
-    </li>
+                <li><a class="item-box text-white" href="[% proj.url %]"><span>[% proj.name | html %]</span></a></li>
 [% END %]
-</ul>
+        </ul>
+
+[% IF active_public_projects.size == 0 %]
+        <p><i>It looks like you don't have any active public projects yet.</i></p>
+[% END %]
+
+</div>
diff --git a/root/templates/homepage_intro.tt b/root/templates/homepage_intro.tt
index 6d1172af..d2950167 100644
--- a/root/templates/homepage_intro.tt
+++ b/root/templates/homepage_intro.tt
@@ -1 +1,30 @@
-<p>Coocook, a web application for collecting recipes and making food plans.</p>
+<div class="px-4 mb-5">
+    <p>Coocook is a web application for collecting recipes and making food plans. You can ...</p>
+</div>
+<div class="content-box mb-5">
+    <div class="d-flex justify-content-around align-items-center w-100">
+        <div class="d-flex flex-column gap-3 text-center">
+            <i class="material-icons fs-1">menu_book</i>
+            <span>collect recipes</span>
+        </div>
+        <i class="material-icons">east</i>
+        <div class="d-flex flex-column gap-3 text-center">
+            <i class="material-icons fs-1">restaurant_menu</i>
+            <span>create a food plan</span>
+        </div>
+        <i class="material-icons">east</i>
+        <div class="d-flex flex-column gap-3 text-center">
+            <i class="material-icons fs-1">fact_check</i>
+            <span>gather purchase lists</span>
+        </div>
+        <i class="material-icons">east</i>
+        <div class="d-flex flex-column gap-3 text-center">
+            <i class="material-icons fs-1">print</i>
+            <span>print a project overview</span>
+        </div>
+    </div>
+</div>
+<div class="px-4 mb-5">
+    <p>You are more interested in Coocook? Check out the <a href="https://coocook.org/faq">FAQ on Coocook.org</a> and <a href="https://lists.coocook.org/mailman/listinfo/coocook">join our mailing list</a> to get more informations.</p>
+    <p>You celebrate Coocook as much as we do and want to make it better too? Great! <a href="https://github.com/dboehmer/coocook/issues">Report bugs or suggestions for improvement</a> or even become part of the open volunteer development team.</p>
+</div>
diff --git a/root/templates/wrapper.tt b/root/templates/wrapper.tt
index 3c34eef3..b72c0972 100644
--- a/root/templates/wrapper.tt
+++ b/root/templates/wrapper.tt
@@ -32,93 +32,87 @@
 <body>
 <!--container div is necessary to keep the footer down, see https://matthewjamestaylor.com/bottom-footer -->
 <div id="container">
-    <header>
+    <header class="sticky-top">
 
-        <div class="container-fluid bg-header">
-            <div class="row">
-                <div class="col-6 d-flex align-items-center">
-                    <a class="navbar-brand py-3 px-4" href="[% homepage_url %]">
-                        <h1 class="text-dark">[% name | html %]</h1>
-                    </a>
-                </div>
-
-
-                <div class="col-6 login_logout d-flex align-items-center">
-                    <div class="w-100 py-2 text-end">
-[% IF user %]
-                        <h4>Welcome to [% name | html %], <a href="[% user_url %]">[% user.display_name | html %]</a></h4>
-[% END %]
-
-[% IF logout_url %]
-    [% IF project %]
-                        <p>You’re currently working on <a href="[% project_urls.project %]">project [% project.name | html%]</a></p>
-    [% ELSE %]
-                        <p>Please create or choose a project now.</p>
-    [% END %]
-[% END %]
-
-[% IF login_url %]
-                        <a class="pl-2" href="[% login_url %]"><i class="material-icons">person</i> Sign in</a>
-[% END %]
-
-[% IF register_url %]
-                        <a class="pl-2" href="[% register_url %]">Sign up</a>
-[% END %]
-
-[% IF settings_url %]
-                        <a class="pl-2" href="[% settings_url %]"><i class="material-icons">settings</i> Settings</a>
-[% END %]
-
-[% IF logout_url %]
-                        <form class="inline pl-2" method="post" action="[% logout_url %]">
-                            <button name="logout"><i class="material-icons">exit_to_app</i> Sign out</button>
-                        </form>
-[% END %]
-
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <div class="container-fluid p-0 m-0">
+        <div class="w-100 p-0 m-0">
             <div class="row p-0 m-0">
-                <div class="col-12 p-0 m-0 bg-dark">
-                    <nav class="navbar p-0 m-0 navbar-expand-md navbar-dark">
+                <div class="col-12 p-0 m-0 ">
+                    <nav class="navbar p-0 m-0 navbar-expand-md navbar-dark bg-dark">
                         <div class="navbar-toggler-right">
                             <button class="navbar-toggler px-1 ml-4" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
                                 <span class="navbar-toggler-icon"></span>
                             </button>
                         </div>
 
+                        <div class="collapse navbar-collapse flex-column" id="navbar">
+                            <div class="navbar-nav container-md d-flex justify-content-between align-items-center w-100 py-2 px-2">
+                                <div class="d-flex gap-2 mx-2">
+                                    <a class="navbar-brand text-white fs-4 fw-bold" href="[% homepage_url %]">[% name | html %]</a>
+                                    <ul class="d-flex p-0 m-0" id="project_nav">
+                                        <li class="nav-item group-end"><a class="nav-link [% font_color %]" href="[% dashboard_url ? dashboard_url : homepage_url %]">Start</a></li>
+[% IF project_urls %]
+                                        <li class="nav-item"><a class="nav-link" href="[% project_urls.project %]">Project</a></li>
+                                        <li class="nav-item"><a class="nav-link" href="[% project_urls.recipes %]">Recipes</a></li>
+                                        <li class="nav-item"><a class="nav-link" href="[% project_urls.articles %]">Articles</a></li>
+                                        <li class="nav-item"><a class="nav-link" href="[% project_urls.tags %]">Tags</a></li>
+                                        <li class="nav-item"><a class="nav-link" href="[% project_urls.purchase_lists %]">Purchase Lists</a></li>
+                                        <li class="nav-item"><a class="nav-link" href="[% project_urls.units %]">Units</a></li>
+                                        <li class="nav-item"><a class="nav-link" href="[% project_urls.import %]">Import</a></li>
+[% END %]
+                                    </ul>
+                                </div>
+                                <div class="d-flex gap-2 mx-2">
+[% IF login_url %]
+                                    <a class="btn btn-sm dark-link" href="[% login_url %]">Sign in</a>
+[% END %]
+[% IF register_url %]
+                                    <a class="btn btn-outline-light btn-sm dark-link" href="[% register_url %]">Sign up</a>
+[% END %]
 
+[% IF user %]
+                                    <div class="dropdown">
+                                        <a class="nav-link dropdown-toggle dark-link" href="#" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                                            <i class="material-icons">person</i> [% user.display_name | html %]
+                                        </a>
+                                        <ul class="dropdown-menu dropdown-menu-end dropdown-menu-dark" aria-labelledby="navbarDarkDropdownMenuLink">
+                                            <li><a class="dropdown-item" href="[% user_url %]">Profile</a></li>
+    [% IF settings_url %]
+                                            <li><a class="dropdown-item" href="[% settings_url %]">Settings</a></li>
+    [% END %]
+    [% IF logout_url %]
+                                            <li><form class="px-3 py-2" method="post" action="[% logout_url %]">
+                                                <button class="btn btn-sm btn-outline-light dark-link w-100" name="logout">Sign out</button>
+                                            </form></li>
+    [% END %]
+                                        </ul>
+                                    </div>
+[% END %]
 
-                        <div class="collapse navbar-collapse flex-column " id="navbar">
-                            <ul class="navbar-nav justify-content-left p-0 m-0 w-100 bg-dark py-1 px-2" id="project_nav">
-                                <span class="pl-4"></span>
-                                <li class="nav-item group-end"><a class="nav-link [% font_color %]" href="[% dashboard_url ? dashboard_url : homepage_url %]">Start</a></li>
+                                </div>
+                            </div>
 
-[% IF project_urls %]
-                                <li class="nav-item"><a class="nav-link" href="[% project_urls.project %]">Project</a></li>
-                                <li class="nav-item"><a class="nav-link" href="[% project_urls.recipes %]">Recipes</a></li>
-                                <li class="nav-item"><a class="nav-link" href="[% project_urls.articles %]">Articles</a></li>
-                                <li class="nav-item"><a class="nav-link" href="[% project_urls.tags %]">Tags</a></li>
-                                <li class="nav-item"><a class="nav-link" href="[% project_urls.purchase_lists %]">Purchase Lists</a></li>
-                                <li class="nav-item"><a class="nav-link" href="[% project_urls.units %]">Units</a></li>
-                                <li class="nav-item"><a class="nav-link" href="[% project_urls.import %]">Import</a></li>
-[% END %]
-                            </ul>
-
-                            <ul class="navbar-nav justify-content-left w-100 bg-header py-1 px-2" id="submenu_nav">
-                                <span class="pl-4"></span>
+                            <div class="w-100" id="submenu_nav">
+                                <div class="navbar-nav d-flex justify-content-between align-items-center container-md px-2">
+                                    <ul class="d-flex p-0 m-0">
 [% FOR item IN submenu_items;
     IF item.url %]
-                                <li class="nav-item"><a class="nav-link text-dark" href="[% item.url %]">[% item.text %]</a></li>
+                                        <li class="nav-item"><a class="nav-link text-dark" href="[% item.url %]">[% item.text %]</a></li>
     [% ELSE; # TODO setting href="" doesn’t work if page is response to POST request and URL isn’t available via GET %]
-                                <li class="nav-item active"><a class="nav-link" href="" class="current">[% item.text %]</a></li>
+                                        <li class="nav-item active"><a class="nav-link" href="" class="current">[% item.text %]</a></li>
     [% END;
 END %]
-                            </ul>
-
+                                    </ul>
+                                    <div>
+[% IF logout_url %]
+    [% IF project %]
+                                        <p class="text-dark my-2">You’re currently working on <a class="text-dark" href="[% project_urls.project %]">project [% project.name | html%]</a></p>
+    [% ELSE %]
+                                        <p class="text-dark my-2">Please create or choose a project now.</p>
+    [% END %]
+[% END %]
+                                    </div>
+                                </div>
+                            </div>
                         </div>
 
                     </nav>
@@ -130,7 +124,7 @@ END %]
 
 
     <main>
-        <div class="container-fluid pb-2"><!-- main container-fluid -->
+        <div class="container-md pb-2"><!-- main container-fluid -->
             <div class="row py-3">
 
                 <div class="col-12">
@@ -156,13 +150,13 @@ END %]
     </main>
 
     <footer class="bg-dark text-white">
-        <div class="container-fluid">
+        <div class="container-md">
             <div class="row">
                 <div class="col-md">
                     <h3><span class="tiny">Browse</span></h3>
-                    <ul class="non-intended small">
-                        <li><a href="[% recipes_url %]">Recipes</a></li>
-                        <li><a href="[% projects_url %]">Projects</a></li>
+                    <ul class="list-unstyled small">
+                        <li><a class="dark-link" href="[% recipes_url %]">Recipes</a></li>
+                        <li><a class="dark-link" href="[% projects_url %]">Projects</a></li>
                     </ul>
                 </div>
 
@@ -170,10 +164,10 @@ END %]
                     <h3><span class="tiny">Get Help</span></h3>
                     <ul class="list-unstyled small">
 [% IF faq_url %]
-                        <li><a href="[% faq_url %]"><abbr title="Frequently Asked Questions">FAQ</abbr></a></li>
+                        <li><a class="dark-link" href="[% faq_url %]"><abbr title="Frequently Asked Questions">FAQ</abbr></a></li>
 [% END %]
 [% FOR help_link IN help_links %]
-                        <li><a href="[% help_link.url %]">[% help_link.title | html %]</a></li>
+                        <li><a class="dark-link" href="[% help_link.url %]">[% help_link.title | html %]</a></li>
 [% END %]
                     </ul>
 
@@ -181,13 +175,13 @@ END %]
 
 [% IF admin_url %]
                 <div class="col-md">
-                    <h3><span class="tiny"><a href="[% admin_url %]">Admin</a></span></h3>
+                    <h3><span class="tiny"><a class="dark-link" href="[% admin_url %]">Admin</a></span></h3>
                     <ul class="list-unstyled small">
-                        <li><a href="[% admin_urls.faq %]">FAQ</a></li>
-                        <li><a href="[% admin_urls.organizations %]">Organizations</a></li>
-                        <li><a href="[% admin_urls.projects %]">Projects</a></li>
-                        <li><a href="[% admin_urls.terms %]">Terms</a></li>
-                        <li><a href="[% admin_urls.users %]">Users</a></li>
+                        <li><a class="dark-link" href="[% admin_urls.faq %]">FAQ</a></li>
+                        <li><a class="dark-link" href="[% admin_urls.organizations %]">Organizations</a></li>
+                        <li><a class="dark-link" href="[% admin_urls.projects %]">Projects</a></li>
+                        <li><a class="dark-link" href="[% admin_urls.terms %]">Terms</a></li>
+                        <li><a class="dark-link" href="[% admin_urls.users %]">Users</a></li>
                     </ul>
                 </div>
 [% END %]
@@ -196,10 +190,10 @@ END %]
                 <div class="col-md">
                     <h3><span class="tiny">About [% name | html %]</span></h3>
                     <ul class="list-unstyled small">
-                        <li><a href="[% statistics_url %]">Statistics</a></li>
-                        <li><a href="[% about_url %]">[% about_title %]</a></li>
+                        <li><a class="dark-link" href="[% statistics_url %]">Statistics</a></li>
+                        <li><a class="dark-link" href="[% about_url %]">[% about_title %]</a></li>
 [% IF terms_url %]
-                        <li><a href="[% terms_url %]">Terms</a></li>
+                        <li><a class="dark-link" href="[% terms_url %]">Terms</a></li>
 [% END %]
                     </ul>