diff --git a/.changeset/quiet-ties-sin.md b/.changeset/quiet-ties-sin.md
new file mode 100644
index 000000000..49d580a72
--- /dev/null
+++ b/.changeset/quiet-ties-sin.md
@@ -0,0 +1,9 @@
+---
+'@o2s/blocks.order-details': minor
+'@o2s/blocks.ticket-list': minor
+'@o2s/ui': minor
+---
+
+- add MoreActionsMenu component and refactor ActionList
+- migrate OrderDetails and TicketList to unified ActionList API
+- improve breadcrumbs visibility and card border styling
diff --git a/packages/blocks/order-details/src/frontend/OrderDetails.client.tsx b/packages/blocks/order-details/src/frontend/OrderDetails.client.tsx
index 90845fd5e..fde8445e0 100644
--- a/packages/blocks/order-details/src/frontend/OrderDetails.client.tsx
+++ b/packages/blocks/order-details/src/frontend/OrderDetails.client.tsx
@@ -38,7 +38,7 @@ import { Typography } from '@o2s/ui/elements/typography';
 import { Model, Request } from '../api-harmonization/order-details.client';
 import { sdk } from '../sdk';
 
-import { OrderDetailsPureProps } from './OrderDetails.types';
+import { Action, OrderDetailsPureProps } from './OrderDetails.types';
 
 const ProgressBar: React.FC<
     Readonly<{
@@ -166,22 +166,27 @@ export const OrderDetailsPure: React.FC<Readonly<OrderDetailsPureProps>> = ({
         });
     };
 
-    const buttons = [
+    const actionsDefinition: Action[] = [
         {
             label: data.payOnlineLabel,
             icon: 'ArrowUpRight',
+            variant: 'destructive',
         },
         {
             label: data.reorderLabel,
             icon: 'IterationCw',
+            variant: data.order.overdue.isOverdue ? 'secondary' : 'default',
+            className: data.order.overdue.isOverdue ? 'flex-1' : '',
         },
         {
             label: data.trackOrderLabel,
             icon: 'Truck',
+            variant: data.order.overdue.isOverdue ? 'ghost' : 'secondary',
+            className: data.order.overdue.isOverdue ? 'w-full justify-start h-8' : 'flex-1',
         },
     ];
 
-    const actions = data.order.overdue.isOverdue ? buttons : buttons.slice(1);
+    const actions = data.order.overdue.isOverdue ? actionsDefinition : actionsDefinition.slice(1);
 
     const t = useTranslations();
 
@@ -206,49 +211,24 @@ export const OrderDetailsPure: React.FC<Readonly<OrderDetailsPureProps>> = ({
                     <div className="flex flex-row justify-end">
                         <div className="flex flex-col gap-4 sm:flex-row sm:items-center w-full sm:w-auto">
                             <ActionList
-                                visibleActions={[
-                                    <TooltipHover
-                                        key={actions[0]?.label}
-                                        trigger={(setIsOpen) => (
-                                            <Button
-                                                variant={data.order.overdue.isOverdue ? 'destructive' : 'default'}
-                                                onClick={() => setIsOpen(true)}
-                                            >
-                                                {actions[0]?.icon && <DynamicIcon name={actions[0].icon} size={16} />}
-                                                {actions[0]?.label}
-                                            </Button>
-                                        )}
-                                        content={<p>{t('general.comingSoon')}</p>}
-                                    />,
-                                    <TooltipHover
-                                        key={actions[1]?.label}
-                                        trigger={(setIsOpen) => (
-                                            <Button variant={'secondary'} onClick={() => setIsOpen(true)}>
-                                                {actions[1]?.icon && <DynamicIcon name={actions[1].icon} size={16} />}
-                                                {actions[1]?.label}
-                                            </Button>
-                                        )}
-                                        content={<p>{t('general.comingSoon')}</p>}
-                                    />,
-                                ]}
-                                dropdownActions={actions.slice(2).map((action) => (
-                                    <TooltipHover
-                                        key={action.label}
-                                        trigger={(setIsOpen) => (
-                                            <Button
-                                                variant="ghost"
-                                                size="sm"
-                                                disabled
-                                                className="w-full justify-start h-8"
-                                                onClick={() => setIsOpen(true)}
-                                            >
-                                                {action.icon && <DynamicIcon name={action.icon} size={16} />}
-                                                {action.label}
-                                            </Button>
-                                        )}
-                                        content={<p>{t('general.comingSoon')}</p>}
-                                    />
-                                ))}
+                                actions={actions
+                                    .filter((action) => action.label)
+                                    .map((action, index) => (
+                                        <TooltipHover
+                                            key={`${action.label}-${index}`}
+                                            trigger={(setIsOpen) => (
+                                                <Button
+                                                    variant={action.variant}
+                                                    onClick={() => setIsOpen(true)}
+                                                    className={action.className}
+                                                >
+                                                    {action.icon && <DynamicIcon name={action.icon} size={16} />}
+                                                    {action.label}
+                                                </Button>
+                                            )}
+                                            content={<p>{t('general.comingSoon')}</p>}
+                                        />
+                                    ))}
                                 showMoreLabel={data.labels.showMore}
                             />
                         </div>
diff --git a/packages/blocks/order-details/src/frontend/OrderDetails.types.ts b/packages/blocks/order-details/src/frontend/OrderDetails.types.ts
index 78b955c88..b23076e6f 100644
--- a/packages/blocks/order-details/src/frontend/OrderDetails.types.ts
+++ b/packages/blocks/order-details/src/frontend/OrderDetails.types.ts
@@ -1,5 +1,8 @@
+import { VariantProps } from 'class-variance-authority';
 import { defineRouting } from 'next-intl/routing';
 
+import { baseVariant } from '@o2s/ui/lib/utils';
+
 import type { Model } from '../api-harmonization/order-details.client';
 
 export interface OrderDetailsProps {
@@ -16,3 +19,8 @@ export type OrderDetailsPureProps = OrderDetailsProps & Model.OrderDetailsBlock;
 export interface OrderDetailsRendererProps extends Omit<OrderDetailsProps, 'orderId'> {
     slug: string[];
 }
+
+export type Action = {
+    variant: VariantProps<typeof baseVariant>['variant'];
+    className?: string;
+} & ({ label: string; icon?: string } | { label?: string; icon: string });
diff --git a/packages/blocks/ticket-list/src/frontend/TicketList.client.tsx b/packages/blocks/ticket-list/src/frontend/TicketList.client.tsx
index 3c63cd812..537b70017 100644
--- a/packages/blocks/ticket-list/src/frontend/TicketList.client.tsx
+++ b/packages/blocks/ticket-list/src/frontend/TicketList.client.tsx
@@ -27,7 +27,7 @@ import { Typography } from '@o2s/ui/elements/typography';
 import { Model, Request } from '../api-harmonization/ticket-list.client';
 import { sdk } from '../sdk';
 
-import { TicketListPureProps } from './TicketList.types';
+import { Action, TicketListPureProps } from './TicketList.types';
 
 export const TicketListPure: React.FC<TicketListPureProps> = ({ locale, accessToken, routing, meta, ...component }) => {
     const { Link: LinkComponent } = createNavigation(routing);
@@ -90,6 +90,24 @@ export const TicketListPure: React.FC<TicketListPureProps> = ({ locale, accessTo
         });
     };
 
+    const variantConfig: Array<{ variant: Action['variant']; className: string }> = [
+        { variant: 'default', className: 'no-underline hover:no-underline' },
+        { variant: 'secondary', className: 'no-underline hover:no-underline flex-1' },
+        {
+            variant: 'ghost',
+            className:
+                'flex items-center gap-2 !no-underline hover:!no-underline cursor-pointer h-8 w-full justify-start',
+        },
+    ];
+
+    const actions: Action[] = (data.forms ?? []).map((form, index) => ({
+        label: form.label,
+        icon: form.icon,
+        url: form.url || '',
+        variant: variantConfig[index]?.variant ?? 'default',
+        className: variantConfig[index]?.className ?? '',
+    }));
+
     // Define columns configuration outside JSX for better readability
     const columns = data.table.columns.map((column) => {
         switch (column.id) {
@@ -125,7 +143,7 @@ export const TicketListPure: React.FC<TicketListPureProps> = ({ locale, accessTo
                 };
         }
     }) as DataListColumnConfig<Model.Ticket>[];
-    const actions = data.table.actions
+    const tableActions = data.table.actions
         ? {
               ...data.table.actions,
               render: (ticket: Model.Ticket) => {
@@ -152,29 +170,21 @@ export const TicketListPure: React.FC<TicketListPureProps> = ({ locale, accessTo
 
                         {data.forms && (
                             <ActionList
-                                visibleActions={data.forms.slice(0, 2).map((form, index) => (
-                                    <Button
-                                        asChild
-                                        variant={index === 0 ? 'default' : 'secondary'}
-                                        key={form.label}
-                                        className="no-underline hover:no-underline"
-                                    >
-                                        <LinkComponent href={form.url}>
-                                            {form.icon && <DynamicIcon name={form.icon} size={16} />}
-                                            {form.label}
-                                        </LinkComponent>
-                                    </Button>
-                                ))}
-                                dropdownActions={data.forms.slice(2).map((form) => (
-                                    <LinkComponent
-                                        href={form.url}
-                                        key={form.label}
-                                        className="flex items-center gap-2 !no-underline hover:!no-underline cursor-pointer"
-                                    >
-                                        {form.icon && <DynamicIcon name={form.icon} size={16} />}
-                                        {form.label}
-                                    </LinkComponent>
-                                ))}
+                                actions={actions
+                                    .filter((action) => action.label)
+                                    .map((action, index) => (
+                                        <Button
+                                            asChild
+                                            variant={action.variant}
+                                            key={`${action.label}-${index}`}
+                                            className={action.className}
+                                        >
+                                            <LinkComponent href={action.url}>
+                                                {action.icon && <DynamicIcon name={action.icon} size={16} />}
+                                                {action.label}
+                                            </LinkComponent>
+                                        </Button>
+                                    ))}
                                 showMoreLabel={data.labels.showMore}
                             />
                         )}
@@ -221,7 +231,7 @@ export const TicketListPure: React.FC<TicketListPureProps> = ({ locale, accessTo
                                     viewMode={viewMode}
                                     data={data.tickets.data}
                                     columns={columns}
-                                    actions={actions}
+                                    actions={tableActions}
                                     cardHeaderSlots={data.cardHeaderSlots}
                                     enableRowSelection={component.enableRowSelection}
                                     selectedRows={selectedRows}
diff --git a/packages/blocks/ticket-list/src/frontend/TicketList.types.ts b/packages/blocks/ticket-list/src/frontend/TicketList.types.ts
index 5a2e9488a..434d7b938 100644
--- a/packages/blocks/ticket-list/src/frontend/TicketList.types.ts
+++ b/packages/blocks/ticket-list/src/frontend/TicketList.types.ts
@@ -1,5 +1,8 @@
+import { VariantProps } from 'class-variance-authority';
 import { defineRouting } from 'next-intl/routing';
 
+import { baseVariant } from '@o2s/ui/lib/utils';
+
 import type { Model } from '../api-harmonization/ticket-list.client';
 
 export interface TicketListProps {
@@ -17,3 +20,9 @@ export type TicketListPureProps = TicketListProps & Model.TicketListBlock;
 export type TicketListRendererProps = Omit<TicketListProps, ''> & {
     slug: string[];
 };
+
+export type Action = {
+    url: string;
+    variant: VariantProps<typeof baseVariant>['variant'];
+    className?: string;
+} & ({ label: string; icon?: string } | { label?: string; icon: string });
diff --git a/packages/ui/src/components/ActionList/ActionList.stories.tsx b/packages/ui/src/components/ActionList/ActionList.stories.tsx
index 897a09ea8..c5cd51367 100644
--- a/packages/ui/src/components/ActionList/ActionList.stories.tsx
+++ b/packages/ui/src/components/ActionList/ActionList.stories.tsx
@@ -1,7 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite';
 
 import { Button } from '@o2s/ui/elements/button';
-import { Link } from '@o2s/ui/elements/link';
 
 import { ActionList } from './ActionList';
 
@@ -19,7 +18,7 @@ export const Default: Story = {
     args: {
         showMoreLabel: 'Show more actions',
         triggerVariant: 'outline',
-        visibleActions: [
+        actions: [
             <Button key="primary" variant="primary">
                 Primary Action
             </Button>,
@@ -33,43 +32,24 @@ export const Default: Story = {
                 Tertiary Action 2
             </Button>,
         ],
-        dropdownActions: [
-            <Link key="primary" variant="primary">
-                Primary Action
-            </Link>,
-            <Link key="secondary" variant="secondary">
-                Secondary Action
-            </Link>,
-            <Link key="tertiary1" variant="outline">
-                Tertiary Action 1
-            </Link>,
-            <Link key="tertiary2" variant="ghost">
-                Tertiary Action 2
-            </Link>,
-        ],
     },
 };
 
 export const SingleAction: Story = {
     args: {
         showMoreLabel: 'Show more actions',
-        visibleActions: [
+        actions: [
             <Button key="primary" variant="primary">
                 Single Action
             </Button>,
         ],
-        dropdownActions: [
-            <Link key="primary" variant="primary">
-                Single Action
-            </Link>,
-        ],
     },
 };
 
 export const TwoActions: Story = {
     args: {
         showMoreLabel: 'Show more actions',
-        visibleActions: [
+        actions: [
             <Button key="primary" variant="primary">
                 Primary Action
             </Button>,
@@ -77,14 +57,6 @@ export const TwoActions: Story = {
                 Secondary Action
             </Button>,
         ],
-        dropdownActions: [
-            <Link key="primary" variant="primary">
-                Primary Action
-            </Link>,
-            <Link key="secondary" variant="secondary">
-                Secondary Action
-            </Link>,
-        ],
     },
 };
 
@@ -92,8 +64,8 @@ export const WithDifferentVariant: Story = {
     args: {
         showMoreLabel: 'Show more actions',
         triggerVariant: 'destructive',
-        visibleActions: [
-            <Button key="primary" variant="primary">
+        actions: [
+            <Button key="primary" variant="destructive">
                 Primary Action
             </Button>,
             <Button key="secondary" variant="secondary">
@@ -106,19 +78,5 @@ export const WithDifferentVariant: Story = {
                 Tertiary Action 2
             </Button>,
         ],
-        dropdownActions: [
-            <Link key="primary" variant="primary">
-                Primary Action
-            </Link>,
-            <Link key="secondary" variant="secondary">
-                Secondary Action
-            </Link>,
-            <Link key="tertiary1" variant="outline">
-                Tertiary Action 1
-            </Link>,
-            <Link key="tertiary2" variant="ghost">
-                Tertiary Action 2
-            </Link>,
-        ],
     },
 };
diff --git a/packages/ui/src/components/ActionList/ActionList.tsx b/packages/ui/src/components/ActionList/ActionList.tsx
index c0772c2b2..ac1cd3001 100644
--- a/packages/ui/src/components/ActionList/ActionList.tsx
+++ b/packages/ui/src/components/ActionList/ActionList.tsx
@@ -2,51 +2,34 @@ import React from 'react';
 
 import { cn } from '@o2s/ui/lib/utils';
 
-import { DynamicIcon } from '@o2s/ui/components/DynamicIcon';
+import { MoreActionsMenu } from '@o2s/ui/components/MoreActionsMenu';
 
-import { Button } from '@o2s/ui/elements/button';
-import {
-    DropdownMenu,
-    DropdownMenuContent,
-    DropdownMenuItem,
-    DropdownMenuTrigger,
-} from '@o2s/ui/elements/dropdown-menu';
-
-import { ActionListProps } from './ActionList.types';
+import type { ActionListProps } from './ActionList.types';
 
 export const ActionList: React.FC<Readonly<ActionListProps>> = ({
     className,
     showMoreLabel,
-    visibleActions,
-    dropdownActions,
+    actions,
     triggerVariant = 'outline',
 }) => {
-    if (!visibleActions.length && !dropdownActions.length) {
-        return null;
-    }
+    if (!actions?.length) return null;
+
+    const dropdownActions = actions.slice(2);
 
     return (
         <div className={cn('w-full sm:w-auto flex flex-col sm:flex-row-reverse gap-4 align-end', className)}>
-            {visibleActions[0]}
+            {actions?.[0]}
 
             <div className="flex flex-row sm:flex-row-reverse gap-4">
-                {visibleActions[1]}
+                {actions?.[1]}
 
                 {dropdownActions.length > 0 && (
-                    <DropdownMenu>
-                        <DropdownMenuTrigger asChild>
-                            <Button variant={triggerVariant} size="icon" aria-label={showMoreLabel}>
-                                <DynamicIcon name="MoreVertical" size={16} />
-                            </Button>
-                        </DropdownMenuTrigger>
-                        <DropdownMenuContent align="end" className="min-w-50">
-                            {dropdownActions.map((action) => (
-                                <DropdownMenuItem asChild key={action?.toString()}>
-                                    {action}
-                                </DropdownMenuItem>
-                            ))}
-                        </DropdownMenuContent>
-                    </DropdownMenu>
+                    <MoreActionsMenu
+                        actions={dropdownActions}
+                        showMoreLabel={showMoreLabel}
+                        triggerVariant={triggerVariant}
+                        triggerIcon="MoreVertical"
+                    />
                 )}
             </div>
         </div>
diff --git a/packages/ui/src/components/ActionList/ActionList.types.ts b/packages/ui/src/components/ActionList/ActionList.types.ts
index 4d617e84d..729472487 100644
--- a/packages/ui/src/components/ActionList/ActionList.types.ts
+++ b/packages/ui/src/components/ActionList/ActionList.types.ts
@@ -3,8 +3,7 @@ import { VariantProps } from 'class-variance-authority';
 import { baseVariant } from '@o2s/ui/lib/utils';
 
 export type ActionListProps = {
-    visibleActions: React.ReactNode[];
-    dropdownActions: React.ReactNode[];
+    actions?: React.ReactNode[];
     showMoreLabel: string;
     className?: string;
     triggerVariant?: VariantProps<typeof baseVariant>['variant'];
diff --git a/packages/ui/src/components/Breadcrumbs/Breadcrumbs.tsx b/packages/ui/src/components/Breadcrumbs/Breadcrumbs.tsx
index a7e6a81a9..c6457e0ee 100644
--- a/packages/ui/src/components/Breadcrumbs/Breadcrumbs.tsx
+++ b/packages/ui/src/components/Breadcrumbs/Breadcrumbs.tsx
@@ -14,7 +14,7 @@ import { Link } from '@o2s/ui/elements/link';
 import { BreadcrumbsProps } from './Breadcrumbs.types';
 
 export const Breadcrumbs: React.FC<BreadcrumbsProps> = ({ breadcrumbs, LinkComponent }) => {
-    if (!breadcrumbs?.length) return null;
+    if (!breadcrumbs?.length || breadcrumbs.length === 1) return null;
 
     return (
         <Breadcrumb>
diff --git a/packages/ui/src/components/Cards/InformativeCard/InformativeCard.tsx b/packages/ui/src/components/Cards/InformativeCard/InformativeCard.tsx
index 39ea23dd6..53c05ee7a 100644
--- a/packages/ui/src/components/Cards/InformativeCard/InformativeCard.tsx
+++ b/packages/ui/src/components/Cards/InformativeCard/InformativeCard.tsx
@@ -62,7 +62,7 @@ export const InformativeCard: React.FC<Readonly<InformativeCardProps>> = (props)
             <LinkComponent
                 href={props.href}
                 aria-label={props.title}
-                className="flex flex-grow text-foreground hover:border-primary rounded-lg bg-card border border-border w-full h-full items-start"
+                className="flex flex-grow text-foreground rounded-lg bg-card border border-card-border hover:border-primary w-full h-full items-start"
             >
                 <InformativeCardContent {...props} />
             </LinkComponent>
diff --git a/packages/ui/src/components/Carousel/Carousel.tsx b/packages/ui/src/components/Carousel/Carousel.tsx
index 835d01d68..803149ce5 100644
--- a/packages/ui/src/components/Carousel/Carousel.tsx
+++ b/packages/ui/src/components/Carousel/Carousel.tsx
@@ -1,6 +1,8 @@
 'use client';
 
-import React from 'react';
+import { ArrowLeftIcon, ArrowRightIcon } from 'lucide-react';
+import React, { useRef, useState } from 'react';
+import { Swiper as SwiperType } from 'swiper';
 import 'swiper/css';
 import 'swiper/css/navigation';
 import 'swiper/css/pagination';
@@ -9,6 +11,8 @@ import { Swiper, SwiperSlide } from 'swiper/react';
 
 import { cn } from '@o2s/ui/lib/utils';
 
+import { Button } from '@o2s/ui/elements/button';
+
 import { CarouselProps } from './Carousel.types';
 
 export const Carousel: React.FC<Readonly<CarouselProps>> = ({
@@ -19,8 +23,18 @@ export const Carousel: React.FC<Readonly<CarouselProps>> = ({
     modules = [],
     startingSlideIndex = 0,
     noSwipingSelector,
+    labels = {
+        previous: 'Previous slide',
+        next: 'Next slide',
+    },
     ...swiperProps
 }) => {
+    const swiperRef = useRef<SwiperType | null>(null);
+
+    const [index, setIndex] = useState(startingSlideIndex);
+    const [isEnd, setIsEnd] = useState(false);
+    const [loop, setLoop] = useState(swiperProps.loop ?? false);
+
     const allModules = [
         A11y,
         Keyboard,
@@ -30,19 +44,71 @@ export const Carousel: React.FC<Readonly<CarouselProps>> = ({
     ];
 
     return (
-        <Swiper
-            className={cn('w-full', className)}
-            modules={allModules}
-            keyboard={{ enabled: true, onlyInViewport: true }}
-            navigation={showNavigation}
-            pagination={showPagination ? { clickable: true } : false}
-            initialSlide={startingSlideIndex}
-            noSwipingSelector={noSwipingSelector}
-            {...swiperProps}
-        >
-            {slides.map((slide, index) => (
-                <SwiperSlide key={index}>{slide}</SwiperSlide>
-            ))}
-        </Swiper>
+        <div className="relative">
+            <Swiper
+                className={cn('w-full', className)}
+                modules={allModules}
+                {...swiperProps}
+                onBeforeInit={(swiper) => {
+                    swiperRef.current = swiper;
+                }}
+                onInit={(swiper) => {
+                    const loopMode = swiperProps.loop ?? swiper.params.loop ?? false;
+                    setLoop(loopMode);
+                    setIndex(swiper.realIndex);
+                    if (!loopMode) {
+                        setIsEnd(swiper.isEnd);
+                    }
+                }}
+                onSlideChange={(swiper) => {
+                    setIndex(swiper.realIndex);
+                    const loopMode = swiperProps.loop ?? swiper.params.loop ?? false;
+                    if (!loopMode) {
+                        setIsEnd(swiper.isEnd);
+                    }
+                }}
+                keyboard={{ enabled: true, onlyInViewport: true }}
+                navigation={false}
+                pagination={showPagination ? { clickable: true } : false}
+                initialSlide={startingSlideIndex}
+                noSwipingSelector={noSwipingSelector}
+            >
+                {slides.map((slide, index) => (
+                    <SwiperSlide key={index} className="!h-auto">
+                        {slide}
+                    </SwiperSlide>
+                ))}
+            </Swiper>
+
+            {showNavigation && (
+                <div className="absolute z-10 left-0 right-0 top-2/4 -translate-y-8 flex items-center justify-between px-2">
+                    <Button
+                        variant="outline"
+                        size="icon"
+                        className="rounded-full"
+                        disabled={index === 0 && !loop}
+                        aria-label={labels.previous}
+                        onClick={() => {
+                            swiperRef.current?.slidePrev();
+                        }}
+                    >
+                        <ArrowLeftIcon />
+                    </Button>
+
+                    <Button
+                        variant="outline"
+                        size="icon"
+                        className="rounded-full"
+                        disabled={isEnd && !loop}
+                        aria-label={labels.next}
+                        onClick={() => {
+                            swiperRef.current?.slideNext();
+                        }}
+                    >
+                        <ArrowRightIcon />
+                    </Button>
+                </div>
+            )}
+        </div>
     );
 };
diff --git a/packages/ui/src/components/Carousel/Carousel.types.ts b/packages/ui/src/components/Carousel/Carousel.types.ts
index b0a73e32a..73541fa35 100644
--- a/packages/ui/src/components/Carousel/Carousel.types.ts
+++ b/packages/ui/src/components/Carousel/Carousel.types.ts
@@ -8,4 +8,8 @@ export interface CarouselProps extends Omit<SwiperProps, 'children'> {
     showPagination?: boolean;
     startingSlideIndex?: number;
     noSwipingSelector?: string;
+    labels?: {
+        previous?: string;
+        next?: string;
+    };
 }
diff --git a/packages/ui/src/components/Chart/ChartTooltip/ChartTooltip.tsx b/packages/ui/src/components/Chart/ChartTooltip/ChartTooltip.tsx
index 9f7e692c7..4e8827b56 100644
--- a/packages/ui/src/components/Chart/ChartTooltip/ChartTooltip.tsx
+++ b/packages/ui/src/components/Chart/ChartTooltip/ChartTooltip.tsx
@@ -16,33 +16,28 @@ export const ChartTooltip: React.FC<ChartTooltipProps> = ({ type = 'number', act
         <div className="rounded-md bg-background p-2 border">
             <div className="flex flex-col gap-2">
                 {payload
-                    .map(
-                        (
-                            item: { name?: string; value?: number | string; color?: string; unit?: string },
-                            index: number,
-                        ) => (
-                            <div key={`${item.name}-${index}`} className="flex flex-row justify-between gap-2">
-                                <div className="flex items-center gap-2">
-                                    <svg width="12" height="12" xmlns="http://www.w3.org/2000/svg">
-                                        <rect x="0" y="0" width="12" height="12" fill={item?.color} rx="4" ry="4" />
-                                    </svg>
-                                    <Typography variant="small">{`${item?.name} :`}</Typography>
-                                </div>
-                                <Typography variant="small" className="text-right">
-                                    {type === 'price' ? (
-                                        <Price
-                                            price={{
-                                                value: Number(item.value),
-                                                currency: item.unit as Models.Price.Currency,
-                                            }}
-                                        />
-                                    ) : (
-                                        item.value
-                                    )}
-                                </Typography>
+                    ?.map((item, index) => (
+                        <div key={`${item.name}-${index}`} className="flex flex-row justify-between gap-2">
+                            <div className="flex items-center gap-2">
+                                <svg width="12" height="12" xmlns="http://www.w3.org/2000/svg">
+                                    <rect x="0" y="0" width="12" height="12" fill={item?.color} rx="4" ry="4" />
+                                </svg>
+                                <Typography variant="small">{`${item?.name} :`}</Typography>
                             </div>
-                        ),
-                    )
+                            <Typography variant="small" className="text-right">
+                                {type === 'price' ? (
+                                    <Price
+                                        price={{
+                                            value: Number(item.value),
+                                            currency: item.unit as Models.Price.Currency,
+                                        }}
+                                    />
+                                ) : (
+                                    item.value
+                                )}
+                            </Typography>
+                        </div>
+                    ))
                     .reverse()}
             </div>
         </div>
diff --git a/packages/ui/src/components/Chart/ChartTooltip/ChartTooltip.types.ts b/packages/ui/src/components/Chart/ChartTooltip/ChartTooltip.types.ts
index fc48198bf..6b3247648 100644
--- a/packages/ui/src/components/Chart/ChartTooltip/ChartTooltip.types.ts
+++ b/packages/ui/src/components/Chart/ChartTooltip/ChartTooltip.types.ts
@@ -9,7 +9,5 @@ export interface ChartTooltipProps extends TooltipProps<ValueType, NameType> {
         value?: number | string;
         color?: string;
         unit?: string;
-        dataKey?: string;
-        payload?: unknown;
     }>;
 }
diff --git a/packages/ui/src/components/MoreActionsMenu/MoreActionsMenu.stories.tsx b/packages/ui/src/components/MoreActionsMenu/MoreActionsMenu.stories.tsx
new file mode 100644
index 000000000..a6b9b3bd1
--- /dev/null
+++ b/packages/ui/src/components/MoreActionsMenu/MoreActionsMenu.stories.tsx
@@ -0,0 +1,80 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+
+import { Link } from '@o2s/ui/elements/link';
+
+import { MoreActionsMenu } from './MoreActionsMenu';
+
+const meta = {
+    title: 'Components/MoreActionsMenu',
+    component: MoreActionsMenu,
+    tags: ['autodocs'],
+} satisfies Meta<typeof MoreActionsMenu>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        showMoreLabel: 'Show more actions',
+        triggerVariant: 'ghost',
+        triggerIcon: 'MoreVertical',
+        actions: [
+            <Link key="primary" variant="primary">
+                Primary Action
+            </Link>,
+            <Link key="secondary" variant="secondary">
+                Secondary Action
+            </Link>,
+        ],
+    },
+};
+
+export const SingleAction: Story = {
+    args: {
+        showMoreLabel: 'Show more actions',
+        triggerVariant: 'outline',
+        actions: [
+            <Link key="primary" variant="primary">
+                Single Action
+            </Link>,
+        ],
+    },
+};
+
+export const TwoActions: Story = {
+    args: {
+        showMoreLabel: 'Show more actions',
+        triggerVariant: 'destructive',
+        actions: [
+            <Link key="primary" variant="primary">
+                Primary Action
+            </Link>,
+            <Link key="secondary" variant="secondary">
+                Secondary Action
+            </Link>,
+        ],
+    },
+};
+
+export const WithDifferentVariant: Story = {
+    args: {
+        showMoreLabel: 'Show more actions',
+        triggerVariant: 'ghost',
+        triggerIcon: 'MoreVertical',
+        actions: [
+            <Link key="primary" variant="primary">
+                Primary Action
+            </Link>,
+            <Link key="secondary" variant="secondary">
+                Secondary Action
+            </Link>,
+            <Link key="tertiary" variant="tertiary">
+                Tertiary Action
+            </Link>,
+            <Link key="ghost" variant="ghost">
+                Ghost Action
+            </Link>,
+        ],
+    },
+};
diff --git a/packages/ui/src/components/MoreActionsMenu/MoreActionsMenu.tsx b/packages/ui/src/components/MoreActionsMenu/MoreActionsMenu.tsx
new file mode 100644
index 000000000..eb36270ce
--- /dev/null
+++ b/packages/ui/src/components/MoreActionsMenu/MoreActionsMenu.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+
+import { DynamicIcon } from '@o2s/ui/components/DynamicIcon';
+
+import { Button } from '@o2s/ui/elements/button';
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+} from '@o2s/ui/elements/dropdown-menu';
+
+import type { MoreActionsMenuProps } from './MoreActionsMenu.types';
+
+export const MoreActionsMenu: React.FC<Readonly<MoreActionsMenuProps>> = ({
+    className,
+    showMoreLabel,
+    actions,
+    triggerVariant = 'ghost',
+    triggerIcon = 'MoreVertical',
+    open,
+    onOpenChange,
+}) => {
+    if (actions.length === 0) return null;
+
+    return (
+        <DropdownMenu open={open} onOpenChange={onOpenChange}>
+            <DropdownMenuTrigger asChild>
+                <Button variant={triggerVariant} size="icon" aria-label={showMoreLabel} className={className}>
+                    <DynamicIcon name={triggerIcon} size={16} />
+                </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="center" className="min-w-50 flex flex-col">
+                {actions.map((action, index) => (
+                    <DropdownMenuItem asChild key={index.toString()}>
+                        {action}
+                    </DropdownMenuItem>
+                ))}
+            </DropdownMenuContent>
+        </DropdownMenu>
+    );
+};
diff --git a/packages/ui/src/components/MoreActionsMenu/MoreActionsMenu.types.ts b/packages/ui/src/components/MoreActionsMenu/MoreActionsMenu.types.ts
new file mode 100644
index 000000000..70ace5eab
--- /dev/null
+++ b/packages/ui/src/components/MoreActionsMenu/MoreActionsMenu.types.ts
@@ -0,0 +1,13 @@
+import { VariantProps } from 'class-variance-authority';
+
+import { baseVariant } from '@o2s/ui/lib/utils';
+
+export type MoreActionsMenuProps = {
+    actions: React.ReactNode[];
+    showMoreLabel: string;
+    className?: string;
+    triggerVariant?: VariantProps<typeof baseVariant>['variant'];
+    triggerIcon?: string;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+};
diff --git a/packages/ui/src/components/MoreActionsMenu/index.ts b/packages/ui/src/components/MoreActionsMenu/index.ts
new file mode 100644
index 000000000..bbe48c63c
--- /dev/null
+++ b/packages/ui/src/components/MoreActionsMenu/index.ts
@@ -0,0 +1,2 @@
+export { MoreActionsMenu } from './MoreActionsMenu';
+export type { MoreActionsMenuProps } from './MoreActionsMenu.types';