diff --git a/src/index.css b/src/index.css
index 79ce83c..b155180 100755
--- a/src/index.css
+++ b/src/index.css
@@ -1,4 +1,6 @@
 
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
\ No newline at end of file
+@tailwind utilities;
+
+/* Hide header and sidebar when printing */
diff --git a/src/layouts/sidebar/sidebar.vue b/src/layouts/sidebar/sidebar.vue
index a8a1806..18cec40 100755
--- a/src/layouts/sidebar/sidebar.vue
+++ b/src/layouts/sidebar/sidebar.vue
@@ -61,6 +61,12 @@
         <summary class="font-bold text-lg">Service</summary>
         <ul>
           <li><router-link :to="{ name: 'ServiceCalendar' }" exact-active-class="active">Service Calendar</router-link></li>
+           <li>
+            <router-link :to="{ name: 'ServiceToday' }" exact-active-class="active">
+              Today's Service Calls
+              <span v-if="countsStore.today_service > 0" class="badge badge-secondary">{{ countsStore.today_service }}</span>
+            </router-link>
+          </li>
           <li>
             <router-link :to="{ name: 'ServiceHome' }" exact-active-class="active">
               Upcoming Service
@@ -114,4 +120,4 @@ onMounted(() => {
   countsStore.fetchSidebarCounts();
   // You can remove your other update functions if their logic is now handled elsewhere
 });
-</script>
\ No newline at end of file
+</script>
diff --git a/src/pages/card/addcard.vue b/src/pages/card/addcard.vue
index 3026409..12071b3 100755
--- a/src/pages/card/addcard.vue
+++ b/src/pages/card/addcard.vue
@@ -27,7 +27,14 @@
           <div>
             <div>{{ customer.customer_address }}</div>
             <div v-if="customer.customer_apt && customer.customer_apt !== 'None'">{{ customer.customer_apt }}</div>
-            <div>{{ customer.customer_town }}, {{ customer.customer_state }} {{ customer.customer_zip }}</div>
+            <div>{{ customer.customer_town }},  <span v-if="customer.customer_state == 0">Massachusetts</span>
+              <span v-else-if="customer.customer_state == 1">Rhode Island</span>
+              <span v-else-if="customer.customer_state == 2">New Hampshire</span>
+              <span v-else-if="customer.customer_state == 3">Maine</span>
+              <span v-else-if="customer.customer_state == 4">Vermont</span>
+              <span v-else-if="customer.customer_state == 5">Connecticut</span>
+              <span v-else-if="customer.customer_state == 6">New York</span>
+              <span v-else>Unknown state</span> {{ customer.customer_zip }}</div>
           </div>
         </div>
       </div>
diff --git a/src/pages/card/editcard.vue b/src/pages/card/editcard.vue
index e2e7eac..6edc4cc 100755
--- a/src/pages/card/editcard.vue
+++ b/src/pages/card/editcard.vue
@@ -28,7 +28,14 @@
           <div>
             <div>{{ customer.customer_address }}</div>
             <div v-if="customer.customer_apt && customer.customer_apt !== 'None'">{{ customer.customer_apt }}</div>
-            <div>{{ customer.customer_town }}, {{ customer.customer_state }} {{ customer.customer_zip }}</div>
+            <div>{{ customer.customer_town }},  <span v-if="customer.customer_state == 0">Massachusetts</span>
+              <span v-else-if="customer.customer_state == 1">Rhode Island</span>
+              <span v-else-if="customer.customer_state == 2">New Hampshire</span>
+              <span v-else-if="customer.customer_state == 3">Maine</span>
+              <span v-else-if="customer.customer_state == 4">Vermont</span>
+              <span v-else-if="customer.customer_state == 5">Connecticut</span>
+              <span v-else-if="customer.customer_state == 6">New York</span>
+              <span v-else>Unknown state</span> {{ customer.customer_zip }}</div>
           </div>
         </div>
 
diff --git a/src/pages/service/ServiceToday.vue b/src/pages/service/ServiceToday.vue
new file mode 100644
index 0000000..d4f3ff0
--- /dev/null
+++ b/src/pages/service/ServiceToday.vue
@@ -0,0 +1,327 @@
+<!-- src/pages/service/ServiceToday.vue -->
+
+<template>
+  <div class="flex">
+    <div class="w-full px-4 md:px-10 py-4">
+      <!-- Breadcrumbs & Title -->
+      <div class="text-sm breadcrumbs">
+        <ul>
+          <li><router-link :to="{ name: 'home' }">Home</router-link></li>
+          <li>Today's Service Calls</li>
+        </ul>
+      </div>
+
+      <!-- Main Content Card -->
+      <div class="bg-neutral rounded-lg p-4 sm:p-6 mt-6">
+        <!-- Header: Title and Count -->
+        <div class="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-4 mb-4">
+          <h2 class="text-lg font-bold">Today's Service Calls</h2>
+          <div v-if="!isLoading" class="badge badge-ghost">{{ services.length }} calls found</div>
+        </div>
+        <div class="divider"></div>
+
+        <!-- Loading State -->
+        <div v-if="isLoading" class="text-center p-10">
+          <span class="loading loading-spinner loading-lg"></span>
+          <p class="mt-2">Loading service calls...</p>
+        </div>
+
+        <!-- Empty State -->
+        <div v-else-if="services.length === 0" class="text-center p-10">
+          <p>No service calls for today.</p>
+        </div>
+
+        <!-- Data Display -->
+        <div v-else>
+          <!-- DESKTOP VIEW: Table (Revamped) -->
+          <div class="overflow-x-auto hidden xl:block">
+            <table class="table w-full">
+              <thead>
+                <tr>
+                  <th>Date / Time</th>
+                  <th>Customer</th>
+                  <th>Address</th>
+                  <th>Service Type</th>
+                  <th>Description</th>
+                  <th class="text-right">Cost</th>
+                  <th class="text-right">Actions</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-for="service in services" :key="service.id" class="hover:bg-blue-600">
+                  <td class="align-top">
+                    <div>{{ formatDate(service.scheduled_date) }}</div>
+                    <div class="text-xs opacity-70">{{ formatTime(service.scheduled_date) }}</div>
+                  </td>
+                  <td class="align-top">{{ service.customer_name }}</td>
+                  <td class="align-top">{{ service.customer_address }}, {{ service.customer_town }}</td>
+
+                  <!--
+                    FIX IS HERE: Replaced the colored text with a styled badge.
+                    - `badge-sm`: Makes the pill small and compact.
+                    - `text-white`: Ensures text is readable against the colored background.
+                    - The background color is set dynamically using your existing `getServiceTypeColor` method.
+                  -->
+                  <td class="align-top">
+                    <span
+                      class="badge badge-sm text-white"
+                      :style="{ 'background-color': getServiceTypeColor(service.type_service_call), 'border-color': getServiceTypeColor(service.type_service_call) }"
+                    >
+                      {{ getServiceTypeName(service.type_service_call) }}
+                    </span>
+                  </td>
+
+                  <td class="whitespace-normal text-sm align-top">
+                    <div v-if="!isLongDescription(service.description) || isExpanded(service.id)">
+                      {{ service.description }}
+                      <a v-if="isLongDescription(service.description)" @click.prevent="toggleExpand(service.id)" href="#" class="link link-info link-hover text-xs ml-1 whitespace-nowrap">Show less</a>
+                    </div>
+                    <div v-else>
+                      {{ truncateDescription(service.description) }}
+                      <a @click.prevent="toggleExpand(service.id)" href="#" class="link link-info link-hover text-xs ml-1 whitespace-nowrap">Read more</a>
+                    </div>
+                  </td>
+                  <td class="text-right font-mono align-top">{{ formatCurrency(service.service_cost) }}</td>
+                  <td class="text-right align-top">
+                    <button @click="openEditModal(service)" class="btn btn-sm btn-primary">View</button>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+
+          <!-- MOBILE VIEW: Cards (Revamped) -->
+          <div class="xl:hidden space-y-4">
+            <div v-for="service in services" :key="service.id" class="card bg-base-100 shadow-md ">
+              <div class="card-body p-4">
+                <div class="flex justify-between items-start">
+                  <div>
+                    <h2 class="card-title text-base">{{ service.customer_name }}</h2>
+                    <p class="text-xs text-gray-400">{{ service.customer_address }}, {{ service.customer_town }}</p>
+                  </div>
+                  <!-- Mobile view already uses a badge, which is great! No changes needed here. -->
+                  <div class="badge badge-outline text-right" :style="{ 'border-color': getServiceTypeColor(service.type_service_call), color: getServiceTypeColor(service.type_service_call) }">
+                    {{ getServiceTypeName(service.type_service_call) }}
+                  </div>
+                </div>
+
+                <div class="text-sm mt-2 grid grid-cols-2 gap-x-4 gap-y-1">
+                  <p><strong class="font-semibold">Date:</strong> {{ formatDate(service.scheduled_date) }}</p>
+                  <p><strong class="font-semibold">Time:</strong> {{ formatTime(service.scheduled_date) }}</p>
+                  <p><strong class="font-semibold">Cost:</strong> <span class="font-mono">{{ formatCurrency(service.service_cost) }}</span></p>
+                </div>
+
+                <div v-if="service.description" class="text-sm mt-2 p-2 bg-base-200 rounded-md prose max-w-none">
+                  <div v-if="!isLongDescription(service.description) || isExpanded(service.id)">
+                    {{ service.description }}
+                    <a v-if="isLongDescription(service.description)" @click.prevent="toggleExpand(service.id)" href="#" class="link link-info link-hover text-xs ml-1 whitespace-nowrap">Show less</a>
+                  </div>
+                  <div v-else>
+                    {{ truncateDescription(service.description) }}
+                    <a @click.prevent="toggleExpand(service.id)" href="#" class="link link-info link-hover text-xs ml-1 whitespace-nowrap">Read more</a>
+                  </div>
+                </div>
+
+                <div class="card-actions justify-end mt-2">
+                  <button @click="openEditModal(service)" class="btn btn-sm btn-primary">View</button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <Footer />
+
+  <ServiceEditModal
+    v-if="selectedServiceForEdit"
+    :service="selectedServiceForEdit"
+    @close-modal="closeEditModal"
+    @save-changes="handleSaveChanges"
+    @delete-service="handleDeleteService"
+  />
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import axios from 'axios'
+import authHeader from '../../services/auth.header'
+import Footer from '../../layouts/footers/footer.vue'
+import ServiceEditModal from './ServiceEditModal.vue'
+import dayjs from 'dayjs';
+
+interface ServiceCall {
+  id: number;
+  scheduled_date: string;
+  customer_id: number;
+  customer_name: string;
+  customer_address: string;
+  customer_town: string;
+  type_service_call: number;
+  description: string;
+  service_cost: string;
+}
+
+export default defineComponent({
+  name: 'ServiceToday',
+  components: { Footer, ServiceEditModal },
+  data() {
+    return {
+      user: null,
+      services: [] as ServiceCall[],
+      isLoading: true,
+      selectedServiceForEdit: null as ServiceCall | null,
+      // --- ADDITIONS FOR TRUNCATION ---
+      wordLimit: 50,
+      expandedIds: [] as number[],
+    }
+  },
+  created() {
+    this.userStatus();
+    this.fetchTodayServices();
+  },
+  methods: {
+    // --- NEW METHODS FOR TRUNCATION ---
+    isLongDescription(text: string): boolean {
+      if (!text) return false;
+      return text.split(/\s+/).length > this.wordLimit;
+    },
+    truncateDescription(text: string): string {
+      if (!this.isLongDescription(text)) return text;
+      const words = text.split(/\s+/);
+      return words.slice(0, this.wordLimit).join(' ') + '...';
+    },
+    isExpanded(id: number): boolean {
+      return this.expandedIds.includes(id);
+    },
+    toggleExpand(id: number): void {
+      const index = this.expandedIds.indexOf(id);
+      if (index === -1) {
+        this.expandedIds.push(id);
+      } else {
+        this.expandedIds.splice(index, 1);
+      }
+    },
+
+    // --- API and Data Handling Methods ---
+    async fetchTodayServices(): Promise<void> {
+      this.isLoading = true;
+      try {
+        const path = import.meta.env.VITE_BASE_URL + '/service/today';
+        const response = await axios.get(path, {
+          headers: authHeader(),
+          withCredentials: true,
+        });
+        this.services = response.data;
+      } catch (error) {
+        console.error("Failed to fetch today's service calls:", error);
+      } finally {
+        this.isLoading = false;
+      }
+    },
+
+    userStatus() {
+      let path = import.meta.env.VITE_BASE_URL + '/auth/whoami';
+      axios({
+        method: 'get',
+        url: path,
+        withCredentials: true,
+        headers: authHeader(),
+      })
+        .then((response: any) => {
+          if (response.data.ok) {
+            this.user = response.data.user;
+          }
+        })
+        .catch(() => {
+          this.user = null
+        })
+    },
+
+    openEditModal(service: ServiceCall) {
+      this.selectedServiceForEdit = service;
+    },
+
+    closeEditModal() {
+      this.selectedServiceForEdit = null;
+    },
+
+    async handleSaveChanges(updatedService: ServiceCall) {
+      try {
+        const path = `${import.meta.env.VITE_BASE_URL}/service/update/${updatedService.id}`;
+        const response = await axios.put(path, updatedService, { headers: authHeader(), withCredentials: true });
+        if (response.data.ok) {
+          const index = this.services.findIndex(s => s.id === updatedService.id);
+          if (index !== -1) {
+            this.services[index] = response.data.service;
+          }
+          this.closeEditModal();
+        }
+      } catch (error) {
+        console.error("Failed to save changes:", error);
+        alert("An error occurred while saving. Please check the console.");
+      }
+    },
+
+    async handleDeleteService(serviceId: number) {
+      try {
+        const path = `${import.meta.env.VITE_BASE_URL}/service/delete/${serviceId}`;
+        const response = await axios.delete(path, { headers: authHeader(), withCredentials: true });
+        if (response.data.ok) {
+          this.services = this.services.filter(s => s.id !== serviceId);
+          this.closeEditModal();
+        }
+      } catch (error) {
+        console.error("Failed to delete service call:", error);
+        alert("An error occurred while deleting. Please check the console.");
+      }
+    },
+
+    // --- Formatting and Display Methods ---
+    formatCurrency(value: string | number): string {
+      if (value === null || value === undefined || value === '') return '$0.00';
+      const numberValue = Number(value);
+      if (isNaN(numberValue)) return '$0.00';
+
+      return new Intl.NumberFormat('en-US', {
+        style: 'currency',
+        currency: 'USD',
+      }).format(numberValue);
+    },
+
+    formatDate(dateString: string): string {
+      if (!dateString) return 'N/A';
+      return dayjs(dateString).format('MMMM D, YYYY');
+    },
+
+    formatTime(dateString: string): string {
+      if (!dateString) return 'N/A';
+      return dayjs(dateString).format('h:mm A');
+    },
+
+    getServiceTypeName(typeId: number): string {
+      const typeMap: { [key: number]: string } = {
+        0: 'Tune-up',
+        1: 'No Heat',
+        2: 'Fix',
+        3: 'Tank_Install',
+        4: 'Other',
+      };
+      return typeMap[typeId] || 'Unknown Service';
+    },
+
+    getServiceTypeColor(typeId: number): string {
+       const colorMap: { [key: number]: string } = {
+        0: 'blue',
+        1: 'red',
+        2: 'green',
+        3: '#B58900',
+        4: 'black',
+      };
+      return colorMap[typeId] || 'gray';
+    }
+  },
+})
+</script>
diff --git a/src/pages/service/routes.ts b/src/pages/service/routes.ts
index a8af3d8..dfd76d5 100644
--- a/src/pages/service/routes.ts
+++ b/src/pages/service/routes.ts
@@ -2,7 +2,8 @@
 import ServiceHome from './ServiceHome.vue'
 import ServicePast from './ServicePast.vue'
 import CalendarCustomer from './calender/CalendarCustomer.vue'
-import ServiceCalendar from './ServiceCalendar.vue' 
+import ServiceCalendar from './ServiceCalendar.vue'
+import ServiceToday from './ServiceToday.vue'
 
 const serviceRoutes = [
   {
@@ -28,7 +29,12 @@ const serviceRoutes = [
     name: 'CalenderCustomer',
     component: CalendarCustomer,
   },
+  {
+    path: '/service/servicetoday',
+    name: 'ServiceToday',
+    component: ServiceToday,
+  },
 ]
 
 export default serviceRoutes
-//sourceMappingURL=index.ts.map
\ No newline at end of file
+//sourceMappingURL=index.ts.map
diff --git a/src/pages/ticket/ticket.vue b/src/pages/ticket/ticket.vue
index c65cff5..7c9c26f 100644
--- a/src/pages/ticket/ticket.vue
+++ b/src/pages/ticket/ticket.vue
@@ -154,19 +154,14 @@
 import { defineComponent } from 'vue'
 import axios from 'axios'
 import authHeader from '../../services/auth.header'
-import Header from '../../layouts/headers/headerauth.vue'
-import SideBar from '../../layouts/sidebar/sidebar.vue'
-import Footer from '../../layouts/footers/footer.vue'
+
+
 import { notify } from "@kyvg/vue3-notification"
 
 export default defineComponent({
     name: 'Ticket',
 
-    components: {
-        Header,
-        SideBar,
-        Footer,
-    },
+   
 
     data() {
         return {
@@ -422,6 +417,7 @@ export default defineComponent({
                     }
                 })
         },
+
     },
 })
 </script>
diff --git a/src/stores/counts.ts b/src/stores/counts.ts
index 117467b..13d5ef7 100644
--- a/src/stores/counts.ts
+++ b/src/stores/counts.ts
@@ -14,6 +14,7 @@ export const useCountsStore = defineStore('counts', () => {
   const pending = ref(0)
   const automatic = ref(0)
   const upcoming_service = ref(0)
+  const today_service = ref(0)
   
   // --- ACTIONS ---
   // A single action to fetch ALL counts from our new, efficient endpoint.
@@ -30,6 +31,7 @@ export const useCountsStore = defineStore('counts', () => {
         pending.value = counts.pending;
         automatic.value = counts.automatic;
         upcoming_service.value = counts.upcoming_service;
+        today_service.value = counts.today_service || 0;
       }
     } catch {
       // No error param, as requested
@@ -47,6 +49,7 @@ export const useCountsStore = defineStore('counts', () => {
     pending,
     automatic,
     upcoming_service,
+    today_service,
     fetchSidebarCounts,
   }
-})
\ No newline at end of file
+})