diff --git a/public/Book.png b/public/Book.png
new file mode 100644
index 0000000..939c4da
Binary files /dev/null and b/public/Book.png differ
diff --git a/public/Book_Style2.png b/public/Book_Style2.png
new file mode 100644
index 0000000..66f1f94
Binary files /dev/null and b/public/Book_Style2.png differ
diff --git a/public/Book_Style3.png b/public/Book_Style3.png
new file mode 100644
index 0000000..4fc3e06
Binary files /dev/null and b/public/Book_Style3.png differ
diff --git a/public/Bulb.png b/public/Bulb.png
new file mode 100644
index 0000000..2940e9e
Binary files /dev/null and b/public/Bulb.png differ
diff --git a/public/Bulb_Style2.png b/public/Bulb_Style2.png
new file mode 100644
index 0000000..6778936
Binary files /dev/null and b/public/Bulb_Style2.png differ
diff --git a/public/Calendar.png b/public/Calendar.png
new file mode 100644
index 0000000..b40ab22
Binary files /dev/null and b/public/Calendar.png differ
diff --git a/public/Calendar_Style2.png b/public/Calendar_Style2.png
new file mode 100644
index 0000000..38d570c
Binary files /dev/null and b/public/Calendar_Style2.png differ
diff --git a/public/Check.png b/public/Check.png
new file mode 100644
index 0000000..27c9cd4
Binary files /dev/null and b/public/Check.png differ
diff --git a/public/Check_Style2.png b/public/Check_Style2.png
new file mode 100644
index 0000000..4de2ba3
Binary files /dev/null and b/public/Check_Style2.png differ
diff --git a/public/Cog_Black.png b/public/Cog_Black.png
new file mode 100644
index 0000000..4c574b6
Binary files /dev/null and b/public/Cog_Black.png differ
diff --git a/public/Cog_Style3.png b/public/Cog_Style3.png
new file mode 100644
index 0000000..df5d926
Binary files /dev/null and b/public/Cog_Style3.png differ
diff --git a/public/Create.png b/public/Create.png
new file mode 100644
index 0000000..5b0118b
Binary files /dev/null and b/public/Create.png differ
diff --git a/public/Create_Black.png b/public/Create_Black.png
new file mode 100644
index 0000000..43cc0ed
Binary files /dev/null and b/public/Create_Black.png differ
diff --git a/public/Edit.png b/public/Edit.png
new file mode 100644
index 0000000..a691d08
Binary files /dev/null and b/public/Edit.png differ
diff --git a/public/Form.png b/public/Form.png
new file mode 100644
index 0000000..c534471
Binary files /dev/null and b/public/Form.png differ
diff --git a/public/Form_Black.png b/public/Form_Black.png
new file mode 100644
index 0000000..528abaf
Binary files /dev/null and b/public/Form_Black.png differ
diff --git a/public/Medal_Black.png b/public/Medal_Black.png
new file mode 100644
index 0000000..9c1e2a5
Binary files /dev/null and b/public/Medal_Black.png differ
diff --git a/public/Person.png b/public/Person.png
new file mode 100644
index 0000000..35f5e14
Binary files /dev/null and b/public/Person.png differ
diff --git a/public/Person_Black.png b/public/Person_Black.png
new file mode 100644
index 0000000..76891b8
Binary files /dev/null and b/public/Person_Black.png differ
diff --git a/public/Warning.png b/public/Warning.png
new file mode 100644
index 0000000..60efb17
Binary files /dev/null and b/public/Warning.png differ
diff --git a/public/Warning_Style2.png b/public/Warning_Style2.png
new file mode 100644
index 0000000..bc301e0
Binary files /dev/null and b/public/Warning_Style2.png differ
diff --git a/public/medal.png b/public/medal.png
new file mode 100644
index 0000000..0fc6b76
Binary files /dev/null and b/public/medal.png differ
diff --git a/public/square-user.svg b/public/square-user.svg
new file mode 100644
index 0000000..92f1016
--- /dev/null
+++ b/public/square-user.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7 20C7 17.2386 9.23858 15 12 15C14.7614 15 17 17.2386 17 20M7.2 20H16.8C17.9201 20 18.4802 20 18.908 19.782C19.2843 19.5903 19.5903 19.2843 19.782 18.908C20 18.4802 20 17.9201 20 16.8V7.2C20 6.0799 20 5.51984 19.782 5.09202C19.5903 4.71569 19.2843 4.40973 18.908 4.21799C18.4802 4 17.9201 4 16.8 4H7.2C6.0799 4 5.51984 4 5.09202 4.21799C4.71569 4.40973 4.40973 4.71569 4.21799 5.09202C4 5.51984 4 6.07989 4 7.2V16.8C4 17.9201 4 18.4802 4.21799 18.908C4.40973 19.2843 4.71569 19.5903 5.09202 19.782C5.51984 20 6.07989 20 7.2 20ZM14 10C14 11.1046 13.1046 12 12 12C10.8954 12 10 11.1046 10 10C10 8.89543 10.8954 8 12 8C13.1046 8 14 8.89543 14 10Z" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/src/app.rs b/src/app.rs
index e854ce4..1c7065b 100644
--- a/src/app.rs
+++ b/src/app.rs
@@ -7,7 +7,7 @@ use leptos_router::{
 };
 use url::Url;
 
-use crate::pages::{AboutPage, HomePage, UnauthenticatedPage};
+use crate::pages::{AboutPage, HomePage, TestPage, UnauthenticatedPage};
 
 pub fn shell(options: LeptosOptions) -> impl IntoView {
     view! {
@@ -67,6 +67,7 @@ pub fn App() -> impl IntoView {
                 <Routes fallback=|| "Page not found.".into_view()>
                     <Route path=StaticSegment("") view=HomePage/>
                     <Route path=StaticSegment("about") view=AboutPage/>
+                    <Route path=StaticSegment("test_page") view=TestPage/>
                 </Routes>
             </main>
         </Router>
diff --git a/src/components/checkbox.rs b/src/components/checkbox.rs
index f4af14c..ba711dc 100644
--- a/src/components/checkbox.rs
+++ b/src/components/checkbox.rs
@@ -1,7 +1,7 @@
 use crate::common::ValueType;
+use crate::components::utils::create_unique_id;
 use leptos::prelude::*;
 use std::collections::HashMap;
-use crate::components::utils::create_unique_id;
 
 #[component]
 pub fn Checkbox(
@@ -12,7 +12,7 @@ pub fn Checkbox(
     #[prop(default = RwSignal::new(false))] disabled: RwSignal<bool>,
 ) -> impl IntoView {
     let id = create_unique_id(&name, &value);
-    
+
     view! {
         <label for=id class="flex items-center">
             <input
diff --git a/src/components/chips.rs b/src/components/chips.rs
index ba5ce14..6c117b0 100644
--- a/src/components/chips.rs
+++ b/src/components/chips.rs
@@ -1,14 +1,14 @@
-use std::collections::HashMap;
-use leptos::prelude::*;
 use crate::common::ValueType;
 use crate::components::utils::create_unique_id;
+use leptos::prelude::*;
+use std::collections::HashMap;
 
 /// # Chip Component
-/// 
+///
 /// This component defines a single chip for use in the `ChipsList` component. It functions almost
 /// identically to the `Checkbox` component. It should only be created from within its parent
 /// `CheckboxList` component.
-/// 
+///
 /// Example usage:
 /// ```
 /// view! {
@@ -33,7 +33,7 @@ pub fn Chip(
     // Generate a unique id - ensure that the value doesn't contain spaces.
     // Without this id, checkbox/radio inputs can interfere with each other.
     let id = create_unique_id(&name, &value);
-    
+
     view! {
         <label for=id>
             <input
@@ -60,10 +60,10 @@ pub fn Chip(
 }
 
 /// # Chips List Component
-/// 
+///
 /// This defines a list of `Chip` components. The list of values is created based on the data from the
 /// `data_map` prop, which is found using the given `data_member`.
-/// 
+///
 /// Any values selected from the list are stored within the `data_map` immediately as part of a callback
 /// passed to the `on_change` prop for each individual `Chip` component.
 #[component]
@@ -95,7 +95,7 @@ pub fn ChipsList(
                                     .contains(&ValueType::String(Some(item_name.clone())))
                             }
                         });
-                    
+
                         let on_change = {
                             let item_name = value.clone();
                             let data_member = data_member.clone();
@@ -127,7 +127,7 @@ pub fn ChipsList(
                                 });
                             }
                         };
-                    
+
                         view! {
                             <Chip
                                 checked=checked_signal
diff --git a/src/components/dashboard_button.rs b/src/components/dashboard_button.rs
new file mode 100644
index 0000000..9310b33
--- /dev/null
+++ b/src/components/dashboard_button.rs
@@ -0,0 +1,61 @@
+use leptos::prelude::*;
+use leptos_router::hooks::use_navigate;
+
+/// # Dashboard Button Component
+///
+/// This component displays a large panel-like button that redirects a user to a specified page.
+/// It's best used on a user dashboard, where multiple instances of the button are present.
+/// It has a title, a description, and icon
+///
+/// Example usage:
+/// ```
+///     <div class="p-6 space-y-4 max-w-1/3">
+///         <DashboardButton
+///             title="Home Page"
+///             description="Navigate to Home Page"
+///             icon="square-user.svg"
+///             path="/"
+///         />
+///     </div>
+/// ```
+#[component]
+pub fn DashboardButton(
+    /// The main label displayed on the button.
+    #[prop(into)]
+    title: String,
+    /// A brief explanatory text that describes the destination page.
+    #[prop(into)]
+    description: String,
+    /// The file path or URL of the icon displayed at the top of the button.
+    #[prop(into)]
+    icon: String,
+    /// The route that the user is navigated to when clicking the button.
+    #[prop(into)]
+    path: String,
+) -> impl IntoView {
+    let navigate = use_navigate();
+
+    let on_click = move |_| navigate(&path, Default::default());
+
+    view! {
+        <button
+            type="button"
+            class="dashboard-button flex items-start gap-3 rounded-lg border-grey-300 p-6
+                   hover:bg-gray-100 transition cursor-pointer w-full text-left
+                   shadow-[inset_0_0_6px_rgba(0,0,0,0.12)]"
+            on:click=on_click>
+
+            <div class="flex flex-col">
+                <img src={icon.clone()} class="h-8 w-8" alt="icon"/>
+                <h3 class="font-semibold text-base">
+                    {title.clone()}
+                </h3>
+
+                <p class="text-sm text-gray-600 pt-6">
+                    {description.clone()}
+                </p>
+
+            </div>
+        </button>
+    }
+}
diff --git a/src/components/mod.rs b/src/components/mod.rs
index 3cb092a..f0297f7 100644
--- a/src/components/mod.rs
+++ b/src/components/mod.rs
@@ -1,5 +1,7 @@
 mod action_button;
 mod checkbox;
+mod chips;
+mod dashboard_button;
 mod loading;
 mod multi_entry;
 mod panel;
@@ -7,10 +9,9 @@ mod radio;
 mod row;
 mod select;
 mod text_field;
-mod chips;
 mod utils;
 
 pub use self::{
-    action_button::*, checkbox::*, loading::*, multi_entry::*, panel::*, radio::*, row::*,
-    select::*, text_field::*, chips::*
+    action_button::*, checkbox::*, chips::*, dashboard_button::*, loading::*, multi_entry::*,
+    panel::*, radio::*, row::*, select::*, text_field::*,
 };
diff --git a/src/components/radio.rs b/src/components/radio.rs
index f3bc8c7..72047ef 100644
--- a/src/components/radio.rs
+++ b/src/components/radio.rs
@@ -1,7 +1,7 @@
 use crate::common::ValueType;
+use crate::components::utils::create_unique_id;
 use leptos::prelude::*;
 use std::collections::HashMap;
-use crate::components::utils::create_unique_id;
 
 #[component]
 pub fn Radio(
@@ -12,7 +12,7 @@ pub fn Radio(
     #[prop(default = RwSignal::new(false))] disabled: RwSignal<bool>,
 ) -> impl IntoView {
     let id = create_unique_id(&name, &value);
-    
+
     view! {
         <label for=id class="flex items-center">
             <input
diff --git a/src/components/utils.rs b/src/components/utils.rs
index 2090468..6dba9c9 100644
--- a/src/components/utils.rs
+++ b/src/components/utils.rs
@@ -1,8 +1,10 @@
 /// Creates a unique ID for use in components like the [`CheckboxList`],
 /// [`RadioList`], and [`ChipsList`].
 pub fn create_unique_id(name: &String, value: &String) -> String {
-    let value_no_spaces = value.clone().chars()
+    let value_no_spaces = value
+        .clone()
+        .chars()
         .filter(|c| !c.is_whitespace())
         .collect::<String>();
     format!("{}-{}", name.clone(), value_no_spaces)
-}
\ No newline at end of file
+}
diff --git a/src/pages/mod.rs b/src/pages/mod.rs
index 5752a59..87d6b16 100644
--- a/src/pages/mod.rs
+++ b/src/pages/mod.rs
@@ -1,5 +1,6 @@
 mod about_page;
 mod home_page;
+mod test_page;
 mod unauthenticated_page;
 
-pub use self::{about_page::*, home_page::*, unauthenticated_page::*};
+pub use self::{about_page::*, home_page::*, test_page::*, unauthenticated_page::*};
diff --git a/src/pages/test_page.rs b/src/pages/test_page.rs
new file mode 100644
index 0000000..f3e1f28
--- /dev/null
+++ b/src/pages/test_page.rs
@@ -0,0 +1,28 @@
+use crate::components::DashboardButton;
+use leptos::prelude::*;
+
+#[component]
+pub fn TestPage() -> impl IntoView {
+    view! {
+        <div class="p-6 space-y-4 max-w-1/3">
+            <DashboardButton
+                title="Home Page"
+                description="Navigate to Home Page"
+                icon="Book.png"
+                path="/"
+            />
+        <DashboardButton
+                title="Home Page"
+                description="Navigate to Home Page"
+                icon="Calendar.png"
+                path="/"
+            />
+        <DashboardButton
+                title="Home Page"
+                description="Navigate to Home Page"
+                icon="Edit.png"
+                path="/"
+            />
+        </div>
+    }
+}