diff --git a/src/components/middle/message/WebPage.scss b/src/components/middle/message/WebPage.scss
index 549eb5288..17f19c207 100644
--- a/src/components/middle/message/WebPage.scss
+++ b/src/components/middle/message/WebPage.scss
@@ -31,19 +31,21 @@
 
     &,
     & img,
+    & canvas,
     &.small-image img {
       border-radius: var(--border-radius-messages-small) !important;
     }
 
     &.square-image {
-      width: 5rem;
-      height: 5rem;
+      width: 100%;
+      height: 100%;
       min-height: 0;
       margin-bottom: 0 !important;
 
+      canvas,
       img {
-        width: 100%;
-        height: 100%;
+        width: 100% !important;
+        height: 100% !important;
       }
     }
   }
@@ -53,6 +55,10 @@
     margin-bottom: 1rem !important;
   }
 
+  .message-content:not(.has-reactions) &.no-article:last-child {
+    margin-bottom: 1rem !important;
+  }
+
   &.with-square-photo {
     display: flex;
     margin-bottom: 1rem;
@@ -65,6 +71,18 @@
     .media-inner {
       order: 2;
       flex-shrink: 0;
+
+      &.square-image {
+        width: 5rem;
+        height: 5rem;
+        min-height: 0;
+        margin-bottom: 0 !important;
+
+        img {
+          width: 100%;
+          height: 100%;
+        }
+      }
     }
 
     &:dir(rtl) {
diff --git a/src/components/middle/message/WebPage.tsx b/src/components/middle/message/WebPage.tsx
index 9bfc67786..5adb1cb87 100644
--- a/src/components/middle/message/WebPage.tsx
+++ b/src/components/middle/message/WebPage.tsx
@@ -50,12 +50,6 @@ const WebPage: FC<OwnProps> = ({
 }) => {
   const webPage = getMessageWebPage(message);
 
-  let isSquarePhoto = false;
-  if (webPage?.photo && !webPage.video) {
-    const { width, height } = calculateMediaDimensions(message);
-    isSquarePhoto = width === height;
-  }
-
   const handleMediaClick = useCallback(() => {
     onMediaClick!();
   }, [onMediaClick]);
@@ -73,8 +67,14 @@ const WebPage: FC<OwnProps> = ({
     photo,
     video,
   } = webPage;
-  const isMediaInteractive = (photo || video) && onMediaClick && !isSquarePhoto;
   const truncatedDescription = trimText(description, MAX_TEXT_LENGTH);
+  const isArticle = Boolean(truncatedDescription || title || siteName);
+  let isSquarePhoto = false;
+  if (isArticle && webPage?.photo && !webPage.video) {
+    const { width, height } = calculateMediaDimensions(message);
+    isSquarePhoto = width === height;
+  }
+  const isMediaInteractive = (photo || video) && onMediaClick && !isSquarePhoto;
 
   const className = buildClassName(
     'WebPage',
@@ -82,6 +82,7 @@ const WebPage: FC<OwnProps> = ({
     isSquarePhoto && 'with-square-photo',
     !photo && !video && !inPreview && 'without-media',
     video && 'with-video',
+    !isArticle && 'no-article',
   );
 
   return (
@@ -106,15 +107,17 @@ const WebPage: FC<OwnProps> = ({
           theme={theme}
         />
       )}
-      <div className="WebPage-text">
-        <SafeLink className="site-name" url={url} text={siteName || displayUrl} />
-        {!inPreview && title && (
-          <p className="site-title">{renderText(title)}</p>
-        )}
-        {truncatedDescription && (
-          <p className="site-description">{renderText(truncatedDescription, ['emoji', 'br'])}</p>
-        )}
-      </div>
+      {isArticle && (
+        <div className="WebPage-text">
+          <SafeLink className="site-name" url={url} text={siteName || displayUrl} />
+          {!inPreview && title && (
+            <p className="site-title">{renderText(title)}</p>
+          )}
+          {truncatedDescription && (
+            <p className="site-description">{renderText(truncatedDescription, ['emoji', 'br'])}</p>
+          )}
+        </div>
+      )}
       {!inPreview && video && (
         <Video
           message={message}