diff --git a/apps/mochi-web/app/layout/footer.tsx b/apps/mochi-web/app/layout/footer.tsx
index 234ffeff7..55e5cf5bc 100644
--- a/apps/mochi-web/app/layout/footer.tsx
+++ b/apps/mochi-web/app/layout/footer.tsx
@@ -65,11 +65,11 @@ export const Footer = () => {
               </a>
             </div>
           </div>
-          <div className="flex flex-col justify-center items-end ml-auto">
+          <div className="flex flex-col justify-center items-center mx-auto md:items-end md:mr-0 md:ml-auto">
             <div className="mb-6 text-xs font-normal text-right text-footer-body">
               Copyright © {year} Mochi, All rights reserved
             </div>
-            <div className="flex gap-4 justify-end items-center">
+            <div className="flex gap-2 items-center">
               <a
                 href={SOCIAL_LINKS.CONSOLE}
                 target="_blank"
diff --git a/apps/mochi-web/components/Feed/index.tsx b/apps/mochi-web/components/Feed/index.tsx
index 3a010752b..70d0ba459 100644
--- a/apps/mochi-web/components/Feed/index.tsx
+++ b/apps/mochi-web/components/Feed/index.tsx
@@ -101,7 +101,7 @@ export default function Feed({ className = '' }: Props) {
         className="overflow-auto px-8"
       >
         <div style={{ minWidth: 1440 }}>
-          <div className="flex sticky top-0 z-20 flex-1 bg-feed-bg">
+          <div className="flex sticky top-0 z-10 flex-1 bg-feed-bg">
             {[
               'issued by',
               '',
@@ -136,7 +136,7 @@ export default function Feed({ className = '' }: Props) {
                 }
               }}
               className={clsx(
-                'flex absolute left-1/2 top-full z-20 gap-x-1 items-center py-1 px-2 mt-2 rounded-full transition -translate-x-1/2 bg-white-pure hover:bg-neutral-300',
+                'flex absolute left-[calc((100vw-4rem)/2)] top-full z-20 gap-x-1 items-center py-1 px-2 mt-2 rounded-full transition -translate-x-1/2 bg-white-pure hover:bg-neutral-300',
                 {
                   'opacity-0': !isShowTopFade,
                   'opacity-100 translate-y-2': isShowTopFade,
@@ -152,7 +152,7 @@ export default function Feed({ className = '' }: Props) {
             </button>
           </div>
 
-          <div className="flex relative z-10 flex-col flex-1 min-h-0">
+          <div className="flex relative flex-col flex-1 min-h-0">
             <AnimatePresence>
               {loading
                 ? Array(10)
diff --git a/apps/mochi-web/components/MochiWidget/index.tsx b/apps/mochi-web/components/MochiWidget/index.tsx
index 3fb99ad5d..d9fec9b28 100644
--- a/apps/mochi-web/components/MochiWidget/index.tsx
+++ b/apps/mochi-web/components/MochiWidget/index.tsx
@@ -50,7 +50,8 @@ export default function MochiWidget() {
     <div
       style={{
         height: 640,
-        width: 440,
+        maxWidth: 440,
+        minWidth: 340,
       }}
       className="overflow-hidden p-3 flex relative z-10 flex-col rounded-2xl border border-[#e5e4e3] shadow-xl bg-white-pure"
     >
diff --git a/apps/mochi-web/components/landing/GridFeatures.tsx b/apps/mochi-web/components/landing/GridFeatures.tsx
index 3d09a8111..bd4b34393 100644
--- a/apps/mochi-web/components/landing/GridFeatures.tsx
+++ b/apps/mochi-web/components/landing/GridFeatures.tsx
@@ -20,15 +20,17 @@ export function GridFeatures({ title, data, className }: Props) {
       ) : (
         title
       )}
-      <div className="grid grid-cols-3 auto-rows-auto gap-5">
+      <div className="flex flex-col gap-5 md:grid md:grid-cols-3 md:auto-rows-auto">
         {data.map((d) => {
           return (
-            <div key={d.id} className="flex flex-col p-6">
-              {d.icon}
-              <span className="mt-5 font-medium text-[22px] text-neutral-900">
-                {d.title}
-              </span>
-              <span className="mt-1 text-base font-thin text-neutral-700 line-clamp-4">
+            <div key={d.id} className="flex flex-col p-4 md:p-6">
+              <div className="flex flex-row gap-x-3 items-center md:flex-col md:items-start">
+                {d.icon}
+                <span className="text-lg font-medium md:mt-5 text-neutral-900 md:text-[22px]">
+                  {d.title}
+                </span>
+              </div>
+              <span className="mt-3 text-base font-thin md:mt-1 text-neutral-700 line-clamp-4">
                 {d.body}
               </span>
             </div>
diff --git a/apps/mochi-web/components/landing/LivePlatforms.tsx b/apps/mochi-web/components/landing/LivePlatforms.tsx
index 721b6cef1..95f7bb08e 100644
--- a/apps/mochi-web/components/landing/LivePlatforms.tsx
+++ b/apps/mochi-web/components/landing/LivePlatforms.tsx
@@ -11,7 +11,7 @@ export function LivePlatforms({ className = '' }: { className?: string }) {
   return (
     <div className={clsx('flex flex-col', className)}>
       <span className="text-sm font-medium">Mochi is live on</span>
-      <ul className="flex flex-wrap gap-3 mt-2">
+      <ul className="flex flex-col gap-2 mt-2 md:flex-row">
         {[
           {
             text: (
@@ -19,7 +19,7 @@ export function LivePlatforms({ className = '' }: { className?: string }) {
                 Web
               </span>
             ),
-            icon: <IconMonitor className="w-4 h-4" />,
+            icon: <IconMonitor className="flex-shrink-0 w-4 h-4" />,
             href: '#',
           },
           {
@@ -29,7 +29,9 @@ export function LivePlatforms({ className = '' }: { className?: string }) {
                 <span className="text-[15px] leading-[15px]">Discord</span>
               </div>
             ),
-            icon: <IconDiscordColored className="-ml-1.5 w-6 h-6" />,
+            icon: (
+              <IconDiscordColored className="flex-shrink-0 -ml-1.5 w-6 h-6" />
+            ),
             href: '#',
           },
           {
@@ -39,13 +41,15 @@ export function LivePlatforms({ className = '' }: { className?: string }) {
                 <span className="text-[15px] leading-[15px]">Telegram</span>
               </div>
             ),
-            icon: <IconTelegramColored className="-ml-1.5 w-6 h-6" />,
+            icon: (
+              <IconTelegramColored className="flex-shrink-0 -ml-1.5 w-6 h-6" />
+            ),
             href: '#',
           },
         ].map(({ text, href, icon }, i) => (
           <li key={`mochi-is-live-on-${i}`} className="flex">
             <Link
-              className="flex gap-x-1 items-center py-2 px-4 rounded-lg border transition hover:text-blue-700 hover:bg-blue-100 hover:border-blue-300 group border-neutral-300 bg-white-pure"
+              className="flex flex-1 gap-x-1.5 justify-center items-center py-2 px-4 rounded-lg border transition md:flex-initial hover:text-blue-700 hover:bg-blue-100 hover:border-blue-300 group border-neutral-300 bg-white-pure"
               href={href}
             >
               {icon}
diff --git a/apps/mochi-web/components/stats.tsx b/apps/mochi-web/components/stats.tsx
index 5f375b2d9..9e4c17e3b 100644
--- a/apps/mochi-web/components/stats.tsx
+++ b/apps/mochi-web/components/stats.tsx
@@ -18,11 +18,15 @@ function Spotlight({
   subtitle: string
 }) {
   return (
-    <div className="flex gap-x-5 items-center">
+    <div className="flex flex-col gap-y-2 items-center md:flex-row md:gap-x-5">
       {icon}
-      <p className="flex flex-col">
-        <span className="text-lg leading-8">{title}</span>
-        <span className="text-sm leading-5 text-neutral-600">{subtitle}</span>
+      <p className="flex flex-col items-center">
+        <span className="text-sm leading-5 md:text-lg md:leading-8">
+          {title}
+        </span>
+        <span className="text-xs leading-4 md:text-sm md:leading-5 text-neutral-600">
+          {subtitle}
+        </span>
       </p>
     </div>
   )
@@ -34,7 +38,7 @@ export default function Stats() {
   )
 
   return (
-    <div className="flex justify-between items-center my-10 landing-block">
+    <div className="flex justify-between items-center my-5 mt-10 md:my-10 landing-block">
       <Spotlight
         icon={<IconHeartColored className="w-8 h-8" />}
         title={`${data?.tips_given ?? 1602}+`}
diff --git a/apps/mochi-web/pages/index.tsx b/apps/mochi-web/pages/index.tsx
index ad62f2c3f..abcb16b49 100644
--- a/apps/mochi-web/pages/index.tsx
+++ b/apps/mochi-web/pages/index.tsx
@@ -77,37 +77,38 @@ export default function Index() {
   return (
     <Layout>
       <SEO />
-      <div className="flex justify-center py-8 px-4 my-auto w-full md:p-10">
-        <div className="flex flex-col-reverse gap-x-10 gap-y-10 justify-center max-w-5xl md:flex-row">
-          <div className="flex flex-col flex-1 justify-center">
-            <p className="text-3xl md:text-4xl">
-              Send <span style={{ color: currencyColor }} ref={currency} />
-              <br />
-              to anyone on
-              <br />
-              <span style={{ color: platformColor }} ref={platform} />
-            </p>
-            <span className="mt-5 font-thin">
-              Use Mochi to send and receive any amount of crypto, directly on
-              your favorite Discord servers or Telegram groups, without having a
-              wallet or having to pay a single cent in fees.
-            </span>
+      <div className="grid grid-cols-1 auto-rows-min gap-5 py-8 px-4 m-auto w-full max-w-5xl md:grid-rows-2 md:p-10 md:grid-cols-min">
+        <div className="flex flex-col md:justify-end">
+          <p className="text-3xl md:text-4xl">
+            Send <span style={{ color: currencyColor }} ref={currency} />
+            <br />
+            to anyone on
+            <br />
+            <span style={{ color: platformColor }} ref={platform} />
+          </p>
+          <span className="mt-5 font-thin">
+            Use Mochi to send and receive any amount of crypto, directly on your
+            favorite Discord servers or Telegram groups, without having a wallet
+            or having to pay a single cent in fees.
+          </span>
+        </div>
 
-            <LivePlatforms className="mt-10" />
-            <SoonAvailablePlatforms className="mt-5" />
-            <Alert className="mt-5" appearance="info" size="sm">
-              <span>
-                To integrate and run the Mochi bot, embedded devices, or
-                leverage the userbase,{' '}
-                <a href="#" className="inline-block underline">
-                  check our Docs
-                </a>
-              </span>
-            </Alert>
-          </div>
-          <div className="flex relative flex-1">
-            <MochiWidget />
-          </div>
+        <div className="flex justify-center md:col-start-2 md:row-span-2">
+          <MochiWidget />
+        </div>
+
+        <div className="flex flex-col mt-5 md:mt-2">
+          <LivePlatforms />
+          <SoonAvailablePlatforms className="mt-5" />
+          <Alert className="mt-5" appearance="info" size="sm">
+            <span>
+              To integrate and run the Mochi bot, embedded devices, or leverage
+              the userbase,{' '}
+              <a href="#" className="inline-block underline">
+                check our Docs
+              </a>
+            </span>
+          </Alert>
         </div>
       </div>
       <Stats />
@@ -163,55 +164,61 @@ export default function Index() {
             id: 'support-on-chain-and-hybrid',
             title: 'Support On-chain & Hybrid',
             body: 'Lorem ipsum dolor sit amet consectetur. Laoreet risus sagittis laoreet mi. Diam mauris praesent cursus adipiscing. Et aliquam tellus purus odio sapien id arcu egestas. Commodo venenatis aliquet nunc commodo.',
-            icon: <IconBlocksColored className="w-12 h-12" />,
+            icon: <IconBlocksColored className="w-8 h-8 md:w-12 md:h-12" />,
           },
           {
             id: 'self-custodial',
             title: 'Self-custodial',
             body: 'Lorem ipsum dolor sit amet consectetur. Laoreet risus sagittis laoreet mi. Diam mauris praesent cursus adipiscing. Et aliquam tellus purus odio sapien id arcu egestas. Commodo venenatis aliquet nunc commodo.',
-            icon: <IconHandKeyColored className="w-12 h-12" />,
+            icon: <IconHandKeyColored className="w-8 h-8 md:w-12 md:h-12" />,
           },
           {
             id: 'invisible-wallets',
             title: 'Invisible Wallets',
             body: 'Lorem ipsum dolor sit amet consectetur. Laoreet risus sagittis laoreet mi. Diam mauris praesent cursus adipiscing. Et aliquam tellus purus odio sapien id arcu egestas. Commodo venenatis aliquet nunc commodo.',
-            icon: <IconWalletPasswordColored className="w-12 h-12" />,
+            icon: (
+              <IconWalletPasswordColored className="w-8 h-8 md:w-12 md:h-12" />
+            ),
           },
           {
             id: 'multi-auth-method',
             title: 'Multi Auth Method',
             body: 'Lorem ipsum dolor sit amet consectetur. Laoreet risus sagittis laoreet mi. Diam mauris praesent cursus adipiscing. Et aliquam tellus purus odio sapien id arcu egestas. Commodo venenatis aliquet nunc commodo.',
-            icon: <IconLayersColored className="w-12 h-12" />,
+            icon: <IconLayersColored className="w-8 h-8 md:w-12 md:h-12" />,
           },
           {
             id: 'account-abstraction',
             title: 'Account Abstraction',
             body: 'Lorem ipsum dolor sit amet consectetur. Laoreet risus sagittis laoreet mi. Diam mauris praesent cursus adipiscing. Et aliquam tellus purus odio sapien id arcu egestas. Commodo venenatis aliquet nunc commodo.',
-            icon: <IconPasswordLockColored className="w-12 h-12" />,
+            icon: (
+              <IconPasswordLockColored className="w-8 h-8 md:w-12 md:h-12" />
+            ),
           },
           {
             id: '?',
             title: '?',
             body: 'Lorem ipsum dolor sit amet consectetur. Laoreet risus sagittis laoreet mi. Diam mauris praesent cursus adipiscing. Et aliquam tellus purus odio sapien id arcu egestas. Commodo venenatis aliquet nunc commodo.',
-            icon: <IconPasswordLockColored className="w-12 h-12" />,
+            icon: (
+              <IconPasswordLockColored className="w-8 h-8 md:w-12 md:h-12" />
+            ),
           },
         ]}
       />
       <Divider />
       <SupportedPlatforms />
-      <div className="flex justify-center my-36 landing-block">
+      <div className="flex justify-center mb-8 md:my-36 landing-block">
         <div className="flex flex-col-reverse gap-y-10 w-full max-w-5xl md:flex-row">
           <div className="flex flex-col flex-1 gap-y-1">
-            <p className="text-4xl text-neutral-900">
+            <p className="text-3xl md:text-4xl text-neutral-900">
               Simple, intuitive commands
             </p>
-            <span className="mt-2 text-lg font-thin text-neutral-700">
+            <span className="mt-2 text-base font-thin md:text-lg text-neutral-700">
               Mochi has a single, extensible command for tipping, airdropping on
               users.
             </span>
             <LivePlatforms className="mt-3" />
           </div>
-          <div className="flex flex-1 gap-2 justify-center items-center">
+          <div className="hidden flex-1 gap-2 justify-center items-center md:flex">
             <Button className="!px-10">Login</Button>
             <Button color="info" variant="outline">
               View features
diff --git a/packages/icons/src/svg/telegram-colored.svg b/packages/icons/src/svg/telegram-colored.svg
index e4e8b287a..8fd39df0d 100644
--- a/packages/icons/src/svg/telegram-colored.svg
+++ b/packages/icons/src/svg/telegram-colored.svg
@@ -1,8 +1,8 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <circle cx="12" cy="12" r="8" fill="white"/>
-<path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM16.64 8.8C16.49 10.38 15.84 14.22 15.51 15.99C15.37 16.74 15.09 16.99 14.83 17.02C14.25 17.07 13.81 16.64 13.25 16.27C12.37 15.69 11.87 15.33 11.02 14.77C10.03 14.12 10.67 13.76 11.24 13.18C11.39 13.03 13.95 10.7 14 10.49C14.0069 10.4582 14.006 10.4252 13.9973 10.3938C13.9886 10.3624 13.9724 10.3337 13.95 10.31C13.89 10.26 13.81 10.28 13.74 10.29C13.65 10.31 12.25 11.24 9.52 13.08C9.12 13.35 8.76 13.49 8.44 13.48C8.08 13.47 7.4 13.28 6.89 13.11C6.26 12.91 5.77 12.8 5.81 12.45C5.83 12.27 6.08 12.09 6.55 11.9C9.47 10.63 11.41 9.79 12.38 9.39C15.16 8.23 15.73 8.03 16.11 8.03C16.19 8.03 16.38 8.05 16.5 8.15C16.6 8.23 16.63 8.34 16.64 8.42C16.63 8.48 16.65 8.66 16.64 8.8Z" fill="url(#paint0_linear_7616_16508)"/>
+<path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM16.64 8.8C16.49 10.38 15.84 14.22 15.51 15.99C15.37 16.74 15.09 16.99 14.83 17.02C14.25 17.07 13.81 16.64 13.25 16.27C12.37 15.69 11.87 15.33 11.02 14.77C10.03 14.12 10.67 13.76 11.24 13.18C11.39 13.03 13.95 10.7 14 10.49C14.0069 10.4582 14.006 10.4252 13.9973 10.3938C13.9886 10.3624 13.9724 10.3337 13.95 10.31C13.89 10.26 13.81 10.28 13.74 10.29C13.65 10.31 12.25 11.24 9.52 13.08C9.12 13.35 8.76 13.49 8.44 13.48C8.08 13.47 7.4 13.28 6.89 13.11C6.26 12.91 5.77 12.8 5.81 12.45C5.83 12.27 6.08 12.09 6.55 11.9C9.47 10.63 11.41 9.79 12.38 9.39C15.16 8.23 15.73 8.03 16.11 8.03C16.19 8.03 16.38 8.05 16.5 8.15C16.6 8.23 16.63 8.34 16.64 8.42C16.63 8.48 16.65 8.66 16.64 8.8Z" fill="url(#telegram_colored)"/>
 <defs>
-<linearGradient id="paint0_linear_7616_16508" x1="1002" y1="2" x2="1002" y2="2002" gradientUnits="userSpaceOnUse">
+<linearGradient id="telegram_colored" x1="1002" y1="2" x2="1002" y2="2002" gradientUnits="userSpaceOnUse">
 <stop stop-color="#2AABEE"/>
 <stop offset="1" stop-color="#229ED9"/>
 </linearGradient>