diff --git a/frontend/src/App.js b/frontend/src/App.js
index 1eb1d7e..fda7d8e 100644
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -6,7 +6,7 @@ import {
     RouterProvider,
     createRoutesFromElements,
 } from 'react-router-dom'
-import { ChakraProvider } from '@chakra-ui/react'
+import { ChakraProvider, extendTheme } from '@chakra-ui/react'
 
 import { AuthLayout } from './contexts/AuthContext'
 import { PrivateRoute, LoggedInRedirect } from './contexts/CustomRoutes'
@@ -39,11 +39,77 @@ const router = createBrowserRouter(
 const App = () => {
     return (
         <RecoilRoot>
-            <ChakraProvider>
+            <ChakraProvider theme={WATonomousTheme}>
                 <RouterProvider router={router} />
             </ChakraProvider>
         </RecoilRoot>
     )
 }
 
+const WATonomousTheme = extendTheme({
+    colors: {
+        wato: {
+            offBlack: '#222222',
+            grey: '#414141',
+            offWhite: '#c7cfd8',
+
+            primaryDark: '#08192d',
+            primary: '#0f4271',
+            secondary: '#1f5d96',
+
+            greenDark: '#0c4842',
+            greenLight: '#66ddc8',
+
+            redDark: '#92093a',
+            redLight: '#d8436d',
+        },
+    },
+    components: {
+        Button: {
+            variants: {
+                offWhite: {
+                    bgColor: 'wato.offWhite',
+                    _hover: {
+                        bgColor: 'wato.offWhite',
+                    },
+                },
+                grey: {
+                    color: 'white',
+                    bgColor: 'wato.grey',
+                    _hover: {
+                        bgColor: 'wato.grey',
+                    },
+                },
+                secondary: {
+                    color: 'white',
+                    bgColor: 'wato.secondary',
+                    _hover: {
+                        bgColor: 'wato.secondary',
+                    },
+                },
+                greenDark: {
+                    color: 'white',
+                    bgColor: 'wato.greenDark',
+                    _hover: {
+                        bgColor: 'wato.greenDark',
+                    },
+                },
+                greenLight: {
+                    bgColor: 'wato.greenLight',
+                    _hover: {
+                        bgColor: 'wato.greenLight',
+                    },
+                },
+                redDark: {
+                    color: 'white',
+                    bgColor: 'wato.redDark',
+                    _hover: {
+                        bgColor: 'wato.redDark',
+                    },
+                },
+            },
+        },
+    },
+})
+
 export default App
diff --git a/frontend/src/components/CommentInput.js b/frontend/src/components/CommentInput.js
index 363dbd9..60895e2 100644
--- a/frontend/src/components/CommentInput.js
+++ b/frontend/src/components/CommentInput.js
@@ -133,7 +133,7 @@ const CommentInput = ({ code, getComments, reply, onClose, ticket }) => {
                             onClick={onClose}
                             padding="10px"
                             height="32px"
-                            colorScheme="red"
+                            variant="redDark"
                         >
                             Cancel
                         </Button>
@@ -143,7 +143,7 @@ const CommentInput = ({ code, getComments, reply, onClose, ticket }) => {
                         disabled={val.length === 0 || invalidInput(val)}
                         padding="10px"
                         height="32px"
-                        colorScheme="blue"
+                        variant="secondary"
                         onClick={() => {
                             handleSubmit(code, ticket)
                         }}
diff --git a/frontend/src/components/ConfirmationModal.js b/frontend/src/components/ConfirmationModal.js
index 7ab4b61..36863d0 100644
--- a/frontend/src/components/ConfirmationModal.js
+++ b/frontend/src/components/ConfirmationModal.js
@@ -19,11 +19,11 @@ const ConfirmationModal = ({ title, body, onConfirm, isOpen, onClose }) => {
                 <ModalBody>{body}</ModalBody>
 
                 <ModalFooter>
-                    <Button colorScheme="red" mr={3} onClick={onClose}>
+                    <Button variant="redDark" mr={3} onClick={onClose}>
                         Cancel
                     </Button>
                     <Button
-                        colorScheme="green"
+                        variant="greenDark"
                         onClick={() => {
                             onClose()
                             onConfirm()
diff --git a/frontend/src/components/CreateTicketModal.js b/frontend/src/components/CreateTicketModal.js
index d45360b..b6e7342 100644
--- a/frontend/src/components/CreateTicketModal.js
+++ b/frontend/src/components/CreateTicketModal.js
@@ -161,12 +161,12 @@ export function CreateTicketModal({ isOpen, onClose }) {
                     {displayTicketType()}
                 </ModalBody>
                 <ModalFooter>
-                    <Button colorScheme="red" mr={3} onClick={onClose}>
+                    <Button variant="redDark" mr={3} onClick={onClose}>
                         Close
                     </Button>
                     <Button
                         isLoading={isLoading}
-                        colorScheme="blue"
+                        variant="greenDark"
                         onClick={handleSubmit(createTicket)}
                     >
                         Create Ticket
diff --git a/frontend/src/components/DeleteTicketAlertDialog.js b/frontend/src/components/DeleteTicketAlertDialog.js
index 879a771..4b39903 100644
--- a/frontend/src/components/DeleteTicketAlertDialog.js
+++ b/frontend/src/components/DeleteTicketAlertDialog.js
@@ -128,7 +128,7 @@ const DeleteTicketAlertDialog = ({ isOpen, onClose }) => {
                             Cancel
                         </Button>
                         <Button
-                            colorScheme="red"
+                            variant="redDark"
                             onClick={handleDeleteCurrentTicket}
                             ml={3}
                         >
diff --git a/frontend/src/components/FilterDropdown.js b/frontend/src/components/FilterDropdown.js
index 0f12938..f1f97df 100644
--- a/frontend/src/components/FilterDropdown.js
+++ b/frontend/src/components/FilterDropdown.js
@@ -20,6 +20,7 @@ const FilterDropdown = ({ filter, setFilter }) => {
             <Menu closeOnSelect={false}>
                 <MenuButton
                     as={Button}
+                    variant="offWhite"
                     w="100%"
                     rightIcon={<ChevronDownIcon />}
                 >
diff --git a/frontend/src/components/Navbar.js b/frontend/src/components/Navbar.js
index d4e3dbb..1952b50 100644
--- a/frontend/src/components/Navbar.js
+++ b/frontend/src/components/Navbar.js
@@ -47,11 +47,11 @@ const Navbar = () => {
             left="0"
             alignItems="center"
             p="16px 24px"
-            bgColor="deepskyblue"
+            bgColor="wato.primary"
             w="100%"
             h="80px"
         >
-            <Link href="/">
+            <Link href="/" color="white">
                 <Heading
                     lineHeight="48px"
                     fontSize={{ base: 'lg', md: '2xl', lg: '3xl' }}
@@ -61,13 +61,14 @@ const Navbar = () => {
             </Link>
             <Spacer />
             {currentUser && (
-                <Button onClick={onOpen} colorScheme="green" mr="20px">
+                <Button onClick={onOpen} variant="greenLight" mr="20px">
                     Create New Ticket
                 </Button>
             )}
             <Button
                 onClick={currentUser ? handleLogout : handleLogin}
                 disabled={loading}
+                variant="offWhite"
             >
                 {error ? error : currentUser ? 'Log Out' : 'Log In'}
             </Button>
diff --git a/frontend/src/components/TicketContent/PPRAdminContentTable.js b/frontend/src/components/TicketContent/PPRAdminContentTable.js
index 4ce17e0..02b4b6c 100644
--- a/frontend/src/components/TicketContent/PPRAdminContentTable.js
+++ b/frontend/src/components/TicketContent/PPRAdminContentTable.js
@@ -61,7 +61,7 @@ const PPRAdminContentTable = () => {
         return (
             <Center pb="7px">
                 <Button
-                    colorScheme="blue"
+                    variant="secondary"
                     size="sm"
                     onClick={() => handleUpdateStatus('REPORTER_PAID')}
                 >
diff --git a/frontend/src/components/TicketContent/PPRContentTable.js b/frontend/src/components/TicketContent/PPRContentTable.js
index 8dec6c4..fecb7ce 100644
--- a/frontend/src/components/TicketContent/PPRContentTable.js
+++ b/frontend/src/components/TicketContent/PPRContentTable.js
@@ -104,7 +104,7 @@ const PPRContentTable = () => {
                         heading={'Finance/Admin Approval'}
                         value={
                             <Checkbox
-                                borderColor="lightslategrey"
+                                borderColor="wato.grey"
                                 disabled={
                                     !auth.isAdmin ||
                                     currentTicket.status !==
diff --git a/frontend/src/components/TicketContent/PPRReporterTable.js b/frontend/src/components/TicketContent/PPRReporterTable.js
index bf87772..405aab5 100644
--- a/frontend/src/components/TicketContent/PPRReporterTable.js
+++ b/frontend/src/components/TicketContent/PPRReporterTable.js
@@ -28,7 +28,7 @@ const PPRReporterTable = ({ currentTicket, supportingDocuments }) => {
                 isDisabled={supportingDocuments.length !== 0}
             >
                 <Button
-                    colorScheme="blue"
+                    variant="secondary"
                     size="sm"
                     mr="20px"
                     onClick={() => {
@@ -45,7 +45,7 @@ const PPRReporterTable = ({ currentTicket, supportingDocuments }) => {
     const getReimbursementConfirmationBody = () => {
         return (
             <Button
-                colorScheme="blue"
+                variant="secondary"
                 size="sm"
                 mr="20px"
                 onClick={() => {
diff --git a/frontend/src/components/TicketContent/SFAdminContentTable.js b/frontend/src/components/TicketContent/SFAdminContentTable.js
index e0c9031..99bb53a 100644
--- a/frontend/src/components/TicketContent/SFAdminContentTable.js
+++ b/frontend/src/components/TicketContent/SFAdminContentTable.js
@@ -92,7 +92,7 @@ const SFAdminContentTable = () => {
                     )}
                     {currentTicket.status !== 'REIMBURSED' && (
                         <Button
-                            colorScheme="blue"
+                            variant="secondary"
                             size="sm"
                             onClick={handleOpenConfirmation}
                         >
@@ -105,7 +105,7 @@ const SFAdminContentTable = () => {
                             `/claim/${currentTicket._id}`
                         )}
                     >
-                        <Button colorScheme="green" size="sm">
+                        <Button variant="greenDark" size="sm">
                             View Claim Page
                         </Button>
                     </Link>
diff --git a/frontend/src/components/TicketContent/TicketContentTableRow.js b/frontend/src/components/TicketContent/TicketContentTableRow.js
index 0965f9d..41bd932 100644
--- a/frontend/src/components/TicketContent/TicketContentTableRow.js
+++ b/frontend/src/components/TicketContent/TicketContentTableRow.js
@@ -26,7 +26,11 @@ const TicketContentTableRow = ({ heading, value, onChange, type }) => {
                 {onChange ? (
                     <Input onChange={onChange} value={value} />
                 ) : type === 'URL' ? (
-                    <Link color="blue.500" href={addhttps(value)} isExternal>
+                    <Link
+                        color="wato.secondary"
+                        href={addhttps(value)}
+                        isExternal
+                    >
                         {value}
                     </Link>
                 ) : (
diff --git a/frontend/src/components/TicketContent/UPRAdminContentTable.js b/frontend/src/components/TicketContent/UPRAdminContentTable.js
index a80b256..c01b6cd 100644
--- a/frontend/src/components/TicketContent/UPRAdminContentTable.js
+++ b/frontend/src/components/TicketContent/UPRAdminContentTable.js
@@ -111,7 +111,7 @@ const UPRAdminContentTable = () => {
             <Center pb="7px">
                 {currentTicket.status === 'SENT_TO_COORDINATOR' && (
                     <Button
-                        colorScheme="blue"
+                        variant="secondary"
                         size="sm"
                         mr="20px"
                         onClick={transitionToPurchased}
@@ -122,7 +122,7 @@ const UPRAdminContentTable = () => {
                 )}
                 {currentTicket.status === 'ORDERED' && (
                     <Button
-                        colorScheme="blue"
+                        variant="secondary"
                         size="sm"
                         mr="20px"
                         onClick={transitionToReadyForPickup}
@@ -132,7 +132,7 @@ const UPRAdminContentTable = () => {
                 )}
                 {currentTicket.status === 'READY_FOR_PICKUP' && (
                     <Button
-                        colorScheme="blue"
+                        variant="secondary"
                         size="sm"
                         mr="20px"
                         onClick={transitionToPickedUp}
@@ -141,7 +141,7 @@ const UPRAdminContentTable = () => {
                     </Button>
                 )}
                 <Button
-                    colorScheme="green"
+                    variant="greenDark"
                     size="sm"
                     onClick={saveFields}
                     disabled={!changed}
diff --git a/frontend/src/components/TicketContent/UPRContentTable.js b/frontend/src/components/TicketContent/UPRContentTable.js
index b7c650a..f0ad93f 100644
--- a/frontend/src/components/TicketContent/UPRContentTable.js
+++ b/frontend/src/components/TicketContent/UPRContentTable.js
@@ -112,7 +112,7 @@ const UPRContentTable = () => {
                         heading={'Finance/Admin Approval'}
                         value={
                             <Checkbox
-                                borderColor="lightslategrey"
+                                borderColor="wato.grey"
                                 disabled={
                                     !auth.isAdmin ||
                                     currentTicket.status !==
@@ -130,7 +130,7 @@ const UPRContentTable = () => {
                         heading={'Faculty Advisor Approval'}
                         value={
                             <Checkbox
-                                borderColor="lightslategrey"
+                                borderColor="wato.grey"
                                 disabled={
                                     !auth.isAdmin ||
                                     currentTicket.status !==
diff --git a/frontend/src/components/TicketList.js b/frontend/src/components/TicketList.js
index 603f7e3..c0d2c3c 100644
--- a/frontend/src/components/TicketList.js
+++ b/frontend/src/components/TicketList.js
@@ -99,7 +99,7 @@ const TicketList = ({ isLoading }) => {
                         return (
                             <Card
                                 _hover={{
-                                    bg: 'blue.500',
+                                    bgColor: 'wato.secondary',
                                     color: 'white',
                                     cursor: 'pointer',
                                 }}
@@ -113,7 +113,11 @@ const TicketList = ({ isLoading }) => {
                                     preserveParamsNavigate(ticket.path)
                                 }
                                 cursor="pointer"
-                                bg={ticket === currentTicket ? 'blue.600' : ''}
+                                bgColor={
+                                    ticket === currentTicket
+                                        ? 'wato.primary'
+                                        : ''
+                                }
                                 color={
                                     ticket === currentTicket ? 'white' : 'black'
                                 }
diff --git a/frontend/src/components/TreeView.js b/frontend/src/components/TreeView.js
index 3a6b5c5..202e4af 100644
--- a/frontend/src/components/TreeView.js
+++ b/frontend/src/components/TreeView.js
@@ -16,7 +16,8 @@ const TreeView = () => {
     const getFundingItemTree = (fi) => (
         <Box key={fi.code} m="0 !important">
             <Box
-                bgColor="blue.200"
+                bgColor="wato.primary"
+                color="white"
                 m="4px 10% 0"
                 p="4px 8px"
                 borderRadius="8px"
@@ -34,7 +35,8 @@ const TreeView = () => {
                 return (
                     <Box
                         key={ppr.code}
-                        bgColor="cyan.200"
+                        bgColor="wato.secondary"
+                        color="white"
                         m="4px 0 0 20%"
                         p="4px 8px"
                         borderRadius="8px"
@@ -56,7 +58,8 @@ const TreeView = () => {
                 return (
                     <Box
                         key={upr.code}
-                        bgColor="teal.200"
+                        bgColor="wato.greenDark"
+                        color="white"
                         m="4px 0 0 20%"
                         p="4px 8px"
                         borderRadius="8px"
@@ -93,7 +96,8 @@ const TreeView = () => {
     return (
         <Stack>
             <Box
-                bgColor="purple.200"
+                bgColor="wato.primaryDark"
+                color="white"
                 p="4px 8px"
                 mr="20%"
                 borderRadius="8px"
diff --git a/frontend/src/components/TreeViewWithLinks.js b/frontend/src/components/TreeViewWithLinks.js
index 80ee05c..ce5cb6a 100644
--- a/frontend/src/components/TreeViewWithLinks.js
+++ b/frontend/src/components/TreeViewWithLinks.js
@@ -17,7 +17,8 @@ const TreeViewWithLinks = () => {
         <Box key={fi.code} m="0 !important">
             <Link href={getPreserveParamsHref(fi.path)}>
                 <Box
-                    bgColor="blue.200"
+                    bgColor="wato.primary"
+                    color="white"
                     m="4px 10% 0"
                     p="4px 8px"
                     borderRadius="8px"
@@ -36,7 +37,8 @@ const TreeViewWithLinks = () => {
                 return (
                     <Link key={ppr.code} href={getPreserveParamsHref(ppr.path)}>
                         <Box
-                            bgColor="cyan.200"
+                            bgColor="wato.secondary"
+                            color="white"
                             m="4px 0 0 20%"
                             p="4px 8px"
                             borderRadius="8px"
@@ -59,7 +61,8 @@ const TreeViewWithLinks = () => {
                 return (
                     <Link key={upr.code} href={getPreserveParamsHref(upr.path)}>
                         <Box
-                            bgColor="teal.200"
+                            bgColor="wato.greenDark"
+                            color="white"
                             m="4px 0 0 20%"
                             p="4px 8px"
                             borderRadius="8px"
@@ -98,7 +101,8 @@ const TreeViewWithLinks = () => {
         <Stack w="100%">
             <Link href={getPreserveParamsHref(currentTree.path)}>
                 <Box
-                    bgColor="purple.200"
+                    bgColor="wato.primaryDark"
+                    color="white"
                     p="4px 8px"
                     mr="20%"
                     borderRadius="8px"
diff --git a/frontend/src/components/UpdateTicketModal.js b/frontend/src/components/UpdateTicketModal.js
index 98f9635..554ce17 100644
--- a/frontend/src/components/UpdateTicketModal.js
+++ b/frontend/src/components/UpdateTicketModal.js
@@ -165,13 +165,13 @@ const UpdateTicketModal = ({ isOpen, onClose }) => {
                 <ModalCloseButton />
                 <ModalBody>{displayTicketType()}</ModalBody>
                 <ModalFooter>
-                    <Button colorScheme="red" mr={3} onClick={onClose}>
+                    <Button variant="redDark" mr={3} onClick={onClose}>
                         Close
                     </Button>
                     <Button
                         isDisabled={isDisabled}
                         isLoading={isLoading}
-                        colorScheme="blue"
+                        variant="secondary"
                         onClick={handleSubmit(updateTicket)}
                     >
                         Update Ticket
diff --git a/frontend/src/components/UploadFileModal.js b/frontend/src/components/UploadFileModal.js
index 223513a..fbb7a91 100644
--- a/frontend/src/components/UploadFileModal.js
+++ b/frontend/src/components/UploadFileModal.js
@@ -173,7 +173,7 @@ const UploadFileModal = ({
                     </UnorderedList>
                 </ModalBody>
                 <ModalFooter>
-                    <Button colorScheme="red" mr={3} onClick={onClose}>
+                    <Button variant="redDark" mr={3} onClick={onClose}>
                         Close
                     </Button>
                     <Button
@@ -181,7 +181,7 @@ const UploadFileModal = ({
                             filesToUpload.length === 0 &&
                             filesToDelete.length === 0
                         }
-                        colorScheme="blue"
+                        variant="secondary"
                         onClick={submitFiles}
                     >
                         Save Changes
diff --git a/frontend/src/pages/Dashboard.js b/frontend/src/pages/Dashboard.js
index 65c2349..a593ab4 100644
--- a/frontend/src/pages/Dashboard.js
+++ b/frontend/src/pages/Dashboard.js
@@ -270,21 +270,21 @@ const Dashboard = () => {
                             >
                                 <Button
                                     size="sm"
-                                    colorScheme="cyan"
+                                    variant="secondary"
                                     onClick={onOpenUpdateTicket}
                                 >
                                     <Text>Update</Text>
                                 </Button>
                                 <Button
                                     size="sm"
-                                    colorScheme="red"
+                                    variant="redDark"
                                     onClick={onOpenDeleteTicket}
                                 >
                                     <Text>Delete</Text>
                                 </Button>
                                 <Button
                                     size="sm"
-                                    colorScheme="gray"
+                                    variant="grey"
                                     onClick={onOpenUploadModal}
                                 >
                                     <Text>Upload Files</Text>
@@ -292,7 +292,7 @@ const Dashboard = () => {
                                 {currentTicket.type === TICKET_TYPES.PPR && (
                                     <Button
                                         size="sm"
-                                        colorScheme="blackAlpha"
+                                        variant="greenDark"
                                         onClick={onOpenSupportingDocumentsModal}
                                     >
                                         <Text>Upload Expense Claim Form</Text>