diff --git a/src/components/Card/Card.scss b/src/components/Card/Card.scss
new file mode 100644
index 000000000..da13ac295
--- /dev/null
+++ b/src/components/Card/Card.scss
@@ -0,0 +1,71 @@
+.Card {
+    background-color: white;
+    border-radius: 1rem;
+    margin-top: 4rem;
+
+    .dark-mode & {
+        background-color: rgb(61, 61, 61);
+    }
+
+    &Header {
+        display: grid;
+        margin-top: -25%;
+    }
+
+    &Image {
+        background-color: #eeeeee;
+        border-radius: 100%;
+        border: 0.5rem solid #eeeeee;
+        height: 7rem;
+        width: 7rem;
+        overflow: hidden;
+
+        .dark-mode & {
+            background-color: rgb(51, 51, 51);
+            border: 0.5rem solid rgb(51, 51, 51);
+        }
+    }
+
+    &Main {
+        display: grid;
+        padding: 0 1rem;
+
+        .dark-mode & {
+            color: rgb(201, 201, 201);
+        }
+    }
+
+    &Links {
+        display: flex;
+        gap: 0.4rem;
+        justify-content: center;
+        align-items: center;
+    }
+
+    &Link {
+        background-color: black;
+        color: inherit;
+        width: 2rem;
+        height: 2rem;
+        display: block;
+        border-radius: 100%;
+        padding: 0.5rem;
+
+        & > svg {
+            fill: white;
+            width: 100%;
+            height: 100%;
+        }
+
+        .dark-mode & {
+            background-color: rgb(129, 129, 129);
+
+            & > svg {
+                fill: rgb(33, 33, 33);
+            }
+        }
+    }
+
+    &Footer {
+    }
+}
diff --git a/src/components/Card.tsx b/src/components/Card/Card.tsx
similarity index 78%
rename from src/components/Card.tsx
rename to src/components/Card/Card.tsx
index 3a1b8d25b..71af314cc 100644
--- a/src/components/Card.tsx
+++ b/src/components/Card/Card.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import LazyLoad from 'react-lazyload'
+import './Card.scss'
 
 const defaultImageDataURI =
     "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='000000' fill-opacity='0.25' viewBox='0 0 24 24'%3E %3Cpath d='M9,11.75A1.25,1.25 0 0,0 7.75,13A1.25,1.25 0 0,0 9,14.25A1.25,1.25 0 0,0 10.25,13A1.25,1.25 0 0,0 9,11.75M15,11.75A1.25,1.25 0 0,0 13.75,13A1.25,1.25 0 0,0 15,14.25A1.25,1.25 0 0,0 16.25,13A1.25,1.25 0 0,0 15,11.75M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,20C7.59,20 4,16.41 4,12C4,11.71 4,11.42 4.05,11.14C6.41,10.09 8.28,8.16 9.26,5.77C11.07,8.33 14.05,10 17.42,10C18.2,10 18.95,9.91 19.67,9.74C19.88,10.45 20,11.21 20,12C20,16.41 16.41,20 12,20Z' /%3E %3C/svg%3E"
@@ -10,44 +11,38 @@ const addDefaultImg = (e: any) => {
     e.target.src = defaultImageDataURI
 }
 const Card = ({ user }: any) => {
-    let { id, img, name, email, jobTitle, location, links } = user
+    const { id, img, name, email, jobTitle, location, links } = user
 
-    if (id) {
-        return (
-            <div
-                id={`person-${id}`}
-                className="card ma3 w5 tc bg-white br3 custom--shadow-2 custom--shadow-hover-8 custom--o-95 z-1"
-            >
-                <div className="header relative pt3 br2 br--top z-0">
-                    <LazyLoad
-                        throttle={200}
-                        height={128}
-                        offset={100}
-                        once={true}
-                    >
-                        <img
-                            className="photo relative br-100 bw2 b--solid custom--b--primary bg-center object-fit-cover"
-                            height="128px"
-                            width="128px"
-                            src={img || defaultImageDataURI}
-                            alt={name}
-                            loading="lazy"
-                            onError={(e) => addDefaultImg(e)}
-                        />
-                    </LazyLoad>
-                    <h2 className="name mt3 mb1 ph3 w-100 flex items-center justify-center">
-                        {name}
-                    </h2>
-                    <p className="title text-center">{jobTitle}</p>
-                </div>
-                <div className="main pv2 ph3 flex items-center justify-center">
+    if (!id) {
+        return <div></div>
+    }
+
+    return (
+        <div id={`person-${id}`} className="Card">
+            <div className="CardHeader">
+                <LazyLoad throttle={200} height={128} offset={100} once={true}>
+                    <img
+                        className="CardImage"
+                        height="128px"
+                        width="128px"
+                        src={img || defaultImageDataURI}
+                        alt={name}
+                        loading="lazy"
+                        onError={(e) => addDefaultImg(e)}
+                    />
+                </LazyLoad>
+            </div>
+            <div className="CardMain">
+                <h2 className="CardName">{name}</h2>
+                <p className="CardJob">{jobTitle}</p>
+                <div className="CardLinks">
                     {/* adding email button  */}
                     {email === '' ? (
                         ''
                     ) : (
                         <a
                             href={'mailto:' + email}
-                            className="w2 h2 ma2"
+                            className="CardLink"
                             title="email"
                             target="_blank"
                             rel="noopener noreferrer"
@@ -62,7 +57,7 @@ const Card = ({ user }: any) => {
                     ) : (
                         <a
                             href={links.website}
-                            className="w2 h2 ma2"
+                            className="CardLink"
                             title="Website/Portfolio"
                             target="_blank"
                             rel="noopener noreferrer"
@@ -77,7 +72,7 @@ const Card = ({ user }: any) => {
                     ) : (
                         <a
                             href={links.github}
-                            className="w2 h2 ma2"
+                            className="CardLink"
                             title="GitHub profile"
                             target="_blank"
                             rel="noopener noreferrer"
@@ -92,7 +87,7 @@ const Card = ({ user }: any) => {
                     ) : (
                         <a
                             href={links.linkedin}
-                            className="w2 h2 ma2"
+                            className="CardLink"
                             title="LinkedIn profile"
                             target="_blank"
                             rel="noopener noreferrer"
@@ -104,7 +99,7 @@ const Card = ({ user }: any) => {
                     )}
                 </div>
                 <div style={{ margin: 0, padding: 0 }}>
-                    <p className="footer items-center justify-center br2 br--bottom">
+                    <p className="CardFooter">
                         {location.city === '' ? '' : location.city}
                         {(location.city !== '' && location.state !== '') ||
                         (location.city !== '' && location.country !== '')
@@ -119,10 +114,8 @@ const Card = ({ user }: any) => {
                     </p>
                 </div>
             </div>
-        )
-    } else {
-        return <div></div>
-    }
+        </div>
+    )
 }
 
 export default Card
diff --git a/src/components/CardList/CardList.module.scss b/src/components/CardList/CardList.module.scss
new file mode 100644
index 000000000..52ca1c279
--- /dev/null
+++ b/src/components/CardList/CardList.module.scss
@@ -0,0 +1,7 @@
+.CardList {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
+    gap: 1rem;
+    padding: 3rem 0;
+    width: 100%;
+}
diff --git a/src/components/CardList.tsx b/src/components/CardList/CardList.tsx
similarity index 56%
rename from src/components/CardList.tsx
rename to src/components/CardList/CardList.tsx
index 4a22966df..c0c2c85a3 100644
--- a/src/components/CardList.tsx
+++ b/src/components/CardList/CardList.tsx
@@ -1,15 +1,16 @@
 import React from 'react'
-import Card from './Card'
+import Card from '../Card/Card'
+import styles from './CardList.module.scss'
 
-import Person from '../interfaces/person'
+import Person from '../../interfaces/person'
 
 const CardList = ({ persons }: any) => {
     return (
-        <>
+        <div className={styles.CardList}>
             {persons.map((user: Person) => (
                 <Card key={user.id} user={user} />
             ))}
-        </>
+        </div>
     )
 }