diff --git a/App/Container/Navi-Insurance/Styles/index.ts b/App/Container/Navi-Insurance/Styles/index.ts
index a1bb5140d3..41ba0fd397 100644
--- a/App/Container/Navi-Insurance/Styles/index.ts
+++ b/App/Container/Navi-Insurance/Styles/index.ts
@@ -1,4 +1,10 @@
 import { StyleSheet } from "react-native";
+import { SharedValue, useAnimatedStyle } from "react-native-reanimated";
+import Colors from "../../../../assets/colors/colors";
+import {
+  CommonHeaderShadowStyleProperties,
+  INITIAL_Y_VALUE,
+} from "../../../common/constants";
 
 export const commonStyles = StyleSheet.create({
   container: {
@@ -34,10 +40,41 @@ export const commonStyles = StyleSheet.create({
   height54: {
     height: 54,
   },
+  height108: {
+    height: 108,
+  },
   height8: {
     height: 8,
   },
   flexStart: {
     alignItems: "flex-start",
   },
+  ctaButton: {
+    height: 54,
+    flex: 1,
+  },
+  width16: {
+    width: 16,
+  },
 });
+
+export const commonHeaderShadowStyle = (
+  derivedY: Readonly<SharedValue<number>>,
+) => {
+  return useAnimatedStyle(() => {
+    const isScrolled = derivedY.value > INITIAL_Y_VALUE;
+
+    return {
+      shadowColor: isScrolled ? Colors.black : Colors.transparent,
+      shadowOpacity: isScrolled
+        ? CommonHeaderShadowStyleProperties.SHADOW_OPACITY
+        : CommonHeaderShadowStyleProperties.INITIAL_SHADOW_OPACITY,
+      shadowRadius: isScrolled
+        ? CommonHeaderShadowStyleProperties.SHADOW_RADIUS
+        : CommonHeaderShadowStyleProperties.INITIAL_SHADOW_RADIUS,
+      elevation: isScrolled
+        ? CommonHeaderShadowStyleProperties.ELEVATION
+        : CommonHeaderShadowStyleProperties.INITIAL_ELEVATION,
+    };
+  });
+};
diff --git a/App/Container/Navi-Insurance/screen/benefit-screen/BenefitScreen.tsx b/App/Container/Navi-Insurance/screen/benefit-screen/BenefitScreen.tsx
index 79784b6ce1..b29178639a 100644
--- a/App/Container/Navi-Insurance/screen/benefit-screen/BenefitScreen.tsx
+++ b/App/Container/Navi-Insurance/screen/benefit-screen/BenefitScreen.tsx
@@ -1,41 +1,43 @@
 import { useNavigation } from "@react-navigation/native";
 import { useEffect } from "react";
-import { NativeScrollEvent, NativeSyntheticEvent, View } from "react-native";
+import {
+  BackHandler,
+  NativeScrollEvent,
+  NativeSyntheticEvent,
+  StatusBar,
+  View,
+} from "react-native";
 import Animated, {
-  useAnimatedStyle,
   useDerivedValue,
   useSharedValue,
-  withTiming,
 } from "react-native-reanimated";
-import { StyledImage, StyledText } from "../../../../../components/widgets";
-import BaseWidget from "../../../../../components/widgets/BaseWidget";
+import Colors from "../../../../../assets/colors/colors";
 import {
-  BaseActionTypes,
-  GenericActionPayload,
-} from "../../../../common/actions/GenericAction";
+  CommonContentWidgets,
+  CommonFooter,
+} from "../../../../../components/reusable";
+import { StyledImage, StyledText } from "../../../../../components/widgets";
+import { BaseActionTypes } from "../../../../common/actions/GenericAction";
 import {
   AnalyticsEventNameConstants,
   AnalyticsFlowNameConstant,
-  AnalyticsMethodNameConstant,
   BENEFIT_SCREEN,
   ConstantCta,
+  HARDWARE_BACK_PRESS,
   INITIAL_Y_VALUE,
-  NAVIGATION_ERROR,
-  THRESHOLD_Y_BENEFIT,
 } from "../../../../common/constants";
-import { NaviLinearGradient } from "../../../../common/hooks/useGradient";
+import { sendAsAnalyticsEvent } from "../../../../common/hooks/useAnalyticsEvent";
 import { AnalyticsEvent, CtaData } from "../../../../common/interface";
-import { Widget } from "../../../../common/interface/widgets/Widget";
 import { BenefitScreenHeaderData } from "../../../../common/interface/widgets/widgetData";
 import { BenefitScreenProps } from "../../../../common/interface/widgets/widgetData/BenefitScreenHeaderData";
 import { ScreenState } from "../../../../common/screen/BaseScreen";
 import { ScreenActionTypes } from "../../../../common/screen/ScreenActionTypes";
 import { extractCtaParameters } from "../../../../common/utilities/CtaParamsUtils";
 import { globalHandleClick } from "../../../../common/utilities/NavigationUtil";
-import GenericShimmerScreen from "../generic-shimmer-screen/GenericShimmerScreen";
+import { isValidHexColor } from "../../../../common/utilities/ValidateColors";
 import QuoteOfferErrorScreen from "../quote-offer-screen/error-screen/QuoteOfferErrorScreen";
+import WaitingPeriodShimmerScreen from "../waiting-period-screen/shimmer-screen/WaitingPeriodShimmerScreen";
 import styles from "./BenefitScreenStyles";
-import { sendAsAnalyticsEvent } from "../../../../common/hooks/useAnalyticsEvent";
 
 const BenefitScreen = ({
   ctaData,
@@ -86,74 +88,67 @@ const BenefitScreen = ({
     });
   }, [ctaData]);
 
-  const headerStyle = useAnimatedStyle(() => {
-    return {
-      maxHeight: withTiming(derivedY.value > THRESHOLD_Y_BENEFIT ? 0 : 200, {
-        duration: derivedY.value > THRESHOLD_Y_BENEFIT ? 600 : 800,
-      }),
-      // Updating maxHeight to 0 when derivedY.value > 0 to hide the header icon
-      // and updating to 200 [> icon height] when derivedY.value <= 0 to show the header icon
-      opacity: withTiming(derivedY.value > THRESHOLD_Y_BENEFIT ? 0 : 1, {
-        duration: derivedY.value > THRESHOLD_Y_BENEFIT ? 600 : 800,
-      }),
+  let headerData = screenData?.screenWidgets?.headerWidgets?.at(
+    0,
+  ) as BenefitScreenHeaderData;
+  let headerColor = isValidHexColor(headerData?.backgroundColor || "")
+    ? headerData?.backgroundColor
+    : Colors.white;
+
+  const handleBackButtonClick = () => {
+    let backCta = headerData?.leftIcon?.cta;
+    handleClick && backCta && handleClick(backCta);
+    return true;
+  };
+
+  useEffect(() => {
+    BackHandler.addEventListener(HARDWARE_BACK_PRESS, handleBackButtonClick);
+    return () => {
+      BackHandler.removeEventListener(
+        HARDWARE_BACK_PRESS,
+        handleBackButtonClick,
+      );
     };
-  });
+  }, [screenData]);
 
   const Header = () => {
     let headerData = screenData?.screenWidgets?.headerWidgets?.at(
       0,
     ) as BenefitScreenHeaderData;
     return (
-      <NaviLinearGradient
-        gradientColors={
-          derivedY.value > THRESHOLD_Y_BENEFIT
-            ? headerData?.scrolledGradient
-            : headerData?.defaultGradient
-        }
-      >
-        <Animated.View style={styles.header}>
-          <View style={styles.headerContainer}>
-            <View style={styles.headerContainerTopBar}>
-              {headerData?.leftIcon && (
-                <StyledImage
-                  imageFieldData={headerData?.leftIcon}
-                  handleClick={handleClick}
-                />
-              )}
-              {headerData?.title && (
-                <StyledText textFieldData={headerData?.title} />
-              )}
-              {headerData?.rightIcon ? (
-                <StyledImage imageFieldData={headerData?.rightIcon} />
-              ) : (
-                <View style={styles.placeholderImage} />
-              )}
-            </View>
-            {headerData?.subtitle && (
-              <StyledText textFieldData={headerData?.subtitle} />
-            )}
-            {<View style={styles.spacer} />}
-            {headerData?.description?.url && (
-              <Animated.View
-                style={[styles.headerContainerBottomBar, headerStyle]}
-              >
-                <StyledImage imageFieldData={headerData?.description} />
-              </Animated.View>
-            )}
-          </View>
-        </Animated.View>
-      </NaviLinearGradient>
+      <View style={[styles.headerContainer, { backgroundColor: headerColor }]}>
+        <View style={[styles.headerContainerTopBar]}>
+          {headerData?.leftIcon && (
+            <StyledImage
+              imageFieldData={headerData?.leftIcon}
+              handleClick={handleClick}
+            />
+          )}
+          {headerData?.title && (
+            <StyledText textFieldData={headerData?.title} />
+          )}
+          {headerData?.rightIcon ? (
+            <StyledImage imageFieldData={headerData?.rightIcon} />
+          ) : (
+            <View style={styles.placeholderImage} />
+          )}
+        </View>
+        {headerData?.subtitle && (
+          <StyledText textFieldData={headerData?.subtitle} />
+        )}
+        <View style={styles.spacer} />
+      </View>
     );
   };
 
-  const Footer = () => {
+  const TopSection = () => {
     return (
-      <View style={styles.footer}>
-        {getWidgetViews(
-          screenData?.screenWidgets?.footerWidgets,
-          handleActions,
-          screenData?.screenState,
-          handleClick,
+      <View style={{ backgroundColor: headerColor }}>
+        <View style={styles.spacer} />
+        {headerData?.description?.url && (
+          <View style={styles.headerContainerBottomBar}>
+            <StyledImage imageFieldData={headerData?.description} />
+          </View>
         )}
       </View>
     );
@@ -191,7 +186,7 @@ const BenefitScreen = ({
   }, [screenData?.screenState]);
 
   if (screenData?.screenState === ScreenState.LOADING) {
-    return <GenericShimmerScreen handleClick={handleClick} />;
+    return <WaitingPeriodShimmerScreen handleClick={handleClick} />;
   }
 
   if (screenData?.screenState === ScreenState.ERROR) {
@@ -210,6 +205,7 @@ const BenefitScreen = ({
 
   return (
     <View style={[styles.container, screenData?.screenStyle]}>
+      <StatusBar backgroundColor={headerColor} />
       <Animated.ScrollView
         showsVerticalScrollIndicator={false}
         contentContainerStyle={styles.content}
@@ -221,40 +217,20 @@ const BenefitScreen = ({
         overScrollMode={"never"}
       >
         <Header />
-        {getWidgetViews(
-          screenData?.screenWidgets?.contentWidgets,
-          handleActions,
-          screenData?.screenState,
-          handleClick,
-        )}
+        <TopSection />
+        <CommonContentWidgets
+          screenData={screenData}
+          handleActions={handleActions}
+          handleClick={handleClick}
+        />
       </Animated.ScrollView>
-      <Footer />
+      <CommonFooter
+        screenData={screenData}
+        handleActions={handleActions}
+        handleClick={handleClick}
+      />
     </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 BenefitScreen;
diff --git a/App/Container/Navi-Insurance/screen/benefit-screen/BenefitScreenStyles.ts b/App/Container/Navi-Insurance/screen/benefit-screen/BenefitScreenStyles.ts
index 9eca04a53c..16f047ad95 100644
--- a/App/Container/Navi-Insurance/screen/benefit-screen/BenefitScreenStyles.ts
+++ b/App/Container/Navi-Insurance/screen/benefit-screen/BenefitScreenStyles.ts
@@ -6,11 +6,6 @@ const styles = StyleSheet.create({
     flexDirection: "column",
     backgroundColor: "#FFFFFF",
   },
-  header: {
-    width: "100%",
-    alignItems: "stretch",
-    zIndex: 1,
-  },
   content: {
     flexGrow: 1,
     backgroundColor: "#FFFFFF",
@@ -24,6 +19,7 @@ const styles = StyleSheet.create({
     alignItems: "center",
   },
   headerContainerTopBar: {
+    zIndex: 1,
     flexDirection: "row",
     justifyContent: "space-between",
     alignItems: "center",
@@ -40,11 +36,12 @@ const styles = StyleSheet.create({
   },
   headerContainerBottomBar: {
     flexDirection: "column",
-    justifyContent: "center",
+    justifyContent: "flex-end",
     alignItems: "center",
+    width: "100%",
   },
   spacer: {
-    height: 24,
+    height: 12,
   },
   placeholderImage: { height: 24, width: 24 },
 });
diff --git a/App/Container/Navi-Insurance/screen/compare-plan-screen/ComparePlanScreen.tsx b/App/Container/Navi-Insurance/screen/compare-plan-screen/ComparePlanScreen.tsx
index 55189cb2f1..ea4db94c43 100644
--- a/App/Container/Navi-Insurance/screen/compare-plan-screen/ComparePlanScreen.tsx
+++ b/App/Container/Navi-Insurance/screen/compare-plan-screen/ComparePlanScreen.tsx
@@ -1,66 +1,72 @@
 import { useNavigation } from "@react-navigation/native";
 import React, { useEffect } from "react";
-import { ScrollView, View } from "react-native";
-import BaseWidget from "../../../../../components/widgets/BaseWidget";
+import { NativeScrollEvent, NativeSyntheticEvent, View } from "react-native";
+import Animated, {
+  useDerivedValue,
+  useSharedValue,
+} from "react-native-reanimated";
 import {
-  BaseActionTypes,
-  GenericActionPayload,
-} from "../../../../common/actions/GenericAction";
-import { COMPARE_PLAN_SCREEN, ConstantCta } from "../../../../common/constants";
+  CommonContentWidgets,
+  CommonFooter,
+  CommonHeader,
+} from "../../../../../components/reusable";
+import { BaseActionTypes } from "../../../../common/actions/GenericAction";
+import {
+  COMPARE_PLAN_SCREEN,
+  ConstantCta,
+  INITIAL_Y_VALUE,
+} from "../../../../common/constants";
+import { useAnalyticsEvent } from "../../../../common/hooks";
 import { CtaData } from "../../../../common/interface";
-import { Widget } from "../../../../common/interface/widgets/Widget";
-import { ScreenData } from "../../../../common/interface/widgets/screenData/ScreenData";
 import { ScreenState } from "../../../../common/screen/BaseScreen";
 import { ScreenActionTypes } from "../../../../common/screen/ScreenActionTypes";
 import { globalHandleClick } from "../../../../common/utilities/NavigationUtil";
+import { commonHeaderShadowStyle } from "../../Styles";
 import QuoteOfferErrorScreen from "../quote-offer-screen/error-screen/QuoteOfferErrorScreen";
+import styles from "./ComparePlanScreenStyles";
 import ComparePlanShimmerScreen from "./shimmer-screen/ComparePlanShimmerScreen";
+import { ComparePlansScreenProps, screenEvents } from "./types";
 
 const ComparePlanScreen = ({
   ctaData,
   screenData,
   handleActions,
-}: {
-  ctaData: CtaData;
-  screenData: ScreenData | null;
-  handleActions: (screenPayload?: GenericActionPayload) => void;
-}) => {
+}: ComparePlansScreenProps) => {
+  const { sendScreenStateAnalyticsEvents } = useAnalyticsEvent();
   const navigation = useNavigation();
+  const y = useSharedValue(INITIAL_Y_VALUE);
+  const derivedY = useDerivedValue(() => {
+    return y.value;
+  });
+  const onScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+    y.value = event.nativeEvent.contentOffset.y;
+  };
+
   const handleClick = (cta?: CtaData) => {
     globalHandleClick(navigation, cta, COMPARE_PLAN_SCREEN);
   };
 
   useEffect(() => {
+    const modifiedRequestData = {
+      ...ctaData.data,
+      planDetails: ctaData?.data?.planDetails?.filter(
+        plan => !!Object.keys(plan).length,
+      ),
+    };
     handleActions({
       baseActionType: BaseActionTypes.SCREEN_ACTION,
       metaData: [
         {
           actionType: ScreenActionTypes.FETCH_COMPARE_PLAN_LIST,
-          data: ctaData?.data,
+          data: modifiedRequestData,
           screenName: COMPARE_PLAN_SCREEN,
         },
       ],
     });
   }, [ctaData]);
 
-  const Header = () => {
-    return getWidgetViews(
-      screenData?.screenWidgets?.headerWidgets,
-      handleActions,
-      screenData?.screenState,
-      handleClick,
-    );
-  };
-
-  const ContentWidgets = () => {
-    return getWidgetViews(
-      screenData?.screenWidgets?.contentWidgets,
-      handleActions,
-      screenData?.screenState,
-      handleClick,
-    );
-  };
-
+  const headerStyle = commonHeaderShadowStyle(derivedY);
+  sendScreenStateAnalyticsEvents(screenEvents, screenData?.screenState);
   if (screenData?.screenState === ScreenState.LOADING) {
     return <ComparePlanShimmerScreen handleClick={handleClick} />;
   }
@@ -78,39 +84,34 @@ const ComparePlanScreen = ({
       />
     );
   }
-
   return (
-    <View style={[screenData?.screenStyle]}>
-      <Header />
-      <ScrollView>
-        <ContentWidgets />
-      </ScrollView>
+    <View style={[styles.container, screenData?.screenStyle]}>
+      <CommonHeader
+        screenData={screenData}
+        handleActions={handleActions}
+        handleClick={handleClick}
+        style={[styles.header, headerStyle]}
+      />
+      <Animated.ScrollView
+        showsVerticalScrollIndicator={false}
+        contentContainerStyle={styles.content}
+        nestedScrollEnabled={true}
+        onScroll={onScroll}
+        overScrollMode={"never"}
+      >
+        <CommonContentWidgets
+          screenData={screenData}
+          handleActions={handleActions}
+          handleClick={handleClick}
+        />
+      </Animated.ScrollView>
+      <CommonFooter
+        screenData={screenData}
+        handleActions={handleActions}
+        handleClick={handleClick}
+      />
     </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 ComparePlanScreen;
diff --git a/App/Container/Navi-Insurance/screen/compare-plan-screen/ComparePlanScreenStyles.ts b/App/Container/Navi-Insurance/screen/compare-plan-screen/ComparePlanScreenStyles.ts
new file mode 100644
index 0000000000..afae156dcc
--- /dev/null
+++ b/App/Container/Navi-Insurance/screen/compare-plan-screen/ComparePlanScreenStyles.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/Container/Navi-Insurance/screen/compare-plan-screen/shimmer-screen/ComparePlanShimmerScreen.tsx b/App/Container/Navi-Insurance/screen/compare-plan-screen/shimmer-screen/ComparePlanShimmerScreen.tsx
index 2d3309ff4a..1e09f8ddc2 100644
--- a/App/Container/Navi-Insurance/screen/compare-plan-screen/shimmer-screen/ComparePlanShimmerScreen.tsx
+++ b/App/Container/Navi-Insurance/screen/compare-plan-screen/shimmer-screen/ComparePlanShimmerScreen.tsx
@@ -13,13 +13,6 @@ const ComparePlanShimmerScreen = ({
 }) => {
   return (
     <View style={styles.container}>
-      <View style={styles.header}>
-        <StaticHeader
-          handleClick={handleClick}
-          leftIcon="BACK_ARROW"
-          leftIconCta={ConstantCta.GO_BACK_CTA}
-        />
-      </View>
       <ContentShimmer />
     </View>
   );
@@ -35,15 +28,13 @@ const ContentShimmer = () => {
         highlightColor={Colors.shimmerHighlightColor}
         direction="right"
         angle={100}
-        borderRadius={4}
       >
         <View>
           <View style={styles.shimmerLayout1} />
-          <View style={styles.shimmerLayout2} />
-          <View style={styles.shimmerLayout2} />
-          <View style={styles.shimmerLayout2} />
-          <View style={styles.shimmerLayout2} />
-          <View style={styles.shimmerLayout2} />
+          <View style={styles.rowContainer}>
+            <View style={styles.shimmerLayout2} />
+            <View style={styles.shimmerLayout3} />
+          </View>
         </View>
       </SkeletonPlaceholder>
     </View>
diff --git a/App/Container/Navi-Insurance/screen/compare-plan-screen/shimmer-screen/ComparePlanShimmerScreenStyle.ts b/App/Container/Navi-Insurance/screen/compare-plan-screen/shimmer-screen/ComparePlanShimmerScreenStyle.ts
index 7f789ff6c5..ea50ff89e9 100644
--- a/App/Container/Navi-Insurance/screen/compare-plan-screen/shimmer-screen/ComparePlanShimmerScreenStyle.ts
+++ b/App/Container/Navi-Insurance/screen/compare-plan-screen/shimmer-screen/ComparePlanShimmerScreenStyle.ts
@@ -1,67 +1,37 @@
 import { StyleSheet } from "react-native";
 
 const styles = StyleSheet.create({
-  shimmerHeader: {
-    alignItems: "stretch",
-    position: "absolute",
-    zIndex: 1,
-  },
-  shimmerContent: {},
-  shimmerFooterContainer: {
-    height: 100,
-    zIndex: 2,
-    position: "absolute",
-    bottom: 0,
-  },
   container: {
     flex: 1,
     flexDirection: "column",
     justifyContent: "center",
   },
-  header: {
-    position: "absolute",
-    top: 0,
-    width: "100%",
-    backgroundColor: "white",
-  },
   content: {
-    marginTop: 88,
+    marginTop: 20,
     flexGrow: 1,
     marginHorizontal: 16,
   },
-  footer: {
-    borderTopStartRadius: 16,
-    borderTopEndRadius: 16,
-    shadowColor: "black",
-    shadowOpacity: 0.26,
-    shadowOffset: { width: 0, height: 2 },
-    shadowRadius: 10,
-    elevation: 3,
-    backgroundColor: "white",
-  },
   shimmerLayout1: {
-    marginTop: 12,
-    alignSelf : "flex-end",
-    width: "50%",
-    height: 94,
-    borderRadius: 4
+    alignItems: "center",
+    height: 190,
+  },
+  rowContainer: {
+    flexDirection: "row",
+    gap: 12,
   },
   shimmerLayout2: {
-    marginTop: 24,
-    height: 94,
+    marginTop: 20,
+    height: 546,
+    flex: 0.4,
     alignItems: "center",
-    borderRadius: 4,
     flexShrink: 0,
     gap: 10.5,
   },
-
-  shimmerHeaderLayout: {
-    marginHorizontal: 16,
-    marginTop: 16,
-    marginBottom: 24,
-    height: 49,
+  shimmerLayout3: {
+    marginTop: 20,
+    height: 546,
+    flex: 0.6,
     alignItems: "center",
-    borderRadius: 4,
     flexShrink: 0,
     gap: 10.5,
   },
diff --git a/App/Container/Navi-Insurance/screen/compare-plan-screen/types.ts b/App/Container/Navi-Insurance/screen/compare-plan-screen/types.ts
new file mode 100644
index 0000000000..a7ce5e22ba
--- /dev/null
+++ b/App/Container/Navi-Insurance/screen/compare-plan-screen/types.ts
@@ -0,0 +1,21 @@
+import { AnalyticsEventNameConstants } from "../../../../common/constants";
+import { AnalyticsEvent, CtaData } from "../../../../common/interface";
+import { BaseScreenProps } from "../../../../common/interface/BaseScreenProps";
+import { ScreenState } from "../../../../common/screen/BaseScreen";
+
+export interface ComparePlansCtaData extends CtaData {
+  data?: ComparePlanScreenRequest;
+}
+
+export interface ComparePlansScreenProps extends BaseScreenProps {
+  ctaData: ComparePlansCtaData;
+}
+
+export const screenEvents: Partial<Record<ScreenState, AnalyticsEvent>> = {
+  [ScreenState.LOADED]: {
+    name: AnalyticsEventNameConstants.HI_RN_COMPARE_PLAN_PAGE_INIT,
+  },
+  [ScreenState.ERROR]: {
+    name: AnalyticsEventNameConstants.HI_RN_COMPARE_PLAN_PAGE_ERROR_VIEW,
+  },
+};
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
index 29d5a2bb84..7c52a8f0d2 100644
--- a/App/Container/Navi-Insurance/screen/market-benefit-compare-screen/MarketBenefitCompareScreen.tsx
+++ b/App/Container/Navi-Insurance/screen/market-benefit-compare-screen/MarketBenefitCompareScreen.tsx
@@ -5,7 +5,11 @@ import Animated, {
   useAnimatedStyle,
   useSharedValue,
 } from "react-native-reanimated";
-import BaseWidget from "../../../../../components/widgets/BaseWidget";
+import {
+  CommonContentWidgets,
+  CommonFooter,
+  CommonHeader,
+} from "../../../../../components/reusable";
 import {
   BaseActionTypes,
   GenericActionPayload,
@@ -17,14 +21,14 @@ import {
 } from "../../../../common/constants";
 import { sendAsAnalyticsEvent } from "../../../../common/hooks/useAnalyticsEvent";
 import { AnalyticsEvent, CtaData } from "../../../../common/interface";
-import { Widget } from "../../../../common/interface/widgets/Widget";
 import { ScreenData } from "../../../../common/interface/widgets/screenData/ScreenData";
 import { ScreenState } from "../../../../common/screen/BaseScreen";
 import { ScreenActionTypes } from "../../../../common/screen/ScreenActionTypes";
 import { globalHandleClick } from "../../../../common/utilities/NavigationUtil";
-import GenericShimmerScreen from "../generic-shimmer-screen/GenericShimmerScreen";
+import ComparePlanShimmerScreen from "../compare-plan-screen/shimmer-screen/ComparePlanShimmerScreen";
 import QuoteOfferErrorScreen from "../quote-offer-screen/error-screen/QuoteOfferErrorScreen";
 import styles from "./MarketBenefitCompareScreenStyles";
+import { commonStyles } from "../../Styles";
 const MarketBenefitCompareScreen = ({
   ctaData,
   screenData,
@@ -65,41 +69,6 @@ const MarketBenefitCompareScreen = ({
     };
   });
 
-  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:
@@ -120,7 +89,7 @@ const MarketBenefitCompareScreen = ({
   }, [screenData?.screenState]);
 
   if (screenData?.screenState === ScreenState.LOADING) {
-    return <GenericShimmerScreen handleClick={handleClick} />;
+    return <ComparePlanShimmerScreen handleClick={handleClick} />;
   }
 
   if (screenData?.screenState === ScreenState.ERROR) {
@@ -138,42 +107,33 @@ const MarketBenefitCompareScreen = ({
   }
   return (
     <View style={[styles.container, screenData?.screenStyle]}>
-      <Header />
+      <CommonHeader
+        screenData={screenData}
+        handleActions={handleActions}
+        handleClick={handleClick}
+        style={[styles.header, headerStyle]}
+      />
       <Animated.ScrollView
         showsVerticalScrollIndicator={false}
         contentContainerStyle={styles.content}
         nestedScrollEnabled={true}
         onScroll={onScroll}
+        overScrollMode={"never"}
       >
-        <ContentWidgets />
+        <CommonContentWidgets
+          screenData={screenData}
+          handleActions={handleActions}
+          handleClick={handleClick}
+        />
+        <View style={commonStyles.height108}></View>
       </Animated.ScrollView>
-      <Footer />
+      <CommonFooter
+        screenData={screenData}
+        handleActions={handleActions}
+        handleClick={handleClick}
+      />
     </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/quote-offer-screen/QuoteOfferScreen.tsx b/App/Container/Navi-Insurance/screen/quote-offer-screen/QuoteOfferScreen.tsx
index 7786fc5e4d..514a2e440d 100644
--- a/App/Container/Navi-Insurance/screen/quote-offer-screen/QuoteOfferScreen.tsx
+++ b/App/Container/Navi-Insurance/screen/quote-offer-screen/QuoteOfferScreen.tsx
@@ -23,17 +23,16 @@ import {
 } from "../../../../common/actions/GenericAction";
 import {
   ADVERSE,
+  AnalyticsEventNameConstants,
   ConstantCta,
-  HOME,
-  QUOTE_OFFER_SCREEN,
-  ScreenProperties,
-} from "../../../../common/constants";
-import { AnalyticsEventNameConstants } from "../../../../common/constants/AnalyticsEventsConstant";
-import { NativeEventNameConstants } from "../../../../common/constants/EventNameConstants";
-import {
+  FabTextStyleProperties,
   HEADER_LOTTIE_TITLE_HEIGHT,
   HEADER_LOTTIE_WIDGET_HEIGHT,
-} from "../../../../common/constants/NumericalConstants";
+  HOME,
+  INITIAL_Y_VALUE,
+  NativeEventNameConstants,
+  QUOTE_OFFER_SCREEN,
+} from "../../../../common/constants";
 import { sendAsAnalyticsEvent } from "../../../../common/hooks/useAnalyticsEvent";
 import { AnalyticsEvent, CtaData, CtaType } from "../../../../common/interface";
 import { Widget } from "../../../../common/interface/widgets/Widget";
@@ -43,6 +42,8 @@ import { ScreenState } from "../../../../common/screen/BaseScreen";
 import { ScreenActionTypes } from "../../../../common/screen/ScreenActionTypes";
 import { extractCtaParameters } from "../../../../common/utilities/CtaParamsUtils";
 import { globalHandleClick } from "../../../../common/utilities/NavigationUtil";
+import { extractScreenProperties } from "../../../../common/utilities/ScreenPropertiesUtils";
+import { commonHeaderShadowStyle } from "../../Styles";
 import styles from "./QuoteOfferScreenStyle";
 import QuoteOfferErrorScreen from "./error-screen/QuoteOfferErrorScreen";
 import QuoteOfferShimmerScreen from "./shimmer-screen/QuoteOfferShimmerScreen";
@@ -59,45 +60,46 @@ const QuoteOfferScreen = ({
   const y = useSharedValue(0);
   const lastScrollPosition = useSharedValue(0);
   const navigation = useNavigation();
+  const nativeEventListener = new NativeEventEmitter();
+  const derivedY = useDerivedValue(() => y.value);
+  let reloadPageEventListener = {} as EmitterSubscription;
+  const animationConfig = {
+    duration: FabTextStyleProperties.ANIMATION_DURATION,
+  };
 
+  const headerShadowStyle = commonHeaderShadowStyle(derivedY);
   const onScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
     lastScrollPosition.value = y.value;
     y.value = event.nativeEvent.contentOffset.y;
   };
 
-  const derivedY = useDerivedValue(() => {
-    return y.value;
-  });
-
   const fabTextStyle = useAnimatedStyle(() => {
+    const isScrolled = derivedY.value > INITIAL_Y_VALUE;
     return {
       maxWidth: withTiming(
-        derivedY.value < lastScrollPosition.value || derivedY.value <= 0
-          ? 120
-          : 0,
-        { duration: 100 },
+        isScrolled
+          ? FabTextStyleProperties.INITIAL_MAX_WIDTH
+          : FabTextStyleProperties.COLLAPSED_MAX_WIDTH,
+        animationConfig,
       ),
       paddingRight: withTiming(
-        derivedY.value < lastScrollPosition.value || derivedY.value <= 0
-          ? 16
-          : 0,
-        { duration: 100 },
+        isScrolled
+          ? FabTextStyleProperties.INITIAL_PADDING_RIGHT
+          : FabTextStyleProperties.COLLAPSED_PADDING_RIGHT,
+        animationConfig,
       ),
       opacity: withTiming(
-        derivedY.value < lastScrollPosition.value || derivedY.value <= 0
-          ? 1
-          : 0,
-        { duration: 100 },
+        isScrolled
+          ? FabTextStyleProperties.INITIAL_OPACITY
+          : FabTextStyleProperties.COLLAPSED_OPACITY,
+        animationConfig,
       ),
     };
   });
 
-  let animateHeader = true;
-
-  screenData?.screenMetaData?.screenProperties?.forEach(item => {
-    if (item.key === ScreenProperties.ANIMATE_HEADER)
-      animateHeader = !!item?.value;
-  });
+  const { animateHeader, showHeaderShadow } = extractScreenProperties(
+    screenData?.screenMetaData?.screenProperties,
+  );
 
   const headerBgStyle = useAnimatedStyle(() => {
     if (!animateHeader) return { backgroundColor: Colors.white };
@@ -114,9 +116,6 @@ const QuoteOfferScreen = ({
   const { applicationId, preQuoteId, quoteId, source } =
     extractCtaParameters(ctaData);
 
-  const nativeEventListener = new NativeEventEmitter();
-  let reloadPageEventListener = {} as EmitterSubscription;
-
   const handleClick = (cta?: CtaData) => {
     if (!!cta && cta.url === HOME && source === ADVERSE) {
       cta.type = CtaType.GO_BACK;
@@ -238,7 +237,14 @@ const QuoteOfferScreen = ({
 
   return (
     <View style={[styles.container, screenData?.screenStyle]}>
-      <Animated.View style={[styles.header, headerBgStyle]}>
+      <Animated.View
+        style={[
+          styles.header,
+          showHeaderShadow
+            ? [headerShadowStyle, styles.headerBackgroundColor]
+            : headerBgStyle,
+        ]}
+      >
         {getWidgetViews(
           screenData?.screenWidgets?.headerWidgets,
           handleActions,
@@ -253,6 +259,7 @@ const QuoteOfferScreen = ({
         onScroll={onScroll}
         nestedScrollEnabled={true}
         pointerEvents={getPointerEvents()}
+        overScrollMode={"never"}
       >
         <View pointerEvents={getPointerEvents()}>
           {getWidgetViews(
diff --git a/App/Container/Navi-Insurance/screen/quote-offer-screen/QuoteOfferScreenStyle.ts b/App/Container/Navi-Insurance/screen/quote-offer-screen/QuoteOfferScreenStyle.ts
index efec79eb3e..2ffb717c7f 100644
--- a/App/Container/Navi-Insurance/screen/quote-offer-screen/QuoteOfferScreenStyle.ts
+++ b/App/Container/Navi-Insurance/screen/quote-offer-screen/QuoteOfferScreenStyle.ts
@@ -17,6 +17,9 @@ const styles = StyleSheet.create({
   footer: {
     alignItems: "stretch",
   },
+  headerBackgroundColor: {
+    backgroundColor: "#FFFFFF",
+  },
 });
 
 export default styles;
diff --git a/App/Container/Navi-Insurance/screen/waiting-period-screen/WaitingPeriodScreen.tsx b/App/Container/Navi-Insurance/screen/waiting-period-screen/WaitingPeriodScreen.tsx
index d9fe5be462..e6142ca815 100644
--- a/App/Container/Navi-Insurance/screen/waiting-period-screen/WaitingPeriodScreen.tsx
+++ b/App/Container/Navi-Insurance/screen/waiting-period-screen/WaitingPeriodScreen.tsx
@@ -2,42 +2,43 @@ import { useNavigation } from "@react-navigation/native";
 import React, { useEffect } from "react";
 import { NativeScrollEvent, NativeSyntheticEvent, View } from "react-native";
 import Animated, {
-  useAnimatedStyle,
+  useDerivedValue,
   useSharedValue,
 } from "react-native-reanimated";
-import BaseWidget from "../../../../../components/widgets/BaseWidget";
 import {
-  BaseActionTypes,
-  GenericActionPayload,
-} from "../../../../common/actions/GenericAction";
+  CommonContentWidgets,
+  CommonFooter,
+  CommonHeader,
+} from "../../../../../components/reusable";
+import { BaseActionTypes } from "../../../../common/actions/GenericAction";
 import {
-  AnalyticsEventNameConstants,
   ConstantCta,
   INITIAL_Y_VALUE,
   WAITING_PERIOD_SCREEN,
 } from "../../../../common/constants";
-import { sendAsAnalyticsEvent } from "../../../../common/hooks/useAnalyticsEvent";
-import { AnalyticsEvent, CtaData } from "../../../../common/interface";
-import { Widget } from "../../../../common/interface/widgets/Widget";
-import { ScreenData } from "../../../../common/interface/widgets/screenData/ScreenData";
+import { useAnalyticsEvent } from "../../../../common/hooks";
+import { CtaData } from "../../../../common/interface";
+import { BaseScreenProps } from "../../../../common/interface/BaseScreenProps";
 import { ScreenState } from "../../../../common/screen/BaseScreen";
 import { ScreenActionTypes } from "../../../../common/screen/ScreenActionTypes";
 import { globalHandleClick } from "../../../../common/utilities/NavigationUtil";
-import GenericShimmerScreen from "../generic-shimmer-screen/GenericShimmerScreen";
+import { commonHeaderShadowStyle } from "../../Styles";
 import QuoteOfferErrorScreen from "../quote-offer-screen/error-screen/QuoteOfferErrorScreen";
 import styles from "./WaitingPeriodScreenStyles";
+import WaitingPeriodShimmerScreen from "./shimmer-screen/WaitingPeriodShimmerScreen";
+import { screenEvents } from "./types";
 
 const WaitingPeriodScreen = ({
   ctaData,
   screenData,
   handleActions,
-}: {
-  ctaData: CtaData;
-  screenData: ScreenData | null;
-  handleActions: (screenPayload?: GenericActionPayload) => void;
-}) => {
+}: BaseScreenProps) => {
+  const { sendScreenStateAnalyticsEvents } = useAnalyticsEvent();
   const navigation = useNavigation();
   const y = useSharedValue(INITIAL_Y_VALUE);
+  const derivedY = useDerivedValue(() => {
+    return y.value;
+  });
   const onScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
     y.value = event.nativeEvent.contentOffset.y;
   };
@@ -58,71 +59,12 @@ const WaitingPeriodScreen = ({
     });
   }, [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 headerStyle = commonHeaderShadowStyle(derivedY);
 
-  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_WAITING_PERIOD_PAGE_INIT,
-        };
-        sendAsAnalyticsEvent(initEvent);
-        break;
-      case ScreenState.ERROR:
-        const errorEvent: AnalyticsEvent = {
-          name: AnalyticsEventNameConstants.HI_RN_WAITING_PERIOD_PAGE_ERROR_VIEW,
-        };
-        sendAsAnalyticsEvent(errorEvent);
-        break;
-      default:
-        break;
-    }
-  }, [screenData?.screenState]);
+  sendScreenStateAnalyticsEvents(screenEvents, screenData?.screenState);
 
   if (screenData?.screenState === ScreenState.LOADING) {
-    return <GenericShimmerScreen handleClick={handleClick} />;
+    return <WaitingPeriodShimmerScreen handleClick={handleClick} />;
   }
 
   if (screenData?.screenState === ScreenState.ERROR) {
@@ -140,42 +82,32 @@ const WaitingPeriodScreen = ({
   }
   return (
     <View style={[styles.container, screenData?.screenStyle]}>
-      <Header />
+      <CommonHeader
+        screenData={screenData}
+        handleActions={handleActions}
+        handleClick={handleClick}
+        style={[styles.header, headerStyle]}
+      />
       <Animated.ScrollView
         showsVerticalScrollIndicator={false}
         contentContainerStyle={styles.content}
         nestedScrollEnabled={true}
         onScroll={onScroll}
+        overScrollMode={"never"}
       >
-        <ContentWidgets />
+        <CommonContentWidgets
+          screenData={screenData}
+          handleActions={handleActions}
+          handleClick={handleClick}
+        />
       </Animated.ScrollView>
-      <Footer />
+      <CommonFooter
+        screenData={screenData}
+        handleActions={handleActions}
+        handleClick={handleClick}
+      />
     </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 WaitingPeriodScreen;
diff --git a/App/Container/Navi-Insurance/screen/waiting-period-screen/shimmer-screen/WaitingPeriodShimmerScreen.tsx b/App/Container/Navi-Insurance/screen/waiting-period-screen/shimmer-screen/WaitingPeriodShimmerScreen.tsx
new file mode 100644
index 0000000000..3cc2903bf3
--- /dev/null
+++ b/App/Container/Navi-Insurance/screen/waiting-period-screen/shimmer-screen/WaitingPeriodShimmerScreen.tsx
@@ -0,0 +1,40 @@
+import { View } from "react-native";
+import SkeletonPlaceholder from "react-native-skeleton-placeholder";
+import Colors from "../../../../../../assets/colors/colors";
+import { CtaData } from "../../../../../common/interface";
+import styles from "./WaitingPeriodShimmerScreenStyle";
+
+const WaitingPeriodShimmerScreen = ({
+  handleClick,
+}: {
+  handleClick?: (ctaData: CtaData) => void;
+}) => {
+  return (
+    <View style={styles.container}>
+      <ContentShimmer />
+    </View>
+  );
+};
+
+export default WaitingPeriodShimmerScreen;
+
+const ContentShimmer = () => {
+  return (
+    <View style={styles.content}>
+      <SkeletonPlaceholder
+        backgroundColor={Colors.shimmerBgColor}
+        highlightColor={Colors.shimmerHighlightColor}
+        direction="right"
+        angle={100}
+      >
+        <View>
+          <View style={styles.shimmerLayout1} />
+          <View style={styles.shimmerLayout2} />
+          <View style={styles.shimmerLayout2} />
+          <View style={styles.shimmerLayout2} />
+          <View style={styles.shimmerLayout2} />
+        </View>
+      </SkeletonPlaceholder>
+    </View>
+  );
+};
diff --git a/App/Container/Navi-Insurance/screen/waiting-period-screen/shimmer-screen/WaitingPeriodShimmerScreenStyle.ts b/App/Container/Navi-Insurance/screen/waiting-period-screen/shimmer-screen/WaitingPeriodShimmerScreenStyle.ts
new file mode 100644
index 0000000000..f20a244e9b
--- /dev/null
+++ b/App/Container/Navi-Insurance/screen/waiting-period-screen/shimmer-screen/WaitingPeriodShimmerScreenStyle.ts
@@ -0,0 +1,27 @@
+import { StyleSheet } from "react-native";
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexDirection: "column",
+    justifyContent: "center",
+  },
+  content: {
+    marginTop: 20,
+    flexGrow: 1,
+    marginHorizontal: 16,
+  },
+  shimmerLayout1: {
+    alignItems: "center",
+    height: 190,
+  },
+  shimmerLayout2: {
+    marginTop: 24,
+    height: 106,
+    alignItems: "center",
+    flexShrink: 0,
+    gap: 10.5,
+  },
+});
+
+export default styles;
diff --git a/App/Container/Navi-Insurance/screen/waiting-period-screen/types.ts b/App/Container/Navi-Insurance/screen/waiting-period-screen/types.ts
new file mode 100644
index 0000000000..e2c8674142
--- /dev/null
+++ b/App/Container/Navi-Insurance/screen/waiting-period-screen/types.ts
@@ -0,0 +1,12 @@
+import { AnalyticsEventNameConstants } from "../../../../common/constants";
+import { AnalyticsEvent } from "../../../../common/interface";
+import { ScreenState } from "../../../../common/screen/BaseScreen";
+
+export const screenEvents: Partial<Record<ScreenState, AnalyticsEvent>> = {
+  [ScreenState.LOADED]: {
+    name: AnalyticsEventNameConstants.HI_RN_WAITING_PERIOD_PAGE_INIT,
+  },
+  [ScreenState.ERROR]: {
+    name: AnalyticsEventNameConstants.HI_RN_WAITING_PERIOD_PAGE_ERROR_VIEW,
+  },
+};
diff --git a/App/common/constants/AnalyticsEventsConstant.ts b/App/common/constants/AnalyticsEventsConstant.ts
index 0b58f64a77..2a2bc91cf2 100644
--- a/App/common/constants/AnalyticsEventsConstant.ts
+++ b/App/common/constants/AnalyticsEventsConstant.ts
@@ -5,6 +5,8 @@ export const AnalyticsEventNameConstants = {
   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",
+  HI_RN_COMPARE_PLAN_PAGE_INIT: "hi_rn_compare_plan_page_init",
+  HI_RN_COMPARE_PLAN_PAGE_ERROR_VIEW: "hi_rn_compare_plan_page_error_view",
   HI_RN_WAITING_PERIOD_PAGE_INIT: "hi_rn_waiting_period_page_init",
   HI_RN_WAITING_PERIOD_PAGE_ERROR_VIEW: "hi_rn_waiting_period_page_error_view",
   PATCH_QUOTE_V2: "patch_quote_v2",
diff --git a/App/common/constants/NumericalConstants.ts b/App/common/constants/NumericalConstants.ts
index ca1ae8b371..914ce90cc5 100644
--- a/App/common/constants/NumericalConstants.ts
+++ b/App/common/constants/NumericalConstants.ts
@@ -3,3 +3,23 @@ export const HEADER_LOTTIE_TITLE_HEIGHT = 84;
 export const BOTTOMSHEET_ANIMATION_DURATION = 200;
 export const INITIAL_Y_VALUE = 0;
 export const THRESHOLD_Y_BENEFIT = 50;
+export const SCREEN_MID = 0.5;
+
+export enum CommonHeaderShadowStyleProperties {
+  INITIAL_SHADOW_OPACITY = 0,
+  INITIAL_SHADOW_RADIUS = 0,
+  INITIAL_ELEVATION = 0,
+  SHADOW_OPACITY = 1,
+  SHADOW_RADIUS = 8,
+  ELEVATION = 32,
+}
+
+export enum FabTextStyleProperties {
+  INITIAL_MAX_WIDTH = 120,
+  INITIAL_PADDING_RIGHT = 16,
+  INITIAL_OPACITY = 1,
+  COLLAPSED_MAX_WIDTH = 0,
+  COLLAPSED_PADDING_RIGHT = 0,
+  COLLAPSED_OPACITY = 0,
+  ANIMATION_DURATION = 100,
+}
diff --git a/App/common/constants/StringConstant.ts b/App/common/constants/StringConstant.ts
index 8467d94502..4dd7356424 100644
--- a/App/common/constants/StringConstant.ts
+++ b/App/common/constants/StringConstant.ts
@@ -23,6 +23,7 @@ export enum SelectButtonType {
 
 export enum ScreenProperties {
   ANIMATE_HEADER = "ANIMATE_HEADER",
+  SHOW_HEADER_SHADOW = "SHOW_HEADER_SHADOW",
 }
 
 export enum BundleState {
@@ -49,7 +50,7 @@ export const REACT_NATIVE = "rn";
 export const NAVIGATION_ERROR = "Navigation Error";
 export const HOME = "home";
 export const ADVERSE = "adverse";
-
+export const HARDWARE_BACK_PRESS = "hardwareBackPress";
 export enum SeparatorType {
   DASHED = "dashed",
   SOLID = "solid",
diff --git a/App/common/constants/WidgetNameConstants.ts b/App/common/constants/WidgetNameConstants.ts
index ccf0f6ee02..840e64784b 100644
--- a/App/common/constants/WidgetNameConstants.ts
+++ b/App/common/constants/WidgetNameConstants.ts
@@ -24,5 +24,10 @@ export const HERO_SECTION_WIDGET = "HERO_SECTION_WIDGET";
 export const SELECT_CARD_WITH_DETAIL_LIST_WIDGET =
   "SELECT_CARD_WITH_DETAIL_LIST_WIDGET";
 export const LIST_ITEM_WITH_ICON_WIDGET = "LIST_ITEM_WITH_ICON_WIDGET";
+
+export const CARD_WITH_LIST_ITEMS_WIDGET = "CARD_WITH_LIST_ITEMS_WIDGET";
+export const TITLE_WITH_HORIZONTAL_CAROUSEL_LIST_WIDGET =
+  "TITLE_WITH_HORIZONTAL_CAROUSEL_LIST_WIDGET";
+
 export const TITLE_RIGHT_TITLE_WITH_CONTENT_LIST_WIDGET =
   "TITLE_RIGHT_TITLE_WITH_CONTENT_LIST_WIDGET";
diff --git a/App/common/hooks/index.ts b/App/common/hooks/index.ts
new file mode 100644
index 0000000000..01b1260799
--- /dev/null
+++ b/App/common/hooks/index.ts
@@ -0,0 +1 @@
+export { useAnalyticsEvent } from "./useAnalyticsEvent";
diff --git a/App/common/hooks/useAnalyticsEvent.ts b/App/common/hooks/useAnalyticsEvent.ts
index ce09a1aeac..d4715dd21d 100644
--- a/App/common/hooks/useAnalyticsEvent.ts
+++ b/App/common/hooks/useAnalyticsEvent.ts
@@ -1,13 +1,16 @@
+import { useEffect } from "react";
 import { getBundleVersion } from "../../../network/NetworkUtils";
 import { EVENT_PROPERTY_KEYS, REACT_NATIVE } from "../constants";
 import { AnalyticsEvent } from "../interface";
 import { NativeAnalyticsModule } from "../native-module/NativeModules";
+import { ScreenState } from "../screen/BaseScreen";
 
 export const useAnalyticsEvent = () => {
   return {
     sendAsAnalyticsEvent,
     sendAsAppDowntimeEvent,
     sendAsGlobalErrorEvent,
+    sendScreenStateAnalyticsEvents,
   };
 };
 
@@ -87,3 +90,17 @@ export const sendAsGlobalErrorEvent = (event: GlobalErrorData) => {
     isAppDowntimeEvent,
   });
 };
+
+const sendScreenStateAnalyticsEvents = (
+  eventMapping: Partial<Record<ScreenState, AnalyticsEvent>>,
+  screenState?: ScreenState | null,
+) => {
+  useEffect(() => {
+    if (!screenState) return;
+
+    const event = eventMapping[screenState];
+    if (event) {
+      sendAsAnalyticsEvent(event);
+    }
+  }, [screenState, eventMapping]);
+};
diff --git a/App/common/interface/BaseScreenProps.ts b/App/common/interface/BaseScreenProps.ts
index 6c12c438c0..4a3e44c937 100644
--- a/App/common/interface/BaseScreenProps.ts
+++ b/App/common/interface/BaseScreenProps.ts
@@ -1,8 +1,13 @@
 import { CtaData } from ".";
+import { GenericActionPayload } from "../actions/GenericAction";
+import { ScreenData } from "./widgets/screenData/ScreenData";
 
 export interface BaseScreenProps {
-  route: RouteParams;
-  navigation: any;
+  route?: RouteParams;
+  navigation?: any;
+  ctaData: CtaData;
+  screenData: ScreenData | null;
+  handleActions: (screenPayload?: GenericActionPayload) => void;
 }
 
 interface RouteParams {
diff --git a/App/common/interface/components/WidgetComponentData.ts b/App/common/interface/components/WidgetComponentData.ts
new file mode 100644
index 0000000000..d720e61da5
--- /dev/null
+++ b/App/common/interface/components/WidgetComponentData.ts
@@ -0,0 +1,27 @@
+import { StyleProp, ViewStyle } from "react-native";
+import { AnimatedStyle } from "react-native-reanimated";
+import { CtaData } from "..";
+import { GenericActionPayload } from "../../actions/GenericAction";
+import { ScreenState } from "../../screen/BaseScreen";
+import { Widget } from "../widgets/Widget";
+import { ScreenData } from "../widgets/screenData/ScreenData";
+
+export interface WidgetComponentProps {
+  screenData: ScreenData | null;
+  handleActions: (
+    value?: any | undefined | null,
+    screenActionPayload?: GenericActionPayload,
+  ) => void;
+  handleClick?: (cta: CtaData) => void;
+  style?: StyleProp<AnimatedStyle<StyleProp<ViewStyle>>>;
+}
+
+export interface WidgetViewRendererProps {
+  widgetList: Widget[] | undefined;
+  handleActions: (
+    value?: any | undefined | null,
+    screenActionPayload?: GenericActionPayload,
+  ) => void;
+  screenState?: ScreenState | null;
+  handleClick?: (ctaData: CtaData) => void;
+}
diff --git a/App/common/interface/components/index.ts b/App/common/interface/components/index.ts
new file mode 100644
index 0000000000..79627dc38e
--- /dev/null
+++ b/App/common/interface/components/index.ts
@@ -0,0 +1,4 @@
+export type {
+  WidgetComponentProps,
+  WidgetViewRendererProps,
+} from "./WidgetComponentData";
diff --git a/App/common/interface/widgets/screenData/ScreenMetaData.ts b/App/common/interface/widgets/screenData/ScreenMetaData.ts
index 61cab95c58..9bd28fe497 100644
--- a/App/common/interface/widgets/screenData/ScreenMetaData.ts
+++ b/App/common/interface/widgets/screenData/ScreenMetaData.ts
@@ -9,7 +9,7 @@ export interface ScreenMetaData {
   analyticsEvent?: AnalyticsEvent;
 }
 
-type LineItem = {
+export type LineItem = {
   key?: string;
   value?: string | null;
   data?: any | null;
diff --git a/App/common/interface/widgets/widgetData/BenefitScreenHeaderData.ts b/App/common/interface/widgets/widgetData/BenefitScreenHeaderData.ts
index 982a9d47aa..26b0de50f6 100644
--- a/App/common/interface/widgets/widgetData/BenefitScreenHeaderData.ts
+++ b/App/common/interface/widgets/widgetData/BenefitScreenHeaderData.ts
@@ -11,8 +11,7 @@ export interface BenefitScreenHeaderData extends GenericWidgetData {
   leftIcon?: ImageFieldData;
   rightIcon?: ImageFieldData;
   description?: ImageFieldData;
-  defaultGradient?: string[];
-  scrolledGradient?: string[];
+  backgroundColor?: string;
 }
 
 export interface BenefitScreenProps {
diff --git a/App/common/interface/widgets/widgetData/CardWithListItemsWidgetData.ts b/App/common/interface/widgets/widgetData/CardWithListItemsWidgetData.ts
new file mode 100644
index 0000000000..cec2411f4c
--- /dev/null
+++ b/App/common/interface/widgets/widgetData/CardWithListItemsWidgetData.ts
@@ -0,0 +1,41 @@
+import { ViewStyle } from "react-native";
+import { CtaData } from "../..";
+import { GenericActionPayload } from "../../../actions/GenericAction";
+import { ScreenState } from "../../../screen/BaseScreen";
+import { GenericWidgetData } from "../Widget";
+import { ButtonData, ButtonState } from "./FooterWithCardWidgetData";
+import { ImageFieldData, TextFieldData } from "./TitleWidgetData";
+
+export interface CardWithListItemsWidgetData extends GenericWidgetData {
+  cardCta?: CtaData;
+  cardImage?: ImageFieldData;
+  leftTitle?: TextFieldData;
+  titleContainerStyle?: ViewStyle;
+  tagTitle?: TextFieldData;
+  listData?: ListData;
+  leftFooter?: ButtonData;
+  rightFooter?: ButtonData;
+}
+
+export interface ListData {
+  items: TextFieldData[];
+  listStyle?: ViewStyle;
+}
+
+export interface CardWithListItemsWidgetProps {
+  widgetData: CardWithListItemsWidgetData;
+  widgetStyle?: ViewStyle;
+  handleActions?: (
+    value?: any | undefined | null,
+    screenActionPayload?: GenericActionPayload,
+  ) => void;
+  handleClick?: (cta: CtaData) => void;
+  widgetIndex?: number;
+  screenState?: ScreenState | null;
+}
+
+export interface CardFooterCtaButtonProps {
+  buttonState?: ButtonState;
+  buttonData?: ButtonData;
+  handleFooterButtonClick: (buttonData?: ButtonData) => void;
+}
diff --git a/App/common/interface/widgets/widgetData/FooterWithCardWidgetData.ts b/App/common/interface/widgets/widgetData/FooterWithCardWidgetData.ts
index a06659ca6b..63b46c4583 100644
--- a/App/common/interface/widgets/widgetData/FooterWithCardWidgetData.ts
+++ b/App/common/interface/widgets/widgetData/FooterWithCardWidgetData.ts
@@ -16,7 +16,6 @@ export interface FooterWithCardWidgetData extends GenericWidgetData {
   action?: GenericActionPayload;
   buttonAction?: GenericActionPayload;
   secondaryButtonAction?: GenericActionPayload;
-  bottomTitle?: TextFieldData;
   borderRadius?: number;
 }
 
@@ -33,6 +32,7 @@ export interface CardInfo extends GenericWidgetData {
 }
 
 export interface ButtonData extends GenericWidgetData {
+  buttonId?: string;
   title?: TextFieldData;
   state?: ButtonState;
   buttonStyle?: ViewStyle;
diff --git a/App/common/interface/widgets/widgetData/TableWidgetData.ts b/App/common/interface/widgets/widgetData/TableWidgetData.ts
index 5578c6b99a..581148f318 100644
--- a/App/common/interface/widgets/widgetData/TableWidgetData.ts
+++ b/App/common/interface/widgets/widgetData/TableWidgetData.ts
@@ -8,6 +8,7 @@ export interface Column {
   title: TextFieldData;
   subtitle: TextFieldData;
   image?: ImageFieldData;
+  subImage?: ImageFieldData;
   columnStyle?: ViewStyle;
 }
 
diff --git a/App/common/interface/widgets/widgetData/TitleWidgetData.ts b/App/common/interface/widgets/widgetData/TitleWidgetData.ts
index 1e5dec658d..b487fa8c21 100644
--- a/App/common/interface/widgets/widgetData/TitleWidgetData.ts
+++ b/App/common/interface/widgets/widgetData/TitleWidgetData.ts
@@ -12,6 +12,7 @@ export interface TitleWidgetData extends GenericWidgetData {
 }
 
 export interface TextFieldData {
+  id?: string;
   text: string;
   ellipsizeMode?: "head" | "middle" | "tail" | "clip";
   numberOfLines?: number;
diff --git a/App/common/interface/widgets/widgetData/TitleWithHorizontalCarouselListWidgetData.ts b/App/common/interface/widgets/widgetData/TitleWithHorizontalCarouselListWidgetData.ts
new file mode 100644
index 0000000000..b69f44fb91
--- /dev/null
+++ b/App/common/interface/widgets/widgetData/TitleWithHorizontalCarouselListWidgetData.ts
@@ -0,0 +1,42 @@
+import { ViewStyle } from "react-native";
+import { AnalyticsEvent, CtaData } from "../..";
+import { GenericActionPayload } from "../../../actions/GenericAction";
+import { GenericWidgetData } from "../Widget";
+import { TextFieldData } from "./TitleWidgetData";
+
+export interface TitleWithHorizontalCarouselListWidgetData
+  extends GenericWidgetData {
+  title?: TextFieldData;
+  carouselListData?: CarouselListData[];
+  selectedItem?: number | string;
+  defaultItemContainerStyles?: ViewStyle;
+  selectedItemContainerStyles?: ViewStyle;
+  widgetMetaData?: WidgetMetaData;
+  containerStyles?: ViewStyle;
+}
+
+export interface CarouselListData {
+  id: string;
+  selectedState: StateData;
+  unSelectedState: StateData;
+  dependentWidgets: any;
+}
+
+export interface WidgetMetaData {
+  onValueChangeAction?: GenericActionPayload;
+  analyticsEventProperties?: AnalyticsEvent;
+}
+
+export interface StateData {
+  title: TextFieldData;
+}
+export interface TitleWithHorizontalCarouselListWidgetProps {
+  widgetData: TitleWithHorizontalCarouselListWidgetData;
+  widgetStyle?: ViewStyle;
+  handleActions: (
+    value?: any | undefined | null,
+    screenActionPayload?: GenericActionPayload,
+  ) => void;
+  handleClick?: (cta: CtaData) => void;
+  widgetIndex: number;
+}
diff --git a/App/common/interface/widgets/widgetData/TitleWithListWidgetData.ts b/App/common/interface/widgets/widgetData/TitleWithListWidgetData.ts
index b7634b9142..65598cba8f 100644
--- a/App/common/interface/widgets/widgetData/TitleWithListWidgetData.ts
+++ b/App/common/interface/widgets/widgetData/TitleWithListWidgetData.ts
@@ -4,7 +4,7 @@ import { GenericActionPayload } from "../../../actions/GenericAction";
 import { ItemSeparatorData } from "../../components/ItemSeparatorData";
 import { TooltipData } from "../../components/TooltipData";
 import { GenericWidgetData } from "../Widget";
-import { TextFieldData } from "./TitleWidgetData";
+import { ImageFieldData, TextFieldData } from "./TitleWidgetData";
 
 export interface TitleWithListWidgetData extends GenericWidgetData {
   title?: TextFieldData;
@@ -25,4 +25,17 @@ export interface ListItem extends GenericWidgetData {
   onViewEvent?: AnalyticsEvent;
   actions?: GenericActionPayload;
   cta?: CtaData;
+  overlappedImageData?: ImageFieldData[];
+  rightIcon?: ImageFieldData;
+}
+
+export interface TitleWithListWidgetDataProps {
+  widgetData: TitleWithListWidgetData;
+  widgetStyle: ViewStyle;
+  handleActions: (
+    value: any | undefined | null,
+    actionPayloadList: GenericActionPayload | undefined,
+  ) => void;
+  handleClick?: (cta: CtaData) => void;
+  widgetIndex?: number;
 }
diff --git a/App/common/interface/widgets/widgetData/index.ts b/App/common/interface/widgets/widgetData/index.ts
index d25322e496..0523cc718b 100644
--- a/App/common/interface/widgets/widgetData/index.ts
+++ b/App/common/interface/widgets/widgetData/index.ts
@@ -19,6 +19,12 @@ export type {
   TableWidgetProps,
 } from "./TableWidgetData";
 
+export type {
+  CardFooterCtaButtonProps,
+  CardWithListItemsWidgetData,
+  CardWithListItemsWidgetProps,
+} from "./CardWithListItemsWidgetData";
+
 export type {
   TitleRightTitleWithContentListWidgetData,
   TitleRightTitleWithContentListWidgetDataItem,
@@ -28,10 +34,40 @@ export type {
 
 export type { HeroSectionWidgetData } from "./HeroSectionWidgetData";
 
-export type { TextFieldData } from "./TitleWidgetData";
-
 export type { ListItemWidgetProps } from "./ListItemWidgetData";
 
 export type { TitleWithAssetsWidgetData } from "./TitleWithAssetsWidgetData";
 
 export type { BenefitScreenHeaderData } from "./BenefitScreenHeaderData";
+
+export type {
+  CarouselListData,
+  StateData,
+  TitleWithHorizontalCarouselListWidgetData,
+  TitleWithHorizontalCarouselListWidgetProps,
+  WidgetMetaData,
+} from "./TitleWithHorizontalCarouselListWidgetData";
+
+export type {
+  ButtonData,
+  CardInfo,
+  FinalPatchCallRequestBody,
+  FooterWithCardWidgetData,
+} from "./FooterWithCardWidgetData";
+
+export { ButtonState } from "./FooterWithCardWidgetData";
+
+export type {
+  ImageFieldData,
+  LottieFieldData,
+  SubstringStyle,
+  TextDrawableData,
+  TextFieldData,
+  TitleWidgetData,
+} from "./TitleWidgetData";
+
+export type {
+  ListItem,
+  TitleWithListWidgetData,
+  TitleWithListWidgetDataProps,
+} from "./TitleWithListWidgetData";
diff --git a/App/common/modals/modalViewResolver.tsx b/App/common/modals/modalViewResolver.tsx
index 0bad56d413..2dfd94d69d 100644
--- a/App/common/modals/modalViewResolver.tsx
+++ b/App/common/modals/modalViewResolver.tsx
@@ -1,8 +1,16 @@
 import React from "react";
 import { View, ViewStyle } from "react-native";
-import TitleWithFeedbackPillBottomSheet from "../../../components/bottomsheet/title-with-feed-back-bottom-sheet/TitleWithFeedBackBottomSheet";
-import PremiumDetailsBottomSheet from "../../../components/bottomsheet/title-with-list-bottom-sheet/TitleWithListBottomSheet";
-import TitleWithStepsBottomSheet from "../../../components/bottomsheet/title-with-steps-bottom-sheet/TitleWithStepsBottomSheet";
+import {
+  MemberDetailBottomSheet,
+  PolicyAmountBottomSheet,
+  PremiumDetailsBottomSheet,
+  TitleSubtitleWithDropdownBottomSheet,
+  TitleWithFeedbackPillBottomSheet,
+  TitleWithLeftRightButtonsBottomSheet,
+  TitleWithStepsBottomSheet,
+  TopSectionExpandableBottomSheet,
+} from "../../../components/bottomsheet";
+import { GenericActionPayload } from "../actions/GenericAction";
 import {
   MEMBER_DETAILS_BOTTOM_SHEET,
   POLICY_AMOUNT_BOTTOM_SHEET,
@@ -12,16 +20,10 @@ import {
   TITLE_WITH_LEFT_RIGHT_BUTTONS_BOTTOM_SHEET,
   TITLE_WITH_STEPS_BOTTOM_SHEET,
   TOP_SECTION_WITH_EXPANDABLE_CONTENT_BOTTOM_SHEET,
-} from "../constants/ModalNameConstants";
+} from "../constants";
 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";
-import TitleWithLeftRightButtonsBottomSheet from "../../../components/bottomsheet/title-with-left-right-buttons-bottom-sheet/TitleWithLeftRightButtonsBottomSheet";
-import TopSectionExpandableBottomSheet from "../../../components/bottomsheet/top-section-expandable-bottom-sheet/TopSectionExpandableBottomSheet";
 
 export const GetModalView = {
   getModal: (
diff --git a/App/common/navigator/RnAppCreator.tsx b/App/common/navigator/RnAppCreator.tsx
index 5618d32b18..a3fd79c25e 100644
--- a/App/common/navigator/RnAppCreator.tsx
+++ b/App/common/navigator/RnAppCreator.tsx
@@ -3,8 +3,14 @@ import { LogBox, StatusBar } from "react-native";
 import { ThemeProvider } from "../../../components/ThemeContext";
 import { BASE_SCREEN } from "../constants/ScreenNameConstants";
 import { CtaData } from "../interface";
-import { createNavigationContainerRef, NavigationContainer } from "@react-navigation/native";
-import { createStackNavigator } from "@react-navigation/stack";
+import {
+  createNavigationContainerRef,
+  NavigationContainer,
+} from "@react-navigation/native";
+import {
+  CardStyleInterpolators,
+  createStackNavigator,
+} from "@react-navigation/stack";
 import { Provider } from "react-redux";
 import { PersistGate } from "redux-persist/integration/react";
 import Colors from "../../../assets/colors/colors";
@@ -25,7 +31,10 @@ export const RnApp = {
         <PersistGate loading={null} persistor={persistor}>
           <ThemeProvider>
             <NavigationContainer ref={navigationRef}>
-            <StatusBar backgroundColor={Colors.white} barStyle="dark-content" />
+              <StatusBar
+                backgroundColor={Colors.white}
+                barStyle="dark-content"
+              />
               {getScreenStack(ctaData)}
             </NavigationContainer>
           </ThemeProvider>
@@ -42,6 +51,7 @@ function getScreenStack(ctaData: CtaData) {
       screenOptions={{
         headerShown: false,
         gestureEnabled: false,
+        cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
       }}
     >
       <Stack.Screen
diff --git a/App/common/utilities/ScreenPropertiesUtils.ts b/App/common/utilities/ScreenPropertiesUtils.ts
new file mode 100644
index 0000000000..0f84843136
--- /dev/null
+++ b/App/common/utilities/ScreenPropertiesUtils.ts
@@ -0,0 +1,26 @@
+import { ScreenProperties } from "../constants";
+import { LineItem } from "../interface/widgets/screenData/ScreenMetaData";
+
+export const extractScreenProperties = (
+  screenProperties: Array<LineItem> | undefined,
+) => {
+  let animateHeader: boolean = true;
+  let showHeaderShadow: boolean = false;
+  screenProperties?.forEach(item => {
+    switch (item.key) {
+      case ScreenProperties.ANIMATE_HEADER:
+        animateHeader = !!item?.value;
+        break;
+      case ScreenProperties.SHOW_HEADER_SHADOW:
+        showHeaderShadow = !!item?.value;
+        break;
+      default:
+        break;
+    }
+  });
+
+  return {
+    animateHeader,
+    showHeaderShadow,
+  };
+};
diff --git a/App/common/utilities/ValidateColors.ts b/App/common/utilities/ValidateColors.ts
index 338556f76a..c84fe806be 100644
--- a/App/common/utilities/ValidateColors.ts
+++ b/App/common/utilities/ValidateColors.ts
@@ -1,9 +1,9 @@
 export const isValidHexColor = (color: string) =>
-  /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(color);
+  /^#([A-Fa-f0-9]{8}|[A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(color);
 
 export const isValidHexColors = (
   colorArray: string[] | undefined,
-  defaultColorsArray?: string[]
+  defaultColorsArray?: string[],
 ) => {
   if (colorArray && Array.isArray(colorArray) && colorArray.length > 0) {
     const isValidColors = colorArray.every(isValidHexColor);
@@ -11,5 +11,5 @@ export const isValidHexColors = (
       return colorArray;
     }
   }
-  return defaultColorsArray || ["#FFFFFF","#FFFFFF"];
+  return defaultColorsArray || ["#FFFFFF", "#FFFFFF"];
 };
diff --git a/App/common/widgets/widgetResolver.tsx b/App/common/widgets/widgetResolver.tsx
index 468b0a51cf..526dc58f75 100644
--- a/App/common/widgets/widgetResolver.tsx
+++ b/App/common/widgets/widgetResolver.tsx
@@ -1,6 +1,7 @@
 import { View, ViewStyle } from "react-native";
 import {
   CardWithIconWidget,
+  CardWithListItemsWidget,
   ComparisonWidget,
   FAB,
   FooterWithCardWidget,
@@ -20,11 +21,13 @@ import {
   TitleWithAssetBackgroundWidget,
   TitleWithAssetsWidget,
   TitleWithColumnWidget,
+  TitleWithHorizontalCarouselListWidget,
   TitleWithListWidget,
 } from "../../../components/widgets";
 import { GenericActionPayload } from "../actions/GenericAction";
 import {
   CARD_WITH_ICON_WIDGET,
+  CARD_WITH_LIST_ITEMS_WIDGET,
   COMPARISON_WIDGET,
   FAB_REQUEST_TO_CALLBACK,
   FOOTER_WITH_CARD_WIDGET,
@@ -45,6 +48,7 @@ import {
   TITLE_WITH_ASSET_BACKGROUND_WIDGET,
   TITLE_WITH_COLUMN_WIDGET,
   TITLE_WITH_LIST_WIDGET,
+  TITLE_WITH_HORIZONTAL_CAROUSEL_LIST_WIDGET,
 } from "../constants";
 import { CtaData } from "../interface";
 import { GenericWidgetData, Widget } from "../interface/widgets/Widget";
@@ -62,8 +66,9 @@ export const GetWidgetView = {
     handleClick?: (ctaData: CtaData) => void,
     screenState?: ScreenState | null,
   ): JSX.Element => {
-    const { widgetName, widgetData, widgetStyle } = widget;
+    const { widgetName, widgetData, widgetStyle, widgetId } = widget;
     return resolveWidgetView(
+      widgetId,
       widgetName,
       widgetData,
       widgetStyle,
@@ -75,6 +80,7 @@ export const GetWidgetView = {
   },
 };
 function resolveWidgetView(
+  widgetId: string,
   widgetName: string,
   widgetData: GenericWidgetData,
   widgetStyle: ViewStyle,
@@ -299,6 +305,32 @@ function resolveWidgetView(
           handleClick={handleClick}
         />
       );
+
+    case CARD_WITH_LIST_ITEMS_WIDGET:
+      return (
+        <CardWithListItemsWidget
+          widgetData={widgetData}
+          widgetStyle={widgetStyle}
+          handleActions={handleActions}
+          widgetIndex={widgetIndex}
+          key={widgetId + widgetIndex}
+          handleClick={handleClick}
+          screenState={screenState}
+        />
+      );
+
+    case TITLE_WITH_HORIZONTAL_CAROUSEL_LIST_WIDGET:
+      return (
+        <TitleWithHorizontalCarouselListWidget
+          widgetData={widgetData}
+          widgetStyle={widgetStyle}
+          handleActions={handleActions}
+          handleClick={handleClick}
+          widgetIndex={widgetIndex}
+          key={widgetIndex}
+        />
+      );
+
     case TITLE_RIGHT_TITLE_WITH_CONTENT_LIST_WIDGET:
       return (
         <TitleRightTitleWithContentListWidget
diff --git a/android/app/src/main/java/com/naviapp/home/dashboard/ui/compose/insuranceTab/InsuranceScreen.kt b/android/app/src/main/java/com/naviapp/home/dashboard/ui/compose/insuranceTab/InsuranceScreen.kt
index 44b3a41889..9f93538326 100644
--- a/android/app/src/main/java/com/naviapp/home/dashboard/ui/compose/insuranceTab/InsuranceScreen.kt
+++ b/android/app/src/main/java/com/naviapp/home/dashboard/ui/compose/insuranceTab/InsuranceScreen.kt
@@ -5,10 +5,13 @@
  *
  */
 
+import android.app.Activity
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.hilt.navigation.compose.hiltViewModel
 import com.navi.base.model.NaviClickAction
+import com.navi.common.utils.setStatusBarColorInt
+import com.navi.design.utils.parseColorSafe
 import com.navi.naviwidgets.callbacks.WidgetCallback
 import com.naviapp.common.tab.InsuranceTabViewModel
 import com.naviapp.home.compose.activity.HomePageActivity
@@ -28,6 +31,11 @@ fun InsuranceTabScreen(activity: HomePageActivity, modifier: Modifier = Modifier
     RenderUiTronDataSecondary(
         modifier = modifier,
         viewModel = viewModel,
-        widgetCallback = widgetCallback
+        widgetCallback = widgetCallback,
+        toggleStatusBarColor = { color -> toggleStatusBarColor(activity, color) }
     )
 }
+
+private fun toggleStatusBarColor(activity: Activity, color: String) {
+    activity.setStatusBarColorInt(color.parseColorSafe())
+}
diff --git a/android/app/src/main/java/com/naviapp/home/dashboard/ui/compose/insuranceTab/InsuranceTabComposables.kt b/android/app/src/main/java/com/naviapp/home/dashboard/ui/compose/insuranceTab/InsuranceTabComposables.kt
index 5c0250be3b..2dcd4f8b32 100644
--- a/android/app/src/main/java/com/naviapp/home/dashboard/ui/compose/insuranceTab/InsuranceTabComposables.kt
+++ b/android/app/src/main/java/com/naviapp/home/dashboard/ui/compose/insuranceTab/InsuranceTabComposables.kt
@@ -9,8 +9,11 @@ package com.naviapp.home.dashboard.ui.compose.insuranceTab
 
 import android.annotation.SuppressLint
 import android.view.LayoutInflater
+import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.animation.animateContentSize
 import androidx.compose.animation.core.tween
+import androidx.compose.animation.slideInVertically
+import androidx.compose.animation.slideOutVertically
 import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.LocalOverscrollConfiguration
 import androidx.compose.foundation.background
@@ -18,6 +21,7 @@ import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.wrapContentHeight
 import androidx.compose.foundation.layout.wrapContentSize
 import androidx.compose.foundation.lazy.LazyColumn
@@ -33,8 +37,11 @@ import androidx.compose.runtime.neverEqualPolicy
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.RectangleShape
 import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.unit.dp
 import androidx.compose.ui.viewinterop.AndroidView
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import com.facebook.shimmer.ShimmerFrameLayout
@@ -46,12 +53,16 @@ import com.navi.common.analytics.NaviAnalytics.Companion.INSURANCE_TAB_INIT
 import com.navi.common.ui.errorview.FullScreenErrorComposeView
 import com.navi.insurance.R
 import com.navi.insurance.common.models.InsuranceTabResponse
+import com.navi.insurance.util.Constants
 import com.navi.naviwidgets.callbacks.WidgetCallback
 import com.navi.naviwidgets.composewidget.GenericComposableWidgetFactory
+import com.navi.naviwidgets.composewidget.reusable.footerColorShadow
 import com.navi.naviwidgets.extensions.FloatingButtonOverlay
-import com.navi.naviwidgets.extensions.isScrollingDown
+import com.navi.naviwidgets.extensions.isFirstItemVisible
+import com.navi.naviwidgets.models.GenericWidgetDataInfo
 import com.navi.uitron.render.UiTronRenderer
 import com.naviapp.common.tab.InsuranceTabViewModel
+import com.naviapp.utils.Constants.WHITE_COLOR
 
 @OptIn(ExperimentalFoundationApi::class)
 @SuppressLint("UnusedMaterialScaffoldPaddingParameter")
@@ -59,11 +70,14 @@ import com.naviapp.common.tab.InsuranceTabViewModel
 fun RenderUiTronDataSecondary(
     modifier: Modifier,
     viewModel: InsuranceTabViewModel,
-    widgetCallback: WidgetCallback? = null
+    widgetCallback: WidgetCallback? = null,
+    toggleStatusBarColor: (String) -> Unit,
 ) {
     val state by viewModel.insuranceTabDataFlow.collectAsStateWithLifecycle()
     val listState = rememberLazyListState()
-    val isScrollingDown = listState.isScrollingDown()
+    val isFirstItemVisible = listState.isFirstItemVisible()
+    var animateFooterSectionVisibility by remember { mutableStateOf(false) }
+    var statusBarColor by remember { mutableStateOf(WHITE_COLOR) }
     Box(modifier = modifier.fillMaxSize()) {
         when {
             state.data.isNotNull() -> {
@@ -77,6 +91,16 @@ fun RenderUiTronDataSecondary(
                         )
                     }
                 }
+                state.data?.pageMetaData?.pageProperties?.forEach {
+                    when (it.key) {
+                        Constants.STATUS_BAR_COLOR -> statusBarColor = it.value.orEmpty()
+                        Constants.ANIMATE_FOOTER_SECTION_VISIBILITY ->
+                            animateFooterSectionVisibility = it.value.toBoolean().orFalse()
+                    }
+                }
+                LaunchedEffect(isFirstItemVisible) {
+                    toggleStatusBarColor(if (isFirstItemVisible) statusBarColor else WHITE_COLOR)
+                }
                 Box {
                     Scaffold(
                         modifier =
@@ -111,10 +135,23 @@ fun RenderUiTronDataSecondary(
                                     )
                             } else {
                                 state.data?.footerNativeWidget?.let { data ->
-                                    Box(modifier = Modifier.background(Color.White)) {
-                                        GenericComposableWidgetFactory(
+                                    if (animateFooterSectionVisibility) {
+                                        AnimatedVisibility(
+                                            visible = !isFirstItemVisible,
+                                            enter = slideInVertically { it },
+                                            exit = slideOutVertically { it }
+                                        ) {
+                                            FooterComposable(
+                                                data = data,
+                                                widgetCallback = widgetCallback,
+                                                isFirstItemVisible = isFirstItemVisible
+                                            )
+                                        }
+                                    } else {
+                                        FooterComposable(
                                             data = data,
-                                            widgetCallback = widgetCallback
+                                            widgetCallback = widgetCallback,
+                                            isFirstItemVisible = isFirstItemVisible
                                         )
                                     }
                                 }
@@ -125,7 +162,7 @@ fun RenderUiTronDataSecondary(
                             ContentComposable(
                                 listState = listState,
                                 widgetCallback = widgetCallback,
-                                data = state?.data,
+                                data = state.data,
                                 viewModel = viewModel
                             )
                         }
@@ -133,9 +170,11 @@ fun RenderUiTronDataSecondary(
                     if (state.data?.floatingButtonData.isNotNull()) {
                         FloatingButtonOverlay(
                             state.data?.floatingButtonData,
-                            !isScrollingDown,
+                            isFirstItemVisible,
                             widgetCallback,
-                            INSURANCE_TAB_INIT
+                            INSURANCE_TAB_INIT,
+                            updateWidgetMargin =
+                                animateFooterSectionVisibility && isFirstItemVisible,
                         )
                     }
                 }
@@ -153,6 +192,33 @@ fun RenderUiTronDataSecondary(
     }
 }
 
+@Composable
+fun FooterComposable(
+    data: GenericWidgetDataInfo,
+    widgetCallback: WidgetCallback?,
+    isFirstItemVisible: Boolean = true
+) {
+    Column(
+        modifier =
+            Modifier.background(
+                    brush =
+                        Brush.verticalGradient(
+                            colors = listOf(Color.Transparent, footerColorShadow)
+                        ),
+                    shape = RectangleShape
+                )
+                .padding(top = 35.dp)
+    ) {
+        Box(modifier = Modifier.background(Color.White)) {
+            GenericComposableWidgetFactory(
+                data = data,
+                widgetCallback = widgetCallback,
+                isFirstItemVisible = isFirstItemVisible
+            )
+        }
+    }
+}
+
 @Composable
 fun ContentComposable(
     listState: LazyListState,
diff --git a/android/app/src/main/java/com/naviapp/react_native/ReactActivity.kt b/android/app/src/main/java/com/naviapp/react_native/ReactActivity.kt
index 86faba50bc..db1f302527 100644
--- a/android/app/src/main/java/com/naviapp/react_native/ReactActivity.kt
+++ b/android/app/src/main/java/com/naviapp/react_native/ReactActivity.kt
@@ -45,7 +45,10 @@ class ReactActivity : BaseActivity(), DefaultHardwareBackBtnHandler, RequestToCa
 
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(null)
-        overridePendingTransition(0, 0)
+        overridePendingTransition(
+            com.navi.common.R.anim.parallax_slide_in_right,
+            com.navi.common.R.anim.parallax_slide_out_left
+        )
         if (
             BuildConfig.DEBUG &&
                 !TextUtils.equals(CommonLibManager.buildConfigDetails.flavor, PROD).orFalse()
diff --git a/android/navi-base/src/main/java/com/navi/base/model/CtaData.kt b/android/navi-base/src/main/java/com/navi/base/model/CtaData.kt
index 07849cb171..f875f41503 100644
--- a/android/navi-base/src/main/java/com/navi/base/model/CtaData.kt
+++ b/android/navi-base/src/main/java/com/navi/base/model/CtaData.kt
@@ -11,12 +11,17 @@ import android.os.Bundle
 import android.os.Parcelable
 import com.google.gson.annotations.SerializedName
 import kotlinx.parcelize.Parcelize
+import kotlinx.parcelize.RawValue
 
 @Parcelize
 data class CtaData(
     @SerializedName("title") val title: String? = null,
     @SerializedName("subTitle", alternate = ["subtitle"]) val subTitle: String? = null,
     @SerializedName("subPage") val subPage: String? = null,
+    // Data Use case:- since params can hold just line items, we can use this to hold any object.
+    // This is useful when we need to pass a generic object to the next screen.
+    // Note:- To be used only for small objects.
+    @SerializedName("data") val data: @RawValue Any? = null,
     @SerializedName("page") val page: String? = null,
     @SerializedName("type") val type: String? = null,
     @SerializedName("url") val url: String? = null,
diff --git a/android/navi-coin/src/main/java/com/navi/coin/ui/compose/common/CoinHistory.kt b/android/navi-coin/src/main/java/com/navi/coin/ui/compose/common/CoinHistory.kt
index 98af0a06c3..ac9ca6997c 100644
--- a/android/navi-coin/src/main/java/com/navi/coin/ui/compose/common/CoinHistory.kt
+++ b/android/navi-coin/src/main/java/com/navi/coin/ui/compose/common/CoinHistory.kt
@@ -82,6 +82,7 @@ import com.navi.design.theme.getFontWeight
 import com.navi.design.theme.ttComposeFontFamily
 import com.navi.design.utils.NoRippleIndicationSource
 import com.navi.design.utils.parseColorSafe
+import com.navi.naviwidgets.R as WidgetsR
 import com.navi.uitron.model.UiTronResponse
 import kotlin.reflect.KFunction1
 import kotlinx.coroutines.launch
@@ -289,7 +290,7 @@ fun TabComposable(
                             item {
                                 Column {
                                     Image(
-                                        painter = painterResource(id = R.drawable.curve),
+                                        painter = painterResource(id = WidgetsR.drawable.curve),
                                         contentDescription = stringResource(R.string.coin_history),
                                         modifier = Modifier.fillMaxSize(),
                                         contentScale = FillWidth
diff --git a/android/navi-coin/src/main/java/com/navi/coin/ui/compose/common/ScratchCardListRenderer.kt b/android/navi-coin/src/main/java/com/navi/coin/ui/compose/common/ScratchCardListRenderer.kt
index e6eafd6e89..e59de93453 100644
--- a/android/navi-coin/src/main/java/com/navi/coin/ui/compose/common/ScratchCardListRenderer.kt
+++ b/android/navi-coin/src/main/java/com/navi/coin/ui/compose/common/ScratchCardListRenderer.kt
@@ -97,6 +97,7 @@ import com.navi.design.font.FontWeightEnum
 import com.navi.design.theme.getFontWeight
 import com.navi.design.theme.ttComposeFontFamily
 import com.navi.design.utils.NoRippleIndicationSource
+import com.navi.naviwidgets.R as WidgetsR
 import com.navi.rr.common.widgetFactory.WidgetRenderer
 import com.navi.rr.utils.NaviRRAnalytics
 import com.navi.rr.utils.constants.EventConstants.BOTTOM_SHEET_TYPE
@@ -162,7 +163,7 @@ fun ScratchCardListRenderer(
                             Column {
                                 Spacer(modifier = Modifier.height(30.dp))
                                 Image(
-                                    painter = painterResource(id = R.drawable.curve),
+                                    painter = painterResource(id = WidgetsR.drawable.curve),
                                     contentDescription = EMPTY,
                                     modifier = Modifier.fillMaxSize(),
                                     contentScale = ContentScale.FillWidth
diff --git a/android/navi-coin/src/main/java/com/navi/coin/ui/compose/screen/CoinHomeScreen.kt b/android/navi-coin/src/main/java/com/navi/coin/ui/compose/screen/CoinHomeScreen.kt
index 064a4e2a4c..63fd255e2c 100644
--- a/android/navi-coin/src/main/java/com/navi/coin/ui/compose/screen/CoinHomeScreen.kt
+++ b/android/navi-coin/src/main/java/com/navi/coin/ui/compose/screen/CoinHomeScreen.kt
@@ -106,6 +106,7 @@ import com.navi.common.navigation.rememberNavigatorWithResultAndParams
 import com.navi.common.uitron.model.action.CtaAction
 import com.navi.common.uitron.model.action.ExecuteActionsCorrespondingToKey
 import com.navi.design.utils.NoRippleIndicationSource
+import com.navi.naviwidgets.R as WidgetsR
 import com.navi.rr.R as rrR
 import com.navi.rr.common.actions.InitActionHandler
 import com.navi.rr.common.constants.COIN_HOME_SCREEN
@@ -592,7 +593,7 @@ private fun CoinHomeScreenBody(
                 )
                 if (state.data.jsonMetaData?.get(SHOW_CURVE_KEY) != null) {
                     Image(
-                        painter = painterResource(id = R.drawable.curve),
+                        painter = painterResource(id = WidgetsR.drawable.curve),
                         contentDescription = EMPTY,
                         modifier = Modifier.fillMaxSize(),
                         contentScale = ContentScale.FillWidth
diff --git a/android/navi-design/src/main/java/com/navi/design/utils/Constants.kt b/android/navi-design/src/main/java/com/navi/design/utils/Constants.kt
index 697442e1c1..658764c246 100644
--- a/android/navi-design/src/main/java/com/navi/design/utils/Constants.kt
+++ b/android/navi-design/src/main/java/com/navi/design/utils/Constants.kt
@@ -1,6 +1,6 @@
 /*
  *
- *  * Copyright © 2022-2023 by Navi Technologies Limited
+ *  * Copyright © 2022-2024 by Navi Technologies Limited
  *  * All rights reserved. Strictly confidential
  *
  */
@@ -37,4 +37,5 @@ object Constants {
     const val TT_FONT_FAMILY = "ttComposeFontFamily"
     const val RUPEE = "₹ "
     const val COLOR_TRANSPARENT = "#00FFFFFF"
+    const val RADIAL_GRADIENT = "RADIAL"
 }
diff --git a/android/navi-insurance/src/main/java/com/navi/insurance/common/bottom_sheet/AhcOdcTabularBottomsheet.kt b/android/navi-insurance/src/main/java/com/navi/insurance/common/bottom_sheet/AhcOdcTabularBottomsheet.kt
new file mode 100644
index 0000000000..a933f054f2
--- /dev/null
+++ b/android/navi-insurance/src/main/java/com/navi/insurance/common/bottom_sheet/AhcOdcTabularBottomsheet.kt
@@ -0,0 +1,245 @@
+/*
+ *
+ *  * Copyright © 2024 by Navi Technologies Limited
+ *  * All rights reserved. Strictly confidential
+ *
+ */
+
+package com.navi.insurance.common.bottom_sheet
+
+import android.os.Bundle
+import android.view.ViewStub
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.wrapContentHeight
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import androidx.databinding.DataBindingUtil
+import com.google.gson.reflect.TypeToken
+import com.navi.analytics.utils.NaviTrackEvent
+import com.navi.base.model.CtaData
+import com.navi.base.model.CtaType
+import com.navi.base.model.NaviClickAction
+import com.navi.base.utils.isNotNull
+import com.navi.base.utils.orFalse
+import com.navi.common.constants.VENDOR_NAVI_API
+import com.navi.common.model.ModuleName
+import com.navi.common.utils.CommonNaviAnalytics
+import com.navi.common.utils.getNetworkType
+import com.navi.insurance.R
+import com.navi.insurance.analytics.InsuranceAnalyticsHandler
+import com.navi.insurance.common.fragment.BaseBottomSheet
+import com.navi.insurance.common.models.AhcOdcTabularBottomsheetData
+import com.navi.insurance.common.models.GiErrorMetaData
+import com.navi.insurance.common.models.HeaderData
+import com.navi.insurance.common.util.NavigationHandler.Companion.AHC_ODC_TABULAR_BOTTOMSHEET
+import com.navi.insurance.databinding.LayoutClaimsStepsBottomSheetBinding
+import com.navi.insurance.navigator.NaviInsuranceDeeplinkNavigator
+import com.navi.insurance.util.CONTENT_DATA_JSON_STRING
+import com.navi.insurance.util.Constants
+import com.navi.naviwidgets.callbacks.WidgetCallback
+import com.navi.naviwidgets.composewidget.reusable.FooterButtonComposable
+import com.navi.naviwidgets.composewidget.reusable.whiteColor
+import com.navi.naviwidgets.composewidget.widgets.TableColumnComposable
+import com.navi.naviwidgets.extensions.NaviImage
+import com.navi.naviwidgets.extensions.NaviTextWidgetized
+import com.navi.naviwidgets.extensions.getBackground
+import com.navi.naviwidgets.extensions.getJsonObject
+import com.navi.naviwidgets.extensions.setContentPadding
+import dagger.hilt.android.AndroidEntryPoint
+import javax.inject.Inject
+
+@AndroidEntryPoint
+class AhcOdcTabularBottomsheet : BaseBottomSheet(), WidgetCallback {
+    @Inject lateinit var analyticsHandler: InsuranceAnalyticsHandler
+    private lateinit var binding: LayoutClaimsStepsBottomSheetBinding
+    private val errorTracker = CommonNaviAnalytics.naviAnalytics.GiError()
+
+    override fun setContainerView(viewStub: ViewStub) {
+        viewStub.layoutResource = R.layout.layout_claims_steps_bottom_sheet
+        binding = DataBindingUtil.getBinding(viewStub.inflate())!!
+        initUI()
+    }
+
+    private fun initUI() {
+        val dataType = object : TypeToken<AhcOdcTabularBottomsheetData>() {}.type
+        val bottomSheetData =
+            getJsonObject<AhcOdcTabularBottomsheetData>(
+                dataType,
+                (arguments?.getString(CONTENT_DATA_JSON_STRING)),
+                onErrorOccured = { exception -> trackError(exception) }
+            )
+        bottomSheetData?.let { data ->
+            NaviTrackEvent.sendEvent(data.metaData?.analyticsEventProperties, screenName)
+            binding.root.setContent {
+                setBottomSheetRadius(8f)
+                setPadding(0, 0, 0, 0)
+                AhcOdcTabularBottomsheetComposable(data)
+            }
+        }
+    }
+
+    @Composable
+    fun AhcOdcTabularBottomsheetComposable(data: AhcOdcTabularBottomsheetData) {
+        Column(modifier = Modifier.fillMaxWidth()) {
+            data.headerData?.let { AhcOdcHeaderComposable(data.headerData) }
+            Column(
+                modifier =
+                    Modifier.setContentPadding(data.tableProperties?.contentPadding)
+                        .getBackground(data.tableProperties)
+            ) {
+                Row {
+                    data.columns?.forEach { column ->
+                        TableColumnComposable(
+                            columnData = column,
+                            modifier = Modifier.weight(1f),
+                            properties = column.columnProperties,
+                            widgetCallback = this@AhcOdcTabularBottomsheet
+                        )
+                    }
+                }
+            }
+            data.footer?.let { footerData ->
+                Column(modifier = Modifier.padding(top = 16.dp, bottom = 24.dp)) {
+                    Row(
+                        horizontalArrangement = Arrangement.SpaceBetween,
+                        modifier =
+                            Modifier.fillMaxWidth()
+                                .background(whiteColor)
+                                .padding(horizontal = 8.dp)
+                    ) {
+                        val footerButtons =
+                            listOf(
+                                footerData.footerWithCardAndSnackbarWidgetBody
+                                    ?.secondaryFooterButton,
+                                footerData.footerWithCardAndSnackbarWidgetBody?.footerButton
+                            )
+                        footerButtons.forEach { button ->
+                            if (button?.title?.text?.isNotNull() == true) {
+                                FooterButtonComposable(
+                                    modifier =
+                                        Modifier.weight(1f)
+                                            .padding(top = 16.dp, bottom = 16.dp)
+                                            .wrapContentHeight()
+                                            .padding(horizontal = 8.dp),
+                                    data = button,
+                                    widgetCallback = this@AhcOdcTabularBottomsheet
+                                )
+                            }
+                        }
+                    }
+                    footerData.footerWithCardAndSnackbarWidgetBody?.bottomText?.text?.let {
+                        NaviTextWidgetized(
+                            textFieldData =
+                                footerData.footerWithCardAndSnackbarWidgetBody?.bottomText,
+                            modifier = Modifier.fillMaxWidth(),
+                            widgetCallback = this@AhcOdcTabularBottomsheet
+                        )
+                    }
+                }
+            }
+        }
+    }
+
+    @Composable
+    fun AhcOdcHeaderComposable(headerData: HeaderData?) {
+        Box(
+            modifier =
+                Modifier.fillMaxWidth()
+                    .wrapContentHeight()
+                    .getBackground(headerData?.cardBackground)
+        ) {
+            Column(
+                modifier = Modifier.setContentPadding(headerData?.cardBackground?.contentPadding),
+                horizontalAlignment = Alignment.Start,
+                verticalArrangement = Arrangement.Center
+            ) {
+                headerData?.title?.text?.let {
+                    NaviTextWidgetized(
+                        textFieldData = headerData.title,
+                    )
+                }
+                headerData?.textList?.forEach { textData ->
+                    textData.text?.let {
+                        NaviTextWidgetized(
+                            textFieldData = textData,
+                        )
+                    }
+                }
+            }
+
+            headerData?.topTag?.text?.let {
+                Row(
+                    modifier = Modifier.padding(end = 16.dp).align(Alignment.TopEnd),
+                    horizontalArrangement = Arrangement.Center
+                ) {
+                    NaviTextWidgetized(
+                        textFieldData = headerData.topTag,
+                    )
+                }
+            }
+            headerData?.icon?.url?.let {
+                NaviImage(
+                    imageFieldData = headerData.icon,
+                    modifier = Modifier.height(85.dp).align(Alignment.BottomEnd),
+                    widgetCallback = this@AhcOdcTabularBottomsheet
+                )
+            }
+        }
+    }
+
+    override fun onClick(naviClickAction: NaviClickAction, widgetId: String?) {
+        if (naviClickAction is CtaData) {
+            naviClickAction.analyticsEventProperties?.let { analyticsEvent ->
+                analyticsHandler.sendEvent(analyticsEvent, screenName)
+            }
+            val bundle = Bundle()
+            bundle.putParcelable(Constants.PARAMS_EXTRA, naviClickAction)
+            when (naviClickAction.type) {
+                CtaType.DISMISS_BOTTOM_SHEET.name -> {
+                    safelyDismissDialog()
+                }
+                else -> {
+                    NaviInsuranceDeeplinkNavigator.navigate(
+                        activity = activity,
+                        ctaData = naviClickAction,
+                        bundle = bundle,
+                        finish = naviClickAction.finish.orFalse(),
+                        clearTask = naviClickAction.clearTask.orFalse(),
+                        callbackHandler = requestToCallbackHAndler
+                    )
+                    safelyDismissDialog()
+                }
+            }
+        }
+    }
+
+    private fun trackError(error: Exception) {
+        errorTracker.onGlobalError(
+            error.stackTrace.getOrNull(0).toString(),
+            screenName,
+            ModuleName.GI.name,
+            CommonNaviAnalytics.GLOBAL_GENERIC_ERRORS,
+            null,
+            context?.let { getNetworkType(it) },
+            GiErrorMetaData.INSURANCE_TAB_FLOW,
+            GiErrorMetaData.GET_JSON_OBJECT,
+            VENDOR_NAVI_API,
+            isDownTime = true
+        )
+    }
+
+    override val screenName = AHC_ODC_TABULAR_BOTTOMSHEET
+
+    companion object {
+        const val TAG = AHC_ODC_TABULAR_BOTTOMSHEET
+    }
+}
diff --git a/android/navi-insurance/src/main/java/com/navi/insurance/common/models/AhcOdcTabularBottomsheetData.kt b/android/navi-insurance/src/main/java/com/navi/insurance/common/models/AhcOdcTabularBottomsheetData.kt
new file mode 100644
index 0000000000..6331b52751
--- /dev/null
+++ b/android/navi-insurance/src/main/java/com/navi/insurance/common/models/AhcOdcTabularBottomsheetData.kt
@@ -0,0 +1,32 @@
+/*
+ *
+ *  * Copyright © 2024 by Navi Technologies Limited
+ *  * All rights reserved. Strictly confidential
+ *
+ */
+
+package com.navi.insurance.common.models
+
+import com.google.gson.annotations.SerializedName
+import com.navi.design.utils.BackgroundDrawableData
+import com.navi.naviwidgets.models.FooterWithCardAndSnackbarWidgetData
+import com.navi.naviwidgets.models.response.ColumnData
+import com.navi.naviwidgets.models.response.ImageFieldData
+import com.navi.naviwidgets.models.response.PageMetaData
+import com.navi.naviwidgets.models.response.TextFieldData
+
+data class AhcOdcTabularBottomsheetData(
+    @SerializedName("headerData") val headerData: HeaderData? = null,
+    @SerializedName("tableProperties") val tableProperties: BackgroundDrawableData? = null,
+    @SerializedName("columns") val columns: List<ColumnData>? = null,
+    @SerializedName("footer") val footer: FooterWithCardAndSnackbarWidgetData? = null,
+    @SerializedName("metaData") val metaData: PageMetaData? = null,
+)
+
+data class HeaderData(
+    @SerializedName("cardBackground") val cardBackground: BackgroundDrawableData? = null,
+    @SerializedName("title") val title: TextFieldData? = null,
+    @SerializedName("textList") val textList: List<TextFieldData>? = null,
+    @SerializedName("icon") val icon: ImageFieldData? = null,
+    @SerializedName("topTag") val topTag: TextFieldData? = null
+)
diff --git a/android/navi-insurance/src/main/java/com/navi/insurance/common/models/InsuranceTabResponse.kt b/android/navi-insurance/src/main/java/com/navi/insurance/common/models/InsuranceTabResponse.kt
index 960d128747..7e184914e1 100644
--- a/android/navi-insurance/src/main/java/com/navi/insurance/common/models/InsuranceTabResponse.kt
+++ b/android/navi-insurance/src/main/java/com/navi/insurance/common/models/InsuranceTabResponse.kt
@@ -9,6 +9,7 @@ package com.navi.insurance.common.models
 
 import com.google.gson.annotations.SerializedName
 import com.navi.base.model.AnalyticsEvent
+import com.navi.base.model.LineItem
 import com.navi.common.network.models.ErrorMessage
 import com.navi.common.network.models.GenericErrorResponse
 import com.navi.naviwidgets.models.GenericWidgetDataInfo
@@ -28,7 +29,8 @@ data class InsuranceTabResponse(
 )
 
 data class PageMetaData(
-    @SerializedName("analyticsEvents") val analyticsEvents: List<AnalyticsEvent>? = null
+    @SerializedName("analyticsEvents") val analyticsEvents: List<AnalyticsEvent>? = null,
+    @SerializedName("pageProperties") val pageProperties: List<LineItem>? = null
 )
 
 data class ToastRequestBody(@SerializedName("identifier") val toastIdentifier: String? = null)
diff --git a/android/navi-insurance/src/main/java/com/navi/insurance/common/util/NavigationHandler.kt b/android/navi-insurance/src/main/java/com/navi/insurance/common/util/NavigationHandler.kt
index 4f9bb983a1..749b46df43 100644
--- a/android/navi-insurance/src/main/java/com/navi/insurance/common/util/NavigationHandler.kt
+++ b/android/navi-insurance/src/main/java/com/navi/insurance/common/util/NavigationHandler.kt
@@ -418,5 +418,6 @@ class NavigationHandler @Inject constructor(private val uiControllerUtil: UiCont
         const val TITLE_WITH_IMAGE_LIST_BOTTOM_SHEET = "title_with_image_list_bottom_sheet"
         const val POLICY_DETAILS_SCREEN = "policy_details_screen"
         const val POLICY_SELECTOR_BOTTOMSHEET = "policy_selector_bottomsheet"
+        const val AHC_ODC_TABULAR_BOTTOMSHEET = "ahc_odc_tabular_bottomsheet"
     }
 }
diff --git a/android/navi-insurance/src/main/java/com/navi/insurance/navigator/NaviInsuranceDeeplinkNavigator.kt b/android/navi-insurance/src/main/java/com/navi/insurance/navigator/NaviInsuranceDeeplinkNavigator.kt
index d2036e411d..62d0adbcdc 100644
--- a/android/navi-insurance/src/main/java/com/navi/insurance/navigator/NaviInsuranceDeeplinkNavigator.kt
+++ b/android/navi-insurance/src/main/java/com/navi/insurance/navigator/NaviInsuranceDeeplinkNavigator.kt
@@ -44,6 +44,7 @@ import com.navi.insurance.claim.fragment.ClaimsBottomSheet
 import com.navi.insurance.common.activity.BenefitWebViewActivity
 import com.navi.insurance.common.activity.IncentiviseAutopayActivity
 import com.navi.insurance.common.activity.PopUpActivity
+import com.navi.insurance.common.bottom_sheet.AhcOdcTabularBottomsheet
 import com.navi.insurance.common.bottom_sheet.CheckboxWithDropdownBottomsheet
 import com.navi.insurance.common.bottom_sheet.ClaimsStepsBottomSheet
 import com.navi.insurance.common.bottom_sheet.HeaderItemFooterBottomSheet
@@ -72,6 +73,7 @@ import com.navi.insurance.common.helper.ShareUtils
 import com.navi.insurance.common.models.RedirectToPhoneActionData
 import com.navi.insurance.common.util.ActionHandler
 import com.navi.insurance.common.util.NavigationHandler
+import com.navi.insurance.common.util.NavigationHandler.Companion.AHC_ODC_TABULAR_BOTTOMSHEET
 import com.navi.insurance.common.util.NavigationHandler.Companion.BENEFIT_VIDEO_STORIES
 import com.navi.insurance.common.util.NavigationHandler.Companion.BOTTOM_SHEET
 import com.navi.insurance.common.util.NavigationHandler.Companion.BOTTOM_SHEET_R12_CTA_REDIRECT
@@ -738,6 +740,8 @@ object NaviInsuranceDeeplinkNavigator {
                 Pair(TitleWithImageListBottomSheet.TAG, TitleWithImageListBottomSheet())
             POLICY_SELECTOR_BOTTOMSHEET ->
                 Pair(PolicySelectorBottomsheet.TAG, PolicySelectorBottomsheet())
+            AHC_ODC_TABULAR_BOTTOMSHEET ->
+                Pair(AhcOdcTabularBottomsheet.TAG, AhcOdcTabularBottomsheet())
             else -> null
         }
     }
diff --git a/android/navi-insurance/src/main/java/com/navi/insurance/pre/purchase/journey/ui/PreQuoteJourneyViewModel.kt b/android/navi-insurance/src/main/java/com/navi/insurance/pre/purchase/journey/ui/PreQuoteJourneyViewModel.kt
index 3641874b33..57cc3bffe0 100644
--- a/android/navi-insurance/src/main/java/com/navi/insurance/pre/purchase/journey/ui/PreQuoteJourneyViewModel.kt
+++ b/android/navi-insurance/src/main/java/com/navi/insurance/pre/purchase/journey/ui/PreQuoteJourneyViewModel.kt
@@ -11,6 +11,7 @@ import android.os.Bundle
 import androidx.lifecycle.viewModelScope
 import com.navi.base.model.CtaData
 import com.navi.base.model.CtaType
+import com.navi.base.model.Padding
 import com.navi.base.utils.isNotNull
 import com.navi.base.utils.isNotNullAndNotEmpty
 import com.navi.base.utils.isNull
@@ -47,7 +48,6 @@ import com.navi.naviwidgets.models.MultiTypeSelectionWidget
 import com.navi.naviwidgets.models.response.ImageFieldData
 import com.navi.naviwidgets.models.response.TextDrawableData
 import com.navi.naviwidgets.models.response.TextFieldData
-import com.navi.naviwidgets.widgets.textdisplay.Padding
 import dagger.hilt.android.lifecycle.HiltViewModel
 import javax.inject.Inject
 import kotlinx.coroutines.CoroutineExceptionHandler
diff --git a/android/navi-insurance/src/main/java/com/navi/insurance/util/Constants.kt b/android/navi-insurance/src/main/java/com/navi/insurance/util/Constants.kt
index bb84697037..70500146a3 100644
--- a/android/navi-insurance/src/main/java/com/navi/insurance/util/Constants.kt
+++ b/android/navi-insurance/src/main/java/com/navi/insurance/util/Constants.kt
@@ -326,6 +326,8 @@ object Constants {
     const val UPDATED_WIDGET_DATA = "updatedWidgetData"
     const val FILE_NAME = "fileName"
     const val POLL = "POLL"
+    const val ANIMATE_FOOTER_SECTION_VISIBILITY = "animateFooterSectionVisibility"
+    const val STATUS_BAR_COLOR = "statusBarColor"
 
     // This is required for animating a component for Health risk score
     val numberConstant: List<String> =
diff --git a/android/navi-insurance/src/main/res/layout/document_image_preview_fragment.xml b/android/navi-insurance/src/main/res/layout/document_image_preview_fragment.xml
index f632683d4d..c367d46796 100644
--- a/android/navi-insurance/src/main/res/layout/document_image_preview_fragment.xml
+++ b/android/navi-insurance/src/main/res/layout/document_image_preview_fragment.xml
@@ -76,8 +76,8 @@
 
             <com.airbnb.lottie.LottieAnimationView
                 android:id="@+id/progress_bar"
-                android:layout_width="@dimen/dp_128"
-                android:layout_height="@dimen/dp_128"
+                android:layout_width="@dimen/dp_64"
+                android:layout_height="@dimen/dp_64"
                 android:layout_gravity="center"
                 android:visibility="gone"
                 app:lottie_autoPlay="true"
diff --git a/android/navi-widgets/src/main/java/com/navi/naviwidgets/WidgetDataDeserializer.kt b/android/navi-widgets/src/main/java/com/navi/naviwidgets/WidgetDataDeserializer.kt
index 2822593c1e..67ad32005d 100644
--- a/android/navi-widgets/src/main/java/com/navi/naviwidgets/WidgetDataDeserializer.kt
+++ b/android/navi-widgets/src/main/java/com/navi/naviwidgets/WidgetDataDeserializer.kt
@@ -416,12 +416,37 @@ class WidgetDataDeserializer : JsonDeserializer<GenericWidgetDataInfo> {
                 WidgetTypes.TOAST_WIDGET_LIST.value -> {
                     Gson().fromJson(jsonObject, ToastListWidgetData::class.java)
                 }
+                WidgetTypes.TITLE_CONTENT_IMAGE_FOOTER_WITH_CTA.value -> {
+                    Gson()
+                        .fromJson(jsonObject, TitleContentImageFooterWithCtaWidgetData::class.java)
+                }
+                WidgetTypes.HORIZONTAL_CARD_CAROUSEL_WIDGET.value -> {
+                    Gson().fromJson(jsonObject, HorizontalCardCarouselWidgetData::class.java)
+                }
+                WidgetTypes.TITLE_CONTENT_FOOTER_CARD_WIDGET.value -> {
+                    Gson().fromJson(jsonObject, TitleContentFooterCardWidgetData::class.java)
+                }
+                WidgetTypes.TITLE_CARD_CTA_WIDGET.value -> {
+                    Gson().fromJson(jsonObject, TitleCardCtaWidgetData::class.java)
+                }
                 WidgetTypes.FOOTER_SECTION_TEMPLATE.value -> {
                     context?.deserialize<FooterSectionWidgetData>(
                         jsonObject,
                         FooterSectionWidgetData::class.java
                     )
                 }
+                WidgetTypes.CARD_WITH_LIST_ITEMS_WIDGET.value -> {
+                    Gson().fromJson(jsonObject, CardWithListItemsWidgetData::class.java)
+                }
+                WidgetTypes.TABLE_WITH_TOOLTIP_AND_CTA_WIDGET.value -> {
+                    Gson().fromJson(jsonObject, TableWithTooltipAndCtaWidgetData::class.java)
+                }
+                WidgetTypes.GRID_WITH_ASSET_CARD_WIDGET.value -> {
+                    Gson().fromJson(jsonObject, GridWithAssetCardWidgetData::class.java)
+                }
+                WidgetTypes.TITLE_WITH_BUTTON_AND_ICON_WIDGET.value -> {
+                    Gson().fromJson(jsonObject, TitleWithButtonAndIconWidgetData::class.java)
+                }
                 else -> {
                     Gson().fromJson(jsonObject, GenericWidgetDataInfo::class.java)
                 }
diff --git a/android/navi-widgets/src/main/java/com/navi/naviwidgets/WidgetTypes.kt b/android/navi-widgets/src/main/java/com/navi/naviwidgets/WidgetTypes.kt
index 022b4ea89f..5b8bb796db 100644
--- a/android/navi-widgets/src/main/java/com/navi/naviwidgets/WidgetTypes.kt
+++ b/android/navi-widgets/src/main/java/com/navi/naviwidgets/WidgetTypes.kt
@@ -123,5 +123,13 @@ enum class WidgetTypes(val value: String) {
     TITLE_WITH_GRID_AND_FOOTER_BUTTON_WIDGET("TITLE_WITH_GRID_AND_FOOTER_BUTTON_WIDGET"),
     LEFT_RIGHT_TITLE_LIST_WIDGET("LEFT_RIGHT_TITLE_LIST_WIDGET"),
     TOAST_WIDGET_LIST("TOAST_WIDGET_LIST"),
-    FOOTER_SECTION_TEMPLATE("FOOTER_SECTION_TEMPLATE")
+    TITLE_CONTENT_IMAGE_FOOTER_WITH_CTA("TITLE_CONTENT_IMAGE_FOOTER_WITH_CTA"),
+    HORIZONTAL_CARD_CAROUSEL_WIDGET("HORIZONTAL_CARD_CAROUSEL_WIDGET"),
+    TITLE_CARD_CTA_WIDGET("TITLE_CARD_CTA_WIDGET"),
+    TITLE_CONTENT_FOOTER_CARD_WIDGET("TITLE_CONTENT_FOOTER_CARD_WIDGET"),
+    CARD_WITH_LIST_ITEMS_WIDGET("CARD_WITH_LIST_ITEMS_WIDGET"),
+    TABLE_WITH_TOOLTIP_AND_CTA_WIDGET("TABLE_WITH_TOOLTIP_AND_CTA_WIDGET"),
+    GRID_WITH_ASSET_CARD_WIDGET("GRID_WITH_ASSET_CARD_WIDGET"),
+    FOOTER_SECTION_TEMPLATE("FOOTER_SECTION_TEMPLATE"),
+    TITLE_WITH_BUTTON_AND_ICON_WIDGET("TITLE_WITH_BUTTON_AND_ICON_WIDGET"),
 }
diff --git a/android/navi-widgets/src/main/java/com/navi/naviwidgets/composewidget/GenericComposableWidgetFactory.kt b/android/navi-widgets/src/main/java/com/navi/naviwidgets/composewidget/GenericComposableWidgetFactory.kt
index 75e015ac3c..e98e3770a5 100644
--- a/android/navi-widgets/src/main/java/com/navi/naviwidgets/composewidget/GenericComposableWidgetFactory.kt
+++ b/android/navi-widgets/src/main/java/com/navi/naviwidgets/composewidget/GenericComposableWidgetFactory.kt
@@ -17,10 +17,13 @@ import com.navi.naviwidgets.callbacks.WidgetCallback
 import com.navi.naviwidgets.composewidget.model.CardWithFlipAnimationWidget
 import com.navi.naviwidgets.composewidget.model.PolicyHealthCardWidget
 import com.navi.naviwidgets.composewidget.widgets.CardWithFlipAnimationComposable
+import com.navi.naviwidgets.composewidget.widgets.CardWithListItemsWidgetComposable
 import com.navi.naviwidgets.composewidget.widgets.DismissableToastWidgetData
 import com.navi.naviwidgets.composewidget.widgets.FooterSectionWidgetComposable
 import com.navi.naviwidgets.composewidget.widgets.FooterWithCardAndSnackBarWidgetComposable
+import com.navi.naviwidgets.composewidget.widgets.GridWithAssetCardWidgetComposable
 import com.navi.naviwidgets.composewidget.widgets.GridWithCtaWidgetComposable
+import com.navi.naviwidgets.composewidget.widgets.HorizontalCardCarouselWidgetComposable
 import com.navi.naviwidgets.composewidget.widgets.HorizontalGridWidgetComposable
 import com.navi.naviwidgets.composewidget.widgets.ImageTitleCardWidgetComposable
 import com.navi.naviwidgets.composewidget.widgets.InfoCardWithTitleSubTitleButtonWidgetComposable
@@ -30,8 +33,13 @@ import com.navi.naviwidgets.composewidget.widgets.PolicyCardWidgetComposable
 import com.navi.naviwidgets.composewidget.widgets.PolicyDetailsCardV2WidgetData
 import com.navi.naviwidgets.composewidget.widgets.PolicyHealthCardComposable
 import com.navi.naviwidgets.composewidget.widgets.SeparatorWidgetComposable
+import com.navi.naviwidgets.composewidget.widgets.TableWithTooltipAndCtaWidgetComposable
+import com.navi.naviwidgets.composewidget.widgets.TitleCardCtaWidgetComposable
+import com.navi.naviwidgets.composewidget.widgets.TitleContentFooterCardWidgetComposable
+import com.navi.naviwidgets.composewidget.widgets.TitleContentImageFooterWithCtaWidgetComposable
 import com.navi.naviwidgets.composewidget.widgets.TitleWidgetComposable
 import com.navi.naviwidgets.composewidget.widgets.TitleWithAssetBackgroundWidgetComposable
+import com.navi.naviwidgets.composewidget.widgets.TitleWithButtonAndIconWidgetComposable
 import com.navi.naviwidgets.composewidget.widgets.TitleWithGridAndFooterButtonWidgetComposable
 import com.navi.naviwidgets.composewidget.widgets.TitleWithLeftRightAssetCardWidgetComposable
 import com.navi.naviwidgets.composewidget.widgets.TitleWithListAndTooltipWidgetComposable
@@ -43,16 +51,24 @@ import com.navi.naviwidgets.models.GenericWidgetDataInfo
 import com.navi.naviwidgets.models.HorizontalGridItemsWithCTAWidgetData
 import com.navi.naviwidgets.models.InfoCardWithTitleSubTitleButtonWidgetData
 import com.navi.naviwidgets.models.SeparatorWidgetComposableData
+import com.navi.naviwidgets.models.TitleContentFooterCardWidgetData
+import com.navi.naviwidgets.models.TitleContentImageFooterWithCtaWidgetData
+import com.navi.naviwidgets.models.response.CardWithListItemsWidgetData
 import com.navi.naviwidgets.models.response.DismissableToastWidgetData
 import com.navi.naviwidgets.models.response.FooterSectionWidgetData
+import com.navi.naviwidgets.models.response.GridWithAssetCardWidgetData
 import com.navi.naviwidgets.models.response.GridWithCtaWidgetData
+import com.navi.naviwidgets.models.response.HorizontalCardCarouselWidgetData
 import com.navi.naviwidgets.models.response.ImageTitleCardWidgetData
 import com.navi.naviwidgets.models.response.LeftRightTitleListWidgetData
 import com.navi.naviwidgets.models.response.PolicyCardCarouselWidgetData
 import com.navi.naviwidgets.models.response.PolicyCardWidgetData
 import com.navi.naviwidgets.models.response.PolicyDetailsCardV2WidgetData
+import com.navi.naviwidgets.models.response.TableWithTooltipAndCtaWidgetData
+import com.navi.naviwidgets.models.response.TitleCardCtaWidgetData
 import com.navi.naviwidgets.models.response.TitleWidget
 import com.navi.naviwidgets.models.response.TitleWithAssetBackgroundWidgetData
+import com.navi.naviwidgets.models.response.TitleWithButtonAndIconWidgetData
 import com.navi.naviwidgets.models.response.TitleWithGridAndFooterButtonWidgetData
 import com.navi.naviwidgets.models.response.TitleWithLeftRightAssetCardWidgetData
 import com.navi.naviwidgets.models.response.TitleWithListAndTooltipWidgetData
@@ -168,6 +184,45 @@ fun GenericComposableWidgetFactory(
                 widgetCallback
             )
         }
+        WidgetTypes.TITLE_CONTENT_IMAGE_FOOTER_WITH_CTA.value -> {
+            TitleContentImageFooterWithCtaWidgetComposable(
+                (data as? TitleContentImageFooterWithCtaWidgetData),
+                widgetCallback
+            )
+        }
+        WidgetTypes.HORIZONTAL_CARD_CAROUSEL_WIDGET.value -> {
+            HorizontalCardCarouselWidgetComposable(
+                (data as? HorizontalCardCarouselWidgetData),
+                widgetCallback
+            )
+        }
+        WidgetTypes.TITLE_CARD_CTA_WIDGET.value -> {
+            TitleCardCtaWidgetComposable((data as? TitleCardCtaWidgetData), widgetCallback)
+        }
+        WidgetTypes.TITLE_CONTENT_FOOTER_CARD_WIDGET.value -> {
+            TitleContentFooterCardWidgetComposable(
+                (data as? TitleContentFooterCardWidgetData),
+                widgetCallback
+            )
+        }
+        WidgetTypes.CARD_WITH_LIST_ITEMS_WIDGET.value -> {
+            CardWithListItemsWidgetComposable(
+                (data as? CardWithListItemsWidgetData),
+                widgetCallback
+            )
+        }
+        WidgetTypes.TABLE_WITH_TOOLTIP_AND_CTA_WIDGET.value -> {
+            TableWithTooltipAndCtaWidgetComposable(
+                (data as? TableWithTooltipAndCtaWidgetData),
+                widgetCallback
+            )
+        }
+        WidgetTypes.GRID_WITH_ASSET_CARD_WIDGET.value -> {
+            GridWithAssetCardWidgetComposable(
+                (data as? GridWithAssetCardWidgetData),
+                widgetCallback
+            )
+        }
         WidgetTypes.FOOTER_SECTION_TEMPLATE.value -> {
             FooterSectionWidgetComposable((data as? FooterSectionWidgetData), widgetCallback)
         }
@@ -178,5 +233,11 @@ fun GenericComposableWidgetFactory(
                 onWidgetUpdate
             )
         }
+        WidgetTypes.TITLE_WITH_BUTTON_AND_ICON_WIDGET.value -> {
+            TitleWithButtonAndIconWidgetComposable(
+                (data as? TitleWithButtonAndIconWidgetData),
+                widgetCallback
+            )
+        }
     }
 }
diff --git a/android/navi-widgets/src/main/java/com/navi/naviwidgets/composewidget/reusable/AppColors.kt b/android/navi-widgets/src/main/java/com/navi/naviwidgets/composewidget/reusable/AppColors.kt
index 526023d1be..93418a1b4b 100644
--- a/android/navi-widgets/src/main/java/com/navi/naviwidgets/composewidget/reusable/AppColors.kt
+++ b/android/navi-widgets/src/main/java/com/navi/naviwidgets/composewidget/reusable/AppColors.kt
@@ -16,6 +16,7 @@ val colorCTATertiary = Color(0xFF2A0038)
 val colorTextSecondary = Color(0xFF444444)
 val colorTextTertiary = Color(0xFF6B6B6B)
 val colorShadow = Color(0x4DB0C0D9)
+val footerColorShadow = Color(0xFF989789)
 val darkShadowColor = Color(0x4DD1D9E6)
 val colorTextPrimary = Color(0xFF191919)
 val colorBorderAlt = Color(0xFFE3E5E5)
@@ -39,3 +40,4 @@ const val GREEN_TURQUOISE = "#22D081"
 const val DARK_GRAY = "#444444"
 const val DARK_NAVY_BLUE = "#011A48"
 const val WHITE_SMOKE = "#F5F5F5"
+const val transparentHex = "#00000000"
diff --git a/android/navi-widgets/src/main/java/com/navi/naviwidgets/composewidget/widgets/CardWithListItemsWidgetComposable.kt b/android/navi-widgets/src/main/java/com/navi/naviwidgets/composewidget/widgets/CardWithListItemsWidgetComposable.kt
new file mode 100644
index 0000000000..9c273ea2fa
--- /dev/null
+++ b/android/navi-widgets/src/main/java/com/navi/naviwidgets/composewidget/widgets/CardWithListItemsWidgetComposable.kt
@@ -0,0 +1,142 @@
+/*
+ *
+ *  * Copyright © 2024 by Navi Technologies Limited
+ *  * All rights reserved. Strictly confidential
+ *
+ */
+
+package com.navi.naviwidgets.composewidget.widgets
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.neverEqualPolicy
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import com.navi.base.utils.orZero
+import com.navi.naviwidgets.callbacks.WidgetCallback
+import com.navi.naviwidgets.composewidget.reusable.FooterButtonComposable
+import com.navi.naviwidgets.extensions.NaviCard
+import com.navi.naviwidgets.extensions.NaviImage
+import com.navi.naviwidgets.extensions.NaviTextWidgetized
+import com.navi.naviwidgets.extensions.debounceClickable
+import com.navi.naviwidgets.extensions.setContentPadding
+import com.navi.naviwidgets.extensions.setWidgetLayoutParams
+import com.navi.naviwidgets.models.response.CardWithListItemsWidgetData
+
+@Composable
+fun CardWithListItemsWidgetComposable(
+    cardWidget: CardWithListItemsWidgetData?,
+    widgetCallback: WidgetCallback? = null,
+) {
+    val data by remember(cardWidget) { mutableStateOf(cardWidget, neverEqualPolicy()) }
+
+    setWidgetLayoutParams(widgetLayoutParams = data?.widgetLayoutParams) {
+        data?.widgetData?.let { widgetData ->
+            NaviCard(
+                cardProperties = widgetData.cardProperties,
+                modifier =
+                    Modifier.fillMaxWidth()
+                        .debounceClickable(
+                            delayMillis = 600,
+                            onClick = {
+                                widgetData.cardCta?.let { ctaData ->
+                                    widgetCallback?.onClick(ctaData)
+                                }
+                            }
+                        )
+            ) {
+                Box(modifier = Modifier.fillMaxWidth()) {
+                    widgetData.tagTitle?.text?.let {
+                        NaviTextWidgetized(
+                            textFieldData = widgetData.tagTitle,
+                            widgetCallback = widgetCallback,
+                            modifier = Modifier.align(Alignment.TopEnd)
+                        )
+                    }
+                    Column {
+                        Row(
+                            modifier =
+                                Modifier.fillMaxWidth()
+                                    .setContentPadding(
+                                        widgetData.titleLayoutProperties?.contentPadding
+                                    )
+                        ) {
+                            widgetData.cardImage?.url?.let {
+                                NaviImage(
+                                    imageFieldData = widgetData.cardImage,
+                                    widgetCallback = widgetCallback,
+                                    modifier =
+                                        Modifier.size(40.dp).align(Alignment.CenterVertically)
+                                )
+                            }
+                            widgetData.leftTitle?.text?.let {
+                                NaviTextWidgetized(
+                                    textFieldData = widgetData.leftTitle,
+                                    widgetCallback = widgetCallback,
+                                    modifier = Modifier.align(Alignment.CenterVertically)
+                                )
+                            }
+                        }
+                        widgetData.listData?.let { listData ->
+                            Box(contentAlignment = Alignment.TopCenter) {
+                                Column(
+                                    modifier =
+                                        Modifier.fillMaxWidth()
+                                            .setContentPadding(
+                                                listData.listContainerProperties?.contentPadding
+                                            )
+                                ) {
+                                    listData.items?.forEach { item ->
+                                        Box(modifier = Modifier.fillMaxWidth()) {
+                                            NaviTextWidgetized(
+                                                textFieldData = item,
+                                                widgetCallback = widgetCallback
+                                            )
+                                        }
+                                    }
+                                }
+                            }
+                        }
+
+                        Row(
+                            modifier =
+                                Modifier.fillMaxWidth()
+                                    .setContentPadding(
+                                        widgetData.footerLayoutProperties?.contentPadding
+                                    ),
+                            horizontalArrangement = Arrangement.SpaceBetween
+                        ) {
+                            widgetData.leftFooter?.let { leftFooter ->
+                                FooterButtonComposable(
+                                    data = leftFooter,
+                                    widgetCallback = widgetCallback,
+                                    modifier = Modifier.weight(1f).height(40.dp)
+                                )
+                            }
+                            Spacer(modifier = Modifier.width(widgetData.footerSpacing.orZero().dp))
+                            widgetData.rightFooter?.let { rightFooter ->
+                                FooterButtonComposable(
+                                    data = rightFooter,
+                                    widgetCallback = widgetCallback,
+                                    modifier = Modifier.weight(1f).height(40.dp)
+                                )
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/android/navi-widgets/src/main/java/com/navi/naviwidgets/composewidget/widgets/FooterSectionWidgetComposable.kt b/android/navi-widgets/src/main/java/com/navi/naviwidgets/composewidget/widgets/FooterSectionWidgetComposable.kt
index f0f149ee0f..7ad7d4da5f 100644
--- a/android/navi-widgets/src/main/java/com/navi/naviwidgets/composewidget/widgets/FooterSectionWidgetComposable.kt
+++ b/android/navi-widgets/src/main/java/com/navi/naviwidgets/composewidget/widgets/FooterSectionWidgetComposable.kt
@@ -23,7 +23,8 @@ import com.navi.naviwidgets.models.response.FooterSectionWidgetData
 @Composable
 fun FooterSectionWidgetComposable(
     widgetData: FooterSectionWidgetData?,
-    widgetCallback: WidgetCallback? = null
+    widgetCallback: WidgetCallback? = null,
+    isFirstItemVisible: Boolean = false
 ) {
     val data by
         remember(
@@ -36,7 +37,8 @@ fun FooterSectionWidgetComposable(
                 data.footerWidgetList?.forEach { widgetData ->
                     GenericComposableWidgetFactory(
                         data = widgetData,
-                        widgetCallback = widgetCallback
+                        widgetCallback = widgetCallback,
+                        isFirstItemVisible = isFirstItemVisible
                     )
                 }
             }
diff --git a/android/navi-widgets/src/main/java/com/navi/naviwidgets/composewidget/widgets/FooterWithCardAndSnackBarWidgetComposable.kt b/android/navi-widgets/src/main/java/com/navi/naviwidgets/composewidget/widgets/FooterWithCardAndSnackBarWidgetComposable.kt
index e53259d983..ca851bf701 100644
--- a/android/navi-widgets/src/main/java/com/navi/naviwidgets/composewidget/widgets/FooterWithCardAndSnackBarWidgetComposable.kt
+++ b/android/navi-widgets/src/main/java/com/navi/naviwidgets/composewidget/widgets/FooterWithCardAndSnackBarWidgetComposable.kt
@@ -79,8 +79,8 @@ fun FooterWithCardAndSnackBarWidgetComposable(
                 horizontalArrangement = Arrangement.SpaceBetween,
                 modifier = Modifier.fillMaxWidth().background(whiteColor).padding(horizontal = 8.dp)
             ) {
-                var primaryFooterButtonData = data.footerWithCardAndSnackbarWidgetBody?.footerButton
-                var secondaryFooterButtonData =
+                val primaryFooterButtonData = data.footerWithCardAndSnackbarWidgetBody?.footerButton
+                val secondaryFooterButtonData =
                     data.footerWithCardAndSnackbarWidgetBody?.secondaryFooterButton
                 if (secondaryFooterButtonData?.title?.text?.isNotNull() == true) {
                     FooterButtonComposable(
@@ -107,6 +107,13 @@ fun FooterWithCardAndSnackBarWidgetComposable(
                     )
                 }
             }
+            data.footerWithCardAndSnackbarWidgetBody?.bottomText?.text?.let {
+                NaviTextWidgetized(
+                    textFieldData = data.footerWithCardAndSnackbarWidgetBody.bottomText,
+                    modifier = Modifier.fillMaxWidth(),
+                    widgetCallback = widgetCallback
+                )
+            }
         }
     }
 }
diff --git a/android/navi-widgets/src/main/java/com/navi/naviwidgets/composewidget/widgets/GridWithAssetCardWidgetComposable.kt b/android/navi-widgets/src/main/java/com/navi/naviwidgets/composewidget/widgets/GridWithAssetCardWidgetComposable.kt
new file mode 100644
index 0000000000..cc9f2abb99
--- /dev/null
+++ b/android/navi-widgets/src/main/java/com/navi/naviwidgets/composewidget/widgets/GridWithAssetCardWidgetComposable.kt
@@ -0,0 +1,80 @@
+/*
+ *
+ *  * Copyright © 2024 by Navi Technologies Limited
+ *  * All rights reserved. Strictly confidential
+ *
+ */
+
+package com.navi.naviwidgets.composewidget.widgets
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.neverEqualPolicy
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import com.navi.base.utils.orZero
+import com.navi.naviwidgets.callbacks.WidgetCallback
+import com.navi.naviwidgets.extensions.NaviGrid
+import com.navi.naviwidgets.extensions.NaviTextWidgetized
+import com.navi.naviwidgets.extensions.getBackground
+import com.navi.naviwidgets.extensions.setContentPadding
+import com.navi.naviwidgets.extensions.setWidgetLayoutParams
+import com.navi.naviwidgets.models.response.GridWithAssetCardWidgetData
+
+@Composable
+fun GridWithAssetCardWidgetComposable(
+    gridWithAssetCardWidgetData: GridWithAssetCardWidgetData?,
+    widgetCallback: WidgetCallback? = null
+) {
+    val data by
+        remember(
+            key1 = gridWithAssetCardWidgetData,
+            calculation = { mutableStateOf(gridWithAssetCardWidgetData, neverEqualPolicy()) }
+        )
+    setWidgetLayoutParams(widgetLayoutParams = data?.widgetLayoutParams) {
+        data?.widgetData?.let { data ->
+            Column(
+                modifier =
+                    Modifier.getBackground(data.background)
+                        .setContentPadding(data.background?.contentPadding)
+            ) {
+                data.leftTitle?.text?.let {
+                    NaviTextWidgetized(
+                        textFieldData = data.leftTitle,
+                        widgetCallback = widgetCallback,
+                    )
+                }
+                data.leftSubtitle?.text?.let {
+                    NaviTextWidgetized(
+                        textFieldData = data.leftSubtitle,
+                        widgetCallback = widgetCallback,
+                    )
+                }
+                data.gridData?.let { gridData ->
+                    NaviGrid(
+                        itemCount = gridData.items?.size.orZero(),
+                        spanCount = gridData.spanCount.orZero(),
+                        modifier = Modifier.fillMaxWidth()
+                    ) { index ->
+                        AssetCardComposable(
+                            modifier = Modifier.padding(horizontal = 8.dp, vertical = 8.dp),
+                            assetCardData = gridData.items?.get(index),
+                            widgetCallback = widgetCallback
+                        )
+                    }
+                }
+                data.leftFooterTitle?.text?.let {
+                    NaviTextWidgetized(
+                        textFieldData = data.leftFooterTitle,
+                        widgetCallback = widgetCallback,
+                    )
+                }
+            }
+        }
+    }
+}
diff --git a/android/navi-widgets/src/main/java/com/navi/naviwidgets/composewidget/widgets/HorizontalCardCarouselWidgetComposable.kt b/android/navi-widgets/src/main/java/com/navi/naviwidgets/composewidget/widgets/HorizontalCardCarouselWidgetComposable.kt
new file mode 100644
index 0000000000..6bdc81124f
--- /dev/null
+++ b/android/navi-widgets/src/main/java/com/navi/naviwidgets/composewidget/widgets/HorizontalCardCarouselWidgetComposable.kt
@@ -0,0 +1,74 @@
+/*
+ *
+ *  * Copyright © 2024 by Navi Technologies Limited
+ *  * All rights reserved. Strictly confidential
+ *
+ */
+
+package com.navi.naviwidgets.composewidget.widgets
+
+import androidx.compose.foundation.horizontalScroll
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.layout.widthIn
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.neverEqualPolicy
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import com.navi.base.utils.orZero
+import com.navi.naviwidgets.callbacks.WidgetCallback
+import com.navi.naviwidgets.extensions.NaviCard
+import com.navi.naviwidgets.extensions.NaviTextWidgetized
+import com.navi.naviwidgets.extensions.setWidgetLayoutParams
+import com.navi.naviwidgets.models.response.ContentCard
+import com.navi.naviwidgets.models.response.HorizontalCardCarouselWidgetData
+
+@Composable
+fun HorizontalCardCarouselWidgetComposable(
+    horizontalCardCarouselWidgetData: HorizontalCardCarouselWidgetData?,
+    widgetCallback: WidgetCallback? = null
+) {
+    val data by
+        remember(
+            key1 = horizontalCardCarouselWidgetData,
+            calculation = { mutableStateOf(horizontalCardCarouselWidgetData, neverEqualPolicy()) }
+        )
+    setWidgetLayoutParams(widgetLayoutParams = data?.widgetLayoutParams) {
+        data?.widgetData?.let { widgetData ->
+            widgetData.cardList?.let { list ->
+                Row(
+                    modifier =
+                        Modifier.horizontalScroll(rememberScrollState())
+                            .padding(start = widgetData.itemSpacing.orZero().dp),
+                ) {
+                    list.forEach { data ->
+                        TitleWithIconCardComposable(data, widgetCallback)
+                        Spacer(modifier = Modifier.width(widgetData.itemSpacing.orZero().dp))
+                    }
+                }
+            }
+        }
+    }
+}
+
+@Composable
+fun TitleWithIconCardComposable(data: ContentCard, widgetCallback: WidgetCallback?) {
+    NaviCard(
+        cardProperties = data.cardProperties,
+        modifier = Modifier.widthIn(min = screenWidth * 0.7f)
+    ) {
+        data.content?.text.let {
+            NaviTextWidgetized(
+                textFieldData = data.content,
+                widgetCallback = widgetCallback,
+                modifier = Modifier
+            )
+        }
+    }
+}
diff --git a/android/navi-widgets/src/main/java/com/navi/naviwidgets/composewidget/widgets/ImageTitleCardWidgetComposable.kt b/android/navi-widgets/src/main/java/com/navi/naviwidgets/composewidget/widgets/ImageTitleCardWidgetComposable.kt
index 4063203186..a5a7e33b6c 100644
--- a/android/navi-widgets/src/main/java/com/navi/naviwidgets/composewidget/widgets/ImageTitleCardWidgetComposable.kt
+++ b/android/navi-widgets/src/main/java/com/navi/naviwidgets/composewidget/widgets/ImageTitleCardWidgetComposable.kt
@@ -9,6 +9,7 @@ package com.navi.naviwidgets.composewidget.widgets
 
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.aspectRatio
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
@@ -21,6 +22,7 @@ import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
+import com.navi.base.utils.isNotNullAndNotEmpty
 import com.navi.naviwidgets.callbacks.WidgetCallback
 import com.navi.naviwidgets.extensions.NaviCard
 import com.navi.naviwidgets.extensions.NaviImage
@@ -38,48 +40,60 @@ fun ImageTitleCardWidgetComposable(
     setWidgetLayoutParams(widgetLayoutParams = data?.widgetLayoutParams) {
         data?.widgetData?.let { data ->
             NaviCard(cardProperties = data.cardData) {
-                Row(
-                    modifier =
-                        Modifier.fillMaxWidth()
-                            .debounceClickable(
-                                onClick = { data.cta?.let { widgetCallback?.onClick(it) } }
-                            ),
-                    verticalAlignment = Alignment.CenterVertically
-                ) {
-                    data.leftIcon?.let {
-                        NaviImage(
-                            imageFieldData = it,
-                            widgetCallback = widgetCallback,
-                            modifier = Modifier.padding(start = 16.dp).size(40.dp),
-                            debounceDelay = 600
-                        )
-                    }
-                    Column(
-                        modifier = Modifier.weight(1f).padding(horizontal = 8.dp, vertical = 16.dp)
+                if (data.icon?.url.isNotNullAndNotEmpty()) {
+                    NaviImage(
+                        imageFieldData = data.icon,
+                        widgetCallback = widgetCallback,
+                        modifier =
+                            Modifier.fillMaxWidth()
+                                .aspectRatio(data.icon?.aspectRatio?.toFloat() ?: 1f),
+                        debounceDelay = 600
+                    )
+                } else {
+                    Row(
+                        modifier =
+                            Modifier.fillMaxWidth()
+                                .debounceClickable(
+                                    onClick = { data.cta?.let { widgetCallback?.onClick(it) } }
+                                ),
+                        verticalAlignment = Alignment.CenterVertically
                     ) {
-                        data.title?.text?.let {
-                            NaviTextWidgetized(
-                                textFieldData = data?.title,
+                        data.leftIcon?.let {
+                            NaviImage(
+                                imageFieldData = it,
                                 widgetCallback = widgetCallback,
+                                modifier = Modifier.padding(start = 16.dp).size(40.dp),
                                 debounceDelay = 600
                             )
                         }
-                        data.subTitle?.text?.let {
-                            NaviTextWidgetized(
-                                textFieldData = data.subTitle,
+                        Column(
+                            modifier =
+                                Modifier.weight(1f).padding(horizontal = 8.dp, vertical = 16.dp)
+                        ) {
+                            data.title?.text?.let {
+                                NaviTextWidgetized(
+                                    textFieldData = data.title,
+                                    widgetCallback = widgetCallback,
+                                    debounceDelay = 600
+                                )
+                            }
+                            data.subTitle?.text?.let {
+                                NaviTextWidgetized(
+                                    textFieldData = data.subTitle,
+                                    widgetCallback = widgetCallback,
+                                    debounceDelay = 600
+                                )
+                            }
+                        }
+                        data.rightIcon?.let {
+                            NaviImage(
+                                imageFieldData = it,
                                 widgetCallback = widgetCallback,
-                                debounceDelay = 600
+                                debounceDelay = 600,
+                                modifier = Modifier.height(75.dp).width(79.dp)
                             )
                         }
                     }
-                    data.rightIcon?.let {
-                        NaviImage(
-                            imageFieldData = it,
-                            widgetCallback = widgetCallback,
-                            debounceDelay = 600,
-                            modifier = Modifier.height(75.dp).width(79.dp)
-                        )
-                    }
                 }
             }
         }
diff --git a/android/navi-widgets/src/main/java/com/navi/naviwidgets/composewidget/widgets/PolicyCardCarouselWidgetComposable.kt b/android/navi-widgets/src/main/java/com/navi/naviwidgets/composewidget/widgets/PolicyCardCarouselWidgetComposable.kt
index ccb0a60ba2..75b6c89607 100644
--- a/android/navi-widgets/src/main/java/com/navi/naviwidgets/composewidget/widgets/PolicyCardCarouselWidgetComposable.kt
+++ b/android/navi-widgets/src/main/java/com/navi/naviwidgets/composewidget/widgets/PolicyCardCarouselWidgetComposable.kt
@@ -32,6 +32,7 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.unit.dp
+import com.navi.base.utils.orTrue
 import com.navi.base.utils.orZero
 import com.navi.naviwidgets.R
 import com.navi.naviwidgets.callbacks.WidgetCallback
@@ -86,7 +87,9 @@ fun PolicyCardCarouselWidgetComposable(
                         )
                     }
                     Spacer(modifier = Modifier.height(16.dp))
-                    DotsIndicator(pageCount = itemCount, currentPage = pagerState.currentPage)
+                    if (widget.policyCardCarouselWidgetBody?.showDotsIndicator.orTrue()) {
+                        DotsIndicator(pageCount = itemCount, currentPage = pagerState.currentPage)
+                    }
                 }
             }
         }
@@ -96,7 +99,7 @@ fun PolicyCardCarouselWidgetComposable(
 @Composable
 fun DotsIndicator(pageCount: Int, currentPage: Int) {
     Row(
-        modifier = Modifier.fillMaxWidth().height(8.dp).background(color = Color.White),
+        modifier = Modifier.fillMaxWidth().height(8.dp).background(color = Color.Transparent),
         horizontalArrangement = Arrangement.Center
     ) {
         for (i in 0 until pageCount) {
diff --git a/android/navi-widgets/src/main/java/com/navi/naviwidgets/composewidget/widgets/TableWithTooltipAndCtaWidgetComposable.kt b/android/navi-widgets/src/main/java/com/navi/naviwidgets/composewidget/widgets/TableWithTooltipAndCtaWidgetComposable.kt
new file mode 100644
index 0000000000..83aabaf3dd
--- /dev/null
+++ b/android/navi-widgets/src/main/java/com/navi/naviwidgets/composewidget/widgets/TableWithTooltipAndCtaWidgetComposable.kt
@@ -0,0 +1,245 @@
+/*
+ *
+ *  * Copyright © 2024 by Navi Technologies Limited
+ *  * All rights reserved. Strictly confidential
+ *
+ */
+
+package com.navi.naviwidgets.composewidget.widgets
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.offset
+import androidx.compose.material.Divider
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.neverEqualPolicy
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.dp
+import com.navi.base.model.Padding
+import com.navi.base.utils.orFalse
+import com.navi.base.utils.orZero
+import com.navi.design.utils.BackgroundDrawableData
+import com.navi.design.utils.isValidHexColor
+import com.navi.naviwidgets.callbacks.WidgetCallback
+import com.navi.naviwidgets.composewidget.reusable.FooterButtonComposable
+import com.navi.naviwidgets.composewidget.reusable.transparentHex
+import com.navi.naviwidgets.extensions.CustomTooltip
+import com.navi.naviwidgets.extensions.NaviCard
+import com.navi.naviwidgets.extensions.NaviTextWidgetized
+import com.navi.naviwidgets.extensions.debounceClickable
+import com.navi.naviwidgets.extensions.getBackground
+import com.navi.naviwidgets.extensions.getColorFromHexCode
+import com.navi.naviwidgets.extensions.setContentPadding
+import com.navi.naviwidgets.extensions.setWidgetLayoutParams
+import com.navi.naviwidgets.models.response.ColumnData
+import com.navi.naviwidgets.models.response.RowData
+import com.navi.naviwidgets.models.response.TableWithTooltipAndCtaWidgetData
+import com.navi.naviwidgets.models.response.TooltipData
+
+@Composable
+fun TableWithTooltipAndCtaWidgetComposable(
+    cardWidget: TableWithTooltipAndCtaWidgetData?,
+    widgetCallback: WidgetCallback? = null,
+) {
+    val data by remember(cardWidget) { mutableStateOf(cardWidget, neverEqualPolicy()) }
+
+    setWidgetLayoutParams(widgetLayoutParams = data?.widgetLayoutParams) {
+        data?.widgetData?.let { widgetData ->
+            Column {
+                NaviCard(
+                    cardProperties = widgetData.tableProperties,
+                    modifier =
+                        Modifier.fillMaxWidth()
+                            .debounceClickable(
+                                onClick = { widgetData.cta?.let { widgetCallback?.onClick(it) } },
+                                delayMillis = 600
+                            )
+                ) {
+                    Row {
+                        widgetData.columns?.forEach { column ->
+                            TableColumnComposable(
+                                columnData = column,
+                                modifier = Modifier.weight(1f),
+                                properties = column.columnProperties,
+                                widgetCallback
+                            )
+                        }
+                    }
+                }
+                widgetData.tableFooter?.let { footerData ->
+                    FooterButtonComposable(
+                        data = footerData,
+                        widgetCallback = widgetCallback,
+                        modifier = Modifier.fillMaxWidth()
+                    )
+                }
+            }
+        }
+    }
+}
+
+@Composable
+fun TableColumnComposable(
+    columnData: ColumnData,
+    modifier: Modifier,
+    properties: BackgroundDrawableData? = null,
+    widgetCallback: WidgetCallback? = null
+) {
+    Column(
+        modifier = modifier.getBackground(properties),
+        verticalArrangement = Arrangement.Center,
+        horizontalAlignment = Alignment.CenterHorizontally
+    ) {
+        columnData.title?.let {
+            NaviTextWidgetized(
+                textFieldData = it,
+                widgetCallback = widgetCallback,
+                debounceDelay = 600
+            )
+        }
+        columnData.tooltip?.let { tooltipData ->
+            CustomTooltipWithTopBottomBorder(tooltipData, widgetCallback)
+        }
+        columnData.data?.let { data ->
+            Column(
+                modifier = Modifier.setContentPadding(properties?.contentPadding),
+                verticalArrangement = Arrangement.Center,
+                horizontalAlignment = Alignment.CenterHorizontally
+            ) {
+                data.forEach { rowData ->
+                    TableRowComposable(
+                        rowData = rowData,
+                        properties = rowData.rowProperties,
+                        widgetCallback = widgetCallback
+                    )
+                }
+            }
+        }
+    }
+}
+
+@Composable
+fun CustomTooltipWithTopBottomBorder(tooltipData: TooltipData, widgetCallback: WidgetCallback?) {
+    Box(contentAlignment = Alignment.BottomCenter) {
+        CustomTooltip(
+            properties = tooltipData.properties,
+            modifier = Modifier.fillMaxWidth(),
+        ) {
+            Column(
+                modifier = Modifier.fillMaxWidth(),
+                horizontalAlignment = Alignment.CenterHorizontally
+            ) {
+                tooltipData.title?.let { title ->
+                    NaviTextWidgetized(
+                        textFieldData = title,
+                        widgetCallback = widgetCallback,
+                        debounceDelay = 600
+                    )
+                }
+            }
+        }
+
+        val peakHeightDp = tooltipData.properties?.tooltipShapeProperties?.peakHeight.orZero().dp
+        val backgroundColor =
+            getColorFromHexCode(
+                hex =
+                    tooltipData.properties?.background?.backgroundColor?.takeIf {
+                        isValidHexColor(it)
+                    } ?: transparentHex
+            )
+        val strokeColor =
+            tooltipData.properties?.background?.strokeColor?.let { getColorFromHexCode(it) }
+                ?: Color.White
+
+        val strokeWidth = tooltipData.properties?.background?.strokeWidth.orZero()
+
+        Box(modifier = Modifier.offset(y = peakHeightDp).background(color = backgroundColor)) {
+            Column(
+                modifier = Modifier.fillMaxWidth().offset(y = -peakHeightDp / 2),
+                horizontalAlignment = Alignment.CenterHorizontally
+            ) {
+                tooltipData.title?.let { title ->
+                    NaviTextWidgetized(
+                        textFieldData =
+                            title.copy(
+                                textLayoutParams =
+                                    title.textLayoutParams?.copy(
+                                        padding =
+                                            Padding(
+                                                topDp =
+                                                    title.textLayoutParams.padding?.topDp.orZero() -
+                                                        strokeWidth,
+                                                bottomDp =
+                                                    title.textLayoutParams.padding
+                                                        ?.bottomDp
+                                                        .orZero()
+                                            )
+                                    )
+                            ),
+                        widgetCallback = widgetCallback,
+                        debounceDelay = 600,
+                    )
+                }
+            }
+
+            Spacer(
+                modifier =
+                    Modifier.fillMaxWidth()
+                        .height(strokeWidth.dp)
+                        .background(color = strokeColor)
+                        .align(Alignment.BottomCenter)
+            )
+        }
+    }
+}
+
+@Composable
+fun TableRowComposable(
+    rowData: RowData,
+    properties: BackgroundDrawableData? = null,
+    widgetCallback: WidgetCallback?
+) {
+    Column(
+        modifier = Modifier,
+        horizontalAlignment = Alignment.CenterHorizontally,
+        verticalArrangement = Arrangement.Center
+    ) {
+        Column(
+            modifier =
+                Modifier.setContentPadding(properties?.contentPadding).getBackground(properties),
+            horizontalAlignment = Alignment.CenterHorizontally,
+            verticalArrangement = Arrangement.Center
+        ) {
+            rowData.cell?.let { cell ->
+                cell.title?.let {
+                    NaviTextWidgetized(textFieldData = it, widgetCallback = widgetCallback)
+                }
+                cell.subtitle?.let {
+                    NaviTextWidgetized(textFieldData = it, widgetCallback = widgetCallback)
+                }
+            }
+        }
+        if (rowData.showDivider.orFalse()) {
+            val dividerColor =
+                rowData.dividerProperties?.strokeColor?.let { getColorFromHexCode(it) }
+                    ?: Color.White
+            Divider(
+                color = dividerColor,
+                modifier =
+                    Modifier.fillMaxWidth()
+                        .height(rowData.dividerProperties?.strokeWidth.orZero().dp)
+            )
+        }
+    }
+}
diff --git a/android/navi-widgets/src/main/java/com/navi/naviwidgets/composewidget/widgets/TitleCardCtaWidgetComposable.kt b/android/navi-widgets/src/main/java/com/navi/naviwidgets/composewidget/widgets/TitleCardCtaWidgetComposable.kt
new file mode 100644
index 0000000000..8888aa675f
--- /dev/null
+++ b/android/navi-widgets/src/main/java/com/navi/naviwidgets/composewidget/widgets/TitleCardCtaWidgetComposable.kt
@@ -0,0 +1,131 @@
+/*
+ *
+ *  * Copyright © 2024 by Navi Technologies Limited
+ *  * All rights reserved. Strictly confidential
+ *
+ */
+
+package com.navi.naviwidgets.composewidget.widgets
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.neverEqualPolicy
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import com.navi.base.utils.orZero
+import com.navi.naviwidgets.callbacks.WidgetCallback
+import com.navi.naviwidgets.composewidget.reusable.FooterButtonComposable
+import com.navi.naviwidgets.extensions.NaviCard
+import com.navi.naviwidgets.extensions.NaviImage
+import com.navi.naviwidgets.extensions.NaviTextWidgetized
+import com.navi.naviwidgets.extensions.getBackground
+import com.navi.naviwidgets.extensions.setWidgetLayoutParams
+import com.navi.naviwidgets.models.response.TitleCardCtaWidgetData
+
+@Composable
+fun TitleCardCtaWidgetComposable(
+    titleCardCtaWidgetData: TitleCardCtaWidgetData?,
+    widgetCallback: WidgetCallback? = null
+) {
+    val data by
+        remember(
+            key1 = titleCardCtaWidgetData,
+            calculation = { mutableStateOf(titleCardCtaWidgetData, neverEqualPolicy()) }
+        )
+    setWidgetLayoutParams(widgetLayoutParams = data?.widgetLayoutParams) {
+        data?.widgetData?.let { data ->
+            Box(modifier = Modifier.fillMaxWidth()) {
+                Column(
+                    modifier = Modifier.fillMaxWidth().getBackground(data.background),
+                    verticalArrangement = Arrangement.Bottom
+                ) {
+                    data.curveImage?.iconCode.let {
+                        NaviImage(imageFieldData = data.curveImage, widgetCallback = widgetCallback)
+                    }
+                }
+                Column(
+                    modifier = Modifier.padding(horizontal = 16.dp),
+                    horizontalAlignment = Alignment.CenterHorizontally
+                ) {
+                    data.title?.text.let {
+                        NaviTextWidgetized(
+                            textFieldData = data.title,
+                            widgetCallback = widgetCallback
+                        )
+                    }
+                    data.card?.let { cardData ->
+                        NaviCard(cardProperties = cardData.cardProperties) {
+                            Column {
+                                Row {
+                                    Column {
+                                        cardData.leftTitle?.text.let {
+                                            NaviTextWidgetized(
+                                                textFieldData = cardData.leftTitle,
+                                                widgetCallback = widgetCallback
+                                            )
+                                        }
+                                        cardData.leftSubtitle?.text.let {
+                                            NaviTextWidgetized(
+                                                textFieldData = cardData.leftSubtitle,
+                                                widgetCallback = widgetCallback
+                                            )
+                                        }
+                                    }
+                                    Spacer(modifier = Modifier.width(cardData.spacing.orZero().dp))
+                                    Column {
+                                        cardData.rightTitle?.text.let {
+                                            NaviTextWidgetized(
+                                                textFieldData = cardData.rightTitle,
+                                                widgetCallback = widgetCallback
+                                            )
+                                        }
+                                        Row(horizontalArrangement = Arrangement.Center) {
+                                            cardData.iconList?.let { list ->
+                                                Box {
+                                                    list.forEach { icon ->
+                                                        icon.url?.let {
+                                                            NaviImage(
+                                                                imageFieldData = icon,
+                                                                widgetCallback = widgetCallback
+                                                            )
+                                                        }
+                                                    }
+                                                }
+                                            }
+                                            cardData.rightSubtitle?.text.let {
+                                                NaviTextWidgetized(
+                                                    textFieldData = cardData.rightSubtitle,
+                                                    widgetCallback = widgetCallback
+                                                )
+                                            }
+                                        }
+                                    }
+                                }
+                                Row(horizontalArrangement = Arrangement.Center) {
+                                    cardData.footerButton?.let { footerButton ->
+                                        FooterButtonComposable(
+                                            data = footerButton,
+                                            widgetCallback = widgetCallback,
+                                            modifier = Modifier.fillMaxWidth()
+                                        )
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/android/navi-widgets/src/main/java/com/navi/naviwidgets/composewidget/widgets/TitleContentFooterCardWidgetComposable.kt b/android/navi-widgets/src/main/java/com/navi/naviwidgets/composewidget/widgets/TitleContentFooterCardWidgetComposable.kt
new file mode 100644
index 0000000000..11e5d0ae0b
--- /dev/null
+++ b/android/navi-widgets/src/main/java/com/navi/naviwidgets/composewidget/widgets/TitleContentFooterCardWidgetComposable.kt
@@ -0,0 +1,117 @@
+/*
+ *
+ *  * Copyright © 2024 by Navi Technologies Limited
+ *  * All rights reserved. Strictly confidential
+ *
+ */
+
+package com.navi.naviwidgets.composewidget.widgets
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.selection.selectableGroup
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Star
+import androidx.compose.material.icons.outlined.Star
+import androidx.compose.material3.Icon
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.neverEqualPolicy
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.unit.dp
+import com.navi.design.utils.isValidHexColor
+import com.navi.naviwidgets.callbacks.WidgetCallback
+import com.navi.naviwidgets.composewidget.reusable.transparentHex
+import com.navi.naviwidgets.extensions.NaviCard
+import com.navi.naviwidgets.extensions.NaviImage
+import com.navi.naviwidgets.extensions.NaviTextWidgetized
+import com.navi.naviwidgets.extensions.getColorFromHexCode
+import com.navi.naviwidgets.extensions.setWidgetLayoutParams
+import com.navi.naviwidgets.models.Rating
+import com.navi.naviwidgets.models.TitleContentFooterCardWidgetData
+
+@Composable
+fun TitleContentFooterCardWidgetComposable(
+    titleContentFooterCardWidgetData: TitleContentFooterCardWidgetData?,
+    widgetCallback: WidgetCallback? = null
+) {
+    val data by
+        remember(
+            key1 = titleContentFooterCardWidgetData,
+            calculation = { mutableStateOf(titleContentFooterCardWidgetData, neverEqualPolicy()) }
+        )
+    setWidgetLayoutParams(widgetLayoutParams = data?.widgetLayoutParams) {
+        data?.widgetData?.let { data ->
+            NaviCard(modifier = Modifier.fillMaxWidth(), cardProperties = data.cardProperties) {
+                Column {
+                    data.title?.let { title ->
+                        NaviTextWidgetized(textFieldData = title, widgetCallback = widgetCallback)
+                    }
+                    data.content?.text.let {
+                        NaviTextWidgetized(
+                            textFieldData = data.content,
+                            widgetCallback = widgetCallback
+                        )
+                    }
+                    Row(verticalAlignment = Alignment.CenterVertically) {
+                        data.footerIcon?.url.let {
+                            NaviImage(
+                                imageFieldData = data.footerIcon,
+                                widgetCallback = widgetCallback,
+                                modifier = Modifier.size(28.dp)
+                            )
+                        }
+                        Spacer(modifier = Modifier.width(10.dp))
+                        Column {
+                            data.footerText?.text.let {
+                                NaviTextWidgetized(
+                                    textFieldData = data.footerText,
+                                    widgetCallback = widgetCallback
+                                )
+                            }
+                            data.rating?.let { rating -> StarRatingBar(rating = rating) }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+@Composable
+fun StarRatingBar(rating: Rating) {
+    val density = LocalDensity.current.density
+    val starSize = (3.5f * density).dp
+    val starSpacing = (0.8f * density).dp
+
+    val selectedColor = rating.selectedColor?.takeIf { isValidHexColor(it) } ?: transparentHex
+    val unSelectedColor = rating.unSelectedColor?.takeIf { isValidHexColor(it) } ?: transparentHex
+
+    rating.filledIcon?.let {
+        Row(modifier = Modifier.selectableGroup(), verticalAlignment = Alignment.CenterVertically) {
+            rating.noOfIcon?.let {
+                for (i in 1..rating.noOfIcon) {
+                    val isRated = i <= rating.filledIcon
+                    val icon = if (isRated) Icons.Filled.Star else Icons.Outlined.Star
+                    val iconTintColor = if (isRated) selectedColor else unSelectedColor
+                    Icon(
+                        imageVector = icon,
+                        contentDescription = null,
+                        tint = getColorFromHexCode(hex = iconTintColor),
+                        modifier = Modifier.width(starSize).height(starSize)
+                    )
+                    Spacer(modifier = Modifier.width(starSpacing))
+                }
+            }
+        }
+    }
+}
diff --git a/android/navi-widgets/src/main/java/com/navi/naviwidgets/composewidget/widgets/TitleContentImageFooterWithCtaWidgetComposable.kt b/android/navi-widgets/src/main/java/com/navi/naviwidgets/composewidget/widgets/TitleContentImageFooterWithCtaWidgetComposable.kt
new file mode 100644
index 0000000000..722cd7a32c
--- /dev/null
+++ b/android/navi-widgets/src/main/java/com/navi/naviwidgets/composewidget/widgets/TitleContentImageFooterWithCtaWidgetComposable.kt
@@ -0,0 +1,104 @@
+/*
+ *
+ *  * Copyright © 2024 by Navi Technologies Limited
+ *  * All rights reserved. Strictly confidential
+ *
+ */
+
+package com.navi.naviwidgets.composewidget.widgets
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.aspectRatio
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.neverEqualPolicy
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import com.navi.base.utils.isNotNull
+import com.navi.base.utils.orZero
+import com.navi.naviwidgets.callbacks.WidgetCallback
+import com.navi.naviwidgets.composewidget.reusable.FooterButtonComposable
+import com.navi.naviwidgets.extensions.NaviImage
+import com.navi.naviwidgets.extensions.NaviLottie
+import com.navi.naviwidgets.extensions.NaviTextWidgetized
+import com.navi.naviwidgets.extensions.getBackground
+import com.navi.naviwidgets.extensions.setContentPadding
+import com.navi.naviwidgets.extensions.setWidgetLayoutParams
+import com.navi.naviwidgets.models.TitleContentImageFooterWithCtaWidgetData
+
+@Composable
+fun TitleContentImageFooterWithCtaWidgetComposable(
+    titleContentImageFooterWithCtaWidgetData: TitleContentImageFooterWithCtaWidgetData?,
+    widgetCallback: WidgetCallback? = null
+) {
+    val data by
+        remember(
+            key1 = titleContentImageFooterWithCtaWidgetData,
+            calculation = {
+                mutableStateOf(titleContentImageFooterWithCtaWidgetData, neverEqualPolicy())
+            }
+        )
+    setWidgetLayoutParams(widgetLayoutParams = data?.widgetLayoutParams) {
+        data?.widgetData?.let { data ->
+            Column(
+                modifier =
+                    Modifier.fillMaxWidth()
+                        .getBackground(data.background)
+                        .setContentPadding(data.background?.contentPadding),
+                horizontalAlignment = Alignment.CenterHorizontally
+            ) {
+                data.title?.let { title ->
+                    NaviTextWidgetized(textFieldData = title, widgetCallback = widgetCallback)
+                }
+                data.content?.text.let {
+                    NaviTextWidgetized(
+                        textFieldData = data.content,
+                        widgetCallback = widgetCallback
+                    )
+                }
+                if (data.lottie?.lottieUrl.isNotNull()) {
+                    data.lottie?.let {
+                        NaviLottie(
+                            lottie = it,
+                            modifier = Modifier.size(width = 176.dp, height = 176.dp)
+                        )
+                    }
+                } else {
+                    data.image?.url.let {
+                        NaviImage(
+                            imageFieldData = data.image,
+                            widgetCallback = widgetCallback,
+                            modifier =
+                                Modifier.fillMaxWidth()
+                                    .aspectRatio(data.image?.aspectRatio?.toFloat() ?: 1f)
+                        )
+                    }
+                }
+                data.footerText?.text.let {
+                    NaviTextWidgetized(
+                        textFieldData = data.footerText,
+                        widgetCallback = widgetCallback
+                    )
+                }
+                Column(
+                    modifier =
+                        Modifier.fillMaxWidth().padding(horizontal = data.buttonPadding.orZero().dp)
+                ) {
+                    data.footerButton?.let { footerButton ->
+                        FooterButtonComposable(
+                            data = footerButton,
+                            widgetCallback = widgetCallback,
+                            modifier = Modifier.fillMaxWidth()
+                        )
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/android/navi-widgets/src/main/java/com/navi/naviwidgets/composewidget/widgets/TitleWithButtonAndIconWidgetComposable.kt b/android/navi-widgets/src/main/java/com/navi/naviwidgets/composewidget/widgets/TitleWithButtonAndIconWidgetComposable.kt
new file mode 100644
index 0000000000..6b2fa28a74
--- /dev/null
+++ b/android/navi-widgets/src/main/java/com/navi/naviwidgets/composewidget/widgets/TitleWithButtonAndIconWidgetComposable.kt
@@ -0,0 +1,123 @@
+/*
+ *
+ *  * Copyright © 2024 by Navi Technologies Limited
+ *  * All rights reserved. Strictly confidential
+ *
+ */
+
+package com.navi.naviwidgets.composewidget.widgets
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Button
+import androidx.compose.material3.ButtonDefaults
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableLongStateOf
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.neverEqualPolicy
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.dp
+import com.navi.naviwidgets.callbacks.WidgetCallback
+import com.navi.naviwidgets.extensions.NaviCard
+import com.navi.naviwidgets.extensions.NaviImage
+import com.navi.naviwidgets.extensions.NaviTextWidgetized
+import com.navi.naviwidgets.extensions.debounceClickable
+import com.navi.naviwidgets.extensions.getColorFromHexCode
+import com.navi.naviwidgets.extensions.setWidgetLayoutParams
+import com.navi.naviwidgets.models.response.TitleWithButtonAndIconWidgetData
+
+@Composable
+fun TitleWithButtonAndIconWidgetComposable(
+    titleWithButtonAndIconWidgetData: TitleWithButtonAndIconWidgetData?,
+    widgetCallback: WidgetCallback? = null
+) {
+    val data by
+        remember(
+            key1 = titleWithButtonAndIconWidgetData,
+            calculation = { mutableStateOf(titleWithButtonAndIconWidgetData, neverEqualPolicy()) }
+        )
+    setWidgetLayoutParams(widgetLayoutParams = data?.widgetLayoutParams) {
+        data?.widgetData?.let { data ->
+            NaviCard(
+                cardProperties = data.background,
+                modifier =
+                    Modifier.debounceClickable(
+                        onClick = { data.button?.cta?.let { widgetCallback?.onClick(it) } }
+                    )
+            ) {
+                Row(verticalAlignment = Alignment.Bottom) {
+                    Column(
+                        modifier = Modifier.weight(1f),
+                        verticalArrangement = Arrangement.spacedBy(16.dp)
+                    ) {
+                        data.title?.text?.let {
+                            NaviTextWidgetized(
+                                textFieldData = data.title,
+                                widgetCallback = widgetCallback
+                            )
+                        }
+                        data.button?.let { data ->
+                            val buttonBgColor =
+                                data.backgroundColor?.let {
+                                    getColorFromHexCode(hex = it, Color.White)
+                                } ?: Color.White
+                            var lastClickTime by remember { mutableLongStateOf(0L) }
+                            data.title?.text?.let {
+                                Button(
+                                    modifier = Modifier.padding(bottom = 16.dp),
+                                    onClick = {
+                                        val currentTime = System.currentTimeMillis()
+                                        if (currentTime - lastClickTime >= 600) {
+                                            lastClickTime = currentTime
+                                            data.cta?.let { widgetCallback?.onClick(it) }
+                                        }
+                                    },
+                                    colors =
+                                        ButtonDefaults.buttonColors(
+                                            disabledContainerColor =
+                                                buttonBgColor.copy(alpha = 0.56f),
+                                            containerColor = buttonBgColor,
+                                        ),
+                                    shape = RoundedCornerShape(4.dp),
+                                    contentPadding =
+                                        PaddingValues(horizontal = 16.dp, vertical = 8.dp),
+                                ) {
+                                    NaviTextWidgetized(
+                                        textFieldData = data.title,
+                                    )
+                                    Spacer(modifier = Modifier.width(4.dp))
+                                    data.buttonIcon?.let { icon ->
+                                        NaviImage(
+                                            imageFieldData = icon,
+                                            widgetCallback = widgetCallback,
+                                            modifier = Modifier.size(16.dp)
+                                        )
+                                    }
+                                }
+                            }
+                        }
+                    }
+                    data.icon?.url?.let {
+                        NaviImage(
+                            imageFieldData = data.icon,
+                            widgetCallback = widgetCallback,
+                            modifier = Modifier.size(110.dp)
+                        )
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/android/navi-widgets/src/main/java/com/navi/naviwidgets/composewidget/widgets/TitleWithLeftRightAssetCardWidgetComposable.kt b/android/navi-widgets/src/main/java/com/navi/naviwidgets/composewidget/widgets/TitleWithLeftRightAssetCardWidgetComposable.kt
index 8534f10059..ff4c6ac34e 100644
--- a/android/navi-widgets/src/main/java/com/navi/naviwidgets/composewidget/widgets/TitleWithLeftRightAssetCardWidgetComposable.kt
+++ b/android/navi-widgets/src/main/java/com/navi/naviwidgets/composewidget/widgets/TitleWithLeftRightAssetCardWidgetComposable.kt
@@ -36,7 +36,7 @@ import com.navi.naviwidgets.extensions.NaviTextWidgetized
 import com.navi.naviwidgets.extensions.debounceClickable
 import com.navi.naviwidgets.extensions.getColorFromHexCode
 import com.navi.naviwidgets.extensions.setWidgetLayoutParams
-import com.navi.naviwidgets.models.response.TitleWithLeftRightAssetCardWidgetBody
+import com.navi.naviwidgets.models.response.AssetCardData
 import com.navi.naviwidgets.models.response.TitleWithLeftRightAssetCardWidgetData
 
 @Composable
@@ -77,7 +77,7 @@ fun TitleWithLeftRightAssetCardWidgetComposable(
 @Composable
 fun AssetCardComposable(
     modifier: Modifier,
-    assetCardData: TitleWithLeftRightAssetCardWidgetBody.AssetCardData?,
+    assetCardData: AssetCardData?,
     widgetCallback: WidgetCallback? = null
 ) {
     assetCardData?.let {
@@ -126,28 +126,29 @@ fun AssetCardComposable(
                     )
                     .padding(top = 16.dp, start = 16.dp)
         ) {
-            Row(modifier = Modifier.fillMaxWidth(), verticalAlignment = Alignment.Bottom) {
-                Column(
-                    modifier = Modifier.weight(1f),
-                    horizontalAlignment = Alignment.Start,
-                    verticalArrangement = Arrangement.Bottom
-                ) {
-                    assetCardData.title?.let { title ->
-                        NaviTextWidgetized(
-                            textFieldData = title,
+            Column {
+                assetCardData.title?.let { title ->
+                    NaviTextWidgetized(
+                        textFieldData = title,
+                    )
+                }
+                Row(modifier = Modifier.fillMaxWidth(), verticalAlignment = Alignment.Bottom) {
+                    Column(
+                        modifier = Modifier.weight(1f),
+                        horizontalAlignment = Alignment.Start,
+                        verticalArrangement = Arrangement.Bottom
+                    ) {
+                        assetCardData.ctaImage?.let { ctaImage ->
+                            NaviImage(imageFieldData = ctaImage, modifier = Modifier.size(24.dp))
+                        }
+                        Spacer(modifier = Modifier.height(16.dp))
+                    }
+                    assetCardData.cardImage?.let { cardImage ->
+                        NaviImage(
+                            imageFieldData = cardImage,
+                            modifier = Modifier.height(70.dp).width(70.dp)
                         )
                     }
-                    Spacer(modifier = Modifier.height(20.dp))
-                    assetCardData.ctaImage?.let { ctaImage ->
-                        NaviImage(imageFieldData = ctaImage, modifier = Modifier.size(24.dp))
-                    }
-                    Spacer(modifier = Modifier.height(16.dp))
-                }
-                assetCardData.cardImage?.let { cardImage ->
-                    NaviImage(
-                        imageFieldData = cardImage,
-                        modifier = Modifier.height(64.dp).width(74.dp)
-                    )
                 }
             }
         }
diff --git a/android/navi-widgets/src/main/java/com/navi/naviwidgets/extensions/ComposeWidgetExt.kt b/android/navi-widgets/src/main/java/com/navi/naviwidgets/extensions/ComposeWidgetExt.kt
index e7ba4c1e72..909f5ae55d 100644
--- a/android/navi-widgets/src/main/java/com/navi/naviwidgets/extensions/ComposeWidgetExt.kt
+++ b/android/navi-widgets/src/main/java/com/navi/naviwidgets/extensions/ComposeWidgetExt.kt
@@ -85,6 +85,7 @@ import com.airbnb.lottie.compose.LottieCompositionSpec
 import com.airbnb.lottie.compose.animateLottieCompositionAsState
 import com.airbnb.lottie.compose.rememberLottieComposition
 import com.google.gson.Gson
+import com.navi.alfred.utils.log
 import com.navi.base.model.Padding
 import com.navi.base.utils.EMPTY
 import com.navi.base.utils.isNotNull
@@ -94,6 +95,7 @@ import com.navi.design.font.FontWeightEnum
 import com.navi.design.theme.getFontWeight
 import com.navi.design.theme.ttComposeFontFamily
 import com.navi.design.utils.BackgroundDrawableData
+import com.navi.design.utils.Constants
 import com.navi.design.utils.getFontStyle
 import com.navi.design.utils.isValidHexColor
 import com.navi.design.utils.parseColorSafe
@@ -109,8 +111,10 @@ import com.navi.naviwidgets.models.response.TextFieldData
 import com.navi.naviwidgets.models.response.TooltipProperties
 import com.navi.naviwidgets.utils.KEY_CLICKABLE
 import com.navi.naviwidgets.utils.NaviWidgetIconUtils
+import com.navi.uitron.model.ui.ComposePadding
 import com.navi.uitron.model.ui.ContentAlignmentType
 import com.navi.uitron.model.ui.PeakDirection
+import com.navi.uitron.model.ui.VerticalAlignmentType
 import com.navi.uitron.utils.shapes.ToolTipShape
 import kotlinx.coroutines.delay
 import timber.log.Timber
@@ -204,7 +208,7 @@ fun NaviTextWidgetized(
         }
     } else textModifier = modifier
     Row(
-        verticalAlignment = Alignment.CenterVertically,
+        verticalAlignment = getVerticalAlignment(textFieldData?.verticalAlignment),
         modifier =
             textModifier
                 .getBackground(textFieldData?.backgroundDrawableData)
@@ -216,21 +220,18 @@ fun NaviTextWidgetized(
                 ),
         horizontalArrangement = getArrangement(textFieldData?.alignment)
     ) {
+        var imageModifier =
+            Modifier.padding(textFieldData?.textDrawableData?.padding.orZero().dp)
+                .setContentPadding(textFieldData?.textDrawableData?.contentPadding)
+        imageModifier =
+            if (textFieldData?.textDrawableData?.drawableSize.isNotNull()) {
+                imageModifier.size(textFieldData?.textDrawableData?.drawableSize.orZero().dp)
+            } else imageModifier
+
         textFieldData?.textDrawableData?.left?.let {
-            NaviImage(
-                imageFieldData = it,
-                modifier =
-                    Modifier.padding(textFieldData.textDrawableData.padding.orZero().dp)
-                        .padding(
-                            top = textFieldData.textDrawableData.contentPadding?.topDp.orZero().dp,
-                            bottom =
-                                textFieldData.textDrawableData.contentPadding?.bottomDp.orZero().dp,
-                            start =
-                                textFieldData.textDrawableData.contentPadding?.startDp.orZero().dp,
-                            end = textFieldData.textDrawableData.contentPadding?.endDp.orZero().dp
-                        )
-                        .size(textFieldData.textDrawableData.drawableSize.orZero().dp)
-            )
+            if (it.url.isNotNull() || it.iconCode.isNotNull()) {
+                NaviImage(imageFieldData = it, modifier = imageModifier)
+            }
         }
         textFieldData?.lottieDrawableData?.left?.let {
             val size = textFieldData.lottieDrawableData.drawableSize.orZero().dp
@@ -306,20 +307,9 @@ fun NaviTextWidgetized(
             NaviLottie(lottie = it, modifier = lottieModifier)
         }
         textFieldData?.textDrawableData?.right?.let {
-            NaviImage(
-                imageFieldData = it,
-                modifier =
-                    Modifier.padding(textFieldData.textDrawableData.padding.orZero().dp)
-                        .padding(
-                            top = textFieldData.textDrawableData.contentPadding?.topDp.orZero().dp,
-                            bottom =
-                                textFieldData.textDrawableData.contentPadding?.bottomDp.orZero().dp,
-                            start =
-                                textFieldData.textDrawableData.contentPadding?.startDp.orZero().dp,
-                            end = textFieldData.textDrawableData.contentPadding?.endDp.orZero().dp
-                        )
-                        .size(textFieldData.textDrawableData.drawableSize.orZero().dp)
-            )
+            if (it.url.isNotNull() || it.iconCode.isNotNull()) {
+                NaviImage(imageFieldData = it, modifier = imageModifier)
+            }
         }
     }
 }
@@ -369,6 +359,10 @@ fun NaviImage(
                 )
             }
         } ?: run { modifier }
+    imageModifier =
+        if (imageFieldData?.padding.isNotNull()) {
+            imageModifier.setImagePadding(imageFieldData?.padding)
+        } else imageModifier
     imageModifier =
         if (imageFieldData?.iconWidth.isNotNull()) {
             imageModifier.height(imageFieldData?.iconWidth.orZero().dp)
@@ -574,6 +568,14 @@ fun Modifier.getBackground(backgroundDrawableData: BackgroundDrawableData?): Mod
                             ),
                         shape = getShape(backgroundDrawableData)
                     )
+                Constants.RADIAL_GRADIENT ->
+                    this.background(
+                        brush =
+                            Brush.radialGradient(
+                                colors = gradientColors,
+                            ),
+                        shape = getShape(backgroundDrawableData)
+                    )
                 else ->
                     this.background(
                         brush = Brush.horizontalGradient(colors = gradientColors),
@@ -722,6 +724,7 @@ fun getBrush(gradient: Gradient?): Brush {
                     start = Offset(0f, 0f),
                     end = Offset(Float.POSITIVE_INFINITY, Float.POSITIVE_INFINITY)
                 )
+            Constants.RADIAL_GRADIENT -> Brush.radialGradient(colors = colors)
             else -> Brush.horizontalGradient(colors = colors)
         }
     }
@@ -813,6 +816,24 @@ fun getColorFromHexCode(hex: String, defaultColor: Color = Color.Transparent): C
     }
 }
 
+fun Modifier.setImagePadding(padding: ComposePadding?): Modifier {
+    var startPadding = zeroPadding
+    var topPadding = zeroPadding
+    var endPadding = zeroPadding
+    var bottomPadding = zeroPadding
+
+    try {
+        topPadding = padding?.top.orZero().dp
+        bottomPadding = padding?.bottom.orZero().dp
+        startPadding = padding?.start.orZero().dp
+        endPadding = padding?.end.orZero().dp
+    } catch (e: Exception) {
+        e.log()
+    }
+
+    return this.then(Modifier.padding(startPadding, topPadding, endPadding, bottomPadding))
+}
+
 fun Modifier.setCustomPadding(paddingString: String): Modifier {
     return try {
         val paddings = paddingString.split(",").map { it.trim().toFloatOrNull() }
@@ -988,6 +1009,15 @@ fun getArrangement(alignment: String?): Arrangement.Horizontal {
     }
 }
 
+fun getVerticalAlignment(verticalAlignment: String?): Alignment.Vertical {
+    return when (verticalAlignment) {
+        VerticalAlignmentType.Top.name -> Alignment.Top
+        VerticalAlignmentType.CenterVertically.name -> Alignment.CenterVertically
+        VerticalAlignmentType.Bottom.name -> Alignment.Bottom
+        else -> Alignment.CenterVertically
+    }
+}
+
 fun getLineHeight(lineSpacing: Int?): TextUnit {
     lineSpacing?.let {
         return TextUnit(it.toFloat(), TextUnitType.Sp)
diff --git a/android/navi-widgets/src/main/java/com/navi/naviwidgets/extensions/FloatingButtonOverlay.kt b/android/navi-widgets/src/main/java/com/navi/naviwidgets/extensions/FloatingButtonOverlay.kt
index 3c9039ee2c..8916cffedf 100644
--- a/android/navi-widgets/src/main/java/com/navi/naviwidgets/extensions/FloatingButtonOverlay.kt
+++ b/android/navi-widgets/src/main/java/com/navi/naviwidgets/extensions/FloatingButtonOverlay.kt
@@ -8,6 +8,7 @@
 package com.navi.naviwidgets.extensions
 
 import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.core.animateDpAsState
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Box
@@ -21,10 +22,10 @@ import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import com.navi.analytics.utils.NaviTrackEvent
 import com.navi.base.model.CtaData
-import com.navi.base.utils.orFalse
 import com.navi.naviwidgets.callbacks.WidgetCallback
 import com.navi.naviwidgets.models.response.FloatingButtonData
 import com.navi.uitron.utils.EMPTY
@@ -32,72 +33,85 @@ import com.navi.uitron.utils.EMPTY
 @Composable
 fun FloatingButtonOverlay(
     floatingButtonData: FloatingButtonData?,
-    isExpanded: Boolean?,
+    isExpanded: Boolean = false,
     widgetCallback: WidgetCallback? = null,
     screenName: String? = EMPTY,
-    onClick: (ctaData: CtaData?) -> Unit = {}
+    onClick: (ctaData: CtaData?) -> Unit = {},
+    updateWidgetMargin: Boolean = false,
 ) {
-    floatingButtonData?.let { floatingButtonData ->
-        LaunchedEffect(key1 = floatingButtonData.buttonData?.toString()) {
-            NaviTrackEvent.sendEvent(
-                floatingButtonData.metaData?.analyticsEventProperties,
-                screenName
-            )
+    floatingButtonData?.let { data ->
+        fun parseMargin(marginString: String?): List<Dp> {
+            return marginString?.trim()?.split(",")?.map { it.trim().toInt().dp }
+                ?: listOf(0.dp, 0.dp, 0.dp, 0.dp)
         }
+
+        val initialMargins = parseMargin(data.widgetLayoutParams?.margin)
+        val updatedMargins = parseMargin(data.updatedWidgetLayoutParams?.margin)
+
+        val animatedMargins =
+            List(4) { index ->
+                animateDpAsState(
+                        targetValue =
+                            if (updateWidgetMargin) updatedMargins[index]
+                            else initialMargins[index],
+                        label = ""
+                    )
+                    .value
+            }
+
+        LaunchedEffect(key1 = data.buttonData?.toString()) {
+            NaviTrackEvent.sendEvent(data.metaData?.analyticsEventProperties, screenName)
+        }
+
         Box(
             modifier = Modifier.fillMaxSize(),
-            contentAlignment = getContentAlignment(floatingButtonData.alignment)
+            contentAlignment = getContentAlignment(data.alignment)
         ) {
             Box(
                 modifier =
-                    Modifier.wrapContentSize().setMargin(floatingButtonData.widgetLayoutParams),
+                    Modifier.wrapContentSize()
+                        .padding(
+                            start = animatedMargins[0],
+                            top = animatedMargins[1],
+                            end = animatedMargins[2],
+                            bottom = animatedMargins[3]
+                        ),
                 contentAlignment = Alignment.TopStart
             ) {
                 Row(
                     modifier =
                         Modifier.padding(start = 2.dp, top = 4.dp)
                             .wrapContentSize()
-                            .getBackground(floatingButtonData.buttonData?.backgroundData)
+                            .getBackground(data.buttonData?.backgroundData)
                             .clickable(
                                 indication = null,
                                 interactionSource = remember { MutableInteractionSource() },
                                 onClick = {
-                                    floatingButtonData.cta?.let {
-                                        widgetCallback?.onClick(it) ?: onClick.invoke(it)
+                                    data.cta?.let { cta ->
+                                        widgetCallback?.onClick(cta) ?: onClick.invoke(cta)
                                     }
                                 }
                             )
                             .padding(8.dp),
-                    verticalAlignment = Alignment.CenterVertically,
+                    verticalAlignment = Alignment.CenterVertically
                 ) {
-                    Box {
-                        if (floatingButtonData.buttonData?.fabIcon != null) {
-                            NaviImage(
-                                modifier = Modifier.size(32.dp),
-                                imageFieldData = floatingButtonData.buttonData?.fabIcon
-                            )
-                        }
-                        if (floatingButtonData.buttonData?.fabIconLottie != null) {
-                            NaviLottie(
-                                modifier = Modifier.size(32.dp),
-                                lottie = floatingButtonData.buttonData.fabIconLottie
-                            )
-                        }
+                    data.buttonData?.fabIcon?.let {
+                        NaviImage(modifier = Modifier.size(32.dp), imageFieldData = it)
                     }
-                    AnimatedVisibility(visible = isExpanded.orFalse()) {
+                    data.buttonData?.fabIconLottie?.let {
+                        NaviLottie(modifier = Modifier.size(32.dp), lottie = it)
+                    }
+                    AnimatedVisibility(visible = isExpanded) {
                         NaviTextWidgetized(
-                            textFieldData = floatingButtonData.buttonData?.fabText,
+                            textFieldData = data.buttonData?.fabText,
                             modifier = Modifier.padding(start = 4.dp, end = 8.dp)
                         )
                     }
                 }
-                if (
-                    floatingButtonData.buttonData?.isLiveChat == true &&
-                        floatingButtonData.buttonData.liveChatData != null
-                ) {
+                if (data.buttonData?.isLiveChat == true && data.buttonData.liveChatData != null) {
                     NaviLottie(
                         modifier = Modifier.size(20.dp),
-                        lottie = floatingButtonData.buttonData.liveChatData
+                        lottie = data.buttonData.liveChatData
                     )
                 }
             }
diff --git a/android/navi-widgets/src/main/java/com/navi/naviwidgets/models/FooterWithCardAndSnackbarWidgetData.kt b/android/navi-widgets/src/main/java/com/navi/naviwidgets/models/FooterWithCardAndSnackbarWidgetData.kt
index e3fa8f9e73..f09025dfbe 100644
--- a/android/navi-widgets/src/main/java/com/navi/naviwidgets/models/FooterWithCardAndSnackbarWidgetData.kt
+++ b/android/navi-widgets/src/main/java/com/navi/naviwidgets/models/FooterWithCardAndSnackbarWidgetData.kt
@@ -10,6 +10,7 @@ package com.navi.naviwidgets.models
 import com.google.gson.annotations.SerializedName
 import com.navi.base.model.CtaData
 import com.navi.naviwidgets.interfaces.GenericWidgetInfo
+import com.navi.naviwidgets.models.response.ImageFieldData
 import com.navi.naviwidgets.models.response.TextFieldData
 import com.navi.naviwidgets.models.response.WidgetError
 
@@ -59,7 +60,9 @@ data class FooterWithCardAndSnackbarWidgetBody(
     @SerializedName("cardInfo") val cardInfo: FooterInfo? = null,
     @SerializedName("titleInfo") val titleInfo: TextFieldData? = null,
     @SerializedName("footerButton") val footerButton: FooterButtonData? = null,
-    @SerializedName("secondaryFooterButton") val secondaryFooterButton: FooterButtonData? = null
+    @SerializedName("secondaryFooterButton") val secondaryFooterButton: FooterButtonData? = null,
+    @SerializedName("animateFooter") val animateFooter: Boolean = false,
+    @SerializedName("bottomText") val bottomText: TextFieldData? = null
 )
 
 data class FooterInfo(
@@ -71,7 +74,8 @@ data class FooterButtonData(
     @SerializedName("title") val title: TextFieldData? = null,
     @SerializedName("backgroundColor") val backgroundColor: String? = null,
     @SerializedName("cta") val cta: CtaData? = null,
-    @SerializedName("state") val state: FooterButtonState? = null
+    @SerializedName("state") val state: FooterButtonState? = null,
+    @SerializedName("buttonIcon") val buttonIcon: ImageFieldData? = null,
 )
 
 enum class FooterButtonState {
diff --git a/android/navi-widgets/src/main/java/com/navi/naviwidgets/models/TitleContentFooterCardWidgetData.kt b/android/navi-widgets/src/main/java/com/navi/naviwidgets/models/TitleContentFooterCardWidgetData.kt
new file mode 100644
index 0000000000..1e69a0f2dc
--- /dev/null
+++ b/android/navi-widgets/src/main/java/com/navi/naviwidgets/models/TitleContentFooterCardWidgetData.kt
@@ -0,0 +1,43 @@
+/*
+ *
+ *  * Copyright © 2024 by Navi Technologies Limited
+ *  * All rights reserved. Strictly confidential
+ *
+ */
+
+package com.navi.naviwidgets.models
+
+import com.google.gson.annotations.SerializedName
+import com.navi.naviwidgets.models.response.CardProperties
+import com.navi.naviwidgets.models.response.ImageFieldData
+import com.navi.naviwidgets.models.response.TextFieldData
+
+data class TitleContentFooterCardWidgetData(
+    @SerializedName("widgetData") var widgetData: TitleContentFooterCardWidgetBody? = null
+) :
+    GenericWidgetDataInfo(
+        widgetId = WIDGET_NAME,
+        widgetNameForBaseAdapter = WIDGET_NAME,
+        isDependentWidget = false,
+        dependencyWidgetId = null,
+        isDependencyWidgetShowing = false,
+        widgetError = null
+    )
+
+private const val WIDGET_NAME = "TITLE_CONTENT_FOOTER_CARD_WIDGET"
+
+data class TitleContentFooterCardWidgetBody(
+    @SerializedName("cardProperties") val cardProperties: CardProperties? = null,
+    @SerializedName("title") val title: TextFieldData? = null,
+    @SerializedName("content") val content: TextFieldData? = null,
+    @SerializedName("footerIcon") val footerIcon: ImageFieldData? = null,
+    @SerializedName("footerText") val footerText: TextFieldData? = null,
+    @SerializedName("rating") val rating: Rating? = null
+)
+
+data class Rating(
+    @SerializedName("filledIcon") val filledIcon: Int? = null,
+    @SerializedName("noOfIcon") val noOfIcon: Int? = null,
+    @SerializedName("selectedColor") val selectedColor: String? = null,
+    @SerializedName("unSelectedColor") val unSelectedColor: String? = null,
+)
diff --git a/android/navi-widgets/src/main/java/com/navi/naviwidgets/models/TitleContentImageFooterWithCtaWidget.kt b/android/navi-widgets/src/main/java/com/navi/naviwidgets/models/TitleContentImageFooterWithCtaWidget.kt
new file mode 100644
index 0000000000..f75ed091e1
--- /dev/null
+++ b/android/navi-widgets/src/main/java/com/navi/naviwidgets/models/TitleContentImageFooterWithCtaWidget.kt
@@ -0,0 +1,38 @@
+/*
+ *
+ *  * Copyright © 2024 by Navi Technologies Limited
+ *  * All rights reserved. Strictly confidential
+ *
+ */
+
+package com.navi.naviwidgets.models
+
+import com.google.gson.annotations.SerializedName
+import com.navi.design.utils.BackgroundDrawableData
+import com.navi.naviwidgets.models.response.ImageFieldData
+import com.navi.naviwidgets.models.response.TextFieldData
+
+data class TitleContentImageFooterWithCtaWidgetData(
+    @SerializedName("widgetData") var widgetData: TitleContentImageFooterWithCtaWidgetBody? = null
+) :
+    GenericWidgetDataInfo(
+        widgetId = WIDGET_NAME,
+        widgetNameForBaseAdapter = WIDGET_NAME,
+        isDependentWidget = false,
+        dependencyWidgetId = null,
+        isDependencyWidgetShowing = false,
+        widgetError = null
+    )
+
+private const val WIDGET_NAME = "TITLE_CONTENT_FOOTER_CARD_WIDGET"
+
+data class TitleContentImageFooterWithCtaWidgetBody(
+    @SerializedName("background") val background: BackgroundDrawableData? = null,
+    @SerializedName("title") val title: TextFieldData? = null,
+    @SerializedName("content") val content: TextFieldData? = null,
+    @SerializedName("image") val image: ImageFieldData? = null,
+    @SerializedName("lottie") val lottie: LottieFieldData? = null,
+    @SerializedName("footerText") val footerText: TextFieldData? = null,
+    @SerializedName("buttonPadding") val buttonPadding: Int? = null,
+    @SerializedName("footerButton") val footerButton: FooterButtonData? = null
+)
diff --git a/android/navi-widgets/src/main/java/com/navi/naviwidgets/models/response/CardWithListItemsWidgetData.kt b/android/navi-widgets/src/main/java/com/navi/naviwidgets/models/response/CardWithListItemsWidgetData.kt
new file mode 100644
index 0000000000..7b82df96d3
--- /dev/null
+++ b/android/navi-widgets/src/main/java/com/navi/naviwidgets/models/response/CardWithListItemsWidgetData.kt
@@ -0,0 +1,50 @@
+/*
+ *
+ *  * Copyright © 2019-2024 by Navi Technologies Limited
+ *  * All rights reserved. Strictly confidential
+ *
+ */
+
+package com.navi.naviwidgets.models.response
+
+import com.google.gson.annotations.SerializedName
+import com.navi.base.model.CtaData
+import com.navi.design.utils.BackgroundDrawableData
+import com.navi.naviwidgets.models.FooterButtonData
+import com.navi.naviwidgets.models.GenericWidgetDataInfo
+
+data class CardWithListItemsWidgetData(
+    @SerializedName("widgetData") val widgetData: CardWithListItemsWidgetBody? = null
+) :
+    GenericWidgetDataInfo(
+        widgetId = WIDGET_NAME,
+        widgetNameForBaseAdapter = WIDGET_NAME,
+        isDependentWidget = false,
+        dependencyWidgetId = null,
+        isDependencyWidgetShowing = false,
+        widgetError = null
+    )
+
+data class CardWithListItemsWidgetBody(
+    @SerializedName("cardCta") val cardCta: CtaData? = null,
+    @SerializedName("cardImage") val cardImage: ImageFieldData? = null,
+    @SerializedName("leftTitle") val leftTitle: TextFieldData? = null,
+    @SerializedName("titleLayoutProperties")
+    val titleLayoutProperties: BackgroundDrawableData? = null,
+    @SerializedName("tagTitle") val tagTitle: TextFieldData? = null,
+    @SerializedName("cardProperties") val cardProperties: CardProperties? = null,
+    @SerializedName("listData") val listData: ListData? = null,
+    @SerializedName("footerLayoutProperties")
+    val footerLayoutProperties: BackgroundDrawableData? = null,
+    @SerializedName("leftFooter") val leftFooter: FooterButtonData? = null,
+    @SerializedName("footerSpacing") val footerSpacing: Int? = null,
+    @SerializedName("rightFooter") val rightFooter: FooterButtonData? = null,
+) {
+    data class ListData(
+        @SerializedName("listContainerProperties")
+        val listContainerProperties: BackgroundDrawableData? = null,
+        @SerializedName("items") val items: List<TextFieldData>? = null,
+    )
+}
+
+private const val WIDGET_NAME = "CARD_WITH_LIST_ITEMS_WIDGET"
diff --git a/android/navi-widgets/src/main/java/com/navi/naviwidgets/models/response/FloatingButtonData.kt b/android/navi-widgets/src/main/java/com/navi/naviwidgets/models/response/FloatingButtonData.kt
index e6f604dd6d..fa5bbb1f54 100644
--- a/android/navi-widgets/src/main/java/com/navi/naviwidgets/models/response/FloatingButtonData.kt
+++ b/android/navi-widgets/src/main/java/com/navi/naviwidgets/models/response/FloatingButtonData.kt
@@ -17,6 +17,8 @@ import com.navi.naviwidgets.models.WidgetLayoutParams
 data class FloatingButtonData(
     @SerializedName("alignment") val alignment: String? = null,
     @SerializedName("widgetLayoutParams") val widgetLayoutParams: WidgetLayoutParams? = null,
+    @SerializedName("updatedWidgetLayoutParams")
+    val updatedWidgetLayoutParams: WidgetLayoutParams? = null,
     @SerializedName("buttonData") val buttonData: ActionButtonData? = null,
     @SerializedName("cta") val cta: CtaData? = null,
     @SerializedName("metaData") val metaData: PageMetaData? = null
diff --git a/android/navi-widgets/src/main/java/com/navi/naviwidgets/models/response/GridWithAssetCardWidgetData.kt b/android/navi-widgets/src/main/java/com/navi/naviwidgets/models/response/GridWithAssetCardWidgetData.kt
new file mode 100644
index 0000000000..83e0bc8ab6
--- /dev/null
+++ b/android/navi-widgets/src/main/java/com/navi/naviwidgets/models/response/GridWithAssetCardWidgetData.kt
@@ -0,0 +1,39 @@
+/*
+ *
+ *  * Copyright © 2019-2024 by Navi Technologies Limited
+ *  * All rights reserved. Strictly confidential
+ *
+ */
+
+package com.navi.naviwidgets.models.response
+
+import com.google.gson.annotations.SerializedName
+import com.navi.design.utils.BackgroundDrawableData
+import com.navi.naviwidgets.models.GenericWidgetDataInfo
+
+data class GridWithAssetCardWidgetData(
+    @SerializedName("widgetData") val widgetData: GridWithAssetCardWidgetBody? = null
+) :
+    GenericWidgetDataInfo(
+        widgetId = WIDGET_NAME,
+        widgetNameForBaseAdapter = WIDGET_NAME,
+        isDependentWidget = false,
+        dependencyWidgetId = null,
+        isDependencyWidgetShowing = false,
+        widgetError = null
+    )
+
+data class GridWithAssetCardWidgetBody(
+    @SerializedName("background") val background: BackgroundDrawableData? = null,
+    @SerializedName("leftTitle") val leftTitle: TextFieldData? = null,
+    @SerializedName("leftSubtitle") val leftSubtitle: TextFieldData? = null,
+    @SerializedName("gridData") val gridData: GridData? = null,
+    @SerializedName("leftFooterTitle") val leftFooterTitle: TextFieldData? = null,
+) {
+    data class GridData(
+        @SerializedName("spanCount") val spanCount: Int? = null,
+        @SerializedName("items") val items: List<AssetCardData>? = null,
+    )
+}
+
+private const val WIDGET_NAME = "GRID_WITH_ASSET_CARD_WIDGET"
diff --git a/android/navi-widgets/src/main/java/com/navi/naviwidgets/models/response/HorizontalCardCarouselWidgetData.kt b/android/navi-widgets/src/main/java/com/navi/naviwidgets/models/response/HorizontalCardCarouselWidgetData.kt
new file mode 100644
index 0000000000..9550e26ce2
--- /dev/null
+++ b/android/navi-widgets/src/main/java/com/navi/naviwidgets/models/response/HorizontalCardCarouselWidgetData.kt
@@ -0,0 +1,35 @@
+/*
+ *
+ *  * Copyright © 2024 by Navi Technologies Limited
+ *  * All rights reserved. Strictly confidential
+ *
+ */
+
+package com.navi.naviwidgets.models.response
+
+import com.google.gson.annotations.SerializedName
+import com.navi.naviwidgets.models.GenericWidgetDataInfo
+
+data class HorizontalCardCarouselWidgetData(
+    @SerializedName("widgetData") var widgetData: HorizontalCardCarouselWidgetBody? = null
+) :
+    GenericWidgetDataInfo(
+        widgetId = WIDGET_NAME,
+        widgetNameForBaseAdapter = WIDGET_NAME,
+        isDependentWidget = false,
+        dependencyWidgetId = null,
+        isDependencyWidgetShowing = false,
+        widgetError = null
+    )
+
+private const val WIDGET_NAME = "HORIZONTAL_CARD_CAROUSEL_WIDGET"
+
+data class HorizontalCardCarouselWidgetBody(
+    @SerializedName("cardList") val cardList: List<ContentCard>? = null,
+    @SerializedName("itemSpacing") val itemSpacing: Int? = null,
+)
+
+data class ContentCard(
+    @SerializedName("cardProperties") val cardProperties: CardProperties? = null,
+    @SerializedName("content") val content: TextFieldData? = null,
+)
diff --git a/android/navi-widgets/src/main/java/com/navi/naviwidgets/models/response/ImageTitleCardWidgetData.kt b/android/navi-widgets/src/main/java/com/navi/naviwidgets/models/response/ImageTitleCardWidgetData.kt
index c4da2217f3..d878908d2f 100644
--- a/android/navi-widgets/src/main/java/com/navi/naviwidgets/models/response/ImageTitleCardWidgetData.kt
+++ b/android/navi-widgets/src/main/java/com/navi/naviwidgets/models/response/ImageTitleCardWidgetData.kt
@@ -53,6 +53,7 @@ data class ImageTitleCardWidgetData(
 
 data class ImageTitleCardWidgetDataBody(
     @SerializedName("cardData") val cardData: CardProperties? = null,
+    @SerializedName("icon") val icon: ImageFieldData? = null,
     @SerializedName("leftIcon") val leftIcon: ImageFieldData? = null,
     @SerializedName("title") val title: TextFieldData? = null,
     @SerializedName("subTitle") val subTitle: TextFieldData? = null,
diff --git a/android/navi-widgets/src/main/java/com/navi/naviwidgets/models/response/PolicyCardCarouselWidgetData.kt b/android/navi-widgets/src/main/java/com/navi/naviwidgets/models/response/PolicyCardCarouselWidgetData.kt
index c143ebb1ef..97aed0fa69 100644
--- a/android/navi-widgets/src/main/java/com/navi/naviwidgets/models/response/PolicyCardCarouselWidgetData.kt
+++ b/android/navi-widgets/src/main/java/com/navi/naviwidgets/models/response/PolicyCardCarouselWidgetData.kt
@@ -55,5 +55,6 @@ data class PolicyCardCarouselWidgetBody(
     @SerializedName("pageSpacing") val pageSpacing: Int? = null,
     @SerializedName("contentPadding") val contentPadding: Int? = null,
     @SerializedName("pageSize") val pageSize: Int? = null,
-    @SerializedName("snapPositionalThreshold") val snapPositionalThreshold: Float? = null
+    @SerializedName("snapPositionalThreshold") val snapPositionalThreshold: Float? = null,
+    @SerializedName("showDotsIndicator") val showDotsIndicator: Boolean = true,
 )
diff --git a/android/navi-widgets/src/main/java/com/navi/naviwidgets/models/response/TableWithTooltipAndCtaWidgetData.kt b/android/navi-widgets/src/main/java/com/navi/naviwidgets/models/response/TableWithTooltipAndCtaWidgetData.kt
new file mode 100644
index 0000000000..64cb7018d4
--- /dev/null
+++ b/android/navi-widgets/src/main/java/com/navi/naviwidgets/models/response/TableWithTooltipAndCtaWidgetData.kt
@@ -0,0 +1,55 @@
+/*
+ *
+ *  * Copyright © 2019-2024 by Navi Technologies Limited
+ *  * All rights reserved. Strictly confidential
+ *
+ */
+
+package com.navi.naviwidgets.models.response
+
+import com.google.gson.annotations.SerializedName
+import com.navi.base.model.CtaData
+import com.navi.design.utils.BackgroundDrawableData
+import com.navi.naviwidgets.models.FooterButtonData
+import com.navi.naviwidgets.models.GenericWidgetDataInfo
+
+data class TableWithTooltipAndCtaWidgetData(
+    @SerializedName("widgetData") val widgetData: TableWithTooltipAndCtaWidgetBody? = null
+) :
+    GenericWidgetDataInfo(
+        widgetId = WIDGET_NAME,
+        widgetNameForBaseAdapter = WIDGET_NAME,
+        isDependentWidget = false,
+        dependencyWidgetId = null,
+        isDependencyWidgetShowing = false,
+        widgetError = null
+    )
+
+data class TableWithTooltipAndCtaWidgetBody(
+    @SerializedName("cta") val cta: CtaData? = null,
+    @SerializedName("columns") val columns: List<ColumnData>? = null,
+    @SerializedName("tableProperties") val tableProperties: CardProperties? = null,
+    @SerializedName("tableFooter") val tableFooter: FooterButtonData? = null,
+)
+
+data class ColumnData(
+    @SerializedName("title") val title: TextFieldData? = null,
+    @SerializedName("tooltip") val tooltip: TooltipData? = null,
+    @SerializedName("data") val data: List<RowData>? = null,
+    @SerializedName("columnProperties") val columnProperties: BackgroundDrawableData? = null,
+)
+
+data class RowData(
+    @SerializedName("cell") val cell: CellData? = null,
+    @SerializedName("showDivider") val showDivider: Boolean = false,
+    @SerializedName("dividerProperties") val dividerProperties: BackgroundDrawableData? = null,
+    @SerializedName("rowProperties") val rowProperties: BackgroundDrawableData? = null,
+) {
+    data class CellData(
+        @SerializedName("title") val title: TextFieldData? = null,
+        @SerializedName("subtitle") val subtitle: TextFieldData? = null,
+        @SerializedName("cellProperties") val cellProperties: BackgroundDrawableData? = null,
+    )
+}
+
+private const val WIDGET_NAME = "TABLE_WITH_TOOLTIP_AND_CTA_WIDGET"
diff --git a/android/navi-widgets/src/main/java/com/navi/naviwidgets/models/response/TextFieldData.kt b/android/navi-widgets/src/main/java/com/navi/naviwidgets/models/response/TextFieldData.kt
index cdb901970a..a445ed1d0f 100644
--- a/android/navi-widgets/src/main/java/com/navi/naviwidgets/models/response/TextFieldData.kt
+++ b/android/navi-widgets/src/main/java/com/navi/naviwidgets/models/response/TextFieldData.kt
@@ -11,10 +11,10 @@ import android.os.Parcelable
 import com.google.gson.annotations.SerializedName
 import com.navi.base.model.AnalyticsEvent
 import com.navi.base.model.CtaData
+import com.navi.base.model.Padding
 import com.navi.design.utils.BackgroundDrawableData
 import com.navi.naviwidgets.models.LottieFieldData
 import com.navi.naviwidgets.widgets.textdisplay.Margin
-import com.navi.naviwidgets.widgets.textdisplay.Padding
 import java.io.Serializable
 import kotlinx.parcelize.Parcelize
 
@@ -40,6 +40,7 @@ data class TextFieldData(
     val backgroundDrawableData: BackgroundDrawableData? = null,
     @SerializedName("gravity") val gravity: String? = null,
     @SerializedName("alignment") val alignment: String? = null,
+    @SerializedName("verticalAlignment") val verticalAlignment: String? = null,
     @SerializedName("textAlignment") val textAlignment: String? = null,
     @SerializedName("lineSpacing", alternate = ["lineHeight"]) val lineSpacing: Int? = null,
     @SerializedName("letterSpacing") val letterSpacing: Int? = null,
@@ -76,7 +77,7 @@ data class TextDrawableData(
     @SerializedName("right") val right: ImageFieldData? = null,
     @SerializedName("bottom") val bottom: ImageFieldData? = null,
     @SerializedName("padding") val padding: Int? = null,
-    @SerializedName("contentPadding") val contentPadding: Padding? = null,
+    @SerializedName("contentPadding") val contentPadding: com.navi.base.model.Padding? = null,
     @SerializedName("drawableSize") val drawableSize: Int? = null
 ) : Parcelable
 
@@ -100,7 +101,7 @@ data class Gradient(
     @SerializedName("middleGradientColor") val middleGradientColor: String? = null,
     @SerializedName("endGradientColor") val endGradientColor: String? = null,
     @SerializedName("angle") val angle: Int? = null,
-    @SerializedName("orientation") val orientation: String? = null
+    @SerializedName("orientation") val orientation: String? = null,
 ) : Serializable, Parcelable
 
 @Parcelize
diff --git a/android/navi-widgets/src/main/java/com/navi/naviwidgets/models/response/TitleCardCtaWidgetData.kt b/android/navi-widgets/src/main/java/com/navi/naviwidgets/models/response/TitleCardCtaWidgetData.kt
new file mode 100644
index 0000000000..8da05f6314
--- /dev/null
+++ b/android/navi-widgets/src/main/java/com/navi/naviwidgets/models/response/TitleCardCtaWidgetData.kt
@@ -0,0 +1,45 @@
+/*
+ *
+ *  * Copyright © 2024 by Navi Technologies Limited
+ *  * All rights reserved. Strictly confidential
+ *
+ */
+
+package com.navi.naviwidgets.models.response
+
+import com.google.gson.annotations.SerializedName
+import com.navi.design.utils.BackgroundDrawableData
+import com.navi.naviwidgets.models.FooterButtonData
+import com.navi.naviwidgets.models.GenericWidgetDataInfo
+
+data class TitleCardCtaWidgetData(
+    @SerializedName("widgetData") val widgetData: TitleCardCtaWidgetBody? = null
+) :
+    GenericWidgetDataInfo(
+        widgetId = WIDGET_NAME,
+        widgetNameForBaseAdapter = WIDGET_NAME,
+        isDependentWidget = false,
+        dependencyWidgetId = null,
+        isDependencyWidgetShowing = false,
+        widgetError = null
+    )
+
+private const val WIDGET_NAME = "TITLE_CARD_CTA_WIDGET"
+
+data class TitleCardCtaWidgetBody(
+    @SerializedName("background") val background: BackgroundDrawableData? = null,
+    @SerializedName("title") val title: TextFieldData? = null,
+    @SerializedName("curveImage") val curveImage: ImageFieldData? = null,
+    @SerializedName("card") val card: Card? = null
+)
+
+data class Card(
+    @SerializedName("cardProperties") val cardProperties: CardProperties? = null,
+    @SerializedName("iconList") val iconList: List<ImageFieldData>? = null,
+    @SerializedName("spacing") val spacing: Int? = null,
+    @SerializedName("leftTitle") val leftTitle: TextFieldData? = null,
+    @SerializedName("leftSubtitle") val leftSubtitle: TextFieldData? = null,
+    @SerializedName("rightTitle") val rightTitle: TextFieldData? = null,
+    @SerializedName("rightSubtitle") val rightSubtitle: TextFieldData? = null,
+    @SerializedName("footerButton") val footerButton: FooterButtonData? = null
+)
diff --git a/android/navi-widgets/src/main/java/com/navi/naviwidgets/models/response/TitleWithButtonAndIconWidgetData.kt b/android/navi-widgets/src/main/java/com/navi/naviwidgets/models/response/TitleWithButtonAndIconWidgetData.kt
new file mode 100644
index 0000000000..6648ac6289
--- /dev/null
+++ b/android/navi-widgets/src/main/java/com/navi/naviwidgets/models/response/TitleWithButtonAndIconWidgetData.kt
@@ -0,0 +1,33 @@
+/*
+ *
+ *  * Copyright © 2024 by Navi Technologies Limited
+ *  * All rights reserved. Strictly confidential
+ *
+ */
+
+package com.navi.naviwidgets.models.response
+
+import com.google.gson.annotations.SerializedName
+import com.navi.naviwidgets.models.FooterButtonData
+import com.navi.naviwidgets.models.GenericWidgetDataInfo
+
+data class TitleWithButtonAndIconWidgetData(
+    @SerializedName("widgetData") val widgetData: TitleWithButtonAndIconWidgetBody? = null
+) :
+    GenericWidgetDataInfo(
+        widgetId = WIDGET_NAME,
+        widgetNameForBaseAdapter = WIDGET_NAME,
+        isDependentWidget = false,
+        dependencyWidgetId = null,
+        isDependencyWidgetShowing = false,
+        widgetError = null
+    )
+
+private const val WIDGET_NAME = "TITLE_WITH_BUTTON_AND_ICON_WIDGET"
+
+data class TitleWithButtonAndIconWidgetBody(
+    @SerializedName("background") val background: CardProperties? = null,
+    @SerializedName("title") val title: TextFieldData? = null,
+    @SerializedName("icon") val icon: ImageFieldData? = null,
+    @SerializedName("button") val button: FooterButtonData? = null
+)
diff --git a/android/navi-widgets/src/main/java/com/navi/naviwidgets/models/response/TitleWithLeftRightAssetCardWidget.kt b/android/navi-widgets/src/main/java/com/navi/naviwidgets/models/response/TitleWithLeftRightAssetCardWidget.kt
index eb013b6472..2e32c62a79 100644
--- a/android/navi-widgets/src/main/java/com/navi/naviwidgets/models/response/TitleWithLeftRightAssetCardWidget.kt
+++ b/android/navi-widgets/src/main/java/com/navi/naviwidgets/models/response/TitleWithLeftRightAssetCardWidget.kt
@@ -54,12 +54,12 @@ data class TitleWithLeftRightAssetCardWidgetData(
 data class TitleWithLeftRightAssetCardWidgetBody(
     @SerializedName("leftCardData") val leftCardData: AssetCardData? = null,
     @SerializedName("rightCardData") val rightCardData: AssetCardData? = null,
-) {
-    data class AssetCardData(
-        @SerializedName("title") val title: TextFieldData? = null,
-        @SerializedName("ctaImage") val ctaImage: ImageFieldData? = null,
-        @SerializedName("cardImage") val cardImage: ImageFieldData? = null,
-        @SerializedName("cta") val cta: CtaData? = null,
-        @SerializedName("cardProperties") val cardProperties: CardProperties? = null,
-    )
-}
+)
+
+data class AssetCardData(
+    @SerializedName("title") val title: TextFieldData? = null,
+    @SerializedName("ctaImage") val ctaImage: ImageFieldData? = null,
+    @SerializedName("cardImage") val cardImage: ImageFieldData? = null,
+    @SerializedName("cta") val cta: CtaData? = null,
+    @SerializedName("cardProperties") val cardProperties: CardProperties? = null,
+)
diff --git a/android/navi-widgets/src/main/java/com/navi/naviwidgets/utils/NaviWidgetIconUtils.kt b/android/navi-widgets/src/main/java/com/navi/naviwidgets/utils/NaviWidgetIconUtils.kt
index 6f383ca80d..9d516c5e91 100644
--- a/android/navi-widgets/src/main/java/com/navi/naviwidgets/utils/NaviWidgetIconUtils.kt
+++ b/android/navi-widgets/src/main/java/com/navi/naviwidgets/utils/NaviWidgetIconUtils.kt
@@ -863,6 +863,7 @@ object NaviWidgetIconUtils {
     private const val NAVI_CHAT_MISSED_CALL_ICON = "NAVI_CHAT_MISSED_CALL_ICON"
     private const val SCRATCH_CARD_IMAGE = "SCRATCH_CARD_IMAGE"
     private const val ICON_BACK_ARROW_WHITE = "ICON_BACK_ARROW_WHITE"
+    const val WHITE_BG_CURVE = "WHITE_BG_CURVE"
     const val CHEVRON_UP_BLACK = "CHEVRON_UP_BLACK"
     private const val DIWALI_SCRATCH_CARD_IMAGE = "DIWALI_SCRATCH_CARD_IMAGE"
 
@@ -1760,6 +1761,7 @@ object NaviWidgetIconUtils {
             SCRATCH_CARD_IMAGE -> R.drawable.scratch_card_overlay
             DIWALI_SCRATCH_CARD_IMAGE -> R.drawable.diwali_scratch_card
             ICON_BACK_ARROW_WHITE -> R.drawable.ic_arrow_left_white_v2
+            WHITE_BG_CURVE -> R.drawable.curve
             CHEVRON_UP_BLACK -> R.drawable.chevron_up
             else -> -1
         }
diff --git a/android/navi-coin/src/main/res/drawable/curve.xml b/android/navi-widgets/src/main/res/drawable/curve.xml
similarity index 100%
rename from android/navi-coin/src/main/res/drawable/curve.xml
rename to android/navi-widgets/src/main/res/drawable/curve.xml
diff --git a/assets/colors/colors.ts b/assets/colors/colors.ts
index 999ab91b95..43d72973e6 100644
--- a/assets/colors/colors.ts
+++ b/assets/colors/colors.ts
@@ -5,6 +5,7 @@ const Colors = {
   powderBlue: "#DDEAFF",
   lightGray: "#EBEBEB",
   white: "#FFFFFF",
+  black: "#000000",
   blue: "#0000FF",
   grey: "#FAFAFA",
   lightBlue: "#EAF2FF",
@@ -12,6 +13,8 @@ const Colors = {
   shimmerHighlightColor: "#F5F5F8",
   silver: "#BCBCBC",
   kleinBlue: "#0036A3",
+  transparentHex: "#00000000",
+  footerShadowColor: "#98978933",
 };
 
 export default Colors;
diff --git a/components/bottomsheet/index.ts b/components/bottomsheet/index.ts
new file mode 100644
index 0000000000..8ccabebe85
--- /dev/null
+++ b/components/bottomsheet/index.ts
@@ -0,0 +1,9 @@
+export { default as MemberDetailBottomSheet } from "./member-details-bottom-sheet/MemberDetailsBottomSheet";
+export { default as PolicyAmountBottomSheet } from "./policy-amount-bottom-sheet/PolicyAmountBottomSheet";
+export { default as TitleSubtitleWithDropdownBottomSheet } from "./title-subtitle-with-dropdown-bottom-sheet/TitleSubtitleWithDropdownBottomSheet";
+export { default as TitleWithFeedbackPillBottomSheet } from "./title-with-feed-back-bottom-sheet/TitleWithFeedBackBottomSheet";
+export { default as TitleWithLeftRightButtonsBottomSheet } from "./title-with-left-right-buttons-bottom-sheet/TitleWithLeftRightButtonsBottomSheet";
+export { default as TitleWithListBottomSheet } from "./title-with-list-bottom-sheet/TitleWithListBottomSheet";
+export { default as TitleWithStepsBottomSheet } from "./title-with-steps-bottom-sheet/TitleWithStepsBottomSheet";
+export { default as TopSectionExpandableBottomSheet } from "./top-section-expandable-bottom-sheet/TopSectionExpandableBottomSheet";
+export { default as PremiumDetailsBottomSheet } from "./title-with-list-bottom-sheet/TitleWithListBottomSheet";
diff --git a/components/bottomsheet/member-details-bottom-sheet/MemberDetailsBottomSheet.tsx b/components/bottomsheet/member-details-bottom-sheet/MemberDetailsBottomSheet.tsx
index bdd24525f7..646ef3f2dc 100644
--- a/components/bottomsheet/member-details-bottom-sheet/MemberDetailsBottomSheet.tsx
+++ b/components/bottomsheet/member-details-bottom-sheet/MemberDetailsBottomSheet.tsx
@@ -7,7 +7,7 @@ import { StyledText } from "../../widgets/styled-text/StyledText";
 import TitleWithListWidget from "../../widgets/title-with-list-widget/TitleWithListWidget";
 import styles from "./MemberDetailsBottomSheetStyle";
 
-export const MemberDetailBottomSheet = ({
+const MemberDetailBottomSheet = ({
   bottomSheetData,
   handleModalClick,
   handleActions,
@@ -50,3 +50,5 @@ export const MemberDetailBottomSheet = ({
     </View>
   );
 };
+
+export default MemberDetailBottomSheet;
diff --git a/components/bottomsheet/policy-amount-bottom-sheet/PolicyAmountBottomSheet.tsx b/components/bottomsheet/policy-amount-bottom-sheet/PolicyAmountBottomSheet.tsx
index e562f67bfa..e88eff8ce5 100644
--- a/components/bottomsheet/policy-amount-bottom-sheet/PolicyAmountBottomSheet.tsx
+++ b/components/bottomsheet/policy-amount-bottom-sheet/PolicyAmountBottomSheet.tsx
@@ -14,7 +14,7 @@ import TitleWidget from "../../widgets/title-widget/TitleWidget";
 import TitleWithListWidget from "../../widgets/title-with-list-widget/TitleWithListWidget";
 import styles from "./PolicyAmountBottomSheetStyle";
 
-export const PolicyAmountBottomSheet = ({
+const PolicyAmountBottomSheet = ({
   bottomSheetData,
   handleModalClick,
   handleActions,
@@ -152,3 +152,5 @@ const formatData = (
     return [...data, ...filledArray];
   }
 };
+
+export default PolicyAmountBottomSheet;
diff --git a/components/reusable/content-widget/CommonContentWidget.tsx b/components/reusable/content-widget/CommonContentWidget.tsx
new file mode 100644
index 0000000000..0d37212a76
--- /dev/null
+++ b/components/reusable/content-widget/CommonContentWidget.tsx
@@ -0,0 +1,19 @@
+import { WidgetComponentProps } from "../../../App/common/interface/components";
+import WidgetViewRenderer from "../../widget-view-renderer/WidgetViewRenderer";
+
+const CommonContentWidgets = ({
+  screenData,
+  handleActions,
+  handleClick,
+}: WidgetComponentProps) => {
+  return (
+    <WidgetViewRenderer
+      widgetList={screenData?.screenWidgets?.contentWidgets}
+      handleActions={handleActions}
+      screenState={screenData?.screenState}
+      handleClick={handleClick}
+    />
+  );
+};
+
+export default CommonContentWidgets;
diff --git a/components/reusable/footer/CommonFooter.tsx b/components/reusable/footer/CommonFooter.tsx
new file mode 100644
index 0000000000..e826c56caa
--- /dev/null
+++ b/components/reusable/footer/CommonFooter.tsx
@@ -0,0 +1,33 @@
+import { View } from "react-native";
+import { NaviLinearGradient } from "../../../App/common/hooks/useGradient";
+import { WidgetComponentProps } from "../../../App/common/interface/components";
+import Colors from "../../../assets/colors/colors";
+import WidgetViewRenderer from "../../widget-view-renderer/WidgetViewRenderer";
+import styles from "./CommonFooterStyles";
+
+const CommonFooter = ({
+  screenData,
+  handleActions,
+  handleClick,
+}: WidgetComponentProps) => {
+  if (!screenData?.screenWidgets?.footerWidgets?.length) {
+    return null;
+  }
+
+  return (
+    <View style={styles.container}>
+      <NaviLinearGradient
+        gradientColors={[Colors.transparentHex, Colors.footerShadowColor]}
+        style={styles.footerGradient}
+      />
+      <WidgetViewRenderer
+        widgetList={screenData.screenWidgets.footerWidgets}
+        handleActions={handleActions}
+        screenState={screenData.screenState}
+        handleClick={handleClick}
+      />
+    </View>
+  );
+};
+
+export default CommonFooter;
diff --git a/components/reusable/footer/CommonFooterStyles.ts b/components/reusable/footer/CommonFooterStyles.ts
new file mode 100644
index 0000000000..74492fdecb
--- /dev/null
+++ b/components/reusable/footer/CommonFooterStyles.ts
@@ -0,0 +1,14 @@
+import { StyleSheet } from "react-native";
+
+const styles = StyleSheet.create({
+  container: {
+    position: "absolute",
+    bottom: 0,
+    width: "100%",
+  },
+  footerGradient: {
+    height: 35,
+  },
+});
+
+export default styles;
diff --git a/components/reusable/header/CommonHeader.tsx b/components/reusable/header/CommonHeader.tsx
new file mode 100644
index 0000000000..3de3805ba2
--- /dev/null
+++ b/components/reusable/header/CommonHeader.tsx
@@ -0,0 +1,23 @@
+import Animated from "react-native-reanimated";
+import { WidgetComponentProps } from "../../../App/common/interface/components";
+import WidgetViewRenderer from "../../widget-view-renderer/WidgetViewRenderer";
+
+const CommonHeader = ({
+  screenData,
+  handleActions,
+  handleClick,
+  style,
+}: WidgetComponentProps) => {
+  return (
+    <Animated.View style={style}>
+      <WidgetViewRenderer
+        widgetList={screenData?.screenWidgets?.headerWidgets}
+        handleActions={handleActions}
+        screenState={screenData?.screenState}
+        handleClick={handleClick}
+      />
+    </Animated.View>
+  );
+};
+
+export default CommonHeader;
diff --git a/components/reusable/index.ts b/components/reusable/index.ts
index 1f43eb7cde..599d8319e5 100644
--- a/components/reusable/index.ts
+++ b/components/reusable/index.ts
@@ -1,2 +1,5 @@
 export { default as SelectButton } from "./select-button/SelectButton";
 export { default as ItemSeparator } from "./item-separator/ItemSeparator";
+export { default as CommonHeader } from "./header/CommonHeader";
+export { default as CommonFooter } from "./footer/CommonFooter";
+export { default as CommonContentWidgets } from "./content-widget/CommonContentWidget";
diff --git a/components/reusable/static-header/StaticHeader.tsx b/components/reusable/static-header/StaticHeader.tsx
index 4719230899..3ff71c4e97 100644
--- a/components/reusable/static-header/StaticHeader.tsx
+++ b/components/reusable/static-header/StaticHeader.tsx
@@ -1,9 +1,9 @@
-import { BackHandler, View, TouchableOpacity } from "react-native";
-import { CtaData } from "../../../App/common/interface";
-import { styles } from "./StaticHeaderStyle";
-import { ImageName } from "../../../App/common/constants/StringConstant";
-import { AppImage } from "../../AppImage";
 import { useEffect } from "react";
+import { BackHandler, TouchableOpacity, View } from "react-native";
+import { HARDWARE_BACK_PRESS, ImageName } from "../../../App/common/constants";
+import { CtaData } from "../../../App/common/interface";
+import { AppImage } from "../../AppImage";
+import { styles } from "./StaticHeaderStyle";
 
 export const StaticHeader = ({
   handleClick,
@@ -23,10 +23,10 @@ export const StaticHeader = ({
     return true;
   };
   useEffect(() => {
-    BackHandler.addEventListener("hardwareBackPress", handleBackButtonClick);
+    BackHandler.addEventListener(HARDWARE_BACK_PRESS, handleBackButtonClick);
     return () => {
       BackHandler.removeEventListener(
-        "hardwareBackPress",
+        HARDWARE_BACK_PRESS,
         handleBackButtonClick,
       );
     };
diff --git a/components/widget-view-renderer/WidgetViewRenderer.tsx b/components/widget-view-renderer/WidgetViewRenderer.tsx
new file mode 100644
index 0000000000..74cd742eac
--- /dev/null
+++ b/components/widget-view-renderer/WidgetViewRenderer.tsx
@@ -0,0 +1,29 @@
+import { View } from "react-native";
+import { WidgetViewRendererProps } from "../../App/common/interface/components";
+import BaseWidget from "../widgets/BaseWidget";
+
+const WidgetViewRenderer = ({
+  widgetList,
+  handleActions,
+  screenState,
+  handleClick,
+}: WidgetViewRendererProps) => {
+  return (
+    <View>
+      {widgetList?.map((widget, index) => {
+        return (
+          <BaseWidget
+            widget={widget}
+            handleScreenActions={handleActions}
+            screenState={screenState}
+            widgetIndex={index}
+            key={index}
+            handleClick={handleClick}
+          />
+        );
+      })}
+    </View>
+  );
+};
+
+export default WidgetViewRenderer;
diff --git a/components/widgets/HeaderWithAssetsWidget.tsx b/components/widgets/HeaderWithAssetsWidget.tsx
index 9bc59fea43..ccd0683d3b 100644
--- a/components/widgets/HeaderWithAssetsWidget.tsx
+++ b/components/widgets/HeaderWithAssetsWidget.tsx
@@ -8,6 +8,7 @@ import {
   ViewStyle,
 } from "react-native";
 import { GenericActionPayload } from "../../App/common/actions/GenericAction";
+import { HARDWARE_BACK_PRESS } from "../../App/common/constants";
 import { CtaData } from "../../App/common/interface";
 import { HeaderWithAssetsWidgetData } from "../../App/common/interface/widgets/widgetData/HeaderWithAssetsWidgetData";
 import { StyledImage } from "../StyledImage";
@@ -39,10 +40,10 @@ const HeaderWithAssetsWidget = ({
   };
 
   useEffect(() => {
-    BackHandler.addEventListener("hardwareBackPress", handleBackButtonClick);
+    BackHandler.addEventListener(HARDWARE_BACK_PRESS, handleBackButtonClick);
     return () => {
       BackHandler.removeEventListener(
-        "hardwareBackPress",
+        HARDWARE_BACK_PRESS,
         handleBackButtonClick,
       );
     };
diff --git a/components/widgets/card-with-list-items-widget/CardWithListItemsWidget.tsx b/components/widgets/card-with-list-items-widget/CardWithListItemsWidget.tsx
new file mode 100644
index 0000000000..3e16745052
--- /dev/null
+++ b/components/widgets/card-with-list-items-widget/CardWithListItemsWidget.tsx
@@ -0,0 +1,121 @@
+import { useState } from "react";
+import { FlatList, TouchableOpacity, View } from "react-native";
+import { StyledImage, StyledText } from "..";
+import {
+  ButtonData,
+  ButtonState,
+  CardFooterCtaButtonProps,
+  CardWithListItemsWidgetProps,
+} from "../../../App/common/interface/widgets/widgetData";
+import { ScreenState } from "../../../App/common/screen/BaseScreen";
+import CtaButton from "../../reusable/cta-button/CtaButton";
+import styles from "./CardWithListItemsWidgetStyles";
+
+const CardFooterCtaButton = ({
+  buttonState,
+  buttonData,
+  handleFooterButtonClick,
+}: CardFooterCtaButtonProps) => {
+  return (
+    <CtaButton
+      state={buttonState}
+      onPress={() => handleFooterButtonClick?.(buttonData)}
+      style={buttonData?.buttonStyle}
+    >
+      {buttonData?.title && <StyledText textFieldData={buttonData.title} />}
+    </CtaButton>
+  );
+};
+
+const CardWithListItemsWidget = ({
+  widgetData,
+  handleActions,
+  handleClick,
+  screenState,
+}: CardWithListItemsWidgetProps) => {
+  const [loadingButtonId, setLoadingButtonId] = useState<string>();
+  const handleFooterButtonClick = (buttonData?: ButtonData) => {
+    if (!buttonData) return;
+
+    const { buttonId, actions, cta } = buttonData;
+    setLoadingButtonId(buttonId);
+
+    if (actions && handleActions) {
+      handleActions(null, actions);
+    } else if (cta && handleClick) {
+      handleClick(cta);
+    }
+  };
+
+  const handleCardClick = () => {
+    const { cardCta } = widgetData || {};
+    if (cardCta && handleClick) {
+      handleClick(cardCta);
+    }
+  };
+  const buttonState =
+    loadingButtonId === widgetData?.rightFooter?.buttonId &&
+    screenState === ScreenState.OVERLAY
+      ? ButtonState.LOADING
+      : ButtonState.ENABLED;
+  return (
+    <TouchableOpacity onPress={handleCardClick} activeOpacity={1}>
+      <View style={styles.columnContainer}>
+        <View style={styles.tagContainer}>
+          {widgetData?.tagTitle && (
+            <StyledText
+              textFieldData={widgetData.tagTitle}
+              handleClick={handleClick}
+              handleActions={handleActions}
+            />
+          )}
+        </View>
+        <View style={[styles.rowContainer, widgetData?.titleContainerStyle]}>
+          {widgetData?.cardImage && (
+            <StyledImage
+              imageFieldData={widgetData.cardImage}
+              handleActions={handleActions}
+              handleClick={handleClick}
+            />
+          )}
+          {widgetData?.leftTitle && (
+            <StyledText
+              textFieldData={widgetData.leftTitle}
+              handleClick={handleClick}
+              handleActions={handleActions}
+            />
+          )}
+        </View>
+        <FlatList
+          contentContainerStyle={widgetData.listData?.listStyle}
+          data={widgetData.listData?.items}
+          renderItem={({ item }) => (
+            <StyledText
+              textFieldData={item}
+              handleClick={handleClick}
+              handleActions={handleActions}
+            />
+          )}
+          keyExtractor={(item, index) =>
+            item?.id || item?.text || index.toString()
+          }
+        />
+        {(widgetData?.leftFooter || widgetData?.rightFooter) && (
+          <View style={styles.footerContainer}>
+            <CardFooterCtaButton
+              buttonData={widgetData?.leftFooter}
+              handleFooterButtonClick={handleFooterButtonClick}
+            />
+            <CardFooterCtaButton
+              buttonState={buttonState}
+              buttonData={widgetData?.rightFooter}
+              handleFooterButtonClick={handleFooterButtonClick}
+            />
+          </View>
+        )}
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+export default CardWithListItemsWidget;
diff --git a/components/widgets/card-with-list-items-widget/CardWithListItemsWidgetStyles.tsx b/components/widgets/card-with-list-items-widget/CardWithListItemsWidgetStyles.tsx
new file mode 100644
index 0000000000..39fa06eb13
--- /dev/null
+++ b/components/widgets/card-with-list-items-widget/CardWithListItemsWidgetStyles.tsx
@@ -0,0 +1,33 @@
+import { StyleSheet } from "react-native";
+
+const styles = StyleSheet.create({
+  rowContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  columnContainer: {
+    flexDirection: "column",
+  },
+  tagContainer: {
+    position: "absolute",
+    top: -1,
+    right: -1,
+    flexDirection: "row",
+    justifyContent: "flex-end",
+    zIndex: 1,
+  },
+  contentContainer: {
+    flexDirection: "column",
+    alignItems: "flex-start",
+  },
+  footerContainer: {
+    marginHorizontal: 16,
+    marginBottom: 24,
+    flexDirection: "row",
+    flexWrap: "wrap",
+    justifyContent: "space-between",
+    alignItems: "center",
+  },
+});
+
+export default styles;
diff --git a/components/widgets/footer-with-card-widget/FooterWithCardWidget.tsx b/components/widgets/footer-with-card-widget/FooterWithCardWidget.tsx
index 2752350470..dd1f2f3b80 100644
--- a/components/widgets/footer-with-card-widget/FooterWithCardWidget.tsx
+++ b/components/widgets/footer-with-card-widget/FooterWithCardWidget.tsx
@@ -76,9 +76,7 @@ const FooterWithCardWidget = ({
     return widgetData.cardInfo?.title?.text ||
       widgetData.cardInfo?.centerTitle?.text
       ? styles.rowContainer
-      : widgetData.bottomTitle?.text
-        ? styles.roundedRowContainerWithBottomTitle
-        : styles.roundedRowContainer;
+      : styles.roundedRowContainer;
   };
 
   const throttledHandleActions = useCallback(
@@ -172,16 +170,20 @@ const FooterWithCardWidget = ({
             </TouchableOpacity>
           </View>
         )}
-        <View style={commonStyles.flex_1}>
+        <View style={styles.footerButtonOrientation}>
           {widgetData?.footerButton?.title?.text && (
             <CtaButton
               state={buttonState}
               onPress={handleFooterClick}
-              style={commonStyles.height54}
+              style={commonStyles.ctaButton}
             >
               <StyledText textFieldData={widgetData?.footerButton?.title} />
             </CtaButton>
           )}
+          {widgetData?.footerButton?.title?.text &&
+            widgetData?.secondaryFooterButton?.title?.text && (
+              <View style={commonStyles.width16} />
+            )}
           {widgetData?.secondaryFooterButton?.title?.text && (
             <CtaButton
               state={buttonState}
@@ -193,12 +195,6 @@ const FooterWithCardWidget = ({
               />
             </CtaButton>
           )}
-          {widgetData?.bottomTitle?.text && (
-            <TitleWidget
-              widgetData={{ title: widgetData?.bottomTitle }}
-              handleClick={handleClick}
-            />
-          )}
         </View>
       </View>
     </View>
diff --git a/components/widgets/footer-with-card-widget/FooterWithCardWidgetStyle.ts b/components/widgets/footer-with-card-widget/FooterWithCardWidgetStyle.ts
index f289085497..5307d0428f 100644
--- a/components/widgets/footer-with-card-widget/FooterWithCardWidgetStyle.ts
+++ b/components/widgets/footer-with-card-widget/FooterWithCardWidgetStyle.ts
@@ -37,15 +37,6 @@ const styles = StyleSheet.create({
     paddingHorizontal: 16,
   },
 
-  roundedRowContainerWithBottomTitle: {
-    backgroundColor: "white",
-    flexDirection: "row",
-    justifyContent: "space-between",
-    paddingBottom: 24,
-    paddingTop: 16,
-    paddingHorizontal: 16,
-  },
-
   centerTitleContainer: {
     flexDirection: "row",
     justifyContent: "center",
@@ -78,6 +69,11 @@ const styles = StyleSheet.create({
     borderRadius: 4,
     justifyContent: "center",
     alignItems: "center",
+    flex: 1,
+  },
+  footerButtonOrientation: {
+    flex: 1,
+    flexDirection: "row",
   },
 });
 
diff --git a/components/widgets/index.tsx b/components/widgets/index.tsx
index e66d882316..b7af7f8e31 100644
--- a/components/widgets/index.tsx
+++ b/components/widgets/index.tsx
@@ -21,3 +21,5 @@ export { default as TitleWithAssetBackgroundWidget } from "./title-with-asset-ba
 export { default as TitleWithColumnWidget } from "./title-with-column-widget/TitleWithColumnWidget";
 export { default as TitleWithListWidget } from "./title-with-list-widget/TitleWithListWidget";
 export { default as ListItemWidget } from "./list-item-with-icon-widget/ListItemWidget";
+export { default as CardWithListItemsWidget } from "./card-with-list-items-widget/CardWithListItemsWidget";
+export { default as TitleWithHorizontalCarouselListWidget } from "./title-with-horizontal-carousel-list-widget/TitleWithHorizontalCarouselListWidget";
diff --git a/components/widgets/styled-text/StyledText.tsx b/components/widgets/styled-text/StyledText.tsx
index f8b3854778..20f5d8fd1d 100644
--- a/components/widgets/styled-text/StyledText.tsx
+++ b/components/widgets/styled-text/StyledText.tsx
@@ -154,18 +154,25 @@ const TextComponent = ({ textFieldData }: { textFieldData: TextFieldData }) => {
 
   textFieldData.substringStyles?.forEach(({ substring, textStyle }, index) => {
     textFieldString = substringStyleMap?.pop()?.substring || textFieldData.text;
-    const splitArray = textFieldString.split(substring);
-    const part1: SubstringStyle = {
-      substring: splitArray[0] || "",
-    };
-    const part2: SubstringStyle = {
-      substring: substring,
-      textStyle: textStyle,
-    };
-    const part3: SubstringStyle = {
-      substring: splitArray[1] || "",
-    };
-    substringStyleMap = [...substringStyleMap, part1, part2, part3];
+    if (substring) {
+      const splitArray = textFieldString.split(substring);
+      const part1: SubstringStyle = {
+        substring: splitArray[0] || "",
+      };
+      const part2: SubstringStyle = {
+        substring: substring,
+        textStyle: textStyle,
+      };
+      const part3: SubstringStyle = {
+        substring: splitArray[1] || "",
+      };
+      substringStyleMap = [...substringStyleMap, part1, part2, part3];
+    } else {
+      const part1: SubstringStyle = {
+        substring: textFieldString,
+      };
+      substringStyleMap = [...substringStyleMap, part1];
+    }
   });
 
   return (
diff --git a/components/widgets/table-widget/Table.tsx b/components/widgets/table-widget/Table.tsx
index b6322dd8fc..1025ff47fd 100644
--- a/components/widgets/table-widget/Table.tsx
+++ b/components/widgets/table-widget/Table.tsx
@@ -106,6 +106,9 @@ const Columns = ({ widgetData }: ColumnsProps) => {
               {column?.image?.url && (
                 <StyledImage imageFieldData={column?.image} />
               )}
+              {column?.subImage?.url && (
+                <StyledImage imageFieldData={column?.subImage} />
+              )}
               {column?.title?.text && (
                 <StyledText textFieldData={column?.title} />
               )}
diff --git a/components/widgets/title-with-horizontal-carousel-list-widget/TitleWithHorizontalCarouselListWidget.tsx b/components/widgets/title-with-horizontal-carousel-list-widget/TitleWithHorizontalCarouselListWidget.tsx
new file mode 100644
index 0000000000..4f1b2a5aed
--- /dev/null
+++ b/components/widgets/title-with-horizontal-carousel-list-widget/TitleWithHorizontalCarouselListWidget.tsx
@@ -0,0 +1,106 @@
+import React, { useEffect, useRef, useState } from "react";
+import { FlatList, TouchableOpacity, View } from "react-native";
+import { StyledText } from "..";
+import { SCREEN_MID } from "../../../App/common/constants";
+import { sendAsAnalyticsEvent } from "../../../App/common/hooks/useAnalyticsEvent";
+import { AnalyticsEvent } from "../../../App/common/interface";
+import {
+  CarouselListData,
+  TitleWithHorizontalCarouselListWidgetProps,
+} from "../../../App/common/interface/widgets/widgetData";
+import styles from "./TitleWithHorizontalCarouselListWidgetStyle";
+
+const TitleWithHorizontalCarouselListWidget = ({
+  widgetData,
+  widgetStyle,
+  handleActions,
+  handleClick,
+  widgetIndex,
+}: TitleWithHorizontalCarouselListWidgetProps) => {
+  const [selectedItem, setSelectedItem] = useState<number | string | undefined>(
+    widgetData?.selectedItem,
+  );
+  const flatListRef = useRef<FlatList>(null);
+  const { name, properties } =
+    widgetData?.widgetMetaData?.analyticsEventProperties || {};
+
+  const handleSelectItem = (item: CarouselListData) => {
+    setSelectedItem(item?.id);
+    handleActions(
+      item?.dependentWidgets,
+      widgetData?.widgetMetaData?.onValueChangeAction,
+    );
+    if (name) {
+      const clickEvent: AnalyticsEvent = {
+        name: name,
+        properties: {
+          ...properties,
+          sumInsured: item?.id?.toString(),
+        },
+      };
+      sendAsAnalyticsEvent(clickEvent);
+    }
+  };
+
+  const CarouselItem = ({ item }: { item: CarouselListData }) => {
+    const isSelected = selectedItem === item?.id;
+    const containerStyles = [
+      widgetData?.defaultItemContainerStyles,
+      isSelected && widgetData?.selectedItemContainerStyles,
+    ];
+    return (
+      <TouchableOpacity
+        style={containerStyles}
+        onPress={() => handleSelectItem(item)}
+        activeOpacity={1}
+      >
+        <StyledText
+          textFieldData={
+            isSelected
+              ? item?.selectedState?.title
+              : item?.unSelectedState?.title
+          }
+        />
+      </TouchableOpacity>
+    );
+  };
+  const index = widgetData.carouselListData?.findIndex(
+    item => item.id === selectedItem,
+  );
+
+  useEffect(() => {
+    if (index !== undefined && index !== -1) {
+      flatListRef.current?.scrollToIndex({
+        index,
+        animated: false,
+        viewPosition: SCREEN_MID,
+      });
+    }
+  }, []);
+
+  return (
+    <View style={[widgetData.containerStyles]}>
+      <FlatList
+        ref={flatListRef}
+        horizontal
+        onScrollToIndexFailed={info => {
+          const wait = new Promise(resolve => setTimeout(resolve, 0));
+          wait.then(() => {
+            flatListRef.current?.scrollToIndex({
+              index: info.index,
+              animated: true,
+              viewPosition: SCREEN_MID,
+            });
+          });
+        }}
+        data={widgetData.carouselListData}
+        renderItem={({ item }) => <CarouselItem item={item} />}
+        keyExtractor={item => item?.id.toString()}
+        showsHorizontalScrollIndicator={false}
+        contentContainerStyle={styles.flatListContainer}
+      />
+    </View>
+  );
+};
+
+export default TitleWithHorizontalCarouselListWidget;
diff --git a/components/widgets/title-with-horizontal-carousel-list-widget/TitleWithHorizontalCarouselListWidgetStyle.ts b/components/widgets/title-with-horizontal-carousel-list-widget/TitleWithHorizontalCarouselListWidgetStyle.ts
new file mode 100644
index 0000000000..91b2c9f1b8
--- /dev/null
+++ b/components/widgets/title-with-horizontal-carousel-list-widget/TitleWithHorizontalCarouselListWidgetStyle.ts
@@ -0,0 +1,11 @@
+import { StyleSheet } from "react-native";
+
+const styles = StyleSheet.create({
+  flatListContainer: {
+    paddingLeft: 16,
+    paddingRight: 8,
+    paddingVertical: 14,
+  },
+});
+
+export default styles;
diff --git a/components/widgets/title-with-list-widget/TitleWithListWidget.tsx b/components/widgets/title-with-list-widget/TitleWithListWidget.tsx
index 2e21ff9162..dbea183776 100644
--- a/components/widgets/title-with-list-widget/TitleWithListWidget.tsx
+++ b/components/widgets/title-with-list-widget/TitleWithListWidget.tsx
@@ -1,19 +1,33 @@
 import throttle from "lodash/throttle";
 import { useCallback, useEffect } from "react";
 import { FlatList, TouchableOpacity, View, ViewStyle } from "react-native";
+import { StyledImage, StyledText, TitleWidget } from "..";
 import { GenericActionPayload } from "../../../App/common/actions/GenericAction";
 import { sendAsAnalyticsEvent } from "../../../App/common/hooks/useAnalyticsEvent";
 import { CtaData } from "../../../App/common/interface";
 import {
+  ImageFieldData,
   ListItem,
-  TitleWithListWidgetData,
-} from "../../../App/common/interface/widgets/widgetData/TitleWithListWidgetData";
+  TitleWithListWidgetDataProps,
+} from "../../../App/common/interface/widgets/widgetData";
 import { ItemSeparator } from "../../reusable";
 import Tooltip from "../../reusable/tooltip/Tooltip";
-import { StyledText } from "../styled-text/StyledText";
-import TitleWidget from "../title-widget/TitleWidget";
 import styles from "./TitleWithListWidgetStyle";
 
+const OverlappedImageComponent = ({
+  overlappedImageData,
+}: {
+  overlappedImageData: ImageFieldData[];
+}) => {
+  return (
+    <View style={styles.overlappedImageContainer}>
+      {overlappedImageData?.map(imageData => (
+        <StyledImage imageFieldData={imageData} />
+      ))}
+    </View>
+  );
+};
+
 const ListItemComponent = ({
   item,
   handleActions,
@@ -31,19 +45,45 @@ const ListItemComponent = ({
   useEffect(() => {
     item.onViewEvent && sendAsAnalyticsEvent(item.onViewEvent);
   });
+  const containerStyle: ViewStyle = {
+    ...(item.overlappedImageData?.length ? styles.containerStyles : {}),
+  };
+  const itemRowContainerStyle: ViewStyle = {
+    ...styles.itemRowContainer,
+    ...(item.overlappedImageData &&
+      item?.overlappedImageData?.length > 0 &&
+      styles.itemRowContainerStyles),
+  };
   return (
     <TouchableOpacity
       onPress={() => handleWidgetClick(item)}
       activeOpacity={1}
       disabled={!(item?.cta || item?.actions)}
     >
-      <TitleWidget
-        widgetData={item}
-        widgetStyle={styles.itemRowContainer}
-        handleActions={handleActions}
-        handleClick={handleClick}
-        widgetIndex={Number(item.id)}
-      />
+      <View style={containerStyle}>
+        {item.overlappedImageData && item.overlappedImageData.length > 0 && (
+          <OverlappedImageComponent
+            overlappedImageData={item.overlappedImageData}
+          />
+        )}
+
+        <TitleWidget
+          widgetData={item}
+          widgetStyle={itemRowContainerStyle}
+          handleActions={handleActions}
+          handleClick={handleClick}
+          widgetIndex={Number(item.id)}
+        />
+        {item?.rightIcon && (
+          <View style={styles.rightIconContainer}>
+            <StyledImage
+              imageFieldData={item?.rightIcon}
+              handleActions={handleActions}
+              handleClick={handleClick}
+            ></StyledImage>
+          </View>
+        )}
+      </View>
     </TouchableOpacity>
   );
 };
@@ -70,16 +110,7 @@ const TitleWithListWidget = ({
   handleActions,
   handleClick,
   widgetIndex,
-}: {
-  widgetData: TitleWithListWidgetData;
-  widgetStyle: ViewStyle;
-  handleActions: (
-    value: any | undefined | null,
-    actionPayloadList: GenericActionPayload | undefined,
-  ) => void;
-  handleClick?: (cta: CtaData) => void;
-  widgetIndex?: number;
-}) => {
+}: TitleWithListWidgetDataProps) => {
   const throttledHandleActions = useCallback(
     throttle(handleActions, 700, { leading: true, trailing: false }),
     [],
diff --git a/components/widgets/title-with-list-widget/TitleWithListWidgetStyle.ts b/components/widgets/title-with-list-widget/TitleWithListWidgetStyle.ts
index 4eea7c3941..d74e57754a 100644
--- a/components/widgets/title-with-list-widget/TitleWithListWidgetStyle.ts
+++ b/components/widgets/title-with-list-widget/TitleWithListWidgetStyle.ts
@@ -29,6 +29,26 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     justifyContent: "space-between",
   },
+  overlappedImageContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    marginLeft: 13,
+  },
+  rightIconContainer: {
+    paddingVertical: 3,
+    flexShrink: 0,
+    paddingHorizontal: 2,
+  },
+  containerStyles: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+  },
+  itemRowContainerStyles: {
+    flex: 1,
+    width: "100%",
+    paddingVertical: 3,
+  },
 });
 
 export default styles;
diff --git a/network/payloads/request/ComparePlanScreenRequest.ts b/network/payloads/request/ComparePlanScreenRequest.ts
new file mode 100644
index 0000000000..2dd0023ce7
--- /dev/null
+++ b/network/payloads/request/ComparePlanScreenRequest.ts
@@ -0,0 +1,11 @@
+interface ComparePlanScreenRequest {
+  quoteId?: string | null;
+  applicationId?: string | null;
+  applicationType?: string | null;
+  sourceScreenName?: string | null;
+  planDetails?: PlanDetail[];
+}
+interface PlanDetail {
+  planId?: string | null;
+  monthlyPremium?: string | null;
+}
diff --git a/yarn.lock b/yarn.lock
index 77f37f5aec..ae223565d9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6674,4 +6674,4 @@ yazl@^2.5.1:
 yocto-queue@^0.1.0:
   version "0.1.0"
   resolved "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz"
-  integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
+  integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
\ No newline at end of file