diff --git a/website/assets/images/pricing-page-card-custom-543x233@2x.png b/website/assets/images/pricing-page-card-custom-543x233@2x.png
new file mode 100644
index 0000000000..65bf4d7d72
Binary files /dev/null and b/website/assets/images/pricing-page-card-custom-543x233@2x.png differ
diff --git a/website/assets/images/pricing-page-card-free-543x233@2x.png b/website/assets/images/pricing-page-card-free-543x233@2x.png
new file mode 100644
index 0000000000..859bd97f46
Binary files /dev/null and b/website/assets/images/pricing-page-card-free-543x233@2x.png differ
diff --git a/website/assets/images/pricing-page-card-premium-543x233@2x.png b/website/assets/images/pricing-page-card-premium-543x233@2x.png
new file mode 100644
index 0000000000..c12cd6de96
Binary files /dev/null and b/website/assets/images/pricing-page-card-premium-543x233@2x.png differ
diff --git a/website/assets/styles/pages/pricing.less b/website/assets/styles/pages/pricing.less
index 8c25326dcd..19b8d988f2 100644
--- a/website/assets/styles/pages/pricing.less
+++ b/website/assets/styles/pages/pricing.less
@@ -76,33 +76,64 @@
       width: 220px;
     }
   }
-
-  [purpose='free-tier-card'] {
-    text-align: left;
-    padding: 40px;
-    border-radius: 15px;
-    width: 100%;
-    box-shadow: none;
-    background: #fff;
+  [purpose='pricing-tiers'] {
+    margin-bottom: 24px;
+  }
+  [purpose='pricing-card-body'] {
+    padding: 24px 32px;
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
   }
   [purpose='pricing-card'] {
     width: 33%;
+    [purpose='pricing-tier-image'] {
+      height: 149px;
+      width: 100%;
+      border-radius: 12px 12px 0px 0px;
+      background-size: auto 100%;
+      background-position: bottom;
+      background-repeat: no-repeat;
+    }
+
+  }
+  [purpose='free-tier-card'] {
+    text-align: left;
+    padding: 0px;
+    border-radius: 16px;
+    border: 1px solid #E2E4EA;
+    width: 100%;
+    box-shadow: none;
+    background: #fff;
+
+    [purpose='pricing-tier-image'] {
+      background-image: url('/images/pricing-page-card-free-543x233@2x.png');
+    }
   }
   [purpose='premium-tier-card'] {
-    padding: 40px;
-    border-radius: 15px;
+    padding: 0px;
+    border-radius: 16px;
+    border: 1px solid #E2E4EA;
     text-align: left;
     box-shadow: none;
     margin-left: 16px;
     background: #fff;
+    [purpose='pricing-tier-image'] {
+      background-image: url('/images/pricing-page-card-premium-543x233@2x.png');
+    }
   }
   [purpose='custom-tier-card'] {
-    padding: 40px;
-    border-radius: 15px;
+    padding: 0px;
+    border-radius: 16px;
+    border: 1px solid #E2E4EA;
     text-align: left;
     box-shadow: none;
     margin-left: 16px;
     background: #fff;
+    [purpose='pricing-tier-image'] {
+      background-image: url('/images/pricing-page-card-custom-543x233@2x.png');
+    }
     [purpose='pricing-tier-title'] {
       h2 {
         margin-bottom: 17px;
@@ -535,6 +566,16 @@
       padding-left: 0px;
       padding-right: 0px;
     }
+    [purpose='pricing-card'] {
+      width: 33%;
+      [purpose='pricing-tier-image'] {
+        height: 149px;
+        width: 100%;
+        border-radius: 12px 12px 0px 0px;
+        background-size: 100% auto;
+        background-position: center 0px;
+      }
+    }
   }
   @media (max-width: 991px) {
     // >992 width:
@@ -544,21 +585,33 @@
       padding-left: 24px;
       padding-right: 24px;
     }
-    [purpose='free-tier-card'] {
-      margin-bottom: 12px;
-      padding: 40px;
-    }
     [purpose='pricing-card'] {
       width: 100%;
+      [purpose='pricing-tier-image'] {
+        height: 240px;
+        min-height: 100%;
+        max-width: 337px;
+        width: 100%;
+        border-radius: 12px 0px 0px 12px;
+        background-position: center;
+        background-repeat: no-repeat;
+      }
+    }
+    [purpose='pricing-card-body'] {
+      padding: 24px 64px;
+    }
+    [purpose='free-tier-card'] {
+      margin-bottom: 16px;
     }
     [purpose='premium-tier-card'] {
       margin-left: 0px;
-      margin-bottom: 12px;
-      padding: 40px;
+      margin-bottom: 16px;
+      [purpose='card-button'] {
+          width: 100%;
+      }
     }
     [purpose='custom-tier-card'] {
       margin-left: 0px;
-      padding: 40px;
     }
   }
 
@@ -585,6 +638,21 @@
         width: 100%;
       }
     }
+    [purpose='pricing-card'] {
+      width: 100%;
+      [purpose='pricing-tier-image'] {
+        height: auto;
+        min-height: 100%;
+        width: 100%;
+        max-width: 257px;
+        border-radius: 12px 0px 0px 12px;
+        background-position: center;
+        background-repeat: no-repeat;
+      }
+    }
+    [purpose='pricing-card-body'] {
+      padding: 24px 32px;
+    }
     [purpose='features-table'] {
       .truncated {
         max-height: 1480px;
@@ -663,16 +731,25 @@
       padding-left: 24px;
       padding-right: 24px;
     }
+    [purpose='pricing-card'] {
+      width: 100%;
+      [purpose='pricing-tier-image'] {
+        height: 233px;
+        min-height: 100%;
+        width: 100%;
+        max-width: unset;
+        border-radius: 12px 12px 0px 0px;
+        background-position: center;
+        background-repeat: no-repeat;
+      }
+    }
     [purpose='free-tier-card'] {
-      padding: 24px;
       justify-content: center;
     }
     [purpose='premium-tier-card'] {
-      padding: 24px;
       justify-content: center;
     }
     [purpose='custom-tier-card'] {
-      padding: 24px;
       justify-content: center;
     }
     [purpose='pricing-categories-table'] {
diff --git a/website/views/pages/pricing.ejs b/website/views/pages/pricing.ejs
index 9594998a9b..0427d2899b 100644
--- a/website/views/pages/pricing.ejs
+++ b/website/views/pages/pricing.ejs
@@ -9,57 +9,70 @@
       <div purpose="pricing-tiers" class="d-flex flex-column flex-lg-row justify-content-center">
         <%// Fleet Free tier card %>
         <div purpose="pricing-card">
-        <div purpose="free-tier-card" class="card d-flex flex-column h-100  justify-content-between">
-          <div purpose="pricing-tier-title">
-            <div class="d-flex flex-row justify-content-start">
-              <div class="d-flex flex-column justify-content-between">
-                <h2>Free</h2>
-                <h3>Unlimited hosts</h3>
-                <div purpose="tier-price" class="d-flex flex-row align-items-center">
-                  <h1><span purpose="price-dollar-sign">$</span>0</h1><strong>/ host <br purpose="premium-price-linebreak">/ month</strong>
-                </div>
-              </div>
+          <div purpose="free-tier-card" class="card d-flex flex-lg-column flex-sm-row flex-column h-100">
+            <div purpose="pricing-tier-image">
             </div>
-          </div>
-          <div purpose="button-container" class="d-flex flex-row align-items-center">
-            <animated-arrow-button href="/docs">
-              Read the docs
-            </animated-arrow-button>
-          </div>
-        </div>
-        </div>
-        <%// Fleet Premium tier card %>
-        <div purpose="pricing-card" class="d-flex flex-column justify-content-center">
-          <div purpose="premium-tier-card" class="card d-flex h-100 flex-column justify-content-between">
-            <div purpose="pricing-tier-title">
-              <div class="d-flex flex-column justify-content-between">
-                <div class="d-flex flex-column justify-content-start">
-                  <h2>Premium</h2>
-                  <h3>Unlimited baselines</h3>
-                  <div purpose="tier-price" class="d-flex flex-row align-items-center justify-content-start">
-                    <h1><span purpose="price-dollar-sign">$</span>7.00</h1><strong>/ host <br purpose="premium-price-linebreak">/ month</strong>
+            <div purpose="pricing-card-body">
+              <div purpose="pricing-tier-title">
+                <div class="d-flex flex-row justify-content-start">
+                  <div class="d-flex flex-column justify-content-between">
+                    <h2>Free</h2>
+                    <h3>Unlimited hosts</h3>
+                    <div purpose="tier-price" class="d-flex flex-row align-items-center">
+                      <h1><span purpose="price-dollar-sign">$</span>0</h1><strong>/ host <br purpose="premium-price-linebreak">/ month</strong>
+                    </div>
                   </div>
                 </div>
               </div>
+              <div purpose="button-container" class="d-flex flex-row align-items-center">
+                <animated-arrow-button href="/docs">
+                  Read the docs
+                </animated-arrow-button>
+              </div>
             </div>
-            <div>
+          </div>
+        </div>
+        <%// Fleet Premium tier card %>
+        <div purpose="pricing-card" class="d-flex flex-column justify-content-center">
+          <div purpose="premium-tier-card" class="card d-flex h-100 flex-lg-column flex-sm-row flex-column">
+            <div purpose="pricing-tier-image">
+            </div>
+            <div purpose="pricing-card-body">
+              <div purpose="pricing-tier-title">
+                <div class="d-flex flex-column justify-content-between">
+                  <div class="d-flex flex-column justify-content-start">
+                    <h2>Premium</h2>
+                    <h3>Unlimited baselines</h3>
+                    <div purpose="tier-price" class="d-flex flex-row align-items-center justify-content-start">
+                      <h1><span purpose="price-dollar-sign">$</span>7.00</h1><strong>/ host <br purpose="premium-price-linebreak">/ month</strong>
+                    </div>
+                  </div>
+                </div>
+              </div>
               <a purpose="card-button" class="btn btn-block btn-lg btn-primary mx-auto mb-0" href="/register">Get started</a>
+<!--               <div>
+              </div> -->
             </div>
           </div>
         </div>
         <%//  Custom tier card %>
         <div purpose="pricing-card" class="d-flex flex-column justify-content-center">
-          <div purpose="custom-tier-card" class="card d-flex h-100 flex-column justify-content-between">
-            <div purpose="pricing-tier-title">
-              <div class="d-flex flex-column justify-content-between">
-                <div class="d-flex flex-column justify-content-center">
-                  <h2>Custom</h2>
-                  <h3>For teams who can move quickly with extremely large deployments.</h3>
+          <div purpose="custom-tier-card" class="card d-flex h-100 flex-lg-column flex-sm-row flex-column">
+            <div purpose="pricing-tier-image">
+
+            </div>
+            <div purpose="pricing-card-body">
+              <div purpose="pricing-tier-title">
+                <div class="d-flex flex-column justify-content-between">
+                  <div class="d-flex flex-column justify-content-center">
+                    <h2>Custom</h2>
+                    <h3>For teams who can move quickly with extremely large deployments.</h3>
+                  </div>
                 </div>
               </div>
-            </div>
-            <div>
-              <a purpose="card-button" class="btn btn-block btn-lg btn-primary mx-auto mb-0" href="/contact">Talk to an engineer</a>
+              <div>
+                <a purpose="card-button" class="btn btn-block btn-lg btn-primary mx-auto mb-0" href="/contact">Talk to an engineer</a>
+              </div>
             </div>
           </div>
         </div>