diff --git a/app/(dashboard)/invoices/[id]/page.tsx b/app/(dashboard)/invoices/[id]/page.tsx
index f5356b70..b27ab7ee 100644
--- a/app/(dashboard)/invoices/[id]/page.tsx
+++ b/app/(dashboard)/invoices/[id]/page.tsx
@@ -613,15 +613,27 @@ export default function InvoiceDetailPage({ params }: { params: Promise<{ id: st
                 </span>
               </div>
               {invoice.your_reference && (
-                <div className="flex justify-between">
+                <div className="space-y-1">
                   <span className="text-muted-foreground">Er referens</span>
-                  <span>{invoice.your_reference}</span>
+                  <div className="flex flex-wrap gap-1">
+                    {invoice.your_reference.split(',').map((ref, i) => (
+                      <Badge key={i} variant="secondary" className="text-xs font-normal">
+                        {ref.trim()}
+                      </Badge>
+                    ))}
+                  </div>
                 </div>
               )}
               {invoice.our_reference && (
-                <div className="flex justify-between">
+                <div className="space-y-1">
                   <span className="text-muted-foreground">Vår referens</span>
-                  <span>{invoice.our_reference}</span>
+                  <div className="flex flex-wrap gap-1">
+                    {invoice.our_reference.split(',').map((ref, i) => (
+                      <Badge key={i} variant="secondary" className="text-xs font-normal">
+                        {ref.trim()}
+                      </Badge>
+                    ))}
+                  </div>
                 </div>
               )}
             </CardContent>
diff --git a/app/(dashboard)/invoices/new/page.tsx b/app/(dashboard)/invoices/new/page.tsx
index 47c73aba..16d263d8 100644
--- a/app/(dashboard)/invoices/new/page.tsx
+++ b/app/(dashboard)/invoices/new/page.tsx
@@ -10,6 +10,7 @@ import { addDays, format } from 'date-fns'
 import { Button } from '@/components/ui/button'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
 import { Input } from '@/components/ui/input'
+import { TagInput } from '@/components/ui/tag-input'
 import { Label } from '@/components/ui/label'
 import { Textarea } from '@/components/ui/textarea'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
@@ -653,15 +654,32 @@ export default function NewInvoicePage() {
 
                 <div className="space-y-2">
                   <Label>Er referens</Label>
-                  <Input
-                    placeholder="Kontaktperson hos kund"
-                    {...register('your_reference')}
+                  <Controller
+                    name="your_reference"
+                    control={control}
+                    render={({ field }) => (
+                      <TagInput
+                        value={field.value ?? ''}
+                        onChange={field.onChange}
+                        placeholder="Kontaktperson hos kund"
+                      />
+                    )}
                   />
                 </div>
 
                 <div className="space-y-2">
                   <Label>Vår referens</Label>
-                  <Input placeholder="Ditt namn" {...register('our_reference')} />
+                  <Controller
+                    name="our_reference"
+                    control={control}
+                    render={({ field }) => (
+                      <TagInput
+                        value={field.value ?? ''}
+                        onChange={field.onChange}
+                        placeholder="Ditt namn"
+                      />
+                    )}
+                  />
                 </div>
               </CardContent>
             </Card>
diff --git a/components/invoices/InvoiceReviewContent.tsx b/components/invoices/InvoiceReviewContent.tsx
index 09bf9c8c..cb399e10 100644
--- a/components/invoices/InvoiceReviewContent.tsx
+++ b/components/invoices/InvoiceReviewContent.tsx
@@ -159,9 +159,31 @@ export function InvoiceReviewContent({
 
       {/* References/notes */}
       {(yourReference || ourReference || notes) && (
-        <div className="border-t pt-3 space-y-1 text-sm text-muted-foreground">
-          {yourReference && <p>Er referens: {yourReference}</p>}
-          {ourReference && <p>Vår referens: {ourReference}</p>}
+        <div className="border-t pt-3 space-y-2 text-sm text-muted-foreground">
+          {yourReference && (
+            <div>
+              <span>Er referens:</span>
+              <div className="flex flex-wrap gap-1 mt-1">
+                {yourReference.split(',').map((ref, i) => (
+                  <Badge key={i} variant="secondary" className="text-xs font-normal">
+                    {ref.trim()}
+                  </Badge>
+                ))}
+              </div>
+            </div>
+          )}
+          {ourReference && (
+            <div>
+              <span>Vår referens:</span>
+              <div className="flex flex-wrap gap-1 mt-1">
+                {ourReference.split(',').map((ref, i) => (
+                  <Badge key={i} variant="secondary" className="text-xs font-normal">
+                    {ref.trim()}
+                  </Badge>
+                ))}
+              </div>
+            </div>
+          )}
           {notes && <p>Anteckning: {notes}</p>}
         </div>
       )}
diff --git a/components/ui/tag-input.tsx b/components/ui/tag-input.tsx
new file mode 100644
index 00000000..584ca221
--- /dev/null
+++ b/components/ui/tag-input.tsx
@@ -0,0 +1,125 @@
+'use client'
+
+import * as React from 'react'
+import { X } from 'lucide-react'
+import { cn } from '@/lib/utils'
+
+interface TagInputProps {
+  value?: string
+  onChange?: (value: string) => void
+  placeholder?: string
+  className?: string
+  disabled?: boolean
+}
+
+const TagInput = React.forwardRef<HTMLInputElement, TagInputProps>(
+  ({ value = '', onChange, placeholder, className, disabled }, ref) => {
+    const [inputValue, setInputValue] = React.useState('')
+    const inputRef = React.useRef<HTMLInputElement>(null)
+
+    React.useImperativeHandle(ref, () => inputRef.current!)
+
+    const tags = React.useMemo(
+      () =>
+        value
+          .split(',')
+          .map((t) => t.trim())
+          .filter(Boolean),
+      [value]
+    )
+
+    function commitTag(raw: string) {
+      const trimmed = raw.trim()
+      if (!trimmed) return
+      const next = [...tags, trimmed].join(', ')
+      onChange?.(next)
+      setInputValue('')
+    }
+
+    function removeTag(index: number) {
+      const next = tags.filter((_, i) => i !== index).join(', ')
+      onChange?.(next)
+    }
+
+    function handleKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {
+      if (e.key === 'Enter' || e.key === ',') {
+        e.preventDefault()
+        commitTag(inputValue)
+      } else if (
+        e.key === 'Backspace' &&
+        inputValue === '' &&
+        tags.length > 0
+      ) {
+        removeTag(tags.length - 1)
+      }
+    }
+
+    function handleBlur() {
+      if (inputValue.trim()) {
+        commitTag(inputValue)
+      }
+    }
+
+    function handlePaste(e: React.ClipboardEvent<HTMLInputElement>) {
+      const pasted = e.clipboardData.getData('text')
+      if (pasted.includes(',')) {
+        e.preventDefault()
+        const newTags = pasted
+          .split(',')
+          .map((t) => t.trim())
+          .filter(Boolean)
+        const next = [...tags, ...newTags].join(', ')
+        onChange?.(next)
+        setInputValue('')
+      }
+    }
+
+    return (
+      <div
+        className={cn(
+          'flex min-h-9 w-full flex-wrap items-center gap-1.5 rounded-md border border-input bg-transparent px-3 py-1.5 text-sm shadow-xs transition-colors',
+          'focus-within:ring-1 focus-within:ring-ring',
+          disabled && 'cursor-not-allowed opacity-50',
+          className
+        )}
+        onClick={() => inputRef.current?.focus()}
+      >
+        {tags.map((tag, i) => (
+          <span
+            key={`${tag}-${i}`}
+            className="inline-flex items-center gap-1 rounded-md bg-secondary px-2 py-0.5 text-xs font-medium text-secondary-foreground"
+          >
+            {tag}
+            {!disabled && (
+              <button
+                type="button"
+                onClick={(e) => {
+                  e.stopPropagation()
+                  removeTag(i)
+                }}
+                className="rounded-sm opacity-60 hover:opacity-100 focus:outline-none"
+              >
+                <X className="h-3 w-3" />
+              </button>
+            )}
+          </span>
+        ))}
+        <input
+          ref={inputRef}
+          type="text"
+          value={inputValue}
+          onChange={(e) => setInputValue(e.target.value)}
+          onKeyDown={handleKeyDown}
+          onBlur={handleBlur}
+          onPaste={handlePaste}
+          placeholder={tags.length === 0 ? placeholder : undefined}
+          disabled={disabled}
+          className="min-w-[80px] flex-1 bg-transparent outline-none placeholder:text-muted-foreground"
+        />
+      </div>
+    )
+  }
+)
+TagInput.displayName = 'TagInput'
+
+export { TagInput }
diff --git a/lib/invoices/pdf-template.tsx b/lib/invoices/pdf-template.tsx
index 9cdfd5c2..c52fed62 100644
--- a/lib/invoices/pdf-template.tsx
+++ b/lib/invoices/pdf-template.tsx
@@ -348,15 +348,27 @@ export function InvoicePDF({ invoice, customer, items, company, originalInvoiceN
               <Text style={styles.value}>{formatDate(invoice.due_date)}</Text>
             </View>
             {invoice.your_reference && (
-              <View style={styles.row}>
+              <View style={{ marginBottom: 4 }}>
                 <Text style={styles.label}>Er referens:</Text>
-                <Text style={styles.value}>{invoice.your_reference}</Text>
+                <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 4, marginTop: 2 }}>
+                  {invoice.your_reference.split(',').map((ref, i) => (
+                    <Text key={i} style={{ backgroundColor: '#f0f0f0', borderRadius: 3, paddingHorizontal: 6, paddingVertical: 2, fontSize: 9, fontWeight: 'bold' }}>
+                      {ref.trim()}
+                    </Text>
+                  ))}
+                </View>
               </View>
             )}
             {invoice.our_reference && (
-              <View style={styles.row}>
+              <View style={{ marginBottom: 4 }}>
                 <Text style={styles.label}>Vår referens:</Text>
-                <Text style={styles.value}>{invoice.our_reference}</Text>
+                <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 4, marginTop: 2 }}>
+                  {invoice.our_reference.split(',').map((ref, i) => (
+                    <Text key={i} style={{ backgroundColor: '#f0f0f0', borderRadius: 3, paddingHorizontal: 6, paddingVertical: 2, fontSize: 9, fontWeight: 'bold' }}>
+                      {ref.trim()}
+                    </Text>
+                  ))}
+                </View>
               </View>
             )}
           </View>