diff --git a/frontend/app/ops-redesign.css b/frontend/app/ops-redesign.css
index 29dd6d5..18116e7 100644
--- a/frontend/app/ops-redesign.css
+++ b/frontend/app/ops-redesign.css
@@ -2323,7 +2323,22 @@ button:disabled,
}
.request-type-card:hover { transform: translateY(-2px); border-color: rgba(126, 215, 255, 0.5); }
.request-type-card.is-selected { border-color: rgba(72, 224, 178, 0.58); background: linear-gradient(135deg, rgba(72, 224, 178, 0.11), rgba(14, 165, 233, 0.06)); }
-.request-type-card > span { color: var(--ops-cyan); font-family: "JetBrains Mono", Consolas, monospace; font-size: 0.66rem; text-transform: uppercase; }
+.request-type-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; width: 100%; }
+.request-type-card-top > span:first-child { color: var(--ops-cyan); font-family: "JetBrains Mono", Consolas, monospace; font-size: 0.66rem; text-transform: uppercase; }
+.request-service-icon {
+ display: grid;
+ place-items: center;
+ width: 58px;
+ height: 58px;
+ margin: -6px -4px 0 0;
+ padding: 8px;
+ border: 1px solid rgba(255, 255, 255, 0.44);
+ border-radius: 16px;
+ background: rgba(245, 248, 252, 0.94);
+ box-shadow: 0 10px 28px rgba(0, 0, 0, 0.24);
+}
+.request-service-icon img { display: block; width: 100%; height: 100%; object-fit: contain; }
+.request-type-card.is-selected .request-service-icon { border-color: rgba(72, 224, 178, 0.72); box-shadow: 0 0 24px rgba(72, 224, 178, 0.18); }
.request-type-card strong { font-size: 1.35rem; }
.request-type-card p { max-width: 440px; margin: 0; color: var(--ops-muted); font-weight: 450; line-height: 1.5; }
.request-type-card b { margin-top: auto; color: var(--request-green); font-size: 0.74rem; }
diff --git a/frontend/app/portal/requests/RequestPortalClient.tsx b/frontend/app/portal/requests/RequestPortalClient.tsx
index 6ee357c..ba48e88 100644
--- a/frontend/app/portal/requests/RequestPortalClient.tsx
+++ b/frontend/app/portal/requests/RequestPortalClient.tsx
@@ -56,18 +56,24 @@ const mediaChoices: Array<{
eyebrow: string
title: string
description: string
+ collector: 'Radarr' | 'Sonarr'
+ icon: string
}> = [
{
type: 'movie',
eyebrow: 'Film',
title: 'Movie',
description: 'Find a film and send it through Seerr to Radarr.',
+ collector: 'Radarr',
+ icon: '/service-icons/radarr.svg',
},
{
type: 'tv',
eyebrow: 'Series',
title: 'TV show',
description: 'Choose a series, the seasons you want, and send it to Sonarr.',
+ collector: 'Sonarr',
+ icon: '/service-icons/sonarr.svg',
},
]
@@ -333,7 +339,12 @@ export default function RequestPortalClient() {
onClick={() => resetAfterType(choice.type)}
aria-pressed={mediaType === choice.type}
>
- {choice.eyebrow}
+
+ {choice.eyebrow}
+
+ 
+
+
{choice.title}
{choice.description}
{mediaType === choice.type ? 'Selected' : `Choose ${choice.title.toLowerCase()}`}
diff --git a/frontend/public/service-icons/radarr.svg b/frontend/public/service-icons/radarr.svg
new file mode 100644
index 0000000..1ee8b33
--- /dev/null
+++ b/frontend/public/service-icons/radarr.svg
@@ -0,0 +1,7 @@
+
diff --git a/frontend/public/service-icons/sonarr.svg b/frontend/public/service-icons/sonarr.svg
new file mode 100644
index 0000000..563b44f
--- /dev/null
+++ b/frontend/public/service-icons/sonarr.svg
@@ -0,0 +1,9 @@
+