diff --git a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
index 88b11e166..b52ebb69e 100644
--- a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
+++ b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
@@ -1,8 +1,11 @@
-import { VStack, HStack, SpanBox } from '../../elements/LayoutPrimitives'
+import { Box, VStack, HStack, SpanBox } from '../../elements/LayoutPrimitives'
 import { StyledText } from '../../elements/StyledText'
 import { removeHTMLTags } from '../ArticleSubtitle'
+import { MoreOptionsIcon } from '../../elements/images/MoreOptionsIcon'
 import { theme } from '../../tokens/stitches.config'
+import { CardMenu } from '../CardMenu'
 import { LabelChip } from '../../elements/LabelChip'
+import { ProgressBar } from '../../elements/ProgressBar'
 import type { LinkedItemCardProps } from './CardTypes'
 import { ProgressBarVertical } from '../../elements/ProgressBarVertical'
 
@@ -16,62 +19,244 @@ const ellipsisText = {
   margin: 'auto 0',
 }
 
+const cardTitleGridStyle = {
+  mt: '0',
+  mb: '0',
+  fontSize: '18px',
+  textAlign: 'left',
+  lineHeight: '1.25',
+  // whiteSpace: 'nowrap',
+  // textOverflow: 'ellipsis',
+  width: '100%',
+  // overflow: 'hidden',
+}
+
+const cardTitleListStyle = {
+  ...ellipsisText,
+  fontSize: '14px',
+  fontWeight: '600',
+  textAlign: 'left',
+}
+
 export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
   return (
-    <VStack
-      distribution="start"
-      alignment="start"
-      css={{
-        width: '100%',
-      }}
-    >
-      <HStack
-        alignment="start"
-        distribution="between"
-        css={{
-          width: '100%',
-          display: 'grid',
-          gridTemplateColumns: '0.01fr 1fr 2fr 150px',
-          gridTemplateRows: '1fr',
-          borderBottom: '1px solid $graySeparator',
-          height: '45px',
-        }}
-      >
-        <ProgressBarVertical
-          fillPercentage={props.item.readingProgressPercent}
-          fillColor={theme.colors.highlight.toString()}
-          backgroundColor={theme.colors.grayProgressBackground.toString()}
-          borderRadius={
-            props.item.readingProgressPercent === 100 ? '0' : '0px 8px 8px 0px'
-          }
-          height={'45px'}
-        />
-        <CardTitle title={props.item.title} />
-        <StyledText
-          css={{
-            ...ellipsisText,
-            color: '$grayTextContrast',
-          }}
-          data-testid="listDesc"
-        >
-          {/* <Box css={{ display: 'block', py: '12px' }}> */}
-          {props.item.labels?.map(({ name, color }, index) => (
-            <LabelChip key={index} text={name || ''} color={color} />
-          ))}
-          {/* </Box> */}
-          {props.item.description}
-        </StyledText>
+    <>
+      {props.layout !== 'GRID_LAYOUT' ? (
+        //   <VStack
+        //     css={{
+        //       p: '12px',
+        //       height: '100%',
+        //       // width: '100%',
+        //       // maxWidth: '100%',
+        //       borderRadius: '8px',
+        //       cursor: 'pointer',
+        //       // wordBreak: 'break-word',
+        //       // overflow: 'clip',
+        //       border: '1px solid $libraryActiveMenuItem',
+        //       // position: 'relative',
+        //     }}
+        //     alignment="start"
+        //     distribution="start"
+        //     onClick={() => {
+        //       props.handleAction('showDetail')
+        //     }}
+        //   >
+        //     {/* {props.item.image && props.layout !== 'LIST_LAYOUT' && (
+        //   <CoverImage
+        //     src={props.item.image}
+        //     alt="Link Preview Image"
+        //     width="100%"
+        //     height={160}
+        //     css={{ borderRadius: '8px' }}
+        //     onError={(e) => {
+        //       ;(e.target as HTMLElement).style.display = 'none'
+        //     }}
+        //   />
+        // )} */}
+        //     <VStack
+        //       distribution="start"
+        //       alignment="start"
+        //       css={{
+        //         px: '0px',
+        //         width: '100%',
+        //         pl: '$1',
+        //       }}
+        //     >
+        //       <HStack
+        //         alignment="start"
+        //         distribution="between"
+        //         css={{
+        //           width: '100%',
+        //           //p: '0px',
+        //           //mr: '-12px',
+        //           mt: '15px',
+        //           display: 'grid',
+        //           gridTemplateColumns: '1fr 24px',
+        //           gridTemplateRows: '1fr',
+        //         }}
+        //       >
+        //         <CardTitle title={props.item.title} />
+        //         <Box
+        //           css={{ alignSelf: 'end', alignItems: 'start', height: '100%' }}
+        //           onClick={(e) => {
+        //             // This is here to prevent menu click events from bubbling
+        //             // up and causing us to "click" on the link item.
+        //             e.stopPropagation()
+        //           }}
+        //         >
+        //           <CardMenu
+        //             item={props.item}
+        //             viewer={props.viewer}
+        //             triggerElement={
+        //               <MoreOptionsIcon
+        //                 size={24}
+        //                 strokeColor={theme.colors.grayTextContrast.toString()}
+        //                 orientation="horizontal"
+        //               />
+        //             }
+        //             actionHandler={props.handleAction}
+        //           />
+        //         </Box>
+        //       </HStack>
+        //       <HStack alignment="start" distribution="between">
+        //         <StyledText
+        //           style="caption"
+        //           css={{ fontWeight: '600', margin: '5px 8px 5px 0' }}
+        //         >
+        //           {props.item.author && (
+        //             <SpanBox>{removeHTMLTags(props.item.author)}</SpanBox>
+        //           )}
+        //           {props.originText && (
+        //             <>
+        //               <Box
+        //                 css={{
+        //                   height: '4px',
+        //                   width: '4px',
+        //                   borderRadius: '50%',
+        //                   display: 'inline-block',
+        //                   background: 'var(--colors-graySolid)',
+        //                 }}
+        //               ></Box>
+        //               <SpanBox css={{ color: 'var(--colors-graySolid)' }}>
+        //                 {props.originText}
+        //               </SpanBox>
+        //             </>
+        //           )}
+        //         </StyledText>
+        //       </HStack>
+        //     </VStack>
+        //     <HStack
+        //       alignment="start"
+        //       distribution="between"
+        //       css={{
+        //         width: '100%',
+        //         pt: '$2',
+        //         px: '$1',
+        //         pr: '12px',
+        //         mt: '7px',
+        //         flexGrow: '1',
+        //       }}
+        //     >
+        //       <StyledText
+        //         css={{
+        //           // m: 0,
+        //           // py: '0px',
+        //           // mr: '$2',
+        //           fontStyle: 'normal',
+        //           fontWeight: '400',
+        //           fontSize: '14px',
+        //           // lineHeight: '125%',
+        //           // color: '$grayTextContrast',
+        //           // flexGrow: '4',
+        //           // overflow: 'hidden',
+        //           // display: '-webkit-box',
+        //           // WebkitLineClamp: 5,
+        //           // WebkitBoxOrient: 'vertical',
+        //         }}
+        //         data-testid="listDesc"
+        //       >
+        //         {props.item.description}
+        //       </StyledText>
+        //     </HStack>
+        //     <Box css={{ display: 'block', py: '12px' }}>
+        //       {props.item.labels?.map(({ name, color }, index) => (
+        //         <LabelChip key={index} text={name || ''} color={color} />
+        //       ))}
+        //     </Box>
+        //     <ProgressBar
+        //       fillPercentage={props.item.readingProgressPercent}
+        //       fillColor={theme.colors.highlight.toString()}
+        //       backgroundColor={theme.colors.lightBorder.toString()}
+        //       borderRadius={
+        //         props.item.readingProgressPercent === 100
+        //           ? '0'
+        //           : '0px 8px 8px 0px'
+        //       }
+        //     />
+        //   </VStack>
+        'jjjjjjjjjjjj'
+      ) : (
+        // )}
 
-        <StyledText
-          style="caption"
-          css={{ ...ellipsisText, fontWeight: '400' }}
+        // {props.layout === 'LIST_LAYOUT' && (
+        <VStack
+          distribution="start"
+          alignment="start"
+          css={{
+            width: '100%',
+          }}
         >
-          {props.item.author && (
-            <SpanBox>{removeHTMLTags(props.item.author)}</SpanBox>
-          )}
-        </StyledText>
-      </HStack>
-    </VStack>
+          <HStack
+            alignment="start"
+            distribution="between"
+            css={{
+              width: '100%',
+              display: 'grid',
+              gridTemplateColumns: '0.01fr 1fr 2fr 150px',
+              gridTemplateRows: '1fr',
+              borderBottom: '1px solid $graySeparator',
+              height: '45px',
+            }}
+          >
+            <ProgressBarVertical
+              fillPercentage={props.item.readingProgressPercent}
+              fillColor={theme.colors.highlight.toString()}
+              backgroundColor={theme.colors.grayProgressBackground.toString()}
+              borderRadius={
+                props.item.readingProgressPercent === 100
+                  ? '0'
+                  : '0px 8px 8px 0px'
+              }
+              height={'45px'}
+            />
+            <CardTitle title={props.item.title} />
+            <StyledText
+              css={{
+                ...ellipsisText,
+                color: '$grayTextContrast',
+              }}
+              data-testid="listDesc"
+            >
+              {/* <Box css={{ display: 'block', py: '12px' }}> */}
+              {props.item.labels?.map(({ name, color }, index) => (
+                <LabelChip key={index} text={name || ''} color={color} />
+              ))}
+              {/* </Box> */}
+              {props.item.description}
+            </StyledText>
+
+            <StyledText
+              style="caption"
+              css={{ ...ellipsisText, fontWeight: '400' }}
+            >
+              {props.item.author && (
+                <SpanBox>{removeHTMLTags(props.item.author)}</SpanBox>
+              )}
+            </StyledText>
+          </HStack>
+        </VStack>
+      )}
+    </>
   )
 }
 
@@ -79,19 +264,84 @@ type CardTitleProps = {
   title: string
 }
 
-function CardTitle(props: CardTitleProps): JSX.Element {
+function CardTitle(
+  props: CardTitleProps,
+  cardProps: LinkedItemCardProps
+): JSX.Element {
   return (
     <StyledText
       style="listTitle"
       data-testid="listTitle"
-      css={{
-        ...ellipsisText,
-        fontSize: '14px',
-        fontWeight: '600',
-        textAlign: 'left',
-      }}
+      css={
+        cardProps.layout === 'GRID_LAYOUT'
+          ? cardTitleGridStyle
+          : cardTitleListStyle
+      }
     >
       {props.title}
     </StyledText>
   )
 }
+
+// export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
+//   return (
+//     <VStack
+//       distribution="start"
+//       alignment="start"
+//       css={{
+//         width: '100%',
+//       }}
+//     >
+//       <HStack
+//         alignment="start"
+//         distribution="between"
+//         css={{
+//           width: '100%',
+//           display: 'grid',
+//           gridTemplateColumns: '0.01fr 1fr 2fr 150px',
+//           gridTemplateRows: '1fr',
+//           borderBottom: '1px solid $graySeparator',
+//           height: '45px',
+//         }}
+//       >
+//         <ProgressBarVertical
+//           fillPercentage={props.item.readingProgressPercent}
+//           fillColor={theme.colors.highlight.toString()}
+//           backgroundColor={theme.colors.grayProgressBackground.toString()}
+//           borderRadius={
+//             props.item.readingProgressPercent === 100 ? '0' : '0px 8px 8px 0px'
+//           }
+//           height={'45px'}
+//         />
+//         <CardTitle title={props.item.title} />
+//         <StyledText
+//           css={{
+//             ...ellipsisText,
+//             color: '$grayTextContrast',
+//           }}
+//           data-testid="listDesc"
+//         >
+//           {/* <Box css={{ display: 'block', py: '12px' }}> */}
+//           {props.item.labels?.map(({ name, color }, index) => (
+//             <LabelChip key={index} text={name || ''} color={color} />
+//           ))}
+//           {/* </Box> */}
+//           {props.item.description}
+//         </StyledText>
+
+//         <StyledText
+//           style="caption"
+//           css={{ ...ellipsisText, fontWeight: '400' }}
+//         >
+//           {props.item.author && (
+//             <SpanBox>{removeHTMLTags(props.item.author)}</SpanBox>
+//           )}
+//         </StyledText>
+//       </HStack>
+//     </VStack>
+//   )
+// }
+
+// type CardTitleProps = {
+//   title: string
+// }
diff --git a/packages/web/components/templates/library/LibraryList.tsx b/packages/web/components/templates/library/LibraryList.tsx
index d7ad55f3c..71c276e98 100644
--- a/packages/web/components/templates/library/LibraryList.tsx
+++ b/packages/web/components/templates/library/LibraryList.tsx
@@ -83,7 +83,8 @@ export function LibraryList(props: LibraryListProps): JSX.Element {
           >
             {viewerData?.me && (
               <LibraryGridCard
-                layout={props.layoutCoordinator.layout}
+                //layout={props.layoutCoordinator.layout}
+                layout={'LIST_LAYOUT'}
                 item={linkedItem.node}
                 viewer={viewerData.me}
                 handleAction={(action: LinkedItemCardAction) => {