diff --git a/components/home/HomePage.tsx b/components/home/HomePage.tsx
index d412c01..35dfa58 100644
--- a/components/home/HomePage.tsx
+++ b/components/home/HomePage.tsx
@@ -134,6 +134,25 @@ const HomePage = () => {
           </div>
         </div>
       </div>
+      <div className={`bg-th-primary-2 ${WRAPPER_Y_PADDING}`}>
+        <div className="mx-auto w-full max-w-5xl">
+          <h2 className="text-shadow mb-6 px-6 text-center text-3xl text-th-button-text md:text-5xl xl:px-0">
+            Test the waters.
+          </h2>
+          <YieldCalculator />
+          <div className="mx-auto max-w-3xl pt-6">
+            <p className="text-center text-sm text-th-fgd-4">
+              This calculator is for educational purposes only. It assumes rates
+              and prices remain constant over time. Take the time to understand
+              the{' '}
+              <Link className="underline md:hover:no-underline" href="/risks">
+                risks
+              </Link>{' '}
+              before depositing any funds.
+            </p>
+          </div>
+        </div>
+      </div>
       <div className={`${WRAPPER_Y_PADDING}`}>
         <div className="mx-auto flex max-w-3xl flex-col items-center">
           <h2 className="text-shadow mb-4 text-center text-3xl text-th-button-text md:text-5xl">
@@ -154,25 +173,6 @@ const HomePage = () => {
           <Ottersec className="h-10 w-auto text-th-fgd-1" />
         </div>
       </div>
-      <div className={`bg-th-primary-2 ${WRAPPER_Y_PADDING}`}>
-        <div className="mx-auto w-full max-w-5xl">
-          <h2 className="text-shadow mb-6 px-6 text-center text-3xl text-th-button-text md:text-5xl xl:px-0">
-            Test the waters.
-          </h2>
-          <YieldCalculator />
-          <div className="mx-auto max-w-3xl pt-6">
-            <p className="text-center text-sm text-th-fgd-4">
-              This calculator is for educational purposes only. It assumes rates
-              and prices remain constant over time. Take the time to understand
-              the{' '}
-              <Link className="underline md:hover:no-underline" href="/risks">
-                risks
-              </Link>{' '}
-              before depositing any funds.
-            </p>
-          </div>
-        </div>
-      </div>
       <div className={`bg-th-primary-1 ${WRAPPER_Y_PADDING}`}>
         <div className="px-6">
           <h2 className="text-shadow mb-6 text-center text-3xl text-th-button-text md:text-5xl">