diff --git a/assets/css/theme.css b/assets/css/theme.css
index 403bf98f3..6fa2f0170 100644
--- a/assets/css/theme.css
+++ b/assets/css/theme.css
@@ -871,18 +871,6 @@ select {
   top: 100%;
 }
 
-.top-0 {
-  top: 0px;
-}
-
-.right-2 {
-  right: 0.5rem;
-}
-
-.top-2 {
-  top: 0.5rem;
-}
-
 .z-10 {
   z-index: 10;
 }
@@ -1025,10 +1013,6 @@ select {
   margin-top: auto;
 }
 
-.mb-auto {
-  margin-bottom: auto;
-}
-
 .box-content {
   -webkit-box-sizing: content-box;
           box-sizing: content-box;
@@ -1162,6 +1146,10 @@ select {
   width: 100vw;
 }
 
+.max-w-2xl {
+  max-width: 42rem;
+}
+
 .max-w-\[90vw\] {
   max-width: 90vw;
 }
@@ -1685,6 +1673,11 @@ select {
   color: rgb(0 0 0 / var(--tw-text-opacity));
 }
 
+.text-gray-500 {
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity));
+}
+
 .text-red-600 {
   --tw-text-opacity: 1;
   color: rgb(220 38 38 / var(--tw-text-opacity));
@@ -1776,6 +1769,10 @@ select {
   width: 1px;
 }
 
+.js-inline-message {
+  color: #dc2626;
+}
+
 .u-hidden-visually {
   border: 0 !important;
   clip: rect(0 0 0 0) !important;
@@ -1937,6 +1934,10 @@ select {
     -ms-flex-preferred-size: 50%;
         flex-basis: 50%;
   }
+
+  .xs\:grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
 }
 
 @media (min-width: 640px) {
diff --git a/lang/en.json b/lang/en.json
index 4db05357c..ec0778922 100755
--- a/lang/en.json
+++ b/lang/en.json
@@ -543,7 +543,7 @@
             "rma": "RMA Number",
             "question": "Comments/Questions",
             "submit": "Submit Form",
-            "successful": "We've received your feedback and will respond shortly if required. <a href=\"{shopPath}\">Continue</a>.",
+            "successful": "We've received your feedback and will respond shortly if required. <a class='underline underline-offset-4' href=\"{shopPath}\">Continue</a>.",
             "manual_captcha_instruction": "Please answer the question below for additional verification."
         },
         "create_account": {
diff --git a/tailwind.config.js b/tailwind.config.js
index ae657023c..608be3d35 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -34,6 +34,9 @@ module.exports = {
                     'white-space': 'nowrap',
                     width: '1px',
                 },
+                '.js-inline-message': {
+                    color: '#dc2626',
+                },
             })
         }),
     ],
diff --git a/templates/components/page/contact-us-form.html b/templates/components/page/contact-us-form.html
index 63609e540..c3b12f51b 100644
--- a/templates/components/page/contact-us-form.html
+++ b/templates/components/page/contact-us-form.html
@@ -1,4 +1,4 @@
-<form action="{{urls.contact_us_submit}}" method="post" class="js-contact-form">
+<form action="{{urls.contact_us_submit}}" method="post" class="js-contact-form max-w-2xl flex flex-col gap-3">
     {{inject 'contactEmail' (lang 'forms.validate.contact.email_address')}}
     {{inject 'contactQuestion' (lang 'forms.validate.contact.question')}}
 
@@ -10,14 +10,14 @@
 
     <input type="hidden" name="page_id" value="{{forms.contact.page_id}}">
     
-    <div>
+    <div class="grid xs:grid-cols-2 gap-3">
         {{#if forms.contact.name}}
-            <div class="js-form-field">
-                <label for="contact_fullname">
+            <div class="js-form-field flex gap-2 items-start flex-col">
+                <label for="contact_fullname" class="w-full flex justify-between items-center text-sm text-gray-500">
                     {{lang 'forms.contact_us.full_name'}}
                 </label>
                 <input 
-                    class="js-form-input" 
+                    class="js-form-input w-full" 
                     type="text" 
                     id="contact_fullname" 
                     name="contact_fullname" 
@@ -27,12 +27,12 @@
         {{/if}}
 
         {{#if forms.contact.phone}}
-            <div class="js-form-field">
-                <label for="contact_phone">
+            <div class="js-form-field flex gap-2 items-start flex-col">
+                <label for="contact_phone" class="w-full flex justify-between items-center text-sm text-gray-500">
                     {{lang 'forms.contact_us.phone'}}
                 </label>
                 <input 
-                    class="js-form-input" 
+                    class="js-form-input w-full" 
                     type="text" 
                     id="contact_phone" 
                     name="contact_phone" 
@@ -41,15 +41,15 @@
             </div>
         {{/if}}
 
-        <div class="js-form-field">
-            <label for="contact_email">
+        <div class="js-form-field flex gap-2 items-start flex-col">
+            <label for="contact_email" class="w-full flex justify-between items-center text-sm text-gray-500">
                 {{lang 'forms.contact_us.email'}}
                 <small>
                     {{lang 'common.required' }}
                 </small>
             </label>
             <input 
-                class="js-form-input" 
+                class="js-form-input w-full" 
                 type="text" 
                 id="contact_email" 
                 name="contact_email" 
@@ -58,12 +58,12 @@
         </div>
 
         {{#if forms.contact.order}}
-            <div class="js-form-field">
-                <label for="contact_orderno">
+            <div class="js-form-field flex gap-2 items-start flex-col">
+                <label for="contact_orderno" class="w-full flex justify-between items-center text-sm text-gray-500">
                     {{lang 'forms.contact_us.order'}}
                 </label>
                 <input 
-                    class="js-form-input" 
+                    class="js-form-input w-full" 
                     type="text" 
                     id="contact_orderno" 
                     name="contact_orderno"
@@ -72,12 +72,12 @@
         {{/if}}
 
         {{#if forms.contact.company}}
-            <div class="js-form-field">
-                <label for="contact_companyname">
+            <div class="js-form-field flex gap-2 items-start flex-col">
+                <label for="contact_companyname" class="w-full flex justify-between items-center text-sm text-gray-500">
                     {{lang 'forms.contact_us.company'}}
                 </label>
                 <input 
-                    class="js-form-input" 
+                    class="js-form-input w-full" 
                     type="text" 
                     id="contact_companyname" 
                     name="contact_companyname"
@@ -86,12 +86,12 @@
         {{/if}}
 
         {{#if forms.contact.rma}}
-            <div class="js-form-field">
-                <label for="contact_rma">
+            <div class="js-form-field flex gap-2 items-start flex-col">
+                <label for="contact_rma" class="w-full flex justify-between items-center text-sm text-gray-500">
                     {{lang 'forms.contact_us.rma'}}
                 </label>
                 <input 
-                    class="js-form-input" 
+                    class="js-form-input w-full" 
                     type="text" 
                     id="contact_rma" 
                     name="contact_rma"
@@ -100,8 +100,8 @@
         {{/if}}
     </div>
 
-    <div class="js-form-field">
-        <label for="contact_question">
+    <div class="js-form-field flex gap-2 items-start flex-col">
+        <label for="contact_question" class="w-full flex justify-between items-center text-sm text-gray-500">
             {{lang 'forms.contact_us.question'}}
             <small>
                 {{lang 'common.required' }}
@@ -112,12 +112,12 @@
             id="contact_question" 
             rows="5" 
             cols="50" 
-            class="js-form-input"
+            class="js-form-input w-full"
         ></textarea>
     </div>
     {{#if forms.contact.manualcaptcha}}
-        <div class="js-form-field">
-            <label for="{{forms.contact.manualcaptcha.name}}">
+        <div class="js-form-field flex gap-2 items-start flex-col">
+            <label for="{{forms.contact.manualcaptcha.name}}" class="w-full flex justify-between items-center text-sm text-gray-500">
                 {{lang 'forms.contact_us.manual_captcha_instruction'}}
                 <small>
                     {{lang 'common.required' }}
@@ -128,7 +128,7 @@
                     {{forms.contact.manualcaptcha.question}}
                 </span>
                 <input 
-                    class="js-form-input" 
+                    class="js-form-input w-full" 
                     type="text" 
                     id="{{forms.contact.manualcaptcha.name}}" 
                     name="{{forms.contact.manualcaptcha.name}}" 
@@ -141,7 +141,7 @@
     {{/if}}
     {{{forms.contact.recaptcha.markup}}}
     <div>
-        <button class="c-button c-button--primary" type="submit">
+        <button class="border border-black py-2 px-4 cursor-pointer bg-black text-white hover:bg-transparent hover:text-black text-center" type="submit">
             {{lang 'forms.contact_us.submit' }}
         </button> 
     </div>
diff --git a/templates/pages/contact-us.html b/templates/pages/contact-us.html
index 0b77ae235..c53d2e45d 100644
--- a/templates/pages/contact-us.html
+++ b/templates/pages/contact-us.html
@@ -1,42 +1,35 @@
 {{#partial "page"}}
 
-{{> components/common/breadcrumbs breadcrumbs=breadcrumbs}}
-
-<section>
-    {{#unless theme_settings.hide_contact_us_page_heading }}
-        <h1>
-            {{page.title}}
-        </h1>
-    {{/unless}}
-
-    {{#if page.sub_pages}}
+<section class="shadow-inner">
+    <div class="py-4 max-w-desktop mx-auto p-4 my-8 relative">
+        {{> components/common/breadcrumbs breadcrumbs=breadcrumbs}} {{#unless theme_settings.hide_contact_us_page_heading }}
+        <h1 class="font-bold text-3xl py-4">{{page.title}}</h1>
+        {{/unless}} {{#if page.sub_pages}}
         <nav>
             <ul>
                 {{#each page.sub_pages}}
-                    <li>
-                        <a class="js-nav-bar-action" href="{{url}}">
-                            {{title}}
-                        </a>
-                    </li>
+                <li>
+                    <a
+                        class="js-nav-bar-action"
+                        href="{{url}}"
+                    >
+                        {{title}}
+                    </a>
+                </li>
                 {{/each}}
             </ul>
         </nav>
-    {{/if}}
-
-    <div id="contact-us-page">
-        {{#if forms.contact.success}}
-            <div id="contact-us-success">
-                {{{lang 'forms.contact_us.successful' shopPath=urls.home}}}
-            </div>
-        {{else}}
-            <p>{{{page.content}}}</p>
-            {{> components/page/contact-us-form}}
         {{/if}}
 
+        <div id="contact-us-page">
+            {{#if forms.contact.success}}
+                <div id="contact-us-success">{{{lang 'forms.contact_us.successful' shopPath=urls.home}}}</div>
+            {{else}}
+                <p class="mb-4">{{{page.content}}}</p>
+                {{> components/page/contact-us-form}} 
+            {{/if}}
+        </div>
     </div>
-
 </section>
 
-{{/partial}}
-
-{{> layout/base}}
+{{/partial}} {{> layout/base}}