diff --git a/packages/docusaurus-playground/src/pages/index.mdx b/packages/docusaurus-playground/src/pages/index.mdx
index 529ef7e..f3862a3 100644
--- a/packages/docusaurus-playground/src/pages/index.mdx
+++ b/packages/docusaurus-playground/src/pages/index.mdx
@@ -15,7 +15,10 @@ import {
 
 <Hero size="large">
   <HeroInfo>
-    <HeroTitle>Ethereum network participation for everyone</HeroTitle>
+    <HeroTitle>
+      THE STANDARD <br />
+      FOR WEB3 COMMUNICATIONS
+    </HeroTitle>
     {/*
         <HeroDescription className={"long"}>
             Waku is a decentralized communications network that enables private, censorship-resistant messaging for web3
@@ -23,9 +26,9 @@ import {
         </HeroDescription>
             * */}
     <HeroDescription className={'short'}>
-      Nimbus promotes client diversity and decentralization on Ethereum by
-      lowering participation barriers and reducing hardware overheads for
-      validators
+      Waku is a decentralized communications network, built for generalized
+      private and censorship-resistant messaging, supporting resource-restricted
+      environments like phones and browsers
     </HeroDescription>
     <HeroActions>
       <HeroAction href="/about" target="_blank">
@@ -37,7 +40,7 @@ import {
     </HeroActions>
   </HeroInfo>
   <HeroModel
-    modelId={'architecture04'}
+    modelId={'bust01'}
     mode={'abstract'}
     rotateSpeed={0.04}
     startY={'bottom'}
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/HeroDescription/HeroDescription.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/HeroDescription/HeroDescription.scss
index c7306dc..626bf10 100644
--- a/packages/logos-docusaurus-theme/src/client/components/mdx/HeroDescription/HeroDescription.scss
+++ b/packages/logos-docusaurus-theme/src/client/components/mdx/HeroDescription/HeroDescription.scss
@@ -19,6 +19,7 @@
 }
 
 .mdx-hero-description--large {
+  @include lsd.typography('h4');
 }
 
 .mdx-hero-description--medium {
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/HeroInfo/HeroInfo.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/HeroInfo/HeroInfo.scss
index 4220c64..a6a7ffe 100644
--- a/packages/logos-docusaurus-theme/src/client/components/mdx/HeroInfo/HeroInfo.scss
+++ b/packages/logos-docusaurus-theme/src/client/components/mdx/HeroInfo/HeroInfo.scss
@@ -20,6 +20,6 @@
 
 @include utils.responsive('lg', 'down') {
   :root {
-    --logos-hero-info-height: 340px;
+    //--logos-hero-info-height: 340px;
   }
 }
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/HeroInfo/HeroInfo.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/HeroInfo/HeroInfo.tsx
index a76ed20..84cfa17 100644
--- a/packages/logos-docusaurus-theme/src/client/components/mdx/HeroInfo/HeroInfo.tsx
+++ b/packages/logos-docusaurus-theme/src/client/components/mdx/HeroInfo/HeroInfo.tsx
@@ -1,8 +1,15 @@
 import clsx from 'clsx'
-import React, { PropsWithChildren } from 'react'
+import React, { PropsWithChildren, useEffect } from 'react'
 import { useHero } from '../Hero/Hero.context'
 import { ScrollToBottom } from '../index'
 import './HeroInfo.scss'
+import { useScrollY } from '../../../lib/useScrollY'
+import {
+  calcHeroInfoMb,
+  calcScrollThreshold,
+  isMobile,
+  mapFloat,
+} from '../../../lib/ui.utils'
 
 export type HeroInfoProps = PropsWithChildren<
   React.HTMLAttributes<HTMLDivElement>
@@ -18,11 +25,22 @@ export const HeroInfo: React.FC<HeroInfoProps> = ({
 }) => {
   const ctx = useHero()
   const size = sizeProp ? sizeProp : ctx ? ctx.size : 'medium'
+  const [mb, setMb] = React.useState(0)
+  const scrollY = useScrollY()
+
+  useEffect(() => {
+    if (isMobile()) {
+      setMb(calcHeroInfoMb(scrollY))
+    }
+  }, [scrollY])
 
   return (
     <>
       <div
         className={clsx(className, 'mdx-hero-info', `mdx-hero-info--${size}`)}
+        style={{
+          marginBottom: `calc(100vh - var(--logos-hero-info-height) - ${mb}px)`,
+        }}
         {...(props as any)}
       >
         {children}
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/HeroModel/Controls.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/HeroModel/Controls.tsx
index 31df7e4..75b88ca 100644
--- a/packages/logos-docusaurus-theme/src/client/components/mdx/HeroModel/Controls.tsx
+++ b/packages/logos-docusaurus-theme/src/client/components/mdx/HeroModel/Controls.tsx
@@ -1,11 +1,15 @@
 import { ROTATE_SPEED } from './HeroModel.configs'
-import { LookPresetItemValues, MovementProps } from '../../../types/ui.types'
+import { MovementProps } from '../../../types/ui.types'
 import React, { useEffect, useRef } from 'react'
 import { useScrollY } from '../../../lib/useScrollY'
 import { useFrame, useThree } from '@react-three/fiber'
-import { calcRotateSpeed } from './HeroModel.utils'
 import { OrbitControls } from '@react-three/drei'
-import { isMobile, isTouchDevice } from '../../../lib/ui.utils'
+import {
+  calcScrollThreshold,
+  isMobile,
+  isTouchDevice,
+  mapFloat,
+} from '../../../lib/ui.utils'
 
 const lerp = (a: number, b: number, t: number) => (1 - t) * a + t * b
 let targetPos: [number, number, number] = [0, 0, 0]
@@ -56,10 +60,12 @@ export const Controls = ({
   const { camera, size } = useThree()
   const controls = useRef<any>()
   const [lockOrbit, setLockOrbit] = React.useState(false)
+  const [scale, setScale] = React.useState(1)
+  const [posY, setPosY] = React.useState(0)
 
   useFrame((state, delta) => {
     ref.current.rotation.y -=
-      delta * (isMobile() ? 0.1 * rotateSpeed : rotateSpeed)
+      delta * (isMobile() ? 0.6 * rotateSpeed : rotateSpeed)
   })
 
   useEffect(() => {
@@ -91,18 +97,13 @@ export const Controls = ({
     }
   }, [])
 
-  // useEffect(() => {
-  //   if (!enableZoom) return
-  //   const [deltaX, deltaY, deltaZ] = calculateCameraPosition(scrollY)
-  //
-  //   // Add the deltas to the initial positions
-  //   const newPositionX = preset.cameraPos[0] + deltaX
-  //   const newPositionY = preset.cameraPos[1] + deltaY
-  //   const newPositionZ = preset.cameraPos[2] + deltaZ
-  //
-  //   camera.position.set(newPositionX, newPositionY, newPositionZ)
-  //   camera.updateProjectionMatrix()
-  // }, [scrollY, camera])
+  useEffect(() => {
+    if (isMobile()) {
+      setScale(mapFloat(scrollY, 0, calcScrollThreshold(), 1, 0.65))
+
+      setPosY(mapFloat(scrollY, 0, calcScrollThreshold(), 0, 0.35))
+    }
+  }, [scrollY])
 
   useEffect(() => {
     if (!enableZoom) return
@@ -135,7 +136,7 @@ export const Controls = ({
   }, [scrollY, camera])
 
   return (
-    <group ref={ref} {...props}>
+    <group ref={ref} {...props} scale={scale} position-y={posY}>
       {children}
       <OrbitControls
         ref={controls}
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/HeroModel/HeroModel.configs.ts b/packages/logos-docusaurus-theme/src/client/components/mdx/HeroModel/HeroModel.configs.ts
index 18609c5..e6bed2a 100644
--- a/packages/logos-docusaurus-theme/src/client/components/mdx/HeroModel/HeroModel.configs.ts
+++ b/packages/logos-docusaurus-theme/src/client/components/mdx/HeroModel/HeroModel.configs.ts
@@ -214,21 +214,21 @@ export const OBJECTS_PRESETS: LookPresetItem[] = [
       ],
     },
     abstract: {
-      cameraPos: [-0.04896235033638902, 0.9472082701791184, 0.5228785650143615],
+      cameraPos: [0.025758408225725123, 0.9432728632646389, 0.5085343068565109],
       cameraRot: [
-        0.09075944802968429, -0.13324364459355229, 0.012089995097095805,
+        -0.016796160047877214, 0.23199352927595504, 0.003862085219634371,
       ],
       controlsTarget: [
-        -0.006060485975867984, 0.9762180394124839, 0.20412308284554606,
+        -0.04849025797636223, 0.9379943498483801, 0.19429480114059927,
       ],
     },
     targetLook: {
-      cameraPos: [-0.09472312110216502, 0.9706051013497217, 1.2832894173829374],
+      cameraPos: [-0.0995637601904456, 0.9905193985583883, 1.2844592429465957],
       cameraRot: [
-        -0.19425365632872382, -0.10491000822068351, -0.020598661004321738,
+        -0.21489715158374015, -0.011908392248228742, -0.002599147273856083,
       ],
       controlsTarget: [
-        0.031601966631050554, 0.7390204722154392, 0.1061462404432137,
+        -0.08519853311178426, 0.7332893758986562, 0.10595091334036527,
       ],
     },
   },
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/HeroModel/HeroModel.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/HeroModel/HeroModel.scss
index eb7eeb3..2e19278 100644
--- a/packages/logos-docusaurus-theme/src/client/components/mdx/HeroModel/HeroModel.scss
+++ b/packages/logos-docusaurus-theme/src/client/components/mdx/HeroModel/HeroModel.scss
@@ -88,7 +88,8 @@
   }
 
   .mdx-hero-model {
-    transform: translate(-20px, 0px);
+    transform: translate(-12px, 0px);
+    width: calc(100vw - 20px);
   }
   .mdx-hero-model--abstract {
   }
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/HeroTitle/HeroTitle.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/HeroTitle/HeroTitle.scss
index d4ec577..4259cb3 100644
--- a/packages/logos-docusaurus-theme/src/client/components/mdx/HeroTitle/HeroTitle.scss
+++ b/packages/logos-docusaurus-theme/src/client/components/mdx/HeroTitle/HeroTitle.scss
@@ -9,8 +9,9 @@
 }
 
 .mdx-hero-title--large {
-  font-size: 5.0625rem !important;
-  line-height: 5rem !important;
+  @include lsd.typography('h1');
+  //font-size: 5.0625rem !important;
+  //line-height: 5rem !important;
 }
 
 .mdx-hero-title--medium {
@@ -31,7 +32,9 @@
   }
 
   .mdx-hero-title--large {
-    font-size: 1.875rem !important;
-    line-height: 2.1rem !important;
+    //font-size: 1.875rem !important;
+    //line-height: 2.1rem !important;
+    font-size: 2.175rem !important;
+    line-height: 2.475rem !important;
   }
 }
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/ScrollToBottom/ScrollToBottom.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/ScrollToBottom/ScrollToBottom.tsx
index 85c5439..aa1fcf9 100644
--- a/packages/logos-docusaurus-theme/src/client/components/mdx/ScrollToBottom/ScrollToBottom.tsx
+++ b/packages/logos-docusaurus-theme/src/client/components/mdx/ScrollToBottom/ScrollToBottom.tsx
@@ -3,6 +3,7 @@ import clsx from 'clsx'
 import React, { HTMLProps } from 'react'
 import styles from './styles.module.scss'
 import { useScrollY } from '../../../lib/useScrollY'
+import { calcHeroInfoMb, isMobile } from '../../../lib/ui.utils'
 
 type TProps = {}
 
@@ -20,8 +21,12 @@ export const ScrollToBottom = (
         top: document.body.scrollHeight,
         behavior: 'smooth',
       })
-    ;(secondElement as HTMLElement)?.scrollIntoView?.({ behavior: 'smooth' })
 
+    if (isMobile()) {
+      window.scrollTo(0, secondElement.getBoundingClientRect().top - 200)
+    } else {
+      ;(secondElement as HTMLElement)?.scrollIntoView?.({ behavior: 'smooth' })
+    }
     return
   }
 
diff --git a/packages/logos-docusaurus-theme/src/client/lib/ui.utils.ts b/packages/logos-docusaurus-theme/src/client/lib/ui.utils.ts
index 4ebe94d..e5374fc 100644
--- a/packages/logos-docusaurus-theme/src/client/lib/ui.utils.ts
+++ b/packages/logos-docusaurus-theme/src/client/lib/ui.utils.ts
@@ -36,3 +36,7 @@ export const isMobile = () => {
   if (typeof window === 'undefined') return false
   return window.innerWidth < 997
 }
+
+export const calcHeroInfoMb = (sy) => {
+  return mapFloat(scrollY, 0, calcScrollThreshold(), 0, 100)
+}