diff --git a/__tests__/client/components/LocationPopover.client.test.tsx b/__tests__/client/components/LocationPopover.client.test.tsx
new file mode 100644
index 000000000..b8f8cee0c
--- /dev/null
+++ b/__tests__/client/components/LocationPopover.client.test.tsx
@@ -0,0 +1,43 @@
+import { LocationPopover } from '@/components/EventPreview/LocationPopover'
+import type { Event } from '@/payload-types'
+import '@testing-library/jest-dom'
+import { render, screen } from '@testing-library/react'
+
+const buildLocation = (
+  overrides: Partial<NonNullable<Event['location']>> = {},
+): NonNullable<Event['location']> => ({
+  isVirtual: false,
+  placeName: 'Snoqualmie Pass Trailhead',
+  city: 'Snoqualmie Pass',
+  state: 'WA',
+  ...overrides,
+})
+
+describe('LocationPopover', () => {
+  it('shows City, State at a glance without opening the popover', () => {
+    render(<LocationPopover location={buildLocation()} />)
+
+    expect(screen.getByText('Snoqualmie Pass Trailhead')).toBeInTheDocument()
+    expect(screen.getByText('Snoqualmie Pass, WA')).toBeInTheDocument()
+  })
+
+  it('shows only the city when no state is set', () => {
+    render(<LocationPopover location={buildLocation({ state: null })} />)
+
+    expect(screen.getByText('Snoqualmie Pass')).toBeInTheDocument()
+  })
+
+  it('shows only the state when no city is set', () => {
+    render(<LocationPopover location={buildLocation({ city: null })} />)
+
+    expect(screen.getByText('WA')).toBeInTheDocument()
+  })
+
+  it('omits the City, State line when neither city nor state is set', () => {
+    render(<LocationPopover location={buildLocation({ city: null, state: null })} />)
+
+    // Only the placeName should remain as visible location text
+    expect(screen.getByText('Snoqualmie Pass Trailhead')).toBeInTheDocument()
+    expect(screen.queryByText(/,/)).not.toBeInTheDocument()
+  })
+})
diff --git a/src/components/EventPreview/LocationPopover.tsx b/src/components/EventPreview/LocationPopover.tsx
index d1bd2a402..92488c06b 100644
--- a/src/components/EventPreview/LocationPopover.tsx
+++ b/src/components/EventPreview/LocationPopover.tsx
@@ -16,56 +16,65 @@ type LocationPopoverProps = {
 export const LocationPopover = ({ location }: LocationPopoverProps) => {
   const [isLocationOpen, setIsLocationOpen] = useState(false)
 
+  const cityState = [location.city, location.state].filter(Boolean).join(', ')
+
   return (
-    <Popover open={isLocationOpen} onOpenChange={setIsLocationOpen}>
-      <PopoverTrigger className="min-w-0 max-w-full">
-        <div className="flex items-center gap-1.5 min-w-0 text-muted-foreground">
-          <MapPin className="h-4 w-4 mt-0.5 " />
-          <p className="whitespace-nowrap overflow-hidden text-ellipsis min-w-0 text-sm ">
-            {location.placeName}
-          </p>
-          <ChevronDown
-            className={cn(
-              'h-4 w-4 flex-shrink-0 transition-transform duration-200',
-              isLocationOpen && 'rotate-180',
-            )}
-          />
-        </div>
-      </PopoverTrigger>
-      <PopoverContent align="start" className="p-3 text-sm w-auto min-w-[200px]">
-        <div className="select-text mb-2">
-          {location.address && <div>{location.address}</div>}
-          <div>
-            {location.city && `${location.city}, `}
-            {location.state && `${location.state} `}
-            {location.zip}
+    <div className="flex flex-col min-w-0">
+      <Popover open={isLocationOpen} onOpenChange={setIsLocationOpen}>
+        <PopoverTrigger className="min-w-0 max-w-full">
+          <div className="flex items-center gap-1.5 min-w-0 text-muted-foreground">
+            <MapPin className="h-4 w-4 mt-0.5 " />
+            <p className="whitespace-nowrap overflow-hidden text-ellipsis min-w-0 text-sm ">
+              {location.placeName}
+            </p>
+            <ChevronDown
+              className={cn(
+                'h-4 w-4 flex-shrink-0 transition-transform duration-200',
+                isLocationOpen && 'rotate-180',
+              )}
+            />
+          </div>
+        </PopoverTrigger>
+        <PopoverContent align="start" className="p-3 text-sm w-auto min-w-[200px]">
+          <div className="select-text mb-2">
+            {location.address && <div>{location.address}</div>}
+            <div>
+              {location.city && `${location.city}, `}
+              {location.state && `${location.state} `}
+              {location.zip}
+            </div>
           </div>
-        </div>
-        <div className="flex gap-2">
-          <CopyButton
-            text={[
-              location.address,
-              [location.city, location.state, location.zip].filter(Boolean).join(' '),
-            ]
-              .filter(Boolean)
-              .join(', ')}
-            className="flex items-center gap-1 text-xs hover:text-foreground transition-colors"
-          />
-          <a
-            href={`https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(
-              [location.address, location.city, location.state, location.zip]
+          <div className="flex gap-2">
+            <CopyButton
+              text={[
+                location.address,
+                [location.city, location.state, location.zip].filter(Boolean).join(' '),
+              ]
                 .filter(Boolean)
-                .join(', '),
-            )}`}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="flex items-center gap-1 text-xs hover:text-foreground transition-colors"
-          >
-            <ExternalLink className="h-3 w-3" />
-            Open in Maps
-          </a>
-        </div>
-      </PopoverContent>
-    </Popover>
+                .join(', ')}
+              className="flex items-center gap-1 text-xs hover:text-foreground transition-colors"
+            />
+            <a
+              href={`https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(
+                [location.address, location.city, location.state, location.zip]
+                  .filter(Boolean)
+                  .join(', '),
+              )}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="flex items-center gap-1 text-xs hover:text-foreground transition-colors"
+            >
+              <ExternalLink className="h-3 w-3" />
+              Open in Maps
+            </a>
+          </div>
+        </PopoverContent>
+      </Popover>
+      {cityState && (
+        <p className="text-sm text-muted-foreground pl-[22px] whitespace-nowrap overflow-hidden text-ellipsis">
+          {cityState}
+        </p>
+      )}
+    </div>
   )
 }