diff --git a/backend/Platform/templates/emails/base.html b/backend/Platform/templates/emails/base.html
index d4887bac..7ad2f242 100644
--- a/backend/Platform/templates/emails/base.html
+++ b/backend/Platform/templates/emails/base.html
@@ -41,18 +41,15 @@
           margin-left: -3px;
         }
 
-        .verification-block {
+        .verification-number {
+          display: inline-flex;
+          justify-content: center;
+          align-items: center;
           width: 40px;
           height: 55px;
           margin: 3px;
           border-radius: 2px;
           background-color: #E7E7E7;
-          display:flex;
-          justify-content: center;
-          align-items: center;
-        }
-
-        .verification-number {
           font-weight: 600;
           font-size: 20px;
           color: #767676;
diff --git a/backend/Platform/templates/emails/email_verification.html b/backend/Platform/templates/emails/email_verification.html
index e911bcc9..002c2774 100644
--- a/backend/Platform/templates/emails/email_verification.html
+++ b/backend/Platform/templates/emails/email_verification.html
@@ -8,11 +8,9 @@
 
 <div id="verification-div">
   {% for num in verification_code %}
-    <div class="verification-block">
-      <span class="verification-number">
-        {{ num }}
-      </span>
-    </div>
+    <span class="verification-number">
+      {{ num }}
+    </span>
   {% endfor %}
 </div>
 
diff --git a/frontend/components/Accounts/Modals/Verification.tsx b/frontend/components/Accounts/Modals/Verification.tsx
index 677721fe..1cf3399c 100644
--- a/frontend/components/Accounts/Modals/Verification.tsx
+++ b/frontend/components/Accounts/Modals/Verification.tsx
@@ -45,6 +45,7 @@ const VerificationForm = (props: VerificationFormProps) => {
     return (
         <ReactCodeInput
             name="verification"
+            type="number"
             fields={6}
             onChange={handleInputChange}
             ref={codeInput}