diff --git a/pages/collective.tsx b/pages/collective.tsx
index ecfa2e74..4b93652d 100644
--- a/pages/collective.tsx
+++ b/pages/collective.tsx
@@ -4,16 +4,18 @@ import { App } from 'src/components/App'
 import { Meta } from 'src/components/Meta'
 import { CollectiveImage } from 'src/components/CollectiveImage'
 import { PersonCard } from 'src/components/PersonCard'
-import { CardList } from 'src/components/CardList'
 import menuModel from 'src/models/menu'
 import { buildMenu } from 'src/lib/menu'
 import { meta } from 'src/lib/meta'
-import { IMeta } from 'src/types'
+import { IMeta, IImage } from 'src/types'
 import { createApiUrl, requestGet, IResponseItems } from 'src/next-lib'
 import { NextPage, NextPageContext } from 'next'
+import { CardGrid } from 'src/components/CardGrid'
 
 interface IPerson {
-
+    url: string
+    name: string
+    picture: IImage
 }
 
 type Props = {
@@ -46,23 +48,24 @@ const Page: NextPage<Props> = props => {
                 <CollectiveImage
                     data={props.image}
                     style={{
-                        marginBottom: 'var(--double-margin)',
+                        marginBottom: 'var(--size-l)',
                     }}
                 />
             )}
 
-            <CardList
-                items={props.data}
-                renderItem={(person, index) => (
+            <CardGrid style={{
+                marginBottom: 'var(--size-xl)',
+            }}>
+                {props.data.map((item, index) => (
                     <PersonCard
                         key={index}
-                        profile={person}
-                        picture={person.picture}
-                        url={person.url}
-                        name={person.name}
+                        profile={item}
+                        picture={item.picture}
+                        url={item.url}
+                        name={item.name}
                     />
-                )}
-            />
+                ))}
+            </CardGrid>
         </App>
     )
 }
diff --git a/src/components/CardList.jsx b/src/components/CardList.jsx
deleted file mode 100644
index ba033e41..00000000
--- a/src/components/CardList.jsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react'
-
-export const CardList = props => (
-    <div className="CardList">
-        <style jsx>{`
-            .CardList {
-                display: flex;
-                flex-direction: row;
-                flex-wrap: wrap;
-
-                justify-content: space-between;
-            }
-        `}</style>
-
-        {props.items.map(
-            (item, index) => props.renderItem(item, index)
-        )}
-    </div>
-)
diff --git a/src/components/CollectiveImage.jsx b/src/components/CollectiveImage.jsx
index 47fcf719..c6668b58 100644
--- a/src/components/CollectiveImage.jsx
+++ b/src/components/CollectiveImage.jsx
@@ -15,7 +15,7 @@ export const CollectiveImage = (props) => (
             }}
             imgStyle={{
                 width: '100%',
-                borderRadius: '10px',
+                borderRadius: 'var(--radius)',
             }}
         />
     </div>
diff --git a/src/components/PersonCard.jsx b/src/components/PersonCard.jsx
deleted file mode 100644
index 02d113cd..00000000
--- a/src/components/PersonCard.jsx
+++ /dev/null
@@ -1,116 +0,0 @@
-import React from 'react'
-import cx from 'classnames'
-import { Image } from './Image'
-
-export const PersonCard = ({ picture, name, url, profile }) => (
-    <div className="PersonCard">
-        <style jsx>{`
-            .PersonCard {
-                --person-card-width: 30%;
-                --person-card-height: 24em;
-
-                display: flex;
-                flex-direction: column;
-
-                margin-bottom: var(--double-margin);
-
-                width: var(--person-card-width);
-                min-width: 10em;
-                max-width: 30em;
-            }
-
-            .PersonCard > a {
-                display: block;
-                position: relative;
-            }
-
-            .PersonCard-Picture {
-                position: relative;
-                border-radius: 10px;
-
-                width: 100%;
-                height: var(--person-card-height);
-
-                overflow: hidden;
-            }
-
-            .PersonCard-Picture img {
-                position: absolute;
-                width: 100%;
-                height: 100%;
-                top: 0;
-                left: 0;
-
-                object-fit: cover;
-                transition: all 150ms ease-out;
-            }
-
-            .PersonCard-Title, .PersonCard-Body  {
-                position: absolute;
-                width: 100%;
-                padding: var(--single-margin);
-                box-sizing: border-box;
-                color: white;
-                text-align: center;
-                text-shadow: 0 0 3px #000;
-            }
-
-            .PersonCard-Title {
-                top: 0;
-            }
-
-            .PersonCard-Body {
-                bottom: 0;
-            }
-
-            .PersonCard:hover img {
-                width: 105%;
-                height: 105%;
-                top: -2.5%;
-                left: -2.5%;
-            }
-
-
-            // Tablet
-
-            @media screen and (min-width: var(--tablet-min-width)) and (max-width: var(--tablet-max-width)) {
-                .PersonCard {
-                    --person-card-height: 20em;
-                }
-
-                @media screen and (orientation: portrait) {
-                }
-            }
-
-
-            // Mobile
-
-            @media (max-width: 31.25em) {
-                .PersonCard {
-                    --person-card-width: 100%;
-                }
-            }
-        `}</style>
-
-        <a className="invisible" href={url}>
-            <div className="PersonCard-Picture">
-                <picture>
-                    <img
-                        className={cx({ opa: false })}
-                        alt={''}
-                        src={picture.src}
-                        srcSet={picture.set.map(({ url, density }) => `${url} ${density}x`)}
-                    />
-                </picture >
-            </div>
-
-            <div className="PersonCard-Title">
-                {name[0]} {name[1]} {name[2]}
-            </div>
-
-            <div className="PersonCard-Body">
-                {profile.position}
-            </div>
-        </a>
-    </div>
-)
diff --git a/src/components/PersonCard/index.tsx b/src/components/PersonCard/index.tsx
new file mode 100644
index 00000000..2b6aa494
--- /dev/null
+++ b/src/components/PersonCard/index.tsx
@@ -0,0 +1,29 @@
+import './styles.css'
+
+import cx from 'classnames'
+import { Image } from '../Image'
+
+export const PersonCard = ({ picture, name, url, profile }) => (
+    <div className={'personCard'}>
+        <a className={'invisible'} href={url}>
+            <div className={'personCard-Picture'}>
+                <picture>
+                    <img
+                        className={cx({ opa: false })}
+                        alt={''}
+                        src={picture.src}
+                        srcSet={picture.set.map(({ url, density }) => `${url} ${density}x`)}
+                    />
+                </picture>
+            </div>
+
+            <div className={'personCard-Title'}>
+                {name[0]} {name[1]} {name[2]}
+            </div>
+
+            <div className={'personCard-Body'}>
+                {profile.position}
+            </div>
+        </a>
+    </div>
+)
diff --git a/src/components/PersonCard/styles.css b/src/components/PersonCard/styles.css
new file mode 100644
index 00000000..b0052cfe
--- /dev/null
+++ b/src/components/PersonCard/styles.css
@@ -0,0 +1,72 @@
+.personCard {
+    --person-card-height: 24em;
+
+    display: flex;
+    flex-direction: column;
+
+    min-width: 10em;
+    max-width: 30em;
+}
+
+.personCard > a {
+    display: block;
+    position: relative;
+}
+
+.personCard-Picture {
+    position: relative;
+    border-radius: var(--radius);
+
+    width: 100%;
+    height: var(--person-card-height);
+
+    overflow: hidden;
+}
+
+.personCard-Picture img {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+
+    object-fit: cover;
+    transition: all 150ms ease-out;
+}
+
+.personCard-Title,
+.personCard-Body {
+    position: absolute;
+    width: 100%;
+    padding: var(--single-margin);
+    box-sizing: border-box;
+    color: white;
+    text-align: center;
+    text-shadow: 0 0 3px #000;
+}
+
+.personCard-Title {
+    top: 0;
+}
+
+.personCard-Body {
+    bottom: 0;
+}
+
+.personCard:hover img {
+    width: 105%;
+    height: 105%;
+    top: -2.5%;
+    left: -2.5%;
+}
+
+/* Tablet */
+
+@media screen and (min-width: var(--tablet-min-width)) and (max-width: var(--tablet-max-width)) {
+    .personCard {
+        --person-card-height: 20em;
+    }
+
+    @media screen and (orientation: portrait) {
+    }
+}