diff --git a/theme/tutorial-sidebar.less b/theme/tutorial-sidebar.less
index f0eb9c484b1d..cfafff1dc7b3 100644
--- a/theme/tutorial-sidebar.less
+++ b/theme/tutorial-sidebar.less
@@ -104,8 +104,7 @@
 }
 
 .tutorial-controls {
-    border-top: 2px solid var(--pxt-neutral-alpha50);
-    margin-top: 1rem;
+    margin-bottom: 1rem;
 }
 
 /*******************************
@@ -251,7 +250,7 @@
 .tutorial-controls {
     display: flex;
     flex-direction: row;
-    justify-content: space-between;
+    justify-content: end;
     flex-wrap: wrap;
     margin-bottom: 1rem;
 
@@ -592,7 +591,6 @@
     .immersive-reader-button.ui.item {
         float: right;
         border: 2px solid var(--pxt-neutral-stencil1);
-        margin-left: 1.5rem;
     }
 }
 
@@ -700,7 +698,6 @@
         min-height: 100%;
         display: flex;
         flex-direction: column;
-        justify-content: space-between;
         padding: .5rem 1rem 0.7rem 1rem;
 
         .tutorial-step-content {
@@ -709,8 +706,8 @@
 
         .immersive-reader-button {
             position: absolute;
-            top: 0.3rem;
-            right: 1rem;
+            top: 1rem;
+            left: 1rem;
         }
     }
 
@@ -782,7 +779,6 @@
         padding: 0 0;
         column-gap: 1rem;
         border-bottom: unset;
-        margin-left: auto;
 
         .ui.button {
             margin: 0;
@@ -815,10 +811,11 @@
 
     .tutorial-controls {
         display: flex;
+        gap: 1rem;
         align-items: center;
         margin: 0;
         margin-top: 0.5rem;
-        padding: 0.7rem 0 0 0;
+        padding: 0 0 0.7rem 0;
 
         > .ui.button {
             width: unset;
diff --git a/webapp/src/components/tutorial/TutorialContainer.tsx b/webapp/src/components/tutorial/TutorialContainer.tsx
index 9e6a757a699d..0523ff2cdcb7 100644
--- a/webapp/src/components/tutorial/TutorialContainer.tsx
+++ b/webapp/src/components/tutorial/TutorialContainer.tsx
@@ -261,6 +261,11 @@ export function TutorialContainer(props: TutorialContainerProps) {
         {!isHorizontal && stepCounter}
         <div className={classList("tutorial-content", hasHint && "has-hint")} ref={contentRef} onScroll={updateScrollGradient}>
             <div className={"tutorial-content-bkg"}>
+                <div className="tutorial-controls steve4">
+                    {hasHint && <TutorialHint tutorialId={tutorialId} currentStep={visibleStep} markdown={hintMarkdown} parent={parent} />}
+                    {isHorizontal && stepCounter}
+                    {!isHorizontal && nextButton}
+                </div>
                 {!isHorizontal && <div className="tutorial-step-label">
                     {name && <span className="tutorial-step-title">{name}</span>}
                     <span className="tutorial-step-number">{lf("Step {0} of {1}", visibleStep + 1, steps.length)}</span>
@@ -268,11 +273,6 @@ export function TutorialContainer(props: TutorialContainerProps) {
                 {showImmersiveReader && <ImmersiveReaderButton ref={immReaderRef} content={markdown} tutorialOptions={tutorialOptions} />}
                 {title && <div className="tutorial-title">{title}</div>}
                 <MarkedContent className="no-select tutorial-step-content" tabIndex={0} markdown={markdown} parent={parent} contentRef={handleMarkedContentRef}/>
-                <div className="tutorial-controls">
-                    {hasHint && <TutorialHint tutorialId={tutorialId} currentStep={visibleStep} markdown={hintMarkdown} parent={parent} />}
-                    {isHorizontal && stepCounter}
-                    {!isHorizontal && nextButton}
-                </div>
             </div>
         </div>
         {validationFailures.length > 0 &&