diff --git a/web-citizen-reporting/web-citizen-reporting-template/src/pages/GuideDetails.tsx b/web-citizen-reporting/web-citizen-reporting-template/src/pages/GuideDetails.tsx
index c6592b9a8..0df18afc2 100644
--- a/web-citizen-reporting/web-citizen-reporting-template/src/pages/GuideDetails.tsx
+++ b/web-citizen-reporting/web-citizen-reporting-template/src/pages/GuideDetails.tsx
@@ -1,14 +1,52 @@
+import { Spinner } from "@/components/Spinner";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { downloadFile } from "@/lib/utils";
 import { useGuides } from "@/queries/use-guides";
 import { Route } from "@/routes/guides/$guideId";
+import { notFound } from "@tanstack/react-router";
+import { Download, ExternalLink } from "lucide-react";
 
 function GuideDetails() {
   const { guideId } = Route.useParams();
 
-  const { data: guide } = useGuides((guides) =>
+  const { data: guide, isLoading } = useGuides((guides) =>
     guides.find((g) => g.id === guideId)
   );
 
-  return <>{JSON.stringify(guide)}</>;
+  if (isLoading) return <Spinner show={isLoading} />;
+
+  if (!guide) throw notFound();
+  return (
+    <>
+      <Card>
+        <CardHeader>
+          <CardTitle>{guide.title}</CardTitle>
+        </CardHeader>
+        {guide.guideType === "Text" && (
+          <CardContent className="h-full w-full">
+            <div dangerouslySetInnerHTML={{ __html: guide.text }} />
+          </CardContent>
+        )}
+        {guide.guideType === "Website" && (
+          <Button variant="link" className="cursor-pointer">
+            <a href={guide.websiteUrl}>Visit Website</a>
+            <ExternalLink className="h-4 w-4" />
+          </Button>
+        )}
+        {guide.guideType === "Document" && (
+          <Button
+            variant="link"
+            className="cursor-pointer"
+            onClick={() => downloadFile(guide.presignedUrl)}
+          >
+            Download
+            <Download className="h-4 w-4" />
+          </Button>
+        )}
+      </Card>
+    </>
+  );
 }
 
 export default GuideDetails;
diff --git a/web-citizen-reporting/web-citizen-reporting-template/src/pages/NotificationDetails.tsx b/web-citizen-reporting/web-citizen-reporting-template/src/pages/NotificationDetails.tsx
index a3f3a3992..e237d11fa 100644
--- a/web-citizen-reporting/web-citizen-reporting-template/src/pages/NotificationDetails.tsx
+++ b/web-citizen-reporting/web-citizen-reporting-template/src/pages/NotificationDetails.tsx
@@ -1,13 +1,15 @@
-import Notification from "@/components/Notification";
+import Notification from "@/components/notifications";
+import { Spinner } from "@/components/Spinner";
 import { useNotifications } from "@/queries/use-notifications";
 import { Route } from "@/routes/notifications/$notificationId";
 import { notFound } from "@tanstack/react-router";
 
 function NotificationDetails() {
   const { notificationId } = Route.useParams();
-  const { data: notification } = useNotifications((notification) =>
+  const { data: notification, isLoading } = useNotifications((notification) =>
     notification.notifications.find((n) => n.id == notificationId)
   );
+  if (isLoading) return <Spinner show={isLoading} />;
 
   if (!notification) throw notFound();