diff --git a/client/src/components/__snapshots__/scoreStepsList.test.tsx.snap b/client/src/components/__snapshots__/scoreStepsList.test.tsx.snap
new file mode 100644
index 00000000..7c8c915f
--- /dev/null
+++ b/client/src/components/__snapshots__/scoreStepsList.test.tsx.snap
@@ -0,0 +1,123 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`rendering of the component should match the snapshot of the MapIntroduction component 1`] = `
+<DocumentFragment>
+  <div
+    class="j40-process-list-wrapper"
+  >
+    <ul>
+      <li>
+        <section>
+          <h3
+            class="j40-item-list-title"
+          >
+            Gather datasets
+          </h3>
+          <p />
+          <h4
+            class="j40-item-list-subtitle"
+          >
+            Data inputs
+          </h4>
+          The cumulative index score includes the following equally weighted inputs.
+          <ul>
+            <li>
+              Poverty
+            </li>
+            <li>
+              Less than high school education
+            </li>
+            <li>
+              Linguistic isolation
+            </li>
+            <li>
+              Unemployment rate
+            </li>
+            <li>
+              Housing burden
+            </li>
+          </ul>
+          <p />
+          <p />
+          <h4
+            class="j40-item-list-subtitle"
+          >
+            Combining data from different geographic units
+          </h4>
+          Some data is not available at the census block group level and is instead only available for larger units such as census tracts or counties. In these cases, all census block groups will get an even contribution from the larger unit. For example, if a census tract scores 90th percentile on an indicator, then all census block groups within that tract will receive a value of 90th percentile.
+          <p />
+          <p />
+          <h4
+            class="j40-item-list-subtitle"
+          >
+            Normalizing data
+          </h4>
+          The range of the data that makes up the score varies, so the data must be normalized so that each data indicator can be more equally weighted. Min-max normalization is utilized, where the minimum value in the range of values for each dataset is set at 0, the maximum value is set at 1, and every other value is transformed into a decimal between 0 and 1. For example, if the minimum value for unemployment was 10 and the maximum value was 30, a value of 20 would be transformed to 0.5 since it is halfway between 10 and 30.
+          <p />
+        </section>
+      </li>
+      <li>
+        <section>
+          <h3>
+            Calculate cumulative index score
+          </h3>
+          <p>
+            To combine all variables into a single cumulative index score, we average the normalized values across indicators.
+          </p>
+          <p />
+          <div
+            class="grid-container"
+            data-testid="gridContainer"
+          >
+            <div
+              class="grid-row j40-math-division-container"
+              data-testid="grid"
+            >
+              <div
+                class="grid-col j40-math-eq-left-side grid-col-fill"
+                data-testid="grid"
+              >
+                <div
+                  class="j40-math-eq-numerator"
+                >
+                  Dataset 1 + Dataset 2 + ... + Dataset N
+                </div>
+                <div
+                  class="j40-math-eq-denominator"
+                >
+                  # of datasets
+                </div>
+              </div>
+              <div
+                class="grid-col j40-math-eq-middle grid-col-auto"
+                data-testid="grid"
+              >
+                =
+              </div>
+              <div
+                class="grid-col j40-math-eq-right-side grid-col-fill"
+                data-testid="grid"
+              >
+                Cumulative index score
+              </div>
+            </div>
+          </div>
+          <p />
+        </section>
+      </li>
+      <li>
+        <section>
+          <h3
+            class="j40-item-list-title"
+          >
+            Assign priority
+          </h3>
+          <p>
+            Census block groups are sorted by their cumulative index score from highest to lowest. Census block groups that are in the top 25 percentile (i.e. have a cumulative index score in the 75 - 100th percentile) will be considered the prioritized communities.
+          </p>
+        </section>
+      </li>
+    </ul>
+  </div>
+</DocumentFragment>
+`;
diff --git a/client/src/components/scoreStepsList.test.tsx b/client/src/components/scoreStepsList.test.tsx
new file mode 100644
index 00000000..07db0b70
--- /dev/null
+++ b/client/src/components/scoreStepsList.test.tsx
@@ -0,0 +1,16 @@
+import * as React from 'react';
+import {render} from '@testing-library/react';
+import ScoreStepsList from './scoreStepsList';
+import {LocalizedComponent} from '../test/testHelpers';
+
+describe('rendering of the component', () => {
+  const {asFragment} = render(
+      <LocalizedComponent>
+        <ScoreStepsList/>
+      </LocalizedComponent>,
+  );
+
+  it('should match the snapshot of the MapIntroduction component', () => {
+    expect(asFragment()).toMatchSnapshot();
+  });
+});
diff --git a/client/src/components/scoreStepsList.tsx b/client/src/components/scoreStepsList.tsx
new file mode 100644
index 00000000..ed442978
--- /dev/null
+++ b/client/src/components/scoreStepsList.tsx
@@ -0,0 +1,88 @@
+import React from 'react';
+import {GridContainer, Grid} from '@trussworks/react-uswds';
+
+const ScoreStepsList = () => {
+  return (<>
+    <div className={'j40-process-list-wrapper'}>
+      <ul>
+        <li>
+          <section>
+            <h3 className={'j40-item-list-title'}>Gather datasets</h3>
+            <p><h4 className={'j40-item-list-subtitle'}>Data inputs</h4>
+              The cumulative index score includes the following equally
+              weighted inputs.
+              <ul>
+                <li>Poverty</li>
+                <li>Less than high school education</li>
+                <li>Linguistic isolation</li>
+                <li>Unemployment rate</li>
+                <li>Housing burden</li>
+              </ul>
+            </p>
+            <p>
+              <h4 className={'j40-item-list-subtitle'}>
+                Combining data from different geographic units</h4>
+                Some data is not available at the census block group level and is
+                instead only available for larger units such as census tracts or
+                counties. In these cases, all census block groups will get an even
+                contribution from the larger unit. For example, if a census tract
+                scores 90th percentile on an indicator, then all census block
+                groups within that tract will receive a value of 90th percentile.
+            </p>
+            <p><h4 className={'j40-item-list-subtitle'}>Normalizing data</h4>
+                The range of the data that makes up the score varies, so the data
+                must be normalized so that each data indicator can be more equally
+                weighted. Min-max normalization is utilized, where the minimum
+                value in the range of values for each dataset is set at 0, the
+                maximum value is set at 1, and every other value is transformed
+                into a decimal between 0 and 1. For example, if the minimum value
+                for unemployment was 10 and the maximum value was 30, a value of
+                20 would be transformed to 0.5 since it is halfway between 10 and
+                30.
+            </p>
+          </section>
+        </li>
+
+        <li>
+          <section>
+            <h3>Calculate cumulative index score</h3>
+            <p>To combine all variables into a single cumulative index score,
+                we average the normalized values across indicators.
+            </p>
+            <p>
+              <GridContainer className={''}>
+                <Grid row className={'j40-math-division-container'}>
+                  <Grid col className={'j40-math-eq-left-side grid-col-fill'}>
+                    <div className={'j40-math-eq-numerator'}>
+                Dataset 1 + Dataset 2 + ... + Dataset N
+                    </div>
+                    <div className={'j40-math-eq-denominator'}>
+                # of datasets
+                    </div>
+                  </Grid>
+                  <Grid col className={'j40-math-eq-middle grid-col-auto'}>=</Grid>
+                  <Grid col className={'j40-math-eq-right-side grid-col-fill'}>Cumulative index score</Grid>
+                </Grid>
+              </GridContainer>
+            </p>
+          </section>
+        </li>
+
+        <li>
+          <section>
+            <h3 className={'j40-item-list-title'}>Assign priority</h3>
+            <p>
+                Census block groups are sorted by their cumulative index score
+                from highest to lowest. Census block groups that are in the top 25
+                percentile (i.e. have a cumulative index score in the 75 - 100th
+                percentile) will be considered the prioritized communities.
+            </p>
+          </section>
+        </li>
+      </ul>
+    </div>
+  </>
+  );
+};
+
+export default ScoreStepsList;
diff --git a/client/src/pages/methodology.tsx b/client/src/pages/methodology.tsx
index 772c2a9f..6db5d380 100644
--- a/client/src/pages/methodology.tsx
+++ b/client/src/pages/methodology.tsx
@@ -5,6 +5,7 @@ import AlertWrapper from '../components/AlertWrapper';
 import DatasetContainer from '../components/DatasetContainer';
 import J40MainGridContainer from '../components/J40MainGridContainer';
 import Layout from '../components/layout';
+import ScoreStepsList from '../components/scoreStepsList';
 
 interface MethodPageProps {
   location: Location;
@@ -61,6 +62,11 @@ const IndexPage = ({location}: MethodPageProps) => {
         </Grid>
       </J40MainGridContainer>
 
+      <J40MainGridContainer>
+        <Grid row><Grid col>
+          <ScoreStepsList/>
+        </Grid></Grid>
+      </J40MainGridContainer>
     </Layout>
   );
 };
diff --git a/client/src/styles/global.scss b/client/src/styles/global.scss
index ce63d3c5..b16209ef 100644
--- a/client/src/styles/global.scss
+++ b/client/src/styles/global.scss
@@ -68,6 +68,7 @@ $primary-color: #112f4e;
 
 @include at-media("mobile-lg") {
   .j40-grid-container {
+    line-height: 1.5rem;
     padding-right: 0;
   }
 }
@@ -102,9 +103,9 @@ $primary-color: #112f4e;
     // this actual site logo
     .sitelogo {
       float: left; // allows vertical centering on logo and text
-      margin-right: 0.5em; // space between logo and text
-      width: 4em;
-      padding: 0.5em; // this will change the size of the logo too
+      margin-right: 0.5rem; // space between logo and text
+      width: 4rem;
+      padding: 0.5rem; // this will change the size of the logo too
     }
 
     // nav menu item font
@@ -191,6 +192,7 @@ $primary-color: #112f4e;
   h1 {
     font-size: 2.7rem;
   }
+
   h2 {
     font-size: 1.46rem;
   }
@@ -217,7 +219,7 @@ $primary-color: #112f4e;
   h3,
   h4 {
     font-family: Source Sans Pro Web, Helvetica Neue, Helvetica, Roboto, Arial,
-      sans-serif;
+    sans-serif;
   }
 
   p,
@@ -329,3 +331,89 @@ $primary-color: #112f4e;
     }
   }
 }
+
+
+/* the > is for child only syntax in css. This is required so that lists that are nested under the
+      list are not affected (e.g. <ul><li><p><ul><li>not styled</li></ul></p></li><ul>*/
+.j40-process-list-wrapper > {
+  $j40-steps-list-color: #002D3F;
+  ul {
+    margin-top: 3rem;
+    margin-bottom: 1rem;
+    padding-inline-start: 0;
+
+    > li {
+      list-style-type: none;
+      position: relative;
+      margin-left: 2.5rem;
+      /* do the lines */
+      border-left: .2rem solid $j40-steps-list-color;
+      padding-left: 1.88rem;
+      /* removes gap between line and circle */
+      margin-top: -1rem;
+      padding-bottom: 2rem;
+    }
+
+    > li:before {
+      content: " ";
+      border: 1rem solid $j40-steps-list-color;
+      border-radius: 100rem;
+      height: 0; /* it's all controlled by the border */
+      width: 0;
+      margin-top: -0.5rem;
+      margin-left: -3rem;
+      position: absolute;
+    }
+
+    > li:last-child {
+      /* no line on last item */
+      border-left: .2rem solid transparent;
+      margin-top: -1.9rem;
+    }
+  }
+}
+
+/* The math equation on the methodology page.. which is a royal pain */
+.j40-math-division-container {
+  > .j40-math-eq-left-side {
+    text-align: right;
+    justify-content: center;
+    align-items: center;
+    padding: 0.5rem;
+
+    > .j40-math-eq-numerator {
+      border-bottom: solid 3px black;
+      text-align: center;
+      width: 90%;
+    }
+
+    > .j40-math-eq-denominator {
+      text-align: center;
+      width: 90%;
+    }
+  }
+
+  > .j40-math-eq-middle {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    padding: 0.25rem;
+  }
+
+  > .j40-math-eq-right-side {
+    display: inline-flex;
+    align-items: center;
+    padding: 0.25rem;
+  }
+}
+
+/* these are currently used in the list, but it seems like they should be globally consistent with the rest of the site */
+.j40-item-list-title {
+  margin-block-end: auto;
+}
+
+.j40-item-list-subtitle {
+  margin-block-start: auto;
+  margin-block-end: auto;
+  font-style: italic;
+}