diff --git a/website/src/components/HomepageFeatures/index.js b/website/src/components/HomepageFeatures/index.js
index 7e3057d1..2b1050b1 100644
--- a/website/src/components/HomepageFeatures/index.js
+++ b/website/src/components/HomepageFeatures/index.js
@@ -102,14 +102,14 @@ const FeatureList = [
   }
 ];
 
-function Feature({Svg, title, description}) {
+function Feature({ Svg, title, description }) {
   return (
     <div className={clsx('col col--4')}>
-      <div className="text--left padding-horiz--md">
-        <h3>
+      <div className={clsx('card', 'text--left', 'padding-horiz--md', styles.featureCard)}>
+        <div className={clsx('flex', 'flex--center', 'margin-bottom--sm','padding-top--md', styles.headline)}>
           <Svg className={styles.featureSvg} role="img" />
-          {title}
-        </h3>
+          <h3 className="margin--none">{title}</h3>
+        </div>
         <p>{description}</p>
       </div>
     </div>
diff --git a/website/src/components/HomepageFeatures/styles.module.css b/website/src/components/HomepageFeatures/styles.module.css
index d5cc3815..febf3346 100644
--- a/website/src/components/HomepageFeatures/styles.module.css
+++ b/website/src/components/HomepageFeatures/styles.module.css
@@ -4,17 +4,24 @@
   padding: 2rem 0;
   width: 100%;
 }
+.featureCard {
+  height: 98%;
+}
 
+.headline {
+  display: flex;
+  align-items: center;
+}
 .featureSvg {
   height: 32px;
   width: 32px;
   margin-right: 1rem;
 }
 
-[data-theme='light'] .featureSvg {
+[data-theme="light"] .featureSvg {
   fill: #000000;
 }
 
-[data-theme='dark'] .featureSvg {
-  fill: #FFFFFF;
-}
\ No newline at end of file
+[data-theme="dark"] .featureSvg {
+  fill: #ffffff;
+}