diff --git a/public/logo-no-bg.png b/public/logo-no-bg.png
new file mode 100644
index 0000000..0be2f57
Binary files /dev/null and b/public/logo-no-bg.png differ
diff --git a/src/components/Body/AddressInput/AddressBook/index.tsx b/src/components/Body/AddressInput/AddressBook/index.tsx
index 2a4e587..ca9e3df 100644
--- a/src/components/Body/AddressInput/AddressBook/index.tsx
+++ b/src/components/Body/AddressInput/AddressBook/index.tsx
@@ -72,6 +72,7 @@ function AddressBook({
           lg: "60rem",
         }}
         pb="6"
+        bg={"brand.lightBlack"}
       >
         <ModalHeader>Address Book</ModalHeader>
         <ModalCloseButton />
diff --git a/src/components/Body/AddressInput/index.tsx b/src/components/Body/AddressInput/index.tsx
index 3142624..ccc73d3 100644
--- a/src/components/Body/AddressInput/index.tsx
+++ b/src/components/Body/AddressInput/index.tsx
@@ -18,7 +18,6 @@ interface AddressInputParams {
   setShowAddress: (value: string) => void;
   setAddress: (value: string) => void;
   setIsAddressValid: (value: boolean) => void;
-  bg: string;
   isAddressValid: boolean;
   selectedTabIndex: number;
   isConnected: boolean;
@@ -32,7 +31,6 @@ function AddressInput({
   setShowAddress,
   setAddress,
   setIsAddressValid,
-  bg,
   isAddressValid,
   selectedTabIndex,
   isConnected,
@@ -61,7 +59,7 @@ function AddressInput({
               setAddress(_showAddress);
               setIsAddressValid(true); // remove inValid warning when user types again
             }}
-            bg={bg}
+            bg={"brand.lightBlack"}
             isInvalid={!isAddressValid}
           />
           {(selectedTabIndex === 0 && isConnected) ||
diff --git a/src/components/Body/IFrameConnectTab/SupportedDapps/index.tsx b/src/components/Body/IFrameConnectTab/SupportedDapps/index.tsx
index c8baa1d..0b26e17 100644
--- a/src/components/Body/IFrameConnectTab/SupportedDapps/index.tsx
+++ b/src/components/Body/IFrameConnectTab/SupportedDapps/index.tsx
@@ -95,6 +95,7 @@ function SupportedDapps({
             md: "40rem",
             lg: "60rem",
           }}
+          bg={"brand.lightBlack"}
         >
           <ModalHeader>Select a dapp</ModalHeader>
           <ModalCloseButton />
diff --git a/src/components/Body/IFrameConnectTab/index.tsx b/src/components/Body/IFrameConnectTab/index.tsx
index 4719c5a..0b51627 100644
--- a/src/components/Body/IFrameConnectTab/index.tsx
+++ b/src/components/Body/IFrameConnectTab/index.tsx
@@ -24,7 +24,6 @@ interface IFrameConnectTabParams {
   inputAppUrl: string | undefined;
   setInputAppUrl: (value: string | undefined) => void;
   appUrl: string | undefined;
-  bg: string;
   isIFrameLoading: boolean;
   setIsIFrameLoading: (value: boolean) => void;
   iframeKey: number;
@@ -37,7 +36,6 @@ function IFrameConnectTab({
   initIFrame,
   setInputAppUrl,
   inputAppUrl,
-  bg,
   isIFrameLoading,
   appUrl,
   iframeKey,
@@ -63,12 +61,12 @@ function IFrameConnectTab({
           <InputGroup>
             <Input
               pr="3.5rem"
+              bg={"brand.lightBlack"}
               placeholder="https://app.uniswap.org/"
               aria-label="dapp-url"
               autoComplete="off"
               value={inputAppUrl}
               onChange={(e) => setInputAppUrl(e.target.value)}
-              bg={bg}
             />
             {inputAppUrl && (
               <InputRightElement px="1rem" mr="0.5rem">
diff --git a/src/components/Body/NetworkInput.tsx b/src/components/Body/NetworkInput.tsx
index cf7d122..800feb1 100644
--- a/src/components/Body/NetworkInput.tsx
+++ b/src/components/Body/NetworkInput.tsx
@@ -46,10 +46,20 @@ function NetworkInput({
         size="md"
         tagVariant="solid"
         chakraStyles={{
+          menuList: (provided) => ({
+            ...provided,
+            bg: "brand.black",
+          }),
+          option: (provided, state) => ({
+            ...provided,
+            color: "white",
+            bg: state.isFocused ? "whiteAlpha500" : "brand.lightBlack",
+          }),
           groupHeading: (provided, state) => ({
             ...provided,
             h: "1px",
             borderTop: "1px solid white",
+            bg: "brand.black",
           }),
         }}
         closeMenuOnSelect
diff --git a/src/components/Body/NotificationBar.tsx b/src/components/Body/NotificationBar.tsx
index 086e325..d3ad3d4 100644
--- a/src/components/Body/NotificationBar.tsx
+++ b/src/components/Body/NotificationBar.tsx
@@ -13,50 +13,49 @@ import { faDiscord } from "@fortawesome/free-brands-svg-icons";
 import { ExternalLinkIcon } from "@chakra-ui/icons";
 import axios from "axios";
 
-// const CLOSED_KEY = "discord-notif-closed";
+const CLOSED_KEY = "new-ui-notif-closed";
 
 function NotificationBar() {
-  // const isClosed = localStorage.getItem(CLOSED_KEY);
+  const isClosed = localStorage.getItem(CLOSED_KEY);
 
-  // const [isVisible, setIsVisible] = useState(
-  //   isClosed === "true" ? false : true
-  // );
-
-  // useEffect(() => {
-  //   if (!isVisible) {
-  //     localStorage.setItem(CLOSED_KEY, "true");
-  //   }
-  // }, [isVisible]);
-
-  const [donor, setDonor] = useState<string>();
+  const [isVisible, setIsVisible] = useState(
+    isClosed === "true" ? false : true
+  );
 
   useEffect(() => {
-    axios
-      .get("https://api.impersonator.xyz/api")
-      .then((res) => {
-        setDonor(res.data);
-      })
-      .catch((err) => {
-        console.log(err);
-      });
-  }, []);
+    if (!isVisible) {
+      localStorage.setItem(CLOSED_KEY, "true");
+    }
+  }, [isVisible]);
 
-  return donor ? (
-    <Alert status="info">
+  // const [donor, setDonor] = useState<string>();
+
+  // useEffect(() => {
+  //   axios
+  //     .get("https://api.impersonator.xyz/api")
+  //     .then((res) => {
+  //       setDonor(res.data);
+  //     })
+  //     .catch((err) => {
+  //       console.log(err);
+  //     });
+  // }, []);
+
+  return isVisible ? (
+    <Alert status="info" bg={"#151515"}>
       <Center w="100%">
         <Text>
-          <span style={{ fontSize: "1.2rem" }}>🏆</span> Thanks to{" "}
-          <span style={{ fontWeight: "bold" }}>{donor}</span> for donating in
-          Gitcoin Grants #18
+          <span style={{ fontSize: "1.2rem" }}>✨</span>{" "}
+          <span style={{ fontWeight: "bold" }}>New UI is here</span>
         </Text>
       </Center>
-      {/* <CloseButton
+      <CloseButton
         alignSelf="flex-start"
         position="relative"
         right={-1}
         top={-1}
         onClick={() => setIsVisible(false)}
-      /> */}
+      />
     </Alert>
   ) : null;
 }
diff --git a/src/components/Body/TabsSelect.tsx b/src/components/Body/TabsSelect.tsx
index 852f33d..22e1e65 100644
--- a/src/components/Body/TabsSelect.tsx
+++ b/src/components/Body/TabsSelect.tsx
@@ -19,7 +19,7 @@ function TabsSelect({
         minH="3rem"
         px="1.5rem"
         spacing={"8"}
-        background="gray.700"
+        bg={"brand.lightBlack"}
         borderRadius="xl"
       >
         {tabs.map((t, i) => (
diff --git a/src/components/Body/TenderlySettings.tsx b/src/components/Body/TenderlySettings.tsx
index 683a951..ec4bf9f 100644
--- a/src/components/Body/TenderlySettings.tsx
+++ b/src/components/Body/TenderlySettings.tsx
@@ -43,7 +43,13 @@ function TenderlySettings({
           </Button>
         </Box>
       </PopoverTrigger>
-      <PopoverContent border={0} boxShadow="xl" rounded="xl" overflowY="auto">
+      <PopoverContent
+        border={0}
+        bg="brand.lightBlack"
+        boxShadow="xl"
+        rounded="xl"
+        overflowY="auto"
+      >
         <Box px="1rem" py="1rem">
           <HStack>
             <Text>(optional) Tenderly Fork Id:</Text>
diff --git a/src/components/Body/TransactionRequests.tsx b/src/components/Body/TransactionRequests.tsx
index b807375..d7de61a 100644
--- a/src/components/Body/TransactionRequests.tsx
+++ b/src/components/Body/TransactionRequests.tsx
@@ -25,6 +25,7 @@ import {
 } from "@chakra-ui/icons";
 import CopyToClipboard from "./CopyToClipboard";
 import { TxnDataType } from "../../types";
+import { useEffect } from "react";
 
 export const slicedText = (txt: string) => {
   return txt.length > 6
@@ -81,7 +82,16 @@ function TransactionRequests({
   setSendTxnData,
   networkId,
 }: TransactionRequestsParams) {
-  const { isOpen: tableIsOpen, onToggle: tableOnToggle } = useDisclosure();
+  const {
+    isOpen: tableIsOpen,
+    onOpen: tableOnOpen,
+    onToggle: tableOnToggle,
+  } = useDisclosure();
+
+  useEffect(() => {
+    // keep table open on load
+    tableOnOpen();
+  }, []);
 
   return (
     <Box
diff --git a/src/components/Body/WalletConnectTab/URIInput.tsx b/src/components/Body/WalletConnectTab/URIInput.tsx
index 17b1c9c..ab9a84a 100644
--- a/src/components/Body/WalletConnectTab/URIInput.tsx
+++ b/src/components/Body/WalletConnectTab/URIInput.tsx
@@ -16,7 +16,6 @@ import { InfoIcon, DeleteIcon } from "@chakra-ui/icons";
 interface URIInputParams {
   uri: string;
   setUri: (value: string) => void;
-  bg: string;
   isConnected: boolean;
   initWalletConnect: () => void;
 }
@@ -24,7 +23,6 @@ interface URIInputParams {
 function URIInput({
   uri,
   setUri,
-  bg,
   isConnected,
   initWalletConnect,
 }: URIInputParams) {
@@ -63,6 +61,7 @@ function URIInput({
         <InputGroup>
           <Input
             pr={isConnected ? "0" : "3.5rem"}
+            bg={"brand.lightBlack"}
             placeholder="wc:xyz123"
             aria-label="uri"
             autoComplete="off"
@@ -73,7 +72,6 @@ function URIInput({
               setPasted(true);
               setUri(e.clipboardData.getData("text"));
             }}
-            bg={bg}
             isDisabled={isConnected}
           />
           {uri && !isConnected && (
diff --git a/src/components/Body/WalletConnectTab/index.tsx b/src/components/Body/WalletConnectTab/index.tsx
index 4d20ad0..76e90b6 100644
--- a/src/components/Body/WalletConnectTab/index.tsx
+++ b/src/components/Body/WalletConnectTab/index.tsx
@@ -7,7 +7,6 @@ import URIInput from "./URIInput";
 interface WalletConnectTabParams {
   uri: string;
   setUri: (value: string) => void;
-  bg: string;
   isConnected: boolean;
   initWalletConnect: () => void;
   loading: boolean;
@@ -20,7 +19,6 @@ interface WalletConnectTabParams {
 function WalletConnectTab({
   uri,
   setUri,
-  bg,
   isConnected,
   initWalletConnect,
   loading,
@@ -34,7 +32,6 @@ function WalletConnectTab({
       <URIInput
         uri={uri}
         setUri={setUri}
-        bg={bg}
         isConnected={isConnected}
         initWalletConnect={initWalletConnect}
       />
diff --git a/src/components/Body/index.tsx b/src/components/Body/index.tsx
index 89dc615..bb62ffb 100644
--- a/src/components/Body/index.tsx
+++ b/src/components/Body/index.tsx
@@ -641,7 +641,6 @@ function Body() {
           setShowAddress={setShowAddress}
           setAddress={setAddress}
           setIsAddressValid={setIsAddressValid}
-          bg={bgColor[colorMode]}
           isAddressValid={isAddressValid}
           selectedTabIndex={selectedTabIndex}
           isConnected={isConnected}
@@ -666,7 +665,6 @@ function Body() {
                 <WalletConnectTab
                   uri={uri}
                   setUri={setUri}
-                  bg={bgColor[colorMode]}
                   isConnected={isConnected}
                   initWalletConnect={initWalletConnect}
                   loading={loading}
@@ -683,7 +681,6 @@ function Body() {
                   initIFrame={initIFrame}
                   setInputAppUrl={setInputAppUrl}
                   inputAppUrl={inputAppUrl}
-                  bg={bgColor[colorMode]}
                   isIFrameLoading={isIFrameLoading}
                   appUrl={appUrl}
                   iframeKey={iframeKey}
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index e1ab1c5..f40b052 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -92,7 +92,13 @@ function Footer() {
         </Box>
       )}
       <VStack>
-        <Alert status="info" variant="solid" rounded="lg">
+        <Alert
+          status="info"
+          bg={"whiteAlpha.200"}
+          color="white"
+          variant="solid"
+          rounded="lg"
+        >
           <Stack direction={{ base: "column", md: "row" }}>
             <Center>Found the project helpful?</Center>
             <HStack>
@@ -113,13 +119,11 @@ function Footer() {
                 <>
                   <Button
                     size={"sm"}
-                    colorScheme={"linkedin"}
                     fontWeight={"bold"}
                     onClick={() => {
                       openSupportModal();
                     }}
-                    border="1px"
-                    borderColor={"cyan.500"}
+                    bg={"blackAlpha.500"}
                   >
                     Support!
                   </Button>
@@ -133,7 +137,7 @@ function Footer() {
                       backdropFilter="auto"
                       backdropBlur="3px"
                     />
-                    <ModalContent>
+                    <ModalContent bg={"brand.lightBlack"}>
                       <ModalHeader>Support</ModalHeader>
                       <ModalCloseButton />
                       <ModalBody pb={6}>
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 7f51bb0..bb8b508 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -15,7 +15,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faGithub } from "@fortawesome/free-brands-svg-icons";
 
 function Navbar() {
-  const { colorMode, toggleColorMode } = useColorMode();
+  const { colorMode } = useColorMode();
   const underlineColor = { light: "gray.500", dark: "gray.400" };
 
   return (
@@ -32,14 +32,11 @@ function Navbar() {
         pr="2rem"
       >
         <HStack>
-          <Image src="/logo.png" w="3rem" mr="1rem" />
+          <Image src="/logo-no-bg.png" w="3rem" mr="1rem" />
           <Text>Impersonator</Text>
         </HStack>
       </Heading>
       <Flex flex="1" justifyContent="flex-end" alignItems={"center"}>
-        <Button onClick={toggleColorMode} rounded="full" h="40px" w="40px">
-          {colorMode === "light" ? <MoonIcon /> : <SunIcon />}
-        </Button>
         <Box pl="1rem">
           <Link
             href={"https://github.com/apoorvlathey/impersonator"}
diff --git a/src/theme.ts b/src/theme.ts
index 5a0fa90..88843f0 100644
--- a/src/theme.ts
+++ b/src/theme.ts
@@ -1,10 +1,27 @@
 import { extendTheme, ThemeConfig } from "@chakra-ui/react";
 
+const colors = {
+  brand: {
+    black: "#101010",
+    lightBlack: "#1a1a1a",
+  },
+};
+
 const config: ThemeConfig = {
   initialColorMode: "dark",
   useSystemColorMode: false,
 };
 
-const theme = extendTheme({ config });
+const theme = extendTheme({
+  styles: {
+    global: {
+      body: {
+        bg: "brand.black",
+      },
+    },
+  },
+  config,
+  colors,
+});
 
 export default theme;