diff --git a/components/Container/Container.js b/components/Container/Container.js
index ce6e5b7ab..c4bc9afd3 100644
--- a/components/Container/Container.js
+++ b/components/Container/Container.js
@@ -1,7 +1,6 @@
 import { bool, node, number, oneOf, oneOfType, string } from 'prop-types';
 import classNames from 'classnames';
 import { getDataAttributes } from 'common/utils/prop-utils';
-import styles from './Container.module.css';
 
 Container.propTypes = {
   backgroundImageSource: string,
@@ -42,14 +41,23 @@ function Container({
 
   return (
     <div
-      className={classNames(className, styles.Container, styles[theme], {
-        [styles.fullViewportHeight]: isFullViewportHeight,
-      })}
+      className={classNames(
+        className,
+        'bg-center bg-no-repeat bg-cover flex items-center justify-center min-h-[250px] w-full fill-current',
+        theme === 'secondary' && 'bg-secondary text-white [& svg]:fill-white',
+        theme === 'gray' && 'bg-gray text-secondary',
+        theme === 'white' && 'bg-white text-secondary',
+        {
+          'min-h-screen': isFullViewportHeight,
+        },
+      )}
       id={id}
       style={dynamicBackgroundImage}
       {...customDataAttributes}
     >
-      <div className={styles.content}>{children}</div>
+      <div className="flex flex-col items-center justify-center my-14 mx-auto w-full max-w-[1400px] sm:w-[85%]">
+        {children}
+      </div>
     </div>
   );
 }
diff --git a/components/Container/Container.module.css b/components/Container/Container.module.css
deleted file mode 100644
index 2db0109c3..000000000
--- a/components/Container/Container.module.css
+++ /dev/null
@@ -1,58 +0,0 @@
-.Container {
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: cover;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 250px;
-  width: 100%;
-  fill: currentcolor;
-}
-
-/* need to have a higher order of specificity since HeroBanner fights it */
-.Container.fullViewportHeight {
-  min-height: 100vh !important;
-}
-
-.content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  margin: 3.5rem auto;
-  width: 100%;
-  max-width: 1400px;
-}
-
-@media screen and (--small-viewport) {
-  .content {
-    width: 85%;
-  }
-}
-
-/* Dark Themes */
-.secondary {
-  background-color: var(--secondary);
-  color: var(--white);
-}
-
-.secondary svg {
-  fill: var(--white);
-}
-
-/* Light Themes */
-.gray {
-  background-color: var(--gray);
-  color: var(--secondary);
-}
-
-.white {
-  background-color: var(--white);
-  color: var(--secondary);
-}
-
-.white svg,
-.gray svg {
-  fill: var(--secondary);
-}
diff --git a/components/Container/__tests__/__snapshots__/Container.test.js.snap b/components/Container/__tests__/__snapshots__/Container.test.js.snap
index e848efc02..0c017e965 100644
--- a/components/Container/__tests__/__snapshots__/Container.test.js.snap
+++ b/components/Container/__tests__/__snapshots__/Container.test.js.snap
@@ -2,7 +2,7 @@
 
 exports[`Container should render with many props assigned 1`] = `
 <div
-  className="test-class Container white fullViewportHeight"
+  className="test-class bg-center bg-no-repeat bg-cover flex items-center justify-center min-h-[250px] w-full fill-current bg-white text-secondary min-h-screen"
   style={
     Object {
       "backgroundImage": "linear-gradient(rgba(33, 48, 69, 0.65),rgba(33, 48, 69, 0.65)), url(https://operation-code-assets.s3.us-east-2.amazonaws.com/heroBanner/stock_family-2.jpg)",
@@ -10,7 +10,7 @@ exports[`Container should render with many props assigned 1`] = `
   }
 >
   <div
-    className="content"
+    className="flex flex-col items-center justify-center my-14 mx-auto w-full max-w-[1400px] sm:w-[85%]"
   >
     Test Children
   </div>
diff --git a/components/Content/__tests__/__snapshots__/Content.test.js.snap b/components/Content/__tests__/__snapshots__/Content.test.js.snap
index 5b872145c..54bc83ff2 100644
--- a/components/Content/__tests__/__snapshots__/Content.test.js.snap
+++ b/components/Content/__tests__/__snapshots__/Content.test.js.snap
@@ -2,11 +2,11 @@
 
 exports[`Content should render with many props assigned 1`] = `
 <div
-  className="Container secondary fullViewportHeight"
+  className="bg-center bg-no-repeat bg-cover flex items-center justify-center min-h-[250px] w-full fill-current bg-secondary text-white [& svg]:fill-white min-h-screen"
   id="test-id"
 >
   <div
-    className="content"
+    className="flex flex-col items-center justify-center my-14 mx-auto w-full max-w-[1400px] sm:w-[85%]"
   >
     <div
       className="headingContainer"
@@ -59,10 +59,10 @@ exports[`Content should render with many props assigned 1`] = `
 
 exports[`Content should render with required props 1`] = `
 <div
-  className="Container secondary"
+  className="bg-center bg-no-repeat bg-cover flex items-center justify-center min-h-[250px] w-full fill-current bg-secondary text-white [& svg]:fill-white"
 >
   <div
-    className="content"
+    className="flex flex-col items-center justify-center my-14 mx-auto w-full max-w-[1400px] sm:w-[85%]"
   >
     <div
       className="flex justify-center items-center flex-wrap w-full [&>*]:m-4"
diff --git a/components/HeroBanner/__tests__/__snapshots__/HeroBanner.test.js.snap b/components/HeroBanner/__tests__/__snapshots__/HeroBanner.test.js.snap
index 93663b4ae..c2e3fd86a 100644
--- a/components/HeroBanner/__tests__/__snapshots__/HeroBanner.test.js.snap
+++ b/components/HeroBanner/__tests__/__snapshots__/HeroBanner.test.js.snap
@@ -2,7 +2,7 @@
 
 exports[`HeroBanner should render with many props assigned 1`] = `
 <div
-  className="test pt-20 min-h-[60vh] text-shadow-[0_0_15px_#111111] Container secondary fullViewportHeight"
+  className="test pt-20 min-h-[60vh] text-shadow-[0_0_15px_#111111] bg-center bg-no-repeat bg-cover flex items-center justify-center min-h-[250px] w-full fill-current bg-secondary text-white [& svg]:fill-white min-h-screen"
   style={
     Object {
       "backgroundImage": "linear-gradient(rgba(33, 48, 69, 0.65),rgba(33, 48, 69, 0.65)), url(https://operation-code-assets.s3.us-east-2.amazonaws.com/heroBanner/stock_family-2.jpg)",
@@ -10,7 +10,7 @@ exports[`HeroBanner should render with many props assigned 1`] = `
   }
 >
   <div
-    className="content"
+    className="flex flex-col items-center justify-center my-14 mx-auto w-full max-w-[1400px] sm:w-[85%]"
   >
     <h1
       className="border-b-4 border-b-primary text-center mb-4"
@@ -25,10 +25,10 @@ exports[`HeroBanner should render with many props assigned 1`] = `
 
 exports[`HeroBanner should render with required props 1`] = `
 <div
-  className="pt-20 min-h-[60vh] text-shadow-[0_0_15px_#111111] min-h-[35vh] Container secondary"
+  className="pt-20 min-h-[60vh] text-shadow-[0_0_15px_#111111] min-h-[35vh] bg-center bg-no-repeat bg-cover flex items-center justify-center min-h-[250px] w-full fill-current bg-secondary text-white [& svg]:fill-white"
 >
   <div
-    className="content"
+    className="flex flex-col items-center justify-center my-14 mx-auto w-full max-w-[1400px] sm:w-[85%]"
   >
     <h1
       className=""
diff --git a/components/ReusableSections/JoinSection/__tests__/__snapshots__/JoinSection.test.js.snap b/components/ReusableSections/JoinSection/__tests__/__snapshots__/JoinSection.test.js.snap
index 9a6b40eb9..1db0dcb45 100644
--- a/components/ReusableSections/JoinSection/__tests__/__snapshots__/JoinSection.test.js.snap
+++ b/components/ReusableSections/JoinSection/__tests__/__snapshots__/JoinSection.test.js.snap
@@ -2,11 +2,11 @@
 
 exports[`JoinSection should render 1`] = `
 <div
-  className="Container white"
+  className="bg-center bg-no-repeat bg-cover flex items-center justify-center min-h-[250px] w-full fill-current bg-white text-secondary"
   data-testid="Join Section"
 >
   <div
-    className="content"
+    className="flex flex-col items-center justify-center my-14 mx-auto w-full max-w-[1400px] sm:w-[85%]"
   >
     <div
       className="headingContainer"
diff --git a/tailwind.config.js b/tailwind.config.js
index cf9c5206c..e9825ab1c 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -22,6 +22,8 @@ module.exports = {
         themeGray: '#121212',
         primary: '#3ed6f0',
         secondary: '#252e3e',
+        gray: '#e2e2e2',
+        white: '#f7f7f7',
       },
     },
   },