diff --git a/app/Http/Controllers/Admin/NodeController.php b/app/Http/Controllers/Admin/NodeController.php
index a2391e6..85e59c6 100644
--- a/app/Http/Controllers/Admin/NodeController.php
+++ b/app/Http/Controllers/Admin/NodeController.php
@@ -94,7 +94,9 @@ public function store(StoreNodeRequest $request, Subject $subject)
                 ->firstOrFail();
         }
 
-        $slug = Str::slug($validated['name']);
+        $slug = !empty($validated['slug'])
+            ? Str::slug($validated['slug'])
+            : Str::slug($validated['name']);
 
         $exists = Node::where('subject_id', $subject->id)
             ->where('parent_id', $parent?->id)
@@ -104,7 +106,7 @@ public function store(StoreNodeRequest $request, Subject $subject)
         if ($exists) {
             return back()
                 ->withErrors([
-                    'name' => 'Folder already exists in this location.',
+                    'slug' => 'Folder with this slug already exists in this location.',
                 ])
                 ->withInput();
         }
@@ -143,8 +145,14 @@ public function update(UpdateNodeRequest $request, Subject $subject, Node $node)
 
         if (array_key_exists('name', $validated)) {
             $node->name = $validated['name'];
+        }
+
+        if (array_key_exists('name', $validated) || array_key_exists('slug', $validated) || array_key_exists('parent_id', $validated)) {
+            $rawSlug = !empty($validated['slug'])
+                ? $validated['slug']
+                : ($validated['name'] ?? $node->name);
 
-            $slug = Str::slug($validated['name']);
+            $slug = Str::slug($rawSlug);
 
             $parentId = array_key_exists('parent_id', $validated)
                 ? $validated['parent_id']
@@ -158,7 +166,7 @@ public function update(UpdateNodeRequest $request, Subject $subject, Node $node)
 
             if ($exists) {
                 return back()->withErrors([
-                    'name' => 'Folder already exists in this location.',
+                    'slug' => 'Folder with this slug already exists in this location.',
                 ])->withInput();
             }
 
diff --git a/app/Http/Requests/Node/StoreNodeRequest.php b/app/Http/Requests/Node/StoreNodeRequest.php
index 3e2e85e..e0c50b1 100644
--- a/app/Http/Requests/Node/StoreNodeRequest.php
+++ b/app/Http/Requests/Node/StoreNodeRequest.php
@@ -24,6 +24,7 @@ public function rules(): array
     {
         return [
             'name' => ['required', 'string', 'max:200', 'min:2'],
+            'slug' => ['nullable', 'string', 'max:200'],
             'parent_id' => ['nullable', 'integer'],
             'sort_order' => ['sometimes', 'integer'],
             'redirect' => ['nullable', 'string'],
diff --git a/app/Http/Requests/Node/UpdateNodeRequest.php b/app/Http/Requests/Node/UpdateNodeRequest.php
index 6a5fe4b..7322a5b 100644
--- a/app/Http/Requests/Node/UpdateNodeRequest.php
+++ b/app/Http/Requests/Node/UpdateNodeRequest.php
@@ -23,8 +23,8 @@ public function authorize(): bool
     public function rules(): array
     {
         return [
-
             'name'       => ['sometimes', 'required', 'string', 'max:200', 'min:2'],
+            'slug'       => ['sometimes', 'nullable', 'string', 'max:200'],
             'parent_id'  => ['sometimes', 'nullable', 'integer'],
             'sort_order' => ['sometimes', 'nullable', 'integer'],
             'redirect'   => ['nullable', 'string'],
diff --git a/resources/js/pages/admin/NodeCreateOrEdit.vue b/resources/js/pages/admin/NodeCreateOrEdit.vue
index 454e2ee..b25081d 100644
--- a/resources/js/pages/admin/NodeCreateOrEdit.vue
+++ b/resources/js/pages/admin/NodeCreateOrEdit.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { useForm } from '@inertiajs/vue3';
-import { FolderOpen } from 'lucide-vue-next';
+import { FolderOpen, ChevronDown, ChevronRight } from 'lucide-vue-next';
+import { ref } from 'vue';
 
 const props = defineProps({
     subject: Object,
@@ -9,8 +10,11 @@ const props = defineProps({
     node: Object,
 });
 
+const showSlug = ref(false);
+
 const form = useForm({
     name: props.node?.name || '',
+    slug: props.node?.slug || '',
     parent_id: props.node?.parent_id || props.parent?.id || null,
     sort_order: props.node?.sort_order ?? 0,
     redirect: props.redirect,
@@ -18,8 +22,8 @@ const form = useForm({
 
 function getInputClass(hasError) {
     return hasError
-        ? 'border-rose-500 focus:ring-rose-500/20'
-        : 'border-slate-300 dark:border-gray-600 focus:ring-blue-500/20 focus:border-blue-500';
+        ? 'border-rose-500 focus:ring-rose-500/20 bg-white dark:bg-gray-900 text-slate-900 dark:text-gray-100 placeholder:text-slate-400 dark:placeholder:text-gray-500'
+        : 'border-slate-300 dark:border-gray-600 bg-white dark:bg-gray-900 text-slate-900 dark:text-gray-100 placeholder:text-slate-400 dark:placeholder:text-gray-500 focus:ring-blue-500/20 focus:border-blue-500';
 }
 
 const submitForm = () => {
@@ -160,6 +164,66 @@ const goBack = () => {
                             Lower numbers will appear first in the list.
                         </p>
                     </div>
+
+                    <div class="pt-1 md:col-span-3">
+                        <button
+                            type="button"
+                            @click="showSlug = !showSlug"
+                            class="inline-flex items-center gap-1 text-xs font-semibold text-slate-500 transition hover:text-blue-600 dark:text-gray-400 dark:hover:text-blue-400"
+                        >
+                            <component
+                                :is="
+                                    showSlug || form.errors.slug
+                                        ? ChevronDown
+                                        : ChevronRight
+                                "
+                                class="h-3.5 w-3.5"
+                            />
+                            <span
+                                >Change slug?
+                                <span
+                                    class="font-normal text-slate-400 dark:text-gray-500"
+                                    >(advanced)</span
+                                ></span
+                            >
+                        </button>
+
+                        <div
+                            v-if="showSlug || form.errors.slug"
+                            class="mt-3 space-y-1.5 rounded-xl border border-slate-200/80 bg-slate-50/50 p-4 dark:border-gray-700 dark:bg-gray-800/50"
+                        >
+                            <label
+                                for="slug"
+                                class="block text-xs font-semibold text-slate-700 dark:text-gray-300"
+                            >
+                                Custom URL Slug
+                                <span
+                                    class="text-[11px] font-normal text-slate-400 dark:text-gray-500"
+                                    >(Optional)</span
+                                >
+                            </label>
+                            <input
+                                v-model="form.slug"
+                                type="text"
+                                id="slug"
+                                placeholder="e.g., chapter-1-intro (leave blank to auto-generate from name)"
+                                class="w-full rounded-lg border px-3.5 py-2 text-sm transition outline-none"
+                                :class="getInputClass(form.errors.slug)"
+                            />
+                            <p
+                                v-if="form.errors.slug"
+                                class="mt-1 text-xs text-rose-600"
+                            >
+                                {{ form.errors.slug }}
+                            </p>
+                            <p
+                                class="text-[11px] text-slate-400 dark:text-gray-500"
+                            >
+                                Leave empty to automatically generate from the
+                                folder name.
+                            </p>
+                        </div>
+                    </div>
                 </div>
 
                 <div