diff --git a/pages/02.post/post-form.md b/pages/02.post/post-form.md
index ae2f6ee..619c8ac 100644
--- a/pages/02.post/post-form.md
+++ b/pages/02.post/post-form.md
@@ -85,6 +85,8 @@ form:
             name: weather_desc
             type: hidden
 
+    novalidate: true
+
     buttons:
         -
             type: submit
diff --git a/themes/intotheeast/css/style.css b/themes/intotheeast/css/style.css
index b9d2f5c..4fe2c71 100644
--- a/themes/intotheeast/css/style.css
+++ b/themes/intotheeast/css/style.css
@@ -546,11 +546,8 @@ body {
 
 .post-form-wrap textarea { resize: vertical; min-height: 160px; line-height: var(--leading-normal); }
 
-/* Submit button — target by class directly so it works regardless of Grav's wrapper markup */
-.btn-post,
-.post-form-wrap .form-actions input[type="submit"],
-.post-form-wrap .form-actions .btn,
-.post-form-wrap .form-actions button[type="submit"] {
+/* Submit button */
+.post-form-wrap .btn-post {
     display: block;
     width: 100%;
     box-sizing: border-box;
@@ -568,11 +565,23 @@ body {
     margin-top: var(--space-6);
     text-align: center;
     -webkit-appearance: none;
+    appearance: none;
 }
 
-.btn-post:hover,
-.post-form-wrap .form-actions input[type="submit"]:hover,
-.post-form-wrap .form-actions button[type="submit"]:hover { background: var(--color-accent-hover); }
+.post-form-wrap .btn-post:hover { background: var(--color-accent-hover); }
+
+/* Inline field validation */
+.post-form-wrap .field-invalid {
+    border-color: #c0392b !important;
+    outline-color: #c0392b !important;
+}
+
+.post-form-wrap .field-error {
+    display: block;
+    color: #c0392b;
+    font-size: var(--text-sm);
+    margin-top: var(--space-1);
+}
 
 /* Location / weather action buttons */
 .form-action-row {
diff --git a/themes/intotheeast/templates/post-form.html.twig b/themes/intotheeast/templates/post-form.html.twig
index 0dc561f..bd4e6ac 100644
--- a/themes/intotheeast/templates/post-form.html.twig
+++ b/themes/intotheeast/templates/post-form.html.twig
@@ -13,6 +13,45 @@
     <p id="weather-status" class="form-status"></p>
 </div>
 
+<script>
+// Custom validation — form uses novalidate so we handle it here
+(function() {
+    var REQUIRED = ['title', 'content'];
+    var form = document.querySelector('form[name="new-entry"]');
+    if (!form) return;
+
+    function clearErrors() {
+        form.querySelectorAll('.field-error').forEach(function(el) { el.remove(); });
+        form.querySelectorAll('.field-invalid').forEach(function(el) { el.classList.remove('field-invalid'); });
+    }
+
+    function showError(field, msg) {
+        field.classList.add('field-invalid');
+        var err = document.createElement('span');
+        err.className = 'field-error';
+        err.textContent = msg;
+        field.parentNode.insertBefore(err, field.nextSibling);
+    }
+
+    form.addEventListener('submit', function(e) {
+        clearErrors();
+        var firstInvalid = null;
+        REQUIRED.forEach(function(name) {
+            var field = form.querySelector('[name="data[' + name + ']"]');
+            if (field && !field.value.trim()) {
+                showError(field, name.charAt(0).toUpperCase() + name.slice(1) + ' is required.');
+                if (!firstInvalid) firstInvalid = field;
+            }
+        });
+        if (firstInvalid) {
+            e.preventDefault();
+            firstInvalid.focus();
+            firstInvalid.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        }
+    });
+}());
+</script>
+
 <script>
 var WMO_MAP = {
     0:'Sunny',1:'Partly cloudy',2:'Partly cloudy',3:'Cloudy',