diff --git a/apps/client/components/TicketViews/assigned.tsx b/apps/client/components/TicketViews/assigned.tsx
index cbd46f458..f67d023dd 100644
--- a/apps/client/components/TicketViews/assigned.tsx
+++ b/apps/client/components/TicketViews/assigned.tsx
@@ -1,6 +1,6 @@
 import moment from "moment";
 import { useRouter } from "next/router";
-import React from "react";
+import React, { useMemo } from "react";
 import { useQuery } from "react-query";
 import {
   useFilters,
@@ -221,7 +221,7 @@ export default function AssignedTickets() {
   const low = "bg-blue-100 text-blue-800";
   const normal = "bg-green-100 text-green-800";
 
-  const columns = React.useMemo(
+  const columns = useMemo(
     () => [
       {
         Header: "Type",
@@ -236,7 +236,7 @@ export default function AssignedTickets() {
         Cell: ({ row, value }: any) => {
           return (
             <>
-              <span className="max-w-[240px] truncate">{value}</span>
+              <span className=" max-w-[240px] truncate">{value}</span>
             </>
           );
         },
@@ -245,7 +245,7 @@ export default function AssignedTickets() {
         Header: "Assignee",
         accessor: "assignedTo.name",
         id: "assignee",
-        Cell: ({ row, value }) => {
+        Cell: ({ row, value }: any) => {
           return (
             <>
               <span className="w-[80px] truncate">{value ? value : "n/a"}</span>
@@ -274,7 +274,7 @@ export default function AssignedTickets() {
           return (
             <>
               <span
-                className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${badge}`}
+                className={`inline-flex items-center rounded-md justify-center w-1/2 px-2 py-1 text-xs font-medium ring-1 ring-inset ${badge}`}
               >
                 {value}
               </span>
@@ -284,28 +284,19 @@ export default function AssignedTickets() {
       },
       {
         Header: "Status",
-        accessor: "priority",
+        accessor: "status",
         id: "status",
         Cell: ({ row, value }) => {
           let p = value;
           let badge;
 
-          if (p === "Low") {
-            badge = low;
-          }
-          if (p === "Normal") {
-            badge = normal;
-          }
-          if (p === "High") {
-            badge = high;
-          }
-
           return (
             <>
-              <span
-                className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${badge}`}
-              >
-                {value}
+              <span className="inline-flex items-center rounded-md bg-yellow-50 px-2 py-1 text-xs font-medium text-yellow-700 ring-1 ring-inset ring-red-600/10">
+                {value === "needs_support" && <span>Needs Support</span>}
+                {value === "in_progress" && <span>In Progress</span>}
+                {value === "in_review" && <span>In Review</span>}
+                {value === "done" && <span>Done</span>}
               </span>
             </>
           );
@@ -324,18 +315,6 @@ export default function AssignedTickets() {
           );
         },
       },
-      // {
-      //   Header: "",
-      //   id: "actions",
-      //   Cell: ({ row, value }) => {
-      //     console.log(row)
-      //     return (
-      //       <>
-      //         <Link href={`/tickets/${row.original.id}`}>View</Link>
-      //       </>
-      //     );
-      //   },
-      // },
     ],
     []
   );
diff --git a/apps/client/components/TicketViews/closed.tsx b/apps/client/components/TicketViews/closed.tsx
index 73a25139a..94aeece99 100644
--- a/apps/client/components/TicketViews/closed.tsx
+++ b/apps/client/components/TicketViews/closed.tsx
@@ -1,6 +1,6 @@
 import moment from "moment";
 import { useRouter } from "next/router";
-import React from "react";
+import React, { useMemo } from "react";
 import { useQuery } from "react-query";
 import {
   useFilters,
@@ -215,7 +215,7 @@ export default function ClosedTickets() {
   const low = "bg-blue-100 text-blue-800";
   const normal = "bg-green-100 text-green-800";
 
-  const columns = React.useMemo(
+  const columns = useMemo(
     () => [
       {
         Header: "Type",
@@ -228,10 +228,9 @@ export default function ClosedTickets() {
         accessor: "title",
         id: "summary",
         Cell: ({ row, value }: any) => {
-          console.log(row);
           return (
             <>
-              <span className="max-w-[240px] truncate">{value}</span>
+              <span className=" max-w-[240px] truncate">{value}</span>
             </>
           );
         },
@@ -240,8 +239,7 @@ export default function ClosedTickets() {
         Header: "Assignee",
         accessor: "assignedTo.name",
         id: "assignee",
-        Cell: ({ row, value }) => {
-          console.log(row);
+        Cell: ({ row, value }: any) => {
           return (
             <>
               <span className="w-[80px] truncate">{value ? value : "n/a"}</span>
@@ -270,7 +268,7 @@ export default function ClosedTickets() {
           return (
             <>
               <span
-                className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${badge}`}
+                className={`inline-flex items-center rounded-md justify-center w-1/2 px-2 py-1 text-xs font-medium ring-1 ring-inset ${badge}`}
               >
                 {value}
               </span>
@@ -280,28 +278,19 @@ export default function ClosedTickets() {
       },
       {
         Header: "Status",
-        accessor: "priority",
+        accessor: "status",
         id: "status",
         Cell: ({ row, value }) => {
           let p = value;
           let badge;
 
-          if (p === "Low") {
-            badge = low;
-          }
-          if (p === "Normal") {
-            badge = normal;
-          }
-          if (p === "High") {
-            badge = high;
-          }
-
           return (
             <>
-              <span
-                className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${badge}`}
-              >
-                {value}
+              <span className="inline-flex items-center rounded-md bg-yellow-50 px-2 py-1 text-xs font-medium text-yellow-700 ring-1 ring-inset ring-red-600/10">
+                {value === "needs_support" && <span>Needs Support</span>}
+                {value === "in_progress" && <span>In Progress</span>}
+                {value === "in_review" && <span>In Review</span>}
+                {value === "done" && <span>Done</span>}
               </span>
             </>
           );
@@ -320,18 +309,6 @@ export default function ClosedTickets() {
           );
         },
       },
-      // {
-      //   Header: "",
-      //   id: "actions",
-      //   Cell: ({ row, value }) => {
-      //     console.log(row)
-      //     return (
-      //       <>
-      //         <Link href={`/tickets/${row.original.id}`}>View</Link>
-      //       </>
-      //     );
-      //   },
-      // },
     ],
     []
   );
diff --git a/apps/client/components/TicketViews/open.tsx b/apps/client/components/TicketViews/open.tsx
index b5af765b8..d52175d24 100644
--- a/apps/client/components/TicketViews/open.tsx
+++ b/apps/client/components/TicketViews/open.tsx
@@ -309,18 +309,6 @@ export default function OpenTickets() {
           );
         },
       },
-      // {
-      //   Header: "",
-      //   id: "actions",
-      //   Cell: ({ row, value }) => {
-      //     console.log(row)
-      //     return (
-      //       <>
-      //         <Link href={`/tickets/${row.original.id}`}>View</Link>
-      //       </>
-      //     );
-      //   },
-      // },
     ],
     []
   );
diff --git a/apps/client/components/TicketViews/unassiged.tsx b/apps/client/components/TicketViews/unassiged.tsx
index 2e5c31afd..076160c1c 100644
--- a/apps/client/components/TicketViews/unassiged.tsx
+++ b/apps/client/components/TicketViews/unassiged.tsx
@@ -1,6 +1,6 @@
 import moment from "moment";
 import { useRouter } from "next/router";
-import React from "react";
+import React, { useMemo } from "react";
 import { useQuery } from "react-query";
 import {
   useFilters,
@@ -218,7 +218,7 @@ export default function UnassignedTickets() {
   const low = "bg-blue-100 text-blue-800";
   const normal = "bg-green-100 text-green-800";
 
-  const columns = React.useMemo(
+  const columns = useMemo(
     () => [
       {
         Header: "Type",
@@ -233,7 +233,7 @@ export default function UnassignedTickets() {
         Cell: ({ row, value }: any) => {
           return (
             <>
-              <span className="max-w-[240px] truncate">{value}</span>
+              <span className=" max-w-[240px] truncate">{value}</span>
             </>
           );
         },
@@ -242,7 +242,7 @@ export default function UnassignedTickets() {
         Header: "Assignee",
         accessor: "assignedTo.name",
         id: "assignee",
-        Cell: ({ row, value }) => {
+        Cell: ({ row, value }: any) => {
           return (
             <>
               <span className="w-[80px] truncate">{value ? value : "n/a"}</span>
@@ -271,7 +271,7 @@ export default function UnassignedTickets() {
           return (
             <>
               <span
-                className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${badge}`}
+                className={`inline-flex items-center rounded-md justify-center w-1/2 px-2 py-1 text-xs font-medium ring-1 ring-inset ${badge}`}
               >
                 {value}
               </span>
@@ -281,28 +281,19 @@ export default function UnassignedTickets() {
       },
       {
         Header: "Status",
-        accessor: "priority",
+        accessor: "status",
         id: "status",
         Cell: ({ row, value }) => {
           let p = value;
           let badge;
 
-          if (p === "Low") {
-            badge = low;
-          }
-          if (p === "Normal") {
-            badge = normal;
-          }
-          if (p === "High") {
-            badge = high;
-          }
-
           return (
             <>
-              <span
-                className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${badge}`}
-              >
-                {value}
+              <span className="inline-flex items-center rounded-md bg-yellow-50 px-2 py-1 text-xs font-medium text-yellow-700 ring-1 ring-inset ring-red-600/10">
+                {value === "needs_support" && <span>Needs Support</span>}
+                {value === "in_progress" && <span>In Progress</span>}
+                {value === "in_review" && <span>In Review</span>}
+                {value === "done" && <span>Done</span>}
               </span>
             </>
           );
@@ -321,18 +312,6 @@ export default function UnassignedTickets() {
           );
         },
       },
-      // {
-      //   Header: "",
-      //   id: "actions",
-      //   Cell: ({ row, value }) => {
-      //     console.log(row)
-      //     return (
-      //       <>
-      //         <Link href={`/tickets/${row.original.id}`}>View</Link>
-      //       </>
-      //     );
-      //   },
-      // },
     ],
     []
   );