diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index afe4399..7c22edf 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -23,6 +23,7 @@ You can open an [issue](https://github.com/ivanskv2000/evsy/issues) — we’d l
 You can setup both the backend and frontend in dev mode with hot-reloading:
 
 ```bash
+cp .env.example .env
 make dev
 ```
 
diff --git a/backend/app/api/v1/routes/events.py b/backend/app/api/v1/routes/events.py
index 25ca3d3..349c81c 100644
--- a/backend/app/api/v1/routes/events.py
+++ b/backend/app/api/v1/routes/events.py
@@ -42,7 +42,13 @@ def create_event_route(event: EventCreate, db: Session = Depends(get_db)):
     db_fields = get_fields_by_ids(db, event.fields)
 
     if len(db_fields) != len(event.fields):
-        raise HTTPException(status_code=400, detail="One or more fields do not exist.")
+        raise HTTPException(
+            status_code=status.HTTP_400_BAD_REQUEST,
+            detail={
+                "code": "invalid_reference",
+                "message": "One or more referenced fields do not exist.",
+            },
+        )
 
     get_or_create_tags(db, event.tags)
     db_event = event_crud.create_event(db=db, event=event)
@@ -63,7 +69,13 @@ def create_event_route(event: EventCreate, db: Session = Depends(get_db)):
 def get_event_route(event_id: int, db: Session = Depends(get_db)):
     db_event = event_crud.get_event(db=db, event_id=event_id)
     if db_event is None:
-        raise HTTPException(status_code=404, detail="Event not found")
+        raise HTTPException(
+            status_code=status.HTTP_404_NOT_FOUND,
+            detail={
+                "code": "resource_not_found",
+                "message": f"Event with id {event_id} not found",
+            },
+        )
     return db_event
 
 
@@ -100,12 +112,24 @@ def update_event_route(
     db_fields = get_fields_by_ids(db, event.fields)
 
     if len(db_fields) != len(event.fields):
-        raise HTTPException(status_code=400, detail="One or more fields do not exist.")
+        raise HTTPException(
+            status_code=status.HTTP_400_BAD_REQUEST,
+            detail={
+                "code": "invalid_reference",
+                "message": "One or more referenced fields do not exist.",
+            },
+        )
 
     get_or_create_tags(db, event.tags)
     db_event = event_crud.update_event(db=db, event_id=event_id, event=event)
     if db_event is None:
-        raise HTTPException(status_code=404, detail="Event not found")
+        raise HTTPException(
+            status_code=status.HTTP_404_NOT_FOUND,
+            detail={
+                "code": "resource_not_found",
+                "message": f"Event with id {event_id} not found",
+            },
+        )
     return db_event
 
 
@@ -122,7 +146,13 @@ def update_event_route(
 def delete_event_route(event_id: int, db: Session = Depends(get_db)):
     db_event = event_crud.delete_event(db=db, event_id=event_id)
     if db_event is None:
-        raise HTTPException(status_code=404, detail="Event not found")
+        raise HTTPException(
+            status_code=status.HTTP_404_NOT_FOUND,
+            detail={
+                "code": "resource_not_found",
+                "message": f"Event with id {event_id} not found",
+            },
+        )
     return db_event
 
 
@@ -151,7 +181,13 @@ def get_event_json_schema(
 ):
     db_event = event_crud.get_event(db=db, event_id=event_id)
     if not db_event:
-        raise HTTPException(status_code=404, detail="Event not found")
+        raise HTTPException(
+            status_code=status.HTTP_404_NOT_FOUND,
+            detail={
+                "code": "resource_not_found",
+                "message": f"Event with id {event_id} not found",
+            },
+        )
 
     event = EventOut.model_validate(db_event)
     schema = generate_json_schema_for_event(
@@ -187,7 +223,13 @@ def get_event_yaml_schema(
 ):
     db_event = event_crud.get_event(db=db, event_id=event_id)
     if not db_event:
-        raise HTTPException(status_code=404, detail="Event not found")
+        raise HTTPException(
+            status_code=status.HTTP_404_NOT_FOUND,
+            detail={
+                "code": "resource_not_found",
+                "message": f"Event with id {event_id} not found",
+            },
+        )
 
     event = EventOut.model_validate(db_event)
     schema = generate_json_schema_for_event(
diff --git a/backend/app/api/v1/routes/fields.py b/backend/app/api/v1/routes/fields.py
index 0ea6a6c..51e4c19 100644
--- a/backend/app/api/v1/routes/fields.py
+++ b/backend/app/api/v1/routes/fields.py
@@ -56,7 +56,13 @@ def get_field_route(
 ):
     db_field = field_crud.get_field(db=db, field_id=field_id)
     if db_field is None:
-        raise HTTPException(status_code=404, detail="Field not found")
+        raise HTTPException(
+            status_code=status.HTTP_404_NOT_FOUND,
+            detail={
+                "code": "resource_not_found",
+                "message": f"Field with id {field_id} not found",
+            },
+        )
 
     if with_event_count:
         count = field_crud.get_field_event_count(db=db, field_id=field_id)
@@ -81,7 +87,13 @@ def update_field_route(
 ):
     db_field = field_crud.update_field(db=db, field_id=field_id, field=field)
     if db_field is None:
-        raise HTTPException(status_code=404, detail="Field not found")
+        raise HTTPException(
+            status_code=status.HTTP_404_NOT_FOUND,
+            detail={
+                "code": "resource_not_found",
+                "message": f"Field with id {field_id} not found",
+            },
+        )
     return db_field
 
 
@@ -98,5 +110,11 @@ def update_field_route(
 def delete_field_route(field_id: int, db: Session = Depends(get_db)):
     db_field = field_crud.delete_field(db=db, field_id=field_id)
     if db_field is None:
-        raise HTTPException(status_code=404, detail="Field not found")
+        raise HTTPException(
+            status_code=status.HTTP_404_NOT_FOUND,
+            detail={
+                "code": "resource_not_found",
+                "message": f"Field with id {field_id} not found",
+            },
+        )
     return db_field
diff --git a/backend/app/api/v1/routes/tags.py b/backend/app/api/v1/routes/tags.py
index 97e499a..bec3349 100644
--- a/backend/app/api/v1/routes/tags.py
+++ b/backend/app/api/v1/routes/tags.py
@@ -50,7 +50,13 @@ def list_tags_route(db: Session = Depends(get_db)):
 def get_tag_route(tag_id: str, db: Session = Depends(get_db)):
     db_tag = tag_crud.get_tag(db=db, tag_id=tag_id)
     if db_tag is None:
-        raise HTTPException(status_code=404, detail="Tag not found")
+        raise HTTPException(
+            status_code=status.HTTP_404_NOT_FOUND,
+            detail={
+                "code": "resource_not_found",
+                "message": f"Tag with id {tag_id!r} not found",
+            },
+        )
     return db_tag
 
 
@@ -68,7 +74,13 @@ def get_tag_route(tag_id: str, db: Session = Depends(get_db)):
 def update_tag_route(tag_id: str, tag: TagCreate, db: Session = Depends(get_db)):
     db_tag = tag_crud.update_tag(db=db, tag_id=tag_id, tag=tag)
     if db_tag is None:
-        raise HTTPException(status_code=404, detail="Tag not found")
+        raise HTTPException(
+            status_code=status.HTTP_404_NOT_FOUND,
+            detail={
+                "code": "resource_not_found",
+                "message": f"Tag with id {tag_id!r} not found",
+            },
+        )
     return db_tag
 
 
@@ -85,5 +97,11 @@ def update_tag_route(tag_id: str, tag: TagCreate, db: Session = Depends(get_db))
 def delete_tag_route(tag_id: str, db: Session = Depends(get_db)):
     db_tag = tag_crud.delete_tag(db=db, tag_id=tag_id)
     if db_tag is None:
-        raise HTTPException(status_code=404, detail="Tag not found")
+        raise HTTPException(
+            status_code=status.HTTP_404_NOT_FOUND,
+            detail={
+                "code": "resource_not_found",
+                "message": f"Tag with id {tag_id!r} not found",
+            },
+        )
     return db_tag
diff --git a/backend/app/core/guard.py b/backend/app/core/guard.py
index 85be048..06d448f 100644
--- a/backend/app/core/guard.py
+++ b/backend/app/core/guard.py
@@ -1,4 +1,4 @@
-from fastapi import Depends, HTTPException
+from fastapi import Depends, HTTPException, status
 
 from app.settings import get_settings
 
@@ -6,12 +6,20 @@
 def ensure_not_demo(settings=Depends(get_settings)):
     if settings.is_demo:
         raise HTTPException(
-            status_code=403, detail="This action is not allowed in demo mode."
+            status_code=status.HTTP_403_FORBIDDEN,
+            detail={
+                "code": "action_forbidden_in_demo",
+                "message": "This action is not allowed in demo mode.",
+            },
         )
 
 
 def ensure_dev(settings=Depends(get_settings)):
     if not settings.is_dev:
         raise HTTPException(
-            status_code=403, detail="This action is allowed only in development."
+            status_code=status.HTTP_403_FORBIDDEN,
+            detail={
+                "code": "action_requires_dev_mode",
+                "message": "This action is allowed only in development.",
+            },
         )
diff --git a/backend/app/core/handlers.py b/backend/app/core/handlers.py
new file mode 100644
index 0000000..0e3a3b2
--- /dev/null
+++ b/backend/app/core/handlers.py
@@ -0,0 +1,62 @@
+from fastapi import Request, status
+from fastapi.encoders import jsonable_encoder
+from fastapi.exceptions import RequestValidationError
+from fastapi.responses import JSONResponse
+from pydantic import BaseModel, Field
+from starlette.exceptions import HTTPException as StarletteHTTPException
+
+
+class ValidationErrorDetail(BaseModel):
+    loc: tuple[str | int, ...] = Field(
+        ..., description="Location of the error in the request"
+    )
+    msg: str = Field(..., description="A human-readable message for the error")
+    type: str = Field(..., description="The type of the error")
+
+
+class ErrorResponse(BaseModel):
+    code: str = Field(..., description="A unique, machine-readable error code")
+    message: str = Field(..., description="A human-readable message for the error")
+    details: list[ValidationErrorDetail] | None = Field(
+        None, description="Optional details for validation errors"
+    )
+
+
+async def http_exception_handler(request: Request, exc: StarletteHTTPException):
+    """
+    Handler for FastAPI's built-in HTTPException.
+
+    This handler formats the error into a standard ErrorResponse model.
+    It supports passing a dictionary with 'code' and 'message' in exc.detail.
+    """
+    if isinstance(exc.detail, dict):
+        # If detail is a dict, assume it matches our convention
+        code = exc.detail.get("code", "http_exception")
+        message = exc.detail.get("message", "An unexpected error occurred.")
+    else:
+        # If detail is a string, wrap it in the standard format
+        code = "http_exception"
+        message = str(exc.detail)
+
+    return JSONResponse(
+        status_code=exc.status_code,
+        content=jsonable_encoder(ErrorResponse(code=code, message=message)),
+    )
+
+
+async def validation_exception_handler(request: Request, exc: RequestValidationError):
+    """Handler for Pydantic's RequestValidationError."""
+    details = [
+        ValidationErrorDetail(loc=err["loc"], msg=err["msg"], type=err["type"])
+        for err in exc.errors()
+    ]
+    return JSONResponse(
+        status_code=status.HTTP_422_UNPROCESSABLE_ENTITY,
+        content=jsonable_encoder(
+            ErrorResponse(
+                code="validation_error",
+                message="Input validation failed",
+                details=details,
+            )
+        ),
+    )
diff --git a/backend/app/factory.py b/backend/app/factory.py
index 7e3d0f7..fa9d9c1 100644
--- a/backend/app/factory.py
+++ b/backend/app/factory.py
@@ -1,10 +1,13 @@
 from contextlib import asynccontextmanager
 
 from fastapi import FastAPI
+from fastapi.exceptions import RequestValidationError
 from fastapi.middleware.cors import CORSMiddleware
 from sqlalchemy.orm import sessionmaker
+from starlette.exceptions import HTTPException as StarletteHTTPException
 
 from app.api.v1.routes import admin, auth, events, fields, generic, tags
+from app.core.handlers import http_exception_handler, validation_exception_handler
 from app.modules.auth.schemas import UserCreate
 from app.modules.auth.service import create_user_if_not_exists
 from app.settings import Settings
@@ -77,6 +80,9 @@ async def lifespan(app: FastAPI):
     app.include_router(admin.router, prefix="/v1", tags=["admin"])
     app.include_router(auth.router, prefix="/v1", tags=["auth"])
 
+    app.add_exception_handler(StarletteHTTPException, http_exception_handler)
+    app.add_exception_handler(RequestValidationError, validation_exception_handler)
+
     @app.get("/")
     def read_root():
         return {"message": "Welcome to the Evsy API!"}
diff --git a/backend/tests/test_auth.py b/backend/tests/test_auth.py
index f166ec2..1e695dd 100644
--- a/backend/tests/test_auth.py
+++ b/backend/tests/test_auth.py
@@ -21,7 +21,7 @@ def test_signup_duplicate_email(client, auth_data):
     # Repeat signup to trigger duplicate error
     response = client.post("/v1/auth/signup", json=auth_data)
     assert response.status_code == 400
-    assert "already exists" in response.json()["detail"].lower()
+    assert "already exists" in response.json()["message"].lower()
 
 
 def test_login_with_valid_credentials(client, auth_data):
@@ -38,7 +38,7 @@ def test_login_with_invalid_password(client, auth_data):
         json={"email": auth_data["email"], "password": "wrongpassword"},
     )
     assert response.status_code == 401
-    assert "invalid credentials" in response.json()["detail"].lower()
+    assert "invalid credentials" in response.json()["message"].lower()
 
 
 def test_login_with_unknown_email(client):
@@ -47,7 +47,7 @@ def test_login_with_unknown_email(client):
         json={"email": "unknown@example.com", "password": "irrelevant"},
     )
     assert response.status_code == 401
-    assert "invalid credentials" in response.json()["detail"].lower()
+    assert "invalid credentials" in response.json()["message"].lower()
 
 
 def test_me_requires_auth(client):
diff --git a/backend/tests/test_events.py b/backend/tests/test_events.py
index 077e1a4..c793673 100644
--- a/backend/tests/test_events.py
+++ b/backend/tests/test_events.py
@@ -37,7 +37,7 @@ def test_create_event_with_invalid_field(auth_client):
         },
     )
     assert response.status_code == 400
-    assert "fields" in response.json()["detail"].lower()
+    assert "fields" in response.json()["message"].lower()
 
 
 def test_create_event_with_new_tag(auth_client):
diff --git a/backend/tests/test_events_extended.py b/backend/tests/test_events_extended.py
index 4b0f6b4..787ae8e 100644
--- a/backend/tests/test_events_extended.py
+++ b/backend/tests/test_events_extended.py
@@ -119,7 +119,7 @@ def test_get_nonexistent_event(auth_client):
     """Test getting event that doesn't exist"""
     response = auth_client.get("/v1/events/99999")
     assert response.status_code == 404
-    assert "not found" in response.json()["detail"].lower()
+    assert "not found" in response.json()["message"].lower()
 
 
 def test_update_nonexistent_event(auth_client):
diff --git a/backend/tests/test_fields_extended.py b/backend/tests/test_fields_extended.py
index b9a0624..b7dab0b 100644
--- a/backend/tests/test_fields_extended.py
+++ b/backend/tests/test_fields_extended.py
@@ -210,7 +210,7 @@ def test_get_nonexistent_field(auth_client):
     """Test getting field that doesn't exist"""
     response = auth_client.get("/v1/fields/99999")
     assert response.status_code == 404
-    assert "not found" in response.json()["detail"].lower()
+    assert "not found" in response.json()["message"].lower()
 
 
 def test_update_nonexistent_field(auth_client):
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index dffe09e..d221681 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -1,14 +1,15 @@
 {
   "name": "evsy-frontend",
-  "version": "0.3.0",
+  "version": "1.1.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "evsy-frontend",
-      "version": "0.3.0",
+      "version": "1.1.0",
       "dependencies": {
         "@tailwindcss/vite": "^4.1.4",
+        "@tanstack/vue-query": "^5.92.9",
         "@tanstack/vue-table": "^8.21.3",
         "@vee-validate/zod": "^4.15.0",
         "@vueuse/core": "^13.1.0",
@@ -31,6 +32,7 @@
         "@eslint/js": "^9.25.0",
         "@iconify-json/radix-icons": "^1.2.2",
         "@iconify/vue": "^4.3.0",
+        "@tanstack/vue-query-devtools": "^6.1.5",
         "@types/node": "^22.14.1",
         "@vitejs/plugin-vue": "^5.2.2",
         "@vue/eslint-config-prettier": "^10.2.0",
@@ -1351,6 +1353,43 @@
         "vite": "^5.2.0 || ^6"
       }
     },
+    "node_modules/@tanstack/match-sorter-utils": {
+      "version": "8.19.4",
+      "resolved": "https://registry.npmjs.org/@tanstack/match-sorter-utils/-/match-sorter-utils-8.19.4.tgz",
+      "integrity": "sha512-Wo1iKt2b9OT7d+YGhvEPD3DXvPv2etTusIMhMUoG7fbhmxcXCtIjJDEygy91Y2JFlwGyjqiBPRozme7UD8hoqg==",
+      "license": "MIT",
+      "dependencies": {
+        "remove-accents": "0.5.0"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/query-core": {
+      "version": "5.90.20",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.90.20.tgz",
+      "integrity": "sha512-OMD2HLpNouXEfZJWcKeVKUgQ5n+n3A2JFmBaScpNDUqSrQSjiveC7dKMe53uJUg1nDG16ttFPz2xfilz6i2uVg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/query-devtools": {
+      "version": "5.93.0",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-devtools/-/query-devtools-5.93.0.tgz",
+      "integrity": "sha512-+kpsx1NQnOFTZsw6HAFCW3HkKg0+2cepGtAWXjiiSOJJ1CtQpt72EE2nyZb+AjAbLRPoeRmPJ8MtQd8r8gsPdg==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
     "node_modules/@tanstack/table-core": {
       "version": "8.21.3",
       "resolved": "https://registry.npmjs.org/@tanstack/table-core/-/table-core-8.21.3.tgz",
@@ -1372,6 +1411,75 @@
         "url": "https://github.com/sponsors/tannerlinsley"
       }
     },
+    "node_modules/@tanstack/vue-query": {
+      "version": "5.92.9",
+      "resolved": "https://registry.npmjs.org/@tanstack/vue-query/-/vue-query-5.92.9.tgz",
+      "integrity": "sha512-jjAZcqKveyX0C4w/6zUqbnqk/XzuxNWaFsWjGTJWULVFizUNeLGME2gf9vVSDclIyiBhR13oZJPPs6fJgfpIJQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/match-sorter-utils": "^8.19.4",
+        "@tanstack/query-core": "5.90.20",
+        "@vue/devtools-api": "^6.6.3",
+        "vue-demi": "^0.14.10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.1.2",
+        "vue": "^2.6.0 || ^3.3.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@tanstack/vue-query-devtools": {
+      "version": "6.1.5",
+      "resolved": "https://registry.npmjs.org/@tanstack/vue-query-devtools/-/vue-query-devtools-6.1.5.tgz",
+      "integrity": "sha512-5tQf/4GKfDyvu+Jqv/Fq1im93nXQyge0yWphCmwNHz6Y6+kqA9swJY2G/kLU2TaT2s1CE+elt5EfYNGE1tsDqQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/query-devtools": "5.93.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "@tanstack/vue-query": "^5.92.9",
+        "vue": "^3.3.0"
+      }
+    },
+    "node_modules/@tanstack/vue-query/node_modules/vue-demi": {
+      "version": "0.14.10",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
+      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@tanstack/vue-table": {
       "version": "8.21.3",
       "resolved": "https://registry.npmjs.org/@tanstack/vue-table/-/vue-table-8.21.3.tgz",
@@ -3898,6 +4006,12 @@
         "url": "https://github.com/sponsors/antfu"
       }
     },
+    "node_modules/remove-accents": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/remove-accents/-/remove-accents-0.5.0.tgz",
+      "integrity": "sha512-8g3/Otx1eJaVD12e31UbJj1YzdtVvzH85HV7t+9MJYk/u3XmkOUJ5Ys9wQrf9PCPK8+xn4ymzqYCiZl6QWKn+A==",
+      "license": "MIT"
+    },
     "node_modules/require-directory": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 0dea409..9567839 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -14,6 +14,7 @@
   },
   "dependencies": {
     "@tailwindcss/vite": "^4.1.4",
+    "@tanstack/vue-query": "^5.92.9",
     "@tanstack/vue-table": "^8.21.3",
     "@vee-validate/zod": "^4.15.0",
     "@vueuse/core": "^13.1.0",
@@ -36,6 +37,7 @@
     "@eslint/js": "^9.25.0",
     "@iconify-json/radix-icons": "^1.2.2",
     "@iconify/vue": "^4.3.0",
+    "@tanstack/vue-query-devtools": "^6.1.5",
     "@types/node": "^22.14.1",
     "@vitejs/plugin-vue": "^5.2.2",
     "@vue/eslint-config-prettier": "^10.2.0",
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 0066f43..d3b6227 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -4,8 +4,21 @@ import MainLayout from '@/shared/components/layout/MainLayout.vue'
 import { Toaster } from '@/shared/ui/sonner'
 import { useAuthStore } from '@/modules/auth/stores/useAuthStore'
 import router from './router'
+import { VueQueryDevtools } from '@tanstack/vue-query-devtools'
+import { useEnhancedToast } from './shared/composables/useEnhancedToast'
+import { queryClient } from './shared/plugins/vue-query'
 
 const auth = useAuthStore()
+const { showError } = useEnhancedToast()
+
+const globalErrorHandler = (error: unknown) => {
+  showError(error)
+}
+
+const queryCache = queryClient.getQueryCache()
+const mutationCache = queryClient.getMutationCache()
+queryCache.config.onError = globalErrorHandler
+mutationCache.config.onError = globalErrorHandler
 
 if (auth.token) {
   auth.fetchCurrentUser().catch(() => {
@@ -33,4 +46,6 @@ window.addEventListener('message', async event => {
       </Transition>
     </RouterView>
   </MainLayout>
+
+  <VueQueryDevtools />
 </template>
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index 822239d..2471c6c 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -1,5 +1,6 @@
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
+import { installVueQuery } from './shared/plugins/vue-query'
 import router from './router'
 import './index.css'
 import App from '@/App.vue'
@@ -9,4 +10,6 @@ const app = createApp(App)
 
 app.use(router)
 app.use(pinia)
+installVueQuery(app)
+
 app.mount('#app')
diff --git a/frontend/src/modules/auth/components/LoginForm.vue b/frontend/src/modules/auth/components/LoginForm.vue
index cb471ee..7868b3f 100644
--- a/frontend/src/modules/auth/components/LoginForm.vue
+++ b/frontend/src/modules/auth/components/LoginForm.vue
@@ -4,8 +4,8 @@ import { useForm } from 'vee-validate'
 import { toTypedSchema } from '@vee-validate/zod'
 import { useAuthStore } from '@/modules/auth/stores/useAuthStore'
 import { useEnhancedToast } from '@/shared/composables/useEnhancedToast'
-import { useAsyncTask } from '@/shared/composables/useAsyncTask'
 import { loginSchema, type LoginFormValues } from '@/modules/auth/validation/loginSchema'
+import { useMutation } from '@tanstack/vue-query'
 
 import { Input } from '@/shared/ui/input'
 import { Button } from '@/shared/ui/button'
@@ -19,7 +19,6 @@ const router = useRouter()
 const route = useRoute()
 const auth = useAuthStore()
 const { showSuccess } = useEnhancedToast()
-const { run: runLogin, isLoading } = useAsyncTask()
 
 const redirect = route.query.redirect as string | undefined
 
@@ -27,15 +26,15 @@ const { handleSubmit } = useForm<LoginFormValues>({
   validationSchema: toTypedSchema(loginSchema),
 })
 
-const onSubmit = handleSubmit(values => {
-  runLogin(
-    () => auth.login(values.email, values.password),
-    () => {
-      showSuccess('Successfully logged in!')
-      router.push(redirect || '/events')
-    }
-  )
+const { mutate: runLogin, isPending: isLoading } = useMutation({
+  mutationFn: (values: LoginFormValues) => auth.login(values.email, values.password),
+  onSuccess: () => {
+    showSuccess('Successfully logged in!')
+    router.push(redirect || '/events')
+  },
 })
+
+const onSubmit = handleSubmit(values => runLogin(values))
 </script>
 
 <template>
@@ -53,7 +52,7 @@ const onSubmit = handleSubmit(values => {
 
       <!-- Divider -->
       <div
-        v-if="!isDemo"
+        v-if="!isDemo && auth.availableProviders.length"
         class="after:border-border relative text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t"
       >
         <span class="bg-background text-muted-foreground relative z-10 px-2">
diff --git a/frontend/src/modules/auth/components/SignupForm.vue b/frontend/src/modules/auth/components/SignupForm.vue
index 67a8386..cb8fb06 100644
--- a/frontend/src/modules/auth/components/SignupForm.vue
+++ b/frontend/src/modules/auth/components/SignupForm.vue
@@ -3,8 +3,8 @@ import { useRouter, useRoute } from 'vue-router'
 import { useForm } from 'vee-validate'
 import { toTypedSchema } from '@vee-validate/zod'
 import { signupSchema, type SignupFormValues } from '@/modules/auth/validation/signupSchema'
+import { useMutation } from '@tanstack/vue-query'
 import { useAuthStore } from '@/modules/auth/stores/useAuthStore'
-import { useAsyncTask } from '@/shared/composables/useAsyncTask'
 import { useEnhancedToast } from '@/shared/composables/useEnhancedToast'
 
 import { Input } from '@/shared/ui/input'
@@ -19,7 +19,6 @@ const auth = useAuthStore()
 const router = useRouter()
 const route = useRoute()
 const { showSuccess } = useEnhancedToast()
-const { run: runSignup, isLoading } = useAsyncTask()
 
 const redirect = route.query.redirect as string | undefined
 
@@ -27,18 +26,18 @@ const { handleSubmit } = useForm<SignupFormValues>({
   validationSchema: toTypedSchema(signupSchema),
 })
 
-const onSubmit = handleSubmit(values => {
-  runSignup(
-    () =>
-      auth
-        .signup(values.email, values.password)
-        .then(() => auth.login(values.email, values.password)),
-    () => {
-      showSuccess('Account created successfully! You are now logged in.')
-      router.push(redirect || '/events')
-    }
-  )
+const { mutate: runSignup, isPending: isLoading } = useMutation({
+  mutationFn: (values: SignupFormValues) =>
+    auth
+      .signup(values.email, values.password)
+      .then(() => auth.login(values.email, values.password)),
+  onSuccess: () => {
+    showSuccess('Account created successfully! You are now logged in.')
+    router.push(redirect || '/events')
+  },
 })
+
+const onSubmit = handleSubmit(values => runSignup(values))
 </script>
 
 <template>
diff --git a/frontend/src/modules/events/components/EventEditModal.vue b/frontend/src/modules/events/components/EventEditModal.vue
index f765172..abe83b8 100644
--- a/frontend/src/modules/events/components/EventEditModal.vue
+++ b/frontend/src/modules/events/components/EventEditModal.vue
@@ -9,12 +9,9 @@ import {
 import type { EventFormValues } from '@/modules/events/validation/eventSchema.ts'
 import EventForm from './EventForm.vue'
 import type { Event } from '@/modules/events/types'
-import type { Field } from '@/modules/fields/types'
 import { fieldApi } from '@/modules/fields/api'
-import { ref, onMounted } from 'vue'
-import type { Tag } from '@/modules/tags/types'
 import { tagApi } from '@/modules/tags/api'
-import { useAsyncTask } from '@/shared/composables/useAsyncTask'
+import { useQuery } from '@tanstack/vue-query'
 
 defineProps<{
   description?: string
@@ -25,18 +22,14 @@ defineProps<{
   isSaving?: boolean
 }>()
 
-const fields = ref<Field[]>([])
-const tags = ref<Tag[]>([])
-const { run: loadFields, isLoading: isLoadingFields } = useAsyncTask()
-const { run: loadTags, isLoading: isLoadingTags } = useAsyncTask()
+const { data: fields, isLoading: isLoadingFields } = useQuery({
+  queryKey: ['fields'],
+  queryFn: () => fieldApi.getAll(),
+})
 
-onMounted(() => {
-  loadFields(async () => {
-    fields.value = await fieldApi.getAll()
-  })
-  loadTags(async () => {
-    tags.value = await tagApi.getAll()
-  })
+const { data: tags, isLoading: isLoadingTags } = useQuery({
+  queryKey: ['tags'],
+  queryFn: () => tagApi.getAll(),
 })
 </script>
 
@@ -52,8 +45,8 @@ onMounted(() => {
       <EventForm
         v-if="event"
         :event="event"
-        :availableFields="fields"
-        :availableTags="tags"
+        :availableFields="fields ?? []"
+        :availableTags="tags ?? []"
         :isLoadingFields="isLoadingFields"
         :isLoadingTags="isLoadingTags"
         :onSubmit="onSubmit"
diff --git a/frontend/src/modules/events/components/SwaggerExportModal.vue b/frontend/src/modules/events/components/SwaggerExportModal.vue
index decc51a..a86c850 100644
--- a/frontend/src/modules/events/components/SwaggerExportModal.vue
+++ b/frontend/src/modules/events/components/SwaggerExportModal.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, reactive, watch } from 'vue'
+import { useQuery } from '@tanstack/vue-query'
 import { useClipboard } from '@vueuse/core'
 import { useEnhancedToast } from '@/shared/composables/useEnhancedToast'
 import {
@@ -13,7 +14,6 @@ import { Label } from '@/shared/ui/label'
 import { Button } from '@/shared/ui/button'
 import { Switch } from '@/shared/ui/switch'
 import { api } from '@/shared/utils/api'
-import { useAsyncTask } from '@/shared/composables/useAsyncTask'
 import { Icon } from '@iconify/vue'
 
 const props = defineProps<{
@@ -31,7 +31,24 @@ const settings = reactive({
 
 const preview = ref('')
 const updates = ref(0)
-const { run: fetchSchemaPreview, isLoading } = useAsyncTask()
+
+const { isLoading, refetch } = useQuery({
+  queryKey: ['eventSchema', props.eventId, settings],
+  queryFn: async () => {
+    const params = {
+      include_descriptions: settings.includeDescriptions,
+      include_examples: settings.includeExamples,
+      additional_properties: settings.additionalProperties,
+    }
+    const format = settings.format
+    const response = await api.get(`/events/${props.eventId}/schema.${format}`, {
+      params,
+      responseType: 'text',
+    })
+    return format === 'json' ? JSON.stringify(JSON.parse(response.data), null, 2) : response.data
+  },
+  enabled: false,
+})
 
 const { copy: copyJson, isSupported } = useClipboard({ source: preview })
 const { showCopied, showCopyError } = useEnhancedToast()
@@ -44,24 +61,12 @@ const handleCopy = async () => {
   }
 }
 
-function handleFetch() {
-  const params = {
-    include_descriptions: settings.includeDescriptions,
-    include_examples: settings.includeExamples,
-    additional_properties: settings.additionalProperties,
-  }
-  const format = settings.format
-
-  fetchSchemaPreview(async () => {
-    const response = await api.get(`/events/${props.eventId}/schema.${format}`, {
-      params,
-      responseType: 'text',
-    })
-
-    preview.value =
-      format === 'json' ? JSON.stringify(JSON.parse(response.data), null, 2) : response.data
+async function handleFetch() {
+  const { data } = await refetch()
+  if (data) {
+    preview.value = data
     updates.value += 1
-  })
+  }
 }
 
 watch(
@@ -136,8 +141,6 @@ watch(
 
         <!-- Preview Column -->
         <div>
-          <!-- <Textarea class="h-[400px] resize-none font-mono text-sm" :value="preview" readonly /> -->
-
           <div
             side="bottom"
             @click.stop
diff --git a/frontend/src/modules/events/pages/EventCreatePage.vue b/frontend/src/modules/events/pages/EventCreatePage.vue
index 9b86039..fdf3fc0 100644
--- a/frontend/src/modules/events/pages/EventCreatePage.vue
+++ b/frontend/src/modules/events/pages/EventCreatePage.vue
@@ -1,50 +1,44 @@
 <script setup lang="ts">
-import EventForm from '@/modules/events/components/EventForm.vue'
 import { useRouter } from 'vue-router'
-import { useEnhancedToast } from '@/shared/composables/useEnhancedToast'
-import { ref, onMounted } from 'vue'
+import { useQuery, useMutation, useQueryClient } from '@tanstack/vue-query'
 import { eventApi } from '@/modules/events/api'
-import { useAsyncTask } from '@/shared/composables/useAsyncTask'
-import type { EventFormValues } from '@/modules/events/validation/eventSchema.ts'
-import Header from '@/shared/components/layout/PageHeader.vue'
-import { Card, CardContent } from '@/shared/ui/card'
 import { fieldApi } from '@/modules/fields/api'
-import type { Field } from '@/modules/fields/types'
-import type { Tag } from '@/modules/tags/types'
 import { tagApi } from '@/modules/tags/api'
+import type { Event } from '@/modules/events/types'
+import type { EventFormValues } from '@/modules/events/validation/eventSchema'
+import EventForm from '@/modules/events/components/EventForm.vue'
+import Header from '@/shared/components/layout/PageHeader.vue'
+import { Card, CardContent } from '@/shared/ui/card'
+import { useEnhancedToast } from '@/shared/composables/useEnhancedToast'
 
-const fields = ref<Field[]>([])
-const tags = ref<Tag[]>([])
+const router = useRouter()
+const queryClient = useQueryClient()
+const { showCreated } = useEnhancedToast()
 
-const { isLoading, run } = useAsyncTask()
-const { run: loadFields, isLoading: isLoadingFields } = useAsyncTask()
-const { run: loadTags, isLoading: isLoadingTags } = useAsyncTask()
+// const isInitialLoading = ref(true)
 
-const isInitialLoading = ref(true)
+const { data: tags, isLoading: isLoadingTags } = useQuery({
+  queryKey: ['tags'],
+  queryFn: () => tagApi.getAll(),
+})
 
-const { showCreated } = useEnhancedToast()
-const router = useRouter()
+const { data: fields, isLoading: isLoadingFields } = useQuery({
+  queryKey: ['fields'],
+  queryFn: () => fieldApi.getAll(),
+})
+
+const { mutate: createEvent, isPending: isSaving } = useMutation({
+  mutationFn: (values: EventFormValues) => eventApi.create(values),
+  onSuccess: (createdEvent: Event) => {
+    showCreated('Event')
+    queryClient.invalidateQueries({ queryKey: ['events'] })
+    router.push(`/events/${createdEvent.id}`)
+  },
+})
 
 const onSubmit = (values: EventFormValues) => {
-  run(
-    () => eventApi.create(values),
-    created => {
-      router.push(`/events/${created.id}`)
-      showCreated('Event')
-    }
-  )
+  createEvent(values)
 }
-
-onMounted(() => {
-  loadFields(async () => {
-    fields.value = await fieldApi.getAll()
-  })
-  loadTags(async () => {
-    tags.value = await tagApi.getAll()
-  })
-
-  isInitialLoading.value = false
-})
 </script>
 
 <template>
@@ -54,12 +48,12 @@ onMounted(() => {
     <Card class="mx-auto max-w-md">
       <CardContent>
         <EventForm
-          :availableFields="fields"
-          :availableTags="tags"
-          :isLoadingFields="isInitialLoading || isLoadingFields"
-          :isLoadingTags="isInitialLoading || isLoadingTags"
+          :availableFields="fields ?? []"
+          :availableTags="tags ?? []"
+          :isLoadingFields="isLoadingFields"
+          :isLoadingTags="isLoadingTags"
           :onSubmit="onSubmit"
-          :isLoading="isLoading"
+          :isLoading="isSaving"
           button-text="Create"
         />
       </CardContent>
diff --git a/frontend/src/modules/events/pages/EventDetailsPage.vue b/frontend/src/modules/events/pages/EventDetailsPage.vue
index 2aafba6..0cb5d1f 100644
--- a/frontend/src/modules/events/pages/EventDetailsPage.vue
+++ b/frontend/src/modules/events/pages/EventDetailsPage.vue
@@ -1,11 +1,10 @@
 <script setup lang="ts">
-import { defineAsyncComponent, onMounted, ref } from 'vue'
+import { defineAsyncComponent, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import type { Event } from '@/modules/events/types'
+import { useQuery, useMutation, useQueryClient } from '@tanstack/vue-query'
 import EventDetailsCard from '@/modules/events/components/EventDetailsCard.vue'
 import { eventApi } from '@/modules/events/api'
 import Header from '@/shared/components/layout/PageHeader.vue'
-import { useAsyncTask } from '@/shared/composables/useAsyncTask'
 import type { EventFormValues } from '@/modules/events/validation/eventSchema'
 import { useEnhancedToast } from '@/shared/composables/useEnhancedToast'
 import DetailsCardSkeleton from '@/shared/components/skeletons/DetailsCardSkeleton.vue'
@@ -18,46 +17,46 @@ const EventEditModal = defineAsyncComponent(
 
 const route = useRoute()
 const router = useRouter()
-const event = ref<Event | null>(null)
 
 const showEditModal = ref(false)
 const showDeleteModal = ref(false)
 const showSwaggerExportModal = ref(false)
 
-const { run, isLoading } = useAsyncTask()
-const { run: runDeleteTask, isLoading: isDeleting } = useAsyncTask()
-const { run: runUpdateTask, isLoading: isSaving } = useAsyncTask()
-
+const queryClient = useQueryClient()
 const { showDeleted, showUpdated } = useEnhancedToast()
+const eventId = Number(route.params.id)
 
-const handleDelete = () => {
-  runDeleteTask(async () => {
-    await eventApi.delete(event.value!.id)
+const { data: event, isLoading } = useQuery({
+  queryKey: ['events', eventId],
+  queryFn: () => eventApi.getById(eventId),
+})
+
+const { mutate: deleteEvent, isPending: isDeleting } = useMutation({
+  mutationFn: () => eventApi.delete(eventId),
+  onSuccess: () => {
     showDeleted('Event')
+    queryClient.invalidateQueries({ queryKey: ['events'] })
     router.push('/events')
-  })
+  },
+})
+
+const { mutate: updateEvent, isPending: isSaving } = useMutation({
+  mutationFn: (values: EventFormValues) => eventApi.update(eventId, values),
+  onSuccess: () => {
+    showUpdated('Event')
+    queryClient.invalidateQueries({ queryKey: ['events', eventId] })
+    queryClient.invalidateQueries({ queryKey: ['events'] })
+    showEditModal.value = false
+  },
+})
+
+const handleDelete = () => {
+  deleteEvent()
 }
 
 const handleUpdate = (values: EventFormValues) => {
-  runUpdateTask(
-    () => eventApi.update(event.value!.id, values),
-    updated => {
-      showUpdated('Event')
-      event.value = updated
-      showEditModal.value = false
-    }
-  )
+  updateEvent(values)
 }
-
-onMounted(() => {
-  const id = Number(route.params.id)
-  run(
-    () => eventApi.getById(id),
-    result => {
-      if (result) event.value = result
-    }
-  )
-})
 </script>
 
 <template>
diff --git a/frontend/src/modules/events/pages/EventsPage.vue b/frontend/src/modules/events/pages/EventsPage.vue
index ac1a688..a7c0ef1 100644
--- a/frontend/src/modules/events/pages/EventsPage.vue
+++ b/frontend/src/modules/events/pages/EventsPage.vue
@@ -1,12 +1,11 @@
 <script setup lang="ts">
-import { ref, onMounted, defineAsyncComponent } from 'vue'
+import { ref, defineAsyncComponent } from 'vue'
+import { useQuery, useMutation, useQueryClient } from '@tanstack/vue-query'
 import { eventApi } from '@/modules/events/api'
 import { tagApi } from '@/modules/tags/api'
 import type { Event } from '@/modules/events/types'
-import type { Tag } from '@/modules/tags/types'
 import EventsDataTable from '../components/EventsDataTable.vue'
 import Header from '@/shared/components/layout/PageHeader.vue'
-import { useAsyncTask } from '@/shared/composables/useAsyncTask'
 import { getEventColumns } from '@/modules/events/components/eventColumns'
 import { useEnhancedToast } from '@/shared/composables/useEnhancedToast'
 import type { EventFormValues } from '@/modules/events/validation/eventSchema'
@@ -17,54 +16,55 @@ const EventEditModal = defineAsyncComponent(
   () => import('@/modules/events/components/EventEditModal.vue')
 )
 
-const { run, isLoading } = useAsyncTask()
-const { run: runDeleteTask, isLoading: isDeleting } = useAsyncTask()
-const { run: runUpdateTask, isLoading: isSaving } = useAsyncTask()
-const { run: loadTags, isLoading: isLoadingTags } = useAsyncTask()
+const queryClient = useQueryClient()
 const { showUpdated, showDeleted } = useEnhancedToast()
 
-const events = ref<Event[]>([])
-const tags = ref<Tag[]>([])
-
 const selectedEventId = ref<number | null>(null)
 const editedEvent = ref<Event | null>(null)
 
-const urlFilters = useUrlFilters(eventsFiltersConfig)
-
 const showEditModal = ref(false)
 const showDeleteModal = ref(false)
 
-const updateRow = (updated: Event) => {
-  const index = events.value.findIndex(e => e.id === updated.id)
-  if (index !== -1) {
-    events.value = events.value.map(e => (e.id === updated.id ? updated : e))
-  }
-}
-const deleteRow = (id: number) => {
-  events.value = events.value.filter(e => e.id !== id)
-}
+const urlFilters = useUrlFilters(eventsFiltersConfig)
 
-const handleDelete = () => {
-  if (!selectedEventId.value) return
+const { data: tags, isLoading: isLoadingTags } = useQuery({
+  queryKey: ['tags'],
+  queryFn: () => tagApi.getAll(),
+})
 
-  runDeleteTask(async () => {
-    await eventApi.delete(selectedEventId.value!)
+const { data: events, isLoading } = useQuery({
+  queryKey: ['events'],
+  queryFn: () => eventApi.getAll(),
+})
+
+const { mutate: deleteEvent, isPending: isDeleting } = useMutation({
+  mutationFn: (id: number) => eventApi.delete(id),
+  onSuccess: () => {
     showDeleted('Event')
-    deleteRow(selectedEventId.value!)
-    selectedEventId.value = null
-    showDeleteModal.value = false
-  })
+    queryClient.invalidateQueries({ queryKey: ['events'] })
+  },
+})
+
+const { mutate: updateEvent, isPending: isSaving } = useMutation({
+  mutationFn: (variables: { id: number; values: EventFormValues }) =>
+    eventApi.update(variables.id, variables.values),
+  onSuccess: () => {
+    showUpdated('Event')
+    queryClient.invalidateQueries({ queryKey: ['events'] })
+    showEditModal.value = false
+  },
+})
+
+const handleDelete = () => {
+  if (!selectedEventId.value) return
+  deleteEvent(selectedEventId.value)
+  showDeleteModal.value = false
 }
 
 const handleUpdate = (values: EventFormValues) => {
-  runUpdateTask(
-    () => eventApi.update(editedEvent.value!.id, values),
-    updated => {
-      showUpdated('Event')
-      updateRow(updated)
-      showEditModal.value = false
-    }
-  )
+  if (!editedEvent.value) return
+  updateEvent({ id: editedEvent.value.id, values })
+  showEditModal.value = false
 }
 
 const selectEditEvent = (event: Event) => {
@@ -78,18 +78,6 @@ const selectDeleteEvent = (event: Event) => {
 }
 
 const columns = getEventColumns(selectEditEvent, selectDeleteEvent)
-
-onMounted(() => {
-  run(
-    () => eventApi.getAll(),
-    data => {
-      events.value = data
-    }
-  )
-  loadTags(async () => {
-    tags.value = await tagApi.getAll()
-  })
-})
 </script>
 
 <template>
@@ -98,8 +86,8 @@ onMounted(() => {
     <div class="container mx-auto">
       <EventsDataTable
         :columns="columns"
-        :data="events"
-        :tags="tags"
+        :data="events ?? []"
+        :tags="tags ?? []"
         :isLoading="isLoading"
         :isLoadingTags="isLoadingTags"
         :url-filters="urlFilters"
diff --git a/frontend/src/modules/fields/pages/FieldCreatePage.vue b/frontend/src/modules/fields/pages/FieldCreatePage.vue
index bba6993..9b0f20b 100644
--- a/frontend/src/modules/fields/pages/FieldCreatePage.vue
+++ b/frontend/src/modules/fields/pages/FieldCreatePage.vue
@@ -1,25 +1,29 @@
 <script setup lang="ts">
 import FieldForm from '@/modules/fields/components/FieldForm.vue'
 import { useRouter } from 'vue-router'
+import { useMutation, useQueryClient } from '@tanstack/vue-query'
 import { useEnhancedToast } from '@/shared/composables/useEnhancedToast'
 import { fieldApi } from '@/modules/fields/api'
-import { useAsyncTask } from '@/shared/composables/useAsyncTask'
+import type { Field } from '@/modules/fields/types'
 import type { FieldFormValues } from '@/modules/fields/validation/fieldSchema'
 import Header from '@/shared/components/layout/PageHeader.vue'
 import { Card, CardContent } from '@/shared/ui/card'
 
-const { isLoading, run } = useAsyncTask()
 const { showCreated } = useEnhancedToast()
 const router = useRouter()
+const queryClient = useQueryClient()
+
+const { mutate: createField, isPending: isLoading } = useMutation({
+  mutationFn: (values: FieldFormValues) => fieldApi.create(values),
+  onSuccess: (createdField: Field) => {
+    queryClient.invalidateQueries({ queryKey: ['fields'] })
+    router.push(`/fields/${createdField.id}`)
+    showCreated('Field')
+  },
+})
 
 const onSubmit = (values: FieldFormValues) => {
-  run(
-    () => fieldApi.create(values),
-    created => {
-      router.push(`/fields/${created.id}`)
-      showCreated('Field')
-    }
-  )
+  createField(values)
 }
 </script>
 
diff --git a/frontend/src/modules/fields/pages/FieldDetailsPage.vue b/frontend/src/modules/fields/pages/FieldDetailsPage.vue
index eb833e6..4c20e07 100644
--- a/frontend/src/modules/fields/pages/FieldDetailsPage.vue
+++ b/frontend/src/modules/fields/pages/FieldDetailsPage.vue
@@ -1,11 +1,10 @@
 <script setup lang="ts">
-import { defineAsyncComponent, onMounted, ref } from 'vue'
+import { defineAsyncComponent, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import type { Field } from '@/modules/fields/types'
+import { useQuery, useMutation, useQueryClient } from '@tanstack/vue-query'
 import FieldDetailsCard from '@/modules/fields/components/FieldDetailsCard.vue'
 import { fieldApi } from '@/modules/fields/api'
 import Header from '@/shared/components/layout/PageHeader.vue'
-import { useAsyncTask } from '@/shared/composables/useAsyncTask'
 import type { FieldFormValues } from '@/modules/fields/validation/fieldSchema'
 import { useEnhancedToast } from '@/shared/composables/useEnhancedToast'
 import DetailsCardSkeleton from '@/shared/components/skeletons/DetailsCardSkeleton.vue'
@@ -17,44 +16,44 @@ const FieldEditModal = defineAsyncComponent(
 
 const route = useRoute()
 const router = useRouter()
-const field = ref<Field | null>(null)
 const showEditModal = ref(false)
 const showDeleteModal = ref(false)
 
-const { run, isLoading } = useAsyncTask()
-const { run: runDeleteTask, isLoading: isDeleting } = useAsyncTask()
-const { run: runUpdateTask, isLoading: isSaving } = useAsyncTask()
-
+const queryClient = useQueryClient()
 const { showDeleted, showUpdated } = useEnhancedToast()
+const fieldId = Number(route.params.id)
 
-const handleDelete = () => {
-  runDeleteTask(async () => {
-    await fieldApi.delete(field.value!.id)
+const { data: field, isLoading } = useQuery({
+  queryKey: ['fields', fieldId],
+  queryFn: () => fieldApi.getById(fieldId, { with_event_count: true }),
+})
+
+const { mutate: deleteField, isPending: isDeleting } = useMutation({
+  mutationFn: () => fieldApi.delete(fieldId),
+  onSuccess: () => {
     showDeleted('Field')
+    queryClient.invalidateQueries({ queryKey: ['fields'] })
     router.push('/fields')
-  })
+  },
+})
+
+const { mutate: updateField, isPending: isSaving } = useMutation({
+  mutationFn: (values: FieldFormValues) => fieldApi.update(fieldId, values),
+  onSuccess: () => {
+    showUpdated('Field')
+    queryClient.invalidateQueries({ queryKey: ['fields', fieldId] })
+    queryClient.invalidateQueries({ queryKey: ['fields'] })
+    showEditModal.value = false
+  },
+})
+
+const handleDelete = () => {
+  deleteField()
 }
 
 const handleUpdate = (values: FieldFormValues) => {
-  runUpdateTask(
-    () => fieldApi.update(field.value!.id, values),
-    updated => {
-      showUpdated('Field')
-      field.value = updated
-      showEditModal.value = false
-    }
-  )
+  updateField(values)
 }
-
-onMounted(() => {
-  const id = Number(route.params.id)
-  run(
-    () => fieldApi.getById(id, { with_event_count: true }),
-    result => {
-      if (result) field.value = result
-    }
-  )
-})
 </script>
 
 <template>
diff --git a/frontend/src/modules/fields/pages/FieldsPage.vue b/frontend/src/modules/fields/pages/FieldsPage.vue
index 02fe339..5a7a8f8 100644
--- a/frontend/src/modules/fields/pages/FieldsPage.vue
+++ b/frontend/src/modules/fields/pages/FieldsPage.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { ref, onMounted, defineAsyncComponent } from 'vue'
+import { ref, defineAsyncComponent } from 'vue'
+import { useQuery, useMutation, useQueryClient } from '@tanstack/vue-query'
 import { fieldApi } from '@/modules/fields/api'
 import type { Field } from '@/modules/fields/types'
 import FieldsDataTable from '@/modules/fields/components/FieldsDataTable.vue'
 import Header from '@/shared/components/layout/PageHeader.vue'
-import { useAsyncTask } from '@/shared/composables/useAsyncTask'
 import { getFieldColumns } from '@/modules/fields/components/fieldColumns'
 import { useEnhancedToast } from '@/shared/composables/useEnhancedToast'
 import type { FieldFormValues } from '@/modules/fields/validation/fieldSchema'
@@ -15,53 +15,49 @@ const FieldEditModal = defineAsyncComponent(
   () => import('@/modules/fields/components/FieldEditModal.vue')
 )
 
-const { run, isLoading } = useAsyncTask()
-const { run: runDeleteTask, isLoading: isDeleting } = useAsyncTask()
-const { run: runUpdateTask, isLoading: isSaving } = useAsyncTask()
+const queryClient = useQueryClient()
 const { showUpdated, showDeleted } = useEnhancedToast()
 
-const fields = ref<Field[]>([])
-
 const selectedFieldId = ref<number | null>(null)
 const editedField = ref<Field | null>(null)
 
-const urlFilters = useUrlFilters(fieldsFiltersConfig)
-
 const showEditModal = ref(false)
 const showDeleteModal = ref(false)
 
-const updateRow = (updated: Field) => {
-  const index = fields.value.findIndex(f => f.id === updated.id)
-  if (index !== -1) {
-    fields.value = fields.value.map(f => (f.id === updated.id ? updated : f))
-  }
-}
-const deleteRow = (id: number) => {
-  fields.value = fields.value.filter(f => f.id !== id)
-}
+const urlFilters = useUrlFilters(fieldsFiltersConfig)
 
-const handleDelete = () => {
-  if (!selectedFieldId.value) return
+const { data: fields, isLoading } = useQuery({
+  queryKey: ['fields'],
+  queryFn: () => fieldApi.getAll(),
+})
 
-  runDeleteTask(async () => {
-    await fieldApi.delete(selectedFieldId.value!)
+const { mutate: deleteField, isPending: isDeleting } = useMutation({
+  mutationFn: (id: number) => fieldApi.delete(id),
+  onSuccess: () => {
     showDeleted('Field')
-    deleteRow(selectedFieldId.value!)
-    selectedFieldId.value = null
-    showDeleteModal.value = false
-  })
+    queryClient.invalidateQueries({ queryKey: ['fields'] })
+  },
+})
+
+const { mutate: updateField, isPending: isSaving } = useMutation({
+  mutationFn: ({ id, values }: { id: number; values: FieldFormValues }) =>
+    fieldApi.update(id, values),
+  onSuccess: () => {
+    showUpdated('Field')
+    queryClient.invalidateQueries({ queryKey: ['fields'] })
+  },
+})
+
+const handleDelete = () => {
+  if (!selectedFieldId.value) return
+  deleteField(selectedFieldId.value)
+  showDeleteModal.value = false
 }
 
 const handleUpdate = (values: FieldFormValues) => {
-  runUpdateTask(
-    () => fieldApi.update(editedField.value!.id, values),
-    updated => {
-      showUpdated('Field')
-      updateRow(updated)
-      editedField.value = null
-      showEditModal.value = false
-    }
-  )
+  if (!editedField.value) return
+  updateField({ id: editedField.value.id, values })
+  showEditModal.value = false
 }
 
 const selectEditField = (field: Field) => {
@@ -75,15 +71,6 @@ const selectDeleteField = (field: Field) => {
 }
 
 const columns = getFieldColumns(selectEditField, selectDeleteField)
-
-onMounted(() => {
-  run(
-    () => fieldApi.getAll(),
-    data => {
-      fields.value = data
-    }
-  )
-})
 </script>
 
 <template>
@@ -92,7 +79,7 @@ onMounted(() => {
     <div class="container mx-auto">
       <FieldsDataTable
         :columns="columns"
-        :data="fields"
+        :data="fields ?? []"
         :isLoading="isLoading"
         :url-filters="urlFilters"
       />
diff --git a/frontend/src/modules/switchboard/components/ExportPanel.vue b/frontend/src/modules/switchboard/components/ExportPanel.vue
index a06e4ef..3a6e8dd 100644
--- a/frontend/src/modules/switchboard/components/ExportPanel.vue
+++ b/frontend/src/modules/switchboard/components/ExportPanel.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import SwitchboardSection from '../layout/SwitchboardSectionLayout.vue'
 import { ref } from 'vue'
+import { useMutation } from '@tanstack/vue-query'
 import { exportData } from '../api'
 import { Button } from '@/shared/ui/button'
-import { useAsyncTask } from '@/shared/composables/useAsyncTask'
 import { downloadJson } from '@/shared/utils/downloadJson'
 import {
   Select,
@@ -16,23 +16,22 @@ import {
 import type { ExportTarget } from '../types'
 import { useEnhancedToast } from '@/shared/composables/useEnhancedToast'
 
-const { run, isLoading } = useAsyncTask()
 const { showSuccess } = useEnhancedToast()
 
 const selectedFormat = ref<ExportTarget>('json')
 
-const handleExport = () => {
-  run(
-    () => exportData(selectedFormat.value),
-    data => {
-      if (selectedFormat.value === 'json') {
-        downloadJson(data.data, 'evsy-export.json')
-      } else {
-        console.warn('Export format not implemented yet.')
-      }
-      showSuccess('Exported successfully')
+const { mutate, isPending: isLoading } = useMutation({
+  mutationFn: (format: ExportTarget) => exportData(format),
+  onSuccess: (data, format) => {
+    if (format === 'json') {
+      downloadJson(data.data, 'evsy-export.json')
     }
-  )
+    showSuccess('Exported successfully')
+  },
+})
+
+const handleExport = () => {
+  mutate(selectedFormat.value)
 }
 </script>
 
diff --git a/frontend/src/modules/switchboard/components/ImportPanel.vue b/frontend/src/modules/switchboard/components/ImportPanel.vue
index f2ceb10..e4611b1 100644
--- a/frontend/src/modules/switchboard/components/ImportPanel.vue
+++ b/frontend/src/modules/switchboard/components/ImportPanel.vue
@@ -1,18 +1,32 @@
 <script setup lang="ts">
 import SwitchboardSection from '../layout/SwitchboardSectionLayout.vue'
 import { ref } from 'vue'
+import { useMutation, useQueryClient } from '@tanstack/vue-query'
 import { importData } from '../api'
 import { Button } from '@/shared/ui/button'
 import { useEnhancedToast } from '@/shared/composables/useEnhancedToast'
-import { useAsyncTask } from '@/shared/composables/useAsyncTask'
 import { Input } from '@/shared/ui/input'
 
 const fileInput = ref<HTMLInputElement | null>(null)
 const selectedFile = ref<File | null>(null)
 
-const { run, isLoading } = useAsyncTask()
+const queryClient = useQueryClient()
 const { showSuccess } = useEnhancedToast()
 
+const { mutate, isPending: isLoading } = useMutation({
+  mutationFn: async (file: File) => {
+    const text = await file.text()
+    const parsed = JSON.parse(text)
+    return importData(parsed, 'json')
+  },
+  onSuccess: () => {
+    showSuccess('Import successful')
+    queryClient.invalidateQueries()
+    selectedFile.value = null
+    if (fileInput.value) fileInput.value.value = ''
+  },
+})
+
 const handleFileSelect = (event: Event) => {
   const target = event.target as HTMLInputElement
   if (target?.files?.length) {
@@ -22,16 +36,7 @@ const handleFileSelect = (event: Event) => {
 
 const handleImport = () => {
   if (!selectedFile.value) return
-
-  run(async () => {
-    const text = await selectedFile.value!.text()
-    const parsed = JSON.parse(text)
-    await importData(parsed, 'json')
-
-    showSuccess('Import successful')
-    selectedFile.value = null
-    fileInput.value!.value = ''
-  })
+  mutate(selectedFile.value)
 }
 </script>
 
diff --git a/frontend/src/modules/switchboard/components/ResetPanel.vue b/frontend/src/modules/switchboard/components/ResetPanel.vue
index 15fdf4f..143a098 100644
--- a/frontend/src/modules/switchboard/components/ResetPanel.vue
+++ b/frontend/src/modules/switchboard/components/ResetPanel.vue
@@ -1,39 +1,33 @@
 <script setup lang="ts">
 import SwitchboardSection from '../layout/SwitchboardSectionLayout.vue'
-import { ref, onMounted } from 'vue'
+import { useQuery, useMutation, useQueryClient } from '@tanstack/vue-query'
 import { resetDatabase } from '../api'
 import { Button } from '@/shared/ui/button'
 import { useEnhancedToast } from '@/shared/composables/useEnhancedToast'
-import { useAsyncTask } from '@/shared/composables/useAsyncTask'
 import type { ResetPreview } from '../types'
 import { Badge } from '@/shared/ui/badge'
 import { Icon } from '@iconify/vue'
 
-const preview = ref<{ events: number; fields: number; tags: number } | null>(null)
-
-const { run: runResetTask, isLoading: isResetting } = useAsyncTask()
-const { run: runFetchTask, isLoading: isFetching } = useAsyncTask()
-
+const queryClient = useQueryClient()
 const { showSuccess } = useEnhancedToast()
 
-const fetchPreview = () => {
-  runFetchTask(
-    () => resetDatabase(true),
-    result => {
-      if (result) preview.value = (result as ResetPreview).would_delete
-    }
-  )
-}
+const {
+  data: preview,
+  isLoading: isFetching,
+  refetch: fetchPreview,
+} = useQuery({
+  queryKey: ['resetPreview'],
+  queryFn: () => resetDatabase(true),
+  select: data => (data as ResetPreview).would_delete,
+})
 
-const handleReset = () => {
-  runResetTask(async () => {
-    await resetDatabase(false)
-    fetchPreview()
+const { mutate: handleReset, isPending: isResetting } = useMutation({
+  mutationFn: () => resetDatabase(false),
+  onSuccess: () => {
     showSuccess('Database reset successfully')
-  })
-}
-
-onMounted(fetchPreview)
+    queryClient.invalidateQueries()
+  },
+})
 </script>
 
 <template>
@@ -46,22 +40,21 @@ onMounted(fetchPreview)
       <div class="flex flex-wrap items-center gap-4">
         <Button variant="destructive" :disabled="isResetting" @click="handleReset"> Reset </Button>
         <div
-          v-if="preview"
           class="text-muted-foreground flex flex-wrap items-center gap-2 text-xs transition-opacity duration-300"
         >
-          <Badge variant="outline" class="min-w-[14ch] text-center font-mono">
+          <Badge variant="outline" class="min-h-[1.5rem] min-w-[14ch] text-center font-mono">
             <Transition name="fade-slide" mode="out-in">
-              <span :key="preview.events">{{ preview.events }} events</span>
+              <span v-if="preview" :key="preview.events">{{ preview.events }} events</span>
             </Transition>
           </Badge>
-          <Badge variant="outline" class="min-w-[14ch] text-center font-mono">
+          <Badge variant="outline" class="min-h-[1.5rem] min-w-[14ch] text-center font-mono">
             <Transition name="fade-slide" mode="out-in">
-              <span :key="preview.fields">{{ preview.fields }} fields</span>
+              <span v-if="preview" :key="preview.fields">{{ preview.fields }} fields</span>
             </Transition>
           </Badge>
-          <Badge variant="outline" class="min-w-[14ch] text-center font-mono">
+          <Badge variant="outline" class="min-h-[1.5rem] min-w-[14ch] text-center font-mono">
             <Transition name="fade-slide" mode="out-in">
-              <span :key="preview.tags">{{ preview.tags }} tags</span>
+              <span v-if="preview" :key="preview.tags">{{ preview.tags }} tags</span>
             </Transition>
           </Badge>
           <Button
@@ -71,7 +64,8 @@ onMounted(fetchPreview)
             @click="fetchPreview"
             title="Refresh counts"
           >
-            <Icon icon="radix-icons:reload" class="h-4 w-4" />
+            <Icon v-if="isFetching" icon="radix-icons:reload" class="h-4 w-4 animate-spin" />
+            <Icon v-else icon="radix-icons:reload" class="h-4 w-4" />
           </Button>
         </div>
       </div>
diff --git a/frontend/src/modules/switchboard/components/SeedPanel.vue b/frontend/src/modules/switchboard/components/SeedPanel.vue
index ecb0490..a578c0e 100644
--- a/frontend/src/modules/switchboard/components/SeedPanel.vue
+++ b/frontend/src/modules/switchboard/components/SeedPanel.vue
@@ -1,19 +1,22 @@
 <script setup lang="ts">
 import SwitchboardSection from '../layout/SwitchboardSectionLayout.vue'
+import { useMutation, useQueryClient } from '@tanstack/vue-query'
 import { seedDatabase } from '../api'
 import { Button } from '@/shared/ui/button'
 import { useEnhancedToast } from '@/shared/composables/useEnhancedToast'
-import { useAsyncTask } from '@/shared/composables/useAsyncTask'
 
-const { run, isLoading } = useAsyncTask()
+const queryClient = useQueryClient()
 const { showSuccess } = useEnhancedToast()
 
-const handleSeed = () => {
-  run(async () => {
-    await seedDatabase()
+const { mutate: handleSeed, isPending: isLoading } = useMutation({
+  mutationFn: () => seedDatabase(),
+  onSuccess: () => {
     showSuccess('Database seeded successfully')
-  })
-}
+    // Invalidate all queries to force a refetch across the app,
+    // ensuring components like the ResetPanel preview are updated.
+    queryClient.invalidateQueries()
+  },
+})
 </script>
 
 <template>
diff --git a/frontend/src/modules/tags/pages/TagCreatePage.vue b/frontend/src/modules/tags/pages/TagCreatePage.vue
index f59b6fe..4f57033 100644
--- a/frontend/src/modules/tags/pages/TagCreatePage.vue
+++ b/frontend/src/modules/tags/pages/TagCreatePage.vue
@@ -1,25 +1,28 @@
 <script setup lang="ts">
 import TagForm from '@/modules/tags/components/TagForm.vue'
 import { useRouter } from 'vue-router'
+import { useMutation, useQueryClient } from '@tanstack/vue-query'
 import { useEnhancedToast } from '@/shared/composables/useEnhancedToast'
 import { tagApi } from '@/modules/tags/api'
-import { useAsyncTask } from '@/shared/composables/useAsyncTask'
 import type { TagFormValues } from '@/modules/tags/validation/tagSchema'
 import Header from '@/shared/components/layout/PageHeader.vue'
 import { Card, CardContent } from '@/shared/ui/card'
 
-const { isLoading, run } = useAsyncTask()
 const { showCreated } = useEnhancedToast()
 const router = useRouter()
+const queryClient = useQueryClient()
+
+const { mutate: createTag, isPending: isLoading } = useMutation({
+  mutationFn: (values: TagFormValues) => tagApi.create(values),
+  onSuccess: () => {
+    queryClient.invalidateQueries({ queryKey: ['tags'] })
+    router.push('/tags')
+    showCreated('Tag')
+  },
+})
 
 const onSubmit = (values: TagFormValues) => {
-  run(
-    () => tagApi.create(values),
-    () => {
-      router.push('/tags')
-      showCreated('Tag')
-    }
-  )
+  createTag(values)
 }
 </script>
 
diff --git a/frontend/src/modules/tags/pages/TagsPage.vue b/frontend/src/modules/tags/pages/TagsPage.vue
index a3bafc8..d608620 100644
--- a/frontend/src/modules/tags/pages/TagsPage.vue
+++ b/frontend/src/modules/tags/pages/TagsPage.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import TagsDataGrid from '../components/TagsDataGrid.vue'
+import { useQuery, useMutation, useQueryClient } from '@tanstack/vue-query'
 import { tagApi } from '@/modules/tags/api'
 import type { Tag } from '@/modules/tags/types'
-import { ref, onMounted, defineAsyncComponent, computed } from 'vue'
-import { useAsyncTask } from '@/shared/composables/useAsyncTask'
+import { ref, defineAsyncComponent, computed } from 'vue'
 import type { TagFormValues } from '@/modules/tags/validation/tagSchema'
 import Header from '@/shared/components/layout/PageHeader.vue'
 import { useEnhancedToast } from '@/shared/composables/useEnhancedToast'
@@ -15,51 +15,50 @@ const TagEditModal = defineAsyncComponent(
   () => import('@/modules/tags/components/TagEditModal.vue')
 )
 
+const queryClient = useQueryClient()
 const { showUpdated, showDeleted } = useEnhancedToast()
 
-const tags = ref<Tag[]>([])
-const { run, isLoading } = useAsyncTask()
-const { run: runDeleteTask, isLoading: isDeleting } = useAsyncTask()
-const { run: runUpdateTask, isLoading: isSaving } = useAsyncTask()
+const selectedTagId = ref<string | null>(null)
+const editedTag = ref<Tag | null>(null)
 
 const showEditModal = ref(false)
 const showDeleteModal = ref(false)
 
-const selectedTagId = ref<string | null>(null)
-const editedTag = ref<Tag | null>(null)
-
-// URL filters with search synchronization
 const urlFilters = useUrlFilters(tagsFiltersConfig)
 
-// Filter tags based on URL search
-const filteredTags = computed(() => {
-  return filterTags(tags.value, urlFilters.filters.search)
+const { data: tags, isLoading } = useQuery({
+  queryKey: ['tags'],
+  queryFn: () => tagApi.getAll(),
+})
+
+const { mutate: deleteTag, isPending: isDeleting } = useMutation({
+  mutationFn: (id: string) => tagApi.delete(id),
+  onSuccess: () => {
+    showDeleted('Tag')
+    queryClient.invalidateQueries({ queryKey: ['tags'] })
+  },
+})
+
+const { mutate: updateTag, isPending: isSaving } = useMutation({
+  mutationFn: ({ id, values }: { id: string; values: TagFormValues }) => tagApi.update(id, values),
+  onSuccess: () => {
+    showUpdated('Tag')
+    queryClient.invalidateQueries({ queryKey: ['tags'] })
+  },
 })
 
 const handleDelete = () => {
   if (!selectedTagId.value) return
-
-  runDeleteTask(async () => {
-    await tagApi.delete(selectedTagId.value!)
-    showDeleted('Tag')
-    tags.value = tags.value.filter(tag => tag.id !== selectedTagId.value)
-    selectedTagId.value = null
-    showDeleteModal.value = false
-  })
+  deleteTag(selectedTagId.value)
+  showDeleteModal.value = false
 }
 
 const handleUpdate = (values: TagFormValues) => {
-  runUpdateTask(
-    () => tagApi.update(editedTag.value!.id, values),
-    updated => {
-      showUpdated('Tag')
-      tags.value = tags.value.map(tag => (tag.id === updated.id ? updated : tag))
-      showEditModal.value = false
-    }
-  )
+  if (!editedTag.value) return
+  updateTag({ id: editedTag.value.id, values })
+  showEditModal.value = false
 }
 
-// Handlers for TagsDataGrid
 const selectEditTag = (tag: Tag) => {
   editedTag.value = tag
   showEditModal.value = true
@@ -70,13 +69,8 @@ const selectDeleteTag = (tag: Tag) => {
   showDeleteModal.value = true
 }
 
-onMounted(() => {
-  run(
-    () => tagApi.getAll(),
-    data => {
-      tags.value = data
-    }
-  )
+const filteredTags = computed(() => {
+  return filterTags(tags.value ?? [], urlFilters.filters.search)
 })
 </script>
 
diff --git a/frontend/src/shared/components/layout/MainLayout.vue b/frontend/src/shared/components/layout/MainLayout.vue
index d93e2c8..dd439a9 100644
--- a/frontend/src/shared/components/layout/MainLayout.vue
+++ b/frontend/src/shared/components/layout/MainLayout.vue
@@ -2,6 +2,7 @@
 import MainLogo from '@/shared/components/layout/MainLogo.vue'
 import NavigationMenu from '@/shared/components/layout/NavigationMenu.vue'
 import DropdownMenu from '@/shared/components/layout/DropdownMenu.vue'
+import SyncStatusButton from '@/shared/components/layout/SyncStatusButton.vue'
 import LoveFooter from './LoveFooter.vue'
 import { useAppConfig } from '@/shared/composables/useAppConfig'
 import { useAuthStore } from '@/modules/auth/stores/useAuthStore'
@@ -23,7 +24,7 @@ const { isDemo, isDev } = useAppConfig()
           <div v-if="isDev || isDemo" class="text-muted-foreground font-mono text-sm font-semibold">
             {{ isDev ? 'DEV' : 'DEMO' }}
           </div>
-          <!-- Dropdown Menu -->
+          <SyncStatusButton />
           <DropdownMenu />
         </div>
       </div>
diff --git a/frontend/src/shared/components/layout/PageHeader.vue b/frontend/src/shared/components/layout/PageHeader.vue
index a0cd9b6..03ea94b 100644
--- a/frontend/src/shared/components/layout/PageHeader.vue
+++ b/frontend/src/shared/components/layout/PageHeader.vue
@@ -34,7 +34,6 @@ const goBack = () => {
       </h1>
     </div>
 
-    <!-- Пустой элемент для симметрии -->
     <div v-if="backLink || false" class="w-[30px]"></div>
   </div>
 </template>
diff --git a/frontend/src/shared/components/layout/SyncStatusButton.vue b/frontend/src/shared/components/layout/SyncStatusButton.vue
new file mode 100644
index 0000000..9141fbf
--- /dev/null
+++ b/frontend/src/shared/components/layout/SyncStatusButton.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { useIsFetching, useQueryClient } from '@tanstack/vue-query'
+import { Icon } from '@iconify/vue'
+import { Button } from '@/shared/ui/button'
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/shared/ui/tooltip'
+
+const isFetching = useIsFetching()
+const queryClient = useQueryClient()
+
+const handleRefresh = () => {
+  queryClient.invalidateQueries()
+}
+</script>
+
+<template>
+  <TooltipProvider :delay-duration="150">
+    <Tooltip>
+      <TooltipTrigger as-child>
+        <Button
+          variant="ghost"
+          size="icon"
+          class="h-8 w-8"
+          :disabled="isFetching > 0"
+          @click="handleRefresh"
+        >
+          <Icon v-if="isFetching > 0" icon="radix-icons:update" class="h-4 w-4 animate-spin" />
+          <Icon v-else icon="radix-icons:update" class="h-4 w-4" />
+          <span class="sr-only">Refresh data</span>
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent>
+        <p>{{ isFetching > 0 ? 'Syncing data...' : 'Refresh all data' }}</p>
+      </TooltipContent>
+    </Tooltip>
+  </TooltipProvider>
+</template>
diff --git a/frontend/src/shared/composables/useEnhancedToast.ts b/frontend/src/shared/composables/useEnhancedToast.ts
index 06b2b9f..0c7f53e 100644
--- a/frontend/src/shared/composables/useEnhancedToast.ts
+++ b/frontend/src/shared/composables/useEnhancedToast.ts
@@ -1,36 +1,59 @@
-import { useApiErrorToast, useSuccessToast, useInfoToast } from '@/shared/utils/toast'
+import { toast } from 'vue-sonner'
 import { parseApiError } from '@/shared/utils/parseApiError'
 
+/**
+ * A composable that provides enhanced toast notifications,
+ * including automatic API error parsing.
+ */
 export function useEnhancedToast() {
-  const { showApiErrorToast } = useApiErrorToast()
-  const { showSuccessToast } = useSuccessToast()
-  const { showInfoToast } = useInfoToast()
-
-  return {
-    // Success messages
-    showSuccess: (message: string) => showSuccessToast(message, ''),
-    showCreated: (entity: string) => showSuccessToast(`${entity} created successfully!`),
-    showUpdated: (entity: string) => showSuccessToast(`${entity} updated successfully!`),
-    showDeleted: (entity: string) => showSuccessToast(`${entity} deleted successfully!`),
+  /**
+   * Shows an error toast. If the error is from an API call,
+   * it will be parsed into a user-friendly message.
+   * @param error The error object (can be of unknown type).
+   * @param title The title for the toast.
+   */
+  function showError(error: unknown, title = 'An Error Occurred') {
+    const description = parseApiError(error)
+    toast.error(title, {
+      description,
+      duration: 5000, // Give users a bit more time to read errors
+    })
+  }
 
-    // Info messages
-    showInfo: (message: string) => showInfoToast(message),
-    showCopied: (item: string) => showInfoToast(`${item} copied to clipboard`),
+  /**
+   * Shows a success toast.
+   * @param title The title for the toast.
+   * @param description Optional description.
+   */
+  function showSuccess(title = 'Success', description?: string) {
+    toast.success(title, {
+      description,
+      duration: 3000,
+    })
+  }
 
-    // Error handling
-    showError: (error: unknown, fallbackMessage = 'Something went wrong') => {
-      const message = parseApiError(error, fallbackMessage)
-      showApiErrorToast(message)
+  /**
+   * Shows an info toast.
+   * @param title The title for the toast.
+   * @param description Optional description.
+   */
+  function showInfo(title = 'Info', description?: string) {
+    toast.info(title, {
+      description,
+      duration: 3000,
+    })
+  }
 
-      if (import.meta.env.VITE_ENV === 'dev') {
-        console.error('[API ERROR]', error)
-      }
-    },
+  return {
+    showError,
+    showSuccess,
+    showInfo,
 
-    // Common error messages
-    showCopyError: (item: string) => showApiErrorToast(`Failed to copy ${item}`),
-    showDeleteError: (entity: string) => showApiErrorToast(`Failed to delete ${entity}`),
-    showUpdateError: (entity: string) => showApiErrorToast(`Failed to update ${entity}`),
-    showCreateError: (entity: string) => showApiErrorToast(`Failed to create ${entity}`),
+    // Common toasts utilities
+    showCreated: (entity: string) => showSuccess(`${entity} created successfully!`),
+    showUpdated: (entity: string) => showSuccess(`${entity} updated successfully!`),
+    showDeleted: (entity: string) => showSuccess(`${entity} deleted successfully!`),
+    showCopied: (item: string) => showInfo(`${item} copied to clipboard`),
+    showCopyError: (item: string) => showInfo(`Failed to copy ${item}`),
   }
 }
diff --git a/frontend/src/shared/plugins/vue-query.ts b/frontend/src/shared/plugins/vue-query.ts
new file mode 100644
index 0000000..558c3ee
--- /dev/null
+++ b/frontend/src/shared/plugins/vue-query.ts
@@ -0,0 +1,18 @@
+import type { App } from 'vue'
+import { VueQueryPlugin, type VueQueryPluginOptions, QueryClient } from '@tanstack/vue-query'
+
+export const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 1000 * 60 * 5,
+    },
+  },
+})
+
+const vueQueryPluginOptions: VueQueryPluginOptions = {
+  queryClient,
+}
+
+export const installVueQuery = (app: App) => {
+  app.use(VueQueryPlugin, vueQueryPluginOptions)
+}
diff --git a/frontend/src/shared/utils/parseApiError.ts b/frontend/src/shared/utils/parseApiError.ts
index e9b1298..7aac6bf 100644
--- a/frontend/src/shared/utils/parseApiError.ts
+++ b/frontend/src/shared/utils/parseApiError.ts
@@ -1,47 +1,65 @@
 import { isAxiosError } from 'axios'
 
-type ErrorResponse =
-  | {
-      detail?: string | { msg: string }[] | { msg?: string; type?: string }
-      message?: string
-      title?: string
-    }
-  | { [key: string]: unknown }
+// Type definition that mirrors the backend's ErrorResponse Pydantic model
+interface ApiErrorResponse {
+  code: string
+  message: string
+  details?: {
+    loc: (string | number)[]
+    msg: string
+    type: string
+  }[]
+}
 
 /**
- * Extracts a user-friendly message from an unknown error.
- * Handles Axios errors, Pydantic validation errors, network issues, and generic JS errors.
+ * Type guard to check if the given data object conforms to the ApiErrorResponse structure.
  */
-export function parseApiError(error: unknown, fallbackMessage = 'Something went wrong'): string {
-  if (isAxiosError<ErrorResponse>(error)) {
-    const status = error.response?.status
+function isApiErrorResponse(data: unknown): data is ApiErrorResponse {
+  return (
+    typeof data === 'object' &&
+    data !== null &&
+    'code' in data &&
+    'message' in data &&
+    typeof (data as ApiErrorResponse).code === 'string' &&
+    typeof (data as ApiErrorResponse).message === 'string'
+  )
+}
 
+/**
+ * Extracts a user-friendly message from an unknown error.
+ * Designed to work with the standardized API error format.
+ */
+export function parseApiError(
+  error: unknown,
+  fallbackMessage = 'An unexpected error occurred'
+): string {
+  if (isAxiosError(error)) {
+    // Handle network errors where there's no response from the server
     if (!error.response) {
-      return 'Network error: Failed to connect to server'
+      return 'Network Error: Could not connect to the server.'
     }
 
     const data = error.response.data
 
-    if (typeof data?.detail === 'string') {
-      return `${status ?? ''} ${data.detail}`
-    } else if (Array.isArray(data?.detail)) {
-      const firstError = data.detail[0]
-      return `${status ?? ''} ${firstError?.msg ?? fallbackMessage}`
-    } else if (data?.message) {
-      return `${status ?? ''} ${data.message}`
-    } else if (data?.title) {
-      return `${status ?? ''} ${data.title}`
-    } else if (
-      data?.detail &&
-      typeof data.detail === 'object' &&
-      'msg' in data.detail &&
-      typeof data.detail.msg === 'string'
-    ) {
-      return `${status ?? ''} ${data.detail.msg}`
+    // Check if the error response matches our standardized format
+    if (isApiErrorResponse(data)) {
+      // For validation errors, provide a more specific message from the details
+      if (data.code === 'validation_error' && data.details?.length) {
+        const firstDetail = data.details[0]
+        // Example: "name: Field required"
+        const fieldName = firstDetail.loc.slice(-1)[0]
+        return `${fieldName}: ${firstDetail.msg}`
+      }
+      // For all other standard API errors, use the main message
+      return data.message
     }
-  } else if (error instanceof Error) {
+  }
+
+  // Handle generic JavaScript errors (e.g., new Error('...'))
+  if (error instanceof Error) {
     return error.message
   }
 
+  // If the error is in an unknown format, return the fallback message
   return fallbackMessage
 }
diff --git a/frontend/src/shared/utils/toast.ts b/frontend/src/shared/utils/toast.ts
deleted file mode 100644
index bc5191d..0000000
--- a/frontend/src/shared/utils/toast.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { toast } from 'vue-sonner'
-
-export function useApiErrorToast() {
-  function showApiErrorToast(message: string) {
-    toast.error('API Error', {
-      description: message,
-      duration: 3000,
-    })
-  }
-
-  return { showApiErrorToast }
-}
-
-export function useSuccessToast(defaultTitle = 'Success', defaultDescription = '') {
-  function showSuccessToast(title?: string, description?: string) {
-    toast.success(title ?? defaultTitle, {
-      description: description ?? defaultDescription,
-      duration: 3000,
-    })
-  }
-
-  return { showSuccessToast }
-}
-
-export function useInfoToast() {
-  function showInfoToast(title: string, description?: string) {
-    toast.info(title, {
-      description: description,
-      duration: 3000,
-    })
-  }
-
-  return { showInfoToast }
-}