diff --git a/components/admin/ui/option-select.tsx b/components/admin/ui/option-select.tsx
index d0e79b3..a1f8e36 100644
--- a/components/admin/ui/option-select.tsx
+++ b/components/admin/ui/option-select.tsx
@@ -37,6 +37,8 @@ export function AdminDropdown({
   "aria-label": ariaLabel,
   triggerProps,
 }: AdminDropdownProps) {
+  const selectedOption = options.find((option) => option.value === value);
+
   return (
     <Select
       value={value}
@@ -46,7 +48,7 @@ export function AdminDropdown({
       }}
     >
       <SelectTrigger aria-label={ariaLabel} {...triggerProps}>
-        <SelectValue placeholder={placeholder} />
+        <SelectValue placeholder={placeholder}>{selectedOption?.label}</SelectValue>
       </SelectTrigger>
       <SelectContent>
         <SelectGroup>
diff --git a/components/public/stygian-guide.tsx b/components/public/stygian-guide.tsx
index d77e51c..ea731d9 100644
--- a/components/public/stygian-guide.tsx
+++ b/components/public/stygian-guide.tsx
@@ -64,15 +64,15 @@ function RecommendationIcon({ item, catalog, teamLayout = false }: { item: Item;
   if (item.kind === "character") {
     const hasEquipment = Boolean(value.weapon || value.artifact);
     return (
-      <div className={cn("flex min-w-0 flex-col gap-1 rounded-lg border bg-card p-1", teamLayout && "sm:p-2")}>
-        <div className={teamLayout ? "flex flex-col gap-1 sm:grid sm:grid-cols-3 sm:gap-2" : "flex flex-col gap-1"}>
-          <div className={cn("relative aspect-square overflow-hidden rounded-lg", teamLayout && "sm:col-span-2 sm:row-span-2", rarityGradientClass(value.rarity))}>
+      <div className={cn("flex min-w-0 flex-col gap-1 rounded-lg border bg-card p-1", teamLayout && "sm:p-2", teamLayout && !hasEquipment && item.constellationLevel === null && "aspect-square justify-center")}>
+        <div className={teamLayout && hasEquipment ? "flex flex-col gap-1 sm:grid sm:grid-cols-3 sm:gap-2" : "flex flex-col gap-1"}>
+          <div className={cn("relative aspect-square overflow-hidden rounded-lg", teamLayout && hasEquipment && "sm:col-span-2 sm:row-span-2", rarityGradientClass(value.rarity))}>
             {value.imageUrl ? <Image src={value.imageUrl} alt={value.name} fill sizes={teamLayout ? "(min-width: 640px) 128px, 25vw" : "128px"} className="object-contain" /> : null}
           </div>
           {hasEquipment ? <div className={teamLayout ? "grid grid-cols-2 gap-1 sm:row-span-2 sm:grid-cols-1 sm:gap-2" : "grid grid-cols-2 gap-1"}>
             {value.weapon ? <div className={cn("relative aspect-square overflow-hidden rounded-md border", rarityGradientClass(value.weapon.rarity))}><Image src={value.weapon.imageUrl} alt={value.weapon.name} fill sizes="64px" className="object-contain p-1" /></div> : null}
             {value.artifact ? <div className={cn("relative aspect-square overflow-hidden rounded-md border", rarityGradientClass(value.artifact.rarity))}><Image src={value.artifact.imageUrl} alt={value.artifact.name} fill sizes="64px" className="object-contain p-1" /></div> : null}
-          </div> : teamLayout ? <div className="hidden sm:block" aria-hidden="true" /> : null}
+          </div> : null}
         </div>
         {teamLayout ? item.constellationLevel !== null || value.weapon && value.refinement ? <div className="flex justify-center gap-1">
           {item.constellationLevel !== null ? <Badge variant="secondary">C{item.constellationLevel}</Badge> : null}
@@ -124,9 +124,9 @@ function BossCard({ schedule, level, position, catalog }: { schedule: Schedule;
         <section className="flex flex-col gap-3" aria-label={`Recommended teams for ${boss.name}`}>
           <h3 className="font-heading text-lg font-semibold">Recommended team</h3>
           {teams.length ? teams.map((team) => (
-            <div key={team.id} className="grid w-full max-w-xl grid-cols-4 items-start gap-1 rounded-lg border bg-muted/20 p-2 sm:gap-3">
+            <div key={team.id} className="grid w-full grid-cols-4 items-start gap-1 rounded-lg border bg-muted/20 p-2 sm:w-fit sm:grid-cols-[repeat(4,minmax(0,7.5rem))] sm:gap-3">
               {team.items.slice(0, 4).map((item) => <RecommendationIcon key={`${item.groupId}-${item.position}`} item={item} catalog={catalog} teamLayout />)}
-              {Array.from({ length: Math.max(0, 4 - team.items.length) }, (_, index) => <div key={`empty-${index}`} className="aspect-[4/3] rounded-lg border border-dashed bg-muted/30" aria-hidden="true" />)}
+              {Array.from({ length: Math.max(0, 4 - team.items.length) }, (_, index) => <div key={`empty-${index}`} className="aspect-square rounded-lg border border-dashed bg-muted/30" aria-hidden="true" />)}
             </div>
           )) : <p className="text-sm text-muted-foreground">No team recommendations yet.</p>}
         </section>