diff --git a/packages/ui/src/containers/AppContent/index.module.scss b/packages/ui/src/containers/AppContent/index.module.scss
index 06180eeae..1c71cdc8e 100644
--- a/packages/ui/src/containers/AppContent/index.module.scss
+++ b/packages/ui/src/containers/AppContent/index.module.scss
@@ -1,6 +1,4 @@
 @use '@/scss/underscore' as _;
-@use '@/scss/mobile' as mobile;
-@use '@/scss/desktop' as desktop;
 @use '@/scss/colors' as colors;
 @use '@/scss/fonts' as fonts;
 
diff --git a/packages/ui/src/hooks/use-preview.ts b/packages/ui/src/hooks/use-preview.ts
index cd5c9fc53..3aea6444e 100644
--- a/packages/ui/src/hooks/use-preview.ts
+++ b/packages/ui/src/hooks/use-preview.ts
@@ -3,7 +3,7 @@ import { conditionalString } from '@silverhand/essentials';
 import { useEffect, useState } from 'react';
 
 import * as styles from '@/containers/AppContent/index.module.scss';
-import { Context } from '@/hooks/use-page-context';
+import type { Context } from '@/hooks/use-page-context';
 import initI18n from '@/i18n/init';
 import { changeLanguage } from '@/i18n/utils';
 import type { SignInExperienceSettings, PreviewConfig } from '@/types';
diff --git a/packages/ui/src/scss/_desktop.scss b/packages/ui/src/scss/_desktop.scss
deleted file mode 100644
index 3cbe6b55d..000000000
--- a/packages/ui/src/scss/_desktop.scss
+++ /dev/null
@@ -1,100 +0,0 @@
-/* Foundation */
-$font-family: -apple-system, system-ui, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue',
-  'Helvetica', 'Arial', sans-serif;
-
-@mixin colors-light-theme {
-  --color-base: #e5e1ec;
-  --color-surface: #fff;
-  --color-surface-variant: #e5e1ec;
-  --color-text: #191c1d; // Neutral-10
-  --color-text-disabled: #c4c7c7;
-  --color-border: #c4c7c7;
-  --color-border-variant: #c9c5d0;
-  --color-caption: #747778;
-  --color-icon: #747778;
-  --color-focused: rgba(25, 28, 29, 16%); // 16% Neutral-10
-  --color-pressed: rgba(25, 28, 29, 12%); // 12% Neutral-10
-  --color-hover: rgba(25, 28, 29, 8%); // 8% Neutral-10
-
-  --color-primary: var(--color-light-brand);
-  --color-focused-variant: var(--color-light-overlay-brand-focused);
-  --color-hover-variant: var(--color-light-overlay-brand-hover);
-  --color-pressed-variant: var(--color-light-overlay-brand-pressed);
-  --color-primary-pressed: var(--color-light-brand-pressed);
-  --color-primary-hover: var(--color-light-brand-hover);
-
-  --color-inverse-on-surface: #f3effa;
-  --color-outline: #78767f;
-  --color-layer: #eff1f1;
-  --color-dialogue: #fff;
-  --color-divider: #e0e3e3;
-  --color-error: #ba1b1b;
-  --color-loading-icon: #191c1d;
-
-  --color-inverse-social-bg: #000;
-  --color-inverse-social-hover: rgba(0, 0, 0, 92%);
-  --color-inverse-social-pressed: rgba(0, 0, 0, 88%);
-}
-
-@mixin colors-dark-theme {
-  --color-base: #2a2c32;
-  --color-surface: #191c1d;
-  --color-surface-variant: #47464e;
-  --color-text: #f7f8f8; // Neutral-10
-  --color-text-disabled: #5c5f60;
-  --color-border: #5c5f60;
-  --color-border-variant: #5f5d67;
-  --color-caption: #a9acac;
-  --color-icon: #a9acac;
-  --color-focused: rgba(247, 248, 248, 16%); // 16% Neutral-10
-  --color-pressed: rgba(247, 248, 248, 12%); // 12% Neutral-10
-  --color-hover: rgba(247, 248, 248, 8%); // 8% Neutral-10
-
-  --color-primary: var(--color-dark-brand);
-  --color-focused-variant: var(--color-dark-overlay-brand-focused);
-  --color-hover-variant: var(--color-dark-overlay-brand-hover);
-  --color-pressed-variant: var(--color-dark-overlay-brand-pressed);
-  --color-primary-pressed: var(--color-dark-brand-pressed);
-  --color-primary-hover: var(--color-dark-brand-hover);
-
-  --color-inverse-on-surface: #2d3132;
-  --color-outline: #928f9a;
-  --color-layer: #2a2c32;
-  --color-dialogue:
-    linear-gradient(0deg, rgba(202, 190, 255, 8%), rgba(202, 190, 255, 8%)),
-    linear-gradient(0deg, rgba(196, 199, 199, 2%), rgba(196, 199, 199, 2%)),
-    #191c1d;
-  --color-divider: #444748;
-  --color-error: #dd3730;
-  --color-loading-icon: #f7f8f8;
-
-  --color-inverse-social-bg: #fff;
-  --color-inverse-social-hover: rgba(255, 255, 255, 92%);
-  --color-inverse-social-pressed: rgba(255, 255, 255, 88%);
-}
-
-@mixin colors-universal {
-  --color-primary-button-text: #fff;
-  --color-toast: #34353f;
-  --color-toast-border: #444748;
-  --color-overlay: rgba(0, 0, 0, 30%);
-  --color-loading-icon-light: #f7f8f8;
-  // shadows
-  --shadow-1: 0 4px 8px rgba(0, 0, 0, 8%);
-  --shadow-2: 0 4px 12px rgba(0, 0, 0, 12%);
-}
-
-@mixin fonts {
-  --font-title: 600 32px/40px #{$font-family};
-  --font-title-medium: 600 28px/36px #{$font-family};
-  --font-title-small: 600 16px/24px #{$font-family};
-  --font-header: 600 20px/28px #{$font-family};
-  --font-body-bold: 500 14px/20px #{$font-family};
-  --font-body: 400 14px/20px #{$font-family};
-  --font-caption: 400 14px/20px #{$font-family};
-}
-
-@mixin layout {
-  --radius: 8px;
-  --max-width: 400px;
-}
diff --git a/packages/ui/src/scss/_mobile.scss b/packages/ui/src/scss/_mobile.scss
deleted file mode 100644
index b35ce86b1..000000000
--- a/packages/ui/src/scss/_mobile.scss
+++ /dev/null
@@ -1,68 +0,0 @@
-/* Foundation */
-$font-family: -apple-system, system-ui, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue',
-  'Helvetica', 'Arial', sans-serif;
-
-@mixin colors-light-theme {
-  --color-base: #fff;
-  --color-surface: #fff;
-  --color-surface-variant: #e5e1ec;
-  --color-text: #191c1d;
-  --color-icon: #747778;
-  --color-caption: #747778;
-  --color-outline: #78767f;
-  --color-divider: #e0e3e3;
-  --color-text-disabled: #c4c7c7;
-  --color-border: #c4c7c7;
-  --color-primary: var(--color-light-brand);
-  --color-layer: #eff1f1;
-  --color-error: #ba1b1b;
-  --color-dialogue: #fff;
-  --color-loading-icon: #191c1d;
-
-  --color-inverse-social-bg: #000;
-}
-
-@mixin colors-dark-theme {
-  --color-base: #191c1d;
-  --color-surface: #191c1d;
-  --color-surface-variant: #47464e;
-  --color-text: #f7f8f8;
-  --color-icon: #a9acac;
-  --color-caption: #a9acac;
-  --color-outline: #928f9a;
-  --color-divider: #444748;
-  --color-text-disabled: #5c5f60;
-  --color-border: #5c5f60;
-  --color-primary: var(--color-dark-brand);
-  --color-layer: #2a2c32;
-  --color-error: #dd3730;
-  --color-dialogue:
-    linear-gradient(0deg, rgba(202, 190, 255, 8%), rgba(202, 190, 255, 8%)),
-    linear-gradient(0deg, rgba(196, 199, 199, 2%), rgba(196, 199, 199, 2%)),
-    #191c1d;
-  --color-loading-icon: #f7f8f8;
-
-  --color-inverse-social-bg: #fff;
-}
-
-@mixin colors-universal {
-  --color-primary-button-text: #fff;
-  --color-toast: #34353f;
-  --color-toast-border: #444748;
-  --color-overlay: rgba(0, 0, 0, 30%);
-  --color-loading-icon-light: #f7f8f8;
-  // shadows
-  --shadow-2: 0 4px 12px rgba(0, 0, 0, 12%);
-}
-
-@mixin fonts {
-  --font-title: 600 32px/40px #{$font-family};
-  --font-body-bold: 500 16px/20px #{$font-family};
-  --font-body: 400 16px/20px #{$font-family};
-  --font-caption: 400 14px/18px #{$font-family};
-}
-
-@mixin layout {
-  --radius: 8px;
-  --max-width: 360px;
-}