diff --git a/app/page.module.css b/app/page.module.css
index 94df9b8..1945877 100644
--- a/app/page.module.css
+++ b/app/page.module.css
@@ -11,6 +11,7 @@
 
 .title {
   font-size: clamp(1.3rem, 10vw, 2.5rem);
+  margin-top: 5vh;
 }
 
 .description {
@@ -19,8 +20,11 @@
 
 .grid {
   display: grid;
-  gap: 2rem;
+  gap: 1.5rem;
   grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+}
+
+.breakout {
   max-width: calc(var(--max-width) * 1.5);
   margin: 3rem auto;
 }
diff --git a/app/page.tsx b/app/page.tsx
index 1154fd6..a353088 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -2,6 +2,7 @@ import styles from './page.module.css'
 import { metadata } from './layout'
 import { Swap, Buy } from '@/components/Strategies'
 import { Content } from '@/components/Content'
+import { CalculationBase } from '@/components/CalculationBase'
 
 export default function Home() {
   return (
@@ -11,10 +12,14 @@ export default function Home() {
         <p className={styles.description}>{`${metadata.description}`}</p>
       </header>
       <main className={styles.main}>
-        <div className={styles.grid}>
-          <Swap />
-          <Buy />
-        </div>
+        <section className={styles.breakout}>
+          <div className={styles.grid}>
+            <Swap />
+            <Buy />
+          </div>
+          <CalculationBase />
+        </section>
+
         <Content />
       </main>
       <footer className={styles.footer}>
diff --git a/components/CalculationBase/CalculationBase.module.css b/components/CalculationBase/CalculationBase.module.css
new file mode 100644
index 0000000..f768bef
--- /dev/null
+++ b/components/CalculationBase/CalculationBase.module.css
@@ -0,0 +1,27 @@
+.label {
+  font-size: 0.7rem;
+  color: rgba(var(--foreground-rgb), 0.6);
+  border: 1px solid rgba(var(--foreground-rgb), 0.2);
+  border-radius: var(--border-radius);
+  padding: 0.1rem 0.3rem;
+  margin-left: 0.2rem;
+  margin-right: 0.2rem;
+  vertical-align: middle;
+}
+
+.calculationBase {
+  border-top: 1px solid rgba(var(--foreground-rgb), 0.2);
+  border-left: 1px solid rgba(var(--foreground-rgb), 0.2);
+  border-bottom: none;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  border-radius: var(--border-radius);
+  margin-top: 1.5rem;
+}
+
+.calculationBase li {
+  border-bottom: 1px solid rgba(var(--foreground-rgb), 0.2);
+  border-right: 1px solid rgba(var(--foreground-rgb), 0.2);
+  padding: 1rem;
+  font-size: 0.8rem;
+}
diff --git a/components/CalculationBase/CalculationBase.tsx b/components/CalculationBase/CalculationBase.tsx
new file mode 100644
index 0000000..7780a59
--- /dev/null
+++ b/components/CalculationBase/CalculationBase.tsx
@@ -0,0 +1,33 @@
+'use client'
+
+import { ratioOceanToAsi, ratioAgixToAsi, ratioFetToAsi } from '@/constants'
+import styles from './CalculationBase.module.css'
+import { usePrices } from '@/hooks'
+
+export function CalculationBase() {
+  const prices = usePrices()
+
+  return (
+    <ul className={styles.calculationBase}>
+      <li>
+        1 ASI
+        <br />= ${prices.asi}
+      </li>
+      <li>
+        1 OCEAN = {ratioOceanToAsi} ASI
+        <span className={styles.label}>fixed</span>
+        <br />= ${prices.ocean}
+      </li>
+      <li>
+        1 AGIX = {ratioAgixToAsi} ASI
+        <span className={styles.label}>fixed</span>
+        <br />= ${prices.agix}
+      </li>
+      <li>
+        1 Fet = {ratioFetToAsi} ASI
+        <span className={styles.label}>fixed</span>
+        <br />= ${prices.fet}
+      </li>
+    </ul>
+  )
+}
diff --git a/components/CalculationBase/index.tsx b/components/CalculationBase/index.tsx
new file mode 100644
index 0000000..cc180f9
--- /dev/null
+++ b/components/CalculationBase/index.tsx
@@ -0,0 +1 @@
+export * from './CalculationBase'
diff --git a/components/Content/Content.module.css b/components/Content/Content.module.css
index e7b5ebd..903ef3f 100644
--- a/components/Content/Content.module.css
+++ b/components/Content/Content.module.css
@@ -10,33 +10,3 @@
 .content a {
   text-decoration: underline;
 }
-
-.label {
-  font-size: 0.7rem;
-  color: rgba(var(--foreground-rgb), 0.6);
-  border: 1px solid rgba(var(--foreground-rgb), 0.2);
-  border-radius: var(--border-radius);
-  padding: 0.1rem 0.3rem;
-  margin-left: 0.2rem;
-  margin-right: 0.2rem;
-  vertical-align: middle;
-}
-
-.calculationBase {
-  border: 1px solid rgba(var(--foreground-rgb), 0.2);
-  border-bottom: none;
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-  border-radius: var(--border-radius);
-  margin-top: 2rem;
-}
-
-.calculationBase li {
-  border-bottom: 1px solid rgba(var(--foreground-rgb), 0.2);
-  padding: 1rem;
-  font-size: 0.8rem;
-}
-
-.calculationBase li:nth-child(odd) {
-  border-right: 1px solid rgba(var(--foreground-rgb), 0.2);
-}
diff --git a/components/Content/Content.tsx b/components/Content/Content.tsx
index 122d6b4..1aec558 100644
--- a/components/Content/Content.tsx
+++ b/components/Content/Content.tsx
@@ -1,12 +1,6 @@
-'use client'
-
-import { ratioOceanToAsi, ratioAgixToAsi, ratioFetToAsi } from '@/constants'
 import styles from './Content.module.css'
-import { usePrices } from '@/hooks'
 
 export function Content() {
-  const prices = usePrices()
-
   return (
     <div className={styles.content}>
       <p>
@@ -15,36 +9,15 @@ export function Content() {
           fixed ASI exchange rate
         </a>
         , the fiat values fetched from{' '}
-        <a href="https://coingecko.com">Coingecko</a> and the token swap quotes
-        from <a href="https://uniswap.org">Uniswap</a> v3 routes are constantly
+        <a href="https://coingecko.com">Coingecko</a> and the quotes from{' '}
+        <a href="https://uniswap.org">Uniswap</a> v3 swap routes are constantly
         changing.
       </p>
       <p>
-        There is no guarantee they reflect the value of your investment once the
-        actual ASI swap mechanism is released. Use at your own risk.
+        There is no guarantee displayed values reflect the value of your
+        investment once the actual ASI swap mechanism is released. Use at your
+        own risk.
       </p>
-
-      <ul className={styles.calculationBase}>
-        <li>
-          1 OCEAN = {ratioOceanToAsi} ASI
-          <span className={styles.label}>fixed</span>
-          <br />= ${prices.ocean}
-        </li>
-        <li>
-          1 AGIX = {ratioAgixToAsi} ASI
-          <span className={styles.label}>fixed</span>
-          <br />= ${prices.agix}
-        </li>
-        <li>
-          1 Fet = {ratioFetToAsi} ASI
-          <span className={styles.label}>fixed</span>
-          <br />= ${prices.fet}
-        </li>
-        <li>
-          1 ASI
-          <br />= ${prices.asi}
-        </li>
-      </ul>
     </div>
   )
 }