diff --git a/app/lish/[did]/[publication]/PublicationPostItem.tsx b/app/lish/[did]/[publication]/PublicationPostItem.tsx
index f2ea57fd..78028549 100644
--- a/app/lish/[did]/[publication]/PublicationPostItem.tsx
+++ b/app/lish/[did]/[publication]/PublicationPostItem.tsx
@@ -13,6 +13,7 @@ type CommonProps = {
 type LargeProps = CommonProps & {
   coverImageSrc?: string;
   coverImageAlt?: string;
+  pageWidth?: number;
 };
 
 type MediumProps = CommonProps & {
@@ -35,12 +36,18 @@ function MetaRow({
   const hasDate = date !== undefined && date !== null;
   return (
     <div
-      className={`justify-between w-full ${textClassName} text-tertiary flex gap-1 flex-wrap pt-2 items-center`}
+      className={`justify-between w-full ${textClassName} text-tertiary flex gap-1 flex-wrap items-center`}
     >
-      <p className={`${textClassName} text-tertiary flex gap-1 items-center`}>
-        {hasAuthor && <span>{author}</span>}
-        {hasAuthor && hasDate && <span>|</span>}
-        {hasDate && <span>{date}</span>}
+      <p
+        className={`${textClassName} text-tertiary flex gap-1 items-center flex-wrap`}
+      >
+        {hasAuthor && (
+          <span className="whitespace-nowrap">
+            {author}
+            {hasDate && <span className="ml-1">|</span>}
+          </span>
+        )}
+        {hasDate && <span className="whitespace-nowrap">{date}</span>}
       </p>
       {interactions}
     </div>
@@ -72,7 +79,7 @@ function PostLink({
 export function PublicationPostItemSmall(props: CommonProps) {
   return (
     <>
-      <div className="flex w-full grow flex-col">
+      <div className="flex w-full grow flex-col gap-1 px-3 py-2">
         <PostLink href={props.href}>
           {props.title && <h3 className="text-primary">{props.title}</h3>}
         </PostLink>
@@ -92,27 +99,29 @@ export function PublicationPostItemMedium(props: MediumProps) {
   const hasCoverImage = !!props.coverImageSrc;
   return (
     <>
-      <div className="flex w-full gap-3 items-stretch">
-        <div className="flex w-full grow flex-col min-w-0">
+      <div className="flex w-full gap-3 items-stretch sm:h-36">
+        <div className="flex w-full gap-2 grow flex-col justify-between min-w-0  pl-3 py-2">
           <PostLink href={props.href}>
-            {props.title && <h3 className="text-primary">{props.title}</h3>}
-            <p className="italic text-secondary line-clamp-3">
-              {props.description}
+            {props.title && (
+              <h3 className="text-primary line-clamp-2">{props.title}</h3>
+            )}
+            <p className="text-secondary line-clamp-3">
+              {props.description} {props.description}
             </p>
           </PostLink>
           <MetaRow
             author={props.author}
             date={props.date}
             interactions={props.interactions}
-            textClassName="text-sm"
+            textClassName="text-sm place-self-end"
           />
         </div>
         {hasCoverImage && (
-          <div className="self-stretch shrink-0 max-w-24">
+          <div className="self-stretch shrink-0 aspect-square  w-16 sm:w-36">
             <img
               src={props.coverImageSrc}
               alt={props.coverImageAlt || props.title || ""}
-              className="h-full w-auto object-cover rounded"
+              className="h-full aspect-square object-cover rounded"
             />
           </div>
         )}
@@ -124,13 +133,22 @@ export function PublicationPostItemMedium(props: MediumProps) {
 
 export function PublicationPostItemLarge(props: LargeProps) {
   const hasCoverImage = !!props.coverImageSrc;
+  const widePage = (props.pageWidth ?? 0) >= 768;
   const body = (
-    <div className="flex w-full grow flex-col">
+    <div
+      className={`flex w-full grow flex-col gap-2 justify-between ${widePage ? " px-3  py-2 sm:pb-3" : "px-3 py-2 "}`}
+    >
       <PostLink href={props.href}>
         {props.title && (
-          <h3 className="text-primary text-xl sm:text-2xl">{props.title}</h3>
+          <h3
+            className={`text-primary text-lg clamp-2 ${widePage ? "sm:text-xl " : ""}`}
+          >
+            {props.title}
+          </h3>
         )}
-        <p className="italic text-secondary line-clamp-3 text-lg">
+        <p
+          className={`text-secondary line-clamp-3 text-base ${widePage ? "sm:text-lg " : ""}`}
+        >
           {props.description}
         </p>
       </PostLink>
@@ -138,20 +156,22 @@ export function PublicationPostItemLarge(props: LargeProps) {
         author={props.author}
         date={props.date}
         interactions={props.interactions}
-        textClassName="text-base"
+        textClassName={`${widePage ? "text-sm sm:text-base " : "text-sm "} `}
       />
     </div>
   );
 
   return (
     <>
-      <div className="flex w-full gap-4 items-start">
+      <div
+        className={`flex flex-col items-stretch ${widePage ? "sm:flex-row sm:gap-2 gap-0" : ""} w-full  items-start`}
+      >
         {hasCoverImage && (
-          <div className="shrink-0 w-1/3 max-w-[240px]">
+          <div className="w-fit">
             <img
               src={props.coverImageSrc}
               alt={props.coverImageAlt || props.title || ""}
-              className="w-full h-auto aspect-video object-cover rounded"
+              className="h-full aspect-[1.91:1] object-cover rounded"
             />
           </div>
         )}
diff --git a/app/lish/[did]/[publication]/PublicationPostsList.tsx b/app/lish/[did]/[publication]/PublicationPostsList.tsx
index 3e87e710..7fc52f06 100644
--- a/app/lish/[did]/[publication]/PublicationPostsList.tsx
+++ b/app/lish/[did]/[publication]/PublicationPostsList.tsx
@@ -140,6 +140,7 @@ export function PublicationPostsList({
                     interactions={interactions}
                     coverImageSrc={coverImageSrc}
                     coverImageAlt={doc_record.title}
+                    pageWidth={publicationRecord?.theme?.pageWidth}
                   />
                 );
               }
diff --git a/components/Blocks/StandardSitePostBlock/StandardSitePostItem.tsx b/components/Blocks/StandardSitePostBlock/StandardSitePostItem.tsx
index 8e6f5863..5b47219e 100644
--- a/components/Blocks/StandardSitePostBlock/StandardSitePostItem.tsx
+++ b/components/Blocks/StandardSitePostBlock/StandardSitePostItem.tsx
@@ -10,13 +10,14 @@ import { getDocumentURL } from "app/lish/createPub/getPublicationURL";
 import { getFirstParagraph } from "src/utils/getFirstParagraph";
 import { blobRefToSrc } from "src/utils/blobRefToSrc";
 import { useStandardSitePost } from "components/StandardSitePostDataProvider";
+import { useEntity, useReplicache } from "src/replicache";
 import type { StandardSitePostData } from "app/api/rpc/[command]/get_standard_site_posts";
 
 export type StandardSitePostSize = "large" | "medium" | "small";
 
 export function StandardSitePostItem({
   uri,
-  size = "small",
+  size = "medium",
 }: {
   uri: string;
   size?: StandardSitePostSize;
@@ -50,7 +51,7 @@ export function StandardSitePostItem({
 
 export function StandardSitePostItemView({
   post,
-  size = "small",
+  size = "medium",
 }: {
   post: StandardSitePostData;
   size?: StandardSitePostSize;
@@ -82,6 +83,9 @@ export function StandardSitePostItemView({
       ? blobRefToSrc(post.record.coverImage.ref, postDid)
       : undefined;
 
+  const { rootEntity } = useReplicache();
+  const pageWidth = useEntity(rootEntity, "theme/page-width")?.data.value;
+
   const commonProps = {
     href: docUrl,
     title: post.record.title,
@@ -96,6 +100,7 @@ export function StandardSitePostItemView({
         description={description}
         coverImageSrc={coverImageSrc}
         coverImageAlt={post.record.title}
+        pageWidth={pageWidth}
       />
     );
   }
diff --git a/components/Blocks/StandardSitePostBlock/index.tsx b/components/Blocks/StandardSitePostBlock/index.tsx
index a7ca8dc0..208787f4 100644
--- a/components/Blocks/StandardSitePostBlock/index.tsx
+++ b/components/Blocks/StandardSitePostBlock/index.tsx
@@ -2,7 +2,6 @@ import { BlockProps, BlockLayout } from "../Block";
 import { useEntity, useReplicache } from "src/replicache";
 import { useUIState } from "src/useUIState";
 import { Popover } from "components/Popover";
-import { Radio } from "components/Checkbox";
 import { SettingsTriggerButton } from "../SettingsTriggerButton";
 import {
   StandardSitePostItem,
@@ -17,7 +16,7 @@ export const StandardSitePostBlock = (
   );
   let uri = useEntity(props.entityID, "block/standard-site-post")?.data.value;
   let sizeFact = useEntity(props.entityID, "standard-site-post/size");
-  let size: StandardSitePostSize = sizeFact?.data.value ?? "small";
+  let size: StandardSitePostSize = sizeFact?.data.value ?? "medium";
 
   if (!uri) return null;
 
@@ -26,7 +25,7 @@ export const StandardSitePostBlock = (
       isSelected={!!isSelected}
       hasBackground="page"
       borderOnHover
-      className="standardSitePostBlock sm:px-3! sm:py-2! px-2! py-1!"
+      className="standardSitePostBlock p-0!"
       extraOptions={
         <StandardSitePostSettingsButton entityID={props.entityID} />
       }
@@ -39,37 +38,41 @@ export const StandardSitePostBlock = (
 function StandardSitePostSettingsButton(props: { entityID: string }) {
   let { rep } = useReplicache();
   let sizeFact = useEntity(props.entityID, "standard-site-post/size");
-  let size: StandardSitePostSize = sizeFact?.data.value ?? "small";
+  let size: StandardSitePostSize = sizeFact?.data.value ?? "medium";
 
   return (
     <Popover
       asChild
       side="top"
       align="end"
-      sideOffset={6}
-      className="flex flex-col gap-1 w-md"
+      className="flex flex-col gap-2 w-xs pb-3!"
+      onOpenAutoFocus={(e) => e.preventDefault()}
       trigger={
         <SettingsTriggerButton aria-label="Standard Site Post Settings" />
       }
     >
       <h4>Post Size</h4>
-
-      <div className="flex flex-row gap-1 w-full">
-        <div className="flex flex-col gap-1 flex-1">
-          {(
-            [
-              { value: "small", label: "Small" },
-              { value: "medium", label: "Medium" },
-            ] as { value: StandardSitePostSize; label: string }[]
-          ).map((option) => (
-            <Radio
+      <div className="flex flex-col gap-3 w-full">
+        {(
+          [
+            { value: "small", Icon: SmallIcon },
+            { value: "medium", Icon: MedIcon },
+            { value: "large", Icon: LargeIcon },
+          ] as {
+            value: StandardSitePostSize;
+            Icon: (props: { selected: boolean }) => React.ReactNode;
+          }[]
+        ).map((option) => {
+          let selected =
+            size === option.value ||
+            (option.value === "medium" && size !== "small" && size !== "large");
+          return (
+            <button
+              className="text-left"
               key={option.value}
-              id={`standard-site-post-size-${props.entityID}-${option.value}`}
-              name={`standard-site-post-size-${props.entityID}`}
-              value={option.value}
-              checked={size === option.value}
-              onChange={(e) => {
-                if (!e.currentTarget.checked) return;
+              type="button"
+              aria-pressed={selected}
+              onClick={() => {
                 if (!rep) return;
                 rep.mutate.assertFact({
                   entity: props.entityID,
@@ -81,42 +84,22 @@ function StandardSitePostSettingsButton(props: { entityID: string }) {
                 });
               }}
             >
-              {option.label === "Small" ? <SmallIcon /> : <MedIcon />}
-            </Radio>
-          ))}
-        </div>
-        <div className="flex-1">
-          <Radio
-            id={`standard-site-post-size-${props.entityID}-large`}
-            name={`standard-site-post-size-${props.entityID}`}
-            value="large"
-            checked={size === "large"}
-            onChange={(e) => {
-              if (!e.currentTarget.checked) return;
-              if (!rep) return;
-              rep.mutate.assertFact({
-                entity: props.entityID,
-                attribute: "standard-site-post/size",
-                data: {
-                  type: "standard-site-post-size-union",
-                  value: "large",
-                },
-              });
-            }}
-          >
-            <LargeIcon />
-          </Radio>
-        </div>
+              <option.Icon selected={selected} />
+            </button>
+          );
+        })}
       </div>
     </Popover>
   );
 }
 
-const SmallIcon = () => {
+const SmallIcon = ({ selected }: { selected: boolean }) => {
   return (
-    <div className="flex gap-2 p-2 w-full light-container">
+    <div
+      className={`flex gap-2 p-2 w-full light-container outline-2 outline-offset-1 ${selected ? "outline-accent-contrast border-accent-contrast!" : "outline-transparent"}`}
+    >
       <div className="flex flex-col gap-1 grow min-w-0">
-        <div className="w-full h-5 bg-tertiary rounded-[2px]" />
+        <div className="w-full h-4 bg-tertiary rounded-[2px]" />
 
         <div className="flex justify-between mt-1 w-full">
           <div className="w-[60%]  h-2 bg-border rounded-[2px]" />
@@ -127,32 +110,35 @@ const SmallIcon = () => {
   );
 };
 
-const MedIcon = () => {
+const MedIcon = ({ selected }: { selected: boolean }) => {
   return (
-    <div className="flex gap-2 p-2 w-full light-container">
-      <div className="flex flex-col gap-1 grow min-w-0">
-        <div className="w-full h-5 bg-tertiary rounded-[2px]" />
-        <div className="w-full h-3 bg-tertiary mt-1 rounded-[2px]" />
-        <div className="w-full h-3 bg-tertiary rounded-[2px]" />
+    <div
+      className={`flex gap-2  w-full light-container outline-2 outline-offset-1 ${selected ? "outline-accent-contrast border-accent-contrast!" : "outline-transparent "}`}
+    >
+      <div className="flex flex-col gap-1 p-2 grow min-w-0">
+        <div className="w-full h-4 bg-tertiary rounded-[2px]" />
+        <div className="w-full h-2 bg-tertiary mt-1 rounded-[2px]" />
+        <div className="w-full h-2 bg-tertiary rounded-[2px]" />
         <div className="flex justify-between mt-2 w-full">
           <div className="w-[60%]  h-2 bg-border rounded-[2px]" />
           <div className="w-6 h-2 bg-border rounded-[2px]" />
         </div>
       </div>
-      <div className="aspect-square h-full bg-test shrink-0" />
+      <div className="aspect-square h-[82px] bg-test shrink-0" />
     </div>
   );
 };
 
-const LargeIcon = () => {
+const LargeIcon = ({ selected }: { selected: boolean }) => {
   return (
-    <div className="flex flex-col gap-2 w-full light-container">
-      <div className="w-full aspect-video bg-test rounded-t[2px]" />
+    <div
+      className={`flex flex-col gap-2 w-full outline-2 outline-offset-1 light-container ${selected ? "outline-accent-contrast border-accent-contrast!" : "outline-transparent"}`}
+    >
+      <div className="w-full aspect-video bg-test rounded-t-[2px]" />
 
       <div className="flex flex-col gap-1 p-2 pt-0.5!">
-        <div className="w-full h-5 bg-tertiary rounded-[2px]" />
-        <div className="w-full h-3 bg-tertiary mt-1 rounded-[2px]" />
-        <div className="w-full h-3 bg-tertiary rounded-[2px]" />
+        <div className="w-full h-4 bg-tertiary rounded-[2px]" />
+        <div className="w-full h-2 bg-tertiary mt-1 rounded-[2px]" />
         <div className="flex justify-between mt-2 w-full">
           <div className="w-[60%]  h-2 bg-border rounded-[2px]" />
           <div className="w-6 h-2 bg-border rounded-[2px]" />