diff --git a/src/components/Recipe/CommentForm/CommentForm.tsx b/src/components/Recipe/CommentForm/CommentForm.tsx
index b162150c..4d0d785f 100644
--- a/src/components/Recipe/CommentForm/CommentForm.tsx
+++ b/src/components/Recipe/CommentForm/CommentForm.tsx
@@ -87,13 +87,8 @@ const CommentForm = ({ recipeId, scrollTargetRef }: CommentFormProps) => {
           <Text size="caption4" color="disabled">
             {commentValue.length}/200
           </Text>
-          <button className={sendButton}>
-            <SvgIcon
-              variant="plane"
-              width={18}
-              height={18}
-              fill={commentValue.length === 0 ? vars.colors.gray3 : vars.colors.gray5}
-            />
+          <button className={commentValue.length === 0 ? sendButton['disabled'] : sendButton['active']}>
+            <SvgIcon variant="plane" width={14} height={14} fill={vars.colors.white} />
           </button>
         </form>
       </>
diff --git a/src/components/Recipe/CommentForm/commentForm.css.ts b/src/components/Recipe/CommentForm/commentForm.css.ts
index 3ebe1b3f..4c5bc55b 100644
--- a/src/components/Recipe/CommentForm/commentForm.css.ts
+++ b/src/components/Recipe/CommentForm/commentForm.css.ts
@@ -1,5 +1,5 @@
 import { vars } from '@/styles/theme.css';
-import { style } from '@vanilla-extract/css';
+import { style, styleVariants } from '@vanilla-extract/css';
 
 export const container = style({
   display: 'flex',
@@ -38,6 +38,14 @@ export const profileImage = style({
   borderRadius: '50%',
 });
 
-export const sendButton = style({
+export const sendButtonStyles = style({
   display: 'inherit',
+  width: 36,
+  borderRadius: 45,
+  padding: '4px 10px',
+});
+
+export const sendButton = styleVariants({
+  active: [sendButtonStyles, { background: vars.colors.primary }],
+  disabled: [sendButtonStyles, { background: vars.colors.gray3 }],
 });