diff --git a/src/assets/icons/discord.svg b/public/assets/icons/discord.svg
similarity index 100%
rename from src/assets/icons/discord.svg
rename to public/assets/icons/discord.svg
diff --git a/src/assets/icons/github.svg b/public/assets/icons/github.svg
similarity index 100%
rename from src/assets/icons/github.svg
rename to public/assets/icons/github.svg
diff --git a/src/assets/icons/gitlab.svg b/public/assets/icons/gitlab.svg
similarity index 100%
rename from src/assets/icons/gitlab.svg
rename to public/assets/icons/gitlab.svg
diff --git a/src/assets/icons/keybase.svg b/public/assets/icons/keybase.svg
similarity index 100%
rename from src/assets/icons/keybase.svg
rename to public/assets/icons/keybase.svg
diff --git a/src/assets/icons/mail.svg b/public/assets/icons/mail.svg
similarity index 100%
rename from src/assets/icons/mail.svg
rename to public/assets/icons/mail.svg
diff --git a/src/assets/icons/mastodon.svg b/public/assets/icons/mastodon.svg
similarity index 100%
rename from src/assets/icons/mastodon.svg
rename to public/assets/icons/mastodon.svg
diff --git a/src/assets/icons/matrix.svg b/public/assets/icons/matrix.svg
similarity index 100%
rename from src/assets/icons/matrix.svg
rename to public/assets/icons/matrix.svg
diff --git a/src/assets/icons/twitter.svg b/public/assets/icons/twitter.svg
similarity index 100%
rename from src/assets/icons/twitter.svg
rename to public/assets/icons/twitter.svg
diff --git a/src/assets/square-logo.svg b/public/assets/square-logo.svg
similarity index 100%
rename from src/assets/square-logo.svg
rename to public/assets/square-logo.svg
diff --git a/src/components/Hero/index.tsx b/src/components/Hero/index.tsx
deleted file mode 100644
index b417f95..0000000
--- a/src/components/Hero/index.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from "react"
-import Logo from "../../assets/square-logo.svg"
-
-export interface HeroProps {
-  title?: string
-}
-
-export const Hero: React.FC<HeroProps> = () => {
-  return (
-    <div>
-      <h1 className="bg-red-100 dark:bg-red-900">Hallo Jakob</h1>
-    </div>
-  )
-}
diff --git a/src/components/Hero/Hello.stories.tsx b/src/components/SocialBadge/SocialBadge.stories.tsx
similarity index 66%
rename from src/components/Hero/Hello.stories.tsx
rename to src/components/SocialBadge/SocialBadge.stories.tsx
index 2a84897..a4adc5a 100644
--- a/src/components/Hero/Hello.stories.tsx
+++ b/src/components/SocialBadge/SocialBadge.stories.tsx
@@ -1,16 +1,16 @@
 import React from "react"
 import { Story, Meta } from "@storybook/react/types-6-0"
-import { Hero, HeroProps } from "."
+import { SocialBadge, SocialBadgeProps } from "."
 
 export default {
-  title: "Component/Hero",
-  component: Hero,
+  title: "Component/SocialBadge",
+  component: SocialBadge,
   argTypes: {
     title: { control: "string" }
   }
 } as Meta
 
-const Template: Story<HeroProps> = (args) => <Hero {...args} />
+const Template: Story<SocialBadgeProps> = (args) => <SocialBadge {...args} />
 
 // Default scenario
 export const Default = Template.bind({})
diff --git a/src/components/SocialBadge/index.tsx b/src/components/SocialBadge/index.tsx
new file mode 100644
index 0000000..e1962a5
--- /dev/null
+++ b/src/components/SocialBadge/index.tsx
@@ -0,0 +1,15 @@
+import React from "react"
+import Logo from "../../assets/square-logo.svg"
+
+export interface SocialBadgeProps {
+  title?: string
+}
+
+export const SocialBadge: React.FC<SocialBadgeProps> = () => {
+  return (
+    <a className="block bg-white rounded-full shadow-lg p-2.5 flex w-max items-center cursor-pointer transition-transform transform hover:scale-105 focus:outline-none focus:ring" href={"https://google.com"}>
+        <img className="flex rounded-full" src={"/assets/icons/github.svg"} />
+        <div className="mx-4 font-semibold text-xl">GitHub</div>
+    </a>
+  )
+}
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index bce7449..b223821 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,6 +1,4 @@
 import Head from "next/head"
-import "../components/Hero"
-import { Hero } from "../components/Hero"
 
 export default function Home() {
   return (
@@ -8,7 +6,7 @@ export default function Home() {
     <Head>
       <title>nwex.de</title>
     </Head>
-      <Hero />
+
     </>
   )
 }