diff --git a/src/modules/school-management/routes.ts b/src/modules/school-management/routes.ts
index a78bfb7..d747771 100644
--- a/src/modules/school-management/routes.ts
+++ b/src/modules/school-management/routes.ts
@@ -1,4 +1,4 @@
-import { create, person, school, albums } from 'ionicons/icons'
+import { create, person, school, albums, business } from 'ionicons/icons'
 import DashboardFunction from './views/DashboardFunction.vue'
 import DashboardClassroom from './views/classroom/DashboardClassroom.vue'
 import RegisterClassroom from './views/classroom/RegisterClassroom.vue'
@@ -7,6 +7,9 @@ import ClassroomDetailsDesktop from './views/classroom/ClassroomDetailsDesktop.v
 import FunctionDetailsDesktop from './views/FunctionDetailsDesktop.vue'
 import RegisterFunction from './views/RegisterFunction.vue'
 // import RegisterSchool from './views/RegisterSchool.vue'
+import DashboardInstitution from './views/institution/DashboardInstitution.vue'
+import RegisterInstitution from './views/institution/RegisterInstitution.vue'
+import InstitutionDetailsDesktop from './views/institution/InstitutionDetailsDesktop.vue'
 
 const routes = [
   // {
@@ -233,6 +236,43 @@ const routes = [
       requiredRole: ['ADMIN', 'GESTORMUNICIPAL', 'GESTORESCOLAR'],
     },
   },
+  {
+    path: '/Institution/list',
+    name: 'DashboardInstitution',
+    component: DashboardInstitution,
+    meta: {
+      moduleName: 'Schools',
+      moduleIcon: school,
+      icon: business,
+      name: 'Instituições',
+      order: 19,
+      requiredRole: ['ADMIN', 'GESTORMUNICIPAL', 'GESTORESCOLAR'],
+    },
+  },
+  {
+    path: '/Institution/register/:id?',
+    name: 'RegisterInstitution',
+    component: RegisterInstitution,
+    meta: {
+      moduleName: 'Schools',
+      icon: create,
+      name: 'Registrar instituição',
+      order: 20,
+      requiredRole: ['ADMIN', 'GESTORMUNICIPAL', 'GESTORESCOLAR'],
+    },
+  },
+  {
+    path: '/Institution/details/:id',
+    name: 'InstitutionDetails',
+    component: InstitutionDetailsDesktop,
+    meta: {
+      moduleName: 'Schools',
+      icon: business,
+      name: 'Detalhes da instituição',
+      order: 21,
+      requiredRole: ['ADMIN', 'GESTORMUNICIPAL', 'GESTORESCOLAR'],
+    },
+  },
 ]
 
 export default routes
diff --git a/src/modules/school-management/services/InstitutionService.ts b/src/modules/school-management/services/InstitutionService.ts
index 8f102bc..978b584 100644
--- a/src/modules/school-management/services/InstitutionService.ts
+++ b/src/modules/school-management/services/InstitutionService.ts
@@ -1,11 +1,233 @@
 import BaseService from '@/services/BaseService'
+import type { Institution } from '@prisma/client'
+import errorHandler from '@/utils/error-handler'
 
-const table = 'institution' as const
+interface InstitutionToSave {
+  id?: string
+  name: string
+  address?: string | null
+  city?: string | null
+  state?: string | null
+  postalCode?: string | null
+  phone?: string | null
+  email?: string | null
+  metadata?: any
+  tenantId?: string | null
+  userCreated?: string | null
+}
 
-type InstitutionTable = typeof table
+const table = 'institution' as const
 
-export default class InstitutionService extends BaseService<InstitutionTable> {
+export default class InstitutionService extends BaseService<Institution> {
   constructor() {
-    super(table) // Passando o nome da tabela para a classe base
+    super(table)
+  }
+
+  async getInstitutions() {
+    const { data, error } = await this.client
+      .from(table)
+      .select('*')
+      .is('deletedAt', null)
+      .order('name')
+
+    if (error) {
+      errorHandler(error, 'Erro ao buscar instituições')
+      return []
+    }
+
+    return data as Institution[]
+  }
+
+  async getInstitutionById(id: string) {
+    if (!id) {
+      return null
+    }
+
+    const { data, error } = await this.client
+      .from(table)
+      .select('*')
+      .eq('id', id)
+      .is('deletedAt', null)
+      .maybeSingle()
+
+    if (error) {
+      errorHandler(error, 'Erro ao buscar instituição por ID')
+      return null
+    }
+
+    return data as Institution | null
+  }
+
+  async getInstitutionByName(name: string) {
+    if (!name) {
+      return null
+    }
+
+    const { data, error } = await this.client
+      .from(table)
+      .select('*')
+      .eq('name', name)
+      .is('deletedAt', null)
+      .maybeSingle()
+
+    if (error) {
+      errorHandler(error, 'Erro ao buscar instituição por nome')
+      return null
+    }
+
+    return data as Institution | null
+  }
+
+  async getInstitutionByNameInsensitive(name: string, excludeId?: string) {
+    if (!name) {
+      return null
+    }
+
+    const { data, error } = await this.client
+      .from(table)
+      .select('*')
+      .ilike('name', name)
+      .is('deletedAt', null)
+
+    if (error) {
+      errorHandler(error, 'Erro ao buscar instituição por nome')
+      return null
+    }
+
+    const filtered = excludeId ? data.filter(item => item.id !== excludeId) : data
+    return filtered.length > 0 ? filtered[0] : null
+  }
+
+  async upsertInstitution(institution: InstitutionToSave) {
+    const now = new Date().toISOString()
+
+    // Verifica se já existe uma instituição com o mesmo nome (ignorando case)
+    const existingWithSameName = await this.getInstitutionByNameInsensitive(
+      institution.name,
+      institution.id,
+    )
+
+    if (existingWithSameName) {
+      throw new Error('Nome de instituição já existente')
+    }
+
+    let existing = null
+    if (institution.id) {
+      const { data, error: fetchError } = await this.client
+        .from(table)
+        .select('*')
+        .eq('id', institution.id)
+        .is('deletedAt', null)
+        .maybeSingle()
+
+      if (fetchError) {
+        errorHandler(fetchError, 'Erro ao buscar instituição existente por ID')
+      }
+      existing = data
+    }
+
+    const payload: Partial<Institution> & { id?: string } = {
+      name: institution.name,
+      address: institution.address || null,
+      city: institution.city || null,
+      state: institution.state || null,
+      postalCode: institution.postalCode || null,
+      phone: institution.phone || null,
+      email: institution.email || null,
+      metadata: institution.metadata || null,
+      tenantId: institution.tenantId || null,
+      userCreated: institution.userCreated || null,
+      deletedAt: null,
+      updatedAt: now,
+      ...(existing?.id && { id: existing.id }),
+    }
+
+    const { data, error } = await this.client
+      .from(table)
+      .upsert(payload)
+      .select()
+
+    if (error) {
+      errorHandler(error, 'Erro ao inserir/atualizar instituição')
+    }
+    return data as Institution[]
+  }
+
+  async softDeleteInstitution(institutionId: string, userId?: string) {
+    if (!institutionId) {
+      errorHandler({ message: 'ID da instituição não fornecido' }, 'Erro ao apagar instituição')
+      return []
+    }
+
+    // Verificar escolas associadas
+    const { data: schools, error: schoolsError } = await this.client
+      .from('school')
+      .select('id')
+      .eq('institutionId', institutionId)
+      .is('deletedAt', null)
+
+    if (schoolsError) {
+      errorHandler(schoolsError, 'Erro ao verificar escolas associadas')
+      return []
+    }
+
+    if (schools && schools.length > 0) {
+      throw new Error('Não é possível excluir: existem escolas vinculadas a essa instituição.')
+    }
+
+    // Verificar cursos associados
+    const { data: courses, error: coursesError } = await this.client
+      .from('course')
+      .select('id')
+      .eq('institutionId', institutionId)
+      .is('deletedAt', null)
+
+    if (coursesError) {
+      errorHandler(coursesError, 'Erro ao verificar cursos associados')
+      return []
+    }
+
+    if (courses && courses.length > 0) {
+      throw new Error('Não é possível excluir: existem cursos vinculados a essa instituição.')
+    }
+
+    const now = new Date().toISOString()
+    const updateFields: Record<string, any> = {
+      deletedAt: now,
+      updatedAt: now,
+    }
+
+    if (userId) {
+      updateFields.updatedBy = userId
+    }
+
+    const { data, error } = await this.client
+      .from(table)
+      .update(updateFields)
+      .eq('id', institutionId)
+      .select()
+
+    if (error) {
+      errorHandler(error, 'Erro ao excluir instituição')
+      return []
+    }
+
+    return data as Institution[]
+  }
+
+  async getInstitutionsByFilter(filter: string) {
+    const { data, error } = await this.client
+      .from(table)
+      .select('*')
+      .or(`name.ilike.%${filter}%, city.ilike.%${filter}%, state.ilike.%${filter}%`)
+      .is('deletedAt', null)
+      .order('name')
+
+    if (error) {
+      errorHandler(error, 'Erro ao buscar instituições com filtro')
+      return []
+    }
+
+    return data as Institution[]
   }
 }
diff --git a/src/modules/school-management/views/institution/DashboardInstitution.vue b/src/modules/school-management/views/institution/DashboardInstitution.vue
new file mode 100644
index 0000000..657fe05
--- /dev/null
+++ b/src/modules/school-management/views/institution/DashboardInstitution.vue
@@ -0,0 +1,320 @@
+<script setup lang="ts">
+import type { Institution } from '@prisma/client'
+import ContentLayout from '@/components/theme/ContentLayout.vue'
+import showToast from '@/utils/toast-alert'
+import { IonButton, IonCard, IonCardHeader, IonCardTitle, IonCol, IonContent, IonIcon, IonModal, IonPage, IonRow, IonSearchbar, IonText } from '@ionic/vue'
+import { add } from 'ionicons/icons'
+import { computed, onMounted, ref, watch } from 'vue'
+import { useRouter } from 'vue-router'
+import InstitutionService from '../../services/InstitutionService'
+import InstitutionDetailView from './InstitutionDetailView.vue'
+import ListWithActionInstitution from './ListWithActionInstitution.vue'
+import RegisterInstitutionMobile from './RegisterInstitutionMobile.vue'
+
+const router = useRouter()
+const route = router.currentRoute
+const institutionService = new InstitutionService()
+const dataList = ref<Institution[]>([])
+const searchQuery = ref('')
+const isModalAddInstitution = ref(false)
+const editingId = ref<string | undefined>(undefined)
+const seeModal = ref({ modal: false, data: undefined as any })
+const editModal = ref({ modal: false, data: undefined })
+const deleteModal = ref<{ modal: boolean, data: Institution | undefined }>({ modal: false, data: undefined })
+
+function delayModalOpen(modalState: any) {
+  modalState.modal = false
+  setTimeout(() => (modalState.modal = true), 10)
+}
+
+const adaptedDataList = computed(() => {
+  return dataList.value.map(item => ({
+    id: item.id,
+    name: item.name,
+    address: item.address,
+    city: item.city,
+    state: item.state,
+    postalCode: item.postalCode,
+    phone: item.phone,
+    email: item.email,
+    metadata: item.metadata,
+    createdAt: item.createdAt ? item.createdAt.toString() : undefined,
+    updatedAt: item.updatedAt ? item.updatedAt.toString() : undefined,
+    deletedAt: item.deletedAt ? item.deletedAt.toString() : undefined,
+  }))
+})
+
+const filteredDataList = computed(() => {
+  const filtered = searchQuery.value
+    ? adaptedDataList.value.filter(item =>
+        item.name.toLowerCase().includes(searchQuery.value.toLowerCase())
+        || (item.city && item.city.toLowerCase().includes(searchQuery.value.toLowerCase()))
+        || (item.state && item.state.toLowerCase().includes(searchQuery.value.toLowerCase()))
+        || (item.email && item.email.toLowerCase().includes(searchQuery.value.toLowerCase())),
+      )
+    : adaptedDataList.value
+
+  return filtered.sort((a, b) => {
+    return a.name.localeCompare(b.name)
+  })
+})
+
+function setModalAddInstitution(open: boolean) {
+  if (open) {
+    isModalAddInstitution.value = false
+    setTimeout(() => (isModalAddInstitution.value = true), 10)
+  }
+  else {
+    isModalAddInstitution.value = open
+  }
+}
+
+function navigateToRegister() {
+  if (isMobileDevice()) {
+    editingId.value = undefined
+    setModalAddInstitution(true)
+  }
+  else {
+    router.push({ name: 'RegisterInstitution' })
+  }
+}
+
+function setSeeModal(open: boolean) {
+  if (open) {
+    delayModalOpen(seeModal.value)
+  }
+  else {
+    seeModal.value.modal = open
+  }
+}
+
+function setEditModal(open: boolean) {
+  if (open) {
+    delayModalOpen(editModal.value)
+  }
+  else {
+    editModal.value.modal = open
+    loadInstitutions()
+  }
+}
+
+function setDeleteModal(open: boolean) {
+  if (open) {
+    delayModalOpen(deleteModal.value)
+  }
+  else {
+    deleteModal.value.modal = open
+  }
+}
+
+async function loadInstitutions() {
+  try {
+    const institutions = await institutionService.getInstitutions()
+    dataList.value = institutions || []
+  }
+  catch (error) {
+    console.error('Erro ao carregar instituições:', error)
+  }
+}
+
+function isMobileDevice() {
+  return window.innerWidth <= 768
+}
+
+async function handleDelete() {
+  if (deleteModal.value?.data?.id) {
+    try {
+      await institutionService.softDeleteInstitution(deleteModal.value.data.id)
+      loadInstitutions()
+      setDeleteModal(false)
+      showToast('Instituição excluída com sucesso', 'top', 'success')
+    }
+    catch (error: any) {
+      console.error('Erro ao excluir instituição:', error)
+
+      if (error.message) {
+        if (error.message.includes('escolas vinculadas')) {
+          showToast('Não é possível excluir: Existem escolas vinculadas a essa instituição', 'top', 'warning')
+        }
+        else if (error.message.includes('cursos vinculados')) {
+          showToast('Não é possível excluir: Existem cursos vinculados a essa instituição', 'top', 'warning')
+        }
+        else {
+          showToast(`Erro ao excluir: ${error.message}`, 'top', 'danger')
+        }
+      }
+      else {
+        showToast('Erro desconhecido ao excluir instituição', 'top', 'danger')
+      }
+    }
+  }
+  else {
+    console.error('ID da instituição não encontrado para exclusão:', deleteModal)
+  }
+}
+
+onMounted(() => {
+  loadInstitutions()
+})
+
+watch(
+  () => route.value.query,
+  (query) => {
+    if (query.refresh) {
+      loadInstitutions()
+    }
+  },
+  { deep: true },
+)
+</script>
+
+<template>
+  <IonPage>
+    <ContentLayout>
+      <div class="ion-margin-top">
+        <IonRow class="ion-align-items-center ion-justify-content-between">
+          <IonCol size="10">
+            <IonSearchbar v-model="searchQuery" placeholder="Buscar instituição" />
+          </IonCol>
+          <IonCol size="2" class="ion-text-end">
+            <IonButton id="add-btn" expand="block" class="ion-text-uppercase" @click="navigateToRegister()">
+              <IonIcon slot="icon-only" :icon="add" class="ion-hide-sm-up" />
+              <IonIcon slot="start" :icon="add" class="ion-hide-sm-down" />
+              <span class="ion-hide-sm-down">Novo</span>
+            </IonButton>
+          </IonCol>
+        </IonRow>
+
+        <ListWithActionInstitution
+          :data-list="filteredDataList"
+          @update:delete="(event) => {
+            deleteModal = event;
+            setDeleteModal(true);
+          }"
+          @update:edit="(event) => {
+            if (isMobileDevice()) {
+              editingId = event.data?.id
+              setEditModal(true)
+            }
+            else {
+              router.push({ name: 'RegisterInstitution', params: { id: event.data?.id } })
+            }
+          }"
+          @update:see="(event) => {
+            if (isMobileDevice()) {
+              seeModal = event
+              setSeeModal(true)
+            }
+            else {
+              router.push({ name: 'InstitutionDetails', params: { id: event.data?.id } })
+            }
+          }"
+        />
+
+        <IonModal
+          :is-open="isModalAddInstitution"
+          :expand-to-scroll="false"
+          :initial-breakpoint="0.95"
+          :breakpoints="[0, 0.7, 0.95, 1]"
+          @ion-modal-did-dismiss="setModalAddInstitution(false)"
+        >
+          <RegisterInstitutionMobile
+            @saved="loadInstitutions(); setModalAddInstitution(false)"
+            @cancel="setModalAddInstitution(false)"
+            @success="(message, color) => { showToast(message, 'top', color); }"
+            @error="(message, color) => { showToast(message, 'top', color); }"
+          />
+        </IonModal>
+
+        <IonModal
+          :is-open="editModal.modal"
+          :expand-to-scroll="false"
+          :initial-breakpoint="0.95"
+          :breakpoints="[0, 0.7, 0.95, 1]"
+          @ion-modal-did-dismiss="setEditModal(false)"
+        >
+          <IonContent>
+            <RegisterInstitutionMobile
+              :edit-id="editingId"
+              @saved="loadInstitutions(); setEditModal(false)"
+              @cancel="setEditModal(false)"
+              @success="(message, color) => { showToast(message, 'top', color); }"
+              @error="(message, color) => { showToast(message, 'top', color); }"
+            />
+          </IonContent>
+        </IonModal>
+
+        <IonModal
+          :is-open="seeModal.modal"
+          :expand-to-scroll="false"
+          :initial-breakpoint="0.95"
+          :breakpoints="[0, 0.7, 0.95, 1]"
+          @did-dismiss="setSeeModal(false)"
+        >
+          <IonContent>
+            <InstitutionDetailView
+              :items="seeModal.data"
+              name="Detalhes da instituição"
+              @close="setSeeModal(false)"
+              @edit="() => {
+                editingId = seeModal.data?.id;
+                setSeeModal(false);
+                setEditModal(true);
+              }"
+            />
+          </IonContent>
+        </IonModal>
+
+        <IonModal id="delete-modal" :is-open="deleteModal.modal" @ion-modal-did-dismiss="setDeleteModal(false)">
+          <IonCard class="ion-no-margin">
+            <IonCardHeader>
+              <IonCardTitle>Excluir instituição</IonCardTitle>
+              <IonText class="ion-padding-vertical">
+                Tem certeza que deseja excluir esta instituição?
+              </IonText>
+              <div style="display: flex;">
+                <IonButton
+                  size="small"
+                  style="margin-left: auto; margin-right: 8px; text-transform: capitalize;"
+                  color="medium"
+                  @click="setDeleteModal(false)"
+                >
+                  Cancelar
+                </IonButton>
+                <IonButton
+                  style="text-transform: capitalize;"
+                  size="small"
+                  color="danger"
+                  @click="handleDelete()"
+                >
+                  Confirmar
+                </IonButton>
+              </div>
+            </IonCardHeader>
+          </IonCard>
+        </IonModal>
+      </div>
+    </ContentLayout>
+  </IonPage>
+</template>
+
+<style scoped>
+ion-searchbar {
+  --background: var(--ion-color-light);
+}
+
+ion-segment {
+  --background: rgba(var(--ion-color-tertiary-rgb), 0.15);
+  --color: var(--ion-color-secondary);
+}
+
+.custom-button {
+  max-width: 120px;
+}
+#delete-modal {
+  --width: 300px;
+  --height: auto;
+  --border-radius: 10px;
+  --box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
+}
+</style>
diff --git a/src/modules/school-management/views/institution/InstitutionDetailView.vue b/src/modules/school-management/views/institution/InstitutionDetailView.vue
new file mode 100644
index 0000000..c8e5842
--- /dev/null
+++ b/src/modules/school-management/views/institution/InstitutionDetailView.vue
@@ -0,0 +1,220 @@
+<script setup lang="ts">
+import {
+  IonButton,
+  IonCol,
+  IonContent,
+  IonGrid,
+  IonIcon,
+  IonItemDivider,
+  IonLabel,
+  IonList,
+  IonPage,
+  IonRow,
+  IonText,
+} from '@ionic/vue'
+import {
+  businessOutline,
+  calendarOutline,
+  callOutline,
+  locationOutline,
+  mailOutline,
+  mapOutline,
+  timeOutline,
+} from 'ionicons/icons'
+
+interface Props {
+  items: {
+    id?: string
+    name: string
+    address?: string
+    city?: string
+    state?: string
+    postalCode?: string
+    phone?: string
+    email?: string
+    createdAt?: string
+    updatedAt?: string
+  }
+  name?: string
+}
+
+const props = defineProps<Props>()
+const emits = defineEmits(['close', 'edit'])
+function formatDate(dateString: string) {
+  try {
+    const date = new Date(dateString)
+    return date.toLocaleString('pt-BR', {
+      day: '2-digit',
+      month: '2-digit',
+      year: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit',
+    })
+  }
+  catch (error) {
+    console.error('Erro ao formatar data:', error)
+    return dateString || 'Data inválida'
+  }
+}
+</script>
+
+<template>
+  <IonPage>
+    <IonContent class="ion-padding">
+      <!-- Título no mesmo estilo do formulário -->
+      <div class="style-purple-lane" style="display: flex; align-items: center;">
+        <IonIcon :icon="businessOutline" style="margin-right: 10px;" />
+        {{ props.name }}
+      </div>
+
+      <div class="institution-detail-content">
+        <!-- Informações gerais header -->
+        <IonItemDivider
+          style="border-color: rgba(var(--ion-color-primary-rgb), 0.25);"
+          class="ion-no-padding"
+        >
+          <IonLabel color="primary" class="ion-no-margin">
+            Informações gerais
+          </IonLabel>
+        </IonItemDivider>
+
+        <IonList>
+          <!-- Nome da instituição -->
+          <div style="display: flex; align-items: center; padding: 6px;">
+            <IonIcon slot="start" color="primary" style="padding-right: 10px;" :icon="businessOutline" />
+            <IonText color="primary" style="font-size: 11pt; padding-top: 2px;">
+              {{ props.items.name || 'Não informado' }}
+            </IonText>
+          </div>
+
+          <!-- Endereço da instituição -->
+          <div v-if="props.items.address" style="display: flex; align-items: flex-start; padding: 6px;">
+            <IonIcon slot="start" color="primary" style="padding-right: 10px; margin-top: 3px;" :icon="locationOutline" />
+            <IonText color="primary" style="font-size: 11pt;">
+              {{ props.items.address }}
+            </IonText>
+          </div>
+
+          <!-- Cidade e Estado -->
+          <div v-if="props.items.city || props.items.state" style="display: flex; align-items: center; padding: 6px;">
+            <IonIcon slot="start" color="primary" style="padding-right: 10px;" :icon="mapOutline" />
+            <IonText color="primary" style="font-size: 11pt; padding-top: 2px;">
+              {{ props.items.city || 'Não informada' }}{{ props.items.state ? ` - ${props.items.state}` : '' }}
+            </IonText>
+          </div>
+
+          <!-- CEP -->
+          <div v-if="props.items.postalCode" style="display: flex; align-items: center; padding: 6px;">
+            <IonIcon slot="start" color="primary" style="padding-right: 10px;" :icon="mailOutline" />
+            <IonText color="primary" style="font-size: 11pt; padding-top: 2px;">
+              CEP: {{ props.items.postalCode }}
+            </IonText>
+          </div>
+        </IonList>
+
+        <!-- Informações de contato header -->
+        <IonItemDivider
+          style="border-color: rgba(var(--ion-color-primary-rgb), 0.25);"
+          class="ion-no-padding ion-margin-top"
+        >
+          <IonLabel color="primary" class="ion-no-margin">
+            Informações de contato
+          </IonLabel>
+        </IonItemDivider>
+
+        <IonList>
+          <!-- Telefone -->
+          <div v-if="props.items.phone" style="display: flex; align-items: center; padding: 6px;">
+            <IonIcon slot="start" color="primary" style="padding-right: 10px;" :icon="callOutline" />
+            <IonText color="primary" style="font-size: 11pt; padding-top: 2px;">
+              {{ props.items.phone }}
+            </IonText>
+          </div>
+
+          <!-- E-mail -->
+          <div v-if="props.items.email" style="display: flex; align-items: center; padding: 6px;">
+            <IonIcon slot="start" color="primary" style="padding-right: 10px;" :icon="mailOutline" />
+            <IonText color="primary" style="font-size: 11pt; padding-top: 2px;">
+              {{ props.items.email }}
+            </IonText>
+          </div>
+        </IonList>
+
+        <!-- Informações do sistema header -->
+        <IonItemDivider
+          style="border-color: rgba(var(--ion-color-primary-rgb), 0.25);"
+          class="ion-no-padding ion-margin-top"
+        >
+          <IonLabel color="primary" class="ion-no-margin">
+            Informações do sistema
+          </IonLabel>
+        </IonItemDivider>
+
+        <IonList>
+          <!-- Data de criação -->
+          <div v-if="props.items.createdAt" style="display: flex; align-items: center; padding: 6px;">
+            <IonIcon slot="start" color="primary" style="padding-right: 10px;" :icon="calendarOutline" />
+            <IonText color="primary" style="font-size: 11pt; padding-top: 2px;">
+              Criado em: {{ formatDate(props.items.createdAt) }}
+            </IonText>
+          </div>
+
+          <!-- Data de atualização -->
+          <div v-if="props.items.updatedAt" style="display: flex; align-items: center; padding: 6px;">
+            <IonIcon slot="start" color="primary" style="padding-right: 10px;" :icon="timeOutline" />
+            <IonText color="primary" style="font-size: 11pt; padding-top: 2px;">
+              Atualizado em: {{ formatDate(props.items.updatedAt) }}
+            </IonText>
+          </div>
+        </IonList>
+      </div>
+    </IonContent>
+
+    <div>
+      <IonGrid>
+        <IonRow>
+          <IonCol size="6">
+            <IonButton :disabled="false" color="danger" expand="full" @click="emits('close', false)">
+              Fechar
+            </IonButton>
+          </IonCol>
+          <IonCol size="6">
+            <IonButton :disabled="false" color="secondary" expand="full" @click="emits('edit', true)">
+              Editar
+            </IonButton>
+          </IonCol>
+        </IonRow>
+      </IonGrid>
+    </div>
+  </IonPage>
+</template>
+
+<style scoped>
+.style-purple-lane {
+  background: rgba(var(--ion-color-secondary-rgb), 0.15);
+  color: var(--ion-color-secondary);
+  padding: 2px;
+  margin: 8px 2px;
+  border-radius: 4px;
+}
+
+.institution-detail-content {
+  padding: 16px 0;
+}
+
+.abbreviation-tag {
+  display: flex;
+  justify-content: flex-start;
+  margin: 10px 0;
+}
+
+ion-chip {
+  --background: rgba(var(--ion-color-primary-rgb), 0.15);
+  --color: var(--ion-color-primary);
+}
+
+.description-text {
+  white-space: pre-line;
+  line-height: 1.5;
+}
+</style>
diff --git a/src/modules/school-management/views/institution/InstitutionDetailsDesktop.vue b/src/modules/school-management/views/institution/InstitutionDetailsDesktop.vue
new file mode 100644
index 0000000..9acf50a
--- /dev/null
+++ b/src/modules/school-management/views/institution/InstitutionDetailsDesktop.vue
@@ -0,0 +1,259 @@
+<script setup lang="ts">
+import type { Institution } from '@prisma/client'
+import ContentLayout from '@/components/theme/ContentLayout.vue'
+import { IonButton, IonCol, IonGrid, IonPage, IonRow } from '@ionic/vue'
+import { onMounted, ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import InstitutionService from '../../services/InstitutionService'
+
+const route = useRoute()
+const router = useRouter()
+const institutionService = new InstitutionService()
+const institutionDetails = ref<Institution | null>(null)
+const loading = ref(true)
+
+async function loadInstitutionDetails() {
+  try {
+    loading.value = true
+    const id = route.params.id as string
+    if (!id) {
+      router.push({ name: 'DashboardInstitution' })
+      return
+    }
+
+    const data = await institutionService.getInstitutionById(id)
+    institutionDetails.value = data
+  }
+  catch (error) {
+    console.error('Erro ao carregar detalhes da instituição:', error)
+  }
+  finally {
+    loading.value = false
+  }
+}
+
+function formatDate(dateString: string | null | undefined): string {
+  if (!dateString) return '-'
+  try {
+    const date = new Date(dateString)
+    return date.toLocaleDateString('pt-BR', {
+      day: '2-digit',
+      month: '2-digit',
+      year: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit',
+    })
+  }
+  catch (error) {
+    console.error('Erro ao formatar data:', error)
+    return '-'
+  }
+}
+
+function navigateToEdit() {
+  if (institutionDetails.value?.id) {
+    router.push({ name: 'RegisterInstitution', params: { id: institutionDetails.value.id } })
+  }
+}
+
+function goBack() {
+  router.back()
+}
+
+onMounted(() => {
+  loadInstitutionDetails()
+})
+
+watch(
+  () => route.params,
+  () => {
+    loadInstitutionDetails()
+  },
+)
+</script>
+
+<template>
+  <IonPage>
+    <ContentLayout>
+      <div v-if="loading" class="ion-text-center ion-padding">
+        <p>Carregando detalhes da instituição...</p>
+      </div>
+      <div v-else-if="institutionDetails" class="institution-details-container">
+        <h1 class="institution-title">
+          {{ institutionDetails.name }}
+        </h1>
+
+        <div class="detail-section">
+          <h2 class="section-title">
+            Informações básicas
+          </h2>
+          <IonGrid>
+            <IonRow>
+              <IonCol size="12" size-md="6">
+                <div class="detail-item">
+                  <span class="detail-label">Nome</span>
+                  <span class="detail-value">{{ institutionDetails.name || '-' }}</span>
+                </div>
+              </IonCol>
+              <IonCol size="12" size-md="6">
+                <div class="detail-item">
+                  <span class="detail-label">E-mail</span>
+                  <span class="detail-value">{{ institutionDetails.email || '-' }}</span>
+                </div>
+              </IonCol>
+            </IonRow>
+
+            <IonRow>
+              <IonCol size="12" size-md="6">
+                <div class="detail-item">
+                  <span class="detail-label">Telefone</span>
+                  <span class="detail-value">{{ institutionDetails.phone || '-' }}</span>
+                </div>
+              </IonCol>
+            </IonRow>
+          </IonGrid>
+        </div>
+
+        <div class="detail-section">
+          <h2 class="section-title">
+            Endereço
+          </h2>
+          <IonGrid>
+            <IonRow>
+              <IonCol size="12" size-md="6">
+                <div class="detail-item">
+                  <span class="detail-label">CEP</span>
+                  <span class="detail-value">{{ institutionDetails.postalCode || '-' }}</span>
+                </div>
+              </IonCol>
+              <IonCol size="12" size-md="6">
+                <div class="detail-item">
+                  <span class="detail-label">Logradouro</span>
+                  <span class="detail-value">{{ institutionDetails.address || '-' }}</span>
+                </div>
+              </IonCol>
+            </IonRow>
+
+            <IonRow>
+              <IonCol size="12" size-md="6">
+                <div class="detail-item">
+                  <span class="detail-label">Número</span>
+                  <span class="detail-value">{{ '-' }}</span>
+                </div>
+              </IonCol>
+              <IonCol size="12" size-md="6">
+                <div class="detail-item">
+                  <span class="detail-label">Bairro</span>
+                  <span class="detail-value">{{ '-' }}</span>
+                </div>
+              </IonCol>
+            </IonRow>
+
+            <IonRow>
+              <IonCol size="12" size-md="6">
+                <div class="detail-item">
+                  <span class="detail-label">Cidade</span>
+                  <span class="detail-value">{{ institutionDetails.city || '-' }}</span>
+                </div>
+              </IonCol>
+              <IonCol size="12" size-md="6">
+                <div class="detail-item">
+                  <span class="detail-label">Estado</span>
+                  <span class="detail-value">{{ institutionDetails.state || '-' }}</span>
+                </div>
+              </IonCol>
+            </IonRow>
+          </IonGrid>
+        </div>
+
+        <div class="fixed-footer">
+          <IonGrid>
+            <IonRow>
+              <IonCol size="6">
+                <IonButton color="danger" expand="full" @click="goBack()">Fechar</IonButton>
+              </IonCol>
+              <IonCol size="6">
+                <IonButton color="secondary" expand="full" @click="navigateToEdit()">Editar</IonButton>
+              </IonCol>
+            </IonRow>
+          </IonGrid>
+        </div>
+      </div>
+
+      <div v-else class="ion-text-center ion-padding">
+        <p>Instituição não encontrada</p>
+        <IonButton color="medium" @click="goBack()">
+          Voltar
+        </IonButton>
+      </div>
+    </ContentLayout>
+  </IonPage>
+</template>
+
+<style scoped>
+.institution-details-container {
+  padding: 16px;
+  padding-bottom: 80px; /* Espaço para o footer fixo */
+}
+
+.institution-title {
+  margin-bottom: 16px;
+  color: var(--ion-color-secondary);
+  font-size: 1.5rem;
+  font-weight: 600;
+}
+
+.detail-section {
+  margin-bottom: 24px;
+  background-color: #ffffff;
+  border-radius: 8px;
+  padding: 16px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.section-title {
+  color: var(--ion-color-secondary);
+  font-size: 1.2rem;
+  margin-bottom: 16px;
+  border-bottom: 1px solid #eee;
+  padding-bottom: 8px;
+}
+
+.detail-item {
+  margin-bottom: 16px;
+  display: flex;
+  flex-direction: column;
+}
+
+.detail-label {
+  font-size: 0.9rem;
+  color: var(--ion-color-secondary);
+  font-weight: 500;
+  margin-bottom: 4px;
+}
+
+.detail-value {
+  font-size: 1rem;
+}
+
+.fixed-footer {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: #ffffff;
+  padding: 12px 16px;
+  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
+  z-index: 1000;
+}
+
+@media (max-width: 768px) {
+  .detail-section {
+    padding: 12px;
+  }
+  
+  .institution-details-container {
+    padding-bottom: 90px; /* Mais espaço no mobile */
+  }
+}
+</style>
diff --git a/src/modules/school-management/views/institution/ListWithActionInstitution.vue b/src/modules/school-management/views/institution/ListWithActionInstitution.vue
new file mode 100644
index 0000000..6b3f8e1
--- /dev/null
+++ b/src/modules/school-management/views/institution/ListWithActionInstitution.vue
@@ -0,0 +1,160 @@
+<template>
+  <IonCard v-if="true">
+    <IonCardHeader color="secondary">
+      <div style="display: flex; align-items: center; height: 15px;">
+        <IonIcon :icon="businessOutline" style="margin-right: 10px; font-size: 16pt;" />
+        <IonCardTitle style="font-size: medium;">
+          Lista de instituições ({{ props.dataList.length }})
+        </IonCardTitle>
+      </div>
+    </IonCardHeader>
+
+    <div v-if="true">
+      <IonCardContent class="ion-no-padding">
+        <IonList>
+          <div v-if="innerWidth < 992">
+            <IonItemSliding
+              v-for="(item, index) in props.dataList" :key="index" ref="itemSliding"
+              @ion-did-open="() => handleSwipeOpened(index)"
+              @ion-did-close="() => handleSwipeClosed(index)"
+            >
+              <IonItem>
+                <IonLabel color="primary" class="ion-no-margin institution-name" style="margin-top: 5px; margin-bottom: 5px;">
+                  <h2>{{ item.name || 'Instituição sem nome' }}</h2>
+                  <p>
+                    <span v-if="item.city || item.state">{{ item.city || '' }}{{ item.state ? `/${item.state}` : '' }}</span>
+                    <span v-if="item.phone"> - {{ item.phone }}</span>
+                  </p>
+                </IonLabel>
+                <IonIcon :icon="isOpen[index] ? arrowForward : arrowBack" style="font-size: 18pt;" />
+              </IonItem>
+
+              <IonItemOptions side="end" style="border-bottom: 1px solid rgba(var(--ion-color-primary-rgb), 0.2);">
+                <IonItemOption color="tertiary" @click="emits('update:see', { modal: true, data: item })">
+                  <div style="width: 40px; display: flex; justify-content: center;">
+                    <IonIcon :icon="eye" style="font-size: 18pt;" />
+                  </div>
+                </IonItemOption>
+                <IonItemOption color="primary" @click="emits('update:edit', { modal: true, data: item })">
+                  <div style="width: 40px; display: flex; justify-content: center;">
+                    <IonIcon :icon="pencilSharp" style="font-size: 18pt;" />
+                  </div>
+                </IonItemOption>
+                <IonItemOption color="danger" @click="emits('update:delete', { modal: true, data: item })">
+                  <div style="width: 40px; display: flex; justify-content: center;">
+                    <IonIcon :icon="trashSharp" style="font-size: 18pt;" />
+                  </div>
+                </IonItemOption>
+              </IonItemOptions>
+            </IonItemSliding>
+          </div>
+          <div v-else>
+            <IonItem v-for="(item, index) in props.dataList" :key="index">
+              <IonLabel color="primary" class="ion-no-margin institution-name" style="margin-top: 5px; margin-bottom: 5px;">
+                <h2>{{ item.name || 'Instituição sem nome' }}</h2>
+              </IonLabel>
+              <div style="display: flex; min-height: 100%;">
+                <IonItemOption style="background-color: white;" @click="emits('update:see', { modal: true, data: item })">
+                  <div style="width: 40px; display: flex; justify-content: center;">
+                    <IonIcon color="tertiary" :icon="eye" size="large" />
+                  </div>
+                </IonItemOption>
+                <IonItemOption style="background-color: white;" @click="emits('update:edit', { modal: true, data: item })">
+                  <div style="width: 40px; display: flex; justify-content: center;">
+                    <IonIcon color="primary" :icon="pencilSharp" size="large" />
+                  </div>
+                </IonItemOption>
+                <IonItemOption style="background-color: white;" @click="emits('update:delete', { modal: true, data: item })">
+                  <div style="width: 40px; display: flex; justify-content: center;">
+                    <IonIcon color="danger" :icon="trashSharp" size="large" />
+                  </div>
+                </IonItemOption>
+              </div>
+            </IonItem>
+          </div>
+        </IonList>
+      </IonCardContent>
+    </div>
+  </IonCard>
+</template>
+
+<script setup lang="ts">
+import {
+  IonButton,
+  IonCard,
+  IonCardContent,
+  IonCardHeader,
+  IonCardTitle,
+  IonIcon,
+  IonItem,
+  IonItemOption,
+  IonItemOptions,
+  IonItemSliding,
+  IonLabel,
+  IonList,
+} from '@ionic/vue'
+import { arrowBack, arrowForward, businessOutline, eye, pencilSharp, trashSharp } from 'ionicons/icons'
+import { onMounted, onUnmounted, ref } from 'vue'
+
+interface Props {
+  dataList: {
+    id: string
+    name: string
+    address?: string | null
+    city?: string | null
+    state?: string | null
+    postalCode?: string | null
+    phone?: string | null
+    email?: string | null
+    createdAt?: string
+    updatedAt?: string | null
+    deletedAt?: string | null
+  }[]
+}
+
+const props = defineProps<Props>()
+const emits = defineEmits(['update:see', 'update:edit', 'update:delete'])
+
+const isOpen = ref<boolean[]>([])
+const itemSliding = ref<(InstanceType<typeof IonItemSliding> | null)[]>([])
+
+const innerWidth = ref(window.innerWidth)
+
+function updateInnerWidth() {
+  innerWidth.value = window.innerWidth
+}
+
+function handleSwipeOpened(index: number) {
+  isOpen.value[index] = true
+}
+
+function handleSwipeClosed(index: number) {
+  isOpen.value[index] = false
+}
+
+onMounted(() => {
+  window.addEventListener('resize', updateInnerWidth)
+  isOpen.value = Array.from<boolean>({ length: props.dataList.length }).fill(false)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', updateInnerWidth)
+})
+</script>
+
+<style scoped>
+.institution-name h2 {
+  font-size: 16px;
+  font-weight: 600;
+  margin-bottom: 5px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+}
+
+.institution-name p {
+  font-size: 14px;
+  color: var(--ion-color-medium);
+}
+</style>
diff --git a/src/modules/school-management/views/institution/RegisterInstitution.vue b/src/modules/school-management/views/institution/RegisterInstitution.vue
new file mode 100644
index 0000000..92b2acc
--- /dev/null
+++ b/src/modules/school-management/views/institution/RegisterInstitution.vue
@@ -0,0 +1,543 @@
+<script setup lang="ts">
+import showToast from '@/utils/toast-alert'
+import {
+  IonButton,
+  IonCol,
+  IonContent,
+  IonFooter,
+  IonGrid,
+  IonHeader,
+  IonPage,
+  IonRow,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/vue'
+import { ErrorMessage, Field, Form } from 'vee-validate'
+import { computed, onActivated, onMounted, ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import InstitutionService from '../../services/InstitutionService'
+
+const router = useRouter()
+const route = useRoute()
+const institutionService = new InstitutionService()
+const isSubmitting = ref(false)
+const isEditing = computed(() => !!route.params.id)
+const pageTitle = computed(() => isEditing.value ? 'Editar Instituição' : 'Nova Instituição')
+
+const initialFormValues = {
+  id: '',
+  name: '',
+  address: '',
+  city: '',
+  state: '',
+  postalCode: '',
+  phone: '',
+  email: '',
+}
+
+const formValues = ref({ ...initialFormValues })
+const originalFormValues = ref({ ...initialFormValues })
+const hasChanges = ref(false)
+
+const form = ref<any>(null)
+
+watch(
+  () => ({ ...formValues.value }),
+  () => {
+    if (isEditing.value) {
+      checkForChanges()
+    }
+  },
+  { deep: true, immediate: true },
+)
+
+onMounted(async () => {
+  if (isEditing.value) {
+    await loadInstitution()
+  }
+  else {
+    formValues.value = { ...initialFormValues }
+    originalFormValues.value = { ...initialFormValues }
+    hasChanges.value = false
+  }
+})
+
+onActivated(() => {
+  if (!isEditing.value) {
+    formValues.value = { ...initialFormValues }
+    originalFormValues.value = { ...initialFormValues }
+    hasChanges.value = false
+  }
+})
+
+async function buscarEndereco(cep: string) {
+  try {
+    const response = await fetch(`https://viacep.com.br/ws/${cep}/json/`)
+    const data = await response.json()
+    if (data.erro) {
+      throw new Error('CEP não encontrado')
+    }
+    return data
+  }
+  catch (error) {
+    console.error(error)
+    return null
+  }
+}
+
+watch(() => formValues.value.postalCode, async (novoCep, antigoCep) => {
+  if (!novoCep || novoCep !== antigoCep) {
+    formValues.value.address = ''
+    formValues.value.city = ''
+    formValues.value.state = ''
+
+    if (form.value) {
+      form.value.setFieldValue('address', '')
+      form.value.setFieldValue('city', '')
+      form.value.setFieldValue('state', '')
+    }
+  }
+
+  if (!novoCep)
+    return
+
+  const cepLimpo = String(novoCep).replace(/\D/g, '')
+  if (cepLimpo && cepLimpo.length === 8) {
+    const endereco = await buscarEndereco(cepLimpo)
+    if (endereco) {
+      formValues.value.address = endereco.logradouro || ''
+      formValues.value.city = endereco.localidade || ''
+      formValues.value.state = endereco.uf || ''
+
+      if (form.value) {
+        form.value.setFieldValue('address', endereco.logradouro || '')
+        form.value.setFieldValue('city', endereco.localidade || '')
+        form.value.setFieldValue('state', endereco.uf || '')
+      }
+    }
+  }
+})
+
+async function loadInstitution() {
+  try {
+    const id = route.params.id as string
+    const institution = await institutionService.getInstitutionById(id)
+    if (institution) {
+      const loadedValues = {
+        id: institution.id || '',
+        name: institution.name || '',
+        address: institution.address || '',
+        city: institution.city || '',
+        state: institution.state || '',
+        postalCode: institution.postalCode || '',
+        phone: institution.phone || '',
+        email: institution.email || '',
+      }
+
+      formValues.value = { ...loadedValues }
+      originalFormValues.value = { ...loadedValues }
+      hasChanges.value = false
+    }
+  }
+  catch (error) {
+    console.error('Erro ao carregar instituição:', error)
+    showToast('Erro ao carregar instituição', 'top', 'danger')
+  }
+}
+
+function checkForChanges() {
+  if (!isEditing.value)
+    return
+
+  const hasNameChanged = formValues.value.name !== originalFormValues.value.name
+  const hasAddressChanged = formValues.value.address !== originalFormValues.value.address
+  const hasCityChanged = formValues.value.city !== originalFormValues.value.city
+  const hasStateChanged = formValues.value.state !== originalFormValues.value.state
+  const hasPostalCodeChanged = formValues.value.postalCode !== originalFormValues.value.postalCode
+  const hasPhoneChanged = formValues.value.phone !== originalFormValues.value.phone
+  const hasEmailChanged = formValues.value.email !== originalFormValues.value.email
+
+  hasChanges.value = hasNameChanged || hasAddressChanged || hasCityChanged
+    || hasStateChanged || hasPostalCodeChanged || hasPhoneChanged
+    || hasEmailChanged
+}
+
+const saveButtonEnabled = computed(() => {
+  if (!isEditing.value) {
+    const anyFieldFilled = !!formValues.value.name || !!formValues.value.address
+      || !!formValues.value.city || !!formValues.value.state
+      || !!formValues.value.postalCode || !!formValues.value.phone
+      || !!formValues.value.email
+    return anyFieldFilled
+  }
+
+  return hasChanges.value
+})
+
+async function handleSubmit(values: any) {
+  isSubmitting.value = true
+
+  try {
+    const institutionData = {
+      id: isEditing.value ? route.params.id as string : undefined,
+      name: values.name.trim(),
+      address: values.address?.trim() || '',
+      city: values.city?.trim() || '',
+      state: values.state?.trim() || '',
+      postalCode: values.postalCode?.trim() || '',
+      phone: values.phone?.trim() || '',
+      email: values.email?.trim() || '',
+    }
+
+    await institutionService.upsertInstitution(institutionData)
+
+    showToast(
+      `Instituição ${isEditing.value ? 'atualizada' : 'cadastrada'} com sucesso!`,
+      'top',
+      'success',
+    )
+
+    resetForm()
+  }
+  catch (error) {
+    console.error('Erro ao salvar instituição:', error)
+    showToast('Erro ao salvar instituição', 'top', 'danger')
+  }
+  finally {
+    isSubmitting.value = false
+  }
+}
+
+function resetForm() {
+  router.push({
+    name: 'DashboardInstitution',
+    query: { refresh: Date.now().toString() },
+  })
+}
+</script>
+
+<template>
+  <IonPage>
+    <IonHeader>
+      <IonToolbar>
+        <IonTitle class="page-title">
+          {{ pageTitle }}
+        </IonTitle>
+      </IonToolbar>
+      <div class="toolbar-accent" />
+    </IonHeader>
+
+    <IonContent :scroll-y="true" class="ion-padding content-with-footer">
+      <Form id="institution-form" ref="form" :key="formValues.id || 'new'" :initial-values="formValues" @submit="handleSubmit">
+        <IonGrid>
+          <div class="section-header">
+            <h2>Informações Básicas</h2>
+          </div>
+
+          <IonRow>
+            <IonCol size="12" size-md="6">
+              <Field v-slot="{ field }" name="name" label="Nome da instituição" rules="required|min:3|max:100">
+                <div class="floating-input">
+                  <input
+                    v-bind="field"
+                    v-model="formValues.name"
+                    type="text"
+                    class="floating-native"
+                    maxlength="101"
+                    placeholder=" "
+                    @input="field.onInput"
+                  >
+                  <label class="floating-label"><span>Nome da instituição </span><span class="required-text">(Obrigatório)</span></label>
+                </div>
+                <ErrorMessage v-slot="{ message }" name="name">
+                  <div class="error-message">
+                    {{ message }}
+                  </div>
+                </ErrorMessage>
+              </Field>
+            </IonCol>
+          </IonRow>
+
+          <div class="section-header">
+            <h2>Endereço</h2>
+          </div>
+
+          <IonRow>
+            <IonCol size="12" size-md="6">
+              <Field v-slot="{ field }" name="postalCode" label="CEP" rules="required|cep">
+                <div class="floating-input">
+                  <input
+                    v-bind="field"
+                    v-model="formValues.postalCode"
+                    v-imask="{ mask: '00000-000' }"
+                    type="text"
+                    class="floating-native"
+                    placeholder=" "
+                    @input="field.onInput"
+                  >
+                  <label class="floating-label"><span>CEP </span><span class="required-text">(Obrigatório)</span></label>
+                </div>
+                <ErrorMessage v-slot="{ message }" name="postalCode">
+                  <div class="error-message">
+                    {{ message }}
+                  </div>
+                </ErrorMessage>
+              </Field>
+            </IonCol>
+            <IonCol size="12" size-md="6">
+              <Field v-slot="{ field }" name="address" label="Endereço" rules="max:255">
+                <div class="floating-input">
+                  <input
+                    v-bind="field"
+                    v-model="formValues.address"
+                    type="text"
+                    class="floating-native"
+                    maxlength="255"
+                    placeholder=" "
+                    @input="field.onInput"
+                  >
+                  <label class="floating-label"><span>Logradouro</span></label>
+                </div>
+                <ErrorMessage v-slot="{ message }" name="address">
+                  <div class="error-message">
+                    {{ message }}
+                  </div>
+                </ErrorMessage>
+              </Field>
+            </IonCol>
+          </IonRow>
+
+          <IonRow>
+            <IonCol size="12" size-md="6">
+              <Field v-slot="{ field }" name="city" label="Cidade" rules="max:100">
+                <div class="floating-input">
+                  <input
+                    v-bind="field"
+                    v-model="formValues.city"
+                    type="text"
+                    class="floating-native"
+                    maxlength="100"
+                    placeholder=" "
+                    @input="field.onInput"
+                  >
+                  <label class="floating-label"><span>Cidade</span></label>
+                </div>
+                <ErrorMessage v-slot="{ message }" name="city">
+                  <div class="error-message">
+                    {{ message }}
+                  </div>
+                </ErrorMessage>
+              </Field>
+            </IonCol>
+            <IonCol size="12" size-md="6">
+              <Field v-slot="{ field }" name="state" label="Estado" rules="max:2">
+                <div class="floating-input">
+                  <input
+                    v-bind="field"
+                    v-model="formValues.state"
+                    type="text"
+                    class="floating-native"
+                    maxlength="2"
+                    placeholder=" "
+                    @input="field.onInput"
+                  >
+                  <label class="floating-label"><span>UF</span></label>
+                </div>
+                <ErrorMessage v-slot="{ message }" name="state">
+                  <div class="error-message">
+                    {{ message }}
+                  </div>
+                </ErrorMessage>
+              </Field>
+            </IonCol>
+          </IonRow>
+
+          <div class="section-header">
+            <h2>Contato</h2>
+          </div>
+
+          <IonRow>
+            <IonCol size="12" size-md="6">
+              <Field v-slot="{ field }" name="phone" label="Telefone" rules="required|phone">
+                <div class="floating-input">
+                  <input
+                    v-bind="field"
+                    v-model="formValues.phone"
+                    v-imask="{ mask: '(00) 00000-0000' }"
+                    type="tel"
+                    class="floating-native"
+                    placeholder=" "
+                    @input="field.onInput"
+                  >
+                  <label class="floating-label"><span>Telefone </span><span class="required-text">(Obrigatório)</span></label>
+                </div>
+                <ErrorMessage v-slot="{ message }" name="phone">
+                  <div class="error-message">
+                    {{ message }}
+                  </div>
+                </ErrorMessage>
+              </Field>
+            </IonCol>
+            <IonCol size="12" size-md="6">
+              <Field v-slot="{ field }" name="email" label="E-mail" rules="email|max:100">
+                <div class="floating-input">
+                  <input
+                    v-bind="field"
+                    v-model="formValues.email"
+                    type="email"
+                    class="floating-native"
+                    maxlength="255"
+                    placeholder=" "
+                    @input="field.onInput"
+                  >
+                  <label class="floating-label"><span>E-mail</span></label>
+                </div>
+                <ErrorMessage v-slot="{ message }" name="email">
+                  <div class="error-message">
+                    {{ message }}
+                  </div>
+                </ErrorMessage>
+              </Field>
+            </IonCol>
+          </IonRow>
+        </IonGrid>
+      </Form>
+    </IonContent>
+
+    <IonFooter>
+      <IonToolbar>
+        <IonGrid>
+          <IonRow class="action-buttons-fixed">
+            <IonCol size="6">
+              <IonButton color="danger" expand="block" @click="resetForm">
+                Cancelar
+              </IonButton>
+            </IonCol>
+            <IonCol size="6">
+              <IonButton expand="block" type="submit" form="institution-form" :disabled="!saveButtonEnabled">
+                Salvar
+              </IonButton>
+            </IonCol>
+          </IonRow>
+        </IonGrid>
+      </IonToolbar>
+    </IonFooter>
+  </IonPage>
+</template>
+
+<style scoped>
+.page-title {
+  font-weight: bold;
+  color: var(--ion-color-secondary);
+}
+
+.section-header {
+  margin: 16px 0 8px 0;
+}
+
+.section-header h2 {
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--ion-color-secondary);
+  margin: 0;
+  border-bottom: 1px solid var(--ion-color-medium-shade);
+  padding-bottom: 8px;
+}
+
+.floating-input {
+  position: relative;
+  margin-bottom: 16px;
+  border: 1px solid var(--ion-color-primary);
+  border-radius: 4px;
+  margin-top: 24px;
+  height: 56px;
+}
+
+.floating-native {
+  width: 100%;
+  height: 100%;
+  padding: 0 16px;
+  border: none;
+  border-radius: 4px;
+  outline: none;
+  background: transparent;
+  font-size: 1rem;
+  color: var(--ion-color-dark-tint);
+  display: flex;
+  align-items: center;
+  transition: background-color 0.2s;
+}
+
+.floating-native:focus {
+  background-color: transparent;
+}
+
+.floating-input:focus-within {
+  border-color: var(--ion-color-secondary);
+  box-shadow: none;
+}
+
+.floating-label {
+  position: absolute;
+  top: 50%;
+  left: 16px;
+  transform: translateY(-50%);
+  background: white;
+  padding: 0 4px;
+  font-size: 1rem;
+  pointer-events: none;
+  transition: 0.2s ease all;
+  color: var(--ion-color-medium-shade);
+}
+
+.top-label {
+  top: 8px;
+  transform: translateY(0);
+}
+
+.floating-native::placeholder {
+  color: transparent;
+}
+
+.floating-native:focus ~ .floating-label,
+.floating-native:not(:placeholder-shown) ~ .floating-label {
+  top: -10px;
+  transform: translateY(0);
+  font-size: 0.75rem;
+  color: var(--ion-color-primary);
+  background: white;
+  padding: 0 4px;
+  z-index: 1;
+}
+
+.required-text {
+  color: var(--ion-color-danger);
+  font-size: 12px;
+}
+
+.error-message {
+  color: var(--ion-color-danger);
+  font-size: 0.8rem;
+  margin-top: 4px;
+  padding-left: 16px;
+}
+
+.select-input {
+  display: flex;
+  align-items: center;
+  padding: 0;
+}
+
+.content-with-footer {
+  --padding-bottom: 100px;
+}
+
+.toolbar-accent {
+  height: 4px;
+  background: var(--ion-color-primary);
+}
+
+.action-buttons-fixed {
+  padding: 8px;
+}
+</style>
diff --git a/src/modules/school-management/views/institution/RegisterInstitutionMobile.vue b/src/modules/school-management/views/institution/RegisterInstitutionMobile.vue
new file mode 100644
index 0000000..5843ddb
--- /dev/null
+++ b/src/modules/school-management/views/institution/RegisterInstitutionMobile.vue
@@ -0,0 +1,527 @@
+<script setup lang="ts">
+import {
+  IonButton,
+  IonCol,
+  IonContent,
+  IonGrid,
+  IonIcon,
+  IonInput,
+  IonPage,
+  IonRow,
+} from '@ionic/vue'
+import { businessOutline } from 'ionicons/icons'
+import { ErrorMessage, Field, Form } from 'vee-validate'
+import { computed, onMounted, ref, watch } from 'vue'
+import InstitutionService from '../../services/InstitutionService'
+
+const props = defineProps<{
+  editId?: string
+}>()
+
+const emits = defineEmits<{
+  (e: 'saved'): void
+  (e: 'cancel'): void
+  (e: 'error', message: string, color: 'primary' | 'secondary' | 'tertiary' | 'success' | 'warning' | 'danger' | 'light' | 'medium' | 'dark'): void
+  (e: 'success', message: string, color: 'primary' | 'secondary' | 'tertiary' | 'success' | 'warning' | 'danger' | 'light' | 'medium' | 'dark'): void
+}>()
+
+const form = ref<any>(null)
+
+const institutionService = new InstitutionService()
+
+const formValues = ref({
+  id: '',
+  name: '',
+  address: '',
+  city: '',
+  state: '',
+  postalCode: '',
+  phone: '',
+  email: '',
+})
+
+const originalFormValues = ref({
+  id: '',
+  name: '',
+  address: '',
+  city: '',
+  state: '',
+  postalCode: '',
+  phone: '',
+  email: '',
+})
+
+const hasChanges = ref(false)
+const isEditing = computed(() => Boolean(props.editId))
+const modalTitle = computed(() => isEditing.value ? 'Editar instituição' : 'Nova instituição')
+
+const saveButtonEnabled = computed(() => {
+  if (!isEditing.value) {
+    const enabled = !!formValues.value.name || !!formValues.value.address
+      || !!formValues.value.city || !!formValues.value.state
+      || !!formValues.value.postalCode || !!formValues.value.phone
+      || !!formValues.value.email
+    return enabled
+  }
+
+  return hasChanges.value
+})
+
+function checkForChanges() {
+  if (!isEditing.value)
+    return
+
+  const hasNameChanged = formValues.value.name !== originalFormValues.value.name
+  const hasAddressChanged = formValues.value.address !== originalFormValues.value.address
+  const hasCityChanged = formValues.value.city !== originalFormValues.value.city
+  const hasStateChanged = formValues.value.state !== originalFormValues.value.state
+  const hasPostalCodeChanged = formValues.value.postalCode !== originalFormValues.value.postalCode
+  const hasPhoneChanged = formValues.value.phone !== originalFormValues.value.phone
+  const hasEmailChanged = formValues.value.email !== originalFormValues.value.email
+
+  hasChanges.value = hasNameChanged || hasAddressChanged || hasCityChanged
+    || hasStateChanged || hasPostalCodeChanged || hasPhoneChanged
+    || hasEmailChanged
+}
+
+// Observar mudanças em todos os campos do formulário
+watch(
+  () => ({ ...formValues.value }),
+  () => {
+    if (isEditing.value) {
+      checkForChanges()
+    }
+  },
+  { deep: true },
+)
+
+// Observar especificamente mudanças no CEP
+watch(() => formValues.value.postalCode, async (novoCep, antigoCep) => {
+  if (!novoCep || novoCep !== antigoCep) {
+    formValues.value.address = ''
+    formValues.value.city = ''
+    formValues.value.state = ''
+
+    if (form.value) {
+      form.value.setFieldValue('address', '')
+      form.value.setFieldValue('city', '')
+      form.value.setFieldValue('state', '')
+    }
+  }
+
+  if (!novoCep)
+    return
+
+  const cepLimpo = String(novoCep).replace(/\D/g, '')
+  if (cepLimpo && cepLimpo.length === 8) {
+    const endereco = await buscarEndereco(cepLimpo)
+    if (endereco) {
+      formValues.value.address = endereco.logradouro || ''
+      formValues.value.city = endereco.localidade || ''
+      formValues.value.state = endereco.uf || ''
+
+      if (form.value) {
+        form.value.setFieldValue('address', endereco.logradouro || '')
+        form.value.setFieldValue('city', endereco.localidade || '')
+        form.value.setFieldValue('state', endereco.uf || '')
+      }
+    }
+  }
+}, { immediate: true })
+
+onMounted(async () => {
+  if (props.editId) {
+    await loadInstitution()
+  }
+})
+
+async function loadInstitution() {
+  try {
+    const institution = await institutionService.getInstitutionById(props.editId!)
+    if (institution) {
+      const loadedValues = {
+        id: institution.id || '',
+        name: institution.name || '',
+        address: institution.address || '',
+        city: institution.city || '',
+        state: institution.state || '',
+        postalCode: institution.postalCode || '',
+        phone: institution.phone || '',
+        email: institution.email || '',
+      }
+
+      formValues.value = { ...loadedValues }
+      originalFormValues.value = { ...loadedValues }
+      hasChanges.value = false
+    }
+  }
+  catch (error) {
+    console.error('Erro ao carregar instituição:', error)
+    emits('error', 'Erro ao carregar instituição', 'danger')
+  }
+}
+
+async function handleSubmit(values: any) {
+  try {
+    const institutionData = {
+      id: isEditing.value ? props.editId : undefined,
+      name: values.name.trim(),
+      address: values.address?.trim() || '',
+      city: values.city?.trim() || '',
+      state: values.state?.trim() || '',
+      postalCode: values.postalCode?.trim() || '',
+      phone: values.phone?.trim() || '',
+      email: values.email?.trim() || '',
+    }
+
+    await institutionService.upsertInstitution(institutionData)
+
+    emits('success', `Instituição ${isEditing.value ? 'atualizada' : 'cadastrada'} com sucesso!`, 'success')
+    handleSaved()
+  }
+  catch (error) {
+    console.error('Erro ao salvar instituição:', error)
+    emits('error', 'Erro ao salvar instituição', 'danger')
+  }
+}
+
+function handleCancel() {
+  emits('cancel')
+}
+
+function handleSaved() {
+  emits('saved')
+}
+
+async function buscarEndereco(cep: string) {
+  try {
+    const response = await fetch(`https://viacep.com.br/ws/${cep}/json/`)
+    const data = await response.json()
+    if (data.erro) {
+      throw new Error('CEP não encontrado')
+    }
+    return data
+  }
+  catch (error) {
+    console.error(error)
+    return null
+  }
+}
+
+function formatCEP(event: any) {
+  let value = event.target.value.replace(/\D/g, '')
+  if (value.length > 5) {
+    value = `${value.substring(0, 5)}-${value.substring(5)}`
+  }
+  formValues.value.postalCode = value.substring(0, 9)
+
+  // Acionar busca de CEP quando completar 8 dígitos
+  const cepLimpo = value.replace(/\D/g, '')
+  if (cepLimpo.length === 8) {
+    preencherEnderecoPorCEP(cepLimpo)
+  }
+}
+
+async function preencherEnderecoPorCEP(cepLimpo: string) {
+  const endereco = await buscarEndereco(cepLimpo)
+  if (endereco) {
+    formValues.value.address = endereco.logradouro || ''
+    formValues.value.city = endereco.localidade || ''
+    formValues.value.state = endereco.uf || ''
+
+    if (form.value) {
+      form.value.setFieldValue('address', endereco.logradouro || '')
+      form.value.setFieldValue('city', endereco.localidade || '')
+      form.value.setFieldValue('state', endereco.uf || '')
+    }
+  }
+}
+
+function formatPhone(event: any) {
+  let value = event.target.value.replace(/\D/g, '')
+  if (value.length > 2) {
+    value = `(${value.substring(0, 2)}) ${value.substring(2)}`
+  }
+  if (value.length > 10) {
+    value = `${value.substring(0, 10)}-${value.substring(10)}`
+  }
+  formValues.value.phone = value.substring(0, 16)
+}
+</script>
+
+<template>
+  <IonPage>
+    <IonContent class="ion-padding ion-no-padding">
+      <div class="style-purple-lane" style="display: flex; align-items: center;">
+        <IonIcon :icon="businessOutline" style="margin-right: 10px;" />
+        {{ modalTitle }}
+      </div>
+
+      <Form
+        id="institution-form-mobile"
+        ref="form"
+        :key="formValues.id || 'new'"
+        :initial-values="formValues"
+        @submit="handleSubmit"
+      >
+        <IonGrid>
+          <div class="section-header">
+            <h3>Informações Básicas</h3>
+          </div>
+
+          <IonRow>
+            <IonCol size="12">
+              <Field v-slot="{ field, errors }" name="name" label="Nome da instituição" rules="required|min:3|max:100">
+                <IonInput
+                  v-bind="field"
+                  v-model="formValues.name"
+                  label="Nome da instituição"
+                  label-placement="stacked"
+                  fill="outline"
+                  placeholder="Digite o nome da instituição"
+                  class="custom-input"
+                  :maxlength="101"
+                  :class="{ 'has-error': errors.length > 0 }"
+                  @ion-input="field.onInput"
+                />
+                <ErrorMessage v-slot="{ message }" name="name">
+                  <div class="error-message">
+                    {{ message }}
+                  </div>
+                </ErrorMessage>
+              </Field>
+            </IonCol>
+          </IonRow>
+
+          <div class="section-header">
+            <h3>Endereço</h3>
+          </div>
+
+          <IonRow>
+            <IonCol size="12">
+              <Field v-slot="{ field, errors }" name="postalCode" label="CEP" rules="required|cep">
+                <IonInput
+                  v-bind="field"
+                  v-model="formValues.postalCode"
+                  label="CEP"
+                  label-placement="stacked"
+                  fill="outline"
+                  placeholder="Digite o CEP (00000-000)"
+                  class="custom-input"
+                  :class="{ 'has-error': errors.length > 0 }"
+                  @ion-input="formatCEP"
+                />
+                <ErrorMessage v-slot="{ message }" name="postalCode">
+                  <div class="error-message">
+                    {{ message }}
+                  </div>
+                </ErrorMessage>
+              </Field>
+            </IonCol>
+          </IonRow>
+
+          <IonRow>
+            <IonCol size="12">
+              <Field v-slot="{ field }" name="address" label="Logradouro" rules="max:100">
+                <IonInput
+                  v-bind="field"
+                  v-model="formValues.address"
+                  label="Logradouro"
+                  label-placement="stacked"
+                  fill="outline"
+                  placeholder="Digite o logradouro"
+                  class="custom-input"
+                  :maxlength="101"
+                  @ion-input="field.onInput"
+                />
+                <ErrorMessage v-slot="{ message }" name="address">
+                  <div class="error-message">
+                    {{ message }}
+                  </div>
+                </ErrorMessage>
+              </Field>
+            </IonCol>
+          </IonRow>
+
+          <IonRow>
+            <IonCol size="12" size-md="8">
+              <Field v-slot="{ field }" name="city" label="Cidade" rules="max:100">
+                <IonInput
+                  v-bind="field"
+                  v-model="formValues.city"
+                  label="Cidade"
+                  label-placement="stacked"
+                  fill="outline"
+                  placeholder="Digite a cidade"
+                  class="custom-input"
+                  :maxlength="101"
+                  @ion-input="field.onInput"
+                />
+                <ErrorMessage v-slot="{ message }" name="city">
+                  <div class="error-message">
+                    {{ message }}
+                  </div>
+                </ErrorMessage>
+              </Field>
+            </IonCol>
+
+            <IonCol size="12" size-md="4">
+              <Field v-slot="{ field }" name="state" label="Estado" rules="max:2">
+                <IonInput
+                  v-bind="field"
+                  v-model="formValues.state"
+                  label="Estado"
+                  label-placement="stacked"
+                  fill="outline"
+                  placeholder="UF"
+                  class="custom-input"
+                  :maxlength="2"
+                  @ion-input="field.onInput"
+                />
+                <ErrorMessage v-slot="{ message }" name="state">
+                  <div class="error-message">
+                    {{ message }}
+                  </div>
+                </ErrorMessage>
+              </Field>
+            </IonCol>
+          </IonRow>
+
+          <div class="section-header">
+            <h3>Contato</h3>
+          </div>
+
+          <IonRow>
+            <IonCol size="12">
+              <Field v-slot="{ field, errors }" name="phone" label="Telefone" rules="required|phone">
+                <IonInput
+                  v-bind="field"
+                  v-model="formValues.phone"
+                  label="Telefone"
+                  label-placement="stacked"
+                  fill="outline"
+                  placeholder="Digite o telefone (00) 00000-0000"
+                  class="custom-input"
+                  :class="{ 'has-error': errors.length > 0 }"
+                  @ion-input="formatPhone"
+                />
+                <ErrorMessage v-slot="{ message }" name="phone">
+                  <div class="error-message">
+                    {{ message }}
+                  </div>
+                </ErrorMessage>
+              </Field>
+            </IonCol>
+          </IonRow>
+
+          <IonRow>
+            <IonCol size="12">
+              <Field v-slot="{ field, errors }" name="email" label="E-mail" rules="email|max:100">
+                <IonInput
+                  v-bind="field"
+                  v-model="formValues.email"
+                  label="E-mail"
+                  label-placement="stacked"
+                  fill="outline"
+                  placeholder="Digite o e-mail"
+                  class="custom-input"
+                  :maxlength="25"
+                  :class="{ 'has-error': errors.length > 0 }"
+                  @ion-input="field.onInput"
+                />
+                <ErrorMessage v-slot="{ message }" name="email">
+                  <div class="error-message">
+                    {{ message }}
+                  </div>
+                </ErrorMessage>
+              </Field>
+            </IonCol>
+          </IonRow>
+        </IonGrid>
+      </Form>
+    </IonContent>
+
+    <div>
+      <IonGrid>
+        <IonRow>
+          <IonCol size="6">
+            <IonButton color="danger" expand="block" @click="handleCancel()">
+              Cancelar
+            </IonButton>
+          </IonCol>
+          <IonCol size="6">
+            <IonButton expand="block" type="submit" form="institution-form-mobile" :disabled="!saveButtonEnabled">
+              Salvar
+            </IonButton>
+          </IonCol>
+        </IonRow>
+      </IonGrid>
+    </div>
+  </IonPage>
+</template>
+
+<style scoped>
+.style-purple-lane {
+  background: rgba(var(--ion-color-secondary-rgb), 0.15);
+  color: var(--ion-color-secondary);
+  padding: 2px;
+  margin: 8px 2px;
+  border-radius: 4px;
+}
+
+.section-header {
+  padding: 4px 0;
+  margin-top: 8px;
+  margin-bottom: 0;
+}
+
+.section-header h3 {
+  color: var(--ion-color-primary);
+  margin: 4px 0;
+  font-size: 14px;
+  font-weight: bold;
+}
+
+.custom-input {
+  margin-bottom: 15px;
+}
+
+.has-error {
+  --border-color: var(--ion-color-danger) !important;
+}
+
+.error-message {
+  color: var(--ion-color-danger);
+  font-size: 12px;
+  margin-top: -12px;
+  margin-bottom: 10px;
+  padding-left: 16px;
+}
+
+ion-content {
+  --padding-bottom: 80px;
+}
+
+.fixed-footer {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  background: white;
+  box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.05);
+  z-index: 999;
+  padding: 0;
+  margin: 0;
+}
+
+.footer-grid {
+  padding: 0;
+  margin: 0;
+}
+
+.footer-button {
+  margin: 0;
+  --border-radius: 0;
+  height: 50px;
+}
+</style>
diff --git a/src/utils/imasks.ts b/src/utils/imasks.ts
index c54fae5..6b6b2bb 100644
--- a/src/utils/imasks.ts
+++ b/src/utils/imasks.ts
@@ -3,12 +3,22 @@ import IMask from 'imask'
 
 export default {
   mounted(el: HTMLElement, binding: DirectiveBinding) {
+    if (el.tagName === 'INPUT') {
+      IMask(el, binding.value)
+      return
+    }
+
     const htmlInput = el.querySelector('input')
     if (htmlInput) {
       IMask(htmlInput, binding.value)
     }
   },
   updated(el: HTMLElement, binding: DirectiveBinding) {
+    if (el.tagName === 'INPUT') {
+      IMask(el, binding.value)
+      return
+    }
+
     const htmlInput = el.querySelector('input')
     if (htmlInput) {
       IMask(htmlInput, binding.value)