diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 68efe4631..ee9d35161 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -5,8 +5,17 @@
   </component>
   <component name="ChangeListManager">
     <list default="true" id="53dd69d3-e01a-4656-b414-c727f5aa549a" name="Changes" comment="initial built from the ground up page done">
+      <change afterPath="$PROJECT_DIR$/src/components/PluginCard/index.js" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/components/PluginCard/index.module.css" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/components/PluginModal/index.js" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/components/PluginModal/index.module.css" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/hooks/useTheme.js" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/components/Sponsors/index.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/Sponsors/index.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/package.json" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/css/custom.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/css/custom.css" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/index.module.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/index.module.css" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/plugins.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/plugins.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/yarn.lock" beforeDir="false" afterPath="$PROJECT_DIR$/yarn.lock" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -44,9 +53,9 @@
   <component name="MarkdownSettingsMigration">
     <option name="stateVersion" value="1" />
   </component>
-  <component name="ProjectColorInfo"><![CDATA[{
-  "associatedIndex": 5
-}]]></component>
+  <component name="ProjectColorInfo">{
+  &quot;associatedIndex&quot;: 5
+}</component>
   <component name="ProjectId" id="2DJXFY4dwukGLOzXi05b6lHCkuk" />
   <component name="ProjectViewState">
     <option name="hideEmptyMiddlePackages" value="true" />
@@ -59,7 +68,7 @@
     "RunOnceActivity.OpenProjectViewOnStart": "true",
     "RunOnceActivity.ShowReadmeOnStart": "true",
     "WebServerToolWindowFactoryState": "false",
-    "git-widget-placeholder": "feat/sponsorpage",
+    "git-widget-placeholder": "main",
     "kotlin-language-version-configured": "true",
     "last_opened_file_path": "C:/Users/jacob/OneDrive/Desktop/Projects/sern/website",
     "node.js.detected.package.eslint": "true",
@@ -145,6 +154,7 @@
       <workItem from="1673974979200" duration="2385000" />
       <workItem from="1674757791435" duration="925000" />
       <workItem from="1713448008567" duration="8323000" />
+      <workItem from="1714235989637" duration="1092000" />
     </task>
     <task id="LOCAL-00001" summary="feat: remove old index.html in static/">
       <created>1660418841831</created>
diff --git a/package.json b/package.json
index e58785ced..105d87654 100644
--- a/package.json
+++ b/package.json
@@ -25,7 +25,8 @@
     "jsdoc-parse-plus": "^1.3.0",
     "prism-react-renderer": "^2.1.0",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-modal": "^3.16.1"
   },
   "devDependencies": {
     "@docusaurus/module-type-aliases": "3.0.0",
diff --git a/src/components/PluginCard/index.js b/src/components/PluginCard/index.js
new file mode 100644
index 000000000..9301f7eb3
--- /dev/null
+++ b/src/components/PluginCard/index.js
@@ -0,0 +1,28 @@
+import styles from './index.module.css'
+import PluginModal from "../PluginModal";
+
+export default function PluginCard({ plugin }) {
+    return (
+        <div className={styles.card}>
+            <div className={styles.cardHeader}>
+                <h3>{plugin.name}</h3>
+            </div>
+            <div className={styles.cardBody}>
+                <p>{plugin.description}</p>
+            </div>
+            <div className={styles.cardFooter}>
+                <PluginModal plugin={plugin} />
+            </div>
+        </div>
+    )
+}
+
+/*
+- description
+- hash
+- name
+- author
+- link
+- example
+- version
+ */
\ No newline at end of file
diff --git a/src/components/PluginCard/index.module.css b/src/components/PluginCard/index.module.css
new file mode 100644
index 000000000..a6159c0f0
--- /dev/null
+++ b/src/components/PluginCard/index.module.css
@@ -0,0 +1,32 @@
+.card {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    width: 25%;
+    height: 100%;
+    padding: 1rem;
+    border-radius: 0.5rem;
+    background-color: var(--color-white);
+    box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.2);
+}
+
+.cardHeader {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1rem;
+}
+.cardBody {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    height: 100%;
+}
+.cardFooter {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 1rem;
+    /* put on the right side of the footer */
+    margin-left: auto;
+}
\ No newline at end of file
diff --git a/src/components/PluginModal/index.js b/src/components/PluginModal/index.js
new file mode 100644
index 000000000..2ba8bf4c1
--- /dev/null
+++ b/src/components/PluginModal/index.js
@@ -0,0 +1,87 @@
+import React from 'react';
+import Modal from 'react-modal';
+import styles from "./index.module.css";
+import CodeBlock from "@theme/CodeBlock";
+import clsx from "clsx";
+import useTheme from "../../hooks/useTheme";
+
+const light = {
+    content: {
+        top: '50%',
+        left: '50%',
+        right: 'auto',
+        bottom: 'auto',
+        marginRight: '-50%',
+        transform: 'translate(-50%, -50%)',
+        width: "70vw",
+        height: "50vh",
+        backgroundColor: "#fff",
+    },
+};
+const dark = {
+    content: {
+        top: '50%',
+        left: '50%',
+        right: 'auto',
+        bottom: 'auto',
+        marginRight: '-50%',
+        transform: 'translate(-50%, -50%)',
+        width: "70vw",
+        height: "50vh",
+        backgroundColor: "#333",
+        color: "#fff"
+    },
+};
+
+export default function PluginModal({ plugin }) {
+    const [modalIsOpen, setIsOpen] = React.useState(false);
+    const [theme] = useTheme();
+    const [modalCSS, setModalCSS] = React.useState(theme === "dark" ? dark : light);
+    function openModal() {
+        setIsOpen(true);
+    }
+    function closeModal() {
+        setIsOpen(false);
+    }
+    React.useEffect(() => {
+        setModalCSS(theme === "dark" ? dark : light)
+    }, [theme])
+    return (
+        <div>
+            <button onClick={openModal}>Info</button>
+            <Modal
+                isOpen={modalIsOpen}
+                onRequestClose={closeModal}
+                style={modalCSS}
+                contentLabel={plugin.name}
+            >
+                <h2>{plugin.name} by {parseAuthor(plugin.author)}</h2>
+                <CodeBlock
+                    language="ts"
+                    title="/src/commands/ping.ts"
+                    showLineNumbers
+                >
+                    {plugin.example.replace('```ts', '').replace('```', '').trim()}
+                </CodeBlock>
+                <div className={styles.closeButton}>
+                    <button onClick={closeModal}>close</button>
+                </div>
+            </Modal>
+        </div>
+    );
+}
+
+function parseAuthor(aut) {
+    const [interestingStuff,] = aut.toString().replace(/[\]<>@]/g, "").split("[")
+    return interestingStuff.trim()
+}
+
+/*
+- description
+- hash
+- name
+- author
+- link
+- example
+- version
+ */
\ No newline at end of file
diff --git a/src/components/PluginModal/index.module.css b/src/components/PluginModal/index.module.css
new file mode 100644
index 000000000..01e86e41e
--- /dev/null
+++ b/src/components/PluginModal/index.module.css
@@ -0,0 +1,11 @@
+.closeButton {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    padding: 0.5rem;
+    cursor: pointer;
+}
+
+[data-theme='dark'] .modal {
+    background-color: var(--ifm-color-primary);
+}
\ No newline at end of file
diff --git a/src/css/custom.css b/src/css/custom.css
index ca43e5897..25cf35360 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -38,7 +38,27 @@
   --ifm-color-primary-light: #ffffff;
   --ifm-color-primary-lighter: #ffffff;
   --ifm-color-primary-lightest: #ffffff;
+    --ifm-background-color: #242526;
   --docusaurus-highlighted-code-line-bg: rgba(82, 78, 183, 0.3);
   --ifm-font-family-monospace: 'JetBrains Mono', 'Fira Code', 'Meslo NGF', 'Menlo', SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
    --ifm-navbar-background-color :#66002a
 }
+
+button {
+    background-color: var(--ifm-color-primary);
+    transition: background-color 0.3s;
+    color: var(--ifm-background-color);
+    border: none;
+    padding: 0.5rem 1rem;
+    border-radius: 0.5rem;
+    cursor: pointer;
+}
+button:hover {
+    /* change the color of the button when hovered, with a bit of a transition */
+    background-color: var(--ifm-color-primary-dark);
+    transition: background-color 0.3s;
+}
+/* replicate the button parallax that for example material design has */
+button:active {
+    transform: translateY(0.09rem);
+}
\ No newline at end of file
diff --git a/src/hooks/useTheme.js b/src/hooks/useTheme.js
new file mode 100644
index 000000000..fa411c6eb
--- /dev/null
+++ b/src/hooks/useTheme.js
@@ -0,0 +1,14 @@
+/* make a react hook which checks the data-theme */
+import { useEffect, useState } from "react";
+
+export default function useTheme() {
+    const [theme, setTheme] = useState(window.localStorage.getItem('theme'));
+
+    useEffect(() => {
+        window.addEventListener('storage', (e) => {
+            e.key === 'theme' && setTheme(e.newValue);
+        })
+    }, []);
+
+    return [theme, setTheme];
+}
\ No newline at end of file
diff --git a/src/pages/index.module.css b/src/pages/index.module.css
index 6aac2512b..cc4b6cef8 100644
--- a/src/pages/index.module.css
+++ b/src/pages/index.module.css
@@ -4,12 +4,15 @@
  */
 
 .heroBanner {
-  padding: 64px;
   text-align: center;
   position: relative;
   overflow: hidden;
 }
 
+.header {
+    padding: 1rem;
+}
+
 .buttons {
   display: flex;
   align-items: center;
@@ -22,6 +25,11 @@
   }
 }
 
-herotitle_font {
-  font-size: auto
+.cntnr {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    max-width: 1500px;
+    gap: 1rem;
+    margin: 2rem auto;
 }
\ No newline at end of file
diff --git a/src/pages/plugins.js b/src/pages/plugins.js
index 40692e5dc..845053476 100644
--- a/src/pages/plugins.js
+++ b/src/pages/plugins.js
@@ -2,17 +2,29 @@ import React from 'react';
 import Layout from '@theme/Layout';
 import clsx from "clsx";
 import styles from "./index.module.css";
+import PluginCard from "../components/PluginCard";
 
 export default function Plugins() {
+    const [pluginList, setPluginList] = React.useState([])
+    React.useEffect(() => {
+        const asyncFetch = async () => {
+            const response = await fetch('https://raw.githubusercontent.com/sern-handler/awesome-plugins/main/pluginlist.json')
+            const data = await response.json()
+            setPluginList(data)
+        }
+        asyncFetch()
+    }, [])
 
     return (
         <Layout>
-            <header className={clsx('hero hero--primary-darker', styles.heroBanner)}>
-                <h1 className={"hero__title"}>
-                    Coming soon
-                </h1>
-            </header>
-
+            <h1 className={styles.header}>
+                Plugins
+            </h1>
+            <div className={styles.cntnr}>
+                {pluginList.map(p => (
+                    <PluginCard plugin={p} key={p.hash} />
+                ))}
+            </div>
         </Layout>
     )
 }
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index a1bfe07b5..bad6b94ea 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4171,6 +4171,11 @@ execa@^5.0.0:
     signal-exit "^3.0.3"
     strip-final-newline "^2.0.0"
 
+exenv@^1.2.0:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/exenv/-/exenv-1.2.2.tgz#2ae78e85d9894158670b03d47bec1f03bd91bb9d"
+  integrity sha512-Z+ktTxTwv9ILfgKCk32OX3n/doe+OcLTRtqK9pcL+JsP3J1/VW8Uvl4ZjLlKqeW4rzK4oesDOGMEMRIZqtP4Iw==
+
 express@^4.17.3:
   version "4.19.2"
   resolved "https://registry.yarnpkg.com/express/-/express-4.19.2.tgz#e25437827a3aa7f2a827bc8171bbbb664a356465"
@@ -7307,7 +7312,7 @@ react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
-react-lifecycles-compat@~3.0.4:
+react-lifecycles-compat@^3.0.0, react-lifecycles-compat@~3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
   integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
@@ -7319,6 +7324,16 @@ react-loadable-ssr-addon-v5-slorber@^1.0.1:
   dependencies:
     "@babel/runtime" "^7.10.3"
 
+react-modal@^3.16.1:
+  version "3.16.1"
+  resolved "https://registry.yarnpkg.com/react-modal/-/react-modal-3.16.1.tgz#34018528fc206561b1a5467fc3beeaddafb39b2b"
+  integrity sha512-VStHgI3BVcGo7OXczvnJN7yT2TWHJPDXZWyI/a0ssFNhGZWsPmB8cF0z33ewDXq4VfYMO1vXgiv/g8Nj9NDyWg==
+  dependencies:
+    exenv "^1.2.0"
+    prop-types "^15.7.2"
+    react-lifecycles-compat "^3.0.0"
+    warning "^4.0.3"
+
 react-router-config@^5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/react-router-config/-/react-router-config-5.1.1.tgz#0f4263d1a80c6b2dc7b9c1902c9526478194a988"
@@ -8614,6 +8629,13 @@ wait-on@^7.0.1:
     minimist "^1.2.8"
     rxjs "^7.8.1"
 
+warning@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"
+  integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==
+  dependencies:
+    loose-envify "^1.0.0"
+
 watchpack@^2.4.1:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-2.4.1.tgz#29308f2cac150fa8e4c92f90e0ec954a9fed7fff"