diff --git a/backend/app/Api/User/Ticket/Create.php b/backend/app/Api/User/Ticket/Create.php
index ffd5929..fa5ba91 100755
--- a/backend/app/Api/User/Ticket/Create.php
+++ b/backend/app/Api/User/Ticket/Create.php
@@ -48,12 +48,14 @@
     if (isset($_POST['department_id']) && $_POST['department_id'] != '') {
         $departmentId = $_POST['department_id'];
         if (Departments::exists((int) $departmentId)) {
+            /**
+             * Make that every info needed is provided.
+             */
             if (isset($_POST['service_id']) && $_POST['service_id'] != '') {
                 $serviceId = $_POST['service_id'];
             } else {
                 $serviceId = null;
             }
-
             if (isset($_POST['subject']) && $_POST['subject'] != '') {
                 $subject = $_POST['subject'];
             } else {
@@ -73,8 +75,19 @@
             }
 
             // TODO: Check if service exists
-            // TODO: Limit to 3 open tickets user
-
+            /**
+             * Check if the user has more than 3 open tickets.
+             */
+            $userTickets = Tickets::getAllTicketsByUser($session->getInfo(UserColumns::UUID, false), 150);
+            $openTickets = array_filter($userTickets, function ($ticket) {
+                return in_array($ticket['status'], ['open', 'waiting', 'replied', 'inprogress']);
+            });
+            if (count($openTickets) >= 3) {
+                $appInstance->BadRequest('You have reached the limit of 3 open tickets!', ['error_code' => 'LIMIT_REACHED']);
+            }
+            /**
+             * Create the ticket.
+             */
             $ticketId = Tickets::create($session->getInfo(UserColumns::UUID, false), $departmentId, $serviceId, $subject, $message, $priority);
             if ($ticketId == 0) {
                 $appInstance->BadRequest('Failed to create ticket!', ['error_code' => 'FAILED_TO_CREATE_TICKET']);
diff --git a/backend/app/Api/User/Ticket/List.php b/backend/app/Api/User/Ticket/List.php
new file mode 100755
index 0000000..ac3c09a
--- /dev/null
+++ b/backend/app/Api/User/Ticket/List.php
@@ -0,0 +1,31 @@
+<?php
+
+/*
+ * This file is part of MythicalClient.
+ * Please view the LICENSE file that was distributed with this source code.
+ *
+ * # MythicalSystems License v2.0
+ *
+ * ## Copyright (c) 2021–2025 MythicalSystems and Cassian Gherman
+ *
+ * Breaking any of the following rules will result in a permanent ban from the MythicalSystems community and all of its services.
+ */
+
+use MythicalClient\App;
+use MythicalClient\Chat\Session;
+use MythicalClient\Chat\Tickets;
+use MythicalClient\Chat\columns\UserColumns;
+
+$router->get('/api/user/ticket/list', function () {
+    App::init();
+    $appInstance = App::getInstance(true);
+    $appInstance->allowOnlyGET();
+    $s = new Session($appInstance);
+
+    $tickets = Tickets::getAllTicketsByUser($s->getInfo(UserColumns::UUID, false), 150);
+
+    $appInstance->OK('Tickets', [
+        'tickets' => $tickets,
+    ]);
+
+});
diff --git a/backend/app/Chat/Departments.php b/backend/app/Chat/Departments.php
index 80e5f58..f65ab72 100755
--- a/backend/app/Chat/Departments.php
+++ b/backend/app/Chat/Departments.php
@@ -47,7 +47,7 @@ public static function update(
         string $close,
     ): void {
         try {
-            if (self::exists($id)) {
+            if (!self::exists($id)) {
                 App::getInstance(true)->getLogger()->warning('Department does not exist but tried to update it.', true);
 
                 return;
@@ -72,7 +72,7 @@ public static function exists(int $id): bool
             $con = self::getPdoConnection();
             $sql = 'SELECT id FROM ' . self::TABLE_NAME . ' WHERE id = :id';
             $stmt = $con->prepare($sql);
-            $stmt->bindParam(':id', $id);
+            $stmt->bindParam(':id', $id, \PDO::PARAM_INT);
             $stmt->execute();
 
             return $stmt->rowCount() > 0;
@@ -86,8 +86,8 @@ public static function exists(int $id): bool
     public static function delete(int $id): bool
     {
         try {
-            if (self::exists($id)) {
-                App::getInstance(true)->getLogger()->warning('Department does not exist but tried to update it.', true);
+            if (!self::exists($id)) {
+                App::getInstance(true)->getLogger()->warning('Department does not exist but tried to delete it.', true);
 
                 return false;
             }
@@ -124,8 +124,8 @@ public static function getAll(): array
     public static function get(int $id): array
     {
         try {
-            if (self::exists($id)) {
-                App::getInstance(true)->getLogger()->warning('Department does not exist but tried to update it.', true);
+            if (!self::exists($id)) {
+                App::getInstance(true)->getLogger()->warning('Department does not exist but tried to get it: ' . $id . '.', true);
 
                 return [];
             }
diff --git a/backend/app/Chat/Tickets.php b/backend/app/Chat/Tickets.php
index 00843c1..b985fdb 100755
--- a/backend/app/Chat/Tickets.php
+++ b/backend/app/Chat/Tickets.php
@@ -96,6 +96,44 @@ public static function getAllTickets(int $limit = 150): array
         }
     }
 
+    public static function getAllTicketsByUser(string $uuid, int $limit = 150): array
+    {
+        try {
+            $con = self::getPdoConnection();
+            $sql = 'SELECT * FROM ' . self::TABLE_NAME . ' WHERE user = :uuid ORDER BY id DESC LIMIT ' . $limit;
+            $stmt = $con->prepare($sql);
+            $stmt->bindParam('uuid', $uuid, \PDO::PARAM_STR);
+            $stmt->execute();
+
+            $tickets = $stmt->fetchAll(\PDO::FETCH_ASSOC);
+
+            foreach ($tickets as $key => $ticket) {
+                $tickets[$key]['department_id'] = $ticket['department'];
+                $tickets[$key]['department'] = Departments::get((int) $ticket['department']);
+
+                if (empty($tickets[$key]['department'])) {
+                    $tickets[$key]['department'] = [
+                        'id' => 0,
+                        'name' => 'Deleted Department',
+                        'description' => 'This department has been deleted.',
+                        'time_open' => '08:30',
+                        'time_close' => '17:30',
+                        'enabled' => 'true',
+                        'deleted' => 'false',
+                        'locked' => 'false',
+                        'date' => '2024-12-25 22:25:09',
+                    ];
+                }
+            }
+
+            return $tickets;
+        } catch (\Exception $e) {
+            self::db_Error('Failed to get all tickets by user: ' . $e->getMessage());
+
+            return [];
+        }
+    }
+
     public static function getTicket(int $id): array
     {
         try {
diff --git a/backend/storage/migrations/2025-01-21-12.50-add-status-tickets.sql b/backend/storage/migrations/2025-01-21-12.50-add-status-tickets.sql
new file mode 100755
index 0000000..d6077b4
--- /dev/null
+++ b/backend/storage/migrations/2025-01-21-12.50-add-status-tickets.sql
@@ -0,0 +1 @@
+ALTER TABLE `mythicalclient_tickets` ADD `status` ENUM('open','closed','waiting','replied','inprogress') NOT NULL DEFAULT 'open' AFTER `priority`;
\ No newline at end of file
diff --git a/frontend/src/components/client/Dashboard/Main/Announcements.vue b/frontend/src/components/client/Dashboard/Main/Announcements.vue
index 0c23479..63d308f 100755
--- a/frontend/src/components/client/Dashboard/Main/Announcements.vue
+++ b/frontend/src/components/client/Dashboard/Main/Announcements.vue
@@ -1,343 +1,392 @@
 <script setup lang="ts">
-import { ref, nextTick, onMounted, onUnmounted } from 'vue'
-import { XIcon, ChevronLeftIcon, ChevronRightIcon } from 'lucide-vue-next'
-import Announcements from '@/mythicalclient/Announcements'
-import { useI18n } from 'vue-i18n'
+import { ref, nextTick, onMounted, onUnmounted } from 'vue';
+import { XIcon, ChevronLeftIcon, ChevronRightIcon } from 'lucide-vue-next';
+import Announcements from '@/mythicalclient/Announcements';
+import { useI18n } from 'vue-i18n';
 const { t } = useI18n();
 
 interface Announcement {
-  id: number;
-  title: string;
-  shortDescription: string;
-  description: string;
-  images: string[];
-  date: Date;
-  tags: string[];
+    id: number;
+    title: string;
+    shortDescription: string;
+    description: string;
+    images: string[];
+    date: Date;
+    tags: string[];
 }
 
 const announcements = ref<Announcement[]>([]);
 const loading = ref(true);
 
 const fetchAnnouncements = async () => {
-  try {
-    const data = await Announcements.fetchAnnouncements();
-    announcements.value = data.map((item: { id: number; title: string; shortDescription: string; description: string; assets: { images: string[] }[]; date: string; tags: { tag: string }[] }) => ({
-      id: item.id,
-      title: item.title,
-      shortDescription: item.shortDescription,
-      description: item.description,
-      images: item.assets.map((asset: { images: string[] }) => asset.images),
-      date: new Date(item.date),
-      tags: item.tags.map((tag: { tag: string }) => tag.tag)
-    }));
-
-  } catch (err) {
-    console.error('Error captured:', err);
-    return false;
-  } finally {
-    loading.value = false;
-  }
+    try {
+        const data = await Announcements.fetchAnnouncements();
+        announcements.value = data.map(
+            (item: {
+                id: number;
+                title: string;
+                shortDescription: string;
+                description: string;
+                assets: { images: string[] }[];
+                date: string;
+                tags: { tag: string }[];
+            }) => ({
+                id: item.id,
+                title: item.title,
+                shortDescription: item.shortDescription,
+                description: item.description,
+                images: item.assets.map((asset: { images: string[] }) => asset.images),
+                date: new Date(item.date),
+                tags: item.tags.map((tag: { tag: string }) => tag.tag),
+            }),
+        );
+    } catch (err) {
+        console.error('Error captured:', err);
+        return false;
+    } finally {
+        loading.value = false;
+    }
 };
 
 onMounted(() => {
-  fetchAnnouncements();
+    fetchAnnouncements();
 });
 
 // Modal state and other functions remain the same
-const isModalOpen = ref(false)
-const isModalMounted = ref(false)
-const selectedAnnouncement = ref<Announcement | null>(null)
-const currentImageIndex = ref(0)
-const scrollContainer = ref<HTMLElement | null>(null)
+const isModalOpen = ref(false);
+const isModalMounted = ref(false);
+const selectedAnnouncement = ref<Announcement | null>(null);
+const currentImageIndex = ref(0);
+const scrollContainer = ref<HTMLElement | null>(null);
 
 // Utility functions
 function formatDate(date: Date | null): string {
-  if (!date) return ''
-
-  const now = new Date()
-  const diff = now.getTime() - date.getTime()
-  const minutes = Math.floor(diff / (1000 * 60))
-  const hours = Math.floor(diff / (1000 * 60 * 60))
-  const days = Math.floor(diff / (1000 * 60 * 60 * 24))
-
-  if (minutes < 60) return `${minutes}m ago`
-  if (hours < 24) return `${hours}h ago`
-  if (days === 0) return 'Today'
-  if (days === 1) return 'Yesterday'
-  if (days < 7) return `${days} days ago`
-  if (days < 30) return `${Math.floor(days / 7)} weeks ago`
-
-  return date.toLocaleDateString('en-US', {
-    year: 'numeric',
-    month: 'short',
-    day: 'numeric'
-  })
+    if (!date) return '';
+
+    const now = new Date();
+    const diff = now.getTime() - date.getTime();
+    const minutes = Math.floor(diff / (1000 * 60));
+    const hours = Math.floor(diff / (1000 * 60 * 60));
+    const days = Math.floor(diff / (1000 * 60 * 60 * 24));
+
+    if (minutes < 60) return `${minutes}m ago`;
+    if (hours < 24) return `${hours}h ago`;
+    if (days === 0) return 'Today';
+    if (days === 1) return 'Yesterday';
+    if (days < 7) return `${days} days ago`;
+    if (days < 30) return `${Math.floor(days / 7)} weeks ago`;
+
+    return date.toLocaleDateString('en-US', {
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric',
+    });
 }
 
 // Scroll functions
 function scroll(direction: 'left' | 'right') {
-  if (!scrollContainer.value) return
-
-  const scrollAmount = 400 // Width of one card
-  const currentScroll = scrollContainer.value.scrollLeft
-  const targetScroll = direction === 'left'
-    ? currentScroll - scrollAmount
-    : currentScroll + scrollAmount
-
-  scrollContainer.value.scrollTo({
-    left: targetScroll,
-    behavior: 'smooth'
-  })
+    if (!scrollContainer.value) return;
+
+    const scrollAmount = 400; // Width of one card
+    const currentScroll = scrollContainer.value.scrollLeft;
+    const targetScroll = direction === 'left' ? currentScroll - scrollAmount : currentScroll + scrollAmount;
+
+    scrollContainer.value.scrollTo({
+        left: targetScroll,
+        behavior: 'smooth',
+    });
 }
 
 function scrollToEnd() {
-  if (!scrollContainer.value) return
-  scrollContainer.value.scrollTo({
-    left: scrollContainer.value.scrollWidth,
-    behavior: 'smooth'
-  })
+    if (!scrollContainer.value) return;
+    scrollContainer.value.scrollTo({
+        left: scrollContainer.value.scrollWidth,
+        behavior: 'smooth',
+    });
 }
 
 // Modal functions
 async function openAnnouncement(announcement: Announcement) {
-  selectedAnnouncement.value = announcement
-  currentImageIndex.value = 0 // Reset image index
-  isModalOpen.value = true
-  await nextTick()
-  isModalMounted.value = true
+    selectedAnnouncement.value = announcement;
+    currentImageIndex.value = 0; // Reset image index
+    isModalOpen.value = true;
+    await nextTick();
+    isModalMounted.value = true;
 }
 
 function closeModal() {
-  isModalMounted.value = false
-  setTimeout(() => {
-    isModalOpen.value = false
-    selectedAnnouncement.value = null
-  }, 300)
+    isModalMounted.value = false;
+    setTimeout(() => {
+        isModalOpen.value = false;
+        selectedAnnouncement.value = null;
+    }, 300);
 }
 
 // Keyboard event listener
 function handleEscKey(e: KeyboardEvent) {
-  if (e.key === 'Escape' && isModalOpen.value) {
-    closeModal()
-  }
+    if (e.key === 'Escape' && isModalOpen.value) {
+        closeModal();
+    }
 }
 
 onMounted(() => {
-  document.addEventListener('keydown', handleEscKey)
-})
+    document.addEventListener('keydown', handleEscKey);
+});
 
 onUnmounted(() => {
-  document.removeEventListener('keydown', handleEscKey)
-})
+    document.removeEventListener('keydown', handleEscKey);
+});
 </script>
 <template>
-  <div class="space-y-6">
-    <div class="flex items-center justify-between mb-6">
-      <h2 class="text-2xl font-semibold text-white">{{ t('Components.Announcements.Title') }}</h2>
-      <button @click="scrollToEnd" class="text-[#a855f7] hover:text-[#9333ea] transition-colors duration-200 text-sm">
-        {{ t('Components.Announcements.Card.ReadMore') }}
-      </button>
-    </div>
-
-    <!-- Loading spinner -->
-    <div v-if="loading" class="flex justify-center items-center h-64">
-      <div class="loader"></div>
-    </div>
+    <div class="space-y-6">
+        <div class="flex items-center justify-between mb-6">
+            <h2 class="text-2xl font-semibold text-white">{{ t('Components.Announcements.Title') }}</h2>
+            <button
+                @click="scrollToEnd"
+                class="text-[#a855f7] hover:text-[#9333ea] transition-colors duration-200 text-sm"
+            >
+                {{ t('Components.Announcements.Card.ReadMore') }}
+            </button>
+        </div>
 
-    <!-- Horizontal scrolling container -->
-    <div v-else class="relative group">
-      <div ref="scrollContainer" class="flex space-x-6 overflow-x-auto pb-4 snap-x snap-mandatory scrollbar-hide">
-        <div v-for="announcement in announcements" :key="announcement.id"
-          class="flex-none w-[400px] snap-start group/card bg-gray-900/50 backdrop-blur-sm border border-gray-700/50 rounded-xl overflow-hidden transition-all duration-300 hover:border-[#a855f7]/50">
-
-          <!-- Image container -->
-          <div class="aspect-video relative overflow-hidden">
-            <img :src="announcement.images[0]" :alt="announcement.title"
-              class="w-full h-full object-cover transition-transform duration-300 group-hover/card:scale-105" />
-          </div>
-
-          <!-- Content -->
-          <div class="p-6 space-y-4">
-            <div class="space-y-2">
-              <div class="flex items-center justify-between">
-                <h3
-                  class="text-lg font-semibold text-white group-hover/card:text-[#a855f7] transition-colors duration-300">
-                  {{ announcement.title }}
-                </h3>
-                <span class="text-xs text-gray-400">
-                  {{ formatDate(announcement.date) }}
-                </span>
-              </div>
-              <p class="text-gray-400 text-sm line-clamp-2">
-                {{ announcement.shortDescription }}
-              </p>
-            </div>
+        <!-- Loading spinner -->
+        <div v-if="loading" class="flex justify-center items-center h-64">
+            <div class="loader"></div>
+        </div>
 
-            <!-- Tags -->
-            <div class="flex flex-wrap gap-2">
-              <span v-for="tag in announcement.tags" :key="tag"
-                class="px-2 py-1 rounded-md text-xs bg-gray-800 text-gray-300">
-                {{ tag }}
-              </span>
+        <!-- Horizontal scrolling container -->
+        <div v-else class="relative group">
+            <div ref="scrollContainer" class="flex space-x-6 overflow-x-auto pb-4 snap-x snap-mandatory scrollbar-hide">
+                <div
+                    v-for="announcement in announcements"
+                    :key="announcement.id"
+                    class="flex-none w-[400px] snap-start group/card bg-gray-900/50 backdrop-blur-sm border border-gray-700/50 rounded-xl overflow-hidden transition-all duration-300 hover:border-[#a855f7]/50"
+                >
+                    <!-- Image container -->
+                    <div class="aspect-video relative overflow-hidden">
+                        <img
+                            :src="announcement.images[0]"
+                            :alt="announcement.title"
+                            class="w-full h-full object-cover transition-transform duration-300 group-hover/card:scale-105"
+                        />
+                    </div>
+
+                    <!-- Content -->
+                    <div class="p-6 space-y-4">
+                        <div class="space-y-2">
+                            <div class="flex items-center justify-between">
+                                <h3
+                                    class="text-lg font-semibold text-white group-hover/card:text-[#a855f7] transition-colors duration-300"
+                                >
+                                    {{ announcement.title }}
+                                </h3>
+                                <span class="text-xs text-gray-400">
+                                    {{ formatDate(announcement.date) }}
+                                </span>
+                            </div>
+                            <p class="text-gray-400 text-sm line-clamp-2">
+                                {{ announcement.shortDescription }}
+                            </p>
+                        </div>
+
+                        <!-- Tags -->
+                        <div class="flex flex-wrap gap-2">
+                            <span
+                                v-for="tag in announcement.tags"
+                                :key="tag"
+                                class="px-2 py-1 rounded-md text-xs bg-gray-800 text-gray-300"
+                            >
+                                {{ tag }}
+                            </span>
+                        </div>
+
+                        <button
+                            @click="openAnnouncement(announcement)"
+                            class="mt-4 block w-full px-4 py-2 bg-purple-600 hover:bg-purple-500 text-white rounded transition-colors text-center text-sm"
+                        >
+                            {{ t('Components.Announcements.Card.ReadMore') }}
+                        </button>
+                    </div>
+                </div>
             </div>
 
-            <button @click="openAnnouncement(announcement)"
-              class="mt-4 block w-full px-4 py-2 bg-purple-600 hover:bg-purple-500 text-white rounded transition-colors text-center text-sm">
-              {{ t('Components.Announcements.Card.ReadMore') }}
+            <!-- Scroll buttons -->
+            <button
+                @click="scroll('left')"
+                class="absolute left-0 top-1/2 -translate-y-1/2 -translate-x-4 opacity-0 group-hover:opacity-100 group-hover:translate-x-2 transition-all duration-300 p-2 rounded-full bg-gray-900/90 text-white hover:bg-gray-800"
+            >
+                <ChevronLeftIcon class="w-6 h-6" />
+            </button>
+            <button
+                @click="scroll('right')"
+                class="absolute right-0 top-1/2 -translate-y-1/2 translate-x-4 opacity-0 group-hover:opacity-100 group-hover:-translate-x-2 transition-all duration-300 p-2 rounded-full bg-gray-900/90 text-white hover:bg-gray-800"
+            >
+                <ChevronRightIcon class="w-6 h-6" />
             </button>
-          </div>
         </div>
-      </div>
-
-      <!-- Scroll buttons -->
-      <button @click="scroll('left')"
-        class="absolute left-0 top-1/2 -translate-y-1/2 -translate-x-4 opacity-0 group-hover:opacity-100 group-hover:translate-x-2 transition-all duration-300 p-2 rounded-full bg-gray-900/90 text-white hover:bg-gray-800">
-        <ChevronLeftIcon class="w-6 h-6" />
-      </button>
-      <button @click="scroll('right')"
-        class="absolute right-0 top-1/2 -translate-y-1/2 translate-x-4 opacity-0 group-hover:opacity-100 group-hover:-translate-x-2 transition-all duration-300 p-2 rounded-full bg-gray-900/90 text-white hover:bg-gray-800">
-        <ChevronRightIcon class="w-6 h-6" />
-      </button>
     </div>
-  </div>
-
-  <!-- Enhanced Modal -->
-  <Teleport to="body">
-    <div v-if="isModalOpen" class="fixed inset-0 z-50 flex items-center justify-center p-4" @click="closeModal">
-      <div class="fixed inset-0 bg-black/70 backdrop-blur-sm transition-opacity"
-        :class="{ 'opacity-0': !isModalMounted, 'opacity-100': isModalMounted }">
-      </div>
-
-      <div
-        class="relative w-full max-w-3xl max-h-[90vh] bg-[#12121f] rounded-xl overflow-hidden shadow-xl transform transition-all"
-        :class="{ 'opacity-0 scale-95': !isModalMounted, 'opacity-100 scale-100': isModalMounted }" @click.stop>
-
-        <button @click="closeModal"
-          class="absolute top-4 right-4 z-10 p-2 rounded-full bg-black/50 text-white hover:bg-black/70 transition-colors duration-300">
-          <XIcon class="w-5 h-5" />
-        </button>
-
-        <div class="overflow-y-auto h-full max-h-[90vh]">
-          <div v-if="selectedAnnouncement" class="relative">
-            <!-- Image carousel -->
-            <div class="relative aspect-video">
-              <div class="flex transition-transform duration-300 ease-out"
-                :style="{ transform: `translateX(-${currentImageIndex * 100}%)` }">
-                <img v-for="(image, index) in selectedAnnouncement.images" :key="index" :src="image"
-                  :alt="`${selectedAnnouncement.title} - Image ${index + 1}`"
-                  class="w-full h-full object-cover flex-shrink-0" />
-              </div>
-
-              <!-- Image navigation -->
-              <div v-if="selectedAnnouncement.images.length > 1"
-                class="absolute bottom-4 left-1/2 -translate-x-1/2 flex space-x-2">
-                <button v-for="(_, index) in selectedAnnouncement.images" :key="index"
-                  @click="currentImageIndex = index" class="w-2 h-2 rounded-full transition-colors duration-200"
-                  :class="index === currentImageIndex ? 'bg-white' : 'bg-white/50'">
-                </button>
-              </div>
-
-              <!-- Arrow navigation -->
-              <button v-if="selectedAnnouncement.images.length > 1 && currentImageIndex > 0"
-                @click="currentImageIndex--"
-                class="absolute left-4 top-1/2 -translate-y-1/2 p-2 rounded-full bg-black/50 text-white hover:bg-black/70 transition-colors duration-200">
-                <ChevronLeftIcon class="w-5 h-5" />
-              </button>
-              <button
-                v-if="selectedAnnouncement.images.length > 1 && currentImageIndex < selectedAnnouncement.images.length - 1"
-                @click="currentImageIndex++"
-                class="absolute right-4 top-1/2 -translate-y-1/2 p-2 rounded-full bg-black/50 text-white hover:bg-black/70 transition-colors duration-200">
-                <ChevronRightIcon class="w-5 h-5" />
-              </button>
-            </div>
 
-            <div class="p-8 space-y-6">
-              <div class="space-y-4">
-                <div class="flex items-center justify-between">
-                  <h3 class="text-3xl font-bold text-white">
-                    {{ selectedAnnouncement.title }}
-                  </h3>
-                  <span class="text-sm text-gray-400">
-                    {{ formatDate(selectedAnnouncement.date) }}
-                  </span>
-                </div>
+    <!-- Enhanced Modal -->
+    <Teleport to="body">
+        <div v-if="isModalOpen" class="fixed inset-0 z-50 flex items-center justify-center p-4" @click="closeModal">
+            <div
+                class="fixed inset-0 bg-black/70 backdrop-blur-sm transition-opacity"
+                :class="{ 'opacity-0': !isModalMounted, 'opacity-100': isModalMounted }"
+            ></div>
+
+            <div
+                class="relative w-full max-w-3xl max-h-[90vh] bg-[#12121f] rounded-xl overflow-hidden shadow-xl transform transition-all"
+                :class="{ 'opacity-0 scale-95': !isModalMounted, 'opacity-100 scale-100': isModalMounted }"
+                @click.stop
+            >
+                <button
+                    @click="closeModal"
+                    class="absolute top-4 right-4 z-10 p-2 rounded-full bg-black/50 text-white hover:bg-black/70 transition-colors duration-300"
+                >
+                    <XIcon class="w-5 h-5" />
+                </button>
 
-                <!-- Tags -->
-                <div class="flex flex-wrap gap-2">
-                  <span v-for="tag in selectedAnnouncement.tags" :key="tag"
-                    class="px-3 py-1 rounded-full text-sm bg-gray-800 text-gray-300">
-                    {{ tag }}
-                  </span>
+                <div class="overflow-y-auto h-full max-h-[90vh]">
+                    <div v-if="selectedAnnouncement" class="relative">
+                        <!-- Image carousel -->
+                        <div class="relative aspect-video">
+                            <div
+                                class="flex transition-transform duration-300 ease-out"
+                                :style="{ transform: `translateX(-${currentImageIndex * 100}%)` }"
+                            >
+                                <img
+                                    v-for="(image, index) in selectedAnnouncement.images"
+                                    :key="index"
+                                    :src="image"
+                                    :alt="`${selectedAnnouncement.title} - Image ${index + 1}`"
+                                    class="w-full h-full object-cover flex-shrink-0"
+                                />
+                            </div>
+
+                            <!-- Image navigation -->
+                            <div
+                                v-if="selectedAnnouncement.images.length > 1"
+                                class="absolute bottom-4 left-1/2 -translate-x-1/2 flex space-x-2"
+                            >
+                                <button
+                                    v-for="(_, index) in selectedAnnouncement.images"
+                                    :key="index"
+                                    @click="currentImageIndex = index"
+                                    class="w-2 h-2 rounded-full transition-colors duration-200"
+                                    :class="index === currentImageIndex ? 'bg-white' : 'bg-white/50'"
+                                ></button>
+                            </div>
+
+                            <!-- Arrow navigation -->
+                            <button
+                                v-if="selectedAnnouncement.images.length > 1 && currentImageIndex > 0"
+                                @click="currentImageIndex--"
+                                class="absolute left-4 top-1/2 -translate-y-1/2 p-2 rounded-full bg-black/50 text-white hover:bg-black/70 transition-colors duration-200"
+                            >
+                                <ChevronLeftIcon class="w-5 h-5" />
+                            </button>
+                            <button
+                                v-if="
+                                    selectedAnnouncement.images.length > 1 &&
+                                    currentImageIndex < selectedAnnouncement.images.length - 1
+                                "
+                                @click="currentImageIndex++"
+                                class="absolute right-4 top-1/2 -translate-y-1/2 p-2 rounded-full bg-black/50 text-white hover:bg-black/70 transition-colors duration-200"
+                            >
+                                <ChevronRightIcon class="w-5 h-5" />
+                            </button>
+                        </div>
+
+                        <div class="p-8 space-y-6">
+                            <div class="space-y-4">
+                                <div class="flex items-center justify-between">
+                                    <h3 class="text-3xl font-bold text-white">
+                                        {{ selectedAnnouncement.title }}
+                                    </h3>
+                                    <span class="text-sm text-gray-400">
+                                        {{ formatDate(selectedAnnouncement.date) }}
+                                    </span>
+                                </div>
+
+                                <!-- Tags -->
+                                <div class="flex flex-wrap gap-2">
+                                    <span
+                                        v-for="tag in selectedAnnouncement.tags"
+                                        :key="tag"
+                                        class="px-3 py-1 rounded-full text-sm bg-gray-800 text-gray-300"
+                                    >
+                                        {{ tag }}
+                                    </span>
+                                </div>
+                            </div>
+
+                            <!-- Full description -->
+                            <div class="prose prose-invert prose-lg max-w-none">
+                                <p class="text-gray-300 whitespace-pre-line leading-relaxed">
+                                    {{ selectedAnnouncement.description }}
+                                </p>
+                            </div>
+                        </div>
+                    </div>
                 </div>
-              </div>
-
-              <!-- Full description -->
-              <div class="prose prose-invert prose-lg max-w-none">
-                <p class="text-gray-300 whitespace-pre-line leading-relaxed">
-                  {{ selectedAnnouncement.description }}
-                </p>
-              </div>
             </div>
-          </div>
         </div>
-      </div>
-    </div>
-  </Teleport>
+    </Teleport>
 </template>
 <style scoped>
 .scrollbar-hide {
-  -ms-overflow-style: none;
-  scrollbar-width: none;
+    -ms-overflow-style: none;
+    scrollbar-width: none;
 }
 
 .scrollbar-hide::-webkit-scrollbar {
-  display: none;
+    display: none;
 }
 
 .line-clamp-2 {
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  line-clamp: 2;
-  /* Standard property */
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    line-clamp: 2;
+    /* Standard property */
 }
 
 /* Smooth transition for hover effects */
 .transition-all {
-  transition-property: all;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 300ms;
+    transition-property: all;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 300ms;
 }
 
 /* Hide scrollbar for all elements */
 * {
-  scrollbar-width: none;
-  /* Firefox */
+    scrollbar-width: none;
+    /* Firefox */
 }
 
 *::-webkit-scrollbar {
-  display: none;
-  /* WebKit */
+    display: none;
+    /* WebKit */
 }
 
 /* Loader styles */
 .loader {
-  border: 4px solid rgba(255, 255, 255, 0.3);
-  border-left-color: #ffffff;
-  border-radius: 50%;
-  width: 40px;
-  height: 40px;
-  animation: spin 1s linear infinite;
+    border: 4px solid rgba(255, 255, 255, 0.3);
+    border-left-color: #ffffff;
+    border-radius: 50%;
+    width: 40px;
+    height: 40px;
+    animation: spin 1s linear infinite;
 }
 
 @keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
+    0% {
+        transform: rotate(0deg);
+    }
 
-  100% {
-    transform: rotate(360deg);
-  }
+    100% {
+        transform: rotate(360deg);
+    }
 }
 </style>
diff --git a/frontend/src/components/client/Dashboard/Main/BillingInfo.vue b/frontend/src/components/client/Dashboard/Main/BillingInfo.vue
index 4a784a2..7216495 100755
--- a/frontend/src/components/client/Dashboard/Main/BillingInfo.vue
+++ b/frontend/src/components/client/Dashboard/Main/BillingInfo.vue
@@ -1,27 +1,28 @@
 <template>
-  <CardComponent>
-    <h2 class="text-white text-lg font-semibold mb-4">Billing Summary</h2>
-    <div class="space-y-2 text-sm">
-      <div class="flex justify-between">
-        <span class="text-purple-200">Current Balance:</span>
-        <span class="text-white font-medium">$250.00</span>
-      </div>
-      <div class="flex justify-between">
-        <span class="text-purple-200">Next Invoice:</span>
-        <span class="text-white font-medium">$120.00</span>
-      </div>
-      <div class="flex justify-between">
-        <span class="text-purple-200">Due Date:</span>
-        <span class="text-white font-medium">15 Jul 2023</span>
-      </div>
-    </div>
-    <RouterLink to="/billing"
-      class="mt-4 block w-full px-4 py-2 bg-purple-600 hover:bg-purple-500 text-white rounded transition-colors text-center text-sm">
-      View Invoices
-    </RouterLink>
-  </CardComponent>
+    <CardComponent>
+        <h2 class="text-white text-lg font-semibold mb-4">Billing Summary</h2>
+        <div class="space-y-2 text-sm">
+            <div class="flex justify-between">
+                <span class="text-purple-200">Current Balance:</span>
+                <span class="text-white font-medium">$250.00</span>
+            </div>
+            <div class="flex justify-between">
+                <span class="text-purple-200">Next Invoice:</span>
+                <span class="text-white font-medium">$120.00</span>
+            </div>
+            <div class="flex justify-between">
+                <span class="text-purple-200">Due Date:</span>
+                <span class="text-white font-medium">15 Jul 2023</span>
+            </div>
+        </div>
+        <RouterLink
+            to="/billing"
+            class="mt-4 block w-full px-4 py-2 bg-purple-600 hover:bg-purple-500 text-white rounded transition-colors text-center text-sm"
+        >
+            View Invoices
+        </RouterLink>
+    </CardComponent>
 </template>
 <script lang="ts" setup>
 import CardComponent from '@/components/client/ui/Card/CardComponent.vue';
-
 </script>
diff --git a/frontend/src/components/client/Dashboard/Main/Header.vue b/frontend/src/components/client/Dashboard/Main/Header.vue
index a60d289..b204b11 100755
--- a/frontend/src/components/client/Dashboard/Main/Header.vue
+++ b/frontend/src/components/client/Dashboard/Main/Header.vue
@@ -1,25 +1,26 @@
 <template>
-  <div class="flex justify-between items-center">
-    <div>
-      <h1 class="text-3xl font-bold text-white mb-2">My Dashboard</h1>
-      <div class="text-purple-200 text-sm">
-        <RouterLink to="/" class="hover:text-white transition-colors">Portal Home</RouterLink>
-        <span class="mx-2">/</span>
-        <span>Client Area</span>
-      </div>
+    <div class="flex justify-between items-center">
+        <div>
+            <h1 class="text-3xl font-bold text-white mb-2">My Dashboard</h1>
+            <div class="text-purple-200 text-sm">
+                <RouterLink to="/" class="hover:text-white transition-colors">Portal Home</RouterLink>
+                <span class="mx-2">/</span>
+                <span>Client Area</span>
+            </div>
+        </div>
+        <div class="flex items-center space-x-4">
+            <div class="text-right">
+                <p class="text-purple-200 text-sm">Welcome back,</p>
+                <p class="text-white font-semibold">{{ Session.getInfo('first_name') }}</p>
+            </div>
+            <img
+                :src="`${Session.getInfo('avatar')}?height=40&width=40`"
+                alt="Profile"
+                class="w-10 h-10 rounded-full border-2 border-purple-500"
+            />
+        </div>
     </div>
-    <div class="flex items-center space-x-4">
-      <div class="text-right">
-        <p class="text-purple-200 text-sm">Welcome back,</p>
-        <p class="text-white font-semibold">{{ Session.getInfo('first_name') }}</p>
-      </div>
-      <img :src="`${Session.getInfo('avatar')}?height=40&width=40`" alt="Profile"
-        class="w-10 h-10 rounded-full border-2 border-purple-500" />
-    </div>
-  </div>
 </template>
 <script setup lang="ts">
 import Session from '@/mythicalclient/Session';
-
-
 </script>
diff --git a/frontend/src/components/client/Dashboard/Main/ProductList.vue b/frontend/src/components/client/Dashboard/Main/ProductList.vue
index 30b59ba..fc4f024 100755
--- a/frontend/src/components/client/Dashboard/Main/ProductList.vue
+++ b/frontend/src/components/client/Dashboard/Main/ProductList.vue
@@ -1,31 +1,34 @@
 <template>
-<CardComponent>
-  <div class="flex items-center justify-between mb-4">
-    <h2 class="text-lg font-semibold text-white">Your Active Products/Services</h2>
-    <button class="text-purple-500 hover:text-white transition-colors">
-      <MenuIcon class="w-5 h-5" />
-    </button>
-  </div>
-  <div class="space-y-4">
-    <div v-for="(server, index) in servers" :key="index"
-      class="flex items-center justify-between py-3 border-b border-purple-700 last:border-0">
-      <div>
-        <div class="font-medium text-white">{{ server.name }}</div>
-        <div class="text-sm text-purple-500">{{ server.hostname }}</div>
-      </div>
-      <div class="flex items-center gap-3">
-        <span class="px-2 py-1 bg-emerald-500/20 text-emerald-400 rounded text-xs font-medium">
-          Active
-        </span>
-        <button
-          class="px-3 py-1 bg-purple-600 hover:bg-purple-500 text-white rounded transition-colors text-sm">
-          Manage
-        </button>
-      </div>
-    </div>
-  </div>
-</CardComponent>
-
+    <CardComponent>
+        <div class="flex items-center justify-between mb-4">
+            <h2 class="text-lg font-semibold text-white">Your Active Products/Services</h2>
+            <button class="text-purple-500 hover:text-white transition-colors">
+                <MenuIcon class="w-5 h-5" />
+            </button>
+        </div>
+        <div class="space-y-4">
+            <div
+                v-for="(server, index) in servers"
+                :key="index"
+                class="flex items-center justify-between py-3 border-b border-purple-700 last:border-0"
+            >
+                <div>
+                    <div class="font-medium text-white">{{ server.name }}</div>
+                    <div class="text-sm text-purple-500">{{ server.hostname }}</div>
+                </div>
+                <div class="flex items-center gap-3">
+                    <span class="px-2 py-1 bg-emerald-500/20 text-emerald-400 rounded text-xs font-medium">
+                        Active
+                    </span>
+                    <button
+                        class="px-3 py-1 bg-purple-600 hover:bg-purple-500 text-white rounded transition-colors text-sm"
+                    >
+                        Manage
+                    </button>
+                </div>
+            </div>
+        </div>
+    </CardComponent>
 </template>
 <script setup lang="ts">
 import CardComponent from '@/components/client/ui/Card/CardComponent.vue';
@@ -33,13 +36,13 @@ import { ref } from 'vue';
 import { MenuIcon } from 'lucide-vue-next';
 
 const servers = ref([
-  {
-    name: 'Storage Root Server Frankfurt - Storage KVM S',
-    hostname: 'backup2.mythical.systems',
-  },
-  {
-    name: 'Storage Root Server Frankfurt - Storage KVM S',
-    hostname: 'backup.mythical.systems',
-  },
+    {
+        name: 'Storage Root Server Frankfurt - Storage KVM S',
+        hostname: 'backup2.mythical.systems',
+    },
+    {
+        name: 'Storage Root Server Frankfurt - Storage KVM S',
+        hostname: 'backup.mythical.systems',
+    },
 ]);
 </script>
diff --git a/frontend/src/components/client/Dashboard/Main/Stats.vue b/frontend/src/components/client/Dashboard/Main/Stats.vue
index 41f140b..ad9a92b 100755
--- a/frontend/src/components/client/Dashboard/Main/Stats.vue
+++ b/frontend/src/components/client/Dashboard/Main/Stats.vue
@@ -1,22 +1,18 @@
 <template>
-  <div class="grid grid-cols-3 gap-4">
-    <CardComponent v-for="(stat, index) in stats" :key="index">
-      <component :is="stat.icon" class="w-6 h-6 text-purple-500 mb-2" />
-      <div class="text-3xl font-bold text-white mb-1">{{ stat.value }}</div>
-      <div class="text-purple-200 text-sm">{{ stat.label }}</div>
-    </CardComponent>
-  </div>
+    <div class="grid grid-cols-3 gap-4">
+        <CardComponent v-for="(stat, index) in stats" :key="index">
+            <component :is="stat.icon" class="w-6 h-6 text-purple-500 mb-2" />
+            <div class="text-3xl font-bold text-white mb-1">{{ stat.value }}</div>
+            <div class="text-purple-200 text-sm">{{ stat.label }}</div>
+        </CardComponent>
+    </div>
 </template>
 <script lang="ts" setup>
 import CardComponent from '@/components/client/ui/Card/CardComponent.vue';
-import {
-  Server as ServerIcon,
-  FileText as FileTextIcon,
-  Ticket as TicketIcon,
-} from 'lucide-vue-next';
+import { Server as ServerIcon, FileText as FileTextIcon, Ticket as TicketIcon } from 'lucide-vue-next';
 const stats = [
-  { icon: ServerIcon, value: '2', label: 'Services' },
-  { icon: FileTextIcon, value: '0', label: 'Unpaid Invoices' },
-  { icon: TicketIcon, value: '1', label: 'Tickets' },
+    { icon: ServerIcon, value: '2', label: 'Services' },
+    { icon: FileTextIcon, value: '0', label: 'Unpaid Invoices' },
+    { icon: TicketIcon, value: '1', label: 'Tickets' },
 ];
 </script>
diff --git a/frontend/src/components/client/Dashboard/Main/SupportPin.vue b/frontend/src/components/client/Dashboard/Main/SupportPin.vue
index e8ddf05..9598b94 100755
--- a/frontend/src/components/client/Dashboard/Main/SupportPin.vue
+++ b/frontend/src/components/client/Dashboard/Main/SupportPin.vue
@@ -1,18 +1,17 @@
 <template>
-  <!-- Support PIN -->
-  <CardComponent>
-    <h2 class="text-purple-200 text-sm font-medium mb-2">{{ t('Components.SupportPin.title') }}</h2>
-    <div class="flex items-center gap-2">
-      <span class="text-emerald-400 text-2xl font-mono font-bold">{{ Session.getInfo('support_pin') }}</span>
-      <button @click="copyPin" class="text-purple-500 hover:text-white transition-colors">
-        <CopyIcon class="w-4 h-4" />
-      </button>
-      <button @click="resetPin" class="text-purple-500 hover:text-white transition-colors">
-        <RefreshCcwIcon class="w-4 h-4 transition-transform duration-500 hover:rotate-180" />
-      </button>
-
-    </div>
-  </CardComponent>
+    <!-- Support PIN -->
+    <CardComponent>
+        <h2 class="text-purple-200 text-sm font-medium mb-2">{{ t('Components.SupportPin.title') }}</h2>
+        <div class="flex items-center gap-2">
+            <span class="text-emerald-400 text-2xl font-mono font-bold">{{ Session.getInfo('support_pin') }}</span>
+            <button @click="copyPin" class="text-purple-500 hover:text-white transition-colors">
+                <CopyIcon class="w-4 h-4" />
+            </button>
+            <button @click="resetPin" class="text-purple-500 hover:text-white transition-colors">
+                <RefreshCcwIcon class="w-4 h-4 transition-transform duration-500 hover:rotate-180" />
+            </button>
+        </div>
+    </CardComponent>
 </template>
 <script setup lang="ts">
 import CardComponent from '@/components/client/ui/Card/CardComponent.vue';
@@ -20,59 +19,56 @@ import Auth from '@/mythicalclient/Auth';
 import Session from '@/mythicalclient/Session';
 import Swal from 'sweetalert2';
 import { useI18n } from 'vue-i18n';
-import {
-  RefreshCcw as RefreshCcwIcon,
-  Copy as CopyIcon,
-} from 'lucide-vue-next';
+import { RefreshCcw as RefreshCcwIcon, Copy as CopyIcon } from 'lucide-vue-next';
 
 const { t } = useI18n();
 
 const copyPin = async () => {
-  const pin = Session.getInfo('support_pin');
-  try {
-    if (!navigator.clipboard) {
-      const textArea = document.createElement('textarea')
-      textArea.value = pin
-      document.body.appendChild(textArea)
-      textArea.select()
-      document.execCommand('copy')
-      document.body.removeChild(textArea)
-    } else {
-      await navigator.clipboard.writeText(pin)
-    }
+    const pin = Session.getInfo('support_pin');
+    try {
+        if (!navigator.clipboard) {
+            const textArea = document.createElement('textarea');
+            textArea.value = pin;
+            document.body.appendChild(textArea);
+            textArea.select();
+            document.execCommand('copy');
+            document.body.removeChild(textArea);
+        } else {
+            await navigator.clipboard.writeText(pin);
+        }
 
-    Swal.fire({
-      icon: 'success',
-      title: t('Components.Global.Navigation.Copy.Title'),
-      text: t('Components.Global.Navigation.Copy.Success'),
-      footer: t('Components.Global.Navigation.Copy.Footer'),
-    })
-  } catch (err) {
-    console.error('Failed to copy command to clipboard', err)
-  }
+        Swal.fire({
+            icon: 'success',
+            title: t('Components.Global.Navigation.Copy.Title'),
+            text: t('Components.Global.Navigation.Copy.Success'),
+            footer: t('Components.Global.Navigation.Copy.Footer'),
+        });
+    } catch (err) {
+        console.error('Failed to copy command to clipboard', err);
+    }
 };
 
 const resetPin = async () => {
-  try {
-    const ping = await Auth.resetPin();
-    const pinElement = document.querySelector('span.text-emerald-400');
-    if (pinElement) {
-      pinElement.textContent = ping.toString();
-      Swal.fire({
-        title: t('Components.SupportPin.alerts.success.title'),
-        text: t('Components.SupportPin.alerts.success.pin_success'),
-        icon: 'success',
-        footer: t('Components.SupportPin.alerts.success.footer'),
-      });
+    try {
+        const ping = await Auth.resetPin();
+        const pinElement = document.querySelector('span.text-emerald-400');
+        if (pinElement) {
+            pinElement.textContent = ping.toString();
+            Swal.fire({
+                title: t('Components.SupportPin.alerts.success.title'),
+                text: t('Components.SupportPin.alerts.success.pin_success'),
+                icon: 'success',
+                footer: t('Components.SupportPin.alerts.success.footer'),
+            });
+        }
+    } catch (error) {
+        console.error('Failed to reset support pin:', error);
+        Swal.fire({
+            title: t('Components.SupportPin.alerts.error.title'),
+            text: t('Components.SupportPin.alerts.error.generic'),
+            icon: 'error',
+            footer: t('Components.SupportPin.alerts.error.footer'),
+        });
     }
-  } catch (error) {
-    console.error('Failed to reset support pin:', error);
-    Swal.fire({
-      title: t('Components.SupportPin.alerts.error.title'),
-      text: t('Components.SupportPin.alerts.error.generic'),
-      icon: 'error',
-      footer: t('Components.SupportPin.alerts.error.footer'),
-    });
-  }
 };
 </script>
diff --git a/frontend/src/components/client/Dashboard/Main/TicketList.vue b/frontend/src/components/client/Dashboard/Main/TicketList.vue
index 696ee48..df28aee 100755
--- a/frontend/src/components/client/Dashboard/Main/TicketList.vue
+++ b/frontend/src/components/client/Dashboard/Main/TicketList.vue
@@ -1,30 +1,36 @@
 <template>
-  <!-- Recent Tickets -->
-  <CardComponent>
-    <h2 class="text-lg font-semibold text-white mb-4">Recent Tickets</h2>
-    <div class="space-y-3">
-      <div v-for="ticket in recentTickets" :key="ticket.id"
-        class="flex items-center justify-between py-2 border-b border-purple-700 last:border-0">
-        <div>
-          <div class="font-medium text-white">{{ ticket.title }}</div>
-          <div class="text-sm text-purple-500">{{ ticket.date }}</div>
+    <!-- Recent Tickets -->
+    <CardComponent>
+        <h2 class="text-lg font-semibold text-white mb-4">Recent Tickets</h2>
+        <div class="space-y-3">
+            <div
+                v-for="ticket in recentTickets"
+                :key="ticket.id"
+                class="flex items-center justify-between py-2 border-b border-purple-700 last:border-0"
+            >
+                <div>
+                    <div class="font-medium text-white">{{ ticket.title }}</div>
+                    <div class="text-sm text-purple-500">{{ ticket.date }}</div>
+                </div>
+                <span
+                    :class="[
+                        'px-2 py-1 rounded text-xs font-medium',
+                        ticket.status === 'Open'
+                            ? 'bg-yellow-500/20 text-yellow-400'
+                            : 'bg-emerald-500/20 text-emerald-400',
+                    ]"
+                >
+                    {{ ticket.status }}
+                </span>
+            </div>
         </div>
-        <span :class="[
-          'px-2 py-1 rounded text-xs font-medium',
-          ticket.status === 'Open'
-            ? 'bg-yellow-500/20 text-yellow-400'
-            : 'bg-emerald-500/20 text-emerald-400',
-        ]">
-          {{ ticket.status }}
-        </span>
-      </div>
-    </div>
-    <RouterLink to="/support"
-      class="mt-4 block w-full px-4 py-2 bg-purple-600 hover:bg-purple-500 text-white rounded transition-colors text-center text-sm">
-      View All Tickets
-    </RouterLink>
-  </CardComponent>
-
+        <RouterLink
+            to="/support"
+            class="mt-4 block w-full px-4 py-2 bg-purple-600 hover:bg-purple-500 text-white rounded transition-colors text-center text-sm"
+        >
+            View All Tickets
+        </RouterLink>
+    </CardComponent>
 </template>
 
 <script setup lang="ts">
@@ -32,9 +38,8 @@ import CardComponent from '@/components/client/ui/Card/CardComponent.vue';
 import { ref } from 'vue';
 
 const recentTickets = ref([
-  { id: 1, title: 'Server Performance Issue', date: '2023-07-01', status: 'Open' },
-  { id: 2, title: 'Billing Inquiry', date: '2023-06-28', status: 'Closed' },
-  { id: 3, title: 'Domain Transfer Request', date: '2023-06-25', status: 'Open' },
+    { id: 1, title: 'Server Performance Issue', date: '2023-07-01', status: 'Open' },
+    { id: 2, title: 'Billing Inquiry', date: '2023-06-28', status: 'Closed' },
+    { id: 3, title: 'Domain Transfer Request', date: '2023-06-25', status: 'Open' },
 ]);
-
 </script>
diff --git a/frontend/src/components/client/Dashboard/Main/UserInfo.vue b/frontend/src/components/client/Dashboard/Main/UserInfo.vue
index ea3be51..11ae2c5 100755
--- a/frontend/src/components/client/Dashboard/Main/UserInfo.vue
+++ b/frontend/src/components/client/Dashboard/Main/UserInfo.vue
@@ -1,37 +1,39 @@
 <template>
-  <!-- Profile Card -->
-  <CardComponent>
-    <div class="flex flex-col items-center text-center">
-      <MarketIcon class="w-20 h-20 text-purple-500 mb-4" />
-      <div class="text-xl text-white mb-2">
-        {{ Session.getInfo('company_name') }}
-      </div>
-      <div class="text-purple-200 text-sm space-y-1 mb-4">
-        <div>{{ Session.getInfo('vat_number') }}</div>
-        <div>{{ Session.getInfo('address1') }}</div>
-        <div>
-          {{ Session.getInfo('city') }} ({{ Session.getInfo('postcode') }}),
-          {{ Session.getInfo('country') }}
+    <!-- Profile Card -->
+    <CardComponent>
+        <div class="flex flex-col items-center text-center">
+            <MarketIcon class="w-20 h-20 text-purple-500 mb-4" />
+            <div class="text-xl text-white mb-2">
+                {{ Session.getInfo('company_name') }}
+            </div>
+            <div class="text-purple-200 text-sm space-y-1 mb-4">
+                <div>{{ Session.getInfo('vat_number') }}</div>
+                <div>{{ Session.getInfo('address1') }}</div>
+                <div>
+                    {{ Session.getInfo('city') }} ({{ Session.getInfo('postcode') }}),
+                    {{ Session.getInfo('country') }}
+                </div>
+            </div>
+            <div class="flex gap-2 w-full">
+                <RouterLink
+                    to="/account"
+                    class="flex-1 px-4 py-2 bg-purple-600 hover:bg-purple-500 text-white rounded transition-colors text-sm"
+                >
+                    Update
+                </RouterLink>
+                <a
+                    href="/api/auth/logout"
+                    class="flex-1 px-4 py-2 bg-purple-800 hover:bg-purple-700 text-white rounded transition-colors text-sm"
+                >
+                    Logout
+                </a>
+            </div>
         </div>
-      </div>
-      <div class="flex gap-2 w-full">
-        <RouterLink to="/account"
-          class="flex-1 px-4 py-2 bg-purple-600 hover:bg-purple-500 text-white rounded transition-colors text-sm">
-          Update
-        </RouterLink>
-        <a href="/api/auth/logout"
-          class="flex-1 px-4 py-2 bg-purple-800 hover:bg-purple-700 text-white rounded transition-colors text-sm">
-          Logout
-        </a>
-      </div>
-    </div>
-  </CardComponent>
+    </CardComponent>
 </template>
 <script lang="ts" setup>
 import CardComponent from '@/components/client/ui/Card/CardComponent.vue';
 import Session from '@/mythicalclient/Session';
 
-import {
-  BookMarkedIcon as MarketIcon,
-} from 'lucide-vue-next';
+import { BookMarkedIcon as MarketIcon } from 'lucide-vue-next';
 </script>
diff --git a/frontend/src/components/client/ui/TextForms/SelectInput.vue b/frontend/src/components/client/ui/TextForms/SelectInput.vue
index 3aa4200..0115c6d 100755
--- a/frontend/src/components/client/ui/TextForms/SelectInput.vue
+++ b/frontend/src/components/client/ui/TextForms/SelectInput.vue
@@ -3,23 +3,23 @@ import { ref, onMounted, computed, onBeforeUnmount, watch, nextTick } from 'vue'
 import TextInput from './TextInput.vue';
 
 const props = defineProps({
-  modelValue: String,
-  options: {
-    type: Array as () => Array<{ value: string; label: string }>,
-    default: () => [],
-  },
-  inputClass: {
-    type: String,
-    default:
-      'w-full bg-gray-800/50 border border-gray-700/50 rounded-lg pl-4 pr-10 py-2 text-sm text-gray-100 focus:border-purple-500/50 focus:ring-1 focus:ring-purple-500/50 focus:outline-none',
-  },
+    modelValue: String,
+    options: {
+        type: Array as () => Array<{ value: string; label: string }>,
+        default: () => [],
+    },
+    inputClass: {
+        type: String,
+        default:
+            'w-full bg-gray-800/50 border border-gray-700/50 rounded-lg pl-4 pr-10 py-2 text-sm text-gray-100 focus:border-purple-500/50 focus:ring-1 focus:ring-purple-500/50 focus:outline-none',
+    },
 });
 
 const emit = defineEmits(['update:modelValue']);
 
 const inputValue = computed({
-  get: () => props.modelValue,
-  set: (value) => emit('update:modelValue', value),
+    get: () => props.modelValue,
+    set: (value) => emit('update:modelValue', value),
 });
 
 const searchQuery = ref('');
@@ -29,112 +29,117 @@ const optionsRef = ref<HTMLUListElement | null>(null);
 const selectedIndex = ref(-1);
 
 const filteredOptions = computed(() => {
-  return props.options.filter(option =>
-    option.label.toLowerCase().includes(searchQuery.value.toLowerCase())
-  );
+    return props.options.filter((option) => option.label.toLowerCase().includes(searchQuery.value.toLowerCase()));
 });
 
 onMounted(() => {
-  if (!props.modelValue && props.options.length > 0) {
-    emit('update:modelValue', props.options[0].value);
-  }
+    if (!props.modelValue && props.options.length > 0) {
+        emit('update:modelValue', props.options[0].value);
+    }
 
-  document.addEventListener('click', handleClickOutside);
+    document.addEventListener('click', handleClickOutside);
 });
 
 onBeforeUnmount(() => {
-  document.removeEventListener('click', handleClickOutside);
+    document.removeEventListener('click', handleClickOutside);
 });
 
 const handleClickOutside = (event: MouseEvent) => {
-  const target = event.target as HTMLElement;
-  if (!target.closest('.dropdown-container')) {
-    isDropdownOpen.value = false;
-  }
+    const target = event.target as HTMLElement;
+    if (!target.closest('.dropdown-container')) {
+        isDropdownOpen.value = false;
+    }
 };
 
 const selectOption = (value: string) => {
-  inputValue.value = value;
-  isDropdownOpen.value = false;
+    inputValue.value = value;
+    isDropdownOpen.value = false;
 };
 
 const handleKeydown = (event: KeyboardEvent) => {
-  if (event.key === 'ArrowDown') {
-    event.preventDefault();
-    selectedIndex.value = Math.min(selectedIndex.value + 1, filteredOptions.value.length - 1);
-    scrollToSelectedOption();
-  } else if (event.key === 'ArrowUp') {
-    event.preventDefault();
-    selectedIndex.value = Math.max(selectedIndex.value - 1, -1);
-    scrollToSelectedOption();
-  } else if (event.key === 'Enter') {
-    event.preventDefault();
-    if (selectedIndex.value >= 0 && selectedIndex.value < filteredOptions.value.length) {
-      selectOption(filteredOptions.value[selectedIndex.value].value);
+    if (event.key === 'ArrowDown') {
+        event.preventDefault();
+        selectedIndex.value = Math.min(selectedIndex.value + 1, filteredOptions.value.length - 1);
+        scrollToSelectedOption();
+    } else if (event.key === 'ArrowUp') {
+        event.preventDefault();
+        selectedIndex.value = Math.max(selectedIndex.value - 1, -1);
+        scrollToSelectedOption();
+    } else if (event.key === 'Enter') {
+        event.preventDefault();
+        if (selectedIndex.value >= 0 && selectedIndex.value < filteredOptions.value.length) {
+            selectOption(filteredOptions.value[selectedIndex.value].value);
+        }
     }
-  }
 };
 
 const scrollToSelectedOption = () => {
-  nextTick(() => {
-    const selectedElement = optionsRef.value?.children[selectedIndex.value] as HTMLElement;
-    if (selectedElement) {
-      selectedElement.scrollIntoView({ block: 'nearest' });
-    }
-  });
+    nextTick(() => {
+        const selectedElement = optionsRef.value?.children[selectedIndex.value] as HTMLElement;
+        if (selectedElement) {
+            selectedElement.scrollIntoView({ block: 'nearest' });
+        }
+    });
 };
 
 watch(isDropdownOpen, async (newValue) => {
-  if (newValue) {
-    await nextTick();
-    searchInputRef.value?.focus();
-    selectedIndex.value = -1;
-  } else {
-    searchQuery.value = '';
-  }
+    if (newValue) {
+        await nextTick();
+        searchInputRef.value?.focus();
+        selectedIndex.value = -1;
+    } else {
+        searchQuery.value = '';
+    }
 });
 
 watch(filteredOptions, () => {
-  selectedIndex.value = -1;
+    selectedIndex.value = -1;
 });
 </script>
 
 <template>
-  <div class="relative dropdown-container">
-    <div :class="inputClass" @click="isDropdownOpen = !isDropdownOpen">
-      <span>{{ props.options.find(option => option.value === inputValue)?.label || 'Select an option' }}</span>
-    </div>
-    <div v-if="isDropdownOpen" class="absolute z-10 w-full bg-gray-800 border border-gray-700 rounded-lg mt-1">
-      <TextInput v-model="searchQuery" placeholder="Search..." class="mb-2" ref="searchInputRef"
-        @keydown="handleKeydown" />
-      <ul ref="optionsRef">
-        <li v-for="(option, index) in filteredOptions" :key="option.value" @click="selectOption(option.value)"
-          @mouseover="selectedIndex = index" :class="[
-            'px-4 py-2 cursor-pointer hover:bg-gray-700',
-            { 'bg-gray-700': index === selectedIndex }
-          ]">
-          {{ option.label }}
-        </li>
-      </ul>
+    <div class="relative dropdown-container">
+        <div :class="inputClass" @click="isDropdownOpen = !isDropdownOpen">
+            <span>{{ props.options.find((option) => option.value === inputValue)?.label || 'Select an option' }}</span>
+        </div>
+        <div v-if="isDropdownOpen" class="absolute z-10 w-full bg-gray-800 border border-gray-700 rounded-lg mt-1">
+            <TextInput
+                v-model="searchQuery"
+                placeholder="Search..."
+                class="mb-2"
+                ref="searchInputRef"
+                @keydown="handleKeydown"
+            />
+            <ul ref="optionsRef">
+                <li
+                    v-for="(option, index) in filteredOptions"
+                    :key="option.value"
+                    @click="selectOption(option.value)"
+                    @mouseover="selectedIndex = index"
+                    :class="['px-4 py-2 cursor-pointer hover:bg-gray-700', { 'bg-gray-700': index === selectedIndex }]"
+                >
+                    {{ option.label }}
+                </li>
+            </ul>
+        </div>
     </div>
-  </div>
 </template>
 
 <style scoped>
 .dropdown-container {
-  position: relative;
+    position: relative;
 }
 
-.dropdown-container>div {
-  cursor: pointer;
+.dropdown-container > div {
+    cursor: pointer;
 }
 
 .dropdown-container ul {
-  max-height: 200px;
-  overflow-y: auto;
+    max-height: 200px;
+    overflow-y: auto;
 }
 
 .dropdown-container li {
-  transition: background-color 0.2s;
+    transition: background-color 0.2s;
 }
 </style>
diff --git a/frontend/src/components/client/ui/TextForms/TextArea.vue b/frontend/src/components/client/ui/TextForms/TextArea.vue
index ba19f08..9cceeb4 100755
--- a/frontend/src/components/client/ui/TextForms/TextArea.vue
+++ b/frontend/src/components/client/ui/TextForms/TextArea.vue
@@ -1,27 +1,27 @@
 <template>
-  <textarea v-model="inputValue" :class="inputClass" :placeholder="placeholder"></textarea>
+    <textarea v-model="inputValue" :class="inputClass" :placeholder="placeholder"></textarea>
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue';
 
 const props = defineProps({
-  modelValue: String,
-  inputClass: {
-    type: String,
-    default:
-      'w-full bg-gray-800/50 border border-gray-700/50 rounded-lg pl-4 pr-10 py-2 text-sm text-gray-100 placeholder-gray-500 focus:border-purple-500/50 focus:ring-1 focus:ring-purple-500/50 focus:outline-none',
-  },
-  placeholder: {
-    type: String,
-    default: '',
-  },
+    modelValue: String,
+    inputClass: {
+        type: String,
+        default:
+            'w-full bg-gray-800/50 border border-gray-700/50 rounded-lg pl-4 pr-10 py-2 text-sm text-gray-100 placeholder-gray-500 focus:border-purple-500/50 focus:ring-1 focus:ring-purple-500/50 focus:outline-none',
+    },
+    placeholder: {
+        type: String,
+        default: '',
+    },
 });
 
 const emit = defineEmits(['update:modelValue']);
 
 const inputValue = computed({
-  get: () => props.modelValue,
-  set: (value) => emit('update:modelValue', value),
+    get: () => props.modelValue,
+    set: (value) => emit('update:modelValue', value),
 });
 </script>
diff --git a/frontend/src/locale/en.yml b/frontend/src/locale/en.yml
index c2a902d..d9262bc 100755
--- a/frontend/src/locale/en.yml
+++ b/frontend/src/locale/en.yml
@@ -1,5 +1,4 @@
 ---
-
 #-------------------------------------------------------------#
 #
 # Global Components
@@ -8,34 +7,35 @@
 #
 #-------------------------------------------------------------#
 Components:
-  ErrorsPage:
-    Buttons:
-      GoBack: "Go Back"
-      GoHome: "Go Home"
-  Global: 
-    Navigation: 
-      Loading: "Loading..."
-      Copy: 
-        Title: "Copied"
-        Success: "Copied to clipboard just like a boss."
-        Footer: "Yay it worked ;)"
-      Error: "An error occurred. Please try again later."
-  Announcements: 
-    Title: "Announcements"
-    Card: 
-      ReadMore: "Read More"
-  SupportPin: 
-    title: "Support PIN"
-    copy: "Copy"
-    alerts: 
-      success: 
-        title: "Success"
-        pin_success: "Support PIN generated"
-        footer: "Your support PIN has been generated"
-      error:
-        title: "Error"
-        generic: "An error occurred. Please try again later"
-        footer: "Please contact support for assistance"
+    ErrorsPage:
+        Buttons:
+            GoBack: 'Go Back'
+            GoHome: 'Go Home'
+    Global:
+        Navigation:
+            Loading: 'Loading...'
+            Copy:
+                Title: 'Copied'
+                Success: 'Copied to clipboard just like a boss.'
+                Footer: 'Yay it worked ;)'
+            Error: 'An error occurred. Please try again later.'
+    Announcements:
+        Title: 'Announcements'
+        Card:
+            ReadMore: 'Read More'
+    SupportPin:
+        title: 'Support PIN'
+        copy: 'Copy'
+        alerts:
+            success:
+                title: 'Success'
+                pin_success: 'Support PIN generated'
+                footer: 'Your support PIN has been generated'
+            error:
+                title: 'Error'
+                generic: 'An error occurred. Please try again later'
+                footer: 'Please contact support for assistance'
+
 #-------------------------------------------------------------#
 #
 # Auth Pages (/auth/*)
@@ -43,9 +43,8 @@ Components:
 # @public
 #
 #-------------------------------------------------------------#
-dashboard: 
-  title: Dashboard
-  
+dashboard:
+    title: Dashboard
 
 auth:
     logic:
@@ -282,6 +281,57 @@ errors:
 #-------------------------------------------------------------#
 account:
     pages:
+        tickets:
+            title: Tickets
+            actions:
+                newTicket: 'Tickets'
+                view: 'View'
+            alerts:
+                error:
+                    generic: 'An error occurred. Please try again later'
+            table:
+                title: 'Tickets'
+                subject: 'Subject'
+                status: 'Status'
+                priority: 'Priority'
+                department: 'Department'
+                created: 'Created'
+                actions: 'Actions'
+            noTickets: 'No tickets found'
+        create_ticket:
+            title: 'New Ticket'
+            subTitle: 'Create a new ticket'
+            form:
+                service: 'Related Service (if any)'
+                subject: 'Subject'
+                department: 'Department'
+                priority: 'Priority'
+                message: 'Message'
+                submit: 'Submit'
+                loading: 'Submitting...'
+                reset: 'Reset'
+                back: 'Back'
+            types:
+                priority:
+                    low: 'Low'
+                    medium: 'Medium'
+                    high: 'High'
+                    urgent: 'Urgent'
+            alerts:
+                success:
+                    title: 'Success'
+                    ticket_success: 'Ticket created'
+                    footer: 'Your ticket has been created'
+                error:
+                    title: 'Error'
+                    generic: 'An error occurred. Please try again later'
+                    footer: 'Please contact support for assistance'
+                    department_not_found: 'Department not found'
+                    department_id_missing: 'Department ID is missing'
+                    message_missing: 'Message is missing'
+                    subject_missing: 'Subject is missing'
+                    limit_reached: 'You have reached the limit of tickets you can create'
+                    failed_to_create_ticket: 'Cluster is down, try again later'
         settings:
             alerts:
                 success:
diff --git a/frontend/src/mythicalclient/Auth.ts b/frontend/src/mythicalclient/Auth.ts
index b20390f..640d628 100755
--- a/frontend/src/mythicalclient/Auth.ts
+++ b/frontend/src/mythicalclient/Auth.ts
@@ -23,243 +23,243 @@
  *
  * ---------------------------*/
 class Auth {
-  /**
-   * Logs the user in
-   *
-   * @param email The email to log in with
-   * @param turnstileResponse The turnstile response
-   *
-   * @returns The response from the server
-   */
-  static async forgotPassword(email: string, turnstileResponse: string) {
-    const response = await fetch('/api/user/auth/forgot', {
-      method: 'POST',
-      body: new URLSearchParams({
-        email: email,
-        turnstileResponse: turnstileResponse,
-      }),
-    });
-    const data = await response.json();
-    return data;
-  }
+    /**
+     * Logs the user in
+     *
+     * @param email The email to log in with
+     * @param turnstileResponse The turnstile response
+     *
+     * @returns The response from the server
+     */
+    static async forgotPassword(email: string, turnstileResponse: string) {
+        const response = await fetch('/api/user/auth/forgot', {
+            method: 'POST',
+            body: new URLSearchParams({
+                email: email,
+                turnstileResponse: turnstileResponse,
+            }),
+        });
+        const data = await response.json();
+        return data;
+    }
 
-  /**
-   * Resets the password
-   *
-   * @param confirmPassword The password to confirm
-   * @param password The new password
-   * @param resetCode The reset code
-   * @param turnstileResponse The turnstile response
-   *
-   * @returns The response from the server
-   */
-  static async resetPassword(
-    confirmPassword: string,
-    password: string,
-    resetCode: string,
-    turnstileResponse: string,
-  ) {
-    const response = await fetch('/api/user/auth/reset', {
-      method: 'POST',
-      body: new URLSearchParams({
-        password: password,
-        confirmPassword: confirmPassword,
-        email_code: resetCode || '',
-        turnstileResponse: turnstileResponse,
-      }),
-    });
-    const data = await response.json();
-    return data;
-  }
+    /**
+     * Resets the password
+     *
+     * @param confirmPassword The password to confirm
+     * @param password The new password
+     * @param resetCode The reset code
+     * @param turnstileResponse The turnstile response
+     *
+     * @returns The response from the server
+     */
+    static async resetPassword(
+        confirmPassword: string,
+        password: string,
+        resetCode: string,
+        turnstileResponse: string,
+    ) {
+        const response = await fetch('/api/user/auth/reset', {
+            method: 'POST',
+            body: new URLSearchParams({
+                password: password,
+                confirmPassword: confirmPassword,
+                email_code: resetCode || '',
+                turnstileResponse: turnstileResponse,
+            }),
+        });
+        const data = await response.json();
+        return data;
+    }
 
-  /**
-   * Verifies the login token
-   *
-   * @param code The code to verify
-   *
-   * @returns The response from the server
-   */
-  static async isLoginVerifyTokenValid(code: string) {
-    const response = await fetch(`/api/user/auth/reset?code=${code}`, {
-      method: 'GET',
-    });
-    const data = await response.json();
-    return data;
-  }
+    /**
+     * Verifies the login token
+     *
+     * @param code The code to verify
+     *
+     * @returns The response from the server
+     */
+    static async isLoginVerifyTokenValid(code: string) {
+        const response = await fetch(`/api/user/auth/reset?code=${code}`, {
+            method: 'GET',
+        });
+        const data = await response.json();
+        return data;
+    }
 
-  /**
-   * Registers the user
-   *
-   * @param firstName The first name
-   * @param lastName The last name
-   * @param email The email
-   * @param username The username
-   * @param password The password
-   * @param turnstileResponse The turnstile response
-   *
-   * @returns The response from the server
-   */
-  static async register(
-    firstName: string,
-    lastName: string,
-    email: string,
-    username: string,
-    password: string,
-    turnstileResponse: string,
-  ) {
-    const response = await fetch('/api/user/auth/register', {
-      method: 'POST',
-      body: new URLSearchParams({
-        firstName: firstName,
-        lastName: lastName,
-        email: email,
-        username: username,
-        password: password,
-        turnstileResponse: turnstileResponse,
-      }),
-    });
-    const data = await response.json();
-    return data;
-  }
-  /**
-   * Logs the user in
-   *
-   * @param login The users email or username
-   * @param password The users password
-   * @param turnstileResponse The turnstile response
-   *
-   * @returns
-   */
-  static async login(login: string, password: string, turnstileResponse: string) {
-    const response = await fetch('/api/user/auth/login', {
-      method: 'POST',
-      body: new URLSearchParams({
-        login: login,
-        password: password,
-        turnstileResponse: turnstileResponse,
-      }),
-    });
-    const data = await response.json();
-    return data;
-  }
+    /**
+     * Registers the user
+     *
+     * @param firstName The first name
+     * @param lastName The last name
+     * @param email The email
+     * @param username The username
+     * @param password The password
+     * @param turnstileResponse The turnstile response
+     *
+     * @returns The response from the server
+     */
+    static async register(
+        firstName: string,
+        lastName: string,
+        email: string,
+        username: string,
+        password: string,
+        turnstileResponse: string,
+    ) {
+        const response = await fetch('/api/user/auth/register', {
+            method: 'POST',
+            body: new URLSearchParams({
+                firstName: firstName,
+                lastName: lastName,
+                email: email,
+                username: username,
+                password: password,
+                turnstileResponse: turnstileResponse,
+            }),
+        });
+        const data = await response.json();
+        return data;
+    }
+    /**
+     * Logs the user in
+     *
+     * @param login The users email or username
+     * @param password The users password
+     * @param turnstileResponse The turnstile response
+     *
+     * @returns
+     */
+    static async login(login: string, password: string, turnstileResponse: string) {
+        const response = await fetch('/api/user/auth/login', {
+            method: 'POST',
+            body: new URLSearchParams({
+                login: login,
+                password: password,
+                turnstileResponse: turnstileResponse,
+            }),
+        });
+        const data = await response.json();
+        return data;
+    }
 
-  /**
-   * Update the users billing information
-   *
-   * @param company_name The company name
-   * @param vat_number The vat number
-   * @param address1 The address line 1
-   * @param address2 The address line 2
-   * @param city The city
-   * @param country The country
-   * @param state The state
-   * @param postcode The postcode
-   *
-   * @returns
-   */
-  static async updateBilling(
-    company_name: string,
-    vat_number: string,
-    address1: string,
-    address2: string,
-    city: string,
-    country: string,
-    state: string,
-    postcode: string,
-  ) {
-    const response = await fetch('/api/user/session/billing/update', {
-      method: 'POST',
-      body: new URLSearchParams({
-        company_name: company_name,
-        vat_number: vat_number,
-        address1: address1,
-        address2: address2,
-        city: city,
-        country: country,
-        state: state,
-        postcode: postcode,
-      }),
-    });
-    const data = await response.json();
-    return data;
-  }
+    /**
+     * Update the users billing information
+     *
+     * @param company_name The company name
+     * @param vat_number The vat number
+     * @param address1 The address line 1
+     * @param address2 The address line 2
+     * @param city The city
+     * @param country The country
+     * @param state The state
+     * @param postcode The postcode
+     *
+     * @returns
+     */
+    static async updateBilling(
+        company_name: string,
+        vat_number: string,
+        address1: string,
+        address2: string,
+        city: string,
+        country: string,
+        state: string,
+        postcode: string,
+    ) {
+        const response = await fetch('/api/user/session/billing/update', {
+            method: 'POST',
+            body: new URLSearchParams({
+                company_name: company_name,
+                vat_number: vat_number,
+                address1: address1,
+                address2: address2,
+                city: city,
+                country: country,
+                state: state,
+                postcode: postcode,
+            }),
+        });
+        const data = await response.json();
+        return data;
+    }
 
-  /**
-   * Update the users info
-   *
-   * @param first_name The first name
-   * @param last_name The last name
-   * @param email The email
-   * @param avatar The avatar
-   * @param background  The background
-   *
-   * @returns
-   */
-  static async updateUserInfo(
-    first_name: string,
-    last_name: string,
-    email: string,
-    avatar: string,
-    background: string,
-  ) {
-    const response = await fetch('/api/user/session/info/update', {
-      method: 'POST',
-      body: new URLSearchParams({
-        first_name: first_name,
-        last_name: last_name,
-        email: email,
-        avatar: avatar,
-        background: background,
-      }),
-    });
-    const data = await response.json();
-    return data;
-  }
-  /**
-   * Setup 2fa
-   *
-   * @returns
-   */
-  static async getTwoFactorSecret() {
-    const response = await fetch('/api/user/auth/2fa/setup', {
-      method: 'GET',
-    });
-    const data = await response.json();
-    return data;
-  }
+    /**
+     * Update the users info
+     *
+     * @param first_name The first name
+     * @param last_name The last name
+     * @param email The email
+     * @param avatar The avatar
+     * @param background  The background
+     *
+     * @returns
+     */
+    static async updateUserInfo(
+        first_name: string,
+        last_name: string,
+        email: string,
+        avatar: string,
+        background: string,
+    ) {
+        const response = await fetch('/api/user/session/info/update', {
+            method: 'POST',
+            body: new URLSearchParams({
+                first_name: first_name,
+                last_name: last_name,
+                email: email,
+                avatar: avatar,
+                background: background,
+            }),
+        });
+        const data = await response.json();
+        return data;
+    }
+    /**
+     * Setup 2fa
+     *
+     * @returns
+     */
+    static async getTwoFactorSecret() {
+        const response = await fetch('/api/user/auth/2fa/setup', {
+            method: 'GET',
+        });
+        const data = await response.json();
+        return data;
+    }
 
-  /**
-   * Verify 2fa
-   *
-   * @param code The code
-   *
-   * @returns
-   */
-  static async verifyTwoFactor(code: string, turnstileResponse: string) {
-    const response = await fetch('/api/user/auth/2fa/setup', {
-      method: 'POST',
-      body: new URLSearchParams({
-        code: code,
-        turnstileResponse: turnstileResponse,
-      }),
-    });
-    const data = await response.json();
-    return data;
-  }
+    /**
+     * Verify 2fa
+     *
+     * @param code The code
+     *
+     * @returns
+     */
+    static async verifyTwoFactor(code: string, turnstileResponse: string) {
+        const response = await fetch('/api/user/auth/2fa/setup', {
+            method: 'POST',
+            body: new URLSearchParams({
+                code: code,
+                turnstileResponse: turnstileResponse,
+            }),
+        });
+        const data = await response.json();
+        return data;
+    }
 
-  /**
-   *
-   * Reset the support pin!
-   *
-   * @returns The new pin
-   */
-  static async resetPin(): Promise<number> {
-    const response = await fetch('/api/user/session/newPin', {
-      method: 'POST',
-    });
-    const data = await response.json();
-    return parseInt(data.pin, 10);
-  }
+    /**
+     *
+     * Reset the support pin!
+     *
+     * @returns The new pin
+     */
+    static async resetPin(): Promise<number> {
+        const response = await fetch('/api/user/session/newPin', {
+            method: 'POST',
+        });
+        const data = await response.json();
+        return parseInt(data.pin, 10);
+    }
 }
 
 export default Auth;
diff --git a/frontend/src/mythicalclient/Tickets.ts b/frontend/src/mythicalclient/Tickets.ts
index d3641cb..321d9fc 100755
--- a/frontend/src/mythicalclient/Tickets.ts
+++ b/frontend/src/mythicalclient/Tickets.ts
@@ -1,31 +1,38 @@
 class Tickets {
-  public static async getTicketCreateInfo() {
-    const response = await fetch('/api/user/ticket/create', {
-      method: 'GET',
-    });
-    const data = await response.json();
-    return data;
-  }
-  static async createTicket(
-    department_id: number,
-    subject: string,
-    message: string,
-    priority: string,
-    service: number,
-  ) {
-    const response = await fetch('/api/user/ticket/create', {
-      method: 'POST',
-      body: new URLSearchParams({
-        department_id: department_id.toString(),
-        subject: subject,
-        message: message,
-        priority: priority,
-        service: service.toString() || '',
-      }),
-    });
-    const data = await response.json();
-    return data;
-  }
+    public static async getTicketCreateInfo() {
+        const response = await fetch('/api/user/ticket/create', {
+            method: 'GET',
+        });
+        const data = await response.json();
+        return data;
+    }
+    static async createTicket(
+        department_id: number,
+        subject: string,
+        message: string,
+        priority: string,
+        service: number,
+    ) {
+        const response = await fetch('/api/user/ticket/create', {
+            method: 'POST',
+            body: new URLSearchParams({
+                department_id: department_id.toString(),
+                subject: subject,
+                message: message,
+                priority: priority,
+                service: service.toString() || '',
+            }),
+        });
+        const data = await response.json();
+        return data;
+    }
+    static async getTickets() {
+        const response = await fetch('/api/user/ticket/list', {
+            method: 'GET',
+        });
+        const data = await response.json();
+        return data;
+    }
 }
 
 export default Tickets;
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index 4c7821c..0da1fb9 100755
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -1,110 +1,110 @@
 import { createRouter, createWebHistory } from 'vue-router';
 
 const routes = [
-  {
-    path: '/auth/login',
-    name: 'Login',
-    component: () => import('@/views/client/auth/Login.vue'),
-  },
-  {
-    path: '/auth/register',
-    name: 'Register',
-    component: () => import('@/views/client/auth/Register.vue'),
-  },
-  {
-    path: '/auth/forgot-password',
-    name: 'Forgot Password',
-    component: () => import('@/views/client/auth/ForgotPassword.vue'),
-  },
-  {
-    path: '/auth/reset-password',
-    name: 'Reset Password',
-    component: () => import('@/views/client/auth/ResetPassword.vue'),
-  },
-  {
-    path: '/auth/2fa/setup',
-    name: 'Two Factor Setup',
-    component: () => import('@/views/client/auth/TwoFactorSetup.vue'),
-  },
-  {
-    path: '/errors/403',
-    name: 'Forbidden',
-    component: () => import('@/views/client/errors/Forbidden.vue'),
-  },
-  {
-    path: '/errors/500',
-    name: 'ServerError',
-    component: () => import('@/views/client/errors/ServerError.vue'),
-  },
-  {
-    path: '/dashboard',
-    name: 'Dashboard',
-    component: () => import('@/views/client/Home.vue'),
-  },
-  {
-    path: '/account',
-    name: 'Account',
-    component: () => import('@/views/client/Account.vue'),
-  },
-  {
-    path: '/ticket',
-    name: 'Ticket',
-    component: () => import('@/views/client/ticket/List.vue'),
-  },
-  {
-    path: '/ticket/create',
-    name: 'Create Ticket',
-    component: () => import('@/views/client/ticket/Create.vue'),
-  },
-  {
-    path: '/ticket/:id',
-    name: 'Ticket Detail',
-    component: () => import('@/views/client/ticket/[id].vue'),
-  },
-  {
-    path: '/auth/sso',
-    name: 'SSO',
-    component: () => import('@/views/client/auth/sso.vue'),
-  },
-  {
-    path: '/auth/2fa/setup/disband',
-    redirect: () => {
-      window.location.href = '/api/auth/2fa/setup/kill';
-      return '/api/auth/2fa/setup/kill';
-    },
-  },
-  {
-    path: '/auth/logout',
-    redirect: () => {
-      window.location.href = '/api/user/auth/logout';
-      return '/api/user/auth/logout';
-    },
-  },
-  {
-    path: '/auth/2fa/verify',
-    name: 'Two Factor Verify',
-    component: () => import('@/views/client/auth/TwoFactorVerify.vue'),
-  },
-  {
-    path: '/',
-    redirect: '/dashboard',
-  },
-  {
-    path: '/mc-admin',
-    name: 'Admin Home',
-    component: () => import('@/views/admin/Home.vue'),
-  },
+    {
+        path: '/auth/login',
+        name: 'Login',
+        component: () => import('@/views/client/auth/Login.vue'),
+    },
+    {
+        path: '/auth/register',
+        name: 'Register',
+        component: () => import('@/views/client/auth/Register.vue'),
+    },
+    {
+        path: '/auth/forgot-password',
+        name: 'Forgot Password',
+        component: () => import('@/views/client/auth/ForgotPassword.vue'),
+    },
+    {
+        path: '/auth/reset-password',
+        name: 'Reset Password',
+        component: () => import('@/views/client/auth/ResetPassword.vue'),
+    },
+    {
+        path: '/auth/2fa/setup',
+        name: 'Two Factor Setup',
+        component: () => import('@/views/client/auth/TwoFactorSetup.vue'),
+    },
+    {
+        path: '/errors/403',
+        name: 'Forbidden',
+        component: () => import('@/views/client/errors/Forbidden.vue'),
+    },
+    {
+        path: '/errors/500',
+        name: 'ServerError',
+        component: () => import('@/views/client/errors/ServerError.vue'),
+    },
+    {
+        path: '/dashboard',
+        name: 'Dashboard',
+        component: () => import('@/views/client/Home.vue'),
+    },
+    {
+        path: '/account',
+        name: 'Account',
+        component: () => import('@/views/client/Account.vue'),
+    },
+    {
+        path: '/ticket',
+        name: 'Ticket',
+        component: () => import('@/views/client/ticket/List.vue'),
+    },
+    {
+        path: '/ticket/create',
+        name: 'Create Ticket',
+        component: () => import('@/views/client/ticket/Create.vue'),
+    },
+    {
+        path: '/ticket/:id',
+        name: 'Ticket Detail',
+        component: () => import('@/views/client/ticket/[id].vue'),
+    },
+    {
+        path: '/auth/sso',
+        name: 'SSO',
+        component: () => import('@/views/client/auth/sso.vue'),
+    },
+    {
+        path: '/auth/2fa/setup/disband',
+        redirect: () => {
+            window.location.href = '/api/auth/2fa/setup/kill';
+            return '/api/auth/2fa/setup/kill';
+        },
+    },
+    {
+        path: '/auth/logout',
+        redirect: () => {
+            window.location.href = '/api/user/auth/logout';
+            return '/api/user/auth/logout';
+        },
+    },
+    {
+        path: '/auth/2fa/verify',
+        name: 'Two Factor Verify',
+        component: () => import('@/views/client/auth/TwoFactorVerify.vue'),
+    },
+    {
+        path: '/',
+        redirect: '/dashboard',
+    },
+    {
+        path: '/mc-admin',
+        name: 'Admin Home',
+        component: () => import('@/views/admin/Home.vue'),
+    },
 ];
 
 routes.push({
-  path: '/:pathMatch(.*)*',
-  name: 'NotFound',
-  component: () => import('@/views/client/errors/NotFound.vue'),
+    path: '/:pathMatch(.*)*',
+    name: 'NotFound',
+    component: () => import('@/views/client/errors/NotFound.vue'),
 });
 
 const router = createRouter({
-  history: createWebHistory(),
-  routes,
+    history: createWebHistory(),
+    routes,
 });
 
 export default router;
diff --git a/frontend/src/views/client/Home.vue b/frontend/src/views/client/Home.vue
index 235ad87..1e970d1 100755
--- a/frontend/src/views/client/Home.vue
+++ b/frontend/src/views/client/Home.vue
@@ -1,33 +1,31 @@
 <template>
-  <LayoutDashboard>
-    <div class="p-6 space-y-6">
-      <Header />
+    <LayoutDashboard>
+        <div class="p-6 space-y-6">
+            <Header />
 
-      <div class="grid gap-6 lg:grid-cols-4">
-        <!-- Left Column -->
-        <div class="space-y-6">
-          <SupportPin />
-          <!-- User Info -->
-          <UserInfo />
-          <!-- Billing Summary -->
-          <BillingInfo />
+            <div class="grid gap-6 lg:grid-cols-4">
+                <!-- Left Column -->
+                <div class="space-y-6">
+                    <SupportPin />
+                    <!-- User Info -->
+                    <UserInfo />
+                    <!-- Billing Summary -->
+                    <BillingInfo />
+                </div>
+                <!-- Main Content -->
+                <div class="lg:col-span-3 space-y-6">
+                    <!-- Stats Grid -->
+                    <Stats />
+                    <!-- Active Products -->
+                    <ProductList />
+                    <!-- Recent Tickets -->
+                    <TicketList />
+                    <!-- Announcements -->
+                </div>
+            </div>
+            <Announcements />
         </div>
-        <!-- Main Content -->
-        <div class="lg:col-span-3 space-y-6">
-          <!-- Stats Grid -->
-          <Stats />
-          <!-- Active Products -->
-          <ProductList />
-          <!-- Recent Tickets -->
-          <TicketList />
-          <!-- Announcements -->
-        </div>
-
-      </div>
-      <Announcements />
-
-    </div>
-  </LayoutDashboard>
+    </LayoutDashboard>
 </template>
 
 <script setup lang="ts">
@@ -44,5 +42,5 @@ import Header from '@/components/client/Dashboard/Main/Header.vue';
 import Settings from '@/mythicalclient/Settings';
 const { t } = useI18n();
 
-document.title = Settings.getSetting('app_name') + " - " + t("dashboard.title");
+document.title = Settings.getSetting('app_name') + ' - ' + t('dashboard.title');
 </script>
diff --git a/frontend/src/views/client/ticket/Create.vue b/frontend/src/views/client/ticket/Create.vue
index f261d1a..c86771c 100755
--- a/frontend/src/views/client/ticket/Create.vue
+++ b/frontend/src/views/client/ticket/Create.vue
@@ -18,202 +18,232 @@ const { play: playError } = useSound(failedAlertSfx);
 const { play: playSuccess } = useSound(successAlertSfx);
 const router = useRouter();
 
+document.title = t('account.pages.create_ticket.title');
+
 interface Department {
-  id: number;
-  name: string;
-  description: string;
-  time_open: string;
-  time_close: string;
-  enabled: string;
-  deleted: string;
-  locked: string;
-  date: string;
+    id: number;
+    name: string;
+    description: string;
+    time_open: string;
+    time_close: string;
+    enabled: string;
+    deleted: string;
+    locked: string;
+    date: string;
 }
 
 interface Service {
-  id: number;
-  name: string;
-  active: boolean;
+    id: number;
+    name: string;
+    active: boolean;
 }
 
 interface TicketCreateInfo {
-  departments: Department[];
-  services: Service[];
+    departments: Department[];
+    services: Service[];
 }
 
 const ticketCreateInfo = ref<TicketCreateInfo | null>(null);
 const loading = ref(false);
 
 const fetchTicketCreateInfo = async () => {
-  try {
-    const response = await Tickets.getTicketCreateInfo();
-    if (response.success) {
-      ticketCreateInfo.value = {
-        departments: response.departments,
-        services: response.services
-      };
-    } else {
-      console.error('Failed to fetch ticket create info:', response.error);
+    try {
+        const response = await Tickets.getTicketCreateInfo();
+        if (response.success) {
+            ticketCreateInfo.value = {
+                departments: response.departments,
+                services: response.services,
+            };
+        } else {
+            console.error('Failed to fetch ticket create info:', response.error);
+        }
+    } catch (error) {
+        console.error('Error fetching ticket create info:', error);
     }
-  } catch (error) {
-    console.error('Error fetching ticket create info:', error);
-  }
 };
 
 onMounted(() => {
-  fetchTicketCreateInfo();
+    fetchTicketCreateInfo();
 });
 
 const ticket = ref({
-  service: '',
-  department: '',
-  priority: 'medium',
-  subject: '',
-  message: ''
+    service: '',
+    department: '',
+    priority: 'medium',
+    subject: '',
+    message: '',
 });
 
 const priorities = [
-  { value: 'low', label: 'Low' },
-  { value: 'medium', label: 'Medium' },
-  { value: 'high', label: 'High' },
-  { value: 'urgent', label: 'Urgent' }
+    { value: 'low', label: t('account.pages.create_ticket.types.priority.low') },
+    { value: 'medium', label: t('account.pages.create_ticket.types.priority.medium') },
+    { value: 'high', label: t('account.pages.create_ticket.types.priority.high') },
+    { value: 'urgent', label: t('account.pages.create_ticket.types.priority.urgent') },
 ];
 
 const submitTicket = async () => {
-  loading.value = true;
-  try {
-    // Handle ticket submission
-    console.log('Submitting ticket:', ticket.value);
-
-    const response = await Tickets.createTicket(Number(ticket.value.department), ticket.value.subject, ticket.value.message, ticket.value.priority, Number(ticket.value.service));
-
-    if (!response.success) {
-      const error_code = response.error_code as keyof typeof errorMessages;
-
-      const errorMessages = {
-
-      };
-
-      if (errorMessages[error_code]) {
-        playError();
-        Swal.fire({
-          icon: 'error',
-          title: "Error while creating ticket!",
-          text: errorMessages[error_code],
-          footer: "Kinda funny since you tried to create a ticket",
-          showConfirmButton: true,
-        });
+    loading.value = true;
+    try {
+        // Handle ticket submission
+        console.log('Submitting ticket:', ticket.value);
+
+        const response = await Tickets.createTicket(
+            Number(ticket.value.department),
+            ticket.value.subject,
+            ticket.value.message,
+            ticket.value.priority,
+            Number(ticket.value.service),
+        );
+
+        if (!response.success) {
+            const error_code = response.error_code as keyof typeof errorMessages;
+
+            const errorMessages = {
+                LIMIT_REACHED: t('account.pages.create_ticket.alerts.error.limit_reached'),
+                FAILED_TO_CREATE_TICKET: t('account.pages.create_ticket.alerts.error.generic'),
+                DEPARTMENT_NOT_FOUND: t('account.pages.create_ticket.alerts.error.department_not_found'),
+                DEPARTMENT_ID_MISSING: t('account.pages.create_ticket.alerts.error.department_id_missing'),
+                MESSAGE_MISSING: t('account.pages.create_ticket.alerts.error.message_missing'),
+                SUBJECT_MISSING: t('account.pages.create_ticket.alerts.error.subject_missing'),
+            };
+
+            if (errorMessages[error_code]) {
+                playError();
+                Swal.fire({
+                    icon: 'error',
+                    title: t('account.pages.create_ticket.alerts.error.title'),
+                    text: errorMessages[error_code],
+                    footer: t('account.pages.create_ticket.alerts.error.footer'),
+                    showConfirmButton: true,
+                });
+                loading.value = false;
+                throw new Error('Login failed');
+            } else {
+                playError();
+                Swal.fire({
+                    icon: 'error',
+                    title: t('account.pages.create_ticket.alerts.error.title'),
+                    text: t('account.pages.create_ticket.alerts.error.generic'),
+                    footer: t('account.pages.create_ticket.alerts.error.footer'),
+                    showConfirmButton: true,
+                });
+                loading.value = false;
+                throw new Error('Ticket creation failed');
+            }
+        } else {
+            playSuccess();
+            Swal.fire({
+                icon: 'success',
+                title: t('account.pages.create_ticket.alerts.success.title'),
+                text: t('account.pages.create_ticket.alerts.success.ticket_success'),
+                footer: t('account.pages.create_ticket.alerts.success.footer'),
+                showConfirmButton: true,
+            });
+            loading.value = false;
+            setTimeout(() => {
+                router.push('/ticket');
+            }, 1500);
+            console.log('Ticket submitted successfully:', response.ticket);
+        }
+
+        await new Promise((resolve) => setTimeout(resolve, 2000));
+    } catch (error) {
+        console.error('Error submitting ticket:', error);
+    } finally {
         loading.value = false;
-        throw new Error('Login failed');
-      } else {
-        playError();
-        Swal.fire({
-          icon: 'error',
-          title: "Error while creating ticket!",
-          text: "We never expected this to happen",
-          footer: "Kinda funny since you tried to create a ticket",
-          showConfirmButton: true,
-        });
-        loading.value = false;
-        throw new Error('Ticket creation failed');
-      }
-    } else {
-      playSuccess();
-      Swal.fire({
-        icon: 'success',
-        title: "Ticket submitted successfully!",
-        text: "Your ticket has been submitted successfully",
-        footer: "You will be redirected to the ticket page",
-        showConfirmButton: true,
-      });
-      loading.value = false;
-      setTimeout(() => {
-        router.push('/ticket');
-      }, 1500);
-      console.log('Ticket submitted successfully:', response.ticket);
     }
-
-    await new Promise(resolve => setTimeout(resolve, 2000));
-  } catch (error) {
-    console.error('Error submitting ticket:', error);
-  } finally {
-    loading.value = false;
-  }
 };
 </script>
 
 <template>
-  <LayoutDashboard>
-    <div class="space-y-6">
-      <div class="flex justify-between items-center">
-        <h1 class="text-2xl font-semibold text-gray-100">Support Tickets</h1>
-        <router-link to="/ticket">
-          <button
-            class="bg-gray-600 hover:bg-gray-700 text-white px-6 py-2.5 rounded-lg font-medium transition-colors duration-200">
-            Back
-          </button>
-        </router-link>
-      </div>
-      <CardComponent cardTitle="Create a Ticket" cardDescription="Submit a new ticket to our support team.">
-        <form @submit.prevent="submitTicket" class="space-y-6">
-          <!-- Service Selection -->
-          <div>
-            <label class="block text-sm font-medium text-gray-300 mb-2">
-              Related Service
-            </label>
-            <SelectInput v-model="ticket.service" :options="ticketCreateInfo?.services.map(service => ({
-              value: service.id.toString(),
-              label: service.name
-            })) || []" />
-          </div>
-
-          <!-- Department -->
-          <div>
-            <label class="block text-sm font-medium text-gray-300 mb-2">
-              Department
-            </label>
-            <SelectInput v-model="ticket.department" :options="ticketCreateInfo?.departments
-              .filter(dept => dept.enabled === 'true')
-              .map(dept => ({
-                value: dept.id.toString(),
-                label: `${dept.name} (${dept.time_open} - ${dept.time_close}) - ${dept.description}`
-              })) || []" />
-          </div>
-
-          <!-- Priority -->
-          <div>
-            <label class="block text-sm font-medium text-gray-300 mb-2">
-              Priority
-            </label>
-            <SelectInput v-model="ticket.priority" :options="priorities" />
-          </div>
-
-          <!-- Subject -->
-          <div>
-            <label class="block text-sm font-medium text-gray-300 mb-2">
-              Subject
-            </label>
-            <TextInput v-model="ticket.subject" type="text" required placeholder="Enter ticket subject" />
-          </div>
-
-          <!-- Message -->
-          <div>
-            <label class="block text-sm font-medium text-gray-300 mb-2">
-              Message
-            </label>
-            <TextArea v-model="ticket.message" rows="6" required placeholder="Describe your issue..." />
-          </div>
-
-          <!-- Submit Button -->
-          <div class="flex justify-end">
-            <button type="submit" :disabled="loading"
-              class="bg-purple-600 hover:bg-purple-700 text-white px-6 py-2.5 rounded-lg font-medium transition-colors duration-200">
-              <span v-if="loading">Submitting...</span>
-              <span v-else>Submit Ticket</span>
-            </button>
-          </div>
-        </form>
-      </CardComponent>
-    </div>
-  </LayoutDashboard>
+    <LayoutDashboard>
+        <div class="space-y-6">
+            <div class="flex justify-between items-center">
+                <h1 class="text-2xl font-semibold text-gray-100">{{ t('account.pages.create_ticket.title') }}</h1>
+                <router-link to="/ticket">
+                    <button
+                        class="bg-gray-600 hover:bg-gray-700 text-white px-6 py-2.5 rounded-lg font-medium transition-colors duration-200"
+                    >
+                        {{ t('account.pages.create_ticket.form.back') }}
+                    </button>
+                </router-link>
+            </div>
+            <CardComponent
+                :cardTitle="t('account.pages.create_ticket.title')"
+                :cardDescription="t('account.pages.create_ticket.subTitle')"
+            >
+                <form @submit.prevent="submitTicket" class="space-y-6">
+                    <!-- Service Selection -->
+                    <div>
+                        <label class="block text-sm font-medium text-gray-300 mb-2">
+                            {{ t('account.pages.create_ticket.form.service') }}
+                        </label>
+                        <SelectInput
+                            v-model="ticket.service"
+                            :options="
+                                ticketCreateInfo?.services.map((service) => ({
+                                    value: service.id.toString(),
+                                    label: service.name,
+                                })) || []
+                            "
+                        />
+                    </div>
+
+                    <!-- Department -->
+                    <div>
+                        <label class="block text-sm font-medium text-gray-300 mb-2">
+                            {{ t('account.pages.create_ticket.form.department') }}
+                        </label>
+                        <SelectInput
+                            v-model="ticket.department"
+                            :options="
+                                ticketCreateInfo?.departments
+                                    .filter((dept) => dept.enabled === 'true')
+                                    .map((dept) => ({
+                                        value: dept.id.toString(),
+                                        label: `${dept.name} (${dept.time_open} - ${dept.time_close}) - ${dept.description}`,
+                                    })) || []
+                            "
+                        />
+                    </div>
+
+                    <!-- Priority -->
+                    <div>
+                        <label class="block text-sm font-medium text-gray-300 mb-2">
+                            {{ t('account.pages.create_ticket.form.priority') }}
+                        </label>
+                        <SelectInput v-model="ticket.priority" :options="priorities" />
+                    </div>
+
+                    <!-- Subject -->
+                    <div>
+                        <label class="block text-sm font-medium text-gray-300 mb-2">
+                            {{ t('account.pages.create_ticket.form.subject') }}
+                        </label>
+                        <TextInput v-model="ticket.subject" type="text" required placeholder="Enter ticket subject" />
+                    </div>
+
+                    <!-- Message -->
+                    <div>
+                        <label class="block text-sm font-medium text-gray-300 mb-2">
+                            {{ t('account.pages.create_ticket.form.message') }}
+                        </label>
+                        <TextArea v-model="ticket.message" rows="6" required placeholder="Describe your issue..." />
+                    </div>
+
+                    <!-- Submit Button -->
+                    <div class="flex justify-end">
+                        <button
+                            type="submit"
+                            :disabled="loading"
+                            class="bg-purple-600 hover:bg-purple-700 text-white px-6 py-2.5 rounded-lg font-medium transition-colors duration-200"
+                        >
+                            <span v-if="loading">{{ t('account.pages.create_ticket.form.loading') }}</span>
+                            <span v-else>{{ t('account.pages.create_ticket.form.submit') }}</span>
+                        </button>
+                    </div>
+                </form>
+            </CardComponent>
+        </div>
+    </LayoutDashboard>
 </template>
diff --git a/frontend/src/views/client/ticket/List.vue b/frontend/src/views/client/ticket/List.vue
index bba8318..96df31e 100755
--- a/frontend/src/views/client/ticket/List.vue
+++ b/frontend/src/views/client/ticket/List.vue
@@ -1,99 +1,237 @@
 <script setup lang="ts">
+import { ref, onMounted, onErrorCaptured, computed, h } from 'vue';
+import { useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { format } from 'date-fns';
 import LayoutDashboard from '@/components/client/LayoutDashboard.vue';
 import TableTanstack from '@/components/client/ui/Table/TableTanstack.vue';
-import { h } from 'vue';
-import { useRouter } from 'vue-router';
+import Tickets from '@/mythicalclient/Tickets';
+import { AlertCircle, Plus, Ticket } from 'lucide-vue-next';
 
 const router = useRouter();
+const { t } = useI18n();
 
-const Tickets = [
-    {
-        id: 1,
-        department: 'IT Support',
-        subject: 'Computer not starting',
-        status: 'Open',
-        category: 'Hardware',
-        created_at: '2023-10-01',
-    },
-    {
-        id: 2,
-        department: 'HR',
-        subject: 'Payroll issue',
-        status: 'In Progress',
-        category: 'Payroll',
-        created_at: '2023-10-01',
-    },
-    {
-        id: 3,
-        department: 'IT Support',
-        subject: 'Email not working',
-        status: 'Closed',
-        category: 'Software',
-        created_at: '2023-10-01',
-    },
-    {
-        id: 4,
-        department: 'Facilities',
-        subject: 'Broken AC',
-        status: 'Open',
-        category: 'Maintenance',
-        created_at: '2023-10-01',
-    },
-];
+interface Department {
+    id: number;
+    name: string;
+    description: string;
+    time_open: string;
+    time_close: string;
+    enabled: string;
+    deleted: string;
+    locked: string;
+    date: string;
+}
+
+interface Ticket {
+    id: number;
+    user: string;
+    department: Department;
+    priority: string;
+    status: string;
+    service: number | null;
+    title: string;
+    description: string;
+    deleted: string;
+    locked: string;
+    date: string;
+    department_id: number;
+}
+
+const tickets = ref<Ticket[]>([]);
+const loading = ref(true);
+const error = ref<string | null>(null);
+
+const fetchTickets = async () => {
+    try {
+        const response = await Tickets.getTickets();
+        if (response.success && Array.isArray(response.tickets)) {
+            tickets.value = response.tickets;
+        } else {
+            throw new Error(response.error || 'Failed to fetch tickets');
+        }
+    } catch (err) {
+        error.value = err instanceof Error ? err.message : t('account.pages.tickets.alerts.error.generic');
+    } finally {
+        loading.value = false;
+    }
+};
+
+onMounted(fetchTickets);
+
+onErrorCaptured((err) => {
+    error.value = t('account.pages.tickets.alerts.error.generic');
+    console.error('Error captured:', err);
+    return false;
+});
+
+const filteredTickets = computed(() => {
+    return tickets.value.filter((ticket) => ticket.status.toUpperCase() !== 'CLOSED');
+});
 const columnsTickets = [
     {
-        accessorKey: 'department',
-        header: 'Department',
+        accessorKey: 'title',
+        header: t('account.pages.tickets.table.subject'),
     },
     {
-        accessorKey: 'subject',
-        header: 'Subject',
+        accessorKey: 'status',
+        header: t('account.pages.tickets.table.status'),
+        cell: (info: { getValue: () => string }) => {
+            const status = info.getValue().toUpperCase();
+            let statusClass = '';
+            switch (status) {
+                case 'OPEN':
+                    statusClass = 'bg-green-100 text-green-800';
+                    break;
+                case 'CLOSED':
+                    statusClass = 'bg-red-100 text-red-800';
+                    break;
+                case 'WAITING':
+                    statusClass = 'bg-yellow-100 text-yellow-800';
+                    break;
+                case 'REPLIED':
+                    statusClass = 'bg-blue-100 text-blue-800';
+                    break;
+                case 'INPROGRESS':
+                    statusClass = 'bg-orange-100 text-orange-800';
+                    break;
+                default:
+                    statusClass = 'bg-gray-100 text-gray-800';
+            }
+            return h(
+                'span',
+                { class: `px-2 py-1 rounded-full text-xs font-semibold ${statusClass} dark:bg-opacity-50` },
+                status === 'INPROGRESS' ? 'IN PROGRESS' : status,
+            );
+        },
     },
     {
-        accessorKey: 'status',
-        header: 'Status',
+        accessorKey: 'priority',
+        header: t('account.pages.tickets.table.priority'),
+        cell: (info: { getValue: () => string }) => {
+            const priority = info.getValue().toUpperCase();
+            let priorityClass = '';
+            switch (priority) {
+                case 'LOW':
+                    priorityClass = 'bg-green-100 text-green-800';
+                    break;
+                case 'MEDIUM':
+                    priorityClass = 'bg-yellow-100 text-yellow-800';
+                    break;
+                case 'HIGH':
+                    priorityClass = 'bg-orange-100 text-orange-800';
+                    break;
+                case 'URGENT':
+                    priorityClass = 'bg-red-100 text-red-800';
+                    break;
+                default:
+                    priorityClass = 'bg-gray-100 text-gray-800';
+            }
+            return h(
+                'span',
+                { class: `px-2 py-1 rounded-full text-xs font-semibold ${priorityClass} dark:bg-opacity-50` },
+                priority,
+            );
+        },
     },
     {
-        accessorKey: 'category',
-        header: 'Category',
+        accessorKey: 'department.name',
+        header: t('account.pages.tickets.table.department'),
     },
     {
-        accessorKey: 'created_at',
-        header: 'Created',
+        accessorKey: 'date',
+        header: t('account.pages.tickets.table.created'),
+        cell: (info: { getValue: () => string | number | Date }) => format(new Date(info.getValue()), 'MMM d, yyyy'),
     },
     {
         accessorKey: 'actions',
-        header: 'Actions',
+        header: t('account.pages.tickets.table.actions'),
+        enableSorting: false,
         cell: ({ row }: { row: { original: { id: number } } }) =>
             h(
                 'button',
                 {
-                    onClick: () => callMovetoTicket(row.original.id),
+                    onClick: () => viewTicket(row.original.id),
                     class: 'text-purple-500 hover:underline',
                 },
-                'View',
+                t('account.pages.tickets.actions.view'),
             ),
     },
 ];
 
-function callMovetoTicket(id: number) {
-    console.log('Move to ticket with ID:', id);
+function viewTicket(id: number) {
     router.push(`/ticket/${id}`);
 }
+
+function createNewTicket() {
+    router.push('/ticket/create');
+}
 </script>
 
 <template>
     <LayoutDashboard>
-        <div class="space-y-6">
+        <div class="space-y-6 p-6">
             <div class="flex justify-between items-center">
-                <h1 class="text-2xl font-semibold text-gray-100">Support Tickets</h1>
+                <h1 class="text-3xl font-bold text-gray-100">{{ t('account.pages.tickets.title') }}</h1>
                 <button
-                    class="px-4 py-2 bg-purple-500 hover:bg-purple-600 text-white rounded-lg text-sm font-medium transition-colors"
+                    @click="createNewTicket"
+                    class="px-4 py-2 bg-purple-500 hover:bg-purple-600 text-white rounded-lg text-sm font-medium transition-colors flex items-center space-x-2"
                 >
-                    New Ticket
+                    <Plus class="w-4 h-4" />
+                    <span>{{ t('account.pages.tickets.actions.newTicket') }}</span>
                 </button>
             </div>
-            <TableTanstack :data="Tickets" :columns="columnsTickets" tableName="Your tickets" />
+
+            <Transition name="fade" mode="out-in">
+                <div v-if="loading" class="space-y-4" key="loading">
+                    <div v-for="i in 5" :key="i" class="bg-gray-800 rounded-lg p-4 animate-pulse">
+                        <div class="h-6 bg-gray-700 rounded w-3/4 mb-2"></div>
+                        <div class="h-4 bg-gray-700 rounded w-1/2"></div>
+                    </div>
+                </div>
+
+                <div
+                    v-else-if="error"
+                    class="bg-red-900 border border-red-700 text-red-100 px-4 py-3 rounded-lg flex items-center space-x-2"
+                    role="alert"
+                    key="error"
+                >
+                    <AlertCircle class="w-5 h-5 flex-shrink-0" />
+                    <p>{{ error }}</p>
+                </div>
+
+                <div v-else-if="tickets.length === 0" class="text-center py-12 bg-gray-800 rounded-lg" key="empty">
+                    <Ticket class="w-16 h-16 text-gray-600 mx-auto mb-4" />
+                    <p class="text-xl font-semibold text-gray-300">{{ t('account.pages.tickets.noTickets') }}</p>
+                    <p class="text-gray-400 mt-2">{{ t('account.pages.tickets.createNewTicket') }}</p>
+                    <button
+                        @click="createNewTicket"
+                        class="mt-4 px-4 py-2 bg-purple-500 hover:bg-purple-600 text-white rounded-lg text-sm font-medium transition-colors"
+                    >
+                        {{ t('account.pages.tickets.actions.newTicket') }}
+                    </button>
+                </div>
+
+                <div v-else key="table">
+                    <TableTanstack
+                        :data="filteredTickets"
+                        :columns="columnsTickets"
+                        :tableName="t('account.pages.tickets.table.title')"
+                    />
+                </div>
+            </Transition>
         </div>
     </LayoutDashboard>
 </template>
+
+<style scoped>
+.fade-enter-active,
+.fade-leave-active {
+    transition: opacity 0.5s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+    opacity: 0;
+}
+</style>