diff --git a/src/pages/areas/[area].astro b/src/pages/areas/[area].astro
deleted file mode 100644
index fc24edf..0000000
--- a/src/pages/areas/[area].astro
+++ /dev/null
@@ -1,132 +0,0 @@
----
-import lodash from "lodash";
-import { google } from "googleapis";
-import { z } from "zod";
-
-import { authorize } from "../../google-api";
-import { getCandidateFullName } from "../../utils";
-import Layout from "../../layouts/Layout.astro";
-import HeaderSection from "../../components/HeaderSection.astro";
-import HeaderTitle from "../../components/HeaderTitle.astro";
-import QuestionText from "../../components/QuestionText.astro";
-import Link from "../../components/Link.astro";
-
-export async function getStaticPaths() {
-  const electoralAreasSchema = z.array(z.string());
-  const questionsSchema = z.array(z.string());
-  const candidatesAnswersSchema = z.array(z.array(z.string()));
-  const auth = await authorize();
-  const sheets = google.sheets({ version: "v4", auth });
-  const electoralAreasResponse = await sheets.spreadsheets.values.get({
-    spreadsheetId: import.meta.env.SHEET_ID,
-    range: "areas!A1:A11",
-  });
-
-  const electoralAreasFromSheet =
-    electoralAreasResponse.data.values?.map((row) => row[0]) ?? [];
-
-  const questionsResponse = await sheets.spreadsheets.values.get({
-    spreadsheetId: import.meta.env.SHEET_ID,
-    range: "questions!A1:A10",
-  });
-
-  const questionsFromSheet =
-    questionsResponse.data.values?.map((row) => row[0]) ?? [];
-
-  const candidatesAnswersResponse = await sheets.spreadsheets.values.get({
-    spreadsheetId: import.meta.env.SHEET_ID,
-    range: "answers!A2:M",
-  });
-
-  const candidatesAnswersFromSheet =
-    candidatesAnswersResponse.data.values ?? [];
-
-  try {
-    const electoralAreas = electoralAreasSchema.parse(electoralAreasFromSheet);
-    const questionsList = questionsSchema.parse(questionsFromSheet);
-    const candidatesAnswers = candidatesAnswersSchema.parse(
-      candidatesAnswersFromSheet
-    );
-
-    return electoralAreas.map((electoralArea) => {
-      const candidatesAnswersForArea = candidatesAnswers.filter(
-        (row) => row[2] === electoralArea
-      );
-      const answersListByCandidate = candidatesAnswersForArea
-        .map((row) => {
-          return {
-            candidate: {
-              firstname: row[0],
-              lastname: row[1],
-            },
-            answers: row.slice(3),
-          };
-        })
-        .reduce<Record<string, string[]>>((acc, { candidate, answers }) => {
-          return {
-            ...acc,
-            [getCandidateFullName(candidate)]: answers,
-          };
-        }, {});
-
-      const questions = questionsList.map((question, index) => {
-        return {
-          text: question,
-          answers: candidatesAnswersForArea.map((row) => {
-            const candidateFullName = getCandidateFullName({
-              firstname: row[0],
-              lastname: row[1],
-            });
-            return {
-              candidateFullName,
-              answer: answersListByCandidate[candidateFullName][index],
-            };
-          }),
-        };
-      });
-
-      return {
-        params: {
-          area: lodash.kebabCase(electoralArea),
-        },
-        props: {
-          area: electoralArea,
-          questions,
-        },
-      };
-    });
-  } catch (error) {
-    console.error(error);
-    return [];
-  }
-}
-
-const { area, questions } = Astro.props;
----
-
-<Layout>
-  <HeaderSection>
-    <HeaderTitle>{area}</HeaderTitle>
-  </HeaderSection>
-  <main class="px-gutter">
-    {
-      questions.map((question) => (
-        <>
-          <QuestionText>{question.text}</QuestionText>
-          {question.answers.map((answer) => (
-            <>
-              <h3>
-                <Link
-                  to={`candidates/${lodash.kebabCase(answer.candidateFullName)}`}
-                >
-                  {answer.candidateFullName}
-                </Link>
-              </h3>
-              <p>{answer.answer}</p>
-            </>
-          ))}
-        </>
-      ))
-    }
-  </main>
-</Layout>
diff --git a/src/pages/areas/[localAuthority]/[area].astro b/src/pages/areas/[localAuthority]/[area].astro
new file mode 100644
index 0000000..5568c97
--- /dev/null
+++ b/src/pages/areas/[localAuthority]/[area].astro
@@ -0,0 +1,132 @@
+---
+import { type Record as AirtableRecord, type FieldSet } from "airtable";
+import lodash from "lodash";
+
+import {
+  airtableClient,
+  getLookupFieldValue,
+  getStringFieldValue,
+} from "../../../airtable-api";
+import Layout from "../../../layouts/Layout.astro";
+import HeaderSection from "../../../components/HeaderSection.astro";
+import HeaderTitle from "../../../components/HeaderTitle.astro";
+import QuestionText from "../../../components/QuestionText.astro";
+import Link from "../../../components/Link.astro";
+
+export async function getStaticPaths() {
+  const electoralAreas = await airtableClient("Areas")
+    .select({
+      view: "Grid view",
+    })
+    .all();
+
+  const questions = await airtableClient("Questions")
+    .select({
+      view: "Grid view",
+    })
+    .all();
+
+  const questionsList = questions.map((record) =>
+    getStringFieldValue(record, "Text")
+  );
+
+  const answers = await airtableClient("Answers")
+    .select({
+      view: "Grid view",
+    })
+    .all();
+
+  return electoralAreas.map((electoralAreaRecord) => {
+    const electoralAreaName = getStringFieldValue(electoralAreaRecord, "Name");
+    const candidatesAnswersForArea = answers.filter(
+      (answerRecord) =>
+        getLookupFieldValue(answerRecord, "Candidate area name") ===
+        electoralAreaName
+    );
+
+    const answersListByCandidate = candidatesAnswersForArea.reduce<
+      Record<string, AirtableRecord<FieldSet>[]>
+    >((acc, answerRecord) => {
+      const candidateFullName = getLookupFieldValue(
+        answerRecord,
+        "Candidate full name"
+      );
+      const candidateAnswers = candidatesAnswersForArea.filter(
+        (candidatesAnswersForAreaRecord) =>
+          getLookupFieldValue(
+            candidatesAnswersForAreaRecord,
+            "Candidate full name"
+          ) === candidateFullName
+      );
+      return {
+        ...acc,
+        [candidateFullName]: candidateAnswers,
+      };
+    }, {});
+
+    const questions = questionsList.map((question, index) => {
+      return {
+        text: question,
+        answers: candidatesAnswersForArea.map((answerRecord) => {
+          const candidateFullName = getLookupFieldValue(
+            answerRecord,
+            "Candidate full name"
+          );
+          const answer =
+            answersListByCandidate[candidateFullName][index] &&
+            getStringFieldValue(
+              answersListByCandidate[candidateFullName][index],
+              "Text"
+            );
+          return {
+            candidateFullName,
+            answer,
+          };
+        }),
+      };
+    });
+
+    return {
+      params: {
+        localAuthority: lodash.kebabCase(
+          getLookupFieldValue(electoralAreaRecord, "Local Authority Name")
+        ),
+        area: lodash.kebabCase(electoralAreaName),
+      },
+      props: {
+        area: electoralAreaName,
+        questions,
+      },
+    };
+  });
+}
+
+const { area, questions } = Astro.props;
+---
+
+<Layout>
+  <HeaderSection>
+    <HeaderTitle>{area}</HeaderTitle>
+  </HeaderSection>
+  <main class="px-gutter">
+    {
+      questions.map((question) => (
+        <>
+          <QuestionText>{question.text}</QuestionText>
+          {question.answers.map((answer) => (
+            <>
+              <h3>
+                <Link
+                  to={`candidates/${lodash.kebabCase(answer.candidateFullName)}`}
+                >
+                  {answer.candidateFullName}
+                </Link>
+              </h3>
+              <p>{answer.answer}</p>
+            </>
+          ))}
+        </>
+      ))
+    }
+  </main>
+</Layout>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 691e2cb..3e90418 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -82,7 +82,9 @@ const candidatesByArea = candidates.reduce<Record<string, typeof candidates>>(
       <option disabled>Dublin City Council</option>
       {
         dccElectoralAreaNames.map((electoralAreaName) => (
-          <option value={lodash.kebabCase(electoralAreaName)}>
+          <option
+            value={`dublin-city-council/${lodash.kebabCase(electoralAreaName)}`}
+          >
             {electoralAreaName}
           </option>
         ))
@@ -90,7 +92,9 @@ const candidatesByArea = candidates.reduce<Record<string, typeof candidates>>(
       <option disabled>Fingal County Council</option>
       {
         fingalElectoralAreaNames.map((electoralAreaName) => (
-          <option value={lodash.kebabCase(electoralAreaName)}>
+          <option
+            value={`fingal-county-council/${lodash.kebabCase(electoralAreaName)}`}
+          >
             {electoralAreaName}
           </option>
         ))