diff --git a/Podcast/assets/static/style.css b/Podcast/assets/static/style.css
index 7ff6e0b..d1effe2 100644
--- a/Podcast/assets/static/style.css
+++ b/Podcast/assets/static/style.css
@@ -1,6 +1,7 @@
 body {
     font-family: 'Verdana', sans-serif;
-    margin: 50px 25px;
+    margin:0;
+
 }
 
 a {
@@ -11,32 +12,75 @@ a:hover {
     color: #33bbdf;
 }
 
-header, footer, div.page {
-    width: 760px;
-    margin: 0 auto;
-    background: #daeef3;
-    padding: 20px 30px;
+
+header {
+    display: flex;
+    flex-flow: row-reverse wrap;
+    
+    height:auto;
+    width:100%;
+    background: transparent;
 }
 
 header h1 {
-    color: #169bbd;
+    flex: 1;
+    background: #5522ee;
+    color: #4010b0;
     margin: 0;
     font-weight: normal;
     font-size: 42px;
 }
 
+header nav {
+    background:#4010b0;
+    color: #5522ee;    
+    flex: 3;
+}
+
 header nav ul {
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: space-around;
+    width:100%;
     list-style: none;
     margin: 0;
     padding: 0;
 }
 
 header nav ul li {
-    display: inline;
-    margin: 0 8px 0 0;
+    display: block;
+    margin:0;
     padding: 0;
 }
 
-div.page {
-    background: #f1fbfe;
+header nav ul li a {
+    color: #5522ee;
+    text-decoration: none;
+    font-weight: bold;
+}
+
+header nav ul li a:hover {
+    color: #7744ff;
+}
+
+div#flex {
+    display: flex;
+    flex-flow: row wrap;
+}
+
+main {
+    flex: 3;
+    background: #4010b0;
+    color: #5522ee;
+}
+
+aside {
+    flex: 1;
+    background: #5522ee;
+    color: #4010b0;
+}
+
+footer {
+    width:100%;
+    height:auto;
 }
diff --git a/Podcast/templates/layout.html b/Podcast/templates/layout.html
index 7bef548..9d5924e 100644
--- a/Podcast/templates/layout.html
+++ b/Podcast/templates/layout.html
@@ -4,7 +4,7 @@
 <title>{% block title %}Welcome{% endblock %} — PodcastLektor</title>
 <body>
   <header>
-    <h1>PodcastLektor</h1>
+    <h1>Podcast</h1>
     <nav>
       <ul class="nav navbar-nav">
         <li{% if this._path == '/' %} class="active"{% endif
@@ -18,10 +18,15 @@
             %}><a href="{{ href|url }}">{{ title }}</a></li>
         {% endfor %}
       </ul>
-    </nav>
+  </nav>  
   </header>
-  <div class="page">
+ <div id="flex">
+  <main>
     {% block body %}{% endblock %}
+  </main>
+  <aside>
+    {% block aside %}<h1>Widgets</h1>{% endblock %}
+  </aside>
   </div>
   <footer>
     &copy; Copyright 2022 by Homer S..
