diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
index 31a05fe..228aabc 100644
--- a/src/lib/components/Header.svelte
+++ b/src/lib/components/Header.svelte
@@ -30,7 +30,7 @@
       bottom: 0;
       left: 0;
       z-index: 3;
-      border-top: 1px solid var(--color-text);
+      // border-top: 1px solid var(--color-text);
     }
   }
 </style>
\ No newline at end of file
diff --git a/src/lib/components/Loader.svelte b/src/lib/components/Loader.svelte
new file mode 100644
index 0000000..1390b12
--- /dev/null
+++ b/src/lib/components/Loader.svelte
@@ -0,0 +1,68 @@
+<div class="loader">
+  <div class="lds-circle"><div></div></div>
+  <p>Loading...</p>
+</div>
+
+<style lang="scss">
+.loader {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  transform: translate(-50%, -50%);
+  text-align: center;
+  opacity: 0;
+  transform: translateY(100%);
+  animation: fade-in .5s cubic-bezier(0.165, 0.84, 0.44, 1) .3s forwards;
+  display: flex;
+  align-items: center;
+  padding: 15px var(--spacing-outer);
+  z-index: 1000;
+  background-color: var(--color-bg);
+
+  & p {
+    font-size: .75em;
+    line-height: 1;
+    margin: 0;
+    display: inline-block;
+  }
+}
+.lds-circle {
+  display: flex;
+  align-items: center;
+  transform: translateZ(1px);
+}
+.lds-circle > div {
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+  margin: 8px;
+  border-radius: 50%;
+  background: var(--color-text);
+  animation: lds-circle 6s cubic-bezier(0, 0.2, 0.8, 1) infinite;
+}
+@keyframes lds-circle {
+  0%, 100% {
+    animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5);
+  }
+  0% {
+    transform: rotateY(0deg);
+  }
+  50% {
+    transform: rotateY(1800deg);
+    animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1);
+  }
+  100% {
+    transform: rotateY(3600deg);
+  }
+}
+@keyframes fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0%);
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/lib/components/MainNav.svelte b/src/lib/components/MainNav.svelte
index 2cf7e30..89b0d21 100644
--- a/src/lib/components/MainNav.svelte
+++ b/src/lib/components/MainNav.svelte
@@ -79,7 +79,6 @@
   }
   .close {
     top: 0.033em;
-    color: #FFF;
   }
   #menustate, #nav, .close {
     /* Hide the checkbox, menu and close button by default */
diff --git a/src/lib/components/WorkCanvas.svelte b/src/lib/components/WorkCanvas.svelte
index 367b3e3..bc4c7f1 100644
--- a/src/lib/components/WorkCanvas.svelte
+++ b/src/lib/components/WorkCanvas.svelte
@@ -29,7 +29,8 @@ onMount(()=>{
     antialias: true,
     autoDensity: true, 
     resolution: 2,
-    backgroundAlpha: 0,
+    backgroundAlpha: 1,
+    backgroundColor: 0x223ad4,
     view: canvas,
   });
   
@@ -112,7 +113,6 @@ onMount(()=>{
     imgsToCanvas.forEach((element) => {
       imgElems.push(element);
       let canvasImg = createCanvasImg(element as HTMLImageElement, app.stage);
-      // canvasImg.tint = 0xff9494;
       canvasImgs.push(canvasImg);
     })
   }
diff --git a/src/lib/styles/global.scss b/src/lib/styles/global.scss
index 51ef663..f98beac 100644
--- a/src/lib/styles/global.scss
+++ b/src/lib/styles/global.scss
@@ -3,8 +3,10 @@
   --spacing-nav: 5vw;
   // --color-bg: #FFF;
   // --color-text: #000;
-  --color-bg: #00117f;
-  --color-text: #FF9494;
+  // --color-bg: #00117f;
+  --color-bg: #223ad4;
+  // --color-text: #FF9494;
+  --color-text: #FFF;
   --aspect-ratio-heroes: 1.5;
   --font-size-p: clamp(20px, 1.6vw, 1.6vw);
 
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 40b9edd..5b27d80 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,6 +1,7 @@
 <script lang='ts'>
   import '$lib/styles/global.scss';
   import Header from '$lib/components/Header.svelte';
+  import Loader from '$lib/components/Loader.svelte';
 	import { fade } from 'svelte/transition';
   import { navigating } from '$app/stores';
   export let data;
@@ -13,24 +14,8 @@
       class="content"
     >
     {#if $navigating} 
-      <div class="loader">Loading {JSON.stringify($navigating.to?.route.id)}</div>
+      <Loader />
     {/if}
       <slot />
     </div>
-  {/key}
-
-  <style lang="scss">
-    .loader {
-      position: fixed;
-      top: calc(50% - 0.5em);
-      left: 0;
-      width: 100%;
-      height: 1em;
-      background: var(--color-bg);
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      font-size: 2rem;
-      z-index: 1000;
-    }
-  </style>
\ No newline at end of file
+  {/key}
\ No newline at end of file
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 4c16f90..f5462ba 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,5 +1,6 @@
 <script lang='ts'>
   import HomeCanvas from '$lib/components/HomeCanvas.svelte';
+  import Loader from '$lib/components/Loader.svelte';
   import { onMount } from 'svelte';
   import { gsap } from 'gsap';
   import ScrollTrigger from 'gsap/dist/ScrollTrigger';
@@ -60,10 +61,7 @@
 
 </script>
 {#if !mounted}
-  <div class="loader">
-    <div class="lds-circle"><div></div></div>
-    <p>Loading...</p>
-  </div>
+  <Loader />
 {/if}
 <article class="scroller">
   <section class="splash"> 
@@ -71,16 +69,7 @@
   </section>
   <section class="intro">
     <h2>As a Creative Web Developer ...</h2> 
-    <div class="cols-2">
-      <div>
-        <p>I specialise in delivering beautifully crafted bespoke websites.</p> 
-        <!-- <p>Averse to blindly following the latest tech trends, I put the experience of both my client and the product's audience first.</p>
-      </div>
-      <div>
-        <p>I consult on the best suited technology and approach for every project and execute it.</p>
-        <p>Whether it is pure HTML/CSS/Javascript, a 'monolithic' CMS like WordPress, a modern framework like React/Svelte, or a combination.</p> -->
-      </div>
-    </div>
+    <p>I specialise in delivering beautifully crafted bespoke websites.</p> 
     <div class="cta">
       <a href="/work" class="button">Learn More</a>
       <a href="/work" class="button button--primary">Hire Simon</a>
@@ -88,14 +77,7 @@
   </section>
   <section class="more">
     <h2>As a UX & Graphic Designer...</h2> 
-    <div class="cols-2">
-      <!-- <div>
-        <p>I worked for a wide range of clients, including Booking.com and Adidas, but also with startups and independent brands.</p>
-      </div> -->
-      <div>
-        <p>I have designed Websites, Housestyles, Typefaces, Advertising campaigns and Print publications for them.</p>
-      </div>
-    </div>
+    <p>I have designed Websites, Housestyles, Typefaces, Advertising campaigns and Print publications for them.</p>
     <div class="cta">
       <a href="/work" class="button">Learn More</a>
       <a href="/work" class="button button--primary">Hire Simon</a>
@@ -110,45 +92,6 @@
 </article>
 <HomeCanvas textsToCanvas={canvasElems}/>
 <style lang="scss">
-  .loader {
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    text-align: center;
-
-    & p {
-      font-size: 1.25em;
-    }
-  }
-  .lds-circle {
-    display: inline-block;
-    transform: translateZ(1px);
-  }
-  .lds-circle > div {
-    display: inline-block;
-    width: 64px;
-    height: 64px;
-    margin: 8px;
-    border-radius: 50%;
-    background: var(--color-text);
-    animation: lds-circle 2.4s cubic-bezier(0, 0.2, 0.8, 1) infinite;
-  }
-  @keyframes lds-circle {
-    0%, 100% {
-      animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5);
-    }
-    0% {
-      transform: rotateY(0deg);
-    }
-    50% {
-      transform: rotateY(1800deg);
-      animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1);
-    }
-    100% {
-      transform: rotateY(3600deg);
-    }
-  }
   .scroller {
     font-size: clamp(32px, 4.5vw, 4.5vw);
   }
diff --git a/src/routes/work/+page.svelte b/src/routes/work/+page.svelte
index 51d6053..684026a 100644
--- a/src/routes/work/+page.svelte
+++ b/src/routes/work/+page.svelte
@@ -25,7 +25,7 @@
   });
 </script>
 
-<h1 class="headline"><span>Casestudies</span></h1>
+<h1 class="headline"><span>Happy Clients</span></h1>
   <div class="works">
     
     {#each data.posts as work, i}
diff --git a/src/routes/work/[slug]/+page.svelte b/src/routes/work/[slug]/+page.svelte
index 46dc5c1..147b61a 100644
--- a/src/routes/work/[slug]/+page.svelte
+++ b/src/routes/work/[slug]/+page.svelte
@@ -17,8 +17,8 @@
     
     gsap.to('.work', {
       xPercent: -100,
-      duration: .66,
-      ease: "cubic.out",
+      duration: .4,
+      ease: "expo.out",
       delay: .2
     })
     
@@ -64,7 +64,9 @@
       duration: .6,
       ease: "cubic.inOut",
       onStart: () => {
-        document.querySelector('.coverclone')?.remove();
+        setTimeout(() => {
+          document.querySelector('.coverclone')?.remove();
+        }, 100);
       },
       onComplete: () => {
         gsap.to('.heromask', {
diff --git a/src/routes/work/md/peak.md b/src/routes/work/md/peak.md
new file mode 100644
index 0000000..43fbf66
--- /dev/null
+++ b/src/routes/work/md/peak.md
@@ -0,0 +1,8 @@
+---
+title: peak.capital
+header_bg_image: peak_hero_ewp1wb
+order: 12
+description: Peak Capital description
+svg: '<svg class="peak-logo-svg" xmlns="http://www.w3.org/2000/svg" viewBox="-1 -1 102 102"><style>.peak-logo-svg-circle{fill: currentColor}.peak-logo-svg-letters{fill:var(--color-bg)}</style><circle class="peak-logo-svg-circle" cx="50" cy="50" r="50"></circle><polygon class="peak-logo-svg-letters" points="70.45 39.19 70.45 61.48 75.19 61.48 75.19 53.82 78.47 50.48 84.61 61.48 90.66 61.48 82.14 46.79 89.65 39.19 83.69 39.19 75.19 47.68 75.19 39.19 70.45 39.19"></polygon><polygon class="peak-logo-svg-letters" points="43.83 43.41 43.83 39.22 28.98 39.22 28.98 61.48 43.83 61.48 43.83 57.29 33.71 57.29 33.71 52.23 43.2 52.23 43.2 48.03 33.71 48.03 33.71 43.41 43.83 43.41"></polygon><path class="peak-logo-svg-letters" d="M45.77,61.48h5.12L51.48,60a3,3,0,0,1,.16-.36,6,6,0,0,1,11-.21,2.92,2.92,0,0,1,.14.31l.7,1.78h5.15l-8.9-22.26h-5Zm13.95-9.63a10.56,10.56,0,0,0-2.53-.31,9.85,9.85,0,0,0-2.55.33l2.56-6.52Z"></path><path class="peak-logo-svg-letters" d="M9.34,39.22V61.48h4.73V53.57h3.4c5.56,0,9-2.71,9-7.18s-3.46-7.17-9-7.17Zm12.29,7.17c0,1.91-1.48,3-4.16,3h-3.4v-6h3.4C20.15,43.41,21.63,44.49,21.63,46.39Z"></path></svg>'
+---
+Peak is an early-stage investment fund backed by entrepreneurs in Europe.
\ No newline at end of file
diff --git a/src/routes/work/md/uncommon.md b/src/routes/work/md/uncommon.md
new file mode 100644
index 0000000..f095742
--- /dev/null
+++ b/src/routes/work/md/uncommon.md
@@ -0,0 +1,9 @@
+---
+title: Uncommonbio.co
+header_bg_image: uncommon_hero_jf1in9
+order: 12
+description: Peak Capital description
+svg: '<svg id="uncommonLogo" x="0" y="0" viewBox="0 0 932 110.7" style="enable-background:new 0 0 932 110.7; fill: currentColor;"><path id="n7" class="uncommonLogo-letter" d="M828.9 3.5h30.5v9.6C865.6 4.9 878.2 0 889.3 0c10.2 0 21.6 3.1 28.1 9.1 8.4 7.5 14.7 19.9 14.7 32v66.4h-30.3V48.8c0-5-1.8-12.9-4.6-15.7-2.7-2.8-6.7-6.8-16.2-6.8s-14.8 4.9-17.5 8.9c-2.3 3.3-4.1 7.4-4.1 13.6v58.8h-30.5V3.5z"></path><path id="o6" class="uncommonLogo-letter" d="M801.2 17.2c-10.8-10.7-24.1-16-39.6-16s-28.7 5.3-39.5 16C711.4 27.7 706 40.6 706 56c0 15.3 5.4 28.3 16.1 39 10.7 10.5 23.9 15.8 39.5 15.8s28.8-5.3 39.6-16C812 84.3 817.5 71.3 817.5 56c0-15.4-5.4-28.3-16.3-38.8zm-21.7 57.1c-4.9 5-10.8 7.5-17.9 7.5s-13-2.5-17.7-7.5c-4.9-5-7.3-11.1-7.3-18.4 0-7.2 2.4-13.4 7.1-18.4 4.9-5 10.8-7.5 17.9-7.5s13 2.5 17.9 7.5c4.9 5 7.3 11.1 7.3 18.4 0 7.3-2.5 13.4-7.3 18.4z"></path><path id="mm5" class="uncommonLogo-letter" d="M446.9 3.5h30.5v9.6C483.6 4.9 496.2 0 507.3 0c10.2 0 21.6 3.1 28.1 9.1 3.3 2.9 6.3 6.7 8.7 10.8 3.7-4.2 6.3-6.8 6.3-6.8C557.1 6.2 569.1 0 580.2 0c10.2 0 21.6 3.1 28.1 9.1 3.3 3 6.3 6.7 8.7 10.9 3.7-4.2 6.4-6.9 6.4-6.9C630.1 6.2 642.1 0 653.2 0c10.2 0 21.6 3.1 28.1 9.1 8.4 7.5 14.7 19.9 14.7 32v66.4h-30.3V48.7c0-5-1.8-12.9-4.6-15.7-2.7-2.8-6.7-6.8-16.2-6.8s-14.8 4.9-17.5 8.9c-2.3 3.3-4.1 7.4-4.1 13.6v58.8h-30.7V48.7c0-5-1.8-12.9-4.6-15.7-2.7-2.8-6.7-6.8-16.2-6.8s-14.8 4.9-17.5 8.9c-2.3 3.3-4.1 7.4-4.1 13.6v58.8h-30.6V48.7c0-5-1.8-12.9-4.6-15.7-2.7-2.8-6.7-6.8-16.2-6.8s-14.8 4.9-17.5 8.9c-2.3 3.3-4.1 7.4-4.1 13.6v58.8h-30.5V3.5z"></path><path id="o4" class="uncommonLogo-letter" d="M420 17.2c-10.8-10.7-24.1-16-39.6-16s-28.7 5.3-39.5 16c-10.7 10.5-16.1 23.5-16.1 38.8 0 15.3 5.4 28.3 16.1 39 10.7 10.5 23.9 15.8 39.5 15.8s28.8-5.3 39.6-16c10.8-10.5 16.3-23.5 16.3-38.8 0-15.4-5.4-28.3-16.3-38.8zm-21.7 57.1c-4.9 5-10.8 7.5-17.9 7.5s-13-2.5-17.7-7.5c-4.9-5-7.3-11.1-7.3-18.4 0-7.2 2.4-13.4 7.1-18.4 4.9-5 10.8-7.5 17.9-7.5s13 2.5 17.9 7.5c4.9 5 7.3 11.1 7.3 18.4 0 7.3-2.4 13.4-7.3 18.4z"></path><path id="c3" class="uncommonLogo-letter" d="M247.1 16.8c10.4-10.4 23.4-15.6 39.1-15.6 13.6 0 25.5 4.5 35.6 13.4l-11.3 26.5c-6.8-7.3-14.6-11-23.2-11-7.2 0-13.2 2.5-18.1 7.5-4.9 4.9-7.3 11.2-7.3 18.9 0 7.6 2.4 13.7 7.1 18.4 4.9 4.7 10.8 7 17.9 7 8.9 0 16.7-3.7 23.6-11l11.3 26.5c-10.1 8.9-22 13.4-35.6 13.4-15.7 0-28.8-5.2-39.3-15.6-10.4-10.4-15.5-23.5-15.5-39.1s5.2-28.9 15.7-39.3z"></path><path id="n2" class="uncommonLogo-letter" d="M117.8 3.5h30.5v9.6C154.5 4.9 167.1 0 178.2 0c10.2 0 21.6 3.1 28.1 9.1 8.4 7.5 14.7 19.9 14.7 32v66.4h-30.3V48.7c0-5-1.8-12.9-4.6-15.7-2.7-2.8-6.7-6.8-16.2-6.8s-14.8 4.9-17.5 8.9c-2.3 3.3-4.1 7.4-4.1 13.6v58.8h-30.5V3.5z"></path><path id="u1" class="uncommonLogo-letter" d="M103.1 107.2H72.6v-9.6c-6.2 8.2-18.8 13.1-29.9 13.1-10.2 0-21.6-3.1-28.1-9.1C6.3 94.1 0 81.7 0 69.6V3.2h30.3V62c0 5 1.8 12.9 4.6 15.7 2.7 2.8 6.7 6.8 16.2 6.8s14.8-4.9 17.5-8.9c2.3-3.3 4.1-7.4 4.1-13.6V3.2h30.5v104z"></path></svg>'
+---
+Uncommon's mission is to sell rashers and rashers of cultivated pork at price parity.
+For happy pigs and piggy banks.
\ No newline at end of file
diff --git a/src/routes/work/work.scss b/src/routes/work/work.scss
index 12c04bf..a50aae6 100644
--- a/src/routes/work/work.scss
+++ b/src/routes/work/work.scss
@@ -5,13 +5,14 @@ h1 {
   letter-spacing: -0.04em;
   text-align: center;
   position: fixed;
-  top: 0;
+  top: calc(50svh - 16vw);
   width: 100%;
   visibility: hidden;
   transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
     
   @media screen and (min-width: 768px) {
     font-size: 7vw;
+    top: calc(50svh - 3.5vw);
   } 
 
   & span {
@@ -44,7 +45,7 @@ h2 {
   }
 }
 .works {
-  padding: 15vw 0.5em 0.5em 0.5em;
+  padding: 0.5em;
   display: flex;      
   gap: 0.25em;
   flex-wrap: wrap;
diff --git a/src/routes/work/workUtils.ts b/src/routes/work/workUtils.ts
index 2a44d57..6040527 100644
--- a/src/routes/work/workUtils.ts
+++ b/src/routes/work/workUtils.ts
@@ -19,19 +19,19 @@ export function initWorkPage( h1: HTMLElement, canvasImgElems: Array<HTMLElement
   h1.style.overflow = 'hidden';
   h1.style.whiteSpace = 'nowrap';
   const spans = Array.from(h1.querySelectorAll('span'));
-  spans.forEach((span) => {
-    gsap.set(span, { opacity: 0, y: window.innerHeight })
-    gsap.to(span, { opacity: 1, y: 0, duration: 1, ease: 'power3.out' })
+  spans.forEach((span, index) => {
+    gsap.set(span, { opacity: 1, y: -window.innerHeight/1.5 })
+    gsap.to(span, { opacity: 1, y: 0, duration: 1, ease: 'power3.out', delay: index * 0.025 })
     gsap.to(span, { xPercent: -100, duration: 4, ease: 'none', repeat: -1 })
   });
 
   gsap.set(canvasImgElems, {
-    opacity: 0, yPercent: 100
+    opacity: 0, yPercent: 50
   })
   
   gsap.to(canvasImgElems, {
     duration: 1,
-    opacity: 1,
+    opacity: .8,
     yPercent: 0,
     stagger: 0.05,
     ease: 'elastic.out(0.75, 0.5)',
diff --git a/static/work/peak/peak_hero.png b/static/work/peak/peak_hero.png
new file mode 100644
index 0000000..c4ce4d7
Binary files /dev/null and b/static/work/peak/peak_hero.png differ