diff --git a/package-lock.json b/package-lock.json
index 99e8de1..8d3e74f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -77,7 +77,6 @@
       "integrity": "sha512-UlLAnTPrFdNGoFtbSXwcGFQBtQZJCNjaN6hQNP3UPvuNXT1i82N26KL3dZeIpNalWywr9IuQuncaAfUaS1g6sQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@ampproject/remapping": "^2.2.0",
         "@babel/code-frame": "^7.27.1",
@@ -2233,7 +2232,6 @@
       "integrity": "sha512-WmdoynAX8Stew/36uTSVMcLJJ1KRh6L3IZRx1PZ7qJtBqT3dYTgyDTx8H1qoRghErydW7xw9mSJ3wS//tCRpFA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "csstype": "^3.0.2"
       }
@@ -2294,7 +2292,6 @@
       "integrity": "sha512-g3WpVQHngx0aLXn6kfIYCZxM6rRJlWzEkVpqEFLT3SgEDsp9cpCbxxgwnE504q4H+ruSDh/VGS6nqZIDynP+vg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.39.0",
         "@typescript-eslint/types": "8.39.0",
@@ -2547,7 +2544,6 @@
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -2837,7 +2833,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "caniuse-lite": "^1.0.30001726",
         "electron-to-chromium": "^1.5.173",
@@ -3477,7 +3472,6 @@
       "integrity": "sha512-LSehfdpgMeWcTZkWZVIJl+tkZ2nuSkyyB9C27MZqFWXuph7DvaowgcTvKqxvpLW1JZIk8PN7hFY3Rj9LQ7m7lg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -5581,7 +5575,6 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.1.1.tgz",
       "integrity": "sha512-w8nqGImo45dmMIfljjMwOGtbmC/mk4CMYhWIicdSflH91J9TyCyczcPFXJzrZ/ZXcgGRFeP6BU0BEJTw6tZdfQ==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -5591,7 +5584,6 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.1.tgz",
       "integrity": "sha512-Dlq/5LAZgF0Gaz6yiqZCf6VCcZs1ghAJyrsu84Q/GT0gV+mCxbfmKNoGRKBYMJ8IEdGPqu49YWXD02GCknEDkw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "scheduler": "^0.26.0"
       },
@@ -6322,7 +6314,6 @@
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -6460,7 +6451,6 @@
       "integrity": "sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==",
       "dev": true,
       "license": "Apache-2.0",
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -6528,7 +6518,6 @@
       "integrity": "sha512-i7qRCmY42zmCwnYlh9H2SvLEypEFGye5iRmEMKjcGi7zk9UquigRjFtTLz0TYqr0ZGLZhaMHl/foy1bZR+Cwlw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "pathe": "^2.0.3"
       }
@@ -6579,7 +6568,6 @@
       "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.0.tgz",
       "integrity": "sha512-dZwN5L1VlUBewiP6H9s2+B3e3Jg96D0vzN+Ry73sOefebhYr9f94wwkMNN/9ouoU8pV1BqA1d1zGk8928cx0rg==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "esbuild": "^0.27.0",
         "fdir": "^6.5.0",
@@ -6671,7 +6659,6 @@
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -6801,7 +6788,6 @@
       "dev": true,
       "hasInstallScript": true,
       "license": "Apache-2.0",
-      "peer": true,
       "bin": {
         "workerd": "bin/workerd"
       },
diff --git a/src/components/InformationCard.tsx b/src/components/InformationCard.tsx
index b2334c7..f6ce9a7 100644
--- a/src/components/InformationCard.tsx
+++ b/src/components/InformationCard.tsx
@@ -1,5 +1,4 @@
 import { GlobeIcon } from "lucide-react";
-import Button from "./Inputs/Button";
 
 const InformationCard = ({
   title,
@@ -39,7 +38,6 @@ const InformationCard = ({
           <GlobeIcon className="w-5 h-5" />
           <span className="text-sm">{websiteLabel}</span>
         </a>
-        <Button type="button" width="w-fit" baseText="View details" />
       </footer>
     </article>
   );
diff --git a/src/index.css b/src/index.css
index 068431b..088a7a2 100644
--- a/src/index.css
+++ b/src/index.css
@@ -10,6 +10,11 @@
 }
 
 @layer base {
+  :root {
+    background: #171717 !important;
+    color-scheme: dark;
+    @apply bg-background;
+  }
 }
 
 :root {
diff --git a/src/pages/Contact.tsx b/src/pages/Contact.tsx
index c2ad4bd..fe87ff4 100644
--- a/src/pages/Contact.tsx
+++ b/src/pages/Contact.tsx
@@ -67,7 +67,7 @@ const Contact = () => {
     <>
       <main
         className={[
-          "flex flex-col gap-4 items-center justify-center min-h-screen w-full transition-all duration-400",
+          "flex flex-col gap-4 items-center justify-center min-h-screen w-full transition-all duration-400 md:pt-24",
           entered
             ? "opacity-100 scale-100 pointer-events-auto"
             : "opacity-0 scale-95 translate-y-5 pointer-events-none",
diff --git a/src/pages/Experience.tsx b/src/pages/Experience.tsx
index 45eddfb..7f1d78e 100644
--- a/src/pages/Experience.tsx
+++ b/src/pages/Experience.tsx
@@ -46,7 +46,7 @@ const Experience = () => {
     <>
       <main
         className={[
-          "flex flex-col gap-4 items-center justify-center min-h-screen w-full transition-all duration-400",
+          "flex flex-col gap-4 items-center justify-center min-h-screen w-full transition-all duration-400 md:pt-24",
           entered
             ? "opacity-100 scale-100 pointer-events-auto"
             : "opacity-0 scale-95 translate-y-5 pointer-events-none",
diff --git a/src/pages/Projects.tsx b/src/pages/Projects.tsx
index b89b16d..a9bb1d5 100644
--- a/src/pages/Projects.tsx
+++ b/src/pages/Projects.tsx
@@ -1,5 +1,6 @@
 import { useEffect, useState } from "react";
 import { useLocation } from "react-router";
+import InformationCard from "../components/InformationCard";
 
 const Projects = () => {
   const [entered, setEntered] = useState(false);
@@ -11,18 +12,102 @@ const Projects = () => {
     return () => clearTimeout(timeout);
   }, [location.pathname]);
 
+  const projects = [
+    {
+      title: "In Porto",
+      description:
+        "A cross-platform mobile application that provides users with information about public transportation in Porto, Portugal, enhancing the experience of both residents and tourists.",
+      websiteLink: "https://github.com/niaefeup/in-porto",
+      websiteLabel: "github.com",
+      color: "white",
+    },
+    {
+      title: "uni",
+      description:
+        "A cross-platform mobile application designed to streamline academic life for university students, offering features like schedule management, grade tracking, and campus navigation.",
+      websiteLink: "https://github.com/niaefeup/uni",
+      websiteLabel: "github.com",
+      color: "white",
+    },
+    {
+      title: "Personal Portfolio",
+      description:
+        "A personal portfolio website built with React and Tailwind CSS, showcasing my projects, experience, and skills in a clean and responsive design.",
+      websiteLink: "https://pedroafmonteiro.pages.dev",
+      websiteLabel: "pedroafmonteiro.pages.dev",
+      color: "white",
+    },
+    {
+      title: "Qnect",
+      description:
+        "A web application designed for people to ask questions about various topics, fostering a collaborative environment and facilitating knowledge sharing.",
+      websiteLink: "https://github.com/pedroafmonteiro/qnect",
+      websiteLabel: "github.com",
+      color: "white",
+    },
+    {
+      title: "EcoTracker",
+      description:
+        "A cross-platform mobile application designed to help users track their environmental impact and adopt more sustainable practices in their daily lives.",
+      websiteLink: "https://github.com/pedroafmonteiro/ecotracker",
+      websiteLabel: "github.com",
+      color: "white",
+    },
+    {
+      title: "Hyrio",
+      description:
+        "A web application for freelancers to manage their projects, clients, and invoices, providing a streamlined workflow and efficient project management tools.",
+      websiteLink: "https://github.com/pedroafmonteiro/hyrio",
+      websiteLabel: "github.com",
+      color: "white",
+    },
+    {
+      title: "Space Wars",
+      description:
+        "A space-themed arcade game built with Java, following Design Patterns principles, where players navigate through space, avoiding obstacles and battling enemies in an engaging and dynamic environment.",
+      websiteLink: "https://github.com/pedroafmonteiro/project-ldts-leic",
+      websiteLabel: "github.com",
+      color: "white",
+    },
+    {
+      title: "LCOM Project",
+      description:
+        "A software project developed as part of the LCOM course unit, focusing on hardware communication and low-level programming, demonstrating proficiency in C and embedded systems.",
+      websiteLink: "https://github.com/pedroafmonteiro/project-lcom-leic",
+      websiteLabel: "github.com",
+      color: "white",
+    }
+  ];
+
   return (
     <>
       <main
         className={[
-          "flex flex-col items-center justify-center min-h-screen w-full transition-all duration-400",
+          "flex flex-col items-center justify-center min-h-screen w-full transition-all duration-400 md:pt-24",
           entered
             ? "opacity-100 scale-100 pointer-events-auto"
             : "opacity-0 scale-95 translate-y-5 pointer-events-none",
         ].join(" ")}
       >
-        <div>
-          <h1 className="text-white text-4xl select-none">Work in Progress</h1>
+        <div className="p-4 md:w-3xl space-y-4">
+          <header className="flex flex-col gap-2">
+            <h1 className="text-neutral-200 text-4xl">Projects</h1>
+            <p className="text-neutral-400 text-base">
+              A collection of my personal and academic projects.
+            </p>
+          </header>
+          <section className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            {projects.map((project, index) => (
+              <InformationCard
+                key={index}
+                title={project.title}
+                description={project.description}
+                websiteLink={project.websiteLink}
+                websiteLabel={project.websiteLabel}
+                color={project.color}
+              />
+            ))}
+          </section>
         </div>
       </main>
     </>