diff --git a/src/assets/blade-icon.png b/src/assets/blade-icon.png
new file mode 100644
index 0000000..a82c6b2
Binary files /dev/null and b/src/assets/blade-icon.png differ
diff --git a/src/assets/material-symbols--list-alt-outline.svg b/src/assets/material-symbols--list-alt-outline.svg
new file mode 100644
index 0000000..b397253
--- /dev/null
+++ b/src/assets/material-symbols--list-alt-outline.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M8 17q.425 0 .713-.288T9 16t-.288-.712T8 15t-.712.288T7 16t.288.713T8 17m0-4q.425 0 .713-.288T9 12t-.288-.712T8 11t-.712.288T7 12t.288.713T8 13m0-4q.425 0 .713-.288T9 8t-.288-.712T8 7t-.712.288T7 8t.288.713T8 9m3 8h6v-2h-6zm0-4h6v-2h-6zm0-4h6V7h-6zM5 21q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h14q.825 0 1.413.588T21 5v14q0 .825-.587 1.413T19 21zm0-2h14V5H5zM5 5v14z"/></svg>
\ No newline at end of file
diff --git a/src/index.html b/src/index.html
index 3302447..5ad2f33 100644
--- a/src/index.html
+++ b/src/index.html
@@ -30,9 +30,9 @@
 
     <!-- Links -->
     <div id="links-div">
-        <a href="/blog" style="grid-column: 1;">
-            <img src="/assets/fluent-mdl2_blog.svg" class="link-image"/>
-            <p class="link-text">Blog</p>
+        <a href="/projects" style="grid-column: 1;">
+            <img src="/assets/material-symbols--list-alt-outline.svg" class="link-image"/>
+            <p class="link-text">Projects</p>
         </a>
         
         <a href="https://github.com/vhaudiquet/" style="grid-column: 2;">
diff --git a/src/projects/index.html b/src/projects/index.html
new file mode 100644
index 0000000..089a04e
--- /dev/null
+++ b/src/projects/index.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+
+<head>
+    <title>Valentin Haudiquet</title>
+
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+    <link rel="stylesheet" href="/stylesheets/style.css">
+
+    <link rel="icon" type="image/png" href="/assets/favicon.ico_256x256.png">
+    
+    <!-- Inter font -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap" rel="stylesheet"> 
+</head>
+  
+<body>
+    
+    <!-- Header -->
+    <div id="header-div">
+        <img src="/assets/photo_web.JPG" id="header-img"/>
+        <div id="header-text-container">
+            <h1>Valentin Haudiquet</h1>
+            <h4>Computer science student at ENS Rennes</h4>
+            <p id="header-paragraph">Interested in operating systems, virtualization, computer architecture, embedded systems</p>
+        </div>
+    </div>
+
+    <!-- Projects -->
+    <div id="projects-div">
+
+        <!-- BuildPath -->
+        <a href="https://buildpath.win">
+        <div class="project-div">
+            <h2 class="project-title">BuildPath</h2>
+            <img class="project-img" src="https://buildpath.win/favicon.svg"/>
+            <h3 class="project-link">https://buildpath.win</h3>
+            <p class="project-desc">a tool for League of Legends champions runes and build paths</p>
+        </div>
+        </a>
+
+        <!-- homeprod -->
+        <a href="https://github.com/vhaudiquet/homeprod">
+        <div class="project-div">
+            <h2 class="project-title">homeprod</h2>
+            <img class="project-img" src="https://vhaudiquet.fr/public/github_assets/homeprod/p330_sff.png"/>
+            <h3 class="project-link" style="display: flex;">
+                <img src="/assets/github-mark.png" width="16px" style="margin: auto; display: block; margin-right: 4px;"/>
+                vhaudiquet/homeprod
+            </h3>
+            <p class="project-desc">personal home production environment</p>
+        </div>
+        </a>
+
+        <!-- BladePlayer -->
+        <a href="https://github.com/vhaudiquet/BladePlayer">
+        <div class="project-div">
+            <h2 class="project-title">Blade Player</h2>
+            <img class="project-img" src="/assets/blade-icon.png"/>
+            <h3 class="project-link" style="display: flex;">
+                <img src="/assets/github-mark.png" width="16px" style="margin: auto; display: block; margin-right: 4px;"/>
+                vhaudiquet/BladePlayer
+            </h3>
+            <p class="project-desc">android music player that plays from multiple sources</p>
+        </div>
+        </a>
+
+        <!-- vhaudiquet.fr -->
+        <a href="https://vhaudiquet.fr">
+        <div class="project-div">
+            <h2 class="project-title">vhaudiquet.fr</h2>
+            <img class="project-img" src="/assets/favicon.ico_256x256.png"/>
+            <h3 class="project-link" style="display: flex;">
+                https://vhaudiquet.fr
+            </h3>
+            <p class="project-desc">this website: my personal website with information, CV, projects</p>
+        </div>
+        </a>
+
+    </div>
+
+    </div>
+</body>
\ No newline at end of file
diff --git a/src/stylesheets/style.css b/src/stylesheets/style.css
index 99d348c..687d9a5 100644
--- a/src/stylesheets/style.css
+++ b/src/stylesheets/style.css
@@ -130,6 +130,73 @@ strong {
     font-size: 26px;
 }
 
+#projects-div {
+    display: grid;
+    grid-auto-flow: column;
+    width: fit-content;
+    margin: auto;
+
+    margin-top: 100px;
+
+    column-gap: 40px;
+}
+
+.project-div {
+    max-width: 250px;
+    width: 250px;
+    height: 300px;
+    background-color: #FEFEFE;
+    
+    border-radius: 12px;
+    border: 1px solid #E0E0E0;
+
+    box-shadow: 5px 2px 2px #E0E0E0;
+
+    padding: 10px;
+}
+.project-div:hover {
+    background-color: #EEEEEE;
+}
+.project-title {
+    width: fit-content;
+    margin: auto;
+
+    font-weight: 400;
+
+    font-size: 30px;
+    color: black;
+}
+.project-img {
+    max-width: 140px;
+    max-height: 140px;
+    /* width: fit-content; */
+    margin: auto;
+    display: block;
+
+    margin-top: 10px;
+}
+.project-link {
+    font-size: 12px;
+    width: fit-content;
+    font-weight: 400;
+    margin: auto;
+
+    margin-top: 8px;
+
+    color: black;
+}
+.project-desc {
+    font-size: 16px;
+    margin-left: 5px;
+
+    margin-top: 30px;
+    font-weight: 300;
+
+    color: black;
+
+    text-align: center;
+}
+
 @media only screen and (max-width: 1000px) {
     /* Tablet, small screens version */
     #header-img {
@@ -163,6 +230,19 @@ strong {
         margin: auto;
         margin-top: 100px;
     }
+
+    #projects-div {
+        grid-auto-flow: row;
+        row-gap: 40px;
+        grid-template-columns: repeat(2, 270px);
+    }
+}
+
+@media only screen and (max-width: 650px) {
+    #projects-div {
+        margin-top: 50px;
+        grid-template-columns: repeat(1, 270px);
+    }
 }
 
 @media only screen and (max-width: 450px) {
