diff --git a/.env.example b/.env.example
index 2c3ef81..6fba3c7 100644
--- a/.env.example
+++ b/.env.example
@@ -2,7 +2,7 @@
 # FRONTEND CONFIGURATION
 # =============================================================================
 BASE_URL=http://localhost:3000
-API_URL=http://localhost:8080/api
+API_URL=http://localhost:8080
 
 # =============================================================================
 # BACKEND CONFIGURATION
diff --git a/README.md b/README.md
index b0d464b..4ecff88 100644
--- a/README.md
+++ b/README.md
@@ -48,8 +48,8 @@ services:
     ports:
       - "3000:3000"
     environment:
-      - NUXT_PUBLIC_BASE_URL=http://localhost:3000
-      - NUXT_PUBLIC_API_URL=http://localhost:8080/api
+      - BASE_URL=http://localhost:3000
+      - API_URL=http://localhost:8080
     depends_on:
       - backend
 
@@ -78,8 +78,8 @@ docker run -d \
 ```bash
 docker run -d \
   -p 3000:3000 \
-  -e NUXT_PUBLIC_BASE_URL=http://localhost:3000 \
-  -e NUXT_PUBLIC_API_URL=http://localhost:8080/api \
+  -e BASE_URL=http://localhost:3000 \
+  -e API_URL=http://localhost:8080 \
   ghcr.io/formeraapp/formera-frontend:latest
 ```
 
@@ -99,8 +99,8 @@ cd frontend && yarn install && yarn dev
 
 | Variable | Description | Default |
 |----------|-------------|---------|
-| `NUXT_PUBLIC_BASE_URL` | Public URL of the frontend | `http://localhost:3000` |
-| `NUXT_PUBLIC_API_URL` | Backend API URL | `http://localhost:8080/api` |
+| `BASE_URL` | Public URL of the frontend | `http://localhost:3000` |
+| `API_URL` | Backend base URL | `http://localhost:8080` |
 
 ### Backend
 
@@ -176,8 +176,8 @@ services:
     image: ghcr.io/formeraapp/formera-frontend:latest
     restart: unless-stopped
     environment:
-      - NUXT_PUBLIC_BASE_URL=https://forms.example.com
-      - NUXT_PUBLIC_API_URL=https://forms.example.com/api
+      - BASE_URL=https://forms.example.com
+      - API_URL=https://forms.example.com
     labels:
       - "traefik.enable=true"
       - "traefik.http.routers.formera.rule=Host(`forms.example.com`)"
diff --git a/backend/cmd/server/main.go b/backend/cmd/server/main.go
index 3be996e..261bb15 100644
--- a/backend/cmd/server/main.go
+++ b/backend/cmd/server/main.go
@@ -179,9 +179,9 @@ func initStorage(cfg *config.Config) (storage.Storage, error) {
 
 		return s3Store, nil
 	default:
-		// Build full URL for local storage (ApiURL + LocalURL path)
-		apiURL := cfg.ApiURL + cfg.Storage.LocalURL
-		return storage.NewLocalStorage(cfg.Storage.LocalPath, apiURL)
+		// ApiURL is the backend base URL (e.g., http://localhost:8080)
+		uploadsURL := cfg.ApiURL + cfg.Storage.LocalURL
+		return storage.NewLocalStorage(cfg.Storage.LocalPath, uploadsURL)
 	}
 }
 
diff --git a/backend/internal/config/config.go b/backend/internal/config/config.go
index ce18cbe..ecebd58 100644
--- a/backend/internal/config/config.go
+++ b/backend/internal/config/config.go
@@ -32,7 +32,7 @@ func init() {
 type Config struct {
 	Port       string
 	BaseURL    string // Frontend URL (e.g., http://localhost:3000)
-	ApiURL     string // Backend API URL (e.g., http://localhost:8080/api)
+	ApiURL     string // Backend base URL (e.g., http://localhost:8080)
 	DBPath     string
 	JWTSecret  string
 	CorsOrigin string
@@ -100,7 +100,7 @@ func Load() *Config {
 
 	port := getEnv("PORT", "8080")
 	baseURL := getEnv("BASE_URL", "http://localhost:3000")
-	apiURL := getEnv("API_URL", "http://localhost:"+port+"/api")
+	apiURL := getEnv("API_URL", "http://localhost:"+port)
 
 	// CORS_ORIGIN defaults to BASE_URL if not set (same-origin deployment)
 	corsOrigin := getEnv("CORS_ORIGIN", "")
diff --git a/backend/internal/handlers/form.go b/backend/internal/handlers/form.go
index 8a80d77..d96a542 100644
--- a/backend/internal/handlers/form.go
+++ b/backend/internal/handlers/form.go
@@ -243,7 +243,8 @@ func (h *FormHandler) Update(c *gin.Context) {
 	if req.Slug != nil {
 		slug := *req.Slug
 		if slug == "" {
-			form.Slug = ""
+			// When slug is cleared, use first 8 chars of ID (form accessible via ID)
+			form.Slug = form.ID[:8]
 		} else {
 			slug = normalizeSlug(slug)
 			if !isValidSlug(slug) {
diff --git a/backend/internal/handlers/setup.go b/backend/internal/handlers/setup.go
index 8823400..b8d6956 100644
--- a/backend/internal/handlers/setup.go
+++ b/backend/internal/handlers/setup.go
@@ -27,6 +27,8 @@ type SetupStatusResponse struct {
 	LogoShowText       bool               `json:"logo_show_text"`
 	FaviconURL         string             `json:"favicon_url"`
 	LoginBackgroundURL string             `json:"login_background_url"`
+	Language           string             `json:"language"`
+	Theme              string             `json:"theme"`
 }
 
 type SetupRequest struct {
@@ -56,6 +58,8 @@ func (h *SetupHandler) GetStatus(c *gin.Context) {
 		LogoShowText:       settings.LogoShowText,
 		FaviconURL:         settings.FaviconURL,
 		LoginBackgroundURL: settings.LoginBackgroundURL,
+		Language:           settings.Language,
+		Theme:              settings.Theme,
 	})
 }
 
@@ -130,6 +134,8 @@ type UpdateSettingsRequest struct {
 	LogoShowText       *bool               `json:"logo_show_text"`
 	FaviconURL         *string             `json:"favicon_url"`
 	LoginBackgroundURL *string             `json:"login_background_url"`
+	Language           string              `json:"language"`
+	Theme              string              `json:"theme"`
 }
 
 func (h *SetupHandler) UpdateSettings(c *gin.Context) {
@@ -166,6 +172,12 @@ func (h *SetupHandler) UpdateSettings(c *gin.Context) {
 	if req.LoginBackgroundURL != nil {
 		settings.LoginBackgroundURL = *req.LoginBackgroundURL
 	}
+	if req.Language != "" {
+		settings.Language = req.Language
+	}
+	if req.Theme != "" {
+		settings.Theme = req.Theme
+	}
 
 	database.DB.Save(&settings)
 
diff --git a/backend/internal/models/form.go b/backend/internal/models/form.go
index fb86192..85047d1 100644
--- a/backend/internal/models/form.go
+++ b/backend/internal/models/form.go
@@ -157,6 +157,11 @@ type Form struct {
 
 func (f *Form) BeforeCreate(tx *gorm.DB) error {
 	f.ID = uuid.New().String()
+	// Auto-generate unique slug from ID if not set
+	if f.Slug == "" {
+		// Use first 8 characters of UUID as slug (unique enough)
+		f.Slug = f.ID[:8]
+	}
 	if f.Status == "" {
 		f.Status = FormStatusDraft
 	}
diff --git a/backend/internal/models/settings.go b/backend/internal/models/settings.go
index f9cf981..e27d606 100644
--- a/backend/internal/models/settings.go
+++ b/backend/internal/models/settings.go
@@ -49,8 +49,11 @@ type Settings struct {
 	LogoShowText       bool   `json:"logo_show_text" gorm:"default:true"`
 	FaviconURL         string `json:"favicon_url"`
 	LoginBackgroundURL string `json:"login_background_url"`
-	CreatedAt          time.Time `json:"created_at"`
-	UpdatedAt          time.Time `json:"updated_at"`
+	// Language and Theme
+	Language string `json:"language" gorm:"default:en"`
+	Theme    string `json:"theme" gorm:"default:system"` // "light", "dark", or "system"
+	CreatedAt time.Time `json:"created_at"`
+	UpdatedAt time.Time `json:"updated_at"`
 }
 
 func GetDefaultSettings() *Settings {
@@ -65,5 +68,7 @@ func GetDefaultSettings() *Settings {
 		LogoShowText:       true,
 		FaviconURL:         "",
 		LoginBackgroundURL: "",
+		Language:           "en",
+		Theme:              "system",
 	}
 }
diff --git a/frontend/Dockerfile b/frontend/Dockerfile
index 11c6a1a..8963788 100644
--- a/frontend/Dockerfile
+++ b/frontend/Dockerfile
@@ -20,10 +20,13 @@ RUN apk add --no-cache ca-certificates tzdata
 WORKDIR /app
 
 COPY --from=builder /app/.output ./.output
+COPY docker-entrypoint.sh /docker-entrypoint.sh
 
-# Environment variables (override with NUXT_PUBLIC_BASE_URL and NUXT_PUBLIC_API_URL)
-ENV NUXT_PUBLIC_BASE_URL=http://localhost:3000
-ENV NUXT_PUBLIC_API_URL=http://localhost:8080/api
+RUN chmod +x /docker-entrypoint.sh
+
+# Environment variables - use simple BASE_URL and API_URL
+ENV BASE_URL=http://localhost:3000
+ENV API_URL=http://localhost:8080
 ENV NITRO_PORT=3000
 
 EXPOSE 3000
@@ -31,4 +34,5 @@ EXPOSE 3000
 RUN addgroup -S app && adduser -S app -G app \
   && chown -R app:app /app
 USER app
+ENTRYPOINT ["/docker-entrypoint.sh"]
 CMD ["node", ".output/server/index.mjs"]
diff --git a/frontend/app/app.vue b/frontend/app/app.vue
index 355a7e3..2ab3e21 100644
--- a/frontend/app/app.vue
+++ b/frontend/app/app.vue
@@ -1,14 +1,3 @@
-<script lang="ts" setup>
-onMounted(() => {
-	const theme = localStorage.getItem("theme");
-	if (theme) {
-		document.documentElement.setAttribute("data-theme", theme);
-	} else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
-		document.documentElement.setAttribute("data-theme", "dark");
-	}
-});
-</script>
-
 <template>
 	<div style="z-index: 9998">
 		<NuxtLayout>
diff --git a/frontend/app/components/Builder/FormSettings.vue b/frontend/app/components/Builder/FormSettings.vue
index 54201ce..c07abe1 100644
--- a/frontend/app/components/Builder/FormSettings.vue
+++ b/frontend/app/components/Builder/FormSettings.vue
@@ -65,8 +65,7 @@ const updateDesign = (key: string, value: unknown) => {
 };
 
 const handleSlugInput = (event: Event) => {
-	const input = event.target as HTMLInputElement;
-	emit("slugInput", input.value);
+	emit("slugInput", event);
 };
 
 const handleCopyLink = async () => {
diff --git a/frontend/app/components/ThemeToggle.vue b/frontend/app/components/ThemeToggle.vue
deleted file mode 100644
index 7f9de47..0000000
--- a/frontend/app/components/ThemeToggle.vue
+++ /dev/null
@@ -1,33 +0,0 @@
-<script lang="ts" setup>
-const { t } = useI18n();
-const themeStore = useThemeStore();
-</script>
-
-<template>
-	<button class="toggle" :aria-label="themeStore.theme === 'light' ? t('theme.enableDark') : t('theme.enableLight')" :title="themeStore.theme === 'light' ? t('theme.dark') : t('theme.light')" @click="themeStore.toggleTheme">
-		<span class="sr-only">Theme Toggle</span>
-
-		<UISysIcon icon="fa-solid fa-moon" v-if="themeStore.theme === 'light'"></UISysIcon>
-		<UISysIcon icon="fa-solid fa-sun" v-else></UISysIcon>
-	</button>
-</template>
-
-<style scoped>
-.toggle {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	padding: 0.375rem;
-	color: var(--text-secondary);
-	cursor: pointer;
-	background: none;
-	border: none;
-	border-radius: var(--radius);
-	transition: all 0.2s;
-}
-
-.toggle:hover {
-	color: var(--primary);
-	background-color: var(--surface-hover);
-}
-</style>
diff --git a/frontend/app/composables/useApi.ts b/frontend/app/composables/useApi.ts
index ae39fe7..5ba1c84 100644
--- a/frontend/app/composables/useApi.ts
+++ b/frontend/app/composables/useApi.ts
@@ -9,12 +9,13 @@ export const getFileUrl = (pathOrUrl: string | undefined | null): string => {
 	const apiUrl = config.public.apiUrl as string;
 
 	const cleanPath = pathOrUrl.startsWith("/") ? pathOrUrl.slice(1) : pathOrUrl;
-	return `${apiUrl}/files/${cleanPath}`;
+	return `${apiUrl}/uploads/${cleanPath}`;
 };
 
 export const useApi = () => {
 	const config = useRuntimeConfig();
 	const apiUrl = config.public.apiUrl as string;
+	const apiBase = `${apiUrl}/api`;
 
 	const getToken = () => {
 		return localStorage.getItem("token");
@@ -28,7 +29,7 @@ export const useApi = () => {
 			...options.headers,
 		};
 
-		const response = await fetch(`${apiUrl}${endpoint}`, {
+		const response = await fetch(`${apiBase}${endpoint}`, {
 			...options,
 			headers,
 		});
@@ -112,11 +113,11 @@ export const useApi = () => {
 		stats: (formId: string): Promise<FormStats> => request(`/forms/${formId}/stats`),
 		exportCSV: (formId: string): string => {
 			const token = getToken();
-			return `${apiUrl}/forms/${formId}/export/csv?token=${token}`;
+			return `${apiBase}/forms/${formId}/export/csv?token=${token}`;
 		},
 		exportJSON: (formId: string): string => {
 			const token = getToken();
-			return `${apiUrl}/forms/${formId}/export/json?token=${token}`;
+			return `${apiBase}/forms/${formId}/export/json?token=${token}`;
 		},
 	};
 
@@ -169,7 +170,7 @@ export const useApi = () => {
 
 			let response: Response;
 			try {
-				response = await fetch(`${apiUrl}/uploads/image`, {
+				response = await fetch(`${apiBase}/uploads/image`, {
 					method: "POST",
 					headers: {
 						Authorization: `Bearer ${token}`,
@@ -194,7 +195,7 @@ export const useApi = () => {
 
 			let response: Response;
 			try {
-				response = await fetch(`${apiUrl}/uploads/file`, {
+				response = await fetch(`${apiBase}/uploads/file`, {
 					method: "POST",
 					headers: {
 						...(token ? { Authorization: `Bearer ${token}` } : {}),
diff --git a/frontend/app/composables/useAutoSave.ts b/frontend/app/composables/useAutoSave.ts
index c215bce..36e9cbe 100644
--- a/frontend/app/composables/useAutoSave.ts
+++ b/frontend/app/composables/useAutoSave.ts
@@ -2,11 +2,12 @@ interface AutoSaveOptions {
 	delay?: number;
 	onSave: () => Promise<void>;
 	onError?: (error: unknown) => void;
+	onNoChanges?: () => void;
 }
 
 export const useAutoSave = (options: AutoSaveOptions) => {
 	const { t } = useI18n();
-	const { delay = 2000, onSave, onError } = options;
+	const { delay = 2000, onSave, onError, onNoChanges } = options;
 
 	const isSaving = ref(false);
 	const isDirty = ref(false);
@@ -15,8 +16,12 @@ export const useAutoSave = (options: AutoSaveOptions) => {
 
 	let saveTimeout: ReturnType<typeof setTimeout> | null = null;
 
-	const save = async () => {
-		if (!isDirty.value || isSaving.value) return;
+	const save = async (manual = false) => {
+		if (isSaving.value) return;
+		if (!isDirty.value) {
+			if (manual) onNoChanges?.();
+			return;
+		}
 
 		if (saveTimeout) {
 			clearTimeout(saveTimeout);
@@ -58,7 +63,7 @@ export const useAutoSave = (options: AutoSaveOptions) => {
 			clearTimeout(saveTimeout);
 			saveTimeout = null;
 		}
-		await save();
+		await save(true);
 	};
 
 	const cancel = () => {
diff --git a/frontend/app/layouts/default.vue b/frontend/app/layouts/default.vue
index 438439e..ebf3c98 100644
--- a/frontend/app/layouts/default.vue
+++ b/frontend/app/layouts/default.vue
@@ -62,7 +62,6 @@
 					</div>
 
 					<div class="action-buttons">
-						<ThemeToggle />
 						<NuxtLink class="action-btn" :to="localePath('/settings')" :title="$t('nav.settings')">
 							<UISysIcon icon="fa-solid fa-gear" />
 						</NuxtLink>
@@ -103,7 +102,6 @@
 					</nav>
 
 					<div class="mobile-footer">
-						<ThemeToggle />
 						<button class="mobile-logout" @click="handleLogout">
 							<UISysIcon icon="fa-solid fa-right-from-bracket" />
 							<span>{{ $t("auth.logout") }}</span>
diff --git a/frontend/app/pages/forms/[id]/edit.vue b/frontend/app/pages/forms/[id]/edit.vue
index 7fd2e36..90c7f2d 100644
--- a/frontend/app/pages/forms/[id]/edit.vue
+++ b/frontend/app/pages/forms/[id]/edit.vue
@@ -59,6 +59,7 @@ const onSlugInput = (event: Event) => {
 	const normalized = normalizeSlug(input.value);
 	slugInput.value = normalized;
 	checkSlug(normalized);
+	markDirty();
 };
 
 const selectedField = computed(() => fields.value.find((f) => f.id === selectedFieldId.value));
@@ -94,6 +95,9 @@ const { isSaving, isDirty, statusText, markDirty, saveNow } = useAutoSave({
 	onError: () => {
 		toastStore.error(t("forms.editor.saveFailed"), t("forms.editor.saveFailedMessage"));
 	},
+	onNoChanges: () => {
+		toastStore.info(t("forms.editor.noChanges"), t("forms.editor.noChangesMessage"));
+	},
 });
 
 const loadForm = async () => {
@@ -137,11 +141,11 @@ const loadForm = async () => {
 };
 
 const addField = (type: FieldType) => {
-	const meta = FIELD_META[type];
 	const newField: FormField = {
 		id: `field_${Date.now()}`,
 		type,
-		label: meta.label,
+		label: t(`fields.${type}.label`),
+		description: t(`fields.${type}.description`),
 		required: false,
 		order: fields.value.length,
 		options: ["select", "radio", "checkbox", "dropdown"].includes(type) ? ["Option 1", "Option 2"] : undefined,
@@ -334,8 +338,8 @@ const updateFormFromSettings = (updatedForm: Form) => {
 				:password-input="passwordInput"
 				:form-link="formLink"
 				@update:form="updateFormFromSettings"
-				@update:password-enabled="passwordEnabled = $event"
-				@update:password-input="passwordInput = $event"
+				@update:password-enabled="passwordEnabled = $event; markDirty()"
+				@update:password-input="passwordInput = $event; markDirty()"
 				@slug-input="onSlugInput"
 				@mark-dirty="markDirty"
 			/>
@@ -495,7 +499,7 @@ const updateFormFromSettings = (updatedForm: Form) => {
 
 .settings-view {
 	flex: 1;
-	overflow: hidden;
+	overflow-y: auto;
 }
 
 .sidebar {
diff --git a/frontend/app/pages/settings.vue b/frontend/app/pages/settings.vue
index 900f3d4..78cde5c 100644
--- a/frontend/app/pages/settings.vue
+++ b/frontend/app/pages/settings.vue
@@ -1,12 +1,23 @@
 <script lang="ts" setup>
 import type { FooterLink, UserRole } from "~~/shared/types";
 
-const { t, locale } = useI18n();
+const { t, locale, setLocale, locales } = useI18n();
 const { settingsApi, usersApi, uploadApi } = useApi();
 const authStore = useAuthStore();
 const setupStore = useSetupStore();
+const themeStore = useThemeStore();
 const localePath = useLocalePath();
 
+// Available locales for the dropdown
+const availableLocales = computed(() =>
+	locales.value.map((l) => {
+		if (typeof l === "string") {
+			return { code: l, name: l };
+		}
+		return { code: l.code, name: l.name || l.code };
+	})
+);
+
 // Active tab
 const activeTab = ref<"general" | "design" | "footer" | "users">("general");
 
@@ -15,6 +26,7 @@ const settings = ref<Settings | null>(null);
 const isLoading = ref(true);
 const isSaving = ref(false);
 const message = ref<{ type: "success" | "error"; text: string } | null>(null);
+const loadError = ref<"permission" | "generic" | null>(null);
 
 // Footer links state
 const footerLinks = ref<FooterLink[]>([]);
@@ -29,6 +41,10 @@ const isUploadingLogo = ref(false);
 const isUploadingFavicon = ref(false);
 const isUploadingLoginBackground = ref(false);
 
+// Language and Theme state
+const selectedLanguage = ref("en");
+const selectedTheme = ref<"light" | "dark" | "system">("system");
+
 // Users state
 const users = ref<User[]>([]);
 const isLoadingUsers = ref(false);
@@ -53,8 +69,17 @@ const loadSettings = async () => {
 		logoShowText.value = data.logo_show_text ?? true;
 		faviconURL.value = data.favicon_url || "";
 		loginBackgroundURL.value = data.login_background_url || "";
+		selectedLanguage.value = data.language || "en";
+		selectedTheme.value = data.theme || "system";
+		loadError.value = null;
 	} catch (error) {
 		console.error("Failed to load settings:", error);
+		// Check if it's a permission error (403 Forbidden)
+		if (error instanceof Error && error.message.toLowerCase().includes("forbidden")) {
+			loadError.value = "permission";
+		} else {
+			loadError.value = "generic";
+		}
 	} finally {
 		isLoading.value = false;
 	}
@@ -86,7 +111,15 @@ const handleSave = async () => {
 			logo_show_text: logoShowText.value,
 			favicon_url: faviconURL.value,
 			login_background_url: loginBackgroundURL.value,
+			language: selectedLanguage.value,
+			theme: selectedTheme.value,
 		});
+		// Apply language change immediately
+		if (selectedLanguage.value !== locale.value) {
+			setLocale(selectedLanguage.value);
+		}
+		// Apply theme change immediately
+		themeStore.setPreference(selectedTheme.value);
 		settings.value = updated;
 		message.value = { type: "success", text: t("settings.saved") };
 		// Refresh setup store to update globally
@@ -281,8 +314,12 @@ onMounted(() => {
 			<p>{{ $t("settings.loadingSettings") }}</p>
 		</div>
 
-		<div v-else-if="!settings" class="error-state">
-			<p>{{ $t("settings.loadError") }}</p>
+		<div v-else-if="loadError" class="error-state">
+			<UISysIcon :icon="loadError === 'permission' ? 'fa-solid fa-lock' : 'fa-solid fa-exclamation-circle'" />
+			<p>{{ loadError === 'permission' ? $t("settings.noPermission") : $t("settings.loadError") }}</p>
+			<NuxtLink v-if="loadError === 'permission'" class="btn btn-secondary" :to="localePath('/forms')">
+				{{ $t("common.back") }}
+			</NuxtLink>
 		</div>
 
 		<template v-else>
@@ -340,6 +377,35 @@ onMounted(() => {
 					</div>
 				</div>
 
+				<div class="card">
+					<div class="card-header">
+						<UISysIcon icon="fa-solid fa-globe" />
+						<h2>{{ $t("settings.general.localization") }}</h2>
+					</div>
+					<div class="card-body">
+						<div class="form-row">
+							<div class="form-group">
+								<label class="label" for="language">{{ $t("settings.general.language") }}</label>
+								<select id="language" v-model="selectedLanguage" class="input">
+									<option v-for="loc in availableLocales" :key="loc.code" :value="loc.code">
+										{{ loc.name }}
+									</option>
+								</select>
+								<p class="form-hint">{{ $t("settings.general.languageHint") }}</p>
+							</div>
+							<div class="form-group">
+								<label class="label" for="theme">{{ $t("settings.general.theme") }}</label>
+								<select id="theme" v-model="selectedTheme" class="input">
+									<option value="system">{{ $t("settings.general.themeSystem") }}</option>
+									<option value="light">{{ $t("settings.general.themeLight") }}</option>
+									<option value="dark">{{ $t("settings.general.themeDark") }}</option>
+								</select>
+								<p class="form-hint">{{ $t("settings.general.themeHint") }}</p>
+							</div>
+						</div>
+					</div>
+				</div>
+
 				<div class="card">
 					<div class="card-header">
 						<UISysIcon icon="fa-solid fa-shield" />
@@ -686,10 +752,24 @@ onMounted(() => {
 .loading,
 .error-state {
 	display: flex;
+	flex-direction: column;
+	gap: 1rem;
 	justify-content: center;
 	align-items: center;
 	min-height: 200px;
 	color: var(--text-secondary);
+	text-align: center;
+	padding: 2rem;
+}
+
+.error-state i {
+	font-size: 2.5rem;
+	opacity: 0.6;
+}
+
+.error-state p {
+	max-width: 400px;
+	line-height: 1.5;
 }
 
 /* Page Header */
@@ -847,6 +927,12 @@ onMounted(() => {
 }
 
 /* Form */
+.form-row {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	gap: 1rem;
+}
+
 .form-group {
 	margin-bottom: 1.25rem;
 }
@@ -855,6 +941,10 @@ onMounted(() => {
 	margin-bottom: 0;
 }
 
+.form-row .form-group {
+	margin-bottom: 0;
+}
+
 /* Toggle Switch */
 .toggle-label {
 	display: flex;
diff --git a/frontend/app/plugins/00.pina.client.ts b/frontend/app/plugins/00.pina.client.ts
index ea2e4fb..24ab1d5 100644
--- a/frontend/app/plugins/00.pina.client.ts
+++ b/frontend/app/plugins/00.pina.client.ts
@@ -1,13 +1,19 @@
-export default defineNuxtPlugin(async () => {
+export default defineNuxtPlugin(async (nuxtApp) => {
 	const authStore = useAuthStore();
 	const setupStore = useSetupStore();
 	const themeStore = useThemeStore();
 
-	// Initialize theme (sync)
-	themeStore.init();
-
 	// Load setup status and auth in parallel (blocking - wait before navigation)
 	await Promise.all([setupStore.loadStatus(), authStore.init()]).catch((error) => {
 		console.error("Failed to initialize stores:", error);
 	});
+
+	// Initialize theme AFTER setupStore has loaded (to use backend settings)
+	themeStore.init();
+
+	// Apply language from settings
+	const { setLocale, locale } = nuxtApp.$i18n;
+	if (setupStore.language && setupStore.language !== locale.value) {
+		setLocale(setupStore.language);
+	}
 });
diff --git a/frontend/app/plugins/settings-head.server.ts b/frontend/app/plugins/settings-head.server.ts
index bd7821f..a971112 100644
--- a/frontend/app/plugins/settings-head.server.ts
+++ b/frontend/app/plugins/settings-head.server.ts
@@ -23,13 +23,17 @@ export default defineNuxtPlugin(async () => {
 	let faviconUrl = defaults.favicon;
 	let logoUrl = "";
 	let appName = defaults.title;
+	let language = "en";
+	let theme: "light" | "dark" | "system" = "system";
 
 	try {
 		const response = await $fetch<{
 			app_name: string;
 			favicon_url: string;
 			logo_url: string;
-		}>(`${apiUrl}/setup/status`);
+			language: string;
+			theme: "light" | "dark" | "system";
+		}>(`${apiUrl}/api/setup/status`);
 
 		if (response.favicon_url) {
 			faviconUrl = getServerFileUrl(response.favicon_url, apiUrl);
@@ -40,10 +44,27 @@ export default defineNuxtPlugin(async () => {
 		if (response.app_name) {
 			appName = response.app_name;
 		}
+		if (response.language) {
+			language = response.language;
+		}
+		if (response.theme) {
+			theme = response.theme;
+		}
 	} catch {
 		// API not available during build, use defaults
 	}
 
+	// For SSR, we can only apply light/dark directly
+	// "system" preference requires client-side JS, so default to light on server
+	const effectiveTheme = theme === "system" ? "light" : theme;
+
+	// Inline script to immediately apply system theme preference before paint
+	// This prevents flash when theme is set to "system"
+	const themeScript =
+		theme === "system"
+			? `(function(){var d=document.documentElement;if(window.matchMedia('(prefers-color-scheme:dark)').matches){d.setAttribute('data-theme','dark')}})();`
+			: "";
+
 	useSeoMeta({
 		description: defaults.description,
 		ogTitle: appName,
@@ -59,7 +80,8 @@ export default defineNuxtPlugin(async () => {
 
 	useHead({
 		htmlAttrs: {
-			lang: "en",
+			lang: language,
+			"data-theme": effectiveTheme,
 		},
 		title: appName,
 		link: [
@@ -72,6 +94,8 @@ export default defineNuxtPlugin(async () => {
 			{ name: "keywords", content: defaults.keywords },
 		],
 		script: [
+			// Inline script to apply system theme before paint (prevents flash)
+			...(themeScript ? [{ innerHTML: themeScript, tagPosition: "head" as const }] : []),
 			{
 				src: "https://kit.fontawesome.com/b0b0028fa2.js",
 				crossorigin: "anonymous",
diff --git a/frontend/app/store/setup.ts b/frontend/app/store/setup.ts
index 353812c..86ac6c7 100644
--- a/frontend/app/store/setup.ts
+++ b/frontend/app/store/setup.ts
@@ -11,6 +11,8 @@ export const useSetupStore = defineStore("setup", () => {
 	const logoShowText = ref(true);
 	const faviconURL = ref("");
 	const loginBackgroundURL = ref("");
+	const language = ref("en");
+	const theme = ref<"light" | "dark" | "system">("system");
 	const isLoading = ref(true); // Start with loading true to prevent hydration mismatch
 
 	const logoDisplayURL = computed(() => getFileUrl(logoURL.value));
@@ -38,6 +40,22 @@ export const useSetupStore = defineStore("setup", () => {
 		return `#${((1 << 24) | (R << 16) | (G << 8) | B).toString(16).slice(1)}`;
 	};
 
+	const applyTheme = (themeValue: "light" | "dark" | "system") => {
+		if (import.meta.client) {
+			let effectiveTheme: "light" | "dark";
+			if (themeValue === "system") {
+				effectiveTheme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+			} else {
+				effectiveTheme = themeValue;
+			}
+			// Only apply if different from current (prevents flash during hydration)
+			const currentTheme = document.documentElement.getAttribute("data-theme");
+			if (currentTheme !== effectiveTheme) {
+				document.documentElement.setAttribute("data-theme", effectiveTheme);
+			}
+		}
+	};
+
 	const loadStatus = async () => {
 		try {
 			const data = await setupApi.getStatus();
@@ -50,7 +68,10 @@ export const useSetupStore = defineStore("setup", () => {
 			logoShowText.value = data.logo_show_text ?? true;
 			faviconURL.value = data.favicon_url || "";
 			loginBackgroundURL.value = data.login_background_url || "";
+			language.value = data.language || "en";
+			theme.value = data.theme || "system";
 			applyPrimaryColor(primaryColor.value);
+			applyTheme(theme.value);
 		} catch (error) {
 			console.error("Failed to load setup status:", error);
 			setupRequired.value = false;
@@ -62,6 +83,8 @@ export const useSetupStore = defineStore("setup", () => {
 			logoShowText.value = true;
 			faviconURL.value = "";
 			loginBackgroundURL.value = "";
+			language.value = "en";
+			theme.value = "system";
 		} finally {
 			isLoading.value = false;
 		}
@@ -86,6 +109,8 @@ export const useSetupStore = defineStore("setup", () => {
 		logoShowText,
 		faviconURL,
 		loginBackgroundURL,
+		language,
+		theme,
 		logoDisplayURL,
 		faviconDisplayURL,
 		loginBackgroundDisplayURL,
@@ -93,5 +118,6 @@ export const useSetupStore = defineStore("setup", () => {
 		loadStatus,
 		refresh,
 		applyPrimaryColor,
+		applyTheme,
 	};
 });
diff --git a/frontend/app/store/theme.ts b/frontend/app/store/theme.ts
index a4fb050..e7a965a 100644
--- a/frontend/app/store/theme.ts
+++ b/frontend/app/store/theme.ts
@@ -1,19 +1,40 @@
 import { defineStore } from "pinia";
 
 export type Theme = "light" | "dark";
+export type ThemePreference = "light" | "dark" | "system";
 
 export const useThemeStore = defineStore("theme", () => {
 	const theme = ref<Theme>("light");
+	const preference = ref<ThemePreference>("system");
+
+	const getEffectiveTheme = (pref: ThemePreference): Theme => {
+		if (pref === "system") {
+			return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+		}
+		return pref;
+	};
 
 	const init = () => {
 		if (import.meta.client) {
-			const stored = localStorage.getItem("theme") as Theme | null;
-			if (stored) {
-				theme.value = stored;
-			} else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
-				theme.value = "dark";
+			// Get preference from setupStore (loaded from backend)
+			const setupStore = useSetupStore();
+			preference.value = setupStore.theme || "system";
+			theme.value = getEffectiveTheme(preference.value);
+
+			// Only apply theme if it differs from what SSR already set
+			// This prevents flash during hydration
+			const currentTheme = document.documentElement.getAttribute("data-theme");
+			if (currentTheme !== theme.value) {
+				applyTheme();
 			}
-			applyTheme();
+
+			// Listen for system preference changes
+			window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", (e) => {
+				if (preference.value === "system") {
+					theme.value = e.matches ? "dark" : "light";
+					applyTheme();
+				}
+			});
 		}
 	};
 
@@ -25,24 +46,28 @@ export const useThemeStore = defineStore("theme", () => {
 
 	const toggleTheme = () => {
 		theme.value = theme.value === "light" ? "dark" : "light";
-		if (import.meta.client) {
-			localStorage.setItem("theme", theme.value);
-		}
+		preference.value = theme.value;
 		applyTheme();
 	};
 
 	const setTheme = (newTheme: Theme) => {
 		theme.value = newTheme;
-		if (import.meta.client) {
-			localStorage.setItem("theme", newTheme);
-		}
+		preference.value = newTheme;
+		applyTheme();
+	};
+
+	const setPreference = (newPref: ThemePreference) => {
+		preference.value = newPref;
+		theme.value = getEffectiveTheme(newPref);
 		applyTheme();
 	};
 
 	return {
 		theme,
+		preference,
 		init,
 		toggleTheme,
 		setTheme,
+		setPreference,
 	};
 });
diff --git a/frontend/docker-entrypoint.sh b/frontend/docker-entrypoint.sh
new file mode 100644
index 0000000..3a717f6
--- /dev/null
+++ b/frontend/docker-entrypoint.sh
@@ -0,0 +1,7 @@
+#!/bin/sh
+
+# Map simple env vars to Nuxt public env vars
+export NUXT_PUBLIC_BASE_URL="${BASE_URL:-${NUXT_PUBLIC_BASE_URL:-http://localhost:3000}}"
+export NUXT_PUBLIC_API_URL="${API_URL:-${NUXT_PUBLIC_API_URL:-http://localhost:8080}}"
+
+exec "$@"
diff --git a/frontend/i18n/locales/de.json b/frontend/i18n/locales/de.json
index 8f2e13f..e72c6de 100644
--- a/frontend/i18n/locales/de.json
+++ b/frontend/i18n/locales/de.json
@@ -56,6 +56,7 @@
 		"saveError": "Fehler beim Speichern",
 		"loadingSettings": "Einstellungen werden geladen...",
 		"loadError": "Einstellungen konnten nicht geladen werden.",
+		"noPermission": "Sie haben keine Berechtigung auf die Einstellungen zuzugreifen. Nur Administratoren können Einstellungen verwalten.",
 		"tabs": {
 			"general": "Allgemein",
 			"design": "Design",
@@ -66,6 +67,14 @@
 			"application": "Anwendung",
 			"appName": "App-Name",
 			"appNameHint": "Der Name wird im Header und Footer angezeigt.",
+			"localization": "Sprache & Design",
+			"language": "Sprache",
+			"languageHint": "Wählen Sie die Standardsprache für die Anwendung.",
+			"theme": "Farbschema",
+			"themeHint": "Wählen Sie das Farbschema für die Benutzeroberfläche.",
+			"themeSystem": "System",
+			"themeLight": "Hell",
+			"themeDark": "Dunkel",
 			"security": "Sicherheit",
 			"allowRegistration": "Öffentliche Registrierung erlauben",
 			"allowRegistrationHint": "Wenn deaktiviert, können sich keine neuen Benutzer selbst registrieren."
@@ -202,6 +211,8 @@
 			"savedMessage": "Änderungen wurden erfolgreich gespeichert",
 			"saveFailed": "Speichern fehlgeschlagen",
 			"saveFailedMessage": "Änderungen konnten nicht gespeichert werden",
+			"noChanges": "Keine Änderungen",
+			"noChangesMessage": "Es gibt keine ungespeicherten Änderungen",
 			"tabs": {
 				"designer": "Designer",
 				"settings": "Einstellungen"
diff --git a/frontend/i18n/locales/en.json b/frontend/i18n/locales/en.json
index fd1a7b7..5d259ab 100644
--- a/frontend/i18n/locales/en.json
+++ b/frontend/i18n/locales/en.json
@@ -56,6 +56,7 @@
 		"saveError": "Error saving settings",
 		"loadingSettings": "Loading settings...",
 		"loadError": "Settings could not be loaded.",
+		"noPermission": "You don't have permission to access settings. Only administrators can manage settings.",
 		"tabs": {
 			"general": "General",
 			"design": "Design",
@@ -66,6 +67,14 @@
 			"application": "Application",
 			"appName": "App Name",
 			"appNameHint": "The name is displayed in the header and footer.",
+			"localization": "Language & Theme",
+			"language": "Language",
+			"languageHint": "Select the default language for the application.",
+			"theme": "Theme",
+			"themeHint": "Choose the color scheme for the interface.",
+			"themeSystem": "System",
+			"themeLight": "Light",
+			"themeDark": "Dark",
 			"security": "Security",
 			"allowRegistration": "Allow public registration",
 			"allowRegistrationHint": "If disabled, new users cannot register themselves."
@@ -202,6 +211,8 @@
 			"savedMessage": "Changes saved successfully",
 			"saveFailed": "Save failed",
 			"saveFailedMessage": "Changes could not be saved",
+			"noChanges": "No changes",
+			"noChangesMessage": "There are no unsaved changes",
 			"tabs": {
 				"designer": "Designer",
 				"settings": "Settings"
diff --git a/frontend/nuxt.config.ts b/frontend/nuxt.config.ts
index 56d5a41..faec3e9 100644
--- a/frontend/nuxt.config.ts
+++ b/frontend/nuxt.config.ts
@@ -112,7 +112,7 @@ export default defineNuxtConfig({
 		public: {
 			// Override at runtime with NUXT_PUBLIC_BASE_URL and NUXT_PUBLIC_API_URL
 			baseUrl: "http://localhost:3000",
-			apiUrl: "http://localhost:8080/api",
+			apiUrl: "http://localhost:8080",
 			indexable: true,
 			VERSION: pkg.version,
 			defaults: {
diff --git a/frontend/shared/types/index.ts b/frontend/shared/types/index.ts
index 9ea0d64..3206782 100644
--- a/frontend/shared/types/index.ts
+++ b/frontend/shared/types/index.ts
@@ -224,6 +224,8 @@ export interface SetupStatus {
 	logo_show_text: boolean;
 	favicon_url: string;
 	login_background_url: string;
+	language: string;
+	theme: "light" | "dark" | "system";
 }
 
 export interface Settings {
@@ -237,6 +239,8 @@ export interface Settings {
 	logo_show_text: boolean;
 	favicon_url: string;
 	login_background_url: string;
+	language: string;
+	theme: "light" | "dark" | "system";
 	created_at: string;
 	updated_at: string;
 }