diff --git a/public/PHS_Claw_Logo.png b/public/PHS_Claw_Logo.png
new file mode 100644
index 0000000..9bcb67b
Binary files /dev/null and b/public/PHS_Claw_Logo.png differ
diff --git a/public/PHS_Stacked_Acronym.png b/public/PHS_Stacked_Acronym.png
new file mode 100644
index 0000000..94b47ce
Binary files /dev/null and b/public/PHS_Stacked_Acronym.png differ
diff --git a/public/R15_logo.png b/public/R15_logo.png
new file mode 100644
index 0000000..802df65
Binary files /dev/null and b/public/R15_logo.png differ
diff --git a/public/R15_logo_colorMatchWhite.png b/public/R15_logo_colorMatchWhite.png
new file mode 100644
index 0000000..6842325
Binary files /dev/null and b/public/R15_logo_colorMatchWhite.png differ
diff --git a/src/components/banner.rs b/src/components/banner.rs
new file mode 100644
index 0000000..79b95ca
--- /dev/null
+++ b/src/components/banner.rs
@@ -0,0 +1,48 @@
+use leptos::prelude::*;
+use leptos_router::hooks::use_navigate;
+
+/// # Banner Component
+///
+/// This component displays a red banner at the top of the page with a title and a logo.
+/// Clicking the logo will redirect a user to specified page, preferably a home page.
+///
+/// Example usage:
+/// ```
+///
+/// ```
+#[component]
+pub fn Banner(
+ /// The title of the banner.
+ #[prop(into)]
+ title: String,
+ /// The file path or URL of a logo displayed at the top left of the banner.
+ #[prop(into)]
+ logo: String,
+ /// The route that the navigates user to a page (home page).
+ #[prop(into, default = String::from("/"))]
+ path: String,
+) -> impl IntoView {
+ let navigate = use_navigate();
+
+ let on_click = move |_| navigate(&path, Default::default());
+
+ view! {
+