diff --git a/components/generic/LightSelect.tsx b/components/generic/LightSelect.tsx
index a941395..da5fad2 100644
--- a/components/generic/LightSelect.tsx
+++ b/components/generic/LightSelect.tsx
@@ -7,6 +7,7 @@ type Props = {
 	options: { label: string; value: string | number; href?: string }[];
 	defaultValue?: string | number;
 	onChange?(value: string | number, href?: string): void;
+	triggerValue?: string | number;
 	placeholder?: string;
 	superLight?: boolean;
 	label: string;
@@ -19,6 +20,7 @@ export function LightSelect(props: Props) {
 		options,
 		placeholder,
 		defaultValue,
+		triggerValue,
 		superLight,
 		label,
 		id
@@ -35,6 +37,10 @@ export function LightSelect(props: Props) {
 			onChange(value, options.find(_ => _.value === value)?.href);
 	}, [value, onChange, options]);
 
+	useEffect(() => {
+		setValue(triggerValue ? triggerValue : '');
+	}, [triggerValue]);
+
 	return (
 		<Select
 			label={label}
diff --git a/components/top250/Top250Header.tsx b/components/top250/Top250Header.tsx
index 9e34e22..a5662a7 100644
--- a/components/top250/Top250Header.tsx
+++ b/components/top250/Top250Header.tsx
@@ -10,12 +10,30 @@ type Props = {
 	title: ReactNode;
 	searchLabel: string;
 	onSearch: (value: string) => void;
+	old?: boolean;
 };
 
+const oldEditions = [
+	{ slug: '2022-octobre', display: 'Octobre 2022' },
+	{ slug: '2022-juillet', display: 'Juillet 2022' },
+	{ slug: '2022-avril', display: 'Avril 2022' },
+	{ slug: '2022-janvier', display: 'Janvier 2022' },
+	{ slug: '2021-octobre', display: 'Octobre 2021' },
+	{ slug: '2021-juillet', display: 'Juillet 2021' },
+	{ slug: '2021-avril', display: 'Avril 2021' },
+	{ slug: '2021-janvier', display: 'Janvier 2021' },
+	{ slug: '2020-octobre', display: 'Octobre 2020' },
+	{ slug: '2020-juillet', display: 'Juillet 2020' },
+	{ slug: '2020-avril', display: 'Avril 2020' },
+	{ slug: '2020-janvier', display: 'Janvier 2020' },
+	{ slug: '2019-octobre', display: 'Octobre 2019' },
+	{ slug: '2019-juin', display: 'Juin 2019' }
+];
+
 export function Top250Header(props: Props) {
-	const { title, searchLabel, onSearch } = props;
+	const { title, searchLabel, onSearch, old } = props;
 	const router = useRouter();
-	const { id: edition_id } = router.query;
+	const { id: edition_id, slug: old_edition_id } = router.query;
 
 	const { data: editions } = useEditions();
 
@@ -26,43 +44,90 @@ export function Top250Header(props: Props) {
 	return (
 		<div className={cx(classes.root)}>
 			<h1 className={cx(classes.title)}>{title}</h1>
-			<div className={cx(classes.editionsContainer)}>
-				{editions?.map((e, index) => {
-					const isCurrent =
-						(edition_id && e.id === edition_id) || (!edition_id && index === 0);
-					return (
-						<span
-							key={index}
-							className={cx(fr.cx('fr-px-1w', 'fr-py-0-5v'), classes.linkTag)}
+			{!old && (
+				<div className={cx(classes.editionsContainer)}>
+					{editions?.map((e, index) => {
+						const isCurrent =
+							(edition_id && e.id === edition_id) ||
+							(!edition_id && index === 0);
+						return (
+							<span
+								key={index}
+								className={cx(fr.cx('fr-px-1w', 'fr-py-0-5v'), classes.linkTag)}
+							>
+								{isCurrent ? (
+									<a
+										className={cx(fr.cx('fr-link'), classes.currentLink)}
+										href={'#'}
+									>
+										{e.name}
+									</a>
+								) : (
+									<Link
+										href={`/observatoire/${e.id}`}
+										className={fr.cx('fr-link')}
+									>
+										{e.name}
+									</Link>
+								)}
+							</span>
+						);
+					})}
+					<span
+						className={cx(fr.cx('fr-px-1w', 'fr-py-0-5v'), classes.linkTag)}
+					>
+						<a
+							className={fr.cx('fr-link')}
+							href="/observatoire/old/2022-octobre"
+							target="_blank"
 						>
-							{isCurrent ? (
-								<a
-									className={cx(fr.cx('fr-link'), classes.currentLink)}
-									href={'#'}
-								>
-									{e.name}
-								</a>
-							) : (
-								<Link
-									href={`/observatoire/${e.id}`}
-									className={fr.cx('fr-link')}
-								>
-									{e.name}
-								</Link>
-							)}
-						</span>
-					);
-				})}
-				<span className={cx(fr.cx('fr-px-1w', 'fr-py-0-5v'), classes.linkTag)}>
-					<a
-						className={fr.cx('fr-link')}
-						href="/observatoire/2022-octobre"
-						target="_blank"
+							Voir les éditions précédentes
+						</a>
+					</span>
+				</div>
+			)}
+			{old && (
+				<div className={cx(classes.editionsContainer)}>
+					{oldEditions.map((edition, index) => {
+						const isCurrent =
+							(old_edition_id && edition.slug === old_edition_id) ||
+							(!old_edition_id && index === 0);
+						return (
+							<span
+								key={index}
+								className={cx(fr.cx('fr-px-1w', 'fr-py-0-5v'), classes.linkTag)}
+							>
+								{isCurrent ? (
+									<a
+										className={cx(fr.cx('fr-link'), classes.currentLink)}
+										href={'#'}
+									>
+										{edition.display}
+									</a>
+								) : (
+									<Link
+										href={`/observatoire/old/${edition.slug}`}
+										className={fr.cx('fr-link')}
+									>
+										{edition.display}
+									</Link>
+								)}
+							</span>
+						);
+					})}
+					<span
+						className={cx(fr.cx('fr-px-1w', 'fr-py-0-5v'), classes.linkTag)}
 					>
-						Voir les éditions précédentes
-					</a>
-				</span>
-			</div>
+						<a
+							className={fr.cx('fr-link')}
+							href="/observatoire"
+							target="_blank"
+						>
+							Voir les nouvelles éditions
+						</a>
+					</span>
+				</div>
+			)}
 			<form
 				onSubmit={e => {
 					e.preventDefault();
diff --git a/components/top250/table/IndicatorLabel.tsx b/components/top250/table/IndicatorLabel.tsx
index 41c9ee7..306aeeb 100644
--- a/components/top250/table/IndicatorLabel.tsx
+++ b/components/top250/table/IndicatorLabel.tsx
@@ -6,10 +6,11 @@ type Props = {
 	label: string;
 	color: IndicatorColor;
 	noBackground?: boolean | null;
+	old?: boolean;
 };
 
 export function IndicatorLabel(props: Props) {
-	const { label, color, noBackground } = props;
+	const { label, color, noBackground, old } = props;
 	const { classes, cx } = useStyles();
 
 	return (
@@ -22,6 +23,17 @@ export function IndicatorLabel(props: Props) {
 				),
 				classes.root,
 				classes[color],
+				old ? classes.old : '',
+				old &&
+					[
+						'< 100 votes',
+						'n/a',
+						'-',
+						'En attente',
+						'En cours de déploiement local'
+					].includes(label)
+					? classes.oldXs
+					: '',
 				noBackground ? classes.noBackground : ''
 			)}
 		>
@@ -70,5 +82,11 @@ const useStyles = makeStyles()(theme => ({
 	noBackground: {
 		backgroundColor: 'transparent',
 		fontWeight: 'normal'
+	},
+	old: {
+		display: 'block'
+	},
+	oldXs: {
+		fontSize: '0.75rem !important'
 	}
 }));
diff --git a/components/top250/table/OldProceduresTable.tsx b/components/top250/table/OldProceduresTable.tsx
new file mode 100644
index 0000000..75c0777
--- /dev/null
+++ b/components/top250/table/OldProceduresTable.tsx
@@ -0,0 +1,269 @@
+import { fr } from '@codegouvfr/react-dsfr';
+import { makeStyles } from '@codegouvfr/react-dsfr/tss';
+import { IndicatorColor, OldProcedure } from '@prisma/client';
+import { IndicatorLabel } from './IndicatorLabel';
+import { Dispatch, SetStateAction } from 'react';
+import Link from 'next/link';
+import { oldDefaultSort } from '@/pages/observatoire/old/[slug]';
+
+type Props = {
+	procedures: OldProcedure[];
+	sort: string;
+	setSort: Dispatch<SetStateAction<string>>;
+};
+
+export const OldProceduresTable = ({ procedures, sort, setSort }: Props) => {
+	const { classes, cx } = useStyles();
+
+	const getColor = (
+		value: string,
+		type: 'text' | 'number' | 'dlnuf' = 'text'
+	): IndicatorColor => {
+		if (type === 'text') {
+			return ({
+				Oui: 'green',
+				'En cours': 'green',
+				Non: 'red',
+				Partiel: 'orange'
+			}[value] || 'gray') as IndicatorColor;
+		} else if (type === 'number') {
+			const num = parseInt(value);
+			if (isNaN(num)) return 'gray';
+			else if (num < 5) return 'red';
+			else if (num < 8) return 'orange';
+			else return 'green';
+		} else {
+			// DLNUF
+			const num = parseInt(value);
+			if (isNaN(num)) return 'gray';
+			else if (num > 4) return 'red';
+			else if (num >= 2) return 'orange';
+			else return 'green';
+		}
+	};
+
+	const handleSort = (key: string) => () =>
+		setSort(
+			sort.includes(key)
+				? `${sort.includes('asc') ? `${key}:desc` : oldDefaultSort}`
+				: `${key}:asc`
+		);
+
+	if (!procedures.length)
+		return (
+			<p className={classes.noProcedure} role="status">
+				Aucune démarche trouvée pour cette recherche...
+			</p>
+		);
+
+	const headerKeys = [
+		'title',
+		'statutDemat',
+		'satisfactionIndex_value',
+		'accessibilityScore_display',
+		'qualiteSupport',
+		'adapteMobile_display',
+		'franceConnect_display',
+		'ditesLeNousUneFois_value',
+		'urlScore_value'
+	];
+
+	const headerTexts = [
+		'Les démarches',
+		'Réalisable en ligne',
+		'Usagers Satisfaits (/10)',
+		'Prise en compte handicaps',
+		'Aide joignable',
+		'Compatible mobile',
+		'Intégration FranceConnect',
+		'Dites-le nous une fois',
+		'Disponibilité et rapidité'
+	];
+
+	const cellsKeys = [
+		'statutDemat',
+		'satisfactionIndex_display',
+		'accessibilityScore_display',
+		'qualiteSupport',
+		'adapteMobile_display',
+		'franceConnect_display',
+		'ditesLeNousUneFois_display',
+		'urlScore_display'
+	];
+
+	return (
+		<table className={cx(fr.cx('fr-table'), classes.table)}>
+			<thead>
+				<tr>
+					{headerTexts.map((header, i) => (
+						<th
+							key={i}
+							onClick={handleSort(headerKeys[i])}
+							className={cx(
+								sort.includes(headerKeys[i]) ? classes.sortedHeader : ''
+							)}
+						>
+							{header}{' '}
+							{sort.includes(headerKeys[i]) && (
+								<span
+									className={cx(
+										classes.sortIcon,
+										sort.includes('asc')
+											? 'fr-icon-arrow-down-s-fill'
+											: 'fr-icon-arrow-up-s-fill'
+									)}
+								></span>
+							)}
+						</th>
+					))}
+				</tr>
+			</thead>
+			<tbody>
+				{procedures.map(procedure => (
+					<tr key={procedure.id}>
+						<th className={fr.cx('fr-text--bold', 'fr-text--md')} scope="row">
+							{procedure.title}
+							<br />
+							<small>{procedure.ministere}</small>
+							<br />
+							<span>
+								Volumétrie totale : {procedure.volumetrie_display} (
+								{procedure.pourcentageRecoursVoieDematerialisee_display} en
+								ligne)
+							</span>
+						</th>
+						{cellsKeys.map((attr, i) => {
+							let fieldAttrType: 'number' | 'dlnuf' | 'text' | undefined =
+								'text';
+							if (
+								attr.includes('satisfactionIndex_display') ||
+								attr.includes('urlScore_display')
+							)
+								fieldAttrType = 'number';
+							else if (attr.includes('UneFois')) fieldAttrType = 'dlnuf';
+
+							const procedureJdmaLink = `https://observatoire.numerique.gouv.fr/${procedure.xwiki_id
+								.split('.')
+								.join('/')}?view-mode=statistics&date-debut=${
+								procedure.jdma_start_date
+							}&date-fin=${procedure.jdma_end_date}`;
+							const hasLink =
+								attr === 'satisfactionIndex_display' &&
+								(procedure.satisfactionIndex_value || -1) >= 0;
+
+							const displayAccessibilityScore =
+								attr === 'accessibilityScore_display' &&
+								!!procedure.rgaaCompliancyLevel_value;
+
+							return (
+								<td key={i} style={{ position: 'relative' }}>
+									<IndicatorLabel
+										label={
+											(procedure[attr as keyof OldProcedure] as string) || '-'
+										}
+										noBackground={['-', 'n/a'].includes(
+											(procedure[attr as keyof OldProcedure] as string) || '-'
+										)}
+										color={getColor(
+											(procedure[attr as keyof OldProcedure] as string) || '',
+											fieldAttrType
+										)}
+										old
+									/>
+									{hasLink && procedure.jdma_start_date && (
+										<Link
+											href={procedureJdmaLink}
+											className={cx(fr.cx('fr-text--xs'), classes.smallLinks)}
+											target="_blank"
+										>
+											Graphes
+										</Link>
+									)}
+									{attr === 'statutDemat' && procedure.urlDemarche && (
+										<Link
+											href={procedure.urlDemarche}
+											className={cx(fr.cx('fr-text--xs'), classes.smallLinks)}
+											target="_blank"
+										>
+											Voir
+										</Link>
+									)}
+									{displayAccessibilityScore && (
+										<span
+											className={cx(fr.cx('fr-text--xs'), classes.smallLinks)}
+										>
+											{procedure.rgaaCompliancyLevel_display}
+										</span>
+									)}
+								</td>
+							);
+						})}
+					</tr>
+				))}
+			</tbody>
+		</table>
+	);
+};
+
+const useStyles = makeStyles()(theme => ({
+	table: {
+		['thead th']: {
+			cursor: 'pointer',
+			position: 'relative',
+			':hover': {
+				opacity: '0.7'
+			}
+		},
+		['thead th:not(:first-of-type)']: {
+			...fr.typography[17].style
+		},
+		['thead th:first-of-type']: {
+			...fr.typography[20].style
+		},
+		['thead th:not(:first-of-type), tbody td']: {
+			textAlign: 'center'
+		},
+		['tbody th']: {
+			...fr.typography[20].style,
+			small: {
+				...fr.typography[18].style,
+				fontWeight: 'normal',
+				color: '#666'
+			},
+			span: {
+				...fr.typography[17].style,
+				fontWeight: 'normal',
+				color: '#666'
+			}
+		},
+		['tbody td']: {
+			width: '8.5em'
+		},
+		['tbody tr']: {
+			height: '130px'
+		}
+	},
+	noProcedure: {
+		padding: fr.spacing('30v'),
+		textAlign: 'center',
+		fontWeight: 'bold'
+	},
+	smallLinks: {
+		position: 'absolute',
+		top: '50%',
+		left: '50%',
+		transform: 'translateX(-50%)translateY(-50%)',
+		marginTop: '1.8rem',
+		'::after': {
+			display: 'none'
+		}
+	},
+	sortIcon: {
+		position: 'absolute',
+		right: '5px',
+		top: '5px'
+	},
+	sortedHeader: {
+		paddingRight: '3rem'
+	}
+}));
diff --git a/components/top250/table/PreHeader.tsx b/components/top250/table/PreHeader.tsx
index a955a76..deae02f 100644
--- a/components/top250/table/PreHeader.tsx
+++ b/components/top250/table/PreHeader.tsx
@@ -2,31 +2,34 @@ import { LightSelect } from '@/components/generic/LightSelect';
 import { fr } from '@codegouvfr/react-dsfr';
 import { makeStyles } from '@codegouvfr/react-dsfr/tss';
 import Link from 'next/link';
-import { useEffect, useState } from 'react';
+import { Dispatch, SetStateAction, useEffect, useState } from 'react';
 
 type Props = {
-	onSort: (value: string | number) => void;
+	sort: string;
+	setSort: Dispatch<SetStateAction<string>>;
+	old?: boolean;
 };
 
-const sortOptions = [
-	{
-		label: 'Trier par volumétrie (décroissant)',
-		value: 'volume:desc'
-	},
-	{
-		label: 'Trier par volumétrie (croissant)',
-		value: 'volume:asc'
-	}
-];
-
 export function PreHeader(props: Props) {
 	const { classes, cx } = useStyles();
-	const { onSort } = props;
+	const { sort, setSort, old } = props;
+	const volume_slug = old ? 'volumetrie_value' : 'volume';
+
+	const sortOptions = [
+		{
+			label: 'Trier par volumétrie (décroissant)',
+			value: `${volume_slug}:desc`
+		},
+		{
+			label: 'Trier par volumétrie (croissant)',
+			value: `${volume_slug}:asc`
+		}
+	];
 
-	const [localSort, setLocalSort] = useState<string>('volume:desc');
+	const [localSort, setLocalSort] = useState<string>(`${volume_slug}:desc`);
 
 	useEffect(() => {
-		if (localSort && onSort) onSort(localSort);
+		if (localSort && setSort) setSort(localSort);
 	}, [localSort]);
 
 	return (
@@ -36,6 +39,7 @@ export function PreHeader(props: Props) {
 					label="Trier la liste des démarches"
 					id="tri-demarche"
 					options={sortOptions}
+					triggerValue={sort}
 					superLight
 					onChange={value => {
 						setLocalSort(value as string);
@@ -43,13 +47,15 @@ export function PreHeader(props: Props) {
 				/>
 			</div>
 			<div className={cx(classes.section)}>
-				<Link
-					href="/Aide/Observatoire?tab=indicators"
-					className={fr.cx('fr-link')}
-				>
-					Tout comprendre sur les indicateurs{' '}
-					<i className={cx(fr.cx('ri-chat-poll-line'), classes.linkIcon)} />
-				</Link>
+				{!old && (
+					<Link
+						href="/Aide/Observatoire?tab=indicators"
+						className={fr.cx('fr-link')}
+					>
+						Tout comprendre sur les indicateurs{' '}
+						<i className={cx(fr.cx('ri-chat-poll-line'), classes.linkIcon)} />
+					</Link>
+				)}
 			</div>
 		</div>
 	);
diff --git a/pages/api/old-procedures/index.tsx b/pages/api/old-procedures/index.tsx
new file mode 100644
index 0000000..6db9a75
--- /dev/null
+++ b/pages/api/old-procedures/index.tsx
@@ -0,0 +1,57 @@
+import { Prisma, PrismaClient } from '@prisma/client';
+import { NextApiRequest, NextApiResponse } from 'next';
+
+const prisma = new PrismaClient();
+
+export async function getOldProcedures(
+	xwiki_edition: string,
+	search?: string,
+	sort?: string
+) {
+	let whereRequest: Prisma.OldProcedureWhereInput = {
+		xwiki_edition: xwiki_edition
+	};
+
+	if (search)
+		whereRequest.OR = [
+			{ title: { contains: search, mode: 'insensitive' } },
+			{ ministere: { contains: search, mode: 'insensitive' } }
+		];
+
+	let orderBy: any = [{ volumetrie_value: 'desc' }];
+
+	if (sort) {
+		const values = sort.split(':');
+		if (values.length === 2)
+			orderBy = [
+				{
+					[values[0]]: values[1]
+				}
+			];
+	}
+
+	const oldProcedures = await prisma.oldProcedure.findMany({
+		orderBy,
+		where: whereRequest
+	});
+	return oldProcedures;
+}
+
+export default async function handler(
+	req: NextApiRequest,
+	res: NextApiResponse
+) {
+	if (req.method === 'GET') {
+		const { xwiki_edition, search, sort } = req.query;
+
+		const oldProcedures = await getOldProcedures(
+			xwiki_edition as string,
+			search as string,
+			sort as string
+		);
+
+		res.status(200).json(oldProcedures);
+	} else {
+		res.status(400).json({ message: 'Unsupported method' });
+	}
+}
diff --git a/pages/observatoire/[id].tsx b/pages/observatoire/[id].tsx
index cdb8f51..77d86cc 100644
--- a/pages/observatoire/[id].tsx
+++ b/pages/observatoire/[id].tsx
@@ -48,11 +48,7 @@ export default function ObservatoireEdition() {
 			</div>
 			<div className={cx(classes.tableContainer)} id="procedures-section">
 				<div className={fr.cx('fr-container', 'fr-px-5v')}>
-					<PreHeader
-						onSort={value => {
-							setSort(value.toString());
-						}}
-					/>
+					<PreHeader sort={sort} setSort={setSort} />
 				</div>
 				{isLoading || !procedures ? (
 					<div className={cx(classes.loader)}>
diff --git a/pages/observatoire/index.tsx b/pages/observatoire/index.tsx
index e8fb41d..c72f33d 100644
--- a/pages/observatoire/index.tsx
+++ b/pages/observatoire/index.tsx
@@ -43,11 +43,7 @@ export default function Observatoire() {
 			</div>
 			<div className={cx(classes.tableContainer)} id="procedures-section">
 				<div className={fr.cx('fr-container', 'fr-px-5v')}>
-					<PreHeader
-						onSort={value => {
-							setSort(value.toString());
-						}}
-					/>
+					<PreHeader sort={sort} setSort={setSort} />
 				</div>
 				{isLoading || !procedures ? (
 					<div className={cx(classes.loader)}>
diff --git a/pages/observatoire/old/[slug].tsx b/pages/observatoire/old/[slug].tsx
new file mode 100644
index 0000000..47d94a6
--- /dev/null
+++ b/pages/observatoire/old/[slug].tsx
@@ -0,0 +1,92 @@
+import { Top250Header } from '@/components/top250/Top250Header';
+import { OldProceduresTable } from '@/components/top250/table/OldProceduresTable';
+import { PreHeader } from '@/components/top250/table/PreHeader';
+import { StickyFooter } from '@/components/top250/table/StickyFooter';
+import { useOldProcedures } from '@/utils/api';
+import { fr } from '@codegouvfr/react-dsfr';
+import { makeStyles } from '@codegouvfr/react-dsfr/tss';
+import { useRouter } from 'next/router';
+import { useState } from 'react';
+
+export const oldDefaultSort = 'volumetrie_value:desc';
+
+export default function ObservatoireEdition() {
+	const { classes, cx } = useStyles();
+	const router = useRouter();
+	const { slug } = router.query;
+
+	const [search, setSearch] = useState<string>();
+	const [sort, setSort] = useState<string>(oldDefaultSort);
+
+	const {
+		data: procedures,
+		isError,
+		isLoading
+	} = useOldProcedures({ search, sort, xwiki_edition: slug as string });
+
+	if (isError) return <div>Une erreur est survenue.</div>;
+
+	return (
+		<>
+			<div className={fr.cx('fr-container')}>
+				<Top250Header
+					title={<>Anciennes éditions de l&apos;observatoire 1.0</>}
+					searchLabel="Rechercher par ministère, administration, ..."
+					onSearch={value => {
+						setSearch(value);
+					}}
+					old
+				/>
+			</div>
+			<div className={cx(classes.tableContainer)} id="procedures-section">
+				<div className={fr.cx('fr-container', 'fr-px-5v')}>
+					<PreHeader sort={sort} setSort={setSort} old />
+				</div>
+				{isLoading || !procedures ? (
+					<div className={cx(classes.loader)}>
+						<div>
+							<i className={fr.cx('ri-loader-4-line')} />
+						</div>
+
+						<p className={fr.cx('fr-pt-4v')}>Recherche en cours...</p>
+					</div>
+				) : (
+					<>
+						<div className={fr.cx('fr-container', 'fr-px-5v')}>
+							<OldProceduresTable
+								procedures={procedures}
+								setSort={setSort}
+								sort={sort}
+							/>
+						</div>
+						<StickyFooter proceduresCount={procedures.length} />
+					</>
+				)}
+			</div>
+		</>
+	);
+}
+
+const useStyles = makeStyles()(theme => ({
+	tableContainer: {
+		backgroundColor: theme.decisions.background.contrast.info.default,
+		['.fr-container']: {
+			maxWidth: 1440
+		}
+	},
+	loader: {
+		padding: fr.spacing('30v'),
+		display: 'flex',
+		flexDirection: 'column',
+		alignItems: 'center',
+		justifyContent: 'center',
+		i: {
+			display: 'inline-block',
+			animation: 'spin 1s linear infinite;',
+			color: theme.decisions.background.actionHigh.blueFrance.default,
+			['&::before']: {
+				'--icon-size': '2rem'
+			}
+		}
+	}
+}));
diff --git a/prisma/schema.prisma b/prisma/schema.prisma
index ed321dc..b0651ec 100644
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -30,6 +30,45 @@ enum IndicatorColor {
   gray
 }
 
+model OldProcedure {
+  id                                           String   @id @default(auto()) @map("_id") @db.ObjectId
+  xwiki_id                                     String
+  xwiki_edition                                String
+  title                                        String
+  statutDemat                                  String?
+  ministere                                    String?
+  groupes                                      String?
+  direction                                    String?
+  dateMiseEnLigne_display                      String?
+  dateMiseEnLigne_value                        String?
+  volumetrie_display                           String?
+  volumetrie_value                             Int?
+  pourcentageRecoursVoieDematerialisee_display String?
+  pourcentageRecoursVoieDematerialisee_value   Int?
+  franceConnect_value                          String?
+  franceConnect_display                        String?
+  adapteMobile_display                         String?
+  adapteMobile_value                           String?
+  qualiteSupport                               String?
+  avisCount_display                            Int?
+  avisCount_value                              Int?
+  satisfactionIndex_display                    String?
+  satisfactionIndex_value                      Float?
+  urlScore_display                             String?
+  urlScore_value                               String?
+  urlDemarche                                  String?
+  ditesLeNousUneFois_display                   String?
+  ditesLeNousUneFois_value                     Int?
+  categoriesPublics_display                    String?
+  categoriesPublics_value                      String[]
+  rgaaCompliancyLevel_display                  String?
+  rgaaCompliancyLevel_value                    Float?
+  accessibilityScore_display                   String?
+  accessibilityScore_value                     String?
+  jdma_start_date                              String?
+  jdma_end_date                                String?
+}
+
 model Edition {
   id         String      @id @default(auto()) @map("_id") @db.ObjectId
   name       String      @unique
diff --git a/utils/api.ts b/utils/api.ts
index afcb73a..49aaea2 100644
--- a/utils/api.ts
+++ b/utils/api.ts
@@ -1,14 +1,41 @@
 import useSWR from 'swr';
 import { parse as superJSONParse, stringify } from 'superjson';
 import { ProcedureWithFieldsAndEditions } from '@/pages/api/procedures/types';
-import { ProcedureHeader, Edition, User } from '@prisma/client';
+import { ProcedureHeader, Edition, User, OldProcedure } from '@prisma/client';
+
+type OldProceduresProps = {
+	xwiki_edition: string;
+	search?: string;
+	sort?: string;
+};
+export function useOldProcedures(props: OldProceduresProps) {
+	// REMOVE UNDEFINED TO AVOID ISSUES IN URLSEARCHPARAMS
+	const fakeProps: { [key: string]: any } = props;
+	Object.keys(fakeProps).forEach(
+		key => fakeProps[key] === undefined && delete fakeProps[key]
+	);
+
+	const searchUrl = new URLSearchParams(fakeProps);
+	const { data, error, isLoading } = useSWR(
+		`/api/old-procedures?${searchUrl}`,
+		async function (input: RequestInfo, init?: RequestInit) {
+			const res = await fetch(input, init);
+			return superJSONParse<OldProcedure[]>(stringify(await res.json()));
+		}
+	);
+
+	return {
+		data,
+		isError: error,
+		isLoading: (!error && !data) || isLoading
+	};
+}
 
 type ProceduresProps = {
 	editionId?: string;
 	search?: string;
 	sort?: string;
 };
-
 export function useProcedures(props: ProceduresProps) {
 	// REMOVE UNDEFINED TO AVOID ISSUES IN URLSEARCHPARAMS
 	const fakeProps: { [key: string]: any } = props;