diff --git a/.github/workflows/ui-lint-format.yml b/.github/workflows/ui-lint-format.yml
new file mode 100644
index 0000000..5f3cb35
--- /dev/null
+++ b/.github/workflows/ui-lint-format.yml
@@ -0,0 +1,24 @@
+name: Run UI linter and formatter
+
+on:
+  push:
+    branches: [ "master" ]
+  pull_request:
+    branches: [ "master" ]
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/checkout@v4
+    - name: Set up Node.js 22.x (LTS)
+      uses: actions/setup-node@v4
+      with:
+        node-version: '22.x'
+    - name: Install dependencies
+      run: npm install
+    - name: Run UI linter
+      run: npm run lint
+    - name: Run UI formatter
+      run: npm run format     
\ No newline at end of file
diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 0000000..55b205e
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1,2 @@
+coverage
+web-ui
\ No newline at end of file
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..1f64c45
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,9 @@
+{
+    "tabWidth": 4,
+    "semi": true,
+    "singleQuote": true,
+    "trailingComma": "none",
+    "printWidth": 88,
+    "endOfLine": "auto",
+    "bracketSameLine": true
+}
\ No newline at end of file
diff --git a/CHANGELOG.rst b/CHANGELOG.rst
index f2d99f6..dc6d3b8 100644
--- a/CHANGELOG.rst
+++ b/CHANGELOG.rst
@@ -27,6 +27,8 @@ Added
 - Fixed map background buttons
 - Added ``enable_filter`` prop for ``k-select`` component to enable an input box which content will filter options.
 - MapBox Settings will now be stored within localStorage
+- Added ESLint and Prettier for linting and formatting.
+- Added a Github workflow for linting and formatting.
 
 Fixed
 =====
diff --git a/eslint.config.cjs b/eslint.config.cjs
new file mode 100644
index 0000000..5badbee
--- /dev/null
+++ b/eslint.config.cjs
@@ -0,0 +1,38 @@
+const {
+    defineConfig,
+    globalIgnores
+} = require("eslint/config");
+
+const globals = require("globals");
+const js = require("@eslint/js");
+
+const {
+    FlatCompat,
+} = require("@eslint/eslintrc");
+
+const compat = new FlatCompat({
+    baseDirectory: __dirname,
+    recommendedConfig: js.configs.recommended,
+    //allConfig: js.configs.all
+});
+
+module.exports = defineConfig([
+    globalIgnores(["web-ui/", "coverage/"]),
+    {
+        languageOptions: {
+            globals: {
+                ...globals.browser,
+                ...globals.node,
+            },
+            ecmaVersion: "latest",
+            sourceType: "module",
+            parserOptions: {},
+        },
+        extends: compat.extends("eslint:recommended", "plugin:vue/recommended", "prettier"),
+        rules: {
+            "vue/attributes-order": "off",
+            "vue/component-definition-name-casing": "off"
+        },
+        settings: {}
+    }
+]);
\ No newline at end of file
diff --git a/package.json b/package.json
index b71f699..f4e276c 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,10 @@
     "preview": "vite preview",
     "test": "vitest",
     "test-run": "vitest run",
-    "coverage": "vitest run --coverage"
+    "coverage": "vitest run --coverage",
+    "lint": "eslint",
+    "format": "prettier",
+    "validate": "npm run lint && npm run format"
   },
   "dependencies": {
     "@fortawesome/fontawesome-free": "^6.5.2",
@@ -27,6 +30,7 @@
     "d3": "^7.9.0",
     "glob": "^7.2.0",
     "jsdocgen": "^0.2.4",
+    "mapbox-gl": "^2.15.0",
     "pinia": "^3.0.2",
     "string-width-cjs": "^5.1.1",
     "tiny-emitter": "^2.1.0",
@@ -34,22 +38,30 @@
     "v-hotkey3": "^0.1.4",
     "vue": "^3.1.0",
     "vue-docgen-api": "^4.43.2",
-    "write-file": "^1.0.0",
-    "mapbox-gl": "^2.15.0"
+    "write-file": "^1.0.0"
   },
   "devDependencies": {
+    "@eslint/eslintrc": "^3.3.1",
+    "@eslint/js": "^9.37.0",
     "@pinia/testing": "^1.0.1",
     "@vitejs/plugin-vue": "^5.2.1",
     "@vitest/coverage-v8": "^3.0.7",
     "@vue/compiler-sfc": "^3.1.0",
     "@vue/test-utils": "^2.4.6",
     "cross-env": "^7.0.3",
+    "eslint": "^9.37.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.4",
+    "eslint-plugin-vue": "^10.5.0",
+    "globals": "^16.4.0",
     "happy-dom": "^17.1.9",
     "jquery": "^3.6.0",
     "jquery-slider": "^0.0.1",
     "jsdom": "^26.0.0",
+    "prettier": "^3.6.2",
     "sass": "^1.85.1",
     "vite": "^6.0.7",
+    "vite-plugin-eslint": "^1.8.1",
     "vitest": "^3.0.7",
     "vue3-sfc-loader": "^0.9.5",
     "yargs": "^17.3.1"
diff --git a/vite.config.js b/vite.config.js
index 1edd872..2600361 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,18 +1,20 @@
 import { defineConfig } from 'vite';
 import { configDefaults } from 'vitest/config';
 import vue from '@vitejs/plugin-vue';
+import eslint from 'vite-plugin-eslint';
 import { resolve } from 'path';
 
 export default defineConfig(({ command, mode, isSsrBuild, isPreview }) => {
   if (mode === 'preprod') {
     return {
-      plugins: [vue()],
+      plugins: [vue(), /**eslint()**/],
       build: {
         outDir: './web-ui/',
         assetsDir: './dist/',
         sourcemap: true,
         minify: false
       },
+      
       resolve: {
         alias: {
           '@': resolve(__dirname, './src')
@@ -34,7 +36,7 @@ export default defineConfig(({ command, mode, isSsrBuild, isPreview }) => {
     }
   } else {
     return {
-      plugins: [vue()],
+      plugins: [vue(), /**eslint()**/],
       build: {
         outDir: './web-ui/',
         assetsDir: './dist/',