diff --git a/client/src/components/SeverityBadge.tsx b/client/src/components/SeverityBadge.tsx
index e7be8bd..08dae3d 100644
--- a/client/src/components/SeverityBadge.tsx
+++ b/client/src/components/SeverityBadge.tsx
@@ -1,13 +1,7 @@
-const config: Record<number, { label: string; className: string }> = {
-  1: { label: 'SEV 1', className: 'bg-red-500/20 text-red-400 border-red-500/30' },
-  2: { label: 'SEV 2', className: 'bg-orange-500/20 text-orange-400 border-orange-500/30' },
-  3: { label: 'SEV 3', className: 'bg-yellow-500/20 text-yellow-400 border-yellow-500/30' },
-  4: { label: 'SEV 4', className: 'bg-blue-500/20 text-blue-400 border-blue-500/30' },
-  5: { label: 'SEV 5', className: 'bg-gray-500/20 text-gray-400 border-gray-500/30' },
-};
+import { SEVERITY_BADGE } from '../lib/severityColors';
 
 export default function SeverityBadge({ severity }: { severity: number }) {
-  const { label, className } = config[severity] ?? config[5];
+  const { label, className } = SEVERITY_BADGE[severity] ?? SEVERITY_BADGE[5];
   return (
     <span
       className={`inline-flex items-center px-2 py-0.5 rounded text-xs font-semibold border ${className}`}
diff --git a/client/src/lib/severityColors.ts b/client/src/lib/severityColors.ts
new file mode 100644
index 0000000..b4c249e
--- /dev/null
+++ b/client/src/lib/severityColors.ts
@@ -0,0 +1,15 @@
+export const SEVERITY_BG: Record<number, string> = {
+  1: 'bg-red-500',
+  2: 'bg-orange-400',
+  3: 'bg-yellow-400',
+  4: 'bg-blue-400',
+  5: 'bg-gray-600',
+};
+
+export const SEVERITY_BADGE: Record<number, { label: string; className: string }> = {
+  1: { label: 'SEV 1', className: 'bg-red-500/20 text-red-400 border-red-500/30' },
+  2: { label: 'SEV 2', className: 'bg-orange-500/20 text-orange-400 border-orange-500/30' },
+  3: { label: 'SEV 3', className: 'bg-yellow-500/20 text-yellow-400 border-yellow-500/30' },
+  4: { label: 'SEV 4', className: 'bg-blue-500/20 text-blue-400 border-blue-500/30' },
+  5: { label: 'SEV 5', className: 'bg-gray-500/20 text-gray-400 border-gray-500/30' },
+};
diff --git a/client/src/pages/MyTickets.tsx b/client/src/pages/MyTickets.tsx
index b3e3024..1986479 100644
--- a/client/src/pages/MyTickets.tsx
+++ b/client/src/pages/MyTickets.tsx
@@ -6,6 +6,7 @@ import SeverityBadge from '../components/SeverityBadge';
 import StatusBadge from '../components/StatusBadge';
 import { useTickets } from '../api/queries';
 import { useAuth } from '../contexts/AuthContext';
+import { SEVERITY_BG } from '../lib/severityColors';
 
 export default function MyTickets() {
   const { user } = useAuth();
@@ -42,17 +43,7 @@ export default function MyTickets() {
               className="flex items-center gap-4 bg-gray-900 border border-gray-800 rounded-lg px-4 py-3 hover:border-indigo-500/50 transition-all group"
             >
               <div
-                className={`w-1 self-stretch rounded-full flex-shrink-0 ${
-                  ticket.severity === 1
-                    ? 'bg-red-500'
-                    : ticket.severity === 2
-                      ? 'bg-orange-400'
-                      : ticket.severity === 3
-                        ? 'bg-yellow-400'
-                        : ticket.severity === 4
-                          ? 'bg-blue-400'
-                          : 'bg-gray-600'
-                }`}
+                className={`w-1 self-stretch rounded-full flex-shrink-0 ${SEVERITY_BG[ticket.severity] ?? 'bg-gray-600'}`}
               />
 
               <div className="flex-1 min-w-0">
diff --git a/client/src/pages/Tickets.tsx b/client/src/pages/Tickets.tsx
index e0013d9..f85f18b 100644
--- a/client/src/pages/Tickets.tsx
+++ b/client/src/pages/Tickets.tsx
@@ -2,6 +2,7 @@ import { useEffect, useMemo, useState } from 'react';
 import { Link, useNavigate, useSearchParams } from 'react-router-dom';
 import { useShortcut } from '../hooks/useShortcuts';
 import { ChevronLeft, ChevronRight, Trash2, Save } from 'lucide-react';
+import { SEVERITY_BG } from '../lib/severityColors';
 import { formatDistanceToNow } from 'date-fns';
 import { toast } from 'sonner';
 import Layout from '../components/Layout';
@@ -56,18 +57,6 @@ const STATUS_TABS: { value: TicketStatus | ''; label: string }[] = [
 const PAGE_SIZE = 25;
 const BULK_LIMIT = 500;
 
-function sevColor(severity: number) {
-  return severity === 1
-    ? 'bg-red-500'
-    : severity === 2
-      ? 'bg-orange-400'
-      : severity === 3
-        ? 'bg-yellow-400'
-        : severity === 4
-          ? 'bg-blue-400'
-          : 'bg-gray-600';
-}
-
 export default function Tickets() {
   const [params, setParams] = useSearchParams();
   const navigate = useNavigate();
@@ -502,7 +491,7 @@ export default function Tickets() {
                   className="cursor-pointer flex-shrink-0"
                 />
                 <div
-                  className={`w-1 self-stretch rounded-full flex-shrink-0 ${sevColor(ticket.severity)}`}
+                  className={`w-1 self-stretch rounded-full flex-shrink-0 ${SEVERITY_BG[ticket.severity] ?? 'bg-gray-600'}`}
                 />
                 <Link
                   to={`/${ticket.displayId}`}