diff --git a/src/custom/pages/Claim/styled.ts b/src/custom/pages/Claim/styled.ts
index caf0667de..b75054b87 100644
--- a/src/custom/pages/Claim/styled.ts
+++ b/src/custom/pages/Claim/styled.ts
@@ -1832,7 +1832,16 @@ export const BannerExplainer = styled.div`
   }
 
   > svg {
-    .stop1 { stop-color: ${({ theme }) => theme.white}}
-    .stop2 { stop-color: ${({ theme }) => theme.white}; stop-opacity: 0.8;}
-    .stop3 { stop-color: ${({ theme }) => theme.white}; stop-opacity: 0;}
+    .stop1 {
+      stop-color: ${({ theme }) => theme.white};
+    }
+    .stop2 {
+      stop-color: ${({ theme }) => theme.white};
+      stop-opacity: 0.8;
+    }
+    .stop3 {
+      stop-color: ${({ theme }) => theme.white};
+      stop-opacity: 0;
+    }
+  }
 `
diff --git a/src/custom/pages/Profile/styled.tsx b/src/custom/pages/Profile/styled.tsx
index 4adb28a11..88f494d63 100644
--- a/src/custom/pages/Profile/styled.tsx
+++ b/src/custom/pages/Profile/styled.tsx
@@ -54,14 +54,15 @@ export const ChildWrapper = styled.div`
   justify-content: center;
   border-radius: 21px;
   padding: 20px;
-  ${({ theme }) => theme.neumorphism.boxShadow};
-  background-color: ${({ theme }) => theme.bg7};
+  background-color: ${({ theme }) => theme.cardBackground};
+
   ${({ theme }) => theme.mediaWidth.upToSmall`
     grid-column-start: 1;
     grid-column-end: 2;
     width: 100%;
     padding: 14px;
   `}
+
   > .item {
     width: 100%;
   }
@@ -72,16 +73,17 @@ export const GridWrap = styled.div<Partial<CSS.Properties & { horizontal?: boole
   grid-column-gap: 22px;
   grid-row-gap: 22px;
   grid-template-columns: ${(props) => (props.horizontal ? '1fr 1fr' : '1fr')};
+
   ${({ theme }) => theme.mediaWidth.upToSmall`
-  grid-template-columns: 1fr;
-  grid-column-gap: 16px;
-  grid-row-gap: 16px;
-    grid-column-gap: 0;
-    > :first-child,
-    > :nth-child(2) {
-      grid-column-start: 1;
-      grid-column-end: 2;
-    }
+    grid-template-columns: 1fr;
+    grid-column-gap: 16px;
+    grid-row-gap: 16px;
+      grid-column-gap: 0;
+      > :first-child,
+      > :nth-child(2) {
+        grid-column-start: 1;
+        grid-column-end: 2;
+      }
   `}
 `
 
@@ -115,12 +117,15 @@ export const FlexWrap = styled.div`
   align-items: center;
   flex-direction: row;
   justify-content: center;
+
   > div {
     width: auto;
   }
+
   button {
     max-width: 180px;
   }
+
   ${({ theme }) => theme.mediaWidth.upToSmall`
     flex-wrap: wrap;
     > div {
@@ -134,8 +139,8 @@ export const FlexWrap = styled.div`
 
 export const StyledContainer = styled.div`
     display: flex;
-    flex:1;
-    align-items:center;
+    flex: 1;
+    align-items: center;
     justify-content: space-between;
   }
 
@@ -151,13 +156,16 @@ export const FlexCol = styled.div`
   align-items: center;
   flex-direction: column;
   justify-content: center;
+
   strong {
     font-size: 21px;
     margin-top: 6px;
+
     ${({ theme }) => theme.mediaWidth.upToSmall`
-    font-size: 14px;
-  `}
+      font-size: 14px;
+    `}
   }
+
   span:not([role='img']) {
     font-size: 14px;
     color: ${({ theme }) => theme.text6};
@@ -282,7 +290,8 @@ export const Card = styled.div`
 export const BannerCard = styled(BannerExplainer)`
   min-height: 192px;
   border-radius: 16px;
-  border: 0;
+  background: ${({ theme }) => transparentize(0.3, theme.bg1)};
+  border: 1px solid ${({ theme }) => theme.cardBorder};
   padding: 0 100px 0 24px;
   flex: 1;
   overflow: hidden;
@@ -293,7 +302,7 @@ export const BannerCard = styled(BannerExplainer)`
   `}
 
   &:hover {
-    border: 0;
+    border: 1px solid ${({ theme }) => theme.cardBorder};
   }
 
   > span {
@@ -301,6 +310,7 @@ export const BannerCard = styled(BannerExplainer)`
     justify-content: space-between;
     height: 100%;
     padding: 24px 0;
+    color: ${({ theme }) => theme.text1};
 
     ${({ theme }) => theme.mediaWidth.upToSmall`
       padding: 0;
@@ -309,6 +319,16 @@ export const BannerCard = styled(BannerExplainer)`
     > b {
       font-size: 24px;
 
+      @supports (-webkit-background-clip: text) {
+        background: ${({ theme }) => `linear-gradient(80deg, ${theme.primary1}, ${theme.primary1}, #5ea2fb)`};
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+      }
+
+      @supports not (-webkit-background-clip: text) {
+        color: ${({ theme }) => theme.text1};
+      }
+
       ${({ theme }) => theme.mediaWidth.upToSmall`
         text-align: center;
         margin: 0 auto;
@@ -316,6 +336,7 @@ export const BannerCard = styled(BannerExplainer)`
     }
 
     > small {
+      color: ${({ theme }) => theme.text1};
       font-size: 14px;
       line-height: 1.5;
       text-align: left;
@@ -345,7 +366,7 @@ export const BannerCard = styled(BannerExplainer)`
     > span > a,
     > span > a:link {
       font-size: 15px;
-      color: ${({ theme }) => theme.white};
+      color: ${({ theme }) => theme.text1};
 
       &:hover {
         color: ${({ theme }) => theme.primary1};
@@ -360,6 +381,20 @@ export const BannerCard = styled(BannerExplainer)`
     opacity: 0.25;
     mix-blend-mode: initial;
   }
+
+  > svg {
+    .stop1 {
+      stop-color: ${({ theme }) => theme.text1};
+    }
+    .stop2 {
+      stop-color: ${({ theme }) => theme.text1};
+      stop-opacity: 0.8;
+    }
+    .stop3 {
+      stop-color: ${({ theme }) => theme.text1};
+      stop-opacity: 0;
+    }
+  }
 `
 
 export const BalanceDisplay = styled.div<{ titleSize?: number; altColor?: boolean; hAlign?: string }>`
@@ -439,8 +474,7 @@ export const ConvertWrapper = styled.div`
   display: grid;
   grid-template-columns: 1fr 200px;
   align-items: center;
-  ${({ theme }) => theme.neumorphism.boxShadow};
-  background: ${({ theme }) => theme.bg7};
+  background: ${({ theme }) => theme.cardBackground};
   border-radius: 16px;
   padding: 16px;
   width: 100%;
@@ -476,8 +510,8 @@ export const VestingBreakdown = styled.div`
   }
 
   > span > p {
-    margin: 0;
     font-weight: 500;
+    margin: 0;
   }
 
   > span:last-of-type > p {
diff --git a/src/custom/theme/baseTheme.tsx b/src/custom/theme/baseTheme.tsx
index 46ad24d70..ee73a2fc5 100644
--- a/src/custom/theme/baseTheme.tsx
+++ b/src/custom/theme/baseTheme.tsx
@@ -80,6 +80,7 @@ export function colors(darkMode: boolean): Colors {
     // ****** other ******
     border: darkMode ? '#021E34' : '#000000',
     border2: darkMode ? '#254F83' : '#afcbda',
+    cardBackground: darkMode ? '#142642' : 'rgb(255 255 255 / 85%)',
     cardBorder: darkMode ? '#021E34' : 'rgba(255, 255, 255, 0.5)',
     cardShadow1: darkMode ? '#4C7487' : '#FFFFFF',
     cardShadow2: darkMode ? 'rgba(1, 10, 16, 0.15)' : 'rgba(11, 37, 53, 0.93)',
diff --git a/src/custom/theme/styled.d.ts b/src/custom/theme/styled.d.ts
index 0f3eed2d4..aaa1ffd5c 100644
--- a/src/custom/theme/styled.d.ts
+++ b/src/custom/theme/styled.d.ts
@@ -32,6 +32,7 @@ export interface Colors extends ColorsUniswap {
   infoText: Color
   warningText: Color
   errorText: Color
+  cardBackground: Color
   cardBorder: Color
   cardShadow1: Color
   cardShadow2: Color