diff --git a/sapper/src/components/Footer.svelte b/sapper/src/components/Footer.svelte
index e3f8f3d2..80a095ff 100644
--- a/sapper/src/components/Footer.svelte
+++ b/sapper/src/components/Footer.svelte
@@ -5,69 +5,65 @@
   import SocialMedia from './SocialMedia.svelte'
 </script>
 
-<div class="bg-grey-cod pt-8 pb-24">
-  <Layout.Base>
-    <Layout.Content>
-      <div class="flex items-start md:items-end flex-col md:flex-row">
-        <div class="w-2/3 flex flex-col sm:flex-row gap-8">
-          <div>
-            <div class="mb-4">
-              <CityIcon />
-            </div>
-            <p class="text-white font-medium tracking-wide">Iteam Stockholm</p>
-            <p class="text-white font-light text-sm leading-7">
-              Östermalmsgatan 26A
-              <br />
-              114 26 Stockholm
-              <br />
-              <a
-                href="https://goo.gl/maps/cVxFADSToWkbwCjBA"
-                target="_blank"
-                class="underline">
-                Google Maps
-              </a>
-            </p>
-            <p class="text-white font-light text-sm leading-7 mt-3">
-              <a href="tel:08267090">08-26 70 90</a>
-            </p>
-            <p class="text-white font-light text-sm leading-7">
-              <a class="underline" href="mailto:info@iteam.se">info@iteam.se</a>
-            </p>
-          </div>
-          <div class="md:pt-0 sm:px-20">
-            <div class="mb-4">
-              <HarborIcon />
-            </div>
-            <p class="text-white font-medium tracking-wide">Iteam Göteborg</p>
-            <p class="text-white font-light text-sm leading-7">
-              Järntorgsgatan 12-14
-              <br />
-              413 01 Göteborg
-              <br />
-              <a
-                href="https://goo.gl/maps/fDzuuDuUSxU6jLGb8"
-                target="_blank"
-                class="underline">
-                Google Maps
-              </a>
-            </p>
-
-            <p class="text-white font-light text-sm leading-7 mt-3">
-              <a href="tel:0734029112">073-402 91 12</a>
-            </p>
-            <p class="text-white font-light text-sm leading-7">
-              <a
-                class="underline"
-                href="mailto:johanna.grahn@iteam.se">johanna.grahn@iteam.se</a>
-            </p>
-
-            <div />
-          </div>
+<Layout.Container background={'bg-grey-cod'}>
+  <div class="flex items-start md:items-end flex-col md:flex-row text-white">
+    <div class="w-2/3 flex flex-col sm:flex-row gap-8">
+      <div>
+        <div class="mb-4">
+          <CityIcon />
         </div>
-        <div class="pt-20 md:pt-0 w-auto md:w-1/3 flex justify-end text-white">
-          <SocialMedia />
+        <p class="font-medium tracking-wide">Iteam Stockholm</p>
+        <p class="font-light text-sm leading-7">
+          Östermalmsgatan 26A
+          <br />
+          114 26 Stockholm
+          <br />
+          <a
+            href="https://goo.gl/maps/cVxFADSToWkbwCjBA"
+            target="_blank"
+            class="underline">
+            Google Maps
+          </a>
+        </p>
+        <p class="font-light text-sm leading-7 mt-3">
+          <a href="tel:08267090">08-26 70 90</a>
+        </p>
+        <p class="font-light text-sm leading-7">
+          <a class="underline" href="mailto:info@iteam.se">info@iteam.se</a>
+        </p>
+      </div>
+      <div class="md:pt-0 sm:px-20">
+        <div class="mb-4">
+          <HarborIcon />
         </div>
+        <p class="font-medium tracking-wide">Iteam Göteborg</p>
+        <p class="font-light text-sm leading-7">
+          Järntorgsgatan 12-14
+          <br />
+          413 01 Göteborg
+          <br />
+          <a
+            href="https://goo.gl/maps/fDzuuDuUSxU6jLGb8"
+            target="_blank"
+            class="underline">
+            Google Maps
+          </a>
+        </p>
+
+        <p class="font-light text-sm leading-7 mt-3">
+          <a href="tel:0734029112">073-402 91 12</a>
+        </p>
+        <p class="font-light text-sm leading-7">
+          <a
+            class="underline"
+            href="mailto:johanna.grahn@iteam.se">johanna.grahn@iteam.se</a>
+        </p>
+
+        <div />
       </div>
-    </Layout.Content>
-  </Layout.Base>
-</div>
+    </div>
+    <div class="pt-20 md:pt-0 w-auto md:w-1/3 flex justify-end">
+      <SocialMedia />
+    </div>
+  </div>
+</Layout.Container>
diff --git a/sapper/src/components/contact/Layout.svelte b/sapper/src/components/contact/Layout.svelte
index aa04689b..9e6a9c2b 100644
--- a/sapper/src/components/contact/Layout.svelte
+++ b/sapper/src/components/contact/Layout.svelte
@@ -11,32 +11,23 @@
 </script>
 
 <Animation.WithScrollFadeIn threshold={0.5}>
-  <div class="bg-grey-medium">
-    <Layout.Base>
-      <Layout.Content>
-        <div
-          class="grid grid-cols-1 gap-12 md:grid-cols-2 items-center text-white justify-items-center md:justify-items-end pb-16">
-          <div class="mb-12 md:mb-0">
-            <h2
-              class="text-4xl w-full lg:w-4/5 font-medium tracking-wide mb-10">
-              {title}
-            </h2>
-            <div>
-              <Typography.ParagraphLg>{text}</Typography.ParagraphLg>
-            </div>
-            <div class="mt-10">
-              <Animation.ButtonHover>
-                <a class="block" href="/kontakta-oss">
-                  <Buttons.Default width={'w-full md:w-auto'}>
-                    {ctaText}
-                  </Buttons.Default>
-                </a>
-              </Animation.ButtonHover>
-            </div>
-          </div>
-          <slot />
-        </div>
-      </Layout.Content>
-    </Layout.Base>
-  </div>
+  <Layout.Container background={'bg-grey-medium'}>
+    <div
+      class="grid gap-12 md:grid-cols-2 items-center text-white justify-items-center md:justify-items-end">
+      <div class="grid gap-y-10">
+        <h2 class="text-4xl w-full lg:w-4/5 font-medium tracking-wide">
+          {title}
+        </h2>
+        <Typography.ParagraphLg>{text}</Typography.ParagraphLg>
+        <Animation.ButtonHover>
+          <a class="block" href="/kontakta-oss">
+            <Buttons.Default width={'w-full md:w-auto'}>
+              {ctaText}
+            </Buttons.Default>
+          </a>
+        </Animation.ButtonHover>
+      </div>
+      <slot />
+    </div>
+  </Layout.Container>
 </Animation.WithScrollFadeIn>
diff --git a/sapper/src/components/layout/Container.svelte b/sapper/src/components/layout/Container.svelte
index dc24b148..898a5462 100644
--- a/sapper/src/components/layout/Container.svelte
+++ b/sapper/src/components/layout/Container.svelte
@@ -1,3 +1,7 @@
-<div class="px-8 flex justify-between lg:max-w-screen-xl mx-auto">
+<script>
+  export let background = ''
+</script>
+
+<div class="iteam-width gap-y-16 py-16 md:py-32 {background} ">
   <slot />
 </div>
diff --git a/sapper/src/components/layout/Post.svelte b/sapper/src/components/layout/Post.svelte
index 9d70a2a6..42b972c0 100644
--- a/sapper/src/components/layout/Post.svelte
+++ b/sapper/src/components/layout/Post.svelte
@@ -2,7 +2,6 @@
   export let type
 </script>
 
-<div
-  class="post {type} max-w-screen-xl mx-auto pb-10 sm:pb-12 md:pb-16 lg:pb-20 xl:pb-24">
+<div class="post {type} max-w-screen-xl mx-auto">
   <slot />
 </div>
diff --git a/sapper/src/routes/GreenBlock.svelte b/sapper/src/routes/GreenBlock.svelte
index fac7c059..fed1c73c 100644
--- a/sapper/src/routes/GreenBlock.svelte
+++ b/sapper/src/routes/GreenBlock.svelte
@@ -7,84 +7,72 @@
 </script>
 
 <Animation.WithScrollFadeIn>
-  <div class="bg-green bg-opacity-30">
-    <Layout.Base>
-      <Layout.Content>
-        <div class="flex flex-col">
-          <div class="grid md:grid-cols-2">
-            <h3
-              class="text-4xl font-medium mb-6 leading-10 max-w-md lg:max-w-xl">
-              Våra dedikerade team löser utmaningar tillsammans med er
-            </h3>
-            <Typography.ParagraphMd>
-              Vi utvecklar din tjänst tillsammans med dig. Det blir mycket
-              bättre så. Vi hjälper dig att fokusera på det som är viktigt och
-              som skapar värde för dig och dina kunder.
-            </Typography.ParagraphMd>
-          </div>
-        </div>
-      </Layout.Content>
-    </Layout.Base>
+  <Layout.Container background={'bg-green bg-opacity-30'}>
+    <div class="grid md:grid-cols-2">
+      <div class="col-start-1">
+        <h3 class="text-4xl font-medium mb-6 leading-10 max-w-md lg:max-w-xl">
+          Våra dedikerade team löser utmaningar tillsammans med er
+        </h3>
+        <Typography.ParagraphMd>
+          Vi utvecklar din tjänst tillsammans med dig. Det blir mycket bättre
+          så. Vi hjälper dig att fokusera på det som är viktigt och som skapar
+          värde för dig och dina kunder.
+        </Typography.ParagraphMd>
+      </div>
+    </div>
     <div class="flex flex-row">
-      <Layout.Content>
-        <div class="grid grid-cols-12 grid-rows-6 w-full">
-          <div
-            class="grid col-start-1 col-end-6 row-start-2 row-span-full hidden md:block max-w-xl  z-50">
-            <img
-              class="h-auto"
-              src="Radu-Amir-working-Lowres.jpg"
-              alt="illustration" />
-          </div>
-
+      <div class="grid grid-cols-12 grid-rows-6 w-full">
+        <div
+          class="grid col-start-1 col-end-6 row-start-2 row-span-full hidden md:block max-w-xl  z-50">
+          <img
+            class="h-auto"
+            src="Radu-Amir-working-Lowres.jpg"
+            alt="illustration" />
+        </div>
+        <div
+          class="grid col-span-full row-span-full md:col-start-5 md:col-end-13 row-start-1 md:row-end-5">
           <div
-            class="grid col-span-full row-span-full md:col-start-5 md:col-end-13 row-start-1 md:row-end-5">
-            <div
-              class="flex flex-col bg-grey-dark text-white px-8 md:pl-20 py-12 justify-center">
-              <div class="md:pl-20">
-                <div class="md:max-w-3xl">
-                  <h3
-                    class="text-4xl font-medium mb-6 leading-10 max-w-md lg:max-w-xl">
-                    Vi gillar våra kunder
-                  </h3>
+            class="flex flex-col bg-grey-dark text-white px-8 md:pl-20 py-12 justify-center">
+            <div class="md:pl-20">
+              <div class="md:max-w-3xl">
+                <h3
+                  class="text-4xl font-medium mb-6 leading-10 max-w-md lg:max-w-xl">
+                  Vi gillar våra kunder
+                </h3>
 
-                  <Typography.ParagraphMd>
-                    Vi vill bidra till en bättre värld på alla sätt vi kan.
-                    Därför väljer vi uppdrag med omsorg. Det betyder också att
-                    om vi jobbar ihop så tror vi 100% på din tjänst.
-                  </Typography.ParagraphMd>
-                  <div
-                    class="grid grid-cols-3 justify-items-center items-center mt-4 md:w-3/5">
-                    {#each customers as customer}
-                      <img
-                        class="h-auto"
-                        src="{customer}.png"
-                        alt="customer {customer}" />
-                    {/each}
-                  </div>
+                <Typography.ParagraphMd>
+                  Vi vill bidra till en bättre värld på alla sätt vi kan. Därför
+                  väljer vi uppdrag med omsorg. Det betyder också att om vi
+                  jobbar ihop så tror vi 100% på din tjänst.
+                </Typography.ParagraphMd>
+                <div
+                  class="grid grid-cols-3 justify-items-center items-center mt-4 md:w-3/5">
+                  {#each customers as customer}
+                    <img
+                      class="h-auto"
+                      src="{customer}.png"
+                      alt="customer {customer}" />
+                  {/each}
                 </div>
               </div>
             </div>
           </div>
         </div>
-      </Layout.Content>
+      </div>
     </div>
-    <Layout.Base>
-      <Layout.Content>
-        <div class="grid md:grid-cols-2">
-          <div class="col-start-2">
-            <h3
-              class="text-4xl font-medium mb-6 leading-10 max-w-md lg:max-w-xl">
-              Långsiktigt engagemang
-            </h3>
-            <Typography.ParagraphMd>
-              Med ett långsiktigt engagemang hjälper vi er att navigera i den
-              digitala världen. Vi omvandlar visioner till verklighet, utmanar
-              föråldrade metoder och tillsammans utvecklar vi digitala tjänster
-              som era kunder älskar att använda.
-            </Typography.ParagraphMd>
-          </div>
-        </div>
-      </Layout.Content>
-    </Layout.Base>
-  </div>
+
+    <div class="grid md:grid-cols-2">
+      <div class="col-start-2">
+        <h3 class="text-4xl font-medium mb-6 leading-10 max-w-md lg:max-w-xl">
+          Långsiktigt engagemang
+        </h3>
+        <Typography.ParagraphMd>
+          Med ett långsiktigt engagemang hjälper vi er att navigera i den
+          digitala världen. Vi omvandlar visioner till verklighet, utmanar
+          föråldrade metoder och tillsammans utvecklar vi digitala tjänster som
+          era kunder älskar att använda.
+        </Typography.ParagraphMd>
+      </div>
+    </div>
+  </Layout.Container>
 </Animation.WithScrollFadeIn>
diff --git a/sapper/src/routes/aktuellt/index.svelte b/sapper/src/routes/aktuellt/index.svelte
index 110ab251..d6a6f58e 100644
--- a/sapper/src/routes/aktuellt/index.svelte
+++ b/sapper/src/routes/aktuellt/index.svelte
@@ -9,11 +9,11 @@
 </script>
 
 <script>
-  import Layout from '../../components/layout'
   import Animation from '../../components/animation'
   import Typography from '../../components/typography/'
   import ContactBlock from '../../components/contact'
   import helpers from '../../utils/helpers.js'
+  import Layout from '../../components/layout'
   import Meta from '../../components/Meta.svelte'
 
   export let posts
@@ -29,47 +29,39 @@
 </svelte:head>
 
 <Meta title="Iteam | Aktuellt" />
-<Layout.Base>
-  <Animation.WithScrollFadeIn>
-    <Layout.Content>
-      <div class="w-full md:px-24">
-        <Typography.H1>Artiklar & nyheter</Typography.H1>
-        <div class="max-w-4xl">
-          <Typography.ParagraphLg>
-            Vi gillar att experimentera. Vi laborerar med ny teknik,
-            omvärldsbevakar och delar vårt lärande med varandra och våra kunder.
-            Vår kunskap är din kunskap.
-          </Typography.ParagraphLg>
-        </div>
-      </div>
-    </Layout.Content>
-    <Layout.Content>
-      <div>
-        <div
-          class="grid sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 py-6 gap-6">
-          {#each posts as post}
-            <Animation.CardHover>
-              <a
-                rel="prefetch"
-                href={`${helpers.getRouteFromPostTag(post.primary_tag.slug)}/${post.slug}`}>
-                <div
-                  style="height: 407px;"
-                  class="flex flex-col rounded p-3 bg-white">
-                  <img
-                    class="rounded object-cover h-full"
-                    src={post.feature_image}
-                    alt="feature" />
-                  <div class="ml-2 mt-6">
-                    <Typography.H3>{post.title}</Typography.H3>
-                  </div>
-                </div>
-              </a>
-            </Animation.CardHover>
-          {/each}
-        </div>
-      </div>
-    </Layout.Content>
-  </Animation.WithScrollFadeIn>
-</Layout.Base>
+
+<Animation.WithScrollFadeIn>
+  <Layout.Container>
+    <div class="max-w-4xl mx-auto">
+      <Typography.H1>Artiklar & nyheter</Typography.H1>
+      <Typography.ParagraphLg>
+        Vi gillar att experimentera. Vi laborerar med ny teknik, omvärldsbevakar
+        och delar vårt lärande med varandra och våra kunder. Vår kunskap är din
+        kunskap.
+      </Typography.ParagraphLg>
+    </div>
+    <div class="grid sm:grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
+      {#each posts as post}
+        <Animation.CardHover>
+          <a
+            rel="prefetch"
+            href={`${helpers.getRouteFromPostTag(post.primary_tag.slug)}/${post.slug}`}>
+            <div
+              style="height: 407px;"
+              class="flex flex-col rounded p-3 bg-white">
+              <img
+                class="rounded object-cover h-full"
+                src={post.feature_image}
+                alt="feature" />
+              <div class="ml-2 mt-6">
+                <Typography.H3>{post.title}</Typography.H3>
+              </div>
+            </div>
+          </a>
+        </Animation.CardHover>
+      {/each}
+    </div>
+  </Layout.Container>
+</Animation.WithScrollFadeIn>
 
 <ContactBlock.Default />
diff --git a/sapper/src/routes/case/[slug].svelte b/sapper/src/routes/case/[slug].svelte
index 22138d23..ba9fb63e 100644
--- a/sapper/src/routes/case/[slug].svelte
+++ b/sapper/src/routes/case/[slug].svelte
@@ -26,22 +26,20 @@
   image={post.feature_image} />
 
 <Animation.WithScrollFadeIn>
-  <Layout.Base>
-    <Layout.Content>
-      <div class="sm:px-16 md:px-24">
-        <Typography.H1>{post.title}</Typography.H1>
-        <Typography.ParagraphLg>
-          {helpers.getIngressFromHTMLBlob(post.html)}
-        </Typography.ParagraphLg>
-        <div class="flex flex-wrap mt-8">
-          {#each post.tags as tag}
-            {#if tag.slug !== 'case' && tag.visibility === 'public'}
-              <Links.RoundedLabel>{tag.name}</Links.RoundedLabel>
-            {/if}
-          {/each}
-        </div>
+  <Layout.Container>
+    <div class="max-w-4xl mx-auto">
+      <Typography.H1>{post.title}</Typography.H1>
+      <Typography.ParagraphLg>
+        {helpers.getIngressFromHTMLBlob(post.html)}
+      </Typography.ParagraphLg>
+      <div class="flex flex-wrap mt-8">
+        {#each post.tags as tag}
+          {#if tag.slug !== 'case' && tag.visibility === 'public'}
+            <Links.RoundedLabel>{tag.name}</Links.RoundedLabel>
+          {/if}
+        {/each}
       </div>
-    </Layout.Content>
+    </div>
     <Layout.Post type="case">
       {@html helpers.getHTMLBlobWithoutIngress(post.html)}
       {#if post.html.includes('<h3 id="tekniker">Tekniker</h3>')}
@@ -54,7 +52,7 @@
         </div>
       {/if}
     </Layout.Post>
-  </Layout.Base>
+  </Layout.Container>
 </Animation.WithScrollFadeIn>
 
 <ContactBlock.Challenge />
diff --git a/sapper/src/routes/case/index.svelte b/sapper/src/routes/case/index.svelte
index cf707e74..c97d404a 100644
--- a/sapper/src/routes/case/index.svelte
+++ b/sapper/src/routes/case/index.svelte
@@ -30,51 +30,41 @@
 
 <Meta title="Iteam | Case" />
 
-<Layout.Base>
-  <Animation.WithScrollFadeIn>
-    <Layout.Content>
-      <div class="w-full md:px-24">
-        <Typography.H1>Våra case</Typography.H1>
-        <div class="max-w-4xl">
-          <Typography.ParagraphLg>
-            Under 25 år har vi hjälpt våra kunder att skapa värde. Vi har jobbat
-            med en stor variation av kunder, från stora varumärken och
-            myndigheter till innovativa startups. Här är några av våra
-            samarbeten.
-          </Typography.ParagraphLg>
-        </div>
-      </div>
-    </Layout.Content>
-    <Layout.Content>
-      <div class="py-6">
-        <div class="grid sm:grid-cols-1 md:grid-cols-2 gap-6">
-          {#each posts as post}
-            <Animation.CardHover>
-              <a
-                rel="prefetch"
-                href={`${helpers.getRouteFromPostTag(post.primary_tag.slug)}/${post.slug}`}>
-                <div class="bg-white flex flex-col p-3 h-full">
-                  <div
-                    class="rounded bg-cover bg-center"
-                    style="padding-bottom: 60%; background-image: url({post.feature_image})"
-                    title="featured case graphic" />
-
-                  <div class="ml-2 mt-6">
-                    <Typography.ParagraphMd>
-                      {post.meta_title || post.title}
-                    </Typography.ParagraphMd>
-                    {#if post.meta_description}
-                      <Typography.H3>{post.meta_description}</Typography.H3>
-                    {/if}
-                  </div>
-                </div>
-              </a>
-            </Animation.CardHover>
-          {/each}
-        </div>
-      </div>
-    </Layout.Content>
-  </Animation.WithScrollFadeIn>
-</Layout.Base>
+<Animation.WithScrollFadeIn>
+  <Layout.Container>
+    <div class="max-w-4xl mx-auto">
+      <Typography.H1>Våra case</Typography.H1>
+      <Typography.ParagraphLg>
+        Under 25 år har vi hjälpt våra kunder att skapa värde. Vi har jobbat med
+        en stor variation av kunder, från stora varumärken och myndigheter till
+        innovativa startups. Här är några av våra samarbeten.
+      </Typography.ParagraphLg>
+    </div>
+    <div class="grid sm:grid-cols-1 md:grid-cols-2 gap-6">
+      {#each posts as post}
+        <Animation.CardHover>
+          <a
+            rel="prefetch"
+            href={`${helpers.getRouteFromPostTag(post.primary_tag.slug)}/${post.slug}`}>
+            <div class="bg-white flex flex-col p-3 h-full">
+              <div
+                class="rounded bg-cover bg-center"
+                style="padding-bottom: 60%; background-image: url({post.feature_image})"
+                title="featured case graphic" />
+              <div class="ml-2 mt-6">
+                <Typography.ParagraphMd>
+                  {post.meta_title || post.title}
+                </Typography.ParagraphMd>
+                {#if post.meta_description}
+                  <Typography.H3>{post.meta_description}</Typography.H3>
+                {/if}
+              </div>
+            </div>
+          </a>
+        </Animation.CardHover>
+      {/each}
+    </div>
+  </Layout.Container>
+</Animation.WithScrollFadeIn>
 
 <ContactBlock.Default />
diff --git a/sapper/src/routes/index.svelte b/sapper/src/routes/index.svelte
index 42cec956..7d46b130 100644
--- a/sapper/src/routes/index.svelte
+++ b/sapper/src/routes/index.svelte
@@ -10,10 +10,10 @@
   import MagnifyingGlassSymbol from '../assets/illustrations/magnifying-glass.svg'
   import VRGlassesSymbol from '../assets/illustrations/vr-glasses.svg'
   import IteamA from '../assets/illustrations/a.svg'
-  import Layout from '../components/layout'
   import Buttons from '../components/buttons'
   import Animation from '../components/animation'
   import GreenBlock from './GreenBlock.svelte'
+  import Layout from '../components/layout'
   import Meta from '../components/Meta.svelte'
 
   export async function preload(_page, session) {
@@ -37,61 +37,52 @@
 
 <Meta title="Iteam - There is a Better Way" />
 
-<div class="pb-16">
-  <div class="bg-grey-cod pb-16">
-    <div class="px-8 lg:py-16">
-      <Layout.Content>
-        <div
-          class="flex flex-col-reverse text-white lg:flex-row justify-between w-full items-center">
-          <div class="max-w-xl mt-12 lg:mt-0">
-            <Typography.H1>Vi utvecklar framtidens tjänster</Typography.H1>
-            <Typography.ParagraphLg>
-              Iteam är en digitaliseringsbyrå som utvecklar digitala tjänster
-              för en hållbar framtid
-            </Typography.ParagraphLg>
-
-            <div class="mt-8">
-              <a href="/case">
-                <Animation.ButtonHover>
-                  <Buttons.Default>Se våra case</Buttons.Default>
-                </Animation.ButtonHover>
-              </a>
-            </div>
-          </div>
-          <div class="w-full max-w-md self-center mt-8 lg:mt-0 ">
-            <FeaturedImageCraneIteam />
-          </div>
-        </div>
-      </Layout.Content>
+<Layout.Container background={'bg-grey-cod'}>
+  <div
+    class="flex flex-col-reverse text-white lg:flex-row justify-between w-full items-center">
+    <div class="lg:max-w-xl mt-12 lg:mt-0">
+      <Typography.H1>Vi utvecklar framtidens tjänster</Typography.H1>
+      <Typography.ParagraphLg>
+        Iteam är en digitaliseringsbyrå som utvecklar digitala tjänster för en
+        hållbar framtid
+      </Typography.ParagraphLg>
+      <div class="mt-8">
+        <a href="/case">
+          <Animation.ButtonHover>
+            <Buttons.Default>Se våra case</Buttons.Default>
+          </Animation.ButtonHover>
+        </a>
+      </div>
+    </div>
+    <div class="w-full max-w-md self-center mt-8 lg:mt-0 ">
+      <FeaturedImageCraneIteam />
     </div>
   </div>
-  <Animation.WithScrollFadeIn>
-    <Layout.Base>
-      <Layout.Content>
-        <div class="flex flex-col md:flex-row md:flex-wrap gap-6">
-          {#each posts as post}
-            <FeaturedPost {post} />
-          {/each}
-        </div>
-      </Layout.Content>
-    </Layout.Base>
-  </Animation.WithScrollFadeIn>
-</div>
+</Layout.Container>
+<Animation.WithScrollFadeIn>
+  <Layout.Container>
+    <div class="flex flex-col md:flex-row md:flex-wrap gap-6">
+      {#each posts as post}
+        <FeaturedPost {post} />
+      {/each}
+    </div>
+  </Layout.Container>
+</Animation.WithScrollFadeIn>
 
 <!-- Tjänster -->
-<div class="bg-grey-dark text-center text-white py-20 px-8 lg:px-20">
-  <Animation.WithScrollFadeIn>
-    <h2 class="text-3xl font-medium tracking-wide">Våra tjänster</h2>
-    <div class="mt-4 inline-block max-w-2xl text-center">
-      <Typography.ParagraphMd>
-        Vi erbjuder dig ett självgående team som utvecklar din produkt. Man kan
-        säga att du hyr din egen startup. Det inspirerar din organisation att
-        tänka på nya sätt och leder till en bättre affär.
-      </Typography.ParagraphMd>
-    </div>
+<Animation.WithScrollFadeIn>
+  <Layout.Container background={'bg-grey-dark'}>
+    <div class="text-center text-white">
+      <h2 class="text-3xl font-medium tracking-wide">Våra tjänster</h2>
+      <div class="mt-4 inline-block max-w-2xl text-center">
+        <Typography.ParagraphMd>
+          Vi erbjuder dig ett självgående team som utvecklar din produkt. Man
+          kan säga att du hyr din egen startup. Det inspirerar din organisation
+          att tänka på nya sätt och leder till en bättre affär.
+        </Typography.ParagraphMd>
+      </div>
 
-    <div class="mb-8 mt-16">
-      <div class="flex flex-wrap justify-center px-8 md:px-12 gap-4">
+      <div class="flex flex-wrap mt-16 justify-center gap-4">
         <Card
           symbol={BeakerSymbol}
           title={'User research'}
@@ -118,86 +109,77 @@
           text={'Lorem ipsum dolor sit meow meow meow.'} />
       </div>
     </div>
-    <!-- <div class="mt-12">
-      <Animation.ButtonHover transparentButton>
-        <a href="/services">
-          <Buttons.Transparent>Alla tjänster</Buttons.Transparent>
-        </a>
-      </Animation.ButtonHover>
-    </div> -->
-  </Animation.WithScrollFadeIn>
-</div>
+  </Layout.Container>
+</Animation.WithScrollFadeIn>
 
 <!-- Blocks -->
-<Layout.Base>
-  <Layout.Content>
-    <div class="flex flex-col gap-16">
-      <Animation.WithScrollFadeIn threshold={0.5}>
-        <div class="flex justify-between items-center gap-8">
-          <div class="align-middle max-w-md lg:max-w-lg">
-            <h3 class="text-4xl font-medium mb-6 leading-10">
-              Vi skapar nytta genom utveckling
-            </h3>
-            <Typography.ParagraphMd>
-              Vi är 25 utvecklare, Team Coacher och UX-designers. Vi hjälper dig
-              att ta fram digitala lösningar som möter användarnas behov. Vi
-              utvecklar inte bara appar. Vi tar ett helhetsperspektiv på din
-              affär för att skapa värde på riktigt. Vi leder förändringsarbetet
-              och hjälper er att digitalisera er affär.
-            </Typography.ParagraphMd>
-          </div>
-          <div class="hidden md:block max-w-xl">
-            <img
-              class="h-auto"
-              src="Mikael-Nisse-Mimmi-Lowres.jpg"
-              alt="illustration" />
-          </div>
+<Layout.Container>
+  <div class="flex flex-col gap-16">
+    <Animation.WithScrollFadeIn threshold={0.5}>
+      <div class="flex justify-between items-center gap-8">
+        <div class="align-middle max-w-md lg:max-w-lg">
+          <h3 class="text-4xl font-medium mb-6 leading-10">
+            Vi skapar nytta genom utveckling
+          </h3>
+          <Typography.ParagraphMd>
+            Vi är 25 utvecklare, Team Coacher och UX-designers. Vi hjälper dig
+            att ta fram digitala lösningar som möter användarnas behov. Vi
+            utvecklar inte bara appar. Vi tar ett helhetsperspektiv på din affär
+            för att skapa värde på riktigt. Vi leder förändringsarbetet och
+            hjälper er att digitalisera er affär.
+          </Typography.ParagraphMd>
         </div>
-      </Animation.WithScrollFadeIn>
-      <Animation.WithScrollFadeIn threshold={0.5}>
-        <div class="flex justify-between items-center gap-8">
-          <div class="hidden md:block max-w-xl">
-            <IteamA />
-          </div>
-          <div class="max-w-md lg:max-w-lg">
-            <h3 class="text-4xl font-medium mb-6 leading-10 ">
-              Startuptänk och snabbrörlighet
-            </h3>
-            <Typography.ParagraphMd>
-              Det räcker inte att utveckala tjänster och hoppas att dina
-              användare är nöjda. Du behöver en process som hjälper dig att
-              hitta rätt. Genom smidig utveckling i korta iterativa cykler
-              testar vi hypoteser för att undersöka vad som fungerar bäst för
-              användarna och verksamheten.
-            </Typography.ParagraphMd>
-          </div>
+        <div class="hidden md:block max-w-xl">
+          <img
+            class="h-auto"
+            src="Mikael-Nisse-Mimmi-Lowres.jpg"
+            alt="illustration" />
         </div>
-      </Animation.WithScrollFadeIn>
-      <Animation.WithScrollFadeIn threshold={0.5}>
-        <div class="flex justify-between items-center gap-8">
-          <div class="align-middle max-w-md lg:max-w-lg">
-            <h3 class="text-4xl font-medium mb-6 leading-10">
-              Du blir en del av oss
-            </h3>
-            <Typography.ParagraphMd>
-              Inför varje nytt projekt plockar vi ihop de kompetenserna du
-              behöver. Det är när personer med olika kompetenser och varierande
-              bakgrunder samarbetar i tvärfunktionella team som innovation
-              verkligen sker. Därför är våra kunder självklara medlemmar i våra
-              team och vi jobbar tillsammans mot våra gemensamma mål.
-            </Typography.ParagraphMd>
-          </div>
-          <div class="hidden md:block max-w-xl">
-            <img
-              class="ml-auto"
-              src="Dennis-Radu-Amir-Lowres.jpg"
-              alt="illustration" />
-          </div>
+      </div>
+    </Animation.WithScrollFadeIn>
+    <Animation.WithScrollFadeIn threshold={0.5}>
+      <div class="flex justify-between items-center gap-8">
+        <div class="hidden md:block max-w-xl">
+          <IteamA />
         </div>
-      </Animation.WithScrollFadeIn>
-    </div>
-  </Layout.Content>
-</Layout.Base>
+        <div class="max-w-md lg:max-w-lg">
+          <h3 class="text-4xl font-medium mb-6 leading-10 ">
+            Startuptänk och snabbrörlighet
+          </h3>
+          <Typography.ParagraphMd>
+            Det räcker inte att utveckala tjänster och hoppas att dina användare
+            är nöjda. Du behöver en process som hjälper dig att hitta rätt.
+            Genom smidig utveckling i korta iterativa cykler testar vi hypoteser
+            för att undersöka vad som fungerar bäst för användarna och
+            verksamheten.
+          </Typography.ParagraphMd>
+        </div>
+      </div>
+    </Animation.WithScrollFadeIn>
+    <Animation.WithScrollFadeIn threshold={0.5}>
+      <div class="flex justify-between items-center gap-8">
+        <div class="align-middle max-w-md lg:max-w-lg">
+          <h3 class="text-4xl font-medium mb-6 leading-10">
+            Du blir en del av oss
+          </h3>
+          <Typography.ParagraphMd>
+            Inför varje nytt projekt plockar vi ihop de kompetenserna du
+            behöver. Det är när personer med olika kompetenser och varierande
+            bakgrunder samarbetar i tvärfunktionella team som innovation
+            verkligen sker. Därför är våra kunder självklara medlemmar i våra
+            team och vi jobbar tillsammans mot våra gemensamma mål.
+          </Typography.ParagraphMd>
+        </div>
+        <div class="hidden md:block max-w-xl">
+          <img
+            class="ml-auto"
+            src="Dennis-Radu-Amir-Lowres.jpg"
+            alt="illustration" />
+        </div>
+      </div>
+    </Animation.WithScrollFadeIn>
+  </div>
+</Layout.Container>
 
 <GreenBlock />
 
diff --git a/sapper/src/routes/kontakta-oss/index.svelte b/sapper/src/routes/kontakta-oss/index.svelte
index 1aef11b1..c8488d47 100644
--- a/sapper/src/routes/kontakta-oss/index.svelte
+++ b/sapper/src/routes/kontakta-oss/index.svelte
@@ -9,65 +9,61 @@
 
 <Meta title="Iteam | Kontakta oss" />
 
-<Layout.Base>
-  <Animation.WithScrollFadeIn>
-    <Layout.Content>
-      <div class="w-full md:px-24">
-        <Typography.H1>Behöver du hjälp med en digital produkt?</Typography.H1>
-        <div class="max-w-4xl">
-          <Typography.ParagraphLg>
-            Vi jobbar med kunder i alla storlekar, från startups till stora
-            företag. Låt oss prata om ditt projekt och hur vi kan hjälpa till
-            att skapa värde.
-          </Typography.ParagraphLg>
+<Animation.WithScrollFadeIn>
+  <Layout.Container>
+    <div class="max-w-4xl mx-auto">
+      <Typography.H1>Behöver du hjälp med en digital produkt?</Typography.H1>
+      <Typography.ParagraphLg>
+        Vi jobbar med kunder i alla storlekar, från startups till stora företag.
+        Låt oss prata om ditt projekt och hur vi kan hjälpa till att skapa
+        värde.
+      </Typography.ParagraphLg>
+      <div class="md:px-24 py-12 max-w-2xl">
+        <div class="text-blue-cornflower">
+          <Typography.H2>Nya samarbeten</Typography.H2>
         </div>
-        <div class="md:px-24 py-12 max-w-2xl">
+        <Typography.ParagraphMd>
+          Det bästa sättet för att komma i kontakt med oss är att mejla vår
+          försäljningsansvarig Jonna på
+          <b><a
+              href="mailto:jonna.hjern@iteam.se"
+              class="underline">jonna.hjern@iteam.se</a></b>. Vi svarar
+          vanligtvis inom en dag. Du kan även ringa till henne på
+          <b><a href="callto:+46 72 975 53 66" class="underline">+46 72 975 53
+              66.</a></b>
+        </Typography.ParagraphMd>
+
+        <div class="mt-8 md:mt-12">
           <div class="text-blue-cornflower">
-            <Typography.H2>Nya samarbeten</Typography.H2>
+            <Typography.H2>Jobba hos oss</Typography.H2>
           </div>
           <Typography.ParagraphMd>
-            Det bästa sättet för att komma i kontakt med oss är att mejla vår
-            försäljningsansvarig Jonna på
+            Är du intresserad av att jobba hos oss är du välkommen att skicka
+            din spontantansökan till
             <b><a
-                href="mailto:jonna.hjern@iteam.se"
-                class="underline">jonna.hjern@iteam.se</a></b>. Vi svarar
-            vanligtvis inom en dag. Du kan även ringa till henne på
-            <b><a href="callto:+46 72 975 53 66" class="underline">+46 72 975 53
-                66.</a></b>
+                href="mailto:joinus@iteam.se"
+                class="underline">joinus@iteam.se</a></b>.
           </Typography.ParagraphMd>
-
-          <div class="mt-8 md:mt-12">
-            <div class="text-blue-cornflower">
-              <Typography.H2>Jobba hos oss</Typography.H2>
-            </div>
-            <Typography.ParagraphMd>
-              Är du intresserad av att jobba hos oss är du välkommen att skicka
-              din spontantansökan till
-              <b><a
-                  href="mailto:joinus@iteam.se"
-                  class="underline">joinus@iteam.se</a></b>.
-            </Typography.ParagraphMd>
-          </div>
-          <div class="mt-8 md:mt-12">
-            <div class="text-blue-cornflower">
-              <Typography.H2>Övriga ärenden</Typography.H2>
-            </div>
-            <Typography.ParagraphMd>
-              Har du övriga frågor om lokal, ekonomi eller juridik kan du
-              kontakta Hans Rollman på
-              <b>
-                <a href="callto:‭+46 73 813 37 87" class="underline">‭+46 73 813
-                  37 87</a>
-              </b>‬ eller
-              <b>
-                <a
-                  href="mailto:hans.rollman@iteam.se"
-                  class="underline">hans.rollman@iteam.se</a>
-              </b>.
-            </Typography.ParagraphMd>
+        </div>
+        <div class="mt-8 md:mt-12">
+          <div class="text-blue-cornflower">
+            <Typography.H2>Övriga ärenden</Typography.H2>
           </div>
+          <Typography.ParagraphMd>
+            Har du övriga frågor om lokal, ekonomi eller juridik kan du kontakta
+            Hans Rollman på
+            <b>
+              <a href="callto:‭+46 73 813 37 87" class="underline">‭+46 73 813
+                37 87</a>
+            </b>‬ eller
+            <b>
+              <a
+                href="mailto:hans.rollman@iteam.se"
+                class="underline">hans.rollman@iteam.se</a>
+            </b>.
+          </Typography.ParagraphMd>
         </div>
       </div>
-    </Layout.Content>
-  </Animation.WithScrollFadeIn>
-</Layout.Base>
+    </div>
+  </Layout.Container>
+</Animation.WithScrollFadeIn>
diff --git a/sapper/src/routes/om-oss/index.svelte b/sapper/src/routes/om-oss/index.svelte
index ca80d449..b93cde11 100644
--- a/sapper/src/routes/om-oss/index.svelte
+++ b/sapper/src/routes/om-oss/index.svelte
@@ -64,91 +64,71 @@
 <Meta title="Iteam | Om oss" />
 
 <Animation.WithScrollFadeIn>
-  <Layout.Base>
-    <Layout.Content>
-      <div class="w-full md:px-24">
-        <Typography.H1>Vi är en digitaliseringsbyrå</Typography.H1>
-        <div class="max-w-4xl">
-          <Typography.ParagraphLg>
-            Genom att kombinera djupt tekniskt kunnande med stor nyfikenhet för
-            användarens behov och respekt för affären skapar vi digitala
-            tjänster och produkter som förändrar. Alltid i team och alltid
-            agilt.
-          </Typography.ParagraphLg>
-        </div>
-      </div>
-    </Layout.Content>
-  </Layout.Base>
-  <div class="px-8">
-    <Layout.Content>
-      <div class="mb-12 sm:mb-24">
-        <div class="grid md:grid-cols-2 grid-cols-1 justify-items-center gap-8">
-          <img
-            class="h-auto w-full object-cover md:mb-32"
-            src="Kitchen-Monday-meeting-Lowres.png"
-            alt="beautiful kitchen" />
-          <img
-            class="h-auto w-full object-cover md:mt-32"
-            src="Hopper-Interior-Lowres.png"
-            alt="nice room" />
-        </div>
+  <Layout.Container>
+    <div class="max-w-4xl mx-auto">
+      <Typography.H1>Vi är en digitaliseringsbyrå</Typography.H1>
+      <div class="max-w-4xl">
+        <Typography.ParagraphLg>
+          Genom att kombinera djupt tekniskt kunnande med stor nyfikenhet för
+          användarens behov och respekt för affären skapar vi digitala tjänster
+          och produkter som förändrar. Alltid i team och alltid agilt.
+        </Typography.ParagraphLg>
       </div>
-    </Layout.Content>
-  </div>
+    </div>
+    <div class="grid md:grid-cols-2 grid-cols-1 justify-items-center gap-8">
+      <img
+        class="h-auto w-full object-cover md:mb-32"
+        src="Kitchen-Monday-meeting-Lowres.png"
+        alt="beautiful kitchen" />
+      <img
+        class="h-auto w-full object-cover md:mt-32"
+        src="Hopper-Interior-Lowres.png"
+        alt="nice room" />
+    </div>
+  </Layout.Container>
 </Animation.WithScrollFadeIn>
 <Animation.WithScrollFadeIn>
-  <div class="bg-grey-dark text-white">
-    <Layout.Base>
-      <Layout.Content>
-        <div class="grid grid-rows gap-24 lg:mb-12">
-          {#each items as item}
-            <div class="grid md:grid-cols-3 md:gap-16">
-              <div class="md:col-span-1 ">
-                <Typography.H2>{item.title}</Typography.H2>
-              </div>
-              <div class="md:col-span-2 lg:max-w-xl justify-self-center">
-                <Typography.ParagraphMd>{item.body}</Typography.ParagraphMd>
-              </div>
-            </div>
-          {/each}
+  <Layout.Container background={'bg-grey-dark'}>
+    <div class="grid grid-rows gap-24 text-white">
+      {#each items as item}
+        <div class="grid md:grid-cols-5 md:gap-16">
+          <div class="md:col-span-2 col-start-1">
+            <Typography.H2>{item.title}</Typography.H2>
+          </div>
+          <div class="col-start-3 col-span-full justify-self-center">
+            <Typography.ParagraphMd>{item.body}</Typography.ParagraphMd>
+          </div>
         </div>
-      </Layout.Content>
-    </Layout.Base>
-  </div>
+      {/each}
+    </div>
+  </Layout.Container>
 </Animation.WithScrollFadeIn>
 <Animation.WithScrollFadeIn>
-  <Layout.Base>
-    <Layout.Content>
-      <div class="text-center ">
-        <Typography.H2>Vi som jobbar här</Typography.H2>
-      </div>
-      <div
-        class="grid gap-12 my-12"
-        style="grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));">
-        {#each coworkers as coworker}
-          <div class="grid" style="grid-template-rows: 284px max-content;">
-            <img
-              class="block w-full h-full object-cover"
-              src={coworker.image || `https://www.gravatar.com/avatar/${md5(coworker.email)}?s=300`}
-              alt="feature" />
-
-            <div>
-              <p class="mt-4 font-medium">{coworker.title}</p>
-              <p class="font-light">{coworker.role}</p>
-              <p class="font-light">
-                <a href="tel:{coworker.phone}">{coworker.phone}</a>
-              </p>
-              <p class="font-light text-sm leading-7">
-                <a
-                  class="underline"
-                  href="mailto:{coworker.email}">{coworker.email}</a>
-              </p>
-            </div>
-          </div>
-        {/each}
-      </div>
-    </Layout.Content>
-  </Layout.Base>
+  <Layout.Container>
+    <div class="text-center ">
+      <Typography.H2>Vi som jobbar här</Typography.H2>
+    </div>
+    <div class="coworker-grid">
+      {#each coworkers as coworker}
+        <div>
+          <img
+            class="block w-full object-cover"
+            src={coworker.image || `https://www.gravatar.com/avatar/${md5(coworker.email)}?s=300`}
+            alt="feature" />
+          <p class="mt-4 font-medium">{coworker.title}</p>
+          <p class="font-light">{coworker.role}</p>
+          <p class="font-light">
+            <a href="tel:{coworker.phone}">{coworker.phone}</a>
+          </p>
+          <p class="font-light text-sm leading-7">
+            <a
+              class="underline"
+              href="mailto:{coworker.email}">{coworker.email}</a>
+          </p>
+        </div>
+      {/each}
+    </div>
+  </Layout.Container>
 </Animation.WithScrollFadeIn>
 <Animation.WithScrollFadeIn>
   <div class="grid grid-cols-1 lg:grid-cols-2 bg-blue-marine lg:h-banner">
@@ -178,21 +158,17 @@
   </div>
 </Animation.WithScrollFadeIn>
 <Animation.WithScrollFadeIn>
-  <div class="bg-sand px-8">
-    <Layout.Content>
-      <div class="pb-16 grid grid-cols-2 sm:grid-cols-4 gap-8">
-        {#each iteamFacts as fact}
-          <div class="text-center">
-            <div class="text-superblue">
-              <Typography.H3 fontWeight="font-black">
-                {fact.title}
-              </Typography.H3>
-            </div>
-            <Typography.ParagraphMd>{fact.body}</Typography.ParagraphMd>
+  <Layout.Container background={'bg-sand'}>
+    <div class="grid grid-cols-2 sm:grid-cols-4 gap-8">
+      {#each iteamFacts as fact}
+        <div class="text-center">
+          <div class="text-superblue">
+            <Typography.H3 fontWeight="font-black">{fact.title}</Typography.H3>
           </div>
-        {/each}
-      </div>
-    </Layout.Content>
-  </div>
+          <Typography.ParagraphMd>{fact.body}</Typography.ParagraphMd>
+        </div>
+      {/each}
+    </div>
+  </Layout.Container>
 </Animation.WithScrollFadeIn>
 <ContactBlock.Default />
diff --git a/sapper/static/global.css b/sapper/static/global.css
index cacf2be6..55649ddd 100644
--- a/sapper/static/global.css
+++ b/sapper/static/global.css
@@ -8,6 +8,22 @@ body {
   @apply font-body;
 }
 
+@layer components {
+  .coworker-grid {
+    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+    @apply grid gap-12;
+  }
+}
+
+.iteam-width {
+  display: grid;
+  grid-template-columns: 2rem 1fr minmax(100px, 1280px) 1fr 2rem;
+}
+
+.iteam-width > * {
+  grid-column: 3/4;
+}
+
 .darkness {
   -webkit-filter: brightness(0.3);
   filter: brightness(0.3);
@@ -101,8 +117,7 @@ body {
 .post blockquote,
 .post ul,
 .post .kg-bookmark-card {
-  padding-left: 2rem;
-  padding-right: 2rem;
+  max-width: 56rem;
 }
 
 .post .kg-bookmark-card {
@@ -179,8 +194,7 @@ body {
   .post blockquote,
   .post ul,
   .post .kg-bookmark-card {
-    padding-left: 5.75rem;
-    padding-right: 5.75rem;
+    max-width: 56rem;
   }
 
   .post blockquote {