diff --git a/web/components/common/UserDropdown/UserDropdown.module.scss b/web/components/common/UserDropdown/UserDropdown.module.scss
index 5e2418fd0..9d256e5f2 100644
--- a/web/components/common/UserDropdown/UserDropdown.module.scss
+++ b/web/components/common/UserDropdown/UserDropdown.module.scss
@@ -1,7 +1,5 @@
 .root {
   button {
     border: none;
-    font-size: 1rem;
-    font-weight: 600;
   }
 }
diff --git a/web/components/common/UserDropdown/UserDropdown.tsx b/web/components/common/UserDropdown/UserDropdown.tsx
index a86cfb2fa..5c2364234 100644
--- a/web/components/common/UserDropdown/UserDropdown.tsx
+++ b/web/components/common/UserDropdown/UserDropdown.tsx
@@ -1,5 +1,5 @@
 import { Menu, Dropdown, Button, Space } from 'antd';
-import { DownOutlined } from '@ant-design/icons';
+import { CaretDownOutlined, UserOutlined } from '@ant-design/icons';
 import { useRecoilState, useRecoilValue } from 'recoil';
 import { useState } from 'react';
 import Modal from '../../ui/Modal/Modal';
@@ -48,10 +48,10 @@ export default function UserDropdown({ username: defaultUsername, chatState }: P
   return (
     <div className={`${s.root}`}>
       <Dropdown overlay={menu} trigger={['click']}>
-        <Button>
+        <Button icon={<UserOutlined style={{ marginRight: '.5rem' }} />}>
           <Space>
             {username}
-            <DownOutlined />
+            <CaretDownOutlined />
           </Space>
         </Button>
       </Dropdown>