diff --git a/.gitignore b/.gitignore
index 4d29575..c223db9 100644
--- a/.gitignore
+++ b/.gitignore
@@ -21,3 +21,6 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+**/DEBUG
+**/DEBUG*
\ No newline at end of file
diff --git a/src/components/verify_email/VerifyMail.css b/src/components/verify_email/VerifyMail.css
index 9397ee0..8145501 100644
--- a/src/components/verify_email/VerifyMail.css
+++ b/src/components/verify_email/VerifyMail.css
@@ -1,5 +1,30 @@
-form {
-    max-width: 600px;
-    margin: auto;
-    padding: 20px;
-}
\ No newline at end of file
+.container {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+.content {
+    max-width: 800px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+.verification-code-input {
+    text-align: center;
+    max-width: 80px;
+    width: fit-content;
+}
+
+.submit-button {
+    margin-top: 20px;
+}
+
+header {
+    font-size: xx-large;
+    font-weight: bolder;
+}
diff --git a/src/components/verify_email/verify_mail.tsx b/src/components/verify_email/verify_mail.tsx
index 03fa5ca..2dd9b88 100644
--- a/src/components/verify_email/verify_mail.tsx
+++ b/src/components/verify_email/verify_mail.tsx
@@ -1,5 +1,6 @@
 import {FC, useState} from "react";
 import {useLocation, useNavigate} from "react-router-dom";
+import './VerifyMail.css';
 
 interface VerificationData {
     eMail: string;
@@ -66,16 +67,24 @@ const VerifyMail: FC = () => {
 
     return (
         <div className="container">
-            <p>Hi, you just completed a form and need to verify your email ({email}).</p>
-            <p>Please check your email for a verification code and enter it below:</p>
-            <input
-                type="text"
-                value={code}
-                onChange={(e) => setCode(e.target.value)}
-                className="verification-code-input"
-            />
-            <button onClick={handleCodeSubmit} className="submit-button">Submit Code</button>
-
+            <header>Email validation</header>
+            <div className="content">
+                <p>Hi, you just completed a form and need to verify your email ({email}).</p>
+                <p>Please check your email for a verification code and enter it below:</p>
+                <input
+                    type="text"
+                    value={code}
+                    onChange={(e) => {
+                        if (/^\d{0,6}$/.test(e.target.value)) {
+                            setCode(e.target.value);
+                        }
+                    }}
+                    pattern="\d{6}"
+                    maxLength={6}
+                    className="verification-code-input"
+                />
+                <button onClick={handleCodeSubmit} className="submit-button">Submit Code</button>
+            </div>
         </div>
     )
 }