diff --git a/app/constants/view.ts b/app/constants/view.ts
index 6a33c9816..05564bfcb 100644
--- a/app/constants/view.ts
+++ b/app/constants/view.ts
@@ -31,7 +31,7 @@ export const CALL_NOTIFICATION_BAR_HEIGHT = 40;
 
 export const ANNOUNCEMENT_BAR_HEIGHT = 40;
 export const BOOKMARKS_BAR_HEIGHT = 48;
-export const CHANNEL_BANNER_HEIGHT = 40;
+export const CHANNEL_BANNER_HEIGHT = 32;
 
 export const HOME_PADDING = {
     paddingLeft: 18,
diff --git a/app/screens/channel/header/channel_banner/channel_banner.tsx b/app/screens/channel/header/channel_banner/channel_banner.tsx
index 7bf392892..ee362039f 100644
--- a/app/screens/channel/header/channel_banner/channel_banner.tsx
+++ b/app/screens/channel/header/channel_banner/channel_banner.tsx
@@ -7,6 +7,7 @@ import {Text, TouchableOpacity, View} from 'react-native';
 
 import ExpandedAnnouncementBanner from '@components/announcement_banner/expanded_announcement_banner';
 import RemoveMarkdown from '@components/remove_markdown';
+import {CHANNEL_BANNER_HEIGHT} from '@constants/view';
 import {useTheme} from '@context/theme';
 import {useDefaultHeaderHeight} from '@hooks/header';
 import {bottomSheet} from '@screens/navigation';
@@ -26,11 +27,11 @@ const CLOSE_BUTTON_ID = 'channel-banner-close';
 
 const getStyleSheet = (bannerTextColor: string) => ({
     container: {
-        paddingTop: 10,
-        paddingBottom: 10,
+        paddingTop: 5,
+        paddingBottom: 5,
         paddingLeft: 16,
         paddingRight: 16,
-        height: 40,
+        height: CHANNEL_BANNER_HEIGHT,
     },
     containerTopItem: {
         borderTopLeftRadius: 12,
@@ -45,9 +46,12 @@ const getStyleSheet = (bannerTextColor: string) => ({
     bannerTextContainer: {
         flex: 1,
         flexGrow: 1,
+        alignItems: 'center' as const,
+        justifyContent: 'center' as const,
     },
     bannerText: {
         textAlign: 'center' as const,
+
     },
 });