diff --git a/src/renderer/src/components/Content/index.tsx b/src/renderer/src/components/Content/index.tsx
index 137a858..13a0522 100644
--- a/src/renderer/src/components/Content/index.tsx
+++ b/src/renderer/src/components/Content/index.tsx
@@ -70,6 +70,7 @@ const Content = memo(
           className={size === 'small' ? 'mt-1' : 'mt-2'}
           key={`web-preview-${event.id}`}
           url={lastNonMediaUrl}
+          size={size}
         />
       )
     }
diff --git a/src/renderer/src/components/WebPreview/index.tsx b/src/renderer/src/components/WebPreview/index.tsx
index 1003a94..0ff3c67 100644
--- a/src/renderer/src/components/WebPreview/index.tsx
+++ b/src/renderer/src/components/WebPreview/index.tsx
@@ -3,11 +3,19 @@ import { useFetchWebMetadata } from '@renderer/hooks/useFetchWebMetadata'
 import { cn } from '@renderer/lib/utils'
 import { useMemo } from 'react'
 
-export default function WebPreview({ url, className }: { url: string; className?: string }) {
+export default function WebPreview({
+  url,
+  className,
+  size = 'normal'
+}: {
+  url: string
+  className?: string
+  size?: 'normal' | 'small'
+}) {
   const { title, description, image } = useFetchWebMetadata(url)
   const hostname = useMemo(() => new URL(url).hostname, [url])
 
-  if (!title && !description && !image) {
+  if (!title) {
     return null
   }
 
@@ -19,11 +27,23 @@ export default function WebPreview({ url, className }: { url: string; className?
         window.open(url, '_blank')
       }}
     >
-      {image && <Image src={image} className="rounded-l-lg object-cover w-2/5" removeWrapper />}
+      {image && (
+        <Image
+          src={image}
+          className={`rounded-l-lg object-cover ${size === 'normal' ? 'h-44' : 'h-24'}`}
+          removeWrapper
+        />
+      )}
       <div className={`flex-1 w-0 p-2 border ${image ? 'rounded-r-lg' : 'rounded-lg'}`}>
         <div className="text-xs text-muted-foreground">{hostname}</div>
-        <div className="font-semibold line-clamp-2">{title}</div>
-        <div className="text-xs text-muted-foreground line-clamp-5">{description}</div>
+        <div className={`font-semibold ${size === 'normal' ? 'line-clamp-2' : 'line-clamp-1'}`}>
+          {title}
+        </div>
+        <div
+          className={`text-xs text-muted-foreground ${size === 'normal' ? 'line-clamp-5' : 'line-clamp-2'}`}
+        >
+          {description}
+        </div>
       </div>
     </div>
   )