diff --git a/app/lish/[did]/[publication]/[rkey]/PostPages.tsx b/app/lish/[did]/[publication]/[rkey]/PostPages.tsx
index c157cbd4..18a57057 100644
--- a/app/lish/[did]/[publication]/[rkey]/PostPages.tsx
+++ b/app/lish/[did]/[publication]/[rkey]/PostPages.tsx
@@ -72,7 +72,11 @@ export const useInitializeOpenPages = () => {
   }, [quote]);
 };
 
-export const openPage = (parent: string | undefined, page: string) => {
+export const openPage = (
+  parent: string | undefined,
+  page: string,
+  options?: { scrollIntoView?: boolean }
+) => {
   flushSync(() => {
     usePostPageUIState.setState((state) => {
       let parentPosition = state.pages.findIndex((s) => s == parent);
@@ -86,7 +90,9 @@ export const openPage = (parent: string | undefined, page: string) => {
     });
   });
 
-  scrollIntoView(`post-page-${page}`);
+  if (options?.scrollIntoView !== false) {
+    scrollIntoView(`post-page-${page}`);
+  }
 };
 
 export const closePage = (page: string) =>
diff --git a/app/lish/[did]/[publication]/[rkey]/PublishedPageBlock.tsx b/app/lish/[did]/[publication]/[rkey]/PublishedPageBlock.tsx
index e7de2b88..ea31ec31 100644
--- a/app/lish/[did]/[publication]/[rkey]/PublishedPageBlock.tsx
+++ b/app/lish/[did]/[publication]/[rkey]/PublishedPageBlock.tsx
@@ -8,6 +8,7 @@ import { PostContent } from "./PostContent";
 import {
   PubLeafletBlocksHeader,
   PubLeafletBlocksText,
+  PubLeafletComment,
   PubLeafletPagesLinearDocument,
   PubLeafletPublication,
 } from "lexicons/api";
@@ -15,6 +16,13 @@ import { AppBskyFeedDefs } from "@atproto/api";
 import { TextBlock } from "./TextBlock";
 import { PostPageContext } from "./PostPageContext";
 import { openPage, useOpenPages } from "./PostPages";
+import {
+  openInteractionDrawer,
+  setInteractionState,
+  useInteractionState,
+} from "./Interactions/Interactions";
+import { CommentTiny } from "components/Icons/CommentTiny";
+import { QuoteTiny } from "components/Icons/QuoteTiny";
 
 export function PublishedPageLinkBlock(props: {
   blocks: PubLeafletPagesLinearDocument.Block[];
@@ -44,10 +52,7 @@ export function PublishedPageLinkBlock(props: {
         e.preventDefault();
         e.stopPropagation();
 
-        console.log("yoo@");
-
         openPage(props.parentPageId, props.pageId);
-        //open the damn thing somehow
       }}
     >
       <DocLinkBlock {...props} />
@@ -56,14 +61,14 @@ export function PublishedPageLinkBlock(props: {
 }
 export function DocLinkBlock(props: {
   blocks: PubLeafletPagesLinearDocument.Block[];
-  pageId?: string;
+  pageId: string;
+  parentPageId?: string;
   did: string;
   preview?: boolean;
   className?: string;
   prerenderedCodeBlocks?: Map<string, string>;
   bskyPostData: AppBskyFeedDefs.PostView[];
 }) {
-  let { rep } = useReplicache();
   let [title, description] = props.blocks
     .map((b) => b.block)
     .filter(
@@ -79,31 +84,38 @@ export function DocLinkBlock(props: {
     >
       <>
         <div className="pageLinkBlockContent w-full flex overflow-clip cursor-pointer h-full">
-          <div className="my-2 ml-3 grow min-w-0 text-sm bg-transparent overflow-clip ">
-            {title && (
-              <div
-                className={`pageBlockOne outline-none resize-none align-top flex gap-2 ${title.$type === "pub.leaflet.blocks.header" ? "font-bold text-base" : ""}`}
-              >
-                <TextBlock
-                  facets={title.facets}
-                  plaintext={title.plaintext}
-                  index={[]}
-                  preview
-                />
-              </div>
-            )}
-            {description && (
-              <div
-                className={`pageBlockLineTwo outline-none resize-none align-top flex  gap-2 ${description.$type === "pub.leaflet.blocks.header" ? "font-bold" : ""}`}
-              >
-                <TextBlock
-                  facets={description.facets}
-                  plaintext={description.plaintext}
-                  index={[]}
-                  preview
-                />
-              </div>
-            )}
+          <div className="my-2 ml-3 grow min-w-0 text-sm bg-transparent overflow-clip flex flex-col ">
+            <div className="grow">
+              {title && (
+                <div
+                  className={`pageBlockOne outline-none resize-none align-top flex gap-2 ${title.$type === "pub.leaflet.blocks.header" ? "font-bold text-base" : ""}`}
+                >
+                  <TextBlock
+                    facets={title.facets}
+                    plaintext={title.plaintext}
+                    index={[]}
+                    preview
+                  />
+                </div>
+              )}
+              {description && (
+                <div
+                  className={`pageBlockLineTwo outline-none resize-none align-top flex  gap-2 ${description.$type === "pub.leaflet.blocks.header" ? "font-bold" : ""}`}
+                >
+                  <TextBlock
+                    facets={description.facets}
+                    plaintext={description.plaintext}
+                    index={[]}
+                    preview
+                  />
+                </div>
+              )}
+            </div>
+
+            <Interactions
+              pageId={props.pageId}
+              parentPageId={props.parentPageId}
+            />
           </div>
           {!props.preview && (
             <PagePreview blocks={props.blocks} did={props.did} />
@@ -158,3 +170,59 @@ export function PagePreview(props: {
     </div>
   );
 }
+
+const Interactions = (props: { pageId: string; parentPageId?: string }) => {
+  const data = useContext(PostPageContext);
+  const document_uri = data?.uri;
+  if (!document_uri)
+    throw new Error("document_uri not available in PostPageContext");
+  let comments = data.comments_on_documents.filter(
+    (c) => (c.record as PubLeafletComment.Record)?.onPage === props.pageId,
+  ).length;
+  let quotes = data.document_mentions_in_bsky.filter((q) =>
+    q.link.includes(props.pageId),
+  ).length;
+
+  let { drawerOpen, drawer, pageId } = useInteractionState(document_uri);
+
+  return (
+    <div className={`flex gap-2 text-tertiary text-sm`}>
+      {quotes > 0 && (
+        <button
+          className={`flex gap-1 items-center`}
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            openPage(props.parentPageId, props.pageId, {
+              scrollIntoView: false,
+            });
+            if (!drawerOpen || drawer !== "quotes")
+              openInteractionDrawer("quotes", document_uri, props.pageId);
+            else setInteractionState(document_uri, { drawerOpen: false });
+          }}
+        >
+          <span className="sr-only">Page quotes</span>
+          <QuoteTiny aria-hidden /> {quotes}{" "}
+        </button>
+      )}
+      {comments > 0 && (
+        <button
+          className={`flex gap-1 items-center`}
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            openPage(props.parentPageId, props.pageId, {
+              scrollIntoView: false,
+            });
+            if (!drawerOpen || drawer !== "comments" || pageId !== props.pageId)
+              openInteractionDrawer("comments", document_uri, props.pageId);
+            else setInteractionState(document_uri, { drawerOpen: false });
+          }}
+        >
+          <span className="sr-only">Page comments</span>
+          <CommentTiny aria-hidden /> {comments}{" "}
+        </button>
+      )}
+    </div>
+  );
+};