diff --git a/frontend/src/components/Template/ContentHeader/NavCommunity.vue b/frontend/src/components/Template/ContentHeader/NavCommunity.vue
index 31a839af4..841304b2a 100644
--- a/frontend/src/components/Template/ContentHeader/NavCommunity.vue
+++ b/frontend/src/components/Template/ContentHeader/NavCommunity.vue
@@ -2,19 +2,19 @@
   <div class="nav-community container">
     <b-row class="nav-row">
       <b-col cols="12" lg="4" md="4" class="px-0">
-        <b-btn active-class="btn-active" block variant="link" to="/community#edit">
+        <b-btn active-class="btn-active" block variant="link" @click="handleClick(0)">
           <b-icon icon="pencil" class="mr-2" />
           {{ $t('community.submitContribution') }}
         </b-btn>
       </b-col>
       <b-col cols="12" lg="4" md="4" class="px-0">
-        <b-btn active-class="btn-active" block variant="link" to="/community#my">
+        <b-btn active-class="btn-active" block variant="link" @click="handleClick(1)">
           <b-icon icon="person" class="mr-2" />
           {{ $t('community.myContributions') }}
         </b-btn>
       </b-col>
       <b-col cols="12" lg="4" md="4" class="px-0">
-        <b-btn active-class="btn-active" block variant="link" to="/community#all">
+        <b-btn active-class="btn-active" block variant="link" @click="handleClick(2)">
           <b-icon icon="people" class="mr-2" />
           {{ $t('community.community') }}
         </b-btn>
@@ -23,9 +23,22 @@
   </div>
 </template>
 <script>
-export default {
-  name: 'NavCommunity',
-}
+ export default {
+   name: 'NavCommunity',
+   methods: {
+     handleClick(tab) {
+       console.log('handleClick', tab)
+       if (this.$route.params && this.$route.params.tab && Number(this.$route.params.tab) !== tab) {
+         this.$router.push({ params: { tab } })
+       }
+     },
+   },
+   watch: {
+     '$route.params.tab'(tab) {
+       this.handleClick(tab)
+     },
+   },
+ }
 </script>
 <style scoped>
 .nav-row {
diff --git a/frontend/src/components/Template/RightSide/ContributionInfo.vue b/frontend/src/components/Template/RightSide/ContributionInfo.vue
index 2227df1c3..fdd2d10d8 100644
--- a/frontend/src/components/Template/RightSide/ContributionInfo.vue
+++ b/frontend/src/components/Template/RightSide/ContributionInfo.vue
@@ -65,12 +65,18 @@
   </div>
 </template>
 <script>
-export default {
-  name: 'ContributionInfo',
-  computed: {
-    hash() {
-      return this.$route.hash
-    },
-  },
-}
+ export default {
+   name: 'ContributionInfo',
+   computed: {
+     hash() {
+       return this.$route.hash
+     },
+     currentTab() {
+       console.log('ROUTE', this.$route)
+       if (this.$route.from && this.$route.from.params && this.$route.from.params.tab)
+         return this.$route.from.params.tab
+       return 0
+     },
+   },
+ }
 </script>
diff --git a/frontend/src/layouts/templates/ContentHeader.vue b/frontend/src/layouts/templates/ContentHeader.vue
index 407d8dcad..75686974e 100644
--- a/frontend/src/layouts/templates/ContentHeader.vue
+++ b/frontend/src/layouts/templates/ContentHeader.vue
@@ -5,12 +5,13 @@
 </template>
 
 <script>
-export default {
-  name: 'ContentHeader',
-  computed: {
-    path() {
-      return this.$route.path.replace(/^\//, '')
-    },
-  },
-}
+ export default {
+   name: 'ContentHeader',
+   computed: {
+     path() {
+       console.log('ContentHeader', this.$route.path.replace(/^\/(.+?)(\/.+)?$/, '$1'))
+       return this.$route.path.replace(/^\/(.+?)(\/.+)?$/, '$1')
+     },
+   },
+ }
 </script>
diff --git a/frontend/src/layouts/templates/RightSide.vue b/frontend/src/layouts/templates/RightSide.vue
index 0a92cb1a1..9d357eeec 100644
--- a/frontend/src/layouts/templates/RightSide.vue
+++ b/frontend/src/layouts/templates/RightSide.vue
@@ -6,19 +6,21 @@
   </div>
 </template>
 <script>
-export default {
-  name: 'RightSide',
-  computed: {
-    name() {
-      switch (this.$route.path.replace(/^\//, '')) {
-        case 'settings':
-          return 'empty'
-        case 'community':
-          return 'community'
-        default:
-          return 'transactions'
-      }
-    },
-  },
-}
+ export default {
+   name: 'RightSide',
+   computed: {
+     name() {
+       console.log('RightSide', this.$route.path.replace(/^\/(.+?)(\/.+)?$/, '$1'))
+       switch (this.$route.path.replace(/^\/(.+?)(\/.+)?$/, '$1')) {
+         case 'settings':
+           return 'empty'
+         case 'community':
+           console.log('-----------')
+           return 'community'
+         default:
+           return 'transactions'
+       }
+     },
+   },
+ }
 </script>
diff --git a/frontend/src/pages/Community.vue b/frontend/src/pages/Community.vue
index 113bcd4e4..a9b5e2c11 100644
--- a/frontend/src/pages/Community.vue
+++ b/frontend/src/pages/Community.vue
@@ -58,258 +58,241 @@
   </div>
 </template>
 <script>
-import OpenCreationsAmount from '@/components/Contributions/OpenCreationsAmount.vue'
-import ContributionForm from '@/components/Contributions/ContributionForm.vue'
-import ContributionList from '@/components/Contributions/ContributionList.vue'
-import { createContribution, updateContribution, deleteContribution } from '@/graphql/mutations'
-import { listContributions, listAllContributions, openCreations } from '@/graphql/queries'
+ import OpenCreationsAmount from '@/components/Contributions/OpenCreationsAmount.vue'
+ import ContributionForm from '@/components/Contributions/ContributionForm.vue'
+ import ContributionList from '@/components/Contributions/ContributionList.vue'
+ import { createContribution, updateContribution, deleteContribution } from '@/graphql/mutations'
+ import { listContributions, listAllContributions, openCreations } from '@/graphql/queries'
 
-export default {
-  name: 'Community',
-  components: {
-    ContributionForm,
-    ContributionList,
-    OpenCreationsAmount,
-  },
-  data() {
-    return {
-      hashLink: '',
-      tabLinkHashes: ['#edit', '#my', '#all'],
-      tabIndex: 0,
-      items: [],
-      itemsAll: [],
-      currentPage: 1,
-      pageSize: 25,
-      currentPageAll: 1,
-      pageSizeAll: 25,
-      contributionCount: 0,
-      contributionCountAll: 0,
-      form: {
-        id: null,
-        date: '',
-        memo: '',
-        hours: 0,
-        amount: '',
-      },
-      updateAmount: '',
-      maximalDate: new Date(),
-      openCreations: [],
-    }
-  },
-  mounted() {
-    this.$nextTick(() => {
-      this.tabIndex = this.tabLinkHashes.findIndex((hashLink) => hashLink === this.$route.hash)
-      this.hashLink = this.$route.hash
-    })
-  },
-  apollo: {
-    OpenCreations: {
-      query() {
-        return openCreations
-      },
-      fetchPolicy: 'network-only',
-      variables() {
-        return {}
-      },
-      update({ openCreations }) {
-        this.openCreations = openCreations
-      },
-      error({ message }) {
-        this.toastError(message)
-      },
-    },
-    ListAllContributions: {
-      query() {
-        return listAllContributions
-      },
-      fetchPolicy: 'network-only',
-      variables() {
-        return {
-          currentPage: this.currentPageAll,
-          pageSize: this.pageSizeAll,
-        }
-      },
-      update({ listAllContributions }) {
-        this.contributionCountAll = listAllContributions.contributionCount
-        this.itemsAll = listAllContributions.contributionList
-      },
-      error({ message }) {
-        this.toastError(message)
-      },
-    },
-    ListContributions: {
-      query() {
-        return listContributions
-      },
-      fetchPolicy: 'network-only',
-      variables() {
-        return {
-          currentPage: this.currentPage,
-          pageSize: this.pageSize,
-        }
-      },
-      update({ listContributions }) {
-        this.contributionCount = listContributions.contributionCount
-        this.items = listContributions.contributionList
-        if (this.items.find((item) => item.state === 'IN_PROGRESS')) {
-          this.tabIndex = 1
-          if (this.$route.hash !== '#my') {
-            this.$router.push({ path: '/community#my' })
-          }
-          this.toastInfo(this.$t('contribution.alert.answerQuestionToast'))
-        }
-      },
-      error({ message }) {
-        this.toastError(message)
-      },
-    },
-  },
-  watch: {
-    $route(to, from) {
-      this.tabIndex = this.tabLinkHashes.findIndex((hashLink) => hashLink === to.hash)
-      this.hashLink = to.hash
-      this.closeAllOpenCollapse()
-    },
-    tabIndex(num) {
-      if (num !== 0) {
-        this.form = {
-          id: null,
-          date: new Date(),
-          memo: '',
-          hours: 0,
-          amount: '',
-        }
-      }
-    },
-  },
-  computed: {
-    minimalDate() {
-      const date = new Date(this.maximalDate)
-      return new Date(date.setMonth(date.getMonth() - 1, 1))
-    },
-    isThisMonth() {
-      const formDate = new Date(this.form.date)
-      return (
-        formDate.getFullYear() === this.maximalDate.getFullYear() &&
-        formDate.getMonth() === this.maximalDate.getMonth()
-      )
-    },
-    amountToAdd() {
-      // when existing contribution is edited, the amount is added back on top of the amount
-      if (this.form.id) return parseInt(this.updateAmount)
-      return 0
-    },
-    maxForMonths() {
-      const formDate = new Date(this.form.date)
-      if (this.openCreations && this.openCreations.length)
-        return this.openCreations.slice(1).map((creation) => {
-          if (creation.year === formDate.getFullYear() && creation.month === formDate.getMonth())
-            return parseInt(creation.amount) + this.amountToAdd
-          return parseInt(creation.amount)
-        })
-      return [0, 0]
-    },
-  },
-  methods: {
-    closeAllOpenCollapse() {
-      this.$el.querySelectorAll('.collapse.show').forEach((value) => {
-        this.$root.$emit('bv::toggle::collapse', value.id)
-      })
-    },
-    refetchData() {
-      this.$apollo.queries.ListAllContributions.refetch()
-      this.$apollo.queries.ListContributions.refetch()
-      this.$apollo.queries.OpenCreations.refetch()
-    },
-    saveContribution(data) {
-      this.$apollo
-        .mutate({
-          fetchPolicy: 'no-cache',
-          mutation: createContribution,
-          variables: {
-            creationDate: data.date,
-            memo: data.memo,
-            amount: data.amount,
-          },
-        })
-        .then((result) => {
-          this.toastSuccess(this.$t('contribution.submitted'))
-          this.refetchData()
-        })
-        .catch((err) => {
-          this.toastError(err.message)
-        })
-    },
-    updateContribution(data) {
-      this.$apollo
-        .mutate({
-          fetchPolicy: 'no-cache',
-          mutation: updateContribution,
-          variables: {
-            contributionId: data.id,
-            creationDate: data.date,
-            memo: data.memo,
-            amount: data.amount,
-          },
-        })
-        .then((result) => {
-          this.toastSuccess(this.$t('contribution.updated'))
-          this.refetchData()
-        })
-        .catch((err) => {
-          this.toastError(err.message)
-        })
-    },
-    deleteContribution(data) {
-      this.$apollo
-        .mutate({
-          fetchPolicy: 'no-cache',
-          mutation: deleteContribution,
-          variables: {
-            id: data.id,
-          },
-        })
-        .then((result) => {
-          this.toastSuccess(this.$t('contribution.deleted'))
-          this.refetchData()
-        })
-        .catch((err) => {
-          this.toastError(err.message)
-        })
-    },
-    updateListAllContributions(pagination) {
-      this.currentPageAll = pagination.currentPage
-      this.pageSizeAll = pagination.pageSize
-      this.$apollo.queries.ListAllContributions.refetch()
-    },
-    updateListContributions(pagination) {
-      this.currentPage = pagination.currentPage
-      this.pageSize = pagination.pageSize
-      this.$apollo.queries.ListContributions.refetch()
-    },
-    updateContributionForm(item) {
-      this.form.id = item.id
-      this.form.date = item.contributionDate
-      this.form.memo = item.memo
-      this.form.amount = item.amount
-      this.form.hours = item.amount / 20
-      this.updateAmount = item.amount
-      this.$router.push({ path: '#edit' })
-      this.tabIndex = 0
-    },
-    updateTransactions(pagination) {
-      this.$emit('update-transactions', pagination)
-    },
-    updateState(id) {
-      this.items.find((item) => item.id === id).state = 'PENDING'
-    },
-  },
-  created() {
-    this.updateTransactions(0)
-    this.tabIndex = 0
-    this.$router.push({ path: '/community#edit' })
-  },
-}
+ export default {
+   name: 'Community',
+   components: {
+     ContributionForm,
+     ContributionList,
+     OpenCreationsAmount,
+   },
+   data() {
+     return {
+       tabIndex: 1,
+       items: [],
+       itemsAll: [],
+       currentPage: 1,
+       pageSize: 25,
+       currentPageAll: 1,
+       pageSizeAll: 25,
+       contributionCount: 0,
+       contributionCountAll: 0,
+       form: {
+         id: null,
+         date: '',
+         memo: '',
+         hours: 0,
+         amount: '',
+       },
+       updateAmount: '',
+       maximalDate: new Date(),
+       openCreations: [],
+     }
+   },
+   mounted() {
+     this.updateTabIndex(Number(this.$route.params.tab))
+   },
+   apollo: {
+     OpenCreations: {
+       query() {
+         return openCreations
+       },
+       fetchPolicy: 'network-only',
+       variables() {
+         return {}
+       },
+       update({ openCreations }) {
+         this.openCreations = openCreations
+       },
+       error({ message }) {
+         this.toastError(message)
+       },
+     },
+     ListAllContributions: {
+       query() {
+         return listAllContributions
+       },
+       fetchPolicy: 'network-only',
+       variables() {
+         return {
+           currentPage: this.currentPageAll,
+           pageSize: this.pageSizeAll,
+         }
+       },
+       update({ listAllContributions }) {
+         this.contributionCountAll = listAllContributions.contributionCount
+         this.itemsAll = listAllContributions.contributionList
+       },
+       error({ message }) {
+         this.toastError(message)
+       },
+     },
+     ListContributions: {
+       query() {
+         return listContributions
+       },
+       fetchPolicy: 'network-only',
+       variables() {
+         return {
+           currentPage: this.currentPage,
+           pageSize: this.pageSize,
+         }
+       },
+       update({ listContributions }) {
+         this.contributionCount = listContributions.contributionCount
+         this.items = listContributions.contributionList
+         if (this.items.find((item) => item.state === 'IN_PROGRESS')) {
+           this.tabIndex = 1
+           this.toastInfo(this.$t('contribution.alert.answerQuestionToast'))
+         }
+       },
+       error({ message }) {
+         this.toastError(message)
+       },
+     },
+   },
+   watch: {
+     '$route.params.tab'(tab) {
+       this.updateTabIndex(tab)
+     },
+   },
+   computed: {
+     minimalDate() {
+       const date = new Date(this.maximalDate)
+       return new Date(date.setMonth(date.getMonth() - 1, 1))
+     },
+     isThisMonth() {
+       const formDate = new Date(this.form.date)
+       return (
+         formDate.getFullYear() === this.maximalDate.getFullYear() &&
+         formDate.getMonth() === this.maximalDate.getMonth()
+       )
+     },
+     amountToAdd() {
+       // when existing contribution is edited, the amount is added back on top of the amount
+       if (this.form.id) return parseInt(this.updateAmount)
+       return 0
+     },
+     maxForMonths() {
+       const formDate = new Date(this.form.date)
+       if (this.openCreations && this.openCreations.length)
+         return this.openCreations.slice(1).map((creation) => {
+           if (creation.year === formDate.getFullYear() && creation.month === formDate.getMonth())
+             return parseInt(creation.amount) + this.amountToAdd
+           return parseInt(creation.amount)
+         })
+       return [0, 0]
+     },
+   },
+   methods: {
+     updateTabIndex(tab) {
+       console.log('updateTabIndex', tab)
+       if (Number(tab) !== this.tabIndex) {
+         this.tabIndex = Number(tab)
+         this.closeAllOpenCollapse()
+       }
+     },
+     closeAllOpenCollapse() {
+       this.$el.querySelectorAll('.collapse.show').forEach((value) => {
+         this.$root.$emit('bv::toggle::collapse', value.id)
+       })
+     },
+     refetchData() {
+       this.$apollo.queries.ListAllContributions.refetch()
+       this.$apollo.queries.ListContributions.refetch()
+       this.$apollo.queries.OpenCreations.refetch()
+     },
+     saveContribution(data) {
+       this.$apollo
+           .mutate({
+             fetchPolicy: 'no-cache',
+             mutation: createContribution,
+             variables: {
+               creationDate: data.date,
+               memo: data.memo,
+               amount: data.amount,
+             },
+           })
+           .then((result) => {
+             this.toastSuccess(this.$t('contribution.submitted'))
+             this.refetchData()
+           })
+           .catch((err) => {
+             this.toastError(err.message)
+           })
+     },
+     updateContribution(data) {
+       this.$apollo
+           .mutate({
+             fetchPolicy: 'no-cache',
+             mutation: updateContribution,
+             variables: {
+               contributionId: data.id,
+               creationDate: data.date,
+               memo: data.memo,
+               amount: data.amount,
+             },
+           })
+           .then((result) => {
+             this.toastSuccess(this.$t('contribution.updated'))
+             this.refetchData()
+           })
+           .catch((err) => {
+             this.toastError(err.message)
+           })
+     },
+     deleteContribution(data) {
+       this.$apollo
+           .mutate({
+             fetchPolicy: 'no-cache',
+             mutation: deleteContribution,
+             variables: {
+               id: data.id,
+             },
+           })
+           .then((result) => {
+             this.toastSuccess(this.$t('contribution.deleted'))
+             this.refetchData()
+           })
+           .catch((err) => {
+             this.toastError(err.message)
+           })
+     },
+     updateListAllContributions(pagination) {
+       this.currentPageAll = pagination.currentPage
+       this.pageSizeAll = pagination.pageSize
+       this.$apollo.queries.ListAllContributions.refetch()
+     },
+     updateListContributions(pagination) {
+       this.currentPage = pagination.currentPage
+       this.pageSize = pagination.pageSize
+       this.$apollo.queries.ListContributions.refetch()
+     },
+     updateContributionForm(item) {
+       this.form.id = item.id
+       this.form.date = item.contributionDate
+       this.form.memo = item.memo
+       this.form.amount = item.amount
+       this.form.hours = item.amount / 20
+       this.updateAmount = item.amount
+       this.tabIndex = 0
+     },
+     updateTransactions(pagination) {
+       this.$emit('update-transactions', pagination)
+     },
+     updateState(id) {
+       this.items.find((item) => item.id === id).state = 'PENDING'
+     },
+   },
+   created() {
+     this.updateTransactions(0)
+   },
+ }
 </script>
 <style scoped>
 .tab-content {
diff --git a/frontend/src/routes/routes.js b/frontend/src/routes/routes.js
index 57e10c763..84480dc80 100755
--- a/frontend/src/routes/routes.js
+++ b/frontend/src/routes/routes.js
@@ -58,6 +58,17 @@ const routes = [
       requiresAuth: true,
       pageTitle: 'community',
     },
+    redirect: (to) => {
+      return { path: '/community/1' }
+    },
+  },
+  {
+    path: '/community/:tab',
+    component: () => import('@/pages/Community.vue'),
+    meta: {
+      requiresAuth: true,
+      pageTitle: 'community',
+    },
   },
   {
     path: '/information',