diff --git a/efile_app/efile/static/css/common.css b/efile_app/efile/static/css/common.css
new file mode 100644
index 0000000..a008eeb
--- /dev/null
+++ b/efile_app/efile/static/css/common.css
@@ -0,0 +1,28 @@
+:root {
+    --suffolk-blue: #1e3a5f;
+    --better-blue: #2c5aa0;
+    --primary-btn-color: #007bff;
+    --success: #28a745;
+    --light-blue-background: #f8f9fa;
+}
+
+body {
+    background-color: var(--light-blue-background);
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
+/* Custom styles for better spacing and required field styling */
+.required {
+    color: #dc3545 !important;
+    font-weight: bold;
+}
+
+h1 {
+    color: var(--better-blue);
+    font-weight: 600;
+}
+
+h2 {
+    color: var(--better-blue);
+    font-weight: 500;
+}
\ No newline at end of file
diff --git a/efile_app/efile/static/css/components/search-dropdown.css b/efile_app/efile/static/css/components/search-dropdown.css
index 559409d..b617459 100644
--- a/efile_app/efile/static/css/components/search-dropdown.css
+++ b/efile_app/efile/static/css/components/search-dropdown.css
@@ -41,7 +41,7 @@
 .search-dropdown-item {
     padding: 0.75rem;
     cursor: pointer;
-    border-bottom: 1px solid #f8f9fa;
+    border-bottom: 1px solid var(--light-blue-background);
     transition: background-color 0.15s ease-in-out;
     background-color: #ffffff;
     color: #212529;
diff --git a/efile_app/efile/static/css/confirmation.css b/efile_app/efile/static/css/confirmation.css
index 4cb170b..08c76d9 100644
--- a/efile_app/efile/static/css/confirmation.css
+++ b/efile_app/efile/static/css/confirmation.css
@@ -6,7 +6,7 @@
 }
 
 .success-icon {
-    color: #28a745;
+    color: var(--success);
     font-size: 4rem;
     margin-bottom: 1rem;
 }
@@ -18,8 +18,8 @@
 }
 
 .btn-primary.custom-confirm {
-    background: #2c5aa0;
-    border-color: #2c5aa0;
+    background: var(--better-blue);
+    border-color: var(--better-blue);
 }
 
 .btn-primary.custom-confirm:hover {
diff --git a/efile_app/efile/static/css/expert_form.css b/efile_app/efile/static/css/expert_form.css
index 2f422d5..7f73ee6 100644
--- a/efile_app/efile/static/css/expert_form.css
+++ b/efile_app/efile/static/css/expert_form.css
@@ -1,8 +1,3 @@
-body {
-    background-color: #f8f9fa;
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-}
-
 .form-container {
     background: white;
     padding: 2rem;
@@ -12,7 +7,6 @@ body {
 }
 
 .section-header {
-    color: #007bff;
     font-size: 1.25rem;
     font-weight: 600;
     margin-bottom: 0.5rem;
@@ -35,6 +29,7 @@ body {
 
 .form-label {
     font-weight: 500;
+    font-size: 1.25rem;
     color: #495057;
     margin-bottom: 0;
 }
@@ -48,7 +43,7 @@ body {
 
 .form-select:focus,
 .form-control:focus {
-    border-color: #007bff;
+    border-color: var(--primary-btn-color);
     box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
 }
 
@@ -63,8 +58,8 @@ body {
 }
 
 .btn-primary {
-    background-color: #007bff;
-    border-color: #007bff;
+    background-color: var(--primary-btn-color);
+    border-color: var(--primary-btn-color);
 }
 
 .btn-primary {
@@ -75,7 +70,7 @@ body {
 }
 
 .checkbox-group {
-    background-color: #f8f9fa;
+    background-color: var(--light-blue-background);
     border: 1px solid #e9ecef;
     border-radius: 4px;
     padding: 1rem;
@@ -96,7 +91,7 @@ body {
 }
 
 .party-section {
-    background-color: #f8f9fa;
+    background-color: var(--light-blue-background);
     border: 1px solid #e9ecef;
     border-radius: 4px;
     padding: 1.5rem;
@@ -110,13 +105,13 @@ body {
 }
 
 .loading-spinner {
-    color: #007bff;
+    color: var(--primary-btn-color);
     font-size: 0.9rem;
     margin-top: 0.5rem;
 }
 
 .dropdown-field:disabled {
-    background-color: #f8f9fa;
+    background-color: var(--light-blue-background);
     opacity: 0.65;
 }
 
@@ -124,7 +119,7 @@ body {
     font-size: 0.875rem !important;
     padding: 8px 12px !important;
     margin: 1rem 0 2rem 0 !important;
-    border: 1px solid #28a745;
+    border: 1px solid var(--success);
     background-color: #d4edda;
     color: #155724;
     border-radius: 4px;
@@ -167,17 +162,10 @@ option.recommended {
     position: relative;
 }
 
-/* Custom styles for better spacing and required field styling */
-.required {
-    color: #dc3545 !important;
-    font-weight: bold;
-}
 
 .subsection-header {
     margin-top: 3.5rem !important;
     margin-bottom: 1rem !important;
-    color: #007bff;
-    font-weight: 600;
 }
 
 .subsection-header:first-of-type {
@@ -199,5 +187,5 @@ option.recommended {
 h4 {
     margin-top: 2rem;
     margin-bottom: 1rem !important;
-    color: #007bff;
+    color: var(--primary-btn-color);
 }
\ No newline at end of file
diff --git a/efile_app/efile/static/css/header.css b/efile_app/efile/static/css/header.css
index b973811..5d7f7fa 100644
--- a/efile_app/efile/static/css/header.css
+++ b/efile_app/efile/static/css/header.css
@@ -1,5 +1,5 @@
 .header {
-    background: linear-gradient(135deg, #1e3a5f 0%, #2c5aa0 100%);
+    background: linear-gradient(135deg, var(--suffolk-blue) 0%, var(--better-blue) 100%);
     color: white;
     padding: 1rem 0;
     margin-bottom: 2rem;
@@ -19,11 +19,17 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    color: #1e3a5f;
+    color: var(--suffolk-blue);
     cursor: pointer;
 }
 
 .scales-icon {
     font-size: 1.2rem;
     margin-right: 0.5rem;
+}
+
+.brand-title {
+    font-size: 1.8rem;
+    font-weight: 600;
+    margin: 0;
 }
\ No newline at end of file
diff --git a/efile_app/efile/static/css/login.css b/efile_app/efile/static/css/login.css
index 953019b..14068ea 100644
--- a/efile_app/efile/static/css/login.css
+++ b/efile_app/efile/static/css/login.css
@@ -1,8 +1,3 @@
-body {
-    background-color: #f8f9fa;
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-}
-
 .main-container {
     max-width: 500px;
     margin: 2rem auto;
@@ -25,7 +20,7 @@ body {
 }
 
 .brand-header {
-    background: linear-gradient(135deg, #1e3a5f 0%, #2c5aa0 100%);
+    background: linear-gradient(135deg, var(--suffolk-blue) 0%, var(--better-blue) 100%);
     color: white;
     padding: 1.5rem;
     border-radius: 20px 20px 0 0;
@@ -80,7 +75,7 @@ body {
 .btn-sign-in,
 .btn-register,
 .btn-password-reset {
-    background: #1e3a5f;
+    background: var(--suffolk-blue);
     border: none;
     border-radius: 25px;
     padding: 0.75rem 2rem;
@@ -94,7 +89,7 @@ body {
 .btn-sign-in:hover,
 .btn-register:hover,
 .btn-password-reset:hover {
-    background: #1e3a5f;
+    background: var(--suffolk-blue);
     filter: brightness(1.5);
     transform: translateY(-1px);
 }
diff --git a/efile_app/efile/static/css/options.css b/efile_app/efile/static/css/options.css
index 7f16e19..23c4ebd 100644
--- a/efile_app/efile/static/css/options.css
+++ b/efile_app/efile/static/css/options.css
@@ -1,8 +1,3 @@
-body {
-    background-color: #f8f9fa;
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-}
-
 .section-title {
     color: #333;
     font-size: 2rem;
@@ -20,7 +15,7 @@ body {
 }
 
 .option-card:hover {
-    border-color: #2c5aa0;
+    border-color: var(--better-blue);
     box-shadow: 0 4px 12px rgba(44, 90, 160, 0.15);
     transform: translateY(-2px);
 }
@@ -52,7 +47,7 @@ body {
 .option-icon {
     width: 60px;
     height: 60px;
-    color: #2c5aa0;
+    color: var(--better-blue);
     border-radius: 8px;
     display: flex;
     align-items: center;
@@ -74,4 +69,10 @@ body {
     font-size: 1.1rem;
     margin: 0;
     line-height: 1.4;
+}
+
+.brand-title {
+    font-size: 1.8rem;
+    font-weight: 600;
+    margin: 0;
 }
\ No newline at end of file
diff --git a/efile_app/efile/static/css/register.css b/efile_app/efile/static/css/register.css
index 818f4d1..e769047 100644
--- a/efile_app/efile/static/css/register.css
+++ b/efile_app/efile/static/css/register.css
@@ -2,11 +2,6 @@
     font-size: 1.15rem;
 }
 
-body {
-    background-color: #f8f9fa;
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-}
-
 .alert-warning {
     background-color: #fef3c7;
     border: 1px solid #f59e0b;
@@ -29,7 +24,7 @@ body {
 }
 
 .brand-header {
-    background: linear-gradient(135deg, #1e3a5f 0%, #2c5aa0 100%);
+    background: linear-gradient(135deg, var(--suffolk-blue) 0%, var(--better-blue) 100%);
     color: white;
     padding: 1.5rem;
     display: flex;
@@ -69,7 +64,7 @@ body {
 }
 
 .btn-register {
-    background: #1e3a5f;
+    background: var(--suffolk-blue);
     border: none;
     border-radius: 25px;
     padding: 0.75rem 2.5rem;
@@ -81,7 +76,7 @@ body {
 }
 
 .btn-register:hover {
-    background: #1e3a5f;
+    background: var(--suffolk-blue);
     filter: brightness(1.5);
     transform: translateY(-1px);
     color: white;
@@ -200,10 +195,6 @@ body {
     padding: 2rem;
 }
 
-.required {
-    color: #dc3545;
-}
-
 .scales-icon {
     font-size: 1.5rem;
     margin-right: 0.75rem;
diff --git a/efile_app/efile/static/css/review.css b/efile_app/efile/static/css/review.css
index 6099059..c36c520 100644
--- a/efile_app/efile/static/css/review.css
+++ b/efile_app/efile/static/css/review.css
@@ -5,7 +5,7 @@
 }
 
 .review-section {
-    background: #f8f9fa;
+    background: var(--light-blue-background);
     border-radius: 8px;
     padding: 1.5rem;
     margin-bottom: 1.5rem;
@@ -13,7 +13,7 @@
 }
 
 .review-section h3 {
-    color: #2c5aa0;
+    color: var(--better-blue);
     margin-bottom: 1rem;
     font-size: 1.3rem;
     font-weight: 600;
@@ -27,6 +27,10 @@
     border-bottom: 1px solid #e9ecef;
 }
 
+.review-item input {
+    max-width: 400px;
+}
+
 .review-item:last-child {
     border-bottom: none;
 }
@@ -42,6 +46,7 @@
     text-align: right;
     color: #212529;
     margin-left: 1rem;
+    word-break: break-word;
 }
 
 .review-text {
@@ -135,7 +140,7 @@
 }
 
 .btn-continue {
-    background: #2c5aa0;
+    background: var(--better-blue);
     color: white;
     border: none;
     padding: 0.75rem 2rem;
@@ -277,13 +282,13 @@
     margin: 0;
     width: 28px;
     text-align: center;
-    color: #2c5aa0;
+    color: var(--better-blue);
     font-size: 1.1rem;
 }
 
 .payment-method-name {
     font-weight: 600;
-    color: #2c5aa0;
+    color: var(--better-blue);
     margin-bottom: 0;
 }
 
@@ -293,7 +298,7 @@
 }
 
 .payment-method-item:hover {
-    background-color: #f8f9fa;
+    background-color: var(--light-blue-background);
 }
 
 .no-payment-methods {
diff --git a/efile_app/efile/static/css/upload.css b/efile_app/efile/static/css/upload.css
index b46f47c..6142255 100644
--- a/efile_app/efile/static/css/upload.css
+++ b/efile_app/efile/static/css/upload.css
@@ -10,9 +10,6 @@
 }
 
 .section-header {
-    color: #2c3e50;
-    font-size: 2rem;
-    font-weight: 600;
     margin-bottom: 1rem;
     text-align: left;
 }
@@ -27,8 +24,8 @@
     padding: 1rem;
     border-top: 1px solid #e9ecef;
     border-bottom: 1px solid #e9ecef;
-    border-left: 4px solid #007bff;
-    border-right: 4px solid #007bff;
+    border-left: 4px solid var(--primary-btn-color);
+    border-right: 4px solid var(--primary-btn-color);
     border-radius: 6px;
     font-size: 0.95rem;
 }
@@ -52,10 +49,6 @@
     margin-bottom: 0.5rem;
 }
 
-.required {
-    color: #dc3545;
-}
-
 .upload-area {
     position: relative;
     border: 2px dashed #dee2e6;
@@ -68,12 +61,12 @@
 }
 
 .upload-area:hover {
-    border-color: #007bff;
-    background: #f8f9fa;
+    border-color: var(--primary-btn-color);
+    background: var(--light-blue-background);
 }
 
 .upload-area.dragover {
-    border-color: #007bff;
+    border-color: var(--primary-btn-color);
     background: #e3f2fd;
 }
 
@@ -157,11 +150,11 @@
 
 .file-remove:hover {
     color: #dc3545;
-    background-color: #f8f9fa;
+    background-color: var(--light-blue-background);
 }
 
 .requirements-section {
-    background: #f8f9fa;
+    background: var(--light-blue-background);
     padding: 1.5rem;
     border-radius: 6px;
     border: 1px solid #e9ecef;
@@ -181,7 +174,7 @@
 
 .requirement-item:before {
     content: "•";
-    color: #007bff;
+    color: var(--primary-btn-color);
     font-weight: bold;
     position: absolute;
     left: 0;
@@ -195,6 +188,10 @@
     margin-top: 1rem;
 }
 
+.document-options row {
+    align-items: baseline;
+}
+
 .document-options h5 {
     color: #495057;
     margin-bottom: 1rem;
@@ -208,7 +205,7 @@
 }
 
 .supporting-document-options {
-    background: #f8f9fa;
+    background: var(--light-blue-background);
     border: 1px solid #dee2e6;
     border-radius: 6px;
     padding: 1rem;
@@ -235,7 +232,7 @@
 }
 
 .progress-bar {
-    background-color: #007bff;
+    background-color: var(--primary-btn-color);
     transition: width 0.3s ease;
 }
 
@@ -268,7 +265,7 @@
     margin-top: 0.5rem;
     padding: 0.25rem 0.5rem;
     border-radius: 4px;
-    background: #f8f9fa;
+    background: var(--light-blue-background);
     font-size: 0.875rem;
     display: flex;
     align-items: center;
@@ -278,11 +275,11 @@
 }
 
 .upload-status i.fa-spinner {
-    color: #007bff;
+    color: var(--primary-btn-color);
 }
 
 .upload-status i.fa-check-circle {
-    color: #28a745;
+    color: var(--success);
 }
 
 .upload-status i.fa-exclamation-triangle {
@@ -305,7 +302,7 @@
 }
 
 .btn-primary {
-    background-color: #007bff;
+    background-color: var(--primary-btn-color);
     color: white;
 }
 
@@ -403,7 +400,7 @@
 }
 
 .was-validated .form-control:valid {
-    border-color: #28a745;
+    border-color: var(--success);
 }
 
 .invalid-feedback {
@@ -419,6 +416,10 @@
     margin: 0 auto 1.5rem auto;
 }
 
+.alert h2 {
+    color: var(--bs-heading-color)
+}
+
 .requirements-section h5,
 .document-options h5 {
     margin-bottom: 1.5rem;
@@ -432,4 +433,12 @@
 
 .d-flex.flex-column.flex-md-row.justify-content-between .btn {
     min-width: 200px;
+}
+
+h2 {
+    font-size: 1.3rem;
+}
+
+h3 {
+    font-size: 1.1rem;
 }
\ No newline at end of file
diff --git a/efile_app/efile/templates/efile/choose_jurisdiction.html b/efile_app/efile/templates/efile/choose_jurisdiction.html
index 5b1517e..523f2a8 100644
--- a/efile_app/efile/templates/efile/choose_jurisdiction.html
+++ b/efile_app/efile/templates/efile/choose_jurisdiction.html
@@ -11,6 +11,7 @@
               rel="stylesheet" />
         <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
               rel="stylesheet" />
+        <link rel="stylesheet" href="{% static 'css/common.css' %}" />
         <link rel="stylesheet" href="{% static 'css/options.css' %}" />
         <link rel="stylesheet" href="{% static 'css/header.css' %}" />
     </head>
@@ -20,12 +21,13 @@
                 <div class="d-flex justify-content-between align-items-center">
                     <div class="d-flex align-items-center">
                         <i class="fa fa-landmark-dome scales-icon"></i>
-                        <h1>{{ the_title }}</h1>
+                        <span class="brand-title">LITEfile</span>
                     </div>
                 </div>
             </div>
         </div>
         <div class="container">
+            <h1>{{ the_title }}</h1>
             <div style="display:flex;
                         justify-content:space-evenly;
                         align-content:space-between;
diff --git a/efile_app/efile/templates/efile/components/profile_header.html b/efile_app/efile/templates/efile/components/profile_header.html
index 736e605..f71356f 100644
--- a/efile_app/efile/templates/efile/components/profile_header.html
+++ b/efile_app/efile/templates/efile/components/profile_header.html
@@ -8,7 +8,7 @@
         <div class="d-flex justify-content-between align-items-center">
             <div class="d-flex align-items-center">
                 <i class="{{ config.jurisdiction.icon }} scales-icon"></i>
-                <h1>{{ config.jurisdiction.name }}</h1>
+                <span class="brand-title">{{ config.jurisdiction.name }}</span>
             </div>
             <div class="d-flex align-items-center gap-3">
                 <div class="profile-icon" id="profileIcon" style="cursor: pointer">
diff --git a/efile_app/efile/templates/efile/confirmation.html b/efile_app/efile/templates/efile/confirmation.html
index 21337f6..66d0de2 100644
--- a/efile_app/efile/templates/efile/confirmation.html
+++ b/efile_app/efile/templates/efile/confirmation.html
@@ -10,6 +10,7 @@
               rel="stylesheet">
         <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
               rel="stylesheet">
+        <link rel="stylesheet" href="{% static 'css/common.css' %}" />
         <link rel="stylesheet" href="{% static 'css/confirmation.css' %}">
     </head>
     <body>
diff --git a/efile_app/efile/templates/efile/expert_form.html b/efile_app/efile/templates/efile/expert_form.html
index 4e14121..e5c7b0b 100644
--- a/efile_app/efile/templates/efile/expert_form.html
+++ b/efile_app/efile/templates/efile/expert_form.html
@@ -10,6 +10,7 @@
               rel="stylesheet" />
         <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
               rel="stylesheet" />
+        <link rel="stylesheet" href="{% static 'css/common.css' %}" />
         <link href="{% static 'css/expert_form.css' %}" rel="stylesheet" />
     </head>
     <body>
@@ -18,14 +19,14 @@
             <div class="form-container">
                 <form id="expertForm" onsubmit="return false;">
                     {% csrf_token %}
-                    <h2 class="section-header">{% translate "Case Information" %}</h2>
+                    <h1>{% translate "Case Information" %}</h1>
                     <p class="section-description">
                         {% translate "Please provide the basic information about your case. Required fields are marked with a red asterisk" %}
                         (<span class="required">*</span>).
                     </p>
                     <!-- Case Classification Section -->
                     <div id="case-start-subsection">
-                        <h3 class="subsection-header">{% translate "Case classification" %}</h3>
+                        <h2 class="subsection-header">{% translate "Where and what" %}</h2>
                         <div class="alert alert-info" id="userProfileStatus" style="display: none">
                             <i class="fas fa-user-check"></i>{% translate "Loading your information..." %}
                         </div>
@@ -51,7 +52,7 @@ <h3 class="subsection-header">{% translate "Case classification" %}</h3>
                         <div class="row mb-3">
                             <div class="col-md-6">
                                 <fieldset>
-                                    <legend>
+                                    <legend class="form-label">
                                         {% translate "New or existing?" %}<span class="required">*</span>
                                     </legend>
                                     <div>
@@ -74,7 +75,7 @@ <h3 class="subsection-header">{% translate "Case classification" %}</h3>
                         </div>
                     </div>
                     <div id="case-info-subsection" hidden>
-                        <h3 class="subsection-header">{% translate "Case information" %}</h3>
+                        <h2 class="subsection-header">{% translate "Case type" %}</h2>
                         <div class="row mb-3">
                             <div class="col-md-6">
                                 <label for="case_category" class="form-label">
@@ -134,7 +135,7 @@ <h3 class="subsection-header">{% translate "Case information" %}</h3>
                     </div>
                     <!-- Case Information Section -->
                     <div id="case-search-subsection" hidden>
-                        <h3 class="subsection-header">Case Search</h3>
+                        <h2 class="subsection-header">Case Search</h2>
                         <div class="alert alert-info" id="caseInfoStatus" style="display: none">
                             <i class="fas fa-info-circle"></i> <span id="statusText">Looking up case information...</span>
                         </div>
diff --git a/efile_app/efile/templates/efile/login.html b/efile_app/efile/templates/efile/login.html
index 18b5b8c..494a125 100644
--- a/efile_app/efile/templates/efile/login.html
+++ b/efile_app/efile/templates/efile/login.html
@@ -10,6 +10,7 @@
               rel="stylesheet" />
         <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
               rel="stylesheet" />
+        <link rel="stylesheet" href="{% static 'css/common.css' %}" />
         <link rel="stylesheet" href="{% static 'css/login.css' %}" />
     </head>
     <body>
@@ -21,7 +22,7 @@
                 <div class="brand-header">
                     <div class="d-flex align-items-center">
                         <i class="fas fa-balance-scale scales-icon"></i>
-                        <h1 class="brand-title">{{ config.jurisdiction.name }}</h1>
+                        <span class="brand-title">{{ config.jurisdiction.name }}</span>
                     </div>
                 </div>
                 <!-- Django Messages -->
@@ -36,10 +37,10 @@ <h1 class="brand-title">{{ config.jurisdiction.name }}</h1>
                 {% endif %}
                 <!-- Sign In Form -->
                 <div class="login-form">
-                    <h2 class="mb-4"
+                    <h1 class="mb-4"
                         style="color: #374151;
                                font-weight: 700;
-                               font-size: 1.8rem">{% translate "Sign In to eFile" %}</h2>
+                               font-size: 1.8rem">{% translate "Sign in to eFile" %}</h1>
                     <form method="post">
                         {% csrf_token %}
                         <div class="mb-3">
@@ -75,7 +76,7 @@ <h1 class="brand-title">{{ config.jurisdiction.name }}</h1>
                     <div class="divider"></div>
                     <!-- First Time Section -->
                     <div class="first-time-section">
-                        <h3>{% translate "First Time?" %}</h3>
+                        <h2>{% translate "First Time?" %}</h2>
                         <p class="first-time-text">{% translate "To use the efile system, you must create a registration." %}</p>
                         <div class="text-center">
                             <a href="{% url 'efile_register' jurisdiction %}"
diff --git a/efile_app/efile/templates/efile/options.html b/efile_app/efile/templates/efile/options.html
index 04595aa..696c2f0 100644
--- a/efile_app/efile/templates/efile/options.html
+++ b/efile_app/efile/templates/efile/options.html
@@ -10,6 +10,7 @@
               rel="stylesheet" />
         <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
               rel="stylesheet" />
+        <link rel="stylesheet" href="{% static 'css/common.css' %}" />
         <link rel="stylesheet" href="{% static 'css/options.css' %}" />
     </head>
     <body>
@@ -28,7 +29,7 @@
             {% endif %}
         </div>
         <div class="container">
-            <h2 class="section-title">{% translate "File Forms and Documents with the Court" %}</h2>
+            <h1>{% translate "File Forms and Documents with the Court" %}</h1>
             <div class="row justify-content-center">
                 <div class="col-lg-8 col-xl-7">
                     <div id="existing-placeholder"></div>
@@ -38,7 +39,7 @@ <h2 class="section-title">{% translate "File Forms and Documents with the Court"
                                 <i class="fas fa-university"></i>
                             </div>
                             <div class="option-content">
-                                <h3>{% translate "Start a new filing" %}</h3>
+                                <h2>{% translate "Start a new filing" %}</h2>
                                 <p>{% translate "Begin a new case or file a response." %}</p>
                             </div>
                         </div>
@@ -110,7 +111,7 @@ <h3>{% translate "Start a new filing" %}</h3>
                 <i class="fas fa-reply"></i>
               </div>
               <div class="option-content">
-                <h3>{% translate "Continue a draft filing" %}</h3>
+                <h2>{% translate "Continue a draft filing" %}</h2>
                 <p>{% translate "Resume your filing where you left off." %}</p>
               </div>
             </div>
diff --git a/efile_app/efile/templates/efile/password_reset.html b/efile_app/efile/templates/efile/password_reset.html
index 1915d46..287e883 100644
--- a/efile_app/efile/templates/efile/password_reset.html
+++ b/efile_app/efile/templates/efile/password_reset.html
@@ -10,6 +10,7 @@
               rel="stylesheet" />
         <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
               rel="stylesheet" />
+        <link rel="stylesheet" href="{% static 'css/common.css' %}" />
         <link rel="stylesheet" href="{% static 'css/login.css' %}" />
     </head>
     <body>
@@ -20,7 +21,7 @@
                 <div class="brand-header">
                     <div class="d-flex align-items-center">
                         <i class="fas fa-balance-scale scales-icon"></i>
-                        <h1 class="brand-title">{{ config.jurisdiction.name }}</h1>
+                        <span class="brand-title">{{ config.jurisdiction.name }}</span>
                     </div>
                 </div>
                 <!-- Django Messages -->
@@ -35,10 +36,10 @@ <h1 class="brand-title">{{ config.jurisdiction.name }}</h1>
                 {% endif %}
                 <!-- Sign In Form -->
                 <div class="reset-form">
-                    <h2 class="mb-4"
+                    <h1 class="mb-4"
                         style="color: #374151;
                                font-weight: 700;
-                               font-size: 1.8rem">{% translate "Reset your eFile password" %}</h2>
+                               font-size: 1.8rem">{% translate "Reset your eFile password" %}</h1>
                     <p class="reset-password-text">
                         {% translate "For security, a link will be sent to your email from "efilingmail.tylertech.cloud". Visit that link to reset your password." %}
                     </p>
diff --git a/efile_app/efile/templates/efile/register.html b/efile_app/efile/templates/efile/register.html
index 6156174..1e43dde 100644
--- a/efile_app/efile/templates/efile/register.html
+++ b/efile_app/efile/templates/efile/register.html
@@ -10,6 +10,7 @@
               rel="stylesheet" />
         <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
               rel="stylesheet" />
+        <link rel="stylesheet" href="{% static 'css/common.css' %}" />
         <link rel="stylesheet" href="{% static 'css/register.css' %}" />
         <style>
             input.form-control.field-error,
@@ -26,11 +27,11 @@
                 <!-- Brand Header -->
                 <div class="brand-header">
                     <i class="fas fa-balance-scale scales-icon"></i>
-                    <h1 class="brand-title">{{ config.jurisdiction.name }} eFile</h1>
+                    <span class="brand-title">{{ config.jurisdiction.name }} eFile</span>
                 </div>
                 <!-- Registration Content -->
                 <div class="register-content">
-                    <h2 class="page-title">{% translate "Register to eFile" %}</h2>
+                    <h1 class="page-title">{% translate "Register to eFile" %}</h1>
                     <!-- Django Messages -->
                     {% if messages %}
                         {% for message in messages %}
diff --git a/efile_app/efile/templates/efile/review.html b/efile_app/efile/templates/efile/review.html
index 1bf63fd..da1fcd7 100644
--- a/efile_app/efile/templates/efile/review.html
+++ b/efile_app/efile/templates/efile/review.html
@@ -10,6 +10,7 @@
               rel="stylesheet" />
         <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
               rel="stylesheet" />
+        <link rel="stylesheet" href="{% static 'css/common.css' %}" />
         <link rel="stylesheet" href="{% static 'css/review.css' %}" />
     </head>
     <body>
@@ -17,21 +18,19 @@
         {% include "efile/components/profile_header.html" %}
         <div class="container">
             <div class="review-container">
-                <h2 class="mb-4" style="color: #2c5aa0; font-weight: 600">{% translate "Review case details" %}</h2>
+                <h1 class="mb-4">{% translate "Review case details" %}</h1>
                 <p class="text-muted mb-4">
                     {% translate "Verify the information below for your case. Please edit anything you believe to be incorrect." %}
                 </p>
                 <!-- Case Information -->
                 <div class="review-section">
                     <div class="d-flex justify-content-between align-items-center mb-3">
-                        <h3>{% translate "Case information" %}</h3>
+                        <h2>{% translate "Case information" %}</h2>
                     </div>
                     <div class="review-item">
                         <span class="review-label">Case type:</span>
                         <div class="d-flex align-items-center">
-                            <span class="review-value"
-                                  id="caseTypeValue"
-                                  style="word-break: break-word">{{ friendly_names.case_type|default:"Loading..." }}</span>
+                            <span class="review-value" id="caseTypeValue">{{ friendly_names.case_type|default:"Loading..." }}</span>
                             <a href="{% url 'expert_form' jurisdiction %}" class="edit-btn ms-3">Edit</a>
                         </div>
                     </div>
@@ -45,7 +44,7 @@ <h3>{% translate "Case information" %}</h3>
                 </div>
                 <!-- User Information -->
                 <div class="review-section">
-                    <h3>{% translate "Review your information" %}</h3>
+                    <h2>{% translate "Review your information" %}</h2>
                     <!-- Inline fields: show text by default, input hidden until Edit clicked -->
                     <div class="review-item">
                         <span class="review-label">{% translate "Name:" %}<span class="text-danger">*</span></span>
@@ -119,8 +118,7 @@ <h3>{% translate "Review your information" %}</h3>
                                 <input type="text"
                                        id="userStateInput"
                                        class="form-control form-control-sm"
-                                       style="max-width: 400px;
-                                              display: none"
+                                       style="display: none"
                                        value=""
                                        required
                                        aria-required="true" />
@@ -134,8 +132,7 @@ <h3>{% translate "Review your information" %}</h3>
                                 <input type="text"
                                        id="userZipInput"
                                        class="form-control form-control-sm"
-                                       style="max-width: 400px;
-                                              display: none"
+                                       style="display: none"
                                        value=""
                                        required
                                        aria-required="true" />
@@ -150,8 +147,7 @@ <h3>{% translate "Review your information" %}</h3>
                                     <input type="email"
                                            id="userEmailInput"
                                            class="form-control form-control-sm"
-                                           style="max-width: 400px;
-                                                  display: none"
+                                           style="display: none"
                                            value=""
                                            required
                                            aria-required="true" />
@@ -165,8 +161,7 @@ <h3>{% translate "Review your information" %}</h3>
                                     <input type="tel"
                                            id="userPhoneInput"
                                            class="form-control form-control-sm"
-                                           style="max-width: 400px;
-                                                  display: none"
+                                           style="display: none"
                                            value=""
                                            required
                                            aria-required="true" />
@@ -182,7 +177,7 @@ <h3>{% translate "Your documents for filing" %}</h3>
                             </div>
                         </div>
                         <!-- Payment Methods -->
-                        <h2 class="mb-4" style="color: #2c5aa0; font-weight: 600">{% translate "Payment method" %}</h2>
+                        <h2 class="mb-4">{% translate "Payment method" %}</h2>
                         <div class="review-section">
                             <h3>{% translate "Existing" %}</h3>
                             <div id="paymentMethodsContainer">
@@ -197,7 +192,7 @@ <h3>{% translate "Filing Fees" %}</h3>
                             </div>
                         </div>
                         <!-- Disclaimer and Action Buttons -->
-                        <h2 class="mb-4" style="color: #2c5aa0; font-weight: 600">{% translate "Submit my filing" %}</h2>
+                        <h2 class="mb-4">{% translate "Submit my filing" %}</h2>
                         <div class="disclaimer-section mb-4">
                             <div class="form-check">
                                 <input class="form-check-input"
diff --git a/efile_app/efile/templates/efile/upload.html b/efile_app/efile/templates/efile/upload.html
index 0e29475..a2b4dde 100644
--- a/efile_app/efile/templates/efile/upload.html
+++ b/efile_app/efile/templates/efile/upload.html
@@ -10,6 +10,7 @@
               rel="stylesheet" />
         <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
               rel="stylesheet" />
+        <link rel="stylesheet" href="{% static 'css/common.css' %}" />
         <link href="{% static 'css/upload.css' %}" rel="stylesheet" />
         <link href="{% static 'css/components/search-dropdown.css' %}"
               rel="stylesheet" />
@@ -18,13 +19,13 @@
         {% include "efile/components/profile_header.html" %}
         <div class="container">
             <div class="upload-container">
-                <h2 class="section-header">{% translate "Your Documents" %}</h2>
+                <h1 class="section-header">{% translate "Your Documents" %}</h1>
                 <p class="section-description">
                     {% translate "Upload any supporting documents. All documents must be in PDF format and clearly legible." %}
                 </p>
                 <!-- Case Information Summary -->
                 <div class="case-summary mb-4">
-                    <h5 class="case-summary-header">{% translate "My case" %}</h5>
+                    <h2 class="case-summary-header">{% translate "My case" %}</h2>
                     <div class="row">
                         <div class="col-md-6">
                             <strong>{% translate "Case type:" %}</strong> {{ case_type_name }}
@@ -36,29 +37,19 @@ <h5 class="case-summary-header">{% translate "My case" %}</h5>
                 </div>
                 <form id="uploadForm" enctype="multipart/form-data">
                     {% csrf_token %}
-                    <!-- Document Requirements -->
-                    <div class="alert alert-info mb-4">
-                        <h6>
-                            <i class="fas fa-info-circle me-2"></i><strong>{% translate "Document requirements" %}</strong>
-                        </h6>
-                        <div class="mb-2">
-                            <strong>{% translate "Format:" %}</strong>{% translate "All documents must be in PDF format with text that can be read clearly." %}
-                        </div>
-                        <div class="mb-0">
-                            <strong>Size Limit:</strong>{% translate "Each document must be under 10MB." %}
-                        </div>
-                    </div>
                     <!-- Lead Document Section -->
                     <div class="document-section mb-4" id="leadDocumentSection">
                         <div class="form-label document-label">
-                            <strong>{% translate "Lead document" %}</strong> <span class="required">*</span>
+                            <h2>
+                                <strong>{% translate "Lead document" %}</strong> <span class="required">*</span>
+                            </h2>
                         </div>
                         <div class="lead-preview-area" id="leadDocumentArea"></div>
                         <!-- Filing Component for Lead Document -->
                         <div class="document-options mt-3"
                              id="leadDocumentOptions"
                              style="display: none">
-                            <div class="row" style="align-items: baseline">
+                            <div class="row">
                                 <div class="col-md-6">
                                     <label for="leadFilingType" class="form-label">
                                         <strong>{% translate "Filing type" %}</strong>
@@ -129,11 +120,25 @@ <h6>
                     <!-- Supporting Documents Section -->
                     <div class="document-section mb-4">
                         <label class="form-label document-label">
-                            <strong>Supporting documents</strong>
+                            <h2>
+                                <strong>Supporting documents</strong>
+                            </h2>
                         </label>
                         <p class="text-muted">
                             {% translate "Optional additional documents that support your petition (birth certificates, marriage certificates, etc.)" %}
                         </p>
+                        <!-- Document Requirements -->
+                        <div class="alert alert-info mb-4">
+                            <h3>
+                                <i class="fas fa-info-circle me-2"></i><strong>{% translate "Document requirements" %}</strong>
+                            </h3>
+                            <div class="mb-2">
+                                <strong>{% translate "Format:" %}</strong>{% translate "All documents must be in PDF format with text that can be read clearly." %}
+                            </div>
+                            <div class="mb-0">
+                                <strong>Size Limit:</strong>{% translate "Each document must be under 10MB." %}
+                            </div>
+                        </div>
                         <div class="upload-area" id="supportingDocumentsArea">
                             <div class="upload-placeholder">
                                 <i class="fas fa-file-upload fa-3x text-muted mb-3"></i>
@@ -173,9 +178,7 @@ <h6>
                     </div>
                     <!-- Before You Continue Section -->
                     <div class="alert alert-warning">
-                        <h6>
-                            <strong>Before you continue</strong>
-                        </h6>
+                        <h2>Before you continue</h2>
                         <p class="mb-2">
                             <strong>{% translate "Review your documents" %}:</strong> {% translate "Make sure all text is legible and all required information is complete." %}
                         </p>
diff --git a/efile_app/efile/templates/efile/upload_first.html b/efile_app/efile/templates/efile/upload_first.html
index 1866a81..b9f10f2 100644
--- a/efile_app/efile/templates/efile/upload_first.html
+++ b/efile_app/efile/templates/efile/upload_first.html
@@ -10,6 +10,7 @@
               rel="stylesheet" />
         <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
               rel="stylesheet" />
+        <link rel="stylesheet" href="{% static 'css/common.css' %}" />
         <link href="{% static 'css/upload.css' %}" rel="stylesheet" />
         <link href="{% static 'css/components/search-dropdown.css' %}"
               rel="stylesheet" />
@@ -18,7 +19,7 @@
         {% include "efile/components/profile_header.html" %}
         <div class="container">
             <div class="upload-container">
-                <h2 class="section-header">{% translate "Upload your lead document" %}</h2>
+                <h1 class="section-header">{% translate "Upload your lead document" %}</h1>
                 <p class="section-description">
                     {% translate "Upload your main court form. It must be in PDF format and clearly legible." %}
                 </p>
@@ -77,9 +78,9 @@ <h6>
                     </div>
                     <!-- Before You Continue Section -->
                     <div class="alert alert-warning">
-                        <h6>
+                        <h2>
                             <strong>{% translate "Before you continue" %}</strong>
-                        </h6>
+                        </h2>
                         <p class="mb-2">
                             <strong>{% translate "Review your document" %}:</strong> {% translate "Make sure all text is legible and all required information is complete." %}
                         </p>