diff --git a/src/components/ImgFallback/Avatar.js b/src/components/ImgFallback/Avatar.js
index 1edb9c33e..57353d46f 100644
--- a/src/components/ImgFallback/Avatar.js
+++ b/src/components/ImgFallback/Avatar.js
@@ -23,6 +23,7 @@ const Avatar = ({
   right,
   top,
   bottom,
+  quote,
 }) => {
   const name = user?.nickname
   const sliceCount = size > 32 ? 2 : 1
@@ -36,6 +37,7 @@ const Avatar = ({
       right={right}
       top={top}
       bottom={bottom}
+      quote={quote}
     >
       <Name size={size}>{name.slice(0, sliceCount)}</Name>
     </Wrapper>
@@ -53,6 +55,7 @@ Avatar.propTypes = {
   right: T.number,
   top: T.number,
   bottom: T.number,
+  quote: T.bool,
 }
 
 Avatar.defaultProps = {
@@ -66,6 +69,7 @@ Avatar.defaultProps = {
   right: 0,
   top: 0,
   bottom: 0,
+  quote: false,
 }
 
 export default React.memo(Avatar)
diff --git a/src/components/ImgFallback/styles/avatar.js b/src/components/ImgFallback/styles/avatar.js
index bf7c6222d..cc6f82061 100644
--- a/src/components/ImgFallback/styles/avatar.js
+++ b/src/components/ImgFallback/styles/avatar.js
@@ -11,13 +11,16 @@ export const Wrapper = styled.div.attrs((props) => ({
   color: ${theme('thread.articleTitle')};
   width: ${({ size }) => `${size}px`};
   height: ${({ size }) => `${size}px`};
-  background: #074857;
+  background: ${theme('avatar.fallbackBg')};
   border-radius: 100%;
 
   margin-top: ${({ top }) => `${top}px`};
   margin-bottom: ${({ bottom }) => `${bottom}px`};
   margin-left: ${({ left }) => `${left}px`};
   margin-right: ${({ right }) => `${right}px`};
+
+  border: ${({ quote }) => (quote ? '2px solid' : 'none')};
+  border-color: ${({ quote }) => (quote ? theme('avatar.quote') : 'none')};
 `
 export const Name = styled.div`
   font-family: 'Audiowide', cursive;
diff --git a/src/components/ImgFallback/styles/metric/avatar.js b/src/components/ImgFallback/styles/metric/avatar.js
index ff3304fa2..81a1c75c6 100644
--- a/src/components/ImgFallback/styles/metric/avatar.js
+++ b/src/components/ImgFallback/styles/metric/avatar.js
@@ -6,7 +6,7 @@ export const getFontSize = (size) => {
     return '14px'
   }
 
-  if (size >= 38 && size < 50) {
+  if (size >= 36 && size < 50) {
     return '14px' // two letters
   }
 
diff --git a/src/components/JobItem/styles/list_view.js b/src/components/JobItem/styles/list_view.js
index abd67118b..10d524f5c 100755
--- a/src/components/JobItem/styles/list_view.js
+++ b/src/components/JobItem/styles/list_view.js
@@ -27,7 +27,7 @@ export const TagsWrapper = styled.div`
 export const CompanyLogo = styled(Img)`
   ${css.size(45)};
   border-radius: 5px;
-  opacity: ${theme('avatarOpacity')};
+  opacity: ${theme('avatar.opacity')};
 `
 export const Brief = styled.div`
   ${css.flex('align-center')};
diff --git a/src/components/PostItem/styles/digest_view/index.js b/src/components/PostItem/styles/digest_view/index.js
index fb91e7afb..a44f48d6b 100644
--- a/src/components/PostItem/styles/digest_view/index.js
+++ b/src/components/PostItem/styles/digest_view/index.js
@@ -13,7 +13,7 @@ export const AvatarWrapper = styled.div`
 export const Avatar = styled(Img)`
   ${css.circle(36)};
   fill: ${theme('thread.articleTitle')};
-  opacity: ${theme('avatarOpacity')};
+  opacity: ${theme('avatar.opacity')};
   margin-top: 2px;
 `
 export const SmallAvatar = styled(Avatar)`
diff --git a/src/components/PostItem/styles/list_view.js b/src/components/PostItem/styles/list_view.js
index 7c11a053f..79e83181f 100644
--- a/src/components/PostItem/styles/list_view.js
+++ b/src/components/PostItem/styles/list_view.js
@@ -21,7 +21,7 @@ export const AvatarWrapper = styled.div`
 export const Avatar = styled(Img)`
   ${css.circle(36)};
   fill: ${theme('thread.articleTitle')};
-  opacity: ${theme('avatarOpacity')};
+  opacity: ${theme('avatar.opacity')};
   margin-top: 2px;
 
   ${css.media.mobile`${css.circle(34)}`};
diff --git a/src/components/PostItem/styles/mobile_view/header.js b/src/components/PostItem/styles/mobile_view/header.js
index bf69c80ab..89192f387 100644
--- a/src/components/PostItem/styles/mobile_view/header.js
+++ b/src/components/PostItem/styles/mobile_view/header.js
@@ -17,7 +17,7 @@ export const AvatarWrapper = styled.div`
 export const Avatar = styled(Img)`
   ${css.circle(16)};
   fill: ${theme('thread.articleTitle')};
-  opacity: ${theme('avatarOpacity')};
+  opacity: ${theme('avatar.opacity')};
   margin-right: 8px;
 `
 export const AuthorInfo = styled.div`
diff --git a/src/components/TheAvatar/PostItemAvatar.js b/src/components/TheAvatar/PostItemAvatar.js
index 266073d94..f90fc94fc 100644
--- a/src/components/TheAvatar/PostItemAvatar.js
+++ b/src/components/TheAvatar/PostItemAvatar.js
@@ -2,7 +2,13 @@ import React from 'react'
 
 // import { ICON } from '@/config'
 import ImgFallback from '@/components/ImgFallback'
-import { Wrapper, Avatar, QuoteAvatar } from './styles/post_item_avatar'
+import {
+  Wrapper,
+  InnerShadow,
+  QuoteShadow,
+  Avatar,
+  QuoteAvatar,
+} from './styles/post_item_avatar'
 
 const PostItemAvatar = ({ user, onSelect }) => {
   return (
@@ -10,14 +16,15 @@ const PostItemAvatar = ({ user, onSelect }) => {
       {user.login === 'mydearxym' ? (
         <QuoteAvatar
           src={user.avatar}
-          fallback={<ImgFallback user={user} size={38} top={2} />}
+          fallback={<ImgFallback user={user} size={36} top={2} quote />}
         />
       ) : (
         <Avatar
           src={user.avatar}
-          fallback={<ImgFallback user={user} size={38} top={2} />}
+          fallback={<ImgFallback user={user} size={38} top={-1} left={-1} />}
         />
       )}
+      {user.login === 'mydearxym' ? <QuoteShadow /> : <InnerShadow />}
       {/* <Tail src={`${ICON}/shape/tail.svg`} /> */}
     </Wrapper>
   )
diff --git a/src/components/TheAvatar/styles/article_author_avatar.js b/src/components/TheAvatar/styles/article_author_avatar.js
index 7ec2a502d..376a50f62 100644
--- a/src/components/TheAvatar/styles/article_author_avatar.js
+++ b/src/components/TheAvatar/styles/article_author_avatar.js
@@ -15,7 +15,7 @@ export const Wrapper = styled.div.attrs((props) => ({
 export const Avatar = styled(Img)`
   ${css.circle(36)};
   fill: ${theme('thread.articleTitle')};
-  opacity: ${theme('avatarOpacity')};
+  opacity: ${theme('avatar.opacity')};
 `
 export const Tail = styled(TailBase)`
   ${Wrapper}:hover & {
diff --git a/src/components/TheAvatar/styles/post_item_avatar.js b/src/components/TheAvatar/styles/post_item_avatar.js
index 4ecfd0534..1dd57d534 100644
--- a/src/components/TheAvatar/styles/post_item_avatar.js
+++ b/src/components/TheAvatar/styles/post_item_avatar.js
@@ -9,20 +9,33 @@ export const Wrapper = styled.div.attrs((props) => ({
   'data-test-id': props.testId,
 }))`
   cursor: pointer;
-  /* border: 1px solid tomato; */
-  ${css.size(36)};
+  ${css.circle(38)};
   position: relative;
+  margin-top: 2px;
+`
+export const InnerShadow = styled.div`
+  position: absolute;
+  ${css.circle(38)};
+  top: -1px;
+  left: -1px;
+  box-shadow: ${theme('avatar.shadow')};
+  z-index: 2;
+`
+export const QuoteShadow = styled(InnerShadow)`
+  ${css.circle(34)};
+  top: 2px;
+  left: 2px;
+  box-shadow: ${theme('avatar.quoteShadow')};
 `
 export const Avatar = styled(Img)`
   ${css.circle(36)};
   fill: ${theme('thread.articleTitle')};
-  opacity: ${theme('avatarOpacity')};
-  margin-top: 2px;
+  opacity: ${theme('avatar.opacity')};
 `
 export const QuoteAvatar = styled(Avatar)`
   ${css.circle(38)};
   border: 2px solid;
-  border-color: #217470;
+  border-color: ${theme('avatar.quote')};
 `
 export const Tail = styled(TailBase)`
   ${Wrapper}:hover & {
diff --git a/src/components/UserBrief/Avatar.js b/src/components/UserBrief/Avatar.js
index 3ae5c5689..3c3d39af4 100644
--- a/src/components/UserBrief/Avatar.js
+++ b/src/components/UserBrief/Avatar.js
@@ -6,20 +6,48 @@ import { DEFAULT_USER_AVATAR } from '@/config'
 import ImgFallback from '@/components/ImgFallback'
 import BadgeInfo from './BadgeInfo'
 
-import { Wrapper, Avatar } from './styles/avatar'
+import {
+  Wrapper,
+  Avatar,
+  InnerShadow,
+  QuoteAvatar,
+  QuoteShadow,
+} from './styles/avatar'
 
 const AvatarComp = ({ user, view }) => {
+  const isQuote = user.login === 'mydearxym'
+
+  if (isQuote) {
+    return (
+      <Wrapper>
+        <a
+          href={`/user/${user.login}`}
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          <QuoteAvatar
+            src={user.avatar || DEFAULT_USER_AVATAR}
+            fallback={<ImgFallback user={user} size={200} />}
+          />
+        </a>
+
+        <QuoteShadow />
+
+        {view === VIEW.DRAWER && <BadgeInfo user={user} />}
+      </Wrapper>
+    )
+  }
   return (
     <Wrapper>
       <a href={`/user/${user.login}`} rel="noopener noreferrer" target="_blank">
-        <div>
-          <Avatar
-            src={user.avatar || DEFAULT_USER_AVATAR}
-            fallback={<ImgFallback user={user} size={150} />}
-          />
-        </div>
+        <Avatar
+          src={user.avatar || DEFAULT_USER_AVATAR}
+          fallback={<ImgFallback user={user} size={200} />}
+        />
       </a>
 
+      <InnerShadow />
+
       {view === VIEW.DRAWER && <BadgeInfo user={user} />}
     </Wrapper>
   )
diff --git a/src/components/UserBrief/styles/avatar.js b/src/components/UserBrief/styles/avatar.js
index 58dd08a5d..87e7324b5 100644
--- a/src/components/UserBrief/styles/avatar.js
+++ b/src/components/UserBrief/styles/avatar.js
@@ -1,23 +1,43 @@
 import styled from 'styled-components'
 
 // import { VIEW } from '@/constant'
-import { css } from '@/utils'
+import { css, theme } from '@/utils'
 
 import Img from '@/Img'
 
 export const Wrapper = styled.div`
   ${css.flexColumn()};
   margin-right: 12px;
+  position: relative;
 `
-export const Avatar = styled(Img)`
+export const InnerShadow = styled.div`
+  position: absolute;
+  top: 0;
+  left: -4px;
   width: 200px;
   height: 200px;
-  border-radius: 67px;
-  border: 5px solid;
-  border-color: #217470;
+  display: block;
+  border-radius: 100%;
+  box-shadow: 0px 0px 4px 0px rgb(0 0 0 / 50%) inset;
+  z-index: 2;
+`
+export const Avatar = styled(Img)`
+  ${css.circle(200)};
   display: block;
   margin-left: -5px;
 `
+export const QuoteAvatar = styled(Avatar)`
+  ${css.size(200)};
+  border-radius: 68px;
+  border: 5px solid;
+  border-color: ${theme('avatar.quote')};
+`
+export const QuoteShadow = styled(InnerShadow)`
+  top: 5px;
+  left: 0;
+  ${css.size(190)};
+  border-radius: 63px;
+`
 // export const Avatar = styled(Img)`
 //   border-radius: 4px;
 //   width: ${({ view }) => (view === VIEW.DESKTOP ? '120px' : '80px')};
diff --git a/src/components/VideoItem/styles/index.js b/src/components/VideoItem/styles/index.js
index 741d33fe4..5369ae152 100755
--- a/src/components/VideoItem/styles/index.js
+++ b/src/components/VideoItem/styles/index.js
@@ -30,7 +30,7 @@ export const Poster = styled.img`
   height: 100%;
   width: 100%;
   min-width: 246px;
-  opacity: ${theme('avatarOpacity')};
+  opacity: ${theme('avatar.opacity')};
 
   ${css.media.mobile`
     min-width: 146px;
diff --git a/src/containers/unit/Comments/styles/comment/header.js b/src/containers/unit/Comments/styles/comment/header.js
index eb5706e7c..671bbee0f 100755
--- a/src/containers/unit/Comments/styles/comment/header.js
+++ b/src/containers/unit/Comments/styles/comment/header.js
@@ -28,7 +28,7 @@ export const CommentHeaderFirst = styled.div`
 `
 export const Avatar = styled(Img)`
   ${css.circle(22)};
-  opacity: ${theme('avatarOpacity')};
+  opacity: ${theme('avatar.opacity')};
   margin-right: 10px;
 `
 export const HeaderBaseInfo = styled.div`
diff --git a/src/containers/unit/Comments/styles/comment/mobile_view/header.js b/src/containers/unit/Comments/styles/comment/mobile_view/header.js
index 2287f6397..ea23b8ccc 100644
--- a/src/containers/unit/Comments/styles/comment/mobile_view/header.js
+++ b/src/containers/unit/Comments/styles/comment/mobile_view/header.js
@@ -26,7 +26,7 @@ export const CommentHeaderFirst = styled.div`
 `
 export const Avatar = styled(Img)`
   ${css.circle(24)};
-  opacity: ${theme('avatarOpacity')};
+  opacity: ${theme('avatar.opacity')};
   margin-right: 14px;
   margin-top: 10px;
 `
diff --git a/src/containers/unit/Comments/styles/comment_header.js b/src/containers/unit/Comments/styles/comment_header.js
index 35fe01e17..47b9d89db 100755
--- a/src/containers/unit/Comments/styles/comment_header.js
+++ b/src/containers/unit/Comments/styles/comment_header.js
@@ -32,7 +32,7 @@ export const CommentHeaderFirst = styled.div`
 
 export const CommentAvatar = styled(Img)`
   ${css.circle(38)};
-  opacity: ${theme('avatarOpacity')};
+  opacity: ${theme('avatar.opacity')};
 `
 
 export const HeaderBaseInfo = styled.div`
diff --git a/src/containers/unit/Comments/styles/editor_header.js b/src/containers/unit/Comments/styles/editor_header.js
index 13127343f..885be6c33 100755
--- a/src/containers/unit/Comments/styles/editor_header.js
+++ b/src/containers/unit/Comments/styles/editor_header.js
@@ -12,7 +12,7 @@ export const UserAvatar = styled(Img)`
   ${css.circle(20)};
   fill: ${theme('thread.articleTitle')};
   margin-left: 4%;
-  opacity: ${theme('avatarOpacity')};
+  opacity: ${theme('avatar.opacity')};
 `
 export const LeaveResponseText = styled.div`
   font-size: 14px;
diff --git a/src/containers/unit/Comments/styles/reply_editor_header.js b/src/containers/unit/Comments/styles/reply_editor_header.js
index 37a33918d..77f356698 100755
--- a/src/containers/unit/Comments/styles/reply_editor_header.js
+++ b/src/containers/unit/Comments/styles/reply_editor_header.js
@@ -11,7 +11,7 @@ export const Wrapper = styled.div`
 export const UserAvatar = styled.img`
   ${css.circle(25)};
   margin-left: 3%;
-  opacity: ${theme('avatarOpacity')};
+  opacity: ${theme('avatar.opacity')};
 `
 export const LeaveResponseText = styled.div`
   font-size: 1.3rem;
diff --git a/src/containers/unit/Header/styles/user_account.js b/src/containers/unit/Header/styles/user_account.js
index 90033e4ea..79935fb07 100755
--- a/src/containers/unit/Header/styles/user_account.js
+++ b/src/containers/unit/Header/styles/user_account.js
@@ -65,7 +65,7 @@ export const AvatarIcon = styled.img`
   ${css.size(20)};
   cursor: pointer;
   border-radius: 3px;
-  opacity: ${theme('avatarOpacity')};
+  opacity: ${theme('avatar.opacity')};
 `
 export const DefaultUserIcon = styled(Img)`
   fill: ${theme('header.fg')};
diff --git a/utils/themes/skins/cyan.js b/utils/themes/skins/cyan.js
index d54d645c9..197d3fe3c 100755
--- a/utils/themes/skins/cyan.js
+++ b/utils/themes/skins/cyan.js
@@ -43,7 +43,6 @@ const cyan = {
   main: '#7DC0C5',
   bodyBg: contentBg,
   selectionBg: '#f8f7dc',
-  avatarOpacity: 1,
   baseColor: {
     red: '#fd7f68 !important',
     green: 'yellowgreen !important',
@@ -335,6 +334,13 @@ const cyan = {
     text: '#F8FBFC',
     bg: '#54A1AA',
   },
+  avatar: {
+    opacity: 1,
+    quote: '#217470',
+    fallbackBg: '#074857',
+    shadow: '0px 0px 4px 0px rgb(0 0 0 / 50%) inset',
+    quoteShadow: '0px 0px 3px 0px rgb(0 0 0 / 30%) inset',
+  },
 }
 
 export default cyan
diff --git a/utils/themes/skins/github.js b/utils/themes/skins/github.js
index f11288128..964ce2a8e 100755
--- a/utils/themes/skins/github.js
+++ b/utils/themes/skins/github.js
@@ -43,7 +43,6 @@ const github = {
   main: '#7DC0C5',
   bodyBg: contentBg,
   selectionBg: 'tomato',
-  avatarOpacity: 1,
   baseColor: {
     red: 'tomato !important',
     green: 'yellowgreen !important',
@@ -336,6 +335,13 @@ const github = {
     text: '#F0F6FA',
     bg: '#2B2B2B',
   },
+  avatar: {
+    opacity: 1,
+    quote: '#217470',
+    fallbackBg: '#074857',
+    shadow: '0px 0px 4px 0px rgb(0 0 0 / 50%) inset',
+    quoteShadow: '0px 0px 3px 0px rgb(0 0 0 / 30%) inset',
+  },
 }
 
 export default github
diff --git a/utils/themes/skins/green.js b/utils/themes/skins/green.js
index f5c7258c3..b02b76aae 100755
--- a/utils/themes/skins/green.js
+++ b/utils/themes/skins/green.js
@@ -45,7 +45,6 @@ const green = {
   main: '#7DC0C5',
   bodyBg: contentBg,
   selectionBg: '#839496',
-  avatarOpacity: 0.8,
   baseColor: {
     red: 'tomato !important',
     green: 'yellowgreen !important',
@@ -326,6 +325,13 @@ const green = {
     text: '#F0F6FA',
     bg: '#2B2B2B',
   },
+  avatar: {
+    opacity: 0.8,
+    quote: '#217470',
+    fallbackBg: '#074857',
+    shadow: '0px 0px 4px 0px rgb(0 0 0 / 50%) inset',
+    quoteShadow: '0px 0px 3px 0px rgb(0 0 0 / 30%) inset',
+  },
 }
 
 export default green
diff --git a/utils/themes/skins/iron_green.js b/utils/themes/skins/iron_green.js
index 4ae86cde5..fbca18682 100755
--- a/utils/themes/skins/iron_green.js
+++ b/utils/themes/skins/iron_green.js
@@ -43,7 +43,6 @@ const iconGreen = {
   main: '#7DC0C5',
   bodyBg: contentBg,
   selectionBg: 'tomato',
-  avatarOpacity: 0.8,
   baseColor: {
     red: '#ff9d8b !important',
     green: 'yellowgreen !important',
@@ -329,6 +328,13 @@ const iconGreen = {
     text: '#F0F6FA',
     bg: '#2B2B2B',
   },
+  avatar: {
+    opacity: 0.8,
+    quote: '#217470',
+    fallbackBg: '#074857',
+    shadow: '0px 0px 4px 0px rgb(0 0 0 / 50%) inset',
+    quoteShadow: '0px 0px 3px 0px rgb(0 0 0 / 30%) inset',
+  },
 }
 
 export default iconGreen
diff --git a/utils/themes/skins/monokai.js b/utils/themes/skins/monokai.js
index 589e64b5e..feee9839f 100755
--- a/utils/themes/skins/monokai.js
+++ b/utils/themes/skins/monokai.js
@@ -45,7 +45,6 @@ const monokai = {
   main: '#7DC0C5',
   bodyBg: contentBg,
   selectionBg: '#839496',
-  avatarOpacity: 0.8,
   baseColor: {
     red: '#a24e3f !important',
     green: '#699411 !important',
@@ -330,6 +329,13 @@ const monokai = {
     text: '#B0AFB0',
     bg: '#676464',
   },
+  avatar: {
+    opacity: 0.8,
+    quote: '#217470',
+    fallbackBg: '#074857',
+    shadow: '0px 0px 4px 0px rgb(0 0 0 / 50%) inset',
+    quoteShadow: '0px 0px 3px 0px rgb(0 0 0 / 30%) inset',
+  },
 }
 
 export default monokai
diff --git a/utils/themes/skins/purple.js b/utils/themes/skins/purple.js
index 88633409b..baad7e9a6 100755
--- a/utils/themes/skins/purple.js
+++ b/utils/themes/skins/purple.js
@@ -44,7 +44,6 @@ const purple = {
   main: '#7DC0C5',
   bodyBg: contentBg,
   selectionBg: '#839496',
-  avatarOpacity: 0.8,
   baseColor: {
     red: '#a24e3f !important',
     green: '#699411 !important',
@@ -334,6 +333,13 @@ const purple = {
     text: '#B7B1C1',
     bg: '#56526E',
   },
+  avatar: {
+    opacity: 0.8,
+    quote: '#217470',
+    fallbackBg: '#074857',
+    shadow: '0px 0px 4px 0px rgb(0 0 0 / 50%) inset',
+    quoteShadow: '0px 0px 3px 0px rgb(0 0 0 / 30%) inset',
+  },
 }
 
 export default purple
diff --git a/utils/themes/skins/solarized_dark.js b/utils/themes/skins/solarized_dark.js
index 93681b412..36114d780 100755
--- a/utils/themes/skins/solarized_dark.js
+++ b/utils/themes/skins/solarized_dark.js
@@ -45,7 +45,6 @@ const solarizedDark = {
   main: '#7DC0C5',
   bodyBg: contentBg,
   selectionBg: '#839496',
-  avatarOpacity: 0.8,
   baseColor: {
     red: '#a24e3f !important',
     green: '#699411 !important',
@@ -347,6 +346,13 @@ const solarizedDark = {
     divider: '#27424c',
     dropdownBg: '#0a4d61',
   },
+  avatar: {
+    opacity: 0.8,
+    quote: '#217470',
+    fallbackBg: '#074857',
+    shadow: '0px 0px 4px 0px rgb(0 0 0 / 50%) inset',
+    quoteShadow: '0px 0px 3px 0px rgb(0 0 0 / 30%) inset',
+  },
 }
 
 export default solarizedDark
diff --git a/utils/themes/skins/yellow.js b/utils/themes/skins/yellow.js
index 42c258a7d..56e9ee36f 100755
--- a/utils/themes/skins/yellow.js
+++ b/utils/themes/skins/yellow.js
@@ -44,7 +44,6 @@ const yellow = {
   main: '#7DC0C5',
   bodyBg: contentBg,
   selectionBg: '#839496',
-  avatarOpacity: 0.8,
   baseColor: {
     red: 'tomato !important',
     green: 'yellowgreen !important',
@@ -333,6 +332,13 @@ const yellow = {
     text: '#F0F6FA',
     bg: '#2B2B2B',
   },
+  avatar: {
+    opacity: 0.8,
+    quote: '#217470',
+    fallbackBg: '#074857',
+    shadow: '0px 0px 4px 0px rgb(0 0 0 / 50%) inset',
+    quoteShadow: '0px 0px 3px 0px rgb(0 0 0 / 30%) inset',
+  },
 }
 
 export default yellow