diff --git a/apps/web/src/app/(app)/@admin/documents/table.tsx b/apps/web/src/app/(app)/@admin/documents/table.tsx
index 37413d1..5e8e7f3 100644
--- a/apps/web/src/app/(app)/@admin/documents/table.tsx
+++ b/apps/web/src/app/(app)/@admin/documents/table.tsx
@@ -184,7 +184,7 @@ export function DocumentsTable() {
       <Table
         aria-label="Documents Table"
         classNames={{
-          wrapper: "min-h-[31rem] relative p-0",
+          wrapper: "min-h-[31rem] relative p-0 overflow-hidden",
         }}
         sortDescriptor={sort}
         onSortChange={setSort}
diff --git a/apps/web/src/app/(app)/@user/card.tsx b/apps/web/src/app/(app)/@user/card.tsx
index 087431e..904a8c1 100644
--- a/apps/web/src/app/(app)/@user/card.tsx
+++ b/apps/web/src/app/(app)/@user/card.tsx
@@ -13,7 +13,8 @@ import {
   CardHeader,
   CardTitle,
 } from "@tanya.in/ui/card";
-import { Chat } from "@tanya.in/ui/chat";
+
+import { Chat } from "./chat";
 
 export function ChatCard(props: { className?: string }) {
   const t = useTranslations("Home");
diff --git a/apps/web/src/app/(app)/@user/chat.tsx b/apps/web/src/app/(app)/@user/chat.tsx
new file mode 100644
index 0000000..21975e7
--- /dev/null
+++ b/apps/web/src/app/(app)/@user/chat.tsx
@@ -0,0 +1,289 @@
+"use client";
+
+import type { UseChatOptions } from "ai/react";
+import * as React from "react";
+import { api } from "@/trpc/react";
+import {
+  Button,
+  Dropdown,
+  DropdownItem,
+  DropdownMenu,
+  DropdownTrigger,
+} from "@nextui-org/react";
+import { ScrollShadow } from "@nextui-org/scroll-shadow";
+import { keepPreviousData } from "@tanstack/react-query";
+import { useChat } from "ai/react";
+import { IoMenu, IoSend } from "react-icons/io5";
+import { toast } from "sonner";
+import { useDebounceValue } from "usehooks-ts";
+import { z } from "zod";
+
+import { cn } from "@tanya.in/ui";
+import { Card, CardDescription } from "@tanya.in/ui/card";
+import { useChatScroll } from "@tanya.in/ui/chat";
+import { Form, FormTextArea, useForm } from "@tanya.in/ui/form";
+
+const TOPICS = ["template", "MBKM", "SKEM", "UKT", "TA", "wisuda", "silabus"];
+
+interface ChatProps extends UseChatOptions {
+  placeholder?: string;
+  value?: string;
+}
+
+export function Chat({
+  onFinish,
+  initialMessages,
+  placeholder,
+  id,
+  value = "",
+}: ChatProps) {
+  const chatId = React.useMemo(() => (id ? id : crypto.randomUUID()), [id]);
+
+  const {
+    messages,
+    isLoading,
+    append: mutate,
+  } = useChat({
+    streamMode: "text",
+    onError: (error) => toast.error(error.message),
+    sendExtraMessageFields: true,
+    onFinish,
+    initialMessages,
+    id: chatId,
+  });
+  const chatContainerRef = useChatScroll(messages);
+
+  //#region  //*=========== Form ===========
+  const methods = useForm({
+    mode: "onSubmit",
+    values: { prompt: value },
+    schema: z.object({
+      prompt: z.string().min(1, { message: "Please enter a message" }),
+      topic: z.string().optional(),
+    }),
+  });
+  const { handleSubmit, control, watch, setValue } = methods;
+  const onSubmit = handleSubmit(async (data) => {
+    setValue("prompt", "");
+    setValue("topic", "");
+    await mutate(
+      { content: data.prompt, role: "user" },
+      { options: { body: { topic: data.topic, chatId } } },
+    );
+  });
+  //#endregion  //*======== Form ===========
+
+  const [dropdownOpen, setDropdownOpen] = React.useState(false);
+  const [suggestionsOpen, setSuggestionsOpen] = React.useState(false);
+  const [filteredTopics, setFilteredTopics] = React.useState(TOPICS);
+
+  const [debouncedPrompt] = useDebounceValue(watch("prompt"), 500);
+  const suggestions = api.chat.getSuggestion.useQuery(debouncedPrompt, {
+    enabled: !debouncedPrompt.startsWith("/") && debouncedPrompt.length > 0,
+    placeholderData: keepPreviousData,
+  });
+  const isAnySuggestion = suggestions.data && suggestions.data.length > 0;
+
+  return (
+    <div
+      className="flex max-h-[60vh] flex-col space-y-4"
+      data-started={messages.length > 0}
+    >
+      <ScrollShadow ref={chatContainerRef}>
+        <div className="mb-4 space-y-3">
+          {messages.map((item) => (
+            <div
+              key={item.id}
+              className={cn(
+                "flex justify-between",
+                item.role === "user" ? "flex-row-reverse" : "flex-row",
+                "space-x-2",
+              )}
+            >
+              <div
+                className={cn(
+                  "rounded-lg px-3 py-2",
+                  item.role === "user"
+                    ? "ml-2 bg-primary text-white"
+                    : "mr-2 bg-content2",
+                )}
+              >
+                {item.content.includes("</") && item.content.includes(">") ? (
+                  <div
+                    className="prose dark:prose-invert"
+                    dangerouslySetInnerHTML={{ __html: item.content }}
+                  />
+                ) : (
+                  item.content
+                )}
+              </div>
+            </div>
+          ))}
+        </div>
+      </ScrollShadow>
+
+      <Form {...methods}>
+        <form onSubmit={onSubmit}>
+          <FormTextArea
+            placeholder={!watch("topic") ? placeholder : ""}
+            control={control}
+            name="prompt"
+            label=""
+            aria-label="prompt"
+            radius="full"
+            classNames={{
+              inputWrapper: "p-0",
+              input: cn(
+                "my-2 self-center !transition-all !duration-500 ease-soft-spring disabled:cursor-not-allowed",
+                {
+                  "-translate-x-6": watch("prompt") && !watch("topic"),
+                },
+              ),
+            }}
+            disabled={isLoading}
+            minRows={1}
+            maxRows={3}
+            onKeyDown={async (e) => {
+              if (
+                (e.key === "Backspace" || e.key === "Delete") &&
+                !watch("prompt") &&
+                watch("topic")
+              )
+                setValue("topic", "");
+
+              if (e.key === "Enter" && !e.shiftKey) {
+                e.preventDefault();
+                await onSubmit();
+              }
+            }}
+            onValueChange={(value) => {
+              if (value.startsWith("/") && !watch("topic")) {
+                setFilteredTopics(
+                  TOPICS.filter((topic) =>
+                    topic.toLowerCase().includes(value.slice(1).toLowerCase()),
+                  ),
+                );
+                setDropdownOpen(true);
+                return;
+              }
+
+              console.log("value", value);
+              if (isAnySuggestion && value.length > 0) {
+                setSuggestionsOpen(true);
+                return;
+              }
+
+              setDropdownOpen(false);
+              setSuggestionsOpen(false);
+            }}
+            startContent={
+              <>
+                <Dropdown
+                  placement="bottom-start"
+                  isOpen={suggestionsOpen}
+                  onClose={() => setSuggestionsOpen(false)}
+                  classNames={{ content: "min-w-[24.8rem]" }}
+                >
+                  <DropdownTrigger>
+                    <div className="h-10" />
+                  </DropdownTrigger>
+                  <DropdownMenu
+                    aria-label="Sugesstions"
+                    variant="flat"
+                    disallowEmptySelection
+                    selectionMode="single"
+                    selectedKeys={[]}
+                    shouldFocusWrap
+                    onSelectionChange={(selected) => {
+                      const selectedId = Array.from(selected).at(0)?.toString();
+
+                      setSuggestionsOpen(false);
+                      setValue(
+                        "prompt",
+                        suggestions.data?.find((s) => s.id === selectedId)
+                          ?.content ?? "",
+                      );
+                    }}
+                  >
+                    {suggestions.data?.map((suggestion) => (
+                      <DropdownItem key={suggestion.id}>
+                        {suggestion.content}
+                      </DropdownItem>
+                    )) ?? <DropdownItem>No suggestion</DropdownItem>}
+                  </DropdownMenu>
+                </Dropdown>
+
+                <Dropdown
+                  isOpen={dropdownOpen}
+                  placement="bottom-start"
+                  onClose={() => setDropdownOpen(false)}
+                >
+                  {watch("topic") ? (
+                    <Card className="my-auto ml-4 bg-primary">
+                      <CardDescription className="w-full p-2 capitalize text-primary-foreground">
+                        /{watch("topic")}
+                      </CardDescription>
+                    </Card>
+                  ) : (
+                    <DropdownTrigger>
+                      <Button
+                        aria-label="Select a topic button"
+                        color="default"
+                        variant="light"
+                        radius="full"
+                        isIconOnly
+                        className={cn(
+                          "opacity-100 delay-100 duration-500 ease-soft-spring transition-transform-opacity",
+                          {
+                            "pointer-events-none -translate-x-4 !opacity-0":
+                              watch("prompt"),
+                          },
+                        )}
+                        onClick={() => setDropdownOpen((prev) => !prev)}
+                      >
+                        <IoMenu size={20} />
+                      </Button>
+                    </DropdownTrigger>
+                  )}
+                  <DropdownMenu
+                    aria-label="Select a topic"
+                    variant="flat"
+                    disallowEmptySelection
+                    selectionMode="single"
+                    selectedKeys={watch("topic")}
+                    shouldFocusWrap
+                    onSelectionChange={(selected) => {
+                      setDropdownOpen(false);
+                      setValue("prompt", "");
+                      setValue("topic", Array.from(selected).at(0)?.toString());
+                    }}
+                  >
+                    {filteredTopics.map((topic) => (
+                      <DropdownItem key={topic} className="capitalize">
+                        {topic}
+                      </DropdownItem>
+                    ))}
+                  </DropdownMenu>
+                </Dropdown>
+              </>
+            }
+            endContent={
+              <Button
+                aria-label="Send message button"
+                color="primary"
+                variant="light"
+                radius="full"
+                type="submit"
+                isIconOnly
+                isLoading={isLoading}
+                className="my-auto"
+              >
+                {!isLoading && <IoSend size={20} />}
+              </Button>
+            }
+          />
+        </form>
+      </Form>
+    </div>
+  );
+}
diff --git a/apps/web/src/app/(app)/layout.tsx b/apps/web/src/app/(app)/layout.tsx
index 31cdb2c..4967518 100644
--- a/apps/web/src/app/(app)/layout.tsx
+++ b/apps/web/src/app/(app)/layout.tsx
@@ -42,7 +42,7 @@ export default async function AuthLayout(props: {
         <Navbar />
         <main
           className={cn("relative flex min-h-[calc(100vh-8rem)]", {
-            "p-4 2xl:pt-8": isAdmin,
+            "p-4": isAdmin,
           })}
         >
           {isAdmin ? props.admin : props.user}
diff --git a/apps/web/src/server/api/routers/chat/chat.procedure.ts b/apps/web/src/server/api/routers/chat/chat.procedure.ts
index c762598..183624e 100644
--- a/apps/web/src/server/api/routers/chat/chat.procedure.ts
+++ b/apps/web/src/server/api/routers/chat/chat.procedure.ts
@@ -1,9 +1,42 @@
 import { createTRPCRouter, protectedProcedure } from "@/server/api/trpc";
+import { db } from "@/server/db";
 import { chats, messages } from "@/server/db/schema";
 import { and, desc, eq, ilike, notExists, or } from "drizzle-orm";
 import { alias } from "drizzle-orm/pg-core";
 import { z } from "zod";
 
+function getQuestion(input?: string) {
+  const m = alias(messages, "m");
+  return db
+    .select()
+    .from(m)
+    .where(
+      and(
+        eq(m.role, "user"),
+        ilike(m.content, `%${input}%`).if(input && input.length > 0),
+        notExists(
+          db
+            .select()
+            .from(messages)
+            .where(
+              and(
+                eq(messages.chatId, m.chatId),
+                eq(messages.role, "assistant"),
+                or(
+                  ilike(messages.content, "%saya tidak tahu%"),
+                  ilike(messages.content, "%hi %"),
+                  ilike(messages.content, "%halo%"),
+                ),
+              ),
+            )
+            .orderBy(desc(messages.createdAt)),
+        ),
+      ),
+    )
+    .orderBy(desc(m.createdAt))
+    .limit(3);
+}
+
 export const chatRouter = createTRPCRouter({
   get: protectedProcedure
     .input(
@@ -29,35 +62,14 @@ export const chatRouter = createTRPCRouter({
       });
     }),
 
-  getRecentQuestion: protectedProcedure.query(async ({ ctx }) => {
-    const m = alias(messages, "m");
-    return await ctx.db
-      .select()
-      .from(m)
-      .where(
-        and(
-          eq(m.role, "user"),
-          notExists(
-            ctx.db
-              .select()
-              .from(messages)
-              .where(
-                and(
-                  eq(messages.chatId, m.chatId),
-                  eq(messages.role, "assistant"),
-                  or(
-                    ilike(messages.content, "%saya tidak tahu%"),
-                    ilike(messages.content, "%hi %"),
-                    ilike(messages.content, "%halo%"),
-                  ),
-                ),
-              )
-              .orderBy(desc(messages.createdAt)),
-          ),
-        ),
-      )
-      .orderBy(desc(m.createdAt))
-      .limit(3);
+  getSuggestion: protectedProcedure
+    .input(z.string())
+    .query(async ({ input }) => {
+      return await getQuestion(input);
+    }),
+
+  getRecentQuestion: protectedProcedure.query(async () => {
+    return await getQuestion();
   }),
 
   show: protectedProcedure
diff --git a/packages/ui/src/chat.tsx b/packages/ui/src/chat.tsx
index 05994b2..f7412e4 100644
--- a/packages/ui/src/chat.tsx
+++ b/packages/ui/src/chat.tsx
@@ -21,7 +21,7 @@ import { Form, FormTextArea, useForm } from "./form";
 
 const TOPICS = ["template", "MBKM", "SKEM", "UKT", "TA", "wisuda", "silabus"];
 
-function useChatScroll<T>(dep: T) {
+export function useChatScroll<T>(dep: T) {
   const ref = React.useRef<HTMLDivElement>(null);
   React.useEffect(() => {
     if (ref.current) {