diff --git a/components/styles/content.tsx b/components/styles/content.tsx
new file mode 100644
index 0000000..14e7493
--- /dev/null
+++ b/components/styles/content.tsx
@@ -0,0 +1,98 @@
+import Link from 'next/link'
+import styled, { DefaultTheme } from 'styled-components'
+import { CustomLink } from '../../interfaces/LinkTypes';
+
+// needed for Online Status checks
+// TODO: migrate to shared Status type for Games and Services
+interface OnlinePropType {
+  status: string;
+}
+
+// replaces .title
+export const PageTitle = styled.h1`
+  margin: 0;
+  line-height: 1.15;
+  font-size: 4rem;
+  text-align: center;
+`
+
+// replaces .description
+export const PageDescription = styled.p`
+  margin: 4rem 0;
+  line-height: 1.5;
+  font-size: 1.5rem;
+  text-align: center;
+`
+
+// replaces .grid
+export const PageContentBox = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  max-width: 80%;
+`
+
+// replaces .card & .contentcard
+export const PageCard = styled.div`
+  margin: 1rem;
+  padding: 1rem;
+  text-align: center;
+  color: ${({ theme }) => theme.colors.primary};
+  text-decoration: none;
+  border: 1px solid;
+  border-radius: 10px;
+  border-color: ${({ theme }) => theme.colors.primary};
+  transition: color 0.15s ease, border-color 0.15s ease;
+  max-width: 300px;
+
+  h2 {
+    margin: 0 0 1rem 0;
+    font-size: 1.5rem; 
+  }
+
+  p {
+    margin: 0;
+    font-size: 1.25rem;
+    line-height: 1.5;
+  }
+
+  &:focus,:active,:hover {
+    color: ${({ theme }) => theme.colors.secondary};
+    border-color: ${({ theme }) => theme.colors.secondary};
+  }
+`
+
+const OnlineStatus = styled.p<OnlinePropType>`
+  color: ${props => {
+    let ret;
+    switch (props.status) {
+      case "Online":
+        ret = ({ theme }: { theme: DefaultTheme }) => theme.colors.online;
+        break;
+      case "Loading":
+        ret = ({ theme }: { theme: DefaultTheme }) => theme.colors.loading;
+        break;
+      case "Offline":
+        ret = ({ theme }: { theme: DefaultTheme }) => theme.colors.offline;
+        break;
+      default:
+        ret = ({ theme }: { theme: DefaultTheme }) => theme.colors.offline;
+    }
+    return ret;
+  }};
+`
+
+// Card Content Component for Games Page
+export const PageCardContentGame = ({ content }: { content: CustomLink }) => {
+  return (
+    <>
+      <h2>{content.name}</h2>
+      <p>{content.desc}</p>
+      <p>{content.ip}</p>
+      <OnlineStatus status={content.status}>{content.status}</OnlineStatus>
+    </>
+  )
+}
+
+// Card Content Component for Services Page
\ No newline at end of file
diff --git a/components/themes.tsx b/components/themes.tsx
index 77ee5ac..a9cf0ab 100644
--- a/components/themes.tsx
+++ b/components/themes.tsx
@@ -30,6 +30,9 @@ export const lightTheme: DefaultTheme = {
     background: '#ffffff',
     primary: '#00aaff',
     secondary:'#ffaa00',
+    online: '#00ff00',
+    loading: '#ff5300',
+    offline: '#ff0000',
   },
 }
 
@@ -40,7 +43,10 @@ export const darkTheme: DefaultTheme = {
     background: '#1f1f1f',
     primary: '#00aaff',
     secondary:'#ffaa00',
-  },
+    online: '#00ff00',
+    loading: '#ff5300',
+    offline: '#ff0000',
+    },
 }
 
 export const amoledTheme: DefaultTheme = {
@@ -50,6 +56,9 @@ export const amoledTheme: DefaultTheme = {
     background: '#000000',
     primary: '#00aaff',
     secondary:'#ffaa00',
+    online: '#00ff00',
+    loading: '#ff5300',
+    offline: '#ff0000',
   },
 }
 
@@ -60,5 +69,8 @@ export const amoled2Theme: DefaultTheme = {
     background: '#000000',
     primary: '#00ffaa',
     secondary:'#aa00ff',
+    online: '#00ff00',
+    loading: '#ff5300',
+    offline: '#ff0000',
   },
 }
\ No newline at end of file
diff --git a/pages/about.tsx b/pages/about.tsx
index 31e710f..4874605 100644
--- a/pages/about.tsx
+++ b/pages/about.tsx
@@ -1,20 +1,21 @@
 import Head from 'next/head'
-import styles from '/styles/Home.module.css'
+import { PageDescription, PageTitle } from '../components/styles/content'
 
 export default function About() {
   return (
     <>
       <Head>
-        <title>Neshura Servers</title>
+        <title>Neshweb - About</title>
         <meta charSet='utf-8' />
         <link rel="icon" href="/favicon.ico" />
       </Head>
-      <h1 className={styles.title}>
+
+      <PageTitle>
         About
-      </h1>
-      <p className={styles.description}>
+      </PageTitle>
+      <PageDescription>
         This website is primarily for managing my game servers in one spot
-      </p>
+      </PageDescription>
     </>
   )
 }
diff --git a/pages/games.tsx b/pages/games.tsx
index 8bc6145..a22941b 100644
--- a/pages/games.tsx
+++ b/pages/games.tsx
@@ -1,53 +1,50 @@
 import Head from 'next/head'
-import Link from 'next/link'
 import styles from '/styles/Home.module.css'
 import fsPromises from 'fs/promises'
 import path from 'path'
 import type { CustomLink, EntryList } from '../interfaces/LinkTypes'
+import { PageContentBox, PageCard, PageDescription, PageTitle, PageCardContentGame } from '../components/styles/content'
+import Link from 'next/link'
 
 function Servers(props: EntryList) {
   const serverList = props.games
   return (
     <>
       <Head>
-        <title>Neshura Servers</title>
+        <title>Neshweb - Games</title>
         <meta charSet='utf-8' />
         <link rel="icon" href="/favicon.ico" />
       </Head>
 
-      <h1 className={styles.title}>
+      <PageTitle>
         Server List
-      </h1>
+      </PageTitle>
 
-      <p className={styles.description}>
+      <PageDescription>
         Lists all available Services, probably up-to-date
-      </p>
-      <div className={styles.grid}>
+      </PageDescription>
+
+      <PageContentBox>
         {Object.values(serverList).map((item: CustomLink) => {
           if (item.href != null) {
             return (
-              <Link className={styles.contentcard} key={item.name} href={item.href}>
-                <div className={styles.contenttitle}><h2>{item.name}</h2></div>
-                <div><p>{item.desc}</p></div>
-                <div><p>{item.ip}</p></div>
-                <div className={item.status == "Online" ? styles.contentonline : styles.contentoffline}><p>{item.status}</p></div>
-              </Link>
+              <PageCard key={item.name}>
+                <Link href={item.href}>
+                  <PageCardContentGame content={item} />
+                </Link>
+              </PageCard>
             )
           }
           else {
             return (
-              <a key={item.name} className={styles.contentcardstatic}>
-                <div className={styles.contenttitle}><h2>{item.name}</h2></div>
-                <div><p>{item.desc}</p></div>
-                <div><p>{item.ip}</p></div>
-                <div className={item.status == "Online" ? styles.contentonline : styles.contentoffline}><p>{item.status}</p></div>
-              </a>
+              <PageCard key={item.name}>
+                <PageCardContentGame content={item} />
+              </PageCard>
             )
           }
         }
-
         )}
-      </div>
+      </PageContentBox>
     </>
   )
 }
diff --git a/pages/index.tsx b/pages/index.tsx
index 6941081..0071a3a 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,39 +1,44 @@
 import Head from 'next/head'
-import Link from 'next/link'
-import styles from '/styles/Home.module.css'
+import Link from 'next/link';
+import { PageTitle, PageDescription, PageContentBox, PageCard } from '../components/styles/content';
 
 export default function Home() {
   return (
     <>
       <Head>
-      <title>Neshweb - Home</title>
+        <title>Neshweb - Home</title>
         <meta charSet='utf-8' />
         <link rel="icon" href="/favicon.ico" />
       </Head>
-      <h1 className={styles.title}>
+      <PageTitle>
         Welcome to my Servers Webpage
-      </h1>
+      </PageTitle>
 
-      <p className={styles.description}>
+      <PageDescription>
         Feel free to look around
-      </p>
-      <div className={styles.grid}>
-        <Link className={styles.card} key="about" href="/about">
-          <h2>About &rarr;</h2>
-          <p>Useless Info, don&apos;t bother</p>
-        </Link>
+      </PageDescription>
+      <PageContentBox>
+        <PageCard key="about">
+          <Link href="/about">
+            <h2>About &rarr;</h2>
+            <p>Useless Info, don&apos;t bother</p>
+          </Link>
+        </PageCard>
 
-        <Link className={styles.card} key="servers" href="/games">
-          <h2>Games &rarr;</h2>
-          <p>List of all available Servers</p>
-        </Link>
+        <PageCard key="servers">
+          <Link href="/games">
+            <h2>Games &rarr;</h2>
+            <p>List of all available Servers</p>
+          </Link>
+        </PageCard>
 
-        <Link className={styles.card} key="services" href="/services">
-          <h2>Services &rarr;</h2>
-          <p>List of available Services</p>
-        </Link>
-
-      </div>
+        <PageCard key="services">
+          <Link href="/services">
+            <h2>Services &rarr;</h2>
+            <p>List of available Services</p>
+          </Link>
+        </PageCard>
+      </PageContentBox>
     </>
   )
 }
\ No newline at end of file
diff --git a/styled.d.ts b/styled.d.ts
index b1622af..c71f269 100644
--- a/styled.d.ts
+++ b/styled.d.ts
@@ -8,6 +8,9 @@ declare module 'styled-components' {
       background: string,
       primary: string,
       secondary: string,
+      online: string,
+      loading: string,
+      offline: string,
     }
   }
 }
\ No newline at end of file
diff --git a/styles/Home.module.css b/styles/Home.module.css
index 1fed657..6a80c0c 100644
--- a/styles/Home.module.css
+++ b/styles/Home.module.css
@@ -2,72 +2,6 @@
   padding: 0 2rem;
 }
 
-.main {
-  color: var(--def-blue);
-  min-height: 100vh;
-  padding: 1rem 0;
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  align-items: center;
-}
-
-.navbar {
-  display: flex;
-  flex: 1;
-  padding: 2rem 0;
-  border-bottom: 1px solid var(--def-blue);
-  flex-wrap: nowrap;
-  justify-content: center;
-  align-items: center;
-
-}
-
-.navelem {
-  width: auto;
-  color: var(--def-blue);
-  margin: 0.2rem;
-  border: 1px solid;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-grow: 0.05;
-}
-
-.navelem:hover {
-  color: var(--def-orange);
-  background-color: var(--black-1e);
-}
-
-.navelem_active {
-  width: auto;
-  color: var(--def-orange);
-  margin: 0.2rem;
-  border: 1px solid;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-grow: 0.05;
-}
-
-.footer {
-  color: var(--def-blue);
-  display: flex;
-  flex: 1;
-  padding: 2rem 0;
-  border-top: 1px solid var(--def-blue);
-  justify-content: center;
-  align-items: center;
-}
-
-.footer a {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-grow: 1;
-}
-
 .title a {
   color: var(--def-orange);
   text-decoration: none;
@@ -79,23 +13,6 @@
   text-decoration: underline;
 }
 
-.title {
-  margin: 0;
-  line-height: 1.15;
-  font-size: 4rem;
-}
-
-.title,
-.description {
-  text-align: center;
-}
-
-.description {
-  margin: 4rem 0;
-  line-height: 1.5;
-  font-size: 1.5rem;
-}
-
 .code {
   background: var(--black-1e);
   border-radius: 5px;
@@ -105,39 +22,6 @@
     Bitstream Vera Sans Mono, Courier New, monospace;
 }
 
-.grid {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-wrap: wrap;
-  max-width: 80%;
-}
-
-.statusOffline {
-  color: var(--def-red);
-}
-
-.statusOnline {
-  color: var(--def-green);
-}
-
-.statusLoading {
-  color: var(--def-orange);
-}
-
-.contentcard {
-  margin: 1rem;
-  padding: 1rem;
-  text-align: center;
-  color: inherit;
-  text-decoration: none;
-  border: 1px solid var(--black-2d);
-  border-radius: 10px;
-  border-color: var(--def-blue);
-  transition: color 0.15s ease, border-color 0.15s ease;
-  max-width: 300px;
-}
-
 .contentcardstatic {
   margin: 1rem;
   padding: 1rem;
@@ -177,37 +61,6 @@
   height: 1.5rem;
 }
 
-.card {
-  margin: 1rem;
-  padding: 1.5rem;
-  text-align: left;
-  color: inherit;
-  text-decoration: none;
-  border: 1px solid var(--black-2d);
-  border-radius: 10px;
-  border-color: var(--def-blue);
-  transition: color 0.15s ease, border-color 0.15s ease;
-  max-width: 300px;
-}
-
-.card:hover,
-.card:focus,
-.card:active {
-  color: var(--def-orange);
-  border-color: var(--def-orange);
-}
-
-.card h2 {
-  margin: 0 0 1rem 0;
-  font-size: 1.5rem;
-}
-
-.card p {
-  margin: 0;
-  font-size: 1.25rem;
-  line-height: 1.5;
-}
-
 .cardwarn {
   color: var(--def-orange);
 }