diff --git a/packages/react/src/Footer/Footer.tsx b/packages/react/src/Footer/Footer.tsx
index 7d5fe27ef1..6f02122815 100644
--- a/packages/react/src/Footer/Footer.tsx
+++ b/packages/react/src/Footer/Footer.tsx
@@ -3,6 +3,7 @@
  * Copyright (c) 2023 Gemeente Amsterdam
  */
 
+import clsx from 'clsx'
 import {
   ForwardedRef,
   forwardRef,
@@ -18,7 +19,7 @@ export const FooterTop = forwardRef(
     { children, className, ...restProps }: PropsWithChildren<HTMLAttributes<HTMLDivElement>>,
     ref: ForwardedRef<HTMLDivElement>,
   ) => (
-    <Highlight {...restProps} color="blue" ref={ref} className={className}>
+    <Highlight {...restProps} color="blue" ref={ref} className={clsx('amsterdam-footer__top', className)}>
       {children}
     </Highlight>
   ),
@@ -31,7 +32,7 @@ export const FooterBottom = forwardRef(
     { children, className, ...restProps }: PropsWithChildren<HTMLAttributes<HTMLDivElement>>,
     ref: ForwardedRef<HTMLDivElement>,
   ) => (
-    <div {...restProps} ref={ref} className={className}>
+    <div {...restProps} ref={ref} className={clsx('amsterdam-footer__bottom', className)}>
       {children}
     </div>
   ),
@@ -50,7 +51,7 @@ export const Footer = forwardRef(
     { children, className, ...restProps }: PropsWithChildren<HTMLAttributes<HTMLElement>>,
     ref: ForwardedRef<HTMLElement>,
   ) => (
-    <footer {...restProps} ref={ref} className={className}>
+    <footer {...restProps} ref={ref} className={clsx('amsterdam-footer', className)}>
       {children}
     </footer>
   ),