diff --git a/packages/kg-unsplash-selector/src/UnsplashSearchModal.tsx b/packages/kg-unsplash-selector/src/UnsplashSearchModal.tsx
index 3edd012bc3..1d9aedb16f 100644
--- a/packages/kg-unsplash-selector/src/UnsplashSearchModal.tsx
+++ b/packages/kg-unsplash-selector/src/UnsplashSearchModal.tsx
@@ -16,6 +16,9 @@ interface UnsplashModalProps {
   }
 
 export const UnsplashSearchModal : React.FC<UnsplashModalProps> = ({onClose, onImageInsert, unsplashProviderConfig}) => {
+    const ONE_COLUMN_WIDTH = 540;
+    const TWO_COLUMN_WIDTH = 1024;
+
     const unsplashProvider = useMemo(() => {
         if (!unsplashProviderConfig) {
             return new InMemoryUnsplashProvider();
@@ -73,6 +76,37 @@ export const UnsplashSearchModal : React.FC<UnsplashModalProps> = ({onClose, onI
         }
     }, [galleryRef, zoomedImg]);
 
+    const calculateColumnCountForViewport = () => {
+        if (window.matchMedia(`(max-width: ${ONE_COLUMN_WIDTH}px)`).matches) {
+            return 1;
+        }
+
+        if (window.matchMedia(`(max-width: ${TWO_COLUMN_WIDTH}px)`).matches) {
+            return 2;
+        }
+
+        return 3;
+    };
+
+    React.useEffect(() => {
+        const handleResize = () => {
+            const newColumnCount = calculateColumnCountForViewport();
+            masonryService.changeColumnCount(newColumnCount);
+            UnsplashLib.layoutPhotos();
+            const columns = UnsplashLib.getColumns();
+            setDataset(columns || []);
+        };
+
+        window.addEventListener('resize', handleResize);
+
+        // Call once to make sure state is in sync on mount
+        handleResize();
+
+        return () => {
+            window.removeEventListener('resize', handleResize);
+        };
+    }, [UnsplashLib, masonryService]);
+
     const loadInitPhotos = React.useCallback(async () => {
         if (initLoadRef.current === false || searchTerm.length === 0) {
             setDataset([]);
@@ -155,6 +189,15 @@ export const UnsplashSearchModal : React.FC<UnsplashModalProps> = ({onClose, onI
     }, [galleryRef, loadMorePhotos, zoomedImg]);
 
     const selectImg = (payload:Photo) => {
+        const isMobileViewport = window.matchMedia('(max-width: 540px)').matches;
+        const isTouchDevice = window.matchMedia('(pointer: coarse)').matches;
+        const shouldNotZoom = isMobileViewport || isTouchDevice;
+
+        if (shouldNotZoom) {
+            setZoomedImg(null);
+            return;
+        }
+        
         if (payload) {
             setZoomedImg(payload);
             setLastScrollPos(scrollPos);
@@ -176,10 +219,12 @@ export const UnsplashSearchModal : React.FC<UnsplashModalProps> = ({onClose, onI
     }
     return (
         <UnsplashSelector
-            closeModal={onClose}
+            closeModal={onClose}    
+            columnCount={UnsplashLib.getColumnCount()}
             handleSearch={handleSearch}
         >
             <UnsplashGallery
+                columnCount={UnsplashLib.getColumnCount()}
                 dataset={dataset}
                 error={null}
                 galleryRef={galleryRef}
diff --git a/packages/kg-unsplash-selector/src/api/UnsplashService.ts b/packages/kg-unsplash-selector/src/api/UnsplashService.ts
index 685e16990f..ceca147a20 100644
--- a/packages/kg-unsplash-selector/src/api/UnsplashService.ts
+++ b/packages/kg-unsplash-selector/src/api/UnsplashService.ts
@@ -45,6 +45,10 @@ export class UnsplashService implements IUnsplashService {
         return this.masonryService.getColumns();
     }
 
+    getColumnCount(): number {
+        return this.masonryService.columnCount;
+    }
+
     async updateSearch(term: string) {
         let results = await this.photoUseCases.searchPhotos(term);
         this.photos = results;
diff --git a/packages/kg-unsplash-selector/src/ui/UnsplashGallery.tsx b/packages/kg-unsplash-selector/src/ui/UnsplashGallery.tsx
index 6b45ce27e1..5dba7b268e 100644
--- a/packages/kg-unsplash-selector/src/ui/UnsplashGallery.tsx
+++ b/packages/kg-unsplash-selector/src/ui/UnsplashGallery.tsx
@@ -16,12 +16,14 @@ interface UnsplashGalleryColumnsProps {
 
 interface GalleryLayoutProps {
     children?: ReactNode;
+    columnCount?: number;
     galleryRef: RefObject<HTMLDivElement>;
     isLoading?: boolean;
     zoomed?: Photo | null;
 }
 
 interface UnsplashGalleryProps extends GalleryLayoutProps {
+    columnCount?: number;
     error?: string | null;
     dataset?: Photo[][] | [];
     selectImg?: any;
@@ -78,9 +80,18 @@ const UnsplashGalleryColumns: React.FC<UnsplashGalleryColumnsProps> = (props) =>
 };
 
 const GalleryLayout: React.FC<GalleryLayoutProps> = (props) => {
+    const columnCount = props?.columnCount ?? 0;
+    const classNames = [
+        'flex',
+        'size-full',
+        'justify-center',
+        'overflow-auto',
+        props?.zoomed ? 'pb-10' : '',
+        columnCount < 3 ? 'px-5' : 'px-20'
+    ].filter(Boolean).join(' ');
     return (
-        <div className="relative h-full overflow-hidden" data-kg-unsplash-gallery>
-            <div ref={props.galleryRef} className={`flex size-full justify-center overflow-auto px-20 ${props?.zoomed ? 'pb-10' : ''}`} data-kg-unsplash-gallery-scrollref>
+        <div className={`relative h-full overflow-hidden ${columnCount === 1 ? 'px-5' : ''}`} data-kg-unsplash-gallery>
+            <div ref={props.galleryRef} className={classNames} data-kg-unsplash-gallery-scrollref>
                 {props.children}
                 {props?.isLoading && <UnsplashGalleryLoading />}
             </div>
@@ -89,6 +100,7 @@ const GalleryLayout: React.FC<GalleryLayoutProps> = (props) => {
 };
 
 const UnsplashGallery: React.FC<UnsplashGalleryProps> = ({zoomed,
+    columnCount,
     error,
     galleryRef,
     isLoading,
@@ -133,6 +145,7 @@ const UnsplashGallery: React.FC<UnsplashGalleryProps> = ({zoomed,
 
     return (
         <GalleryLayout
+            columnCount={columnCount}
             galleryRef={galleryRef}
             isLoading={isLoading}
             zoomed={zoomed}>
diff --git a/packages/kg-unsplash-selector/src/ui/UnsplashImage.tsx b/packages/kg-unsplash-selector/src/ui/UnsplashImage.tsx
index f4b151d49d..00e0719d49 100644
--- a/packages/kg-unsplash-selector/src/ui/UnsplashImage.tsx
+++ b/packages/kg-unsplash-selector/src/ui/UnsplashImage.tsx
@@ -32,7 +32,7 @@ const UnsplashImage: FC<UnsplashImageProps> = ({payload, srcUrl, links, likes, u
 
     return (
         <div
-            className={`relative mb-6 block ${zoomed ? 'h-full w-[max-content] cursor-zoom-out' : 'w-full cursor-zoom-in'}`}
+            className={`relative mb-6 block ${zoomed ? 'h-full w-[max-content] cursor-zoom-out' : 'w-full [@media(min-width:540px)]:cursor-zoom-in'}`}
             style={{backgroundColor: payload.color || 'transparent'}}
             data-kg-unsplash-gallery-item
             onClick={handleClick}>
@@ -61,10 +61,10 @@ const UnsplashImage: FC<UnsplashImageProps> = ({payload, srcUrl, links, likes, u
                         icon="download"
                     />
                 </div>
-                <div className="flex items-center justify-between">
-                    <div className="flex items-center">
-                        <img alt="author" className="mr-2 size-8 rounded-full" src={user.profile_image.medium} />
-                        <div className="mr-2 truncate font-sans text-sm font-medium text-white">{user.name}</div>
+                <div className="flex items-center justify-between truncate">
+                    <div className="flex w-0 flex-1 items-center">
+                        <img alt="author" className="mr-2 size-8 shrink-0 rounded-full" src={user.profile_image.medium} />
+                        <div className="truncate font-sans text-sm font-medium text-white">{user.name}</div>
                     </div>
                     <UnsplashButton label="Insert image" data-kg-unsplash-insert-button onClick={(e) => {
                         e.stopPropagation();
diff --git a/packages/kg-unsplash-selector/src/ui/UnsplashSelector.tsx b/packages/kg-unsplash-selector/src/ui/UnsplashSelector.tsx
index 8f49534a08..5f7f286901 100644
--- a/packages/kg-unsplash-selector/src/ui/UnsplashSelector.tsx
+++ b/packages/kg-unsplash-selector/src/ui/UnsplashSelector.tsx
@@ -5,11 +5,12 @@ import {ChangeEvent, FunctionComponent, ReactNode} from 'react';
 
 interface UnsplashSelectorProps {
     closeModal: () => void;
+    columnCount: number;
     handleSearch: (e: ChangeEvent<HTMLInputElement>) => void;
     children: ReactNode;
 }
 
-const UnsplashSelector: FunctionComponent<UnsplashSelectorProps> = ({closeModal, handleSearch, children}) => {
+const UnsplashSelector: FunctionComponent<UnsplashSelectorProps> = ({closeModal, columnCount, handleSearch, children}) => {
     return (
         <>
             <div className="fixed inset-0 z-40 h-[100vh] bg-black opacity-60"></div>
@@ -22,12 +23,12 @@ const UnsplashSelector: FunctionComponent<UnsplashSelectorProps> = ({closeModal,
                     />
                 </button>
                 <div className="flex h-full flex-col">
-                    <header className="flex shrink-0 items-center justify-between px-20 py-10">
+                    <header className={`flex shrink-0 items-center justify-between px-20 py-10 flex-row ${columnCount < 3 ? 'flex-col gap-3 px-5' : ''}`}>
                         <h1 className="flex items-center gap-2 font-sans text-3xl font-bold text-black">
-                            <UnsplashIcon className="mb-1" />
+                            <UnsplashIcon className="size-6 mb-1" />
                             Unsplash
                         </h1>
-                        <div className="relative w-full max-w-sm">
+                        <div className={`relative w-full ${columnCount < 3 ? '' : 'max-w-sm'}`}>
                             <SearchIcon className="text-grey-700 absolute left-4 top-1/2 size-4 -translate-y-2" />
                             <input className="border-grey-300 focus:border-grey-400 h-10 w-full rounded-full border border-solid pl-10 pr-8 font-sans text-md font-normal text-black focus-visible:outline-none" placeholder="Search free high-resolution photos" autoFocus data-kg-unsplash-search onChange={handleSearch} />
                         </div>
diff --git a/packages/kg-unsplash-selector/src/ui/UnsplashZoomed.tsx b/packages/kg-unsplash-selector/src/ui/UnsplashZoomed.tsx
index 88860d3b18..9de6be8ac0 100644
--- a/packages/kg-unsplash-selector/src/ui/UnsplashZoomed.tsx
+++ b/packages/kg-unsplash-selector/src/ui/UnsplashZoomed.tsx
@@ -9,7 +9,7 @@ interface UnsplashZoomedProps extends Omit<UnsplashImageProps, 'zoomed'> {
 
 const UnsplashZoomed: FC<UnsplashZoomedProps> = ({payload, insertImage, selectImg, zoomed}) => {
     return (
-        <div className="flex h-full grow basis-0 justify-center" data-kg-unsplash-zoomed onClick={() => selectImg(null)}>
+        <div className="flex size-full grow basis-0 justify-center" data-kg-unsplash-zoomed onClick={() => selectImg(null)}>
             <UnsplashImage 
                 alt={payload.alt_description}
                 height={payload.height}