diff --git a/src/assets/images/placeholder.png b/src/assets/images/placeholder.png
new file mode 100644
index 0000000..bbda3c4
Binary files /dev/null and b/src/assets/images/placeholder.png differ
diff --git a/src/components/AppBar/AppBar.tsx b/src/components/AppBar/AppBar.tsx
index e3f8d53..641a81d 100644
--- a/src/components/AppBar/AppBar.tsx
+++ b/src/components/AppBar/AppBar.tsx
@@ -35,6 +35,7 @@ import {
 import styles from './style.module.scss'
 import { setUserRobotImage } from '../../store/userRobotImage/action'
 import { Container } from '../Container'
+import { ButtonIcon } from '../ButtonIcon'
 
 const metadataController = new MetadataController()
 
@@ -134,6 +135,7 @@ export const AppBar = () => {
           <Box className={styles.rightSideBox}>
             {!isAuthenticated && (
               <Button
+                startIcon={<ButtonIcon />}
                 onClick={() => {
                   navigate(appPublicRoutes.login)
                 }}
diff --git a/src/components/ButtonIcon/index.tsx b/src/components/ButtonIcon/index.tsx
new file mode 100644
index 0000000..67d1caf
--- /dev/null
+++ b/src/components/ButtonIcon/index.tsx
@@ -0,0 +1,14 @@
+import styles from './style.module.scss'
+import placeholder from '../../assets/images/placeholder.png'
+
+interface ButtonIconProps {
+  src?: string
+  alt?: string
+}
+
+export const ButtonIcon = ({
+  src = placeholder,
+  alt = ''
+}: ButtonIconProps) => {
+  return <img src={src} alt={alt} className={styles.icon}></img>
+}
diff --git a/src/components/ButtonIcon/style.module.scss b/src/components/ButtonIcon/style.module.scss
new file mode 100644
index 0000000..817067c
--- /dev/null
+++ b/src/components/ButtonIcon/style.module.scss
@@ -0,0 +1,5 @@
+.icon {
+  border-radius: 100px;
+  width: 20px;
+  height: 20px;
+}
diff --git a/src/index.css b/src/index.css
index f7feb7e..bc56be3 100644
--- a/src/index.css
+++ b/src/index.css
@@ -9,6 +9,7 @@
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   -webkit-text-size-adjust: 100%;
+  text-size-adjust: 100%;
 }
 
 * {
@@ -68,6 +69,7 @@ button {
  * when this class is assigned to a component, user will not be able to select and copy the content from that component
  */
 .no-select {
+  -webkit-user-select: none;
   user-select: none;
 }
 
diff --git a/src/theme/index.ts b/src/theme/index.ts
index 0fb23b6..71c107e 100644
--- a/src/theme/index.ts
+++ b/src/theme/index.ts
@@ -36,10 +36,10 @@ export const theme = extendTheme({
         root: {
           fontSize: '14px',
           fontWeight: 500,
-          padding: '10px 20px',
+          padding: '8px 15px',
           transition: 'ease 0.2s',
           boxShadow: 'unset',
-          lineHeight: '1.25',
+          lineHeight: 'inherit',
           borderRadius: '4px',
           ':hover': {
             background: 'var(--primary-light)',
@@ -63,6 +63,10 @@ export const theme = extendTheme({
             borderColor: '#291334',
             background: '#29133433'
           }
+        },
+        startIcon: {
+          marginRight: '12px',
+          marginLeft: 0
         }
       }
     },