diff --git a/frontend/src/pages/Settings.tsx b/frontend/src/pages/Settings.tsx
index f3c84e1..549a5b3 100644
--- a/frontend/src/pages/Settings.tsx
+++ b/frontend/src/pages/Settings.tsx
@@ -1,4 +1,12 @@
-import { Input, Button, CircularProgress } from "@mui/joy";
+import {
+  Input,
+  Button,
+  CircularProgress,
+  Typography,
+  Sheet,
+  Chip,
+  Divider,
+} from "@mui/joy";
 import { useForm } from "@tanstack/react-form";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import Cookies from "js-cookie";
@@ -44,34 +52,105 @@ export const Settings = () => {
 
   return (
     <>
-      {settingsPending ? (
-        <CircularProgress />
-      ) : (
-        <form
-          onSubmit={(e) => {
-            e.preventDefault();
-            form.handleSubmit();
-          }}
-        >
-          <form.Field name="app-name">
-            {(field) => (
-              <Input
-                value={field.state.value}
-                onChange={(e) => field.handleChange(e.target.value)}
-              />
-            )}
-          </form.Field>
-          <form.Field name="currency">
-            {(field) => (
-              <Input
-                value={field.state.value}
-                onChange={(e) => field.handleChange(e.target.value)}
-              />
-            )}
-          </form.Field>
-          <Button type="submit">{t("submit")}</Button>
-        </form>
-      )}
+      <div className="space-y-6">
+        <div className="flex flex-wrap items-center gap-3">
+          <div className="space-y-1">
+            <Typography level="h2" className="text-slate-900">
+              {t("settings")}
+            </Typography>
+            <Typography level="body-lg" className="text-slate-500">
+              {t("settings-sub")}
+            </Typography>
+          </div>
+          <Chip
+            variant="soft"
+            color="primary"
+            className="ml-auto rounded-full px-3"
+          >
+            {t("preferences")}
+          </Chip>
+        </div>
+      </div>
+
+      <Sheet className="mt-6 rounded-3xl border border-white/70 bg-white/80 p-6 shadow-[0_24px_60px_rgba(12,38,78,0.12)] backdrop-blur">
+        {settingsPending ? (
+          <div className="flex items-center justify-center py-16">
+            <CircularProgress size="lg" />
+          </div>
+        ) : (
+          <form
+            className="space-y-6"
+            onSubmit={(e) => {
+              e.preventDefault();
+              form.handleSubmit();
+            }}
+          >
+            <div className="grid gap-6 lg:grid-cols-[1.1fr_0.9fr]">
+              <div className="space-y-5">
+                <div className="space-y-1">
+                  <Typography level="title-md" className="text-slate-900">
+                    {t("app-name")}
+                  </Typography>
+                  <Typography level="body-sm" className="text-slate-500">
+                    {t("app-name-sub")}
+                  </Typography>
+                  <form.Field name="app-name">
+                    {(field) => (
+                      <Input
+                        value={field.state.value}
+                        onChange={(e) => field.handleChange(e.target.value)}
+                        size="lg"
+                        variant="outlined"
+                        placeholder="Stockhome"
+                        className="rounded-2xl bg-white/90 shadow-[0_10px_24px_rgba(15,23,42,0.08)]"
+                      />
+                    )}
+                  </form.Field>
+                </div>
+                <div className="space-y-1">
+                  <Typography level="title-md" className="text-slate-900">
+                    {t("currency")}
+                  </Typography>
+                  <Typography level="body-sm" className="text-slate-500">
+                    {t("currency-sub")}
+                  </Typography>
+                  <form.Field name="currency">
+                    {(field) => (
+                      <Input
+                        value={field.state.value}
+                        onChange={(e) => field.handleChange(e.target.value)}
+                        size="lg"
+                        variant="outlined"
+                        placeholder="EUR"
+                        className="rounded-2xl bg-white/90 shadow-[0_10px_24px_rgba(15,23,42,0.08)]"
+                      />
+                    )}
+                  </form.Field>
+                </div>
+              </div>
+              <div className="rounded-2xl border border-white/70 bg-linear-to-br from-[#f7fbff] via-[#f2f6fb] to-[#eef3f9] p-5 shadow-[0_16px_40px_rgba(12,38,78,0.08)]">
+                <Typography level="title-lg" className="text-slate-900">
+                  {t("quick-tips")}
+                </Typography>
+                <Divider className="my-3" />
+                <div className="space-y-3 text-md text-slate-600">
+                  <p>{t("quick-tips-1")}</p>
+                  <p>{t("quick-tips-2")}</p>
+                </div>
+              </div>
+            </div>
+            <div className="flex flex-wrap items-center justify-between gap-3">
+              <Button
+                type="submit"
+                size="lg"
+                className="rounded-2xl bg-[#0b6bcb] text-white shadow-[0_16px_36px_rgba(11,107,203,0.35)] transition hover:-translate-y-0.5 hover:bg-[#095aa7]"
+              >
+                {t("save")}
+              </Button>
+            </div>
+          </form>
+        )}
+      </Sheet>
     </>
   );
 };
diff --git a/frontend/src/utils/i18n/locales/en/en.json b/frontend/src/utils/i18n/locales/en/en.json
index e05444a..2b32690 100644
--- a/frontend/src/utils/i18n/locales/en/en.json
+++ b/frontend/src/utils/i18n/locales/en/en.json
@@ -29,5 +29,14 @@
     "amount": "Amount",
     "inventory-subtitle": "Here you can inspect all of your stored items.",
     "add-product": "Add product",
-    "add-product-subtitle": "Here you can enter information for a new product."
+    "add-product-subtitle": "Here you can enter information for a new product.",
+    "app-name": "App name",
+    "app-name-sub": "Displayed in the sidebar and login screen.",
+    "currency": "Currency",
+    "currency-sub": "Used for pricing across inventory views.",
+    "quick-tips": "Quick tips",
+    "quick-tips-1": "Update the app name to personalize the sidebar and login header.",
+    "quick-tips-2": "Choose a currency code that matches your pricing display, e.g. EUR, CHF, or USD.",
+    "settings-sub": "Manage your app preferences and store defaults.",
+    "preferences": "Preferences"
 }
\ No newline at end of file