diff --git a/.npmrc b/.npmrc
new file mode 100644
index 0000000..9dc1f54
--- /dev/null
+++ b/.npmrc
@@ -0,0 +1,2 @@
+save-exact=true
+save-prefix=
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index add0a5f..eedf35a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,7 +15,7 @@
         "@radix-ui/react-label": "2.1.0",
         "@radix-ui/react-select": "2.1.2",
         "@radix-ui/react-slot": "1.1.0",
-        "@radix-ui/react-visually-hidden": "^1.1.0",
+        "@radix-ui/react-visually-hidden": "1.1.0",
         "@types/lodash": "4.17.10",
         "axios-retry": "3.9.1",
         "class-variance-authority": "0.7.0",
@@ -39,12 +39,16 @@
         "zustand": "4.5.5"
       },
       "devDependencies": {
+        "@amsterdam/design-system-react": "0.11.1",
         "@testing-library/dom": "10.4.0",
         "@testing-library/react": "16.0.1",
         "@types/node": "20",
         "@types/react": "18",
         "@types/react-dom": "18",
         "@types/validator": "13.12.2",
+        "@utrecht/component-library-css": "6.1.0",
+        "@utrecht/component-library-react": "7.2.0",
+        "@utrecht/design-tokens": "2.1.1",
         "@vitejs/plugin-react": "4.3.3",
         "autoprefixer": "10.4.20",
         "axios": "1.7.7",
@@ -86,6 +90,85 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@amsterdam/design-system-assets": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/@amsterdam/design-system-assets/-/design-system-assets-0.2.1.tgz",
+      "integrity": "sha512-byLLmmF1cv2niZMXETV30nprypZY8bAFpNKKuRlmYlIREA6blz9kVIJsQeH3IldmClW1mNa8ccJN4EKJglnuRw==",
+      "dev": true,
+      "license": "SEE LICENSE IN LICENSE.md",
+      "peer": true
+    },
+    "node_modules/@amsterdam/design-system-css": {
+      "version": "0.11.1",
+      "resolved": "https://registry.npmjs.org/@amsterdam/design-system-css/-/design-system-css-0.11.1.tgz",
+      "integrity": "sha512-ZRl+ag+jgYnHAWJWMIErRmS2x4sATrlyVYtVrV0hnxi6yC04o5g2PamjbQPA4/5ytx9gMg7ZxHQgHXUWyaSKEg==",
+      "dev": true,
+      "license": "EUPL-1.2",
+      "peer": true,
+      "peerDependencies": {
+        "@amsterdam/design-system-assets": "0.2.1",
+        "@amsterdam/design-system-tokens": "0.11.0"
+      }
+    },
+    "node_modules/@amsterdam/design-system-react": {
+      "version": "0.11.1",
+      "resolved": "https://registry.npmjs.org/@amsterdam/design-system-react/-/design-system-react-0.11.1.tgz",
+      "integrity": "sha512-xFCXhaXbm2m5+xYUlT9aHlFQ3MyWMRqRY8byK2yU8yLW3MDfqTMoqwSTUMhmvA6dj1JtGfuYEdv7RoxYSp3irg==",
+      "dev": true,
+      "license": "EUPL-1.2",
+      "dependencies": {
+        "@amsterdam/design-system-react-icons": "0.1.12",
+        "@babel/runtime": "7.24.8",
+        "clsx": "2.1.1"
+      },
+      "peerDependencies": {
+        "@amsterdam/design-system-css": "0.11.1",
+        "react": "16 - 18",
+        "react-dom": "16 - 18"
+      }
+    },
+    "node_modules/@amsterdam/design-system-react-icons": {
+      "version": "0.1.12",
+      "resolved": "https://registry.npmjs.org/@amsterdam/design-system-react-icons/-/design-system-react-icons-0.1.12.tgz",
+      "integrity": "sha512-pBR7NnX2J8CsKaNbWSf+lxrPHvPqgSmgB2CYuIDD4RL472kUsNjzJNVOhR24QaKkUGCSUaskhVlUPqeJZIX/MA==",
+      "dev": true,
+      "license": "SEE LICENSE IN LICENSE.md",
+      "peerDependencies": {
+        "react": "16 - 18",
+        "react-dom": "16 - 18"
+      }
+    },
+    "node_modules/@amsterdam/design-system-react/node_modules/@babel/runtime": {
+      "version": "7.24.8",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.8.tgz",
+      "integrity": "sha512-5F7SDGs1T72ZczbRwbGO9lQi0NLjQxzl6i4lJxLxfW9U5UluCSyEJeniWvnhl3/euNiqQVbo8zruhsDfid0esA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "regenerator-runtime": "^0.14.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@amsterdam/design-system-react/node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@amsterdam/design-system-tokens": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/@amsterdam/design-system-tokens/-/design-system-tokens-0.11.0.tgz",
+      "integrity": "sha512-LgF8u5EDhNpjdhF4doaojoPV/cLJYWJR0ZPcJpJjjkkfKRsesEtO8cTZIQBCDMpXwvRUIuw7henmipdueLtsww==",
+      "dev": true,
+      "license": "SEE LICENSE IN LICENSE.md",
+      "peer": true
+    },
     "node_modules/@babel/code-frame": {
       "version": "7.25.9",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.25.9.tgz",
@@ -3169,6 +3252,60 @@
       "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz",
       "integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ=="
     },
+    "node_modules/@utrecht/component-library-css": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/@utrecht/component-library-css/-/component-library-css-6.1.0.tgz",
+      "integrity": "sha512-+2qarCIgsNpLpxOcG5Rw3WLqNBASoWJFHMI4RlZJm5JTFfnhnl2wC/ylK23wOOooLNNCmsGrLdvSHHrEThJynw==",
+      "dev": true,
+      "license": "EUPL-1.2"
+    },
+    "node_modules/@utrecht/component-library-react": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/@utrecht/component-library-react/-/component-library-react-7.2.0.tgz",
+      "integrity": "sha512-o2nJIWxc93KmQIVNSX4WIJQqZCcMCOnS1A6oqfFKV8kBbnVaDxuqQSgjT/HNkoqLWZQY9Zo5orKdmRDHDpKr+w==",
+      "dev": true,
+      "license": "EUPL-1.2",
+      "dependencies": {
+        "clsx": "2.1.1",
+        "lodash.chunk": "4.2.0"
+      },
+      "peerDependencies": {
+        "@babel/runtime": "^7.23.6",
+        "date-fns": "^2.30.0",
+        "react": "18",
+        "react-dom": "18",
+        "react-vega": "^7.6.0",
+        "vega": "^5.25.0"
+      },
+      "peerDependenciesMeta": {
+        "date-fns": {
+          "optional": true
+        },
+        "react-vega": {
+          "optional": true
+        },
+        "vega": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@utrecht/component-library-react/node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@utrecht/design-tokens": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@utrecht/design-tokens/-/design-tokens-2.1.1.tgz",
+      "integrity": "sha512-+mt1fhxwp9f5gBmD9Qh/E0H8w2mIj1ZEvMh9aXY1QdEC9hxRZRdbOjedHhelAtq6kM18SS0AXpgkB2yvhrVwDg==",
+      "dev": true,
+      "license": "SEE LICENSE IN ./LICENSE.md"
+    },
     "node_modules/@vitejs/plugin-react": {
       "version": "4.3.3",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.3.3.tgz",
@@ -6893,6 +7030,13 @@
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
       "license": "MIT"
     },
+    "node_modules/lodash.chunk": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/lodash.chunk/-/lodash.chunk-4.2.0.tgz",
+      "integrity": "sha512-ZzydJKfUHJwHa+hF5X66zLFCBrWn5GeF28OHEr4WVWtNDXlQ/IjWKPBiikqKo2ne0+v6JgCgJ0GzJp8k8bHC7w==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
diff --git a/package.json b/package.json
index ec7c359..c1d3936 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,7 @@
     "@radix-ui/react-label": "2.1.0",
     "@radix-ui/react-select": "2.1.2",
     "@radix-ui/react-slot": "1.1.0",
-    "@radix-ui/react-visually-hidden": "^1.1.0",
+    "@radix-ui/react-visually-hidden": "1.1.0",
     "@types/lodash": "4.17.10",
     "axios-retry": "3.9.1",
     "class-variance-authority": "0.7.0",
@@ -43,11 +43,15 @@
   "devDependencies": {
     "@testing-library/dom": "10.4.0",
     "@testing-library/react": "16.0.1",
+    "@amsterdam/design-system-react": "0.11.1",
     "@types/node": "20",
     "@types/react": "18",
     "@types/react-dom": "18",
     "@types/validator": "13.12.2",
     "@vitejs/plugin-react": "4.3.3",
+    "@utrecht/component-library-css": "6.1.0",
+    "@utrecht/component-library-react": "7.2.0",
+    "@utrecht/design-tokens": "2.1.1",
     "autoprefixer": "10.4.20",
     "axios": "1.7.7",
     "eslint": "9",
diff --git a/src/app/[locale]/incident/add/page.tsx b/src/app/[locale]/incident/add/page.tsx
index 8443ffe..5776aa7 100644
--- a/src/app/[locale]/incident/add/page.tsx
+++ b/src/app/[locale]/incident/add/page.tsx
@@ -1,5 +1,6 @@
 import { NextIntlClientProvider, useMessages, useTranslations } from 'next-intl'
 import { IncidentQuestionsLocationForm } from '@/app/[locale]/incident/add/components/IncidentQuestionsLocationForm'
+import { Heading1 } from '@utrecht/component-library-react/dist/css-module'
 
 export default function AddAditionalInformationPage() {
   const t = useTranslations('describe-add')
@@ -7,7 +8,7 @@ export default function AddAditionalInformationPage() {
 
   return (
     <div className="flex flex-col gap-4">
-      <h1>{t('heading')}</h1>
+      <Heading1>{t('heading')}</Heading1>
       <NextIntlClientProvider messages={messages}>
         <IncidentQuestionsLocationForm />
       </NextIntlClientProvider>
diff --git a/src/app/[locale]/incident/components/IncidentDescriptionForm.tsx b/src/app/[locale]/incident/components/IncidentDescriptionForm.tsx
index 7b38888..494765f 100644
--- a/src/app/[locale]/incident/components/IncidentDescriptionForm.tsx
+++ b/src/app/[locale]/incident/components/IncidentDescriptionForm.tsx
@@ -7,14 +7,11 @@ import {
   FormField,
   FormItem,
   FormMessage,
-  FormLabel,
   FormDescription,
 } from '@/components/ui/Form'
 import { useForm } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useTranslations } from 'next-intl'
-import { Textarea } from '@/components/ui/TextArea'
-import { Input } from '@/components/ui/Input'
 import { IncidentFormFooter } from '@/app/[locale]/incident/components/IncidentFormFooter'
 import { useStepperStore } from '@/store/stepper_store'
 import { useRouter } from '@/routing/navigation'
@@ -23,6 +20,9 @@ import { getCategoryForDescription } from '@/services/classification'
 import { debounce } from 'lodash'
 import { useFormStore } from '@/store/form_store'
 
+import { FormFieldTextarea } from '@utrecht/component-library-react/dist/css-module'
+import { FileInput, Label } from '@amsterdam/design-system-react'
+
 export const IncidentDescriptionForm = () => {
   const t = useTranslations('describe-report.form')
   const { updateForm, formState } = useFormStore()
@@ -89,27 +89,24 @@ export const IncidentDescriptionForm = () => {
           name={'description'}
           control={form.control}
           render={({ field, formState: { errors } }) => (
-            <FormItem error={errors.description}>
-              <div>
-                <FormLabel>{t('describe_textarea_heading')}</FormLabel>
-                <FormDescription>
-                  {t('describe_textarea_description')}
-                </FormDescription>
-                <FormMessage />
-              </div>
-              <FormControl>
-                <Textarea rows={5} {...field} />
-              </FormControl>
-            </FormItem>
+            <FormFieldTextarea
+              rows={5}
+              description={t('describe_textarea_description')}
+              label={t('describe_textarea_heading')}
+              errorMessage={errors.description?.message}
+              invalid={Boolean(errors.description?.message)}
+              {...field}
+            />
           )}
         />
+
         <FormField
           name={'files'}
           control={form.control}
           render={({ field, formState: { errors } }) => (
             <FormItem>
               <div>
-                <FormLabel>{t('describe_upload_heading')}</FormLabel>
+                <Label>{t('describe_upload_heading')}</Label>
                 <FormDescription>
                   {t('describe_upload_description')}
                 </FormDescription>
@@ -117,7 +114,12 @@ export const IncidentDescriptionForm = () => {
               </div>
               <FormControl>
                 {/* TODO: put onChange handler on file upload, or provide defaultValue (bind to react-hook-form). To prevent error */}
-                <Input type="file" value="" onChange={() => 'test'} />
+                <FileInput
+                  type="file"
+                  value=""
+                  onChange={() => 'test'}
+                  multiple
+                />
               </FormControl>
             </FormItem>
           )}
diff --git a/src/app/[locale]/incident/components/IncidentFormFooter.tsx b/src/app/[locale]/incident/components/IncidentFormFooter.tsx
index ab4b2d5..36ac3f8 100644
--- a/src/app/[locale]/incident/components/IncidentFormFooter.tsx
+++ b/src/app/[locale]/incident/components/IncidentFormFooter.tsx
@@ -66,12 +66,6 @@ const IncidentFormFooter = ({
           </Button>
         )}
       </div>
-      <p className="text-light_text">
-        Lukt het niet om een melding te doen? Bel het telefoonnummer 14 020
-        <br />
-        Wij zijn bereikbaar van maandag tot en met vrijdag van 08.00 tot 18.00
-        uur.
-      </p>
     </>
   )
 }
diff --git a/src/app/[locale]/incident/components/Stepper.tsx b/src/app/[locale]/incident/components/Stepper.tsx
index 2d991b5..2d76912 100644
--- a/src/app/[locale]/incident/components/Stepper.tsx
+++ b/src/app/[locale]/incident/components/Stepper.tsx
@@ -1,11 +1,15 @@
 'use client'
 
 import { useTranslations } from 'next-intl'
-import { Link, Paths, usePathname } from '@/routing/navigation'
+import { Paths, usePathname } from '@/routing/navigation'
 import { useStepperStore } from '@/store/stepper_store'
 import { useEffect, useRef } from 'react'
-import { Button } from '@/components/ui/Button'
 import { useFormStore } from '@/store/form_store'
+import {
+  Button,
+  Link,
+  Paragraph,
+} from '@utrecht/component-library-react/dist/css-module'
 
 type StepperProps = {}
 
@@ -107,13 +111,13 @@ export const Stepper = ({}: StepperProps) => {
                 >
                   {index + 1}
                 </div>
-                <p
+                <Paragraph
                   className={`${
                     step == index + 1 ? 'text-xl font-semibold -ml-3' : ''
                   } md:block hidden transition duration-100 group-hover:underline group-focus:underline`}
                 >
                   {item.name}
-                </p>
+                </Paragraph>
               </Link>
             )
           })}
diff --git a/src/app/[locale]/incident/page.tsx b/src/app/[locale]/incident/page.tsx
index 91f68a3..40475df 100644
--- a/src/app/[locale]/incident/page.tsx
+++ b/src/app/[locale]/incident/page.tsx
@@ -1,5 +1,11 @@
 import { NextIntlClientProvider, useMessages, useTranslations } from 'next-intl'
 import { IncidentDescriptionForm } from '@/app/[locale]/incident/components/IncidentDescriptionForm'
+import {
+  Heading1,
+  Paragraph,
+  Alert,
+  Link,
+} from '@utrecht/component-library-react/dist/css-module'
 
 export default async function Home() {
   return <IncidentDescriptionPage />
@@ -12,7 +18,18 @@ function IncidentDescriptionPage() {
   return (
     <>
       <div className="flex flex-col gap-4">
-        <h1>{t('heading')}</h1>
+        <Heading1>{t('heading')}</Heading1>
+        <Alert>
+          <Paragraph>
+            Lukt het niet om een melding te doen? Bel het telefoonnummer
+            <Link href="tel:14 020"> 14 020.</Link>
+          </Paragraph>
+          <Paragraph>
+            Wij zijn bereikbaar van maandag tot en met vrijdag van 08:00 tot
+            18:00 uur.
+          </Paragraph>
+        </Alert>
+
         <NextIntlClientProvider messages={messages}>
           <IncidentDescriptionForm />
         </NextIntlClientProvider>
diff --git a/src/app/[locale]/layout.tsx b/src/app/[locale]/layout.tsx
index e5e6ece..6d4f93e 100644
--- a/src/app/[locale]/layout.tsx
+++ b/src/app/[locale]/layout.tsx
@@ -5,6 +5,7 @@ import { Container } from '@/components'
 import { Header } from '@/app/[locale]/components/Header'
 import localFont from 'next/font/local'
 import AppProvider from '@/components/providers/AppProvider'
+import { Document } from '@utrecht/component-library-react/dist/css-module'
 
 const font = localFont({
   src: '../../../public/fonts/open-sans.woff2',
@@ -25,10 +26,12 @@ export default function LocaleLayout({
     <html lang={locale} className={`${font.variable}`}>
       <body className="bg-gray-100">
         <AppProvider>
-          <Container className="bg-white">
-            <Header />
-            {children}
-          </Container>
+          <Document className="utrecht-theme">
+            <Container className="bg-white">
+              <Header />
+              {children}
+            </Container>
+          </Document>
         </AppProvider>
       </body>
     </html>
diff --git a/src/app/globals.css b/src/app/globals.css
index 747539a..9cecef3 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -4,45 +4,45 @@
 
 /* fonts */
 h1 {
-    font-size: 28px;
-    font-weight: 700;
+  font-size: 28px;
+  font-weight: 700;
 }
 
 h2 {
-    font-size: 24px;
-    font-weight: 500;
+  font-size: 24px;
+  font-weight: 500;
 }
 
 h3 {
-    font-size: 20px;
-    font-weight: 600;
+  font-size: 20px;
+  font-weight: 600;
 }
 
 .address__select {
-    @apply flex transition duration-100 bg-white p-3 justify-between min-w-[150px] ring-1 ring-border hover:ring-2 hover:bg-hover focus:ring-2 focus:ring-focus outline-none focus-visible:outline-dashed focus-visible:outline-focus_visible focus-within:ring-2 focus-within:ring-focus focus-within:outline-dashed focus-within:outline-focus_visible;
+  @apply flex transition duration-100 bg-white p-3 justify-between min-w-[150px] ring-1 ring-border hover:ring-2 hover:bg-hover focus:ring-2 focus:ring-focus outline-none focus-visible:outline-dashed focus-visible:outline-focus_visible focus-within:ring-2 focus-within:ring-focus focus-within:outline-dashed focus-within:outline-focus_visible;
 }
 
 .address__select-menu {
-    @apply bg-white mt-[2px] border border-border w-full -ml-[2px];
-    min-width: calc(100% + 4px);
+  @apply bg-white mt-[2px] border border-border w-full -ml-[2px];
+  min-width: calc(100% + 4px);
 }
 
 .address__select-option {
-    @apply px-3 py-3 border-y border-x border-transparent
+  @apply px-3 py-3 border-y border-x border-transparent;
 }
 
 .address__select-option__selected {
-    @apply bg-hover
+  @apply bg-hover;
 }
 
 .address__select-option__focused {
-    @apply bg-hover border-y border-focus border-x-transparent
+  @apply bg-hover border-y border-focus border-x-transparent;
 }
 
 .address__select-option__focused:is(:first-child) {
-    @apply border-t-transparent;
+  @apply border-t-transparent;
 }
 
 .address__select-option__focused:is(:last-child) {
-    @apply border-b-transparent;
+  @apply border-b-transparent;
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 21e8e19..861dc8b 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,6 +1,7 @@
 import type { Metadata } from 'next'
 import { Inter } from 'next/font/google'
 import './globals.css'
+import '@utrecht/design-tokens/dist/index.css'
 
 const inter = Inter({ subsets: ['latin'] })