diff --git a/app/src/lib/components/TransferFrom/components/AssetDialog.svelte b/app/src/lib/components/TransferFrom/components/AssetDialog.svelte
new file mode 100644
index 0000000000..f0b418ecb0
--- /dev/null
+++ b/app/src/lib/components/TransferFrom/components/AssetDialog.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+  import type {IntentStore} from "$lib/components/TransferFrom/transfer/intents.ts";
+  import type {Readable} from "svelte/store";
+  import type {ContextStore} from "$lib/components/TransferFrom/transfer/context.ts";
+  import {Button} from "$lib/components/ui/button";
+
+  interface Props {
+    intents: IntentStore
+    context: Readable<ContextStore>
+    onSelectAsset: () => void
+  }
+
+  export let intents: Props["intents"]
+  export let context: Props["context"]
+  export let onSelectAsset: Props["onSelectAsset"]
+</script>
+
+<Button
+        type="button"
+        size="sm"
+        variant="outline"
+        class="border-2 border-white min-w-[150px]"
+        on:click={onSelectAsset}
+>
+  {$context?.assetInfo ?? "Select asset"}
+</Button>
\ No newline at end of file
diff --git a/app/src/lib/components/TransferFrom/components/ChainDialog.svelte b/app/src/lib/components/TransferFrom/components/ChainDialog.svelte
new file mode 100644
index 0000000000..3cabf2c08c
--- /dev/null
+++ b/app/src/lib/components/TransferFrom/components/ChainDialog.svelte
@@ -0,0 +1,83 @@
+<script lang="ts">
+  import type {Readable} from "svelte/store";
+  import type {ContextStore} from "$lib/components/TransferFrom/transfer/context.ts";
+
+  interface Props {
+    context: Readable<ContextStore>
+    kind: "source" | "destination"
+    dialogOpen: boolean
+    onChainSelect: (type: 'source' | 'destination', chain: string) => void
+    onClose: () => void
+  }
+
+  export let context: Props["context"]
+  export let kind: Props["kind"]
+  export let dialogOpen: Props["dialogOpen"]
+  export let onChainSelect: Props["onChainSelect"]
+  export let onClose: Props["onClose"]
+</script>
+
+{#if dialogOpen && $context?.chains}
+  <dialog
+          open
+          aria-label={`Select ${kind} chain`}
+          class="absolute z-50 inset-0 overflow-y-scroll p-0 bg-transparent m-0 w-full h-full animate-fade-in backdrop-blur-md"
+  >
+    <button
+            type="button"
+            class="fixed inset-0 w-full h-full bg-gradient-to-t from-black to-black/10 animate-fade-in"
+            on:click|self={onClose}
+            aria-label="Close dialog"
+    />
+
+    <div class="relative z-10">
+      <div class="flex justify-center">
+        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 md:gap-8 max-w-4xl py-8 px-4">
+          {#each $context.chains as chain, i}
+            <button
+                    style="animation-delay: {i * 100}ms"
+                    on:click={() => onChainSelect(kind, chain.chain_id)}
+                    type="button"
+                    class="h-72 flex items-end border p-4 bg-secondary group hover:bg-accent transition-colors animate-slide-up"
+            >
+              <span class="font-supermolot uppercase font-bold text-xl text-start text-secondary-foreground group-hover:text-secondary">
+                {chain.display_name}
+              </span>
+            </button>
+          {/each}
+        </div>
+      </div>
+    </div>
+  </dialog>
+{/if}
+
+<style>
+  @keyframes fade-in {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes slide-up {
+    from {
+      transform: translateY(30px);
+      opacity: 0;
+    }
+    to {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+
+  :global(.animate-fade-in) {
+    animation: fade-in 0.3s ease-out forwards;
+  }
+
+  :global(.animate-slide-up) {
+    animation: slide-up 0.4s ease-out forwards;
+    opacity: 0;
+  }
+</style>
\ No newline at end of file
diff --git a/app/src/lib/components/TransferFrom/components/Cube/FaceWrapper.svelte b/app/src/lib/components/TransferFrom/components/Cube/FaceWrapper.svelte
new file mode 100644
index 0000000000..05e44ff759
--- /dev/null
+++ b/app/src/lib/components/TransferFrom/components/Cube/FaceWrapper.svelte
@@ -0,0 +1,14 @@
+<script>
+  export let visible = true
+  export let width = 0; // Pixel value
+  export let height = 0; // Pixel value
+  export let translateZ = 0;
+  export let rotateY = "0deg";
+</script>
+
+<div
+        class="absolute bg-neutral-900 flex flex-col items-center p-4 border-2 {visible ? 'opacity-100' : 'opacity-0 pointer-events-none'}}"
+        style={`width: ${width}px; height: ${height}px; transform: rotateY(${rotateY}) translateZ(${translateZ}px);;`}
+>
+  <slot />
+</div>
diff --git a/app/src/lib/components/TransferFrom/components/Cube/faces/Assets.svelte b/app/src/lib/components/TransferFrom/components/Cube/faces/Assets.svelte
new file mode 100644
index 0000000000..d44299c058
--- /dev/null
+++ b/app/src/lib/components/TransferFrom/components/Cube/faces/Assets.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+  import type {IntentStore} from "$lib/components/TransferFrom/transfer/intents.ts";
+  import type {ValidationStoreAndMethods} from "$lib/components/TransferFrom/transfer/validation.ts";
+  import type {Readable} from "svelte/store";
+  import type {ContextStore} from "$lib/components/TransferFrom/transfer/context.ts";
+  import type {CubeFaces} from "$lib/components/TransferFrom/types.ts";
+
+  interface Props {
+    stores: {
+      intents: IntentStore
+      validation: ValidationStoreAndMethods
+      context: Readable<ContextStore>
+    }
+    rotateTo: (face: CubeFaces) => void
+  }
+
+  export let stores: Props["stores"]
+  export let rotateTo: Props["rotateTo"]
+
+  $: ({intents, validation, context} = stores)
+</script>
+
+<button class="font-supermolot font-bold text-lg mb-4" on:click={() => rotateTo("intentFace")}>Select asset</button>
\ No newline at end of file
diff --git a/app/src/lib/components/TransferFrom/components/Cube/faces/Chains.svelte b/app/src/lib/components/TransferFrom/components/Cube/faces/Chains.svelte
new file mode 100644
index 0000000000..f83fdc7bc7
--- /dev/null
+++ b/app/src/lib/components/TransferFrom/components/Cube/faces/Chains.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+  import type {IntentStore} from "$lib/components/TransferFrom/transfer/intents.ts";
+  import type {ValidationStoreAndMethods} from "$lib/components/TransferFrom/transfer/validation.ts";
+  import type {Readable} from "svelte/store";
+  import type {ContextStore} from "$lib/components/TransferFrom/transfer/context.ts";
+  import type {CubeFaces} from "$lib/components/TransferFrom/types.ts";
+
+  interface Props {
+    stores: {
+      intents: IntentStore
+      validation: ValidationStoreAndMethods
+      context: Readable<ContextStore>
+    }
+    rotateTo: (face: CubeFaces) => void
+    select: "source" | "destination"
+  }
+
+  export let stores: Props["stores"]
+  export let rotateTo: Props["rotateTo"]
+  export let select: Props["select"]
+
+  $: ({intents, validation, context} = stores)
+</script>
+
+<h2 class="font-supermolot font-bold text-lg mb-4">Select chain</h2>
+{#each $context.chains as chain}
+  <button on:click={() => rotateTo("intentFace")}>{chain.display_name}</button>
+{/each}
\ No newline at end of file
diff --git a/app/src/lib/components/TransferFrom/components/Cube/faces/Intent.svelte b/app/src/lib/components/TransferFrom/components/Cube/faces/Intent.svelte
new file mode 100644
index 0000000000..cb7b0ffabb
--- /dev/null
+++ b/app/src/lib/components/TransferFrom/components/Cube/faces/Intent.svelte
@@ -0,0 +1,87 @@
+<script lang="ts">
+  import Direction from "$lib/components/TransferFrom/components/Direction.svelte";
+  import AssetDialog from "$lib/components/TransferFrom/components/AssetDialog.svelte";
+  import type {Readable} from "svelte/store";
+  import type {IntentStore} from "$lib/components/TransferFrom/transfer/intents.ts";
+  import type {ValidationStoreAndMethods} from "$lib/components/TransferFrom/transfer/validation.ts";
+  import type {ContextStore} from "$lib/components/TransferFrom/transfer/context.ts";
+  import type {CubeFaces} from "$lib/components/TransferFrom/types.ts";
+  import {Button} from "$lib/components/ui/button";
+
+  interface Props {
+    stores: {
+      intents: IntentStore
+      validation: ValidationStoreAndMethods
+      context: Readable<ContextStore>
+    }
+    rotateTo: (face: CubeFaces) => void
+  }
+
+  export let stores: Props["stores"]
+  export let rotateTo: Props["rotateTo"]
+
+  $: ({intents, validation, context} = stores)
+</script>
+
+<div class="flex flex-col justify-between w-full h-full">
+  <div class="flex flex-col gap-4">
+    <Direction
+            {context}
+            {intents}
+            getSourceChain={() => rotateTo("sourceFace")}
+            getDestinationChain={() => rotateTo("destinationFace")}
+    />
+    <AssetDialog
+            {context}
+            {intents}
+            onSelectAsset={() => rotateTo("assetsFace")}
+    />
+    <div class="flex flex-col gap-1">
+      <input
+              id="amount"
+              type="number"
+              name="amount"
+              minlength={1}
+              maxlength={64}
+              required={true}
+              disabled={false}
+              autocorrect="off"
+              placeholder="0.00"
+              spellcheck="false"
+              autocomplete="off"
+              inputmode="decimal"
+              data-field="amount"
+              autocapitalize="none"
+              pattern="^[0-9]*[.,]?[0-9]*$"
+              class="p-1 {$validation.errors.amount ? 'border-red-500' : ''}"
+              value={$intents.amount}
+              on:input={event => intents.updateField('amount', event)}
+      />
+      {#if $validation.errors.amount}
+        <span class="text-red-500 text-sm">{$validation.errors.amount}</span>
+      {/if}
+    </div>
+
+    <div class="flex flex-col gap-1">
+      <input
+              type="text"
+              id="receiver"
+              name="receiver"
+              required={true}
+              disabled={false}
+              autocorrect="off"
+              spellcheck="false"
+              autocomplete="off"
+              data-field="receiver"
+              class="p-1 disabled:bg-black/30 {$validation.errors.receiver ? 'border-red-500' : ''}"
+              placeholder="Enter destination address"
+              value={$intents.receiver}
+              on:input={event => intents.updateField('receiver', event)}
+      />
+      {#if $validation.errors.receiver}
+        <span class="text-red-500 text-sm">{$validation.errors.receiver}</span>
+      {/if}
+    </div>
+  </div>
+  <Button on:click={() => rotateTo("verifyFace")}>Transfer</Button>
+</div>
\ No newline at end of file
diff --git a/app/src/lib/components/TransferFrom/components/Cube/faces/Transfer.svelte b/app/src/lib/components/TransferFrom/components/Cube/faces/Transfer.svelte
new file mode 100644
index 0000000000..0d0c0ee70e
--- /dev/null
+++ b/app/src/lib/components/TransferFrom/components/Cube/faces/Transfer.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+  import type {IntentStore} from "$lib/components/TransferFrom/transfer/intents.ts";
+  import type {ValidationStoreAndMethods} from "$lib/components/TransferFrom/transfer/validation.ts";
+  import type {Readable} from "svelte/store";
+  import type {ContextStore} from "$lib/components/TransferFrom/transfer/context.ts";
+  import type {CubeFaces} from "$lib/components/TransferFrom/types.ts";
+
+  interface Props {
+    stores: {
+      intents: IntentStore
+      validation: ValidationStoreAndMethods
+      context: Readable<ContextStore>
+    }
+    rotateTo: (face: CubeFaces) => void
+  }
+
+  export let stores: Props["stores"]
+  export let rotateTo: Props["rotateTo"]
+
+  $: ({intents, validation, context} = stores)
+</script>
+
+<button on:click={() => rotateTo("intentFace")}>Transfer</button>
\ No newline at end of file
diff --git a/app/src/lib/components/TransferFrom/components/Cube/index.svelte b/app/src/lib/components/TransferFrom/components/Cube/index.svelte
new file mode 100644
index 0000000000..c31e7a920d
--- /dev/null
+++ b/app/src/lib/components/TransferFrom/components/Cube/index.svelte
@@ -0,0 +1,98 @@
+<script lang="ts">
+  import type {CubeFaces} from "$lib/components/TransferFrom/types.ts";
+  import FaceWrapper from "$lib/components/TransferFrom/components/Cube/FaceWrapper.svelte";
+  import {deviceWidth} from "$lib/utilities/device.ts";
+
+  let currentRotation = {x: 0, y: 0};
+
+  const facePositions = {
+    intentFace: 0,
+    chainsFace: -90,
+    verifyFace: -180,
+    assetsFace: -270,
+    sourceFace: -90,
+    destinationFace: -90,
+  } as const;
+
+  let currentVisibleFace: "source" | "destination" = "source";
+  $: currentVisibleFace = "source";
+
+  function findShortestRotation(current: number, target: number): number {
+    const revolution = Math.floor(current / 360) * 360;
+    const normalizedTarget = target + revolution;
+
+    let diff = normalizedTarget - current;
+    if (Math.abs(diff) > 180) {
+      diff = diff > 0 ? diff - 360 : diff + 360;
+    }
+    return current + diff;
+  }
+
+  function rotateTo(face: CubeFaces) {
+    console.log('rotate to: ', face)
+    const targetRotation = facePositions[face];
+
+    // Calculate the new Y rotation
+    const newY = findShortestRotation(currentRotation.y, targetRotation);
+    currentRotation = {x: 0, y: newY};
+
+    // Update visibility state
+    if (face === "sourceFace") {
+      currentVisibleFace = "source";
+    } else if (face === "destinationFace") {
+      currentVisibleFace = "destination";
+    }
+  }
+
+  //If we want to be specific we can set each w
+  $: width =
+    $deviceWidth >= 1536 ? 400 : // 2xl breakpoint
+      $deviceWidth >= 1280 ? 400 : // xl breakpoint
+        $deviceWidth >= 1024 ? 400 : // lg breakpoint
+          $deviceWidth >= 768 ? 400 :  // md breakpoint
+            $deviceWidth >= 640 ? 400 :  // sm breakpoint
+              300; // Default for smaller screens
+
+  $: height = width * 1.5;
+  $: translateZ = width / 2;
+
+</script>
+
+<div class="h-screen w-full flex items-center justify-center bg-black perspective-[2000px]">
+  <div
+          class="relative transform-style-preserve-3d transition-transform duration-1000"
+          style={`width: ${width}px; height: ${height}px; transform: rotateX(${currentRotation.x}deg) rotateY(${currentRotation.y}deg)`}
+  >
+    <FaceWrapper {width} {height} {translateZ} visible rotateY={"0deg"}>
+      <slot name="intent" {rotateTo}/>
+    </FaceWrapper>
+
+    <!--Source and destination is on the same degree, we just hide one depending on clicked intent.-->
+    <!--By doing this we can "layer" faces and reuse the rotation-->
+    <FaceWrapper {width} {height} {translateZ} visible={currentVisibleFace === 'source'} rotateY={"90deg"}>
+      <slot name="source" {rotateTo}/>
+    </FaceWrapper>
+
+    <FaceWrapper {width} {height} {translateZ} visible={currentVisibleFace === 'destination'} rotateY={"90deg"}>
+      <slot name="destination" {rotateTo}/>
+    </FaceWrapper>
+
+    <FaceWrapper {width} {height} {translateZ} visible rotateY={"270deg"}>
+      <slot name="assets" {rotateTo}/>
+    </FaceWrapper>
+
+    <FaceWrapper {width} {height} {translateZ} visible rotateY={"180deg"}>
+      <slot name="transfer" {rotateTo}/>
+    </FaceWrapper>
+  </div>
+</div>
+
+<style>
+  .perspective-\[2000px\] {
+    perspective: 2000px;
+  }
+
+  .transform-style-preserve-3d {
+    transform-style: preserve-3d;
+  }
+</style>
diff --git a/app/src/lib/components/TransferFrom/components/DebugBox.svelte b/app/src/lib/components/TransferFrom/components/DebugBox.svelte
deleted file mode 100644
index 477fdb11fb..0000000000
--- a/app/src/lib/components/TransferFrom/components/DebugBox.svelte
+++ /dev/null
@@ -1,62 +0,0 @@
-<script lang="ts">
-  import CopyUrlButton from "$lib/components/TransferFrom/components/CopyUrlButton.svelte"
-  import ResetButton from "$lib/components/TransferFrom/components/ResetButton.svelte"
-  import CollapsibleDisplay from "./CollapsibleDisplay.svelte"
-  import type { IntentStore } from "../transfer/intents.ts"
-  import type { ValidationStoreAndMethods } from "../transfer/validation.ts"
-  import type { ContextStore } from "../transfer/context.ts"
-  import type { Readable } from "svelte/store"
-
-  interface DebugProps {
-    intents: IntentStore
-    validation: ValidationStoreAndMethods
-    context: Readable<ContextStore>
-  }
-
-  export let intents: DebugProps["intents"]
-  export let validation: DebugProps["validation"]
-  export let context: DebugProps["context"]
-</script>
-
-<div class="p-4 w-full">
-  <div class="p-4 bg-black w-full">
-    <div class="mb-4 flex items-center gap-4">
-      <CopyUrlButton/>
-      <ResetButton onReset={intents.reset}/>
-    </div>
-
-    <h2 class="mb-4">TRANSFER DEBUG</h2>
-
-    <div class="mb-4">
-      <CollapsibleDisplay data={$intents} initiallyExpanded label="Raw Intents" color="text-union-accent-500"/>
-    </div>
-
-    <div class="mb-4">
-      <CollapsibleDisplay data={$validation} initiallyExpanded label="Validation" color="text-red-500"/>
-    </div>
-
-    <div class="mb-4">
-      <CollapsibleDisplay data={$context.userAddress} initiallyExpanded label="User Addresses" color="text-orange-500"/>
-    </div>
-
-    <div class="mb-4">
-      <CollapsibleDisplay data={$context.assetInfo} label="Selected Asset Info" color="text-yellow-500"/>
-    </div>
-
-    <div class="mb-4">
-      <CollapsibleDisplay data={$context.balances} label="Balances" color="text-purple-500"/>
-    </div>
-
-    <div class="mb-4">
-      <CollapsibleDisplay data={$context.sourceChain} label="Source Chain" color="text-blue-500"/>
-    </div>
-
-    <div class="mb-4">
-      <CollapsibleDisplay data={$context.destinationChain} label="Destination Chain" color="text-green-500"/>
-    </div>
-
-    <div class="mb-4">
-      <CollapsibleDisplay data={$context.chains} label="Available Chains" color="text-indigo-500"/>
-    </div>
-  </div>
-</div>
\ No newline at end of file
diff --git a/app/src/lib/components/TransferFrom/components/CollapsibleDisplay.svelte b/app/src/lib/components/TransferFrom/components/DebugBox/CollapsibleDisplay.svelte
similarity index 100%
rename from app/src/lib/components/TransferFrom/components/CollapsibleDisplay.svelte
rename to app/src/lib/components/TransferFrom/components/DebugBox/CollapsibleDisplay.svelte
diff --git a/app/src/lib/components/TransferFrom/components/CopyUrlButton.svelte b/app/src/lib/components/TransferFrom/components/DebugBox/CopyUrlButton.svelte
similarity index 100%
rename from app/src/lib/components/TransferFrom/components/CopyUrlButton.svelte
rename to app/src/lib/components/TransferFrom/components/DebugBox/CopyUrlButton.svelte
diff --git a/app/src/lib/components/TransferFrom/components/ResetButton.svelte b/app/src/lib/components/TransferFrom/components/DebugBox/ResetButton.svelte
similarity index 100%
rename from app/src/lib/components/TransferFrom/components/ResetButton.svelte
rename to app/src/lib/components/TransferFrom/components/DebugBox/ResetButton.svelte
diff --git a/app/src/lib/components/TransferFrom/components/DebugBox/index.svelte b/app/src/lib/components/TransferFrom/components/DebugBox/index.svelte
new file mode 100644
index 0000000000..0798537de5
--- /dev/null
+++ b/app/src/lib/components/TransferFrom/components/DebugBox/index.svelte
@@ -0,0 +1,78 @@
+<script lang="ts">
+  import * as Drawer from "$lib/components/ui/drawer";
+  import type {Readable} from "svelte/store"
+  import type {IntentStore} from "../../transfer/intents.ts"
+  import type {ValidationStoreAndMethods} from "../../transfer/validation.ts"
+  import type {ContextStore} from "../../transfer/context.ts"
+  import CollapsibleDisplay from "./CollapsibleDisplay.svelte"
+  import CopyUrlButton from "./CopyUrlButton.svelte";
+  import ResetButton from "./ResetButton.svelte";
+  import {Button} from "$lib/components/ui/button";
+  import {ScrollArea} from "$lib/components/ui/scroll-area";
+
+  interface Props {
+    stores: {
+      intents: IntentStore
+      validation: ValidationStoreAndMethods
+      context: Readable<ContextStore>
+    }
+  }
+
+  export let stores: Props["stores"]
+
+  $: ({intents, validation, context} = stores)
+</script>
+
+<Drawer.Root>
+  <Drawer.Trigger>Debug</Drawer.Trigger>
+  <Drawer.Content class="h-[95svh]">
+    <Drawer.Header>
+      <div class="flex items-center gap-4">
+        <CopyUrlButton/>
+        <ResetButton onReset={intents.reset}/>
+      </div>
+    </Drawer.Header>
+
+    <ScrollArea class="flex-1 px-4 rounded h-full">
+      <div class="bg-black w-full h-full p-10">
+        <h2 class="mb-4">TRANSFER DEBUG</h2>
+
+        <div class="mb-4">
+          <CollapsibleDisplay data={$intents} initiallyExpanded label="Raw Intents" color="text-union-accent-500"/>
+        </div>
+
+        <div class="mb-4">
+          <CollapsibleDisplay data={$validation} initiallyExpanded label="Validation" color="text-red-500"/>
+        </div>
+
+        <div class="mb-4">
+          <CollapsibleDisplay data={$context.userAddress} initiallyExpanded label="User Addresses" color="text-orange-500"/>
+        </div>
+
+        <div class="mb-4">
+          <CollapsibleDisplay data={$context.assetInfo} label="Selected Asset Info" color="text-yellow-500"/>
+        </div>
+
+        <div class="mb-4">
+          <CollapsibleDisplay data={$context.balances} label="Balances" color="text-purple-500"/>
+        </div>
+
+        <div class="mb-4">
+          <CollapsibleDisplay data={$context.sourceChain} label="Source Chain" color="text-blue-500"/>
+        </div>
+
+        <div class="mb-4">
+          <CollapsibleDisplay data={$context.destinationChain} label="Destination Chain" color="text-green-500"/>
+        </div>
+
+        <div class="mb-4">
+          <CollapsibleDisplay data={$context.chains} label="Available Chains" color="text-indigo-500"/>
+        </div>
+      </div>
+    </ScrollArea>
+
+    <Drawer.Footer>
+      <Drawer.Close>Close</Drawer.Close>
+    </Drawer.Footer>
+  </Drawer.Content>
+</Drawer.Root>
\ No newline at end of file
diff --git a/app/src/lib/components/TransferFrom/components/Direction.svelte b/app/src/lib/components/TransferFrom/components/Direction.svelte
new file mode 100644
index 0000000000..61c921544f
--- /dev/null
+++ b/app/src/lib/components/TransferFrom/components/Direction.svelte
@@ -0,0 +1,39 @@
+<script lang="ts">
+  import type {IntentStore} from "../transfer/intents.ts";
+  import type {ContextStore} from "$lib/components/TransferFrom/transfer/context.ts";
+  import type {Readable} from "svelte/store";
+  import {Button} from "$lib/components/ui/button";
+
+  interface Props {
+    intents: IntentStore
+    context: Readable<ContextStore>
+    getSourceChain: () => void
+    getDestinationChain: () => void
+  }
+
+  export let intents: Props["intents"]
+  export let context: Props["context"]
+  export let getSourceChain: Props["getSourceChain"]
+  export let getDestinationChain: Props["getDestinationChain"]
+</script>
+
+<div class="flex flex-col gap-1">
+  <Button
+          variant="outline"
+          type="button"
+          size="sm"
+          class="border-2 border-white  min-w-[150px] font-bold"
+          on:click={getSourceChain}
+  >
+    {$context?.sourceChain?.display_name.split(" ")[0]}
+  </Button>
+  <Button
+          variant="outline"
+          type="button"
+          size="sm"
+          class="border-2 border-white min-w-[150px] font-bold"
+          on:click={getDestinationChain}
+  >
+    {$context?.destinationChain?.display_name.split(" ")[0] ?? "To"}
+  </Button>
+</div>
diff --git a/app/src/lib/components/TransferFrom/index.svelte b/app/src/lib/components/TransferFrom/index.svelte
index 75fd2ad8e6..e799bdc15d 100644
--- a/app/src/lib/components/TransferFrom/index.svelte
+++ b/app/src/lib/components/TransferFrom/index.svelte
@@ -1,122 +1,40 @@
 <script lang="ts">
-  import { TRANSFER_DEBUG } from "$lib/components/TransferFrom/config.ts"
-  import { createTransferStore } from "$lib/components/TransferFrom/transfer"
-  import DebugBox from "$lib/components/TransferFrom/components/DebugBox.svelte"
+  import DebugBox from "$lib/components/TransferFrom/components/DebugBox/index.svelte";
+  import {TRANSFER_DEBUG} from "$lib/components/TransferFrom/transfer/config.ts";
+  import {createTransferStore} from "$lib/components/TransferFrom/transfer";
+  import Intent from "$lib/components/TransferFrom/components/Cube/faces/Intent.svelte";
+  import Chains from "$lib/components/TransferFrom/components/Cube/faces/Chains.svelte";
+  import Assets from "$lib/components/TransferFrom/components/Cube/faces/Assets.svelte";
+  import Transfer from "$lib/components/TransferFrom/components/Cube/faces/Transfer.svelte";
+  import Cube from "$lib/components/TransferFrom/components/Cube/index.svelte";
 
-  const { intents, context, validation } = createTransferStore()
+  const stores = createTransferStore()
 </script>
 
-<form
-        id="transfer"
-        name="transfer"
-        action="transfer"
-        data-form="transfer"
-        class="flex flex-col p-4"
->
-  <div class="flex flex-col gap-4">
-    <div class="flex flex-col gap-1">
-      <label for="source" class="text-sm font-medium">Source</label>
-      <input
-              type="text"
-              id="source"
-              name="source"
-              placeholder="Enter source chain"
-              class="w-[300px] p-1 {$validation.errors.source ? 'border-red-500' : ''}"
-              value={$intents.source}
-              on:input={event => intents.updateField('source', event)}
-      />
-      {#if $validation.errors.source}
-        <span class="text-red-500 text-sm">{$validation.errors.source}</span>
-      {/if}
-    </div>
+<Cube>
+  <div slot="intent" let:rotateTo class="w-full h-full">
+    <Intent {stores} {rotateTo}/>
+  </div>
 
-    <div class="flex flex-col gap-1">
-      <label for="destination" class="text-sm font-medium">Destination</label>
-      <input
-              type="text"
-              id="destination"
-              name="destination"
-              placeholder="Enter destination chain"
-              class="w-[300px] p-1 {$validation.errors.destination ? 'border-red-500' : ''}"
-              value={$intents.destination}
-              on:input={event => intents.updateField('destination', event)}
-      />
-      {#if $validation.errors.destination}
-        <span class="text-red-500 text-sm">{$validation.errors.destination}</span>
-      {/if}
-    </div>
+  <div slot="source" let:rotateTo class="w-full h-full">
+    <Chains {stores} {rotateTo} select="source"/>
+  </div>
 
-    <div class="flex flex-col gap-1">
-      <label for="asset" class="text-sm font-medium">Asset</label>
-      <input
-              type="text"
-              id="asset"
-              name="asset"
-              placeholder="Enter asset"
-              class="w-[300px] p-1 {$validation.errors.asset ? 'border-red-500' : ''}"
-              value={$intents.asset}
-              on:input={event => intents.updateField('asset', event)}
-      />
-      {#if $validation.errors.asset}
-        <span class="text-red-500 text-sm">{$validation.errors.asset}</span>
-      {/if}
-    </div>
+  <div slot="destination" let:rotateTo class="w-full h-full">
+    <Chains {stores} {rotateTo} select="source"/>
+  </div>
 
-    <div class="flex flex-col gap-1">
-      <label for="amount" class="text-sm font-medium">Amount</label>
-      <input
-              id="amount"
-              type="number"
-              name="amount"
-              minlength={1}
-              maxlength={64}
-              required={true}
-              disabled={false}
-              autocorrect="off"
-              placeholder="0.00"
-              spellcheck="false"
-              autocomplete="off"
-              inputmode="decimal"
-              data-field="amount"
-              autocapitalize="none"
-              pattern="^[0-9]*[.,]?[0-9]*$"
-              class="w-[300px] p-1 {$validation.errors.amount ? 'border-red-500' : ''}"
-              value={$intents.amount}
-              on:input={event => intents.updateField('amount', event)}
-      />
-      {#if $validation.errors.amount}
-        <span class="text-red-500 text-sm">{$validation.errors.amount}</span>
-      {/if}
-    </div>
+  <div slot="assets" let:rotateTo class="w-full h-full">
+    <Assets {stores} {rotateTo}/>
+  </div>
 
-    <div class="flex flex-col gap-1">
-      <label for="receiver" class="text-sm font-medium">Receiver Address</label>
-      <input
-              type="text"
-              id="receiver"
-              name="receiver"
-              required={true}
-              disabled={false}
-              autocorrect="off"
-              spellcheck="false"
-              autocomplete="off"
-              data-field="receiver"
-              class="w-[300px] p-1 disabled:bg-black/30 {$validation.errors.receiver ? 'border-red-500' : ''}"
-              placeholder="Enter destination address"
-              value={$intents.receiver}
-              on:input={event => intents.updateField('receiver', event)}
-      />
-      {#if $validation.errors.receiver}
-        <span class="text-red-500 text-sm">{$validation.errors.receiver}</span>
-      {/if}
-    </div>
+  <div slot="transfer" let:rotateTo class="w-full h-full">
+    <Transfer {stores} {rotateTo}/>
   </div>
-</form>
+</Cube>
 
-{#if TRANSFER_DEBUG}
-  <DebugBox
-          {intents}
-          {validation}
-          {context}
-  />
-{/if}
\ No newline at end of file
+<div class="absolute bottom-0 inset-x-0 text-center py-2">
+  {#if TRANSFER_DEBUG}
+    <DebugBox {stores} />
+  {/if}
+</div>
diff --git a/app/src/lib/components/TransferFrom/config.ts b/app/src/lib/components/TransferFrom/transfer/config.ts
similarity index 100%
rename from app/src/lib/components/TransferFrom/config.ts
rename to app/src/lib/components/TransferFrom/transfer/config.ts
diff --git a/app/src/lib/components/TransferFrom/transfer/index.ts b/app/src/lib/components/TransferFrom/transfer/index.ts
index c0b2731e97..15db72c431 100644
--- a/app/src/lib/components/TransferFrom/transfer/index.ts
+++ b/app/src/lib/components/TransferFrom/transfer/index.ts
@@ -1,9 +1,7 @@
 import { type Readable } from "svelte/store"
 import { createIntentStore, type IntentStore } from "./intents.ts"
 import { type ContextStore, createContextStore} from "$lib/components/TransferFrom/transfer/context.ts"
-import {
-  createValidationStore, type ValidationStoreAndMethods
-} from "$lib/components/TransferFrom/transfer/validation.ts"
+import { createValidationStore, type ValidationStoreAndMethods } from "$lib/components/TransferFrom/transfer/validation.ts"
 
 export interface TransferStore {
   intents: IntentStore
diff --git a/app/src/lib/components/TransferFrom/transfer/intents.ts b/app/src/lib/components/TransferFrom/transfer/intents.ts
index 8b536fcd3a..3b37fdac30 100644
--- a/app/src/lib/components/TransferFrom/transfer/intents.ts
+++ b/app/src/lib/components/TransferFrom/transfer/intents.ts
@@ -2,7 +2,7 @@ import { writable } from "svelte/store"
 import { browser } from "$app/environment"
 import { page } from "$app/stores"
 import { debounce } from "$lib/utilities"
-import { defaultParams } from "$lib/components/TransferFrom/config.ts"
+import { defaultParams } from "$lib/components/TransferFrom/transfer/config.ts"
 
 export type FormFields = {
   source: string
diff --git a/app/src/lib/components/TransferFrom/transfer/validation.ts b/app/src/lib/components/TransferFrom/transfer/validation.ts
index e9451dfe06..684086b4b6 100644
--- a/app/src/lib/components/TransferFrom/transfer/validation.ts
+++ b/app/src/lib/components/TransferFrom/transfer/validation.ts
@@ -111,6 +111,7 @@ export function createValidationStore(
     }
     const errors: FieldErrors = {}
 
+    //Example
     if (formFields.source && formFields.destination && formFields.source === formFields.destination) {
       errors.destination = "Source and destination chains must be different"
     }
diff --git a/app/src/lib/components/TransferFrom/types.ts b/app/src/lib/components/TransferFrom/types.ts
new file mode 100644
index 0000000000..397e5eb703
--- /dev/null
+++ b/app/src/lib/components/TransferFrom/types.ts
@@ -0,0 +1,7 @@
+export type CubeFaces =
+  'intentFace' |
+  'chainsFace' |
+  'verifyFace' |
+  'assetsFace' |
+  "sourceFace" |
+  "destinationFace"
\ No newline at end of file
diff --git a/app/src/routes/transfer/+page.svelte b/app/src/routes/transfer/+page.svelte
index f2bbe1a487..a4f16c8e8e 100644
--- a/app/src/routes/transfer/+page.svelte
+++ b/app/src/routes/transfer/+page.svelte
@@ -7,8 +7,8 @@ import TransferFrom from "$lib/components/TransferFrom/index.svelte"
   <title>Union | Send</title>
 </svelte:head>
 
-<ChainsGate let:chains>
-  <div class="w-full flex flex-col items-start">
-    <TransferFrom {chains} />
+<ChainsGate>
+  <div class="w-full flex flex-col justify-center items-center">
+    <TransferFrom />
   </div>
 </ChainsGate>