diff --git a/src/components/Feed/Feed.vue b/src/components/Feed/Feed.vue
index 122d4cd78..49fd4ccbf 100644
--- a/src/components/Feed/Feed.vue
+++ b/src/components/Feed/Feed.vue
@@ -3,7 +3,7 @@ import MediaCard from '@pages/passport/components/MediaCard.vue'
 import { MediaEmbed } from '@devprotocol/clubs-plugin-passports/vue'
 import type { PassportItemAssetType } from '@devprotocol/clubs-plugin-passports/types'
 import type { FeedType } from '@fixtures/api/feed'
-import { computed } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import { itemToHash } from '@fixtures/router/passportItem'
 
 const props = defineProps<FeedType>()
@@ -12,10 +12,17 @@ const assetLink = computed(
   () =>
     `/passport/${props.address}/${props.parentPassportIndex === 0 ? '' : props.parentPassport.id}?i=${itemToHash(props.clipType, props.item.id)}`,
 )
+
+const mediaHeight = ref(0)
+// PCの場合200px、スマホの場合110px
+onMounted(() => {
+  mediaHeight.value = window.innerWidth > 768 ? 200 : 110
+})
+
 </script>
 
 <template>
-  <div class="grid gap-2 p-2 border-b boder-black/20">
+  <div class="grid gap-2 p-2 h-full border-b boder-black/20">
     <div class="flex flex-col gap-2">
       <div class="grid grid-cols-[auto_1fr] items-center gap-3">
         <a :href="`/passport/${address}`">
@@ -45,7 +52,7 @@ const assetLink = computed(
         </div>
       </div>
 
-      <div class="grid gap-2 grid-cols-2 rounded">
+      <div class="flex-grow grid gap-2 grid-cols-2 rounded">
         <div class="flex flex-col gap-1">
           <div
             v-if="description"
@@ -83,6 +90,7 @@ const assetLink = computed(
         <a
           :href="assetLink"
           target="_blank"
+          class="flex items-end"
           :class="{ 'p-3 rounded': frameHexColor }"
           :style="
             frameHexColor
@@ -100,7 +108,7 @@ const assetLink = computed(
               :found="!!assetSrc"
             />
           </div>
-          <div v-if="tag === 'ugc'" class="rounded-xl bg-violet-50 p-2">
+          <div v-if="tag === 'ugc'" class="media-wrapper p-2 rounded-xl bg-violet-50" :style="{ height: `${mediaHeight}px` }">
             <MediaEmbed
               class="w-full rounded-xl aspect-[3/2] mx-auto max-w-40 lg:max-w-xs pointer-events-none overflow-hidden"
               :found="!!assetSrc"
@@ -115,4 +123,24 @@ const assetLink = computed(
   </div>
 </template>
 
-<style scoped lang="scss"></style>
+<style lang="scss">
+.instagram-media {
+  min-width: auto !important;
+}
+
+.twitter-tweet {
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+}
+
+#twitter-widget-0 {
+  width: 100% !important;
+}
+</style>
+
+<style scoped lang="scss">
+.media-wrapper {
+  overflow-y: auto;
+  scrollbar-width: none;
+}
+</style>
diff --git a/src/components/Feed/FeedPageContent.vue b/src/components/Feed/FeedPageContent.vue
index a24d5d109..34dcbecf6 100644
--- a/src/components/Feed/FeedPageContent.vue
+++ b/src/components/Feed/FeedPageContent.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import Feed from '@components/Feed/Feed.vue'
 import type { FeedType } from '../../fixtures/api/feed'
-import { computed, ref, watch } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import { set } from 'es-cookie'
 import { CookieKey } from '@constants/cookie'
 import { Mode } from '@constants/feeds'
@@ -21,11 +20,6 @@ const feedsByMode = ref<Record<Mode, FeedType[]>>({
 const switchingTo = ref<Mode>()
 const items = computed(() => feedsByMode.value[mode.value])
 
-// itemsのtagsがugc以外をfilterして返す
-const ugcItems = computed(() =>
-  feedsByMode.value[mode.value].filter((item) => item.tag === 'ugc'),
-)
-
 const changeMode = async (newmode: Mode) => {
   switchingTo.value = newmode
   if (feedsByMode.value[newmode].length > 0) {
@@ -47,6 +41,12 @@ const changeMode = async (newmode: Mode) => {
 watch(mode, (mode_) => {
   set(CookieKey.DefaultFeed, mode_)
 })
+
+const itemHeight = ref(278)
+onMounted(() => {
+  itemHeight.value = window.innerWidth > 768 ? 278 : 180
+})
+
 </script>
 <template>
   <nav>
@@ -97,7 +97,7 @@ watch(mode, (mode_) => {
       class="flex flex-col gap-2 flex-grow h-full transition"
       :class="{ 'opacity-70': switchingTo && switchingTo !== mode }"
     >
-      <VirtualScroll :items="ugcItems" :itemHeight="195" :buffer="1" />
+      <VirtualScroll :items="items" :itemHeight="itemHeight" :buffer="1" />
     </div>
   </div>
 </template>
diff --git a/src/components/Feed/VirtualScroll.vue b/src/components/Feed/VirtualScroll.vue
index d6ada15eb..14dc5687a 100644
--- a/src/components/Feed/VirtualScroll.vue
+++ b/src/components/Feed/VirtualScroll.vue
@@ -3,25 +3,19 @@ import { ref, computed, onMounted, watch } from 'vue'
 import type { FeedType } from '@fixtures/api/feed'
 import Feed from '@components/Feed/Feed.vue'
 
-// プロパティの型定義
 interface Props<T extends FeedType> {
   items: T[]
-  itemHeight: number // アイテムの高さ
-  buffer: number // 表示範囲外のアイテム数
+  itemHeight: number
+  buffer: number
 }
 
-// プロパティの宣言
 const props = defineProps<Props<FeedType>>()
 
-// DOM要素の参照
 const container = ref<HTMLElement | null>(null)
-// スクロール位置の保存
 const scrollTop = ref(0)
 
-// 全体の高さを計算
 const totalHeight = computed(() => props.items.length * props.itemHeight)
 
-// 可視アイテムの数を計算
 const visibleCount = computed(() => {
   if (!container.value) return 0
   return (
@@ -29,7 +23,6 @@ const visibleCount = computed(() => {
   )
 })
 
-// 可視アイテムの開始インデックスを計算
 const startIndex = computed(() => {
   return Math.max(
     0,
@@ -37,12 +30,10 @@ const startIndex = computed(() => {
   )
 })
 
-// 可視アイテムの終了インデックスを計算
 const endIndex = computed(() => {
   return Math.min(props.items.length, startIndex.value + visibleCount.value)
 })
 
-// 可視アイテムを計算
 const visibleItems = computed(() => {
   return props.items
     .slice(startIndex.value, endIndex.value)
@@ -52,7 +43,6 @@ const visibleItems = computed(() => {
     }))
 })
 
-// スクロールイベントハンドラ
 const onScroll = () => {
   if (container.value) {
     scrollTop.value = container.value.scrollTop
@@ -68,14 +58,12 @@ const throttledOnScroll = () => {
   scrollTimeout = window.setTimeout(onScroll, 16)
 }
 
-// マウント時にスクロール位置を初期化
 onMounted(() => {
   if (container.value) {
     scrollTop.value = container.value.scrollTop
   }
 })
 
-// スクロール位置やアイテムの変更を監視
 watch([scrollTop, () => props.items], () => {
   if (container.value) {
     container.value.scrollTop = scrollTop.value
@@ -89,15 +77,13 @@ watch([scrollTop, () => props.items], () => {
     ref="container"
     @scroll="throttledOnScroll"
   >
-    <!-- スクロールスペーサー。全体の高さを設定 -->
     <div class="spacer" :style="{ height: totalHeight + 'px' }"></div>
 
-    <!-- 可視アイテムをレンダリング -->
     <div
       class="item"
       v-for="feed in visibleItems"
       :key="feed.id"
-      :style="{ top: `${feed.offset}px` }"
+      :style="{ top: `${feed.offset}px`, height: `${props.itemHeight}px` }"
     >
       <Feed :key="feed.id" v-bind="feed" />
     </div>