diff --git a/app/src/components/slingshot.rs b/app/src/components/slingshot.rs
index ebd1e91..c9ccbfe 100644
--- a/app/src/components/slingshot.rs
+++ b/app/src/components/slingshot.rs
@@ -1,23 +1,17 @@
+use crate::components::ui::articles::ArticleInterface;
 use leptos::*;
-use serde::*;
-
-#[derive(Debug, Clone, Serialize, Deserialize)]
-pub struct ArticleData {
-    pub content_type: String,
-    pub title: String,
-    pub date: String, // make datetime?
-    pub content: String,
-}
-
-#[derive(Deserialize)]
-struct ArticleFrontmatter {
-    content_type: String,
-    title: String,
-    date: String,
-}
 
 #[server]
-pub async fn slingshot(path: String) -> Result<Vec<ArticleData>, ServerFnError> {
+pub async fn slingshot(path: String) -> Result<Vec<ArticleInterface>, ServerFnError> {
+    use serde::Deserialize;
+
+    #[derive(Deserialize)]
+    struct ArticleFrontmatter {
+        content_type: String,
+        title: String,
+        date: String,
+    }
+
     let mut articles = vec![];
 
     for file in std::fs::read_dir(path)? {
@@ -38,7 +32,7 @@ pub async fn slingshot(path: String) -> Result<Vec<ArticleData>, ServerFnError>
                         let toml: ArticleFrontmatter = toml::from_str(&front_code.source)?;
 
                         // println!("{} {}", &toml.date, &toml.title);
-                        articles.push(ArticleData {
+                        articles.push(ArticleInterface {
                             content_type: toml.content_type,
                             title: toml.title,
                             date: toml.date,
@@ -50,6 +44,5 @@ pub async fn slingshot(path: String) -> Result<Vec<ArticleData>, ServerFnError>
         }
     }
 
-    // println!("iran");
     Ok(articles)
 }
diff --git a/app/src/components/ui.rs b/app/src/components/ui.rs
index 7c07223..3868772 100644
--- a/app/src/components/ui.rs
+++ b/app/src/components/ui.rs
@@ -1,73 +1,3 @@
-//
-// Pile of UI stuff
-//
-
-use crate::components::slingshot::*;
-use leptos::*;
-
-#[component]
-pub fn Article(data: ArticleData) -> impl IntoView {
-    view! {
-        <Container>
-            <article>
-                <h1 class="text-3xl font-light text-orange-600 capitalize max-6-xs">
-                    {&data.title}
-                </h1>
-                <hr class="opacity-50"/>
-                <span class="pt-0 pb-3.5 text-xs opacity-50 m-t">{&data.date}</span>
-                <div inner_html=&data.content></div>
-            </article>
-        </Container>
-    }
-}
-
-#[component]
-pub fn ArticleBuilder() -> impl IntoView {
-    let data_resource = create_local_resource(
-        || (),
-        |_| async move { slingshot("./public/blog".to_string()).await },
-    );
-
-    let articles_view = move || {
-        data_resource.and_then(|data| {
-            data.iter()
-                .map(|article| view! { <Article data=article.clone()/> })
-                .collect_view()
-        })
-    };
-
-    articles_view
-}
-
-#[component]
-pub fn Card(children: Children) -> impl IntoView {
-    view! {
-        <div class="p-7 my-5 mx-2 w-80 rounded-lg shadow-inner min-w-3/12 max-w-3/12 bg-zinc-900 shadow-zinc-950">
-            <h1 class="text-2xl font-light text-orange-600 max-6-xs">
-                "Card Header"
-            </h1>
-            <hr class="opacity-50"/>
-            <p class="text-center">
-                "[image]"
-            </p>
-            {children()}
-            <p class="text-right">
-                <a class="text-orange-300 hover:underline" href="https://lickmysa.cc" >Read more...</a>
-            </p>
-        </div>
-    }
-}
-
-#[component]
-pub fn CardHolder(children: Children) -> impl IntoView {
-    view! { <div class="flex flex-wrap place-content-evenly mx-auto w-11/12">{children()}</div> }
-}
-
-#[component]
-pub fn Container(children: Children) -> impl IntoView {
-    view! {
-        <div class="p-7 my-5 mx-auto w-11/12 max-w-screen-xl rounded-lg shadow-inner bg-zinc-900 shadow-zinc-950">
-            {children()}
-        </div>
-    }
-}
+pub mod articles;
+pub mod cards;
+pub mod containers;
diff --git a/app/src/components/ui/articles.rs b/app/src/components/ui/articles.rs
new file mode 100644
index 0000000..85bd626
--- /dev/null
+++ b/app/src/components/ui/articles.rs
@@ -0,0 +1,46 @@
+use crate::components::slingshot::*;
+use crate::components::ui::containers::*;
+use leptos::*;
+use serde::*;
+
+#[derive(Clone, Serialize, Deserialize)]
+pub struct ArticleInterface {
+    pub content_type: String,
+    pub title: String,
+    pub date: String, // make datetime?
+    pub content: String,
+}
+
+#[component]
+pub fn Article(data: ArticleInterface) -> impl IntoView {
+    view! {
+        <Container>
+            <article>
+                <h1 class="text-3xl font-light text-orange-600 capitalize max-6-xs">
+                    {&data.title}
+                </h1>
+                <hr class="opacity-50"/>
+                <span class="pt-0 pb-3.5 text-xs opacity-50 m-t">{&data.date}</span>
+                <div inner_html=&data.content></div>
+            </article>
+        </Container>
+    }
+}
+
+#[component]
+pub fn ArticleBuilder() -> impl IntoView {
+    let data_resource = create_local_resource(
+        || (),
+        |_| async move { slingshot("./public/blog".to_string()).await },
+    );
+
+    let articles_view = move || {
+        data_resource.and_then(|data| {
+            data.iter()
+                .map(|article| view! { <Article data=article.clone()/> })
+                .collect_view()
+        })
+    };
+
+    articles_view
+}
diff --git a/app/src/components/ui/cards.rs b/app/src/components/ui/cards.rs
new file mode 100644
index 0000000..bee7dbe
--- /dev/null
+++ b/app/src/components/ui/cards.rs
@@ -0,0 +1,25 @@
+use leptos::*;
+
+#[component]
+pub fn Card(children: Children) -> impl IntoView {
+    view! {
+        <div class="p-7 my-5 mx-2 w-80 rounded-lg shadow-inner min-w-3/12 max-w-3/12 bg-zinc-900 shadow-zinc-950">
+            <h1 class="text-2xl font-light text-orange-600 max-6-xs">
+                "Card Header"
+            </h1>
+            <hr class="opacity-50"/>
+            <p class="text-center">
+                "[image]"
+            </p>
+            {children()}
+            <p class="text-right">
+                <a class="text-orange-300 hover:underline" href="https://lickmysa.cc" >Read more...</a>
+            </p>
+        </div>
+    }
+}
+
+#[component]
+pub fn CardHolder(children: Children) -> impl IntoView {
+    view! { <div class="flex flex-wrap place-content-evenly mx-auto w-11/12">{children()}</div> }
+}
diff --git a/app/src/components/ui/containers.rs b/app/src/components/ui/containers.rs
new file mode 100644
index 0000000..8c21aba
--- /dev/null
+++ b/app/src/components/ui/containers.rs
@@ -0,0 +1,10 @@
+use leptos::*;
+
+#[component]
+pub fn Container(children: Children) -> impl IntoView {
+    view! {
+        <div class="p-7 my-5 mx-auto w-11/12 max-w-screen-xl rounded-lg shadow-inner bg-zinc-900 shadow-zinc-950">
+            {children()}
+        </div>
+    }
+}
diff --git a/app/src/routes/blog.rs b/app/src/routes/blog.rs
index 1e185bc..f47a70a 100644
--- a/app/src/routes/blog.rs
+++ b/app/src/routes/blog.rs
@@ -1,4 +1,4 @@
-use crate::components::ui::*;
+use crate::components::ui::articles::*;
 use crate::error_template::*;
 use leptos::*;
 
diff --git a/app/src/routes/home.rs b/app/src/routes/home.rs
index 4e76d43..8d44fa8 100644
--- a/app/src/routes/home.rs
+++ b/app/src/routes/home.rs
@@ -1,4 +1,4 @@
-use crate::components::ui::*;
+use crate::components::ui::cards::*;
 use crate::error_template::*;
 use leptos::*;
 
diff --git a/app/src/routes/projects.rs b/app/src/routes/projects.rs
index 098193b..21951f1 100644
--- a/app/src/routes/projects.rs
+++ b/app/src/routes/projects.rs
@@ -1,5 +1,4 @@
-use crate::components::ui::*;
-// use crate::components::slingshot::*;
+use crate::components::ui::cards::*;
 use crate::error_template::*;
 use leptos::*;