diff --git a/public/locales/en/common.json b/public/locales/en/common.json
index f91a150..9f25d6b 100644
--- a/public/locales/en/common.json
+++ b/public/locales/en/common.json
@@ -31,5 +31,9 @@
   "generic-error-description": "An error has occurred, if this happens again please <a href=\"https://github.com/Sonny93/my-links\" target=\"_blank\">create an issue</a> with as much detail as possible.",
   "retry": "Retry",
   "privacy": "Privacy",
-  "terms": "Terms of use"
+  "terms": "Terms of use",
+  "language": {
+    "fr": "French",
+    "en": "English"
+  }
 }
diff --git a/public/locales/fr/common.json b/public/locales/fr/common.json
index 8f7c37d..bbd36f2 100644
--- a/public/locales/fr/common.json
+++ b/public/locales/fr/common.json
@@ -31,5 +31,9 @@
   "generic-error-description": "Une erreur est survenue, si cela se reproduit merci de <a href=\"https://github.com/Sonny93/my-links\" target=\"_blank\">créer une issue</a> avec le maximum de détails.",
   "retry": "Recommencer",
   "privacy": "Confidentialité",
-  "terms": "CGU"
+  "terms": "CGU",
+  "language": {
+    "fr": "Français",
+    "en": "Anglais"
+  }
 }
diff --git a/src/components/LangSelector.tsx b/src/components/LangSelector.tsx
index dbf9bd5..25fd3dd 100644
--- a/src/components/LangSelector.tsx
+++ b/src/components/LangSelector.tsx
@@ -3,7 +3,7 @@ import { useRouter } from "next/router";
 
 export default function LangSelector() {
   const router = useRouter();
-  const { i18n } = useTranslation();
+  const { t, i18n } = useTranslation();
 
   const onToggleLanguageClick = (newLocale: string) => {
     const { pathname, asPath, query } = router;
@@ -23,7 +23,7 @@ export default function LangSelector() {
     >
       {languages.map((lang) => (
         <option key={lang} value={lang}>
-          {lang}
+          {t(`common:language.${lang as "fr" | "en"}`)}
         </option>
       ))}
     </select>
diff --git a/src/components/Links/links.module.scss b/src/components/Links/links.module.scss
index c17eb3f..c9c6e2d 100644
--- a/src/components/Links/links.module.scss
+++ b/src/components/Links/links.module.scss
@@ -16,7 +16,6 @@
     width: 100%;
     text-align: center;
     text-overflow: ellipsis;
-    text-align: center;
     white-space: nowrap;
     overflow: hidden;
   }
diff --git a/src/components/Settings/SettingsModal.tsx b/src/components/Settings/SettingsModal.tsx
new file mode 100644
index 0000000..90222ae
--- /dev/null
+++ b/src/components/Settings/SettingsModal.tsx
@@ -0,0 +1,32 @@
+import { AnimatePresence } from "framer-motion";
+import useModal from "hooks/useModal";
+import Modal from "../Modal/Modal";
+import * as Keys from "constants/keys";
+import { useHotkeys } from "react-hotkeys-hook";
+import { IoSettingsOutline } from "react-icons/io5";
+import LangSelector from "../LangSelector";
+
+export default function SettingsModal() {
+  const modal = useModal();
+  useHotkeys(Keys.CLOSE_SEARCH_KEY, modal.close, {
+    enabled: modal.isShowing,
+    enableOnFormTags: ["INPUT"],
+  });
+
+  return (
+    <>
+      <button onClick={modal.open} className="reset" title="Settings">
+        <IoSettingsOutline size={24} />
+      </button>
+      <AnimatePresence>
+        {modal.isShowing && (
+          <Modal title="Settings" close={modal.close}>
+            <LangSelector />
+            <p>about tab with all links related to MyLinks</p>
+            <button>disconnect</button>
+          </Modal>
+        )}
+      </AnimatePresence>
+    </>
+  );
+}
diff --git a/src/components/SideMenu/UserCard/UserCard.tsx b/src/components/SideMenu/UserCard/UserCard.tsx
index 59d78d4..defb97c 100644
--- a/src/components/SideMenu/UserCard/UserCard.tsx
+++ b/src/components/SideMenu/UserCard/UserCard.tsx
@@ -1,10 +1,9 @@
-import PATHS from "constants/paths";
-import { signOut, useSession } from "next-auth/react";
+import { useSession } from "next-auth/react";
 import { useTranslation } from "next-i18next";
 import Image from "next/image";
-import { FiLogOut } from "react-icons/fi";
 import { TFunctionParam } from "types/i18next";
 import styles from "./user-card.module.scss";
+import SettingsModal from "components/Settings/SettingsModal";
 
 export default function UserCard() {
   const { data } = useSession({ required: true });
@@ -25,13 +24,7 @@ export default function UserCard() {
         />
         {data.user.name}
       </div>
-      <button
-        onClick={() => signOut({ callbackUrl: PATHS.LOGIN })}
-        className="reset"
-        title={t("common:logout")}
-      >
-        <FiLogOut size={24} />
-      </button>
+      <SettingsModal />
     </div>
   );
 }
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index efac005..6f0c492 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -138,7 +138,11 @@ export default function HomePage(props: HomePageProps) {
   );
 
   return (
-    <PageTransition className="App">
+    <PageTransition
+      className="App"
+      style={{ flexDirection: "row" }}
+      hideLangageSelector
+    >
       {isMobile ? (
         <>
           <span