diff --git a/web/eslint.config.js b/web/eslint.config.js
index 7b2263b..b478b21 100644
--- a/web/eslint.config.js
+++ b/web/eslint.config.js
@@ -1,45 +1,18 @@
-import prettier from 'eslint-config-prettier';
+// eslint.config.js
 import js from '@eslint/js';
-import { includeIgnoreFile } from '@eslint/compat';
 import svelte from 'eslint-plugin-svelte';
 import globals from 'globals';
-import { fileURLToPath } from 'node:url';
 import ts from 'typescript-eslint';
-import unusedImports from 'eslint-plugin-unused-imports';
+import svelteConfig from './svelte.config.js';
+import { fileURLToPath } from 'node:url';
+import { includeIgnoreFile } from '@eslint/compat';
 
 const gitignorePath = fileURLToPath(new URL('./.gitignore', import.meta.url));
-
 export default ts.config(
-	{
-		plugins: {
-			'unused-imports': unusedImports
-		},
-		rules: {
-			'@typescript-eslint/no-unused-vars': 'off',
-			'unused-imports/no-unused-imports': 'error',
-			'unused-imports/no-unused-vars': [
-				'warn',
-				{
-					vars: 'all',
-					varsIgnorePattern: '^_',
-					args: 'after-used',
-					argsIgnorePattern: '^_'
-				}
-			],
-			'sort-imports': [
-				'error',
-				{
-					ignoreDeclarationSort: true
-				}
-			]
-		}
-	},
-	includeIgnoreFile(gitignorePath),
+	includeIgnoreFile(gitignorePath, 'Imported .gitignore patterns'),
 	js.configs.recommended,
 	...ts.configs.recommended,
-	...svelte.configs['flat/recommended'],
-	prettier,
-	...svelte.configs['flat/prettier'],
+	...svelte.configs.recommended,
 	{
 		languageOptions: {
 			globals: {
@@ -49,12 +22,32 @@ export default ts.config(
 		}
 	},
 	{
-		files: ['**/*.svelte'],
-
+		files: ['**/*.svelte', '**/*.svelte.ts', '**/*.svelte.js'],
+		// See more details at: https://typescript-eslint.io/packages/parser/
 		languageOptions: {
 			parserOptions: {
-				parser: ts.parser
+				projectService: true,
+				extraFileExtensions: ['.svelte'], // Add support for additional file extensions, such as .svelte
+				parser: ts.parser,
+				// Specify a parser for each language, if needed:
+				// parser: {
+				//   ts: ts.parser,
+				//   js: espree,    // Use espree for .js files (add: import espree from 'espree')
+				//   typescript: ts.parser
+				// },
+
+				// We recommend importing and specifying svelte.config.js.
+				// By doing so, some rules in eslint-plugin-svelte will automatically read the configuration and adjust their behavior accordingly.
+				// While certain Svelte settings may be statically loaded from svelte.config.js even if you don’t specify it,
+				// explicitly specifying it ensures better compatibility and functionality.
+				svelteConfig
 			}
 		}
+	},
+	{
+		rules: {
+			// Override or add rule settings here, such as:
+			// 'svelte/rule-name': 'error'
+		}
 	}
 );
diff --git a/web/src/lib/components/ui/data-table/data-table.svelte.ts b/web/src/lib/components/ui/data-table/data-table.svelte.ts
index 30f0d90..56bd7b8 100644
--- a/web/src/lib/components/ui/data-table/data-table.svelte.ts
+++ b/web/src/lib/components/ui/data-table/data-table.svelte.ts
@@ -1,10 +1,5 @@
-import {
-	type RowData,
-	type TableOptions,
-	type TableOptionsResolved,
-	type TableState,
-	createTable,
-} from "@tanstack/table-core";
+import type { RowData, TableOptions, TableOptionsResolved, TableState } from '@tanstack/table-core';
+import { createTable } from '@tanstack/table-core';
 
 /**
  * Creates a reactive TanStack table object for Svelte.
@@ -22,13 +17,13 @@ import {
  *       <tr>
  *         {#each headerGroup.headers as header}
  *           <th colspan={header.colSpan}>
- *         	   <FlexRender content={header.column.columnDef.header} context={header.getContext()} />
- *         	 </th>
+ *               <FlexRender content={header.column.columnDef.header} context={header.getContext()} />
+ *             </th>
  *         {/each}
  *       </tr>
  *     {/each}
  *   </thead>
- * 	 <!-- ... -->
+ *     <!-- ... -->
  * </table>
  * ```
  */
@@ -43,7 +38,7 @@ export function createSvelteTable<TData extends RowData>(options: TableOptions<T
 				options: Partial<TableOptions<TData>>
 			) => {
 				return mergeObjects(defaultOptions, options);
-			},
+			}
 		},
 		options
 	);
@@ -62,7 +57,7 @@ export function createSvelteTable<TData extends RowData>(options: TableOptions<T
 					else state = mergeObjects(state, updater);
 
 					options.onStateChange?.(updater);
-				},
+				}
 			});
 		});
 	}
@@ -94,7 +89,7 @@ export function mergeObjects(...sources: any): any {
 	const target = {};
 	for (let i = 0; i < sources.length; i++) {
 		let source = sources[i];
-		if (typeof source === "function") source = source();
+		if (typeof source === 'function') source = source();
 		if (source) {
 			const descriptors = Object.getOwnPropertyDescriptors(source);
 			for (const key in descriptors) {
@@ -104,11 +99,11 @@ export function mergeObjects(...sources: any): any {
 					get() {
 						for (let i = sources.length - 1; i >= 0; i--) {
 							let s = sources[i];
-							if (typeof s === "function") s = s();
+							if (typeof s === 'function') s = s();
 							const v = (s || {})[key];
 							if (v !== undefined) return v;
 						}
-					},
+					}
 				});
 			}
 		}
diff --git a/web/src/lib/components/ui/sidebar/context.svelte.ts b/web/src/lib/components/ui/sidebar/context.svelte.ts
index 15248ad..6fa2aa3 100644
--- a/web/src/lib/components/ui/sidebar/context.svelte.ts
+++ b/web/src/lib/components/ui/sidebar/context.svelte.ts
@@ -1,6 +1,6 @@
-import { IsMobile } from "$lib/hooks/is-mobile.svelte.js";
-import { getContext, setContext } from "svelte";
-import { SIDEBAR_KEYBOARD_SHORTCUT } from "./constants.js";
+import { IsMobile } from '$lib/hooks/is-mobile.svelte.js';
+import { getContext, setContext } from 'svelte';
+import { SIDEBAR_KEYBOARD_SHORTCUT } from './constants.js';
 
 type Getter<T> = () => T;
 
@@ -24,9 +24,9 @@ class SidebarState {
 	readonly props: SidebarStateProps;
 	open = $derived.by(() => this.props.open());
 	openMobile = $state(false);
-	setOpen: SidebarStateProps["setOpen"];
+	setOpen: SidebarStateProps['setOpen'];
 	#isMobile: IsMobile;
-	state = $derived.by(() => (this.open ? "expanded" : "collapsed"));
+	state = $derived.by(() => (this.open ? 'expanded' : 'collapsed'));
 
 	constructor(props: SidebarStateProps) {
 		this.setOpen = props.setOpen;
@@ -53,13 +53,11 @@ class SidebarState {
 	};
 
 	toggle = () => {
-		return this.#isMobile.current
-			? (this.openMobile = !this.openMobile)
-			: this.setOpen(!this.open);
+		return this.#isMobile.current ? (this.openMobile = !this.openMobile) : this.setOpen(!this.open);
 	};
 }
 
-const SYMBOL_KEY = "scn-sidebar";
+const SYMBOL_KEY = 'scn-sidebar';
 
 /**
  * Instantiates a new `SidebarState` instance and sets it in the context.