diff --git a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
index b52ebb69e..ccc70ff39 100644
--- a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
+++ b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
@@ -38,167 +38,189 @@ const cardTitleListStyle = {
   textAlign: 'left',
 }
 
+// Props
+type CardTitleProps = {
+  title: string
+}
+
+// Functions
+function CardTitle(
+  props: CardTitleProps,
+  cardProps: LinkedItemCardProps
+): JSX.Element {
+  return (
+    <StyledText
+      style="listTitle"
+      data-testid="listTitle"
+      css={
+        cardProps.layout === 'GRID_LAYOUT'
+          ? cardTitleGridStyle
+          : cardTitleListStyle
+      }
+    >
+      {props.title}
+    </StyledText>
+  )
+}
+
+// Component
 export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
   return (
     <>
-      {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'
+      {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>
       ) : (
-        // )}
-
-        // {props.layout === 'LIST_LAYOUT' && (
         <VStack
           distribution="start"
           alignment="start"
@@ -237,11 +259,9 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
               }}
               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>
 
@@ -259,89 +279,3 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
     </>
   )
 }
-
-type CardTitleProps = {
-  title: string
-}
-
-function CardTitle(
-  props: CardTitleProps,
-  cardProps: LinkedItemCardProps
-): JSX.Element {
-  return (
-    <StyledText
-      style="listTitle"
-      data-testid="listTitle"
-      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 71c276e98..d7ad55f3c 100644
--- a/packages/web/components/templates/library/LibraryList.tsx
+++ b/packages/web/components/templates/library/LibraryList.tsx
@@ -83,8 +83,7 @@ export function LibraryList(props: LibraryListProps): JSX.Element {
           >
             {viewerData?.me && (
               <LibraryGridCard
-                //layout={props.layoutCoordinator.layout}
-                layout={'LIST_LAYOUT'}
+                layout={props.layoutCoordinator.layout}
                 item={linkedItem.node}
                 viewer={viewerData.me}
                 handleAction={(action: LinkedItemCardAction) => {