diff --git a/next.config.js b/next.config.js
index 1ac29385..04958589 100644
--- a/next.config.js
+++ b/next.config.js
@@ -9,6 +9,22 @@ const nextConfig = {
       'xdefi-static.s3.eu-west-1.amazonaws.com',
     ],
   },
+  async redirects() {
+    return [
+      {
+        source: '/((?!_next|mobile).*)',
+        has: [
+          {
+            type: 'header',
+            key: 'User-Agent',
+            value: '.*(Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile|WPDesktop).*',
+          },
+        ],
+        permanent: true,
+        destination: '/mobile',
+      },
+    ]
+  },
   async rewrites() {
     return [
       {
diff --git a/package.json b/package.json
index c3b7d6db..e7d6c77d 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,8 @@
     "@cosmjs/cosmwasm-stargate": "^0.31.0",
     "@delphi-labs/shuttle-react": "^3.7.0",
     "@keplr-wallet/cosmos": "^0.12.20",
+    "@splinetool/react-spline": "^2.2.1",
+    "@splinetool/runtime": "^0.9.414",
     "@sentry/nextjs": "^7.61.1",
     "@tanstack/react-table": "^8.9.3",
     "@tippyjs/react": "^4.2.6",
diff --git a/src/components/Account/AccountDetails.tsx b/src/components/Account/AccountDetails.tsx
index e4785ea7..3d85b09e 100644
--- a/src/components/Account/AccountDetails.tsx
+++ b/src/components/Account/AccountDetails.tsx
@@ -1,3 +1,5 @@
+import classNames from 'classnames'
+
 import DisplayCurrency from 'components/DisplayCurrency'
 import { FormattedNumber } from 'components/FormattedNumber'
 import { Gauge } from 'components/Gauge'
@@ -36,9 +38,12 @@ function AccountDetails(props: Props) {
   return (
     <div
       data-testid='account-details'
-      className='w-16 rounded-base border border-white/20 bg-white/5 backdrop-blur-sticky'
+      className={classNames(
+        'hidden w-16 rounded-base border border-white/20 bg-white/5 backdrop-blur-sticky',
+        'md:block',
+      )}
     >
-      <div className='flex w-full flex-wrap justify-center py-4'>
+      <div className='flex flex-wrap justify-center w-full py-4'>
         <Gauge tooltip='Health Factor' percentage={healthFactor} icon={<Heart />} />
         <Text size='2xs' className='mb-0.5 mt-1 w-full text-center text-white/50'>
           Health
@@ -50,11 +55,11 @@ function AccountDetails(props: Props) {
           animate
         />
       </div>
-      <div className='w-full border border-x-0 border-white/20 py-4'>
+      <div className='w-full py-4 border border-x-0 border-white/20'>
         <Text size='2xs' className='mb-0.5 w-full text-center text-white/50'>
           Balance
         </Text>
-        <DisplayCurrency coin={coin} className='w-full truncate text-center text-2xs ' />
+        <DisplayCurrency coin={coin} className='w-full text-center truncate text-2xs ' />
       </div>
     </div>
   )
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 6fc67d60..f7ef3214 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -4,7 +4,7 @@ import packageInfo from '../../package.json'
 
 export default function Footer() {
   return (
-    <footer className='flex h-6 w-full items-center justify-center'>
+    <footer className='flex items-center justify-center w-full h-6 -mt-6'>
       <div className='w-full px-4 pb-4 text-right'>
         <Text size='xs' className='opacity-50'>
           v{packageInfo.version}
diff --git a/src/components/FullOverlayContent.tsx b/src/components/FullOverlayContent.tsx
index 750bd6cd..9f56263e 100644
--- a/src/components/FullOverlayContent.tsx
+++ b/src/components/FullOverlayContent.tsx
@@ -15,18 +15,18 @@ interface Props {
 
 export default function FullOverlayContent(props: Props) {
   return (
-    <div className={classNames('min-h-[600px] w-100', props.className)}>
+    <div className={classNames('min-h-[600px] w-100 max-w-full', props.className)}>
       <Text size='4xl' className='w-full pb-2 text-center'>
         {props.title}
       </Text>
-      <Text size='sm' className='min-h-14 w-full text-center text-white/60'>
+      <Text size='sm' className='w-full text-center min-h-14 text-white/60'>
         {props.copy}
       </Text>
       {props.children && (
-        <div className='relative flex w-full flex-wrap justify-center pt-4'>{props.children}</div>
+        <div className='relative flex flex-wrap justify-center w-full pt-4'>{props.children}</div>
       )}
       {props.button && (
-        <div className='flex w-full justify-center'>
+        <div className='flex justify-center w-full'>
           <Button {...props.button} />
         </div>
       )}
diff --git a/src/components/Header/DesktopHeader.tsx b/src/components/Header/DesktopHeader.tsx
index 9fc57711..40e7f80e 100644
--- a/src/components/Header/DesktopHeader.tsx
+++ b/src/components/Header/DesktopHeader.tsx
@@ -20,7 +20,7 @@ export default function DesktopHeader() {
   const focusComponent = useStore((s) => s.focusComponent)
 
   function handleCloseFocusMode() {
-    if (focusComponent.onClose) focusComponent.onClose()
+    if (focusComponent && focusComponent.onClose) focusComponent.onClose()
     useStore.setState({ focusComponent: null })
   }
 
diff --git a/src/components/MobileNotSupported.tsx b/src/components/MobileNotSupported.tsx
new file mode 100644
index 00000000..5e544cd7
--- /dev/null
+++ b/src/components/MobileNotSupported.tsx
@@ -0,0 +1,32 @@
+import Spline from '@splinetool/react-spline'
+
+import Button from 'components/Button'
+import Text from 'components/Text'
+
+export default function MobileNotSupported() {
+  return (
+    <section className='relative flex items-start justify-center'>
+      <div className='w-[312px] flex flex-wrap justify-center'>
+        <Spline
+          style={{ height: '340px', width: '300px' }}
+          scene='https://prod.spline.design/kk5kXiGlaUIbEL0M/scene.splinecode'
+        />
+        <Text size='4xl' className='w-[288px] pb-2 text-center'>
+          Mars is not available on mobile
+        </Text>
+        <Text className='w-full text-center text-white/60'>
+          Mars doesn&apos;t support mobile devices yet, please visit us later or use a desktop
+        </Text>
+        <div className='flex justify-center w-full'>
+          <Button
+            className='w-2/3 mt-4'
+            text='Visit Mars v1'
+            color='tertiary'
+            size='lg'
+            onClick={() => window.open('https://app.marsprotocol.io', '_self')}
+          />
+        </div>
+      </div>
+    </section>
+  )
+}
diff --git a/src/components/Modals/Settings/SettingsSwitch.tsx b/src/components/Modals/Settings/SettingsSwitch.tsx
index 394bab9f..65c09779 100644
--- a/src/components/Modals/Settings/SettingsSwitch.tsx
+++ b/src/components/Modals/Settings/SettingsSwitch.tsx
@@ -21,7 +21,7 @@ export default function SettingsSwitch(props: Props) {
         props.className,
       )}
     >
-      <div className='flex flex-wrap w-100'>
+      <div className='flex flex-wrap max-w-full w-100'>
         <Text size='lg' className='w-full mb-2'>
           {props.label}
         </Text>
diff --git a/src/components/Routes.tsx b/src/components/Routes.tsx
index 6d221889..2219ef86 100644
--- a/src/components/Routes.tsx
+++ b/src/components/Routes.tsx
@@ -4,6 +4,7 @@ import BorrowPage from 'pages/BorrowPage'
 import CouncilPage from 'pages/CouncilPage'
 import FarmPage from 'pages/FarmPage'
 import LendPage from 'pages/LendPage'
+import MobilePage from 'pages/MobilePage'
 import PortfolioPage from 'pages/PortfolioPage'
 import TradePage from 'pages/TradePage'
 import Layout from 'pages/_layout'
@@ -24,6 +25,7 @@ export default function Routes() {
         <Route path='/borrow' element={<BorrowPage />} />
         <Route path='/portfolio' element={<PortfolioPage />} />
         <Route path='/council' element={<CouncilPage />} />
+        <Route path='/mobile' element={<MobilePage />} />
         <Route path='/' element={<TradePage />} />
         <Route path='/wallets/:address'>
           <Route path='accounts/:accountId'>
diff --git a/src/pages/MobilePage.tsx b/src/pages/MobilePage.tsx
new file mode 100644
index 00000000..50694c47
--- /dev/null
+++ b/src/pages/MobilePage.tsx
@@ -0,0 +1,5 @@
+import MobileNotSupported from 'components/MobileNotSupported'
+
+export default function MobilePage() {
+  return <MobileNotSupported />
+}
diff --git a/src/pages/_layout.tsx b/src/pages/_layout.tsx
index 1c53a9c8..46b6e59b 100644
--- a/src/pages/_layout.tsx
+++ b/src/pages/_layout.tsx
@@ -1,4 +1,5 @@
 import classNames from 'classnames'
+import { isMobile } from 'react-device-detect'
 import { useLocation } from 'react-router-dom'
 
 import AccountDetails from 'components/Account/AccountDetails'
@@ -10,6 +11,29 @@ import PageMetadata from 'components/PageMetadata'
 import Toaster from 'components/Toaster'
 import useStore from 'store'
 
+interface Props {
+  focusComponent: FocusComponent | null
+  children: React.ReactNode
+  fullWidth: boolean
+}
+
+function PageContainer(props: Props) {
+  if (isMobile) return props.children
+
+  if (!props.focusComponent)
+    return (
+      <div className={classNames('mx-auto h-full w-full', !props.fullWidth && 'max-w-content')}>
+        {props.children}
+      </div>
+    )
+
+  return (
+    <div className='relative flex items-center justify-center w-full h-full'>
+      {props.focusComponent.component}
+    </div>
+  )
+}
+
 export default function Layout({ children }: { children: React.ReactNode }) {
   const location = useLocation()
   const focusComponent = useStore((s) => s.focusComponent)
@@ -22,23 +46,20 @@ export default function Layout({ children }: { children: React.ReactNode }) {
       <DesktopHeader />
       <main
         className={classNames(
-          'lg:min-h-[calc(100vh-89px)]',
+          'lg:min-h-[calc(100vh-65px)]',
           'lg:mt-[65px]',
-          'h-full min-h-[900px] gap-6 p-6',
-          focusComponent
-            ? 'flex items-center justify-center'
+          'min-h-screen gap-6 p-6 w-full',
+          focusComponent || isMobile
+            ? 'flex justify-center'
             : 'grid grid-cols-[auto_min-content] place-items-start',
+          focusComponent && 'items-center',
+          isMobile && 'items-start',
         )}
       >
-        <div className={classNames('mx-auto h-full w-full', !isFullWidth && 'max-w-content')}>
-          {focusComponent ? (
-            <div className='relative flex h-full w-full items-center justify-center'>
-              {focusComponent.component}
-            </div>
-          ) : (
-            children
-          )}
-        </div>
+        <PageContainer focusComponent={focusComponent} fullWidth={isFullWidth}>
+          {children}
+        </PageContainer>
+
         <AccountDetails />
       </main>
       <Footer />
diff --git a/src/types/interfaces/store/common.d.ts b/src/types/interfaces/store/common.d.ts
index 937e7ad1..3854743f 100644
--- a/src/types/interfaces/store/common.d.ts
+++ b/src/types/interfaces/store/common.d.ts
@@ -5,7 +5,7 @@ interface CommonSlice {
   client?: WalletClient
   isOpen: boolean
   selectedAccount: string | null
-  focusComponent: ReactNode
+  focusComponent: FocusComponent | null
 }
 
 interface FocusComponent {
diff --git a/yarn.lock b/yarn.lock
index ae8febaa..674db576 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3086,6 +3086,22 @@
   dependencies:
     "@sinonjs/commons" "^2.0.0"
 
+"@splinetool/react-spline@^2.2.1":
+  version "2.2.6"
+  resolved "https://registry.yarnpkg.com/@splinetool/react-spline/-/react-spline-2.2.6.tgz#c48f634f352311b9da210978f88bd195d605ee8a"
+  integrity sha512-y9L2VEbnC6FNZZu8XMmWM9YTTTWal6kJVfP05Amf0QqDNzCSumKsJxZyGUODvuCmiAvy0PfIfEsiVKnSxvhsDw==
+  dependencies:
+    lodash.debounce "^4.0.8"
+    react-merge-refs "^2.0.1"
+
+"@splinetool/runtime@^0.9.414":
+  version "0.9.414"
+  resolved "https://registry.yarnpkg.com/@splinetool/runtime/-/runtime-0.9.414.tgz#1503f1fbf2d58ed7e86085eaf69ffc419d03fd29"
+  integrity sha512-6XeIc6XXNhHq20xbAr2hW2f0mbKDsDHDDd1vp0rOJFeaJgkgOxSK76pPdhWQowbcy2QVL7Wm+EWA7O3peehlhg==
+  dependencies:
+    on-change "^4.0.0"
+    semver-compare "^1.0.0"
+
 "@stablelib/aead@^1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@stablelib/aead/-/aead-1.0.1.tgz#c4b1106df9c23d1b867eb9b276d8f42d5fc4c0c3"
@@ -7867,6 +7883,11 @@ object.values@^1.1.6:
     define-properties "^1.1.4"
     es-abstract "^1.20.4"
 
+on-change@^4.0.0:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/on-change/-/on-change-4.0.2.tgz#838129790f09dc2ed04284944bda6e82b92c10b8"
+  integrity sha512-cMtCyuJmTx/bg2HCpHo3ZLeF7FZnBOapLqZHr2AlLeJ5Ul0Zu2mUJJz051Fdwu/Et2YW04ZD+TtU+gVy0ACNCA==
+
 on-exit-leak-free@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/on-exit-leak-free/-/on-exit-leak-free-0.2.0.tgz#b39c9e3bf7690d890f4861558b0d7b90a442d209"
@@ -8380,6 +8401,11 @@ react-lifecycles-compat@^3.0.4:
   resolved "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz"
   integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
 
+react-merge-refs@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/react-merge-refs/-/react-merge-refs-2.0.2.tgz#73f576111124897dec4ea56035a97e199e8cb377"
+  integrity sha512-V5BGTwGa2r+/t0A/BZMS6L7VPXY0CU8xtAhkT3XUoI1WJJhhtvulvoiZkJ5Jt9YAW23m4xFWmhQ+C5HwjtTFhQ==
+
 react-qr-code@^2.0.11:
   version "2.0.11"
   resolved "https://registry.yarnpkg.com/react-qr-code/-/react-qr-code-2.0.11.tgz#444c759a2100424972e17135fbe0e32eaffa19e8"
@@ -8842,6 +8868,11 @@ secp256k1@^4.0.1, secp256k1@^4.0.3:
     node-addon-api "^2.0.0"
     node-gyp-build "^4.2.0"
 
+semver-compare@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/semver-compare/-/semver-compare-1.0.0.tgz#0dee216a1c941ab37e9efb1788f6afc5ff5537fc"
+  integrity sha512-YM3/ITh2MJ5MtzaM429anh+x2jiLVjqILF4m4oyQB18W7Ggea7BfqdH/wGMK7dDiMghv/6WG7znWMwUDzJiXow==
+
 semver@^6.0.0, semver@^6.1.1, semver@^6.1.2, semver@^6.3.0, semver@^6.3.1:
   version "6.3.1"
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.1.tgz#556d2ef8689146e46dcea4bfdd095f3434dffcb4"