From ba50d886b6d4d47cfde8d673ff0df915074c34ce Mon Sep 17 00:00:00 2001
From: Archben <devops@tben.me>
Date: Mon, 9 Mar 2026 17:41:16 +0000
Subject: [PATCH] Updates

---
 src/components/general/admin/hero.tsx         |  1 +
 .../admin/services/(partials)/service.tsx     | 34 +++++++++++++++++++
 .../admin/services/(sections)/services.tsx    | 12 +++----
 src/styles/globals.css                        |  1 +
 4 files changed, 41 insertions(+), 7 deletions(-)
 create mode 100644 src/components/pages/admin/services/(partials)/service.tsx

diff --git a/src/components/general/admin/hero.tsx b/src/components/general/admin/hero.tsx
index 1870fde..b38e820 100644
--- a/src/components/general/admin/hero.tsx
+++ b/src/components/general/admin/hero.tsx
@@ -27,6 +27,7 @@ export default function AdminHero({ title, ctas, description }: Props) {
                 <Breadcrumbs
                     pageUrl={pageProps.pageUrl || undefined}
                     skipHome
+                    backButton
                 />
             </Stack>
             <Row>{ctas}</Row>
diff --git a/src/components/pages/admin/services/(partials)/service.tsx b/src/components/pages/admin/services/(partials)/service.tsx
new file mode 100644
index 0000000..300c9b5
--- /dev/null
+++ b/src/components/pages/admin/services/(partials)/service.tsx
@@ -0,0 +1,34 @@
+import { AppContext } from "@/src/pages/_app";
+import { ParsedDeploymentServiceConfig } from "@/src/types";
+import ArrowedLink from "@/twui/components/layout/ArrowedLink";
+import H2 from "@/twui/components/layout/H2";
+import Row from "@/twui/components/layout/Row";
+import Stack from "@/twui/components/layout/Stack";
+import { useContext } from "react";
+
+type Props = {
+    service: ParsedDeploymentServiceConfig;
+};
+
+export default function DeploymentService({ service }: Props) {
+    const { pageProps } = useContext(AppContext);
+    const { deployment } = pageProps;
+
+    return (
+        <Stack className="grid-cell">
+            <Stack className="grid-cell-content">
+                <Row className="w-full justify-between">
+                    <H2>{service.service_name}</H2>
+                    <ArrowedLink
+                        link={{
+                            url: `/admin/services/${service.service_name}`,
+                            title: `View`,
+                        }}
+                    />
+                </Row>
+
+                <code>{service.service_name}</code>
+            </Stack>
+        </Stack>
+    );
+}
diff --git a/src/components/pages/admin/services/(sections)/services.tsx b/src/components/pages/admin/services/(sections)/services.tsx
index 3c852ea..1275e77 100644
--- a/src/components/pages/admin/services/(sections)/services.tsx
+++ b/src/components/pages/admin/services/(sections)/services.tsx
@@ -1,7 +1,7 @@
 import { AppContext } from "@/src/pages/_app";
-import Row from "@/twui/components/layout/Row";
 import Stack from "@/twui/components/layout/Stack";
 import { useContext } from "react";
+import DeploymentService from "../(partials)/service";
 
 export default function DeploymentServices() {
     const { pageProps } = useContext(AppContext);
@@ -10,12 +10,10 @@ export default function DeploymentServices() {
     const services = deployment?.services;
 
     return (
-        <Stack className="w-full grid-cell col-span-1">
-            <Row className="grid-cell-content">
-                {services?.map((service, index) => {
-                    return <code key={index}>{service.service_name}</code>;
-                })}
-            </Row>
+        <Stack className="w-full nested-grid-frame xl:grid-cols-2">
+            {services?.map((service, index) => {
+                return <DeploymentService key={index} service={service} />;
+            })}
         </Stack>
     );
 }
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 25c1a24..cc04f88 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -33,6 +33,7 @@
     @apply bg-background-light dark:bg-background-dark;
     /* @apply bg-foreground-light/10 dark:bg-foreground-dark/10; */
     @apply grid p-0! h-full relative;
+    @apply gap-px;
 }
 
 .nested-grid-frame::after {