diff --git a/src/components/common/Nav.tsx b/src/components/common/Nav.tsx
new file mode 100644
index 0000000..3c16549
--- /dev/null
+++ b/src/components/common/Nav.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import tw, { styled } from 'twin.macro';
+import { Icon } from '~/components/ui/icons/Icon';
+import { Link } from 'gatsby';
+import { Groups } from '~/components/ui/groups/Groups';
+
+const Root = styled.nav`
+	${tw`bg-blue-600 text-white flex items-center justify-between`}
+	min-height: 2rem;
+`;
+
+const NavLink = styled(Link)`
+	${tw`h-full block flex items-center px-3`}
+`;
+
+export function Nav({ profile: { github, linkedin, facebook } }) {
+	return (
+		<Root>
+			<div>
+				<Groups
+					className={'flex p-2 items-center justify-center md:justify-start'}
+					size={2}
+				>
+					<a href={github}>
+						<Icon name={'github'} size={24} />
+					</a>
+					<a href={linkedin}>
+						<Icon name={'linkedin'} size={24} />
+					</a>
+					<a href={facebook}>
+						<Icon name={'facebook'} size={24} />
+					</a>
+				</Groups>
+			</div>
+			<div tw={'self-stretch'}>
+				<NavLink to='/' activeClassName='bg-accent'>
+					<Icon name={'home'} className={'mr-2'} size={20} /> Home
+				</NavLink>
+			</div>
+		</Root>
+	);
+}
diff --git a/src/components/home/Headline.tsx b/src/components/home/Headline.tsx
index 9cdad26..65064f3 100644
--- a/src/components/home/Headline.tsx
+++ b/src/components/home/Headline.tsx
@@ -3,7 +3,6 @@ import tw, { styled } from 'twin.macro';
 import { Button } from '~/components/ui/controls/Button';
 import { Avatar } from '~/components/ui/images/Avatar';
 import { Icon } from '~/components/ui/icons/Icon';
-import { Groups } from '~/components/ui/groups/Groups';
 import { Container } from '~/components/ui/containers/Container';
 
 const Root = styled.header`
@@ -11,21 +10,12 @@ const Root = styled.header`
 `;
 
 export default function Headline({ profile }) {
-	const {
-		name,
-		email,
-		avatar,
-		role,
-		phone,
-		github,
-		linkedin,
-		facebook,
-	} = profile;
+	const { name, email, avatar, role, phone } = profile;
 	return (
 		<Root>
 			<Container className={'md:justify-between'}>
 				<div tw={'flex items-center flex-col md:flex-row justify-center'}>
-					<Avatar rounded={false} src={avatar} size={48} />
+					<Avatar circular={false} src={avatar} size={40} />
 					<div
 						tw={
 							'md:ml-6 pt-2 md:pt-0 flex flex-col md:items-start items-center'
@@ -42,22 +32,6 @@ export default function Headline({ profile }) {
 								<Icon name={'phone'} size={24} color={'white'} />
 								<span tw={'pl-1'}>{phone}</span>
 							</div>
-							<Groups
-								className={
-									'flex items-center pt-2 justify-center md:justify-start'
-								}
-								size={2}
-							>
-								<a href={github}>
-									<Icon name={'github'} size={24} />
-								</a>
-								<a href={linkedin}>
-									<Icon name={'linkedin'} size={24} />
-								</a>
-								<a href={facebook}>
-									<Icon name={'facebook'} size={24} color={'white'} />
-								</a>
-							</Groups>
 						</div>
 					</div>
 				</div>
diff --git a/src/components/ui/containers/Card.tsx b/src/components/ui/containers/Card.tsx
index f13dd02..ae2abc5 100644
--- a/src/components/ui/containers/Card.tsx
+++ b/src/components/ui/containers/Card.tsx
@@ -7,7 +7,7 @@ type Props = {
 
 export function Card({ children, ...props }: Props) {
 	return (
-		<div {...props} tw='rounded bg-white p-4 overflow-hidden shadow-lg'>
+		<div {...props} tw='rounded bg-white p-5 overflow-hidden shadow-lg'>
 			{children}
 		</div>
 	);
diff --git a/src/components/ui/icons/Icon.tsx b/src/components/ui/icons/Icon.tsx
index 36665af..0707dbc 100644
--- a/src/components/ui/icons/Icon.tsx
+++ b/src/components/ui/icons/Icon.tsx
@@ -22,6 +22,7 @@ export type SvgIcon =
 	| 'link'
 	| 'graduation-cap'
 	| 'external'
+	| 'home'
 	| 'linkedin';
 
 export function Icon({
diff --git a/src/components/ui/images/Avatar.tsx b/src/components/ui/images/Avatar.tsx
index 130c746..dffe141 100644
--- a/src/components/ui/images/Avatar.tsx
+++ b/src/components/ui/images/Avatar.tsx
@@ -1,17 +1,17 @@
 import React, { HTMLAttributes } from 'react';
 
-type Props = { size: number; src: string; rounded?: boolean } & HTMLAttributes<
+type Props = { size: number; src: string; circular?: boolean } & HTMLAttributes<
 	HTMLImageElement
 >;
 
-export function Avatar({ size, src, rounded = true, ...props }: Props) {
+export function Avatar({ size, src, circular = true, ...props }: Props) {
 	return (
 		<img
 			{...props}
 			src={src}
 			alt={'avatar'}
 			className={`h-${size} w-${size} ${
-				rounded ? 'rounded-full' : ''
+				circular ? 'rounded-full' : 'rounded'
 			} shadow-xs`}
 		/>
 	);
diff --git a/src/icons/home.svg b/src/icons/home.svg
new file mode 100644
index 0000000..4cde395
--- /dev/null
+++ b/src/icons/home.svg
@@ -0,0 +1,4 @@
+<svg fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"
+     stroke="currentColor">
+    <path d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
+</svg>
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 5de403a..4b32c39 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -3,9 +3,11 @@ import Headline from '~/components/home/Headline';
 import HomeMain from '~/components/home/HomeMain';
 import 'twin.macro';
 import profile from '~/profile';
+import { Nav } from '~/components/common/Nav';
 
 const IndexPage = () => (
 	<div tw={'min-h-screen flex flex-col'}>
+		<Nav profile={profile.basic} />
 		<Headline profile={profile.basic} />
 		<HomeMain profile={profile} />
 	</div>
diff --git a/src/profile.tsx b/src/profile.tsx
index 71d97bb..4f6d91c 100644
--- a/src/profile.tsx
+++ b/src/profile.tsx
@@ -5,7 +5,7 @@ export default {
 		name: 'Tuan Nguyen',
 		githubUsername: 'tuan231195',
 		avatar:
-			'https://media-exp1.licdn.com/dms/image/C5103AQGbaWNuZzFiXg/profile-displayphoto-shrink_400_400/0?e=1602115200&v=beta&t=aN91iPo88eeXRzYz5C-v-J2zzoLoS2UmmXCCKc5qqw8',
+			'https://ik.imagekit.io/emtg9z3bqr/tr:h-160,w-160/avatar_cubwNe2pI.jpeg',
 		role: 'Software Developer',
 		email: 'vdtn359@gmail.com',
 		phone: '0450082978',
diff --git a/tailwind.config.js b/tailwind.config.js
index 09f7679..30f75f2 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -158,6 +158,7 @@ module.exports = {
 			colors: {
 				secondary: '#d1e0f4',
 				primary: '#41A4F5',
+				accent: '#FF8106',
 				cta: '#d10220',
 				info: '#2ecbf6',
 				warning: '#e4ca52',