diff --git a/ui/src/lib/Nav.svelte b/ui/src/lib/Nav.svelte
index 7658466..a183bdb 100644
--- a/ui/src/lib/Nav.svelte
+++ b/ui/src/lib/Nav.svelte
@@ -20,7 +20,7 @@
 
 <!-- This example requires Tailwind CSS v2.0+ -->
 <nav class="h-full">
-  <div class="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8 h-full">
+  <div class="px-2 sm:px-6 lg:px-8 h-full">
     <div class="relative flex items-center justify-between h-full">
       <div class="absolute inset-y-0 left-0 flex items-center sm:hidden">
         <!-- Mobile menu button-->
@@ -94,7 +94,7 @@
             alt="Workflow"
           /> -->
         </div>
-        <div class="hidden sm:block sm:ml-6 w-full">
+        <div class="hidden sm:block sm:ml-6 w-full sm:mt-3">
           <div class="flex justify-end space-x-4">
             <!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
 
@@ -287,7 +287,7 @@
 
 <style>
   .nav-default {
-    @apply text-gray-300 px-3 py-2 rounded-md text-sm font-medium;
+    @apply text-gray-300 px-3 py-2 rounded-md text-base font-medium;
   }
 
   .nav-default:hover {
diff --git a/ui/src/routes/plans/new/+page.svelte b/ui/src/routes/plans/new/+page.svelte
index f9bd3e8..2f4d0e8 100644
--- a/ui/src/routes/plans/new/+page.svelte
+++ b/ui/src/routes/plans/new/+page.svelte
@@ -580,10 +580,12 @@
 />
 
 <!-- custom header introduced to enable planning to be more inline with the beginning of the page -->
-<div class="custom-background" style="height: 8vh">
+<div class="custom-background" style="height: 15vh">
   <div class="mx-auto px-2 sm:px-6 lg:px-8">
-    <h2 class="pt-1 text-white text-2xl">Planning</h2>
-    <p class="text-white text-xs">This page is for demonstration purposes only</p>
+    <h2 class="pt-1 text-white text-3xl">Planning</h2>
+    <p class="text-white text-xs">
+      Creating and modifying a plan, and recording actual activity
+    </p>
   </div>
 </div>
 
diff --git a/ui/static/IMG_5548.jpg b/ui/static/IMG_5548.jpg
new file mode 100644
index 0000000..7c6e35d
Binary files /dev/null and b/ui/static/IMG_5548.jpg differ
diff --git a/ui/static/IMG_9114.jpg b/ui/static/IMG_9114.jpg
new file mode 100644
index 0000000..fcb59b7
Binary files /dev/null and b/ui/static/IMG_9114.jpg differ
diff --git a/ui/static/IMG_9495.jpg b/ui/static/IMG_9495.jpg
new file mode 100644
index 0000000..07c35d1
Binary files /dev/null and b/ui/static/IMG_9495.jpg differ
diff --git a/ui/static/dsf.jpg b/ui/static/dsf.jpg
new file mode 100644
index 0000000..2b7121a
Binary files /dev/null and b/ui/static/dsf.jpg differ
diff --git a/ui/static/washing-machine.svg b/ui/static/washing-machine.svg
new file mode 100644
index 0000000..65f26d9
--- /dev/null
+++ b/ui/static/washing-machine.svg
@@ -0,0 +1,9 @@
+<svg width="64" height="64" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
+    <g fill="none">
+        <rect width="32" height="40" x="8" y="4" stroke="currentColor" stroke-width="4" rx="2"/>
+        <path stroke="currentColor" stroke-width="4" d="M8 12a2 2 0 0 0 2 2h28a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2H10a2 2 0 0 0-2 2z"/>
+        <circle cx="14" cy="9" r="2" fill="currentColor"/>
+        <circle cx="20" cy="9" r="2" fill="currentColor"/>
+        <circle cx="24" cy="29" r="7" stroke="currentColor" stroke-width="4"/>
+    </g>
+</svg>
\ No newline at end of file