diff --git a/package-lock.json b/package-lock.json
index 7ebfbe2..2c4ed13 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8480,7 +8480,7 @@
         },
         "packages/client": {
             "name": "@code-wallet/client",
-            "version": "2.0.8",
+            "version": "2.0.9",
             "license": "MIT",
             "dependencies": {
                 "@code-wallet/intents": "^1.0.0",
@@ -8519,7 +8519,7 @@
         },
         "packages/elements": {
             "name": "@code-wallet/elements",
-            "version": "2.0.2",
+            "version": "2.0.3",
             "license": "MIT",
             "dependencies": {
                 "@code-wallet/client": "^2.0.6",
@@ -8577,12 +8577,12 @@
         },
         "packages/intents": {
             "name": "@code-wallet/intents",
-            "version": "1.0.1",
+            "version": "1.0.2",
             "license": "MIT",
             "dependencies": {
                 "@code-wallet/currency": "^1.0.0",
                 "@code-wallet/keys": "^1.0.0",
-                "@code-wallet/kikcode": "^1.0.0",
+                "@code-wallet/kikcode": "^1.0.5",
                 "@code-wallet/rpc": "^1.3.1",
                 "@noble/hashes": "^1.3.0",
                 "bs58": "^5.0.0",
@@ -8622,12 +8622,13 @@
         },
         "packages/kikcode": {
             "name": "@code-wallet/kikcode",
-            "version": "1.0.4",
+            "version": "1.0.5",
             "license": "MIT",
             "dependencies": {
                 "@code-wallet/currency": "^1.0.0"
             },
             "devDependencies": {
+                "@noble/hashes": "^1.3.2",
                 "@types/chai": "^4.3.5",
                 "@types/mocha": "^10.0.1",
                 "@types/node": "^20.5.7",
@@ -8872,7 +8873,7 @@
         },
         "packages/views": {
             "name": "@code-wallet/views",
-            "version": "1.0.3",
+            "version": "1.0.4",
             "license": "MIT",
             "dependencies": {
                 "@code-wallet/events": "^1.4.0",
@@ -9657,7 +9658,7 @@
             "requires": {
                 "@code-wallet/currency": "^1.0.0",
                 "@code-wallet/keys": "^1.0.0",
-                "@code-wallet/kikcode": "^1.0.0",
+                "@code-wallet/kikcode": "^1.0.5",
                 "@code-wallet/rpc": "^1.3.1",
                 "@noble/hashes": "^1.3.0",
                 "@types/chai": "^4.3.5",
@@ -9693,6 +9694,7 @@
             "version": "file:packages/kikcode",
             "requires": {
                 "@code-wallet/currency": "^1.0.0",
+                "@noble/hashes": "^1.3.2",
                 "@types/chai": "^4.3.5",
                 "@types/mocha": "^10.0.1",
                 "@types/node": "^20.5.7",
diff --git a/packages/client/package.json b/packages/client/package.json
index df0c3ea..815656a 100644
--- a/packages/client/package.json
+++ b/packages/client/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@code-wallet/client",
-    "version": "2.0.8",
+    "version": "2.0.9",
     "license": "MIT",
     "repository": {
         "type": "git",
diff --git a/packages/client/src/utils/createIntent.ts b/packages/client/src/utils/createIntent.ts
index 379f6b6..32bdffa 100644
--- a/packages/client/src/utils/createIntent.ts
+++ b/packages/client/src/utils/createIntent.ts
@@ -1,14 +1,17 @@
-import { Client } from "../client";
-import { Intent, } from "@code-wallet/intents";
 import * as proto from "@code-wallet/rpc";
+import { Intent, IntentWithMessage } from "@code-wallet/intents";
+import { Client } from "../client";
 import { ErrUnexpectedError } from "../errors";
 
 async function createIntent(intent: Intent, client: Client) {
-    const msg = await intent.getSendMessageRequestProto()
-    const res = await client.send(proto.Messaging, 'sendMessage', msg);
+    if (intent.hasMessage()) {
+        const withMessage = intent as IntentWithMessage;
+        const msg = await withMessage.getSendMessageRequestProto();
+        const res = await client.send(proto.Messaging, 'sendMessage', msg);
 
-    if (res.result !== proto.SendMessageResponse_Result.OK) {
-        ErrUnexpectedError();
+        if (res.result !== proto.SendMessageResponse_Result.OK) {
+            ErrUnexpectedError();
+        }
     }
     
     return {
diff --git a/packages/elements/example/index.html b/packages/elements/example/index.html
index a52b3ab..f54e7a6 100644
--- a/packages/elements/example/index.html
+++ b/packages/elements/example/index.html
@@ -12,13 +12,17 @@
   <div style="padding: 10%; background-color: lightgray;">
     <span id="button-pay2"></span>
     <span id="button-login2"></span>
+    <span id="button-tip2"></span>
   </div>
 
   <div style="padding: 10%; background-color: black;">
     <span id="button-pay1"></span>
     <span id="button-login1"></span>
+    <span id="button-tip1"></span>
   </div>
 
+  <span id="page-tip3"></span>
+
   <script type="module">
     import code from '../src/index';
 
@@ -70,10 +74,54 @@
       button.mount(id);
     }
 
+    function mount_tip(id, appearance) {
+      const options = {
+        appearance,
+        mode: 'tip',
+        platform: {
+          name: 'twitter',
+          username: 'getcode'
+        }
+      }
+
+      const { button } = code.elements.create('button', options);
+
+      button.on('error', (e) => { console.log('sdk-error', e); });
+      button.on('cancel', (e) => { console.log('sdk-cancel', e); });
+
+      button.mount(id);
+    }
+
+    /*
+    function mount_page(id) {
+      const options = {
+        mode: 'tip',
+        platform: {
+          name: 'twitter',
+          username: 'getcode'
+        }
+      }
+
+      const { page } = code.elements.create('page', options);
+
+      page.on('error', (e) => { console.log('sdk-error', e); });
+      page.on('cancel', (e) => { console.log('sdk-cancel', e); });
+
+      page.mount(id);
+    }
+    mount_page('#page-tip3');
+    */
+
     mount_payment('#button-pay1', 'light');
     mount_payment('#button-pay2', 'dark');
+
     mount_login('#button-login1', 'light');
     mount_login('#button-login2', 'dark');
+
+    mount_tip('#button-tip1', 'light');
+    mount_tip('#button-tip2', 'dark');
+
+
   </script>
 </body>
 
diff --git a/packages/elements/package.json b/packages/elements/package.json
index e2cabae..8e0c2bc 100644
--- a/packages/elements/package.json
+++ b/packages/elements/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@code-wallet/elements",
-    "version": "2.0.2",
+    "version": "2.0.3",
     "license": "MIT",
     "repository": {
         "type": "git",
diff --git a/packages/elements/src/components/elements/IntentRequestModalDesktop.vue b/packages/elements/src/components/elements/IntentRequestModalDesktop.vue
index da682b1..e790cf1 100644
--- a/packages/elements/src/components/elements/IntentRequestModalDesktop.vue
+++ b/packages/elements/src/components/elements/IntentRequestModalDesktop.vue
@@ -6,7 +6,10 @@
 
     const config = useConfig();
     const options = inject<ElementOptions>('options');
-    const mode = options?.mode ?? 'payment';
+
+    const props = defineProps<{
+        asPage?: boolean,
+    }>();
 
     const emit = defineEmits([
         'codeScanned',
@@ -20,7 +23,9 @@
     ]);
 
     const channel = new EventChannel<InternalEvents>();
-    const url = `${config.codeSdk()}/${mode}-request-modal-desktop/#/${channel.id}/p=${encode(options)}`;
+    const mode = options?.mode ?? 'payment';
+    const kind = props.asPage ? 'page' : 'modal';
+    const url = `${config.codeSdk()}/${mode}-request-${kind}-desktop/#/${channel.id}/p=${encode(options)}`;
     const el = ref<HTMLIFrameElement | null>(null);
 
     console.log('url', url);
@@ -79,9 +84,10 @@
 
     function getStyle() : { [key:string]: string } {
         const _ = (v:string) => v + ' !important';
+        const inset = { inset: _('0'), top: _('0'), left: _('0'), right: _('0'), bottom: _('0'), }
         return {
+            ...inset,
             position: _('fixed'),
-            inset: _('0'),
             zIndex: _('2147483647'),
             overflow: _('hidden'),
             width: _('100dvw'),
diff --git a/packages/elements/src/components/elements/IntentRequestModalMobile.vue b/packages/elements/src/components/elements/IntentRequestModalMobile.vue
index c4318a8..1f80dc2 100644
--- a/packages/elements/src/components/elements/IntentRequestModalMobile.vue
+++ b/packages/elements/src/components/elements/IntentRequestModalMobile.vue
@@ -8,6 +8,10 @@
     const options = inject<ElementOptions>('options');
     const mode = options?.mode ?? 'payment';
 
+    const props = defineProps<{
+        asPage?: boolean,
+    }>();
+
     const emit = defineEmits([
         'codeScanned',
         'clientRejectedPayment',
@@ -20,7 +24,8 @@
     ]);
 
     const channel = new EventChannel<InternalEvents>();
-    const url = `${config.codeSdk()}/${mode}-request-modal-mobile/#/${channel.id}/p=${encode(options)}`;
+    const kind = props.asPage ? 'page' : 'modal';
+    const url = `${config.codeSdk()}/${mode}-request-${kind}-mobile/#/${channel.id}/p=${encode(options)}`;
     const el = ref<HTMLIFrameElement | null>(null);
 
     channel.on('codeScanned' , () => { emit('codeScanned'); });
@@ -82,9 +87,10 @@
 
     function getStyle() : { [key:string]: string } {
         const _ = (v:string) => v + ' !important';
+        const inset = { inset: _('0'), top: _('0'), left: _('0'), right: _('0'), bottom: _('0'), }
         return {
+            ...inset,
             position: _('fixed'),
-            inset: _('0'),
             zIndex: _('2147483647'),
             overflow: _('hidden'),
             width: _('100dvw'),
diff --git a/packages/elements/src/components/flows/ButtonFlow.vue b/packages/elements/src/components/flows/ButtonFlow.vue
index eaa8547..7225da9 100644
--- a/packages/elements/src/components/flows/ButtonFlow.vue
+++ b/packages/elements/src/components/flows/ButtonFlow.vue
@@ -1,12 +1,14 @@
 <script setup lang="ts">
-import { Ref, inject, nextTick, ref } from 'vue';
+import { Ref, inject, nextTick, reactive, ref } from 'vue';
 import { 
   ElementEventEmitter, 
   ElementOptions, 
+  ExternalPlatformOptions, 
   LoginRequestIntent, 
   LoginRequestOptions, 
   PaymentRequestIntent,
-PaymentRequestOptions
+  PaymentRequestOptions,
+  TipRequestIntent
 } from '@code-wallet/intents';
 import { EventChannel, InternalEvents } from '@code-wallet/events';
 import * as code from "@code-wallet/client";
@@ -24,15 +26,19 @@ import {
 
 import { isMobileDevice } from '../../utils/user-agent';
 import { getURLParam } from '../../utils/url';
+import { sleep } from '../../utils/delay';
 
 const fadeDuration = 500; // Animation duration in milliseconds (we use this to delay emitting events)
-const sleep = (ms:number) => new Promise(resolve => setTimeout(resolve, ms));
+
 const options = inject<ElementOptions>('options');
 const sdkEmit = inject<ElementEventEmitter>('emit', async () => false);
 const channel : Ref<EventChannel<InternalEvents> | null> = ref(null);
-const intent = ref<string | null>(null);
-const open = ref(false);
-const mobile = isMobileDevice();
+
+const state = reactive({
+  intent: null as string | null,
+  open: false,
+  mobile: isMobileDevice(),
+});
 
 // We're going to try to guess these values later, so we have to keep track of
 // whether or not the user has provided them before we do that.
@@ -41,11 +47,15 @@ const userProvidedCancelUrl = options?.confirmParams?.cancel?.url !== undefined;
 
 function canMount() {
   if (options) {
-    if (options.mode === 'payment') {
-      return options.amount && options.currency && options.destination;
-    }
-    if (options.mode === 'login') {
-      return options.login && options.login.domain;
+    switch (options.mode) {
+      case 'login':
+        return options.login && options.login.domain;
+      case 'payment':
+        return options.amount && options.currency && options.destination;
+      case 'tip':
+        return options.platform && options.platform.name && options.platform.username;
+      default:
+        return false;
     }
   }
 
@@ -57,7 +67,7 @@ function onChannelCreated(val: EventChannel<InternalEvents>) {
 }
 
 async function onInvoke() {
-  open.value = true;
+  state.open = true;
 
   // Wait for the modal to be mounted, this is necessary because we need to wait
   // for the iframe to be mounted before we can get the channel for it.
@@ -72,19 +82,27 @@ async function onInvoke() {
   // Invoke user code, if the user returns true, we'll cancel the invocation
   const preventAction = await sdkEmit('invoke');
   if (preventAction) {
-    open.value = false;
+    state.open = false;
     return;
   }
 
   // Get the intent id from the receiving app or iframe
-  if (options.mode === 'payment') {
-    intent.value = new PaymentRequestIntent(options as ElementOptions & PaymentRequestOptions).getIntentId();
-  } else {
-    intent.value = new LoginRequestIntent(options as ElementOptions & LoginRequestOptions).getIntentId();
+  switch (options.mode) {
+    case 'login':
+      state.intent = new LoginRequestIntent(options as ElementOptions & LoginRequestOptions).getIntentId();
+      break;
+    case 'payment':
+      state.intent = new PaymentRequestIntent(options as ElementOptions & PaymentRequestOptions).getIntentId();
+      break;
+    case 'tip':
+      state.intent = new TipRequestIntent(options as ElementOptions & ExternalPlatformOptions).getIntentId();
+      break;
+    default:
+      throw new Error('Invalid mode');
   }
 
   const variables = {
-    INTENT_ID: intent.value,
+    INTENT_ID: state.intent,
     // ...
   }
 
@@ -111,13 +129,13 @@ async function onInvoke() {
 }
 
 async function onSuccess() {
-  open.value = false;
+  state.open = false;
 
   // Ensure that the modal is fully closed before emitting events
   await sleep(fadeDuration); 
 
   const url = options?.confirmParams?.success?.url;
-  const preventAction = await sdkEmit('success', { url, options, intent: intent.value });
+  const preventAction = await sdkEmit('success', { url, options, intent: state.intent });
   if (preventAction) {
     return;
   }
@@ -128,13 +146,13 @@ async function onSuccess() {
 }
 
 async function onCancel() {
-  open.value = false;
+  state.open = false;
 
   // Ensure that the modal is fully closed before emitting events
   await sleep(fadeDuration);
 
   const url = options?.confirmParams?.cancel?.url;
-  const preventAction = await sdkEmit('cancel', { url, options, intent: intent.value });
+  const preventAction = await sdkEmit('cancel', { url, options, intent: state.intent });
   if (preventAction) {
     return;
   }
@@ -150,23 +168,23 @@ async function onError(err: any) {
 }
 
 async function onStreamTimeout() {
-  open.value = false;
+  state.open = false;
   await onError('stream_timed_out');
 }
 
 async function onStreamClosed() {
-  open.value = false;
+  state.open = false;
   await onError('stream_closed');
 }
 
 // Add an event listener for the 'visibilitychange' event
 document.addEventListener("visibilitychange", async () => {
   if (document.visibilityState === "visible") {
-    if (!intent.value) { return; }
+    if (!state.intent) { return; }
 
     // Background tabs that might miss the 'intent-submitted' event, so we need
     // to check if the intent has been confirmed when the tab becomes visible.
-    const { status } = await code.paymentIntents.getStatus({ intent: intent.value }); 
+    const { status } = await code.paymentIntents.getStatus({ intent: state.intent }); 
 
     if (status === 'confirmed') {
       onSuccess();
@@ -181,9 +199,9 @@ document.addEventListener("visibilitychange", async () => {
       @invoke="onInvoke" />
     
     <Teleport to="body">
-      <div v-if="open">
+      <div v-if="state.open">
         <IntentRequestModalMobile
-          v-if="mobile"
+          v-if="state.mobile"
           @channel-created="onChannelCreated"
           @intent-submitted="onSuccess"
           @client-rejected-payment="onCancel"
@@ -205,7 +223,7 @@ document.addEventListener("visibilitychange", async () => {
         />
       </div>
       <div v-else>
-        <PreloadIntentRequestModalMobile v-if="mobile" />
+        <PreloadIntentRequestModalMobile v-if="state.mobile" />
         <PreloadIntentRequestModalDesktop v-else />
       </div>
     </Teleport>
diff --git a/packages/elements/src/components/flows/PageFlow.vue b/packages/elements/src/components/flows/PageFlow.vue
new file mode 100644
index 0000000..fd71f68
--- /dev/null
+++ b/packages/elements/src/components/flows/PageFlow.vue
@@ -0,0 +1,206 @@
+<script setup lang="ts">
+import { Ref, inject, nextTick, onMounted, reactive, ref } from 'vue';
+import { 
+  ElementEventEmitter, 
+  ElementOptions, 
+  ExternalPlatformOptions, 
+  LoginRequestIntent, 
+  LoginRequestOptions, 
+  PaymentRequestIntent,
+  PaymentRequestOptions,
+  TipRequestIntent
+} from '@code-wallet/intents';
+import { EventChannel, InternalEvents } from '@code-wallet/events';
+import * as code from "@code-wallet/client";
+
+import { 
+  IntentRequestModalDesktop,
+  IntentRequestModalMobile,
+} from '../elements';
+
+import { isMobileDevice } from '../../utils/user-agent';
+import { getURLParam } from '../../utils/url';
+import { sleep } from '../../utils/delay';
+
+const fadeDuration = 500; // Animation duration in milliseconds (we use this to delay emitting events)
+
+const options = inject<ElementOptions>('options');
+const sdkEmit = inject<ElementEventEmitter>('emit', async () => false);
+const channel : Ref<EventChannel<InternalEvents> | null> = ref(null);
+
+const state = reactive({
+  intent: null as string | null,
+  mobile: isMobileDevice(),
+});
+
+// We're going to try to guess these values later, so we have to keep track of
+// whether or not the user has provided them before we do that.
+const userProvidedSuccessUrl = options?.confirmParams?.success?.url !== undefined;
+const userProvidedCancelUrl = options?.confirmParams?.cancel?.url !== undefined;
+
+function canMount() {
+  if (options) {
+    switch (options.mode) {
+      case 'login':
+        return options.login && options.login.domain;
+      case 'payment':
+        return options.amount && options.currency && options.destination;
+      case 'tip':
+        return options.platform && options.platform.name && options.platform.username;
+      default:
+        return false;
+    }
+  }
+
+  return false;
+}
+
+function onChannelCreated(val: EventChannel<InternalEvents>) {
+  channel.value = val;
+}
+
+async function onSuccess() {
+
+  // Ensure that the modal is fully closed before emitting events
+  await sleep(fadeDuration); 
+
+  const url = options?.confirmParams?.success?.url;
+  const preventAction = await sdkEmit('success', { url, options, intent: state.intent });
+  if (preventAction) {
+    return;
+  }
+
+  if (userProvidedSuccessUrl) {
+    window.location.href = url!;
+  }
+}
+
+async function onCancel() {
+
+  // Ensure that the modal is fully closed before emitting events
+  await sleep(fadeDuration);
+
+  const url = options?.confirmParams?.cancel?.url;
+  const preventAction = await sdkEmit('cancel', { url, options, intent: state.intent });
+  if (preventAction) {
+    return;
+  }
+
+  if (userProvidedCancelUrl) {
+    window.location.href = url!;
+  }
+}
+
+async function onError(err: any) {
+  // Let the user know that something went wrong
+  await sdkEmit('error', { message: `${err}` });
+}
+
+async function onStreamTimeout() {
+  await onError('stream_timed_out');
+}
+
+async function onStreamClosed() {
+  await onError('stream_closed');
+}
+
+onMounted(async () => {
+  if (!options) { throw new Error('Missing options'); }
+  if (!channel.value) { throw new Error('Missing channel'); }
+
+  // Let the iframe know that we're about to invoke user code
+  channel.value.emit('beforeInvoke');
+
+  // Invoke user code, if the user returns true, we'll cancel the invocation
+  const preventAction = await sdkEmit('invoke');
+  if (preventAction) {
+    return;
+  }
+
+  // Get the intent id from the receiving app or iframe
+  switch (options.mode) {
+    case 'login':
+      state.intent = new LoginRequestIntent(options as ElementOptions & LoginRequestOptions).getIntentId();
+      break;
+    case 'payment':
+      state.intent = new PaymentRequestIntent(options as ElementOptions & PaymentRequestOptions).getIntentId();
+      break;
+    case 'tip':
+      state.intent = new TipRequestIntent(options as ElementOptions & ExternalPlatformOptions).getIntentId();
+      break;
+    default:
+      throw new Error('Invalid mode');
+  }
+
+  const variables = {
+    INTENT_ID: state.intent,
+    // ...
+  }
+
+  // If the user doesn't provide a success or cancel url, we'll fallback to the
+  // current url (if possible). Additionally, we'll replace any variables in the
+  // url. For example, if the user provides a success url of
+  // https://example.com/success?intent_id={{INTENT_ID}}, we'll replace
+  // {{INTENT_ID}} with the actual intent id.
+  const fallback = window.location.href;
+  options.confirmParams = {
+    success: getURLParam(options.confirmParams?.success, fallback, variables),
+    cancel: getURLParam(options.confirmParams?.cancel, fallback, variables),
+  };
+
+  // Wait for the options to be injected into the iframe
+  await nextTick();
+
+  // It is possible that the user has already closed the modal before we get to
+  // this point, so we need to check if the modal is still open.
+  if (!channel.value) { throw new Error('Missing channel'); }
+
+  // Let the iframe know that we're done invoking user code
+  channel.value.emit('afterInvoke');
+});
+
+// Add an event listener for the 'visibilitychange' event
+document.addEventListener("visibilitychange", async () => {
+  if (document.visibilityState === "visible") {
+    if (!state.intent) { return; }
+
+    // Background tabs that might miss the 'intent-submitted' event, so we need
+    // to check if the intent has been confirmed when the tab becomes visible.
+    const { status } = await code.paymentIntents.getStatus({ intent: state.intent }); 
+
+    if (status === 'confirmed') {
+      onSuccess();
+    }
+  }
+});
+</script>
+
+<template>
+  <template v-if="canMount()">
+    <Teleport to="body">
+      <IntentRequestModalMobile
+        v-if="state.mobile"
+        :as-page="true"
+        @channel-created="onChannelCreated"
+        @intent-submitted="onSuccess"
+        @client-rejected-payment="onCancel"
+        @client-rejected-login="onCancel"
+        @error="onError"
+        @stream-timeout="onStreamTimeout"
+        @stream-closed="onStreamClosed"
+      />
+
+      <IntentRequestModalDesktop
+        v-else
+        :as-page="true"
+        @channel-created="onChannelCreated"
+        @intent-submitted="onSuccess"
+        @client-rejected-payment="onCancel"
+        @client-rejected-login="onCancel"
+        @error="onError"
+        @stream-timeout="onStreamTimeout"
+        @stream-closed="onStreamClosed"
+      />
+    </Teleport>
+  </template>
+</template>
diff --git a/packages/elements/src/components/flows/index.ts b/packages/elements/src/components/flows/index.ts
deleted file mode 100644
index 6e91e08..0000000
--- a/packages/elements/src/components/flows/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as ButtonFlow } from './ButtonFlow.vue'
\ No newline at end of file
diff --git a/packages/elements/src/components/index.ts b/packages/elements/src/components/index.ts
index 52f06bd..1a666de 100644
--- a/packages/elements/src/components/index.ts
+++ b/packages/elements/src/components/index.ts
@@ -1,2 +1,4 @@
 export * from './elements';
-export * from './flows';
\ No newline at end of file
+
+export { default as ButtonFlow } from './flows/ButtonFlow.vue';
+export { default as PageFlow } from './flows/PageFlow.vue';
\ No newline at end of file
diff --git a/packages/elements/src/components/preload/PreloadIntentRequestModalDesktop.vue b/packages/elements/src/components/preload/PreloadIntentRequestModalDesktop.vue
index b3d08be..f128a36 100644
--- a/packages/elements/src/components/preload/PreloadIntentRequestModalDesktop.vue
+++ b/packages/elements/src/components/preload/PreloadIntentRequestModalDesktop.vue
@@ -3,10 +3,15 @@
     import { useConfig } from '../../config';
     import { inject, ref } from 'vue';
 
+    const props = defineProps<{
+        asPage?: boolean,
+    }>();
+
     const config = useConfig();
     const options = inject<ElementOptions>('options');
     const mode = options?.mode ?? 'payment';
-    const url = `${config.codeSdk()}/${mode}-request-modal-desktop/#/preload/p=${encode(options)}`;
+    const kind = props.asPage ? 'page' : 'modal';
+    const url = `${config.codeSdk()}/${mode}-request-${kind}-desktop/#/preload/p=${encode(options)}`;
     const el = ref<HTMLIFrameElement | null>(null);
 
     function getStyle() : { [key:string]: string } {
diff --git a/packages/elements/src/components/preload/PreloadIntentRequestModalMobile.vue b/packages/elements/src/components/preload/PreloadIntentRequestModalMobile.vue
index 5757005..09b1897 100644
--- a/packages/elements/src/components/preload/PreloadIntentRequestModalMobile.vue
+++ b/packages/elements/src/components/preload/PreloadIntentRequestModalMobile.vue
@@ -3,10 +3,15 @@
     import { useConfig } from '../../config';
     import { inject, ref } from 'vue';
 
+    const props = defineProps<{
+        asPage?: boolean,
+    }>();
+
     const config = useConfig();
     const options = inject<ElementOptions>('options');
     const mode = options?.mode ?? 'payment';
-    const url = `${config.codeSdk()}/${mode}-request-modal-mobile/#/preload/p=${encode(options)}`;
+    const kind = props.asPage ? 'page' : 'modal';
+    const url = `${config.codeSdk()}/${mode}-request-${kind}-mobile/#/preload/p=${encode(options)}`;
     const el = ref<HTMLIFrameElement | null>(null);
 
     function getStyle() : { [key:string]: string } {
diff --git a/packages/elements/src/elements.ts b/packages/elements/src/elements.ts
index 9b5ff75..d9f7af5 100644
--- a/packages/elements/src/elements.ts
+++ b/packages/elements/src/elements.ts
@@ -1,5 +1,4 @@
 import { App as VueApp, createApp, reactive } from 'vue';
-
 import { 
     ElementEventEmitter, 
     ElementEvents, 
@@ -9,10 +8,11 @@ import {
     validateElementOptions
 } from '@code-wallet/intents';
 
+import { withoutReactivity } from './utils/state';
 import { ErrUnknownElementType } from './errors';
 import { 
     ButtonFlow,
-    IntentRequestModalDesktop,
+    PageFlow,
 } from './components';
 
 const defaultMode = 'payment';
@@ -35,7 +35,7 @@ export interface CodeElement {
 /**
  * Abstract class representing a general element with common functionalities.
  */
-abstract class AbstractElement implements CodeElement {
+abstract class BaseElement implements CodeElement {
     listeners: { event: string, callback: (args: any) => Promise<boolean | void> }[];
     intent: ElementOptions;
     app: VueApp<any>;
@@ -152,20 +152,10 @@ abstract class AbstractElement implements CodeElement {
     }
 }
 
-/**
- * Utility function to create a deep clone of the object without Vue's reactivity system.
- * @param obj - The object to process.
- * @returns A deep clone of the object without reactivity.
- */
-function withoutReactivity(obj?: unknown) {
-    if (typeof obj !== 'object') { return obj; }
-    return JSON.parse(JSON.stringify(obj));
-}
-
 /**
  * Concrete class representing a specialized button element.
  */
-class CodeButton extends AbstractElement {
+class CodeButton extends BaseElement {
     /**
      * Constructs a new CodeButton with specific options.
      * @param options - Partial element options.
@@ -176,15 +166,15 @@ class CodeButton extends AbstractElement {
 }
 
 /**
- * Concrete class representing a specialized card element.
+ * Concrete class representing a specialized page element.
  */
-class CodeCard extends AbstractElement {
+class CodePage extends BaseElement {
     /**
-     * Constructs a new CodeCard with specific options.
+     * Constructs a new CodePage with specific options.
      * @param options - Partial element options.
      */
     constructor(options: Partial<ElementOptions>) {
-        super(options, createApp(IntentRequestModalDesktop));
+        super(options, createApp(PageFlow));
     }
 }
 
@@ -198,12 +188,17 @@ const elements = {
      * @param options - The options for the element.
      * @returns An object containing the newly created element.
      */
-    create: (type: ElementType, options: Omit<ElementOptions, 'signers'>): { button?: CodeElement, card?: CodeElement } => {
+    create: (type: ElementType, options: Omit<ElementOptions, 'signers'>): { 
+        button?: CodeElement, 
+        page?: CodeElement,
+    } => {
         switch (type) {
             case 'button':
                 return { button: new CodeButton(options) };
+            case 'page':
+                return { page: new CodePage(options) };
             case 'card':
-                return { card: new CodeCard(options) };
+                throw new Error('Card elements are not yet supported.');
             default:
                 throw ErrUnknownElementType(type);
         }
diff --git a/packages/elements/src/utils/delay.ts b/packages/elements/src/utils/delay.ts
new file mode 100644
index 0000000..dc27eb4
--- /dev/null
+++ b/packages/elements/src/utils/delay.ts
@@ -0,0 +1,5 @@
+const sleep = (ms:number) => new Promise(resolve => setTimeout(resolve, ms));
+
+export {
+    sleep
+}
\ No newline at end of file
diff --git a/packages/elements/src/utils/state.ts b/packages/elements/src/utils/state.ts
new file mode 100644
index 0000000..2c1d192
--- /dev/null
+++ b/packages/elements/src/utils/state.ts
@@ -0,0 +1,11 @@
+/**
+ * Utility function to create a deep clone of the object without Vue's reactivity system.
+ * @param obj - The object to process.
+ * @returns A deep clone of the object without reactivity.
+ */
+function withoutReactivity(obj?: unknown) {
+    if (typeof obj !== 'object') { return obj; }
+    return JSON.parse(JSON.stringify(obj));
+}
+
+export { withoutReactivity };
\ No newline at end of file
diff --git a/packages/intents/package.json b/packages/intents/package.json
index 21e531e..d05c5a8 100644
--- a/packages/intents/package.json
+++ b/packages/intents/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@code-wallet/intents",
-    "version": "1.0.1",
+    "version": "1.0.2",
     "license": "MIT",
     "repository": {
         "type": "git",
@@ -26,7 +26,7 @@
         "@code-wallet/rpc": "^1.3.1",
         "@code-wallet/keys": "^1.0.0",
         "@code-wallet/currency": "^1.0.0",
-        "@code-wallet/kikcode": "^1.0.0",
+        "@code-wallet/kikcode": "^1.0.5",
         "@noble/hashes": "^1.3.0",
         "bs58": "^5.0.0",
         "buffer": "6.0.3"
diff --git a/packages/intents/src/errors.ts b/packages/intents/src/errors.ts
index 49c77ae..f4a4afe 100644
--- a/packages/intents/src/errors.ts
+++ b/packages/intents/src/errors.ts
@@ -18,6 +18,9 @@ const ErrLoginIPNotSupported = () => new Error("login IP addresses are not suppo
 const ErrLoginLocalhostNotSupported = () => new Error("login localhost is not supported");
 const ErrLoginPortsNotSupported = () => new Error("login ports are not supported");
 const ErrLoginExpectedDomainName = () => new Error("login expected domain name but received a path");
+const ErrPlatformRequired = () => new Error("platform is required");
+const ErrExpectedPlatformName = () => new Error("expected platform name");
+const ErrExpectedUsername = () => new Error("expected username");
 
 export {
     ErrNotImplemented,
@@ -40,4 +43,7 @@ export {
     ErrLoginLocalhostNotSupported,
     ErrLoginPortsNotSupported,
     ErrLoginExpectedDomainName,
+    ErrPlatformRequired,
+    ErrExpectedPlatformName,
+    ErrExpectedUsername,
 };
diff --git a/packages/intents/src/intents/AbstractIntent.ts b/packages/intents/src/intents/BaseIntent.ts
similarity index 71%
rename from packages/intents/src/intents/AbstractIntent.ts
rename to packages/intents/src/intents/BaseIntent.ts
index 2794094..7c03414 100644
--- a/packages/intents/src/intents/AbstractIntent.ts
+++ b/packages/intents/src/intents/BaseIntent.ts
@@ -3,14 +3,14 @@ import { Keypair } from '@code-wallet/keys';
 import { CodePayload } from '@code-wallet/kikcode';
 
 import { ElementOptions } from '../options';
-import { Intent, SignedIntent } from '../types';
+import { Intent, IntentWithMessage } from '../types';
 import { IdempotencyKey } from '../keys/idempotency';
 import { generateRendezvousKeypair } from '../keys/rendezvous';
 
 /**
  * An abstract class for an intent that can be created and signed.
  */
-abstract class AbstractIntent implements Intent {
+abstract class BaseIntent implements Intent {
     options: ElementOptions;
     nonce: IdempotencyKey;
 
@@ -27,7 +27,7 @@ abstract class AbstractIntent implements Intent {
             ...opt,
         };
 
-        this.init();
+        this.init(opt);
         this.validate();
 
         // Create an 11 byte buffer from idempotencyKey if provided, otherwise generate a random nonce
@@ -43,28 +43,10 @@ abstract class AbstractIntent implements Intent {
         this.rendezvousKeypair = generateRendezvousKeypair(this.rendezvousPayload)
     }
 
-    abstract init(): void;
+    abstract init(opt: ElementOptions): void;
     abstract toPayload(): CodePayload;
     abstract validate(): void;
-    abstract toProto(): proto.Message;
-    abstract sign(): SignedIntent; 
-
-    /**
-     * Constructs a SendMessageRequest message to be sent to the Code Sequencer.
-     */
-    async getSendMessageRequestProto() {
-        const { signature, envelope } = this.sign();
-
-        return new proto.SendMessageRequest({
-            message: envelope,
-            rendezvousKey: {
-                value: this.rendezvousKeypair.getPublicKey().value,
-            },
-            signature: {
-                value: signature,
-            }
-        });
-    }
+    abstract hasMessage(): boolean;
 
     /**
      * Retrieves the client secret.
@@ -85,6 +67,24 @@ abstract class AbstractIntent implements Intent {
     }
 }
 
+/**
+ * Constructs a SendMessageRequest message to be sent to the Code Sequencer.
+ */
+async function getSendMessageRequestProto(intent: IntentWithMessage) {
+    const { signature, envelope } = intent.sign();
+
+    return new proto.SendMessageRequest({
+        message: envelope,
+        rendezvousKey: {
+            value: intent.rendezvousKeypair.getPublicKey().value,
+        },
+        signature: {
+            value: signature,
+        }
+    });
+}
+
 export {
-    AbstractIntent,
+    BaseIntent,
+    getSendMessageRequestProto,
 }
\ No newline at end of file
diff --git a/packages/intents/src/intents/LoginRequestIntent.ts b/packages/intents/src/intents/LoginRequestIntent.ts
index d6ba573..9882fe8 100644
--- a/packages/intents/src/intents/LoginRequestIntent.ts
+++ b/packages/intents/src/intents/LoginRequestIntent.ts
@@ -2,8 +2,8 @@ import * as proto from '@code-wallet/rpc';
 import { Keypair, PublicKey } from '@code-wallet/keys';
 import { CodePayload, CodeKind } from '@code-wallet/kikcode';
 
-import { AbstractIntent } from './AbstractIntent';
-import { SignedIntent } from '../types';
+import { BaseIntent, getSendMessageRequestProto } from './BaseIntent';
+import { IntentWithMessage, SignedIntent } from '../types';
 import { ElementOptions, LoginRequestOptions } from '../options';
 import { 
     ErrLoginDomainRequired, 
@@ -16,15 +16,15 @@ import { validateElementOptions } from '../utils/validate';
 /**
  * Represents a login request and provides methods to construct, validate, and sign the request.
  */
-class LoginRequestIntent extends AbstractIntent {
+class LoginRequestIntent extends BaseIntent implements IntentWithMessage {
     domain: string;
     verifier: PublicKey;
     signer?: Keypair;
 
     /**
-     * Constructs a new PaymentRequestIntent instance.
+     * Constructs a new LoginRequestIntent instance.
      * 
-     * @param opt - The payment request options.
+     * @param opt - The login request options.
      */
     constructor(opt: LoginRequestOptions & ElementOptions) {
         super({
@@ -43,6 +43,10 @@ class LoginRequestIntent extends AbstractIntent {
         }
     }
 
+    hasMessage(): boolean {
+        return true;
+    }
+
     init(): void {
         // noop
     }
@@ -133,6 +137,10 @@ class LoginRequestIntent extends AbstractIntent {
             signature,
         }
     }
+
+    getSendMessageRequestProto(): Promise<proto.SendMessageRequest> {
+        return getSendMessageRequestProto(this);
+    }
 }
 
 export {
diff --git a/packages/intents/src/intents/PaymentRequestIntent.ts b/packages/intents/src/intents/PaymentRequestIntent.ts
index 8409520..6338732 100644
--- a/packages/intents/src/intents/PaymentRequestIntent.ts
+++ b/packages/intents/src/intents/PaymentRequestIntent.ts
@@ -3,8 +3,8 @@ import { PublicKey } from '@code-wallet/keys';
 import { CurrencyCode, Kin } from '@code-wallet/currency';
 import { CodePayload, CodeKind } from '@code-wallet/kikcode';
 
-import { AbstractIntent } from './AbstractIntent';
-import { SignedIntent } from '../types';
+import { BaseIntent, getSendMessageRequestProto } from './BaseIntent';
+import { IntentWithMessage, SignedIntent } from '../types';
 import { ElementOptions, PaymentRequestOptions, } from '../options';
 import { 
     ErrAmountRequired, 
@@ -17,7 +17,7 @@ import { validateElementOptions } from '../utils/validate';
 /**
  * Represents a payment request and provides methods to construct, validate, and sign the request.
  */
-class PaymentRequestIntent extends AbstractIntent {
+class PaymentRequestIntent extends BaseIntent implements IntentWithMessage {
     convertedAmount: number | undefined;
 
     /**
@@ -36,6 +36,10 @@ class PaymentRequestIntent extends AbstractIntent {
         });
     }
 
+    hasMessage(): boolean {
+        return true;
+    }
+
     init(): void {
         // We need to be very careful with floating point numbers. Ideally, we
         // would use a whole number and remainder as two bigints, or even a
@@ -187,6 +191,10 @@ class PaymentRequestIntent extends AbstractIntent {
             signature,
         }
     }
+
+    getSendMessageRequestProto(): Promise<proto.SendMessageRequest> {
+        return getSendMessageRequestProto(this);
+    }
 }
 
 export {
diff --git a/packages/intents/src/intents/TipRequestIntent.ts b/packages/intents/src/intents/TipRequestIntent.ts
new file mode 100644
index 0000000..f85c83f
--- /dev/null
+++ b/packages/intents/src/intents/TipRequestIntent.ts
@@ -0,0 +1,75 @@
+import { CodePayload, CodeKind } from '@code-wallet/kikcode';
+
+import { BaseIntent } from './BaseIntent';
+import { ElementOptions, ExternalPlatformOptions } from '../options';
+import { 
+    ErrExpectedPlatformName,
+    ErrExpectedUsername,
+    ErrPlatformRequired, 
+} from '../errors';
+import { validateElementOptions } from '../utils/validate';
+
+/**
+ * Represents a login request and provides methods to construct, validate, and sign the request.
+ */
+class TipRequestIntent extends BaseIntent {
+    username: string = '';
+    platform: string = '';
+
+    /**
+     * Constructs a new TipRequestIntent instance.
+     * 
+     * @param opt - The tip request options.
+     */
+    constructor(opt: ExternalPlatformOptions & ElementOptions) {
+        super({
+            ...opt,
+            mode: 'tip',
+        });
+    }
+
+    hasMessage(): boolean {
+        return false;
+    }
+
+    init(opt: ElementOptions): void {
+        const { username, name } = (opt as ExternalPlatformOptions).platform;
+
+        this.username = username;
+        this.platform = name;
+    }
+
+    toPayload(): CodePayload {
+        // See payload encoding for CodeKind.Tip
+        const kind = CodeKind.Tip;
+        const username = this.username;
+
+        // Create a rendezvous payload and derive a keypair from it
+        return new CodePayload({ kind, username, });
+    }
+
+    /**
+     * Validates the payment request options.
+     */
+    validate() {
+        validateElementOptions(this.options);
+
+        if (!this.options.platform) {
+            throw ErrPlatformRequired();
+        }
+
+        if (!this.options.platform.name) {
+            throw ErrExpectedPlatformName();
+        }
+
+        if (!this.options.platform.username) {
+            throw ErrExpectedUsername();
+        }
+
+    }
+
+}
+
+export {
+    TipRequestIntent,
+}
\ No newline at end of file
diff --git a/packages/intents/src/intents/index.ts b/packages/intents/src/intents/index.ts
index 2f17fd2..3d6f084 100644
--- a/packages/intents/src/intents/index.ts
+++ b/packages/intents/src/intents/index.ts
@@ -1,3 +1,4 @@
 export * from './PaymentRequestIntent';
 export * from './PaymentRequestWithLoginIntent';
-export * from './LoginRequestIntent';
\ No newline at end of file
+export * from './LoginRequestIntent';
+export * from './TipRequestIntent';
\ No newline at end of file
diff --git a/packages/intents/src/options.ts b/packages/intents/src/options.ts
index be037fd..c0bc3cd 100644
--- a/packages/intents/src/options.ts
+++ b/packages/intents/src/options.ts
@@ -4,12 +4,12 @@ import { Keypair } from '@code-wallet/keys';
 /**
  * The mode of the intent.
  */
-export type IntentType = 'payment' | 'login';
+export type IntentType = 'payment' | 'login' | 'tip';
 
 /**
  * Represents the possible types of elements.
  */
-export type ElementType = 'button' | 'card';
+export type ElementType = 'button' | 'page' | 'card';
 
 /**
  * Describes the appearance themes for the element.
@@ -117,6 +117,16 @@ export interface LoginRequestOptions {
     };
 }
 
+/**
+ * Defines the options needed for external platform integrations.
+ */
+export interface ExternalPlatformOptions {
+    platform: {
+        name: 'twitter', // At the moment, only Twitter is supported.
+        username: string;
+    }
+}
+
 /**
  * Describes the locale options for the element.
  */
@@ -141,6 +151,7 @@ export type ElementOptions = Partial<IntentOptions> &
     Partial<IntentSigners> &
     Partial<PaymentRequestOptions> & 
     Partial<LoginRequestOptions> &
+    Partial<ExternalPlatformOptions> &
     Partial<LocaleOptions> & 
     Partial<AppearanceOptions> & 
     Partial<WebhookParams> &
diff --git a/packages/intents/src/types.ts b/packages/intents/src/types.ts
index 46b87e2..8147c74 100644
--- a/packages/intents/src/types.ts
+++ b/packages/intents/src/types.ts
@@ -5,7 +5,7 @@ import { ElementOptions } from './options';
 import { IdempotencyKey } from './keys/idempotency';
 
 /**
- * An interface for an intent that can be created and signed.
+ * An interface for an intent that might have a message to send to the Code Sequencer, but not necessarily. 
  */
 export interface Intent {
     options: ElementOptions;
@@ -18,7 +18,29 @@ export interface Intent {
      * Validate the details of this intent, and throw an error if they're invalid.
      */
     validate(): void;
+
+    /**
+     * Whether this intent has a message to send to the Code Sequencer.
+     */
+    hasMessage(): boolean;
  
+    /**
+     * Get the client secret for this intent, which can be used to create linked browser elements. For example, the "Pay with Code" button.
+     * 
+     * @returns {string} The client secret for this intent.
+     */
+    getClientSecret(): string;
+
+    /**
+     * Get the intent ID for this intent, which can be used to create linked browser elements or request status.
+     */
+    getIntentId(): string;
+}
+
+/**
+ * An interface for an object that can be serialized into a message to send to the Code Sequencer.
+ */
+export interface WithMessage {
     /**
      * Serialize this intent into a minimal message for sending to the Code Sequencer.
      */
@@ -37,19 +59,12 @@ export interface Intent {
      * @returns {SignedIntent} The signed intent.
      */
     sign(): SignedIntent;
- 
-    /**
-     * Get the client secret for this intent, which can be used to create linked browser elements. For example, the "Pay with Code" button.
-     * 
-     * @returns {string} The client secret for this intent.
-     */
-    getClientSecret(): string;
-
-    /**
-     * Get the intent ID for this intent, which can be used to create linked browser elements or request status.
-     */
-    getIntentId(): string;
 }
+
+/**
+ * An intent that has a message to send to the Code Sequencer.
+ */
+export type IntentWithMessage = Intent & WithMessage;
  
 /**
  * An object containing a signed intent and its signature.
diff --git a/packages/intents/src/utils/validate.ts b/packages/intents/src/utils/validate.ts
index 6e7ad19..d2ea1bf 100644
--- a/packages/intents/src/utils/validate.ts
+++ b/packages/intents/src/utils/validate.ts
@@ -18,6 +18,9 @@ import {
     ErrLoginPortsNotSupported,
     ErrInvalidLoginDomain,
     ErrLoginExpectedDomainName,
+    ErrPlatformRequired,
+    ErrExpectedPlatformName,
+    ErrExpectedUsername,
 } from '../errors';
 
 /**
@@ -145,6 +148,28 @@ function validateLoginRequestOptions(intent: ElementOptions) {
     PublicKey.fromBase58(intent.login.verifier);
 }
 
+/**
+ * Validates the tip request options.
+ * 
+ * @param intent The options to validate.
+ * @throws {ErrPlatformRequired} If the `platform` property is undefined.
+ * @throws {ErrExpectedPlatformName} If the `platform.name` property is undefined.
+ * @throws {ErrExpectedUsername} If the `platform.username` property is undefined.
+ */
+function validateTipRequestOptions(intent: ElementOptions) {
+    if (intent.platform === undefined) {
+        throw ErrPlatformRequired();
+    }
+
+    if (intent.platform.name === undefined) {
+        throw ErrExpectedPlatformName();
+    }
+
+    if (intent.platform.username === undefined) {
+        throw ErrExpectedUsername();
+    }
+}
+
 /**
  * Validates the properties of the given `ElementOptions` for signers.
  */
@@ -185,6 +210,10 @@ function validateElementOptions(intent: ElementOptions) {
             if (intent.signers) {
                 validateSigners(intent);
             }
+            break;
+        case 'tip':
+            validateTipRequestOptions(intent);
+
             break;
         default:
             throw ErrInvalidMode();
diff --git a/packages/kikcode/package.json b/packages/kikcode/package.json
index 10519bb..3b3808c 100644
--- a/packages/kikcode/package.json
+++ b/packages/kikcode/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@code-wallet/kikcode",
-    "version": "1.0.4",
+    "version": "1.0.5",
     "license": "MIT",
     "repository": {
         "type": "git",
@@ -29,6 +29,7 @@
         "@types/chai": "^4.3.5",
         "@types/mocha": "^10.0.1",
         "@types/node": "^20.5.7",
+        "@noble/hashes": "^1.3.2",
         "chai": "^4.3.8",
         "ts-mocha": "^10.0.0",
         "ts-node": "^10.9.1",
diff --git a/packages/kikcode/src/errors.ts b/packages/kikcode/src/errors.ts
index d4f7efb..88b7be6 100644
--- a/packages/kikcode/src/errors.ts
+++ b/packages/kikcode/src/errors.ts
@@ -1,7 +1,11 @@
 const ErrInvalidSize = () => new Error("invalid size");
 const ErrInvalidValue = () => new Error("invalid value");
+const ErrInvalidUsername = () => new Error("invalid username");
+const ErrInvalidNonce = () => new Error("invalid nonce");
 
 export {
     ErrInvalidSize,
     ErrInvalidValue,
+    ErrInvalidUsername,
+    ErrInvalidNonce,
 };
diff --git a/packages/kikcode/src/payload.ts b/packages/kikcode/src/payload.ts
index 564aad5..0b4c172 100644
--- a/packages/kikcode/src/payload.ts
+++ b/packages/kikcode/src/payload.ts
@@ -1,12 +1,15 @@
+import { sha256 } from '@noble/hashes/sha256';
+import { bytesToBase64 } from './utils';
+
 import { 
     CurrencyCode,
     currencyCodeToIndex,
     indexToCurrencyCode,
     isValidCurrency, 
-    ErrInvalidCurrency
+    ErrInvalidCurrency,
 } from "@code-wallet/currency";
 
-import { ErrInvalidSize, ErrInvalidValue } from "./errors";
+import { ErrInvalidSize, ErrInvalidValue, ErrInvalidUsername, ErrInvalidNonce } from "./errors";
 import { CodeKind, CodePayloadOptions } from "./types";
 
 /**
@@ -15,9 +18,11 @@ import { CodeKind, CodePayloadOptions } from "./types";
  */
 class CodePayload {
     kind: CodeKind;
-    nonce: Uint8Array;
+
+    nonce?: Uint8Array;
     amount?: bigint;
     currency?: CurrencyCode;
+    username?: string;
 
     static readonly MAX_LENGTH: number = 20;
 
@@ -28,8 +33,9 @@ class CodePayload {
      */
     constructor(opt: CodePayloadOptions) {
         this.kind = opt.kind;
-        this.amount = opt.amount;
         this.nonce = opt.nonce;
+        this.amount = opt.amount;
+        this.username = opt.username;
         
         if (opt.currency && !isValidCurrency(opt.currency)) {
             throw ErrInvalidCurrency();
@@ -53,6 +59,10 @@ class CodePayload {
         return this.kind === CodeKind.RequestPaymentWithFeesSupport && this.currency != null && this.amount != null;
     }
 
+    private isTip(): this is this & { username: string } {
+        return this.kind === CodeKind.Tip && this.username != null;
+    }
+
     /**
      * Validates the payload, throwing an error if invalid.
      */
@@ -70,6 +80,20 @@ class CodePayload {
                 throw ErrInvalidValue();
             }
         }
+
+        if (this.kind === CodeKind.Tip) {
+            if (!this.username) {
+                throw ErrInvalidUsername();
+            }
+
+            if (this.username.length > 15) {
+                throw ErrInvalidUsername();
+            }
+        }
+
+        if (this.kind !== CodeKind.Tip && (!this.nonce || this.nonce.length !== 11)) {
+            throw ErrInvalidNonce();
+        }
     }
 
     /**
@@ -103,8 +127,42 @@ class CodePayload {
             }
         }
 
-        data.set(this.nonce, 9);
-        
+        if (this.isTip()) {
+            const usernameBuffer = new TextEncoder().encode(this.username);
+            const maxLength = 15;
+            const sanitizedUsername = usernameBuffer.slice(0, maxLength);
+            data.set(sanitizedUsername, 5);
+
+            const paddingRequired = maxLength - sanitizedUsername.length;
+            let padding = "";
+            if (paddingRequired > 0) {
+                padding = ".";
+            }
+
+            if (paddingRequired > 1) {
+                const hash = sha256(usernameBuffer);
+
+                // Buffer is not available in browser environment
+                // const encoded = Buffer.from(hash).toString('base64');
+                const encoded = bytesToBase64(hash);
+
+                padding = `${padding}${encoded.slice(0, paddingRequired - 1)}`;
+            }
+
+            if (padding.length > 0) {
+                //console.log(padding, padding.length, paddingRequired)
+                const paddingBuffer = new TextEncoder().encode(padding);
+                data.set(paddingBuffer, 5 + sanitizedUsername.length);
+            }
+
+            return data;
+        }
+
+        // for Cash, Gift Card, Logins, and Payment Request
+        if (this.nonce) {
+            data.set(this.nonce, 9);
+        }
+
         return data;
     }
 
@@ -120,12 +178,14 @@ class CodePayload {
         }
 
         const kind = data[0] as CodeKind;
-        let amount: bigint | undefined;
         let nonce: Uint8Array;
+
+        let amount: bigint | undefined;
         let currency: CurrencyCode | undefined;
+        let username: string | undefined;
 
         if (kind === CodeKind.RequestPayment || kind === CodeKind.RequestPaymentWithFeesSupport) {
-            // for Payment Request
+            // for Payment request
             const currencyIndex = data[1];
             currency = indexToCurrencyCode(currencyIndex);
             amount = data.slice(2, 9).reduce((acc, val, i) => acc + (BigInt(val) << BigInt(8 * i)), BigInt(0));
@@ -135,10 +195,22 @@ class CodePayload {
             // for Cash and Gift Card
             amount = data.slice(1, 9).reduce((acc, val, i) => acc + (BigInt(val) << BigInt(8 * i)), BigInt(0));
         }
+
+        if (kind === CodeKind.Tip) {
+            // for Tip request
+            username = new TextDecoder().decode(data.slice(5, 20)).split(".")[0];
+            return new CodePayload({ kind, username, nonce: new Uint8Array(11) });
+        }
         
         nonce = data.slice(9);
 
-        return new CodePayload({ kind, amount, currency, nonce });
+        return new CodePayload({ 
+            kind, 
+            nonce,
+            amount,
+            currency,
+            username,
+        });
     }
 }
 
diff --git a/packages/kikcode/src/types.ts b/packages/kikcode/src/types.ts
index 695cb24..3ce2dc0 100644
--- a/packages/kikcode/src/types.ts
+++ b/packages/kikcode/src/types.ts
@@ -1,12 +1,7 @@
 import { CurrencyCode } from '@code-wallet/currency';
 
 /*
-Scan Code Payload Format
-
-The payload is a 20-byte binary blob that contains the data for the scan code
-before it is encoded.
- 
-Layout 0: Cash
+ Layout 0: Cash
 
     0   1   2   3   4   5   6   7   8   9  10  11  12  13  14  15  16  17  18  19
     +---+---+---+---+---+---+---+---+---+---+---+---+---+---+---+---+---+---+---+---+
@@ -29,13 +24,11 @@ Layout 0: Cash
     This field is an 11-byte randomly-generated nonce. It should be regenerated
     each time a new payment is initiated.
 
-
-Layout 1: Gift Card
+ Layout 1: Gift Card
 
     Same as layout 0.
 
-
-Layout 2: Payment Request
+ Layout 2: Payment Request
 
     0   1   2   3   4   5   6   7   8   9  10  11  12  13  14  15  16  17  18  19
     +---+---+---+---+---+---+---+---+---+---+---+---+---+---+---+---+---+---+---+---+
@@ -55,13 +48,38 @@ Layout 2: Payment Request
 
     Fiat Amount (7 bytes)
 
-    This field indicates the number of quarks the payment is for. It should be
-    represented as a 64-bit unsigned integer.
+    This field indicates the fiat amount, denominated in `Currency` above. The amount
+    is an integer value calculated as follows: $5.00 x 100 = 500. The decimals are
+    offset by multiplying by 100 and encoding the integer result. When decoding, the
+    amount should be divided by 100 again to return the original value.
 
     Nonce (11 bytes)
 
     This field is an 11-byte randomly-generated nonce. It should be regenerated
     each time a new payment is initiated.
+
+ Layout 5: Tip
+
+    0   1   2   3   4   5   6   7   8   9  10  11  12  13  14  15  16  17  18  19
+    +---+---+---+---+---+---+---+---+---+---+---+---+---+---+---+---+---+---+---+---+
+    | T |     Flags     |             username                  | ... remainder (0) |
+    +---+---+---+---+---+---+---+---+---+---+---+---+---+---+---+---+---+---+---+---+
+
+    (T) Type (1 byte)
+
+    The first byte of the data in all Code scan codes is reserved for the scan
+    code type. This field indicates which type of scan code data is contained
+    in the scan code.
+
+    (F) Flags (4 bytes)
+
+    Optional flags may provide additional context on the type of username embedded in
+    the scan code.
+    
+    Username (15 bytes)
+
+    The username that uniquely represents a user's tip code. Cannot be longer than 15
+    bytes. Any additional space is represented by an empty string in (remainder).
 */
 
 /**
@@ -72,12 +90,14 @@ export enum CodeKind {
     GiftCard = 1,
     RequestPayment = 2,
     RequestLogin = 3,
-    RequestPaymentWithFeesSupport = 4
+    RequestPaymentWithFeesSupport = 4,
+    Tip = 5,
 }
 
 export interface CodePayloadOptions {
     kind: CodeKind;
-    nonce: Uint8Array;
+    nonce?: Uint8Array;
     amount?: bigint;
     currency?: CurrencyCode;
+    username?: string;
 }
\ No newline at end of file
diff --git a/packages/kikcode/src/utils.ts b/packages/kikcode/src/utils.ts
new file mode 100644
index 0000000..8c207b9
--- /dev/null
+++ b/packages/kikcode/src/utils.ts
@@ -0,0 +1,94 @@
+const base64abc = [
+  'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O',
+  'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', 'a', 'b', 'c', 'd',
+  'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's',
+  't', 'u', 'v', 'w', 'x', 'y', 'z', '0', '1', '2', '3', '4', '5', '6', '7',
+  '8', '9',
+  
+  // The following characters are based on the
+  // Buffer.from('').toString('base64') standard
+  '+', '/',
+]
+
+const base64codes = (() => {
+  const l = 256
+  const base64codes = new Uint8Array(l)
+  for (let i = 0; i < l; ++i) {
+    base64codes[i] = 255 // invalid character
+  }
+  base64abc.forEach((char, index) => {
+    base64codes[char.charCodeAt(0)] = index
+  })
+  base64codes['='.charCodeAt(0)] = 0 // ignored anyway, so we just need to prevent an error
+  return base64codes
+})()
+
+function getBase64Code(charCode: number) {
+  if (charCode >= base64codes.length) {
+    throw new Error('Unable to parse base64 string (code beyond length).')
+  }
+  const code = base64codes[charCode]!
+  if (code === 255) {
+    throw new Error('Unable to parse base64 string (invalid code).')
+  }
+  return code
+}
+
+export function bytesToBase64(bytes: Uint8Array) {
+  let result = '',
+    i,
+    l = bytes.length
+  for (i = 2; i < l; i += 3) {
+    result += base64abc[bytes[i - 2]! >> 2]
+    result += base64abc[((bytes[i - 2]! & 0x03) << 4) | (bytes[i - 1]! >> 4)]
+    result += base64abc[((bytes[i - 1]! & 0x0f) << 2) | (bytes[i]! >> 6)]
+    result += base64abc[bytes[i]! & 0x3f]
+  }
+  if (i === l + 1) {
+    // 1 octet yet to write
+    result += base64abc[bytes[i - 2]! >> 2]
+    result += base64abc[(bytes[i - 2]! & 0x03) << 4]
+    result += '=='
+  }
+  if (i === l) {
+    // 2 octets yet to write
+    result += base64abc[bytes[i - 2]! >> 2]
+    result += base64abc[((bytes[i - 2]! & 0x03) << 4) | (bytes[i - 1]! >> 4)]
+    result += base64abc[(bytes[i - 1]! & 0x0f) << 2]
+    result += '='
+  }
+  return result
+}
+
+export function base64ToBytes(str: string) {
+  if (str.length % 4 !== 0) {
+    throw new Error('Unable to parse base64 string (invalid length).')
+  }
+  const index = str.indexOf('=')
+  if (index !== -1 && index < str.length - 2) {
+    throw new Error('Unable to parse base64 string (octets).')
+  }
+  let missingOctets = str.endsWith('==') ? 2 : str.endsWith('=') ? 1 : 0,
+    n = str.length,
+    result = new Uint8Array(3 * (n / 4)),
+    buffer
+  for (let i = 0, j = 0; i < n; i += 4, j += 3) {
+    buffer =
+      (getBase64Code(str.charCodeAt(i)) << 18) |
+      (getBase64Code(str.charCodeAt(i + 1)) << 12) |
+      (getBase64Code(str.charCodeAt(i + 2)) << 6) |
+      getBase64Code(str.charCodeAt(i + 3))
+    result[j] = buffer >> 16
+    result[j + 1] = (buffer >> 8) & 0xff
+    result[j + 2] = buffer & 0xff
+  }
+  return result.subarray(0, result.length - missingOctets)
+}
+
+export function base64encode(str: string, encoder = new TextEncoder()) {
+  return bytesToBase64(encoder.encode(str))
+}
+
+export function base64decode(str: string, decoder = new TextDecoder()) {
+  return decoder.decode(base64ToBytes(str))
+}
\ No newline at end of file
diff --git a/packages/kikcode/test/encode.test.ts b/packages/kikcode/test/encode.test.ts
index fcad3fc..98bdf62 100644
--- a/packages/kikcode/test/encode.test.ts
+++ b/packages/kikcode/test/encode.test.ts
@@ -18,4 +18,31 @@ describe('payload encoding', () => {
     expect(key).to.deep.equal(decoded);
   });
 
+  it('should encode and decode a tip payload (no dot)', async () => {
+    const key = new Uint8Array([
+      0x05, 0x00, 0x00, 0x00, 0x00,
+      0x67, 0x65, 0x74, 0x63, 0x6f,
+      0x64, 0x65, 0x2e, 0x34, 0x56,
+      0x71, 0x2f, 0x72, 0x2b, 0x58,
+    ]);
+
+    const encoded = await encode(key);
+    const decoded = await decode(encoded);
+
+    expect(key).to.deep.equal(decoded);
+  });
+
+  it('should encode and decode a tip payload (with dot)', async () => {
+    const key = new Uint8Array([
+      0x05, 0x00, 0x00, 0x00, 0x00,
+      0x62, 0x6f, 0x62, 0x5f, 0x62,
+      0x65, 0x6e, 0x6e, 0x69, 0x6e,
+      0x67, 0x74, 0x6f, 0x6e, 0x2e,
+    ]);
+
+    const encoded = await encode(key);
+    const decoded = await decode(encoded);
+
+    expect(key).to.deep.equal(decoded);
+  });
 });
\ No newline at end of file
diff --git a/packages/kikcode/test/payload.test.ts b/packages/kikcode/test/payload.test.ts
index b87c8b6..852d2e9 100644
--- a/packages/kikcode/test/payload.test.ts
+++ b/packages/kikcode/test/payload.test.ts
@@ -35,6 +35,21 @@ describe('CodePayload', () => {
         0x07, 0x08, 0x09, 0x10, 0x11
     ])
 
+    const sampleTip = new Uint8Array([
+        0x05, 0x00, 0x00, 0x00, 0x00,
+        0x67, 0x65, 0x74, 0x63, 0x6f,
+        0x64, 0x65, 0x2e, 0x34, 0x56,
+        0x71, 0x2f, 0x72, 0x2b, 0x58,
+    ]);
+
+    const sampleTipDot = new Uint8Array([
+        0x05, 0x00, 0x00, 0x00, 0x00,
+        0x62, 0x6f, 0x62, 0x5f, 0x62,
+        0x65, 0x6e, 0x6e, 0x69, 0x6e,
+        0x67, 0x74, 0x6f, 0x6e, 0x2e,
+    ]);
+
+
     it('should create new payload from parameters', () => {
         const kind = CodeKind.Cash;
         const amount = BigInt(100);
@@ -170,4 +185,45 @@ describe('CodePayload', () => {
 
         expect(binaryData.length).to.equal(CodePayload.MAX_LENGTH);
     });
+
+    it('should encode standard username', () => {
+        
+        const payload = new CodePayload({
+            kind: CodeKind.Tip,
+            username: "getcode"
+        });
+        const encoded = payload.toBinary();
+
+        expect(encoded.toString()).to.eql(sampleTip.toString());
+    });
+
+    it('should encode single pad username', () => {
+        const payload = new CodePayload({
+            kind: CodeKind.Tip,
+            username: "bob_bennington"
+        });
+        const encoded = payload.toBinary();
+
+        expect(encoded.toString()).to.eql(sampleTipDot.toString());
+    });
+
+    it('should throw when username is too long', () => {
+        try {
+            new CodePayload({
+                kind: CodeKind.Tip,
+                username: "bob_benningtons"
+            });
+        }
+        catch (e) {
+            expect(e.message).to.equal(ErrInvalidValue().message);
+        }
+    });
+
+    it('should decode username', () => {
+        const payload = CodePayload.fromData(sampleTip);
+
+        expect(payload.kind).to.equal(CodeKind.Tip);
+        expect(payload.username).to.equal("getcode");
+        expect(payload.nonce).to.eql(new Uint8Array(11));
+    });
 });
\ No newline at end of file
diff --git a/packages/views/Makefile b/packages/views/Makefile
index b56f03c..973374b 100644
--- a/packages/views/Makefile
+++ b/packages/views/Makefile
@@ -16,16 +16,38 @@ copy-sdk:
 	@mkdir -p ./apps/dist/v1/elements/payment-request-button/
 	@mkdir -p ./apps/dist/v1/elements/payment-request-modal-desktop/
 	@mkdir -p ./apps/dist/v1/elements/payment-request-modal-mobile/
+	@mkdir -p ./apps/dist/v1/elements/payment-request-page-desktop/
+	@mkdir -p ./apps/dist/v1/elements/payment-request-page-mobile/
+
 	@cp -r ./apps/payment-request-button/dist/* ./apps/dist/v1/elements/payment-request-button/
 	@cp -r ./apps/payment-request-modal-desktop/dist/* ./apps/dist/v1/elements/payment-request-modal-desktop/
 	@cp -r ./apps/payment-request-modal-mobile/dist/* ./apps/dist/v1/elements/payment-request-modal-mobile/
+	@cp -r ./apps/payment-request-page-desktop/dist/* ./apps/dist/v1/elements/payment-request-page-desktop/
+	@cp -r ./apps/payment-request-page-mobile/dist/* ./apps/dist/v1/elements/payment-request-page-mobile/
 
 	@mkdir -p ./apps/dist/v1/elements/login-request-button/
 	@mkdir -p ./apps/dist/v1/elements/login-request-modal-desktop/
 	@mkdir -p ./apps/dist/v1/elements/login-request-modal-mobile/
+	@mkdir -p ./apps/dist/v1/elements/login-request-page-desktop/
+	@mkdir -p ./apps/dist/v1/elements/login-request-page-mobile/
+
 	@cp -r ./apps/login-request-button/dist/* ./apps/dist/v1/elements/login-request-button/
 	@cp -r ./apps/login-request-modal-desktop/dist/* ./apps/dist/v1/elements/login-request-modal-desktop/
 	@cp -r ./apps/login-request-modal-mobile/dist/* ./apps/dist/v1/elements/login-request-modal-mobile/
+	@cp -r ./apps/login-request-page-desktop/dist/* ./apps/dist/v1/elements/login-request-page-desktop/
+	@cp -r ./apps/login-request-page-mobile/dist/* ./apps/dist/v1/elements/login-request-page-mobile/
+
+	@mkdir -p ./apps/dist/v1/elements/tips-request-button/
+	@mkdir -p ./apps/dist/v1/elements/tips-request-modal-desktop/
+	@mkdir -p ./apps/dist/v1/elements/tips-request-modal-mobile/
+	@mkdir -p ./apps/dist/v1/elements/tips-request-page-desktop/
+	@mkdir -p ./apps/dist/v1/elements/tips-request-page-mobile/
+
+	@cp -r ./apps/tips-request-button/dist/* ./apps/dist/v1/elements/tips-request-button/
+	@cp -r ./apps/tips-request-modal-desktop/dist/* ./apps/dist/v1/elements/tips-request-modal-desktop/
+	@cp -r ./apps/tips-request-modal-mobile/dist/* ./apps/dist/v1/elements/tips-request-modal-mobile/
+	@cp -r ./apps/tips-request-page-desktop/dist/* ./apps/dist/v1/elements/tips-request-page-desktop/
+	@cp -r ./apps/tips-request-page-mobile/dist/* ./apps/dist/v1/elements/tips-request-page-mobile/
 
 .PHONY: build
 build: build-sdk copy-sdk
\ No newline at end of file
diff --git a/packages/views/apps/index.html b/packages/views/apps/index.html
index 0d6e3c7..699fb10 100644
--- a/packages/views/apps/index.html
+++ b/packages/views/apps/index.html
@@ -6,11 +6,24 @@
     <meta content="width=device-width, initial-scale=1" name="viewport">
   </head>
   <body class="">
+
     <iframe src="./payment-request-button/index.html"></iframe>
     <iframe src="./payment-request-modal-desktop/index.html"></iframe>
     <iframe src="./payment-request-modal-mobile/index.html"></iframe>
+    <iframe src="./payment-request-page-desktop/index.html"></iframe>
+    <iframe src="./payment-request-page-mobile/index.html"></iframe>
+
     <iframe src="./login-request-button/index.html"></iframe>
     <iframe src="./login-request-modal-desktop/index.html"></iframe>
     <iframe src="./login-request-modal-mobile/index.html"></iframe>
+    <iframe src="./login-request-page-desktop/index.html"></iframe>
+    <iframe src="./login-request-page-mobile/index.html"></iframe>
+
+    <iframe src="./tip-request-button/index.html"></iframe>
+    <iframe src="./tip-request-modal-desktop/index.html"></iframe>
+    <iframe src="./tip-request-modal-mobile/index.html"></iframe>
+    <iframe src="./tip-request-page-desktop/index.html"></iframe>
+    <iframe src="./tip-request-page-mobile/index.html"></iframe>
+
   </body>
 </html>
diff --git a/packages/views/apps/login-request-button/index.js b/packages/views/apps/login-request-button/index.js
index 3fd3a6d..56c627f 100644
--- a/packages/views/apps/login-request-button/index.js
+++ b/packages/views/apps/login-request-button/index.js
@@ -2,7 +2,7 @@ import { createApp } from 'vue'
 
 import App from './App.vue'
 import CodeApp from '../../src/index'
-import { routes } from '../../src/routes/login-request-button'
+import { routes } from '../../src/routes/buttons/login-request-button'
 
 import './style.css'
 
diff --git a/packages/views/apps/login-request-modal-desktop/index.js b/packages/views/apps/login-request-modal-desktop/index.js
index 5396c11..f7ee27d 100644
--- a/packages/views/apps/login-request-modal-desktop/index.js
+++ b/packages/views/apps/login-request-modal-desktop/index.js
@@ -2,7 +2,7 @@ import { createApp } from 'vue'
 
 import App from './App.vue'
 import CodeApp from '../../src/index'
-import { routes } from '../../src/routes/login-request-modal-desktop'
+import { routes } from '../../src/routes/modals/login-request-modal-desktop'
 
 import './style.css'
 
diff --git a/packages/views/apps/login-request-modal-desktop/login-request-modal-mobile/App.vue b/packages/views/apps/login-request-modal-desktop/login-request-modal-mobile/App.vue
new file mode 100644
index 0000000..d75d9b8
--- /dev/null
+++ b/packages/views/apps/login-request-modal-desktop/login-request-modal-mobile/App.vue
@@ -0,0 +1,13 @@
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  mounted() {
+  },
+});
+</script>
+
+<template>
+  <router-view></router-view>
+</template>
+
diff --git a/packages/views/apps/login-request-modal-desktop/login-request-modal-mobile/fonts/avenir/AvenirNextLTPro-Demi.otf b/packages/views/apps/login-request-modal-desktop/login-request-modal-mobile/fonts/avenir/AvenirNextLTPro-Demi.otf
new file mode 100644
index 0000000..2076a1f
Binary files /dev/null and b/packages/views/apps/login-request-modal-desktop/login-request-modal-mobile/fonts/avenir/AvenirNextLTPro-Demi.otf differ
diff --git a/packages/views/apps/login-request-modal-desktop/login-request-modal-mobile/fonts/avenir/AvenirNextLTPro-Medium.otf b/packages/views/apps/login-request-modal-desktop/login-request-modal-mobile/fonts/avenir/AvenirNextLTPro-Medium.otf
new file mode 100644
index 0000000..660511b
Binary files /dev/null and b/packages/views/apps/login-request-modal-desktop/login-request-modal-mobile/fonts/avenir/AvenirNextLTPro-Medium.otf differ
diff --git a/packages/views/apps/login-request-modal-desktop/login-request-modal-mobile/fonts/avenir/AvenirNextLTPro-Regular.otf b/packages/views/apps/login-request-modal-desktop/login-request-modal-mobile/fonts/avenir/AvenirNextLTPro-Regular.otf
new file mode 100644
index 0000000..0ae7cee
Binary files /dev/null and b/packages/views/apps/login-request-modal-desktop/login-request-modal-mobile/fonts/avenir/AvenirNextLTPro-Regular.otf differ
diff --git a/packages/views/apps/login-request-modal-desktop/login-request-modal-mobile/fonts/manrope/Manrope-Bold.ttf b/packages/views/apps/login-request-modal-desktop/login-request-modal-mobile/fonts/manrope/Manrope-Bold.ttf
new file mode 100644
index 0000000..8bbf0bd
Binary files /dev/null and b/packages/views/apps/login-request-modal-desktop/login-request-modal-mobile/fonts/manrope/Manrope-Bold.ttf differ
diff --git a/packages/views/apps/login-request-modal-desktop/login-request-modal-mobile/fonts/manrope/Manrope-ExtraBold.ttf b/packages/views/apps/login-request-modal-desktop/login-request-modal-mobile/fonts/manrope/Manrope-ExtraBold.ttf
new file mode 100644
index 0000000..3f68dff
Binary files /dev/null and b/packages/views/apps/login-request-modal-desktop/login-request-modal-mobile/fonts/manrope/Manrope-ExtraBold.ttf differ
diff --git a/packages/views/apps/login-request-modal-desktop/login-request-modal-mobile/fonts/manrope/Manrope-ExtraLight.ttf b/packages/views/apps/login-request-modal-desktop/login-request-modal-mobile/fonts/manrope/Manrope-ExtraLight.ttf
new file mode 100644
index 0000000..9d21d77
Binary files /dev/null and b/packages/views/apps/login-request-modal-desktop/login-request-modal-mobile/fonts/manrope/Manrope-ExtraLight.ttf differ
diff --git a/packages/views/apps/login-request-modal-desktop/login-request-modal-mobile/fonts/manrope/Manrope-Light.ttf b/packages/views/apps/login-request-modal-desktop/login-request-modal-mobile/fonts/manrope/Manrope-Light.ttf
new file mode 100644
index 0000000..f255257
Binary files /dev/null and b/packages/views/apps/login-request-modal-desktop/login-request-modal-mobile/fonts/manrope/Manrope-Light.ttf differ
diff --git a/packages/views/apps/login-request-modal-desktop/login-request-modal-mobile/fonts/manrope/Manrope-Medium.ttf b/packages/views/apps/login-request-modal-desktop/login-request-modal-mobile/fonts/manrope/Manrope-Medium.ttf
new file mode 100644
index 0000000..c73d774
Binary files /dev/null and b/packages/views/apps/login-request-modal-desktop/login-request-modal-mobile/fonts/manrope/Manrope-Medium.ttf differ
diff --git a/packages/views/apps/login-request-modal-desktop/login-request-modal-mobile/fonts/manrope/Manrope-Regular.ttf b/packages/views/apps/login-request-modal-desktop/login-request-modal-mobile/fonts/manrope/Manrope-Regular.ttf
new file mode 100644
index 0000000..c02b01b
Binary files /dev/null and b/packages/views/apps/login-request-modal-desktop/login-request-modal-mobile/fonts/manrope/Manrope-Regular.ttf differ
diff --git a/packages/views/apps/login-request-modal-desktop/login-request-modal-mobile/fonts/manrope/Manrope-SemiBold.ttf b/packages/views/apps/login-request-modal-desktop/login-request-modal-mobile/fonts/manrope/Manrope-SemiBold.ttf
new file mode 100644
index 0000000..30ee031
Binary files /dev/null and b/packages/views/apps/login-request-modal-desktop/login-request-modal-mobile/fonts/manrope/Manrope-SemiBold.ttf differ
diff --git a/packages/views/apps/login-request-modal-desktop/login-request-modal-mobile/index.html b/packages/views/apps/login-request-modal-desktop/login-request-modal-mobile/index.html
new file mode 100644
index 0000000..40b9874
--- /dev/null
+++ b/packages/views/apps/login-request-modal-desktop/login-request-modal-mobile/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en" style="background: transparent; color-scheme: light;">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Code SDK - Card</title>
+    <meta content="width=device-width, initial-scale=1" name="viewport">
+  </head>
+  <body class="">
+    <div id="app"></div>
+
+    <script>
+      // Work-around node polyfills missing in Vite.
+      window.global = window;
+    </script>
+
+    <script type="module">
+      // Polyfill for Buffer, required by some dependencies
+      import { Buffer } from "buffer";
+      window.Buffer = Buffer;
+    </script>
+
+    <script type="module" src="./index.js"></script>
+  </body>
+</html>
diff --git a/packages/views/apps/login-request-modal-desktop/login-request-modal-mobile/index.js b/packages/views/apps/login-request-modal-desktop/login-request-modal-mobile/index.js
new file mode 100644
index 0000000..f700a4b
--- /dev/null
+++ b/packages/views/apps/login-request-modal-desktop/login-request-modal-mobile/index.js
@@ -0,0 +1,17 @@
+import { createApp } from 'vue'
+
+import App from './App.vue'
+import CodeApp from '../../src/index'
+import { routes } from '../../src/routes/modals/login-request-modal-mobile'
+
+import './style.css'
+
+const opt = {
+  wsPath: process.env.WS_PATH,
+  httpPath: process.env.HTTP_PATH,
+  routes,
+}
+
+const app = createApp(App);
+app.use(CodeApp, opt);
+app.mount("#app");
\ No newline at end of file
diff --git a/packages/views/apps/login-request-modal-desktop/login-request-modal-mobile/style.css b/packages/views/apps/login-request-modal-desktop/login-request-modal-mobile/style.css
new file mode 100644
index 0000000..702569c
--- /dev/null
+++ b/packages/views/apps/login-request-modal-desktop/login-request-modal-mobile/style.css
@@ -0,0 +1,47 @@
+/* ./src/index.css */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+
+@layer base {
+  @font-face {
+    font-family: "Avenir Next LT Pro Regular";
+    font-style: normal;
+    font-weight: 400;
+    font-display: block;
+    src: url(/fonts/avenir/AvenirNextLTPro-Regular.otf) format("opentype");
+  }
+  @font-face {
+    font-family: "Avenir Next LT Pro Medium";
+    font-style: normal;
+    font-weight: 600;
+    font-display: block;
+    src: url(/fonts/avenir/AvenirNextLTPro-Medium.otf) format("opentype");
+  }
+  @font-face {
+    font-family: "Avenir Next LT Pro Bold";
+    font-style: normal;
+    font-weight: 900;
+    font-display: block;
+    src: url(/fonts/avenir/AvenirNextLTPro-Demi.otf) format("opentype");
+  }
+}
+
+:root {
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: #555;
+
+  font-family: 'Avenir Next LT Pro Regular', sans-serif;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
diff --git a/packages/views/apps/login-request-modal-desktop/login-request-modal-mobile/vite.config.ts b/packages/views/apps/login-request-modal-desktop/login-request-modal-mobile/vite.config.ts
new file mode 100644
index 0000000..3be6c3c
--- /dev/null
+++ b/packages/views/apps/login-request-modal-desktop/login-request-modal-mobile/vite.config.ts
@@ -0,0 +1,49 @@
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import path from 'path';
+import { config } from 'dotenv';
+
+config();
+
+let env = {} as { WS_PATH: string, HTTP_PATH: string };
+if (process.env.NODE_ENV === 'production') {
+  console.warn('Using production environment');
+  env = {
+    WS_PATH: 'wss://cash.getcode.com',
+    HTTP_PATH: 'https://cash.getcode.com',
+  }
+} else {
+  console.warn('Using dev environment');
+  env = {
+    WS_PATH: 'ws://localhost:3000',
+    HTTP_PATH: 'http://localhost:3000',
+  };
+}
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  base: '/v1/elements/login-request-modal-mobile/',
+  plugins: [
+    vue(),
+  ],
+  root: path.resolve(__dirname, './'),
+  resolve: {
+    alias: {
+      crypto: 'crypto-browserify',
+      process: "process/browser",
+      stream: "stream-browserify",
+      zlib: "browserify-zlib",
+    },
+  },
+  define: {
+    'process.env': env,
+    'process.browser': true,
+    'global': {}
+  },
+  build: {
+    chunkSizeWarningLimit: 1600,
+  },
+  server: {
+    port: 8790,
+  },
+})
diff --git a/packages/views/apps/login-request-modal-desktop/payment-request-modal-desktop/App.vue b/packages/views/apps/login-request-modal-desktop/payment-request-modal-desktop/App.vue
new file mode 100644
index 0000000..d75d9b8
--- /dev/null
+++ b/packages/views/apps/login-request-modal-desktop/payment-request-modal-desktop/App.vue
@@ -0,0 +1,13 @@
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  mounted() {
+  },
+});
+</script>
+
+<template>
+  <router-view></router-view>
+</template>
+
diff --git a/packages/views/apps/login-request-modal-desktop/payment-request-modal-desktop/fonts/avenir/AvenirNextLTPro-Demi.otf b/packages/views/apps/login-request-modal-desktop/payment-request-modal-desktop/fonts/avenir/AvenirNextLTPro-Demi.otf
new file mode 100644
index 0000000..2076a1f
Binary files /dev/null and b/packages/views/apps/login-request-modal-desktop/payment-request-modal-desktop/fonts/avenir/AvenirNextLTPro-Demi.otf differ
diff --git a/packages/views/apps/login-request-modal-desktop/payment-request-modal-desktop/fonts/avenir/AvenirNextLTPro-Medium.otf b/packages/views/apps/login-request-modal-desktop/payment-request-modal-desktop/fonts/avenir/AvenirNextLTPro-Medium.otf
new file mode 100644
index 0000000..660511b
Binary files /dev/null and b/packages/views/apps/login-request-modal-desktop/payment-request-modal-desktop/fonts/avenir/AvenirNextLTPro-Medium.otf differ
diff --git a/packages/views/apps/login-request-modal-desktop/payment-request-modal-desktop/fonts/avenir/AvenirNextLTPro-Regular.otf b/packages/views/apps/login-request-modal-desktop/payment-request-modal-desktop/fonts/avenir/AvenirNextLTPro-Regular.otf
new file mode 100644
index 0000000..0ae7cee
Binary files /dev/null and b/packages/views/apps/login-request-modal-desktop/payment-request-modal-desktop/fonts/avenir/AvenirNextLTPro-Regular.otf differ
diff --git a/packages/views/apps/login-request-modal-desktop/payment-request-modal-desktop/fonts/manrope/Manrope-Bold.ttf b/packages/views/apps/login-request-modal-desktop/payment-request-modal-desktop/fonts/manrope/Manrope-Bold.ttf
new file mode 100644
index 0000000..8bbf0bd
Binary files /dev/null and b/packages/views/apps/login-request-modal-desktop/payment-request-modal-desktop/fonts/manrope/Manrope-Bold.ttf differ
diff --git a/packages/views/apps/login-request-modal-desktop/payment-request-modal-desktop/fonts/manrope/Manrope-ExtraBold.ttf b/packages/views/apps/login-request-modal-desktop/payment-request-modal-desktop/fonts/manrope/Manrope-ExtraBold.ttf
new file mode 100644
index 0000000..3f68dff
Binary files /dev/null and b/packages/views/apps/login-request-modal-desktop/payment-request-modal-desktop/fonts/manrope/Manrope-ExtraBold.ttf differ
diff --git a/packages/views/apps/login-request-modal-desktop/payment-request-modal-desktop/fonts/manrope/Manrope-ExtraLight.ttf b/packages/views/apps/login-request-modal-desktop/payment-request-modal-desktop/fonts/manrope/Manrope-ExtraLight.ttf
new file mode 100644
index 0000000..9d21d77
Binary files /dev/null and b/packages/views/apps/login-request-modal-desktop/payment-request-modal-desktop/fonts/manrope/Manrope-ExtraLight.ttf differ
diff --git a/packages/views/apps/login-request-modal-desktop/payment-request-modal-desktop/fonts/manrope/Manrope-Light.ttf b/packages/views/apps/login-request-modal-desktop/payment-request-modal-desktop/fonts/manrope/Manrope-Light.ttf
new file mode 100644
index 0000000..f255257
Binary files /dev/null and b/packages/views/apps/login-request-modal-desktop/payment-request-modal-desktop/fonts/manrope/Manrope-Light.ttf differ
diff --git a/packages/views/apps/login-request-modal-desktop/payment-request-modal-desktop/fonts/manrope/Manrope-Medium.ttf b/packages/views/apps/login-request-modal-desktop/payment-request-modal-desktop/fonts/manrope/Manrope-Medium.ttf
new file mode 100644
index 0000000..c73d774
Binary files /dev/null and b/packages/views/apps/login-request-modal-desktop/payment-request-modal-desktop/fonts/manrope/Manrope-Medium.ttf differ
diff --git a/packages/views/apps/login-request-modal-desktop/payment-request-modal-desktop/fonts/manrope/Manrope-Regular.ttf b/packages/views/apps/login-request-modal-desktop/payment-request-modal-desktop/fonts/manrope/Manrope-Regular.ttf
new file mode 100644
index 0000000..c02b01b
Binary files /dev/null and b/packages/views/apps/login-request-modal-desktop/payment-request-modal-desktop/fonts/manrope/Manrope-Regular.ttf differ
diff --git a/packages/views/apps/login-request-modal-desktop/payment-request-modal-desktop/fonts/manrope/Manrope-SemiBold.ttf b/packages/views/apps/login-request-modal-desktop/payment-request-modal-desktop/fonts/manrope/Manrope-SemiBold.ttf
new file mode 100644
index 0000000..30ee031
Binary files /dev/null and b/packages/views/apps/login-request-modal-desktop/payment-request-modal-desktop/fonts/manrope/Manrope-SemiBold.ttf differ
diff --git a/packages/views/apps/login-request-modal-desktop/payment-request-modal-desktop/fonts/roboto/RobotoMono-Medium.ttf b/packages/views/apps/login-request-modal-desktop/payment-request-modal-desktop/fonts/roboto/RobotoMono-Medium.ttf
new file mode 100644
index 0000000..f6c149a
Binary files /dev/null and b/packages/views/apps/login-request-modal-desktop/payment-request-modal-desktop/fonts/roboto/RobotoMono-Medium.ttf differ
diff --git a/packages/views/apps/login-request-modal-desktop/payment-request-modal-desktop/index.html b/packages/views/apps/login-request-modal-desktop/payment-request-modal-desktop/index.html
new file mode 100644
index 0000000..40b9874
--- /dev/null
+++ b/packages/views/apps/login-request-modal-desktop/payment-request-modal-desktop/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en" style="background: transparent; color-scheme: light;">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Code SDK - Card</title>
+    <meta content="width=device-width, initial-scale=1" name="viewport">
+  </head>
+  <body class="">
+    <div id="app"></div>
+
+    <script>
+      // Work-around node polyfills missing in Vite.
+      window.global = window;
+    </script>
+
+    <script type="module">
+      // Polyfill for Buffer, required by some dependencies
+      import { Buffer } from "buffer";
+      window.Buffer = Buffer;
+    </script>
+
+    <script type="module" src="./index.js"></script>
+  </body>
+</html>
diff --git a/packages/views/apps/login-request-modal-desktop/payment-request-modal-desktop/index.js b/packages/views/apps/login-request-modal-desktop/payment-request-modal-desktop/index.js
new file mode 100644
index 0000000..d97ae4b
--- /dev/null
+++ b/packages/views/apps/login-request-modal-desktop/payment-request-modal-desktop/index.js
@@ -0,0 +1,17 @@
+import { createApp } from 'vue'
+
+import App from './App.vue'
+import CodeApp from '../../src/index'
+import { routes } from '../../src/routes/modals/payment-request-modal-desktop'
+
+import './style.css'
+
+const opt = {
+  wsPath: process.env.WS_PATH,
+  httpPath: process.env.HTTP_PATH,
+  routes,
+}
+
+const app = createApp(App);
+app.use(CodeApp, opt);
+app.mount("#app");
\ No newline at end of file
diff --git a/packages/views/apps/login-request-modal-desktop/payment-request-modal-desktop/style.css b/packages/views/apps/login-request-modal-desktop/payment-request-modal-desktop/style.css
new file mode 100644
index 0000000..78c9427
--- /dev/null
+++ b/packages/views/apps/login-request-modal-desktop/payment-request-modal-desktop/style.css
@@ -0,0 +1,54 @@
+/* ./src/index.css */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+
+@layer base {
+  @font-face {
+    font-family: "Avenir Next LT Pro Regular";
+    font-style: normal;
+    font-weight: 400;
+    font-display: block;
+    src: url(/fonts/avenir/AvenirNextLTPro-Regular.otf) format("opentype");
+  }
+  @font-face {
+    font-family: "Avenir Next LT Pro Medium";
+    font-style: normal;
+    font-weight: 600;
+    font-display: block;
+    src: url(/fonts/avenir/AvenirNextLTPro-Medium.otf) format("opentype");
+  }
+  @font-face {
+    font-family: "Avenir Next LT Pro Bold";
+    font-style: normal;
+    font-weight: 900;
+    font-display: block;
+    src: url(/fonts/avenir/AvenirNextLTPro-Demi.otf) format("opentype");
+  }
+  @font-face {
+    font-family: "Roboto Mono Medium";
+    font-style: normal;
+    font-weight: 500;
+    font-display: block;
+    src: url(/fonts/roboto/RobotoMono-Medium.ttf) format("truetype");
+  }
+}
+
+:root {
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: #555;
+
+  font-family: 'Avenir Next LT Pro Regular', sans-serif;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
diff --git a/packages/views/apps/login-request-modal-desktop/payment-request-modal-desktop/vite.config.ts b/packages/views/apps/login-request-modal-desktop/payment-request-modal-desktop/vite.config.ts
new file mode 100644
index 0000000..88f31a6
--- /dev/null
+++ b/packages/views/apps/login-request-modal-desktop/payment-request-modal-desktop/vite.config.ts
@@ -0,0 +1,49 @@
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import path from 'path';
+import { config } from 'dotenv';
+
+config();
+
+let env = {} as { WS_PATH: string, HTTP_PATH: string };
+if (process.env.NODE_ENV === 'production') {
+  console.warn('Using production environment');
+  env = {
+    WS_PATH: 'wss://cash.getcode.com',
+    HTTP_PATH: 'https://cash.getcode.com',
+  }
+} else {
+  console.warn('Using dev environment');
+  env = {
+    WS_PATH: 'ws://localhost:3000',
+    HTTP_PATH: 'http://localhost:3000',
+  };
+}
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  base: '/v1/elements/payment-request-modal-desktop/',
+  plugins: [
+    vue(),
+  ],
+  root: path.resolve(__dirname, './'),
+  resolve: {
+    alias: {
+      crypto: 'crypto-browserify',
+      process: "process/browser",
+      stream: "stream-browserify",
+      zlib: "browserify-zlib",
+    },
+  },
+  define: {
+    'process.env': env,
+    'process.browser': true,
+    'global': {}
+  },
+  build: {
+    chunkSizeWarningLimit: 1600,
+  },
+  server: {
+    port: 8790,
+  },
+})
diff --git a/packages/views/apps/login-request-modal-desktop/payment-request-modal-mobile/App.vue b/packages/views/apps/login-request-modal-desktop/payment-request-modal-mobile/App.vue
new file mode 100644
index 0000000..d75d9b8
--- /dev/null
+++ b/packages/views/apps/login-request-modal-desktop/payment-request-modal-mobile/App.vue
@@ -0,0 +1,13 @@
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  mounted() {
+  },
+});
+</script>
+
+<template>
+  <router-view></router-view>
+</template>
+
diff --git a/packages/views/apps/login-request-modal-desktop/payment-request-modal-mobile/fonts/avenir/AvenirNextLTPro-Demi.otf b/packages/views/apps/login-request-modal-desktop/payment-request-modal-mobile/fonts/avenir/AvenirNextLTPro-Demi.otf
new file mode 100644
index 0000000..2076a1f
Binary files /dev/null and b/packages/views/apps/login-request-modal-desktop/payment-request-modal-mobile/fonts/avenir/AvenirNextLTPro-Demi.otf differ
diff --git a/packages/views/apps/login-request-modal-desktop/payment-request-modal-mobile/fonts/avenir/AvenirNextLTPro-Medium.otf b/packages/views/apps/login-request-modal-desktop/payment-request-modal-mobile/fonts/avenir/AvenirNextLTPro-Medium.otf
new file mode 100644
index 0000000..660511b
Binary files /dev/null and b/packages/views/apps/login-request-modal-desktop/payment-request-modal-mobile/fonts/avenir/AvenirNextLTPro-Medium.otf differ
diff --git a/packages/views/apps/login-request-modal-desktop/payment-request-modal-mobile/fonts/avenir/AvenirNextLTPro-Regular.otf b/packages/views/apps/login-request-modal-desktop/payment-request-modal-mobile/fonts/avenir/AvenirNextLTPro-Regular.otf
new file mode 100644
index 0000000..0ae7cee
Binary files /dev/null and b/packages/views/apps/login-request-modal-desktop/payment-request-modal-mobile/fonts/avenir/AvenirNextLTPro-Regular.otf differ
diff --git a/packages/views/apps/login-request-modal-desktop/payment-request-modal-mobile/fonts/manrope/Manrope-Bold.ttf b/packages/views/apps/login-request-modal-desktop/payment-request-modal-mobile/fonts/manrope/Manrope-Bold.ttf
new file mode 100644
index 0000000..8bbf0bd
Binary files /dev/null and b/packages/views/apps/login-request-modal-desktop/payment-request-modal-mobile/fonts/manrope/Manrope-Bold.ttf differ
diff --git a/packages/views/apps/login-request-modal-desktop/payment-request-modal-mobile/fonts/manrope/Manrope-ExtraBold.ttf b/packages/views/apps/login-request-modal-desktop/payment-request-modal-mobile/fonts/manrope/Manrope-ExtraBold.ttf
new file mode 100644
index 0000000..3f68dff
Binary files /dev/null and b/packages/views/apps/login-request-modal-desktop/payment-request-modal-mobile/fonts/manrope/Manrope-ExtraBold.ttf differ
diff --git a/packages/views/apps/login-request-modal-desktop/payment-request-modal-mobile/fonts/manrope/Manrope-ExtraLight.ttf b/packages/views/apps/login-request-modal-desktop/payment-request-modal-mobile/fonts/manrope/Manrope-ExtraLight.ttf
new file mode 100644
index 0000000..9d21d77
Binary files /dev/null and b/packages/views/apps/login-request-modal-desktop/payment-request-modal-mobile/fonts/manrope/Manrope-ExtraLight.ttf differ
diff --git a/packages/views/apps/login-request-modal-desktop/payment-request-modal-mobile/fonts/manrope/Manrope-Light.ttf b/packages/views/apps/login-request-modal-desktop/payment-request-modal-mobile/fonts/manrope/Manrope-Light.ttf
new file mode 100644
index 0000000..f255257
Binary files /dev/null and b/packages/views/apps/login-request-modal-desktop/payment-request-modal-mobile/fonts/manrope/Manrope-Light.ttf differ
diff --git a/packages/views/apps/login-request-modal-desktop/payment-request-modal-mobile/fonts/manrope/Manrope-Medium.ttf b/packages/views/apps/login-request-modal-desktop/payment-request-modal-mobile/fonts/manrope/Manrope-Medium.ttf
new file mode 100644
index 0000000..c73d774
Binary files /dev/null and b/packages/views/apps/login-request-modal-desktop/payment-request-modal-mobile/fonts/manrope/Manrope-Medium.ttf differ
diff --git a/packages/views/apps/login-request-modal-desktop/payment-request-modal-mobile/fonts/manrope/Manrope-Regular.ttf b/packages/views/apps/login-request-modal-desktop/payment-request-modal-mobile/fonts/manrope/Manrope-Regular.ttf
new file mode 100644
index 0000000..c02b01b
Binary files /dev/null and b/packages/views/apps/login-request-modal-desktop/payment-request-modal-mobile/fonts/manrope/Manrope-Regular.ttf differ
diff --git a/packages/views/apps/login-request-modal-desktop/payment-request-modal-mobile/fonts/manrope/Manrope-SemiBold.ttf b/packages/views/apps/login-request-modal-desktop/payment-request-modal-mobile/fonts/manrope/Manrope-SemiBold.ttf
new file mode 100644
index 0000000..30ee031
Binary files /dev/null and b/packages/views/apps/login-request-modal-desktop/payment-request-modal-mobile/fonts/manrope/Manrope-SemiBold.ttf differ
diff --git a/packages/views/apps/login-request-modal-desktop/payment-request-modal-mobile/index.html b/packages/views/apps/login-request-modal-desktop/payment-request-modal-mobile/index.html
new file mode 100644
index 0000000..40b9874
--- /dev/null
+++ b/packages/views/apps/login-request-modal-desktop/payment-request-modal-mobile/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en" style="background: transparent; color-scheme: light;">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Code SDK - Card</title>
+    <meta content="width=device-width, initial-scale=1" name="viewport">
+  </head>
+  <body class="">
+    <div id="app"></div>
+
+    <script>
+      // Work-around node polyfills missing in Vite.
+      window.global = window;
+    </script>
+
+    <script type="module">
+      // Polyfill for Buffer, required by some dependencies
+      import { Buffer } from "buffer";
+      window.Buffer = Buffer;
+    </script>
+
+    <script type="module" src="./index.js"></script>
+  </body>
+</html>
diff --git a/packages/views/apps/login-request-modal-desktop/payment-request-modal-mobile/index.js b/packages/views/apps/login-request-modal-desktop/payment-request-modal-mobile/index.js
new file mode 100644
index 0000000..6a28b36
--- /dev/null
+++ b/packages/views/apps/login-request-modal-desktop/payment-request-modal-mobile/index.js
@@ -0,0 +1,17 @@
+import { createApp } from 'vue'
+
+import App from './App.vue'
+import CodeApp from '../../src/index'
+import { routes } from '../../src/routes/modals/payment-request-modal-mobile'
+
+import './style.css'
+
+const opt = {
+  wsPath: process.env.WS_PATH,
+  httpPath: process.env.HTTP_PATH,
+  routes,
+}
+
+const app = createApp(App);
+app.use(CodeApp, opt);
+app.mount("#app");
\ No newline at end of file
diff --git a/packages/views/apps/login-request-modal-desktop/payment-request-modal-mobile/style.css b/packages/views/apps/login-request-modal-desktop/payment-request-modal-mobile/style.css
new file mode 100644
index 0000000..702569c
--- /dev/null
+++ b/packages/views/apps/login-request-modal-desktop/payment-request-modal-mobile/style.css
@@ -0,0 +1,47 @@
+/* ./src/index.css */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+
+@layer base {
+  @font-face {
+    font-family: "Avenir Next LT Pro Regular";
+    font-style: normal;
+    font-weight: 400;
+    font-display: block;
+    src: url(/fonts/avenir/AvenirNextLTPro-Regular.otf) format("opentype");
+  }
+  @font-face {
+    font-family: "Avenir Next LT Pro Medium";
+    font-style: normal;
+    font-weight: 600;
+    font-display: block;
+    src: url(/fonts/avenir/AvenirNextLTPro-Medium.otf) format("opentype");
+  }
+  @font-face {
+    font-family: "Avenir Next LT Pro Bold";
+    font-style: normal;
+    font-weight: 900;
+    font-display: block;
+    src: url(/fonts/avenir/AvenirNextLTPro-Demi.otf) format("opentype");
+  }
+}
+
+:root {
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: #555;
+
+  font-family: 'Avenir Next LT Pro Regular', sans-serif;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
diff --git a/packages/views/apps/login-request-modal-desktop/payment-request-modal-mobile/vite.config.ts b/packages/views/apps/login-request-modal-desktop/payment-request-modal-mobile/vite.config.ts
new file mode 100644
index 0000000..4615813
--- /dev/null
+++ b/packages/views/apps/login-request-modal-desktop/payment-request-modal-mobile/vite.config.ts
@@ -0,0 +1,49 @@
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import path from 'path';
+import { config } from 'dotenv';
+
+config();
+
+let env = {} as { WS_PATH: string, HTTP_PATH: string };
+if (process.env.NODE_ENV === 'production') {
+  console.warn('Using production environment');
+  env = {
+    WS_PATH: 'wss://cash.getcode.com',
+    HTTP_PATH: 'https://cash.getcode.com',
+  }
+} else {
+  console.warn('Using dev environment');
+  env = {
+    WS_PATH: 'ws://localhost:3000',
+    HTTP_PATH: 'http://localhost:3000',
+  };
+}
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  base: '/v1/elements/payment-request-modal-mobile/',
+  plugins: [
+    vue(),
+  ],
+  root: path.resolve(__dirname, './'),
+  resolve: {
+    alias: {
+      crypto: 'crypto-browserify',
+      process: "process/browser",
+      stream: "stream-browserify",
+      zlib: "browserify-zlib",
+    },
+  },
+  define: {
+    'process.env': env,
+    'process.browser': true,
+    'global': {}
+  },
+  build: {
+    chunkSizeWarningLimit: 1600,
+  },
+  server: {
+    port: 8790,
+  },
+})
diff --git a/packages/views/apps/login-request-modal-desktop/tip-request-modal-desktop/App.vue b/packages/views/apps/login-request-modal-desktop/tip-request-modal-desktop/App.vue
new file mode 100644
index 0000000..d75d9b8
--- /dev/null
+++ b/packages/views/apps/login-request-modal-desktop/tip-request-modal-desktop/App.vue
@@ -0,0 +1,13 @@
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  mounted() {
+  },
+});
+</script>
+
+<template>
+  <router-view></router-view>
+</template>
+
diff --git a/packages/views/apps/login-request-modal-desktop/tip-request-modal-desktop/fonts/avenir/AvenirNextLTPro-Demi.otf b/packages/views/apps/login-request-modal-desktop/tip-request-modal-desktop/fonts/avenir/AvenirNextLTPro-Demi.otf
new file mode 100644
index 0000000..2076a1f
Binary files /dev/null and b/packages/views/apps/login-request-modal-desktop/tip-request-modal-desktop/fonts/avenir/AvenirNextLTPro-Demi.otf differ
diff --git a/packages/views/apps/login-request-modal-desktop/tip-request-modal-desktop/fonts/avenir/AvenirNextLTPro-Medium.otf b/packages/views/apps/login-request-modal-desktop/tip-request-modal-desktop/fonts/avenir/AvenirNextLTPro-Medium.otf
new file mode 100644
index 0000000..660511b
Binary files /dev/null and b/packages/views/apps/login-request-modal-desktop/tip-request-modal-desktop/fonts/avenir/AvenirNextLTPro-Medium.otf differ
diff --git a/packages/views/apps/login-request-modal-desktop/tip-request-modal-desktop/fonts/avenir/AvenirNextLTPro-Regular.otf b/packages/views/apps/login-request-modal-desktop/tip-request-modal-desktop/fonts/avenir/AvenirNextLTPro-Regular.otf
new file mode 100644
index 0000000..0ae7cee
Binary files /dev/null and b/packages/views/apps/login-request-modal-desktop/tip-request-modal-desktop/fonts/avenir/AvenirNextLTPro-Regular.otf differ
diff --git a/packages/views/apps/login-request-modal-desktop/tip-request-modal-desktop/fonts/manrope/Manrope-Bold.ttf b/packages/views/apps/login-request-modal-desktop/tip-request-modal-desktop/fonts/manrope/Manrope-Bold.ttf
new file mode 100644
index 0000000..8bbf0bd
Binary files /dev/null and b/packages/views/apps/login-request-modal-desktop/tip-request-modal-desktop/fonts/manrope/Manrope-Bold.ttf differ
diff --git a/packages/views/apps/login-request-modal-desktop/tip-request-modal-desktop/fonts/manrope/Manrope-ExtraBold.ttf b/packages/views/apps/login-request-modal-desktop/tip-request-modal-desktop/fonts/manrope/Manrope-ExtraBold.ttf
new file mode 100644
index 0000000..3f68dff
Binary files /dev/null and b/packages/views/apps/login-request-modal-desktop/tip-request-modal-desktop/fonts/manrope/Manrope-ExtraBold.ttf differ
diff --git a/packages/views/apps/login-request-modal-desktop/tip-request-modal-desktop/fonts/manrope/Manrope-ExtraLight.ttf b/packages/views/apps/login-request-modal-desktop/tip-request-modal-desktop/fonts/manrope/Manrope-ExtraLight.ttf
new file mode 100644
index 0000000..9d21d77
Binary files /dev/null and b/packages/views/apps/login-request-modal-desktop/tip-request-modal-desktop/fonts/manrope/Manrope-ExtraLight.ttf differ
diff --git a/packages/views/apps/login-request-modal-desktop/tip-request-modal-desktop/fonts/manrope/Manrope-Light.ttf b/packages/views/apps/login-request-modal-desktop/tip-request-modal-desktop/fonts/manrope/Manrope-Light.ttf
new file mode 100644
index 0000000..f255257
Binary files /dev/null and b/packages/views/apps/login-request-modal-desktop/tip-request-modal-desktop/fonts/manrope/Manrope-Light.ttf differ
diff --git a/packages/views/apps/login-request-modal-desktop/tip-request-modal-desktop/fonts/manrope/Manrope-Medium.ttf b/packages/views/apps/login-request-modal-desktop/tip-request-modal-desktop/fonts/manrope/Manrope-Medium.ttf
new file mode 100644
index 0000000..c73d774
Binary files /dev/null and b/packages/views/apps/login-request-modal-desktop/tip-request-modal-desktop/fonts/manrope/Manrope-Medium.ttf differ
diff --git a/packages/views/apps/login-request-modal-desktop/tip-request-modal-desktop/fonts/manrope/Manrope-Regular.ttf b/packages/views/apps/login-request-modal-desktop/tip-request-modal-desktop/fonts/manrope/Manrope-Regular.ttf
new file mode 100644
index 0000000..c02b01b
Binary files /dev/null and b/packages/views/apps/login-request-modal-desktop/tip-request-modal-desktop/fonts/manrope/Manrope-Regular.ttf differ
diff --git a/packages/views/apps/login-request-modal-desktop/tip-request-modal-desktop/fonts/manrope/Manrope-SemiBold.ttf b/packages/views/apps/login-request-modal-desktop/tip-request-modal-desktop/fonts/manrope/Manrope-SemiBold.ttf
new file mode 100644
index 0000000..30ee031
Binary files /dev/null and b/packages/views/apps/login-request-modal-desktop/tip-request-modal-desktop/fonts/manrope/Manrope-SemiBold.ttf differ
diff --git a/packages/views/apps/login-request-modal-desktop/tip-request-modal-desktop/fonts/roboto/RobotoMono-Medium.ttf b/packages/views/apps/login-request-modal-desktop/tip-request-modal-desktop/fonts/roboto/RobotoMono-Medium.ttf
new file mode 100644
index 0000000..f6c149a
Binary files /dev/null and b/packages/views/apps/login-request-modal-desktop/tip-request-modal-desktop/fonts/roboto/RobotoMono-Medium.ttf differ
diff --git a/packages/views/apps/login-request-modal-desktop/tip-request-modal-desktop/index.html b/packages/views/apps/login-request-modal-desktop/tip-request-modal-desktop/index.html
new file mode 100644
index 0000000..40b9874
--- /dev/null
+++ b/packages/views/apps/login-request-modal-desktop/tip-request-modal-desktop/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en" style="background: transparent; color-scheme: light;">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Code SDK - Card</title>
+    <meta content="width=device-width, initial-scale=1" name="viewport">
+  </head>
+  <body class="">
+    <div id="app"></div>
+
+    <script>
+      // Work-around node polyfills missing in Vite.
+      window.global = window;
+    </script>
+
+    <script type="module">
+      // Polyfill for Buffer, required by some dependencies
+      import { Buffer } from "buffer";
+      window.Buffer = Buffer;
+    </script>
+
+    <script type="module" src="./index.js"></script>
+  </body>
+</html>
diff --git a/packages/views/apps/login-request-modal-desktop/tip-request-modal-desktop/index.js b/packages/views/apps/login-request-modal-desktop/tip-request-modal-desktop/index.js
new file mode 100644
index 0000000..c4a0959
--- /dev/null
+++ b/packages/views/apps/login-request-modal-desktop/tip-request-modal-desktop/index.js
@@ -0,0 +1,17 @@
+import { createApp } from 'vue'
+
+import App from './App.vue'
+import CodeApp from '../../src/index'
+import { routes } from '../../src/routes/modals/tip-request-modal-desktop'
+
+import './style.css'
+
+const opt = {
+  wsPath: process.env.WS_PATH,
+  httpPath: process.env.HTTP_PATH,
+  routes,
+}
+
+const app = createApp(App);
+app.use(CodeApp, opt);
+app.mount("#app");
\ No newline at end of file
diff --git a/packages/views/apps/login-request-modal-desktop/tip-request-modal-desktop/style.css b/packages/views/apps/login-request-modal-desktop/tip-request-modal-desktop/style.css
new file mode 100644
index 0000000..78c9427
--- /dev/null
+++ b/packages/views/apps/login-request-modal-desktop/tip-request-modal-desktop/style.css
@@ -0,0 +1,54 @@
+/* ./src/index.css */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+
+@layer base {
+  @font-face {
+    font-family: "Avenir Next LT Pro Regular";
+    font-style: normal;
+    font-weight: 400;
+    font-display: block;
+    src: url(/fonts/avenir/AvenirNextLTPro-Regular.otf) format("opentype");
+  }
+  @font-face {
+    font-family: "Avenir Next LT Pro Medium";
+    font-style: normal;
+    font-weight: 600;
+    font-display: block;
+    src: url(/fonts/avenir/AvenirNextLTPro-Medium.otf) format("opentype");
+  }
+  @font-face {
+    font-family: "Avenir Next LT Pro Bold";
+    font-style: normal;
+    font-weight: 900;
+    font-display: block;
+    src: url(/fonts/avenir/AvenirNextLTPro-Demi.otf) format("opentype");
+  }
+  @font-face {
+    font-family: "Roboto Mono Medium";
+    font-style: normal;
+    font-weight: 500;
+    font-display: block;
+    src: url(/fonts/roboto/RobotoMono-Medium.ttf) format("truetype");
+  }
+}
+
+:root {
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: #555;
+
+  font-family: 'Avenir Next LT Pro Regular', sans-serif;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
diff --git a/packages/views/apps/login-request-modal-desktop/tip-request-modal-desktop/vite.config.ts b/packages/views/apps/login-request-modal-desktop/tip-request-modal-desktop/vite.config.ts
new file mode 100644
index 0000000..b290c14
--- /dev/null
+++ b/packages/views/apps/login-request-modal-desktop/tip-request-modal-desktop/vite.config.ts
@@ -0,0 +1,49 @@
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import path from 'path';
+import { config } from 'dotenv';
+
+config();
+
+let env = {} as { WS_PATH: string, HTTP_PATH: string };
+if (process.env.NODE_ENV === 'production') {
+  console.warn('Using production environment');
+  env = {
+    WS_PATH: 'wss://cash.getcode.com',
+    HTTP_PATH: 'https://cash.getcode.com',
+  }
+} else {
+  console.warn('Using dev environment');
+  env = {
+    WS_PATH: 'ws://localhost:3000',
+    HTTP_PATH: 'http://localhost:3000',
+  };
+}
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  base: '/v1/elements/login-request-modal-desktop/',
+  plugins: [
+    vue(),
+  ],
+  root: path.resolve(__dirname, './'),
+  resolve: {
+    alias: {
+      crypto: 'crypto-browserify',
+      process: "process/browser",
+      stream: "stream-browserify",
+      zlib: "browserify-zlib",
+    },
+  },
+  define: {
+    'process.env': env,
+    'process.browser': true,
+    'global': {}
+  },
+  build: {
+    chunkSizeWarningLimit: 1600,
+  },
+  server: {
+    port: 8790,
+  },
+})
diff --git a/packages/views/apps/login-request-modal-desktop/tip-request-modal-mobile/App.vue b/packages/views/apps/login-request-modal-desktop/tip-request-modal-mobile/App.vue
new file mode 100644
index 0000000..d75d9b8
--- /dev/null
+++ b/packages/views/apps/login-request-modal-desktop/tip-request-modal-mobile/App.vue
@@ -0,0 +1,13 @@
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  mounted() {
+  },
+});
+</script>
+
+<template>
+  <router-view></router-view>
+</template>
+
diff --git a/packages/views/apps/login-request-modal-desktop/tip-request-modal-mobile/fonts/avenir/AvenirNextLTPro-Demi.otf b/packages/views/apps/login-request-modal-desktop/tip-request-modal-mobile/fonts/avenir/AvenirNextLTPro-Demi.otf
new file mode 100644
index 0000000..2076a1f
Binary files /dev/null and b/packages/views/apps/login-request-modal-desktop/tip-request-modal-mobile/fonts/avenir/AvenirNextLTPro-Demi.otf differ
diff --git a/packages/views/apps/login-request-modal-desktop/tip-request-modal-mobile/fonts/avenir/AvenirNextLTPro-Medium.otf b/packages/views/apps/login-request-modal-desktop/tip-request-modal-mobile/fonts/avenir/AvenirNextLTPro-Medium.otf
new file mode 100644
index 0000000..660511b
Binary files /dev/null and b/packages/views/apps/login-request-modal-desktop/tip-request-modal-mobile/fonts/avenir/AvenirNextLTPro-Medium.otf differ
diff --git a/packages/views/apps/login-request-modal-desktop/tip-request-modal-mobile/fonts/avenir/AvenirNextLTPro-Regular.otf b/packages/views/apps/login-request-modal-desktop/tip-request-modal-mobile/fonts/avenir/AvenirNextLTPro-Regular.otf
new file mode 100644
index 0000000..0ae7cee
Binary files /dev/null and b/packages/views/apps/login-request-modal-desktop/tip-request-modal-mobile/fonts/avenir/AvenirNextLTPro-Regular.otf differ
diff --git a/packages/views/apps/login-request-modal-desktop/tip-request-modal-mobile/fonts/manrope/Manrope-Bold.ttf b/packages/views/apps/login-request-modal-desktop/tip-request-modal-mobile/fonts/manrope/Manrope-Bold.ttf
new file mode 100644
index 0000000..8bbf0bd
Binary files /dev/null and b/packages/views/apps/login-request-modal-desktop/tip-request-modal-mobile/fonts/manrope/Manrope-Bold.ttf differ
diff --git a/packages/views/apps/login-request-modal-desktop/tip-request-modal-mobile/fonts/manrope/Manrope-ExtraBold.ttf b/packages/views/apps/login-request-modal-desktop/tip-request-modal-mobile/fonts/manrope/Manrope-ExtraBold.ttf
new file mode 100644
index 0000000..3f68dff
Binary files /dev/null and b/packages/views/apps/login-request-modal-desktop/tip-request-modal-mobile/fonts/manrope/Manrope-ExtraBold.ttf differ
diff --git a/packages/views/apps/login-request-modal-desktop/tip-request-modal-mobile/fonts/manrope/Manrope-ExtraLight.ttf b/packages/views/apps/login-request-modal-desktop/tip-request-modal-mobile/fonts/manrope/Manrope-ExtraLight.ttf
new file mode 100644
index 0000000..9d21d77
Binary files /dev/null and b/packages/views/apps/login-request-modal-desktop/tip-request-modal-mobile/fonts/manrope/Manrope-ExtraLight.ttf differ
diff --git a/packages/views/apps/login-request-modal-desktop/tip-request-modal-mobile/fonts/manrope/Manrope-Light.ttf b/packages/views/apps/login-request-modal-desktop/tip-request-modal-mobile/fonts/manrope/Manrope-Light.ttf
new file mode 100644
index 0000000..f255257
Binary files /dev/null and b/packages/views/apps/login-request-modal-desktop/tip-request-modal-mobile/fonts/manrope/Manrope-Light.ttf differ
diff --git a/packages/views/apps/login-request-modal-desktop/tip-request-modal-mobile/fonts/manrope/Manrope-Medium.ttf b/packages/views/apps/login-request-modal-desktop/tip-request-modal-mobile/fonts/manrope/Manrope-Medium.ttf
new file mode 100644
index 0000000..c73d774
Binary files /dev/null and b/packages/views/apps/login-request-modal-desktop/tip-request-modal-mobile/fonts/manrope/Manrope-Medium.ttf differ
diff --git a/packages/views/apps/login-request-modal-desktop/tip-request-modal-mobile/fonts/manrope/Manrope-Regular.ttf b/packages/views/apps/login-request-modal-desktop/tip-request-modal-mobile/fonts/manrope/Manrope-Regular.ttf
new file mode 100644
index 0000000..c02b01b
Binary files /dev/null and b/packages/views/apps/login-request-modal-desktop/tip-request-modal-mobile/fonts/manrope/Manrope-Regular.ttf differ
diff --git a/packages/views/apps/login-request-modal-desktop/tip-request-modal-mobile/fonts/manrope/Manrope-SemiBold.ttf b/packages/views/apps/login-request-modal-desktop/tip-request-modal-mobile/fonts/manrope/Manrope-SemiBold.ttf
new file mode 100644
index 0000000..30ee031
Binary files /dev/null and b/packages/views/apps/login-request-modal-desktop/tip-request-modal-mobile/fonts/manrope/Manrope-SemiBold.ttf differ
diff --git a/packages/views/apps/login-request-modal-desktop/tip-request-modal-mobile/index.html b/packages/views/apps/login-request-modal-desktop/tip-request-modal-mobile/index.html
new file mode 100644
index 0000000..40b9874
--- /dev/null
+++ b/packages/views/apps/login-request-modal-desktop/tip-request-modal-mobile/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en" style="background: transparent; color-scheme: light;">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Code SDK - Card</title>
+    <meta content="width=device-width, initial-scale=1" name="viewport">
+  </head>
+  <body class="">
+    <div id="app"></div>
+
+    <script>
+      // Work-around node polyfills missing in Vite.
+      window.global = window;
+    </script>
+
+    <script type="module">
+      // Polyfill for Buffer, required by some dependencies
+      import { Buffer } from "buffer";
+      window.Buffer = Buffer;
+    </script>
+
+    <script type="module" src="./index.js"></script>
+  </body>
+</html>
diff --git a/packages/views/apps/login-request-modal-desktop/tip-request-modal-mobile/index.js b/packages/views/apps/login-request-modal-desktop/tip-request-modal-mobile/index.js
new file mode 100644
index 0000000..833c37b
--- /dev/null
+++ b/packages/views/apps/login-request-modal-desktop/tip-request-modal-mobile/index.js
@@ -0,0 +1,17 @@
+import { createApp } from 'vue'
+
+import App from './App.vue'
+import CodeApp from '../../src/index'
+import { routes } from '../../src/routes/modals/tip-request-modal-mobile'
+
+import './style.css'
+
+const opt = {
+  wsPath: process.env.WS_PATH,
+  httpPath: process.env.HTTP_PATH,
+  routes,
+}
+
+const app = createApp(App);
+app.use(CodeApp, opt);
+app.mount("#app");
\ No newline at end of file
diff --git a/packages/views/apps/login-request-modal-desktop/tip-request-modal-mobile/style.css b/packages/views/apps/login-request-modal-desktop/tip-request-modal-mobile/style.css
new file mode 100644
index 0000000..702569c
--- /dev/null
+++ b/packages/views/apps/login-request-modal-desktop/tip-request-modal-mobile/style.css
@@ -0,0 +1,47 @@
+/* ./src/index.css */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+
+@layer base {
+  @font-face {
+    font-family: "Avenir Next LT Pro Regular";
+    font-style: normal;
+    font-weight: 400;
+    font-display: block;
+    src: url(/fonts/avenir/AvenirNextLTPro-Regular.otf) format("opentype");
+  }
+  @font-face {
+    font-family: "Avenir Next LT Pro Medium";
+    font-style: normal;
+    font-weight: 600;
+    font-display: block;
+    src: url(/fonts/avenir/AvenirNextLTPro-Medium.otf) format("opentype");
+  }
+  @font-face {
+    font-family: "Avenir Next LT Pro Bold";
+    font-style: normal;
+    font-weight: 900;
+    font-display: block;
+    src: url(/fonts/avenir/AvenirNextLTPro-Demi.otf) format("opentype");
+  }
+}
+
+:root {
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: #555;
+
+  font-family: 'Avenir Next LT Pro Regular', sans-serif;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
diff --git a/packages/views/apps/login-request-modal-desktop/tip-request-modal-mobile/vite.config.ts b/packages/views/apps/login-request-modal-desktop/tip-request-modal-mobile/vite.config.ts
new file mode 100644
index 0000000..3be6c3c
--- /dev/null
+++ b/packages/views/apps/login-request-modal-desktop/tip-request-modal-mobile/vite.config.ts
@@ -0,0 +1,49 @@
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import path from 'path';
+import { config } from 'dotenv';
+
+config();
+
+let env = {} as { WS_PATH: string, HTTP_PATH: string };
+if (process.env.NODE_ENV === 'production') {
+  console.warn('Using production environment');
+  env = {
+    WS_PATH: 'wss://cash.getcode.com',
+    HTTP_PATH: 'https://cash.getcode.com',
+  }
+} else {
+  console.warn('Using dev environment');
+  env = {
+    WS_PATH: 'ws://localhost:3000',
+    HTTP_PATH: 'http://localhost:3000',
+  };
+}
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  base: '/v1/elements/login-request-modal-mobile/',
+  plugins: [
+    vue(),
+  ],
+  root: path.resolve(__dirname, './'),
+  resolve: {
+    alias: {
+      crypto: 'crypto-browserify',
+      process: "process/browser",
+      stream: "stream-browserify",
+      zlib: "browserify-zlib",
+    },
+  },
+  define: {
+    'process.env': env,
+    'process.browser': true,
+    'global': {}
+  },
+  build: {
+    chunkSizeWarningLimit: 1600,
+  },
+  server: {
+    port: 8790,
+  },
+})
diff --git a/packages/views/apps/login-request-modal-mobile/index.js b/packages/views/apps/login-request-modal-mobile/index.js
index 6484e70..f700a4b 100644
--- a/packages/views/apps/login-request-modal-mobile/index.js
+++ b/packages/views/apps/login-request-modal-mobile/index.js
@@ -2,7 +2,7 @@ import { createApp } from 'vue'
 
 import App from './App.vue'
 import CodeApp from '../../src/index'
-import { routes } from '../../src/routes/login-request-modal-mobile'
+import { routes } from '../../src/routes/modals/login-request-modal-mobile'
 
 import './style.css'
 
diff --git a/packages/views/apps/login-request-page-desktop/App.vue b/packages/views/apps/login-request-page-desktop/App.vue
new file mode 100644
index 0000000..d75d9b8
--- /dev/null
+++ b/packages/views/apps/login-request-page-desktop/App.vue
@@ -0,0 +1,13 @@
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  mounted() {
+  },
+});
+</script>
+
+<template>
+  <router-view></router-view>
+</template>
+
diff --git a/packages/views/apps/login-request-page-desktop/fonts/avenir/AvenirNextLTPro-Demi.otf b/packages/views/apps/login-request-page-desktop/fonts/avenir/AvenirNextLTPro-Demi.otf
new file mode 100644
index 0000000..2076a1f
Binary files /dev/null and b/packages/views/apps/login-request-page-desktop/fonts/avenir/AvenirNextLTPro-Demi.otf differ
diff --git a/packages/views/apps/login-request-page-desktop/fonts/avenir/AvenirNextLTPro-Medium.otf b/packages/views/apps/login-request-page-desktop/fonts/avenir/AvenirNextLTPro-Medium.otf
new file mode 100644
index 0000000..660511b
Binary files /dev/null and b/packages/views/apps/login-request-page-desktop/fonts/avenir/AvenirNextLTPro-Medium.otf differ
diff --git a/packages/views/apps/login-request-page-desktop/fonts/avenir/AvenirNextLTPro-Regular.otf b/packages/views/apps/login-request-page-desktop/fonts/avenir/AvenirNextLTPro-Regular.otf
new file mode 100644
index 0000000..0ae7cee
Binary files /dev/null and b/packages/views/apps/login-request-page-desktop/fonts/avenir/AvenirNextLTPro-Regular.otf differ
diff --git a/packages/views/apps/login-request-page-desktop/fonts/manrope/Manrope-Bold.ttf b/packages/views/apps/login-request-page-desktop/fonts/manrope/Manrope-Bold.ttf
new file mode 100644
index 0000000..8bbf0bd
Binary files /dev/null and b/packages/views/apps/login-request-page-desktop/fonts/manrope/Manrope-Bold.ttf differ
diff --git a/packages/views/apps/login-request-page-desktop/fonts/manrope/Manrope-ExtraBold.ttf b/packages/views/apps/login-request-page-desktop/fonts/manrope/Manrope-ExtraBold.ttf
new file mode 100644
index 0000000..3f68dff
Binary files /dev/null and b/packages/views/apps/login-request-page-desktop/fonts/manrope/Manrope-ExtraBold.ttf differ
diff --git a/packages/views/apps/login-request-page-desktop/fonts/manrope/Manrope-ExtraLight.ttf b/packages/views/apps/login-request-page-desktop/fonts/manrope/Manrope-ExtraLight.ttf
new file mode 100644
index 0000000..9d21d77
Binary files /dev/null and b/packages/views/apps/login-request-page-desktop/fonts/manrope/Manrope-ExtraLight.ttf differ
diff --git a/packages/views/apps/login-request-page-desktop/fonts/manrope/Manrope-Light.ttf b/packages/views/apps/login-request-page-desktop/fonts/manrope/Manrope-Light.ttf
new file mode 100644
index 0000000..f255257
Binary files /dev/null and b/packages/views/apps/login-request-page-desktop/fonts/manrope/Manrope-Light.ttf differ
diff --git a/packages/views/apps/login-request-page-desktop/fonts/manrope/Manrope-Medium.ttf b/packages/views/apps/login-request-page-desktop/fonts/manrope/Manrope-Medium.ttf
new file mode 100644
index 0000000..c73d774
Binary files /dev/null and b/packages/views/apps/login-request-page-desktop/fonts/manrope/Manrope-Medium.ttf differ
diff --git a/packages/views/apps/login-request-page-desktop/fonts/manrope/Manrope-Regular.ttf b/packages/views/apps/login-request-page-desktop/fonts/manrope/Manrope-Regular.ttf
new file mode 100644
index 0000000..c02b01b
Binary files /dev/null and b/packages/views/apps/login-request-page-desktop/fonts/manrope/Manrope-Regular.ttf differ
diff --git a/packages/views/apps/login-request-page-desktop/fonts/manrope/Manrope-SemiBold.ttf b/packages/views/apps/login-request-page-desktop/fonts/manrope/Manrope-SemiBold.ttf
new file mode 100644
index 0000000..30ee031
Binary files /dev/null and b/packages/views/apps/login-request-page-desktop/fonts/manrope/Manrope-SemiBold.ttf differ
diff --git a/packages/views/apps/login-request-page-desktop/fonts/roboto/RobotoMono-Medium.ttf b/packages/views/apps/login-request-page-desktop/fonts/roboto/RobotoMono-Medium.ttf
new file mode 100644
index 0000000..f6c149a
Binary files /dev/null and b/packages/views/apps/login-request-page-desktop/fonts/roboto/RobotoMono-Medium.ttf differ
diff --git a/packages/views/apps/login-request-page-desktop/index.html b/packages/views/apps/login-request-page-desktop/index.html
new file mode 100644
index 0000000..40b9874
--- /dev/null
+++ b/packages/views/apps/login-request-page-desktop/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en" style="background: transparent; color-scheme: light;">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Code SDK - Card</title>
+    <meta content="width=device-width, initial-scale=1" name="viewport">
+  </head>
+  <body class="">
+    <div id="app"></div>
+
+    <script>
+      // Work-around node polyfills missing in Vite.
+      window.global = window;
+    </script>
+
+    <script type="module">
+      // Polyfill for Buffer, required by some dependencies
+      import { Buffer } from "buffer";
+      window.Buffer = Buffer;
+    </script>
+
+    <script type="module" src="./index.js"></script>
+  </body>
+</html>
diff --git a/packages/views/apps/login-request-page-desktop/index.js b/packages/views/apps/login-request-page-desktop/index.js
new file mode 100644
index 0000000..7c0aceb
--- /dev/null
+++ b/packages/views/apps/login-request-page-desktop/index.js
@@ -0,0 +1,17 @@
+import { createApp } from 'vue'
+
+import App from './App.vue'
+import CodeApp from '../../src/index'
+import { routes } from '../../src/routes/pages/login-request-page-desktop'
+
+import './style.css'
+
+const opt = {
+  wsPath: process.env.WS_PATH,
+  httpPath: process.env.HTTP_PATH,
+  routes,
+}
+
+const app = createApp(App);
+app.use(CodeApp, opt);
+app.mount("#app");
\ No newline at end of file
diff --git a/packages/views/apps/login-request-page-desktop/style.css b/packages/views/apps/login-request-page-desktop/style.css
new file mode 100644
index 0000000..78c9427
--- /dev/null
+++ b/packages/views/apps/login-request-page-desktop/style.css
@@ -0,0 +1,54 @@
+/* ./src/index.css */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+
+@layer base {
+  @font-face {
+    font-family: "Avenir Next LT Pro Regular";
+    font-style: normal;
+    font-weight: 400;
+    font-display: block;
+    src: url(/fonts/avenir/AvenirNextLTPro-Regular.otf) format("opentype");
+  }
+  @font-face {
+    font-family: "Avenir Next LT Pro Medium";
+    font-style: normal;
+    font-weight: 600;
+    font-display: block;
+    src: url(/fonts/avenir/AvenirNextLTPro-Medium.otf) format("opentype");
+  }
+  @font-face {
+    font-family: "Avenir Next LT Pro Bold";
+    font-style: normal;
+    font-weight: 900;
+    font-display: block;
+    src: url(/fonts/avenir/AvenirNextLTPro-Demi.otf) format("opentype");
+  }
+  @font-face {
+    font-family: "Roboto Mono Medium";
+    font-style: normal;
+    font-weight: 500;
+    font-display: block;
+    src: url(/fonts/roboto/RobotoMono-Medium.ttf) format("truetype");
+  }
+}
+
+:root {
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: #555;
+
+  font-family: 'Avenir Next LT Pro Regular', sans-serif;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
diff --git a/packages/views/apps/login-request-page-desktop/vite.config.ts b/packages/views/apps/login-request-page-desktop/vite.config.ts
new file mode 100644
index 0000000..b290c14
--- /dev/null
+++ b/packages/views/apps/login-request-page-desktop/vite.config.ts
@@ -0,0 +1,49 @@
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import path from 'path';
+import { config } from 'dotenv';
+
+config();
+
+let env = {} as { WS_PATH: string, HTTP_PATH: string };
+if (process.env.NODE_ENV === 'production') {
+  console.warn('Using production environment');
+  env = {
+    WS_PATH: 'wss://cash.getcode.com',
+    HTTP_PATH: 'https://cash.getcode.com',
+  }
+} else {
+  console.warn('Using dev environment');
+  env = {
+    WS_PATH: 'ws://localhost:3000',
+    HTTP_PATH: 'http://localhost:3000',
+  };
+}
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  base: '/v1/elements/login-request-modal-desktop/',
+  plugins: [
+    vue(),
+  ],
+  root: path.resolve(__dirname, './'),
+  resolve: {
+    alias: {
+      crypto: 'crypto-browserify',
+      process: "process/browser",
+      stream: "stream-browserify",
+      zlib: "browserify-zlib",
+    },
+  },
+  define: {
+    'process.env': env,
+    'process.browser': true,
+    'global': {}
+  },
+  build: {
+    chunkSizeWarningLimit: 1600,
+  },
+  server: {
+    port: 8790,
+  },
+})
diff --git a/packages/views/apps/login-request-page-mobile/App.vue b/packages/views/apps/login-request-page-mobile/App.vue
new file mode 100644
index 0000000..d75d9b8
--- /dev/null
+++ b/packages/views/apps/login-request-page-mobile/App.vue
@@ -0,0 +1,13 @@
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  mounted() {
+  },
+});
+</script>
+
+<template>
+  <router-view></router-view>
+</template>
+
diff --git a/packages/views/apps/login-request-page-mobile/fonts/avenir/AvenirNextLTPro-Demi.otf b/packages/views/apps/login-request-page-mobile/fonts/avenir/AvenirNextLTPro-Demi.otf
new file mode 100644
index 0000000..2076a1f
Binary files /dev/null and b/packages/views/apps/login-request-page-mobile/fonts/avenir/AvenirNextLTPro-Demi.otf differ
diff --git a/packages/views/apps/login-request-page-mobile/fonts/avenir/AvenirNextLTPro-Medium.otf b/packages/views/apps/login-request-page-mobile/fonts/avenir/AvenirNextLTPro-Medium.otf
new file mode 100644
index 0000000..660511b
Binary files /dev/null and b/packages/views/apps/login-request-page-mobile/fonts/avenir/AvenirNextLTPro-Medium.otf differ
diff --git a/packages/views/apps/login-request-page-mobile/fonts/avenir/AvenirNextLTPro-Regular.otf b/packages/views/apps/login-request-page-mobile/fonts/avenir/AvenirNextLTPro-Regular.otf
new file mode 100644
index 0000000..0ae7cee
Binary files /dev/null and b/packages/views/apps/login-request-page-mobile/fonts/avenir/AvenirNextLTPro-Regular.otf differ
diff --git a/packages/views/apps/login-request-page-mobile/fonts/manrope/Manrope-Bold.ttf b/packages/views/apps/login-request-page-mobile/fonts/manrope/Manrope-Bold.ttf
new file mode 100644
index 0000000..8bbf0bd
Binary files /dev/null and b/packages/views/apps/login-request-page-mobile/fonts/manrope/Manrope-Bold.ttf differ
diff --git a/packages/views/apps/login-request-page-mobile/fonts/manrope/Manrope-ExtraBold.ttf b/packages/views/apps/login-request-page-mobile/fonts/manrope/Manrope-ExtraBold.ttf
new file mode 100644
index 0000000..3f68dff
Binary files /dev/null and b/packages/views/apps/login-request-page-mobile/fonts/manrope/Manrope-ExtraBold.ttf differ
diff --git a/packages/views/apps/login-request-page-mobile/fonts/manrope/Manrope-ExtraLight.ttf b/packages/views/apps/login-request-page-mobile/fonts/manrope/Manrope-ExtraLight.ttf
new file mode 100644
index 0000000..9d21d77
Binary files /dev/null and b/packages/views/apps/login-request-page-mobile/fonts/manrope/Manrope-ExtraLight.ttf differ
diff --git a/packages/views/apps/login-request-page-mobile/fonts/manrope/Manrope-Light.ttf b/packages/views/apps/login-request-page-mobile/fonts/manrope/Manrope-Light.ttf
new file mode 100644
index 0000000..f255257
Binary files /dev/null and b/packages/views/apps/login-request-page-mobile/fonts/manrope/Manrope-Light.ttf differ
diff --git a/packages/views/apps/login-request-page-mobile/fonts/manrope/Manrope-Medium.ttf b/packages/views/apps/login-request-page-mobile/fonts/manrope/Manrope-Medium.ttf
new file mode 100644
index 0000000..c73d774
Binary files /dev/null and b/packages/views/apps/login-request-page-mobile/fonts/manrope/Manrope-Medium.ttf differ
diff --git a/packages/views/apps/login-request-page-mobile/fonts/manrope/Manrope-Regular.ttf b/packages/views/apps/login-request-page-mobile/fonts/manrope/Manrope-Regular.ttf
new file mode 100644
index 0000000..c02b01b
Binary files /dev/null and b/packages/views/apps/login-request-page-mobile/fonts/manrope/Manrope-Regular.ttf differ
diff --git a/packages/views/apps/login-request-page-mobile/fonts/manrope/Manrope-SemiBold.ttf b/packages/views/apps/login-request-page-mobile/fonts/manrope/Manrope-SemiBold.ttf
new file mode 100644
index 0000000..30ee031
Binary files /dev/null and b/packages/views/apps/login-request-page-mobile/fonts/manrope/Manrope-SemiBold.ttf differ
diff --git a/packages/views/apps/login-request-page-mobile/index.html b/packages/views/apps/login-request-page-mobile/index.html
new file mode 100644
index 0000000..40b9874
--- /dev/null
+++ b/packages/views/apps/login-request-page-mobile/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en" style="background: transparent; color-scheme: light;">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Code SDK - Card</title>
+    <meta content="width=device-width, initial-scale=1" name="viewport">
+  </head>
+  <body class="">
+    <div id="app"></div>
+
+    <script>
+      // Work-around node polyfills missing in Vite.
+      window.global = window;
+    </script>
+
+    <script type="module">
+      // Polyfill for Buffer, required by some dependencies
+      import { Buffer } from "buffer";
+      window.Buffer = Buffer;
+    </script>
+
+    <script type="module" src="./index.js"></script>
+  </body>
+</html>
diff --git a/packages/views/apps/login-request-page-mobile/index.js b/packages/views/apps/login-request-page-mobile/index.js
new file mode 100644
index 0000000..2985d1d
--- /dev/null
+++ b/packages/views/apps/login-request-page-mobile/index.js
@@ -0,0 +1,17 @@
+import { createApp } from 'vue'
+
+import App from './App.vue'
+import CodeApp from '../../src/index'
+import { routes } from '../../src/routes/pages/login-request-page-mobile'
+
+import './style.css'
+
+const opt = {
+  wsPath: process.env.WS_PATH,
+  httpPath: process.env.HTTP_PATH,
+  routes,
+}
+
+const app = createApp(App);
+app.use(CodeApp, opt);
+app.mount("#app");
\ No newline at end of file
diff --git a/packages/views/apps/login-request-page-mobile/style.css b/packages/views/apps/login-request-page-mobile/style.css
new file mode 100644
index 0000000..702569c
--- /dev/null
+++ b/packages/views/apps/login-request-page-mobile/style.css
@@ -0,0 +1,47 @@
+/* ./src/index.css */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+
+@layer base {
+  @font-face {
+    font-family: "Avenir Next LT Pro Regular";
+    font-style: normal;
+    font-weight: 400;
+    font-display: block;
+    src: url(/fonts/avenir/AvenirNextLTPro-Regular.otf) format("opentype");
+  }
+  @font-face {
+    font-family: "Avenir Next LT Pro Medium";
+    font-style: normal;
+    font-weight: 600;
+    font-display: block;
+    src: url(/fonts/avenir/AvenirNextLTPro-Medium.otf) format("opentype");
+  }
+  @font-face {
+    font-family: "Avenir Next LT Pro Bold";
+    font-style: normal;
+    font-weight: 900;
+    font-display: block;
+    src: url(/fonts/avenir/AvenirNextLTPro-Demi.otf) format("opentype");
+  }
+}
+
+:root {
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: #555;
+
+  font-family: 'Avenir Next LT Pro Regular', sans-serif;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
diff --git a/packages/views/apps/login-request-page-mobile/vite.config.ts b/packages/views/apps/login-request-page-mobile/vite.config.ts
new file mode 100644
index 0000000..3be6c3c
--- /dev/null
+++ b/packages/views/apps/login-request-page-mobile/vite.config.ts
@@ -0,0 +1,49 @@
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import path from 'path';
+import { config } from 'dotenv';
+
+config();
+
+let env = {} as { WS_PATH: string, HTTP_PATH: string };
+if (process.env.NODE_ENV === 'production') {
+  console.warn('Using production environment');
+  env = {
+    WS_PATH: 'wss://cash.getcode.com',
+    HTTP_PATH: 'https://cash.getcode.com',
+  }
+} else {
+  console.warn('Using dev environment');
+  env = {
+    WS_PATH: 'ws://localhost:3000',
+    HTTP_PATH: 'http://localhost:3000',
+  };
+}
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  base: '/v1/elements/login-request-modal-mobile/',
+  plugins: [
+    vue(),
+  ],
+  root: path.resolve(__dirname, './'),
+  resolve: {
+    alias: {
+      crypto: 'crypto-browserify',
+      process: "process/browser",
+      stream: "stream-browserify",
+      zlib: "browserify-zlib",
+    },
+  },
+  define: {
+    'process.env': env,
+    'process.browser': true,
+    'global': {}
+  },
+  build: {
+    chunkSizeWarningLimit: 1600,
+  },
+  server: {
+    port: 8790,
+  },
+})
diff --git a/packages/views/apps/payment-request-button/index.js b/packages/views/apps/payment-request-button/index.js
index 6707247..0a49aac 100644
--- a/packages/views/apps/payment-request-button/index.js
+++ b/packages/views/apps/payment-request-button/index.js
@@ -2,7 +2,7 @@ import { createApp } from 'vue'
 
 import App from './App.vue'
 import CodeApp from '../../src/index'
-import { routes } from '../../src/routes/payment-request-button'
+import { routes } from '../../src/routes/buttons/payment-request-button'
 
 import './style.css'
 
diff --git a/packages/views/apps/payment-request-modal-desktop/index.js b/packages/views/apps/payment-request-modal-desktop/index.js
index 3eebff1..d97ae4b 100644
--- a/packages/views/apps/payment-request-modal-desktop/index.js
+++ b/packages/views/apps/payment-request-modal-desktop/index.js
@@ -2,7 +2,7 @@ import { createApp } from 'vue'
 
 import App from './App.vue'
 import CodeApp from '../../src/index'
-import { routes } from '../../src/routes/payment-request-modal-desktop'
+import { routes } from '../../src/routes/modals/payment-request-modal-desktop'
 
 import './style.css'
 
diff --git a/packages/views/apps/payment-request-modal-mobile/index.js b/packages/views/apps/payment-request-modal-mobile/index.js
index 03f13f9..6a28b36 100644
--- a/packages/views/apps/payment-request-modal-mobile/index.js
+++ b/packages/views/apps/payment-request-modal-mobile/index.js
@@ -2,7 +2,7 @@ import { createApp } from 'vue'
 
 import App from './App.vue'
 import CodeApp from '../../src/index'
-import { routes } from '../../src/routes/payment-request-modal-mobile'
+import { routes } from '../../src/routes/modals/payment-request-modal-mobile'
 
 import './style.css'
 
diff --git a/packages/views/apps/payment-request-page-desktop/App.vue b/packages/views/apps/payment-request-page-desktop/App.vue
new file mode 100644
index 0000000..d75d9b8
--- /dev/null
+++ b/packages/views/apps/payment-request-page-desktop/App.vue
@@ -0,0 +1,13 @@
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  mounted() {
+  },
+});
+</script>
+
+<template>
+  <router-view></router-view>
+</template>
+
diff --git a/packages/views/apps/payment-request-page-desktop/fonts/avenir/AvenirNextLTPro-Demi.otf b/packages/views/apps/payment-request-page-desktop/fonts/avenir/AvenirNextLTPro-Demi.otf
new file mode 100644
index 0000000..2076a1f
Binary files /dev/null and b/packages/views/apps/payment-request-page-desktop/fonts/avenir/AvenirNextLTPro-Demi.otf differ
diff --git a/packages/views/apps/payment-request-page-desktop/fonts/avenir/AvenirNextLTPro-Medium.otf b/packages/views/apps/payment-request-page-desktop/fonts/avenir/AvenirNextLTPro-Medium.otf
new file mode 100644
index 0000000..660511b
Binary files /dev/null and b/packages/views/apps/payment-request-page-desktop/fonts/avenir/AvenirNextLTPro-Medium.otf differ
diff --git a/packages/views/apps/payment-request-page-desktop/fonts/avenir/AvenirNextLTPro-Regular.otf b/packages/views/apps/payment-request-page-desktop/fonts/avenir/AvenirNextLTPro-Regular.otf
new file mode 100644
index 0000000..0ae7cee
Binary files /dev/null and b/packages/views/apps/payment-request-page-desktop/fonts/avenir/AvenirNextLTPro-Regular.otf differ
diff --git a/packages/views/apps/payment-request-page-desktop/fonts/manrope/Manrope-Bold.ttf b/packages/views/apps/payment-request-page-desktop/fonts/manrope/Manrope-Bold.ttf
new file mode 100644
index 0000000..8bbf0bd
Binary files /dev/null and b/packages/views/apps/payment-request-page-desktop/fonts/manrope/Manrope-Bold.ttf differ
diff --git a/packages/views/apps/payment-request-page-desktop/fonts/manrope/Manrope-ExtraBold.ttf b/packages/views/apps/payment-request-page-desktop/fonts/manrope/Manrope-ExtraBold.ttf
new file mode 100644
index 0000000..3f68dff
Binary files /dev/null and b/packages/views/apps/payment-request-page-desktop/fonts/manrope/Manrope-ExtraBold.ttf differ
diff --git a/packages/views/apps/payment-request-page-desktop/fonts/manrope/Manrope-ExtraLight.ttf b/packages/views/apps/payment-request-page-desktop/fonts/manrope/Manrope-ExtraLight.ttf
new file mode 100644
index 0000000..9d21d77
Binary files /dev/null and b/packages/views/apps/payment-request-page-desktop/fonts/manrope/Manrope-ExtraLight.ttf differ
diff --git a/packages/views/apps/payment-request-page-desktop/fonts/manrope/Manrope-Light.ttf b/packages/views/apps/payment-request-page-desktop/fonts/manrope/Manrope-Light.ttf
new file mode 100644
index 0000000..f255257
Binary files /dev/null and b/packages/views/apps/payment-request-page-desktop/fonts/manrope/Manrope-Light.ttf differ
diff --git a/packages/views/apps/payment-request-page-desktop/fonts/manrope/Manrope-Medium.ttf b/packages/views/apps/payment-request-page-desktop/fonts/manrope/Manrope-Medium.ttf
new file mode 100644
index 0000000..c73d774
Binary files /dev/null and b/packages/views/apps/payment-request-page-desktop/fonts/manrope/Manrope-Medium.ttf differ
diff --git a/packages/views/apps/payment-request-page-desktop/fonts/manrope/Manrope-Regular.ttf b/packages/views/apps/payment-request-page-desktop/fonts/manrope/Manrope-Regular.ttf
new file mode 100644
index 0000000..c02b01b
Binary files /dev/null and b/packages/views/apps/payment-request-page-desktop/fonts/manrope/Manrope-Regular.ttf differ
diff --git a/packages/views/apps/payment-request-page-desktop/fonts/manrope/Manrope-SemiBold.ttf b/packages/views/apps/payment-request-page-desktop/fonts/manrope/Manrope-SemiBold.ttf
new file mode 100644
index 0000000..30ee031
Binary files /dev/null and b/packages/views/apps/payment-request-page-desktop/fonts/manrope/Manrope-SemiBold.ttf differ
diff --git a/packages/views/apps/payment-request-page-desktop/fonts/roboto/RobotoMono-Medium.ttf b/packages/views/apps/payment-request-page-desktop/fonts/roboto/RobotoMono-Medium.ttf
new file mode 100644
index 0000000..f6c149a
Binary files /dev/null and b/packages/views/apps/payment-request-page-desktop/fonts/roboto/RobotoMono-Medium.ttf differ
diff --git a/packages/views/apps/payment-request-page-desktop/index.html b/packages/views/apps/payment-request-page-desktop/index.html
new file mode 100644
index 0000000..40b9874
--- /dev/null
+++ b/packages/views/apps/payment-request-page-desktop/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en" style="background: transparent; color-scheme: light;">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Code SDK - Card</title>
+    <meta content="width=device-width, initial-scale=1" name="viewport">
+  </head>
+  <body class="">
+    <div id="app"></div>
+
+    <script>
+      // Work-around node polyfills missing in Vite.
+      window.global = window;
+    </script>
+
+    <script type="module">
+      // Polyfill for Buffer, required by some dependencies
+      import { Buffer } from "buffer";
+      window.Buffer = Buffer;
+    </script>
+
+    <script type="module" src="./index.js"></script>
+  </body>
+</html>
diff --git a/packages/views/apps/payment-request-page-desktop/index.js b/packages/views/apps/payment-request-page-desktop/index.js
new file mode 100644
index 0000000..2746e7d
--- /dev/null
+++ b/packages/views/apps/payment-request-page-desktop/index.js
@@ -0,0 +1,17 @@
+import { createApp } from 'vue'
+
+import App from './App.vue'
+import CodeApp from '../../src/index'
+import { routes } from '../../src/routes/pages/payment-request-page-desktop'
+
+import './style.css'
+
+const opt = {
+  wsPath: process.env.WS_PATH,
+  httpPath: process.env.HTTP_PATH,
+  routes,
+}
+
+const app = createApp(App);
+app.use(CodeApp, opt);
+app.mount("#app");
\ No newline at end of file
diff --git a/packages/views/apps/payment-request-page-desktop/style.css b/packages/views/apps/payment-request-page-desktop/style.css
new file mode 100644
index 0000000..78c9427
--- /dev/null
+++ b/packages/views/apps/payment-request-page-desktop/style.css
@@ -0,0 +1,54 @@
+/* ./src/index.css */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+
+@layer base {
+  @font-face {
+    font-family: "Avenir Next LT Pro Regular";
+    font-style: normal;
+    font-weight: 400;
+    font-display: block;
+    src: url(/fonts/avenir/AvenirNextLTPro-Regular.otf) format("opentype");
+  }
+  @font-face {
+    font-family: "Avenir Next LT Pro Medium";
+    font-style: normal;
+    font-weight: 600;
+    font-display: block;
+    src: url(/fonts/avenir/AvenirNextLTPro-Medium.otf) format("opentype");
+  }
+  @font-face {
+    font-family: "Avenir Next LT Pro Bold";
+    font-style: normal;
+    font-weight: 900;
+    font-display: block;
+    src: url(/fonts/avenir/AvenirNextLTPro-Demi.otf) format("opentype");
+  }
+  @font-face {
+    font-family: "Roboto Mono Medium";
+    font-style: normal;
+    font-weight: 500;
+    font-display: block;
+    src: url(/fonts/roboto/RobotoMono-Medium.ttf) format("truetype");
+  }
+}
+
+:root {
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: #555;
+
+  font-family: 'Avenir Next LT Pro Regular', sans-serif;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
diff --git a/packages/views/apps/payment-request-page-desktop/vite.config.ts b/packages/views/apps/payment-request-page-desktop/vite.config.ts
new file mode 100644
index 0000000..88f31a6
--- /dev/null
+++ b/packages/views/apps/payment-request-page-desktop/vite.config.ts
@@ -0,0 +1,49 @@
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import path from 'path';
+import { config } from 'dotenv';
+
+config();
+
+let env = {} as { WS_PATH: string, HTTP_PATH: string };
+if (process.env.NODE_ENV === 'production') {
+  console.warn('Using production environment');
+  env = {
+    WS_PATH: 'wss://cash.getcode.com',
+    HTTP_PATH: 'https://cash.getcode.com',
+  }
+} else {
+  console.warn('Using dev environment');
+  env = {
+    WS_PATH: 'ws://localhost:3000',
+    HTTP_PATH: 'http://localhost:3000',
+  };
+}
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  base: '/v1/elements/payment-request-modal-desktop/',
+  plugins: [
+    vue(),
+  ],
+  root: path.resolve(__dirname, './'),
+  resolve: {
+    alias: {
+      crypto: 'crypto-browserify',
+      process: "process/browser",
+      stream: "stream-browserify",
+      zlib: "browserify-zlib",
+    },
+  },
+  define: {
+    'process.env': env,
+    'process.browser': true,
+    'global': {}
+  },
+  build: {
+    chunkSizeWarningLimit: 1600,
+  },
+  server: {
+    port: 8790,
+  },
+})
diff --git a/packages/views/apps/payment-request-page-mobile/App.vue b/packages/views/apps/payment-request-page-mobile/App.vue
new file mode 100644
index 0000000..d75d9b8
--- /dev/null
+++ b/packages/views/apps/payment-request-page-mobile/App.vue
@@ -0,0 +1,13 @@
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  mounted() {
+  },
+});
+</script>
+
+<template>
+  <router-view></router-view>
+</template>
+
diff --git a/packages/views/apps/payment-request-page-mobile/fonts/avenir/AvenirNextLTPro-Demi.otf b/packages/views/apps/payment-request-page-mobile/fonts/avenir/AvenirNextLTPro-Demi.otf
new file mode 100644
index 0000000..2076a1f
Binary files /dev/null and b/packages/views/apps/payment-request-page-mobile/fonts/avenir/AvenirNextLTPro-Demi.otf differ
diff --git a/packages/views/apps/payment-request-page-mobile/fonts/avenir/AvenirNextLTPro-Medium.otf b/packages/views/apps/payment-request-page-mobile/fonts/avenir/AvenirNextLTPro-Medium.otf
new file mode 100644
index 0000000..660511b
Binary files /dev/null and b/packages/views/apps/payment-request-page-mobile/fonts/avenir/AvenirNextLTPro-Medium.otf differ
diff --git a/packages/views/apps/payment-request-page-mobile/fonts/avenir/AvenirNextLTPro-Regular.otf b/packages/views/apps/payment-request-page-mobile/fonts/avenir/AvenirNextLTPro-Regular.otf
new file mode 100644
index 0000000..0ae7cee
Binary files /dev/null and b/packages/views/apps/payment-request-page-mobile/fonts/avenir/AvenirNextLTPro-Regular.otf differ
diff --git a/packages/views/apps/payment-request-page-mobile/fonts/manrope/Manrope-Bold.ttf b/packages/views/apps/payment-request-page-mobile/fonts/manrope/Manrope-Bold.ttf
new file mode 100644
index 0000000..8bbf0bd
Binary files /dev/null and b/packages/views/apps/payment-request-page-mobile/fonts/manrope/Manrope-Bold.ttf differ
diff --git a/packages/views/apps/payment-request-page-mobile/fonts/manrope/Manrope-ExtraBold.ttf b/packages/views/apps/payment-request-page-mobile/fonts/manrope/Manrope-ExtraBold.ttf
new file mode 100644
index 0000000..3f68dff
Binary files /dev/null and b/packages/views/apps/payment-request-page-mobile/fonts/manrope/Manrope-ExtraBold.ttf differ
diff --git a/packages/views/apps/payment-request-page-mobile/fonts/manrope/Manrope-ExtraLight.ttf b/packages/views/apps/payment-request-page-mobile/fonts/manrope/Manrope-ExtraLight.ttf
new file mode 100644
index 0000000..9d21d77
Binary files /dev/null and b/packages/views/apps/payment-request-page-mobile/fonts/manrope/Manrope-ExtraLight.ttf differ
diff --git a/packages/views/apps/payment-request-page-mobile/fonts/manrope/Manrope-Light.ttf b/packages/views/apps/payment-request-page-mobile/fonts/manrope/Manrope-Light.ttf
new file mode 100644
index 0000000..f255257
Binary files /dev/null and b/packages/views/apps/payment-request-page-mobile/fonts/manrope/Manrope-Light.ttf differ
diff --git a/packages/views/apps/payment-request-page-mobile/fonts/manrope/Manrope-Medium.ttf b/packages/views/apps/payment-request-page-mobile/fonts/manrope/Manrope-Medium.ttf
new file mode 100644
index 0000000..c73d774
Binary files /dev/null and b/packages/views/apps/payment-request-page-mobile/fonts/manrope/Manrope-Medium.ttf differ
diff --git a/packages/views/apps/payment-request-page-mobile/fonts/manrope/Manrope-Regular.ttf b/packages/views/apps/payment-request-page-mobile/fonts/manrope/Manrope-Regular.ttf
new file mode 100644
index 0000000..c02b01b
Binary files /dev/null and b/packages/views/apps/payment-request-page-mobile/fonts/manrope/Manrope-Regular.ttf differ
diff --git a/packages/views/apps/payment-request-page-mobile/fonts/manrope/Manrope-SemiBold.ttf b/packages/views/apps/payment-request-page-mobile/fonts/manrope/Manrope-SemiBold.ttf
new file mode 100644
index 0000000..30ee031
Binary files /dev/null and b/packages/views/apps/payment-request-page-mobile/fonts/manrope/Manrope-SemiBold.ttf differ
diff --git a/packages/views/apps/payment-request-page-mobile/index.html b/packages/views/apps/payment-request-page-mobile/index.html
new file mode 100644
index 0000000..40b9874
--- /dev/null
+++ b/packages/views/apps/payment-request-page-mobile/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en" style="background: transparent; color-scheme: light;">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Code SDK - Card</title>
+    <meta content="width=device-width, initial-scale=1" name="viewport">
+  </head>
+  <body class="">
+    <div id="app"></div>
+
+    <script>
+      // Work-around node polyfills missing in Vite.
+      window.global = window;
+    </script>
+
+    <script type="module">
+      // Polyfill for Buffer, required by some dependencies
+      import { Buffer } from "buffer";
+      window.Buffer = Buffer;
+    </script>
+
+    <script type="module" src="./index.js"></script>
+  </body>
+</html>
diff --git a/packages/views/apps/payment-request-page-mobile/index.js b/packages/views/apps/payment-request-page-mobile/index.js
new file mode 100644
index 0000000..11a2c11
--- /dev/null
+++ b/packages/views/apps/payment-request-page-mobile/index.js
@@ -0,0 +1,17 @@
+import { createApp } from 'vue'
+
+import App from './App.vue'
+import CodeApp from '../../src/index'
+import { routes } from '../../src/routes/pages/payment-request-page-mobile'
+
+import './style.css'
+
+const opt = {
+  wsPath: process.env.WS_PATH,
+  httpPath: process.env.HTTP_PATH,
+  routes,
+}
+
+const app = createApp(App);
+app.use(CodeApp, opt);
+app.mount("#app");
\ No newline at end of file
diff --git a/packages/views/apps/payment-request-page-mobile/style.css b/packages/views/apps/payment-request-page-mobile/style.css
new file mode 100644
index 0000000..702569c
--- /dev/null
+++ b/packages/views/apps/payment-request-page-mobile/style.css
@@ -0,0 +1,47 @@
+/* ./src/index.css */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+
+@layer base {
+  @font-face {
+    font-family: "Avenir Next LT Pro Regular";
+    font-style: normal;
+    font-weight: 400;
+    font-display: block;
+    src: url(/fonts/avenir/AvenirNextLTPro-Regular.otf) format("opentype");
+  }
+  @font-face {
+    font-family: "Avenir Next LT Pro Medium";
+    font-style: normal;
+    font-weight: 600;
+    font-display: block;
+    src: url(/fonts/avenir/AvenirNextLTPro-Medium.otf) format("opentype");
+  }
+  @font-face {
+    font-family: "Avenir Next LT Pro Bold";
+    font-style: normal;
+    font-weight: 900;
+    font-display: block;
+    src: url(/fonts/avenir/AvenirNextLTPro-Demi.otf) format("opentype");
+  }
+}
+
+:root {
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: #555;
+
+  font-family: 'Avenir Next LT Pro Regular', sans-serif;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
diff --git a/packages/views/apps/payment-request-page-mobile/vite.config.ts b/packages/views/apps/payment-request-page-mobile/vite.config.ts
new file mode 100644
index 0000000..4615813
--- /dev/null
+++ b/packages/views/apps/payment-request-page-mobile/vite.config.ts
@@ -0,0 +1,49 @@
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import path from 'path';
+import { config } from 'dotenv';
+
+config();
+
+let env = {} as { WS_PATH: string, HTTP_PATH: string };
+if (process.env.NODE_ENV === 'production') {
+  console.warn('Using production environment');
+  env = {
+    WS_PATH: 'wss://cash.getcode.com',
+    HTTP_PATH: 'https://cash.getcode.com',
+  }
+} else {
+  console.warn('Using dev environment');
+  env = {
+    WS_PATH: 'ws://localhost:3000',
+    HTTP_PATH: 'http://localhost:3000',
+  };
+}
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  base: '/v1/elements/payment-request-modal-mobile/',
+  plugins: [
+    vue(),
+  ],
+  root: path.resolve(__dirname, './'),
+  resolve: {
+    alias: {
+      crypto: 'crypto-browserify',
+      process: "process/browser",
+      stream: "stream-browserify",
+      zlib: "browserify-zlib",
+    },
+  },
+  define: {
+    'process.env': env,
+    'process.browser': true,
+    'global': {}
+  },
+  build: {
+    chunkSizeWarningLimit: 1600,
+  },
+  server: {
+    port: 8790,
+  },
+})
diff --git a/packages/views/apps/tip-request-button/App.vue b/packages/views/apps/tip-request-button/App.vue
new file mode 100644
index 0000000..d75d9b8
--- /dev/null
+++ b/packages/views/apps/tip-request-button/App.vue
@@ -0,0 +1,13 @@
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  mounted() {
+  },
+});
+</script>
+
+<template>
+  <router-view></router-view>
+</template>
+
diff --git a/packages/views/apps/tip-request-button/fonts/avenir/AvenirNextLTPro-Demi.otf b/packages/views/apps/tip-request-button/fonts/avenir/AvenirNextLTPro-Demi.otf
new file mode 100644
index 0000000..2076a1f
Binary files /dev/null and b/packages/views/apps/tip-request-button/fonts/avenir/AvenirNextLTPro-Demi.otf differ
diff --git a/packages/views/apps/tip-request-button/fonts/avenir/AvenirNextLTPro-Medium.otf b/packages/views/apps/tip-request-button/fonts/avenir/AvenirNextLTPro-Medium.otf
new file mode 100644
index 0000000..660511b
Binary files /dev/null and b/packages/views/apps/tip-request-button/fonts/avenir/AvenirNextLTPro-Medium.otf differ
diff --git a/packages/views/apps/tip-request-button/fonts/avenir/AvenirNextLTPro-Regular.otf b/packages/views/apps/tip-request-button/fonts/avenir/AvenirNextLTPro-Regular.otf
new file mode 100644
index 0000000..0ae7cee
Binary files /dev/null and b/packages/views/apps/tip-request-button/fonts/avenir/AvenirNextLTPro-Regular.otf differ
diff --git a/packages/views/apps/tip-request-button/fonts/manrope/Manrope-Bold.ttf b/packages/views/apps/tip-request-button/fonts/manrope/Manrope-Bold.ttf
new file mode 100644
index 0000000..8bbf0bd
Binary files /dev/null and b/packages/views/apps/tip-request-button/fonts/manrope/Manrope-Bold.ttf differ
diff --git a/packages/views/apps/tip-request-button/fonts/manrope/Manrope-ExtraBold.ttf b/packages/views/apps/tip-request-button/fonts/manrope/Manrope-ExtraBold.ttf
new file mode 100644
index 0000000..3f68dff
Binary files /dev/null and b/packages/views/apps/tip-request-button/fonts/manrope/Manrope-ExtraBold.ttf differ
diff --git a/packages/views/apps/tip-request-button/fonts/manrope/Manrope-ExtraLight.ttf b/packages/views/apps/tip-request-button/fonts/manrope/Manrope-ExtraLight.ttf
new file mode 100644
index 0000000..9d21d77
Binary files /dev/null and b/packages/views/apps/tip-request-button/fonts/manrope/Manrope-ExtraLight.ttf differ
diff --git a/packages/views/apps/tip-request-button/fonts/manrope/Manrope-Light.ttf b/packages/views/apps/tip-request-button/fonts/manrope/Manrope-Light.ttf
new file mode 100644
index 0000000..f255257
Binary files /dev/null and b/packages/views/apps/tip-request-button/fonts/manrope/Manrope-Light.ttf differ
diff --git a/packages/views/apps/tip-request-button/fonts/manrope/Manrope-Medium.ttf b/packages/views/apps/tip-request-button/fonts/manrope/Manrope-Medium.ttf
new file mode 100644
index 0000000..c73d774
Binary files /dev/null and b/packages/views/apps/tip-request-button/fonts/manrope/Manrope-Medium.ttf differ
diff --git a/packages/views/apps/tip-request-button/fonts/manrope/Manrope-Regular.ttf b/packages/views/apps/tip-request-button/fonts/manrope/Manrope-Regular.ttf
new file mode 100644
index 0000000..c02b01b
Binary files /dev/null and b/packages/views/apps/tip-request-button/fonts/manrope/Manrope-Regular.ttf differ
diff --git a/packages/views/apps/tip-request-button/fonts/manrope/Manrope-SemiBold.ttf b/packages/views/apps/tip-request-button/fonts/manrope/Manrope-SemiBold.ttf
new file mode 100644
index 0000000..30ee031
Binary files /dev/null and b/packages/views/apps/tip-request-button/fonts/manrope/Manrope-SemiBold.ttf differ
diff --git a/packages/views/apps/tip-request-button/index.html b/packages/views/apps/tip-request-button/index.html
new file mode 100644
index 0000000..20ac7df
--- /dev/null
+++ b/packages/views/apps/tip-request-button/index.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html lang="en" style="background:none transparent; color-scheme:light;">
+
+<head>
+  <meta charset="UTF-8" />
+  <title>Code SDK - Button</title>
+  <meta content="width=device-width, initial-scale=1" name="viewport">
+</head>
+
+<body>
+  <div id="app">
+    <svg viewBox="0 0 24 24" class="spinner-svg">
+      <g transform="translate(1 1)" fill-rule="nonzero" fill="none">
+        <circle cx="11" cy="11" r="11"></circle>
+        <path d="M10.998 22a.846.846 0 0 1 0-1.692 9.308 9.308 0 0
+          0 0-18.616 9.286 9.286 0 0 0-7.205 3.416.846.846 0 1 1-1.31-1.072A10.978
+          10.978 0 0 1 10.998 0c6.075 0 11 4.925 11 11s-4.925 11-11 11z" fill="currentColor"></path>
+      </g>
+    </svg>
+  </div>
+
+  <style>
+    .spinner-svg {
+      margin: 0 auto;
+      display: block;
+      width: 24px;
+      height: 24px;
+      color: black;
+      transform-origin: 50% 50%;
+      transition-timing-function: ease;
+      transition-property: opacity, transform;
+      animation: SpinnerAnimationShow 250ms normal ease, 
+                 SpinnerAnimationRotation .6s linear infinite,
+                 SpinnerFadeIn 500ms ease 250ms forwards;
+      opacity: 0;
+    }
+
+    @keyframes SpinnerFadeIn {
+      0% {
+        opacity: 0;
+      }
+      100% {
+        opacity: 1;
+      }
+    }
+
+    @keyframes SpinnerAnimationShow {
+      0% {
+        transform: rotate(0deg);
+      }
+
+      100% {
+        transform: rotate(360deg);
+      }
+    }
+
+    @keyframes SpinnerAnimationRotation {
+      100% {
+        transform: rotate(360deg);
+      }
+    }
+  </style>
+
+  <script>
+    // Work-around node polyfills missing in Vite.
+    window.global = window;
+  </script>
+
+  <script type="module" defer>
+    // Polyfill for Buffer, required by some dependencies
+    import { Buffer } from "buffer";
+    window.Buffer = Buffer;
+  </script>
+
+  <script type="module" src="./index.js" defer></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/packages/views/apps/tip-request-button/index.js b/packages/views/apps/tip-request-button/index.js
new file mode 100644
index 0000000..bb47b55
--- /dev/null
+++ b/packages/views/apps/tip-request-button/index.js
@@ -0,0 +1,16 @@
+import { createApp } from 'vue'
+
+import App from './App.vue'
+import CodeApp from '../../src/index'
+import { routes } from '../../src/routes/buttons/tip-request-button'
+
+import './style.css'
+
+const opt = {
+  httpPath: process.env.HTTP_PATH,
+  routes,
+}
+
+const app = createApp(App);
+app.use(CodeApp, opt);
+app.mount("#app");
\ No newline at end of file
diff --git a/packages/views/apps/tip-request-button/style.css b/packages/views/apps/tip-request-button/style.css
new file mode 100644
index 0000000..702569c
--- /dev/null
+++ b/packages/views/apps/tip-request-button/style.css
@@ -0,0 +1,47 @@
+/* ./src/index.css */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+
+@layer base {
+  @font-face {
+    font-family: "Avenir Next LT Pro Regular";
+    font-style: normal;
+    font-weight: 400;
+    font-display: block;
+    src: url(/fonts/avenir/AvenirNextLTPro-Regular.otf) format("opentype");
+  }
+  @font-face {
+    font-family: "Avenir Next LT Pro Medium";
+    font-style: normal;
+    font-weight: 600;
+    font-display: block;
+    src: url(/fonts/avenir/AvenirNextLTPro-Medium.otf) format("opentype");
+  }
+  @font-face {
+    font-family: "Avenir Next LT Pro Bold";
+    font-style: normal;
+    font-weight: 900;
+    font-display: block;
+    src: url(/fonts/avenir/AvenirNextLTPro-Demi.otf) format("opentype");
+  }
+}
+
+:root {
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: #555;
+
+  font-family: 'Avenir Next LT Pro Regular', sans-serif;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
diff --git a/packages/views/apps/tip-request-button/vite.config.ts b/packages/views/apps/tip-request-button/vite.config.ts
new file mode 100644
index 0000000..2529285
--- /dev/null
+++ b/packages/views/apps/tip-request-button/vite.config.ts
@@ -0,0 +1,51 @@
+import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js';
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import path from 'path';
+import { config } from 'dotenv';
+
+config();
+
+let env = {} as { WS_PATH: string, HTTP_PATH: string };
+if (process.env.NODE_ENV === 'production') {
+  console.warn('Using production environment');
+  env = {
+    WS_PATH: 'wss://cash.getcode.com',
+    HTTP_PATH: 'https://cash.getcode.com',
+  }
+} else {
+  console.warn('Using dev environment');
+  env = {
+    WS_PATH: 'ws://localhost:3000',
+    HTTP_PATH: 'http://localhost:3000',
+  };
+}
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  base: '/v1/elements/login-request-button/',
+  plugins: [
+    vue(),
+    cssInjectedByJsPlugin(),
+  ],
+  root: path.resolve(__dirname, './'),
+  resolve: {
+    alias: {
+      crypto: 'crypto-browserify',
+      process: "process/browser",
+      stream: "stream-browserify",
+      zlib: "browserify-zlib",
+    },
+  },
+  define: {
+    'process.env': env,
+    'process.browser': true,
+    'global': {}
+  },
+  build: {
+    chunkSizeWarningLimit: 1600,
+  },
+  server: {
+    port: 8780,
+  },
+})
diff --git a/packages/views/apps/tip-request-modal-desktop/App.vue b/packages/views/apps/tip-request-modal-desktop/App.vue
new file mode 100644
index 0000000..d75d9b8
--- /dev/null
+++ b/packages/views/apps/tip-request-modal-desktop/App.vue
@@ -0,0 +1,13 @@
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  mounted() {
+  },
+});
+</script>
+
+<template>
+  <router-view></router-view>
+</template>
+
diff --git a/packages/views/apps/tip-request-modal-desktop/fonts/avenir/AvenirNextLTPro-Demi.otf b/packages/views/apps/tip-request-modal-desktop/fonts/avenir/AvenirNextLTPro-Demi.otf
new file mode 100644
index 0000000..2076a1f
Binary files /dev/null and b/packages/views/apps/tip-request-modal-desktop/fonts/avenir/AvenirNextLTPro-Demi.otf differ
diff --git a/packages/views/apps/tip-request-modal-desktop/fonts/avenir/AvenirNextLTPro-Medium.otf b/packages/views/apps/tip-request-modal-desktop/fonts/avenir/AvenirNextLTPro-Medium.otf
new file mode 100644
index 0000000..660511b
Binary files /dev/null and b/packages/views/apps/tip-request-modal-desktop/fonts/avenir/AvenirNextLTPro-Medium.otf differ
diff --git a/packages/views/apps/tip-request-modal-desktop/fonts/avenir/AvenirNextLTPro-Regular.otf b/packages/views/apps/tip-request-modal-desktop/fonts/avenir/AvenirNextLTPro-Regular.otf
new file mode 100644
index 0000000..0ae7cee
Binary files /dev/null and b/packages/views/apps/tip-request-modal-desktop/fonts/avenir/AvenirNextLTPro-Regular.otf differ
diff --git a/packages/views/apps/tip-request-modal-desktop/fonts/manrope/Manrope-Bold.ttf b/packages/views/apps/tip-request-modal-desktop/fonts/manrope/Manrope-Bold.ttf
new file mode 100644
index 0000000..8bbf0bd
Binary files /dev/null and b/packages/views/apps/tip-request-modal-desktop/fonts/manrope/Manrope-Bold.ttf differ
diff --git a/packages/views/apps/tip-request-modal-desktop/fonts/manrope/Manrope-ExtraBold.ttf b/packages/views/apps/tip-request-modal-desktop/fonts/manrope/Manrope-ExtraBold.ttf
new file mode 100644
index 0000000..3f68dff
Binary files /dev/null and b/packages/views/apps/tip-request-modal-desktop/fonts/manrope/Manrope-ExtraBold.ttf differ
diff --git a/packages/views/apps/tip-request-modal-desktop/fonts/manrope/Manrope-ExtraLight.ttf b/packages/views/apps/tip-request-modal-desktop/fonts/manrope/Manrope-ExtraLight.ttf
new file mode 100644
index 0000000..9d21d77
Binary files /dev/null and b/packages/views/apps/tip-request-modal-desktop/fonts/manrope/Manrope-ExtraLight.ttf differ
diff --git a/packages/views/apps/tip-request-modal-desktop/fonts/manrope/Manrope-Light.ttf b/packages/views/apps/tip-request-modal-desktop/fonts/manrope/Manrope-Light.ttf
new file mode 100644
index 0000000..f255257
Binary files /dev/null and b/packages/views/apps/tip-request-modal-desktop/fonts/manrope/Manrope-Light.ttf differ
diff --git a/packages/views/apps/tip-request-modal-desktop/fonts/manrope/Manrope-Medium.ttf b/packages/views/apps/tip-request-modal-desktop/fonts/manrope/Manrope-Medium.ttf
new file mode 100644
index 0000000..c73d774
Binary files /dev/null and b/packages/views/apps/tip-request-modal-desktop/fonts/manrope/Manrope-Medium.ttf differ
diff --git a/packages/views/apps/tip-request-modal-desktop/fonts/manrope/Manrope-Regular.ttf b/packages/views/apps/tip-request-modal-desktop/fonts/manrope/Manrope-Regular.ttf
new file mode 100644
index 0000000..c02b01b
Binary files /dev/null and b/packages/views/apps/tip-request-modal-desktop/fonts/manrope/Manrope-Regular.ttf differ
diff --git a/packages/views/apps/tip-request-modal-desktop/fonts/manrope/Manrope-SemiBold.ttf b/packages/views/apps/tip-request-modal-desktop/fonts/manrope/Manrope-SemiBold.ttf
new file mode 100644
index 0000000..30ee031
Binary files /dev/null and b/packages/views/apps/tip-request-modal-desktop/fonts/manrope/Manrope-SemiBold.ttf differ
diff --git a/packages/views/apps/tip-request-modal-desktop/fonts/roboto/RobotoMono-Medium.ttf b/packages/views/apps/tip-request-modal-desktop/fonts/roboto/RobotoMono-Medium.ttf
new file mode 100644
index 0000000..f6c149a
Binary files /dev/null and b/packages/views/apps/tip-request-modal-desktop/fonts/roboto/RobotoMono-Medium.ttf differ
diff --git a/packages/views/apps/tip-request-modal-desktop/index.html b/packages/views/apps/tip-request-modal-desktop/index.html
new file mode 100644
index 0000000..40b9874
--- /dev/null
+++ b/packages/views/apps/tip-request-modal-desktop/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en" style="background: transparent; color-scheme: light;">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Code SDK - Card</title>
+    <meta content="width=device-width, initial-scale=1" name="viewport">
+  </head>
+  <body class="">
+    <div id="app"></div>
+
+    <script>
+      // Work-around node polyfills missing in Vite.
+      window.global = window;
+    </script>
+
+    <script type="module">
+      // Polyfill for Buffer, required by some dependencies
+      import { Buffer } from "buffer";
+      window.Buffer = Buffer;
+    </script>
+
+    <script type="module" src="./index.js"></script>
+  </body>
+</html>
diff --git a/packages/views/apps/tip-request-modal-desktop/index.js b/packages/views/apps/tip-request-modal-desktop/index.js
new file mode 100644
index 0000000..c4a0959
--- /dev/null
+++ b/packages/views/apps/tip-request-modal-desktop/index.js
@@ -0,0 +1,17 @@
+import { createApp } from 'vue'
+
+import App from './App.vue'
+import CodeApp from '../../src/index'
+import { routes } from '../../src/routes/modals/tip-request-modal-desktop'
+
+import './style.css'
+
+const opt = {
+  wsPath: process.env.WS_PATH,
+  httpPath: process.env.HTTP_PATH,
+  routes,
+}
+
+const app = createApp(App);
+app.use(CodeApp, opt);
+app.mount("#app");
\ No newline at end of file
diff --git a/packages/views/apps/tip-request-modal-desktop/style.css b/packages/views/apps/tip-request-modal-desktop/style.css
new file mode 100644
index 0000000..78c9427
--- /dev/null
+++ b/packages/views/apps/tip-request-modal-desktop/style.css
@@ -0,0 +1,54 @@
+/* ./src/index.css */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+
+@layer base {
+  @font-face {
+    font-family: "Avenir Next LT Pro Regular";
+    font-style: normal;
+    font-weight: 400;
+    font-display: block;
+    src: url(/fonts/avenir/AvenirNextLTPro-Regular.otf) format("opentype");
+  }
+  @font-face {
+    font-family: "Avenir Next LT Pro Medium";
+    font-style: normal;
+    font-weight: 600;
+    font-display: block;
+    src: url(/fonts/avenir/AvenirNextLTPro-Medium.otf) format("opentype");
+  }
+  @font-face {
+    font-family: "Avenir Next LT Pro Bold";
+    font-style: normal;
+    font-weight: 900;
+    font-display: block;
+    src: url(/fonts/avenir/AvenirNextLTPro-Demi.otf) format("opentype");
+  }
+  @font-face {
+    font-family: "Roboto Mono Medium";
+    font-style: normal;
+    font-weight: 500;
+    font-display: block;
+    src: url(/fonts/roboto/RobotoMono-Medium.ttf) format("truetype");
+  }
+}
+
+:root {
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: #555;
+
+  font-family: 'Avenir Next LT Pro Regular', sans-serif;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
diff --git a/packages/views/apps/tip-request-modal-desktop/vite.config.ts b/packages/views/apps/tip-request-modal-desktop/vite.config.ts
new file mode 100644
index 0000000..b290c14
--- /dev/null
+++ b/packages/views/apps/tip-request-modal-desktop/vite.config.ts
@@ -0,0 +1,49 @@
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import path from 'path';
+import { config } from 'dotenv';
+
+config();
+
+let env = {} as { WS_PATH: string, HTTP_PATH: string };
+if (process.env.NODE_ENV === 'production') {
+  console.warn('Using production environment');
+  env = {
+    WS_PATH: 'wss://cash.getcode.com',
+    HTTP_PATH: 'https://cash.getcode.com',
+  }
+} else {
+  console.warn('Using dev environment');
+  env = {
+    WS_PATH: 'ws://localhost:3000',
+    HTTP_PATH: 'http://localhost:3000',
+  };
+}
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  base: '/v1/elements/login-request-modal-desktop/',
+  plugins: [
+    vue(),
+  ],
+  root: path.resolve(__dirname, './'),
+  resolve: {
+    alias: {
+      crypto: 'crypto-browserify',
+      process: "process/browser",
+      stream: "stream-browserify",
+      zlib: "browserify-zlib",
+    },
+  },
+  define: {
+    'process.env': env,
+    'process.browser': true,
+    'global': {}
+  },
+  build: {
+    chunkSizeWarningLimit: 1600,
+  },
+  server: {
+    port: 8790,
+  },
+})
diff --git a/packages/views/apps/tip-request-modal-mobile/App.vue b/packages/views/apps/tip-request-modal-mobile/App.vue
new file mode 100644
index 0000000..d75d9b8
--- /dev/null
+++ b/packages/views/apps/tip-request-modal-mobile/App.vue
@@ -0,0 +1,13 @@
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  mounted() {
+  },
+});
+</script>
+
+<template>
+  <router-view></router-view>
+</template>
+
diff --git a/packages/views/apps/tip-request-modal-mobile/fonts/avenir/AvenirNextLTPro-Demi.otf b/packages/views/apps/tip-request-modal-mobile/fonts/avenir/AvenirNextLTPro-Demi.otf
new file mode 100644
index 0000000..2076a1f
Binary files /dev/null and b/packages/views/apps/tip-request-modal-mobile/fonts/avenir/AvenirNextLTPro-Demi.otf differ
diff --git a/packages/views/apps/tip-request-modal-mobile/fonts/avenir/AvenirNextLTPro-Medium.otf b/packages/views/apps/tip-request-modal-mobile/fonts/avenir/AvenirNextLTPro-Medium.otf
new file mode 100644
index 0000000..660511b
Binary files /dev/null and b/packages/views/apps/tip-request-modal-mobile/fonts/avenir/AvenirNextLTPro-Medium.otf differ
diff --git a/packages/views/apps/tip-request-modal-mobile/fonts/avenir/AvenirNextLTPro-Regular.otf b/packages/views/apps/tip-request-modal-mobile/fonts/avenir/AvenirNextLTPro-Regular.otf
new file mode 100644
index 0000000..0ae7cee
Binary files /dev/null and b/packages/views/apps/tip-request-modal-mobile/fonts/avenir/AvenirNextLTPro-Regular.otf differ
diff --git a/packages/views/apps/tip-request-modal-mobile/fonts/manrope/Manrope-Bold.ttf b/packages/views/apps/tip-request-modal-mobile/fonts/manrope/Manrope-Bold.ttf
new file mode 100644
index 0000000..8bbf0bd
Binary files /dev/null and b/packages/views/apps/tip-request-modal-mobile/fonts/manrope/Manrope-Bold.ttf differ
diff --git a/packages/views/apps/tip-request-modal-mobile/fonts/manrope/Manrope-ExtraBold.ttf b/packages/views/apps/tip-request-modal-mobile/fonts/manrope/Manrope-ExtraBold.ttf
new file mode 100644
index 0000000..3f68dff
Binary files /dev/null and b/packages/views/apps/tip-request-modal-mobile/fonts/manrope/Manrope-ExtraBold.ttf differ
diff --git a/packages/views/apps/tip-request-modal-mobile/fonts/manrope/Manrope-ExtraLight.ttf b/packages/views/apps/tip-request-modal-mobile/fonts/manrope/Manrope-ExtraLight.ttf
new file mode 100644
index 0000000..9d21d77
Binary files /dev/null and b/packages/views/apps/tip-request-modal-mobile/fonts/manrope/Manrope-ExtraLight.ttf differ
diff --git a/packages/views/apps/tip-request-modal-mobile/fonts/manrope/Manrope-Light.ttf b/packages/views/apps/tip-request-modal-mobile/fonts/manrope/Manrope-Light.ttf
new file mode 100644
index 0000000..f255257
Binary files /dev/null and b/packages/views/apps/tip-request-modal-mobile/fonts/manrope/Manrope-Light.ttf differ
diff --git a/packages/views/apps/tip-request-modal-mobile/fonts/manrope/Manrope-Medium.ttf b/packages/views/apps/tip-request-modal-mobile/fonts/manrope/Manrope-Medium.ttf
new file mode 100644
index 0000000..c73d774
Binary files /dev/null and b/packages/views/apps/tip-request-modal-mobile/fonts/manrope/Manrope-Medium.ttf differ
diff --git a/packages/views/apps/tip-request-modal-mobile/fonts/manrope/Manrope-Regular.ttf b/packages/views/apps/tip-request-modal-mobile/fonts/manrope/Manrope-Regular.ttf
new file mode 100644
index 0000000..c02b01b
Binary files /dev/null and b/packages/views/apps/tip-request-modal-mobile/fonts/manrope/Manrope-Regular.ttf differ
diff --git a/packages/views/apps/tip-request-modal-mobile/fonts/manrope/Manrope-SemiBold.ttf b/packages/views/apps/tip-request-modal-mobile/fonts/manrope/Manrope-SemiBold.ttf
new file mode 100644
index 0000000..30ee031
Binary files /dev/null and b/packages/views/apps/tip-request-modal-mobile/fonts/manrope/Manrope-SemiBold.ttf differ
diff --git a/packages/views/apps/tip-request-modal-mobile/index.html b/packages/views/apps/tip-request-modal-mobile/index.html
new file mode 100644
index 0000000..40b9874
--- /dev/null
+++ b/packages/views/apps/tip-request-modal-mobile/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en" style="background: transparent; color-scheme: light;">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Code SDK - Card</title>
+    <meta content="width=device-width, initial-scale=1" name="viewport">
+  </head>
+  <body class="">
+    <div id="app"></div>
+
+    <script>
+      // Work-around node polyfills missing in Vite.
+      window.global = window;
+    </script>
+
+    <script type="module">
+      // Polyfill for Buffer, required by some dependencies
+      import { Buffer } from "buffer";
+      window.Buffer = Buffer;
+    </script>
+
+    <script type="module" src="./index.js"></script>
+  </body>
+</html>
diff --git a/packages/views/apps/tip-request-modal-mobile/index.js b/packages/views/apps/tip-request-modal-mobile/index.js
new file mode 100644
index 0000000..833c37b
--- /dev/null
+++ b/packages/views/apps/tip-request-modal-mobile/index.js
@@ -0,0 +1,17 @@
+import { createApp } from 'vue'
+
+import App from './App.vue'
+import CodeApp from '../../src/index'
+import { routes } from '../../src/routes/modals/tip-request-modal-mobile'
+
+import './style.css'
+
+const opt = {
+  wsPath: process.env.WS_PATH,
+  httpPath: process.env.HTTP_PATH,
+  routes,
+}
+
+const app = createApp(App);
+app.use(CodeApp, opt);
+app.mount("#app");
\ No newline at end of file
diff --git a/packages/views/apps/tip-request-modal-mobile/style.css b/packages/views/apps/tip-request-modal-mobile/style.css
new file mode 100644
index 0000000..702569c
--- /dev/null
+++ b/packages/views/apps/tip-request-modal-mobile/style.css
@@ -0,0 +1,47 @@
+/* ./src/index.css */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+
+@layer base {
+  @font-face {
+    font-family: "Avenir Next LT Pro Regular";
+    font-style: normal;
+    font-weight: 400;
+    font-display: block;
+    src: url(/fonts/avenir/AvenirNextLTPro-Regular.otf) format("opentype");
+  }
+  @font-face {
+    font-family: "Avenir Next LT Pro Medium";
+    font-style: normal;
+    font-weight: 600;
+    font-display: block;
+    src: url(/fonts/avenir/AvenirNextLTPro-Medium.otf) format("opentype");
+  }
+  @font-face {
+    font-family: "Avenir Next LT Pro Bold";
+    font-style: normal;
+    font-weight: 900;
+    font-display: block;
+    src: url(/fonts/avenir/AvenirNextLTPro-Demi.otf) format("opentype");
+  }
+}
+
+:root {
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: #555;
+
+  font-family: 'Avenir Next LT Pro Regular', sans-serif;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
diff --git a/packages/views/apps/tip-request-modal-mobile/vite.config.ts b/packages/views/apps/tip-request-modal-mobile/vite.config.ts
new file mode 100644
index 0000000..3be6c3c
--- /dev/null
+++ b/packages/views/apps/tip-request-modal-mobile/vite.config.ts
@@ -0,0 +1,49 @@
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import path from 'path';
+import { config } from 'dotenv';
+
+config();
+
+let env = {} as { WS_PATH: string, HTTP_PATH: string };
+if (process.env.NODE_ENV === 'production') {
+  console.warn('Using production environment');
+  env = {
+    WS_PATH: 'wss://cash.getcode.com',
+    HTTP_PATH: 'https://cash.getcode.com',
+  }
+} else {
+  console.warn('Using dev environment');
+  env = {
+    WS_PATH: 'ws://localhost:3000',
+    HTTP_PATH: 'http://localhost:3000',
+  };
+}
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  base: '/v1/elements/login-request-modal-mobile/',
+  plugins: [
+    vue(),
+  ],
+  root: path.resolve(__dirname, './'),
+  resolve: {
+    alias: {
+      crypto: 'crypto-browserify',
+      process: "process/browser",
+      stream: "stream-browserify",
+      zlib: "browserify-zlib",
+    },
+  },
+  define: {
+    'process.env': env,
+    'process.browser': true,
+    'global': {}
+  },
+  build: {
+    chunkSizeWarningLimit: 1600,
+  },
+  server: {
+    port: 8790,
+  },
+})
diff --git a/packages/views/apps/tip-request-page-desktop/App.vue b/packages/views/apps/tip-request-page-desktop/App.vue
new file mode 100644
index 0000000..d75d9b8
--- /dev/null
+++ b/packages/views/apps/tip-request-page-desktop/App.vue
@@ -0,0 +1,13 @@
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  mounted() {
+  },
+});
+</script>
+
+<template>
+  <router-view></router-view>
+</template>
+
diff --git a/packages/views/apps/tip-request-page-desktop/fonts/avenir/AvenirNextLTPro-Demi.otf b/packages/views/apps/tip-request-page-desktop/fonts/avenir/AvenirNextLTPro-Demi.otf
new file mode 100644
index 0000000..2076a1f
Binary files /dev/null and b/packages/views/apps/tip-request-page-desktop/fonts/avenir/AvenirNextLTPro-Demi.otf differ
diff --git a/packages/views/apps/tip-request-page-desktop/fonts/avenir/AvenirNextLTPro-Medium.otf b/packages/views/apps/tip-request-page-desktop/fonts/avenir/AvenirNextLTPro-Medium.otf
new file mode 100644
index 0000000..660511b
Binary files /dev/null and b/packages/views/apps/tip-request-page-desktop/fonts/avenir/AvenirNextLTPro-Medium.otf differ
diff --git a/packages/views/apps/tip-request-page-desktop/fonts/avenir/AvenirNextLTPro-Regular.otf b/packages/views/apps/tip-request-page-desktop/fonts/avenir/AvenirNextLTPro-Regular.otf
new file mode 100644
index 0000000..0ae7cee
Binary files /dev/null and b/packages/views/apps/tip-request-page-desktop/fonts/avenir/AvenirNextLTPro-Regular.otf differ
diff --git a/packages/views/apps/tip-request-page-desktop/fonts/manrope/Manrope-Bold.ttf b/packages/views/apps/tip-request-page-desktop/fonts/manrope/Manrope-Bold.ttf
new file mode 100644
index 0000000..8bbf0bd
Binary files /dev/null and b/packages/views/apps/tip-request-page-desktop/fonts/manrope/Manrope-Bold.ttf differ
diff --git a/packages/views/apps/tip-request-page-desktop/fonts/manrope/Manrope-ExtraBold.ttf b/packages/views/apps/tip-request-page-desktop/fonts/manrope/Manrope-ExtraBold.ttf
new file mode 100644
index 0000000..3f68dff
Binary files /dev/null and b/packages/views/apps/tip-request-page-desktop/fonts/manrope/Manrope-ExtraBold.ttf differ
diff --git a/packages/views/apps/tip-request-page-desktop/fonts/manrope/Manrope-ExtraLight.ttf b/packages/views/apps/tip-request-page-desktop/fonts/manrope/Manrope-ExtraLight.ttf
new file mode 100644
index 0000000..9d21d77
Binary files /dev/null and b/packages/views/apps/tip-request-page-desktop/fonts/manrope/Manrope-ExtraLight.ttf differ
diff --git a/packages/views/apps/tip-request-page-desktop/fonts/manrope/Manrope-Light.ttf b/packages/views/apps/tip-request-page-desktop/fonts/manrope/Manrope-Light.ttf
new file mode 100644
index 0000000..f255257
Binary files /dev/null and b/packages/views/apps/tip-request-page-desktop/fonts/manrope/Manrope-Light.ttf differ
diff --git a/packages/views/apps/tip-request-page-desktop/fonts/manrope/Manrope-Medium.ttf b/packages/views/apps/tip-request-page-desktop/fonts/manrope/Manrope-Medium.ttf
new file mode 100644
index 0000000..c73d774
Binary files /dev/null and b/packages/views/apps/tip-request-page-desktop/fonts/manrope/Manrope-Medium.ttf differ
diff --git a/packages/views/apps/tip-request-page-desktop/fonts/manrope/Manrope-Regular.ttf b/packages/views/apps/tip-request-page-desktop/fonts/manrope/Manrope-Regular.ttf
new file mode 100644
index 0000000..c02b01b
Binary files /dev/null and b/packages/views/apps/tip-request-page-desktop/fonts/manrope/Manrope-Regular.ttf differ
diff --git a/packages/views/apps/tip-request-page-desktop/fonts/manrope/Manrope-SemiBold.ttf b/packages/views/apps/tip-request-page-desktop/fonts/manrope/Manrope-SemiBold.ttf
new file mode 100644
index 0000000..30ee031
Binary files /dev/null and b/packages/views/apps/tip-request-page-desktop/fonts/manrope/Manrope-SemiBold.ttf differ
diff --git a/packages/views/apps/tip-request-page-desktop/fonts/roboto/RobotoMono-Medium.ttf b/packages/views/apps/tip-request-page-desktop/fonts/roboto/RobotoMono-Medium.ttf
new file mode 100644
index 0000000..f6c149a
Binary files /dev/null and b/packages/views/apps/tip-request-page-desktop/fonts/roboto/RobotoMono-Medium.ttf differ
diff --git a/packages/views/apps/tip-request-page-desktop/index.html b/packages/views/apps/tip-request-page-desktop/index.html
new file mode 100644
index 0000000..40b9874
--- /dev/null
+++ b/packages/views/apps/tip-request-page-desktop/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en" style="background: transparent; color-scheme: light;">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Code SDK - Card</title>
+    <meta content="width=device-width, initial-scale=1" name="viewport">
+  </head>
+  <body class="">
+    <div id="app"></div>
+
+    <script>
+      // Work-around node polyfills missing in Vite.
+      window.global = window;
+    </script>
+
+    <script type="module">
+      // Polyfill for Buffer, required by some dependencies
+      import { Buffer } from "buffer";
+      window.Buffer = Buffer;
+    </script>
+
+    <script type="module" src="./index.js"></script>
+  </body>
+</html>
diff --git a/packages/views/apps/tip-request-page-desktop/index.js b/packages/views/apps/tip-request-page-desktop/index.js
new file mode 100644
index 0000000..8c31913
--- /dev/null
+++ b/packages/views/apps/tip-request-page-desktop/index.js
@@ -0,0 +1,17 @@
+import { createApp } from 'vue'
+
+import App from './App.vue'
+import CodeApp from '../../src/index'
+import { routes } from '../../src/routes/pages/tip-request-page-desktop'
+
+import './style.css'
+
+const opt = {
+  wsPath: process.env.WS_PATH,
+  httpPath: process.env.HTTP_PATH,
+  routes,
+}
+
+const app = createApp(App);
+app.use(CodeApp, opt);
+app.mount("#app");
\ No newline at end of file
diff --git a/packages/views/apps/tip-request-page-desktop/style.css b/packages/views/apps/tip-request-page-desktop/style.css
new file mode 100644
index 0000000..78c9427
--- /dev/null
+++ b/packages/views/apps/tip-request-page-desktop/style.css
@@ -0,0 +1,54 @@
+/* ./src/index.css */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+
+@layer base {
+  @font-face {
+    font-family: "Avenir Next LT Pro Regular";
+    font-style: normal;
+    font-weight: 400;
+    font-display: block;
+    src: url(/fonts/avenir/AvenirNextLTPro-Regular.otf) format("opentype");
+  }
+  @font-face {
+    font-family: "Avenir Next LT Pro Medium";
+    font-style: normal;
+    font-weight: 600;
+    font-display: block;
+    src: url(/fonts/avenir/AvenirNextLTPro-Medium.otf) format("opentype");
+  }
+  @font-face {
+    font-family: "Avenir Next LT Pro Bold";
+    font-style: normal;
+    font-weight: 900;
+    font-display: block;
+    src: url(/fonts/avenir/AvenirNextLTPro-Demi.otf) format("opentype");
+  }
+  @font-face {
+    font-family: "Roboto Mono Medium";
+    font-style: normal;
+    font-weight: 500;
+    font-display: block;
+    src: url(/fonts/roboto/RobotoMono-Medium.ttf) format("truetype");
+  }
+}
+
+:root {
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: #555;
+
+  font-family: 'Avenir Next LT Pro Regular', sans-serif;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
diff --git a/packages/views/apps/tip-request-page-desktop/vite.config.ts b/packages/views/apps/tip-request-page-desktop/vite.config.ts
new file mode 100644
index 0000000..b290c14
--- /dev/null
+++ b/packages/views/apps/tip-request-page-desktop/vite.config.ts
@@ -0,0 +1,49 @@
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import path from 'path';
+import { config } from 'dotenv';
+
+config();
+
+let env = {} as { WS_PATH: string, HTTP_PATH: string };
+if (process.env.NODE_ENV === 'production') {
+  console.warn('Using production environment');
+  env = {
+    WS_PATH: 'wss://cash.getcode.com',
+    HTTP_PATH: 'https://cash.getcode.com',
+  }
+} else {
+  console.warn('Using dev environment');
+  env = {
+    WS_PATH: 'ws://localhost:3000',
+    HTTP_PATH: 'http://localhost:3000',
+  };
+}
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  base: '/v1/elements/login-request-modal-desktop/',
+  plugins: [
+    vue(),
+  ],
+  root: path.resolve(__dirname, './'),
+  resolve: {
+    alias: {
+      crypto: 'crypto-browserify',
+      process: "process/browser",
+      stream: "stream-browserify",
+      zlib: "browserify-zlib",
+    },
+  },
+  define: {
+    'process.env': env,
+    'process.browser': true,
+    'global': {}
+  },
+  build: {
+    chunkSizeWarningLimit: 1600,
+  },
+  server: {
+    port: 8790,
+  },
+})
diff --git a/packages/views/apps/tip-request-page-mobile/App.vue b/packages/views/apps/tip-request-page-mobile/App.vue
new file mode 100644
index 0000000..d75d9b8
--- /dev/null
+++ b/packages/views/apps/tip-request-page-mobile/App.vue
@@ -0,0 +1,13 @@
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  mounted() {
+  },
+});
+</script>
+
+<template>
+  <router-view></router-view>
+</template>
+
diff --git a/packages/views/apps/tip-request-page-mobile/fonts/avenir/AvenirNextLTPro-Demi.otf b/packages/views/apps/tip-request-page-mobile/fonts/avenir/AvenirNextLTPro-Demi.otf
new file mode 100644
index 0000000..2076a1f
Binary files /dev/null and b/packages/views/apps/tip-request-page-mobile/fonts/avenir/AvenirNextLTPro-Demi.otf differ
diff --git a/packages/views/apps/tip-request-page-mobile/fonts/avenir/AvenirNextLTPro-Medium.otf b/packages/views/apps/tip-request-page-mobile/fonts/avenir/AvenirNextLTPro-Medium.otf
new file mode 100644
index 0000000..660511b
Binary files /dev/null and b/packages/views/apps/tip-request-page-mobile/fonts/avenir/AvenirNextLTPro-Medium.otf differ
diff --git a/packages/views/apps/tip-request-page-mobile/fonts/avenir/AvenirNextLTPro-Regular.otf b/packages/views/apps/tip-request-page-mobile/fonts/avenir/AvenirNextLTPro-Regular.otf
new file mode 100644
index 0000000..0ae7cee
Binary files /dev/null and b/packages/views/apps/tip-request-page-mobile/fonts/avenir/AvenirNextLTPro-Regular.otf differ
diff --git a/packages/views/apps/tip-request-page-mobile/fonts/manrope/Manrope-Bold.ttf b/packages/views/apps/tip-request-page-mobile/fonts/manrope/Manrope-Bold.ttf
new file mode 100644
index 0000000..8bbf0bd
Binary files /dev/null and b/packages/views/apps/tip-request-page-mobile/fonts/manrope/Manrope-Bold.ttf differ
diff --git a/packages/views/apps/tip-request-page-mobile/fonts/manrope/Manrope-ExtraBold.ttf b/packages/views/apps/tip-request-page-mobile/fonts/manrope/Manrope-ExtraBold.ttf
new file mode 100644
index 0000000..3f68dff
Binary files /dev/null and b/packages/views/apps/tip-request-page-mobile/fonts/manrope/Manrope-ExtraBold.ttf differ
diff --git a/packages/views/apps/tip-request-page-mobile/fonts/manrope/Manrope-ExtraLight.ttf b/packages/views/apps/tip-request-page-mobile/fonts/manrope/Manrope-ExtraLight.ttf
new file mode 100644
index 0000000..9d21d77
Binary files /dev/null and b/packages/views/apps/tip-request-page-mobile/fonts/manrope/Manrope-ExtraLight.ttf differ
diff --git a/packages/views/apps/tip-request-page-mobile/fonts/manrope/Manrope-Light.ttf b/packages/views/apps/tip-request-page-mobile/fonts/manrope/Manrope-Light.ttf
new file mode 100644
index 0000000..f255257
Binary files /dev/null and b/packages/views/apps/tip-request-page-mobile/fonts/manrope/Manrope-Light.ttf differ
diff --git a/packages/views/apps/tip-request-page-mobile/fonts/manrope/Manrope-Medium.ttf b/packages/views/apps/tip-request-page-mobile/fonts/manrope/Manrope-Medium.ttf
new file mode 100644
index 0000000..c73d774
Binary files /dev/null and b/packages/views/apps/tip-request-page-mobile/fonts/manrope/Manrope-Medium.ttf differ
diff --git a/packages/views/apps/tip-request-page-mobile/fonts/manrope/Manrope-Regular.ttf b/packages/views/apps/tip-request-page-mobile/fonts/manrope/Manrope-Regular.ttf
new file mode 100644
index 0000000..c02b01b
Binary files /dev/null and b/packages/views/apps/tip-request-page-mobile/fonts/manrope/Manrope-Regular.ttf differ
diff --git a/packages/views/apps/tip-request-page-mobile/fonts/manrope/Manrope-SemiBold.ttf b/packages/views/apps/tip-request-page-mobile/fonts/manrope/Manrope-SemiBold.ttf
new file mode 100644
index 0000000..30ee031
Binary files /dev/null and b/packages/views/apps/tip-request-page-mobile/fonts/manrope/Manrope-SemiBold.ttf differ
diff --git a/packages/views/apps/tip-request-page-mobile/index.html b/packages/views/apps/tip-request-page-mobile/index.html
new file mode 100644
index 0000000..40b9874
--- /dev/null
+++ b/packages/views/apps/tip-request-page-mobile/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en" style="background: transparent; color-scheme: light;">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Code SDK - Card</title>
+    <meta content="width=device-width, initial-scale=1" name="viewport">
+  </head>
+  <body class="">
+    <div id="app"></div>
+
+    <script>
+      // Work-around node polyfills missing in Vite.
+      window.global = window;
+    </script>
+
+    <script type="module">
+      // Polyfill for Buffer, required by some dependencies
+      import { Buffer } from "buffer";
+      window.Buffer = Buffer;
+    </script>
+
+    <script type="module" src="./index.js"></script>
+  </body>
+</html>
diff --git a/packages/views/apps/tip-request-page-mobile/index.js b/packages/views/apps/tip-request-page-mobile/index.js
new file mode 100644
index 0000000..99a7af1
--- /dev/null
+++ b/packages/views/apps/tip-request-page-mobile/index.js
@@ -0,0 +1,17 @@
+import { createApp } from 'vue'
+
+import App from './App.vue'
+import CodeApp from '../../src/index'
+import { routes } from '../../src/routes/pages/tip-request-page-mobile'
+
+import './style.css'
+
+const opt = {
+  wsPath: process.env.WS_PATH,
+  httpPath: process.env.HTTP_PATH,
+  routes,
+}
+
+const app = createApp(App);
+app.use(CodeApp, opt);
+app.mount("#app");
\ No newline at end of file
diff --git a/packages/views/apps/tip-request-page-mobile/style.css b/packages/views/apps/tip-request-page-mobile/style.css
new file mode 100644
index 0000000..702569c
--- /dev/null
+++ b/packages/views/apps/tip-request-page-mobile/style.css
@@ -0,0 +1,47 @@
+/* ./src/index.css */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+
+@layer base {
+  @font-face {
+    font-family: "Avenir Next LT Pro Regular";
+    font-style: normal;
+    font-weight: 400;
+    font-display: block;
+    src: url(/fonts/avenir/AvenirNextLTPro-Regular.otf) format("opentype");
+  }
+  @font-face {
+    font-family: "Avenir Next LT Pro Medium";
+    font-style: normal;
+    font-weight: 600;
+    font-display: block;
+    src: url(/fonts/avenir/AvenirNextLTPro-Medium.otf) format("opentype");
+  }
+  @font-face {
+    font-family: "Avenir Next LT Pro Bold";
+    font-style: normal;
+    font-weight: 900;
+    font-display: block;
+    src: url(/fonts/avenir/AvenirNextLTPro-Demi.otf) format("opentype");
+  }
+}
+
+:root {
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: #555;
+
+  font-family: 'Avenir Next LT Pro Regular', sans-serif;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
diff --git a/packages/views/apps/tip-request-page-mobile/vite.config.ts b/packages/views/apps/tip-request-page-mobile/vite.config.ts
new file mode 100644
index 0000000..3be6c3c
--- /dev/null
+++ b/packages/views/apps/tip-request-page-mobile/vite.config.ts
@@ -0,0 +1,49 @@
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import path from 'path';
+import { config } from 'dotenv';
+
+config();
+
+let env = {} as { WS_PATH: string, HTTP_PATH: string };
+if (process.env.NODE_ENV === 'production') {
+  console.warn('Using production environment');
+  env = {
+    WS_PATH: 'wss://cash.getcode.com',
+    HTTP_PATH: 'https://cash.getcode.com',
+  }
+} else {
+  console.warn('Using dev environment');
+  env = {
+    WS_PATH: 'ws://localhost:3000',
+    HTTP_PATH: 'http://localhost:3000',
+  };
+}
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  base: '/v1/elements/login-request-modal-mobile/',
+  plugins: [
+    vue(),
+  ],
+  root: path.resolve(__dirname, './'),
+  resolve: {
+    alias: {
+      crypto: 'crypto-browserify',
+      process: "process/browser",
+      stream: "stream-browserify",
+      zlib: "browserify-zlib",
+    },
+  },
+  define: {
+    'process.env': env,
+    'process.browser': true,
+    'global': {}
+  },
+  build: {
+    chunkSizeWarningLimit: 1600,
+  },
+  server: {
+    port: 8790,
+  },
+})
diff --git a/packages/views/apps/vite.config.ts b/packages/views/apps/vite.config.ts
index 21be812..383b769 100644
--- a/packages/views/apps/vite.config.ts
+++ b/packages/views/apps/vite.config.ts
@@ -51,9 +51,20 @@ export default defineConfig({
         'payment-request-button': path.resolve(__dirname, 'payment-request-button', 'index.html'),
         'payment-request-modal-desktop': path.resolve(__dirname, 'payment-request-modal-desktop', 'index.html'),
         'payment-request-modal-mobile': path.resolve(__dirname, 'payment-request-modal-mobile', 'index.html'),
+        'payment-request-page-desktop': path.resolve(__dirname, 'payment-request-page-desktop', 'index.html'),
+        'payment-request-page-mobile': path.resolve(__dirname, 'payment-request-page-mobile', 'index.html'),
+
         'login-request-button': path.resolve(__dirname, 'login-request-button', 'index.html'),
         'login-request-modal-desktop': path.resolve(__dirname, 'login-request-modal-desktop', 'index.html'),
         'login-request-modal-mobile': path.resolve(__dirname, 'login-request-modal-mobile', 'index.html'),
+        'login-request-page-desktop': path.resolve(__dirname, 'login-request-page-desktop', 'index.html'),
+        'login-request-page-mobile': path.resolve(__dirname, 'login-request-page-mobile', 'index.html'),
+
+        'tips-request-button': path.resolve(__dirname, 'tips-request-button', 'index.html'),
+        'tips-request-modal-desktop': path.resolve(__dirname, 'tips-request-modal-desktop', 'index.html'),
+        'tips-request-modal-mobile': path.resolve(__dirname, 'tips-request-modal-mobile', 'index.html'),
+        'tips-request-page-desktop': path.resolve(__dirname, 'tips-request-page-desktop', 'index.html'),
+        'tips-request-page-mobile': path.resolve(__dirname, 'tips-request-page-mobile', 'index.html'),
       }
     }
   },
diff --git a/packages/views/package.json b/packages/views/package.json
index 0da1386..8b811ff 100644
--- a/packages/views/package.json
+++ b/packages/views/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@code-wallet/views",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "license": "MIT",
   "repository": {
       "type": "git",
diff --git a/packages/views/src/components/elements/CodeRequestLogin.vue b/packages/views/src/components/cards/CodeRequestLogin.vue
similarity index 95%
rename from packages/views/src/components/elements/CodeRequestLogin.vue
rename to packages/views/src/components/cards/CodeRequestLogin.vue
index bd3677d..e284d68 100644
--- a/packages/views/src/components/elements/CodeRequestLogin.vue
+++ b/packages/views/src/components/cards/CodeRequestLogin.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { Ref, ref, watchEffect } from "vue";
 import { KikCode, KikCodeDescription } from "@code-wallet/kikcode";
-import CodeLogo from "./CodeLogo.vue";
+
+import CodeLogo from "../common/logos/CodeLogo.vue";
 
 const props = defineProps<{
   payload?: Uint8Array,
@@ -43,7 +44,10 @@ watchEffect(() => {
           boxShadow: '0 0px 0 1px #2B2B2B inset',
         }">
 
-        <CodeLogo class="absolute w-auto h-5 bottom-4 left-4 "/>
+        <CodeLogo class="absolute w-auto bottom-4 left-4"
+            :style="{
+              height: `${ scale * 0.08 }vh`,
+            }" />
 
         <svg v-if="kikcode" class="absolute" 
         viewBox="0 0 220 220"
diff --git a/packages/views/src/components/elements/CodeRequestPayment.vue b/packages/views/src/components/cards/CodeRequestPayment.vue
similarity index 97%
rename from packages/views/src/components/elements/CodeRequestPayment.vue
rename to packages/views/src/components/cards/CodeRequestPayment.vue
index 3200731..2f52399 100644
--- a/packages/views/src/components/elements/CodeRequestPayment.vue
+++ b/packages/views/src/components/cards/CodeRequestPayment.vue
@@ -3,7 +3,8 @@ import { Ref, ref, watchEffect } from "vue";
 import { KikCode, KikCodeDescription } from "@code-wallet/kikcode";
 import { flagForCurrency } from "@code-wallet/flags";
 import { formatCurrency } from "../../utils";
-import CodeRequestBg from "./CodeRequestBg.vue";
+
+import Background from "../common/backgrounds/RecieptBg.vue";
 
 const props = defineProps<{
   payload?: Uint8Array,
@@ -64,7 +65,7 @@ watchEffect(async () => {
           {{ formatCurrency(amount, currency) }} of Kin
         </div>
 
-        <CodeRequestBg class="w-full" />
+        <Background class="w-full" />
 
         <svg v-if="kikcode" class="absolute" 
         viewBox="0 0 220 220"
diff --git a/packages/views/src/components/cards/CodeRequestTip.vue b/packages/views/src/components/cards/CodeRequestTip.vue
new file mode 100644
index 0000000..9eb8d66
--- /dev/null
+++ b/packages/views/src/components/cards/CodeRequestTip.vue
@@ -0,0 +1,162 @@
+<script setup lang="ts">
+import { Ref, ref, watchEffect } from "vue";
+import { KikCode, KikCodeDescription } from "@code-wallet/kikcode";
+
+import Background from "../common/backgrounds/TipBg.vue";
+import XLogo from "../common/logos/XLogo.vue";
+
+const props = defineProps<{
+  payload?: Uint8Array,
+  scanned?: boolean,
+  username?: string,
+}>();
+
+const size = { width: 200, height: 200 };
+const scale = 30;
+const logo = {
+  minX: 0,
+  maxX: 93.51064,
+  minY: 0,
+  maxY: 94.21016,
+  scaleFactor: 0.5,
+};
+
+const kikcode : Ref<KikCodeDescription | undefined> = ref();
+
+watchEffect(async () => {
+  if (!props.payload) return;
+  kikcode.value = KikCode.generateDescription(size, props.payload);
+});
+</script>
+
+<template>
+  <div class="code-bill relative group">
+    <div class="relative overflow-hidden" :class="{ 'swipe': scanned }">
+
+      <div class="absolute top-0 -inset-full h-full w-1/2 z-5 block transform
+      -skew-x-12 bg-gradient-to-r from-transparent to-white opacity-50"
+      :class="{ 'shine': scanned }" />
+
+      <div class="relative m-auto" 
+        :style="{
+          width: `${ scale * 1 }vh`,
+          height: `${ scale * 1.75 }vh`,
+        }">
+
+        <div v-if="username"
+          class="absolute font-medium text-center text-white w-full" 
+          :style="{
+            top: `${ scale * 1.33 }vh`,
+            fontSize: `${ scale * 0.07 }vh`,
+          }">
+
+          <XLogo 
+            class="inline-block"
+            :style="{
+              width: `${ scale * 0.08 }vh`,
+              marginRight: `${ scale * 0.01 }vh`,
+              marginTop: `-${ scale * 0.005 }vh`,
+            }" />
+
+          {{ username }}
+        </div>
+
+        <Background class="w-full" />
+
+        <svg v-if="kikcode" class="absolute" 
+        viewBox="0 0 220 220"
+        :style="{
+          width: `${ (kikcode.size.width/277)*scale }vh`,
+          height: `${ (kikcode.size.height/277)*scale }vh`,
+          top: `${ scale * 0.32 }vh`,
+          left: `${ scale * 0.14 }vh`,
+        }">
+          <mask id="circle-mask">
+            <rect width="100%" height="100%" fill="white" />
+            <g :transform="'translate(' +
+              ((kikcode.size.width - logo.maxX * logo.scaleFactor + logo.minX * logo.scaleFactor) / 2) + ', ' +
+              ((kikcode.size.height - logo.maxY * logo.scaleFactor + logo.minY * logo.scaleFactor) / 2) + ')' +
+              ' scale(' + logo.scaleFactor + ') scale(0.9) translate(5, 5)'">
+              <circle cx="24.6985" cy="25.0039" r="10.3001" fill="black" />
+              <circle cx="69.0534" cy="25.0039" r="10.3001" fill="black" />
+              <circle cx="69.0534" cy="69.3591" r="10.3001" fill="black" />
+              <circle cx="24.6985" cy="69.3591" r="10.3001" fill="black" />
+              <circle cx="24.9531" cy="47.2068" r="10.3001" fill="black" />
+              <circle cx="46.9016" cy="25.1057" r="10.3001" fill="black" />
+              <circle cx="46.9016" cy="69.3591" r="10.3001" fill="black" />
+              <circle cx="46.901" cy="87.2844" r="6.92572" fill="black" />
+              <circle cx="46.901" cy="6.92572" r="6.92572" fill="black" />
+              <circle cx="6.92572" cy="47.2069" r="6.92572" fill="black" />
+              <circle cx="86.58492" cy="47.2069" r="6.92572" fill="black" />
+            </g>
+          </mask>
+
+          <g transform="translate(10, 10)">
+            <g mask="url(#circle-mask)">
+              <path :d="kikcode.center" fill="white" />
+            </g>
+            <g mask="url(#circle-mask)">
+              <path v-for="(arc, index) in kikcode.arcs" :key="'arc-' + index" :d="arc" stroke="white"
+                stroke-linecap="round" stroke-width="6.8" />
+            </g>
+            <g mask="url(#circle-mask)">
+              <path v-for="(dot, index) in kikcode.dots" :key="'dot-' + index" :d="dot" fill="white" />
+            </g>
+          </g>
+
+        </svg>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.code-bill {
+  transform-style: preserve-3d;
+  perspective: 2000px;
+}
+
+.mint {
+  line-height: 0;
+}
+
+.shine {
+  animation: shine 0.1s;
+}
+
+@keyframes shine {
+  100% {
+    left: 125%;
+  }
+}
+
+.swipe {
+  animation: pop 0.4s forwards ease-out, fade 0.3s forwards ease-out, shadow 0.4s forwards ease-in;
+  animation-delay: 0.1s;
+}
+
+@keyframes pop {
+  100% {
+    transform: scale(1.1);
+  }
+}
+
+@keyframes fade {
+  80% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}
+
+@keyframes shadow {
+  0% {
+    filter: drop-shadow(1px 1px 3px rgb(0 0 0 / 0.2));
+  }
+
+  100% {
+    filter: drop-shadow(4px 4px 20px rgb(0 0 0 / 0.2));
+  }
+}</style>
\ No newline at end of file
diff --git a/packages/views/src/components/elements/CodeSpinner.vue b/packages/views/src/components/common/CodeSpinner.vue
similarity index 100%
rename from packages/views/src/components/elements/CodeSpinner.vue
rename to packages/views/src/components/common/CodeSpinner.vue
diff --git a/packages/views/src/components/elements/DownloadAppQR.vue b/packages/views/src/components/common/DownloadAppQR.vue
similarity index 100%
rename from packages/views/src/components/elements/DownloadAppQR.vue
rename to packages/views/src/components/common/DownloadAppQR.vue
diff --git a/packages/views/src/components/elements/ErrorMessage.vue b/packages/views/src/components/common/ErrorMessage.vue
similarity index 94%
rename from packages/views/src/components/elements/ErrorMessage.vue
rename to packages/views/src/components/common/ErrorMessage.vue
index db398c5..3a578aa 100644
--- a/packages/views/src/components/elements/ErrorMessage.vue
+++ b/packages/views/src/components/common/ErrorMessage.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { CodeLogo } from '.';
+import CodeLogo from './logos/CodeLogo.vue';
 
 const props = defineProps<{
   errMessage: string
diff --git a/packages/views/src/components/elements/CodeRequestBg.vue b/packages/views/src/components/common/backgrounds/RecieptBg.vue
similarity index 100%
rename from packages/views/src/components/elements/CodeRequestBg.vue
rename to packages/views/src/components/common/backgrounds/RecieptBg.vue
diff --git a/packages/views/src/components/common/backgrounds/TipBg.vue b/packages/views/src/components/common/backgrounds/TipBg.vue
new file mode 100644
index 0000000..8d176a6
--- /dev/null
+++ b/packages/views/src/components/common/backgrounds/TipBg.vue
@@ -0,0 +1,50 @@
+<template>
+
+<svg viewBox="0 0 277 485" fill="none">
+    <rect width="277" height="485" fill="#0F0C1F" />
+    <g filter="url(#filter0_ii_26_81)">
+            <g filter="url(#filter1_f_26_81)">
+                <rect width="277" height="485" fill="url(#paint0_radial_26_81)" fill-opacity="0.4"
+                    style="mix-blend-mode:overlay" />
+            </g>
+        <rect x="0" y="0" width="276" height="484" stroke="url(#paint1_linear_26_81)" />
+    </g>
+    <defs>
+        <filter id="filter0_ii_26_81" x="0" y="-0.712778" width="277" height="486.426" filterUnits="userSpaceOnUse"
+            color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix" />
+            <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+                result="hardAlpha" />
+            <feOffset dy="1.42556" />
+            <feGaussianBlur stdDeviation="0.356389" />
+            <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+            <feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0" />
+            <feBlend mode="overlay" in2="shape" result="effect1_innerShadow_26_81" />
+            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+                result="hardAlpha" />
+            <feOffset dy="-1.42556" />
+            <feGaussianBlur stdDeviation="0.356389" />
+            <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+            <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0" />
+            <feBlend mode="overlay" in2="effect1_innerShadow_26_81" result="effect2_innerShadow_26_81" />
+        </filter>
+        <filter id="filter1_f_26_81" x="-40" y="-40" width="357" height="565" filterUnits="userSpaceOnUse"
+            color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix" />
+            <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+            <feGaussianBlur stdDeviation="20" result="effect1_foregroundBlur_26_81" />
+        </filter>
+        <radialGradient id="paint0_radial_26_81" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
+            gradientTransform="rotate(60.2678) scale(558.528 432.827)">
+            <stop stop-color="white" />
+            <stop offset="1" stop-color="#100D20" stop-opacity="0.44" />
+        </radialGradient>
+        <linearGradient id="paint1_linear_26_81" x1="0" y1="0" x2="360.658" y2="411.403" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#15141B" />
+            <stop offset="0" stop-color="#161325" />
+        </linearGradient>
+    </defs>
+</svg>
+
+</template>
\ No newline at end of file
diff --git a/packages/views/src/components/common/index.ts b/packages/views/src/components/common/index.ts
new file mode 100644
index 0000000..beab43c
--- /dev/null
+++ b/packages/views/src/components/common/index.ts
@@ -0,0 +1,3 @@
+export { default as CodeSpinner } from './CodeSpinner.vue'
+export { default as DownloadAppQR } from './DownloadAppQR.vue'
+export { default as ErrorMessage } from './ErrorMessage.vue'
\ No newline at end of file
diff --git a/packages/views/src/components/elements/CodeLogo.vue b/packages/views/src/components/common/logos/CodeLogo.vue
similarity index 100%
rename from packages/views/src/components/elements/CodeLogo.vue
rename to packages/views/src/components/common/logos/CodeLogo.vue
diff --git a/packages/views/src/components/elements/CodeLogoSmall.vue b/packages/views/src/components/common/logos/CodeLogoSmall.vue
similarity index 100%
rename from packages/views/src/components/elements/CodeLogoSmall.vue
rename to packages/views/src/components/common/logos/CodeLogoSmall.vue
diff --git a/packages/views/src/components/common/logos/XLogo.vue b/packages/views/src/components/common/logos/XLogo.vue
new file mode 100644
index 0000000..c23908e
--- /dev/null
+++ b/packages/views/src/components/common/logos/XLogo.vue
@@ -0,0 +1,7 @@
+<template>
+    <svg viewBox="0 0 22 20" fill="none">
+        <path d="M16.99 0H20.298L13.071 8.26L21.573 19.5H14.916L9.702
+        12.683L3.736 19.5H0.426L8.156 10.665L0 0H6.826L11.539 6.231L16.99
+        0ZM15.829 17.52H17.662L5.83 1.876H3.863L15.829 17.52Z" fill="currentColor"/>
+    </svg>
+</template>
\ No newline at end of file
diff --git a/packages/views/src/components/elements/index.ts b/packages/views/src/components/elements/index.ts
deleted file mode 100644
index 33fb0b7..0000000
--- a/packages/views/src/components/elements/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export { default as CodeLogo } from './CodeLogo.vue'
-export { default as CodeLogoSmall } from './CodeLogoSmall.vue'
-export { default as CodeRequestLogin } from './CodeRequestLogin.vue'
-export { default as CodeRequestPayment } from './CodeRequestPayment.vue'
-export { default as CodeSpinner } from './CodeSpinner.vue'
-export { default as DownloadAppQR } from './DownloadAppQR.vue'
-export { default as ErrorMessage } from './ErrorMessage.vue'
\ No newline at end of file
diff --git a/packages/views/src/components/index.ts b/packages/views/src/components/index.ts
deleted file mode 100644
index a75a18f..0000000
--- a/packages/views/src/components/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './pages';
\ No newline at end of file
diff --git a/packages/views/src/components/pages/index.ts b/packages/views/src/components/pages/index.ts
deleted file mode 100644
index e935e30..0000000
--- a/packages/views/src/components/pages/index.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export { default as PaymentRequestButton } from './PaymentRequestButton.vue';
-export { default as PaymentRequestModalDesktop } from './PaymentRequestModalDesktop.vue';
-export { default as PaymentRequestModalMobile } from './PaymentRequestModalMobile.vue';
-export { default as LoginRequestButton } from './LoginRequestButton.vue';
-export { default as LoginRequestModalDesktop } from './LoginRequestModalDesktop.vue';
-export { default as LoginRequestModalMobile } from './LoginRequestModalMobile.vue';
\ No newline at end of file
diff --git a/packages/views/src/components/sdk/CodeDesktopModal.vue b/packages/views/src/components/sdk/CodeDesktopModal.vue
index 05e27e3..4e658ea 100644
--- a/packages/views/src/components/sdk/CodeDesktopModal.vue
+++ b/packages/views/src/components/sdk/CodeDesktopModal.vue
@@ -3,13 +3,14 @@ import { onMounted, onUnmounted, reactive, ref } from 'vue';
 import { XMarkIcon } from '@heroicons/vue/24/outline';
 import { Dialog, DialogPanel, TransitionChild, TransitionRoot } from '@headlessui/vue'
 import { EventChannel, InternalEvents } from "@code-wallet/events";
-import { CodeRequest, CodeRequestFromPayload, LoginRequest } from "../../utils"
-import { ErrorMessage } from '../elements';
+import { CodeRequest, CodeRequestFromPayload, CodeRequestWithMessage, LoginRequest } from "../../requests"
+import { ErrorMessage } from '../common';
 
 const props = defineProps<{
+  createRequest: CodeRequestFromPayload;
   id: string;
   payload: string;
-  createRequest: CodeRequestFromPayload;
+  asPage?: boolean;
 }>();
 
 const el = ref<HTMLElement | null>(null);
@@ -53,7 +54,7 @@ channel.on(['clientRejectedLogin', 'clientRejectedPayment'], () => {
 channel.on("intentSubmitted", () => { state.hasCompletedIntent = true; });
 channel.on("codeScanned", () => { state.hasScanned = true; });
 channel.on("beforeInvoke", () => { state.isLoading = true; })
-channel.on("afterInvoke", () => {
+channel.on("afterInvoke", async () => {
   const { clientSecret, idempotencyKey, successUrl, cancelUrl } = updatableFields;
 
   const shouldRecreateRequest : boolean = [
@@ -73,7 +74,15 @@ channel.on("afterInvoke", () => {
     });
   }
 
-  request.value.openStream(channel);
+  if (request.value.hasMessage()) {
+    const reqWithMessage = request.value as CodeRequestWithMessage;
+
+    // intentionally ignoring the await here
+    reqWithMessage.openStream(channel);
+  } else {
+    request.value.generateKikCode();
+  }
+
   state.isLoading = false;
 })
 
@@ -89,15 +98,22 @@ onMounted(() => {
   if (request.value && !request.value.kikCode) {
     request.value.generateKikCode();
   }
+
+  state.isLoading = false;
 });
 
 onUnmounted(() => {
-  if (request.value) {
-    request.value.closeStream();
+  if (request.value && request.value.hasMessage()) {
+    const reqWithMessage = request.value as CodeRequestWithMessage;
+    reqWithMessage.closeStream();
   }
 });
 
 function onClose() {
+  if (props.asPage) {
+    return;
+  }
+
   // Avoid an obscure headlessui Firefox bug where the dialog is closed on open (hard to reproduce)
   // Source of issue:
   // https://github.com/tailwindlabs/headlessui/blob/1469b85c36802265c2409f443f926e1bb02230d4/packages/%40headlessui-vue/src/components/dialog/dialog.ts#L280-L287
@@ -135,10 +151,10 @@ function onClose() {
 
         <div class="fixed inset-0 z-10 overflow-y-auto">
 
-          <TransitionChild as="template" enter="duration-[100ms]" enter-from="opacity-0" enter-to="opacity-100"
+          <TransitionChild  v-if="!asPage" as="template" enter="duration-[100ms]" enter-from="opacity-0" enter-to="opacity-100"
             leave="duration-[100ms]" leave-from="opacity-100" leave-to="opacity-0">
             <button @click="onClose" type="button"
-              class="absolute right-4 top-4 flex h-14 w-14 items-center justify-center rounded-full z-100">
+              class="absolute right-10 top-5 flex h-14 w-14 items-center justify-center rounded-full z-100">
               <XMarkIcon class="h-9 w-9 text-white" aria-hidden="true" />
             </button>
           </TransitionChild>
diff --git a/packages/views/src/components/sdk/CodeMobileModal.vue b/packages/views/src/components/sdk/CodeMobileModal.vue
index 7d5b63e..4949a51 100644
--- a/packages/views/src/components/sdk/CodeMobileModal.vue
+++ b/packages/views/src/components/sdk/CodeMobileModal.vue
@@ -3,13 +3,20 @@ import { ref, onMounted, onUnmounted, reactive } from 'vue';
 import { XMarkIcon } from '@heroicons/vue/20/solid';
 import { Dialog, DialogPanel, TransitionChild, TransitionRoot } from '@headlessui/vue';
 import { EventChannel, InternalEvents } from "@code-wallet/events";
-import { openInApp, setHasCodeApp, sleep, CodeRequest, hasCodeApp, CodeRequestFromPayload, LoginRequest } from "../../utils";
-import { CodeSpinner, ErrorMessage } from '../elements';
+import { openInApp, setHasCodeApp, sleep, hasCodeApp } from "../../utils";
+import { 
+  CodeRequest, 
+  CodeRequestFromPayload, 
+  LoginRequest, 
+  CodeRequestWithMessage
+} from "../../requests";
+import { CodeSpinner, ErrorMessage } from '../common';
 
 const props = defineProps<{
+  createRequest: CodeRequestFromPayload;
   id: string;
   payload: string;
-  createRequest: CodeRequestFromPayload;
+  asPage?: boolean;
 }>();
 
 const el = ref<HTMLElement | null>(null);
@@ -77,7 +84,12 @@ channel.on("afterInvoke", async () => {
     });
   }
 
-  request.value.openStream(channel);
+  if (request.value.hasMessage()) {
+    const reqWithMessage = request.value as CodeRequestWithMessage;
+
+    // intentionally ignoring the await here
+    reqWithMessage.openStream(channel);
+  }
 
   // If we know the user has the app, then give the system prompt asking them if
   // they want to open the app, wait 5 seconds, then show the modal content
@@ -111,14 +123,23 @@ onMounted(() => {
 });
 
 onUnmounted(() => {
-  if (request.value) {
-    request.value.closeStream();
+  if (request.value && request.value.hasMessage()) {
+    const reqWithMessage = request.value as CodeRequestWithMessage;
+    reqWithMessage.closeStream();
   }
 });
 
 function onClose () {
+  if (props.asPage) {
+    return;
+  }
+
   state.isOpen = false;
-  request.value.closeStream();
+
+  if (request.value.hasMessage()) {
+    const reqWithMessage = request.value as CodeRequestWithMessage;
+    reqWithMessage.closeStream();
+  }
 
   // Wait for the modal to close before emitting the event
   setTimeout(() => { 
@@ -143,7 +164,7 @@ function onClose () {
 
         <div class="fixed inset-0 z-10 overflow-y-auto">
 
-          <TransitionChild as="template" enter="duration-[800ms]" enter-from="opacity-0" enter-to="opacity-100"
+          <TransitionChild v-if="!asPage" as="template" enter="duration-[800ms]" enter-from="opacity-0" enter-to="opacity-100"
             leave="duration-[800ms]" leave-from="opacity-100" leave-to="opacity-0">
             <button @click="onClose" type="button"
               class="absolute right-2 top-2 flex h-14 w-14 items-center justify-center rounded-full z-100">
diff --git a/packages/views/src/components/pages/LoginRequestButton.vue b/packages/views/src/components/sdk/buttons/LoginRequestButton.vue
similarity index 66%
rename from packages/views/src/components/pages/LoginRequestButton.vue
rename to packages/views/src/components/sdk/buttons/LoginRequestButton.vue
index 7ace340..0dbd927 100644
--- a/packages/views/src/components/pages/LoginRequestButton.vue
+++ b/packages/views/src/components/sdk/buttons/LoginRequestButton.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-  import { CodeButton } from '../sdk';
-  import { CodeLogoSmall } from '../elements';
+  import CodeButton from '../CodeButton.vue';
+  import CodeLogoSmall from '../../common/logos/CodeLogoSmall.vue';
 
   defineProps({
     id: { type: String, required: true, },
@@ -10,7 +10,7 @@
 
 <template>
   <CodeButton :id="id" :payload="payload">
-    <CodeLogoSmall class="inline-block w-7 h-7 mr-2 -ml-1" />
+    <CodeLogoSmall class="inline-block w-7 h-7 mr-3" />
     <span class="font-avenir-next-bold text-md inline-block align-middle">
       Login with Code
     </span>
diff --git a/packages/views/src/components/pages/PaymentRequestButton.vue b/packages/views/src/components/sdk/buttons/PaymentRequestButton.vue
similarity index 77%
rename from packages/views/src/components/pages/PaymentRequestButton.vue
rename to packages/views/src/components/sdk/buttons/PaymentRequestButton.vue
index 904905b..af6bc5d 100644
--- a/packages/views/src/components/pages/PaymentRequestButton.vue
+++ b/packages/views/src/components/sdk/buttons/PaymentRequestButton.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-  import { CodeButton } from '../sdk';
-  import { CodeLogoSmall } from '../elements';
+  import CodeButton from '../CodeButton.vue';
+  import CodeLogoSmall from '../../common/logos/CodeLogoSmall.vue';
 
   defineProps({
     id: { type: String, required: true, },
diff --git a/packages/views/src/components/sdk/buttons/TipRequestButton.vue b/packages/views/src/components/sdk/buttons/TipRequestButton.vue
new file mode 100644
index 0000000..5e80fde
--- /dev/null
+++ b/packages/views/src/components/sdk/buttons/TipRequestButton.vue
@@ -0,0 +1,18 @@
+<script lang="ts" setup>
+  import CodeButton from '../CodeButton.vue';
+  import CodeLogoSmall from '../../common/logos/CodeLogoSmall.vue';
+
+  defineProps({
+    id: { type: String, required: true, },
+    payload: { type: String, required: true, },
+  });
+</script>
+
+<template>
+  <CodeButton :id="id" :payload="payload">
+    <CodeLogoSmall class="inline-block w-7 h-7 mr-3" />
+    <span class="font-avenir-next-bold text-md inline-block align-middle">
+      Tip with Code
+    </span>
+  </CodeButton> 
+</template>
\ No newline at end of file
diff --git a/packages/views/src/components/sdk/index.ts b/packages/views/src/components/sdk/index.ts
deleted file mode 100644
index e1c3cf8..0000000
--- a/packages/views/src/components/sdk/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as CodeButton } from './CodeButton.vue'
\ No newline at end of file
diff --git a/packages/views/src/components/pages/LoginRequestModalDesktop.vue b/packages/views/src/components/sdk/modals/LoginRequestModalDesktop.vue
similarity index 93%
rename from packages/views/src/components/pages/LoginRequestModalDesktop.vue
rename to packages/views/src/components/sdk/modals/LoginRequestModalDesktop.vue
index 8776825..edd4051 100644
--- a/packages/views/src/components/pages/LoginRequestModalDesktop.vue
+++ b/packages/views/src/components/sdk/modals/LoginRequestModalDesktop.vue
@@ -1,11 +1,14 @@
 <script setup lang="ts">
-import { CodeRequestLogin, CodeSpinner, DownloadAppQR, } from '../elements';
-import { LoginRequest,  } from "../../utils"
-import CodeDesktopModal from '../sdk/CodeDesktopModal.vue';
+import { CodeSpinner, DownloadAppQR, } from '../../common';
+import { LoginRequest } from "../../../requests"
+
+import CodeDesktopModal from '../CodeDesktopModal.vue';
+import CodeRequestLogin from '../../cards/CodeRequestLogin.vue';
 
 const props = defineProps({
   id: { type: String, required: true, },
   payload: { type: String, required: true, },
+  asPage: { type: Boolean, required: false, },
 });
 
 function onDownload(state: { isShowingDownloadQr: boolean; }) {
@@ -15,15 +18,13 @@ function onDownload(state: { isShowingDownloadQr: boolean; }) {
 </script>
 
 <template>
-  <CodeDesktopModal :create-request="LoginRequest.fromPayload" 
-    :payload="props.payload" 
-    :id="props.id">
+  <CodeDesktopModal v-bind="props" :create-request="LoginRequest.fromPayload">
 
     <template #default="{ state, request }">
 
-      <h2 class="text-white text-[3.5vh] leading-tight
+      <h2 class="text-white text-[2.8vh] leading-tight
       font-avenir-next-bold mb-10">
-        Scan with the Code Wallet app to login
+        Scan with the Code Wallet<br>app to login
       </h2>
 
       <div class="m-auto relative">
diff --git a/packages/views/src/components/pages/LoginRequestModalMobile.vue b/packages/views/src/components/sdk/modals/LoginRequestModalMobile.vue
similarity index 84%
rename from packages/views/src/components/pages/LoginRequestModalMobile.vue
rename to packages/views/src/components/sdk/modals/LoginRequestModalMobile.vue
index d27f921..e30fe36 100644
--- a/packages/views/src/components/pages/LoginRequestModalMobile.vue
+++ b/packages/views/src/components/sdk/modals/LoginRequestModalMobile.vue
@@ -1,19 +1,20 @@
 <script setup lang="ts">
-import { LoginRequest, openInAppStore, openInApp } from "../../utils";
-import { CodeSpinner } from '../elements';
-import CodeMobileModal from '../sdk/CodeMobileModal.vue';
+import { LoginRequest } from "../../../requests";
+import { openInAppStore, openInApp } from "../../../utils";
+import { CodeSpinner } from '../../common';
+
+import CodeMobileModal from '../CodeMobileModal.vue';
 
 const props = defineProps({
   id: { type: String, required: true, },
   payload: { type: String, required: true, },
+  asPage: { type: Boolean, required: false, },
 });
 
 </script>
 
 <template>
-  <CodeMobileModal :create-request="LoginRequest.fromPayload" 
-    :payload="props.payload" 
-    :id="props.id">
+  <CodeMobileModal v-bind="props" :create-request="LoginRequest.fromPayload">
 
     <template #default="{ state, channel, request }">
 
diff --git a/packages/views/src/components/pages/PaymentRequestModalDesktop.vue b/packages/views/src/components/sdk/modals/PaymentRequestModalDesktop.vue
similarity index 93%
rename from packages/views/src/components/pages/PaymentRequestModalDesktop.vue
rename to packages/views/src/components/sdk/modals/PaymentRequestModalDesktop.vue
index e3c0208..6d3465d 100644
--- a/packages/views/src/components/pages/PaymentRequestModalDesktop.vue
+++ b/packages/views/src/components/sdk/modals/PaymentRequestModalDesktop.vue
@@ -1,32 +1,29 @@
 <script setup lang="ts">
-import { CodeRequestPayment, CodeSpinner, DownloadAppQR, } from '../elements';
-import { PaymentRequest, formatCurrency,  } from "../../utils"
-import CodeDesktopModal from '../sdk/CodeDesktopModal.vue';
+import { CodeSpinner, DownloadAppQR, } from '../../common';
+import { PaymentRequest, } from "../../../requests"
+
+import CodeDesktopModal from '../CodeDesktopModal.vue';
+import CodeRequestPayment from '../../cards/CodeRequestPayment.vue';
 
 const props = defineProps({
   id: { type: String, required: true, },
   payload: { type: String, required: true, },
+  asPage: { type: Boolean, required: false, },
 });
 
 function onDownload(state: { isShowingDownloadQr: boolean; }) {
   state.isShowingDownloadQr = !state.isShowingDownloadQr;
 }
-
-function getFormattedAmount(req: PaymentRequest) {
-  return formatCurrency(req.getAmount()!, req.getCurrency()!);
-}
 </script>
 
 <template>
-  <CodeDesktopModal :create-request="PaymentRequest.fromPayload" 
-    :payload="props.payload" 
-    :id="props.id">
+  <CodeDesktopModal v-bind="props" :create-request="PaymentRequest.fromPayload">
 
     <template #default="{ state, request }">
 
-      <h2 class="text-white text-[34px] leading-tight
+      <h2 class="text-white text-[2.8vh] leading-tight
       font-avenir-next-bold mb-10">
-        Scan with the Code Wallet app to pay
+        Scan with the Code Wallet<br>app to pay
       </h2>
 
       <div class="m-auto relative">
diff --git a/packages/views/src/components/pages/PaymentRequestModalMobile.vue b/packages/views/src/components/sdk/modals/PaymentRequestModalMobile.vue
similarity index 84%
rename from packages/views/src/components/pages/PaymentRequestModalMobile.vue
rename to packages/views/src/components/sdk/modals/PaymentRequestModalMobile.vue
index 812528e..cd27bc6 100644
--- a/packages/views/src/components/pages/PaymentRequestModalMobile.vue
+++ b/packages/views/src/components/sdk/modals/PaymentRequestModalMobile.vue
@@ -1,11 +1,14 @@
 <script setup lang="ts">
-import { PaymentRequest, openInAppStore, openInApp, formatCurrency } from "../../utils";
-import { CodeSpinner } from '../elements';
-import CodeMobileModal from '../sdk/CodeMobileModal.vue';
+import { PaymentRequest } from "../../../requests";
+import { openInAppStore, openInApp, formatCurrency } from "../../../utils";
+import { CodeSpinner } from '../../common';
+
+import CodeMobileModal from '../CodeMobileModal.vue';
 
 const props = defineProps({
   id: { type: String, required: true, },
   payload: { type: String, required: true, },
+  asPage: { type: Boolean, required: false, },
 });
 
 function getFormattedAmount(req: PaymentRequest) {
@@ -14,9 +17,7 @@ function getFormattedAmount(req: PaymentRequest) {
 </script>
 
 <template>
-  <CodeMobileModal :create-request="PaymentRequest.fromPayload" 
-    :payload="props.payload" 
-    :id="props.id">
+  <CodeMobileModal v-bind="props" :create-request="PaymentRequest.fromPayload">
 
     <template #default="{ state, channel, request }">
       
diff --git a/packages/views/src/components/sdk/modals/TipRequestModalDesktop.vue b/packages/views/src/components/sdk/modals/TipRequestModalDesktop.vue
new file mode 100644
index 0000000..aca1d4e
--- /dev/null
+++ b/packages/views/src/components/sdk/modals/TipRequestModalDesktop.vue
@@ -0,0 +1,165 @@
+<script setup lang="ts">
+import { CodeSpinner, DownloadAppQR, } from '../../common';
+import { TipRequest,  } from "../../../requests"
+
+import CodeDesktopModal from '../CodeDesktopModal.vue';
+import CodeRequestTip from '../../cards/CodeRequestTip.vue';
+
+const props = defineProps({
+  id: { type: String, required: true, },
+  payload: { type: String, required: true, },
+  asPage: { type: Boolean, required: false, },
+});
+
+function onDownload(state: { isShowingDownloadQr: boolean; }) {
+  state.isShowingDownloadQr = !state.isShowingDownloadQr;
+}
+
+</script>
+
+<template>
+  <CodeDesktopModal v-bind="props" :create-request="TipRequest.fromPayload">
+
+    <template #default="{ state, request }">
+
+      <h2 class="text-white text-[2.8vh] leading-tight
+      font-avenir-next-bold mb-10">
+        Scan with the Code Wallet<br>app to tip {{ props.asPage }}
+      </h2>
+
+      <div class="m-auto relative">
+
+        <div class="absolute top-[10vh] right-0 max-w-[21vh] mv-right-start"
+          :class="{ 'mv-right-end': state.isShowingDownloadQr }">
+
+          <a @click="onDownload(state)" href="https://www.getcode.com/download" target="_blank">
+            <DownloadAppQR v-if="state.isShowingDownloadQr" @complete="onDownload" />
+          </a>
+        </div>
+
+        <div v-show="!state.isLoading" class="mv-left-start delay-800"
+          :class="{ 'invisible': state.hasScanned, 'mv-left-end': state.isShowingDownloadQr, }">
+          <CodeRequestTip 
+            :payload="request.kikCode" 
+            :username="request.intent.options.platform?.username"
+            class="bounce" />
+        </div>
+
+        <div v-show="state.isLoading" class="h-[45.9vh]">
+          <div class="absolute top-1/2 left-1/2 -translate-x-1/2">
+            <CodeSpinner class="text-white" />
+          </div>
+        </div>
+
+        <div v-if="state.hasScanned" class="absolute top-1/2 left-1/2 -translate-x-1/2">
+          <p class="text-white text-[12px] leading-tight font-avenir-next-bold pb-10">
+            Confirm login on Code
+            <button type="button" @click="state.hasScanned = false"
+              class="underline block mt-2 text-center w-full">Need to scan again?</button>
+          </p>
+        </div>
+      </div>
+
+      <div>
+
+      <button type="button" @click="onDownload(state)" 
+        class="mt-10 block rounded-md bg-transparent border
+        border-white/50 py-2.5 text-base font-semibold text-[#0f0c1f]
+        text-center text-white shadow-sm w-[30vh] min-w-[250px] mx-auto">
+        Download Code
+
+        <svg class="inline-block -mt-1.5 ml-2" width="45" height="18" viewBox="0 0 45 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M15.7562 13.3991C15.5085 13.9493 15.2153 14.4558 14.8757 14.9214C14.4126 15.5563 14.0335 15.9958 13.7413 16.2398C13.2885 16.6403 12.8032 16.8454 12.2835 16.8571C11.9105 16.8571 11.4607 16.7551 10.937 16.548C10.4116 16.3419 9.9288 16.2398 9.48732 16.2398C9.02431 16.2398 8.52774 16.3419 7.99659 16.548C7.46463 16.7551 7.03609 16.863 6.70844 16.8737C6.21016 16.894 5.71348 16.6831 5.21772 16.2398C4.90129 15.9743 4.50551 15.5194 4.03138 14.8749C3.52267 14.1865 3.10445 13.3883 2.7768 12.4784C2.42591 11.4955 2.25 10.5437 2.25 9.62226C2.25 8.56675 2.48716 7.65639 2.9622 6.89351C3.33555 6.28073 3.83222 5.79736 4.45385 5.44251C5.07547 5.08766 5.74714 4.90683 6.47047 4.89526C6.86626 4.89526 7.38526 5.01299 8.03025 5.24438C8.67341 5.47653 9.08638 5.59426 9.26743 5.59426C9.40281 5.59426 9.86157 5.45661 10.6393 5.18216C11.3748 4.92763 11.9954 4.82224 12.5039 4.86376C13.8818 4.9707 14.9171 5.49306 15.6055 6.43414C14.3732 7.15221 13.7636 8.15794 13.7757 9.44813C13.7869 10.4531 14.166 11.2894 14.911 11.9534C15.2487 12.2616 15.6258 12.4998 16.0453 12.669C15.9543 12.9227 15.8582 13.1658 15.7562 13.3991ZM12.5959 1.44009C12.5959 2.22777 12.2967 2.96323 11.7002 3.64395C10.9805 4.4532 10.1099 4.92083 9.16573 4.84704C9.15371 4.75254 9.14673 4.65309 9.14673 4.54858C9.14673 3.79241 9.48904 2.98315 10.0969 2.32148C10.4004 1.98646 10.7864 1.7079 11.2544 1.48569C11.7215 1.26678 12.1633 1.14572 12.5787 1.125C12.5909 1.2303 12.5959 1.33562 12.5959 1.44009Z" fill="white"/>
+          <path d="M30.2242 6.23775C29.6817 6.23775 29.25 6.66945 29.25 7.21197V11.2699C29.25 11.8125 29.6817 12.2442 30.2242 12.2442C30.7667 12.2442 31.1984 11.8125 31.1984 11.2699V7.21197C31.1984 6.66945 30.7667 6.23775 30.2242 6.23775ZM40.2498 6.40485V12.7021C40.2498 13.2452 39.8417 13.6894 39.3142 13.7464L39.1995 13.7524L38.5018 13.7523L38.5028 15.9007C38.5028 16.4433 38.071 16.875 37.5285 16.875C37.0248 16.875 36.6166 16.5027 36.5608 16.0153L36.5543 15.9007L36.5534 13.7523H35.2561L35.2564 15.9007C35.2564 16.4433 34.8247 16.875 34.2821 16.875C33.7784 16.875 33.3702 16.5027 33.3144 16.0153L33.3079 15.9007L33.3077 13.7523L32.6112 13.7524C32.0681 13.7524 31.6239 13.3444 31.5671 12.8169L31.5609 12.7021V6.40485H40.2498ZM41.5865 6.23775C42.0903 6.23775 42.4985 6.60998 42.5543 7.09752L42.5608 7.21197V11.2699C42.5608 11.8125 42.129 12.2442 41.5865 12.2442C41.0828 12.2442 40.6746 11.8719 40.6188 11.3844L40.6123 11.2699V7.21197C40.6123 6.66945 41.0441 6.23775 41.5865 6.23775ZM38.6027 1.12501C38.6258 1.12523 38.6472 1.13118 38.6684 1.14292C38.724 1.17372 38.7496 1.23097 38.7379 1.28829L38.722 1.33089L38.0358 2.57065C39.2901 3.22333 40.1577 4.43428 40.2428 5.83844L40.2498 6.06171H31.5609C31.5626 4.63821 32.3676 3.38873 33.5801 2.67831L33.7749 2.57067L33.0886 1.33089C33.05 1.26124 33.0729 1.18143 33.1423 1.14292C33.1635 1.13118 33.185 1.12524 33.208 1.12501C33.2408 1.12469 33.2726 1.13554 33.2979 1.15686L33.3303 1.19662L34.0255 2.44982C34.5943 2.19755 35.2322 2.05596 35.9053 2.05596C36.4823 2.05596 37.0334 2.15998 37.5373 2.34857L37.7851 2.44982L38.4804 1.19661C38.5066 1.14916 38.5534 1.12453 38.6027 1.12501ZM33.9002 3.74628C33.7019 3.74628 33.5377 3.91046 33.5377 4.10881C33.5377 4.30716 33.7019 4.47134 33.9002 4.47134C34.0986 4.47134 34.2627 4.30716 34.2627 4.10881C34.2627 3.91046 34.0986 3.74628 33.9002 3.74628ZM37.9104 3.74628C37.7121 3.74628 37.5479 3.91046 37.5479 4.10881C37.5479 4.30716 37.7121 4.47134 37.9104 4.47134C38.1088 4.47134 38.273 4.30716 38.273 4.10881C38.273 3.91046 38.1088 3.74628 37.9104 3.74628Z" fill="white"/>
+        </svg>
+      </button>
+
+      </div>
+
+    </template>
+  </CodeDesktopModal>  
+</template>
+
+<style scoped>
+.mv-right-start {
+  transition: all 0.25s ease-out;
+  transform: scale(0.8);
+  opacity: 0;
+}
+
+.mv-right-end {
+  transform: translateX(5vh);
+  opacity: 1;
+}
+
+.mv-left-start {
+  transition: all 0.25s ease-out;
+}
+
+.mv-left-end {
+  transform: scale(0.8) translateX(-20vh);
+  opacity: 1;
+}
+
+@keyframes fade {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.5s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.delay-500 {
+  opacity: 0;
+  animation: delay 0.5s linear 0.5s forwards;
+}
+
+.delay-800 {
+  opacity: 0;
+  animation: delay 0.2s linear 0.7s forwards;
+}
+
+@keyframes delay {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+.bounce {
+  transform: scale(0.6);
+  animation: pop 0.45s linear(0, 0.67793 0.01%, 0.70702 1.26%, 0.7582 2.65%, 1.06306 9.091%,
+      1.11795 10.871%, 1.14755 12.611%, 1.15324 13.471%, 1.1533 14.341%,
+      1.13654 16.202%, 1.10139 18.102%, 0.96192 24.192%, 0.93228 26.333%,
+      0.92023 28.443%, 0.92146 29.893%, 0.93014 31.463%, 1.01182 39.104%,
+      1.02627 41.204%, 1.03255 43.274%, 1.02807 46.425%, 0.98852 54.095%,
+      0.97849 58.236%, 0.98079 61.516%, 0.99924 68.857%, 1.00436 72.677%,
+      1.00367 76.268%, 0.99199 88.109%, 0.99732 99.99%, 1) 0.1s forwards;
+  animation-delay: 800ms;
+}
+
+@keyframes pop {
+  0% {
+    transform: scale(0.6);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}
+</style>
\ No newline at end of file
diff --git a/packages/views/src/components/sdk/modals/TipRequestModalMobile.vue b/packages/views/src/components/sdk/modals/TipRequestModalMobile.vue
new file mode 100644
index 0000000..69b8f79
--- /dev/null
+++ b/packages/views/src/components/sdk/modals/TipRequestModalMobile.vue
@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import { openInAppStore, openInApp, } from "../../../utils";
+import { TipRequest, CodeRequest } from "../../../requests";
+import { CodeSpinner } from '../../common';
+
+import CodeMobileModal from '../CodeMobileModal.vue';
+
+const props = defineProps({
+  id: { type: String, required: true, },
+  payload: { type: String, required: true, },
+  asPage: { type: Boolean, required: false, },
+});
+
+function getUsername(req: CodeRequest) {
+  return req.intent.options.platform?.username;
+}
+
+</script>
+
+<template>
+  <CodeMobileModal v-bind="props" :create-request="TipRequest.fromPayload">
+
+    <template #default="{ state, channel, request }">
+
+      <div v-if="getUsername(request as CodeRequest)" class="text-white text-[26px] px-16 text-center leading-tight
+        tracking-tighter font-medium">Tip {{ getUsername(request as CodeRequest) }} with the Code Wallet app</div>
+
+      <div v-else class="text-white text-[26px] px-16 text-center leading-tight
+        tracking-tighter font-medium">Use the Code Wallet app to tip</div>
+
+      <button v-if="!state.isLoading" type="button" @click="openInApp(channel, request.toPayload())" 
+      class="mt-6 block rounded-md bg-white py-4 text-base
+      font-semibold text-[#0f0c1f] text-center shadow-sm
+      w-full">Open in Code</button>
+
+      <button v-else type="button" 
+      class="mt-6 block rounded-md bg-white py-4 text-base
+      font-semibold text-[#0f0c1f] text-center shadow-sm
+      w-full whitespace-nowrap">
+        <span class="absolute left-1/2 -translate-x-1/2 pt-1">
+          <CodeSpinner v-if="state.isLoading"/>
+        </span>
+        &nbsp;
+      </button>
+
+      <button type="button" @click="openInAppStore(channel)"
+        class="mt-6 block rounded-md bg-transparent border
+        border-white py-4 text-base font-semibold text-[#0f0c1f]
+        text-center text-white shadow-sm w-full">Download Code
+        Now</button>
+
+    </template>
+  </CodeMobileModal>  
+</template>
+
+<style scoped>
+@keyframes fade-slide {
+  0% {
+    opacity: 0;
+    transform: translateY(-0.5vh);
+    transform-origin: top center;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+.delay-show-1 {
+  opacity: 0;
+  animation: fade-slide 0.5s ease-out 0s forwards;
+}
+
+.delay-show-2 {
+  opacity: 0;
+  animation: fade-slide 0.5s ease-out 0.5s forwards;
+}
+
+.delay-show-3 {
+  opacity: 0;
+  animation: fade-slide 0.5s ease-out 1.0s forwards;
+}
+
+.delay-show-4 {
+  opacity: 0;
+  animation: fade-slide 0.5s ease-out 1.5s forwards;
+}
+</style>
\ No newline at end of file
diff --git a/packages/views/src/utils/requests/request.ts b/packages/views/src/requests/BaseRequest.ts
similarity index 89%
rename from packages/views/src/utils/requests/request.ts
rename to packages/views/src/requests/BaseRequest.ts
index 89cb915..0d63228 100644
--- a/packages/views/src/utils/requests/request.ts
+++ b/packages/views/src/requests/BaseRequest.ts
@@ -1,32 +1,13 @@
-import { useConfig } from '../../config';
-import { EventChannel, InternalCardEvents, InternalEvents } from "@code-wallet/events";
-import { decode, encode, Intent } from "@code-wallet/intents";
-import { PublicKey } from "@code-wallet/keys"
-import * as Kik from '@code-wallet/kikcode';
 import * as proto from '@code-wallet/rpc';
+import * as Kik from '@code-wallet/kikcode';
 
-export interface CodeRequest {
-    emitter: EventChannel<InternalEvents> | null;
-    intent: Intent;
-    kikCode?: Uint8Array;
-
-    generateKikCode(): Promise<void>;
-    toPayload(): string;
-    toProto(): Promise<proto.SendMessageRequest>;
-    openStream(emitter: EventChannel<InternalEvents>): Promise<void>;
-    closeStream(): void;
-}
-
-export type CodeRequestFromPayload = (
-    payload: string, 
-    options?: { 
-        clientSecret?: string; 
-        idempotencyKey?: string; 
-        successUrl?: string; 
-        cancelUrl?: string; 
-    }) => CodeRequest;
+import { decode, encode, Intent } from "@code-wallet/intents";
+import { PublicKey } from "@code-wallet/keys"
+import { useConfig } from '../config';
+import { CodeRequest, CodeRequestWithMessage } from './CodeRequest';
+import { EventChannel, InternalCardEvents, InternalEvents } from "@code-wallet/events";
 
-abstract class AbstractRequest implements CodeRequest {
+abstract class BaseRequest implements CodeRequest {
     emitter: EventChannel<InternalEvents> | null;
     intent: Intent;
     kikCode?: Uint8Array
@@ -90,6 +71,12 @@ abstract class AbstractRequest implements CodeRequest {
         return body;
     }
 
+    abstract hasMessage(): boolean;
+}
+
+abstract class BaseRequestWithMessage 
+    extends BaseRequest implements CodeRequestWithMessage {
+
     abstract toProto(): Promise<proto.SendMessageRequest>;
 
     closeStream() {
@@ -124,6 +111,7 @@ abstract class AbstractRequest implements CodeRequest {
         const req = await this.toProto();
         const msgSend = await proto.RpcStream.createUnaryMethod(proto.Messaging, "sendMessage", config.wsPath());
         try {
+
             const res = await msgSend(req);
             if (res.result == proto.SendMessageResponse_Result.OK) {
                 return res;
@@ -210,5 +198,6 @@ abstract class AbstractRequest implements CodeRequest {
 }
 
 export {
-    AbstractRequest
+    BaseRequest,
+    BaseRequestWithMessage,
 }
\ No newline at end of file
diff --git a/packages/views/src/requests/CodeRequest.ts b/packages/views/src/requests/CodeRequest.ts
new file mode 100644
index 0000000..76b27c6
--- /dev/null
+++ b/packages/views/src/requests/CodeRequest.ts
@@ -0,0 +1,29 @@
+import { EventChannel, InternalEvents } from "@code-wallet/events";
+import { Intent } from "@code-wallet/intents";
+import * as proto from '@code-wallet/rpc';
+
+export interface CodeRequest {
+    emitter: EventChannel<InternalEvents> | null;
+
+    intent: Intent;
+    kikCode?: Uint8Array;
+
+    hasMessage(): boolean;
+    toPayload(): string;
+    generateKikCode(): Promise<void>;
+}
+
+export type CodeRequestWithMessage = CodeRequest & {
+    toProto(): Promise<proto.SendMessageRequest>;
+    openStream(emitter: EventChannel<InternalEvents>): Promise<void>;
+    closeStream(): void;
+}
+
+export type CodeRequestFromPayload = (
+    payload: string, 
+    options?: { 
+        clientSecret?: string; 
+        idempotencyKey?: string; 
+        successUrl?: string; 
+        cancelUrl?: string; 
+    }) => CodeRequest;
diff --git a/packages/views/src/utils/requests/login.ts b/packages/views/src/requests/LoginRequest.ts
similarity index 83%
rename from packages/views/src/utils/requests/login.ts
rename to packages/views/src/requests/LoginRequest.ts
index 599e52d..1cd1b5d 100644
--- a/packages/views/src/utils/requests/login.ts
+++ b/packages/views/src/requests/LoginRequest.ts
@@ -1,8 +1,8 @@
-import { AbstractRequest } from '../';
-import { ElementOptions, LoginRequestIntent, LoginRequestOptions } from "@code-wallet/intents";
 import * as proto from '@code-wallet/rpc';
+import { ElementOptions, LoginRequestIntent, LoginRequestOptions } from "@code-wallet/intents";
+import { BaseRequest, BaseRequestWithMessage } from "./BaseRequest";
 
-class LoginRequest extends AbstractRequest {
+class LoginRequest extends BaseRequestWithMessage {
     intent: LoginRequestIntent;
 
     constructor(intent: LoginRequestIntent) {
@@ -10,6 +10,10 @@ class LoginRequest extends AbstractRequest {
         this.intent = intent;
     }
 
+    hasMessage() : boolean {
+        return true;
+    }
+
     static fromPayload(val: string, opt: { 
         clientSecret?: string,
         idempotencyKey?: string,
@@ -17,7 +21,7 @@ class LoginRequest extends AbstractRequest {
         cancelUrl?: string,
     } = {}) {
 
-        const body = AbstractRequest.bodyFromPayload(val, opt);
+        const body = BaseRequest.bodyFromPayload(val, opt);
         const intent = new LoginRequestIntent(body as ElementOptions & LoginRequestOptions);
         const req = new LoginRequest(intent);
 
diff --git a/packages/views/src/utils/requests/payment.ts b/packages/views/src/requests/PaymentRequest.ts
similarity index 88%
rename from packages/views/src/utils/requests/payment.ts
rename to packages/views/src/requests/PaymentRequest.ts
index 124551d..c19c773 100644
--- a/packages/views/src/utils/requests/payment.ts
+++ b/packages/views/src/requests/PaymentRequest.ts
@@ -1,13 +1,13 @@
-import { AbstractRequest } from '../';
+import * as proto from '@code-wallet/rpc';
 import { 
     ElementOptionsWithPayment,
     LoginRequestOptions, 
     PaymentRequestIntent, 
     PaymentRequestWithLoginIntent, 
 } from "@code-wallet/intents";
-import * as proto from '@code-wallet/rpc';
+import { BaseRequest, BaseRequestWithMessage } from './BaseRequest';
 
-class PaymentRequest extends AbstractRequest {
+class PaymentRequest extends BaseRequestWithMessage {
     intent: PaymentRequestIntent;
 
     constructor(intent: PaymentRequestIntent) {
@@ -15,6 +15,10 @@ class PaymentRequest extends AbstractRequest {
         this.intent = intent;
     }
 
+    hasMessage() : boolean {
+        return true;
+    }
+
     getAmount() {
         return this.intent.options.amount;
     }
@@ -41,7 +45,7 @@ class PaymentRequest extends AbstractRequest {
         cancelUrl?: string,
     } = {}) {
 
-        const body = AbstractRequest.bodyFromPayload(val, opt);
+        const body = BaseRequest.bodyFromPayload(val, opt);
         const intent = PaymentRequest.getIntent(body as ElementOptionsWithPayment);
         const req = new PaymentRequest(intent);
 
diff --git a/packages/views/src/requests/TipRequest.ts b/packages/views/src/requests/TipRequest.ts
new file mode 100644
index 0000000..249b95a
--- /dev/null
+++ b/packages/views/src/requests/TipRequest.ts
@@ -0,0 +1,34 @@
+import { ElementOptions, TipRequestIntent  } from "@code-wallet/intents";
+import { ExternalPlatformOptions } from "@code-wallet/intents";
+import { BaseRequest } from './BaseRequest';
+
+class TipRequest extends BaseRequest {
+    intent: TipRequestIntent;
+
+    constructor(intent: TipRequestIntent) {
+        super(intent);
+        this.intent = intent;
+    }
+
+    hasMessage(): boolean {
+        return false;
+    }
+
+    static fromPayload(val: string, opt: { 
+        clientSecret?: string,
+        idempotencyKey?: string,
+        successUrl?: string,
+        cancelUrl?: string,
+    } = {}) {
+
+        const body = BaseRequest.bodyFromPayload(val, opt);
+        const intent = new TipRequestIntent(body as ElementOptions & ExternalPlatformOptions);
+        const req = new TipRequest(intent);
+
+        return req;
+    }
+}
+
+export {
+    TipRequest
+}
\ No newline at end of file
diff --git a/packages/views/src/requests/index.ts b/packages/views/src/requests/index.ts
new file mode 100644
index 0000000..c5981d3
--- /dev/null
+++ b/packages/views/src/requests/index.ts
@@ -0,0 +1,5 @@
+export * from './CodeRequest';
+export * from './BaseRequest';
+export * from './PaymentRequest';
+export * from './LoginRequest';
+export * from './TipRequest';
\ No newline at end of file
diff --git a/packages/views/src/routes/login-request-button.ts b/packages/views/src/routes/buttons/login-request-button.ts
similarity index 67%
rename from packages/views/src/routes/login-request-button.ts
rename to packages/views/src/routes/buttons/login-request-button.ts
index 8385d41..8a11346 100644
--- a/packages/views/src/routes/login-request-button.ts
+++ b/packages/views/src/routes/buttons/login-request-button.ts
@@ -1,6 +1,5 @@
-import { 
-  LoginRequestButton,
-} from '../components/pages';
+import LoginRequestButton
+from '../../components/sdk/buttons/LoginRequestButton.vue';
 
 const routes = [
     { 
diff --git a/packages/views/src/routes/payment-request-button.ts b/packages/views/src/routes/buttons/payment-request-button.ts
similarity index 66%
rename from packages/views/src/routes/payment-request-button.ts
rename to packages/views/src/routes/buttons/payment-request-button.ts
index cf31392..157aef4 100644
--- a/packages/views/src/routes/payment-request-button.ts
+++ b/packages/views/src/routes/buttons/payment-request-button.ts
@@ -1,6 +1,5 @@
-import { 
-  PaymentRequestButton,
-} from '../components/pages';
+import PaymentRequestButton 
+from '../../components/sdk/buttons/PaymentRequestButton.vue';
 
 const routes = [
     { 
diff --git a/packages/views/src/routes/buttons/tip-request-button.ts b/packages/views/src/routes/buttons/tip-request-button.ts
new file mode 100644
index 0000000..35a5e67
--- /dev/null
+++ b/packages/views/src/routes/buttons/tip-request-button.ts
@@ -0,0 +1,16 @@
+import TipRequestButton 
+from '../../components/sdk/buttons/TipRequestButton.vue';
+
+const routes = [
+    { 
+      path: '/:id/p=:payload', 
+      component: TipRequestButton,
+      meta: { bodyClass: [] },
+      props: true,
+    },
+  ]
+;
+
+export {
+    routes
+}
\ No newline at end of file
diff --git a/packages/views/src/routes/index.ts b/packages/views/src/routes/index.ts
deleted file mode 100644
index 0a4e857..0000000
--- a/packages/views/src/routes/index.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export * as paymentRequestButton from './payment-request-button';
-export * as paymentRequestModalDesktop from './payment-request-modal-desktop';
-export * as paymentRequestModalMobile from './payment-request-modal-mobile';
-export * as loginRequestButton from './login-request-button';
-export * as loginRequestModalDesktop from './login-request-modal-desktop';
-export * as loginRequestModalMobile from './login-request-modal-mobile';
\ No newline at end of file
diff --git a/packages/views/src/routes/login-request-modal-desktop.ts b/packages/views/src/routes/modals/login-request-modal-desktop.ts
similarity index 69%
rename from packages/views/src/routes/login-request-modal-desktop.ts
rename to packages/views/src/routes/modals/login-request-modal-desktop.ts
index 8b9d458..00b22eb 100644
--- a/packages/views/src/routes/login-request-modal-desktop.ts
+++ b/packages/views/src/routes/modals/login-request-modal-desktop.ts
@@ -1,6 +1,5 @@
-import { 
-  LoginRequestModalDesktop,
-} from '../components/pages';
+import LoginRequestModalDesktop
+from '../../components/sdk/modals/LoginRequestModalDesktop.vue';
 
 const routes = [
     { 
diff --git a/packages/views/src/routes/login-request-modal-mobile.ts b/packages/views/src/routes/modals/login-request-modal-mobile.ts
similarity index 69%
rename from packages/views/src/routes/login-request-modal-mobile.ts
rename to packages/views/src/routes/modals/login-request-modal-mobile.ts
index 3b0be71..f64a6c4 100644
--- a/packages/views/src/routes/login-request-modal-mobile.ts
+++ b/packages/views/src/routes/modals/login-request-modal-mobile.ts
@@ -1,6 +1,6 @@
-import { 
-  LoginRequestModalMobile,
-} from '../components/pages';
+import
+  LoginRequestModalMobile
+from '../../components/sdk/modals/LoginRequestModalMobile.vue';
 
 const routes = [
     { 
diff --git a/packages/views/src/routes/payment-request-modal-desktop.ts b/packages/views/src/routes/modals/payment-request-modal-desktop.ts
similarity index 68%
rename from packages/views/src/routes/payment-request-modal-desktop.ts
rename to packages/views/src/routes/modals/payment-request-modal-desktop.ts
index 8bc98a7..2f8e269 100644
--- a/packages/views/src/routes/payment-request-modal-desktop.ts
+++ b/packages/views/src/routes/modals/payment-request-modal-desktop.ts
@@ -1,6 +1,5 @@
-import { 
-  PaymentRequestModalDesktop,
-} from '../components/pages';
+import PaymentRequestModalDesktop
+from '../../components/sdk/modals/PaymentRequestModalDesktop.vue';
 
 const routes = [
     { 
diff --git a/packages/views/src/routes/payment-request-modal-mobile.ts b/packages/views/src/routes/modals/payment-request-modal-mobile.ts
similarity index 69%
rename from packages/views/src/routes/payment-request-modal-mobile.ts
rename to packages/views/src/routes/modals/payment-request-modal-mobile.ts
index 97147cc..50975e1 100644
--- a/packages/views/src/routes/payment-request-modal-mobile.ts
+++ b/packages/views/src/routes/modals/payment-request-modal-mobile.ts
@@ -1,6 +1,5 @@
-import { 
-  PaymentRequestModalMobile,
-} from '../components/pages';
+import PaymentRequestModalMobile
+from '../../components/sdk/modals/PaymentRequestModalMobile.vue';
 
 const routes = [
     { 
diff --git a/packages/views/src/routes/modals/tip-request-modal-desktop.ts b/packages/views/src/routes/modals/tip-request-modal-desktop.ts
new file mode 100644
index 0000000..f43f11e
--- /dev/null
+++ b/packages/views/src/routes/modals/tip-request-modal-desktop.ts
@@ -0,0 +1,16 @@
+import TipRequestModalDesktop
+from '../../components/sdk/modals/TipRequestModalDesktop.vue';
+
+const routes = [
+    { 
+      path: '/:id/p=:payload', 
+      component: TipRequestModalDesktop,
+      meta: { bodyClass: ['bg-transparent', 'overflow-hidden'] },
+      props: true,
+    },
+  ]
+;
+
+export {
+    routes
+}
\ No newline at end of file
diff --git a/packages/views/src/routes/modals/tip-request-modal-mobile.ts b/packages/views/src/routes/modals/tip-request-modal-mobile.ts
new file mode 100644
index 0000000..9c8b762
--- /dev/null
+++ b/packages/views/src/routes/modals/tip-request-modal-mobile.ts
@@ -0,0 +1,16 @@
+import TipRequestModalMobile
+from '../../components/sdk/modals/TipRequestModalMobile.vue';
+
+const routes = [
+    { 
+      path: '/:id/p=:payload', 
+      component: TipRequestModalMobile,
+      meta: { bodyClass: ['bg-transparent', 'overflow-hidden'] },
+      props: true,
+    },
+  ]
+;
+
+export {
+    routes
+}
\ No newline at end of file
diff --git a/packages/views/src/routes/pages/login-request-page-desktop.ts b/packages/views/src/routes/pages/login-request-page-desktop.ts
new file mode 100644
index 0000000..2d0a2a7
--- /dev/null
+++ b/packages/views/src/routes/pages/login-request-page-desktop.ts
@@ -0,0 +1,22 @@
+import { defineComponent, h } from 'vue';
+import LoginRequestModalDesktop from '../../components/sdk/modals/LoginRequestModalDesktop.vue';
+
+const routes = [
+  { 
+    path: '/:id/p=:payload', 
+    component: defineComponent({
+    props: {
+      id: { type: String, required: true, },
+      payload: { type: String, required: true, },
+    },
+    setup(props, { slots }) {
+        return () => h(LoginRequestModalDesktop,
+          { ...props, asPage: true, }, slots.default)
+      },
+    }),
+    meta: { bodyClass: ['bg-transparent', 'overflow-hidden'] },
+    props: true,
+  },
+];
+
+export { routes };
\ No newline at end of file
diff --git a/packages/views/src/routes/pages/login-request-page-mobile.ts b/packages/views/src/routes/pages/login-request-page-mobile.ts
new file mode 100644
index 0000000..43be839
--- /dev/null
+++ b/packages/views/src/routes/pages/login-request-page-mobile.ts
@@ -0,0 +1,22 @@
+import { defineComponent, h } from 'vue';
+import LoginRequestModalMobile from '../../components/sdk/modals/LoginRequestModalMobile.vue';
+
+const routes = [
+  { 
+    path: '/:id/p=:payload', 
+    component: defineComponent({
+    props: {
+      id: { type: String, required: true, },
+      payload: { type: String, required: true, },
+    },
+    setup(props, { slots }) {
+        return () => h(LoginRequestModalMobile,
+          { ...props, asPage: true, }, slots.default)
+      },
+    }),
+    meta: { bodyClass: ['bg-transparent', 'overflow-hidden'] },
+    props: true,
+  },
+];
+
+export { routes };
\ No newline at end of file
diff --git a/packages/views/src/routes/pages/payment-request-page-desktop.ts b/packages/views/src/routes/pages/payment-request-page-desktop.ts
new file mode 100644
index 0000000..d6fb76b
--- /dev/null
+++ b/packages/views/src/routes/pages/payment-request-page-desktop.ts
@@ -0,0 +1,22 @@
+import { defineComponent, h } from 'vue';
+import PaymentRequestModalDesktop from '../../components/sdk/modals/PaymentRequestModalDesktop.vue';
+
+const routes = [
+  { 
+    path: '/:id/p=:payload', 
+    component: defineComponent({
+    props: {
+      id: { type: String, required: true, },
+      payload: { type: String, required: true, },
+    },
+    setup(props, { slots }) {
+        return () => h(PaymentRequestModalDesktop,
+          { ...props, asPage: true, }, slots.default)
+      },
+    }),
+    meta: { bodyClass: ['bg-transparent', 'overflow-hidden'] },
+    props: true,
+  },
+];
+
+export { routes };
\ No newline at end of file
diff --git a/packages/views/src/routes/pages/payment-request-page-mobile.ts b/packages/views/src/routes/pages/payment-request-page-mobile.ts
new file mode 100644
index 0000000..dce73f3
--- /dev/null
+++ b/packages/views/src/routes/pages/payment-request-page-mobile.ts
@@ -0,0 +1,22 @@
+import { defineComponent, h } from 'vue';
+import PaymentRequestModalMobile from '../../components/sdk/modals/PaymentRequestModalMobile.vue';
+
+const routes = [
+  { 
+    path: '/:id/p=:payload', 
+    component: defineComponent({
+    props: {
+      id: { type: String, required: true, },
+      payload: { type: String, required: true, },
+    },
+    setup(props, { slots }) {
+        return () => h(PaymentRequestModalMobile,
+          { ...props, asPage: true, }, slots.default)
+      },
+    }),
+    meta: { bodyClass: ['bg-transparent', 'overflow-hidden'] },
+    props: true,
+  },
+];
+
+export { routes };
\ No newline at end of file
diff --git a/packages/views/src/routes/pages/tip-request-page-desktop.ts b/packages/views/src/routes/pages/tip-request-page-desktop.ts
new file mode 100644
index 0000000..3e904ee
--- /dev/null
+++ b/packages/views/src/routes/pages/tip-request-page-desktop.ts
@@ -0,0 +1,22 @@
+import { defineComponent, h } from 'vue';
+import TipRequestModalDesktop from '../../components/sdk/modals/TipRequestModalDesktop.vue';
+
+const routes = [
+  { 
+    path: '/:id/p=:payload', 
+    component: defineComponent({
+    props: {
+      id: { type: String, required: true, },
+      payload: { type: String, required: true, },
+    },
+    setup(props, { slots }) {
+        return () => h(TipRequestModalDesktop,
+          { ...props, asPage: true, }, slots.default)
+      },
+    }),
+    meta: { bodyClass: ['bg-transparent', 'overflow-hidden'] },
+    props: true,
+  },
+];
+
+export { routes };
\ No newline at end of file
diff --git a/packages/views/src/routes/pages/tip-request-page-mobile.ts b/packages/views/src/routes/pages/tip-request-page-mobile.ts
new file mode 100644
index 0000000..ef6cdfc
--- /dev/null
+++ b/packages/views/src/routes/pages/tip-request-page-mobile.ts
@@ -0,0 +1,22 @@
+import { defineComponent, h } from 'vue';
+import TipRequestModalMobile from '../../components/sdk/modals/TipRequestModalMobile.vue';
+
+const routes = [
+  { 
+    path: '/:id/p=:payload', 
+    component: defineComponent({
+    props: {
+      id: { type: String, required: true, },
+      payload: { type: String, required: true, },
+    },
+    setup(props, { slots }) {
+        return () => h(TipRequestModalMobile,
+          { ...props, asPage: true, }, slots.default)
+      },
+    }),
+    meta: { bodyClass: ['bg-transparent', 'overflow-hidden'] },
+    props: true,
+  },
+];
+
+export { routes };
\ No newline at end of file
diff --git a/packages/views/src/utils/index.ts b/packages/views/src/utils/index.ts
index 56476ae..fe4e787 100644
--- a/packages/views/src/utils/index.ts
+++ b/packages/views/src/utils/index.ts
@@ -1,5 +1,4 @@
 export * as UserAgent from './user-agent';
 export * from './user-agent';
-export * from './requests';
 export * from './currency';
 export * from './delay';
\ No newline at end of file
diff --git a/packages/views/src/utils/requests/index.ts b/packages/views/src/utils/requests/index.ts
deleted file mode 100644
index 2756846..0000000
--- a/packages/views/src/utils/requests/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from './request';
-export * from './payment';
-export * from './login';
\ No newline at end of file