diff --git a/package.json b/package.json
index a1265fb..bc0fc27 100644
--- a/package.json
+++ b/package.json
@@ -24,12 +24,13 @@
     "@apollo/client": "^3.8.1",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
+    "@heroicons/react": "^2.0.18",
     "@mui/material": "^5.13.5",
     "@types/styled-components": "^5.1.0",
     "classnames": "^2.3.2",
     "clsx": "^2.0.0",
     "focus-trap-react": "^10.1.4",
-    "framer-motion": "^10.12.18",
+    "framer-motion": "^10.16.1",
     "graphql": "^16.8.0",
     "i18next": "^23.4.5",
     "inquirer-fuzzy-path": "^2.3.0",
diff --git a/src/app/(public)/about/work/page.tsx b/src/app/(public)/about/work/page.tsx
index 701f948..99a1ac6 100644
--- a/src/app/(public)/about/work/page.tsx
+++ b/src/app/(public)/about/work/page.tsx
@@ -2,7 +2,7 @@ import Image from 'next/image';
 import * as React from 'react';
 import ReactMarkdown from 'react-markdown';
 
-import Heading from '@/components/atoms/Heading';
+import Heading from '@/components/atoms/headings/Heading';
 import Education from '@/components/organisms/about-work/Education';
 import Intro from '@/components/organisms/about-work/Intro';
 import Languages from '@/components/organisms/about-work/Languages';
diff --git a/src/app/(public)/layout-client.tsx b/src/app/(public)/layout-client.tsx
index 7054401..ebaece5 100644
--- a/src/app/(public)/layout-client.tsx
+++ b/src/app/(public)/layout-client.tsx
@@ -1,19 +1,26 @@
 'use client';
 
-import { ThemeProvider } from 'next-themes';
+import { ThemeProvider as NextThemeProvider } from 'next-themes';
 import type { PropsWithChildren } from 'react';
 
+import MuiThemeProvider from '@/components/helpers/MuiThemeProvider';
 import Footer from '@/components/layout/Footer';
 import Header from '@/components/layout/Header';
 
 export default function LayoutClient({ children }: PropsWithChildren) {
   return (
-    <ThemeProvider attribute='class' defaultTheme='light' enableSystem={false}>
-      <Header />
+    <NextThemeProvider
+      attribute='class'
+      defaultTheme='light'
+      enableSystem={false}
+    >
+      <MuiThemeProvider>
+        <Header />
 
-      <main id='content'>{children}</main>
+        <main id='content'>{children}</main>
 
-      <Footer />
-    </ThemeProvider>
+        <Footer />
+      </MuiThemeProvider>
+    </NextThemeProvider>
   );
 }
diff --git a/src/components/atoms/LanguageSwitcher/LanguageSwitcher.tsx b/src/components/atoms/LanguageSwitcher/LanguageSwitcher.tsx
new file mode 100644
index 0000000..01abc70
--- /dev/null
+++ b/src/components/atoms/LanguageSwitcher/LanguageSwitcher.tsx
@@ -0,0 +1,89 @@
+import { InputLabel, MenuItem, Select, SelectChangeEvent } from '@mui/material';
+import FormControl from '@mui/material/FormControl';
+import * as React from 'react';
+import { useEffect, useState } from 'react';
+import { HiLanguage } from 'react-icons/hi2';
+
+import i18n from '@/app/(public)/i18n';
+
+export interface LanguageSwitcherProps {
+  languages: LanguageDef[];
+}
+
+export interface LanguageDef {
+  label: string;
+  value: string;
+  disabled?: boolean;
+}
+
+const LanguageSwitcher = ({ languages }: LanguageSwitcherProps) => {
+  const [_, setMounted] = useState(false);
+
+  // When mounted on client, now we can show the UI
+  useEffect(() => setMounted(true), []);
+
+  const [chosenLanguage, setChosenLanguage] = useState('');
+
+  const handleChange = (event: SelectChangeEvent) => {
+    const newLang = event.target.value;
+    setChosenLanguage(newLang);
+
+    i18n.changeLanguage(newLang);
+  };
+
+  const label = <HiLanguage />;
+
+  return (
+    <div>
+      <FormControl
+        size='small'
+        className='ring-offset-2'
+        sx={{
+          m: 1,
+          minWidth: 95,
+          '& .MuiFormLabel-root': {
+            fontSize: '1.5rem',
+          },
+          '& .MuiOutlinedInput-notchedOutline': {
+            borderWidth: '2px',
+            borderColor: '#E5E7EB',
+            borderRadius: '0.375rem',
+          },
+          '&:hover .MuiOutlinedInput-notchedOutline': {
+            borderColor: '#2562E8 !important',
+          },
+        }}
+      >
+        <InputLabel id='demo-select-small-label'>{label}</InputLabel>
+        <Select
+          id='demo-select-small'
+          labelId='demo-select-small-label'
+          value={chosenLanguage}
+          label={label}
+          onChange={handleChange}
+          sx={{
+            '& .MuiFormLabel-root': {
+              fontSize: '1.5rem',
+            },
+          }}
+        >
+          {languages.map(
+            (lang: LanguageDef) =>
+              !lang.disabled && (
+                <MenuItem
+                  className='font-light'
+                  style={{ fontSize: '14px', fontWeight: 300 }}
+                  key={lang.value}
+                  value={lang.value}
+                >
+                  {lang.label}
+                </MenuItem>
+              ),
+          )}
+        </Select>
+      </FormControl>
+    </div>
+  );
+};
+
+export default LanguageSwitcher;
diff --git a/src/components/atoms/LanguageSwitcher/LanguageSwitcherMobile.tsx b/src/components/atoms/LanguageSwitcher/LanguageSwitcherMobile.tsx
new file mode 100644
index 0000000..a74cbad
--- /dev/null
+++ b/src/components/atoms/LanguageSwitcher/LanguageSwitcherMobile.tsx
@@ -0,0 +1,53 @@
+import Image from 'next/image';
+import * as React from 'react';
+import { useEffect, useState } from 'react';
+
+import i18n from '@/app/(public)/i18n';
+
+export interface LanguageSwitcherProps {
+  languages: LanguageDef[];
+}
+
+export interface LanguageDef {
+  label: string;
+  value: string;
+  flag: string;
+  disabled?: boolean;
+}
+
+const LanguageSwitcherMobile = ({ languages }: LanguageSwitcherProps) => {
+  const [_, setMounted] = useState(false);
+
+  // When mounted on client, now we can show the UI
+  useEffect(() => setMounted(true), []);
+
+  const [__, setChosenLanguage] = useState('');
+
+  const handleChange = (newLang: string) => {
+    setChosenLanguage(newLang);
+    i18n.changeLanguage(newLang);
+  };
+
+  const flagSize = 20;
+
+  return (
+    <div className='flex flex-row'>
+      {languages.map(
+        (lang) =>
+          !lang.disabled && (
+            <Image
+              key={lang.value}
+              className='mx-2 hover:drop-shadow-md'
+              src={lang.flag}
+              alt={lang.value}
+              height={flagSize}
+              width={flagSize * 1.5}
+              onClick={() => handleChange(lang.value)}
+            />
+          ),
+      )}
+    </div>
+  );
+};
+
+export default LanguageSwitcherMobile;
diff --git a/src/components/atoms/LanguageSwitcher/__stories__/LanguageSwitcher.stories.tsx b/src/components/atoms/LanguageSwitcher/__stories__/LanguageSwitcher.stories.tsx
new file mode 100644
index 0000000..e673766
--- /dev/null
+++ b/src/components/atoms/LanguageSwitcher/__stories__/LanguageSwitcher.stories.tsx
@@ -0,0 +1,45 @@
+import { Meta } from '@storybook/react';
+
+import LanguageSwitcher, {
+  LanguageDef,
+  LanguageSwitcherProps,
+} from '@/components/atoms/LanguageSwitcher/LanguageSwitcher';
+
+const meta: Meta<typeof LanguageSwitcher> = {
+  title: 'LanguageSwitcher',
+  component: LanguageSwitcher,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+const languages: LanguageDef[] = [
+  {
+    label: '🇬🇧 EN',
+    value: 'en',
+  },
+  {
+    label: '🇮🇹 IT',
+    value: 'it',
+  },
+  {
+    label: '🇩🇪 DE',
+    value: 'de',
+  },
+  {
+    label: '🇫🇷 FR',
+    value: 'fr',
+  },
+  {
+    label: '🇪🇸 ES',
+    value: 'es',
+    disabled: true,
+  },
+];
+
+export const SampleStory = (args: LanguageSwitcherProps) => {
+  return <LanguageSwitcher {...args} />;
+};
+SampleStory.args = {
+  languages,
+};
diff --git a/src/components/atoms/Heading.tsx b/src/components/atoms/headings/Heading.tsx
similarity index 100%
rename from src/components/atoms/Heading.tsx
rename to src/components/atoms/headings/Heading.tsx
diff --git a/src/components/atoms/SectionHeading.tsx b/src/components/atoms/headings/SectionHeading.tsx
similarity index 100%
rename from src/components/atoms/SectionHeading.tsx
rename to src/components/atoms/headings/SectionHeading.tsx
diff --git a/src/components/buttons/ModeToggleButton.tsx b/src/components/buttons/ModeToggleButton.tsx
index 2b74f98..32c8d8b 100644
--- a/src/components/buttons/ModeToggleButton.tsx
+++ b/src/components/buttons/ModeToggleButton.tsx
@@ -20,17 +20,23 @@ export default function ModeToggleButton({
   }
 
   return (
-    <button
-      className={clsx(
-        'flex items-center justify-center rounded-md border-2 ' +
-          'border-grey-300 ring-grey-300 bg-transparent p-2 transition-all hover:ring-2 hover:ring-offset-2 ' +
-          'dark:border-grey-700 dark:ring-grey-200 dark:bg-transparent dark:hover:ring-2 dark:hover:ring-offset-2',
-        className,
-      )}
-      {...rest}
-      onClick={toggleMode}
-    >
-      {mounted ? <>{theme === 'light' ? <FiMoon /> : <FiSun />}</> : <FiSun />}
-    </button>
+    <div className='p-2'>
+      <button
+        className={clsx(
+          'flex items-center justify-center rounded-md border-2 ' +
+            'border-grey-300 ring-grey-300 bg-transparent p-2 transition-all hover:ring-2 hover:ring-offset-2 ' +
+            'dark:border-grey-700 dark:ring-grey-200 dark:bg-transparent dark:hover:ring-2 dark:hover:ring-offset-2',
+          className,
+        )}
+        {...rest}
+        onClick={toggleMode}
+      >
+        {mounted ? (
+          <>{theme === 'light' ? <FiMoon /> : <FiSun />}</>
+        ) : (
+          <FiSun />
+        )}
+      </button>
+    </div>
   );
 }
diff --git a/src/components/helpers/MuiThemeProvider.tsx b/src/components/helpers/MuiThemeProvider.tsx
new file mode 100644
index 0000000..a08d419
--- /dev/null
+++ b/src/components/helpers/MuiThemeProvider.tsx
@@ -0,0 +1,27 @@
+import { GlobalStyles } from '@mui/material';
+import { CssBaseline, ThemeProvider } from '@mui/material';
+import { useTheme } from 'next-themes';
+import { FC, useEffect, useState } from 'react';
+
+import { darkTheme, globalStyles, lightTheme } from '@/theme';
+
+const MUIThemeProvider: FC<{ children: React.ReactNode }> = ({ children }) => {
+  const { resolvedTheme } = useTheme();
+  const [currentTheme, setCurrentTheme] = useState(lightTheme);
+
+  useEffect(() => {
+    resolvedTheme === 'light'
+      ? setCurrentTheme(lightTheme)
+      : setCurrentTheme(darkTheme);
+  }, [resolvedTheme]);
+
+  return (
+    <ThemeProvider theme={currentTheme}>
+      <CssBaseline />
+      <GlobalStyles styles={globalStyles} />
+      {children}
+    </ThemeProvider>
+  );
+};
+
+export default MUIThemeProvider;
diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
index eb4aa97..ae74f1c 100644
--- a/src/components/layout/Header.tsx
+++ b/src/components/layout/Header.tsx
@@ -13,10 +13,15 @@ import { AiFillCaretDown, AiFillCaretUp } from 'react-icons/ai';
 import { useOnKeyDown } from '@/hooks/useOnKeyDown';
 
 import { BurgerIcon } from '@/components/atoms/BurgerIcon';
+import LanguageSwitcher, {
+  LanguageDef,
+} from '@/components/atoms/LanguageSwitcher/LanguageSwitcher';
 import ModeToggleButton from '@/components/buttons/ModeToggleButton';
 import UnstyledLink from '@/components/links/UnstyledLink';
 import { MobileMenu } from '@/components/molecules/MobileMenu/MobileMenu';
 
+import languages from '@/locales/languages.json';
+
 export const links = [
   { href: '/projects', label: 'headerMenu.projects' },
   { href: '/cv', label: 'headerMenu.cv' },
@@ -27,6 +32,8 @@ export const links = [
 export default function Header() {
   const { t } = useTranslation();
 
+  const languageDefs = languages as LanguageDef[];
+
   const [isOpen, setIsOpen] = useState(false);
 
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
@@ -115,7 +122,9 @@ export default function Header() {
               ))}
             </ul>
 
-            <div className='hidden md:block'>
+            <div className='hidden md:flex md:flex-row'>
+              <LanguageSwitcher languages={languageDefs} />
+
               <ModeToggleButton />
             </div>
           </nav>
diff --git a/src/components/molecules/MobileMenu/MobileMenu.tsx b/src/components/molecules/MobileMenu/MobileMenu.tsx
index 547211d..36f7bec 100644
--- a/src/components/molecules/MobileMenu/MobileMenu.tsx
+++ b/src/components/molecules/MobileMenu/MobileMenu.tsx
@@ -5,10 +5,13 @@ import { AnimatePresence, motion } from 'framer-motion';
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 
+import LanguageSwitcherMobile from '@/components/atoms/LanguageSwitcher/LanguageSwitcherMobile';
 import { NavigationItem } from '@/components/atoms/NavigationItem';
 import ModeToggleButton from '@/components/buttons/ModeToggleButton';
 import { links } from '@/components/layout/Header';
 
+import languages from '@/locales/languages.json';
+
 export interface MobileMenuProps {
   isOpen: boolean;
 }
@@ -66,6 +69,15 @@ export const MobileMenu = ({ isOpen }: MobileMenuProps) => {
               >
                 <ModeToggleButton />
               </motion.li>
+              <motion.li
+                className='flex justify-center'
+                variants={navigationVariants}
+                initial='hidden'
+                animate='visible'
+                custom={0.5 + (links.length + 2) * 0.1}
+              >
+                <LanguageSwitcherMobile languages={languages} />
+              </motion.li>
             </ul>
           </FocusTrap>
         </motion.div>
diff --git a/src/components/organisms/about-work/Education.tsx b/src/components/organisms/about-work/Education.tsx
index 899b78c..7fa7119 100644
--- a/src/components/organisms/about-work/Education.tsx
+++ b/src/components/organisms/about-work/Education.tsx
@@ -4,7 +4,7 @@ import Image from 'next/image';
 import * as React from 'react';
 import ReactMarkdown from 'react-markdown';
 
-import SectionHeading from '@/components/atoms/SectionHeading';
+import SectionHeading from '@/components/atoms/headings/SectionHeading';
 
 import { School } from '@/types/School';
 
diff --git a/src/components/organisms/about-work/Intro.tsx b/src/components/organisms/about-work/Intro.tsx
index e764300..9f06077 100644
--- a/src/components/organisms/about-work/Intro.tsx
+++ b/src/components/organisms/about-work/Intro.tsx
@@ -3,7 +3,7 @@
 import * as React from 'react';
 import ReactMarkdown from 'react-markdown';
 
-import SectionHeading from '@/components/atoms/SectionHeading';
+import SectionHeading from '@/components/atoms/headings/SectionHeading';
 
 import { SoftwareDevIntro } from '@/types/ShortText';
 
diff --git a/src/components/organisms/about-work/Languages.tsx b/src/components/organisms/about-work/Languages.tsx
index 918b3c9..960f90c 100644
--- a/src/components/organisms/about-work/Languages.tsx
+++ b/src/components/organisms/about-work/Languages.tsx
@@ -3,7 +3,7 @@
 import Image from 'next/image';
 import * as React from 'react';
 
-import SectionHeading from '@/components/atoms/SectionHeading';
+import SectionHeading from '@/components/atoms/headings/SectionHeading';
 
 import { Language } from '@/types/Language';
 
diff --git a/src/components/organisms/about-work/Publications.tsx b/src/components/organisms/about-work/Publications.tsx
index 9f68fdf..289f553 100644
--- a/src/components/organisms/about-work/Publications.tsx
+++ b/src/components/organisms/about-work/Publications.tsx
@@ -3,7 +3,7 @@
 import * as React from 'react';
 import { AiOutlineFilePdf } from 'react-icons/ai';
 
-import SectionHeading from '@/components/atoms/SectionHeading';
+import SectionHeading from '@/components/atoms/headings/SectionHeading';
 import UnstyledLink from '@/components/links/UnstyledLink';
 
 import { Publication } from '@/types/Publication';
diff --git a/src/components/organisms/about-work/WorkExperience.tsx b/src/components/organisms/about-work/WorkExperience.tsx
index 665eed8..89d3ddd 100644
--- a/src/components/organisms/about-work/WorkExperience.tsx
+++ b/src/components/organisms/about-work/WorkExperience.tsx
@@ -5,7 +5,7 @@ import { useTheme } from 'next-themes';
 import * as React from 'react';
 import ReactMarkdown from 'react-markdown';
 
-import SectionHeading from '@/components/atoms/SectionHeading';
+import SectionHeading from '@/components/atoms/headings/SectionHeading';
 
 import { Job } from '@/types/Job';
 
diff --git a/src/locales/en.json b/src/locales/en.json
index 42353a9..5cb0389 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -2,9 +2,9 @@
   "headerMenu": {
     "about": "About",
     "aboutWork": "Work & Career",
-    "aboutWorkMobile": "About - Work & Career",
+    "aboutWorkMobile": "About ~ Work & Career",
     "aboutFreeTime": "Free Time",
-    "aboutFreeTimeMobile": "About - Free Time",
+    "aboutFreeTimeMobile": "About ~ Free Time",
     "projects": "Projects",
     "cv": "CV",
     "uses": "Uses",
diff --git a/src/locales/it.json b/src/locales/it.json
index 41b9707..ac89960 100644
--- a/src/locales/it.json
+++ b/src/locales/it.json
@@ -1,13 +1,13 @@
 {
   "headerMenu": {
-    "about": "Su di me",
-    "aboutWork": "Carriera Lavorativa",
-    "aboutWorkMobile": "Su di me - Carriera Lavorativa",
+    "about": "About",
+    "aboutWork": "Lavoro",
+    "aboutWorkMobile": "About ~ Lavoro",
     "aboutFreeTime": "Tempo Libero",
-    "aboutFreeTimeMobile": "Su di me - Tempo Libero",
+    "aboutFreeTimeMobile": "About ~ Tempo Libero",
     "projects": "Progetti",
     "cv": "CV",
-    "uses": "Uses",
+    "uses": "Cose che uso",
     "contact": "Contatti"
   },
   "footerMenu": {
diff --git a/src/locales/languages.json b/src/locales/languages.json
new file mode 100644
index 0000000..0894826
--- /dev/null
+++ b/src/locales/languages.json
@@ -0,0 +1,18 @@
+[
+  {
+    "label": "🇬🇧 EN",
+    "flag": "https://res.cloudinary.com/dwrurydlt/image/upload/v1692716604/uk_657deb6132.svg",
+    "value": "en"
+  },
+  {
+    "label": "🇮🇹 IT",
+    "flag": "https://res.cloudinary.com/dwrurydlt/image/upload/v1692716604/it_00c57db1fb.svg",
+    "value": "it"
+  },
+  {
+    "label": "🇩🇪 DE",
+    "flag": "https://res.cloudinary.com/dwrurydlt/image/upload/v1692716604/de_9c5221adfa.svg",
+    "value": "de",
+    "disabled": true
+  }
+]
diff --git a/src/theme/createEmotionCache.ts b/src/theme/createEmotionCache.ts
new file mode 100644
index 0000000..4bc81ec
--- /dev/null
+++ b/src/theme/createEmotionCache.ts
@@ -0,0 +1,7 @@
+import createCache from '@emotion/cache';
+
+// prepend: true moves MUI styles to the top of the <head> so they're loaded first.
+// It allows developers to easily override MUI styles with other styling solutions, like CSS modules.
+export default function createEmotionCache() {
+  return createCache({ key: 'css', prepend: true });
+}
diff --git a/src/theme/index.ts b/src/theme/index.ts
new file mode 100644
index 0000000..4c9ec0e
--- /dev/null
+++ b/src/theme/index.ts
@@ -0,0 +1,29 @@
+import { createTheme, css, PaletteOptions } from '@mui/material/styles';
+
+export type AllowedTheme = NonNullable<PaletteOptions['mode']>;
+
+export const DEFAULT_THEME: AllowedTheme = 'light';
+
+export const lightTheme = createTheme({
+  palette: {
+    primary: { main: '#2152CE' },
+    secondary: { main: '#2a48f3' },
+    text: {
+      primary: '#000',
+    },
+    mode: 'light',
+  },
+});
+
+export const darkTheme = createTheme({
+  palette: {
+    primary: { main: '#2152CE' },
+    secondary: { main: '#2a48f3' },
+    text: {
+      primary: '#FFFFFF',
+    },
+    mode: 'dark',
+  },
+});
+
+export const globalStyles = css``;
diff --git a/yarn.lock b/yarn.lock
index 332b238..d319c2e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1709,6 +1709,11 @@
   resolved "https://verdaccio.mein-recycling.de/@graphql-typed-document-node%2fcore/-/core-3.2.0.tgz#5f3d96ec6b2354ad6d8a28bf216a1d97b5426861"
   integrity sha512-mB9oAsNCm9aM3/SOv4YtBMqZbYj10R7dkq8byBqxGY/ncFwhf2oQzMV+LCRlWoDSEBJ3COiR1yeDvMtsoOsuFQ==
 
+"@heroicons/react@^2.0.18":
+  version "2.0.18"
+  resolved "https://verdaccio.mein-recycling.de/@heroicons%2freact/-/react-2.0.18.tgz#f80301907c243df03c7e9fd76c0286e95361f7c1"
+  integrity sha512-7TyMjRrZZMBPa+/5Y8lN0iyvUU/01PeMGX2+RE7cQWpEUIcb4QotzUObFkJDejj/HUH4qjP/eQ0gzzKs2f+6Yw==
+
 "@humanwhocodes/config-array@^0.11.10":
   version "0.11.10"
   resolved "https://verdaccio.mein-recycling.de/@humanwhocodes%2fconfig-array/-/config-array-0.11.10.tgz#5a3ffe32cc9306365fb3fd572596cd602d5e12d2"
@@ -7482,7 +7487,7 @@ fraction.js@^4.2.0:
   resolved "https://verdaccio.mein-recycling.de/fraction.js/-/fraction.js-4.2.1.tgz#14b4cc886575a5684f8d5fd5759c5db376bb7bb8"
   integrity sha512-/KxoyCnPM0GwYI4NN0Iag38Tqt+od3/mLuguepLgCAKPn0ZhC544nssAW0tG2/00zXEYl9W+7hwAIpLHo6Oc7Q==
 
-framer-motion@^10.12.18:
+framer-motion@^10.16.1:
   version "10.16.1"
   resolved "https://verdaccio.mein-recycling.de/framer-motion/-/framer-motion-10.16.1.tgz#0ff5de554bbb35ee6605357d80f92b27d0271a94"
   integrity sha512-K6TXr5mZtitC/dxQCBdg7xzdN0d5IAIrlaqCPKtIQVdzVPGC0qBuJKXggHX1vjnP5gPOFwB1KbCCTWcnFc3kWg==