diff --git a/src/components/GuideTile/GuideTile.js b/src/components/GuideTile/GuideTile.js
index 41eaa66f7..4a5ba94e8 100644
--- a/src/components/GuideTile/GuideTile.js
+++ b/src/components/GuideTile/GuideTile.js
@@ -6,8 +6,6 @@ import FeatherIcon from '../FeatherIcon';
 import NewRelicIcon from '../NewRelicIcon';
 import Button from './Button';
 
-import styles from './GuideTile.module.scss';
-
 const GuideTile = ({
   as: Component = 'div',
   icon,
@@ -17,6 +15,7 @@ const GuideTile = ({
   className,
   children,
   alignment,
+  featured,
   ...props
 }) => (
   <Surface
@@ -37,55 +36,110 @@ const GuideTile = ({
         border-color: var(--border-hover-color);
       }
 
-      ${
-        icon &&
-        `
+      ${icon &&
+      `
         h2 {
           margin-top: 1rem;
         }
-      `
-      }
+      `}
 
-      ${
-        alignment === GuideTile.ALIGNMENT.LEFT &&
-        `
-        .title, .desicription {
-          text-align: left;
-        }
-        .description {
-          padding: 0;
-        }
+      ${featured &&
       `
-      }
+          border-color: var(--color-white);
 
-      ${
-        alignment === GuideTile.ALIGNMENT.LEFT &&
-        `
-        .title, .desicription {
-          text-align: center;
-        }
-        .description {
-          padding: 0 0.5rem;
-        }
-      `
-      }
+          .dark-mode & {
+            border-color: var(--color-dark-100);
+            background-color: var(--color-dark-100);
+          }
+
+          &:hover {
+            transform: unset;
+            border-color: inherit;
+          }
+        `}
     `}
   >
     {icon && (
-      <div className={styles.iconContainer}>
+      <div
+        css={css`
+          position: absolute;
+          top: -2.75rem;
+          left: 50%;
+          margin-left: -2.75rem;
+          width: 5.5rem;
+          height: 5.5rem;
+          border: 4px solid var(--color-white);
+          background-color: var(--color-neutrals-200);
+          border-radius: 50%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+
+          .dark-mode & {
+            background-color: var(--color-dark-050);
+            ${featured && `border-color: var(--color-dark-100);`}
+          }
+        `}
+      >
         <NewRelicIcon name={icon} size="2.5rem" />
       </div>
     )}
-    <div className={styles.timeEstimate}>
+    <div
+      css={css`
+        font-size: 0.75rem;
+        display: flex;
+        align-items: center;
+        text-align: right;
+        color: var(--accent-text-color);
+        padding: 0.3rem 0 0.2rem 1.2rem;
+        justify-self: end;
+      `}
+    >
       {duration ? (
-        <FeatherIcon className={styles.timeIcon} name="clock" />
+        <FeatherIcon
+          css={css`
+            margin-right: 0.25rem;
+          `}
+          name="clock"
+        />
       ) : (
         <span>&nbsp;</span>
       )}
       {duration}
     </div>
-    <h3 className={styles.title}>{title}</h3>
-    <p className={styles.description}>{description}</p>
+    <h3
+      css={css`
+        ${alignment === GuideTile.ALIGNMENT.LEFT && `text-align: left;`}
+        ${alignment === GuideTile.ALIGNMENT.CENTER && `text-align: center;`}
+      `}
+    >
+      {title}
+    </h3>
+    <p
+      css={css`
+        font-size: 0.9rem;
+        margin-bottom: 1.5rem;
+        color: var(--secondary-text-color);
+        flex: 1;
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+
+        ${alignment === GuideTile.ALIGNMENT.LEFT &&
+        `
+          text-align: left;
+          padding: 0;
+        `}
+        ${alignment === GuideTile.ALIGNMENT.CENTER &&
+        `
+          text-align: center;
+          padding: 0 0.5rem;
+        `}
+      `}
+    >
+      {description}
+    </p>
     {children}
   </Surface>
 );
@@ -106,10 +160,12 @@ GuideTile.propTypes = {
   children: PropTypes.node,
   as: PropTypes.elementType,
   alignment: PropTypes.oneOf(Object.values(GuideTile.ALIGNMENT)),
+  featured: PropTypes.bool,
 };
 
 GuideTile.defaultProps = {
   alignment: GuideTile.ALIGNMENT.CENTER,
+  featured: false,
 };
 
 export default GuideTile;
diff --git a/src/components/GuideTile/GuideTile.module.scss b/src/components/GuideTile/GuideTile.module.scss
deleted file mode 100644
index c87eee2a4..000000000
--- a/src/components/GuideTile/GuideTile.module.scss
+++ /dev/null
@@ -1,81 +0,0 @@
-.tile {
-  // display: grid;
-  // grid-template-rows: auto auto 1fr auto;
-  // box-shadow: var(--boxshadow);
-  // border-radius: 0.25rem;
-  // position: relative;
-  // transition: all 0.15s ease-out;
-
-  // &:hover {
-  //   transform: translateY(-2px);
-  //   border-color: var(--border-hover-color);
-  // }
-}
-
-// .tileWithIcon h2 {
-//   margin-top: 1rem;
-// }
-
-.timeEstimate {
-  font-size: 0.75rem;
-  display: flex;
-  align-items: center;
-  text-align: right;
-  color: var(--accent-text-color);
-  padding: 0.3rem 0 0.2rem 1.2rem;
-  justify-self: end;
-}
-
-.iconContainer {
-  position: absolute;
-  top: -2.75rem;
-  left: 50%;
-  margin-left: -2.75rem;
-  width: 5.5rem;
-  height: 5.5rem;
-  border: 4px solid var(--surface-background-color);
-  background-color: var(--color-neutrals-200);
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  :global(.dark-mode) & {
-    background-color: var(--color-dark-050);
-  }
-}
-
-.description {
-  font-size: 0.9rem;
-  margin-bottom: 1.5rem;
-  color: var(--secondary-text-color);
-  flex: 1;
-
-  &:last-child {
-    margin-bottom: 0;
-  }
-}
-
-.timeIcon {
-  margin-right: 0.25rem;
-}
-
-// .tileLeftAligned {
-//   .title,
-//   .description {
-//     text-align: left;
-//   }
-//   .description {
-//     padding: 0;
-//   }
-// }
-
-// .tileCenterAligned {
-//   .title,
-//   .description {
-//     text-align: center;
-//   }
-//   .description {
-//     padding: 0 0.5rem;
-//   }
-// }
diff --git a/src/pages/index.js b/src/pages/index.js
index 7dcc36e25..ad2270fd1 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -114,11 +114,7 @@ const IndexPage = ({ data, pageContext }) => {
             </header>
             <GuideListing.List>
               {getStartedGuides.map((guide, index) => (
-                <GuideTile
-                  key={index}
-                  className={styles.featuredGuide}
-                  {...guide}
-                >
+                <GuideTile key={index} featured {...guide}>
                   <GuideTile.Button to={guide.path}>
                     Start the guide
                   </GuideTile.Button>