diff --git a/docusaurus.config.js b/docusaurus.config.js
index 9a2690c18220..fae36327966d 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -169,6 +169,27 @@ const config = {
         content: 'width=device-width, initial-scale=1, viewport-fit=cover',
       },
     },
+    {
+      tagName: 'meta',
+      attributes: {
+        name: 'theme-color',
+        content: 'rgba(0, 0, 0, 0)',
+      },
+    },
+    {
+      tagName: 'meta',
+      attributes: {
+        name: 'apple-mobile-web-app-capable',
+        content: 'yes',
+      },
+    },
+    {
+      tagName: 'meta',
+      attributes: {
+        name: 'apple-mobile-web-app-status-bar-style',
+        content: 'black-translucent',
+      },
+    },
     {
       tagName: 'link',
       attributes: {
@@ -207,6 +228,23 @@ const config = {
         })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
       `,
     },
+    {
+      tagName: 'script',
+      attributes: {
+        type: 'text/javascript',
+      },
+      innerHTML: `
+          (function() {
+            var isHomepage =
+              window.location.pathname === '/' ||
+              /^\\/push-chain-website\\/pr-preview\\/pr-\\d+\\/?$/.test(window.location.pathname);
+
+            if (isHomepage) {
+              document.body.classList.add('homepage-body');
+            }
+          })();
+        `,
+    },
     {
       tagName: 'script',
       attributes: {
diff --git a/src/components/BRB/BRBParallax.tsx b/src/components/BRB/BRBParallax.tsx
index 6e46d410d681..1f526d78e6ff 100644
--- a/src/components/BRB/BRBParallax.tsx
+++ b/src/components/BRB/BRBParallax.tsx
@@ -143,9 +143,9 @@ const Container = styled.div`
 
 const BRBWrapper = styled.div`
   width: 100%;
-  height: 100vh;
+  height: 100dvh;
   @media ${device.mobileL} {
-    min-height: 100vh;
+    min-height: 100dvh;
   }
 `;
 
diff --git a/src/components/Explainer/Explainer.tsx b/src/components/Explainer/Explainer.tsx
index b648db4fb884..b5b394c9f727 100644
--- a/src/components/Explainer/Explainer.tsx
+++ b/src/components/Explainer/Explainer.tsx
@@ -1051,7 +1051,7 @@ const DesktopTOC = styled(ItemV)`
 
   justify-content: flex-start;
 
-  max-height: 90vh;
+  max-height: 90dvh;
   overflow-y: auto;
   overflow-x: hidden; /* Prevent horizontal scrollbar */
 
diff --git a/src/components/FloatingEmoji/FloatingEmoji.tsx b/src/components/FloatingEmoji/FloatingEmoji.tsx
index 9ac90ce5ed84..0b6ac1180a27 100644
--- a/src/components/FloatingEmoji/FloatingEmoji.tsx
+++ b/src/components/FloatingEmoji/FloatingEmoji.tsx
@@ -61,7 +61,7 @@ const FloatingContainer = styled.div`
   top: 0;
   left: 0;
   width: 100vw;
-  height: 100vh;
+  height: 100dvh;
   pointer-events: none;
   z-index: 1000;
   overflow: hidden;
@@ -70,72 +70,102 @@ const FloatingContainer = styled.div`
 const FloatingEmojiWrapper = styled.div<{
   $top: number;
   $fromSide: 'left' | 'right';
-  $animationState: 'roll-in-left' | 'roll-in-right' | 'stay' | 'roll-out-left' | 'roll-out-right';
+  $animationState:
+    | 'roll-in-left'
+    | 'roll-in-right'
+    | 'stay'
+    | 'roll-out-left'
+    | 'roll-out-right';
   $size: number;
 }>`
   position: absolute;
-  top: ${props => props.$top}vh;
+  top: ${(props) => props.$top}dvh;
   pointer-events: none;
-  
+
   /* Responsive horizontal positioning accounting for emoji width */
   /* Default: 10% from side (much further from center) */
-  left: ${props => props.$fromSide === 'left' ? '10%' : '90%'};
-  transform: ${props => props.$fromSide === 'left' ? 'translateX(0)' : 'translateX(-100%)'};
-  
+  left: ${(props) => (props.$fromSide === 'left' ? '10%' : '90%')};
+  transform: ${(props) =>
+    props.$fromSide === 'left' ? 'translateX(0)' : 'translateX(-100%)'};
+
   /* DesktopL: 15% from side */
   @media ${device.desktopL} {
-    left: ${props => props.$fromSide === 'left' ? '15%' : '85%'};
-    transform: ${props => props.$fromSide === 'left' ? 'translateX(0)' : 'translateX(-100%)'};
+    left: ${(props) => (props.$fromSide === 'left' ? '15%' : '85%')};
+    transform: ${(props) =>
+      props.$fromSide === 'left' ? 'translateX(0)' : 'translateX(-100%)'};
   }
-  
+
   /* Tablet: 8% from side */
   @media ${device.tablet} {
-    left: ${props => props.$fromSide === 'left' ? '8%' : '92%'};
-    transform: ${props => props.$fromSide === 'left' ? 'translateX(0)' : 'translateX(-100%)'};
+    left: ${(props) => (props.$fromSide === 'left' ? '8%' : '92%')};
+    transform: ${(props) =>
+      props.$fromSide === 'left' ? 'translateX(0)' : 'translateX(-100%)'};
   }
-  
+
   /* MobileL: 3% from side */
   @media ${device.mobileL} {
-    left: ${props => props.$fromSide === 'left' ? '3%' : '97%'};
-    transform: ${props => props.$fromSide === 'left' ? 'translateX(0)' : 'translateX(-100%)'};
+    left: ${(props) => (props.$fromSide === 'left' ? '3%' : '97%')};
+    transform: ${(props) =>
+      props.$fromSide === 'left' ? 'translateX(0)' : 'translateX(-100%)'};
   }
-  
+
   /* Size constraint - max 20vh */
-  width: ${props => Math.min(props.$size, 20)}vh;
-  height: ${props => Math.min(props.$size, 20)}vh;
-  
+  width: ${(props) => Math.min(props.$size, 20)}dvh;
+  height: ${(props) => Math.min(props.$size, 20)}dvh;
+
   /* Animation based on state */
-  ${props => {
+  ${(props) => {
     switch (props.$animationState) {
       case 'roll-in-left':
-        return css`animation: ${rollInFromLeft} 2s ease-out forwards;`;
+        return css`
+          animation: ${rollInFromLeft} 2s ease-out forwards;
+        `;
       case 'roll-in-right':
-        return css`animation: ${rollInFromRight} 2s ease-out forwards;`;
+        return css`
+          animation: ${rollInFromRight} 2s ease-out forwards;
+        `;
       case 'stay':
-        return css`animation: ${stayVisible} 3s ease-in-out forwards;`;
+        return css`
+          animation: ${stayVisible} 3s ease-in-out forwards;
+        `;
       case 'roll-out-left':
-        return css`animation: ${rollOutToLeft} 2s ease-in forwards;`;
+        return css`
+          animation: ${rollOutToLeft} 2s ease-in forwards;
+        `;
       case 'roll-out-right':
-        return css`animation: ${rollOutToRight} 2s ease-in forwards;`;
+        return css`
+          animation: ${rollOutToRight} 2s ease-in forwards;
+        `;
       default:
-        return css`animation: none;`;
+        return css`
+          animation: none;
+        `;
     }
   }}
-  
+
   /* Responsive scaling - laptopL and lower */
   /* LaptopL (1440px) and lower: 0.75x scale */
   @media (max-width: 1440px) {
-    transform: ${props => props.$fromSide === 'left' ? 'translateX(0) scale(0.75)' : 'translateX(-100%) scale(0.75)'};
+    transform: ${(props) =>
+      props.$fromSide === 'left'
+        ? 'translateX(0) scale(0.75)'
+        : 'translateX(-100%) scale(0.75)'};
   }
-  
+
   /* Tablet (768px) and lower: 0.5x scale */
   @media ${device.tablet} {
-    transform: ${props => props.$fromSide === 'left' ? 'translateX(0) scale(0.5)' : 'translateX(-100%) scale(0.5)'};
+    transform: ${(props) =>
+      props.$fromSide === 'left'
+        ? 'translateX(0) scale(0.5)'
+        : 'translateX(-100%) scale(0.5)'};
   }
-  
+
   /* MobileL (525px) and lower: 0.25x scale */
   @media ${device.mobileL} {
-    transform: ${props => props.$fromSide === 'left' ? 'translateX(0) scale(0.25)' : 'translateX(-100%) scale(0.25)'};
+    transform: ${(props) =>
+      props.$fromSide === 'left'
+        ? 'translateX(0) scale(0.25)'
+        : 'translateX(-100%) scale(0.25)'};
   }
 `;
 
@@ -146,7 +176,12 @@ interface FloatingEmojiState {
   top: number;
   size: number;
   fromSide: 'left' | 'right';
-  animationState: 'roll-in-left' | 'roll-in-right' | 'stay' | 'roll-out-left' | 'roll-out-right';
+  animationState:
+    | 'roll-in-left'
+    | 'roll-in-right'
+    | 'stay'
+    | 'roll-out-left'
+    | 'roll-out-right';
 }
 
 // Props interface
@@ -159,46 +194,51 @@ interface FloatingEmojiProps {
 }
 
 const FloatingEmoji: React.FC<FloatingEmojiProps> = ({
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   interval = 8000, // 8 seconds between emojis
   stayDuration = 3000, // 3 seconds stay duration
   minSize = 8, // 8vh minimum
   maxSize = 20, // 20vh maximum (will be capped at 20vh anyway)
-  enabled = true
+  enabled = true,
 }) => {
   const [activeEmojis, setActiveEmojis] = useState<FloatingEmojiState[]>([]);
-  const [confettiSequenceComplete, setConfettiSequenceComplete] = useState(false);
+  const [confettiSequenceComplete, setConfettiSequenceComplete] =
+    useState(false);
   const [confettiLaunched, setConfettiLaunched] = useState(false);
-  
+
   const emojiTypes: EmojiType[] = ['love', 'haha', 'yay', 'wow']; // Removed confetti from random selection
-  
+
   // Generate confetti emoji for initial sequence
-  const generateConfettiEmoji = useCallback((fromSide: 'left' | 'right'): FloatingEmojiState => {
-    const size = Math.random() * (Math.min(maxSize, 20) - minSize) + minSize;
-    
-    // Check if we're on laptopL or smaller (1440px and below)
-    const isLaptopLOrSmaller = window.innerWidth <= 1440;
-    
-    // Position confetti: same as regular emojis on laptopL and smaller, otherwise bottom 70%
-    const maxTop = 100 - size; // Ensure emoji doesn't go below viewport
-    const minTop = isLaptopLOrSmaller ? 70 : 30; // Follow emoji rules on smaller screens
-    const top = Math.random() * (maxTop - minTop) + minTop;
+  const generateConfettiEmoji = useCallback(
+    (fromSide: 'left' | 'right'): FloatingEmojiState => {
+      const size = Math.random() * (Math.min(maxSize, 20) - minSize) + minSize;
 
-    return {
-      id: `confetti-${fromSide}-${Date.now()}-${Math.random()}`,
-      type: 'confetti',
-      fromSide,
-      top,
-      size,
-      animationState: fromSide === 'left' ? 'roll-in-left' : 'roll-in-right'
-    };
-  }, [minSize, maxSize]);
+      // Check if we're on laptopL or smaller (1440px and below)
+      const isLaptopLOrSmaller = window.innerWidth <= 1440;
+
+      // Position confetti: same as regular emojis on laptopL and smaller, otherwise bottom 70%
+      const maxTop = 100 - size; // Ensure emoji doesn't go below viewport
+      const minTop = isLaptopLOrSmaller ? 70 : 30; // Follow emoji rules on smaller screens
+      const top = Math.random() * (maxTop - minTop) + minTop;
+
+      return {
+        id: `confetti-${fromSide}-${Date.now()}-${Math.random()}`,
+        type: 'confetti',
+        fromSide,
+        top,
+        size,
+        animationState: fromSide === 'left' ? 'roll-in-left' : 'roll-in-right',
+      };
+    },
+    [minSize, maxSize]
+  );
 
   // Generate random emoji (non-confetti)
   const generateRandomEmoji = useCallback((): FloatingEmojiState => {
     const type = emojiTypes[Math.floor(Math.random() * emojiTypes.length)];
     const fromSide = Math.random() > 0.5 ? 'left' : 'right';
     const size = Math.random() * (Math.min(maxSize, 20) - minSize) + minSize;
-    
+
     // Position regular emoji in bottom 30% (70vh to 100vh), ensure no cutoff
     const maxTop = 100 - size; // Ensure emoji doesn't go below viewport
     const minTop = 70;
@@ -210,47 +250,62 @@ const FloatingEmoji: React.FC<FloatingEmojiProps> = ({
       fromSide,
       top,
       size,
-      animationState: fromSide === 'left' ? 'roll-in-left' : 'roll-in-right'
+      animationState: fromSide === 'left' ? 'roll-in-left' : 'roll-in-right',
     };
   }, [minSize, maxSize]);
-  
+
   // Update emoji animation state
-  const updateEmojiState = useCallback((id: string, newState: FloatingEmojiState['animationState']) => {
-    setActiveEmojis(prev => 
-      prev.map(emoji => 
-        emoji.id === id ? { ...emoji, animationState: newState } : emoji
-      )
-    );
-  }, []);
-  
+  const updateEmojiState = useCallback(
+    (id: string, newState: FloatingEmojiState['animationState']) => {
+      setActiveEmojis((prev) =>
+        prev.map((emoji) =>
+          emoji.id === id ? { ...emoji, animationState: newState } : emoji
+        )
+      );
+    },
+    []
+  );
+
   // Remove emoji
   const removeEmoji = useCallback((id: string) => {
-    setActiveEmojis(prev => prev.filter(emoji => emoji.id !== id));
+    setActiveEmojis((prev) => prev.filter((emoji) => emoji.id !== id));
   }, []);
-  
 
   // Add regular emoji (only after confetti sequence is complete)
   const addRegularEmoji = useCallback(() => {
     if (!enabled || !confettiSequenceComplete) return;
-    
+
     const newEmoji = generateRandomEmoji();
-    setActiveEmojis(prev => [...prev, newEmoji]);
-    
+    setActiveEmojis((prev) => [...prev, newEmoji]);
+
     // Schedule state transitions
     setTimeout(() => {
       updateEmojiState(newEmoji.id, 'stay');
     }, 2000); // After roll-in animation (2s)
-    
+
     setTimeout(() => {
       // Exit from the same side as entry
-      updateEmojiState(newEmoji.id, newEmoji.fromSide === 'left' ? 'roll-out-left' : 'roll-out-right');
+      updateEmojiState(
+        newEmoji.id,
+        newEmoji.fromSide === 'left' ? 'roll-out-left' : 'roll-out-right'
+      );
     }, 2000 + stayDuration); // After roll-in + stay duration
-    
-    setTimeout(() => {
-      removeEmoji(newEmoji.id);
-    }, 2000 + stayDuration + 2000); // After complete cycle
-  }, [enabled, confettiSequenceComplete, generateRandomEmoji, updateEmojiState, removeEmoji, stayDuration]);
-  
+
+    setTimeout(
+      () => {
+        removeEmoji(newEmoji.id);
+      },
+      2000 + stayDuration + 2000
+    ); // After complete cycle
+  }, [
+    enabled,
+    confettiSequenceComplete,
+    generateRandomEmoji,
+    updateEmojiState,
+    removeEmoji,
+    stayDuration,
+  ]);
+
   // Set up confetti sequence and regular emoji intervals
   useEffect(() => {
     if (!enabled) {
@@ -259,56 +314,60 @@ const FloatingEmoji: React.FC<FloatingEmojiProps> = ({
       setConfettiLaunched(false);
       return;
     }
-    
+
     // Add single confetti from random side after 1 second
     const confettiTimeout = setTimeout(() => {
       if (confettiLaunched) return;
-      
+
       // Randomly choose left or right
       const randomSide = Math.random() > 0.5 ? 'left' : 'right';
       const confetti = generateConfettiEmoji(randomSide);
-      setActiveEmojis(prev => [...prev, confetti]);
+      setActiveEmojis((prev) => [...prev, confetti]);
       setConfettiLaunched(true);
-      
+
       // Schedule confetti animation state transitions
       setTimeout(() => {
         updateEmojiState(confetti.id, 'stay');
       }, 2000); // After roll-in animation (2s)
-      
+
       setTimeout(() => {
         // Exit from the same side as entry
-        updateEmojiState(confetti.id, confetti.fromSide === 'left' ? 'roll-out-left' : 'roll-out-right');
+        updateEmojiState(
+          confetti.id,
+          confetti.fromSide === 'left' ? 'roll-out-left' : 'roll-out-right'
+        );
       }, 2000 + stayDuration); // After roll-in + stay duration
-      
-      setTimeout(() => {
-        removeEmoji(confetti.id);
-      }, 2000 + stayDuration + 2000); // After complete cycle
+
+      setTimeout(
+        () => {
+          removeEmoji(confetti.id);
+        },
+        2000 + stayDuration + 2000
+      ); // After complete cycle
     }, 1000);
-    
+
     // Mark confetti sequence as complete after confetti is launched and has time to finish
     const completeTimeout = setTimeout(() => {
       setConfettiSequenceComplete(true);
     }, 7000); // 7 seconds should be enough for single confetti to complete its cycle
-    
+
     return () => {
       clearTimeout(confettiTimeout);
       clearTimeout(completeTimeout);
     };
   }, [enabled]);
 
-
-
   // Set up regular emoji interval (only after confetti sequence)
   useEffect(() => {
     if (!enabled || !confettiSequenceComplete) {
       return;
     }
-    
+
     // Start regular emoji sequence after confetti is complete (random 6-12s delay)
     const firstDelay = Math.random() * (12000 - 6000) + 6000; // 6000-12000ms
     const firstRegularTimeout = setTimeout(() => {
       addRegularEmoji();
-      
+
       // Set up recurring intervals with random timing (12-18s)
       const scheduleNext = () => {
         const nextDelay = Math.random() * (18000 - 12000) + 12000; // 12000-18000ms
@@ -317,20 +376,20 @@ const FloatingEmoji: React.FC<FloatingEmojiProps> = ({
           scheduleNext(); // Schedule the next one
         }, nextDelay);
       };
-      
+
       scheduleNext();
     }, firstDelay);
-    
+
     return () => {
       clearTimeout(firstRegularTimeout);
     };
   }, [enabled, confettiSequenceComplete, addRegularEmoji]);
-  
+
   if (!enabled) return null;
-  
+
   return (
     <FloatingContainer>
-      {activeEmojis.map(emoji => (
+      {activeEmojis.map((emoji) => (
         <FloatingEmojiWrapper
           key={emoji.id}
           $top={emoji.top}
@@ -338,8 +397,8 @@ const FloatingEmoji: React.FC<FloatingEmojiProps> = ({
           $animationState={emoji.animationState}
           $size={emoji.size}
         >
-          <AnimatedEmoji 
-            type={emoji.type} 
+          <AnimatedEmoji
+            type={emoji.type}
             size={Math.min(emoji.size * 10, 200)} // Convert vh to px (approximate)
             flip={emoji.type === 'confetti' && emoji.fromSide === 'right'}
           />
diff --git a/src/components/IFrameModal/IFrameModal.tsx b/src/components/IFrameModal/IFrameModal.tsx
index ddab1fd7c2d7..998b97849995 100644
--- a/src/components/IFrameModal/IFrameModal.tsx
+++ b/src/components/IFrameModal/IFrameModal.tsx
@@ -54,7 +54,7 @@ export default function IFrameModal({
         display: 'flex',
         flexDirection: 'column',
         width: '100%',
-        height: isIframeVisible ? '80vh' : 'auto',
+        height: isIframeVisible ? '80dvh' : 'auto',
         maxHeight,
         borderRadius: '12px',
         overflow: 'hidden',
diff --git a/src/components/PushChat/PushChatComponent.tsx b/src/components/PushChat/PushChatComponent.tsx
index d0caa3e43e81..43e78c4c3cc7 100644
--- a/src/components/PushChat/PushChatComponent.tsx
+++ b/src/components/PushChat/PushChatComponent.tsx
@@ -264,6 +264,6 @@ const PlayGround = styled(Section)`
   background-repeat: no-repeat;
   background-size: contain;
   width: 100%;
-  height: 75vh;
+  height: 75dvh;
   margin: 0 auto;
 `;
diff --git a/src/components/RemixIDE/RemixIDE.tsx b/src/components/RemixIDE/RemixIDE.tsx
index c39b736bc37b..be2586f99c20 100644
--- a/src/components/RemixIDE/RemixIDE.tsx
+++ b/src/components/RemixIDE/RemixIDE.tsx
@@ -226,7 +226,7 @@ export default function RemixIDE({ examples }: RemixIDEProps) {
       <div
         style={{
           width: '100%',
-          height: isFullScreen ? 'calc(100vh - 56px)' : '600px',
+          height: isFullScreen ? 'calc(100dvh - 56px)' : '600px',
           position: 'relative',
         }}
       >
diff --git a/src/components/SEO/WebsiteMeta.tsx b/src/components/SEO/WebsiteMeta.tsx
index 8698c54530bc..fa516471dce1 100644
--- a/src/components/SEO/WebsiteMeta.tsx
+++ b/src/components/SEO/WebsiteMeta.tsx
@@ -59,16 +59,7 @@ export default function WebsiteMeta() {
       />
 
       {/* Browser UI chrome */}
-      <meta
-        name='theme-color'
-        content='var(--ifm-color-theme-purple)'
-        media='(prefers-color-scheme: dark)'
-      />
-      <meta
-        name='theme-color'
-        content='var(--ifm-color-white)'
-        media='(prefers-color-scheme: light)'
-      />
+      <meta name='theme-color' content='rgba(0, 0, 0, 0)' />
       <meta
         name='msapplication-TileColor'
         content='var(--ifm-color-theme-purple)'
diff --git a/src/css/custom.css b/src/css/custom.css
index 81423edd276d..d7cc6073d595 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -772,10 +772,30 @@
   --ifm-color-tag-hover: #d53a94;
 }
 
+html {
+    height: 100%;
+    padding-bottom: env(safe-area-inset-bottom);
+}
+
+body {
+  height: 100%;
+}
+
+/* Ensure homepage uses black background under translucent bars and fills viewport */
+body .homepage-body {
+  background: #000000 !important;
+  height: 100% !important;
+  display: flex !important;
+  flex-direction: column !important;
+  margin: 0;
+
+}
+
+
 /* update docs/blogs dark mode color */
 html[data-theme='dark'],
-html[data-theme='dark'] body,
-html[data-theme='dark'] #__docusaurus,
+/*html[data-theme='dark'] body,*/
+/*html[data-theme='dark'] #__docusaurus,*/
 html[data-theme='dark'] .main-wrapper,
 html[data-theme='dark'] .theme-doc-markdown,
 html[data-theme='dark'] .theme-doc-page,
@@ -1360,10 +1380,10 @@ a:hover {
 }
 
 .navbar-sidebar {
-  height: 96vh;
+  height: 96dvh;
   width: 90vw;
   border-radius: 0.5rem;
-  margin: 2vh 5vw;
+  margin: 2dvh 5vw;
 }
 
 .navbar-sidebar .navbar__brand {
@@ -2491,4 +2511,4 @@ article .markdown>ol>li>code {
   margin-left: 8px;
   vertical-align: middle;
   transform: rotate(180deg);
-}
\ No newline at end of file
+}
diff --git a/src/hooks/useMediaQuery.ts b/src/hooks/useMediaQuery.ts
index 72eacf94fd49..e31cf77351a4 100644
--- a/src/hooks/useMediaQuery.ts
+++ b/src/hooks/useMediaQuery.ts
@@ -32,49 +32,3 @@ function useMediaQuery(query: string): boolean {
 }
 
 export default useMediaQuery;
-
-// // React + Web3 Essentials
-// import { useEffect, useState } from 'react';
-
-// function useMediaQuery(query: string): boolean {
-//   const getMatches = (query: string): boolean => {
-//     // Prevents SSR issues
-//     if (typeof window !== 'undefined') {
-//       return window.matchMedia(query).matches;
-//     }
-//     return false;
-//   };
-
-//   const [matches, setMatches] = useState<boolean>(getMatches(query));
-
-//   function handleChange() {
-//     setMatches(getMatches(query));
-//   }
-
-//   useEffect(() => {
-//     const matchMedia = window.matchMedia(query);
-
-//     // Triggered at the first client-side load and if query changes
-//     handleChange();
-
-//     // Listen matchMedia
-//     if (matchMedia.addListener) {
-//       matchMedia.addListener(handleChange);
-//     } else {
-//       matchMedia.addEventListener('change', handleChange, { passive: true });
-//     }
-
-//     return () => {
-//       if (matchMedia.removeListener) {
-//         matchMedia.removeListener(handleChange);
-//       } else {
-//         matchMedia.removeEventListener('change', handleChange);
-//       }
-//     };
-//     // eslint-disable-next-line react-hooks/exhaustive-deps
-//   }, [query]);
-
-//   return matches;
-// }
-
-// export default useMediaQuery;
diff --git a/src/pages-composition/homeComp.tsx b/src/pages-composition/homeComp.tsx
index 7a0abd493174..ca09f84650b3 100644
--- a/src/pages-composition/homeComp.tsx
+++ b/src/pages-composition/homeComp.tsx
@@ -698,7 +698,10 @@ const HomeWrapper = styled(ItemV)`
   background: var(--ifm-color-black);
   margin: 0;
   padding: 0;
+  padding-bottom: env(safe-area-inset-bottom);
   overflow-x: hidden !important;
+  min-height: 100svh;
+  min-height: 100dvh;
   font-family:
     DM Sans,
     san-serif !important;
@@ -735,7 +738,8 @@ const HomeWrapper = styled(ItemV)`
 const HeroSection = styled(Section)`
   overflow-y: visible;
   overflow-x: clip;
-  min-height: 100vh;
+  min-height: 100svh;
+  min-height: 100dvh;
 `;
 
 const HeroContent = styled(Content)`
diff --git a/src/pages-composition/privacymobileComp.tsx b/src/pages-composition/privacymobileComp.tsx
index 74386413d9f8..09ba4d8f00da 100644
--- a/src/pages-composition/privacymobileComp.tsx
+++ b/src/pages-composition/privacymobileComp.tsx
@@ -23,7 +23,7 @@ const PrivacyMobileComp = () => {
   return (
     <>
       <Section flexDirection='column'>
-        <HeroSection minHeight='70vh'>
+        <HeroSection minHeight='70dvh'>
           <Content className='contentBox' flex='1'>
             <ItemV>
               <HeroHeader textAlign='center'>
diff --git a/src/pages/donut-testnet-secret.tsx b/src/pages/donut-testnet-secret.tsx
index fafc2c75c49c..79e150d7ef9a 100755
--- a/src/pages/donut-testnet-secret.tsx
+++ b/src/pages/donut-testnet-secret.tsx
@@ -90,8 +90,8 @@ const Container = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
-  height: 100vh;
+  justify-condtent: center;
+  height: 100dvh;
   background-color: black;
   color: white;
   text-align: center;
diff --git a/src/pages/litepaper.tsx b/src/pages/litepaper.tsx
index e0362e2989ae..a7de4ad6a704 100644
--- a/src/pages/litepaper.tsx
+++ b/src/pages/litepaper.tsx
@@ -29,7 +29,7 @@ const Container = styled.div`
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  height: 100vh;
+  height: 100dvh;
   background-color: black;
   color: white;
   text-align: center;
diff --git a/src/theme/DocRoot/Layout/Sidebar/styles.module.css b/src/theme/DocRoot/Layout/Sidebar/styles.module.css
index 221aabf56422..ab9746b650ba 100644
--- a/src/theme/DocRoot/Layout/Sidebar/styles.module.css
+++ b/src/theme/DocRoot/Layout/Sidebar/styles.module.css
@@ -27,6 +27,6 @@
     top: 0;
     position: sticky;
     height: 100%;
-    max-height: 100vh;
+    max-height: 100dvh;
   }
 }
diff --git a/src/theme/Navbar/Content/index.js b/src/theme/Navbar/Content/index.js
index d74b7d63f9b4..089ea2715698 100644
--- a/src/theme/Navbar/Content/index.js
+++ b/src/theme/Navbar/Content/index.js
@@ -298,7 +298,6 @@ export default function NavbarContent() {
 
 const NavigationMenuItem = styled.div`
   position: relative;
-  // Styles for the flags
   .flag-icon {
     width: 24px;
     height: 24px;
@@ -313,17 +312,11 @@ const NavigationMenuItem = styled.div`
     font-size: 16px;
     line-height: 150%;
     letter-spacing: normal;
-    // color: var(--ifm-color-neutral-700);
   }
 
   &:hover {
-    & span {
-      // color: var(--ifm-color-white);
-    }
-
     & .chevronIcon {
       transform: rotate(180deg);
-      // color: var(--ifm-color-white);
     }
 
     & .menuContent {
@@ -344,10 +337,6 @@ const NavigationMenuHeader = styled.div`
     padding: 0px 4px 0px 12px;
     border-left: 1px solid var(--ifm-header-caret-color);
     font-family: DM Sans !important;
-
-    &:hover {
-      // color: var(--ifm-navbar-text-color);
-    }
   }
 
   &:hover {
@@ -362,7 +351,6 @@ const NavigationMenuHeader = styled.div`
 
   @media ${device.laptopM} {
     justify-content: space-between;
-    margin: 24px 0 0px 0;
 
     & span {
       padding: 0px;
@@ -375,6 +363,10 @@ const NavigationMenuHeader = styled.div`
         props.expanded ? 'rotate(180deg)' : 'none  !important'};
     }
   }
+
+  @media ${device.laptopM} {
+    display: none;
+  }
 `;
 
 const NavigationMenuContent = styled.ul`
@@ -481,4 +473,8 @@ const NavItem = styled(LinkTo)`
   &:hover {
     color: var(--ifm-color-primary-text);
   }
+
+  @media ${device.laptopM} {
+    display: none;
+  }
 `;
diff --git a/src/theme/NotFound/Content/index.tsx b/src/theme/NotFound/Content/index.tsx
index 3ff9db665beb..ab134d3073d3 100644
--- a/src/theme/NotFound/Content/index.tsx
+++ b/src/theme/NotFound/Content/index.tsx
@@ -113,7 +113,7 @@ const PageContainer = styled.div<{ isDocsPage?: boolean }>`
   flex-direction: column;
   ${({ isDocsOrBlogsPage }) =>
     !isDocsOrBlogsPage && 'background: var(--ifm-color-black)'};
-  ${({ isDocsOrBlogsPage }) => isDocsOrBlogsPage && 'min-height: 100vh;'};
+  ${({ isDocsOrBlogsPage }) => isDocsOrBlogsPage && 'min-height: 100dvh;'};
   ${({ isDocsOrBlogsPage }) =>
     isDocsOrBlogsPage
       ? 'color: var(--ifm-color-primary-text) !important'
@@ -125,7 +125,7 @@ const Container = styled.div`
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  height: 100vh;
+  height: 100dvh;
   color: white;
   text-align: center;
 `;
diff --git a/src/theme/Root.js b/src/theme/Root.js
index d0326fce303b..e34287bca5c5 100644
--- a/src/theme/Root.js
+++ b/src/theme/Root.js
@@ -132,7 +132,7 @@ export default function Root({ children }) {
           )}
 
           <PageContainer
-            className={returnAdditionalClasses(superimposedConditions)}
+            className={`${returnAdditionalClasses(superimposedConditions)} ${isHome ? 'homepage-body' : ''}`}
           >
             <ServerStyle from={children} />
 
@@ -159,14 +159,19 @@ export default function Root({ children }) {
 const PageContainer = styled.div`
   display: flex;
   flex-direction: column;
-  min-height: 100vh;
+  min-height: 100%;
+  position: relative;
 `;
 
 // The main content should take up all remaining space
 const Content = styled.div`
   flex: 1;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
   ${({ isHome }) =>
     isHome &&
     `background: linear-gradient(90deg, #3524ed 0%,var(--ifm-color-custom-pink) 50%, #3524ed 100%);
+     min-height: 100%;
     `}
 `;
diff --git a/src/theme/TOC/styles.module.css b/src/theme/TOC/styles.module.css
index 1453e0515266..cf3d5d864ffa 100644
--- a/src/theme/TOC/styles.module.css
+++ b/src/theme/TOC/styles.module.css
@@ -6,7 +6,7 @@
  */
 
 .tableOfContents {
-  max-height: calc(100vh - var(--ifm-navbar-height) - 2rem);
+  max-height: calc(100dvh - var(--ifm-navbar-height) - 2rem);
   overflow-y: auto;
   position: sticky;
   top: calc(var(--ifm-navbar-height) + 1rem);
@@ -33,7 +33,7 @@
 
 /* Adjust TOC height when Copy Page Button is present */
 .tableOfContents:has(.copyPageButtonWrapper) {
-  max-height: calc(100vh - var(--ifm-navbar-height) - 2rem);
+  max-height: calc(100dvh - var(--ifm-navbar-height) - 2rem);
 }
 
 /* Ensure proper scrolling for TOC items when Copy Page Button is present */