diff --git a/.husky/commit-msg b/.husky/commit-msg
index ba64ed92..2e6b87e2 100644
--- a/.husky/commit-msg
+++ b/.husky/commit-msg
@@ -1 +1 @@
-pnpm dlx commitlint --edit "$1"
+pnpm exec commitlint --edit "$1"
diff --git a/package.json b/package.json
index a6ab3990..6f54c367 100644
--- a/package.json
+++ b/package.json
@@ -46,6 +46,7 @@
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "date-fns": "^4.1.0",
+    "diff": "^9.0.0",
     "dompurify": "^3.3.1",
     "embla-carousel-react": "^8.6.0",
     "fastest-levenshtein": "^1.0.16",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index dbbb4e6d..7cb0ab66 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -77,6 +77,9 @@ importers:
       date-fns:
         specifier: ^4.1.0
         version: 4.1.0
+      diff:
+        specifier: ^9.0.0
+        version: 9.0.0
       dompurify:
         specifier: ^3.3.1
         version: 3.4.2
@@ -3477,6 +3480,10 @@ packages:
     resolution: {integrity: sha512-DPi0FmjiSU5EvQV0++GFDOJ9ASQUVFh5kD+OzOnYdi7n3Wpm9hWWGfB/O2blfHcMVTL5WkQXSnRiK9makhrcnw==}
     engines: {node: '>=0.3.1'}
 
+  diff@9.0.0:
+    resolution: {integrity: sha512-svtcdpS8CgJyqAjEQIXdb3OjhFVVYjzGAPO8WGCmRbrml64SPw/jJD4GoE98aR7r25A0XcgrK3F02yw9R/vhQw==}
+    engines: {node: '>=0.3.1'}
+
   doctrine@2.1.0:
     resolution: {integrity: sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==}
     engines: {node: '>=0.10.0'}
@@ -9820,6 +9827,8 @@ snapshots:
 
   diff@8.0.4: {}
 
+  diff@9.0.0: {}
+
   doctrine@2.1.0:
     dependencies:
       esutils: 2.0.3
diff --git a/public/sounds/quiz/metal-pipe.mp3 b/public/sounds/quiz/metal-pipe.mp3
new file mode 100644
index 00000000..35bc0d40
Binary files /dev/null and b/public/sounds/quiz/metal-pipe.mp3 differ
diff --git a/src/app/edit-quiz/[quizId]/client.tsx b/src/app/edit-quiz/[quizId]/client.tsx
index 6581d015..766df857 100644
--- a/src/app/edit-quiz/[quizId]/client.tsx
+++ b/src/app/edit-quiz/[quizId]/client.tsx
@@ -37,6 +37,8 @@ function EditQuizPageContent({
     isError,
   } = useQuiz(quizId, {
     enabled: quizId.trim() !== "",
+    staleTime: 0,
+    refetchOnMount: "always",
   });
   const isInvalidQuizId = quizId.trim() === "";
 
diff --git a/src/app/oauth/authorize/client.tsx b/src/app/oauth/authorize/client.tsx
new file mode 100644
index 00000000..f9b9190d
--- /dev/null
+++ b/src/app/oauth/authorize/client.tsx
@@ -0,0 +1,480 @@
+"use client";
+
+import { useMutation, useQuery } from "@tanstack/react-query";
+import {
+  AlertCircleIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  ExternalLinkIcon,
+  LinkIcon,
+  ShieldCheckIcon,
+  XIcon,
+} from "lucide-react";
+import { useEffect, useState } from "react";
+import { toast } from "sonner";
+
+import { AppLogo } from "@/components/app-logo";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  Field,
+  FieldContent,
+  FieldDescription,
+  FieldGroup,
+  FieldLabel,
+  FieldLegend,
+  FieldSet,
+  FieldTitle,
+} from "@/components/ui/field";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Spinner } from "@/components/ui/spinner";
+import { API_URL } from "@/lib/api";
+import type { JWTPayload } from "@/lib/auth/types";
+import { getInitials } from "@/lib/utils";
+import { OAuthAuthorizationService } from "@/services/oauth-authorization.service";
+import type {
+  OAuthAuthorizationParameters,
+  OAuthAuthorizationRequest,
+  OAuthScopeGrant,
+} from "@/services/oauth-authorization.service";
+
+type AuthorizationAction = "allow" | "deny";
+
+interface AuthorizationDecision {
+  action: AuthorizationAction;
+  allow: boolean;
+  scopes: string[];
+}
+
+const AUTHORIZATION_SCOPE_SKELETONS = [
+  "quizzes:read",
+  "quizzes:write",
+  "study:read",
+  "study:write",
+  "user:read",
+];
+
+const oauthAuthorizationService = new OAuthAuthorizationService(API_URL);
+
+function isRedirect(value: unknown): value is { redirect_url: string } {
+  return (
+    value !== null &&
+    typeof value === "object" &&
+    "redirect_url" in value &&
+    typeof (value as { redirect_url?: unknown }).redirect_url === "string"
+  );
+}
+
+function isError(value: unknown): value is { error: string } {
+  return (
+    value !== null &&
+    typeof value === "object" &&
+    "error" in value &&
+    typeof (value as { error?: unknown }).error === "string"
+  );
+}
+
+function redirectTo(url: string | null) {
+  if (url === null) {
+    return;
+  }
+
+  window.location.assign(url);
+}
+
+export function OAuthAuthorizeClient({
+  authorizationParameters,
+  currentUser,
+}: {
+  authorizationParameters: OAuthAuthorizationParameters;
+  currentUser: JWTPayload;
+}): React.JSX.Element {
+  const [uncheckedScopes, setUncheckedScopes] = useState<string[]>([]);
+  const authorizationQuery = useQuery({
+    queryKey: ["oauth-authorization", authorizationParameters],
+    queryFn: async () => {
+      const details = await oauthAuthorizationService.getAuthorizationDetails(
+        authorizationParameters,
+      );
+
+      if (isError(details)) {
+        throw new Error(details.error);
+      }
+
+      return details;
+    },
+    retry: false,
+    refetchOnWindowFocus: false,
+  });
+
+  const authorizationDecision = useMutation({
+    mutationFn: async ({ allow, scopes }: AuthorizationDecision) =>
+      oauthAuthorizationService.completeAuthorization({
+        authorizationParameters,
+        scopes: allow ? scopes : [],
+        allow,
+      }),
+  });
+
+  const redirectUrl = isRedirect(authorizationQuery.data)
+    ? authorizationQuery.data.redirect_url
+    : null;
+
+  useEffect(() => {
+    redirectTo(redirectUrl);
+  }, [redirectUrl]);
+
+  const requestDetails =
+    authorizationQuery.data === undefined || isRedirect(authorizationQuery.data)
+      ? null
+      : authorizationQuery.data;
+  const selectedScopes =
+    requestDetails === null
+      ? []
+      : requestDetails.scopes
+          .map((scope) => scope.value)
+          .filter((scope) => !uncheckedScopes.includes(scope));
+  const queryError =
+    authorizationQuery.error instanceof Error
+      ? authorizationQuery.error.message
+      : authorizationQuery.isError
+        ? "Nie udało się odczytać żądania autoryzacji."
+        : null;
+  const mutationError =
+    authorizationDecision.error instanceof Error
+      ? authorizationDecision.error.message
+      : authorizationDecision.isError
+        ? "Nie udało się zakończyć autoryzacji."
+        : null;
+  const error = mutationError ?? queryError;
+  const submittingAction = authorizationDecision.isPending
+    ? authorizationDecision.variables.action
+    : null;
+
+  const submitDecision = (allow: boolean) => {
+    const action = allow ? "allow" : "deny";
+    void authorizationDecision
+      .mutateAsync({
+        action,
+        allow,
+        scopes: selectedScopes,
+      })
+      .then((result) => {
+        window.location.assign(result.redirect_url);
+      })
+      .catch((submitError: unknown) => {
+        const message =
+          submitError instanceof Error
+            ? submitError.message
+            : "Nie udało się zakończyć autoryzacji.";
+        toast.error(message);
+      });
+  };
+
+  const setScopeChecked = (scopeValue: string, checked: boolean) => {
+    setUncheckedScopes((current) =>
+      checked
+        ? current.filter((item) => item !== scopeValue)
+        : [...new Set([...current, scopeValue])],
+    );
+  };
+
+  const isLoading = authorizationQuery.isPending;
+
+  return (
+    <div className="mx-auto flex w-full max-w-md items-center justify-center">
+      <Card className="w-full">
+        <AuthorizationHeader
+          requestDetails={requestDetails}
+          isLoading={isLoading}
+          hasError={error !== null}
+        />
+        <CardContent className="flex flex-col gap-3">
+          {error === null ? null : (
+            <Alert variant="destructive">
+              <AlertCircleIcon />
+              <AlertDescription>{error}</AlertDescription>
+            </Alert>
+          )}
+
+          <AccountSummary user={currentUser} />
+
+          <FieldSet>
+            <FieldLegend
+              variant="label"
+              className="text-muted-foreground mb-2 text-xs font-semibold tracking-wide uppercase"
+            >
+              Uprawnienia
+            </FieldLegend>
+            <FieldGroup className="gap-2">
+              {isLoading ? <AuthorizationSkeleton /> : null}
+
+              {requestDetails === null ? null : (
+                <PermissionFields
+                  scopes={requestDetails.scopes}
+                  selectedScopes={selectedScopes}
+                  onCheckedChange={setScopeChecked}
+                />
+              )}
+            </FieldGroup>
+          </FieldSet>
+        </CardContent>
+
+        <AuthorizationActions
+          selectedScopesCount={selectedScopes.length}
+          submittingAction={submittingAction}
+          onSubmit={submitDecision}
+          disabled={isLoading}
+        />
+      </Card>
+    </div>
+  );
+}
+
+function AuthorizationHeader({
+  requestDetails,
+  isLoading,
+  hasError,
+}: {
+  requestDetails: OAuthAuthorizationRequest | null;
+  isLoading: boolean;
+  hasError: boolean;
+}) {
+  const title =
+    requestDetails === null
+      ? hasError
+        ? "Nie można wyświetlić zgody"
+        : "Sprawdzanie aplikacji"
+      : `Połącz ${requestDetails.client_name} z kontem Testownik`;
+
+  return (
+    <CardHeader className="text-center">
+      <ConnectionGraphic
+        requestDetails={requestDetails}
+        isLoading={isLoading}
+      />
+      <CardTitle className="mt-2 flex flex-col items-center justify-center gap-1.25 text-lg leading-tight font-semibold text-balance">
+        {isLoading ? (
+          <>
+            <Skeleton className="mx-auto h-5 w-full max-w-80 sm:h-[22.5px]" />
+            <Skeleton className="mx-auto h-5 w-full max-w-60 sm:hidden sm:h-[22.5px]" />
+          </>
+        ) : (
+          title
+        )}
+      </CardTitle>
+      <CardDescription>
+        {isLoading ? (
+          <Skeleton className="mx-auto mt-1 h-4 w-full max-w-52 sm:mt-0 sm:h-5" />
+        ) : (
+          <ClientUriLink clientUri={requestDetails?.client_uri} />
+        )}
+      </CardDescription>
+    </CardHeader>
+  );
+}
+
+function ConnectionGraphic({
+  requestDetails,
+  isLoading,
+}: {
+  requestDetails: OAuthAuthorizationRequest | null;
+  isLoading: boolean;
+}) {
+  return (
+    <div className="flex items-center justify-center gap-2.5">
+      <div className="bg-background flex size-11 items-center justify-center rounded-xl border p-2 shadow-xs">
+        <AppLogo />
+      </div>
+      <div className="text-primary flex items-center gap-1.5">
+        <ChevronRightIcon className="text-primary/70 size-3.5 animate-pulse" />
+        <span className="bg-primary text-primary-foreground grid size-7 place-items-center rounded-full shadow-xs">
+          <LinkIcon className="size-3.5" />
+        </span>
+        <ChevronLeftIcon className="text-primary/70 size-3.5 animate-pulse" />
+      </div>
+      <div className="bg-background flex size-11 items-center justify-center overflow-hidden rounded-xl border p-2 shadow-xs">
+        {isLoading ? <Skeleton className="size-full rounded-lg" /> : null}
+        {!isLoading &&
+        requestDetails?.logo_uri !== undefined &&
+        requestDetails.logo_uri.length > 0 ? (
+          // eslint-disable-next-line @next/next/no-img-element
+          <img
+            src={requestDetails.logo_uri}
+            alt=""
+            className="size-full object-contain"
+            referrerPolicy="no-referrer"
+          />
+        ) : null}
+        {!isLoading &&
+        (requestDetails?.logo_uri === undefined ||
+          requestDetails.logo_uri.length === 0) ? (
+          <span className="text-primary text-base font-semibold">
+            {getInitials(requestDetails?.client_name ?? "App")}
+          </span>
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
+function ClientUriLink({ clientUri }: { clientUri: string | undefined }) {
+  if (clientUri === undefined || clientUri.length === 0) {
+    return null;
+  }
+
+  return (
+    <a
+      href={clientUri}
+      target="_blank"
+      rel="noreferrer"
+      className="hover:text-foreground inline-flex items-center gap-1 break-all transition-colors"
+    >
+      {clientUri}
+      <ExternalLinkIcon className="size-3.5" />
+    </a>
+  );
+}
+
+function AuthorizationSkeleton() {
+  return (
+    <>
+      {AUTHORIZATION_SCOPE_SKELETONS.map((scope) => (
+        <FieldLabel key={scope}>
+          <Field orientation="horizontal">
+            <Skeleton className="size-5 rounded-[4px]" role="checkbox" />
+            <FieldContent>
+              <Skeleton className="h-5 w-full max-w-72" />
+              <Skeleton className="h-4 w-full max-w-24" />
+            </FieldContent>
+          </Field>
+        </FieldLabel>
+      ))}
+    </>
+  );
+}
+
+function AccountSummary({ user }: { user: JWTPayload }) {
+  return (
+    <div className="bg-muted/30 flex items-center gap-3 rounded-xl border px-3 py-2.5">
+      <Avatar className="h-8 w-8">
+        {user.photo === null || user.photo.length === 0 ? null : (
+          <AvatarImage src={user.photo} alt="" referrerPolicy="no-referrer" />
+        )}
+        <AvatarFallback>{getInitials(user.full_name)}</AvatarFallback>
+      </Avatar>
+      <div className="min-w-0">
+        <p className="text-muted-foreground text-xs">Zalogowano jako</p>
+        <p className="truncate text-sm font-medium">{user.full_name}</p>
+      </div>
+    </div>
+  );
+}
+
+function PermissionFields({
+  scopes,
+  selectedScopes,
+  onCheckedChange,
+}: {
+  scopes: OAuthScopeGrant[];
+  selectedScopes: string[];
+  onCheckedChange: (scopeValue: string, checked: boolean) => void;
+}) {
+  return (
+    <>
+      {scopes.map((scope) => (
+        <ScopeField
+          key={scope.value}
+          scope={scope}
+          checked={selectedScopes.includes(scope.value)}
+          onCheckedChange={onCheckedChange}
+        />
+      ))}
+    </>
+  );
+}
+
+function ScopeField({
+  scope,
+  checked,
+  onCheckedChange,
+}: {
+  scope: OAuthScopeGrant;
+  checked: boolean;
+  onCheckedChange: (scopeValue: string, checked: boolean) => void;
+}) {
+  const id = `oauth-scope-${scope.value}`;
+
+  return (
+    <FieldLabel htmlFor={id}>
+      <Field orientation="horizontal">
+        <Checkbox
+          id={id}
+          checked={checked}
+          aria-label={scope.description}
+          onCheckedChange={(nextChecked) => {
+            onCheckedChange(scope.value, nextChecked);
+          }}
+        />
+        <FieldContent>
+          <FieldTitle>{scope.description}</FieldTitle>
+          <FieldDescription className="font-mono text-xs">
+            {scope.value}
+          </FieldDescription>
+        </FieldContent>
+      </Field>
+    </FieldLabel>
+  );
+}
+
+function AuthorizationActions({
+  selectedScopesCount,
+  submittingAction,
+  onSubmit,
+  disabled,
+}: {
+  selectedScopesCount: number;
+  submittingAction: AuthorizationAction | null;
+  onSubmit: (allow: boolean) => void;
+  disabled: boolean;
+}) {
+  return (
+    <CardFooter className="bg-muted/10 grid gap-2 border-t sm:grid-cols-2">
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={() => {
+          onSubmit(false);
+        }}
+        disabled={submittingAction !== null || disabled}
+        className="order-2 sm:order-1"
+      >
+        {submittingAction === "deny" ? <Spinner /> : <XIcon />}
+        Odmów
+      </Button>
+      <Button
+        size="sm"
+        onClick={() => {
+          onSubmit(true);
+        }}
+        disabled={
+          submittingAction !== null || selectedScopesCount === 0 || disabled
+        }
+        className="order-1 sm:order-2"
+      >
+        {submittingAction === "allow" ? <Spinner /> : <ShieldCheckIcon />}
+        Zezwól
+      </Button>
+    </CardFooter>
+  );
+}
diff --git a/src/app/oauth/authorize/page.tsx b/src/app/oauth/authorize/page.tsx
new file mode 100644
index 00000000..ead708f8
--- /dev/null
+++ b/src/app/oauth/authorize/page.tsx
@@ -0,0 +1,65 @@
+import type { Metadata } from "next";
+import { redirect } from "next/navigation";
+
+import { getServerCurrentUser } from "@/lib/auth/server";
+
+import { OAuthAuthorizeClient } from "./client";
+
+export const metadata: Metadata = {
+  title: "Autoryzacja aplikacji",
+};
+
+type SearchParameters = Record<string, string | string[] | undefined>;
+
+function normalizeSearchParameters(
+  searchParameters: SearchParameters,
+): Record<string, string | string[]> {
+  return Object.fromEntries(
+    Object.entries(searchParameters).filter(
+      (entry): entry is [string, string | string[]] => entry[1] !== undefined,
+    ),
+  );
+}
+
+function buildReturnPath(
+  authorizationParameters: Record<string, string | string[]>,
+) {
+  const query = new URLSearchParams();
+  for (const [key, value] of Object.entries(authorizationParameters)) {
+    if (Array.isArray(value)) {
+      for (const item of value) {
+        query.append(key, item);
+      }
+    } else {
+      query.set(key, value);
+    }
+  }
+
+  const queryString = query.toString();
+  return queryString.length > 0
+    ? `/oauth/authorize?${queryString}`
+    : "/oauth/authorize";
+}
+
+export default async function OAuthAuthorizePage({
+  searchParams,
+}: {
+  searchParams: Promise<SearchParameters>;
+}) {
+  const authorizationParameters = normalizeSearchParameters(await searchParams);
+  const currentUser = await getServerCurrentUser();
+
+  if (currentUser === null) {
+    const loginParameters = new URLSearchParams({
+      redirect: buildReturnPath(authorizationParameters),
+    });
+    redirect(`/login?${loginParameters.toString()}`);
+  }
+
+  return (
+    <OAuthAuthorizeClient
+      authorizationParameters={authorizationParameters}
+      currentUser={currentUser}
+    />
+  );
+}
diff --git a/src/app/privacy-policy/page.tsx b/src/app/privacy-policy/page.tsx
index ce8378ab..090f6a94 100644
--- a/src/app/privacy-policy/page.tsx
+++ b/src/app/privacy-policy/page.tsx
@@ -61,6 +61,26 @@ export default function PrivacyPolicyPage() {
             Informacje o postępach w nauce (wyniki quizów, statystyki
             rozwiązań);
           </li>
+          <li>
+            Treści tworzone i udostępniane w Serwisie, w tym quizy, pytania,
+            odpowiedzi, wyjaśnienia oraz obrazy dodane do pytań lub odpowiedzi;
+          </li>
+          <li>
+            Treści przekazywane do funkcji sztucznej inteligencji, w tym
+            wiadomości czatu AI, prompty, wybrane fragmenty quizów, pytania,
+            odpowiedzi, obrazy z pytań oraz odpowiedzi wygenerowane przez AI;
+          </li>
+          <li>
+            Dane związane z integracjami zewnętrznymi i MCP, w tym informacje o
+            połączonych aplikacjach, zakresie udzielonych uprawnień, tokenach
+            autoryzacyjnych oraz żądaniach wykonywanych przez klienta MCP w
+            imieniu Użytkownika;
+          </li>
+          <li>
+            Informacje o korzystaniu z funkcji AI, w tym liczba i czas zapytań
+            wykorzystywane do limitowania nadużyć i zapewnienia dostępności
+            usługi;
+          </li>
           <li>
             Adres IP oraz dane techniczne urządzenia (typ przeglądarki, system
             operacyjny, logi serwera).
@@ -96,6 +116,29 @@ export default function PrivacyPolicyPage() {
             stronie (Umami Analytics) i ulepszania funkcjonalności Serwisu
             (podstawa prawna: <strong>art. 6 ust. 1 lit. f RODO</strong>);
           </li>
+          <li>
+            <strong>Funkcje sztucznej inteligencji:</strong> w celu
+            udostępniania czatu AI, podpowiedzi, wyjaśnień pytań, generowania
+            pytań treningowych oraz proponowania edycji quizów. W tym celu do
+            modelu AI mogą być przekazywane treści niezbędne do udzielenia
+            odpowiedzi, np. wiadomość Użytkownika, kontekst quizu, treść
+            pytania, odpowiedzi, wyjaśnienia i powiązane obrazy (podstawa
+            prawna: <strong>art. 6 ust. 1 lit. b RODO</strong> – świadczenie
+            funkcji dostępnych w Serwisie oraz{" "}
+            <strong>art. 6 ust. 1 lit. f RODO</strong> – prawnie uzasadniony
+            interes Administratora polegający na rozwoju i zabezpieczeniu
+            Serwisu);
+          </li>
+          <li>
+            <strong>Integracje MCP i OAuth:</strong> w celu umożliwienia
+            Użytkownikowi połączenia Serwisu z zewnętrznym klientem MCP lub inną
+            aplikacją, autoryzowania dostępu do wybranych danych i wykonywania
+            działań w Serwisie zgodnie z zakresem udzielonych uprawnień
+            (podstawa prawna: <strong>art. 6 ust. 1 lit. b RODO</strong> –
+            świadczenie funkcji integracji oraz{" "}
+            <strong>art. 6 ust. 1 lit. f RODO</strong> – bezpieczeństwo i
+            rozliczalność dostępu);
+          </li>
           <li>
             <strong>Bezpieczeństwo:</strong> w celu zapewnienia bezpieczeństwa
             sesji, wykrywania nadużyć oraz tworzenia kopii zapasowych (podstawa
@@ -116,6 +159,22 @@ export default function PrivacyPolicyPage() {
           3. Logi systemowe oraz dane analityczne przechowywane są przez okres
           ograniczony, niezbędny do celów technicznych i statystycznych.
         </p>
+        <p>
+          4. Dane przetwarzane w ramach funkcji AI są przechowywane przez okres
+          niezbędny do świadczenia tych funkcji, obsługi historii rozmowy w
+          interfejsie, limitowania zapytań, bezpieczeństwa i rozpatrywania
+          zgłoszeń. Dostawcy modeli AI mogą przechowywać dane przekazane przez
+          API zgodnie z własnymi zasadami retencji, zależnymi m.in. od dostawcy,
+          rodzaju usługi, planu, regionu, ustawień konta, wymogów bezpieczeństwa
+          i obowiązków prawnych.
+        </p>
+        <p>
+          5. Dane związane z autoryzacją integracji MCP i OAuth przetwarzane są
+          przez czas utrzymywania połączenia z daną aplikacją oraz przez okres
+          niezbędny do zapewnienia bezpieczeństwa, audytu i rozpatrywania
+          zgłoszeń. Użytkownik może odłączyć połączone aplikacje w ustawieniach
+          profilu.
+        </p>
 
         <h2 id="odbiorcy-danych">V. Odbiorcy danych</h2>
         <p>
@@ -127,8 +186,85 @@ export default function PrivacyPolicyPage() {
           2. Serwis korzysta z zewnętrznego uwierzytelniania (USOS/Solvro Auth),
           co wiąże się z wymianą niezbędnych tokenów autoryzacyjnych.
         </p>
+        <p>
+          3. W celu obsługi funkcji sztucznej inteligencji Serwis korzysta z
+          zewnętrznych dostawców modeli AI. W zależności od konfiguracji Serwisu
+          dostawcą może być w szczególności OpenAI, Google, Anthropic lub inny
+          dostawca modeli językowych. Do dostawcy przekazywane są wyłącznie dane
+          potrzebne do wykonania wybranej funkcji AI.
+        </p>
+        <p>
+          4. Zasady wykorzystywania danych do trenowania modeli, okresy retencji
+          oraz możliwość wglądu człowieka w dane zależą od konkretnego dostawcy,
+          planu i ustawień usługi. Informacje o zasadach dostawców znajdują się
+          m.in. w dokumentacji{" "}
+          <a
+            href="https://openai.com/enterprise-privacy/"
+            rel="noreferrer"
+            target="_blank"
+          >
+            OpenAI
+          </a>
+          ,{" "}
+          <a
+            href="https://ai.google.dev/gemini-api/terms"
+            rel="noreferrer"
+            target="_blank"
+          >
+            Google Gemini API
+          </a>{" "}
+          oraz{" "}
+          <a
+            href="https://privacy.claude.com/en/collections/10663361-commercial-customers"
+            rel="noreferrer"
+            target="_blank"
+          >
+            Anthropic
+          </a>
+          .
+        </p>
+        <p>
+          5. Serwis może udostępniać dane zewnętrznym aplikacjom połączonym
+          przez Użytkownika za pomocą OAuth lub MCP, wyłącznie w zakresie
+          uprawnień zaakceptowanych przez Użytkownika. Dotyczy to np. klientów
+          MCP takich jak Claude Code, Claude Desktop, VS Code lub innych
+          kompatybilnych narzędzi. Po przekazaniu danych do takiego klienta ich
+          dalsze przetwarzanie może podlegać zasadom prywatności i ustawieniom
+          tego klienta oraz powiązanego dostawcy AI.
+        </p>
+        <p>
+          6. Korzystanie z dostawców zewnętrznych, w tym dostawców modeli AI i
+          klientów MCP, może wiązać się z przekazywaniem danych poza Europejski
+          Obszar Gospodarczy. W takim przypadku Administrator stosuje
+          zabezpieczenia wymagane przez przepisy o ochronie danych osobowych.
+        </p>
+
+        <h2 id="funkcje-ai">
+          VI. Kontrola nad funkcjami AI i integracjami MCP
+        </h2>
+        <p>
+          1. Korzystanie z funkcji AI jest dobrowolne. Użytkownik może wyłączyć
+          funkcje AI w ustawieniach profilu lub przez potwierdzenie propozycji
+          wyłączenia wyświetlonej przez asystenta AI.
+        </p>
+        <p>
+          2. Funkcje AI nie są wykorzystywane do zautomatyzowanego podejmowania
+          decyzji wywołujących wobec Użytkownika skutki prawne lub podobnie
+          istotnie na niego wpływających w rozumieniu RODO.
+        </p>
+        <p>
+          3. Korzystanie z MCP jest dobrowolne i wymaga autoryzacji przez
+          Użytkownika. Klient MCP może uzyskać dostęp do danych wskazanych w
+          ekranie autoryzacji, np. profilu, quizów lub sesji nauki, oraz
+          wykonywać działania zgodnie z zaakceptowanymi uprawnieniami.
+        </p>
+        <p>
+          4. Połączone aplikacje MCP i OAuth można odłączyć w zakładce
+          integracji w profilu. Odłączenie aplikacji cofa jej dalszy dostęp do
+          danych Użytkownika w Serwisie.
+        </p>
 
-        <h2 id="pliki-cookies">VI. Pliki Cookies i Logi Serwera</h2>
+        <h2 id="pliki-cookies">VII. Pliki Cookies i Logi Serwera</h2>
         <p>1. Serwis wykorzystuje pliki cookies (ciasteczka) w celu:</p>
         <ul>
           <li>Utrzymania sesji użytkownika po zalogowaniu;</li>
@@ -140,7 +276,7 @@ export default function PrivacyPolicyPage() {
           cookies w swojej przeglądarce internetowej.
         </p>
 
-        <h2 id="prawa-uzytkownikow">VII. Prawa Użytkownika</h2>
+        <h2 id="prawa-uzytkownikow">VIII. Prawa Użytkownika</h2>
         <p>Użytkownikowi przysługuje prawo do:</p>
         <ul>
           <li>Dostępu do swoich danych oraz otrzymania ich kopii;</li>
@@ -156,7 +292,7 @@ export default function PrivacyPolicyPage() {
           <li>Wniesienia skargi do Prezesa Urzędu Ochrony Danych Osobowych.</li>
         </ul>
 
-        <h2 id="kontakt">VIII. Kontakt</h2>
+        <h2 id="kontakt">IX. Kontakt</h2>
         <p>
           Wszelkie pytania oraz żądania dotyczące danych osobowych można
           kierować na adres e-mail:{" "}
@@ -169,7 +305,7 @@ export default function PrivacyPolicyPage() {
           .
         </p>
 
-        <h2 id="zmiany">IX. Zmiany Polityki Prywatności</h2>
+        <h2 id="zmiany">X. Zmiany Polityki Prywatności</h2>
         <p>
           1. Administrator zastrzega sobie prawo do zmiany Polityki Prywatności.
           Wszelkie zmiany będą publikowane na stronie Serwisu.
diff --git a/src/app/profile/client.tsx b/src/app/profile/client.tsx
index 1b7e8efd..ad7d6015 100644
--- a/src/app/profile/client.tsx
+++ b/src/app/profile/client.tsx
@@ -2,74 +2,125 @@
 
 import { SquareArrowOutUpRightIcon } from "lucide-react";
 import Link from "next/link";
-import { usePathname } from "next/navigation";
-import { useEffect, useState } from "react";
-import { toast } from "sonner";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { useContext, useEffect } from "react";
 
+import { AppContext } from "@/app-context";
 import { AiSettingsForm } from "@/components/profile/ai-settings-form";
+import { AuthorizedAppsList } from "@/components/profile/authorized-apps-list";
 import { NotificationsForm } from "@/components/profile/notifications-form";
 import { ProfileDetails } from "@/components/profile/profile-details";
 import { SettingsForm } from "@/components/profile/settings-form";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { env } from "@/env";
-import { getUserService } from "@/services";
+import { useUserProfile } from "@/hooks/use-user-profile";
+import {
+  useUpdateUserSettings,
+  useUserSettings,
+} from "@/hooks/use-user-settings";
+import type { JWTPayload } from "@/lib/auth/types";
 import type { UserData, UserSettings } from "@/types/user";
 import { DEFAULT_USER_SETTINGS } from "@/types/user";
 
+const PROFILE_TABS = [
+  "account",
+  "settings",
+  "notifications",
+  "authorized-apps",
+] as const;
+const DEFAULT_PROFILE_TAB = "account";
+const PROFILE_TAB_QUERY_PARAM = "tab";
+
+type ProfileTab = (typeof PROFILE_TABS)[number];
+
+function isProfileTab(value: string): value is ProfileTab {
+  return PROFILE_TABS.includes(value as ProfileTab);
+}
+
+function getProfileTabFromQuery(tab: string | null): ProfileTab | null {
+  return tab !== null && isProfileTab(tab) ? tab : null;
+}
+
+function getUserProfilePlaceholder(
+  user: JWTPayload | null,
+): UserData | undefined {
+  if (user === null) {
+    return undefined;
+  }
+
+  return {
+    ...user,
+    photo: user.photo ?? "",
+    photo_url: user.photo ?? "",
+    overriden_photo_url: user.photo,
+    hide_profile: false,
+    id: user.user_id,
+  };
+}
+
 export function ProfilePageClient(): React.JSX.Element {
   const pathname = usePathname();
-  const [activeTab, setActiveTab] = useState<string>("account");
-  const [userData, setUserData] = useState<UserData | null>(null);
-  const [settings, setSettings] = useState<UserSettings>(DEFAULT_USER_SETTINGS);
+  const router = useRouter();
+  const searchParameters = useSearchParams();
+  const { user } = useContext(AppContext);
+  const tabParameter = searchParameters.get(PROFILE_TAB_QUERY_PARAM);
+  const activeTab = getProfileTabFromQuery(tabParameter) ?? DEFAULT_PROFILE_TAB;
+  const { data: userData, isPending: isUserDataPending } = useUserProfile({
+    placeholderData: getUserProfilePlaceholder(user),
+  });
+  const {
+    data: settings = DEFAULT_USER_SETTINGS,
+    isPending: areSettingsPending,
+    isPlaceholderData: areSettingsPlaceholderData,
+  } = useUserSettings({
+    placeholderData: DEFAULT_USER_SETTINGS,
+  });
+  const updateUserSettings = useUpdateUserSettings();
+  const areSettingsDisabled = areSettingsPending || areSettingsPlaceholderData;
 
-  const handleTabSelect = (tabKey: string) => {
-    if (tabKey === "privacy-policy") {
+  useEffect(() => {
+    if (
+      tabParameter === null ||
+      getProfileTabFromQuery(tabParameter) !== null
+    ) {
       return;
     }
-    setActiveTab(tabKey);
+
+    const nextSearchParameters = new URLSearchParams(searchParameters);
+    nextSearchParameters.delete(PROFILE_TAB_QUERY_PARAM);
+    const queryString = nextSearchParameters.toString();
+
+    router.replace(
+      queryString === "" ? pathname : `${pathname}?${queryString}`,
+    );
+  }, [pathname, router, searchParameters, tabParameter]);
+
+  const handleSettingChange = <K extends keyof UserSettings>(
+    name: K,
+    value: UserSettings[K],
+  ) => {
+    updateUserSettings.mutate({ [name]: value });
   };
 
-  useEffect(() => {
-    if (typeof window !== "undefined" && window.location.hash) {
-      handleTabSelect(window.location.hash.slice(1));
-      window.history.replaceState(null, "", pathname);
+  const handleTabSelect = (tabKey: string) => {
+    if (tabKey === "privacy-policy") {
+      return;
+    }
+    if (!isProfileTab(tabKey)) {
+      return;
     }
 
-    const userService = getUserService();
-
-    // Fetch user data
-    userService
-      .getUserData()
-      .then((data) => {
-        setUserData(data);
-      })
-      .catch((error: unknown) => {
-        console.error("Error fetching user data:", error);
-      });
-
-    // Fetch settings data
-    userService
-      .getUserSettings()
-      .then((data) => {
-        setSettings(data);
-      })
-      .catch((error: unknown) => {
-        console.error("Error fetching settings:", error);
-      });
-  }, [pathname]);
-
-  const handleSettingChange = async (
-    name: keyof UserSettings,
-    value: boolean | number | null,
-  ) => {
-    setSettings({ ...settings, [name]: value });
-    try {
-      await getUserService().updateUserSettings({ [name]: value });
-    } catch (error) {
-      console.error("Error updating settings:", error);
-      toast.error("Wystąpił błąd podczas aktualizacji ustawień.");
-      setSettings(settings); // Revert to previous settings on error
+    const nextSearchParameters = new URLSearchParams(searchParameters);
+    if (tabKey === DEFAULT_PROFILE_TAB) {
+      nextSearchParameters.delete(PROFILE_TAB_QUERY_PARAM);
+    } else {
+      nextSearchParameters.set(PROFILE_TAB_QUERY_PARAM, tabKey);
     }
+    const queryString = nextSearchParameters.toString();
+
+    router.push(queryString === "" ? pathname : `${pathname}?${queryString}`, {
+      scroll: false,
+    });
   };
 
   return (
@@ -79,7 +130,7 @@ export function ProfilePageClient(): React.JSX.Element {
         onValueChange={handleTabSelect}
         className="grid items-start gap-2 md:grid-cols-[220px_1fr] md:gap-6"
       >
-        <TabsList className="flex md:h-auto md:w-full md:flex-col">
+        <TabsList className="flex max-w-full justify-start overflow-x-auto overflow-y-hidden md:h-auto md:w-full md:flex-col">
           <TabsTrigger value="account" className="md:w-full md:justify-start">
             Konto
           </TabsTrigger>
@@ -92,6 +143,12 @@ export function ProfilePageClient(): React.JSX.Element {
           >
             Powiadomienia
           </TabsTrigger>
+          <TabsTrigger
+            value="authorized-apps"
+            className="md:w-full md:justify-start"
+          >
+            Integracje
+          </TabsTrigger>
           <TabsTrigger
             value="privacy-policy"
             className="hidden md:inline-flex md:w-full md:justify-start"
@@ -104,23 +161,24 @@ export function ProfilePageClient(): React.JSX.Element {
             )}
           ></TabsTrigger>
         </TabsList>
-        <div className="space-y-6">
+        <div className="min-w-0 space-y-6">
           <TabsContent value="account" className="space-y-6 md:mt-0">
             <ProfileDetails
-              userData={userData}
-              loading={userData == null}
-              setUserData={setUserData}
+              userData={userData ?? null}
+              loading={isUserDataPending || userData == null}
             />
           </TabsContent>
           <TabsContent value="settings" className="space-y-6 md:mt-0">
             <SettingsForm
               settings={settings}
               onSettingChange={handleSettingChange}
+              disabled={areSettingsDisabled}
             />
             {env.NEXT_PUBLIC_AI_ENABLED ? (
               <AiSettingsForm
                 settings={settings}
                 onSettingChange={handleSettingChange}
+                disabled={areSettingsDisabled}
               />
             ) : null}
           </TabsContent>
@@ -128,8 +186,12 @@ export function ProfilePageClient(): React.JSX.Element {
             <NotificationsForm
               settings={settings}
               onSettingChange={handleSettingChange}
+              disabled={areSettingsDisabled}
             />
           </TabsContent>
+          <TabsContent value="authorized-apps" className="space-y-6 md:mt-0">
+            <AuthorizedAppsList />
+          </TabsContent>
         </div>
       </Tabs>
     </div>
diff --git a/src/app/profile/page.tsx b/src/app/profile/page.tsx
index 36de6e7e..10f2e13b 100644
--- a/src/app/profile/page.tsx
+++ b/src/app/profile/page.tsx
@@ -1,4 +1,5 @@
 import type { Metadata } from "next";
+import { Suspense } from "react";
 
 import { ProfilePageClient } from "./client";
 
@@ -7,5 +8,9 @@ export const metadata: Metadata = {
 };
 
 export default function ProfilePage() {
-  return <ProfilePageClient />;
+  return (
+    <Suspense>
+      <ProfilePageClient />
+    </Suspense>
+  );
 }
diff --git a/src/app/providers.tsx b/src/app/providers.tsx
index 677b214d..c37303ed 100644
--- a/src/app/providers.tsx
+++ b/src/app/providers.tsx
@@ -34,10 +34,7 @@ export function Providers({
           >
             {children}
           </ThemeProvider>
-          <ReactQueryDevtools
-            initialIsOpen={false}
-            buttonPosition="bottom-left"
-          />
+          <ReactQueryDevtools />
         </TooltipProvider>
       </QueryClientProvider>
     </AppContextProvider>
diff --git a/src/app/quiz/[quizId]/client.tsx b/src/app/quiz/[quizId]/client.tsx
index 8679f311..f6cbdac7 100644
--- a/src/app/quiz/[quizId]/client.tsx
+++ b/src/app/quiz/[quizId]/client.tsx
@@ -2,7 +2,6 @@
 
 import { Icon } from "@iconify/react";
 import { FileQuestionMarkIcon } from "lucide-react";
-import Link from "next/link";
 import {
   ViewTransition,
   startTransition,
@@ -14,19 +13,30 @@ import { toast } from "sonner";
 
 import { AppContext } from "@/app-context";
 import { AiChat } from "@/components/ai/ai-chat";
-import { AiExplainCard } from "@/components/ai/ai-explain-card";
 import type { AnswerHint } from "@/components/ai/ai-explain-card";
+import { AiExplainCard } from "@/components/ai/ai-explain-card";
 import { BrainrotCard } from "@/components/quiz/brainrot-card";
 import { ContinuityDialog } from "@/components/quiz/continuity-dialog";
 import { ExternalImageContext } from "@/components/quiz/external-image-context";
 import { ExternalImageWarning } from "@/components/quiz/external-image-warning";
 import { useExternalImageApproval } from "@/components/quiz/hooks/use-external-image-approval";
+import { useFocusMode } from "@/components/quiz/hooks/use-focus-mode";
 import { useKeyShortcuts } from "@/components/quiz/hooks/use-key-shortcuts";
 import { useQuizLogic } from "@/components/quiz/hooks/use-quiz-logic";
 import { QuestionCard } from "@/components/quiz/question-card";
 import { QuizActionButtons } from "@/components/quiz/quiz-action-buttons";
 import { QuizHistoryDialog } from "@/components/quiz/quiz-history-dialog";
 import { QuizInfoCard } from "@/components/quiz/quiz-info-card";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
 import { Card, CardContent } from "@/components/ui/card";
 import {
   Empty,
@@ -66,6 +76,19 @@ function QuizPageContent({ quizId }: { quizId: string }): React.JSX.Element {
     timerStore,
   } = stats;
   const answers = quiz.current_session?.answers ?? [];
+  const {
+    isFocusModeActive,
+    toggleFocusMode,
+    resetInactivityTimer,
+    isFocusAlertOpen,
+    focusAlert,
+    closeFocusAlert,
+    turnOffFocusModeFromAlert,
+    showOnboarding,
+    confirmOnboarding,
+    confirmOnboardingAndHide,
+    cancelOnboarding,
+  } = useFocusMode(timerStore);
   const { isHost: isContinuityHost, peerConnections } = continuity;
   const {
     nextAction,
@@ -86,6 +109,7 @@ function QuizPageContent({ quizId }: { quizId: string }): React.JSX.Element {
   } = useExternalImageApproval(quiz);
 
   const [isChatOpen, setIsChatOpen] = useState(false);
+  const [isSettingsOpen, setIsSettingsOpen] = useState(false);
   const [showAiExplain, setShowAiExplain] = useState(false);
   const [answerHints, setAnswerHints] = useState<AnswerHint[]>([]);
 
@@ -108,12 +132,23 @@ function QuizPageContent({ quizId }: { quizId: string }): React.JSX.Element {
     });
   };
 
+  const handleQuizActivity = (action: () => void) => {
+    resetInactivityTimer();
+    action();
+  };
+
   useKeyShortcuts({
-    nextAction,
-    skipQuestion,
+    nextAction: () => {
+      handleQuizActivity(nextAction);
+    },
+    skipQuestion: () => {
+      handleQuizActivity(skipQuestion);
+    },
     questionChecked,
     isHistoryQuestion,
-    togglePreviousQuestion,
+    togglePreviousQuestion: () => {
+      handleQuizActivity(togglePreviousQuestion);
+    },
   });
 
   useEffect(() => {
@@ -127,9 +162,15 @@ function QuizPageContent({ quizId }: { quizId: string }): React.JSX.Element {
             </p>
             <p>
               Możesz zmienić to w{" "}
-              <Link href="/profile#settings" className="underline">
-                ustawieniach
-              </Link>
+              <button
+                type="button"
+                className="text-foreground underline underline-offset-2"
+                onClick={() => {
+                  setIsSettingsOpen(true);
+                }}
+              >
+                ustawieniach quizu
+              </button>
               .
             </p>
           </div>
@@ -152,6 +193,81 @@ function QuizPageContent({ quizId }: { quizId: string }): React.JSX.Element {
         />
       ) : null}
 
+      <AlertDialog
+        open={isFocusAlertOpen}
+        onOpenChange={(open: boolean) => {
+          if (!open) {
+            closeFocusAlert();
+          }
+        }}
+      >
+        <AlertDialogContent
+          className="border-destructive ring-destructive/20 border ring-5"
+          overlayClassName="after:bg-destructive/10 after:backdrop-blur-sm after:h-full after:w-full after:fixed after:inset-0 after:animate-pulse"
+        >
+          <AlertDialogHeader>
+            <AlertDialogTitle className="text-xl">
+              {focusAlert.title}
+            </AlertDialogTitle>
+            <AlertDialogDescription className="text-base">
+              {focusAlert.message}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter className="mt-4">
+            <AlertDialogAction
+              variant="secondary"
+              onClick={turnOffFocusModeFromAlert}
+            >
+              Wyłącz tryb skupienia
+            </AlertDialogAction>
+            <AlertDialogAction onClick={closeFocusAlert}>
+              Wracam do nauki
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+
+      <AlertDialog
+        open={showOnboarding}
+        onOpenChange={(open: boolean) => {
+          if (!open) {
+            cancelOnboarding();
+          }
+        }}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Czym jest tryb skupienia?</AlertDialogTitle>
+            <AlertDialogDescription className="space-y-1 text-base">
+              Tryb skupienia to funkcja, która pomaga Ci skoncentrować się na
+              quizie.
+              <span className="mt-2 block">
+                <strong>Jak to działa? </strong>
+                Po włączeniu tego trybu, jeśli opuścisz tę kartę lub nie
+                wykonasz żadnej akcji przez 5 minut, timer zostanie
+                automatycznie zatrzymany, a aplikacja odtworzy głośny dźwięk i
+                pokaże powiadomienie przypominające o powrocie do nauki.
+              </span>
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogAction
+              variant="secondary"
+              onClick={confirmOnboardingAndHide}
+              className="sm:mr-auto"
+            >
+              OK, nie pokazuj ponownie
+            </AlertDialogAction>
+            <AlertDialogCancel onClick={cancelOnboarding}>
+              Anuluj
+            </AlertDialogCancel>
+            <AlertDialogAction onClick={confirmOnboarding}>
+              OK
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+
       <div className="grid touch-manipulation grid-cols-1 gap-4 lg:grid-cols-4">
         <div
           className={cn(
@@ -183,6 +299,8 @@ function QuizPageContent({ quizId }: { quizId: string }): React.JSX.Element {
                   question={currentQuestion}
                   selectedAnswers={selectedAnswers}
                   setSelectedAnswers={(newSelected) => {
+                    resetInactivityTimer();
+                    // If question is not multiple, unselect everything except the new
                     if (currentQuestion !== null && !currentQuestion.multiple) {
                       setSelectedAnswers(
                         newSelected.length > 0 ? [newSelected[0]] : [],
@@ -191,12 +309,16 @@ function QuizPageContent({ quizId }: { quizId: string }): React.JSX.Element {
                       setSelectedAnswers(newSelected);
                     }
                   }}
+                  nextAction={() => {
+                    handleQuizActivity(nextAction);
+                  }}
                   answers={answers}
                   questionChecked={questionChecked}
-                  nextAction={nextAction}
                   isQuizFinished={isQuizFinished}
                   restartQuiz={resetProgress}
-                  togglePreviousQuestion={togglePreviousQuestion}
+                  togglePreviousQuestion={() => {
+                    handleQuizActivity(togglePreviousQuestion);
+                  }}
                   isHistoryQuestion={isHistoryQuestion}
                   canGoBack={canGoBack}
                   answerHints={answerHints}
@@ -214,17 +336,25 @@ function QuizPageContent({ quizId }: { quizId: string }): React.JSX.Element {
                 totalQuestions={totalQuestions}
                 timerStore={timerStore}
                 resetProgress={resetProgress}
+                isFocusModeActive={isFocusModeActive}
+                toggleFocusMode={toggleFocusMode}
+                onToggleHistory={toggleHistory}
+                isSettingsOpen={isSettingsOpen}
+                onSettingsOpenChange={setIsSettingsOpen}
               />
               <QuizActionButtons
                 quiz={quiz}
                 question={currentQuestion}
-                onToggleHistory={toggleHistory}
                 onToggleBrainrot={handleToggleBrainrot}
                 onExplain={() => {
                   setShowAiExplain(true);
                 }}
+                onOpenChat={() => {
+                  setIsChatOpen(true);
+                }}
                 disabled={isQuizFinished || currentQuestion == null}
                 isExplainOpen={showAiExplain}
+                isChatOpen={isChatOpen}
                 aiDisabled={!showAi}
               />
               {showAi && showAiExplain && currentQuestion != null ? (
diff --git a/src/components/ai/ai-chat-context.tsx b/src/components/ai/ai-chat-context.tsx
index 292e801c..661083ef 100644
--- a/src/components/ai/ai-chat-context.tsx
+++ b/src/components/ai/ai-chat-context.tsx
@@ -2,9 +2,12 @@
 
 import { createContext, useContext } from "react";
 
+import type { Question } from "@/types/quiz";
+
 interface AiChatContextValue {
   quizId: string;
   questionId: string | null;
+  question: Question | null;
   canEdit: boolean;
 }
 
diff --git a/src/components/ai/ai-chat.tsx b/src/components/ai/ai-chat.tsx
index a0d421e5..22f63311 100644
--- a/src/components/ai/ai-chat.tsx
+++ b/src/components/ai/ai-chat.tsx
@@ -1,6 +1,10 @@
 "use client";
 
-import { AssistantRuntimeProvider } from "@assistant-ui/react";
+import {
+  AssistantRuntimeProvider,
+  Suggestions,
+  useAui,
+} from "@assistant-ui/react";
 import {
   AssistantChatTransport,
   useChatRuntime,
@@ -85,24 +89,41 @@ function ChatRuntime({
     [canEdit, quizId],
   );
 
-  const suggestions = useMemo(
-    () => [
-      { prompt: "Wyjaśnij to pytanie" },
-      { prompt: "Podaj wskazówkę do odpowiedzi" },
-      { prompt: "Wygeneruj podobne pytanie treningowe" },
-    ],
-    [],
-  );
-
-  const runtime = useChatRuntime({ transport, suggestions });
+  const suggestions = useMemo(() => {
+    const prompts = [
+      "Wyjaśnij to pytanie",
+      "Podaj wskazówkę do odpowiedzi",
+      "Znajdź podobne pytania w tym quizie",
+      ...(canEdit
+        ? [
+            "Popraw literówki w tym pytaniu",
+            "Wygeneruj 5 podobnych pytań",
+            "Dodaj wyjaśnienie odpowiedzi",
+            "Popraw formatowanie tego pytania",
+            "Uprość te pytanie",
+          ]
+        : []),
+    ] as const;
+    const count = Math.min(prompts.length, Math.random() < 0.5 ? 2 : 3);
+    return prompts
+      .map((prompt) => ({ prompt, order: Math.random() }))
+      .toSorted((a, b) => a.order - b.order)
+      .slice(0, count)
+      .map(({ prompt }) => prompt);
+  }, [canEdit]);
+
+  const runtime = useChatRuntime({ transport });
+  const aui = useAui({
+    suggestions: Suggestions(suggestions),
+  });
 
   const chatContext = useMemo(
-    () => ({ quizId, questionId: question?.id ?? null, canEdit }),
-    [quizId, question?.id, canEdit],
+    () => ({ quizId, questionId: question?.id ?? null, question, canEdit }),
+    [quizId, question, canEdit],
   );
 
   return (
-    <AssistantRuntimeProvider runtime={runtime}>
+    <AssistantRuntimeProvider runtime={runtime} aui={aui}>
       <AiChatProvider value={chatContext}>
         <GeneratedQuestionsToolUI />
         <EditQuestionToolUI />
@@ -143,18 +164,6 @@ export function AiChat({
 
   return (
     <>
-      {open ? null : (
-        <button
-          onClick={() => {
-            onOpenChange(true);
-          }}
-          className="bg-primary text-primary-foreground hover:bg-primary/90 fixed right-4 bottom-4 z-40 flex size-12 items-center justify-center rounded-full shadow-lg transition-all hover:scale-105 active:scale-95"
-          aria-label="Otwórz czat AI"
-        >
-          <BotMessageSquareIcon className="size-5" />
-        </button>
-      )}
-
       {open && mode === "sheet" ? (
         <button
           type="button"
@@ -172,10 +181,10 @@ export function AiChat({
           !open && "pointer-events-none scale-95 opacity-0",
           open && "scale-100 opacity-100",
           mode === "popup" && [
-            "right-4 bottom-4 h-[min(520px,calc(100dvh-2rem))] w-[min(380px,calc(100vw-2rem))] rounded-2xl border shadow-2xl",
+            "right-4 bottom-4 h-[min(480px,calc(100dvh-2rem))] w-[min(380px,calc(100vw-2rem))] rounded-2xl border shadow-2xl",
           ],
           mode === "sheet" && [
-            "top-0 right-0 h-dvh w-full border-l shadow-2xl sm:w-105",
+            "right-0 bottom-0 h-dvh w-full border-l shadow-2xl sm:w-105",
           ],
         )}
       >
diff --git a/src/components/ai/tool-ui-edit-question.tsx b/src/components/ai/tool-ui-edit-question.tsx
index b69a9f20..66c6943b 100644
--- a/src/components/ai/tool-ui-edit-question.tsx
+++ b/src/components/ai/tool-ui-edit-question.tsx
@@ -2,19 +2,25 @@
 /* eslint-disable react-refresh/only-export-components */
 import { makeAssistantToolUI, useToolArgsStatus } from "@assistant-ui/react";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { diffChars, diffLines } from "diff";
+import type { Change } from "diff";
 import {
   AlertTriangleIcon,
   CheckIcon,
+  DiffIcon,
   LoaderCircleIcon,
   PencilIcon,
+  SlidersHorizontalIcon,
   XIcon,
 } from "lucide-react";
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import { toast } from "sonner";
 
 import { useAiChatContext } from "@/components/ai/ai-chat-context";
+import { ImageLoad } from "@/components/image-load";
 import { MarkdownRenderer } from "@/components/markdown-renderer";
 import { quizDetailQueryKey } from "@/components/quiz/helpers/utils";
+import { QuickEditQuestionDialog } from "@/components/quiz/quick-edit-question-dialog";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
@@ -24,47 +30,302 @@ import {
   CardHeader,
   CardTitle,
 } from "@/components/ui/card";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { prepareQuestionForSubmission } from "@/lib/schemas/quiz.schema";
 import { cn } from "@/lib/utils";
 import { getQuizService } from "@/services";
-import type { Question, QuizWithUserProgress } from "@/types/quiz";
+import type { Answer, Question, QuizWithUserProgress } from "@/types/quiz";
+
+interface ImageFields {
+  image?: string | null;
+  image_url?: string | null;
+  image_upload?: string | null;
+}
 
 interface EditedAnswer {
   text?: string;
   is_correct?: boolean;
+  image?: string | null;
+  image_url?: string | null;
+  image_upload?: string | null;
 }
 
 interface EditedQuestion {
   text?: string;
   answers?: EditedAnswer[];
   explanation?: string;
+  image?: string | null;
+  image_url?: string | null;
+  image_upload?: string | null;
+}
+
+function getDraftId(ids: Map<number, string>, index: number): string {
+  const existingId = ids.get(index);
+  if (existingId !== undefined) {
+    return existingId;
+  }
+  const id = crypto.randomUUID();
+  ids.set(index, id);
+  return id;
+}
+
+function createDraftAnswer(ids: Map<number, string>, index: number): Answer {
+  return {
+    id: getDraftId(ids, index),
+    order: index + 1,
+    text: "",
+    is_correct: false,
+    image: null,
+    image_url: null,
+    image_upload: null,
+    image_width: null,
+    image_height: null,
+  };
+}
+
+function getImageSource(item: ImageFields): string | null {
+  return item.image ?? item.image_url ?? null;
+}
+
+function hasImageValue(item: ImageFields): boolean {
+  return (
+    (item.image != null && item.image !== "") ||
+    (item.image_url != null && item.image_url !== "") ||
+    (item.image_upload != null && item.image_upload !== "")
+  );
+}
+
+function normalizeText(value: string | null | undefined): string {
+  return value?.trim() ?? "";
+}
+
+function formatAnswerForDiff(
+  answer: {
+    text?: string | null;
+    is_correct?: boolean | null;
+  },
+  index: number,
+): string {
+  return `${(index + 1).toString()}. ${answer.is_correct === true ? "poprawna" : "niepoprawna"}: ${answer.text ?? ""}`;
+}
+
+function buildEditedQuestion(
+  question: Question,
+  edit: EditedQuestion,
+  newAnswerIds: Map<number, string>,
+): Question {
+  const answers = (edit.answers ?? question.answers).map((answer, index) => ({
+    ...(question.answers[index] ?? createDraftAnswer(newAnswerIds, index)),
+    ...answer,
+    order: index + 1,
+  }));
+
+  return {
+    ...question,
+    text: edit.text ?? question.text,
+    explanation: edit.explanation ?? question.explanation,
+    image: edit.image ?? edit.image_url ?? question.image,
+    image_url: edit.image_url ?? question.image_url,
+    image_upload: edit.image_upload ?? question.image_upload,
+    multiple: answers.filter((answer) => answer.is_correct).length > 1,
+    answers,
+  };
+}
+
+interface DiffSection {
+  label: string;
+  changes: Change[];
+}
+
+function buildDiffSections(
+  beforeQuestion: Question,
+  afterQuestion: Question,
+): DiffSection[] {
+  const sections = [
+    {
+      label: "Treść pytania",
+      before: beforeQuestion.text,
+      after: afterQuestion.text,
+    },
+    {
+      label: "Odpowiedzi",
+      before: beforeQuestion.answers
+        .toSorted((a, b) => a.order - b.order)
+        .map((answer, index) => formatAnswerForDiff(answer, index))
+        .join("\n"),
+      after: afterQuestion.answers
+        .toSorted((a, b) => a.order - b.order)
+        .map((answer, index) => formatAnswerForDiff(answer, index))
+        .join("\n"),
+    },
+    {
+      label: "Wyjaśnienie",
+      before: beforeQuestion.explanation ?? "",
+      after: afterQuestion.explanation ?? "",
+    },
+  ];
+
+  return sections.flatMap((section) => {
+    if (normalizeText(section.before) === normalizeText(section.after)) {
+      return [];
+    }
+    return [
+      {
+        label: section.label,
+        changes: diffLines(section.before, section.after, {
+          ignoreNewlineAtEof: true,
+        }),
+      },
+    ];
+  });
+}
+
+function DiffChunk({ change }: { change: Change }) {
+  const prefix = change.added ? "+" : change.removed ? "-" : " ";
+  return (
+    <pre
+      className={cn(
+        "font-mono text-[11px] leading-relaxed whitespace-pre-wrap",
+        change.added && "bg-green-500/10 text-green-900 dark:text-green-200",
+        change.removed && "bg-red-500/10 text-red-900 dark:text-red-200",
+        !change.added && !change.removed && "text-muted-foreground",
+      )}
+    >
+      {change.value
+        .split("\n")
+        .filter((line, index, lines) => index < lines.length - 1 || line !== "")
+        .map((line) => `${prefix} ${line}`)
+        .join("\n")}
+    </pre>
+  );
+}
+
+function InlineDiffLine({ before, after }: { before: string; after: string }) {
+  const charChanges = diffChars(before, after);
+  const removedParts = charChanges.filter((part) => !part.added);
+  const addedParts = charChanges.filter((part) => !part.removed);
+
+  return (
+    <>
+      <pre className="bg-red-500/10 font-mono text-[11px] leading-relaxed whitespace-pre-wrap text-red-900 dark:text-red-200">
+        -{" "}
+        {removedParts.map((part, index) => (
+          <span
+            key={`removed-${index.toString()}`}
+            className={cn(part.removed && "rounded bg-red-500/25")}
+          >
+            {part.value}
+          </span>
+        ))}
+      </pre>
+      <pre className="bg-green-500/10 font-mono text-[11px] leading-relaxed whitespace-pre-wrap text-green-900 dark:text-green-200">
+        +{" "}
+        {addedParts.map((part, index) => (
+          <span
+            key={`added-${index.toString()}`}
+            className={cn(part.added && "rounded bg-green-500/25")}
+          >
+            {part.value}
+          </span>
+        ))}
+      </pre>
+    </>
+  );
+}
+
+function DiffSectionContent({ changes }: { changes: Change[] }) {
+  const nodes: React.ReactNode[] = [];
+
+  for (let index = 0; index < changes.length; index += 1) {
+    const current = changes[index];
+    const next = index + 1 < changes.length ? changes[index + 1] : undefined;
+    if (
+      current.removed &&
+      next?.added === true &&
+      current.count === 1 &&
+      next.count === 1
+    ) {
+      nodes.push(
+        <InlineDiffLine
+          key={`inline-${index.toString()}`}
+          before={current.value.trimEnd()}
+          after={next.value.trimEnd()}
+        />,
+      );
+      index += 1;
+      continue;
+    }
+
+    nodes.push(
+      <DiffChunk key={`chunk-${index.toString()}`} change={current} />,
+    );
+  }
+
+  return nodes;
+}
+
+function QuestionDiff({ sections }: { sections: DiffSection[] }) {
+  return (
+    <div className="space-y-2">
+      {sections.map((section) => (
+        <div key={section.label} className="overflow-hidden rounded-lg border">
+          <div className="bg-muted/40 px-3 py-2 text-xs font-medium">
+            {section.label}
+          </div>
+          <div className="overflow-x-auto">
+            <DiffSectionContent changes={section.changes} />
+          </div>
+        </div>
+      ))}
+      <div className="text-muted-foreground grid grid-cols-2 gap-2 text-[11px]">
+        <span className="rounded bg-red-500/10 px-2 py-1">- usunięto</span>
+        <span className="rounded bg-green-500/10 px-2 py-1">+ dodano</span>
+      </div>
+    </div>
+  );
 }
 
 function EditQuestionCard({ edit }: { edit: EditedQuestion }) {
-  const { quizId, questionId, canEdit } = useAiChatContext();
+  const { quizId, questionId, question, canEdit } = useAiChatContext();
   const queryClient = useQueryClient();
   const { status, propStatus } = useToolArgsStatus();
   const isRunning = status === "running";
   const answersComplete = propStatus.answers === "complete";
   const [applied, setApplied] = useState(false);
+  const [showDiff, setShowDiff] = useState(false);
+  const [editOpen, setEditOpen] = useState(false);
+  const [draftQuestion, setDraftQuestion] = useState<Question | null>(null);
+  const newAnswerIds = useMemo(() => new Map<number, string>(), []);
 
-  const answers = edit.answers ?? [];
+  const editableQuestion =
+    question === null
+      ? null
+      : (draftQuestion ?? buildEditedQuestion(question, edit, newAnswerIds));
+  const answers = editableQuestion?.answers ?? [];
+  const diffSections =
+    question === null || editableQuestion === null || !answersComplete
+      ? []
+      : buildDiffSections(question, editableQuestion);
+  const hasDiff = diffSections.length > 0;
+  const explanation = editableQuestion?.explanation?.trim() ?? "";
+  const hasExplanation = explanation !== "";
 
   const { isPending, mutateAsync: applyEdit } = useMutation({
     mutationFn: async () => {
       if (questionId === null) {
         throw new Error("No current question");
       }
-      const multiple = answers.filter((a) => a.is_correct === true).length > 1;
-      return await getQuizService().updateQuestion(questionId, {
-        text: edit.text,
-        explanation: edit.explanation,
-        multiple,
-        answers: answers.map((a, index) => ({
-          order: index + 1,
-          text: a.text,
-          is_correct: a.is_correct,
-        })) as Question["answers"],
-      });
+      if (editableQuestion === null) {
+        throw new Error("No editable question");
+      }
+      return await getQuizService().updateQuestion(
+        questionId,
+        prepareQuestionForSubmission(editableQuestion),
+      );
     },
     onSuccess: (updatedQuestion) => {
       setApplied(true);
@@ -100,48 +361,115 @@ function EditQuestionCard({ edit }: { edit: EditedQuestion }) {
             <PencilIcon className="size-3.5 text-amber-600" />
           </div>
           <CardTitle className="text-sm">Proponowana edycja</CardTitle>
-          {isRunning ? (
-            <Badge variant="secondary" className="ml-auto text-xs">
-              <LoaderCircleIcon className="size-3 animate-spin" />
-              Generowanie...
-            </Badge>
-          ) : null}
+          <div className="ml-auto flex items-center gap-1">
+            {answersComplete && hasDiff ? (
+              <Tooltip>
+                <TooltipTrigger
+                  render={
+                    <Button
+                      type="button"
+                      variant={showDiff ? "secondary" : "ghost"}
+                      size="icon-sm"
+                      onClick={() => {
+                        setShowDiff((current) => !current);
+                      }}
+                      aria-label={showDiff ? "Ukryj różnicę" : "Pokaż różnicę"}
+                    >
+                      <DiffIcon />
+                    </Button>
+                  }
+                ></TooltipTrigger>
+                <TooltipContent>
+                  {showDiff ? "Ukryj różnicę" : "Pokaż różnicę"}
+                </TooltipContent>
+              </Tooltip>
+            ) : null}
+            {isRunning ? (
+              <Badge variant="secondary" className="text-xs">
+                <LoaderCircleIcon className="size-3 animate-spin" />
+                Generowanie...
+              </Badge>
+            ) : null}
+          </div>
         </div>
-        {edit.text != null && edit.text !== "" ? (
+        {!showDiff &&
+        editableQuestion?.text != null &&
+        editableQuestion.text !== "" ? (
           <CardDescription className="text-foreground mt-2 overflow-y-hidden text-sm font-medium">
-            <MarkdownRenderer>{edit.text}</MarkdownRenderer>
+            <MarkdownRenderer>{editableQuestion.text}</MarkdownRenderer>
           </CardDescription>
         ) : null}
+        {editableQuestion !== null && hasImageValue(editableQuestion) ? (
+          <ImageLoad
+            url={getImageSource(editableQuestion)}
+            alt={
+              editableQuestion.text === ""
+                ? "Obrazek pytania"
+                : editableQuestion.text
+            }
+            className="mx-auto mt-3 max-h-48 rounded border object-contain"
+          />
+        ) : null}
       </CardHeader>
       <CardContent className="space-y-2">
-        {hasAnswers
-          ? answers.map((answer, index) => {
-              if (answer.text == null || answer.text === "") {
-                return null;
-              }
-              const isCorrect = answer.is_correct ?? false;
-              return (
-                <div
-                  key={`edit-answer-${index.toString()}`}
-                  className={cn(
-                    "animate-in fade-in slide-in-from-bottom-1 flex items-center gap-2 rounded-lg border px-3 py-2 text-sm duration-200",
-                    isCorrect
-                      ? "border-green-500/30 bg-green-500/5"
-                      : "border-border",
-                  )}
-                >
-                  {isCorrect ? (
-                    <CheckIcon className="size-3.5 shrink-0 text-green-600" />
-                  ) : (
-                    <XIcon className="text-muted-foreground size-3.5 shrink-0" />
-                  )}
-                  <MarkdownRenderer className="pointer-events-none">
-                    {answer.text}
-                  </MarkdownRenderer>
-                </div>
-              );
-            })
-          : null}
+        {showDiff ? (
+          <QuestionDiff sections={diffSections} />
+        ) : (
+          <>
+            {hasAnswers
+              ? answers.map((answer, index) => {
+                  if (answer.text === "" && !hasImageValue(answer)) {
+                    return null;
+                  }
+                  const isCorrect = answer.is_correct;
+                  return (
+                    <div
+                      key={`edit-answer-${index.toString()}`}
+                      className={cn(
+                        "animate-in fade-in slide-in-from-bottom-1 flex items-center gap-2 rounded-lg border px-3 py-2 text-sm duration-200",
+                        isCorrect
+                          ? "border-green-500/30 bg-green-500/5"
+                          : "border-border",
+                      )}
+                    >
+                      {isCorrect ? (
+                        <CheckIcon className="size-3.5 shrink-0 text-green-600" />
+                      ) : (
+                        <XIcon className="text-muted-foreground size-3.5 shrink-0" />
+                      )}
+                      <div className="min-w-0 flex-1">
+                        {answer.text === "" ? null : (
+                          <MarkdownRenderer className="pointer-events-none">
+                            {answer.text}
+                          </MarkdownRenderer>
+                        )}
+                        {hasImageValue(answer) ? (
+                          <ImageLoad
+                            url={getImageSource(answer)}
+                            alt={
+                              answer.text === ""
+                                ? "Obrazek odpowiedzi"
+                                : answer.text
+                            }
+                            className="mx-auto mt-2 max-h-32 rounded object-contain"
+                          />
+                        ) : null}
+                      </div>
+                    </div>
+                  );
+                })
+              : null}
+
+            {answersComplete && hasExplanation ? (
+              <div className="bg-muted/40 mt-2 rounded-lg border p-3 text-xs">
+                <p className="text-muted-foreground mb-1 font-medium">
+                  Wyjaśnienie:
+                </p>
+                <MarkdownRenderer>{explanation}</MarkdownRenderer>
+              </div>
+            ) : null}
+          </>
+        )}
 
         {answersComplete ? null : (
           <div className="border-border flex w-full items-center gap-2 rounded-lg border px-3 py-2">
@@ -150,42 +478,70 @@ function EditQuestionCard({ edit }: { edit: EditedQuestion }) {
           </div>
         )}
 
-        {answersComplete && edit.explanation !== undefined ? (
-          <div className="bg-muted/40 mt-2 rounded-lg border p-3 text-xs">
-            <p className="text-muted-foreground mb-1 font-medium">
-              Wyjaśnienie:
-            </p>
-            <MarkdownRenderer>{edit.explanation}</MarkdownRenderer>
+        {answersComplete && questionId !== null && canEdit ? (
+          <div className="mt-2 flex gap-2">
+            <Button
+              variant="outline"
+              size="sm"
+              className="min-w-0 flex-1 border-amber-500/30 hover:bg-amber-500/10"
+              onClick={() => {
+                void applyEdit();
+              }}
+              disabled={isPending || applied}
+            >
+              {isPending ? (
+                <>
+                  <LoaderCircleIcon className="animate-spin" />
+                  Zapisywanie...
+                </>
+              ) : applied ? (
+                <>
+                  <CheckIcon />
+                  Zastosowano zmiany
+                </>
+              ) : (
+                <>
+                  <CheckIcon />
+                  Zastosuj zmiany
+                </>
+              )}
+            </Button>
+            {applied || editableQuestion === null ? null : (
+              <Tooltip>
+                <TooltipTrigger
+                  render={
+                    <Button
+                      variant="outline"
+                      size="icon-sm"
+                      onClick={() => {
+                        setEditOpen(true);
+                      }}
+                      aria-label="Edytuj przed zastosowaniem"
+                    >
+                      <SlidersHorizontalIcon />
+                    </Button>
+                  }
+                ></TooltipTrigger>
+                <TooltipContent>Edytuj przed zastosowaniem</TooltipContent>
+              </Tooltip>
+            )}
           </div>
         ) : null}
 
-        {answersComplete && questionId !== null && canEdit ? (
-          <Button
-            variant="outline"
-            size="sm"
-            className="mt-2 w-full border-amber-500/30 hover:bg-amber-500/10"
-            onClick={() => {
-              void applyEdit();
+        {editOpen && editableQuestion !== null ? (
+          <QuickEditQuestionDialog
+            open
+            onOpenChange={setEditOpen}
+            question={editableQuestion}
+            quizId={quizId}
+            onSaveDraft={(updatedQuestion) => {
+              setDraftQuestion(updatedQuestion);
+              setShowDiff(false);
             }}
-            disabled={isPending || applied}
-          >
-            {isPending ? (
-              <>
-                <LoaderCircleIcon className="size-3.5 animate-spin" />
-                Zapisywanie...
-              </>
-            ) : applied ? (
-              <>
-                <CheckIcon className="size-3.5" />
-                Zastosowano zmiany
-              </>
-            ) : (
-              <>
-                <PencilIcon className="size-3.5" />
-                Zastosuj zmiany
-              </>
-            )}
-          </Button>
+            hideDelete
+            hideFullEditor
+            minAnswers={2}
+          />
         ) : null}
 
         {answersComplete && questionId === null && canEdit ? (
diff --git a/src/components/ai/tool-ui-question.tsx b/src/components/ai/tool-ui-question.tsx
index 907f14ba..456db0d0 100644
--- a/src/components/ai/tool-ui-question.tsx
+++ b/src/components/ai/tool-ui-question.tsx
@@ -8,17 +8,20 @@ import {
   ChevronLeftIcon,
   ChevronRightIcon,
   LoaderCircleIcon,
+  PencilIcon,
   PlusIcon,
   SparklesIcon,
 } from "lucide-react";
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import { toast } from "sonner";
 import * as z from "zod";
 
 import { useAiChatContext } from "@/components/ai/ai-chat-context";
+import { ImageLoad } from "@/components/image-load";
 import { MarkdownRenderer } from "@/components/markdown-renderer";
 import { computeAnswerVariant } from "@/components/quiz/helpers/question-card";
 import { quizDetailQueryKey } from "@/components/quiz/helpers/utils";
+import { QuickEditQuestionDialog } from "@/components/quiz/quick-edit-question-dialog";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
@@ -28,33 +31,36 @@ import {
   CardHeader,
   CardTitle,
 } from "@/components/ui/card";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 import { getQuizService } from "@/services";
 import type { Question, QuizWithUserProgress } from "@/types/quiz";
 
-const questionPayloadSchema = z.object({
-  text: z.string().min(1),
-  explanation: z.string().optional(),
-  multiple: z.boolean(),
-  answers: z
-    .array(
-      z.object({
-        text: z.string().min(1),
-        is_correct: z.boolean(),
-      }),
-    )
-    .min(2),
-});
+interface ImageFields {
+  image?: string | null;
+  image_url?: string | null;
+  image_upload?: string | null;
+}
 
 interface GeneratedAnswer {
   text?: string;
   is_correct?: boolean;
+  image?: string | null;
+  image_url?: string | null;
+  image_upload?: string | null;
 }
 
 interface GeneratedQuestion {
   text?: string;
   answers?: GeneratedAnswer[];
   explanation?: string;
+  image?: string | null;
+  image_url?: string | null;
+  image_upload?: string | null;
 }
 
 interface GeneratedQuestionsArguments {
@@ -69,29 +75,131 @@ function AnswerSkeleton() {
   );
 }
 
-function isQuestionComplete(question: GeneratedQuestion | undefined): boolean {
-  if (question === undefined) {
-    return false;
-  }
+function getImageSource(item: ImageFields): string | null {
+  return item.image ?? item.image_url ?? null;
+}
+
+function hasImageValue(item: ImageFields): boolean {
   return (
-    question.text !== undefined &&
-    question.text !== "" &&
-    question.answers !== undefined &&
-    question.answers.length >= 2 &&
-    question.answers.every(
-      (a) =>
-        a.text !== undefined && a.text !== "" && a.is_correct !== undefined,
-    )
+    (item.image != null && item.image !== "") ||
+    (item.image_url != null && item.image_url !== "") ||
+    (item.image_upload != null && item.image_upload !== "")
   );
 }
 
+function getDraftId(ids: Map<number, string>, index: number): string {
+  const existingId = ids.get(index);
+  if (existingId !== undefined) {
+    return existingId;
+  }
+  const id = crypto.randomUUID();
+  ids.set(index, id);
+  return id;
+}
+
+function createDraftAnswer(
+  answerIds: Map<number, string>,
+  index: number,
+): Question["answers"][number] {
+  return {
+    id: getDraftId(answerIds, index),
+    order: index + 1,
+    text: "",
+    is_correct: false,
+    image: null,
+    image_url: null,
+    image_upload: null,
+    image_width: null,
+    image_height: null,
+  };
+}
+
+const questionPayloadSchema = z
+  .object({
+    text: z.string(),
+    explanation: z.string().optional(),
+    image: z.string().nullable().optional(),
+    image_url: z.string().nullable().optional(),
+    image_upload: z.string().nullable().optional(),
+    answers: z
+      .array(
+        z.object({
+          order: z.number(),
+          text: z.string(),
+          is_correct: z.boolean(),
+          image: z.string().nullable().optional(),
+          image_url: z.string().nullable().optional(),
+          image_upload: z.string().nullable().optional(),
+        }),
+      )
+      .min(2),
+  })
+  .refine((question) => question.text.trim() !== "" || hasImageValue(question))
+  .refine((question) =>
+    question.answers.every(
+      (answer) => answer.text.trim() !== "" || hasImageValue(answer),
+    ),
+  )
+  .transform((question) => {
+    const answers = question.answers.toSorted((a, b) => a.order - b.order);
+    return {
+      text: question.text,
+      explanation: question.explanation ?? "",
+      multiple: answers.filter((answer) => answer.is_correct).length > 1,
+      is_ai_generated: true,
+      image_url: question.image_url,
+      image_upload: question.image_upload,
+      answers: answers.map((answer) => ({
+        text: answer.text,
+        is_correct: answer.is_correct,
+        image_url: answer.image_url,
+        image_upload: answer.image_upload,
+      })),
+    };
+  });
+
+function toQuestionDraft(
+  question: GeneratedQuestion,
+  questionId = crypto.randomUUID(),
+  answerIds = new Map<number, string>(),
+): Question {
+  const answers = (question.answers ?? []).map((answer, index) => ({
+    ...createDraftAnswer(answerIds, index),
+    ...answer,
+    order: index + 1,
+    text: answer.text ?? "",
+    is_correct: answer.is_correct ?? false,
+  }));
+
+  return {
+    id: questionId,
+    order: 1,
+    text: question.text ?? "",
+    explanation: question.explanation ?? "",
+    multiple: answers.filter((answer) => answer.is_correct).length > 1,
+    is_ai_generated: true,
+    image: question.image ?? question.image_url ?? null,
+    image_url: question.image_url ?? null,
+    image_upload: question.image_upload ?? null,
+    image_width: null,
+    image_height: null,
+    answers,
+  };
+}
+
+function isQuestionComplete(question: Question): boolean {
+  return questionPayloadSchema.safeParse(question).success;
+}
+
+function toCreatePayload(question: Question) {
+  return questionPayloadSchema.parse(question);
+}
+
 function QuestionCard({
   question,
-  isComplete,
   isBulkSaved,
 }: {
   question: GeneratedQuestion;
-  isComplete: boolean;
   isBulkSaved: boolean;
 }) {
   const { quizId, canEdit } = useAiChatContext();
@@ -99,34 +207,31 @@ function QuestionCard({
   const [showExplanation, setShowExplanation] = useState(false);
   const [selectedAnswers, setSelectedAnswers] = useState<number[]>([]);
   const [checked, setChecked] = useState(false);
-  const [saved, setSaved] = useState(isBulkSaved);
+  const [individuallySaved, setIndividuallySaved] = useState(false);
+  const [editOpen, setEditOpen] = useState(false);
+  const [editedQuestion, setEditedQuestion] = useState<Question | null>(null);
+  const draftQuestionId = useMemo(() => crypto.randomUUID(), []);
+  const draftAnswerIds = useMemo(() => new Map<number, string>(), []);
 
-  const answers = question.answers ?? [];
+  const visibleQuestion =
+    editedQuestion ??
+    toQuestionDraft(question, draftQuestionId, draftAnswerIds);
+  const saved = isBulkSaved || individuallySaved;
+  const answers = visibleQuestion.answers.toSorted((a, b) => a.order - b.order);
+  const isComplete = isQuestionComplete(visibleQuestion);
   const isMultiple =
-    isComplete && answers.filter((a) => a.is_correct === true).length > 1;
-
-  if (isBulkSaved && !saved) {
-    setSaved(true);
-  }
+    isComplete && answers.filter((answer) => answer.is_correct).length > 1;
+  const hasExplanation = Boolean(visibleQuestion.explanation?.trim());
 
   const { isPending: isSaving, mutateAsync: saveToQuiz } = useMutation({
     mutationFn: async () => {
-      const payload = questionPayloadSchema.parse({
-        text: question.text,
-        explanation: question.explanation,
-        multiple: isMultiple,
-        answers: answers.map((a) => ({
-          text: a.text,
-          is_correct: a.is_correct,
-        })),
-      });
-      return await getQuizService().createQuestion(quizId, {
-        ...payload,
-        is_ai_generated: true,
-      });
+      return await getQuizService().createQuestion(
+        quizId,
+        toCreatePayload(visibleQuestion),
+      );
     },
     onSuccess: (newQuestion: Question) => {
-      setSaved(true);
+      setIndividuallySaved(true);
       toast.success("Pytanie dodane do quizu");
       queryClient.setQueryData<QuizWithUserProgress>(
         quizDetailQueryKey(quizId),
@@ -203,16 +308,27 @@ function QuestionCard({
             </Badge>
           )}
         </div>
-        {question.text !== undefined && question.text !== "" ? (
+        {visibleQuestion.text === "" ? null : (
           <CardDescription className="text-foreground mt-1.5 overflow-y-auto text-sm leading-snug font-medium">
-            <MarkdownRenderer>{question.text}</MarkdownRenderer>
+            <MarkdownRenderer>{visibleQuestion.text}</MarkdownRenderer>
           </CardDescription>
+        )}
+        {hasImageValue(visibleQuestion) ? (
+          <ImageLoad
+            url={getImageSource(visibleQuestion)}
+            alt={
+              visibleQuestion.text === ""
+                ? "Obrazek pytania"
+                : visibleQuestion.text
+            }
+            className="mx-auto mt-3 max-h-48 rounded border object-contain"
+          />
         ) : null}
       </CardHeader>
       <CardContent className="space-y-1.5 pt-0">
         {hasAnswers
           ? answers.map((answer, index) => {
-              if (answer.text === undefined || answer.text === "") {
+              if (answer.text === "" && !hasImageValue(answer)) {
                 return null;
               }
               const isSelected = selectedAnswers.includes(index);
@@ -229,13 +345,24 @@ function QuestionCard({
                     computeAnswerVariant(
                       isSelected,
                       checked,
-                      answer.is_correct ?? false,
+                      answer.is_correct,
                     ),
                   )}
                 >
-                  <MarkdownRenderer className="pointer-events-none w-full text-sm">
-                    {answer.text}
-                  </MarkdownRenderer>
+                  {answer.text === "" ? null : (
+                    <MarkdownRenderer className="pointer-events-none w-full text-sm">
+                      {answer.text}
+                    </MarkdownRenderer>
+                  )}
+                  {hasImageValue(answer) ? (
+                    <ImageLoad
+                      url={getImageSource(answer)}
+                      alt={
+                        answer.text === "" ? "Obrazek odpowiedzi" : answer.text
+                      }
+                      className="mx-auto mt-2 max-h-32 rounded object-contain"
+                    />
+                  ) : null}
                 </button>
               );
             })
@@ -246,11 +373,10 @@ function QuestionCard({
         {checked ? (
           <div className="pt-1 text-sm">
             {selectedAnswers.every(
-              (index) => answers[index]?.is_correct === true,
+              (index) => answers[index]?.is_correct ?? false,
             ) &&
             answers.every(
-              (a, index) =>
-                a.is_correct !== true || selectedAnswers.includes(index),
+              (a, index) => !a.is_correct || selectedAnswers.includes(index),
             ) ? (
               <p className="font-medium text-green-600 dark:text-green-400">
                 Poprawna odpowiedź!
@@ -274,11 +400,13 @@ function QuestionCard({
           </Button>
         ) : null}
 
-        {checked && isComplete && question.explanation !== undefined ? (
+        {checked && isComplete && hasExplanation ? (
           <div className="pt-1">
             {showExplanation ? (
               <div className="bg-muted/40 rounded-lg border p-3 text-xs">
-                <MarkdownRenderer>{question.explanation}</MarkdownRenderer>
+                <MarkdownRenderer>
+                  {visibleQuestion.explanation}
+                </MarkdownRenderer>
               </div>
             ) : (
               <Button
@@ -296,32 +424,71 @@ function QuestionCard({
         ) : null}
 
         {isComplete && hasAnswers && canEdit ? (
-          <Button
-            variant="outline"
-            size="sm"
-            className="mt-2 w-full"
-            onClick={() => {
-              void saveToQuiz();
-            }}
-            disabled={isSaving || saved}
-          >
-            {isSaving ? (
-              <>
-                <LoaderCircleIcon className="size-3.5 animate-spin" />
-                Dodawanie...
-              </>
-            ) : saved ? (
-              <>
-                <CheckIcon className="size-3.5" />
-                Dodano do quizu
-              </>
-            ) : (
-              <>
-                <PlusIcon className="size-3.5" />
-                Dodaj do quizu
-              </>
+          <div className="mt-2 flex gap-2">
+            <Button
+              variant="outline"
+              size="sm"
+              className="min-w-0 flex-1"
+              onClick={() => {
+                void saveToQuiz();
+              }}
+              disabled={isSaving || saved}
+            >
+              {isSaving ? (
+                <>
+                  <LoaderCircleIcon className="animate-spin" />
+                  Dodawanie...
+                </>
+              ) : saved ? (
+                <>
+                  <CheckIcon />
+                  Dodano do quizu
+                </>
+              ) : (
+                <>
+                  <PlusIcon />
+                  Dodaj do quizu
+                </>
+              )}
+            </Button>
+            {saved ? null : (
+              <Tooltip>
+                <TooltipTrigger
+                  render={
+                    <Button
+                      variant="outline"
+                      size="icon-sm"
+                      onClick={() => {
+                        setEditOpen(true);
+                      }}
+                      aria-label="Edytuj przed dodaniem"
+                    >
+                      <PencilIcon />
+                    </Button>
+                  }
+                ></TooltipTrigger>
+                <TooltipContent>Edytuj przed dodaniem</TooltipContent>
+              </Tooltip>
             )}
-          </Button>
+          </div>
+        ) : null}
+
+        {editOpen ? (
+          <QuickEditQuestionDialog
+            open
+            onOpenChange={setEditOpen}
+            question={visibleQuestion}
+            quizId={quizId}
+            onSaveDraft={(updatedQuestion) => {
+              setEditedQuestion(updatedQuestion);
+              setSelectedAnswers([]);
+              setChecked(false);
+              setShowExplanation(false);
+            }}
+            hideDelete
+            hideFullEditor
+            minAnswers={2}
+          />
         ) : null}
       </CardContent>
     </Card>
@@ -367,29 +534,20 @@ function QuestionsCarousel({ questions }: { questions: GeneratedQuestion[] }) {
 
   const isToolComplete = status === "complete";
   const visibleQuestions = questions.filter(
-    (q) => q.text !== undefined && q.text !== "",
+    (question) =>
+      (question.text !== undefined && question.text !== "") ||
+      hasImageValue(question),
   );
   const count = visibleQuestions.length;
   const showNav = count > 1;
 
-  const savablePayloads = (() => {
-    if (!isToolComplete || isBulkSaved) {
-      return [];
-    }
-    return visibleQuestions.flatMap((q) => {
-      const result = questionPayloadSchema.safeParse({
-        text: q.text,
-        explanation: q.explanation,
-        multiple:
-          (q.answers ?? []).filter((a) => a.is_correct === true).length > 1,
-        answers: (q.answers ?? []).map((a) => ({
-          text: a.text,
-          is_correct: a.is_correct,
-        })),
-      });
-      return result.success ? [result.data] : [];
-    });
-  })();
+  const savablePayloads =
+    isToolComplete && !isBulkSaved
+      ? visibleQuestions
+          .map((question) => toQuestionDraft(question))
+          .filter((question) => isQuestionComplete(question))
+          .map((question) => toCreatePayload(question))
+      : [];
 
   const handleSaveAll = async () => {
     if (savablePayloads.length === 0) {
@@ -434,11 +592,7 @@ function QuestionsCarousel({ questions }: { questions: GeneratedQuestion[] }) {
           key={`question-${index.toString()}`}
           className={showNav && index !== activeIndex ? "hidden" : undefined}
         >
-          <QuestionCard
-            question={question}
-            isComplete={isQuestionComplete(question)}
-            isBulkSaved={isBulkSaved}
-          />
+          <QuestionCard question={question} isBulkSaved={isBulkSaved} />
         </div>
       ))}
 
diff --git a/src/components/navbar/auth-buttons.tsx b/src/components/navbar/auth-buttons.tsx
index edc520e8..4217dfbe 100644
--- a/src/components/navbar/auth-buttons.tsx
+++ b/src/components/navbar/auth-buttons.tsx
@@ -11,7 +11,7 @@ import { useContext } from "react";
 
 import { AppContext } from "@/app-context";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import { Button } from "@/components/ui/button";
+import { Button, ButtonLink } from "@/components/ui/button";
 import {
   Tooltip,
   TooltipContent,
@@ -24,7 +24,11 @@ import {
 import { cn } from "@/lib/utils";
 import { ACCOUNT_TYPE } from "@/types/user";
 
-export function AuthButtons() {
+interface AuthButtonsProps {
+  onNavigate?: () => void;
+}
+
+export function AuthButtons({ onNavigate }: AuthButtonsProps) {
   const { isAuthenticated, user } = useContext(AppContext);
   const isGuest = user?.account_type === ACCOUNT_TYPE.GUEST;
   const profilePicture = user?.photo;
@@ -47,7 +51,7 @@ export function AuthButtons() {
                 size="icon"
                 className="relative"
                 render={(props) => (
-                  <Link {...props} href="/profile">
+                  <Link {...props} href="/profile" onClick={onNavigate}>
                     <IdCardLanyardIcon />
                     <div className="absolute -top-1 -right-1 size-3 rounded-full bg-amber-500" />
                   </Link>
@@ -60,14 +64,10 @@ export function AuthButtons() {
           </TooltipContent>
         </Tooltip>
 
-        <Button
-          render={(props) => (
-            <Link {...props} href={loginHref}>
-              <LogInIcon />
-              Zaloguj się
-            </Link>
-          )}
-        ></Button>
+        <ButtonLink href={loginHref} onClick={onNavigate}>
+          <LogInIcon />
+          Zaloguj się
+        </ButtonLink>
       </>
     );
   }
@@ -79,7 +79,7 @@ export function AuthButtons() {
         className={cn(getAccountLevelCtaClassName(user?.account_level))}
         nativeButton={false}
         render={(props) => (
-          <Link {...props} href="/profile">
+          <Link {...props} href="/profile" onClick={onNavigate}>
             {profilePicture === null ? (
               <span
                 className={cn(
@@ -119,7 +119,7 @@ export function AuthButtons() {
     <Button
       nativeButton={false}
       render={(props) => (
-        <Link {...props} href={loginHref}>
+        <Link {...props} href={loginHref} onClick={onNavigate}>
           <LogInIcon />
           Zaloguj się
         </Link>
diff --git a/src/components/navbar/logout-button.tsx b/src/components/navbar/logout-button.tsx
index e6660745..9ef7ef0f 100644
--- a/src/components/navbar/logout-button.tsx
+++ b/src/components/navbar/logout-button.tsx
@@ -6,11 +6,17 @@ import { useRouter } from "next/navigation";
 
 import { Button } from "@/components/ui/button";
 
-export function LogoutButton() {
+interface LogoutButtonProps {
+  onLogout?: () => void;
+}
+
+export function LogoutButton({ onLogout }: LogoutButtonProps) {
   const router = useRouter();
   const queryClient = useQueryClient();
 
   const handleLogout = async () => {
+    onLogout?.();
+
     // Call server route to clear cookies
     await fetch("/auth/logout", { method: "POST" });
 
diff --git a/src/components/navbar/mobile-menu.tsx b/src/components/navbar/mobile-menu.tsx
index cf6f087b..dc5c6d14 100644
--- a/src/components/navbar/mobile-menu.tsx
+++ b/src/components/navbar/mobile-menu.tsx
@@ -1,16 +1,28 @@
 "use client";
 
+import { useContext } from "react";
+
+import { AppContext } from "@/app-context";
+
 import { AuthButtons } from "./auth-buttons";
+import { LogoutButton } from "./logout-button";
 import { NavLinks } from "./nav-links";
 import { NavbarActions } from "./navbar-actions";
 
-export function MobileMenu() {
+interface MobileMenuProps {
+  onNavigate?: () => void;
+}
+
+export function MobileMenu({ onNavigate }: MobileMenuProps) {
+  const { isAuthenticated } = useContext(AppContext);
+
   return (
     <nav className="flex flex-col gap-2 border-t pt-2 md:hidden">
-      <NavLinks variant="mobile" />
+      <NavLinks variant="mobile" onNavigate={onNavigate} />
       <div className="flex flex-wrap gap-2 pt-2">
-        <AuthButtons />
+        <AuthButtons onNavigate={onNavigate} />
         <NavbarActions />
+        {isAuthenticated ? <LogoutButton onLogout={onNavigate} /> : null}
       </div>
     </nav>
   );
diff --git a/src/components/navbar/nav-links.tsx b/src/components/navbar/nav-links.tsx
index 2acdcb38..b1a1f4f0 100644
--- a/src/components/navbar/nav-links.tsx
+++ b/src/components/navbar/nav-links.tsx
@@ -21,9 +21,10 @@ import { getUserService } from "@/services";
 
 interface NavLinksProps {
   variant?: "desktop" | "mobile";
+  onNavigate?: () => void;
 }
 
-export function NavLinks({ variant = "desktop" }: NavLinksProps) {
+export function NavLinks({ variant = "desktop", onNavigate }: NavLinksProps) {
   const { user, checkPermission } = useContext(AppContext);
   const isStaff = user?.is_staff ?? false;
 
@@ -49,6 +50,7 @@ export function NavLinks({ variant = "desktop" }: NavLinksProps) {
       <>
         <Link
           href="/quizzes"
+          onClick={onNavigate}
           className={
             isActive("/quizzes")
               ? "text-foreground text-left font-medium"
@@ -59,6 +61,7 @@ export function NavLinks({ variant = "desktop" }: NavLinksProps) {
         </Link>
         <Link
           href="/grades"
+          onClick={onNavigate}
           onMouseEnter={prefetchGrades}
           className={
             isActive("/grades")
@@ -81,6 +84,7 @@ export function NavLinks({ variant = "desktop" }: NavLinksProps) {
           <Link
             href={`${API_URL}/admin/`}
             target="_blank"
+            onClick={onNavigate}
             className="text-muted-foreground hover:text-foreground transition-colors"
             rel="noreferrer"
           >
diff --git a/src/components/navbar/navbar-client.tsx b/src/components/navbar/navbar-client.tsx
index 5ca80faa..71a889e2 100644
--- a/src/components/navbar/navbar-client.tsx
+++ b/src/components/navbar/navbar-client.tsx
@@ -16,6 +16,9 @@ import { NavbarActions } from "./navbar-actions";
 export function NavbarClient() {
   const [expanded, setExpanded] = useState(false);
   const { isAuthenticated } = useContext(AppContext);
+  const closeMobileMenu = () => {
+    setExpanded(false);
+  };
 
   return (
     <header className="flex flex-col gap-2 py-4">
@@ -38,7 +41,7 @@ export function NavbarClient() {
           }}
         />
       </div>
-      {expanded ? <MobileMenu /> : null}
+      {expanded ? <MobileMenu onNavigate={closeMobileMenu} /> : null}
     </header>
   );
 }
diff --git a/src/components/profile/ai-settings-form.tsx b/src/components/profile/ai-settings-form.tsx
index ba49d033..0f58ba97 100644
--- a/src/components/profile/ai-settings-form.tsx
+++ b/src/components/profile/ai-settings-form.tsx
@@ -1,53 +1,280 @@
-import { useContext } from "react";
+import { BotIcon, CheckIcon, CopyIcon } from "lucide-react";
+import { useContext, useState } from "react";
+import { toast } from "sonner";
 
 import { AppContext } from "@/app-context";
+import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 import { Switch } from "@/components/ui/switch";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { env } from "@/env";
 import { PermissionAction } from "@/lib/auth/permissions";
 import { cn } from "@/lib/utils";
 import type { SettingsFormProps } from "@/types/user";
 
+interface CopyableSnippetProps {
+  copiedKey: string | null;
+  label: string;
+  onCopy: (value: string, key: string) => void;
+  value: string;
+}
+
+function CopyableSnippet({
+  copiedKey,
+  label,
+  onCopy,
+  value,
+}: CopyableSnippetProps) {
+  const isCopied = copiedKey === label;
+
+  return (
+    <div className="bg-muted/30 min-w-0 rounded-md border p-3">
+      <div className="mb-2 flex items-center justify-between gap-3">
+        <p className="min-w-0 text-sm font-medium">{label}</p>
+        <Button
+          type="button"
+          size="icon-sm"
+          variant="outline"
+          onClick={() => {
+            onCopy(value, label);
+          }}
+          aria-label={`Skopiuj: ${label}`}
+          className="shrink-0"
+        >
+          {isCopied ? <CheckIcon /> : <CopyIcon />}
+        </Button>
+      </div>
+      <pre className="text-foreground max-w-full overflow-x-auto rounded-sm font-mono text-xs leading-relaxed">
+        <code>{value}</code>
+      </pre>
+    </div>
+  );
+}
+
+interface SetupStepProps {
+  children: React.ReactNode;
+  title: string;
+}
+
+function SetupStep({ children, title }: SetupStepProps) {
+  return (
+    <div className="space-y-1">
+      <p className="text-sm font-medium">{title}</p>
+      <p className="text-muted-foreground text-sm">{children}</p>
+    </div>
+  );
+}
+
+interface ClientSetupTabProps {
+  children: React.ReactNode;
+  label: string;
+}
+
+const MCP_CLIENTS = [
+  { label: "Ogólne", value: "general" },
+  { label: "Claude Code", value: "claude-code" },
+  { label: "Claude Desktop", value: "claude-desktop" },
+  { label: "VS Code", value: "vscode" },
+] as const;
+
+function ClientSetupTab({ children, label }: ClientSetupTabProps) {
+  return (
+    <TabsContent value={label} className="flex flex-col gap-2">
+      {children}
+    </TabsContent>
+  );
+}
+
 export function AiSettingsForm({
   settings,
+  disabled = false,
   onSettingChange,
 }: SettingsFormProps) {
   const { checkPermission } = useContext(AppContext);
+  const [copiedCommand, setCopiedCommand] = useState<string | null>(null);
+  const [selectedClient, setSelectedClient] = useState<string>("general");
 
   const hasAiAccess = checkPermission(PermissionAction.AI_FEATURES);
+  const mcpEndpoint = `${env.NEXT_PUBLIC_API_URL.replace(/\/+$/, "")}/mcp`;
+  const claudeCodeCommand = `claude mcp add --transport http testownik ${mcpEndpoint}`;
+
+  const copyCommand = async (command: string, label: string) => {
+    try {
+      await navigator.clipboard.writeText(command);
+      setCopiedCommand(label);
+      toast.success("Skopiowano do schowka.");
+      setTimeout(() => {
+        setCopiedCommand((current) => (current === label ? null : current));
+      }, 2000);
+    } catch (error) {
+      console.error("Failed to copy MCP command", error);
+      toast.error("Nie udało się skopiować komendy.");
+    }
+  };
 
   return (
-    <Card>
+    <Card className="min-w-0">
       <CardHeader>
-        <CardTitle>Sztuczna inteligencja</CardTitle>
+        <CardTitle className="flex items-center gap-2">
+          <BotIcon className="size-5" />
+          Sztuczna inteligencja
+        </CardTitle>
       </CardHeader>
-      <CardContent className="space-y-6">
+      <CardContent
+        aria-busy={disabled}
+        className={cn("flex flex-col gap-6", disabled && "animate-pulse")}
+      >
         <div className="flex items-center gap-4">
-          <div>
+          <div className="min-w-0">
             <Label
               className={cn(
                 "text-sm font-medium",
                 !hasAiAccess && "text-muted-foreground",
               )}
-              htmlFor="ai-disabled"
+              htmlFor="ai-enabled"
             >
-              Wyłącz funkcje AI
+              Wbudowane AI
             </Label>
             <p className="text-muted-foreground text-xs">
-              Ukryj generowanie quizów, czat AI, podpowiedzi i wszystkie inne
-              funkcje AI
+              Aktywuj generowanie quizów, czat AI, podpowiedzi i wszystkie inne
+              wbudowane funkcje AI
             </p>
           </div>
           <Switch
-            id="ai-disabled"
-            checked={settings.ai_disabled}
+            id="ai-enabled"
+            checked={!settings.ai_disabled}
             onCheckedChange={(checked) => {
-              onSettingChange("ai_disabled", checked);
+              onSettingChange("ai_disabled", !checked);
             }}
-            disabled={!hasAiAccess}
+            disabled={disabled || !hasAiAccess}
             className="ml-auto"
           />
         </div>
+        <div className="flex min-w-0 flex-col gap-4">
+          <div className="flex gap-4">
+            <div className="min-w-0">
+              <p className="text-sm font-medium">Testownik MCP</p>
+              <p className="text-muted-foreground text-xs">
+                Dodaj Testownika do klienta MCP, żeby asystent mógł pracować z
+                Twoimi quizami po zalogowaniu.
+              </p>
+            </div>
+          </div>
+          <Tabs
+            value={selectedClient}
+            onValueChange={setSelectedClient}
+            className="min-w-0"
+          >
+            <Select
+              items={MCP_CLIENTS}
+              value={selectedClient}
+              onValueChange={(value) => {
+                if (value !== null) {
+                  setSelectedClient(value);
+                }
+              }}
+            >
+              <SelectTrigger
+                aria-label="Wybierz klienta MCP"
+                className="w-full md:hidden"
+              >
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectGroup>
+                  {MCP_CLIENTS.map((client) => (
+                    <SelectItem key={client.value} value={client.value}>
+                      {client.label}
+                    </SelectItem>
+                  ))}
+                </SelectGroup>
+              </SelectContent>
+            </Select>
+            <TabsList className="hidden md:inline-flex">
+              {MCP_CLIENTS.map((client) => (
+                <TabsTrigger key={client.value} value={client.value}>
+                  {client.label}
+                </TabsTrigger>
+              ))}
+            </TabsList>
+            <ClientSetupTab label="general">
+              <SetupStep title="Adres serwera">
+                Podaj ten adres serwera MCP w kliencie, którego używasz, żeby
+                dodać Testownik jako zdalny serwer MCP. Wymagana jest obsługa
+                CIMD.
+              </SetupStep>
+              <CopyableSnippet
+                copiedKey={copiedCommand}
+                label="Endpoint MCP"
+                onCopy={(value, key) => {
+                  void copyCommand(value, key);
+                }}
+                value={mcpEndpoint}
+              />
+              <SetupStep title="Logowanie">
+                Po dodaniu serwera klient powinien uruchomić logowanie do
+                Testownika przy pierwszym połączeniu.
+              </SetupStep>
+            </ClientSetupTab>
+            <ClientSetupTab label="claude-code">
+              <SetupStep title="Instalacja">
+                Wklej komendę w terminalu. Claude Code doda Testownik jako
+                zdalny serwer MCP.
+              </SetupStep>
+              <CopyableSnippet
+                copiedKey={copiedCommand}
+                label="Komenda Claude Code"
+                onCopy={(value, key) => {
+                  void copyCommand(value, key);
+                }}
+                value={claudeCodeCommand}
+              />
+            </ClientSetupTab>
+            <ClientSetupTab label="claude-desktop">
+              <SetupStep title="Konfiguracja">
+                W Claude Desktop otwórz &quot;Customize&quot;, przejdź do
+                &quot;Connectors&quot;, wybierz &quot;Add custom connector&quot;
+                i wklej poniższy adres.
+              </SetupStep>
+              <CopyableSnippet
+                copiedKey={copiedCommand}
+                label="Connector URL"
+                onCopy={(value, key) => {
+                  void copyCommand(value, key);
+                }}
+                value={mcpEndpoint}
+              />
+            </ClientSetupTab>
+            <ClientSetupTab label="vscode">
+              <SetupStep title="Instalacja z VS Code">
+                Aby zainstalować MCP wybierz &quot;MCP: Add Server&quot; z
+                Command Palette, kliknij &quot;HTTP&quot; i wklej poniższy
+                adres.
+              </SetupStep>
+              <CopyableSnippet
+                copiedKey={copiedCommand}
+                label="MCP Endpoint"
+                onCopy={(value, key) => {
+                  void copyCommand(value, key);
+                }}
+                value={mcpEndpoint}
+              />
+            </ClientSetupTab>
+          </Tabs>
+          <p className="text-muted-foreground text-sm">
+            Po instalacji klient MCP poprosi Cię o zalogowanie do Testownika.
+            Połączone aplikacje możesz później odłączyć w zakładce Integracje.
+          </p>
+        </div>
       </CardContent>
     </Card>
   );
diff --git a/src/components/profile/authorized-apps-list.tsx b/src/components/profile/authorized-apps-list.tsx
new file mode 100644
index 00000000..ed25b24a
--- /dev/null
+++ b/src/components/profile/authorized-apps-list.tsx
@@ -0,0 +1,358 @@
+"use client";
+
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+  CalendarClockIcon,
+  ExternalLinkIcon,
+  KeyRoundIcon,
+  PlugZapIcon,
+  ShieldCheckIcon,
+  Trash2Icon,
+} from "lucide-react";
+import { useState } from "react";
+import { toast } from "sonner";
+
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  Empty,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from "@/components/ui/empty";
+import { Skeleton } from "@/components/ui/skeleton";
+import { getInitials } from "@/lib/utils";
+import { getUserService } from "@/services";
+import type { AuthorizedApp } from "@/types/user";
+
+const AUTHORIZED_APPS_QUERY_KEY = ["authorized-apps"];
+
+const SCOPE_LABELS: Record<string, string> = {
+  "quizzes:read": "Wyświetlanie quizów",
+  "quizzes:write": "Edycja quizów",
+  "study:read": "Twoje sesje",
+  "study:write": "Prowadzenie sesji",
+  "user:read": "Profil",
+};
+
+function formatAuthorizationDate(value: string): string {
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) {
+    return "Nieznana data";
+  }
+  return new Intl.DateTimeFormat("pl-PL", {
+    dateStyle: "medium",
+    timeStyle: "short",
+  }).format(date);
+}
+
+function getScopeLabels(scopes: string): string[] {
+  return scopes
+    .split(/\s+/)
+    .map((scope) => scope.trim())
+    .filter((scope) => scope.length > 0)
+    .map((scope) => SCOPE_LABELS[scope] ?? scope);
+}
+
+function getHttpUrl(value?: string): string | null {
+  if (value === undefined || value.trim().length === 0) {
+    return null;
+  }
+
+  try {
+    const url = new URL(value.trim());
+    if (url.protocol === "https:" || url.protocol === "http:") {
+      return url.toString();
+    }
+  } catch {
+    return null;
+  }
+
+  return null;
+}
+
+function AuthorizedAppLogo({ app }: { app: AuthorizedApp }) {
+  const [logoFailed, setLogoFailed] = useState(false);
+  const appName = app.client_name || "Integracja";
+  const logoUrl = getHttpUrl(app.logo_uri);
+  const showLogo = logoUrl !== null && !logoFailed;
+
+  return (
+    <div className="bg-muted text-muted-foreground flex size-12 shrink-0 items-center justify-center overflow-hidden rounded-lg border text-sm font-semibold">
+      {showLogo ? (
+        // eslint-disable-next-line @next/next/no-img-element
+        <img
+          src={logoUrl}
+          alt=""
+          className="size-full object-contain p-1.5"
+          loading="lazy"
+          onError={() => {
+            setLogoFailed(true);
+          }}
+        />
+      ) : (
+        getInitials(appName)
+      )}
+    </div>
+  );
+}
+
+function AuthorizedAppRow({ app }: { app: AuthorizedApp }) {
+  const queryClient = useQueryClient();
+  const scopeLabels = getScopeLabels(app.scopes);
+  const clientUri = getHttpUrl(app.client_uri);
+  const appName = app.client_name || "Integracja bez nazwy";
+  const revokeApp = useMutation({
+    mutationFn: async () => getUserService().deleteAuthorizedApp(app.client_id),
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({
+        queryKey: AUTHORIZED_APPS_QUERY_KEY,
+      });
+      toast.success("Integracja została odłączona.");
+    },
+    onError: (error: unknown) => {
+      console.error("Error revoking authorized integration:", error);
+      toast.error("Nie udało się odłączyć integracji.");
+    },
+  });
+
+  return (
+    <Card className="gap-4">
+      <CardHeader>
+        <CardTitle className="flex items-center gap-4">
+          <AuthorizedAppLogo app={app} />
+          <div>
+            <CardTitle className="flex items-center gap-4">
+              {clientUri === null ? (
+                appName
+              ) : (
+                <a
+                  href={clientUri}
+                  target="_blank"
+                  rel="noreferrer"
+                  className="hover:text-foreground/90 flex items-center gap-1"
+                >
+                  {appName}
+                  <ExternalLinkIcon className="size-3" />
+                </a>
+              )}
+            </CardTitle>
+            <CardDescription className="flex items-center gap-2">
+              <CalendarClockIcon className="size-3.5" />
+              {formatAuthorizationDate(app.created)}
+            </CardDescription>
+          </div>
+        </CardTitle>
+        <CardAction>
+          <AlertDialog>
+            <AlertDialogTrigger
+              className="hidden sm:inline-flex"
+              render={
+                <Button
+                  variant="destructive"
+                  size="sm"
+                  disabled={revokeApp.isPending}
+                >
+                  <Trash2Icon />
+                  Odłącz
+                </Button>
+              }
+            />
+            <AlertDialogTrigger
+              className="inline-flex sm:hidden"
+              render={
+                <Button
+                  variant="destructive"
+                  size="icon-sm"
+                  disabled={revokeApp.isPending}
+                >
+                  <Trash2Icon />
+                </Button>
+              }
+            />
+            <AlertDialogContent>
+              <AlertDialogHeader>
+                <AlertDialogTitle>Odłączyć integrację?</AlertDialogTitle>
+                <AlertDialogDescription>
+                  Integracja {app.client_name || app.client_id} utraci dostęp do
+                  konta. Usuniemy jej tokeny dostępu i odświeżania.
+                </AlertDialogDescription>
+              </AlertDialogHeader>
+              <AlertDialogFooter>
+                <AlertDialogCancel>Anuluj</AlertDialogCancel>
+                <AlertDialogAction
+                  variant="destructive"
+                  onClick={() => {
+                    revokeApp.mutate();
+                  }}
+                  disabled={revokeApp.isPending}
+                >
+                  Odłącz
+                </AlertDialogAction>
+              </AlertDialogFooter>
+            </AlertDialogContent>
+          </AlertDialog>
+        </CardAction>
+      </CardHeader>
+      <CardContent>
+        <div className="flex flex-col gap-2">
+          <p className="text-muted-foreground text-xs font-medium">
+            Uprawnienia
+          </p>
+          <div className="flex flex-wrap gap-1.5">
+            {scopeLabels.length > 0 ? (
+              scopeLabels.map((scope) => (
+                <Badge key={scope} variant="secondary" className="font-normal">
+                  {scope}
+                </Badge>
+              ))
+            ) : (
+              <Badge variant="outline" className="font-normal">
+                Brak zakresów
+              </Badge>
+            )}
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+function AuthorizedAppsSkeleton() {
+  return (
+    <div className="flex flex-col gap-4">
+      {[0, 1].map((item) => (
+        <Card className="gap-4" key={item}>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-4">
+              <Skeleton className="size-12 rounded-lg border" />
+              <div className="flex flex-col gap-2">
+                <CardTitle className="flex items-center gap-4">
+                  <Skeleton className="h-4 w-32" />
+                </CardTitle>
+                <CardDescription className="flex items-center gap-2">
+                  <CalendarClockIcon className="size-3.5" />
+                  <Skeleton className="h-3 w-24" />
+                </CardDescription>
+              </div>
+            </CardTitle>
+            <CardAction>
+              <Button
+                variant="destructive"
+                size="sm"
+                disabled={true}
+                className="hidden sm:inline-flex"
+              >
+                <Trash2Icon />
+                Odłącz
+              </Button>
+              <Button
+                variant="destructive"
+                size="icon-sm"
+                disabled={true}
+                className="inline-flex sm:hidden"
+              >
+                <Trash2Icon />
+              </Button>
+            </CardAction>
+          </CardHeader>
+          <CardContent>
+            <div className="flex flex-col gap-2">
+              <p className="text-muted-foreground text-xs font-medium">
+                Uprawnienia
+              </p>
+              <div className="flex flex-wrap gap-1.5">
+                {Object.keys(SCOPE_LABELS).map((scope) => (
+                  <Badge
+                    key={scope}
+                    variant="secondary"
+                    className="w-20 animate-pulse"
+                  ></Badge>
+                ))}
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      ))}
+    </div>
+  );
+}
+
+export function AuthorizedAppsList() {
+  const {
+    data: apps,
+    isError,
+    isLoading,
+  } = useQuery<AuthorizedApp[]>({
+    queryKey: AUTHORIZED_APPS_QUERY_KEY,
+    queryFn: async () => getUserService().getAuthorizedApps(),
+  });
+  const authorizedApps = apps ?? [];
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <ShieldCheckIcon className="size-5" />
+          Połączone Aplikacje
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        {isLoading ? <AuthorizedAppsSkeleton /> : null}
+        {!isLoading && isError ? (
+          <Empty className="border">
+            <EmptyHeader>
+              <EmptyMedia variant="icon">
+                <KeyRoundIcon />
+              </EmptyMedia>
+              <EmptyTitle>Nie udało się pobrać aplikacji</EmptyTitle>
+              <EmptyDescription>
+                Odśwież stronę albo spróbuj ponownie za chwilę.
+              </EmptyDescription>
+            </EmptyHeader>
+          </Empty>
+        ) : null}
+        {!isLoading && !isError && authorizedApps.length === 0 ? (
+          <Empty className="border">
+            <EmptyHeader>
+              <EmptyMedia variant="icon">
+                <PlugZapIcon />
+              </EmptyMedia>
+              <EmptyTitle>Brak połączonych aplikacji</EmptyTitle>
+              <EmptyDescription>
+                Integracje autoryzowane przez OAuth pojawią się tutaj.
+              </EmptyDescription>
+            </EmptyHeader>
+          </Empty>
+        ) : null}
+        {!isLoading && !isError && authorizedApps.length > 0 ? (
+          <div className="flex flex-col gap-4">
+            {authorizedApps.map((app) => (
+              <AuthorizedAppRow key={app.client_id} app={app} />
+            ))}
+          </div>
+        ) : null}
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/src/components/profile/notifications-form.tsx b/src/components/profile/notifications-form.tsx
index e4841984..f582e323 100644
--- a/src/components/profile/notifications-form.tsx
+++ b/src/components/profile/notifications-form.tsx
@@ -1,4 +1,4 @@
-import { AlertCircleIcon } from "lucide-react";
+import { AlertCircleIcon, BellIcon } from "lucide-react";
 import { useContext } from "react";
 
 import { AppContext } from "@/app-context";
@@ -13,6 +13,7 @@ import type { SettingsFormProps } from "@/types/user";
 
 export function NotificationsForm({
   settings,
+  disabled = false,
   onSettingChange,
 }: SettingsFormProps) {
   const { user, checkPermission } = useContext(AppContext);
@@ -35,12 +36,18 @@ export function NotificationsForm({
       )}
       <Card>
         <CardHeader>
-          <CardTitle>Powiadomienia</CardTitle>
+          <CardTitle className="flex items-center gap-2">
+            <BellIcon className="size-5" />
+            Powiadomienia
+          </CardTitle>
           <p className="text-muted-foreground text-xs">
             Wybierz, które powiadomienia chcesz otrzymywać
           </p>
         </CardHeader>
-        <CardContent className="space-y-6">
+        <CardContent
+          aria-busy={disabled}
+          className={cn("space-y-6", disabled && "animate-pulse")}
+        >
           <div className="flex items-center gap-4">
             <div>
               <Label
@@ -62,7 +69,7 @@ export function NotificationsForm({
               onCheckedChange={(checked) => {
                 onSettingChange("notify_quiz_shared", checked);
               }}
-              disabled={!canManageNotifications}
+              disabled={disabled || !canManageNotifications}
               className="ml-auto"
             />
           </div>
@@ -87,7 +94,7 @@ export function NotificationsForm({
               onCheckedChange={(checked) => {
                 onSettingChange("notify_bug_reported", checked);
               }}
-              disabled={!canManageNotifications}
+              disabled={disabled || !canManageNotifications}
               className="ml-auto"
             />
           </div>
@@ -113,7 +120,7 @@ export function NotificationsForm({
               onCheckedChange={(checked) => {
                 onSettingChange("notify_marketing", checked);
               }}
-              disabled={!canManageNotifications}
+              disabled={disabled || !canManageNotifications}
               className="ml-auto"
             />
           </div>
diff --git a/src/components/profile/profile-details.tsx b/src/components/profile/profile-details.tsx
index a2e0a47d..7609d555 100644
--- a/src/components/profile/profile-details.tsx
+++ b/src/components/profile/profile-details.tsx
@@ -20,6 +20,7 @@ import {
 } from "@/components/ui/dialog";
 import { Label } from "@/components/ui/label";
 import { Switch } from "@/components/ui/switch";
+import { useUpdateUserProfile } from "@/hooks/use-user-profile";
 import { getAccountLevelProfileAvatarClassName } from "@/lib/account-level";
 import { cn, getInitials } from "@/lib/utils";
 import { getUserService } from "@/services";
@@ -29,15 +30,11 @@ import type { UserData } from "@/types/user";
 interface ProfileDetailsProps {
   userData: UserData | null;
   loading: boolean;
-  setUserData: (data: UserData) => void;
 }
 
-export function ProfileDetails({
-  userData,
-  loading,
-  setUserData,
-}: ProfileDetailsProps) {
+export function ProfileDetails({ userData, loading }: ProfileDetailsProps) {
   const router = useRouter();
+  const updateUserProfile = useUpdateUserProfile();
   const [showDialog, setShowDialog] = useState(false);
   const [selectedPhoto, setSelectedPhoto] = useState(userData?.photo ?? "");
 
@@ -56,37 +53,35 @@ export function ProfileDetails({
 
   const handleSavePhoto = () => {
     handleCloseDialog();
-    getUserService()
-      .updateUserProfile({
+    updateUserProfile.mutate(
+      {
         overriden_photo_url:
           selectedPhoto === userData?.photo_url ? null : selectedPhoto,
-      })
-      .then(async () => {
-        if (userData !== null) {
-          setUserData({ ...userData, photo: selectedPhoto });
+      },
+      {
+        onSuccess: async () => {
           // Refresh token to get updated user data (avatar) in the token payload
           await getUserService().refreshToken();
           router.refresh();
-        }
-      })
-      .catch((error: unknown) => {
-        console.error("Error saving photo:", error);
-        toast.error("Wystąpił błąd podczas zapisywania zdjęcia profilowego.");
-      });
+        },
+        onError: (error: unknown) => {
+          console.error("Error saving photo:", error);
+          toast.error("Wystąpił błąd podczas zapisywania zdjęcia profilowego.");
+        },
+      },
+    );
   };
 
   const handleHideProfile = (hide: boolean) => {
-    getUserService()
-      .updateUserProfile({ hide_profile: hide })
-      .then(() => {
-        if (userData !== null) {
-          setUserData({ ...userData, hide_profile: hide });
-        }
-      })
-      .catch((error: unknown) => {
-        console.error("Error saving photo:", error);
-        toast.error("Wystąpił błąd podczas zapisywania zdjęcia profilowego.");
-      });
+    updateUserProfile.mutate(
+      { hide_profile: hide },
+      {
+        onError: (error: unknown) => {
+          console.error("Error saving profile visibility:", error);
+          toast.error("Wystąpił błąd podczas zapisywania ustawień profilu.");
+        },
+      },
+    );
   };
 
   const avatarOptions = [
@@ -232,6 +227,7 @@ export function ProfileDetails({
                 id="hide-profile"
                 checked={userData?.hide_profile ?? false}
                 onCheckedChange={handleHideProfile}
+                disabled={updateUserProfile.isPending}
                 className="ml-auto"
               />
             </div>
@@ -316,7 +312,12 @@ export function ProfileDetails({
             <Button variant="outline" onClick={handleCloseDialog}>
               Anuluj
             </Button>
-            <Button onClick={handleSavePhoto}>Zapisz</Button>
+            <Button
+              onClick={handleSavePhoto}
+              disabled={updateUserProfile.isPending}
+            >
+              Zapisz
+            </Button>
           </DialogFooter>
         </DialogContent>
       </Dialog>
diff --git a/src/components/profile/settings-form.tsx b/src/components/profile/settings-form.tsx
index 5e992a59..2ddeb186 100644
--- a/src/components/profile/settings-form.tsx
+++ b/src/components/profile/settings-form.tsx
@@ -1,325 +1,261 @@
-import { InfinityIcon, MinusIcon, PlusIcon } from "lucide-react";
-import { useEffect, useRef, useState } from "react";
+import { InfinityIcon, MinusIcon, PlusIcon, SettingsIcon } from "lucide-react";
 
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Switch } from "@/components/ui/switch";
+import { cn } from "@/lib/utils";
 import type { SettingsFormProps } from "@/types/user";
 import { DEFAULT_USER_SETTINGS } from "@/types/user";
 
-const normalizeValue = (value: string) => {
-  const parsed = Number.parseInt(value);
-  return Number.isFinite(parsed) && parsed >= 1 ? parsed : 0;
-};
-
-export function SettingsForm({ settings, onSettingChange }: SettingsFormProps) {
-  const [localInitialReoccurrences, setLocalInitialReoccurrences] = useState(
-    settings.initial_reoccurrences.toString(),
-  );
-  const [localWrongAnswerReoccurrences, setLocalWrongAnswerReoccurrences] =
-    useState(settings.wrong_answer_reoccurrences.toString());
-  const [localMaxQuestionReoccurrences, setLocalMaxQuestionReoccurrences] =
-    useState(
-      settings.max_question_reoccurrences === null
-        ? ""
-        : settings.max_question_reoccurrences.toString(),
-    );
-
-  const timeoutRef = useRef<NodeJS.Timeout | undefined>(undefined);
-
-  const debouncedSave = (
-    key:
-      | "initial_reoccurrences"
-      | "wrong_answer_reoccurrences"
-      | "max_question_reoccurrences",
-    value: number,
-  ) => {
-    if (timeoutRef.current !== undefined) {
-      clearTimeout(timeoutRef.current);
-    }
-    timeoutRef.current = setTimeout(() => {
-      onSettingChange(key, value);
-    }, 500);
-  };
-  const [isMaxReoccurrencesEnabled, setIsMaxReoccurrencesEnabled] = useState(
-    settings.max_question_reoccurrences !== null,
-  );
+export function SettingsForm({
+  settings,
+  disabled = false,
+  onSettingChange,
+  variant = "card",
+}: SettingsFormProps & { variant?: "card" | "plain" }) {
+  const initialReoccurrences = settings.initial_reoccurrences;
+  const wrongAnswerReoccurrences = settings.wrong_answer_reoccurrences;
+  const maxQuestionReoccurrences = settings.max_question_reoccurrences;
+  const isMaxReoccurrencesEnabled = maxQuestionReoccurrences !== null;
 
   const handleMaxReoccurrencesToggle = (checked: boolean) => {
-    if (timeoutRef.current !== undefined) {
-      clearTimeout(timeoutRef.current);
-      timeoutRef.current = undefined;
-    }
     if (checked) {
       onSettingChange(
         "max_question_reoccurrences",
         DEFAULT_USER_SETTINGS.max_question_reoccurrences,
       );
-      setLocalMaxQuestionReoccurrences(
-        DEFAULT_USER_SETTINGS.max_question_reoccurrences.toString(),
-      );
     } else {
       onSettingChange("max_question_reoccurrences", null);
-      setLocalMaxQuestionReoccurrences("");
     }
-    setIsMaxReoccurrencesEnabled(checked);
   };
 
-  useEffect(() => {
-    return () => {
-      if (timeoutRef.current !== undefined) {
-        clearTimeout(timeoutRef.current);
-      }
-    };
-  }, []);
-
-  const handleInitialReoccurrencesCommit = (value: number) => {
-    setLocalInitialReoccurrences(value < 1 ? "1" : value.toString());
-    onSettingChange("initial_reoccurrences", Math.max(value, 1));
-  };
-
-  const handleWrongAnswerReoccurrencesCommit = (value: number) => {
-    setLocalWrongAnswerReoccurrences(value < 0 ? "0" : value.toString());
-    onSettingChange("wrong_answer_reoccurrences", Math.max(value, 0));
-  };
-
-  const handleMaxQuestionReoccurrencesCommit = (value: number) => {
-    setLocalMaxQuestionReoccurrences(value < 1 ? "1" : value.toString());
-    onSettingChange("max_question_reoccurrences", Math.max(value, 1));
-  };
-
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>Ustawienia quizów</CardTitle>
-      </CardHeader>
-      <CardContent className="space-y-6">
-        <div className="grid gap-2">
-          <div className="flex flex-col justify-between gap-2 md:flex-row">
-            <Label
-              className="text-sm font-medium"
-              htmlFor="initial-reoccurrences"
+  const content = (
+    <CardContent
+      aria-busy={disabled}
+      className={cn(
+        "space-y-6",
+        variant === "plain" && "px-0 group-data-[size=sm]/card:px-0",
+        disabled && "animate-pulse",
+      )}
+    >
+      <div className="grid gap-2">
+        <div className="flex flex-col justify-between gap-2 md:flex-row">
+          <Label
+            className="text-sm font-medium"
+            htmlFor="initial-reoccurrences"
+          >
+            Wstępna liczba powtórzeń pytania
+          </Label>
+          <div className="flex gap-1">
+            <Button
+              size="icon-sm"
+              variant="outline"
+              disabled={disabled || initialReoccurrences <= 1}
+              onClick={() => {
+                const nextValue = Math.max(initialReoccurrences - 1, 1);
+                onSettingChange("initial_reoccurrences", nextValue);
+              }}
+              aria-label="Zmniejsz liczbę powtórzeń"
             >
-              Wstępna liczba powtórzeń pytania
-            </Label>
-            <div className="flex gap-1">
-              <Button
-                size="icon-sm"
-                variant="outline"
-                disabled={Number(localInitialReoccurrences) <= 1}
-                onClick={() => {
-                  const nextValue = Math.max(
-                    normalizeValue(localInitialReoccurrences) - 1,
-                    1,
-                  );
-                  handleInitialReoccurrencesCommit(nextValue);
-                }}
-                aria-label="Zmniejsz liczbę powtórzeń"
-              >
-                <MinusIcon />
-              </Button>
-              <Input
-                type="number"
-                id="initial-reoccurrences"
-                min={1}
-                value={localInitialReoccurrences}
-                onChange={(_event) => {
-                  const value = _event.target.value;
-                  const numberValue = Math.floor(Number(value));
-                  setLocalInitialReoccurrences(numberValue.toString());
-                  if (!Number.isNaN(numberValue) && numberValue >= 1) {
-                    debouncedSave("initial_reoccurrences", numberValue);
-                  }
-                }}
-                aria-invalid={(() => {
-                  const numberValue = Number.parseInt(
-                    localInitialReoccurrences,
-                  );
-                  return Number.isNaN(numberValue) || numberValue < 1;
-                })()}
-                className="h-8 w-16 [appearance:textfield] text-center font-semibold [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+              <MinusIcon />
+            </Button>
+            <Input
+              type="number"
+              id="initial-reoccurrences"
+              min={1}
+              value={initialReoccurrences}
+              disabled={disabled}
+              onChange={(_event) => {
+                const value = _event.target.value;
+                const numberValue = Math.floor(Number(value));
+                if (!Number.isNaN(numberValue) && numberValue >= 1) {
+                  onSettingChange("initial_reoccurrences", numberValue);
+                }
+              }}
+              aria-invalid={initialReoccurrences < 1}
+              className="h-8 w-16 [appearance:textfield] text-center font-semibold [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+            />
+            <Button
+              size="icon-sm"
+              variant="outline"
+              disabled={disabled}
+              onClick={() => {
+                const nextValue = Math.max(initialReoccurrences + 1, 1);
+                onSettingChange("initial_reoccurrences", nextValue);
+              }}
+              aria-label="Zwiększ liczbę powtórzeń"
+            >
+              <PlusIcon />
+            </Button>
+          </div>
+        </div>
+      </div>
+      <div className="grid gap-2">
+        <div className="flex flex-col justify-between gap-2 md:flex-row">
+          <Label
+            className="text-sm font-medium"
+            htmlFor="wrong-answer-reoccurrences"
+          >
+            Dodatkowe powtórzenia przy błędnej odpowiedzi
+          </Label>
+          <div className="flex gap-1">
+            <Button
+              size="icon-sm"
+              variant="outline"
+              disabled={disabled || wrongAnswerReoccurrences <= 0}
+              onClick={() => {
+                const nextValue = Math.max(wrongAnswerReoccurrences - 1, 0);
+                onSettingChange("wrong_answer_reoccurrences", nextValue);
+              }}
+              aria-label="Zmniejsz liczbę powtórzeń"
+            >
+              <MinusIcon />
+            </Button>
+            <Input
+              type="number"
+              id="wrong-answer-reoccurrences"
+              min={0}
+              value={wrongAnswerReoccurrences}
+              disabled={disabled}
+              onChange={(_event) => {
+                const value = _event.target.value;
+                const numberValue = Math.floor(Number(value));
+                if (!Number.isNaN(numberValue) && numberValue >= 0) {
+                  onSettingChange("wrong_answer_reoccurrences", numberValue);
+                }
+              }}
+              aria-invalid={wrongAnswerReoccurrences < 0}
+              className="h-8 w-16 [appearance:textfield] text-center font-semibold [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+            />
+            <Button
+              size="icon-sm"
+              variant="outline"
+              disabled={disabled}
+              onClick={() => {
+                const nextValue = Math.max(wrongAnswerReoccurrences + 1, 0);
+                onSettingChange("wrong_answer_reoccurrences", nextValue);
+              }}
+              aria-label="Zwiększ liczbę powtórzeń"
+            >
+              <PlusIcon />
+            </Button>
+          </div>
+        </div>
+      </div>
+      <div className="grid gap-2">
+        <div className="flex flex-col justify-between gap-2 md:flex-row">
+          <Label
+            className="text-sm font-medium"
+            htmlFor="max-question-reoccurrences-switch"
+          >
+            Ogranicz maksymalną liczbę powtórzeń
+          </Label>
+          <div className="flex items-center justify-start gap-2 md:justify-center">
+            <div className="mr-2 flex items-center justify-center">
+              <Switch
+                id="max-question-reoccurrences-switch"
+                checked={isMaxReoccurrencesEnabled}
+                onCheckedChange={handleMaxReoccurrencesToggle}
+                disabled={disabled}
               />
-              <Button
-                size="icon-sm"
-                variant="outline"
-                onClick={() => {
-                  const nextValue = Math.max(
-                    normalizeValue(localInitialReoccurrences) + 1,
-                    1,
-                  );
-                  handleInitialReoccurrencesCommit(nextValue);
-                }}
-                aria-label="Zwiększ liczbę powtórzeń"
-              >
-                <PlusIcon />
-              </Button>
             </div>
           </div>
         </div>
-        <div className="grid gap-2">
-          <div className="flex flex-col justify-between gap-2 md:flex-row">
-            <Label
-              className="text-sm font-medium"
-              htmlFor="wrong-answer-reoccurrences"
+      </div>
+      <div className="grid gap-2">
+        <div className="flex flex-col justify-between gap-2 md:flex-row">
+          <Label
+            className="text-sm font-medium"
+            htmlFor="max-question-reoccurrences-input"
+          >
+            Maksymalna liczba powtórzeń pytań
+          </Label>
+          <div className="flex gap-1">
+            <Button
+              size="icon-sm"
+              variant="outline"
+              disabled={
+                (maxQuestionReoccurrences ?? 0) <= 1 ||
+                !isMaxReoccurrencesEnabled ||
+                disabled
+              }
+              onClick={() => {
+                const nextValue = Math.max(
+                  (maxQuestionReoccurrences ?? 1) - 1,
+                  1,
+                );
+                onSettingChange("max_question_reoccurrences", nextValue);
+              }}
+              aria-label="Zmniejsz liczbę powtórzeń"
             >
-              Dodatkowe powtórzenia przy błędnej odpowiedzi
-            </Label>
-            <div className="flex gap-1">
-              <Button
-                size="icon-sm"
-                variant="outline"
-                disabled={Number(localWrongAnswerReoccurrences) <= 0}
-                onClick={() => {
-                  const nextValue = Math.max(
-                    normalizeValue(localWrongAnswerReoccurrences) - 1,
-                    0,
-                  );
-                  handleWrongAnswerReoccurrencesCommit(nextValue);
-                }}
-                aria-label="Zmniejsz liczbę powtórzeń"
-              >
-                <MinusIcon />
-              </Button>
+              <MinusIcon />
+            </Button>
+            {isMaxReoccurrencesEnabled ? (
               <Input
+                id="max-question-reoccurrences-input"
                 type="number"
-                id="wrong-answer-reoccurrences"
-                min={0}
-                value={localWrongAnswerReoccurrences}
+                aria-label="Wartość maksymalnej liczby powtórzeń pytania"
+                min={1}
+                value={maxQuestionReoccurrences}
+                disabled={disabled}
                 onChange={(_event) => {
                   const value = _event.target.value;
                   const numberValue = Math.floor(Number(value));
-                  setLocalWrongAnswerReoccurrences(numberValue.toString());
-                  if (!Number.isNaN(numberValue) && numberValue >= 0) {
-                    debouncedSave("wrong_answer_reoccurrences", numberValue);
+                  if (!Number.isNaN(numberValue) && numberValue >= 1) {
+                    onSettingChange("max_question_reoccurrences", numberValue);
                   }
                 }}
-                aria-invalid={(() => {
-                  const numberValue = Number.parseInt(
-                    localWrongAnswerReoccurrences,
-                  );
-                  return Number.isNaN(numberValue) || numberValue < 0;
-                })()}
+                aria-invalid={maxQuestionReoccurrences < 1}
                 className="h-8 w-16 [appearance:textfield] text-center font-semibold [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
               />
-              <Button
-                size="icon-sm"
-                variant="outline"
-                onClick={() => {
-                  const nextValue = Math.max(
-                    normalizeValue(localWrongAnswerReoccurrences) + 1,
-                    0,
-                  );
-                  handleWrongAnswerReoccurrencesCommit(nextValue);
-                }}
-                aria-label="Zwiększ liczbę powtórzeń"
-              >
-                <PlusIcon />
-              </Button>
-            </div>
-          </div>
-        </div>
-        <div className="grid gap-2">
-          <div className="flex flex-col justify-between gap-2 md:flex-row">
-            <Label
-              className="text-sm font-medium"
-              htmlFor="max-question-reoccurrences-switch"
-            >
-              Ogranicz maksymalną liczbę powtórzeń
-            </Label>
-            <div className="flex items-center justify-start gap-2 md:justify-center">
-              <div className="mr-2 flex items-center justify-center">
-                <Switch
-                  id="max-question-reoccurrences-switch"
-                  checked={isMaxReoccurrencesEnabled}
-                  onCheckedChange={handleMaxReoccurrencesToggle}
+            ) : (
+              <div className="relative flex w-16 items-center justify-center">
+                <Input
+                  disabled
+                  className="pointer-events-none h-8 w-16 [appearance:textfield] text-center font-semibold [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+                />
+                <InfinityIcon
+                  className="text-muted-foreground absolute size-5"
+                  aria-label="Brak limitu"
                 />
               </div>
-            </div>
-          </div>
-        </div>
-        <div className="grid gap-2">
-          <div className="flex flex-col justify-between gap-2 md:flex-row">
-            <Label
-              className="text-sm font-medium"
-              htmlFor="max-question-reoccurrences-input"
+            )}
+            <Button
+              size="icon-sm"
+              variant="outline"
+              disabled={!isMaxReoccurrencesEnabled || disabled}
+              onClick={() => {
+                const nextValue = Math.max(
+                  (maxQuestionReoccurrences ?? 1) + 1,
+                  1,
+                );
+                onSettingChange("max_question_reoccurrences", nextValue);
+              }}
+              aria-label="Zwiększ liczbę powtórzeń"
             >
-              Maksymalna liczba powtórzeń pytań
-            </Label>
-            <div className="flex gap-1">
-              <Button
-                size="icon-sm"
-                variant="outline"
-                disabled={
-                  Number(localMaxQuestionReoccurrences) <= 1 ||
-                  !isMaxReoccurrencesEnabled
-                }
-                onClick={() => {
-                  const nextValue = Math.max(
-                    normalizeValue(localMaxQuestionReoccurrences) - 1,
-                    1,
-                  );
-                  handleMaxQuestionReoccurrencesCommit(nextValue);
-                }}
-                aria-label="Zmniejsz liczbę powtórzeń"
-              >
-                <MinusIcon />
-              </Button>
-              {isMaxReoccurrencesEnabled ? (
-                <Input
-                  id="max-question-reoccurrences-input"
-                  type="number"
-                  aria-label="Wartość maksymalnej liczby powtórzeń pytania"
-                  min={1}
-                  value={localMaxQuestionReoccurrences}
-                  onChange={(_event) => {
-                    const value = _event.target.value;
-                    const numberValue = Math.floor(Number(value));
-                    setLocalMaxQuestionReoccurrences(numberValue.toString());
-                    if (!Number.isNaN(numberValue) && numberValue >= 1) {
-                      debouncedSave("max_question_reoccurrences", numberValue);
-                    }
-                  }}
-                  aria-invalid={(() => {
-                    const numberValue = Number.parseInt(
-                      localMaxQuestionReoccurrences,
-                    );
-                    return Number.isNaN(numberValue) || numberValue < 1;
-                  })()}
-                  className="h-8 w-16 [appearance:textfield] text-center font-semibold [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
-                />
-              ) : (
-                <div className="relative flex w-16 items-center justify-center">
-                  <Input
-                    disabled
-                    className="pointer-events-none h-8 w-16 [appearance:textfield] text-center font-semibold [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
-                  />
-                  <InfinityIcon
-                    className="text-muted-foreground absolute size-5"
-                    aria-label="Brak limitu"
-                  />
-                </div>
-              )}
-              <Button
-                size="icon-sm"
-                variant="outline"
-                disabled={!isMaxReoccurrencesEnabled}
-                onClick={() => {
-                  const nextValue = Math.max(
-                    normalizeValue(localMaxQuestionReoccurrences) + 1,
-                    1,
-                  );
-                  handleMaxQuestionReoccurrencesCommit(nextValue);
-                }}
-                aria-label="Zwiększ liczbę powtórzeń"
-              >
-                <PlusIcon />
-              </Button>
-            </div>
+              <PlusIcon />
+            </Button>
           </div>
         </div>
-      </CardContent>
+      </div>
+    </CardContent>
+  );
+
+  if (variant === "plain") {
+    return content;
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <SettingsIcon className="size-5" />
+          Ustawienia quizów
+        </CardTitle>
+      </CardHeader>
+      {content}
     </Card>
   );
 }
diff --git a/src/components/quiz/editor/answer-form.tsx b/src/components/quiz/editor/answer-form.tsx
index a752f045..dbc804fa 100644
--- a/src/components/quiz/editor/answer-form.tsx
+++ b/src/components/quiz/editor/answer-form.tsx
@@ -29,6 +29,7 @@ interface AnswerFormProps {
   onToggleCorrect: () => void;
   onUploadStart?: () => void;
   onUploadEnd?: () => void;
+  onImageDialogOpenChange?: (open: boolean) => void;
   canDelete: boolean;
   onKeyDown?: (event: KeyboardEvent<HTMLTextAreaElement>) => void;
 }
@@ -41,6 +42,7 @@ export function AnswerForm({
   onToggleCorrect,
   onUploadStart,
   onUploadEnd,
+  onImageDialogOpenChange,
   canDelete,
   onKeyDown,
 }: AnswerFormProps) {
@@ -158,6 +160,7 @@ export function AnswerForm({
                   onUpload={handleUpload}
                   isUploading={isImageUploading}
                   className="mt-0.5"
+                  onDialogOpenChange={onImageDialogOpenChange}
                 />
               }
             ></TooltipTrigger>
@@ -192,6 +195,7 @@ export function AnswerForm({
             onFileDrop={handleFileDrop}
             isUploading={isImageUploading}
             size="small"
+            onDialogOpenChange={onImageDialogOpenChange}
           />
         </div>
       </div>
diff --git a/src/components/quiz/editor/image/image-button.tsx b/src/components/quiz/editor/image/image-button.tsx
index 5419c50b..9febd7d9 100644
--- a/src/components/quiz/editor/image/image-button.tsx
+++ b/src/components/quiz/editor/image/image-button.tsx
@@ -20,6 +20,7 @@ export interface ImageButtonProps {
   disabled?: boolean;
   className?: string;
   isUploading?: boolean;
+  onDialogOpenChange?: (open: boolean) => void;
 }
 
 export function ImageButton({
@@ -33,9 +34,15 @@ export function ImageButton({
   disabled = false,
   className,
   isUploading = false,
+  onDialogOpenChange,
 }: ImageButtonProps) {
   const [dialogOpen, setDialogOpen] = useState(false);
 
+  function handleDialogOpenChange(open: boolean) {
+    setDialogOpen(open);
+    onDialogOpenChange?.(open);
+  }
+
   const hasImage =
     (image !== null && image !== undefined && image !== "") ||
     (imageUploadId !== null && imageUploadId !== undefined);
@@ -49,7 +56,7 @@ export function ImageButton({
         className={cn("shrink-0", className)}
         onClick={() => {
           if (!isUploading) {
-            setDialogOpen(true);
+            handleDialogOpenChange(true);
           }
         }}
         disabled={disabled || isUploading}
@@ -65,7 +72,7 @@ export function ImageButton({
 
       <ImageDialog
         open={dialogOpen}
-        onOpenChange={setDialogOpen}
+        onOpenChange={handleDialogOpenChange}
         image={image}
         imageUrl={imageUrl}
         imageUploadId={imageUploadId}
diff --git a/src/components/quiz/editor/image/image-preview.tsx b/src/components/quiz/editor/image/image-preview.tsx
index eae69138..dd22f0c1 100644
--- a/src/components/quiz/editor/image/image-preview.tsx
+++ b/src/components/quiz/editor/image/image-preview.tsx
@@ -23,6 +23,7 @@ export interface ImagePreviewProps {
   isUploading?: boolean;
   size?: "small" | "medium";
   className?: string;
+  onDialogOpenChange?: (open: boolean) => void;
 }
 
 const RENDERED_HEIGHTS = {
@@ -43,6 +44,7 @@ export function ImagePreview({
   isUploading = false,
   size = "medium",
   className,
+  onDialogOpenChange,
 }: ImagePreviewProps) {
   const [dialogOpen, setDialogOpen] = useState(false);
   const [isHovered, setIsHovered] = useState(false);
@@ -55,9 +57,14 @@ export function ImagePreview({
     return null;
   }
 
+  function handleDialogOpenChange(open: boolean) {
+    setDialogOpen(open);
+    onDialogOpenChange?.(open);
+  }
+
   const handleOpenDialog = () => {
     if (!disabled && !isUploading) {
-      setDialogOpen(true);
+      handleDialogOpenChange(true);
     }
   };
 
@@ -168,7 +175,7 @@ export function ImagePreview({
 
       <ImageDialog
         open={dialogOpen}
-        onOpenChange={setDialogOpen}
+        onOpenChange={handleDialogOpenChange}
         image={image}
         imageUrl={imageUrl}
         imageUploadId={imageUploadId}
diff --git a/src/components/quiz/editor/question-form-content.tsx b/src/components/quiz/editor/question-form-content.tsx
index afa68641..af1f121f 100644
--- a/src/components/quiz/editor/question-form-content.tsx
+++ b/src/components/quiz/editor/question-form-content.tsx
@@ -40,6 +40,8 @@ interface QuestionFormContentProps {
   onUploadStart?: () => void;
   onUploadEnd?: () => void;
   className?: string;
+  onImageDialogOpenChange?: (open: boolean) => void;
+  minAnswers?: number;
 }
 
 function createNewAnswer(order: number): AnswerFormData {
@@ -65,6 +67,8 @@ export function QuestionFormContent({
   onUploadStart,
   onUploadEnd,
   className,
+  onImageDialogOpenChange,
+  minAnswers = 1,
 }: QuestionFormContentProps) {
   const { handlePaste } = useImagePaste((file: File) => {
     void onUpload(file);
@@ -86,7 +90,7 @@ export function QuestionFormContent({
   }
 
   function removeAnswer(answerId: string) {
-    if (question.answers.length <= 1) {
+    if (question.answers.length <= minAnswers) {
       return;
     }
     const filtered = question.answers.filter((a) => a.id !== answerId);
@@ -227,6 +231,7 @@ export function QuestionFormContent({
             onFileDrop={handleFileDrop}
             isUploading={isImageUploading}
             size="medium"
+            onDialogOpenChange={onImageDialogOpenChange}
           />
 
           {hasExplanation ? (
@@ -314,7 +319,8 @@ export function QuestionFormContent({
               }}
               onUploadStart={onUploadStart}
               onUploadEnd={onUploadEnd}
-              canDelete={question.answers.length > 1}
+              onImageDialogOpenChange={onImageDialogOpenChange}
+              canDelete={question.answers.length > minAnswers}
               onKeyDown={(event) => {
                 void handleAnswerKeyDown(answer.id, event);
               }}
diff --git a/src/components/quiz/editor/question-form-header.tsx b/src/components/quiz/editor/question-form-header.tsx
index 19605723..eb90371c 100644
--- a/src/components/quiz/editor/question-form-header.tsx
+++ b/src/components/quiz/editor/question-form-header.tsx
@@ -30,6 +30,7 @@ interface QuestionFormHeaderProps {
   onUpload: (file: File) => Promise<void>;
   className?: string;
   hideDelete?: boolean;
+  onImageDialogOpenChange?: (open: boolean) => void;
 }
 
 export function QuestionFormHeader({
@@ -41,6 +42,7 @@ export function QuestionFormHeader({
   onUpload,
   className,
   hideDelete = false,
+  onImageDialogOpenChange,
 }: QuestionFormHeaderProps) {
   const [explanationOpen, setExplanationOpen] = useState(false);
   const hasExplanation = Boolean(question.explanation?.trim());
@@ -92,6 +94,7 @@ export function QuestionFormHeader({
                 onImageChange={onImageChange}
                 onUpload={onUpload}
                 isUploading={isImageUploading}
+                onDialogOpenChange={onImageDialogOpenChange}
               />
             }
           ></TooltipTrigger>
diff --git a/src/components/quiz/hooks/use-focus-mode.ts b/src/components/quiz/hooks/use-focus-mode.ts
new file mode 100644
index 00000000..23512af1
--- /dev/null
+++ b/src/components/quiz/hooks/use-focus-mode.ts
@@ -0,0 +1,221 @@
+import { useEffect, useRef, useState } from "react";
+
+import type { TimerStore } from "./use-study-timer";
+
+const FOCUS_ALERT_SOUND_SRC = "/sounds/quiz/metal-pipe.mp3";
+
+const FOCUS_ALERT_CONTENT = {
+  inactivity: {
+    title: "Brak aktywności",
+    message:
+      "Minęło 5 minut bez żadnej akcji. Timer został zatrzymany - wróć do nauki!",
+  },
+  tabLeft: {
+    title: "Opuszczono kartę z quizem.",
+    message: "Timer został zatrzymany - skup się na nauce!",
+  },
+} as const;
+
+export type FocusAlertType = keyof typeof FOCUS_ALERT_CONTENT;
+
+function clearInactivityCountdown(inactivityTimerRef: {
+  current: NodeJS.Timeout | null;
+}) {
+  if (inactivityTimerRef.current !== null) {
+    clearTimeout(inactivityTimerRef.current);
+    inactivityTimerRef.current = null;
+  }
+}
+
+function getFocusAlertAudio(audioRef: { current: HTMLAudioElement | null }) {
+  audioRef.current ??= new Audio(FOCUS_ALERT_SOUND_SRC);
+  audioRef.current.preload = "auto";
+  return audioRef.current;
+}
+
+function unlockFocusAlertSound(audioRef: { current: HTMLAudioElement | null }) {
+  // Prime playback during a user gesture.
+  const audio = getFocusAlertAudio(audioRef);
+  audio.muted = true;
+  audio.currentTime = 0;
+
+  void audio
+    .play()
+    .then(() => {
+      audio.pause();
+      audio.currentTime = 0;
+      audio.muted = false;
+    })
+    .catch(() => {
+      audio.muted = false;
+    });
+}
+
+function playFocusAlertSound(audioRef: { current: HTMLAudioElement | null }) {
+  const audio = getFocusAlertAudio(audioRef);
+  audio.muted = false;
+  audio.pause();
+  audio.currentTime = 0;
+  void audio.play().catch(console.error);
+}
+
+function startInactivityCountdown(
+  timerStore: TimerStore,
+  inactivityTimerRef: { current: NodeJS.Timeout | null },
+  isAlertOpenRef: { current: boolean },
+  audioRef: { current: HTMLAudioElement | null },
+  showFocusAlert: (type: FocusAlertType) => void,
+) {
+  clearInactivityCountdown(inactivityTimerRef);
+
+  inactivityTimerRef.current = setTimeout(
+    () => {
+      if (isAlertOpenRef.current) {
+        return;
+      }
+      isAlertOpenRef.current = true;
+      timerStore.pause();
+      playFocusAlertSound(audioRef);
+      showFocusAlert("inactivity");
+    },
+    5 * 60 * 1000,
+  );
+}
+
+export function useFocusMode(timerStore: TimerStore) {
+  const [isFocusModeActive, setIsFocusModeActive] = useState(false);
+  const [focusAlertType, setFocusAlertType] =
+    useState<FocusAlertType>("inactivity");
+  const [isFocusAlertOpen, setIsFocusAlertOpen] = useState(false);
+  const [showOnboarding, setShowOnboarding] = useState(false);
+
+  const inactivityTimerRef = useRef<NodeJS.Timeout | null>(null);
+  const isAlertOpenRef = useRef(false);
+  const audioRef = useRef<HTMLAudioElement | null>(null);
+
+  const showFocusAlert = (type: FocusAlertType) => {
+    setFocusAlertType(type);
+    setIsFocusAlertOpen(true);
+  };
+
+  const resetInactivityTimer = () => {
+    if (!isFocusModeActive) {
+      return;
+    }
+    timerStore.resume();
+    startInactivityCountdown(
+      timerStore,
+      inactivityTimerRef,
+      isAlertOpenRef,
+      audioRef,
+      showFocusAlert,
+    );
+  };
+
+  const executeToggle = () => {
+    const nextState = !isFocusModeActive;
+    setIsFocusModeActive(nextState);
+    if (nextState) {
+      unlockFocusAlertSound(audioRef);
+      timerStore.resume();
+    }
+  };
+
+  const toggleFocusMode = () => {
+    if (!isFocusModeActive) {
+      const hasSeenOnboarding =
+        localStorage.getItem("focusModeOnboarding") === "true";
+      if (!hasSeenOnboarding) {
+        setShowOnboarding(true);
+        return;
+      }
+    }
+    executeToggle();
+  };
+
+  const confirmOnboarding = () => {
+    setShowOnboarding(false);
+    executeToggle();
+  };
+
+  const confirmOnboardingAndHide = () => {
+    localStorage.setItem("focusModeOnboarding", "true");
+    setShowOnboarding(false);
+    executeToggle();
+  };
+
+  const cancelOnboarding = () => {
+    setShowOnboarding(false);
+  };
+
+  const closeFocusAlert = () => {
+    setIsFocusAlertOpen(false);
+    isAlertOpenRef.current = false;
+    resetInactivityTimer();
+  };
+
+  const turnOffFocusModeFromAlert = () => {
+    setIsFocusAlertOpen(false);
+    isAlertOpenRef.current = false;
+    setIsFocusModeActive(false);
+    clearInactivityCountdown(inactivityTimerRef);
+    timerStore.resume();
+  };
+
+  useEffect(() => {
+    if (!isFocusModeActive) {
+      clearInactivityCountdown(inactivityTimerRef);
+      return;
+    }
+
+    startInactivityCountdown(
+      timerStore,
+      inactivityTimerRef,
+      isAlertOpenRef,
+      audioRef,
+      showFocusAlert,
+    );
+
+    const handleVisibilityChange = () => {
+      if (document.hidden) {
+        if (isAlertOpenRef.current) {
+          return;
+        }
+        isAlertOpenRef.current = true;
+        timerStore.pause();
+        playFocusAlertSound(audioRef);
+        showFocusAlert("tabLeft");
+      }
+    };
+
+    document.addEventListener("visibilitychange", handleVisibilityChange);
+
+    return () => {
+      document.removeEventListener("visibilitychange", handleVisibilityChange);
+      clearInactivityCountdown(inactivityTimerRef);
+    };
+  }, [isFocusModeActive, timerStore]);
+
+  useEffect(() => {
+    return () => {
+      if (audioRef.current != null) {
+        audioRef.current.pause();
+        audioRef.current = null;
+      }
+    };
+  }, []);
+
+  return {
+    isFocusModeActive,
+    toggleFocusMode,
+    resetInactivityTimer,
+    isFocusAlertOpen,
+    focusAlert: FOCUS_ALERT_CONTENT[focusAlertType],
+    closeFocusAlert,
+    turnOffFocusModeFromAlert,
+    showOnboarding,
+    confirmOnboarding,
+    confirmOnboardingAndHide,
+    cancelOnboarding,
+  };
+}
diff --git a/src/components/quiz/hooks/use-study-timer.ts b/src/components/quiz/hooks/use-study-timer.ts
index d1fbcae9..bc727f7a 100644
--- a/src/components/quiz/hooks/use-study-timer.ts
+++ b/src/components/quiz/hooks/use-study-timer.ts
@@ -7,6 +7,7 @@ import { useEffect, useRef, useSyncExternalStore } from "react";
 function createTimerStore(initial: number) {
   let studyTime = initial;
   let startTime = Date.now() - initial * 1000;
+  let isPaused = false;
   const listeners = new Set<() => void>();
 
   const notifyListeners = () => {
@@ -31,7 +32,25 @@ function createTimerStore(initial: number) {
     setStartTime(time: number) {
       startTime = time;
     },
+    pause() {
+      if (isPaused) {
+        return;
+      }
+      isPaused = true;
+      notifyListeners();
+    },
+    resume() {
+      if (!isPaused) {
+        return;
+      }
+      startTime = Date.now() - studyTime * 1000;
+      isPaused = false;
+      notifyListeners();
+    },
     tick() {
+      if (isPaused) {
+        return;
+      }
       const newTime = Math.floor((Date.now() - startTime) / 1000);
       if (newTime !== studyTime) {
         studyTime = newTime;
diff --git a/src/components/quiz/quick-edit-question-dialog.tsx b/src/components/quiz/quick-edit-question-dialog.tsx
index 266c64b4..a19eb614 100644
--- a/src/components/quiz/quick-edit-question-dialog.tsx
+++ b/src/components/quiz/quick-edit-question-dialog.tsx
@@ -45,6 +45,10 @@ interface QuickEditQuestionDialogProps {
   onOpenChange: (open: boolean) => void;
   question: Question;
   quizId: string;
+  onSaveDraft?: (question: Question) => void;
+  hideDelete?: boolean;
+  hideFullEditor?: boolean;
+  minAnswers?: number;
 }
 
 export function QuickEditQuestionDialog({
@@ -52,11 +56,16 @@ export function QuickEditQuestionDialog({
   onOpenChange,
   question,
   quizId,
+  onSaveDraft,
+  hideDelete = false,
+  hideFullEditor = false,
+  minAnswers = 1,
 }: QuickEditQuestionDialogProps) {
   const queryClient = useQueryClient();
   const [formData, setFormData] = useState(question);
 
   const [isAlertDialogOpen, setIsAlertDialogOpen] = useState(false);
+  const [isImageEditDialogOpen, setIsImageEditDialogOpen] = useState(false);
 
   const [isImageUploading, setIsImageUploading] = useState(false);
   const { upload } = useImageUpload();
@@ -121,7 +130,7 @@ export function QuickEditQuestionDialog({
           };
         },
       );
-      onOpenChange(false);
+      handleOpenChange(false);
     },
     onError: () => {
       toast.error("Nie udało się zaktualizować pytania");
@@ -159,7 +168,7 @@ export function QuickEditQuestionDialog({
           };
         },
       );
-      onOpenChange(false);
+      handleOpenChange(false);
     },
     onError: () => {
       toast.error("Nie udało się usunąć pytania");
@@ -174,14 +183,37 @@ export function QuickEditQuestionDialog({
       return;
     }
 
+    if (validation.data.answers.length < minAnswers) {
+      toast.error(
+        `Pytanie musi mieć przynajmniej ${minAnswers.toString()} odpowiedzi`,
+      );
+      return;
+    }
+
+    if (onSaveDraft !== undefined) {
+      onSaveDraft(validation.data);
+      handleOpenChange(false);
+      return;
+    }
+
     await saveQuestion();
   };
 
+  function handleOpenChange(nextOpen: boolean) {
+    onOpenChange(nextOpen);
+    if (!nextOpen) {
+      setIsAlertDialogOpen(false);
+      setIsImageEditDialogOpen(false);
+    }
+  }
+
+  const isNestedDialogOpen = isAlertDialogOpen || isImageEditDialogOpen;
+
   return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
+    <Dialog open={open} onOpenChange={handleOpenChange}>
       <DialogContent
         className="flex flex-col gap-0 sm:max-w-4xl"
-        data-nested-dialog-open={isAlertDialogOpen ? "" : undefined}
+        data-nested-dialog-open={isNestedDialogOpen ? "" : undefined}
         aria-describedby={undefined}
       >
         <DialogHeader className="pr-6">
@@ -194,6 +226,7 @@ export function QuickEditQuestionDialog({
             isImageUploading={isImageUploading}
             onImageChange={handleImageChange}
             onUpload={handleUpload}
+            onImageDialogOpenChange={setIsImageEditDialogOpen}
             hideDelete
           />
         </DialogHeader>
@@ -207,64 +240,70 @@ export function QuickEditQuestionDialog({
             isImageUploading={isImageUploading}
             onImageChange={handleImageChange}
             onUpload={handleUpload}
+            onImageDialogOpenChange={setIsImageEditDialogOpen}
+            minAnswers={minAnswers}
           />
         </div>
 
         <DialogFooter className="flex items-center justify-between sm:justify-between">
           <div className="flex items-center gap-2">
-            <AlertDialog
-              open={isAlertDialogOpen}
-              onOpenChange={setIsAlertDialogOpen}
-            >
-              <AlertDialogTrigger
+            {hideDelete ? null : (
+              <AlertDialog
+                open={isAlertDialogOpen}
+                onOpenChange={setIsAlertDialogOpen}
+              >
+                <AlertDialogTrigger
+                  render={
+                    <Button
+                      variant="ghost"
+                      className="text-destructive hover:text-destructive"
+                    >
+                      <Trash2 />
+                      Usuń pytanie
+                    </Button>
+                  }
+                ></AlertDialogTrigger>
+
+                <AlertDialogContent>
+                  <AlertDialogHeader>
+                    <AlertDialogTitle>
+                      Czy na pewno chcesz usunąć to pytanie?
+                    </AlertDialogTitle>
+                    <AlertDialogDescription>
+                      Tej operacji nie można cofnąć.
+                    </AlertDialogDescription>
+                  </AlertDialogHeader>
+                  <AlertDialogFooter>
+                    <AlertDialogCancel>Anuluj</AlertDialogCancel>
+                    <AlertDialogAction
+                      onClick={async () => {
+                        await deleteQuestion();
+                      }}
+                      disabled={isDeleting}
+                    >
+                      {isDeleting ? "Usuwanie..." : "Usuń"}
+                    </AlertDialogAction>
+                  </AlertDialogFooter>
+                </AlertDialogContent>
+              </AlertDialog>
+            )}
+            {hideFullEditor ? null : (
+              <Button
+                variant="ghost"
+                nativeButton={false}
                 render={
-                  <Button
-                    variant="ghost"
-                    className="text-destructive hover:text-destructive"
-                  >
-                    <Trash2 />
-                    Usuń pytanie
-                  </Button>
+                  <Link href={`/edit-quiz/${quizId}#question-${question.id}`}>
+                    Pełny edytor <ExternalLinkIcon className="ml-2 size-4" />
+                  </Link>
                 }
-              ></AlertDialogTrigger>
-
-              <AlertDialogContent>
-                <AlertDialogHeader>
-                  <AlertDialogTitle>
-                    Czy na pewno chcesz usunąć to pytanie?
-                  </AlertDialogTitle>
-                  <AlertDialogDescription>
-                    Tej operacji nie można cofnąć.
-                  </AlertDialogDescription>
-                </AlertDialogHeader>
-                <AlertDialogFooter>
-                  <AlertDialogCancel>Anuluj</AlertDialogCancel>
-                  <AlertDialogAction
-                    onClick={async () => {
-                      await deleteQuestion();
-                    }}
-                    disabled={isDeleting}
-                  >
-                    {isDeleting ? "Usuwanie..." : "Usuń"}
-                  </AlertDialogAction>
-                </AlertDialogFooter>
-              </AlertDialogContent>
-            </AlertDialog>
-            <Button
-              variant="ghost"
-              nativeButton={false}
-              render={
-                <Link href={`/edit-quiz/${quizId}#question-${question.id}`}>
-                  Pełny edytor <ExternalLinkIcon className="ml-2 size-4" />
-                </Link>
-              }
-            ></Button>
+              ></Button>
+            )}
           </div>
           <div className="flex gap-2">
             <Button
               variant="outline"
               onClick={() => {
-                onOpenChange(false);
+                handleOpenChange(false);
               }}
             >
               Anuluj
diff --git a/src/components/quiz/quiz-action-buttons.tsx b/src/components/quiz/quiz-action-buttons.tsx
index d3ebe045..f15bdff6 100644
--- a/src/components/quiz/quiz-action-buttons.tsx
+++ b/src/components/quiz/quiz-action-buttons.tsx
@@ -1,6 +1,6 @@
 import {
+  BotIcon,
   ClipboardCopyIcon,
-  HistoryIcon,
   MessageSquareWarningIcon,
   PencilLineIcon,
   SkullIcon,
@@ -8,6 +8,7 @@ import {
 } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { useContext, useState } from "react";
+import { SiOpenai } from "react-icons/si";
 import { toast } from "sonner";
 
 import { AppContext } from "@/app-context";
@@ -26,22 +27,24 @@ import type { Question, Quiz } from "@/types/quiz";
 interface QuizActionButtonsProps {
   quiz: Quiz;
   question: Question | null;
-  onToggleHistory: () => void;
   onToggleBrainrot: () => void;
   onExplain: () => void;
+  onOpenChat?: () => void;
   disabled?: boolean;
   isExplainOpen?: boolean;
+  isChatOpen?: boolean;
   aiDisabled?: boolean;
 }
 
 export function QuizActionButtons({
   quiz,
   question,
-  onToggleHistory,
   onToggleBrainrot,
   onExplain,
+  onOpenChat,
   disabled = false,
   isExplainOpen = false,
+  isChatOpen = false,
   aiDisabled = false,
 }: QuizActionButtonsProps) {
   const { checkPermission, user } = useContext(AppContext);
@@ -75,9 +78,64 @@ export function QuizActionButtons({
     setIsEditOpen(true);
   };
 
+  const canUseAi = !aiDisabled && checkPermission(PermissionAction.AI_FEATURES);
+
+  const handleOpenChatGPT = () => {
+    if (question == null) {
+      toast.error("Nie można otworzyć ChatGPT: brak pytania");
+      return;
+    }
+    const answersText = question.answers
+      .map(
+        (a, index) =>
+          `Odpowiedź ${(index + 1).toString()}: ${a.text} (Poprawna: ${a.is_correct ? "Tak" : "Nie"})`,
+      )
+      .join("\n");
+    const fullText = `Wyjaśnij to pytanie i jak dojść do odpowiedzi: ${question.text}\n\nOdpowiedzi:\n${answersText}`;
+    window.open(
+      `https://chat.openai.com/?q=${encodeURIComponent(fullText)}`,
+      "_blank",
+    );
+  };
+
   return (
     <Card className="py-4">
       <CardContent className="flex justify-around">
+        {canUseAi ? (
+          <Tooltip>
+            <TooltipTrigger
+              render={
+                <Button
+                  variant="outline"
+                  size="icon"
+                  onClick={onExplain}
+                  disabled={!canUseQuestion || isExplainOpen}
+                  aria-label="Wyjaśnij pytanie"
+                >
+                  <SparklesIcon />
+                </Button>
+              }
+            ></TooltipTrigger>
+            <TooltipContent>Wyjaśnij pytanie</TooltipContent>
+          </Tooltip>
+        ) : (
+          <Tooltip>
+            <TooltipTrigger
+              render={
+                <Button
+                  variant="outline"
+                  size="icon"
+                  onClick={handleOpenChatGPT}
+                  disabled={!canUseQuestion}
+                  aria-label="Otwórz w ChatGPT"
+                >
+                  <SiOpenai />
+                </Button>
+              }
+            ></TooltipTrigger>
+            <TooltipContent>Otwórz w ChatGPT</TooltipContent>
+          </Tooltip>
+        )}
         <Tooltip>
           <TooltipTrigger
             render={
@@ -94,25 +152,25 @@ export function QuizActionButtons({
           ></TooltipTrigger>
           <TooltipContent>Kopiuj pytanie i odpowiedzi</TooltipContent>
         </Tooltip>
-        {!aiDisabled && checkPermission(PermissionAction.AI_FEATURES) ? (
+        {isCreator ? (
           <Tooltip>
             <TooltipTrigger
               render={
                 <Button
                   variant="outline"
                   size="icon"
-                  onClick={onExplain}
-                  disabled={!canUseQuestion || isExplainOpen}
-                  aria-label="Wyjaśnij pytanie (AI)"
+                  onClick={handleEdit}
+                  aria-label="Edytuj pytanie"
                 >
-                  <SparklesIcon />
+                  <PencilLineIcon />
                 </Button>
               }
             ></TooltipTrigger>
-            <TooltipContent>Wyjaśnij pytanie (AI)</TooltipContent>
+            <TooltipContent>
+              {question == null ? "Edytuj quiz" : "Edytuj pytanie"}
+            </TooltipContent>
           </Tooltip>
-        ) : null}
-        {!isCreator && checkPermission(PermissionAction.REPORT_QUIZ_ISSUES) ? (
+        ) : checkPermission(PermissionAction.REPORT_QUIZ_ISSUES) ? (
           <Tooltip>
             <ReportQuestionIssueDialog
               quizId={quiz.id}
@@ -134,40 +192,24 @@ export function QuizActionButtons({
             <TooltipContent>Zgłoś problem z pytaniem</TooltipContent>
           </Tooltip>
         ) : null}
-        {isCreator ? (
+        {canUseAi && onOpenChat != null ? (
           <Tooltip>
             <TooltipTrigger
               render={
                 <Button
                   variant="outline"
                   size="icon"
-                  onClick={handleEdit}
-                  aria-label="Edytuj pytanie"
+                  onClick={onOpenChat}
+                  disabled={!canUseQuestion || isChatOpen}
+                  aria-label="Czat AI"
                 >
-                  <PencilLineIcon />
+                  <BotIcon />
                 </Button>
               }
             ></TooltipTrigger>
-            <TooltipContent>
-              {question == null ? "Edytuj quiz" : "Edytuj pytanie"}
-            </TooltipContent>
+            <TooltipContent>Czat AI</TooltipContent>
           </Tooltip>
         ) : null}
-        <Tooltip>
-          <TooltipTrigger
-            render={
-              <Button
-                variant="outline"
-                size="icon"
-                onClick={onToggleHistory}
-                aria-label="Historia odpowiedzi"
-              >
-                <HistoryIcon />
-              </Button>
-            }
-          ></TooltipTrigger>
-          <TooltipContent>Historia odpowiedzi</TooltipContent>
-        </Tooltip>
         <Tooltip>
           <TooltipTrigger
             render={
diff --git a/src/components/quiz/quiz-info-card.tsx b/src/components/quiz/quiz-info-card.tsx
index fce00c60..502be937 100644
--- a/src/components/quiz/quiz-info-card.tsx
+++ b/src/components/quiz/quiz-info-card.tsx
@@ -1,25 +1,41 @@
 import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { format } from "date-fns";
 import {
   BarChart3Icon,
   CopyIcon,
+  EyeOffIcon,
+  HistoryIcon,
   Link2Icon,
   Loader2Icon,
+  MenuIcon,
   RotateCcwIcon,
+  ScanEyeIcon,
   SearchIcon,
+  SettingsIcon,
+  ShareIcon,
 } from "lucide-react";
-import { useContext } from "react";
+import Link from "next/link";
+import { useContext, useState } from "react";
 import { toast } from "sonner";
 
 import { AppContext } from "@/app-context";
+import { QuizSettingsDialog } from "@/components/quiz/quiz-settings-dialog";
+import { ShareQuizDialog } from "@/components/quiz/share-quiz-dialog/share-quiz-dialog";
 import { Button, ButtonLink } from "@/components/ui/button";
 import {
   Card,
+  CardAction,
   CardContent,
   CardDescription,
   CardHeader,
   CardTitle,
 } from "@/components/ui/card";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 import { Progress } from "@/components/ui/progress";
 import {
   Tooltip,
@@ -41,6 +57,11 @@ interface QuizInfoCardProps {
   totalQuestions: number;
   timerStore: TimerStore;
   resetProgress: () => void;
+  isFocusModeActive: boolean;
+  toggleFocusMode: () => void;
+  onToggleHistory: () => void;
+  isSettingsOpen: boolean;
+  onSettingsOpenChange: (open: boolean) => void;
 }
 
 const getProgressColor = (percentage: number): string => {
@@ -73,14 +94,26 @@ const getProgressColor = (percentage: number): string => {
   return "rgb(25, 135, 84)";
 };
 
+const formatStudyTime = (totalSeconds: number): string => {
+  const hours = Math.floor(totalSeconds / 3600);
+  const minutes = Math.floor((totalSeconds % 3600) / 60);
+  const seconds = totalSeconds % 60;
+  const paddedMinutes = String(minutes).padStart(2, "0");
+  const paddedSeconds = String(seconds).padStart(2, "0");
+
+  if (hours === 0) {
+    return `${paddedMinutes}:${paddedSeconds}`;
+  }
+
+  return `${String(hours)}:${paddedMinutes}:${paddedSeconds}`;
+};
+
 function StudyTimeDisplay({ timerStore }: { timerStore: TimerStore }) {
   const studyTime = useStudyTimeValue(timerStore);
-  const date = new Date(0);
-  date.setHours(0, 0, studyTime);
 
   return (
     <span className="font-medium text-emerald-600 dark:text-emerald-400">
-      {format(date, "HH:mm:ss")}
+      {formatStudyTime(studyTime)}
     </span>
   );
 }
@@ -93,12 +126,19 @@ export function QuizInfoCard({
   totalQuestions,
   timerStore,
   resetProgress,
+  isFocusModeActive,
+  toggleFocusMode,
+  onToggleHistory,
+  isSettingsOpen,
+  onSettingsOpenChange,
 }: QuizInfoCardProps): React.JSX.Element | null {
   const { checkPermission } = useContext(AppContext);
   const canShare = checkPermission(PermissionAction.SHARE_QUIZZES);
   const canSearchInQuiz = checkPermission(PermissionAction.SEARCH_IN_QUIZ);
   const canViewStats = checkPermission(PermissionAction.VIEW_QUIZ_STATS);
   const queryClient = useQueryClient();
+  const FocusModeIcon = isFocusModeActive ? ScanEyeIcon : EyeOffIcon;
+  const [isShareDialogOpen, setIsShareDialogOpen] = useState(false);
 
   const { mutate: copyQuiz, isPending: isCopying } = useMutation({
     mutationFn: async (quizId: string) => getQuizService().copyQuiz(quizId),
@@ -126,154 +166,192 @@ export function QuizInfoCard({
     totalQuestions > 0 ? (masteredCount / totalQuestions) * 100 : 0;
 
   return (
-    <Card>
-      <CardHeader>
-        <CardTitle>{quiz.title}</CardTitle>
-        {quiz.creator == null ? null : (
-          <CardDescription>by {quiz.creator.full_name}</CardDescription>
-        )}
-      </CardHeader>
-      <CardContent className="space-y-2 text-sm">
-        <div className="space-y-1">
-          <div className="flex justify-between">
-            <span>Udzielone odpowiedzi</span>
-            <span className="font-medium text-emerald-600 dark:text-emerald-400">
-              {correctAnswersCount + wrongAnswersCount}
-            </span>
-          </div>
-          <div className="flex justify-between">
-            <span>Opanowane pytania</span>
-            <span className="text-muted-foreground">{masteredCount}</span>
-          </div>
-          <div className="flex justify-between">
-            <span>Liczba pytań</span>
-            <span className="font-medium text-emerald-600 dark:text-emerald-400">
-              {totalQuestions}
-            </span>
-          </div>
-          <div className="flex justify-between">
-            <span>Czas nauki</span>
-            <StudyTimeDisplay timerStore={timerStore} />
-          </div>
-        </div>
-        <Progress
-          value={progressPercentage}
-          style={{
-            ["--bar-color" as never]: getProgressColor(progressPercentage),
-          }}
-          aria-label={`Postęp: ${Math.round(progressPercentage).toString()}% opanowanych pytań`}
-          className="**:data-[slot=progress-indicator]:bg-(--bar-color)"
-        />
-        <div className="flex items-center justify-between pt-2">
-          <div className="flex gap-2">
-            {canSearchInQuiz ? (
-              <Tooltip>
-                <TooltipTrigger
-                  render={
-                    <ButtonLink
-                      size="icon-sm"
-                      variant="outline"
-                      href={`/search-in-quiz/${quiz.id}`}
-                      aria-label="Wyszukaj w quizie"
-                    >
-                      <SearchIcon className="size-5" />
-                    </ButtonLink>
-                  }
-                ></TooltipTrigger>
-                <TooltipContent>Wyszukaj w quizie</TooltipContent>
-              </Tooltip>
-            ) : null}
-            {canShare ? (
-              <Tooltip>
-                <TooltipTrigger
-                  render={
-                    <Button
-                      size="icon-sm"
-                      variant="outline"
-                      onClick={() => {
-                        void navigator.clipboard
-                          .writeText(window.location.href)
-                          .then(() => {
-                            toast.success("Skopiowano link do quizu");
-                          });
-                      }}
-                      aria-label="Skopiuj link do quizu"
-                    >
-                      <Link2Icon className="size-5" />
-                    </Button>
-                  }
-                ></TooltipTrigger>
-                <TooltipContent>Kopiuj link do quizu</TooltipContent>
-              </Tooltip>
-            ) : null}
-            {canViewStats ? (
-              <Tooltip>
-                <TooltipTrigger
-                  render={
-                    <ButtonLink
-                      size="icon-sm"
-                      variant="outline"
-                      href={`/quiz/${quiz.id}/stats`}
-                      aria-label="Statystyki quizu"
-                    >
-                      <BarChart3Icon className="size-5" />
-                    </ButtonLink>
-                  }
-                ></TooltipTrigger>
-                <TooltipContent>Statystyki quizu</TooltipContent>
-              </Tooltip>
-            ) : null}
-            {canEditQuiz ? null : (
-              <Tooltip>
-                <TooltipTrigger
-                  render={
-                    <Button
-                      size="icon-sm"
-                      variant="outline"
+    <>
+      <Card>
+        <CardHeader>
+          <CardTitle>{quiz.title}</CardTitle>
+          {quiz.creator == null ? null : (
+            <CardDescription>by {quiz.creator.full_name}</CardDescription>
+          )}
+          <CardAction>
+            <DropdownMenu>
+              <DropdownMenuTrigger
+                render={
+                  <Button
+                    variant="outline"
+                    size="icon-sm"
+                    aria-label="Więcej opcji quizu"
+                  >
+                    <MenuIcon />
+                  </Button>
+                }
+              />
+              <DropdownMenuContent align="end" className="w-full">
+                <DropdownMenuItem
+                  onClick={() => {
+                    onSettingsOpenChange(true);
+                  }}
+                >
+                  <SettingsIcon />
+                  Ustawienia
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                {canViewStats ? (
+                  <DropdownMenuItem
+                    render={(props) => (
+                      <Link {...props} href={`/quiz/${quiz.id}/stats`}>
+                        <BarChart3Icon />
+                        Statystyki
+                      </Link>
+                    )}
+                  />
+                ) : null}
+                <DropdownMenuItem onClick={onToggleHistory}>
+                  <HistoryIcon />
+                  Historia odpowiedzi
+                </DropdownMenuItem>
+                <DropdownMenuItem onClick={toggleFocusMode}>
+                  <FocusModeIcon />
+                  {isFocusModeActive
+                    ? "Wyłącz tryb skupienia"
+                    : "Tryb skupienia"}
+                </DropdownMenuItem>
+                {canEditQuiz ? null : (
+                  <>
+                    <DropdownMenuSeparator />
+                    <DropdownMenuItem
                       disabled={isCopying}
                       onClick={() => {
                         copyQuiz(quiz.id);
                       }}
-                      aria-label={
-                        isCopying
-                          ? "Kopiowanie quizu"
-                          : "Utwórz kopię quizu i dodaj do mojej biblioteki"
-                      }
                     >
                       {isCopying ? (
-                        <Loader2Icon className="size-5 animate-spin" />
+                        <Loader2Icon className="animate-spin" />
                       ) : (
-                        <CopyIcon className="size-5" />
+                        <CopyIcon />
                       )}
-                    </Button>
-                  }
-                ></TooltipTrigger>
-                <TooltipContent>
-                  {isCopying
-                    ? "Kopiowanie..."
-                    : "Utwórz kopię quizu i dodaj do mojej biblioteki"}
-                </TooltipContent>
-              </Tooltip>
-            )}
+                      {isCopying ? "Kopiowanie..." : "Kopiuj do siebie"}
+                    </DropdownMenuItem>
+                  </>
+                )}
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </CardAction>
+        </CardHeader>
+        <QuizSettingsDialog
+          open={isSettingsOpen}
+          onOpenChange={onSettingsOpenChange}
+          quizId={quiz.id}
+        />
+        <CardContent className="space-y-2 text-sm">
+          <div className="space-y-1">
+            <div className="flex justify-between">
+              <span>Udzielone odpowiedzi</span>
+              <span className="font-medium text-emerald-600 dark:text-emerald-400">
+                {correctAnswersCount + wrongAnswersCount}
+              </span>
+            </div>
+            <div className="flex justify-between">
+              <span>Opanowane pytania</span>
+              <span className="text-muted-foreground">{masteredCount}</span>
+            </div>
+            <div className="flex justify-between">
+              <span>Liczba pytań</span>
+              <span className="font-medium text-emerald-600 dark:text-emerald-400">
+                {totalQuestions}
+              </span>
+            </div>
+            <div className="flex justify-between">
+              <span>Czas nauki</span>
+              <StudyTimeDisplay timerStore={timerStore} />
+            </div>
           </div>
-          <Tooltip>
-            <TooltipTrigger
-              render={
-                <Button
-                  variant="destructive"
-                  size="sm"
-                  onClick={resetProgress}
-                  disabled={totalQuestions === 0}
-                  aria-label="Resetuj postęp"
-                >
-                  <RotateCcwIcon className="size-4" /> Reset
-                </Button>
-              }
-            ></TooltipTrigger>
-            <TooltipContent>Resetuj postęp</TooltipContent>
-          </Tooltip>
-        </div>
-      </CardContent>
-    </Card>
+          <Progress
+            value={progressPercentage}
+            style={{
+              ["--bar-color" as never]: getProgressColor(progressPercentage),
+            }}
+            aria-label={`Postęp: ${Math.round(progressPercentage).toString()}% opanowanych pytań`}
+            className="**:data-[slot=progress-indicator]:bg-(--bar-color)"
+          />
+          <div className="flex items-center justify-between pt-2">
+            <div className="flex gap-2">
+              {canSearchInQuiz ? (
+                <Tooltip>
+                  <TooltipTrigger
+                    render={
+                      <ButtonLink
+                        size="icon-sm"
+                        variant="outline"
+                        href={`/search-in-quiz/${quiz.id}`}
+                        aria-label="Wyszukaj w quizie"
+                      >
+                        <SearchIcon />
+                      </ButtonLink>
+                    }
+                  ></TooltipTrigger>
+                  <TooltipContent>Wyszukaj w quizie</TooltipContent>
+                </Tooltip>
+              ) : null}
+              {canShare ? (
+                <Tooltip>
+                  <TooltipTrigger
+                    render={
+                      <Button
+                        size="icon-sm"
+                        variant="outline"
+                        onClick={() => {
+                          if (canEditQuiz) {
+                            setIsShareDialogOpen(true);
+                            return;
+                          }
+
+                          void navigator.clipboard
+                            .writeText(window.location.href)
+                            .then(() => {
+                              toast.success("Skopiowano link do quizu");
+                            });
+                        }}
+                        aria-label={
+                          canEditQuiz
+                            ? "Udostępnij quiz"
+                            : "Skopiuj link do quizu"
+                        }
+                      >
+                        {canEditQuiz ? <ShareIcon /> : <Link2Icon />}
+                      </Button>
+                    }
+                  ></TooltipTrigger>
+                  <TooltipContent>
+                    {canEditQuiz ? "Udostępnij quiz" : "Kopiuj link do quizu"}
+                  </TooltipContent>
+                </Tooltip>
+              ) : null}
+            </div>
+            <Tooltip>
+              <TooltipTrigger
+                render={
+                  <Button
+                    variant="destructive"
+                    size="sm"
+                    onClick={resetProgress}
+                    disabled={totalQuestions === 0}
+                    aria-label="Resetuj postęp"
+                  >
+                    <RotateCcwIcon /> Reset
+                  </Button>
+                }
+              ></TooltipTrigger>
+              <TooltipContent>Resetuj postęp</TooltipContent>
+            </Tooltip>
+          </div>
+        </CardContent>
+      </Card>
+      <ShareQuizDialog
+        open={isShareDialogOpen}
+        onOpenChange={setIsShareDialogOpen}
+        quiz={quiz}
+      />
+    </>
   );
 }
diff --git a/src/components/quiz/quiz-settings-dialog.tsx b/src/components/quiz/quiz-settings-dialog.tsx
new file mode 100644
index 00000000..6f49b315
--- /dev/null
+++ b/src/components/quiz/quiz-settings-dialog.tsx
@@ -0,0 +1,75 @@
+"use client";
+
+import { useQueryClient } from "@tanstack/react-query";
+import Link from "next/link";
+
+import { SettingsForm } from "@/components/profile/settings-form";
+import { quizDetailQueryKey } from "@/components/quiz/helpers/utils";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import {
+  useUpdateUserSettings,
+  useUserSettings,
+} from "@/hooks/use-user-settings";
+import { deriveSettings } from "@/lib/session-utils";
+import type { QuizWithUserProgress } from "@/types/quiz";
+import type { UserSettings } from "@/types/user";
+
+interface QuizSettingsDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  quizId: string;
+}
+
+export function QuizSettingsDialog({
+  open,
+  onOpenChange,
+  quizId,
+}: QuizSettingsDialogProps): React.JSX.Element {
+  const queryClient = useQueryClient();
+  const quizSettings = queryClient.getQueryData<QuizWithUserProgress>(
+    quizDetailQueryKey(quizId),
+  )?.user_settings;
+  const initialSettings = deriveSettings(quizSettings);
+  const {
+    data: settings,
+    isPending,
+    isPlaceholderData,
+  } = useUserSettings({
+    enabled: open,
+    placeholderData: initialSettings,
+  });
+  const updateUserSettings = useUpdateUserSettings({ quizId });
+
+  const handleSettingChange = <K extends keyof UserSettings>(
+    name: K,
+    value: UserSettings[K],
+  ) => {
+    updateUserSettings.mutate({ [name]: value });
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-xl">
+        <DialogHeader>
+          <DialogTitle>Ustawienia quizów</DialogTitle>
+          <DialogDescription>
+            Te ustawienia dotyczą wszystkich quizów, więcej opcji znajdziesz w{" "}
+            <Link href="/profile?tab=settings">profilu</Link>
+          </DialogDescription>
+        </DialogHeader>
+        <SettingsForm
+          settings={settings ?? initialSettings}
+          onSettingChange={handleSettingChange}
+          disabled={isPending || isPlaceholderData}
+          variant="plain"
+        />
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/src/components/quiz/share-quiz-dialog/share-quiz-dialog.tsx b/src/components/quiz/share-quiz-dialog/share-quiz-dialog.tsx
index 184f5fc0..1a89398f 100644
--- a/src/components/quiz/share-quiz-dialog/share-quiz-dialog.tsx
+++ b/src/components/quiz/share-quiz-dialog/share-quiz-dialog.tsx
@@ -390,10 +390,7 @@ export function ShareQuizDialog({
         </DialogHeader>
         {canShareQuiz ? (
           <div className="space-y-4">
-            <Popover
-              open={open ? searchQuery.length > 0 : undefined}
-              modal={false}
-            >
+            <Popover open={open ? searchQuery.length > 0 : false} modal={false}>
               <PopoverTrigger
                 nativeButton={false}
                 render={
diff --git a/src/components/quiz/stats/hourly-chart.tsx b/src/components/quiz/stats/hourly-chart.tsx
index a3757347..da129418 100644
--- a/src/components/quiz/stats/hourly-chart.tsx
+++ b/src/components/quiz/stats/hourly-chart.tsx
@@ -48,7 +48,7 @@ export function HourlyChart({ quizId, canViewAll }: HourlyChartProps) {
   return (
     <ChartCard
       title="Aktywność w ciągu doby"
-      description="Sesje wg godziny (czas serwera, UTC)"
+      description="Sesje wg godziny"
       scope={scope}
       onScopeChange={setScope}
       canViewAll={canViewAll}
@@ -56,10 +56,7 @@ export function HourlyChart({ quizId, canViewAll }: HourlyChartProps) {
       isRefreshing={isRefreshing}
       isEmpty={!hasData}
     >
-      <ChartContainer
-        config={chartConfig}
-        className="max-h-[350px] min-h-[250px]"
-      >
+      <ChartContainer config={chartConfig} className="max-h-87.5 min-h-62.5">
         <RadarChart data={chartData} accessibilityLayer>
           <ChartTooltip content={<ChartTooltipContent />} />
           <PolarAngleAxis
diff --git a/src/components/quiz/stats/stats-info-card.tsx b/src/components/quiz/stats/stats-info-card.tsx
index 5e8fdc19..d0f9d14e 100644
--- a/src/components/quiz/stats/stats-info-card.tsx
+++ b/src/components/quiz/stats/stats-info-card.tsx
@@ -77,7 +77,7 @@ export function StatsInfoCard({ quiz, lastActivityAt }: StatsInfoCardProps) {
         <InfoRow
           icon={UserIcon}
           label="Twórca"
-          value={(quiz.creator?.full_name ?? "") || "Anonimowy"}
+          value={quiz.creator?.full_name ?? "Anonimowy"}
         />
       </CardContent>
     </Card>
diff --git a/src/components/ui/alert-dialog.tsx b/src/components/ui/alert-dialog.tsx
index 6c1f988e..b60181d6 100644
--- a/src/components/ui/alert-dialog.tsx
+++ b/src/components/ui/alert-dialog.tsx
@@ -40,14 +40,16 @@ function AlertDialogOverlay({
 
 function AlertDialogContent({
   className,
+  overlayClassName,
   size = "default",
   ...props
 }: AlertDialogPrimitive.Popup.Props & {
+  overlayClassName?: string;
   size?: "default" | "sm";
 }) {
   return (
     <AlertDialogPortal>
-      <AlertDialogOverlay />
+      <AlertDialogOverlay className={overlayClassName} />
       <AlertDialogPrimitive.Popup
         data-slot="alert-dialog-content"
         data-size={size}
diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
index 7b6d1e73..8d1e379e 100644
--- a/src/components/ui/dialog.tsx
+++ b/src/components/ui/dialog.tsx
@@ -42,14 +42,16 @@ function DialogOverlay({
 function DialogContent({
   className,
   children,
+  overlayClassName,
   showCloseButton = true,
   ...props
 }: DialogPrimitive.Popup.Props & {
   showCloseButton?: boolean;
+  overlayClassName?: string;
 }) {
   return (
     <DialogPortal>
-      <DialogOverlay />
+      <DialogOverlay className={overlayClassName} />
       <DialogPrimitive.Popup
         data-slot="dialog-content"
         className={cn(
diff --git a/src/components/ui/field.tsx b/src/components/ui/field.tsx
new file mode 100644
index 00000000..d67fe2e7
--- /dev/null
+++ b/src/components/ui/field.tsx
@@ -0,0 +1,243 @@
+"use client";
+
+import { cva } from "class-variance-authority";
+import type { VariantProps } from "class-variance-authority";
+import { useMemo } from "react";
+
+import { Label } from "@/components/ui/label";
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+
+function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) {
+  return (
+    <fieldset
+      data-slot="field-set"
+      className={cn(
+        "flex flex-col gap-6 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function FieldLegend({
+  className,
+  variant = "legend",
+  ...props
+}: React.ComponentProps<"legend"> & { variant?: "legend" | "label" }) {
+  return (
+    <legend
+      data-slot="field-legend"
+      data-variant={variant}
+      className={cn(
+        "mb-3 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function FieldGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-group"
+      className={cn(
+        "group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+const fieldVariants = cva(
+  "group/field flex w-full gap-3 data-[invalid=true]:text-destructive",
+  {
+    variants: {
+      orientation: {
+        vertical: "flex-col *:w-full [&>.sr-only]:w-auto",
+        horizontal:
+          "flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+        responsive:
+          "flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+      },
+    },
+    defaultVariants: {
+      orientation: "vertical",
+    },
+  },
+);
+
+function Field({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="field"
+      data-orientation={orientation}
+      className={cn(fieldVariants({ orientation }), className)}
+      {...props}
+    />
+  );
+}
+
+function FieldContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-content"
+      className={cn(
+        "group/field-content flex flex-1 flex-col gap-1 leading-snug",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function FieldLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof Label>) {
+  return (
+    // eslint-disable-next-line jsx-a11y/label-has-associated-control
+    <Label
+      data-slot="field-label"
+      className={cn(
+        "group/field-label peer/field-label has-data-checked:border-primary/30 has-data-checked:bg-primary/5 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10 flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border *:data-[slot=field]:p-3",
+        "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function FieldTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-label"
+      className={cn(
+        "flex w-fit items-center gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function FieldDescription({ className, ...props }: React.ComponentProps<"p">) {
+  return (
+    <p
+      data-slot="field-description"
+      className={cn(
+        "text-muted-foreground text-left text-sm leading-normal font-normal group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5",
+        "last:mt-0 nth-last-2:-mt-1",
+        "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function FieldSeparator({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"div"> & {
+  children?: React.ReactNode;
+}) {
+  return (
+    <div
+      data-slot="field-separator"
+      data-content={Boolean(children)}
+      className={cn(
+        "relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2",
+        className,
+      )}
+      {...props}
+    >
+      <Separator className="absolute inset-0 top-1/2" />
+      {children == null ? null : (
+        <span
+          className="bg-background text-muted-foreground relative mx-auto block w-fit px-2"
+          data-slot="field-separator-content"
+        >
+          {children}
+        </span>
+      )}
+    </div>
+  );
+}
+
+function FieldError({
+  className,
+  children,
+  errors,
+  ...props
+}: React.ComponentProps<"div"> & {
+  errors?: ({ message?: string } | undefined)[];
+}) {
+  // eslint-disable-next-line @typescript-eslint/promise-function-async -- ReactNode can be a Promise since React 19, but it is not required to be one
+  const content = useMemo(() => {
+    if (children != null) {
+      return children;
+    }
+
+    if (errors == null || errors.length === 0) {
+      return null;
+    }
+
+    const uniqueErrors = [
+      ...new Map(errors.map((error) => [error?.message, error])).values(),
+    ];
+
+    if (uniqueErrors.length === 1) {
+      return uniqueErrors[0]?.message;
+    }
+
+    return (
+      <ul className="ml-4 flex list-disc flex-col gap-1">
+        {uniqueErrors.map(
+          (error, index) =>
+            error?.message != null &&
+            // eslint-disable-next-line react/no-array-index-key
+            error.message !== "" && <li key={index}>{error.message}</li>,
+        )}
+      </ul>
+    );
+  }, [children, errors]);
+
+  if (content == null) {
+    return null;
+  }
+
+  return (
+    <div
+      role="alert"
+      data-slot="field-error"
+      className={cn("text-destructive text-sm font-normal", className)}
+      {...props}
+    >
+      {content}
+    </div>
+  );
+}
+
+export {
+  Field,
+  FieldLabel,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLegend,
+  FieldSeparator,
+  FieldSet,
+  FieldContent,
+  FieldTitle,
+};
diff --git a/src/components/ui/separator.tsx b/src/components/ui/separator.tsx
new file mode 100644
index 00000000..e91a862f
--- /dev/null
+++ b/src/components/ui/separator.tsx
@@ -0,0 +1,25 @@
+"use client";
+
+import { Separator as SeparatorPrimitive } from "@base-ui/react/separator";
+
+import { cn } from "@/lib/utils";
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  ...props
+}: SeparatorPrimitive.Props) {
+  return (
+    <SeparatorPrimitive
+      data-slot="separator"
+      orientation={orientation}
+      className={cn(
+        "bg-border shrink-0 data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Separator };
diff --git a/src/hooks/use-auto-guest.ts b/src/hooks/use-auto-guest.ts
index 40400865..ea40d96f 100644
--- a/src/hooks/use-auto-guest.ts
+++ b/src/hooks/use-auto-guest.ts
@@ -9,6 +9,7 @@ const GUEST_EXCLUDED_ROUTES = [
   "/",
   "/login",
   "/auth",
+  "/oauth",
   "/login-otp",
   "/privacy-policy",
 ];
diff --git a/src/hooks/use-user-profile.ts b/src/hooks/use-user-profile.ts
new file mode 100644
index 00000000..af85187e
--- /dev/null
+++ b/src/hooks/use-user-profile.ts
@@ -0,0 +1,28 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+
+import { getUserService } from "@/services";
+import type { UserData } from "@/types/user";
+
+export const userProfileQueryKey = ["user-profile"] as const;
+
+export function useUserProfile({
+  placeholderData,
+}: { placeholderData?: UserData } = {}) {
+  return useQuery({
+    queryKey: userProfileQueryKey,
+    queryFn: async () => getUserService().getUserData(),
+    placeholderData,
+  });
+}
+
+export function useUpdateUserProfile() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (userData: Partial<UserData>) =>
+      getUserService().updateUserProfile(userData),
+    onSuccess: (updatedUserData) => {
+      queryClient.setQueryData<UserData>(userProfileQueryKey, updatedUserData);
+    },
+  });
+}
diff --git a/src/hooks/use-user-settings.ts b/src/hooks/use-user-settings.ts
new file mode 100644
index 00000000..9cda374a
--- /dev/null
+++ b/src/hooks/use-user-settings.ts
@@ -0,0 +1,134 @@
+import { useDebouncer } from "@tanstack/react-pacer";
+import type { QueryClient } from "@tanstack/react-query";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useCallback, useRef } from "react";
+import { toast } from "sonner";
+
+import { quizDetailQueryKey } from "@/components/quiz/helpers/utils";
+import { getUserService } from "@/services";
+import type { QuizWithUserProgress } from "@/types/quiz";
+import type { UserSettings } from "@/types/user";
+import { DEFAULT_USER_SETTINGS } from "@/types/user";
+
+export const userSettingsQueryKey = ["user-settings"] as const;
+const SETTINGS_UPDATE_DEBOUNCE_MS = 500;
+
+interface UpdateUserSettingsVariables {
+  settings: UserSettings;
+  version: number;
+}
+
+function setQuizSettingsInCache(
+  queryClient: QueryClient,
+  quizId: string | undefined,
+  settings: UserSettings,
+) {
+  if (quizId === undefined) {
+    return;
+  }
+
+  queryClient.setQueryData<QuizWithUserProgress>(
+    quizDetailQueryKey(quizId),
+    (previous) =>
+      previous == null ? previous : { ...previous, user_settings: settings },
+  );
+}
+
+export function useUserSettings({
+  enabled = true,
+  placeholderData,
+}: { enabled?: boolean; placeholderData?: UserSettings } = {}) {
+  return useQuery({
+    queryKey: userSettingsQueryKey,
+    queryFn: async () => getUserService().getUserSettings(),
+    enabled,
+    placeholderData,
+  });
+}
+
+export function useUpdateUserSettings({ quizId }: { quizId?: string } = {}) {
+  const queryClient = useQueryClient();
+  const versionRef = useRef(0);
+
+  const mutation = useMutation({
+    mutationFn: async ({ settings }: UpdateUserSettingsVariables) =>
+      getUserService().updateUserSettings(settings),
+    onError: (error, variables) => {
+      if (variables.version !== versionRef.current) {
+        return;
+      }
+
+      console.error("Error updating settings:", error);
+      toast.error("Wystąpił błąd podczas aktualizacji ustawień.");
+
+      void queryClient.invalidateQueries({ queryKey: userSettingsQueryKey });
+
+      if (quizId === undefined) {
+        void queryClient.invalidateQueries({ queryKey: ["quiz"] });
+      } else {
+        void queryClient.invalidateQueries({
+          queryKey: quizDetailQueryKey(quizId),
+        });
+      }
+    },
+    onSuccess: (updatedSettings, variables) => {
+      if (variables.version !== versionRef.current) {
+        return;
+      }
+
+      queryClient.setQueryData<UserSettings>(
+        userSettingsQueryKey,
+        updatedSettings,
+      );
+      setQuizSettingsInCache(queryClient, quizId, updatedSettings);
+
+      if (quizId === undefined) {
+        void queryClient.invalidateQueries({ queryKey: ["quiz"] });
+      }
+    },
+  });
+
+  const runMutation = mutation.mutate;
+
+  const settingsUpdateDebouncer = useDebouncer(
+    (variables: UpdateUserSettingsVariables) => {
+      runMutation(variables);
+    },
+    { wait: SETTINGS_UPDATE_DEBOUNCE_MS },
+  );
+
+  const mutate = useCallback(
+    (settings: Partial<UserSettings>) => {
+      versionRef.current += 1;
+      const version = versionRef.current;
+
+      void queryClient.cancelQueries({ queryKey: userSettingsQueryKey });
+
+      let optimisticSettings: UserSettings = DEFAULT_USER_SETTINGS;
+
+      queryClient.setQueryData<UserSettings>(
+        userSettingsQueryKey,
+        (previousSettings) => {
+          optimisticSettings = {
+            ...(previousSettings ?? DEFAULT_USER_SETTINGS),
+            ...settings,
+          };
+
+          return optimisticSettings;
+        },
+      );
+      setQuizSettingsInCache(queryClient, quizId, optimisticSettings);
+
+      settingsUpdateDebouncer.maybeExecute({
+        settings: optimisticSettings,
+        version,
+      });
+    },
+    [queryClient, quizId, settingsUpdateDebouncer],
+  );
+
+  return {
+    ...mutation,
+    mutate,
+  };
+}
diff --git a/src/services/oauth-authorization.service.ts b/src/services/oauth-authorization.service.ts
new file mode 100644
index 00000000..9af0bf67
--- /dev/null
+++ b/src/services/oauth-authorization.service.ts
@@ -0,0 +1,62 @@
+import { BaseApiService } from "./base-api.service";
+
+export type OAuthAuthorizationParameters = Record<string, string | string[]>;
+
+export interface OAuthScopeGrant {
+  value: string;
+  description: string;
+}
+
+export interface OAuthAuthorizationRequest {
+  client_id: string;
+  client_name: string;
+  client_uri: string;
+  logo_uri: string;
+  redirect_uri: string;
+  scopes: OAuthScopeGrant[];
+}
+
+export interface OAuthAuthorizationRedirect {
+  redirect_url: string;
+}
+
+export interface OAuthAuthorizationError {
+  error: string;
+}
+
+export type OAuthAuthorizationDetails =
+  | OAuthAuthorizationRequest
+  | OAuthAuthorizationRedirect
+  | OAuthAuthorizationError;
+
+export class OAuthAuthorizationService extends BaseApiService {
+  async getAuthorizationDetails(
+    authorizationParameters: OAuthAuthorizationParameters,
+  ): Promise<OAuthAuthorizationDetails> {
+    const response = await this.get<OAuthAuthorizationDetails>(
+      "oauth/authorize/request/",
+      authorizationParameters,
+    );
+    return response.data;
+  }
+
+  async completeAuthorization({
+    authorizationParameters,
+    scopes,
+    allow,
+  }: {
+    authorizationParameters: OAuthAuthorizationParameters;
+    scopes: string[];
+    allow: boolean;
+  }): Promise<OAuthAuthorizationRedirect> {
+    const response = await this.post<OAuthAuthorizationRedirect>(
+      "oauth/authorize/request/",
+      {
+        authorization_params: authorizationParameters,
+        scopes,
+        allow,
+      },
+    );
+    return response.data;
+  }
+}
diff --git a/src/services/quiz.service.ts b/src/services/quiz.service.ts
index 1264ed1a..5da9cd1e 100644
--- a/src/services/quiz.service.ts
+++ b/src/services/quiz.service.ts
@@ -4,7 +4,7 @@ import {
   ensureQuizCurrentQuestion,
 } from "@/lib/session-utils";
 import type { ApiPaginatedResponse } from "@/types/common";
-import type { Question } from "@/types/quiz";
+import type { Answer, Question } from "@/types/quiz";
 import type {
   HardestQuestion,
   HourlyEntry,
@@ -27,6 +27,37 @@ import type {
   User,
 } from "./types";
 
+type CreateQuestionAnswerData = Pick<
+  Answer,
+  "text" | "is_correct" | "image_url" | "image_upload"
+>;
+
+type CreateQuestionData = Pick<
+  Question,
+  | "text"
+  | "multiple"
+  | "image_url"
+  | "image_upload"
+  | "is_ai_generated"
+  | "explanation"
+> & {
+  answers: CreateQuestionAnswerData[];
+};
+
+function prepareCreateImageFields(
+  data: Pick<Question, "image_url" | "image_upload">,
+) {
+  if (data.image_upload != null && data.image_upload !== "") {
+    return { image_url: null, image_upload: data.image_upload };
+  }
+
+  if (data.image_url != null && data.image_url !== "") {
+    return { image_url: data.image_url, image_upload: null };
+  }
+
+  return { image_url: null, image_upload: null };
+}
+
 /**
  * Service for handling quiz-related API operations
  */
@@ -296,58 +327,60 @@ export class QuizService extends BaseApiService {
 
   async createQuestion(
     quizId: string,
-    data: {
-      text: string;
-      explanation?: string;
-      multiple: boolean;
-      is_ai_generated?: boolean;
-      answers: { text: string; is_correct: boolean }[];
-    },
+    data: CreateQuestionData,
   ): Promise<Question> {
+    const imageFields = prepareCreateImageFields(data);
     const response = await this.post<Question>("questions/", {
       quiz: quizId,
       text: data.text,
       explanation: data.explanation ?? "",
       multiple: data.multiple,
+      ...imageFields,
       question_type: 0,
       is_flashcard: false,
       is_markdown_enabled: true,
       is_ai_generated: data.is_ai_generated ?? false,
-      answers: data.answers.map((a, index) => ({
-        order: index + 1,
-        text: a.text,
-        is_correct: a.is_correct,
-      })),
+      answers: data.answers.map((a, index) => {
+        const answerImageFields = prepareCreateImageFields(a);
+        return {
+          order: index + 1,
+          text: a.text,
+          is_correct: a.is_correct,
+          ...answerImageFields,
+        };
+      }),
     });
     return response.data;
   }
 
   async bulkCreateQuestions(
     quizId: string,
-    questions: {
-      text: string;
-      explanation?: string;
-      multiple: boolean;
-      is_ai_generated?: boolean;
-      answers: { text: string; is_correct: boolean }[];
-    }[],
+    questions: CreateQuestionData[],
   ): Promise<Question[]> {
     const response = await this.post<Question[]>("questions/bulk-create/", {
       quiz: quizId,
-      questions: questions.map((q) => ({
-        text: q.text,
-        explanation: q.explanation ?? "",
-        multiple: q.multiple,
-        question_type: 0,
-        is_flashcard: false,
-        is_markdown_enabled: true,
-        is_ai_generated: q.is_ai_generated ?? false,
-        answers: q.answers.map((a, index) => ({
-          order: index + 1,
-          text: a.text,
-          is_correct: a.is_correct,
-        })),
-      })),
+      questions: questions.map((q) => {
+        const imageFields = prepareCreateImageFields(q);
+        return {
+          text: q.text,
+          explanation: q.explanation ?? "",
+          multiple: q.multiple,
+          ...imageFields,
+          question_type: 0,
+          is_flashcard: false,
+          is_markdown_enabled: true,
+          is_ai_generated: q.is_ai_generated ?? false,
+          answers: q.answers.map((a, index) => {
+            const answerImageFields = prepareCreateImageFields(a);
+            return {
+              order: index + 1,
+              text: a.text,
+              is_correct: a.is_correct,
+              ...answerImageFields,
+            };
+          }),
+        };
+      }),
     });
     return response.data;
   }
diff --git a/src/services/types.ts b/src/services/types.ts
index 6a692a41..54dfd805 100644
--- a/src/services/types.ts
+++ b/src/services/types.ts
@@ -10,6 +10,7 @@ export type {
   QuizWithUserProgress,
 } from "@/types/quiz";
 export type {
+  AuthorizedApp,
   User,
   Group,
   GradesData,
diff --git a/src/services/user.service.ts b/src/services/user.service.ts
index 78492c6e..f605712d 100644
--- a/src/services/user.service.ts
+++ b/src/services/user.service.ts
@@ -1,5 +1,10 @@
 import { BaseApiService } from "./base-api.service";
-import type { GradesData, UserData, UserSettings } from "./types";
+import type {
+  AuthorizedApp,
+  GradesData,
+  UserData,
+  UserSettings,
+} from "./types";
 
 /**
  * Service for handling user-related API operations
@@ -47,6 +52,21 @@ export class UserService extends BaseApiService {
     return response.data;
   }
 
+  /**
+   * Get OAuth applications authorized by the current user
+   */
+  async getAuthorizedApps(): Promise<AuthorizedApp[]> {
+    const response = await this.get<AuthorizedApp[]>("oauth/authorized-apps/");
+    return response.data;
+  }
+
+  /**
+   * Revoke an OAuth application's tokens
+   */
+  async deleteAuthorizedApp(clientId: string): Promise<void> {
+    await this.delete(`oauth/authorized-apps/${encodeURIComponent(clientId)}/`);
+  }
+
   /**
    * Generate OTP for login
    */
diff --git a/src/types/user.ts b/src/types/user.ts
index e4825277..98cab4bb 100644
--- a/src/types/user.ts
+++ b/src/types/user.ts
@@ -45,8 +45,19 @@ export interface UserSettings {
   notify_marketing: boolean;
 }
 
+export interface AuthorizedApp {
+  client_id: string;
+  oauth_application_id: string;
+  client_name: string;
+  client_uri: string;
+  logo_uri: string;
+  created: string;
+  scopes: string;
+}
+
 export interface SettingsFormProps {
   settings: UserSettings;
+  disabled?: boolean;
   onSettingChange: <K extends keyof UserSettings>(
     name: K,
     value: UserSettings[K],