From 68d20a76c66fddcd1cc6614f34b6344a1a4aa8a2 Mon Sep 17 00:00:00 2001
From: Kshitij Pramod Ghongadi <kshitij.pramod@navi.com>
Date: Tue, 11 Jun 2024 23:24:34 +0530
Subject: [PATCH] TP-62888 | Feature | Market benefit comparison (#10870)

---
 App/Container/Navi-Insurance/index.ts         |   3 +-
 .../MarketBenefitCompareScreen.tsx            | 224 ++++++++++++++++++
 .../MarketBenefitCompareScreenStyles.ts       |  22 ++
 .../constants/AnalyticsEventsConstant.ts      |   5 +-
 App/common/constants/ModalNameConstants.ts    |  14 +-
 App/common/constants/ScreenNameConstants.ts   |   3 +-
 App/common/constants/WidgetNameConstants.ts   |   3 +-
 App/common/hooks/useBottomSheet.tsx           |   4 +-
 App/common/interface/index.ts                 |   1 +
 ...itleSubtitleWithDropdownBottomSheetData.ts |  38 +++
 .../widgetData/FooterWithCardWidgetData.ts    |   2 +-
 .../widgetData/HeroSectionWidgetData.ts       |  26 ++
 .../widgets/widgetData/TableWidgetData.ts     |  29 ++-
 .../widgetData/TitleWithAssetsWidgetData.ts   |   2 +-
 .../interface/widgets/widgetData/index.ts     |   4 +
 App/common/modals/modalViewResolver.tsx       |  39 ++-
 App/common/screen/BaseScreen.tsx              |  23 +-
 App/common/screen/ScreenActionHandler.tsx     |  19 ++
 App/common/screen/ScreenActionTypes.ts        |   1 +
 .../screen/screen-mappers/GIScreenMapper.tsx  |  18 +-
 .../styles/BaseBottomSheetComponentStyles.ts  |   1 +
 .../widget-actions/WidgetActionTypes.ts       |   2 +-
 App/common/widgets/widgetResolver.tsx         |  33 ++-
 .../bottomsheet/BaseBottomSheetComponent.tsx  |   1 +
 .../PolicyAmountBottomSheet.tsx               |   8 +-
 .../TitleSubtitleWithDropdownBottomSheet.tsx  | 164 +++++++++++++
 ...leSubtitleWithDropdownBottomSheetStyles.ts |  80 +++++++
 .../TitleWithFeedBackBottomSheet.tsx          |  13 +-
 .../TitleWithLeftRightButtonsBottomSheet.tsx  |  26 +-
 ...tleWithLeftRightButtonsBottomSheetStyle.ts |   6 +-
 .../TitleWithListBottomSheet.tsx              |   7 +-
 .../TitleWithStepsBottomSheet.tsx             |   5 +-
 .../reusable/cta-button/CtaButtonStyle.ts     |   5 +-
 .../FooterWithCardWidget.tsx                  |  14 +-
 .../hero-section-widget/HeroSectionWidget.tsx |  41 ++++
 .../HeroSectionWidgetStyles.ts                |  20 ++
 components/widgets/index.tsx                  |   2 +
 components/widgets/table-widget/Table.tsx     |  88 +++++--
 .../widgets/title-widget/TitleWidget.tsx      |  14 +-
 package.json                                  |   4 +-
 40 files changed, 888 insertions(+), 126 deletions(-)
 create mode 100644 App/Container/Navi-Insurance/screen/market-benefit-compare-screen/MarketBenefitCompareScreen.tsx
 create mode 100644 App/Container/Navi-Insurance/screen/market-benefit-compare-screen/MarketBenefitCompareScreenStyles.ts
 create mode 100644 App/common/interface/widgets/modalData/TitleSubtitleWithDropdownBottomSheetData.ts
 create mode 100644 App/common/interface/widgets/widgetData/HeroSectionWidgetData.ts
 create mode 100644 components/bottomsheet/title-subtitle-with-dropdown-bottom-sheet/TitleSubtitleWithDropdownBottomSheet.tsx
 create mode 100644 components/bottomsheet/title-subtitle-with-dropdown-bottom-sheet/TitleSubtitleWithDropdownBottomSheetStyles.ts
 create mode 100644 components/widgets/hero-section-widget/HeroSectionWidget.tsx
 create mode 100644 components/widgets/hero-section-widget/HeroSectionWidgetStyles.ts

diff --git a/App/Container/Navi-Insurance/index.ts b/App/Container/Navi-Insurance/index.ts
index b7d077af08..fd15e3fb37 100644
--- a/App/Container/Navi-Insurance/index.ts
+++ b/App/Container/Navi-Insurance/index.ts
@@ -1,5 +1,6 @@
 export { default as QuoteOfferScreen } from "./screen/quote-offer-screen/QuoteOfferScreen";
 export { default as QuoteApologyScreen } from "./screen/quote-apology-screen/QuoteApologyScreen";
 export { default as ComparePlanScreen } from "./screen/compare-plan-screen/ComparePlanScreen";
+export { default as MarketBenefitCompareScreen } from "./screen/market-benefit-compare-screen/MarketBenefitCompareScreen";
 export { default as GenericShimmerScreen } from "./screen/generic-shimmer-screen/GenericShimmerScreen";
-export { default as GenericErrorScreen } from "./screen/generic-error-screen/GenericErrorScreen";
\ No newline at end of file
+export { default as GenericErrorScreen } from "./screen/generic-error-screen/GenericErrorScreen";
diff --git a/App/Container/Navi-Insurance/screen/market-benefit-compare-screen/MarketBenefitCompareScreen.tsx b/App/Container/Navi-Insurance/screen/market-benefit-compare-screen/MarketBenefitCompareScreen.tsx
new file mode 100644
index 0000000000..dab0f0d926
--- /dev/null
+++ b/App/Container/Navi-Insurance/screen/market-benefit-compare-screen/MarketBenefitCompareScreen.tsx
@@ -0,0 +1,224 @@
+import { useNavigation } from "@react-navigation/native";
+import React, { useEffect } from "react";
+import {
+  BackHandler,
+  NativeScrollEvent,
+  NativeSyntheticEvent,
+  View,
+} from "react-native";
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+} from "react-native-reanimated";
+import BaseWidget from "../../../../../components/widgets/BaseWidget";
+import {
+  BaseActionTypes,
+  GenericActionPayload,
+} from "../../../../common/actions/GenericAction";
+import {
+  AnalyticsEventNameConstants,
+  ConstantCta,
+} from "../../../../common/constants";
+import { sendAsAnalyticsEvent } from "../../../../common/hooks/useAnalyticsEvent";
+import { logToSentry } from "../../../../common/hooks/useSentryLogging";
+import { AnalyticsEvent, CtaData, CtaType } from "../../../../common/interface";
+import { Widget } from "../../../../common/interface/widgets/Widget";
+import { ScreenData } from "../../../../common/interface/widgets/screenData/ScreenData";
+import { NativeDeeplinkNavigatorModule } from "../../../../common/native-module/NativeModules";
+import {
+  CtaNavigator,
+  extractCtaParameters,
+} from "../../../../common/navigator/NavigationRouter";
+import { ScreenState } from "../../../../common/screen/BaseScreen";
+import { ScreenActionTypes } from "../../../../common/screen/ScreenActionTypes";
+import GenericShimmerScreen from "../generic-shimmer-screen/GenericShimmerScreen";
+import QuoteOfferErrorScreen from "../quote-offer-screen/error-screen/QuoteOfferErrorScreen";
+import styles from "./MarketBenefitCompareScreenStyles";
+const MarketBenefitCompareScreen = ({
+  ctaData,
+  screenData,
+  handleActions,
+}: {
+  ctaData: CtaData;
+  screenData: ScreenData | null;
+  handleActions: (screenPayload?: GenericActionPayload) => void;
+}) => {
+  const navigation = useNavigation();
+  const y = useSharedValue(0);
+  const onScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+    y.value = event.nativeEvent.contentOffset.y;
+  };
+  const handleClick = (cta?: CtaData) => {
+    if (!cta) {
+      logToSentry(
+        `Navigation cta is missing or invalid: ${cta} | MethodName: handleClick}`,
+      );
+      return;
+    }
+
+    const { navigatorType } = extractCtaParameters(cta);
+
+    try {
+      switch (cta.type) {
+        case CtaType.DEEP_LINK:
+        case CtaType.USE_ROOT_DEEPLINK_NAVIGATOR:
+          NativeDeeplinkNavigatorModule.navigateToNaviInsuranceDeeplinkNavigator(
+            JSON.stringify(cta),
+          );
+          break;
+        case CtaType.RN_NAVIGATOR:
+          CtaNavigator.performNavigation(navigation, navigatorType, cta);
+          break;
+        case CtaType.GO_BACK:
+          if (navigation.canGoBack()) {
+            navigation.goBack();
+          } else {
+            BackHandler.exitApp();
+          }
+          break;
+        default:
+          NativeDeeplinkNavigatorModule.navigateToNaviDeeplinkNavigator(
+            JSON.stringify(cta),
+          );
+          break;
+      }
+    } catch (error) {
+      logToSentry(
+        `Error while navigating to deep link with CTA: ${cta} | MethodName: handleClick}`,
+      );
+    }
+  };
+
+  useEffect(() => {
+    handleActions({
+      baseActionType: BaseActionTypes.SCREEN_ACTION,
+      metaData: [
+        {
+          actionType: ScreenActionTypes.FETCH_BENEFIT_COMPARE_LIST,
+          data: ctaData?.data,
+        },
+      ],
+    });
+  }, [ctaData]);
+
+  const headerStyle = useAnimatedStyle(() => {
+    return {
+      shadowColor: y.value > 1 ? "black" : "transparent",
+      shadowOpacity: y.value > 1 ? 1 : 0,
+      shadowRadius: y.value > 1 ? 8 : 0,
+      elevation: y.value > 1 ? 32 : 0,
+    };
+  });
+
+  const Header = () => {
+    return (
+      <Animated.View style={[styles.header, headerStyle]}>
+        {getWidgetViews(
+          screenData?.screenWidgets?.headerWidgets,
+          handleActions,
+          screenData?.screenState,
+          handleClick,
+        )}
+      </Animated.View>
+    );
+  };
+
+  const ContentWidgets = () => {
+    return getWidgetViews(
+      screenData?.screenWidgets?.contentWidgets,
+      handleActions,
+      screenData?.screenState,
+      handleClick,
+    );
+  };
+
+  const Footer = () => {
+    return (
+      <View style={styles.footer}>
+        {getWidgetViews(
+          screenData?.screenWidgets?.footerWidgets,
+          handleActions,
+          screenData?.screenState,
+          handleClick,
+        )}
+      </View>
+    );
+  };
+
+  useEffect(() => {
+    switch (screenData?.screenState) {
+      case ScreenState.LOADED:
+        const initEvent: AnalyticsEvent = {
+          name: AnalyticsEventNameConstants.HI_RN_BENEFIT_COMPARE_PAGE_INIT,
+        };
+        sendAsAnalyticsEvent(initEvent);
+        break;
+      case ScreenState.ERROR:
+        const errorEvent: AnalyticsEvent = {
+          name: AnalyticsEventNameConstants.HI_RN_BENEFIT_COMPARE_PAGE_ERROR_VIEW,
+        };
+        sendAsAnalyticsEvent(errorEvent);
+        break;
+      default:
+        break;
+    }
+  }, [screenData?.screenState]);
+
+  if (screenData?.screenState === ScreenState.LOADING) {
+    return <GenericShimmerScreen />;
+  }
+
+  if (screenData?.screenState === ScreenState.ERROR) {
+    return (
+      <QuoteOfferErrorScreen
+        errorMetaData={screenData.errorMetaData}
+        handleActions={handleActions}
+        handleClick={handleClick}
+        headerProperties={{
+          leftIconCta: ConstantCta.STATIC_HEADER_LEFT_ICON_CTA,
+          rightIconCta: ConstantCta.STATIC_HEADER_RIGHT_ICON_CTA,
+        }}
+      />
+    );
+  }
+  return (
+    <View style={[styles.container, screenData?.screenStyle]}>
+      <Header />
+      <Animated.ScrollView
+        showsVerticalScrollIndicator={false}
+        contentContainerStyle={styles.content}
+        nestedScrollEnabled={true}
+        onScroll={onScroll}
+      >
+        <ContentWidgets />
+      </Animated.ScrollView>
+      <Footer />
+    </View>
+  );
+};
+
+function getWidgetViews(
+  widgetList: Widget[] | undefined,
+  handleActions: (screenActionPayload?: GenericActionPayload) => void,
+  screenState?: ScreenState | null,
+  handleClick?: (ctaData: CtaData) => void,
+): React.JSX.Element {
+  return (
+    <View>
+      {widgetList?.map((widget, index) => {
+        return (
+          <BaseWidget
+            widget={widget}
+            handleScreenActions={handleActions}
+            screenState={screenState}
+            widgetIndex={index}
+            key={index}
+            handleClick={handleClick}
+          />
+        );
+      })}
+    </View>
+  );
+}
+
+export default MarketBenefitCompareScreen;
diff --git a/App/Container/Navi-Insurance/screen/market-benefit-compare-screen/MarketBenefitCompareScreenStyles.ts b/App/Container/Navi-Insurance/screen/market-benefit-compare-screen/MarketBenefitCompareScreenStyles.ts
new file mode 100644
index 0000000000..7ba59549e5
--- /dev/null
+++ b/App/Container/Navi-Insurance/screen/market-benefit-compare-screen/MarketBenefitCompareScreenStyles.ts
@@ -0,0 +1,22 @@
+import { StyleSheet } from "react-native";
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexDirection: "column",
+  },
+  header: {
+    width: "100%",
+    alignItems: "stretch",
+    backgroundColor: "#FFFFFF",
+    zIndex: 1
+  },
+  content: {
+    flexGrow: 1,
+  },
+  footer: {
+    alignItems: "stretch",
+  },
+});
+
+export default styles;
diff --git a/App/common/constants/AnalyticsEventsConstant.ts b/App/common/constants/AnalyticsEventsConstant.ts
index 4f31beb5c3..fb60e57580 100644
--- a/App/common/constants/AnalyticsEventsConstant.ts
+++ b/App/common/constants/AnalyticsEventsConstant.ts
@@ -2,6 +2,8 @@ export const AnalyticsEventNameConstants = {
   HI_SI_PILLS_CLICK: "hi_si_pills_click",
   HI_RN_QUOTE_PAGE_INIT: "hi_rn_quote_page_init",
   HI_RN_QUOTE_PAGE_ERROR_VIEW: "hi_rn_quote_page_error_view",
+  HI_RN_BENEFIT_COMPARE_PAGE_INIT: "hi_rn_benefit_compare_page_init",
+  HI_RN_BENEFIT_COMPARE_PAGE_ERROR_VIEW: "hi_rn_benefit_compare_page_error_view",
   PATCH_QUOTE_V2: "patch_quote_v2",
 };
 
@@ -26,7 +28,8 @@ export const AnalyticsMethodNameConstant = {
   FETCH_QUOTE_V3: "fetchQuoteV3",
   FETCH_QUOTE_V4: "fetchQuoteV4",
   FINAL_PATCH_CALL: "finalPatchCall",
-  COMPARE_PLAN_LIST : "comparePlanList",
+  COMPARE_PLAN_LIST: "comparePlanList",
+  MARKET_BENEFIT_COMPARE_LIST: "gi_market_benefit_compare_list_error",
 };
 
 export const AnalyticsGlobalErrorTypeConstant = {
diff --git a/App/common/constants/ModalNameConstants.ts b/App/common/constants/ModalNameConstants.ts
index 68cacb9b64..ef2454092e 100644
--- a/App/common/constants/ModalNameConstants.ts
+++ b/App/common/constants/ModalNameConstants.ts
@@ -1,6 +1,10 @@
 export const PREMIUM_DETAILS_BOTTOM_SHEET = "premium_details_bottom_sheet";
-export const TITLE_WITH_FEEDBACK_PILL_BOTTOM_SHEET = "title_with_feedback_pill_bottom_sheet";
-export const TITLE_WITH_STEPS_BOTTOM_SHEET = "title_with_steps_bottom_sheet"
-export const MEMBER_DETAILS_BOTTOM_SHEET = "member_details_bottom_sheet"
-export const POLICY_AMOUNT_BOTTOM_SHEET = "policy_amount_bottom_sheet"
-export const TITLE_WITH_LEFT_RIGHT_BUTTONS_BOTTOM_SHEET = "title_with_left_right_buttons_bottom_sheet"
\ No newline at end of file
+export const TITLE_WITH_FEEDBACK_PILL_BOTTOM_SHEET =
+  "title_with_feedback_pill_bottom_sheet";
+export const TITLE_WITH_STEPS_BOTTOM_SHEET = "title_with_steps_bottom_sheet";
+export const TITLE_SUBTITLE_WITH_DROPDOWN_BOTTOM_SHEET =
+  "title_subtitle_with_dropdown_bottom_sheet";
+export const MEMBER_DETAILS_BOTTOM_SHEET = "member_details_bottom_sheet";
+export const POLICY_AMOUNT_BOTTOM_SHEET = "policy_amount_bottom_sheet";
+export const TITLE_WITH_LEFT_RIGHT_BUTTONS_BOTTOM_SHEET =
+  "title_with_left_right_buttons_bottom_sheet";
diff --git a/App/common/constants/ScreenNameConstants.ts b/App/common/constants/ScreenNameConstants.ts
index e0e8d73178..86d0093254 100644
--- a/App/common/constants/ScreenNameConstants.ts
+++ b/App/common/constants/ScreenNameConstants.ts
@@ -7,4 +7,5 @@ export const INSURANCE_LANDING_PAGE_SCREEN = "insurance_landing_page";
 export const QUOTE_OFFER_SCREEN = "quote_offer";
 export const BUY_INSURANCE_SCREEN = "buyinsurance";
 export const QUOTE_APOLOGY_SCREEN = "fresh_policy_form";
-export const COMPARE_PLAN_SCREEN = "compare_plans";
\ No newline at end of file
+export const MARKET_BENEFITS_COMPARE_SCREEN = "market_benefits_compare";
+export const COMPARE_PLAN_SCREEN = "compare_plans";
diff --git a/App/common/constants/WidgetNameConstants.ts b/App/common/constants/WidgetNameConstants.ts
index c876df59c7..c50ce87e9a 100644
--- a/App/common/constants/WidgetNameConstants.ts
+++ b/App/common/constants/WidgetNameConstants.ts
@@ -17,5 +17,6 @@ export const TITLE_WITH_COLUMN_WIDGET = "TITLE_WITH_COLUMN_WIDGET";
 export const TITLE_WITH_ASSET_BACKGROUND_WIDGET = "TITLE_WITH_ASSET_BACKGROUND_WIDGET";
 export const CARD_WITH_ICON_WIDGET = "CARD_WITH_ICON_WIDGET";
 export const SPACER_WIDGET = "SPACER_WIDGET";
-export const SELECT_CARD_WITH_DETAIL_LIST_WIDGET = "SELECT_CARD_WITH_DETAIL_LIST_WIDGET";
 export const TABLE_WIDGET = "TABLE_WIDGET";
+export const HERO_SECTION_WIDGET = "HERO_SECTION_WIDGET";
+export const SELECT_CARD_WITH_DETAIL_LIST_WIDGET = "SELECT_CARD_WITH_DETAIL_LIST_WIDGET";
diff --git a/App/common/hooks/useBottomSheet.tsx b/App/common/hooks/useBottomSheet.tsx
index 5f8391268d..3b188e93b8 100644
--- a/App/common/hooks/useBottomSheet.tsx
+++ b/App/common/hooks/useBottomSheet.tsx
@@ -44,8 +44,8 @@ export const useBottomSheet = (
     setTimeout(() => {
       removeBottomSheet();
       addBottomSheet(modalView);
-    }, 3 * BOTTOMSHEET_ANIMATION_DURATION);
-    // 3 * BOTTOMSHEET_ANIMATION_DURATION is for allowing the current bottomsheet to close animatically before opening the new one.
+    }, BOTTOMSHEET_ANIMATION_DURATION);
+    // BOTTOMSHEET_ANIMATION_DURATION is for allowing the current bottomsheet to close animatically before opening the new one.
   };
 
   return { bottomsheet, addBottomSheet, removeBottomSheet, replaceBottomSheet };
diff --git a/App/common/interface/index.ts b/App/common/interface/index.ts
index 683f2972a6..9633dc54d8 100644
--- a/App/common/interface/index.ts
+++ b/App/common/interface/index.ts
@@ -57,5 +57,6 @@ export enum CtaType {
   DISMISS_MODAL = "DISMISS_MODAL",
   USE_ROOT_DEEPLINK_NAVIGATOR = "USE_ROOT_DEEPLINK_NAVIGATOR",
   RN_NAVIGATOR = "RN_NAVIGATOR",
+  GO_BACK = "GO_BACK",
 }
 
diff --git a/App/common/interface/widgets/modalData/TitleSubtitleWithDropdownBottomSheetData.ts b/App/common/interface/widgets/modalData/TitleSubtitleWithDropdownBottomSheetData.ts
new file mode 100644
index 0000000000..9a0a4c17b0
--- /dev/null
+++ b/App/common/interface/widgets/modalData/TitleSubtitleWithDropdownBottomSheetData.ts
@@ -0,0 +1,38 @@
+import { ViewStyle } from "react-native";
+import { CtaData } from "../..";
+import { GenericWidgetData } from "../Widget";
+import { ImageFieldData, TextFieldData } from "../widgetData/TitleWidgetData";
+import { KeyValueInfoData } from "./PremiumDetailsBottomSheetData";
+
+export interface TitleSubtitleWithDropdownBottomSheetData
+  extends GenericWidgetData {
+  title?: TextFieldData;
+  rightTitle?: TextFieldData;
+  subtitle?: TextFieldData;
+  infoList?: KeyValueInfoData[];
+  dropdownData?: DropdownData;
+  viewStyle?: ViewStyle;
+}
+
+export interface TitleSubtitleWithDropdownBottomSheetProps {
+  bottomSheetData: TitleSubtitleWithDropdownBottomSheetData;
+  handleModalClick: (cta: CtaData) => void;
+}
+
+export interface DropdownData {
+  title?: TextFieldData;
+  rightIcon?: ImageFieldData;
+  titleContainerStyle?: TitleContainerStyle;
+  contentList?: DropdownContent[];
+  style?: ViewStyle;
+}
+
+export interface TitleContainerStyle {
+  expanded?: ViewStyle;
+  collapsed?: ViewStyle;
+}
+
+export interface DropdownContent {
+  icon?: ImageFieldData;
+  content?: TextFieldData;
+}
diff --git a/App/common/interface/widgets/widgetData/FooterWithCardWidgetData.ts b/App/common/interface/widgets/widgetData/FooterWithCardWidgetData.ts
index 74c1a15333..c4dab48129 100644
--- a/App/common/interface/widgets/widgetData/FooterWithCardWidgetData.ts
+++ b/App/common/interface/widgets/widgetData/FooterWithCardWidgetData.ts
@@ -40,4 +40,4 @@ export enum ButtonState {
   ENABLED = "ENABLED",
   DISABLED = "DISABLED",
   LOADING = "LOADING",
-}
\ No newline at end of file
+}
diff --git a/App/common/interface/widgets/widgetData/HeroSectionWidgetData.ts b/App/common/interface/widgets/widgetData/HeroSectionWidgetData.ts
new file mode 100644
index 0000000000..7ea5d0b735
--- /dev/null
+++ b/App/common/interface/widgets/widgetData/HeroSectionWidgetData.ts
@@ -0,0 +1,26 @@
+import { ViewStyle } from "react-native";
+import { CtaData } from "../..";
+import { GenericActionPayload } from "../../../actions/GenericAction";
+import { GenericWidgetData } from "../Widget";
+import { ImageFieldData, TextFieldData } from "./TitleWidgetData";
+
+export interface HeroSectionWidgetData extends GenericWidgetData {
+  title?: TextFieldData;
+  image?: ImageFieldData;
+  backgroundGradient?: string[];
+  gradientOrientation?: string;
+  callout?: CalloutData;
+}
+
+export interface HeroSectionWidgetProps {
+  widgetData: HeroSectionWidgetData;
+  widgetStyle?: ViewStyle;
+  handleActions?: (screenActionPayload?: GenericActionPayload) => void;
+  handleClick?: (cta: CtaData) => void;
+  widgetIndex?: number;
+}
+
+export interface CalloutData {
+  title?: TextFieldData;
+  calloutStyle?: ViewStyle;
+}
diff --git a/App/common/interface/widgets/widgetData/TableWidgetData.ts b/App/common/interface/widgets/widgetData/TableWidgetData.ts
index 151d142b45..5578c6b99a 100644
--- a/App/common/interface/widgets/widgetData/TableWidgetData.ts
+++ b/App/common/interface/widgets/widgetData/TableWidgetData.ts
@@ -1,12 +1,13 @@
 import { ViewStyle } from "react-native";
+import { AnalyticsEvent, CtaData } from "../..";
+import { GenericActionPayload } from "../../../actions/GenericAction";
 import { GenericWidgetData } from "../Widget";
 import { ImageFieldData, TextFieldData } from "./TitleWidgetData";
-import { GenericActionPayload } from "../../../actions/GenericAction";
-import { AnalyticsEvent, CtaData } from "../..";
 
 export interface Column {
   title: TextFieldData;
   subtitle: TextFieldData;
+  image?: ImageFieldData;
   columnStyle?: ViewStyle;
 }
 
@@ -15,16 +16,18 @@ export interface Cell {
   subtitle?: TextFieldData;
   image?: ImageFieldData;
   cta?: CtaData;
-  analyticEvents?: CellAnalyticEvents
+  analyticEvents?: CellAnalyticEvents;
+  action?: GenericActionPayload;
+  cellStyle?: ViewStyle;
 }
-
 export interface Row {
   cells?: Cell[];
+  rowStyle?: ViewStyle;
+  analyticEvents?: CellAnalyticEvents;
 }
-
 export interface TableWidgetData extends GenericWidgetData {
   rowsToDisplay?: number;
-  viewButton? : TextFieldData;
+  viewButton?: TextFieldData;
   columns?: Column[];
   rows?: Row[];
 }
@@ -38,7 +41,6 @@ export interface TableWidgetProps {
   ) => void;
   handleClick?: (cta: CtaData) => void;
   widgetIndex?: number;
-  
 }
 
 export interface ColumnsProps {
@@ -49,7 +51,10 @@ export interface RowsProps {
   widgetData?: TableWidgetData;
   rowsToDisplay?: number;
   handleClick?: (cta: CtaData) => void;
-
+  handleActions: (
+    value?: any | undefined | null,
+    screenActionPayload?: GenericActionPayload,
+  ) => void;
 }
 
 export interface CellProps {
@@ -57,8 +62,12 @@ export interface CellProps {
   cell?: Cell;
   index: number;
   handleClick?: (cta: CtaData) => void;
+  handleActions: (
+    value?: any | undefined | null,
+    screenActionPayload?: GenericActionPayload,
+  ) => void;
 }
 
-export interface CellAnalyticEvents{
-  onViewEvent?: AnalyticsEvent
+export interface CellAnalyticEvents {
+  onViewEvent?: AnalyticsEvent;
 }
diff --git a/App/common/interface/widgets/widgetData/TitleWithAssetsWidgetData.ts b/App/common/interface/widgets/widgetData/TitleWithAssetsWidgetData.ts
index bc8b871570..b828d0f652 100644
--- a/App/common/interface/widgets/widgetData/TitleWithAssetsWidgetData.ts
+++ b/App/common/interface/widgets/widgetData/TitleWithAssetsWidgetData.ts
@@ -16,5 +16,5 @@ export interface TitleWithAssetsWidgetData extends GenericWidgetData {
   rightIcon?: ImageFieldData;
   rightLottie?: LottieFieldData;
   cta?: CtaData;
-  actions?: GenericActionPayload
+  actions?: GenericActionPayload;
 }
diff --git a/App/common/interface/widgets/widgetData/index.ts b/App/common/interface/widgets/widgetData/index.ts
index 919e81d19b..5c8d160948 100644
--- a/App/common/interface/widgets/widgetData/index.ts
+++ b/App/common/interface/widgets/widgetData/index.ts
@@ -18,3 +18,7 @@ export type {
   RowsProps,
   CellProps,
 } from "./TableWidgetData";
+
+export type {
+  HeroSectionWidgetData
+} from "./HeroSectionWidgetData"
diff --git a/App/common/modals/modalViewResolver.tsx b/App/common/modals/modalViewResolver.tsx
index 9801e720e7..40a16e6bde 100644
--- a/App/common/modals/modalViewResolver.tsx
+++ b/App/common/modals/modalViewResolver.tsx
@@ -7,6 +7,7 @@ import {
   MEMBER_DETAILS_BOTTOM_SHEET,
   POLICY_AMOUNT_BOTTOM_SHEET,
   PREMIUM_DETAILS_BOTTOM_SHEET,
+  TITLE_SUBTITLE_WITH_DROPDOWN_BOTTOM_SHEET,
   TITLE_WITH_FEEDBACK_PILL_BOTTOM_SHEET,
   TITLE_WITH_LEFT_RIGHT_BUTTONS_BOTTOM_SHEET,
   TITLE_WITH_STEPS_BOTTOM_SHEET,
@@ -14,6 +15,7 @@ import {
 import { CtaData } from "../interface";
 import { ModalView } from "../interface/modals/ModalView";
 import { GenericWidgetData } from "../interface/widgets/Widget";
+import TitleSubtitleWithDropdownBottomSheet from "../../../components/bottomsheet/title-subtitle-with-dropdown-bottom-sheet/TitleSubtitleWithDropdownBottomSheet";
 import { MemberDetailBottomSheet } from "../../../components/bottomsheet/member-details-bottom-sheet/MemberDetailsBottomSheet";
 import { PolicyAmountBottomSheet } from "../../../components/bottomsheet/policy-amount-bottom-sheet/PolicyAmountBottomSheet";
 import { GenericActionPayload } from "../actions/GenericAction";
@@ -29,7 +31,13 @@ export const GetModalView = {
     ) => void,
   ): JSX.Element => {
     const { modalName, modalData, modalStyle } = modal;
-    return resolveModalView(modalName, modalData, modalStyle, handleModalClick, handleActions);
+    return resolveModalView(
+      modalName,
+      modalData,
+      modalStyle,
+      handleModalClick,
+      handleActions,
+    );
   },
 };
 
@@ -67,6 +75,13 @@ function resolveModalView(
           handleModalClick={handleModalClick}
         />
       );
+    case TITLE_SUBTITLE_WITH_DROPDOWN_BOTTOM_SHEET:
+      return (
+        <TitleSubtitleWithDropdownBottomSheet
+          bottomSheetData={modalData}
+          handleModalClick={handleModalClick}
+        />
+      );
     case MEMBER_DETAILS_BOTTOM_SHEET:
       return (
         <MemberDetailBottomSheet
@@ -74,7 +89,7 @@ function resolveModalView(
           handleModalClick={handleModalClick}
           handleActions={handleActions}
         />
-      )
+      );
     case POLICY_AMOUNT_BOTTOM_SHEET:
       return (
         <PolicyAmountBottomSheet
@@ -82,16 +97,16 @@ function resolveModalView(
           handleModalClick={handleModalClick}
           handleActions={handleActions}
         />
-      )
-      case TITLE_WITH_LEFT_RIGHT_BUTTONS_BOTTOM_SHEET:
-        return (
-          <TitleWithLeftRightButtonsBottomSheet
-            bottomSheetData={modalData}
-            handleModalClick={handleModalClick}
-            handleActions={handleActions}
-          />
-        )
+      );
+    case TITLE_WITH_LEFT_RIGHT_BUTTONS_BOTTOM_SHEET:
+      return (
+        <TitleWithLeftRightButtonsBottomSheet
+          bottomSheetData={modalData}
+          handleModalClick={handleModalClick}
+          handleActions={handleActions}
+        />
+      );
     default:
       return <View />;
   }
-}
\ No newline at end of file
+}
diff --git a/App/common/screen/BaseScreen.tsx b/App/common/screen/BaseScreen.tsx
index f02effcdc7..1eaa53fd86 100644
--- a/App/common/screen/BaseScreen.tsx
+++ b/App/common/screen/BaseScreen.tsx
@@ -34,10 +34,10 @@ const BaseScreen: React.FC<{ navigation: any; route: any }> = ({
   const [screenName, setScreenName] = useState<string | null>(null);
   const [screenKey, setScreenKey] = useState<string | null>(null);
   const [screenState, setScreenState] = useState<ScreenState | null>(
-    ScreenState.LOADING
+    ScreenState.LOADING,
   );
   const [errorMetaData, setErrorMetaData] = useState<ActionMetaData[] | null>(
-    null
+    null,
   );
 
   useEffect(() => {
@@ -69,7 +69,7 @@ const BaseScreen: React.FC<{ navigation: any; route: any }> = ({
       if (isScreenWhiteListedForCaching(screenName)) {
         retrieveScreenDataFromCache(
           getScreenNameFromCtaData(route.params?.ctaData)!!,
-          route.params?.ctaData?.screenKey
+          route.params?.ctaData?.screenKey,
         );
       }
     }
@@ -79,11 +79,11 @@ const BaseScreen: React.FC<{ navigation: any; route: any }> = ({
 
   const retrieveScreenDataFromCache = (
     screenName: string | null | undefined,
-    screenKey: string | null | undefined
+    screenKey: string | null | undefined,
   ) => {
     let cacheKey = getCacheKey(screenName, screenKey);
     if (!!cacheKey) {
-      getScreenDataFromCache(cacheKey).then((screenData) => {
+      getScreenDataFromCache(cacheKey).then(screenData => {
         if (!!screenData) {
           setScreenData(screenData);
         }
@@ -105,16 +105,18 @@ const BaseScreen: React.FC<{ navigation: any; route: any }> = ({
       dispatch(updateCtaData({ cta: ctaData, setScreenState: screenState }));
     }
   }, [route.params.ctaData, screenState]);
-  
+
   const handleActions = (actionPayload?: GenericActionPayload) => {
-    actionPayload?.metaData?.forEach((ActionMetaData) => {
+    actionPayload?.metaData?.forEach(ActionMetaData => {
       if (!!ActionMetaData.analyticsEventProperties) {
         sendAsAnalyticsEvent(ActionMetaData.analyticsEventProperties);
       }
       if (ActionMetaData.actionType === WidgetActionTypes.OPEN_BOTTOM_SHEET) {
         addBottomSheet(ActionMetaData.data as ModalView);
       }
-      if(ActionMetaData.actionType === WidgetActionTypes.REPLACE_BOTTOM_SHEET) {
+      if (
+        ActionMetaData.actionType === WidgetActionTypes.REPLACE_BOTTOM_SHEET
+      ) {
         replaceBottomSheet(ActionMetaData.data as ModalView);
       }
     });
@@ -136,12 +138,13 @@ const BaseScreen: React.FC<{ navigation: any; route: any }> = ({
     }
   };
 
-  const { bottomsheet, addBottomSheet, replaceBottomSheet } = useBottomSheet(handleActions);
+  const { bottomsheet, addBottomSheet, replaceBottomSheet } =
+    useBottomSheet(handleActions);
 
   const MemoizedScreenMapper = useMemo(() => {
     const secondIdentifier = getScreenMapperNameFromCtaData(cta);
     setCurrentScreenName(
-      "RN_" + secondIdentifier?.toUpperCase() + "_" + screenName
+      "RN_" + secondIdentifier?.toUpperCase() + "_" + screenName,
     );
 
     return (
diff --git a/App/common/screen/ScreenActionHandler.tsx b/App/common/screen/ScreenActionHandler.tsx
index 4c09c16bb7..f59ff7f9d3 100644
--- a/App/common/screen/ScreenActionHandler.tsx
+++ b/App/common/screen/ScreenActionHandler.tsx
@@ -207,6 +207,25 @@ export const ScreenActionHandler = {
             );
           });
       }
+      case ScreenActionTypes.FETCH_BENEFIT_COMPARE_LIST: {
+        return get<ApiResponse<CtaData>>(
+          "market-benefit-compare",
+          getXTargetHeaderInfo(GI.toLocaleUpperCase()),
+        )
+          .then(response => {
+            handleResponseData(setScreenData, response);
+            return;
+          })
+          .catch(error => {
+            handleErrorData(
+              error,
+              setScreenData,
+              screenMetaData,
+              AnalyticsMethodNameConstant.MARKET_BENEFIT_COMPARE_LIST,
+              ScreenActionTypes.FETCH_BENEFIT_COMPARE_LIST,
+            );
+          });
+      }
       case ScreenActionTypes.SHOW_LOADER: {
         const updatedScreenData: ScreenData = {
           ...screenData,
diff --git a/App/common/screen/ScreenActionTypes.ts b/App/common/screen/ScreenActionTypes.ts
index 7cc3b69ca2..8f5b1622f1 100644
--- a/App/common/screen/ScreenActionTypes.ts
+++ b/App/common/screen/ScreenActionTypes.ts
@@ -4,5 +4,6 @@ export const ScreenActionTypes = {
   FETCH_QUOTE_V3: "FETCH_QUOTE_V3",
   FETCH_QUOTE_V4: "FETCH_QUOTE_V4",
   SHOW_LOADER: "SHOW_LOADER",
+  FETCH_BENEFIT_COMPARE_LIST: "FETCH_BENEFIT_COMPARE_LIST",
   FETCH_COMPARE_PLAN_LIST: "FETCH_COMPARE_PLAN_LIST",
 };
diff --git a/App/common/screen/screen-mappers/GIScreenMapper.tsx b/App/common/screen/screen-mappers/GIScreenMapper.tsx
index c3e3c47e08..563b77aba9 100644
--- a/App/common/screen/screen-mappers/GIScreenMapper.tsx
+++ b/App/common/screen/screen-mappers/GIScreenMapper.tsx
@@ -1,15 +1,17 @@
 import { View } from "react-native";
 import {
-  QuoteOfferScreen,
-  QuoteApologyScreen,
   ComparePlanScreen,
+  MarketBenefitCompareScreen,
+  QuoteApologyScreen,
+  QuoteOfferScreen,
 } from "../../../Container/Navi-Insurance";
 import { GenericActionPayload } from "../../actions/GenericAction";
 import {
-  QUOTE_OFFER_SCREEN,
   BUY_INSURANCE_SCREEN,
-  QUOTE_APOLOGY_SCREEN,
   COMPARE_PLAN_SCREEN,
+  MARKET_BENEFITS_COMPARE_SCREEN,
+  QUOTE_APOLOGY_SCREEN,
+  QUOTE_OFFER_SCREEN,
 } from "../../constants";
 import { logToSentry } from "../../hooks/useSentryLogging";
 import { CtaData } from "../../interface";
@@ -42,6 +44,14 @@ export const GIScreenMapper = {
               handleActions={handleActions}
             />
           );
+        case MARKET_BENEFITS_COMPARE_SCREEN:
+          return (
+            <MarketBenefitCompareScreen
+              ctaData={ctaData}
+              screenData={screenData}
+              handleActions={handleActions}
+            />
+          );
         case COMPARE_PLAN_SCREEN:
           return (
             <ComparePlanScreen
diff --git a/App/common/styles/BaseBottomSheetComponentStyles.ts b/App/common/styles/BaseBottomSheetComponentStyles.ts
index 069bb7cd4c..13c5d556ca 100644
--- a/App/common/styles/BaseBottomSheetComponentStyles.ts
+++ b/App/common/styles/BaseBottomSheetComponentStyles.ts
@@ -11,6 +11,7 @@ const styles = StyleSheet.create({
     borderTopRightRadius: 8,
     borderTopLeftRadius: 8,
     overflow: "hidden",
+    maxHeight: "90%",
   },
 
   barContainer: {
diff --git a/App/common/widgets/widget-actions/WidgetActionTypes.ts b/App/common/widgets/widget-actions/WidgetActionTypes.ts
index 7a64a0cf5b..621772f073 100644
--- a/App/common/widgets/widget-actions/WidgetActionTypes.ts
+++ b/App/common/widgets/widget-actions/WidgetActionTypes.ts
@@ -7,5 +7,5 @@ export const WidgetActionTypes = {
   REPLACE_BOTTOM_SHEET: "REPLACE_BOTTOM_SHEET",
   SHOW_LOADER: "SHOW_LOADER",
   FINAL_PATCH_CALL: "FINAL_PATCH_CALL",
-  ANALYTIC_ACTION: "ANALYTIC_ACTION"
+  ANALYTIC_ACTION: "ANALYTIC_ACTION",
 };
diff --git a/App/common/widgets/widgetResolver.tsx b/App/common/widgets/widgetResolver.tsx
index 6c398be213..f191cfd485 100644
--- a/App/common/widgets/widgetResolver.tsx
+++ b/App/common/widgets/widgetResolver.tsx
@@ -1,17 +1,25 @@
 import { View, ViewStyle } from "react-native";
+import {
+  SelectCardWithDetailListWidget,
+  TableWidget,
+  TitleWithAssetBackgroundWidget,
+  HeroSectionWidget
+} from "../../../components/widgets";
 import ComparisonWidget from "../../../components/widgets/ComparisonWidget";
 import HeaderLottieAnimationWidget from "../../../components/widgets/HeaderLottieAnimationWidget";
 import HeaderWithAssetsWidget from "../../../components/widgets/HeaderWithAssetsWidget";
 import SliderWidget from "../../../components/widgets/SliderWidget";
 import TitleWithAssetsWidget from "../../../components/widgets/TitleWithAssetsWidget";
+import CardWithIconWidget from "../../../components/widgets/card-with-icon-widget/CardWithIconWidget";
 import FAB from "../../../components/widgets/fab/FAB";
 import FooterWithCardWidget from "../../../components/widgets/footer-with-card-widget/FooterWithCardWidget";
 import GridWithCardWidget from "../../../components/widgets/grid-with-card-widget/GridWithCardWidget";
+import SpacerWidget from "../../../components/widgets/spacer-widget/SpacerWidget";
 import SumInsuredWidget from "../../../components/widgets/sum-insured-carousel-widget/SumInsuredWidget";
 import TitleSubtitleWithAssetWidget from "../../../components/widgets/title-subtitle-with-asset-widget/TitleSubtitleWithAssetWidget";
 import TitleWidget from "../../../components/widgets/title-widget/TitleWidget";
+import { TitleWithColumnWidget } from "../../../components/widgets/title-with-column-widget/TitleWithColumnWidget";
 import TitleWithListWidget from "../../../components/widgets/title-with-list-widget/TitleWithListWidget";
-import SpacerWidget from "../../../components/widgets/spacer-widget/SpacerWidget";
 import { GenericActionPayload } from "../actions/GenericAction";
 import {
   CARD_WITH_ICON_WIDGET,
@@ -21,29 +29,23 @@ import {
   GRID_WITH_CARD_WIDGET,
   HEADER_LOTTIE_ANIMATION_WIDGET,
   HEADER_WITH_ASSETS_WIDGET,
+  HERO_SECTION_WIDGET,
+  SELECT_CARD_WITH_DETAIL_LIST_WIDGET,
   SLIDER_WIDGET,
   SPACER_WIDGET,
   SUM_INSURED_WIDGET,
+  TABLE_WIDGET,
   TITLE_SUBTITLE_WITH_ASSET_WIDGET,
   TITLE_WIDGET,
   TITLE_WITH_ASSETS_WIDGET,
   TITLE_WITH_ASSET_BACKGROUND_WIDGET,
   TITLE_WITH_COLUMN_WIDGET,
   TITLE_WITH_LIST_WIDGET,
-  SELECT_CARD_WITH_DETAIL_LIST_WIDGET,
-  TABLE_WIDGET,
 } from "../constants";
 import { CtaData } from "../interface";
 import { GenericWidgetData, Widget } from "../interface/widgets/Widget";
 import { SumInsuredWidgetData } from "../interface/widgets/widgetData/SumInsuredWidgetData";
 import { ScreenState } from "../screen/BaseScreen";
-import { TitleWithColumnWidget } from "../../../components/widgets/title-with-column-widget/TitleWithColumnWidget";
-import CardWithIconWidget from "../../../components/widgets/card-with-icon-widget/CardWithIconWidget";
-import {
-  SelectCardWithDetailListWidget,
-  TableWidget,
-  TitleWithAssetBackgroundWidget,
-} from "../../../components/widgets";
 
 export const GetWidgetView = {
   getWidget: (
@@ -271,6 +273,17 @@ function resolveWidgetView(
           handleClick={handleClick}
         />
       );
+    case HERO_SECTION_WIDGET:
+      return (
+        <HeroSectionWidget
+          widgetData={widgetData}
+          widgetStyle={widgetStyle}
+          handleActions={handleActions}
+          widgetIndex={widgetIndex}
+          key={widgetIndex}
+          handleClick={handleClick}
+        />
+      );
     default:
       return <View />;
   }
diff --git a/components/bottomsheet/BaseBottomSheetComponent.tsx b/components/bottomsheet/BaseBottomSheetComponent.tsx
index 4e1f9e9bc2..cbaaffd5e0 100644
--- a/components/bottomsheet/BaseBottomSheetComponent.tsx
+++ b/components/bottomsheet/BaseBottomSheetComponent.tsx
@@ -113,6 +113,7 @@ const BaseBottomSheetComponent = ({
       animationInTiming={BOTTOMSHEET_ANIMATION_DURATION}
       animationOutTiming={BOTTOMSHEET_ANIMATION_DURATION}
       useNativeDriverForBackdrop={true}
+      hideModalContentWhileAnimating={true}
       style={styles.modal}
     >
       <View ref={modalRef} style={[styles.modalContent, modalView?.modalStyle]}>
diff --git a/components/bottomsheet/policy-amount-bottom-sheet/PolicyAmountBottomSheet.tsx b/components/bottomsheet/policy-amount-bottom-sheet/PolicyAmountBottomSheet.tsx
index 8d369907a6..e562f67bfa 100644
--- a/components/bottomsheet/policy-amount-bottom-sheet/PolicyAmountBottomSheet.tsx
+++ b/components/bottomsheet/policy-amount-bottom-sheet/PolicyAmountBottomSheet.tsx
@@ -1,5 +1,6 @@
 import { Dispatch, useEffect, useState } from "react";
 import { FlatList, TouchableOpacity, View } from "react-native";
+import { commonStyles } from "../../../App/Container/Navi-Insurance/Styles";
 import { GenericActionPayload } from "../../../App/common/actions/GenericAction";
 import { sendAsAnalyticsEvent } from "../../../App/common/hooks/useAnalyticsEvent";
 import { CtaData } from "../../../App/common/interface";
@@ -7,8 +8,6 @@ import {
   CoverAmountPillData,
   PolicyAmountBottomSheetData,
 } from "../../../App/common/interface/widgets/modalData/PolicyAmountBottomSheetData";
-import WidgetActionHandler from "../../../App/common/widgets/widget-actions/WidgetActionHandler";
-import { WidgetActionTypes } from "../../../App/common/widgets/widget-actions/WidgetActionTypes";
 import CtaButton from "../../reusable/cta-button/CtaButton";
 import { StyledText } from "../../widgets/styled-text/StyledText";
 import TitleWidget from "../../widgets/title-widget/TitleWidget";
@@ -68,7 +67,10 @@ export const PolicyAmountBottomSheet = ({
       />
       <CtaButton
         onPress={onPress}
-        style={bottomSheetData?.footerData?.buttonStyle}
+        style={{
+          ...commonStyles.height54,
+          ...bottomSheetData?.footerData?.buttonStyle,
+        }}
       >
         {bottomSheetData?.footerData?.title && (
           <StyledText textFieldData={bottomSheetData?.footerData?.title} />
diff --git a/components/bottomsheet/title-subtitle-with-dropdown-bottom-sheet/TitleSubtitleWithDropdownBottomSheet.tsx b/components/bottomsheet/title-subtitle-with-dropdown-bottom-sheet/TitleSubtitleWithDropdownBottomSheet.tsx
new file mode 100644
index 0000000000..1a71e7dd8e
--- /dev/null
+++ b/components/bottomsheet/title-subtitle-with-dropdown-bottom-sheet/TitleSubtitleWithDropdownBottomSheet.tsx
@@ -0,0 +1,164 @@
+import React, { useRef, useState } from "react";
+import {
+  Animated,
+  FlatList,
+  LayoutAnimation,
+  ScrollView,
+  TouchableOpacity,
+  View,
+} from "react-native";
+import { sendAsAnalyticsEvent } from "../../../App/common/hooks/useAnalyticsEvent";
+import { KeyValueInfoData } from "../../../App/common/interface/widgets/modalData/PremiumDetailsBottomSheetData";
+import {
+  DropdownContent,
+  DropdownData,
+  TitleSubtitleWithDropdownBottomSheetProps,
+} from "../../../App/common/interface/widgets/modalData/TitleSubtitleWithDropdownBottomSheetData";
+import { StyledImage } from "../../StyledImage";
+import { StyledText } from "../../widgets/styled-text/StyledText";
+import styles from "./TitleSubtitleWithDropdownBottomSheetStyles";
+
+const InfoItemComponent = ({ item }: { item: KeyValueInfoData }) => {
+  return (
+    <View style={styles.infoContainer}>
+      <View style={styles.infoKeyContainer}>
+        {item.key && <StyledText textFieldData={item.key} />}
+      </View>
+
+      {item.displayRightOfKey && (
+        <StyledText textFieldData={item.displayRightOfKey} />
+      )}
+
+      <View style={styles.infoValueContainer}>
+        {item.value && <StyledText textFieldData={item.value} />}
+      </View>
+    </View>
+  );
+};
+
+const DropDownComponent = ({
+  dropdownData,
+}: {
+  dropdownData: DropdownData;
+}) => {
+  const [isExpanded, setIsExpanded] = useState<boolean>(false);
+  const rotateAnimation = useRef(new Animated.Value(0)).current;
+  const toggleOpen = () => {
+    setIsExpanded(value => !value);
+    if (!!dropdownData?.title?.cta?.analyticsEventProperties && isExpanded)
+      sendAsAnalyticsEvent(dropdownData?.title?.cta?.analyticsEventProperties);
+    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+    Animated.timing(rotateAnimation, {
+      toValue: isExpanded ? 0 : 1,
+      duration: 300,
+      useNativeDriver: true,
+    }).start();
+  };
+
+  const getBulletPoint = (item: DropdownContent) => {
+    return (
+      <View>
+        {item?.icon?.url ? (
+          <StyledImage imageFieldData={item.icon} />
+        ) : (
+          <View style={styles.bulletIcon}></View>
+        )}
+      </View>
+    );
+  };
+
+  const DropdownItemComponent = ({ item }: { item: DropdownContent }) => {
+    return (
+      <View style={styles.rowContainer}>
+        {getBulletPoint(item)}
+        {item?.content?.text && <StyledText textFieldData={item.content} />}
+      </View>
+    );
+  };
+
+  const rotateInterpolate = rotateAnimation.interpolate({
+    inputRange: [0, 1],
+    outputRange: ["0deg", "180deg"],
+  });
+
+  const animatedStyle = {
+    transform: [{ rotate: rotateInterpolate }],
+  };
+
+  return (
+    <View
+      style={[dropdownData?.style, isExpanded ? styles.marginBottom32 : {}]}
+    >
+      <TouchableOpacity
+        onPress={toggleOpen}
+        style={[
+          styles.title,
+          isExpanded
+            ? dropdownData?.titleContainerStyle?.expanded
+            : dropdownData?.titleContainerStyle?.collapsed,
+        ]}
+        activeOpacity={1}
+      >
+        {dropdownData?.title?.text && (
+          <StyledText textFieldData={dropdownData.title} />
+        )}
+        {dropdownData?.rightIcon?.url && (
+          <Animated.View style={animatedStyle}>
+            <StyledImage imageFieldData={dropdownData.rightIcon} />
+          </Animated.View>
+        )}
+      </TouchableOpacity>
+      {isExpanded && dropdownData?.contentList && (
+        <FlatList
+          data={dropdownData?.contentList}
+          contentContainerStyle={styles.dropdownContentListContainer}
+          renderItem={({ item }) => <DropdownItemComponent item={item} />}
+        />
+      )}
+    </View>
+  );
+};
+
+const TitleSubtitleWithDropdownBottomSheet = ({
+  bottomSheetData,
+  handleModalClick,
+}: TitleSubtitleWithDropdownBottomSheetProps) => {
+  const handleRightTitleClick = () => {
+    handleModalClick && handleModalClick(bottomSheetData?.rightTitle?.cta!!);
+  };
+  return (
+    <View style={bottomSheetData?.viewStyle}>
+      <View style={styles.title}>
+        {bottomSheetData?.title?.text && (
+          <StyledText textFieldData={bottomSheetData.title} />
+        )}
+        {bottomSheetData?.rightTitle && (
+          <TouchableOpacity activeOpacity={1} onPress={handleRightTitleClick}>
+            <StyledText textFieldData={bottomSheetData.rightTitle} />
+          </TouchableOpacity>
+        )}
+      </View>
+      <ScrollView
+        nestedScrollEnabled={true}
+        showsVerticalScrollIndicator={false}
+      >
+        <TouchableOpacity activeOpacity={1}>
+          {bottomSheetData?.subtitle?.text && (
+            <StyledText textFieldData={bottomSheetData.subtitle} />
+          )}
+          <FlatList
+            data={bottomSheetData?.infoList}
+            contentContainerStyle={styles.listContainer}
+            renderItem={({ item }) => <InfoItemComponent item={item} />}
+            keyExtractor={item => item.key?.text + "_" + item.value?.text}
+          />
+          {bottomSheetData?.dropdownData?.title?.text && (
+            <DropDownComponent dropdownData={bottomSheetData?.dropdownData} />
+          )}
+        </TouchableOpacity>
+      </ScrollView>
+    </View>
+  );
+};
+
+export default TitleSubtitleWithDropdownBottomSheet;
diff --git a/components/bottomsheet/title-subtitle-with-dropdown-bottom-sheet/TitleSubtitleWithDropdownBottomSheetStyles.ts b/components/bottomsheet/title-subtitle-with-dropdown-bottom-sheet/TitleSubtitleWithDropdownBottomSheetStyles.ts
new file mode 100644
index 0000000000..fdfbd453a2
--- /dev/null
+++ b/components/bottomsheet/title-subtitle-with-dropdown-bottom-sheet/TitleSubtitleWithDropdownBottomSheetStyles.ts
@@ -0,0 +1,80 @@
+import { StyleSheet } from "react-native";
+
+const styles = StyleSheet.create({
+  title: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+  },
+  marginBottom32: {
+    marginBottom: 32,
+  },
+  listContainer: {
+    flexDirection: "column",
+    alignItems: "flex-start",
+    marginVertical: 24,
+  },
+  infoContainer: {
+    flexDirection: "row",
+    alignItems: "flex-start",
+    justifyContent: "flex-start",
+    paddingBottom: 8,
+  },
+  infoKeyContainer: {
+    width: 65,
+    flexDirection: "row",
+    justifyContent: "flex-start",
+  },
+  infoValueContainer: {
+    flexShrink: 1,
+    flexBasis: "70%",
+    flexDirection: "row",
+    justifyContent: "flex-start",
+    alignItems: "flex-start",
+  },
+  dropdownContentListContainer: {
+    flexDirection: "column",
+    alignItems: "flex-start",
+    marginHorizontal: 16,
+    marginVertical: 8,
+  },
+  bulletIcon: {
+    width: 4,
+    height: 4,
+    borderRadius: 4,
+    backgroundColor: "#444444",
+
+    marginTop: 8,
+  },
+  rowContainer: {
+    flexDirection: "row",
+    alignItems: "flex-start",
+    marginVertical: 12,
+  },
+
+  columnContainer: {
+    width: "100%",
+    flex: 1,
+    flexDirection: "column",
+    paddingHorizontal: 16,
+  },
+
+  leftContent: {
+    flexDirection: "row",
+    justifyContent: "flex-start",
+    alignItems: "center",
+  },
+
+  rightContent: {
+    flexDirection: "row",
+    justifyContent: "flex-end",
+    alignItems: "center",
+  },
+
+  dividerStyle: {
+    marginTop: 24,
+    marginHorizontal: 16,
+    width: "92%",
+  },
+});
+
+export default styles;
diff --git a/components/bottomsheet/title-with-feed-back-bottom-sheet/TitleWithFeedBackBottomSheet.tsx b/components/bottomsheet/title-with-feed-back-bottom-sheet/TitleWithFeedBackBottomSheet.tsx
index b749967c32..10c7005192 100644
--- a/components/bottomsheet/title-with-feed-back-bottom-sheet/TitleWithFeedBackBottomSheet.tsx
+++ b/components/bottomsheet/title-with-feed-back-bottom-sheet/TitleWithFeedBackBottomSheet.tsx
@@ -1,5 +1,7 @@
 import React, { useState } from "react";
 import { TouchableOpacity, View } from "react-native";
+import { commonStyles } from "../../../App/Container/Navi-Insurance/Styles";
+import { CtaData } from "../../../App/common/interface";
 import { PillData } from "../../../App/common/interface/components/PillData";
 import {
   InfoCardData,
@@ -10,7 +12,6 @@ import CtaButton from "../../reusable/cta-button/CtaButton";
 import { StyledText } from "../../widgets/styled-text/StyledText";
 import TitleWidget from "../../widgets/title-widget/TitleWidget";
 import styles from "./TitleWithFeedBackBottomSheetStyle";
-import { CtaData } from "../../../App/common/interface";
 
 export const ItemComponent = ({ item }: { item: PillData }) => {
   const [isSelected, setIsSelected] = useState(false);
@@ -51,18 +52,18 @@ const InfoCardComponent = ({
 
 const TitleWithFeedbackPillBottomSheet = ({
   bottomSheetData,
-  handleModalClick
+  handleModalClick,
 }: {
   bottomSheetData?: TitleWithFeedbackPillBottomSheetData;
   handleModalClick: (cta: CtaData) => void;
 }) => {
   const renderCtaButton = (
     buttonData?: ButtonData,
-    handleModalFooterButtonClick?: () => void
+    handleModalFooterButtonClick?: () => void,
   ) => (
     <CtaButton
       onPress={handleModalFooterButtonClick}
-      style={buttonData?.buttonStyle}
+      style={{ ...commonStyles.height54, ...buttonData?.buttonStyle }}
     >
       {buttonData?.title && <StyledText textFieldData={buttonData.title} />}
     </CtaButton>
@@ -96,11 +97,11 @@ const TitleWithFeedbackPillBottomSheet = ({
       <View style={styles.footerContainer}>
         {renderCtaButton(
           bottomSheetData?.leftButton,
-          handleModalFooterLeftButtonClick
+          handleModalFooterLeftButtonClick,
         )}
         {renderCtaButton(
           bottomSheetData?.rightButton,
-          handleModalFooterRightButtonClick
+          handleModalFooterRightButtonClick,
         )}
       </View>
     </View>
diff --git a/components/bottomsheet/title-with-left-right-buttons-bottom-sheet/TitleWithLeftRightButtonsBottomSheet.tsx b/components/bottomsheet/title-with-left-right-buttons-bottom-sheet/TitleWithLeftRightButtonsBottomSheet.tsx
index dc3cdc0acb..94c8da168c 100644
--- a/components/bottomsheet/title-with-left-right-buttons-bottom-sheet/TitleWithLeftRightButtonsBottomSheet.tsx
+++ b/components/bottomsheet/title-with-left-right-buttons-bottom-sheet/TitleWithLeftRightButtonsBottomSheet.tsx
@@ -19,7 +19,7 @@ const TitleWithLeftRightButtonsBottomSheet = ({
   handleModalClick: (cta: CtaData) => void;
   handleActions?: (
     value: any | undefined | null,
-    actionPayloadList: GenericActionPayload | undefined
+    actionPayloadList: GenericActionPayload | undefined,
   ) => void;
 }) => {
   const renderCtaButton = (
@@ -28,7 +28,7 @@ const TitleWithLeftRightButtonsBottomSheet = ({
   ) => (
     <CtaButton
       onPress={handleModalFooterButtonClick}
-          style={buttonData?.buttonStyle}
+      style={buttonData?.buttonStyle}
     >
       {buttonData?.title && <StyledText textFieldData={buttonData.title} />}
     </CtaButton>
@@ -52,16 +52,18 @@ const TitleWithLeftRightButtonsBottomSheet = ({
         <StyledText textFieldData={bottomSheetData.subtitle} />
       )}
 
-          {(bottomSheetData?.leftButton || bottomSheetData?.rightButton) &&(<View style={styles.footerContainer}>
-              {renderCtaButton(
-                  bottomSheetData?.leftButton,
-                  handleModalFooterLeftButtonClick,
-              )}
-              {renderCtaButton(
-                  bottomSheetData?.rightButton,
-                  handleModalFooterRightButtonClick,
-              )}
-          </View>)}
+      {(bottomSheetData?.leftButton || bottomSheetData?.rightButton) && (
+        <View style={styles.footerContainer}>
+          {renderCtaButton(
+            bottomSheetData?.leftButton,
+            handleModalFooterLeftButtonClick,
+          )}
+          {renderCtaButton(
+            bottomSheetData?.rightButton,
+            handleModalFooterRightButtonClick,
+          )}
+        </View>
+      )}
     </View>
   );
 };
diff --git a/components/bottomsheet/title-with-left-right-buttons-bottom-sheet/TitleWithLeftRightButtonsBottomSheetStyle.ts b/components/bottomsheet/title-with-left-right-buttons-bottom-sheet/TitleWithLeftRightButtonsBottomSheetStyle.ts
index 2c5aa61fa7..3b28e2ff3d 100644
--- a/components/bottomsheet/title-with-left-right-buttons-bottom-sheet/TitleWithLeftRightButtonsBottomSheetStyle.ts
+++ b/components/bottomsheet/title-with-left-right-buttons-bottom-sheet/TitleWithLeftRightButtonsBottomSheetStyle.ts
@@ -1,9 +1,9 @@
 import { StyleSheet } from "react-native";
 
 const styles = StyleSheet.create({
-    columnContainer: {
-        paddingHorizontal: 16,
-    },
+  columnContainer: {
+    paddingHorizontal: 16,
+  },
   footerContainer: {
     marginTop: 32,
     flexDirection: "row",
diff --git a/components/bottomsheet/title-with-list-bottom-sheet/TitleWithListBottomSheet.tsx b/components/bottomsheet/title-with-list-bottom-sheet/TitleWithListBottomSheet.tsx
index 9660312570..33a149d09c 100644
--- a/components/bottomsheet/title-with-list-bottom-sheet/TitleWithListBottomSheet.tsx
+++ b/components/bottomsheet/title-with-list-bottom-sheet/TitleWithListBottomSheet.tsx
@@ -94,7 +94,10 @@ const PremiumDetailsBottomSheet = ({
       <CtaButton
         state={bottomSheetData?.button?.state}
         onPress={handleFooterButtonClick}
-        style={bottomSheetData?.button?.buttonStyle}
+        style={{
+          ...commonStyles.height54,
+          ...bottomSheetData?.button?.buttonStyle,
+        }}
       >
         {bottomSheetData?.button?.title && (
           <StyledText textFieldData={bottomSheetData?.button?.title} />
@@ -104,4 +107,4 @@ const PremiumDetailsBottomSheet = ({
   );
 };
 
-export default PremiumDetailsBottomSheet;
\ No newline at end of file
+export default PremiumDetailsBottomSheet;
diff --git a/components/bottomsheet/title-with-steps-bottom-sheet/TitleWithStepsBottomSheet.tsx b/components/bottomsheet/title-with-steps-bottom-sheet/TitleWithStepsBottomSheet.tsx
index ce380df052..0c122fc9b3 100644
--- a/components/bottomsheet/title-with-steps-bottom-sheet/TitleWithStepsBottomSheet.tsx
+++ b/components/bottomsheet/title-with-steps-bottom-sheet/TitleWithStepsBottomSheet.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import { View, ViewStyle } from "react-native";
+import { commonStyles } from "../../../App/Container/Navi-Insurance/Styles";
 import { CtaData } from "../../../App/common/interface";
 import {
   Bullet,
@@ -164,11 +165,11 @@ const FooterUI = ({
     <CtaButton
       state={buttonData.state}
       onPress={onPress}
-      style={buttonData.buttonStyle}
+      style={{ ...commonStyles.height54, ...buttonData.buttonStyle }}
     >
       {buttonData.title && <StyledText textFieldData={buttonData.title} />}
     </CtaButton>
   );
 };
 
-export default TitleWithStepsBottomSheet;
\ No newline at end of file
+export default TitleWithStepsBottomSheet;
diff --git a/components/reusable/cta-button/CtaButtonStyle.ts b/components/reusable/cta-button/CtaButtonStyle.ts
index 548e42f97d..b8b1056621 100644
--- a/components/reusable/cta-button/CtaButtonStyle.ts
+++ b/components/reusable/cta-button/CtaButtonStyle.ts
@@ -3,13 +3,14 @@ import { StyleSheet } from "react-native";
 const styles = StyleSheet.create({
   footerButtonContainer: {
     backgroundColor: "#1F002A",
-    paddingVertical: 16,
     borderRadius: 4,
     justifyContent: "center",
     alignItems: "center",
   },
   loaderLottieStyle: {
-    width: 30,
+    width: 26,
+    height: 22,
+    resizeMode: "contain",
     alignSelf: "center",
   },
 });
diff --git a/components/widgets/footer-with-card-widget/FooterWithCardWidget.tsx b/components/widgets/footer-with-card-widget/FooterWithCardWidget.tsx
index 386b3540bf..2876a21872 100644
--- a/components/widgets/footer-with-card-widget/FooterWithCardWidget.tsx
+++ b/components/widgets/footer-with-card-widget/FooterWithCardWidget.tsx
@@ -11,15 +11,15 @@ import {
   FooterWithCardWidgetData,
 } from "../../../App/common/interface/widgets/widgetData/FooterWithCardWidgetData";
 import { ScreenState } from "../../../App/common/screen/BaseScreen";
+import Colors from "../../../assets/colors/colors";
 import CtaButton from "../../reusable/cta-button/CtaButton";
-import { StyledText } from "../styled-text/StyledText";
-import TitleWidget from "../title-widget/TitleWidget";
-import styles from "./FooterWithCardWidgetStyle";
 import {
   GradientHorizontalDashedSeparator,
   HorizontalDashedSeparator,
 } from "../../reusable/dashed-separator/DashedSeparator";
-import Colors from "../../../assets/colors/colors";
+import { StyledText } from "../styled-text/StyledText";
+import TitleWidget from "../title-widget/TitleWidget";
+import styles from "./FooterWithCardWidgetStyle";
 
 export const CardComponent = ({
   cardInfo,
@@ -57,7 +57,11 @@ const FooterWithCardWidget = ({
   screenState?: ScreenState | null;
 }) => {
   const handleFooterClick = () => {
-    handleActions(null, widgetData?.buttonAction);
+    if (handleClick && widgetData?.footerButton?.cta) {
+      handleClick(widgetData.footerButton.cta);
+    } else {
+      handleActions(null, widgetData?.buttonAction);
+    }
   };
 
   const getViewStyle = (): ViewStyle => {
diff --git a/components/widgets/hero-section-widget/HeroSectionWidget.tsx b/components/widgets/hero-section-widget/HeroSectionWidget.tsx
new file mode 100644
index 0000000000..a12aafcac8
--- /dev/null
+++ b/components/widgets/hero-section-widget/HeroSectionWidget.tsx
@@ -0,0 +1,41 @@
+import { View } from "react-native";
+import { NaviLinearGradient } from "../../../App/common/hooks/useGradient";
+import { HeroSectionWidgetProps } from "../../../App/common/interface/widgets/widgetData/HeroSectionWidgetData";
+import { StyledImage } from "../../StyledImage";
+import { StyledText } from "../styled-text/StyledText";
+import styles from "./HeroSectionWidgetStyles";
+
+const HeroSectionWidget = ({
+  widgetData,
+  widgetStyle,
+  handleActions,
+  handleClick,
+  widgetIndex,
+}: HeroSectionWidgetProps) => {
+  return (
+    <NaviLinearGradient
+      gradientColors={widgetData?.backgroundGradient}
+      orientation={widgetData?.gradientOrientation}
+    >
+      <View style={styles.container}>
+        <View style={styles.rowContainer}>
+          {widgetData?.title?.text && (
+            <StyledText textFieldData={widgetData?.title} />
+          )}
+          {widgetData?.image?.url && (
+            <StyledImage imageFieldData={widgetData?.image} />
+          )}
+        </View>
+        <View style={styles.calloutContainer}>
+          {widgetData?.callout?.title?.text && (
+            <View style={widgetData?.callout?.calloutStyle}>
+              <StyledText textFieldData={widgetData?.callout?.title} />
+            </View>
+          )}
+        </View>
+      </View>
+    </NaviLinearGradient>
+  );
+};
+
+export default HeroSectionWidget;
diff --git a/components/widgets/hero-section-widget/HeroSectionWidgetStyles.ts b/components/widgets/hero-section-widget/HeroSectionWidgetStyles.ts
new file mode 100644
index 0000000000..746fc2215b
--- /dev/null
+++ b/components/widgets/hero-section-widget/HeroSectionWidgetStyles.ts
@@ -0,0 +1,20 @@
+import { StyleSheet } from "react-native";
+
+const styles = StyleSheet.create({
+  container: {
+    paddingHorizontal: 16,
+    flexDirection: "column",
+    flexGrow: 1,
+    flexBasis: 0,
+  },
+  rowContainer: {
+    flexDirection: "row",
+    justifyContent: "space-between"
+  },
+  calloutContainer: {
+    flexShrink: 1,
+    flexWrap: "wrap",
+  },
+});
+
+export default styles;
diff --git a/components/widgets/index.tsx b/components/widgets/index.tsx
index 3fb41e2e84..6bcacad30b 100644
--- a/components/widgets/index.tsx
+++ b/components/widgets/index.tsx
@@ -1,6 +1,8 @@
 export { StyledText } from "./styled-text/StyledText";
 export { StyledImage } from "../StyledImage";
 export { default as TitleWidget } from "./title-widget/TitleWidget";
+export { default as FooterWithCardWidget } from "./footer-with-card-widget/FooterWithCardWidget";
 export { default as TitleWithAssetBackgroundWidget } from "./title-with-asset-background/TitleWithAssetBackground";
 export { default as SelectCardWithDetailListWidget } from "./select-card-with-detail-list/SelectCardWithDetailList";
 export { default as TableWidget } from "./table-widget/Table";
+export { default as HeroSectionWidget } from "./hero-section-widget/HeroSectionWidget";
diff --git a/components/widgets/table-widget/Table.tsx b/components/widgets/table-widget/Table.tsx
index 6f02ab4557..b6322dd8fc 100644
--- a/components/widgets/table-widget/Table.tsx
+++ b/components/widgets/table-widget/Table.tsx
@@ -1,28 +1,55 @@
-import { useEffect, useState } from "react";
+import throttle from "lodash/throttle";
+import { useCallback, useEffect, useState } from "react";
 import { TouchableOpacity, View } from "react-native";
-import {
-  TableWidgetProps,
-  Column,
-  Row,
-  Cell as CellData,
-  ColumnsProps,
-  RowsProps,
-  CellProps,
-} from "../../../App/common/interface/widgets/widgetData";
 import { StyledImage, StyledText } from "..";
-import { styles } from "./TableWidgetStyles";
 import { sendAsAnalyticsEvent } from "../../../App/common/hooks/useAnalyticsEvent";
+import {
+  Cell as CellData,
+  CellProps,
+  Column,
+  ColumnsProps,
+  Row,
+  RowsProps,
+  TableWidgetProps,
+} from "../../../App/common/interface/widgets/widgetData";
+import { styles } from "./TableWidgetStyles";
 
-const Cell = ({ widgetData, cell, index, handleClick }: CellProps) => {
-  useEffect(()=>{
-    cell?.analyticEvents?.onViewEvent && sendAsAnalyticsEvent(cell?.analyticEvents?.onViewEvent)
-  },[])
+const Cell = ({
+  widgetData,
+  cell,
+  index,
+  handleClick,
+  handleActions,
+}: CellProps) => {
+  useEffect(() => {
+    cell?.analyticEvents?.onViewEvent &&
+      sendAsAnalyticsEvent(cell?.analyticEvents?.onViewEvent);
+  }, []);
+  const throttledHandleActions = useCallback(
+    throttle(() => handleActions(null, cell?.action), 700, {
+      leading: true,
+      trailing: false,
+    }),
+    [widgetData],
+  );
+  const cellAction = () => {
+    throttledHandleActions();
+  };
+  const handleTableCellClick = () => {
+    if (cell?.cta) {
+      handleClick && handleClick(cell?.cta);
+    } else if (cell?.action) {
+      cellAction();
+    }
+  };
   return (
     <TouchableOpacity
-      style={[styles.cell, widgetData?.columns?.[index]?.columnStyle]}
-      onPress={() => {
-        handleClick && cell?.cta && handleClick(cell?.cta);
-      }}
+      style={[
+        styles.cell,
+        widgetData?.columns?.[index]?.columnStyle,
+        cell?.cellStyle,
+      ]}
+      onPress={handleTableCellClick}
       activeOpacity={1}
     >
       {cell?.title?.text && (
@@ -36,7 +63,12 @@ const Cell = ({ widgetData, cell, index, handleClick }: CellProps) => {
   );
 };
 
-const Rows = ({ widgetData, rowsToDisplay, handleClick }: RowsProps) => {
+const Rows = ({
+  widgetData,
+  rowsToDisplay,
+  handleClick,
+  handleActions,
+}: RowsProps) => {
   return (
     <>
       {widgetData?.rows &&
@@ -52,6 +84,7 @@ const Rows = ({ widgetData, rowsToDisplay, handleClick }: RowsProps) => {
                     key={index}
                     widgetData={widgetData}
                     handleClick={handleClick}
+                    handleActions={handleActions}
                   />
                 ))}
               </View>
@@ -70,6 +103,9 @@ const Columns = ({ widgetData }: ColumnsProps) => {
               style={[styles.cell, styles.header, column?.columnStyle]}
               key={index}
             >
+              {column?.image?.url && (
+                <StyledImage imageFieldData={column?.image} />
+              )}
               {column?.title?.text && (
                 <StyledText textFieldData={column?.title} />
               )}
@@ -83,14 +119,21 @@ const Columns = ({ widgetData }: ColumnsProps) => {
   );
 };
 
-const Table = ({ widgetData, handleClick }: TableWidgetProps) => {
+const Table = ({
+  widgetData,
+  handleClick,
+  handleActions,
+}: TableWidgetProps) => {
   const [rowsToDisplay, setRowsToDisplay] = useState<number | undefined>(
     widgetData?.rowsToDisplay || widgetData?.rows?.length,
   );
 
   const handleSelect = () => {
     setRowsToDisplay(widgetData?.rows?.length);
-    widgetData.viewButton?.cta?.analyticsEventProperties && sendAsAnalyticsEvent(widgetData.viewButton?.cta?.analyticsEventProperties)
+    widgetData?.viewButton?.cta?.analyticsEventProperties &&
+      sendAsAnalyticsEvent(
+        widgetData?.viewButton?.cta?.analyticsEventProperties,
+      );
   };
 
   return (
@@ -100,6 +143,7 @@ const Table = ({ widgetData, handleClick }: TableWidgetProps) => {
         widgetData={widgetData}
         rowsToDisplay={rowsToDisplay}
         handleClick={handleClick}
+        handleActions={handleActions}
       />
       {rowsToDisplay !== widgetData?.rows?.length &&
         widgetData.viewButton?.text && (
diff --git a/components/widgets/title-widget/TitleWidget.tsx b/components/widgets/title-widget/TitleWidget.tsx
index 419f22500a..ff4d9e2c8a 100644
--- a/components/widgets/title-widget/TitleWidget.tsx
+++ b/components/widgets/title-widget/TitleWidget.tsx
@@ -16,25 +16,25 @@ const TitleWidget = ({
   widgetStyle?: ViewStyle;
   handleActions?: (
     value: any | undefined | null,
-    actionPayloadList: GenericActionPayload | undefined
+    actionPayloadList: GenericActionPayload | undefined,
   ) => void;
   handleClick?: (cta: CtaData) => void;
   widgetIndex?: number;
 }) => {
   const handleTitleClick = () => {
-    const {cta , actions} = widgetData?.title || {};
+    const { cta, actions } = widgetData?.title || {};
     if (actions && handleActions) {
-      handleActions(null, actions)
-    } else if (cta && handleClick) { 
+      handleActions(null, actions);
+    } else if (cta && handleClick) {
       handleClick(cta);
     }
   };
 
   const handleRightTitleClick = () => {
-    const {cta , actions} = widgetData?.rightTitle || {};
+    const { cta, actions } = widgetData?.rightTitle || {};
     if (actions && handleActions) {
-      handleActions(null, actions)
-    } else if (cta && handleClick) { 
+      handleActions(null, actions);
+    } else if (cta && handleClick) {
       handleClick(cta);
     }
   };
diff --git a/package.json b/package.json
index 0b7c4aa5b4..12eb5e75f1 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "NaviApp",
-  "version": "0.1.3",
-  "versionCode": 4,
+  "version": "0.2.0",
+  "versionCode": 5,
   "private": true,
   "scripts": {
     "start": "yarn react-native start",