diff --git a/.gitignore b/.gitignore
index 753389d1..de893d0f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,45 +1,46 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-node_modules
-.pnp
-.pnp.js
-.pnpm-store
-package-lock.json
-
-# testing
-/coverage
-
-# next.js
-/.next
-/out
-
-# production
-/build
-/public/script.js
-/geo
-/dist
-/generated
-/src/generated
-
-# misc
-.DS_Store
-.idea
-.yarn
-*.iml
-*.log
-.vscode
-.tool-versions
-
-# debug
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-# local env files
-.env
-.env.*
-*.env.*
-
-*.dev.yml
-
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+node_modules
+.pnp
+.pnp.js
+.pnpm-store
+package-lock.json
+
+# testing
+/coverage
+
+# next.js
+/.next
+/out
+
+# production
+/build
+/public/script.js
+/geo
+/dist
+/generated
+/src/generated
+pm2.yml
+
+# misc
+.DS_Store
+.idea
+.yarn
+*.iml
+*.log
+.vscode
+.tool-versions
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env
+.env.*
+*.env.*
+
+*.dev.yml
+
diff --git a/src/app/(main)/links/LinkEditForm.tsx b/src/app/(main)/links/LinkEditForm.tsx
index 6c10c7f0..e9ad18f4 100644
--- a/src/app/(main)/links/LinkEditForm.tsx
+++ b/src/app/(main)/links/LinkEditForm.tsx
@@ -4,13 +4,14 @@ import {
   Form,
   FormField,
   FormSubmitButton,
+  Grid,
   Icon,
   Label,
   Loading,
   Row,
   TextField,
 } from '@umami/react-zen';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { useConfig, useLinkQuery, useMessages } from '@/components/hooks';
 import { useUpdateQuery } from '@/components/hooks/queries/useUpdateQuery';
 import { RefreshCw } from '@/components/icons';
@@ -42,7 +43,7 @@ export function LinkEditForm({
   const { linksUrl } = useConfig();
   const hostUrl = linksUrl || LINKS_URL;
   const { data, isLoading } = useLinkQuery(linkId);
-  const [slug, setSlug] = useState(generateId());
+  const [defaultSlug] = useState(generateId());
 
   const handleSubmit = async (data: any) => {
     await mutateAsync(data, {
@@ -55,14 +56,6 @@ export function LinkEditForm({
     });
   };
 
-  const handleSlug = () => {
-    const slug = generateId();
-
-    setSlug(slug);
-
-    return slug;
-  };
-
   const checkUrl = (url: string) => {
     if (!isValidUrl(url)) {
       return formatMessage(labels.invalidUrl);
@@ -70,19 +63,19 @@ export function LinkEditForm({
     return true;
   };
 
-  useEffect(() => {
-    if (data) {
-      setSlug(data.slug);
-    }
-  }, [data]);
-
   if (linkId && isLoading) {
     return <Loading placement="absolute" />;
   }
 
   return (
-    <Form onSubmit={handleSubmit} error={getErrorMessage(error)} defaultValues={{ slug, ...data }}>
-      {({ setValue }) => {
+    <Form
+      onSubmit={handleSubmit}
+      error={getErrorMessage(error)}
+      defaultValues={{ slug: defaultSlug, ...data }}
+    >
+      {({ setValue, watch }) => {
+        const slug = watch('slug');
+
         return (
           <>
             <FormField
@@ -101,15 +94,25 @@ export function LinkEditForm({
               <TextField placeholder="https://example.com" autoComplete="off" />
             </FormField>
 
-            <FormField
-              name="slug"
-              rules={{
-                required: formatMessage(labels.required),
-              }}
-              style={{ display: 'none' }}
-            >
-              <input type="hidden" />
-            </FormField>
+            <Grid columns="1fr auto" alignItems="end" gap>
+              <FormField
+                name="slug"
+                label={formatMessage({ id: 'label.slug', defaultMessage: 'Slug' })}
+                rules={{
+                  required: formatMessage(labels.required),
+                }}
+              >
+                <TextField autoComplete="off" />
+              </FormField>
+              <Button
+                variant="quiet"
+                onPress={() => setValue('slug', generateId(), { shouldDirty: true })}
+              >
+                <Icon>
+                  <RefreshCw />
+                </Icon>
+              </Button>
+            </Grid>
 
             <Column>
               <Label>{formatMessage(labels.link)}</Label>
@@ -121,14 +124,6 @@ export function LinkEditForm({
                   allowCopy
                   style={{ width: '100%' }}
                 />
-                <Button
-                  variant="quiet"
-                  onPress={() => setValue('slug', handleSlug(), { shouldDirty: true })}
-                >
-                  <Icon>
-                    <RefreshCw />
-                  </Icon>
-                </Button>
               </Row>
             </Column>