diff --git a/src/app/login/_features/LoginForm.tsx b/src/app/login/_features/LoginForm.tsx
index c8913aa8..63a41a0c 100644
--- a/src/app/login/_features/LoginForm.tsx
+++ b/src/app/login/_features/LoginForm.tsx
@@ -16,10 +16,12 @@ const LoginForm = () => {
   return (
     <form
       onSubmit={handleSubmit(onSubmit)}
-      className="flex w-[544px] flex-col gap-[48px] rounded-[16px] bg-BG_2 p-[40px]"
+      className="flex w-full max-w-[544px] flex-col gap-[48px] rounded-[16px] bg-BG_2 p-[40px] sm:gap-[24px] sm:p-[20px]"
     >
       <div>
-        <h2 className="typo-head2 mb-[40px] text-center text-white">로그인</h2>
+        <h2 className="typo-head2 mb-[40px] text-center text-white sm:mb-[24px]">
+          로그인
+        </h2>
         <div>
           <EmailInput
             control={control}
@@ -33,15 +35,17 @@ const LoginForm = () => {
             errors={errors}
             trigger={trigger}
           />
-          <div className="flex justify-between">
-            <p className="text-Cgray700">비밀번호를 잊으셨나요?</p>
-            <Link href="/" className="text-main underline">
+          <div className="flex justify-between sm:hidden sm:flex-col sm:gap-[8px]">
+            <p className="text-Cgray700 sm:text-[14px]">
+              비밀번호를 잊으셨나요?
+            </p>
+            <Link href="/" className="text-main underline sm:text-[14px]">
               비밀번호 수정
             </Link>
           </div>
         </div>
       </div>
-      <div className="flex flex-col gap-[16px]">
+      <div className="flex flex-col gap-[16px] sm:gap-[12px]">
         <Button type="submit" className="w-full">
           로그인
         </Button>
@@ -58,3 +62,4 @@ const LoginForm = () => {
   );
 };
 export default LoginForm;
+``;
diff --git a/src/components/common/Header.tsx b/src/components/common/Header.tsx
index 711d3b1e..c21d13dd 100644
--- a/src/components/common/Header.tsx
+++ b/src/components/common/Header.tsx
@@ -7,6 +7,7 @@ import { translateCategoryNameToKor } from '@/util/searchFilter';
 import { useQueryClient } from '@tanstack/react-query';
 import { MEETING_TYPES } from 'constants/category/category';
 import { Menu } from 'lucide-react';
+import { LogOut } from 'lucide-react';
 import Image from 'next/image';
 import Link from 'next/link';
 import { useParams, useRouter } from 'next/navigation';
@@ -72,7 +73,7 @@ const AfterLogin = ({ userInfo }: { userInfo: IUserInfo }) => {
           sideOffset={10}
           imageProps={{
             component: (
-              <div className="flex items-center bg-transparent">
+              <div className="flex flex-col items-center bg-transparent">
                 <div className="group relative h-10 w-10">
                   <div className="absolute inset-0 -m-1 rounded-full border-2 border-white opacity-0 transition-opacity duration-300 group-hover:opacity-100"></div>
                   <Image
@@ -121,32 +122,34 @@ const MobileAfterLogin = ({ userInfo }: { userInfo: IUserInfo }) => {
   const { showToast } = useToast();
   return (
     <div className="flex flex-col py-[24px]">
-      <div className="flex items-center justify-between">
-        <button
-          className="typo-head3 p-[16px] text-Cgray500 hover:text-Cgray700"
-          onClick={async () => {
-            await removeAccessToken();
-            showToast('로그아웃 되었습니다.', 'success');
-          }}
-        >
-          로그아웃
-        </button>
-        <div className="flex">
+      <div className="flex flex-col items-center justify-between">
+        <div className="flex flex-col items-center gap-4">
           <Image
             width={40}
             height={40}
-            className="h-[40px] w-[40px] rounded-full"
+            className="h-[60px] w-[60px] rounded-full"
             src={userInfo.profilePic}
             alt="프로필 이미지"
           />
           <span
             title={userInfo.name}
-            className="typo-head3 m-auto w-[77px] truncate text-center text-white"
+            className="typo-head3 m-auto mb-4 w-full whitespace-nowrap text-center text-white"
           >
             {userInfo.name}
           </span>
         </div>
       </div>
+      <button
+        className="typo-head3 flex items-center gap-2 self-start p-[16px] text-left text-Cgray500 text-warning hover:text-Cgray700"
+        onClick={async () => {
+          await removeAccessToken();
+          showToast('로그아웃 되었습니다.', 'success');
+        }}
+      >
+        로그아웃
+        <LogOut size={16} />
+      </button>
+
       <Link
         className="typo-head4 p-[16px] text-Cgray400 hover:text-Cgray500"
         href="/mypage"
@@ -184,7 +187,7 @@ const NavLinks = ({ isMobile }: { isMobile?: boolean }) => {
             href={item.href}
             className={`flex items-center ${isMobile ? 'hover:text-Cgray500' : 'hover:text-white'}`}
           >
-            {!isMobile && <span className="mr-2">{item.icon}</span>}
+            {isMobile && <span className="mr-2">{item.icon}</span>}
             {item.label}
           </Link>
         </li>