diff --git a/website/src/components/quickstartGuideCard/index.js b/website/src/components/quickstartGuideCard/index.js
index 1d29dcefa51..104bb5cb35b 100644
--- a/website/src/components/quickstartGuideCard/index.js
+++ b/website/src/components/quickstartGuideCard/index.js
@@ -21,7 +21,7 @@ export default function QuickstartGuideCard({ frontMatter }) {
       )}
 
       <span to={`/guides/${id}`} className={styles.start}>
-        Start
+        Start <i className="fa-regular fa-arrow-right"></i>
       </span>
 
       {(tags || level) && (
diff --git a/website/src/components/quickstartGuideCard/styles.module.css b/website/src/components/quickstartGuideCard/styles.module.css
index 4c6f17bff79..aa1538cdeaa 100644
--- a/website/src/components/quickstartGuideCard/styles.module.css
+++ b/website/src/components/quickstartGuideCard/styles.module.css
@@ -1,5 +1,5 @@
 .quickstartCard {
-  border: 1px solid #EFF2F3;
+  outline: 1px solid #EFF2F3;
   border-radius: var(--border-radius);
   box-shadow: 0px 11px 24px rgba(138, 138, 138, .1);
   padding: 2.5rem 2.5rem 1.5rem 2.5rem;
@@ -13,6 +13,11 @@
 
 .quickstartCard:hover {
   transform: translateY(-7px);
+  outline: 2px solid var(  --color-green-blue);
+}
+
+.quickstartCard:hover > .start {
+  text-decoration: underline;
 }
 
 .quickstartCard .icon {
@@ -52,19 +57,16 @@
   font-size: 1.125rem;
   margin-top: auto;
   padding-top: 2rem;
+  font-weight: 600;
 }
 
 [data-theme='dark'] .quickstartCard .start {
   color: #fff;
 }
 
-[data-theme='dark'] .quickstartCard:hover .start {
-  text-decoration: underline;
-}
-
-.quickstartCard .start:after {
-  content: " →";
-  margin-left: 5px;
+.quickstartCard .start i {
+  margin-left: 4px;
+  font-size: .9rem;
 }
 
 .quickstartCard .recently_updated {