diff --git a/backend/controllers/authController.js b/backend/controllers/authController.js
index 6717931..a197977 100644
--- a/backend/controllers/authController.js
+++ b/backend/controllers/authController.js
@@ -164,11 +164,10 @@ exports.getCurrentUser = async (req, res) => {
 // 프로필 업데이트
 exports.updateProfile = async (req, res) => {
   try {
-    const userId = req.user.id;
-    const { name, email, password, currentPassword } = req.body;
+    const { id, name, email, password, currentPassword } = req.body;
     
     // 사용자 조회
-    const user = await User.findByPk(userId);
+    const user = await User.findByPk(id);
     
     if (!user) {
       return res.status(404).json({ message: '사용자를 찾을 수 없습니다.' });
@@ -183,33 +182,38 @@ exports.updateProfile = async (req, res) => {
       }
     }
 
-    // 이메일이 변경되는 경우
-    if (email && email !== user.email) {
-      // Users 테이블에서 이메일 중복 확인
-      const existingUser = await User.findOne({ where: { email } });
+    // 이메일이 변경된 경우 중복 확인
+    if (email && email !== user.getDataValue('email')) {
+      // 이메일 유효성 검사 (암호화 전)
+      if (!/^\S+@\S+\.\S+$/.test(email)) {
+        return res.status(400).json({ message: '유효한 이메일 형식이 아닙니다.' });
+      }
+      
+      // 이메일 중복 확인 (암호화된 값으로 비교할 수 없으므로 복호화하여 비교)
+      const allUsers = await User.findAll();
+      const existingUser = allUsers.find(u => u.email === email && u.id !== id);
+      
       if (existingUser) {
         return res.status(400).json({ message: '이미 사용 중인 이메일입니다.' });
       }
 
-      // Members 테이블에서 이메일 중복 확인
-      const existingMember = await Member.findOne({ where: { email } });
-      if (existingMember) {
-        return res.status(400).json({ message: '이미 클럽 회원이 사용 중인 이메일입니다.' });
-      }
-
       // 해당 사용자의 Members 테이블 레코드도 함께 업데이트
       await Member.update(
-        { email },
-        { where: { userId } }
+        { email, name },
+        { where: { userId: id } }
       );
     }
     
     // 프로필 업데이트
     const updateData = {
-      name: name || user.name,
-      email: email || user.email
+      name: name || user.name
       // username은 변경하지 않음 - 로그인 식별자로 사용되기 때문
     };
+    
+    // 이메일은 별도로 처리 (암호화되어 있기 때문에)
+    if (email) {
+      updateData.email = email;
+    }
 
     // 비밀번호가 제공된 경우에만 업데이트
     if (password && currentPassword) {
@@ -219,7 +223,7 @@ exports.updateProfile = async (req, res) => {
     await user.update(updateData);
     
     // 업데이트된 사용자 정보 반환 (비밀번호 제외)
-    const updatedUser = await User.findByPk(userId, {
+    const updatedUser = await User.findByPk(id, {
       attributes: { exclude: ['password'] }
     });
     
diff --git a/backend/models/User.js b/backend/models/User.js
index 1efa958..d7d8f66 100644
--- a/backend/models/User.js
+++ b/backend/models/User.js
@@ -30,9 +30,6 @@ const User = sequelize.define('User', {
     type: DataTypes.STRING,
     allowNull: false,
     unique: true,
-    validate: {
-      isEmail: true
-    },
     comment: '이메일 (암호화됨)',
     get() {
       const rawValue = this.getDataValue('email');
diff --git a/frontend/src/views/auth/Profile.vue b/frontend/src/views/auth/Profile.vue
index 87456e2..6eaca78 100644
--- a/frontend/src/views/auth/Profile.vue
+++ b/frontend/src/views/auth/Profile.vue
@@ -1,59 +1,76 @@
 <template>
   <div class="profile-container">
     <div class="card">
-      <h2>내 프로필</h2>
+      <div class="card-header">
+        <h2>내 프로필</h2>
+      </div>
       
       <div class="profile-content">
         <div class="profile-header">
           <div class="profile-avatar">
-            <Avatar :image="user.avatar || null" :label="getInitials(user.name)" size="xlarge" shape="circle" />
+            <Avatar :image="user.avatar || null" :label="getInitials(user.name)" size="xlarge" shape="circle" class="shadow-2" />
           </div>
           <div class="profile-info">
             <h3>{{ user.name }}</h3>
-            <p>{{ user.email }}</p>
-            <p><Badge :value="user.role === 'admin' ? '관리자' : '일반 사용자'" :severity="user.role === 'admin' ? 'success' : 'info'" /></p>
+            <div class="info-item">
+              <span>{{ user.username }} <small>(로그인 아이디)</small></span>
+            </div>
+            <div class="info-item">
+              <span>{{ user.email }}</span>
+            </div>
+            <div class="info-item">
+              <Badge :value="user.role === 'admin' ? '관리자' : '일반 사용자'" :severity="user.role === 'admin' ? 'success' : 'info'" />
+            </div>
           </div>
         </div>
         
-        <Divider />
+        <Divider>
+          <span class="text-sm text-500">프로필 정보 수정</span>
+        </Divider>
         
         <div class="profile-form">
           <form @submit.prevent="updateProfile">
-            <div class="p-fluid">
-              <div class="field">
-                <label for="name">이름</label>
-                <InputText id="name" v-model="form.name" :class="{'p-invalid': v$.name.$invalid && submitted}" />
-                <small v-if="v$.name.$invalid && submitted" class="p-error">{{ v$.name.$errors[0].$message }}</small>
+            <div class="p-fluid formgrid grid">              
+              <div class="field col-12 md:col-6">
+                <label for="name" class="font-medium mb-2 block">이름</label>
+                <InputText id="name" v-model="form.name" :class="{'p-invalid': v$.name.$invalid && submitted}" class="w-full" />
+                <small v-if="v$.name.$invalid && submitted" class="p-error block mt-1">{{ v$.name.$errors[0].$message }}</small>
               </div>
               
-              <div class="field">
-                <label for="email">이메일</label>
-                <InputText id="email" v-model="form.email" :class="{'p-invalid': v$.email.$invalid && submitted}" />
-                <small v-if="v$.email.$invalid && submitted" class="p-error">{{ v$.email.$errors[0].$message }}</small>
+              <div class="field col-12 md:col-6">
+                <label for="email" class="font-medium mb-2 block">이메일</label>
+                <InputText id="email" v-model="form.email" :class="{'p-invalid': v$.email.$invalid && submitted}" class="w-full" />
+                <small v-if="v$.email.$invalid && submitted" class="p-error block mt-1">{{ v$.email.$errors[0].$message }}</small>
               </div>
               
-              <Divider />
-              
-              <div class="field">
-                <label for="currentPassword">현재 비밀번호 (변경 시에만 입력)</label>
-                <Password id="currentPassword" v-model="form.currentPassword" :feedback="false" toggleMask />
+              <div class="col-12">
+                <Divider>
+                  <span class="text-sm text-500">비밀번호 변경</span>
+                </Divider>
               </div>
               
-              <div class="field">
-                <label for="newPassword">새 비밀번호 (변경 시에만 입력)</label>
-                <Password id="newPassword" v-model="form.newPassword" :class="{'p-invalid': v$.newPassword.$invalid && passwordChangeAttempted}" toggleMask />
-                <small v-if="v$.newPassword.$invalid && passwordChangeAttempted" class="p-error">{{ v$.newPassword.$errors[0].$message }}</small>
+              <div class="field col-12 md:col-4">
+                <label for="currentPassword" class="font-medium mb-2 block">현재 비밀번호</label>
+                <Password id="currentPassword" v-model="form.currentPassword" :feedback="false" toggleMask inputClass="w-full" />
+                <small class="text-500 block mt-1">변경 시에만 입력</small>
               </div>
               
-              <div class="field">
-                <label for="confirmPassword">비밀번호 확인</label>
-                <Password id="confirmPassword" v-model="form.confirmPassword" :class="{'p-invalid': v$.confirmPassword.$invalid && passwordChangeAttempted}" :feedback="false" toggleMask />
-                <small v-if="v$.confirmPassword.$invalid && passwordChangeAttempted" class="p-error">{{ v$.confirmPassword.$errors[0].$message }}</small>
+              <div class="field col-12 md:col-4">
+                <label for="newPassword" class="font-medium mb-2 block">새 비밀번호</label>
+                <Password id="newPassword" v-model="form.newPassword" :class="{'p-invalid': v$.newPassword.$invalid && passwordChangeAttempted}" toggleMask inputClass="w-full" />
+                <small v-if="v$.newPassword.$invalid && passwordChangeAttempted" class="p-error block mt-1">{{ v$.newPassword.$errors[0].$message }}</small>
+                <small v-else class="text-500 block mt-1">변경 시에만 입력</small>
+              </div>
+              
+              <div class="field col-12 md:col-4">
+                <label for="confirmPassword" class="font-medium mb-2 block">비밀번호 확인</label>
+                <Password id="confirmPassword" v-model="form.confirmPassword" :class="{'p-invalid': v$.confirmPassword.$invalid && passwordChangeAttempted}" :feedback="false" toggleMask inputClass="w-full" />
+                <small v-if="v$.confirmPassword.$invalid && passwordChangeAttempted" class="p-error block mt-1">{{ v$.confirmPassword.$errors[0].$message }}</small>
               </div>
             </div>
             
             <div class="button-container">
-              <Button type="submit" label="프로필 업데이트" :loading="loading" />
+              <Button type="submit" label="프로필 업데이트" icon="pi pi-save" :loading="loading" class="p-button-raised" />
             </div>
           </form>
         </div>
@@ -69,10 +86,10 @@ import { ref, reactive, computed, onMounted } from 'vue';
 import { useToast } from 'primevue/usetoast';
 import { useVuelidate } from '@vuelidate/core';
 import { required, email, minLength, sameAs, helpers } from '@vuelidate/validators';
-import axios from 'axios';
+import authService from '@/services/authService';
+import apiClient from '@/services/api';
 
 const toast = useToast();
-const API_URL = 'http://localhost:3030/api';
 
 // 상태 변수
 const loading = ref(false);
@@ -83,6 +100,7 @@ const passwordChangeAttempted = ref(false);
 const user = reactive({
   id: null,
   name: '',
+  username: '',
   email: '',
   role: '',
   avatar: null
@@ -90,6 +108,7 @@ const user = reactive({
 
 // 폼 데이터
 const form = reactive({
+  username: '',
   name: '',
   email: '',
   currentPassword: '',
@@ -122,15 +141,13 @@ onMounted(async () => {
 // 사용자 프로필 가져오기
 const fetchUserProfile = async () => {
   try {
-    const token = localStorage.getItem('token');
-    const response = await axios.get(`${API_URL}/auth/me`, {
-      headers: { Authorization: `Bearer ${token}` }
-    });
+    const response = await authService.getCurrentUser();
     
     // 사용자 정보 설정
     Object.assign(user, response.data);
     
     // 폼 데이터 초기화
+    form.username = user.username;
     form.name = user.name;
     form.email = user.email;
   } catch (error) {
@@ -157,8 +174,8 @@ const updateProfile = async () => {
   
   loading.value = true;
   try {
-    const token = localStorage.getItem('token');
     const profileData = {
+      id: user.id,
       name: form.name,
       email: form.email
     };
@@ -176,9 +193,7 @@ const updateProfile = async () => {
       profileData.password = form.newPassword;
     }
     
-    await axios.put(`${API_URL}/auth/profile`, profileData, {
-      headers: { Authorization: `Bearer ${token}` }
-    });
+    await apiClient.put('/api/auth/profile', profileData);
     
     // 사용자 정보 업데이트
     Object.assign(user, {
@@ -204,39 +219,60 @@ const updateProfile = async () => {
 
 <style scoped>
 .profile-container {
-  max-width: 800px;
+  max-width: 900px;
   margin: 0 auto;
   padding: 2rem;
 }
 
 .card {
   background: #ffffff;
-  padding: 2rem;
-  border-radius: 10px;
-  box-shadow: 0 2px 1px -1px rgba(0,0,0,0.2), 0 1px 1px 0 rgba(0,0,0,0.14), 0 1px 3px 0 rgba(0,0,0,0.12);
+  border-radius: 12px;
+  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
+  overflow: hidden;
+}
+
+.card-header {
+  background: var(--primary-color, #3B82F6);
+  color: white;
+  padding: 1.5rem 2rem;
+}
+
+.card-header h2 {
+  margin: 0;
+  font-weight: 500;
 }
 
 .profile-content {
-  margin-top: 2rem;
+  padding: 2rem;
 }
 
 .profile-header {
   display: flex;
   align-items: center;
-  gap: 2rem;
+  gap: 2.5rem;
   margin-bottom: 2rem;
 }
 
+.profile-avatar {
+  flex-shrink: 0;
+}
+
 .profile-info {
   h3 {
     margin: 0;
-    margin-bottom: 0.5rem;
+    margin-bottom: 1rem;
+    font-size: 1.5rem;
+    color: var(--text-color-secondary, #4b5563);
   }
   
-  p {
-    margin: 0;
-    margin-bottom: 0.5rem;
-    color: #666;
+  .info-item {
+    margin-bottom: 0.75rem;
+    color: var(--text-color-secondary, #6b7280);
+    
+    small {
+      color: var(--text-color-secondary, #9ca3af);
+      margin-left: 0.25rem;
+    }
   }
 }
 
@@ -252,6 +288,8 @@ const updateProfile = async () => {
   display: flex;
   justify-content: flex-end;
   gap: 1rem;
-  margin-top: 2rem;
+  margin-top: 2.5rem;
+  padding-top: 1rem;
+  border-top: 1px solid var(--surface-border, #e5e7eb);
 }
 </style>