diff --git a/appointment/static/css/verification_code.css b/appointment/static/css/verification_code.css
index ccf411d..299e643 100644
--- a/appointment/static/css/verification_code.css
+++ b/appointment/static/css/verification_code.css
@@ -1,70 +1,114 @@
-/* verification_code.css */
-body {
-    background-color: #f4f4f4;
-}
-
-.container {
+/* verification_code_v2.css */
+.vcode-container {
     display: flex;
     justify-content: center;
     align-items: center;
-    height: 100vh;
+    min-height: 100vh;
+    background-color: #f0f2f5;
+    padding: 20px;
 }
 
-.verification-container {
-    background-color: white;
-    padding: 20px;
-    border-radius: 10px;
-    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+.vcode-card {
+    background-color: #ffffff;
+    border-radius: 8px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    padding: 40px;
     width: 100%;
     max-width: 400px;
 }
 
-.verification-title {
+.vcode-title {
     font-size: 24px;
-    font-weight: bold;
+    font-weight: 600;
+    color: #333;
     text-align: center;
     margin-bottom: 20px;
 }
 
-.verification-instruction {
-    font-size: 18px;
+.vcode-instruction {
+    font-size: 16px;
+    color: #666;
     text-align: center;
-    margin-bottom: 20px;
+    margin-bottom: 30px;
 }
 
-.verification-form {
+.vcode-form {
     display: flex;
     flex-direction: column;
-    align-items: center;
 }
 
-.verification-label {
-    font-size: 16px;
-    font-weight: bold;
-    margin-bottom: 10px;
-    width: 100%;
+.vcode-input-group {
+    margin-bottom: 20px;
 }
 
-.verification-input {
+.vcode-label {
+    display: block;
     font-size: 14px;
+    font-weight: 500;
+    color: #333;
+    margin-bottom: 8px;
+}
+
+.vcode-input {
+    width: 100%;
     padding: 10px;
+    font-size: 16px;
     border: 1px solid #ddd;
-    border-radius: 5px;
-    width: 100%;
-    margin-bottom: 20px;
+    border-radius: 4px;
+    transition: border-color 0.3s ease;
+}
+
+.vcode-input:focus {
+    outline: none;
+    border-color: #4a90e2;
 }
 
-.verification-submit {
+.vcode-button {
+    background-color: #4a90e2;
+    color: #ffffff;
     font-size: 16px;
-    padding: 10px 20px;
-    background-color: #007BFF;
-    color: white;
+    font-weight: 500;
+    padding: 12px;
     border: none;
-    border-radius: 5px;
+    border-radius: 4px;
     cursor: pointer;
     transition: background-color 0.3s ease;
 }
 
-.verification-submit:hover {
-    background-color: #0056b3;
+.vcode-button:hover {
+    background-color: #3a7bc8;
+}
+
+.vcode-alert {
+    margin-top: 20px;
+    padding: 12px;
+    border-radius: 4px;
+    font-size: 14px;
+    text-align: center;
+}
+
+.vcode-alert-error {
+    background-color: #fde8e8;
+    color: #9b1c1c;
+    border: 1px solid #fbd5d5;
+}
+
+.vcode-alert-success {
+    background-color: #e6fffa;
+    color: #046c4e;
+    border: 1px solid #b2f5ea;
+}
+
+@media (max-width: 480px) {
+    .vcode-card {
+        padding: 30px;
+    }
+
+    .vcode-title {
+        font-size: 22px;
+    }
+
+    .vcode-instruction {
+        font-size: 14px;
+    }
 }
diff --git a/appointment/templates/appointment/enter_verification_code.html b/appointment/templates/appointment/enter_verification_code.html
index 28b3bab..6b157a1 100644
--- a/appointment/templates/appointment/enter_verification_code.html
+++ b/appointment/templates/appointment/enter_verification_code.html
@@ -1,39 +1,39 @@
 {% extends BASE_TEMPLATE %}
 {% load i18n %}
 {% load static %}
+
 {% block customCSS %}
-    <link rel="stylesheet" type="text/css" href="{% static 'css/verification_code.css' %}"/>
-{% endblock %}
-{% block title %}
-    {% trans 'Enter Verification Code' %}
-{% endblock %}
-{% block description %}
-    {% trans 'Enter Verification Code' %}
+    <link rel="stylesheet" href="{% static 'css/verification_code.css' %}">
 {% endblock %}
+
+{% block title %}{% trans 'Enter Verification Code' %}{% endblock %}
+{% block description %}{% trans 'Enter Verification Code' %}{% endblock %}
+
 {% block body %}
-    <div class="container">
-        <div class="main-container">
-            <div class="body-container">
-                <h1>{% trans 'Enter Verification Code' %}</h1>
-                <p>{% trans "We've sent a verification code to your email. Please enter it below" %}:</p>
-                <form method="post"
-                      action="{% url 'appointment:enter_verification_code' appointment_request_id id_request %}">
-                    {% csrf_token %}
-                    <label>{% trans 'Code' %}:
-                        <input type="text" name="code" placeholder="X1Y2Z3" required>
-                    </label>
-                    <button class="btn btn-primary" type="submit">{% trans 'Submit' %}</button>
-                </form>
-            </div>
+    <div class="vcode-container">
+        <div class="vcode-card">
+            <h1 class="vcode-title">{% trans 'Enter Verification Code' %}</h1>
+            <p class="vcode-instruction">{% trans "We've sent a verification code to your email. Please enter it below" %}:</p>
+
+            <form method="post" class="vcode-form">
+                {% csrf_token %}
+                <div class="vcode-input-group">
+                    <label for="verification-code" class="vcode-label">{% trans 'Code' %}:</label>
+                    <input type="text" id="verification-code" name="code" class="vcode-input" required>
+                </div>
+                <button type="submit" class="vcode-button">{% trans 'Submit' %}</button>
+            </form>
+
             {% if messages %}
                 {% for message in messages %}
-                    <div class="alert alert-dismissible {% if message.tags %}alert-{% if message.level == DEFAULT_MESSAGE_LEVELS.ERROR %}danger{% else %}{{ message.tags }}{% endif %}{% endif %}"
-                         role="alert">{{ message }}</div>
+                    <div class="vcode-alert vcode-alert-{% if message.tags %}{{ message.tags }}{% endif %}">
+                        {{ message }}
+                    </div>
                 {% endfor %}
             {% endif %}
         </div>
     </div>
 {% endblock %}
+
 {% block customJS %}
-    <script src="{% static 'js/js-utils.js' %}"></script>
-{% endblock %}
+{% endblock %}
\ No newline at end of file
diff --git a/appointment/templates/error_pages/304_already_submitted.html b/appointment/templates/error_pages/304_already_submitted.html
index 99370ba..98f8f01 100644
--- a/appointment/templates/error_pages/304_already_submitted.html
+++ b/appointment/templates/error_pages/304_already_submitted.html
@@ -1,5 +1,4 @@
 <!-- appointment/templates/error_pages/already_submitted.html -->
-{% extends BASE_TEMPLATE %}
 {% load i18n %}
 {% load static %}
 {% block customCSS %}