diff --git a/web/src/components/HeaderBar.js b/web/src/components/HeaderBar.js
index 1971ca3a..0fcdc5d7 100644
--- a/web/src/components/HeaderBar.js
+++ b/web/src/components/HeaderBar.js
@@ -224,7 +224,7 @@ const HeaderBar = () => {
             <Avatar
               size="extra-small"
               color={stringToColor(userState.user.username)}
-              className="shadow-sm mr-1"
+              className="mr-1"
             >
               {userState.user.username[0].toUpperCase()}
             </Avatar>
@@ -295,7 +295,7 @@ const HeaderBar = () => {
   };
 
   return (
-    <header className="bg-semi-color-bg-0 text-semi-color-text-0 shadow-sm sticky top-0 z-50 transition-colors duration-300">
+    <header className="bg-semi-color-bg-0 text-semi-color-text-0 sticky top-0 z-50 transition-colors duration-300">
       <div className="w-full px-4">
         <div className="flex items-center justify-between h-16">
           <div className="flex items-center">
diff --git a/web/src/components/PageLayout.js b/web/src/components/PageLayout.js
index d52bc0d4..e7e1d647 100644
--- a/web/src/components/PageLayout.js
+++ b/web/src/components/PageLayout.js
@@ -88,7 +88,7 @@ const PageLayout = () => {
           width: '100%',
           top: 0,
           zIndex: 100,
-          boxShadow: '0 1px 6px rgba(0, 0, 0, 0.08)',
+          borderBottom: '1px solid var(--semi-color-border)',
         }}
       >
         <HeaderBar />