diff --git a/home.html b/home.html
index 53489c9..69eeda1 100644
--- a/home.html
+++ b/home.html
@@ -10,20 +10,20 @@
 <body>
 	<div id="background-popup-addcard">
 		<section id="popup-addcard">
-			<button id="close-popup-addcard" aria-label="close popup">
+			<button id="closer-popup-addcard" aria-label="close popup">
 				<img src="./assets/close.svg" alt="close popup" aria-hidden="true">
 			</button>
 			<h2>New Card</h2>
-			<form id="popup-addcard-form">
+			<form id="form-popup-addcard">
 				<label for="title">Title</label>
-				<input type="text" id="title" placeholder="Title" name="title">
+				<input type="text" id="title-input-addcard" placeholder="Enter an title" name="title">
 				<label for="username">Username</label>
-				<input type="text" id="username" placeholder="Username" name="username">
+				<input type="text" id="username-input-addcard" placeholder="Enter an username" name="username">
 				<label for="email">Email</label>
-				<input type="email" id="email" placeholder="Email" name="email">
+				<input type="email" id="email-input-addcard" placeholder="Enter an email" name="email">
 				<label for="password">Password</label>
-				<input type="password" id="password" placeholder="Password" name="password">
-				<button id="popup-addcard-submit">Add Card</button>
+				<input type="password" id="password-input-addcard" placeholder="Enter an password" name="password">
+				<button id="submit-popup-addcard">Add Card</button>
 			</form>
 		</section>
 	</div>
diff --git a/script.js b/script.js
index 16807c6..5c6533a 100644
--- a/script.js
+++ b/script.js
@@ -1,42 +1,48 @@
-const items = document.getElementById('items')
-const addItem = document.getElementById('add-item')
-const closePopup = document.getElementById('close-popup')
-const backgroundPopup = document.getElementById('background-popup')
-const popup = document.getElementById('popup')
-const addCard = document.getElementById('popup-button')
-const title = document.getElementById('title')
-const username = document.getElementById('username')
-const email = document.getElementById('email')
-const password = document.getElementById('password')
+// Main elements
+const cards = document.getElementById('cards')
+const buttonAddCard = document.getElementById('button-addcard')
+
+// Popup elements
+const backgroundPopupAddCard = document.getElementById('background-popup-addcard')
+const popupAddCard = document.getElementById('popup-addcard')
+const closerPopupAddCard = document.getElementById('closer-popup-addcard')
+const formPopupAddCard = document.getElementById('form-popup-addcard')
+const submitPopupAddCard = document.getElementById('submit-popup-addcard')
+
+const titleInputPopupAddCard = document.getElementById('title-input-addcard')
+const usernameInputPopupAddCard = document.getElementById('username-input-addcard')
+const emailInputPopupAddCard = document.getElementById('email-input-addcard')
+const passwordInputPopupAddCard = document.getElementById('password-input-addcard')
 
 // Cancel submit  
-const addCardForm = document.getElementById('popup-addcard-form')
-
-addCardForm.addEventListener('submit', event => {
+formPopupAddCard.addEventListener('submit', event => {
 	event.preventDefault()
 })
 
-backgroundPopup.style.display = 'none'
-popup.style.display = 'none'
+// Popup visibility
+backgroundPopupAddCard.classList.add("hiden");
+
+function showPopup() {
+	backgroundPopupAddCard.classList.remove("hiden");
+}
 
-function addAnItem() {
-	showPopup()
+function hidePopup() {
+	console.log('coucou')
+	backgroundPopupAddCard.classList.add("hiden");
 }
 
-function addACard() {
+// Add card fonctionality
+function addCard() {
 	hidePopup()
 	const cardTitle = document.createElement('h2')
-	cardTitle.textContent = title.value
-	title.value = ''
+	cardTitle.textContent = titleInputPopupAddCard.value
 	const cardUsername = document.createElement('p')
-	cardUsername.textContent = `Username : ${username.value}`
-	username.value = ''
+	cardUsername.textContent = `Username : ${usernameInputPopupAddCard.value}`
 	const cardEmail = document.createElement('p')
-	cardEmail.textContent = `Email : ${email.value}`
-	email.value = ''
+	cardEmail.textContent = `Email : ${emailInputPopupAddCard.value}`
 	const cardPassword = document.createElement('p')
-	cardPassword.textContent = `Password : ${password.value}`
-	password.value = ''
+	cardPassword.textContent = `Password : ${passwordInputPopupAddCard.value}`
+	formPopupAddCard.reset()
 	const cardLi = document.createElement('li')
 	cardLi.appendChild(cardTitle)
 	cardLi.appendChild(cardUsername)
@@ -45,24 +51,9 @@ function addACard() {
 	items.appendChild(cardLi)
 }
 
-function showPopup() {
-	backgroundPopup.style.display = 'flex'
-	popup.style.display = 'flex'
-}
-
-function hidePopup() {
-	backgroundPopup.style.display = 'none'
-	popup.style.display = 'none'
-}
-
-addItem.addEventListener('click', event => {
-	addAnItem()
-})
-
-closePopup.addEventListener('click', event => {
-	hidePopup()
-})
+// Main events
+buttonAddCard.addEventListener('click', showPopup)
 
-addCard.addEventListener('click', event => {
-	addACard()
-})
\ No newline at end of file
+// Popup events
+closerPopupAddCard.addEventListener('click', hidePopup)
+submitPopupAddCard.addEventListener('click', addCard)
\ No newline at end of file
diff --git a/style.css b/style.css
index b11dfa9..1910ac1 100644
--- a/style.css
+++ b/style.css
@@ -1,5 +1,15 @@
 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');
 
+:root {
+	--color-blue: #083553;
+	--color-green: #019F55;
+	--color-green-hover: #007e43;
+	--color-beige: #F5F5DC;
+	--color-transparent: #ffffff2a;
+	--color-transparent-hover: #ffffff3f;
+	--color-blur: #0000005e;
+}
+
 html, body {
 	box-sizing: border-box;
 	width: 100%;
@@ -7,77 +17,114 @@ html, body {
 	overflow-x: hidden;
 	margin: 0;
 	padding: 0;
-	background-color: #083553;
+	background-color: var(--color-blue);
 	font-family: 'Poppins', sans-serif;
 }
 
-#background-popup {
+.hidden {
+	display: none;
+}
+
+/*-------------------- popup addcard --------------------*/
+
+#background-popup-addcard {
 	z-index: 2;
 	position: absolute;
 	width: 100vw;
 	height: 100vh;
-	background-color: #0000005e;
+	background-color: var(--color-blur);
 	display: flex;
 	justify-content: center;
 	align-items: center;
 }
 
-#popup {
+#popup-addcard {
 	z-index: 3;
 	width: 450px;
 	height: 550px;
-	background-color: beige;
+	background-color: var(--color-beige);
 	display: flex;
 	flex-direction: column;
+	border-radius: 10px;
 }
 
-#popup img {
+#closer-popup-addcard {
 	width: 40px;
 	height: 40px;
 	position: relative;
 	top: 5px;
 	left: 405px;
 	cursor: pointer;
+	background-color: transparent;
+	border: none;
+	padding: 0;
+}
+
+#closer-popup-addcard img {
+	width: 40px;
+	height: 40px;
+	transition: 0.3s;
 }
 
-#popup form {
+#closer-popup-addcard img:hover {
+	scale: 1.1;
+}
+
+#popup-addcard h2 {
+	margin: 0;
+	padding: 0;
+	text-align: center;
+	font-weight: 600;
+}
+
+#form-popup-addcard {
 	height: 100%;
 	display: flex;
 	flex-direction: column;
 	align-items: center;
 	gap: 2px;
+	padding: 15px 30px;
 }
 
-#popup h2 {
-	margin: 0;
-	padding: 0;
-	margin-bottom: 20px;
+#form-popup-addcard label {
+	font-size: 18px;
+	width: 88%;
 }
 
-#popup form input {
-	margin-bottom: 30px;	
+#form-popup-addcard input {
+	margin-bottom: 15px;	
 	border: none;
 	width: 80%;
-	font-size: 20px;
+	font-size: 18px;
 	outline: none;
-	padding: 5px 7px;
+	padding: 10px 15px;
+	border-radius: 5px;
+	border: 2px solid #ccc;
+	border-bottom-width: 3px;
+	transition: 0.2s;
 }
 
-#popup-button {
-	margin-bottom: 30px;	
+#form-popup-addcard input:focus {
+	border-color: var(--color-green);
+}
+
+#submit-popup-addcard {	
+	margin-top: 15px;
 	border: none;
 	height: 50px;
 	width: 50%;
-	background-color: #019f55;
+	background-color: var(--color-green);
 	font-size: 25px;
 	font-family: 'Poppins', sans-serif;
-	color: #ffffff;
+	color: white;
 	transition: 0.3s;
 	cursor: pointer;
+	border-radius: 5px;
 }
 
-#popup-button:hover {
-	background-color: #00cf6f;
+#submit-popup-addcard:hover {
+	background-color: var(--color-green-hover);
+	font-size: 24px;
 }
 
 header {
@@ -99,13 +146,13 @@ header {
 .logo-password {
 	height: 50px;
 	font-size: 50px;
-	color: #019f55;
+	color: var(--color-green);
 }
 
 .logo-manager {
 	height: 35px;
 	font-size: 35px;
-	color: #ffffff;
+	color: var(--color-beige);
 }
 
 main {
@@ -126,7 +173,7 @@ main {
 	margin: auto;
 	width: 400px;
 	height: 220px;
-	background-color: beige;
+	background-color: var(--color-beige);
 	border-radius: 10px;
 	animation: append-animate .4s ease-out;
 }
@@ -138,7 +185,7 @@ main {
 	text-align: center;
 	margin-top: 25px;
 	margin-bottom: 30px;
-	color: #019f55;
+	color: var(--color-green);
 }
 
 #items li p {
@@ -165,7 +212,7 @@ main {
 	height: 220px;
 	border-radius: 10px;
 	border: none;
-	background-color: rgba(255, 255, 255, 0.164);
+	background-color: var(--color-transparent);
 	display: flex;
 	align-items: center;
 	justify-content: center;
@@ -175,7 +222,7 @@ main {
 
 #add-item span{
 	font-size: 60px;
-	color: #019f55;
+	color: var(--color-green);
 	transition: 0.5s;
 }
 
@@ -256,10 +303,10 @@ main {
 }
 
 #add-item:hover {
-	background-color: rgba(255, 255, 255, 0.247);
+	background-color: var(--color-transparent-hover);
 }
 
 #add-item:hover span{
-	color: #00bd65;
+	color: var(--color-green-hover);
 	scale: 1.3;
-}
\ No newline at end of file
+}