diff --git a/layouts/default.vue b/layouts/default.vue
index bbaf452..b48aa1c 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,11 +1,8 @@
 <template>
 	<VApp>
-		<HeaderBar
-			service-title="Titre du service"
-			service-sub-title="Description du service"
-			:navigation-items="navigationItems"
-		/>
+		<AppHeader/>
 		<PageContainer>
+			<BackBtn to="/"/>
 			<slot />
 		</PageContainer>
 		<FooterBar
@@ -22,12 +19,14 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue'
-import { PageContainer, HeaderBar, FooterBar } from '@cnamts/synapse-bridge'
+import { PageContainer, FooterBar, BackBtn } from '@cnamts/synapse-bridge'
+import AppHeader from "../src/views/commons/AppHeader.vue";
 export default defineComponent({
 	components: {
+		AppHeader,
 		PageContainer,
-		HeaderBar,
 		FooterBar,
+		BackBtn
 	},
 	data() {
 		return {
diff --git a/package.json b/package.json
index 909cd5c..5d6346c 100644
--- a/package.json
+++ b/package.json
@@ -25,7 +25,7 @@
 	},
 	"dependencies": {
 		"@cnamts/design-tokens": "2.16.6",
-		"@cnamts/synapse-bridge": "1.4.5-alpha.0",
+		"@cnamts/synapse-bridge": "1.4.9-alpha.0",
 		"@mdi/js": "7.2.96",
 		"@nuxtjs/i18n": "8.0.0-rc.4",
 		"axios": "^1.5.0",
@@ -43,8 +43,8 @@
 	"devDependencies": {
 		"@babel/preset-env": "7.22.15",
 		"@nuxt/devtools": "latest",
-		"@nuxtjs/eslint-config-typescript": "^12.1.0",
 		"@nuxt/eslint": "^0.3.13",
+		"@nuxtjs/eslint-config-typescript": "^12.1.0",
 		"@types/jest": "29.5.4",
 		"@types/node": "18.17.0",
 		"@vue/test-utils": "2.4.1",
@@ -52,16 +52,16 @@
 		"consola": "3.0.1",
 		"cypress": "^12.17.4",
 		"eslint": "^9.5.0",
-		"eslint-plugin-vue": "^9.21.0",
-		"eslint-plugin-vuejs-accessibility": "^2.2.1",
-		"eslint-plugin-vuetify": "^2.1.1",
 		"eslint-config-prettier": "^9.1.0",
 		"eslint-plugin-prettier": "^5.1.3",
+		"eslint-plugin-vue": "^9.21.0",
+		"eslint-plugin-vuejs-accessibility": "^2.3.1",
+		"eslint-plugin-vuetify": "^2.1.1",
 		"jest": "29.7.0",
 		"jest-environment-jsdom": "29.7.0",
 		"jest-transform-stub": "2.0.0",
-		"resize-observer-polyfill": "^1.5.1",
 		"prettier": "^3.3.2",
+		"resize-observer-polyfill": "^1.5.1",
 		"ts-jest": "29.1.4",
 		"ts-node": "10.9.1",
 		"typescript": "^5.5.2"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 77f417f..b473623 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -9,8 +9,8 @@ dependencies:
     specifier: 2.16.6
     version: 2.16.6
   '@cnamts/synapse-bridge':
-    specifier: 1.4.5-alpha.0
-    version: 1.4.5-alpha.0(vue@3.4.31)(vuetify@3.6.11)(vuex@4.1.0)
+    specifier: 1.4.9-alpha.0
+    version: 1.4.9-alpha.0(vue@3.4.31)(vuetify@3.6.11)(vuex@4.1.0)
   '@mdi/js':
     specifier: 7.2.96
     version: 7.2.96
@@ -95,7 +95,7 @@ devDependencies:
     specifier: ^9.21.0
     version: 9.27.0(eslint@9.6.0)
   eslint-plugin-vuejs-accessibility:
-    specifier: ^2.2.1
+    specifier: ^2.3.1
     version: 2.3.1(eslint@9.6.0)
   eslint-plugin-vuetify:
     specifier: ^2.1.1
@@ -1451,8 +1451,8 @@ packages:
     resolution: {integrity: sha512-at3kWqPxgNuVFcnoiPEex96/DXG22g6osI+IDNA2ttuBb2SfClDSRlrj/MroVMUfzvLGRzf3IggO5uG98fqiJQ==}
     dev: false
 
-  /@cnamts/synapse-bridge@1.4.5-alpha.0(vue@3.4.31)(vuetify@3.6.11)(vuex@4.1.0):
-    resolution: {integrity: sha512-jMn4Qimqh76udALtZ7I4lZuV82glByGclsZb8cYnCv9Efr32l76G0VRE5qSF73GneGJ0y/vmmLCtlHVwqq7pXg==}
+  /@cnamts/synapse-bridge@1.4.9-alpha.0(vue@3.4.31)(vuetify@3.6.11)(vuex@4.1.0):
+    resolution: {integrity: sha512-8h7syYwx78zTRnNsEjvDVq2EsllFh7y9deI5Yx7E4Los/Ofzn2OdufnNGHpsOrFwFLhu3u6UAInDEWlsNZCDOQ==}
     peerDependencies:
       vue: ^3.4.21
       vuetify: 3.5.10
@@ -2080,8 +2080,8 @@ packages:
       source-map-js: 1.2.0
     dev: false
 
-  /@intlify/shared@10.0.0-beta.2:
-    resolution: {integrity: sha512-u3ey3jn7VZl8SfuBH1nZC1xvdu59/PYkjR6UjXMWiDoowmr/PuPzmIRmOD8jZvRfCbKnKWYRK33HN4uTWLr/Yw==}
+  /@intlify/shared@10.0.0-beta.5:
+    resolution: {integrity: sha512-g9bq5Y1bOcC9qxtNk4UWtF3sXm6Wh0fGISb7vD5aLyF7yQv7ZFjxQjJzBP2GqG/9+PAGYutqjP1GGadNqFtyAQ==}
     engines: {node: '>= 16'}
     dev: false
 
@@ -2917,7 +2917,7 @@ packages:
       '@typescript-eslint/parser': 6.21.0(eslint@9.6.0)(typescript@5.5.3)
       eslint: 9.6.0
       eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@6.21.0)(eslint-plugin-import@2.29.1)(eslint@9.6.0)
-      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.15.0)(eslint@9.6.0)
+      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.21.0)(eslint-import-resolver-typescript@3.6.1)(eslint@9.6.0)
       eslint-plugin-vue: 9.27.0(eslint@9.6.0)
     transitivePeerDependencies:
       - eslint-import-resolver-node
@@ -6386,7 +6386,7 @@ packages:
       enhanced-resolve: 5.17.0
       eslint: 9.6.0
       eslint-module-utils: 2.8.1(@typescript-eslint/parser@6.21.0)(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@9.6.0)
-      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.15.0)(eslint@9.6.0)
+      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.21.0)(eslint-import-resolver-typescript@3.6.1)(eslint@9.6.0)
       fast-glob: 3.3.2
       get-tsconfig: 4.7.5
       is-core-module: 2.14.0
@@ -6428,35 +6428,6 @@ packages:
       - supports-color
     dev: true
 
-  /eslint-module-utils@2.8.1(@typescript-eslint/parser@7.15.0)(eslint-import-resolver-node@0.3.9)(eslint@9.6.0):
-    resolution: {integrity: sha512-rXDXR3h7cs7dy9RNpUlQf80nX31XWJEyGq1tRMo+6GsO5VmTe4UTwtmonAD4ZkAsrfMVDA2wlGJ3790Ys+D49Q==}
-    engines: {node: '>=4'}
-    peerDependencies:
-      '@typescript-eslint/parser': '*'
-      eslint: '*'
-      eslint-import-resolver-node: '*'
-      eslint-import-resolver-typescript: '*'
-      eslint-import-resolver-webpack: '*'
-    peerDependenciesMeta:
-      '@typescript-eslint/parser':
-        optional: true
-      eslint:
-        optional: true
-      eslint-import-resolver-node:
-        optional: true
-      eslint-import-resolver-typescript:
-        optional: true
-      eslint-import-resolver-webpack:
-        optional: true
-    dependencies:
-      '@typescript-eslint/parser': 7.15.0(eslint@9.6.0)(typescript@5.5.3)
-      debug: 3.2.7(supports-color@8.1.1)
-      eslint: 9.6.0
-      eslint-import-resolver-node: 0.3.9
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
   /eslint-plugin-es@3.0.1(eslint@9.6.0):
     resolution: {integrity: sha512-GUmAsJaN4Fc7Gbtl8uOBlayo2DqhwWvEzykMHSCZHU3XdJ+NSzzZcVhXh3VxX5icqQ+oQdIEawXX8xkR3mIFmQ==}
     engines: {node: '>=8.10.0'}
@@ -6536,41 +6507,6 @@ packages:
       - supports-color
     dev: true
 
-  /eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.15.0)(eslint@9.6.0):
-    resolution: {integrity: sha512-BbPC0cuExzhiMo4Ff1BTVwHpjjv28C5R+btTOGaCRC7UEz801up0JadwkeSk5Ued6TG34uaczuVuH6qyy5YUxw==}
-    engines: {node: '>=4'}
-    peerDependencies:
-      '@typescript-eslint/parser': '*'
-      eslint: ^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8
-    peerDependenciesMeta:
-      '@typescript-eslint/parser':
-        optional: true
-    dependencies:
-      '@typescript-eslint/parser': 7.15.0(eslint@9.6.0)(typescript@5.5.3)
-      array-includes: 3.1.8
-      array.prototype.findlastindex: 1.2.5
-      array.prototype.flat: 1.3.2
-      array.prototype.flatmap: 1.3.2
-      debug: 3.2.7(supports-color@8.1.1)
-      doctrine: 2.1.0
-      eslint: 9.6.0
-      eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.8.1(@typescript-eslint/parser@7.15.0)(eslint-import-resolver-node@0.3.9)(eslint@9.6.0)
-      hasown: 2.0.2
-      is-core-module: 2.14.0
-      is-glob: 4.0.3
-      minimatch: 3.1.2
-      object.fromentries: 2.0.8
-      object.groupby: 1.0.3
-      object.values: 1.2.0
-      semver: 6.3.1
-      tsconfig-paths: 3.15.0
-    transitivePeerDependencies:
-      - eslint-import-resolver-typescript
-      - eslint-import-resolver-webpack
-      - supports-color
-    dev: true
-
   /eslint-plugin-jsdoc@48.5.2(eslint@9.6.0):
     resolution: {integrity: sha512-VXBJFviQz30rynlOEQ+dNWLmeopjoAgutUVrWOZwm6Ki4EVDm4XkyIqAV/Zhf7FcDr0AG0aGmRn5FxxCtAF0tA==}
     engines: {node: '>=18'}
@@ -12107,7 +12043,7 @@ packages:
       vue-router:
         optional: true
     dependencies:
-      '@intlify/shared': 10.0.0-beta.2
+      '@intlify/shared': 10.0.0-beta.5
       '@intlify/vue-i18n-bridge': 0.8.0(vue-i18n@9.3.0-beta.27)
       '@intlify/vue-router-bridge': 0.8.0(vue@3.4.31)
       ufo: 1.5.3
diff --git a/src/router/index.ts b/src/router/index.ts
index ec09d4a..70ee8b2 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,13 +1,8 @@
 const routes = [
 	{
-		name: 'index',
 		path: '/',
-		component: () => import('@/views/Home.vue'),
-	},
-	{
 		name: 'home',
-		path: '/home',
-		component: () => import('@/views/Home.vue'),
+		component: () => import('@/views/HomePage.vue'),
 	},
 	{
 		name: 'tokens',
@@ -20,10 +15,195 @@ const routes = [
 		component: () => import('@/views/Maintenance.vue'),
 	},
 	{
-		name: 'not-found',
+		path: '/test-inva',
+		name: 'Test Inva',
+		component: () => import('@/views/TestInva.vue')
+	},
+	{
+		path: '/header',
+		name: 'header',
+		component: () => import('@/views/headers/HeadersPage.vue')
+	},
+	{
+		path: '/footer',
+		name: 'footer',
+		component: () => import('@/views/footers/FootersPage.vue')
+	},
+	{
+		path: '/error',
+		name: 'error',
+		component: () => import('@/views/error/ErrorPage.vue')
+	},
+	{
+		path: '/maintenance',
+		name: 'maintenance',
+		component: () => import('@/views/maintenance/MaintenancePage.vue')
+	},
+	{
 		path: '/not-found',
-		component: () => import('@/views/NotFound.vue'),
+		name: 'not-found',
+		component: () => import('@/views/notFound/NotFoundPage.vue')
+	},
+	{
+		path: '/btns',
+		name: 'btns',
+		component: () => import('@/views/buttons/ButtonsPage.vue')
+	},
+	{
+		path: '/dialog-box',
+		name: 'dialog-box',
+		component: () => import('@/views/dialogBox/DialogBoxPage.vue')
+	},
+	{
+		path: '/nirfield',
+		name: 'nirfield',
+		component: () => import('@/views/nirfield/NirfieldPage.vue')
+	},
+	{
+		path: '/notification-bar',
+		name: 'notification-bar',
+		component: () => import('@/views/notificationBar/NotificationBarPage.vue')
+	},
+	{
+		path: '/period-field',
+		name: 'period-field',
+		component: () => import('@/views/periodField/PeriodFieldPage.vue')
+	},
+	{
+		path: '/date-picker',
+		name: 'date-picker',
+		component: () => import('@/views/datePicker/DatePickerPage.vue')
+	},
+	{
+		path: '/data-list',
+		name: 'data-list',
+		component: () => import('@/views/dataList/dataListPage.vue')
+	},
+	{
+		path: '/cookie-banner',
+		name: 'cookie-banner',
+		component: () => import('@/views/cookieBanner/cookieBannerPage.vue')
+	},
+	{
+		path: '/cookies-page',
+		name: 'cookies-page',
+		component: () => import('@/views/cookiesPage/CookiesPage.vue')
+	},
+	{
+		path: '/password-field',
+		name: 'password-field',
+		component: () => import('@/views/password/PasswordPage.vue')
+	},
+	{
+		path:'/colors',
+		name:'colors',
+		component: () => import('@/views/colors/ColorsPage.vue')
+	},
+	{
+		path:'/rating-picker',
+		name:'rating',
+		component: () => import('@/views/ratingPicker/RatingPickerPage.vue')
+	},
+	{
+		path:'/alert-wrapper',
+		name:'alert-wrapper',
+		component: () => import('@/views/alertWrapper/AlertWrapperPage.vue')
+	},
+	{
+		path:'/custom-icon',
+		name:'custom-icon',
+		component: () => import('@/views/customIcon/CustomIconPage.vue')
+	},
+	{
+		path:'/external-link',
+		name:'external-link',
+		component: () => import('@/views/externalLink/ExternalLinkPage.vue')
+	},
+	{
+		path:'/file-list',
+		name:'file-list',
+		component: () => import('@/views/fileList/FileListPage.vue')
+	},
+	{
+		path:'/paginated-table',
+		name:'paginated-table',
+		component: () => import('@/views/paginatedTable/PaginatedTablePage.vue')
+	},
+	{
+		path:'/filter-inline',
+		name:'filter-inline',
+		component: () => import('@/views/filtersInline/FiltersInlinePage.vue')
+	},
+	{
+		path:'/chip-list',
+		name:'chip-list',
+		component: () => import('@/views/chipList/ChipListPage.vue')
+	},
+	{
+		path:'/file-upload',
+		name:'file-upload',
+		component: () => import('@/views/fileUpload/FileUploadPage.vue')
+	},
+	{
+		path:'/filter-module',
+		name:'Filter module',
+		component: () => import('@/views/filterModule/FilterModulePage.vue')
+	},
+	{
+		path:'/filter-side-bar',
+		name:'Filter Side Bar',
+		component: () => import('@/views/filtersSidebar/FilterSideBarPage.vue')
+	},
+	{
+		path:'/filter-side-bar',
+		name:'Filter Side Bar',
+		component: () => import('@/views/filtersSidebar/FilterSideBarPage.vue')
+	},
+	{
+		path: '/footer-wrapper',
+		name: 'footer-wrapper',
+		component: () => import('@/views/footerWrapper/FooterWrapperPage.vue')
+	},
+	{
+		path: '/logo',
+		name: 'Logo',
+		component: () => import('@/views/logo/LogoPage.vue')
+	},
+	{
+		path: '/phone-field',
+		name: 'Phone Field',
+		component: () => import('@/views/phoneField/PhoneFieldPage.vue')
+	},
+	{
+		path: '/range-field',
+		name: 'Range Field',
+		component: () => import('@/views/rangeField/RangeFieldPage.vue')
+	},
+	{
+		path: '/search-list-field',
+		name: 'Search List Field',
+		component: () => import('@/views/searchListField/SearchListFieldPage.vue')
+	},
+	{
+		path: '/skip-link',
+		name: 'Skip Link',
+		component: () => import('@/views/skipLink/SkipLinkPage.vue')
+	},
+	{
+		path: '/subHeader',
+		name: 'subHeader',
+		component: () => import('@/views/subHeader/SubHeaderPage.vue')
+	},
+	{
+		path: '/tableToolbar',
+		name: 'tableToolbar',
+		component: () => import('@/views/tableToolbar/TableToolbarPage.vue')
+	},
+	{
+		path: '/uploadWorflow',
+		name: 'uploadWorflow',
+		component: () => import('@/views/uploadWorkflow/UploadWorkflowPage.vue')
 	},
-]
+];
 
 export default routes
diff --git a/src/views/HomePage.vue b/src/views/HomePage.vue
new file mode 100644
index 0000000..275ea6c
--- /dev/null
+++ b/src/views/HomePage.vue
@@ -0,0 +1,230 @@
+<template>
+<!--	<SubHeader-->
+  <!--		hide-back-btn-->
+  <!--		title-text="Welcome !"-->
+  <!--		sub-title-text="1 69 08 75 125 456 75"/>-->
+	<PageContainer>
+		<div>
+			<img src="../views/assets/images/synapse.webp" alt="Synapse design system illustration"/>
+<!--			<div class="mt-4">-->
+<!--				<h2>Logo</h2>-->
+<!--				<Logo/>-->
+<!--			</div>-->
+<!--			<div class="bg-grey-lighten-1 mt-4 my-4">-->
+<!--				<h2>HeaderLoading</h2>-->
+<!--				<HeaderLoading width="300px" height="30px"/>-->
+<!--			</div>-->
+<!--			<div class="mt-4 my-4">-->
+<!--				<h2>Logo Brand Section</h2>-->
+<!--				<LogoBrandSection-->
+<!--					service-sub-title="Documentation du Design System"-->
+<!--					service-title="Design System"-->
+<!--				/>-->
+<!--			</div>-->
+<!--			<div class="mt-4 my-4 bg-grey-lighten-1">-->
+<!--				<h2>ChipList</h2>-->
+<!--				<ChipList :items="chipItems"/>-->
+<!--			</div>-->
+		</div>
+	</PageContainer>
+	<FooterBar
+		hide-a11y-link
+		hide-cgu-link
+		hide-cookies-link
+		hide-legal-notice-link
+		hide-sitemap-link
+	>
+		<p class="text-secondary mb-0">Contenu supplémentaire.</p>
+	</FooterBar>
+	<FooterWrapper>
+		<VBtn variant="tonal" class="mr-6">
+			Mentions légales
+		</VBtn>
+
+		<VBtn variant="tonal" class="mr-6">
+			CGU
+		</VBtn>
+
+		<VBtn variant="tonal" inert>
+			Version 1.0.0
+		</VBtn>
+	</FooterWrapper>
+</template>
+
+<script lang="ts">
+import {defineComponent} from "vue";
+import { mapActions, mapGetters } from "vuex";
+import { required } from "@cnamts/synapse-bridge/rules/required";
+import { notAfterToday } from "@cnamts/synapse-bridge/rules/notAfterToday";
+import { notBeforeToday } from "@cnamts/synapse-bridge/rules/notBeforeToday";
+import dayjs from "dayjs";
+import {
+	PageContainer,
+	HeaderBar,
+	FooterBar,
+	DataList,
+	DataListGroup,
+	UserMenuBtn,
+	DialogBox,
+	FooterWrapper,
+	SubHeader,
+	BackBtn,
+	FranceConnectBtn,
+	CopyBtn,
+	Logo,
+	HeaderLoading,
+	BackToTopBtn,
+	CookieBanner,
+	CookiesPage,
+	LogoBrandSection,
+	ChipList,
+	NotificationBar,
+	ErrorPage,
+	MaintenancePage,
+	NotFoundPage,
+	PasswordField,
+	DatePicker,
+	PeriodField
+} from "@cnamts/synapse-bridge";
+import AppHeader from "@/views/commons/AppHeader.vue";
+
+export default defineComponent({
+	components: {
+		AppHeader,
+		PageContainer,
+		HeaderBar,
+		FooterBar,
+		UserMenuBtn,
+		DialogBox,
+		DataList,
+		DataListGroup,
+		FooterWrapper,
+		SubHeader,
+		BackBtn,
+		FranceConnectBtn,
+		CopyBtn,
+		Logo,
+		HeaderLoading,
+		BackToTopBtn,
+		CookieBanner,
+		CookiesPage,
+		LogoBrandSection,
+		ChipList,
+		NotificationBar,
+		ErrorPage,
+		MaintenancePage,
+		NotFoundPage,
+		PasswordField,
+		DatePicker,
+		PeriodField
+	},
+	data() {
+		return {
+			validRules: [required],
+			warningRules: [notAfterToday, notBeforeToday],
+			hint: 'Date de hint',
+			active: true,
+			dialog: false,
+			chipItems: [
+				{text: 'Item 1', value: 'item1'},
+				{text: 'Item 2', value: 'item2'},
+				{text: 'Item 3', value: 'item3'},
+			],
+			dataListItems: [
+				{
+					key: 'Nom',
+					value: 'Dupont',
+				},
+				{
+					key: 'Prénom',
+					value: 'Paul',
+				},
+				{
+					key: 'Date de naissance',
+					value: '24/09/1970',
+				},
+			],
+			dataListGroupItems: [
+				{
+					title: 'Informations patient',
+					items: [
+						{
+							key: 'Nom',
+							value: 'Dupont',
+							icon: 'accountIcon',
+							chip: true
+						},
+						{
+							key: 'Prénom',
+							value: 'Paul',
+							icon: 'accountIcon'
+						},
+						{
+							key: 'Date de naissance',
+							value: '24/09/1970',
+							icon: 'calendarIcon',
+							action: 'Modifier'
+						}
+					]
+				},
+				{
+					title: 'Médecin traitant',
+					items: [
+						{
+							key: 'Nom du praticien',
+							value: 'Gérard Leblanc',
+							icon: 'doctorIcon'
+						},
+
+						{
+							key: 'N° RPPS',
+							value: 'XXXXX',
+							icon: 'cardAccountIcon'
+						}
+					]
+				},
+				{
+					title: 'Autres informations',
+					items: [
+						{
+							key: 'Dernière modification',
+							value: '04/06/2020',
+							icon: 'editIcon'
+						}
+					]
+				}
+			],
+			password: null as string | null,
+			periodFieldDate: ['01/05/2024', '13/05/2024'],
+			datePickerdate: null,
+			date:[dayjs().format('DD/MM/YYYY'), dayjs().add(12, 'day').format('DD/MM/YYYY')],
+			date2: [dayjs().format('DD/MM/YYYY'), dayjs().add(3, 'day').format('DD/MM/YYYY')],
+			date3: [dayjs().format('DD/MM/YYYY'), dayjs().add(5, 'day').format('DD/MM/YYYY')],
+			changingDate: [dayjs().format('YYYY/MM/DD'), dayjs().add(5, 'day').format('YYYY/MM/DD')]
+		}
+	},
+	computed: {
+		...mapGetters('notification', {
+			notification: 'notification',
+		}),
+	},
+	methods: {
+		...mapActions('notification', {
+			dispatchNotification: 'addNotification',
+			dispatchClearNotification: 'clearNotification',
+		}),
+		createNotification(): void {
+			this.dispatchNotification({
+				type: 'info',
+				message: 'Exemple de notification.',
+			})
+		},
+		removeNotification(): void {
+			this.dispatchClearNotification();
+		},
+		getValue(value: string): void {
+			console.log(value);
+		}
+	}
+});
+</script>
diff --git a/src/views/TestInva.vue b/src/views/TestInva.vue
new file mode 100644
index 0000000..77a1272
--- /dev/null
+++ b/src/views/TestInva.vue
@@ -0,0 +1,108 @@
+<template>
+	<V-Alert
+		class="mx-6 my-4"
+		border="start"
+		color="primary"
+		title="Changement de theme"
+		variant="tonal"
+	>
+	<p>Pour tester le changement de theme, il faut modifier la valeur theme dans le fichier : public/json/config.env.json (vuetify ou bootstrap)</p>
+	</V-Alert>
+	<PageContainer>
+		<BackBtn to="/"/>
+		<h1 class="text-primary">{{ $config.public.title }}</h1>
+		<HelloWorld :msg="$config.public.message"/>
+		<VBtn color="primary">
+			Primary
+		</VBtn>
+		<VBtn color="secondary">
+			secondary
+		</VBtn>
+		<VBtn color="info">
+			Info
+		</VBtn>
+		<VBtn color="success">
+			Success
+		</VBtn>
+		<VBtn color="warning">
+			Warning
+		</VBtn>
+		<VBtn color="error">
+			Error
+		</VBtn>
+		<VBtn color="accent">
+			Accent
+		</VBtn>
+		<VBtn color="light">
+			Light
+		</VBtn>
+		<VBtn color="dark">
+			Dark
+		</VBtn>
+		<VBtn color="risquePro">
+			Risque Pro
+		</VBtn>
+		<VBtn class="inva">
+			Violet inva
+		</VBtn>
+
+		<br /><br />
+
+		<SubHeader
+			sub-title-text="1 69 08 75 125 456 75"
+			title-text="Paul Dupont"
+		/>
+
+		<br /><br />
+
+		<v-alert type="success">
+			Message de succès
+		</v-alert>
+	</PageContainer>
+	<FooterBar
+		hide-a11y-link
+		hide-cgu-link
+		hide-cookies-link
+		hide-legal-notice-link
+		hide-sitemap-link
+	>
+		<p class="text-secondary mb-0">Contenu supplémentaire.</p>
+	</FooterBar>
+</template>
+
+<script lang="ts">
+import {BackBtn, PageContainer, HeaderBar, FooterBar, SubHeader} from "@cnamts/synapse-bridge";
+import AppHeader from "@/views/commons/AppHeader.vue";
+export default defineNuxtComponent({
+	components: {
+		AppHeader,
+		BackBtn,
+		PageContainer,
+		HeaderBar,
+		FooterBar,
+		SubHeader
+	},
+	data () {
+		return {
+			theme: 'bootstrap', // default theme
+		}
+	},
+	methods: {
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+@import '@cnamts/design-tokens/dist/tokens';
+// custom styles
+.warning {
+	color: black !important;
+}
+.dark {
+	color: white !important;
+}
+.inva {
+	background-color: $vd-mauve-darken-60 !important;
+	color: white;
+}
+</style>
diff --git a/src/views/alertWrapper/AlertWrapperPage.vue b/src/views/alertWrapper/AlertWrapperPage.vue
new file mode 100644
index 0000000..5c558de
--- /dev/null
+++ b/src/views/alertWrapper/AlertWrapperPage.vue
@@ -0,0 +1,91 @@
+<template>
+	<PageContainer>
+		<AlertWrapper type="info">
+			Il semble qu’une date de naissance erronée a été saisie,
+			renseignez-vous auprès du centre qui vous a vacciné.
+		</AlertWrapper>
+
+		<br />
+
+		<AlertWrapper type="info" outlined>
+			Il semble qu’une date de naissance erronée a été saisie,
+			renseignez-vous auprès du centre qui vous a vacciné.
+		</AlertWrapper>
+
+		<br />
+
+		<AlertWrapper type="success">
+			Il semble qu’une date de naissance erronée a été saisie,
+			renseignez-vous auprès du centre qui vous a vacciné.
+		</AlertWrapper>
+
+		<br />
+
+		<AlertWrapper type="success" outlined>
+			Il semble qu’une date de naissance erronée a été saisie,
+			renseignez-vous auprès du centre qui vous a vacciné.
+		</AlertWrapper>
+
+		<br />
+
+		<AlertWrapper type="error" v-model="alert" dismissible>
+			Il semble qu’une date de naissance erronée a été saisie,
+			renseignez-vous auprès du centre qui vous a vacciné.
+		</AlertWrapper>
+
+		<br />
+
+		<AlertWrapper type="error" outlined>
+			Il semble qu’une date de naissance erronée a été saisie,
+			renseignez-vous auprès du centre qui vous a vacciné.
+		</AlertWrapper>
+
+		<br />
+
+		<AlertWrapper type="warning">
+			Il semble qu’une date de naissance erronée a été saisie,
+			renseignez-vous auprès du centre qui vous a vacciné.
+		</AlertWrapper>
+
+		<br />
+
+		<AlertWrapper
+			v-model="alert"
+			dismissible
+			outlined
+			type="warning"
+			class="mb-0"
+		>
+			Il semble qu’une date de naissance erronée a été saisie,
+			renseignez-vous auprès du centre qui vous a vacciné.
+		</AlertWrapper>
+
+		<VBtn v-if="!alert" color="primary" @click="alert = true">
+			Réinitialiser
+		</VBtn>
+	</PageContainer>
+</template>
+
+<script lang="ts">
+import {defineComponent} from "vue";
+import {
+	PageContainer,
+	HeaderBar,
+	AlertWrapper,
+} from "@cnamts/synapse-bridge";
+import AppHeader from "@/views/commons/AppHeader.vue";
+
+export default defineComponent({
+	components: {
+		AppHeader,
+		PageContainer,
+		HeaderBar,
+		AlertWrapper,
+	},
+	data() {
+		return {
+			alert: true,
+		}
+	},
+});
+</script>
diff --git a/src/views/assets/images/synapse.webp b/src/views/assets/images/synapse.webp
new file mode 100644
index 0000000..d40af32
Binary files /dev/null and b/src/views/assets/images/synapse.webp differ
diff --git a/src/views/buttons/ButtonsPage.vue b/src/views/buttons/ButtonsPage.vue
new file mode 100644
index 0000000..8b778fe
--- /dev/null
+++ b/src/views/buttons/ButtonsPage.vue
@@ -0,0 +1,266 @@
+<template>
+	<PageContainer class="h-35">
+		<h2>Back Btn</h2>
+		<div class="d-flex justify-sm-space-between">
+			<BackBtn />
+			<VSheet color="primary" class="pa-4">
+				<BackBtn dark />
+			</VSheet>
+
+			<BackBtn>
+				<template #default> Précédent </template>
+
+				<template #icon>
+					<VIcon>
+						{{ backIcon }}
+					</VIcon>
+				</template>
+			</BackBtn>
+		</div>
+		<h2>User Menu Btn</h2>
+		<div class="d-flex justify-sm-space-between">
+			<UserMenuBtn
+				additional-information="Information supplémentaire"
+				full-name="Virginie Beauchesne"
+			/>
+			<UserMenuBtn full-name="Édith Cartier">
+				<VListItem
+					v-for="(item, index) in items"
+					:key="index"
+				>
+					<VListItemTitle>{{ item }}</VListItemTitle>
+				</VListItem>
+			</UserMenuBtn>
+			<br/><br/>
+			<UserMenuBtn
+				additional-information="Information supplémentaire"
+				full-name="Virginie Beauchesne"
+				mobile-version
+			/>
+			<br/><br/>
+			<UserMenuBtn
+				:vuetify-options="vuetifyOptionsUserMenuBtn"
+				full-name="Édith Cartier"
+			>
+				<VListItem
+					v-for="(item, index) in items"
+					:key="index"
+				>
+					<VListItemTitle>{{ item }}</VListItemTitle>
+				</VListItem>
+			</UserMenuBtn>
+		</div>
+		<h2>France connect Btn</h2>
+		<div class="d-flex justify-sm-space-between">
+			<FranceConnectBtn href="https://app.franceconnect.gouv.fr/" />
+			<br />
+			<FranceConnectBtn
+				connect-plus
+				href="https://app.franceconnect.gouv.fr/"
+			/>
+		</div>
+		<h2>CopyBtn</h2>
+		<div class="d-flex justify-sm-space-between">
+		<CopyBtn
+			label="Copier le numéro de dossier"
+			text-to-copy="example-2"
+		/>
+			<CopyBtn
+				label="Copier le numéro de dossier"
+				:text-to-copy="() => 'example-1'"
+			/>
+
+			<CopyBtn
+				label="Copier le numéro de dossier"
+				text-to-copy="example-2"
+			/>
+
+			<CopyBtn
+				label="Copier le numéro de patient"
+				text-to-copy="example-3"
+				hide-tooltip
+			/>
+
+			<CopyBtn
+				:tooltip-duration="5000"
+				label="Copier le numéro de patient"
+				text-to-copy="example-4"
+			/>
+
+			<CopyBtn
+				label="Copier le numéro de ticket"
+				text-to-copy="example-6"
+			>
+				<template #icon>
+					<VIcon>
+						{{ mdiContentDuplicate }}
+					</VIcon>
+				</template>
+
+				<template #tooltip>
+					Le texte a bien été copié
+				</template>
+			</CopyBtn>
+
+			<CopyBtn
+				:vuetify-options="vuetifyOptions"
+				label="Copier le numéro d'utilisateur"
+				text-to-copy="example-5"
+			/>
+		</div>
+		<h2>DownLoad Btn</h2>
+		<div>
+			<DownloadBtn
+				notification="Super !"
+				:file-promise="getFileFromApi"
+				:fallback-filename="fallbackFilename"
+			>
+				Télécharger mon attestation
+			</DownloadBtn>
+
+			<DownloadBtn
+				:file-promise="getFileFromApi"
+				:vuetify-options="vuetifyOptions"
+				:outlined="false"
+				tile
+				color="white"
+				width="396px"
+				class="text-primary"
+			>
+				<VIcon
+					color="grey"
+					class="flex-shrink-0 mr-2"
+					:class="{ 'd-none': $vuetify.display.smAndDown }"
+				>
+					{{ fileIcon }}
+				</VIcon>
+
+				justificatif.txt
+
+				<VSpacer class="ml-2" />
+
+				<VIcon
+					color="primary"
+					class="flex-shrink-0"
+				>
+					{{ downloadIcon }}
+				</VIcon>
+			</DownloadBtn>
+
+			<NotificationBar />
+		</div>
+	</PageContainer>
+	<FooterBar
+		hide-a11y-link
+		hide-cgu-link
+		hide-cookies-link
+		hide-legal-notice-link
+		hide-sitemap-link
+	>
+		<p class="text--secondary mb-0">Contenu supplémentaire.</p>
+	</FooterBar>
+</template>
+
+<script lang="ts">
+import {defineComponent} from "vue";
+import { mdiContentDuplicate, mdiChevronLeft, mdiDownload, mdiFile } from "@mdi/js";
+import {
+	PageContainer,
+	UserMenuBtn,
+	BackBtn,
+	FranceConnectBtn,
+	CopyBtn,
+	BackToTopBtn,
+	DownloadBtn,
+	NotificationBar
+} from "@cnamts/synapse-bridge";
+import {AxiosResponse} from "axios";
+
+const file: AxiosResponse<Blob> = {
+	data: new Blob(['test'], { type: 'text/plain' }),
+	status: 200,
+	statusText: 'OK',
+	headers: {
+		'content-type': 'text/plain'
+	},
+	config: {
+		headers: {
+			'Accept': 'application/json, text/plain, */*'
+		} as any
+	}
+};
+export default defineComponent({
+	components: {
+		PageContainer,
+		UserMenuBtn,
+		BackBtn,
+		FranceConnectBtn,
+		CopyBtn,
+		BackToTopBtn,
+		DownloadBtn,
+		NotificationBar
+	},
+	data() {
+		return {
+			downloadIcon: mdiDownload,
+			fileIcon: mdiFile,
+
+			vuetifyOptions: {
+				icon: {
+					class: 'd-none'
+				},
+				btn: {
+					height: 'auto',
+					minHeight: '56px'
+				}
+			},
+			useFallback: true,
+			backIcon:mdiChevronLeft,
+			items: [
+				'Administration',
+				'Profil',
+				'Paramètres'
+			],
+			vuetifyOptions: {
+				menu: {
+					location: 'bottom center',
+					offset: 2
+				},
+				btn: {
+					density: 'default'
+				},
+				icon: {
+					color: 'indigo'
+				}
+			},
+			vuetifyOptionsUserMenuBtn: {
+				menu: {
+					minWidth: '264px',
+					maxWidth: '264px'
+				},
+				btn: {
+					variant: 'outlined',
+				},
+				icon: {
+					color: 'primary'
+				},
+				logoutIcon: {
+					class: 'd-none'
+				}
+			},
+		}
+	},
+	computed: {
+		fallbackFilename(): string {
+			return this.useFallback ? 'test.txt' : '';
+		}
+	},
+	methods: {
+		getFileFromApi(): Promise<AxiosResponse<Blob>> {
+			return new Promise((resolve) => {
+				setTimeout(() => resolve(file), 1500);
+			});
+		},
+	}
+});
+</script>
diff --git a/src/views/chipList/ChipListPage.vue b/src/views/chipList/ChipListPage.vue
new file mode 100644
index 0000000..494c405
--- /dev/null
+++ b/src/views/chipList/ChipListPage.vue
@@ -0,0 +1,42 @@
+<template>
+	<ChipList :items="items" />
+
+	{{ removedElement }} {{ reseted}}
+	<ChipList
+		:items="items"
+		:overflow-limit="2"
+		@remove="remove($event)"
+		@reset="reset"
+	/>
+</template>
+
+<script lang="ts">
+import {defineComponent} from "vue";
+import {
+	ChipList,
+} from "@cnamts/synapse-bridge";
+export default defineComponent({
+	components: {
+		ChipList,
+	},
+	data() {
+		return {
+			items: [
+				{ text: 'Item 1', value: 'item1' },
+				{ text: 'Item 2', value: 'item2' },
+				{ text: 'Item 3', value: 'item3' },
+			],
+			removedElement: null,
+			reseted: null as string | null
+		}
+	},
+	methods: {
+		remove(item: any) {
+			this.removedElement = item
+		},
+		reset () {
+			this.reseted = 'Reseted'
+		}
+	}
+});
+</script>
diff --git a/src/views/colors/ColorsPage.vue b/src/views/colors/ColorsPage.vue
new file mode 100644
index 0000000..373f88a
--- /dev/null
+++ b/src/views/colors/ColorsPage.vue
@@ -0,0 +1,6 @@
+<template>
+	<ColorPalette />
+</template>
+<script setup lang="ts">
+import ColorPalette from "@/views/commons/ColorPalette.vue";
+</script>
diff --git a/src/views/commons/AppHeader.vue b/src/views/commons/AppHeader.vue
new file mode 100644
index 0000000..8d28913
--- /dev/null
+++ b/src/views/commons/AppHeader.vue
@@ -0,0 +1,21 @@
+<template>
+	<HeaderBar
+		service-title="Design System"
+		service-sub-title="Documentation du Design System"
+		:navigation-items="navigationItems"
+	/>
+</template>
+<script setup lang="ts">
+import { HeaderBar } from "@cnamts/synapse-bridge";
+import routes from '@/router/';
+
+const generateNavigationItems = () => {
+	return routes.map(route => ({
+		label: route.name.replace(/-/g, ' ').replace(/\b\w/g, l => l.toUpperCase()),
+		to: route.path
+	})).filter(item => item.to !== '/')
+		.sort((a, b) => a.label.localeCompare(b.label));
+};
+
+const navigationItems = generateNavigationItems();
+</script>
diff --git a/src/views/commons/ColorPalette.vue b/src/views/commons/ColorPalette.vue
new file mode 100644
index 0000000..c950af4
--- /dev/null
+++ b/src/views/commons/ColorPalette.vue
@@ -0,0 +1,140 @@
+<template>
+	<AppHeader/>
+	<PageContainer>
+		<BackBtn to="/"/>
+		<V-Alert
+			class="mx-6 my-4"
+			border="start"
+			color="primary"
+			title="Font:"
+			variant="tonal"
+		>
+			<p>font-family: "Source Sans 3", "Source Sans Pro", sans-serif</p>
+		</V-Alert>
+		<h1 class="py-8">Heading:</h1>
+		<div :style="{ color: selectedColor, backgroundColor: '#e0e7f2' }" class="text-center">
+			<h1 class="my-1">h1. Design system heading</h1>
+			<h2 class="my-1">h2. Design system heading</h2>
+			<h3 class="my-1">h3. Design system heading</h3>
+			<h4 class="my-1">h4. Design system heading</h4>
+			<h5 class="my-1">h5. Design system heading</h5>
+			<h6 class="my-1">h6. Design system heading</h6>
+		</div>
+		<v-row class="mx-auto">
+			<div
+				v-for="(color, index) in colors"
+				:key="index"
+				:aria-label="`Select ${color.name} color`"
+				:style="{ backgroundColor: color.color, color: isDarkColor(color.color) ? 'white' : 'black' }"
+				class="text-center my-auto ml-4 mr-2 color-box mt-6"
+				role="button"
+				@click="selectColor(color.color)"
+			>
+				{{ color.name }}
+			</div>
+		</v-row>
+		<h1 class="py-8">Color Palette du theme Vuetify:</h1>
+		<v-row v-for="(colorGroup, group) in groupedColors" :key="group">
+			<v-col
+				v-for="(color, name) in colorGroup"
+				:key="name"
+				class="d-flex child-flex color-box"
+				:style="{ backgroundColor: color, color: isDarkColor(color) ? 'white' : 'black' }"
+			>
+				<div class="text-center">
+					{{ name }}
+				</div>
+			</v-col>
+		</v-row>
+	</PageContainer>
+	<FooterBar
+		hide-a11y-link
+		hide-cgu-link
+		hide-cookies-link
+		hide-legal-notice-link
+		hide-sitemap-link
+	>
+		<p class="text-secondary">Contenu supplémentaire.</p>
+	</FooterBar>
+</template>
+
+<script lang="ts">
+import {defineComponent} from 'vue';
+import {BackBtn, FooterBar, PageContainer} from "@cnamts/synapse-bridge";
+import AppHeader from "@/views/commons/AppHeader.vue";
+
+export default defineComponent({
+	name: 'ColorPalette',
+	components: {AppHeader, BackBtn, FooterBar, PageContainer},
+	data() {
+		return {
+			colors: [
+				{color: '#1F50A2', name: 'Primary'},
+				{color: '#146F8F', name: 'Secondary'},
+				{color: '#1F50A2', name: 'Info'},
+				{color: '#56c271', name: 'Sucess'},
+				{color: '#f0b323', name: 'Warning'},
+				{color: '#b33f2e', name: 'Error'},
+				{color: '#00a5df', name: 'Accent'},
+				{color: '#ffffff', name: 'Light'},
+				{color: '#ffffff', name: 'Dark'},
+				{color: '#cd545b', name: 'Risque Pro'},
+				{color: '#482D50', name: 'Violet INVA'},
+			],
+			selectedColor: '',
+		};
+	},
+	computed: {
+		groupedColors() {
+			const colors: Record<string, any> = this.$vuetify.theme.themes.light ? this.$vuetify.theme.themes.light.colors : {};
+			const grouped: Record<string, any> = {};
+			for (const color in colors) {
+				if (color) {
+					const group = color.split('-')[0]; // Get the group name (e.g., 'blue', 'cyan')
+					if (group && !grouped[group]) {
+						grouped[group] = {};
+					}
+					if (group) {
+						grouped[group][color] = colors[color];
+					}
+				}
+			}
+			return grouped;
+		},
+	},
+	methods: {
+		selectColor(color: string) {
+			this.selectedColor = color;
+			this.$emit('color-selected', color);
+		},
+		isDarkColor(color: any) {
+			const c = color.substring(1);  // strip #
+			const rgb = parseInt(c, 16);   // convert rrggbb to decimal
+			const r = (rgb >> 16) & 0xff;  // extract red
+			const g = (rgb >>  8) & 0xff;  // extract green
+			const b = (rgb >>  0) & 0xff;  // extract blue
+
+			const luma = 0.2126 * r + 0.7152 * g + 0.0722 * b; // per ITU-R BT.709
+
+			return luma < 128;
+		}
+	},
+});
+</script>
+
+<style scoped>
+.color-box {
+	width: 120px;
+	min-height: 50px;
+	margin: 10px;
+	padding: 10px;
+	cursor: pointer;
+	border: black 1px solid;
+	border-radius: 15px;
+	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
+	transition: all 0.3s;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+</style>
diff --git a/src/views/cookieBanner/cookieBannerPage.vue b/src/views/cookieBanner/cookieBannerPage.vue
new file mode 100644
index 0000000..87d1b5c
--- /dev/null
+++ b/src/views/cookieBanner/cookieBannerPage.vue
@@ -0,0 +1,107 @@
+<template>
+	<PageContainer>
+		<CookieBanner
+			v-if="active1"
+			cookies-route="/templates/cookies-page"
+			@reject="active1 = false"
+			@accept="active1 = false"
+		/>
+
+		<CookieBanner
+			v-if="active2"
+			:vuetify-options="vuetifyOptions"
+			cookies-route="/templates/cookies-page"
+			@reject="active2 = false"
+			@accept="active2 = false"
+		/>
+
+		<CookieBanner
+			v-if="active3"
+			cookies-route="/templates/cookies-page"
+			@reject="active3 = false"
+			@accept="active3 = false"
+		>
+			Ce téléservice utilise des cookies en enregistrant certaines informations lors de votre navigation.
+		</CookieBanner>
+
+		<VBtn
+			v-if="!active1"
+			color="primary"
+			@click="active1 = true"
+		>
+			Réinitialiser 1
+		</VBtn>
+		<VBtn
+			v-if="!active3"
+			color="primary"
+			@click="active2 = !active2"
+		>
+			Réinitialiser 2
+		</VBtn>
+		<VBtn
+			v-if="!active3"
+			color="primary"
+			@click="active3 = !active2"
+		>
+			Réinitialiser 3
+		</VBtn>
+	</PageContainer>
+	<FooterBar
+		hide-a11y-link
+		hide-cgu-link
+		hide-cookies-link
+		hide-legal-notice-link
+		hide-sitemap-link
+	>
+		<p class="text--secondary mb-0">Contenu supplémentaire.</p>
+	</FooterBar>
+</template>
+
+<script lang="ts">
+import {defineComponent} from "vue";
+import {
+	PageContainer,
+	HeaderBar,
+	FooterBar,
+	CookieBanner,
+} from "@cnamts/synapse-bridge";
+import AppHeader from "@/views/commons/AppHeader.vue";
+
+export default defineComponent({
+	components: {
+		AppHeader,
+		PageContainer,
+		HeaderBar,
+		CookieBanner,
+	},
+	data() {
+		return {
+			vuetifyOptions: {
+				sheet: {
+					elevation: 5
+				},
+				customizeBtn: {
+					variant: 'text',
+					outlined: false
+				},
+				rejectBtn: {
+					outlined: true
+				},
+				acceptBtn: {
+					outlined: true
+				}
+			},
+			active1:true,
+			active2: false,
+			active3: false
+		}
+	},
+	computed: {
+	},
+	methods: {
+	}
+});
+</script>
+
+<style>
+</style>
diff --git a/src/views/cookiesPage/CookiesPage.vue b/src/views/cookiesPage/CookiesPage.vue
new file mode 100644
index 0000000..ac0de5d
--- /dev/null
+++ b/src/views/cookiesPage/CookiesPage.vue
@@ -0,0 +1,50 @@
+<template>
+	<CookiesPage :items="cookiesList" />
+</template>
+
+<script lang="ts">
+import {defineComponent} from "vue";
+import {
+	CookiesPage, TypeEnum
+} from "@cnamts/synapse-bridge";
+
+import type { CookiesPageItems } from '@cnamts/synapse-bridge/src/templates/CookiesPage/types';
+
+export default defineComponent({
+	components: {
+		CookiesPage,
+	},
+	data() {
+		return {
+			cookiesList: {
+				[TypeEnum.ESSENTIALS]: [
+					{
+						name: 'session',
+						description: 'Sauvegarde la session pour rester connecté.',
+						conservation: '20 heures',
+					},
+					{
+						name: 'cookie_policy',
+						description: 'Sauvegarde les préférences de cookies.',
+						conservation: '1 an',
+					},
+				],
+				[TypeEnum.FUNCTIONAL]: [
+					{
+						name: 'contrast',
+						description: 'Sauvegarde la personnalisation de l’affichage.',
+						conservation: '1 an',
+					},
+				],
+				[TypeEnum.ANALYTICS]: [
+					{
+						name: 'user_id',
+						description: 'Sauvegarde l’identifiant unique de visiteur.',
+						conservation: '6 mois',
+					},
+				]
+			} satisfies CookiesPageItems
+		}
+	}
+});
+</script>
diff --git a/src/views/cookiesPage/PageCookiesPage.vue b/src/views/cookiesPage/PageCookiesPage.vue
new file mode 100644
index 0000000..00d6860
--- /dev/null
+++ b/src/views/cookiesPage/PageCookiesPage.vue
@@ -0,0 +1,3 @@
+<template>
+
+</template>
diff --git a/src/views/customIcon/CustomIconPage.vue b/src/views/customIcon/CustomIconPage.vue
new file mode 100644
index 0000000..7ad01b6
--- /dev/null
+++ b/src/views/customIcon/CustomIconPage.vue
@@ -0,0 +1,90 @@
+<template>
+	<PageContainer>
+		<div class="d-flex justify-sm-space-around my-12">
+			<CustomIcon icon="digital" :color="color" x-large />
+			<CustomIcon icon="digital" :color="color" large />
+			<CustomIcon icon="digital" :color="color" medium />
+			<CustomIcon icon="digital" :color="color" small />
+			<CustomIcon icon="digital" :color="color" size="100px" />
+			<CustomIcon icon="digital" :color="color" label="toto" />
+			<CustomIcon icon="digital" :color="'red'" x-large />
+			<CustomIcon size="38px">
+				<svg viewBox="0 0 400 400">
+					<path
+						fill="#4dba87"
+						d="M237.42 86.66L207.19 139l-30.22-52.35H76.3l130.9 226.69L338.07 86.66z"
+					/>
+
+					<path
+						fill="#435466"
+						d="M237.42 86.66L207.19 139l-30.22-52.35h-48.3l78.52 136 78.53-136z"
+					/>
+				</svg>
+			</CustomIcon>
+			<CustomIcon size="38px" color="red">
+				<svg viewBox="0 0 400 400">
+					<path
+						fill="currentcolor"
+						d="M237.42 86.66L207.19 139l-30.22-52.35H76.3l130.9 226.69L338.07 86.66z"
+					/>
+
+					<path
+						fill="#435466"
+						d="M237.42 86.66L207.19 139l-30.22-52.35h-48.3l78.52 136 78.53-136z"
+					/>
+				</svg>
+			</CustomIcon>
+		</div>
+
+
+<div class="d-flex justify-sm-space-around my-12">
+	<CustomIcon icon="recap_check" :color="color" large />
+	<CustomIcon icon="user_ps" :color="color" large />
+	<CustomIcon icon="user" :color="color" large />
+	<CustomIcon icon="arrow_down" :color="color" large />
+	<CustomIcon icon="calendar" :color="color" large />
+	<CustomIcon icon="helpon" :color="color" large />
+	<CustomIcon icon="helpoff" :color="color" large />
+	<CustomIcon icon="info" :color="color" large />
+	<CustomIcon icon="warning" :color="color" large />
+	<CustomIcon icon="separator" :color="color" large />
+	<CustomIcon icon="delete" :color="color" large />
+	<CustomIcon icon="arrow_right" :color="color" large />
+	<CustomIcon icon="arrow_drop_down" :color="color" large />
+	<CustomIcon icon="launch" :color="color" large />
+	<CustomIcon icon="csv" :color="color" large />
+</div>
+
+	</PageContainer>
+</template>
+
+<script lang="ts">
+import {defineComponent} from "vue";
+import { tokens } from "@cnamts/design-tokens";
+import {
+	PageContainer,
+	HeaderBar,
+	CustomIcon,
+} from "@cnamts/synapse-bridge";
+import AppHeader from "@/views/commons/AppHeader.vue";
+
+export default defineComponent({
+	components: {
+		CustomIcon,
+		PageContainer,
+		HeaderBar,
+	},
+	data() {
+		return {
+			color: tokens.colors.primary
+		}
+	},
+	computed: {
+	},
+	methods: {
+	}
+});
+</script>
+
+<style>
+</style>
diff --git a/src/views/dataList/dataListPage.vue b/src/views/dataList/dataListPage.vue
new file mode 100644
index 0000000..faf7741
--- /dev/null
+++ b/src/views/dataList/dataListPage.vue
@@ -0,0 +1,310 @@
+<template>
+	<PageContainer>
+		<h2>Sans icone</h2>
+		<div class="d-flex">
+			<DataList :items="items" />
+			<DataList
+				:items="items"
+				row
+			/>
+			<DataList
+				:items="items"
+				loading
+			/>
+			<DataList
+				:items="items"
+				loading
+				row
+			/>
+			<DataList
+				:items="items"
+				heading-loading
+				loading
+			/>
+			<DataList
+				:items="items"
+				:items-number-loading="4"
+				loading
+			/>
+			<DataList
+				:items="items"
+				list-title="Exemple"
+			/>
+		</div>
+		<div class="d-flex">
+			<h2>Avec icone</h2>
+			<DataList
+				:items="itemsWithIcons"
+				:icons="icons"
+			/>
+		</div>
+		<div class="d-flex">
+			<h2>Avec action</h2>
+			<DataList
+				:items="itemsWithActions"
+				@click:item-action="updateBirthdate"
+			/>
+		</div>
+		<div class="d-flex">
+			<h2>Avec chips</h2>
+			<DataList :items="itemsWithChips" />
+		</div>
+		<div class="d-flex">
+
+			<DataList
+				:items="itemsWithHtmlValues"
+				item-width="auto"
+				render-html-value
+			/>
+
+			<DataList
+				:items="itemsWithOptions"
+				:icons="icons"
+			/>
+
+			<DataList :items="items">
+				<template #title>
+					<h3 class="text-subtitle-1 font-weight-bold mb-3">
+						Liste de données
+
+						<VTooltip bottom>
+							<template #activator="{ props }">
+								<VIcon v-bind="props">
+									{{ icons.mdiInformationOutline }}
+								</VIcon>
+							</template>
+
+							<span>Cette liste contient des données concernant le patient.</span>
+						</VTooltip>
+					</h3>
+				</template>
+			</DataList>
+		</div>
+		<div>
+			<h2> DataList group</h2>
+			<DataListGroup
+				:items="itemsList"
+				:icons="iconsList"
+				@click:list-item="updateBirthdate"
+			/>
+			<br /><br />
+			<DataListGroup
+				:items="itemsList"
+				item-width="300px"
+			/>
+			<br /><br />
+			<DataListGroup
+				:items="itemsList"
+				loading
+			/>
+		</div>
+	</PageContainer>
+	<FooterBar
+		hide-a11y-link
+		hide-cgu-link
+		hide-cookies-link
+		hide-legal-notice-link
+		hide-sitemap-link
+	>
+		<p class="text--secondary mb-0">Contenu supplémentaire.</p>
+	</FooterBar>
+</template>
+
+<script lang="ts">
+import {defineComponent} from "vue";
+import { mdiCalendar, mdiAccount, mdiInformationOutline, mdiDoctor, mdiCardAccountDetails, mdiPencil } from '@mdi/js'
+import { PageContainer, FooterBar, DataList, DataListGroup} from "@cnamts/synapse-bridge";
+
+export default defineComponent({
+	components: { PageContainer, FooterBar, DataList, DataListGroup },
+	data() {
+		return {
+			items: [
+				{
+					key: 'Nom',
+					value: 'Dupont',
+				},
+				{
+					key: 'Prénom',
+					value: 'Paul',
+				},
+				{
+					key: 'Date de naissance',
+					value: '24/09/1970',
+				},
+			],
+			itemsWithIcons: [
+				{
+					key: 'Nom',
+					value: 'Dupont',
+					icon: 'accountIcon',
+				},
+				{
+					key: 'Prénom',
+					value: 'Paul',
+					icon: 'accountIcon',
+				},
+				{
+					key: 'Date de naissance',
+					value: '24/09/1970',
+					icon: 'calendarIcon',
+				},
+			],
+			icons: {
+				calendarIcon: mdiCalendar,
+				accountIcon: mdiAccount,
+				mdiInformationOutline: mdiInformationOutline,
+			},
+			itemsWithChips:[
+				{
+					key: 'Nom',
+					value: 'Dupont',
+					chip: true,
+				},
+				{
+					key: 'Prénom',
+					value: 'Paul',
+					chip: true,
+				},
+				{
+					key: 'Date de naissance',
+					value: '24/09/1970',
+					chip: true,
+				},
+				{
+					key: 'Statut',
+					value: 'Enregistré',
+					chip: true,
+					options: {
+						chip: {
+							color: 'success',
+						},
+					},
+				},
+			],
+			itemsWithHtmlValues: [
+				{
+					key: 'Nom',
+					value: 'Dupont',
+				},
+				{
+					key: 'Prénom',
+					value: 'Paul',
+				},
+				{
+					key: 'Adresse',
+					value: '50 Avenue du Professeur André Lemierre<br>75020 Paris',
+				},
+			],
+			itemOptions: {
+				icon: {
+					color: 'grey-darken-20',
+					class: 'mt-0 mr-4',
+				},
+			},
+			itemsWithOptions:[
+				{
+					key: 'Nom',
+					value: 'Dupont',
+					icon: 'accountIcon',
+					chip: true,
+					options: this.itemOptions,
+				},
+				{
+					key: 'Prénom',
+					value: 'Paul',
+					icon: 'accountIcon',
+					chip: true,
+					options: this.itemOptions,
+				},
+				{
+					key: 'Date de naissance',
+					value: '24/09/1970',
+					icon: 'calendarIcon',
+					chip: true,
+					options: this.itemOptions,
+				},
+			],
+			itemsWithActions: [
+				{
+					key: 'Nom',
+					value: 'Dupont',
+				},
+				{
+					key: 'Prénom',
+					value: 'Paul',
+				},
+				{
+					key: 'Date de naissance',
+					value: '24/09/1970',
+					action: 'Modifier',
+				},
+			],
+			itemsList: [
+				{
+					title: 'Informations patient',
+					items: [
+						{
+							key: 'Nom',
+							value: 'Dupont',
+							icon: 'accountIcon',
+							chip: true
+						},
+						{
+							key: 'Prénom',
+							value: 'Paul',
+							icon: 'accountIcon'
+						},
+						{
+							key: 'Date de naissance',
+							value: '24/09/1970',
+							icon: 'calendarIcon',
+							action: 'Modifier'
+						}
+					]
+				},
+				{
+					title: 'Médecin traitant',
+					items: [
+						{
+							key: 'Nom du praticien',
+							value: 'Gérard Leblanc',
+							icon: 'doctorIcon'
+						},
+
+						{
+							key: 'N° RPPS',
+							value: 'XXXXX',
+							icon: 'cardAccountIcon'
+						}
+					]
+				},
+				{
+					title: 'Autres informations',
+					items: [
+						{
+							key: 'Dernière modification',
+							value: '04/06/2020',
+							icon: 'editIcon'
+						}
+					]
+				}
+			],
+			iconsList: {
+				calendarIcon: mdiCalendar,
+				accountIcon: mdiAccount,
+				doctorIcon: mdiDoctor,
+				cardAccountIcon: mdiCardAccountDetails,
+				editIcon: mdiPencil
+			}
+		}
+	},
+	computed: {
+	},
+	methods: {
+		updateBirthdate(itemIndex: number): void {
+			this.itemsWithActions[itemIndex].value = '01/01/1970'
+		}
+	}
+});
+</script>
diff --git a/src/views/datePicker/DatePickerPage.vue b/src/views/datePicker/DatePickerPage.vue
new file mode 100644
index 0000000..6968f28
--- /dev/null
+++ b/src/views/datePicker/DatePickerPage.vue
@@ -0,0 +1,205 @@
+<template>
+	<PageContainer>
+		<div class="d-flex justify-sm-space-around">
+			<div class="wide-column">
+				<h3>Range</h3>
+				<DatePicker
+					v-model="datePickerdate"
+					range
+				/>
+				<h3>Mandatory</h3>
+				<date-picker v-model="date" :rules="validRules" label="Date"/>
+				<h3>Warning Rules</h3>
+				<date-picker v-model="date" :warning-rules="warningRules" hint="defaultHint" label="Date" outlined/>
+
+				<h3>No Calendar</h3>
+				<date-picker v-model="date" :hint="defaultHint" label="Date" no-calendar/>
+
+				<h3>TextField Activator</h3>
+				<date-picker v-model="date" :hint="defaultHint" label="Date" text-field-activator/>
+
+				<h3 class="mt-4">Show weekends</h3>
+				<date-picker v-model="date" :hint="defaultHint" label="Date" show-weekends/>
+
+				<h3 class="mt-4">Disabled</h3>
+				<date-picker v-model="date" :hint="defaultHint" disabled label="Date"/>
+			</div>
+			<div class="min-w-100">
+			<h3 class="mt-4">Outlined</h3>
+			<date-picker v-model="date" :hint="defaultHint" label="Date" outlined/>
+
+			<h3 class="mt-4">Birthdate</h3>
+			<date-picker v-model="date" :hint="defaultHint" birthdate label="Date d'anniversaire"/>
+
+			<h3 class="mt-4">Range</h3>
+			<div class="wide-column">
+				{{ dateRange }}
+				<date-picker
+					v-model="dateRange"
+					clearable
+					outlined
+					range
+				/>
+			</div>
+
+			<h3 class="mt-4">DateFormat</h3>
+			{{ dateToFormat }}
+			<date-picker v-model="dateToFormat" dateFormat="DD-MM-YYYY" hint="JJ-MM-YYYY" label="Date"/>
+			<h3 class="mt-4">DateFormatReturn JJ/MM/YY</h3>
+			{{ dateFormatReturn }}
+			<date-picker v-model="dateFormatReturn" :hint="defaultHint" dateFormatReturn="DD/MM/YY" label="Date"/>
+			</div>
+		</div>
+	</PageContainer>
+	<FooterBar
+		hide-a11y-link
+		hide-cgu-link
+		hide-cookies-link
+		hide-legal-notice-link
+		hide-sitemap-link
+	>
+		<p class="text-secondary mb-0">Contenu supplémentaire.</p>
+	</FooterBar>
+</template>
+
+<script lang="ts">
+import {defineComponent} from "vue";
+import {mapActions, mapGetters} from "vuex";
+import {required} from "@cnamts/synapse-bridge/rules/required";
+import {notAfterToday} from "@cnamts/synapse-bridge/rules/notAfterToday";
+import {notBeforeToday} from "@cnamts/synapse-bridge/rules/notBeforeToday";
+import dayjs from "dayjs";
+import {
+	DatePicker,
+	FooterBar,
+	PageContainer,
+} from "@cnamts/synapse-bridge";
+
+export default defineComponent({
+	components: {
+		PageContainer,
+		FooterBar,
+		DatePicker,
+	},
+	data() {
+		return {
+			validRules: [required],
+			warningRules: [notAfterToday, notBeforeToday],
+			active: true,
+			dialog: false,
+			chipItems: [
+				{text: 'Item 1', value: 'item1'},
+				{text: 'Item 2', value: 'item2'},
+				{text: 'Item 3', value: 'item3'},
+			],
+			dataListItems: [
+				{
+					key: 'Nom',
+					value: 'Dupont',
+				},
+				{
+					key: 'Prénom',
+					value: 'Paul',
+				},
+				{
+					key: 'Date de naissance',
+					value: '24/09/1970',
+				},
+			],
+			dataListGroupItems: [
+				{
+					title: 'Informations patient',
+					items: [
+						{
+							key: 'Nom',
+							value: 'Dupont',
+							icon: 'accountIcon',
+							chip: true
+						},
+						{
+							key: 'Prénom',
+							value: 'Paul',
+							icon: 'accountIcon'
+						},
+						{
+							key: 'Date de naissance',
+							value: '24/09/1970',
+							icon: 'calendarIcon',
+							action: 'Modifier'
+						}
+					]
+				},
+				{
+					title: 'Médecin traitant',
+					items: [
+						{
+							key: 'Nom du praticien',
+							value: 'Gérard Leblanc',
+							icon: 'doctorIcon'
+						},
+
+						{
+							key: 'N° RPPS',
+							value: 'XXXXX',
+							icon: 'cardAccountIcon'
+						}
+					]
+				},
+				{
+					title: 'Autres informations',
+					items: [
+						{
+							key: 'Dernière modification',
+							value: '04/06/2020',
+							icon: 'editIcon'
+						}
+					]
+				}
+			],
+			datePickerdate: null,
+			date: [dayjs().format('DD/MM/YYYY'), dayjs().add(12, 'day').format('DD/MM/YYYY')],
+			date2: [dayjs().format('DD/MM/YYYY'), dayjs().add(3, 'day').format('DD/MM/YYYY')],
+			date3: [dayjs().format('DD/MM/YYYY'), dayjs().add(5, 'day').format('DD/MM/YYYY')],
+			date1: dayjs().add(2, 'day').format('DD/MM/YYYY'),
+			dateRange:[dayjs().format('DD/MM/YYYY'), dayjs().add(12, 'day').format('DD/MM/YYYY')],
+			startDate: null,
+			endDate: null,
+			dateDefinie: dayjs().format('DD/MM/YYYY'),
+			dateToFormat: dayjs().format('DD/MM/YYYY'),
+			dateFormatReturn: dayjs().format('DD/MM/YYYY'),
+			notAfterTodayRules: [notAfterToday],
+			notBeforeTodayRules: [notBeforeToday],
+			defaultHint: "Format JJ/MM/YYYY",
+		}
+	},
+	computed: {
+		...mapGetters('notification', {
+			notification: 'notification',
+		}),
+	},
+	methods: {
+		...mapActions('notification', {
+			dispatchNotification: 'addNotification',
+			dispatchClearNotification: 'clearNotification',
+		}),
+		createNotification(): void {
+			this.dispatchNotification({
+				type: 'info',
+				message: 'Exemple de notification.',
+			})
+		},
+		removeNotification(): void {
+			this.dispatchClearNotification();
+		},
+		getValue(value: string): void {
+			console.log(value);
+		}
+	}
+});
+</script>
+
+<style scoped>
+.wide-column {
+	width: 400px !important;
+}
+</style>
diff --git a/src/views/dialogBox/DialogBoxPage.vue b/src/views/dialogBox/DialogBoxPage.vue
new file mode 100644
index 0000000..bba665a
--- /dev/null
+++ b/src/views/dialogBox/DialogBoxPage.vue
@@ -0,0 +1,94 @@
+<template>
+	<PageContainer>
+		<div class="d-flex justify-sm-space-around my-12">
+			<VBtn
+				color="primary"
+				@click="dialog = true"
+			>
+				Afficher le composant
+			</VBtn>
+
+			<DialogBox
+				v-model="dialog"
+				:width="dialogWidth"
+				title="Enregistrement"
+				@cancel="dialog = false"
+				@confirm="dialog = false"
+			>
+				<p>Souhaitez-vous procéder à l’enregistrement ?</p>
+			</DialogBox>
+
+			<br /><br />
+
+			<VBtn
+				color="primary"
+				@click="dialog2 = true"
+			>
+				Afficher le composant
+			</VBtn>
+
+			<DialogBox
+				v-model="dialog2"
+				:width="dialogWidth2"
+				title="Enregistrement"
+				cancel-btn-text="Retour"
+				confirm-btn-text="Enregistrer"
+				@cancel="dialog2 = false"
+				@confirm="dialog2 = false"
+			>
+				<p>Souhaitez-vous procéder à l’enregistrement ?</p>
+			</DialogBox>
+
+			<br /><br />
+
+			<VBtn
+				color="primary"
+				@click="dialog3 = true"
+			>
+				Afficher le composant
+			</VBtn>
+
+			<DialogBox
+				v-model="dialog3"
+				title="Enregistrement"
+				hide-actions
+			>
+				<p class="mb-1">
+					Souhaitez-vous procéder à l’enregistrement ?
+				</p>
+			</DialogBox>
+		</div>
+	</PageContainer>
+</template>
+
+<script lang="ts">
+import {defineComponent} from "vue";
+import { tokens } from '@cnamts/design-tokens';
+import {
+	PageContainer,
+	DialogBox,
+
+} from "@cnamts/synapse-bridge";
+import AppHeader from "@/views/commons/AppHeader.vue";
+
+export default defineComponent({
+	components: {
+		AppHeader,
+		PageContainer,
+		DialogBox,
+	},
+	data() {
+		return {
+			dialog: false,
+			dialogWidth: tokens.dialogWidth.dialogSmall,
+			dialog2: false,
+			dialogWidth2: tokens.dialogWidth.dialogMedium,
+			dialog3: false,
+		}
+	},
+	computed: {
+	},
+	methods: {
+	}
+});
+</script>
diff --git a/src/views/error/ErrorPage.vue b/src/views/error/ErrorPage.vue
new file mode 100644
index 0000000..07218b3
--- /dev/null
+++ b/src/views/error/ErrorPage.vue
@@ -0,0 +1,47 @@
+<template>
+	<PageContainer>
+		<ErrorPage
+			code="500"
+			message="La page ne fonctionne pas correctement."
+			page-title="Erreur serveur"
+			btn-route="/"
+		/>
+
+		<ErrorPage
+			page-title="Page non trouvée"
+			message="Il semblerait qu’il y ait eu une erreur !"
+			code="404"
+			no-btn
+		/>
+
+		<ErrorPage
+			code="404"
+			page-title="Page non trouvée"
+			message="Cette page n’existe pas ou a été déplacée."
+			btn-route="/"
+		/>
+	</PageContainer>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import {
+	PageContainer,
+	ErrorPage,
+} from "@cnamts/synapse-bridge";
+
+export default defineComponent({
+	components: {
+		PageContainer,
+		ErrorPage,
+	},
+	data() {
+		return {
+		}
+	},
+	computed: {
+	},
+	methods: {
+	}
+});
+</script>
diff --git a/src/views/externalLink/ExternalLinkPage.vue b/src/views/externalLink/ExternalLinkPage.vue
new file mode 100644
index 0000000..f4c710e
--- /dev/null
+++ b/src/views/externalLink/ExternalLinkPage.vue
@@ -0,0 +1,45 @@
+<template>
+	<PageContainer>
+		<div>
+			<ExternalLinks :items="links" position="top left" />
+			<ExternalLinks :items="links" nudge-top="80px" position="top right" />
+			<ExternalLinks :items="links2" btn-text="Afficher pas de données" nudge-top="80px" position="top left" />
+		</div>
+	</PageContainer>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import {PageContainer, ExternalLinks } from "@cnamts/synapse-bridge";
+import { tokens } from '@cnamts/design-tokens';
+import type { ExternalLink } from '@cnamts/synapse-bridge/src/elements/ExternalLinks/types';
+export default defineComponent({
+	components: {
+		PageContainer,
+		ExternalLinks
+	},
+	data() {
+		return {
+			appBarColor: tokens.colors.amBlue.lighten97,
+			links: [
+				{
+					href: 'https://ameli.fr/',
+					text: 'Ameli'
+				},
+				{
+					href: 'https://espacepro.ameli.fr/',
+					text: 'Ameli Pro'
+				}
+			] as ExternalLink[],
+			links2: [] as ExternalLink[]
+		}
+	},
+	computed: {
+	},
+	methods: {
+	}
+});
+</script>
+
+<style scoped>
+</style>
diff --git a/src/views/fileList/FileListPage.vue b/src/views/fileList/FileListPage.vue
new file mode 100644
index 0000000..1b859e5
--- /dev/null
+++ b/src/views/fileList/FileListPage.vue
@@ -0,0 +1,72 @@
+<template>
+	<PageContainer>
+		<FileList :files="fileList" />
+	<br /><br />
+	<FileList :files="fileList2" />
+	<br /><br />
+	<FileList
+		:files="fileList2"
+		show-view-btn
+		hide-last-divider
+	/>
+	<br /><br />
+	<FileList
+		:files="fileList2"
+		show-view-btn
+		hide-delete-btn
+	/>
+	</PageContainer>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import {PageContainer, FileList } from "@cnamts/synapse-bridge";
+import type { FileItem } from "@cnamts/synapse-bridge/src/elements/FileList/types";
+export default defineComponent({
+	components: {
+		PageContainer,
+		FileList
+	},
+	data() {
+		return {
+			fileList: [
+				{
+					title: "RIB",
+					state: "initial",
+				},
+				{
+					title: "Carte d’identité recto / verso",
+					state: "initial",
+					optional: true
+				},
+				{
+					title: "Passport",
+					state: "initial",
+				},
+			] as FileItem[],
+
+			fileList2: [
+				{
+					title: "RIB",
+					name: "rib.pdf",
+					state: "success",
+				},
+				{
+					title: "Carte d’identité recto / verso",
+					name: "carte-identite.jpg",
+					state: "success",
+				},
+				{
+					title: "Passport",
+					name: "passport.jpg",
+					state: "error",
+				},
+			] as FileItem[],
+		}
+	},
+	computed: {
+	},
+	methods: {
+	}
+});
+</script>
diff --git a/src/views/fileUpload/FileUploadPage.vue b/src/views/fileUpload/FileUploadPage.vue
new file mode 100644
index 0000000..2645645
--- /dev/null
+++ b/src/views/fileUpload/FileUploadPage.vue
@@ -0,0 +1,168 @@
+<template>
+	<div>
+		<FileUpload v-model="file1" :class="{ 'mb-8': file1 !== null }" />
+		<FilePreview :file="file1" />
+		<FilePreview :file="file2" :options="options" />
+		<FilePreview :file="file3" />
+		<FilePreview :file="file3">
+			<template #default>
+				Ce format ne convient pas.
+			</template>
+		</FilePreview>
+
+		<br /><br />
+
+		<FileUpload multiple @update:model-value="console.log" />
+		<FileUpload v-model="file1" no-ripple />
+		<FileUpload v-model="file1" disabled />
+
+		<br /><br />
+
+		<FileUpload
+			v-model="file1"
+			v-bind="props"
+			@error="showError"
+			@change="valueUpdated"
+		/>
+
+		<VSnackbar
+			v-if="snackbarText"
+			v-model="snackbar"
+			:color="snackbarColor"
+		>
+			{{ snackbarText }}
+
+			<template #actions>
+				<VBtn
+					variant="text"
+					@click="snackbar = false"
+				>
+					Fermer
+				</VBtn>
+			</template>
+		</VSnackbar>
+
+		<br /><br />
+
+		<FileUpload v-model="file1">
+			<template #icon>
+				<VIcon
+					large
+					color="primary"
+				>
+					{{ downloadIcon }}
+				</VIcon>
+			</template>
+
+			<template #action-text>
+				Glissez un fichier ici
+			</template>
+
+			<template #or>
+				Sinon
+			</template>
+
+			<template #button-text>
+				Sélectionnez un fichier
+			</template>
+
+			<template #info-text>
+				Fichier PDF de 1 Mo maximum accepté
+			</template>
+		</FileUpload>
+
+		<br /><br />
+
+		<FileUpload class="bg-accent elevation-3 px-4 py-3">
+			<template #placeholder>
+				<span class="d-flex align-center text-white">
+					<VIcon
+						size="25"
+						color="white"
+						class="icon mr-4"
+					>
+						{{ uploadIcon }}
+					</VIcon>
+
+					Sélectionner un fichier
+				</span>
+			</template>
+		</FileUpload>
+	</div>
+</template>
+
+<script lang="ts">
+import {defineComponent} from "vue";
+import {
+	FileUpload,
+	FilePreview
+} from "@cnamts/synapse-bridge";
+import { ErrorEvent, ErrorCodesType } from '@cnamts/synapse-bridge/src/patterns/FileUpload/types';
+import { mdiFileUpload, mdiCloudUpload } from '@mdi/js';
+export default defineComponent({
+	components: {
+		FileUpload,
+		FilePreview
+	},
+	data() {
+		return {
+			file1: null as File | null,
+			file2: null as Blob | null,
+			file3: new File(['exemple'], 'example.txt'),
+			options: {
+				image: {
+					alt: "Photo de paysage montagneux du site Picsum.",
+					width: "100%"
+				},
+			},
+			snackbar: false as boolean,
+			snackbarText: null as string | null,
+			snackbarColor: 'success',
+			props: {
+				fileSizeMax: 4096 * 1024,
+				fileSizeUnits: [
+					'o',
+					'Ko',
+					'Mo'
+				],
+				allowedExtensions: [
+					'pdf'
+				]
+			},
+			errorsText: {
+				MULTIPLE_FILES_SELECTED: 'Vous ne pouvez sélectionner qu’un seul fichier.',
+				FILE_TOO_LARGE: 'Le fichier sélectionné est trop volumineux.',
+				FILE_EXTENSION_NOT_ALLOWED: 'L’extension du fichier sélectionné n’est pas autorisée.'
+			} as ErrorCodesType,
+			downloadIcon: mdiFileUpload,
+			uploadIcon: mdiCloudUpload
+		};
+	},
+	mounted() {
+		fetch("https://picsum.photos/seed/picsum/750/350")
+			.then((res) => res.blob())
+			.then((blob) => (this.file2 = blob));
+	},
+	methods: {
+		showError(error: ErrorEvent): void {
+			this.snackbarText = this.errorsText[error.code] || error.code;
+			this.snackbarColor = 'error';
+			this.snackbar = true;
+		},
+		valueUpdated(file: File): void {
+			this.snackbarText =  `Le fichier "${file.name}" a été accepté.`;
+			this.snackbarColor = 'success';
+			this.snackbar = true;
+		}
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.icon {
+	flex: none;
+}
+.text-white {
+	color: white;
+}
+</style>
diff --git a/src/views/filterModule/FilterModulePage.vue b/src/views/filterModule/FilterModulePage.vue
new file mode 100644
index 0000000..6ea0249
--- /dev/null
+++ b/src/views/filterModule/FilterModulePage.vue
@@ -0,0 +1,171 @@
+<template>
+	<VDataTable
+		:headers="headers"
+		:items="filteredItem"
+		:search="search"
+		hide-default-footer
+	>
+		<template #top>
+			<TableToolbar
+				v-model:search="search"
+				:nb-total="items.length"
+			>
+				<template #search-left>
+					<FilterModule
+						:filters="filters"
+						class="mr-4"
+						@filter-list="displayFilters"
+					/>
+				</template>
+			</TableToolbar>
+		</template>
+	</VDataTable>
+	<FilterModule :filters="filters2"/>
+</template>
+
+<script lang="ts">
+import {defineComponent} from "vue";
+import {
+	TableToolbar,
+	FilterModule
+} from "@cnamts/synapse-bridge";
+import { Field } from '@cnamts/synapse-bridge/src/form-builder/FormField/types';
+import { DataTableHeaders } from '@cnamts/synapse-bridge/src/patterns/PaginatedTable/types';
+interface TableItem {
+	[key: string]: string;
+	firstname: string;
+	lastname: string;
+	email: string;
+}
+export default defineComponent({
+	components: {
+		TableToolbar,
+		FilterModule
+	},
+	data() {
+		return {
+			search: '' as string | undefined,
+			headers: [
+				{
+					title: "Nom",
+					key: "lastname",
+				},
+				{
+					title: "Prénom",
+					key: "firstname",
+				},
+				{
+					title: "Email",
+					key: "email",
+				},
+			] as DataTableHeaders[],
+			items: [
+				{
+					firstname: 'Virginie',
+					lastname: 'Beauchesne',
+					email: 'virginie.beauchesne@example.com'
+				},
+				{
+					firstname: 'Étienne',
+					lastname: 'Salois',
+					email: 'etienne.salois@example.com'
+				}
+			] as TableItem[],
+			filteredItem: [] as TableItem[],
+			filters: [
+				{
+					type: 'text',
+					value: null,
+					fieldOptions: {
+						variant: 'outlined',
+						hideDetails: true,
+						key: 'lastname',
+						label: 'Nom',
+						filterTitle: 'Nom'
+					}
+				},
+				{
+					type: 'text',
+					value: null,
+					fieldOptions: {
+						variant: 'outlined',
+						hideDetails: true,
+						key: 'firstname',
+						label: 'Prénom',
+						filterTitle: 'Prénom'
+					}
+				}
+			] as Field[],
+			filters2: [
+				{
+					type: 'select',
+					multiple: true,
+					dynamic: true,
+					items: [
+						{
+							text: 'Email',
+							value: 'email'
+						},
+						{
+							text: 'Courrier',
+							value: 'mail'
+						},
+						{
+							text: 'SMS',
+							value: 'sms'
+						}
+					],
+					value: null,
+					fieldOptions: {
+						variant: 'outlined',
+						label: 'Moyen de contact',
+						filterTitle: 'Moyen de contact'
+					}
+				},
+				{
+					type: 'range',
+					min: 0,
+					max: 100,
+					value: null,
+					fieldOptions: {
+						variant: 'outlined',
+						filterTitle: 'Intervalle'
+					}
+				},
+				{
+					type: 'text',
+					value: null,
+					fieldOptions: {
+						variant: 'outlined',
+						hideDetails: true,
+						label: 'Nom',
+						filterTitle: 'Nom'
+					}
+				}
+			] as Field[],
+		}
+	},
+	mounted() {
+		this.filteredItem = this.items;
+	},
+	methods: {
+		displayFilters(filters: Field[]): void {
+			console.log('event', filters);
+			if (filters.length === 0) {
+				this.filteredItem = this.items;
+				return;
+			}
+			filters.forEach(({ value, fieldOptions }: Field) => {
+				if (value === null || !fieldOptions) {
+					return;
+				}
+				this.filteredItem = this.items.filter(element => {
+					const itemValue = element[fieldOptions.key as string];
+					const filterValue = value as string;
+					return itemValue?.toLowerCase().match(filterValue.toLowerCase());
+				});
+			});
+		}
+	}
+});
+</script>
diff --git a/src/views/filtersInline/FiltersInlinePage.vue b/src/views/filtersInline/FiltersInlinePage.vue
new file mode 100644
index 0000000..4d9f1fb
--- /dev/null
+++ b/src/views/filtersInline/FiltersInlinePage.vue
@@ -0,0 +1,109 @@
+<template>
+	<FiltersInline v-model="filters">
+		<template #name="{ attrs }">
+			<VTextField
+				v-bind="attrs"
+				label="Nom"
+				color="primary"
+				variant="outlined"
+				hide-details
+			/>
+		</template>
+
+		<template #folder="{ attrs }">
+			<p class="text-secondary mb-4">
+				Vous pouvez filtrer entre les dossiers de type
+				<b>Arrêt de Travail (AT)</b> et
+				<b>Maladie Professionnelle (MP)</b> ou <b>Autre</b>.
+			</p>
+			<VSelect
+				v-bind="attrs"
+				:items="folderTypes"
+				color="primary"
+				label="Type de dossier"
+				multiple
+				variant="outlined"
+				return-object
+				hide-details
+			/>
+		</template>
+
+		<template #checkbox="{ attrs }">
+			<v-radio-group v-bind="attrs">
+				<v-radio label="Option One" value="one" color="primary"></v-radio>
+				<v-radio label="Option 2 (string)" value="2" color="primary"></v-radio>
+				<v-radio :value="3" label="Option 3 (integer)" color="primary"></v-radio>
+			</v-radio-group>
+		</template>
+	</FiltersInline>
+</template>
+
+<script lang="ts">
+import {defineComponent} from "vue";
+import {
+	FiltersInline,
+} from "@cnamts/synapse-bridge";
+export default defineComponent({
+	components: {
+		FiltersInline,
+	},
+	data() {
+		return {
+			filters: [
+				{
+					name: "name",
+					title: "Identité",
+				},
+				{
+					name: "folder",
+					title: "Type de dossier",
+				},
+				{
+					name: "checkbox",
+					title: "Checkbox",
+				}
+			],
+			folderTypes: [
+				{
+					title: "AT",
+					value: "at",
+				},
+				{
+					title: "MP",
+					value: "mp",
+				},
+				{
+					title: "Autre",
+					value: "other",
+				},
+			],
+			professionList: [
+				{
+					label: "Chirurgien-dentiste",
+					value: "chirurgien-dentiste",
+				},
+				{
+					label: "Infirmier",
+					value: "infirmier",
+				},
+				{
+					label: "Orthophoniste",
+					value: "orthophoniste",
+				},
+				{
+					label: "Orthoptiste",
+					value: "orthoptiste",
+				},
+				{
+					label: "Pédicure-podologue",
+					value: "pedicure-podologue",
+				},
+				{
+					label: "Pharmacien",
+					value: "pharmacien",
+				},
+			],
+		};
+	},
+});
+</script>
diff --git a/src/views/filtersSidebar/FilterSideBarPage.vue b/src/views/filtersSidebar/FilterSideBarPage.vue
new file mode 100644
index 0000000..f882e20
--- /dev/null
+++ b/src/views/filtersSidebar/FilterSideBarPage.vue
@@ -0,0 +1,145 @@
+<template>
+	<FiltersSideBar v-model="filters">
+		<template #name="{ attrs }">
+			<VTextField
+				v-bind="attrs"
+				color="primary"
+				label="Nom"
+				variant="outlined"
+				hide-details
+			/>
+		</template>
+
+		<template #folder="{ attrs }">
+			<p class="text-secondary">
+				Vous pouvez filtrer entre les dossiers de type
+				<b>Arrêt de Travail (AT)</b> et
+				<b>Maladie Professionnelle (MP)</b> ou <b>Autre</b>.
+			</p>
+
+			<VSelect
+				v-bind="attrs"
+				:items="folderTypes"
+				color="primary"
+				label="Type de dossier"
+				multiple
+				variant="outlined"
+				return-object
+				hide-details
+			/>
+		</template>
+
+		<template #updated-at="{ attrs }">
+			<DatePicker
+				v-bind="attrs"
+				v-model="date"
+				label="Date de mise à jour"
+				outlined
+			/>
+		</template>
+
+		<template #period="{ attrs }">
+			<PeriodField v-bind="attrs" outlined />
+		</template>
+
+		<template #profession="{ attrs }">
+			<SearchListField
+				v-bind="attrs"
+				:items="professionList"
+			/>
+		</template>
+	</FiltersSideBar>
+</template>
+
+<script lang="ts">
+import {defineComponent} from "vue";
+import {
+	FiltersSideBar,
+	DatePicker,
+	PeriodField,
+	SearchListField
+} from "@cnamts/synapse-bridge";
+import { ChipItem } from "@cnamts/synapse-bridge/src/elements/ChipList/types";
+import dayjs from "dayjs";
+export default defineComponent({
+	components: {
+		FiltersSideBar,
+		DatePicker,
+		PeriodField,
+		SearchListField
+	},
+	data() {
+		return {
+			filters: [
+				{
+					name: "name",
+					title: "Identité",
+				},
+				{
+					name: "folder",
+					title: "Type de dossier",
+				},
+				{
+					name: 'updated-at',
+					title: 'Mise à jour'
+				},
+				{
+					name: "period",
+					title: "Période",
+					formatChip: ([min, max]: [number, number]): ChipItem[] => [
+						{
+							text: `Du ${min} au ${max}`,
+							value: [min, max]
+						}
+					]
+				},
+				{
+					name: "profession",
+					title: "Profession",
+				},
+			],
+			folderTypes: [
+				{
+					title: "AT",
+					value: "at",
+				},
+				{
+					title: "MP",
+					value: "mp",
+				},
+				{
+					title: "Autre",
+					value: "other",
+				},
+			],
+			professionList: [
+				{
+					label: "Chirurgien-dentiste",
+					value: "chirurgien-dentiste",
+				},
+				{
+					label: "Infirmier",
+					value: "infirmier",
+				},
+				{
+					label: "Orthophoniste",
+					value: "orthophoniste",
+				},
+				{
+					label: "Orthoptiste",
+					value: "orthoptiste",
+				},
+				{
+					label: "Pédicure-podologue",
+					value: "pedicure-podologue",
+				},
+				{
+					label: "Pharmacien",
+					value: "pharmacien",
+				},
+			],
+			date: dayjs().toDate(),
+		};
+	},
+});
+</script>
diff --git a/src/views/footerWrapper/FooterWrapperPage.vue b/src/views/footerWrapper/FooterWrapperPage.vue
new file mode 100644
index 0000000..b069198
--- /dev/null
+++ b/src/views/footerWrapper/FooterWrapperPage.vue
@@ -0,0 +1,56 @@
+<template>
+	<FooterWrapper>
+		<FooterBtn>
+			Mentions légales
+		</FooterBtn>
+
+		<FooterBtn>
+			CGU
+		</FooterBtn>
+
+		<FooterBtn inert>
+			Version 1.0.0
+		</FooterBtn>
+	</FooterWrapper>
+
+	<FooterWrapper>
+		<FooterBtn>
+			CGU
+		</FooterBtn>
+
+		<FooterBtn inert>
+			Version 1
+		</FooterBtn>
+
+		<FooterBtn inert>
+			28/05/2020
+		</FooterBtn>
+	</FooterWrapper>
+
+	<FooterWrapper>
+		<VRow>
+			<VSpacer />
+
+			<p class="mb-0">
+				Version 1
+			</p>
+		</VRow>
+	</FooterWrapper>
+</template>
+
+<script lang="ts">
+import {defineComponent} from "vue";
+import { FooterWrapper, FooterBtn} from '@cnamts/synapse-bridge';
+export default defineComponent({
+	components: {
+		FooterWrapper,
+		FooterBtn,
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+.v-layout + .v-layout {
+	margin-top: 60px;
+}
+</style>
diff --git a/src/views/footers/FootersPage.vue b/src/views/footers/FootersPage.vue
new file mode 100644
index 0000000..92d6e8f
--- /dev/null
+++ b/src/views/footers/FootersPage.vue
@@ -0,0 +1,33 @@
+<script lang="ts" setup>
+import { FooterBar } from '@cnamts/synapse-bridge'
+const currentDate = new Date().getFullYear()
+</script>
+
+<template>
+	<FooterBar
+		a11y-compliance="partially-compliant"
+		version="1.0.0"
+		sitemap-route="/"
+		cgu-route="/"
+		cookies-route="/"
+		legal-notice-route="/"
+		a11y-statement-route="/"
+	>
+	  <template #prepend>
+		<li class="my-3 mx-4"><a href="/" class="text--primary">Accueil</a></li>
+	  </template>
+	  <template #append>
+		<li class="text--secondary my-3 mx-4">{{currentDate}} © CNAM</li>
+	  </template>
+	</FooterBar>
+	<br><br>
+	<FooterBar
+		hide-a11y-link
+		hide-cgu-link
+		hide-cookies-link
+		hide-legal-notice-link
+		hide-sitemap-link
+	>
+		<p class="text--secondary mb-0">Contenu supplémentaire.</p>
+	</FooterBar>
+</template>
diff --git a/src/views/headers/HeadersPage.vue b/src/views/headers/HeadersPage.vue
new file mode 100644
index 0000000..99f14b5
--- /dev/null
+++ b/src/views/headers/HeadersPage.vue
@@ -0,0 +1,119 @@
+<template>
+<h3>Loading</h3>
+	<HeaderLoading />
+	<br />
+	<HeaderLoading width="300px" />
+	<br />
+
+	<HeaderBar>
+		<template #brand-content>
+			<h1 class="text-caption text-md-h6 font-weight-medium text-green">
+				Pharmacies de garde
+			</h1>
+		</template>
+	</HeaderBar>
+	<HeaderBar theme="risque-pro" />
+	<HeaderBar theme="compte-entreprise" />
+	<HeaderBar theme="cnam" />
+	<HeaderBar theme="ameli" />
+	<HeaderBar theme="ameli-pro" />
+	<HeaderBar theme="compte-ameli" />
+	<HeaderBar service-sub-title="Documentation du Design System" service-title="Design System" />
+	<HeaderBar>
+		<template #brand-content>
+			<h1 class="text-caption text-md-h6 font-weight-medium text-green">
+				Pharmacies de garde
+			</h1>
+		</template>
+	</HeaderBar>
+	<HeaderBar mobile-version />
+	<HeaderBar :vuetify-options="vuetifyOptions" />
+	<HeaderBar>
+		<template #navigation-bar-content>
+			<h1 class="text-body-2 text-sm-subtitle-1">
+				Déclaration de maintien à domicile
+			</h1>
+		</template>
+	</HeaderBar>
+	<HeaderBar>
+		<template #secondary-logo>
+			<img src="https://www.msa.fr/lfp/o/z80-msa-rwd-theme/images/logo.svg" alt="MSA : Santé, Famille, Retraite, Services" width="115px" height="52px" class="ml-8 my-auto">
+		</template>
+	</HeaderBar>
+	<HeaderBar>
+		<UserMenuBtn full-name="Édith Cartier">
+			<VListItem v-for="(item, index) in menuBtnItems" :key="index">
+				<VListItemTitle>{{ item }}</VListItemTitle>
+			</VListItem>
+		</UserMenuBtn>
+	</HeaderBar>
+	<HeaderBar>
+		<template #navigation-bar-secondary-content>
+			<VBtn color="white" variant="text" class="px-1">
+				Besoin d’aide ?
+			</VBtn>
+		</template>
+	</HeaderBar>
+	<HeaderBar mobile-version>
+		<template #navigation-drawer-prepend>
+			<BackBtn dark class="mb-6" />
+		</template>
+
+		<template #navigation-drawer-append>
+			<VSpacer />
+
+			<VBtn color="white" variant="outlined" class="w-100">
+				Connexion
+			</VBtn>
+		</template>
+	</HeaderBar>
+	<HeaderBar sticky />
+	<p class="pa-8">
+		{{ generateFakeWords(4000).join(' ')}}
+	</p>
+	<FooterBar hide-a11y-link hide-cgu-link hide-cookies-link hide-legal-notice-link hide-sitemap-link>
+		<p class="text--secondary mb-0">Contenu supplémentaire.</p>
+	</FooterBar>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import {
+	BackBtn,
+	FooterBar,
+	HeaderBar,
+	HeaderLoading,
+	UserMenuBtn
+} from "@cnamts/synapse-bridge";
+
+export default defineComponent({
+	components: {
+		HeaderBar,
+		HeaderLoading,
+		FooterBar,
+		UserMenuBtn,
+		BackBtn,
+	},
+	data() {
+		return {
+			menuBtnItems: [
+				'Profil',
+				'Paramètres',
+				'Administration'
+			],
+			vuetifyOptions: {
+				appBar: {
+					rounded: true,
+				}
+			},
+		}
+	},
+	computed: {
+	},
+	methods: {
+		generateFakeWords(count: number) {
+			return Array.from({ length: count }, () => Array.from({ length: Math.floor(Math.random() * 3) + 1 }, () => ['b', 'c', 'd', 'f', 'g', 'h', 'j', 'k', 'l', 'm', 'n', 'p', 'q', 'r', 's', 't', 'v', 'w', 'x', 'y', 'z'][Math.floor(Math.random() * 21)] + ['a', 'e', 'i', 'o', 'u'][Math.floor(Math.random() * 5)]).join(''));
+		}
+	}
+});
+</script>
diff --git a/src/views/logo/LogoPage.vue b/src/views/logo/LogoPage.vue
new file mode 100644
index 0000000..1c05b29
--- /dev/null
+++ b/src/views/logo/LogoPage.vue
@@ -0,0 +1,45 @@
+<template>
+	<Logo />
+	<Logo hide-signature />
+	<Logo risque-pro />
+	<Logo avatar />
+	<Logo avatar size="small" />
+
+	<br/><br/>
+
+	<LogoBrandSection
+		service-sub-title="Documentation du Design System"
+		service-title="Design System"
+		theme="risque-pro"
+	/>
+
+	<br/><br/>
+
+	<LogoBrandSection
+		home-href="http://www.google.fr"
+		theme="ameli-pro"
+	/>
+
+	<br/><br/>
+
+	<LogoBrandSection home-href="http://www.google.fr">
+		<img
+			src="@/pages/assets/images/logo-msa.svg"
+			alt="MSA : Santé, Famille, Retraite, Services"
+			width="115px"
+			height="52px"
+			class="ml-8 my-auto"
+		>
+	</LogoBrandSection>
+</template>
+
+<script lang="ts">
+import {Logo, LogoBrandSection} from "@cnamts/synapse-bridge";
+import { defineComponent } from "vue";
+export default defineComponent({
+	components: {
+		Logo,
+		LogoBrandSection,
+	}
+});
+</script>
diff --git a/src/views/maintenance/MaintenancePage.vue b/src/views/maintenance/MaintenancePage.vue
new file mode 100644
index 0000000..29cdbda
--- /dev/null
+++ b/src/views/maintenance/MaintenancePage.vue
@@ -0,0 +1,86 @@
+<template>
+	<PageContainer>
+		<MaintenancePage />
+	</PageContainer>
+	<FooterBar
+		hide-a11y-link
+		hide-cgu-link
+		hide-cookies-link
+		hide-legal-notice-link
+		hide-sitemap-link
+	>
+		<p class="text--secondary mb-0">Contenu supplémentaire.</p>
+	</FooterBar>
+</template>
+
+<script lang="ts">
+import {defineComponent} from "vue";
+import {
+	PageContainer,
+	HeaderBar,
+	FooterBar,
+	DataList,
+	DataListGroup,
+	UserMenuBtn,
+	DialogBox,
+	FooterWrapper,
+	SubHeader,
+	FranceConnectBtn,
+	CopyBtn,
+	Logo,
+	HeaderLoading,
+	BackToTopBtn,
+	CookieBanner,
+	CookiesPage,
+	LogoBrandSection,
+	ChipList,
+	NotificationBar,
+	ErrorPage,
+	MaintenancePage,
+	NotFoundPage,
+	PasswordField,
+	DatePicker,
+	PeriodField
+} from "@cnamts/synapse-bridge";
+import AppHeader from "@/views/commons/AppHeader.vue";
+
+export default defineComponent({
+	components: {
+		AppHeader,
+		PageContainer,
+		HeaderBar,
+		FooterBar,
+		UserMenuBtn,
+		DialogBox,
+		DataList,
+		DataListGroup,
+		FooterWrapper,
+		SubHeader,
+		BackBtn,
+		FranceConnectBtn,
+		CopyBtn,
+		Logo,
+		HeaderLoading,
+		BackToTopBtn,
+		CookieBanner,
+		CookiesPage,
+		LogoBrandSection,
+		ChipList,
+		NotificationBar,
+		ErrorPage,
+		MaintenancePage,
+		NotFoundPage,
+		PasswordField,
+		DatePicker,
+		PeriodField
+	},
+	data() {
+		return {
+		}
+	},
+	computed: {
+	},
+	methods: {
+	}
+});
+</script>
diff --git a/src/views/nirfield/NirfieldPage.vue b/src/views/nirfield/NirfieldPage.vue
new file mode 100644
index 0000000..00cd4fc
--- /dev/null
+++ b/src/views/nirfield/NirfieldPage.vue
@@ -0,0 +1,129 @@
+<template>
+	<PageContainer>
+		<v-row class="mx-12 my-12">
+			<v-col cols="6">
+				<NirField
+					:nir-length="13"
+					outlined
+					required
+					tooltip="Tooltip infos"
+				/>
+				<NirField
+					:nir-length="13"
+					required
+					tooltip="Tooltip infos"
+				/>
+				<NirField
+					:nir-length="13"
+					tooltip="Tooltip infos"
+				/>
+				<NirField
+					@update:model-value="getValue"
+					:nir-length="13"
+				/>
+				Value: {{ value }}
+			</v-col>
+			<v-col cols="6">
+				<NirField
+					required
+					tooltip="Tooltip infos"
+					outlined
+				/>
+				<NirField
+					required
+					tooltip="Tooltip infos"
+				/>
+				<NirField
+					tooltip="Tooltip infos"
+				/>
+				<NirField @update:model-value="getValue" />
+				<p>Value:{{ value }}</p>
+			</v-col>
+		</v-row>
+	</PageContainer>
+	<FooterBar
+		hide-a11y-link
+		hide-cgu-link
+		hide-cookies-link
+		hide-legal-notice-link
+		hide-sitemap-link
+	>
+		<p class="text--secondary mb-0">Contenu supplémentaire.</p>
+	</FooterBar>
+</template>
+
+<script lang="ts">
+import {defineComponent} from "vue";
+import {
+	PageContainer,
+	HeaderBar,
+	FooterBar,
+	DataList,
+	DataListGroup,
+	UserMenuBtn,
+	DialogBox,
+	FooterWrapper,
+	SubHeader,
+	FranceConnectBtn,
+	CopyBtn,
+	Logo,
+	HeaderLoading,
+	BackToTopBtn,
+	CookieBanner,
+	CookiesPage,
+	LogoBrandSection,
+	ChipList,
+	NotificationBar,
+	ErrorPage,
+	MaintenancePage,
+	NotFoundPage,
+	PasswordField,
+	DatePicker,
+	PeriodField, NirField
+} from "@cnamts/synapse-bridge";
+import AppHeader from "@/views/commons/AppHeader.vue";
+
+export default defineComponent({
+	components: {
+		AppHeader,
+		NirField,
+		PageContainer,
+		HeaderBar,
+		FooterBar,
+		UserMenuBtn,
+		DialogBox,
+		DataList,
+		DataListGroup,
+		FooterWrapper,
+		SubHeader,
+		FranceConnectBtn,
+		CopyBtn,
+		Logo,
+		HeaderLoading,
+		BackToTopBtn,
+		CookieBanner,
+		CookiesPage,
+		LogoBrandSection,
+		ChipList,
+		NotificationBar,
+		ErrorPage,
+		MaintenancePage,
+		NotFoundPage,
+		PasswordField,
+		DatePicker,
+		PeriodField
+	},
+	data() {
+		return {
+			value: "",
+		}
+	},
+	computed: {
+	},
+	methods: {
+		getValue(event: string) {
+			this.value = event;
+		},
+	}
+});
+</script>
diff --git a/src/views/notFound/NotFoundPage.vue b/src/views/notFound/NotFoundPage.vue
new file mode 100644
index 0000000..9d15782
--- /dev/null
+++ b/src/views/notFound/NotFoundPage.vue
@@ -0,0 +1,117 @@
+<template>
+	<PageContainer>
+		<NotFoundPage />
+
+		<br />
+
+		<NotFoundPage
+			:key="$route.fullPath"
+			class="mb-6"
+		/>
+
+		<PageContainer
+			size="m"
+			spacing="pa-0 pb-8"
+		>
+			<VBtn
+				color="primary"
+				@click="setSupportId"
+			>
+				Afficher l’identifiant de support
+			</VBtn>
+		</PageContainer>
+	</PageContainer>
+	<FooterBar
+		hide-a11y-link
+		hide-cgu-link
+		hide-cookies-link
+		hide-legal-notice-link
+		hide-sitemap-link
+	>
+		<p class="text--secondary mb-0">Contenu supplémentaire.</p>
+	</FooterBar>
+</template>
+
+<script lang="ts">
+import {defineComponent} from "vue";
+import { mapActions, mapGetters } from "vuex";
+import { required } from "@cnamts/synapse-bridge/rules/required";
+import { notAfterToday } from "@cnamts/synapse-bridge/rules/notAfterToday";
+import { notBeforeToday } from "@cnamts/synapse-bridge/rules/notBeforeToday";
+import dayjs from "dayjs";
+import {
+	PageContainer,
+	HeaderBar,
+	FooterBar,
+	DataList,
+	DataListGroup,
+	UserMenuBtn,
+	DialogBox,
+	FooterWrapper,
+	SubHeader,
+	FranceConnectBtn,
+	CopyBtn,
+	Logo,
+	HeaderLoading,
+	BackToTopBtn,
+	CookieBanner,
+	CookiesPage,
+	LogoBrandSection,
+	ChipList,
+	NotificationBar,
+	ErrorPage,
+	MaintenancePage,
+	NotFoundPage,
+	PasswordField,
+	DatePicker,
+	PeriodField
+} from "@cnamts/synapse-bridge";
+import AppHeader from "@/views/commons/AppHeader.vue";
+
+export default defineComponent({
+	components: {
+		AppHeader,
+		PageContainer,
+		HeaderBar,
+		FooterBar,
+		UserMenuBtn,
+		DialogBox,
+		DataList,
+		DataListGroup,
+		FooterWrapper,
+		SubHeader,
+		FranceConnectBtn,
+		CopyBtn,
+		Logo,
+		HeaderLoading,
+		BackToTopBtn,
+		CookieBanner,
+		CookiesPage,
+		LogoBrandSection,
+		ChipList,
+		NotificationBar,
+		ErrorPage,
+		MaintenancePage,
+		NotFoundPage,
+		PasswordField,
+		DatePicker,
+		PeriodField
+	},
+	data() {
+		return {
+		}
+	},
+	computed: {
+	},
+	methods: {
+		setSupportId(): void {
+			this.$router.push({
+				path: this.$route.path,
+				query: {
+					support_id: '1178926558455813315'
+				}
+			});
+		}
+	}
+});
+</script>
diff --git a/src/views/notificationBar/NotificationBarPage.vue b/src/views/notificationBar/NotificationBarPage.vue
new file mode 100644
index 0000000..f8832e7
--- /dev/null
+++ b/src/views/notificationBar/NotificationBarPage.vue
@@ -0,0 +1,163 @@
+<template>
+	<PageContainer>
+		<div class="d-flex flex-wrap align-center justify-center ma-n2">
+			<NotificationBar v-show="showNotificationBar1">
+				<template #action>
+					<VBtn
+						variant="outlined"
+						color="white"
+						@click="removeNotification1"
+					>
+						2ème action
+					</VBtn>
+				</template>
+			</NotificationBar>
+
+			<NotificationBar
+				v-show="showNotificationBar2"
+				type="error"
+				bottom
+			/>
+
+			<VBtn
+				color="primary"
+				class="ma-2 mt-12"
+				@click="createNotification1"
+			>
+				Envoyer une notification 1
+			</VBtn>
+
+			<VBtn
+				color="primary"
+				class="ma-2 mt-12"
+				@click="createNotification2"
+			>
+				Envoyer une notification 2
+			</VBtn>
+
+			<VBtn
+				color="primary"
+				variant="outlined"
+				class="ma-2 mt-12"
+				@click="removeNotification"
+			>
+				Supprimer les notifications
+			</VBtn>
+		</div>
+	</PageContainer>
+	<FooterBar
+		hide-a11y-link
+		hide-cgu-link
+		hide-cookies-link
+		hide-legal-notice-link
+		hide-sitemap-link
+	>
+		<p class="text--secondary mb-0">Contenu supplémentaire.</p>
+	</FooterBar>
+</template>
+
+<script lang="ts">
+import {defineComponent} from "vue";
+
+import {
+	PageContainer,
+	HeaderBar,
+	FooterBar,
+	DataList,
+	DataListGroup,
+	UserMenuBtn,
+	DialogBox,
+	FooterWrapper,
+	SubHeader,
+	FranceConnectBtn,
+	CopyBtn,
+	Logo,
+	HeaderLoading,
+	BackToTopBtn,
+	CookieBanner,
+	CookiesPage,
+	LogoBrandSection,
+	ChipList,
+	NotificationBar,
+	ErrorPage,
+	MaintenancePage,
+	NotFoundPage,
+	PasswordField,
+	DatePicker,
+	PeriodField
+} from "@cnamts/synapse-bridge";
+import {mapActions, mapGetters} from "vuex";
+import AppHeader from "@/views/commons/AppHeader.vue";
+
+export default defineComponent({
+	components: {
+		AppHeader,
+		PageContainer,
+		HeaderBar,
+		FooterBar,
+		UserMenuBtn,
+		DialogBox,
+		DataList,
+		DataListGroup,
+		FooterWrapper,
+		SubHeader,
+		FranceConnectBtn,
+		CopyBtn,
+		Logo,
+		HeaderLoading,
+		BackToTopBtn,
+		CookieBanner,
+		CookiesPage,
+		LogoBrandSection,
+		ChipList,
+		NotificationBar,
+		ErrorPage,
+		MaintenancePage,
+		NotFoundPage,
+		PasswordField,
+		DatePicker,
+		PeriodField
+	},
+	data() {
+		return {
+		}
+	},
+	computed: {
+		...mapGetters('notification', {
+			notification: 'notification',
+		}),
+		showNotificationBar1(): boolean {
+			return this.notification?.ref === "1";
+		},
+		showNotificationBar2(): boolean {
+			return this.notification?.ref === "2";
+		}
+	},
+	methods: {
+		...mapActions('notification', {
+			dispatchNotification: 'addNotification',
+			dispatchClearNotification: 'clearNotification',
+		}),
+		createNotification1(): void {
+			this.dispatchNotification({
+				ref: "1",
+				type: 'info',
+				message: 'Exemple de notification 1.',
+			})
+		},
+		createNotification2(): void {
+			this.dispatchNotification({
+				ref: "2",
+				type: 'warning',
+				message: 'Exemple de notification 2.',
+			})
+		},
+		removeNotification(): void {
+			this.dispatchClearNotification();
+		},
+		removeNotification1(): void {
+			this.dispatchClearNotification();
+		}
+	}
+});
+</script>
diff --git a/src/views/paginatedTable/PaginatedTablePage.vue b/src/views/paginatedTable/PaginatedTablePage.vue
new file mode 100644
index 0000000..289fe1c
--- /dev/null
+++ b/src/views/paginatedTable/PaginatedTablePage.vue
@@ -0,0 +1,285 @@
+<template>
+	<PaginatedTable
+		:headers="headers"
+		:items="peoples"
+		:items-per-page="5"
+		v-model:options="options"
+	>
+		<template v-slot:header.lastname="{ column }">
+			{{ column.title.toUpperCase() }}
+		</template>
+	</PaginatedTable>
+
+	<br /><br />
+
+	<PaginatedTable
+		:headers="headers"
+		:items="users"
+		v-model:options="options"
+		:server-items-length="totalUsers"
+		:loading="state === StateEnum.PENDING"
+		suffix="api-example"
+		@update:options="fetchData"
+	/>
+</template>
+
+<script lang="ts">
+import {defineComponent} from "vue";
+import {
+	PaginatedTable,
+} from "@cnamts/synapse-bridge";
+
+import { StateEnum } from '@cnamts/synapse-bridge/constants/enums/StateEnum';
+import type { DataOptions } from "@cnamts/synapse-bridge/src/patterns/PaginatedTable/types";
+
+interface User {
+	[key: string]: string;
+	firstname: string;
+	lastname: string;
+	email: string;
+}
+
+interface DataObj {
+	items: User[];
+	total: number;
+}
+
+export default defineComponent({
+	components: {
+		PaginatedTable,
+	},
+	data() {
+		return {
+			StateEnum: StateEnum,
+
+			totalUsers: 0,
+			users: [] as User[],
+			options: {} as DataOptions,
+
+			state: StateEnum.IDLE,
+
+			headers: [
+				{
+					title: 'Nom',
+					key: 'lastname'
+				},
+				{
+					title: 'Prénom',
+					key: 'firstname'
+				},
+				{
+					title: 'Email',
+					key: 'email'
+				}
+			],
+
+			peoples: [
+				{
+					firstname: 'Virginie',
+					lastname: 'Beauchesne',
+					email: 'virginie.beauchesne@example.com'
+				},
+				{
+					firstname: 'Simone',
+					lastname: 'Bellefeuille',
+					email: 'simone.bellefeuille@example.com'
+				},
+				{
+					firstname: 'Étienne',
+					lastname: 'Salois',
+					email: 'etienne.salois@example.com'
+				},
+				{
+					firstname: 'Bernadette',
+					lastname: 'Langelier',
+					email: 'bernadette.langelier@example.com'
+				},
+				{
+					firstname: 'Agate',
+					lastname: 'Roy',
+					email: 'agate.roy@example.com'
+				},
+				{
+					firstname: 'Louis',
+					lastname: 'Denis',
+					email: 'louis.denis@example.com'
+				},
+				{
+					firstname: 'Édith',
+					lastname: 'Cartier',
+					email: 'edith.cartier@example.com'
+				},
+				{
+					firstname: 'Alphonse',
+					lastname: 'Bouvier',
+					email: 'alphonse.bouvier@example.com'
+				},
+				{
+					firstname: 'Eustache',
+					lastname: 'Dubois',
+					email: 'eustache.dubois@example.com'
+				},
+				{
+					firstname: 'Rosemarie',
+					lastname: 'Quessy',
+					email: 'rosemarie.quessy@example.com'
+				}
+			]
+		};
+	},
+
+	methods: {
+		async fetchData(): Promise<void> {
+			const { items, total } = await this.getDataFromApi(this.options);
+
+			this.users = items;
+			this.totalUsers = total;
+		},
+
+		async wait(ms: number) {
+			return new Promise(resolve => {
+				setTimeout(resolve, ms);
+			});
+		},
+
+		/**
+		 * This function returns a promise
+		 * After 1 second, it will return an API-like object
+		 *
+		 * It handles sorting and pagination
+		 */
+		async getDataFromApi({ sortBy, sortDesc, page, itemsPerPage }: DataOptions): Promise<DataObj> {
+			this.state = StateEnum.PENDING;
+
+			await this.wait(1000);
+
+			return new Promise((resolve) => {
+				let items: User[] = this.getUsers();
+				const total = items.length;
+
+				// Sorting algorithm
+				if (sortBy) {
+					items = items.sort((a, b) => {
+						const sortA = a[sortBy[0]];
+						const sortB = b[sortBy[0]];
+
+						if (sortDesc) {
+							if (sortA < sortB) {
+								return 1;
+							}
+
+							if (sortA > sortB) {
+								return -1;
+							}
+
+							return 0;
+						} else {
+							if (sortA < sortB) {
+								return -1;
+							}
+
+							if (sortA > sortB) {
+								return 1;
+							}
+
+							return 0;
+						}
+					});
+				}
+
+				// Pagination
+				if (itemsPerPage > 0) {
+					items = items.slice((page - 1) * itemsPerPage, page * itemsPerPage);
+				}
+
+				resolve({
+					items,
+					total
+				});
+
+				this.state = StateEnum.RESOLVED;
+			});
+		},
+
+		getUsers(): User[] {
+			return [
+				{
+					firstname: 'Virginie',
+					lastname: 'Beauchesne',
+					email: 'virginie.beauchesne@example.com'
+				},
+				{
+					firstname: 'Simone',
+					lastname: 'Bellefeuille',
+					email: 'simone.bellefeuille@example.com'
+				},
+				{
+					firstname: 'Étienne',
+					lastname: 'Salois',
+					email: 'etienne.salois@example.com'
+				},
+				{
+					firstname: 'Bernadette',
+					lastname: 'Langelier',
+					email: 'bernadette.langelier@example.com'
+				},
+				{
+					firstname: 'Agate',
+					lastname: 'Roy',
+					email: 'agate.roy@example.com'
+				},
+				{
+					firstname: 'Louis',
+					lastname: 'Denis',
+					email: 'louis.denis@example.com'
+				},
+				{
+					firstname: 'Édith',
+					lastname: 'Cartier',
+					email: 'edith.cartier@example.com'
+				},
+				{
+					firstname: 'Alphonse',
+					lastname: 'Bouvier',
+					email: 'alphonse.bouvier@example.com'
+				},
+				{
+					firstname: 'Eustache',
+					lastname: 'Dubois',
+					email: 'eustache.dubois@example.com'
+				},
+				{
+					firstname: 'Rosemarie',
+					lastname: 'Quessy',
+					email: 'rosemarie.quessy@example.com'
+				},
+				{
+					firstname: 'Serge',
+					lastname: 'Rivard',
+					email: 'serge.rivard@example.com'
+				},
+				{
+					firstname: 'Jacques',
+					lastname: 'Demers',
+					email: 'jacques.demers@example.com'
+				},
+				{
+					firstname: 'Aimée',
+					lastname: 'Josseaume',
+					email: 'aimee.josseaume@example.com'
+				},
+				{
+					firstname: 'Delphine',
+					lastname: 'Robillard',
+					email: 'delphine.robillard@example.com'
+				},
+				{
+					firstname: 'Alexandre',
+					lastname: 'Lazure',
+					email: 'alexandre.lazure@example.com'
+				}
+			];
+		}
+	}
+});
+</script>
diff --git a/src/views/password/PasswordPage.vue b/src/views/password/PasswordPage.vue
new file mode 100644
index 0000000..d1e17a1
--- /dev/null
+++ b/src/views/password/PasswordPage.vue
@@ -0,0 +1,68 @@
+<template>
+	<PageContainer>
+		<div class="w-50 mx-auto">
+			<v-col>
+				Mot de passe: {{ password }}
+				<PasswordField
+					v-model="password"
+					@update:model-value="getValue($event)"
+				/>
+			</v-col>
+			<v-col>
+				Mot de passe: {{ password2 }}
+				<PasswordField
+					v-model="password2"
+					class="mt-2"
+					required
+					outlined
+					@update:model-value="getValue($event)"
+				/>
+			</v-col>
+			<v-col>
+				Mot de passe: {{ password3 }}
+				<PasswordField
+					v-model="password3"
+					class="mt-2"
+					required
+					outlined
+					@update:model-value="getValue($event)"
+				/>
+			</v-col>
+		</div>
+	</PageContainer>
+</template>
+
+<script lang="ts">
+import {defineComponent} from "vue";
+import {
+	PageContainer,
+	PasswordField,
+} from "@cnamts/synapse-bridge";
+
+export default defineComponent({
+	components: {
+		PageContainer,
+		PasswordField,
+	},
+	data() {
+		return {
+			password: null,
+			password2: null,
+			password3: 'jesuis1superm0tdepasse',
+		}
+	},
+	computed: {
+	},
+	methods: {
+		getValue(value: string): void {
+			console.log(value);
+		}
+	}
+});
+</script>
+
+<style scoped>
+:deep(.v-field__field ){
+	align-items: stretch !important;
+}
+</style>
diff --git a/src/views/periodField/PeriodFieldPage.vue b/src/views/periodField/PeriodFieldPage.vue
new file mode 100644
index 0000000..d91dbf2
--- /dev/null
+++ b/src/views/periodField/PeriodFieldPage.vue
@@ -0,0 +1,121 @@
+<template>
+	<PageContainer>
+		<div class="mt-4 my-4 d-flex justify-sm-space-around">
+			<div>
+				<h3>Basique</h3>
+				<PeriodField v-model="date"/>
+				<p>Date saisie : {{ date }}</p>
+				<h3>No-prepend-icon</h3>
+				<PeriodField v-model="date" no-prepend-icon />
+				<p>Date saisie : {{ date }}</p
+				>
+				<h3>Append</h3>
+				<PeriodField v-model="date" append-icon />
+				<p>Date saisie : {{ date }}</p>
+				<h3>Outlined</h3>
+				<PeriodField v-model="date" outlined/>
+				<p>Date saisie : {{ date }}</p>
+			</div>
+			<div>
+				<h3>Label</h3>
+				<PeriodField v-model="date" label="Periode"/>
+				<p>Date saisie : {{ date }}</p>
+				<h3>Disabled</h3>
+				<PeriodField v-model="date" disabled/>
+				<p>Date saisie : {{ date }}</p>
+				<PeriodField v-model="date2"/>
+				<p>Date saisie : {{ date2 }}</p>
+				<p>Date saisie : {{ date3 }}</p>
+				<h3>Change Format DD/MM/YYYY to YYYY/MM/DD</h3>
+				<PeriodField v-model="changingDate" date-format="DD/MM/yyyy" date-format-return="yyyy/MM/dd"/>
+				<p>Date saisie : {{ changingDate }}</p>
+			</div>
+		</div>
+	</PageContainer>
+	<FooterBar
+		hide-a11y-link
+		hide-cgu-link
+		hide-cookies-link
+		hide-legal-notice-link
+		hide-sitemap-link
+	>
+		<p class="text-secondary mb-0">Contenu supplémentaire.</p>
+	</FooterBar>
+</template>
+<script lang="ts">
+import {defineComponent} from "vue";
+import {
+	PageContainer,
+	HeaderBar,
+	FooterBar,
+	DataList,
+	DataListGroup,
+	UserMenuBtn,
+	DialogBox,
+	FooterWrapper,
+	SubHeader,
+	FranceConnectBtn,
+	CopyBtn,
+	Logo,
+	HeaderLoading,
+	BackToTopBtn,
+	CookieBanner,
+	CookiesPage,
+	LogoBrandSection,
+	ChipList,
+	NotificationBar,
+	ErrorPage,
+	MaintenancePage,
+	NotFoundPage,
+	PasswordField,
+	DatePicker,
+	PeriodField
+} from "@cnamts/synapse-bridge";
+import dayjs from "dayjs";
+import AppHeader from "@/views/commons/AppHeader.vue";
+
+export default defineComponent({
+	components: {
+		AppHeader,
+		PageContainer,
+		HeaderBar,
+		FooterBar,
+		UserMenuBtn,
+		DialogBox,
+		DataList,
+		DataListGroup,
+		FooterWrapper,
+		SubHeader,
+		FranceConnectBtn,
+		CopyBtn,
+		Logo,
+		HeaderLoading,
+		BackToTopBtn,
+		CookieBanner,
+		CookiesPage,
+		LogoBrandSection,
+		ChipList,
+		NotificationBar,
+		ErrorPage,
+		MaintenancePage,
+		NotFoundPage,
+		PasswordField,
+		DatePicker,
+		PeriodField
+	},
+	data() {
+		return {
+			periodFieldDate: ['01/05/2024', '13/05/2024'],
+			datePickerdate: null,
+			date:[dayjs().format('DD/MM/YYYY'), dayjs().add(12, 'day').format('DD/MM/YYYY')],
+			date2: [dayjs().format('DD/MM/YYYY'), dayjs().add(3, 'day').format('DD/MM/YYYY')],
+			date3: [dayjs().format('DD/MM/YYYY'), dayjs().add(5, 'day').format('DD/MM/YYYY')],
+			changingDate: [dayjs().format('YYYY/MM/DD'), dayjs().add(5, 'day').format('YYYY/MM/DD')]
+		}
+	},
+	computed: {
+	},
+	methods: {
+	}
+});
+</script>
diff --git a/src/views/phoneField/PhoneFieldPage.vue b/src/views/phoneField/PhoneFieldPage.vue
new file mode 100644
index 0000000..c599dd6
--- /dev/null
+++ b/src/views/phoneField/PhoneFieldPage.vue
@@ -0,0 +1,43 @@
+<template>
+	<PhoneField
+		v-model="phone1"
+		required
+		@update:modelValue="handleInputChange1"
+	/>
+	<br />
+	<PhoneField
+		v-model="phone2"
+		outlined
+		@update:modelValue="handleInputChange2"
+	/>
+</template>
+
+<script lang="ts">
+import {defineComponent} from "vue";
+import {
+	PhoneField,
+} from "@cnamts/synapse-bridge";
+export default defineComponent({
+	components: {
+		PhoneField,
+	},
+	data() {
+		return {
+			phone1: undefined as string | undefined,
+			phone2: undefined as string | undefined,
+		}
+	},
+	methods: {
+		handleInputChange1() {
+			if (this.phone1) {
+				console.log(this.phone1);
+			}
+		},
+		handleInputChange2() {
+			if (this.phone2) {
+				console.log(this.phone2);
+			}
+		}
+	}
+});
+</script>
diff --git a/src/views/rangeField/RangeFieldPage.vue b/src/views/rangeField/RangeFieldPage.vue
new file mode 100644
index 0000000..c6e0d61
--- /dev/null
+++ b/src/views/rangeField/RangeFieldPage.vue
@@ -0,0 +1,21 @@
+<template>
+	<RangeField v-model="rangeValue" :min="20" :max="100" />
+	<p>Value: {{ rangeValue }}</p>
+</template>
+
+<script lang="ts">
+import {defineComponent} from "vue";
+import {
+	RangeField,
+} from "@cnamts/synapse-bridge";
+export default defineComponent({
+	components: {
+		RangeField,
+	},
+	data() {
+		return {
+			rangeValue: [50, 80],
+		}
+	}
+});
+</script>
diff --git a/src/views/ratingPicker/RatingPickerPage.vue b/src/views/ratingPicker/RatingPickerPage.vue
new file mode 100644
index 0000000..b2920a3
--- /dev/null
+++ b/src/views/ratingPicker/RatingPickerPage.vue
@@ -0,0 +1,161 @@
+<template>
+	<PageContainer>
+		<RatingPicker
+			label="Êtes-vous satisfait de ce service ?"
+			type="emotion"
+			v-model="v"
+		/>{{ v }}
+
+		<br><br><br>
+
+		<RatingPicker
+			label="Êtes-vous satisfait de ce service ?"
+			type="emotion"
+			:twoEmotions='true'
+			:itemLabels='["123"]'
+			v-model="v1"
+		/>{{ v1 }}
+
+		<br><br><br>
+
+		<RatingPicker
+			label="Êtes-vous satisfait de ce service ?"
+			type="number"
+			v-model="v2"
+			:item-labels="[
+				'Plutôt inutile',
+				'Très utile'
+			]"
+		/>{{ v2 }}
+
+		<br><br><br>
+
+		<RatingPicker
+			label="Êtes-vous satisfait de ce service ?"
+			type="stars"
+			v-model="v3"
+		/>{{ v3 }}
+
+		<br><br><br>
+
+		<RatingPicker
+			v-model="v4"
+			:item-labels="[
+				'Plutôt inutile',
+				'Très utile'
+			]"
+			label="Quelle note donnez-vous à ce service ?"
+			type="number"
+		>
+			<VSelect
+				:items="selectItems"
+				label="Comment avez-vous connu ce service ?"
+				hide-details
+				variant="outlined"
+				color="primary"
+				class="mb-4"
+			/>
+
+			<div class="d-flex">
+				<VSpacer />
+
+				<VBtn
+					right
+					color="primary"
+				>
+					Terminé
+				</VBtn>
+			</div>
+		</RatingPicker>{{ v4 }}
+		<br><br><br>
+		<RatingPicker
+			v-model="v5"
+			:item-labels="[
+				'Plutôt inutile',
+				'Très utile'
+			]"
+			label="Quelle note donnez-vous à ce service ?"
+			type="number"
+		>
+			<VTextarea
+				label="Que pouvons-nous améliorer ?"
+				hide-details
+				color="primary"
+				variant="outlined"
+				class="mb-4"
+			/>
+
+			<VSelect
+				:items="selectItems"
+				label="Comment avez-vous connu ce service ?"
+				hide-details
+				color="primary"
+				variant="outlined"
+				class="mb-6"
+			/>
+
+			<EmotionPicker
+				v-model="finalRating"
+				:item-labels="[
+					'À améliorer',
+					'Neutre',
+					'Géniale'
+				]"
+				label="Que pensez-vous de notre enquête de satisfaction ?"
+				class="mb-4"
+			/>
+			{{ finalRating }}
+
+			<div class="d-flex">
+				<VSpacer />
+
+				<VBtn
+					right
+					color="primary"
+				>
+					Terminé
+				</VBtn>
+			</div>
+		</RatingPicker>
+	</PageContainer>
+</template>
+
+<script lang="ts">
+import {defineComponent} from "vue";
+import {
+	PageContainer,
+	RatingPicker
+} from "@cnamts/synapse-bridge";
+import AppHeader from "@/views/commons/AppHeader.vue";
+
+export default defineComponent({
+	components: {
+		AppHeader,
+		PageContainer,
+		RatingPicker
+	},
+	data() {
+		return {
+			v: -1,
+			v1: -1,
+			v2: -1,
+			v3: -1,
+			v4: -1,
+			v5: -1,
+			selectItems: [
+				'Via une recherche internet',
+				'Via un professionnel de santé',
+				'Via un ami'
+			],
+			finalRating: -1
+		}
+	},
+	computed: {
+	},
+	methods: {
+		getValue(value: string): void {
+			console.log(value);
+		}
+	}
+});
+</script>
diff --git a/src/views/searchListField/SearchListFieldPage.vue b/src/views/searchListField/SearchListFieldPage.vue
new file mode 100644
index 0000000..4f03b89
--- /dev/null
+++ b/src/views/searchListField/SearchListFieldPage.vue
@@ -0,0 +1,57 @@
+<template>
+	<SearchListField
+		:items="items"
+		@update:modelValue="($event) => selectChoice($event)"
+	/>
+	<br />
+	<pre>Selected: {{ value }}</pre>
+</template>
+
+<script lang="ts">
+import {defineComponent} from "vue";
+import {
+	SearchListField,
+} from "@cnamts/synapse-bridge";
+import { SearchListItem } from '@cnamts/synapse-bridge/src/patterns/SearchListField/types';
+export default defineComponent({
+	components: {
+		SearchListField,
+	},
+	data() {
+		return {
+			value: [] as string[],
+			items: [
+				{
+					label: 'Chirurgien-dentiste',
+					value: 'chirurgien-dentiste'
+				},
+				{
+					label: 'Infirmier',
+					value: 'infirmier'
+				},
+				{
+					label: 'Orthophoniste',
+					value: 'orthophoniste'
+				},
+				{
+					label: 'Orthoptiste',
+					value: 'orthoptiste'
+				},
+				{
+					label: 'Pédicure-podologue',
+					value: 'pedicure-podologue'
+				},
+				{
+					label: 'Pharmacien',
+					value: 'pharmacien'
+				}
+			] as SearchListItem[]
+		};
+	},
+	methods: {
+		selectChoice(val: string[]): void {
+			this.value = val;
+		}
+	}
+});
+</script>
diff --git a/src/views/skipLink/SkipLinkPage.vue b/src/views/skipLink/SkipLinkPage.vue
new file mode 100644
index 0000000..a35203f
--- /dev/null
+++ b/src/views/skipLink/SkipLinkPage.vue
@@ -0,0 +1,24 @@
+<template>
+	<SkipLink label="Contenu principal" />
+
+	click Tab
+
+	<div
+		id="main"
+		style="margin-top: 2000px"
+	>
+		Content
+	</div>
+</template>
+
+<script lang="ts">
+import {defineComponent} from "vue";
+import {
+	SkipLink,
+} from "@cnamts/synapse-bridge";
+export default defineComponent({
+	components: {
+		SkipLink,
+	}
+});
+</script>
diff --git a/src/views/subHeader/SubHeaderPage.vue b/src/views/subHeader/SubHeaderPage.vue
new file mode 100644
index 0000000..9ad4c13
--- /dev/null
+++ b/src/views/subHeader/SubHeaderPage.vue
@@ -0,0 +1,159 @@
+<template>
+	<SubHeader
+		back-btn-text="Back"
+		sub-title-text="1 69 08 75 125 456 75"
+		title-text="Paul Dupont"
+	/>
+
+	<br />
+
+	<SubHeader
+		:data-list-group-items="dataListGroupItems"
+		title-text="Paul Dupont"
+		sub-title-text="1 69 08 75 125 456 75"
+		render-html-value
+	/>
+
+	<br />
+
+	<SubHeader
+		title-text="Paul Dupont"
+		sub-title-text="1 69 08 75 125 456 75"
+	>
+		<template #additional-informations>
+			<VSpacer />
+
+			<p class="white--text mt-8 mb-0">
+				Profil complété à 50%
+			</p>
+
+			<VProgressLinear
+				:model-value="50"
+				color="#fff"
+				height="8px"
+				class="mt-2 mb-1"
+				background-color="#fff"
+				background-opacity=".24"
+			/>
+		</template>
+	</SubHeader>
+
+	<br />
+
+	<SubHeader
+		:data-list-group-items="dataListGroupItems"
+		:loading="loading"
+		title-text="Paul Dupont"
+		sub-title-text="1 69 08 75 125 456 75"
+	>
+		<template #additional-informations>
+			<VSpacer />
+
+			<VFadeTransition mode="out-in">
+				<div
+					v-if="loading"
+					key="progress-skeleton"
+				>
+					<HeaderLoading
+						class="mt-8"
+						height="24"
+						width="160"
+						dark
+					/>
+
+					<HeaderLoading
+						class="mt-2 mb-1"
+						height="8"
+						width="100%"
+						tile
+						dark
+					/>
+				</div>
+
+				<div
+					v-else
+					key="progress-data"
+				>
+					<p class="white--text mt-8 mb-0">
+						Profil complété à 50%
+					</p>
+
+					<VProgressLinear
+						:model-value="50"
+						color="#fff"
+						height="8px"
+						class="mt-2 mb-1"
+						background-color="#fff"
+						background-opacity=".24"
+					/>
+				</div>
+			</VFadeTransition>
+		</template>
+	</SubHeader>
+
+	<VSwitch
+		v-model="loading"
+		label="Chargement"
+		hide-details
+	/>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import { SubHeader, HeaderLoading } from "@cnamts/synapse-bridge";
+import { DataListGroupItems } from '@cnamts/synapse-bridge/src/patterns/DataListGroup/types';
+export default defineComponent({
+	components: {
+		SubHeader,
+		HeaderLoading
+	},
+	data() {
+		return {
+			loading: true,
+			dataListGroupItems: [
+				{
+					title: 'Informations patient',
+					itemsNumberLoading: 2,
+					headingLoading: true,
+					items: [
+						{
+							key: 'Date de naissance',
+							value: '24/09/1970'
+						},
+						{
+							key: 'Adresse',
+							value: '50 Avenue du Professeur André Lemierre<br>75020 Paris'
+						}
+					]
+				},
+				{
+					title: 'Médecin traitant',
+					itemsNumberLoading: 2,
+					headingLoading: true,
+					items: [
+						{
+							key: 'Nom du praticien',
+							value: 'Gérard Leblanc'
+						},
+						{
+							key: 'N° RPPS',
+							value: 'XXXXX'
+						}
+					]
+				},
+				{
+					title: 'Autres informations',
+					itemsNumberLoading: 1,
+					headingLoading: true,
+					items: [
+						{
+							key: 'Dernière modification',
+							value: '04/06/2020'
+						}
+					]
+				}
+			] satisfies DataListGroupItems
+		};
+	}
+});
+</script>
diff --git a/src/views/tableToolbar/TableToolbarPage.vue b/src/views/tableToolbar/TableToolbarPage.vue
new file mode 100644
index 0000000..2bd041c
--- /dev/null
+++ b/src/views/tableToolbar/TableToolbarPage.vue
@@ -0,0 +1,85 @@
+<template>
+	<div>
+		<VDataTable
+			:headers="headers"
+			:items="items"
+			:search="search"
+			:loading="loading ? 'primary' : false"
+			loading-text="Chargement des patients"
+		>
+			<template #top>
+				<TableToolbar
+					v-model:search="search"
+					:nb-total="items.length"
+					:loading="loading"
+					show-add-btn
+					row-text="patient"
+					add-btn-label="Ajouter un patient"
+					search-label="Rechercher"
+				>
+					<template #search-left>
+						<VBtn
+							color="primary"
+							variant="outlined"
+							size="small"
+							:class="$vuetify.display.name === 'xs' ? 'mx-0 mr-6' : 'mx-5'"
+							:disabled="loading"
+						>
+							Exemple
+						</VBtn>
+					</template>
+				</TableToolbar>
+			</template>
+			<template #bottom>
+				<!-- Leave this slot empty to hide pagination controls -->
+			</template>
+		</VDataTable>
+		<VSwitch v-model="loading"></VSwitch>
+	</div>
+</template>
+
+<script lang="ts">
+import {defineComponent} from "vue";
+import { VDataTable } from "vuetify/components/VDataTable";
+import {
+	TableToolbar,
+} from "@cnamts/synapse-bridge";
+export default defineComponent({
+	components: {
+		TableToolbar,
+		VDataTable
+	},
+	data() {
+		return {
+			search: undefined as string | undefined,
+			loading: false,
+			headers: [
+				{
+					title: "Nom",
+					key: "lastname",
+				},
+				{
+					title: "Prénom",
+					key: "firstname",
+				},
+				{
+					title: "Email",
+					key: "email",
+				},
+			],
+			items: [
+				{
+					firstname: "Virginie",
+					lastname: "Beauchesne",
+					email: "virginie.beauchesne@example.com",
+				},
+				{
+					firstname: "Étienne",
+					lastname: "Salois",
+					email: "etienne.salois@example.com",
+				},
+			],
+		};
+	},
+});
+</script>
diff --git a/src/views/uploadWorkflow/UploadWorkflowPage.vue b/src/views/uploadWorkflow/UploadWorkflowPage.vue
new file mode 100644
index 0000000..6999fa5
--- /dev/null
+++ b/src/views/uploadWorkflow/UploadWorkflowPage.vue
@@ -0,0 +1,167 @@
+<template>
+	<h1>Basique</h1>
+	<UploadWorkflow
+		v-model="selectedFiles"
+		:file-list-items="fileListItems"
+	/>
+
+	<br /><br />
+
+	<h1>Un seul fichier</h1>
+	<UploadWorkflow
+		v-model="selectedFiles"
+		:file-list-items="fileListItems2"
+	/>
+
+	<br /><br />
+
+	<h1>Événements</h1>
+	<UploadWorkflow
+		v-model="selectedFiles"
+		:file-list-items="fileListItems3"
+		show-view-btn
+		:vuetify-options="vuetifyOptions"
+		@change="valueUpdated"
+		@error="showError"
+	/>
+
+	<br /><br />
+
+	<h1>Mode sélection libre</h1>
+	<UploadWorkflow v-model="freeFiles" />
+
+	<br /><br />
+
+	<h1>Prévisualisation des fichiers</h1>
+	<UploadWorkflow
+		v-model="selectedFiles"
+		:file-list-items="fileListItems"
+		show-file-preview
+		show-view-btn
+	/>
+
+	<br /><br />
+
+	<h1>Slots</h1>
+	<UploadWorkflow
+		v-model="selectedFiles"
+		:file-list-items="fileListItems"
+		show-file-preview
+	>
+		<template #title>
+			<h3 class="title font-weight-bold">
+				Documents à sélectionner
+			</h3>
+		</template>
+
+		<template #modal-title>
+			<h4 class="title font-weight-bold">
+				Sélectionnez le type du fichier
+			</h4>
+		</template>
+
+		<template #modal-description>
+			<p class="mb-6">Veuillez vérifier que le document correspond bien à l'assuré concerné.</p>
+		</template>
+	</UploadWorkflow>
+
+	<VSnackbar
+		v-model="snackbar"
+		:color="snackbarColor"
+	>
+		{{ snackbarText }}
+
+		<template v-slot:actions>
+			<VBtn
+				variant="text"
+				@click="snackbar = false"
+			>
+				Fermer
+			</VBtn>
+		</template>
+	</VSnackbar>
+</template>
+
+<script lang="ts">
+import {defineComponent} from "vue";
+import {
+	UploadWorkflow,
+} from "@cnamts/synapse-bridge";
+import { FileListItem, SelectedFile } from '@cnamts/synapse-bridge/src/patterns/UploadWorkflow/types';
+import { ErrorEvent, ErrorCodesType } from '@cnamts/synapse-bridge/src/patterns/FileUpload/types';
+export default defineComponent({
+	components: {
+		UploadWorkflow,
+	},
+	data() {
+		return {
+			selectedFiles: [] as File[],
+			fileListItems: [
+				{
+					id: 'rib',
+					title: 'RIB'
+				},
+				{
+					id: 'idCard',
+					title: 'Carte d’identité recto / verso'
+				},
+				{
+					id: 'passport',
+					title: 'Passeport'
+				}
+			] as FileListItem[],
+			fileListItems2: [
+				{
+					id: 'rib',
+					title: 'RIB'
+				}
+			] as FileListItem[],
+			fileListItems3: [
+				{
+					id: 'rib',
+					title: 'RIB'
+				},
+				{
+					id: 'idCard',
+					title: 'Carte d’identité recto / verso',
+					optional: true
+				}
+			] as FileListItem[],
+			freeFiles: [] as File[],
+			vuetifyOptions: {
+				fileUpload: {
+					allowedExtensions: [
+						'png',
+						'jpg',
+						'jpeg'
+					]
+				}
+			},
+			snackbar: false,
+			snackbarText: null as string | null | undefined,
+			snackbarColor: 'success',
+			errorsText: {
+				MULTIPLE_FILES_SELECTED: 'Vous ne pouvez sélectionner qu’un seul fichier.',
+				FILE_TOO_LARGE: 'Le fichier sélectionné est trop lourd.',
+				FILE_EXTENSION_NOT_ALLOWED: 'L’extension du fichier n’est pas autorisée.'
+			} as ErrorCodesType,
+		};
+	},
+	methods: {
+		showError(error: ErrorEvent): void {
+			this.snackbarText = this.errorsText[error.code];
+			this.snackbarColor = 'error';
+			this.snackbar = true;
+		},
+		valueUpdated(fileList: SelectedFile[]): void {
+			const file = fileList[fileList.length - 1];
+			if (!file) {
+				return;
+			}
+			this.snackbarText = `Le fichier "${file.title}" a été ajouté avec succès.`;
+			this.snackbarColor = 'success';
+			this.snackbar = true;
+		}
+	}
+});
+</script>
diff --git a/src/vuex.d.ts b/src/vuex.d.ts
new file mode 100644
index 0000000..2a35566
--- /dev/null
+++ b/src/vuex.d.ts
@@ -0,0 +1,6 @@
+declare module "vuex" {
+	export * from "vuex/types/index.d.ts";
+	export * from "vuex/types/helpers.d.ts";
+	export * from "vuex/types/logger.d.ts";
+	export * from "vuex/types/vue.d.ts";
+}