diff --git a/Cargo.toml b/Cargo.toml
index e5f2ef3..aadad43 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -7,4 +7,5 @@ edition = "2024"
 actix-web = {version = "4.11.0"}
 serde = "1.0.228"
 serde_json = "1.0.145"
-sqlx = {version = "0.8.6", features = ["postgres"]}
\ No newline at end of file
+sqlx = {version = "0.8.6", features = ["postgres"]}
+futures-util = "0.3.31"
\ No newline at end of file
diff --git a/assets/css/projects.css b/assets/css/projects.css
new file mode 100644
index 0000000..22d402a
--- /dev/null
+++ b/assets/css/projects.css
@@ -0,0 +1,14 @@
+.project {
+    display: flex;
+    flex-direction: column;
+    background-color: rgba(50,50,75,0.8);
+    border-radius: 12px;
+}
+
+.project > h1 {
+    color: white;
+}
+
+.project-desc {
+    color: white;
+}
\ No newline at end of file
diff --git a/src/pages/mod.rs b/src/pages/mod.rs
index 0991ec1..9341618 100644
--- a/src/pages/mod.rs
+++ b/src/pages/mod.rs
@@ -1,45 +1,69 @@
 pub(crate) mod files;
+pub(crate) mod projects;
 
 use crate::html::elements::{a, div, h1, h2, img, link, p};
 use crate::html::{Page, Render};
-use actix_web::http::header::ContentType;
-use actix_web::mime::TEXT_HTML;
-use actix_web::{HttpResponse, Responder, get};
+use actix_web::{Responder, get};
+
+pub(crate) struct BasePage {
+    page: Page
+}
+
+impl BasePage {
+    pub(crate) fn new(title: &'static str) -> Self {
+        let mut page = Page::new(title);
+        // header
+        let mut header = div::new("header", vec!["header"]);
+        let name = p::new("name", vec!["name"], "AINDUSTRIES".to_string());
+        let mut buttons = div::new("buttons", vec!["nav-buttons"]);
+        let home = a::new("home", vec!["nav-button"], "/", "Home".to_string());
+        let projects = a::new("projects", vec!["nav-button"], "/projects", "Projects".to_string());
+        buttons.append_element(home);
+        buttons.append_element(projects);
+        header.append_element(name);
+        header.append_element(buttons);
+        // background
+        let image = img::new("background", vec!["background"], "static/img/background.png");
+        // css
+        let base = link::new("stylesheet", "static/css/base.css");
+        // add elements to the page in order
+        page.append_element_to_head(base);
+        page.append_element_to_body(image);
+        page.append_element_to_body(header);
+        Self {
+            page
+        }
+    }
+
+    pub(crate) fn append_element_to_head(&mut self, element: impl Render + 'static) {
+        self.page.append_element_to_head(element);
+    }
+    pub(crate) fn append_element_to_body(&mut self, element: impl Render + 'static) {
+        self.page.append_element_to_body(element);
+    }
+}
+
+impl Render for BasePage {
+    fn render(&self) -> String {
+        self.page.render()
+    }
+}
 
 #[get("/")]
 async fn index() -> impl Responder {
-    let mut page = Page::new("AINDUSTRIES".to_string());
-    // header
-    let mut header = div::new("header".to_string(), vec!["header".to_string()]);
-    let name = p::new("name".to_string(), vec!["name".to_string()], "AINDUSTRIES".to_string());
-    let mut buttons = div::new("buttons".to_string(), vec!["nav-buttons".to_string()]);
-    let home = a::new("home".to_string(), vec!["nav-button".to_string()], "/".to_string(), "Home".to_string());
-    buttons.append_element(home);
-    header.append_element(name);
-    header.append_element(buttons);
-    // background
-    let image = img::new("background".to_string(), vec!["background".to_string()], "static/img/background.png".to_string());
+    let mut page = BasePage::new("AINDUSTRIES");
     // introduction
-    let mut intro = div::new("intro".to_string(), vec!["intro".to_string()]);
+    let mut intro = div::new("intro", vec!["intro"]);
     let hi = h1::new("Hello and welcome!".to_string());
     let detail = h2::new("This here is a small website to show the passion I have for computers.<br>\
     I have always had a good time creating and discovering new things.<br>\
     Your may discover some of my projects here on this showcase.".to_string());
-    let note = p::new("note".to_string(), vec!["note".to_string()], "Website in construction.".to_string());
     intro.append_element(hi);
     intro.append_element(detail);
-    intro.append_element(note);
     // css
-    let base = link::new("stylesheet".to_string(), "static/css/base.css".to_string());
-    let index = link::new("stylesheet".to_string(), "static/css/index.css".to_string());
+    let index = link::new("stylesheet", "static/css/index.css");
     // add elements to the page in order
-    page.append_element_to_head(base);
     page.append_element_to_head(index);
-    page.append_element_to_body(image);
-    page.append_element_to_body(header);
     page.append_element_to_body(intro);
-    let response = HttpResponse::Ok()
-        .insert_header(ContentType(TEXT_HTML))
-        .body(page.render());
-    response
+    page.render()
 }
diff --git a/src/pages/projects.rs b/src/pages/projects.rs
new file mode 100644
index 0000000..f2e66e4
--- /dev/null
+++ b/src/pages/projects.rs
@@ -0,0 +1,25 @@
+use actix_web::{get, Responder};
+use crate::html::elements::{div, h1, p, a, link};
+use crate::html::{Render};
+use super::BasePage;
+
+#[get("/projects")]
+async fn projects() -> impl Responder {
+    let mut page = BasePage::new("Projects");
+    let mut website = div::new("project-website", vec!["project"]);
+    let title = h1::new("Website".to_string());
+    let desc = p::new("website-desc", vec!["project-desc"], "This project is the website you are currently on.".to_string());
+    let view = a::new("website-view", vec!["project-view"], "website" , "View More".to_string());
+    website.append_element(title);
+    website.append_element(desc);
+    website.append_element(view);
+    let css = link::new("stylesheet", "/static/css/projects.css");
+    page.append_element_to_head(css);
+    page.append_element_to_body(website);
+    page.render()
+}
+#[get("/projects/{project}")]
+async fn project() -> impl Responder {
+    let page = BasePage::new("Project");
+    page.render()
+}
\ No newline at end of file