diff --git a/components/AuthForm.tsx b/components/AuthForm.tsx
index a87da1dc..486b08b6 100644
--- a/components/AuthForm.tsx
+++ b/components/AuthForm.tsx
@@ -1,17 +1,17 @@
-import { useState, FormEvent } from "react";
-import styles from "../styles/Home.module.css";
-import { signIn } from "next-auth/react";
-import { useRouter } from "next/router";
-import Routes from "../routes/routes";
-import signupUser from "../api/users/signupUser";
 import {
   Button,
+  FormControl,
+  FormLabel,
+  Heading,
   Input,
   useToast,
-  Heading,
-  FormLabel,
-  FormControl,
 } from "@chakra-ui/react";
+import { signIn } from "next-auth/react";
+import { useRouter } from "next/router";
+import { FormEvent, useState } from "react";
+import signupUser from "../api/users/signupUser";
+import Routes from "../routes/routes";
+import styles from "../styles/Home.module.css";
 
 export default function AuthForm() {
   const router = useRouter();
@@ -130,12 +130,12 @@ export default function AuthForm() {
               </FormControl>
             )}
             <div className="flex flex-col mt-8">
-              <Button colorScheme="blue" type="submit">
+              <Button colorScheme="highlightPurple" type="submit">
                 {isLoginMode ? "login" : "create account"}
               </Button>
               <Button
                 variant="ghost"
-                colorScheme="blue"
+                colorScheme="highlightPurple"
                 type="button"
                 onClick={switchLoginMode}
               >
@@ -146,7 +146,7 @@ export default function AuthForm() {
               {isLoginMode && (
                 <Button
                   variant="ghost"
-                  colorScheme="blue"
+                  colorScheme="highlightPurple"
                   type="button"
                   onClick={navigateToPasswordResetPage}
                 >
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index cc624fa2..57acc461 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -1,31 +1,30 @@
-import React from "react";
 import {
+  Avatar,
   Box,
-  Flex,
-  Text,
-  IconButton,
   Button,
-  Stack,
+  Center,
   Collapse,
+  Flex,
+  IconButton,
   Link,
-  useColorModeValue,
-  useBreakpointValue,
-  useDisclosure,
-  Avatar,
-  Center,
   Menu,
   MenuButton,
   MenuDivider,
   MenuItem,
   MenuList,
+  Stack,
+  Text,
+  useBreakpointValue,
+  useColorModeValue,
+  useDisclosure,
 } from "@chakra-ui/react";
-import { MdMenu, MdClose } from "react-icons/md";
-import Routes from "../routes/routes";
-import { useRouter } from "next/router";
-import { signOut } from "next-auth/react";
 import { Session } from "next-auth";
-import MobileNav from "./NavbarMobile";
+import { signOut } from "next-auth/react";
+import { useRouter } from "next/router";
+import { MdClose, MdMenu } from "react-icons/md";
+import Routes from "../routes/routes";
 import DesktopNav from "./NavbarDesktop";
+import MobileNav from "./NavbarMobile";
 
 interface Props {
   session: Session;
@@ -42,14 +41,14 @@ export default function Header(props: Props) {
   return (
     <Box>
       <Flex
-        bg={useColorModeValue("white", "gray.800")}
-        color={useColorModeValue("gray.600", "white")}
+        bg={useColorModeValue("black", "black")}
+        color={useColorModeValue("white", "white")}
         minH={"60px"}
         py={{ base: 2 }}
         px={{ base: 4 }}
         borderBottom={1}
         borderStyle={"solid"}
-        borderColor={useColorModeValue("gray.200", "gray.900")}
+        borderColor={useColorModeValue("gray.200", "gray.200")}
         align={"center"}
       >
         <Flex
@@ -71,9 +70,9 @@ export default function Header(props: Props) {
             <Text
               textAlign={useBreakpointValue({ base: "center", md: "left" })}
               fontFamily={"heading"}
-              color={useColorModeValue("gray.800", "white")}
-              as='b'
-              textDecoration='none'
+              color={useColorModeValue("white", "white")}
+              as="b"
+              textDecoration="none"
             >
               OnLaunch &#128640;
             </Text>
@@ -85,6 +84,7 @@ export default function Header(props: Props) {
         </Flex>
 
         <Stack
+          color={useColorModeValue("white", "white")}
           flex={{ base: 1, md: 0 }}
           justify={"flex-end"}
           direction={"row"}
@@ -111,18 +111,12 @@ export default function Header(props: Props) {
                 cursor={"pointer"}
                 minW={0}
               >
-                <Avatar
-                  size={"sm"}
-                  name={props.session.user.name}
-                />
+                <Avatar size={"sm"} name={props.session.user.name} />
               </MenuButton>
-              <MenuList alignItems={"center"}>
+              <MenuList alignItems={"center"} bg={"black"}>
                 <br />
                 <Center>
-                  <Avatar
-                    size={"2xl"}
-                    name={props.session.user.name}
-                  />
+                  <Avatar size={"2xl"} name={props.session.user.name} />
                 </Center>
                 <br />
                 <Center>
@@ -130,10 +124,10 @@ export default function Header(props: Props) {
                 </Center>
                 <br />
                 <MenuDivider />
-                <MenuItem as="a" href={Routes.DASHBOARD}>
+                <MenuItem as="a" href={Routes.DASHBOARD} bg={"black"}>
                   Your Organisations
                 </MenuItem>
-                <MenuItem as="a" href="/profile">
+                <MenuItem as="a" href="/profile" bg={"black"}>
                   Your Profile
                 </MenuItem>
                 <MenuDivider />
@@ -142,6 +136,7 @@ export default function Header(props: Props) {
                     signOut();
                     navigateToAuthPage();
                   }}
+                  bg={"black"}
                 >
                   Logout
                 </MenuItem>
diff --git a/components/NavbarDesktop.tsx b/components/NavbarDesktop.tsx
index 5173b45d..f577068d 100644
--- a/components/NavbarDesktop.tsx
+++ b/components/NavbarDesktop.tsx
@@ -1,15 +1,14 @@
-import React from "react";
 import {
   Box,
+  Flex,
+  Icon,
   Link,
-  Stack,
   Popover,
-  PopoverTrigger,
   PopoverContent,
-  useColorModeValue,
+  PopoverTrigger,
+  Stack,
   Text,
-  Flex,
-  Icon,
+  useColorModeValue,
 } from "@chakra-ui/react";
 import { MdChevronRight } from "react-icons/md";
 import Routes from "../routes/routes";
@@ -29,9 +28,9 @@ const NAV_ITEMS: Array<NavItem> = [
 ];
 
 export default function DesktopNav() {
-  const linkColor = useColorModeValue("gray.600", "gray.200");
-  const linkHoverColor = useColorModeValue("gray.800", "white");
-  const popoverContentBgColor = useColorModeValue("white", "gray.800");
+  const linkColor = useColorModeValue("white", "white");
+  const linkHoverColor = useColorModeValue("gray.200", "gray.200");
+  const popoverContentBgColor = useColorModeValue("gray.200", "gray.200");
 
   return (
     <Stack direction={"row"} spacing={4}>
@@ -85,7 +84,7 @@ function DesktopSubNav({ label, href, subLabel }: NavItem) {
       display={"block"}
       p={2}
       rounded={"md"}
-      _hover={{ bg: useColorModeValue("pink.50", "gray.900") }}
+      _hover={{ bg: useColorModeValue("pink.50", "pink.50") }}
     >
       <Stack direction={"row"} align={"center"}>
         <Box>
diff --git a/components/NavbarMobile.tsx b/components/NavbarMobile.tsx
index 64646ab2..f04fcef1 100644
--- a/components/NavbarMobile.tsx
+++ b/components/NavbarMobile.tsx
@@ -1,13 +1,12 @@
-import React from "react";
 import {
-  Stack,
-  Link,
   Collapse,
+  Flex,
   Icon,
-  useColorModeValue,
+  Link,
+  Stack,
   Text,
-  Flex,
-  useDisclosure
+  useColorModeValue,
+  useDisclosure,
 } from "@chakra-ui/react";
 import { MdExpandMore } from "react-icons/md";
 import Routes from "../routes/routes";
@@ -78,7 +77,7 @@ function MobileNavItem({ label, children, href }: NavItem) {
           pl={4}
           borderLeft={1}
           borderStyle={"solid"}
-          borderColor={useColorModeValue("gray.200", "gray.700")}
+          borderColor={useColorModeValue("gray.400", "gray.700")}
           align={"start"}
         >
           {children &&
diff --git a/components/ProductCard.tsx b/components/ProductCard.tsx
index 5e55cea4..1152d57e 100644
--- a/components/ProductCard.tsx
+++ b/components/ProductCard.tsx
@@ -1,10 +1,10 @@
-import React, { useState } from "react";
-import { Product } from "../models/product";
-import { ProductType } from "../models/productType";
 import { Button, Checkbox, Divider, Heading, Text } from "@chakra-ui/react";
-import Routes from "../routes/routes";
 import { useRouter } from "next/router";
+import { useState } from "react";
 import createCheckoutSession from "../api/stripe/createCheckoutSession";
+import { Product } from "../models/product";
+import { ProductType } from "../models/productType";
+import Routes from "../routes/routes";
 
 interface Props {
   product: Product;
@@ -97,14 +97,16 @@ const ProductCard = (props: Props) => {
             }}
           >
             unlimited exceeding requests at{" "}
-            {formatCurrency((props.product.unlimitedOption.priceAmount as number))}{" "}
+            {formatCurrency(
+              props.product.unlimitedOption.priceAmount as number
+            )}{" "}
             per extra request
           </Checkbox>
         </div>
       )}
       <div className="flex-grow"></div>
       <Button
-        colorScheme="blue"
+        colorScheme="highlightPurple"
         onClick={() => handleSubscription()}
         className="mt-4 flex w-full"
         role="link"
diff --git a/components/RequestsChart.tsx b/components/RequestsChart.tsx
index 575e9325..9dbe4078 100644
--- a/components/RequestsChart.tsx
+++ b/components/RequestsChart.tsx
@@ -1,14 +1,13 @@
-import React from "react";
 import {
-  Chart as ChartJS,
   CategoryScale,
+  Chart as ChartJS,
+  Filler,
+  Legend,
+  LineElement,
   LinearScale,
   PointElement,
-  LineElement,
   Title,
   Tooltip,
-  Filler,
-  Legend,
 } from "chart.js";
 import { Line } from "react-chartjs-2";
 
@@ -40,10 +39,18 @@ export const options = {
   },
   scales: {
     y: {
+      grid: {
+        color: "#8D8D92", // Set grid line color to grey
+      },
       ticks: {
         precision: 0, // Ensure that only whole numbers are shown
       },
     },
+    x: {
+      grid: {
+        color: "#8D8D92", // Set grid line color to grey
+      },
+    },
   },
 };
 
@@ -82,8 +89,8 @@ export default function RequestChart({ requestData }: RequestChartProps) {
         fill: true,
         label: "Requests per day",
         data: dataSet,
-        borderColor: "rgb(53, 162, 235)",
-        backgroundColor: "rgba(53, 162, 235, 0.5)",
+        borderColor: "#7823C9",
+        backgroundColor: "#7823C9",
       },
     ],
   };
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 544de169..2629d003 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -1,18 +1,17 @@
-import "../styles/globals.css";
-import type { AppProps } from "next/app";
+import { ChakraProvider } from "@chakra-ui/react";
+import "cal-sans";
 import { SessionProvider } from "next-auth/react";
+import type { AppProps } from "next/app";
 import Navbar from "../components/Navbar";
-import "cal-sans";
-import { ChakraProvider, extendTheme } from "@chakra-ui/react";
-
-const chakraTheme = extendTheme();
+import customTheme from "../styles/customChakraTheme";
+import "../styles/globals.css";
 
 export default function App({
   Component,
   pageProps: { session, ...pageProps },
 }: AppProps) {
   return (
-    <ChakraProvider theme={chakraTheme} resetCSS>
+    <ChakraProvider theme={customTheme} resetCSS>
       <SessionProvider session={session}>
         <Navbar session={session} />
         <Component {...pageProps} />
diff --git a/pages/changeEmail.tsx b/pages/changeEmail.tsx
index 5fe36fe5..95c4fbe0 100644
--- a/pages/changeEmail.tsx
+++ b/pages/changeEmail.tsx
@@ -1,10 +1,10 @@
+import { Button, Center, Heading, Spinner, useToast } from "@chakra-ui/react";
+import { signOut, useSession } from "next-auth/react";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
-import styles from "../styles/Home.module.css";
-import { signOut, useSession } from "next-auth/react";
 import validateEmailChange from "../api/tokens/validateEmailChange";
 import Routes from "../routes/routes";
-import { Button, Center, Heading, Spinner, useToast } from "@chakra-ui/react";
+import styles from "../styles/Home.module.css";
 
 export default function ResetPasswordPage() {
   const router = useRouter();
@@ -71,7 +71,7 @@ export default function ResetPasswordPage() {
             </Center>
             <Center>
               <Button
-                colorScheme="blue"
+                colorScheme="highlightPurple"
                 sx={{ marginTop: 5 }}
                 onClick={navigateToAuthPage}
               >
diff --git a/pages/dashboard.tsx b/pages/dashboard.tsx
index 1f3b3d40..9a5dedff 100644
--- a/pages/dashboard.tsx
+++ b/pages/dashboard.tsx
@@ -124,7 +124,7 @@ export default function DashboardPage() {
         <div>
           <Button
             className="mt-8"
-            colorScheme="blue"
+            colorScheme="highlightPurple"
             onClick={navigateToNewOrgPage}
           >
             New Organisation
@@ -205,7 +205,7 @@ export default function DashboardPage() {
                 Cancel
               </Button>
               <Button
-                colorScheme="blue"
+                colorScheme="highlightPurple"
                 ml={3}
                 onClick={() => {
                   joinOrg(Number(orgInvite?.id));
diff --git a/pages/orgs/[orgId]/apps/[appId]/messages/[messageId]/edit.tsx b/pages/orgs/[orgId]/apps/[appId]/messages/[messageId]/edit.tsx
index 6b09bf6b..e42a0411 100644
--- a/pages/orgs/[orgId]/apps/[appId]/messages/[messageId]/edit.tsx
+++ b/pages/orgs/[orgId]/apps/[appId]/messages/[messageId]/edit.tsx
@@ -305,7 +305,7 @@ export default function EditMessageOfAppPage() {
                   <p className="text-center mt-4 ">no actions added</p>
                 )}
                 <div className="mt-4 flex justify-center">
-                  <Button colorScheme="blue" onClick={addAction}>
+                  <Button colorScheme="highlightPurple" onClick={addAction}>
                     New Action
                   </Button>
                 </div>
@@ -313,7 +313,7 @@ export default function EditMessageOfAppPage() {
               <Button
                 style={{ width: 655 }}
                 className="my-4"
-                colorScheme="blue"
+                colorScheme="highlightPurple"
                 type="submit"
               >
                 Save
@@ -344,14 +344,14 @@ export default function EditMessageOfAppPage() {
                     actions.map((action: Action, index: number) => {
                       if (action.buttonDesign === "FILLED") {
                         return (
-                          <Button colorScheme="blue" key={index}>
+                          <Button colorScheme="highlightPurple" key={index}>
                             {action.title}
                           </Button>
                         );
                       } else {
                         return (
                           <Button
-                            colorScheme="blue"
+                            colorScheme="highlightPurple"
                             variant="ghost"
                             key={index}
                           >
diff --git a/pages/orgs/[orgId]/apps/[appId]/messages/index.tsx b/pages/orgs/[orgId]/apps/[appId]/messages/index.tsx
index 96c59345..d6899848 100644
--- a/pages/orgs/[orgId]/apps/[appId]/messages/index.tsx
+++ b/pages/orgs/[orgId]/apps/[appId]/messages/index.tsx
@@ -1,42 +1,41 @@
-import Moment from "moment";
-import { useRouter } from "next/router";
-import { useEffect, useState } from "react";
-import styles from "../../../../../../styles/Home.module.css";
-import { MdDeleteForever, MdEdit } from "react-icons/md";
-import { getSession } from "next-auth/react";
-import deleteMessage from "../../../../../../api/messages/deleteMessage";
-import { useApp } from "../../../../../../api/apps/useApp";
-import Routes from "../../../../../../routes/routes";
-import { Message } from "../../../../../../models/message";
 import {
+  AlertDialog,
+  AlertDialogBody,
+  AlertDialogCloseButton,
+  AlertDialogContent,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogOverlay,
   Button,
+  Heading,
   IconButton,
-  Stack,
   Skeleton,
+  Stack,
   Table,
   Tag,
   Tbody,
+  Td,
+  Text,
   Th,
   Thead,
   Tooltip,
   Tr,
-  Text,
-  Td,
-  useToast,
   useDisclosure,
-  AlertDialog,
-  AlertDialogBody,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogContent,
-  AlertDialogOverlay,
-  AlertDialogCloseButton,
-  Heading,
+  useToast,
 } from "@chakra-ui/react";
-import React from "react";
+import Moment from "moment";
+import { getSession } from "next-auth/react";
+import { useRouter } from "next/router";
+import React, { useEffect, useState } from "react";
+import { MdDeleteForever, MdEdit } from "react-icons/md";
+import { useApp } from "../../../../../../api/apps/useApp";
+import getDashboardData from "../../../../../../api/dashboard/getDashboardData";
+import deleteMessage from "../../../../../../api/messages/deleteMessage";
 import { useOrg } from "../../../../../../api/orgs/useOrg";
 import RequestsChart from "../../../../../../components/RequestsChart";
-import getDashboardData from "../../../../../../api/dashboard/getDashboardData";
+import { Message } from "../../../../../../models/message";
+import Routes from "../../../../../../routes/routes";
+import styles from "../../../../../../styles/Home.module.css";
 
 export default function MessagesOfAppPage() {
   const router = useRouter();
@@ -186,7 +185,7 @@ export default function MessagesOfAppPage() {
           <Heading className="text-center">{data?.name}</Heading>
           {data?.role === "ADMIN" && (
             <Button
-              colorScheme="blue"
+              colorScheme="highlightPurple"
               className="mt-8"
               onClick={navigateToAppSettingsPage}
             >
@@ -205,7 +204,7 @@ export default function MessagesOfAppPage() {
           )}
           <div>
             <Button
-              colorScheme="blue"
+              colorScheme="highlightPurple"
               className="mt-8"
               onClick={navigateToNewMessagePage}
             >
@@ -215,7 +214,7 @@ export default function MessagesOfAppPage() {
           <div>
             <Button
               variant="ghost"
-              colorScheme="blue"
+              colorScheme="highlightPurple"
               className="mt-8"
               onClick={() => {
                 setShowHistory(!showHistory);
diff --git a/pages/orgs/[orgId]/apps/[appId]/messages/new.tsx b/pages/orgs/[orgId]/apps/[appId]/messages/new.tsx
index 51bf9724..a74e6c5c 100644
--- a/pages/orgs/[orgId]/apps/[appId]/messages/new.tsx
+++ b/pages/orgs/[orgId]/apps/[appId]/messages/new.tsx
@@ -1,30 +1,30 @@
-import { useRouter } from "next/router";
-import { ChangeEvent, FormEvent, useState } from "react";
-import styles from "../../../../../../styles/Home.module.css";
-import { MdDeleteForever, MdClose } from "react-icons/md";
-import { getSession } from "next-auth/react";
-import createMessage from "../../../../../../api/messages/createMessage";
-import Routes from "../../../../../../routes/routes";
-import { Action } from "../../../../../../models/action";
-import { Message } from "../../../../../../models/message";
 import {
   Button,
   FormControl,
   FormLabel,
+  Heading,
   IconButton,
   Input,
   Select,
   Switch,
   Table,
   Tbody,
+  Td,
   Textarea,
   Th,
   Thead,
   Tr,
-  Td,
   useToast,
-  Heading,
 } from "@chakra-ui/react";
+import { getSession } from "next-auth/react";
+import { useRouter } from "next/router";
+import { ChangeEvent, FormEvent, useState } from "react";
+import { MdClose, MdDeleteForever } from "react-icons/md";
+import createMessage from "../../../../../../api/messages/createMessage";
+import { Action } from "../../../../../../models/action";
+import { Message } from "../../../../../../models/message";
+import Routes from "../../../../../../routes/routes";
+import styles from "../../../../../../styles/Home.module.css";
 
 export default function NewMessageForAppPage() {
   const router = useRouter();
@@ -275,10 +275,7 @@ export default function NewMessageForAppPage() {
                   <p className="text-center mt-4 ">no actions added</p>
                 )}
                 <div className="mt-4 flex justify-center">
-                  <Button
-                    colorScheme="blue"
-                    onClick={addAction}
-                  >
+                  <Button colorScheme="highlightPurple" onClick={addAction}>
                     New Action
                   </Button>
                 </div>
@@ -286,7 +283,7 @@ export default function NewMessageForAppPage() {
               <Button
                 style={{ width: 655 }}
                 className="my-4"
-                colorScheme="blue"
+                colorScheme="highlightPurple"
                 type="submit"
               >
                 Save
@@ -317,14 +314,14 @@ export default function NewMessageForAppPage() {
                     actions.map((action: Action, index: number) => {
                       if (action.buttonDesign === "FILLED") {
                         return (
-                          <Button colorScheme="blue" key={index}>
+                          <Button colorScheme="highlightPurple" key={index}>
                             {action.title}
                           </Button>
                         );
                       } else {
                         return (
                           <Button
-                            colorScheme="blue"
+                            colorScheme="highlightPurple"
                             variant="ghost"
                             key={index}
                           >
diff --git a/pages/orgs/[orgId]/apps/[appId]/settings.tsx b/pages/orgs/[orgId]/apps/[appId]/settings.tsx
index 768fa93f..6b6ea8a7 100644
--- a/pages/orgs/[orgId]/apps/[appId]/settings.tsx
+++ b/pages/orgs/[orgId]/apps/[appId]/settings.tsx
@@ -1,30 +1,28 @@
-import { useRouter } from "next/router";
-import { FormEvent, useEffect, useState } from "react";
-import styles from "../../../../../styles/Home.module.css";
-import { getSession } from "next-auth/react";
-import getApp from "../../../../../api/apps/getApp";
-import updateApp from "../../../../../api/apps/updateApp";
-import Routes from "../../../../../routes/routes";
-import { App } from "../../../../../models/app";
-import deleteApp from "../../../../../api/apps/deleteApp";
 import {
-  Input,
-  Button,
-  useToast,
-  useDisclosure,
   AlertDialog,
   AlertDialogBody,
+  AlertDialogCloseButton,
+  AlertDialogContent,
   AlertDialogFooter,
   AlertDialogHeader,
-  AlertDialogContent,
   AlertDialogOverlay,
-  AlertDialogCloseButton,
-  Text,
-  Heading,
+  Button,
   FormControl,
   FormLabel,
+  Heading,
+  Input,
+  useDisclosure,
+  useToast,
 } from "@chakra-ui/react";
-import React from "react";
+import { getSession } from "next-auth/react";
+import { useRouter } from "next/router";
+import React, { FormEvent, useEffect, useState } from "react";
+import deleteApp from "../../../../../api/apps/deleteApp";
+import getApp from "../../../../../api/apps/getApp";
+import updateApp from "../../../../../api/apps/updateApp";
+import { App } from "../../../../../models/app";
+import Routes from "../../../../../routes/routes";
+import styles from "../../../../../styles/Home.module.css";
 
 export default function EditAppPage() {
   const router = useRouter();
@@ -150,7 +148,11 @@ export default function EditAppPage() {
               />
             </FormControl>
             <div className="flex justify-center">
-              <Button colorScheme="blue" className="mt-4" type="submit">
+              <Button
+                colorScheme="highlightPurple"
+                className="mt-4"
+                type="submit"
+              >
                 update
               </Button>
             </div>
@@ -163,7 +165,7 @@ export default function EditAppPage() {
                 <Input disabled id="publicKey" value={appKey} />
                 <Button
                   className="ml-2"
-                  colorScheme="blue"
+                  colorScheme="highlightPurple"
                   onClick={() => {
                     navigator.clipboard.writeText(appKey as string);
                     toast({
@@ -181,11 +183,7 @@ export default function EditAppPage() {
             </FormControl>
           </div>
           <Heading className="text-center mt-16">Delete App</Heading>
-          <Button
-            className="mt-8"
-            colorScheme="red"
-            onClick={handleDelete}
-          >
+          <Button className="mt-8" colorScheme="red" onClick={handleDelete}>
             delete
           </Button>
           <AlertDialog
diff --git a/pages/orgs/[orgId]/apps/index.tsx b/pages/orgs/[orgId]/apps/index.tsx
index 75285c6b..ad6e16af 100644
--- a/pages/orgs/[orgId]/apps/index.tsx
+++ b/pages/orgs/[orgId]/apps/index.tsx
@@ -113,7 +113,7 @@ export default function AppsPage() {
         </Heading>
         <Button
           className="mt-8"
-          colorScheme="blue"
+          colorScheme="highlightPurple"
           onClick={() => {
             navigateToOrgSettingsPage(orgId);
           }}
@@ -128,7 +128,7 @@ export default function AppsPage() {
             {currentPeriodStart && (
               <Button
                 variant="ghost"
-                colorScheme="blue"
+                colorScheme="highlightPurple"
                 className="mt-8"
                 onClick={() => {
                   setShowCurrentBillingPeriod(!showCurrentBillingPeriod);
@@ -153,7 +153,7 @@ export default function AppsPage() {
           <div>
             <Button
               className="mt-8"
-              colorScheme="blue"
+              colorScheme="highlightPurple"
               onClick={navigateToNewAppPage}
             >
               New App
diff --git a/pages/orgs/[orgId]/apps/new.tsx b/pages/orgs/[orgId]/apps/new.tsx
index 0c4cc84b..fbd90b5b 100644
--- a/pages/orgs/[orgId]/apps/new.tsx
+++ b/pages/orgs/[orgId]/apps/new.tsx
@@ -1,17 +1,17 @@
-import { useRouter } from "next/router";
-import { FormEvent, useState } from "react";
-import styles from "../../../../styles/Home.module.css";
-import { getSession } from "next-auth/react";
-import createApp from "../../../../api/apps/createApp";
-import Routes from "../../../../routes/routes";
 import {
-  Input,
   Button,
-  useToast,
-  Heading,
   FormControl,
   FormLabel,
+  Heading,
+  Input,
+  useToast,
 } from "@chakra-ui/react";
+import { getSession } from "next-auth/react";
+import { useRouter } from "next/router";
+import { FormEvent, useState } from "react";
+import createApp from "../../../../api/apps/createApp";
+import Routes from "../../../../routes/routes";
+import styles from "../../../../styles/Home.module.css";
 
 export default function NewAppPage() {
   const router = useRouter();
@@ -71,7 +71,11 @@ export default function NewAppPage() {
               />
             </FormControl>
             <div className="flex justify-center">
-              <Button colorScheme="blue" className="mt-4" type="submit">
+              <Button
+                colorScheme="highlightPurple"
+                className="mt-4"
+                type="submit"
+              >
                 save
               </Button>
             </div>
diff --git a/pages/orgs/[orgId]/settings.tsx b/pages/orgs/[orgId]/settings.tsx
index 6651a8ab..22c9e6d4 100644
--- a/pages/orgs/[orgId]/settings.tsx
+++ b/pages/orgs/[orgId]/settings.tsx
@@ -378,7 +378,11 @@ export default function EditOrgPage() {
                   />
                 </FormControl>
                 <Center>
-                  <Button colorScheme="blue" className="mt-4" type="submit">
+                  <Button
+                    colorScheme="highlightPurple"
+                    className="mt-4"
+                    type="submit"
+                  >
                     update
                   </Button>
                 </Center>
@@ -402,7 +406,7 @@ export default function EditOrgPage() {
                 </FormControl>
                 <Stack>
                   <Button
-                    colorScheme="blue"
+                    colorScheme="highlightPurple"
                     className="ml-5 mt-5"
                     onClick={() => {
                       navigator.clipboard.writeText(
@@ -422,7 +426,7 @@ export default function EditOrgPage() {
                     copy
                   </Button>
                   <Button
-                    colorScheme="blue"
+                    colorScheme="highlightPurple"
                     className="ml-5 mt-1"
                     onClick={resetInvitation}
                   >
@@ -448,7 +452,11 @@ export default function EditOrgPage() {
                       onChange={(event) => setUserEmail(event.target.value)}
                     />
                     <Center>
-                      <Button className="ml-4" colorScheme="blue" type="submit">
+                      <Button
+                        className="ml-4"
+                        colorScheme="highlightPurple"
+                        type="submit"
+                      >
                         invite user
                       </Button>
                     </Center>
@@ -603,7 +611,7 @@ export default function EditOrgPage() {
                         <Center>
                           <Button
                             rightIcon={<FiExternalLink />}
-                            colorScheme="blue"
+                            colorScheme="highlightPurple"
                             variant="solid"
                             className="mt-4"
                             onClick={sendCreateCustomerPortalSession}
@@ -629,7 +637,7 @@ export default function EditOrgPage() {
                     {!loading && subs?.length == 0 && (
                       <Center>
                         <Button
-                          colorScheme="blue"
+                          colorScheme="highlightPurple"
                           variant="solid"
                           className="mt-4"
                           onClick={navigateToUpgradePage}
@@ -642,7 +650,7 @@ export default function EditOrgPage() {
                       <Center>
                         <Button
                           rightIcon={<FiExternalLink />}
-                          colorScheme="blue"
+                          colorScheme="highlightPurple"
                           variant="solid"
                           className="mt-4"
                           onClick={sendCreateCustomerPortalSession}
diff --git a/pages/orgs/new.tsx b/pages/orgs/new.tsx
index 9ea2ced8..08834509 100644
--- a/pages/orgs/new.tsx
+++ b/pages/orgs/new.tsx
@@ -81,7 +81,11 @@ export default function NewOrgPage() {
                     onChange={(event) => setOrgName(event.target.value)}
                   />
                 </div>
-                <Button colorScheme="blue" className="mt-4" type="submit">
+                <Button
+                  colorScheme="highlightPurple"
+                  className="mt-4"
+                  type="submit"
+                >
                   next
                 </Button>
               </FormControl>
diff --git a/pages/profile.tsx b/pages/profile.tsx
index 8c253d45..48839475 100644
--- a/pages/profile.tsx
+++ b/pages/profile.tsx
@@ -1,31 +1,30 @@
-import { getSession, signOut } from "next-auth/react";
-import { useRouter } from "next/router";
-import { useEffect, useState } from "react";
-import styles from "../styles/Home.module.css";
-import createEmailChangeToken from "../api/tokens/createEmailChangeToken";
-import deleteUser from "../api/users/deleteUser";
-import getUser from "../api/users/getUser";
-import updatePassword from "../api/tokens/updatePassword";
-import { User } from "../models/user";
 import {
-  Button,
-  Input,
-  useToast,
-  useDisclosure,
   AlertDialog,
   AlertDialogBody,
+  AlertDialogCloseButton,
+  AlertDialogContent,
   AlertDialogFooter,
   AlertDialogHeader,
-  AlertDialogContent,
   AlertDialogOverlay,
-  AlertDialogCloseButton,
-  Text,
-  Heading,
+  Button,
+  Center,
   FormControl,
   FormLabel,
-  Center,
+  Heading,
+  Input,
+  Text,
+  useDisclosure,
+  useToast,
 } from "@chakra-ui/react";
-import React from "react";
+import { getSession, signOut } from "next-auth/react";
+import { useRouter } from "next/router";
+import React, { useEffect, useState } from "react";
+import createEmailChangeToken from "../api/tokens/createEmailChangeToken";
+import updatePassword from "../api/tokens/updatePassword";
+import deleteUser from "../api/users/deleteUser";
+import getUser from "../api/users/getUser";
+import { User } from "../models/user";
+import styles from "../styles/Home.module.css";
 
 export default function ProfilePage() {
   const router = useRouter();
@@ -168,7 +167,11 @@ export default function ProfilePage() {
             />
           </FormControl>
           <Center>
-            <Button colorScheme="blue" className="mt-4" onClick={sendNewEmail}>
+            <Button
+              colorScheme="highlightPurple"
+              className="mt-4"
+              onClick={sendNewEmail}
+            >
               change email
             </Button>
           </Center>
@@ -216,7 +219,7 @@ export default function ProfilePage() {
           </FormControl>
           <Center>
             <Button
-              colorScheme="blue"
+              colorScheme="highlightPurple"
               className="mt-4"
               onClick={sendNewPassword}
             >
diff --git a/pages/reset.tsx b/pages/reset.tsx
index 1dd23ac0..a93aba54 100644
--- a/pages/reset.tsx
+++ b/pages/reset.tsx
@@ -1,18 +1,17 @@
-import { getSession } from "next-auth/react";
-import { useRouter } from "next/router";
-import { FormEvent, useState } from "react";
-import styles from "../styles/Home.module.css";
-import createPasswordResetToken from "../api/tokens/createPasswordResetToken";
-import Routes from "../routes/routes";
 import {
-  Input,
   Button,
-  useToast,
-  Text,
-  Heading,
   FormControl,
   FormLabel,
+  Heading,
+  Input,
+  useToast,
 } from "@chakra-ui/react";
+import { getSession } from "next-auth/react";
+import { useRouter } from "next/router";
+import { FormEvent, useState } from "react";
+import createPasswordResetToken from "../api/tokens/createPasswordResetToken";
+import Routes from "../routes/routes";
+import styles from "../styles/Home.module.css";
 
 export default function ResetPage() {
   const router = useRouter();
@@ -62,12 +61,16 @@ export default function ResetPage() {
               />
             </FormControl>
             <div className="flex flex-col">
-              <Button className="mt-4" colorScheme="blue" type="submit">
+              <Button
+                className="mt-4"
+                colorScheme="highlightPurple"
+                type="submit"
+              >
                 reset password
               </Button>
               <Button
                 variant="ghost"
-                colorScheme="blue"
+                colorScheme="highlightPurple"
                 type="button"
                 onClick={navigateToAuthPage}
               >
diff --git a/pages/resetPassword.tsx b/pages/resetPassword.tsx
index f98e6a4a..06c20226 100644
--- a/pages/resetPassword.tsx
+++ b/pages/resetPassword.tsx
@@ -1,21 +1,20 @@
-import { useRouter } from "next/router";
-import { useEffect, useState } from "react";
-import styles from "../styles/Home.module.css";
-import { getSession } from "next-auth/react";
-import getPasswordResetToken from "../api/tokens/getPasswordResetToken";
-import resetPassword from "../api/tokens/resetPassword";
-import Routes from "../routes/routes";
 import {
   Button,
-  Spinner,
-  Input,
-  useToast,
-  Text,
-  Heading,
+  Center,
   FormControl,
   FormLabel,
-  Center,
+  Heading,
+  Input,
+  Spinner,
+  useToast,
 } from "@chakra-ui/react";
+import { getSession } from "next-auth/react";
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
+import getPasswordResetToken from "../api/tokens/getPasswordResetToken";
+import resetPassword from "../api/tokens/resetPassword";
+import Routes from "../routes/routes";
+import styles from "../styles/Home.module.css";
 
 export default function ResetPasswordPage() {
   const router = useRouter();
@@ -122,7 +121,7 @@ export default function ResetPasswordPage() {
             </FormControl>
             <Center>
               <Button
-                colorScheme="blue"
+                colorScheme="highlightPurple"
                 className="mt-4"
                 onClick={sendNewPassword}
               >
diff --git a/pages/subscription.tsx b/pages/subscription.tsx
index a0e198dd..ebd369a3 100644
--- a/pages/subscription.tsx
+++ b/pages/subscription.tsx
@@ -69,14 +69,14 @@ export default function ProfilePage() {
             <Stack>
               <Button
                 onClick={() => navigateToDashboardPage()}
-                colorScheme="blue"
+                colorScheme="highlightPurple"
                 className="mt-8"
               >
                 go to dashboard
               </Button>
               <Button
                 onClick={navigateToNewOrgPage}
-                colorScheme="blue"
+                colorScheme="highlightPurple"
                 className="mt-2"
               >
                 create another
@@ -99,7 +99,7 @@ export default function ProfilePage() {
             <Stack>
               <Button
                 onClick={navigateToDashboardPage}
-                colorScheme="blue"
+                colorScheme="highlightPurple"
                 className="mt-8"
               >
                 go to dashboard
diff --git a/pages/verify.tsx b/pages/verify.tsx
index 6383fb2a..38efa416 100644
--- a/pages/verify.tsx
+++ b/pages/verify.tsx
@@ -114,7 +114,7 @@ export default function VerifyPage() {
               in
             </div>
             <Button
-              colorScheme="blue"
+              colorScheme="highlightPurple"
               sx={{ marginTop: 5 }}
               onClick={navigateToAuthPage}
             >
@@ -140,13 +140,17 @@ export default function VerifyPage() {
           !verified &&
           (!!email || !!expired || !!obsolete) &&
           !disabled && (
-            <Button colorScheme="blue" type="button" onClick={resendLink}>
+            <Button
+              colorScheme="highlightPurple"
+              type="button"
+              onClick={resendLink}
+            >
               resend link
             </Button>
           )}
         {!signup && !verified && !!email && disabled && (
           <Button
-            colorScheme="blue"
+            colorScheme="highlightPurple"
             type="button"
             disabled
             onClick={resendLink}
diff --git a/styles/Home.module.css b/styles/Home.module.css
index 8c0364cd..7fb940b5 100644
--- a/styles/Home.module.css
+++ b/styles/Home.module.css
@@ -42,6 +42,7 @@
 
 /* text (message title) on the screen */
 .phoneScreen h1 {
+  color: black;
   font-family: 'Roboto-Regular';
   font-size: 32px;
   text-align: left;
@@ -52,6 +53,7 @@
 
 /* text (message body) on the screen */
 .phoneScreen p {
+  color: black;
   font-family: 'Roboto-Regular';
   font-size: 19px;
   text-align: left;
diff --git a/styles/customChakraTheme.ts b/styles/customChakraTheme.ts
new file mode 100644
index 00000000..3513cc99
--- /dev/null
+++ b/styles/customChakraTheme.ts
@@ -0,0 +1,73 @@
+import { extendTheme } from "@chakra-ui/react";
+
+const customTheme = extendTheme({
+  colors: {
+    backgroundBlack: "#000000",
+    backgroundGray: "#2A292C",
+    textWhite: "#FFFFFF",
+    textGray: "#8D8D92",
+    highlightPurple: {
+      500: "#7823C9", // Main shade
+      600: "#6a21b3", // Darker shade for hover
+      700: "#5d1e9d", // Even darker for active
+    },
+    detailGrayPurple: "#ADA2C4",
+  },
+  components: {
+    Input: {
+      // Style configuration for the Input component
+      variants: {
+        // You can add this style under each variant you use, e.g., 'outline', 'filled', etc.
+        outline: {
+          field: {
+            _focus: {
+              borderColor: "highlightPurple.500",
+              boxShadow: `0 0 0 1px var(--chakra-colors-highlightPurple)`,
+            },
+          },
+        },
+      },
+    },
+    Textarea: {
+      // Style configuration for the Textarea component
+      variants: {
+        // Similarly, add this under each variant you use
+        outline: {
+          _focus: {
+            borderColor: "highlightPurple.500",
+            boxShadow: `0 0 0 1px var(--chakra-colors-highlightPurple)`,
+          },
+        },
+      },
+    },
+  },
+  styles: {
+    global: {
+      "html, body": {
+        color: "textGray",
+        bg: "backgroundBlack",
+        lineHeight: "base",
+      },
+      "h1, h2, h3, h4, h5, h6": {
+        color: "textWhite",
+      },
+      a: {
+        color: "highlightPurple.500",
+        _hover: {
+          textDecoration: "underline",
+        },
+      },
+      ".list-item, tbody tr": {
+        bg: "backgroundGray",
+        _hover: {
+          bg: "gray.600",
+        },
+      },
+      "input, textarea": {
+        borderColor: "detailGrayPurple",
+      },
+    },
+  },
+});
+
+export default customTheme;