diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 0000000..20fccdd
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1,30 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
diff --git a/.prettierrc.json b/.prettierrc.json
new file mode 100644
index 0000000..0967ef4
--- /dev/null
+++ b/.prettierrc.json
@@ -0,0 +1 @@
+{}
diff --git a/package-lock.json b/package-lock.json
index 3e4bb54..7814fe2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5,6 +5,10 @@
   "packages": {
     "": {
       "dependencies": {
+        "@fortawesome/fontawesome-svg-core": "^6.4.0",
+        "@fortawesome/free-regular-svg-icons": "^6.4.0",
+        "@fortawesome/free-solid-svg-icons": "^6.4.0",
+        "@fortawesome/react-fontawesome": "^0.2.0",
         "next": "latest",
         "react": "18.2.0",
         "react-dom": "18.2.0"
@@ -14,6 +18,8 @@
         "@types/react": "18.2.14",
         "autoprefixer": "^10.4.14",
         "postcss": "^8.4.25",
+        "prettier": "^3.0.0",
+        "prettier-plugin-tailwindcss": "^0.4.0",
         "tailwindcss": "^3.3.2",
         "typescript": "5.1.3"
       }
@@ -30,6 +36,63 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@fortawesome/fontawesome-common-types": {
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.4.0.tgz",
+      "integrity": "sha512-HNii132xfomg5QVZw0HwXXpN22s7VBHQBv9CeOu9tfJnhsWQNd2lmTNi8CSrnw5B+5YOmzu1UoPAyxaXsJ6RgQ==",
+      "hasInstallScript": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/fontawesome-svg-core": {
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.4.0.tgz",
+      "integrity": "sha512-Bertv8xOiVELz5raB2FlXDPKt+m94MQ3JgDfsVbrqNpLU9+UE2E18GKjLKw+d3XbeYPqg1pzyQKGsrzbw+pPaw==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.4.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-regular-svg-icons": {
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.4.0.tgz",
+      "integrity": "sha512-ZfycI7D0KWPZtf7wtMFnQxs8qjBXArRzczABuMQqecA/nXohquJ5J/RCR77PmY5qGWkxAZDxpnUFVXKwtY/jPw==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.4.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-solid-svg-icons": {
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.4.0.tgz",
+      "integrity": "sha512-kutPeRGWm8V5dltFP1zGjQOEAzaLZj4StdQhWVZnfGFCvAPVvHh8qk5bRrU4KXnRRRNni5tKQI9PBAdI6MP8nQ==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.4.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/react-fontawesome": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.0.tgz",
+      "integrity": "sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw==",
+      "dependencies": {
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "@fortawesome/fontawesome-svg-core": "~1 || ~6",
+        "react": ">=16.3"
+      }
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
@@ -981,7 +1044,6 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
       "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -1185,6 +1247,105 @@
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
       "dev": true
     },
+    "node_modules/prettier": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.0.0.tgz",
+      "integrity": "sha512-zBf5eHpwHOGPC47h0zrPyNn+eAEIdEzfywMoYn2XPi0P44Zp0tSq64rq0xAREh4auw2cJZHo9QUob+NqCQky4g==",
+      "dev": true,
+      "bin": {
+        "prettier": "bin/prettier.cjs"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
+    "node_modules/prettier-plugin-tailwindcss": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.4.0.tgz",
+      "integrity": "sha512-Rna0sDPETA0KNhMHlN8wxKNgfSa8mTl2hPPAGxnbv6tUcHT6J4RQmQ8TLXyhB7Dm5Von4iHloBxTyClYM6wT0A==",
+      "dev": true,
+      "engines": {
+        "node": ">=12.17.0"
+      },
+      "peerDependencies": {
+        "@ianvs/prettier-plugin-sort-imports": "*",
+        "@prettier/plugin-pug": "*",
+        "@shopify/prettier-plugin-liquid": "*",
+        "@shufo/prettier-plugin-blade": "*",
+        "@trivago/prettier-plugin-sort-imports": "*",
+        "prettier": "^2.2 || ^3.0",
+        "prettier-plugin-astro": "*",
+        "prettier-plugin-css-order": "*",
+        "prettier-plugin-import-sort": "*",
+        "prettier-plugin-jsdoc": "*",
+        "prettier-plugin-marko": "*",
+        "prettier-plugin-organize-attributes": "*",
+        "prettier-plugin-organize-imports": "*",
+        "prettier-plugin-style-order": "*",
+        "prettier-plugin-svelte": "*",
+        "prettier-plugin-twig-melody": "*"
+      },
+      "peerDependenciesMeta": {
+        "@ianvs/prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "@prettier/plugin-pug": {
+          "optional": true
+        },
+        "@shopify/prettier-plugin-liquid": {
+          "optional": true
+        },
+        "@shufo/prettier-plugin-blade": {
+          "optional": true
+        },
+        "@trivago/prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "prettier-plugin-astro": {
+          "optional": true
+        },
+        "prettier-plugin-css-order": {
+          "optional": true
+        },
+        "prettier-plugin-import-sort": {
+          "optional": true
+        },
+        "prettier-plugin-jsdoc": {
+          "optional": true
+        },
+        "prettier-plugin-marko": {
+          "optional": true
+        },
+        "prettier-plugin-organize-attributes": {
+          "optional": true
+        },
+        "prettier-plugin-organize-imports": {
+          "optional": true
+        },
+        "prettier-plugin-style-order": {
+          "optional": true
+        },
+        "prettier-plugin-svelte": {
+          "optional": true
+        },
+        "prettier-plugin-twig-melody": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "dependencies": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -1228,6 +1389,11 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -1553,6 +1719,43 @@
       "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
       "dev": true
     },
+    "@fortawesome/fontawesome-common-types": {
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.4.0.tgz",
+      "integrity": "sha512-HNii132xfomg5QVZw0HwXXpN22s7VBHQBv9CeOu9tfJnhsWQNd2lmTNi8CSrnw5B+5YOmzu1UoPAyxaXsJ6RgQ=="
+    },
+    "@fortawesome/fontawesome-svg-core": {
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.4.0.tgz",
+      "integrity": "sha512-Bertv8xOiVELz5raB2FlXDPKt+m94MQ3JgDfsVbrqNpLU9+UE2E18GKjLKw+d3XbeYPqg1pzyQKGsrzbw+pPaw==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "6.4.0"
+      }
+    },
+    "@fortawesome/free-regular-svg-icons": {
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.4.0.tgz",
+      "integrity": "sha512-ZfycI7D0KWPZtf7wtMFnQxs8qjBXArRzczABuMQqecA/nXohquJ5J/RCR77PmY5qGWkxAZDxpnUFVXKwtY/jPw==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "6.4.0"
+      }
+    },
+    "@fortawesome/free-solid-svg-icons": {
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.4.0.tgz",
+      "integrity": "sha512-kutPeRGWm8V5dltFP1zGjQOEAzaLZj4StdQhWVZnfGFCvAPVvHh8qk5bRrU4KXnRRRNni5tKQI9PBAdI6MP8nQ==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "6.4.0"
+      }
+    },
+    "@fortawesome/react-fontawesome": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.0.tgz",
+      "integrity": "sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw==",
+      "requires": {
+        "prop-types": "^15.8.1"
+      }
+    },
     "@jridgewell/gen-mapping": {
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
@@ -2193,8 +2396,7 @@
     "object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg=="
     },
     "object-hash": {
       "version": "3.0.0",
@@ -2312,6 +2514,29 @@
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
       "dev": true
     },
+    "prettier": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.0.0.tgz",
+      "integrity": "sha512-zBf5eHpwHOGPC47h0zrPyNn+eAEIdEzfywMoYn2XPi0P44Zp0tSq64rq0xAREh4auw2cJZHo9QUob+NqCQky4g==",
+      "dev": true
+    },
+    "prettier-plugin-tailwindcss": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.4.0.tgz",
+      "integrity": "sha512-Rna0sDPETA0KNhMHlN8wxKNgfSa8mTl2hPPAGxnbv6tUcHT6J4RQmQ8TLXyhB7Dm5Von4iHloBxTyClYM6wT0A==",
+      "dev": true,
+      "requires": {}
+    },
+    "prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "requires": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
     "queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -2335,6 +2560,11 @@
         "scheduler": "^0.23.0"
       }
     },
+    "react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
     "read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
diff --git a/package.json b/package.json
index 3ffcc1c..e24bf8d 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,10 @@
     "start": "next start"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.4.0",
+    "@fortawesome/free-regular-svg-icons": "^6.4.0",
+    "@fortawesome/free-solid-svg-icons": "^6.4.0",
+    "@fortawesome/react-fontawesome": "^0.2.0",
     "next": "latest",
     "react": "18.2.0",
     "react-dom": "18.2.0"
@@ -15,6 +19,8 @@
     "@types/react": "18.2.14",
     "autoprefixer": "^10.4.14",
     "postcss": "^8.4.25",
+    "prettier": "^3.0.0",
+    "prettier-plugin-tailwindcss": "^0.4.0",
     "tailwindcss": "^3.3.2",
     "typescript": "5.1.3"
   }
diff --git a/src/components/Deck.tsx b/src/components/Deck.tsx
new file mode 100644
index 0000000..d2db56a
--- /dev/null
+++ b/src/components/Deck.tsx
@@ -0,0 +1,79 @@
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import ProgressRing from "./ProgressRing";
+import { IconProp } from "@fortawesome/fontawesome-svg-core";
+
+type rgbColor = string;
+
+export interface DeckProps {
+  title: string;
+  completedCards: number;
+  totalCards: number;
+  icon: IconProp;
+  nextReview: Date;
+  bgColor: rgbColor;
+  shadowColor: rgbColor;
+}
+
+export default function Deck({
+  title,
+  completedCards,
+  totalCards,
+  icon,
+  nextReview,
+  bgColor,
+  shadowColor,
+}: DeckProps) {
+  const daysUntilNextReview = Math.ceil(
+    (nextReview.getTime() - new Date().getTime()) / (1000 * 60 * 60 * 24),
+  );
+
+  let badgeBgColor, badgeTextColor, badgeText;
+  if (daysUntilNextReview <= 0) {
+    badgeBgColor = "bg-rose-500";
+    badgeTextColor = "rgb(255, 255, 255)";
+    badgeText = "Due for review";
+  } else {
+    badgeBgColor = "bg-white";
+    badgeTextColor = bgColor;
+    badgeText = `Next review in ${daysUntilNextReview} days`;
+  }
+
+  return (
+    <article
+      id="card"
+      className={"rounded-2xl"}
+      style={{
+        backgroundColor: bgColor,
+        boxShadow: `0px 8px 0px 0px ${shadowColor}`,
+      }}
+    >
+      <div id={"card-content"} className={"flex flex-col p-4"}>
+        <div
+          id={"progress-container"}
+          className={"flex flex-col items-center justify-center"}
+        >
+          <ProgressRing
+            radius={60}
+            strokeWidth={8}
+            progress={completedCards / totalCards}
+          />
+          <figure className={"absolute"}>
+            <FontAwesomeIcon icon={icon} size={"4x"} className={"text-white"} />
+          </figure>
+        </div>
+        <div className={"flex items-center justify-between py-2"}>
+          <h1 className={"text-3xl font-serif text-white"}>{title}</h1>
+          <h2 className={"text-2xl font-sans text-white"}>
+            {completedCards}/{totalCards}
+          </h2>
+        </div>
+        <p
+          className={`w-fit px-2 font-sans ${badgeBgColor} rounded-md`}
+          style={{ color: badgeTextColor }}
+        >
+          {badgeText}
+        </p>
+      </div>
+    </article>
+  );
+}
diff --git a/src/components/ProgressRing.tsx b/src/components/ProgressRing.tsx
new file mode 100644
index 0000000..8619d7e
--- /dev/null
+++ b/src/components/ProgressRing.tsx
@@ -0,0 +1,42 @@
+interface ProgressRingProps {
+  radius: number;
+  strokeWidth: number;
+  progress: number;
+}
+
+export default function ProgressRing({
+  radius,
+  strokeWidth,
+  progress,
+}: ProgressRingProps) {
+  const [width, height] = Array(2).fill(2 * (radius + strokeWidth));
+  const circumference = 2 * Math.PI * radius;
+
+  const offset = circumference - progress * circumference;
+
+  return (
+    <svg id={"progress-ring"} width={width} height={height}>
+      <circle
+        className={"text-white opacity-25"}
+        stroke={"currentColor"}
+        strokeWidth={strokeWidth}
+        fill={"transparent"}
+        r={radius}
+        cx={width / 2}
+        cy={height / 2}
+      />
+      <circle
+        className={"text-white"}
+        stroke={"currentColor"}
+        strokeWidth={strokeWidth * 1.1}
+        strokeDasharray={`${circumference} ${circumference}`}
+        strokeDashoffset={offset}
+        strokeLinecap="round"
+        fill={"transparent"}
+        r={radius}
+        cx={width / 2}
+        cy={height / 2}
+      />
+    </svg>
+  );
+}
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index ea5f561..e5f4341 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -1,5 +1,8 @@
-import '../styles/globals.css'
+import "../styles/globals.css";
+import { config } from "@fortawesome/fontawesome-svg-core";
+import "@fortawesome/fontawesome-svg-core/styles.css";
+config.autoAddCss = false;
 
 export default function MyApp({ Component, pageProps }) {
-  return <Component {...pageProps} />
-}
\ No newline at end of file
+  return <Component {...pageProps} />;
+}
diff --git a/src/pages/decks.tsx b/src/pages/decks.tsx
index 6c14f11..83cf845 100644
--- a/src/pages/decks.tsx
+++ b/src/pages/decks.tsx
@@ -1,47 +1,31 @@
-import { Deck } from "../ts/types.ts"
-import deckstyle from "../styles/Deck.module.css";
-import Image from 'next/image';
-import { useState } from "react";
-import Link from "next/link";
-
-function DeckComponent(props: Deck) {
-  return (
-    <article className={deckstyle["card"]}>
-      <header className={deckstyle["card-header"]}>
-        <p>Created on: {props.created_on.toLocaleDateString()}, {props.created_on.toLocaleTimeString()}</p>
-        <h2>{props.name}</h2>
-      </header>
-
-      <Link href={`/decks/${props.id}/`}>Go to Deck Info</Link>
-      <Link href={`/decks/${props.id}/reviews`}>Go to reviews</Link>
-
-      <div className={deckstyle["card-author"]}>
-        <a className={deckstyle["author-avatar"]} href="#">
-          <Image src="/jsl.png" alt='jsl' width={48} height={48}/>
-        </a>
-        <svg className={deckstyle["half-circle"]} viewBox="0 0 106 57">
-          <path d="M102 4c0 27.1-21.9 49-49 49S4 31.1 4 4"></path>
-        </svg>
-
-        <div className={deckstyle["author-name"]}>
-          <div className={deckstyle["author-name-prefix"]}>SRS Application</div>
-        </div>
-      </div>
-    </article>
-  );
-}
+import Deck, { DeckProps } from '@/components/Deck'
+import { faLemon } from "@fortawesome/free-solid-svg-icons";
 
 export default function Decks(props: {decks: Array<{name: string, created_on: string, id: number}>}) {
   // turn it into decks as necessary
-  const decks: Array<Deck> = props.decks.map(
-    (deck) => new Deck(deck["name"], deck["created_on"], deck["id"])
+  const decks: DeckProps[] = props.decks.map(
+    (deck) => ({
+      title: deck["name"],
+      completedCards: 0,
+      totalCards: 10,
+      icon: faLemon,
+      nextReview: new Date(),
+      bgColor:"rgb(139, 92, 246)",
+      shadowColor:"rgb(91, 33, 182)"
+    })
   );
 
-  return <section className={deckstyle["card-list"]}>
-    {decks.map((deck: Deck, key: number) => {
-      return <DeckComponent {...deck} key={key}/>
-    })}
-  </section>;
+  return (
+    <div
+      className={
+        "grid sm:grid-col-1 md:grid-col-2 lg:grid-cols-3 xl:grid-cols-4 gap-4"
+      }
+    >
+      {decks.map((deck: DeckProps, key: number) => {
+        return <Deck {...deck} key={key}/>
+      })}
+    </div>
+  )
 }
 
 export async function getStaticProps() {
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 07911f9..d1e1ecc 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -1,4 +1,8 @@
 @import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&display=swap');
+/* Averia Serif Libre -- Set as our default Tailwind serif font */
+@import url('https://fonts.googleapis.com/css2?family=Averia+Serif+Libre:ital,wght@0,400;0,700;1,400;1,700&display=swap');
+/* Rubik -- Set as our default sans-serif font */
+@import url('https://fonts.googleapis.com/css2?family=Rubik&display=swap');
 
 @tailwind base;
 @tailwind components;
diff --git a/src/ts/types.ts b/src/ts/types.ts
index 3cb1eda..b893817 100644
--- a/src/ts/types.ts
+++ b/src/ts/types.ts
@@ -1,5 +1,5 @@
 // defining common types to use throughout
-export class Deck {
+export class DeckInType {
   name: string;
   created_on: Date;
   id: number;
diff --git a/tailwind.config.js b/tailwind.config.js
index 85b9ae1..ac1a82a 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,11 +1,13 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: [
-    "./src/**/*.{js,ts,jsx,tsx,mdx}"
-  ],
+  content: ["./src/**/*.{js,ts,jsx,tsx,mdx}"],
   theme: {
-    extend: {},
+    extend: {
+      fontFamily: {
+        serif: ["Averia Serif Libre"],
+        sans: ["Rubik"],
+      },
+    },
   },
   plugins: [],
-}
-
+};