diff --git a/src/components/Animated-steps-list/Steps-list/StepsList.style.js b/src/components/Animated-steps-list/Steps-list/StepsList.style.js
index 4c7e70d5197e7..32754d07db6c9 100644
--- a/src/components/Animated-steps-list/Steps-list/StepsList.style.js
+++ b/src/components/Animated-steps-list/Steps-list/StepsList.style.js
@@ -8,7 +8,7 @@ export const StepsListWrapper = styled.div`
         
         & > li {
             &:not(:last-of-type) {
-                margin-bottom: 600px;
+                margin-bottom: 150px;
                 
                 @media (max-width: 850px) {
                     margin-bottom: 88px;
diff --git a/src/components/Animated-steps-list/hero/hero.style.js b/src/components/Animated-steps-list/hero/hero.style.js
index 94bb5e78e8747..471bcc47ec4a2 100644
--- a/src/components/Animated-steps-list/hero/hero.style.js
+++ b/src/components/Animated-steps-list/hero/hero.style.js
@@ -7,10 +7,10 @@ export const HeroWrapper = styled.div`
     font-weight: 600;
   }
 
-  padding: 12rem 0 20rem 0;
+  padding: 4rem 0 4rem 0;
 
   @media (max-width: 800px) {
-    padding: 2rem 0 10rem 0;
+    padding: 1rem 0 2rem 0;
   }
 
    .content {
diff --git a/src/components/Animated-steps-list/index.js b/src/components/Animated-steps-list/index.js
index e398fd6fbcf4e..3e2fba23f19d3 100644
--- a/src/components/Animated-steps-list/index.js
+++ b/src/components/Animated-steps-list/index.js
@@ -7,10 +7,10 @@ import FramedTerminal from "../Animated-terminal/Framed-terminal";
 import { AnimatedStepsListWrapper } from "./AnimatedStepsList.style";
 
 // The breakpoints where the next step of each animation triggers
-const breakpoints = [0, 350, 1400, 2450, 2680];
+const breakpoints = [0, 300, 800, 1300, 1700];
 
 // The number of pixels before the next breakpoint that the animation should complete
-const animationBottomPadding = [0, 620, 575, -50];
+const animationBottomPadding = [0, 180, 180, 50];
 
 const calculateCurrentFrame = (terminalSteps, currentIndex, scrollPosition) => {
   const percentage = Math.min(
@@ -37,7 +37,7 @@ const AnimatedStepsList = ({ terminalHeroState, steps }) => {
   const scrollPosition = useScrollPosition();
   const [indicatorIndex, setIndicatorIndex] = useState(0);
   const activeTerminalStateIndex =
-        scrollPosition <= 350 ? 0 : indicatorIndex + 1;
+        scrollPosition <= 300 ? 0 : indicatorIndex + 1;
   const terminalSteps = [terminalHeroState].concat(
     steps.map((step) => step.terminal)
   );