diff --git a/sapper/src/routes/om-oss/[slug].svelte b/sapper/src/routes/om-oss/[slug].svelte
new file mode 100644
index 00000000..71787113
--- /dev/null
+++ b/sapper/src/routes/om-oss/[slug].svelte
@@ -0,0 +1,61 @@
+<script context="module">
+  import { API } from '../../services/api.js'
+
+  export async function preload({ params: { slug } }, session) {
+    return API({ fetch: this.fetch, session }).Coworkers.BySlug(slug)
+  }
+</script>
+
+<script>
+  import Animation from '../../components/animation/'
+  import Layout from '../../components/layout'
+  import Typography from '../../components/typography'
+  import Meta from '../../components/Meta.svelte'
+  import md5 from 'md5'
+
+  export let coworker
+  const [workTitle, phone, email] = coworker.custom_excerpt.split('\n')
+</script>
+
+<Meta
+  title="Iteam | Coworkers - {coworker.meta_title || coworker.title}"
+  description={coworker.meta_description || coworker.excerpt}
+  image={coworker.feature_image} />
+
+<Animation.WithScrollFadeIn>
+  <Layout.Container>
+    <img
+      class="rounded-full h-48 sm:h-auto  mb-16"
+      src={`https://www.gravatar.com/avatar/${md5(email)}?s=300`}
+      alt={coworker.title} />
+    <Typography.H1>{coworker.title}</Typography.H1>
+    <div class="max-w-4xl">
+      <Typography.ParagraphLg>{workTitle}</Typography.ParagraphLg>
+      <div>
+        <div class="md:px-24 py-12 max-w-2xl">
+          <div class="text-blue-cornflower">
+            <Typography.H2>Kontakt:</Typography.H2>
+          </div>
+          <Typography.ParagraphMd>
+            <b><a href={`callto:${phone}`}>{phone}</a></b>
+          </Typography.ParagraphMd>
+          <Typography.ParagraphMd>
+            <b><a href={`mailto:${email}`}>{email}</a></b>
+          </Typography.ParagraphMd>
+          <div class="mt-8 md:mt-12">
+            <div class="text-blue-cornflower">
+              <Typography.H2>Bakgrund</Typography.H2>
+            </div>
+            <Typography.ParagraphMd>
+              Här är lite bakgrund om mig
+            </Typography.ParagraphMd>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div>
+      <div
+        class="grid sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 py-6 gap-6" />
+    </div>
+  </Layout.Container>
+</Animation.WithScrollFadeIn>
diff --git a/sapper/src/routes/om-oss/coworkers.svelte b/sapper/src/routes/om-oss/coworkers.svelte
index d587503f..e69de29b 100644
--- a/sapper/src/routes/om-oss/coworkers.svelte
+++ b/sapper/src/routes/om-oss/coworkers.svelte
@@ -1,59 +0,0 @@
-<script context="module">
-  import { API } from '../../services/api.js'
-
-  export async function preload(page, session) {
-    return API({ fetch: this.fetch, session }).Pages.ByTags(['Medarbetare'])
-  }
-</script>
-
-<script>
-  export let pages
-  import Layout from '../../components/layout'
-  import Typography from '../../components/typography/'
-  import Links from '../../components/links'
-  import FeaturedImageIteam from '../../assets/featured-image-iteam.svg'
-  import Meta from '../../components/Meta.svelte'
-</script>
-
-<!-- Medarbetare -->
-<Meta title="Iteam | Medarbetare" />
-
-<Layout.Base>
-  <div class="flex flex-col md:flex-row-reverse justify-between px-8 sm:px-32">
-    <div class="w-1/2">
-      <FeaturedImageIteam />
-    </div>
-    <div class="flex-initial max-w-md pt-8">
-      <Typography.H1>Medarbetare</Typography.H1>
-      <Typography.ParagraphSm>
-        Här är vi som jobbar på Iteam.
-      </Typography.ParagraphSm>
-      <Links.ArrowTextLink to="/career">
-        Vill du se ditt ansikte här?
-      </Links.ArrowTextLink>
-    </div>
-  </div>
-
-  <div class="flex flex-wrap justify-center px-8 md:px-12 pt-32">
-    {#each pages as coworker}
-      <div
-        class="transform hover:shadow-hover transition duration-500 ease-in
-          hover:bg-white p-4 rounded-md my-2 mx-2 w-full sm:w-2/5 xl:w-1/5">
-        <a rel="prefetch" href={`/om-oss/medarbetare/${coworker.slug}`}>
-          <div class="h-full pb-4">
-            <div class="relative" style="height: 90%;">
-              <img
-                class="rounded-full object-cover"
-                src={coworker.feature_image}
-                alt="feature" />
-              <p class="mt-4 font-medium text-center">{coworker.title}</p>
-              <p class="font-light text-center mt-4">
-                {@html coworker.excerpt.replace('\n', '<br />')}
-              </p>
-            </div>
-          </div>
-        </a>
-      </div>
-    {/each}
-  </div>
-</Layout.Base>
diff --git a/sapper/src/routes/om-oss/index.svelte b/sapper/src/routes/om-oss/index.svelte
index b93cde11..80868ca4 100644
--- a/sapper/src/routes/om-oss/index.svelte
+++ b/sapper/src/routes/om-oss/index.svelte
@@ -16,18 +16,22 @@
   import ContactBlock from '../../components/contact'
   import Meta from '../../components/Meta.svelte'
   import md5 from 'md5'
+
   export let pages
 
-  const coworkers = pages.map(({ title, excerpt, feature_image: image }) => {
-    const [role, phone, email] = excerpt.split('\n')
-    return {
-      title,
-      role,
-      phone,
-      email,
-      image,
+  const coworkers = pages.map(
+    ({ title, excerpt, feature_image: image, slug }) => {
+      const [role, phone, email] = excerpt.split('\n')
+      return {
+        title,
+        role,
+        phone,
+        email,
+        image,
+        slug,
+      }
     }
-  })
+  )
 
   export let items = [
     {
@@ -110,22 +114,24 @@
     </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>
+        <a href={`/om-oss/${coworker.slug}`}>
+          <div>
+            <img
+              class="block w-full object-cover transition duration-200 ease-in-out transform hover:-translate-y-1 hover:scale-105"
+              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>
+        </a>
       {/each}
     </div>
   </Layout.Container>
diff --git a/sapper/src/services/api.js b/sapper/src/services/api.js
index 2819418f..65d8d26a 100644
--- a/sapper/src/services/api.js
+++ b/sapper/src/services/api.js
@@ -80,6 +80,15 @@ export const API = (context) => ({
       return { post }
     },
   },
+  Coworkers: {
+    BySlug: async (slug) => {
+      const {
+        pages: [coworker]
+      } = await get(context, `/pages/slug/${slug}&include=tags,authors`)
+
+      return { coworker }
+    },
+  },
   Posts: {
     ByTags: async (tags) => {
       let filter = '?filter='