diff --git a/components/src/sidebar/sidebar.rs b/components/src/sidebar/sidebar.rs
index 8bd7fcc3c..b7df28599 100644
--- a/components/src/sidebar/sidebar.rs
+++ b/components/src/sidebar/sidebar.rs
@@ -20,90 +20,9 @@ pub struct LinkItem {
 pub fn Sidebar(
 	/// Workspace Card
 	children: ChildrenFn,
+	/// The Sidebar Items
+	sidebar_items: Vec<LinkItem>,
 ) -> impl IntoView {
-	let links: Vec<LinkItem> = vec![
-		LinkItem {
-			title: "Home".to_owned(),
-			path: "/".to_owned(),
-			icon_src: "/images/sidebar/home.svg".to_owned(),
-			subtitle: None,
-			items: None,
-		},
-		LinkItem {
-			title: "Runners".to_owned(),
-			path: "/runners".to_owned(),
-			icon_src: "/images/sidebar/runner.svg".to_owned(),
-			subtitle: None,
-			items: None,
-		},
-		LinkItem {
-			title: "Infrastructure".to_owned(),
-			path: "".to_owned(),
-			icon_src: "/images/sidebar/infrastructure.svg".to_owned(),
-			subtitle: None,
-			items: Some(vec![
-				LinkItem {
-					title: "Deployments".to_owned(),
-					path: "/deployment".to_owned(),
-					subtitle: None,
-					icon_src: "/images/sidebar/deployment.svg".to_owned(),
-					items: None,
-				},
-				LinkItem {
-					title: "Databases".to_owned(),
-					path: "/database".to_owned(),
-					subtitle: None,
-					icon_src: "/images/sidebar/database.svg".to_owned(),
-					items: None,
-				},
-			]),
-		},
-		LinkItem {
-			title: "Domain Configuration".to_owned(),
-			path: "".to_owned(),
-			icon_src: "/images/sidebar/domains.svg".to_owned(),
-			subtitle: None,
-			items: Some(vec![
-				LinkItem {
-					title: "Domains".to_owned(),
-					path: "/domain".to_owned(),
-					subtitle: None,
-					icon_src: "/images/sidebar/domains.svg".to_owned(),
-					items: None,
-				},
-				LinkItem {
-					title: "Managed URLs".to_owned(),
-					icon_src: "/images/sidebar/managed-url.svg".to_owned(),
-					subtitle: None,
-					path: "/managed-url".to_owned(),
-					items: None,
-				},
-			]),
-		},
-		LinkItem {
-			title: "User".to_owned(),
-			path: "/user".to_owned(),
-			icon_src: "/images/sidebar/workspace.svg".to_owned(),
-			subtitle: None,
-			items: Some(vec![
-				LinkItem {
-					title: "Workspace".to_owned(),
-					icon_src: "/images/sidebar/workspace.svg".to_owned(),
-					subtitle: None,
-					path: "/workspace".to_owned(),
-					items: None,
-				},
-				LinkItem {
-					title: "API Tokens".to_owned(),
-					icon_src: "/images/sidebar/secrets.svg".to_owned(),
-					subtitle: None,
-					path: "/user/api-tokens".to_owned(),
-					items: None,
-				},
-			]),
-		},
-	];
-
 	view! {
 		<aside class="sidebar flex flex-col items-start justify-start pb-xl">
 			<div class="sidebar-logo w-full">
@@ -116,7 +35,7 @@ pub fn Sidebar(
 			<div class="w-full h-full flex flex-col items-start justify-between overflow-hidden pt-md">
 				<nav class="h-full w-full flex flex-col items-start justify-start overflow-y-auto mt-md">
 					<ul class="w-full h-full flex flex-col items-start justify-start">
-						{links
+						{sidebar_items
 							.into_iter()
 							.map(|link| view! { <SidebarItem link={link}/> })
 							.collect_view()}
diff --git a/components/src/utils/mod.rs b/components/src/utils/mod.rs
index 7d297e6a8..fc37bee27 100644
--- a/components/src/utils/mod.rs
+++ b/components/src/utils/mod.rs
@@ -1,8 +1,6 @@
 /// The alignment enum. This enum is used to specify the alignment of a
 /// component of left, right, or center.
 mod alignment;
-/// The App Route Enum. This Enum is used to specify the route of the app.
-mod app_route;
 /// The color enum. This enum is used to specify the color of a component. These
 /// include the primary and secondary colors of the app.
 mod color;
@@ -20,7 +18,7 @@ mod size;
 /// and the color variant.
 mod variant;
 
-pub use self::{alignment::*, app_route::*, color::*, size::*, variant::*};
+pub use self::{alignment::*, color::*, size::*, variant::*};
 
 /// The constants used within the components
 pub mod constants {
diff --git a/hosted-frontend/assets/styles/pages/_deployment.scss b/hosted-frontend/assets/styles/pages/_deployment.scss
index f344877c3..cf3f9d278 100644
--- a/hosted-frontend/assets/styles/pages/_deployment.scss
+++ b/hosted-frontend/assets/styles/pages/_deployment.scss
@@ -11,7 +11,7 @@
 }
 
 .deployment-card {
-  height: 20rem;
+  min-height: 20rem;
 
   .date-time {
     background-color: $bg-code-snippet;
@@ -23,7 +23,7 @@
 .deployment-card-items {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-  grid-auto-rows: 1fr;
+  grid-auto-rows: 50px;
 
   width: 100%;
   height: 100%;
diff --git a/hosted-frontend/src/api/workspace/deployment/mod.rs b/hosted-frontend/src/api/workspace/deployment/mod.rs
index 032c46530..d691f8448 100644
--- a/hosted-frontend/src/api/workspace/deployment/mod.rs
+++ b/hosted-frontend/src/api/workspace/deployment/mod.rs
@@ -8,6 +8,7 @@ mod list;
 mod list_machines;
 mod start;
 mod stop;
+mod stream_logs;
 
 pub use self::{
 	create::*,
@@ -20,4 +21,5 @@ pub use self::{
 	list_machines::*,
 	start::*,
 	stop::*,
+	stream_logs::*,
 };
diff --git a/hosted-frontend/src/api/workspace/deployment/stream_logs.rs b/hosted-frontend/src/api/workspace/deployment/stream_logs.rs
new file mode 100644
index 000000000..8d412912e
--- /dev/null
+++ b/hosted-frontend/src/api/workspace/deployment/stream_logs.rs
@@ -0,0 +1,43 @@
+use models::api::workspace::deployment::*;
+
+use crate::prelude::*;
+
+#[server(
+	StreamDeploymentLogsFn,
+	endpoint = "/infrastructure/deployment/stream_logs"
+)]
+pub async fn stream_deployment_logs(
+	access_token: Option<String>,
+	workspace_id: Option<Uuid>,
+	deployment_id: Uuid,
+) -> Result<(), ServerFnError<ErrorType>> {
+	use std::str::FromStr;
+
+	let access_token = access_token
+		.ok_or_else(|| ServerFnError::WrappedServerError(ErrorType::MalformedAccessToken))?;
+	let access_token = BearerToken::from_str(access_token.as_str())
+		.map_err(|_| ServerFnError::WrappedServerError(ErrorType::MalformedAccessToken))?;
+
+	let workspace_id = workspace_id
+		.ok_or_else(|| ServerFnError::WrappedServerError(ErrorType::WrongParameters))?;
+
+	let x = make_api_call::<StreamDeploymentLogsRequest>(
+		ApiRequest::builder()
+			.path(StreamDeploymentLogsPath {
+				deployment_id,
+				workspace_id,
+			})
+			.query(StreamDeploymentLogsQuery { start_time: None })
+			.headers(StreamDeploymentLogsRequestHeaders {
+				authorization: access_token,
+				user_agent: UserAgent::from_static("todo"),
+			})
+			.body(Default::default())
+			.build(),
+	)
+	.await
+	.map(|res| res.body)
+	.map_err(ServerFnError::WrappedServerError);
+
+	Ok(())
+}
diff --git a/hosted-frontend/src/app.rs b/hosted-frontend/src/app.rs
index 567f5b70f..f6b1097c5 100644
--- a/hosted-frontend/src/app.rs
+++ b/hosted-frontend/src/app.rs
@@ -3,65 +3,48 @@ use leptos_router::{Outlet, ProtectedRoute, Route, Router, Routes};
 
 use crate::{pages::*, prelude::*, utils::AuthState};
 
+/// The View for the App Component, it encapsulates the whole application, and
+/// adds the sidebar or headedr if necessary
 #[component]
 pub fn AppOutletView() -> impl IntoView {
 	let (state, _) = AuthState::load();
+	let app_type = expect_context::<AppType>();
 
 	view! {
 		{move || match state.get() {
-			AuthState::LoggedOut => view! {
-				<PageContainer class="bg-image">
-					<Outlet/>
-				</PageContainer>
-			}.into_view(),
-			AuthState::LoggedIn { access_token: _, refresh_token: _, last_used_workspace_id } => {
-				if last_used_workspace_id.is_some() {
-					view! {
-						<div class="fr-fs-fs full-width full-height bg-secondary">
-							<Sidebar>
-								<div></div>
-							</Sidebar>
-							<main class="fc-fs-ct full-width px-lg">
-								<header style="width: 100%; min-height: 5rem;"></header>
-
-								<Outlet/>
-							</main>
-						</div>
-					}
-					.into_view()
-				} else {
-					view! {
-						<div>"No workspace exists. Create workspace"</div>
-					}
-					.into_view()
+			AuthState::LoggedOut => {
+				view! {
+					<PageContainer class="bg-image">
+						<Outlet />
+					</PageContainer>
 				}
+					.into_view()
 			}
-		}}
-	}
-}
+			AuthState::LoggedIn { .. } => {
+				view! {
+					<div class="fr-fs-fs full-width full-height bg-secondary">
+						<Sidebar sidebar_items={get_sidebar_items(
+							app_type,
+						)}>
+							{app_type
+								.is_managed()
+								.then(|| {
+									view! {
+										<Transition>
+											<WorkspaceSidebarComponent />
+										</Transition>
+									}
+								})}
+						</Sidebar>
 
-#[component]
-pub fn AppOutlet() -> impl IntoView {
-	let app_type = expect_context::<AppType>();
-
-	view! {
-		<div class="fr-fs-fs full-width full-height bg-secondary">
-			<Sidebar>
-				{
-					match app_type {
-						AppType::SelfHosted => view! {}.into_view(),
-						AppType::Managed => view! {
-							<Transition>
-								<WorkspaceSidebarComponent/>
-							</Transition>
-						}
-					}
+						<main class="fc-fs-ct full-width px-lg">
+							<Outlet />
+						</main>
+					</div>
 				}
-			</Sidebar>
-			<main class="fc-fs-ct full-width px-lg">
-				<Outlet/>
-			</main>
-		</div>
+					.into_view()
+			}
+		}}
 	}
 }
 
@@ -75,7 +58,6 @@ pub fn App() -> impl IntoView {
 	// TODO: When redirecting to login, the URL should include the path that the
 	// user was trying to access. This way, after login, the user is redirected
 	// to the page they were trying to access.
-
 	provide_context(app_type);
 
 	view! {
@@ -85,16 +67,26 @@ pub fn App() -> impl IntoView {
 				// Logged in routes
 				<ProtectedRoute
 					path={AppRoutes::Empty}
-					view={AppOutlet}
+					view={AppOutletView}
 					redirect_path={AppRoutes::LoggedOutRoute(LoggedOutRoute::Login)}
 					condition={move || state.get().is_logged_in()}
 				>
-					<ProfileRoutes/>
-					<InfrastructureRoutes/>
-					<DomainConfigurationRoutes/>
-					<RunnerRoutes />
-					<WorkspaceRoutes/>
-					<Route path="" view={|| view! { <div></div> }}/>
+					<ProfileRoutes />
+					<InfrastructureRoutes />
+					<Route path={LoggedInRoute::ManagedUrl} view={ManagedUrlPage}>
+						<Route path="create" view={|| view! { <div>"create"</div> }} />
+						<Route path={AppRoutes::Empty} view={UrlDashboard} />
+					</Route>
+					<Route path={LoggedInRoute::Domain} view={DomainsDashboard} />
+					{app_type
+						.is_managed()
+						.then(|| {
+							view! {
+								<RunnerRoutes />
+								<WorkspaceRoutes />
+							}
+						})}
+				// <Route path="" view={|| view! { <div></div> }} />
 				</ProtectedRoute>
 				<ProtectedRoute
 					path={AppRoutes::Empty}
@@ -102,10 +94,21 @@ pub fn App() -> impl IntoView {
 					view={AppOutletView}
 					condition={move || state.get().is_logged_out()}
 				>
-					<AppRoute<LoginRoute, _, _> view={move |_query, _params| LoginForm}/>
-					<Route path={LoggedOutRoute::SignUp} view={SignUpForm}/>
-					<Route path={LoggedOutRoute::ConfirmOtp} view={ConfirmSignUpPage}/>
+					<AppRoute<LoginRoute, _, _> view={move |_query, _params| LoginForm} />
+					<AppRoute<SignUpRoute, _, _> view={move |_query, _params| SignUpForm} />
+					{app_type
+						.is_managed()
+						.then(|| {
+							view! {
+								<AppRoute<
+								VerifySignUpRoute,
+								_,
+								_,
+							> view={move |_query, _params| ConfirmSignUpPage} />
+							}
+						})}
 				</ProtectedRoute>
+				<Route path="/*any" view={|| view! { <ErrorPage title="Page Not Found" /> }} />
 			</Routes>
 		</Router>
 	}
diff --git a/hosted-frontend/src/lib.rs b/hosted-frontend/src/lib.rs
index 25c7ff293..e36b375b0 100644
--- a/hosted-frontend/src/lib.rs
+++ b/hosted-frontend/src/lib.rs
@@ -29,13 +29,11 @@ pub mod prelude {
 		tooltip::*,
 		utils::{
 			Alignment,
-			AppRoute,
 			Color,
 			LinkStyleVariant,
 			SecondaryColorVariant,
 			Size,
 			TextColor,
-			TypedRoute,
 			Variant,
 		},
 	};
diff --git a/hosted-frontend/src/pages/auth/confirm_sign_up.rs b/hosted-frontend/src/pages/auth/confirm_sign_up.rs
index 40e828cd1..a6a58469b 100644
--- a/hosted-frontend/src/pages/auth/confirm_sign_up.rs
+++ b/hosted-frontend/src/pages/auth/confirm_sign_up.rs
@@ -60,7 +60,10 @@ pub fn ConfirmSignUpPage() -> impl IntoView {
 				</div>
 			</div>
 
-			<ActionForm action={confirm_action} class="flex flex-col items-start justify-start w-full">
+			<ActionForm
+				action={confirm_action}
+				class="flex flex-col items-start justify-start w-full"
+			>
 				<Input
 					name="username"
 					placeholder="Username"
@@ -77,10 +80,7 @@ pub fn ConfirmSignUpPage() -> impl IntoView {
 
 				<span class="mt-sm mb-xxs text-sm text-white">"Enter OTP"</span>
 				<input name="otp" type="hidden" value={otp} />
-				<OtpInput
-					otp={otp}
-					on_change={move |val: String| otp.set(val)}
-				/>
+				<OtpInput otp={otp} on_change={move |val: String| otp.set(val)} />
 				<Show when={move || !otp_error.get().is_empty()}>
 					<Alert r#type={AlertType::Error} class="mt-xs">
 						{move || otp_error.get()}
diff --git a/hosted-frontend/src/pages/auth/login.rs b/hosted-frontend/src/pages/auth/login.rs
index e16137035..6f0fbbd09 100644
--- a/hosted-frontend/src/pages/auth/login.rs
+++ b/hosted-frontend/src/pages/auth/login.rs
@@ -134,7 +134,7 @@ pub fn LoginForm() -> impl IntoView {
 					value={password}
 				/>
 
-				<input name="mfa_otp" type="hidden"/>
+				<input name="mfa_otp" type="hidden" />
 				<Show when={move || !password_error.get().is_empty()}>
 					<Alert r#type={AlertType::Error} class="mt-xs">
 						{move || password_error.get()}
@@ -142,32 +142,33 @@ pub fn LoginForm() -> impl IntoView {
 				</Show>
 			</div>
 
-			{
-				match app_type {
-					AppType::SelfHosted => view! {}.into_view(),
-					AppType::Managed => view! {
+			{app_type
+				.is_managed()
+				.then(|| {
+					view! {
 						<div class="flex justify-between items-center w-full pt-xs">
 							<Link to={"/forgot-password".to_owned()} r#type={Variant::Link}>
 								"Forgot Password?"
 							</Link>
 						</div>
 					}
-					.into_view()
-				}
-			}
+						.into_view()
+				})}
 
 			<Show
-				when=move || !loading.get()
-				fallback=move || view! {
-					<Link
-						r#type={Variant::Button}
-						class="ml-auto"
-						style_variant={LinkStyleVariant::Contained}
-						disabled={true}
-					>
-						"LOADING"
-					</Link>
-				}
+				when={move || !loading.get()}
+				fallback={move || {
+					view! {
+						<Link
+							r#type={Variant::Button}
+							class="ml-auto"
+							style_variant={LinkStyleVariant::Contained}
+							disabled=true
+						>
+							"LOADING"
+						</Link>
+					}
+				}}
 			>
 				<Link
 					should_submit=true
diff --git a/hosted-frontend/src/pages/auth/sign_up.rs b/hosted-frontend/src/pages/auth/sign_up.rs
index 70885a28b..a8db6ace0 100644
--- a/hosted-frontend/src/pages/auth/sign_up.rs
+++ b/hosted-frontend/src/pages/auth/sign_up.rs
@@ -122,7 +122,10 @@ pub fn SignUpForm() -> impl IntoView {
 				</div>
 			</div>
 
-			<form on:submit={on_submit_sign_up} class="flex flex-col items-start justify-start w-full">
+			<form
+				on:submit={on_submit_sign_up}
+				class="flex flex-col items-start justify-start w-full"
+			>
 				<div class="flex justify-center items-start w-full">
 					<div class="flex flex-col items-start justify-start flex-col-6 pr-xxs">
 						<Input
@@ -172,9 +175,7 @@ pub fn SignUpForm() -> impl IntoView {
 					placeholder="User Name"
 					start_icon={Some(IconProps::builder().icon(IconType::User).build())}
 					value={username_input}
-					on_input={Box::new(move |ev| {
-						username_input.set(event_target_value(&ev))
-					})}
+					on_input={Box::new(move |ev| { username_input.set(event_target_value(&ev)) })}
 				/>
 
 				<Show when={move || !username_error.get().is_empty()}>
@@ -191,9 +192,7 @@ pub fn SignUpForm() -> impl IntoView {
 					placeholder="proton@gmail.com"
 					start_icon={Some(IconProps::builder().icon(IconType::Mail).build())}
 					value={email_input}
-					on_input={Box::new(move |ev| {
-						email_input.set(event_target_value(&ev))
-					})}
+					on_input={Box::new(move |ev| { email_input.set(event_target_value(&ev)) })}
 				/>
 
 				<Show when={move || !email_error.get().is_empty()}>
@@ -288,30 +287,34 @@ pub fn SignUpForm() -> impl IntoView {
 				</Show>
 
 				<div class="fr-fe-ct w-full mt-lg">
-					{
-						match app_type {
-							AppType::SelfHosted => view! {}.into_view(),
-							AppType::Managed => view! {
+					{app_type
+						.is_managed()
+						.then(|| {
+							view! {
 								<Link class="btn mr-xs" to="/confirm" r#type={Variant::Link}>
 									"ALREADY HAVE AN OTP"
 								</Link>
-							}.into_view()
-						}
-					}
+							}
+								.into_view()
+						})}
 					<Show
-						when=move || !loading.get()
-						fallback=move || view! {
-							<Link
-								disabled={true}
-								r#type={Variant::Button}
-								style_variant={LinkStyleVariant::Contained}
-							>
-								"LOADING..."
-							</Link>
-						}
+						when={move || !loading.get()}
+						fallback={move || {
+							view! {
+								<Link
+									disabled=true
+									r#type={Variant::Button}
+									style_variant={LinkStyleVariant::Contained}
+								>
+									"LOADING..."
+								</Link>
+							}
+						}}
 					>
 						<Link
-							disabled={Signal::derive(move || passwords_match.get() || loading.get())}
+							disabled={Signal::derive(move || {
+								passwords_match.get() || loading.get()
+							})}
 							r#type={Variant::Button}
 							should_submit=true
 							style_variant={LinkStyleVariant::Contained}
diff --git a/hosted-frontend/src/pages/domain/domains/domains_dashboard.rs b/hosted-frontend/src/pages/domain/domains/domains_dashboard.rs
index d4a5cc8cc..61a95455e 100644
--- a/hosted-frontend/src/pages/domain/domains/domains_dashboard.rs
+++ b/hosted-frontend/src/pages/domain/domains/domains_dashboard.rs
@@ -79,7 +79,7 @@ pub fn DomainsDashboard() -> impl IntoView {
 
 					render_rows={view! {
 						<For each={move || data.get()} key={|state| state.id.clone()} let:child>
-							<DomainCard domain_item={child}/>
+							<DomainCard domain_item={child} />
 						</For>
 					}
 						.into_view()}
diff --git a/hosted-frontend/src/pages/domain/managed_url/dashboard/card.rs b/hosted-frontend/src/pages/domain/managed_url/dashboard/card.rs
index 428c1c234..9f3794879 100644
--- a/hosted-frontend/src/pages/domain/managed_url/dashboard/card.rs
+++ b/hosted-frontend/src/pages/domain/managed_url/dashboard/card.rs
@@ -142,19 +142,26 @@ pub fn ManagedUrlCard(
 		<tr class={class}>
 			<Show
 				when={move || !show_update_url.get()}
-				fallback={move || view! {
-					<UpdateManagedUrl
-						show_component={show_update_url}
-						managed_url={
-							Signal::derive(move || store_managed_url.with_value(|managed_url| managed_url.get()))
-						}
-					/>
+				fallback={move || {
+					view! {
+						<UpdateManagedUrl
+							show_component={show_update_url}
+							managed_url={Signal::derive(move || {
+								store_managed_url.with_value(|managed_url| managed_url.get())
+							})}
+						/>
+					}
 				}}
 			>
 
 				<Transition>
 					<td class="flex-col-4 flex items-center justify-center">
-						<a href="" target="_blank" rel="noreferrer" class="txt-underline flex items-center justify-center">
+						<a
+							href=""
+							target="_blank"
+							rel="noreferrer"
+							class="txt-underline flex items-center justify-center"
+						>
 							<span class="max-w-[35ch] text-ellipsis overflow-hidden">
 								{managed_url}
 							</span>
@@ -167,11 +174,26 @@ pub fn ManagedUrlCard(
 					</td>
 
 					<td class="flex-col-1 flex items-center justify-center">
-						{store_managed_url.with_value(|managed_url| managed_url.clone().get().data.clone().url_type.to_string().to_case(Case::Title))}
+						{store_managed_url
+							.with_value(|managed_url| {
+								managed_url
+									.clone()
+									.get()
+									.data
+									.clone()
+									.url_type
+									.to_string()
+									.to_case(Case::Title)
+							})}
 					</td>
 
 					<td class="flex-col-4 flex items-center justify-center">
-						<a href="" target="_blank" rel="noreferrer" class="txt-underline flex items-center justify-center">
+						<a
+							href=""
+							target="_blank"
+							rel="noreferrer"
+							class="txt-underline flex items-center justify-center"
+						>
 							<span class="txt-medium txt-of-ellipsis of-hidden max-w-[35ch]">
 								{managed_url_link}
 							</span>
@@ -186,8 +208,8 @@ pub fn ManagedUrlCard(
 					<td class="flex-col-2 flex items-center justify-center"></td>
 
 					<td class="flex-col-1 flex justify-around items-center">
-						{
-							move || if show_delete_dialogue.get() {
+						{move || {
+							if show_delete_dialogue.get() {
 								view! {
 									<Link on_click={Rc::new(move |ev: &MouseEvent| {
 										on_delete(ev.to_owned());
@@ -199,18 +221,15 @@ pub fn ManagedUrlCard(
 									})}>
 										<p class="text-white">"Cancel"</p>
 									</Link>
-
-								}.into_view()
+								}
+									.into_view()
 							} else {
 								view! {
 									<Link on_click={Rc::new(move |_| {
 										show_update_url.update(|val| *val = !*val)
 									})}>
 
-										<Icon
-											icon={IconType::Edit}
-											size={Size::ExtraSmall}
-										/>
+										<Icon icon={IconType::Edit} size={Size::ExtraSmall} />
 									</Link>
 									<Link on_click={Rc::new(move |_| {
 										show_delete_dialogue.set(true);
@@ -221,9 +240,10 @@ pub fn ManagedUrlCard(
 											color={Color::Error}
 										/>
 									</Link>
-								}.into_view()
+								}
+									.into_view()
 							}
-						}
+						}}
 					</td>
 				</Transition>
 			</Show>
diff --git a/hosted-frontend/src/pages/domain/managed_url/dashboard/create.rs b/hosted-frontend/src/pages/domain/managed_url/dashboard/create.rs
index 270216990..ce7596287 100644
--- a/hosted-frontend/src/pages/domain/managed_url/dashboard/create.rs
+++ b/hosted-frontend/src/pages/domain/managed_url/dashboard/create.rs
@@ -41,17 +41,15 @@ pub fn CreateManagedUrlDashboard(
 
 	view! {
 		<Modal color_variant={SecondaryColorVariant::Light}>
-			<div
-				class="w-3/5 center-modal text-white text-sm flex flex-col items-start justify-start bg-secondary-light br-sm p-xl show-center-modal gap-lg"
-			>
+			<div class="w-3/5 center-modal text-white text-sm flex flex-col items-start justify-start bg-secondary-light br-sm p-xl show-center-modal gap-lg">
 				<div class="flex items-center justify-start">
 					<h3 class="text-white text-lg">"Create New Managed URL"</h3>
 					<Link to="">
 						"Documentation"
 						<Icon
-							icon=IconType::Link
-							size=Size::ExtraExtraSmall
-							color=Color::Primary
+							icon={IconType::Link}
+							size={Size::ExtraExtraSmall}
+							color={Color::Primary}
 							class="ml-xxs"
 						/>
 					</Link>
@@ -62,7 +60,7 @@ pub fn CreateManagedUrlDashboard(
 					path={path}
 					domain={domain}
 					url_type={url_type}
-					is_create_mode={true}
+					is_create_mode=true
 					sub_domain={sub_domain}
 					show_form={show_create}
 					on_submit={on_submit_create}
diff --git a/hosted-frontend/src/pages/domain/managed_url/dashboard/head.rs b/hosted-frontend/src/pages/domain/managed_url/dashboard/head.rs
index eddbe92fd..479aa6833 100644
--- a/hosted-frontend/src/pages/domain/managed_url/dashboard/head.rs
+++ b/hosted-frontend/src/pages/domain/managed_url/dashboard/head.rs
@@ -18,30 +18,24 @@ pub fn UrlDashboardHead(
 						<PageTitle icon_position={PageTitleIconPosition::End}>
 							"Incfrastructure"
 						</PageTitle>
-						<PageTitle variant={PageTitleVariant::SubHeading}>
-							"Managed URL"
-						</PageTitle>
+						<PageTitle variant={PageTitleVariant::SubHeading}>"Managed URL"</PageTitle>
 					</PageTitleContainer>
 
 					<PageDescription
 						description="Create and Manage URLs with ease using Patr."
-						doc_link={Some(
-							"https://docs.patr.cloud/features/managed-urls/".to_owned(),
-						)}
+						doc_link={Some("https://docs.patr.cloud/features/managed-urls/".to_owned())}
 					/>
 				</div>
 
 				<Link
 					r#type={Variant::Button}
 					style_variant={LinkStyleVariant::Contained}
-					on_click=Rc::new(move |ev| {
-						on_click_create.call(ev.clone())
-					})
+					on_click={Rc::new(move |ev| { on_click_create.call(ev.clone()) })}
 				>
 					"CREATE MANAGED URL"
 					<Icon
-						icon=IconType::Plus
-						size=Size::ExtraSmall
+						icon={IconType::Plus}
+						size={Size::ExtraSmall}
 						class="ml-xs"
 						color={Color::Black}
 					/>
diff --git a/hosted-frontend/src/pages/domain/managed_url/dashboard/mod.rs b/hosted-frontend/src/pages/domain/managed_url/dashboard/mod.rs
index 3c3a02af9..fa66a1629 100644
--- a/hosted-frontend/src/pages/domain/managed_url/dashboard/mod.rs
+++ b/hosted-frontend/src/pages/domain/managed_url/dashboard/mod.rs
@@ -30,11 +30,7 @@ pub fn UrlDashboard() -> impl IntoView {
 				"delete this line hosted-frontend/src/pages/domain/managed_url/dashboard/mod.rs:35"
 			);
 			view! {
-				<For
-					each={move || data.urls.clone()}
-					key={|state| state.id}
-					let:url
-				>
+				<For each={move || data.urls.clone()} key={|state| state.id} let:url>
 					<ManagedUrls
 						managed_url={Signal::derive(move || url.clone())}
 						class="border-b border-border-color"
@@ -47,16 +43,12 @@ pub fn UrlDashboard() -> impl IntoView {
 	};
 
 	view! {
-		<Show when=move || show_create.get()>
-			<CreateManagedUrlDashboard
-				show_create={show_create}
-			/>
+		<Show when={move || show_create.get()}>
+			<CreateManagedUrlDashboard show_create={show_create} />
 		</Show>
-		<UrlDashboardHead
-			on_click_create={move |_| {
-				show_create.set(true);
-			}}
-		/>
+		<UrlDashboardHead on_click_create={move |_| {
+			show_create.set(true);
+		}} />
 		<ContainerBody class="px-xl">
 			<div class="flex flex-col items-start justify-start w-full h-full px-md py-xl gap-md">
 				<TableDashboard
@@ -69,11 +61,7 @@ pub fn UrlDashboard() -> impl IntoView {
 						"".into_view(),
 					]}
 
-					render_rows={view! {
-						<Transition>
-							{table_rows}
-						</Transition>
-					}.into_view()}
+					render_rows={view! { <Transition>{table_rows}</Transition> }.into_view()}
 				/>
 			</div>
 		</ContainerBody>
diff --git a/hosted-frontend/src/pages/domain/managed_url/dashboard/update.rs b/hosted-frontend/src/pages/domain/managed_url/dashboard/update.rs
index d59c513b6..0d2552271 100644
--- a/hosted-frontend/src/pages/domain/managed_url/dashboard/update.rs
+++ b/hosted-frontend/src/pages/domain/managed_url/dashboard/update.rs
@@ -101,7 +101,7 @@ pub fn UpdateManagedUrl(
 				domain={domain}
 				sub_domain={sub_domain}
 				path={path}
-				is_create_mode={false}
+				is_create_mode=false
 				show_form={show_component}
 				url={url}
 				port={port}
diff --git a/hosted-frontend/src/pages/domain/managed_url/dashboard/url_form.rs b/hosted-frontend/src/pages/domain/managed_url/dashboard/url_form.rs
index 007d81051..3fd128e0f 100644
--- a/hosted-frontend/src/pages/domain/managed_url/dashboard/url_form.rs
+++ b/hosted-frontend/src/pages/domain/managed_url/dashboard/url_form.rs
@@ -128,197 +128,209 @@ pub fn ManagedURLForm(
 				</div>
 			</div>
 			<div class="flex items-start justify-start gap-md w-full">
-				{logging::log!("{:?}", url_type.get())}
-				<div class="flex-3">
+				{logging::log!("{:?}", url_type.get())} <div class="flex-3">
 					<InputDropdown
 						value={url_type.with(|val| val.to_case(Case::Snake))}
-						on_select={move |variant: String| {
-							url_type.set(variant.clone())
-						}}
+						on_select={move |variant: String| { url_type.set(variant.clone()) }}
 						variant={SecondaryColorVariant::Medium}
 						placeholder={"Type".to_string()}
-						options={
-							ManagedUrlType::VARIANTS
-								.iter()
-								.map(|variant| {
-									let label = variant.to_case(Case::Title);
-									let id = variant.to_case(Case::Snake);
-
-									InputDropdownOption {
-										id,
-										label,
-										disabled: false,
-									}
-								})
-								.collect::<Vec<_>>()
-						}
+						options={ManagedUrlType::VARIANTS
+							.iter()
+							.map(|variant| {
+								let label = variant.to_case(Case::Title);
+								let id = variant.to_case(Case::Snake);
+								InputDropdownOption {
+									id,
+									label,
+									disabled: false,
+								}
+							})
+							.collect::<Vec<_>>()}
 					/>
 				</div>
-				{
-					move || url_type.with(|url_type| match ManagedUrlTypeDiscriminant::from_str(url_type) {
-						Ok(ManagedUrlTypeDiscriminant::ProxyDeployment) => view! {
-							<Transition>
-								{
-									move || match deployment_list.get() {
-										Some(Ok(deployments)) => view! {
-											<div class="flex-7">
-												<InputDropdown
-													variant={SecondaryColorVariant::Medium}
-													placeholder="Select Deployment"
-													on_select={
-														move |val: String| {
-															url.set(val);
-														}
-													}
-													options={
-														deployments.deployments.iter().map(|deployment| InputDropdownOption {
-															id: deployment.id.to_string(),
-															label: deployment.name.clone(),
-															disabled: false
-														}).collect::<Vec<_>>()
-													}
-												/>
-											</div>
+				{move || {
+					url_type
+						.with(|url_type| match ManagedUrlTypeDiscriminant::from_str(url_type) {
+							Ok(ManagedUrlTypeDiscriminant::ProxyDeployment) => {
+								view! {
+									<Transition>
+										{move || match deployment_list.get() {
+											Some(Ok(deployments)) => {
+												view! {
+													<div class="flex-7">
+														<InputDropdown
+															variant={SecondaryColorVariant::Medium}
+															placeholder="Select Deployment"
+															on_select={move |val: String| {
+																url.set(val);
+															}}
+															options={deployments
+																.deployments
+																.iter()
+																.map(|deployment| InputDropdownOption {
+																	id: deployment.id.to_string(),
+																	label: deployment.name.clone(),
+																	disabled: false,
+																})
+																.collect::<Vec<_>>()}
+														/>
+													</div>
 
-											<div class="flex-2">
-												<InputDropdown
-													placeholder="Select Port"
-													variant={SecondaryColorVariant::Medium}
-													value={port_string}
-													on_select={move |val: String| {
-														if let Ok(val) = u16::from_str(val.as_str()) {
-															port.set(val);
-														}
-													}}
-													options={vec![]}
-												/>
-											</div>
-										}.into_view(),
-										Some(Err(_)) => view! {
-											<div class="flex-9">
-												<InputDropdown
-													variant={SecondaryColorVariant::Medium}
-													placeholder="Error Loading Deployments"
-													options={vec![
-														InputDropdownOption {
-															id: "error".to_string(),
-															label: "Error Loading Deployments".to_string(),
-															disabled: true,
-														}
-													]}
-												/>
-											</div>
-										}.into_view(),
-										None => view! {}.into_view()
-									}
+													<div class="flex-2">
+														<InputDropdown
+															placeholder="Select Port"
+															variant={SecondaryColorVariant::Medium}
+															value={port_string}
+															on_select={move |val: String| {
+																if let Ok(val) = u16::from_str(val.as_str()) {
+																	port.set(val);
+																}
+															}}
+															options={vec![]}
+														/>
+													</div>
+												}
+													.into_view()
+											}
+											Some(Err(_)) => {
+												view! {
+													<div class="flex-9">
+														<InputDropdown
+															variant={SecondaryColorVariant::Medium}
+															placeholder="Error Loading Deployments"
+															options={vec![
+																InputDropdownOption {
+																	id: "error".to_string(),
+																	label: "Error Loading Deployments".to_string(),
+																	disabled: true,
+																},
+															]}
+														/>
+													</div>
+												}
+													.into_view()
+											}
+											None => view! {}.into_view(),
+										}}
+									</Transition>
 								}
-							</Transition>
-						}.into_view(),
-						Ok(ManagedUrlTypeDiscriminant::ProxyStaticSite) => view! {
-							<div class="flex-9">
-								<InputDropdown
-									variant={SecondaryColorVariant::Medium}
-									placeholder="Select Static Site"
-									options={vec![]}
-								/>
-							</div>
+									.into_view()
+							}
+							Ok(ManagedUrlTypeDiscriminant::ProxyStaticSite) => {
+								view! {
+									<div class="flex-9">
+										<InputDropdown
+											variant={SecondaryColorVariant::Medium}
+											placeholder="Select Static Site"
+											options={vec![]}
+										/>
+									</div>
 
-							<div class="flex-2">
-								<label class="flex items-center justify-center gap-sm w-full rounded-sm bg-secondary-medium row-card">
-									<input
-										type="checkbox"
-										prop:checked={move || http_only.get()}
-										on:input={move |_| {
-											http_only.update(|v| *v = !*v);
-										}}
-									/>
-									<p>"HTTP ONLY"</p>
-								</label>
-							</div>
-						}.into_view(),
-						Ok(ManagedUrlTypeDiscriminant::Redirect) => view! {
-							<div class="flex-4">
-								<Input
-									variant={SecondaryColorVariant::Medium}
-									r#type={InputType::Text}
-									start_text={Some("https://".to_string())}
-									placeholder="URL"
-									value={url}
-									on_input={Box::new(move |ev| {
-										url.set(event_target_value(&ev));
-									})}
-								/>
-							</div>
+									<div class="flex-2">
+										<label class="flex items-center justify-center gap-sm w-full rounded-sm bg-secondary-medium row-card">
+											<input
+												type="checkbox"
+												prop:checked={move || http_only.get()}
+												on:input={move |_| {
+													http_only.update(|v| *v = !*v);
+												}}
+											/>
+											<p>"HTTP ONLY"</p>
+										</label>
+									</div>
+								}
+									.into_view()
+							}
+							Ok(ManagedUrlTypeDiscriminant::Redirect) => {
+								view! {
+									<div class="flex-4">
+										<Input
+											variant={SecondaryColorVariant::Medium}
+											r#type={InputType::Text}
+											start_text={Some("https://".to_string())}
+											placeholder="URL"
+											value={url}
+											on_input={Box::new(move |ev| {
+												url.set(event_target_value(&ev));
+											})}
+										/>
+									</div>
 
-							<div class="flex-2">
-								<label class="flex items-center justify-center gap-sm w-full rounded-sm bg-secondary-medium row-card">
-									<input
-										type="checkbox"
-										prop:checked={move || http_only.get()}
-										on:input={move |_| {
-											http_only.update(|v| *v = !*v);
-										}}
-									/>
-									<p>"HTTP ONLY"</p>
-								</label>
-							</div>
+									<div class="flex-2">
+										<label class="flex items-center justify-center gap-sm w-full rounded-sm bg-secondary-medium row-card">
+											<input
+												type="checkbox"
+												prop:checked={move || http_only.get()}
+												on:input={move |_| {
+													http_only.update(|v| *v = !*v);
+												}}
+											/>
+											<p>"HTTP ONLY"</p>
+										</label>
+									</div>
 
-							<div class="flex-3">
-								<label class="flex items-center justify-center gap-sm w-full rounded-sm bg-secondary-medium row-card">
-									<input
-										prop:checked={permanent_redirect}
-										type="checkbox"
-										on:input={move |_| {
-											permanent_redirect.update(|val| *val = !*val)
-										}}
-									/>
-									<p>"PERMANENT REDIRECT"</p>
-								</label>
-							</div>
-						}.into_view(),
-						Ok(ManagedUrlTypeDiscriminant::ProxyUrl) => view! {
-							<div class="flex-7">
-								<Input
-									variant={SecondaryColorVariant::Medium}
-									r#type={InputType::Text}
-									start_text={Some("https://".to_string())}
-									placeholder="URL"
-									value={url}
-									on_input={Box::new(move |ev| {
-										url.set(event_target_value(&ev));
-									})}
-								/>
-							</div>
+									<div class="flex-3">
+										<label class="flex items-center justify-center gap-sm w-full rounded-sm bg-secondary-medium row-card">
+											<input
+												prop:checked={permanent_redirect}
+												type="checkbox"
+												on:input={move |_| {
+													permanent_redirect.update(|val| *val = !*val)
+												}}
+											/>
+											<p>"PERMANENT REDIRECT"</p>
+										</label>
+									</div>
+								}
+									.into_view()
+							}
+							Ok(ManagedUrlTypeDiscriminant::ProxyUrl) => {
+								view! {
+									<div class="flex-7">
+										<Input
+											variant={SecondaryColorVariant::Medium}
+											r#type={InputType::Text}
+											start_text={Some("https://".to_string())}
+											placeholder="URL"
+											value={url}
+											on_input={Box::new(move |ev| {
+												url.set(event_target_value(&ev));
+											})}
+										/>
+									</div>
 
-							<div class="flex-2">
-								<label class="flex items-center justify-center gap-sm w-full rounded-sm bg-secondary-medium row-card">
-									<input
-										type="checkbox"
-										prop:checked={http_only}
-										on:input={move |_| {
-											http_only.update(|val| *val = !*val)
-										}}
-									/>
-									<p>"HTTP ONLY"</p>
-								</label>
-							</div>
-						}.into_view(),
-						_ => view! {
-							<div class="flex-9">
-								<Input
-									variant={SecondaryColorVariant::Medium}
-									r#type={InputType::Text}
-									start_text={Some("https://".to_string())}
-									placeholder="URL"
-									value={url}
-									on_input={Box::new(move |ev| {
-										url.set(event_target_value(&ev));
-									})}
-								/>
-							</div>
-						}.into_view()
-					})
-				}
+									<div class="flex-2">
+										<label class="flex items-center justify-center gap-sm w-full rounded-sm bg-secondary-medium row-card">
+											<input
+												type="checkbox"
+												prop:checked={http_only}
+												on:input={move |_| { http_only.update(|val| *val = !*val) }}
+											/>
+											<p>"HTTP ONLY"</p>
+										</label>
+									</div>
+								}
+									.into_view()
+							}
+							_ => {
+								view! {
+									<div class="flex-9">
+										<Input
+											variant={SecondaryColorVariant::Medium}
+											r#type={InputType::Text}
+											start_text={Some("https://".to_string())}
+											placeholder="URL"
+											value={url}
+											on_input={Box::new(move |ev| {
+												url.set(event_target_value(&ev));
+											})}
+										/>
+									</div>
+								}
+									.into_view()
+							}
+						})
+				}}
 			</div>
 			<div class="w-full flex justify-end items-center mt-auto gap-md">
 				<Link
@@ -331,19 +343,15 @@ pub fn ManagedURLForm(
 
 				<Show
 					when={move || is_create_mode.get()}
-					fallback={move || view! {
-						<Link
-							should_submit={true}
-							style_variant={LinkStyleVariant::Contained}
-						>
-							"UPDATE"
-						</Link>
+					fallback={move || {
+						view! {
+							<Link should_submit=true style_variant={LinkStyleVariant::Contained}>
+								"UPDATE"
+							</Link>
+						}
 					}}
 				>
-					<Link
-						should_submit={true}
-						style_variant={LinkStyleVariant::Contained}
-					>
+					<Link should_submit=true style_variant={LinkStyleVariant::Contained}>
 						"CREATE"
 					</Link>
 				</Show>
diff --git a/hosted-frontend/src/pages/domain/managed_url/dashboard/url_item.rs b/hosted-frontend/src/pages/domain/managed_url/dashboard/url_item.rs
index 930ec67ad..7e0069f7d 100644
--- a/hosted-frontend/src/pages/domain/managed_url/dashboard/url_item.rs
+++ b/hosted-frontend/src/pages/domain/managed_url/dashboard/url_item.rs
@@ -36,7 +36,7 @@ pub fn ManagedUrls(
 				on:click={move |_| expanded_urls.update(|val: &mut bool| *val = !*val)}
 				class="flex justify-start items-center w-full h-full px-md py-sm rounded-sm gap-sm text-sm"
 			>
-				<Icon icon={MaybeSignal::derive(icon_type)} size={Size::ExtraExtraSmall}/>
+				<Icon icon={MaybeSignal::derive(icon_type)} size={Size::ExtraExtraSmall} />
 				"On Patr"
 			</td>
 
@@ -44,10 +44,7 @@ pub fn ManagedUrls(
 				<td class="flex flex-col items-start justify-start w-full px-xl pb-md">
 					<table class="flex flex-col items-start justify-start w-full">
 						<tbody class="flex flex-col items-start justify-start w-full">
-							<ManagedUrlCard
-								managed_url={managed_url}
-								enable_radius_on_top=true
-							/>
+							<ManagedUrlCard managed_url={managed_url} enable_radius_on_top=true />
 						</tbody>
 					</table>
 				</td>
diff --git a/hosted-frontend/src/pages/domain/mod.rs b/hosted-frontend/src/pages/domain/mod.rs
index 3402add5a..526eb5720 100644
--- a/hosted-frontend/src/pages/domain/mod.rs
+++ b/hosted-frontend/src/pages/domain/mod.rs
@@ -2,15 +2,16 @@ use leptos_router::*;
 
 use crate::prelude::*;
 
+/// The Routes for the Domain Configuration
 #[component(transparent)]
 pub fn DomainConfigurationRoutes() -> impl IntoView {
 	view! {
-		<Route path={AppRoutes::Empty} view={|| view! { <Outlet/> }}>
+		<Route path={AppRoutes::Empty} view={|| view! { <Outlet /> }}>
 			<Route path={LoggedInRoute::ManagedUrl} view={ManagedUrlPage}>
-				<Route path={"create"} view={|| view! {<div>"create"</div>}} />
+				<Route path="create" view={|| view! { <div>"create"</div> }} />
 				<Route path={AppRoutes::Empty} view={UrlDashboard} />
 			</Route>
-			<Route path={LoggedInRoute::Domain} view={DomainsDashboard}/>
+			<Route path={LoggedInRoute::Domain} view={DomainsDashboard} />
 		</Route>
 	}
 }
diff --git a/hosted-frontend/src/pages/infrastructure/container_registry/container_registry_dashboard.rs b/hosted-frontend/src/pages/infrastructure/container_registry/container_registry_dashboard.rs
index f1a80a2d6..b51df58a1 100644
--- a/hosted-frontend/src/pages/infrastructure/container_registry/container_registry_dashboard.rs
+++ b/hosted-frontend/src/pages/infrastructure/container_registry/container_registry_dashboard.rs
@@ -18,7 +18,7 @@ pub struct ContainerRegistryItem {
 pub fn ContainerRegistry() -> impl IntoView {
 	view! {
 		<ContainerMain class="my-md">
-			<Outlet/>
+			<Outlet />
 		</ContainerMain>
 	}
 }
@@ -88,7 +88,7 @@ pub fn ContainerRegistryDashboard() -> impl IntoView {
 
 				render_rows={view! {
 					<For each={move || data.get()} key={|state| state.id.clone()} let:child>
-						<ContainerRegistryCard item={child}/>
+						<ContainerRegistryCard item={child} />
 					</For>
 				}
 					.into_view()}
diff --git a/hosted-frontend/src/pages/infrastructure/container_registry/container_registry_item.rs b/hosted-frontend/src/pages/infrastructure/container_registry/container_registry_item.rs
index 919fe559c..aa790a0b0 100644
--- a/hosted-frontend/src/pages/infrastructure/container_registry/container_registry_item.rs
+++ b/hosted-frontend/src/pages/infrastructure/container_registry/container_registry_item.rs
@@ -27,7 +27,11 @@ pub fn ContainerRegistryCard(item: ContainerRegistryItem) -> impl IntoView {
 				</td>
 				<td class="flex-col-1 fr-fe-ct">
 					<button class="btn-icon">
-						<Icon icon={IconType::Trash2} size={Size::ExtraSmall} color={Color::Error}/>
+						<Icon
+							icon={IconType::Trash2}
+							size={Size::ExtraSmall}
+							color={Color::Error}
+						/>
 					</button>
 				</td>
 			</A>
diff --git a/hosted-frontend/src/pages/infrastructure/container_registry/manage_repository/mod.rs b/hosted-frontend/src/pages/infrastructure/container_registry/manage_repository/mod.rs
index 9fc1bf935..3ea57c342 100644
--- a/hosted-frontend/src/pages/infrastructure/container_registry/manage_repository/mod.rs
+++ b/hosted-frontend/src/pages/infrastructure/container_registry/manage_repository/mod.rs
@@ -76,11 +76,11 @@ pub fn ManageRepository() -> impl IntoView {
 					name: "General".to_owned(),
 					path: "".to_owned(),
 				},
-			]}/>
+			]} />
 
 		</ContainerHead>
 		<ContainerBody class="px-xxl pt-xl pb-sm gap-md">
-			<Outlet/>
+			<Outlet />
 		</ContainerBody>
 	}
 }
diff --git a/hosted-frontend/src/pages/infrastructure/database/create_database/head.rs b/hosted-frontend/src/pages/infrastructure/database/create_database/head.rs
index 87e4b5462..1746e011c 100644
--- a/hosted-frontend/src/pages/infrastructure/database/create_database/head.rs
+++ b/hosted-frontend/src/pages/infrastructure/database/create_database/head.rs
@@ -17,11 +17,7 @@ pub fn CreateDatabaseHeader() -> impl IntoView {
 						>
 							"Database"
 						</PageTitle>
-						<PageTitle
-							variant={PageTitleVariant::SubHeading}
-						>
-							"Create"
-						</PageTitle>
+						<PageTitle variant={PageTitleVariant::SubHeading}>"Create"</PageTitle>
 					</PageTitleContainer>
 
 					<PageDescription
diff --git a/hosted-frontend/src/pages/infrastructure/database/create_database/mod.rs b/hosted-frontend/src/pages/infrastructure/database/create_database/mod.rs
index 318eda0bf..0c4139958 100644
--- a/hosted-frontend/src/pages/infrastructure/database/create_database/mod.rs
+++ b/hosted-frontend/src/pages/infrastructure/database/create_database/mod.rs
@@ -85,44 +85,37 @@ pub fn CreateDatabase() -> impl IntoView {
 
 					<div class="grid-col-4 flex-col-10 pl-xs full-width gap-sm">
 						// <For
-						//  	each=
-						// 	key=|state| state.clone()
-						// 	let:engine
+						// each=
+						// key=|state| state.clone()
+						// let:engine
 						// >
 						// </For>
-						{
-							DatabaseEngine::VARIANTS
-								.iter()
-								.map(|engine| match DatabaseEngine::from_str(engine.to_owned()) {
-									Ok(engine) => view! {
+						{DatabaseEngine::VARIANTS
+							.iter()
+							.map(|engine| match DatabaseEngine::from_str(engine.to_owned()) {
+								Ok(engine) => {
+									view! {
 										<DatabaseTypeCard
 											version=4.
 											database_type={engine.clone()}
-											is_selected={
-												Signal::derive(
-													// move || database_info.with(|info| {
-													// 	info.database_type.clone().is_some_and(|val| val == engine.clone())
-													// })
-													// move || database_info.get().database_type.is_some_and(|val| val == engine.clone())
-													move || false
-												)
-											}
+											is_selected={Signal::derive(move || false)}
 											on_click={move |engine| {
-												database_info.update(|info| {
-													if info.database_type.is_some() {
-														info.database_type = None
-													} else {
-														info.database_type = Some(engine)
-													}
-												})
+												database_info
+													.update(|info| {
+														if info.database_type.is_some() {
+															info.database_type = None
+														} else {
+															info.database_type = Some(engine)
+														}
+													})
 											}}
 										/>
-									}.into_view(),
-									Err(_) =>  view! {}.into_view()
-								})
-								.collect_view()
-						}
-
+									}
+										.into_view()
+								}
+								Err(_) => view! {}.into_view(),
+							})
+							.collect_view()}
 						<Show when={move || !db_type_error.get().clone().is_empty()}>
 							<Alert r#type={AlertType::Error} class="mt-xs">
 								{move || db_type_error.get().clone()}
@@ -143,15 +136,14 @@ pub fn CreateDatabase() -> impl IntoView {
 							r#type={InputType::Text}
 							class="full-width"
 							placeholder="Database Name"
-							value={Signal::derive(move || database_info.get().name.unwrap_or_default())}
-							on_input={
-								Box::new(move |ev| {
-									ev.prevent_default();
-									database_info.update(
-										|info| info.name = Some(event_target_value(&ev))
-									)
-								})
-							}
+							value={Signal::derive(move || {
+								database_info.get().name.unwrap_or_default()
+							})}
+							on_input={Box::new(move |ev| {
+								ev.prevent_default();
+								database_info
+									.update(|info| info.name = Some(event_target_value(&ev)))
+							})}
 						/>
 
 						<Show when={move || !name_error.get().clone().is_empty()}>
@@ -169,32 +161,32 @@ pub fn CreateDatabase() -> impl IntoView {
 						</label>
 					</div>
 					<div class="flex-col-10 pl-xs">
-						 <Transition>
+						<Transition>
 							<InputDropdown
 								placeholder="Choose A Runner"
 								class="full-width"
 								value={selected_runner}
-								options={Signal::derive(
-									move || match runner_list.get() {
-										Some(Ok(data)) => {
-											data.runners
-												.iter()
-												.map(|runner| InputDropdownOption {
-													id: runner.id.to_string().clone(),
-													disabled: runner.data.connected,
-													label: runner.name.clone()
-												})
-												.collect::<Vec<_>>()
-										},
-										_ => vec![
+								options={Signal::derive(move || match runner_list.get() {
+									Some(Ok(data)) => {
+										data.runners
+											.iter()
+											.map(|runner| InputDropdownOption {
+												id: runner.id.to_string().clone(),
+												disabled: runner.data.connected,
+												label: runner.name.clone(),
+											})
+											.collect::<Vec<_>>()
+									}
+									_ => {
+										vec![
 											InputDropdownOption {
 												id: "error".to_string(),
 												disabled: true,
-												label: "Error Loading".to_string()
-											}
+												label: "Error Loading".to_string(),
+											},
 										]
-									})
-								}
+									}
+								})}
 							/>
 						</Transition>
 
@@ -208,11 +200,7 @@ pub fn CreateDatabase() -> impl IntoView {
 			</div>
 
 			<div class="fr-fe-ct gap-md full-width fit-wide-screen mx-auto mt-auto pt-md pb-xl px-md">
-				<Link
-					r#type={Variant::Link}
-					style_variant={LinkStyleVariant::Plain}
-					to="/database"
-				>
+				<Link r#type={Variant::Link} style_variant={LinkStyleVariant::Plain} to="/database">
 					"BACK"
 				</Link>
 				<Link
diff --git a/hosted-frontend/src/pages/infrastructure/database/database_card.rs b/hosted-frontend/src/pages/infrastructure/database/database_card.rs
index b669606ed..ede3a4291 100644
--- a/hosted-frontend/src/pages/infrastructure/database/database_card.rs
+++ b/hosted-frontend/src/pages/infrastructure/database/database_card.rs
@@ -57,7 +57,9 @@ pub fn DatabaseCard(
 					class="mb-xxs ml-xxs"
 					status={
 						let database = database.clone();
-						Signal::derive(move || Some(Status::from_database_status(database.get().status.clone())))
+						Signal::derive(move || Some(
+							Status::from_database_status(database.get().status.clone()),
+						))
 					}
 				/>
 			</div>
@@ -69,9 +71,7 @@ pub fn DatabaseCard(
 						view! {
 							<div class="half-width p-xxs">
 								<div class="bg-secondary-medium br-sm px-lg py-sm fc-ct-fs">
-									<span class="letter-sp-md txt-xxs txt-grey">
-										{item.label}
-									</span>
+									<span class="letter-sp-md txt-xxs txt-grey">{item.label}</span>
 									<span class="txt-primary w-15 txt-of-ellipsis of-hidden">
 										{item.value}
 									</span>
@@ -79,8 +79,7 @@ pub fn DatabaseCard(
 							</div>
 						}
 					})
-					.collect::<Vec<_>>()
-				}
+					.collect::<Vec<_>>()}
 
 			</div>
 			<div class="fr-fs-ct mt-xs full-width px-xxs">
diff --git a/hosted-frontend/src/pages/infrastructure/database/database_dashboard.rs b/hosted-frontend/src/pages/infrastructure/database/database_dashboard.rs
index b56c5cd42..ce76a6d0c 100644
--- a/hosted-frontend/src/pages/infrastructure/database/database_dashboard.rs
+++ b/hosted-frontend/src/pages/infrastructure/database/database_dashboard.rs
@@ -25,34 +25,39 @@ pub fn DatabaseDashboard() -> impl IntoView {
 					render_items={
 						view! {
 							<Transition>
-								 {
-									move || match database_list.get() {
-										Some(resp) => {
-											match resp {
-												Ok(data) => view! {
+								{move || match database_list.get() {
+									Some(resp) => {
+										match resp {
+											Ok(data) => {
+												view! {
 													<For
 														each={move || data.database.clone()}
 														key={|state| state.id}
 														let:database_info
 													>
-														<DatabaseCard database={database_info}/>
+														<DatabaseCard database={database_info} />
 													</For>
-												}.into_view(),
-												Err(_) => view! {
+												}
+													.into_view()
+											}
+											Err(_) => {
+												view! {
 													<div class="full-width txt-white">
 														"ERROR LOADING DATABASES"
 													</div>
 													<a href="/database/some">"here"</a>
-												}.into_view()
+												}
+													.into_view()
 											}
-										},
-										_ => view! {
-											<div class="full-width txt-white">
-												"LOADING DATABASES"
-											</div>
-										}.into_view()
+										}
+									}
+									_ => {
+										view! {
+											<div class="full-width txt-white">"LOADING DATABASES"</div>
+										}
+											.into_view()
 									}
-								}
+								}}
 							</Transition>
 						}
 					}
diff --git a/hosted-frontend/src/pages/infrastructure/database/database_head.rs b/hosted-frontend/src/pages/infrastructure/database/database_head.rs
index 3c1090efc..2b576d293 100644
--- a/hosted-frontend/src/pages/infrastructure/database/database_head.rs
+++ b/hosted-frontend/src/pages/infrastructure/database/database_head.rs
@@ -15,9 +15,7 @@ pub fn DatabaseHead() -> impl IntoView {
 
 					<PageDescription
 						description="Create and manage Databases using Patr."
-						doc_link={Some(
-							"https://docs.patr.cloud/features/databases/".to_owned(),
-						)}
+						doc_link={Some("https://docs.patr.cloud/features/databases/".to_owned())}
 					/>
 
 				</div>
diff --git a/hosted-frontend/src/pages/infrastructure/database/database_type_card.rs b/hosted-frontend/src/pages/infrastructure/database/database_type_card.rs
index a9c3f9aa4..c6fd8cd43 100644
--- a/hosted-frontend/src/pages/infrastructure/database/database_type_card.rs
+++ b/hosted-frontend/src/pages/infrastructure/database/database_type_card.rs
@@ -61,11 +61,11 @@ pub fn DatabaseTypeCard(
 					on_click.call(database_type.get());
 				}
 			}
-			class=format!(
+			class={format!(
 				"fc-ct-ct bg-secondary-light br-sm px-md py-sm outline-info-focus database-type-card
 				txt-white txt-sm {}",
-				if is_selected.get() {"bg-primary"} else {"bd-none"}
-			)
+				if is_selected.get() { "bg-primary" } else { "bd-none" },
+			)}
 		>
 			<img
 				alt={database_type.get().to_string()}
diff --git a/hosted-frontend/src/pages/infrastructure/database/manage_database/change_password.rs b/hosted-frontend/src/pages/infrastructure/database/manage_database/change_password.rs
index 32b54c90a..d94f16404 100644
--- a/hosted-frontend/src/pages/infrastructure/database/manage_database/change_password.rs
+++ b/hosted-frontend/src/pages/infrastructure/database/manage_database/change_password.rs
@@ -23,12 +23,8 @@ pub fn ChangePasswordButton() -> impl IntoView {
 	});
 
 	view! {
-		<Show
-			when=move || show_password_modal.get()
-		>
-			<Modal
-				color_variant={SecondaryColorVariant::Light}
-			>
+		<Show when={move || show_password_modal.get()}>
+			<Modal color_variant={SecondaryColorVariant::Light}>
 				<div
 					style="width: 30%;"
 					class="center-modal txt-white txt-sm fc-fs-fs bg-secondary-light br-sm p-xl show-center-modal gap-lg"
@@ -36,9 +32,14 @@ pub fn ChangePasswordButton() -> impl IntoView {
 					<h3 class="txt-primary txt-lg">"Change Password"</h3>
 
 					<ActionForm action={change_password_action} class="fc-fs-fs gap-lg full-width">
-						<input type="hidden" name="access_token" prop:value={access_token}/>
-						<input type="hidden" name="database_id" prop:value={database_id}/>
-						<input type="hidden" name="workspace_id" prop:value={current_workspace_id.map(|value| value.map(|value| value.to_string()))}/>
+						<input type="hidden" name="access_token" prop:value={access_token} />
+						<input type="hidden" name="database_id" prop:value={database_id} />
+						<input
+							type="hidden"
+							name="workspace_id"
+							prop:value={current_workspace_id
+								.map(|value| value.map(|value| value.to_string()))}
+						/>
 
 						<div class="fc-fs-fs gap-md full-width">
 							<label class="txt-white">"Change the password for this database"</label>
@@ -71,10 +72,7 @@ pub fn ChangePasswordButton() -> impl IntoView {
 							>
 								"CANCEL"
 							</Link>
-							<Link
-								should_submit={true}
-								style_variant={LinkStyleVariant::Contained}
-							>
+							<Link should_submit=true style_variant={LinkStyleVariant::Contained}>
 								"CONFIRM"
 							</Link>
 						</div>
@@ -84,9 +82,7 @@ pub fn ChangePasswordButton() -> impl IntoView {
 		</Show>
 		<div class="fr-sb-fs full-width gap-md mt-xxs">
 			<Link
-				on_click={Rc::new(move |_| {
-					show_password_modal.set(true)
-				})}
+				on_click={Rc::new(move |_| { show_password_modal.set(true) })}
 				class="txt-medium ml-auto"
 			>
 				"CHANGE PASSWORD"
diff --git a/hosted-frontend/src/pages/infrastructure/database/manage_database/details_tab.rs b/hosted-frontend/src/pages/infrastructure/database/manage_database/details_tab.rs
index cc7df8045..5b62fcf18 100644
--- a/hosted-frontend/src/pages/infrastructure/database/manage_database/details_tab.rs
+++ b/hosted-frontend/src/pages/infrastructure/database/manage_database/details_tab.rs
@@ -23,12 +23,12 @@ fn CopyButton(// #[prop(into)]
 			<Show
 				when={move || !copy_data.get()}
 				fallback={move || {
-					view! { <Icon icon={IconType::Check} size={Size::ExtraSmall}/> }.into_view()
+					view! { <Icon icon={IconType::Check} size={Size::ExtraSmall} /> }.into_view()
 				}}
 			>
 
 				<button aria_label="Copy " class="btn-icon">
-					<Icon icon={IconType::Copy} size={Size::ExtraSmall}/>
+					<Icon icon={IconType::Copy} size={Size::ExtraSmall} />
 				</button>
 
 			</Show>
@@ -52,11 +52,9 @@ pub fn ManageDatabaseDetailsTab(
 				<div class="grid grid-col-4 flex-col-10 pl-xs full-width">
 					<DatabaseTypeCard
 						version=4.
-						database_type={Signal::derive(
-							move || store_datbase
-								.clone()
-								.with_value(|db| db.get().engine.clone())
-						)}
+						database_type={Signal::derive(move || {
+							store_datbase.clone().with_value(|db| db.get().engine.clone())
+						})}
 					/>
 				</div>
 			</div>
@@ -84,9 +82,9 @@ pub fn ManageDatabaseDetailsTab(
 				</div>
 				<div class="flex-col-10 pl-xs">
 					<div class="fr-fs-ct br-sm bg-secondary-light full-width py-sm px-xl">
-						<span class="pl-sm">{
-							move || store_datbase.with_value(|db| db.get().region.to_string())
-						}</span>
+						<span class="pl-sm">
+							{move || store_datbase.with_value(|db| db.get().region.to_string())}
+						</span>
 					</div>
 				</div>
 			</div>
@@ -100,12 +98,12 @@ pub fn ManageDatabaseDetailsTab(
 				<div class="flex-col-10 pl-xs">
 					<div class="fr-sb-ct br-sm bg-secondary-light full-width py-sm px-xl">
 						<span class="pl-sm">
-							{
-								move || store_datbase
+							{move || {
+								store_datbase
 									.with_value(|db| db.get().public_connection.username.clone())
-							}
+							}}
 						</span>
-						<CopyButton/>
+						<CopyButton />
 					</div>
 				</div>
 			</div>
@@ -124,7 +122,7 @@ pub fn ManageDatabaseDetailsTab(
 							aria_label="Password"
 							prop:value="********"
 						/>
-						<CopyButton/>
+						<CopyButton />
 					</div>
 
 					<ChangePasswordButton />
@@ -140,12 +138,12 @@ pub fn ManageDatabaseDetailsTab(
 				<div class="flex-col-10 pl-xs">
 					<div class="fr-sb-ct br-sm bg-secondary-light full-width py-sm px-xl">
 						<span class="pl-sm">
-							{
-								move || store_datbase
+							{move || {
+								store_datbase
 									.with_value(|db| db.get().public_connection.host.clone())
-							}
+							}}
 						</span>
-						<CopyButton/>
+						<CopyButton />
 					</div>
 				</div>
 			</div>
@@ -158,10 +156,10 @@ pub fn ManageDatabaseDetailsTab(
 				</div>
 				<div class="flex-col-10 pl-xs">
 					<div class="fr-sb-ct br-sm bg-secondary-light full-width py-sm px-xl">
-						<span class="pl-sm">{
-							move || store_datbase.with_value(|db| db.get().public_connection.port)
-						}</span>
-						<CopyButton/>
+						<span class="pl-sm">
+							{move || store_datbase.with_value(|db| db.get().public_connection.port)}
+						</span>
+						<CopyButton />
 					</div>
 				</div>
 			</div>
@@ -175,17 +173,20 @@ pub fn ManageDatabaseDetailsTab(
 				<div class="flex-col-10 pl-xs">
 					<div class="fr-sb-ct br-sm bg-secondary-light full-width py-sm px-xl">
 						<span class="pl-sm">
-							{
-								move || store_datbase.with_value(|_db| format!(
-									"{}://{}:<DATABASE_PASSWORD>@{}:{}/staging",
-									database_info.get().engine,
-									database_info.get().public_connection.clone().username,
-									database_info.get().public_connection.clone().host,
-									database_info.get().public_connection.clone().port,
-								))
-							}
+							{move || {
+								store_datbase
+									.with_value(|_db| {
+										format!(
+											"{}://{}:<DATABASE_PASSWORD>@{}:{}/staging",
+											database_info.get().engine,
+											database_info.get().public_connection.clone().username,
+											database_info.get().public_connection.clone().host,
+											database_info.get().public_connection.clone().port,
+										)
+									})
+							}}
 						</span>
-						<CopyButton/>
+						<CopyButton />
 					</div>
 				</div>
 			</div>
@@ -197,7 +198,7 @@ pub fn ManageDatabaseDetailsTab(
 					</label>
 				</div>
 				<div class="flex-col-10 pl-xs">
-					<DatabasePlanCard/>
+					<DatabasePlanCard />
 				</div>
 			</div>
 		</div>
diff --git a/hosted-frontend/src/pages/infrastructure/database/manage_database/head.rs b/hosted-frontend/src/pages/infrastructure/database/manage_database/head.rs
index cb87cceb7..ab2b0953b 100644
--- a/hosted-frontend/src/pages/infrastructure/database/manage_database/head.rs
+++ b/hosted-frontend/src/pages/infrastructure/database/manage_database/head.rs
@@ -29,8 +29,11 @@ pub fn ManageDatabaseHeader(
 							let name = name.get().clone();
 							if !name.is_empty() {
 								view! {
-									<PageTitle variant={PageTitleVariant::Text}>{name.clone()}</PageTitle>
-								}.into_view()
+									<PageTitle variant={PageTitleVariant::Text}>
+										{name.clone()}
+									</PageTitle>
+								}
+									.into_view()
 							} else {
 								view! {}.into_view()
 							}
@@ -44,11 +47,7 @@ pub fn ManageDatabaseHeader(
 					color={Color::Error}
 					class="fr-ct-ct gap-xs"
 				>
-					<Icon
-						icon={IconType::Trash2}
-						size={Size::ExtraSmall}
-						color={Color::White}
-					/>
+					<Icon icon={IconType::Trash2} size={Size::ExtraSmall} color={Color::White} />
 					"DELETE"
 				</Link>
 			</div>
diff --git a/hosted-frontend/src/pages/infrastructure/database/manage_database/mod.rs b/hosted-frontend/src/pages/infrastructure/database/manage_database/mod.rs
index 6683b241f..c583c15c9 100644
--- a/hosted-frontend/src/pages/infrastructure/database/manage_database/mod.rs
+++ b/hosted-frontend/src/pages/infrastructure/database/manage_database/mod.rs
@@ -36,41 +36,42 @@ pub fn ManageDatabase() -> impl IntoView {
 	view! {
 		<ContainerMain class="full-width full-height mb-md">
 			<Transition>
-				{
-					move || match database_info.get() {
-						Some(Ok(database)) => {
-							let id = database.database.id;
-							let name = database.database.name.clone();
-							view! {
-								<ManageDatabaseHeader
-									id={Signal::derive(move || Some(id))}
-									name={Signal::derive(move || name.clone())}
-								/>
-								<ContainerBody class="px-xl py-md gap-md">
-									<ManageDatabaseDetailsTab
-										database_info={Signal::derive(move || database.database.clone())}
-									/>
-								</ContainerBody>
-							}.into_view()
-						},
-						Some(Err(_)) => view! {
+				{move || match database_info.get() {
+					Some(Ok(database)) => {
+						let id = database.database.id;
+						let name = database.database.name.clone();
+						view! {
+							<ManageDatabaseHeader
+								id={Signal::derive(move || Some(id))}
+								name={Signal::derive(move || name.clone())}
+							/>
+							<ContainerBody class="px-xl py-md gap-md">
+								<ManageDatabaseDetailsTab database_info={Signal::derive(move || {
+									database.database.clone()
+								})} />
+							</ContainerBody>
+						}
+							.into_view()
+					}
+					Some(Err(_)) => {
+						view! {
 							<ManageDatabaseHeader />
 							<ContainerBody class="px-xl py-md gap-md">
-								<div class="txt-white full-width fr-fc-fc">
-									"Error loading"
-								</div>
+								<div class="txt-white full-width fr-fc-fc">"Error loading"</div>
 							</ContainerBody>
-						}.into_view(),
-						None => view! {
+						}
+							.into_view()
+					}
+					None => {
+						view! {
 							<ManageDatabaseHeader />
 							<ContainerBody class="px-xl py-md gap-md">
-								<div class="txt-white full-width fr-fc-fc">
-									"Loading"
-								</div>
+								<div class="txt-white full-width fr-fc-fc">"Loading"</div>
 							</ContainerBody>
-						}.into_view()
+						}
+							.into_view()
 					}
-				}
+				}}
 			</Transition>
 		</ContainerMain>
 	}
diff --git a/hosted-frontend/src/pages/infrastructure/deployment/components/config_mount_input.rs b/hosted-frontend/src/pages/infrastructure/deployment/components/config_mount_input.rs
index 5df0cbfca..200d0e82e 100644
--- a/hosted-frontend/src/pages/infrastructure/deployment/components/config_mount_input.rs
+++ b/hosted-frontend/src/pages/infrastructure/deployment/components/config_mount_input.rs
@@ -90,9 +90,10 @@ pub fn ConfigMountInput(
 							placeholder="No File Selected"
 							on_input={Box::new(move |ev| {
 								ev.prevent_default();
-
-								// TODO: Remove unsafe unwrap
-								let elem = ev.target().unwrap().unchecked_into::<HtmlInputElement>();
+								let elem = ev
+									.target()
+									.unwrap()
+									.unchecked_into::<HtmlInputElement>();
 								if let Some(files) = elem.files() {
 									for i in 0..files.length() {
 										let file = files.get(i).unwrap();
@@ -112,7 +113,7 @@ pub fn ConfigMountInput(
 								on_add.call((ev.clone(), config_file_path.get(), String::new()))
 							})}
 						>
-							<Icon icon={IconType::Plus} color={Color::Secondary}/>
+							<Icon icon={IconType::Plus} color={Color::Secondary} />
 						</Link>
 					</div>
 				</form>
diff --git a/hosted-frontend/src/pages/infrastructure/deployment/components/deployment_card.rs b/hosted-frontend/src/pages/infrastructure/deployment/components/deployment_card.rs
index 5f54456d4..df09b8ef0 100644
--- a/hosted-frontend/src/pages/infrastructure/deployment/components/deployment_card.rs
+++ b/hosted-frontend/src/pages/infrastructure/deployment/components/deployment_card.rs
@@ -121,19 +121,17 @@ pub fn DeploymentCard(
 					{move || deployment.get().name.clone()}
 				</h4>
 
-				<StatusBadge
-					status={
-						let deployment = deployment.clone();
-						Signal::derive(move || Some(
-							Status::from_deployment_status(deployment.get().status.clone()),
-						))
-					}
-				/>
+				<StatusBadge status={
+					let deployment = deployment.clone();
+					Signal::derive(move || Some(
+						Status::from_deployment_status(deployment.get().status.clone()),
+					))
+				} />
 			</div>
 
 			<div class="deployment-card-items text-white w-full">
-				{
-					move || items
+				{move || {
+					items
 						.get()
 						.into_iter()
 						.map(|item| {
@@ -149,8 +147,7 @@ pub fn DeploymentCard(
 							}
 						})
 						.collect::<Vec<_>>()
-				}
-
+				}}
 				<a
 					href=""
 					class="bg-secondary-medium rounded-sm flex flex-col items-start justify-center w-full"
@@ -164,24 +161,22 @@ pub fn DeploymentCard(
 							size={Size::ExtraSmall}
 						/>
 					</span>
-				</a>
-				<div></div>
+				</a> <div></div>
 			</div>
 
 			<div class="flex justify-between items-center mt-xs w-full px-xxs">
 				<Link
-					disabled={
-						store_deployment.with_value(
-							move |deployment|
-								deployment.get().status.clone() == DeploymentStatus::Deploying ||
-								deployment.get().status.clone() == DeploymentStatus::Errored ||
-								deployment.get().status.clone() == DeploymentStatus::Unreachable
-						)
-					}
+					disabled={store_deployment
+						.with_value(move |deployment| {
+							deployment.get().status.clone() == DeploymentStatus::Deploying
+								|| deployment.get().status.clone() == DeploymentStatus::Errored
+								|| deployment.get().status.clone() == DeploymentStatus::Unreachable
+						})}
 					style_variant={LinkStyleVariant::Contained}
 				>
 					{
-						let deployment = store_deployment.with_value(move |deployment| deployment.get());
+						let deployment = store_deployment
+							.with_value(move |deployment| deployment.get());
 						match deployment.status.clone() {
 							DeploymentStatus::Running => {
 								view! {
@@ -191,7 +186,8 @@ pub fn DeploymentCard(
 										color={Color::Secondary}
 										class="mr-xs"
 									/>
-								}.into_view()
+								}
+									.into_view()
 							}
 							_ => {
 								view! {
@@ -201,23 +197,19 @@ pub fn DeploymentCard(
 										color={Color::Secondary}
 										class="mr-xs"
 									/>
-								}.into_view()
+								}
+									.into_view()
 							}
 						}
 					}
-					{
-						format!(
-							"{}",
-							store_deployment
-								.with_value(
-									move |deployment| deployment
-										.get()
-										.status
-										.to_string()
-										.to_case(Case::Title)
-								)
-						).into_view()
-					}
+					{format!(
+						"{}",
+						store_deployment
+							.with_value(move |deployment| {
+								deployment.get().status.to_string().to_case(Case::Title)
+							}),
+					)
+						.into_view()}
 				</Link>
 
 				<Link
diff --git a/hosted-frontend/src/pages/infrastructure/deployment/components/env_input.rs b/hosted-frontend/src/pages/infrastructure/deployment/components/env_input.rs
index 3afb89fff..b98eb13fc 100644
--- a/hosted-frontend/src/pages/infrastructure/deployment/components/env_input.rs
+++ b/hosted-frontend/src/pages/infrastructure/deployment/components/env_input.rs
@@ -58,13 +58,9 @@ pub fn EnvInput(
 									</div>
 
 									<div class="flex-col-1 fr-ct-ct pl-sm">
-										<button
-											on:click={
-												move |ev| {
-													on_delete.call((ev, child.0.clone()))
-												}
-											}
-										>
+										<button on:click={move |ev| {
+											on_delete.call((ev, child.0.clone()))
+										}}>
 											<Icon
 												icon={IconType::Trash2}
 												color={Color::Error}
@@ -116,7 +112,7 @@ pub fn EnvInput(
 								on_add.call((ev.clone(), env_name.get(), env_value.get()))
 							})}
 						>
-							<Icon icon={IconType::Plus} color={Color::Secondary}/>
+							<Icon icon={IconType::Plus} color={Color::Secondary} />
 						</Link>
 					</div>
 				</div>
diff --git a/hosted-frontend/src/pages/infrastructure/deployment/components/log_statement.rs b/hosted-frontend/src/pages/infrastructure/deployment/components/log_statement.rs
index 1b7f369d0..f87fbe6ae 100644
--- a/hosted-frontend/src/pages/infrastructure/deployment/components/log_statement.rs
+++ b/hosted-frontend/src/pages/infrastructure/deployment/components/log_statement.rs
@@ -25,26 +25,25 @@ pub fn LogStatement(
 
 	view! {
 		<div class={outer_div_class}>
-			<Icon icon={IconType::ChevronRight} size={Size::ExtraSmall} color={Color::Grey}/>
+			<Icon icon={IconType::ChevronRight} size={Size::ExtraSmall} color={Color::Grey} />
 
-			{
-				move || match store_log.with_value(|log| log.get().timestamp.format(&date_formater)) {
-					Ok(date_time) => view! {
+			{move || match store_log.with_value(|log| log.get().timestamp.format(&date_formater)) {
+				Ok(date_time) => {
+					view! {
 						<time date_time={date_time.clone()} class="text-xxs pr-sm">
 							{date_time.clone()}
 						</time>
-					}.into_view(),
-					Err(_) => view! {}.into_view()
+					}
+						.into_view()
 				}
-			}
+				Err(_) => view! {}.into_view(),
+			}}
 			<time date_time="2008-02-14 20:00" class="text-xxs pr-sm">
 				// {new Date(log.timestamp).toUTCString()}
 				{store_log.with_value(|log| log.get().timestamp.format(&date_formater))}
 			</time>
 			" - "
-			<span class="px-sm">
-				{store_log.with_value(|log| log.get().log.clone())}
-			</span>
+			<span class="px-sm">{store_log.with_value(|log| log.get().log.clone())}</span>
 		</div>
 	}
 }
diff --git a/hosted-frontend/src/pages/infrastructure/deployment/components/machine_type_card.rs b/hosted-frontend/src/pages/infrastructure/deployment/components/machine_type_card.rs
index d75200091..a30f90f71 100644
--- a/hosted-frontend/src/pages/infrastructure/deployment/components/machine_type_card.rs
+++ b/hosted-frontend/src/pages/infrastructure/deployment/components/machine_type_card.rs
@@ -30,10 +30,10 @@ pub fn MachineTypeCard(
 		<div
 			class={outer_div_class}
 			on:click={
-					let id = machine_type.get().id;
-					move |_| {
-						on_select.call(id);
-					}
+				let id = machine_type.get().id;
+				move |_| {
+					on_select.call(id);
+				}
 			}
 		>
 			<div class="flex justify-start items-baseline">
diff --git a/hosted-frontend/src/pages/infrastructure/deployment/components/port_input.rs b/hosted-frontend/src/pages/infrastructure/deployment/components/port_input.rs
index 70d1f2d40..a3fc44691 100644
--- a/hosted-frontend/src/pages/infrastructure/deployment/components/port_input.rs
+++ b/hosted-frontend/src/pages/infrastructure/deployment/components/port_input.rs
@@ -107,17 +107,12 @@ pub fn PortInput(
 													</div>
 												</div>
 											}
-										})
-									}
+										})}
 
 									<div class="flex-1 flex items-center justify-center pl-sm">
-										<button
-											on:click={
-												move |ev| {
-													on_delete.call((ev, child.0.to_string()))
-												}
-											}
-										>
+										<button on:click={move |ev| {
+											on_delete.call((ev, child.0.to_string()))
+										}}>
 											<Icon
 												icon={IconType::Trash2}
 												color={Color::Error}
@@ -135,20 +130,19 @@ pub fn PortInput(
 					<div class="flex-5 flex flex-col justify-start items-start pr-lg gap-xxs">
 						<Input
 							value={Signal::derive(move || port_number.get())}
-							on_input={
-								Box::new(move |ev| {
-									ev.prevent_default();
-									port_number.set(event_target_value(&ev));
-								})
-							}
+							on_input={Box::new(move |ev| {
+								ev.prevent_default();
+								port_number.set(event_target_value(&ev));
+							})}
 							r#type={InputType::Number}
 							id="port"
 							class="w-full"
 							placeholder="Enter Port Number"
 						/>
 
-
-						<Show when={move || store_error.with_value(|error| !error.get().clone().is_empty())}>
+						<Show when={move || {
+							store_error.with_value(|error| !error.get().clone().is_empty())
+						}}>
 							<Alert r#type={AlertType::Error} class="mt-xs">
 								{move || store_error.with_value(|error| error.get().clone())}
 							</Alert>
@@ -173,7 +167,7 @@ pub fn PortInput(
 								on_add.call((ev.clone(), port_number.get(), port_type.get()))
 							})}
 						>
-							<Icon icon={IconType::Plus} color={Color::Secondary}/>
+							<Icon icon={IconType::Plus} color={Color::Secondary} />
 						</Link>
 					</div>
 				</div>
diff --git a/hosted-frontend/src/pages/infrastructure/deployment/components/probe_input.rs b/hosted-frontend/src/pages/infrastructure/deployment/components/probe_input.rs
index e8586d275..848190fba 100644
--- a/hosted-frontend/src/pages/infrastructure/deployment/components/probe_input.rs
+++ b/hosted-frontend/src/pages/infrastructure/deployment/components/probe_input.rs
@@ -86,8 +86,8 @@ pub fn ProbeInput(
 
 			<div class="flex-10 flex items-start justify-start">
 				<div class="flex-5 pr-lg">
-					{
-						move || view! {
+					{move || {
+						view! {
 							<InputDropdown
 								placeholder={"Enter Probe Path".to_string()}
 								value={probe_port}
@@ -95,34 +95,26 @@ pub fn ProbeInput(
 									probe_port.set(id.clone());
 									on_select_port.call((id.clone(), probe_path.get().clone()))
 								}}
-								options={
-									available_ports.get()
-										.iter()
-										.map(|x| InputDropdownOption {
-											id: x.to_string(),
-											label: x.to_string(),
-											disabled: false,
-										})
-										.collect::<Vec<_>>()
-								}
+								options={available_ports
+									.get()
+									.iter()
+									.map(|x| InputDropdownOption {
+										id: x.to_string(),
+										label: x.to_string(),
+										disabled: false,
+									})
+									.collect::<Vec<_>>()}
 							/>
 						}
-					}
+					}}
 				</div>
 
 				<div class="flex-6 flex flex-col items-start justify-start">
 					<Input
 						r#type={InputType::Text}
-						value={
-							Signal::derive(
-								move || probe_value
-									.get()
-									.map(|probe| {
-										probe.path
-									})
-									.unwrap_or_default()
-							)
-						}
+						value={Signal::derive(move || {
+							probe_value.get().map(|probe| { probe.path }).unwrap_or_default()
+						})}
 						on_input={Box::new(move |ev| {
 							ev.prevent_default();
 							on_input_path.call((probe_port.get().clone(), event_target_value(&ev)));
@@ -132,28 +124,16 @@ pub fn ProbeInput(
 					/>
 				</div>
 
-				<Show
-					when={move ||
-						probe_value
-							.get()
-							.is_some()
-						// !probe_port.get().is_empty()
-					}
-				>
+				<Show when={move || probe_value.get().is_some()}>
+					// !probe_port.get().is_empty()
 					<div class="flex-1 flex items-start justify-center">
 						<Link
 							style_variant={LinkStyleVariant::Plain}
 							class="br-sm p-xs ml-md"
 							should_submit=false
-							on_click={Rc::new(move |ev| {
-								on_delete.call(ev.clone())
-							})}
+							on_click={Rc::new(move |ev| { on_delete.call(ev.clone()) })}
 						>
-							<Icon
-								icon={IconType::Trash2}
-								color={Color::Error}
-								size={Size::Small}
-							/>
+							<Icon icon={IconType::Trash2} color={Color::Error} size={Size::Small} />
 						</Link>
 					</div>
 				</Show>
diff --git a/hosted-frontend/src/pages/infrastructure/deployment/components/volume_input.rs b/hosted-frontend/src/pages/infrastructure/deployment/components/volume_input.rs
index a582a3505..6b3881109 100644
--- a/hosted-frontend/src/pages/infrastructure/deployment/components/volume_input.rs
+++ b/hosted-frontend/src/pages/infrastructure/deployment/components/volume_input.rs
@@ -51,13 +51,9 @@ pub fn VolumeInput(
 									</div>
 
 									<div class="flex-1 flex items-center justify-center pl-sm">
-										<button
-											on:click={
-												move |ev| {
-													on_delete.call((ev, vol.0))
-												}
-											}
-										>
+										<button on:click={move |ev| {
+											on_delete.call((ev, vol.0))
+										}}>
 											<Icon
 												icon={IconType::Trash2}
 												color={Color::Error}
@@ -110,7 +106,7 @@ pub fn VolumeInput(
 								on_add.call((ev.clone(), vol_path.get(), vol_size.get()))
 							})}
 						>
-							<Icon icon={IconType::Plus} color={Color::Secondary}/>
+							<Icon icon={IconType::Plus} color={Color::Secondary} />
 						</Link>
 					</div>
 				</div>
diff --git a/hosted-frontend/src/pages/infrastructure/deployment/create_deployment/details.rs b/hosted-frontend/src/pages/infrastructure/deployment/create_deployment/details.rs
index 7e59dcab5..d6ad1ce30 100644
--- a/hosted-frontend/src/pages/infrastructure/deployment/create_deployment/details.rs
+++ b/hosted-frontend/src/pages/infrastructure/deployment/create_deployment/details.rs
@@ -18,35 +18,26 @@ fn RunnerDropdown() -> impl IntoView {
 		<InputDropdown
 			placeholder="Choose A Runner"
 			class="w-full"
-			value={
-				deployment_info
-					.with(
-						|info| info
-							.runner_id
-							.clone()
-							.map(|id| id.to_string()).unwrap_or_default()
-					)
-			}
+			value={deployment_info
+				.with(|info| info.runner_id.clone().map(|id| id.to_string()).unwrap_or_default())}
 			on_select={move |id: String| {
 				if let Ok(runner_id) = Uuid::parse_str(id.as_str()) {
 					deployment_info.update(|info| info.runner_id = Some(runner_id))
 				}
 			}}
-			options={
-				match runners_list.get() {
-					Some(Ok(data)) => {
-						data.runners
-							.iter()
-							.map(|x| InputDropdownOption {
-								id: x.id.to_string(),
-								disabled: false,
-								label: x.name.clone()
-							})
-							.collect::<Vec<_>>()
-					},
-					_ => vec![]
+			options={match runners_list.get() {
+				Some(Ok(data)) => {
+					data.runners
+						.iter()
+						.map(|x| InputDropdownOption {
+							id: x.id.to_string(),
+							disabled: false,
+							label: x.name.clone(),
+						})
+						.collect::<Vec<_>>()
 				}
-			}
+				_ => vec![],
+			}}
 		/>
 	}
 }
@@ -81,24 +72,27 @@ pub fn DeploymentDetails(
 					<div class="flex-10 flex flex-col items-start justify-start">
 						<Input
 							placeholder="Deployment Name"
-							r#type=InputType::Text
+							r#type={InputType::Text}
 							class="w-full"
 							name="name"
 							id="name"
-							value={Signal::derive(move || deployment_info.get().name.unwrap_or_default())}
-							on_input={
-								Box::new(move |ev| {
-									ev.prevent_default();
-									deployment_info.update(
-										|info| info.name = Some(event_target_value(&ev))
-									)
-								})
-							}
+							value={Signal::derive(move || {
+								deployment_info.get().name.unwrap_or_default()
+							})}
+							on_input={Box::new(move |ev| {
+								ev.prevent_default();
+								deployment_info
+									.update(|info| info.name = Some(event_target_value(&ev)))
+							})}
 						/>
 
-						<Show when={move || store_errors.with_value(|errors| !errors.get().name.clone().is_empty())}>
+						<Show when={move || {
+							store_errors.with_value(|errors| !errors.get().name.clone().is_empty())
+						}}>
 							<Alert r#type={AlertType::Error} class="mt-xs">
-								{move || store_errors.with_value(|errors| errors.get().name.clone())}
+								{move || {
+									store_errors.with_value(|errors| errors.get().name.clone())
+								}}
 							</Alert>
 						</Show>
 					</div>
@@ -106,9 +100,7 @@ pub fn DeploymentDetails(
 
 				<div class="flex my-xs w-full mb-md">
 					<div class="flex-2 flex justify-start items-center">
-						<label
-							class="text-white text-sm flex justify-start items-center"
-						>
+						<label class="text-white text-sm flex justify-start items-center">
 							"Registry"
 						</label>
 					</div>
@@ -116,7 +108,8 @@ pub fn DeploymentDetails(
 					<div class="flex-10 flex flex-col items-start justify-start">
 						<InputDropdown
 							placeholder="Registry Name"
-							value={deployment_info.with(|info| info.registry_name.clone().unwrap_or_default())}
+							value={deployment_info
+								.with(|info| info.registry_name.clone().unwrap_or_default())}
 							class="w-full"
 							on_select={move |id: String| {
 								deployment_info.update(|info| info.registry_name = Some(id))
@@ -125,12 +118,12 @@ pub fn DeploymentDetails(
 								InputDropdownOption {
 									id: "docker.io".to_string(),
 									label: "Docker Hub (docker.io)".to_string(),
-									disabled: false
+									disabled: false,
 								},
 								InputDropdownOption {
 									id: "registry.patr.cloud".to_string(),
 									label: "Container Registry (registry.patr.cloud)".to_string(),
-									disabled: false
+									disabled: false,
 								},
 							]}
 						/>
@@ -139,9 +132,7 @@ pub fn DeploymentDetails(
 
 				<div class="flex my-xs w-full">
 					<div class="flex-2 flex justify-start items-center">
-						<label
-							class="text-white text-sm flex justify-start items-center"
-						>
+						<label class="text-white text-sm flex justify-start items-center">
 							"Image Details"
 						</label>
 					</div>
@@ -153,78 +144,97 @@ pub fn DeploymentDetails(
 							name="repository_name"
 							class="w-full"
 							id="repository_name"
-							value={Signal::derive(move || deployment_info.get().image_name.unwrap_or_default())}
-							on_input={
-								Box::new(move |ev| {
-									ev.prevent_default();
-									deployment_info.update(
-										|info| info.image_name = Some(event_target_value(&ev))
-									)
-								})
-							}
+							value={Signal::derive(move || {
+								deployment_info.get().image_name.unwrap_or_default()
+							})}
+							on_input={Box::new(move |ev| {
+								ev.prevent_default();
+								deployment_info
+									.update(|info| info.image_name = Some(event_target_value(&ev)))
+							})}
 						/>
 
-						<Show when={move || store_errors.with_value(|errors| !errors.get().image_name.clone().is_empty())}>
+						<Show when={move || {
+							store_errors
+								.with_value(|errors| !errors.get().image_name.clone().is_empty())
+						}}>
 							<Alert r#type={AlertType::Error} class="mt-xs">
-								{move || store_errors.with_value(|errors| errors.get().image_name.clone())}
+								{move || {
+									store_errors
+										.with_value(|errors| errors.get().image_name.clone())
+								}}
 							</Alert>
 						</Show>
 					</div>
 
 					<div class="flex-4 pl-md flex flex-col items-start justify-start">
 						<Input
-							r#type=InputType::Text
+							r#type={InputType::Text}
 							placeholder="Choose Image Tag"
 							class="w-full"
 							name="image_tag"
 							id="image_tag"
-							value={Signal::derive(move || deployment_info.get().image_tag.unwrap_or_default())}
-							on_input={
-								Box::new(move |ev| {
-									ev.prevent_default();
-									deployment_info.update(
-										|info| info.image_tag = Some(event_target_value(&ev))
-									)
-								})
-							}
+							value={Signal::derive(move || {
+								deployment_info.get().image_tag.unwrap_or_default()
+							})}
+							on_input={Box::new(move |ev| {
+								ev.prevent_default();
+								deployment_info
+									.update(|info| info.image_tag = Some(event_target_value(&ev)))
+							})}
 						/>
 
-						<Show when={move || store_errors.with_value(|errors| !errors.get().image_tag.clone().is_empty())}>
+						<Show when={move || {
+							store_errors
+								.with_value(|errors| !errors.get().image_tag.clone().is_empty())
+						}}>
 							<Alert r#type={AlertType::Error} class="mt-xs">
-								{move || store_errors.with_value(|errors| errors.get().image_tag.clone())}
+								{move || {
+									store_errors.with_value(|errors| errors.get().image_tag.clone())
+								}}
 							</Alert>
 						</Show>
 					</div>
 				</div>
-				{
-					match app_type {
-						AppType::SelfHosted => view! {}.into_view(),
-						AppType::Managed => view! {
+				{app_type
+					.is_managed()
+					.then(|| {
+						view! {
 							<div class="flex my-xs w-full mb-md">
 								<div class="flex-2 flex justify-start items-center">
-									<label class="text-white text-sm flex justify-start items-center">"Choose Runner"</label>
+									<label class="text-white text-sm flex justify-start items-center">
+										"Choose Runner"
+									</label>
 								</div>
 
 								<div class="flex-10 flex flex-col items-start justify-start">
 									<Transition>
-										{
-											move || view! {
+										{move || {
+											view! {
 												<RunnerDropdown />
 
-												<Show when={move || store_errors.with_value(|errors| !errors.get().runner.clone().is_empty())}>
+												<Show when={move || {
+													store_errors
+														.with_value(|errors| {
+															!errors.get().runner.clone().is_empty()
+														})
+												}}>
 													<Alert r#type={AlertType::Error} class="mt-xs">
-														{move || store_errors.with_value(|errors| errors.get().runner.clone())}
+														{move || {
+															store_errors
+																.with_value(|errors| errors.get().runner.clone())
+														}}
 													</Alert>
 												</Show>
-
-											}.into_view()
-										}
+											}
+												.into_view()
+										}}
 									</Transition>
 								</div>
 							</div>
-						}.into_view()
-					}
-				}
+						}
+							.into_view()
+					})}
 			</div>
 		</div>
 	}
diff --git a/hosted-frontend/src/pages/infrastructure/deployment/create_deployment/head.rs b/hosted-frontend/src/pages/infrastructure/deployment/create_deployment/head.rs
index 9b3ed0d83..b0b5a899b 100644
--- a/hosted-frontend/src/pages/infrastructure/deployment/create_deployment/head.rs
+++ b/hosted-frontend/src/pages/infrastructure/deployment/create_deployment/head.rs
@@ -22,7 +22,10 @@ pub fn CreateDeploymentHead() -> impl IntoView {
 
 					<PageDescription
 						description={"Create a new Deployment here.".to_string()}
-						doc_link={Some("https://docs.patr.cloud/features/deployments/#how-to-create-a-deployment".to_string())}
+						doc_link={Some(
+							"https://docs.patr.cloud/features/deployments/#how-to-create-a-deployment"
+								.to_string(),
+						)}
 					/>
 				</div>
 			</div>
diff --git a/hosted-frontend/src/pages/infrastructure/deployment/create_deployment/mod.rs b/hosted-frontend/src/pages/infrastructure/deployment/create_deployment/mod.rs
index 9a80dd65d..142df5287 100644
--- a/hosted-frontend/src/pages/infrastructure/deployment/create_deployment/mod.rs
+++ b/hosted-frontend/src/pages/infrastructure/deployment/create_deployment/mod.rs
@@ -104,21 +104,13 @@ pub fn CreateDeployment() -> impl IntoView {
 	view! {
 		<CreateDeploymentHead />
 		<ContainerBody class="gap-md overflow-y-auto px-md">
-			{
-				move || match page.get() {
-					Page::Details => view! {
-						<DeploymentDetails errors={details_error}  />
-					}.into_view(),
-					Page::Running => view! {
-						<RunningDetails errors={runner_error} />
-					}.into_view(),
-					Page::Scaling => view! {
-						<ScaleDeployment />
-					}.into_view(),
-				}
-			}
+			{move || match page.get() {
+				Page::Details => view! { <DeploymentDetails errors={details_error} /> }.into_view(),
+				Page::Running => view! { <RunningDetails errors={runner_error} /> }.into_view(),
+				Page::Scaling => view! { <ScaleDeployment /> }.into_view(),
+			}}
 			<div class="flex justify-end items-center gap-md w-full fit-wide-screen mx-auto mt-auto pt-md pb-xl px-md">
-				 <Show when={move || page.get() != Page::Details}>
+				<Show when={move || page.get() != Page::Details}>
 					<Link
 						on_click={Rc::new(move |_| {
 							page.update(|x| *x = x.back());
@@ -132,20 +124,22 @@ pub fn CreateDeployment() -> impl IntoView {
 
 				<Show
 					when={move || page.get() == Page::Scaling}
-					fallback={move || view! {
-						<Link
-							on_click={Rc::new(on_click_next)}
-							style_variant={LinkStyleVariant::Contained}
-							r#type={Variant::Button}
-						>
-							"NEXT"
-							<Icon
-								icon={IconType::ChevronRight}
-								size={Size::ExtraSmall}
-								color={Color::Black}
-								class="ml-xxs"
-							/>
-						</Link>
+					fallback={move || {
+						view! {
+							<Link
+								on_click={Rc::new(on_click_next)}
+								style_variant={LinkStyleVariant::Contained}
+								r#type={Variant::Button}
+							>
+								"NEXT"
+								<Icon
+									icon={IconType::ChevronRight}
+									size={Size::ExtraSmall}
+									color={Color::Black}
+									class="ml-xxs"
+								/>
+							</Link>
+						}
 					}}
 				>
 					<button
diff --git a/hosted-frontend/src/pages/infrastructure/deployment/create_deployment/running.rs b/hosted-frontend/src/pages/infrastructure/deployment/create_deployment/running.rs
index 0c32dd57c..68c494127 100644
--- a/hosted-frontend/src/pages/infrastructure/deployment/create_deployment/running.rs
+++ b/hosted-frontend/src/pages/infrastructure/deployment/create_deployment/running.rs
@@ -20,114 +20,120 @@ pub fn RunningDetails(
 
 			<div class="fc-fs-fs gap-xl w-full h-full text-white">
 				<PortInput
-					on_add=move |(_, port_number, port_type): (MouseEvent, String, String)| {
+					on_add={move |(_, port_number, port_type): (MouseEvent, String, String)| {
 						let port_number = StringifiedU16::from_str(port_number.as_str());
 						let port_type = ExposedPortType::from_str(port_type.as_str());
 						if port_number.is_ok() && port_type.is_ok() {
-							deployment_info.update(|info| {
-								info.ports.insert(port_number.unwrap(), port_type.unwrap());
-							});
+							deployment_info
+								.update(|info| {
+									info.ports.insert(port_number.unwrap(), port_type.unwrap());
+								});
 						}
-					}
-					on_delete=move |(_, port_number): (MouseEvent, String)| {
+					}}
+					on_delete={move |(_, port_number): (MouseEvent, String)| {
 						let port_number = StringifiedU16::from_str(port_number.as_str());
 						if port_number.is_ok() {
-							deployment_info.update(|info| {
-								info.ports.remove(&port_number.unwrap());
-							});
+							deployment_info
+								.update(|info| {
+									info.ports.remove(&port_number.unwrap());
+								});
 						}
-
-					}
+					}}
 					error={Signal::derive(move || errors.get().ports)}
-					is_update_screen={false}
+					is_update_screen=false
 					ports_list={Signal::derive(move || deployment_info.get().ports)}
 				/>
 
 				<EnvInput
-					on_add=move |(_, name, value): (MouseEvent, String, String)| {
+					on_add={move |(_, name, value): (MouseEvent, String, String)| {
 						let env_value = EnvironmentVariableValue::String(value);
-
 						if !name.is_empty() && env_value.value().is_some() {
-							deployment_info.update(|info| {
-								info.environment_variables.insert(name, env_value);
-							});
+							deployment_info
+								.update(|info| {
+									info.environment_variables.insert(name, env_value);
+								});
 						}
-					}
-					on_delete=move |(_, name): (MouseEvent, String)| {
-						deployment_info.update(|info| {
-							info.environment_variables.remove(name.as_str());
-						});
-					}
+					}}
+					on_delete={move |(_, name): (MouseEvent, String)| {
+						deployment_info
+							.update(|info| {
+								info.environment_variables.remove(name.as_str());
+							});
+					}}
 					envs_list={Signal::derive(move || deployment_info.get().environment_variables)}
 				/>
 
-				<ConfigMountInput
-					mount_points={vec!["/x/y/path".to_owned()]}
-				/>
+				<ConfigMountInput mount_points={vec!["/x/y/path".to_owned()]} />
 
 				// <VolumeInput
-				// 	on_add=move |(_, path, size): (MouseEvent, String, String)| {
-				// 		let vol_size = size.parse::<u16>();
-				// 		if !path.is_empty() && vol_size.is_ok() {
-				// 			deployment_info.update(|info| {
-				// 				info.volumes.insert(Uuid::new_v4(), path);
-				// 			});
-				// 		}
-				// 	}
-				// 	on_delete=move |(_, id): (MouseEvent, Uuid)| {
-				// 		deployment_info.update(|info| {
-				// 			info.volumes.remove(&id);
-				// 		});
-				// 	}
-				// 	volumes_list={Signal::derive(move || deployment_info.get().volumes)}
+				// on_add=move |(_, path, size): (MouseEvent, String, String)| {
+				// let vol_size = size.parse::<u16>();
+				// if !path.is_empty() && vol_size.is_ok() {
+				// deployment_info.update(|info| {
+				// info.volumes.insert(Uuid::new_v4(), path);
+				// });
+				// }
+				// }
+				// on_delete=move |(_, id): (MouseEvent, Uuid)| {
+				// deployment_info.update(|info| {
+				// info.volumes.remove(&id);
+				// });
+				// }
+				// volumes_list={Signal::derive(move || deployment_info.get().volumes)}
 				// />
 
 				<ProbeInput
-					available_ports={Signal::derive(
-						move || deployment_info.get()
-							.ports.keys().map(|port| port.value())
+					available_ports={Signal::derive(move || {
+						deployment_info
+							.get()
+							.ports
+							.keys()
+							.map(|port| port.value())
 							.collect::<Vec<_>>()
-					)}
+					})}
 					probe_type={ProbeInputType::Startup}
 					on_select_port={move |(port, path): (String, String)| {
 						let probe_port = port.parse::<u16>();
 						if let Ok(probe_port) = probe_port {
-							deployment_info.update(|info| {
-								info.startup_probe = Some((probe_port, path))
-							});
+							deployment_info
+								.update(|info| { info.startup_probe = Some((probe_port, path)) });
 						}
 					}}
 					on_input_path={move |(port, path): (String, String)| {
 						let probe_port = port.parse::<u16>();
 						if let Ok(probe_port) = probe_port {
-							deployment_info.update(|info| {
-								info.startup_probe = Some((probe_port, path.clone()))
-							});
+							deployment_info
+								.update(|info| {
+									info.startup_probe = Some((probe_port, path.clone()))
+								});
 						}
 					}}
 				/>
 
 				<ProbeInput
-					available_ports={Signal::derive(
-						move || deployment_info.get()
-							.ports.keys().map(|port| port.value())
+					available_ports={Signal::derive(move || {
+						deployment_info
+							.get()
+							.ports
+							.keys()
+							.map(|port| port.value())
 							.collect::<Vec<_>>()
-					)}
+					})}
 					probe_type={ProbeInputType::Liveness}
 					on_select_port={move |(port, path): (String, String)| {
 						let probe_port = port.parse::<u16>();
 						if let Ok(probe_port) = probe_port {
-							deployment_info.update(|info| {
-								info.liveness_probe = Some((probe_port, path))
-							});
+							deployment_info
+								.update(|info| { info.liveness_probe = Some((probe_port, path)) });
 						}
 					}}
 					on_input_path={move |(port, path): (String, String)| {
 						let probe_port = port.parse::<u16>();
 						if let Ok(probe_port) = probe_port {
-							deployment_info.update(|info| {
-								info.liveness_probe = Some((probe_port, path.clone()))
-							});
+							deployment_info
+								.update(|info| {
+									info.liveness_probe = Some((probe_port, path.clone()))
+								});
 						}
 					}}
 				/>
diff --git a/hosted-frontend/src/pages/infrastructure/deployment/create_deployment/scale.rs b/hosted-frontend/src/pages/infrastructure/deployment/create_deployment/scale.rs
index a13a0bff6..67a1a2fd2 100644
--- a/hosted-frontend/src/pages/infrastructure/deployment/create_deployment/scale.rs
+++ b/hosted-frontend/src/pages/infrastructure/deployment/create_deployment/scale.rs
@@ -38,10 +38,7 @@ pub fn ScaleDeployment() -> impl IntoView {
 							style="width: 30%"
 							class="w-full h-full flex justify-between items-center gap-xl"
 						>
-							<label
-								class="flex-3"
-								html_for="minHorizontalScale"
-							>
+							<label class="flex-3" html_for="minHorizontalScale">
 								"Minimum Scale"
 							</label>
 
@@ -49,9 +46,10 @@ pub fn ScaleDeployment() -> impl IntoView {
 								value={min_horizontal}
 								style_variant={SecondaryColorVariant::Medium}
 								on_change={move |_| {
-									deployment_info.update(|info| {
-										info.min_horizontal_scale = Some(min_horizontal.get());
-									})
+									deployment_info
+										.update(|info| {
+											info.min_horizontal_scale = Some(min_horizontal.get());
+										})
 								}}
 							/>
 						</div>
@@ -60,10 +58,7 @@ pub fn ScaleDeployment() -> impl IntoView {
 							style="width: 30%;"
 							class="w-full h-full flex justify-between items-center gap-xl"
 						>
-							<label
-								class="flex-3"
-								html_for="maxHorizontalScale"
-							>
+							<label class="flex-3" html_for="maxHorizontalScale">
 								"Maximum Scale"
 							</label>
 
@@ -71,9 +66,10 @@ pub fn ScaleDeployment() -> impl IntoView {
 								value={max_horizontal}
 								style_variant={SecondaryColorVariant::Medium}
 								on_change={move |_| {
-									deployment_info.update(|info| {
-										info.max_horizontal_scale = Some(max_horizontal.get());
-									})
+									deployment_info
+										.update(|info| {
+											info.max_horizontal_scale = Some(max_horizontal.get());
+										})
 								}}
 							/>
 						</div>
@@ -94,9 +90,9 @@ pub fn ScaleDeployment() -> impl IntoView {
 
 						<Transition>
 							<div class="flex justify-start items-center overflow-x-auto py-xxs gap-md">
-								{
-									move || match machine_list.get() {
-										Some(Ok(data)) => view! {
+								{move || match machine_list.get() {
+									Some(Ok(data)) => {
+										view! {
 											<For
 												each={move || data.clone().machine_types}
 												key={|state| state.id}
@@ -104,22 +100,22 @@ pub fn ScaleDeployment() -> impl IntoView {
 											>
 												<MachineTypeCard
 													machine_type={child.clone()}
-													is_selected={
-														Signal::derive(
-															move || deployment_info.with(|info| info.machine_type.is_some_and(|id| id == child.clone().id))
-														)
-													}
+													is_selected={Signal::derive(move || {
+														deployment_info
+															.with(|info| {
+																info.machine_type.is_some_and(|id| id == child.clone().id)
+															})
+													})}
 													on_select={move |id: Uuid| {
-														deployment_info.update(
-															|info| info.machine_type = Some(id)
-														)
+														deployment_info.update(|info| info.machine_type = Some(id))
 													}}
 												/>
 											</For>
-										}.into_view(),
-										_ => "Couldn't load resource".into_view()
+										}
+											.into_view()
 									}
-								}
+									_ => "Couldn't load resource".into_view(),
+								}}
 							</div>
 						</Transition>
 					</div>
diff --git a/hosted-frontend/src/pages/infrastructure/deployment/dashboard/mod.rs b/hosted-frontend/src/pages/infrastructure/deployment/dashboard/mod.rs
index da48eccbb..5f9b962bd 100644
--- a/hosted-frontend/src/pages/infrastructure/deployment/dashboard/mod.rs
+++ b/hosted-frontend/src/pages/infrastructure/deployment/dashboard/mod.rs
@@ -15,7 +15,7 @@ use crate::{
 pub fn DeploymentPage() -> impl IntoView {
 	view! {
 		<ContainerMain class="w-full h-full my-md">
-			<Outlet/>
+			<Outlet />
 		</ContainerMain>
 	}
 }
@@ -32,40 +32,43 @@ pub fn DeploymentDashboard() -> impl IntoView {
 		<DeploymentDashboardHead />
 
 		<ContainerBody>
-			<Transition
-				fallback=move || view! {<p>"loading"</p>}
-			>
-				{
-					move || match deployment_list.get() {
-						Some(Ok(data)) => view! {
-							<DashboardContainer
-								gap={Size::Large}
-								render_items={
-									view! {
-										<For
-											each={move || data.deployments.clone()}
-											key={|state| state.id}
-											let:child
-										>
-											<DeploymentCard deployment={child}/>
-										</For>
-									}.into_view()
-								}
-							/>
-						},
-						Some(Err(err)) => view! {
+			<Transition fallback={move || {
+				view! { <p>"loading"</p> }
+			}}>
+				{move || match deployment_list.get() {
+					Some(Ok(data)) => {
+						view! {
+							<section class="p-xl w-full overflow-y-auto">
+								<div class="grid gap-lg justify-start content-start
+								grid-cols-[repeat(auto-fit,_minmax(300px,_400px))]">
+									<For
+										each={move || data.deployments.clone()}
+										key={|state| state.id}
+										let:child
+									>
+										<DeploymentCard deployment={child} />
+									</For>
+								</div>
+							</section>
+						}
+							.into_view()
+					}
+					Some(Err(err)) => {
+						view! {
 							<ErrorPage
 								title="Error Loading Deployments"
-								content=view! {
+								content={view! {
 									<p class="text-white">
 										{format!("{}", err.to_string().to_case(Case::Title))}
 									</p>
-								}.into_view()
+								}
+									.into_view()}
 							/>
-						}.into_view(),
-						_ => view! {}.into_view()
+						}
+							.into_view()
 					}
-				}
+					_ => view! {}.into_view(),
+				}}
 			</Transition>
 		</ContainerBody>
 	}
diff --git a/hosted-frontend/src/pages/infrastructure/deployment/manage_deployment/details.rs b/hosted-frontend/src/pages/infrastructure/deployment/manage_deployment/details.rs
index ccaacf8f6..7a403088f 100644
--- a/hosted-frontend/src/pages/infrastructure/deployment/manage_deployment/details.rs
+++ b/hosted-frontend/src/pages/infrastructure/deployment/manage_deployment/details.rs
@@ -43,7 +43,10 @@ pub fn ManageDeploymentDetailsTab() -> impl IntoView {
 					<div class="flex flex-col items-start justify-start w-full px-xl pb-xl mt-xl text-white gap-md fit-wide-screen mx-auto">
 						<div class="flex w-full">
 							<div class="flex-2 flex items-start justify-start">
-								<label class="text-white text-sm mt-sm flex items-center justify-start" html_for="name">
+								<label
+									class="text-white text-sm mt-sm flex items-center justify-start"
+									html_for="name"
+								>
 									"Name"
 								</label>
 							</div>
@@ -54,35 +57,34 @@ pub fn ManageDeploymentDetailsTab() -> impl IntoView {
 									class="w-full"
 									value={
 										let deployment_info = info.clone();
-
-										// If the name is changed, then use that as the value, 
-										// otherwise use the one fetched from the server
 										if let Some(name) = update_deployment_body.get().name {
 											Signal::derive(move || name.clone())
 										} else {
-											Signal::derive(move || deployment_info.deployment.name.clone())
-
+											Signal::derive(move || {
+												deployment_info.deployment.name.clone()
+											})
 										}
 									}
-									on_input={Box::new(
-										move |ev: web_sys::Event| update_deployment_body
-											.update(
-												|body| body.name = Some(event_target_value(&ev)))
-											)
-									}
+									on_input={Box::new(move |ev: web_sys::Event| {
+										update_deployment_body
+											.update(|body| body.name = Some(event_target_value(&ev)))
+									})}
 								/>
 							</div>
 						</div>
 
 						<div class="flex w-full mb-md">
 							<div class="flex-2 flex items-start justify-start">
-								<label class="text-white text-sm mt-sm flex items-center justify-start" html_for="registry">
+								<label
+									class="text-white text-sm mt-sm flex items-center justify-start"
+									html_for="registry"
+								>
 									"Registry"
 								</label>
 							</div>
 
 							<div class="flex-10">
-								<Textbox disabled=true value={image_registry.into_view()}/>
+								<Textbox disabled=true value={image_registry.into_view()} />
 							</div>
 						</div>
 
@@ -92,10 +94,7 @@ pub fn ManageDeploymentDetailsTab() -> impl IntoView {
 							</div>
 
 							<div class="flex-7">
-								<Textbox
-									disabled=true
-									value={image_name.into_view()}
-								/>
+								<Textbox disabled=true value={image_name.into_view()} />
 							</div>
 							<div class="flex-3 pl-md">
 								<Textbox
@@ -108,10 +107,10 @@ pub fn ManageDeploymentDetailsTab() -> impl IntoView {
 							</div>
 						</div>
 
-						{
-							match app_type {
-								AppType::SelfHosted => view! {}.into_view(),
-								AppType::Managed => view! {
+						{app_type
+							.is_managed()
+							.then(|| {
+								view! {
 									<div class="flex w-full">
 										<div class="flex-2 flex items-start justify-start">
 											<label html_for="image-details">"Runner"</label>
@@ -126,71 +125,93 @@ pub fn ManageDeploymentDetailsTab() -> impl IntoView {
 											/>
 										</div>
 									</div>
-								}.into_view()
-							}
-						}
+								}
+									.into_view()
+							})}
 
 						<PortInput
 							ports_list={
 								let ports = info.running_details.ports.clone();
 								Signal::derive(move || ports.clone())
 							}
-							on_delete=move |(_, port_number): (MouseEvent, String)| {
+							on_delete={move |(_, port_number): (MouseEvent, String)| {
 								let port_number = StringifiedU16::from_str(port_number.as_str());
 								if port_number.is_ok() {
-									deployment_info.update(|info| {
-										if let Some(info) = info {
-											info.running_details.ports.remove(&port_number.unwrap());
-										}
-									});
-									update_deployment_body.update(|body| {
-										body.ports = deployment_info.get().map(|info| info.running_details.ports);
-									});
+									deployment_info
+										.update(|info| {
+											if let Some(info) = info {
+												info.running_details.ports.remove(&port_number.unwrap());
+											}
+										});
+									update_deployment_body
+										.update(|body| {
+											body.ports = deployment_info
+												.get()
+												.map(|info| info.running_details.ports);
+										});
 								}
-							}
-							on_add=move |(_, port_number, port_type): (MouseEvent, String, String)| {
+							}}
+							on_add={move |
+								(_, port_number, port_type): (MouseEvent, String, String)|
+							{
 								let port_number = StringifiedU16::from_str(port_number.as_str());
 								let port_type = ExposedPortType::from_str(port_type.as_str());
-
 								if port_number.is_ok() && port_type.is_ok() {
-									deployment_info.update(|info| {
-										if let Some(info) = info {
-											info.running_details.ports.insert(port_number.unwrap(), port_type.unwrap());
-										}
-									});
-									update_deployment_body.update(|body| {
-										body.ports = deployment_info.get().map(|info| info.running_details.ports);
-									});
+									deployment_info
+										.update(|info| {
+											if let Some(info) = info {
+												info.running_details
+													.ports
+													.insert(port_number.unwrap(), port_type.unwrap());
+											}
+										});
+									update_deployment_body
+										.update(|body| {
+											body.ports = deployment_info
+												.get()
+												.map(|info| info.running_details.ports);
+										});
 								}
-							}
+							}}
 							is_update_screen=true
 						/>
 
 						<EnvInput
-							on_add=move |(_, name, value): (MouseEvent, String, String)| {
+							on_add={move |(_, name, value): (MouseEvent, String, String)| {
 								let env_val = EnvironmentVariableValue::String(value);
-
 								if !name.is_empty() && env_val.value().is_some() {
-									deployment_info.update(|info| {
+									deployment_info
+										.update(|info| {
+											if let Some(info) = info {
+												info.running_details
+													.environment_variables
+													.insert(name, env_val);
+											}
+										});
+									update_deployment_body
+										.update(|body| {
+											body.environment_variables = deployment_info
+												.get()
+												.map(|info| info.running_details.environment_variables);
+										});
+								}
+							}}
+							on_delete={move |(_, name): (MouseEvent, String)| {
+								deployment_info
+									.update(|info| {
 										if let Some(info) = info {
-											info.running_details.environment_variables.insert(name, env_val);
+											info.running_details
+												.environment_variables
+												.remove(name.as_str());
 										}
 									});
-									update_deployment_body.update(|body| {
-										body.environment_variables = deployment_info.get().map(|info| info.running_details.environment_variables);
+								update_deployment_body
+									.update(|body| {
+										body.environment_variables = deployment_info
+											.get()
+											.map(|info| info.running_details.environment_variables);
 									});
-								}
-							}
-							on_delete=move |(_, name): (MouseEvent, String)| {
-								deployment_info.update(|info| {
-									if let Some(info) = info {
-										info.running_details.environment_variables.remove(name.as_str());
-									}
-								});
-								update_deployment_body.update(|body| {
-									body.environment_variables = deployment_info.get().map(|info| info.running_details.environment_variables);
-								});
-							}
+							}}
 							envs_list={
 								let envs = info.running_details.environment_variables.clone();
 								Signal::derive(move || envs.clone())
@@ -205,53 +226,63 @@ pub fn ManageDeploymentDetailsTab() -> impl IntoView {
 							}
 							available_ports={
 								let ports = info.running_details.ports.clone();
-
-								Signal::derive(
-									move || ports.keys().map(|port| port.value())
-										.collect::<Vec<_>>()
-								)
+								Signal::derive(move || {
+									ports.keys().map(|port| port.value()).collect::<Vec<_>>()
+								})
 							}
 							on_select_port={move |(port, path): (String, String)| {
 								let probe_port = port.parse::<u16>();
 								if let Ok(probe_port) = probe_port {
-									deployment_info.update(|info| {
-										if let Some(info) = info {
-											info.running_details.startup_probe = Some(DeploymentProbe {
-												port: probe_port,
-												path: path.clone(),
-											})
-										}
-									})
+									deployment_info
+										.update(|info| {
+											if let Some(info) = info {
+												info.running_details.startup_probe = Some(DeploymentProbe {
+													port: probe_port,
+													path: path.clone(),
+												});
+											}
+										})
 								}
-								update_deployment_body.update(|body| {
-									body.startup_probe = deployment_info.get().map(|info| info.running_details.startup_probe).flatten();
-								});
+								update_deployment_body
+									.update(|body| {
+										body.startup_probe = deployment_info
+											.get()
+											.map(|info| info.running_details.startup_probe)
+											.flatten();
+									});
 							}}
 							on_input_path={move |(port, path): (String, String)| {
 								let probe_port = port.parse::<u16>();
 								if let Ok(probe_port) = probe_port {
-									deployment_info.update(|info| {
-										if let Some(info) = info {
-											info.running_details.startup_probe = Some(DeploymentProbe {
-												port: probe_port,
-												path: path.clone(),
-											})
-										}
-									})
+									deployment_info
+										.update(|info| {
+											if let Some(info) = info {
+												info.running_details.startup_probe = Some(DeploymentProbe {
+													port: probe_port,
+													path: path.clone(),
+												});
+											}
+										})
 								}
-								update_deployment_body.update(|body| {
-									body.startup_probe = deployment_info.get().map(|info| info.running_details.startup_probe).flatten();
-								});
+								update_deployment_body
+									.update(|body| {
+										body.startup_probe = deployment_info
+											.get()
+											.map(|info| info.running_details.startup_probe)
+											.flatten();
+									});
 							}}
 							on_delete={move |_| {
-								deployment_info.update(|info| {
-									if let Some(info) = info {
-										info.running_details.startup_probe = None;
-									}
-								});
-								update_deployment_body.update(|body| {
-									body.startup_probe = None;
-								});
+								deployment_info
+									.update(|info| {
+										if let Some(info) = info {
+											info.running_details.startup_probe = None;
+										}
+									});
+								update_deployment_body
+									.update(|body| {
+										body.startup_probe = None;
+									});
 							}}
 						/>
 
@@ -263,52 +294,63 @@ pub fn ManageDeploymentDetailsTab() -> impl IntoView {
 							}
 							available_ports={
 								let ports = info.running_details.ports.clone();
-								Signal::derive(
-									move || ports.keys().map(|port| port.value())
-										.collect::<Vec<_>>()
-								)
+								Signal::derive(move || {
+									ports.keys().map(|port| port.value()).collect::<Vec<_>>()
+								})
 							}
 							on_select_port={move |(port, path): (String, String)| {
 								let probe_port = port.parse::<u16>();
 								if let Ok(probe_port) = probe_port {
-									deployment_info.update(|info| {
-										if let Some(info) = info {
-											info.running_details.liveness_probe = Some(DeploymentProbe {
-												port: probe_port,
-												path: path.clone(),
-											})
-										}
-									})
+									deployment_info
+										.update(|info| {
+											if let Some(info) = info {
+												info.running_details.liveness_probe = Some(DeploymentProbe {
+													port: probe_port,
+													path: path.clone(),
+												});
+											}
+										})
 								}
-								update_deployment_body.update(|body| {
-									body.liveness_probe = deployment_info.get().map(|info| info.running_details.liveness_probe).flatten();
-								});
+								update_deployment_body
+									.update(|body| {
+										body.liveness_probe = deployment_info
+											.get()
+											.map(|info| info.running_details.liveness_probe)
+											.flatten();
+									});
 							}}
 							on_input_path={move |(port, path): (String, String)| {
 								let probe_port = port.parse::<u16>();
 								if let Ok(probe_port) = probe_port {
-									deployment_info.update(|info| {
-										if let Some(info) = info {
-											info.running_details.liveness_probe = Some(DeploymentProbe {
-												port: probe_port,
-												path: path.clone(),
-											})
-										}
-									})
+									deployment_info
+										.update(|info| {
+											if let Some(info) = info {
+												info.running_details.liveness_probe = Some(DeploymentProbe {
+													port: probe_port,
+													path: path.clone(),
+												});
+											}
+										})
 								}
-								update_deployment_body.update(|body| {
-									body.liveness_probe = deployment_info.get().map(|info| info.running_details.liveness_probe).flatten();
-								});
+								update_deployment_body
+									.update(|body| {
+										body.liveness_probe = deployment_info
+											.get()
+											.map(|info| info.running_details.liveness_probe)
+											.flatten();
+									});
 							}}
 							on_delete={move |_| {
-								deployment_info.update(|info| {
-									if let Some(info) = info {
-										info.running_details.liveness_probe = None;
-									}
-								});
-								update_deployment_body.update(|body| {
-									body.liveness_probe = None;
-								});
+								deployment_info
+									.update(|info| {
+										if let Some(info) = info {
+											info.running_details.liveness_probe = None;
+										}
+									});
+								update_deployment_body
+									.update(|body| {
+										body.liveness_probe = None;
+									});
 							}}
 						/>
 					</div>
@@ -325,7 +367,7 @@ pub fn ManageDeploymentDetailsTab() -> impl IntoView {
 				}
 			}
 			.into_view(),
-			None => view! {"error occurred"}.into_view(),
+			None => view! { "error occurred" }.into_view(),
 		}
 	}
 }
diff --git a/hosted-frontend/src/pages/infrastructure/deployment/manage_deployment/head.rs b/hosted-frontend/src/pages/infrastructure/deployment/manage_deployment/head.rs
index 322c51708..2fb5601af 100644
--- a/hosted-frontend/src/pages/infrastructure/deployment/manage_deployment/head.rs
+++ b/hosted-frontend/src/pages/infrastructure/deployment/manage_deployment/head.rs
@@ -51,23 +51,27 @@ pub fn StartStopButton() -> impl IntoView {
 				})}
 				style_variant={LinkStyleVariant::Contained}
 				disabled={match deployment_info.deployment.status {
-						DeploymentStatus::Running | DeploymentStatus::Created | DeploymentStatus::Stopped => false,
-						_ => true,
+					DeploymentStatus::Running
+					| DeploymentStatus::Created
+					| DeploymentStatus::Stopped => false,
+					_ => true,
 				}}
 			>
 				<Icon
-					icon={
-						match Status::from_deployment_status(deployment_info.deployment.status.clone()) {
-							Status::Running => IconType::PauseCircle,
-							_ => IconType::PlayCircle
-						}
-					}
-					size={ Size::ExtraSmall }
+					icon={match Status::from_deployment_status(
+						deployment_info.deployment.status.clone(),
+					) {
+						Status::Running => IconType::PauseCircle,
+						_ => IconType::PlayCircle,
+					}}
+					size={Size::ExtraSmall}
 					class="mr-xs"
 					color={Color::Secondary}
 				/>
 				{
-					let status = Status::from_deployment_status(deployment_info.deployment.status.clone());
+					let status = Status::from_deployment_status(
+						deployment_info.deployment.status.clone(),
+					);
 					match status {
 						Status::Running => "STOP",
 						Status::Created | Status::Stopped => "START",
@@ -80,11 +84,7 @@ pub fn StartStopButton() -> impl IntoView {
 				class="flex items-center justify-start btn btn-error ml-md"
 				on:click={on_click_delete}
 			>
-				<Icon
-					icon={IconType::Trash2}
-					size=Size::ExtraSmall
-					class="mr-xs"
-				/>
+				<Icon icon={IconType::Trash2} size={Size::ExtraSmall} class="mr-xs" />
 				"DELETE"
 			</button>
 		}
@@ -117,14 +117,15 @@ pub fn ManageDeploymentHeader() -> impl IntoView {
 						{
 							let deployment_info = deployment_info;
 							move || match deployment_info.get() {
-								Some(deployment_info) => view! {
-									<PageTitle
-										variant={PageTitleVariant::Text}
-									>
-										{deployment_info.deployment.name.clone()}
-									</PageTitle>
-								}.into_view(),
-								None => view! {}.into_view()
+								Some(deployment_info) => {
+									view! {
+										<PageTitle variant={PageTitleVariant::Text}>
+											{deployment_info.deployment.name.clone()}
+										</PageTitle>
+									}
+										.into_view()
+								}
+								None => view! {}.into_view(),
 							}
 						}
 					</PageTitleContainer>
@@ -160,7 +161,7 @@ pub fn ManageDeploymentHeader() -> impl IntoView {
 					name: "Logs".to_owned(),
 					path: "logs".to_owned(),
 				},
-			]}/>
+			]} />
 
 		</ContainerHead>
 	}
diff --git a/hosted-frontend/src/pages/infrastructure/deployment/manage_deployment/image_history.rs b/hosted-frontend/src/pages/infrastructure/deployment/manage_deployment/image_history.rs
index 082238332..00ecc10cb 100644
--- a/hosted-frontend/src/pages/infrastructure/deployment/manage_deployment/image_history.rs
+++ b/hosted-frontend/src/pages/infrastructure/deployment/manage_deployment/image_history.rs
@@ -25,23 +25,22 @@ pub fn ManageDeploymentImageHistory() -> impl IntoView {
 		<div class="flex flex-col items-start justify-start w-full px-md my-xl mx-auto fit-wide-screen">
 			<div class="flex flex-col items-start justify-start w-full h-full gap-sm">
 				<Transition>
-					{
-						move || match image_history_list.get() {
-							Some(Ok(data)) => {
-								let history = data.deploys;
-								view! {
-									<For
-										each=move || history.clone()
-										key={|log| log.clone()}
-										let:child
-									>
-										<ImageHistoryCard deploy_history={child.clone()}/>
-									</For>
-								}.into_view()
-							},
-							_ => view! {"loading"}.into_view()
+					{move || match image_history_list.get() {
+						Some(Ok(data)) => {
+							let history = data.deploys;
+							view! {
+								<For
+									each={move || history.clone()}
+									key={|log| log.clone()}
+									let:child
+								>
+									<ImageHistoryCard deploy_history={child.clone()} />
+								</For>
+							}
+								.into_view()
 						}
-					}
+						_ => view! { "loading" }.into_view(),
+					}}
 				</Transition>
 			</div>
 		</div>
diff --git a/hosted-frontend/src/pages/infrastructure/deployment/manage_deployment/image_history_card.rs b/hosted-frontend/src/pages/infrastructure/deployment/manage_deployment/image_history_card.rs
index 22608f54a..4bae5a967 100644
--- a/hosted-frontend/src/pages/infrastructure/deployment/manage_deployment/image_history_card.rs
+++ b/hosted-frontend/src/pages/infrastructure/deployment/manage_deployment/image_history_card.rs
@@ -35,21 +35,25 @@ pub fn ImageHistoryCard(
 				</span>
 
 				<button class="btn-icon">
-					<Icon icon={IconType::Copy} size={Size::ExtraSmall}/>
+					<Icon icon={IconType::Copy} size={Size::ExtraSmall} />
 				</button>
 
 				{move || {
 					active
 						.get()
-						.then(|| view! { <StatusBadge status={Some(Status::Live)} class="ml-xxs"/> })
+						.then(|| {
+							view! { <StatusBadge status={Some(Status::Live)} class="ml-xxs" /> }
+						})
 				}}
 
-				<span class="text-grey ml-auto">{deploy_history.get().clone().created.to_string()}</span>
+				<span class="text-grey ml-auto">
+					{deploy_history.get().clone().created.to_string()}
+				</span>
 			</div>
 
 			<div class="flex justify-between items-center w-full mt-sm pl-xl">
 				<div class="flex justify-start items-center row-card pl-sm">
-					<ImageTag tag={"Latest".to_owned()}/>
+					<ImageTag tag={"Latest".to_owned()} />
 				</div>
 
 				{move || {
diff --git a/hosted-frontend/src/pages/infrastructure/deployment/manage_deployment/image_tag.rs b/hosted-frontend/src/pages/infrastructure/deployment/manage_deployment/image_tag.rs
index 1be906a02..0a0b54c3e 100644
--- a/hosted-frontend/src/pages/infrastructure/deployment/manage_deployment/image_tag.rs
+++ b/hosted-frontend/src/pages/infrastructure/deployment/manage_deployment/image_tag.rs
@@ -18,11 +18,11 @@ pub fn ImageTag(
 	};
 	view! {
 		<div class={class}>
-			<Icon icon={IconType::Tag} size={Size::ExtraSmall} class="mr-sm"/>
+			<Icon icon={IconType::Tag} size={Size::ExtraSmall} class="mr-sm" />
 			{tag}
 
 			<button class="btn-icon ml-xs">
-				<Icon icon={IconType::Copy} size={Size::ExtraSmall}/>
+				<Icon icon={IconType::Copy} size={Size::ExtraSmall} />
 			</button>
 		</div>
 	}
diff --git a/hosted-frontend/src/pages/infrastructure/deployment/manage_deployment/logs.rs b/hosted-frontend/src/pages/infrastructure/deployment/manage_deployment/logs.rs
index b8e6e06d6..ec9581068 100644
--- a/hosted-frontend/src/pages/infrastructure/deployment/manage_deployment/logs.rs
+++ b/hosted-frontend/src/pages/infrastructure/deployment/manage_deployment/logs.rs
@@ -26,10 +26,9 @@ pub fn ManageDeploymentsLogs() -> impl IntoView {
 						<p class="text-grey text-xss">"Displaying logs since {logsSince}"</p>
 					</div>
 
-
-					{
-						move || match deployment_logs.get() {
-							Some(Ok(deployment_logs)) => view! {
+					{move || match deployment_logs.get() {
+						Some(Ok(deployment_logs)) => {
+							view! {
 								<For
 									each={move || deployment_logs.logs.clone()}
 									key={|state| state.timestamp}
@@ -40,19 +39,13 @@ pub fn ManageDeploymentsLogs() -> impl IntoView {
 										log={Signal::derive(move || log.clone())}
 									/>
 								</For>
-
-							},
-							Some(Err(_)) => view! {
-								"error loading logs"
-							}.into_view(),
-							None => view! {
-								"loading logs..."
-							}.into_view(),
-
+							}
 						}
-					}
+						Some(Err(_)) => view! { "error loading logs" }.into_view(),
+						None => view! { "loading logs..." }.into_view(),
+					}}
 
-					// <LogStatement log={log} class="mb-xs"/>
+				// <LogStatement log={log} class="mb-xs"/>
 				</div>
 			</div>
 		</div>
diff --git a/hosted-frontend/src/pages/infrastructure/deployment/manage_deployment/mod.rs b/hosted-frontend/src/pages/infrastructure/deployment/manage_deployment/mod.rs
index 2fa46e5b9..1d42cd27f 100644
--- a/hosted-frontend/src/pages/infrastructure/deployment/manage_deployment/mod.rs
+++ b/hosted-frontend/src/pages/infrastructure/deployment/manage_deployment/mod.rs
@@ -51,37 +51,39 @@ pub fn ManageDeploymentsContent(
 
 	view! {
 		<Transition>
-			{
-				move || match deployment_info.get() {
-					Some(info) => {
-						match info {
-							Ok(data) => {
-								let deployment = data.clone();
-								deployment_info_signal.set(Some(deployment.clone()));
-								view! {
-									<ManageDeploymentHeader />
-									<ContainerBody class="gap-md">
-										<Outlet/>
-									</ContainerBody>
-								}.into_view()
-							},
-							Err(err)  => view! {
+			{move || match deployment_info.get() {
+				Some(info) => {
+					match info {
+						Ok(data) => {
+							let deployment = data.clone();
+							deployment_info_signal.set(Some(deployment.clone()));
+							view! {
+								<ManageDeploymentHeader />
+								<ContainerBody class="gap-md">
+									<Outlet />
+								</ContainerBody>
+							}
+								.into_view()
+						}
+						Err(err) => {
+							view! {
 								<ErrorPage
 									title="Error Fetching Resource"
 									content={view! {
 										<p class="text-white">
 											{format!("{}", err.to_string().to_case(Case::Title))}
 										</p>
-									}.into_view()}
+									}
+										.into_view()}
 								/>
-							}.into_view(),
+							}
+								.into_view()
 						}
-					},
-					None => view! {<div>"Loading"</div>}.into_view()
+					}
 				}
-			}
+				None => view! { <div>"Loading"</div> }.into_view(),
+			}}
 		</Transition>
-
 	}
 }
 
@@ -103,18 +105,10 @@ pub fn ManageDeployments() -> impl IntoView {
 
 	move || match deployment_id.get() {
 		Some(deployment_id) => {
-			view! {
-				<ManageDeploymentsContent
-					deployment_id={Signal::derive(move || deployment_id)}
-				/>
-			}
+			view! { <ManageDeploymentsContent deployment_id={Signal::derive(move || deployment_id)} /> }
 		}
 		.into_view(),
-		None => view! {
-			<ErrorPage
-				title="Deployment ID is not a valid UUID"
-			/>
-		}
+		None => view! { <ErrorPage title="Deployment ID is not a valid UUID" /> }
 		.into_view(),
 	}
 }
diff --git a/hosted-frontend/src/pages/infrastructure/deployment/manage_deployment/monitor/event_log_card.rs b/hosted-frontend/src/pages/infrastructure/deployment/manage_deployment/monitor/event_log_card.rs
index 9c16d9f09..f40875599 100644
--- a/hosted-frontend/src/pages/infrastructure/deployment/manage_deployment/monitor/event_log_card.rs
+++ b/hosted-frontend/src/pages/infrastructure/deployment/manage_deployment/monitor/event_log_card.rs
@@ -9,21 +9,11 @@ pub fn EventLogCard(
 ) -> impl IntoView {
 	view! {
 		<tr class="fr-ct-ct full-width bd-light br-bottom-sm bg-secondary-light px-xl row-card">
-			<td class="flex-col-2 fr-ct-ct">
-				{event.get().data.event.clone()}
-			</td>
-			<td class="flex-col-2 fr-ct-ct">
-				{event.get().data.status.get_status_text()}
-			</td>
-			<td class="flex-col-2 fr-ct-ct">
-				{event.get().data.user.clone()}
-			</td>
-			<td class="flex-col-3 fr-ct-ct">
-				{event.get().data.ip_addr.to_string()}
-			</td>
-			<td class="flex-col-3 fr-ct-ct">
-				{event.get().data.date.to_string()}
-			</td>
+			<td class="flex-col-2 fr-ct-ct">{event.get().data.event.clone()}</td>
+			<td class="flex-col-2 fr-ct-ct">{event.get().data.status.get_status_text()}</td>
+			<td class="flex-col-2 fr-ct-ct">{event.get().data.user.clone()}</td>
+			<td class="flex-col-3 fr-ct-ct">{event.get().data.ip_addr.to_string()}</td>
+			<td class="flex-col-3 fr-ct-ct">{event.get().data.date.to_string()}</td>
 		</tr>
 	}
 }
diff --git a/hosted-frontend/src/pages/infrastructure/deployment/manage_deployment/monitor/event_log_container.rs b/hosted-frontend/src/pages/infrastructure/deployment/manage_deployment/monitor/event_log_container.rs
index 9723340b3..bb0f272a8 100644
--- a/hosted-frontend/src/pages/infrastructure/deployment/manage_deployment/monitor/event_log_container.rs
+++ b/hosted-frontend/src/pages/infrastructure/deployment/manage_deployment/monitor/event_log_container.rs
@@ -38,19 +38,12 @@ pub fn EventLogContainer() -> impl IntoView {
 					"IP Address".into_view(),
 					"Date".into_view(),
 				]}
-				render_rows={
-					view! {
-						<For
-							each={move || data.get().clone()}
-							key={move |v| v.id}
-							let:child
-						>
-							<EventLogCard
-								event={child.clone()}
-							/>
-						</For>
-					}.into_view()
+				render_rows={view! {
+					<For each={move || data.get().clone()} key={move |v| v.id} let:child>
+						<EventLogCard event={child.clone()} />
+					</For>
 				}
+					.into_view()}
 			/>
 		</div>
 	}
diff --git a/hosted-frontend/src/pages/infrastructure/deployment/manage_deployment/scaling.rs b/hosted-frontend/src/pages/infrastructure/deployment/manage_deployment/scaling.rs
index d1737584f..0e335418c 100644
--- a/hosted-frontend/src/pages/infrastructure/deployment/manage_deployment/scaling.rs
+++ b/hosted-frontend/src/pages/infrastructure/deployment/manage_deployment/scaling.rs
@@ -16,10 +16,8 @@ pub fn ManageDeploymentScaling() -> impl IntoView {
 	} = list_machines_query().use_query(move || AllMachinesTag);
 
 	view! {
-		<div
-			class="flex flex-col items-start justify-start w-full px-xl mt-xl
-				text-white text-sm fit-wide-screen mx-auto gap-md"
-			>
+		<div class="flex flex-col items-start justify-start w-full px-xl mt-xl
+		text-white text-sm fit-wide-screen mx-auto gap-md">
 			<div class="flex w-full">
 				<div class="flex-2 my-auto pr-md">
 					<span class="text-sm">"Choose Horizontal Scale"</span>
@@ -34,7 +32,7 @@ pub fn ManageDeploymentScaling() -> impl IntoView {
 						<div class="flex-2 flex flex-col items-center justify-center">
 							<label html_for="minHorizontalScale">"Minimum Scale"</label>
 
-							<NumberPicker value=5 style_variant={SecondaryColorVariant::Medium}/>
+							<NumberPicker value=5 style_variant={SecondaryColorVariant::Medium} />
 						</div>
 
 						<div class="flex-8 mt-xl px-xl flex flex-col items-center justify-start">
@@ -48,7 +46,7 @@ pub fn ManageDeploymentScaling() -> impl IntoView {
 						<div class="flex-2 flex flex-col items-center justify-center">
 							<label html_for="maxHorizontalScale">"Maximum Scale"</label>
 
-							<NumberPicker value=4 style_variant={SecondaryColorVariant::Medium}/>
+							<NumberPicker value=4 style_variant={SecondaryColorVariant::Medium} />
 						</div>
 					</div>
 				</div>
@@ -60,21 +58,19 @@ pub fn ManageDeploymentScaling() -> impl IntoView {
 				</div>
 
 				<div class="flex-10 flex items-center justify-start overflow-auto">
-					<div
-						class="w-full p-xl br-sm bg-secondary-light
-						flex flex-col items-start justify-start overflow-auto"
-					>
+					<div class="w-full p-xl br-sm bg-secondary-light
+					flex flex-col items-start justify-start overflow-auto">
 						<p class="tracking-[1px] mb-lg text-xxs">
 							"Specify the resources to be allocated to your container"
 						</p>
 
 						<div class="flex items-center justify-start overflow-x-auto py-xxs gap-md">
 							<Transition>
-								{
-									move || match machine_list.get() {
-										Some(Ok(ListAllDeploymentMachineTypeResponse {
-											machine_types
-										})) => view! {
+								{move || match machine_list.get() {
+									Some(
+										Ok(ListAllDeploymentMachineTypeResponse { machine_types }),
+									) => {
+										view! {
 											<For
 												each={move || machine_types.clone()}
 												key={|state| state.id}
@@ -82,30 +78,31 @@ pub fn ManageDeploymentScaling() -> impl IntoView {
 											>
 												<div>
 													// <MacineTypeCard
-													// 	machine_type={machine_type}
-													// 	is_selected={
-													// 		Signal::derive(
-													// 			move || deployment_info.with(|info| info.)
-													// 		)
-													// 	}
+													// machine_type={machine_type}
+													// is_selected={
+													// Signal::derive(
+													// move || deployment_info.with(|info| info.)
+													// )
+													// }
 													// />
 													{machine_type.cpu_count}
 												</div>
 											</For>
-										}.into_view(),
-										_ => "Loading...".into_view()
+										}
+											.into_view()
 									}
-								}
+									_ => "Loading...".into_view(),
+								}}
 							</Transition>
 						</div>
 					</div>
 				</div>
 			</div>
 
-			{
-				match app_type {
-					AppType::SelfHosted => view! {}.into_view(),
-					AppType::Managed => view! {
+			{app_type
+				.is_managed()
+				.then(|| {
+					view! {
 						<div class="flex w-full">
 							<div class="flex-2 my-auto pr-md">
 								<span class="text-sm">"Estimated Cost"</span>
@@ -121,14 +118,14 @@ pub fn ManageDeploymentScaling() -> impl IntoView {
 								<p class="text-grey">
 									"This deployment is eligible for "
 									<strong class="text-medium text-sm">"Free"</strong> "plan"
-									"since it's your first deployment and" <br/>
+									"since it's your first deployment and" <br />
 									"you have selected the base machine type with only one instance."
 								</p>
 							</div>
 						</div>
-					}.into_view()
-				}
-			}
+					}
+						.into_view()
+				})}
 		</div>
 	}
 }
diff --git a/hosted-frontend/src/pages/infrastructure/deployment/manage_deployment/urls.rs b/hosted-frontend/src/pages/infrastructure/deployment/manage_deployment/urls.rs
index 75034e74e..1ee3093bc 100644
--- a/hosted-frontend/src/pages/infrastructure/deployment/manage_deployment/urls.rs
+++ b/hosted-frontend/src/pages/infrastructure/deployment/manage_deployment/urls.rs
@@ -8,7 +8,7 @@ pub fn ManageDeploymentUrls() -> impl IntoView {
 				// r#type=Variant::Button
 				// style_variant=LinkStyleVariant::Contained
 				"CREATE MANAGED URL"
-				<Icon icon={IconType::Plus} size={Size::ExtraSmall} color={Color::Secondary}/>
+				<Icon icon={IconType::Plus} size={Size::ExtraSmall} color={Color::Secondary} />
 			</Link>
 		</div>
 		<TableDashboard
diff --git a/hosted-frontend/src/pages/infrastructure/mod.rs b/hosted-frontend/src/pages/infrastructure/mod.rs
index 413dc1d16..d384cb9f0 100644
--- a/hosted-frontend/src/pages/infrastructure/mod.rs
+++ b/hosted-frontend/src/pages/infrastructure/mod.rs
@@ -2,38 +2,41 @@ use leptos_router::*;
 
 use crate::prelude::*;
 
+/// The Routes for the Infrastructure Pages,
+/// Contains Secrets, Databases, Deployments, Static Sites, Repository, and
+/// Container Registry
 #[component(transparent)]
 pub fn InfrastructureRoutes() -> impl IntoView {
 	view! {
-		<Route path={AppRoutes::Empty} view={|| view! { <Outlet/> }}>
-			<Route path={LoggedInRoute::Secret} view={SecretsDashboard}/>
+		<Route path={AppRoutes::Empty} view={|| view! { <Outlet /> }}>
+			<Route path={LoggedInRoute::Secret} view={SecretsDashboard} />
 			<Route path={LoggedInRoute::Database} view={DatabasePage}>
-				<Route path="create" view={CreateDatabase}/>
-				<Route path="/:database_id" view={ManageDatabase}/>
-				<Route path={AppRoutes::Empty} view={DatabaseDashboard}/>
+				<Route path="create" view={CreateDatabase} />
+				<Route path="/:database_id" view={ManageDatabase} />
+				<Route path={AppRoutes::Empty} view={DatabaseDashboard} />
 			</Route>
 
-			<Route ssr=SsrMode::InOrder path={LoggedInRoute::Deployment} view={DeploymentPage}>
+			<Route ssr={SsrMode::InOrder} path={LoggedInRoute::Deployment} view={DeploymentPage}>
 				<Route path="create" view={CreateDeployment} />
 				<Route path="/:deployment_id" view={ManageDeployments}>
-					<Route path="/history" view={ManageDeploymentImageHistory}/>
-					<Route path="/logs" view={ManageDeploymentsLogs}/>
-					<Route path="/monitor" view={ManageDeploymentsMonitoring}/>
-					<Route path="/scaling" view={ManageDeploymentScaling}/>
-					<Route path="/urls" view={ManageDeploymentUrls}/>
-					<Route path={AppRoutes::Empty} view={ManageDeploymentDetailsTab}/>
+					<Route path="/history" view={ManageDeploymentImageHistory} />
+					<Route path="/logs" view={ManageDeploymentsLogs} />
+					<Route path="/monitor" view={ManageDeploymentsMonitoring} />
+					<Route path="/scaling" view={ManageDeploymentScaling} />
+					<Route path="/urls" view={ManageDeploymentUrls} />
+					<Route path={AppRoutes::Empty} view={ManageDeploymentDetailsTab} />
 				</Route>
-				<Route path={AppRoutes::Empty} view={DeploymentDashboard}/>
+				<Route path={AppRoutes::Empty} view={DeploymentDashboard} />
 			</Route>
 
-			<Route path={LoggedInRoute::StaticSites} view={StaticSiteDashboard}/>
+			<Route path={LoggedInRoute::StaticSites} view={StaticSiteDashboard} />
 
 			<Route path={LoggedInRoute::ContainerRegistry} view={ContainerRegistry}>
 				<Route path="/:id" view={ManageRepository}>
-					<Route path={AppRoutes::Empty} view={EditRepository}/>
+					<Route path={AppRoutes::Empty} view={EditRepository} />
 				</Route>
-				<Route path="/new" view={CreateRepository}/>
-				<Route path={AppRoutes::Empty} view={ContainerRegistryDashboard}/>
+				<Route path="/new" view={CreateRepository} />
+				<Route path={AppRoutes::Empty} view={ContainerRegistryDashboard} />
 			</Route>
 		</Route>
 	}
diff --git a/hosted-frontend/src/pages/infrastructure/secret/secret_card.rs b/hosted-frontend/src/pages/infrastructure/secret/secret_card.rs
index afb506888..6dcc26b2c 100644
--- a/hosted-frontend/src/pages/infrastructure/secret/secret_card.rs
+++ b/hosted-frontend/src/pages/infrastructure/secret/secret_card.rs
@@ -20,10 +20,10 @@ pub fn SecretCard(
 			<td class="flex-col-11 fr-fs-ct">{secret_item.name}</td>
 			<td class="flex-col-1 fr-sa-ct">
 				<button>
-					<Icon icon={IconType::Edit} size={Size::ExtraSmall}/>
+					<Icon icon={IconType::Edit} size={Size::ExtraSmall} />
 				</button>
 				<button>
-					<Icon icon={IconType::Trash2} size={Size::ExtraSmall} color={Color::Error}/>
+					<Icon icon={IconType::Trash2} size={Size::ExtraSmall} color={Color::Error} />
 				</button>
 			</td>
 		</tr>
diff --git a/hosted-frontend/src/pages/infrastructure/secret/secret_dashboard.rs b/hosted-frontend/src/pages/infrastructure/secret/secret_dashboard.rs
index 40a61fd58..6b0e4008d 100644
--- a/hosted-frontend/src/pages/infrastructure/secret/secret_dashboard.rs
+++ b/hosted-frontend/src/pages/infrastructure/secret/secret_dashboard.rs
@@ -63,7 +63,7 @@ pub fn SecretsDashboard() -> impl IntoView {
 
 					render_rows={view! {
 						<For each={move || data.get()} key={|state| state.clone().id} let:child>
-							<SecretCard secret_item={child}/>
+							<SecretCard secret_item={child} />
 						</For>
 					}
 						.into_view()}
diff --git a/hosted-frontend/src/pages/infrastructure/static_sites/static_site_card.rs b/hosted-frontend/src/pages/infrastructure/static_sites/static_site_card.rs
index 2b9e16006..09139fd82 100644
--- a/hosted-frontend/src/pages/infrastructure/static_sites/static_site_card.rs
+++ b/hosted-frontend/src/pages/infrastructure/static_sites/static_site_card.rs
@@ -24,11 +24,11 @@ pub fn StaticSiteCard(
 						{static_site.get().name}
 					</h5>
 
-					<StatusBadge status={Some(Status::Live)}/>
+					<StatusBadge status={Some(Status::Live)} />
 				</div>
 
 				<button class="fr-ct-ct">
-					<Icon color={Color::Error} icon={IconType::PlayCircle} size={Size::Medium}/>
+					<Icon color={Color::Error} icon={IconType::PlayCircle} size={Size::Medium} />
 				</button>
 			</div>
 
diff --git a/hosted-frontend/src/pages/infrastructure/static_sites/static_site_dashboard.rs b/hosted-frontend/src/pages/infrastructure/static_sites/static_site_dashboard.rs
index d32043fdd..3252c01cf 100644
--- a/hosted-frontend/src/pages/infrastructure/static_sites/static_site_dashboard.rs
+++ b/hosted-frontend/src/pages/infrastructure/static_sites/static_site_dashboard.rs
@@ -71,7 +71,7 @@ pub fn StaticSiteDashboard() -> impl IntoView {
 					gap={Size::Large}
 					render_items={view! {
 						<For each={move || data.get()} key={|state| state.id.clone()} let:child>
-							<StaticSiteCard static_site={child}/>
+							<StaticSiteCard static_site={child} />
 						</For>
 					}
 						.into_view()}
diff --git a/hosted-frontend/src/pages/manage_profile/mod.rs b/hosted-frontend/src/pages/manage_profile/mod.rs
index 7d5154508..49a0a2096 100644
--- a/hosted-frontend/src/pages/manage_profile/mod.rs
+++ b/hosted-frontend/src/pages/manage_profile/mod.rs
@@ -9,14 +9,22 @@ pub use self::tabs::*;
 /// Managed Profile
 #[component(transparent)]
 pub fn ProfileRoutes() -> impl IntoView {
+	let app_type = expect_context::<AppType>();
+
 	view! {
 		<Route path={LoggedInRoute::UserProfile} view={ManageProfile}>
-			<Route path={LoggedInRoute::ApiTokens} view={ApiTokensTab}>
-				<Route path="create" view={CreateApiToken} />
-				<Route path=":token_id" view={EditApiToken} />
-				<Route path={AppRoutes::Empty} view={ListApiTokens} />
-			</Route>
-			<Route path={AppRoutes::Empty} view={ProfileSettings}/>
+			{app_type
+				.is_managed()
+				.then(|| {
+					view! {
+						<Route path={LoggedInRoute::ApiTokens} view={ApiTokensTab}>
+							<Route path="create" view={CreateApiToken} />
+							<Route path=":token_id" view={EditApiToken} />
+							<Route path={AppRoutes::Empty} view={ListApiTokens} />
+						</Route>
+					}
+				})}
+			<Route path={AppRoutes::Empty} view={ProfileSettings} />
 		</Route>
 	}
 }
@@ -40,12 +48,12 @@ pub fn ManageProfile() -> impl IntoView {
 						name: "API Tokens".to_owned(),
 						path: "api-tokens".to_owned(),
 					},
-				]}/>
+				]} />
 
 			</ContainerHead>
 
 			<ContainerBody class="gap-md">
-				<Outlet/>
+				<Outlet />
 			</ContainerBody>
 		</ContainerMain>
 	}
diff --git a/hosted-frontend/src/pages/manage_profile/tabs/api_token/api_token_card.rs b/hosted-frontend/src/pages/manage_profile/tabs/api_token/api_token_card.rs
index 97a1af894..b7f81f612 100644
--- a/hosted-frontend/src/pages/manage_profile/tabs/api_token/api_token_card.rs
+++ b/hosted-frontend/src/pages/manage_profile/tabs/api_token/api_token_card.rs
@@ -59,12 +59,7 @@ pub fn ApiTokenCard(
 	};
 
 	view! {
-		<tr
-			on:click={on_click_link}
-			tab_index=0
-			class={outer_class}
-			aria_label="Select API Token"
-		>
+		<tr on:click={on_click_link} tab_index=0 class={outer_class} aria_label="Select API Token">
 			<td class="flex-4 flex items-center justify-center">
 				{move || store_token.with_value(|token| token.get().name.clone())}
 			</td>
diff --git a/hosted-frontend/src/pages/manage_profile/tabs/api_token/edit_token/choose_permission.rs b/hosted-frontend/src/pages/manage_profile/tabs/api_token/edit_token/choose_permission.rs
index e3b5c0b08..9b3ce3afa 100644
--- a/hosted-frontend/src/pages/manage_profile/tabs/api_token/edit_token/choose_permission.rs
+++ b/hosted-frontend/src/pages/manage_profile/tabs/api_token/edit_token/choose_permission.rs
@@ -255,7 +255,7 @@ pub fn ChoosePermission(
 			<div class={div_class}>
 				<div class="flex flex-col items-start justify-start">
 					<InputDropdown
-						placeholder="Select Resource Type".to_string()
+						placeholder={"Select Resource Type".to_string()}
 						options={resource_type_values}
 						value={input_resource_type}
 					/>
@@ -264,9 +264,17 @@ pub fn ChoosePermission(
 				<Show when={move || show_resource_type.get()}>
 					<div class="flex flex-col items-start justify-start">
 						<InputDropdown
-							placeholder={format!("All/Specific {}", input_resource_type.with(|resource|
-								if resource.is_empty() {"Resource".to_string()} else {resource.to_owned()}
-							))}
+							placeholder={format!(
+								"All/Specific {}",
+								input_resource_type
+									.with(|resource| {
+										if resource.is_empty() {
+											"Resource".to_string()
+										} else {
+											resource.to_owned()
+										}
+									}),
+							)}
 							value={input_apply_to}
 							options={vec![
 								InputDropdownOption {
@@ -281,7 +289,8 @@ pub fn ChoosePermission(
 								},
 								InputDropdownOption {
 									id: "Except".to_string(),
-									label: format!("All {}s Except", input_resource_type.get() ).to_string(),
+									label: format!("All {}s Except", input_resource_type.get())
+										.to_string(),
 									disabled: false,
 								},
 							]}
@@ -291,39 +300,50 @@ pub fn ChoosePermission(
 
 				<Transition>
 					<Show when={show_resources}>
-						{
-							move || view! {
+						{move || {
+							view! {
 								<CheckboxDropdown
-									placeholder={format!("Select {}", input_resource_type.with(|resource|
-										if resource.is_empty() {"Resources".to_string()} else {resource.to_owned()}
-									))}
+									placeholder={format!(
+										"Select {}",
+										input_resource_type
+											.with(|resource| {
+												if resource.is_empty() {
+													"Resources".to_string()
+												} else {
+													resource.to_owned()
+												}
+											}),
+									)}
 									value={Signal::derive(move || input_resources.get())}
 									options={match resource_dropdown_options.get() {
 										Some(Ok(options)) => options,
-										_ => vec![]
+										_ => vec![],
 									}}
 									on_select={move |(_, id): (MouseEvent, String)| {
-										if input_resources.get().iter().any(|e| e.to_owned() == id) {
-											input_resources.update(|options| options.retain(|e| e.to_owned() != id));
+										if input_resources.get().iter().any(|e| e.to_owned() == id)
+										{
+											input_resources
+												.update(|options| options.retain(|e| e.to_owned() != id));
 										} else {
 											input_resources.update(|options| options.push(id.clone()));
 										}
 									}}
 								/>
 							}
-						}
+						}}
 					</Show>
 				</Transition>
 
 				<div>
 					<Transition>
 						<CheckboxDropdown
-							placeholder="Select Permissions".to_string()
+							placeholder={"Select Permissions".to_string()}
 							options={permissions_options}
 							value={Signal::derive(move || input_permissions.get())}
 							on_select={move |(_, id): (MouseEvent, String)| {
 								if input_permissions.get().iter().any(|e| e.to_owned() == id) {
-									input_permissions.update(|options| options.retain(|e| e.to_owned() != id));
+									input_permissions
+										.update(|options| options.retain(|e| e.to_owned() != id));
 								} else {
 									input_permissions.update(|options| options.push(id.clone()));
 								}
@@ -338,7 +358,7 @@ pub fn ChoosePermission(
 					on:click={on_select_permission}
 					class="flex items-center justify-center br-sm p-xs btn btn-primary"
 				>
-					<Icon icon={IconType::Plus} color=Color::Secondary />
+					<Icon icon={IconType::Plus} color={Color::Secondary} />
 				</button>
 			</div>
 		</div>
diff --git a/hosted-frontend/src/pages/manage_profile/tabs/api_token/edit_token/create_token.rs b/hosted-frontend/src/pages/manage_profile/tabs/api_token/edit_token/create_token.rs
index 75e6f887b..f5e5332ee 100644
--- a/hosted-frontend/src/pages/manage_profile/tabs/api_token/edit_token/create_token.rs
+++ b/hosted-frontend/src/pages/manage_profile/tabs/api_token/edit_token/create_token.rs
@@ -35,23 +35,22 @@ pub fn CreateApiToken() -> impl IntoView {
 	};
 
 	view! {
-		{
-			move || match response.get() {
-				Some(data) => match data {
+		{move || match response.get() {
+			Some(data) => {
+				match data {
 					Ok(data) => {
 						logging::log!("logging response get {:#?}", data);
-						view! {
-							<TokenModal is_regenerated={false} token={data.token}/>
-						}.into_view()
-					},
-					Err(_) => view! {}.into_view()
-				},
-				None => view! {}.into_view()
+						view! { <TokenModal is_regenerated=false token={data.token} /> }.into_view()
+					}
+					Err(_) => view! {}.into_view(),
+				}
 			}
-		}
-		<form on:submit={on_submit_create}
+			None => view! {}.into_view(),
+		}}
+		<form
+			on:submit={on_submit_create}
 			class="w-full fit-wide-screen h-full px-md \
-				text-white flex flex-col items-start justify-start"
+			text-white flex flex-col items-start justify-start"
 		>
 			<div class="flex justify-start items-center mb-md w-full">
 				<p class="text-md">
@@ -132,21 +131,22 @@ pub fn CreateApiToken() -> impl IntoView {
 				<label class="text-white text-sm">"Choose Permissions"</label>
 				<div class="w-full flex flex-col items-start justify-start gap-xl">
 					<Transition>
-						{
-							move || match workspace_list.get() {
-								Some(Ok(workspace_list)) => {
-									workspace_list.workspaces.into_iter().map(|workspace| view! {
-										<CreatePermissionCard workspace={workspace} />
-									}.into_view()).collect_view()
-								},
-								Some(Err(_)) => view! {
-									<div>"Error loading workspaces"</div>
-								}.into_view(),
-								None => view! {
-									<div>"Loading workspaces..."</div>
-								}.into_view()
+						{move || match workspace_list.get() {
+							Some(Ok(workspace_list)) => {
+								workspace_list
+									.workspaces
+									.into_iter()
+									.map(|workspace| {
+										view! { <CreatePermissionCard workspace={workspace} /> }
+											.into_view()
+									})
+									.collect_view()
+							}
+							Some(Err(_)) => {
+								view! { <div>"Error loading workspaces"</div> }.into_view()
 							}
-						}
+							None => view! { <div>"Loading workspaces..."</div> }.into_view(),
+						}}
 					</Transition>
 				</div>
 			</div>
@@ -160,7 +160,7 @@ pub fn CreateApiToken() -> impl IntoView {
 					"BACK"
 				</Link>
 				<Link
-					should_submit={true}
+					should_submit=true
 					r#type={Variant::Button}
 					style_variant={LinkStyleVariant::Contained}
 					class="txt-sm txt-medium mr-sm"
diff --git a/hosted-frontend/src/pages/manage_profile/tabs/api_token/edit_token/mod.rs b/hosted-frontend/src/pages/manage_profile/tabs/api_token/edit_token/mod.rs
index 2c1172691..4d4e1ba1d 100644
--- a/hosted-frontend/src/pages/manage_profile/tabs/api_token/edit_token/mod.rs
+++ b/hosted-frontend/src/pages/manage_profile/tabs/api_token/edit_token/mod.rs
@@ -78,35 +78,24 @@ fn EditApiTokenPermission() -> impl IntoView {
 			<div class="flex flex-col items-start justify-start mb-xs w-full my-md gap-sm">
 				<label class="text-white text-sm">"Choose Permissions"</label>
 				<div class="w-full fc-fs-fs gap-xl">
-					{
-						move || {
-							match workspace_list.get() {
-								Some(Ok(data)) => {
-									data.workspaces.into_iter()
-										.map(|workspace| {
-											view! {
-												<PermissionCard
-													workspace={workspace}
-												/>
-											}
-										})
-										.collect_view()
-								},
-								_ => {
-									view! {
-										<div>"Cannot Load Resource"</div>
-									}.into_view()
-								}
+					{move || {
+						match workspace_list.get() {
+							Some(Ok(data)) => {
+								data.workspaces
+									.into_iter()
+									.map(|workspace| {
+										view! { <PermissionCard workspace={workspace} /> }
+									})
+									.collect_view()
 							}
+							_ => view! { <div>"Cannot Load Resource"</div> }.into_view(),
 						}
-					}
+					}}
 				</div>
 			</div>
 		}
 		.into_view(),
-		None => view! {
-			<p>"Loading..."</p>
-		}
+		None => view! { <p>"Loading..."</p> }
 		.into_view(),
 	}
 }
@@ -174,25 +163,29 @@ pub fn EditApiToken() -> impl IntoView {
 
 			<form class="w-full h-full">
 				<Transition>
-					{
-						move || match token_info.get() {
-							Some(token_info) => {
-								match token_info {
-									Ok(data) => {
-										token_info_signal.set(Some(data.token.clone()));
-										view! {
-											<TokenInfo />
-											<EditApiTokenPermission/>
-										}.into_view()
-									},
-									Err(err) => view! {
-										<div>{format!("Cannot Load Resource {:?}", err.to_string())}</div>
-									}.into_view()
+					{move || match token_info.get() {
+						Some(token_info) => {
+							match token_info {
+								Ok(data) => {
+									token_info_signal.set(Some(data.token.clone()));
+									view! {
+										<TokenInfo />
+										<EditApiTokenPermission />
+									}
+										.into_view()
 								}
-							},
-							None => view! {}.into_view()
+								Err(err) => {
+									view! {
+										<div>
+											{format!("Cannot Load Resource {:?}", err.to_string())}
+										</div>
+									}
+										.into_view()
+								}
+							}
 						}
-					}
+						None => view! {}.into_view(),
+					}}
 				</Transition>
 
 				<div class="w-full flex justify-end items-center py-md mt-auto">
diff --git a/hosted-frontend/src/pages/manage_profile/tabs/api_token/edit_token/permission_card.rs b/hosted-frontend/src/pages/manage_profile/tabs/api_token/edit_token/permission_card.rs
index 262f21539..08d524cf2 100644
--- a/hosted-frontend/src/pages/manage_profile/tabs/api_token/edit_token/permission_card.rs
+++ b/hosted-frontend/src/pages/manage_profile/tabs/api_token/edit_token/permission_card.rs
@@ -19,12 +19,10 @@ pub fn ListPermissions(
 		Some(WorkspacePermission::Member { permissions }) => permissions
 			.into_iter()
 			.map(|permission| {
-				view! {
-					<PermissionItem permission={permission} />
-				}
+				view! { <PermissionItem permission={permission} /> }
 			})
 			.collect_view(),
-		_ => view! {<></>}.into_view(),
+		_ => view! { <></> }.into_view(),
 	}
 }
 
@@ -97,39 +95,42 @@ pub fn PermissionCard(
 				<strong class="text-md">{workspace.get().data.name}</strong>
 			</p>
 
-			<label class="flex items-center justify-start text-grey cursor-pointer" html_for="super_admin">
+			<label
+				class="flex items-center justify-start text-grey cursor-pointer"
+				html_for="super_admin"
+			>
 				<input
 					class="mr-xs"
 					type="checkbox"
 					name="super_admin"
 					on:input={on_input_checkbox}
 					prop:checked={is_admin_checkbox}
-					value={move || store_workspace.with_value(|workspace| workspace.get().id.to_string()) }
+					value={move || {
+						store_workspace.with_value(|workspace| workspace.get().id.to_string())
+					}}
 				/>
 				"Give"
 				<strong class="text-medium text-sm mx-xxs text-white">"Super Admin"</strong>
 				"permissions for"
 				<strong class="mx-xxs text-sm text-white text-medium">
-					{move || store_workspace.with_value(|workspace| workspace.get().name.clone()) }" workspace"
+					{move || store_workspace.with_value(|workspace| workspace.get().name.clone())}
+					" workspace"
 				</strong>
 			</label>
 
-			{
-				move || if !is_admin_checkbox.get() {
+			{move || {
+				if !is_admin_checkbox.get() {
 					view! {
 						<div class="flex flex-col items-start justify-start w-full gap-xs">
-							<ListPermissions permissions={permissions.get()}/>
-							<ChoosePermission
-								workspace_id={workspace.get().id}
-							/>
+							<ListPermissions permissions={permissions.get()} />
+							<ChoosePermission workspace_id={workspace.get().id} />
 						</div>
-					}.into_view()
+					}
+						.into_view()
 				} else {
-					view! {
-						<></>
-					}.into_view()
+					view! { <></> }.into_view()
 				}
-			}
+			}}
 		</div>
 	}
 }
diff --git a/hosted-frontend/src/pages/manage_profile/tabs/api_token/edit_token/permission_card_create.rs b/hosted-frontend/src/pages/manage_profile/tabs/api_token/edit_token/permission_card_create.rs
index d8bfe0c95..bb925175e 100644
--- a/hosted-frontend/src/pages/manage_profile/tabs/api_token/edit_token/permission_card_create.rs
+++ b/hosted-frontend/src/pages/manage_profile/tabs/api_token/edit_token/permission_card_create.rs
@@ -68,39 +68,50 @@ pub fn CreatePermissionCard(
 				<strong class="text-md">{workspace.get().data.name}</strong>
 			</p>
 
-			<label class="flex items-center justify-start text-grey cursor-pointer" html_for="super_admin">
+			<label
+				class="flex items-center justify-start text-grey cursor-pointer"
+				html_for="super_admin"
+			>
 				<input
 					class="mr-xs"
 					type="checkbox"
 					name="super_admin"
 					on:input={on_input_checkbox}
 					prop:checked={is_admin_checkbox}
-					value={move || store_workspace.with_value(|workspace| workspace.get().id.to_string()) }
+					value={move || {
+						store_workspace.with_value(|workspace| workspace.get().id.to_string())
+					}}
 				/>
 				"Give"
 				<strong class="text-medium text-sm mx-xxs text-white">"Super Admin"</strong>
 				"permissions for"
 				<strong class="mx-xxs text-sm text-white text-medium">
-					{move || store_workspace.with_value(|workspace| workspace.get().name.clone()) }" workspace"
+					{move || store_workspace.with_value(|workspace| workspace.get().name.clone())}
+					" workspace"
 				</strong>
 			</label>
 
-			{
-				move || if !is_admin_checkbox.get() {
+			{move || {
+				if !is_admin_checkbox.get() {
 					view! {
-						<div class="flex flex-col items-start justify-start w-full gap-xs">
-							// <ListPermissions permissions={permissions.get()}/>
-							// <ChoosePermission
-							// 	workspace_id={workspace.get().id}
-							// />
+						<div class="flex flex-col items-start justify-start w-full gap-xs">// <ListPermissions permissions={permissions.get()}/>
+						// <ChoosePermission
+						// workspace_id={workspace.get().id}
+						// />
 						</div>
-					}.into_view()
+					}
+						.into_view()
 				} else {
 					view! {
+						// <ListPermissions permissions={permissions.get()}/>
+						// <ChoosePermission
+						// workspace_id={workspace.get().id}
+						// />
 						<></>
-					}.into_view()
+					}
+						.into_view()
 				}
-			}
+			}}
 		</div>
 	}
 }
diff --git a/hosted-frontend/src/pages/manage_profile/tabs/api_token/edit_token/permission_item.rs b/hosted-frontend/src/pages/manage_profile/tabs/api_token/edit_token/permission_item.rs
index df7fc9261..03c1ddffa 100644
--- a/hosted-frontend/src/pages/manage_profile/tabs/api_token/edit_token/permission_item.rs
+++ b/hosted-frontend/src/pages/manage_profile/tabs/api_token/edit_token/permission_item.rs
@@ -11,19 +11,16 @@ pub fn PermissionItem(
 ) -> impl IntoView {
 	view! {
 		<div class="w-full text-grey flex items-start justify-start">
-			<Textbox
-				value={
-					view! {
-						<strong class="text-white text-bold">"{permission.name} "</strong>
-						"permission will be applied to "
-						<strong class="text-white text-bold">"{permission.name}"</strong>
-					}.into_view()
-				}
-			/>
+			<Textbox value={view! {
+				<strong class="text-white text-bold">"{permission.name} "</strong>
+				"permission will be applied to "
+				<strong class="text-white text-bold">"{permission.name}"</strong>
+			}
+				.into_view()} />
 
 			<div class="flex items-center justify-center pl-md">
 				<Link class="p-xs">
-					<Icon icon={IconType::Trash2} color={Color::Error}/>
+					<Icon icon={IconType::Trash2} color={Color::Error} />
 				</Link>
 			</div>
 		</div>
diff --git a/hosted-frontend/src/pages/manage_profile/tabs/api_token/edit_token/revoke_regen.rs b/hosted-frontend/src/pages/manage_profile/tabs/api_token/edit_token/revoke_regen.rs
index 48092c85d..b11ba0b8a 100644
--- a/hosted-frontend/src/pages/manage_profile/tabs/api_token/edit_token/revoke_regen.rs
+++ b/hosted-frontend/src/pages/manage_profile/tabs/api_token/edit_token/revoke_regen.rs
@@ -21,29 +21,27 @@ pub fn RevokeApiToken() -> impl IntoView {
 	let show_revoke_modal = create_rw_signal(false);
 
 	view! {
-		<Show
-			when=move || show_revoke_modal.get()
-		>
-			<Modal
-				color_variant={SecondaryColorVariant::Light}
-			>
+		<Show when={move || show_revoke_modal.get()}>
+			<Modal color_variant={SecondaryColorVariant::Light}>
 				<div class="center-modal text-white text-sm flex items-start justify-start \
-					bg-secondary-light br-sm p-xl show-center-modal"
-				>
+				bg-secondary-light br-sm p-xl show-center-modal">
 					<h3 class="text-primary text-lg">"Revoke API Token?"</h3>
 					<p class="text-sm text-thin my-md">
-						"This Process "
-						<strong>"CANNOT "</strong>
-						"be undone!"
+						"This Process " <strong>"CANNOT "</strong> "be undone!"
 					</p>
 					<div class="mt-lg w-full fr-fe-ct gap-md">
-						<button class="btn-plain text-white" on:click={move |_| show_revoke_modal.set(false)}>"CANCEL"</button>
+						<button
+							class="btn-plain text-white"
+							on:click={move |_| show_revoke_modal.set(false)}
+						>
+							"CANCEL"
+						</button>
 						<ActionForm action={revoke_api_token_action}>
-							<input type="hidden" name="access_token" prop:value={access_token}/>
-							<input type="hidden" name="token_id" prop:value={token_id}/>
+							<input type="hidden" name="access_token" prop:value={access_token} />
+							<input type="hidden" name="token_id" prop:value={token_id} />
 
 							<Link
-								should_submit={true}
+								should_submit=true
 								class="btn-error"
 								style_variant={LinkStyleVariant::Contained}
 							>
@@ -55,10 +53,7 @@ pub fn RevokeApiToken() -> impl IntoView {
 			</Modal>
 		</Show>
 
-		<button
-			on:click={move |_| show_revoke_modal.update(|v| *v = !*v)}
-			class="btn btn-error"
-		>
+		<button on:click={move |_| show_revoke_modal.update(|v| *v = !*v)} class="btn btn-error">
 			"REVOKE TOKEN"
 		</button>
 	}
@@ -80,29 +75,27 @@ pub fn RegenerateApiToken() -> impl IntoView {
 	let response = regenerate_api_token_action.value();
 
 	view! {
-		{
-			move || match response.get() {
-				Some(data) => match data {
+		{move || match response.get() {
+			Some(data) => {
+				match data {
 					Ok(data) => {
 						logging::log!("logging response get {:#?}", data);
-						view! {
-							<TokenModal is_regenerated={true} token={data.token}/>
-						}.into_view()
-					},
-					Err(_) => view! {}.into_view()
-				},
-				None => view! {}.into_view()
+						view! { <TokenModal is_regenerated=true token={data.token} /> }.into_view()
+					}
+					Err(_) => view! {}.into_view(),
+				}
 			}
-		}
+			None => view! {}.into_view(),
+		}}
 		<ActionForm action={regenerate_api_token_action}>
-			<input type="hidden" name="access_token" prop:value={access_token.map(|state| state.get_access_token())}/>
-			<input type="hidden" name="token_id" prop:value={token_id}/>
+			<input
+				type="hidden"
+				name="access_token"
+				prop:value={access_token.map(|state| state.get_access_token())}
+			/>
+			<input type="hidden" name="token_id" prop:value={token_id} />
 
-			<Link
-				should_submit={true}
-				style_variant={LinkStyleVariant::Contained}
-				class="ml-auto"
-			>
+			<Link should_submit=true style_variant={LinkStyleVariant::Contained} class="ml-auto">
 				"REGENERATE TOKEN"
 			</Link>
 		</ActionForm>
diff --git a/hosted-frontend/src/pages/manage_profile/tabs/api_token/edit_token/token_info.rs b/hosted-frontend/src/pages/manage_profile/tabs/api_token/edit_token/token_info.rs
index b85663240..6dcc22d97 100644
--- a/hosted-frontend/src/pages/manage_profile/tabs/api_token/edit_token/token_info.rs
+++ b/hosted-frontend/src/pages/manage_profile/tabs/api_token/edit_token/token_info.rs
@@ -32,11 +32,12 @@ pub fn TokenInfo() -> impl IntoView {
 						<Input
 							on_input={Box::new(move |ev| {
 								ev.stop_propagation();
-								token_info_signal.update(|token| {
-									if let Some(ref mut token) = token {
-										token.data.name = event_target_value(&ev);
-									}
-								});
+								token_info_signal
+									.update(|token| {
+										if let Some(ref mut token) = token {
+											token.data.name = event_target_value(&ev);
+										}
+									});
 							})}
 							r#type={InputType::Text}
 							placeholder="Enter Token Name"
@@ -62,8 +63,8 @@ pub fn TokenInfo() -> impl IntoView {
 							r#type={InputType::Text}
 							placeholder="Enter Allowed IP addresses"
 							class="w-full"
-
 						/>
+
 					</div>
 				</div>
 
@@ -77,16 +78,22 @@ pub fn TokenInfo() -> impl IntoView {
 						</small>
 					</div>
 					<div class="flex-10 fr-fs-ct pl-xl">
-						<div class="flex-1 flex justify-center items-center text-sm">"Valid from"</div>
+						<div class="flex-1 flex justify-center items-center text-sm">
+							"Valid from"
+						</div>
 						<div class="flex-5 flex items-start justify-start pl-md">
 							<Input
 								on_input={Box::new(move |ev| {
 									ev.prevent_default();
-									token_info_signal.update(|token| {
-										if let Some(ref mut token) = token {
-											token.data.token_nbf = convert_string_to_datetime(event_target_value(&ev)).ok();
-										}
-									});
+									token_info_signal
+										.update(|token| {
+											if let Some(ref mut token) = token {
+												token.data.token_nbf = convert_string_to_datetime(
+														event_target_value(&ev),
+													)
+													.ok();
+											}
+										});
 								})}
 								r#type={InputType::Date}
 								placeholder="Valid From"
@@ -101,11 +108,15 @@ pub fn TokenInfo() -> impl IntoView {
 							<Input
 								on_input={Box::new(move |ev| {
 									ev.prevent_default();
-									token_info_signal.update(|token| {
-										if let Some(ref mut token) = token {
-											token.data.token_exp = convert_string_to_datetime(event_target_value(&ev)).ok();
-										}
-									});
+									token_info_signal
+										.update(|token| {
+											if let Some(ref mut token) = token {
+												token.data.token_exp = convert_string_to_datetime(
+														event_target_value(&ev),
+													)
+													.ok();
+											}
+										});
 								})}
 								r#type={InputType::Date}
 								placeholder="Valid Till"
@@ -120,9 +131,7 @@ pub fn TokenInfo() -> impl IntoView {
 			}
 			.into_view()
 		}
-		None => view! {
-			<p>"Couldn't Load Resource!"</p>
-		}
+		None => view! { <p>"Couldn't Load Resource!"</p> }
 		.into_view(),
 	}
 }
diff --git a/hosted-frontend/src/pages/manage_profile/tabs/api_token/edit_token/token_modal.rs b/hosted-frontend/src/pages/manage_profile/tabs/api_token/edit_token/token_modal.rs
index f3da86cc3..a4a1eec7a 100644
--- a/hosted-frontend/src/pages/manage_profile/tabs/api_token/edit_token/token_modal.rs
+++ b/hosted-frontend/src/pages/manage_profile/tabs/api_token/edit_token/token_modal.rs
@@ -19,39 +19,33 @@ pub fn TokenModal(
 	} = use_clipboard();
 
 	view! {
-		<Modal
-			color_variant={SecondaryColorVariant::Light}
-		>
-			<div
-				class="center-modal text-white text-sm flex flex-col items-start justify-start \
-				bg-secondary-light br-sm p-xl show-center-modal"
-			>
+		<Modal color_variant={SecondaryColorVariant::Light}>
+			<div class="center-modal text-white text-sm flex flex-col items-start justify-start \
+			bg-secondary-light br-sm p-xl show-center-modal">
 				<h3 class="text-primary text-lg">
 					"API Token is "
-					{move || if is_regenerated.get() {"Regenerated"} else {"Generated"}}
+					{move || if is_regenerated.get() { "Regenerated" } else { "Generated" }}
 				</h3>
 				<p class="text-sm text-thin my-md">
-					{
-						move || if is_regenerated.get() {
+					{move || {
+						if is_regenerated.get() {
 							"Your Token has be regenerated. \
 							Copy it now as we don't store API Tokens, and won't be able to show it again."
 						} else {
 							"Your Token has been generated. \
 							Copy it now as we don't store API Tokens, and won't be able to show it again."
 						}
-					}
+					}}
 				</p>
 				<div class="w-full flex items-start justify-start flex-wrap px-md py-xs bg-secondary-medium br-sm overflow-hidden">
-					<p class="break-word">{
-						let token = token.clone();
-						move || token.get()
-					}</p>
+					<p class="break-word">
+						{
+							let token = token.clone();
+							move || token.get()
+						}
+					</p>
 
-					<Show
-						clone:copy
-						clone:token
-						when={move || is_supported.get()}
-					>
+					<Show clone:copy clone:token when={move || is_supported.get()}>
 						<button
 							on:click={
 								let copy = copy.clone();
@@ -62,11 +56,11 @@ pub fn TokenModal(
 						>
 							<Show
 								when={move || copied.get()}
-								fallback={|| view! {
-									<Icon icon={IconType::Copy} size=Size::ExtraSmall />
+								fallback={|| {
+									view! { <Icon icon={IconType::Copy} size={Size::ExtraSmall} /> }
 								}}
 							>
-								<Icon icon={IconType::Check} size=Size::ExtraSmall />
+								<Icon icon={IconType::Check} size={Size::ExtraSmall} />
 							</Show>
 						</button>
 					</Show>
diff --git a/hosted-frontend/src/pages/manage_profile/tabs/api_token/mod.rs b/hosted-frontend/src/pages/manage_profile/tabs/api_token/mod.rs
index b07dffbab..3669dceaf 100644
--- a/hosted-frontend/src/pages/manage_profile/tabs/api_token/mod.rs
+++ b/hosted-frontend/src/pages/manage_profile/tabs/api_token/mod.rs
@@ -40,35 +40,37 @@ pub fn ListApiTokens() -> impl IntoView {
 		</Link>
 
 		<Transition>
-			{
-				move || match token_list.get() {
-					Some(token_list) => {
-						match token_list {
-							Ok(data) => {
-								view! {
-									<TableDashboard
-										column_grids={vec![4, 4, 4]}
-										headings={vec!["Name".into_view(), "Expiry".into_view(), "Created At".into_view()]}
+			{move || match token_list.get() {
+				Some(token_list) => {
+					match token_list {
+						Ok(data) => {
+							view! {
+								<TableDashboard
+									column_grids={vec![4, 4, 4]}
+									headings={vec![
+										"Name".into_view(),
+										"Expiry".into_view(),
+										"Created At".into_view(),
+									]}
 
-										render_rows={view! {
-											<For
-												each={move || data.clone().tokens}
-												key={|state| state.id}
-												let:child
-											>
-												<ApiTokenCard token={child}/>
-											</For>
-										}
-											.into_view()}
-									/>
-								}
+									render_rows={view! {
+										<For
+											each={move || data.clone().tokens}
+											key={|state| state.id}
+											let:child
+										>
+											<ApiTokenCard token={child} />
+										</For>
+									}
+										.into_view()}
+								/>
 							}
-							Err(_) => view! {}.into_view(),
 						}
-					},
-					None => view! {}.into_view(),
+						Err(_) => view! {}.into_view(),
+					}
 				}
-			}
+				None => view! {}.into_view(),
+			}}
 		</Transition>
 	}
 }
diff --git a/hosted-frontend/src/pages/manage_profile/tabs/profile_settings/email_card.rs b/hosted-frontend/src/pages/manage_profile/tabs/profile_settings/email_card.rs
index bc0645be2..1276de30e 100644
--- a/hosted-frontend/src/pages/manage_profile/tabs/profile_settings/email_card.rs
+++ b/hosted-frontend/src/pages/manage_profile/tabs/profile_settings/email_card.rs
@@ -15,12 +15,12 @@ pub fn EmailCard(
 	view! {
 		<div class={outer_div_class}>
 			<div class="flex-col-11">
-				<Textbox color_variant={SecondaryColorVariant::Medium} value={email.into_view()}/>
+				<Textbox color_variant={SecondaryColorVariant::Medium} value={email.into_view()} />
 			</div>
 
 			<div class="flex-col-1 flex items-center justify-center">
 				<button class="btn-icon" aria_label="Delete Email">
-					<Icon icon={IconType::Trash2} color={Color::Error}/>
+					<Icon icon={IconType::Trash2} color={Color::Error} />
 				</button>
 			</div>
 		</div>
diff --git a/hosted-frontend/src/pages/manage_profile/tabs/profile_settings/mod.rs b/hosted-frontend/src/pages/manage_profile/tabs/profile_settings/mod.rs
index 7e27e8a98..0a7f8e644 100644
--- a/hosted-frontend/src/pages/manage_profile/tabs/profile_settings/mod.rs
+++ b/hosted-frontend/src/pages/manage_profile/tabs/profile_settings/mod.rs
@@ -18,21 +18,19 @@ pub fn ProfileSettings() -> impl IntoView {
 						match user_data {
 							Ok(data) => {
 								view! {
-									<BasicInfo basic_user_info={data.clone().basic_user_info}/>
-									<ContactInfo user_email={data.clone().recovery_email}/>
+									<BasicInfo basic_user_info={data.clone().basic_user_info} />
+									<ContactInfo user_email={data.clone().recovery_email} />
 								}
 									.into_view()
 							}
 							Err(_) => view! {}.into_view(),
 						}
 					}
-					None => view! {
-						// <BasicInfo
-					}.into_view(),
+					None => view! {}.into_view(),
 				}}
 
 			</Transition>
-			<PasswordSection/>
+			<PasswordSection />
 		</div>
 	}
 }
diff --git a/hosted-frontend/src/pages/manage_profile/tabs/profile_settings/password_section.rs b/hosted-frontend/src/pages/manage_profile/tabs/profile_settings/password_section.rs
index fc9dc25d4..5fcf6eac3 100644
--- a/hosted-frontend/src/pages/manage_profile/tabs/profile_settings/password_section.rs
+++ b/hosted-frontend/src/pages/manage_profile/tabs/profile_settings/password_section.rs
@@ -74,7 +74,7 @@ pub fn PasswordSection() -> impl IntoView {
 
 							<p class="mt-md mb-xs txt-sm">"Enter OTP to confirm"</p>
 
-							<Input r#type={InputType::Text} id="otp"/>
+							<Input r#type={InputType::Text} id="otp" />
 
 							<div>
 								<Link
@@ -98,7 +98,7 @@ pub fn PasswordSection() -> impl IntoView {
 
 				<div class="flex full-width px-md">
 					<div class="flex-col-2 fr-fs-fs pt-sm txt-sm">
-						"Two-Factor" <br/> "Authentication"
+						"Two-Factor" <br /> "Authentication"
 					</div>
 
 					<div class="flex-col-10 fc-fs-fs gap-xxs">
@@ -118,8 +118,8 @@ pub fn PasswordSection() -> impl IntoView {
 			</form>
 
 			<ActionForm action={change_password_action} class="full-width pt-md gap-md fc-fs-fs">
-				<input type="hidden" name="mfa_otp"/>
-				<input type="hidden" name="access_token" prop:value={access_token}/>
+				<input type="hidden" name="mfa_otp" />
+				<input type="hidden" name="access_token" prop:value={access_token} />
 
 				<Show
 					when={move || show_create_password_fields.get()}
diff --git a/hosted-frontend/src/pages/runner/create_runner/head.rs b/hosted-frontend/src/pages/runner/create_runner/head.rs
index 9338ed4ee..12fa1bab7 100644
--- a/hosted-frontend/src/pages/runner/create_runner/head.rs
+++ b/hosted-frontend/src/pages/runner/create_runner/head.rs
@@ -7,9 +7,7 @@ pub fn RunnerCreateHead() -> impl IntoView {
 			<div class="w-full flex items-center justify-between">
 				<div class="flex flex-col items-start justify-between">
 					<PageTitleContainer>
-						<PageTitle icon_position={PageTitleIconPosition::End}>
-							"CI/CD"
-						</PageTitle>
+						<PageTitle icon_position={PageTitleIconPosition::End}>"CI/CD"</PageTitle>
 						<PageTitle
 							to="/runners"
 							variant={PageTitleVariant::SubHeading}
@@ -17,16 +15,15 @@ pub fn RunnerCreateHead() -> impl IntoView {
 						>
 							"Runners"
 						</PageTitle>
-						<PageTitle
-							variant={PageTitleVariant::SubHeading}
-						>
-							"New"
-						</PageTitle>
+						<PageTitle variant={PageTitleVariant::SubHeading}>"New"</PageTitle>
 					</PageTitleContainer>
 
 					<PageDescription
-						description={"Create and manage CI Runners for automated builds.".to_string()}
-						doc_link={Some("https://docs.patr.cloud/ci-cd/#choosing-a-runner".to_string())}
+						description={"Create and manage CI Runners for automated builds."
+							.to_string()}
+						doc_link={Some(
+							"https://docs.patr.cloud/ci-cd/#choosing-a-runner".to_string(),
+						)}
 					/>
 				</div>
 			</div>
diff --git a/hosted-frontend/src/pages/runner/create_runner/mod.rs b/hosted-frontend/src/pages/runner/create_runner/mod.rs
index 8f48303c0..622b7beb6 100644
--- a/hosted-frontend/src/pages/runner/create_runner/mod.rs
+++ b/hosted-frontend/src/pages/runner/create_runner/mod.rs
@@ -14,12 +14,10 @@ pub fn CreateRunner() -> impl IntoView {
 		<RunnerCreateHead />
 		<ContainerBody class="p-xs px-md gap-md overflow-y-auto text-white">
 			<form
-				on:submit={
-					move |ev| {
-						ev.prevent_default();
-						create_runner_action.dispatch(runner_name.get());
-					}
-				}
+				on:submit={move |ev| {
+					ev.prevent_default();
+					create_runner_action.dispatch(runner_name.get());
+				}}
 				class="w-full h-full flex flex-col justify-between items-start px-md py-xl fit-wide-screen mx-auto gap-md"
 			>
 				<div class="flex w-full">
@@ -46,17 +44,10 @@ pub fn CreateRunner() -> impl IntoView {
 				</div>
 
 				<div class="flex items-center justify-end gap-md w-full">
-					<Link
-						to="/runners"
-						style_variant={LinkStyleVariant::Plain}
-						should_submit={false}
-					>
+					<Link to="/runners" style_variant={LinkStyleVariant::Plain} should_submit=false>
 						"Back"
 					</Link>
-					<Link
-						style_variant={LinkStyleVariant::Contained}
-						should_submit={true}
-					>
+					<Link style_variant={LinkStyleVariant::Contained} should_submit=true>
 						"CREATE"
 					</Link>
 				</div>
diff --git a/hosted-frontend/src/pages/runner/dashboard/head.rs b/hosted-frontend/src/pages/runner/dashboard/head.rs
index 44d9f49b8..a3c44ea0c 100644
--- a/hosted-frontend/src/pages/runner/dashboard/head.rs
+++ b/hosted-frontend/src/pages/runner/dashboard/head.rs
@@ -8,20 +8,18 @@ pub fn RunnerDashboardHead() -> impl IntoView {
 			<div class="w-full flex justify-between items-center">
 				<div class="flex flex-col justify-between items-start">
 					<PageTitleContainer>
-						<PageTitle icon_position={PageTitleIconPosition::End}>
-							"CI/CD"
-						</PageTitle>
-						<PageTitle
-							to="/runners"
-							variant={PageTitleVariant::SubHeading}
-						>
+						<PageTitle icon_position={PageTitleIconPosition::End}>"CI/CD"</PageTitle>
+						<PageTitle to="/runners" variant={PageTitleVariant::SubHeading}>
 							"Runners"
 						</PageTitle>
 					</PageTitleContainer>
 
 					<PageDescription
-						description={"Create and manage CI Runners for automated builds.".to_string()}
-						doc_link={Some("https://docs.patr.cloud/ci-cd/#choosing-a-runner".to_string())}
+						description={"Create and manage CI Runners for automated builds."
+							.to_string()}
+						doc_link={Some(
+							"https://docs.patr.cloud/ci-cd/#choosing-a-runner".to_string(),
+						)}
 					/>
 				</div>
 
diff --git a/hosted-frontend/src/pages/runner/dashboard/mod.rs b/hosted-frontend/src/pages/runner/dashboard/mod.rs
index 3203cf326..6758efb71 100644
--- a/hosted-frontend/src/pages/runner/dashboard/mod.rs
+++ b/hosted-frontend/src/pages/runner/dashboard/mod.rs
@@ -18,31 +18,27 @@ pub fn RunnerDashboard() -> impl IntoView {
 		<ContainerBody class="p-xs gap-md">
 			<DashboardContainer
 				gap={Size::Large}
-				render_items={
-					view! {
-						<Transition>
-							{
-								move || match runners_list.get() {
-									Some(Ok(data)) => {
-										view! {
-											<For
-												each={move || data.runners.clone()}
-												key={|state| state.id}
-												let:runner
-											>
-												<RunnerCard runner={runner}/>
-											</For>
-										}.into_view()
-									},
-									Some(Err(_)) => view! {}.into_view(),
-									None => view! {
-										<RunnerSkeleton />
-									}.into_view(),
+				render_items={view! {
+					<Transition>
+						{move || match runners_list.get() {
+							Some(Ok(data)) => {
+								view! {
+									<For
+										each={move || data.runners.clone()}
+										key={|state| state.id}
+										let:runner
+									>
+										<RunnerCard runner={runner} />
+									</For>
 								}
+									.into_view()
 							}
-						</Transition>
-					}.into_view()
+							Some(Err(_)) => view! {}.into_view(),
+							None => view! { <RunnerSkeleton /> }.into_view(),
+						}}
+					</Transition>
 				}
+					.into_view()}
 			/>
 		</ContainerBody>
 	}
diff --git a/hosted-frontend/src/pages/runner/dashboard/runner_card.rs b/hosted-frontend/src/pages/runner/dashboard/runner_card.rs
index ef5b63b25..4dd2dd707 100644
--- a/hosted-frontend/src/pages/runner/dashboard/runner_card.rs
+++ b/hosted-frontend/src/pages/runner/dashboard/runner_card.rs
@@ -9,40 +9,41 @@ pub fn RunnerCard(
 	runner: MaybeSignal<WithId<Runner>>,
 ) -> impl IntoView {
 	view! {
-		<div
-			class="bg-secondary-light flex flex-col items-start justify-start px-lg py-md br-sm text-white gap-xs"
-		>
-			 <div class="w-full flex items-center justify-start gap-md">
+		<div class="bg-secondary-light flex flex-col items-start justify-start px-lg py-md br-sm text-white gap-xs">
+			<div class="w-full flex items-center justify-start gap-md">
 				<p class="text-md text-primary text-ellipsis overflow-hidden">
 					{runner.get().name.clone()}
 				</p>
 
 				{match runner.get().last_seen {
-					Some(_) => view! {
-						<StatusBadge
-							text=Some("unreachable".to_string())
-							color={Some(Color::Grey)}
-						/>
-					},
-					None => view! {
-						<StatusBadge
-							text=Some("live".to_string())
-							color={Some(Color::Success)}
-						/>
-					}.into_view()
+					Some(_) => {
+						view! {
+							<StatusBadge
+								text={Some("unreachable".to_string())}
+								color={Some(Color::Grey)}
+							/>
+						}
+					}
+					None => {
+						view! {
+							<StatusBadge
+								text={Some("live".to_string())}
+								color={Some(Color::Success)}
+							/>
+						}
+							.into_view()
+					}
 				}}
 				<StatusBadge />
 			</div>
 
 			<div class="flex-2 w-full gap-xs flex items-center justify-center">
 				<div class="bg-secondary-medium br-sm px-lg py-sm flex flex-col items-start justify-center w-full">
-					<small class="letter-sp-md text-xxs text-grey">
-						"LAST SEEN"
-					</small>
+					<small class="letter-sp-md text-xxs text-grey">"LAST SEEN"</small>
 					<p class="text-primary w-[15ch] text-ellipsis overflow-hidden">
 						{match runner.get().last_seen {
 							Some(date) => date.to_string().into_view(),
-							None => "Just Now".into_view()
+							None => "Just Now".into_view(),
 						}}
 					</p>
 				</div>
@@ -55,9 +56,9 @@ pub fn RunnerCard(
 			>
 				"MANAGE RUNNER"
 				<Icon
-					icon=IconType::ChevronRight
-					color=Color::Primary
-					size=Size::ExtraSmall
+					icon={IconType::ChevronRight}
+					color={Color::Primary}
+					size={Size::ExtraSmall}
 				/>
 			</Link>
 		</div>
diff --git a/hosted-frontend/src/pages/runner/manage_runner/head.rs b/hosted-frontend/src/pages/runner/manage_runner/head.rs
index b51dd7693..1625738b6 100644
--- a/hosted-frontend/src/pages/runner/manage_runner/head.rs
+++ b/hosted-frontend/src/pages/runner/manage_runner/head.rs
@@ -15,9 +15,7 @@ pub fn RunnerManageHead(
 			<div class="w-full flex justify-between items-center">
 				<div class="flex flex-col items-start justify-between">
 					<PageTitleContainer clone:runner_info>
-						<PageTitle icon_position={PageTitleIconPosition::End}>
-							"CI/CD"
-						</PageTitle>
+						<PageTitle icon_position={PageTitleIconPosition::End}>"CI/CD"</PageTitle>
 						<PageTitle
 							to="/runners"
 							variant={PageTitleVariant::SubHeading}
@@ -25,9 +23,7 @@ pub fn RunnerManageHead(
 						>
 							"Runners"
 						</PageTitle>
-						<PageTitle
-							variant={PageTitleVariant::SubHeading}
-						>
+						<PageTitle variant={PageTitleVariant::SubHeading}>
 							{
 								let runner_info = runner_info.clone();
 								move || runner_info.get().name.clone()
@@ -37,27 +33,25 @@ pub fn RunnerManageHead(
 
 					<PageDescription
 						description={"change me to a description".to_string()}
-						doc_link={Some("https://docs.patr.cloud/ci-cd/#choosing-a-runner".to_string())}
+						doc_link={Some(
+							"https://docs.patr.cloud/ci-cd/#choosing-a-runner".to_string(),
+						)}
 					/>
 				</div>
 
-				<form
-					on:submit={
-						move |ev| {
-							ev.prevent_default();
-							delete_runner_action.dispatch(runner_info.get().id.clone());
-						}
-					}
-				>
+				<form on:submit={move |ev| {
+					ev.prevent_default();
+					delete_runner_action.dispatch(runner_info.get().id.clone());
+				}}>
 					<Link
 						style_variant={LinkStyleVariant::Contained}
-						should_submit={true}
+						should_submit=true
 						class="text-white btn-error"
 					>
 						<Icon
-							icon=IconType::Trash2
-							size=Size::ExtraSmall
-							color=Color::White
+							icon={IconType::Trash2}
+							size={Size::ExtraSmall}
+							color={Color::White}
 							class="mr-xs"
 						/>
 						"DELETE"
diff --git a/hosted-frontend/src/pages/runner/manage_runner/mod.rs b/hosted-frontend/src/pages/runner/manage_runner/mod.rs
index d4a75dd74..5b73023dc 100644
--- a/hosted-frontend/src/pages/runner/manage_runner/mod.rs
+++ b/hosted-frontend/src/pages/runner/manage_runner/mod.rs
@@ -25,18 +25,14 @@ fn ManageRunnerContent(
 
 	view! {
 		<Transition>
-			{
-				move || {
-					match runner_info.get() {
-						Some(Ok(runner_info)) => view! {
-							<RunnerManageHead
-								runner_info={runner_info.runner.clone()}
-							/>
+			{move || {
+				match runner_info.get() {
+					Some(Ok(runner_info)) => {
+						view! {
+							<RunnerManageHead runner_info={runner_info.runner.clone()} />
 
 							<ContainerBody class="p-xs px-md gap-md overflow-y-auto text-white">
-								<form
-									class="w-full h-full px-md py-xl flex flex-col items-start justify-start fit-wide-screen mx-auto gap-md"
-								>
+								<form class="w-full h-full px-md py-xl flex flex-col items-start justify-start fit-wide-screen mx-auto gap-md">
 									<div class="flex w-full">
 										<div class="flex-2 flex items-start justify-start pt-sm">
 											<label html_for="name" class="text-white text-sm">
@@ -58,29 +54,27 @@ fn ManageRunnerContent(
 								</form>
 							</ContainerBody>
 						}
-						.into_view(),
-						Some(Err(err)) => view! {
+							.into_view()
+					}
+					Some(Err(err)) => {
+						view! {
 							<div>"Error fetching runner info"</div>
 							<ErrorPage
 								title="Error Loading Runner Info"
-								content={
-									view! {
-										<p class="text-white">
-											{format!("{}", err.to_string().to_case(Case::Title))}
-										</p>
-									}.into_view()
+								content={view! {
+									<p class="text-white">
+										{format!("{}", err.to_string().to_case(Case::Title))}
+									</p>
 								}
+									.into_view()}
 							/>
-						}.into_view(),
-						None => view! {
-							<div>"Loading Runner Info"</div>
 						}
-						.into_view(),
+							.into_view()
 					}
+					None => view! { <div>"Loading Runner Info"</div> }.into_view(),
 				}
-			}
+			}}
 		</Transition>
-
 	}
 }
 
@@ -101,20 +95,13 @@ pub fn ManageRunner() -> impl IntoView {
 	});
 
 	move || match runner_id.get() {
-		Some(runner_id) => view! {
-			<ManageRunnerContent
-				runner_id={Signal::derive(move || runner_id)}
-			/>
-		}
+		Some(runner_id) => view! { <ManageRunnerContent runner_id={Signal::derive(move || runner_id)} /> }
 		.into_view(),
 		None => view! {
 			<ErrorPage
 				title="Invalid Runner ID"
-				content={
-					view! {
-						<p class="text-white">"Runner id is not a valid UUID"</p>
-					}.into_view()
-				}
+				content={view! { <p class="text-white">"Runner id is not a valid UUID"</p> }
+					.into_view()}
 			/>
 		}
 		.into_view(),
diff --git a/hosted-frontend/src/pages/runner/mod.rs b/hosted-frontend/src/pages/runner/mod.rs
index 35559efee..4ce1400b5 100644
--- a/hosted-frontend/src/pages/runner/mod.rs
+++ b/hosted-frontend/src/pages/runner/mod.rs
@@ -7,17 +7,7 @@ use leptos_router::*;
 pub use self::{create_runner::*, dashboard::*, manage_runner::*};
 use crate::prelude::*;
 
-#[component(transparent)]
-pub fn RunnerRoutes() -> impl IntoView {
-	view! {
-		<Route path={LoggedInRoute::Runners} view={RunnerPage}>
-			<Route path={"create"} view={CreateRunner}/>
-			<Route path={":runner_id"} view={ManageRunner}/>
-			<Route path={AppRoutes::Empty} view={RunnerDashboard}/>
-		</Route>
-	}
-}
-
+/// The Wrapper Page for all Runner Pages
 #[component]
 pub fn RunnerPage() -> impl IntoView {
 	view! {
diff --git a/hosted-frontend/src/pages/workspace/create/mod.rs b/hosted-frontend/src/pages/workspace/create/mod.rs
index 05ea8f81c..28fc94265 100644
--- a/hosted-frontend/src/pages/workspace/create/mod.rs
+++ b/hosted-frontend/src/pages/workspace/create/mod.rs
@@ -11,8 +11,8 @@ pub fn CreateWorkspace() -> impl IntoView {
 				<PageTitleContainer>
 					<PageTitle to="/workspace">"Workspace"</PageTitle>
 					<PageTitle
-						variant=PageTitleVariant::SubHeading
-						icon_position=PageTitleIconPosition::Start
+						variant={PageTitleVariant::SubHeading}
+						icon_position={PageTitleIconPosition::Start}
 					>
 						"Create Workspace"
 					</PageTitle>
@@ -27,7 +27,11 @@ pub fn CreateWorkspace() -> impl IntoView {
 				class="w-full h-full px-md fit-wide-screen \
 				gap-md flex flex-col items-start justify-start"
 			>
-				<input type="hidden" name="access_token" prop:value={state.get_untracked().get_access_token()} />
+				<input
+					type="hidden"
+					name="access_token"
+					prop:value={state.get_untracked().get_access_token()}
+				/>
 				<div class="flex w-full">
 					<div class="flex-2 pt-sm">
 						<label html_for="name" class="text-sm">
@@ -53,7 +57,7 @@ pub fn CreateWorkspace() -> impl IntoView {
 						"BACK"
 					</Link>
 					<Link
-						should_submit={true}
+						should_submit=true
 						r#type={Variant::Button}
 						style_variant={LinkStyleVariant::Contained}
 					>
diff --git a/hosted-frontend/src/pages/workspace/manage_workspace.rs b/hosted-frontend/src/pages/workspace/manage_workspace.rs
index e53bc7a9b..99f85b917 100644
--- a/hosted-frontend/src/pages/workspace/manage_workspace.rs
+++ b/hosted-frontend/src/pages/workspace/manage_workspace.rs
@@ -11,33 +11,33 @@ pub fn ManageWorkspace() -> impl IntoView {
 
 				<Link
 					class="gap-xxs"
-					r#type=Variant::Link
-					style_variant=LinkStyleVariant::Contained
+					r#type={Variant::Link}
+					style_variant={LinkStyleVariant::Contained}
 					to="create"
 				>
 					"CREATE WORKSPACE"
-					<Icon icon=IconType::Plus size=Size::ExtraSmall color=Color::Black />
+					<Icon icon={IconType::Plus} size={Size::ExtraSmall} color={Color::Black} />
 				</Link>
 			</div>
 
 			<Tabs tab_items={vec![
 				TabItem {
 					name: "Details".to_owned(),
-					path: "".to_owned()
+					path: "".to_owned(),
 				},
 				TabItem {
 					name: "Billing".to_owned(),
-					path: "".to_owned()
+					path: "".to_owned(),
 				},
 				TabItem {
 					name: "Pricing".to_owned(),
-					path: "".to_owned()
+					path: "".to_owned(),
 				},
 				TabItem {
 					name: "Transactions".to_owned(),
-					path: "".to_owned()
-				}
-			]}/>
+					path: "".to_owned(),
+				},
+			]} />
 		</ContainerHead>
 
 		<ContainerBody class="px-xl ofy-auto">
diff --git a/hosted-frontend/src/pages/workspace/mod.rs b/hosted-frontend/src/pages/workspace/mod.rs
index 4358ba3aa..c07605d06 100644
--- a/hosted-frontend/src/pages/workspace/mod.rs
+++ b/hosted-frontend/src/pages/workspace/mod.rs
@@ -7,20 +7,6 @@ mod tabs;
 
 pub use self::{create::*, manage_workspace::*, sidebar::*, tabs::*};
 
-#[component(transparent)]
-pub fn WorkspaceRoutes() -> impl IntoView {
-	view! {
-		<Route path={AppRoutes::Empty} view={|| view! { <Outlet /> }}>
-			<Route path={LoggedInRoute::Workspace} view={WorkspacePage}>
-				<Route path={AppRoutes::Empty} view={ManageWorkspace}>
-					<Route path="" view={ManageWorkspaceSettingsTab} />
-				</Route>
-				<Route path="/create" view={CreateWorkspace} />
-			</Route>
-		</Route>
-	}
-}
-
 #[component]
 pub fn WorkspacePage() -> impl IntoView {
 	view! {
diff --git a/hosted-frontend/src/pages/workspace/sidebar/card.rs b/hosted-frontend/src/pages/workspace/sidebar/card.rs
index 1901c9845..4bdd2caec 100644
--- a/hosted-frontend/src/pages/workspace/sidebar/card.rs
+++ b/hosted-frontend/src/pages/workspace/sidebar/card.rs
@@ -23,30 +23,23 @@ pub fn WorkspaceCard(
 	view! {
 		<div
 			class="sidebar-user flex justify-between items-center py-sm px-md cursor-pointer
-				w-full br-sm bg-secondary-dark gap-xxs relative"
-			on:click={move |_| {
-				show_workspace_switcher.update(|v| *v = !*v)
-			}}
+			w-full br-sm bg-secondary-dark gap-xxs relative"
+			on:click={move |_| { show_workspace_switcher.update(|v| *v = !*v) }}
 		>
 			<div class="flex flex-col items-start justify-start w-full">
 				<p class="text-sm text-white w-[20ch] text-ellipsis overflow-hidden">
 					{move || match current_workspace.get() {
-						Some(workspace) => {
-							format!("{}", workspace.name).into_view()
-						},
-						None => "Select A Workspace".into_view()
+						Some(workspace) => format!("{}", workspace.name).into_view(),
+						None => "Select A Workspace".into_view(),
 					}}
 				</p>
 			</div>
 
-			<Link
-				r#type={Variant::Button}
-				to="/workspace"
-			>
-				<Icon icon=IconType::Settings color=Color::Grey />
+			<Link r#type={Variant::Button} to="/workspace">
+				<Icon icon={IconType::Settings} color={Color::Grey} />
 			</Link>
 
-			<Show when=move || show_workspace_switcher.get()>
+			<Show when={move || show_workspace_switcher.get()}>
 				<WorkspaceSwitcher
 					set_workspace_id={set_workspace_id.clone()}
 					workspaces={workspaces.clone()}
diff --git a/hosted-frontend/src/pages/workspace/sidebar/item.rs b/hosted-frontend/src/pages/workspace/sidebar/item.rs
index 3de75c538..0359488fa 100644
--- a/hosted-frontend/src/pages/workspace/sidebar/item.rs
+++ b/hosted-frontend/src/pages/workspace/sidebar/item.rs
@@ -17,7 +17,8 @@ pub fn WorkspaceItem(
 	// let (state, set_state) = AuthState::load();
 
 	view! {
-		<li class="full-width py-xxs"
+		<li
+			class="full-width py-xxs"
 			on:click={
 				let workspace = workspace.clone();
 				move |_| {
@@ -26,10 +27,8 @@ pub fn WorkspaceItem(
 				}
 			}
 		>
-			<div
-				class="flex flex-col justify-between items-start py-xxs px-md br-sm gap-xxs w-full cursor-pointer
-				border border-border-color h-full outline-primary-focus workspace-item"
-			>
+			<div class="flex flex-col justify-between items-start py-xxs px-md br-sm gap-xxs w-full cursor-pointer
+			border border-border-color h-full outline-primary-focus workspace-item">
 				<div class="flex justify-between items-center w-full gap-xxs">
 					<span class="overflow-hidden text-of-ellipsis w-[25ch] text-sm text-medium">
 						{workspace.get().name.clone()}
@@ -37,8 +36,7 @@ pub fn WorkspaceItem(
 				</div>
 
 				<span class="flex justify-start items-center text-xxs text-grey">
-					"Owned by &nbsp;"
-					<strong class="text-xxs text-bold text-white">"You"</strong>
+					"Owned by &nbsp;" <strong class="text-xxs text-bold text-white">"You"</strong>
 				</span>
 			</div>
 		</li>
diff --git a/hosted-frontend/src/pages/workspace/sidebar/mod.rs b/hosted-frontend/src/pages/workspace/sidebar/mod.rs
index 9f92574e2..0e9eb7070 100644
--- a/hosted-frontend/src/pages/workspace/sidebar/mod.rs
+++ b/hosted-frontend/src/pages/workspace/sidebar/mod.rs
@@ -83,22 +83,24 @@ pub fn WorkspaceSidebarComponent() -> impl IntoView {
 
 	view! {
 		<Transition>
-			{
-				move || match workspace_list.get() {
-					Some(workspace_list) => match workspace_list {
-						Ok(data) => view! {
-							<WorkspaceCard
-								current_workspace={current_workspace}
-								set_workspace_id={set_current_workspace}
-								workspaces={data.clone().workspaces}
-							/>
+			{move || match workspace_list.get() {
+				Some(workspace_list) => {
+					match workspace_list {
+						Ok(data) => {
+							view! {
+								<WorkspaceCard
+									current_workspace={current_workspace}
+									set_workspace_id={set_current_workspace}
+									workspaces={data.clone().workspaces}
+								/>
+							}
+								.into_view()
 						}
-						.into_view(),
-						Err(_) => view! {"Error Loading"}.into_view(),
-					},
-					None => view! {"loading..."}.into_view(),
+						Err(err) => format!("Error Loading, {:?}", err).into_view(),
+					}
 				}
-			}
+				None => view! { "loading..." }.into_view(),
+			}}
 		</Transition>
 	}
 }
diff --git a/hosted-frontend/src/pages/workspace/sidebar/switcher.rs b/hosted-frontend/src/pages/workspace/sidebar/switcher.rs
index 34ae90a09..0bd6d059a 100644
--- a/hosted-frontend/src/pages/workspace/sidebar/switcher.rs
+++ b/hosted-frontend/src/pages/workspace/sidebar/switcher.rs
@@ -22,14 +22,16 @@ pub fn WorkspaceSwitcher(
 			<div
 				tab_index={-1}
 				class="
-					text-white bg-secondary-light border border-border-color rounded-sm
-					flex flex-col itmes-start justify-start workspace-switcher pt-md "
+				text-white bg-secondary-light border border-border-color rounded-sm
+				flex flex-col itmes-start justify-start workspace-switcher pt-md "
 			>
 				<p class="mx-xl text-md mb-sm">"Workspaces"</p>
 				<div class="fc-fs-fs w-full ul-light pb-xs">
 					<ul class="w-full overflow-y-auto px-xl flex flex-col items-start justify-start">
 						<For
-							each={move || stored_workspaces.with_value(|workspaces| workspaces.clone().get())}
+							each={move || {
+								stored_workspaces.with_value(|workspaces| workspaces.clone().get())
+							}}
 							key={|state| state.id}
 							let:child
 						>
@@ -50,7 +52,11 @@ pub fn WorkspaceSwitcher(
 						class="gap-xxs"
 					>
 						"CREATE WORKSPACE"
-						<Icon icon=IconType::Plus size=Size::ExtraSmall color=Color::Primary />
+						<Icon
+							icon={IconType::Plus}
+							size={Size::ExtraSmall}
+							color={Color::Primary}
+						/>
 					</Link>
 				</div>
 			</div>
diff --git a/hosted-frontend/src/pages/workspace/tabs/settings.rs b/hosted-frontend/src/pages/workspace/tabs/settings.rs
index 85898be37..635f1f12b 100644
--- a/hosted-frontend/src/pages/workspace/tabs/settings.rs
+++ b/hosted-frontend/src/pages/workspace/tabs/settings.rs
@@ -12,24 +12,27 @@ fn ShowWorkspaceInfo(
 		<div class="flex flex-col items-start justify-start w-full">
 			<div class="flex my-xs w-full">
 				<div class="flex-2 flex items-start justify-start mt-sm">
-					<label html_for="workspaceId" class="text-white text-sm flex items-center justify-start">
+					<label
+						html_for="workspaceId"
+						class="text-white text-sm flex items-center justify-start"
+					>
 						"Workspace ID"
 					</label>
 				</div>
 				<div class="flex-10 text-grey bg-secondary-light br-sm py-xxs px-xl flex justify-between items-center">
 					<div class="px-sm">{workspace.get().id.to_string()}</div>
-					<button
-						class="btn-icon ml-auto p-xxs"
-						aria_label="Copy workspace id"
-					>
-						<Icon icon=IconType::Copy size=Size::ExtraSmall />
+					<button class="btn-icon ml-auto p-xxs" aria_label="Copy workspace id">
+						<Icon icon={IconType::Copy} size={Size::ExtraSmall} />
 					</button>
 				</div>
 			</div>
 
 			<div class="flex my-xs w-full">
 				<div class="flex-2 flex items-start justify-start mt-sm">
-					<label html_for="name" class="text-white text-sm flex items-center justify-start">
+					<label
+						html_for="name"
+						class="text-white text-sm flex items-center justify-start"
+					>
 						"Name"
 					</label>
 				</div>
@@ -37,7 +40,7 @@ fn ShowWorkspaceInfo(
 					<Input
 						placeholder="Workspace Name"
 						class="w-full"
-						r#type=InputType::Text
+						r#type={InputType::Text}
 						id="name"
 						name="name"
 						value={workspace.get().data.name}
@@ -47,7 +50,10 @@ fn ShowWorkspaceInfo(
 
 			<div class="flex my-xs w-full">
 				<div class="flex-2 flex flex-col items-start justify-start mt-md">
-					<label html_for="alertEmail" class="text-white text-sm flex items-center justify-start">
+					<label
+						html_for="alertEmail"
+						class="text-white text-sm flex items-center justify-start"
+					>
 						"Alert Email(s)"
 					</label>
 					<span class="text-grey">
@@ -58,7 +64,7 @@ fn ShowWorkspaceInfo(
 				<div class="flex-10 flex flex-col items-start justify-start">
 					<div class="w-full flex items-center justify-start mb-xs">
 						<div class="flex-11">
-							<Textbox value="ac380012@gmail.com".into_view() />
+							<Textbox value={"ac380012@gmail.com".into_view()} />
 						</div>
 					</div>
 				</div>
@@ -103,16 +109,13 @@ pub fn ManageWorkspaceSettingsTab() -> impl IntoView {
 	view! {
 		<div class="flex flex-col items-start justify-start w-full h-full fit-wide-screen mx-auto px-md my-xl">
 			<Transition>
-				{
-					move || match current_workspace.get() {
-						Some(current_workspace) => {
-							view! {
-								<ShowWorkspaceInfo workspace={current_workspace.clone()}/>
-							}.into_view()
-						},
-						None => view! {}.into_view()
+				{move || match current_workspace.get() {
+					Some(current_workspace) => {
+						view! { <ShowWorkspaceInfo workspace={current_workspace.clone()} /> }
+							.into_view()
 					}
-				}
+					None => view! {}.into_view(),
+				}}
 			</Transition>
 		</div>
 	}
diff --git a/hosted-frontend/src/routes/auth/verify_signup.rs b/hosted-frontend/src/routes/auth/verify_signup.rs
index e8e8f79d4..bdfd0b910 100644
--- a/hosted-frontend/src/routes/auth/verify_signup.rs
+++ b/hosted-frontend/src/routes/auth/verify_signup.rs
@@ -1,7 +1,7 @@
 macros::declare_app_route! {
 	/// Route for verifying a signup with a token
 	VerifySignUp,
-	"/verify-signup",
+	"/confirm",
 	requires_login = false,
 	query = {
 		/// The userId to prefill the forgot password form with
diff --git a/hosted-frontend/src/routes/logged_out_routes.rs b/hosted-frontend/src/routes/logged_out_routes.rs
index 929af5018..efda9faad 100644
--- a/hosted-frontend/src/routes/logged_out_routes.rs
+++ b/hosted-frontend/src/routes/logged_out_routes.rs
@@ -14,9 +14,9 @@ pub fn LoggedOutRoutesComponent() -> impl IntoView {
 			view={LoggedInRoutesView}
 			condition={move || state.get().is_logged_out()}
 		>
-			<Route path={LoggedOutRoute::Login} view={LoginForm}/>
-			<Route path={LoggedOutRoute::SignUp} view={SignUpForm}/>
-			<Route path={LoggedOutRoute::ConfirmOtp} view={ConfirmSignUpPage}/>
+			<Route path={LoggedOutRoute::Login} view={LoginForm} />
+			<Route path={LoggedOutRoute::SignUp} view={SignUpForm} />
+			<Route path={LoggedOutRoute::ConfirmOtp} view={ConfirmSignUpPage} />
 		</ProtectedRoute>
 	}
 }
diff --git a/hosted-frontend/src/routes/mod.rs b/hosted-frontend/src/routes/mod.rs
index 79348b2a7..070d9d855 100644
--- a/hosted-frontend/src/routes/mod.rs
+++ b/hosted-frontend/src/routes/mod.rs
@@ -1,14 +1,47 @@
 mod auth;
+mod profile;
+mod workspace;
 
 mod logged_in_routes;
 mod logged_out_routes;
 mod not_workspaced_content;
 mod workspaced_content;
 
+use models::prelude::*;
+use serde::{Deserialize, Serialize};
+
 pub use self::{
 	auth::*,
 	logged_in_routes::*,
 	logged_out_routes::*,
 	not_workspaced_content::*,
+	profile::*,
+	workspace::*,
 	workspaced_content::*,
 };
+
+/// The direction of the sort
+#[derive(
+	Debug, Clone, Serialize, Deserialize, PartialEq, Eq, strum::Display, strum::EnumString,
+)]
+#[strum(serialize_all = "camelCase")]
+pub enum SortDirection {
+	/// Sort in ascending order
+	Ascending,
+	/// Sort in descending order
+	Descending,
+}
+
+/// Common query parameters for all routes
+#[derive(Debug, Clone, Serialize, Deserialize, PartialEq, Eq, Default)]
+pub struct CommonQueryParams {
+	/// The Page number to fetch
+	#[serde(skip_serializing_if = "Option::is_none")]
+	pub page: Option<u32>,
+	/// The Sorting order of the resource
+	#[serde(skip_serializing_if = "Option::is_none")]
+	pub order: Option<SortDirection>,
+	/// Filter the resource by the given query
+	#[serde(skip_serializing_if = "Option::is_none")]
+	pub query: Option<String>,
+}
diff --git a/hosted-frontend/src/routes/not_workspaced_content.rs b/hosted-frontend/src/routes/not_workspaced_content.rs
index a7a09af30..22d617370 100644
--- a/hosted-frontend/src/routes/not_workspaced_content.rs
+++ b/hosted-frontend/src/routes/not_workspaced_content.rs
@@ -7,19 +7,21 @@ pub fn NotWorkspacedRoutes() -> impl IntoView {
 	view! {
 		<Route
 			path={AppRoutes::Empty}
-			view={|| view! {
-				<Sidebar>
-					<div />
-				</Sidebar>
+			view={|| {
+				view! {
+					<Sidebar sidebar_items={get_sidebar_items(expect_context::<AppType>())}>
+						<div />
+					</Sidebar>
 
-				<main class="fc-fs-ct full-width px-lg">
-					<Outlet/>
-				</main>
+					<main class="fc-fs-ct full-width px-lg">
+						<Outlet />
+					</main>
+				}
 			}}
 		>
-			<ProfileRoutes/>
-			<WorkspaceRoutes/>
-			<Route path="" view={|| view! { <div></div> }}/>
+			<ProfileRoutes />
+			<WorkspaceRoutes />
+			<Route path="" view={|| view! { <div></div> }} />
 		</Route>
 	}
 }
diff --git a/hosted-frontend/src/routes/profile/mod.rs b/hosted-frontend/src/routes/profile/mod.rs
new file mode 100644
index 000000000..d623bd806
--- /dev/null
+++ b/hosted-frontend/src/routes/profile/mod.rs
@@ -0,0 +1,35 @@
+use models::utils::Uuid;
+
+macros::declare_app_route! {
+	/// Route for Manage Profile Page
+	ManageProfile,
+	"/user",
+	requires_login = true,
+	query = {}
+}
+
+macros::declare_app_route! {
+	/// Route for Api Tokens Page
+	ApiTokens,
+	"/user/api-tokens",
+	requires_login = true,
+	query = {}
+}
+
+macros::declare_app_route! {
+	/// Route for Create Api Tokens Page
+	CreateApiToken,
+	"/user/api-tokens/create",
+	requires_login = true,
+	query = {}
+}
+
+macros::declare_app_route! {
+	/// Route for Edit Api Tokens Page
+	EditApiToken,
+	"/user/api-tokens/:token_id" {
+		pub token_id: Uuid
+	},
+	requires_login = true,
+	query = {}
+}
diff --git a/hosted-frontend/src/routes/workspace/infrastructure/database.rs b/hosted-frontend/src/routes/workspace/infrastructure/database.rs
new file mode 100644
index 000000000..ef7950df0
--- /dev/null
+++ b/hosted-frontend/src/routes/workspace/infrastructure/database.rs
@@ -0,0 +1,46 @@
+use crate::{
+	pages::{CreateDatabase, DatabaseDashboard, DatabasePage, ManageDatabase},
+	prelude::*,
+};
+
+::macros::declare_app_route! {
+	/// Route for Databases Dashboard Page
+	DatabaseDashboard,
+	"/database",
+	requires_login = true,
+	query = {
+		/// Common Query Parameters
+		#[serde(flatten)]
+		pub common: CommonQueryParams,
+	}
+}
+
+::macros::declare_app_route! {
+	/// Route for Databases Create Page
+	CreateDatabase,
+	"/database/create",
+	requires_login = true,
+	query = {}
+}
+
+::macros::declare_app_route! {
+	/// Route for Databases Details Page
+	ManageDatabase,
+	"/database/:database_id" {
+		/// The id of the database
+		pub database_id: Uuid,
+	},
+	requires_login = true,
+	query = {}
+}
+
+#[component(transparent)]
+pub fn DatabaseRoutes() -> impl IntoView {
+	view! {
+		<AppRoute<DatabaseDashboardRoute, _, _> view={move |_query, _params| DatabasePage}>
+			<AppRoute<CreateDatabaseRoute, _, _> view={move |_query, _params| CreateDatabase} />
+			<AppRoute<ManageDatabaseRoute, _, _> view={move |_query, _params| ManageDatabase} />
+			<Route path={AppRoutes::Empty} view={DatabaseDashboard} />
+		</AppRoute>
+	}
+}
diff --git a/hosted-frontend/src/routes/workspace/infrastructure/deployment.rs b/hosted-frontend/src/routes/workspace/infrastructure/deployment.rs
new file mode 100644
index 000000000..d4228ebac
--- /dev/null
+++ b/hosted-frontend/src/routes/workspace/infrastructure/deployment.rs
@@ -0,0 +1,201 @@
+use models::{api::workspace::deployment::DeploymentStatus, prelude::*};
+use serde::{Deserialize, Serialize};
+
+use crate::{
+	pages::{
+		CreateDeployment,
+		DeploymentDashboard,
+		DeploymentPage,
+		ManageDeploymentDetailsTab,
+		ManageDeploymentImageHistory,
+		ManageDeploymentScaling,
+		ManageDeploymentUrls,
+		ManageDeployments,
+		ManageDeploymentsLogs,
+		ManageDeploymentsMonitoring,
+	},
+	prelude::*,
+	CommonQueryParams,
+};
+
+/// Columns that can be filtered by,
+#[derive(
+	Debug, Clone, Serialize, Deserialize, PartialEq, Eq, strum::Display, strum::EnumString,
+)]
+#[strum(serialize_all = "camelCase")]
+pub enum FilterableColumns {
+	/// Filter by the name of the deployment
+	Name,
+	/// Filter by the runner name of the deployment
+	RunnerName,
+
+	/// Filter by the status of the deployment
+	Status,
+	/// Filter by the time the deployment was created
+	Created,
+	/// Filter by the time the deployment was last updated
+	LastUpdated,
+	/// Filter by the image name of the deployment
+	ImageName,
+	/// Filter by the image tag of the deployment
+	ImageTag,
+}
+
+/// Sortable columns for the deployments
+#[derive(
+	Debug, Clone, Serialize, Deserialize, PartialEq, Eq, strum::Display, strum::EnumString,
+)]
+#[strum(serialize_all = "camelCase")]
+pub enum SortableColumns {
+	/// Sort by the name of the deployment
+	Name,
+	/// Sort by the runner name of the deployment
+	RunnerName,
+	/// Sort by the created time of the deployment
+	Created,
+	/// Sort by the last updated time of the deployment
+	LastUpdated,
+	/// Sort by the status of the deployment
+	Status,
+}
+
+::macros::declare_app_route! {
+	/// Route for Deployments Dashboard Page
+	DeploymentsDashboard,
+	"/deployment",
+	requires_login = true,
+	query = {
+		/// Common Query Parameters
+		#[serde(flatten)]
+		pub common: CommonQueryParams,
+		/// The Column to sort by
+		#[serde(skip_serializing_if = "Option::is_none")]
+		pub sort: Option<SortableColumns>,
+		/// Filter the deployments by the status
+		#[serde(skip_serializing_if = "Option::is_none")]
+		pub status: Option<OneOrMore<DeploymentStatus>>,
+		/// The Column to filter query by
+		#[serde(skip_serializing_if = "Option::is_none")]
+		pub filter_by: Option<FilterableColumns>,
+	}
+}
+
+::macros::declare_app_route! {
+	/// Route for Deployments Create Page
+	CreateDeployment,
+	"/deployment/create",
+	requires_login = true,
+	query = { }
+}
+
+::macros::declare_app_route! {
+	/// Route for Deployments Details Page
+	ManageDeployment,
+	"/deployment/:deployment_id" {
+		/// The id of the deployment
+		pub deployment_id: Uuid,
+	},
+	requires_login = true,
+	query = {}
+}
+
+::macros::declare_app_route! {
+	/// Route for Deployments History Page
+	ManageDeploymentImageHistory,
+	"/deployment/:deployment_id/history" {
+		/// The id of the deployment
+		pub deployment_id: Uuid,
+	},
+	requires_login = true,
+	query = {
+		/// Common Query Parameters
+		#[serde(flatten)]
+		pub common: CommonQueryParams,
+	}
+}
+
+::macros::declare_app_route! {
+	/// Route for Deployments Logs Page
+	ManageDeploymentsLogs,
+	"/deployment/:deployment_id/logs" {
+		/// The id of the deployment
+		pub deployment_id: Uuid,
+	},
+	requires_login = true,
+	query = {
+		/// Common Query Parameters
+		#[serde(flatten)]
+		pub common: CommonQueryParams,
+	}
+}
+
+::macros::declare_app_route! {
+	/// Route for Deployments Monitoring Page
+	ManageDeploymentsMonitoring,
+	"/deployment/:deployment_id/monitor" {
+		/// The id of the deployment
+		pub deployment_id: Uuid,
+	},
+	requires_login = true,
+	query = {}
+}
+
+::macros::declare_app_route! {
+	/// Route for Deployments Scaling Page
+	ManageDeploymentScaling,
+	"/deployment/:deployment_id/scaling" {
+		/// The id of the deployment
+		pub deployment_id: Uuid,
+	},
+	requires_login = true,
+	query = {}
+}
+
+::macros::declare_app_route! {
+	/// Route for Deployments URLs Page
+	ManageDeploymentUrls,
+	"/deployment/:deployment_id/urls" {
+		/// The id of the deployment
+		pub deployment_id: Uuid,
+	},
+	requires_login = true,
+	query = {}
+}
+
+#[component(transparent)]
+pub fn DeploymentRoutes() -> impl IntoView {
+	view! {
+		<AppRoute<DeploymentsDashboardRoute, _, _> view={move |_query, _params| DeploymentPage}>
+			<AppRoute<CreateDeploymentRoute, _, _> view={move |_query, _params| CreateDeployment} />
+			<AppRoute<ManageDeploymentRoute, _, _> view={move |_query, _params| ManageDeployments}>
+				<AppRoute<
+				ManageDeploymentUrlsRoute,
+				_,
+				_,
+			> view={move |_query, _params| ManageDeploymentUrls} />
+				<AppRoute<
+				ManageDeploymentImageHistoryRoute,
+				_,
+				_,
+			> view={move |_query, _params| ManageDeploymentImageHistory} />
+				<AppRoute<
+				ManageDeploymentsLogsRoute,
+				_,
+				_,
+			> view={move |_query, _params| ManageDeploymentsLogs} />
+				<AppRoute<
+				ManageDeploymentsMonitoringRoute,
+				_,
+				_,
+			> view={move |_query, _params| ManageDeploymentsMonitoring} />
+				<AppRoute<
+				ManageDeploymentScalingRoute,
+				_,
+				_,
+			> view={move |_query, _params| ManageDeploymentScaling} />
+				<Route path={AppRoutes::Empty} view={ManageDeploymentDetailsTab} />
+			</AppRoute>
+			<Route path={AppRoutes::Empty} view={DeploymentDashboard} />
+		</AppRoute>
+	}
+}
diff --git a/hosted-frontend/src/routes/workspace/infrastructure/mod.rs b/hosted-frontend/src/routes/workspace/infrastructure/mod.rs
new file mode 100644
index 000000000..bf5dbd049
--- /dev/null
+++ b/hosted-frontend/src/routes/workspace/infrastructure/mod.rs
@@ -0,0 +1,4 @@
+mod database;
+mod deployment;
+
+pub use self::{database::*, deployment::*};
diff --git a/hosted-frontend/src/routes/workspace/mod.rs b/hosted-frontend/src/routes/workspace/mod.rs
new file mode 100644
index 000000000..6ee303024
--- /dev/null
+++ b/hosted-frontend/src/routes/workspace/mod.rs
@@ -0,0 +1,5 @@
+mod infrastructure;
+mod runner;
+mod workspace;
+
+pub use self::{infrastructure::*, runner::*, workspace::*};
diff --git a/hosted-frontend/src/routes/workspace/runner.rs b/hosted-frontend/src/routes/workspace/runner.rs
new file mode 100644
index 000000000..50e3631ef
--- /dev/null
+++ b/hosted-frontend/src/routes/workspace/runner.rs
@@ -0,0 +1,51 @@
+use models::utils::Uuid;
+
+use crate::{
+	pages::{CreateRunner, ManageRunner, RunnerDashboard, RunnerPage},
+	prelude::*,
+	CommonQueryParams,
+};
+
+::macros::declare_app_route! {
+	/// Route for Runners Dashboard Page
+	RunnerDashboard,
+	"/runner",
+	requires_login = true,
+	query = {
+		/// Common Query Parameters
+		#[serde(flatten)]
+		pub common: CommonQueryParams,
+	}
+}
+
+::macros::declare_app_route! {
+	/// Route for Runners Create Page
+	CreateRunner,
+	"/runner/create",
+	requires_login = true,
+	query = {}
+}
+
+::macros::declare_app_route! {
+	/// Route for Runners Details Page
+	ManageRunner,
+	"/runner/:runner_id" {
+		/// The id of the runner
+		pub runner_id: Uuid,
+	},
+	requires_login = true,
+	query = {}
+}
+
+/// The Routes for the Runner Page
+#[component(transparent)]
+pub fn RunnerRoutes() -> impl IntoView {
+	view! {
+		<>
+			<AppRoute<RunnerDashboardRoute, _, _> view={move |_query, _params| RunnerPage} />
+			<AppRoute<CreateRunnerRoute, _, _> view={move |_query, _params| CreateRunner} />
+			<AppRoute<ManageRunnerRoute, _, _> view={move |_query, _params| ManageRunner} />
+			<AppRoute<RunnerDashboardRoute, _, _> view={move |_, _| RunnerDashboard} />
+		</>
+	}
+}
diff --git a/hosted-frontend/src/routes/workspace/workspace/mod.rs b/hosted-frontend/src/routes/workspace/workspace/mod.rs
new file mode 100644
index 000000000..18bb0dee5
--- /dev/null
+++ b/hosted-frontend/src/routes/workspace/workspace/mod.rs
@@ -0,0 +1,14 @@
+use crate::{pages::CreateWorkspace, prelude::*};
+
+::macros::declare_app_route! {
+	/// Route for Workspace Page
+	CreateWorkspace,
+	"/workspace/create",
+	requires_login = true,
+	query = {}
+}
+
+#[component(transparent)]
+pub fn WorkspaceRoutes() -> impl IntoView {
+	view! { <AppRoute<CreateWorkspaceRoute, _, _> view={move |_, _| CreateWorkspace} /> }
+}
diff --git a/hosted-frontend/src/routes/workspaced_content.rs b/hosted-frontend/src/routes/workspaced_content.rs
index 5b8d4c970..d9baad46f 100644
--- a/hosted-frontend/src/routes/workspaced_content.rs
+++ b/hosted-frontend/src/routes/workspaced_content.rs
@@ -12,8 +12,8 @@ use crate::{
 #[component]
 pub fn WorkspacedRouteView() -> impl IntoView {
 	view! {
-		<Sidebar>
-			<WorkspaceSidebarComponent/>
+		<Sidebar sidebar_items={get_sidebar_items(expect_context::<AppType>())}>
+			<WorkspaceSidebarComponent />
 		</Sidebar>
 
 		<main class="fc-fs-ct full-width px-lg">
@@ -65,14 +65,12 @@ pub fn WorkspacedRoutes() -> impl IntoView {
 	view! {
 		<ProtectedRoute
 			path={AppRoutes::Empty}
-			view={move || view! {
-				<WorkspacedRouteView />
-			}}
+			view={WorkspacedRouteView}
 			redirect_path={AppRoutes::LoggedInRoute(LoggedInRoute::UserProfile)}
 			condition={move || current_workspace_id.get().is_some()}
 		>
-			<InfrastructureRoutes/>
-			<DomainConfigurationRoutes/>
+			<InfrastructureRoutes />
+			<DomainConfigurationRoutes />
 			<RunnerRoutes />
 		</ProtectedRoute>
 	}
diff --git a/components/src/utils/app_route.rs b/hosted-frontend/src/utils/app_route.rs
similarity index 78%
rename from components/src/utils/app_route.rs
rename to hosted-frontend/src/utils/app_route.rs
index 0eccc3fa5..8629eb1c6 100644
--- a/components/src/utils/app_route.rs
+++ b/hosted-frontend/src/utils/app_route.rs
@@ -5,7 +5,6 @@ use leptos::*;
 use leptos_router::{
 	use_params as use_router_params,
 	use_query as use_router_query,
-	use_route_data,
 	Params,
 	Route,
 };
@@ -43,19 +42,9 @@ where
 	let params: R = use_router_params()
 		.get_untracked()
 		.expect("cannot parse params");
-	let path = <R as TypedPath>::PATH.to_string();
-
-	let current_path = use_route_data::<String>().unwrap_or_default();
-	let router_path = path
-		.trim_start_matches(&current_path)
-		.trim_start_matches('/')
-		.to_string();
 
 	view! {
-		<Route
-			view={move || view(query.clone(), params.clone())}
-			path={router_path}
-			data={move || path.clone()}>
+		<Route view={move || view(query.clone(), params.clone())} path={<R as TypedPath>::PATH}>
 			{children()}
 		</Route>
 	}
diff --git a/hosted-frontend/src/utils/mod.rs b/hosted-frontend/src/utils/mod.rs
index f26574886..7a63a2c04 100644
--- a/hosted-frontend/src/utils/mod.rs
+++ b/hosted-frontend/src/utils/mod.rs
@@ -4,13 +4,17 @@ mod client;
 #[cfg(not(target_arch = "wasm32"))]
 pub use self::client::*;
 
+/// A module containing the custom [`AppRoute`].
+/// The App Route Enum. This Enum is used to specify the route of the app.
+mod app_route;
 /// A module containing extension traits for various types
 mod ext_traits;
 mod hooks;
 mod routes;
+mod sidebar_items;
 mod storage;
 
-pub use self::{ext_traits::*, hooks::*, routes::*, storage::*};
+pub use self::{app_route::*, ext_traits::*, hooks::*, routes::*, sidebar_items::*, storage::*};
 
 /// A trait to extend the [`String`] type with some useful methods that are not
 /// available in the standard library. This is useful for adding utility methods
diff --git a/hosted-frontend/src/utils/sidebar_items.rs b/hosted-frontend/src/utils/sidebar_items.rs
new file mode 100644
index 000000000..44f923e92
--- /dev/null
+++ b/hosted-frontend/src/utils/sidebar_items.rs
@@ -0,0 +1,157 @@
+use components::sidebar::LinkItem;
+
+use super::AppType;
+
+/// Get the Sidebar Items depending on the App Type
+pub fn get_sidebar_items(app_type: AppType) -> Vec<LinkItem> {
+	match app_type {
+		AppType::SelfHosted => vec![
+			LinkItem {
+				title: "Home".to_owned(),
+				path: "/".to_owned(),
+				icon_src: "/images/sidebar/home.svg".to_owned(),
+				subtitle: None,
+				items: None,
+			},
+			LinkItem {
+				title: "Infrastructure".to_owned(),
+				path: "".to_owned(),
+				icon_src: "/images/sidebar/infrastructure.svg".to_owned(),
+				subtitle: None,
+				items: Some(vec![
+					LinkItem {
+						title: "Deployments".to_owned(),
+						path: "/deployment".to_owned(),
+						subtitle: None,
+						icon_src: "/images/sidebar/deployment.svg".to_owned(),
+						items: None,
+					},
+					LinkItem {
+						title: "Databases".to_owned(),
+						path: "/database".to_owned(),
+						subtitle: None,
+						icon_src: "/images/sidebar/database.svg".to_owned(),
+						items: None,
+					},
+				]),
+			},
+			LinkItem {
+				title: "Domain Configuration".to_owned(),
+				path: "".to_owned(),
+				icon_src: "/images/sidebar/domains.svg".to_owned(),
+				subtitle: None,
+				items: Some(vec![
+					LinkItem {
+						title: "Domains".to_owned(),
+						path: "/domain".to_owned(),
+						subtitle: None,
+						icon_src: "/images/sidebar/domains.svg".to_owned(),
+						items: None,
+					},
+					LinkItem {
+						title: "Managed URLs".to_owned(),
+						icon_src: "/images/sidebar/managed-url.svg".to_owned(),
+						subtitle: None,
+						path: "/managed-url".to_owned(),
+						items: None,
+					},
+				]),
+			},
+			LinkItem {
+				title: "User".to_owned(),
+				path: "/user".to_owned(),
+				icon_src: "/images/sidebar/workspace.svg".to_owned(),
+				subtitle: None,
+				items: Some(vec![LinkItem {
+					title: "API Tokens".to_owned(),
+					icon_src: "/images/sidebar/secrets.svg".to_owned(),
+					subtitle: None,
+					path: "/user/api-tokens".to_owned(),
+					items: None,
+				}]),
+			},
+		],
+		AppType::Managed => vec![
+			LinkItem {
+				title: "Home".to_owned(),
+				path: "/".to_owned(),
+				icon_src: "/images/sidebar/home.svg".to_owned(),
+				subtitle: None,
+				items: None,
+			},
+			LinkItem {
+				title: "Runners".to_owned(),
+				path: "/runners".to_owned(),
+				icon_src: "/images/sidebar/runner.svg".to_owned(),
+				subtitle: None,
+				items: None,
+			},
+			LinkItem {
+				title: "Infrastructure".to_owned(),
+				path: "".to_owned(),
+				icon_src: "/images/sidebar/infrastructure.svg".to_owned(),
+				subtitle: None,
+				items: Some(vec![
+					LinkItem {
+						title: "Deployments".to_owned(),
+						path: "/deployment".to_owned(),
+						subtitle: None,
+						icon_src: "/images/sidebar/deployment.svg".to_owned(),
+						items: None,
+					},
+					LinkItem {
+						title: "Databases".to_owned(),
+						path: "/database".to_owned(),
+						subtitle: None,
+						icon_src: "/images/sidebar/database.svg".to_owned(),
+						items: None,
+					},
+				]),
+			},
+			LinkItem {
+				title: "Domain Configuration".to_owned(),
+				path: "".to_owned(),
+				icon_src: "/images/sidebar/domains.svg".to_owned(),
+				subtitle: None,
+				items: Some(vec![
+					LinkItem {
+						title: "Domains".to_owned(),
+						path: "/domain".to_owned(),
+						subtitle: None,
+						icon_src: "/images/sidebar/domains.svg".to_owned(),
+						items: None,
+					},
+					LinkItem {
+						title: "Managed URLs".to_owned(),
+						icon_src: "/images/sidebar/managed-url.svg".to_owned(),
+						subtitle: None,
+						path: "/managed-url".to_owned(),
+						items: None,
+					},
+				]),
+			},
+			LinkItem {
+				title: "User".to_owned(),
+				path: "/user".to_owned(),
+				icon_src: "/images/sidebar/workspace.svg".to_owned(),
+				subtitle: None,
+				items: Some(vec![
+					LinkItem {
+						title: "Workspace".to_owned(),
+						icon_src: "/images/sidebar/workspace.svg".to_owned(),
+						subtitle: None,
+						path: "/workspace".to_owned(),
+						items: None,
+					},
+					LinkItem {
+						title: "API Tokens".to_owned(),
+						icon_src: "/images/sidebar/secrets.svg".to_owned(),
+						subtitle: None,
+						path: "/user/api-tokens".to_owned(),
+						items: None,
+					},
+				]),
+			},
+		],
+	}
+}
diff --git a/macros/src/declare_app_route.rs b/macros/src/declare_app_route.rs
index 92a1fe7ac..8ac6c1002 100644
--- a/macros/src/declare_app_route.rs
+++ b/macros/src/declare_app_route.rs
@@ -199,7 +199,8 @@ pub fn parse(input: TokenStream) -> TokenStream {
 
 		#query
 
-		impl components::utils::TypedRoute for #route_name {
+		// TODO: Change this to not use crate::
+		impl crate::utils::TypedRoute for #route_name {
 			const REQUIRES_LOGIN: bool = #login_required;
 
 			type Query = #query_name;