diff --git a/src/app/lib/get.ts b/src/app/lib/get.ts
index 797b286..85acb76 100644
--- a/src/app/lib/get.ts
+++ b/src/app/lib/get.ts
@@ -3,6 +3,16 @@ import prisma from "./db"
 export async function getStories() {
 	return prisma.story.findMany()
 }
+export async function getStoriesWithGenres() {
+	return prisma.story.findMany(
+		{
+			include: {
+				genres: true
+			}
+		}
+
+	)
+}
 export async function getPubs() {
 	return prisma.pub.findMany()
 }
diff --git a/src/app/story/columns.tsx b/src/app/story/columns.tsx
index 9c9704c..713fcbd 100644
--- a/src/app/story/columns.tsx
+++ b/src/app/story/columns.tsx
@@ -1,9 +1,9 @@
 "use client"
 import { ColumnDef } from "@tanstack/react-table"
-import { Story } from "@prisma/client"
+import { Genre, Story } from "@prisma/client"
 import { ArrowUpDown, MoreHorizontal } from "lucide-react"
 import { Button } from "@/components/ui/button"
-export const columns: ColumnDef<Story>[] = [
+export const columns: ColumnDef<Story & { genres: Array<Genre> }>[] = [
   // {
   //   accessorKey: "id",
   //   header: "Id",
@@ -22,10 +22,34 @@ export const columns: ColumnDef<Story>[] = [
         </Button>
       )
     },
+
   },
   {
     accessorKey: "word_count",
-    header: "Word Count",
+    header: ({ column }) => {
+      return (
+        <Button
+          variant="ghost"
+          onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+        >
+          Word Count
+          <ArrowUpDown className="ml-2 h-4 w-4" />
+        </Button>
+      )
+    },
+    enableColumnFilter: false
+  },
+  {
+    accessorFn: row => {
+      let unpacked = ""
+      for (let i = 0; i < row.genres.length; i++) {
+        unpacked = unpacked + " " + row.genres[i].name
+      }
+      return unpacked
+    },
+    header: "Genres"
+
+
   },
   // {
   //   accessorKey: "deleted",
diff --git a/src/app/story/data-table.tsx b/src/app/story/data-table.tsx
index f02984e..8248775 100644
--- a/src/app/story/data-table.tsx
+++ b/src/app/story/data-table.tsx
@@ -5,6 +5,8 @@ import {
   DropdownMenuCheckboxItem,
   DropdownMenuContent,
   DropdownMenuTrigger,
+  DropdownMenuRadioItem,
+  DropdownMenuRadioGroup
 } from "@/components/ui/dropdown-menu"
 import { Input } from "@/components/ui/input"
 import { useState } from "react"
@@ -39,6 +41,7 @@ export function DataTable<TData, TValue>({
   columns,
   data,
 }: DataTableProps<TData, TValue>) {
+  console.log(data)
   //STATE
   const [sorting, setSorting] = useState<SortingState>([])
   const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>(
@@ -64,20 +67,45 @@ export function DataTable<TData, TValue>({
     },
   })
 
+  const [filterBy, setFilterBy] = useState(table.getAllColumns()[0])
+  console.log(filterBy.id)
   return (<>
     <div className="flex items-center py-4">
-      <Input
-        placeholder="Filter emails..."
-        value={(table.getColumn("email")?.getFilterValue() as string) ?? ""}
-        onChange={(event) =>
-          table.getColumn("email")?.setFilterValue(event.target.value)
-        }
-        className="max-w-sm"
-      />
+      <div className="">
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="outline" className="ml-auto">
+              Filter by
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuRadioGroup value={filterBy} onValueChange={setFilterBy} >
+              {table
+                .getAllColumns()
+                .filter((column) => column.getCanFilter())
+                .map((column) => {
+                  return (
+                    <DropdownMenuRadioItem value={column} className="capitalize" key={column.id}>
+                      {column.id}
+                    </DropdownMenuRadioItem>
+                  )
+                })}
+            </DropdownMenuRadioGroup>
+          </DropdownMenuContent>
+        </DropdownMenu>
+        <Input
+          placeholder={`${filterBy.id}`}
+          value={(table.getColumn(filterBy.id)?.getFilterValue() as string) ?? ""}
+          onChange={(event) =>
+            table.getColumn(filterBy.id)?.setFilterValue(event.target.value)
+          }
+          className="max-w-sm"
+        />
+      </div>
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
           <Button variant="outline" className="ml-auto">
-            Columns
+            Show/hide
           </Button>
         </DropdownMenuTrigger>
         <DropdownMenuContent align="end">
diff --git a/src/app/story/page.tsx b/src/app/story/page.tsx
index 5cf263a..93c0a71 100644
--- a/src/app/story/page.tsx
+++ b/src/app/story/page.tsx
@@ -1,116 +1,9 @@
 import { Story } from "@prisma/client";
 import { DataTable } from "./data-table";
 import { columns } from "./columns";
-const stories: Story[] = [
-  {
-    id: 0,
-    word_count: 500,
-    title: "Space Vampire",
-    deleted: 0,
-  },
-  {
-    id: 1,
-    word_count: 500,
-    title: "Ghost Astronaut",
-    deleted: 0,
-  }, {
-    id: 1,
-    word_count: 500,
-    title: "Spooky Elf",
-    deleted: 0,
-  }, {
-    id: 1,
-    word_count: 500,
-    title: "Space Orcs",
-    deleted: 0,
-  }, {
-    id: 1,
-    word_count: 500,
-    title: "Spooky Space Orcs",
-    deleted: 0,
-  },
-  {
-    id: 0,
-    word_count: 500,
-    title: "Space Vampire",
-    deleted: 0,
-  },
-  {
-    id: 1,
-    word_count: 500,
-    title: "Ghost Astronaut",
-    deleted: 0,
-  }, {
-    id: 1,
-    word_count: 500,
-    title: "Spooky Elf",
-    deleted: 0,
-  }, {
-    id: 1,
-    word_count: 500,
-    title: "Space Orcs",
-    deleted: 0,
-  }, {
-    id: 1,
-    word_count: 500,
-    title: "Spooky Space Orcs",
-    deleted: 0,
-  },
-  {
-    id: 0,
-    word_count: 500,
-    title: "Space Vampire",
-    deleted: 0,
-  },
-  {
-    id: 1,
-    word_count: 500,
-    title: "Ghost Astronaut",
-    deleted: 0,
-  }, {
-    id: 1,
-    word_count: 500,
-    title: "Spooky Elf",
-    deleted: 0,
-  }, {
-    id: 1,
-    word_count: 500,
-    title: "Space Orcs",
-    deleted: 0,
-  }, {
-    id: 1,
-    word_count: 500,
-    title: "Spooky Space Orcs",
-    deleted: 0,
-  },
-  {
-    id: 0,
-    word_count: 500,
-    title: "Space Vampire",
-    deleted: 0,
-  },
-  {
-    id: 1,
-    word_count: 500,
-    title: "Ghost Astronaut",
-    deleted: 0,
-  }, {
-    id: 1,
-    word_count: 500,
-    title: "Spooky Elf",
-    deleted: 0,
-  }, {
-    id: 1,
-    word_count: 500,
-    title: "Space Orcs",
-    deleted: 0,
-  }, {
-    id: 1,
-    word_count: 500,
-    title: "Spooky Space Orcs And Gandalf Too",
-    deleted: 0,
-  },
-]
+import { getStoriesWithGenres } from "app/lib/get";
+import { Genre } from "@prisma/client";
+const stories: Array<Story & { genres: Array<Genre> }> = await getStoriesWithGenres()
 export default async function Page() {
   return (
     <div className="container mx-auto py-10">