diff --git a/backend/src/api/_mobile/event/event.controller.ts b/backend/src/api/_mobile/event/event.controller.ts
index 191cdee84..16708b5ae 100644
--- a/backend/src/api/_mobile/event/event.controller.ts
+++ b/backend/src/api/_mobile/event/event.controller.ts
@@ -28,8 +28,7 @@ import { MobileEventListItemPresenter } from './presenters/mobile-event-list-ite
 import { GetOneEventWithVolunteerStatusUsecase } from 'src/usecases/event/get-one-event-with-volunteer-status.usecase';
 import { MobileEventPresenter } from './presenters/mobile-event.presenter';
 import { GetEventsByOrganizationUsecase } from 'src/usecases/event/get-events-by-organization.usecase';
-import { IdAndNamePresenter } from 'src/infrastructure/presenters/id-name.presenter';
-import { IEventModel } from 'src/modules/event/models/event.model';
+import { MobileEventOptionPresenter } from './presenters/mobile-event-option.presenter';
 
 @ApiBearerAuth()
 @UseGuards(MobileJwtAuthGuard, MobileProfileGuard) // VolunteerGuard
@@ -67,13 +66,13 @@ export class MobileEventController {
   async getEventsByOrganizationId(
     @Param('organizationId', UuidValidationPipe) organizationId: string,
     @ExtractUser() { id }: IRegularUserModel,
-  ): Promise<IdAndNamePresenter<IEventModel>[]> {
+  ): Promise<MobileEventOptionPresenter[]> {
     const events = await this.getEventsByOrganization.execute({
       userId: id,
       organizationId,
     });
 
-    return events.map((event) => new IdAndNamePresenter(event));
+    return events.map((event) => new MobileEventOptionPresenter(event));
   }
 
   @Get(':id')
diff --git a/backend/src/api/_mobile/event/presenters/mobile-event-option.presenter.ts b/backend/src/api/_mobile/event/presenters/mobile-event-option.presenter.ts
new file mode 100644
index 000000000..3dea629a0
--- /dev/null
+++ b/backend/src/api/_mobile/event/presenters/mobile-event-option.presenter.ts
@@ -0,0 +1,20 @@
+import { ApiProperty } from '@nestjs/swagger';
+import { Expose } from 'class-transformer';
+import { IEventModel } from 'src/modules/event/models/event.model';
+import { IdAndNamePresenter } from 'src/infrastructure/presenters/id-name.presenter';
+
+// The event picker of „Adaugă ore”: id and name as before, plus the start date the menu shows
+// on the right of each row („13 NOV”).
+export class MobileEventOptionPresenter extends IdAndNamePresenter<IEventModel> {
+  constructor(event: IEventModel) {
+    super(event);
+    this.startDate = event.startDate;
+  }
+
+  @Expose()
+  @ApiProperty({
+    description: 'When the event starts',
+    example: '2026-11-13T09:00:00.000Z',
+  })
+  startDate: Date;
+}
diff --git a/backend/test/mobile-event-options.e2e-spec.ts b/backend/test/mobile-event-options.e2e-spec.ts
new file mode 100644
index 000000000..eccab642a
--- /dev/null
+++ b/backend/test/mobile-event-options.e2e-spec.ts
@@ -0,0 +1,90 @@
+import {
+  AuthIdentityStatus,
+  AuthRealm,
+} from 'src/modules/auth/enums/auth.enums';
+import { IAuthIdentityModel } from 'src/modules/auth/models/auth-identity.model';
+import { AuthIdentityFacade } from 'src/modules/auth/services/auth-identity.facade';
+import * as request from 'supertest';
+import { createTestApp, TestApp } from './utils/test-app';
+import { truncate } from './utils/test-data-source';
+
+// The event picker of „Adaugă ore” (GET /mobile/event/organization/:id): id and name as before,
+// plus the start date shown on the right of each menu row.
+describe('Mobile event options (e2e)', () => {
+  let testApp: TestApp;
+  let elena: IAuthIdentityModel;
+  let orgId: string;
+
+  const options = async (
+    organizationId: string,
+  ): Promise<{ id: string; name: string; startDate: string }[]> =>
+    (
+      await request(testApp.app.getHttpServer())
+        .get(`/mobile/event/organization/${organizationId}`)
+        .set(
+          'Authorization',
+          `Bearer ${await testApp.mintAccessToken(elena, AuthRealm.MOBILE)}`,
+        )
+        .expect(200)
+    ).body;
+
+  beforeAll(async () => {
+    testApp = await createTestApp();
+  });
+
+  afterAll(async () => {
+    await testApp?.close();
+  });
+
+  beforeEach(async () => {
+    await truncate(testApp.dataSource, [
+      'auth_identity',
+      'event',
+      'volunteer',
+      'user',
+      'organization',
+    ]);
+    const [org] = await testApp.dataSource.query(
+      `INSERT INTO organization (name, email, phone, status, validated_at) VALUES ('Crucea', 'contact@crucea.ro', '+40700000000', 'active', now()) RETURNING id`,
+    );
+    orgId = org.id;
+    const [user] = await testApp.dataSource.query(
+      `INSERT INTO "user" (type, name, email, phone) VALUES ('regular', 'Elena Pop', 'elena@example.ro', '+40722000000') RETURNING id`,
+    );
+    await testApp.dataSource.query(
+      `INSERT INTO volunteer (user_id, organization_id, status) VALUES ($1, $2, 'active')`,
+      [user.id, orgId],
+    );
+    elena = await testApp.app.get(AuthIdentityFacade).createIdentity({
+      realm: AuthRealm.MOBILE,
+      email: 'elena@example.ro',
+      status: AuthIdentityStatus.ACTIVE,
+      userId: user.id,
+    });
+    await testApp.dataSource.query(
+      `INSERT INTO event (name, description, start_date, end_date, status, organization_id) VALUES
+         ('Atelier Comunicare', 'd', '2025-11-13T09:00:00Z', '2025-11-13T12:00:00Z', 'published', $1),
+         ('Viitor', 'd', now() + interval '30 days', now() + interval '31 days', 'published', $1),
+         ('Ciornă', 'd', '2025-11-01T09:00:00Z', NULL, 'draft', $1)`,
+      [orgId],
+    );
+  });
+
+  it('lists the started published events with their start date', async () => {
+    const body = await options(orgId);
+    expect(body).toEqual([
+      {
+        id: expect.any(String),
+        name: 'Atelier Comunicare',
+        startDate: '2025-11-13T09:00:00.000Z',
+      },
+    ]);
+  });
+
+  it('stays empty for an organization the user does not volunteer in', async () => {
+    const [other] = await testApp.dataSource.query(
+      `INSERT INTO organization (name, email, phone, status, validated_at) VALUES ('Alta', 'contact@alta.ro', '+40700000001', 'active', now()) RETURNING id`,
+    );
+    expect(await options(other.id)).toEqual([]);
+  });
+});
diff --git a/mobile/src/common/utils/event-format.test.ts b/mobile/src/common/utils/event-format.test.ts
index 55bee8f4b..e92e77496 100644
--- a/mobile/src/common/utils/event-format.test.ts
+++ b/mobile/src/common/utils/event-format.test.ts
@@ -1,5 +1,5 @@
 import '../config/i18n';
-import { formatPostedAt } from './event-format';
+import { formatDayMonth, formatPostedAt } from './event-format';
 
 describe('formatPostedAt (audit #21, #22)', () => {
   const now = new Date(2026, 10, 10, 18, 0);
@@ -19,3 +19,16 @@ describe('formatPostedAt (audit #21, #22)', () => {
     expect(formatPostedAt('not a date', now)).toBe('');
   });
 });
+
+describe('formatDayMonth (event rows of „Adaugă ore”)', () => {
+  it('gives the day and the short month, shown as „13 NOV” in overline', () => {
+    expect(formatDayMonth(new Date(2026, 10, 13, 9, 0))).toBe('13 nov');
+    expect(formatDayMonth(new Date(2026, 0, 2).toISOString())).toBe('2 ian');
+  });
+
+  it('is empty when an older backend sends no date', () => {
+    expect(formatDayMonth(undefined)).toBe('');
+    expect(formatDayMonth(null)).toBe('');
+    expect(formatDayMonth('not a date')).toBe('');
+  });
+});
diff --git a/mobile/src/common/utils/event-format.ts b/mobile/src/common/utils/event-format.ts
index 69fdebe60..3c8ba7324 100644
--- a/mobile/src/common/utils/event-format.ts
+++ b/mobile/src/common/utils/event-format.ts
@@ -44,6 +44,15 @@ export const formatLongDay = (value: string | Date) =>
 /** "09:00" */
 export const formatTime = (value: string | Date) => format(new Date(value), 'HH:mm');
 
+/** "13 nov" for the right of an event row (shown as „13 NOV” in overline); '' without a date. */
+export const formatDayMonth = (value?: string | Date | null) => {
+  if (!value) {
+    return '';
+  }
+  const date = new Date(value);
+  return Number.isNaN(date.getTime()) ? '' : `${format(date, 'd')} ${shortMonth(date)}`;
+};
+
 /** Day number and short month for the date tile: { day: '22', month: 'NOV' }. */
 export const dateTile = (value: string | Date) => ({
   day: format(new Date(value), 'd'),
diff --git a/mobile/src/components/FormSelect.tsx b/mobile/src/components/FormSelect.tsx
index 40f22df3f..dc02abff3 100644
--- a/mobile/src/components/FormSelect.tsx
+++ b/mobile/src/components/FormSelect.tsx
@@ -13,6 +13,8 @@ import { colors } from '../common/theme/tokens';
 import { PressableScale, Sheet, VText, VTextField } from './ui';
 import { INLINE_MAX, Select } from '../design/components/Select';
 import { EventIcon } from './events/EventIcons';
+import { AppText } from '../design/components/Text';
+import { palette } from '../design/tokens';
 
 // Longer lists (counties, cities) open in a tall sheet with a search field.
 const LONG_LIST = 12;
@@ -28,6 +30,8 @@ const normalize = (text: string) =>
 export interface ISelectItem {
   label: string;
   key: string | number;
+  /** short text on the right of the row, e.g. an event's date („13 NOV”) */
+  detail?: string;
 }
 
 export interface FormSelectProps {
@@ -79,6 +83,11 @@ const Option = ({
     <VText variant={active ? 'bodyStrong' : 'body'} style={styles.text}>
       {option.label}
     </VText>
+    {!!option.detail && (
+      <AppText variant="overline" color={palette.ink2}>
+        {option.detail}
+      </AppText>
+    )}
     {active && <Check />}
   </PressableScale>
 );
diff --git a/mobile/src/components/hours/AddHoursSheet.tsx b/mobile/src/components/hours/AddHoursSheet.tsx
index 3b47c1491..c1966a6ca 100644
--- a/mobile/src/components/hours/AddHoursSheet.tsx
+++ b/mobile/src/components/hours/AddHoursSheet.tsx
@@ -30,7 +30,7 @@ import ActivityLogForm, { ActivityLogFormTypes, activityLogSchema } from '../Act
 import { fontScaleCap, palette } from '../../design/tokens';
 import { duration } from '../../design/motion';
 import { haptics } from '../../design/haptics';
-import { CloseIcon, ICON_STROKE } from '../../design/icons';
+import { ArrowRightIcon, CloseIcon, ICON_STROKE } from '../../design/icons';
 import { Button } from '../../design/components/Button';
 import { Sheet } from '../../design/components/Sheet';
 import { tight, useEffectiveFontScale } from '../../design/components/Text';
@@ -54,7 +54,7 @@ const defaultValues = (): Partial<ActivityLogFormTypes> => ({ date: new Date(),
 
 /**
  * „Adaugă ore” as a 92% form sheet (prototype `.sheet`): Eveniment (optional), Activitate, Data with
- * Azi / Ieri, the hours stepper, Mențiuni, and the sticky yellow „Trimite spre aprobare →”. On
+ * Azi / Ieri, the hours stepper, Mențiuni, and the sticky yellow „Trimite spre aprobare” with its arrow. On
  * success the sheet shows „Trimis spre aprobare”, then closes and hands the new entry to Ore.
  * Changed fields ask before the sheet is closed.
  */
@@ -205,8 +205,8 @@ export const AddHoursSheet = forwardRef<AddHoursSheetHandle, AddHoursSheetProps>
     const footer = (
       <Animated.View style={footerStyle} pointerEvents={sent ? 'none' : 'auto'}>
         <Button
-          label={`${t('submit')} →`}
-          accessibilityLabel={`${t('submit')}`}
+          label={`${t('submit')}`}
+          trailingIcon={ArrowRightIcon}
           onPress={handleSubmit(onSubmit)}
           loading={isLoggingHours}
           disabled={isLoggingHours || !!sent}
diff --git a/mobile/src/components/hours/HoursSummary.tsx b/mobile/src/components/hours/HoursSummary.tsx
index 3b24e6025..a9edc27de 100644
--- a/mobile/src/components/hours/HoursSummary.tsx
+++ b/mobile/src/components/hours/HoursSummary.tsx
@@ -57,6 +57,8 @@ export const HoursSummary = ({
           pending={pending || 0}
           rejected={rejected || 0}
           size={120}
+          // Ore: navy / white pending stripes (Acasă's navy card uses yellow on #012A40)
+          tone="onLight"
           testID="impact-hexagon"
         />
       </View>
diff --git a/mobile/src/containers/EventSelect.tsx b/mobile/src/containers/EventSelect.tsx
index 8b642a233..41494d2b6 100644
--- a/mobile/src/containers/EventSelect.tsx
+++ b/mobile/src/containers/EventSelect.tsx
@@ -2,6 +2,7 @@
 import React, { useEffect, useState } from 'react';
 import FormSelect, { FormSelectProps, ISelectItem } from '../components/FormSelect';
 import { getEventsByOrganizationId } from '../services/event/event.api';
+import { formatDayMonth } from '../common/utils/event-format';
 
 interface EventSelectProps extends Omit<FormSelectProps, 'options'> {
   organizationId: string;
@@ -19,9 +20,11 @@ const EventSelect = ({ organizationId, noneLabel, ...props }: EventSelectProps)
   const loadEvents = async () => {
     try {
       const rawEvents = await getEventsByOrganizationId(organizationId);
-      const mappedStructures = rawEvents.map((structure) => ({
-        label: structure.name,
-        key: structure.id,
+      const mappedStructures = rawEvents.map((event) => ({
+        label: event.name,
+        key: event.id,
+        // „13 NOV” on the right of the row, like the prototype's menu
+        detail: formatDayMonth(event.startDate) || undefined,
       }));
       setStructures(mappedStructures);
     } catch {
diff --git a/mobile/src/design/components/Button.tsx b/mobile/src/design/components/Button.tsx
index 3db3a4b3a..83fef9ea4 100644
--- a/mobile/src/design/components/Button.tsx
+++ b/mobile/src/design/components/Button.tsx
@@ -1,8 +1,10 @@
 // Button „Îndrăzneț”. Variants: primary (yellow, one per screen), secondary (navy), outline,
 // destructive. Sizes L 56 / M 44 / S 34, radius 20 / 16 / 14. Pressed: scale .96 with the snappy
 // spring, a darker fill and a tighter shadow. Loading: a small rotating hexagon replaces the label
-// and the button keeps its width. Disabled: 45% opacity.
-import React, { ReactNode, useEffect } from 'react';
+// and the button keeps its width. Disabled: 45% opacity. Icons: a lucide icon before the label
+// (`icon`, e.g. Plus on „Adaugă ore”) and/or after it (`trailingIcon`, e.g. ArrowRight on
+// „Trimite spre aprobare”), drawn in the label colour at 20 / 18 / 16pt (L / M / S).
+import React, { ComponentType, isValidElement, ReactNode, useEffect } from 'react';
 import { Insets, Pressable, StyleProp, View, ViewStyle } from 'react-native';
 import Animated, {
   cancelAnimation,
@@ -23,13 +25,24 @@ import { AppText } from './Text';
 export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'destructive';
 export type ButtonSize = 'L' | 'M' | 'S';
 
+/** A lucide icon component (from design/icons), drawn by the button in its size and colour. */
+export type ButtonIconComponent = ComponentType<{
+  size?: number;
+  color?: string;
+  strokeWidth?: number;
+}>;
+/** A lucide icon component, or an element the caller draws itself. */
+export type ButtonIcon = ButtonIconComponent | ReactNode;
+
 export interface ButtonProps {
   label: string;
   onPress?: () => void;
   variant?: ButtonVariant;
   size?: ButtonSize;
-  /** element before the label, e.g. a lucide icon */
-  icon?: ReactNode;
+  /** before the label, e.g. `PlusIcon` (or an element drawn by the caller) */
+  icon?: ButtonIcon;
+  /** after the label, e.g. `ArrowRightIcon` (or an element drawn by the caller) */
+  trailingIcon?: ButtonIcon;
   loading?: boolean;
   disabled?: boolean;
   /** stretch to the width of the parent */
@@ -64,6 +77,27 @@ const SIZES: Record<ButtonSize, { height: number; radius: number; padding: numbe
     S: { height: 34, radius: 14, padding: 12, font: 13 },
   };
 
+/** Icon size per button size: 20pt like the prototype's `.btn svg`, smaller on M and S. */
+export const BUTTON_ICON_SIZE: Record<ButtonSize, number> = { L: 20, M: 18, S: 16 };
+// the prototype's arrow and chevrons are drawn at stroke 2.4
+const ICON_STROKE = 2.4;
+
+const isIconComponent = (icon: ButtonIcon): icon is ButtonIconComponent =>
+  typeof icon === 'function' ||
+  (typeof icon === 'object' && icon !== null && !isValidElement(icon) && '$$typeof' in icon);
+
+/** A lucide component in the button's size and label colour; an element as the caller drew it. */
+const renderIcon = (icon: ButtonIcon | undefined, size: number, color: string): ReactNode => {
+  if (icon === undefined || icon === null || icon === false) {
+    return null;
+  }
+  if (isIconComponent(icon)) {
+    const Icon = icon;
+    return <Icon size={size} color={color} strokeWidth={ICON_STROKE} />;
+  }
+  return icon as ReactNode;
+};
+
 const PRESSED_SCALE = 0.96;
 const SPIN_MS = 900;
 
@@ -91,6 +125,7 @@ export const Button = ({
   variant = 'primary',
   size = 'L',
   icon,
+  trailingIcon,
   loading = false,
   disabled = false,
   full = false,
@@ -185,7 +220,7 @@ export const Button = ({
           accessibilityElementsHidden={loading}
           importantForAccessibility={loading ? 'no-hide-descendants' : 'auto'}
         >
-          {icon}
+          {renderIcon(icon, BUTTON_ICON_SIZE[size], look.fg)}
           <AppText
             variant="button"
             color={look.fg}
@@ -194,6 +229,7 @@ export const Button = ({
           >
             {label}
           </AppText>
+          {renderIcon(trailingIcon, BUTTON_ICON_SIZE[size], look.fg)}
         </View>
         {loading && (
           <View style={styles.spinner} pointerEvents="none">
diff --git a/mobile/src/design/components/ImpactHexagon.test.tsx b/mobile/src/design/components/ImpactHexagon.test.tsx
index 5430b8f8e..e53531a63 100644
--- a/mobile/src/design/components/ImpactHexagon.test.tsx
+++ b/mobile/src/design/components/ImpactHexagon.test.tsx
@@ -1,5 +1,14 @@
 import { act, renderHook } from '@testing-library/react-native';
-import { impactHexagonLabel, liquidY, useCountUp } from './ImpactHexagon';
+import {
+  HEXAGON_TONES,
+  impactHexagonLabel,
+  liquidY,
+  STRIPE_BAR,
+  STRIPE_PITCH,
+  stripes,
+  useCountUp,
+} from './ImpactHexagon';
+import { palette } from '../tokens';
 
 // size 108 on Acasă: H = 119, R = 52, corners at y 7.5 and 111.5, headroom 21
 const TOP = 7.5;
@@ -66,3 +75,37 @@ describe('useCountUp', () => {
     expect(hook.result.current).toBe(42);
   });
 });
+
+describe('ImpactHexagon pending stripes', () => {
+  it('Ore (onLight) draws navy stripes on white, like the prototype Ore card', () => {
+    expect(HEXAGON_TONES.onLight.stripe).toBe('#01344F');
+    expect(HEXAGON_TONES.onLight.stripeBg).toBe('#FFFFFF');
+    expect(HEXAGON_TONES.onLight.empty).toBe('#EAE5D8');
+    expect(HEXAGON_TONES.onLight.outline).toBe(palette.navy);
+  });
+
+  it('Acasă (onNavy) keeps yellow stripes on #012A40 over a #001A29 hexagon', () => {
+    expect(HEXAGON_TONES.onNavy.stripe).toBe('#FFD209');
+    expect(HEXAGON_TONES.onNavy.stripeBg).toBe('#012A40');
+    expect(HEXAGON_TONES.onNavy.empty).toBe('#001A29');
+  });
+
+  it('uses the yellow liquid on both tones', () => {
+    expect(HEXAGON_TONES.onLight.liquid).toBe(palette.yellow);
+    expect(HEXAGON_TONES.onNavy.liquid).toBe(palette.yellow);
+  });
+
+  it('draws 4pt bars every 8pt across, as „/” stripes covering the whole band', () => {
+    expect(STRIPE_PITCH).toBeCloseTo(8 * Math.SQRT2);
+    expect(STRIPE_BAR).toBeCloseTo(STRIPE_PITCH / 2);
+    const d = stripes(100, 50);
+    const bars = d.split('M').filter(Boolean);
+    // enough bars to cover x from -height to width
+    expect(bars.length).toBe(Math.ceil(150 / STRIPE_PITCH));
+    // first bar: top edge 0 → bar at y 0, bottom edge shifted left by the height („/”)
+    const nums = bars[0].match(/-?\d+(\.\d+)?/g)!.map(Number);
+    expect(nums.slice(0, 2)).toEqual([0, 0]);
+    expect(nums[4]).toBeCloseTo(STRIPE_BAR - 50, 1);
+    expect(nums[5]).toBe(50);
+  });
+});
diff --git a/mobile/src/design/components/ImpactHexagon.tsx b/mobile/src/design/components/ImpactHexagon.tsx
index c516dfbfb..3051eb3bb 100644
--- a/mobile/src/design/components/ImpactHexagon.tsx
+++ b/mobile/src/design/components/ImpactHexagon.tsx
@@ -40,8 +40,31 @@ const SLOW_AMP = 4;
 // both waves are back where they started after this long, so the clock can wrap without a jump
 const CLOCK_WRAP = 46800;
 const COUNT_MS = 900;
-// the dark half of the „în așteptare” stripes on the navy card (prototype pattern #012A40)
-const STRIPE_BG_ON_NAVY = '#012A40';
+
+/**
+ * Colours per tone, from the prototype's makeHex(): on the navy Acasă card the pending stripes are
+ * yellow on #012A40 over a #001A29 hexagon; on Ore (paper / white) they are navy on white over a
+ * #EAE5D8 hexagon with a navy outline. The approved liquid is yellow on both.
+ */
+export const HEXAGON_TONES: Record<
+  ImpactHexagonTone,
+  { empty: string; stripeBg: string; stripe: string; liquid: string; outline: string }
+> = {
+  onNavy: {
+    empty: palette.navy3,
+    stripeBg: palette.navy2,
+    stripe: palette.yellow,
+    liquid: palette.yellow,
+    outline: 'rgba(255,210,9,0.55)',
+  },
+  onLight: {
+    empty: '#EAE5D8',
+    stripeBg: palette.white,
+    stripe: palette.navy,
+    liquid: palette.yellow,
+    outline: palette.navy,
+  },
+};
 
 /** Romanian count: „1 oră”, „5 ore”, „42 de ore” (20+ and round hundreds take „de”). */
 const roHours = (n: number) => {
@@ -99,18 +122,21 @@ const waveLine = (width: number, period: number, amp: number) => {
 const waveFill = (width: number, height: number, period: number, amp: number) =>
   `${waveLine(width, period, amp)}L${width} ${height}L0 ${height}Z`;
 
+/** Stripe geometry of the prototype's pattern: 8pt tile with a 4pt bar, rotated 45°. */
+export const STRIPE_PITCH = 8 * Math.SQRT2;
+export const STRIPE_BAR = 4 * Math.SQRT2;
+
 /**
- * The prototype's stripe pattern (8pt tile with a 4pt bar, rotated 45°): bars 4pt wide every 8pt
- * measured across the stripes, so 4√2 wide every 8√2 along a horizontal line.
+ * The prototype's stripe pattern: bars 4pt wide every 8pt measured across the stripes, so 4√2
+ * wide every 8√2 along a horizontal line. `rotate(45)` turns the tile's vertical bars into „/”
+ * stripes (going down to the left), the same direction as the legend's StripedSquare.
  */
-const stripes = (width: number, height: number) => {
-  const pitch = 8 * Math.SQRT2;
-  const bar = 4 * Math.SQRT2;
+export const stripes = (width: number, height: number) => {
   let d = '';
-  for (let x = -height; x < width; x += pitch) {
-    d += `M${x.toFixed(2)} 0L${(x + bar).toFixed(2)} 0L${(x + bar + height).toFixed(2)} ${height}L${(
-      x + height
-    ).toFixed(2)} ${height}Z`;
+  for (let x = 0; x < width + height; x += STRIPE_PITCH) {
+    d += `M${x.toFixed(2)} 0L${(x + STRIPE_BAR).toFixed(2)} 0L${(x + STRIPE_BAR - height).toFixed(
+      2,
+    )} ${height}L${(x - height).toFixed(2)} ${height}Z`;
   }
   return d;
 };
@@ -168,7 +194,7 @@ export const ImpactHexagon = ({
 }: ImpactHexagonProps) => {
   const reduced = useReducedMotion();
   const focused = useScreenFocused();
-  const onNavy = tone === 'onNavy';
+  const colors = HEXAGON_TONES[tone];
 
   const W = size;
   const H = Math.round(size * 1.1);
@@ -245,33 +271,22 @@ export const ImpactHexagon = ({
       style={{ width: W, height: H }}
     >
       <Canvas style={{ width: W, height: H }} pointerEvents="none">
-        <Path path={paths.hex} color={onNavy ? palette.navy3 : '#EAE5D8'} />
+        <Path path={paths.hex} color={colors.empty} />
         <Group clip={paths.hex}>
           {/* no band without pending hours: its crest would show in the troughs of the liquid */}
           {pendingShare > 0 && (
             <Group transform={pendingTransform}>
               <Group clip={paths.pending}>
-                <Rect
-                  x={0}
-                  y={0}
-                  width={bandWidth}
-                  height={H * 2}
-                  color={onNavy ? STRIPE_BG_ON_NAVY : palette.white}
-                />
-                <Path path={paths.stripes} color={onNavy ? palette.yellow : palette.navy} />
+                <Rect x={0} y={0} width={bandWidth} height={H * 2} color={colors.stripeBg} />
+                <Path path={paths.stripes} color={colors.stripe} />
               </Group>
             </Group>
           )}
           <Group transform={approvedTransform}>
-            <Path path={paths.approved} color={palette.yellow} />
+            <Path path={paths.approved} color={colors.liquid} />
           </Group>
         </Group>
-        <Path
-          path={paths.hex}
-          color={onNavy ? 'rgba(255,210,9,0.55)' : palette.navy}
-          style="stroke"
-          strokeWidth={3}
-        />
+        <Path path={paths.hex} color={colors.outline} style="stroke" strokeWidth={3} />
       </Canvas>
     </View>
   );
diff --git a/mobile/src/design/components/Select.tsx b/mobile/src/design/components/Select.tsx
index 7776c12d5..7d3b629a0 100644
--- a/mobile/src/design/components/Select.tsx
+++ b/mobile/src/design/components/Select.tsx
@@ -30,6 +30,8 @@ export type SelectKey = string | number;
 export interface SelectOption<K extends SelectKey = SelectKey> {
   key: K;
   label: string;
+  /** short text on the right of the menu row (prototype `.menu button .over`, e.g. „13 NOV”) */
+  detail?: string;
 }
 
 export interface SelectProps<K extends SelectKey = SelectKey> {
@@ -186,6 +188,9 @@ export function Select<K extends SelectKey>({
                   }
                   onPress={() => pick(option.key)}
                   accessibilityRole="button"
+                  accessibilityLabel={
+                    option.detail ? `${option.label}, ${option.detail}` : undefined
+                  }
                   accessibilityState={{ selected: active }}
                   style={({ pressed }) => [
                     styles.row,
@@ -199,7 +204,21 @@ export function Select<K extends SelectKey>({
                   >
                     {option.label}
                   </AppText>
-                  {active && <CheckIcon size={18} color={palette.navy} strokeWidth={2.6} />}
+                  {(!!option.detail || active) && (
+                    <View style={styles.rowEnd}>
+                      {!!option.detail && (
+                        <AppText
+                          variant="overline"
+                          color={palette.ink2}
+
+                          testID={testID ? `${testID}-option-${option.key}-detail` : undefined}
+                        >
+                          {option.detail}
+                        </AppText>
+                      )}
+                      {active && <CheckIcon size={18} color={palette.navy} strokeWidth={2.6} />}
+                    </View>
+                  )}
                 </Pressable>
               );
             })}
@@ -240,4 +259,5 @@ const styles = StyleSheet.create((theme) => ({
     lineHeight: 20,
   },
   rowActive: { fontFamily: theme.fontFamily.textHeavy },
+  rowEnd: { flexDirection: 'row', alignItems: 'center', gap: theme.space.xs },
 }));
diff --git a/mobile/src/design/components/groupA.test.tsx b/mobile/src/design/components/groupA.test.tsx
index 060fe91b8..ec8384421 100644
--- a/mobile/src/design/components/groupA.test.tsx
+++ b/mobile/src/design/components/groupA.test.tsx
@@ -1,8 +1,17 @@
 import React from 'react';
 import { fireEvent, render, screen } from '@testing-library/react-native';
 import * as Haptics from 'expo-haptics';
-import { Button, StatusChip, statusKind, Stepper, TextField } from './groupA';
+import { Text, View } from 'react-native';
+import { Button, Select, StatusChip, statusKind, Stepper, TextField } from './groupA';
 import { palette, status } from '../tokens';
+import { ArrowRightIcon } from '../icons';
+
+/** A stand-in lucide icon that shows the props the button draws it with. */
+const probeIcon =
+  (name: string) =>
+  ({ size, color, strokeWidth }: { size?: number; color?: string; strokeWidth?: number }) => (
+    <Text testID={name}>{`${size}|${color}|${strokeWidth}`}</Text>
+  );
 
 describe('Button', () => {
   it('keeps the label for screen readers while loading, hides it visually and does not fire', async () => {
@@ -45,6 +54,67 @@ describe('Button', () => {
     expect(screen.getByText('Șterge')).toHaveStyle({ color: palette.red });
     expect(screen.getByText('Secundar')).toHaveStyle({ color: palette.white });
   });
+
+  it('draws a trailing icon after the label in the label colour and the size of the button', async () => {
+    await render(
+      <>
+        <Button label="Trimite" trailingIcon={probeIcon('arrow-l')} testID="l" />
+        <Button label="Mic" size="S" variant="secondary" trailingIcon={probeIcon('arrow-s')} />
+      </>,
+    );
+    expect(screen.getByTestId('arrow-l').props.children).toBe(`20|${palette.navy}|2.4`);
+    expect(screen.getByTestId('arrow-s').props.children).toBe(`16|${palette.white}|2.4`);
+    // label first, then the arrow
+    const tree = JSON.stringify(screen.toJSON());
+    expect(tree.indexOf(`20|${palette.navy}`)).toBeGreaterThan(tree.indexOf('Trimite'));
+    // the spoken name stays the label
+    expect(screen.getByRole('button', { name: 'Trimite' })).toBeTruthy();
+  });
+
+  it('draws a leading icon component the same way, and keeps a caller-drawn element as is', async () => {
+    await render(
+      <>
+        <Button label="Adaugă" size="M" icon={probeIcon('plus')} />
+        <Button label="Altul" icon={<View testID="own" />} />
+      </>,
+    );
+    expect(screen.getByTestId('plus').props.children).toBe(`18|${palette.navy}|2.4`);
+    expect(screen.getByTestId('own')).toBeTruthy();
+  });
+
+  it('accepts a real lucide icon and hides it with the label while loading', async () => {
+    await render(<Button label="Trimite" trailingIcon={ArrowRightIcon} loading testID="send" />);
+    expect(screen.getByTestId('button-spinner')).toBeTruthy();
+    expect(screen.queryByText('Trimite')).toBeNull();
+    expect(screen.getByText('Trimite', { includeHiddenElements: true })).toBeTruthy();
+  });
+});
+
+describe('Select option detail', () => {
+  it('shows the detail on the right of a menu row and reads it with the label', async () => {
+    const onChange = jest.fn();
+    await render(
+      <Select
+        label="Eveniment"
+        options={[
+          { key: 'e1', label: 'Atelier Comunicare', detail: '13 nov' },
+          { key: 'e2', label: 'Fără eveniment' },
+        ]}
+        onChange={onChange}
+        testID="ev"
+      />,
+    );
+    await fireEvent.press(screen.getByTestId('ev'));
+    expect(screen.getByTestId('ev-option-e1-detail').props.children).toBe('13 nov');
+    expect(screen.getByTestId('ev-option-e1').props.accessibilityLabel).toBe(
+      'Atelier Comunicare, 13 nov',
+    );
+    // a row without a detail keeps its plain label
+    expect(screen.queryByTestId('ev-option-e2-detail')).toBeNull();
+    expect(screen.getByTestId('ev-option-e2').props.accessibilityLabel).toBeUndefined();
+    await fireEvent.press(screen.getByTestId('ev-option-e1'));
+    expect(onChange).toHaveBeenCalledWith('e1');
+  });
 });
 
 describe('StatusChip', () => {
diff --git a/mobile/src/screens/ActivityLogs.tsx b/mobile/src/screens/ActivityLogs.tsx
index 1175559c1..23fb18d52 100644
--- a/mobile/src/screens/ActivityLogs.tsx
+++ b/mobile/src/screens/ActivityLogs.tsx
@@ -259,7 +259,8 @@ const ActivityLogs = ({ navigation, route }: any) => {
         {!asTab && canAdd && (
           <Button
             size="S"
-            label={`+ ${t('add_short')}`}
+            label={`${t('add_short')}`}
+            icon={PlusIcon}
             accessibilityLabel={`${t('add')}`}
             onPress={onAdd}
             hitSlop={5}
diff --git a/mobile/src/screens/Onboarding.tsx b/mobile/src/screens/Onboarding.tsx
index 676ba68f4..57596a7f9 100644
--- a/mobile/src/screens/Onboarding.tsx
+++ b/mobile/src/screens/Onboarding.tsx
@@ -241,7 +241,7 @@ const Onboarding = ({ navigation }: any) => {
           <Button
             full
             label={t('next')}
-            icon={<ArrowRightIcon size={20} color={palette.navy} strokeWidth={2.4} />}
+            trailingIcon={ArrowRightIcon}
             onPress={() => goTo(index + 1)}
             testID="onboarding-next"
           />
diff --git a/mobile/src/screens/hours.test.tsx b/mobile/src/screens/hours.test.tsx
index 38e593d8b..2cc895917 100644
--- a/mobile/src/screens/hours.test.tsx
+++ b/mobile/src/screens/hours.test.tsx
@@ -217,7 +217,9 @@ describe('Ore', () => {
     expect(titleRow.getByTestId('hours-back')).toBeTruthy();
     expect(titleRow.getByRole('header', { name: i18n.t('activity_logs:title') })).toBeTruthy();
     expect(titleRow.getByTestId('hours-add')).toBeTruthy();
-    expect(titleRow.getByText('+ Adaugă')).toBeTruthy();
+    // „Adaugă” with a lucide Plus before it, not a typed „+”
+    expect(titleRow.getByText('Adaugă')).toBeTruthy();
+    expect(titleRow.queryByText(/\+/)).toBeNull();
     expect(titleRow.getByTestId('hours-add').props.accessibilityLabel).toBe('Adaugă ore');
   });
 
@@ -421,7 +423,9 @@ describe('Ore', () => {
     expect(screen.getByTestId('hours-submit').props.accessibilityLabel).toBe(
       'Trimite spre aprobare',
     );
-    expect(screen.getByText('Trimite spre aprobare →')).toBeTruthy();
+    // the arrow is a lucide icon after the label, not a typed „→”
+    expect(screen.getByText('Trimite spre aprobare')).toBeTruthy();
+    expect(screen.queryByText(/→/)).toBeNull();
   });
 
   it('asks before closing changed hours and keeps them when staying', async () => {
diff --git a/mobile/src/services/event/event.api.ts b/mobile/src/services/event/event.api.ts
index 2d502ea14..bcb9994e2 100644
--- a/mobile/src/services/event/event.api.ts
+++ b/mobile/src/services/event/event.api.ts
@@ -35,9 +35,14 @@ export const getEvents = async ({
   }).then((res) => res.data);
 };
 
+/** An event of the „Adaugă ore” picker; older backends send no `startDate`. */
+export interface IEventOption extends IOrganizationStructureItem {
+  startDate?: string | null;
+}
+
 export const getEventsByOrganizationId = async (
   organizationId: string,
-): Promise<IOrganizationStructureItem[]> => {
+): Promise<IEventOption[]> => {
   return API.get(`/mobile/event/organization/${organizationId}`).then((res) => res.data);
 };