diff --git a/webapp/src/components/BottomNavigation.tsx b/webapp/src/components/BottomNavigation.tsx
index e84827d7..3bccf2f1 100644
--- a/webapp/src/components/BottomNavigation.tsx
+++ b/webapp/src/components/BottomNavigation.tsx
@@ -34,7 +34,7 @@ const BottomNavigation = () => {
 
   const navigationItems = [
     {
-      label: "Mes réductions",
+      label: "Mon portefeuille",
       icon: ReductionOutlineIcon,
       activeIcon: ReductionIcon,
       href: "/dashboard/wallet",
diff --git a/webapp/src/components/wallet/Filter.tsx b/webapp/src/components/wallet/Filter.tsx
new file mode 100644
index 00000000..93c819a4
--- /dev/null
+++ b/webapp/src/components/wallet/Filter.tsx
@@ -0,0 +1,55 @@
+import { Center, Box, Text } from "@chakra-ui/react";
+import { Dispatch, SetStateAction, ReactNode } from "react";
+
+type WalletFilterProps = {
+  label: string;
+  slug: string;
+  filterSelected: string;
+  setFilterSelected: Dispatch<SetStateAction<string>>;
+  icon: ReactNode;
+  onClick?: () => void;
+  disabled?: boolean;
+};
+
+const WalletFilter = ({
+  label,
+  icon,
+  filterSelected,
+  slug,
+  setFilterSelected,
+  disabled,
+  onClick,
+}: WalletFilterProps) => {
+  const selected = filterSelected === slug;
+
+  return (
+    <Center
+      flexDir="column"
+      gap={1}
+      flex={1}
+      onClick={onClick ? onClick : () => !disabled && setFilterSelected(slug)}
+    >
+      <Box
+        bgColor={selected ? "primary" : "bgGray"}
+        color={selected ? "white" : "black"}
+        px={4}
+        py={1.5}
+        fontWeight={500}
+        borderRadius="2.5xl"
+        aria-label="Account"
+      >
+        {icon}
+      </Box>
+      <Text
+        fontSize={12}
+        fontWeight={500}
+        textAlign="center"
+        color={!disabled ? "black" : "disabled"}
+      >
+        {label}
+      </Text>
+    </Center>
+  );
+};
+
+export default WalletFilter;
diff --git a/webapp/src/components/wallet/HelpSection.tsx b/webapp/src/components/wallet/HelpSection.tsx
new file mode 100644
index 00000000..e4b1affb
--- /dev/null
+++ b/webapp/src/components/wallet/HelpSection.tsx
@@ -0,0 +1,42 @@
+import { Flex, Icon, Text } from "@chakra-ui/react";
+import { ReactNode } from "react";
+import { HiMiniTag } from "react-icons/hi2";
+
+type HelpSectionProps = {
+  title: string;
+  icon: ReactNode;
+  iconName: string;
+  description: string;
+};
+
+const HelpSection = ({
+  title,
+  icon,
+  iconName,
+  description,
+}: HelpSectionProps) => {
+  return (
+    <Flex flexDir="column">
+      <Text fontWeight={700}>{title}</Text>
+      <Flex
+        alignItems="center"
+        mt={2}
+        bgColor="bgGray"
+        borderRadius="full"
+        alignSelf="start"
+        py={1}
+        px={2}
+        gap={1}
+        fontWeight={500}
+      >
+        {icon}
+        {iconName}
+      </Flex>
+      <Text fontWeight={500} mt={3}>
+        {description}
+      </Text>
+    </Flex>
+  );
+};
+
+export default HelpSection;
diff --git a/webapp/src/components/wrappers/WalletWrapper.tsx b/webapp/src/components/wrappers/WalletWrapper.tsx
index f63b43d2..c3eaf285 100644
--- a/webapp/src/components/wrappers/WalletWrapper.tsx
+++ b/webapp/src/components/wrappers/WalletWrapper.tsx
@@ -1,48 +1,219 @@
-import { Box, Button, Flex, Heading } from "@chakra-ui/react";
-import { ReactNode } from "react";
+import {
+  Box,
+  Center,
+  Divider,
+  Flex,
+  Heading,
+  Icon,
+  Modal,
+  ModalBody,
+  ModalContent,
+  Text,
+  useDisclosure,
+  Link,
+} from "@chakra-ui/react";
+import { Dispatch, ReactNode, SetStateAction } from "react";
 import { PassIcon } from "../icons/pass";
 import { useRouter } from "next/router";
+import Image from "../ui/Image";
+import {
+  HiChevronRight,
+  HiMiniInformationCircle,
+  HiMiniTag,
+  HiMiniTicket,
+  HiReceiptRefund,
+  HiRectangleGroup,
+  HiXMark,
+} from "react-icons/hi2";
+import { BarcodeIcon } from "../icons/barcode";
+import { api } from "~/utils/api";
+import BackButton from "../ui/BackButton";
+import WalletFilter from "../wallet/Filter";
+import HelpSection from "../wallet/HelpSection";
+import NextLink from "next/link";
+
+const helpItems = [
+  {
+    title: "Quand ce sont des codes",
+    icon: <Icon as={HiMiniTag} w={4} h={4} />,
+    iconName: "Code",
+    description:
+      "Le montant que vous économisez grâce aux codes de réduction ne peut as toujours être calculé et ajouté à votre somme d’économies. Par exemple si le code vous offre -10% sur votre commande, l’application carte “jeune engagé” ne peut savoir combien vous avez dépensé dans votre commande et donc combien représentent les 10% d’économies finales.",
+  },
+  {
+    title: "Quand ce sont des bons d’achat",
+    icon: <BarcodeIcon w={4} h={4} />,
+    iconName: "Bons d’achat",
+    description:
+      "Pour les bons d’achat calculons les économies que vous réalisez directement au moment où vous achetez votre bon d’achat. Par exemple si vous achetez un bon d’une valeur de 10€ avec 10% de réduction, l’application carte “jeune engagé” vous affiche 1€ d’économie réalisée.",
+  },
+  {
+    title: "Quand ce sont des billets",
+    icon: <Icon as={HiMiniTicket} w={4} h={4} />,
+    iconName: "Billets",
+    description:
+      "Pour les billets nous calculons directement les économies que vous faite grâce à la différence entre le prix public qui est affiché sur l’offre et le prix réel avec la réduction qui vous est proposé sur la carte “jeune engagé”.",
+  },
+];
 
 type WalletWrapperProps = {
   children: ReactNode;
+  filterSelected: string;
+  setFilterSelected: Dispatch<SetStateAction<string>>;
 };
 
-const WalletWrapper = ({ children }: WalletWrapperProps) => {
+const WalletWrapper = ({
+  children,
+  filterSelected,
+  setFilterSelected,
+}: WalletWrapperProps) => {
   const router = useRouter();
+  const {
+    isOpen: isOpenInfoModal,
+    onOpen: onOpenInfoModal,
+    onClose: onCloseInfoModal,
+  } = useDisclosure();
+
+  const { data: resultTotalAmount } =
+    api.saving.getTotalAmountByCurrentUser.useQuery();
+  const { data: userTotalAmount } = resultTotalAmount || { data: 0 };
 
   return (
-    <Flex flexDir="column" pt={14} h="full" bgColor="bgGray">
-      <Button
-        colorScheme="whiteBtn"
-        color="black"
-        alignSelf="start"
-        leftIcon={<PassIcon w={6} h={6} />}
-        ml={8}
-        mb={4}
-        py={5}
-        px={3}
-        fontWeight={500}
-        borderRadius="2.5xl"
-        size="xs"
-        onClick={() => router.push("/dashboard/account")}
-      >
-        Ma carte
-      </Button>
-      <Flex
-        flexDir="column"
-        h="full"
-        bgColor="white"
-        borderTopRadius="2.5xl"
-        pt={5}
-      >
-        <Heading as="h2" fontWeight={800} px={8}>
-          Mes Réductions
-        </Heading>
-        <Box flex={1} mt={8} pb={28}>
-          {children}
-        </Box>
+    <>
+      <Flex flexDir="column" minH="full" pt={14}>
+        <Center flexDir="column" position="relative">
+          <Icon
+            as={HiMiniInformationCircle}
+            position="absolute"
+            top={-1}
+            right={10}
+            w={5}
+            h={5}
+            color="disabled"
+            onClick={onOpenInfoModal}
+          />
+          <Box position="absolute" top={-3.5} left={8}>
+            <WalletFilter
+              label="Ma carte"
+              slug="card"
+              icon={<PassIcon w={5} h={5} mt={-1} />}
+              filterSelected={filterSelected}
+              setFilterSelected={setFilterSelected}
+              onClick={() => router.push("/dashboard/account")}
+            />
+          </Box>
+          <Image src="/images/cje-logo.png" alt="Logo" width={73} height={40} />
+          <Text fontSize={14} fontWeight={500} mt={4}>
+            Vous avez économisé
+          </Text>
+          <Text fontSize={36} fontWeight={800} lineHeight="normal" mt={2}>
+            {userTotalAmount}€
+          </Text>
+        </Center>
+        <Flex
+          flexDir="column"
+          minH="full"
+          bgColor="white"
+          borderTopRadius="2.5xl"
+          mt={10}
+          pt={5}
+          shadow="wallet-header"
+        >
+          <Flex alignItems="center" px={7}>
+            <WalletFilter
+              label="Tout"
+              slug="all"
+              icon={<Icon as={HiRectangleGroup} w={6} h={6} mb={-1} />}
+              filterSelected={filterSelected}
+              setFilterSelected={setFilterSelected}
+            />
+            <WalletFilter
+              label="Mes codes"
+              slug="coupons"
+              icon={<Icon as={HiMiniTag} w={6} h={6} mb={-1} />}
+              filterSelected={filterSelected}
+              setFilterSelected={setFilterSelected}
+            />
+            <WalletFilter
+              label="Mes bons"
+              slug="orders"
+              icon={<BarcodeIcon w={6} h={6} mt={-1.5} />}
+              filterSelected={filterSelected}
+              setFilterSelected={setFilterSelected}
+            />
+            <WalletFilter
+              label="Mes billets"
+              slug="tickets"
+              icon={
+                <Icon as={HiMiniTicket} w={6} h={6} mb={-1} opacity={0.2} />
+              }
+              filterSelected={filterSelected}
+              setFilterSelected={setFilterSelected}
+              disabled
+            />
+          </Flex>
+          <Box flex={1} mt={8} pb={28}>
+            {children}
+          </Box>
+        </Flex>
       </Flex>
-    </Flex>
+      <Modal isOpen={isOpenInfoModal} onClose={onCloseInfoModal} size="full">
+        <ModalContent>
+          <ModalBody display="flex" flexDirection="column" mt={10} pb={12}>
+            <Box ml={-2}>
+              <BackButton
+                onClick={onCloseInfoModal}
+                variant="ghost"
+                icon={HiXMark}
+              />
+            </Box>
+            <Heading size="xl" fontWeight={800} mt={5}>
+              Comment sont calculées mes économies ?
+            </Heading>
+            <Text fontWeight={500} mt={6}>
+              Vos économies sont calculées à partir des offres que vous avez
+              utilisées.
+            </Text>
+            <Divider borderColor="cje-gray.100" mt={4} />
+            <Link
+              as={NextLink}
+              href="/dashboard/account/history"
+              _hover={{ textDecoration: "none" }}
+              passHref
+            >
+              <Flex alignItems="center" justifyContent="space-between" py={5}>
+                <Flex alignItems="center" gap={4}>
+                  <Icon
+                    as={HiReceiptRefund}
+                    w={5}
+                    h={5}
+                    mt={0.5}
+                    color="blackLight"
+                  />
+                  <Text fontWeight={500}>Historique des réductions</Text>
+                </Flex>
+                <Icon as={HiChevronRight} w={6} h={6} />
+              </Flex>
+            </Link>
+            <Divider borderColor="cje-gray.100" mb={4} />
+            {helpItems.map(({ title, icon, iconName, description }, index) => (
+              <>
+                <HelpSection
+                  key={index}
+                  title={`${index + 1}. ${title}`}
+                  icon={icon}
+                  iconName={iconName}
+                  description={description}
+                />
+                {index !== helpItems.length - 1 && (
+                  <Divider borderColor="cje-gray.100" my={4} />
+                )}
+              </>
+            ))}
+          </ModalBody>
+        </ModalContent>
+      </Modal>
+    </>
   );
 };
 
diff --git a/webapp/src/pages/dashboard/account/history.tsx b/webapp/src/pages/dashboard/account/history.tsx
index c226231d..2e0912ad 100644
--- a/webapp/src/pages/dashboard/account/history.tsx
+++ b/webapp/src/pages/dashboard/account/history.tsx
@@ -43,9 +43,12 @@ export default function AccountHistory() {
     api.order.getList.useQuery({
       status: "delivered",
     });
+  const { data: resultTotalAmount } =
+    api.saving.getTotalAmountByCurrentUser.useQuery();
 
   const { data: userSavings } = resultUserSavings || {};
   const { data: userOrders } = resultUserOrders || {};
+  const { data: userTotalAmount } = resultTotalAmount || { data: 0 };
 
   if (
     !user ||
@@ -68,155 +71,186 @@ export default function AccountHistory() {
   );
 
   return (
-    <Box pt={12} pb={36} px={8}>
-      <IconButton
-        alignSelf="start"
-        shadow="default"
-        flexShrink={0}
-        aria-label="Retour"
-        colorScheme="whiteBtn"
-        onClick={() => {
-          router.back();
-        }}
-        borderRadius="2.25xl"
-        size="md"
-        icon={<ChevronLeftIcon w={6} h={6} color="black" />}
-      />
-      <Heading as="h2" size="xl" fontWeight={800} mt={6}>
-        Historique de mes réductions
-      </Heading>
-      {history.length > 0 ? (
-        <Flex flexDir="column" mt={8}>
-          {history.map((userHistoryItem, index) => {
-            const currentDate = new Date();
-            const currentCouponUsedAt = new Date(
-              ("usedAt" in userHistoryItem
-                ? userHistoryItem.usedAt
+    <Box pt={12} pb={36}>
+      <Box px={8}>
+        <IconButton
+          alignSelf="start"
+          shadow="default"
+          flexShrink={0}
+          aria-label="Retour"
+          colorScheme="whiteBtn"
+          onClick={() => {
+            router.back();
+          }}
+          borderRadius="2.25xl"
+          size="md"
+          icon={<ChevronLeftIcon w={6} h={6} color="black" />}
+        />
+        <Heading as="h2" size="xl" fontWeight={800} mt={6}>
+          Historique de mes économies
+        </Heading>
+        <Center flexDir="column" mt={6}>
+          <Text fontSize={14} fontWeight={500}>
+            Vous avez économisé
+          </Text>
+          <Text fontSize={24} fontWeight={800} lineHeight="normal">
+            {userTotalAmount}€
+          </Text>
+          <Text fontSize={12} color="disabled" fontWeight={500} mt={0.5}>
+            vous avez la carte “jeune engagé” depuis le{" "}
+            {new Date(user.createdAt).toLocaleDateString("fr-FR", {
+              day: "2-digit",
+              month: "2-digit",
+              year: "numeric",
+            })}
+          </Text>
+        </Center>
+      </Box>
+      <Divider mt={8} borderColor="bgGray" borderWidth={8} w="auto" />
+      <Box px={8}>
+        {history.length > 0 ? (
+          <Flex flexDir="column" mt={7}>
+            {history.map((userHistoryItem, index) => {
+              const currentDate = new Date();
+              const currentCouponUsedAt = new Date(
+                ("usedAt" in userHistoryItem
                   ? userHistoryItem.usedAt
-                  : userHistoryItem.assignUserAt
-                : userHistoryItem.createdAt) as string
-            );
-            const previousCoupon = history[index - 1];
-            const previousCouponUsedAt = previousCoupon
-              ? new Date(
-                  ("usedAt" in previousCoupon
-                    ? previousCoupon.usedAt
+                    ? userHistoryItem.usedAt
+                    : userHistoryItem.assignUserAt
+                  : userHistoryItem.createdAt) as string
+              );
+              console.log("currentCouponUsedAt", currentCouponUsedAt);
+              const previousCoupon = history[index - 1];
+              const previousCouponUsedAt = previousCoupon
+                ? new Date(
+                    ("usedAt" in previousCoupon
                       ? previousCoupon.usedAt
-                      : previousCoupon.assignUserAt
-                    : previousCoupon.createdAt) as string
-                )
-              : new Date();
+                        ? previousCoupon.usedAt
+                        : previousCoupon.assignUserAt
+                      : previousCoupon.createdAt) as string
+                  )
+                : new Date();
 
-            const currentMonth = currentCouponUsedAt.toLocaleString("fr-FR", {
-              month: "long",
-            });
+              const currentMonth = currentCouponUsedAt.toLocaleString("fr-FR", {
+                month: "long",
+              });
 
-            const darkenPartnerColor = new TinyColor(
-              userHistoryItem.offer.partner.color
-            )
-              .darken(10)
-              .toHexString();
+              const darkenPartnerColor = new TinyColor(
+                userHistoryItem.offer.partner.color
+              )
+                .darken(10)
+                .toHexString();
 
-            const formatedCurrentMonth =
-              index === 0 &&
-              currentDate.getMonth() === currentCouponUsedAt.getMonth() &&
-              currentDate.getFullYear() === currentCouponUsedAt.getFullYear()
-                ? "Ce mois-ci"
-                : `${
-                    currentMonth.charAt(0).toUpperCase() + currentMonth.slice(1)
-                  } ${
-                    currentDate.getFullYear() !==
-                    currentCouponUsedAt.getFullYear()
-                      ? currentCouponUsedAt.getFullYear()
-                      : ""
-                  }`;
+              const formatedCurrentMonth =
+                index === 0 &&
+                currentDate.getMonth() === currentCouponUsedAt.getMonth() &&
+                currentDate.getFullYear() === currentCouponUsedAt.getFullYear()
+                  ? "Ce mois-ci"
+                  : `${
+                      currentMonth.charAt(0).toUpperCase() +
+                      currentMonth.slice(1)
+                    } ${
+                      currentDate.getFullYear() !==
+                      currentCouponUsedAt.getFullYear()
+                        ? currentCouponUsedAt.getFullYear()
+                        : ""
+                    }`;
 
-            return (
-              <>
-                {currentCouponUsedAt.getMonth() !==
-                  previousCouponUsedAt.getMonth() && (
-                  <Text
-                    key={currentCouponUsedAt.getMonth()}
-                    fontWeight={500}
-                    color="disabled"
-                    mt={index === 0 ? 0 : 6}
-                  >
-                    {formatedCurrentMonth}
-                  </Text>
-                )}
-                <Flex
-                  key={userHistoryItem.id}
-                  alignItems="center"
-                  justifyContent="space-between"
-                  mt={4}
-                >
-                  <Flex alignItems="center" gap={2}>
-                    <Box
-                      borderRadius="2xl"
-                      flexShrink={0}
-                      bgColor={darkenPartnerColor}
-                      p={1.5}
+              return (
+                <>
+                  {currentCouponUsedAt.getMonth() !==
+                    previousCouponUsedAt.getMonth() && (
+                    <Text
+                      key={currentCouponUsedAt.getMonth()}
+                      fontWeight={500}
+                      color="disabled"
+                      mt={index === 0 ? 0 : 6}
                     >
-                      <Image
-                        src={userHistoryItem.offer.partner.icon.url as string}
-                        alt={userHistoryItem.offer.partner.icon.alt as string}
-                        width={36}
-                        height={36}
-                        style={{ borderRadius: "8px" }}
-                      />
-                    </Box>
-                    <Flex flexDir="column" justifyContent="start" w="full">
-                      <Text fontSize={14} fontWeight={500}>
-                        {userHistoryItem.offer.partner.name}
-                      </Text>
-                      <Text fontSize={12} fontWeight={500} noOfLines={1}>
-                        {userHistoryItem.offer.title}
-                      </Text>
-                      <Box mt={1}>
-                        {"used" in userHistoryItem && !userHistoryItem.used ? (
-                          <Flex alignItems="center" color="disabled" gap={0.5}>
-                            <Icon as={HiMiniClock} w={3} h={3} />
-                            <Text fontWeight={500} fontSize={12}>
-                              Fin{" "}
-                              {currentCouponUsedAt.toLocaleDateString("fr-FR", {
-                                day: "2-digit",
-                                month: "2-digit",
-                              })}
-                            </Text>
-                          </Flex>
-                        ) : (
-                          <Flex
-                            alignItems="center"
-                            fontSize={12}
-                            px={1}
-                            color="success"
-                            bgColor="successLight"
-                            w="fit-content"
-                            borderRadius="2.5xl"
-                            gap={0.5}
-                            fontWeight={500}
-                          >
-                            <Icon
-                              as={HiMiniCheckCircle}
-                              stroke="white"
-                              w={3}
-                              h={3}
-                            />
-                            Déjà utilisée
-                          </Flex>
-                        )}
+                      {formatedCurrentMonth}
+                    </Text>
+                  )}
+                  <Flex
+                    key={userHistoryItem.id}
+                    alignItems="center"
+                    justifyContent="space-between"
+                    mt={4}
+                  >
+                    <Flex alignItems="center" gap={2}>
+                      <Box
+                        borderRadius="2xl"
+                        flexShrink={0}
+                        bgColor={darkenPartnerColor}
+                        p={1.5}
+                      >
+                        <Image
+                          src={userHistoryItem.offer.partner.icon.url as string}
+                          alt={userHistoryItem.offer.partner.icon.alt as string}
+                          width={36}
+                          height={36}
+                          style={{ borderRadius: "8px" }}
+                        />
                       </Box>
+                      <Flex flexDir="column" justifyContent="start" w="full">
+                        <Text fontSize={14} fontWeight={500}>
+                          {userHistoryItem.offer.partner.name}
+                        </Text>
+                        <Text fontSize={12} fontWeight={500} noOfLines={1}>
+                          {userHistoryItem.offer.title}
+                        </Text>
+                        <Box mt={1}>
+                          {"used" in userHistoryItem &&
+                          !userHistoryItem.used ? (
+                            <Flex
+                              alignItems="center"
+                              color="disabled"
+                              gap={0.5}
+                            >
+                              <Icon as={HiMiniClock} w={3} h={3} />
+                              <Text fontWeight={500} fontSize={12}>
+                                Fin{" "}
+                                {currentCouponUsedAt.toLocaleDateString(
+                                  "fr-FR",
+                                  {
+                                    day: "2-digit",
+                                    month: "2-digit",
+                                  }
+                                )}
+                              </Text>
+                            </Flex>
+                          ) : (
+                            <Flex
+                              alignItems="center"
+                              fontSize={12}
+                              px={1}
+                              color="success"
+                              bgColor="successLight"
+                              w="fit-content"
+                              borderRadius="2.5xl"
+                              gap={0.5}
+                              fontWeight={500}
+                            >
+                              <Icon
+                                as={HiMiniCheckCircle}
+                                stroke="white"
+                                w={3}
+                                h={3}
+                              />
+                              Déjà utilisée
+                            </Flex>
+                          )}
+                        </Box>
+                      </Flex>
                     </Flex>
                   </Flex>
-                </Flex>
-                <Divider mt={2} />
-              </>
-            );
-          })}
-        </Flex>
-      ) : (
-        <UserSavingsNoData />
-      )}
+                  <Divider mt={2} />
+                </>
+              );
+            })}
+          </Flex>
+        ) : (
+          <UserSavingsNoData />
+        )}
+      </Box>
     </Box>
   );
 }
diff --git a/webapp/src/pages/dashboard/wallet/index.tsx b/webapp/src/pages/dashboard/wallet/index.tsx
index 2eeeea60..b3eac703 100644
--- a/webapp/src/pages/dashboard/wallet/index.tsx
+++ b/webapp/src/pages/dashboard/wallet/index.tsx
@@ -21,10 +21,13 @@ import Image from "next/image";
 import { CouponIncluded } from "~/server/api/routers/coupon";
 import { OrderIncluded } from "~/server/api/routers/order";
 import OrderCard from "~/components/cards/OrderCard";
+import { useMemo, useState } from "react";
 
 export default function Wallet() {
   const router = useRouter();
 
+  const [filterSelected, setFilterSelected] = useState("all");
+
   const { data: resultOffers, isLoading: isLoadingOffers } =
     api.offer.getListOfAvailables.useQuery({
       page: 1,
@@ -40,24 +43,38 @@ export default function Wallet() {
   const { data: currentUserOrders } = resultUserOrders || { data: [] };
   const { data: offers } = resultOffers || { data: [] };
 
+  const walletOffers = useMemo(() => {
+    let filteredOffers: (CouponIncluded | OrderIncluded)[] = [];
+    if (filterSelected === "all") {
+      filteredOffers = [...currentUserCoupons, ...currentUserOrders];
+    } else if (filterSelected === "coupons") {
+      filteredOffers = currentUserCoupons;
+    } else if (filterSelected === "orders") {
+      filteredOffers = currentUserOrders;
+    }
+    return filteredOffers.sort(
+      (a, b) =>
+        new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
+    );
+  }, [filterSelected, currentUserCoupons, currentUserOrders]);
+
   if (isLoadingUserCoupons || isLoadingOffers || isLoadingUserOrders)
     return (
-      <WalletWrapper>
+      <WalletWrapper
+        filterSelected={filterSelected}
+        setFilterSelected={setFilterSelected}
+      >
         <Center h="85%" w="full">
           <LoadingLoader />
         </Center>
       </WalletWrapper>
     );
 
-  const walletOffers: (CouponIncluded | OrderIncluded)[] = [
-    ...currentUserCoupons,
-    ...currentUserOrders,
-  ].sort(
-    (a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
-  );
-
   return (
-    <WalletWrapper>
+    <WalletWrapper
+      filterSelected={filterSelected}
+      setFilterSelected={setFilterSelected}
+    >
       {walletOffers && walletOffers.length > 0 ? (
         <>
           <Flex flexDir="column" gap={6}>
@@ -69,7 +86,7 @@ export default function Wallet() {
                 pt={index !== 0 ? 3 : 0}
                 zIndex={1}
                 borderTopWidth={index !== 0 ? 1 : 0}
-                px={8}
+                px={7}
               >
                 {"code" in walletOffer ? (
                   <CouponCard
@@ -84,7 +101,7 @@ export default function Wallet() {
               </Box>
             ))}
           </Flex>
-          <Box px={8}>
+          <Box px={7}>
             <Divider mt={16} borderColor="cje-gray.100" />
             <Link
               as={NextLink}
@@ -110,11 +127,11 @@ export default function Wallet() {
           </Box>
         </>
       ) : (
-        <Box px={8}>
+        <Box px={7}>
           <CouponCard mode="wallet" />
         </Box>
       )}
-      <Box px={8}>
+      <Box px={7}>
         <Center
           flexDir="column"
           mt={4}
diff --git a/webapp/src/server/api/routers/saving.ts b/webapp/src/server/api/routers/saving.ts
index b0d398e3..83a6b92f 100644
--- a/webapp/src/server/api/routers/saving.ts
+++ b/webapp/src/server/api/routers/saving.ts
@@ -57,32 +57,25 @@ export const savingRouter = createTRPCRouter({
       };
     }),
 
-  getTotalAmountByUserId: userProtectedProcedure
-    .input(
-      z.object({
-        userId: z.number(),
-      })
-    )
-    .query(async ({ ctx, input }) => {
-      const { userId } = input;
-      const userSavings = await ctx.payload.find({
-        collection: "savings",
-        depth: 0,
-        where: {
-          "coupon.user": {
-            equals: userId,
-          },
+  getTotalAmountByCurrentUser: userProtectedProcedure.query(async ({ ctx }) => {
+    const userSavings = await ctx.payload.find({
+      collection: "savings",
+      depth: 0,
+      where: {
+        "coupon.user": {
+          equals: ctx.session.id,
         },
-      });
+      },
+    });
 
-      const totalAmount = userSavings.docs.reduce(
-        (total, saving) =>
-          total + (typeof saving.amount === "number" ? saving.amount : 0),
-        0
-      );
+    const totalAmount = userSavings.docs.reduce(
+      (total, saving) =>
+        total + (typeof saving.amount === "number" ? saving.amount : 0),
+      0
+    );
 
-      return {
-        data: Math.round(totalAmount * 100) / 100,
-      };
-    }),
+    return {
+      data: Math.round(totalAmount * 100) / 100,
+    };
+  }),
 });
diff --git a/webapp/src/utils/chakra-theme.ts b/webapp/src/utils/chakra-theme.ts
index 340c0120..34d61bba 100644
--- a/webapp/src/utils/chakra-theme.ts
+++ b/webapp/src/utils/chakra-theme.ts
@@ -243,6 +243,7 @@ export const theme = extendTheme({
     "installation-banner-icon":
       "0px 16px 14px -9px #1698FC70, 0px 1px 40px 6px #A8CEEC",
     icon: "0px 4px 13px 0px rgba(32, 32, 44, 0.20)",
+    "wallet-header": "0px -4px 13px 0px rgba(32, 32, 44, 0.20)",
   },
   radii: {
     "2lg": "0.625rem",