diff --git a/packages/nc-gui/assets/nc-icons/megaphone.svg b/packages/nc-gui/assets/nc-icons/megaphone.svg
new file mode 100644
index 0000000000..8f08defb54
--- /dev/null
+++ b/packages/nc-gui/assets/nc-icons/megaphone.svg
@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="megaphone">
+<path id="Vector" d="M7.19333 5.66732L13.5 1.33398L13.5 14.6673L7.19333 10.334M7.19333 5.66732L2.50003 5.66732L2.5 10.334H4.84667M7.19333 5.66732L7.19333 10.334M7.19333 10.334H4.84667M7.19333 10.334L7.19333 14.0006H4.84667L4.84667 10.334" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>
diff --git a/packages/nc-gui/components/dashboard/Sidebar/Feed.vue b/packages/nc-gui/components/dashboard/Sidebar/Feed.vue
index 559a51b0d0..a989e3c887 100644
--- a/packages/nc-gui/components/dashboard/Sidebar/Feed.vue
+++ b/packages/nc-gui/components/dashboard/Sidebar/Feed.vue
@@ -31,78 +31,37 @@ const gotoFeed = () => navigateToFeed()
 
 <template>
   <div class="px-2 feed-btn py-2">
-    <div class="flex items-center py-1.5 cursor-pointer px-3 hover:bg-gray-100 bg-[#F0F3FF] rounded-md gap-3" @click="gotoFeed">
-      <span class="text-[#2952CC] font-semibold">What’s New!</span>
-
-      <svg
-        :class="{
-          'animation-active': isNewFeedAvailable,
-        }"
-        class="sparkle text-yellow-500 w-4 h-4"
-        viewBox="0 0 24 24"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M14.187 8.096L15 5.25L15.813 8.096C16.0231 8.83114 16.4171 9.50062 16.9577 10.0413C17.4984 10.5819 18.1679 10.9759 18.903 11.186L21.75 12L18.904 12.813C18.1689 13.0231 17.4994 13.4171 16.9587 13.9577C16.4181 14.4984 16.0241 15.1679 15.814 15.903L15 18.75L14.187 15.904C13.9769 15.1689 13.5829 14.4994 13.0423 13.9587C12.5016 13.4181 11.8321 13.0241 11.097 12.814L8.25 12L11.096 11.187C11.8311 10.9769 12.5006 10.5829 13.0413 10.0423C13.5819 9.50162 13.9759 8.83214 14.186 8.097L14.187 8.096Z"
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-        <path
-          d="M6 14.25L5.741 15.285C5.59267 15.8785 5.28579 16.4206 4.85319 16.8532C4.42059 17.2858 3.87853 17.5927 3.285 17.741L2.25 18L3.285 18.259C3.87853 18.4073 4.42059 18.7142 4.85319 19.1468C5.28579 19.5794 5.59267 20.1215 5.741 20.715L6 21.75L6.259 20.715C6.40725 20.1216 6.71398 19.5796 7.14639 19.147C7.5788 18.7144 8.12065 18.4075 8.714 18.259L9.75 18L8.714 17.741C8.12065 17.5925 7.5788 17.2856 7.14639 16.853C6.71398 16.4204 6.40725 15.8784 6.259 15.285L6 14.25Z"
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-        <path
-          d="M6.5 4L6.303 4.5915C6.24777 4.75718 6.15472 4.90774 6.03123 5.03123C5.90774 5.15472 5.75718 5.24777 5.5915 5.303L5 5.5L5.5915 5.697C5.75718 5.75223 5.90774 5.84528 6.03123 5.96877C6.15472 6.09226 6.24777 6.24282 6.303 6.4085L6.5 7L6.697 6.4085C6.75223 6.24282 6.84528 6.09226 6.96877 5.96877C7.09226 5.84528 7.24282 5.75223 7.4085 5.697L8 5.5L7.4085 5.303C7.24282 5.24777 7.09226 5.15472 6.96877 5.03123C6.84528 4.90774 6.75223 4.75718 6.697 4.5915L6.5 4Z"
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-      </svg>
+    <div
+      class="flex items-center justify-between text-nc-content-brand py-1.5 cursor-pointer px-3 hover:bg-nc-bg-brand-hover bg-nc-bg-brand rounded-lg"
+      @click="gotoFeed"
+    >
+      <div class="flex items-center gap-3">
+        <GeneralIcon icon="megaPhone" />
+        <span class="font-semibold">What’s New!</span>
+      </div>
+
+      <div v-if="isNewFeedAvailable" class="w-3 h-3 pulsing-dot bg-nc-fill-red-medium border-2 border-white rounded-full"></div>
     </div>
   </div>
 </template>
 
 <style scoped lang="scss">
-svg {
-  overflow: visible !important;
-}
-
-.sparkle path {
-  transform-box: fill-box;
-  transform-origin: center;
-  fill: currentColor;
-  stroke: currentColor;
-  animation-delay: calc((var(--transition) * 1.5) + (var(--delay) * 1s));
-  animation-duration: 0.6s;
-  animation: bounce 2s infinite !important;
-  transition: color var(--transition);
-}
-
-@keyframes bounce {
-  35%,
-  65% {
-    scale: var(--scale);
+@keyframes pulse {
+  0% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  50% {
+    transform: scale(1.1);
+    opacity: 0.7;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
   }
-}
-.sparkle path:nth-of-type(1) {
-  --scale: 0.5;
-  --delay: 0.1;
-  --base: 40%;
-}
-
-.sparkle path:nth-of-type(2) {
-  --scale: 1.5;
-  --delay: 0.2;
-  --base: 20%;
 }
 
-.sparkle path:nth-of-type(3) {
-  --scale: 2.5;
-  --delay: 0.35;
-  --base: 30%;
+.pulsing-dot {
+  animation: pulse 1.5s infinite ease-in-out;
 }
 </style>
diff --git a/packages/nc-gui/components/feed/Changelog/Item.vue b/packages/nc-gui/components/feed/Changelog/Item.vue
index 608b449558..ddba39da58 100644
--- a/packages/nc-gui/components/feed/Changelog/Item.vue
+++ b/packages/nc-gui/components/feed/Changelog/Item.vue
@@ -15,6 +15,8 @@ const {
   item: { 'Published Time': CreatedAt, Description, Title, Tags },
 } = props
 
+const truncate = ref(true)
+
 const iconColorMap = {
   'Hotfix': {
     icon: iconMap.ncTool,
@@ -43,16 +45,16 @@ const renderMarkdown = async (markdown: string) => {
 }
 
 const renderedText = computedAsync(async () => {
-  return await renderMarkdown(Description)
+  return await renderMarkdown(truncate.value ? Description.substring(0, 300).concat('...') : Description)
 })
 </script>
 
 <template>
-  <div class="block px-12 relative">
-    <div class="relative pb-12">
+  <div class="block relative">
+    <div class="relative bg-white">
       <div class="aside">
         <div class="aside-divider">
-          <div class="aside-divider-dot"></div>
+          <div class="aside-divider-dot mt-8"></div>
         </div>
         <div class="aside-inner">
           <div class="text-sm text-right pr-8 text-gray-700 leading-5">
@@ -62,7 +64,7 @@ const renderedText = computedAsync(async () => {
       </div>
 
       <div class="content">
-        <div class="flex flex-col py-6 gap-5">
+        <div class="pt-6 pr-6 space-y-5">
           <div class="flex items-center">
             <a
               v-for="tag in tags"
@@ -106,6 +108,13 @@ const renderedText = computedAsync(async () => {
               {{ Title }}
             </NcBadge>
             <div class="prose max-w-none" v-html="renderedText"></div>
+
+            <NcButton v-if="truncate" size="small" class="w-29" type="text" @click="truncate = false">
+              <div class="gap-2 flex items-center">
+                Show more
+                <GeneralIcon icon="arrowDown" />
+              </div>
+            </NcButton>
           </div>
         </div>
       </div>
@@ -119,7 +128,7 @@ const renderedText = computedAsync(async () => {
 }
 
 .content {
-  @apply !pl-50;
+  @apply !pl-52;
 
   a {
     @apply !no-underline;
@@ -133,29 +142,33 @@ const renderedText = computedAsync(async () => {
     h1 {
       @apply !text-3xl !font-bold;
     }
+
+    p {
+      @apply leading-5;
+    }
   }
 }
 
 .aside {
-  @apply absolute left-0 top-1 bottom-2 w-44;
+  @apply absolute left-0 top-0 bottom-0 w-52;
 
   .aside-inner {
-    @apply sticky top-6;
+    @apply sticky top-0 pt-5;
   }
 
   .aside-divider {
-    @apply absolute top-0 right-0 bottom-0 w-1.5;
+    @apply absolute top-0 right-0 bottom-0 w-1.5 mr-3;
     &:before {
       @apply absolute bg-[#E7E7E9] left-0 transform -translate-x-1/2;
       content: '';
-      top: 6px;
+      top: 0px;
       bottom: 0px;
       width: 2px;
       border-radius: 2px;
     }
 
     .aside-divider-dot {
-      @apply sticky h-5 top-7.5
+      @apply sticky h-5 mr-3 top-9;
       transform: translateY(calc(-50% + 3px)) translateX(50%);
       &:before {
         @apply bg-brand-500 absolute w-2 h-2 border-2 border-white left-0 rounded-full transform -translate-x-1/2;
diff --git a/packages/nc-gui/components/feed/Changelog/index.vue b/packages/nc-gui/components/feed/Changelog/index.vue
index 1a21a96d07..62fb0bccf7 100644
--- a/packages/nc-gui/components/feed/Changelog/index.vue
+++ b/packages/nc-gui/components/feed/Changelog/index.vue
@@ -31,7 +31,7 @@ const { isLoading } = useInfiniteScroll(
       <GeneralLoader size="xlarge" />
     </div>
 
-    <div v-else class="max-w-300 mx-auto">
+    <div v-else class="w-[47.75rem] mx-auto">
       <FeedChangelogItem v-for="feed in githubFeed" :key="feed.Id" :item="feed" />
     </div>
   </div>
diff --git a/packages/nc-gui/components/feed/Error.vue b/packages/nc-gui/components/feed/Error.vue
index 10970c3845..63228d6aa5 100644
--- a/packages/nc-gui/components/feed/Error.vue
+++ b/packages/nc-gui/components/feed/Error.vue
@@ -6,12 +6,10 @@ const props = defineProps<{
 const { loadFeed, socialFeed, youtubeFeed, githubFeed } = useProductFeed()
 
 const triggerReload = async () => {
-  const data = (
-    await loadFeed({
-      type: props.page,
-      loadMore: false,
-    })
-  ).filter((item) => item['Feed Source'] !== 'Twitter')
+  const data = (await loadFeed({
+    type: props.page,
+    loadMore: false,
+  }))!.filter((item) => item['Feed Source'] !== 'Twitter')
 
   if (props.page === 'all') {
     socialFeed.value = data
diff --git a/packages/nc-gui/components/feed/Header.vue b/packages/nc-gui/components/feed/Header.vue
index a9164aaba6..f73c7de2f9 100644
--- a/packages/nc-gui/components/feed/Header.vue
+++ b/packages/nc-gui/components/feed/Header.vue
@@ -3,7 +3,7 @@
 <template>
   <div class="w-full px-3 h-12 border-b-1 border-gray-200 py-2">
     <div class="flex items-center gap-3">
-      <GeneralIcon icon="magic" class="text-yellow-500" />
+      <GeneralIcon icon="megaPhone" class="text-nc-content-brand" />
 
       <span class="text-gray-800 text-xl font-medium"> What’s New! </span>
     </div>
diff --git a/packages/nc-gui/components/feed/Recents/Card.vue b/packages/nc-gui/components/feed/Recents/Card.vue
index e420622c7c..90024fca14 100644
--- a/packages/nc-gui/components/feed/Recents/Card.vue
+++ b/packages/nc-gui/components/feed/Recents/Card.vue
@@ -40,7 +40,7 @@ const renderedText = computedAsync(async () => {
 </script>
 
 <template>
-  <div class="bg-white recent-card border-gray-200 border-1 rounded-2xl" style="width: 656px">
+  <div class="bg-white recent-card border-gray-200 border-1 rounded-2xl" style="width: 540px">
     <div class="flex items-center justify-between px-5 py-4">
       <div class="flex items-center gap-3">
         <component :is="feedIcon[source as any]" class="w-4 h-4 stroke-transparent" />
@@ -62,7 +62,7 @@ const renderedText = computedAsync(async () => {
       <div class="prose px-5 pb-5 mt-5" v-html="renderedText"></div>
     </template>
     <template v-else-if="source === 'Youtube'">
-      <YoutubeVue3 :videoid="extractYoutubeVideoId(Url)" :controls="1" :height="410" :width="656" :autoplay="0" />
+      <YoutubeVue3 :videoid="extractYoutubeVideoId(Url)" :controls="1" :height="330" :width="538" :autoplay="0" />
       <div class="p-5 flex flex-col text-gray-900 gap-4">
         <div class="text-2xl font-semibold">
           {{ Title }}
@@ -86,9 +86,10 @@ const renderedText = computedAsync(async () => {
 
     h1 {
       @apply text-2xl font-semibold truncate;
+      font-weight: 500;
     }
     p {
-      @apply text-md leading-6;
+      @apply text-md text-nc-content-gray-emphasis leading-6;
     }
   }
 }
diff --git a/packages/nc-gui/components/feed/Twitter/index.vue b/packages/nc-gui/components/feed/Twitter.vue
similarity index 100%
rename from packages/nc-gui/components/feed/Twitter/index.vue
rename to packages/nc-gui/components/feed/Twitter.vue
diff --git a/packages/nc-gui/components/feed/View.vue b/packages/nc-gui/components/feed/View.vue
index bd7bd2b43b..49f00632e1 100644
--- a/packages/nc-gui/components/feed/View.vue
+++ b/packages/nc-gui/components/feed/View.vue
@@ -2,7 +2,7 @@
 import FeedRecents from './Recents/index.vue'
 import FeedChangelog from './Changelog/index.vue'
 import FeedYoutube from './Youtube/index.vue'
-import FeedTwitter from './Twitter/index.vue'
+import FeedTwitter from './Twitter.vue'
 // import FeedRoadmap from './Roadmap.vue'
 const { activeTab } = useProductFeed()
 
@@ -48,7 +48,7 @@ const tabs: Array<{
 <template>
   <FeedHeader />
 
-  <FeedSocial v-if="activeTab === 'recents'" class="absolute right-4 top-28" />
+  <FeedSocial class="absolute right-4 top-28" />
   <div class="flex flex-col h-full">
     <NcTabs v-model:activeKey="activeTab" centered>
       <a-tab-pane v-for="tab in tabs" :key="tab.key" class="bg-gray-50 !h-full">
diff --git a/packages/nc-gui/components/feed/Youtube/Player.vue b/packages/nc-gui/components/feed/Youtube/Player.vue
index 748caac7cf..2e4684c27d 100644
--- a/packages/nc-gui/components/feed/Youtube/Player.vue
+++ b/packages/nc-gui/components/feed/Youtube/Player.vue
@@ -18,13 +18,13 @@ const {
     <YoutubeVue3
       :videoid="extractYoutubeVideoId(Url)"
       class="!rounded-t-xl"
-      :height="470"
-      :width="764"
+      :height="330"
+      :width="538"
       :autoplay="0"
       :controls="1"
     />
 
-    <div class="flex flex-col px-3 py-5 gap-4">
+    <div class="flex flex-col p-5 gap-4">
       <div class="text-gray-900 font-bold text-2xl">
         {{ Title }}
       </div>
diff --git a/packages/nc-gui/components/feed/Youtube/index.vue b/packages/nc-gui/components/feed/Youtube/index.vue
index 0594aac836..35424ab81c 100644
--- a/packages/nc-gui/components/feed/Youtube/index.vue
+++ b/packages/nc-gui/components/feed/Youtube/index.vue
@@ -26,7 +26,7 @@ const gotoChannel = () => {
     :style="{
       height: 'calc(100dvh - var(--toolbar-height) - 3rem)',
     }"
-    class="overflow-y-auto nc-scrollbar-md pt-9 mx-auto w-full"
+    class="overflow-y-auto nc-scrollbar-md mx-auto w-full"
   >
     <div v-if="isErrorOccurred?.youtube && !youtubeFeed.length" class="h-full flex justify-center items-center">
       <FeedError page="youtube" />
@@ -35,11 +35,6 @@ const gotoChannel = () => {
       <GeneralLoader size="xlarge" />
     </div>
     <div v-else class="youtube-feed mx-auto">
-      <div class="flex gap-3 items-center mt-4 justify-between">
-        <span class="text-gray-900 font-semibold"> Recent Videos </span>
-        <NcButton type="secondary" size="small" @click="gotoChannel"> Go to Youtube </NcButton>
-      </div>
-
       <div class="flex gap-2 flex-col">
         <FeedYoutubePlayer v-for="feed in youtubeFeed" :key="feed.Id" :item="feed" />
       </div>
@@ -49,6 +44,6 @@ const gotoChannel = () => {
 
 <style scoped lang="scss">
 .youtube-feed {
-  @apply !max-w-[47.75rem];
+  @apply !max-w-[33.75rem];
 }
 </style>
diff --git a/packages/nc-gui/utils/iconUtils.ts b/packages/nc-gui/utils/iconUtils.ts
index 3601549914..d33a85968f 100644
--- a/packages/nc-gui/utils/iconUtils.ts
+++ b/packages/nc-gui/utils/iconUtils.ts
@@ -152,6 +152,7 @@ import NcControlPanel from '~icons/nc-icons/control-panel'
 import NcHome from '~icons/nc-icons/home'
 import NcHome1 from '~icons/nc-icons/home1'
 import NcWorkspace from '~icons/nc-icons/workspace'
+import NcMegaPhone from '~icons/nc-icons/megaphone'
 
 import NcCellBarcode from '~icons/nc-icons/cell-barcode'
 import NcCellCheckbox from '~icons/nc-icons/cell-checkbox'
@@ -761,6 +762,7 @@ export const iconMap = {
   cellAttachment: NcCellAttachment,
   cellButton: NcCellButton,
   camera: NcCamera,
+  megaPhone: NcMegaPhone,
 
   office: NcOffice,
   sort: Sort,