diff --git a/.gitignore b/.gitignore
index 8a837a7..e3f8b3c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -19,3 +19,7 @@ Cargo.lock
 
 # env file containing API keys
 .env
+
+# wasm related
+/frontend/dist/
+/frontend/index.html
diff --git a/Cargo.toml b/Cargo.toml
index 559a131..4ab4c70 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -1,16 +1,6 @@
+workspace = { members = ["backend", "config", "frontend", "types"] }
+
 [package]
 name = "pulse"
 version = "0.1.0"
 edition = "2021"
-
-# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
-
-[dependencies]
-cached = {version = "0.51.4", features = ["async"]}
-dotenv = "0.15.0"
-regex = "1.10.5"
-reqwest = "0.12.4"
-scraper = "0.19.0"
-serde_json = "1.0.117"
-tokio = { version = "1.38.0", features = ["full"] }
-url = "2.5.1"
diff --git a/backend/Cargo.toml b/backend/Cargo.toml
new file mode 100644
index 0000000..92a3a00
--- /dev/null
+++ b/backend/Cargo.toml
@@ -0,0 +1,21 @@
+[package]
+name = "backend"
+version = "0.1.0"
+edition = "2021"
+build = "build.rs"
+
+# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
+
+[dependencies]
+types = { path = "../types" }
+config = { path = "../config" }
+actix-files = "0.6.6"
+actix-web = "4.8.0"
+cached = { version = "0.51.4", features = ["async"] }
+rand = "0.8.5"
+regex = "1.10.5"
+reqwest = "0.12.5"
+scraper = "0.19.0"
+serde_json = "1.0.117"
+url = "2.5.2"
+yew = "0.21.0"
diff --git a/backend/build.rs b/backend/build.rs
new file mode 100644
index 0000000..7767b1b
--- /dev/null
+++ b/backend/build.rs
@@ -0,0 +1,9 @@
+use std::fs;
+use std::path::Path;
+
+fn main() {
+    let dist_dir = Path::new("../frontend/dist");
+    if !dist_dir.exists() || fs::read_dir(dist_dir).map_or(true, |entries| entries.count() == 0) {
+        println!("cargo:warning=Unable to serve frontened");
+    }
+}
diff --git a/backend/src/fetching.rs b/backend/src/fetching.rs
new file mode 100644
index 0000000..9d997a6
--- /dev/null
+++ b/backend/src/fetching.rs
@@ -0,0 +1,4 @@
+pub mod github;
+pub mod goodreads;
+pub mod lastfm;
+pub mod letterboxd;
diff --git a/backend/src/fetching/github.rs b/backend/src/fetching/github.rs
new file mode 100644
index 0000000..0cc1b23
--- /dev/null
+++ b/backend/src/fetching/github.rs
@@ -0,0 +1,53 @@
+use cached::proc_macro::once;
+use reqwest::{self, header};
+use types::Commit;
+
+// 15 min
+#[once(result = true, time = 900, sync_writes = true)]
+pub async fn fetch_newest(
+    username: &str,
+    n: u32,
+) -> Result<std::vec::Vec<Commit>, Box<dyn std::error::Error>> {
+    println!("Fetching data from github api...");
+    let url = format!("https://api.github.com/users/{username}/events");
+
+    let client = reqwest::Client::new();
+    let response = client
+        .get(&url)
+        .header(header::USER_AGENT, "feframe")
+        .send()
+        .await?
+        .text()
+        .await?;
+
+    let json: serde_json::Value = serde_json::from_str(&response)
+        .map_err(|err| Box::new(err) as Box<dyn std::error::Error>)?;
+
+    let json_array = match json.as_array() {
+        Some(json_array) => json_array.clone(),
+        None => return Ok(Vec::new()),
+    };
+
+    let push_events: Vec<_> = json_array
+        .iter()
+        .filter(|&event| event["type"] == "PushEvent")
+        .cloned()
+        .collect();
+
+    Ok(push_events
+        .iter()
+        .filter_map(|event| {
+            let commit = &event["payload"]["commits"][0];
+            let repository_name = event["repo"]["name"].as_str()?.to_string();
+            let repository_link = format!("https://github.com/{repository_name}");
+
+            Some(Commit {
+                message: commit["message"].as_str()?.to_string(),
+                url: format!("{repository_link}/commit/{}", commit["sha"].as_str()?),
+                repository_name,
+                repository_link,
+            })
+        })
+        .take(n as usize)
+        .collect())
+}
diff --git a/src/dynamic_content/goodreads.rs b/backend/src/fetching/goodreads.rs
similarity index 57%
rename from src/dynamic_content/goodreads.rs
rename to backend/src/fetching/goodreads.rs
index f768aa9..83d8d79 100644
--- a/src/dynamic_content/goodreads.rs
+++ b/backend/src/fetching/goodreads.rs
@@ -1,16 +1,8 @@
-use super::ApiRefresh;
 use cached::proc_macro::once;
 use regex::Regex;
 use scraper::{Html, Selector};
-use url::{ParseError, Url};
-
-#[derive(Clone)]
-pub struct Book {
-    pub title: String,
-    pub author: String,
-    pub title_url: Url,
-    pub author_url: Url,
-}
+use std::collections::HashMap;
+use types::Book;
 
 fn clean_text(input: &str) -> String {
     let trimmed = input.trim().replace(['\n', '\r'], "");
@@ -18,10 +10,6 @@ fn clean_text(input: &str) -> String {
     re.replace_all(&trimmed, " ").to_string()
 }
 
-fn create_goodreads_url(path: &str) -> Result<Url, ParseError> {
-    Url::parse(&format!("https://www.goodreads.com/{path}"))
-}
-
 fn swap_name_order(full_name: &str) -> Result<String, String> {
     let (last, first) = full_name
         .split_once(',')
@@ -31,20 +19,15 @@ fn swap_name_order(full_name: &str) -> Result<String, String> {
     Ok(format!("{first} {last}"))
 }
 
-impl ApiRefresh for Book {
-    type Content = Book;
-
-    async fn fetch_newest(n: u32) -> Result<std::vec::Vec<Book>, Box<dyn std::error::Error>> {
-        fetch_newest_books(n).await
-    }
-}
-
 // 1 day
-#[once(result = true, time = 86400)]
-async fn fetch_newest_books(n: u32) -> Result<std::vec::Vec<Book>, Box<dyn std::error::Error>> {
-    let shelf = std::env::var("GOODREADS_SHELF")?;
+#[once(result = true, time = 86400, sync_writes = true)]
+pub async fn fetch_newest(
+    shelf: &str,
+    n: u32,
+) -> Result<std::vec::Vec<Book>, Box<dyn std::error::Error>> {
+    println!("Parsing goodreads shelf html...");
     let html = Html::parse_document(
-        &reqwest::get(&shelf)
+        &reqwest::get(shelf)
             .await
             .map_err(|err| Box::new(err) as Box<dyn std::error::Error>)?
             .text()
@@ -52,10 +35,20 @@ async fn fetch_newest_books(n: u32) -> Result<std::vec::Vec<Book>, Box<dyn std::
             .map_err(|err| Box::new(err) as Box<dyn std::error::Error>)?,
     );
 
+    let ratings = HashMap::from([
+        ("did not like it", 1),
+        ("it was ok", 2),
+        ("liked it", 3),
+        ("really liked it", 4),
+        ("it was amazing", 5),
+    ]);
+
     let row_selector = Selector::parse(r"tr.bookalike.review").unwrap();
 
     let title_selector = Selector::parse(r"td.field.title a").unwrap();
     let author_selector = Selector::parse(r"td.field.author a").unwrap();
+    let rating_selector = Selector::parse(r"td.field.rating span").unwrap();
+    let cover_selector = Selector::parse(r"td.field.cover img").unwrap();
 
     Ok(html
         .select(&row_selector)
@@ -64,14 +57,20 @@ async fn fetch_newest_books(n: u32) -> Result<std::vec::Vec<Book>, Box<dyn std::
             let title_href = title_element.value().attr("href")?;
 
             let author_element = row.select(&author_selector).next()?;
-            let author_href = author_element.value().attr("href")?;
+            let author_href = row.select(&author_selector).next()?.value().attr("href")?;
+
+            let rating = row.select(&rating_selector).next()?.value().attr("title")?;
+
+            let cover_url = row.select(&cover_selector).next()?.value().attr("src")?;
 
             Some(Book {
                 title: clean_text(&title_element.text().collect::<Vec<_>>().concat()),
                 author: swap_name_order(&author_element.text().collect::<Vec<_>>().concat())
                     .ok()?,
-                title_url: create_goodreads_url(title_href).ok()?,
-                author_url: create_goodreads_url(author_href).ok()?,
+                rating: ("★").repeat(*ratings.get(rating)?),
+                title_url: format!("https://www.goodreads.com{title_href}"),
+                author_url: format!("https://www.goodreads.com{author_href}"),
+                cover_url: cover_url.to_string(),
             })
         })
         .take(n as usize)
diff --git a/src/dynamic_content/lastfm.rs b/backend/src/fetching/lastfm.rs
similarity index 56%
rename from src/dynamic_content/lastfm.rs
rename to backend/src/fetching/lastfm.rs
index 776eef7..0a8d363 100644
--- a/src/dynamic_content/lastfm.rs
+++ b/backend/src/fetching/lastfm.rs
@@ -1,30 +1,14 @@
-use super::ApiRefresh;
 use cached::proc_macro::once;
-use url::Url;
-
-#[derive(Clone)]
-pub struct Song {
-    pub title: String,
-    pub artist_name: String,
-    pub album_name: String,
-    pub album_image: Url,
-    pub url: Url,
-}
-
-impl ApiRefresh for Song {
-    type Content = Song;
-
-    async fn fetch_newest(n: u32) -> Result<std::vec::Vec<Song>, Box<dyn std::error::Error>> {
-        fetch_newest_songs(n).await
-    }
-}
+use types::Song;
 
 // 20 min
-#[once(result = true, time = 1200)]
-async fn fetch_newest_songs(n: u32) -> Result<std::vec::Vec<Song>, Box<dyn std::error::Error>> {
-    let key = std::env::var("LASTFM_KEY")?;
-    let username = std::env::var("LASTFM_USERNAME")?;
-
+#[once(result = true, time = 1200, sync_writes = true)]
+pub async fn fetch_newest(
+    username: &str,
+    key: &str,
+    n: u32,
+) -> Result<std::vec::Vec<Song>, Box<dyn std::error::Error>> {
+    println!("Fetching data from lastfm api...");
     let url = format!("https://ws.audioscrobbler.com/2.0/?method=user.getrecenttracks&user={username}&api_key={key}&format=json");
 
     let response = reqwest::get(&url)
@@ -49,9 +33,13 @@ async fn fetch_newest_songs(n: u32) -> Result<std::vec::Vec<Song>, Box<dyn std::
                 title: track["name"].as_str()?.to_string(),
                 artist_name: track["artist"]["#text"].as_str()?.to_string(),
                 album_name: track["album"]["#text"].as_str()?.to_string(),
-                album_image: Url::parse(track["image"].as_array()?.get(1)?.get("#text")?.as_str()?)
-                    .ok()?,
-                url: Url::parse(track["url"].as_str()?).ok()?,
+                album_image: track["image"]
+                    .as_array()?
+                    .first()?
+                    .get("#text")?
+                    .as_str()?
+                    .to_string(),
+                url: (track["url"]).as_str()?.to_string(),
             })
         })
         .take(n as usize)
diff --git a/backend/src/fetching/letterboxd.rs b/backend/src/fetching/letterboxd.rs
new file mode 100644
index 0000000..a37444c
--- /dev/null
+++ b/backend/src/fetching/letterboxd.rs
@@ -0,0 +1,107 @@
+use cached::proc_macro::once;
+use scraper::{Html, Selector};
+use types::Movie;
+
+fn parse_image(html: &Html) -> Result<String, Box<dyn std::error::Error>> {
+    let img_selector =
+        Selector::parse("div.react-component.poster.film-poster img.image[src]").unwrap();
+
+    Ok(html
+        .select(&img_selector)
+        .next()
+        .ok_or("Image source not found in HTML")?
+        .attr("src")
+        .ok_or("Image source attribute not found in HTML")?
+        .to_string())
+}
+
+fn parse_release_year(html: &Html) -> Result<String, Box<dyn std::error::Error>> {
+    let img_selector = Selector::parse("div.react-component.poster.film-poster").unwrap();
+
+    Ok(html
+        .select(&img_selector)
+        .next()
+        .ok_or("Image source not found in HTML")?
+        .attr("data-film-release-year")
+        .ok_or("Image source attribute not found in HTML")?
+        .to_string())
+}
+
+// 1 day
+#[once(result = true, time = 86400, sync_writes = true)]
+pub async fn fetch_newest(
+    username: &str,
+    n: u32,
+) -> Result<std::vec::Vec<Movie>, Box<dyn std::error::Error>> {
+    println!("Parsing letterboxd profile html...");
+    let url = format!("https://letterboxd.com/{username}/films/by/rated-date/");
+    let html = Html::parse_document(
+        &reqwest::get(&url)
+            .await
+            .map_err(|err| Box::new(err) as Box<dyn std::error::Error>)?
+            .text()
+            .await
+            .map_err(|err| Box::new(err) as Box<dyn std::error::Error>)?,
+    );
+
+    let row_selector = Selector::parse("li.poster-container").unwrap();
+
+    let div_selector = Selector::parse("div.really-lazy-load").unwrap();
+    let rating_selector = Selector::parse("span.rating").unwrap();
+    let img_selector = Selector::parse("img.image").unwrap();
+
+    let movie_iter = html
+        .select(&row_selector)
+        .filter_map(|row| {
+            let title = row
+                .select(&img_selector)
+                .next()?
+                .value()
+                .attr("alt")?
+                .to_string();
+
+            let rating = row
+                .select(&rating_selector)
+                .next()
+                .map(|r| r.inner_html())
+                .filter(|r| !r.is_empty())?;
+
+            let div_val = row.select(&div_selector).next()?.value();
+
+            let link = div_val.attr("data-target-link")?;
+
+            let slug = div_val.attr("data-film-slug")?;
+
+            Some(Movie {
+                title,
+                rating,
+                release_year: String::new(),
+                url: format! {"https://letterboxd.com{link}"},
+                poster_url: slug.to_string(), // icky, just store the slug in here for now xd
+            })
+        })
+        .take(n as usize);
+
+    // no async closures :(
+    let mut movies = Vec::new();
+    for mut movie in movie_iter {
+        let html = Html::parse_document(
+            &reqwest::get(format!(
+                "https://letterboxd.com/ajax/poster/film/{}/std/70x105/",
+                movie.poster_url // aka slug
+            ))
+            .await
+            .map_err(|err| Box::new(err) as Box<dyn std::error::Error>)?
+            .text()
+            .await
+            .map_err(|err| Box::new(err) as Box<dyn std::error::Error>)?,
+        );
+
+        movie.poster_url = parse_image(&html)?;
+        movie.release_year = parse_release_year(&html)?;
+
+        movies.push(movie);
+    }
+
+    Ok(movies)
+}
diff --git a/backend/src/main.rs b/backend/src/main.rs
new file mode 100644
index 0000000..642b5fc
--- /dev/null
+++ b/backend/src/main.rs
@@ -0,0 +1,52 @@
+use actix_web::{web, App, HttpServer, Responder};
+use config::{ENDPOINT, ENV};
+
+mod fetching;
+
+async fn github() -> impl Responder {
+    web::Json(
+        fetching::github::fetch_newest(ENV.username.github, 10)
+            .await
+            .unwrap(),
+    )
+}
+
+async fn lastfm() -> impl Responder {
+    web::Json(
+        fetching::lastfm::fetch_newest(ENV.username.lastfm, ENV.key.lastfm, 10)
+            .await
+            .unwrap(),
+    )
+}
+
+async fn goodreads() -> impl Responder {
+    web::Json(
+        fetching::goodreads::fetch_newest(ENV.link.goodreads, 10)
+            .await
+            .unwrap(),
+    )
+}
+
+async fn letterboxd() -> impl Responder {
+    web::Json(
+        fetching::letterboxd::fetch_newest(ENV.username.letterboxd, 4)
+            .await
+            .unwrap(),
+    )
+}
+
+#[actix_web::main]
+async fn main() -> std::io::Result<()> {
+    println!("Server opened on {}", ENDPOINT.base);
+    HttpServer::new(|| {
+        App::new()
+            .route(ENDPOINT.github, web::get().to(github))
+            .route(ENDPOINT.lastfm, web::get().to(lastfm))
+            .route(ENDPOINT.goodreads, web::get().to(goodreads))
+            .route(ENDPOINT.letterboxd, web::get().to(letterboxd))
+            .service(actix_files::Files::new("/", "../frontend/dist").index_file("index.html"))
+    })
+    .bind(ENDPOINT.base)?
+    .run()
+    .await
+}
diff --git a/config/Cargo.toml b/config/Cargo.toml
new file mode 100644
index 0000000..cd4f221
--- /dev/null
+++ b/config/Cargo.toml
@@ -0,0 +1,16 @@
+[package]
+name = "config"
+version = "0.1.0"
+edition = "2021"
+build = "build.rs"
+
+# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
+
+[dependencies]
+dotenv_codegen = "0.15.0"
+types = { path = "../types" }
+url = "2.5.2"
+
+[build-dependencies]
+url = "2.5.1"
+dotenv_codegen = "0.15.0"
diff --git a/config/build.rs b/config/build.rs
new file mode 100644
index 0000000..475cb4a
--- /dev/null
+++ b/config/build.rs
@@ -0,0 +1,6 @@
+use dotenv_codegen::dotenv;
+use url::Url;
+
+fn main() {
+    let _ = Url::parse(dotenv!("GOODREADS_SHELF")).expect("Goodreads shelf link is invalid");
+}
diff --git a/config/src/lib.rs b/config/src/lib.rs
new file mode 100644
index 0000000..408962f
--- /dev/null
+++ b/config/src/lib.rs
@@ -0,0 +1,51 @@
+use dotenv_codegen::dotenv;
+
+pub const ENV: Env = Env {
+    username: Username {
+        github: dotenv!("GH_USERNAME"),
+        lastfm: dotenv!("LASTFM_USERNAME"),
+        letterboxd: dotenv!("LETTERBOXD_USERNAME"),
+    },
+    link: Link {
+        goodreads: dotenv!("GOODREADS_SHELF"),
+    },
+    key: Key {
+        lastfm: dotenv!("LASTFM_KEY"),
+    },
+};
+
+pub const ENDPOINT: Endpoint = Endpoint {
+    base: "127.0.0.1:8080",
+    github: "/api/github",
+    lastfm: "/api/lastfm",
+    letterboxd: "/api/letterboxd",
+    goodreads: "/api/goodreads",
+};
+
+pub struct Endpoint<'a> {
+    pub base: &'a str,
+    pub github: &'a str,
+    pub lastfm: &'a str,
+    pub letterboxd: &'a str,
+    pub goodreads: &'a str,
+}
+
+pub struct Env<'a> {
+    pub username: Username<'a>,
+    pub link: Link<'a>,
+    pub key: Key<'a>,
+}
+
+pub struct Username<'a> {
+    pub github: &'a str,
+    pub lastfm: &'a str,
+    pub letterboxd: &'a str,
+}
+
+pub struct Link<'a> {
+    pub goodreads: &'a str,
+}
+
+pub struct Key<'a> {
+    pub lastfm: &'a str,
+}
diff --git a/frontend/Cargo.toml b/frontend/Cargo.toml
new file mode 100644
index 0000000..c6dc985
--- /dev/null
+++ b/frontend/Cargo.toml
@@ -0,0 +1,19 @@
+[package]
+name = "frontend"
+version = "0.1.0"
+edition = "2021"
+
+# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
+
+[dependencies]
+types = { path = "../types" }
+config = { path = "../config" }
+stylist = { version = "0.13.0", features = ["yew"] }
+yew = { version = "0.21.0", features = ["csr"]}
+wasm-bindgen-futures = "0.4.42"
+url = "2.5.2"
+reqwest = { version = "0.12.5", features = ["json", "blocking"] }
+serde_json = "1.0.117"
+tokio = "1.38.0"
+chrono = "0.4.38"
+chrono-tz = "0.9.0"
diff --git a/frontend/src/components.rs b/frontend/src/components.rs
new file mode 100644
index 0000000..e5d1456
--- /dev/null
+++ b/frontend/src/components.rs
@@ -0,0 +1,5 @@
+pub mod github;
+pub mod goodreads;
+pub mod lastfm;
+pub mod letterboxd;
+pub mod profile;
diff --git a/frontend/src/components/assets/me.jpg b/frontend/src/components/assets/me.jpg
new file mode 100644
index 0000000..ad91445
Binary files /dev/null and b/frontend/src/components/assets/me.jpg differ
diff --git a/frontend/src/components/github.rs b/frontend/src/components/github.rs
new file mode 100644
index 0000000..db0fa3d
--- /dev/null
+++ b/frontend/src/components/github.rs
@@ -0,0 +1,6 @@
+mod button;
+mod card;
+mod row;
+mod scroller;
+
+pub use card::Card;
diff --git a/frontend/src/components/github/button.rs b/frontend/src/components/github/button.rs
new file mode 100644
index 0000000..11d1435
--- /dev/null
+++ b/frontend/src/components/github/button.rs
@@ -0,0 +1,32 @@
+use stylist::yew::styled_component;
+use yew::prelude::*;
+
+#[styled_component]
+pub fn Button() -> Html {
+    let icon_svg = html! {
+        <svg width="60px" height="60px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg">
+            <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                <g id="Dribbble-Light-Preview" transform="translate(-140.000000, -7559.000000)" fill="#fff">
+                    <g id="icons" transform="translate(56.000000, 160.000000)">
+                        <path d="M94,7399 C99.523,7399 104,7403.59 104,7409.253 C104,7413.782 101.138,7417.624 97.167,7418.981 C96.66,7419.082 96.48,7418.762 96.48,7418.489 C96.48,7418.151 96.492,7417.047 96.492,7415.675 C96.492,7414.719 96.172,7414.095 95.813,7413.777 C98.04,7413.523 100.38,7412.656 100.38,7408.718 C100.38,7407.598 99.992,7406.684 99.35,7405.966 C99.454,7405.707 99.797,7404.664 99.252,7403.252 C99.252,7403.252 98.414,7402.977 96.505,7404.303 C95.706,7404.076 94.85,7403.962 94,7403.958 C93.15,7403.962 92.295,7404.076 91.497,7404.303 C89.586,7402.977 88.746,7403.252 88.746,7403.252 C88.203,7404.664 88.546,7405.707 88.649,7405.966 C88.01,7406.684 87.619,7407.598 87.619,7408.718 C87.619,7412.646 89.954,7413.526 92.175,7413.785 C91.889,7414.041 91.63,7414.493 91.54,7415.156 C90.97,7415.418 89.522,7415.871 88.63,7414.304 C88.63,7414.304 88.101,7413.319 87.097,7413.247 C87.097,7413.247 86.122,7413.234 87.029,7413.87 C87.029,7413.87 87.684,7414.185 88.139,7415.37 C88.139,7415.37 88.726,7417.2 91.508,7416.58 C91.513,7417.437 91.522,7418.245 91.522,7418.489 C91.522,7418.76 91.338,7419.077 90.839,7418.982 C86.865,7417.627 84,7413.783 84,7409.253 C84,7403.59 88.478,7399 94,7399" id="github-[#142]">
+
+        </path>
+                    </g>
+                </g>
+            </g>
+    </svg>
+        };
+
+    let onclick = Callback::noop();
+
+    html! {
+        <button class={css!(r#"
+                background: none;
+                border: none;
+                cursor: pointer;
+                border-radius: 50%;
+            "#)} onclick={ onclick }>
+                { icon_svg.clone() }
+        </button>
+    }
+}
diff --git a/frontend/src/components/github/card.rs b/frontend/src/components/github/card.rs
new file mode 100644
index 0000000..992faa3
--- /dev/null
+++ b/frontend/src/components/github/card.rs
@@ -0,0 +1,51 @@
+use super::button::Button;
+use super::scroller::Scroller;
+use stylist::yew::styled_component;
+use yew::prelude::*;
+
+#[styled_component]
+pub fn Card() -> Html {
+    let title = "Recent Commits".to_string();
+    html! {
+    <div>
+        <div class={css!(r#"
+                box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.7);
+                height: 500px;
+                width: 500px;
+                border-radius: 10px;
+
+                display: flex;
+                flex-direction: column;
+
+                padding: 15px;
+                box-sizing: border-box;
+
+                background-color: #161b22;
+            "#)} id="yew-sample-content">
+            <div class={css!(r#"
+                    flex: 1;
+                    display: flex;
+                    align-items: center;
+                    justify-content: left;
+                "#)}>
+                <Button />
+                <h2 class={css!(r#"
+                    margin-left: 20px;
+                    color: #E6EDF3;
+                "#)}>{ title }</h2>
+            </div>
+            <div class={css!(r#"
+                    flex: 3;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    width: 100%;
+                    overflow: hidden;
+                    border-radius: 10px;
+                "#)}>
+                <Scroller />
+            </div>
+        </div>
+    </div>
+    }
+}
diff --git a/frontend/src/components/github/row.rs b/frontend/src/components/github/row.rs
new file mode 100644
index 0000000..a5fa14f
--- /dev/null
+++ b/frontend/src/components/github/row.rs
@@ -0,0 +1,66 @@
+use stylist::yew::styled_component;
+use yew::prelude::*;
+
+use types::Commit;
+
+#[styled_component]
+pub fn Row(props: &Commit) -> Html {
+    let Commit {
+        message,
+        url,
+        repository_name,
+        repository_link,
+    } = props;
+
+    let repo_svg = html! {
+        <svg fill="#89929b" width="16px" height="16px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+            <path fill-rule="evenodd" d="M3 2.75A2.75 2.75 0 015.75 0h14.5a.75.75 0 01.75.75v20.5a.75.75 0 01-.75.75h-6a.75.75 0 010-1.5h5.25v-4H6A1.5 1.5 0 004.5 18v.75c0 .716.43 1.334 1.05 1.605a.75.75 0 01-.6 1.374A3.25 3.25 0 013 18.75v-16zM19.5 1.5V15H6c-.546 0-1.059.146-1.5.401V2.75c0-.69.56-1.25 1.25-1.25H19.5z"/>
+            <path d="M7 18.25a.25.25 0 01.25-.25h5a.25.25 0 01.25.25v5.01a.25.25 0 01-.397.201l-2.206-1.604a.25.25 0 00-.294 0L7.397 23.46a.25.25 0 01-.397-.2v-5.01z"/>
+        </svg>
+    };
+
+    html! {
+        <div class={css!(r#"
+            width: 100%;
+            display: flex;
+            flex-direction: column;
+            padding: 10px;
+            border-bottom: 1px solid #8D96A0;
+            box-sizing: border-box;
+            background-color: none;
+            &:hover {
+                border-radius: 5px;
+                background-color: #2A3D52;
+            }
+        "#)}>
+            <div class={css!(r#"
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+            "#)}>
+                <a href={url.to_string().clone()} class={css!(r#"
+                    color: #ecf2f8;
+                    text-decoration: none;
+                "#)}>
+                    { message }
+                </a>
+                <div class={css!(r#"
+                    display: flex;
+                    align-items: top-center;
+                "#)}>
+                    <a href={repository_link.to_string().clone()} class={css!(r#"
+                        color: #77bdfb;
+                        text-decoration: none;
+                        margin-right: 5px;
+                        margin-left: 15px;
+                        overflow: hidden;
+                        white-space: nowrap;
+                    "#)}>
+                        { repository_name }
+                    </a>
+                    { repo_svg.clone() }
+                </div>
+            </div>
+        </div>
+    }
+}
diff --git a/frontend/src/components/github/scroller.rs b/frontend/src/components/github/scroller.rs
new file mode 100644
index 0000000..7115d38
--- /dev/null
+++ b/frontend/src/components/github/scroller.rs
@@ -0,0 +1,60 @@
+use super::row::Row;
+use config::ENDPOINT;
+use reqwest;
+use stylist::yew::styled_component;
+use types::Commit;
+use yew::prelude::*;
+
+#[styled_component]
+pub fn Scroller() -> Html {
+    #[allow(clippy::redundant_closure)]
+    let commits = use_state(|| std::vec::Vec::new());
+    {
+        let commits = commits.clone();
+        use_effect_with((), move |()| {
+            let commits = commits.clone();
+            wasm_bindgen_futures::spawn_local(async move {
+                let response = reqwest::get(format!("http://{}{}", ENDPOINT.base, ENDPOINT.github))
+                    .await
+                    .unwrap();
+                let fetched_commits: Vec<Commit> = response.json().await.unwrap();
+                commits.set(fetched_commits);
+            });
+            || ()
+        });
+    }
+
+    html! {
+        <div class={css!(r#"
+            width: 100%;
+            height: 100%;
+            border-radius: 10px;
+
+            background: #21262d;
+
+            padding: 15px;
+            box-sizing: border-box;
+
+            box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.7);
+            color: white;
+
+            display: flex;
+            flex-direction: column;
+
+            overflow-y: auto;
+            overflow-x: hidden;
+            box-sizing: border-box;
+
+            /* Hide scrollbar for Webkit browsers (Chrome, Safari) */
+            &::-webkit-scrollbar {
+                display: none;
+            }
+
+            /* Hide scrollbar for Firefox */
+            scrollbar-width: none;
+            -ms-overflow-style: none; /* Internet Explorer 10+ */
+        "#)}>
+            { commits.iter().map(|commit| html! { <Row ..commit.clone() /> }).collect::<Vec<_>>() }
+        </div>
+    }
+}
diff --git a/frontend/src/components/goodreads.rs b/frontend/src/components/goodreads.rs
new file mode 100644
index 0000000..db0fa3d
--- /dev/null
+++ b/frontend/src/components/goodreads.rs
@@ -0,0 +1,6 @@
+mod button;
+mod card;
+mod row;
+mod scroller;
+
+pub use card::Card;
diff --git a/frontend/src/components/goodreads/button.rs b/frontend/src/components/goodreads/button.rs
new file mode 100644
index 0000000..de71b93
--- /dev/null
+++ b/frontend/src/components/goodreads/button.rs
@@ -0,0 +1,24 @@
+use stylist::yew::styled_component;
+use yew::prelude::*;
+
+#[styled_component]
+pub fn Button() -> Html {
+    let icon_svg = html! {
+        <svg fill="#382110" width="60px" height="60px" viewBox="0 0 24 24" role="img" xmlns="http://www.w3.org/2000/svg">
+            <path d="M19.525 15.977V.49h-2.059v2.906h-.064c-.211-.455-.481-.891-.842-1.307-.36-.412-.767-.777-1.232-1.094-.466-.314-.962-.561-1.519-.736C13.256.09 12.669 0 12.038 0c-1.21 0-2.3.225-3.246.67-.947.447-1.743 1.057-2.385 1.83-.642.773-1.133 1.676-1.47 2.711-.336 1.037-.506 2.129-.506 3.283 0 1.199.141 2.326.425 3.382.286 1.057.737 1.976 1.368 2.762.631.78 1.412 1.397 2.375 1.833.961.436 2.119.661 3.471.661 1.248 0 2.33-.315 3.262-.946s1.638-1.473 2.119-2.525h.061v2.284c0 2.044-.421 3.607-1.264 4.705-.84 1.081-2.224 1.638-4.146 1.638-.572 0-1.128-.061-1.669-.181-.542-.12-1.036-.315-1.487-.57-.437-.271-.827-.601-1.143-1.038-.316-.435-.526-.961-.632-1.593H5.064c.067.887.315 1.654.737 2.3.424.646.961 1.172 1.602 1.593.641.406 1.367.706 2.172.902.811.194 1.639.3 2.494.3 1.383 0 2.541-.195 3.486-.555.947-.376 1.714-.902 2.301-1.608.601-.708 1.021-1.549 1.293-2.556.27-1.007.42-2.134.42-3.367l-.044.062zm-7.484-.557c-.955 0-1.784-.189-2.479-.571-.697-.38-1.277-.882-1.732-1.503-.467-.621-.797-1.332-1.022-2.139s-.332-1.633-.332-2.484c0-.871.105-1.725.301-2.563.21-.84.54-1.587.992-2.24.451-.652 1.037-1.182 1.728-1.584s1.533-.605 2.51-.605 1.803.209 2.495.621c.676.415 1.247.959 1.683 1.634.436.677.751 1.429.947 2.255.195.826.285 1.656.285 2.482 0 .852-.12 1.678-.345 2.484-.226.807-.572 1.518-1.038 2.139-.465.621-1.021 1.123-1.698 1.503-.676.382-1.458.571-2.359.571h.064z"/>
+        </svg>
+    };
+
+    let onclick = Callback::noop();
+
+    html! {
+        <button class={css!(r#"
+                background: none;
+                border: none;
+                cursor: pointer;
+                border-radius: 50%;
+            "#)} onclick={ onclick }>
+                { icon_svg.clone() }
+        </button>
+    }
+}
diff --git a/frontend/src/components/goodreads/card.rs b/frontend/src/components/goodreads/card.rs
new file mode 100644
index 0000000..606a01f
--- /dev/null
+++ b/frontend/src/components/goodreads/card.rs
@@ -0,0 +1,51 @@
+use super::button::Button;
+use super::scroller::Scroller;
+use stylist::yew::styled_component;
+use yew::prelude::*;
+
+#[styled_component]
+pub fn Card() -> Html {
+    let title = "Recently Read".to_string();
+    html! {
+    <div>
+        <div class={css!(r#"
+                box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.7);
+                height: 500px;
+                width: 500px;
+                border-radius: 10px;
+
+                display: flex;
+                flex-direction: column;
+
+                padding: 15px;
+                box-sizing: border-box;
+
+                background-color: #F4F1EA;
+            "#)} id="yew-sample-content">
+            <div class={css!(r#"
+                    flex: 1;
+                    display: flex;
+                    align-items: center;
+                    justify-content: left;
+                "#)}>
+                <Button />
+                <h2 class={css!(r#"
+                    margin-left: 20px;
+                    color: #222222;
+                "#)}>{ title }</h2>
+            </div>
+            <div class={css!(r#"
+                    flex: 3;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    width: 100%;
+                    overflow: hidden;
+                    border-radius: 10px;
+                "#)}>
+                <Scroller />
+            </div>
+        </div>
+    </div>
+    }
+}
diff --git a/frontend/src/components/goodreads/row.rs b/frontend/src/components/goodreads/row.rs
new file mode 100644
index 0000000..a818ebb
--- /dev/null
+++ b/frontend/src/components/goodreads/row.rs
@@ -0,0 +1,72 @@
+use stylist::yew::styled_component;
+use yew::prelude::*;
+
+use types::Book;
+
+#[styled_component]
+pub fn Row(props: &Book) -> Html {
+    let Book {
+        title,
+        author,
+        rating,
+        title_url,
+        author_url,
+        cover_url,
+    } = props;
+
+    html! {
+        <div class={css!(r#"
+            width: 100%;
+            display: flex;
+            flex-direction: column;
+            padding: 10px;
+            border-bottom: 1px solid #EBE8D5;
+            box-sizing: border-box;
+            background-color: none;
+            &:hover {
+                border-radius: 5px;
+                background-color: #DCD6CC;
+            }
+        "#)}>
+            <div class={css!(r#"
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+            "#)}>
+                <img src={ cover_url.clone() } alt="Poster" class={css!(r#"
+                    border-radius: 5px;
+                    width: 35px;
+                    height: auto;
+                "#)} />
+                    <div class={css!(r#"
+                        display: flex;
+                        flex-direction: column;
+                        flex-grow: 1;
+                        margin-left: 25px;
+                        margin-right: 25px;
+                    "#)}>
+                    <a href={ title_url.clone() } class={css!(r#"
+                        color: #00635D;
+                        text-decoration: none;
+                        margin-bottom: 8px;
+                    "#)}>
+                        { title }
+                    </a>
+                    <a href={ author_url.clone() } class={css!(r#"
+                        color: #999999;
+                        text-decoration: none;
+                    "#)}>
+                        { author }
+                    </a>
+                </div>
+                <a class={css!(r#"
+                    display: flex;
+                    align-items: center;
+                    color: #F5A623;
+                "#)}>
+                    { rating }
+                </a>
+            </div>
+        </div>
+    }
+}
diff --git a/frontend/src/components/goodreads/scroller.rs b/frontend/src/components/goodreads/scroller.rs
new file mode 100644
index 0000000..49d8bbe
--- /dev/null
+++ b/frontend/src/components/goodreads/scroller.rs
@@ -0,0 +1,60 @@
+use super::row::Row;
+use config::ENDPOINT;
+use stylist::yew::styled_component;
+use types::Book;
+use yew::prelude::*;
+
+#[styled_component]
+pub fn Scroller() -> Html {
+    #[allow(clippy::redundant_closure)]
+    let books = use_state(|| std::vec::Vec::new());
+    {
+        let books = books.clone();
+        use_effect_with((), move |()| {
+            let books = books.clone();
+            wasm_bindgen_futures::spawn_local(async move {
+                let response =
+                    reqwest::get(format!("http://{}{}", ENDPOINT.base, ENDPOINT.goodreads))
+                        .await
+                        .unwrap();
+                let fetched_books: Vec<Book> = response.json().await.unwrap();
+                books.set(fetched_books);
+            });
+            || ()
+        });
+    }
+
+    html! {
+        <div class={css!(r#"
+            width: 100%;
+            height: 100%;
+            border-radius: 10px;
+
+            background: #FFFFFF;
+
+            padding: 15px;
+            box-sizing: border-box;
+
+            box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.7);
+            color: white;
+
+            display: flex;
+            flex-direction: column;
+
+            overflow-y: auto;
+            overflow-x: hidden;
+            box-sizing: border-box;
+
+            /* Hide scrollbar for Webkit browsers (Chrome, Safari) */
+            &::-webkit-scrollbar {
+                display: none;
+            }
+
+            /* Hide scrollbar for Firefox */
+            scrollbar-width: none;
+            -ms-overflow-style: none; /* Internet Explorer 10+ */
+        "#)}>
+            { books.iter().map(|book| html! { <Row ..book.clone() /> }).collect::<Vec<_>>() }
+        </div>
+    }
+}
diff --git a/frontend/src/components/lastfm.rs b/frontend/src/components/lastfm.rs
new file mode 100644
index 0000000..db0fa3d
--- /dev/null
+++ b/frontend/src/components/lastfm.rs
@@ -0,0 +1,6 @@
+mod button;
+mod card;
+mod row;
+mod scroller;
+
+pub use card::Card;
diff --git a/frontend/src/components/lastfm/button.rs b/frontend/src/components/lastfm/button.rs
new file mode 100644
index 0000000..1a8a084
--- /dev/null
+++ b/frontend/src/components/lastfm/button.rs
@@ -0,0 +1,24 @@
+use stylist::yew::styled_component;
+use yew::prelude::*;
+
+#[styled_component]
+pub fn Button() -> Html {
+    let icon_svg = html! {
+        <svg fill="#BA0000" width="60px" height="60px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+          <path d="M14.131 22.948l-1.172-3.193c0 0-1.912 2.131-4.771 2.131-2.537 0-4.333-2.203-4.333-5.729 0-4.511 2.276-6.125 4.515-6.125 3.224 0 4.245 2.089 5.125 4.772l1.161 3.667c1.161 3.561 3.365 6.421 9.713 6.421 4.548 0 7.631-1.391 7.631-5.068 0-2.968-1.697-4.511-4.844-5.244l-2.344-0.511c-1.624-0.371-2.104-1.032-2.104-2.131 0-1.249 0.985-1.984 2.604-1.984 1.767 0 2.704 0.661 2.865 2.24l3.661-0.444c-0.297-3.301-2.584-4.656-6.323-4.656-3.308 0-6.532 1.251-6.532 5.245 0 2.5 1.204 4.077 4.245 4.807l2.484 0.589c1.865 0.443 2.484 1.224 2.484 2.287 0 1.359-1.323 1.921-3.828 1.921-3.703 0-5.244-1.943-6.124-4.625l-1.204-3.667c-1.541-4.765-4.005-6.531-8.891-6.531-5.287-0.016-8.151 3.385-8.151 9.192 0 5.573 2.864 8.595 8.005 8.595 4.14 0 6.125-1.943 6.125-1.943z"/>
+        </svg>
+    };
+
+    let onclick = Callback::noop();
+
+    html! {
+        <button class={css!(r#"
+                background: none;
+                border: none;
+                cursor: pointer;
+                border-radius: 50%;
+            "#)} onclick={ onclick }>
+                { icon_svg.clone() }
+        </button>
+    }
+}
diff --git a/frontend/src/components/lastfm/card.rs b/frontend/src/components/lastfm/card.rs
new file mode 100644
index 0000000..515ae9d
--- /dev/null
+++ b/frontend/src/components/lastfm/card.rs
@@ -0,0 +1,51 @@
+use super::button::Button;
+use super::scroller::Scroller;
+use stylist::yew::styled_component;
+use yew::prelude::*;
+
+#[styled_component]
+pub fn Card() -> Html {
+    let title = "Scrobbles".to_string();
+    html! {
+    <div>
+        <div class={css!(r#"
+                box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.7);
+                height: 500px;
+                width: 500px;
+                border-radius: 10px;
+
+                display: flex;
+                flex-direction: column;
+
+                padding: 15px;
+                box-sizing: border-box;
+
+                background-color: #F9F9F9;
+            "#)} id="yew-sample-content">
+            <div class={css!(r#"
+                    flex: 1;
+                    display: flex;
+                    align-items: center;
+                    justify-content: left;
+                "#)}>
+                <Button />
+                <h2 class={css!(r#"
+                    margin-left: 20px;
+                    color: #222222;
+                "#)}>{ title }</h2>
+            </div>
+            <div class={css!(r#"
+                    flex: 3;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    width: 100%;
+                    overflow: hidden;
+                    border-radius: 10px;
+                "#)}>
+                <Scroller />
+            </div>
+        </div>
+    </div>
+    }
+}
diff --git a/frontend/src/components/lastfm/row.rs b/frontend/src/components/lastfm/row.rs
new file mode 100644
index 0000000..1cd3a18
--- /dev/null
+++ b/frontend/src/components/lastfm/row.rs
@@ -0,0 +1,82 @@
+use stylist::yew::styled_component;
+use yew::prelude::*;
+
+use types::Song;
+
+#[styled_component]
+pub fn Row(props: &Song) -> Html {
+    let Song {
+        title,
+        artist_name,
+        album_name: _,
+        album_image,
+        url,
+    } = props;
+
+    let play_svg = html! {
+        <svg width="16px" height="16px" viewBox="-1 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg">
+            <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                <g id="Dribbble-Light-Preview" transform="translate(-65.000000, -3803.000000)" fill="#000000">
+                    <g id="icons" transform="translate(56.000000, 160.000000)">
+                        <path d="M18.074,3650.7335 L12.308,3654.6315 C10.903,3655.5815 9,3654.5835 9,3652.8985 L9,3645.1015 C9,3643.4155 10.903,3642.4185 12.308,3643.3685 L18.074,3647.2665 C19.306,3648.0995 19.306,3649.9005 18.074,3650.7335" id="play-[#1000]">
+                        </path>
+                    </g>
+                </g>
+            </g>
+        </svg>
+    };
+
+    html! {
+        <div class={css!(r#"
+            width: 100%;
+            display: flex;
+            flex-direction: column;
+            padding: 10px;
+            border-bottom: 1px solid #8D96A0;
+            box-sizing: border-box;
+            background-color: none;
+            &:hover {
+                border-radius: 5px;
+                background-color: #EDDFDE;
+            }
+        "#)}>
+            <div class={css!(r#"
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+            "#)}>
+                <img src={album_image.to_string()} alt="Album Image" class={css!(r#"
+                    border-radius: 5px;
+                    width: 30px;
+                    height: auto;
+                "#)} />
+                    <div class={css!(r#"
+                        display: flex;
+                        flex-direction: column;
+                        flex-grow: 1;
+                        margin-left: 25px;
+                        margin-right: 25px;
+                    "#)}>
+                    <a class={css!(r#"
+                        color: #222222;
+                        text-decoration: none;
+                    "#)}>
+                        { format!("{title}") }
+                    </a>
+                    <a class={css!(r#"
+                        color: #666666;
+                        text-decoration: none;
+                    "#)}>
+                        { format!("{artist_name}") }
+                    </a>
+                </div>
+                <a href={url.clone()} class={css!(r#"
+                    display: flex;
+                    align-items: center;
+                "#)}>
+                    { play_svg.clone() }
+                </a>
+            </div>
+        </div>
+    }
+}
diff --git a/frontend/src/components/lastfm/scroller.rs b/frontend/src/components/lastfm/scroller.rs
new file mode 100644
index 0000000..76ad8fc
--- /dev/null
+++ b/frontend/src/components/lastfm/scroller.rs
@@ -0,0 +1,59 @@
+use super::row::Row;
+use config::ENDPOINT;
+use stylist::yew::styled_component;
+use types::Song;
+use yew::prelude::*;
+
+#[styled_component]
+pub fn Scroller() -> Html {
+    #[allow(clippy::redundant_closure)]
+    let songs = use_state(|| std::vec::Vec::new());
+    {
+        let songs = songs.clone();
+        use_effect_with((), move |()| {
+            let songs = songs.clone();
+            wasm_bindgen_futures::spawn_local(async move {
+                let response = reqwest::get(format!("http://{}{}", ENDPOINT.base, ENDPOINT.lastfm))
+                    .await
+                    .unwrap();
+                let fetched_songs: Vec<Song> = response.json().await.unwrap();
+                songs.set(fetched_songs);
+            });
+            || ()
+        });
+    }
+
+    html! {
+        <div class={css!(r#"
+            width: 100%;
+            height: 100%;
+            border-radius: 10px;
+
+            background: #FFFFFF;
+
+            padding: 15px;
+            box-sizing: border-box;
+
+            box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.7);
+            color: white;
+
+            display: flex;
+            flex-direction: column;
+
+            overflow-y: auto;
+            overflow-x: hidden;
+            box-sizing: border-box;
+
+            /* Hide scrollbar for Webkit browsers (Chrome, Safari) */
+            &::-webkit-scrollbar {
+                display: none;
+            }
+
+            /* Hide scrollbar for Firefox */
+            scrollbar-width: none;
+            -ms-overflow-style: none; /* Internet Explorer 10+ */
+        "#)}>
+            { songs.iter().map(|commit| html! { <Row ..commit.clone() /> }).collect::<Vec<_>>() }
+        </div>
+    }
+}
diff --git a/frontend/src/components/letterboxd.rs b/frontend/src/components/letterboxd.rs
new file mode 100644
index 0000000..db0fa3d
--- /dev/null
+++ b/frontend/src/components/letterboxd.rs
@@ -0,0 +1,6 @@
+mod button;
+mod card;
+mod row;
+mod scroller;
+
+pub use card::Card;
diff --git a/frontend/src/components/letterboxd/button.rs b/frontend/src/components/letterboxd/button.rs
new file mode 100644
index 0000000..9d54e24
--- /dev/null
+++ b/frontend/src/components/letterboxd/button.rs
@@ -0,0 +1,51 @@
+use stylist::yew::styled_component;
+use yew::prelude::*;
+
+#[styled_component]
+pub fn Button() -> Html {
+    let icon_svg = html! {
+        <svg width="60px" height="60px" viewBox="0 0 500 500" version="1.1" xmlns="http://www.w3.org/2000/svg">
+            <defs>
+                <rect id="path-1" x="0" y="0" width="129.847328" height="141.389313"></rect>
+                <rect id="path-3" x="0" y="0" width="129.847328" height="141.389313"></rect>
+            </defs>
+            <g id="letterboxd-decal-dots-neg-rgb" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                <circle id="Circle" fill="#202830" cx="250" cy="250" r="250"></circle>
+                <g id="dots-pos" transform="translate(61.000000, 180.000000)">
+                    <g id="Dots">
+                        <ellipse id="Green" fill="#00E054" cx="189" cy="69.9732824" rx="70.0786517" ry="69.9732824"></ellipse>
+                        <g id="Blue" transform="translate(248.152672, 0.000000)">
+                            <mask id="mask-2" fill="white">
+                                <use href="#path-1"></use>
+                            </mask>
+                            <g id="Mask"></g>
+                            <ellipse fill="#40BCF4" mask="url(#mask-2)" cx="59.7686766" cy="69.9732824" rx="70.0786517" ry="69.9732824"></ellipse>
+                        </g>
+                        <g id="Orange">
+                            <mask id="mask-4" fill="white">
+                                <use href="#path-3"></use>
+                            </mask>
+                            <g id="Mask"></g>
+                            <ellipse fill="#FF8000" mask="url(#mask-4)" cx="70.0786517" cy="69.9732824" rx="70.0786517" ry="69.9732824"></ellipse>
+                        </g>
+                        <path d="M129.539326,107.022244 C122.810493,96.2781677 118.921348,83.5792213 118.921348,69.9732824 C118.921348,56.3673435 122.810493,43.6683972 129.539326,32.9243209 C136.268159,43.6683972 140.157303,56.3673435 140.157303,69.9732824 C140.157303,83.5792213 136.268159,96.2781677 129.539326,107.022244 Z" id="Overlap" fill="#556677"></path>
+                        <path d="M248.460674,32.9243209 C255.189507,43.6683972 259.078652,56.3673435 259.078652,69.9732824 C259.078652,83.5792213 255.189507,96.2781677 248.460674,107.022244 C241.731841,96.2781677 237.842697,83.5792213 237.842697,69.9732824 C237.842697,56.3673435 241.731841,43.6683972 248.460674,32.9243209 Z" id="Overlap" fill="#556677"></path>
+                    </g>
+                </g>
+            </g>
+        </svg>
+    };
+
+    let onclick = Callback::noop();
+
+    html! {
+        <button class={css!(r#"
+                background: none;
+                border: none;
+                cursor: pointer;
+                border-radius: 50%;
+            "#)} onclick={ onclick }>
+                { icon_svg.clone() }
+        </button>
+    }
+}
diff --git a/frontend/src/components/letterboxd/card.rs b/frontend/src/components/letterboxd/card.rs
new file mode 100644
index 0000000..96cbf92
--- /dev/null
+++ b/frontend/src/components/letterboxd/card.rs
@@ -0,0 +1,51 @@
+use super::button::Button;
+use super::scroller::Scroller;
+use stylist::yew::styled_component;
+use yew::prelude::*;
+
+#[styled_component]
+pub fn Card() -> Html {
+    let title = "Recently Watched".to_string();
+    html! {
+    <div>
+        <div class={css!(r#"
+                box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.7);
+                height: 500px;
+                width: 500px;
+                border-radius: 10px;
+
+                display: flex;
+                flex-direction: column;
+
+                padding: 15px;
+                box-sizing: border-box;
+
+                background-color: #14181c;
+            "#)} id="yew-sample-content">
+            <div class={css!(r#"
+                    flex: 1;
+                    display: flex;
+                    align-items: center;
+                    justify-content: left;
+                "#)}>
+                <Button />
+                <h2 class={css!(r#"
+                    margin-left: 20px;
+                    color: #FFFFFF;
+                "#)}>{ title }</h2>
+            </div>
+            <div class={css!(r#"
+                    flex: 3;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    width: 100%;
+                    overflow: hidden;
+                    border-radius: 10px;
+                "#)}>
+                <Scroller />
+            </div>
+        </div>
+    </div>
+    }
+}
diff --git a/frontend/src/components/letterboxd/row.rs b/frontend/src/components/letterboxd/row.rs
new file mode 100644
index 0000000..ec21e86
--- /dev/null
+++ b/frontend/src/components/letterboxd/row.rs
@@ -0,0 +1,71 @@
+use stylist::yew::styled_component;
+use yew::prelude::*;
+
+use types::Movie;
+
+#[styled_component]
+pub fn Row(props: &Movie) -> Html {
+    let Movie {
+        title,
+        rating,
+        release_year,
+        url,
+        poster_url,
+    } = props;
+
+    html! {
+        <div class={css!(r#"
+            width: 100%;
+            display: flex;
+            flex-direction: column;
+            padding: 10px;
+            border-bottom: 1px solid #445566;
+            box-sizing: border-box;
+            background-color: none;
+            &:hover {
+                border-radius: 5px;
+                background-color: #2C3440;
+            }
+        "#)}>
+            <div class={css!(r#"
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+            "#)}>
+                <img src={ poster_url.clone() } alt="Poster" class={css!(r#"
+                    border-radius: 5px;
+                    width: 70px;
+                    height: auto;
+                "#)} />
+                    <div class={css!(r#"
+                        display: flex;
+                        flex-direction: column;
+                        flex-grow: 1;
+                        margin-left: 25px;
+                        margin-right: 25px;
+                    "#)}>
+                    <a href={url.clone()} class={css!(r#"
+                        color: #FFFFFF;
+                        text-decoration: none;
+                        margin-bottom: 8px;
+                    "#)}>
+                        { title }
+                    </a>
+                    <a class={css!(r#"
+                        color: #667788;
+                        text-decoration: none;
+                    "#)}>
+                        { release_year }
+                    </a>
+                </div>
+                <a class={css!(r#"
+                    display: flex;
+                    align-items: center;
+                    color: #00C030;
+                "#)}>
+                    { rating }
+                </a>
+            </div>
+        </div>
+    }
+}
diff --git a/frontend/src/components/letterboxd/scroller.rs b/frontend/src/components/letterboxd/scroller.rs
new file mode 100644
index 0000000..5c20c4d
--- /dev/null
+++ b/frontend/src/components/letterboxd/scroller.rs
@@ -0,0 +1,60 @@
+use super::row::Row;
+use config::ENDPOINT;
+use stylist::yew::styled_component;
+use types::Movie;
+use yew::prelude::*;
+
+#[styled_component]
+pub fn Scroller() -> Html {
+    #[allow(clippy::redundant_closure)]
+    let movies = use_state(|| std::vec::Vec::new());
+    {
+        let movies = movies.clone();
+        use_effect_with((), move |()| {
+            let movies = movies.clone();
+            wasm_bindgen_futures::spawn_local(async move {
+                let response =
+                    reqwest::get(format!("http://{}{}", ENDPOINT.base, ENDPOINT.letterboxd))
+                        .await
+                        .unwrap();
+                let fetched_movies: Vec<Movie> = response.json().await.unwrap();
+                movies.set(fetched_movies);
+            });
+            || ()
+        });
+    }
+
+    html! {
+        <div class={css!(r#"
+            width: 100%;
+            height: 100%;
+            border-radius: 10px;
+
+            background: #21282F;
+
+            padding: 15px;
+            box-sizing: border-box;
+
+            box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.7);
+            color: white;
+
+            display: flex;
+            flex-direction: column;
+
+            overflow-y: auto;
+            overflow-x: hidden;
+            box-sizing: border-box;
+
+            /* Hide scrollbar for Webkit browsers (Chrome, Safari) */
+            &::-webkit-scrollbar {
+                display: none;
+            }
+
+            /* Hide scrollbar for Firefox */
+            scrollbar-width: none;
+            -ms-overflow-style: none; /* Internet Explorer 10+ */
+        "#)}>
+            { movies.iter().map(|movie| html! { <Row ..movie.clone() /> }).collect::<Vec<_>>() }
+        </div>
+    }
+}
diff --git a/frontend/src/components/profile.rs b/frontend/src/components/profile.rs
new file mode 100644
index 0000000..ac8b117
--- /dev/null
+++ b/frontend/src/components/profile.rs
@@ -0,0 +1,4 @@
+mod card;
+mod row;
+
+pub use card::Card;
diff --git a/frontend/src/components/profile/card.rs b/frontend/src/components/profile/card.rs
new file mode 100644
index 0000000..82d4216
--- /dev/null
+++ b/frontend/src/components/profile/card.rs
@@ -0,0 +1,117 @@
+use chrono::{Datelike, Local, TimeZone, Utc};
+use chrono_tz::US::Pacific;
+use stylist::yew::styled_component;
+use yew::prelude::*;
+
+fn age() -> i32 {
+    let now = Local::now();
+    let birthday = Local.with_ymd_and_hms(2003, 2, 24, 0, 0, 0).unwrap();
+    let age = now.year() - birthday.year();
+
+    if now.month() < birthday.month()
+        || (now.month() == birthday.month() && now.day() < birthday.day())
+    {
+        age - 1
+    } else {
+        age
+    }
+}
+
+#[styled_component]
+pub fn Card() -> Html {
+    let cake_svg = html! {
+        <svg xmlns="http://www.w3.org/2000/svg" fill="#2A2A37" width="24px" height="24px" viewBox="0 0 24 24">
+            <path d="M12 6c1.11 0 2-.9 2-2 0-.38-.1-.73-.29-1.03L12 0l-1.71 2.97c-.19.3-.29.65-.29 1.03 0 1.1.9 2 2 2zm4.6 9.99l-1.07-1.07-1.08 1.07c-1.3 1.3-3.58 1.31-4.89 0l-1.07-1.07-1.09 1.07C6.75 16.64 5.88 17 4.96 17c-.73 0-1.4-.23-1.96-.61V21c0 .55.45 1 1 1h16c.55 0 1-.45 1-1v-4.61c-.56.38-1.23.61-1.96.61-.92 0-1.79-.36-2.44-1.01zM18 9h-5V7h-2v2H6c-1.66 0-3 1.34-3 3v1.54c0 1.08.88 1.96 1.96 1.96.52 0 1.02-.2 1.38-.57l2.14-2.13 2.13 2.13c.74.74 2.03.74 2.77 0l2.14-2.13 2.13 2.13c.37.37.86.57 1.38.57 1.08 0 1.96-.88 1.96-1.96V12C21 10.34 19.66 9 18 9z"/>
+        </svg>
+    };
+
+    let clock_svg = html! {
+        <svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M12 7V12L14.5 10.5M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="#2A2A37" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+    };
+
+    html! {
+        <div>
+            <div class={css!(r#"
+                box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.7);
+                height: 400px;
+                width: 300px;
+                border-radius: 10px;
+
+                display: flex;
+                flex-direction: column;
+
+                padding: 30px;
+                box-sizing: border-box;
+
+                background-color: #766b90;
+            "#)} id="yew-sample-content">
+                <div class={css!(r#"
+                    flex: 1;
+                    display: flex;
+                    flex-direction: column;
+                    align-items: center;
+                    justify-content: top;
+                    gap: 10px;
+                "#)}>
+                    <img src="/assets/me.jpg" alt="Profile Image" class={css!(r#"
+                        width: 150px;
+                        height: 150px;
+                        border-radius: 50%;
+                        margin-bottom: 10px;
+                        border: 2px solid #2A2A37;
+                    "#)} />
+                    <div class={css!(r#"
+                        font-size: 30px;
+                        font-weight: 900;
+                        color: #DCD7BA;
+                        "#)}>
+                        { "Wyatt" }
+                    </div>
+                    <div class={css!(r#"
+                        font-size: 18px;
+                        font-weight: 600;
+                        color: #DCD7BA;
+                        "#)}>
+                        { "he/him" }
+                    </div>
+                    <div class={css!(r#"
+                        width: 80%;
+                        height: 1px;
+                        background-color: #2A2A37;
+                        margin: 15px 0;
+                    "#)}>
+                    </div>
+                    <div class={css!(r#"
+                        font-size: 20px;
+                        font-weight: 400;
+                        color: #DCD7BA;
+                        text-align: center;
+                        display: flex;
+                        flex-direction: column;
+                        align-items: center;
+                        gap: 10px;
+                    "#)}>
+                        <div class={css!(r#"
+                            display: flex;
+                            align-items: center;
+                            gap: 5px;
+                        "#)}>
+                            { cake_svg }
+                            { age() }
+                        </div>
+                        <div class={css!(r#"
+                            display: flex;
+                            align-items: center;
+                            gap: 5px;
+                        "#)}>
+                            { clock_svg }
+                            { Utc::now().with_timezone(&Pacific).format("%H:%M %p") }
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    }
+}
diff --git a/frontend/src/components/profile/row.rs b/frontend/src/components/profile/row.rs
new file mode 100644
index 0000000..a818ebb
--- /dev/null
+++ b/frontend/src/components/profile/row.rs
@@ -0,0 +1,72 @@
+use stylist::yew::styled_component;
+use yew::prelude::*;
+
+use types::Book;
+
+#[styled_component]
+pub fn Row(props: &Book) -> Html {
+    let Book {
+        title,
+        author,
+        rating,
+        title_url,
+        author_url,
+        cover_url,
+    } = props;
+
+    html! {
+        <div class={css!(r#"
+            width: 100%;
+            display: flex;
+            flex-direction: column;
+            padding: 10px;
+            border-bottom: 1px solid #EBE8D5;
+            box-sizing: border-box;
+            background-color: none;
+            &:hover {
+                border-radius: 5px;
+                background-color: #DCD6CC;
+            }
+        "#)}>
+            <div class={css!(r#"
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+            "#)}>
+                <img src={ cover_url.clone() } alt="Poster" class={css!(r#"
+                    border-radius: 5px;
+                    width: 35px;
+                    height: auto;
+                "#)} />
+                    <div class={css!(r#"
+                        display: flex;
+                        flex-direction: column;
+                        flex-grow: 1;
+                        margin-left: 25px;
+                        margin-right: 25px;
+                    "#)}>
+                    <a href={ title_url.clone() } class={css!(r#"
+                        color: #00635D;
+                        text-decoration: none;
+                        margin-bottom: 8px;
+                    "#)}>
+                        { title }
+                    </a>
+                    <a href={ author_url.clone() } class={css!(r#"
+                        color: #999999;
+                        text-decoration: none;
+                    "#)}>
+                        { author }
+                    </a>
+                </div>
+                <a class={css!(r#"
+                    display: flex;
+                    align-items: center;
+                    color: #F5A623;
+                "#)}>
+                    { rating }
+                </a>
+            </div>
+        </div>
+    }
+}
diff --git a/frontend/src/main.rs b/frontend/src/main.rs
new file mode 100644
index 0000000..dab8175
--- /dev/null
+++ b/frontend/src/main.rs
@@ -0,0 +1,80 @@
+mod components;
+
+use stylist::yew::{styled_component, Global};
+use yew::prelude::*;
+
+#[styled_component]
+pub fn App() -> Html {
+    html! {
+        <div>
+            // Global Styles can be applied with <Global /> component.
+            <Global css={css!(r#"
+                    html, body {
+                        font-family: sans-serif;
+
+                        padding: 50px;
+                        margin: 0;
+
+                        display: flex;
+                        justify-content: center;
+                        align-items: center;
+                        min-height: 100vh;
+                        flex-direction: column;
+
+                        background-color: #a09cac;
+                    }
+                "#)} />
+                <div class={css!(r#"
+                    display: flex;
+                    flex-direction: column;
+                    align-items: center;
+                    gap: 100px;
+                "#)}>
+                    <div class={css!(r#"
+                        display: flex;
+                        justify-content: center;
+                        align-items: center;
+                        flex-direction: row;
+
+                        @media screen and (max-width: 1500px) {
+                            flex-direction: column;
+                        }
+                    "#)}>
+                        <components::profile::Card />
+                    </div>
+                    <div class={css!(r#"
+                        display: flex;
+                        justify-content: center;
+                        align-items: center;
+                        flex-direction: row;
+                        gap: 100px;
+
+                        @media screen and (max-width: 1500px) {
+                            flex-direction: column;
+                        }
+                    "#)}>
+                        <components::github::Card />
+                        <components::lastfm::Card />
+                    </div>
+                    <div class={css!(r#"
+                        display: flex;
+                        justify-content: center;
+                        align-items: center;
+                        flex-direction: row;
+                        gap: 100px;
+
+                        @media screen and (max-width: 1500px) {
+                            flex-direction: column;
+                        }
+                    "#)}>
+                        <components::goodreads::Card />
+                        <components::letterboxd::Card />
+                    </div>
+                </div>
+        </div>
+    }
+}
+
+fn main() {
+    yew::Renderer::<App>::new().render();
+}
diff --git a/src/dynamic_content.rs b/src/dynamic_content.rs
deleted file mode 100644
index 7091dc3..0000000
--- a/src/dynamic_content.rs
+++ /dev/null
@@ -1,17 +0,0 @@
-mod github;
-mod goodreads;
-mod lastfm;
-mod letterboxd;
-
-pub use github::Commit;
-pub use goodreads::Book;
-pub use lastfm::Song;
-pub use letterboxd::Movie;
-
-pub trait ApiRefresh {
-    type Content;
-
-    async fn fetch_newest(
-        n: u32,
-    ) -> Result<std::vec::Vec<Self::Content>, Box<dyn std::error::Error>>;
-}
diff --git a/src/dynamic_content/github.rs b/src/dynamic_content/github.rs
deleted file mode 100644
index 477fe6f..0000000
--- a/src/dynamic_content/github.rs
+++ /dev/null
@@ -1,66 +0,0 @@
-use super::ApiRefresh;
-use cached::proc_macro::once;
-use reqwest::{self, header};
-use url::Url;
-
-#[derive(Clone)]
-pub struct Commit {
-    pub message: String,
-    pub url: Url,
-    pub repository_name: String,
-    pub repository_link: Url,
-}
-
-impl ApiRefresh for Commit {
-    type Content = Commit;
-
-    async fn fetch_newest(n: u32) -> Result<std::vec::Vec<Commit>, Box<dyn std::error::Error>> {
-        fetch_newest_commits(n).await
-    }
-}
-
-// 15 min
-#[once(result = true, time = 900)]
-async fn fetch_newest_commits(n: u32) -> Result<std::vec::Vec<Commit>, Box<dyn std::error::Error>> {
-    let username = std::env::var("GH_USERNAME")?;
-
-    let url = format!("https://api.github.com/users/{username}/events");
-
-    let client = reqwest::Client::new();
-    let response = client
-        .get(&url)
-        .header(header::USER_AGENT, "pulse")
-        .send()
-        .await?
-        .text()
-        .await?;
-
-    let json: serde_json::Value = serde_json::from_str(&response)
-        .map_err(|err| Box::new(err) as Box<dyn std::error::Error>)?;
-
-    let events = match json.as_array() {
-        Some(events) => events.clone(),
-        None => return Ok(Vec::new()),
-    };
-
-    let commits: Vec<_> = events
-        .iter()
-        .filter(|&event| event["type"] == "PushEvent")
-        .cloned()
-        .collect();
-
-    Ok(commits
-        .iter()
-        .filter_map(|commit| {
-            Some(Commit {
-                message: commit["payload"]["commits"][0]["message"]
-                    .as_str()?
-                    .to_string(),
-                url: Url::parse(commit["payload"]["commits"][0]["url"].as_str()?).ok()?,
-                repository_name: commit["repo"]["name"].as_str()?.to_string(),
-                repository_link: Url::parse(commit["repo"]["url"].as_str()?).ok()?,
-            })
-        })
-        .take(n as usize)
-        .collect())
-}
diff --git a/src/dynamic_content/letterboxd.rs b/src/dynamic_content/letterboxd.rs
deleted file mode 100644
index 6bf13a0..0000000
--- a/src/dynamic_content/letterboxd.rs
+++ /dev/null
@@ -1,73 +0,0 @@
-use super::ApiRefresh;
-use cached::proc_macro::once;
-use scraper::{Html, Selector};
-use url::Url;
-
-#[derive(Clone)]
-pub struct Movie {
-    pub title: String,
-    pub rating: String,
-    pub url: Url,
-}
-
-impl ApiRefresh for Movie {
-    type Content = Movie;
-
-    async fn fetch_newest(
-        n: u32,
-    ) -> Result<std::vec::Vec<Self::Content>, Box<dyn std::error::Error>> {
-        fetch_newest_movies(n).await
-    }
-}
-
-// 1 day
-#[once(result = true, time = 86400)]
-async fn fetch_newest_movies(n: u32) -> Result<std::vec::Vec<Movie>, Box<dyn std::error::Error>> {
-    let username = std::env::var("LETTERBOXD_USERNAME")?;
-    let url = format!("https://letterboxd.com/{username}/films/by/rated-date/");
-    let html = Html::parse_document(
-        &reqwest::get(&url)
-            .await
-            .map_err(|err| Box::new(err) as Box<dyn std::error::Error>)?
-            .text()
-            .await
-            .map_err(|err| Box::new(err) as Box<dyn std::error::Error>)?,
-    );
-
-    let row_selector = Selector::parse("li.poster-container").unwrap();
-
-    let div_selector = Selector::parse("div.really-lazy-load").unwrap();
-    let rating_selector = Selector::parse("span.rating").unwrap();
-    let img_selector = Selector::parse("img.image").unwrap();
-
-    Ok(html
-        .select(&row_selector)
-        .filter_map(|row| {
-            let title = row
-                .select(&img_selector)
-                .next()?
-                .value()
-                .attr("alt")?
-                .to_string();
-
-            let rating = row
-                .select(&rating_selector)
-                .next()
-                .map(|r| r.inner_html())
-                .filter(|r| !r.is_empty())?;
-
-            let link = row
-                .select(&div_selector)
-                .next()?
-                .value()
-                .attr("data-target-link")?;
-
-            Some(Movie {
-                title,
-                rating,
-                url: Url::parse(format! {"https://letterboxd.com{link}"}.as_str()).ok()?,
-            })
-        })
-        .take(n as usize)
-        .collect())
-}
diff --git a/src/main.rs b/src/main.rs
deleted file mode 100644
index 5bdce85..0000000
--- a/src/main.rs
+++ /dev/null
@@ -1,23 +0,0 @@
-use dynamic_content::{ApiRefresh, Book, Commit, Movie, Song};
-
-mod dynamic_content;
-
-#[allow(dead_code)]
-async fn use_content() {
-    let commit = &Commit::fetch_newest(1).await.unwrap()[0];
-    let book = &Book::fetch_newest(1).await.unwrap()[0];
-    let song = &Song::fetch_newest(1).await.unwrap()[0];
-    let movie = &Movie::fetch_newest(1).await.unwrap()[0];
-
-    println!(
-        "{}, {}, {}, {}",
-        commit.repository_name, book.title, song.title, movie.title
-    );
-}
-
-#[tokio::main]
-async fn main() {
-    dotenv::dotenv().ok();
-
-    println!("Hello, world!");
-}
diff --git a/tests/endpoint.rs b/tests/endpoint.rs
new file mode 100644
index 0000000..8337712
--- /dev/null
+++ b/tests/endpoint.rs
@@ -0,0 +1 @@
+//
diff --git a/tests/env_tests.rs b/tests/env_tests.rs
deleted file mode 100644
index 2c4df6a..0000000
--- a/tests/env_tests.rs
+++ /dev/null
@@ -1,23 +0,0 @@
-mod env_tests {
-    #[test]
-    fn test_required_env_vrs() {
-        dotenv::dotenv().ok();
-        let required_vars = [
-            "LASTFM_USERNAME",
-            "LASTFM_KEY",
-            "GH_USERNAME",
-            "GOODREADS_SHELF",
-            "LETTERBOXD_USERNAME",
-        ];
-
-        required_vars
-            .iter()
-            .map(|&var_name| {
-                assert!(
-                    std::env::var(var_name).is_ok(),
-                    "Environment variable {var_name} is not defined"
-                );
-            })
-            .for_each(drop);
-    }
-}
diff --git a/types/Cargo.toml b/types/Cargo.toml
new file mode 100644
index 0000000..da47d6e
--- /dev/null
+++ b/types/Cargo.toml
@@ -0,0 +1,12 @@
+[package]
+name = "types"
+version = "0.1.0"
+edition = "2021"
+
+# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
+
+[dependencies]
+serde = "1.0.203"
+serde_json = "1.0.117"
+url = "2.5.2"
+yew = "0.21.0"
diff --git a/types/src/lib.rs b/types/src/lib.rs
new file mode 100644
index 0000000..114d97d
--- /dev/null
+++ b/types/src/lib.rs
@@ -0,0 +1,38 @@
+use serde::{Deserialize, Serialize};
+use yew::Properties;
+
+#[derive(Clone, Properties, PartialEq, Serialize, Deserialize)]
+pub struct Commit {
+    pub message: String,
+    pub url: String,
+    pub repository_name: String,
+    pub repository_link: String,
+}
+
+#[derive(Clone, Properties, PartialEq, Serialize, Deserialize)]
+pub struct Movie {
+    pub title: String,
+    pub rating: String,
+    pub release_year: String,
+    pub url: String,
+    pub poster_url: String,
+}
+
+#[derive(Clone, Properties, PartialEq, Serialize, Deserialize)]
+pub struct Book {
+    pub title: String,
+    pub author: String,
+    pub rating: String,
+    pub title_url: String,
+    pub author_url: String,
+    pub cover_url: String,
+}
+
+#[derive(Clone, Properties, PartialEq, Serialize, Deserialize)]
+pub struct Song {
+    pub title: String,
+    pub artist_name: String,
+    pub album_name: String,
+    pub album_image: String,
+    pub url: String,
+}