diff --git a/www/app/[domain]/browse/page.tsx b/www/app/[domain]/browse/page.tsx
index 6303f1a0..443c50ff 100644
--- a/www/app/[domain]/browse/page.tsx
+++ b/www/app/[domain]/browse/page.tsx
@@ -4,6 +4,7 @@ import React, { useState } from "react";
 import { GetTranscript } from "../../api";
 import Pagination from "./pagination";
 import Link from "next/link";
+import { FaGear } from "react-icons/fa6";
 import { FaCheck, FaTrash, FaStar, FaMicrophone } from "react-icons/fa";
 import { MdError } from "react-icons/md";
 import useTranscriptList from "../transcripts/useTranscriptList";
@@ -31,6 +32,7 @@ import {
   PopoverHeader,
   PopoverBody,
   PopoverFooter,
+  IconButton,
 } from "@chakra-ui/react";
 import { PlusSquareIcon } from "@chakra-ui/icons";
 // import { useFiefUserinfo } from "@fief/fief/nextjs/react";
@@ -39,7 +41,6 @@ export default function TranscriptBrowser() {
   const [page, setPage] = useState<number>(1);
   const { loading, response, refetch } = useTranscriptList(page);
   const [deletionLoading, setDeletionLoading] = useState(false);
-  const [deletedItems, setDeletedItems] = useState<string[]>([]);
   const api = useApi();
   const { setError } = useError();
 
@@ -67,18 +68,14 @@ export default function TranscriptBrowser() {
       </Flex>
     );
 
-  const prevent = (e: React.MouseEvent<HTMLDivElement>) => {
-    e.stopPropagation();
-    e.preventDefault();
-  };
-
   const handleDeleteTranscript = (transcriptToDeleteId) => (e) => {
-    if (!deletionLoading) {
+    e.stopPropagation();
+    if (api && !deletionLoading) {
+      setDeletionLoading(true);
       api
-        ?.v1TranscriptDelete(transcriptToDeleteId)
+        .v1TranscriptDelete(transcriptToDeleteId)
         .then(() => {
           setDeletionLoading(false);
-          setDeletedItems([...deletedItems, transcriptToDeleteId]);
           refetch();
         })
         .catch((err) => {
@@ -101,7 +98,7 @@ export default function TranscriptBrowser() {
         {/* <Heading>{user?.fields?.name}'s Meetings</Heading> */}
         <Heading>Your Meetings</Heading>
         <Flex flexDir="row" align="center">
-          {loading && <Spinner></Spinner>}
+          {loading || (deletionLoading && <Spinner></Spinner>)}
 
           <Pagination
             page={page}
@@ -130,74 +127,73 @@ export default function TranscriptBrowser() {
         overflowY={"scroll"}
         mb="4"
       >
-        {response?.items
-          .filter((item) => !deletedItems.includes(item.id))
-          .map((item: GetTranscript) => (
-            <Card as={Link} key={item.id} href={`/transcripts/${item.id}`}>
-              <CardBody>
-                <Heading size="md">
-                  {item.title || item.name || "Unamed Transcript"}
+        {response?.items.map((item: GetTranscript) => (
+          <Card key={item.id}>
+            <CardBody as={Link} href={`/transcripts/${item.id}`}>
+              <Heading size="md">
+                {item.title || item.name || "Unamed Transcript"}
 
-                  {item.status == "ended" && (
-                    <Icon color="green" as={FaCheck} ml="2" />
-                  )}
-                  {item.status == "error" && (
-                    <Icon color="red" as={MdError} ml="2" />
-                  )}
-                  {item.status == "idle" && (
-                    <Icon color="yellow" as={FaStar} ml="2" />
-                  )}
-                  {item.status == "processing" && (
-                    <Icon color="grey" as={FaMicrophone} ml="2" />
-                  )}
-                  {item.status == "recording" && (
-                    <Icon color="blue" as={FaMicrophone} ml="2" />
-                  )}
-                </Heading>
-                <Stack mt="6" spacing="3">
-                  <Text fontSize="small">
-                    {new Date(item.created_at).toLocaleString("en-US")}
-                    {"\u00A0"}-{"\u00A0"}
-                    {formatTime(Math.floor(item.duration / 1000))}
-                  </Text>
-                  <Text>{item.short_summary}</Text>
-                </Stack>
-              </CardBody>
+                {item.status == "ended" && (
+                  <Icon color="green" as={FaCheck} ml="2" />
+                )}
+                {item.status == "error" && (
+                  <Icon color="red.primary" as={MdError} ml="2" />
+                )}
+                {item.status == "idle" && (
+                  <Icon color="yellow.500" as={FaStar} ml="2" />
+                )}
+                {item.status == "processing" && (
+                  <Icon color="grey.primary" as={FaGear} ml="2" />
+                )}
+                {item.status == "recording" && (
+                  <Icon color="blue.primary" as={FaMicrophone} ml="2" />
+                )}
+              </Heading>
+              <Stack mt="6" spacing="3">
+                <Text fontSize="small">
+                  {new Date(item.created_at).toLocaleString("en-US")}
+                  {"\u00A0"}-{"\u00A0"}
+                  {formatTime(Math.floor(item.duration / 1000))}
+                </Text>
+                <Text>{item.short_summary}</Text>
+              </Stack>
+            </CardBody>
 
-              {item.status !== "ended" && (
-                <>
-                  <Divider />
-                  <CardFooter onClick={prevent}>
-                    <Popover>
-                      <PopoverTrigger>
-                        <Button colorScheme="red" disabled={deletionLoading}>
-                          <Icon as={FaTrash}></Icon>
+            {item.status !== "ended" && (
+              <>
+                <Divider />
+                <CardFooter>
+                  <Popover>
+                    <PopoverTrigger>
+                      <IconButton
+                        colorScheme="red"
+                        disabled={deletionLoading}
+                        icon={<FaTrash />}
+                        aria-label="Delete"
+                      />
+                    </PopoverTrigger>
+                    <PopoverContent>
+                      <PopoverArrow />
+                      <PopoverCloseButton />
+                      <PopoverHeader>
+                        Are you sure you want to delete {item.title} ?
+                      </PopoverHeader>
+                      <PopoverBody>This action is not reversible.</PopoverBody>
+                      <PopoverFooter>
+                        <Button
+                          colorScheme="red"
+                          onClick={handleDeleteTranscript(item.id)}
+                        >
+                          Confirm
                         </Button>
-                      </PopoverTrigger>
-                      <PopoverContent>
-                        <PopoverArrow />
-                        <PopoverCloseButton />
-                        <PopoverHeader>
-                          Are you sure you want to delete {item.title} ?
-                        </PopoverHeader>
-                        <PopoverBody>
-                          This action is not reversible.
-                        </PopoverBody>
-                        <PopoverFooter>
-                          <Button
-                            colorScheme="red"
-                            onClick={handleDeleteTranscript(item.id)}
-                          >
-                            Confirm
-                          </Button>
-                        </PopoverFooter>
-                      </PopoverContent>
-                    </Popover>
-                  </CardFooter>
-                </>
-              )}
-            </Card>
-          ))}
+                      </PopoverFooter>
+                    </PopoverContent>
+                  </Popover>
+                </CardFooter>
+              </>
+            )}
+          </Card>
+        ))}
       </Grid>
     </Flex>
   );
diff --git a/www/app/[domain]/browse/pagination.tsx b/www/app/[domain]/browse/pagination.tsx
index 721d1747..7c67a60b 100644
--- a/www/app/[domain]/browse/pagination.tsx
+++ b/www/app/[domain]/browse/pagination.tsx
@@ -1,5 +1,5 @@
-import { faArrowLeft, faArrowRight } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Button, Flex, IconButton } from "@chakra-ui/react";
+import { FaChevronLeft, FaChevronRight } from "react-icons/fa";
 
 type PaginationProps = {
   page: number;
@@ -39,40 +39,41 @@ export default function Pagination(props: PaginationProps) {
       setPage(newPage);
     }
   };
-
   return (
-    <div className="flex justify-center space-x-4 my-4">
-      <button
-        className={`w-10 h-10 rounded-full p-2 ${
-          canGoPrevious ? "text-gray-500" : "text-gray-300"
-        }`}
+    <Flex justify="center" align="center" gap="2" mx="2">
+      <IconButton
+        isRound={true}
+        variant="text"
+        color={!canGoPrevious ? "gray" : "dark"}
+        mb="1"
+        icon={<FaChevronLeft />}
         onClick={() => handlePageChange(page - 1)}
         disabled={!canGoPrevious}
-      >
-        <FontAwesomeIcon icon={faArrowLeft} className="h-5 w-auto" />
-      </button>
+        aria-label="Previous page"
+      />
 
       {pageNumbers.map((pageNumber) => (
-        <button
+        <Button
           key={pageNumber}
-          className={`w-10 h-10 rounded-full p-2 border ${
-            page === pageNumber ? "border-gray-600" : "border-gray-300"
-          } rounded`}
+          variant="text"
+          color={page === pageNumber ? "gray" : "dark"}
           onClick={() => handlePageChange(pageNumber)}
+          disabled={page === pageNumber}
         >
           {pageNumber}
-        </button>
+        </Button>
       ))}
 
-      <button
-        className={`w-10 h-10 rounded-full p-2 ${
-          canGoNext ? "text-gray-500" : "text-gray-300"
-        }`}
+      <IconButton
+        isRound={true}
+        variant="text"
+        color={!canGoNext ? "gray" : "dark"}
+        icon={<FaChevronRight />}
+        mb="1"
         onClick={() => handlePageChange(page + 1)}
         disabled={!canGoNext}
-      >
-        <FontAwesomeIcon icon={faArrowRight} className="h-5 w-auto" />
-      </button>
-    </div>
+        aria-label="Next page"
+      />
+    </Flex>
   );
 }
diff --git a/www/app/providers.tsx b/www/app/providers.tsx
index 5197ff15..e1c4f283 100644
--- a/www/app/providers.tsx
+++ b/www/app/providers.tsx
@@ -1,7 +1,8 @@
 "use client";
 
 import { ChakraProvider } from "@chakra-ui/react";
+import theme from "./theme";
 
 export function Providers({ children }: { children: React.ReactNode }) {
-  return <ChakraProvider>{children}</ChakraProvider>;
+  return <ChakraProvider theme={theme}>{children}</ChakraProvider>;
 }
diff --git a/www/app/theme.ts b/www/app/theme.ts
new file mode 100644
index 00000000..e951eef0
--- /dev/null
+++ b/www/app/theme.ts
@@ -0,0 +1,34 @@
+// 1. Import `extendTheme`
+import { extendTheme } from "@chakra-ui/react";
+
+// 2. Call `extendTheme` and pass your custom values
+const theme = extendTheme({
+  colors: {
+    blue: {
+      primary: "#3158E2",
+      500: "#3158E2",
+      light: "#B1CBFF",
+      200: "#B1CBFF",
+      dark: "#0E1B48",
+      900: "#0E1B48",
+    },
+    red: {
+      primary: "#DF7070",
+      500: "#DF7070",
+      light: "#FBD5D5",
+      200: "#FBD5D5",
+    },
+    gray: {
+      bg: "#F4F4F4",
+      100: "#F4F4F4",
+      light: "#D5D5D5",
+      200: "#D5D5D5",
+      primary: "#838383",
+      500: "#838383",
+    },
+    light: "#FFFFFF",
+    dark: "#0C0D0E",
+  },
+});
+
+export default theme;