diff --git a/package-lock.json b/package-lock.json
index 846e11d..4aa9a17 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,7 +15,8 @@
         "pinia": "^2.1.3",
         "vue": "^3.3.4",
         "vue-router": "^4.2.2",
-        "vuetify": "^3.4.0",
+        "vue-the-mask": "^0.11.1",
+        "vuetify": "^3.7.11",
         "vuex": "^4.1.0"
       },
       "devDependencies": {
@@ -11059,10 +11060,16 @@
         "vue": "^3.2.0"
       }
     },
+    "node_modules/vue-the-mask": {
+      "version": "0.11.1",
+      "resolved": "https://registry.npmjs.org/vue-the-mask/-/vue-the-mask-0.11.1.tgz",
+      "integrity": "sha512-UquSfnSWejD0zAfcD+3jJ1chUAkOAyoxya9Lxh9acCRtrlmGcAIvd0cQYraWqKenbuZJUdum+S174atv2AuEHQ==",
+      "license": "MIT"
+    },
     "node_modules/vuetify": {
-      "version": "3.7.8",
-      "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-3.7.8.tgz",
-      "integrity": "sha512-67p7Ton7EikHKhzauAmpsV1HT/zA2DmG8hjcHmQrktGl1eBrRaQVE+idWLtbhO51jqpTsrKQK9+HuG0KRwIGYQ==",
+      "version": "3.7.11",
+      "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-3.7.11.tgz",
+      "integrity": "sha512-50Z2SNwPXbkGmve4CwxOs4sySZGgLwQYIDsKx+coSrfIBqz8IyXgxRFQdrvgoehIwUjGTNqaPZymuK5rMFkfHA==",
       "license": "MIT",
       "engines": {
         "node": "^12.20 || >=14.13"
diff --git a/package.json b/package.json
index 8c93e61..7b57930 100644
--- a/package.json
+++ b/package.json
@@ -21,7 +21,8 @@
     "pinia": "^2.1.3",
     "vue": "^3.3.4",
     "vue-router": "^4.2.2",
-    "vuetify": "^3.4.0",
+    "vue-the-mask": "^0.11.1",
+    "vuetify": "^3.7.11",
     "vuex": "^4.1.0"
   },
   "devDependencies": {
diff --git a/src/views/UserProfileView.vue b/src/views/UserProfileView.vue
index 6d41f52..f9313df 100644
--- a/src/views/UserProfileView.vue
+++ b/src/views/UserProfileView.vue
@@ -1,218 +1,166 @@
+<!-- ProfilePage.vue -->
 <template>
   <div class="profile-container">
     <div class="profile-header">
-      <h1 class="profile-title">{{ $t('profile.title') }}</h1>
-      <p class="profile-subtitle">{{ $t('profile.subtitle') }}</p>
+      <h1 class="profile-title">Perfil do Usuário</h1>
+      <p class="profile-subtitle">Gerencie suas informações pessoais</p>
     </div>
     
-    <form 
-      @submit.prevent="submitProfile" 
-      class="profile-form" 
-      novalidate
-      aria-labelledby="profile-form-title"
-    >
+    <form @submit.prevent="saveProfile" class="profile-form">
       <div class="profile-grid">
-        <!-- Photo Section with Advanced Upload -->
+        <!-- Coluna da Foto -->
         <div class="photo-section">
-          <div 
-            class="profile-photo-wrapper" 
-            :class="{ 'has-error': photoError }"
-          >
-            <img 
-              :src="previewPhotoUrl || defaultPhoto" 
-              :alt="$t('profile.photoAlt')"
-              class="profile-photo"
-            >
-            <div 
-              class="photo-upload-overlay"
-              @click="openFileDialog"
-              @keydown.enter="openFileDialog"
-              tabindex="0"
-              role="button"
-              :aria-label="$t('profile.changePhoto')"
-            >
-              <i class="fas fa-camera"></i>
-              <span>{{ $t('profile.changePhoto') }}</span>
+          <div class="profile-photo-container">
+            <div class="photo-wrapper">
+              <img :src="profileData.photoUrl || defaultPhoto" alt="Foto de Perfil" class="profile-photo">
+              <div class="photo-overlay">
+                <span class="photo-text">Alterar foto</span>
+              </div>
             </div>
             <input 
               type="file" 
+              @change="handlePhotoUpload" 
+              accept="image/*"
               ref="photoInput"
-              accept="image/jpeg,image/png,image/webp"
-              @change="handlePhotoUpload"
-              class="hidden-file-input"
+              class="photo-input"
             >
+            <button type="button" @click="triggerPhotoUpload" class="upload-btn">
+              <i class="fas fa-camera"></i>
+              Alterar Foto
+            </button>
           </div>
-          <transition name="fade">
-            <div v-if="photoError" class="error-text">
-              {{ photoError }}
-            </div>
-          </transition>
         </div>
 
-        <!-- Profile Information Section -->
-        <div class="profile-information">
-          <!-- Basic Information -->
-          <div class="info-section">
-            <h2 class="section-heading">
-              <i class="fas fa-user-circle"></i>
-              {{ $t('profile.basicInfo') }}
-            </h2>
+        <!-- Coluna das Informações -->
+        <div class="info-section">
+          <!-- Seção de Informações Básicas -->
+          <div class="section-title">
+            <i class="fas fa-user"></i>
+            <h2 class="sub-title">Informações Básicas</h2>
+          </div>
 
-            <div class="form-grid">
-              <div class="form-field">
-                <label for="firstName">{{ $t('profile.firstName') }}</label>
-                <input 
-                  id="firstName"
-                  v-model.trim="profileData.firstName"
-                  type="text"
-                  :class="{ 'is-invalid': v$.firstName.$error }"
-                  @blur="v$.firstName.$touch()"
-                  required
-                >
-                <div 
-                  v-if="v$.firstName.$error" 
-                  class="validation-error"
-                >
-                  {{ $t('validation.requiredField') }}
-                </div>
-              </div>
-
-              <div class="form-field">
-                <label for="lastName">{{ $t('profile.lastName') }}</label>
-                <input 
-                  id="lastName"
-                  v-model.trim="profileData.lastName"
-                  type="text"
-                  :class="{ 'is-invalid': v$.lastName.$error }"
-                  @blur="v$.lastName.$touch()"
-                  required
-                >
-                <div 
-                  v-if="v$.lastName.$error" 
-                  class="validation-error"
-                >
-                  {{ $t('validation.requiredField') }}
-                </div>
-              </div>
+          <div class="form-row">
+            <div class="form-group">
+              <label>ID</label>
+              <input type="text" v-model="profileData.id" readonly class="form-input readonly">
             </div>
           </div>
 
-          <!-- Contact Information -->
-          <div class="info-section">
-            <h2 class="section-heading">
-              <i class="fas fa-envelope"></i>
-              {{ $t('profile.contactInfo') }}
-            </h2>
+          <div class="form-row">
+            <div class="form-group">
+              <label>Nome</label>
+              <input 
+                type="text" 
+                v-model="profileData.firstName" 
+                required
+                class="form-input"
+                placeholder="Digite seu nome"
+              >
+            </div>
 
-            <div class="form-grid">
-              <div class="form-field">
-                <label for="email">{{ $t('profile.email') }}</label>
-                <input 
-                  id="email"
-                  v-model.trim="profileData.email"
-                  type="email"
-                  :class="{ 'is-invalid': v$.email.$error }"
-                  @blur="v$.email.$touch()"
-                  required
-                >
-                <div 
-                  v-if="v$.email.$error" 
-                  class="validation-error"
-                >
-                  {{ $t('validation.invalidEmail') }}
-                </div>
-              </div>
-
-              <div class="form-field">
-                <label for="phone">{{ $t('profile.phone') }}</label>
-                <input 
-                  id="phone"
-                  v-model="profileData.phone"
-                  type="tel"
-                  v-mask="'(##) #####-####'"
-                  placeholder="(00) 00000-0000"
-                >
-              </div>
+            <div class="form-group">
+              <label>Sobrenome</label>
+              <input 
+                type="text" 
+                v-model="profileData.lastName" 
+                required
+                class="form-input"
+                placeholder="Digite seu sobrenome"
+              >
             </div>
           </div>
 
-          <!-- Professional Information -->
-          <div class="info-section">
-            <h2 class="section-heading">
-              <i class="fas fa-briefcase"></i>
-              {{ $t('profile.professionalInfo') }}
-            </h2>
+          <!-- Seção de Contato -->
+          <div class="section-title">
+            <i class="fas fa-address-card"></i>
+            <h2>Informações de Contato</h2>
+          </div>
 
-            <div class="form-grid">
-              <div class="form-field">
-                <label for="role">{{ $t('profile.role') }}</label>
-                <select 
-                  id="role"
-                  v-model="profileData.role"
-                  :class="{ 'is-invalid': v$.role.$error }"
-                  @blur="v$.role.$touch()"
-                  required
-                >
-                  <option value="" disabled>
-                    {{ $t('profile.selectRole') }}
-                  </option>
-                  <option 
-                    v-for="role in roles" 
-                    :key="role.id" 
-                    :value="role.id"
-                  >
-                    {{ role.name }}
-                  </option>
-                </select>
-                <div 
-                  v-if="v$.role.$error" 
-                  class="validation-error"
-                >
-                  {{ $t('validation.requiredField') }}
-                </div>
-              </div>
+          <div class="form-row">
+            <div class="form-group">
+              <label>Email</label>
+              <input 
+                type="email" 
+                v-model="profileData.email" 
+                required
+                class="form-input"
+                placeholder="seu@email.com"
+              >
+            </div>
 
-              <div class="form-field">
-                <label for="group">{{ $t('profile.group') }}</label>
-                <select 
-                  id="group"
-                  v-model="profileData.group"
-                >
-                  <option value="" disabled>
-                    {{ $t('profile.selectGroup') }}
-                  </option>
-                  <option 
-                    v-for="group in groups" 
-                    :key="group.id" 
-                    :value="group.id"
-                  >
-                    {{ group.name }}
-                  </option>
-                </select>
-              </div>
+            <div class="form-group">
+              <label>Telefone</label>
+              <input 
+                type="tel" 
+                v-model="profileData.phone"
+                v-mask="'(##) #####-####'"
+                class="form-input"
+                placeholder="(00) 00000-0000"
+              >
+            </div>
+          </div>
+
+          <!-- Seção Profissional -->
+          <div class="section-title">
+            <i class="fas fa-briefcase"></i>
+            <h2>Informações Profissionais</h2>
+          </div>
+
+          <div class="form-row">
+            <div class="form-group">
+              <label>Cargo</label>
+              <select v-model="profileData.role" class="form-select">
+                <option value="" disabled>Selecione um cargo</option>
+                <option v-for="role in roles" :key="role.id" :value="role.id">
+                  {{ role.name }}
+                </option>
+              </select>
+            </div>
+
+            <div class="form-group">
+              <label>Grupo</label>
+              <select v-model="profileData.group" class="form-select">
+                <option value="" disabled>Selecione um grupo</option>
+                <option v-for="group in groups" :key="group.id" :value="group.id">
+                  {{ group.name }}
+                </option>
+              </select>
+            </div>
+          </div>
+
+          <div class="form-row">
+            <div class="form-group">
+              <label>Permissão</label>
+              <select v-model="profileData.permission" class="form-select">
+                <option value="" disabled>Selecione uma permissão</option>
+                <option v-for="permission in permissions" :key="permission.id" :value="permission.id">
+                  {{ permission.name }}
+                </option>
+              </select>
+            </div>
+
+            <div class="form-group">
+              <label>Turno</label>
+              <select v-model="profileData.shift" class="form-select">
+                <option value="" disabled>Selecione um turno</option>
+                <option value="morning">Manhã</option>
+                <option value="afternoon">Tarde</option>
+                <option value="night">Noite</option>
+              </select>
             </div>
           </div>
         </div>
       </div>
 
-      <!-- Action Buttons -->
-      <div class="form-actions">
-        <button 
-          type="button" 
-          class="btn btn-secondary" 
-          @click="resetForm"
-          :disabled="isSubmitting"
-        >
+      <!-- Botões de Ação -->
+      <div class="button-group">
+        <button type="button" @click="resetForm" class="cancel-btn">
           <i class="fas fa-times"></i>
-          {{ $t('profile.cancel') }}
+          Cancelar
         </button>
-        <button 
-          type="submit" 
-          class="btn btn-primary"
-          :disabled="isSubmitting || !isFormValid"
-        >
+        <button type="submit" class="save-btn">
           <i class="fas fa-save"></i>
-          {{ $t('profile.save') }}
+          Salvar Alterações
         </button>
       </div>
     </form>
@@ -220,28 +168,8 @@
 </template>
 
 <script>
-import { ref } from 'vue'
-import { useVuelidate } from '@vuelidate/core'
-import { required, email } from '@vuelidate/validators'
-import useProfileService from '@/services/profileService'
-
 export default {
   name: 'ProfilePage',
-  setup() {
-    const profileService = useProfileService()
-    const v$ = useVuelidate()
-    const previewPhotoUrl = ref(null)
-    const photoError = ref(null)
-    const isSubmitting = ref(false)
-
-    return {
-      v$,
-      previewPhotoUrl,
-      photoError,
-      isSubmitting,
-      profileService
-    }
-  },
   data() {
     return {
       defaultPhoto: '/path/to/default-avatar.png',
@@ -253,208 +181,321 @@ export default {
         email: '',
         phone: '',
         role: '',
-        group: ''
+        group: '',
+        permission: '',
+        shift: ''
       },
       roles: [
-        { id: 1, name: 'Employee' },
-        { id: 2, name: 'Intern' },
-        { id: 3, name: 'Manager' }
+        { id: 1, name: 'Funcionário' },
+        { id: 2, name: 'Estagiário' },
+        { id: 3, name: 'Gerente' }
       ],
       groups: [
         { id: 1, name: 'Beta' },
-        { id: 2, name: 'Alpha' },
+        { id: 2, name: 'Alfa' },
         { id: 3, name: 'Omega' }
+      ],
+      permissions: [
+        { id: 1, name: 'Administrador' },
+        { id: 2, name: 'Editor' },
+        { id: 3, name: 'Visualizador' }
       ]
     }
   },
-  computed: {
-    isFormValid() {
-      return !this.v$.$error && 
-             this.profileData.firstName && 
-             this.profileData.lastName && 
-             this.profileData.email && 
-             this.profileData.role
-    }
-  },
-  validations() {
-    return {
-      profileData: {
-        firstName: { required },
-        lastName: { required },
-        email: { required, email },
-        role: { required }
-      }
-    }
-  },
   methods: {
     async loadProfile() {
       try {
-        const profile = await this.profileService.getProfile()
-        this.profileData = { ...profile }
-        this.previewPhotoUrl = profile.photoUrl
+        const response = await fetch('/api/profile');
+        const data = await response.json();
+        this.profileData = { ...data };
       } catch (error) {
-        this.handleError(error)
+        console.error('Erro ao carregar perfil:', error);
       }
     },
-    openFileDialog() {
-      this.$refs.photoInput.click()
+    triggerPhotoUpload() {
+      this.$refs.photoInput.click();
     },
     handlePhotoUpload(event) {
-      const file = event.target.files[0]
-      this.photoError = null
-
+      const file = event.target.files[0];
       if (file) {
-        const maxSize = 5 * 1024 * 1024 // 5MB
-        const validTypes = ['image/jpeg', 'image/png', 'image/webp']
-
-        if (file.size > maxSize) {
-          this.photoError = this.$t('validation.photoSizeTooLarge')
-          return
-        }
-
-        if (!validTypes.includes(file.type)) {
-          this.photoError = this.$t('validation.invalidPhotoType')
-          return
-        }
-
-        const reader = new FileReader()
+        const reader = new FileReader();
         reader.onload = (e) => {
-          this.previewPhotoUrl = e.target.result
-          this.profileData.photoUrl = e.target.result
-        }
-        reader.readAsDataURL(file)
+          this.profileData.photoUrl = e.target.result;
+        };
+        reader.readAsDataURL(file);
       }
     },
-    async submitProfile() {
-      this.v$.$touch()
-      
-      if (this.v$.$invalid) return
-
-      this.isSubmitting = true
-      
+    async saveProfile() {
       try {
-        await this.profileService.updateProfile(this.profileData)
-        this.$emit('profile-updated')
-        this.$toast.success(this.$t('profile.updateSuccess'))
+        await fetch('/api/profile', {
+          method: 'PUT',
+          headers: {
+            'Content-Type': 'application/json'
+          },
+          body: JSON.stringify(this.profileData)
+        });
+        
+        this.$emit('profile-updated');
+        this.showNotification('Perfil atualizado com sucesso!', 'success');
       } catch (error) {
-        this.handleError(error)
-      } finally {
-        this.isSubmitting = false
+        console.error('Erro ao salvar perfil:', error);
+        this.showNotification('Erro ao salvar perfil. Tente novamente.', 'error');
       }
     },
     resetForm() {
-      this.v$.$reset()
-      this.loadProfile()
-      this.previewPhotoUrl = this.profileData.photoUrl
+      this.loadProfile();
     },
-    handleError(error) {
-      console.error('Profile error:', error)
-      this.$toast.error(
-        error.response?.data?.message || 
-        this.$t('profile.updateError')
-      )
+    showNotification(message,type) {
+      // Implementar sistema de notificação de sua preferência
+      alert(message);
     }
   },
   created() {
-    this.loadProfile()
+    this.loadProfile();
   }
 }
 </script>
 
 <style scoped>
 .profile-container {
-  max-width: 800px;
+  max-width: 1200px;
   margin: 0 auto;
-  padding: 1rem;
+  padding: 40px 20px;
+}
+
+.profile-header {
+  text-align: center;
+  margin-bottom: 40px;
+}
+
+.profile-title {
+  font-size: 2.5rem;
+  color: #2c3e50;
+  margin-bottom: 10px;
+}
+
+.profile-subtitle {
+  color: #7f8c8d;
+  font-size: 1.1rem;
+}
+
+.profile-form {
+  background: #fff;
+  border-radius: 15px;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
 }
 
 .profile-grid {
   display: grid;
-  grid-template-columns: 1fr 2fr;
-  gap: 1rem;
+  grid-template-columns: 300px 1fr;
+  gap: 30px;
 }
 
-.profile-photo-wrapper {
+.photo-section {
+  padding: 30px;
+  background: #f8f9fa;
+  border-right: 1px solid #eee;
+}
+
+.info-section {
+  padding: 30px;
+}
+
+.photo-wrapper {
   position: relative;
-  text-align: center;
+  width: 200px;
+  height: 200px;
+  margin: 0 auto 20px;
+  border-radius: 50%;
+  overflow: hidden;
+  cursor: pointer;
 }
 
 .profile-photo {
-  width: 200px;
-  height: 200px;
+  width: 100%;
+  height: 100%;
   object-fit: cover;
-  border-radius: 50%;
+  transition: transform 0.3s ease;
 }
 
-.photo-upload-overlay {
+.photo-overlay {
   position: absolute;
-  bottom: 0;
-  left: 50%;
-  transform: translateX(-50%);
-  background: rgba(0,0,0,0.5);
-  color: white;
-  padding: 0.5rem;
-  border-radius: 0 0 100px 100px;
-  cursor: pointer;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  transition: opacity 0.3s ease;
 }
 
-.hidden-file-input {
+.photo-text {
+  color: white;
+  font-size: 0.9rem;
+  font-weight: 500;
+}
+
+.photo-wrapper:hover .photo-overlay {
+  opacity: 1;
+}
+
+.photo-wrapper:hover .profile-photo {
+  transform: scale(1.1);
+}
+
+.section-title {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin: 30px 0 20px;
+  padding-bottom: 10px;
+  border-bottom: 2px solid #e1e8ed;
+}
+
+.section-title i {
+  color: #3498db;
+  font-size: 1.2rem;
+}
+
+.section-title h2 {
+  font-size: 1.2rem;
+  color: #2c3e50;
+  margin: 0;
+}
+
+.form-row {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 20px;
+  margin-bottom: 20px;
+}
+
+.form-group {
+  margin-bottom: 0;
+}
+
+.form-group label {
+  display: block;
+  margin-bottom: 8px;
+  font-weight: 500;
+  color: #34495e;
+}
+
+.form-input,
+.form-select {
+  width: 100%;
+  padding: 12px;
+  border: 2px solid #e1e8ed;
+  border-radius: 8px;
+  font-size: 14px;
+  transition: all 0.3s ease;
+}
+
+.form-input:focus,
+.form-select:focus {
+  border-color: #3498db;
+  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
+  outline: none;
+}
+
+.form-input.readonly {
+  background-color: #f8f9fa;
+  cursor: not-allowed;
+  color: #7f8c8d;
+}
+
+.photo-input {
   display: none;
 }
 
-.form-field {
-  margin-bottom: 1rem;
-}
-
-.form-field label {
-  display: block;
-  margin-bottom: 0.5rem;
-}
-
-.form-field input,
-.form-field select {
+.upload-btn {
   width: 100%;
-  padding: 0.5rem;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-}
-
-.is-invalid {
-  border-color: #dc3545;
-}
-
-.validation-error {
-  color: #dc3545;
-  font-size: 0.8rem;
-  margin-top: 0.25rem;
-}
-
-.form-actions {
-  display: flex;
-  justify-content: flex-end;
-  gap: 1rem;
-  margin-top: 1rem;
-}
-
-.btn {
-  padding: 0.5rem 1rem;
+  padding: 12px;
+  background: #3498db;
+  color: white;
   border: none;
-  border-radius: 4px;
+  border-radius: 8px;
+  font-weight: 500;
   cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  transition: background 0.3s ease;
 }
 
-.btn-primary {
-  background-color: #007bff;
+.upload-btn:hover {
+  background: #2980b9;
+}
+
+.button-group {
+  display: flex;
+  gap: 15px;
+  justify-content: flex-end;
+  padding: 30px;
+  background: #f8f9fa;
+  border-top: 1px solid #eee;
+}
+
+.save-btn,
+.cancel-btn {
+  padding: 12px 24px;
+  border: none;
+  border-radius: 8px;
+  font-weight: 500;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  transition: all 0.3s ease;
+}
+
+.save-btn {
+  background: #2ecc71;
   color: white;
 }
 
-.btn-secondary {
-  background-color: #6c757d;
+.save-btn:hover {
+  background: #27ae60;
+  transform: translateY(-1px);
+}
+
+.cancel-btn {
+  background: #e74c3c;
   color: white;
 }
 
-.btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
+.cancel-btn:hover {
+  background: #c0392b;
+  transform: translateY(-1px);
+}
+
+@media (max-width: 768px) {
+  .profile-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .photo-section {
+    border-right: none;
+    border-bottom: 1px solid #eee;
+  }
+
+  .form-row {
+    grid-template-columns: 1fr;
+  }
+
+  .button-group {
+    flex-direction: column-reverse;
+  }
+
+  .save-btn,
+  .cancel-btn {
+    width: 100%;
+    justify-content: center;
+  }
 }
 </style>
\ No newline at end of file