diff --git a/src/assets/icons/apple.svg b/src/assets/icons/apple.svg
new file mode 100644
index 0000000..0a65131
--- /dev/null
+++ b/src/assets/icons/apple.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#ffffff" width="800px" height="800px" viewBox="-52.01 0 560.035 560.035" xmlns="http://www.w3.org/2000/svg"><path d="M380.844 297.529c.787 84.752 74.349 112.955 75.164 113.314-.622 1.988-11.754 40.191-38.756 79.652-23.343 34.117-47.568 68.107-85.731 68.811-37.499.691-49.557-22.236-92.429-22.236-42.859 0-56.256 21.533-91.753 22.928-36.837 1.395-64.889-36.891-88.424-70.883-48.093-69.53-84.846-196.475-35.496-282.165 24.516-42.554 68.328-69.501 115.882-70.192 36.173-.69 70.315 24.336 92.429 24.336 22.1 0 63.59-30.096 107.208-25.676 18.26.76 69.517 7.376 102.429 55.552-2.652 1.644-61.159 35.704-60.523 106.559M310.369 89.418C329.926 65.745 343.089 32.79 339.498 0 311.308 1.133 277.22 18.785 257 42.445c-18.121 20.952-33.991 54.487-29.709 86.628 31.421 2.431 63.52-15.967 83.078-39.655"/></svg>
diff --git a/src/assets/icons/index.ts b/src/assets/icons/index.ts
index e77a2a8..cc98232 100644
--- a/src/assets/icons/index.ts
+++ b/src/assets/icons/index.ts
@@ -17,3 +17,4 @@ export { ReactComponent as Naver } from './naver.svg';
 export { ReactComponent as Logo } from './logo.svg';
 export { ReactComponent as Filter } from './filter.svg';
 export { ReactComponent as LocationPin } from './location-pin.svg';
+export { ReactComponent as Apple } from './apple.svg';
diff --git a/src/pages/login/index.module.scss b/src/pages/login/index.module.scss
index 45cda04..a2d7d8c 100644
--- a/src/pages/login/index.module.scss
+++ b/src/pages/login/index.module.scss
@@ -63,8 +63,8 @@
     background-color: #fee500;
   }
 
-  &--naver {
-    background-color: #03c75a;
+  &--apple {
+    background-color: #000;
     color: themes.$white;
   }
 }
diff --git a/src/pages/login/index.tsx b/src/pages/login/index.tsx
index facc7aa..ad06de7 100644
--- a/src/pages/login/index.tsx
+++ b/src/pages/login/index.tsx
@@ -14,7 +14,7 @@ const cx = classNames.bind(styles);
 const Login = () => {
   const router = useRouter();
 
-  const { loginWithKakao, loginWithNaver, verifyLoggedIn } = useAuth();
+  const { loginWithKakao, loginWithApple, verifyLoggedIn } = useAuth();
 
   useEffect(() => {
     verifyLoggedIn().then((isLoggedIn) => {
@@ -44,12 +44,12 @@ const Login = () => {
         </button>
         <button
           type="button"
-          aria-label="네이버 로그인"
-          className={cx('login-button', 'login-button--naver')}
-          onClick={loginWithNaver}
+          aria-label="애플 로그인"
+          className={cx('login-button', 'login-button--apple')}
+          onClick={loginWithApple}
         >
-          <Icon name="Naver" size={24} />
-          <span>네이버 로그인</span>
+          <Icon name="Apple" size={24} />
+          <span>Apple로 로그인</span>
         </button>
         <div className={cx('terms-of-service')}>
           <span>
diff --git a/src/shared/hooks/useAuth.ts b/src/shared/hooks/useAuth.ts
index 38ca73e..9880107 100644
--- a/src/shared/hooks/useAuth.ts
+++ b/src/shared/hooks/useAuth.ts
@@ -33,7 +33,7 @@ const useAuth = () => {
     location.href = getKakaoOAuthAuthorizeUrl();
   };
 
-  const loginWithNaver = () => {
+  const loginWithApple = () => {
     alert('준비중입니다!');
   };
 
@@ -58,7 +58,7 @@ const useAuth = () => {
 
   return {
     loginWithKakao,
-    loginWithNaver,
+    loginWithApple,
     logout,
     verifyLoggedIn,
   };