diff --git a/src/yasi_applets/install/install.html b/src/yasi_applets/install/install.html
index 008cf1f..d11b823 100644
--- a/src/yasi_applets/install/install.html
+++ b/src/yasi_applets/install/install.html
@@ -10,7 +10,7 @@
 
 <br />
 
-<img style="width: 400px; padding: 20px;" src="/install/static/slide1.png" /> <br />
+<img style="width: 400px; padding: 20px;" src="/install/static/img/slide1.png" /> <br />
 <p>
     Installing system, the rest of the process is automated.
 </p>
diff --git a/src/yasi_applets/main/static/slide1.png b/src/yasi_applets/install/static/img/slide1.png
similarity index 100%
rename from src/yasi_applets/main/static/slide1.png
rename to src/yasi_applets/install/static/img/slide1.png
diff --git a/src/templates/footer.html b/src/yasi_applets/main/footer.html
similarity index 100%
rename from src/templates/footer.html
rename to src/yasi_applets/main/footer.html
diff --git a/src/yasi_applets/main/header.html b/src/yasi_applets/main/header.html
new file mode 100644
index 0000000..001dd50
--- /dev/null
+++ b/src/yasi_applets/main/header.html
@@ -0,0 +1,20 @@
+<!-- Header -->
+<div id="titlebar" style="padding: 15px; margin: -15px; padding-bottom: 30px;"> 
+
+<!-- drag region class: -->
+<div id="titlebar" class="pywebview-drag-region" style="padding: 15px; margin: -15px; padding-bottom: 30px;">
+
+<a hx-get="/main/menu" hx-swap="outerHTML"/> <button class="button is-link"> ☰ </button </a>
+
+{% for item in menu_order %}
+    <a href="{{ menu[item][1]}}"> <button class="button is-{% if request.path == menu[item][1] %}info{% else %}dark{% endif %}"> {{ menu[item][0]}} </button></a>
+{% endfor %}
+
+
+<div style="position: absolute; top: 15px; right: 15px;">
+    <a hx-get="/main/help" hx-swap="outerHTML"/> <button class="button is-light"> <i class="fa fa-question" aria-hidden="true"></i>  </button></a>
+    <a hx-get="/main/quit" hx-swap="outerHTML"/><button onclick="closeApp()" class="button is-danger" >  🗙 </button></a>
+</div>
+
+</div> <!-- end pywebview-drag-region -->
+<!-- End Header -->
diff --git a/src/templates/layout.html b/src/yasi_applets/main/layout.html
similarity index 100%
rename from src/templates/layout.html
rename to src/yasi_applets/main/layout.html
diff --git a/src/yasi_applets/main/static/icons/language.jpg b/src/yasi_applets/main/static/icons/language.jpg
deleted file mode 100644
index 7f3a5fb..0000000
Binary files a/src/yasi_applets/main/static/icons/language.jpg and /dev/null differ
diff --git a/src/yasi_applets/main/templates/footer.html b/src/yasi_applets/main/templates/footer.html
new file mode 100644
index 0000000..6a2d931
--- /dev/null
+++ b/src/yasi_applets/main/templates/footer.html
@@ -0,0 +1,36 @@
+<!-- Buttons on the left -->
+<div style="position: absolute; bottom: 15px; left: 15px;">
+
+{% if previous_step %}
+    <!-- Why two of these? So that we can use two different keyboard shortcuts for back. -->
+    <button style="display: none;" hx-get="/{{ previous_step }}" hx-target="body"
+       hx-trigger="click, keydown[altKey&&key=='b'] from:body"></button>
+    <a href="/{{ previous_step }}"><button hx-get="/{{ previous_step }}" hx-target="body"
+       hx-trigger="click, keydown[ctrlKey&&code=='PageUp'] from:body" class="button is-light">Back</button></a>
+{% endif %}
+
+{% if bottom_menu %}
+   {{ bottom_menu | safe }}
+{% endif %}
+
+</div> <!-- end buttons on the left  -->
+
+
+<!-- Buttons on the right -->
+<div style="position: absolute; bottom: 15px; right: 15px;">
+
+{% if next_step %}
+
+    {% if next_step == "install" %}
+        <a href="/{{ next_step }}"><button hx-get="/{{ next_step }}" hx-target="body"
+	hx-trigger="click, keyup[altKey&&key=='i'] from:body" class="button is-link">Install</button></a>
+    {% else %}
+    <!-- Why two of these? So that we can use two different keyboard shortcuts for next. -->
+    <a href="/{{ next_step }}"<button hx-get="/{{ next_step }}" hx-target="body"
+       hx-trigger="click, keydown[ctrlKey&&code=='PageDown'] from:body" class=""></button></a>
+    <a href="/{{ next_step }}"<button hx-get="/{{ next_step }}" hx-target="body"
+       hx-trigger="click, keydown[altKey&&key=='n'] from:body" class="button is-link">Next</button></a>
+    {% endif %}
+    {% endif %}
+
+</div> <!-- end buttons on the right -->
diff --git a/src/templates/header.html b/src/yasi_applets/main/templates/header.html
similarity index 100%
rename from src/templates/header.html
rename to src/yasi_applets/main/templates/header.html
diff --git a/src/yasi_applets/main/templates/layout.html b/src/yasi_applets/main/templates/layout.html
new file mode 100644
index 0000000..00a09ed
--- /dev/null
+++ b/src/yasi_applets/main/templates/layout.html
@@ -0,0 +1,27 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link href="/main/static/bulma.css" rel="stylesheet">
+  <link href="/main/static/system-installer.css" rel="stylesheet">
+  <link rel="shortcut icon" href="/main/static/icons/blippie.png" type="image/x-icon">
+  <link rel="stylesheet" href="/main/static/fork-awesome.css">
+  <script src="/main/static/htmx.min.js" crossorigin="anonymous"></script>
+</head>
+<body>
+
+<div class="frame">
+{% include "header.html" %}
+
+<div class="applet">
+{% block body %}
+{% endblock %}
+</div>
+
+{% include "footer.html" %}
+
+</div> <!-- class "frame" -->
+
+</body>
+</html>