diff --git a/.env.example b/.env.example
new file mode 100644
index 0000000..4cc714a
--- /dev/null
+++ b/.env.example
@@ -0,0 +1 @@
+DATABASE_URL=
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
index e6308f5..8f1f9f9 100644
--- a/.gitignore
+++ b/.gitignore
@@ -7,4 +7,4 @@ node_modules
 
 # Local Netlify folder
 .netlify
-.DS_Store
+.DS_Store
\ No newline at end of file
diff --git a/app/routes/event.$slug.tsx b/app/routes/event.$slug.tsx
new file mode 100644
index 0000000..40fc669
--- /dev/null
+++ b/app/routes/event.$slug.tsx
@@ -0,0 +1,34 @@
+import { LoaderFunctionArgs } from "@remix-run/node";
+import { json, useLoaderData } from "@remix-run/react";
+
+import { prisma } from "~/utils/db.server";
+
+export const loader = async ({ params }: LoaderFunctionArgs) => {
+  if (!params.slug) {
+    throw new Error("Missing event slug");
+  }
+  const event = await prisma.event.findFirst({
+    where: {
+      slug: params.slug,
+    },
+  });
+  if (!event) {
+    throw new Response(null, {
+      status: 404,
+      statusText: "Event Not Found",
+    });
+  }
+  return json({ event });
+};
+
+export default function Event() {
+  const { event } = useLoaderData<typeof loader>();
+  return (
+    <div className="w-full max-w-6xl mx-auto">
+      <h1>{event.title}</h1>
+      <h2>Deskripsi</h2>
+      <img src={event.imageUrl} alt={event.title} />
+      <p>{event.description}</p>
+    </div>
+  );
+}
diff --git a/app/utils/db.server.ts b/app/utils/db.server.ts
new file mode 100644
index 0000000..01b6ecb
--- /dev/null
+++ b/app/utils/db.server.ts
@@ -0,0 +1,25 @@
+import { PrismaClient } from "@prisma/client";
+
+let prisma: PrismaClient;
+
+declare global {
+  var __db__: PrismaClient | undefined; // eslint-disable-line no-var
+}
+
+/**
+ * This is needed because in development we don't want to restart
+ * the server with every change, but we want to make sure we don't
+ * create a new connection to the DB with every change either.
+ * In production, we'll have a single connection to the DB.
+ */
+if (process.env.NODE_ENV === "production") {
+  prisma = new PrismaClient();
+} else {
+  if (!global.__db__) {
+    global.__db__ = new PrismaClient();
+  }
+  prisma = global.__db__;
+  prisma.$connect();
+}
+
+export { prisma };
diff --git a/bun.lockb b/bun.lockb
index b7b6263..0c2b985 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/package.json b/package.json
index 038bcb0..a981b07 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "@fontsource/geist-sans": "^5.0.3",
     "@netlify/functions": "^2.6.0",
     "@netlify/remix-adapter": "^2.3.1",
+    "@prisma/client": "^5.18.0",
     "@radix-ui/react-avatar": "^1.1.0",
     "@radix-ui/react-dialog": "^1.1.1",
     "@radix-ui/react-select": "^2.1.1",
@@ -28,6 +29,7 @@
     "dayjs": "^1.11.12",
     "isbot": "^4.1.0",
     "lucide-react": "^0.403.0",
+    "prisma": "^5.17.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "simple-icons": "^13.1.0",
diff --git a/prisma/migrations/20240819094423_init/migration.sql b/prisma/migrations/20240819094423_init/migration.sql
new file mode 100644
index 0000000..9fb1778
--- /dev/null
+++ b/prisma/migrations/20240819094423_init/migration.sql
@@ -0,0 +1,22 @@
+-- CreateTable
+CREATE TABLE "Event" (
+    "id" TEXT NOT NULL,
+    "slug" TEXT NOT NULL,
+    "title" TEXT NOT NULL,
+    "imageUrl" TEXT NOT NULL,
+    "dateTimeStart" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "dateTimeEnd" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "url" TEXT NOT NULL,
+    "description" TEXT NOT NULL,
+    "locationName" TEXT NOT NULL,
+    "locationAddress" TEXT NOT NULL,
+    "agendas" TEXT[],
+    "registrationInfo" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "Event_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "Event_slug_key" ON "Event"("slug");
diff --git a/prisma/migrations/migration_lock.toml b/prisma/migrations/migration_lock.toml
new file mode 100644
index 0000000..fbffa92
--- /dev/null
+++ b/prisma/migrations/migration_lock.toml
@@ -0,0 +1,3 @@
+# Please do not edit this file manually
+# It should be added in your version-control system (i.e. Git)
+provider = "postgresql"
\ No newline at end of file
diff --git a/prisma/schema.prisma b/prisma/schema.prisma
new file mode 100644
index 0000000..5d3eec3
--- /dev/null
+++ b/prisma/schema.prisma
@@ -0,0 +1,31 @@
+// This is your Prisma schema file,
+// learn more about it in the docs: https://pris.ly/d/prisma-schema
+
+generator client {
+  provider        = "prisma-client-js"
+  previewFeatures = ["driverAdapters"]
+}
+
+datasource db {
+  provider = "postgresql"
+  url      = env("DATABASE_URL")
+}
+
+model Event {
+  id String @id @default(cuid())
+
+  slug             String   @unique
+  title            String   @db.Text
+  imageUrl         String
+  dateTimeStart    DateTime @default(now())
+  dateTimeEnd      DateTime @default(now())
+  url              String // Url for online or hybrid
+  description      String   @db.Text
+  locationName     String
+  locationAddress  String
+  agendas          String[]
+  registrationInfo String   @db.Text
+
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+}