diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6b608e88..0744f896 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,12 @@
 # Changelog
 
+## [0.14.0](https://github.com/stacklok/codegate-ui/compare/v0.13.1...v0.14.0) (2025-02-07)
+
+
+### Features
+
+* show alert detail in the conversation page ([#277](https://github.com/stacklok/codegate-ui/issues/277)) ([8154d3e](https://github.com/stacklok/codegate-ui/commit/8154d3e9c8082f6aac0fc2914621dd99f8f71936))
+
 ## [0.13.1](https://github.com/stacklok/codegate-ui/compare/v0.13.0...v0.13.1) (2025-02-07)
 
 
diff --git a/package-lock.json b/package-lock.json
index 4ddf4a85..5260ba41 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "vite-project",
-  "version": "0.13.1",
+  "version": "0.14.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "vite-project",
-      "version": "0.13.1",
+      "version": "0.14.0",
       "dependencies": {
         "@hey-api/client-fetch": "^0.7.1",
         "@monaco-editor/react": "^4.6.0",
diff --git a/package.json b/package.json
index 7aa7d0ae..22be71a1 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "vite-project",
   "private": true,
-  "version": "0.13.1",
+  "version": "0.14.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
diff --git a/src/components/AlertDetail.tsx b/src/components/AlertDetail.tsx
new file mode 100644
index 00000000..10de3054
--- /dev/null
+++ b/src/components/AlertDetail.tsx
@@ -0,0 +1,55 @@
+import { AlertConversation } from "@/api/generated";
+import { isAlertMalicious } from "@/features/alerts/lib/is-alert-malicious";
+import { isAlertSecret } from "@/features/alerts/lib/is-alert-secret";
+import { Markdown } from "./Markdown";
+
+type MaliciousPkgType = {
+  name: string;
+  type: string;
+  status: string;
+  description: string;
+};
+
+export function AlertDetail({ alert }: { alert: AlertConversation }) {
+  if (alert.trigger_string === null) return "N/A";
+  if (isAlertSecret(alert) && typeof alert.trigger_string === "string") {
+    return (
+      <div className="bg-gray-25 rounded-lg overflow-auto p-4">
+        <Markdown>{alert.trigger_string}</Markdown>
+      </div>
+    );
+  }
+
+  if (isAlertMalicious(alert) && typeof alert.trigger_string === "object") {
+    const maliciousPkg = alert.trigger_string as MaliciousPkgType;
+
+    return (
+      <div className="max-h-40 w-fit overflow-y-auto whitespace-pre-wrap p-2">
+        <label className="font-medium">Package:</label>
+        &nbsp;
+        <a
+          href={`https://www.insight.stacklok.com/report/${maliciousPkg.type}/${maliciousPkg.name}?utm_source=codegate-ui`}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="text-brand-500 hover:underline"
+        >
+          {maliciousPkg.type}/{maliciousPkg.name}
+        </a>
+        {maliciousPkg.status && (
+          <>
+            <br />
+            <label className="font-medium">Status:</label> {maliciousPkg.status}
+          </>
+        )}
+        {maliciousPkg.description && (
+          <>
+            <br />
+            <label className="font-medium">Description:</label>{" "}
+            {maliciousPkg.description}
+          </>
+        )}
+      </div>
+    );
+  }
+  return null;
+}
diff --git a/src/routes/route-chat.tsx b/src/routes/route-chat.tsx
index 30f1b5f3..6cda4069 100644
--- a/src/routes/route-chat.tsx
+++ b/src/routes/route-chat.tsx
@@ -8,11 +8,14 @@ import {
   ChatBubbleMessage,
 } from "@/components/ui/chat/chat-bubble";
 import { Markdown } from "@/components/Markdown";
-import { Breadcrumb, Breadcrumbs } from "@stacklok/ui-kit";
+import { Breadcrumb, Breadcrumbs, Card, CardBody } from "@stacklok/ui-kit";
 import { BreadcrumbHome } from "@/components/BreadcrumbHome";
+import { useQueryGetWorkspaceAlertTable } from "@/features/alerts/hooks/use-query-get-workspace-alerts-table";
+import { AlertDetail } from "@/components/AlertDetail";
 
 export function RouteChat() {
   const { id } = useParams();
+  const { data = [] } = useQueryGetWorkspaceAlertTable();
   const { data: prompts } = useQueryGetWorkspaceMessages();
   const chat = prompts?.find((prompt) => prompt.chat_id === id);
 
@@ -28,6 +31,13 @@ export function RouteChat() {
           chat.conversation_timestamp,
         );
 
+  // we have an issue on BE, we received duplicated alerts
+  const alertDetail = data.filter((alert) =>
+    alert.conversation.question_answers.some(
+      (item) => item.question.message_id === id,
+    ),
+  )[0];
+
   return (
     <>
       <Breadcrumbs>
@@ -36,6 +46,14 @@ export function RouteChat() {
       </Breadcrumbs>
 
       <div className="w-[calc(100vw-18rem)]">
+        {alertDetail && (
+          <Card className="w-full mb-2">
+            <CardBody className="w-full h-fit overflow-auto max-h-[500px]">
+              <AlertDetail alert={alertDetail} />
+            </CardBody>
+          </Card>
+        )}
+
         <ChatMessageList>
           {(chat?.question_answers ?? []).map(({ question, answer }, index) => (
             <div key={index} className="flex flex-col size-full gap-6">