diff --git a/components/styles/content.tsx b/components/styles/content.tsx
index ef3281b..31c35d8 100644
--- a/components/styles/content.tsx
+++ b/components/styles/content.tsx
@@ -49,11 +49,11 @@ const CardStyle = css`
   height: 240px;
 `;
 
-const CardLink = styled(Link)`
+export const CardLink = styled(Link)`
   ${CardStyle}
 `;
 
-const CardStyleWrap = styled.div`
+export const CardStyleWrap = styled.div`
   ${CardStyle}
 `;
 
diff --git a/pages/index.tsx b/pages/index.tsx
index 0071a3a..6ca59a4 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,6 +1,6 @@
 import Head from 'next/head'
 import Link from 'next/link';
-import { PageTitle, PageDescription, PageContentBox, PageCard } from '../components/styles/content';
+import { PageTitle, PageDescription, PageContentBox, PageCard, CardLink } from '../components/styles/content';
 
 export default function Home() {
   return (
@@ -18,26 +18,26 @@ export default function Home() {
         Feel free to look around
       </PageDescription>
       <PageContentBox>
-        <PageCard key="about">
-          <Link href="/about">
+        <CardLink key="about" href="/about">
+          <PageCard>
             <h2>About &rarr;</h2>
             <p>Useless Info, don&apos;t bother</p>
-          </Link>
-        </PageCard>
+          </PageCard>
+        </CardLink>
 
-        <PageCard key="servers">
-          <Link href="/games">
+        <CardLink key="servers" href="/games">
+          <PageCard>
             <h2>Games &rarr;</h2>
             <p>List of all available Servers</p>
-          </Link>
-        </PageCard>
+          </PageCard>
+        </CardLink>
 
-        <PageCard key="services">
-          <Link href="/services">
+        <CardLink key="services" href="/services">
+          <PageCard>
             <h2>Services &rarr;</h2>
             <p>List of available Services</p>
-          </Link>
-        </PageCard>
+          </PageCard>
+        </CardLink>
       </PageContentBox>
     </>
   )