diff --git a/website/components/AddEditFunction.js b/website/components/FunctionAdmin/AddEditFunction.js
similarity index 96%
rename from website/components/AddEditFunction.js
rename to website/components/FunctionAdmin/AddEditFunction.js
index e05d3bd..cdbcbb0 100644
--- a/website/components/AddEditFunction.js
+++ b/website/components/FunctionAdmin/AddEditFunction.js
@@ -1,9 +1,9 @@
 import { Fragment, useState, useEffect } from 'react';
 import htmlParser from 'html-react-parser';
-import Loader from '../components/Loader';
-import useAPI from '../hooks/useAPI';
-import api from '../utils/api';
-import '../public/css/pages/admin.css';
+import Loader from '../../components/Loader';
+import useAPI from '../../hooks/useAPI';
+import api from '../../utils/api';
+import '../../public/css/pages/admin.css';
 
 const AddEditFunction = (props) => {
 
diff --git a/website/components/EditArticleFunction.js b/website/components/FunctionAdmin/EditArticleFunction.js
similarity index 83%
rename from website/components/EditArticleFunction.js
rename to website/components/FunctionAdmin/EditArticleFunction.js
index 253c668..66667eb 100644
--- a/website/components/EditArticleFunction.js
+++ b/website/components/FunctionAdmin/EditArticleFunction.js
@@ -1,10 +1,10 @@
 import { useState } from 'react';
 import dynamic from 'next/dynamic';
-import { complex } from '../utils/sunEditorConfig';
-import api from '../utils/api';
-import FunctionArticle from '../components/FunctionArticle';
+import { complex } from '../../utils/sunEditorConfig';
+import api from '../../utils/api';
+import FunctionArticle from '../FunctionPage/FunctionArticle';
 import 'notyf/notyf.min.css';
-import '../public/css/suneditor.min.css';
+import '../../public/css/suneditor.min.css';
 
 const SunEditor = dynamic(
     () => import('suneditor-react'),
diff --git a/website/components/EditFormFunction.js b/website/components/FunctionAdmin/EditFormFunction.js
similarity index 99%
rename from website/components/EditFormFunction.js
rename to website/components/FunctionAdmin/EditFormFunction.js
index 913d7c1..74b0d63 100644
--- a/website/components/EditFormFunction.js
+++ b/website/components/FunctionAdmin/EditFormFunction.js
@@ -1,5 +1,5 @@
 import { useState, Fragment } from 'react';
-import api from '../utils/api';
+import api from '../../utils/api';
 import 'notyf/notyf.min.css';
 
 const EditFormFunction = (props) => {
diff --git a/website/components/CommentCard/CommentCard.css b/website/components/FunctionPage/CommentCard/CommentCard.css
similarity index 100%
rename from website/components/CommentCard/CommentCard.css
rename to website/components/FunctionPage/CommentCard/CommentCard.css
diff --git a/website/components/CommentCard/CommentCard.js b/website/components/FunctionPage/CommentCard/CommentCard.js
similarity index 92%
rename from website/components/CommentCard/CommentCard.js
rename to website/components/FunctionPage/CommentCard/CommentCard.js
index 578a721..a8a30bc 100644
--- a/website/components/CommentCard/CommentCard.js
+++ b/website/components/FunctionPage/CommentCard/CommentCard.js
@@ -1,9 +1,9 @@
 import Link from 'next/link';
 import { forwardRef, useContext, Fragment } from 'react';
 import date from 'date-and-time';
-import { UserContext } from '../../contexts/UserContext';
-import { API_URL } from '../../utils/config';
-import api from '../../utils/api';
+import { UserContext } from '../../../contexts/UserContext';
+import { API_URL } from '../../../utils/config';
+import api from '../../../utils/api';
 import './CommentCard.css';
 
 const CommentCard = forwardRef((props, ref) => {
diff --git a/website/components/FunctionArticle.js b/website/components/FunctionPage/FunctionArticle.js
similarity index 100%
rename from website/components/FunctionArticle.js
rename to website/components/FunctionPage/FunctionArticle.js
diff --git a/website/components/FunctionComments/FunctionComments.css b/website/components/FunctionPage/FunctionComments/FunctionComments.css
similarity index 100%
rename from website/components/FunctionComments/FunctionComments.css
rename to website/components/FunctionPage/FunctionComments/FunctionComments.css
diff --git a/website/components/FunctionComments/FunctionComments.js b/website/components/FunctionPage/FunctionComments/FunctionComments.js
similarity index 96%
rename from website/components/FunctionComments/FunctionComments.js
rename to website/components/FunctionPage/FunctionComments/FunctionComments.js
index b98f8f5..30093ea 100644
--- a/website/components/FunctionComments/FunctionComments.js
+++ b/website/components/FunctionPage/FunctionComments/FunctionComments.js
@@ -1,9 +1,9 @@
 import { Fragment, useState, useEffect, useContext, useRef, useCallback } from 'react';
 import Link from 'next/link';
-import { UserContext } from '../../contexts/UserContext';
+import { UserContext } from '../../../contexts/UserContext';
 import CommentCard from '../CommentCard/CommentCard';
-import Loader from '../Loader';
-import api from '../../utils/api';
+import Loader from '../../Loader';
+import api from '../../../utils/api';
 import './FunctionComments.css';
 
 const FunctionComments = ({ functionId }) => {
diff --git a/website/components/FunctionComponentTop.js b/website/components/FunctionPage/FunctionComponentTop.js
similarity index 92%
rename from website/components/FunctionComponentTop.js
rename to website/components/FunctionPage/FunctionComponentTop.js
index 8f236df..1282618 100644
--- a/website/components/FunctionComponentTop.js
+++ b/website/components/FunctionPage/FunctionComponentTop.js
@@ -4,10 +4,10 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faStar } from '@fortawesome/free-solid-svg-icons';
 import { faStar as farStar } from '@fortawesome/free-regular-svg-icons';
 import date from 'date-and-time';
-import { UserContext } from '../contexts/UserContext';
-import api from '../utils/api';
-import { API_URL } from '../utils/config';
-import './FunctionCard/FunctionCard.css';
+import { UserContext } from '../../contexts/UserContext';
+import api from '../../utils/api';
+import { API_URL } from '../../utils/config';
+import '../FunctionCard/FunctionCard.css';
 
 const FunctionComponentTop = (props) => {
 
diff --git a/website/components/FunctionForm.js b/website/components/FunctionPage/FunctionForm.js
similarity index 98%
rename from website/components/FunctionForm.js
rename to website/components/FunctionPage/FunctionForm.js
index d1af5d3..95fdcd2 100644
--- a/website/components/FunctionForm.js
+++ b/website/components/FunctionPage/FunctionForm.js
@@ -1,8 +1,8 @@
 import { Fragment, useState, useEffect } from 'react';
-import Loader from './Loader';
+import Loader from '../Loader';
 import htmlParser from 'html-react-parser';
 import dynamic from 'next/dynamic';
-import api from '../utils/api';
+import api from '../../utils/api';
 import fr from 'date-fns/locale/fr';
 import { registerLocale } from  "react-datepicker";
 import date from 'date-and-time';
diff --git a/website/components/FunctionPage/FunctionPage.js b/website/components/FunctionPage/FunctionPage.js
index ab95ff4..a0584ba 100644
--- a/website/components/FunctionPage/FunctionPage.js
+++ b/website/components/FunctionPage/FunctionPage.js
@@ -2,7 +2,7 @@ import { Fragment, useState } from 'react';
 import { API_URL } from '../../utils/config';
 import HeadTag from '../HeadTag';
 import FunctionTabsTop from './FunctionTabsTop';
-import FunctionComponentTop from '../FunctionComponentTop';
+import FunctionComponentTop from './FunctionComponentTop';
 
 const FunctionPage = (props) => {
 
diff --git a/website/components/FunctionTabs/FunctionTabs.css b/website/components/FunctionPage/FunctionTabs.css
similarity index 100%
rename from website/components/FunctionTabs/FunctionTabs.css
rename to website/components/FunctionPage/FunctionTabs.css
diff --git a/website/components/FunctionPage/FunctionTabs.js b/website/components/FunctionPage/FunctionTabs.js
index 02f90b3..7548a7a 100644
--- a/website/components/FunctionPage/FunctionTabs.js
+++ b/website/components/FunctionPage/FunctionTabs.js
@@ -1,5 +1,5 @@
 import SwipeableViews from 'react-swipeable-views';
-import '../../components/FunctionTabs/FunctionTabs.css';
+import './FunctionTabs.css';
 
 const FunctionTabs = (props) => {
     return (
diff --git a/website/components/FunctionTabManager.js b/website/components/FunctionTabManager.js
deleted file mode 100644
index 936aec9..0000000
--- a/website/components/FunctionTabManager.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import FunctionTabs from './FunctionTabs/FunctionTabs';
-import FunctionForm from './FunctionForm';
-import FunctionArticle from './FunctionArticle';
-import FunctionComments from './FunctionComments/FunctionComments';
-
-const FunctionTabManager = (props) => {
-    if (props.type === "form") {
-        return (
-            <FunctionTabs type={props.type}>
-                <div className="FunctionComponent__slide">
-                    <FunctionForm inputsArray={ [...props.utilizationForm || []] } slug={props.slug} />
-                </div>
-                <div className="FunctionComponent__slide">
-                    <FunctionArticle article={props.article} />
-                </div>
-                <div className="FunctionComponent__slide">
-                    <FunctionComments functionId={props.id} />
-                </div>
-            </FunctionTabs>
-        );
-    }
-
-    return (
-        <FunctionTabs type={props.type}>
-            <div className="FunctionComponent__slide">
-                <FunctionArticle article={props.article} />
-            </div>
-            <div className="FunctionComponent__slide">
-                <FunctionComments functionId={props.id} />
-            </div>
-        </FunctionTabs>
-    );
-}
-
-export default FunctionTabManager;
\ No newline at end of file
diff --git a/website/components/FunctionTabs/FunctionTabs.js b/website/components/FunctionTabs/FunctionTabs.js
deleted file mode 100644
index 808685d..0000000
--- a/website/components/FunctionTabs/FunctionTabs.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import { useContext } from 'react';
-import { FunctionTabsContext } from '../../contexts/FunctionTabsContext';
-import SwipeableViews from 'react-swipeable-views';
-import './FunctionTabs.css';
-
-function FunctionTabs(props) {
-
-    const { setSlideIndex, slideIndex } = useContext(FunctionTabsContext);
-
-    return (
-        <div className="container-fluid">
-            <SwipeableViews onChangeIndex={(index) => setSlideIndex(index)} index={slideIndex} enableMouseEvents>
-                {props.children}
-            </SwipeableViews>
-        </div>
-    );
-}
-
-export default FunctionTabs;
\ No newline at end of file
diff --git a/website/components/FunctionTabs/FunctionTabsTop.js b/website/components/FunctionTabs/FunctionTabsTop.js
deleted file mode 100644
index e6ab3b6..0000000
--- a/website/components/FunctionTabs/FunctionTabsTop.js
+++ /dev/null
@@ -1,45 +0,0 @@
-import { useContext } from 'react';
-import { FunctionTabsContext } from '../../contexts/FunctionTabsContext';
-import '../FunctionCard/FunctionCard.css';
-
-const FunctionTabsTop = (props) => {
-
-    const { setSlideIndex, slideIndex } = useContext(FunctionTabsContext);
-
-    return (
-        <div className="container">
-            <div className="row justify-content-center">
-                <ul className="FunctionTabs__nav">
-                    {(props.type !== 'article') &&
-                        <li className="FunctionTabs__nav-item">
-                            <a 
-                                className={`FunctionTabs__nav-link ${(slideIndex === 0) ? "FunctionTabs__nav-link-active" : ""}`}
-                                onClick={() => setSlideIndex(0)}
-                            >
-                                ⚙️ Utilisation
-                            </a>
-                        </li>
-                    }
-                    <li className="FunctionTabs__nav-item">
-                        <a 
-                            className={`FunctionTabs__nav-link ${((slideIndex === 1 && props.type !== 'article') || (props.type === 'article' && slideIndex === 0)) ? "FunctionTabs__nav-link-active" : ""}`}
-                            onClick={() => setSlideIndex((props.type === 'article') ? 0 : 1)}
-                        >
-                            📝 Article
-                        </a>
-                    </li>
-                    <li className="FunctionTabs__nav-item">
-                        <a 
-                            className={`FunctionTabs__nav-link ${((slideIndex === 2 && props.type !== 'article') || (props.type === 'article' && slideIndex === 1)) ? "FunctionTabs__nav-link-active" : ""}`}
-                            onClick={() => setSlideIndex((props.type === 'article') ? 1 : 2)}
-                        >
-                            📬 Commentaires
-                        </a>
-                    </li>
-                </ul>
-            </div>
-        </div>
-    );
-}
-
-export default FunctionTabsTop;
\ No newline at end of file
diff --git a/website/pages/admin/[slug].js b/website/pages/admin/[slug].js
index 2631a4a..c7ff0b3 100644
--- a/website/pages/admin/[slug].js
+++ b/website/pages/admin/[slug].js
@@ -2,13 +2,13 @@ import { Fragment, useState } from 'react';
 import Cookies from "universal-cookie";
 import SwipeableViews from 'react-swipeable-views';
 import HeadTag from '../../components/HeadTag';
-import AddEditFunction from '../../components/AddEditFunction';
-import EditArticleFunction from '../../components/EditArticleFunction';
-import EditFormFunction from '../../components/EditFormFunction';
+import AddEditFunction from '../../components/FunctionAdmin/AddEditFunction';
+import EditArticleFunction from '../../components/FunctionAdmin/EditArticleFunction';
+import EditFormFunction from '../../components/FunctionAdmin/EditFormFunction';
 import redirect from '../../utils/redirect';
 import api from '../../utils/api';
 import { API_URL } from '../../utils/config';
-import '../../components/FunctionTabs/FunctionTabs.css';
+import '../../components/FunctionPage/FunctionTabs.css';
 import '../../public/css/pages/admin.css';
 
 const AdminFunctionComponent = (props) => {
diff --git a/website/pages/admin/index.js b/website/pages/admin/index.js
index a157c0f..d504c27 100644
--- a/website/pages/admin/index.js
+++ b/website/pages/admin/index.js
@@ -6,7 +6,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faTimes } from '@fortawesome/free-solid-svg-icons';
 import Modal from '../../components/Modal';
 import FunctionsList from '../../components/FunctionsList/FunctionsList';
-import AddEditFunction from '../../components/AddEditFunction';
+import AddEditFunction from '../../components/FunctionAdmin/AddEditFunction';
 import redirect from '../../utils/redirect';
 import '../../public/css/pages/admin.css';
 
diff --git a/website/pages/functions/[slug].js b/website/pages/functions/[slug].js
index ac142d3..fd7f46e 100644
--- a/website/pages/functions/[slug].js
+++ b/website/pages/functions/[slug].js
@@ -1,26 +1,49 @@
-import FunctionTabsContextProvider from '../../contexts/FunctionTabsContext';
-import HeadTag from '../../components/HeadTag';
-import FunctionComponentTop from '../../components/FunctionComponentTop';
-import FunctionTabsTop from '../../components/FunctionTabs/FunctionTabsTop';
-import FunctionTabManager from '../../components/FunctionTabManager';
+import FunctionTabs from '../../components/FunctionPage/FunctionTabs';
+import FunctionForm from '../../components/FunctionPage/FunctionForm';
+import FunctionArticle from '../../components/FunctionPage/FunctionArticle';
+import FunctionComments from '../../components/FunctionPage/FunctionComments/FunctionComments';
+import FunctionPage from '../../components/FunctionPage/FunctionPage';
 import redirect from '../../utils/redirect';
 import api from '../../utils/api';
-import { API_URL } from '../../utils/config';
 import '../../public/css/pages/FunctionComponent.css';
 
-const FunctionComponent = (props) => {
+const FunctionTabManager = (props) => {
+    if (props.type === "form") {
+        return (
+            <FunctionTabs setSlideIndex={props.setSlideIndex} slideIndex={props.slideIndex}>
+                <div className="FunctionComponent__slide">
+                    <FunctionForm inputsArray={ [...props.utilizationForm || []] } slug={props.slug} />
+                </div>
+                <div className="FunctionComponent__slide">
+                    <FunctionArticle article={props.article} />
+                </div>
+                <div className="FunctionComponent__slide">
+                    <FunctionComments functionId={props.id} />
+                </div>
+            </FunctionTabs>
+        );
+    }
+
     return (
-        <FunctionTabsContextProvider>
-            <HeadTag title={props.title} description={props.description} image={API_URL + props.image} />
-            <div className="container-fluid">
-                <FunctionTabsTop type={props.type} />
-                <FunctionComponentTop { ...props } />
-                <FunctionTabManager { ...props } />
+        <FunctionTabs setSlideIndex={props.setSlideIndex} slideIndex={props.slideIndex}>
+            <div className="FunctionComponent__slide">
+                <FunctionArticle article={props.article} />
             </div>
-        </FunctionTabsContextProvider>
+            <div className="FunctionComponent__slide">
+                <FunctionComments functionId={props.id} />
+            </div>
+        </FunctionTabs>
     );
 }
 
+const FunctionComponent = (props) => (
+    <FunctionPage 
+        FunctionTabManager={FunctionTabManager}
+        { ...props }
+        tabNames={(props.type === "form") ? ["⚙️ Utilisation", "📝 Article", "📬 Commentaires"] : ["📝 Article", "📬 Commentaires"]} 
+    />
+);
+
 export async function getServerSideProps(context) {
     const { slug } = context.params;
     return api.get(`/functions/${slug}`)
diff --git a/website/pages/functions/randomQuote.js b/website/pages/functions/randomQuote.js
index 64a059e..32e8237 100644
--- a/website/pages/functions/randomQuote.js
+++ b/website/pages/functions/randomQuote.js
@@ -8,8 +8,8 @@ import htmlParser from 'html-react-parser';
 import Loader from '../../components/Loader';
 import FunctionPage from '../../components/FunctionPage/FunctionPage';
 import FunctionTabs from '../../components/FunctionPage/FunctionTabs';
-import FunctionArticle from '../../components/FunctionArticle';
-import FunctionComments from '../../components/FunctionComments/FunctionComments';
+import FunctionArticle from '../../components/FunctionPage/FunctionArticle';
+import FunctionComments from '../../components/FunctionPage/FunctionComments/FunctionComments';
 import api from '../../utils/api';
 import copyToClipboard from '../../utils/copyToClipboard';
 import 'notyf/notyf.min.css';