diff --git a/app/lish/[did]/[publication]/[rkey]/CanvasPage.tsx b/app/lish/[did]/[publication]/[rkey]/CanvasPage.tsx
index 5cc40fdb..f004f333 100644
--- a/app/lish/[did]/[publication]/[rkey]/CanvasPage.tsx
+++ b/app/lish/[did]/[publication]/[rkey]/CanvasPage.tsx
@@ -202,7 +202,7 @@ const CanvasMetadata = (props: {
   commentsCount: number | undefined;
 }) => {
   return (
-    <div className="flex flex-row gap-3 items-center absolute sm:top-4 sm:right-4 bg-bg-page border-border-light rounded-md px-2 py-1 h-fit z-20">
+    <div className="flex flex-row gap-3 items-center absolute top-6 right-3 sm:top-4 sm:right-4 bg-bg-page border-border-light rounded-md px-2 py-1 h-fit z-20">
       <Interactions
         quotesCount={props.quotesCount || 0}
         commentsCount={props.commentsCount || 0}
diff --git a/components/Canvas.tsx b/components/Canvas.tsx
index 2d7d5eae..776e9df1 100644
--- a/components/Canvas.tsx
+++ b/components/Canvas.tsx
@@ -25,6 +25,7 @@ import {
   PubLeafletPublication,
   PubLeafletPublicationRecord,
 } from "lexicons/api";
+import { getCommentCount } from "app/lish/[did]/[publication]/[rkey]/Interactions/Interactions";
 
 export function Canvas(props: {
   entityID: string;
@@ -71,7 +72,7 @@ export function Canvas(props: {
     >
       <AddCanvasBlockButton entityID={props.entityID} entity_set={entity_set} />
 
-      <CanvasMetadata isSubpage={props.first} />
+      <CanvasMetadata isSubpage={!props.first} />
 
       <CanvasContent {...props} />
     </div>
@@ -158,8 +159,7 @@ const CanvasMetadata = (props: { isSubpage: boolean | undefined }) => {
   let showComments = pubRecord.preferences?.showComments;
 
   return (
-    <div className="flex flex-row gap-3 items-center absolute sm:top-4 sm:right-4 bg-bg-page border-border-light rounded-md px-2 py-1 h-fit z-20">
-      {/*ONLY IF SHOW COMMENTS PREF IS ON*/}
+    <div className="flex flex-row gap-3 items-center absolute top-6 right-3 sm:top-4 sm:right-4 bg-bg-page border-border-light rounded-md px-2 py-1 h-fit z-20">
       {showComments && (
         <div className="flex gap-1 text-tertiary items-center">
           <CommentTiny className="text-border" /> —
diff --git a/components/Pages/Page.tsx b/components/Pages/Page.tsx
index 9b05df7a..ffe2421f 100644
--- a/components/Pages/Page.tsx
+++ b/components/Pages/Page.tsx
@@ -99,7 +99,6 @@ export const PageWrapper = (props: {
         className={`
       pageScrollWrapper
       grow
-
       shrink-0 snap-center
       overflow-y-scroll
       ${
@@ -115,7 +114,7 @@ export const PageWrapper = (props: {
     ${
       props.pageType === "canvas" &&
       !props.fullPageScroll &&
-      "max-w-[100vw] sm:max-w-[calc(100vw-128px)] lg:max-w-fit lg:w-[calc(var(--page-width-units)*2 + 24px))]"
+      "max-w-[var(--page-width-units)] sm:max-w-[calc(100vw-128px)] lg:max-w-fit lg:w-[calc(var(--page-width-units)*2 + 24px))]"
     }
 
 `}
@@ -126,7 +125,6 @@ export const PageWrapper = (props: {
         `}
         >
           {props.children}
-          <div className="h-4 sm:h-6 w-full" />
         </div>
       </div>
       {props.pageOptions}
@@ -203,6 +201,7 @@ const DocContent = (props: { entityID: string }) => {
         />
       ) : null}
       <Blocks entityID={props.entityID} />
+      <div className="h-4 sm:h-6 w-full" />
       {/* we handle page bg in this sepate div so that
     we can apply an opacity the background image
     without affecting the opacity of the rest of the page */}