diff --git a/src/components/atoms/TutorCard/index.tsx b/src/components/atoms/TutorCard/index.tsx
index 8a8903cf72079520ace5071340380908cb95ac27..ccae151aa3e9ca3c42c9418f96cee90f66a7517c 100644
--- a/src/components/atoms/TutorCard/index.tsx
+++ b/src/components/atoms/TutorCard/index.tsx
@@ -19,13 +19,7 @@ const TutorCard: React.FC<TutorCardProp> = ({
   return (
     <>
       <Container
-        style={{
-          display: "flex",
-          padding: 0,
-          marginTop: "1.25rem",
-          alignItems: "center",
-          width: "100%"
-        }}
+        className={styles.tutorContainer}
       >
         <Image className={styles.tutorImage} src={image} />
         <div>
diff --git a/src/components/atoms/TutorCard/style.module.scss b/src/components/atoms/TutorCard/style.module.scss
index cb1e8f267d95d7d83652d19bcdf1cb9033b15ced..90c0466e0efb3fd932862cc7d5c5eec1d23f2f01 100644
--- a/src/components/atoms/TutorCard/style.module.scss
+++ b/src/components/atoms/TutorCard/style.module.scss
@@ -1,10 +1,31 @@
 @import "assets/scss/custom";
 
+.tutorContainer {
+  display: flex;
+  padding: 0;
+  margin-top: 1.25rem;
+  align-items: center;
+  width: 100%;
+  background: $white;
+  border: 0.0625rem solid $gray-200;
+  padding: 0.75rem;
+  border-radius: 0.5rem;
+  transition: 0.2s transform, 0.2s box-shadow;
+  -webkit-transition: 0.2s transform, 0.2s box-shadow;
+  -moz-transition: 0.2s transform, 0.2s box-shadow;
+}
+
+.tutorContainer:hover {
+  border-color: $gray-300;
+  transform: scale(1.03);
+  box-shadow: 0 0.125rem 0.625rem 0 rgba(0, 0, 0, 0.1);
+}
+
 .tutorImage {
   border-radius: 50%;
-  margin-right: 1.25rem;
-  height: 3.75rem;
-  width: 3.75rem;
+  margin-right: 0.75rem;
+  height: 4rem;
+  width: 4rem;
 }
 
 .tutorName,