diff --git a/utils-web/.DS_Store b/utils-web/.DS_Store
new file mode 100644
index 0000000..79332cd
Binary files /dev/null and b/utils-web/.DS_Store differ
diff --git a/utils-web/Cargo.toml b/utils-web/Cargo.toml
index 2de13f7..4289515 100644
--- a/utils-web/Cargo.toml
+++ b/utils-web/Cargo.toml
@@ -14,26 +14,33 @@ leptos_router = { version = "0.6.11", features = ["csr"] }
 leptos_meta = { version = "0.6.11", features = ["csr"] }
 gloo-net = { version = "0.2", features = ["http"] }
 log = "0.4.21"
+serde = { version = "1.0.201", features = ["derive"] }
+leptos_image = { version = "0.2.0", optional = true }
 
+[features]
+leptos_image = ["dep:leptos_image"]
 
 
-[package.metadata.leptos]
-# Path, relative to root, to generat rust code to
-gen_file = "src/server/generated.rs"
-# Path to the source index.html file
-index_file = "index.html"
-# [Optional] Files in the asset_dir will be copied to the target/site directory
-assets_dir = "public"
-# [Optional] Command to use when running end2end tests. It will run in the end2end dir.
-end2end_test_cmd = "npx playwright test"
-# On which port to serve the client side rendered site (when using --csr option)
-csr_port = 3000
-# The port to use for automatic reload monitoring
-reload_port = 3001
-
-[package.metadata.leptos.style]
-# Main style file. If scss or sass then it will be compiled to css.
-# the parent folder will be watched for changes
-file = "style/output.css"
-# A https://browsersl.ist query
-browserquery = "defaults"
+
+
+
+# [package.metadata.leptos]
+# # Path, relative to root, to generat rust code to
+# gen_file = "src/server/generated.rs"
+# # Path to the source index.html file
+# index_file = "index.html"
+# # [Optional] Files in the asset_dir will be copied to the target/site directory
+# assets_dir = "public"
+# # [Optional] Command to use when running end2end tests. It will run in the end2end dir.
+# end2end_test_cmd = "npx playwright test"
+# # On which port to serve the client side rendered site (when using --csr option)
+# csr_port = 3000
+# # The port to use for automatic reload monitoring
+# reload_port = 3001
+
+# [package.metadata.leptos.style]
+# # Main style file. If scss or sass then it will be compiled to css.
+# # the parent folder will be watched for changes
+# file = "style/output.css"
+# # A https://browsersl.ist query
+# browserquery = "defaults"
diff --git a/utils-web/index.html b/utils-web/index.html
index c55050e..048529b 100644
--- a/utils-web/index.html
+++ b/utils-web/index.html
@@ -13,6 +13,7 @@
     <link data-trunk rel="rust" data-wasm-opt="z" />
     <link data-trunk rel="icon" type="image/ico" href="/public/favicon.ico" />
     <link data-trunk rel="tailwind-css" href="/style/tailwind.css" />
+    <link href="https://cdn.jsdelivr.net/npm/remixicon@4.2.0/fonts/remixicon.css" rel="stylesheet" />
     <style>
         .open-sans-300 {
             font-family: "Open Sans", sans-serif;
diff --git a/utils-web/public/.DS_Store b/utils-web/public/.DS_Store
new file mode 100644
index 0000000..17d8421
Binary files /dev/null and b/utils-web/public/.DS_Store differ
diff --git a/utils-web/public/app-icon.png b/utils-web/public/app-icon.png
new file mode 100644
index 0000000..5fcc493
Binary files /dev/null and b/utils-web/public/app-icon.png differ
diff --git a/utils-web/public/illlustrations/drawkit-transport-scene-1.png b/utils-web/public/illlustrations/drawkit-transport-scene-1.png
new file mode 100644
index 0000000..f0ff1fc
Binary files /dev/null and b/utils-web/public/illlustrations/drawkit-transport-scene-1.png differ
diff --git a/utils-web/public/illlustrations/drawkit-transport-scene-10.png b/utils-web/public/illlustrations/drawkit-transport-scene-10.png
new file mode 100644
index 0000000..eadece7
Binary files /dev/null and b/utils-web/public/illlustrations/drawkit-transport-scene-10.png differ
diff --git a/utils-web/public/illlustrations/drawkit-transport-scene-11.png b/utils-web/public/illlustrations/drawkit-transport-scene-11.png
new file mode 100644
index 0000000..1855905
Binary files /dev/null and b/utils-web/public/illlustrations/drawkit-transport-scene-11.png differ
diff --git a/utils-web/public/illlustrations/drawkit-transport-scene-12.png b/utils-web/public/illlustrations/drawkit-transport-scene-12.png
new file mode 100644
index 0000000..90f72ff
Binary files /dev/null and b/utils-web/public/illlustrations/drawkit-transport-scene-12.png differ
diff --git a/utils-web/public/illlustrations/drawkit-transport-scene-2.png b/utils-web/public/illlustrations/drawkit-transport-scene-2.png
new file mode 100644
index 0000000..92c1095
Binary files /dev/null and b/utils-web/public/illlustrations/drawkit-transport-scene-2.png differ
diff --git a/utils-web/public/illlustrations/drawkit-transport-scene-3.png b/utils-web/public/illlustrations/drawkit-transport-scene-3.png
new file mode 100644
index 0000000..50c96c8
Binary files /dev/null and b/utils-web/public/illlustrations/drawkit-transport-scene-3.png differ
diff --git a/utils-web/public/illlustrations/drawkit-transport-scene-4.png b/utils-web/public/illlustrations/drawkit-transport-scene-4.png
new file mode 100644
index 0000000..4af40f4
Binary files /dev/null and b/utils-web/public/illlustrations/drawkit-transport-scene-4.png differ
diff --git a/utils-web/public/illlustrations/drawkit-transport-scene-5.png b/utils-web/public/illlustrations/drawkit-transport-scene-5.png
new file mode 100644
index 0000000..313f96a
Binary files /dev/null and b/utils-web/public/illlustrations/drawkit-transport-scene-5.png differ
diff --git a/utils-web/public/illlustrations/drawkit-transport-scene-6.png b/utils-web/public/illlustrations/drawkit-transport-scene-6.png
new file mode 100644
index 0000000..f940986
Binary files /dev/null and b/utils-web/public/illlustrations/drawkit-transport-scene-6.png differ
diff --git a/utils-web/public/illlustrations/drawkit-transport-scene-7.png b/utils-web/public/illlustrations/drawkit-transport-scene-7.png
new file mode 100644
index 0000000..34b3c88
Binary files /dev/null and b/utils-web/public/illlustrations/drawkit-transport-scene-7.png differ
diff --git a/utils-web/public/illlustrations/drawkit-transport-scene-8.png b/utils-web/public/illlustrations/drawkit-transport-scene-8.png
new file mode 100644
index 0000000..73c5faf
Binary files /dev/null and b/utils-web/public/illlustrations/drawkit-transport-scene-8.png differ
diff --git a/utils-web/public/illlustrations/drawkit-transport-scene-9.png b/utils-web/public/illlustrations/drawkit-transport-scene-9.png
new file mode 100644
index 0000000..33f7040
Binary files /dev/null and b/utils-web/public/illlustrations/drawkit-transport-scene-9.png differ
diff --git a/utils-web/public/placeholder.jpeg b/utils-web/public/placeholder.jpeg
new file mode 100644
index 0000000..405883e
Binary files /dev/null and b/utils-web/public/placeholder.jpeg differ
diff --git a/utils-web/src/app.rs b/utils-web/src/app.rs
index b9c63fc..6807dfd 100644
--- a/utils-web/src/app.rs
+++ b/utils-web/src/app.rs
@@ -4,6 +4,7 @@ use crate::pages::home::Home;
 use leptos::*;
 use leptos_meta::*;
 use leptos_router::*;
+// use leptos_image::*;
 
 #[component]
 pub fn App() -> impl IntoView {
@@ -15,10 +16,10 @@ pub fn App() -> impl IntoView {
         <Router>
             <Routes>
                 <Route path="" view=move || view! { <Home/> }/>
-                <Route path="/auth/login" view=move || view! { <Login/> }/>
-                <Route path="/auth/sescurity-question" view=move || view! { <SecurityQuestion/> }/>
-                <Route path="/auth/reset" view=move || view! { <ResetAccount/> }/>
-                <Route path="/auth/mfa" view=move || view! { <MultiFactorAuth/> }/>
+                <Route path="/login" view=move || view! { <Login/> }/>
+                <Route path="/sescurity-question" view=move || view! { <SecurityQuestion/> }/>
+                <Route path="/reset" view=move || view! { <ResetAccount/> }/>
+                <Route path="/mfa" view=move || view! { <MultiFactorAuth/> }/>
                 <Route path="/dashboard" view=move || view! { <Dashboard/> }/>
 
             </Routes>
diff --git a/utils-web/src/components/button.rs b/utils-web/src/components/button.rs
index 1f81d82..5182f98 100644
--- a/utils-web/src/components/button.rs
+++ b/utils-web/src/components/button.rs
@@ -1,4 +1,12 @@
+use leptos::{component, view, Children, IntoView};
 
-pub fn button(){
-    
-}
\ No newline at end of file
+/// the app button component
+#[component]
+pub fn Button(
+    /// additional tailwind or custom css classes
+    class: &'static str,
+    /// the element that goes into the button
+    children: Children,
+) -> impl IntoView {
+    view! { <button class=format!("px-4 py-2 rounded {class}")>{children()}</button> }
+}
diff --git a/utils-web/src/components/card.rs b/utils-web/src/components/card.rs
index 65909f6..185bcfd 100644
--- a/utils-web/src/components/card.rs
+++ b/utils-web/src/components/card.rs
@@ -1,5 +1 @@
-
-
-pub fn card(){
-    
-}
\ No newline at end of file
+pub fn card() {}
diff --git a/utils-web/src/components/icon.rs b/utils-web/src/components/icon.rs
new file mode 100644
index 0000000..11ef022
--- /dev/null
+++ b/utils-web/src/components/icon.rs
@@ -0,0 +1,15 @@
+use leptos::{component, view, IntoView};
+
+/// the app icon component, built on remx icon
+#[component]
+pub fn Icon(
+    #[prop(default = "")]
+    /// the remix icon identifier
+    icon: &'static str,
+    /// tailwind classes
+    #[prop(default = "")]
+    /// the remix icon identifier
+    class: &'static str,
+) -> impl IntoView {
+    view! { <i class=format!("{icon} {class}")></i> }
+}
diff --git a/utils-web/src/components/input.rs b/utils-web/src/components/input.rs
index ae01887..9947ec1 100644
--- a/utils-web/src/components/input.rs
+++ b/utils-web/src/components/input.rs
@@ -1,5 +1 @@
-
-
-pub fn input(){
-    
-}
\ No newline at end of file
+pub fn input() {}
diff --git a/utils-web/src/components/logo.rs b/utils-web/src/components/logo.rs
new file mode 100644
index 0000000..e69de29
diff --git a/utils-web/src/components/mod.rs b/utils-web/src/components/mod.rs
index db12a44..dd1c538 100644
--- a/utils-web/src/components/mod.rs
+++ b/utils-web/src/components/mod.rs
@@ -1,5 +1,6 @@
 pub mod button;
 pub mod card;
+pub mod icon;
 pub mod input;
 pub mod text;
 pub mod view;
diff --git a/utils-web/src/components/text.rs b/utils-web/src/components/text.rs
index 69b497d..896ebc7 100644
--- a/utils-web/src/components/text.rs
+++ b/utils-web/src/components/text.rs
@@ -1,5 +1 @@
-
-
-pub fn text(){
-    
-}
\ No newline at end of file
+pub fn text() {}
diff --git a/utils-web/src/components/view.rs b/utils-web/src/components/view.rs
index f645bf5..9e0bc1e 100644
--- a/utils-web/src/components/view.rs
+++ b/utils-web/src/components/view.rs
@@ -1,5 +1 @@
-
-
-pub fn view(){
-    
-}
\ No newline at end of file
+pub fn view() {}
diff --git a/utils-web/src/layouts/default.rs b/utils-web/src/layouts/default.rs
new file mode 100644
index 0000000..7c817e1
--- /dev/null
+++ b/utils-web/src/layouts/default.rs
@@ -0,0 +1,13 @@
+use crate::partials::footer::AppFooter;
+use crate::partials::nav::AppNavigation;
+use leptos::{component, view, Children, IntoView};
+
+/// the default application layout, with footer, viewbox, and navigation
+#[component]
+pub fn Layout(children: Children, class: &'static str) -> impl IntoView {
+    view! {
+        <AppNavigation/>
+        <main class="container my-8">{children()}</main>
+        <AppFooter/>
+    }
+}
diff --git a/utils-web/src/layouts/mod.rs b/utils-web/src/layouts/mod.rs
new file mode 100644
index 0000000..1be8d34
--- /dev/null
+++ b/utils-web/src/layouts/mod.rs
@@ -0,0 +1 @@
+pub mod default;
diff --git a/utils-web/src/main.rs b/utils-web/src/main.rs
index bf5b970..ceac302 100644
--- a/utils-web/src/main.rs
+++ b/utils-web/src/main.rs
@@ -1,6 +1,8 @@
 mod app;
 mod components;
+mod layouts;
 mod pages;
+mod partials;
 
 use app::*;
 use leptos::*;
diff --git a/utils-web/src/pages/home.rs b/utils-web/src/pages/home.rs
index 2f8706c..351d0e2 100644
--- a/utils-web/src/pages/home.rs
+++ b/utils-web/src/pages/home.rs
@@ -1,21 +1,45 @@
+use crate::components::button::Button;
+use crate::components::icon::Icon;
+use crate::layouts::default::Layout;
 use leptos::{component, view, IntoView};
 
 #[component]
 pub fn Home() -> impl IntoView {
     view! {
-        <div class="container bg-red">
-            <header>
-                <div>
-                    <h1 class="text-5xl text-center">Everything that goes here goes here</h1>
-                    <p>
-                        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Explicabo consectetur facilis, dicta, in magni incidunt esse neque, iste rem libero omnis asperiores earum? Eligendi magnam, ratione harum saepe fugiat similique?
-                    </p>
-                </div>
-                <div>
-                    <img src="public/default-img.png" alt="utils web"/>
+        <Layout class="">
+            <header class="h-[60vh] sm:h-[75vh] flex flex-col item-center justify-center">
+                <h1 class="text-3xl sm:text-5xl text-center capitalize font-medium ">
+                    One Stop toolbox for every developer
+                </h1>
+                <p class="leading-2 sm:w-2/3 mx-auto mt-2 py-2 text-center">
+                    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Explicabo consectetur facilis, dicta, in magni incidunt esse neque, 
+                </p>
+                <div class="flex items-center w-fit gap-2 mx-auto my-4 ">
+                    <Button class="bg-[#101010] text-white w-fit flex items-center justify-center text-center">
+                        "Download"
+                        <Icon icon="ri-arrow-down-circle-fill" class="text-2xl block ml-2"/>
+                    </Button>
+                    <Button class="border-2  border-gray-500 items-center justify-center text-center  bg-gray-50 ">
+                        Read the docs
+                    </Button>
+
                 </div>
             </header>
+            <section class="sm:flex justify-between items-center sm:my-[100px]">
 
-        </div>
+                <div class="sm:w-1/2">
+                    <h2 class="font-medium text-3xl leading-3 mb-2">Some heading</h2>
+                    <p class="leading-2 my-4">
+                        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Temporibus labore beatae eum sed ad natus perspiciatis. Facere molestias incidunt molestiae maxime perferendis consequatur ullam tenetur! Mollitia porro numquam voluptatibus aut?
+                    </p>
+                     <Button class="border-2  border-gray-500 items-center justify-center text-center  bg-gray-50 ">
+                    Get Started
+                </Button>
+                </div>
+               <div>
+               <img src="./placeholder.jpeg" alt="./utils-featrures"/>
+               </div>
+            </section>
+        </Layout>
     }
 }
diff --git a/utils-web/src/pages/placeholder.jpeg b/utils-web/src/pages/placeholder.jpeg
new file mode 100644
index 0000000..405883e
Binary files /dev/null and b/utils-web/src/pages/placeholder.jpeg differ
diff --git a/utils-web/src/partials/footer.rs b/utils-web/src/partials/footer.rs
new file mode 100644
index 0000000..d261687
--- /dev/null
+++ b/utils-web/src/partials/footer.rs
@@ -0,0 +1,168 @@
+use leptos::{component, view, IntoView};
+
+/// the application footer
+#[component]
+pub fn AppFooter() -> impl IntoView {
+    view! {
+        <footer class="container pb-8">
+
+            <footer class="bg-white">
+                <div class="mx-auto w-full max-w-screen-xl p-4 py-6 lg:py-8">
+                    <div class="md:flex md:justify-between">
+                        <div class="mb-6 md:mb-0">
+                            <a href="https://flowbite.com/" class="flex items-center">
+
+                                <span class="self-center text-2xl font-semibold whitespace-nowrap">
+                                    Utils
+                                </span>
+                            </a>
+                        </div>
+                        <div class="grid grid-cols-2 gap-8 sm:gap-6 sm:grid-cols-3">
+                            <div>
+                                <h2 class="mb-6 text-sm font-semibold text-gray-900 uppercase ">
+                                    Resources
+                                </h2>
+                                <ul class="text-gray-500 font-medium">
+                                    <li class="mb-4">
+                                        <a href="https://flowbite.com/" class="hover:underline">
+                                            Flowbite
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a href="https://tailwindcss.com/" class="hover:underline">
+                                            Tailwind CSS
+                                        </a>
+                                    </li>
+                                </ul>
+                            </div>
+                            <div>
+                                <h2 class="mb-6 text-sm font-semibold text-gray-900 uppercase ">
+                                    Follow us
+                                </h2>
+                                <ul class="text-gray-500  font-medium">
+                                    <li class="mb-4">
+                                        <a
+                                            href="https://github.com/themesberg/flowbite"
+                                            class="hover:underline "
+                                        >
+                                            Github
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a
+                                            href="https://discord.gg/4eeurUVvTy"
+                                            class="hover:underline"
+                                        >
+                                            Discord
+                                        </a>
+                                    </li>
+                                </ul>
+                            </div>
+                            <div>
+                                <h2 class="mb-6 text-sm font-semibold text-gray-900 uppercase ">
+                                    Legal
+                                </h2>
+                                <ul class="text-gray-500  font-medium">
+                                    <li class="mb-4">
+                                        <a href="#" class="hover:underline">
+                                            Privacy Policy
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a href="#" class="hover:underline">
+                                            Terms &amp; Conditions
+                                        </a>
+                                    </li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                    <hr class="my-6 border-gray-200 sm:mx-auto  lg:my-8"/>
+                    <div class="sm:flex sm:items-center sm:justify-between">
+                        <span class="text-sm text-gray-500 sm:text-center ">Built with love "❤️"
+                        </span>
+                        <div class="flex mt-4 sm:justify-center sm:mt-0">
+                            <a href="#" class="text-gray-500 hover:text-gray-900 ">
+                                <svg
+                                    class="w-4 h-4"
+                                    aria-hidden="true"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                    fill="currentColor"
+                                    viewBox="0 0 8 19"
+                                >
+                                    <path
+                                        fill-rule="evenodd"
+                                        d="M6.135 3H8V0H6.135a4.147 4.147 0 0 0-4.142 4.142V6H0v3h2v9.938h3V9h2.021l.592-3H5V3.591A.6.6 0 0 1 5.592 3h.543Z"
+                                        clip-rule="evenodd"
+                                    ></path>
+                                </svg>
+                                <span class="sr-only">Facebook page</span>
+                            </a>
+                            <a href="#" class="text-gray-500 hover:text-gray-900  ms-5">
+                                <svg
+                                    class="w-4 h-4"
+                                    aria-hidden="true"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                    fill="currentColor"
+                                    viewBox="0 0 21 16"
+                                >
+                                    <path d="M16.942 1.556a16.3 16.3 0 0 0-4.126-1.3 12.04 12.04 0 0 0-.529 1.1 15.175 15.175 0 0 0-4.573 0 11.585 11.585 0 0 0-.535-1.1 16.274 16.274 0 0 0-4.129 1.3A17.392 17.392 0 0 0 .182 13.218a15.785 15.785 0 0 0 4.963 2.521c.41-.564.773-1.16 1.084-1.785a10.63 10.63 0 0 1-1.706-.83c.143-.106.283-.217.418-.33a11.664 11.664 0 0 0 10.118 0c.137.113.277.224.418.33-.544.328-1.116.606-1.71.832a12.52 12.52 0 0 0 1.084 1.785 16.46 16.46 0 0 0 5.064-2.595 17.286 17.286 0 0 0-2.973-11.59ZM6.678 10.813a1.941 1.941 0 0 1-1.8-2.045 1.93 1.93 0 0 1 1.8-2.047 1.919 1.919 0 0 1 1.8 2.047 1.93 1.93 0 0 1-1.8 2.045Zm6.644 0a1.94 1.94 0 0 1-1.8-2.045 1.93 1.93 0 0 1 1.8-2.047 1.918 1.918 0 0 1 1.8 2.047 1.93 1.93 0 0 1-1.8 2.045Z"></path>
+                                </svg>
+                                <span class="sr-only">Discord community</span>
+                            </a>
+                            <a href="#" class="text-gray-500 hover:text-gray-900  ms-5">
+                                <svg
+                                    class="w-4 h-4"
+                                    aria-hidden="true"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                    fill="currentColor"
+                                    viewBox="0 0 20 17"
+                                >
+                                    <path
+                                        fill-rule="evenodd"
+                                        d="M20 1.892a8.178 8.178 0 0 1-2.355.635 4.074 4.074 0 0 0 1.8-2.235 8.344 8.344 0 0 1-2.605.98A4.13 4.13 0 0 0 13.85 0a4.068 4.068 0 0 0-4.1 4.038 4 4 0 0 0 .105.919A11.705 11.705 0 0 1 1.4.734a4.006 4.006 0 0 0 1.268 5.392 4.165 4.165 0 0 1-1.859-.5v.05A4.057 4.057 0 0 0 4.1 9.635a4.19 4.19 0 0 1-1.856.07 4.108 4.108 0 0 0 3.831 2.807A8.36 8.36 0 0 1 0 14.184 11.732 11.732 0 0 0 6.291 16 11.502 11.502 0 0 0 17.964 4.5c0-.177 0-.35-.012-.523A8.143 8.143 0 0 0 20 1.892Z"
+                                        clip-rule="evenodd"
+                                    ></path>
+                                </svg>
+                                <span class="sr-only">Twitter page</span>
+                            </a>
+                            <a href="#" class="text-gray-500 hover:text-gray-900  ms-5">
+                                <svg
+                                    class="w-4 h-4"
+                                    aria-hidden="true"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                    fill="currentColor"
+                                    viewBox="0 0 20 20"
+                                >
+                                    <path
+                                        fill-rule="evenodd"
+                                        d="M10 .333A9.911 9.911 0 0 0 6.866 19.65c.5.092.678-.215.678-.477 0-.237-.01-1.017-.014-1.845-2.757.6-3.338-1.169-3.338-1.169a2.627 2.627 0 0 0-1.1-1.451c-.9-.615.07-.6.07-.6a2.084 2.084 0 0 1 1.518 1.021 2.11 2.11 0 0 0 2.884.823c.044-.503.268-.973.63-1.325-2.2-.25-4.516-1.1-4.516-4.9A3.832 3.832 0 0 1 4.7 7.068a3.56 3.56 0 0 1 .095-2.623s.832-.266 2.726 1.016a9.409 9.409 0 0 1 4.962 0c1.89-1.282 2.717-1.016 2.717-1.016.366.83.402 1.768.1 2.623a3.827 3.827 0 0 1 1.02 2.659c0 3.807-2.319 4.644-4.525 4.889a2.366 2.366 0 0 1 .673 1.834c0 1.326-.012 2.394-.012 2.72 0 .263.18.572.681.475A9.911 9.911 0 0 0 10 .333Z"
+                                        clip-rule="evenodd"
+                                    ></path>
+                                </svg>
+                                <span class="sr-only">GitHub account</span>
+                            </a>
+                            <a href="#" class="text-gray-500 hover:text-gray-900  ms-5">
+                                <svg
+                                    class="w-4 h-4"
+                                    aria-hidden="true"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                    fill="currentColor"
+                                    viewBox="0 0 20 20"
+                                >
+                                    <path
+                                        fill-rule="evenodd"
+                                        d="M10 0a10 10 0 1 0 10 10A10.009 10.009 0 0 0 10 0Zm6.613 4.614a8.523 8.523 0 0 1 1.93 5.32 20.094 20.094 0 0 0-5.949-.274c-.059-.149-.122-.292-.184-.441a23.879 23.879 0 0 0-.566-1.239 11.41 11.41 0 0 0 4.769-3.366ZM8 1.707a8.821 8.821 0 0 1 2-.238 8.5 8.5 0 0 1 5.664 2.152 9.608 9.608 0 0 1-4.476 3.087A45.758 45.758 0 0 0 8 1.707ZM1.642 8.262a8.57 8.57 0 0 1 4.73-5.981A53.998 53.998 0 0 1 9.54 7.222a32.078 32.078 0 0 1-7.9 1.04h.002Zm2.01 7.46a8.51 8.51 0 0 1-2.2-5.707v-.262a31.64 31.64 0 0 0 8.777-1.219c.243.477.477.964.692 1.449-.114.032-.227.067-.336.1a13.569 13.569 0 0 0-6.942 5.636l.009.003ZM10 18.556a8.508 8.508 0 0 1-5.243-1.8 11.717 11.717 0 0 1 6.7-5.332.509.509 0 0 1 .055-.02 35.65 35.65 0 0 1 1.819 6.476 8.476 8.476 0 0 1-3.331.676Zm4.772-1.462A37.232 37.232 0 0 0 13.113 11a12.513 12.513 0 0 1 5.321.364 8.56 8.56 0 0 1-3.66 5.73h-.002Z"
+                                        clip-rule="evenodd"
+                                    ></path>
+                                </svg>
+                                <span class="sr-only">Dribbble account</span>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </footer>
+
+        </footer>
+    }
+}
diff --git a/utils-web/src/partials/mod.rs b/utils-web/src/partials/mod.rs
new file mode 100644
index 0000000..800b0b2
--- /dev/null
+++ b/utils-web/src/partials/mod.rs
@@ -0,0 +1,2 @@
+pub mod footer;
+pub mod nav;
diff --git a/utils-web/src/partials/nav.rs b/utils-web/src/partials/nav.rs
new file mode 100644
index 0000000..0e307b6
--- /dev/null
+++ b/utils-web/src/partials/nav.rs
@@ -0,0 +1,43 @@
+use leptos::{component, view, IntoView};
+use serde::{Deserialize, Serialize};
+
+/// the nav otems is going ot be an array of these
+#[derive(Debug, Serialize, Deserialize, Default)]
+struct NavItem {
+    path: &'static str,
+    name: &'static str,
+}
+
+impl NavItem {
+    pub fn from(name: &'static str, path: &'static str) -> Self {
+        Self { path, name }
+    }
+}
+
+#[component]
+pub fn AppNavigation() -> impl IntoView {
+    let routes: Vec<NavItem> = vec![
+        NavItem::from("home", "/"),
+        NavItem::from("docs", "/docs"),
+        NavItem::from("login", "/login"),
+    ];
+
+    view! {
+        <nav class="container flex justify-between items-center mt-8">
+            <img src="app-icon.png" alt="Utils web"/>
+            <ul class="flex gap-4 items-center ">
+                {routes
+                    .into_iter()
+                    .map(|route| {
+                        view! {
+                            <li class="capitalize">
+                                <a href=route.path>{route.name}</a>
+                            </li>
+                        }
+                    })
+                    .collect::<Vec<_>>()}
+
+            </ul>
+        </nav>
+    }
+}
diff --git a/utils-web/style/colbal.css b/utils-web/style/colbal.css
new file mode 100644
index 0000000..25bf5de
--- /dev/null
+++ b/utils-web/style/colbal.css
@@ -0,0 +1,14 @@
+:root{
+    --wp--preset--color--black: #000000;
+        --wp--preset--color--cyan-bluish-gray: #abb8c3;
+        --wp--preset--color--white: #ffffff;
+        --wp--preset--color--pale-pink: #f78da7;
+        --wp--preset--color--vivid-red: #cf2e2e;
+        --wp--preset--color--luminous-vivid-orange: #ff6900;
+        --wp--preset--color--luminous-vivid-amber: #fcb900;
+        --wp--preset--color--light-green-cyan: #7bdcb5;
+        --wp--preset--color--vivid-green-cyan: #00d084;
+        --wp--preset--color--pale-cyan-blue: #8ed1fc;
+        --wp--preset--color--vivid-cyan-blue: #0693e3;
+        --wp--preset--color--vivid-purple: #9b51e0;
+}
\ No newline at end of file
diff --git a/utils-web/style/output.css b/utils-web/style/output.css
index 9206418..74a459c 100644
--- a/utils-web/style/output.css
+++ b/utils-web/style/output.css
@@ -586,15 +586,357 @@ video {
   }
 }
 
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+.static {
+  position: static;
+}
+
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.my-4 {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
+
+.my-6 {
+  margin-top: 1.5rem;
+  margin-bottom: 1.5rem;
+}
+
+.my-8 {
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+}
+
+.mb-2 {
+  margin-bottom: 0.5rem;
+}
+
+.mb-4 {
+  margin-bottom: 1rem;
+}
+
+.mb-6 {
+  margin-bottom: 1.5rem;
+}
+
+.ml-2 {
+  margin-left: 0.5rem;
+}
+
+.ms-5 {
+  margin-inline-start: 1.25rem;
+}
+
+.mt-2 {
+  margin-top: 0.5rem;
+}
+
+.mt-4 {
+  margin-top: 1rem;
+}
+
+.mt-8 {
+  margin-top: 2rem;
+}
+
+.block {
+  display: block;
+}
+
+.flex {
+  display: flex;
+}
+
+.grid {
+  display: grid;
+}
+
+.h-4 {
+  height: 1rem;
+}
+
+.h-\[60vh\] {
+  height: 60vh;
+}
+
+.w-4 {
+  width: 1rem;
+}
+
+.w-fit {
+  width: -moz-fit-content;
+  width: fit-content;
+}
+
+.w-full {
+  width: 100%;
+}
+
+.max-w-screen-xl {
+  max-width: 1280px;
+}
+
+.grid-cols-2 {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.flex-col {
+  flex-direction: column;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+.justify-between {
+  justify-content: space-between;
+}
+
+.gap-2 {
+  gap: 0.5rem;
+}
+
+.gap-4 {
+  gap: 1rem;
+}
+
+.gap-8 {
+  gap: 2rem;
+}
+
+.self-center {
+  align-self: center;
+}
+
+.whitespace-nowrap {
+  white-space: nowrap;
+}
+
+.rounded {
+  border-radius: 0.25rem;
+}
+
+.border-2 {
+  border-width: 2px;
+}
+
+.border-gray-200 {
+  --tw-border-opacity: 1;
+  border-color: rgb(229 231 235 / var(--tw-border-opacity));
+}
+
+.border-gray-500 {
+  --tw-border-opacity: 1;
+  border-color: rgb(107 114 128 / var(--tw-border-opacity));
+}
+
+.bg-\[\#101010\] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(16 16 16 / var(--tw-bg-opacity));
+}
+
+.bg-gray-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
+}
+
+.bg-white {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+}
+
+.p-4 {
+  padding: 1rem;
+}
+
+.px-4 {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.py-2 {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
+.py-6 {
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem;
+}
+
+.pb-8 {
+  padding-bottom: 2rem;
+}
+
 .text-center {
   text-align: center;
 }
 
-.text-5xl {
-  font-size: 3rem;
-  line-height: 1;
+.text-2xl {
+  font-size: 1.5rem;
+  line-height: 2rem;
+}
+
+.text-3xl {
+  font-size: 1.875rem;
+  line-height: 2.25rem;
+}
+
+.text-sm {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
+.font-medium {
+  font-weight: 500;
+}
+
+.font-semibold {
+  font-weight: 600;
+}
+
+.uppercase {
+  text-transform: uppercase;
+}
+
+.capitalize {
+  text-transform: capitalize;
 }
 
 .italic {
   font-style: italic;
+}
+
+.leading-3 {
+  line-height: .75rem;
+}
+
+.text-gray-500 {
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity));
+}
+
+.text-gray-900 {
+  --tw-text-opacity: 1;
+  color: rgb(17 24 39 / var(--tw-text-opacity));
+}
+
+.text-white {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
+.hover\:text-gray-900:hover {
+  --tw-text-opacity: 1;
+  color: rgb(17 24 39 / var(--tw-text-opacity));
+}
+
+.hover\:underline:hover {
+  text-decoration-line: underline;
+}
+
+@media (min-width: 640px) {
+  .sm\:mx-auto {
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  .sm\:my-\[100px\] {
+    margin-top: 100px;
+    margin-bottom: 100px;
+  }
+
+  .sm\:mt-0 {
+    margin-top: 0px;
+  }
+
+  .sm\:flex {
+    display: flex;
+  }
+
+  .sm\:h-\[75vh\] {
+    height: 75vh;
+  }
+
+  .sm\:w-1\/2 {
+    width: 50%;
+  }
+
+  .sm\:w-2\/3 {
+    width: 66.666667%;
+  }
+
+  .sm\:grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .sm\:items-center {
+    align-items: center;
+  }
+
+  .sm\:justify-center {
+    justify-content: center;
+  }
+
+  .sm\:justify-between {
+    justify-content: space-between;
+  }
+
+  .sm\:gap-6 {
+    gap: 1.5rem;
+  }
+
+  .sm\:text-center {
+    text-align: center;
+  }
+
+  .sm\:text-5xl {
+    font-size: 3rem;
+    line-height: 1;
+  }
+}
+
+@media (min-width: 768px) {
+  .md\:mb-0 {
+    margin-bottom: 0px;
+  }
+
+  .md\:flex {
+    display: flex;
+  }
+
+  .md\:justify-between {
+    justify-content: space-between;
+  }
+}
+
+@media (min-width: 1024px) {
+  .lg\:my-8 {
+    margin-top: 2rem;
+    margin-bottom: 2rem;
+  }
+
+  .lg\:py-8 {
+    padding-top: 2rem;
+    padding-bottom: 2rem;
+  }
 }
\ No newline at end of file
diff --git a/utils-web/tailwind.config.js b/utils-web/tailwind.config.js
index da938a2..669a1b7 100644
--- a/utils-web/tailwind.config.js
+++ b/utils-web/tailwind.config.js
@@ -1,4 +1,5 @@
 /** @type {import('tailwindcss').Config} */
+const colors = require("tailwindcss/colors");
 module.exports = {
   content: {
     files: ["*.html", "./src/**/*.rs"],