diff --git a/apple/Omnivore.xcodeproj/project.pbxproj b/apple/Omnivore.xcodeproj/project.pbxproj
index 540bae3c6..2bbda4d0a 100644
--- a/apple/Omnivore.xcodeproj/project.pbxproj
+++ b/apple/Omnivore.xcodeproj/project.pbxproj
@@ -1400,7 +1400,7 @@
 					"@executable_path/../Frameworks",
 				);
 				MACOSX_DEPLOYMENT_TARGET = 12.0;
-				MARKETING_VERSION = 1.28.0;
+				MARKETING_VERSION = 1.29.0;
 				MTL_ENABLE_DEBUG_INFO = INCLUDE_SOURCE;
 				MTL_FAST_MATH = YES;
 				PRODUCT_BUNDLE_IDENTIFIER = app.omnivore.app;
@@ -1435,7 +1435,7 @@
 					"@executable_path/../Frameworks",
 				);
 				MACOSX_DEPLOYMENT_TARGET = 12.0;
-				MARKETING_VERSION = 1.28.0;
+				MARKETING_VERSION = 1.29.0;
 				MTL_FAST_MATH = YES;
 				PRODUCT_BUNDLE_IDENTIFIER = app.omnivore.app;
 				PRODUCT_NAME = "$(TARGET_NAME)";
@@ -1490,7 +1490,7 @@
 					"$(inherited)",
 					"@executable_path/Frameworks",
 				);
-				MARKETING_VERSION = 1.28.0;
+				MARKETING_VERSION = 1.29.0;
 				PRODUCT_BUNDLE_IDENTIFIER = app.omnivore.app;
 				PRODUCT_NAME = Omnivore;
 				PROVISIONING_PROFILE_SPECIFIER = "";
@@ -1831,7 +1831,7 @@
 					"$(inherited)",
 					"@executable_path/Frameworks",
 				);
-				MARKETING_VERSION = 1.28.0;
+				MARKETING_VERSION = 1.29.0;
 				PRODUCT_BUNDLE_IDENTIFIER = app.omnivore.app;
 				PRODUCT_NAME = Omnivore;
 				PROVISIONING_PROFILE_SPECIFIER = "";
diff --git a/apple/OmnivoreKit/Sources/App/Views/WebReader/WebReaderContainer.swift b/apple/OmnivoreKit/Sources/App/Views/WebReader/WebReaderContainer.swift
index 8560ee329..aab724892 100644
--- a/apple/OmnivoreKit/Sources/App/Views/WebReader/WebReaderContainer.swift
+++ b/apple/OmnivoreKit/Sources/App/Views/WebReader/WebReaderContainer.swift
@@ -275,6 +275,14 @@ struct WebReaderContainerView: View {
         Spacer()
       #endif
 
+      Button(
+        action: { showLabelsModal = true },
+        label: {
+          Image.label
+        }
+      )
+      .padding(.trailing, 4)
+
       Button(
         action: { showNotebookView = true },
         label: {
diff --git a/packages/web/components/elements/LabelChip.tsx b/packages/web/components/elements/LabelChip.tsx
index 332052c5e..a18ad44a0 100644
--- a/packages/web/components/elements/LabelChip.tsx
+++ b/packages/web/components/elements/LabelChip.tsx
@@ -17,7 +17,7 @@ export function LabelChip(props: LabelChipProps): JSX.Element {
   const isDark = isDarkTheme()
 
   const selectedBorder = isDark ? '#FFEA9F' : 'black'
-  const unSelectedBorder = isDark ? '#2A2A2A' : '#D9D9D9'
+  const unSelectedBorder = isDark ? '#2A2A2A' : '#F5F5F5'
 
   return (
     <SpanBox
diff --git a/packages/web/components/elements/ProgressBar.tsx b/packages/web/components/elements/ProgressBar.tsx
index cc39172a5..a367bcd51 100644
--- a/packages/web/components/elements/ProgressBar.tsx
+++ b/packages/web/components/elements/ProgressBar.tsx
@@ -11,9 +11,8 @@ export function ProgressBar(props: ProgressBarProps): JSX.Element {
   return (
     <Box
       css={{
-        height: '4px',
+        height: '5px',
         width: '100%',
-        borderRadius: '$1',
         overflow: 'hidden',
         backgroundColor: props.backgroundColor,
       }}
@@ -23,7 +22,6 @@ export function ProgressBar(props: ProgressBarProps): JSX.Element {
           height: '100%',
           width: `${props.fillPercentage}%`,
           backgroundColor: props.fillColor,
-          borderRadius: props.borderRadius,
         }}
       />
     </Box>
diff --git a/packages/web/components/elements/ProgressBarVertical.tsx b/packages/web/components/elements/ProgressBarVertical.tsx
deleted file mode 100644
index aaa451de7..000000000
--- a/packages/web/components/elements/ProgressBarVertical.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { Box } from './../elements/LayoutPrimitives'
-
-type ProgressBarVProps = {
-  fillPercentage: number
-  fillColor: string
-  backgroundColor: string
-  borderRadius: string
-  height?: string
-}
-
-export function ProgressBarVertical(props: ProgressBarVProps): JSX.Element {
-  return (
-    <Box
-      css={{
-        height: props.height ?? '100%',
-        width: '2px',
-        borderRadius: '$1',
-        overflow: 'hidden',
-        backgroundColor: props.backgroundColor,
-        mr: '12px',
-      }}
-    >
-      <Box
-        css={{
-          height: `${props.fillPercentage}%`,
-          width: '100%',
-          backgroundColor: props.fillColor,
-          borderRadius: props.borderRadius,
-        }}
-      />
-    </Box>
-  )
-}
diff --git a/packages/web/components/elements/icons/CaretDownIcon.tsx b/packages/web/components/elements/icons/CaretDownIcon.tsx
new file mode 100644
index 000000000..f83a5e286
--- /dev/null
+++ b/packages/web/components/elements/icons/CaretDownIcon.tsx
@@ -0,0 +1,29 @@
+/* eslint-disable functional/no-class */
+/* eslint-disable functional/no-this-expression */
+import { IconProps } from './IconProps'
+
+import React from 'react'
+
+export class CaretDownIcon extends React.Component<IconProps> {
+  render() {
+    const size = (this.props.size || 26).toString()
+    const color = (this.props.color || '#2A2A2A').toString()
+
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={size}
+        height={size}
+        viewBox="0 0 9 9"
+        fill="none"
+      >
+        <g>
+          <path
+            d="M7.0618 1.19531C7.21941 1.19641 7.37452 1.23475 7.51449 1.30719C7.65446 1.37964 7.77533 1.48414 7.86723 1.61218C7.95913 1.74022 8.01947 1.88817 8.04332 2.04396C8.06717 2.19975 8.05386 2.35898 8.00447 2.50865L7.9818 2.57031L7.96114 2.61231L5.59781 6.68998C5.51439 6.84091 5.39337 6.9677 5.24649 7.05804C5.09961 7.14839 4.93186 7.19921 4.75954 7.20559C4.58721 7.21196 4.41617 7.17366 4.26302 7.09442C4.10986 7.01517 3.9798 6.89766 3.88547 6.75331L3.85114 6.69565L1.48447 2.61231L1.46414 2.57065C1.40411 2.42286 1.3803 2.26285 1.39471 2.10399C1.40912 1.94513 1.46132 1.79202 1.54696 1.65744C1.6326 1.52287 1.74919 1.41073 1.887 1.3304C2.02481 1.25006 2.17984 1.20386 2.33914 1.19565L2.35847 1.19531L2.37847 1.19598L2.3928 1.19531H7.0618Z"
+            fill={color}
+          />
+        </g>
+      </svg>
+    )
+  }
+}
diff --git a/packages/web/components/patterns/LibraryCards/CardTypes.tsx b/packages/web/components/patterns/LibraryCards/CardTypes.tsx
index 2c9077661..799509cb2 100644
--- a/packages/web/components/patterns/LibraryCards/CardTypes.tsx
+++ b/packages/web/components/patterns/LibraryCards/CardTypes.tsx
@@ -1,6 +1,7 @@
 import { LayoutType } from '../../templates/homeFeed/HomeFeedContainer'
 import { UserBasicData } from '../../../lib/networking/queries/useGetViewerQuery'
 import type { LibraryItemNode } from '../../../lib/networking/queries/useGetLibraryItemsQuery'
+import { MultiSelectMode } from '../../templates/homeFeed/LibraryHeader'
 
 export type LinkedItemCardAction =
   | 'showDetail'
@@ -23,9 +24,10 @@ export type LinkedItemCardProps = {
 
   handleAction: (action: LinkedItemCardAction) => void
 
-  inMultiSelect: boolean
   isChecked: boolean
   setIsChecked: (itemId: string, set: boolean) => void
 
+  multiSelectMode: MultiSelectMode
+
   isHovered?: boolean
 }
diff --git a/packages/web/components/patterns/LibraryCards/FallbackImage.tsx b/packages/web/components/patterns/LibraryCards/FallbackImage.tsx
new file mode 100644
index 000000000..83edd385c
--- /dev/null
+++ b/packages/web/components/patterns/LibraryCards/FallbackImage.tsx
@@ -0,0 +1,1575 @@
+import { VStack } from '../../elements/LayoutPrimitives'
+
+type FallbackImageProps = {
+  title: string
+  width: string
+  height: string
+  fontSize: string
+}
+
+export const FallbackImage = (props: FallbackImageProps): JSX.Element => {
+  const idx = (Math.abs(hashCode(props.title)) % Colors.length) - 1
+  const color = Colors[idx]
+
+  return (
+    <VStack
+      distribution="center"
+      alignment="center"
+      css={{
+        // position: 'relative',
+        width: props.width,
+        height: props.height,
+        backgroundColor: color.colors[1],
+        color: color.colors[0],
+        fontSize: props.fontSize,
+        fontWeight: 'bold',
+        fontFamily: '$display',
+        overflow: 'hidden',
+        borderRadius: '4px',
+      }}
+    >
+      {props.title.substring(0, 1).toLocaleUpperCase()}
+    </VStack>
+  )
+}
+
+const hashCode = (str: string) => {
+  let hash = 0
+  for (let i = 0; i < str.length; i++) {
+    hash = ((hash << 5) - hash + str.charCodeAt(i)) & 0xffffffff
+  }
+  return hash
+}
+
+const Colors = [
+  {
+    name: 'Omolon',
+    colors: ['#091E3A', '#2F80ED', '#2D9EE0'],
+  },
+  {
+    name: 'Farhan',
+    colors: ['#9400D3', '#4B0082'],
+  },
+  {
+    name: 'Purple',
+    colors: ['#c84e89', '#F15F79'],
+  },
+  {
+    name: 'Ibtesam',
+    colors: ['#00F5A0', '#00D9F5'],
+  },
+  {
+    name: 'Radioactive Heat',
+    colors: ['#F7941E', '#72C6EF', '#00A651'],
+  },
+  {
+    name: 'The Sky And The Sea',
+    colors: ['#F7941E', '#004E8F'],
+  },
+  {
+    name: 'From Ice To Fire',
+    colors: ['#72C6EF', '#004E8F'],
+  },
+
+  {
+    name: 'Blue & Orange',
+    colors: ['#FD8112', '#0085CA'],
+  },
+  {
+    name: 'Purple Dream',
+    colors: ['#bf5ae0', '#a811da'],
+  },
+  {
+    name: 'Blu',
+    colors: ['#00416A', '#E4E5E6'],
+  },
+  {
+    name: 'Summer Breeze',
+    colors: ['#fbed96', '#abecd6'],
+  },
+  {
+    name: 'Ver',
+    colors: ['#FFE000', '#799F0C'],
+  },
+  {
+    name: 'Ver Black',
+    colors: ['#F7F8F8', '#ACBB78'],
+  },
+  {
+    name: 'Combi',
+    colors: ['#00416A', '#799F0C', '#FFE000'],
+  },
+  {
+    name: 'Anwar',
+    colors: ['#334d50', '#cbcaa5'],
+  },
+  {
+    name: 'Bluelagoo',
+    colors: ['#0052D4', '#4364F7', '#6FB1FC'],
+  },
+  {
+    name: 'Lunada',
+    colors: ['#5433FF', '#20BDFF', '#A5FECB'],
+  },
+  {
+    name: 'Reaqua',
+    colors: ['#799F0C', '#ACBB78'],
+  },
+  {
+    name: 'Mango',
+    colors: ['#ffe259', '#ffa751'],
+  },
+  {
+    name: 'Bupe',
+    colors: ['#00416A', '#E4E5E6'],
+  },
+  {
+    name: 'Rea',
+    colors: ['#FFE000', '#799F0C'],
+  },
+  {
+    name: 'Windy',
+    colors: ['#acb6e5', '#86fde8'],
+  },
+  {
+    name: 'Royal Blue',
+    colors: ['#536976', '#292E49'],
+  },
+  {
+    name: 'Royal Blue + Petrol',
+    colors: ['#BBD2C5', '#536976', '#292E49'],
+  },
+  {
+    name: 'Copper',
+    colors: ['#B79891', '#94716B'],
+  },
+  {
+    name: 'Anamnisar',
+    colors: ['#9796f0', '#fbc7d4'],
+  },
+  {
+    name: 'Petrol',
+    colors: ['#BBD2C5', '#536976'],
+  },
+  {
+    name: 'Sky',
+    colors: ['#076585', '#fff'],
+  },
+  {
+    name: 'Sel',
+    colors: ['#00467F', '#A5CC82'],
+  },
+  {
+    name: 'Afternoon',
+    colors: ['#000C40', '#607D8B'],
+  },
+  {
+    name: 'Skyline',
+    colors: ['#1488CC', '#2B32B2'],
+  },
+  {
+    name: 'DIMIGO',
+    colors: ['#ec008c', '#fc6767'],
+  },
+  {
+    name: 'Purple Love',
+    colors: ['#cc2b5e', '#753a88'],
+  },
+  {
+    name: 'Sexy Blue',
+    colors: ['#2193b0', '#6dd5ed'],
+  },
+  {
+    name: 'Blooker20',
+    colors: ['#e65c00', '#F9D423'],
+  },
+  {
+    name: 'Sea Blue',
+    colors: ['#2b5876', '#4e4376'],
+  },
+  {
+    name: 'Nimvelo',
+    colors: ['#314755', '#26a0da'],
+  },
+  {
+    name: 'Hazel',
+    colors: ['#77A1D3', '#79CBCA', '#E684AE'],
+  },
+  {
+    name: 'Noon to Dusk',
+    colors: ['#ff6e7f', '#bfe9ff'],
+  },
+  {
+    name: 'YouTube',
+    colors: ['#e52d27', '#b31217'],
+  },
+  {
+    name: 'Cool Brown',
+    colors: ['#603813', '#b29f94'],
+  },
+  {
+    name: 'Harmonic Energy',
+    colors: ['#16A085', '#F4D03F'],
+  },
+  {
+    name: 'Playing with Reds',
+    colors: ['#D31027', '#EA384D'],
+  },
+  {
+    name: 'Sunny Days',
+    colors: ['#EDE574', '#E1F5C4'],
+  },
+  {
+    name: 'Green Beach',
+    colors: ['#02AAB0', '#00CDAC'],
+  },
+  {
+    name: 'Intuitive Purple',
+    colors: ['#DA22FF', '#9733EE'],
+  },
+  {
+    name: 'Emerald Water',
+    colors: ['#348F50', '#56B4D3'],
+  },
+  {
+    name: 'Lemon Twist',
+    colors: ['#3CA55C', '#B5AC49'],
+  },
+  {
+    name: 'Monte Carlo',
+    colors: ['#CC95C0', '#DBD4B4', '#7AA1D2'],
+  },
+  {
+    name: 'Horizon',
+    colors: ['#003973', '#E5E5BE'],
+  },
+  {
+    name: 'Rose Water',
+    colors: ['#E55D87', '#5FC3E4'],
+  },
+  {
+    name: 'Frozen',
+    colors: ['#403B4A', '#E7E9BB'],
+  },
+  {
+    name: 'Mango Pulp',
+    colors: ['#F09819', '#EDDE5D'],
+  },
+  {
+    name: 'Bloody Mary',
+    colors: ['#FF512F', '#DD2476'],
+  },
+  {
+    name: 'Aubergine',
+    colors: ['#AA076B', '#61045F'],
+  },
+  {
+    name: 'Aqua Marine',
+    colors: ['#1A2980', '#26D0CE'],
+  },
+  {
+    name: 'Sunrise',
+    colors: ['#FF512F', '#F09819'],
+  },
+  {
+    name: 'Purple Paradise',
+    colors: ['#1D2B64', '#F8CDDA'],
+  },
+  {
+    name: 'Stripe',
+    colors: ['#1FA2FF', '#12D8FA', '#A6FFCB'],
+  },
+  {
+    name: 'Sea Weed',
+    colors: ['#4CB8C4', '#3CD3AD'],
+  },
+  {
+    name: 'Pinky',
+    colors: ['#DD5E89', '#F7BB97'],
+  },
+  {
+    name: 'Cherry',
+    colors: ['#EB3349', '#F45C43'],
+  },
+  {
+    name: 'Mojito',
+    colors: ['#1D976C', '#93F9B9'],
+  },
+  {
+    name: 'Juicy Orange',
+    colors: ['#FF8008', '#FFC837'],
+  },
+  {
+    name: 'Mirage',
+    colors: ['#16222A', '#3A6073'],
+  },
+  {
+    name: 'Steel Gray',
+    colors: ['#1F1C2C', '#928DAB'],
+  },
+  {
+    name: 'Kashmir',
+    colors: ['#614385', '#516395'],
+  },
+  {
+    name: 'Electric Violet',
+    colors: ['#4776E6', '#8E54E9'],
+  },
+  {
+    name: 'Venice Blue',
+    colors: ['#085078', '#85D8CE'],
+  },
+  {
+    name: 'Bora Bora',
+    colors: ['#2BC0E4', '#EAECC6'],
+  },
+  {
+    name: 'Moss',
+    colors: ['#134E5E', '#71B280'],
+  },
+  {
+    name: 'Shroom Haze',
+    colors: ['#5C258D', '#4389A2'],
+  },
+  {
+    name: 'Mystic',
+    colors: ['#757F9A', '#D7DDE8'],
+  },
+  {
+    name: 'Midnight City',
+    colors: ['#232526', '#414345'],
+  },
+  {
+    name: 'Sea Blizz',
+    colors: ['#1CD8D2', '#93EDC7'],
+  },
+  {
+    name: 'Opa',
+    colors: ['#3D7EAA', '#FFE47A'],
+  },
+  {
+    name: 'Titanium',
+    colors: ['#283048', '#859398'],
+  },
+  {
+    name: 'Mantle',
+    colors: ['#24C6DC', '#514A9D'],
+  },
+  {
+    name: 'Dracula',
+    colors: ['#DC2424', '#4A569D'],
+  },
+  {
+    name: 'Peach',
+    colors: ['#ED4264', '#FFEDBC'],
+  },
+  {
+    name: 'Moonrise',
+    colors: ['#DAE2F8', '#D6A4A4'],
+  },
+  {
+    name: 'Clouds',
+    colors: ['#ECE9E6', '#FFFFFF'],
+  },
+  {
+    name: 'Stellar',
+    colors: ['#7474BF', '#348AC7'],
+  },
+  {
+    name: 'Bourbon',
+    colors: ['#EC6F66', '#F3A183'],
+  },
+  {
+    name: 'Calm Darya',
+    colors: ['#5f2c82', '#49a09d'],
+  },
+  {
+    name: 'Influenza',
+    colors: ['#C04848', '#480048'],
+  },
+  {
+    name: 'Shrimpy',
+    colors: ['#e43a15', '#e65245'],
+  },
+  {
+    name: 'Army',
+    colors: ['#414d0b', '#727a17'],
+  },
+  {
+    name: 'Miaka',
+    colors: ['#FC354C', '#0ABFBC'],
+  },
+  {
+    name: 'Pinot Noir',
+    colors: ['#4b6cb7', '#182848'],
+  },
+  {
+    name: 'Day Tripper',
+    colors: ['#f857a6', '#ff5858'],
+  },
+  {
+    name: 'Namn',
+    colors: ['#a73737', '#7a2828'],
+  },
+  {
+    name: 'Blurry Beach',
+    colors: ['#d53369', '#cbad6d'],
+  },
+  {
+    name: 'Vasily',
+    colors: ['#e9d362', '#333333'],
+  },
+  {
+    name: 'A Lost Memory',
+    colors: ['#DE6262', '#FFB88C'],
+  },
+  {
+    name: 'Petrichor',
+    colors: ['#666600', '#999966'],
+  },
+  {
+    name: 'Jonquil',
+    colors: ['#FFEEEE', '#DDEFBB'],
+  },
+  {
+    name: 'Sirius Tamed',
+    colors: ['#EFEFBB', '#D4D3DD'],
+  },
+  {
+    name: 'Kyoto',
+    colors: ['#c21500', '#ffc500'],
+  },
+  {
+    name: 'Misty Meadow',
+    colors: ['#215f00', '#e4e4d9'],
+  },
+  {
+    name: 'Aqualicious',
+    colors: ['#50C9C3', '#96DEDA'],
+  },
+  {
+    name: 'Moor',
+    colors: ['#616161', '#9bc5c3'],
+  },
+  {
+    name: 'Almost',
+    colors: ['#ddd6f3', '#faaca8'],
+  },
+  {
+    name: 'Forever Lost',
+    colors: ['#5D4157', '#A8CABA'],
+  },
+  {
+    name: 'Winter',
+    colors: ['#E6DADA', '#274046'],
+  },
+  {
+    name: 'Nelson',
+    colors: ['#f2709c', '#ff9472'],
+  },
+  {
+    name: 'Autumn',
+    colors: ['#DAD299', '#B0DAB9'],
+  },
+  {
+    name: 'Candy',
+    colors: ['#D3959B', '#BFE6BA'],
+  },
+  {
+    name: 'Reef',
+    colors: ['#00d2ff', '#3a7bd5'],
+  },
+  {
+    name: 'The Strain',
+    colors: ['#870000', '#190A05'],
+  },
+  {
+    name: 'Dirty Fog',
+    colors: ['#B993D6', '#8CA6DB'],
+  },
+  {
+    name: 'Earthly',
+    colors: ['#649173', '#DBD5A4'],
+  },
+  {
+    name: 'Virgin',
+    colors: ['#C9FFBF', '#FFAFBD'],
+  },
+  {
+    name: 'Ash',
+    colors: ['#606c88', '#3f4c6b'],
+  },
+  {
+    name: 'Cherryblossoms',
+    colors: ['#FBD3E9', '#BB377D'],
+  },
+  {
+    name: 'Parklife',
+    colors: ['#ADD100', '#7B920A'],
+  },
+  {
+    name: 'Dance To Forget',
+    colors: ['#FF4E50', '#F9D423'],
+  },
+  {
+    name: 'Starfall',
+    colors: ['#F0C27B', '#4B1248'],
+  },
+  {
+    name: 'Red Mist',
+    colors: ['#000000', '#e74c3c'],
+  },
+  {
+    name: 'Teal Love',
+    colors: ['#AAFFA9', '#11FFBD'],
+  },
+  {
+    name: 'Neon Life',
+    colors: ['#B3FFAB', '#12FFF7'],
+  },
+  {
+    name: 'Man of Steel',
+    colors: ['#780206', '#061161'],
+  },
+  {
+    name: 'Amethyst',
+    colors: ['#9D50BB', '#6E48AA'],
+  },
+  {
+    name: 'Cheer Up Emo Kid',
+    colors: ['#556270', '#FF6B6B'],
+  },
+  {
+    name: 'Shore',
+    colors: ['#70e1f5', '#ffd194'],
+  },
+  {
+    name: 'Facebook Messenger',
+    colors: ['#00c6ff', '#0072ff'],
+  },
+  {
+    name: 'SoundCloud',
+    colors: ['#fe8c00', '#f83600'],
+  },
+  {
+    name: 'Behongo',
+    colors: ['#52c234', '#061700'],
+  },
+  {
+    name: 'ServQuick',
+    colors: ['#485563', '#29323c'],
+  },
+  {
+    name: 'Friday',
+    colors: ['#83a4d4', '#b6fbff'],
+  },
+  {
+    name: 'Martini',
+    colors: ['#FDFC47', '#24FE41'],
+  },
+  {
+    name: 'Metallic Toad',
+    colors: ['#abbaab', '#ffffff'],
+  },
+  {
+    name: 'Between The Clouds',
+    colors: ['#73C8A9', '#373B44'],
+  },
+  {
+    name: 'Crazy Orange I',
+    colors: ['#D38312', '#A83279'],
+  },
+  {
+    name: 'Hersheys',
+    colors: ['#1e130c', '#9a8478'],
+  },
+  {
+    name: 'Talking To Mice Elf',
+    colors: ['#948E99', '#2E1437'],
+  },
+  {
+    name: 'Purple Bliss',
+    colors: ['#360033', '#0b8793'],
+  },
+  {
+    name: 'Predawn',
+    colors: ['#FFA17F', '#00223E'],
+  },
+  {
+    name: 'Endless River',
+    colors: ['#43cea2', '#185a9d'],
+  },
+  {
+    name: 'Pastel Orange at the Sun',
+    colors: ['#ffb347', '#ffcc33'],
+  },
+  {
+    name: 'Twitch',
+    colors: ['#6441A5', '#2a0845'],
+  },
+  {
+    name: 'Atlas',
+    colors: ['#FEAC5E', '#C779D0', '#4BC0C8'],
+  },
+  {
+    name: 'Instagram',
+    colors: ['#833ab4', '#fd1d1d', '#fcb045'],
+  },
+  {
+    name: 'Flickr',
+    colors: ['#ff0084', '#33001b'],
+  },
+  {
+    name: 'Vine',
+    colors: ['#00bf8f', '#001510'],
+  },
+  {
+    name: 'Turquoise flow',
+    colors: ['#136a8a', '#267871'],
+  },
+  {
+    name: 'Portrait',
+    colors: ['#8e9eab', '#eef2f3'],
+  },
+  {
+    name: 'Virgin America',
+    colors: ['#7b4397', '#dc2430'],
+  },
+  {
+    name: 'Koko Caramel',
+    colors: ['#D1913C', '#FFD194'],
+  },
+  {
+    name: 'Fresh Turboscent',
+    colors: ['#F1F2B5', '#135058'],
+  },
+  {
+    name: 'Green to dark',
+    colors: ['#6A9113', '#141517'],
+  },
+  {
+    name: 'Ukraine',
+    colors: ['#004FF9', '#FFF94C'],
+  },
+  {
+    name: 'Curiosity blue',
+    colors: ['#525252', '#3d72b4'],
+  },
+  {
+    name: 'Dark Knight',
+    colors: ['#BA8B02', '#181818'],
+  },
+  {
+    name: 'Piglet',
+    colors: ['#ee9ca7', '#ffdde1'],
+  },
+  {
+    name: 'Lizard',
+    colors: ['#304352', '#d7d2cc'],
+  },
+  {
+    name: 'Sage Persuasion',
+    colors: ['#CCCCB2', '#757519'],
+  },
+  {
+    name: 'Between Night and Day',
+    colors: ['#2c3e50', '#3498db'],
+  },
+  {
+    name: 'Timber',
+    colors: ['#fc00ff', '#00dbde'],
+  },
+  {
+    name: 'Passion',
+    colors: ['#e53935', '#e35d5b'],
+  },
+  {
+    name: 'Clear Sky',
+    colors: ['#005C97', '#363795'],
+  },
+  {
+    name: 'Master Card',
+    colors: ['#f46b45', '#eea849'],
+  },
+  {
+    name: 'Back To Earth',
+    colors: ['#00C9FF', '#92FE9D'],
+  },
+  {
+    name: 'Deep Purple',
+    colors: ['#673AB7', '#512DA8'],
+  },
+  {
+    name: 'Little Leaf',
+    colors: ['#76b852', '#8DC26F'],
+  },
+  {
+    name: 'Netflix',
+    colors: ['#8E0E00', '#1F1C18'],
+  },
+  {
+    name: 'Light Orange',
+    colors: ['#FFB75E', '#ED8F03'],
+  },
+  {
+    name: 'Green and Blue',
+    colors: ['#c2e59c', '#64b3f4'],
+  },
+  {
+    name: 'Poncho',
+    colors: ['#403A3E', '#BE5869'],
+  },
+  {
+    name: 'Back to the Future',
+    colors: ['#C02425', '#F0CB35'],
+  },
+  {
+    name: 'Blush',
+    colors: ['#B24592', '#F15F79'],
+  },
+  {
+    name: 'Inbox',
+    colors: ['#457fca', '#5691c8'],
+  },
+  {
+    name: 'Purplin',
+    colors: ['#6a3093', '#a044ff'],
+  },
+  {
+    name: 'Pale Wood',
+    colors: ['#eacda3', '#d6ae7b'],
+  },
+  {
+    name: 'Haikus',
+    colors: ['#fd746c', '#ff9068'],
+  },
+  {
+    name: 'Pizelex',
+    colors: ['#114357', '#F29492'],
+  },
+  {
+    name: 'Joomla',
+    colors: ['#1e3c72', '#2a5298'],
+  },
+  {
+    name: 'Christmas',
+    colors: ['#2F7336', '#AA3A38'],
+  },
+  {
+    name: 'Minnesota Vikings',
+    colors: ['#5614B0', '#DBD65C'],
+  },
+  {
+    name: 'Miami Dolphins',
+    colors: ['#4DA0B0', '#D39D38'],
+  },
+  {
+    name: 'Forest',
+    colors: ['#5A3F37', '#2C7744'],
+  },
+  {
+    name: 'Nighthawk',
+    colors: ['#2980b9', '#2c3e50'],
+  },
+  {
+    name: 'Superman',
+    colors: ['#0099F7', '#F11712'],
+  },
+  {
+    name: 'Suzy',
+    colors: ['#834d9b', '#d04ed6'],
+  },
+  {
+    name: 'Dark Skies',
+    colors: ['#4B79A1', '#283E51'],
+  },
+  {
+    name: 'Deep Space',
+    colors: ['#000000', '#434343'],
+  },
+  {
+    name: 'Decent',
+    colors: ['#4CA1AF', '#C4E0E5'],
+  },
+  {
+    name: 'Colors Of Sky',
+    colors: ['#E0EAFC', '#CFDEF3'],
+  },
+  {
+    name: 'Purple White',
+    colors: ['#BA5370', '#F4E2D8'],
+  },
+  {
+    name: 'Ali',
+    colors: ['#ff4b1f', '#1fddff'],
+  },
+  {
+    name: 'Alihossein',
+    colors: ['#f7ff00', '#db36a4'],
+  },
+  {
+    name: 'Shahabi',
+    colors: ['#a80077', '#66ff00'],
+  },
+  {
+    name: 'Red Ocean',
+    colors: ['#1D4350', '#A43931'],
+  },
+  {
+    name: 'Tranquil',
+    colors: ['#EECDA3', '#EF629F'],
+  },
+  {
+    name: 'Transfile',
+    colors: ['#16BFFD', '#CB3066'],
+  },
+
+  {
+    name: 'Sylvia',
+    colors: ['#ff4b1f', '#ff9068'],
+  },
+  {
+    name: 'Sweet Morning',
+    colors: ['#FF5F6D', '#FFC371'],
+  },
+  {
+    name: 'Politics',
+    colors: ['#2196f3', '#f44336'],
+  },
+  {
+    name: 'Bright Vault',
+    colors: ['#00d2ff', '#928DAB'],
+  },
+  {
+    name: 'Solid Vault',
+    colors: ['#3a7bd5', '#3a6073'],
+  },
+  {
+    name: 'Sunset',
+    colors: ['#0B486B', '#F56217'],
+  },
+  {
+    name: 'Grapefruit Sunset',
+    colors: ['#e96443', '#904e95'],
+  },
+  {
+    name: 'Deep Sea Space',
+    colors: ['#2C3E50', '#4CA1AF'],
+  },
+  {
+    name: 'Dusk',
+    colors: ['#2C3E50', '#FD746C'],
+  },
+  {
+    name: 'Minimal Red',
+    colors: ['#F00000', '#DC281E'],
+  },
+  {
+    name: 'Royal',
+    colors: ['#141E30', '#243B55'],
+  },
+  {
+    name: 'Mauve',
+    colors: ['#42275a', '#734b6d'],
+  },
+  {
+    name: 'Frost',
+    colors: ['#000428', '#004e92'],
+  },
+  {
+    name: 'Lush',
+    colors: ['#56ab2f', '#a8e063'],
+  },
+  {
+    name: 'Firewatch',
+    colors: ['#cb2d3e', '#ef473a'],
+  },
+  {
+    name: 'Sherbert',
+    colors: ['#f79d00', '#64f38c'],
+  },
+  {
+    name: 'Blood Red',
+    colors: ['#f85032', '#e73827'],
+  },
+  {
+    name: 'Sun on the Horizon',
+    colors: ['#fceabb', '#f8b500'],
+  },
+  {
+    name: 'IIIT Delhi',
+    colors: ['#808080', '#3fada8'],
+  },
+  {
+    name: 'Jupiter',
+    colors: ['#ffd89b', '#19547b'],
+  },
+  {
+    name: '50 Shades of Grey',
+    colors: ['#bdc3c7', '#2c3e50'],
+  },
+  {
+    name: 'Dania',
+    colors: ['#BE93C5', '#7BC6CC'],
+  },
+  {
+    name: 'Limeade',
+    colors: ['#A1FFCE', '#FAFFD1'],
+  },
+  {
+    name: 'Disco',
+    colors: ['#4ECDC4', '#556270'],
+  },
+  {
+    name: 'Love Couple',
+    colors: ['#3a6186', '#89253e'],
+  },
+  {
+    name: 'Azure Pop',
+    colors: ['#ef32d9', '#89fffd'],
+  },
+  {
+    name: 'Nepal',
+    colors: ['#de6161', '#2657eb'],
+  },
+  {
+    name: 'Cosmic Fusion',
+    colors: ['#ff00cc', '#333399'],
+  },
+  {
+    name: 'Snapchat',
+    colors: ['#fffc00', '#ffffff'],
+  },
+  {
+    name: "Ed's Sunset Gradient",
+    colors: ['#ff7e5f', '#feb47b'],
+  },
+  {
+    name: 'Brady Brady Fun Fun',
+    colors: ['#00c3ff', '#ffff1c'],
+  },
+  {
+    name: 'Black Rosé',
+    colors: ['#f4c4f3', '#fc67fa'],
+  },
+  {
+    name: "80's Purple",
+    colors: ['#41295a', '#2F0743'],
+  },
+  {
+    name: 'Radar',
+    colors: ['#A770EF', '#CF8BF3', '#FDB99B'],
+  },
+  {
+    name: 'Ibiza Sunset',
+    colors: ['#ee0979', '#ff6a00'],
+  },
+  {
+    name: 'Dawn',
+    colors: ['#F3904F', '#3B4371'],
+  },
+  {
+    name: 'Mild',
+    colors: ['#67B26F', '#4ca2cd'],
+  },
+  {
+    name: 'Vice City',
+    colors: ['#3494E6', '#EC6EAD'],
+  },
+  {
+    name: 'Jaipur',
+    colors: ['#DBE6F6', '#C5796D'],
+  },
+  {
+    name: 'Jodhpur',
+    colors: ['#9CECFB', '#65C7F7', '#0052D4'],
+  },
+  {
+    name: 'Cocoaa Ice',
+    colors: ['#c0c0aa', '#1cefff'],
+  },
+  {
+    name: 'EasyMed',
+    colors: ['#DCE35B', '#45B649'],
+  },
+  {
+    name: 'Rose Colored Lenses',
+    colors: ['#E8CBC0', '#636FA4'],
+  },
+  {
+    name: 'What lies Beyond',
+    colors: ['#F0F2F0', '#000C40'],
+  },
+  {
+    name: 'Roseanna',
+    colors: ['#FFAFBD', '#ffc3a0'],
+  },
+  {
+    name: 'Honey Dew',
+    colors: ['#43C6AC', '#F8FFAE'],
+  },
+  {
+    name: 'Under the Lake',
+    colors: ['#093028', '#237A57'],
+  },
+  {
+    name: 'The Blue Lagoon',
+    colors: ['#43C6AC', '#191654'],
+  },
+  {
+    name: 'Can You Feel The Love Tonight',
+    colors: ['#4568DC', '#B06AB3'],
+  },
+  {
+    name: 'Very Blue',
+    colors: ['#0575E6', '#021B79'],
+  },
+  {
+    name: 'Love and Liberty',
+    colors: ['#200122', '#6f0000'],
+  },
+  {
+    name: 'Orca',
+    colors: ['#44A08D', '#093637'],
+  },
+  {
+    name: 'Venice',
+    colors: ['#6190E8', '#A7BFE8'],
+  },
+  {
+    name: 'Pacific Dream',
+    colors: ['#34e89e', '#0f3443'],
+  },
+  {
+    name: 'Learning and Leading',
+    colors: ['#F7971E', '#FFD200'],
+  },
+  {
+    name: 'Celestial',
+    colors: ['#C33764', '#1D2671'],
+  },
+  {
+    name: 'Purplepine',
+    colors: ['#20002c', '#cbb4d4'],
+  },
+  {
+    name: 'Sha la la',
+    colors: ['#D66D75', '#E29587'],
+  },
+  {
+    name: 'Mini',
+    colors: ['#30E8BF', '#FF8235'],
+  },
+  {
+    name: 'Maldives',
+    colors: ['#B2FEFA', '#0ED2F7'],
+  },
+  {
+    name: 'Cinnamint',
+    colors: ['#4AC29A', '#BDFFF3'],
+  },
+  {
+    name: 'Html',
+    colors: ['#E44D26', '#F16529'],
+  },
+  {
+    name: 'Coal',
+    colors: ['#EB5757', '#000000'],
+  },
+  {
+    name: 'Sunkist',
+    colors: ['#F2994A', '#F2C94C'],
+  },
+  {
+    name: 'Blue Skies',
+    colors: ['#56CCF2', '#2F80ED'],
+  },
+  {
+    name: 'Chitty Chitty Bang Bang',
+    colors: ['#007991', '#78ffd6'],
+  },
+  {
+    name: 'Visions of Grandeur',
+    colors: ['#000046', '#1CB5E0'],
+  },
+  {
+    name: 'Crystal Clear',
+    colors: ['#159957', '#155799'],
+  },
+  {
+    name: 'Mello',
+    colors: ['#c0392b', '#8e44ad'],
+  },
+  {
+    name: 'Compare Now',
+    colors: ['#EF3B36', '#FFFFFF'],
+  },
+  {
+    name: 'Meridian',
+    colors: ['#283c86', '#45a247'],
+  },
+  {
+    name: 'Relay',
+    colors: ['#3A1C71', '#D76D77', '#FFAF7B'],
+  },
+  {
+    name: 'Alive',
+    colors: ['#CB356B', '#BD3F32'],
+  },
+  {
+    name: 'Scooter',
+    colors: ['#36D1DC', '#5B86E5'],
+  },
+  {
+    name: 'Terminal',
+    colors: ['#000000', '#0f9b0f'],
+  },
+  {
+    name: 'Telegram',
+    colors: ['#1c92d2', '#f2fcfe'],
+  },
+  {
+    name: 'Crimson Tide',
+    colors: ['#642B73', '#C6426E'],
+  },
+  {
+    name: 'Socialive',
+    colors: ['#06beb6', '#48b1bf'],
+  },
+  {
+    name: 'Subu',
+    colors: ['#0cebeb', '#20e3b2', '#29ffc6'],
+  },
+  {
+    name: 'Broken Hearts',
+    colors: ['#d9a7c7', '#fffcdc'],
+  },
+  {
+    name: 'Kimoby Is The New Blue',
+    colors: ['#396afc', '#2948ff'],
+  },
+  {
+    name: 'Dull',
+    colors: ['#C9D6FF', '#E2E2E2'],
+  },
+  {
+    name: 'Purpink',
+    colors: ['#7F00FF', '#E100FF'],
+  },
+  {
+    name: 'Orange Coral',
+    colors: ['#ff9966', '#ff5e62'],
+  },
+  {
+    name: 'Summer',
+    colors: ['#22c1c3', '#fdbb2d'],
+  },
+  {
+    name: 'King Yna',
+    colors: ['#1a2a6c', '#b21f1f', '#fdbb2d'],
+  },
+  {
+    name: 'Velvet Sun',
+    colors: ['#e1eec3', '#f05053'],
+  },
+  {
+    name: 'Zinc',
+    colors: ['#ADA996', '#F2F2F2', '#DBDBDB', '#EAEAEA'],
+  },
+  {
+    name: 'Hydrogen',
+    colors: ['#667db6', '#0082c8', '#0082c8', '#667db6'],
+  },
+  {
+    name: 'Argon',
+    colors: ['#03001e', '#7303c0', '#ec38bc', '#fdeff9'],
+  },
+  {
+    name: 'Lithium',
+    colors: ['#6D6027', '#D3CBB8'],
+  },
+  {
+    name: 'Digital Water',
+    colors: ['#74ebd5', '#ACB6E5'],
+  },
+  {
+    name: 'Orange Fun',
+    colors: ['#fc4a1a', '#f7b733'],
+  },
+  {
+    name: 'Rainbow Blue',
+    colors: ['#00F260', '#0575E6'],
+  },
+  {
+    name: 'Pink Flavour',
+    colors: ['#800080', '#ffc0cb'],
+  },
+  {
+    name: 'Sulphur',
+    colors: ['#CAC531', '#F3F9A7'],
+  },
+  {
+    name: 'Selenium',
+    colors: ['#3C3B3F', '#605C3C'],
+  },
+  {
+    name: 'Delicate',
+    colors: ['#D3CCE3', '#E9E4F0'],
+  },
+  {
+    name: 'Ohhappiness',
+    colors: ['#00b09b', '#96c93d'],
+  },
+  {
+    name: 'Lawrencium',
+    colors: ['#0f0c29', '#302b63', '#24243e'],
+  },
+  {
+    name: 'Relaxing red',
+    colors: ['#fffbd5', '#b20a2c'],
+  },
+  {
+    name: 'Taran Tado',
+    colors: ['#23074d', '#cc5333'],
+  },
+  {
+    name: 'Bighead',
+    colors: ['#c94b4b', '#4b134f'],
+  },
+  {
+    name: 'Sublime Vivid',
+    colors: ['#FC466B', '#3F5EFB'],
+  },
+  {
+    name: 'Sublime Light',
+    colors: ['#FC5C7D', '#6A82FB'],
+  },
+  {
+    name: 'Pun Yeta',
+    colors: ['#108dc7', '#ef8e38'],
+  },
+  {
+    name: 'Quepal',
+    colors: ['#11998e', '#38ef7d'],
+  },
+  {
+    name: 'Sand to Blue',
+    colors: ['#3E5151', '#DECBA4'],
+  },
+  {
+    name: 'Wedding Day Blues',
+    colors: ['#40E0D0', '#FF8C00', '#FF0080'],
+  },
+  {
+    name: 'Shifter',
+    colors: ['#bc4e9c', '#f80759'],
+  },
+  {
+    name: 'Red Sunset',
+    colors: ['#355C7D', '#6C5B7B', '#C06C84'],
+  },
+  {
+    name: 'Moon Purple',
+    colors: ['#4e54c8', '#8f94fb'],
+  },
+  {
+    name: 'Pure Lust',
+    colors: ['#333333', '#dd1818'],
+  },
+  {
+    name: 'Slight Ocean View',
+    colors: ['#a8c0ff', '#3f2b96'],
+  },
+  {
+    name: 'eXpresso',
+    colors: ['#ad5389', '#3c1053'],
+  },
+  {
+    name: 'Shifty',
+    colors: ['#636363', '#a2ab58'],
+  },
+  {
+    name: 'Vanusa',
+    colors: ['#DA4453', '#89216B'],
+  },
+  {
+    name: 'Evening Night',
+    colors: ['#005AA7', '#FFFDE4'],
+  },
+  {
+    name: 'Magic',
+    colors: ['#59C173', '#a17fe0', '#5D26C1'],
+  },
+  {
+    name: 'Margo',
+    colors: ['#FFEFBA', '#FFFFFF'],
+  },
+  {
+    name: 'Blue Raspberry',
+    colors: ['#00B4DB', '#0083B0'],
+  },
+  {
+    name: 'Citrus Peel',
+    colors: ['#FDC830', '#F37335'],
+  },
+  {
+    name: 'Sin City Red',
+    colors: ['#ED213A', '#93291E'],
+  },
+  {
+    name: 'Rastafari',
+    colors: ['#1E9600', '#FFF200', '#FF0000'],
+  },
+  {
+    name: 'Summer Dog',
+    colors: ['#a8ff78', '#78ffd6'],
+  },
+  {
+    name: 'Wiretap',
+    colors: ['#8A2387', '#E94057', '#F27121'],
+  },
+  {
+    name: 'Burning Orange',
+    colors: ['#FF416C', '#FF4B2B'],
+  },
+  {
+    name: 'Ultra Voilet',
+    colors: ['#654ea3', '#eaafc8'],
+  },
+  {
+    name: 'By Design',
+    colors: ['#009FFF', '#ec2F4B'],
+  },
+  {
+    name: 'Kyoo Tah',
+    colors: ['#544a7d', '#ffd452'],
+  },
+  {
+    name: 'Kye Meh',
+    colors: ['#8360c3', '#2ebf91'],
+  },
+  {
+    name: 'Kyoo Pal',
+    colors: ['#dd3e54', '#6be585'],
+  },
+  {
+    name: 'Metapolis',
+    colors: ['#659999', '#f4791f'],
+  },
+  {
+    name: 'Flare',
+    colors: ['#f12711', '#f5af19'],
+  },
+  {
+    name: 'Witching Hour',
+    colors: ['#c31432', '#240b36'],
+  },
+  {
+    name: 'Azur Lane',
+    colors: ['#7F7FD5', '#86A8E7', '#91EAE4'],
+  },
+  {
+    name: 'Neuromancer',
+    colors: ['#f953c6', '#b91d73'],
+  },
+  {
+    name: 'Harvey',
+    colors: ['#1f4037', '#99f2c8'],
+  },
+  {
+    name: 'Amin',
+    colors: ['#8E2DE2', '#4A00E0'],
+  },
+  {
+    name: 'Memariani',
+    colors: ['#aa4b6b', '#6b6b83', '#3b8d99'],
+  },
+  {
+    name: 'Yoda',
+    colors: ['#FF0099', '#493240'],
+  },
+  {
+    name: 'Cool Sky',
+    colors: ['#2980B9', '#6DD5FA', '#FFFFFF'],
+  },
+  {
+    name: 'Dark Ocean',
+    colors: ['#373B44', '#4286f4'],
+  },
+  {
+    name: 'Evening Sunshine',
+    colors: ['#b92b27', '#1565C0'],
+  },
+  {
+    name: 'JShine',
+    colors: ['#12c2e9', '#c471ed', '#f64f59'],
+  },
+  {
+    name: 'Moonlit Asteroid',
+    colors: ['#0F2027', '#203A43', '#2C5364'],
+  },
+  {
+    name: 'MegaTron',
+    colors: ['#C6FFDD', '#FBD786', '#f7797d'],
+  },
+  {
+    name: 'Cool Blues',
+    colors: ['#2193b0', '#6dd5ed'],
+  },
+  {
+    name: 'Piggy Pink',
+    colors: ['#ee9ca7', '#ffdde1'],
+  },
+  {
+    name: 'Grade Grey',
+    colors: ['#bdc3c7', '#2c3e50'],
+  },
+  {
+    name: 'Telko',
+    colors: ['#F36222', '#5CB644', '#007FC3'],
+  },
+  {
+    name: 'Zenta',
+    colors: ['#2A2D3E', '#FECB6E'],
+  },
+  {
+    name: 'Electric Peacock',
+    colors: ['#8a2be2', '#0000cd', '#228b22', '#ccff00'],
+  },
+  {
+    name: 'Under Blue Green',
+    colors: ['#051937', '#004d7a', '#008793', '#00bf72', '#a8eb12'],
+  },
+  {
+    name: 'Lensod',
+    colors: ['#6025F5', '#FF5555'],
+  },
+  {
+    name: 'Newspaper',
+    colors: ['#8a2be2', '#ffa500', '#f8f8ff'],
+  },
+  {
+    name: 'Dark Blue Gradient',
+    colors: ['#2774ae', '#002E5D', '#002E5D'],
+  },
+  {
+    name: 'Dark Blu Two',
+    colors: ['#004680', '#4484BA'],
+  },
+  {
+    name: 'Lemon Lime',
+    colors: ['#7ec6bc', '#ebe717'],
+  },
+  {
+    name: 'Beleko',
+    colors: ['#ff1e56', '#f9c942', '#1e90ff'],
+  },
+  {
+    name: 'Mango Papaya',
+    colors: ['#de8a41', '#2ada53'],
+  },
+  {
+    name: 'Unicorn Rainbow',
+    colors: ['#f7f0ac', '#acf7f0', '#f0acf7'],
+  },
+  {
+    name: 'Flame',
+    colors: ['#ff0000', '#fdcf58'],
+  },
+  {
+    name: 'Blue Red',
+    colors: ['#36B1C7', '#960B33'],
+  },
+  {
+    name: 'Twitter',
+    colors: ['#1DA1F2', '#009ffc'],
+  },
+  {
+    name: 'Blooze',
+    colors: ['#6da6be', '#4b859e', '#6da6be'],
+  },
+  {
+    name: 'Blue Slate',
+    colors: ['#B5B9FF', '#2B2C49'],
+  },
+  {
+    name: 'Space Light Green',
+    colors: ['#9FA0A8', '#5C7852'],
+  },
+  {
+    name: 'Flower',
+    colors: ['#DCFFBD', '#CC86D1'],
+  },
+  {
+    name: 'Elate The Euge',
+    colors: ['#8BDEDA', '43ADD0', '998EE0', 'E17DC2', 'EF9393'],
+  },
+  {
+    name: 'Peach Sea',
+    colors: ['#E6AE8C', '#A8CECF'],
+  },
+  {
+    name: 'Abbas',
+    colors: ['#00fff0', '#0083fe'],
+  },
+  {
+    name: 'Winter Woods',
+    colors: ['#333333', '#a2ab58', '#A43931'],
+  },
+  {
+    name: 'Ameena',
+    colors: ['#0c0c6d', '#de512b', '#98d0c1', '#5bb226', '#023c0d'],
+  },
+  {
+    name: 'Emerald Sea',
+    colors: ['#05386b', '#5cdb95'],
+  },
+  {
+    name: 'Bleem',
+    colors: ['#4284DB', '#29EAC4'],
+  },
+  {
+    name: 'Coffee Gold',
+    colors: ['#554023', '#c99846'],
+  },
+  {
+    name: 'Compass',
+    colors: ['#516b8b', '#056b3b'],
+  },
+  {
+    name: "Andreuzza's",
+    colors: ['#D70652', '#FF025E'],
+  },
+  {
+    name: 'Moonwalker',
+    colors: ['#152331', '#000000'],
+  },
+  {
+    name: 'Whinehouse',
+    colors: ['#f7f7f7', '#b9a0a0', '#794747', '#4e2020', '#111111'],
+  },
+  {
+    name: 'Hyper Blue',
+    colors: ['#59CDE9', '#0A2A88'],
+  },
+  {
+    name: 'Racker',
+    colors: ['#EB0000', '#95008A', '#3300FC'],
+  },
+  {
+    name: 'After the Rain',
+    colors: ['#ff75c3', '#ffa647', '#ffe83f', '#9fff5b', '#70e2ff', '#cd93ff'],
+  },
+  {
+    name: 'Neon Green',
+    colors: ['#81ff8a', '#64965e'],
+  },
+  {
+    name: 'Dusty Grass',
+    colors: ['#d4fc79', '#96e6a1'],
+  },
+  {
+    name: 'Visual Blue',
+    colors: ['#003d4d', '#00c996'],
+  },
+]
diff --git a/packages/web/components/patterns/LibraryCards/LibraryCardStyles.tsx b/packages/web/components/patterns/LibraryCards/LibraryCardStyles.tsx
index 34e28c50d..19fdf4e4a 100644
--- a/packages/web/components/patterns/LibraryCards/LibraryCardStyles.tsx
+++ b/packages/web/components/patterns/LibraryCards/LibraryCardStyles.tsx
@@ -1,8 +1,8 @@
 import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
-import { useMemo } from 'react'
+import { ChangeEvent, useMemo } from 'react'
 import { LibraryItemNode } from '../../../lib/networking/queries/useGetLibraryItemsQuery'
-import { Box, SpanBox } from '../../elements/LayoutPrimitives'
+import { Box, SpanBox, VStack } from '../../elements/LayoutPrimitives'
 
 dayjs.extend(relativeTime)
 
@@ -25,7 +25,7 @@ export const MenuStyle = {
 export const MetaStyle = {
   width: '100%',
   color: '$thTextSubtle3',
-  fontSize: '13px',
+  fontSize: '12px',
   fontWeight: '400',
   fontFamily: '$display',
 }
@@ -34,7 +34,7 @@ export const TitleStyle = {
   color: '$thTextContrast2',
   fontSize: '16px',
   fontWeight: '700',
-  lineHeight: '1.25',
+  lineHeight: '1',
   fontFamily: '$display',
   overflow: 'hidden',
   textOverflow: 'ellipsis',
@@ -67,11 +67,11 @@ export const AuthorInfoStyle = {
   whiteSpace: 'nowrap',
   maxWidth: '240px',
   overflow: 'hidden',
-  height: '21px',
   color: '$thTextSubtle3',
   fontSize: '12px',
   fontWeight: '400',
   fontFamily: '$display',
+  lineHeight: '1',
 }
 
 export const timeAgo = (date: string | undefined): string => {
@@ -134,14 +134,6 @@ export function LibraryItemMetadata(
             Math.round((props.item.wordsCount ?? 0) / 235)
           )} min read`
         : null}
-      {(props.showProgress && props.item.readingProgressPercent) ?? 0 > 0 ? (
-        <>
-          {`  • `}
-          <SpanBox css={{ color: '#55B938' }}>
-            {`${Math.round(props.item.readingProgressPercent)}%`}
-          </SpanBox>
-        </>
-      ) : null}
       {highlightCount > 0
         ? `  • ${highlightCount} highlight${highlightCount > 1 ? 's' : ''}`
         : null}
@@ -156,10 +148,19 @@ type CardCheckBoxProps = {
 
 export function CardCheckbox(props: CardCheckBoxProps): JSX.Element {
   return (
-    <input
-      type="checkbox"
-      checked={props.isChecked}
-      onChange={props.handleChanged}
-    ></input>
+    <form
+      // This prevents us from propogating up the the <a element on cards
+      onClick={(event) => {
+        event.stopPropagation()
+      }}
+    >
+      <input
+        type="checkbox"
+        checked={props.isChecked}
+        onChange={(event) => {
+          props.handleChanged()
+        }}
+      ></input>
+    </form>
   )
 }
diff --git a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
index 684ee6d37..14c915ebf 100644
--- a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
+++ b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
@@ -9,7 +9,6 @@ import Link from 'next/link'
 import {
   AuthorInfoStyle,
   CardCheckbox,
-  DescriptionStyle,
   LibraryItemMetadata,
   MetaStyle,
   siteName,
@@ -29,39 +28,11 @@ import {
 import { CardMenu } from '../CardMenu'
 import { DotsThree } from 'phosphor-react'
 import { isTouchScreenDevice } from '../../../lib/deviceType'
+import { ProgressBarOverlay } from './LibraryListCard'
+import { FallbackImage } from './FallbackImage'
 
 dayjs.extend(relativeTime)
 
-type ProgressBarProps = {
-  fillPercentage: number
-  fillColor: string
-  backgroundColor: string
-  borderRadius: string
-}
-
-export function ProgressBar(props: ProgressBarProps): JSX.Element {
-  return (
-    <Box
-      css={{
-        height: '4px',
-        width: '100%',
-        borderRadius: '$1',
-        overflow: 'hidden',
-        backgroundColor: props.backgroundColor,
-      }}
-    >
-      <Box
-        css={{
-          height: '100%',
-          width: `${props.fillPercentage}%`,
-          backgroundColor: props.fillColor,
-          borderRadius: props.borderRadius,
-        }}
-      />
-    </Box>
-  )
-}
-
 export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
   const [isHovered, setIsHovered] = useState(false)
   const [isOpen, setIsOpen] = useState(false)
@@ -115,38 +86,32 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
         setIsHovered(false)
       }}
     >
-      {props.inMultiSelect ? (
-        <LibraryGridCardContent {...props} isHovered={isHovered} />
-      ) : (
-        <>
-          {!isTouchScreenDevice() && (
-            <Box
-              ref={refs.setFloating}
-              style={{ ...floatingStyles, zIndex: 10 }}
-              {...getFloatingProps()}
-            >
-              <LibraryHoverActions
-                item={props.item}
-                viewer={props.viewer}
-                handleAction={props.handleAction}
-                isHovered={isHovered ?? false}
-              />
-            </Box>
-          )}
-          <Link
-            href={`${props.viewer.profile.username}/${props.item.slug}`}
-            passHref
-          >
-            <a
-              href={`${props.viewer.profile.username}/${props.item.slug}`}
-              style={{ textDecoration: 'unset', width: '100%', height: '100%' }}
-              tabIndex={-1}
-            >
-              <LibraryGridCardContent {...props} isHovered={isHovered} />
-            </a>
-          </Link>
-        </>
+      {!isTouchScreenDevice() && (
+        <Box
+          ref={refs.setFloating}
+          style={{ ...floatingStyles, zIndex: 10 }}
+          {...getFloatingProps()}
+        >
+          <LibraryHoverActions
+            item={props.item}
+            viewer={props.viewer}
+            handleAction={props.handleAction}
+            isHovered={isHovered ?? false}
+          />
+        </Box>
       )}
+      <Link
+        href={`${props.viewer.profile.username}/${props.item.slug}`}
+        passHref
+      >
+        <a
+          href={`${props.viewer.profile.username}/${props.item.slug}`}
+          style={{ textDecoration: 'unset', width: '100%', height: '100%' }}
+          tabIndex={-1}
+        >
+          <LibraryGridCardContent {...props} isHovered={isHovered} />
+        </a>
+      </Link>
     </VStack>
   )
 }
@@ -189,25 +154,43 @@ const Fallback = (props: FallbackProps): JSX.Element => {
 type GridImageProps = {
   src?: string
   title?: string
+  readingProgress?: number
 }
 
 const GridImage = (props: GridImageProps): JSX.Element => {
   const [displayFallback, setDisplayFallback] = useState(props.src == undefined)
 
-  return displayFallback ? (
-    <Fallback title={props.title ?? 'Omnivore Fallback'} />
-  ) : (
-    <CoverImage
-      src={props.src}
-      width="100%"
-      height={100}
-      css={{
-        bg: '$thBackground',
-      }}
-      onError={(e) => {
-        setDisplayFallback(true)
-      }}
-    />
+  return (
+    <>
+      {(props.readingProgress ?? 0) > 0 && (
+        <ProgressBarOverlay
+          width="100%"
+          top={95}
+          value={props.readingProgress ?? 0}
+          bottomRadius={'0px'}
+        />
+      )}
+      {displayFallback ? (
+        <FallbackImage
+          title={props.title ?? 'Omnivore Fallback'}
+          width="100%"
+          height="100px"
+          fontSize="128px"
+        />
+      ) : (
+        <CoverImage
+          src={props.src}
+          width="100%"
+          height={100}
+          css={{
+            bg: '$thBackground',
+          }}
+          onError={(e) => {
+            setDisplayFallback(true)
+          }}
+        />
+      )}
+    </>
   )
 }
 
@@ -217,45 +200,55 @@ const LibraryGridCardContent = (props: LinkedItemCardProps): JSX.Element => {
   const originText = siteName(props.item.originalArticleUrl, props.item.url)
 
   const handleCheckChanged = useCallback(() => {
-    setIsChecked(item.id, !isChecked)
-  }, [setIsChecked, isChecked])
+    const newValue = !isChecked
+    setIsChecked(item.id, newValue)
+  }, [setIsChecked, isChecked, props])
 
   return (
     <VStack css={{ p: '0px', m: '0px', width: '100%' }}>
       <Box css={{ position: 'relative', width: '100%' }}>
-        <GridImage src={props.item.image} title={props.item.title} />
-        {props.inMultiSelect ? (
-          <SpanBox css={{ position: 'absolute', top: 0, left: 0, m: '5px' }}>
-            <CardCheckbox
-              isChecked={props.isChecked}
-              handleChanged={handleCheckChanged}
-            />
-          </SpanBox>
-        ) : (
-          <Box
-            css={{
-              ...MenuStyle,
-              position: 'absolute',
-              top: 0,
-              right: 0,
-              m: '5px',
-              visibility: menuOpen ? 'visible' : 'hidden',
-              '@media (hover: none)': {
-                visibility: 'unset',
-              },
-            }}
-          >
-            <CardMenu
-              item={props.item}
-              viewer={props.viewer}
-              onOpenChange={(open) => setMenuOpen(open)}
-              actionHandler={props.handleAction}
-              triggerElement={
-                <DotsThree size={25} weight="bold" color="#ADADAD" />
-              }
-            />
-          </Box>
-        )}
+        <GridImage
+          src={props.item.image}
+          title={props.item.title}
+          readingProgress={item.readingProgressPercent}
+        />
+        <SpanBox
+          css={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            m: '10px',
+            lineHeight: '1',
+          }}
+        >
+          <CardCheckbox
+            isChecked={isChecked}
+            handleChanged={handleCheckChanged}
+          />
+        </SpanBox>
+        <Box
+          css={{
+            ...MenuStyle,
+            position: 'absolute',
+            top: 0,
+            right: 0,
+            m: '5px',
+            visibility: menuOpen ? 'visible' : 'hidden',
+            '@media (hover: none)': {
+              visibility: 'unset',
+            },
+          }}
+        >
+          <CardMenu
+            item={props.item}
+            viewer={props.viewer}
+            onOpenChange={(open) => setMenuOpen(open)}
+            actionHandler={props.handleAction}
+            triggerElement={
+              <DotsThree size={25} weight="bold" color="#ADADAD" />
+            }
+          />
+        </Box>
       </Box>
 
       <HStack
@@ -268,7 +261,7 @@ const LibraryGridCardContent = (props: LinkedItemCardProps): JSX.Element => {
         }}
         distribution="start"
       >
-        <LibraryItemMetadata item={props.item} />
+        <LibraryItemMetadata item={props.item} showProgress={true} />
       </HStack>
 
       <VStack
@@ -299,7 +292,7 @@ const LibraryGridCardContent = (props: LinkedItemCardProps): JSX.Element => {
         <HStack
           distribution="start"
           alignment="start"
-          css={{ width: '100%', minHeight: '50px' }}
+          css={{ width: '100%', minHeight: '50px', pb: '10px' }}
         >
           <HStack
             css={{
diff --git a/packages/web/components/patterns/LibraryCards/LibraryHighlightGridCard.tsx b/packages/web/components/patterns/LibraryCards/LibraryHighlightGridCard.tsx
index 26aecc3e7..d3ee8a620 100644
--- a/packages/web/components/patterns/LibraryCards/LibraryHighlightGridCard.tsx
+++ b/packages/web/components/patterns/LibraryCards/LibraryHighlightGridCard.tsx
@@ -38,7 +38,6 @@ export function LibraryHighlightGridCard(
         showErrorToast('Error navigating to highlight')
         return
       }
-      console.log('pushing user: ', props.viewer, 'slug: ', props.item.slug)
       router.push(
         {
           pathname: '/[username]/[slug]',
diff --git a/packages/web/components/patterns/LibraryCards/LibraryHoverActions.tsx b/packages/web/components/patterns/LibraryCards/LibraryHoverActions.tsx
index 16cf0d602..bbd7fc312 100644
--- a/packages/web/components/patterns/LibraryCards/LibraryHoverActions.tsx
+++ b/packages/web/components/patterns/LibraryCards/LibraryHoverActions.tsx
@@ -32,8 +32,6 @@ type LibraryHoverActionsProps = {
 export const LibraryHoverActions = (props: LibraryHoverActionsProps) => {
   const [menuOpen, setMenuOpen] = useState(false)
 
-  console.log(' props.isHovered || menuOpen', props.isHovered, menuOpen)
-
   return (
     <Box
       css={{
diff --git a/packages/web/components/patterns/LibraryCards/LibraryListCard.tsx b/packages/web/components/patterns/LibraryCards/LibraryListCard.tsx
index 6c8277c5a..be39fe6c2 100644
--- a/packages/web/components/patterns/LibraryCards/LibraryListCard.tsx
+++ b/packages/web/components/patterns/LibraryCards/LibraryListCard.tsx
@@ -26,6 +26,10 @@ import {
 import { CardMenu } from '../CardMenu'
 import { DotsThree } from 'phosphor-react'
 import { isTouchScreenDevice } from '../../../lib/deviceType'
+import { CoverImage } from '../../elements/CoverImage'
+import { ProgressBar } from '../../elements/ProgressBar'
+import { theme } from '../../tokens/stitches.config'
+import { FallbackImage } from './FallbackImage'
 
 export function LibraryListCard(props: LinkedItemCardProps): JSX.Element {
   const [isHovered, setIsHovered] = useState(false)
@@ -55,6 +59,7 @@ export function LibraryListCard(props: LinkedItemCardProps): JSX.Element {
       {...getReferenceProps()}
       css={{
         px: '20px',
+        pl: '10px',
         pt: '20px',
         pb: '20px',
         height: '100%',
@@ -92,42 +97,112 @@ export function LibraryListCard(props: LinkedItemCardProps): JSX.Element {
         setIsHovered(false)
       }}
     >
-      {props.inMultiSelect ? (
-        <LibraryListCardContent {...props} isHovered={isHovered} />
-      ) : (
-        <>
-          {!isTouchScreenDevice() && (
-            <Box
-              ref={refs.setFloating}
-              style={floatingStyles}
-              {...getFloatingProps()}
-            >
-              <LibraryHoverActions
-                item={props.item}
-                viewer={props.viewer}
-                handleAction={props.handleAction}
-                isHovered={isHovered ?? false}
-              />
-            </Box>
-          )}
-          <Link
-            href={`${props.viewer.profile.username}/${props.item.slug}`}
-            passHref
-          >
-            <a
-              href={`${props.viewer.profile.username}/${props.item.slug}`}
-              style={{ textDecoration: 'unset', width: '100%', height: '100%' }}
-              tabIndex={-1}
-            >
-              <LibraryListCardContent {...props} isHovered={isHovered} />
-            </a>
-          </Link>
-        </>
+      {!isTouchScreenDevice() && (
+        <Box
+          ref={refs.setFloating}
+          style={floatingStyles}
+          {...getFloatingProps()}
+        >
+          <LibraryHoverActions
+            item={props.item}
+            viewer={props.viewer}
+            handleAction={props.handleAction}
+            isHovered={isHovered ?? false}
+          />
+        </Box>
       )}
+      <Link
+        href={`${props.viewer.profile.username}/${props.item.slug}`}
+        passHref
+      >
+        <a
+          href={`${props.viewer.profile.username}/${props.item.slug}`}
+          style={{ textDecoration: 'unset', width: '100%', height: '100%' }}
+          tabIndex={-1}
+        >
+          <LibraryListCardContent {...props} isHovered={isHovered} />
+        </a>
+      </Link>
     </VStack>
   )
 }
 
+type ProgressBarOverlayProps = {
+  top: number
+  width: string
+  value: number
+  bottomRadius: string
+}
+
+export const ProgressBarOverlay = (
+  props: ProgressBarOverlayProps
+): JSX.Element => {
+  return (
+    <Box
+      css={{
+        position: 'absolute',
+        width: props.width,
+        top: props.top,
+        borderBottomLeftRadius: props.bottomRadius,
+        borderBottomRightRadius: props.bottomRadius,
+        overflow: 'clip',
+        zIndex: 20,
+      }}
+    >
+      <ProgressBar
+        fillPercentage={props.value}
+        fillColor={theme.colors.thProgressFg.toString()}
+        backgroundColor="rgba(217, 217, 217, 0.65)"
+        borderRadius={'2px'}
+      />
+    </Box>
+  )
+}
+
+type ListImageProps = {
+  src?: string
+  title?: string
+  readingProgress?: number
+}
+
+const ListImage = (props: ListImageProps): JSX.Element => {
+  const [displayFallback, setDisplayFallback] = useState(props.src == undefined)
+
+  return (
+    <>
+      {(props.readingProgress ?? 0) > 0 && (
+        <ProgressBarOverlay
+          width="55px"
+          top={50}
+          bottomRadius="4px"
+          value={props.readingProgress ?? 0}
+        />
+      )}
+      {displayFallback ? (
+        <FallbackImage
+          title={props.title ?? 'Omnivore Fallback'}
+          width="55px"
+          height="55px"
+          fontSize="36pt"
+        />
+      ) : (
+        <CoverImage
+          src={props.src}
+          width={55}
+          height={55}
+          css={{
+            bg: '$thBackground',
+            borderRadius: '4px',
+          }}
+          onError={() => {
+            setDisplayFallback(true)
+          }}
+        />
+      )}
+    </>
+  )
+}
+
 export function LibraryListCardContent(
   props: LinkedItemCardProps
 ): JSX.Element {
@@ -140,57 +215,96 @@ export function LibraryListCardContent(
   }, [isChecked, setIsChecked, item])
 
   return (
-    <>
-      <HStack css={MetaStyle} distribution="start">
-        <LibraryItemMetadata item={props.item} showProgress={true} />
-        {props.inMultiSelect ? (
-          <SpanBox css={{ marginLeft: 'auto' }}>
-            <CardCheckbox
-              isChecked={props.isChecked}
-              handleChanged={handleCheckChanged}
-            />
-          </SpanBox>
-        ) : (
-          <Box
-            css={{
-              ...MenuStyle,
-              visibility: menuOpen ? 'visible' : 'hidden',
-              '@media (hover: none)': {
-                visibility: 'unset',
-              },
-            }}
-          >
-            <CardMenu
-              item={props.item}
-              viewer={props.viewer}
-              onOpenChange={(open) => setMenuOpen(open)}
-              actionHandler={props.handleAction}
-              triggerElement={
-                <DotsThree size={25} weight="bold" color="#ADADAD" />
-              }
-            />
-          </Box>
-        )}
-      </HStack>
+    <HStack css={{ gap: '15px', width: '100%' }}>
+      <SpanBox
+        css={{
+          display: 'flex',
+          m: '0px',
+          mt: '0px',
+          p: '0px',
+          ml: '4px',
+          lineHeight: '1',
+          '> input': {
+            p: '0px',
+            m: '0px',
+          },
+        }}
+      >
+        <CardCheckbox
+          isChecked={props.isChecked}
+          handleChanged={handleCheckChanged}
+        />
+      </SpanBox>
+      <Box css={{ position: 'relative', width: '55px' }}>
+        <ListImage
+          src={props.item.image}
+          title={props.item.title}
+          readingProgress={item.readingProgressPercent}
+        />
+
+        <Box
+          css={{
+            ...MenuStyle,
+            position: 'absolute',
+            top: 0,
+            right: 0,
+            m: '5px',
+            visibility: menuOpen ? 'visible' : 'hidden',
+            '@media (hover: none)': {
+              visibility: 'unset',
+            },
+          }}
+        >
+          <CardMenu
+            item={props.item}
+            viewer={props.viewer}
+            onOpenChange={(open) => setMenuOpen(open)}
+            actionHandler={props.handleAction}
+            triggerElement={
+              <DotsThree size={25} weight="bold" color="#ADADAD" />
+            }
+          />
+        </Box>
+      </Box>
       <VStack
         alignment="start"
         distribution="start"
-        css={{ height: '100%', width: '100%' }}
+        css={{ height: '100%', width: '100%', lineHeight: 1, gap: '5px' }}
       >
-        <Box css={{ ...TitleStyle, fontSize: '18px', width: '80%' }}>
-          {props.item.title}
-        </Box>
-        <SpanBox
+        <VStack
+          alignment="start"
+          distribution="center"
           css={{
-            mt: '5px',
-            ...AuthorInfoStyle,
-            maxWidth: '90%',
+            height: '55px',
+            width: '100%',
+            justifyContent: 'space-between',
           }}
         >
-          {props.item.author}
-          {props.item.author && originText && ' | '}
-          <SpanBox css={{ textDecoration: 'underline' }}>{originText}</SpanBox>
-        </SpanBox>
+          <HStack
+            css={{
+              ...MetaStyle,
+              color: '$grayText',
+            }}
+            distribution="start"
+          >
+            <LibraryItemMetadata item={props.item} showProgress={true} />
+          </HStack>
+
+          <Box css={{ ...TitleStyle, width: '80%' }}>{props.item.title}</Box>
+          <SpanBox
+            css={{
+              ...AuthorInfoStyle,
+              maxWidth: '90%',
+              minHeight: '12px',
+            }}
+          >
+            {props.item.author}
+            {props.item.author && originText && ' | '}
+            <SpanBox css={{ textDecoration: 'underline' }}>
+              {originText}
+            </SpanBox>
+          </SpanBox>
+        </VStack>
 
         <HStack
           distribution="start"
@@ -209,6 +323,6 @@ export function LibraryListCardContent(
           </HStack>
         </HStack>
       </VStack>
-    </>
+    </HStack>
   )
 }
diff --git a/packages/web/components/templates/UploadModal.tsx b/packages/web/components/templates/UploadModal.tsx
index 8fac6c53e..021210fa3 100644
--- a/packages/web/components/templates/UploadModal.tsx
+++ b/packages/web/components/templates/UploadModal.tsx
@@ -130,7 +130,6 @@ export function UploadModal(props: UploadModalProps): JSX.Element {
 
           Papa.parse(file.file, {
             step: function (row, parser) {
-              console.log('row: ', row)
               if (Array.isArray(row.data)) {
                 try {
                   if (row.data[0].trim().length < 1) {
@@ -211,7 +210,6 @@ export function UploadModal(props: UploadModalProps): JSX.Element {
       ;(async () => {
         for (const file of addedFiles) {
           try {
-            console.log('using content type: ', file.file.type)
             const uploadInfo = await uploadSignedUrlForFile(file)
             if (!uploadInfo.uploadSignedUrl) {
               showErrorToast('No upload URL available')
diff --git a/packages/web/components/templates/article/Article.tsx b/packages/web/components/templates/article/Article.tsx
index 2b9c44da8..2ad51d320 100644
--- a/packages/web/components/templates/article/Article.tsx
+++ b/packages/web/components/templates/article/Article.tsx
@@ -192,7 +192,6 @@ export function Article(props: ArticleProps): JSX.Element {
       const img = element as HTMLImageElement
       const width = Number(img.getAttribute('data-omnivore-width'))
       const height = Number(img.getAttribute('data-omnivore-height'))
-      console.log('width and height: ', width, height)
 
       if (!isNaN(width) && !isNaN(height) && width < 100 && height < 100) {
         img.style.setProperty('width', `${width}px`)
diff --git a/packages/web/components/templates/article/ArticleContainer.tsx b/packages/web/components/templates/article/ArticleContainer.tsx
index 9c8b7f9da..2140ebfbb 100644
--- a/packages/web/components/templates/article/ArticleContainer.tsx
+++ b/packages/web/components/templates/article/ArticleContainer.tsx
@@ -348,7 +348,9 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
     default: styles.maxWidthPercentage
       ? `${styles.maxWidthPercentage}%`
       : 1024 - styles.margin,
-    small: styles.maxWidthPercentage ? `${styles.maxWidthPercentage}%` : `${120 - Math.round((styles.margin * 10) / 100)}%`,
+    small: styles.maxWidthPercentage
+      ? `${styles.maxWidthPercentage}%`
+      : `${120 - Math.round((styles.margin * 10) / 100)}%`,
   }
 
   const recommendationsWithNotes = useMemo(() => {
diff --git a/packages/web/components/templates/article/HighlightsLayer.tsx b/packages/web/components/templates/article/HighlightsLayer.tsx
index 032b0838e..f095918f3 100644
--- a/packages/web/components/templates/article/HighlightsLayer.tsx
+++ b/packages/web/components/templates/article/HighlightsLayer.tsx
@@ -297,7 +297,6 @@ export function HighlightsLayer(props: HighlightsLayerProps): JSX.Element {
       const { target, pageX, pageY } = event
 
       if (!target || (target as Node)?.nodeType !== Node.ELEMENT_NODE) {
-        console.log(' -- returning early from page tap')
         return
       }
 
@@ -375,7 +374,6 @@ export function HighlightsLayer(props: HighlightsLayerProps): JSX.Element {
           highlightIdAttribute
         )
         const highlight = highlights.find(($0) => $0.id === id)
-        console.log('double tapped highlight: ', highlight)
         setFocusedHighlight(highlight)
 
         openNoteModal({
@@ -387,8 +385,6 @@ export function HighlightsLayer(props: HighlightsLayerProps): JSX.Element {
           highlightNoteIdAttribute
         )
         const highlight = highlights.find(($0) => $0.id === id)
-        console.log('double tapped highlight with note: ', highlight)
-
         setFocusedHighlight(highlight)
 
         openNoteModal({
diff --git a/packages/web/components/templates/article/Notebook.tsx b/packages/web/components/templates/article/Notebook.tsx
index 671b342ee..a4c1c0011 100644
--- a/packages/web/components/templates/article/Notebook.tsx
+++ b/packages/web/components/templates/article/Notebook.tsx
@@ -91,7 +91,6 @@ export function NotebookContent(props: NotebookContentProps): JSX.Element {
   )
 
   const createNote = useCallback((text: string) => {
-    console.log('creating note: ', newNoteId, noteState.current.isCreating)
     noteState.current.isCreating = true
     noteState.current.createStarted = new Date()
     ;(async () => {
diff --git a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
index 8c886fc91..48e8b57fb 100644
--- a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
+++ b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
@@ -84,11 +84,13 @@ export function HomeFeedContainer(): JSX.Element {
 
   const gridContainerRef = useRef<HTMLDivElement>(null)
 
-  const [labelsTarget, setLabelsTarget] =
-    useState<LibraryItem | undefined>(undefined)
+  const [labelsTarget, setLabelsTarget] = useState<LibraryItem | undefined>(
+    undefined
+  )
 
-  const [notebookTarget, setNotebookTarget] =
-    useState<LibraryItem | undefined>(undefined)
+  const [notebookTarget, setNotebookTarget] = useState<LibraryItem | undefined>(
+    undefined
+  )
 
   const [showAddLinkModal, setShowAddLinkModal] = useState(false)
   const [showEditTitleModal, setShowEditTitleModal] = useState(false)
@@ -372,15 +374,12 @@ export function HomeFeedContainer(): JSX.Element {
   const [multiSelectMode, setMultiSelectMode] = useState<MultiSelectMode>('off')
 
   const selectActiveArticle = useCallback(() => {
-    console.log('selecting article: ', activeItem)
     if (activeItem) {
       if (multiSelectMode === 'off') {
-        console.log('setting ')
         setMultiSelectMode('some')
       }
       const itemId = activeItem.node.id
       const isChecked = itemIsChecked(itemId)
-      console.log('setting is checked: ', isChecked, itemId)
       setIsChecked(itemId, !isChecked)
     }
   }, [activeItem, multiSelectMode, checkedItems])
@@ -493,7 +492,6 @@ export function HomeFeedContainer(): JSX.Element {
           handleCardAction('set-labels', activeItem)
           break
         case 'openNotebook':
-          console.log('openNotebook: ', notebookTarget)
           handleCardAction('open-notebook', activeItem)
           break
         case 'sortDescending':
@@ -553,7 +551,6 @@ export function HomeFeedContainer(): JSX.Element {
       name: 'Mark item as read',
       shortcut: ['m', 'r'],
       perform: () => {
-        console.log('mark read action')
         handleCardAction('mark-read', activeItem)
       },
     }),
@@ -612,8 +609,16 @@ export function HomeFeedContainer(): JSX.Element {
         checkedItems.splice(checkedItems.indexOf(itemId), 1)
         setCheckedItems([...checkedItems])
       }
+
+      if (set && multiSelectMode == 'off') {
+        setMultiSelectMode('some')
+      }
+
+      if (checkedItems.length < 1) {
+        setMultiSelectMode('off')
+      }
     },
-    [checkedItems]
+    [checkedItems, multiSelectMode, setMultiSelectMode]
   )
 
   useEffect(() => {
@@ -806,10 +811,12 @@ type HomeFeedContentProps = {
     item: LibraryItem | undefined
   ) => Promise<void>
 
-  multiSelectMode: MultiSelectMode
   setIsChecked: (itemId: string, set: boolean) => void
   itemIsChecked: (itemId: string) => boolean
+
+  multiSelectMode: MultiSelectMode
   setMultiSelectMode: (mode: MultiSelectMode) => void
+
   numItemsSelected: number
 
   performMultiSelectAction: (action: BulkAction, labelIds?: string[]) => void
@@ -861,7 +868,6 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element {
           setShowAddLinkModal={props.setShowAddLinkModal}
           searchTerm={props.searchTerm}
           applySearchQuery={(searchQuery: string) => {
-            console.log('searching with searchQuery: ', searchQuery)
             props.applySearchQuery(searchQuery)
           }}
           showFilterMenu={showFilterMenu}
@@ -880,7 +886,6 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element {
           <LibraryItemsLayout
             viewer={viewerData?.me}
             layout={layout}
-            inMultiSelect={props.multiSelectMode !== 'off'}
             isChecked={props.itemIsChecked}
             {...props}
           />
@@ -897,7 +902,9 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element {
 type LibraryItemsLayoutProps = {
   layout: LayoutType
   viewer?: UserBasicData
-  inMultiSelect: boolean
+
+  multiSelectMode: MultiSelectMode
+  setMultiSelectMode: (mode: MultiSelectMode) => void
 
   isChecked: (itemId: string) => boolean
   setIsChecked: (itemId: string, set: boolean) => void
@@ -970,7 +977,7 @@ function LibraryItemsLayout(props: LibraryItemsLayoutProps): JSX.Element {
               setLinkToUnsubscribe={props.setLinkToUnsubscribe}
               setShowRemoveLinkConfirmation={setShowRemoveLinkConfirmation}
               actionHandler={props.actionHandler}
-              inMultiSelect={props.inMultiSelect}
+              multiSelectMode={props.multiSelectMode}
             />
           )}
           <HStack
@@ -1024,7 +1031,7 @@ function LibraryItemsLayout(props: LibraryItemsLayoutProps): JSX.Element {
                     item={props.linkToRemove?.node}
                     viewer={props.viewer}
                     layout="GRID_LAYOUT"
-                    inMultiSelect={false}
+                    multiSelectMode={props.multiSelectMode}
                     isChecked={false}
                     // eslint-disable-next-line @typescript-eslint/no-empty-function
                     setIsChecked={() => {}}
@@ -1095,9 +1102,9 @@ type LibraryItemsProps = {
   setLinkToUnsubscribe: (set: LibraryItem | undefined) => void
   setShowRemoveLinkConfirmation: (show: true) => void
 
-  inMultiSelect: boolean
   isChecked: (itemId: string) => boolean
   setIsChecked: (itemId: string, set: boolean) => void
+  multiSelectMode: MultiSelectMode
 
   actionHandler: (
     action: LinkedItemCardAction,
@@ -1186,7 +1193,7 @@ function LibraryItems(props: LibraryItemsProps): JSX.Element {
               viewer={props.viewer}
               isChecked={props.isChecked(linkedItem.node.id)}
               setIsChecked={props.setIsChecked}
-              inMultiSelect={props.inMultiSelect}
+              multiSelectMode={props.multiSelectMode}
               handleAction={(action: LinkedItemCardAction) => {
                 if (action === 'delete') {
                   props.setShowRemoveLinkConfirmation(true)
diff --git a/packages/web/components/templates/homeFeed/LibraryFilterMenu.tsx b/packages/web/components/templates/homeFeed/LibraryFilterMenu.tsx
index 9d1fe702b..5acde5b38 100644
--- a/packages/web/components/templates/homeFeed/LibraryFilterMenu.tsx
+++ b/packages/web/components/templates/homeFeed/LibraryFilterMenu.tsx
@@ -203,6 +203,12 @@ function Labels(props: LibraryFilterMenuProps): JSX.Element {
     initialValue: false,
   })
 
+  const sortedLabels = useMemo(() => {
+    return labels.sort((left: Label, right: Label) =>
+      left.name.localeCompare(right.name)
+    )
+  }, [labels])
+
   return (
     <MenuPanel
       title="Labels"
@@ -212,7 +218,7 @@ function Labels(props: LibraryFilterMenuProps): JSX.Element {
         window.location.href = '/settings/labels'
       }}
     >
-      {labels.slice(0, viewAll ? undefined : 4).map((item) => {
+      {sortedLabels.slice(0, viewAll ? undefined : 4).map((item) => {
         return <LabelButton key={item.id} label={item} {...props} />
       })}
       <ViewAllButton state={viewAll} setState={setViewAll} />
diff --git a/packages/web/components/templates/homeFeed/LibraryHeader.tsx b/packages/web/components/templates/homeFeed/LibraryHeader.tsx
index a77d468cf..cb823203b 100644
--- a/packages/web/components/templates/homeFeed/LibraryHeader.tsx
+++ b/packages/web/components/templates/homeFeed/LibraryHeader.tsx
@@ -28,6 +28,7 @@ import { TrashIcon } from '../../elements/icons/TrashIcon'
 import { LabelIcon } from '../../elements/icons/LabelIcon'
 import { ListViewIcon } from '../../elements/icons/ListViewIcon'
 import { GridViewIcon } from '../../elements/icons/GridViewIcon'
+import { CaretDownIcon } from '../../elements/icons/CaretDownIcon'
 
 export type MultiSelectMode = 'off' | 'none' | 'some' | 'visible' | 'search'
 
@@ -377,9 +378,7 @@ type ControlButtonBoxProps = {
   applySearchQuery: (searchQuery: string) => void
 }
 
-function MultiSelectControlButtonBox(
-  props: ControlButtonBoxProps
-): JSX.Element {
+function MultiSelectControls(props: ControlButtonBoxProps): JSX.Element {
   const [showConfirmDelete, setShowConfirmDelete] = useState(false)
   const [showLabelsModal, setShowLabelsModal] = useState(false)
 
@@ -498,7 +497,7 @@ function SearchControlButtonBox(
   )
 }
 
-function ControlButtonBox(props: ControlButtonBoxProps): JSX.Element {
+const MuliSelectControl = (props: ControlButtonBoxProps): JSX.Element => {
   const [isChecked, setIsChecked] = useState(false)
 
   useEffect(() => {
@@ -507,6 +506,69 @@ function ControlButtonBox(props: ControlButtonBoxProps): JSX.Element {
     }
   }, [props.multiSelectMode])
 
+  return (
+    <Box
+      css={{
+        display: 'flex',
+        padding: '10px',
+        height: '38px',
+        maxWidth: '521px',
+        bg: '$thLibrarySearchbox',
+        borderRadius: '6px',
+
+        boxShadow: '0px 1px 2px 0px rgba(0, 0, 0, 0.05);',
+        '@mdDown': {
+          mx: '5px',
+        },
+      }}
+    >
+      <SpanBox
+        css={{
+          flex: 1,
+          display: 'flex',
+          gap: '5px',
+          alignItems: 'center',
+        }}
+      >
+        <CardCheckbox
+          isChecked={isChecked}
+          handleChanged={() => {
+            const newValue = !isChecked
+            props.setMultiSelectMode(newValue ? 'visible' : 'off')
+            setIsChecked(newValue)
+          }}
+        />
+        <SpanBox css={{ display: 'flex', pb: '2px' }}>
+          <Dropdown
+            triggerElement={
+              <CaretDownIcon
+                size={9}
+                color={theme.colors.graySolid.toString()}
+              />
+            }
+          >
+            <DropdownOption
+              onSelect={() => {
+                setIsChecked(true)
+                props.setMultiSelectMode('visible')
+              }}
+              title="All"
+            />
+            {/* <DropdownOption
+              onSelect={() => {
+                setIsChecked(true)
+                props.setMultiSelectMode('search')
+              }}
+              title="All matching search"
+            /> */}
+          </Dropdown>
+        </SpanBox>
+      </SpanBox>
+    </Box>
+  )
+}
+
+function ControlButtonBox(props: ControlButtonBoxProps): JSX.Element {
   return (
     <>
       <HStack
@@ -519,7 +581,7 @@ function ControlButtonBox(props: ControlButtonBoxProps): JSX.Element {
           },
           width: '95%',
           '@media (min-width: 930px)': {
-            width: '640px',
+            width: '660px',
           },
           '@media (min-width: 1280px)': {
             width: '1000px',
@@ -529,6 +591,7 @@ function ControlButtonBox(props: ControlButtonBoxProps): JSX.Element {
           },
         }}
       >
+        <MuliSelectControl {...props} />
         {props.multiSelectMode !== 'off' && (
           <SpanBox
             css={{
@@ -541,42 +604,9 @@ function ControlButtonBox(props: ControlButtonBoxProps): JSX.Element {
               },
             }}
           >
-            <CardCheckbox
-              isChecked={isChecked}
-              handleChanged={() => {
-                const newValue = !isChecked
-                props.setMultiSelectMode(newValue ? 'visible' : 'none')
-                setIsChecked(newValue)
-              }}
-            />
-            <SpanBox css={{ pt: '2px' }}>
-              <Dropdown
-                triggerElement={
-                  <CaretDown
-                    size={15}
-                    color={theme.colors.graySolid.toString()}
-                    weight="fill"
-                  />
-                }
-              >
-                <DropdownOption
-                  onSelect={() => {
-                    setIsChecked(true)
-                    props.setMultiSelectMode('visible')
-                  }}
-                  title="All"
-                />
-                <DropdownOption
-                  onSelect={() => {
-                    setIsChecked(true)
-                    props.setMultiSelectMode('search')
-                  }}
-                  title="All matching search"
-                />
-              </Dropdown>
-            </SpanBox>
             <SpanBox
               css={{
+                color: '#55B938',
                 paddingLeft: '5px',
                 fontSize: '12px',
                 fontWeight: '600',
@@ -588,7 +618,9 @@ function ControlButtonBox(props: ControlButtonBoxProps): JSX.Element {
             >
               {props.numItemsSelected}{' '}
               <SpanBox
-                css={{ '@media (max-width: 1280px)': { display: 'none' } }}
+                css={{
+                  '@media (max-width: 1280px)': { display: 'none' },
+                }}
               >
                 selected
               </SpanBox>
@@ -597,7 +629,7 @@ function ControlButtonBox(props: ControlButtonBoxProps): JSX.Element {
         )}
         {props.multiSelectMode !== 'off' ? (
           <>
-            <MultiSelectControlButtonBox {...props} />
+            <MultiSelectControls {...props} />
             <SpanBox css={{ flex: 1 }}></SpanBox>
           </>
         ) : (
diff --git a/packages/web/components/templates/reader/ReaderHeader.tsx b/packages/web/components/templates/reader/ReaderHeader.tsx
index 41e97ac89..d77445989 100644
--- a/packages/web/components/templates/reader/ReaderHeader.tsx
+++ b/packages/web/components/templates/reader/ReaderHeader.tsx
@@ -36,7 +36,7 @@ export function ReaderHeader(props: ReaderHeaderProps): JSX.Element {
             ? '1px solid $thBorderColor'
             : '1px solid transparent',
           '@xlgDown': {
-            bg: '$readerMargin',
+            bg: '$readerBg',
             pointerEvents: 'unset',
             borderBottom: '1px solid $thBorderColor',
           },
diff --git a/packages/web/next.config.js b/packages/web/next.config.js
index e6ebad8fa..9477bdcc6 100644
--- a/packages/web/next.config.js
+++ b/packages/web/next.config.js
@@ -6,7 +6,7 @@ const ContentSecurityPolicy = `
   font-src 'self' data: cdn.jsdelivr.net https://js.intercomcdn.com https://fonts.intercomcdn.com;
   form-action 'self' ${process.env.NEXT_PUBLIC_SERVER_BASE_URL} https://getpocket.com/auth/authorize https://intercom.help https://api-iam.intercom.io https://api-iam.eu.intercom.io https://api-iam.au.intercom.io;
   frame-ancestors 'none';
-  frame-src self accounts.google.com platform.twitter.com www.youtube.com www.youtube-nocookie.com;
+  frame-src 'self' accounts.google.com platform.twitter.com www.youtube.com www.youtube-nocookie.com;
   manifest-src 'self';
   script-src 'self' 'unsafe-inline' 'unsafe-eval' accounts.google.com widget.intercom.io js.intercomcdn.com platform.twitter.com cdnjs.cloudflare.com cdn.jsdelivr.net cdn.segment.com;
   style-src 'self' 'unsafe-inline' accounts.google.com cdnjs.cloudflare.com;
diff --git a/packages/web/pages/[username]/[slug]/index.tsx b/packages/web/pages/[username]/[slug]/index.tsx
index a4ccf1fc6..6f7a3ae94 100644
--- a/packages/web/pages/[username]/[slug]/index.tsx
+++ b/packages/web/pages/[username]/[slug]/index.tsx
@@ -462,7 +462,7 @@ export default function Home(): JSX.Element {
           css={{
             width: '100%',
             height: '100%',
-            background: '$readerMargin',
+            background: '$readerBg',
             overflow: 'scroll',
             paddingTop: '80px',
             '@media print': {
@@ -511,7 +511,7 @@ export default function Home(): JSX.Element {
           css={{
             width: '100%',
             height: '100%',
-            background: '$readerMargin',
+            background: '$readerBg',
             overflow: 'scroll',
             paddingTop: '80px',
           }}