diff --git a/components/shared/Notification.tsx b/components/shared/Notification.tsx
index e5833f4c..b63e710d 100644
--- a/components/shared/Notification.tsx
+++ b/components/shared/Notification.tsx
@@ -131,30 +131,34 @@ const Notification = ({ notification }: { notification: Notification }) => {
       leaveTo="-translate-y-2 sm:translate-y-0 sm:-translate-x-48"
     >
       <div
-        className={`pointer-events-auto mt-2 w-full max-w-sm overflow-hidden rounded-md border border-th-bkg-4 bg-th-bkg-3 shadow-lg ring-1 ring-black ring-opacity-5`}
+        className={`pointer-events-auto mt-2 w-full max-w-sm rounded-md border bg-th-bkg-2 shadow-lg ${
+          type === 'success'
+            ? 'border-th-green'
+            : type === 'error'
+            ? 'border-th-red'
+            : 'border-th-bkg-4'
+        }`}
       >
-        <div className={`relative flex items-center px-2 py-2.5`}>
-          <div className={`flex-shrink-0`}>
+        <div className={`relative flex items-center p-3.5`}>
+          <div className={`mr-1 flex-shrink-0`}>
             {type === 'success' ? (
-              <CheckCircleIcon className={`mr-1 h-7 w-7 text-th-green`} />
+              <CheckCircleIcon className={`h-6 w-6 text-th-green`} />
             ) : null}
             {type === 'info' && (
-              <InformationCircleIcon className={`mr-1 h-7 w-7 text-th-fgd-3`} />
+              <InformationCircleIcon className={`h-6 w-6 text-th-fgd-3`} />
             )}
             {type === 'error' && (
-              <XCircleIcon className={`mr-1 h-7 w-7 text-th-red`} />
+              <XCircleIcon className={`h-6 w-6 text-th-red`} />
             )}
             {type === 'confirm' && (
-              <Loading className="mr-1 h-7 w-7 text-th-fgd-3" />
+              <Loading className="mr-0.5 h-5 w-5 text-th-primary" />
             )}
           </div>
           <div className={`ml-2 flex-1`}>
-            <p className={`text-normal font-bold text-th-fgd-1`}>
-              {parsedTitle || title}
-            </p>
+            <p className={`text-th-fgd-1`}>{parsedTitle || title}</p>
             {description ? (
               <p
-                className={`mb-0 mt-0.5 break-all text-sm leading-tight text-th-fgd-3`}
+                className={`mb-0 mt-0.5 break-all text-sm leading-tight text-th-fgd-4`}
               >
                 {description}
               </p>
@@ -167,11 +171,11 @@ const Notification = ({ notification }: { notification: Notification }) => {
                   '?cluster=' +
                   CLUSTER
                 }
-                className="mt-1 flex items-center text-sm text-th-primary"
+                className="default-transition mt-1 flex items-center text-xs text-th-fgd-3 hover:text-th-fgd-2"
                 target="_blank"
                 rel="noreferrer"
               >
-                <div className="break-all text-th-primary">
+                <div className="break-all">
                   {type === 'error'
                     ? txid
                     : `${txid.slice(0, 14)}...${txid.slice(txid.length - 14)}`}
@@ -183,7 +187,7 @@ const Notification = ({ notification }: { notification: Notification }) => {
           <div className={`absolute right-2 top-2 flex-shrink-0`}>
             <button
               onClick={hideNotification}
-              className={`text-th-fgd-4 focus:outline-none md:hover:text-th-primary`}
+              className={`default-transition text-th-fgd-4 focus:outline-none md:hover:text-th-fgd-3`}
             >
               <span className={`sr-only`}>Close</span>
               <svg
diff --git a/components/swap/SwapForm.tsx b/components/swap/SwapForm.tsx
index d70666d4..9f4d52ba 100644
--- a/components/swap/SwapForm.tsx
+++ b/components/swap/SwapForm.tsx
@@ -198,7 +198,7 @@ const SwapForm = () => {
     >
       <div className="p-6 pt-3">
         <Transition
-          className="thin-scroll absolute top-0 left-0 z-20 h-full w-full overflow-auto bg-th-bkg-1 p-6 pb-0"
+          className="thin-scroll absolute top-0 left-0 z-10 h-full w-full overflow-auto bg-th-bkg-1 p-6 pb-0"
           show={showConfirm}
           enter="transition ease-in duration-300"
           enterFrom="translate-x-full"
@@ -218,7 +218,7 @@ const SwapForm = () => {
           />
         </Transition>
         <EnterBottomExitBottom
-          className="thin-scroll absolute bottom-0 left-0 z-20 h-full w-full overflow-auto bg-th-bkg-1 p-6 pb-0"
+          className="thin-scroll absolute bottom-0 left-0 z-10 h-full w-full overflow-auto bg-th-bkg-1 p-6 pb-0"
           show={!!showTokenSelect}
         >
           <SwapFormTokenList
@@ -233,7 +233,7 @@ const SwapForm = () => {
           />
         </EnterBottomExitBottom>
         <EnterBottomExitBottom
-          className="thin-scroll absolute bottom-0 left-0 z-20 h-full w-full overflow-auto bg-th-bkg-1 p-6 pb-0"
+          className="thin-scroll absolute bottom-0 left-0 z-10 h-full w-full overflow-auto bg-th-bkg-1 p-6 pb-0"
           show={showSettings}
         >
           <SwapSettings onClose={() => setShowSettings(false)} />
diff --git a/components/swap/SwapFormTokenList.tsx b/components/swap/SwapFormTokenList.tsx
index 300785c7..cbbcc53b 100644
--- a/components/swap/SwapFormTokenList.tsx
+++ b/components/swap/SwapFormTokenList.tsx
@@ -61,7 +61,7 @@ const TokenItem = ({
     <div>
       <button
         key={address}
-        className="flex w-full cursor-pointer items-center justify-between rounded-md p-2 font-normal focus:bg-th-bkg-3 focus:outline-none md:hover:bg-th-bkg-2"
+        className="default-transition flex w-full cursor-pointer items-center justify-between rounded-md p-2 font-normal focus:bg-th-bkg-3 focus:outline-none md:hover:bg-th-bkg-2"
         onClick={() => onSubmit(address)}
         disabled={isDisabled}
       >
@@ -184,7 +184,11 @@ const SwapFormTokenList = ({
           ? `${t('swap')} ${t('swap:from')}`
           : `${t('swap')} ${t('swap:to')}`}
       </p>
-      <IconButton className="absolute top-2 right-2" onClick={onClose} hideBg>
+      <IconButton
+        className="absolute top-2 right-2 text-th-fgd-3 hover:text-th-fgd-2"
+        onClick={onClose}
+        hideBg
+      >
         <XMarkIcon className="h-6 w-6" />
       </IconButton>
       {/* No need for search/popular tokens until we have more tokens */}
@@ -232,7 +236,7 @@ const SwapFormTokenList = ({
         </div>
       ) : null} */}
       {/* <div className="my-2 border-t border-th-bkg-4"></div> */}
-      <div className="mb-2 flex justify-between rounded bg-th-bkg-3 p-2">
+      <div className="mb-2 flex justify-between rounded bg-th-bkg-2 p-2">
         <p className="text-xs text-th-fgd-4">{t('token')}</p>
         {type === 'input' ? (
           <p className="text-xs text-th-fgd-4">{t('max')}</p>