diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
index ba4b220..3f44b36 100644
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@@ -4,19 +4,19 @@ on: [push]
 jobs:
   deploy:
     runs-on: ubuntu-22.04
-    needs: test
     container:
       volumes:
         - /var/docker-web:/var/docker-web
     steps:
       - uses: actions/checkout@v4
-
       - name: Deploy with docker-web
         run: |
-          APP_DIR=/var/docker-web/apps/${GITHUB_REPOSITORY##*/}
-          mkdir -p $APP_DIR
+          REPO_NAME="${GITHUB_REPOSITORY##*/}"
+          APP_DIR="/var/docker-web/apps/${REPO_NAME}"
+          bash /var/docker-web/src/cli.sh down "${REPO_NAME}"
+          rm -rf "$APP_DIR"
+          mkdir "$APP_DIR"
           cp -a $(find . -mindepth 1 -maxdepth 1 ! -name '.git' ! -name 'node_modules') "$APP_DIR/"
           export COMPOSE_BAKE=false
-          bash /var/docker-web/src/cli.sh down ${GITHUB_REPOSITORY##*/}
-          docker rmi local/${GITHUB_REPOSITORY##*/}
-          bash /var/docker-web/src/cli.sh up ${GITHUB_REPOSITORY##*/}
+          docker rmi "local/${REPO_NAME}"
+          bash /var/docker-web/src/cli.sh up "${REPO_NAME}"
diff --git a/app/components/compilationBox.vue b/app/components/box.vue
similarity index 78%
rename from app/components/compilationBox.vue
rename to app/components/box.vue
index 342c549..1aca472 100644
--- a/app/components/compilationBox.vue
+++ b/app/components/box.vue
@@ -10,44 +10,33 @@
       <div class="face left" ref="leftFace" />
       <div class="face top" ref="topFace">
         <img class="logo h-full p-1" src="/logo.svg" alt="">
-        <img class="absolute left-0 w-16 pr-4" :src="`/${compilation.id}/title.svg`" alt="">
+        <img class="absolute block h-1/2" style="left:5%;" :src="`/${compilation.id}/title.svg`" alt="">
       </div>
       <div class="face bottom" ref="bottomFace" />
     </div>
   </div>
-
-  <div class="devtool  absolute right-4 text-white bg-black rounded-2xl px-4 py-2">
-    <button @click="poser">poser</button>
-    <button @click="face">face</button>
-    <button @click="dos">dos</button>
-    <div>
-      <label class="block">
-        X: {{ angleX }}
-        <input v-model.number="angleX" type="range" step="1" min="-180" max="180" @input="applyTransform">
-      </label>
-      <label class="block">
-        Y: {{ angleY }}
-        <input v-model.number="angleY" type="range" step="1" min="-180" max="180" @input="applyTransform">
-      </label>
-      <label class="block">
-        Z: {{ angleZ }}
-        <input v-model.number="angleZ" type="range" step="1" min="-180" max="180" @input="applyTransform">
-      </label>
-    </div>
-  </div>
 </template>
 
 <script setup lang="ts">
-import compilations from '~~/server/api/compilations';
-import type { Compilation } from '~~/types/types';
+import type { Compilation, BoxPosition } from '~~/types/types';
 
-const props = defineProps<{ compilation: Compilation }>()
+const props = withDefaults(
+  defineProps<{
+    compilation: Compilation
+    position?: BoxPosition
+    size?: number
+  }>(),
+  {
+    position: () => ({ x: 0, y: 0, z: 0 }),
+    size: 6,
+  }
+)
 
 // States
-const position = ref('')
-const angleX = ref(76)
-const angleY = ref(0)
-const angleZ = ref(150)
+
+const angleX = ref(props.position.x)
+const angleY = ref(props.position.y)
+const angleZ = ref(props.position.z)
 
 const frontFace = ref()
 const backFace = ref()
@@ -56,18 +45,6 @@ const leftFace = ref()
 const topFace = ref()
 const bottomFace = ref()
 
-function poser() {
-  rotateBox(76, 0, 150)
-}
-
-function face() {
-  rotateBox(-20, 20, 0)
-}
-
-function dos() {
-  rotateBox(-20, 200, 0)
-}
-
 const box = ref()
 const scene = ref()
 
@@ -98,23 +75,33 @@ function applyTransform() {
   box.value.style.transform = `rotateX(${angleX.value}deg) rotateY(${angleY.value}deg) rotateZ(${angleZ.value}deg)`
 }
 
+function applySize() {
+  updateCssVar('--height', `${props.size * (100 / 3)}px`, scene.value)
+  updateCssVar('--width', `${props.size * 50}px`, scene.value)
+  updateCssVar('--depth', `${props.size * 10}px`, scene.value)
+}
+function applyColor() {
+  frontFace.value.style.setProperty('background', `${props.compilation.color2}`)
+  backFace.value.style.setProperty('background', `linear-gradient(to top, ${props.compilation.color1}, ${props.compilation.color2})`)
+  rightFace.value.style.setProperty('background', `linear-gradient(to top, ${props.compilation.color1}, ${props.compilation.color2})`)
+  leftFace.value.style.setProperty('background', `linear-gradient(to top, ${props.compilation.color1}, ${props.compilation.color2})`)
+  topFace.value.style.setProperty('background', `linear-gradient(to top, ${props.compilation.color2}, ${props.compilation.color2})`)
+  bottomFace.value.style.setProperty('background', `${props.compilation.color1}`)
+}
 
 /*
   Fonction utilitaire : place la box directement à une rotation donnée
-  (utilisée par le bouton reset ou autre logique externe)
 */
-function rotateBox(x, y, z) {
-  angleX.value = x
-  angleY.value = y
-  angleZ.value = z
+function applyRotation() {
+  angleX.value = props.position.x
+  angleY.value = props.position.y
+  angleZ.value = props.position.z
   applyTransform()
 
   box.value.style.setProperty('transition', 'transform 800ms ease-in-out')
   setTimeout(() => {
     box.value.style.setProperty('transition', 'transform 120ms linear')
-    console.log('dopne timeout')
   }, 120)
-
 }
 
 /*
@@ -151,19 +138,8 @@ function tickInertia() {
   Mise en place des listeners une fois le composant monté
 */
 onMounted(() => {
-  // setup CSS vars pour la scène
-  updateCssVar('--height', '200px', scene.value)
-  updateCssVar('--width', '300px', scene.value)
-  updateCssVar('--depth', '60px', scene.value)
-
-  frontFace.value.style.setProperty('background', `${props.compilation.colorTo}`)
-  backFace.value.style.setProperty('background', `linear-gradient(to top, ${props.compilation.colorFrom}, ${props.compilation.colorTo})`)
-  rightFace.value.style.setProperty('background', `linear-gradient(to top, ${props.compilation.colorFrom}, ${props.compilation.colorTo})`)
-  leftFace.value.style.setProperty('background', `linear-gradient(to top, ${props.compilation.colorFrom}, ${props.compilation.colorTo})`)
-  topFace.value.style.setProperty('background', `linear-gradient(to top, ${props.compilation.colorTo}, ${props.compilation.colorTo})`)
-  bottomFace.value.style.setProperty('background', `${props.compilation.colorFrom}`)
-
-
+  applySize()
+  applyColor()
   applyTransform()
 
   // pointerdown = début du drag
@@ -221,6 +197,18 @@ onMounted(() => {
     cancelAnimationFrame(raf)
   })
 })
+
+watch(() => props.position, () => {
+  applyRotation()
+}, { deep: true })
+
+watch(() => props.compilation, () => {
+  applyColor()
+}, { deep: true })
+
+watch(() => props.size, () => {
+  applySize()
+})
 </script>
 
 
@@ -254,6 +242,7 @@ body {
   position: relative;
   transform-style: preserve-3d;
   transition: transform 120ms linear;
+  transition: height 120ms linear;
   /* légère smoothing quand on lâche */
   margin: auto;
   user-select: none;
diff --git a/app/components/boxItem.vue b/app/components/boxItem.vue
deleted file mode 100644
index ad0e27d..0000000
--- a/app/components/boxItem.vue
+++ /dev/null
@@ -1,263 +0,0 @@
-<template>
-
-  <div class="scene" id="scene">
-    <div class="box" id="box">
-      <div class="face front">
-        <img class="cover" src="https://evilspins.com/ES01A/object.png" alt="">
-      </div>
-      <div class="face back"></div>
-      <div class="face right"></div>
-      <div class="face left"></div>
-      <div class="face top"></div>
-      <div class="face bottom"></div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-/*
-  Rotation 3D au touch / clic maintenu
-  - Utilise Pointer Events (fonctionne pour souris, stylet, touch)
-  - rotateX et rotateY mis à jour pendant le drag
-  - inertie légère à la release (configurable)
-*/
-
-(function () {
-  const box = document.getElementById('box');
-  const scene = document.getElementById('scene');
-
-  // état
-  let angleX = -20; // angle initial (pour montrer la 3D)
-  let angleY = 20;
-  let dragging = false;
-  let lastPointer = { x: 0, y: 0, time: 0 };
-  let velocity = { x: 0, y: 0 };
-  let raf = null;
-
-  // paramètres
-  const sensitivity = 0.3;    // combien de degrés par px
-  const friction = 0.95;      // inertie (0..1) ; 1 = pas de friction
-  const minVelocity = 0.02;   // seuil pour arrêter l'inertie
-  const enableInertia = true; // tu peux mettre false pour pas d'inertie
-
-  // applique la transformation (raf-friendly)
-  function applyTransform() {
-    box.style.transform = `rotateX(${angleX}deg) rotateY(${angleY}deg)`;
-  }
-
-  applyTransform();
-
-  // boucle d'inertie
-  function tickInertia() {
-    if (!enableInertia) return;
-    // appliquer friction
-    velocity.x *= friction;
-    velocity.y *= friction;
-
-    angleX += velocity.y;
-    angleY += velocity.x;
-
-    // clamp angleX pour éviter flip complet (optionnel)
-    angleX = Math.max(-80, Math.min(80, angleX));
-
-    applyTransform();
-
-    if (Math.abs(velocity.x) > minVelocity || Math.abs(velocity.y) > minVelocity) {
-      raf = requestAnimationFrame(tickInertia);
-    } else {
-      raf = null;
-    }
-  }
-
-  // pointerdown
-  scene.addEventListener('pointerdown', (ev) => {
-    ev.preventDefault();
-    dragging = true;
-    scene.setPointerCapture(ev.pointerId);
-    lastPointer.x = ev.clientX;
-    lastPointer.y = ev.clientY;
-    lastPointer.time = performance.now();
-    velocity.x = 0;
-    velocity.y = 0;
-    if (raf) { cancelAnimationFrame(raf); raf = null; } // stop inertie en commençant un nouveau drag
-  });
-
-  // pointermove
-  scene.addEventListener('pointermove', (ev) => {
-    if (!dragging) return;
-    ev.preventDefault();
-    const now = performance.now();
-    const dx = ev.clientX - lastPointer.x;
-    const dy = ev.clientY - lastPointer.y;
-
-    // mise à jour angles (inverser si tu veux sens différent)
-    angleY += dx * sensitivity;
-    angleX -= dy * sensitivity;
-
-    // clamp angleX
-    angleX = Math.max(-80, Math.min(80, angleX));
-
-    // calculer vitesse (px per frame approximative)
-    const dt = Math.max(1, now - lastPointer.time); // ms
-    velocity.x = (dx / dt) * 16 * sensitivity; // normalisé approximativement à 60fps
-    velocity.y = (-dy / dt) * 16 * sensitivity;
-
-    lastPointer.x = ev.clientX;
-    lastPointer.y = ev.clientY;
-    lastPointer.time = now;
-
-    applyTransform();
-  });
-
-  // pointerup / cancel
-  const endDrag = (ev) => {
-    if (!dragging) return;
-    dragging = false;
-    try { scene.releasePointerCapture(ev.pointerId); } catch (e) { }
-    // si inertie activée, lancer la boucle
-    if (enableInertia && (Math.abs(velocity.x) > minVelocity || Math.abs(velocity.y) > minVelocity)) {
-      if (!raf) raf = requestAnimationFrame(tickInertia);
-    }
-  };
-
-  scene.addEventListener('pointerup', endDrag);
-  scene.addEventListener('pointercancel', endDrag);
-  scene.addEventListener('pointerleave', endDrag); // utile sur desktop si tu sors du container
-
-  // accessibility : permettre rotation via clavier (optionnel)
-  scene.tabIndex = 0;
-  scene.addEventListener('keydown', (e) => {
-    const step = 8;
-    if (e.key === 'ArrowLeft') { angleY -= step; applyTransform(); }
-    if (e.key === 'ArrowRight') { angleY += step; applyTransform(); }
-    if (e.key === 'ArrowUp') { angleX -= step; applyTransform(); }
-    if (e.key === 'ArrowDown') { angleX += step; applyTransform(); }
-  });
-
-})();
-</script>
-
-<style>
-/*  H      W   D
-    k7  5   :  8 : 1
-    CD  12  : 14 : 1
-    VHS 4.5 :  8 : 1
-    DVD 14  : 10 : 1
-    */
-
-:root {
-  --size: 100px;
-  --height: 150px;
-  --width: 150px;
-  --depth: 10px;
-  --bg: #0f172a;
-}
-
-html,
-body {
-  height: 100%;
-  margin: 0;
-  background: var(--bg);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-family: system-ui, Segoe UI, Roboto, Helvetica, Arial;
-  -webkit-font-smoothing: antialiased;
-}
-
-/* scène avec perspective */
-.scene {
-  width: calc(var(--height) * 1.2);
-  height: calc(var(--width) * 1.2);
-  perspective: 1000px;
-  touch-action: none;
-  /* essentiel pour empêcher le scroll pendant le drag */
-}
-
-/* l'objet 3D (box simple) */
-.box {
-  width: var(--width);
-  height: var(--height);
-  position: relative;
-  transform-style: preserve-3d;
-  transition: transform 120ms linear;
-  /* légère smoothing quand on lâche */
-  margin: auto;
-  user-select: none;
-  cursor: grab;
-}
-
-.box:active {
-  cursor: grabbing;
-}
-
-/* faces du box */
-.face {
-  position: absolute;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 20px;
-  color: white;
-  font-weight: 600;
-  backface-visibility: hidden;
-  border: 2px solid rgba(255, 255, 255, 0.06);
-  box-sizing: border-box;
-  transform-origin: top right;
-}
-
-.front,
-.back {
-  width: 100%;
-  height: 100%;
-}
-
-.face.top,
-.face.bottom {
-  width: var(--width);
-  height: var(--depth);
-}
-
-.face.left,
-.face.right {
-  width: var(--depth);
-  height: var(--height);
-}
-
-.face.front {
-  background: linear-gradient(180deg, #2563eb, #7dd3fc);
-  transform: translateX(0px) translateY(0px) translateZ(0px);
-}
-
-.face.back {
-  background: linear-gradient(180deg, #7c3aed, #a78bfa);
-  transform: rotateY(180deg) translateX(var(--width)) translateY(0px) translateZ(var(--depth));
-}
-
-.face.right {
-  background: linear-gradient(180deg, #10b981, #6ee7b7);
-  transform: rotateY(90deg) translateX(0px) translateY(0px) translateZ(var(--width));
-  transform-origin: top left;
-}
-
-.face.left {
-  background: linear-gradient(180deg, #ef4444, #fca5a5);
-  transform: rotateY(-90deg) translateX(0) translateY(0px) translateZ(var(--depth));
-}
-
-.face.top {
-  background: linear-gradient(180deg, #f59e0b, #fcd34d);
-  transform: rotateX(90deg) translateX(0px) translateY(calc(var(--depth) * -1)) translateZ(0px);
-}
-
-.face.bottom {
-  background: linear-gradient(180deg, #06b6d4, #67e8f9);
-  transform: rotateX(-90deg) translateX(0) translateY(0px) translateZ(calc(var(--height)));
-}
-
-.cover {
-  height: 100%;
-  width: 100%;
-  object-fit: cover;
-}
-</style>
\ No newline at end of file
diff --git a/app/pages/design.vue b/app/pages/design.vue
index 65aad4c..2214098 100644
--- a/app/pages/design.vue
+++ b/app/pages/design.vue
@@ -4,7 +4,7 @@
       <div class="flex flex-col-reverse bg-gradient-to-r from-primary to-primary-dark">
         <div class="mt-8 flex flex-wrap justify-center"
           v-for="compilation in store.getAllCompilations.slice().reverse()">
-          <compilationBox :compilation="compilation" template="full" />
+          <box :compilation="compilation" template="full" />
         </div>
       </div>
     </div>
diff --git a/app/pages/index.vue b/app/pages/index.vue
deleted file mode 100644
index 750df57..0000000
--- a/app/pages/index.vue
+++ /dev/null
@@ -1,100 +0,0 @@
-<template>
-  <div>
-    <div class="background fixed w-full h-full">
-      <video class="animation screen" loop autoplay muted ref="animation">
-        <source src="https://files.erudi.fr/evilspins/sloughi-run-loop-big.webm" type="video/webm">
-        <source src="https://files.erudi.fr/evilspins/sloughi-run-loop-small.webm" type="video/webm"
-          media="all and (max-width: 640px)">
-      </video>
-    </div>
-    <section class="splash-screen flex items-center flex-col">
-      <figure class="ui">
-        <img class="logo" src="/logo.svg">
-        <h1 class="text-white pt-6 text-lg md:text-xl lg:text-2xl text-center font-bold tracking-widest text-shadow">
-          Compilations
-          indépendantes ...
-        </h1>
-      </figure>
-    </section>
-  </div>
-</template>
-
-<style scoped>
-body {
-  margin: 0;
-  overflow-x: hidden;
-}
-
-.logo,
-.button,
-.shadow,
-.animation,
-.mix {
-  transition: .7s opacity;
-}
-
-.screen {
-  position: absolute;
-  height: 100vh;
-  min-width: 100%;
-  max-width: 100%;
-}
-
-.splash-screen {
-  position: relative;
-  height: 100vh;
-  box-shadow: inset black 0px 1px 800px 200px;
-}
-
-.animation {
-  z-index: 1;
-  object-fit: cover;
-  opacity: .8;
-  /* opacity: 0; */
-}
-
-.mix {
-  z-index: 4;
-  position: fixed;
-}
-
-.shadow {
-  z-index: 3;
-  box-shadow: rgb(0, 0, 0) 0px 0px 170px 70px inset;
-  opacity: .9;
-}
-
-.ui {
-  z-index: 4;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  max-width: 80%;
-  transform: translate(-50%, -50%);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.logo {
-  filter: drop-shadow(8px 8px 0 rgb(0 0 0 / 0.8));
-}
-
-.mixPlayer {
-  background: black;
-  max-height: 70vh;
-}
-
-.hide {
-  opacity: 0;
-  z-index: 0;
-}
-
-.show {
-  opacity: 1;
-}
-
-.text-shadow {
-  text-shadow: 3px 2px 8px black;
-}
-</style>
\ No newline at end of file
diff --git a/app/pages/studio.vue b/app/pages/studio.vue
new file mode 100644
index 0000000..622e1df
--- /dev/null
+++ b/app/pages/studio.vue
@@ -0,0 +1,65 @@
+<template>
+  <div class="flex flex-wrap justify-center">
+    <div class="bg-page-dark-bg text-white">
+      <div class="flex flex-col-reverse bg-gradient-to-r from-primary to-primary-dark">
+        <div class="mt-8 flex flex-wrap justify-center">
+          <box :compilation="compilation" :position="currentPosition" :size="size" />
+          <div class="devtool  absolute right-4 text-white bg-black rounded-2xl px-4 py-2">
+            <button @click="currentPosition = poser">poser</button>
+            <button @click="currentPosition = face">face</button>
+            <button @click="currentPosition = dos">dos</button>
+            <div class="w-full block">
+              <input class="w-1/2" type="color" name="color1" id="color1" v-model="compilation.color1">
+              <input class="w-1/2" type="color" name="color1" id="color1" v-model="compilation.color2">
+              <div class="block w-full h-32" :style="{
+                background: `linear-gradient(to top, ${compilation.color1}, ${compilation.color2})`
+              }">
+              </div>
+              <label class="block">
+                size: {{ size }}
+                <input v-model.number="size" type="range" step="1" min="1" max="14">
+              </label>
+            </div>
+            <div>
+              <label class="block">
+                X: {{ currentPosition.x }}
+                <input v-model.number="currentPosition.x" type="range" step="1" min="-180" max="180">
+              </label>
+              <label class="block">
+                Y: {{ currentPosition.y }}
+                <input v-model.number="currentPosition.y" type="range" step="1" min="-180" max="180">
+              </label>
+              <label class="block">
+                Z: {{ currentPosition.z }}
+                <input v-model.number="currentPosition.z" type="range" step="1" min="-180" max="180">
+              </label>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { BoxPosition } from '~~/types/types'
+
+const compilation = ref({
+  id: 'ES00A',
+  name: 'zero',
+  duration: 2794,
+  description: 'Zero is for manifesto',
+  color1: '#ffffff',
+  color2: '#48959d',
+})
+
+const poser = { x: 76, y: 0, z: 150 }
+const face = { x: -20, y: 20, z: 0 }
+const dos = { x: -20, y: 200, z: 0 }
+
+const size = ref(6)
+
+const currentPosition: Ref<BoxPosition> = ref(poser)
+
+//from-slate-800 to-zinc-900 
+</script>
diff --git a/public/logo.svg b/public/logo.svg
index b8fc967..223bd83 100644
--- a/public/logo.svg
+++ b/public/logo.svg
@@ -1,5 +1,5 @@
-<svg viewBox="-10 0 150 60" xmlns="http://www.w3.org/2000/svg">
+<svg viewBox="-10 0 150 60" xmlns="http://www.w3.org/2000/svg" style="color: #fdec50ff">
    <path
       d="M.8 33.3c.6 0 .7.7 1 1l.3-.2.2.2h1l.5.1h.9l.3-.3h.3l.5-.3c.6-.3-.4.6.6-.3l.2-.3 1-1q.2 0 .4-.4 0-.4.2-.7l.5-1.4.2-.4h.3v-1.6l-.1-2-.2-1c0-.2-.8-1-1.1-1.1h-.5l-.5-.1c-.2 0-2.3 0-2.7.3q-.2 0-.4.3l-.7.2-.2.3h-.2l-.8.8c-1.8 1.9 1-1.4-1.7 2l-.6.8h-.3v.2c-1.9 3 .5-1.5-1 1.8l-.2.3-1 1.5.2.3-.6 1.5q-.4 1.4-.2 2.8 0 .6.4 1.5l.6 1.3v.5l.4.3v.1l.6.4c.9 1.1.1 1 1.3 1.8l.6.3.5.4 2 .3 1.2-.1.8.2 3.2-.4q.2 0 .4-.3l1-.4.2-.2h.2V42h.2q0-.3.2-.5h.2c.6-.5-1 .3.7-.7h.3l.1-.2h.1c.4-.7-.9.7.2-.7l.7-.6h-.2l-1 .1-.4.3-1.7.2-.6.3c-.4.1-1.6 0-2 .2l-.2.3h-.6q-.4.3-1 .4l-.7-.2-1.8.2-.5-.2h-.4c-.2 0-1.1-.8-1.3-1l-.8-.7H-1v-.1q-.2-.5-.2-1.1l.4-1 .2-.3.2-.6H0l1-1.5L2 33c.3-.4.8-1.3 1.3-1.3m16-5.3-.8 1.9v.9c-.7 1.7-.4-.5-.7 1v.7l-.1.2c-.3.8 0 .6-.4 1.3l-.3.2v.2l-.6 1.2-.5.6-.1.2h-.3v.3c-.2.4-.3-1.6-.3-1.7-.2-1.1 0 .3-.4-1.2l-.2-2.5-.1-.6-.3-.5-.1-.9v-1h-.3q0-.3-.2-.3h-.3l-.2.3h-.4v.2l-.2.2v.9l-.1.9v1h-.1l.2 1.5-.1 1.4q0 1.2.4 2.4l.1 1.1.4 1c.7 2.9-.7-1.5.4 1.4v1l.4.8.1.8.3.1v.2l.3.5.6.4q0 .3.3.5s.7-.1.8-.3l1-1.5.6-.9v-.1l.2-.3c1-1.3.7-1.1 1.5-2.7l.6-1 .2-.3v-.4c.1-.6.2 0 .1-.5v-.4l.2-.3v-1.8c.9-3 .3-.7.7-3l.1-.8v-2h-.5v-.4l-.2-.2v-.5q-.3-.5-1-1l-.7.5h-.5v.2l-.2.5.3 2c.4 1 0-1 .2.6m5.5-1.5.4 3-.2.6v.9l-.3.7v1.2c-.2 1.4-.1 0-.4.8v.2l-.2.2q0 .9-.3 1.8l-.2.2.2 1.6q0 .6.3 1c.5.9.3.1.4.7 0 .7 0 0 .1.4v.2c.7.5.4 0 1 .1s.1.4.6.2l.6-.3h.8l.2-.3h.2v-.5l.6-1 .2-.8q.7-1.4 1.2-2.9l-.2-1.3q0-.2-.3-.5v-1H29v-.3l-.3-.7q0-.2-.3-.5v-.3H28c-.7-1.2.7.2-.4-1-1.1-.9 0 0-.8-.9l-.3-.2V28h-.2v-.2l-.2-.2v-.2c-.4 0-.2.4-.5-.2v-.1h-.2V27l-.3-.2m-.3-3.5c-1.2-1.7-1-.9-1-2.2l-.2-.7V20l.2-.3q1.1-1.5 3-1.5.8 0 1.3.4c1.6.4 1 0 1.8.8l.3.2v.3l.1.6c0 .2-.5 1-1 1.3l-1 .3c-1.8.4-.8 0-2.5 0l-2 .2m8.8 3.5c3.1-1.7 1.5-.7 5-3l1.8-1.1c5-3.9 0 0 2-1.9l.4-.3 1-1.4.1-.3v-.4h.2c.2-.4-.9-1.7-1.2-1.9l-1.5-.8-3 .3-.7.3-1 .1-.5.3-.4.1c-1.1.4 0 .1-.7.6H34l-.2.2h-.2v.2q0 .5-.2.7l-.2.3v.5l.2 1-.2 1 .4.8v2.4l.1 1.3-.2.4.2 1.1-.3 2.8.2 1.8.5 3.9.8 7.6.3 2.2c0 .1-.1.7.1.5.6-.3.6-1 .9-1.5q0-.4.3-.8v-.2c.4-1.5.4 1.5.3-2.3l-.2-1.2.2-.9v-.8l.1-.5-.5-1.8v-.4l-.2-.2V34c-1.3-3 .2 1.1-.5-1.5l-.4-.8v-.4l-.3-.6-.2-1.6q0-1.9-.4-3.4l-.2-1.8-.2-.7-.2-1.7-.1-1v-.1h-.3m31.1-16-3.3 1.7-.6.3v.3h-.4V7L58 8.4l-.6.5H57v.3h-.3l-.8 1-1.6 1c-.3.3-1 1.4-1.4 1.7l-.3-.2v.4l-1.2 1c-.4.4-1.8 2-2.1 2.7l-.1.3-.7.6-.4 1.6-.9 2.2q0 .5-.3 1l-.2 1 .2.4-.2.5.6.7.2.5a10 10 0 0 0 3.7 1.7l.9-.2.8.2h1.4l1.8 1.9 1.1.8c1 0 .7 1.1 1.1 1.7.3.2.5-.2.6.4l-.2.3q0 .9.3 1.8l.2.5v.3l-1 3-1.6 2-.2.7-.2.4-.2-.1-.1.3-1.3 1.6-.7.7-.2.3-.2-.2-.1.3-1.5.7c-3.6 2.8.3.2-1.8 1.9l-1.4.8-1.6 1.1-1 .5-.1.3h-.4q-.3.1-.6.5l-2 1.4-1.2.9-.5.2v.2H41v.1h-.2c-.3.1.1.2.1.2v.3q.1.7.9 1l.1.6.6.2c2 .6 2.7.2 4.7-.4l1.4-.3h.4l.9-.4c5.5-2.7-.2.2 4.7-2.6l1.5-.8v-.3h.4v-.2c3.5-2.5 1 0 5-3.7l.8-1 .5-.3v-.3l.5-.1.5-1.5 1-1.4.6-2v-2.8l-.2-1.9.2-.2c0-.7-.5-1.2-.6-1.9v-1.2l-.3-.5.1-.3-.2-.2-.6-.9c-1.7-2.7 0 0-1.4-1.8l-.3-.5h-.4l.1-.4-.3-.1-.5-.7-1-.7-.7-.6-.2-.5-.6-.2c-1-.5-1.4-1.3-2.2-1.9l-.4-.2v-1l-.5-.9.4-1 .8-2.6.9-1.8.3-.6.4-.2.9-1 2-2.7.8-.9.5-.3.2-.6 1.6-1.6.7-1 .2-.3h.3l.6-2m5.6 16.1q-.5 2.2-.6 4.4l-.3 2v4.5l-.4 2.7c0 .6 0 1.6-.3 2.1l-.2.5-.1.7-.3 1.8v1l-.5.9-.2 2.2v.7l-.4.2v1l-.5.7v1c0 .2-.6 1.3-.5 1.5h.2l.4.5.5.4.2.3q.4.3 1 .3h.2V49l.5-.5 1-1.1v-.3l.3-.9.4-2.8.4-1.8.4-3 .3-2-.2-.1V36a6 6 0 0 1 2.1-1c.9-.4.5 0 1.3-.4l.2-.2h.2v-.2h.2V34l.5-.1 2.7-2.1v-.3l1.2-1.9.7-1.9.2-1c.1-.4.5-.4.4-1.2q-.2-1.5-1-3l-.2-1v-.3l-.2-.3-.2-.5-.4-.3-.5-.5c-.2-.3-.3-1-.5-1l-2.4-.4-.5.5c-1.8.9 1.7-1.3-1.4 1l-1.3.9-.6.3c-.3.4.3.3-.3.3m14.2 1.3c-.7 1.8-.4 4-.9 6l-.3.9-.2 1.3-.4 2.7c0 .4-.3 1.6-.2 1.8l.4.4.4.5c.1.1 1.2.6 1.6.5l.2-.2.7-.2.6-.1h.4V36c1.6-1.2-1 2.5 1.7-1.6.2-.4.9-2 .8-2.4l-.6-1.3-.3-1.3v-.5l-.2-.3v-.3l-.5-1.9-.1-.2V26h-.2v-.2c0-.3-.3-1-.5-1-.3-.2-.2.4-.3-.3v-.3h-.2V24l-.2-.2V23l-.2-.3v-.3h-.4m0-3.8c-.9-2.2.3-4.6 1.7-6.5l.5-.4v-.3c.7-.3 2-.3 2.6 0 .1 0 1.2.3 1.4.6q1.2 1.6.7 3.8v.5l-.4.4-.2.8v.1l-1.4 1.1H93l-.2.2h-.5l-.5.1q-.6 0-.9-.3h-.7c-1.8-.6 0-.3-1.2-.5m6.9 6.2-.3 2.3.2 1-.2 1.5-.1 2.5c0 1-.4 2-.4 3.2l.1.9-.2 1.6c-.5 4.5-.2.4 0 2.8v.4c.3 1.2 2.3 1.1 3.2 1l.6-.5c.3 0 .3.3.4-.1l.4-1.2.7-2c.2-.4.6-4 .7-4.5l-.1-1.2v-.7l-.2-.3.1-1 .3-.2.3-.9.3-.3v-.2h.2l.6.1s1.1 0 1.3.2l.1.2.7 1 .6 1 .4.8v.3h.1v.3l.1.9.3 2v1.3l.3.5-.1.7q0 1 .5 2.2l.2 1.5.2 1v.3h.1l1.2.4c.2 0 1.8.4 2.2.3v-.2h.2v-.1l.4-1.5q.6-1.5.7-3.4c0-.9-.2-.9-.3-1.7-.3-2.2.2-.4-.6-2.8l-.6-1.6V32l-.2-.3-.2-.9c-.7-1.8-.1.1-1-1.3l.1-.2h-.2l-.1-.2-1-1-.4-.5-.5-.3h-.2v-.1h-.3q0-.3-.2-.4h-.5l-.9-.6-.9-.1-.3.1c-.2.2-1.4.6-1.8.3l-.2-.3-.4-.2-.6-1.1q-.3 0-.4-.3t-.2-.5l-.3-.3v-.2l-.8-1-.7-.7-.9-.6-.2-.3h-.5v-.2h-.2v-.1.1l-.6.2-.4.6-.6.3v.4l-.1 1.1h.2v.3l.4.5v.2zm24.5 3.3-.6.7-.9.7v.3l-.2.1v1c0 .5.7 1.9.9 2.2l.6.9v.2h.1l.7.3h.5l.3.4h.6l2.2.4h.6l.5.3.7.3h.2v.3c.8 1.5 0-.7.6 1.3l.3 1v.9l-.1.9v.3h-.3v.3l-1.3 2v.5l-.6.5c-1.3 1.4 1.8-1.5-1.5 1.5l-.6.4v.3l-.2.1v.3l-.2.2-.3.5-2 1.4h.5l.8-.5 1-.1 2-.8h.4l.1-.1c1.5-1 0 .2 1.9-1.2l1.4-1.1v-.2h.1v-.3l1.3-1.5c3.7-4.2-.2.3 1.5-2l.3-.3v-.2c.3-.7.2 0 .2-.6l.2-1 .5-1.7V36l-.2-.1v-.3l-.5-1.6-.2-.2v-.2h-.2l-.2-.3-.6-.6-.8-.6-.3-.5h-.3q-.8-.6-1.8-1h-.8c-1.5-.6.2-.1-1.8-.8h-.5q-.5-.6-.7-1.4.2-1 .5-1.6c.8-3-.8 1.5.4-1.5V25h.2l.6-1.1 1-1.4.3-.7.3-.2h-.2l-.4.5-.6 1-.6.4v.2l-.2.2-1.7 1.3-.7.4-.3.2v.2h-.3c-.5.4 0 0-.4.2l-1.8.7-1 .6h-.3c-.4.3.3.3-.3.2"
-      fill="#fdec50" />
+      fill="currentColor" />
 </svg>
\ No newline at end of file
diff --git a/server/api/compilations.ts b/server/api/compilations.ts
index d021503..59fb3ec 100644
--- a/server/api/compilations.ts
+++ b/server/api/compilations.ts
@@ -6,33 +6,37 @@ export default eventHandler(() => {
       id: 'ES00A',
       name: 'zero',
       duration: 2794,
-      description: 'Zero is for manifesto ... ;)',
-      colorFrom: '#ffffff',
-      colorTo: '#48959d',
+      description: 'Zero is for manifesto',
+      color1: '#ffffff',
+      color2: '#48959d',
+      color3: '#00ff00',
     },
     {
       id: 'ES00B',
       name: 'zero b-side',
       duration: 2470,
       description: 'Even Zero has a b-side',
-      colorFrom: '#0d01b9',
-      colorTo: '#3b7589',
+      color1: '#0d01b9',
+      color2: '#3b7589',
+      color3: '#00ff00',
     },
     {
       id: 'ES01A',
       name: 'first',
       duration: 3487,
       description: '...',
-      colorFrom: '#c7b3aa',
-      colorTo: '#000100',
+      color1: '#c7b3aa',
+      color2: '#000100',
+      color3: '#00ff00',
     },
     {
       id: 'ES01B',
       name: 'first b-side',
       duration: 3773,
       description: '...',
-      colorFrom: '#f7dd01',
-      colorTo: '#010103',
+      color1: '#f7dd01',
+      color2: '#010103',
+      color3: '#00ff00',
     }
   ]
 })
diff --git a/types/types.ts b/types/types.ts
index 0c966e0..e3e0a2b 100644
--- a/types/types.ts
+++ b/types/types.ts
@@ -5,8 +5,9 @@ export interface Compilation {
   duration: number
   tracks?: Track[]
   description: string
-  colorFrom: string
-  colorTo: string
+  color2: string
+  color1: string
+  color3: string
 }
 
 export interface Artist {
@@ -26,3 +27,15 @@ export interface Track {
   link: string
   coverId: string
 }
+
+export interface BoxPosition {
+  x: number
+  y: number
+  z: number
+}
+
+export interface BoxSize {
+  h: number
+  w: number
+  d: number
+}