diff --git a/nuxt/assets/scss/defaults.scss b/nuxt/assets/scss/defaults.scss
index 1667fc1..6cd3755 100644
--- a/nuxt/assets/scss/defaults.scss
+++ b/nuxt/assets/scss/defaults.scss
@@ -23,9 +23,12 @@
 
   // Font weights
   --font-weight-light: 300;
-  --font-weight-medium: 500;
-  --font-weight-semibold: 600;
-  --font-weight-bold: 700;
+  --font-weight-medium: 400;
+  --font-weight-semibold: 500;
+  --font-weight-bold: 600;
+
+  // Font family
+  --font-family: Poppins;
 
   // Spacing & Dimensions
   --space-0: 0.0625rem; // 1px
@@ -35,4 +38,11 @@
     $value: $i * $increment;
     --space-#{$i}: #{$value};
   }
+
+  // Transitions
+  --transition-page-vertical: top 1s;
+  --transition-page-horizontal: left 1s;
+  --transition-slider: 0.15s ease-in-out;
+  --transition-accordeon: 0.4s ease-in-out;
+  --transition-state: all 0.3s ease;
 }
diff --git a/nuxt/assets/scss/main.scss b/nuxt/assets/scss/main.scss
index 9ac5738..542b65a 100644
--- a/nuxt/assets/scss/main.scss
+++ b/nuxt/assets/scss/main.scss
@@ -14,7 +14,7 @@ h3 {
   font-weight: var(--font-weight-semibold);
 }
 
-@include sm-screen-down {
+@mixin responsive-typography {
   h1 {
     font-size: var(--font-size-l);
   }
@@ -28,8 +28,22 @@ h3 {
   }
 }
 
+@include sm-screen-down {
+  @include responsive-typography()
+}
+
+#preview {
+  &.preview-tablet,
+  &.preview-cellphone {
+    @include responsive-typography()
+  }
+}
+
 body {
   background-color: var(--background-color);
+}
+
+body, #preview {
   color: var(--text-color);
   font-family: var(--font-family);
   font-size: var(--font-size-base);
diff --git a/nuxt/assets/scss/transitions.scss b/nuxt/assets/scss/transitions.scss
index c4bf4d6..392a939 100644
--- a/nuxt/assets/scss/transitions.scss
+++ b/nuxt/assets/scss/transitions.scss
@@ -1,10 +1,10 @@
 /**
  * Transition to and from the art pages
  */
- .up {
+.up {
   &.slide-leave-active,
   &.slide-enter-active {
-    transition: top 1s;
+    transition: var(--transition-page-vertical);
   }
 
   &.slide-enter-from {
@@ -17,14 +17,14 @@
 
 .down {
   &.slide-leave-active {
-    transition: top 1s;
+    transition: var(--transition-page-vertical);
   }
 
   &.slide-leave-from {
     top: 0;
   }
   &.slide-leave-to {
-    top: 100%
+    top: 100%;
   }
 }
 
@@ -34,14 +34,14 @@
 .left {
   &.slide-leave-active,
   &.slide-enter-active {
-    transition: left 1s;
+    transition: var(--transition-page-horizontal);
   }
 
   &.slide-enter-from {
     left: 100%;
   }
   &.slide-enter-to {
-    left: 0
+    left: 0;
   }
   &.slide-leave-to {
     left: -100%;
@@ -54,7 +54,7 @@
 .right {
   &.slide-leave-active,
   &.slide-enter-active {
-    transition: left 1s;
+    transition: var(--transition-page-horizontal);
   }
 
   &.slide-enter-from {
@@ -62,7 +62,7 @@
   }
 
   &.slide-enter-to {
-    left: 0%
+    left: 0%;
   }
   &.slide-leave-to {
     left: 100%;
diff --git a/nuxt/components/Atoms/Accordeon.vue b/nuxt/components/Atoms/Accordeon.vue
new file mode 100644
index 0000000..63605dc
--- /dev/null
+++ b/nuxt/components/Atoms/Accordeon.vue
@@ -0,0 +1,87 @@
+<template>
+  <div class="accordeon">
+    <div
+      class="accordeon-header"
+      tabindex="0"
+      @click="toggle"
+      @keydown.prevent.enter="toggle">
+      <slot name="header">
+        {{ header }}
+      </slot>
+      <div
+        class="icon"
+        :class="openClasses">
+        <Icon icon="mdi:chevron-right" />
+      </div>
+    </div>
+    <div
+      class="accordeon-body"
+      :class="openClasses">
+      <div
+        class="inner"
+        :class="openClasses">
+        <slot></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  header?: string;
+  initial?: boolean;
+}>();
+const open = ref(props.initial ?? false);
+
+const openClasses = computed(() => {
+  return {
+    open: open.value,
+  };
+});
+
+const toggle = () => {
+  open.value = !open.value;
+};
+</script>
+
+<style lang="scss" scoped>
+.accordeon {
+  outline: none;
+  &-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--space-2) 0;
+    cursor: pointer;
+
+    .icon {
+      transition: transform var(--transition-accordeon);
+
+      &.open {
+        transform: rotate(90deg) translate(0, 6px);
+      }
+    }
+  }
+
+  &-body {
+    overflow: hidden;
+    transition: max-height var(--transition-accordeon), opacity var(--transition-accordeon);
+
+    &.open {
+      max-height: 100vh;
+      opacity: 1;
+    }
+
+    &:not(.open) {
+      max-height: 0;
+      opacity: 0;
+    }
+
+    .inner {
+      &:not(.open) {
+        visibility: hidden;
+      }
+    }
+  }
+}
+</style>
diff --git a/nuxt/components/Atoms/ArtworkTeaser.vue b/nuxt/components/Atoms/ArtworkTeaser.vue
index 5836692..578854a 100644
--- a/nuxt/components/Atoms/ArtworkTeaser.vue
+++ b/nuxt/components/Atoms/ArtworkTeaser.vue
@@ -69,7 +69,7 @@ defineProps<{
       width: 100%;
       height: 100%;
       object-fit: cover;
-      transition: 0.15s ease-in-out;
+      transition: var(--transition-slider);
     }
   }
 
diff --git a/nuxt/components/Atoms/Button.vue b/nuxt/components/Atoms/Button.vue
index 3d2a2d5..b4b1294 100644
--- a/nuxt/components/Atoms/Button.vue
+++ b/nuxt/components/Atoms/Button.vue
@@ -28,14 +28,19 @@ const classes = computed(() => {
   padding: var(--space-4) var(--space-8);
   border-radius: var(--space-2);
   cursor: pointer;
+  transition: var(--transition-state);
   user-select: none;
 
+  &:disabled {
+    cursor: not-allowed;
+  }
+
   &.primary {
     color: var(--background-color);
     border: var(--space-0) solid transparent;
     background-color: var(--blues-blue);
 
-    &:hover {
+    &:hover:enabled {
       color: var(--blues-blue);
       background-color: var(--background-color);
       border: var(--space-0) solid var(--blues-blue);
@@ -47,7 +52,7 @@ const classes = computed(() => {
     color: var(--blues-blue);
     border: var(--space-0) solid var(--blues-blue);
 
-    &:hover {
+    &:hover:enabled {
       background-color: var(--blues-blue);
       color: var(--background-color);
       border: var(--space-0) solid transparent;
diff --git a/nuxt/components/Atoms/CategoryTeaser.vue b/nuxt/components/Atoms/CategoryTeaser.vue
index bb01245..7fa49cc 100644
--- a/nuxt/components/Atoms/CategoryTeaser.vue
+++ b/nuxt/components/Atoms/CategoryTeaser.vue
@@ -86,7 +86,7 @@ const to = computed(() => {
       width: var(--max-width-slide);
       height: 100%;
       object-fit: cover;
-      transition: 0.15s ease-in-out;
+      transition: var(--transition-slider);
       filter: blur(0.625rem);
       position: absolute;
       left: 50%;
diff --git a/nuxt/components/Atoms/Cellphone.vue b/nuxt/components/Atoms/Cellphone.vue
new file mode 100644
index 0000000..433d27e
--- /dev/null
+++ b/nuxt/components/Atoms/Cellphone.vue
@@ -0,0 +1,185 @@
+<template>
+  <div class="device device-iphone-x">
+    <div class="device-frame">
+      <div class="device-screen">
+        <slot></slot>
+      </div>
+    </div>
+    <div class="device-stripe"></div>
+    <div class="device-header"></div>
+    <div class="device-sensors"></div>
+    <div class="device-btns"></div>
+    <div class="device-power"></div>
+    <div class="device-home"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+//
+</script>
+
+<style lang="scss" scoped>
+// iPhone X
+$device-silver: #e2e3e4;
+$device-silver-dark: darken($device-silver, 10%);
+$device-silver-panel: #222;
+
+.device {
+    position: relative;
+    transform: scale(1);
+    z-index: 1;
+}
+
+.device-iphone-x {
+  height: 868px;
+  width: 428px;
+
+  .device-frame {
+    background: $device-silver-panel;
+    border-radius: 68px;
+    box-shadow:
+      inset 0 0 2px 2px $device-silver-dark,
+      inset 0 0 0 7px $device-silver;
+    height: 868px;
+    padding: 28px;
+    width: 428px;
+  }
+
+  // 2436-by-1125-pixel resolution
+  .device-screen {
+    border-radius: 40px;
+    height: 812px;
+    width: 375px;
+    overflow-x: hidden;
+    overflow-y: scroll;
+    background-color: var(--background-color);
+    color: var(--text-color);
+  }
+
+  .device-stripe {
+    &::after,
+    &::before {
+      border: solid rgba(1, 1, 1, 0.25);
+      border-width: 0 7px;
+      content: '';
+      height: 7px;
+      left: 0;
+      position: absolute;
+      width: 100%;
+      z-index: 9;
+    }
+    &::after {
+      top: 85px;
+    }
+    &::before {
+      bottom: 85px;
+    }
+  }
+
+  .device-header {
+    background: $device-silver-panel;
+    border-bottom-left-radius: 20px;
+    border-bottom-right-radius: 20px;
+    height: 30px;
+    left: 50%;
+    margin-left: -102px;
+    position: absolute;
+    top: 28px;
+    width: 204px;
+    z-index: 20;
+
+    &::after,
+    &::before {
+      content: '';
+      height: 10px;
+      position: absolute;
+      top: 0;
+      width: 10px;
+    }
+    &::after {
+      background: radial-gradient(
+        circle at bottom left,
+        transparent 0,
+        transparent 75%,
+        $device-silver-panel 75%,
+        $device-silver-panel 100%
+      );
+      left: -10px;
+    }
+    &::before {
+      background: radial-gradient(
+        circle at bottom right,
+        transparent 0,
+        transparent 75%,
+        $device-silver-panel 75%,
+        $device-silver-panel 100%
+      );
+      right: -10px;
+    }
+  }
+
+  .device-sensors {
+    &::after,
+    &::before {
+      content: '';
+      position: absolute;
+      z-index: 20;
+    }
+    &::after {
+      background: #333;
+      border-radius: 3px;
+      height: 6px;
+      left: 50%;
+      margin-left: -25px;
+      top: 32px;
+      width: 50px;
+    }
+    &::before {
+      background: radial-gradient(farthest-corner at 20% 20%, #6074bf 0, transparent 40%),
+        radial-gradient(farthest-corner at 80% 80%, #513785 0, #24555e 20%, transparent 50%);
+      box-shadow: 0 0 1px 1px rgba(255, 255, 255, 0.05);
+      border-radius: 50%;
+      height: 10px;
+      left: 50%;
+      margin-left: 42px;
+      top: 30px;
+      width: 10px;
+    }
+  }
+
+  .device-btns {
+    background: $device-silver-dark;
+    height: 32px;
+    left: -3px;
+    position: absolute;
+    top: 115px;
+    width: 3px;
+
+    &::after,
+    &::before {
+      background: $device-silver-dark;
+      content: '';
+      height: 62px;
+      left: 0;
+      position: absolute;
+      width: 3px;
+    }
+
+    &::after {
+      top: 60px;
+    }
+    &::before {
+      top: 140px;
+    }
+  }
+
+  .device-power {
+    background: $device-silver-dark;
+    height: 100px;
+    right: -3px;
+    position: absolute;
+    top: 200px;
+    width: 3px;
+  }
+}
+</style>
diff --git a/nuxt/components/Atoms/InputWrapper.vue b/nuxt/components/Atoms/InputWrapper.vue
index 2b4a2de..20a83f7 100644
--- a/nuxt/components/Atoms/InputWrapper.vue
+++ b/nuxt/components/Atoms/InputWrapper.vue
@@ -20,6 +20,7 @@ const classes = computed(() => {
   return {
     'input-wrapper': true,
     inline: props.inline,
+    label: !!props.label,
   };
 });
 </script>
@@ -29,23 +30,31 @@ const classes = computed(() => {
   display: grid;
   grid-template-columns: 1fr;
   grid-template-rows: min-content auto;
-  grid-template-areas: 'label' 'input';
+  grid-template-areas: 'input';
   gap: var(--space-4);
-  background-color: var(--background-color);
   color: var(--text-color);
   width: 100%;
 
+  &.label {
+    grid-template-areas: 'label' 'input';
+  }
+
   &.inline {
     grid-template-columns: min-content auto;
     grid-template-rows: min-content;
-    grid-template-areas: 'label input';
+    grid-template-areas: 'input';
+
+    &.label {
+      grid-template-areas: 'label input';
+    }
   }
 
   label {
     grid-area: label;
     display: flex;
     align-items: center;
-    font-size: var(--font-size-lg);
+    font-size: var(--font-size-base);
+    font-weight: var(--font-weight-light);
     text-wrap: nowrap;
   }
 
diff --git a/nuxt/components/Atoms/Tablet.vue b/nuxt/components/Atoms/Tablet.vue
new file mode 100644
index 0000000..fcb6296
--- /dev/null
+++ b/nuxt/components/Atoms/Tablet.vue
@@ -0,0 +1,160 @@
+<template>
+  <div
+    class="device device-ipad-pro"
+    :style="{
+      '--device-sf': scaleFactor,
+    }">
+    <div class="device-frame">
+      <div class="device-screen">
+        <slot></slot>
+      </div>
+    </div>
+    <div class="device-sensors"></div>
+    <div class="device-home"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+/**
+ * Constants
+ */
+const PreviewSidebarWidth = 380;
+const PreviewViewPadding = 48;
+const DefaultWidth = 804;
+const MinWidth = DefaultWidth;
+const MaxWidth = 1024;
+
+/**
+ * State
+ */
+const scaleFactor = ref(getScaleFactor());
+
+/**
+ * Methods
+ */
+function getAvailableWidth() {
+  const preview = document.getElementById('preview');
+  if (!preview) {
+    return Number.POSITIVE_INFINITY;
+  }
+
+  return Math.max(0, window.innerWidth - PreviewSidebarWidth - PreviewViewPadding);
+}
+
+function getScaleFactor() {
+  const availableWidth = getAvailableWidth();
+
+  let width = availableWidth;
+  if (width > MaxWidth) {
+    width = MaxWidth;
+  } else if (availableWidth < MinWidth) {
+    width = MinWidth;
+  }
+
+  return width / DefaultWidth;
+}
+
+const onResize = useDebounce(() => {
+  scaleFactor.value = getScaleFactor();
+}, 150);
+
+/**
+ * Lifecycles
+ */
+onMounted(() => {
+  window.addEventListener('resize', onResize);
+});
+
+onUnmounted(() => {
+  window.removeEventListener('resize', onResize);
+});
+</script>
+
+<style lang="scss" scoped>
+$device-silver: #e2e3e4;
+$device-silver-dark: darken($device-silver, 15%);
+$device-panel: #0d0d0d;
+$width: calc(804px * var(--device-sf));
+$height: calc(560px * var(--device-sf));
+$screenWidth: calc(680px * var(--device-sf));
+$screenHeight: calc(510px * var(--device-sf));
+
+.device {
+  position: relative;
+  transform: scale(1);
+  z-index: 1;
+}
+
+.device-ipad-pro {
+  height: $height;
+  width: $width;
+
+  .device-frame {
+    background: $device-panel;
+    border-radius: calc(36px * var(--device-sf));
+    box-shadow:
+      inset 0 0 0 1px $device-silver-dark,
+      inset 0 0 1px 3px $device-silver;
+    height: $height;
+    padding: calc(25px * var(--device-sf)) calc(62px * var(--device-sf));
+    width: $width;
+    display: grid;
+    place-content: center;
+  }
+
+  // 2732-by-2048-pixel resolution
+  .device-screen {
+    border: 2px solid lighten($device-panel, 2%);
+    border-radius: calc(11px * var(--device-sf));
+    height: $screenHeight;
+    width: $screenWidth;
+    overflow-x: hidden;
+    overflow-y: scroll;
+    background-color: var(--background-color);
+    color: var(--text-color);
+  }
+
+  .device-sensors {
+    &::after,
+    &::before {
+      content: '';
+      position: absolute;
+    }
+    &::after {
+      background: lighten($device-panel, 5%);
+      border-radius: calc(17px * var(--device-sf));
+      box-shadow:
+        calc(-20px * var(--device-sf)) 0 lighten($device-panel, 5%),
+        calc(70px * var(--device-sf)) 0 lighten($device-panel, 5%);
+      height: calc(10px * var(--device-sf));
+      top: 50%;
+      margin-top: calc(-30px * var(--device-sf));
+      left: calc(29px * var(--device-sf));
+      width: calc(10px * var(--device-sf));
+      transform: rotate(-90deg) scale(-1);
+    }
+    &::before {
+      background: radial-gradient(farthest-corner at 20% 20%, #6074bf 0, transparent 40%),
+        radial-gradient(farthest-corner at 80% 80%, #513785 0, #24555e 20%, transparent 50%);
+      box-shadow: 0 0 1px 1px rgba(255, 255, 255, 0.05);
+      border-radius: 50%;
+      height: calc(6px * var(--device-sf));
+      left: calc(31px * var(--device-sf));
+      margin-top: calc(-3px * var(--device-sf));
+      top: 50%;
+      width: calc(6px * var(--device-sf));
+    }
+  }
+
+  .device-home {
+    border: 2px solid #454545;
+    border-radius: 50%;
+    right: calc(17px * var(--device-sf));
+    height: calc(34px * var(--device-sf));
+    top: 50%;
+    margin-top: calc(-17px * var(--device-sf));
+    position: absolute;
+    width: calc(34px * var(--device-sf));
+  }
+}
+</style>
diff --git a/nuxt/components/Molecules/Branding/Header.vue b/nuxt/components/Molecules/Branding/Header.vue
index 0f44a1b..c6fd45f 100644
--- a/nuxt/components/Molecules/Branding/Header.vue
+++ b/nuxt/components/Molecules/Branding/Header.vue
@@ -2,7 +2,7 @@
   <div class="header">
     <img
       v-if="branding?.logo"
-      :src="branding.logo"
+      :src="branding.logo.url"
       class="header-image" />
     <h1
       v-else-if="branding?.name"
diff --git a/nuxt/components/Molecules/Branding/Intro.vue b/nuxt/components/Molecules/Branding/Intro.vue
index 43213e9..1a71ec9 100644
--- a/nuxt/components/Molecules/Branding/Intro.vue
+++ b/nuxt/components/Molecules/Branding/Intro.vue
@@ -25,14 +25,19 @@
 
 <script setup lang="ts">
 const { branding } = storeToRefs(useFlixStore());
+
 const description = computed(() => branding.value?.intro.description?.substring(0, 300));
+
 const introStyle = computed(() => {
   const styles = {} as Record<string, string>;
+
   if (branding.value?.banner) {
-    styles['--url'] = `url(${branding.value?.banner})`;
+    styles['--url'] = `url(${branding.value.banner.url})`;
   }
+
   return styles;
 });
+
 const introClass = computed(() => {
   return {
     intro: true,
diff --git a/nuxt/components/Molecules/Buttons/Category.vue b/nuxt/components/Molecules/Buttons/Category.vue
index 563b2d2..6076db4 100644
--- a/nuxt/components/Molecules/Buttons/Category.vue
+++ b/nuxt/components/Molecules/Buttons/Category.vue
@@ -10,15 +10,24 @@
 </template>
 
 <script setup lang="ts">
+/**
+ * Deps
+ */
 const flixStore = useFlixStore();
 const route = useRoute();
-const categoryPath = {
-  name: 'flix-category',
-  params: {
-    flix: flixStore.currentFlix?.id,
-    category: route.params.category,
-  },
-} as To;
+
+/**
+ * Computed properties
+ */
+const categoryPath = computed(() => {
+  return {
+    name: 'flix-category',
+    params: {
+      flix: flixStore.currentFlix?.id,
+      category: route.params.category,
+    },
+  } as To;
+});
 </script>
 
 <style lang="scss" scoped>
diff --git a/nuxt/components/Molecules/Form/Input.vue b/nuxt/components/Molecules/Form/Input.vue
index c18a55c..81f3f1d 100644
--- a/nuxt/components/Molecules/Form/Input.vue
+++ b/nuxt/components/Molecules/Form/Input.vue
@@ -25,7 +25,7 @@
     </template>
     <template v-else-if="type === 'select'">
       <select
-        class="input"
+        class="input select"
         :value="modelValue"
         @change="$emit('update:modelValue', ($event.target as HTMLSelectElement).value)">
         <option
@@ -62,67 +62,49 @@ defineEmits(['update:modelValue']);
 </script>
 
 <style lang="scss" scoped>
-.input-wrapper {
-  display: grid;
-  grid-template-columns: 1fr;
-  grid-template-rows: min-content auto;
-  grid-template-areas: 'label' 'input';
-  gap: var(--space-4);
+textarea {
+  height: var(--space-32);
+}
+
+.input {
+  grid-area: input;
   background-color: var(--background-color);
   color: var(--text-color);
-  width: 100%;
+  border: var(--space-0) solid var(--text-color);
+  border-radius: var(--space-1);
+  padding: var(--space-4);
+  box-sizing: content-box;
+  outline: none;
+  box-shadow: none;
+  cursor: auto;
 
-  &.inline {
-    grid-template-columns: min-content auto;
-    grid-template-rows: min-content;
-    grid-template-areas: 'label input';
+  &:focus,
+  &:focus-visible,
+  &:hover {
+    border-color: var(--neutrals-900);
   }
 
-  label {
-    grid-area: label;
-    display: flex;
-    align-items: center;
-    font-size: var(--font-size-lg);
-    text-wrap: nowrap;
+  &:disabled {
+    border-color: var(--neutrals-300);
+    color: var(--neutrals-600);
+    cursor: not-allowed;
   }
 
-  textarea {
-    height: var(--space-32);
+  &::placeholder {
+    color: var(--neutrals-400);
   }
 
-  .input {
-    grid-area: input;
-    border: var(--space-0) solid var(--text-color);
-    border-radius: var(--space-1);
-    padding: var(--space-5);
-    box-sizing: content-box;
-    outline: none;
-    box-shadow: none;
-    cursor: auto;
-
-    &:focus,
-    &:focus-visible,
-    &:hover {
-      border-color: var(--neutrals-900);
-    }
-
-    &:disabled {
-      border-color: var(--neutrals-300);
-      color: var(--neutrals-600);
-      cursor: not-allowed;
-    }
-
-    &::placeholder {
-      color: var(--neutrals-400);
-    }
+  &.color {
+    justify-self: self-end;
+    border: none;
+    padding: 0;
+    width: var(--space-8);
+    height: var(--space-8);
+  }
 
-    &.color {
-      justify-self: self-end;
-      border: none;
-      padding: 0;
-      width: var(--space-8);
-      height: var(--space-8);
-    }
+  &.color,
+  &.select {
+    cursor: pointer;
   }
 }
 </style>
diff --git a/nuxt/components/Molecules/Form/Upload.vue b/nuxt/components/Molecules/Form/Upload.vue
index be9148f..58d9bcb 100644
--- a/nuxt/components/Molecules/Form/Upload.vue
+++ b/nuxt/components/Molecules/Form/Upload.vue
@@ -8,10 +8,10 @@
         <div class="icon">
           <Icon icon="mdi:tray-upload" />
         </div>
-        {{ prompt }}
+        <span class="prompt">{{ prompt }}</span>
       </template>
       <template v-else>
-        {{ filename }}
+        <span class="filename">{{ filename }}</span>
         <button
           type="button"
           class="icon"
@@ -110,29 +110,10 @@ const clearInput = () => {
 </script>
 
 <style lang="scss" scoped>
-.input-wrapper {
-  display: grid;
-  grid-template-columns: 1fr;
-  grid-template-rows: min-content auto;
-  grid-template-areas: 'label' 'input';
-  gap: var(--space-4);
-  background-color: var(--background-color);
-  color: var(--text-color);
-  width: 100%;
-
-  &.inline {
-    grid-template-columns: min-content auto;
-    grid-template-rows: min-content;
-    grid-template-areas: 'label input';
-  }
-
-  label {
-    grid-area: label;
-    display: flex;
-    align-items: center;
-    font-size: var(--font-size-lg);
-    text-wrap: nowrap;
-  }
+.filename {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .inputfile {
@@ -142,6 +123,7 @@ const clearInput = () => {
   height: 100%;
   cursor: pointer;
   opacity: 0;
+  width: 100%;
 
   &-area {
     position: relative;
@@ -151,6 +133,7 @@ const clearInput = () => {
     flex-wrap: nowrap;
     align-items: center;
     gap: var(--space-8);
+    transition: var(--transition-state);
 
     &.file {
       justify-content: space-between;
@@ -162,6 +145,7 @@ const clearInput = () => {
       box-shadow: none;
       cursor: auto;
       width: auto;
+      overflow: hidden;
 
       &:focus,
       &:focus-visible,
@@ -178,6 +162,7 @@ const clearInput = () => {
       .icon {
         height: 1.25em;
         z-index: 2;
+        transition: var(--transition-state);
 
         &:hover {
           color: var(--blues-blue);
@@ -190,7 +175,7 @@ const clearInput = () => {
       background-color: var(--blues-blue-5);
       border: var(--space-0) dashed var(--blues-blue);
       border-radius: var(--space-1);
-      padding: var(--space-6) var(--space-10);
+      padding: var(--space-6) var(--space-8);
       cursor: pointer;
       color: var(--blues-blue);
       font-size: var(--font-size-md);
@@ -207,7 +192,7 @@ const clearInput = () => {
         padding: var(--space-6);
         border-radius: 50%;
         background: var(--blues-blue);
-        color: white;
+        color: var(--primary-color);
       }
     }
   }
diff --git a/nuxt/components/Molecules/Header.vue b/nuxt/components/Molecules/Header.vue
index a5b6ddb..07e11cc 100644
--- a/nuxt/components/Molecules/Header.vue
+++ b/nuxt/components/Molecules/Header.vue
@@ -64,7 +64,6 @@ withDefaults(
   grid-area: title;
   display: flex;
   justify-content: center;
-  text-transform: uppercase;
 }
 
 @include sm-screen-down {
diff --git a/nuxt/components/Molecules/Slider.vue b/nuxt/components/Molecules/Slider.vue
index 912bf4f..4e54440 100644
--- a/nuxt/components/Molecules/Slider.vue
+++ b/nuxt/components/Molecules/Slider.vue
@@ -31,21 +31,20 @@ interface SwiperElement extends HTMLElement {
 }
 
 const props = defineProps<{
-  sliderProps: object;
+  sliderProps: Swiper['params'];
 }>();
 
 const swiper = ref<SwiperElement>();
 const hideLeftNav = ref(true);
 const hideRightNav = ref(false);
 
-const swiperProps: any = Object.assign(
-  {
-    slidesPerView: 4.2,
-    spaceBetween: 72,
-    pagination: false,
-  },
-  props.sliderProps,
-);
+const swiperProps: Swiper['params'] = {
+  slidesPerView: 4.2,
+  spaceBetween: 72,
+  pagination: false,
+  breakpointsBase: 'container',
+  ...props.sliderProps,
+};
 
 const goToPrev = () => {
   if (swiper.value) {
@@ -92,9 +91,20 @@ const setNavBtnVisibility = (event: CustomEvent) => {
   display: none;
 }
 
-@include sm-screen-down {
+@mixin slider-sm {
   .swiper-button-nav {
     display: none;
   }
 }
+
+@include sm-screen-down {
+  @include slider-sm();
+}
+
+.preview {
+  &-tablet,
+  &-cellphone {
+    @include slider-sm();
+  }
+}
 </style>
diff --git a/nuxt/components/organisms/ArtworkSlider.vue b/nuxt/components/organisms/ArtworkSlider.vue
index a59eaaa..220a2ad 100644
--- a/nuxt/components/organisms/ArtworkSlider.vue
+++ b/nuxt/components/organisms/ArtworkSlider.vue
@@ -1,7 +1,8 @@
 <template>
   <div
+    v-if="artworks.length"
     class="artwork-slider"
-    v-if="artworks.length">
+    :class="[previewMediaQueryClassName]">
     <h1 class="artwork-title">{{ category.title }} {{ category.period }}</h1>
     <AtomsNavigation
       class="navigation-link"
@@ -37,13 +38,9 @@
 </template>
 
 <script setup lang="ts">
-const props = defineProps<{
-  category: Category;
-  preview?: boolean;
-}>();
-
-const { findByCategory } = useArtworkStore();
-const artworks = computed(() => findByCategory(props.category.id, 10, 0));
+/**
+ * Constants
+ */
 const artworksSliderProps = {
   slidesPerView: 1.2,
   spaceBetween: 24,
@@ -62,14 +59,41 @@ const artworksSliderProps = {
   },
 };
 
+/**
+ * Deps
+ */
+const flixBuilderStore = useFlixBuilderStore();
 const flixStore = useFlixStore();
-const categoryPath = {
-  name: 'flix-category',
-  params: {
-    flix: flixStore.currentFlix?.id,
-    category: props.category.slug,
-  },
-} as To;
+const artworkStore = useArtworkStore();
+
+/**
+ * State & Props
+ */
+const props = defineProps<{
+  category: Category;
+  preview?: boolean;
+}>();
+
+const { previewMediaQueryClassName } = storeToRefs(flixBuilderStore);
+
+/**
+ * Computed properties
+ */
+const artworks = computed(() => findByCategory(props.category.id, 10, 0));
+const categoryPath = computed(() => {
+  return {
+    name: 'flix-category',
+    params: {
+      flix: flixStore.currentFlix?.id,
+      category: props.category.slug,
+    },
+  } as To;
+});
+
+/**
+ * Methods
+ */
+const { findByCategory } = artworkStore;
 </script>
 
 <style scoped lang="scss">
@@ -116,7 +140,7 @@ const categoryPath = {
   text-transform: uppercase;
 }
 
-@include sm-screen-down {
+@mixin artwork-slider-sm {
   .artwork-slider {
     grid-template-rows: var(--space-6) auto 1fr auto;
     grid-template-areas:
@@ -137,4 +161,15 @@ const categoryPath = {
     font-weight: var(--font-weight-light);
   }
 }
+
+@include sm-screen-down {
+  @include artwork-slider-sm();
+}
+
+.preview {
+  &-tablet,
+  &-cellphone {
+    @include artwork-slider-sm();
+  }
+}
 </style>
diff --git a/nuxt/components/organisms/CategorySlider.vue b/nuxt/components/organisms/CategorySlider.vue
index 5e9f8e7..c73ac2e 100644
--- a/nuxt/components/organisms/CategorySlider.vue
+++ b/nuxt/components/organisms/CategorySlider.vue
@@ -42,7 +42,7 @@ const slideStyles = computed(() => {
   background-color: var(--primary-color);
 
   .category-slide {
-    transition: 0.15s ease-in-out;
+    transition: var(--transition-slider);
 
     &:hover {
       width: var(--max-width-slide) !important;
diff --git a/nuxt/components/organisms/Create/Editor.vue b/nuxt/components/organisms/Create/Editor.vue
new file mode 100644
index 0000000..27990bf
--- /dev/null
+++ b/nuxt/components/organisms/Create/Editor.vue
@@ -0,0 +1,136 @@
+<template>
+  <div class="preview">
+    <OrganismsCreatePreviewSidebar
+      :ready="ready"
+      @publish="publish" />
+    <div
+      id="preview"
+      :class="[previewMediaQueryClassName, { published }]">
+      <template v-if="ready">
+        <AtomsCellphone v-if="previewView === 'cellphone'">
+          <OrganismsFlix preview />
+        </AtomsCellphone>
+        <AtomsTablet v-else-if="previewView === 'tablet'">
+          <OrganismsFlix preview />
+        </AtomsTablet>
+        <OrganismsFlix
+          v-else
+          :class="[previewMediaQueryClassName]"
+          preview />
+      </template>
+      <AtomsLoader v-else />
+    </div>
+  </div>
+  <OrganismsCreateShare
+    v-if="published"
+    @close="onCloseModal" />
+</template>
+
+<script setup lang="ts">
+/**
+ * Deps
+ */
+const flixStore = useFlixStore();
+const flixBuilderStore = useFlixBuilderStore();
+
+/**
+ * State
+ */
+const ready = ref(false);
+const published = ref(false);
+const { previewView, previewMediaQueryClassName } = storeToRefs(flixBuilderStore);
+
+/**
+ * Methods
+ */
+const publish = async () => {
+  await flixBuilderStore.publishFlix();
+  published.value = true;
+};
+
+const onCloseModal = () => {
+  if (!flixBuilderStore.newFlixSlug) {
+    console.warn('Flix slug not found.');
+    return;
+  }
+
+  useNuxtApp().$navigate({
+    name: 'flix',
+    params: {
+      flix: flixBuilderStore.newFlixSlug,
+    },
+  });
+};
+
+/**
+ * Lifecyle methods
+ */
+onBeforeMount(async () => {
+  if (flixBuilderStore.newFlixSlug && flixBuilderStore.newFlixSlug !== 'nieuwe-flix') {
+    const uri = `${window.location.origin}/${flixBuilderStore.newFlixSlug}`;
+    const success = await flixBuilderStore.mergeExistingFlix(uri);
+
+    if (!success) {
+      await flixBuilderStore.saveDraftFlix();
+    }
+  } else {
+    await flixBuilderStore.saveDraftFlix();
+  }
+
+  flixStore.resetData();
+
+  if (flixBuilderStore.newFlixSlug) {
+    await flixStore.setupFlix(flixBuilderStore.newFlixSlug, true);
+    ready.value = true;
+  } else {
+    console.warn('Flix slug not found.');
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-4);
+  margin: 0 var(--space-20);
+
+  .actions {
+    display: flex;
+    align-items: center;
+    gap: var(--space-4);
+  }
+}
+
+.preview {
+  display: flex;
+  overflow-x: scroll;
+  min-height: calc(100vh - var(--space-24)); // full height minus banner
+
+  &-laptop {
+    max-height: 1080px;
+    overflow-y: scroll;
+  }
+}
+
+#preview {
+  padding: var(--space-6);
+  width: 100%;
+  font-family: var(--font-family);
+  display: flex;
+  justify-content: center;
+
+  &.preview-tablet,
+  &.preview-cellphone {
+    padding-top: var(--space-20);
+  }
+}
+
+.header,
+.preview {
+  &.published {
+    pointer-events: none;
+  }
+}
+</style>
diff --git a/nuxt/components/organisms/Create/Identity.vue b/nuxt/components/organisms/Create/Identity.vue
deleted file mode 100644
index ea6b95b..0000000
--- a/nuxt/components/organisms/Create/Identity.vue
+++ /dev/null
@@ -1,71 +0,0 @@
-<template>
-  <div class="wrapper">
-    <div class="intro">
-      <h1>Flix identiteit</h1>
-      <span>Wij proberen jouw Flix zoveel mogelijk te personaliseren</span>
-    </div>
-    <MoleculesFormInput
-      type="input"
-      class="name"
-      label="Naam"
-      v-model="newFlix.title" />
-    <MoleculesFormInput
-      type="input"
-      class="description"
-      label="Flix omschrijving"
-      v-model="newFlix.description" />
-    <MoleculesFormUpload
-      id="logo"
-      label="Flix logo"
-      prompt="Selecteer vanuit je browser of sleep in dit vlak om te uploaden"
-      v-model="newFlix.logo" />
-    <MoleculesFormUpload
-      id="banner"
-      label="Flix thumbnail"
-      prompt="Selecteer vanuit je browser of sleep in dit vlak om te uploaden"
-      v-model="newFlix.banner" />
-  </div>
-</template>
-
-<script setup lang="ts">
-const { newFlix } = storeToRefs(useFlixBuilderStore());
-</script>
-
-<style lang="scss" scoped>
-.wrapper {
-  font-family: 'Poppins';
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  grid-template-rows: min-content auto;
-  grid-template-areas:
-    'intro intro'
-    'name description';
-  gap: var(--space-20);
-  margin-inline: var(--space-15);
-  margin-block: var(--space-10);
-}
-
-.intro {
-  grid-area: intro;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-  gap: var(--space-4);
-
-  span {
-    font-size: var(--font-size-md);
-    font-weight: var(--font-weight-light);
-    color: var(--black-40);
-  }
-}
-
-.name {
-  grid-area: name;
-}
-
-.description {
-  grid-area: description;
-}
-</style>
diff --git a/nuxt/components/organisms/Create/Preview.vue b/nuxt/components/organisms/Create/Preview.vue
deleted file mode 100644
index b57da34..0000000
--- a/nuxt/components/organisms/Create/Preview.vue
+++ /dev/null
@@ -1,104 +0,0 @@
-<template>
-  <div
-    class="header"
-    :class="{ published }">
-    <h1>Flix bouwer</h1>
-    <div class="actions">
-      <AtomsButton
-        @click="flixBuilderStore.back"
-        variant="secondary">
-        Aanpassingen
-      </AtomsButton>
-      <AtomsButton @click="publish"> Delen </AtomsButton>
-    </div>
-  </div>
-  <div
-    id="preview"
-    class="preview"
-    :class="{ published }">
-    <OrganismsFlix
-      v-if="ready"
-      preview />
-    <AtomsLoader v-else />
-  </div>
-  <OrganismsCreateShare
-    v-if="published"
-    @close="onCloseModal" />
-</template>
-
-<script setup lang="ts">
-/**
- * Deps
- */
-const flixStore = useFlixStore();
-const flixBuilderStore = useFlixBuilderStore();
-
-/**
- * State
- */
-const ready = ref(false);
-const published = ref(false);
-
-/**
- * Methods
- */
-const publish = async () => {
-  await flixBuilderStore.publishFlix();
-  published.value = true;
-};
-
-const onCloseModal = () => {
-  if (!flixBuilderStore.newFlixSlug) {
-    console.warn('Flix slug not found.');
-    return;
-  }
-
-  useNuxtApp().$navigate({
-    name: 'flix',
-    params: {
-      flix: flixBuilderStore.newFlixSlug,
-    },
-  });
-};
-
-/**
- * Lifecyle methods
- */
-onBeforeMount(async () => {
-  await flixBuilderStore.saveDraftFlix();
-  flixStore.resetData();
-
-  if (flixBuilderStore.newFlixSlug) {
-    await flixStore.setupFlix(flixBuilderStore.newFlixSlug, true);
-    ready.value = true;
-  } else {
-    console.warn('Flix slug not found.');
-  }
-});
-</script>
-
-<style lang="scss" scoped>
-.header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 1rem;
-
-  .actions {
-    display: flex;
-    align-items: center;
-    gap: 1rem;
-  }
-}
-
-.preview {
-  margin-top: 2rem;
-}
-
-.header,
-.preview {
-  &.published {
-    pointer-events: none;
-  }
-}
-</style>
diff --git a/nuxt/components/organisms/Create/PreviewSidebar.vue b/nuxt/components/organisms/Create/PreviewSidebar.vue
new file mode 100644
index 0000000..2d95d28
--- /dev/null
+++ b/nuxt/components/organisms/Create/PreviewSidebar.vue
@@ -0,0 +1,331 @@
+<template>
+  <fieldset
+    class="sidebar"
+    :disabled="!ready">
+    <div class="title">
+      <h2>Flix bouwer</h2>
+    </div>
+    <AtomsAccordeon :initial="true">
+      <template #header>
+        <h4 class="section-header">Styling</h4>
+      </template>
+      <template #default>
+        <div class="divider"></div>
+        <AtomsAccordeon :initial="true">
+          <template #header>
+            <div class="block-header">Kleurgebruik</div>
+          </template>
+          <template #default>
+            <MoleculesFormInput
+              v-model="newFlix.primaryColor"
+              type="color"
+              inline
+              label="Primaire kleur" />
+            <MoleculesFormInput
+              v-model="newFlix.secondaryColor"
+              type="color"
+              inline
+              label="Secundaire kleur" />
+            <MoleculesFormInput
+              v-model="newFlix.tertiaryColor"
+              type="color"
+              inline
+              label="Tertiaire kleur" />
+            <!-- <MoleculesFormInput
+              type="color"
+              inline
+              label="Accenten" /> -->
+          </template>
+        </AtomsAccordeon>
+        <div class="divider"></div>
+        <AtomsAccordeon>
+          <template #header>
+            <div class="block-header">Typografie</div>
+          </template>
+          <template #default>
+            <MoleculesFormInput
+              v-model="newFlix.fontFamily"
+              type="select"
+              :options="typographyOptions" />
+          </template>
+        </AtomsAccordeon>
+      </template>
+    </AtomsAccordeon>
+    <div class="divider"></div>
+    <AtomsAccordeon
+      :initial="true"
+      class="offset">
+      <template #header>
+        <h4 class="section-header">Identiteit</h4>
+      </template>
+      <template #default>
+        <div class="divider"></div>
+        <AtomsAccordeon
+          header="Naam"
+          :initial="true">
+          <MoleculesFormInput v-model="newFlix.title" />
+        </AtomsAccordeon>
+        <div class="divider"></div>
+        <AtomsAccordeon header="Flix omschrijving">
+          <MoleculesFormInput v-model="newFlix.description" />
+        </AtomsAccordeon>
+        <div class="divider"></div>
+        <AtomsAccordeon header="Flix logo (optioneel)">
+          <MoleculesFormUpload
+            id="input-logo"
+            v-model="newFlix.logo"
+            prompt="Selecteer vanuit je browser of sleep in dit vlak om te uploaden" />
+        </AtomsAccordeon>
+        <div class="divider"></div>
+        <AtomsAccordeon header="Flix banner (optioneel)">
+          <MoleculesFormUpload
+            id="input-banner"
+            v-model="newFlix.banner"
+            prompt="Selecteer vanuit je browser of sleep in dit vlak om te uploaden" />
+        </AtomsAccordeon>
+      </template>
+    </AtomsAccordeon>
+    <div class="divider"></div>
+    <AtomsAccordeon
+      class="offset"
+      :initial="true">
+      <template #header>
+        <h4 class="section-header">Responsive view</h4>
+      </template>
+      <template #default>
+        <div class="responsive-view-buttons">
+          <button
+            v-for="device in devices"
+            :key="device"
+            type="button"
+            class="responsive-view-button"
+            :class="{ active: previewView === device }"
+            @click="previewView = device">
+            <Icon
+              :icon="`mdi:${device}`"
+              :width="responsiveButtonIconSize"
+              :height="responsiveButtonIconSize" />
+          </button>
+        </div>
+      </template>
+    </AtomsAccordeon>
+    <div
+      class="publish"
+      v-if="ready">
+      <AtomsButton
+        :disabled="!publishable"
+        @click="emit('publish')"
+        >PUBLICEER JOUW FLIX SITE</AtomsButton
+      >
+    </div>
+  </fieldset>
+</template>
+
+<script setup lang="ts">
+/**
+ * Constants
+ */
+const responsiveButtonIconSize = '1.8em';
+const typographyOptions = ['Poppins', 'Times New Roman'];
+const devices: PreviewMediaQuery[] = ['laptop', 'tablet', 'cellphone'];
+
+/**
+ * Deps
+ */
+const flixStore = useFlixStore();
+const flixBuilderStore = useFlixBuilderStore();
+const themeStore = useThemeStore();
+
+/**
+ * State
+ */
+const props = defineProps<{
+  ready?: boolean;
+}>();
+const emit = defineEmits(['publish']);
+const { newFlix, previewView } = storeToRefs(flixBuilderStore);
+const { currentFlix } = storeToRefs(flixStore);
+
+/**
+ * Computed properties
+ */
+const publishable = computed(() => {
+  return props.ready && flixBuilderStore.newFlixSlug !== 'nieuwe-flix';
+});
+
+/**
+ * Methods
+ */
+const objectUrls: Record<string, string> = {};
+const syncUploadedImage = (type: 'logo' | 'banner', image: UploadedImage | File | null | undefined) => {
+  if (image instanceof File) {
+    if (objectUrls[type]) {
+      URL.revokeObjectURL(objectUrls[type]);
+    }
+
+    if (!currentFlix.value!.branding) {
+      currentFlix.value!.branding = {} as any;
+    }
+
+    if (!currentFlix.value!.branding?.[type]) {
+      currentFlix.value!.branding![type] = {} as any;
+    }
+
+    const url = URL.createObjectURL(image);
+    objectUrls[type] = url;
+    currentFlix.value!.branding![type].url = url;
+  } else if (image == null) {
+    const url = objectUrls[type];
+
+    if (url) {
+      URL.revokeObjectURL(url);
+      delete objectUrls[type];
+    }
+
+    if (currentFlix.value?.branding?.[type]) {
+      delete currentFlix.value!.branding![type];
+    }
+  }
+};
+
+const update = useDebounce(flixBuilderStore.saveDraftFlix, 1000);
+
+/**
+ * Watchers
+ */
+
+// debounced update upon input change
+watch(
+  newFlix,
+  () => {
+    if (props.ready) {
+      update();
+    }
+  },
+  { deep: true },
+);
+
+// syncs theme input changes so that colors and fonts are immediately reflected in the preview
+watch(
+  () => flixBuilderStore.newFlixTheme,
+  () => {
+    themeStore.resetData();
+    themeStore.setThemeStyling(true);
+  },
+);
+
+// syncs intro input changes so that they are immediately reflected in the preview
+watch(
+  () => [newFlix.value.title, newFlix.value.description],
+  ([t, d]) => {
+    if (!currentFlix.value) {
+      return;
+    }
+
+    if (!currentFlix.value.branding) {
+      currentFlix.value.branding = {} as any;
+    }
+
+    currentFlix.value.branding!.name = t ?? '';
+
+    if (!currentFlix.value.branding!.intro) {
+      currentFlix.value.branding!.intro = {} as any;
+    }
+
+    currentFlix.value.branding!.intro!.title = t ?? '';
+    currentFlix.value.branding!.intro!.description = d ?? '';
+
+    if (flixBuilderStore.newFlixSlug) {
+      currentFlix.value.id = flixBuilderStore.newFlixSlug;
+    }
+  },
+);
+
+// syncs images so that image uploads are immediately reflected in the preview
+watch(
+  () => [newFlix.value.logo, newFlix.value.banner],
+  ([logo, banner]) => {
+    syncUploadedImage('logo', logo);
+    syncUploadedImage('banner', banner);
+  },
+);
+
+/**
+ * Lifecycle hooks
+ */
+onUnmounted(() => {
+  for (const key in objectUrls) {
+    URL.revokeObjectURL(objectUrls[key]);
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.sidebar {
+  background-color: #f5f5f5;
+  min-width: 380px;
+  width: 380px;
+  padding: var(--space-6);
+  border: none;
+
+  .divider {
+    background-color: #8c8c8c;
+    height: var(--space-0);
+    width: 100%;
+    margin: var(--space-2) 0 var(--space-2);
+  }
+
+  .title {
+    text-align: center;
+    margin-bottom: var(--space-4);
+  }
+
+  .section-header {
+    font-size: var(--font-size-lg);
+    font-weight: var(--font-weight-bold);
+  }
+
+  .block-header {
+    font-size: var(--font-size-base);
+    font-weight: var(--font-weight-medium);
+  }
+
+  .offset {
+    margin-top: var(--space-8);
+  }
+
+  .publish {
+    margin-top: var(--space-10);
+  }
+}
+
+.responsive-view-buttons {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--space-6);
+  padding-top: var(--space-4);
+}
+
+.responsive-view-button {
+  width: var(--space-22);
+  height: var(--space-16);
+  border: 2px solid gray;
+  transition: var(--transition-state);
+
+  svg {
+    transition: var(--transition-state);
+  }
+
+  &:hover,
+  &.active {
+    background-color: var(--background-color);
+    color: var(--text-color);
+    border-color: var(--text-color);
+
+    svg {
+      color: var(--text-color);
+    }
+  }
+}
+</style>
diff --git a/nuxt/components/organisms/Create/Styling.vue b/nuxt/components/organisms/Create/Styling.vue
deleted file mode 100644
index 3a951d2..0000000
--- a/nuxt/components/organisms/Create/Styling.vue
+++ /dev/null
@@ -1,81 +0,0 @@
-<template>
-  <div class="wrapper">
-    <div class="intro">
-      <h1>Flix Styling</h1>
-      <span>Personaliseer jouw Flix. Binnen de preview is dit nog aan te passen.</span>
-    </div>
-    <div class="colors">
-      <span>Kleurgebruik</span>
-      <MoleculesFormInput
-        inline
-        type="color"
-        class="color"
-        label="Primary"
-        v-model="newFlix.primaryColor" />
-      <MoleculesFormInput
-        inline
-        type="color"
-        class="color"
-        label="Secondary"
-        v-model="newFlix.secondaryColor" />
-      <MoleculesFormInput
-        inline
-        type="color"
-        class="color"
-        label="Tertiary"
-        v-model="newFlix.tertiaryColor" />
-    </div>
-    <div class="fonts">
-      <MoleculesFormInput
-        type="select"
-        label="Typograhie"
-        :options="typographyOptions"
-        v-model="newFlix.fontFamily" />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-const { newFlix } = storeToRefs(useFlixBuilderStore());
-
-const typographyOptions = ['Poppins', 'Times New Roman'];
-</script>
-
-<style lang="scss" scoped>
-.wrapper {
-  font-family: 'Poppins';
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  grid-template-rows: min-content auto;
-  grid-template-areas:
-    'intro intro'
-    'colors fonts';
-  gap: var(--space-20);
-  margin-inline: var(--space-15);
-  margin-block: var(--space-10);
-}
-
-.intro {
-  grid-area: intro;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-  gap: var(--space-4);
-
-  span {
-    font-size: var(--font-size-md);
-    font-weight: var(--font-weight-light);
-    color: var(--black-40);
-  }
-}
-
-.colors {
-  grid-area: colors;
-}
-
-.fonts {
-  grid-area: fonts;
-}
-</style>
diff --git a/nuxt/nuxt.config.ts b/nuxt/nuxt.config.ts
index 260b6b9..6fe3964 100644
--- a/nuxt/nuxt.config.ts
+++ b/nuxt/nuxt.config.ts
@@ -6,10 +6,6 @@ export default defineNuxtConfig({
   devtools: {
     enabled: false,
   },
-  sourcemap: {
-    server: true,
-    client: true,
-  },
   css: [
     'ress/ress.css',
     '@/assets/scss/defaults.scss',
diff --git a/nuxt/pages/create/index.vue b/nuxt/pages/create/index.vue
index 70ae348..4d5b7e6 100644
--- a/nuxt/pages/create/index.vue
+++ b/nuxt/pages/create/index.vue
@@ -3,30 +3,20 @@
     title="MakeMyFlix"
     :show-home="false"
     dark-mode />
-  <div class="page">
-    <template v-if="!showPreview">
-      <span class="title">Genereer jouw eigen Flix in slechts {{ stepsCount }} stappen</span>
-      <component :is="stepComponents[stepComponentIndex]" />
+  <div
+    v-if="step === 1"
+    class="page">
+      <span class="title">Genereer jouw eigen Flix in slechts een paar stappen</span>
+      <OrganismsCreateEndpoints />
       <div class="actions">
         <AtomsButton
-          v-if="showBack"
-          @click="flixBuilderStore.back"
-          class="back-btn"
-          variant="secondary">
-          Vorige
-        </AtomsButton>
-        <AtomsButton
-          v-if="showNext"
           class="next-btn"
-          @click="flixBuilderStore.next">
+          @click="step++">
           Volgende
         </AtomsButton>
       </div>
-    </template>
-    <template v-else>
-      <component :is="stepComponents[stepComponentIndex]" />
-    </template>
   </div>
+  <OrganismsCreateEditor v-else-if="step === 2" />
 </template>
 
 <script setup lang="ts">
@@ -39,40 +29,17 @@ useHead({
   ],
 });
 
-/**
- * Deps
- */
-const flixBuilderStore = useFlixBuilderStore();
-
 /**
  * State
  */
-const { stepComponents, stepsCount } = flixBuilderStore;
-const { step } = storeToRefs(flixBuilderStore);
-
-/**
- * Computed Properties
- */
-const stepComponentIndex = computed(() => {
-  if (step.value >= 1 && step.value <= stepComponents.length) {
-    return step.value - 1;
-  }
-
-  return 0;
-});
-
-const showBack = computed(() => step.value > 1);
-
-const showNext = computed(() => step.value < stepComponents.length);
-
-const showPreview = computed(() => step.value === 4);
+const { step } = storeToRefs(useFlixBuilderStore());
 </script>
 
 <style lang="scss" scoped>
 .page {
   display: flex;
   flex-direction: column;
-  margin: var(--space-20);
+  margin: var(--space-20) 0;
 }
 
 .title {
diff --git a/nuxt/pages/index.vue b/nuxt/pages/index.vue
index 129b002..ddaa304 100644
--- a/nuxt/pages/index.vue
+++ b/nuxt/pages/index.vue
@@ -52,7 +52,7 @@ a {
   text-decoration: none;
   color: white;
   padding: var(--space-2);
-  transition: color 0.3s ease;
+  transition: var(--transition-state);
 
   &:hover {
     color: blue;
diff --git a/nuxt/stores/flix-builder.ts b/nuxt/stores/flix-builder.ts
index 89a2b0b..d1bf3d0 100644
--- a/nuxt/stores/flix-builder.ts
+++ b/nuxt/stores/flix-builder.ts
@@ -1,48 +1,46 @@
-import Endpoints from '~/components/Organisms/Create/Endpoints.vue';
-import Identity from '~/components/Organisms/Create/Identity.vue';
-import Styling from '~/components/Organisms/Create/Styling.vue';
-import Preview from '~/components/Organisms/Create/Preview.vue';
-
-const createDefaultNewFlixDataForDevelopment = () => {
+const createDefaultNewFlixData = () => {
   const devDefaultNewFlixData: FlixData = {
-    endpoint:
-      'https://api.data.netwerkdigitaalerfgoed.nl/datasets/heritageflix/churches-v1/services/churches-v1/sparql',
-    categoryQuery:
-      'PREFIX gn: <http://www.geonames.org/ontology#> PREFIX schema: <https://schema.org/> SELECT ?id ?name (COUNT(?heritageObject) AS ?numberOfHeritageObjects) WHERE { ?heritageObject a schema:CreativeWork ; schema:contentLocation ?contentLocation . ?contentLocation gn:parentADM1 ?id . ?id gn:name ?name . } ORDER BY ?name',
-    itemsQuery:
-      "PREFIX gn: <http://www.geonames.org/ontology#> PREFIX schema: <https://schema.org/> SELECT * WHERE { { SELECT ?heritageObject ?identifier ?description ?dateCreated ?imageURI ?imageLicenseURI ?imageLicenseName ?provinceURI ?provinceName ?publisherURI ?publisherName ?publisherHomepage (GROUP_CONCAT(?creator; SEPARATOR='; ') AS ?creators) (GROUP_CONCAT(?creatorName; SEPARATOR='; ') AS ?creatorNames) (GROUP_CONCAT(?contentLocationURI; SEPARATOR='; ') AS ?contentLocationURIs) (GROUP_CONCAT(?contentLocationName; SEPARATOR='; ') AS ?contentLocationNames) WHERE { BIND(<_CATEGORYID_> AS ?provinceURI) ?heritageObject a schema:CreativeWork ; schema:identifier ?identifier ; schema:description ?description ; schema:dateCreated ?dateCreated ; schema:creator ?creator ; schema:contentLocation ?contentLocationURI ; schema:publisher ?publisher ; schema:image ?image . ?image schema:contentUrl ?imageURI ; schema:license ?imageLicenseURI . ?imageLicenseURI schema:name ?imageLicenseName . ?creator schema:name ?creatorName . ?contentLocationURI gn:name ?contentLocationName ; gn:parentADM1 ?provinceURI . ?provinceURI gn:name ?provinceName . ?publisher schema:name ?publisherName ; schema:mainEntityOfPage ?publisherHomepage . OPTIONAL { ?heritageObject schema:mainEntityOfPage ?publisherURI } } ORDER BY ?contentLocationName } } LIMIT _LIMIT_ OFFSET _OFFSET_",
-    primaryColor: '#000000',
-    secondaryColor: '#00ff00',
-    tertiaryColor: '#ff0000',
-    title: 'Test',
-    description: 'Test',
+    endpoint: '',
+    categoryQuery: '',
+    itemsQuery: '',
+    primaryColor: '#FFFFFF',
+    secondaryColor: '#000000',
+    tertiaryColor: '#FFFFFF',
+    title: 'Nieuwe Flix',
+    description: '',
     fontFamily: 'Poppins',
   };
 
   return devDefaultNewFlixData;
 };
 
+const determineInitialPreviewMediaQuery = (): PreviewMediaQuery => {
+  const availableWidth = window.innerWidth - 380 - 48; // screen width, minus sidebar width, minus preview padding
+
+  if (availableWidth <= 500) {
+    return 'cellphone';
+  }
+
+  if (availableWidth <= 1180) {
+    return 'tablet';
+  }
+
+  return 'laptop';
+};
+
 export const useFlixBuilderStore = defineStore('flix-builder', () => {
   /**
    * Deps
    */
   const config = useRuntimeConfig();
+  const flixStore = useFlixStore();
 
   /**
    * State
    */
-  const newFlix = ref<FlixData>(createDefaultNewFlixDataForDevelopment());
-  const stepComponents: any[] = markRaw([Endpoints, Identity, Styling, Preview]);
-  const stepsCount = stepComponents.length;
-  const step = ref<number>(
-    (() => {
-      const intendedStep = +(useRoute().query.step?.toString() ?? '1');
-      if (!Number.isSafeInteger(intendedStep) || intendedStep < 1 || intendedStep > stepComponents.length) {
-        return 1;
-      }
-      return intendedStep;
-    })(),
-  );
+  const newFlix = ref<FlixData>(createDefaultNewFlixData());
+  const previewView = ref<PreviewMediaQuery>(determineInitialPreviewMediaQuery());
+  const step = ref<number>(1);
 
   /**
    * Computed properties
@@ -51,25 +49,26 @@ export const useFlixBuilderStore = defineStore('flix-builder', () => {
     if (!newFlix.value.title) {
       return undefined;
     }
-    return sluggify(newFlix.value.title);
+    return useSlugify(newFlix.value.title);
+  });
+
+  const previewMediaQueryClassName = computed(() => `preview-${previewView.value}`);
+
+  const newFlixTheme = computed<Theme>(() => {
+    return {
+      fontFamily: newFlix.value.fontFamily ?? 'Poppins',
+      primaryColor: newFlix.value.primaryColor ?? '',
+      secondaryColor: newFlix.value.secondaryColor ?? '',
+      tertiaryColor: newFlix.value.tertiaryColor ?? '',
+    };
   });
 
   /**
    * Methods
    */
-  const next = () => {
-    if (step.value < stepComponents.length) {
-      step.value++;
-    }
-  };
-
-  const back = () => {
-    if (step.value > 1) {
-      step.value--;
-    }
-  };
-
-  const uploadImage = async (file: File | UploadedImage | null | undefined): Promise<UploadedImage | null> => {
+  const uploadImage = async (
+    file: File | UploadedImage | null | undefined,
+  ): Promise<UploadedImage | null> => {
     if (!(file instanceof File)) {
       return file ?? null;
     }
@@ -123,13 +122,35 @@ export const useFlixBuilderStore = defineStore('flix-builder', () => {
     }
   };
 
-  const sluggify = (text: string): string => {
-    return text
-      .toLowerCase() // Convert to lowercase
-      .trim() // Trim whitespace from both ends
-      .replace(/[\s\W-]+/g, '-') // Replace spaces and non-word characters with hyphens
-      .replace(/^-+|-+$/g, ''); // Remove any leading or trailing hyphens
-    // Thanks ChatGPT
+  const mergeExistingFlix = async (uri: string) => {
+    try {
+      const current = await flixStore.fetchFlix(uri);
+
+      if (current) {
+        newFlix.value = {
+          banner: current.branding?.banner,
+          categoryQuery: newFlix.value.categoryQuery,
+          description: current.branding?.intro.description,
+          endpoint: newFlix.value.endpoint,
+          fontFamily: current.theme?.fontFamily ?? 'Poppins',
+          id: current.id,
+          itemsQuery: newFlix.value.itemsQuery,
+          logo: current.branding?.logo,
+          primaryColor: current.theme?.primaryColor,
+          secondaryColor: current.theme?.secondaryColor,
+          slug: newFlixSlug.value,
+          tertiaryColor: current.theme?.tertiaryColor,
+          title: current.branding?.intro.title,
+          uri: uri,
+        };
+
+        return true;
+      }
+    } catch (e) {
+      console.error(e);
+    }
+
+    return false;
   };
 
   const saveDraftFlix = async () => {
@@ -151,10 +172,10 @@ export const useFlixBuilderStore = defineStore('flix-builder', () => {
       return null;
     }
 
-    const [logoData, bannerData] = await Promise.all([uploadImage(logo), uploadImage(banner)]);
-
     const uri = `${window.location.origin}/${newFlixSlug.value}`;
 
+    const [logoData, bannerData] = await Promise.all([uploadImage(logo), uploadImage(banner)]);
+
     const data = {
       data: {
         publishedAt: null,
@@ -189,18 +210,22 @@ export const useFlixBuilderStore = defineStore('flix-builder', () => {
 
     try {
       const response = await saveFlix(data, newFlix.value.id);
-      newFlix.value.id = response.id;
+
+      if (response) {
+        newFlix.value.id = response.id;
+      }
+
       newFlix.value.uri = uri;
       newFlix.value.logo = logoData;
       newFlix.value.banner = bannerData;
       return response;
     } catch (e) {
       // cleanup newly uploaded images to prevent reuploads of the same images upon errors
-      if (logoData && logo !== logoData) {
+      if (logoData && logo !== logoData && typeof logoData !== 'string') {
         deleteImage(logoData);
       }
 
-      if (bannerData && banner !== bannerData) {
+      if (bannerData && banner !== bannerData && typeof bannerData !== 'string') {
         deleteImage(bannerData);
       }
 
@@ -233,18 +258,18 @@ export const useFlixBuilderStore = defineStore('flix-builder', () => {
   };
 
   const resetStore = () => {
-    newFlix.value = {};
+    newFlix.value = createDefaultNewFlixData();
     step.value = 1;
   };
 
   return {
     newFlix,
+    newFlixTheme,
+    previewView,
+    previewMediaQueryClassName,
     newFlixSlug,
-    stepComponents,
-    stepsCount,
     step,
-    next,
-    back,
+    mergeExistingFlix,
     saveDraftFlix,
     publishFlix,
     resetStore,
diff --git a/nuxt/stores/flix.ts b/nuxt/stores/flix.ts
index d0d95a1..b986fdf 100644
--- a/nuxt/stores/flix.ts
+++ b/nuxt/stores/flix.ts
@@ -68,12 +68,32 @@ export const useFlixStore = defineStore('flix', () => {
     return uri.replace(window.location.origin, '').split('/').filter(Boolean)[0];
   };
 
+  const fetchFlix = async (flixUri: string) => {
+    try {
+      const flix = await $fetch<Flix | null>(`${config.app.backendUrl}/setup`, {
+        headers: {
+          Authorization: `Bearer ${config.app.token}`,
+          'X-flix': flixUri,
+        },
+      });
+
+      if (!flix) {
+        return null;
+      }
+
+      return flix;
+    } catch (e) {
+      console.error(e);
+      return null;
+    }
+  };
+
   const setupFlix = async (flix: string, preview = false) => {
-    // Construct the flexUri
-    const flexUri = `${window.location.origin}/${flix}`;
+    // Construct the flixUri
+    const flixUri = `${window.location.origin}/${flix}`;
 
-    // Check if the flexUri is the currentFlex, if so do nothing
-    if (currentFlix.value?.uri === flexUri) {
+    // Check if the flixUri is the currentFlix, if so do nothing
+    if (currentFlix.value?.uri === flixUri) {
       return;
     }
 
@@ -81,15 +101,14 @@ export const useFlixStore = defineStore('flix', () => {
     resetData();
 
     // Origin path is not retrievable from the backend so we need to pass it
-    const setup: Flix = await $fetch(`${config.app.backendUrl}/setup`, {
-      headers: {
-        Authorization: `Bearer ${config.app.token}`,
-        'X-flix': flexUri,
-      },
-    });
-    // Add the flexUri for the guard
-    setup.uri = flexUri;
+    const setup = await fetchFlix(flixUri);
+    if (!setup) {
+      return;
+    }
+
+    // Add the flixUri for the guard
     setup.id = flix;
+    setup.uri = flixUri;
 
     // Update the current flix
     currentFlix.value = setup;
@@ -106,6 +125,7 @@ export const useFlixStore = defineStore('flix', () => {
     branding,
     sidenote,
     supportIIIF,
+    fetchFlix,
     setupFlix,
     fetchFlixes,
     generateLabel,
diff --git a/nuxt/stores/theme.ts b/nuxt/stores/theme.ts
index 95a5198..fb62808 100644
--- a/nuxt/stores/theme.ts
+++ b/nuxt/stores/theme.ts
@@ -42,16 +42,30 @@ export const useThemeStore = defineStore('theme', () => {
   };
 
   const setThemeStyling = (preview = false) => {
-    // Check if we have a currentFlix
-    const { currentFlix } = useFlixStore();
-    if (!currentFlix?.theme) {
-      return;
+    let theme: Theme;
+
+    if (!preview) {
+      // Check if we have a currentFlix
+      const { currentFlix } = useFlixStore();
+      if (!currentFlix?.theme) {
+        return;
+      }
+
+      theme = currentFlix.theme;
+    } else {
+      const { newFlix } = useFlixBuilderStore();
+      theme = {
+        primaryColor: newFlix.primaryColor ?? '',
+        secondaryColor: newFlix.secondaryColor ?? '',
+        tertiaryColor: newFlix.tertiaryColor ?? '',
+        fontFamily: newFlix.fontFamily ?? 'Poppins',
+      }
     }
 
     // Create the css variables
-    createCssVariables(currentFlix.theme, preview);
+    createCssVariables(theme, preview);
     createPreloadLink('preload-font');
-    createFontLink('theme-font', currentFlix.theme.fontFamily);
+    createFontLink('theme-font', theme.fontFamily);
   };
 
   const resetData = () => {
diff --git a/nuxt/types/global.d.ts b/nuxt/types/global.d.ts
index 9acf682..1c083ac 100644
--- a/nuxt/types/global.d.ts
+++ b/nuxt/types/global.d.ts
@@ -18,3 +18,5 @@ interface StrapiEntity<T> {
 interface StrapiApiResponse<T> {
   data: T;
 }
+
+type PreviewMediaQuery = 'laptop' | 'tablet' | 'cellphone';
diff --git a/strapi/src/api/flix/content-types/flix/schema.json b/strapi/src/api/flix/content-types/flix/schema.json
index 5ad5713..8f79e9d 100644
--- a/strapi/src/api/flix/content-types/flix/schema.json
+++ b/strapi/src/api/flix/content-types/flix/schema.json
@@ -20,7 +20,8 @@
     },
     "uri": {
       "type": "string",
-      "required": true
+      "required": true,
+      "unique": true
     },
     "data": {
       "type": "component",
diff --git a/strapi/src/api/setup/controllers/setup.js b/strapi/src/api/setup/controllers/setup.js
index 86dbbd2..f39f877 100644
--- a/strapi/src/api/setup/controllers/setup.js
+++ b/strapi/src/api/setup/controllers/setup.js
@@ -7,6 +7,7 @@ module.exports = {
       const flix = ctx.state.flix;
       const setupService = strapi.service('api::setup.setup');
       const data = {
+        id: flix.id,
         fallback: !!flix.fallbackIIIF,
       };
 
diff --git a/strapi/src/api/setup/services/setup.js b/strapi/src/api/setup/services/setup.js
index f431879..6312d2d 100644
--- a/strapi/src/api/setup/services/setup.js
+++ b/strapi/src/api/setup/services/setup.js
@@ -22,10 +22,18 @@ module.exports = {
       delete branding.intro.id;
     }
     if (flix?.branding?.banner) {
-      branding.banner = flix.branding.banner.url;
+      branding.banner = {
+        id: flix.branding.banner.id,
+        name: flix.branding.banner.name,
+        url: flix.branding.banner.url,
+      };
     }
     if (flix?.branding?.logo) {
-      branding.logo = flix.branding.logo.url;
+      branding.logo = {
+        id: flix.branding.logo.id,
+        name: flix.branding.logo.name,
+        url: flix.branding.logo.url,
+      };
     }
     return branding;
   },
diff --git a/strapi/src/components/theming/theming.json b/strapi/src/components/theming/theming.json
index a9e5feb..d0c4146 100644
--- a/strapi/src/components/theming/theming.json
+++ b/strapi/src/components/theming/theming.json
@@ -28,7 +28,8 @@
         "Playfair Display",
         "Inter",
         "Nunito",
-        "PT Serif"
+        "PT Serif",
+        "Times New Roman"
       ]
     },
     "primary": {