diff --git a/frontend/.env b/frontend/.env
new file mode 100644
index 0000000..a2c81e5
--- /dev/null
+++ b/frontend/.env
@@ -0,0 +1,3 @@
+
+# The URL where your API can be reached on the web.
+DIRECTUS_API_URL="http://0.0.0.0:8055"
diff --git a/frontend/app/vendors/[slug]/page.js b/frontend/app/vendors/[slug]/page.js
new file mode 100644
index 0000000..708bc92
--- /dev/null
+++ b/frontend/app/vendors/[slug]/page.js
@@ -0,0 +1,89 @@
+import { notFound } from 'next/navigation'
+import directus from '~/lib/directus'
+
+async function getVendor(slug) {
+  return directus.items('vendors').readByQuery({
+    fields: [
+      //
+      '*',
+      'categories.categories_id.slug',
+      'categories.categories_id.name',
+      'categories.categories_id.parent_id',
+      'categories.categories_id.subcategories.slug',
+      'categories.categories_id.subcategories.name',
+    ],
+    limit: 1,
+    filter: { slug: { _eq: slug } },
+  })
+}
+
+export default async function VendorPage({ params }) {
+  const {
+    data: [vendor],
+  } = await getVendor(params.slug)
+
+  if (!vendor) {
+    notFound()
+  }
+
+  return (
+    <div>
+      <h1>{vendor.name}</h1>
+      <p>{vendor.description}</p>
+
+      <h2>Address</h2>
+      <p>
+        {vendor.address_line_1 && (
+          <>
+            {vendor.address_line_1}
+            <br />
+          </>
+        )}
+        {vendor.address_line_2 && (
+          <>
+            {vendor.address_line_2}
+            <br />
+          </>
+        )}
+        {vendor.city && (
+          <>
+            {vendor.city}
+            <br />
+          </>
+        )}
+        {vendor.state && (
+          <>
+            {vendor.state}
+            <br />
+          </>
+        )}
+        {vendor.country && (
+          <>
+            {vendor.country}
+            <br />
+          </>
+        )}
+      </p>
+
+      {vendor.website && (
+        <>
+          <h2>Website</h2>
+          <a href={vendor.website} target="_blank">
+            {vendor.website}
+          </a>
+        </>
+      )}
+
+      {vendor.categories.length > 0 && (
+        <>
+          <h2>Categories</h2>
+          <ul>
+            {vendor.categories.map((cat) => (
+              <li>{cat.categories_id.name}</li>
+            ))}
+          </ul>
+        </>
+      )}
+    </div>
+  )
+}
diff --git a/frontend/app/vendors/page.js b/frontend/app/vendors/page.js
new file mode 100644
index 0000000..5c1ad67
--- /dev/null
+++ b/frontend/app/vendors/page.js
@@ -0,0 +1,34 @@
+import Link from 'next/link'
+import { notFound } from 'next/navigation'
+import directus from '~/lib/directus'
+
+const PER_PAGE = 50
+
+async function getVendors(page = 1) {
+  return directus.items('vendors').readByQuery({
+    fields: [
+      //
+      '*',
+    ],
+    limit: PER_PAGE,
+    page,
+    meta: ['filter_count'],
+  })
+}
+
+export default async function VendorsPage({ params }) {
+  const { data: vendors, meta } = await getVendors()
+
+  return (
+    <div>
+      <h1>Vendors ({meta.filter_count} total)</h1>
+      <ul>
+        {vendors.map((v) => (
+          <li>
+            <Link href={`/vendors/${v.slug}`}>{v.name}</Link>
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}
diff --git a/frontend/lib/directus.js b/frontend/lib/directus.js
index 81e4805..1479919 100644
--- a/frontend/lib/directus.js
+++ b/frontend/lib/directus.js
@@ -1,5 +1,5 @@
-import { Directus } from '@directus/sdk';
+import { Directus } from '@directus/sdk'
 
-const directus = new Directus('http://0.0.0.0:8055/');
+const directus = new Directus(process.env.DIRECTUS_API_URL)
 
-export default directus;
+export default directus