diff --git a/public/assets/icon16/arrow_square_16.svg b/public/assets/icon16/arrow_square_16.svg
new file mode 100644
index 00000000..e5f1521d
--- /dev/null
+++ b/public/assets/icon16/arrow_square_16.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.66699 7.3335L14.667 1.3335M14.667 1.3335H11.1045M14.667 1.3335V4.896" stroke="#192028" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14.6663 8.00016C14.6663 11.1429 14.6663 12.7142 13.69 13.6905C12.7137 14.6668 11.1424 14.6668 7.99967 14.6668C4.85698 14.6668 3.28563 14.6668 2.30932 13.6905C1.33301 12.7142 1.33301 11.1429 1.33301 8.00016C1.33301 4.85747 1.33301 3.28612 2.30932 2.30981C3.28563 1.3335 4.85698 1.3335 7.99967 1.3335" stroke="#192028" stroke-width="1.5" stroke-linecap="round"/>
+</svg>
diff --git a/src/app/settings/layout.tsx b/src/app/settings/layout.tsx
index 7811a1e0..a7797995 100644
--- a/src/app/settings/layout.tsx
+++ b/src/app/settings/layout.tsx
@@ -7,7 +7,9 @@ interface TermsLayoutProps {
 export default function layout({ children }: TermsLayoutProps) {
   return (
     <div>
-      <Header />
+      <Header>
+        <p className="body-16-bold">설정</p>
+      </Header>
       {children}
     </div>
   );
diff --git a/src/app/settings/page.tsx b/src/app/settings/page.tsx
index 30968d37..86c9d30d 100644
--- a/src/app/settings/page.tsx
+++ b/src/app/settings/page.tsx
@@ -4,24 +4,35 @@ import { useRouter } from 'next/navigation';
 
 import { SETTINGS, Setting } from '@constants/settings';
 import RightArrowIcon from 'public/assets/icon24/right_arrow_24.svg';
+import ArrowSquareIcon from 'public/assets/icon16/arrow_square_16.svg';
+import { useLogout } from '@hooks/api/useLogout';
 
 export default function Page() {
   const { push } = useRouter();
+  const { mutate: logout } = useLogout();
 
   const handleClickSettingItem = (setting: Setting) => () => {
     if (setting.url) {
       push(setting.url);
     }
+
+    if (setting.title === '로그아웃') {
+      logout();
+    }
   };
+
   return (
     <ul className="pt-[56px]">
       {SETTINGS.map((setting, index) => (
         <li
           key={index}
-          className="flex justify-between items-center py-[8px] pl-[24px] pr-[16px] h-[56px]"
+          className="flex justify-between items-center py-[8px] pl-[24px] pr-[16px] h-[56px] cursor-pointer border-b-[1px] border-gray-100"
           onClick={handleClickSettingItem(setting)}
         >
-          <p className="body-16-bold">{setting.title}</p>
+          <div className="flex gap-[4px] items-center">
+            <p className="body-16-bold">{setting.title}</p>
+            {setting.url && <ArrowSquareIcon />}
+          </div>
           {setting.url && <RightArrowIcon />}
         </li>
       ))}
diff --git a/src/hooks/api/useLogout.ts b/src/hooks/api/useLogout.ts
new file mode 100644
index 00000000..38830a7a
--- /dev/null
+++ b/src/hooks/api/useLogout.ts
@@ -0,0 +1,19 @@
+import { useMutation, UseMutationResult } from '@tanstack/react-query';
+import { AxiosError } from 'axios';
+import Cookies from 'js-cookie';
+import { useRouter } from 'next/navigation';
+
+import { logout } from '@utils/auth';
+
+export const useLogout = (): UseMutationResult<void, AxiosError, void> => {
+  const { push } = useRouter();
+  return useMutation({
+    mutationKey: ['logout'],
+    mutationFn: logout,
+    onSuccess: () => {
+      Cookies.remove('accessToken');
+      Cookies.remove('refreshToken');
+      push('/login');
+    },
+  });
+};