diff --git a/packages/atlas/src/components/_channel/ChannelLink/ChannelLink.tsx b/packages/atlas/src/components/_channel/ChannelLink/ChannelLink.tsx
index f032cdff80..e4a711c3c3 100644
--- a/packages/atlas/src/components/_channel/ChannelLink/ChannelLink.tsx
+++ b/packages/atlas/src/components/_channel/ChannelLink/ChannelLink.tsx
@@ -105,7 +105,15 @@ export const ChannelLink: FC<ChannelLinkProps> = ({
   )
 }
 
-const FollowButton = ({ title, channelId }: { title?: string; channelId?: string }) => {
+export const FollowButton = ({
+  title,
+  channelId,
+  isSmall,
+}: {
+  title?: string
+  channelId?: string
+  isSmall?: boolean
+}) => {
   const { toggleFollowing, isFollowing } = useHandleFollowChannel(channelId, title)
   const handleFollowButtonClick = (e: MouseEvent) => {
     e.preventDefault()
@@ -115,7 +123,7 @@ const FollowButton = ({ title, channelId }: { title?: string; channelId?: string
   return (
     <FollowButtonWrapper>
       <ProtectedActionWrapper title="You want to follow this channel?" description={`Sign in to follow ${title}`}>
-        <Button variant="secondary" onClick={handleFollowButtonClick}>
+        <Button variant="secondary" size={isSmall ? 'small' : 'medium'} onClick={handleFollowButtonClick}>
           {isFollowing ? 'Unfollow' : 'Follow'}
         </Button>
       </ProtectedActionWrapper>
diff --git a/packages/atlas/src/components/_video/BackgroundVideoPlayer/BackgroundVideoPlayer.styles.ts b/packages/atlas/src/components/_video/BackgroundVideoPlayer/BackgroundVideoPlayer.styles.ts
index 42fa1e7b64..f5371d4d0e 100644
--- a/packages/atlas/src/components/_video/BackgroundVideoPlayer/BackgroundVideoPlayer.styles.ts
+++ b/packages/atlas/src/components/_video/BackgroundVideoPlayer/BackgroundVideoPlayer.styles.ts
@@ -47,6 +47,7 @@ export const ButtonBox = styled.div`
   z-index: ${zIndex.modals};
   display: flex;
   gap: ${sizes(2)};
+  flex-direction: column-reverse;
 
   ${media.sm} {
     bottom: 32px;
diff --git a/packages/atlas/src/components/_video/BackgroundVideoPlayer/BackgroundVideoPlayer.tsx b/packages/atlas/src/components/_video/BackgroundVideoPlayer/BackgroundVideoPlayer.tsx
index 2da75b69b7..e271b6e5fe 100644
--- a/packages/atlas/src/components/_video/BackgroundVideoPlayer/BackgroundVideoPlayer.tsx
+++ b/packages/atlas/src/components/_video/BackgroundVideoPlayer/BackgroundVideoPlayer.tsx
@@ -18,6 +18,8 @@ type BackgroundVideoPlayerProps = {
   withFade?: boolean
   src: string[]
   poster: string[]
+  onMuted?: (newState: boolean) => void
+  loop?: boolean
   customLink?: string
 } & Omit<VideoHTMLAttributes<HTMLVideoElement>, 'src' | 'poster'>
 
@@ -32,14 +34,16 @@ export const BackgroundVideoPlayer: FC<BackgroundVideoPlayerProps> = ({
   handleActions,
   videoPlaytime,
   videoId,
+  onMuted,
   withFade,
   customLink,
+  loop,
   ...props
 }) => {
   const videoRef = useRef<HTMLVideoElement>(null)
   const [isPosterVisible, setIsPosterVisible] = useState(true)
   const [isPlaying, setIsPlaying] = useState(autoPlay)
-  const [isMuted, setIsMuted] = useState(true)
+  const [isMuted, setIsMuted] = useState(props.muted)
   const [canPlay, setCanPlay] = useState(false)
 
   const initialRender = useRef(true)
@@ -97,9 +101,14 @@ export const BackgroundVideoPlayer: FC<BackgroundVideoPlayerProps> = ({
   }
 
   const handleEnded = (e: SyntheticEvent<HTMLVideoElement, Event>) => {
+    onEnded?.(e)
+
+    if (loop && videoRef.current) {
+      videoRef.current.currentTime = 0
+      return
+    }
     setIsPosterVisible(true)
     setIsPlaying(false)
-    onEnded?.(e)
   }
 
   return (
@@ -112,13 +121,18 @@ export const BackgroundVideoPlayer: FC<BackgroundVideoPlayerProps> = ({
             variant="tertiary"
           />
           <Button
-            onClick={() => setIsMuted((prev) => !prev)}
+            onClick={() => {
+              onMuted?.(!isMuted)
+              setIsMuted((prev) => !prev)
+            }}
             icon={isMuted ? <SvgActionSoundOff /> : <SvgActionSoundOn />}
             variant="tertiary"
           />
         </ButtonBox>
       )}
-      {playing && <VideoProgress video={videoRef.current} isPlaying={isPlaying} tick={10} limit={videoPlaytime} />}
+      {playing && (
+        <VideoProgress loop={loop} video={videoRef.current} isPlaying={isPlaying} tick={10} limit={videoPlaytime} />
+      )}
       <StyledFade withFade={withFade}>
         <StyledVideo
           resolvedVideoUrls={src}
diff --git a/packages/atlas/src/components/_video/BackgroundVideoPlayer/VideoProgress.tsx b/packages/atlas/src/components/_video/BackgroundVideoPlayer/VideoProgress.tsx
index 76baec2b67..c959d1a4dd 100644
--- a/packages/atlas/src/components/_video/BackgroundVideoPlayer/VideoProgress.tsx
+++ b/packages/atlas/src/components/_video/BackgroundVideoPlayer/VideoProgress.tsx
@@ -9,16 +9,23 @@ export type VideoProgressProps = {
   isPlaying?: boolean
   // limit in seconds for video play time
   limit?: number
+  loop?: boolean
 }
 
-export const VideoProgress = ({ tick, video, isPlaying, limit }: VideoProgressProps) => {
+export const VideoProgress = ({ tick, video, isPlaying, limit, loop }: VideoProgressProps) => {
   const [progress, setProgress] = useState(0)
+  const hasVideo = !!video
   useEffect(() => {
-    if ((isPlaying || typeof isPlaying === 'undefined') && video) {
+    if ((isPlaying || typeof isPlaying === 'undefined') && hasVideo) {
       const id = setInterval(() => {
-        const proccessedLimit = limit ? (limit < video.duration ? limit : video.duration) : video.duration
+        const proccessedLimit = limit ? Math.min(limit, video.duration) : video.duration
         if (limit && video.currentTime > proccessedLimit) {
           setProgress(1)
+          if (loop) {
+            video.currentTime = 0
+            video.play()
+            return
+          }
           video.currentTime = video.duration
           clearInterval(id)
           return
@@ -30,7 +37,7 @@ export const VideoProgress = ({ tick, video, isPlaying, limit }: VideoProgressPr
         clearInterval(id)
       }
     }
-  }, [isPlaying, limit, progress, tick, video, video?.duration])
+  }, [hasVideo, isPlaying, limit, loop, progress, tick, video, video?.duration])
 
   const width = useMemo(() => (progress ? `${progress * 100}%` : 1), [progress])
   return (
diff --git a/packages/atlas/src/config/routes.ts b/packages/atlas/src/config/routes.ts
index d5d4de3cc8..681ee408fd 100644
--- a/packages/atlas/src/config/routes.ts
+++ b/packages/atlas/src/config/routes.ts
@@ -29,6 +29,7 @@ export const relativeRoutes = {
     video: (id = ':id') => `video/${id}`,
   },
   viewer: {
+    shorts: () => 'shorts',
     curatorView: () => 'curator-view',
     curatorHomepage: () => 'curator-homepage',
     index: () => '',
diff --git a/packages/atlas/src/views/viewer/HomeView.tsx b/packages/atlas/src/views/viewer/HomeView.tsx
index 7e542dc926..2236b0dcc3 100644
--- a/packages/atlas/src/views/viewer/HomeView.tsx
+++ b/packages/atlas/src/views/viewer/HomeView.tsx
@@ -54,7 +54,7 @@ const StyledSection = styled(Section)`
   padding: ${sizes(8)} 0;
 `
 
-const useHomeVideos = () => {
+export const useHomeVideos = () => {
   const initialRowsToLoad = useVideoGridRows('main')
   const { data, loading } = useGetCuratedHompageVideosQuery({
     notifyOnNetworkStatusChange: true,
diff --git a/packages/atlas/src/views/viewer/ShortsView/ShortsView.tsx b/packages/atlas/src/views/viewer/ShortsView/ShortsView.tsx
new file mode 100644
index 0000000000..1fb7427c1e
--- /dev/null
+++ b/packages/atlas/src/views/viewer/ShortsView/ShortsView.tsx
@@ -0,0 +1,277 @@
+import styled from '@emotion/styled'
+import { useCallback, useEffect, useRef, useState } from 'react'
+
+import { useFullVideo } from '@/api/hooks/video'
+import { VideoOrderByInput } from '@/api/queries/__generated__/baseTypes.generated'
+import {
+  GetBasicVideosConnectionLightweightDocument,
+  useGetCuratedHompageVideosQuery,
+} from '@/api/queries/__generated__/videos.generated'
+import { FlexBox } from '@/components/FlexBox'
+import { Text } from '@/components/Text'
+import { ChannelLink, FollowButton } from '@/components/_channel/ChannelLink'
+import { SkeletonLoader } from '@/components/_loaders/SkeletonLoader'
+import { BackgroundVideoPlayer } from '@/components/_video/BackgroundVideoPlayer'
+import { getPublicCryptoVideoFilter } from '@/config/contentFilter'
+import { absoluteRoutes } from '@/config/routes'
+import { useInfiniteVideoGrid } from '@/hooks/useInfiniteVideoGrid'
+import { media } from '@/styles'
+import { createPlaceholderData } from '@/utils/data'
+
+export const ShortsView = () => {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const [forceMuted, setForceMuted] = useState(false)
+  const [activeIndex, setActiveIndex] = useState(0)
+  const [nextSlide, setNextSlide] = useState<Element | null>(null)
+  const observerRef = useRef<IntersectionObserver | null>(null)
+  const { fetchMore, tiles, loading, pageInfo } = useHomeVideos()
+
+  useEffect(() => {
+    const options = {
+      root: containerRef.current,
+      rootMargin: '0px',
+      threshold: 0.5, // Adjust as needed to determine what constitutes "on screen"
+    }
+
+    observerRef.current = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        const target = entry.target as HTMLDivElement
+        if (entry.isIntersecting) {
+          const newIndex = Number(target.dataset.index)
+          setActiveIndex(newIndex)
+          setNextSlide(entries[newIndex + 1].target)
+          if (tiles.length - newIndex <= 2) {
+            if (!loading) {
+              fetchMore({
+                variables: { first: 4 * 4, after: pageInfo?.endCursor },
+              })
+            }
+          }
+        }
+      })
+    }, options)
+
+    const placeholders = containerRef.current?.querySelectorAll('.short-video') ?? []
+    placeholders.forEach((placeholder) => observerRef.current?.observe(placeholder))
+
+    return () => {
+      placeholders.forEach((placeholder) => observerRef.current?.unobserve(placeholder))
+      observerRef.current?.disconnect()
+    }
+  }, [activeIndex, fetchMore, loading, pageInfo?.endCursor, tiles.length])
+
+  const goNextSlide = useCallback(() => {
+    nextSlide?.scrollIntoView({ behavior: 'smooth' })
+  }, [nextSlide])
+
+  return (
+    <Container ref={containerRef}>
+      {tiles.map(({ id }, idx) => (
+        <ShortVideoPlaceholder
+          key={idx}
+          data-index={idx}
+          className={`short-video ${idx === activeIndex ? 'active' : ''} ${
+            activeIndex > idx && idx > activeIndex - 2 ? 'prev' : ''
+          } ${activeIndex < idx && idx < activeIndex + 2 ? 'next' : ''}`}
+        >
+          {activeIndex - 1 > idx || activeIndex + 2 < idx ? (
+            <div style={{ height: '100%', width: 400, aspectRatio: '9/16' }} />
+          ) : (
+            <ShortVideoPlayer
+              forceMuted={forceMuted}
+              setForceMuted={setForceMuted}
+              videoId={id}
+              isActive={idx === activeIndex}
+              playNext={goNextSlide}
+            />
+          )}
+        </ShortVideoPlaceholder>
+      ))}
+    </Container>
+  )
+}
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  gap: 40px;
+  height: 100%;
+  scroll-snap-type: y mandatory;
+  align-items: center;
+  scrollbar-width: none;
+  width: calc(100% + 36px);
+  margin-left: -16px;
+
+  ::-webkit-scrollbar {
+    display: none;
+  }
+`
+
+const ShortVideoPlaceholder = styled.div`
+  display: grid;
+  place-items: center;
+  aspect-ratio: 9/16;
+  max-height: 100%;
+  min-height: 100%;
+  min-width: 300px;
+  width: 100%;
+  scroll-snap-stop: always;
+  scroll-snap-align: center;
+
+  ${media.xs} {
+    width: 400px;
+  }
+
+  ${media.sm} {
+    width: 500px;
+  }
+
+  ${media.xxl} {
+    width: 40vw;
+    height: 100%;
+  }
+`
+
+const ShortVideoPlayer = ({
+  videoId,
+  isActive,
+  forceMuted,
+  playNext,
+  setForceMuted,
+}: {
+  isActive: boolean
+  videoId?: string
+  forceMuted: boolean
+  setForceMuted: (val: boolean) => void
+  playNext: () => void
+}) => {
+  const { video, loading } = useFullVideo(videoId ?? '')
+  const mediaUrls: string[] = video?.media?.resolvedUrls ?? []
+
+  return (
+    <ShortVideoPlayerBox>
+      {!loading && videoId ? (
+        <StyledBackgroundVideoPlayer
+          videoId={videoId}
+          playing={isActive}
+          muted={forceMuted}
+          onMuted={setForceMuted}
+          preload="metadata"
+          withFade
+          src={mediaUrls ?? undefined}
+          poster={[] ?? undefined}
+          handleActions={isActive}
+          videoPlaytime={10}
+          loop
+          onEnded={playNext}
+          customLink={absoluteRoutes.viewer.video(videoId)}
+        />
+      ) : (
+        <SkeletonLoader height="100%" width="100%" />
+      )}
+      {video ? (
+        <DetailsBox flow="column" gap={2}>
+          <FlexBox width="fit-content" gap={4}>
+            <ChannelLink id={video?.channel.id} />
+            <FollowButton isSmall channelId={video?.channel.id} />
+          </FlexBox>
+          <Text margin={{ top: 4 }} variant="t200" as="p">
+            {video?.title}
+          </Text>
+          <Text clampAfterLine={1} variant="t100" as="p" color="colorText">
+            {video?.description}
+          </Text>
+        </DetailsBox>
+      ) : null}
+    </ShortVideoPlayerBox>
+  )
+}
+
+const DetailsBox = styled(FlexBox)`
+  position: absolute;
+  bottom: 30px;
+  left: 10px;
+  max-width: 80%;
+  overflow: hidden;
+`
+
+const ShortVideoPlayerBox = styled.div`
+  aspect-ratio: 9/16;
+  min-height: 100%;
+  max-height: 100%;
+  width: 100%;
+  position: relative;
+  scroll-snap-stop: always;
+  scroll-snap-align: center;
+  overflow: hidden;
+
+  ${media.md} {
+    min-height: 95%;
+    max-height: 95%;
+  }
+
+  ${media.xxl} {
+    width: 40vw;
+  }
+`
+
+const StyledBackgroundVideoPlayer = styled(BackgroundVideoPlayer)``
+
+export const useHomeVideos = () => {
+  const { data, loading } = useGetCuratedHompageVideosQuery({
+    notifyOnNetworkStatusChange: true,
+    variables: {
+      where: getPublicCryptoVideoFilter({
+        orionLanguage_in: undefined,
+        includeInHomeFeed_eq: true,
+        isShort_not_eq: undefined,
+        isShortDerived_isNull: undefined,
+        isShort_eq: true,
+        isShortDerived_eq: true,
+      }),
+      skipVideoIds: ['-1'],
+    },
+  })
+  const avoidIds = data?.dumbPublicFeedVideos ? data.dumbPublicFeedVideos?.map((video) => video.id) : undefined
+  const { columns, fetchMore, pageInfo, tiles } = useInfiniteVideoGrid({
+    query: GetBasicVideosConnectionLightweightDocument,
+    variables: {
+      where: {
+        OR: [
+          getPublicCryptoVideoFilter({
+            id_not_in: avoidIds,
+            isShort_not_eq: undefined,
+            isShortDerived_isNull: undefined,
+            isShort_eq: true,
+            orionLanguage_eq: 'en',
+          }),
+          getPublicCryptoVideoFilter({
+            id_not_in: avoidIds,
+            isShort_not_eq: undefined,
+            isShortDerived_isNull: undefined,
+            isShortDerived_eq: true,
+            orionLanguage_eq: 'en',
+          }),
+        ],
+      },
+      orderBy: VideoOrderByInput.VideoRelevanceDesc,
+    },
+    options: {
+      skip: !avoidIds,
+    },
+  })
+
+  const firstLoad = !data?.dumbPublicFeedVideos && loading
+  const firstLoadPlaceholders = firstLoad ? createPlaceholderData(columns * 3) : []
+
+  const displayedItems = [...(data?.dumbPublicFeedVideos || []), ...(tiles || [])]
+
+  return {
+    tiles: [...firstLoadPlaceholders, ...displayedItems],
+    fetchMore,
+    columns,
+    loading,
+    pageInfo,
+  }
+}
diff --git a/packages/atlas/src/views/viewer/ShortsView/index.ts b/packages/atlas/src/views/viewer/ShortsView/index.ts
new file mode 100644
index 0000000000..5e0b49f8c6
--- /dev/null
+++ b/packages/atlas/src/views/viewer/ShortsView/index.ts
@@ -0,0 +1 @@
+export * from './ShortsView'
diff --git a/packages/atlas/src/views/viewer/ViewerLayout.tsx b/packages/atlas/src/views/viewer/ViewerLayout.tsx
index 1d2bee806b..0c3ed04591 100644
--- a/packages/atlas/src/views/viewer/ViewerLayout.tsx
+++ b/packages/atlas/src/views/viewer/ViewerLayout.tsx
@@ -46,6 +46,7 @@ const SearchView = lazy(() => import('./SearchView').then((module) => ({ default
 const CuratorView = lazy(() => import('./CuratorView').then((module) => ({ default: module.CuratorView })))
 const CuratorHomepage = lazy(() => import('./CuratorHomepage').then((module) => ({ default: module.CuratorHomepage })))
 const VideoView = lazy(() => import('./VideoView').then((module) => ({ default: module.VideoView })))
+const ShortsView = lazy(() => import('./ShortsView').then((module) => ({ default: module.ShortsView })))
 const PortfolioView = lazy(() => import('./PortfolioView').then((module) => ({ default: module.PortfolioView })))
 const ReferralsView = lazy(() =>
   import('@/views/global/ReferralsView').then((module) => ({ default: module.ReferralsView }))
@@ -62,6 +63,7 @@ const viewerRoutes = [
   { path: relativeRoutes.viewer.category(), element: <CategoryView /> },
   { path: relativeRoutes.viewer.memberById(), element: <MemberView /> },
   { path: relativeRoutes.viewer.member(), element: <MemberView /> },
+  { path: relativeRoutes.viewer.shorts(), element: <ShortsView /> },
   { path: relativeRoutes.viewer.marketplace(), element: <MarketplaceView /> },
   ...(atlasConfig.features.ypp.googleConsoleClientId
     ? [