diff --git a/.env.example b/.env.example
new file mode 100644
index 0000000..c9dd148
--- /dev/null
+++ b/.env.example
@@ -0,0 +1,16 @@
+# Example environment variables for this project
+# Copy this file to `.env.local` (or `.env`) and fill in real values before running the app.
+
+# The URI of the Solid container used by the demo Community Solid Server
+# Default for local dev (Community Solid Server started by `npm run start:css`)
+NEXT_PUBLIC_BASE_URI="http://localhost:3001/"
+
+# The manifest resource file used by the app (relative to the container root)
+NEXT_PUBLIC_MANIFEST_RESOURCE_URI="resource.ttl"
+
+# Admin WebID used for booting the demo (replace with your WebID)
+NEXT_PUBLIC_ADMIN_WEBID="https://id.inrupt.com/your-webid"
+
+# Notes:
+# - Never commit secrets. This file is safe to commit because it contains placeholders only.
+# - For private credentials (if any), keep them in `.env` or `.env.local` which are ignored by git.
diff --git a/.env.local b/.env.local
deleted file mode 100644
index 42b6b63..0000000
--- a/.env.local
+++ /dev/null
@@ -1,14 +0,0 @@
-# This file contains environment variables for running the application locally.
-# When running in a different environment, they must be set in a manner appropriate to that environment.
-
-# This is the URI of the Solid container that will be used by this application.
-# The manifest file will be created here, as will thumbnail images.
-NEXT_PUBLIC_BASE_URI = "http://localhost:3001/"
-
-# This is the name of the manifest resource used by this application.
-NEXT_PUBLIC_MANIFEST_RESOURCE_URI = "resource.ttl"
-
-# This is the WebID of the administrator for this application.
-# The WebID specified here must already exist for it to be usable with this application.
-# ⚠️ This malue must be changed before running the application even in a production environment.
-NEXT_PUBLIC_ADMIN_WEBID = "http://example.com/person"
diff --git a/.gitignore b/.gitignore
index 4101393..dbd1089 100644
--- a/.gitignore
+++ b/.gitignore
@@ -41,3 +41,4 @@ yarn-error.log*
 *.tsbuildinfo
 next-env.d.ts
 /.vs
+.env.local
diff --git a/README.md b/README.md
index 17da552..0f9bf1f 100644
--- a/README.md
+++ b/README.md
@@ -11,7 +11,16 @@ Therefore, you need a [WebID](https://solid.github.io/webid-profile/) to correct
 
 A WebID is a URL you control and can use to sign in to Solid Apps.
 
-Before running the app, set the `NEXT_PUBLIC_ADMIN_WEBID` environment variable in .env.local.
+Before running the app, set the `NEXT_PUBLIC_ADMIN_WEBID` environment variable in `.env.local`.
+
+Environment variables
+---------------------
+
+This project includes a `.env.example` file with the placeholders for environment variables used by the app (for example `NEXT_PUBLIC_BASE_URI`, `NEXT_PUBLIC_MANIFEST_RESOURCE_URI`, and `NEXT_PUBLIC_ADMIN_WEBID`).
+
+Copy the example to a local env file and edit values before running the app
+
+Note: `.env` and `.env.local` are ignored by git by default (see `.gitignore`), so you can keep private credentials locally without committing them. The `.env.example` file is safe to commit and documents which variables are required.
 
 ### Creating a WebID
 
diff --git a/package-lock.json b/package-lock.json
index 5009092..1492fd4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,7 +23,7 @@
                 "@types/react": "^19",
                 "@types/react-dom": "^19",
                 "@types/shexj": "^2",
-                "concurrently": "^9.2.1",
+                "concurrently": "^9",
                 "nodemon": "^3",
                 "typescript": "^5"
             }
@@ -8897,6 +8897,7 @@
             "integrity": "sha512-hHkbU/eoO3EG5/MZkuFSKmYqPbSVk5byPFa3e7y/8TybHiLMACgI8seVYlicwk7H5K/rI2px9xrQp/C+AUDTiQ==",
             "dev": true,
             "license": "MIT",
+            "peer": true,
             "dependencies": {
                 "csstype": "^3.0.2"
             }
@@ -12500,6 +12501,7 @@
             "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
             "dev": true,
             "license": "MIT",
+            "peer": true,
             "engines": {
                 "node": ">=12"
             },
@@ -13262,6 +13264,7 @@
             "resolved": "https://registry.npmjs.org/react/-/react-19.1.0.tgz",
             "integrity": "sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg==",
             "license": "MIT",
+            "peer": true,
             "engines": {
                 "node": ">=0.10.0"
             }
@@ -13271,6 +13274,7 @@
             "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.0.tgz",
             "integrity": "sha512-Xs1hdnE+DyKgeHJeJznQmYMIBG3TKIHJJT95Q58nHLSrElKlGQqDTR2HQ9fx5CN/Gk6Vh/kupBTDLU11/nDk/g==",
             "license": "MIT",
+            "peer": true,
             "dependencies": {
                 "scheduler": "^0.26.0"
             },
diff --git a/src/components/ui/ListEditor.tsx b/src/components/ui/ListEditor.tsx
index e87d205..107ca72 100644
--- a/src/components/ui/ListEditor.tsx
+++ b/src/components/ui/ListEditor.tsx
@@ -12,6 +12,7 @@ import { List, Item } from "../../ldo/Model.typings";
 import { Config } from "../../Config";
 import { ListViewer } from "../../components/ui/ListViewer";
 import { fetchList } from "../../fetchList";
+import style from "../../styles/ListEditorStyle.module.css";
 
 export function ListEditor() {
     const [newName, setNewName] = useState("");
@@ -31,12 +32,12 @@ export function ListEditor() {
             <>
                 <ListViewer data={list} deleteHandler={removeItem} />
 
-                <form onSubmit={addItem}>
-                    <fieldset>
-                        <legend>new item</legend>
+                <form onSubmit={addItem} className={style.form_cont}>
+                    <fieldset className={style.fieldset_cont}>
+                        <legend>New Item</legend>
                         <div>
                             <label>
-                                <span>name</span>
+                                <span>Name</span>
                                 <input
                                     required
                                     value={newName}
@@ -46,7 +47,7 @@ export function ListEditor() {
                         </div>
                         <div>
                             <label>
-                                <span>description</span>
+                                <span>Description</span>
                                 <input
                                     required
                                     value={newDescription}
@@ -57,8 +58,8 @@ export function ListEditor() {
                             </label>
                         </div>
                         <div>
-                            <label>
-                                <span>featured</span>
+                            <label className={style.checkbox_label}>
+                                <span>Featured</span>
                                 <input
                                     type="checkbox"
                                     checked={newFeatured}
@@ -70,7 +71,7 @@ export function ListEditor() {
                         </div>
                         <div>
                             <label>
-                                <span>website</span>
+                                <span>Website</span>
                                 <input
                                     required
                                     type="url"
@@ -83,7 +84,7 @@ export function ListEditor() {
                         </div>
                         <div>
                             <label>
-                                <span>thumbnail</span>
+                                <span>Thumbnail</span>
                                 <input
                                     required
                                     type="file"
diff --git a/src/styles/ListEditorStyle.module.css b/src/styles/ListEditorStyle.module.css
new file mode 100644
index 0000000..299104a
--- /dev/null
+++ b/src/styles/ListEditorStyle.module.css
@@ -0,0 +1,45 @@
+.form_cont {
+    background-color: white;
+    padding: 1rem;
+    border-radius: 8px;
+}
+
+.fieldset_cont {
+    max-width: 600px;
+    margin: 0 auto;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    border: none;
+    border-radius: 8px;
+    padding: 20px 16px;
+}
+
+.checkbox_label {
+    display: flex;
+    flex-direction: row !important;
+    align-items: center;
+    gap: 8px;
+}
+
+.fieldset_cont label {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+.fieldset_cont label span {
+    font-weight: 600;
+    color: #333;
+}
+
+.fieldset_cont input[type="text"],
+.fieldset_cont input[type="url"],
+.fieldset_cont input[type="file"] {
+    padding: 8px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    font-size: 1rem;
+}
\ No newline at end of file