diff --git a/app/home/HomePage.tsx b/app/home/HomePage.tsx
index aa9c2801..eb64cc99 100644
--- a/app/home/HomePage.tsx
+++ b/app/home/HomePage.tsx
@@ -4,7 +4,6 @@ import React, { useState, useEffect } from 'react';
 import { useAccount } from 'wagmi';
 import PrimaryButton from '@/components/common/PrimaryButton';
 import Footer from '@/components/layout/footer/Footer';
-import backgroundImage from '@/imgs/bg/bg.png';
 import HomeHeader from './_components/HomeHeader';
 
 export default function HomePage() {
@@ -21,38 +20,33 @@ export default function HomePage() {
 
   return (
     <div className="flex min-h-screen flex-col bg-primary">
-      <div
-        className="flex flex-col items-center justify-center"
-        style={{
-          backgroundImage: `url(${backgroundImage.src})`,
-          // position: right and bottom
-          backgroundPosition: 'right bottom',
-          backgroundSize: 'original',
-          backgroundRepeat: 'no-repeat',
-        }}
-      >
+      <div className="flex flex-col items-center justify-center">
         <HomeHeader />
         <main className="container flex flex-col">
-          <section className="flex flex-col items-center justify-center">
-            <div className="min-h-40 w-3/5">
-              <h2 className="mb-10 px-4 font-zen text-2xl text-primary sm:px-2 md:text-2xl lg:text-3xl">
-                Direct access to{' '}
+          <section className="mt-4 flex flex-col items-center justify-center sm:mt-8">
+            <div className="h-40 w-full sm:h-32 sm:w-4/5 md:w-3/5">
+              {' '}
+              {/* Fixed height container */}
+              <h2 className="mb-2 px-4 text-center font-zen text-3xl leading-tight text-primary sm:mb-10 sm:text-4xl md:text-5xl">
+                <span className="block sm:inline">Direct access to</span>{' '}
                 <span
-                  className={`transition-all duration-1000 ${
+                  className={`block transition-all duration-1000 sm:inline ${
                     isMorphoBlue ? 'text-blue-500' : 'text-gray-500'
                   }`}
                 >
                   {isMorphoBlue ? '{Morpho Blue}' : 'the most decentralized lending protocol.'}
-                </span>{' '}
+                </span>
               </h2>
             </div>
           </section>
         </main>
-        <div className="flex h-3/4 w-4/5 items-center justify-center gap-2 pb-12 pt-4">
-          <PrimaryButton isSecondary href="/info">
+        <div className="flex w-full flex-col items-center justify-center gap-4 px-4 pb-12 pt-4 sm:w-4/5 sm:flex-row">
+          <PrimaryButton isSecondary href="/info" className="w-full sm:w-auto">
             Why Monarch
           </PrimaryButton>
-          <PrimaryButton href={`/positions/${address ?? ''}`}>View Portfolio</PrimaryButton>
+          <PrimaryButton href={`/positions/${address ?? ''}`} className="w-full sm:w-auto">
+            View Portfolio
+          </PrimaryButton>
         </div>
       </div>
       <Footer />
diff --git a/app/info/components/info.tsx b/app/info/components/info.tsx
index bc0dffc1..594de6df 100644
--- a/app/info/components/info.tsx
+++ b/app/info/components/info.tsx
@@ -3,7 +3,9 @@
 'use client';
 
 import { useState, useEffect, useRef } from 'react';
+import { Button } from '@nextui-org/react';
 import Image from 'next/image';
+import { FaChevronLeft, FaChevronRight } from 'react-icons/fa';
 import Header from '@/components/layout/header/Header';
 import { sections } from './sectionData';
 
@@ -30,35 +32,35 @@ function InfoPage() {
     setTimeout(() => setIsTransitioning(false), 500);
   };
 
-  // eslint-disable-next-line react-hooks/exhaustive-deps
   const nextSection = () => changeSection('next');
-  // eslint-disable-next-line react-hooks/exhaustive-deps
   const prevSection = () => changeSection('prev');
 
   useEffect(() => {
     const container = containerRef.current;
     if (!container) return;
 
-    let lastScrollTime = 0;
-    const scrollCooldown = 1000; // 1 second cooldown
+    let lastWheelTime = 0;
+    const wheelThreshold = 50; // Minimum time between wheel events in ms
 
     const handleWheel = (e: WheelEvent) => {
-      e.preventDefault();
-      const now = new Date().getTime();
-      if (now - lastScrollTime < scrollCooldown) return;
+      const now = Date.now();
+      if (now - lastWheelTime < wheelThreshold) return;
 
-      if (e.deltaY > 0) {
-        nextSection();
-      } else {
-        prevSection();
+      if (Math.abs(e.deltaX) > Math.abs(e.deltaY) && Math.abs(e.deltaX) > 5) {
+        e.preventDefault();
+        if (e.deltaX > 0) {
+          nextSection();
+        } else {
+          prevSection();
+        }
+        lastWheelTime = now;
       }
-      lastScrollTime = now;
     };
 
     const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === 'ArrowDown') {
+      if (e.key === 'ArrowRight') {
         nextSection();
-      } else if (e.key === 'ArrowUp') {
+      } else if (e.key === 'ArrowLeft') {
         prevSection();
       }
     };
@@ -72,58 +74,90 @@ function InfoPage() {
     };
   }, [nextSection, prevSection]);
 
+  const renderImage = (section: typeof sections[0], index: number) => (
+    <div className={`flex items-center justify-center rounded-lg overflow-hidden ${
+      index === sections.length - 1 ? 'h-32 w-32 sm:h-48 sm:w-48 p-2 sm:p-4' : 'h-48 w-full sm:h-64'
+    }`}>
+      <Image
+        src={section.image}
+        alt={section.mainTitle}
+        width={index === sections.length - 1 ? 128 : 800}
+        height={index === sections.length - 1 ? 128 : 256}
+        objectFit="contain"
+        className="rounded-lg"
+      />
+    </div>
+  );
+
   if (!isClient) {
     return null; // or a loading spinner
   }
 
   return (
-    <div className="flex min-h-screen flex-col font-zen" ref={containerRef}>
+    <div className="min-h-screen bg-primary font-zen" ref={containerRef}>
       <Header />
-      <main className="flex flex-grow flex-col overflow-hidden pt-8">
-        <div className="relative flex-grow overflow-hidden">
+      <main className="container relative mx-auto px-4 py-8">
+        <div className="relative overflow-hidden">
           <div
-            className="absolute inset-0 flex flex-col transition-transform duration-500 ease-in-out"
-            style={{ transform: `translateY(-${currentSection * 100}%)` }}
+            className="flex transition-transform duration-500 ease-in-out"
+            style={{ transform: `translateX(-${currentSection * 100}%)` }}
           >
-            {sections.map((section) => (
-              <div
-                key={section.mainTitle}
-                className="flex h-full w-full flex-shrink-0 flex-col items-center justify-start px-4 md:px-0"
-              >
-                <div className="w-full max-w-4xl">
-                  <h1 className="mb-2 text-center text-4xl font-bold">{section.mainTitle}</h1>
-                  <h2 className="mb-4 text-center text-xl text-secondary">{section.subTitle}</h2>
-                  <div className="flex max-h-[calc(100vh-250px)] flex-col items-center gap-8 overflow-y-auto">
-                    <div className="flex w-full items-center justify-center overflow-hidden rounded-lg">
-                      <Image
-                        src={section.image}
-                        alt={section.mainTitle}
-                        height={section.customHeight ? section.customHeight : 250}
-                        objectFit="cover"
-                        className="rounded-lg"
-                      />
+            {sections.map((section, index) => (
+              <div key={`section-${index}`} className="w-full flex-shrink-0 px-4 md:px-8 lg:px-16">
+                <div className="mx-auto max-w-3xl rounded-lg bg-secondary px-4 py-6 shadow-lg sm:px-8 sm:py-8 md:px-12">
+                  <h1 className="mb-2 text-center text-3xl font-bold sm:text-4xl">
+                    {section.mainTitle}
+                  </h1>
+                  <h2 className="mb-4 text-center text-lg text-secondary sm:mb-6 sm:text-xl">
+                    {section.subTitle}
+                  </h2>
+                  <div className="flex flex-col items-center gap-4 sm:gap-8">
+                    {renderImage(section, index)}
+                    <div className="prose prose-sm sm:prose-base lg:prose-lg dark:prose-invert w-full">
+                      {section.content}
                     </div>
-                    <div className="w-full px-4 pb-8">{section.content}</div>
                   </div>
                 </div>
               </div>
             ))}
           </div>
         </div>
+        <div className="pointer-events-none fixed inset-0 flex items-center justify-between px-4 sm:px-12 md:px-24 lg:px-32">
+          <Button
+            isIconOnly
+            color="primary"
+            variant="flat"
+            onPress={prevSection}
+            className="pointer-events-auto"
+            aria-label="Previous section"
+          >
+            <FaChevronLeft />
+          </Button>
+          <Button
+            isIconOnly
+            color="primary"
+            variant="flat"
+            onPress={nextSection}
+            className="pointer-events-auto"
+            aria-label="Next section"
+          >
+            <FaChevronRight />
+          </Button>
+        </div>
+        <nav className="pointer-events-none fixed inset-x-0 bottom-8 flex justify-center space-x-2">
+          {sections.map((_, index) => (
+            <button
+              type="button"
+              key={index}
+              onClick={() => setCurrentSection(index)}
+              className={`pointer-events-auto h-3 w-3 rounded-full transition-colors duration-200 ease-in-out ${
+                index === currentSection ? 'bg-monarch-orange' : 'bg-gray-300 hover:bg-gray-400'
+              }`}
+              aria-label={`Go to section ${index + 1}`}
+            />
+          ))}
+        </nav>
       </main>
-      <nav className="fixed bottom-8 left-1/2 flex -translate-x-1/2 transform space-x-2">
-        {sections.map((_, index) => (
-          <button
-            type="button"
-            key={index}
-            className={`h-2 w-2 cursor-pointer rounded-full ${
-              index === currentSection ? 'bg-monarch-orange' : 'bg-gray-300'
-            }`}
-            onClick={() => setCurrentSection(index)}
-            aria-label={`Go to section ${index + 1}`}
-          />
-        ))}
-      </nav>
     </div>
   );
 }
diff --git a/app/info/components/sectionData.tsx b/app/info/components/sectionData.tsx
index 947c47a4..b54272c6 100644
--- a/app/info/components/sectionData.tsx
+++ b/app/info/components/sectionData.tsx
@@ -4,6 +4,19 @@ import monarchImage from '../../../src/imgs/intro/direct-supply.png';
 import morphoImage from '../../../src/imgs/intro/morpho.png';
 import vaultsImage from '../../../src/imgs/intro/vaults.png';
 
+function Card({ title, items }: { title: string; items: string[] }) {
+  return (
+    <div className="flex-1 rounded-lg bg-primary p-4 shadow">
+      <h3 className="mb-2 font-zen text-lg font-bold">{title}</h3>
+      <ul className="list-inside list-disc">
+        {items.map((item, index) => (
+          <li key={index}>{item}</li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
 export const sections = [
   {
     mainTitle: 'Introducing Monarch',
@@ -14,27 +27,15 @@ export const sections = [
         <p>
           <span className="font-bold">Morpho Blue</span> is the core protocol of the Morpho
           ecosystem. It's a decentralized, immutable, and neutral lending protocol that enables the
-          creation of lending markets with any assets in a truly decentralized manner. As a{' '}
-          <a
-            href="https://jacob.energy/hyperstructures.html"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="text-monarch-primary underline"
-          >
-            hyperstructure
-          </a>
-          , Morpho Blue embodies unstoppable, free, and neutral DeFi primitives.
+          creation of lending markets with any assets in a truly decentralized manner.
         </p>
         <p className="mt-4">
-          Built with a minimalistic and unopinionated approach, Morpho Blue is the foundation upon
-          which the entire Morpho ecosystem is constructed. Its efficiency and security have made it
-          highly regarded in the DeFi community, positioning it as the most crucial element in
-          Morpho's architecture.
+          Built with a minimalistic approach, Morpho Blue is the foundation of the entire Morpho
+          ecosystem. Its efficiency and security have made it highly regarded in the DeFi community.
         </p>
         <p className="mt-4">
           Monarch serves as an advanced interface for Morpho Blue, providing users with a gateway to
-          interact with this powerful core protocol. As we explore Morpho's ecosystem, understanding
-          Morpho Blue is essential, as it underpins all other components and functionalities.
+          interact with this powerful core protocol.
         </p>
       </>
     ),
@@ -45,38 +46,29 @@ export const sections = [
     image: vaultsImage,
     content: (
       <>
-        <p>
+        <p className="mb-4">
           The Morpho Lab team introduces <span className="font-bold">Morpho Vaults</span>,
           intermediate contracts managed by curators to simplify risk management for normal
-          suppliers. This is the recommended way to interact with Morpho Blue, as it offers a more
-          user-friendly experience and simplified risk management.
-        </p>
-        <p className="mt-4">
-          <span className="font-bold">Advantages:</span>
-          <ul className="mt-2 list-inside list-disc">
-            <li>Simplified user experience, managed risk exposure</li>
-            <li>Easier to reuse the supplied liquidity as ERC4626 tokens.</li>
-            <li>
-              {' '}
-              Learn more about{' '}
-              <a
-                href="https://docs.morpho.org/morpho-vaults/concepts/benefits-of-morpho-vaults/"
-                target="_blank"
-                className="text-monarch-primary underline"
-              >
-                Benefit of Morpho Vaults
-              </a>{' '}
-            </li>
-          </ul>
-        </p>
-        <p className="mt-4">
-          <span className="font-bold">Limitations:</span>
-          <ul className="mt-2 list-inside list-disc">
-            <li>Less control over lending parameter changes</li>
-            <li>Limited customization options</li>
-            <li>Potential performance fees</li>
-          </ul>
+          suppliers.
         </p>
+        <div className="mt-4 flex flex-col gap-4 md:flex-row">
+          <Card
+            title="Advantages"
+            items={[
+              'Simplified user experience',
+              'Managed risk exposure',
+              'ERC4626 token compatibility',
+            ]}
+          />
+          <Card
+            title="Limitations"
+            items={[
+              'Less control over parameters',
+              'Limited customization',
+              'Potential performance fees',
+            ]}
+          />
+        </div>
       </>
     ),
   },
@@ -86,35 +78,29 @@ export const sections = [
     image: monarchImage,
     content: (
       <>
-        <p>
+        <p className="mb-4">
           Monarch empowers advanced users by enabling{' '}
           <span className="font-bold">direct lending to Morpho Blue markets</span>, bypassing the
-          need for vaults. This approach offers greater control and customization over your lending
-          positions.
-        </p>
-        <p className="mt-4">
-          <span className="font-bold">Benefits:</span>
-          <ul className="mt-2 list-inside list-disc">
-            <li>Full control over lending parameters</li>
-            <li>Customizable risk management</li>
-            <li>No performance fees</li>
-          </ul>
-        </p>
-        <p className="mt-4">
-          <span className="font-bold">Considerations:</span>
-          <ul className="mt-2 list-inside list-disc">
-            <li>Deep understanding of market risks needed</li>
-            <li>Currently requires manual rebalancing</li>
-            <li className="font-bold">
-              {' '}
-              Learn more about the risks{' '}
-              <a href="/info/risks" className="text-monarch-primary underline">
-                {' '}
-                here{' '}
-              </a>{' '}
-            </li>
-          </ul>
+          need for vaults.
         </p>
+        <div className="mt-4 flex flex-col gap-4 md:flex-row">
+          <Card
+            title="Benefits"
+            items={[
+              'Full control over parameters',
+              'Customizable risk management',
+              'No performance fees',
+            ]}
+          />
+          <Card
+            title="Considerations"
+            items={[
+              'Requires market risk knowledge',
+              'Manual rebalancing needed',
+              'Higher complexity',
+            ]}
+          />
+        </div>
       </>
     ),
   },
@@ -122,33 +108,30 @@ export const sections = [
     mainTitle: 'The Future of Monarch',
     subTitle: 'Automation and Beyond',
     image: logoImage,
-    customHeight: 200,
     content: (
       <>
         <p>
           <span className="text-xl font-bold">Coming Soon: Monarch Auto</span>
           <br />
-          We're developing "Monarch Auto", a feature that will help automate the rebalancing process
-          with your custom strategies. This will combine the benefits of direct market access with
-          automated management.
+          We're developing "Monarch Auto" to automate the rebalancing process with custom
+          strategies.
         </p>
         <p className="mt-4">
           <span className="font-bold">What's in Progress:</span>
           <ul className="mt-2 list-inside list-disc">
             <li>Automated rebalancing strategies</li>
             <li>Enhanced risk management tools</li>
-            <li>Improved user interface and experience</li>
+            <li>Improved user interface</li>
           </ul>
         </p>
         <p className="mt-4">
           <span className="font-bold">We Value Your Feedback!</span>
           <br />
-          Your input is crucial in shaping the future of Monarch. We encourage you to share your
-          thoughts, suggestions, and any issues you encounter. Please send your feedback to
+          Your input is crucial in shaping Monarch's future. Share your thoughts in our{' '}
           <a href="https://t.me/+kM48_lzD9gQ3NzRl" className="underline">
-            {' '}
-            our telegram chat here{' '}
+            Telegram chat
           </a>
+          .
         </p>
       </>
     ),
diff --git a/src/components/FeedInfo/OracleFeedInfo.tsx b/src/components/FeedInfo/OracleFeedInfo.tsx
index 96a85b1e..8ace4dde 100644
--- a/src/components/FeedInfo/OracleFeedInfo.tsx
+++ b/src/components/FeedInfo/OracleFeedInfo.tsx
@@ -40,20 +40,19 @@ export function OracleFeedInfo({
     </div>
   );
 
-    return (
-      <Tooltip
-        content={feed.description ?? getSlicedAddress(feed.address as Address)}
-        className="rounded-sm"
+  return (
+    <Tooltip
+      content={feed.description ?? getSlicedAddress(feed.address as Address)}
+      className="rounded-sm"
+    >
+      <Link
+        className="group flex w-full items-center gap-1 text-right no-underline hover:underline"
+        href={getExplorerURL(feed.address as Address, chainId)}
+        target="_blank"
       >
-        <Link
-          className="group flex w-full items-center gap-1 text-right no-underline hover:underline"
-          href={getExplorerURL(feed.address as Address, chainId)}
-          target="_blank"
-        >
-          {content}
-          <ExternalLinkIcon className="ml-1" />
-        </Link>
-      </Tooltip>
-    );
-  }
-
+        {content}
+        <ExternalLinkIcon className="ml-1" />
+      </Link>
+    </Tooltip>
+  );
+}
diff --git a/src/components/OracleVendorBadge.tsx b/src/components/OracleVendorBadge.tsx
index e9bace9f..1dc0f224 100644
--- a/src/components/OracleVendorBadge.tsx
+++ b/src/components/OracleVendorBadge.tsx
@@ -10,11 +10,12 @@ type OracleVendorBadgeProps = {
   useTooltip?: boolean;
 };
 
-const renderVendorIcon = (vendor: OracleVendors) => (  
-  OracleVendorIcons[vendor] 
-    ? <Image src={OracleVendorIcons[vendor]} alt={vendor} width={16} height={16} />  
-    : <IoWarningOutline className="text-secondary" size={16} />  
-);  
+const renderVendorIcon = (vendor: OracleVendors) =>
+  OracleVendorIcons[vendor] ? (
+    <Image src={OracleVendorIcons[vendor]} alt={vendor} width={16} height={16} />
+  ) : (
+    <IoWarningOutline className="text-secondary" size={16} />
+  );
 
 function OracleVendorBadge({ oracleData, useTooltip = true }: OracleVendorBadgeProps) {
   const { vendors } = parseOracleVendors(oracleData);
@@ -32,9 +33,7 @@ function OracleVendorBadge({ oracleData, useTooltip = true }: OracleVendorBadgeP
         <IoWarningOutline className="text-secondary" size={16} />
       ) : (
         vendors.map((vendor, index) => (
-          <React.Fragment key={index}>
-            {renderVendorIcon(vendor)}
-          </React.Fragment>
+          <React.Fragment key={index}>{renderVendorIcon(vendor)}</React.Fragment>
         ))
       )}
     </div>
@@ -65,6 +64,6 @@ function OracleVendorBadge({ oracleData, useTooltip = true }: OracleVendorBadgeP
   }
 
   return content;
-};
+}
 
 export default OracleVendorBadge;
diff --git a/src/components/layout/header/NavbarMobile.tsx b/src/components/layout/header/NavbarMobile.tsx
index e53380bb..5cd03ad2 100644
--- a/src/components/layout/header/NavbarMobile.tsx
+++ b/src/components/layout/header/NavbarMobile.tsx
@@ -12,15 +12,16 @@ export default function NavbarMobile() {
 
   const { address } = useAccount();
 
+  const navbarClass = [
+    'flex flex-1 flex-grow items-center justify-between',
+    'rounded-sm bg-primary p-4 backdrop-blur-2xl',
+    'mx-4',
+  ].join(' ');
+
   if (isMobileMenuOpen) {
     return (
       <nav className="sm:max-h-100 flex flex-col gap-4 rounded-sm bg-primary p-2 backdrop-blur-2xl">
-        <div
-          className={[
-            'flex flex-1 flex-grow items-center justify-between',
-            'rounded-sm bg-secondary p-4 backdrop-blur-2xl',
-          ].join(' ')}
-        >
+        <div className={navbarClass}>
           <div className="flex grow items-center justify-between gap-4">
             <NavbarTitle />
             <button
@@ -35,22 +36,24 @@ export default function NavbarMobile() {
         </div>
         <div>
           <ul className="mx-2 flex flex-col gap-4">
+            <li className="flex">
+              <NavbarLink href="/">
+                <p className="text-base opacity-80 hover:opacity-100">Home</p>
+              </NavbarLink>
+            </li>
             <li className="flex">
               <NavbarLink href="/markets">Markets</NavbarLink>
             </li>
-
             <li className="flex">
               <NavbarLink href={`/positions/${address ?? ''}`}>
-                <p className="text-base opacity-80 hover:opacity-100"> Portfolio </p>{' '}
+                <p className="text-base opacity-80 hover:opacity-100">Portfolio</p>
               </NavbarLink>
             </li>
             <li className="flex">
               <NavbarLink href={`/rewards/${address ?? ''}`}>
-                {' '}
-                <p className="text-base opacity-80 hover:opacity-100"> Rewards </p>{' '}
+                <p className="text-base opacity-80 hover:opacity-100">Rewards</p>
               </NavbarLink>
             </li>
-
             <li className="flex">
               <NavigationMenu.Root className="relative flex flex-grow flex-col">
                 <NavigationMenu.Viewport className={clsx('flex flex-col justify-center')} />
@@ -66,13 +69,7 @@ export default function NavbarMobile() {
   }
 
   return (
-    <nav
-      className={[
-        'flex flex-1 flex-grow items-center justify-between',
-        'rounded-sm border border-stone-200 bg-white bg-opacity-10 p-2 backdrop-blur-2xl',
-        'mx-4',
-      ].join(' ')}
-    >
+    <nav className={navbarClass}>
       <div className="flex h-8 grow items-center justify-between gap-4">
         <NavbarTitle />
         <button type="button" aria-label="Menu" data-state="closed" onClick={toggleMobileMenuOpen}>
diff --git a/src/utils/oracle.ts b/src/utils/oracle.ts
index 61a871df..a3dd0496 100644
--- a/src/utils/oracle.ts
+++ b/src/utils/oracle.ts
@@ -42,13 +42,16 @@ export function parseOracleVendors(oracleData: MorphoChainlinkOracleData | null)
     oracleData.quoteFeedTwo,
   ];
 
-  const vendors = new Set(  
-    feeds  
-      .filter(feed => feed?.vendor)  
-      .map(feed => Object.values(OracleVendors)
-        .find(v => v.toLowerCase() === feed!.vendor!.toLowerCase()) ?? OracleVendors.Unknown
-      )  
-  );  
+  const vendors = new Set(
+    feeds
+      .filter((feed) => feed?.vendor)
+      .map(
+        (feed) =>
+          Object.values(OracleVendors).find(
+            (v) => v.toLowerCase() === feed!.vendor!.toLowerCase(),
+          ) ?? OracleVendors.Unknown,
+      ),
+  );
 
   return {
     vendors: Array.from(vendors),