diff --git a/src/app/components/mod.rs b/src/app/components/mod.rs
index e03464d..f38c67e 100644
--- a/src/app/components/mod.rs
+++ b/src/app/components/mod.rs
@@ -8,4 +8,7 @@ mod social_link;
 pub use social_link::{SocialLinkContainer, SocialLink};
 
 mod top_component;
-pub use top_component::TopComponent;
\ No newline at end of file
+pub use top_component::TopComponent;
+
+mod project;
+pub use project::{ProjectContainer, Project};
\ No newline at end of file
diff --git a/src/app/components/project.rs b/src/app/components/project.rs
new file mode 100644
index 0000000..3b61e9a
--- /dev/null
+++ b/src/app/components/project.rs
@@ -0,0 +1,30 @@
+use leptos::*;
+
+#[component]
+pub fn ProjectContainer(
+    children: Children
+) -> impl IntoView {
+    view! {
+        <div class="grid grid-cols-1 gap-4 md:grid-cols-2 mt-3">
+            { children() }
+        </div>
+    }
+}
+
+#[component]
+pub fn Project(
+    children: Children,
+    image_src: String,
+    url: String
+) -> impl IntoView {
+    view! {
+        <a href=url target="_blank" class="rounded-lg p-5 flex flex-col items-center gap-2 bg-primary/10 dark:bg-dark_primary/10 shadow-md shadow-primary/5 dark:shadow-dark_primary/5 hover:bg-primary/20 hover:dark:bg-dark_primary/20 hover:shadow-md hover:shadow-primary/10 hover:dark:shadow-dark_primary/10">
+            { if !image_src.is_empty() {
+                Some(view! { <img src=image_src class="h-1/2"/> })
+            } else {
+                None
+            }}
+            <div class="flex flex-col justify-center h-full"><p>{children()}</p></div>
+        </a>
+    }
+}
\ No newline at end of file