diff --git a/backend/src/db/api/archival_items.js b/backend/src/db/api/archival_items.js
index 7ba88a5..37e147b 100644
--- a/backend/src/db/api/archival_items.js
+++ b/backend/src/db/api/archival_items.js
@@ -26,6 +26,10 @@ module.exports = class Archival_itemsDBApi {
       { transaction },
     );
 
+    await archival_items.setPeriod(data.period || null, {
+      transaction,
+    });
+
     await archival_items.setTags(data.tags || [], {
       transaction,
     });
@@ -108,6 +112,14 @@ module.exports = class Archival_itemsDBApi {
 
     await archival_items.update(updatePayload, { transaction });
 
+    if (data.period !== undefined) {
+      await archival_items.setPeriod(
+        data.period,
+
+        { transaction },
+      );
+    }
+
     if (data.tags !== undefined) {
       await archival_items.setTags(data.tags, { transaction });
     }
@@ -194,6 +206,10 @@ module.exports = class Archival_itemsDBApi {
       transaction,
     });
 
+    output.period = await archival_items.getPeriod({
+      transaction,
+    });
+
     return output;
   }
 
@@ -210,6 +226,32 @@ module.exports = class Archival_itemsDBApi {
     const transaction = (options && options.transaction) || undefined;
 
     let include = [
+      {
+        model: db.periods,
+        as: 'period',
+
+        where: filter.period
+          ? {
+              [Op.or]: [
+                {
+                  id: {
+                    [Op.in]: filter.period
+                      .split('|')
+                      .map((term) => Utils.uuid(term)),
+                  },
+                },
+                {
+                  id: {
+                    [Op.or]: filter.period
+                      .split('|')
+                      .map((term) => ({ [Op.iLike]: `%${term}%` })),
+                  },
+                },
+              ],
+            }
+          : {},
+      },
+
       {
         model: db.tags,
         as: 'tags',
diff --git a/backend/src/db/api/periods.js b/backend/src/db/api/periods.js
index 4b45d53..77678d2 100644
--- a/backend/src/db/api/periods.js
+++ b/backend/src/db/api/periods.js
@@ -25,10 +25,6 @@ module.exports = class PeriodsDBApi {
       { transaction },
     );
 
-    await periods.setArchival_items(data.archival_items || [], {
-      transaction,
-    });
-
     return periods;
   }
 
@@ -76,10 +72,6 @@ module.exports = class PeriodsDBApi {
 
     await periods.update(updatePayload, { transaction });
 
-    if (data.archival_items !== undefined) {
-      await periods.setArchival_items(data.archival_items, { transaction });
-    }
-
     return periods;
   }
 
@@ -141,7 +133,7 @@ module.exports = class PeriodsDBApi {
 
     const output = periods.get({ plain: true });
 
-    output.archival_items = await periods.getArchival_items({
+    output.archival_items_period = await periods.getArchival_items_period({
       transaction,
     });
 
@@ -160,13 +152,7 @@ module.exports = class PeriodsDBApi {
 
     const transaction = (options && options.transaction) || undefined;
 
-    let include = [
-      {
-        model: db.archival_items,
-        as: 'archival_items',
-        required: false,
-      },
-    ];
+    let include = [];
 
     if (filter) {
       if (filter.id) {
@@ -238,38 +224,6 @@ module.exports = class PeriodsDBApi {
         };
       }
 
-      if (filter.archival_items) {
-        const searchTerms = filter.archival_items.split('|');
-
-        include = [
-          {
-            model: db.archival_items,
-            as: 'archival_items_filter',
-            required: searchTerms.length > 0,
-            where:
-              searchTerms.length > 0
-                ? {
-                    [Op.or]: [
-                      {
-                        id: {
-                          [Op.in]: searchTerms.map((term) => Utils.uuid(term)),
-                        },
-                      },
-                      {
-                        id: {
-                          [Op.or]: searchTerms.map((term) => ({
-                            [Op.iLike]: `%${term}%`,
-                          })),
-                        },
-                      },
-                    ],
-                  }
-                : undefined,
-          },
-          ...include,
-        ];
-      }
-
       if (filter.createdAtRange) {
         const [start, end] = filter.createdAtRange;
 
diff --git a/backend/src/db/migrations/1760709105145.js b/backend/src/db/migrations/1760709105145.js
new file mode 100644
index 0000000..1e5388a
--- /dev/null
+++ b/backend/src/db/migrations/1760709105145.js
@@ -0,0 +1,54 @@
+module.exports = {
+  /**
+   * @param {QueryInterface} queryInterface
+   * @param {Sequelize} Sequelize
+   * @returns {Promise<void>}
+   */
+  async up(queryInterface, Sequelize) {
+    /**
+     * @type {Transaction}
+     */
+    const transaction = await queryInterface.sequelize.transaction();
+    try {
+      await queryInterface.addColumn(
+        'archival_items',
+        'periodId',
+        {
+          type: Sequelize.DataTypes.UUID,
+
+          references: {
+            model: 'periods',
+            key: 'id',
+          },
+        },
+        { transaction },
+      );
+
+      await transaction.commit();
+    } catch (err) {
+      await transaction.rollback();
+      throw err;
+    }
+  },
+  /**
+   * @param {QueryInterface} queryInterface
+   * @param {Sequelize} Sequelize
+   * @returns {Promise<void>}
+   */
+  async down(queryInterface, Sequelize) {
+    /**
+     * @type {Transaction}
+     */
+    const transaction = await queryInterface.sequelize.transaction();
+    try {
+      await queryInterface.removeColumn('archival_items', 'periodId', {
+        transaction,
+      });
+
+      await transaction.commit();
+    } catch (err) {
+      await transaction.rollback();
+      throw err;
+    }
+  },
+};
diff --git a/backend/src/db/models/archival_items.js b/backend/src/db/models/archival_items.js
index 86aa2d2..1cb8066 100644
--- a/backend/src/db/models/archival_items.js
+++ b/backend/src/db/models/archival_items.js
@@ -65,6 +65,14 @@ module.exports = function (sequelize, DataTypes) {
 
     //end loop
 
+    db.archival_items.belongsTo(db.periods, {
+      as: 'period',
+      foreignKey: {
+        name: 'periodId',
+      },
+      constraints: false,
+    });
+
     db.archival_items.hasMany(db.file, {
       as: 'media',
       foreignKey: 'belongsToId',
diff --git a/backend/src/db/models/periods.js b/backend/src/db/models/periods.js
index 2bb0a98..fd4e735 100644
--- a/backend/src/db/models/periods.js
+++ b/backend/src/db/models/periods.js
@@ -40,26 +40,16 @@ module.exports = function (sequelize, DataTypes) {
   );
 
   periods.associate = (db) => {
-    db.periods.belongsToMany(db.archival_items, {
-      as: 'archival_items',
-      foreignKey: {
-        name: 'periods_archival_itemsId',
-      },
-      constraints: false,
-      through: 'periodsArchival_itemsArchival_items',
-    });
-
-    db.periods.belongsToMany(db.archival_items, {
-      as: 'archival_items_filter',
-      foreignKey: {
-        name: 'periods_archival_itemsId',
-      },
-      constraints: false,
-      through: 'periodsArchival_itemsArchival_items',
-    });
-
     /// loop through entities and it's fields, and if ref === current e[name] and create relation has many on parent entity
 
+    db.periods.hasMany(db.archival_items, {
+      as: 'archival_items_period',
+      foreignKey: {
+        name: 'periodId',
+      },
+      constraints: false,
+    });
+
     //end loop
 
     db.periods.belongsTo(db.users, {
diff --git a/frontend/src/components/Archival_items/CardArchival_items.tsx b/frontend/src/components/Archival_items/CardArchival_items.tsx
index 1fadef3..5771817 100644
--- a/frontend/src/components/Archival_items/CardArchival_items.tsx
+++ b/frontend/src/components/Archival_items/CardArchival_items.tsx
@@ -137,6 +137,17 @@ const CardArchival_items = ({
                     </div>
                   </dd>
                 </div>
+
+                <div className='flex justify-between gap-x-4 py-3'>
+                  <dt className='  text-gray-500  dark:text-dark-600'>
+                    Period
+                  </dt>
+                  <dd className='flex items-start gap-x-2'>
+                    <div className='font-medium line-clamp-4'>
+                      {dataFormatter.periodsOneListFormatter(item.period)}
+                    </div>
+                  </dd>
+                </div>
               </dl>
             </li>
           ))}
diff --git a/frontend/src/components/Archival_items/ListArchival_items.tsx b/frontend/src/components/Archival_items/ListArchival_items.tsx
index 42fff3e..d669adb 100644
--- a/frontend/src/components/Archival_items/ListArchival_items.tsx
+++ b/frontend/src/components/Archival_items/ListArchival_items.tsx
@@ -97,6 +97,13 @@ const ListArchival_items = ({
                           .join(', ')}
                       </p>
                     </div>
+
+                    <div className={'flex-1 px-3'}>
+                      <p className={'text-xs   text-gray-500 '}>Period</p>
+                      <p className={'line-clamp-2'}>
+                        {dataFormatter.periodsOneListFormatter(item.period)}
+                      </p>
+                    </div>
                   </Link>
                   <ListActionsPopover
                     onDelete={onDelete}
diff --git a/frontend/src/components/Archival_items/configureArchival_itemsCols.tsx b/frontend/src/components/Archival_items/configureArchival_itemsCols.tsx
index dc93b6b..d7e9679 100644
--- a/frontend/src/components/Archival_items/configureArchival_itemsCols.tsx
+++ b/frontend/src/components/Archival_items/configureArchival_itemsCols.tsx
@@ -115,6 +115,26 @@ export const loadColumns = async (
       ),
     },
 
+    {
+      field: 'period',
+      headerName: 'Period',
+      flex: 1,
+      minWidth: 120,
+      filterable: false,
+      headerClassName: 'datagrid--header',
+      cellClassName: 'datagrid--cell',
+
+      editable: hasUpdatePermission,
+
+      sortable: false,
+      type: 'singleSelect',
+      getOptionValue: (value: any) => value?.id,
+      getOptionLabel: (value: any) => value?.label,
+      valueOptions: await callOptionsApi('periods'),
+      valueGetter: (params: GridValueGetterParams) =>
+        params?.value?.id ?? params?.value,
+    },
+
     {
       field: 'actions',
       type: 'actions',
diff --git a/frontend/src/components/Periods/CardPeriods.tsx b/frontend/src/components/Periods/CardPeriods.tsx
index 09aa4be..bcc5f94 100644
--- a/frontend/src/components/Periods/CardPeriods.tsx
+++ b/frontend/src/components/Periods/CardPeriods.tsx
@@ -83,19 +83,6 @@ const CardPeriods = ({
                   </dd>
                 </div>
 
-                <div className='flex justify-between gap-x-4 py-3'>
-                  <dt className='  text-gray-500  dark:text-dark-600'>
-                    Archival Items
-                  </dt>
-                  <dd className='flex items-start gap-x-2'>
-                    <div className='font-medium line-clamp-4'>
-                      {dataFormatter
-                        .archival_itemsManyListFormatter(item.archival_items)
-                        .join(', ')}
-                    </div>
-                  </dd>
-                </div>
-
                 <div className='flex justify-between gap-x-4 py-3'>
                   <dt className='  text-gray-500  dark:text-dark-600'>
                     Period From
diff --git a/frontend/src/components/Periods/ListPeriods.tsx b/frontend/src/components/Periods/ListPeriods.tsx
index 85bc7d7..d78882a 100644
--- a/frontend/src/components/Periods/ListPeriods.tsx
+++ b/frontend/src/components/Periods/ListPeriods.tsx
@@ -56,17 +56,6 @@ const ListPeriods = ({
                       <p className={'line-clamp-2'}>{item.name}</p>
                     </div>
 
-                    <div className={'flex-1 px-3'}>
-                      <p className={'text-xs   text-gray-500 '}>
-                        Archival Items
-                      </p>
-                      <p className={'line-clamp-2'}>
-                        {dataFormatter
-                          .archival_itemsManyListFormatter(item.archival_items)
-                          .join(', ')}
-                      </p>
-                    </div>
-
                     <div className={'flex-1 px-3'}>
                       <p className={'text-xs   text-gray-500 '}>Period From</p>
                       <p className={'line-clamp-2'}>
diff --git a/frontend/src/components/Periods/configurePeriodsCols.tsx b/frontend/src/components/Periods/configurePeriodsCols.tsx
index 7a781a5..ce1824e 100644
--- a/frontend/src/components/Periods/configurePeriodsCols.tsx
+++ b/frontend/src/components/Periods/configurePeriodsCols.tsx
@@ -50,25 +50,6 @@ export const loadColumns = async (
       editable: hasUpdatePermission,
     },
 
-    {
-      field: 'archival_items',
-      headerName: 'Archival Items',
-      flex: 1,
-      minWidth: 120,
-      filterable: false,
-      headerClassName: 'datagrid--header',
-      cellClassName: 'datagrid--cell',
-
-      editable: false,
-      sortable: false,
-      type: 'singleSelect',
-      valueFormatter: ({ value }) =>
-        dataFormatter.archival_itemsManyListFormatter(value).join(', '),
-      renderEditCell: (params) => (
-        <DataGridMultiSelect {...params} entityName={'archival_items'} />
-      ),
-    },
-
     {
       field: 'period_from',
       headerName: 'Period From',
diff --git a/frontend/src/helpers/dataFormatter.js b/frontend/src/helpers/dataFormatter.js
index 70fa2b8..fc70dba 100644
--- a/frontend/src/helpers/dataFormatter.js
+++ b/frontend/src/helpers/dataFormatter.js
@@ -39,21 +39,21 @@ export default {
     });
   },
 
-  archival_itemsManyListFormatter(val) {
+  periodsManyListFormatter(val) {
     if (!val || !val.length) return [];
     return val.map((item) => item.id);
   },
-  archival_itemsOneListFormatter(val) {
+  periodsOneListFormatter(val) {
     if (!val) return '';
     return val.id;
   },
-  archival_itemsManyListFormatterEdit(val) {
+  periodsManyListFormatterEdit(val) {
     if (!val || !val.length) return [];
     return val.map((item) => {
       return { id: item.id, label: item.id };
     });
   },
-  archival_itemsOneListFormatterEdit(val) {
+  periodsOneListFormatterEdit(val) {
     if (!val) return '';
     return { label: val.id, id: val.id };
   },
diff --git a/frontend/src/pages/archival_items/[archival_itemsId].tsx b/frontend/src/pages/archival_items/[archival_itemsId].tsx
index 5390710..2e11e4c 100644
--- a/frontend/src/pages/archival_items/[archival_itemsId].tsx
+++ b/frontend/src/pages/archival_items/[archival_itemsId].tsx
@@ -45,6 +45,8 @@ const EditArchival_items = () => {
     isPublished: false,
 
     tags: [],
+
+    period: null,
   };
   const [initialValues, setInitialValues] = useState(initVals);
 
@@ -142,6 +144,17 @@ const EditArchival_items = () => {
                 ></Field>
               </FormField>
 
+              <FormField label='Period' labelFor='period'>
+                <Field
+                  name='period'
+                  id='period'
+                  component={SelectField}
+                  options={initialValues.period}
+                  itemRef={'periods'}
+                  showField={'id'}
+                ></Field>
+              </FormField>
+
               <BaseDivider />
               <BaseButtons>
                 <BaseButton type='submit' color='info' label='Submit' />
diff --git a/frontend/src/pages/archival_items/archival_items-edit.tsx b/frontend/src/pages/archival_items/archival_items-edit.tsx
index 75ffbe4..e7cd4bf 100644
--- a/frontend/src/pages/archival_items/archival_items-edit.tsx
+++ b/frontend/src/pages/archival_items/archival_items-edit.tsx
@@ -45,6 +45,8 @@ const EditArchival_itemsPage = () => {
     isPublished: false,
 
     tags: [],
+
+    period: null,
   };
   const [initialValues, setInitialValues] = useState(initVals);
 
@@ -140,6 +142,17 @@ const EditArchival_itemsPage = () => {
                 ></Field>
               </FormField>
 
+              <FormField label='Period' labelFor='period'>
+                <Field
+                  name='period'
+                  id='period'
+                  component={SelectField}
+                  options={initialValues.period}
+                  itemRef={'periods'}
+                  showField={'id'}
+                ></Field>
+              </FormField>
+
               <BaseDivider />
               <BaseButtons>
                 <BaseButton type='submit' color='info' label='Submit' />
diff --git a/frontend/src/pages/archival_items/archival_items-list.tsx b/frontend/src/pages/archival_items/archival_items-list.tsx
index d8ae716..b32d0a0 100644
--- a/frontend/src/pages/archival_items/archival_items-list.tsx
+++ b/frontend/src/pages/archival_items/archival_items-list.tsx
@@ -35,6 +35,8 @@ const Archival_itemsTablesPage = () => {
     { label: 'Label', title: 'label' },
     { label: 'Description', title: 'description' },
 
+    { label: 'Period', title: 'period' },
+
     { label: 'Tags', title: 'tags' },
   ]);
 
diff --git a/frontend/src/pages/archival_items/archival_items-new.tsx b/frontend/src/pages/archival_items/archival_items-new.tsx
index 2e8a30b..13ae357 100644
--- a/frontend/src/pages/archival_items/archival_items-new.tsx
+++ b/frontend/src/pages/archival_items/archival_items-new.tsx
@@ -42,6 +42,8 @@ const initialValues = {
   isPublished: false,
 
   tags: [],
+
+  period: '',
 };
 
 const Archival_itemsNew = () => {
@@ -113,6 +115,16 @@ const Archival_itemsNew = () => {
                 ></Field>
               </FormField>
 
+              <FormField label='Period' labelFor='period'>
+                <Field
+                  name='period'
+                  id='period'
+                  component={SelectField}
+                  options={[]}
+                  itemRef={'periods'}
+                ></Field>
+              </FormField>
+
               <BaseDivider />
               <BaseButtons>
                 <BaseButton type='submit' color='info' label='Submit' />
diff --git a/frontend/src/pages/archival_items/archival_items-table.tsx b/frontend/src/pages/archival_items/archival_items-table.tsx
index 1fc59e1..727c4e0 100644
--- a/frontend/src/pages/archival_items/archival_items-table.tsx
+++ b/frontend/src/pages/archival_items/archival_items-table.tsx
@@ -35,6 +35,8 @@ const Archival_itemsTablesPage = () => {
     { label: 'Label', title: 'label' },
     { label: 'Description', title: 'description' },
 
+    { label: 'Period', title: 'period' },
+
     { label: 'Tags', title: 'tags' },
   ]);
 
diff --git a/frontend/src/pages/archival_items/archival_items-view.tsx b/frontend/src/pages/archival_items/archival_items-view.tsx
index 1b0d9c6..e06592b 100644
--- a/frontend/src/pages/archival_items/archival_items-view.tsx
+++ b/frontend/src/pages/archival_items/archival_items-view.tsx
@@ -123,6 +123,12 @@ const Archival_itemsView = () => {
             </CardBox>
           </>
 
+          <div className={'mb-4'}>
+            <p className={'block font-bold mb-2'}>Period</p>
+
+            <p>{archival_items?.period?.id ?? 'No data'}</p>
+          </div>
+
           <BaseDivider />
 
           <BaseButton
diff --git a/frontend/src/pages/periods/[periodsId].tsx b/frontend/src/pages/periods/[periodsId].tsx
index e68c1f2..6ce5614 100644
--- a/frontend/src/pages/periods/[periodsId].tsx
+++ b/frontend/src/pages/periods/[periodsId].tsx
@@ -38,8 +38,6 @@ const EditPeriods = () => {
   const initVals = {
     name: '',
 
-    archival_items: [],
-
     period_from: new Date(),
 
     period_to: new Date(),
@@ -99,17 +97,6 @@ const EditPeriods = () => {
                 <Field name='name' placeholder='Name' />
               </FormField>
 
-              <FormField label='Archival Items' labelFor='archival_items'>
-                <Field
-                  name='archival_items'
-                  id='archival_items'
-                  component={SelectFieldMany}
-                  options={initialValues.archival_items}
-                  itemRef={'archival_items'}
-                  showField={'id'}
-                ></Field>
-              </FormField>
-
               <FormField label='Period From'>
                 <DatePicker
                   dateFormat='yyyy-MM-dd hh:mm'
diff --git a/frontend/src/pages/periods/periods-edit.tsx b/frontend/src/pages/periods/periods-edit.tsx
index b03a06c..cea37f2 100644
--- a/frontend/src/pages/periods/periods-edit.tsx
+++ b/frontend/src/pages/periods/periods-edit.tsx
@@ -38,8 +38,6 @@ const EditPeriodsPage = () => {
   const initVals = {
     name: '',
 
-    archival_items: [],
-
     period_from: new Date(),
 
     period_to: new Date(),
@@ -97,17 +95,6 @@ const EditPeriodsPage = () => {
                 <Field name='name' placeholder='Name' />
               </FormField>
 
-              <FormField label='Archival Items' labelFor='archival_items'>
-                <Field
-                  name='archival_items'
-                  id='archival_items'
-                  component={SelectFieldMany}
-                  options={initialValues.archival_items}
-                  itemRef={'archival_items'}
-                  showField={'id'}
-                ></Field>
-              </FormField>
-
               <FormField label='Period From'>
                 <DatePicker
                   dateFormat='yyyy-MM-dd hh:mm'
diff --git a/frontend/src/pages/periods/periods-list.tsx b/frontend/src/pages/periods/periods-list.tsx
index ad69e38..3ab45e1 100644
--- a/frontend/src/pages/periods/periods-list.tsx
+++ b/frontend/src/pages/periods/periods-list.tsx
@@ -33,8 +33,6 @@ const PeriodsTablesPage = () => {
 
     { label: 'Period From', title: 'period_from', date: 'true' },
     { label: 'Period To', title: 'period_to', date: 'true' },
-
-    { label: 'Archival Items', title: 'archival_items' },
   ]);
 
   const hasCreatePermission =
diff --git a/frontend/src/pages/periods/periods-new.tsx b/frontend/src/pages/periods/periods-new.tsx
index 445eccb..b3db936 100644
--- a/frontend/src/pages/periods/periods-new.tsx
+++ b/frontend/src/pages/periods/periods-new.tsx
@@ -35,8 +35,6 @@ import moment from 'moment';
 const initialValues = {
   name: '',
 
-  archival_items: [],
-
   period_from: '',
 
   period_to: '',
@@ -73,16 +71,6 @@ const PeriodsNew = () => {
                 <Field name='name' placeholder='Name' />
               </FormField>
 
-              <FormField label='Archival Items' labelFor='archival_items'>
-                <Field
-                  name='archival_items'
-                  id='archival_items'
-                  itemRef={'archival_items'}
-                  options={[]}
-                  component={SelectFieldMany}
-                ></Field>
-              </FormField>
-
               <FormField label='Period From'>
                 <Field
                   type='datetime-local'
diff --git a/frontend/src/pages/periods/periods-table.tsx b/frontend/src/pages/periods/periods-table.tsx
index c7d95e8..1b0e685 100644
--- a/frontend/src/pages/periods/periods-table.tsx
+++ b/frontend/src/pages/periods/periods-table.tsx
@@ -33,8 +33,6 @@ const PeriodsTablesPage = () => {
 
     { label: 'Period From', title: 'period_from', date: 'true' },
     { label: 'Period To', title: 'period_to', date: 'true' },
-
-    { label: 'Archival Items', title: 'archival_items' },
   ]);
 
   const hasCreatePermission =
diff --git a/frontend/src/pages/periods/periods-view.tsx b/frontend/src/pages/periods/periods-view.tsx
index bab4f6a..fff11c6 100644
--- a/frontend/src/pages/periods/periods-view.tsx
+++ b/frontend/src/pages/periods/periods-view.tsx
@@ -59,53 +59,6 @@ const PeriodsView = () => {
             <p>{periods?.name}</p>
           </div>
 
-          <>
-            <p className={'block font-bold mb-2'}>Archival Items</p>
-            <CardBox
-              className='mb-6 border border-gray-300 rounded overflow-hidden'
-              hasTable
-            >
-              <div className='overflow-x-auto'>
-                <table>
-                  <thead>
-                    <tr>
-                      <th>Label</th>
-
-                      <th>Description</th>
-
-                      <th>Is Published</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {periods.archival_items &&
-                      Array.isArray(periods.archival_items) &&
-                      periods.archival_items.map((item: any) => (
-                        <tr
-                          key={item.id}
-                          onClick={() =>
-                            router.push(
-                              `/archival_items/archival_items-view/?id=${item.id}`,
-                            )
-                          }
-                        >
-                          <td data-label='label'>{item.label}</td>
-
-                          <td data-label='description'>{item.description}</td>
-
-                          <td data-label='isPublished'>
-                            {dataFormatter.booleanFormatter(item.isPublished)}
-                          </td>
-                        </tr>
-                      ))}
-                  </tbody>
-                </table>
-              </div>
-              {!periods?.archival_items?.length && (
-                <div className={'text-center py-4'}>No data</div>
-              )}
-            </CardBox>
-          </>
-
           <FormField label='Period From'>
             {periods.period_from ? (
               <DatePicker
@@ -144,6 +97,53 @@ const PeriodsView = () => {
             )}
           </FormField>
 
+          <>
+            <p className={'block font-bold mb-2'}>Archival_items Period</p>
+            <CardBox
+              className='mb-6 border border-gray-300 rounded overflow-hidden'
+              hasTable
+            >
+              <div className='overflow-x-auto'>
+                <table>
+                  <thead>
+                    <tr>
+                      <th>Label</th>
+
+                      <th>Description</th>
+
+                      <th>Is Published</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {periods.archival_items_period &&
+                      Array.isArray(periods.archival_items_period) &&
+                      periods.archival_items_period.map((item: any) => (
+                        <tr
+                          key={item.id}
+                          onClick={() =>
+                            router.push(
+                              `/archival_items/archival_items-view/?id=${item.id}`,
+                            )
+                          }
+                        >
+                          <td data-label='label'>{item.label}</td>
+
+                          <td data-label='description'>{item.description}</td>
+
+                          <td data-label='isPublished'>
+                            {dataFormatter.booleanFormatter(item.isPublished)}
+                          </td>
+                        </tr>
+                      ))}
+                  </tbody>
+                </table>
+              </div>
+              {!periods?.archival_items_period?.length && (
+                <div className={'text-center py-4'}>No data</div>
+              )}
+            </CardBox>
+          </>
+
           <BaseDivider />
 
           <BaseButton