diff --git a/frontend/src/lib/components/button-slider.svelte b/frontend/src/lib/components/button-slider.svelte
new file mode 100644
index 0000000..9335d5a
--- /dev/null
+++ b/frontend/src/lib/components/button-slider.svelte
@@ -0,0 +1,25 @@
+<script>
+	import '$lib/css/base.css';
+	import '$lib/css/button-slider.css';
+	import { createEventDispatcher } from 'svelte';
+
+	const dispatch = createEventDispatcher();
+	export let keys = ['Button1', 'Button2'];
+	export let active = 0;
+
+	function changeActive(id) {
+		dispatch('click', { id: id });
+		active = id;
+	}
+</script>
+
+<div class="button-slider-container center">
+	{#each keys as k, id}
+		<button
+			class={id === active ? 'button-slider-active' : ''}
+			on:click={() => {
+				changeActive(id);
+			}}><span>{k}</span></button
+		>
+	{/each}
+</div>
diff --git a/frontend/src/lib/components/footer.svelte b/frontend/src/lib/components/footer.svelte
index 3d70edc..eb56246 100644
--- a/frontend/src/lib/components/footer.svelte
+++ b/frontend/src/lib/components/footer.svelte
@@ -1,8 +1,40 @@
 <script>
 	import '$lib/css/base.css';
 	import '$lib/css/footer.css';
-	import SvgIcon from '@jamescoyle/svelte-icon';
-	import { mdiFormatQuoteClose, mdiFormatQuoteOpen } from '@mdi/js';
+
+	import Page1 from '$lib/components/footer/page1.svelte';
+	import Page2 from '$lib/components/footer/page2.svelte';
+	import Page3 from '$lib/components/footer/page3.svelte';
+	import ButtonSlider from '$lib/components/button-slider.svelte';
+	import anime from 'animejs';
+
+	let active = 0;
+	let page = [Page1, Page2, Page3];
+	let pageDiv;
+
+	function slideText(event) {
+		const id = event.detail.id;
+		const width = window.innerWidth;
+
+		anime({
+			targets: pageDiv,
+			translateX: width / 2,
+			opacity: 0,
+			duration: 300,
+			easing: 'easeInQuad',
+			complete: function () {
+				active = id;
+				pageDiv.style.transform = `translateX(-${width}px)`;
+				anime({
+					targets: pageDiv,
+					translateX: 0,
+					opacity: 1,
+					duration: 300,
+					easing: 'easeOutQuad'
+				});
+			}
+		});
+	}
 </script>
 
 <div class="footer-container">
@@ -11,29 +43,15 @@
 			<h1 class="title">Etheryo Blog</h1>
 		</div>
 		<div class="footer-right">
-			<div class="footer-icon-text">
-				<img alt="github" src="https://cdn.simpleicons.org/github/F8F1F1" />
-				<a target="_blank" href="https://github.com/yoboujon/etheryo-blog">Lien Github</a>
-			</div>
-			<div class="footer-icon-text">
-				<img alt="raspberrypi" src="https://cdn.simpleicons.org/raspberrypi/F8F1F1" />
-				<a target="_blank" href="https://fr.wikipedia.org/wiki/Raspberry_Pi"
-					>Hébergé sur Raspberry Pi</a
-				>
-			</div>
-			<div class="footer-icon-text">
-				<img alt="crowcpp" src="https://crowcpp.org/master/assets/favicon.svg" />
-				<a target="_blank" href="https://github.com/CrowCpp/Crow">Réalisé avec CrowCpp</a>
-			</div>
-			<div class="footer-icon-text footer-special">
-				<SvgIcon type="mdi" path={mdiFormatQuoteOpen} />
-				<span><i>Keep the web free</i></span>
-				<SvgIcon type="mdi" path={mdiFormatQuoteClose} />
+			<div class="page-base justify-center" bind:this={pageDiv}>
+				<svelte:component this={page[active]} />
 			</div>
 		</div>
 	</div>
-	<div class="footer-slider">
+	<div class="footer-slider align-center">
 		<span>{new Date().getFullYear()} • Tous droits réservés • Yohan Boujon</span>
-		<div class="flex-end">ButtonSlider</div>
+		<div class="flex-end">
+			<ButtonSlider keys={['À propos', 'Notre Vision', 'Contacter']} on:click={slideText} />
+		</div>
 	</div>
 </div>
diff --git a/frontend/src/lib/components/footer/page1.svelte b/frontend/src/lib/components/footer/page1.svelte
new file mode 100644
index 0000000..a3f0155
--- /dev/null
+++ b/frontend/src/lib/components/footer/page1.svelte
@@ -0,0 +1,24 @@
+<script>
+    import '$lib/css/footer/page.css';
+
+	import SvgIcon from '@jamescoyle/svelte-icon';
+	import { mdiFormatQuoteClose, mdiFormatQuoteOpen } from '@mdi/js';
+</script>
+
+<div class="page-icon-text">
+	<img alt="github" src="https://cdn.simpleicons.org/github/F8F1F1" />
+	<a target="_blank" href="https://github.com/yoboujon/etheryo-blog">Code source</a>
+</div>
+<div class="page-icon-text">
+	<img alt="raspberrypi" src="https://cdn.simpleicons.org/raspberrypi/F8F1F1" />
+	<a target="_blank" href="https://fr.wikipedia.org/wiki/Raspberry_Pi">Hébergé sur Raspberry Pi</a>
+</div>
+<div class="page-icon-text">
+	<img alt="crowcpp" src="https://crowcpp.org/master/assets/favicon.svg" />
+	<a target="_blank" href="https://github.com/CrowCpp/Crow">Réalisé avec CrowCpp</a>
+</div>
+<div class="page-icon-text page-special">
+	<SvgIcon type="mdi" path={mdiFormatQuoteOpen} />
+	<span><i>Keep the web free</i></span>
+	<SvgIcon type="mdi" path={mdiFormatQuoteClose} />
+</div>
diff --git a/frontend/src/lib/components/footer/page2.svelte b/frontend/src/lib/components/footer/page2.svelte
new file mode 100644
index 0000000..ac84221
--- /dev/null
+++ b/frontend/src/lib/components/footer/page2.svelte
@@ -0,0 +1,19 @@
+<script>
+	import '$lib/css/base.css';
+	import '$lib/css/footer/page.css';
+
+	import SvgIcon from '@jamescoyle/svelte-icon';
+	import { mdiEye } from '@mdi/js';
+</script>
+
+<div class="page-icon-text">
+	<SvgIcon type="mdi" path={mdiEye} />
+	<h1>Notre Vision</h1>
+</div>
+<div class="page-text">
+	<span class="page-overflow text-justify"
+		>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lectus ante, porttitor eget massa
+		sit amet, volutpat cursus mauris. Proin et massa dui. Vestibulum eu tempus nisl, vitae bibendum
+		urna. Sed tincidunt est non nulla scelerisque.
+	</span>
+</div>
diff --git a/frontend/src/lib/components/footer/page3.svelte b/frontend/src/lib/components/footer/page3.svelte
new file mode 100644
index 0000000..358b5a6
--- /dev/null
+++ b/frontend/src/lib/components/footer/page3.svelte
@@ -0,0 +1,16 @@
+<script>
+	import '$lib/css/base.css';
+	import '$lib/css/footer/page.css';
+
+	import SvgIcon from '@jamescoyle/svelte-icon';
+	import { mdiEmailFast, mdiHelp } from '@mdi/js';
+</script>
+
+<div class="page-icon-text">
+	<SvgIcon type="mdi" path={mdiEmailFast} />
+	<a href="mailto:blog@etheryo.fr">Envoyez nous un mail</a>
+</div>
+<div class="page-icon-text">
+	<SvgIcon type="mdi" path={mdiHelp} />
+	<a href="https://duckduckgo.com/">Besoin d'aide</a>
+</div>
\ No newline at end of file
diff --git a/frontend/src/lib/css/base.css b/frontend/src/lib/css/base.css
index 36f0a4b..4dfd8d5 100644
--- a/frontend/src/lib/css/base.css
+++ b/frontend/src/lib/css/base.css
@@ -132,4 +132,9 @@ h1 {
 .inherit-w-h {
     width: inherit;
     height: inherit;
+}
+
+.text-justify {
+    text-align: justify;
+    text-justify: inter-word;
 }
\ No newline at end of file
diff --git a/frontend/src/lib/css/button-slider.css b/frontend/src/lib/css/button-slider.css
new file mode 100644
index 0000000..c2f1503
--- /dev/null
+++ b/frontend/src/lib/css/button-slider.css
@@ -0,0 +1,35 @@
+.button-slider-container {
+    display: flex;
+    width: 100%;
+    height: 3.5rem;
+    background: linear-gradient(180deg, rgba(248, 241, 241, 1) 0%, rgba(221, 212, 223, 1) 100%);
+    border-radius: 3rem;
+    padding: 0 !important;
+}
+
+.button-slider-active {
+    background-image: linear-gradient(to right, var(--navbar-dark) 0%, var(--navbar-light) 100%);
+    box-shadow: 0px 8px 18px -1px rgba(52, 42, 58, 0.2);
+}
+
+.button-slider-active span {
+    color: var(--color-background) !important;
+}
+
+.button-slider-container button {
+    background-color: #00000000;
+    font-family: 'JetBrains Mono';
+    border-radius: 3rem;
+    height: 2.5rem;
+    display: flex;
+    align-items: center;
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
+    border: none;
+    cursor: pointer;
+}
+
+.button-slider-container span {
+    padding: 1.6rem;
+    color: var(--color-text);
+}
\ No newline at end of file
diff --git a/frontend/src/lib/css/footer.css b/frontend/src/lib/css/footer.css
index 9325737..2601e55 100644
--- a/frontend/src/lib/css/footer.css
+++ b/frontend/src/lib/css/footer.css
@@ -1,8 +1,6 @@
 :root {
-    --footer-height: 20rem;
     --ratio-container: 70%;
     --ratio-content: 50%;
-    --font-size: 1.2rem;
 }
 
 .footer-container:before {
@@ -50,59 +48,6 @@
     overflow: hidden;
 }
 
-.footer-icon-text a {
-    text-decoration: none;
-    position: relative;
-    transition: all .3s ease 0s;
-}
-
-.footer-icon-text a:hover {
-    color: var(--palette-pink);
-}
-
-.footer-icon-text a::after {
-    content: ""; 
-    display: block; /* Ensure the pseudo-element takes up space */
-    position: absolute;
-    height: 0.2rem;
-    background-color: var(--palette-pink);
-    width: 0%;
-    transition: all .3s ease 0s;
-}
-
-.footer-icon-text a:hover::after {
-    width: 100%;
-}
-
-.footer-icon-text {
-    color: var(--color-background);
-    font-family: 'JetBrains Mono';
-    font-weight: 500;
-    font-size: var(--font-size);
-    display: flex;
-    align-items: center;
-    padding: 0.5rem;
-}
-
-.footer-icon-text i {
-    font-weight: 700;
-    font-size: 1.6rem;
-    color: var(--color-hiddentext);
-    cursor: default;
-}
-
-.footer-special svg {
-    padding-left: 2rem;
-    color: var(--color-hiddentext);
-}
-
-.footer-icon-text img, .footer-icon-text svg {
-    /* width: calc(calc(((var(--footer-height)*var(--ratio-container-float))) - 4rem)*(1/4)); */
-    width: 1.8rem;
-    height: auto;
-    padding-right: 2rem;
-}
-
 .footer-slider {
     width: inherit;
     height: calc(100% - var(--ratio-container));
@@ -118,4 +63,11 @@
 
 .footer-slider div {
     padding-right: 2rem;
+}
+
+.page-base {
+    min-height: 15rem;
+    max-height: 15rem;
+    display: flex;
+    flex-direction: column;
 }
\ No newline at end of file
diff --git a/frontend/src/lib/css/footer/page.css b/frontend/src/lib/css/footer/page.css
new file mode 100644
index 0000000..5cfbfad
--- /dev/null
+++ b/frontend/src/lib/css/footer/page.css
@@ -0,0 +1,71 @@
+:root {
+    --a-size: 1.2rem;
+    --p-size: 1rem;
+}
+
+.page-icon-text a {
+    text-decoration: none;
+    position: relative;
+    font-size: var(--a-size);
+    transition: all .3s ease 0s;
+}
+
+.page-icon-text a:hover {
+    color: var(--palette-pink);
+}
+
+.page-icon-text a::after {
+    content: ""; 
+    display: block; /* Ensure the pseudo-element takes up space */
+    position: absolute;
+    height: 0.2rem;
+    background-color: var(--palette-pink);
+    width: 0%;
+    transition: all .3s ease 0s;
+}
+
+.page-icon-text a:hover::after {
+    width: 100%;
+}
+
+.page-icon-text {
+    color: var(--color-background);
+    font-family: 'JetBrains Mono';
+    font-weight: 500;
+    display: flex;
+    align-items: center;
+    padding: 0.5rem;
+}
+
+.page-icon-text i {
+    font-weight: 700;
+    font-size: 1.6rem;
+    color: var(--color-hiddentext);
+    cursor: default;
+}
+
+.page-special svg {
+    padding-left: 2rem;
+    color: var(--color-hiddentext);
+}
+
+.page-icon-text img, .page-icon-text svg {
+    /* width: calc(calc(((var(--page-height)*var(--ratio-container-float))) - 4rem)*(1/4)); */
+    width: 1.8rem;
+    height: auto;
+    padding-right: 2rem;
+}
+
+.page-text {
+    color: var(--color-hiddentext);
+    font-family: 'JetBrains Mono';
+    font-weight: 400;
+    font-size: var(--p-size);
+    display: flex;
+    align-items: center;
+    padding: 0.5rem;
+}
+
+.page-overflow {
+    max-height: 10rem;
+}
\ No newline at end of file