diff --git a/assets/css/about.css b/assets/css/about.css
new file mode 100644
index 0000000..3d92862
--- /dev/null
+++ b/assets/css/about.css
@@ -0,0 +1,18 @@
+main h2 {
+  font-size: 3rem;
+  margin-bottom: 1rem;
+}
+
+main p {
+  margin-bottom: 3rem;
+}
+
+section img {
+    float: right;
+}
+
+@media only screen and (max-width: 1024px) {
+    section img {
+        display: none;
+    }
+}
\ No newline at end of file
diff --git a/assets/css/index.css b/assets/css/index.css
index ac41c31..92826f5 100644
--- a/assets/css/index.css
+++ b/assets/css/index.css
@@ -1,3 +1,56 @@
+:root {
+  --first-action-dark-background: #353535;
+  --first-action-light-background: var(--black);
+  --second-action-dark-background: #f3f3f3;
+  --second-action-light-background: #ececec;
+}
+
+main h1 {
+  font-size: 4rem;
+  text-transform: capitalize;
+  margin-bottom: 1rem;
+}
+
+main h1 span,
+main h1 a {
+  color: var(--crimson);
+}
+
+main h1 a {
+  text-decoration: none;
+}
+
+main #intro {
+  display: flex;
+  column-gap: 1rem;
+}
+
+main #intro img {
+  width: 19.6875rem;
+  height: 19.6875rem;
+}
+
+main #intro #action-buttons {
+  display: flex;
+  column-gap: 1rem;
+}
+
+main #intro #action-buttons a {
+  text-decoration: none;
+  border-radius: 0.5625rem;
+  padding: 1rem 2rem;
+}
+
+main #intro #action-buttons a:first-of-type {
+  background-color: var(--first-action-background);
+  color: var(--white);
+}
+
+main #intro #action-buttons a:last-of-type {
+  background-color: var(--second-action-background);
+  color: var(--black);
+}
+
 main h2 {
   font-size: 3rem;
   margin-bottom: 1rem;
@@ -11,7 +64,18 @@ section {
   margin-bottom: 5rem;
 }
 
+main #projects > div:first-of-type,
+main #blog > div:first-of-type {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
 @media only screen and (max-width: 1024px) {
+  main h1 {
+    font-size: 2rem;
+  }
+
   main h2 {
     font-size: 1.75rem;
   }
@@ -23,4 +87,12 @@ section {
   section {
     margin-bottom: 2rem;
   }
+
+  main #intro #action-buttons {
+    margin-top: 1.5rem;
+  }
+
+  main #intro img {
+    display: none;
+  }
 }
diff --git a/assets/css/partials/about-card.css b/assets/css/partials/about-card.css
new file mode 100644
index 0000000..806818e
--- /dev/null
+++ b/assets/css/partials/about-card.css
@@ -0,0 +1,46 @@
+:root {
+  --about-card-light-background: #f2f2f2;
+  --about-card-dark-background: #131212;
+}
+
+#about-card {
+  background-color: var(--about-card-background);
+  color: var(--text);
+  border-radius: 1.875rem;
+  padding: 3.5rem 2.5rem;
+  margin-bottom: 2rem;
+  display: flex;
+  column-gap: 2rem;
+}
+
+#about-card img {
+  width: 8.9375rem;
+  height: 8.9375rem;
+}
+
+#about-card h3 {
+  font-size: 2rem;
+  margin-bottom: 1.75rem;
+  text-transform: capitalize;
+}
+
+#about-card p {
+  margin-bottom: 4rem;
+}
+
+#about-card #links {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+@media only screen and (max-width: 1024px) {
+  #about-card {
+    flex-direction: column;
+    row-gap: 2rem;
+  }
+
+  #about-card img {
+    align-self: center;
+  }
+}
diff --git a/assets/css/partials/card.css b/assets/css/partials/card.css
index 162dc26..8d586b0 100644
--- a/assets/css/partials/card.css
+++ b/assets/css/partials/card.css
@@ -1,10 +1,10 @@
 :root {
-  --project-card-light-background: #f2f2f2;
-  --project-card-dark-background: #131212;
+  --card-light-background: #F2F2F2;
+  --card-dark-background: #131212;
 }
 
 article {
-  background-color: var(--project-card-background);
+  background-color: var(--card-background);
   color: var(--text);
   border-radius: 1.875rem;
   padding: 3.5rem 2.5rem;
diff --git a/assets/images/big-face.png b/assets/images/big-face.png
new file mode 100644
index 0000000..3901373
Binary files /dev/null and b/assets/images/big-face.png differ
diff --git a/assets/images/borded-face.png b/assets/images/borded-face.png
new file mode 100644
index 0000000..847ba92
Binary files /dev/null and b/assets/images/borded-face.png differ
diff --git a/assets/js/baseof.js b/assets/js/baseof.js
index 60b2170..ccbee89 100644
--- a/assets/js/baseof.js
+++ b/assets/js/baseof.js
@@ -37,6 +37,18 @@ function loadTheme() {
       ? 'var(--nav-light-background)'
       : 'var(--nav-dark-background)'
   );
+  root.style.setProperty(
+    '--first-action-background',
+    theme === 'light'
+      ? 'var(--first-action-light-background)'
+      : 'var(--first-action-dark-background)'
+  );
+  root.style.setProperty(
+    '--second-action-background',
+    theme === 'light'
+      ? 'var(--second-action-light-background)'
+      : 'var(--second-action-dark-background)'
+  );
   root.style.setProperty(
     '--input-background',
     theme === 'light'
@@ -50,10 +62,16 @@ function loadTheme() {
       : 'var(--button-dark-background)'
   );
   root.style.setProperty(
-    '--project-card-background',
+    '--card-background',
     theme === 'light'
-      ? 'var(--project-card-light-background)'
-      : 'var(--project-card-dark-background)'
+      ? 'var(--card-light-background)'
+      : 'var(--card-dark-background)'
+  );
+  root.style.setProperty(
+    '--about-card-background',
+    theme === 'light'
+      ? 'var(--about-card-light-background)'
+      : 'var(--about-card-dark-background)'
   );
   root.style.setProperty(
     '--footer-background',
diff --git a/content/about.md b/content/about.md
new file mode 100644
index 0000000..7a8cddd
--- /dev/null
+++ b/content/about.md
@@ -0,0 +1,17 @@
+---
+layout: "about"
+title: "About"
+date: 2023-10-18T20:03:43+01:00
+---
+
+## About
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor nulla sed mi faucibus, non commodo nulla malesuada. Aliquam sem lectus, sodales sit amet cursus ac, auctor quis dolor. Pellentesque ac metus vulputate, scelerisque nunc id, mollis est. Duis nec nisi feugiat, sagittis enim vitae, tincidunt metus. Nulla vitae laoreet quam. Integer tortor erat, dictum vel placerat ultricies, eleifend eu risus. Nam sit amet finibus dui. Cras malesuada ligula a maximus sagittis. Proin sed tortor consectetur, vestibulum mauris at, auctor orci. Quisque blandit lectus sollicitudin hendrerit euismod.
+
+Praesent efficitur diam laoreet lacus congue, vitae finibus purus blandit. Maecenas ex turpis, vehicula ac varius a, porttitor in sem. Nulla in suscipit elit. Vestibulum id leo eget odio convallis consectetur. Nullam ac diam lobortis, efficitur erat venenatis, tristique ligula. Mauris dui nisi, facilisis et malesuada id, scelerisque in urna. Curabitur egestas lobortis interdum. Etiam convallis mi eu lectus consectetur, feugiat imperdiet sem gravida. Proin eget malesuada ipsum. Maecenas congue scelerisque magna.
+
+Nunc molestie lorem velit, in efficitur risus dictum vel. Integer porta odio in odio posuere consequat. Etiam accumsan, enim ac scelerisque ultricies, lorem quam ultrices ex, ut ullamcorper mi ante quis augue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec ut ex feugiat, bibendum felis interdum, finibus nulla. Aenean accumsan bibendum massa. Aenean nec enim ligula. In a cursus orci. Etiam accumsan nisl quis velit porta pellentesque. Morbi dignissim mattis vestibulum. Morbi posuere velit nec augue interdum, facilisis congue augue auctor. Suspendisse nec elit sit amet velit ultrices porta.
+
+Duis molestie venenatis rhoncus. Phasellus pulvinar odio vel nulla accumsan pretium eget at nunc. Sed convallis, orci at laoreet consequat, odio leo tincidunt sapien, eget ultricies tortor nisl at metus. Integer pretium odio in ipsum iaculis, sit amet pretium lacus vehicula. Etiam vel ex id nisl hendrerit consequat iaculis id metus. Donec scelerisque justo augue, sed accumsan velit elementum finibus. Cras in viverra ex, in faucibus diam. Sed volutpat lacus vel suscipit aliquet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent bibendum ligula lacinia consectetur interdum.
+
+Fusce ultricies ex et volutpat elementum. Curabitur finibus iaculis erat, et venenatis lectus facilisis nec. Donec sollicitudin, sapien quis bibendum auctor, arcu nunc interdum enim, scelerisque aliquet enim neque eu neque. Fusce in turpis felis. Curabitur sapien mi, lobortis at hendrerit sit amet, maximus in nisi. Sed ac purus suscipit, laoreet lacus quis, congue leo. Cras imperdiet massa rutrum est dictum, quis convallis purus sollicitudin. Nulla eu nibh vel nisl accumsan ultrices.
\ No newline at end of file
diff --git a/layouts/_default/about.html b/layouts/_default/about.html
new file mode 100644
index 0000000..eb63d32
--- /dev/null
+++ b/layouts/_default/about.html
@@ -0,0 +1,17 @@
+{{ define "styles" }}
+    {{ $styles := resources.Get "css/about.css" | toCSS | minify }}
+
+    <link rel="stylesheet" href="{{ $styles.Permalink }}" />
+{{ end }}
+
+{{ define "main" }}
+    {{ $faceImage := resources.Get "images/big-face.png" }}
+    
+    <section>
+        <img src="{{ $faceImage.Permalink }}" alt="Hazem Krimi's face">
+        {{ .Content }}
+    </section>
+    
+    <h2>Contact</h2>
+    {{ partial "contact-form.html" . }}
+{{ end }}
diff --git a/layouts/index.html b/layouts/index.html
index 0893f8f..a1c90b7 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -4,8 +4,33 @@
     <link rel="stylesheet" href="{{ $styles.Permalink }}" />
 {{ end }}
 {{ define "main" }}
-    <section>
-        <h2>Projects</h2>
+    {{ $faceImage := resources.Get "images/big-face.png" }}
+    
+    <section id="intro">
+        <div>
+            <h1>Hi! I am <span>Hazem</span>, a sofware engineer currently working at <a href="https://finteum.com" target="_blank">Finteum</a></h1>
+            <p>I have over two years of experience mainly working on web and cross platform mobile applications in E-Commerce, Fintech, Auditing and Compliance. My role was mainly working on the front-end.</p>
+            <div id="action-buttons">
+                <a href="/blog">Blog</a>
+                <a href="/contact">Contact</a>
+            </div>
+        </div>
+        <img src="{{ $faceImage.Permalink }}" alt="Hazem Krimi's face">
+    </section>
+
+    <section id="about">
+        <h2>About</h2>
+        <p>Tinkering is what got me to where I am now as a professional engineer.</p>
+        {{ partial "about-card.html" . }}
+    </section>
+
+    <section id="projects">
+        <div>
+            <h2>Projects</h2>
+            <a class="read-more" href="/projects">
+                View more
+            </a>
+        </div>
         <p>These are all the projects I worked on personally and professionally.</p>
         {{ range (where .Site.Pages "Section" "projects") }}
             {{ range .Pages }}
@@ -14,8 +39,13 @@
         {{ end }}
     </section>
     
-    <section>
-        <h2>Blog</h2>
+    <section id="blog">
+        <div>
+            <h2>Blog</h2>
+            <a class="read-more" href="/blog">
+                View more
+            </a>
+        </div>
         <p>These are articles about things I learned about software engineering.</p>
         {{ range (where .Site.Pages "Section" "blog") }}
             {{ range .Pages }}
@@ -24,7 +54,7 @@
         {{ end }}
     </section>
 
-    <section>
+    <section id="contact">
         <h2>Contact</h2>
         <p>Here you can contact me personally for any questions or opportunities.</p>
 
diff --git a/layouts/partials/about-card.html b/layouts/partials/about-card.html
new file mode 100644
index 0000000..71ec3f1
--- /dev/null
+++ b/layouts/partials/about-card.html
@@ -0,0 +1,28 @@
+{{ $styles := resources.Get "css/partials/about-card.css" | toCSS | minify }}
+
+<link rel="stylesheet" href="{{ $styles.Permalink }}" />
+
+{{ $cv := resources.Get "cv.pdf" }}
+{{ $faceImage := resources.Get "images/borded-face.png" }}
+
+<div id="about-card">
+  <img src="{{ $faceImage.Permalink }}" alt="Hazem Krimi's face" />
+  <div>
+    <p>
+      My programming experience is mostly non-professional but it was essential
+      for my development Even though I am working professionally for over two
+      years now, I got into programming much longer than that. I got into web
+      development in the Summer of 2018 as I started learning the basics: HTML,
+      CSS, JS and most importantly how the web works by building very small
+      projects.
+    </p>
+    <div id="links">
+      <a href="{{ $cv.Permalink }}" target="_blank">
+        Download CV
+      </a>
+      <a class="read-more" href="/about">
+        Read more
+      </a>
+    </div>
+  </div>
+</div>
diff --git a/layouts/partials/card.html b/layouts/partials/card.html
index 74395a8..ae262af 100644
--- a/layouts/partials/card.html
+++ b/layouts/partials/card.html
@@ -2,7 +2,7 @@
 
 <link rel="stylesheet" href="{{ $styles.Permalink }}" />
 
-<article>
+<article class="card">
   <div>
     <h3>{{ .Title }}</h3>
     <p>{{ .Params.description }}</p>
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index e7fe069..3316ea8 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -9,7 +9,7 @@
 
 <header>
   <div id="header-face">
-    <img src="{{ $faceImage.Permalink }}" alt="Hazem Krimi" />
+    <img src="{{ $faceImage.Permalink }}" alt="Hazem Krimi's face" />
     <h3>Hazem Krimi</h3>
   </div>
   <div id="menus">