diff --git a/src/assets/css/components/CountrySelect.scss b/src/assets/css/components/CountrySelect.scss
new file mode 100644
index 0000000..c4668dc
--- /dev/null
+++ b/src/assets/css/components/CountrySelect.scss
@@ -0,0 +1,13 @@
+.country-select {
+	@apply bg-white border border-neutral-300 border-solid max-h-64 overflow-y-auto rounded-lg shadow-lg text-white w-fit;
+	&__country-list {
+		overflow-y: scroll;
+		@apply list-none;
+	}
+	li {
+		@apply flex items-center text-neutral-800 py-1;
+		.flag {
+			@apply pr-4;
+		}
+	}
+}
diff --git a/src/components/CountrySelect.jsx b/src/components/CountrySelect.jsx
new file mode 100644
index 0000000..71ef76d
--- /dev/null
+++ b/src/components/CountrySelect.jsx
@@ -0,0 +1,28 @@
+import React from "react";
+import { COUNTRIES } from "../utils/countries.js";
+import { v4 as uuidv4 } from "uuid";
+
+export default function CountrySelect() {
+	const test = COUNTRIES.map((country) => {
+		if (!country.value) return;
+		return (
+			<li key={uuidv4()} value={country.value}>
+				<img
+					className='flag'
+					src={`https://flagsapi.com/${country.value}/flat/32.png`}
+					alt=''
+				/>
+				{country.title}
+			</li>
+		);
+	});
+
+	if (!COUNTRIES) return;
+
+	return (
+		<div className='country-select'>
+			<button className='country-select__toggle'>Salut</button>
+			<ul className='country-select__country-list'>{test}</ul>;
+		</div>
+	);
+}