diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 000000000000..4d53d7f86c7e
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,14 @@
+{
+    "plugins": ["prettier-plugin-jinja-template"],
+    "overrides": [
+        {
+            "files": [
+                "*.html"
+            ],
+            "options": {
+                "parser": "jinja-template"
+            }
+        }
+    ],
+    "tabWidth": 2
+}
diff --git a/git-hooks/pre-commit.sh b/git-hooks/pre-commit.sh
index d48e0b3ffc56..cf7ad33fcecf 100755
--- a/git-hooks/pre-commit.sh
+++ b/git-hooks/pre-commit.sh
@@ -54,7 +54,18 @@ if [ $? != 0 ]; then status=1; fi
 pyfiles=($(git diff --staged --name-only --diff-filter=d| grep "\.py$"))
 if [ -n "$pyfiles" ]; then
     flake8 --show-source --config=.flake8 "${pyfiles[@]}"
-	if [ $? != 0 ]; then status=1; fi
+	if [ $? != 0 ]; then status=1 && echo; fi
+fi
+
+html_or_stylesheets=($(git diff --staged --name-only --diff-filter=d| grep -E "\.(html|css|scss|less)$"))
+if [ -n "$html_or_stylesheets" ]; then
+    ./node_modules/.bin/prettier --list-different "${html_or_stylesheets[@]}"
+    if [ $? != 0 ]; then
+        status=1;
+	    echo "HTML and/or stylesheets above have code style issues."
+	    echo "After committing changes with --no-verify, run ./scripts/prettify-changed.sh to fix them."
+	    echo
+    fi
 fi
 
 if [ $status != 0 ]
diff --git a/package.json b/package.json
index 73dd05cbaf8d..a444727aaed0 100644
--- a/package.json
+++ b/package.json
@@ -101,6 +101,8 @@
         "lodash": "4.17.21",
         "mocha": "9.2.2",
         "mocha-headless-chrome": "4.0.0",
+        "prettier": "^3.3.3",
+        "prettier-plugin-jinja-template": "^2.0.0",
         "sinon": "2.3.2"
     },
     "engines": {
diff --git a/scripts/prettify-changed.sh b/scripts/prettify-changed.sh
new file mode 100755
index 000000000000..0c73ceec97ed
--- /dev/null
+++ b/scripts/prettify-changed.sh
@@ -0,0 +1,18 @@
+#!/bin/bash
+
+get_changed() {
+    # Get a list of changed and committed files with appropriate extensions
+    git diff master...HEAD --name-only --diff-filter=d | grep -E "\.(html|css|scss|less)$"
+}
+
+prettify() {
+    FILES=$1
+    echo "Formatting files changed on this branch:"
+    ./node_modules/.bin/prettier --write "$FILES"
+    echo
+}
+
+CHANGED_FILES=$(get_changed) || { echo "No changed files found to format." && exit 1; }
+prettify "$CHANGED_FILES" || { echo "Oops! Did you remember to run yarn install?" && exit 1; }
+
+echo "Remember to commit these changes."
diff --git a/yarn.lock b/yarn.lock
index b6cdcd50ac6b..b82cf8fc50bf 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5616,6 +5616,16 @@ prelude-ls@^1.2.1:
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
   integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
 
+prettier-plugin-jinja-template@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/prettier-plugin-jinja-template/-/prettier-plugin-jinja-template-2.0.0.tgz#23c7589be8b35d704480b5a7d17e7f84ad4df704"
+  integrity sha512-REZDAcZuOUvMDaPS47/GNRLKvbxh9DO9euXhWA7gJGqTLGzHPK2Z841F8I4bxsR7e2lqnHezkQ8GcWaKekKBVQ==
+
+prettier@^3.3.3:
+  version "3.3.3"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.3.3.tgz#30c54fe0be0d8d12e6ae61dbb10109ea00d53105"
+  integrity sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==
+
 proc-log@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/proc-log/-/proc-log-3.0.0.tgz#fb05ef83ccd64fd7b20bbe9c8c1070fc08338dd8"