diff --git a/src/app/common/constants/frontend-routes.constants.ts b/src/app/common/constants/frontend-routes.constants.ts
index b4656bd..8fd1099 100644
--- a/src/app/common/constants/frontend-routes.constants.ts
+++ b/src/app/common/constants/frontend-routes.constants.ts
@@ -11,6 +11,7 @@ const FRONTEND_ROUTES = {
         TEAM: '/admin-panel/team',
         ANALYTICS: '/admin-panel/analytics',
         NEWS: '/admin-panel/news',
+        CHRONOLOGY: '/admin-panel/chronology',
     },
     OTHER_PAGES: {
         CATALOG: '/catalog',
diff --git a/src/app/router/Routes.tsx b/src/app/router/Routes.tsx
index 709868d..9feb1c1 100644
--- a/src/app/router/Routes.tsx
+++ b/src/app/router/Routes.tsx
@@ -9,6 +9,7 @@ import PartnersPage from '@/features/AdditionalPages/PartnersPage/Partners.compo
 import AdminPage from '@/features/AdminPage/AdminPage.component';
 import Partners from '@/features/AdminPage/PartnersPage/Partners.component';
 import TeamPage from '@/features/AdminPage/TeamPage/TeamPage.component';
+import ChronologyPage from '@/features/AdminPage/ChronologyPage/ChronologyPage.component';
 import StreetcodeCatalog from '@/features/StreetcodeCatalogPage/StreetcodeCatalog.component';
 import NewsPage from '@/features/AdditionalPages/NewsPage/News.component';
 import ContactUs from '@/features/AdditionalPages/ContactUsPage/ContanctUs.component';
@@ -41,6 +42,10 @@ const router = createBrowserRouter(createRoutesFromElements(
                     <TeamPage />
             )}
         />
+        <Route
+            path={FRONTEND_ROUTES.ADMIN.CHRONOLOGY}
+            element={<ChronologyPage />}
+        />
         <Route path="*" element={<NotFound />} />
         <Route path={FRONTEND_ROUTES.OTHER_PAGES.PARTNERS} element={<PartnersPage />} />
         <Route path={FRONTEND_ROUTES.OTHER_PAGES.CONTACT_US} element={<ContactUs />} />
diff --git a/src/app/stores/timeline-store.ts b/src/app/stores/timeline-store.ts
index f7defb0..5b933e7 100644
--- a/src/app/stores/timeline-store.ts
+++ b/src/app/stores/timeline-store.ts
@@ -109,6 +109,13 @@ export default class TimelineStore {
         } catch (error: unknown) { /* empty */ }
     };
 
+    public fetchAllTimelineItems = async () => {
+        try {
+            const timelineItems = await timelineApi.getAll();
+            this.setInternalMap(timelineItems);
+        } catch (error: unknown) { /* empty */ }
+    };
+
     public createTimelineItem = async (timelineItem: TimelineItem) => {
         try {
             await timelineApi.create(timelineItem);
diff --git a/src/features/AdminPage/AdminBar.component.tsx b/src/features/AdminPage/AdminBar.component.tsx
index 6c90552..4bbfc70 100644
--- a/src/features/AdminPage/AdminBar.component.tsx
+++ b/src/features/AdminPage/AdminBar.component.tsx
@@ -7,6 +7,7 @@ const AdminBar = () => (
         <Link className="Link" to={FRONTEND_ROUTES.ADMIN.FOR_FANS}>Для фанів</Link>
         <Link className="Link" to={FRONTEND_ROUTES.ADMIN.PARTNERS}>Партнери</Link>
         <Link className="Link" to={FRONTEND_ROUTES.ADMIN.TEAM}>Команда</Link>
+        <Link className="Link" to={FRONTEND_ROUTES.ADMIN.CHRONOLOGY}>Хронологія</Link>
     </div>   
 );
 
diff --git a/src/features/AdminPage/ChronologyPage/ChronologyModal/ChronologyModal.component.tsx b/src/features/AdminPage/ChronologyPage/ChronologyModal/ChronologyModal.component.tsx
new file mode 100644
index 0000000..a38657a
--- /dev/null
+++ b/src/features/AdminPage/ChronologyPage/ChronologyModal/ChronologyModal.component.tsx
@@ -0,0 +1,365 @@
+import './ChronologyModal.styles.scss';
+import '@features/AdminPage/AdminModal.styles.scss';
+
+import CancelBtn from '@images/utils/Cancel_btn.svg';
+
+import { observer } from 'mobx-react-lite';
+import React, { useEffect, useState } from 'react';
+import TimelineItem, {
+    DateViewPattern,
+    HistoricalContext,
+    selectDateOptionsforTimeline,
+} from '@models/timeline/chronology.model';
+import useMobx from '@stores/root-store';
+
+import {
+    Button,
+    DatePicker,
+    Form,
+    Input,
+    Modal,
+    Select,
+} from 'antd';
+import TextArea from 'antd/es/input/TextArea';
+import dayjs, { Dayjs } from 'dayjs';
+import 'dayjs/locale/uk';
+
+dayjs.locale('uk');
+
+const { Option } = Select;
+
+const ChronologyModal: React.FC<{
+    timelineItem?: TimelineItem;
+    open: boolean;
+    setIsModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    afterSubmit?: () => void;
+}> = observer(({ timelineItem, open, setIsModalOpen, afterSubmit }) => {
+    const [form] = Form.useForm();
+    const { timelineItemStore, historicalContextStore } = useMobx();
+    const [dateType, setDateType] = useState<'date' | 'month' | 'year' | 'season-year'>('date');
+    const [selectedDate, setSelectedDate] = useState<Dayjs | null>(null);
+    const [contexts, setContexts] = useState<HistoricalContext[]>([]);
+    const [selectedContexts, setSelectedContexts] = useState<number[]>([]);
+    const [titleCount, setTitleCount] = useState(0);
+    const [descriptionCount, setDescriptionCount] = useState(0);
+    const [contextInputValue, setContextInputValue] = useState('');
+    const [contextError, setContextError] = useState('');
+
+    const maxTitleLength = 28;
+    const maxDescriptionLength = 400;
+    const maxContextLength = 50;
+
+    useEffect(() => {
+        historicalContextStore.fetchHistoricalContextAll().then(() => {
+            setContexts(historicalContextStore.historicalContextArray);
+        });
+    }, []);
+
+    useEffect(() => {
+        if (timelineItem && open) {
+            const date = dayjs(timelineItem.date);
+            setSelectedDate(date);
+            
+            let type: 'date' | 'month' | 'year' | 'season-year' = 'date';
+            switch (timelineItem.dateViewPattern) {
+                case DateViewPattern.Year:
+                    type = 'year';
+                    break;
+                case DateViewPattern.MonthYear:
+                    type = 'month';
+                    break;
+                case DateViewPattern.SeasonYear:
+                    type = 'season-year';
+                    break;
+                default:
+                    type = 'date';
+            }
+            setDateType(type);
+
+            form.setFieldsValue({
+                title: timelineItem.title,
+                description: timelineItem.description,
+                dateType: type,
+                historicalContexts: timelineItem.historicalContexts?.map((c) => c.id) || [],
+            });
+            
+            setTitleCount(timelineItem.title?.length || 0);
+            setDescriptionCount(timelineItem.description?.length || 0);
+            setSelectedContexts(timelineItem.historicalContexts?.map((c) => c.id) || []);
+        } else if (open) {
+            form.resetFields();
+            setSelectedDate(null);
+            setDateType('date');
+            setSelectedContexts([]);
+            setTitleCount(0);
+            setDescriptionCount(0);
+            setContextInputValue('');
+            setContextError('');
+        }
+    }, [timelineItem, open, form]);
+
+    const handleCancel = () => {
+        form.resetFields();
+        setIsModalOpen(false);
+        setSelectedDate(null);
+        setSelectedContexts([]);
+        setTitleCount(0);
+        setDescriptionCount(0);
+        setContextInputValue('');
+        setContextError('');
+    };
+
+    const getDateViewPattern = (type: string): DateViewPattern => {
+        switch (type) {
+            case 'year':
+                return DateViewPattern.Year;
+            case 'month':
+                return DateViewPattern.MonthYear;
+            case 'season-year':
+                return DateViewPattern.SeasonYear;
+            default:
+                return DateViewPattern.DateMonthYear;
+        }
+    };
+
+    const handleSubmit = async () => {
+        try {
+            const values = await form.validateFields();
+            
+            if (!selectedDate) {
+                form.setFields([{ name: 'date', errors: ['Дата обов\'язкова'] }]);
+                return;
+            }
+
+            const selectedContextObjects = contexts.filter((c) => 
+                selectedContexts.includes(c.id)
+            );
+
+            const timelineData: TimelineItem = {
+                id: timelineItem?.id || 0,
+                date: selectedDate.toDate(),
+                dateViewPattern: getDateViewPattern(dateType),
+                title: values.title.trim(),
+                description: values.description?.trim() || '',
+                historicalContexts: selectedContextObjects,
+            };
+
+            if (timelineItem) {
+                await timelineItemStore.updateTimelineItem(timelineData);
+            } else {
+                await timelineItemStore.createTimelineItem(timelineData);
+            }
+
+            if (afterSubmit) {
+                afterSubmit();
+            }
+            handleCancel();
+        } catch (error) {
+            console.error('Form validation failed:', error);
+        }
+    };
+
+    const handleDateTypeChange = (value: 'date' | 'month' | 'year' | 'season-year') => {
+        setDateType(value);
+        setSelectedDate(null);
+        form.setFieldsValue({ date: null });
+    };
+
+    const getDatePicker = () => {
+        const commonProps = {
+            value: selectedDate,
+            onChange: (date: Dayjs | null) => {
+                setSelectedDate(date);
+                form.setFieldsValue({ date });
+            },
+            format: dateType === 'year' ? 'YYYY' : dateType === 'month' ? 'YYYY, MMMM' : 'YYYY, D MMMM',
+            placeholder: 'Оберіть дату',
+            style: { width: '100%' },
+        };
+
+        if (dateType === 'year') {
+            return <DatePicker {...commonProps} picker="year" />;
+        }
+        if (dateType === 'month') {
+            return <DatePicker {...commonProps} picker="month" />;
+        }
+        if (dateType === 'season-year') {
+            return <DatePicker {...commonProps} picker="month" />;
+        }
+        return <DatePicker {...commonProps} />;
+    };
+
+    const validateContextInput = (value: string): boolean => {
+        if (value.length > maxContextLength) {
+            setContextError(`Контекст не може бути довшим за ${maxContextLength} символів`);
+            return false;
+        }
+        if (/[0-9]/.test(value)) {
+            setContextError('Контекст не може містити цифри');
+            return false;
+        }
+        if (/[^a-zA-Zа-яА-ЯіІїЇєЄґҐ\s\-']/.test(value)) {
+            setContextError('Контекст не може містити спеціальні символи');
+            return false;
+        }
+        if (contexts.some((c) => c.title.toLowerCase() === value.toLowerCase())) {
+            setContextError('Такий контекст вже існує');
+            return false;
+        }
+        setContextError('');
+        return true;
+    };
+
+    const handleContextSearch = (value: string) => {
+        setContextInputValue(value);
+        if (value) {
+            validateContextInput(value);
+        } else {
+            setContextError('');
+        }
+    };
+
+    const handleContextSelect = (value: number | string) => {
+        if (typeof value === 'string') {
+            // New context input
+            if (validateContextInput(value)) {
+                const newId = Math.min(...contexts.map((c) => c.id), 0) - 1;
+                const newContext: HistoricalContext = { id: newId, title: value.trim() };
+                setContexts([...contexts, newContext]);
+                setSelectedContexts([...selectedContexts, newId]);
+                setContextInputValue('');
+                setContextError('');
+                form.setFieldsValue({ historicalContexts: [...selectedContexts, newId] });
+            }
+        } else {
+            setSelectedContexts([...selectedContexts, value]);
+        }
+    };
+
+    const handleContextDeselect = (value: number) => {
+        setSelectedContexts(selectedContexts.filter((id) => id !== value));
+    };
+
+    return (
+        <Modal
+            className="chronology-modal-container"
+            open={open}
+            onCancel={handleCancel}
+            footer={null}
+            maskClosable
+            centered
+            closeIcon={<CancelBtn />}
+        >
+            <div className="chronology-modal-content">
+                <h2>{timelineItem ? 'Редагувати подію' : 'Додати нову подію'}</h2>
+                <Form form={form} layout="vertical" onFinish={handleSubmit}>
+                    <Form.Item
+                        label={<span>Назва <span className="required-star">*</span></span>}
+                        name="title"
+                        rules={[
+                            { required: true, message: 'Назва обов\'язкова' },
+                            { max: maxTitleLength, message: `Максимум ${maxTitleLength} символів` },
+                            { whitespace: true, message: 'Назва не може бути порожньою' },
+                        ]}
+                    >
+                        <Input
+                            maxLength={maxTitleLength}
+                            placeholder="Введіть назву"
+                            onChange={(e) => setTitleCount(e.target.value.length)}
+                        />
+                    </Form.Item>
+                    <div className="character-counter">{titleCount} / {maxTitleLength}</div>
+
+                    <Form.Item
+                        label="Дата"
+                        required
+                    >
+                        <Select
+                            value={dateType}
+                            onChange={handleDateTypeChange}
+                            style={{ marginBottom: 8 }}
+                        >
+                            {selectDateOptionsforTimeline.map((option) => (
+                                <Option key={option.value} value={option.value}>
+                                    {option.label}
+                                </Option>
+                            ))}
+                        </Select>
+                        <Form.Item
+                            name="date"
+                            rules={[{ required: true, message: 'Дата обов\'язкова' }]}
+                            noStyle
+                        >
+                            {getDatePicker()}
+                        </Form.Item>
+                    </Form.Item>
+
+                    <Form.Item
+                        label="Контекст"
+                        name="historicalContexts"
+                    >
+                        <Select
+                            mode="multiple"
+                            placeholder="Оберіть або введіть контекст"
+                            value={selectedContexts}
+                            onSelect={handleContextSelect}
+                            onDeselect={handleContextDeselect}
+                            onSearch={handleContextSearch}
+                            searchValue={contextInputValue}
+                            filterOption={(input, option) => {
+                                const label = option?.label || option?.children;
+                                if (typeof label === 'string') {
+                                    return label.toLowerCase().includes(input.toLowerCase());
+                                }
+                                return false;
+                            }}
+                            notFoundContent={
+                                contextInputValue && !contextError ? (
+                                    <div style={{ padding: '8px', cursor: 'pointer' }}>
+                                        Натисніть Enter щоб додати "{contextInputValue}"
+                                    </div>
+                                ) : null
+                            }
+                        >
+                            {contexts.map((context) => (
+                                <Option key={context.id} value={context.id}>
+                                    {context.title}
+                                </Option>
+                            ))}
+                        </Select>
+                    </Form.Item>
+                    {contextError && <div className="error-message">{contextError}</div>}
+
+                    <Form.Item
+                        label={<span>Опис <span className="required-star">*</span></span>}
+                        name="description"
+                        rules={[
+                            { required: true, message: 'Опис обов\'язковий' },
+                            { max: maxDescriptionLength, message: `Максимум ${maxDescriptionLength} символів` },
+                            { whitespace: true, message: 'Опис не може бути порожнім' },
+                        ]}
+                    >
+                        <TextArea
+                            rows={4}
+                            maxLength={maxDescriptionLength}
+                            placeholder="Введіть опис"
+                            onChange={(e) => setDescriptionCount(e.target.value.length)}
+                        />
+                    </Form.Item>
+                    <div className="character-counter">{descriptionCount} / {maxDescriptionLength}</div>
+
+                    <div className="modal-buttons">
+                        <Button onClick={handleCancel}>
+                            Скасувати
+                        </Button>
+                        <Button type="primary" htmlType="submit">
+                            {timelineItem ? 'Зберегти' : 'Додати'}
+                        </Button>
+                    </div>
+                </Form>
+            </div>
+        </Modal>
+    );
+});
+
+export default ChronologyModal;
diff --git a/src/features/AdminPage/ChronologyPage/ChronologyModal/ChronologyModal.styles.scss b/src/features/AdminPage/ChronologyPage/ChronologyModal/ChronologyModal.styles.scss
new file mode 100644
index 0000000..ddef49f
--- /dev/null
+++ b/src/features/AdminPage/ChronologyPage/ChronologyModal/ChronologyModal.styles.scss
@@ -0,0 +1,56 @@
+.chronology-modal-container {
+    .chronology-modal-content {
+        padding: 24px;
+
+        h2 {
+            font-size: 20px;
+            font-weight: 600;
+            margin-bottom: 24px;
+            color: #262626;
+        }
+
+        .required-star {
+            color: #ff4d4f;
+            margin-left: 4px;
+        }
+
+        .character-counter {
+            text-align: right;
+            font-size: 12px;
+            color: #8c8c8c;
+            margin-top: -12px;
+            margin-bottom: 12px;
+        }
+
+        .error-message {
+            color: #ff4d4f;
+            font-size: 14px;
+            margin-top: -12px;
+            margin-bottom: 12px;
+        }
+
+        .ant-form-item {
+            margin-bottom: 16px;
+        }
+
+        .ant-form-item-label {
+            label {
+                font-weight: 500;
+                color: #262626;
+            }
+        }
+
+        .modal-buttons {
+            display: flex;
+            justify-content: flex-end;
+            gap: 12px;
+            margin-top: 24px;
+
+            button {
+                height: 40px;
+                min-width: 100px;
+                font-weight: 500;
+            }
+        }
+    }
+}
diff --git a/src/features/AdminPage/ChronologyPage/ChronologyPage.component.tsx b/src/features/AdminPage/ChronologyPage/ChronologyPage.component.tsx
new file mode 100644
index 0000000..c6090a6
--- /dev/null
+++ b/src/features/AdminPage/ChronologyPage/ChronologyPage.component.tsx
@@ -0,0 +1,178 @@
+import './ChronologyPage.styles.scss';
+
+import { observer } from 'mobx-react-lite';
+import { useEffect, useState } from 'react';
+import { DeleteOutlined, EditOutlined, PlusOutlined } from '@ant-design/icons';
+import { Button, Table } from 'antd';
+import { ColumnsType } from 'antd/es/table';
+import dayjs from 'dayjs';
+
+import useMobx, { useModalContext } from '../../../app/stores/root-store';
+import TimelineItem, { DateViewPattern, dateToString, HistoricalContext } from '../../../models/timeline/chronology.model';
+
+import ChronologyModal from '@/features/AdminPage/ChronologyPage/ChronologyModal/ChronologyModal.component';
+import AdminBar from '../AdminBar.component';
+
+const ChronologyPage = () => {
+    const { timelineItemStore, historicalContextStore } = useMobx();
+    const { modalStore } = useModalContext();
+    const [modalAddOpened, setModalAddOpened] = useState<boolean>(false);
+    const [modalEditOpened, setModalEditOpened] = useState<boolean>(false);
+    const [chronologyToEdit, setChronologyToEdit] = useState<TimelineItem>();
+
+    const fetchTimelines = async () => {
+        try {
+            await timelineItemStore.fetchAllTimelineItems();
+        } catch (error) {
+            console.error('Error fetching timelines:', error);
+        }
+    };
+
+    useEffect(() => {
+        fetchTimelines();
+    }, []);
+
+    const getDateFormatted = (item: TimelineItem) => {
+        const date = dayjs(item.date);
+        let type: 'date' | 'month' | 'year' | 'season-year' = 'date';
+        
+        switch (item.dateViewPattern) {
+            case DateViewPattern.Year:
+                type = 'year';
+                break;
+            case DateViewPattern.MonthYear:
+                type = 'month';
+                break;
+            case DateViewPattern.SeasonYear:
+                type = 'season-year';
+                break;
+            default:
+                type = 'date';
+        }
+        
+        return dateToString(type, date);
+    };
+
+    const columns: ColumnsType<TimelineItem> = [
+        {
+            title: 'Дата',
+            dataIndex: 'date',
+            key: 'date',
+            width: '20%',
+            render: (value, record) => (
+                <div key={`${record.id}-date`}>
+                    {getDateFormatted(record)}
+                </div>
+            ),
+        },
+        {
+            title: 'Назва',
+            dataIndex: 'title',
+            key: 'title',
+            width: '25%',
+            render: (value, record) => (
+                <div key={`${record.id}-title`} className="chronology-table-item-title">
+                    <p>{value}</p>
+                </div>
+            ),
+        },
+        {
+            title: 'Опис',
+            dataIndex: 'description',
+            key: 'description',
+            width: '35%',
+            render: (value, record) => (
+                <div key={`${record.id}-description`} className="chronology-table-item-description">
+                    <p>{value || '-'}</p>
+                </div>
+            ),
+        },
+        {
+            title: 'Контекст',
+            dataIndex: 'historicalContexts',
+            key: 'historicalContexts',
+            width: '15%',
+            render: (contexts, record) => (
+                <div key={`${record.id}-contexts`}>
+                    {contexts?.map((ctx: HistoricalContext) => ctx.title).join(', ') || '-'}
+                </div>
+            ),
+        },
+        {
+            title: 'Дії',
+            dataIndex: 'action',
+            key: 'action',
+            width: '5%',
+            render: (value, timeline, index) => (
+                <div key={`${timeline.id}${index}`} className="chronology-page-actions">
+                    <EditOutlined
+                        key={`edit-${timeline.id}`}
+                        className="actionButton"
+                        onClick={() => {
+                            setChronologyToEdit(timeline);
+                            setModalEditOpened(true);
+                        }}
+                    />
+                    <DeleteOutlined
+                        key={`delete-${timeline.id}`}
+                        className="actionButton"
+                        onClick={() => {
+                            modalStore.setConfirmationModal(
+                                'confirmation',
+                                () => {
+                                    timelineItemStore.deleteTimelineItem(timeline.id)
+                                        .then(() => {
+                                            fetchTimelines();
+                                        })
+                                        .catch((e: Error) => {
+                                            console.error('Delete error:', e);
+                                        });
+                                    modalStore.setConfirmationModal('confirmation');
+                                },
+                                'Ви впевнені, що хочете видалити цю подію?',
+                            );
+                        }}
+                    />
+                </div>
+            ),
+        },
+    ];
+
+    return (
+        <div className="chronology-page-container">
+            <AdminBar />
+            <div className="chronology-page-content">
+                <div className="chronology-page-header">
+                    <h1>Хронологія</h1>
+                    <Button
+                        className="streetcode-custom-button add-button"
+                        onClick={() => setModalAddOpened(true)}
+                        icon={<PlusOutlined />}
+                    >
+                        Додати подію
+                    </Button>
+                </div>
+                <Table
+                    pagination={{ pageSize: 10 }}
+                    className="chronology-table"
+                    columns={columns}
+                    dataSource={Array.from(timelineItemStore.timelineItemMap.values())}
+                    rowKey="id"
+                />
+            </div>
+            <ChronologyModal
+                open={modalAddOpened}
+                setIsModalOpen={setModalAddOpened}
+                afterSubmit={() => fetchTimelines()}
+            />
+            <ChronologyModal
+                timelineItem={chronologyToEdit}
+                open={modalEditOpened}
+                setIsModalOpen={setModalEditOpened}
+                afterSubmit={() => fetchTimelines()}
+            />
+        </div>
+    );
+};
+
+export default observer(ChronologyPage);
diff --git a/src/features/AdminPage/ChronologyPage/ChronologyPage.styles.scss b/src/features/AdminPage/ChronologyPage/ChronologyPage.styles.scss
new file mode 100644
index 0000000..1a0627f
--- /dev/null
+++ b/src/features/AdminPage/ChronologyPage/ChronologyPage.styles.scss
@@ -0,0 +1,68 @@
+.chronology-page-container {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    min-height: 100vh;
+    background-color: #f5f5f5;
+
+    .chronology-page-content {
+        padding: 24px;
+        padding-top: 100px;
+        margin: 0 auto;
+        max-width: 1400px;
+        width: 100%;
+
+        .chronology-page-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 24px;
+
+            h1 {
+                font-size: 24px;
+                font-weight: 600;
+                margin: 0;
+            }
+
+            .add-button {
+                height: 40px;
+                padding: 0 20px;
+            }
+        }
+
+        .chronology-table {
+            background: white;
+            border-radius: 8px;
+            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+
+            .chronology-table-item-title,
+            .chronology-table-item-description {
+                p {
+                    margin: 0;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    display: -webkit-box;
+                    -webkit-line-clamp: 2;
+                    line-clamp: 2;
+                    -webkit-box-orient: vertical;
+                }
+            }
+
+            .chronology-page-actions {
+                display: flex;
+                gap: 12px;
+
+                .actionButton {
+                    cursor: pointer;
+                    font-size: 18px;
+                    color: #1890ff;
+                    transition: color 0.3s;
+
+                    &:hover {
+                        color: #40a9ff;
+                    }
+                }
+            }
+        }
+    }
+}