diff --git a/src/components/header/style.scss b/src/components/header/style.scss
index 3cd357d..48166b9 100644
--- a/src/components/header/style.scss
+++ b/src/components/header/style.scss
@@ -5,7 +5,7 @@
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
-    position: absolute;
+    position: fixed;
     top: 50%;
     left: px-to-rem(16);
     transform: translateY(-50%);
diff --git a/src/pages/home/index.tsx b/src/pages/home/index.tsx
index ae115d4..04983e2 100644
--- a/src/pages/home/index.tsx
+++ b/src/pages/home/index.tsx
@@ -9,84 +9,188 @@ import Icon from '@icon-park/react/es/all';
 import links from '../../constants/links.json';
 import './style.scss';
 
+
+interface Experience {
+	title: string;
+	type: string;
+	position: string;
+	location: string;
+	date: string;
+	translation_key: string;
+	objectives: string[];
+}
+
+
 function Home() {
-	const {t} = useTranslation();
+	const {t} = useTranslation(['experience']);
+	const cloudObjectives: Array<string> = new Array(7).fill(0).map((item, index) => t(`cloud.${index}`));
+	const sensifaiObjectives: Array<string> = new Array(7).fill(0).map((item, index) => t(`sensifai.${index}`));
+	const garousianObjectives: Array<string> = new Array(5).fill(0).map((item, index) => t(`garousian.${index}`));
+	const noxowlObjectives: Array<string> = new Array(5).fill(0).map((item, index) => t(`noxowl.${index}`));
+	const iVahidObjectives: Array<string> = new Array(5).fill(0).map((item, index) => t(`ivahid.${index}`));
+	const rabinObjectives: Array<string> = new Array(3).fill(0).map((item, index) => t(`rabin.${index}`));
+
+	const experiencesList: Array<Experience> = [
+		{
+			title: 'Cloud Company',
+			type: 'Hybrid',
+			position: 'Senior Front-End Developer',
+			location: 'Tehran, Iran',
+			date: 'Sep. 2021 - Present',
+			translation_key: 'cloud',
+			objectives: cloudObjectives,
+		},
+		{
+			title: 'Sensifai Co.',
+			type: 'Remote',
+			position: 'Senior Front-End Developer',
+			location: 'Belgium',
+			date: 'Sep. 2018 - Sep. 2021',
+			translation_key: 'sensifai',
+			objectives: sensifaiObjectives,
+		},
+		{
+			title: 'Garousian Studio',
+			type: 'Contract',
+			position: 'Front-End & WordPress Developer',
+			location: 'Tehran, Iran',
+			date: 'Oct. 2017 - Dec. 2020',
+			translation_key: 'garousian',
+			objectives: garousianObjectives,
+		},
+		{
+			title: 'NoxOwl',
+			type: 'Remote',
+			position: 'Front-End Developer',
+			location: 'Tehran, Iran',
+			date: 'Dec. 2017 - Jul. 2018',
+			translation_key: 'noxowl',
+			objectives: noxowlObjectives,
+		},
+		{
+			title: 'iVahid',
+			type: 'On-Site',
+			position: 'Front-End & WordPress Developer',
+			location: 'Tehran, Iran',
+			date: 'Apr. 2017 - Oct. 2017',
+			translation_key: 'ivahid',
+			objectives: iVahidObjectives,
+		},
+		{
+			title: 'Rabin',
+			type: 'On-Site',
+			position: 'Front-End Developer',
+			location: 'Tehran, Iran',
+			date: 'Apr. 2016 - Nov. 2016',
+			translation_key: 'rabin',
+			objectives: rabinObjectives,
+		}
+	]
 
 	return (
-		<section className={'hero'}>
-			<span className={'hero-circle hero-circle--one'} />
-			<span className={'hero-circle hero-circle--two'} />
-			<Container>
-				<FlexRow>
-					<FlexCol xs={24} sm={24} md={18}>
-						<div className={'hero-content'}>
-							<h1>Hi, 👋🏻<br/> <i>I'm</i> Amirhossein</h1>
-							<p>
-								Experienced working as a front-end developer in several software development companies
-								in Iran for more than 7 years. Worked on
-								many successful projects and collaborated with many technical teams. Curious about new
-								software technologies and eager about
-								learning them. Making an automated process in a large-scale team is my second
-								superpower.
-							</p>
-							<div className={'hero-actions'}>
-								<Hyperlink
-									icon={true}
-									variant={'linear-light'}
-									to={links["social"]["linkedin"]}
-									target="_blank"
-									data-tooltip-id="tooltip-area"
-									data-tooltip-content="LinkedIn"
-									data-tooltip-place="bottom"
-								>
-									<Linkedin size={24} />
-								</Hyperlink>
-								<Hyperlink
-									icon={true}
-									variant={'linear-light'}
-									to={links["social"]["github"]}
-									target="_blank"
-									data-tooltip-id="tooltip-area"
-									data-tooltip-content="Github"
-									data-tooltip-place="bottom"
-								>
-									<Icon type="Github" theme="filled" size={24} />
-								</Hyperlink>
-								<Hyperlink
-									icon={true}
-									variant={'linear-light'}
-									to={links["social"]["dribble"]}
-									target="_blank"
-									data-tooltip-id="tooltip-area"
-									data-tooltip-content="Dribble"
-									data-tooltip-place="bottom"
-								>
-									<Icon type="Dribble" theme="filled" size={24} />
-								</Hyperlink>
-								<Hyperlink
-									icon={true}
-									variant={'linear-light'}
-									to={links["social"]["behance"]}
-									target="_blank"
-									data-tooltip-id="tooltip-area"
-									data-tooltip-content="Behance"
-									data-tooltip-place="bottom"
-								>
-									<Icon type="Behance" theme="filled" size={24} />
-								</Hyperlink>
+		<>
+			<section className={'hero'}>
+				<span className={'hero-circle hero-circle--one'} />
+				<span className={'hero-circle hero-circle--two'} />
+				<Container>
+					<FlexRow>
+						<FlexCol xs={24} sm={24} md={18}>
+							<div className={'hero-content'}>
+								<h1>Hi, 👋🏻<br/> <i>I'm</i> Amirhossein</h1>
+								<p>
+									Experienced working as a front-end developer in several software development companies
+									in Iran for more than 7 years. Worked on
+									many successful projects and collaborated with many technical teams. Curious about new
+									software technologies and eager about
+									learning them. Making an automated process in a large-scale team is my second
+									superpower.
+								</p>
+								<div className={'hero-actions'}>
+									<Hyperlink
+										icon={true}
+										variant={'linear-light'}
+										to={links["social"]["linkedin"]}
+										target="_blank"
+										data-tooltip-id="tooltip-area"
+										data-tooltip-content="LinkedIn"
+										data-tooltip-place="bottom"
+									>
+										<Linkedin size={24} />
+									</Hyperlink>
+									<Hyperlink
+										icon={true}
+										variant={'linear-light'}
+										to={links["social"]["github"]}
+										target="_blank"
+										data-tooltip-id="tooltip-area"
+										data-tooltip-content="Github"
+										data-tooltip-place="bottom"
+									>
+										<Icon type="Github" theme="filled" size={24} />
+									</Hyperlink>
+									<Hyperlink
+										icon={true}
+										variant={'linear-light'}
+										to={links["social"]["dribble"]}
+										target="_blank"
+										data-tooltip-id="tooltip-area"
+										data-tooltip-content="Dribble"
+										data-tooltip-place="bottom"
+									>
+										<Icon type="Dribble" theme="filled" size={24} />
+									</Hyperlink>
+									<Hyperlink
+										icon={true}
+										variant={'linear-light'}
+										to={links["social"]["behance"]}
+										target="_blank"
+										data-tooltip-id="tooltip-area"
+										data-tooltip-content="Behance"
+										data-tooltip-place="bottom"
+									>
+										<Icon type="Behance" theme="filled" size={24} />
+									</Hyperlink>
+								</div>
 							</div>
+						</FlexCol>
+						<FlexCol xs={24} sm={24} md={6} center={true}>
+							<div className={'hero-image'}>
+								<figure>
+									<img src={'Hero.jpg'} alt="Amirhossein Douzandeh"/>
+								</figure>
+							</div>
+						</FlexCol>
+					</FlexRow>
+				</Container>
+			</section>
+			<section className={'experience'}>
+				<span className={'experience-circle experience-circle--one'} />
+				<span className={'experience-circle experience-circle--two'} />
+				<span className={'experience-circle experience-circle--three'} />
+				<span className={'experience-circle experience-circle--four'} />
+				<Container>
+					{experiencesList.map((item: Experience) => (
+						<div className={'experience-item'}>
+							<span className={'experience-bullet'}></span>
+							<span>{item.title} <em>({item.type})</em></span>
+							<h2>{ item.position }</h2>
+							<div className={'experience-details'}>
+								<span>{ item.location }</span>
+								<p>{ item.date }</p>
+							</div>
+							<ul>
+								{cloudObjectives.map((objective: string, index: number) => (
+									<li className={'experience-objective'} key={`${item.translation_key}_${index}`}>
+										<Icon type={'Dot'} theme={'outline'} size={24} />
+										<p>{objective}</p>
+									</li>
+								))}
+							</ul>
 						</div>
-					</FlexCol>
-					<FlexCol xs={24} sm={24} md={6} center={true}>
-						<div className={'hero-image'}>
-							<figure>
-								<img src={'Hero.jpg'} alt="Amirhossein Douzandeh"/>
-							</figure>
-						</div>
-					</FlexCol>
-				</FlexRow>
-			</Container>
-		</section>
+					))}
+				</Container>
+			</section>
+		</>
 	);
 }
 
diff --git a/src/pages/home/style.scss b/src/pages/home/style.scss
index b621dc8..c06fae3 100644
--- a/src/pages/home/style.scss
+++ b/src/pages/home/style.scss
@@ -114,3 +114,140 @@
         padding-bottom: px-to-rem(200);
     }
 }
+
+.experience {
+    position: relative;
+    background-color: #c7bbb3;
+    padding: px-to-rem(50) px-to-rem(20);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+    box-sizing: border-box;
+    overflow: hidden;
+    color: #342627;
+
+    &-item {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        justify-content: flex-start;
+        padding-left: px-to-rem(40);
+
+        > h2 {
+            font-size: px-to-rem(24);
+            font-weight: 700;
+            margin-bottom: px-to-rem(8);
+            margin-top: 0;
+        }
+
+        > span {
+            font-size: px-to-rem(16);
+            font-weight: 600;
+            margin-bottom: px-to-rem(4);
+            margin-top: 0;
+            color: lighten(#342627, 15%);
+
+            > em {
+                font-style: normal;
+                font-weight: 300;
+            }
+        }
+
+        &:not(:last-child) {
+            margin-bottom: px-to-rem(32);
+            .experience-bullet:before {
+                height: calc(100% - 24px);
+            }
+        }
+    }
+    &-details {
+        margin-bottom: px-to-rem(20);
+        padding-left: px-to-rem(32);
+    }
+    &-objective {
+        display: flex;
+        flex-direction: row;
+        align-items: flex-start;
+        justify-content: flex-start;
+
+        &:not(:last-child) {
+            margin-bottom: px-to-rem(8);
+        }
+
+        > span {
+            margin-right: px-to-rem(8);
+            color: #C14234;
+        }
+    }
+    &-bullet {
+        position: absolute;
+        left: 0;
+        top: 0;
+        height: 100%;
+        width: px-to-rem(24);
+
+        &:after {
+            content: "";
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: px-to-rem(24);
+            height: px-to-rem(24);
+            background-color: lighten(#C14234, 15%);
+            opacity: 50%;
+            transform: rotate(45deg);
+        }
+        &:before {
+            content: "";
+            position: absolute;
+            top: px-to-rem(40);
+            left: 50%;
+            width: px-to-rem(2);
+            height: calc(100% - 32px);
+            transform: translateX(-50%);
+            background-color: lighten(#C14234, 15%);
+            opacity: 50%;
+        }
+    }
+
+    &-circle {
+        position: absolute;
+        border-radius: 50%;
+        background-color: #342627;
+        opacity: 5%;
+        pointer-events: none;
+        user-select: none;
+        z-index: 0;
+
+        &--one, &--two {
+            width: 150vw;
+            height: 120vw;
+        }
+        &--one {
+            bottom: -70vw;
+            left: 5vw;
+        }
+        &--two {
+            bottom: -75vw;
+            left: 4vw;
+        }
+        &--three {
+            width: 50vw;
+            height: 50vw;
+            top: 15%;
+            left: -25%;
+        }
+        &--four {
+            width: 45vw;
+            height: 45vw;
+            top: 15%;
+            left: -25%;
+        }
+    }
+
+    @include respond-to(md) {
+        padding: px-to-rem(50);
+    }
+}