diff --git a/frontend/src/assets/icons/index.ts b/frontend/src/assets/icons/index.ts
index 4df980262..337fc0f6f 100644
--- a/frontend/src/assets/icons/index.ts
+++ b/frontend/src/assets/icons/index.ts
@@ -20,7 +20,7 @@ export { ReactComponent as PencilIcon } from './pencil.svg';
export { ReactComponent as WritingIcon } from './writing.svg';
export { ReactComponent as ImportIcon } from './import.svg';
export { ReactComponent as PlusIcon } from './plus.svg';
-export { ReactComponent as KakaoLoginIcon } from './kakao-login.svg';
+export { ReactComponent as KakaoSymbol } from './kakao-symbol.svg';
export { ReactComponent as DefaultUserProfileIcon } from './default-user-profile.svg';
export { ReactComponent as NotionIcon } from './notion.svg';
export { ReactComponent as DonggleIcon } from './donggle-logo.svg';
diff --git a/frontend/src/assets/icons/kakao-login.svg b/frontend/src/assets/icons/kakao-login.svg
deleted file mode 100644
index 6152f8073..000000000
--- a/frontend/src/assets/icons/kakao-login.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/frontend/src/assets/icons/kakao-symbol.svg b/frontend/src/assets/icons/kakao-symbol.svg
new file mode 100644
index 000000000..c7f9b5091
--- /dev/null
+++ b/frontend/src/assets/icons/kakao-symbol.svg
@@ -0,0 +1,2 @@
+
+
\ No newline at end of file
diff --git a/frontend/src/components/Login/KakaoLoginButton.tsx b/frontend/src/components/Login/KakaoLoginButton.tsx
index e099a3546..87b4c01ef 100644
--- a/frontend/src/components/Login/KakaoLoginButton.tsx
+++ b/frontend/src/components/Login/KakaoLoginButton.tsx
@@ -1,5 +1,6 @@
-import { KakaoLoginIcon } from 'assets/icons';
+import { KakaoSymbol } from 'assets/icons';
import { OauthPlatforms, getOauthPlatformURL } from 'constants/components/oauth';
+import { styled } from 'styled-components';
const KakaoLoginButton = () => {
const redirectToKakao = () => {
@@ -7,10 +8,34 @@ const KakaoLoginButton = () => {
};
return (
-
+
+
+ 카카오로 시작하기
+
);
};
export default KakaoLoginButton;
+
+const S = {
+ KakaoLoginButton: styled.button`
+ display: flex;
+ width: 300px;
+ height: 45px;
+ justify-content: center;
+ align-items: center;
+ padding: 12px;
+ background-color: #fee500;
+ border-radius: 6px;
+ font-size: 1.4rem;
+ font-weight: 600;
+
+ &:hover {
+ background-color: #ffe000;
+ }
+ `,
+
+ KakaoLoginText: styled.span`
+ flex: 1;
+ `,
+};