diff --git a/.env.example b/.env.example
index a769121..fa78d44 100644
--- a/.env.example
+++ b/.env.example
@@ -17,3 +17,4 @@ AWS_ACCESS_KEY_ID=
 AWS_SECRET_ACCESS_KEY=
 AWS_REGION=
 S3_BUCKET=
+VITE_APP_NAME=SocialAdonis
diff --git a/app/controllers/admin_post_reports_controller.ts b/app/controllers/admin_post_reports_controller.ts
new file mode 100644
index 0000000..1f20633
--- /dev/null
+++ b/app/controllers/admin_post_reports_controller.ts
@@ -0,0 +1,59 @@
+import { PageObject } from '@adonisjs/inertia/types'
+import { inject } from '@adonisjs/core'
+import AdminPostReportService from '#services/admin_post_report_service'
+import { PaginatedResponse } from '#interfaces/pagination'
+import { PostReportResponse } from '#interfaces/post'
+import { adminUpdatePostReportValidator } from '#validators/post_report'
+import PostReport from '#models/post_report'
+import { errorsReducer } from '#utils/index'
+import { errors } from '@vinejs/vine'
+import type { HttpContext } from '@adonisjs/core/http'
+
+@inject()
+export default class AdminPostReportsController {
+  constructor(private readonly service: AdminPostReportService) {}
+
+  async index(ctx: HttpContext): Promise<
+    | string
+    | PageObject<{
+        reports: PaginatedResponse<PostReportResponse>
+      }>
+  > {
+    const currentUserId = ctx.auth.user?.id!
+    const page = ctx.request.qs().page || 1
+
+    const filters: Record<'reason' | 'status', string[] | null> = {
+      reason: ctx.request.qs().reason ? [ctx.request.qs().reason].flat() : null,
+      status: ctx.request.qs().status ? [ctx.request.qs().status].flat() : null,
+    }
+
+    const reports = await this.service.index(currentUserId, filters, page)
+
+    return ctx.inertia.render('admin/post_reports/index', {
+      reports,
+    })
+  }
+
+  async update(ctx: HttpContext) {
+    const reportId = ctx.request.params().id
+    const report = await PostReport.findOrFail(reportId)
+
+    if (await ctx.bouncer.with('PostReportPolicy').denies('edit', report)) {
+      return ctx.response.forbidden('Only admin is able to take action on report status.')
+    }
+
+    try {
+      const payload = ctx.request.body()
+      const data = await adminUpdatePostReportValidator.validate(payload)
+      report.status = data.status
+      await report.save()
+      return this.index(ctx)
+    } catch (error) {
+      if (error instanceof errors.E_VALIDATION_ERROR) {
+        const reducedErrors = errorsReducer(error.messages)
+        return ctx.response.badRequest(reducedErrors)
+      }
+      return ctx.response.badRequest()
+    }
+  }
+}
diff --git a/app/controllers/feed_controller.ts b/app/controllers/feed_controller.ts
index 54656d2..566ca0f 100644
--- a/app/controllers/feed_controller.ts
+++ b/app/controllers/feed_controller.ts
@@ -21,6 +21,7 @@ export default class FeedController {
 
     const posts = await Post.query()
       .orderBy('updated_at', 'desc')
+      .withScopes((scope) => scope.visible())
       .preload('user')
       .preload('reactions')
       .paginate(page, 10)
diff --git a/app/interfaces/post.ts b/app/interfaces/post.ts
index 681dcfb..7626fda 100644
--- a/app/interfaces/post.ts
+++ b/app/interfaces/post.ts
@@ -2,7 +2,7 @@ import { BaseEntity } from '#interfaces/base_entity'
 import { UUID } from 'node:crypto'
 import { UserResponse } from './user'
 import { AttachmentResponse } from 'app/interfaces/attachment'
-import { PostReactionType } from '#enums/post'
+import { PostReactionType, PostReportReason, PostReportStatus } from '#enums/post'
 
 export interface LinkMetadataJSONResponse {
   title: string
@@ -30,3 +30,14 @@ export interface PostResponse extends BaseEntity {
     total: number
   }
 }
+
+export interface PostReportResponse extends BaseEntity {
+  id: UUID
+  reason: PostReportReason
+  status: PostReportStatus
+  description: string
+  userId: UUID
+  postId: UUID
+  post: PostResponse & { reportCount: number }
+  user: UserResponse
+}
diff --git a/app/middleware/auth_middleware.ts b/app/middleware/auth_middleware.ts
index b2a662d..0309ea9 100644
--- a/app/middleware/auth_middleware.ts
+++ b/app/middleware/auth_middleware.ts
@@ -13,7 +13,8 @@ export default class AuthMiddleware {
   redirectTo = '/auth/sign-in'
 
   /**
-   * The URL to redirect to, when authentication fails
+   *
+   * The URL to redirect the admin to, when authentication fails
    */
   adminRedirectTo = '/admin/auth/sign-in'
 
@@ -26,7 +27,6 @@ export default class AuthMiddleware {
   ) {
     let guard: keyof Authenticators = 'web'
     if (ctx.route?.pattern.includes('admin')) guard = 'admin-web'
-
     try {
       await ctx.auth.authenticateUsing([guard])
       return next()
diff --git a/app/models/post.ts b/app/models/post.ts
index bcd98b6..0c7be83 100644
--- a/app/models/post.ts
+++ b/app/models/post.ts
@@ -8,6 +8,7 @@ import {
   column,
   computed,
   hasMany,
+  scope,
 } from '@adonisjs/lucid/orm'
 import User from '#models/user'
 import { extractFirstLink, sanitizePostContent } from '#utils/index'
@@ -45,6 +46,10 @@ export default class Post extends BaseModel {
   @column.dateTime({ autoCreate: true, autoUpdate: true })
   declare updatedAt: DateTime | null
 
+  static visible = scope((query) => {
+    query.where('status', PostStatus.PUBLISHED)
+  })
+
   @computed()
   get link(): string | null {
     return extractFirstLink(this.content)
diff --git a/app/services/admin_post_report_service.ts b/app/services/admin_post_report_service.ts
new file mode 100644
index 0000000..1ab6e1e
--- /dev/null
+++ b/app/services/admin_post_report_service.ts
@@ -0,0 +1,72 @@
+import { PaginatedResponse } from '#interfaces/pagination'
+import { PostReportResponse } from '#interfaces/post'
+import PostReport from '#models/post_report'
+import PostsService from '#services/posts_service'
+import { UserService } from '#services/user_service'
+import { inject } from '@adonisjs/core'
+import { UUID } from 'node:crypto'
+
+@inject()
+export default class AdminPostReportService {
+  constructor(
+    private readonly userService: UserService,
+    private readonly postService: PostsService
+  ) {}
+
+  async index(
+    currentUserId: UUID,
+    filters: Record<'reason' | 'status', string[] | null>,
+    currentPage: number
+  ): Promise<PaginatedResponse<PostReportResponse>> {
+    let query = PostReport.query()
+      .orderBy('updated_at', 'desc')
+      .preload('post', (post) => {
+        post.preload('user')
+        post.withCount('reports', (q) => q.as('reportsCount'))
+      })
+      .preload('user')
+
+    if (filters.reason) {
+      query.whereIn('reason', filters.reason)
+    }
+
+    if (filters.status) {
+      query.whereIn('status', filters.status)
+    }
+
+    const result = await query.paginate(currentPage, 10)
+
+    const { meta } = result.toJSON()
+
+    const serialized = []
+    for (const record of result) {
+      const resource = await this.serialize(currentUserId, record)
+      serialized.push(resource)
+    }
+
+    return {
+      data: serialized,
+      meta,
+    }
+  }
+
+  private async serialize(currentUserId: UUID, report: PostReport): Promise<PostReportResponse> {
+    const user = await this.userService.serialize(report.user)
+    const post = await this.postService.serialize(currentUserId, report.post)
+    const data = report.toJSON()
+
+    const resource: PostReportResponse = {
+      id: report.id,
+      postId: data.postId,
+      userId: data.userId,
+      reason: data.reason,
+      status: data.status,
+      description: data.description,
+      post: { ...post, reportCount: report.post.$extras.reportsCount },
+      user,
+      updatedAt: data.updatedAt,
+      createdAt: data.createdAt,
+    }
+    return resource
+  }
+}
diff --git a/app/services/posts_service.ts b/app/services/posts_service.ts
index 324e938..24d5fc9 100644
--- a/app/services/posts_service.ts
+++ b/app/services/posts_service.ts
@@ -56,6 +56,7 @@ export default class PostsService {
    */
   async findOne(id: UUID): Promise<Post | null> {
     const result: Post[] | null = await Post.query()
+      .withScopes((scope) => scope.visible())
       .where('id', id)
       .preload('user')
       .preload('reactions')
@@ -72,6 +73,7 @@ export default class PostsService {
   ): Promise<PaginatedResponse<PostResponse>> {
     const result = await Post.query()
       .where('user_id', userId)
+      .withScopes((scope) => scope.visible())
       .orderBy('updated_at', 'desc')
       .preload('user')
       .preload('reactions')
diff --git a/app/validators/post_report.ts b/app/validators/post_report.ts
index 2209ce4..3522762 100644
--- a/app/validators/post_report.ts
+++ b/app/validators/post_report.ts
@@ -1,4 +1,4 @@
-import { PostReportReason } from '#enums/post'
+import { PostReportReason, PostReportStatus } from '#enums/post'
 import vine from '@vinejs/vine'
 
 /**
@@ -10,3 +10,12 @@ export const postReportValidator = vine.compile(
     description: vine.string(),
   })
 )
+
+/**
+ * Validates the administrator post-report update action payload
+ */
+export const adminUpdatePostReportValidator = vine.compile(
+  vine.object({
+    status: vine.enum([PostReportStatus.ACCEPTED, PostReportStatus.REJECTED]),
+  })
+)
diff --git a/config/inertia.ts b/config/inertia.ts
index 575510c..d3957c5 100644
--- a/config/inertia.ts
+++ b/config/inertia.ts
@@ -22,6 +22,7 @@ const inertiaConfig = defineConfig({
         return null
       }
     },
+    queryParams: (ctx) => ctx.request.qs(),
     errors: (ctx) => ctx.session?.flashMessages.get('errors'),
   },
 
diff --git a/database/factories/user_factory.ts b/database/factories/user_factory.ts
index 08fae66..5b98c83 100644
--- a/database/factories/user_factory.ts
+++ b/database/factories/user_factory.ts
@@ -1,15 +1,17 @@
 import factory from '@adonisjs/lucid/factories'
-import User from '#models/user'
+import User, { AccountRole } from '#models/user'
 import { PostFactory } from '#database/factories/post_factory'
 
 export const UserFactory = factory
   .define(User, async ({ faker }) => {
     return {
+      role: AccountRole.USER,
       name: faker.person.firstName(),
       surname: faker.person.lastName(),
       email: faker.internet.email(),
       password: faker.internet.password(),
     }
   })
+  .state('admin', (user) => (user.role = AccountRole.ADMIN))
   .relation('posts', () => PostFactory)
   .build()
diff --git a/database/migrations/1732037163235_create_add_uniqueness_to_post_reports_and_delete_cascades_table.ts b/database/migrations/1732037163235_create_add_uniqueness_to_post_reports_and_delete_cascades_table.ts
new file mode 100644
index 0000000..cb749a2
--- /dev/null
+++ b/database/migrations/1732037163235_create_add_uniqueness_to_post_reports_and_delete_cascades_table.ts
@@ -0,0 +1,21 @@
+import { BaseSchema } from '@adonisjs/lucid/schema'
+
+export default class extends BaseSchema {
+  protected tableName = 'post_reports'
+
+  async up() {
+    this.schema.alterTable(this.tableName, (table) => {
+      table.dropForeign('post_id');
+      table.uuid('post_id').references('posts.id').notNullable().onDelete('CASCADE').alter()
+      table.unique(['user_id', 'post_id'])
+    })
+  }
+
+  async down() {
+    this.schema.alterTable(this.tableName, (table) => {
+      table.dropForeign('post_id');
+      table.uuid('post_id').references('posts.id').notNullable().alter()
+      table.dropUnique(['user_id', 'post_id'])
+    })
+  }
+}
diff --git a/inertia/app/admin_layout.tsx b/inertia/app/admin_layout.tsx
index 132e6a6..98d2bc9 100644
--- a/inertia/app/admin_layout.tsx
+++ b/inertia/app/admin_layout.tsx
@@ -13,7 +13,7 @@ export default function AdminLayout({ children }: { children: ReactNode }) {
     <>
       <link rel="icon" type="image/svg+xml" href={favicon} />
       <NavBar user={user} />
-      <div className="container flex justify-start pt-20">{children}</div>
+      <div className="flex flex-col justify-start pt-20">{children}</div>
       <Toaster />
     </>
   )
diff --git a/inertia/app/app.tsx b/inertia/app/app.tsx
index b1c1a02..41da93b 100644
--- a/inertia/app/app.tsx
+++ b/inertia/app/app.tsx
@@ -8,11 +8,11 @@ import { resolvePageComponent } from '@adonisjs/inertia/helpers'
 import Layout from '@/app/layout'
 import AdminLayout from '@/app/admin_layout'
 
-const appName = import.meta.env.VITE_APP_NAME || 'AdonisJS'
+const appName = import.meta.env.VITE_APP_NAME
 
 createInertiaApp({
   progress: { color: '#5468FF' },
-  title: (title: string) => `${title} - ${appName}`,
+  title: (title: string) => `${appName} ${!!title && '|'} ${title}`,
   resolve: async (name: string) => {
     const page: any = await resolvePageComponent(
       `../pages/${name}.tsx`,
diff --git a/inertia/components/admin/generic/nav.tsx b/inertia/components/admin/generic/nav.tsx
index d078f26..2239bea 100644
--- a/inertia/components/admin/generic/nav.tsx
+++ b/inertia/components/admin/generic/nav.tsx
@@ -12,8 +12,9 @@ import {
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
 import { Button } from '@/components/ui/button'
 import AdonisLogo from '@/components/svg/logo'
-import { UserResponse } from '#interfaces/user'
 import { cn } from '@/lib/utils'
+import { UserResponse } from '#interfaces/user'
+import { PostReportStatus } from '#enums/post'
 
 export default function NavBar({ user }: { user: UserResponse | null }) {
   const LINKS: Record<'title' | 'link', string>[] = [
@@ -23,7 +24,8 @@ export default function NavBar({ user }: { user: UserResponse | null }) {
     },
     {
       title: 'Reports',
-      link: '/admin/index',
+      // FIX-ME: izzy.
+      link: `/admin/posts/reports?status[]=${PostReportStatus.PENDING}`,
     },
   ]
 
@@ -37,6 +39,7 @@ export default function NavBar({ user }: { user: UserResponse | null }) {
               <Link
                 key={`link-${index}`}
                 href={link}
+                except={['user']}
                 className="text-white text-sm font-medium transition-colors hover:text-primary"
               >
                 {title}
diff --git a/inertia/components/posts/feed_list.tsx b/inertia/components/posts/feed_list.tsx
index 434a422..9ef3b12 100644
--- a/inertia/components/posts/feed_list.tsx
+++ b/inertia/components/posts/feed_list.tsx
@@ -33,6 +33,7 @@ export default function FeedList({
       `${url}${meta.nextPageUrl}`,
       {},
       {
+        only: ['posts'],
         preserveState: true,
         preserveScroll: true,
         onSuccess: () => {
diff --git a/inertia/components/posts/post_card.tsx b/inertia/components/posts/post_card.tsx
index 17384d2..4bceb72 100644
--- a/inertia/components/posts/post_card.tsx
+++ b/inertia/components/posts/post_card.tsx
@@ -26,9 +26,9 @@ import { AttachmentResponse } from 'app/interfaces/attachment'
 import { formatDistanceToNow } from 'date-fns'
 import { PostReactionType } from '#enums/post'
 import { HoverCard, HoverCardContent, HoverCardTrigger } from '@/components/ui/hover_card'
-import type { UUID } from 'node:crypto'
 import { UserResponse } from '#interfaces/user'
 import { ReportPost } from '@/components/posts/report'
+import type { UUID } from 'node:crypto'
 
 const userLink = (id: UUID) => `/users/${id}`
 const postLink = (id: UUID) => `/posts/${id}`
@@ -196,9 +196,11 @@ function PostGallery({ attachments }: { attachments: AttachmentResponse[] }) {
 }
 
 function PostReaction({
+  actions,
   post,
   currentUser,
 }: {
+  actions: boolean
   post: PostResponse
   currentUser: UserResponse | null
 }) {
@@ -280,35 +282,44 @@ function PostReaction({
 
   return (
     <div className="flex flex-row gap-2 items-center">
-      <HoverCard>
-        <HoverCardTrigger>
-          <button
-            className={`trigger-user-post-react border rounded-full px-2 cursor-pointer ${reaction.type ? 'bg-blue-100 border-blue-400 hover:bg-blue-400-200' : 'bg-slate-50 border-slate-400 hover:bg-slate-200'}`}
-            disabled={isSubmitting}
-          >
-            {reaction.type ? REACTIONS[reaction.type] : '+'}
-          </button>
-        </HoverCardTrigger>
-        <HoverCardContent
-          align="start"
-          side="top"
-          className="flex flex-row divide-x divide-dashed gap-2 px-2 py-1 w-auto"
-        >
-          {Object.entries(REACTIONS).map(([key, value]: [key: string, value: string]) => (
+      {actions ? (
+        <HoverCard>
+          <HoverCardTrigger>
             <button
-              key={`reaction_${key}`}
-              type="button"
-              className={`react-${key.toLowerCase()} flex flex-row gap-1 p-1 justify-center items-center`}
-              onClick={() => reactToPost(key as PostReactionType)}
+              className={`trigger-user-post-react border rounded-full px-2 cursor-pointer ${reaction.type ? 'bg-blue-100 border-blue-400 hover:bg-blue-400-200' : 'bg-slate-50 border-slate-400 hover:bg-slate-200'}`}
+              disabled={isSubmitting}
             >
-              <p className="text-md hover:scale-110 duration-150">{value}</p>
-              <span className="text-xs text-gray-700">
-                {reactionCounts[key as PostReactionType]}
-              </span>
+              {reaction.type ? REACTIONS[reaction.type] : '+'}
             </button>
-          ))}
-        </HoverCardContent>
-      </HoverCard>
+          </HoverCardTrigger>
+          <HoverCardContent
+            align="start"
+            side="top"
+            className="flex flex-row divide-x divide-dashed gap-2 px-2 py-1 w-auto"
+          >
+            {Object.entries(REACTIONS).map(([key, value]: [key: string, value: string]) => (
+              <button
+                key={`reaction_${key}`}
+                type="button"
+                className={`react-${key.toLowerCase()} flex flex-row gap-1 p-1 justify-center items-center`}
+                onClick={actions ? () => reactToPost(key as PostReactionType) : () => {}}
+              >
+                <p className="text-md hover:scale-110 duration-150">{value}</p>
+                <span className="text-xs text-gray-700">
+                  {reactionCounts[key as PostReactionType]}
+                </span>
+              </button>
+            ))}
+          </HoverCardContent>
+        </HoverCard>
+      ) : (
+        <button
+          className={`border rounded-full cursor-not-allowed px-2 ${reaction.type ? 'bg-blue-100 border-blue-400' : 'bg-slate-50 border-slate-400 '}`}
+          disabled={true}
+        >
+          {reaction.type ? REACTIONS[reaction.type] : '+'}
+        </button>
+      )}
       <p className="user-post-react-status text-xs text-slate-500">{countStatus}</p>
     </div>
   )
@@ -316,10 +327,10 @@ function PostReaction({
 
 function PostActions({
   post,
-  habilities,
+  abilities,
 }: {
   post: PostResponse
-  habilities: Partial<Array<'update' | 'delete' | 'report'>>
+  abilities: Partial<Array<'update' | 'delete' | 'report'>>
 }) {
   const actions: Record<'update' | 'delete' | 'report', () => ReactElement> = {
     update: () => (
@@ -372,7 +383,7 @@ function PostActions({
       </DropdownMenuTrigger>
       <DropdownMenuContent className="w-auto" align="end" forceMount>
         {Object.entries(actions).map(([action, Element], index) => {
-          if (habilities.includes(action as 'update' | 'delete' | 'report')) {
+          if (abilities.includes(action as 'update' | 'delete' | 'report')) {
             return (
               <DropdownMenuItem
                 key={`${post.id}_${action}_${index}`}
@@ -428,7 +439,7 @@ export default function PostCard({
         {actions && (
           <PostActions
             post={post}
-            habilities={post.user.id !== user?.id ? ['report'] : ['update', 'delete']}
+            abilities={post.user.id !== user?.id ? ['report'] : ['update', 'delete']}
           />
         )}
       </div>
@@ -450,7 +461,7 @@ export default function PostCard({
       </div>
 
       <div className="py-4 opacity-70 border-t border-t-gray-200">
-        <PostReaction post={post} currentUser={user} />
+        <PostReaction actions={actions} post={post} currentUser={user} />
       </div>
     </article>
   )
diff --git a/inertia/components/ui/command.tsx b/inertia/components/ui/command.tsx
new file mode 100644
index 0000000..68e22e7
--- /dev/null
+++ b/inertia/components/ui/command.tsx
@@ -0,0 +1,141 @@
+import * as React from 'react'
+import { type DialogProps } from '@radix-ui/react-dialog'
+import { Command as CommandPrimitive } from 'cmdk'
+import { Search } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+import { Dialog, DialogContent } from '@/components/ui/dialog'
+
+const Command = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive
+    ref={ref}
+    className={cn(
+      'flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground',
+      className
+    )}
+    {...props}
+  />
+))
+Command.displayName = CommandPrimitive.displayName
+
+const CommandDialog = ({ children, ...props }: DialogProps) => {
+  return (
+    <Dialog {...props}>
+      <DialogContent className="overflow-hidden p-0">
+        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+const CommandInput = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Input>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
+>(({ className, ...props }, ref) => (
+  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
+    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    <CommandPrimitive.Input
+      ref={ref}
+      className={cn(
+        'flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
+        className
+      )}
+      {...props}
+    />
+  </div>
+))
+
+CommandInput.displayName = CommandPrimitive.Input.displayName
+
+const CommandList = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.List
+    ref={ref}
+    className={cn('max-h-[300px] overflow-y-auto overflow-x-hidden', className)}
+    {...props}
+  />
+))
+
+CommandList.displayName = CommandPrimitive.List.displayName
+
+const CommandEmpty = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Empty>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
+>((props, ref) => (
+  <CommandPrimitive.Empty ref={ref} className="py-6 text-center text-sm" {...props} />
+))
+
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName
+
+const CommandGroup = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Group>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Group
+    ref={ref}
+    className={cn(
+      'overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground',
+      className
+    )}
+    {...props}
+  />
+))
+
+CommandGroup.displayName = CommandPrimitive.Group.displayName
+
+const CommandSeparator = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Separator
+    ref={ref}
+    className={cn('-mx-1 h-px bg-border', className)}
+    {...props}
+  />
+))
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName
+
+const CommandItem = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Item
+    ref={ref}
+    className={cn(
+      'relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+      className
+    )}
+    {...props}
+  />
+))
+
+CommandItem.displayName = CommandPrimitive.Item.displayName
+
+const CommandShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn('ml-auto text-xs tracking-widest text-muted-foreground', className)}
+      {...props}
+    />
+  )
+}
+CommandShortcut.displayName = 'CommandShortcut'
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+}
diff --git a/inertia/components/ui/multi_select.tsx b/inertia/components/ui/multi_select.tsx
new file mode 100644
index 0000000..a3def5b
--- /dev/null
+++ b/inertia/components/ui/multi_select.tsx
@@ -0,0 +1,342 @@
+import * as React from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { CheckIcon, ChevronDown, XIcon, WandSparkles, X } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+} from '@/components/ui/command'
+
+/**
+ * Variants for the multi-select component to handle different styles.
+ * Uses class-variance-authority (cva) to define different styles based on "variant" prop.
+ */
+const multiSelectVariants = cva(
+  'm-1 transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300',
+  {
+    variants: {
+      variant: {
+        default: 'border-foreground/10 text-foreground bg-card hover:bg-card/80',
+        secondary:
+          'border-foreground/10 bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        destructive:
+          'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
+        inverted: 'inverted',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+)
+
+/**
+ * Props for MultiSelect component
+ */
+interface MultiSelectProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof multiSelectVariants> {
+  /**
+   * An array of option objects to be displayed in the multi-select component.
+   * Each option object has a label, value, and an optional icon.
+   */
+  options: {
+    /** The text to display for the option. */
+    label: string
+    /** The unique value associated with the option. */
+    value: string
+    /** Optional icon component to display alongside the option. */
+    icon?: React.ComponentType<{ className?: string }>
+  }[]
+
+  /**
+   * Callback function triggered when the selected values change.
+   * Receives an array of the new selected values.
+   */
+  onValueChange: (value: string[]) => void
+
+  /** The default selected values when the component mounts. */
+  defaultValue?: string[]
+
+  /**
+   * Placeholder text to be displayed when no values are selected.
+   * Optional, defaults to "Select options".
+   */
+  placeholder?: string
+
+  /**
+   * Animation duration in seconds for the visual effects (e.g., bouncing badges).
+   * Optional, defaults to 0 (no animation).
+   */
+  animation?: number
+
+  /**
+   * Maximum number of items to display. Extra selected items will be summarized.
+   * Optional, defaults to 3.
+   */
+  maxCount?: number
+
+  /**
+   * The modality of the popover. When set to true, interaction with outside elements
+   * will be disabled and only popover content will be visible to screen readers.
+   * Optional, defaults to false.
+   */
+  modalPopover?: boolean
+
+  /**
+   * If true, renders the multi-select component as a child of another component.
+   * Optional, defaults to false.
+   */
+  asChild?: boolean
+
+  /**
+   * Additional class names to apply custom styles to the multi-select component.
+   * Optional, can be used to add custom styles.
+   */
+  className?: string
+}
+
+export const MultiSelect = React.forwardRef<HTMLButtonElement, MultiSelectProps>(
+  (
+    {
+      options,
+      onValueChange,
+      variant,
+      defaultValue = [],
+      placeholder = 'Select options',
+      animation = 0,
+      maxCount = 3,
+      modalPopover = false,
+      asChild = false,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    const [selectedValues, setSelectedValues] = React.useState<string[]>(defaultValue)
+    const [isPopoverOpen, setIsPopoverOpen] = React.useState(false)
+    const [isAnimating, setIsAnimating] = React.useState(false)
+
+    const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+      if (event.key === 'Enter') {
+        setIsPopoverOpen(true)
+      } else if (event.key === 'Backspace' && !event.currentTarget.value) {
+        const newSelectedValues = [...selectedValues]
+        newSelectedValues.pop()
+        setSelectedValues(newSelectedValues)
+        onValueChange(newSelectedValues)
+      }
+    }
+
+    const toggleOption = (option: string) => {
+      const newSelectedValues = selectedValues.includes(option)
+        ? selectedValues.filter((value) => value !== option)
+        : [...selectedValues, option]
+      setSelectedValues(newSelectedValues)
+      onValueChange(newSelectedValues)
+    }
+
+    const handleClear = () => {
+      setSelectedValues([])
+      onValueChange([])
+    }
+
+    const handleTogglePopover = () => {
+      setIsPopoverOpen((prev) => !prev)
+    }
+
+    const clearExtraOptions = () => {
+      const newSelectedValues = selectedValues.slice(0, maxCount)
+      setSelectedValues(newSelectedValues)
+      onValueChange(newSelectedValues)
+    }
+
+    const toggleAll = () => {
+      if (selectedValues.length === options.length) {
+        handleClear()
+      } else {
+        const allValues = options.map((option) => option.value)
+        setSelectedValues(allValues)
+        onValueChange(allValues)
+      }
+    }
+
+    return (
+      <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen} modal={modalPopover}>
+        <PopoverTrigger asChild>
+          <Button
+            ref={ref}
+            {...props}
+            onClick={handleTogglePopover}
+            className={cn(
+              'flex w-full p-1 rounded-md border min-h-10 h-auto items-center justify-between bg-inherit hover:bg-inherit',
+              className
+            )}
+          >
+            {selectedValues.length > 0 ? (
+              <div className="flex justify-between items-center w-full">
+                <div className="flex flex-wrap items-center">
+                  {selectedValues.slice(0, maxCount).map((value) => {
+                    const option = options.find((o) => o.value === value)
+                    const IconComponent = option?.icon
+                    return (
+                      <div
+                        key={value}
+                        className={cn(
+                          isAnimating ? 'animate-bounce' : '',
+                          'flex flex-row gap-2 border rounded-md items-center px-2',
+                          multiSelectVariants({ variant })
+                        )}
+                        style={{ animationDuration: `${animation}s` }}
+                      >
+                        {IconComponent && <IconComponent className="h-4 w-4 mr-2" />}
+                        {option?.label}
+                        <X
+                          size={12}
+                          className="ml-2 cursor-pointer"
+                          onClick={(event) => {
+                            event.stopPropagation()
+                            toggleOption(value)
+                          }}
+                        />
+                      </div>
+                    )
+                  })}
+                  {selectedValues.length > maxCount && (
+                    <div
+                      className={cn(
+                        'flex flex-row place-items-center gap-1 bg-transparent text-foreground border-foreground/1 hover:bg-transparent',
+                        isAnimating ? 'animate-bounce' : '',
+                        multiSelectVariants({ variant })
+                      )}
+                      style={{ animationDuration: `${animation}s` }}
+                    >
+                      {`+ ${selectedValues.length - maxCount} more`}
+                      <X
+                        size={14}
+                        className="ml-2 cursor-pointer"
+                        onClick={(event) => {
+                          event.stopPropagation()
+                          clearExtraOptions()
+                        }}
+                      />
+                    </div>
+                  )}
+                </div>
+                <div className="flex items-center justify-between">
+                  <XIcon
+                    className="h-4 mx-2 cursor-pointer text-muted-foreground"
+                    onClick={(event) => {
+                      event.stopPropagation()
+                      handleClear()
+                    }}
+                  />
+                  <hr />
+                  <ChevronDown className="h-4 mx-2 cursor-pointer text-muted-foreground" />
+                </div>
+              </div>
+            ) : (
+              <div className="flex items-center justify-between w-full mx-auto">
+                <span className="text-sm text-muted-foreground mx-3">{placeholder}</span>
+                <ChevronDown className="h-4 cursor-pointer text-muted-foreground mx-2" />
+              </div>
+            )}
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent
+          className="w-auto p-0"
+          align="start"
+          onEscapeKeyDown={() => setIsPopoverOpen(false)}
+        >
+          <Command>
+            <CommandInput placeholder="Search..." onKeyDown={handleInputKeyDown} />
+            <CommandList>
+              <CommandEmpty>No results found.</CommandEmpty>
+              <CommandGroup>
+                <CommandItem key="all" onSelect={toggleAll} className="cursor-pointer">
+                  <div
+                    className={cn(
+                      'mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary',
+                      selectedValues.length === options.length
+                        ? 'bg-primary text-primary-foreground'
+                        : 'opacity-50 [&_svg]:invisible'
+                    )}
+                  >
+                    <CheckIcon className="h-4 w-4" />
+                  </div>
+                  <span>(Select All)</span>
+                </CommandItem>
+                {options.map((option) => {
+                  const isSelected = selectedValues.includes(option.value)
+                  return (
+                    <CommandItem
+                      key={option.value}
+                      onSelect={() => toggleOption(option.value)}
+                      className="cursor-pointer"
+                    >
+                      <div
+                        className={cn(
+                          'mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary',
+                          isSelected
+                            ? 'bg-primary text-primary-foreground'
+                            : 'opacity-50 [&_svg]:invisible'
+                        )}
+                      >
+                        <CheckIcon className="h-4 w-4" />
+                      </div>
+                      {option.icon && (
+                        <option.icon className="mr-2 h-4 w-4 text-muted-foreground" />
+                      )}
+                      <span>{option.label}</span>
+                    </CommandItem>
+                  )
+                })}
+              </CommandGroup>
+              <CommandSeparator />
+              <CommandGroup>
+                <div className="flex items-center justify-between">
+                  {selectedValues.length > 0 && (
+                    <>
+                      <CommandItem
+                        onSelect={handleClear}
+                        className="flex-1 justify-center cursor-pointer"
+                      >
+                        Clear
+                      </CommandItem>
+                      <hr />
+                    </>
+                  )}
+                  <CommandItem
+                    onSelect={() => setIsPopoverOpen(false)}
+                    className="flex-1 justify-center cursor-pointer max-w-full"
+                  >
+                    Close
+                  </CommandItem>
+                </div>
+              </CommandGroup>
+            </CommandList>
+          </Command>
+        </PopoverContent>
+        {animation > 0 && selectedValues.length > 0 && (
+          <WandSparkles
+            className={cn(
+              'cursor-pointer my-2 text-foreground bg-background w-3 h-3',
+              isAnimating ? '' : 'text-muted-foreground'
+            )}
+            onClick={() => setIsAnimating(!isAnimating)}
+          />
+        )}
+      </Popover>
+    )
+  }
+)
+
+MultiSelect.displayName = 'MultiSelect'
diff --git a/inertia/components/ui/pagination.tsx b/inertia/components/ui/pagination.tsx
new file mode 100644
index 0000000..1a2eda6
--- /dev/null
+++ b/inertia/components/ui/pagination.tsx
@@ -0,0 +1,148 @@
+import * as React from 'react'
+import { ChevronLeft, ChevronRight, MoreHorizontal } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+import { ButtonProps, buttonVariants } from '@/components/ui/button'
+import { MetaResponse } from '#interfaces/pagination'
+import { InertiaLinkProps, Link } from '@inertiajs/react'
+
+const Pagination = ({ className, ...props }: React.ComponentProps<'nav'>) => (
+  <nav
+    role="navigation"
+    aria-label="pagination"
+    className={cn('mx-auto w-full flex justify-center', className)}
+    {...props}
+  />
+)
+Pagination.displayName = 'Pagination'
+
+const PaginationContent = React.forwardRef<HTMLUListElement, React.ComponentProps<'ul'>>(
+  ({ className, ...props }, ref) => (
+    <ul ref={ref} className={cn('flex flex-row items-center gap-1', className)} {...props} />
+  )
+)
+PaginationContent.displayName = 'PaginationContent'
+
+const PaginationItem = React.forwardRef<HTMLLIElement, React.ComponentProps<'li'>>(
+  ({ className, ...props }, ref) => <li ref={ref} className={cn('', className)} {...props} />
+)
+PaginationItem.displayName = 'PaginationItem'
+
+type PaginationLinkProps = {
+  isActive?: boolean
+} & Pick<ButtonProps, 'size'> &
+  React.ComponentProps<'a'> &
+  Omit<InertiaLinkProps, 'size'>
+
+const PaginationLink = ({ className, isActive, size = 'icon', ...props }: PaginationLinkProps) => (
+  <Link
+    except={['user']}
+    aria-current={isActive ? 'page' : undefined}
+    className={cn(
+      buttonVariants({
+        variant: isActive ? 'outline' : 'ghost',
+        size,
+      }),
+      className
+    )}
+    {...props}
+  />
+)
+PaginationLink.displayName = 'PaginationLink'
+
+const PaginationPrevious = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink
+    aria-label="Go to previous page"
+    size="default"
+    className={cn('gap-1 pl-2.5', className)}
+    {...props}
+  >
+    <ChevronLeft className="h-4 w-4" />
+    <span>Previous</span>
+  </PaginationLink>
+)
+PaginationPrevious.displayName = 'PaginationPrevious'
+
+const PaginationNext = ({ className, ...props }: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink
+    aria-label="Go to next page"
+    size="default"
+    className={cn('gap-1 pr-2.5', className)}
+    {...props}
+  >
+    <span>Next</span>
+    <ChevronRight className="h-4 w-4" />
+  </PaginationLink>
+)
+PaginationNext.displayName = 'PaginationNext'
+
+const PaginationEllipsis = ({ className, ...props }: React.ComponentProps<'span'>) => (
+  <span
+    aria-hidden
+    className={cn('flex h-9 w-9 items-center justify-center', className)}
+    {...props}
+  >
+    <MoreHorizontal className="h-4 w-4" />
+    <span className="sr-only">More pages</span>
+  </span>
+)
+PaginationEllipsis.displayName = 'PaginationEllipsis'
+
+const DefaultPaginator = ({
+  meta,
+  className,
+  baseUrl,
+}: {
+  meta: MetaResponse
+  baseUrl: string
+  className?: React.ComponentProps<'nav'>['className']
+}) => {
+  return (
+    <div className="default-paginator flex flex-col gap-0 w-full text-center border-t border-t-gray-100 mt-2">
+      <p className="default-paginator-total text-slate-400 pt-2 mt-2 text-sm">
+        {meta.total} records
+      </p>
+      <Pagination className={cn('w-full', className)}>
+        <PaginationContent>
+          <PaginationItem>
+            <PaginationPrevious
+              href={meta?.previousPageUrl ? baseUrl + meta?.previousPageUrl : '#'}
+            />
+          </PaginationItem>
+          <PaginationItem>
+            <PaginationLink href={baseUrl + meta?.firstPageUrl}>{meta.firstPage}</PaginationLink>
+          </PaginationItem>
+          <PaginationItem>
+            <PaginationEllipsis />
+          </PaginationItem>
+          {meta.lastPage > 1 && (
+            <PaginationItem>
+              <PaginationLink href={baseUrl + meta?.lastPageUrl || '#'}>
+                {meta.lastPage}
+              </PaginationLink>
+            </PaginationItem>
+          )}
+          <PaginationItem className={cn(!meta?.nextPageUrl && 'opacity-30 cursor-not-allowed')}>
+            <PaginationNext href={meta?.nextPageUrl ? baseUrl + meta?.nextPageUrl : '#'} />
+          </PaginationItem>
+        </PaginationContent>
+      </Pagination>
+    </div>
+  )
+}
+
+DefaultPaginator.displayName = 'DefaultPaginator'
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationLink,
+  PaginationItem,
+  PaginationPrevious,
+  PaginationNext,
+  PaginationEllipsis,
+  DefaultPaginator,
+}
diff --git a/inertia/components/ui/popover.tsx b/inertia/components/ui/popover.tsx
new file mode 100644
index 0000000..630521f
--- /dev/null
+++ b/inertia/components/ui/popover.tsx
@@ -0,0 +1,31 @@
+import * as React from 'react'
+import * as PopoverPrimitive from '@radix-ui/react-popover'
+
+import { cn } from '@/lib/utils'
+
+const Popover = PopoverPrimitive.Root
+
+const PopoverTrigger = PopoverPrimitive.Trigger
+
+const PopoverAnchor = PopoverPrimitive.Anchor
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        className
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+))
+PopoverContent.displayName = PopoverPrimitive.Content.displayName
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }
diff --git a/inertia/pages/admin/index.tsx b/inertia/pages/admin/index.tsx
index 0c9d79d..8e354db 100644
--- a/inertia/pages/admin/index.tsx
+++ b/inertia/pages/admin/index.tsx
@@ -1,10 +1,13 @@
+import { Head } from '@inertiajs/react'
 import AdminUsersController from '#controllers/admin_users_controller'
-import { InferPageProps } from '@adonisjs/inertia/types'
+import AdminPageHeader from '@/pages/admin/page_header'
+import type { InferPageProps } from '@adonisjs/inertia/types'
 
 export default function Index({ user }: InferPageProps<AdminUsersController, 'show'>) {
   return (
-    <div>
-      Hello {user?.name} {user?.role}
-    </div>
+    <>
+      <Head title={`${user?.name}'s dashboard`} />
+      <AdminPageHeader title="Dashboard" description={`Hello ${user?.name}.`} />
+    </>
   )
 }
diff --git a/inertia/pages/admin/page_header.tsx b/inertia/pages/admin/page_header.tsx
new file mode 100644
index 0000000..c2feb31
--- /dev/null
+++ b/inertia/pages/admin/page_header.tsx
@@ -0,0 +1,27 @@
+import React from 'react'
+
+export default function AdminPageHeader({
+  title,
+  children,
+  description,
+}: {
+  title: string
+  description?: string
+  children?: React.ReactNode
+}) {
+  return (
+    <div className="flex flex-col justify-start relative lg:h-52 pb-5 text-left w-full border-b border-b-gray-200 bg-gray-100">
+      <div className="w-full container items-stretch">
+        <div className="flex flex-col gap-2">
+          <h2 className="text-2xl font-semibold text-gray-900 touch-pan-right">{title}</h2>
+          <h6 className="text-sm font-normal text-gray-700 truncate line-clamp-2">{description}</h6>
+        </div>
+        {children && (
+          <div className="flex flex-col gap-4 min-h-24 w-full justify-end mt-6 lg:mt-0">
+            {children}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
diff --git a/inertia/pages/admin/post_reports/index.tsx b/inertia/pages/admin/post_reports/index.tsx
new file mode 100644
index 0000000..cc191c9
--- /dev/null
+++ b/inertia/pages/admin/post_reports/index.tsx
@@ -0,0 +1,373 @@
+import { FormEvent, SetStateAction, useMemo, useState } from 'react'
+import { formatDistanceToNow } from 'date-fns'
+import AdminPostReportsController from '#controllers/admin_post_reports_controller'
+import { PostReportReason, PostReportStatus } from '#enums/post'
+import { Button } from '@/components/ui/button'
+import { Card } from '@/components/ui/card'
+import { Label } from '@/components/ui/label'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog'
+import { DefaultPaginator } from '@/components/ui/pagination'
+import { cn } from '@/lib/utils'
+import { Head, useForm, router } from '@inertiajs/react'
+import { CheckCheck, ExternalLink, ListTodo, SlidersVertical, TextSearch } from 'lucide-react'
+import { MultiSelect } from '@/components/ui/multi_select'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+import PostCard from '@/components/posts/post_card'
+import { UserResponse } from '#interfaces/user'
+import { PostReportResponse } from '#interfaces/post'
+import type { InferPageProps } from '@adonisjs/inertia/types'
+import AdminPageHeader from '@/pages/admin/page_header'
+
+// FIX-ME: izzy
+const pageURL = '/admin/posts/reports'
+
+function Update({
+  currentUser,
+  report,
+  open,
+  onOpenChange,
+}: {
+  currentUser: UserResponse
+  report: PostReportResponse
+  open: boolean
+  onOpenChange: React.Dispatch<SetStateAction<boolean>>
+}) {
+  const { data, setData, processing, reset } = useForm<{
+    status: string
+  }>({
+    status: report.status,
+  })
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault()
+    // FIX-ME: izzy
+    router.put(
+      `${pageURL}/${report.id}`,
+      {
+        status: data.status,
+      },
+      {
+        replace: false,
+        only: ['reports'],
+        onFinish: () => {
+          onOpenChange(false)
+          reset()
+        },
+      }
+    )
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogTrigger asChild>trigger</DialogTrigger>
+      <DialogContent className="default-dialog">
+        <DialogHeader>
+          <DialogTitle>Manage content</DialogTitle>
+          <DialogDescription>Take action on the reported complaint</DialogDescription>
+        </DialogHeader>
+
+        <hr />
+
+        <div className="w-full pt-8 pb-4">
+          <PostCard post={report.post} user={currentUser} actions={false} />
+        </div>
+
+        <form
+          onSubmit={handleSubmit}
+          className={cn(processing ? 'opacity-20 pointer-events-none' : 'opacity-100')}
+        >
+          <div className="flex flex-col w-full gap-2 bg-gray-100 rounded-md p-4">
+            <Label htmlFor="reason" className="text-left">
+              Change status
+            </Label>
+            <Select
+              value={data.status}
+              onValueChange={(value: string) => setData({ status: value })}
+            >
+              <SelectTrigger className="select-reason bg-white">
+                <SelectValue id="status" placeholder="Update status" />
+              </SelectTrigger>
+              <SelectContent>
+                {Object.entries(PostReportStatus).map(([reason]) => (
+                  <SelectItem
+                    key={`post-report-${report.id}-reason-${reason.toLowerCase()}`}
+                    id={`reason-${reason.toLowerCase()}`}
+                    value={reason}
+                  >
+                    {reason.toLocaleLowerCase()}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+
+            {data.status === PostReportStatus.ACCEPTED && (
+              <div className="border border-red-200 bg-red-100 rounded-md mt-2 py-2 px-4">
+                <p className="text-sm text-red-500">
+                  This action will immediately hide the post from the others users feed.
+                </p>
+              </div>
+            )}
+
+            {data.status === PostReportStatus.REJECTED && (
+              <div className="border border-green-200 bg-green-100 rounded-md mt-2 py-2 px-4">
+                <p className="text-sm text-green-500">
+                  This action will discard the complaint, and notify the reporting user of the
+                  decision.
+                </p>
+              </div>
+            )}
+          </div>
+
+          <Button
+            className="mt-5"
+            loading={processing}
+            disabled={data.status === report.status}
+            type="submit"
+          >
+            Update
+          </Button>
+        </form>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+export default function Index({
+  queryParams,
+  user,
+  reports,
+}: InferPageProps<AdminPostReportsController, 'index'>) {
+  const [updatingReport, setUpdatingPost] = useState<PostReportResponse | null>(null)
+  const [openUpdateReport, setOpenUpdateReport] = useState(false)
+
+  const { data, setData } = useForm<{
+    reason: string[]
+    status: string[]
+  }>({
+    reason: queryParams?.reason || [],
+    status: queryParams?.status || [],
+  })
+
+  const emptyStateMessage = useMemo(() => {
+    if (
+      !queryParams?.reason &&
+      queryParams?.status?.length === 1 &&
+      queryParams?.status[0] === PostReportStatus.PENDING
+    ) {
+      return 'All done!'
+    }
+    return 'No records matching the search criteria.'
+  }, [queryParams])
+
+  async function handleSubmit(e: FormEvent) {
+    e.preventDefault()
+    router.get(
+      pageURL,
+      {
+        status: data.status,
+        reason: data.reason,
+      },
+      {
+        only: ['reports', 'queryParams'],
+        preserveState: false,
+      }
+    )
+  }
+
+  return (
+    <>
+      <Head title="Content moderation" />
+      <AdminPageHeader
+        title="Content Moderation"
+        description="Take actionable steps to recent user reported posts."
+      >
+        <form onSubmit={handleSubmit}>
+          <div className="flex flex-col lg:flex-row gap-4">
+            <div className="flex flex-col gap-2 w-full lg:w-96">
+              <Label htmlFor="reason" className="text-left">
+                Reason:
+              </Label>
+              <MultiSelect
+                id="reason"
+                defaultValue={data.reason}
+                maxCount={1}
+                placeholder="Filter by a reason"
+                className="bg-white"
+                options={Object.values(PostReportReason).map((reason) => {
+                  return {
+                    label: reason.toLocaleLowerCase(),
+                    value: reason,
+                  }
+                })}
+                value={data.reason}
+                onValueChange={(value) =>
+                  setData((prevState) => {
+                    return {
+                      ...prevState,
+                      reason: value,
+                    }
+                  })
+                }
+              />
+            </div>
+            <div className="flex flex-col gap-2 w-full lg:w-96">
+              <Label htmlFor="status" className="text-left">
+                Status:
+              </Label>
+              <MultiSelect
+                id="status"
+                defaultValue={data.status}
+                maxCount={1}
+                placeholder="Filter by status"
+                className="bg-white"
+                options={Object.values(PostReportStatus).map((status) => {
+                  return {
+                    label: status.toLocaleLowerCase(),
+                    value: status,
+                  }
+                })}
+                value={data.status}
+                onValueChange={(value) =>
+                  setData((prevState) => {
+                    return {
+                      ...prevState,
+                      status: value,
+                    }
+                  })
+                }
+              />
+            </div>
+
+            <Button type="submit" size="sm" className="self-end justify-end h-10">
+              <TextSearch />
+            </Button>
+          </div>
+        </form>
+      </AdminPageHeader>
+
+      <div className="container pt-5">
+        <Card className="w-full top-2">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead className="max-w-16">
+                  <Button type="button" size="sm-icon" variant="ghost">
+                    <ListTodo size={14} className="text-gray-600" />
+                  </Button>
+                </TableHead>
+                <TableHead className="max-w-16">Report date</TableHead>
+                <TableHead className="max-w-38">Reporting username</TableHead>
+                <TableHead className="max-w-24">Post</TableHead>
+                <TableHead className="min-w-32">N. Reports</TableHead>
+                <TableHead className="max-w-32">Description</TableHead>
+                <TableHead className="max-w-32">Reason</TableHead>
+                <TableHead className="text-right">Status</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {reports.data.length === 0 ? (
+                <TableRow>
+                  <TableCell colSpan={8} className="h-32 text-center">
+                    <p>{emptyStateMessage}</p>
+                  </TableCell>
+                </TableRow>
+              ) : (
+                reports.data.map((report: PostReportResponse) => (
+                  <TableRow key={report.id}>
+                    <TableCell className="font-medium truncate align-middle items-center justify-center">
+                      {report.status === PostReportStatus.PENDING ? (
+                        <Button
+                          className="report-update-action-trigger"
+                          type="button"
+                          size="sm-icon"
+                          variant="outline"
+                        >
+                          <SlidersVertical
+                            size={14}
+                            className="text-gray-600"
+                            onClick={() => {
+                              setUpdatingPost(report)
+                              setOpenUpdateReport(true)
+                            }}
+                          />
+                        </Button>
+                      ) : (
+                        <Button disabled={true} type="button" size="sm-icon" variant="ghost">
+                          <CheckCheck size={14} className="text-gray-600" />
+                        </Button>
+                      )}
+                    </TableCell>
+                    <TableCell className="font-medium truncate">
+                      {formatDistanceToNow(new Date(report.createdAt))} ago
+                    </TableCell>
+                    <TableCell className="font-medium truncate">{report.user.username}</TableCell>
+                    <TableCell className="font-medium">
+                      {/* // FIX-ME - izzy */}
+                      <a href={`/posts/${report.post.id}`} target="blank">
+                        <ExternalLink size={15} className="text-blue-400" />
+                      </a>
+                    </TableCell>
+                    <TableCell className="report-count font-medium truncate">
+                      {report.post.reportCount}
+                    </TableCell>
+                    <TableCell className="report-post-content font-medium truncate max-w-60">
+                      {report.post.content}
+                    </TableCell>
+                    <TableCell className="font-medium truncate">{report.reason}</TableCell>
+                    <TableCell className="report-status flex font-medium justify-end">
+                      <span
+                        className={cn(
+                          'font-medium text-xs text-white w-max rounded-sm px-2 py-1',
+                          report.status === PostReportStatus.ACCEPTED && 'bg-green-500',
+                          report.status === PostReportStatus.PENDING && 'bg-orange-500',
+                          report.status === PostReportStatus.REJECTED && 'bg-red-500'
+                        )}
+                      >
+                        {report.status}
+                      </span>
+                    </TableCell>
+                  </TableRow>
+                ))
+              )}
+            </TableBody>
+          </Table>
+          <DefaultPaginator
+            className="py-2"
+            meta={reports.meta}
+            baseUrl="/admin/posts/reports" // FIX-ME: izzy
+          />
+        </Card>
+
+        {updatingReport && (
+          <Update
+            currentUser={user!}
+            open={openUpdateReport}
+            onOpenChange={setOpenUpdateReport}
+            report={updatingReport}
+          />
+        )}
+      </div>
+    </>
+  )
+}
diff --git a/package.json b/package.json
index e293823..691d30e 100644
--- a/package.json
+++ b/package.json
@@ -81,6 +81,7 @@
     "@radix-ui/react-dropdown-menu": "^2.1.1",
     "@radix-ui/react-hover-card": "^1.1.2",
     "@radix-ui/react-label": "^2.1.0",
+    "@radix-ui/react-popover": "^1.1.2",
     "@radix-ui/react-select": "^2.1.2",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-toast": "^1.2.1",
@@ -90,6 +91,7 @@
     "autoprefixer": "^10.4.19",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
+    "cmdk": "^1.0.4",
     "date-fns": "^4.1.0",
     "edge.js": "^6.0.2",
     "lucide-react": "^0.400.0",
diff --git a/start/routes.ts b/start/routes.ts
index 8f2c9a8..85c9731 100644
--- a/start/routes.ts
+++ b/start/routes.ts
@@ -16,6 +16,7 @@ const UsersController = () => import('#controllers/users_controller')
 const PostReactionsController = () => import('#controllers/post_reactions_controller')
 const PostReportsController = () => import('#controllers/post_reports_controller')
 const AdminAuthController = () => import('#controllers/admin_auth_controller')
+const AdminPostReportsController = () => import('#controllers/admin_post_reports_controller')
 
 /**
  *
@@ -85,7 +86,7 @@ router
     router
       .group(() => {
         router.post('/sign-in', [AdminAuthController, 'show'])
-        router.on('/sign-in').renderInertia('admin/sign-in')
+        router.on('/sign-in').renderInertia('admin/sign_in')
       })
       .prefix('auth')
 
@@ -96,6 +97,13 @@ router
       .group(() => {
         router.delete('/auth/sign-out', [AdminAuthController, 'destroy'])
         router.on('/index').renderInertia('admin/index')
+
+        router
+          .group(() => {
+            router.get('reports', [AdminPostReportsController, 'index'])
+            router.put('reports/:id', [AdminPostReportsController, 'update'])
+          })
+          .prefix('posts')
       })
       .use(middleware.auth({ guards: ['admin-web'] }))
   })
diff --git a/tests/bootstrap.ts b/tests/bootstrap.ts
index 401762e..40ca2f4 100644
--- a/tests/bootstrap.ts
+++ b/tests/bootstrap.ts
@@ -33,7 +33,7 @@ export const plugins: Config['plugins'] = [
  * The teardown functions are executer after all the tests
  */
 export const runnerHooks: Required<Pick<Config, 'setup' | 'teardown'>> = {
-  setup: [],
+  setup: [() => testUtils.db().truncate()],
   teardown: [],
 }
 
diff --git a/tests/browser/admin_post_report.spec.ts b/tests/browser/admin_post_report.spec.ts
new file mode 100644
index 0000000..eb5e6d8
--- /dev/null
+++ b/tests/browser/admin_post_report.spec.ts
@@ -0,0 +1,112 @@
+import { UserFactory } from '#database/factories/user_factory'
+import { PostReportReason, PostReportStatus } from '#enums/post'
+import testUtils from '@adonisjs/core/services/test_utils'
+import { test } from '@japa/runner'
+
+test.group('Admin post report', (group) => {
+  // FIX-ME: Izzy
+  const url = '/admin/posts/reports'
+
+  group.each.setup(() => testUtils.db().truncate())
+
+  test('Successfully filters the report complaint list', async ({
+    browserContext,
+    assert,
+    visit,
+  }) => {
+    const adminUser = await UserFactory.apply('admin').create()!
+    const reportingUser = await UserFactory.create()!
+    const postingUser = await UserFactory.with('posts', 1).create()!
+
+    await browserContext.withGuard('admin-web').loginAs(adminUser)
+    const page = await visit(url)
+
+    const userPostReport = await UserFactory.with('posts', 1, (post) =>
+      post.with('reports', 1, (report) =>
+        report.merge({
+          userId: reportingUser.id!,
+          postId: postingUser.posts[0].id,
+          reason: PostReportReason.ADULTERY,
+          status: PostReportStatus.ACCEPTED,
+        })
+      )
+    ).create()
+
+    await page.locator('button#reason').click()
+    await page.getByText(PostReportReason.ADULTERY.toLowerCase(), { exact: true }).click()
+
+    await page.locator('button#status').click()
+    await page.getByText(PostReportStatus.ACCEPTED.toLowerCase(), { exact: true }).click()
+
+    await page.locator('form button').last().click()
+
+    const firstRow = page.locator('table tbody > tr').first()
+    const firstRowPostContent = await firstRow.locator('.report-post-content').textContent()
+    const paginatorContent = await page
+      .locator('p.default-paginator-total')
+      .textContent()
+      .then((value) => (value ? Number(value?.split(' ')[0]) : 0))
+    assert.equal(paginatorContent, 1)
+    assert.equal(firstRowPostContent, userPostReport.posts[0].content)
+  })
+
+  test('Successfully accepts a report complaint', async ({ assert, browserContext, visit }) => {
+    const adminUser = await UserFactory.apply('admin').create()!
+    const reportingUser = await UserFactory.create()!
+    const postingUser = await UserFactory.with('posts', 1).create()!
+    await UserFactory.with('posts', 1, (post) =>
+      post.with('reports', 1, (report) =>
+        report.merge({
+          userId: reportingUser.id!,
+          postId: postingUser.posts[0].id,
+          reason: PostReportReason.ADULTERY,
+          status: PostReportStatus.PENDING,
+        })
+      )
+    ).create()
+
+    await browserContext.withGuard('admin-web').loginAs(adminUser)
+    const page = await visit(url)
+
+    page.locator('table tbody > tr').first()
+    await page.locator('button.report-update-action-trigger').click()
+    await page.locator('button.select-reason').click()
+    await page
+      .getByLabel(PostReportStatus.ACCEPTED.toLowerCase())
+      .getByText(PostReportStatus.ACCEPTED.toLowerCase())
+      .click()
+    await page.getByRole('button', { name: 'Update' }).click()
+    const reportStatus = await page.locator('table tbody > tr .report-status').first().textContent()
+    assert.equal(reportStatus, PostReportStatus.ACCEPTED)
+  })
+
+  test('Successfully rejects a report complaint', async ({ assert, browserContext, visit }) => {
+    const adminUser = await UserFactory.apply('admin').create()!
+    const reportingUser = await UserFactory.create()!
+    const postingUser = await UserFactory.with('posts', 1).create()!
+    await UserFactory.with('posts', 1, (post) =>
+      post.with('reports', 1, (report) =>
+        report.merge({
+          userId: reportingUser.id!,
+          postId: postingUser.posts[0].id,
+          reason: PostReportReason.ADULTERY,
+          status: PostReportStatus.PENDING,
+        })
+      )
+    ).create()
+
+    await browserContext.withGuard('admin-web').loginAs(adminUser)
+    const page = await visit(url)
+
+    page.locator('table tbody > tr').first()
+    await page.locator('button.report-update-action-trigger').click()
+    await page.locator('button.select-reason').click()
+    await page
+      .getByLabel(PostReportStatus.REJECTED.toLowerCase())
+      .getByText(PostReportStatus.REJECTED.toLowerCase())
+      .click()
+    await page.getByRole('button', { name: 'Update' }).click()
+    const reportStatus = await page.locator('table tbody > tr .report-status').first().textContent()
+    assert.equal(reportStatus, PostReportStatus.REJECTED)
+  })
+})
diff --git a/tests/browser/pages/user_feed.spec.ts b/tests/browser/pages/user_feed.spec.ts
index d387572..ae891a2 100644
--- a/tests/browser/pages/user_feed.spec.ts
+++ b/tests/browser/pages/user_feed.spec.ts
@@ -16,7 +16,7 @@ test.group('Acessing user profile feed', (group) => {
     browserContext,
   }) => {
     const user = await UserFactory.with('posts', 2).create()
-    await browserContext.loginAs(user)
+    await browserContext.withGuard('web').loginAs(user)
     const page = await visit(`/users/${user.id}`)
     const locator = page.getByText('Total posts').first()
     await page.assertText(locator, `Total posts ${user.posts.length}`)
diff --git a/yarn.lock b/yarn.lock
index eaa2430..c1b9711 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1843,6 +1843,26 @@
     aria-hidden "^1.1.1"
     react-remove-scroll "2.5.7"
 
+"@radix-ui/react-dialog@^1.1.2":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-dialog/-/react-dialog-1.1.2.tgz#d9345575211d6f2d13e209e84aec9a8584b54d6c"
+  integrity sha512-Yj4dZtqa2o+kG61fzB0H2qUvmwBA2oyQroGLyNtBj1beo1khoQ3q1a2AO8rrQYjd8256CO9+N8L9tvsS+bnIyA==
+  dependencies:
+    "@radix-ui/primitive" "1.1.0"
+    "@radix-ui/react-compose-refs" "1.1.0"
+    "@radix-ui/react-context" "1.1.1"
+    "@radix-ui/react-dismissable-layer" "1.1.1"
+    "@radix-ui/react-focus-guards" "1.1.1"
+    "@radix-ui/react-focus-scope" "1.1.0"
+    "@radix-ui/react-id" "1.1.0"
+    "@radix-ui/react-portal" "1.1.2"
+    "@radix-ui/react-presence" "1.1.1"
+    "@radix-ui/react-primitive" "2.0.0"
+    "@radix-ui/react-slot" "1.1.0"
+    "@radix-ui/react-use-controllable-state" "1.1.0"
+    aria-hidden "^1.1.1"
+    react-remove-scroll "2.6.0"
+
 "@radix-ui/react-direction@1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-direction/-/react-direction-1.1.0.tgz#a7d39855f4d077adc2a1922f9c353c5977a09cdc"
@@ -1917,7 +1937,7 @@
     "@radix-ui/react-primitive" "2.0.0"
     "@radix-ui/react-use-controllable-state" "1.1.0"
 
-"@radix-ui/react-id@1.1.0":
+"@radix-ui/react-id@1.1.0", "@radix-ui/react-id@^1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-id/-/react-id-1.1.0.tgz#de47339656594ad722eb87f94a6b25f9cffae0ed"
   integrity sha512-EJUrI8yYh7WOjNOqpoJaf1jlFIH2LvtgAl+YcFqNCa+4hj64ZXmPkAKOFs/ukjz3byN6bdb/AVUqHkI8/uWWMA==
@@ -1955,6 +1975,27 @@
     aria-hidden "^1.1.1"
     react-remove-scroll "2.5.7"
 
+"@radix-ui/react-popover@^1.1.2":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-popover/-/react-popover-1.1.2.tgz#a0cab25f69aa49ad0077d91e9e9dcd323758020c"
+  integrity sha512-u2HRUyWW+lOiA2g0Le0tMmT55FGOEWHwPFt1EPfbLly7uXQExFo5duNKqG2DzmFXIdqOeNd+TpE8baHWJCyP9w==
+  dependencies:
+    "@radix-ui/primitive" "1.1.0"
+    "@radix-ui/react-compose-refs" "1.1.0"
+    "@radix-ui/react-context" "1.1.1"
+    "@radix-ui/react-dismissable-layer" "1.1.1"
+    "@radix-ui/react-focus-guards" "1.1.1"
+    "@radix-ui/react-focus-scope" "1.1.0"
+    "@radix-ui/react-id" "1.1.0"
+    "@radix-ui/react-popper" "1.2.0"
+    "@radix-ui/react-portal" "1.1.2"
+    "@radix-ui/react-presence" "1.1.1"
+    "@radix-ui/react-primitive" "2.0.0"
+    "@radix-ui/react-slot" "1.1.0"
+    "@radix-ui/react-use-controllable-state" "1.1.0"
+    aria-hidden "^1.1.1"
+    react-remove-scroll "2.6.0"
+
 "@radix-ui/react-popper@1.2.0":
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-popper/-/react-popper-1.2.0.tgz#a3e500193d144fe2d8f5d5e60e393d64111f2a7a"
@@ -2003,7 +2044,7 @@
     "@radix-ui/react-compose-refs" "1.1.0"
     "@radix-ui/react-use-layout-effect" "1.1.0"
 
-"@radix-ui/react-primitive@2.0.0":
+"@radix-ui/react-primitive@2.0.0", "@radix-ui/react-primitive@^2.0.0":
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-primitive/-/react-primitive-2.0.0.tgz#fe05715faa9203a223ccc0be15dc44b9f9822884"
   integrity sha512-ZSpFm0/uHa8zTvKBDjLFWLo8dkr4MBsiDLz0g3gMUwqgLHz9rTaRRGYDgvZPtBJgYCBKXkS9fzmoySgr8CO6Cw==
@@ -3809,6 +3850,16 @@ clsx@^2.1.1:
   resolved "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz"
   integrity sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==
 
+cmdk@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/cmdk/-/cmdk-1.0.4.tgz#cbddef6f5ade2378f85c80a0b9ad9a8a712779b5"
+  integrity sha512-AnsjfHyHpQ/EFeAnG216WY7A5LiYCoZzCSygiLvfXC3H3LFGCprErteUcszaVluGOhuOTbJS3jWHrSDYPBBygg==
+  dependencies:
+    "@radix-ui/react-dialog" "^1.1.2"
+    "@radix-ui/react-id" "^1.1.0"
+    "@radix-ui/react-primitive" "^2.0.0"
+    use-sync-external-store "^1.2.2"
+
 code-block-writer@^13.0.1:
   version "13.0.1"
   resolved "https://registry.npmjs.org/code-block-writer/-/code-block-writer-13.0.1.tgz"
@@ -7815,6 +7866,11 @@ use-sidecar@^1.1.2:
     detect-node-es "^1.1.0"
     tslib "^2.0.0"
 
+use-sync-external-store@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.2.tgz#c3b6390f3a30eba13200d2302dcdf1e7b57b2ef9"
+  integrity sha512-PElTlVMwpblvbNqQ82d2n6RjStvdSoNe9FG28kNfz3WiXilJm4DdNkEzRhCZuIDwY8U08WVihhGR5iRqAwfDiw==
+
 util-deprecate@^1.0.1, util-deprecate@^1.0.2:
   version "1.0.2"
   resolved "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz"