diff --git a/.changeset/strong-flowers-draw.md b/.changeset/strong-flowers-draw.md
new file mode 100644
index 000000000000..28172e3ef16d
--- /dev/null
+++ b/.changeset/strong-flowers-draw.md
@@ -0,0 +1,5 @@
+---
+"live-mobile": patch
+---
+
+Update UI in Manager for Services Recover
diff --git a/apps/ledger-live-mobile/src/components/SelectDevice/BluetoothEmpty.tsx b/apps/ledger-live-mobile/src/components/SelectDevice/BluetoothEmpty.tsx
index d73bd6fba453..12e18aa671d6 100644
--- a/apps/ledger-live-mobile/src/components/SelectDevice/BluetoothEmpty.tsx
+++ b/apps/ledger-live-mobile/src/components/SelectDevice/BluetoothEmpty.tsx
@@ -34,7 +34,7 @@ function BluetoothEmpty({ onPairNewDevice, hideAnimation }: Props) {
           </Text>
         </Box>
       </Flex>
-      <Button mb={8} event="PairDevice" type="main" onPress={onPairNewDevice} testID="pair-device">
+      <Button mb={5} event="PairDevice" type="main" onPress={onPairNewDevice} testID="pair-device">
         <Trans i18nKey="SelectDevice.deviceNotFoundPairNewDevice" />
       </Button>
     </>
diff --git a/apps/ledger-live-mobile/src/components/SelectDevice2/index.tsx b/apps/ledger-live-mobile/src/components/SelectDevice2/index.tsx
index 47e78db25e61..8613868755d4 100644
--- a/apps/ledger-live-mobile/src/components/SelectDevice2/index.tsx
+++ b/apps/ledger-live-mobile/src/components/SelectDevice2/index.tsx
@@ -354,53 +354,66 @@ export default function SelectDevice({
               </Touchable>
             )}
           </Flex>
-          <ScrollContainer my={4}>
-            {deviceList.length > 0 ? (
-              deviceList.map(device => (
-                <Item key={device.deviceId} device={device as Device} onPress={handleOnSelect} />
-              ))
-            ) : (
-              <Touchable
-                onPress={isChoiceDrawerDisplayedOnAddDevice ? onAddNewPress : openBlePairingFlow}
-                {...addNewButtonEventProps}
-              >
-                <Flex
-                  p={5}
-                  mb={4}
-                  borderRadius={5}
-                  flexDirection="row"
-                  alignItems="center"
-                  borderColor="neutral.c40"
-                  borderStyle="dashed"
-                  borderWidth="1px"
+          <ScrollContainer
+            my={4}
+            contentContainerStyle={{
+              flexGrow: 1,
+              justifyContent: "space-between",
+              flexDirection: "column",
+            }}
+          >
+            <Flex>
+              {deviceList.length > 0 ? (
+                deviceList.map(device => (
+                  <Item key={device.deviceId} device={device as Device} onPress={handleOnSelect} />
+                ))
+              ) : (
+                <Touchable
+                  onPress={isChoiceDrawerDisplayedOnAddDevice ? onAddNewPress : openBlePairingFlow}
+                  {...addNewButtonEventProps}
                 >
-                  <IconsLegacy.PlusMedium color="neutral.c90" size={20} />
-                  <Text variant="large" fontWeight="semiBold" ml={5}>
-                    {t(
-                      `manager.selectDevice.${
-                        Platform.OS === "android" ? "addWithBluetooth" : "addALedger"
-                      }`,
-                    )}
+                  <Flex
+                    p={5}
+                    mb={4}
+                    borderRadius={5}
+                    flexDirection="row"
+                    alignItems="center"
+                    borderColor="neutral.c40"
+                    borderStyle="dashed"
+                    borderWidth="1px"
+                  >
+                    <IconsLegacy.PlusMedium color="neutral.c90" size={20} />
+                    <Text variant="large" fontWeight="semiBold" ml={5}>
+                      {t(
+                        `manager.selectDevice.${
+                          Platform.OS === "android" ? "addWithBluetooth" : "addALedger"
+                        }`,
+                      )}
+                    </Text>
+                  </Flex>
+                </Touchable>
+              )}
+              {Platform.OS === "android" &&
+                USBDevice === undefined &&
+                ProxyDevice === undefined && (
+                  <Text
+                    color="neutral.c100"
+                    variant="large"
+                    fontWeight="semiBold"
+                    fontSize={4}
+                    lineHeight="21px"
+                  >
+                    <Trans i18nKey="manager.selectDevice.otgBanner" />
                   </Text>
-                </Flex>
-              </Touchable>
-            )}
-            {Platform.OS === "android" && USBDevice === undefined && ProxyDevice === undefined && (
-              <Text
-                color="neutral.c100"
-                variant="large"
-                fontWeight="semiBold"
-                fontSize={4}
-                lineHeight="21px"
-              >
-                <Trans i18nKey="manager.selectDevice.otgBanner" />
-              </Text>
-            )}
-            {displayServicesWidget && <ServicesWidget />}
+                )}
+              {displayServicesWidget && <ServicesWidget />}
+            </Flex>
+
+            <Flex alignItems="center" mt={10}>
+              <BuyDeviceCTA />
+            </Flex>
           </ScrollContainer>
-          <Flex alignItems="center" mt={5}>
-            <BuyDeviceCTA />
-          </Flex>
+
           <QueuedDrawer
             isRequestingToBeOpened={isAddNewDrawerOpen}
             onClose={() => setIsAddNewDrawerOpen(false)}
diff --git a/apps/ledger-live-mobile/src/components/ServicesWidget/Protect/NewProtectState.tsx b/apps/ledger-live-mobile/src/components/ServicesWidget/Protect/NewProtectState.tsx
deleted file mode 100644
index a91f62ba44fc..000000000000
--- a/apps/ledger-live-mobile/src/components/ServicesWidget/Protect/NewProtectState.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import { Button, Tag, Text } from "@ledgerhq/native-ui";
-import React, { useCallback } from "react";
-import { Trans, useTranslation } from "react-i18next";
-import { GestureResponderEvent, Linking } from "react-native";
-
-function NewProtectState({ params }: { params: Record<string, string> }) {
-  const { t } = useTranslation();
-  const { learnMoreURI, alreadySubscribedURI } = params || {};
-
-  const onLearnMore = useCallback(() => {
-    Linking.canOpenURL(learnMoreURI).then(() => Linking.openURL(learnMoreURI));
-  }, [learnMoreURI]);
-
-  const onAlreadySubscribe = useCallback(() => {
-    Linking.canOpenURL(alreadySubscribedURI).then(() => Linking.openURL(alreadySubscribedURI));
-  }, [alreadySubscribedURI]);
-
-  const onPressInLearnMore = useCallback((e: GestureResponderEvent) => {
-    e.stopPropagation();
-  }, []);
-
-  return (
-    <>
-      <Button
-        type="main"
-        outline={false}
-        size={"small"}
-        onPressIn={onPressInLearnMore}
-        onPress={onLearnMore}
-        mb={6}
-      >
-        {t(`servicesWidget.protect.status.new.actions.learnMore`)}
-      </Button>
-      <Text variant="paragraph" fontWeight={"semiBold"} color="neutral.c100" textAlign={"center"}>
-        <Trans
-          i18nKey="servicesWidget.protect.status.new.actions.alreadySubscribed"
-          components={{
-            LinkAccount: (
-              <Text
-                variant="paragraph"
-                fontWeight="semiBold"
-                color="neutral.c100"
-                onPress={onAlreadySubscribe}
-                style={{ textDecorationLine: "underline" }}
-              >
-                {""}
-              </Text>
-            ),
-          }}
-        />
-      </Text>
-    </>
-  );
-}
-
-const StateTag = () => {
-  const { t } = useTranslation();
-
-  return (
-    <Tag
-      color="neutral.c40"
-      textColor="neutral.c90"
-      ellipsizeMode="tail"
-      size="medium"
-      uppercase={false}
-    >
-      {t(`servicesWidget.protect.status.new.title`)}
-    </Tag>
-  );
-};
-
-NewProtectState.StatusTag = StateTag;
-
-export default NewProtectState;
diff --git a/apps/ledger-live-mobile/src/components/ServicesWidget/Protect/useProtect.ts b/apps/ledger-live-mobile/src/components/ServicesWidget/Protect/useProtect.ts
new file mode 100644
index 000000000000..a9ba5df4271d
--- /dev/null
+++ b/apps/ledger-live-mobile/src/components/ServicesWidget/Protect/useProtect.ts
@@ -0,0 +1,59 @@
+import { useFeature } from "@ledgerhq/live-common/featureFlags/index";
+import {
+  useLearnMoreURI,
+  useAlreadySubscribedURI,
+} from "@ledgerhq/live-common/hooks/recoverFeatureFlag";
+import { useMemo } from "react";
+import { Linking } from "react-native";
+import { track } from "../../../analytics";
+import { urls } from "../../../config/urls";
+
+export function useProtect() {
+  const servicesConfig = useFeature("protectServicesMobile");
+
+  const learnMoreURI = useLearnMoreURI(servicesConfig);
+  const alreadySubscribedURI = useAlreadySubscribedURI(servicesConfig);
+
+  const onLearnMore = () => {
+    const url = `${learnMoreURI}&source=${urls.recoverSources.myLedger}`;
+    Linking.canOpenURL(url).then(() => Linking.openURL(url));
+  };
+
+  const onAlreadySubscribe = () => {
+    const url = `${alreadySubscribedURI}&source=${urls.recoverSources.myLedger}`;
+    Linking.canOpenURL(url).then(() => Linking.openURL(url));
+  };
+
+  const onClickCard = () => {
+    onLearnMore();
+    trackEvent("card_clicked", "Recover Card");
+  };
+
+  const onClickSignIn = () => {
+    onAlreadySubscribe();
+    trackEvent("button_clicked", "Sign In Recover");
+  };
+  const onClickFreeTrial = () => {
+    onLearnMore();
+    trackEvent("button_clicked", "Try for Free Recover");
+  };
+
+  const trackEvent = (eventName: "button_clicked" | "card_clicked", name: string) => {
+    track(eventName, {
+      ...(eventName === "button_clicked" && { button: name }),
+      ...(eventName === "card_clicked" && { card: name }),
+    });
+  };
+
+  const displayService = useMemo(
+    () => servicesConfig?.enabled && learnMoreURI && alreadySubscribedURI,
+    [alreadySubscribedURI, learnMoreURI, servicesConfig?.enabled],
+  );
+
+  return {
+    displayService,
+    onClickCard,
+    onClickSignIn,
+    onClickFreeTrial,
+  };
+}
diff --git a/apps/ledger-live-mobile/src/components/ServicesWidget/index.tsx b/apps/ledger-live-mobile/src/components/ServicesWidget/index.tsx
index ae4b1083eaec..0894b41f51e5 100644
--- a/apps/ledger-live-mobile/src/components/ServicesWidget/index.tsx
+++ b/apps/ledger-live-mobile/src/components/ServicesWidget/index.tsx
@@ -1,66 +1,84 @@
-import { Flex, Text } from "@ledgerhq/native-ui";
-import React, { memo, useCallback } from "react";
-import { Linking, Image } from "react-native";
+import { Button, Flex, Text } from "@ledgerhq/native-ui";
+import React, { memo } from "react";
+import { Image, ImageBackground } from "react-native";
 import { useTranslation } from "react-i18next";
-import { useTheme } from "styled-components/native";
-import { useFeature } from "@ledgerhq/live-common/featureFlags/index";
-import {
-  useAlreadySubscribedURI,
-  useLearnMoreURI,
-} from "@ledgerhq/live-common/hooks/recoverFeatureFlag";
-import NewProtectState from "./Protect/NewProtectState";
+import styled, { useTheme } from "styled-components/native";
+
 import Touchable from "../Touchable";
 
 import LedgerRecoverLogoLight from "../../images/ledger_recover_light.png";
-import LedgerRecoverLogoDark from "../../images/ledger_recover_dark.png";
-
-import LedgerRecoverCardTopImage from "../../images/ledger_recover_card_top.png";
+import LedgerRecoverBackground from "../../images/ledger_recover_card_background.png";
+import { useProtect } from "./Protect/useProtect";
 
 function ServicesWidget() {
   const { t } = useTranslation();
-  const servicesConfig = useFeature("protectServicesMobile");
   const theme = useTheme();
+  const { displayService, onClickFreeTrial, onClickCard, onClickSignIn } = useProtect();
 
-  const learnMoreURI = useLearnMoreURI(servicesConfig);
-  const alreadySubscribedURI = useAlreadySubscribedURI(servicesConfig);
+  return displayService ? (
+    <Flex>
+      <Flex flexDirection="row" justifyContent="space-between" alignItems="center" mb={6} mt={8}>
+        <Text variant="h5" fontWeight="semiBold">
+          {t("servicesWidget.title")}
+        </Text>
 
-  const onCardPress = useCallback(() => {
-    if (alreadySubscribedURI) {
-      Linking.canOpenURL(alreadySubscribedURI).then(() => Linking.openURL(alreadySubscribedURI));
-    }
-  }, [alreadySubscribedURI]);
+        <Touchable onPress={onClickSignIn}>
+          <Text color="primary.c90" mr={3} variant="body">
+            {t("servicesWidget.signIn")}
+          </Text>
+        </Touchable>
+      </Flex>
+      <StyledTouchable onPress={onClickCard}>
+        <ImageBackground
+          source={LedgerRecoverBackground}
+          style={{
+            width: "100%",
+            height: "100%",
+            position: "relative",
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            borderRadius: 30,
+          }}
+          imageStyle={{
+            borderRadius: theme.space[4],
+          }}
+        >
+          <TagComponent bg="opacityReverse.c50" borderRadius={1} px={2} py={1}>
+            <Text variant="small" fontWeight="semiBold" color="neutral.c100" numberOfLines={1}>
+              {t("servicesWidget.recover.tag")}
+            </Text>
+          </TagComponent>
 
-  return servicesConfig?.enabled && learnMoreURI && alreadySubscribedURI ? (
-    <>
-      <Text mt={10} fontWeight="semiBold" variant="h5" mb={6}>
-        {t("servicesWidget.title")}
+          <ImageComponent>
+            <Image source={LedgerRecoverLogoLight} style={{ width: 90, height: 26 }} />
+          </ImageComponent>
+        </ImageBackground>
+      </StyledTouchable>
+
+      <Text color="neutral.c80" fontWeight="semiBold" my={4}>
+        {t("servicesWidget.recover.desc")}
       </Text>
-      <Touchable onPress={onCardPress}>
-        <Flex bg="neutral.c30" borderRadius={8} mb={13} overflow="hidden">
-          <Image
-            source={LedgerRecoverCardTopImage}
-            resizeMode={"stretch"}
-            style={{ width: "100%", height: 8 }}
-          />
-          <Flex p={7}>
-            <Flex flexDirection="row" justifyContent="space-between" alignItems="center" mb={6}>
-              <Image
-                source={
-                  theme.colors.type === "light" ? LedgerRecoverLogoLight : LedgerRecoverLogoDark
-                }
-                style={{ width: 90, height: 26 }}
-              />
-              <NewProtectState.StatusTag />
-            </Flex>
-            <Text variant="body" color="neutral.c80" mb={7}>
-              {t(`servicesWidget.protect.status.new.desc`)}
-            </Text>
-            <NewProtectState params={{ learnMoreURI, alreadySubscribedURI }} />
-          </Flex>
-        </Flex>
-      </Touchable>
-    </>
+
+      <Button type="main" onPress={onClickFreeTrial} style={{ alignSelf: "flex-start" }}>
+        <Text variant="body" fontWeight="semiBold" color="neutral.c00">
+          {t("servicesWidget.recover.cta")}
+        </Text>
+      </Button>
+    </Flex>
   ) : null;
 }
 
+const StyledTouchable = styled(Touchable)`
+  height: 110px;
+`;
+
+const TagComponent = styled(Flex)`
+  position: absolute;
+  right: 9px;
+  top: 9px;
+`;
+
+const ImageComponent = styled(Flex)``;
+
 export default memo(ServicesWidget);
diff --git a/apps/ledger-live-mobile/src/images/ledger_recover_card_background.png b/apps/ledger-live-mobile/src/images/ledger_recover_card_background.png
new file mode 100644
index 000000000000..e17c26eda726
Binary files /dev/null and b/apps/ledger-live-mobile/src/images/ledger_recover_card_background.png differ
diff --git a/apps/ledger-live-mobile/src/locales/en/common.json b/apps/ledger-live-mobile/src/locales/en/common.json
index 74dc1a3b77fe..962cd353c823 100644
--- a/apps/ledger-live-mobile/src/locales/en/common.json
+++ b/apps/ledger-live-mobile/src/locales/en/common.json
@@ -6376,6 +6376,12 @@
   "servicesWidget": {
     "title": "Services",
     "subTitle": "Manage your Ledger services",
+    "signIn": "Sign in",
+    "recover": {
+      "cta": "Start your free trial",
+      "desc": "Stop worrying about getting locked out of your own wallet.",
+      "tag": "1 month free"
+    },
     "protect": {
       "status": {
         "new": {
diff --git a/apps/ledger-live-mobile/src/screens/Manager/index.tsx b/apps/ledger-live-mobile/src/screens/Manager/index.tsx
index a1bdf177613c..809bc1bf1430 100644
--- a/apps/ledger-live-mobile/src/screens/Manager/index.tsx
+++ b/apps/ledger-live-mobile/src/screens/Manager/index.tsx
@@ -166,7 +166,7 @@ const ChooseDevice: React.FC<ChooseDeviceProps> = ({ isFocused }) => {
         </Flex>
       ) : (
         <NavigationScrollView
-          style={{ paddingBottom: insets.bottom + TAB_BAR_SAFE_HEIGHT }}
+          style={{ marginBottom: insets.bottom + TAB_BAR_SAFE_HEIGHT }}
           contentContainerStyle={styles.scrollContainer}
         >
           <SelectDevice