diff --git a/frontend/src/components/feeds/feedPage/FeedPageItem.vue b/frontend/src/components/feeds/feedPage/FeedPageItem.vue
index 7d11ff8..fa41ac6 100644
--- a/frontend/src/components/feeds/feedPage/FeedPageItem.vue
+++ b/frontend/src/components/feeds/feedPage/FeedPageItem.vue
@@ -82,50 +82,48 @@ console.log(props.feed);
                 </div>
             </div>
         </div>
-        <Transition name="slide-fade">
-            <div v-if="showOptions" class="px-4 py-4 rounded-lg bg-[#282828] flex flex-col gap-4 z-0"
-                :class="{ 'rounded-t-none': showOptions }">
-
-                <FeedDescription v-if="props.feed.description" :description="props.feed.description"></FeedDescription>
-
-                <div v-if="props.feed.errormessage">
-                    <div class="flex flex-row items-center gap-2 bg-red-800 rounded-t-lg px-3 py-2">
-                        <Info size="25"></Info>
-                        <p class="text-left font-thin text-sm">We failed to fetch this feed for {{
-            props.feed.error_count }} times. Error messages related to the
-                            app can be reported <a class="underline" :href="REPORT_URL">here</a>.</p>
-                    </div>
-                    <p class="bg-red-500 rounded-b-lg px-3 py-2 z-10 text-sm">{{ props.feed.errormessage
-                        }}</p>
+        <div style="transition: all ease .5s;" class="px-4 py-4 rounded-lg bg-[#282828] flex flex-col gap-4 z-0"
+            :class="{ 'rounded-t-none h-auto': showOptions, 'h-0 overflow-hidden -mt-9': !showOptions }">
+
+            <FeedDescription v-if="props.feed.description" :description="props.feed.description"></FeedDescription>
+
+            <div v-if="props.feed.errormessage">
+                <div class="flex flex-row items-center gap-2 bg-red-800 rounded-t-lg px-3 py-2">
+                    <Info size="25"></Info>
+                    <p class="text-left font-thin text-sm">We failed to fetch this feed for {{
+                        props.feed.error_count }} times. Error messages related to the
+                        app can be reported <a class="underline" :href="REPORT_URL">here</a>.</p>
                 </div>
+                <p class="bg-red-500 rounded-b-lg px-3 py-2 z-10 text-sm">{{ props.feed.errormessage
+                    }}</p>
+            </div>
 
-                <div class="flex justify-between items-center gap-2">
-                    <div>
-                        <h3 class="font-semibold">Open in App?</h3>
-                        <p class="text-secondary-500 text-left font-thin text-sm">Should Feed Articles Open In App?
-                        </p>
-                    </div>
-                    <label class="relative inline-flex items-center cursor-pointer" title="open Feed with App">
-                        <input type="checkbox" class="sr-only peer" v-model="openInApp">
-                        <div class="w-11 h-6 bg-primary-600 rounded-full peer dark:bg-background-900  dark:peer-focus:ring-orange-00 peer-checked:after:translate-x-full 
+            <div class="flex justify-between items-center gap-2">
+                <div>
+                    <h3 class="font-semibold">Open in App?</h3>
+                    <p class="text-secondary-500 text-left font-thin text-sm">Should Feed Articles Open In App?
+                    </p>
+                </div>
+                <label class="relative inline-flex items-center cursor-pointer" title="open Feed with App">
+                    <input type="checkbox" class="sr-only peer" v-model="openInApp">
+                    <div class="w-11 h-6 bg-primary-600 rounded-full peer dark:bg-background-900  dark:peer-focus:ring-orange-00 peer-checked:after:translate-x-full 
                                         rtl:peer-checked:after:-translate-x-full peer-checked:after:border-primary-600 after:content-[''] after:absolute after:top-0.5 
                                         after:start-[2px] after:bg-primary-600 after:border-primary-600 after:border after:rounded-full after:h-5 after:w-5 after:transition-all
                                         dark:border-background-900  peer-checked:bg-primary-800">
-                        </div>
-                    </label>
-                </div>
+                    </div>
+                </label>
+            </div>
 
-                <div class="flex gap-3">
-                    <button v-if="canShare" @click="shareFeed();" title="share Feed"
-                        class=" w-full h-11 bg-primary-600 rounded-lg hover:bg-amber-700 transition">Share</button>
-                    <button @click="openFeedPage();" title="open Feed with new Tap"
-                        class=" w-full h-11 bg-primary-600 rounded-lg hover:bg-amber-700 transition">Open</button>
-                    <button @click="store.deleteFeed(props.feed.id)" title="remove"
-                        class="w-11 h-11 flex-shrink-0 bg-black/30 rounded-lg hover:bg-red-900 transition flex justify-center items-center">
-                        <Trash2 size="20" class="text-background-300" />
-                    </button>
-                </div>
+            <div class="flex gap-3">
+                <button v-if="canShare" @click="shareFeed();" title="share Feed"
+                    class=" w-full h-11 bg-primary-600 rounded-lg hover:bg-amber-700 transition">Share</button>
+                <button @click="openFeedPage();" title="open Feed with new Tap"
+                    class=" w-full h-11 bg-primary-600 rounded-lg hover:bg-amber-700 transition">Open</button>
+                <button @click="store.deleteFeed(props.feed.id)" title="remove"
+                    class="w-11 h-11 flex-shrink-0 bg-black/30 rounded-lg hover:bg-red-900 transition flex justify-center items-center">
+                    <Trash2 size="20" class="text-background-300" />
+                </button>
             </div>
-        </Transition>
+        </div>
     </div>
 </template>
diff --git a/frontend/src/components/feeds/feedPage/FeedPageList.vue b/frontend/src/components/feeds/feedPage/FeedPageList.vue
index 9e84e46..8fdd6db 100644
--- a/frontend/src/components/feeds/feedPage/FeedPageList.vue
+++ b/frontend/src/components/feeds/feedPage/FeedPageList.vue
@@ -10,19 +10,19 @@ store.getFeedList();
 </script>
 
 <template>
-    <div>
-        <div v-if="store.feedList.length > 0">
-            <NonBlockingLoadIndicator :show="store.state === StoreStatus.LOADING" />
-            <TransitionGroup name="list" tag="div" class="flex flex-col gap-4 overflow-x-hidden">
-                <FeedItem v-for="feed in store.feedList" :key="feed.id" :feed="feed" />
-            </TransitionGroup>
-        </div>
-        <div v-else-if="store.feedList.length === 0 && store.state === StoreStatus.READY">
-            <div class="flex w-full items-center justify-center flex-col h-full mt-[20vh]">
-                <img src="/images/LovingDoodle.svg" alt="A Person holding a heart in their hands" class="w-[80%]">
-                <p class="text-background-600 m-0">No subscribed feeds yet.</p>
-            </div>
-        </div>
-        <BlockingLoadIndicator v-else :show="true" />
+  <div style="interpolate-size: allow-keywords;">
+    <div v-if="store.feedList.length > 0">
+      <NonBlockingLoadIndicator :show="store.state === StoreStatus.LOADING" />
+      <TransitionGroup name="list" tag="div" class="flex flex-col gap-4 overflow-x-hidden">
+        <FeedItem v-for="feed in store.feedList" :key="feed.id" :feed="feed" />
+      </TransitionGroup>
     </div>
+    <div v-else-if="store.feedList.length === 0 && store.state === StoreStatus.READY">
+      <div class="flex w-full items-center justify-center flex-col h-full mt-[20vh]">
+        <img src="/images/LovingDoodle.svg" alt="A Person holding a heart in their hands" class="w-[80%]">
+        <p class="text-background-600 m-0">No subscribed feeds yet.</p>
+      </div>
+    </div>
+    <BlockingLoadIndicator v-else :show="true" />
+  </div>
 </template>