diff --git a/CHANGELOG.md b/CHANGELOG.md
index 44f1dfba..73e715c8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### 3.11.2 (2024-11-22)
+
 ## 3.11.0 (2024-10-25)
 
 ### 3.10.3 (2024-10-18)
diff --git a/package.json b/package.json
index 16477d6a..38cb4d8b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@amityco/ui-kit-open-source",
-  "version": "3.11.0",
+  "version": "3.11.2",
   "engines": {
     "node": ">=16",
     "pnpm": ">=8"
diff --git a/src/core/components/GalleryGrid/TruncatedGrid.tsx b/src/core/components/GalleryGrid/TruncatedGrid.tsx
index 96bee1b4..f7a720ba 100644
--- a/src/core/components/GalleryGrid/TruncatedGrid.tsx
+++ b/src/core/components/GalleryGrid/TruncatedGrid.tsx
@@ -34,7 +34,9 @@ import Square from '~/core/components/Square';
   => ((100% / 3) / .75)
 */
 
-const Gallery = styled.div<{ count?: number; grid?: boolean }>`
+const Gallery = styled.div.withConfig({
+  shouldForwardProp: (prop) => prop !== 'grid',
+})<{ count?: number; grid?: boolean }>`
   display: grid;
   width: 100%;
 
diff --git a/src/core/components/SideMenuActionItem/styles.tsx b/src/core/components/SideMenuActionItem/styles.tsx
index db5e98d0..122dec41 100644
--- a/src/core/components/SideMenuActionItem/styles.tsx
+++ b/src/core/components/SideMenuActionItem/styles.tsx
@@ -34,7 +34,9 @@ export const ButtonActionItem = styled(SecondaryButton)`
   width: 100%;
 `;
 
-export const AnchorActionItem = styled.a<{ active?: boolean }>`
+export const AnchorActionItem = styled.a.withConfig({
+  shouldForwardProp: (prop) => prop !== 'active',
+})<{ active?: boolean }>`
   cursor: pointer;
   border-radius: 4px;
   ${actionItemContainerStyles}
diff --git a/src/social/components/post/TextContent/index.tsx b/src/social/components/post/TextContent/index.tsx
index db62e275..bbfc43e7 100644
--- a/src/social/components/post/TextContent/index.tsx
+++ b/src/social/components/post/TextContent/index.tsx
@@ -9,7 +9,12 @@ import MentionHighlightTag from '~/core/components/MentionHighlightTag';
 import { Mentioned, findChunks } from '~/helpers/utils';
 import { useCustomComponent } from '~/core/providers/CustomComponentsProvider';
 
-export const PostContent = styled.div<{ isExpanded: boolean; postMaxLines: number }>`
+export const PostContent = styled.div.withConfig({
+  shouldForwardProp: (prop) => prop !== 'isExpanded' && prop !== 'postMaxLines',
+})<{
+  isExpanded: boolean;
+  postMaxLines: number;
+}>`
   overflow-wrap: break-word;
   color: ${({ theme }) => theme.palette.neutral.main};
   white-space: pre-wrap;
diff --git a/src/v4/core/AdEngine.ts b/src/v4/core/AdEngine.ts
index 4b3c57a6..5031ea59 100644
--- a/src/v4/core/AdEngine.ts
+++ b/src/v4/core/AdEngine.ts
@@ -18,7 +18,8 @@ class SeenRecencyCache {
     return JSON.parse(window.localStorage.getItem(this.#persistentCacheKey) || '{}');
   }
 
-  getSeenRecencyByAdId(adId: string): number {
+  getSeenRecencyByAdId(adId?: string): number | undefined {
+    if (!adId) return;
     return this.#getSeenRecencyCache()[adId];
   }
 
@@ -82,7 +83,7 @@ export class AdEngine {
     }
   }
 
-  getLastSeen(adId: string) {
+  getLastSeen(adId?: string) {
     return SeenRecencyCache.instance.getSeenRecencyByAdId(adId);
   }
 
diff --git a/src/v4/core/AdSupplier.ts b/src/v4/core/AdSupplier.ts
index 7a6e0a9c..3ae03901 100644
--- a/src/v4/core/AdSupplier.ts
+++ b/src/v4/core/AdSupplier.ts
@@ -41,12 +41,15 @@ export class AdSupplier {
 
   #calculateImpressionAges(ads: Amity.Ad[]) {
     const recencySortedAds = ads.sort((ad1, ad2) => {
-      return AdEngine.instance.getLastSeen(ad2.adId) - AdEngine.instance.getLastSeen(ad1.adId);
+      const ad1ID = AdEngine.instance.getLastSeen(ad1.adId) ?? 0;
+      const ad2ID = AdEngine.instance.getLastSeen(ad2.adId) ?? 0;
+      return ad2ID - ad1ID;
     });
 
     const impressionAges = new Map<string, number>();
+
     const minLastSeen = AdEngine.instance.getLastSeen(
-      recencySortedAds[recencySortedAds.length - 1].adId,
+      recencySortedAds?.[recencySortedAds.length - 1]?.adId,
     );
     const maxLastSeen = AdEngine.instance.getLastSeen(recencySortedAds[0].adId);
 
diff --git a/src/v4/icons/AngleRight.tsx b/src/v4/icons/AngleRight.tsx
index 320e3ec3..6de3210c 100644
--- a/src/v4/icons/AngleRight.tsx
+++ b/src/v4/icons/AngleRight.tsx
@@ -2,8 +2,8 @@ import React from 'react';
 
 const AngleRight = (props: React.SVGProps<SVGSVGElement>) => (
   <svg
-    width="6"
-    height="9"
+    width="100%"
+    height="100%"
     viewBox="0 0 6 9"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
diff --git a/src/v4/social/elements/CommunityAvatar/CommunityAvatar.tsx b/src/v4/social/elements/CommunityAvatar/CommunityAvatar.tsx
index 50112e2b..db2813a4 100644
--- a/src/v4/social/elements/CommunityAvatar/CommunityAvatar.tsx
+++ b/src/v4/social/elements/CommunityAvatar/CommunityAvatar.tsx
@@ -4,14 +4,14 @@ import { useAmityElement } from '~/v4/core/hooks/uikit';
 import styles from './CommunityAvatar.module.css';
 import clsx from 'clsx';
 
-const CommunityAvatarSvg = (props: React.SVGProps<SVGSVGElement>) => (
+const CommunityAvatarSvg = ({ className, ...props }: React.SVGProps<SVGSVGElement>) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    width="64"
-    height="64"
+    width="100%"
+    height="100%"
     viewBox="0 0 64 64"
     fill="none"
-    className={styles.communityAvatar__placeholder}
+    className={clsx(styles.communityAvatar__placeholder, className)}
     {...props}
   >
     <rect width="64" height="64" rx="32" className={styles.communityAvatar__placeholder__rect} />
@@ -46,7 +46,7 @@ export function CommunityAvatar({
 
   if (isExcluded) return null;
 
-  if (avatarFile == null) return <CommunityAvatarSvg style={themeStyles} />;
+  if (avatarFile == null) return <CommunityAvatarSvg style={themeStyles} className={className} />;
 
   return (
     <object
@@ -56,7 +56,7 @@ export function CommunityAvatar({
       data-qa-anchor={accessibilityId}
       className={clsx(styles.communityAvatar__image, className)}
     >
-      <CommunityAvatarSvg />
+      <CommunityAvatarSvg className={className} />
     </object>
   );
 }
diff --git a/src/v4/social/elements/ShareStoryButton/ShareStoryButton.module.css b/src/v4/social/elements/ShareStoryButton/ShareStoryButton.module.css
index 1cc8cd5f..2487f8f9 100644
--- a/src/v4/social/elements/ShareStoryButton/ShareStoryButton.module.css
+++ b/src/v4/social/elements/ShareStoryButton/ShareStoryButton.module.css
@@ -1,7 +1,6 @@
 .shareStoryButton {
   display: inline-flex;
-  height: 2.5rem;
-  padding: 0.375rem 0.5rem 0.375rem 0.25rem;
+  padding: 0.25rem 0.5rem 0.25rem 0.25rem;
   align-items: center;
   gap: var(--asc-spacing-s1);
   flex-shrink: 0;
diff --git a/src/v4/social/hooks/useVisibilitySensor.tsx b/src/v4/social/hooks/useVisibilitySensor.tsx
new file mode 100644
index 00000000..14243139
--- /dev/null
+++ b/src/v4/social/hooks/useVisibilitySensor.tsx
@@ -0,0 +1,34 @@
+import { RefObject, useEffect, useState } from 'react';
+
+interface UseVisibilitySensorProps {
+  threshold: number;
+  elementRef: RefObject<HTMLDivElement>;
+}
+
+export const useVisibilitySensor = ({ threshold, elementRef }: UseVisibilitySensorProps) => {
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    if (!elementRef.current) return;
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          const isIntersecting = entry.isIntersecting;
+          setIsVisible(isIntersecting);
+        });
+      },
+      {
+        threshold: threshold,
+      },
+    );
+
+    observer.observe(elementRef.current);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [threshold, elementRef]);
+
+  return { isVisible };
+};
diff --git a/src/v4/social/internal-components/ImageViewer/ImageViewer.tsx b/src/v4/social/internal-components/ImageViewer/ImageViewer.tsx
index 5f6de3b5..b302954b 100644
--- a/src/v4/social/internal-components/ImageViewer/ImageViewer.tsx
+++ b/src/v4/social/internal-components/ImageViewer/ImageViewer.tsx
@@ -1,24 +1,12 @@
 import React, { useState } from 'react';
 import useImage from '~/core/hooks/useImage';
-import usePostByIds from '~/social/hooks/usePostByIds';
 import { useAmityElement } from '~/v4/core/hooks/uikit';
 import { ClearButton } from '~/v4/social/elements/ClearButton';
-
 import styles from './ImageViewer.module.css';
+import AngleRight from '~/v4/icons/AngleRight';
+import usePost from '~/v4/core/hooks/objects/usePost';
 
-const AngleRight = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg
-    width="6"
-    height="9"
-    viewBox="0 0 6 9"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    {...props}
-  >
-    <path d="M5.13281 4.71094L1.71094 8.17969C1.59375 8.29688 1.40625 8.29688 1.3125 8.17969L0.84375 7.71094C0.726562 7.59375 0.726562 7.42969 0.84375 7.3125L3.60938 4.5L0.84375 1.71094C0.726562 1.59375 0.726562 1.40625 0.84375 1.3125L1.3125 0.84375C1.40625 0.726562 1.59375 0.726562 1.71094 0.84375L5.13281 4.3125C5.25 4.42969 5.25 4.59375 5.13281 4.71094Z" />
-  </svg>
-);
-
+//TODO: After SDK update getPostChildren should be used instead of usePost
 interface ImageViewerProps {
   pageId?: string;
   componentId?: string;
@@ -36,18 +24,14 @@ export function ImageViewer({
   initialImageIndex,
   onClose,
 }: ImageViewerProps) {
-  const { themeStyles } = useAmityElement({ pageId, componentId, elementId });
+  const { themeStyles, accessibilityId } = useAmityElement({ pageId, componentId, elementId });
 
   const [selectedImageIndex, setSelectedImageIndex] = useState(initialImageIndex);
 
-  const posts = usePostByIds(post?.children || []);
-
-  const imagePosts = posts.filter((post) => post.dataType === 'image');
-
-  const selectedPost = imagePosts[selectedImageIndex];
+  const { post: imagePost } = usePost(post?.children[selectedImageIndex]);
 
-  const imageUrl = useImage({ fileId: selectedPost?.data?.fileId });
-  const hasNext = selectedImageIndex < imagePosts.length - 1;
+  const imageUrl = useImage({ fileId: imagePost?.data?.fileId });
+  const hasNext = selectedImageIndex < post?.children.length - 1;
   const hasPrev = selectedImageIndex > 0;
 
   const next = () => {
@@ -65,10 +49,10 @@ export function ImageViewer({
   };
 
   return (
-    <div style={themeStyles}>
+    <div style={themeStyles} data-qa-anchor={accessibilityId}>
       <div className={styles.modal} onClick={onClose}>
         <div className={styles.modalContent} onClick={(e) => e.stopPropagation()}>
-          <img src={imageUrl} alt={selectedPost?.data?.fileId || ''} className={styles.fullImage} />
+          <img src={imageUrl} alt={imageUrl || ''} className={styles.fullImage} />
           <div className={styles.overlayPanel}>
             {hasPrev && (
               <div className={styles.overlayPanel__prev} onClick={prev}>