diff --git a/t20-project-2/README.md b/t20-project-2/README.md
index 653fa86..4ba7a40 100644
--- a/t20-project-2/README.md
+++ b/t20-project-2/README.md
@@ -1,5 +1,20 @@
 # React + TypeScript + Vite
 
+## GraphQL connection
+
+The city explorer uses the Apollo API at `http://it2810-20.idi.ntnu.no:3001/` through a same-origin `/api/graphql` route. The Vite development server proxies that route to Apollo, so the browser does not need direct cross-origin access.
+
+Install and start this project from its folder with:
+
+```sh
+pnpm --ignore-workspace install --frozen-lockfile
+pnpm --ignore-workspace dev
+```
+
+The `--ignore-workspace` option is needed when this project is opened underneath a parent directory that has its own `pnpm-workspace.yaml`.
+
+For production, configure the web server to proxy `/api/graphql` to the Apollo server and serve the site over HTTPS. Alternatively, set `VITE_GRAPHQL_URL` to an HTTPS GraphQL endpoint and configure CORS on Apollo to allow the site's origin. Do not expose the MongoDB connection string to the frontend. City search, filters, pagination, and reviews use the API; saved cities remain in the current browser because the API does not provide account or bookmark operations.
+
 This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
 
 Currently, two official plugins are available:
diff --git a/t20-project-2/src/App.tsx b/t20-project-2/src/App.tsx
index b9a73a1..ca18298 100644
--- a/t20-project-2/src/App.tsx
+++ b/t20-project-2/src/App.tsx
@@ -1,92 +1,95 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useState, type FormEvent } from 'react'
+import { graphqlRequest } from './graphql'
+
+type Review = {
+  id: string
+  cityId: string
+  rating: number
+  comment: string | null
+  author: string
+  createdAt: string
+}
 
 type City = {
   id: string
   name: string
-  country: string
-  continent: string
-  description: string
-  rating: string
-  reviews: number
-  population: string
-  elevation: string
-  image: string
-  imageAlt: string
+  country: string | null
+  latitude: number | null
+  longitude: number | null
+  population: number | null
+  timezone: string | null
+  reviewCount: number
+  averageRating: number | null
+  reviews: Review[]
 }
 
-const cities: City[] = [
-  {
-    id: 'copenhagen',
-    name: 'Copenhagen',
-    country: 'Denmark',
-    continent: 'Europe',
-    description: 'Bike-friendly streets, Nordic design, and long summer evenings by the water.',
-    rating: '4.8',
-    reviews: 248,
-    population: '653,000 residents',
-    elevation: '14 m above sea level',
-    image:
-      'https://images.unsplash.com/photo-1513622470522-26c3c8a854bc?auto=format&fit=crop&w=420&q=78',
-    imageAlt: 'Colorful houses along Nyhavn in Copenhagen',
-  },
-  {
-    id: 'lisbon',
-    name: 'Lisbon',
-    country: 'Portugal',
-    continent: 'Europe',
-    description: 'Pastel facades, steep hills, and the salty Atlantic breeze.',
-    rating: '4.9',
-    reviews: 391,
-    population: '545,000 residents',
-    elevation: '2 m above sea level',
-    image:
-      'https://images.unsplash.com/photo-1555881400-74d7acaacd8b?auto=format&fit=crop&w=420&q=78',
-    imageAlt: 'Yellow tram on a street in Lisbon',
-  },
-  {
-    id: 'kyoto',
-    name: 'Kyoto',
-    country: 'Japan',
-    continent: 'Asia',
-    description: 'Timber houses, peaceful temple gardens, and a city in constant motion.',
-    rating: '4.7',
-    reviews: 184,
-    population: '1.46 million residents',
-    elevation: '50 m above sea level',
-    image:
-      'https://images.unsplash.com/photo-1493976040374-85c8e12f0c0e?auto=format&fit=crop&w=420&q=78',
-    imageAlt: 'Traditional Kyoto street with a pagoda in the background',
-  },
-]
+type CityPage = { items: City[]; totalCount: number; hasMore: boolean }
+type CityFilter = { country?: string; minPopulation?: number; maxPopulation?: number }
+type CitySort = { field: 'NAME' | 'POPULATION' | 'COUNTRY'; direction: 'ASC' | 'DESC' }
 
-const storageKey = 'country-boys:saved-cities'
+const pageSize = 12
+const savedCitiesStorageKey = 'country-boys:saved-cities'
+const citiesQuery = `
+  query SearchCities($search: String, $filter: CityFilter, $sort: CitySort, $limit: Int, $offset: Int) {
+    searchCities(search: $search, filter: $filter, sort: $sort, limit: $limit, offset: $offset) {
+      items {
+        id name country latitude longitude population timezone reviewCount averageRating
+        reviews { id cityId rating comment author createdAt }
+      }
+      totalCount
+      hasMore
+    }
+  }
+`
+const countriesQuery = 'query { countries }'
+const addReviewMutation = `
+  mutation AddReview($input: AddReviewInput!) {
+    addReview(input: $input) { id cityId rating comment author createdAt }
+  }
+`
 
-function readSavedCities(): string[] {
+function readSavedCities(): City[] {
   try {
-    const stored = window.localStorage.getItem(storageKey)
-    const parsed: unknown = stored ? JSON.parse(stored) : []
-
-    if (!Array.isArray(parsed)) return []
-
-    return parsed.filter(
-      (id): id is string =>
-        typeof id === 'string' && cities.some((city) => city.id === id),
+    const stored: unknown = JSON.parse(window.localStorage.getItem(savedCitiesStorageKey) ?? '[]')
+    if (!Array.isArray(stored)) return []
+    return stored.filter(
+      (city): city is City =>
+        typeof city === 'object' && city !== null &&
+        'id' in city && typeof city.id === 'string' &&
+        'name' in city && typeof city.name === 'string',
     )
   } catch {
     return []
   }
 }
 
+function formatPopulation(population: number | null) {
+  return population === null
+    ? 'Population unavailable'
+    : `${new Intl.NumberFormat('en-US').format(population)} residents`
+}
+
+function getCityFilter(country: string, populationRange: string): CityFilter | undefined {
+  const populationBounds: Record<string, Pick<CityFilter, 'minPopulation' | 'maxPopulation'>> = {
+    any: {},
+    small: { maxPopulation: 100000 },
+    medium: { minPopulation: 100000, maxPopulation: 1000000 },
+    large: { minPopulation: 1000000 },
+  }
+  const filter = { ...(country ? { country } : {}), ...(populationBounds[populationRange] ?? {}) }
+  return Object.keys(filter).length ? filter : undefined
+}
+
+function getCitySort(sort: string): CitySort {
+  if (sort === 'name') return { field: 'NAME', direction: 'ASC' }
+  if (sort === 'country') return { field: 'COUNTRY', direction: 'ASC' }
+  return { field: 'POPULATION', direction: 'DESC' }
+}
+
 function BookmarkIcon({ filled }: { filled: boolean }) {
   return (
     <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
-      <path
-        d="M6.5 4.8c0-.7.5-1.3 1.2-1.3h8.6c.7 0 1.2.6 1.2 1.3v16l-5.5-3.5-5.5 3.5v-16Z"
-        fill={filled ? 'currentColor' : 'none'}
-        stroke="currentColor"
-        strokeWidth="1.6"
-        strokeLinejoin="round"
-      />
+      <path d="M6.5 4.8c0-.7.5-1.3 1.2-1.3h8.6c.7 0 1.2.6 1.2 1.3v16l-5.5-3.5-5.5 3.5v-16Z" fill={filled ? 'currentColor' : 'none'} stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round" />
     </svg>
   )
 }
@@ -94,149 +97,244 @@ function BookmarkIcon({ filled }: { filled: boolean }) {
 function CityCard({
   city,
   saved,
+  detailsOpen,
+  reviewMessage,
   onToggleSaved,
+  onToggleDetails,
+  onAddReview,
 }: {
   city: City
   saved: boolean
-  onToggleSaved: (cityId: string) => void
+  detailsOpen: boolean
+  reviewMessage: string
+  onToggleSaved: (city: City) => void
+  onToggleDetails: (cityId: string) => void
+  onAddReview: (event: FormEvent<HTMLFormElement>, cityId: string) => void
 }) {
   return (
-    <li className="city-card" id={city.id}>
-      <img
-        className="city-image"
-        src={city.image}
-        alt={city.imageAlt}
-        loading="lazy"
-      />
+    <li className="city-card">
       <div className="city-content">
         <div className="city-title-row">
           <div>
-            <p className="city-country">
-              {city.country} <span>·</span> {city.continent}
-            </p>
+            <p className="city-country">{city.country ?? 'Country unavailable'}</p>
             <h3>{city.name}</h3>
           </div>
-          <button
-            className="save-button"
-            type="button"
-            aria-label={`${saved ? 'Remove' : 'Save'} ${city.name} ${saved ? 'from' : 'to'} saved cities`}
-            aria-pressed={saved}
-            onClick={() => onToggleSaved(city.id)}
-          >
+          <button className="save-button" type="button" aria-label={`${saved ? 'Remove' : 'Save'} ${city.name} ${saved ? 'from' : 'to'} saved cities`} aria-pressed={saved} onClick={() => onToggleSaved(city)}>
             <BookmarkIcon filled={saved} />
           </button>
         </div>
-        <p className="city-description">{city.description}</p>
         <div className="city-meta">
-          <span className="rating">
-            <span aria-hidden="true">★</span> {city.rating}{' '}
-            <span className="rating-count">({city.reviews})</span>
-          </span>
-          <span className="meta-divider" />
-          <span>{city.population}</span>
+          <span className="rating"><span aria-hidden="true">★</span> {city.averageRating === null ? 'No ratings' : city.averageRating.toFixed(1)} <span className="rating-count">({city.reviewCount} reviews)</span></span>
           <span className="meta-divider" />
-          <span>{city.elevation}</span>
+          <span>{formatPopulation(city.population)}</span>
+          {city.timezone && <><span className="meta-divider" /><span>{city.timezone}</span></>}
         </div>
-        <a className="details-link" href={`#${city.id}`}>
-          View city details <span aria-hidden="true">→</span>
-        </a>
+        <button className="details-link" type="button" aria-expanded={detailsOpen} onClick={() => onToggleDetails(city.id)}>
+          {detailsOpen ? 'Hide reviews' : 'Read and add reviews'} <span aria-hidden="true">{detailsOpen ? '↑' : '→'}</span>
+        </button>
+        {detailsOpen && (
+          <div className="city-details">
+            {city.latitude !== null && city.longitude !== null && <p className="coordinates">Coordinates: {city.latitude.toFixed(4)}, {city.longitude.toFixed(4)}</p>}
+            <h4>Reviews</h4>
+            {city.reviews.length > 0 ? (
+              <ul className="review-list">
+                {city.reviews.map((review) => (
+                  <li key={review.id}>
+                    <strong>{review.author}</strong><span className="review-rating">{'★'.repeat(review.rating)}</span>
+                    {review.comment && <p>{review.comment}</p>}
+                  </li>
+                ))}
+              </ul>
+            ) : <p className="no-reviews">No reviews yet. Add the first one.</p>}
+            <form className="review-form" onSubmit={(event) => onAddReview(event, city.id)}>
+              <label>Your name<input name="author" required maxLength={80} /></label>
+              <label>Rating<select name="rating" defaultValue="5"><option value="5">5 stars</option><option value="4">4 stars</option><option value="3">3 stars</option><option value="2">2 stars</option><option value="1">1 star</option></select></label>
+              <label className="review-comment">Comment<textarea name="comment" maxLength={1000} rows={3} /></label>
+              <button className="search-button" type="submit">Submit review</button>
+              {reviewMessage && <p className="review-message" role="status">{reviewMessage}</p>}
+            </form>
+          </div>
+        )}
       </div>
     </li>
   )
 }
 
 function App() {
-  const [savedCities, setSavedCities] = useState<string[]>(readSavedCities)
+  const [cities, setCities] = useState<City[]>([])
+  const [countries, setCountries] = useState<string[]>([])
+  const [totalCount, setTotalCount] = useState(0)
+  const [hasMore, setHasMore] = useState(false)
+  const [loading, setLoading] = useState(true)
+  const [loadingMore, setLoadingMore] = useState(false)
+  const [error, setError] = useState('')
+  const [apiConnected, setApiConnected] = useState(false)
+  const [refreshKey, setRefreshKey] = useState(0)
+  const [savedCities, setSavedCities] = useState<City[]>(readSavedCities)
   const [activeView, setActiveView] = useState<'home' | 'saved'>('home')
+  const [searchInput, setSearchInput] = useState('')
+  const [search, setSearch] = useState('')
+  const [country, setCountry] = useState('')
+  const [populationRange, setPopulationRange] = useState('any')
+  const [sort, setSort] = useState('population')
+  const [openCityId, setOpenCityId] = useState('')
+  const [reviewMessage, setReviewMessage] = useState('')
+
+  useEffect(() => {
+    const controller = new AbortController()
+    void graphqlRequest<{ searchCities: CityPage }>(
+      citiesQuery,
+      {
+        search: search || undefined,
+        filter: getCityFilter(country, populationRange),
+        sort: getCitySort(sort),
+        limit: pageSize,
+        offset: 0,
+      },
+      controller.signal,
+    )
+      .then(({ searchCities }) => {
+        setCities(searchCities.items)
+        setTotalCount(searchCities.totalCount)
+        setHasMore(searchCities.hasMore)
+        setApiConnected(true)
+        setError('')
+      })
+      .catch((requestError: Error) => {
+        if (requestError.name !== 'AbortError') {
+          setApiConnected(false)
+          setError(requestError.message)
+        }
+      })
+      .finally(() => {
+        if (!controller.signal.aborted) setLoading(false)
+      })
+    return () => controller.abort()
+  }, [search, country, populationRange, sort, refreshKey])
+
+  useEffect(() => {
+    const controller = new AbortController()
+    void graphqlRequest<{ countries: string[] }>(countriesQuery, {}, controller.signal)
+      .then(({ countries: results }) => setCountries(results))
+      .catch(() => {})
+    return () => controller.abort()
+  }, [])
 
   useEffect(() => {
     try {
-      window.localStorage.setItem(storageKey, JSON.stringify(savedCities))
+      window.localStorage.setItem(savedCitiesStorageKey, JSON.stringify(savedCities))
     } catch {
-      // Bookmarks remain available for this session if browser storage is disabled.
+      // Saved cities remain available for this session if browser storage is disabled.
     }
   }, [savedCities])
 
-  const toggleSavedCity = (cityId: string) => {
-    setSavedCities((current) =>
-      current.includes(cityId)
-        ? current.filter((savedId) => savedId !== cityId)
-        : [...current, cityId],
-    )
+  const toggleSavedCity = (city: City) => {
+    setSavedCities((current) => current.some((savedCity) => savedCity.id === city.id)
+      ? current.filter((savedCity) => savedCity.id !== city.id)
+      : [...current, city])
+  }
+
+  const loadMore = async () => {
+    setLoadingMore(true)
+    setError('')
+    try {
+      const { searchCities } = await graphqlRequest<{ searchCities: CityPage }>(citiesQuery, {
+        search: search || undefined,
+        filter: getCityFilter(country, populationRange),
+        sort: getCitySort(sort),
+        limit: pageSize,
+        offset: cities.length,
+      })
+      setCities((current) => [...current, ...searchCities.items])
+      setHasMore(searchCities.hasMore)
+    } catch (requestError) {
+      setError(requestError instanceof Error ? requestError.message : 'Could not load more cities.')
+    } finally {
+      setLoadingMore(false)
+    }
+  }
+
+  const addReview = async (event: FormEvent<HTMLFormElement>, cityId: string) => {
+    event.preventDefault()
+    setReviewMessage('')
+    const formElement = event.currentTarget
+    const form = new FormData(formElement)
+    const input = {
+      cityId,
+      rating: Number(form.get('rating')),
+      author: String(form.get('author') ?? '').trim(),
+      comment: String(form.get('comment') ?? '').trim() || null,
+    }
+    try {
+      const { addReview: review } = await graphqlRequest<{ addReview: Review }>(addReviewMutation, { input })
+      const updateCity = (city: City): City => {
+        if (city.id !== cityId) return city
+        const reviewCount = city.reviewCount + 1
+        const averageRating = ((city.averageRating ?? 0) * city.reviewCount + review.rating) / reviewCount
+        return { ...city, reviewCount, averageRating, reviews: [review, ...city.reviews] }
+      }
+      setCities((current) => current.map(updateCity))
+      setSavedCities((current) => current.map(updateCity))
+      formElement.reset()
+      setReviewMessage('Review submitted.')
+    } catch (requestError) {
+      setReviewMessage(requestError instanceof Error ? requestError.message : 'Could not submit review.')
+    }
   }
 
-  const visibleCities =
-    activeView === 'saved'
-      ? cities.filter((city) => savedCities.includes(city.id))
-      : cities
   const isSavedView = activeView === 'saved'
+  const visibleCities = isSavedView ? savedCities : cities
+  const resetFilters = () => {
+    if (search || country || populationRange !== 'any' || sort !== 'population') {
+      setLoading(true)
+      setError('')
+    }
+    setSearchInput('')
+    setSearch('')
+    setCountry('')
+    setPopulationRange('any')
+    setSort('population')
+  }
 
   return (
     <>
       <header className="site-header">
         <a className="brand" href="#top" aria-label="Country Boys home">
-          <span className="brand-mark" aria-hidden="true">
-            <svg viewBox="0 0 40 40" fill="none">
-              <circle cx="20" cy="20" r="17" stroke="currentColor" strokeWidth="1.7" />
-              <path d="m25.8 13.8-3.1 9-8.5 3.4 3.2-9 8.4-3.4Z" fill="currentColor" />
-              <circle cx="20" cy="20" r="1.5" fill="#F5F7F4" />
-            </svg>
-          </span>
+          <span className="brand-mark" aria-hidden="true"><svg viewBox="0 0 40 40" fill="none"><circle cx="20" cy="20" r="17" stroke="currentColor" strokeWidth="1.7" /><path d="m25.8 13.8-3.1 9-8.5 3.4 3.2-9 8.4-3.4Z" fill="currentColor" /><circle cx="20" cy="20" r="1.5" fill="#F5F7F4" /></svg></span>
           <span>Country Boys<span className="brand-period">.</span></span>
         </a>
-
         <nav className="main-nav" aria-label="Main navigation">
-          <button
-            className={`nav-link${!isSavedView ? ' nav-link-active' : ''}`}
-            type="button"
-            aria-current={!isSavedView ? 'page' : undefined}
-            onClick={() => setActiveView('home')}
-          >
-            Home
-          </button>
-          <a className="nav-link" href="#map-preview">Map</a>
-          <button
-            className={`nav-link${isSavedView ? ' nav-link-active' : ''}`}
-            type="button"
-            aria-current={isSavedView ? 'page' : undefined}
-            onClick={() => setActiveView('saved')}
-          >
+          <button className={`nav-link${!isSavedView ? ' nav-link-active' : ''}`} type="button" aria-current={!isSavedView ? 'page' : undefined} onClick={() => setActiveView('home')}>Explore</button>
+          <button className={`nav-link${isSavedView ? ' nav-link-active' : ''}`} type="button" aria-current={isSavedView ? 'page' : undefined} onClick={() => setActiveView('saved')}>
             Saved{savedCities.length > 0 && <span className="saved-count">{savedCities.length}</span>}
           </button>
         </nav>
-
-        <a className="login-link" href="#login">
-          <span className="login-icon" aria-hidden="true">
-            <svg viewBox="0 0 20 20" fill="none">
-              <circle cx="10" cy="6.2" r="3" stroke="currentColor" strokeWidth="1.5" />
-              <path d="M4.3 16.4c.4-2.7 2.7-4.4 5.7-4.4s5.3 1.7 5.7 4.4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
-            </svg>
-          </span>
-          Log in
-        </a>
+        <span className={`api-status${apiConnected ? '' : ' api-status-offline'}`}>
+          <span />{apiConnected ? 'Live database' : error ? 'Database unavailable' : 'Connecting…'}
+        </span>
       </header>
 
       <main id="top" className="page-shell">
         <section className="intro" id="discover" aria-labelledby="page-title">
           <div className="intro-copy">
-            <p className="eyebrow"><span className="eyebrow-dot" />THE WORLD IS CLOSER THAN YOU THINK</p>
+            <p className="eyebrow"><span className="eyebrow-dot" />CONNECTED TO THE CITY DATABASE</p>
             <h1 id="page-title">Find the city that<br /><span>speaks to you.</span></h1>
-            <p className="intro-description">From quiet coastal towns to lively capitals. Your next discovery starts here.</p>
-          </div>
-          <div className="intro-image" role="img" aria-label="Colorful buildings and waterfront in Lisbon">
-            <span className="image-caption"><span className="caption-dot" />Lisbon, Portugal</span>
+            <p className="intro-description">Search real city data, explore details, and leave a review.</p>
           </div>
+          <div className="intro-image" role="img" aria-label="Colorful buildings along a Lisbon street"><span className="image-caption"><span className="caption-dot" />Lisbon, Portugal</span></div>
         </section>
 
-        <form className="search-form" action="#cities" method="get" role="search">
+        <form className="search-form" role="search" onSubmit={(event) => {
+          event.preventDefault()
+          const nextSearch = searchInput.trim()
+          if (nextSearch !== search) { setLoading(true); setError('') }
+          setSearch(nextSearch)
+          setActiveView('home')
+        }}>
           <label className="search-field" htmlFor="city-search">
-            <svg className="search-icon" viewBox="0 0 24 24" fill="none" aria-hidden="true">
-              <circle cx="10.8" cy="10.8" r="6.8" stroke="currentColor" strokeWidth="1.8" />
-              <path d="m16 16 4.2 4.2" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />
-            </svg>
-            <span className="visually-hidden">Search for a city or country</span>
-            <input id="city-search" name="q" type="search" placeholder="Search for a city, country, or feeling …" />
-            <kbd aria-hidden="true">⌘ K</kbd>
+            <svg className="search-icon" viewBox="0 0 24 24" fill="none" aria-hidden="true"><circle cx="10.8" cy="10.8" r="6.8" stroke="currentColor" strokeWidth="1.8" /><path d="m16 16 4.2 4.2" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" /></svg>
+            <span className="visually-hidden">Search for a city</span>
+            <input id="city-search" name="q" type="search" placeholder="Search for a city …" value={searchInput} onChange={(event) => setSearchInput(event.target.value)} />
           </label>
           <button className="search-button" type="submit">Search cities</button>
         </form>
@@ -244,124 +342,62 @@ function App() {
         <div className={`explore-layout${isSavedView ? ' saved-view' : ''}`} id="cities">
           {!isSavedView && (
             <aside className="filter-panel" aria-labelledby="filter-title">
-              <div className="filter-heading">
-                <h2 id="filter-title">Filters</h2>
-                <a href="#discover" className="reset-link">Reset</a>
-              </div>
+              <div className="filter-heading"><h2 id="filter-title">Filters</h2><button className="reset-link" type="button" onClick={resetFilters}>Reset</button></div>
               <fieldset className="filter-group">
-                <legend>Continent</legend>
-                <label className="check-option"><input type="checkbox" name="region" value="europe" defaultChecked /><span className="checkmark" aria-hidden="true" /><span>Europe</span><span className="option-count">8,420</span></label>
-                <label className="check-option"><input type="checkbox" name="region" value="asia" /><span className="checkmark" aria-hidden="true" /><span>Asia</span><span className="option-count">12,560</span></label>
-                <label className="check-option"><input type="checkbox" name="region" value="africa" /><span className="checkmark" aria-hidden="true" /><span>Africa</span><span className="option-count">5,180</span></label>
-                <label className="check-option"><input type="checkbox" name="region" value="north-america" /><span className="checkmark" aria-hidden="true" /><span>North America</span><span className="option-count">4,280</span></label>
-                <label className="check-option"><input type="checkbox" name="region" value="south-america" /><span className="checkmark" aria-hidden="true" /><span>South America</span><span className="option-count">3,640</span></label>
+                <legend>Country</legend>
+                <label className="visually-hidden" htmlFor="country-filter">Filter by country</label>
+                <select id="country-filter" value={country} onChange={(event) => { setLoading(true); setError(''); setCountry(event.target.value) }}>
+                  <option value="">All countries</option>
+                  {countries.map((countryName) => <option key={countryName} value={countryName}>{countryName}</option>)}
+                </select>
               </fieldset>
               <fieldset className="filter-group population-group">
                 <legend>Population</legend>
-                <label className="select-label" htmlFor="population">Choose a range</label>
-                <select id="population" name="population">
-                  <option>Any population</option>
-                  <option>Under 100,000</option>
-                  <option>100,000–1 million</option>
-                  <option>Over 1 million</option>
+                <label className="visually-hidden" htmlFor="population">Choose a population range</label>
+                <select id="population" value={populationRange} onChange={(event) => { setLoading(true); setError(''); setPopulationRange(event.target.value) }}>
+                  <option value="any">Any population</option><option value="small">Under 100,000</option><option value="medium">100,000–1 million</option><option value="large">Over 1 million</option>
                 </select>
               </fieldset>
-              <fieldset className="filter-group last-filter-group">
-                <legend>City type</legend>
-                <label className="check-option"><input type="checkbox" name="capital" value="true" /><span className="checkmark" aria-hidden="true" /><span>Capital city</span><span className="option-count">195</span></label>
-              </fieldset>
-              <a className="map-promo" href="#map-preview">
-                <span className="map-promo-icon" aria-hidden="true">
-                  <svg viewBox="0 0 24 24" fill="none">
-                    <path d="m3 6 6-3 6 3 6-3v15l-6 3-6-3-6 3V6Z" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" />
-                    <path d="M9 3v15m6-12v15" stroke="currentColor" strokeWidth="1.5" />
-                  </svg>
-                </span>
-                <span className="map-promo-text"><strong>Explore the map</strong><span>Find cities around the world</span></span>
-                <span className="map-arrow" aria-hidden="true">↗</span>
-              </a>
             </aside>
           )}
 
           <section className="results-section" aria-labelledby="results-title" aria-live="polite">
             <div className="results-topline">
-              <div>
-                <p className="results-kicker">{isSavedView ? 'YOUR BOOKMARKS' : 'YOUR NEXT DESTINATION'}</p>
-                <h2 id="results-title">
-                  {isSavedView ? 'Saved cities' : 'Cities to explore'}{' '}
-                  <span className="result-count">{isSavedView ? savedCities.length : '24,080'}</span>
-                </h2>
-              </div>
-              {!isSavedView && (
-                <label className="sort-control" htmlFor="sort-by">
-                  <span>Sort by</span>
-                  <select id="sort-by" name="sort">
-                    <option>Recommended</option>
-                    <option>Largest population</option>
-                    <option>Highest rated</option>
-                    <option>Alphabetical</option>
-                  </select>
-                </label>
-              )}
+              <div><p className="results-kicker">{isSavedView ? 'YOUR BOOKMARKS' : 'LIVE RESULTS'}</p><h2 id="results-title">{isSavedView ? 'Saved cities' : 'Cities to explore'} <span className="result-count">{isSavedView ? savedCities.length : totalCount.toLocaleString('en-US')}</span></h2></div>
+              {!isSavedView && <label className="sort-control" htmlFor="sort-by"><span>Sort by</span><select id="sort-by" value={sort} onChange={(event) => { setLoading(true); setError(''); setSort(event.target.value) }}><option value="population">Largest population</option><option value="name">Alphabetical</option><option value="country">Country</option></select></label>}
             </div>
 
-            {!isSavedView && (
-              <div className="active-filters" aria-label="Active filters">
-                <span className="filter-chip">Europe <span aria-hidden="true">×</span></span>
-                <a className="clear-filters" href="#discover">Clear all</a>
-              </div>
-            )}
-
-            {visibleCities.length > 0 ? (
+            {error && <div className="api-error" role="alert"><p>{error}</p><button type="button" onClick={() => { setLoading(true); setError(''); setRefreshKey((key) => key + 1) }}>Try again</button></div>}
+            {loading && cities.length === 0 && !isSavedView ? <p className="loading-state" role="status">Loading cities…</p> : visibleCities.length > 0 ? (
               <ol className="city-list" aria-label={isSavedView ? 'Saved cities' : 'City results'}>
-                {visibleCities.map((city) => (
-                  <CityCard
-                    key={city.id}
-                    city={city}
-                    saved={savedCities.includes(city.id)}
-                    onToggleSaved={toggleSavedCity}
-                  />
-                ))}
+                {visibleCities.map((city) => <CityCard
+                  key={city.id}
+                  city={city}
+                  saved={savedCities.some((savedCity) => savedCity.id === city.id)}
+                  detailsOpen={openCityId === city.id}
+                  reviewMessage={openCityId === city.id ? reviewMessage : ''}
+                  onToggleSaved={toggleSavedCity}
+                  onToggleDetails={(cityId) => { setOpenCityId((current) => current === cityId ? '' : cityId); setReviewMessage('') }}
+                  onAddReview={addReview}
+                />)}
               </ol>
-            ) : (
+            ) : !loading ? (
               <div className="empty-state">
                 <span className="empty-bookmark" aria-hidden="true"><BookmarkIcon filled={false} /></span>
-                <h3>No saved cities yet</h3>
-                <p>Save a city with the bookmark icon and it will appear here.</p>
-                <button type="button" onClick={() => setActiveView('home')}>Explore cities</button>
+                <h3>{isSavedView ? 'No saved cities yet' : 'No cities found'}</h3>
+                <p>{isSavedView ? 'Save a city with the bookmark icon and it will appear here.' : 'Try another search or adjust your filters.'}</p>
+                {isSavedView && <button type="button" onClick={() => setActiveView('home')}>Explore cities</button>}
               </div>
-            )}
+            ) : null}
 
-            {visibleCities.length > 0 && (
-              <div className="results-footer">
-                <span>{isSavedView ? `${visibleCities.length} saved ${visibleCities.length === 1 ? 'city' : 'cities'}` : 'Showing 3 of 24,080 cities'}</span>
-                {!isSavedView && <a href="#cities">Show more cities <span aria-hidden="true">↓</span></a>}
-              </div>
-            )}
+            {!isSavedView && visibleCities.length > 0 && <div className="results-footer">
+              <span>Showing {cities.length.toLocaleString('en-US')} of {totalCount.toLocaleString('en-US')} cities</span>
+              {hasMore && <button type="button" onClick={() => void loadMore()} disabled={loadingMore || loading}>{loadingMore ? 'Loading…' : 'Show more cities ↓'}</button>}
+            </div>}
           </section>
         </div>
 
-        <section className="map-preview" id="map-preview" aria-labelledby="map-title">
-          <div className="map-preview-copy">
-            <p className="results-kicker">SEE THE WORLD FROM A NEW PERSPECTIVE</p>
-            <h2 id="map-title">Where will curiosity take you?</h2>
-            <p>Every pin is a city with a story of its own. Find it on the map.</p>
-            <a href="#cities" className="map-link">Open the world map <span aria-hidden="true">↗</span></a>
-          </div>
-          <div className="map-visual" role="img" aria-label="Stylized world map with marked cities">
-            <span className="map-land land-one" /><span className="map-land land-two" />
-            <span className="map-land land-three" /><span className="map-land land-four" />
-            <span className="map-pin pin-one" /><span className="map-pin pin-two" />
-            <span className="map-pin pin-three" /><span className="map-pin pin-four" />
-            <span className="map-pin pin-five" />
-          </div>
-        </section>
-
-        <footer className="site-footer">
-          <a className="footer-brand" href="#top">Country Boys<span>.</span></a>
-          <p>A world of places to discover.</p>
-          <span className="footer-note">Made for the curious</span>
-        </footer>
+        <footer className="site-footer"><a className="footer-brand" href="#top">Country Boys<span>.</span></a><p>City data from the live database.</p><span className="footer-note">Reviews are shared with the database</span></footer>
       </main>
     </>
   )
diff --git a/t20-project-2/src/graphql.ts b/t20-project-2/src/graphql.ts
new file mode 100644
index 0000000..7fed937
--- /dev/null
+++ b/t20-project-2/src/graphql.ts
@@ -0,0 +1,24 @@
+const graphqlEndpoint = import.meta.env.VITE_GRAPHQL_URL || '/api/graphql'
+
+type GraphQLResponse<T> = {
+  data?: T
+  errors?: Array<{ message: string }>
+}
+
+export async function graphqlRequest<T>(
+  query: string,
+  variables: Record<string, unknown> = {},
+  signal?: AbortSignal,
+): Promise<T> {
+  const response = await fetch(graphqlEndpoint, {
+    method: 'POST',
+    headers: { 'content-type': 'application/json' },
+    body: JSON.stringify({ query, variables }),
+    signal,
+  })
+  const result = await response.json() as GraphQLResponse<T>
+  if (!response.ok || result.errors?.length || !result.data) {
+    throw new Error(result.errors?.map(({ message }) => message).join(', ') || `GraphQL request failed (${response.status})`)
+  }
+  return result.data
+}
\ No newline at end of file
diff --git a/t20-project-2/src/index.css b/t20-project-2/src/index.css
index 9afc521..2eaf9ff 100644
--- a/t20-project-2/src/index.css
+++ b/t20-project-2/src/index.css
@@ -52,6 +52,9 @@ button, a, input, select { -webkit-tap-highlight-color: transparent; }
 .login-link { display: inline-flex; align-items: center; gap: 8px; padding: 10px 15px; border: 1px solid #dce4df; border-radius: 6px; background: #fff; color: var(--ink); text-decoration: none; font-size: 13px; font-weight: 600; transition: border-color .2s, background-color .2s; }
 .login-link:hover { border-color: #a7bdb1; background: #f8faf8; }
 .login-icon, .login-icon svg { display: block; width: 18px; height: 18px; }
+.api-status { display: inline-flex; align-items: center; gap: 8px; color: #52615a; font-size: 11px; font-weight: 600; }
+.api-status span { width: 7px; height: 7px; border-radius: 50%; background: #4d9a6e; box-shadow: 0 0 0 3px #e1efe5; }
+.api-status-offline span { background: #c07a42; box-shadow: 0 0 0 3px #f7e9dc; }
 
 .page-shell { width: min(1184px, calc(100% - 64px)); margin: 0 auto; }
 .intro { position: relative; min-height: 230px; margin-top: 34px; display: flex; align-items: center; justify-content: space-between; overflow: hidden; }
@@ -119,10 +122,9 @@ h1 span { color: var(--green); }
 .filter-chip span { color: #658270; font-size: 14px; line-height: 10px; }
 
 .city-list { display: grid; gap: 13px; margin: 0; padding: 0; list-style: none; }
-.city-card { min-height: 174px; display: grid; grid-template-columns: 198px minmax(0, 1fr); overflow: hidden; border: 1px solid #e5e9e5; border-radius: 6px; background: white; transition: border-color .2s, box-shadow .2s; }
+.city-card { min-height: 140px; display: block; overflow: hidden; border: 1px solid #e5e9e5; border-radius: 6px; background: white; transition: border-color .2s, box-shadow .2s; }
 .city-card:hover { border-color: #c8d7cd; box-shadow: 0 7px 18px rgba(38,67,53,.06); }
-.city-image { width: 100%; height: 100%; min-height: 174px; object-fit: cover; background: #e5ebe6; }
-.city-content { min-width: 0; padding: 15px 17px 12px 19px; }
+.city-content { min-width: 0; padding: 17px 19px 14px; }
 .city-title-row { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
 .city-country { margin-bottom: 4px; color: #738078; font-size: 8px; font-weight: 700; letter-spacing: 1.05px; }
 .city-country span { padding: 0 3px; color: #d09a5e; }
@@ -131,16 +133,35 @@ h1 span { color: var(--green); }
 .save-button:hover { color: var(--green); border-color: #9cb5a5; }
 .save-button[aria-pressed="true"] { color: var(--green); border-color: #c6d8cb; background: #edf4ef; }
 .save-button svg { width: 17px; height: 17px; }
-.city-description { margin: 10px 0 12px; color: #68756e; font-size: 10px; line-height: 1.5; }
 .city-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: #67746d; font-size: 9px; font-variant-numeric: tabular-nums; }
 .rating { color: #314a3c; font-weight: 700; }
 .rating > span { color: #e7a44e; }
 .rating-count { color: #8a948e; font-weight: 400; }
 .meta-divider { width: 3px; height: 3px; border-radius: 50%; background: #bbc5bd; }
-.details-link { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px; color: var(--green); font-size: 10px; font-weight: 700; text-decoration: none; }
+.details-link { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px; padding: 0; border: 0; background: transparent; color: var(--green); font-size: 10px; font-weight: 700; text-decoration: none; cursor: pointer; }
 .details-link span, .map-link span { transition: transform .2s; }
 .details-link:hover { text-decoration: underline; }
 .details-link:hover span { transform: translateX(3px); }
+.city-details { margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--line); }
+.city-details h4 { margin: 12px 0 8px; color: var(--ink); font-size: 12px; }
+.coordinates, .no-reviews { margin: 0; color: var(--muted); font-size: 10px; }
+.review-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
+.review-list li { display: grid; grid-template-columns: auto auto; justify-content: start; gap: 6px 10px; padding: 9px 10px; border-radius: 4px; background: #f7f9f7; font-size: 10px; }
+.review-list li p { grid-column: 1 / -1; margin: 0; color: var(--muted); line-height: 1.5; }
+.review-rating { color: #d28a3e; }
+.review-form { display: grid; grid-template-columns: 1fr 130px; gap: 10px; margin-top: 13px; }
+.review-form label { display: grid; gap: 5px; color: #53615b; font-size: 10px; font-weight: 600; }
+.review-form input, .review-form select, .review-form textarea { width: 100%; min-height: 34px; padding: 7px 9px; border: 1px solid #dce4de; border-radius: 4px; background: white; color: var(--ink); font-size: 11px; }
+.review-form textarea { resize: vertical; }
+.review-comment { grid-column: 1 / -1; }
+.review-form button { justify-self: start; }
+.review-message { align-self: center; margin: 0; color: var(--green); font-size: 10px; }
+.api-error { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 16px 0; padding: 12px 14px; border: 1px solid #e8c4b9; border-radius: 5px; background: #fff8f5; color: #8b3f2d; font-size: 11px; }
+.api-error p { margin: 0; }
+.api-error button, .results-footer button { padding: 8px 10px; border: 1px solid #dce4de; border-radius: 4px; background: white; color: var(--green-dark); font-size: 10px; font-weight: 700; cursor: pointer; }
+.api-error button:hover, .results-footer button:hover { background: #edf3ee; }
+.results-footer button:disabled { opacity: .6; cursor: wait; }
+.loading-state { padding: 24px 0; color: var(--muted); font-size: 12px; }
 .results-footer { display: flex; align-items: center; justify-content: space-between; padding: 17px 2px 0; color: #88928c; font-size: 10px; }
 .results-footer a { display: inline-flex; align-items: center; gap: 7px; color: var(--green); font-weight: 700; text-decoration: none; }
 .results-footer a:hover { text-decoration: underline; }
@@ -182,8 +203,7 @@ h1 span { color: var(--green); }
   .intro-image { width: 48%; opacity: .88; }
   .explore-layout { grid-template-columns: 195px minmax(0,1fr); gap: 25px; }
   .filter-panel { padding-right: 16px; }
-  .city-card { grid-template-columns: 150px minmax(0,1fr); }
-  .city-content { padding: 13px 12px; }
+  .city-content { padding: 14px 13px; }
   .city-meta { gap: 6px; }
   .city-description { margin: 8px 0 10px; }
   .map-preview { padding: 25px; gap: 16px; }
@@ -196,6 +216,7 @@ h1 span { color: var(--green); }
   .nav-link { font-size: 11px; }
   .login-link { width: 34px; height: 34px; justify-content: center; padding: 0; font-size: 0; }
   .login-icon, .login-icon svg { width: 19px; height: 19px; }
+  .api-status { font-size: 0; }
   .page-shell { width: calc(100% - 36px); }
   .intro { min-height: 246px; align-items: end; margin-top: 18px; }
   .intro-copy { padding: 0 0 22px; }
diff --git a/t20-project-2/vite.config.ts b/t20-project-2/vite.config.ts
index d789a7c..9a41045 100644
--- a/t20-project-2/vite.config.ts
+++ b/t20-project-2/vite.config.ts
@@ -8,4 +8,13 @@ export default defineConfig({
     react(),
     babel({ presets: [reactCompilerPreset()] })
   ],
+  server: {
+    proxy: {
+      '/api/graphql': {
+        target: 'http://it2810-20.idi.ntnu.no:3001',
+        changeOrigin: true,
+        rewrite: () => '/',
+      },
+    },
+  },
 })