diff --git a/public/images/background-images/auditForSecrets.svg b/public/images/background-images/auditForSecrets.svg
new file mode 100644
index 0000000..469ed62
--- /dev/null
+++ b/public/images/background-images/auditForSecrets.svg
@@ -0,0 +1,10 @@
+<svg width="564" height="566" viewBox="0 0 564 566" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M373.574 186.787C373.574 162.736 368.837 138.92 359.633 116.699C350.429 94.4787 336.938 74.2886 319.931 57.2817C302.924 40.2748 282.734 26.7841 260.514 17.5801C238.293 8.37599 214.477 3.63871 190.426 3.6387C166.374 3.6387 142.558 8.37597 120.338 17.58C98.1173 26.7841 77.9272 40.2747 60.9203 57.2816C43.9134 74.2885 30.4228 94.4787 21.2187 116.699C12.0146 138.92 7.27735 162.736 7.27734 186.787L190.426 186.787L373.574 186.787Z" fill="#5C5272"/>
+<path d="M563.998 463.329C563.998 519.598 518.383 565.213 462.114 565.213C405.845 565.213 360.23 519.598 360.23 463.329C360.23 407.06 405.845 361.445 462.114 361.445C518.383 361.445 563.998 407.06 563.998 463.329Z" fill="#97CCE3"/>
+<path d="M7.27739 279.574C7.27739 330.149 48.2766 371.148 98.8516 371.148C149.427 371.148 190.426 330.149 190.426 279.574C190.426 228.999 149.427 188 98.8516 188C48.2766 188 7.27739 228.999 7.27739 279.574Z" fill="#94D2BD"/>
+<path d="M561.574 1.52588e-05C536.886 1.41796e-05 512.439 4.83139 489.63 14.2183C466.821 23.6053 446.096 37.3639 428.638 54.7087C411.181 72.0535 397.333 92.6447 387.885 115.307C378.437 137.969 373.574 162.258 373.574 186.787L561.574 186.787L561.574 1.52588e-05Z" fill="#0A9396"/>
+<path d="M373.572 377.213C398.102 377.213 422.391 372.287 445.053 362.718C467.715 353.148 488.306 339.121 505.651 321.438C522.996 303.756 536.754 282.763 546.141 259.66C555.528 236.556 560.359 211.794 560.359 186.787L373.572 186.787L373.572 377.213Z" fill="#341830"/>
+<path d="M188 377.213C163.311 377.213 138.865 381.887 116.055 390.97C93.2462 400.052 72.5213 413.364 55.0638 430.145C37.6064 446.927 23.7585 466.85 14.3106 488.776C4.8627 510.702 -2.94802e-05 534.203 0 557.936L188 557.935L188 377.213Z" fill="#FEA22A"/>
+<path d="M373.574 377.213C373.574 400.946 368.774 424.446 359.448 446.373C350.122 468.299 336.453 488.222 319.221 505.003C301.989 521.785 281.531 535.097 259.016 544.179C236.501 553.261 212.37 557.936 188 557.936L188 377.213L373.574 377.213Z" fill="#0C8E91"/>
+<path d="M188 188C212.37 188 236.501 192.894 259.016 202.403C281.531 211.912 301.989 225.849 319.221 243.419C336.453 260.989 350.122 281.848 359.448 304.804C368.774 327.761 373.574 352.365 373.574 377.213L188 377.213L188 188Z" fill="#FF763E"/>
+</svg>
diff --git a/public/images/background-images/choosingALicense-bottom.svg b/public/images/background-images/choosingALicense-bottom.svg
new file mode 100644
index 0000000..022d48f
--- /dev/null
+++ b/public/images/background-images/choosingALicense-bottom.svg
@@ -0,0 +1,3 @@
+<svg width="327" height="153" viewBox="0 0 327 153" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M269.415 164C269.415 105.505 221.995 58.0849 163.5 58.0849C105.005 58.0849 57.5849 105.505 57.5849 164H0C0 73.7014 73.2014 0.5 163.5 0.5C253.799 0.5 327 73.7014 327 164H269.415Z" fill="#97CCE3"/>
+</svg>
diff --git a/public/images/background-images/choosingALicense-top.svg b/public/images/background-images/choosingALicense-top.svg
new file mode 100644
index 0000000..0348e75
--- /dev/null
+++ b/public/images/background-images/choosingALicense-top.svg
@@ -0,0 +1,5 @@
+<svg width="1344" height="231" viewBox="0 0 1344 231" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="78.5" cy="81.5" r="149.5" fill="#94D2BD"/>
+<path d="M1267.68 87.5L1148 191H1387.36L1267.68 87.5Z" fill="#FFA229"/>
+<path d="M1267.68 -16L1148 87.5H1387.36L1267.68 -16Z" fill="#FFA229"/>
+</svg>
diff --git a/public/images/background-images/moreHelp-bottom.svg b/public/images/background-images/moreHelp-bottom.svg
new file mode 100644
index 0000000..7997ef5
--- /dev/null
+++ b/public/images/background-images/moreHelp-bottom.svg
@@ -0,0 +1,5 @@
+<svg width="240" height="560" viewBox="0 0 240 560" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M159 318C246.813 318 318 246.813 318 159H0C0 246.813 71.1867 318 159 318Z" fill="#0D1B2A" fill-opacity="0.07"/>
+<path d="M159 159C246.813 159 318 87.8133 318 0H0C0 87.8133 71.1867 159 159 159Z" fill="#0D1B2A" fill-opacity="0.07"/>
+<path d="M0 477C0 564.813 71.1867 636 159 636C246.813 636 318 564.813 318 477C318 389.187 246.813 318 159 318H0V477Z" fill="#0D1B2A" fill-opacity="0.07"/>
+</svg>
diff --git a/public/images/background-images/moreHelp-top.svg b/public/images/background-images/moreHelp-top.svg
new file mode 100644
index 0000000..72bd67a
--- /dev/null
+++ b/public/images/background-images/moreHelp-top.svg
@@ -0,0 +1,6 @@
+<svg width="240" height="560" viewBox="0 0 240 560" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M81 121C168.813 121 240 49.8133 240 -38H-78C-78 49.8133 -6.81328 121 81 121Z" fill="#0D1B2A" fill-opacity="0.07"/>
+<path d="M81 121C168.813 121 240 192.187 240 280H-78C-78 192.187 -6.81328 121 81 121Z" fill="#0D1B2A" fill-opacity="0.07"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M-77.9998 289.067C-77.9634 371.879 -10.82 439 72.0002 439C-10.8387 439 -77.9936 506.151 -77.9998 588.988C-77.9998 588.992 -77.9998 588.996 -77.9998 589C-77.9998 589.004 -77.9998 589.007 -77.9998 589.011C-77.9996 592.029 -77.9102 595.026 -77.7343 598C9.86844 597.856 80.8568 526.868 81 439.265C78.0226 439.089 75.0218 439 72.0002 439C75.0218 439 78.0226 438.91 81 438.734C80.8568 351.132 9.86846 280.143 -77.7343 280C-77.9091 282.955 -77.9985 285.934 -77.9998 288.932C-77.9998 288.955 -77.9998 288.977 -77.9998 289C-77.9998 289.022 -77.9998 289.045 -77.9998 289.067Z" fill="#0D1B2A" fill-opacity="0.07"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M240 289.067C239.963 371.879 172.82 439 89.9998 439C172.839 439 239.994 506.151 240 588.988C240 588.992 240 588.996 240 589C240 589.004 240 589.007 240 589.011C240 592.029 239.91 595.026 239.734 598C152.132 597.856 81.1432 526.868 81 439.265C83.9774 439.089 86.9782 439 89.9998 439C86.9782 439 83.9774 438.91 81 438.734C81.1432 351.132 152.132 280.143 239.734 280C239.909 282.955 239.998 285.934 240 288.932C240 288.955 240 288.977 240 289C240 289.022 240 289.045 240 289.067Z" fill="#0D1B2A" fill-opacity="0.07"/>
+</svg>
diff --git a/public/images/background-images/publishYourRepo-bottom.svg b/public/images/background-images/publishYourRepo-bottom.svg
new file mode 100644
index 0000000..1df1b69
--- /dev/null
+++ b/public/images/background-images/publishYourRepo-bottom.svg
@@ -0,0 +1,6 @@
+<svg width="369" height="638" viewBox="0 0 369 638" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M175.5 135C282.367 135 369 48.591 369 -58H-18C-18 48.591 68.6329 135 175.5 135Z" fill="#EE9B00"/>
+<path d="M175.5 135C282.367 135 369 221.857 369 329H-18C-18 221.857 68.6329 135 175.5 135Z" fill="#0A9396"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M-17.9997 340.423C-17.7457 441.025 63.8859 522.499 164.547 522.499C63.8839 522.499 -17.7488 603.977 -17.9998 704.581L-17.9998 705.512C-17.991 709.032 -17.8826 712.529 -17.6772 715.999C88.9341 715.826 175.326 629.434 175.5 522.822C171.876 522.608 168.224 522.499 164.547 522.499C168.224 522.499 171.876 522.391 175.5 522.176C175.325 415.565 88.9338 329.174 -17.6772 329C-17.8824 332.469 -17.9908 335.963 -17.9997 339.481L-17.9997 340.423Z" fill="#97CCE3"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M369 340.423C368.746 441.025 287.114 522.499 186.453 522.499C287.116 522.499 368.749 603.977 369 704.581L369 705.512C368.991 709.032 368.883 712.529 368.677 715.999C262.066 715.826 175.674 629.434 175.5 522.822C179.124 522.608 182.776 522.499 186.453 522.499C182.776 522.499 179.124 522.391 175.5 522.176C175.675 415.565 262.066 329.174 368.677 329C368.882 332.469 368.991 335.963 369 339.481L369 340.423Z" fill="#94D2BD"/>
+</svg>
diff --git a/public/images/background-images/publishYourRepo-top.svg b/public/images/background-images/publishYourRepo-top.svg
new file mode 100644
index 0000000..d01031f
--- /dev/null
+++ b/public/images/background-images/publishYourRepo-top.svg
@@ -0,0 +1,3 @@
+<svg width="205" height="173" viewBox="0 0 205 173" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M205 -32H0L205 173V-32Z" fill="#94D2BD"/>
+</svg>
diff --git a/public/images/background-images/tellTheWorld.svg b/public/images/background-images/tellTheWorld.svg
new file mode 100644
index 0000000..eab88a6
--- /dev/null
+++ b/public/images/background-images/tellTheWorld.svg
@@ -0,0 +1,10 @@
+<svg width="479" height="638" viewBox="0 0 479 638" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M197.691 682.863C197.691 639.941 162.895 605.145 119.973 605.145C77.0502 605.145 42.2545 639.941 42.2545 682.863H0C0 616.604 53.7136 562.891 119.973 562.891C186.232 562.891 239.945 616.604 239.945 682.863H197.691Z" fill="#97CCE3"/>
+<path d="M0 0H239.945V202.973C239.945 269.232 186.232 322.945 119.973 322.945C53.7136 322.945 0 269.232 0 202.973V0Z" fill="#0A9396"/>
+<path opacity="0.17" d="M378.027 119.973C444.287 119.973 498 66.2591 498 0H258.055C258.055 66.2591 311.768 119.973 378.027 119.973Z" fill="#BB3E04"/>
+<path d="M378.027 119.973C444.287 119.973 498 173.686 498 239.945H258.055C258.055 173.686 311.768 119.973 378.027 119.973Z" fill="#015F73"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M258.055 246.97C258.181 309.371 308.806 359.918 371.236 359.918C308.805 359.918 258.179 410.467 258.055 472.87L258.055 473.33C258.059 475.532 258.126 477.72 258.255 479.89C324.355 479.783 377.919 426.219 378.027 360.118C375.781 359.986 373.516 359.918 371.236 359.918C373.516 359.918 375.781 359.851 378.027 359.718C377.919 293.617 324.355 240.053 258.255 239.945C258.127 242.115 258.059 244.301 258.055 246.503L258.055 246.97Z" fill="#9A2226"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M498 247.033C497.84 309.405 447.228 359.918 384.818 359.918C447.229 359.918 497.841 410.432 498 472.806L498 473.394C497.994 475.575 497.927 477.741 497.8 479.89C431.7 479.783 378.136 426.219 378.027 360.118C380.274 359.986 382.538 359.918 384.818 359.918C382.538 359.918 380.274 359.851 378.027 359.718C378.135 293.617 431.699 240.053 497.8 239.945C497.927 242.094 497.994 244.26 498 246.439L498 247.033Z" fill="#E9D8A6"/>
+<path d="M0 442.918C0 509.177 53.7136 562.891 119.973 562.891C186.232 562.891 239.945 509.177 239.945 442.918C239.945 376.659 186.232 322.945 119.973 322.945H0V442.918Z" fill="#EE9B00"/>
+<path d="M258.055 479.89H498L258.055 719.836V479.89Z" fill="#94D2BD"/>
+</svg>
diff --git a/src/assets/adopt/auditforsecrets.png b/src/assets/adopt/auditforsecrets.png
new file mode 100644
index 0000000..a593219
Binary files /dev/null and b/src/assets/adopt/auditforsecrets.png differ
diff --git a/src/assets/adopt/publishyourrepo.png b/src/assets/adopt/publishyourrepo.png
new file mode 100644
index 0000000..c737aca
Binary files /dev/null and b/src/assets/adopt/publishyourrepo.png differ
diff --git a/src/pages/howto.astro b/src/pages/howto.astro
index b98e5f9..31768a7 100644
--- a/src/pages/howto.astro
+++ b/src/pages/howto.astro
@@ -1,7 +1,11 @@
 ---
 import Layout from '../layouts/Layout.astro';
 import Section from '../components/Section.astro';
+import { Image } from 'astro:assets';
 
+import auditForSecretsImage from '../assets/adopt/auditforsecrets.png';
+import publishYourRepoImage from '../assets/adopt/publishyourrepo.png';
+import tellTheWorld from '../assets/adopt/telltheworld.png';
 ---
 
 <Layout title="How to Adopt Fair Source">
@@ -74,8 +78,11 @@ import Section from '../components/Section.astro';
         </div>
       </div>
     </Section>
-    <Section sectionStyles="px-[1.5rem] lg:px-[3.5rem]">
-      <div class="w-12/12 xl:w-8/12 py-[3rem] xl:pt-[11rem] xl:pb-[9rem]">
+    <Section
+      sectionStyles="px-[1.5rem] lg:px-[3.5rem]"
+      backgroundStyling="bg-[url('/images/background-images/choosingALicense-top.svg')] bg-contain bg-no-repeat bg-top w-full bottom-0 top-0 left-0 right-0 min-h-[20rem] z-0"
+      backgroundBottomStyling="bg-[url('/images/background-images/choosingALicense-bottom.svg')] bg-contain bg-no-repeat bg-bottom w-full bottom-0 left-0 right-0 min-h-[5rem] z-0 lg:min-h-[5.5rem] xl:min-h-[8rem]">
+      <div class="mt-[4rem] mb-[3rem] w-12/12 z-10 xl:w-8/12 py-[3rem] md:mt-[7rem] xl:my-0 xl:pt-[11rem] xl:pb-[9rem]">
         <span class="tag text-ltOrange">2. Choosing a License</span>
         <h2>Licensing is the heart of Fair Source</h2>
         <p class="mb-[1rem]">
@@ -89,8 +96,13 @@ import Section from '../components/Section.astro';
         <p>Read more about <a href="/licenses" class="underline">all Fair Source licenses and approaches</a>.</p>
       </div>
     </Section>
-    <Section sectionStyles="lg:px-[3rem]">
-      <div class="w-12/12 xl:w-7/12 xl:pt-[12.19rem] xl:pb-[12.56rem]">
+    <Section
+      sectionStyles="py-[1.5rem] pl-[1.5rem] !justify-end xl:p-0 xl:pl-[3rem] xl:items-end"
+      backgroundStyling="bg-[url('/images/background-images/auditForSecrets.svg')] bg-contain bg-top bg-no-repeat w-full top-[1.5rem] right-auto left-[1.5rem] min-h-[20rem] bottom-[45%] xl:bg-right xl:top-[2.875rem] xl:right-[3.125rem] xl:left-auto xl:bottom-[1.67rem] xl:w-1/2">
+      <div class="relative mb-[2rem] h-full min-h-[20rem] xl:mb-0 xl:min-h-[20rem] xl:w-1/2 flex justify-end items-end xl:order-12">
+        <Image src={auditForSecretsImage} alt="Audit For Secrets" densities={[1.5, 2]} class="relative max-h-[30rem] w-auto xl:max-h-[35rem]" />
+      </div>
+      <div class="relative h-1/2 w-12/12 xl:h-full xl:w-1/2 xl:pt-[12.19rem] xl:pb-[12.56rem]">
         <span class="tag text-rust">3. Audit for Secrets</span>
         <h2>
           Before you publish your code, make sure you don’t have any secrets in your 
@@ -98,17 +110,24 @@ import Section from '../components/Section.astro';
         </h2>
         <p>Tools such <a href="" class="emphasized">TruffleHog</a> can help with this.</p>
       </div>
-      <div class="w-12/12 xl:w-5/12"></div>
     </Section>
-    <Section sectionStyles="px-[1.5rem] lg:px-[3.5rem]">
-      <div class="w-12/12 xl:w-5/12"></div>
+    <Section
+      sectionStyles="px-[1.5rem] items-stretch xl:pr-[3.5rem] xl:pl-0"
+      backgroundStyling="bg-[url('/images/background-images/publishYourRepo-top.svg')] bg-contain bg-no-repeat bg-right w-full top-0 right-0 xl:right-[4.75rem] min-h-[13rem] z-0"
+      backgroundBottomStyling="bg-[url('/images/background-images/publishYourRepo-bottom.svg')] bg-contain bg-no-repeat bg-center w-1/2 bottom-[30%] left-0 h-full z-0 xl:min-h-[20rem] xl:bg-left xl:bottom-0">
+      <div class="flex items-center mb-[2rem] w-12/12 z-10 xl:w-5/12">
+        <Image src={publishYourRepoImage} alt="Publish Your Repo" densities={[1.5, 2]} class="relative xl:min-w-[30rem]" />
+      </div>
       <div class="w-12/12 xl:w-7/12 xl:py-[13.81rem]">
         <span class="tag text-teal">4. Publish Your Repo</span>
         <h2>This is the fun part. Click the button to make it public and celebrate the moment.</h2>
       </div>
     </Section>
-    <Section sectionStyles="px-[1.5rem] lg:px-[3.5rem]">
-      <div class="w-12/12 xl:w-7/12 xl:pt-[11.62rem] xl:pb-[13.75rem]">
+    <Section
+      sectionStyles="p-[1.5rem] items-stretch xl:px-[3.5rem]"
+      backgroundStyling="bg-[url('/images/background-images/tellTheWorld.svg')] bg-contain bg-no-repeat bg-right w-full top-0 bottom-[60%] right-0 md:bottom-[40%] xl:bottom-0 xl:w-5/15 z-0">
+      <div class="relative flex items-center mb-[2rem] min-h-[20rem] w-full z-10 xl:w-5/12 xl:order-12"></div>
+      <div class="w-12/12 xl:w-7/12 xl:pr-[1rem] xl:pt-[11.62rem] xl:pb-[13.75rem] z-10">
         <span class="tag text-rust">5. Tell the World</span>
         <h2>Let’s spread the word together!</h2>
         <p>Use the fair-source repo topic on
@@ -117,10 +136,12 @@ import Section from '../components/Section.astro';
           link to your blog from our homepage. Welcome aboard!
         </p>
       </div>
-      <div class="w-12/12 xl:w-7/12"></div>
     </Section>
-    <Section sectionStyles="px-[1.5rem] lg:px-[3.5rem]">
-      <div class="w-12/12 xl:w-1/2 xl:py-[13.19rem]">
+    <Section
+      sectionStyles="!bg-taupe px-[1.5rem] min-h-[20rem] lg:px-[3.5rem]"
+      backgroundStyling="bg-[url('/images/background-images/moreHelp-top.svg')] bg-contain bg-no-repeat bg-left h-full top-0 bottom-0 left-0 w-1/2 z-0"
+      backgroundBottomStyling="bg-[url('/images/background-images/moreHelp-bottom.svg')] bg-contain bg-no-repeat bg-right bottom-0 right-0 h-full w-1/2 z-0">
+      <div class="w-12/12 md:w-1/2 xl:py-[13.19rem]">
         <h2 class="text-center">Want some more help?</h2>
         <p class="text-center">Reach out to us at <a href="" target="_BLANK" class="emphasized">Github</a> or <a href="" target="_BLANK" class="emphasized">Twitter</a> if you’ve got more questions. We’re happy to help!</p>
       </div>