diff --git a/src/components/sva/contactField.ts b/src/components/sva/contactField.ts
new file mode 100644
index 0000000..d77c573
--- /dev/null
+++ b/src/components/sva/contactField.ts
@@ -0,0 +1,56 @@
+import { fieldAnatomy } from "@ark-ui/react";
+import { sva } from "panda/css";
+
+/**
+ * Ark UI の [Popover コンポーネント](https://ark-ui.com/react/docs/components/popover) の基底スタイル
+ *
+ * 書き方 refs:
+ * - https://panda-css.com/docs/concepts/slot-recipes
+ * - https://ark-ui.com/react/docs/guides/styling#styling-with-panda-css
+ * - https://speakerdeck.com/ikumatadokoro/panda-css-to-ark-ui-dehazimeruge-ren-kai-fa?slide=31
+ */
+export const svaContactField = sva({
+  className: "ContactField",
+  slots: fieldAnatomy.keys(),
+  base: {
+    root: {
+      display: "grid",
+      gap: "0.5rem",
+      gridTemplateColumns: "1fr",
+      width: "100%",
+      maxWidth: "700px",
+      minWidth: "500px",
+      borderRadius: "md",
+    },
+    textarea: {
+      p: "2",
+      bg: "white.0",
+      height: "200px",
+      rounded: "md",
+      shadow: "md",
+      duration: "200ms",
+      width: "100%",
+    },
+    select: {
+      p: "2",
+      bg: "white.0",
+      border: "1px solid",
+      rounded: "md",
+      shadow: "md",
+      duration: "200ms",
+    },
+    input: {
+      p: "2",
+      bg: "white.0",
+      rounded: "md",
+      shadow: "md",
+      width: "100%",
+      _open: {
+        //
+      },
+      _closed: {
+        //
+      },
+    },
+  },
+});
diff --git a/src/routes/contact/index.tsx b/src/routes/contact/index.tsx
index 5bc7300..dd9bf74 100644
--- a/src/routes/contact/index.tsx
+++ b/src/routes/contact/index.tsx
@@ -1,5 +1,103 @@
+import { Field } from "@ark-ui/react";
 import { createFileRoute } from "@tanstack/react-router";
+import { styled as p } from "panda/jsx";
+import { useForm } from "react-hook-form";
+import { Button } from "@/components/cva/Button";
+import { svaContactField } from "@/components/sva/contactField";
 
 export const Route = createFileRoute("/contact/")({
-  component: () => <div>Hello /contact/!</div>,
+  component: () => {
+    const contactField = svaContactField();
+    const { register } = useForm<FormData>();
+
+    type FormData = {
+      mail: string;
+      name: string;
+      subject: string;
+      content: string;
+    };
+
+    return (
+      <p.div>
+        <p.div py={24}>
+          <p.h1 fontSize="4xl" fontWeight="bold" textAlign="center">
+            Contact
+          </p.h1>
+        </p.div>
+        <form>
+          <p.div>
+            <p.div display="flex" justifyContent="center">
+              <p.div>
+                <p.p fontSize="xl" fontWeight="bold" pb={2}>
+                  メールアドレス*
+                </p.p>
+                <Field.Root className={contactField.root}>
+                  <Field.Input
+                    className={contactField.input}
+                    {...register("mail", { required: true })}
+                  />
+                </Field.Root>
+              </p.div>
+            </p.div>
+            <p.div
+              display="flex"
+              justifyContent="center"
+              pt={{ base: 12, md: 12, xl: 24 }}
+            >
+              <p.div>
+                <p.p fontSize="xl" fontWeight="bold" pb={2}>
+                  お名前*
+                </p.p>
+                <Field.Root className={contactField.root}>
+                  <Field.Input
+                    className={contactField.input}
+                    {...register("name", { required: true })}
+                  />
+                </Field.Root>
+              </p.div>
+            </p.div>
+            <p.div
+              display="flex"
+              justifyContent="center"
+              pt={{ base: 12, md: 12, xl: 24 }}
+            >
+              <p.div>
+                <p.p fontSize="xl" fontWeight="bold" pb={2}>
+                  件名*
+                </p.p>
+                <Field.Root className={contactField.root}>
+                  <Field.Input
+                    className={contactField.input}
+                    {...register("subject", { required: true })}
+                  />
+                </Field.Root>
+              </p.div>
+            </p.div>
+            <p.div
+              display="flex"
+              justifyContent="center"
+              pt={{ base: 12, md: 12, xl: 24 }}
+            >
+              <p.div>
+                <p.p fontSize="xl" fontWeight="bold" pb={2}>
+                  本文*
+                </p.p>
+                <Field.Root className={contactField.root}>
+                  <Field.Textarea
+                    className={contactField.textarea}
+                    {...register("content", { required: true })}
+                  />
+                </Field.Root>
+              </p.div>
+            </p.div>
+            <p.div alignContent="center" py={24}>
+              <p.div display="flex" justifyContent="center">
+                <Button type="submit">送信</Button>
+              </p.div>
+            </p.div>
+          </p.div>
+        </form>
+      </p.div>
+    );
+  },
 });
diff --git a/supabase/migrations/20241030185409_add-db-fn-of-seeds.sql b/supabase/migrations/20241030185409_add-db-fn-of-seeds.sql
new file mode 100644
index 0000000..03358b0
--- /dev/null
+++ b/supabase/migrations/20241030185409_add-db-fn-of-seeds.sql
@@ -0,0 +1,12 @@
+set
+  check_function_bodies = off;
+
+CREATE
+OR REPLACE FUNCTION public.get_seeds_in_territory(territory_id uuid) RETURNS SETOF seeds LANGUAGE sql AS $ function $
+select
+  s.*
+from
+  seeds as s
+  join territories as t on st_contains(t.zone, s.location)
+where
+  t.territory_id = territory_id $ function $;