diff --git a/assets/styling/projectCards.css b/assets/styling/projectCards.css
new file mode 100644
index 0000000..cb579e5
--- /dev/null
+++ b/assets/styling/projectCards.css
@@ -0,0 +1,69 @@
+.project-card {
+	display: flex;
+	flex-direction: column;
+	flex-wrap: wrap;
+	background-color: aqua;
+}
+
+.project-card img {
+	width: 96%;
+	height: 50svh;
+	align-self: center;
+	padding-top: 1svh;
+}
+
+.project-title-info {
+	display: flex;
+	flex-direction: row;
+
+	border-bottom: var(--underlineTitle);
+	width: 80%;
+	margin: 0px 4svw;
+	padding: 0px 4svw;
+
+	justify-content: space-between;
+	align-items: center;
+	flex-wrap: nowrap;
+}
+.project-title-info h3 {
+	margin: 0px;
+	text-align: start;
+	white-space: nowrap;
+	align-self: center;
+}
+
+.project-title-info img {
+	height: 6svh;
+}
+
+.project-title-info div {
+	display: flex;
+	gap: 1svw;
+	justify-content: flex-end;
+	border-bottom: none;
+}
+
+.project-card div p {
+	display: flex;
+	width: 90%;
+	justify-self: center;
+	text-align: start;
+}
+
+.project-tech-logos {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	align-items: center;
+	align-self: center;
+	width: 90%;
+	justify-content: space-between;
+	/* gap: 1svw; */
+}
+
+.project-tech-logos img {
+	width: 60px;
+	height: 60px;
+	padding: 1svh 0px;
+	flex: 0 1 19%;
+}
diff --git a/src/components/techs.rs b/src/components/techs.rs
index 26abf98..9a601e8 100644
--- a/src/components/techs.rs
+++ b/src/components/techs.rs
@@ -1,7 +1,5 @@
-use std::collections::HashMap;
-use std::hash::{BuildHasherDefault, DefaultHasher};
-
 use dioxus::prelude::*;
+use std::collections::HashMap;
 
 const TECHS_CSS: Asset = asset!("/assets/styling/techs.css");
 
diff --git a/src/views/home.rs b/src/views/home.rs
index aa4caac..e540ac2 100644
--- a/src/views/home.rs
+++ b/src/views/home.rs
@@ -1,5 +1,5 @@
-use crate::components::{TechCat, TechDes};
-use crate::views::Contact;
+use crate::components::TechCat;
+use crate::views::{Contact, Projects};
 use dioxus::prelude::*;
 
 #[component]
@@ -9,6 +9,7 @@ pub fn Home() -> Element {
         h1 { "Hi I'm Brock" }
         TechCat { cat: "Languages".to_string(), tech_vec: languages }
         Contact {}
+        Projects {}
     )
 }
 
diff --git a/src/views/mod.rs b/src/views/mod.rs
index 45682ed..cb34b00 100644
--- a/src/views/mod.rs
+++ b/src/views/mod.rs
@@ -27,3 +27,4 @@ mod contact;
 pub use contact::Contact;
 
 mod projects;
+pub use projects::{ProjectCards, Projects};
diff --git a/src/views/projects.rs b/src/views/projects.rs
index 11d6bee..0f55b8d 100644
--- a/src/views/projects.rs
+++ b/src/views/projects.rs
@@ -2,6 +2,73 @@ use dioxus::prelude::*;
 
 #[component]
 pub fn Projects() -> Element {
-    todo!();
-    rsx! {}
+    rsx! {
+        div {
+            h2 { "Projects" }
+            p { "Top Featured and Recent Projects" }
+        }
+        div { ProjectCards {} }
+    }
 }
+
+const PROJECT_CARDS_CSS: Asset = asset!("/assets/styling/projectCards.css");
+
+#[component]
+pub fn ProjectCards() -> Element {
+    let website: Option<&'static str> = Some("https://google.com");
+    let github: Option<&'static str> = Some("https://google.com");
+
+    rsx! {
+        document::Link { href: PROJECT_CARDS_CSS, rel: "stylesheet" }
+        div { class: "project-card",
+            img {
+                src: "https://picsum.photos/200",
+                alt: "dashboard of project or the logo of the project",
+            }
+            div { class: "project-title-info",
+                h3 { "Project Name" }
+                div {
+                    if let Some(github_site) = github {
+                        a { href: "{github_site}",
+                            img {
+                                src: "https://www.svgrepo.com/show/512317/github-142.svg",
+                                alt: "Github logo",
+                            }
+                        }
+                    }
+                    if let Some(site) = website {
+                        a { href: "{site}",
+                            img {
+                                src: "https://www.svgrepo.com/show/490809/internet.svg",
+                                alt: "Internet icon",
+                            }
+                        }
+                    }
+                
+                }
+            
+            }
+            div {
+                p {
+                    "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet risus tristique nisi euismod elementum. Duis et est sed neque pulvinar sodales sit amet non purus. Nam ut ultrices enim. Vestibulum blandit sapien dui. Aliquam sit amet ex quis lectus consectetur tempor at non arcu. Curabitur placerat justo sed nulla lobortis molestie. Sed eget justo sit amet justo lobortis tempus. Phasellus laoreet leo est, in lacinia ante aliquet ut. Etiam ultricies fermentum dolor id pretium. Sed dictum nisl id felis pulvinar varius."
+                }
+            
+            }
+            div { class: "project-tech-logos",
+                img { alt: "todo cards" }
+                img { alt: "todo cards" }
+                img { alt: "todo cards" }
+                img { alt: "todo cards" }
+                img { alt: "todo cards" }
+                img { alt: "todo cards" }
+            }
+        
+        }
+    }
+}
+
+// if let Some(site) = website {
+//     a { href: "{site}", {img {
+//     src: "https://www.svgrepo.com/show/490809/internet.svg",
+//     alt: "Internet icon",
+// }