diff --git a/backend/src/apis/humhub/HumHubClient.ts b/backend/src/apis/humhub/HumHubClient.ts
index b69944773..596d74597 100644
--- a/backend/src/apis/humhub/HumHubClient.ts
+++ b/backend/src/apis/humhub/HumHubClient.ts
@@ -8,6 +8,7 @@ import { backendLogger as logger } from '@/server/logger'
 import { GetUser } from './model/GetUser'
 import { PostUser } from './model/PostUser'
 import { UsersResponse } from './model/UsersResponse'
+import { User } from '@entity/User'
 
 /**
  * HumHubClient as singleton class
@@ -58,6 +59,18 @@ export class HumHubClient {
     return token
   }
 
+  public static async createAutoLoginUrl(user: User) {
+    const secret = new TextEncoder().encode(CONFIG.HUMHUB_JWT_KEY)
+    const username = user.alias ?? user.gradidoID
+    logger.info(`user ${username} as username for humhub auto-login`)
+    const token = await new SignJWT({ username })
+      .setProtectedHeader({ alg: 'HS256' })
+      .setIssuedAt()
+      .setExpirationTime('2m')
+      .sign(secret)
+    return `${CONFIG.HUMHUB_API_URL}user/auth/login?jwt=${token}`
+  }
+
   /**
    * Get all users from humhub
    * https://marketplace.humhub.com/module/rest/docs/html/user.html#tag/User/paths/~1user/get
diff --git a/backend/src/auth/RIGHTS.ts b/backend/src/auth/RIGHTS.ts
index c7a23c13b..579fb7f0e 100644
--- a/backend/src/auth/RIGHTS.ts
+++ b/backend/src/auth/RIGHTS.ts
@@ -38,6 +38,7 @@ export enum RIGHTS {
   OPEN_CREATIONS = 'OPEN_CREATIONS',
   USER = 'USER',
   GMS_USER_PLAYGROUND = 'GMS_USER_PLAYGROUND',
+  CIRCLES_AUTO_LOGIN = 'CIRCLES_AUTO_LOGIN',
   // Moderator
   SEARCH_USERS = 'SEARCH_USERS',
   ADMIN_CREATE_CONTRIBUTION = 'ADMIN_CREATE_CONTRIBUTION',
diff --git a/backend/src/auth/USER_RIGHTS.ts b/backend/src/auth/USER_RIGHTS.ts
index 0c56b0d02..d649a0649 100644
--- a/backend/src/auth/USER_RIGHTS.ts
+++ b/backend/src/auth/USER_RIGHTS.ts
@@ -30,4 +30,5 @@ export const USER_RIGHTS = [
   RIGHTS.OPEN_CREATIONS,
   RIGHTS.USER,
   RIGHTS.GMS_USER_PLAYGROUND,
+  RIGHTS.CIRCLES_AUTO_LOGIN,
 ]
diff --git a/backend/src/graphql/resolver/UserResolver.ts b/backend/src/graphql/resolver/UserResolver.ts
index 33a351730..2c18876a1 100644
--- a/backend/src/graphql/resolver/UserResolver.ts
+++ b/backend/src/graphql/resolver/UserResolver.ts
@@ -81,6 +81,7 @@ import { setUserRole, deleteUserRole } from './util/modifyUserRole'
 import { sendUserToGms } from './util/sendUserToGms'
 import { syncHumhub } from './util/syncHumhub'
 import { validateAlias } from './util/validateAlias'
+import { HumHubClient } from '@/apis/humhub/HumHubClient'
 
 const LANGUAGES = ['de', 'en', 'es', 'fr', 'nl']
 const DEFAULT_LANGUAGE = 'de'
@@ -703,6 +704,14 @@ export class UserResolver {
     return result
   }
 
+  @Authorized([RIGHTS.CIRCLES_AUTO_LOGIN])
+  @Query(() => String)
+  async authenticateCirclesAutoLogin(@Ctx() context: Context): Promise<string> {
+    logger.info(`authenticateCirclesAutoLogin()...`)
+    const dbUser = getUser(context)
+    return await HumHubClient.createAutoLoginUrl(dbUser)
+  }
+
   @Authorized([RIGHTS.SEARCH_ADMIN_USERS])
   @Query(() => SearchAdminUsersResult)
   async searchAdminUsers(
diff --git a/backend/src/graphql/resolver/util/syncHumhub.test.ts b/backend/src/graphql/resolver/util/syncHumhub.test.ts
index c7b187f23..a5a8a87e4 100644
--- a/backend/src/graphql/resolver/util/syncHumhub.test.ts
+++ b/backend/src/graphql/resolver/util/syncHumhub.test.ts
@@ -22,10 +22,6 @@ const mockUpdateUserInfosArg = new UpdateUserInfosArgs()
 const mockHumHubUser = new GetUser(mockUser, 1)
 
 describe('syncHumhub', () => {
-  beforeAll(() => {
-    // humhubClientMockbBeforeAll()
-  })
-
   beforeEach(() => {
     jest.spyOn(logger, 'debug').mockImplementation()
     jest.spyOn(logger, 'info').mockImplementation()
diff --git a/frontend/public/img/svg/social_network.svg b/frontend/public/img/svg/circles.svg
similarity index 100%
rename from frontend/public/img/svg/social_network.svg
rename to frontend/public/img/svg/circles.svg
diff --git a/frontend/src/components/Menu/Sidebar.vue b/frontend/src/components/Menu/Sidebar.vue
index a6b096299..b1017ec86 100644
--- a/frontend/src/components/Menu/Sidebar.vue
+++ b/frontend/src/components/Menu/Sidebar.vue
@@ -32,9 +32,9 @@
             <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 to="/circles" class="mb-3" active-class="activeRoute">
+            <b-img src="/img/svg/circles.svg" height="20" class="svg-icon" />
+            <span class="ml-2">{{ $t('navigation.circles') }}</span>
           </b-nav-item>
           <b-nav-item to="/usersearch" active-class="activeRoute">
             <b-img src="/img/loupe.png" height="20" />
diff --git a/frontend/src/components/UserSettings/UserSettingsSwitch.vue b/frontend/src/components/UserSettings/UserSettingsSwitch.vue
index 8e819cba8..53d0f6df8 100644
--- a/frontend/src/components/UserSettings/UserSettingsSwitch.vue
+++ b/frontend/src/components/UserSettings/UserSettingsSwitch.vue
@@ -29,7 +29,6 @@ export default {
     async onChange() {
       const variables = []
       variables[this.attrName] = this.value
-
       this.$apollo
         .mutate({
           mutation: updateUserInfos,
diff --git a/frontend/src/graphql/queries.js b/frontend/src/graphql/queries.js
index 696963b78..adb11bc8d 100644
--- a/frontend/src/graphql/queries.js
+++ b/frontend/src/graphql/queries.js
@@ -28,6 +28,12 @@ export const authenticateGmsUserSearch = gql`
   }
 `
 
+export const authenticateCirclesAutoLogin = gql`
+  query {
+    authenticateCirclesAutoLogin
+  }
+`
+
 export const transactionsQuery = gql`
   query($currentPage: Int = 1, $pageSize: Int = 25, $order: Order = DESC) {
     transactionList(currentPage: $currentPage, pageSize: $pageSize, order: $order) {
diff --git a/frontend/src/locales/de.json b/frontend/src/locales/de.json
index 84e3f2d8c..e1bfd3392 100644
--- a/frontend/src/locales/de.json
+++ b/frontend/src/locales/de.json
@@ -268,7 +268,7 @@
     "overview": "Übersicht",
     "send": "Senden",
     "settings": "Einstellung",
-    "social_network": "Kreise",
+    "circles": "Kreise",
     "support": "Support",
     "transactions": "Transaktionen",
     "usersearch": "Nutzersuche"
@@ -281,6 +281,7 @@
     "overview": "Willkommen {name}",
     "send": "Sende Gradidos",
     "settings": "Einstellungen",
+    "circles": "Gradido Kreise",
     "transactions": "Deine Transaktionen",
     "usersearch": "Geografische Nutzersuche"
   },
@@ -418,7 +419,7 @@
       "uppercase": "Großbuchstabe erforderlich."
     }
   },
-  "social-network": {
+  "circles": {
     "headline": "Gradido Kreise",
     "text": "Was soll hier für ein Text rein?",
     "button": "Beginne dich zu vernetzen..."
diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
index a1b7cd8d6..09538c8d7 100644
--- a/frontend/src/locales/en.json
+++ b/frontend/src/locales/en.json
@@ -268,7 +268,7 @@
     "overview": "Overview",
     "send": "Send",
     "settings": "Settings",
-    "social_network": "Circle",
+    "circles": "Circle",
     "support": "Support",
     "transactions": "Transactions",
     "usersearch": "Geographical User Search"
@@ -282,6 +282,7 @@
     "send": "Send Gradidos",
     "settings": "Settings",
     "transactions": "Your transactions",
+    "circles": "Gradido Circles",
     "usersearch": "Geographical User Search"
   },
   "qrCode": "QR Code",
@@ -418,7 +419,7 @@
       "uppercase": "One uppercase letter required."
     }
   },
-  "social-network": {
+  "circles": {
     "headline": "Gradido Circle",
     "text": "Placeholder",
     "button": "Start to connect..."
diff --git a/frontend/src/pages/Circles.vue b/frontend/src/pages/Circles.vue
new file mode 100644
index 000000000..aa7e810d9
--- /dev/null
+++ b/frontend/src/pages/Circles.vue
@@ -0,0 +1,65 @@
+<template>
+  <div class="circles">
+    <b-container class="bg-white appBoxShadow gradido-border-radius p-4 mt--3">
+      <div class="h3">{{ $t('circles.headline') }}</div>
+      <div class="my-4 text-small">
+        <span v-for="(line, lineNumber) of $t('circles.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
+              v-if="this.humhubAllowed"
+              variant="gradido"
+              :href="this.humhubUri"
+              target="_blank"
+            >
+              {{ $t('circles.button') }}
+            </b-button>
+            <RouterLink v-else to="/settings/extern">
+              <b-button variant="gradido">
+                {{ $t('circles.button') }}
+              </b-button>
+            </RouterLink>
+          </div>
+        </b-col>
+      </b-row>
+    </b-container>
+  </div>
+</template>
+<script>
+import { authenticateCirclesAutoLogin } from '@/graphql/queries'
+export default {
+  name: 'Circles',
+  data() {
+    return {
+      humhubUri: 'not initialized',
+    }
+  },
+  computed: {
+    humhubAllowed() {
+      return this.$store.state.humhubAllowed
+    },
+  },
+  methods: {
+    async authenticateCirclesAutoLogin() {
+      this.$apollo
+        .query({
+          query: authenticateCirclesAutoLogin,
+        })
+        .then(async (result) => {
+          this.humhubUri = result.data.authenticateCirclesAutoLogin
+        })
+        .catch(() => {
+          this.toastError('authenticateCirclesAutoLogin failed!')
+        })
+    },
+  },
+  created() {
+    this.authenticateCirclesAutoLogin()
+  },
+}
+</script>
diff --git a/frontend/src/pages/Settings.vue b/frontend/src/pages/Settings.vue
index 57fb9dc11..fc4a29ca4 100644
--- a/frontend/src/pages/Settings.vue
+++ b/frontend/src/pages/Settings.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="card bg-white gradido-border-radius appBoxShadow p-4 mt--3">
-    <b-tabs content-class="mt-3">
-      <b-tab :title="$t('PersonalDetails')" active>
+    <b-tabs v-model="tabIndex" content-class="mt-3">
+      <b-tab :title="$t('PersonalDetails')">
         <div class="h2">{{ $t('PersonalDetails') }}</div>
         <div class="my-4 text-small">
           {{ $t('settings.info') }}
@@ -222,6 +222,10 @@ export default {
     } = state
 
     const username = this.$store.state.username || ''
+    let tabIndex = 0
+    if (this.$route.params.tabAlias === 'extern') {
+      tabIndex = 1
+    }
 
     return {
       darkMode,
@@ -234,6 +238,7 @@ export default {
       humhubAllowed,
       mutation: '',
       variables: {},
+      tabIndex,
     }
   },
 
@@ -249,7 +254,7 @@ export default {
       return CONFIG.GMS_ACTIVE
     },
     isHumhub() {
-      return CONFIG.HUMHUB_ACTIVE && this.username
+      return CONFIG.HUMHUB_ACTIVE
     },
   },
   // TODO: watch: {
diff --git a/frontend/src/pages/SocialNetwork.vue b/frontend/src/pages/SocialNetwork.vue
deleted file mode 100644
index eb2ccbdb2..000000000
--- a/frontend/src/pages/SocialNetwork.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<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 ad819f889..dfccee6d9 100755
--- a/frontend/src/routes/routes.js
+++ b/frontend/src/routes/routes.js
@@ -89,11 +89,11 @@ const routes = [
     },
   },
   {
-    path: '/social-network',
-    component: () => import('@/pages/SocialNetwork'),
+    path: '/circles',
+    component: () => import('@/pages/Circles'),
     meta: {
       requiresAuth: true,
-      pageTitle: 'social-network',
+      pageTitle: 'circles',
     },
   },
   // {
@@ -111,7 +111,7 @@ const routes = [
   //   },
   // },
   {
-    path: '/settings',
+    path: '/settings/:tabAlias?',
     component: () => import('@/pages/Settings'),
     meta: {
       requiresAuth: true,