diff --git a/components/layout/full/Main.vue b/components/layout/full/Main.vue
index b81a1a2..9b769ca 100644
--- a/components/layout/full/Main.vue
+++ b/components/layout/full/Main.vue
@@ -5,8 +5,15 @@ import sidebarItems from "~/components/layout/full/vertical-sidebar/sidebarItem"
 import Customizer from "~/components/layout/full/customizer/Customizer.vue";
 import { Menu2Icon } from "vue-tabler-icons";
 import { useCustomizerStore } from "~/store/customizer";
+import { usePendaftaranStore } from "~/store/pendaftaran";
+import { storeToRefs } from 'pinia';
+
 const sidebarMenu = shallowRef(sidebarItems);
 const customizer = useCustomizerStore();
+const pendaftaranStore = usePendaftaranStore();
+
+const { snackbar, snackbarMessage, snackbarColor } = storeToRefs(pendaftaranStore);
+
 const { mdAndDown } = useDisplay();
 const sDrawer = ref(true);
 onMounted(() => {
@@ -66,6 +73,24 @@ watch(mdAndDown, (val) => {
           <p class="text-caption textSecondary">&copy; 2026 RSUD Dr. Saiful Anwar Provinsi Jawa Timur. All rights reserved.</p>
         </v-container>
       </v-main>
+
+      <!-- Global Snackbar -->
+      <v-snackbar
+        v-model="snackbar"
+        :color="snackbarColor"
+        :timeout="3000"
+        location="top"
+      >
+        {{ snackbarMessage }}
+        <template #actions>
+          <v-btn
+            variant="text"
+            @click="pendaftaranStore.closeSnackbar()"
+          >
+            Close
+          </v-btn>
+        </template>
+      </v-snackbar>
     </v-app>
   </v-locale-provider>
 </template>
diff --git a/components/pendaftaran/RencanaOperasi.vue b/components/pendaftaran/RencanaOperasi.vue
index d566131..8a86f4e 100644
--- a/components/pendaftaran/RencanaOperasi.vue
+++ b/components/pendaftaran/RencanaOperasi.vue
@@ -59,7 +59,7 @@ const kategoriOperasiOptions = computed(() => {
 const fetchSubSpesialis = async (idSpesialis: number) => {
     try {
         isLoadingSubSpesialis.value = true;
-        const response = await api.get(`/sub-spesialis?id_spesialis=${idSpesialis}`);
+        const response = await api.get(`/reference/sub-spesialis?id_spesialis=${idSpesialis}`);
         
         if (response.data.success && response.data.data) {
             subSpesialisList.value = response.data.data;
@@ -86,7 +86,7 @@ watch(() => rencanaOperasiData.value.spesialis, (newSpesialis) => {
 const fetchSpesialis = async () => {
     try {
         isLoadingSpesialis.value = true;
-        const response = await api.get('/spesialis');
+        const response = await api.get('/reference/spesialis');
         
         if (response.data.success && response.data.data) {
             spesialisList.value = response.data.data;
@@ -103,7 +103,7 @@ const fetchSpesialis = async () => {
 const fetchKategoriOperasi = async () => {
     try {
         isLoadingKategori.value = true;
-        const response = await api.get('/kategori');
+        const response = await api.get('/reference/kategori');
         
         if (response.data.success && response.data.data) {
             kategoriOperasiList.value = response.data.data;
@@ -145,7 +145,7 @@ const fetchDokter = async () => {
             offset: offset.toString()
         });
         
-        const response = await api.get(`/dokter?${params}`);
+        const response = await api.get(`/reference/dokter?${params}`);
         
         if (response.data.success && response.data.data) {
             dokterList.value = response.data.data;
diff --git a/components/pendaftaran/TableAntrian.vue b/components/pendaftaran/TableAntrian.vue
index ee458f8..0c81ef2 100644
--- a/components/pendaftaran/TableAntrian.vue
+++ b/components/pendaftaran/TableAntrian.vue
@@ -72,78 +72,143 @@ watch(itemsPerPageLocal, (newVal) => {
 </script>
 
 <template>
-    <div class="table-wrapper">
-        <v-data-table-server
-            :headers="headers"
-            :items="items"
-            :items-length="serverSide ? totalItems : 0"
-            v-model:page="page"
-            v-model:items-per-page="itemsPerPageLocal"
-            :search="serverSide ? undefined : search"
-            class="elevation-1"
-            item-value="id"
-        >
-            <!-- Pass through all slots to parent -->
-            <template v-for="(_, name) in $slots" v-slot:[name]="slotData">
-                <slot :name="name" v-bind="slotData" />
-            </template>
-            
-            <!-- Default slot for Jenis Kelamin if not provided -->
-            <template #item.JenisKelamin="{ item }">
-                <slot name="item.JenisKelamin" :item="item">
-                    <v-chip
-                        :color="item.JenisKelamin === 'L' ? 'primary' : 'error'"
-                        size="small"
-                    >
-                        {{ item.JenisKelamin }}
-                    </v-chip>
-                </slot>
-            </template>
-
-            <!-- Default slot for Status if not provided -->
-            <template #item.StatusOperasi="{ item }">
-                <slot name="item.StatusOperasi" :item="item">
-                    <v-chip
-                        :color="getStatusColor(item.StatusOperasi)"
-                        size="small"
-                    >
-                        {{ getStatusText(item.StatusOperasi) }}
-                    </v-chip>
-                </slot>
-            </template>
-
-            <!-- Action slot if enabled -->
-            <template v-if="actions && actions.length > 0" #item.actions="{ item }">
-                <slot name="item.actions" :item="item">
-                    <div class="d-flex ga-2">
-                        <v-btn
-                            v-for="(action, index) in actions"
-                            :key="index"
-                            icon
+    <div class="table-container">
+        <div class="table-wrapper">
+            <v-data-table-server
+                :headers="headers"
+                :items="items"
+                :items-length="serverSide ? totalItems : 0"
+                v-model:page="page"
+                v-model:items-per-page="itemsPerPageLocal"
+                :search="serverSide ? undefined : search"
+                class="elevation-1"
+                item-value="id"
+                hide-default-footer
+            >
+                <!-- Pass through all slots to parent -->
+                <template v-for="(_, name) in $slots" v-slot:[name]="slotData">
+                    <slot :name="name" v-bind="slotData" />
+                </template>
+                
+                <!-- Default slot for Jenis Kelamin if not provided -->
+                <template #item.JenisKelamin="{ item }">
+                    <slot name="item.JenisKelamin" :item="item">
+                        <v-chip
+                            :color="item.JenisKelamin === 'L' ? 'primary' : 'error'"
                             size="small"
-                            variant="text"
-                            :color="action.color || 'primary'"
-                            @click="handleAction(action.event, item)"
                         >
-                            <v-icon>{{ action.icon }}</v-icon>
-                            <v-tooltip v-if="action.tooltip" activator="parent" location="top">
-                                {{ action.tooltip }}
-                            </v-tooltip>
-                        </v-btn>
-                    </div>
-                </slot>
-            </template>
-        </v-data-table-server>
+                            {{ item.JenisKelamin }}
+                        </v-chip>
+                    </slot>
+                </template>
+
+                <!-- Default slot for Status if not provided -->
+                <template #item.StatusOperasi="{ item }">
+                    <slot name="item.StatusOperasi" :item="item">
+                        <v-chip
+                            :color="getStatusColor(item.StatusOperasi)"
+                            size="small"
+                        >
+                            {{ getStatusText(item.StatusOperasi) }}
+                        </v-chip>
+                    </slot>
+                </template>
+
+                <!-- Action slot if enabled -->
+                <template v-if="actions && actions.length > 0" #item.actions="{ item }">
+                    <slot name="item.actions" :item="item">
+                        <div class="d-flex ga-2">
+                            <v-btn
+                                v-for="(action, index) in actions"
+                                :key="index"
+                                icon
+                                size="small"
+                                variant="text"
+                                :color="action.color || 'primary'"
+                                @click="handleAction(action.event, item)"
+                            >
+                                <v-icon>{{ action.icon }}</v-icon>
+                                <v-tooltip v-if="action.tooltip" activator="parent" location="top">
+                                    {{ action.tooltip }}
+                                </v-tooltip>
+                            </v-btn>
+                        </div>
+                    </slot>
+                </template>
+            </v-data-table-server>
+        </div>
+        
+        <!-- Custom pagination footer - fixed and on the left -->
+        <div class="pagination-footer">
+            <div class="pagination-info">
+                <span class="text-caption">
+                    Showing {{ ((page - 1) * itemsPerPageLocal) + 1 }} to {{ Math.min(page * itemsPerPageLocal, serverSide ? totalItems : items.length) }} of {{ serverSide ? totalItems : items.length }} entries
+                </span>
+            </div>
+            <div class="pagination-controls">
+                <v-select
+                    v-model="itemsPerPageLocal"
+                    :items="[10, 25, 50, 100]"
+                    density="compact"
+                    variant="outlined"
+                    hide-details
+                    style="max-width: 100px;"
+                    label="Rows"
+                ></v-select>
+                <v-pagination
+                    v-model="page"
+                    :length="Math.ceil((serverSide ? totalItems : items.length) / itemsPerPageLocal)"
+                    :total-visible="5"
+                    density="comfortable"
+                ></v-pagination>
+            </div>
+        </div>
     </div>
 </template>
 
 <style scoped>
+.table-container {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
 .table-wrapper {
     overflow-x: auto;
     width: 100%;
+    margin-bottom: 16px;
 }
 
 .table-wrapper :deep(.v-data-table) {
     min-width: v-bind(minWidth);
 }
+
+.pagination-footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 12px 16px;
+    border-top: 1px solid rgba(0, 0, 0, 0.12);
+    background-color: white;
+    position: sticky;
+    left: 0;
+    right: 0;
+}
+
+.pagination-info {
+    flex-shrink: 0;
+}
+
+.pagination-controls {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    flex-wrap: wrap;
+}
+
+/* Dark theme support */
+:deep(.v-theme--dark) .pagination-footer {
+    border-top-color: rgba(255, 255, 255, 0.12);
+    background-color: rgb(30, 30, 30);
+}
 </style>
diff --git a/config.ts b/config.ts
index 062e7ec..9274c18 100644
--- a/config.ts
+++ b/config.ts
@@ -1,4 +1,4 @@
-import {CYAN_THEME} from "~/theme/LightTheme";
+import {RSSA_THEME} from "~/theme/LightTheme";
 
 export type ConfigProps = {
     Sidebar_drawer: any;
@@ -17,7 +17,7 @@ const config: ConfigProps = {
     mini_sidebar: false,
     setHorizontalLayout: false, // Horizontal layout
     setRTLLayout: false, // RTL layout
-    actTheme: 'BLUE_THEME',
+    actTheme: 'RSSA_THEME',
     boxed: true,
     setBorderCard: false
 };
diff --git a/data/users.db b/data/users.db
index 45f6817..20722f7 100644
Binary files a/data/users.db and b/data/users.db differ
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 6c431d8..1c3cc76 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -100,7 +100,7 @@ export default defineNuxtConfig({
       // authUrl: process.env.AUTH_ORIGIN || "http://10.10.150.175:3001",
       // authUrl: process.env.AUTH_ORIGIN || "http://localhost:3001",
       wsBaseUrl: process.env.WS_BASE_URL || 'ws://10.10.150.100:8084/api/v1/ws',
-      baseUrl: process.env.BASE_URL || 'http://localhost:8080/api',
+      baseUrl: process.env.BASE_URL || 'http://10.10.150.144:8080/api',
       baseUrlGomed: process.env.BASE_URL_GOMED || 'https://gomed.rssa.my.id/api',
     },
   },
diff --git a/pages/antrean/kategori/[id].vue b/pages/antrean/kategori/[id].vue
index 53b20b2..0912c79 100644
--- a/pages/antrean/kategori/[id].vue
+++ b/pages/antrean/kategori/[id].vue
@@ -22,7 +22,7 @@ const totalItems = ref(0);
 const fetchKategoriInfo = async () => {
     try {
         isLoadingKategori.value = true;
-        const response = await api.get('/kategori');
+        const response = await api.get('/reference/kategori');
         
         if (response.data.success && response.data.data) {
             kategoriInfo.value = response.data.data.find((k: KategoriOperasi) => k.id === parseInt(idKategori));
diff --git a/pages/antrean/list-kategori.vue b/pages/antrean/list-kategori.vue
index eb50ea9..a0e465a 100644
--- a/pages/antrean/list-kategori.vue
+++ b/pages/antrean/list-kategori.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import BaseBreadcrumb from '@/components/shared/BaseBreadcrumb.vue';
 import api from '~/services/api';
-import type { KategoriOperasi } from '~/types/antrean';
+import type { AntreanKategoriOperasi } from '~/types/antrean';
 
 definePageMeta({
   middleware: 'auth'
@@ -21,14 +21,14 @@ const breadcrumbs = ref([
     }
 ]);
 
-const kategoriOperasiList = ref<KategoriOperasi[]>([]);
+const kategoriOperasiList = ref<AntreanKategoriOperasi[]>([]);
 const isLoadingKategori = ref(false);
 
 // Fetch kategori operasi from API
 const fetchKategoriOperasi = async () => {
     try {
         isLoadingKategori.value = true;
-        const response = await api.get('/kategori');
+        const response = await api.get('/dashboard/antrian-per-kategori');
         
         if (response.data.success && response.data.data) {
             kategoriOperasiList.value = response.data.data;
@@ -45,10 +45,6 @@ onMounted(() => {
     fetchKategoriOperasi();
 });
 
-// Function to count antrian by kategori operasi id (static for now)
-const countAntreanByKategori = (idKategoriOperasi: number) => {
-    return 0; // Static count for now
-};
 
 </script>
 <template>
@@ -72,18 +68,18 @@ const countAntreanByKategori = (idKategoriOperasi: number) => {
         <!-- Kategori Cards -->
         <v-col 
             v-for="kategori in kategoriOperasiList" 
-            :key="kategori.id"
+            :key="kategori.id_kategori"
             cols="12"
             md="4"
         >
             <v-card elevation="10" class="h-100">
-                <NuxtLink :to="`/antrean/kategori/${kategori.id}`" style="text-decoration: none; color: inherit;">
+                <NuxtLink :to="`/antrean/kategori/${kategori.id_kategori}`" style="text-decoration: none; color: inherit;">
                     <v-card-item style="cursor: pointer;" class="v-card-item--link">
                         <div class="d-flex align-center justify-space-between">
                             <h5 class="text-h6 font-weight-bold">{{ kategori.kategori }}</h5>
                             <v-icon size="large" color="primary">mdi-chevron-right</v-icon>
                         </div>
-                        <v-chip class="mt-3 mb-0"  color="primary" size="small">{{ countAntreanByKategori(kategori.id) }} Antrean</v-chip>
+                        <v-chip class="mt-3 mb-0"  color="primary" size="small">{{ kategori.jumlah_antrean}} Antrean</v-chip>
                     </v-card-item>
                 </NuxtLink>
             </v-card>
diff --git a/pages/antrean/pendaftaran.vue b/pages/antrean/pendaftaran.vue
index c04ced6..a02811c 100644
--- a/pages/antrean/pendaftaran.vue
+++ b/pages/antrean/pendaftaran.vue
@@ -24,10 +24,7 @@ const {
     rencanaOperasiData,
     dokterPelaksanaItems,
     statusPasienData,
-    loading,
-    snackbar,
-    snackbarMessage,
-    snackbarColor
+    loading
 } = storeToRefs(pendaftaranStore);
 
 const form = ref();
@@ -126,8 +123,8 @@ const handleSimpan = async () => {
         const result = await pendaftaranStore.submitForm();
         
         if (result.success) {
-            // Navigate back or to list page
-            // router.push('/antrean/list');
+            // Navigate back immediately, snackbar will persist due to global state
+            router.back();
         }
     } else {
         // Validate using store method
@@ -236,22 +233,4 @@ const handleKembali = () => {
         </v-col>
         </v-row>
     </v-form>
-
-    <!-- Snackbar for notifications -->
-    <v-snackbar
-        v-model="snackbar"
-        :color="snackbarColor"
-        :timeout="3000"
-        location="top"
-    >
-        {{ snackbarMessage }}
-        <template #actions>
-            <v-btn
-                variant="text"
-                @click="pendaftaranStore.closeSnackbar()"
-            >
-                Close
-            </v-btn>
-        </template>
-    </v-snackbar>
 </template>
\ No newline at end of file
diff --git a/plugins/vuetify.ts b/plugins/vuetify.ts
index 697ae0f..3134517 100644
--- a/plugins/vuetify.ts
+++ b/plugins/vuetify.ts
@@ -8,6 +8,7 @@ import "@mdi/font/css/materialdesignicons.css";
 import "~/scss/style.scss";
 import {
   BLUE_THEME,
+  RSSA_THEME,
   AQUA_THEME,
   PURPLE_THEME,
   GREEN_THEME,
@@ -27,8 +28,9 @@ export default defineNuxtPlugin((nuxtApp) => {
     components,
     directives,
     theme: {
-      defaultTheme: "BLUE_THEME",
+      defaultTheme: "RSSA_THEME",
       themes: {
+        RSSA_THEME,
         BLUE_THEME,
         AQUA_THEME,
         PURPLE_THEME,
diff --git a/theme/LightTheme.ts b/theme/LightTheme.ts
index bb754fa..cec4de6 100644
--- a/theme/LightTheme.ts
+++ b/theme/LightTheme.ts
@@ -210,4 +210,39 @@ const ORANGE_THEME: ThemeTypes = {
     }
 };
 
-export { BLUE_THEME, AQUA_THEME, ORANGE_THEME, PURPLE_THEME, GREEN_THEME, CYAN_THEME };
+const RSSA_THEME: ThemeTypes = {
+    name: 'RSSA_THEME',
+    dark: false,
+    variables: {
+        'border-color': '#e0e6eb',
+        'border-opacity': 1
+    },
+    colors: {
+        primary: '#4C71CF',
+        secondary: '#F06D02',
+        info: '#3B82F6',
+        success: '#10B981',
+        warning: '#FFAE1F',
+        error: '#EF4444',
+        lightprimary: '#B7C6EC',
+        lightsecondary: '#F9C59A',
+        lightsuccess: '#9FE3CD',
+        lighterror: '#F9B4B4',
+        lightinfo: '#B1CDFB',
+        lightwarning: '#FEF5E5',
+        textPrimary: '#29343D',
+        textSecondary: '#6B7F93',
+        borderColor: '#e0e6eb',
+        containerBg: '#ffffff',
+        background: '#F4F7FB',
+        hoverColor: '#f6f9fc',
+        surface: '#fff',
+        grey100: '#F6F7F9',
+        grey200: '#29343d',
+        darkgray: '#0a2540',
+        light: '#EFF4FA',
+        muted:'#6B7F93'
+    }
+};
+
+export { BLUE_THEME, AQUA_THEME, ORANGE_THEME, PURPLE_THEME, GREEN_THEME, CYAN_THEME, RSSA_THEME };
diff --git a/types/antrean.ts b/types/antrean.ts
index f76d969..8c56778 100644
--- a/types/antrean.ts
+++ b/types/antrean.ts
@@ -40,3 +40,9 @@ export interface KategoriOperasi {
     id: number;
     kategori: string;
 }
+
+export interface AntreanKategoriOperasi {
+    id_kategori: number;
+    kategori: string;
+    jumlah_antrean: number;
+}