diff --git a/frontend/public/img/svg/social_network.svg b/frontend/public/img/svg/social_network.svg
new file mode 100644
index 000000000..5deb96d1b
--- /dev/null
+++ b/frontend/public/img/svg/social_network.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="200" height="200">
+  <!-- Personen in Kreisen -->
+  <circle cx="30" cy="50" r="15" fill="none" stroke="black" stroke-width="2"/>
+  <circle cx="50" cy="30" r="15" fill="none" stroke="black" stroke-width="2"/>
+  <circle cx="70" cy="50" r="15" fill="none" stroke="black" stroke-width="2"/>
+  <circle cx="50" cy="70" r="15" fill="none" stroke="black" stroke-width="2"/>
+</svg>
diff --git a/frontend/src/components/Menu/Sidebar.vue b/frontend/src/components/Menu/Sidebar.vue
index 227275786..a6b096299 100644
--- a/frontend/src/components/Menu/Sidebar.vue
+++ b/frontend/src/components/Menu/Sidebar.vue
@@ -32,6 +32,10 @@
             <b-img src="/img/svg/info.svg" height="20" class="svg-icon" />
             <span class="ml-2">{{ $t('navigation.info') }}</span>
           </b-nav-item>
+          <b-nav-item to="/social-network" class="mb-3" active-class="activeRoute">
+            <b-img src="/img/svg/social_network.svg" height="20" class="svg-icon" />
+            <span class="ml-2">{{ $t('navigation.social_network') }}</span>
+          </b-nav-item>
           <b-nav-item to="/usersearch" active-class="activeRoute">
             <b-img src="/img/loupe.png" height="20" />
             <span class="ml-2">{{ $t('navigation.usersearch') }}</span>
diff --git a/frontend/src/locales/de.json b/frontend/src/locales/de.json
index da212d379..84e3f2d8c 100644
--- a/frontend/src/locales/de.json
+++ b/frontend/src/locales/de.json
@@ -268,6 +268,7 @@
     "overview": "Übersicht",
     "send": "Senden",
     "settings": "Einstellung",
+    "social_network": "Kreise",
     "support": "Support",
     "transactions": "Transaktionen",
     "usersearch": "Nutzersuche"
@@ -417,6 +418,11 @@
       "uppercase": "Großbuchstabe erforderlich."
     }
   },
+  "social-network": {
+    "headline": "Gradido Kreise",
+    "text": "Was soll hier für ein Text rein?",
+    "button": "Beginne dich zu vernetzen..."
+  },
   "status": "Status",
   "submitted": "Eingereicht",
   "success": "Erfolg",
diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
index 7bba0d5eb..a1b7cd8d6 100644
--- a/frontend/src/locales/en.json
+++ b/frontend/src/locales/en.json
@@ -268,6 +268,7 @@
     "overview": "Overview",
     "send": "Send",
     "settings": "Settings",
+    "social_network": "Circle",
     "support": "Support",
     "transactions": "Transactions",
     "usersearch": "Geographical User Search"
@@ -417,6 +418,11 @@
       "uppercase": "One uppercase letter required."
     }
   },
+  "social-network": {
+    "headline": "Gradido Circle",
+    "text": "Placeholder",
+    "button": "Start to connect..."
+  },
   "status": "Status",
   "submitted": "Submitted",
   "success": "Success",
diff --git a/frontend/src/pages/SocialNetwork.vue b/frontend/src/pages/SocialNetwork.vue
new file mode 100644
index 000000000..eb2ccbdb2
--- /dev/null
+++ b/frontend/src/pages/SocialNetwork.vue
@@ -0,0 +1,38 @@
+<template>
+  <div class="social-network">
+    <b-container class="bg-white appBoxShadow gradido-border-radius p-4 mt--3">
+      <div class="h3">{{ $t('social-network.headline') }}</div>
+      <div class="my-4 text-small">
+        <span
+          v-for="(line, lineNumber) of $t('social-network.text').split('\n')"
+          v-bind:key="lineNumber"
+        >
+          {{ line }}
+          <br />
+        </span>
+      </div>
+      <b-row class="my-5">
+        <b-col cols="12">
+          <div class="text-lg-right">
+            <b-button variant="gradido" :href="this.humhubUri" target="_blank">
+              {{ $t('social-network.button') }}
+            </b-button>
+          </div>
+        </b-col>
+      </b-row>
+    </b-container>
+  </div>
+</template>
+<script>
+export default {
+  name: 'SocialNetwork',
+  data() {
+    return {
+      humhubUri: 'not initialized',
+    }
+  },
+  created() {
+    this.humhubUri = 'https://community.gradido.net'
+  },
+}
+</script>
diff --git a/frontend/src/routes/routes.js b/frontend/src/routes/routes.js
index d8f85b858..ad819f889 100755
--- a/frontend/src/routes/routes.js
+++ b/frontend/src/routes/routes.js
@@ -88,6 +88,14 @@ const routes = [
       pageTitle: 'usersearch',
     },
   },
+  {
+    path: '/social-network',
+    component: () => import('@/pages/SocialNetwork'),
+    meta: {
+      requiresAuth: true,
+      pageTitle: 'social-network',
+    },
+  },
   // {
   //   path: '/storys',
   //   component: () => import('@/pages/TopStorys'),