diff --git a/components/core/Auth/components/AuthWrapper.js b/components/core/Auth/components/AuthWrapper.js
index cf9be2fc..b7a8b0b6 100644
--- a/components/core/Auth/components/AuthWrapper.js
+++ b/components/core/Auth/components/AuthWrapper.js
@@ -22,11 +22,23 @@ const backgroundUrl = AUTH_BACKGROUNDS[backgroundIdx];
 const STYLES_AUTH_FOOTER = (theme) => css`
   ${Styles.HORIZONTAL_CONTAINER_CENTERED};
   position: fixed;
+  justify-content: flex-end;
   bottom: 0;
   left: 0;
   width: 100%;
   padding: 2px 24px;
   background-color: ${theme.semantic.bgWhite};
+  & > * + * {
+    margin-left: 24px;
+  }
+
+  @media (max-width: ${theme.sizes.mobile}px) {
+    padding: 2px 16px;
+    justify-content: center;
+    & > * + * {
+      margin-left: 16px;
+    }
+  }
 
   @supports ((-webkit-backdrop-filter: blur(75px)) or (backdrop-filter: blur(75px))) {
     -webkit-backdrop-filter: blur(75px);
@@ -64,14 +76,14 @@ export default function AuthWrapper({ children, isMobile, ...props }) {
     <div style={{ backgroundImage: `url(${backgroundUrl})`, minHeight: height }} {...props}>
       {children}
       <footer css={STYLES_AUTH_FOOTER}>
-        <System.H6 style={{ marginLeft: "auto" }} as="a" href="/terms">
+        <System.H6 as="a" href="/terms">
           Terms of service
         </System.H6>
-        <System.H6 style={{ marginLeft: 24 }} as="a" href="/guidelines">
+        <System.H6 as="a" href="/guidelines">
           Community guidelines
         </System.H6>
         {/** TODO(Amine): change discord link  */}
-        <System.H6 style={{ marginLeft: 24 }} as="a" href="/">
+        <System.H6 as="a" href="/">
           Join Discord
         </System.H6>
       </footer>
diff --git a/components/core/Auth/components/SignUpPopover.js b/components/core/Auth/components/SignUpPopover.js
index daef4a41..0288b438 100644
--- a/components/core/Auth/components/SignUpPopover.js
+++ b/components/core/Auth/components/SignUpPopover.js
@@ -12,16 +12,15 @@ const STYLES_POPOVER = (theme) => css`
   min-height: 544px;
   width: 95vw;
   border-radius: 20px;
-  padding: 36px 32px 36px 32px;
+  padding: 36px 32px;
 
   @media (max-width: ${theme.sizes.mobile}px) {
     flex-grow: 1;
     margin-bottom: auto;
-    max-width: 100%;
+    width: 100%;
   }
 
   background-color: white;
-
   @supports ((-webkit-backdrop-filter: blur(75px)) or (backdrop-filter: blur(75px))) {
     background: radial-gradient(
       80.79% 80.79% at 50% 50%,
diff --git a/components/system/components/fragments/Jumper.js b/components/system/components/fragments/Jumper.js
index f7332206..d04a9f08 100644
--- a/components/system/components/fragments/Jumper.js
+++ b/components/system/components/fragments/Jumper.js
@@ -11,7 +11,7 @@ import {
   AnimatePresence as FramerAnimatePresence,
   motion,
 } from "framer-motion";
-import { useEscapeKey } from "~/common/hooks";
+import { useEscapeKey, useLockScroll } from "~/common/hooks";
 import { Show } from "~/components/utility/Show";
 
 import ObjectBoxPreview from "~/components/core/ObjectBoxPreview";
@@ -69,6 +69,8 @@ function AnimatePresence({ children, ...props }) {
 
 function Root({ children, onClose, withDismissButton = true, ...props }) {
   useEscapeKey(onClose);
+  useLockScroll();
+
   return (
     <ModalPortal>
       <div>
diff --git a/components/system/components/fragments/MobileJumper.js b/components/system/components/fragments/MobileJumper.js
index b4c1a7dc..134b585d 100644
--- a/components/system/components/fragments/MobileJumper.js
+++ b/components/system/components/fragments/MobileJumper.js
@@ -8,6 +8,7 @@ import { css } from "@emotion/react";
 import { FullHeightLayout } from "~/components/system/components/FullHeightLayout";
 import { motion, AnimatePresence as FramerAnimatePresence } from "framer-motion";
 import { ModalPortal } from "~/components/core/ModalPortal";
+import { useLockScroll } from "~/common/hooks";
 
 /* -------------------------------------------------------------------------------------------------
  *  AnimatePresence
@@ -42,6 +43,8 @@ const JumperContext = React.createContext({});
 const useJumperContext = () => React.useContext(JumperContext);
 
 function Root({ children, onClose, withDismissButton = true, ...props }) {
+  useLockScroll();
+
   return (
     <ModalPortal>
       <FullHeightLayout
diff --git a/scenes/SceneAuth/index.js b/scenes/SceneAuth/index.js
index a22993d2..8540b79a 100644
--- a/scenes/SceneAuth/index.js
+++ b/scenes/SceneAuth/index.js
@@ -35,7 +35,7 @@ const STYLES_ROOT = css`
   background-size: cover;
 `;
 
-const STYLES_MIDDLE = css`
+const STYLES_MIDDLE = (theme) => css`
   position: relative;
   min-height: 10%;
   flex-grow: 1;
@@ -45,6 +45,11 @@ const STYLES_MIDDLE = css`
   flex-direction: column;
   text-align: left;
   padding: 24px;
+  @media (max-width: ${theme.sizes.mobile}px) {
+    padding: 24px 16px;
+    //NOTE(amine): additional scroll space for mobile
+    padding-bottom: 64px;
+  }
 `;
 
 const AuthScene = ({ onAuthenticate, onTwitterAuthenticate, page, onAction, ...props }) => {
diff --git a/scenes/SceneSurvey.js b/scenes/SceneSurvey.js
index 735fcaf2..a4ca28da 100644
--- a/scenes/SceneSurvey.js
+++ b/scenes/SceneSurvey.js
@@ -375,7 +375,7 @@ const STYLES_ROOT = css`
   background-size: cover;
 `;
 
-const STYLES_MIDDLE = css`
+const STYLES_MIDDLE = (theme) => css`
   position: relative;
   min-height: 10%;
   flex-grow: 1;
@@ -385,6 +385,11 @@ const STYLES_MIDDLE = css`
   flex-direction: column;
   text-align: left;
   padding: 24px;
+  @media (max-width: ${theme.sizes.mobile}px) {
+    padding: 24px 16px;
+    //NOTE(amine): additional scroll space for mobile
+    padding-bottom: 64px;
+  }
 `;
 
 const WithCustomWrapper = (Component) => (props) => {