diff --git a/public/avatar.jpeg b/public/avatar.jpeg
new file mode 100644
index 0000000..1103d99
Binary files /dev/null and b/public/avatar.jpeg differ
diff --git a/src/components/Avatar/index.tsx b/src/components/Avatar/index.tsx
new file mode 100644
index 0000000..81314cf
--- /dev/null
+++ b/src/components/Avatar/index.tsx
@@ -0,0 +1,11 @@
+import { ImageProps } from 'next/image'
+
+import { Wrapper } from './styles'
+
+type AvatarProps = ImageProps & {
+  src?: string
+}
+
+export function Avatar({ src, ...rest }: AvatarProps) {
+  return !!src ? <Wrapper src={src} width={84} height={84} quality={100} {...rest} /> : null
+}
diff --git a/src/components/Avatar/styles.ts b/src/components/Avatar/styles.ts
new file mode 100644
index 0000000..1f92376
--- /dev/null
+++ b/src/components/Avatar/styles.ts
@@ -0,0 +1,10 @@
+import Image from 'next/image'
+
+import { styled } from '../../styles/stitches.config'
+
+export const Wrapper = styled(Image, {
+  borderRadius: '9999px',
+  objectFit: 'cover',
+  width: '84px',
+  height: '84px'
+})
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 36c4e42..8e8c5db 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,3 +1,4 @@
+import { Avatar } from '../components/Avatar'
 import { Button } from '../components/Button'
 
 export default function Home() {
@@ -17,14 +18,20 @@ export default function Home() {
   ]
 
   return (
-    <div>
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        height: '100vh',
+        gap: '1rem'
+      }}
+    >
+      <Avatar src="/avatar.jpeg" />
       {links.map(link => (
-        <>
-          <Button color="sky" schema="rounded" outline key={link.href}>
-            {link.label}
-          </Button>
-          <br />
-        </>
+        <Button color="sky" schema="rounded" outline key={link.href}>
+          {link.label}
+        </Button>
       ))}
     </div>
   )