diff --git a/apps/user-profile/src/components/modules/UserOnboardingModal/OnboardingCard/OnboardingCard.js b/apps/user-profile/src/components/modules/UserOnboardingModal/OnboardingCard/OnboardingCard.js
index 1a185007f..0ad518fb2 100644
--- a/apps/user-profile/src/components/modules/UserOnboardingModal/OnboardingCard/OnboardingCard.js
+++ b/apps/user-profile/src/components/modules/UserOnboardingModal/OnboardingCard/OnboardingCard.js
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, {useState} from 'react'
 import { Typography } from '@devlaunchers/components/components/atoms'
 import { OnboardingCardContainer, PicWrapper, TextWrapper, CheckedWrapper, CheckedSVG, IconImg } from './StyledOnboardingCard'
 
@@ -12,6 +12,7 @@ export default function OnboardingCard({
     subtitle,
     completed,
 }) {
+    
     return (
         <OnboardingCardContainer completed = {completed}>
             <PicWrapper>
diff --git a/apps/user-profile/src/components/modules/UserOnboardingModal/OnboardingCard/StyledOnboardingCard.js b/apps/user-profile/src/components/modules/UserOnboardingModal/OnboardingCard/StyledOnboardingCard.js
index 186f823c6..dfd7caf98 100644
--- a/apps/user-profile/src/components/modules/UserOnboardingModal/OnboardingCard/StyledOnboardingCard.js
+++ b/apps/user-profile/src/components/modules/UserOnboardingModal/OnboardingCard/StyledOnboardingCard.js
@@ -62,6 +62,10 @@ export const OnboardingCardContainer = styled.div`
     background: ${props => props.completed ? '#E2E2E2' : 'white'};
     box-shadow: ${props => props.completed ? '' : '0px 10px 18px 10px rgba(127, 126, 127, 0.25)'};
     margin-bottom: 15px;
+
+    &:hover {
+        border: 1px solid #3A7CA5;
+    } 
 `;
 
 export const Wrapper = styled.div`