diff --git a/client/src/assets/css/colors.scss b/client/src/assets/css/colors.scss
index 8145a20..141b21b 100644
--- a/client/src/assets/css/colors.scss
+++ b/client/src/assets/css/colors.scss
@@ -48,6 +48,9 @@ $quote-text-color: #384048;
 $quote-new-background-color: none;
 $quote-new-border: 5px dashed #ffffff;
 $quote-new-text-color: #ffffff;
+$quote-new-hover-background-color: lighten($background-primary-color, 10%);
+$quote-new-hover-border: $quote-new-border;
+$quote-new-hover-text-color: $quote-new-text-color;
 
 // Quote Button
 $quote-button-background-color: #00a0e0;
diff --git a/client/src/components/QuoteCardNew.vue b/client/src/components/QuoteCardNew.vue
index f7ddb88..53e0211 100644
--- a/client/src/components/QuoteCardNew.vue
+++ b/client/src/components/QuoteCardNew.vue
@@ -25,6 +25,12 @@ const newQuote = () => useEngine().createQuote('something is going to happen')
     border: $quote-new-border;
     border-radius: 0 16px 0 0;
     cursor: pointer;
+
+    &:hover {
+      background-color: $quote-new-hover-background-color;
+      border: $quote-new-hover-border;
+      color: $quote-new-hover-text-color;
+    }
   }
 
   &__new {