diff --git a/coral/src/App.module.css b/coral/src/App.module.css
new file mode 100644
index 0000000000..6f48f06f52
--- /dev/null
+++ b/coral/src/App.module.css
@@ -0,0 +1,3 @@
+.aClassName {
+  color: pink;
+}
diff --git a/coral/src/App.tsx b/coral/src/App.tsx
index 7ce161ae55..d538cb1a27 100644
--- a/coral/src/App.tsx
+++ b/coral/src/App.tsx
@@ -1,4 +1,5 @@
 import { Flexbox, TagLabel, Typography } from "@aivenio/design-system";
+import classes from "./App.module.css";
 
 function App() {
   return (
@@ -6,7 +7,7 @@ function App() {
       <Typography htmlTag={"h1"} variant={"heading-2xl"}>
         Hello Klaw 👋
       </Typography>
-      <Flexbox alignItems={"center"}>
+      <Flexbox alignItems={"center"} className={classes.aClassName}>
         <p>This uses the aiven design system! &nbsp; </p>
         <TagLabel title="yey" />
       </Flexbox>