diff --git a/webapp/components/Chat/Chat.vue b/webapp/components/Chat/Chat.vue
new file mode 100644
index 000000000..5798ad1ac
--- /dev/null
+++ b/webapp/components/Chat/Chat.vue
@@ -0,0 +1,238 @@
+<template>
+  <div>
+    <client-only>
+      <internal-page :pageParams="pageParams" />
+      <vue-advanced-chat
+        :current-user-id="currentUserId"
+        :template-actions="JSON.stringify(templatesText)"
+        :text-messages="JSON.stringify(textMessages)"
+        :menu-actions="JSON.stringify(menuActions)"
+        :rooms="JSON.stringify(rooms)"
+        :messages="JSON.stringify(messages)"
+        :room-actions="JSON.stringify(roomActions)"
+        :rooms-loaded="true"
+        show-files="false"
+        show-audio="false"
+        :show-footer="true"
+        :messages-loaded="messagesLoaded"
+        @send-message="sendMessage($event.detail[0])"
+        @fetch-messages="fetchMessages($event.detail[0])"
+        :theme="theme"
+        :is-device="isDevice"
+        @show-demo-options="showDemoOptions = $event"
+      />
+    </client-only>
+  </div>
+</template>
+
+<script>
+import { roomQuery } from '~/graphql/Rooms'
+import { messageQuery } from '~/graphql/Messages'
+
+export default {
+    name: 'Chat',
+    props: {
+        theme: {
+            type: String,
+        }
+    },
+  data() {
+    return {
+      currentUserId: '1234',
+      menuActions: [
+        {
+          name: 'inviteUser',
+          title: 'Invite User',
+        },
+        {
+          name: 'removeUser',
+          title: 'Remove User',
+        },
+        {
+          name: 'deleteRoom',
+          title: 'Delete Room',
+        },
+      ],
+      messageActions: [
+        {
+          name: 'addMessageToFavorite',
+          title: 'Add To Favorite',
+        },
+        {
+          name: 'shareMessage',
+          title: 'Share Message',
+        },
+      ],
+      templatesText: [
+        {
+          tag: 'help',
+          text: 'This is the help',
+        },
+        {
+          tag: 'action',
+          text: 'This is the action',
+        },
+      ],
+      textMessages: {
+        ROOMS_EMPTY: 'Aucune conversation',
+        ROOM_EMPTY: 'Aucune conversation sélectionnée',
+        NEW_MESSAGES: 'Nouveaux messages',
+        MESSAGE_DELETED: 'Ce message a été supprimé',
+        MESSAGES_EMPTY: 'Aucun message',
+        CONVERSATION_STARTED: 'La conversation a commencée le :',
+        TYPE_MESSAGE: 'Tapez votre message',
+        SEARCH: 'Rechercher',
+        IS_ONLINE: 'est en ligne',
+        LAST_SEEN: 'dernière connexion ',
+        IS_TYPING: 'est en train de taper...',
+        CANCEL_SELECT_MESSAGE: 'Annuler Sélection',
+      },
+      roomActions: [
+        {
+          name: 'archiveRoom',
+          title: 'Archive Room',
+        },
+        { name: 'inviteUser', title: 'Invite User' },
+        { name: 'removeUser', title: 'Remove User' },
+        { name: 'deleteRoom', title: 'Delete Room' },
+      ],
+      rooms: [
+        // {
+        //   roomId: '1',
+        //   roomName: 'John Snow',
+        //   avatar: 'https://66.media.tumblr.com/avatar_c6a8eae4303e_512.pnj',
+        //   users: [
+        //     { _id: '1234', username: 'John Doe' },
+        //     { _id: '4321', username: 'John Snow' },
+        //   ],
+        // },
+        // {
+        //   roomId: '2',
+        //   roomName: 'Max J. Mustermann',
+        //   avatar:
+        //     'https://64.media.tumblr.com/8889b6e26370f4e3837584c1c59721a6/f4f76ed6b0249d08-4b/s1280x1920/810e9e5fa724366d26c10c0fa22ba97dad8778d1.pnj',
+        //   users: [
+        //     { _id: '1234', username: 'Johnx Doe' },
+        //     { _id: '43210', username: 'Max J. Mustermann' },
+        //   ],
+        // },
+      ],
+      messages: [],
+      messagesLoaded: false,
+      showDemoOptions: true,
+      isDevice: true,
+    }
+  },
+
+  methods: {
+    fetchMessages({ room, options = {} }) {
+      console.log(room, options)
+      this.messagesLoaded = false
+      setTimeout(async () => {
+        if (options.reset) {
+          console.log('reset messages')
+          this.messages = [] // this.addMessages(true)
+        } else {
+          try {
+            const {
+          data: { Message },
+        } = await this.$apollo.query({
+              query: messageQuery(),
+              variables: {
+                roomId: room.id,
+              }
+            })
+            console.log('Messages', Message)
+                this.messages = Message
+          } catch (error) {
+            console.log('Error', error)
+            this.messages = [] //this.addMessages(true)
+            this.$toast.error(error.message)
+          }
+        }
+        this.messagesLoaded = true
+      })
+    },
+
+    /* addMessages(reset) {
+      const messages = []
+
+      for (let i = 0; i < 30; i++) {
+        messages.push({
+          _id: reset ? i : this.messages.length + i,
+          content: `${reset ? '' : 'paginated'} message ${i + 1}`,
+          senderId: '4321',
+          username: 'John Doe',
+          date: '13 November',
+          timestamp: '10:20',
+        })
+      }
+      messages.push({
+        _id: '31',
+        content: `Hallo Welt`,
+        senderId: '1234',
+        username: 'John Doe',
+        date: '13 November',
+        timestamp: '10:20',
+      })
+
+      return messages
+    }, */
+
+    sendMessage(message) {
+      this.messages = [
+        ...this.messages,
+        {
+          _id: this.messages.length,
+          content: message.content,
+          senderId: this.currentUserId,
+          timestamp: new Date().toString().substring(16, 21),
+          date: new Date().toDateString(),
+        },
+      ]
+    },
+
+    addNewMessage() {
+      setTimeout(() => {
+        this.messages = [
+          ...this.messages,
+          {
+            _id: this.messages.length,
+            content: 'NEW MESSAGE',
+            senderId: '1234',
+            timestamp: new Date().toString().substring(16, 21),
+            date: new Date().toDateString(),
+          },
+        ]
+      }, 2000)
+    },
+  },
+  apollo: {
+    Rooms: {
+      query() {
+        return roomQuery()
+      },
+      update({ Room }) {
+        console.log('Rooms', Room)
+        if (!Room) {
+          this.rooms = []
+          return
+        }  
+    
+        this.rooms = Room
+       
+      },
+      error(error) {
+        this.rooms = []
+        this.$toast.error(error.message)
+      },
+      fetchPolicy: 'cache-and-network',
+    },
+  },
+}
+</script>
+<style lang="scss">
+body {
+  font-family: 'Quicksand', sans-serif;
+}
+</style>
diff --git a/webapp/constants/links.js b/webapp/constants/links.js
index ca8ff6db2..e732af0de 100644
--- a/webapp/constants/links.js
+++ b/webapp/constants/links.js
@@ -2,20 +2,6 @@
 
 import { defaultPageParamsPages } from '~/components/utils/InternalPages.js'
 
-const CHAT = defaultPageParamsPages.CHAT.overwrite({
-  // externalLink: null, // if defined it's dominating
-
-  internalPage: {
-    // footerIdent: 'site.faq', // localized string identifier, if undefined default is used
-    // headTitleIdent: 'site.faq', // localized string identifier, if undefined default is used
-    // headlineIdent: 'site.faq', // on null default is used, on empty string it's hidden
-    hasContainer: true,
-    hasBaseCard: true,
-    hasLoginInHeader: true,
-    // in case internal page content is here 'webapp/locales/html/'
-  },
-})
-
 const ORGANIZATION = defaultPageParamsPages.ORGANIZATION.overwrite({
   // if defined it's dominating
   externalLink: {
@@ -144,7 +130,6 @@ export default {
   // you can find and store templates for 👇🏼 at https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/templates/
 
   ORGANIZATION,
-  CHAT,
   DONATE,
   IMPRINT,
   TERMS_AND_CONDITIONS,
@@ -155,7 +140,7 @@ export default {
 
   FOOTER_LINK_LIST: [
     ORGANIZATION,
-    CHAT,
+
     TERMS_AND_CONDITIONS,
     CODE_OF_CONDUCT,
     DATA_PRIVACY,
diff --git a/webapp/pages/chat.vue b/webapp/pages/chat.vue
index dd1bedca3..6ea3f47b3 100644
--- a/webapp/pages/chat.vue
+++ b/webapp/pages/chat.vue
@@ -1,238 +1,24 @@
 <template>
   <div>
-    <client-only>
-      <internal-page :pageParams="pageParams" />
-      <vue-advanced-chat
-        :current-user-id="currentUserId"
-        :template-actions="JSON.stringify(templatesText)"
-        :text-messages="JSON.stringify(textMessages)"
-        :menu-actions="JSON.stringify(menuActions)"
-        :rooms="JSON.stringify(rooms)"
-        :messages="JSON.stringify(messages)"
-        :room-actions="JSON.stringify(roomActions)"
-        :rooms-loaded="true"
-        show-files="false"
-        show-audio="false"
-        :show-footer="true"
-        :messages-loaded="messagesLoaded"
-        @send-message="sendMessage($event.detail[0])"
-        @fetch-messages="fetchMessages($event.detail[0])"
-        :theme="theme"
-        :is-device="isDevice"
-        @show-demo-options="showDemoOptions = $event"
-      />
-      <base-button @click="theme = theme === 'light' ? 'dark' : 'light'">
+     <chat :theme="theme"/>
+     <base-button @click="theme = theme === 'light' ? 'dark' : 'light'">
         change style mode
       </base-button>
-    </client-only>
   </div>
 </template>
 
 <script>
-import links from '~/constants/links.js'
-import { internalPageMixins } from '~/mixins/internalPageMixins'
+import Chat from '../components/Chat/Chat.vue'
 import BaseButton from '../components/_new/generic/BaseButton/BaseButton.vue'
-import { roomQuery } from '~/graphql/Rooms'
-import { messageQuery } from '~/graphql/Messages'
 
 export default {
-  components: { BaseButton },
-  mixins: [internalPageMixins(links.CHAT)],
+  components: { Chat, BaseButton },
 
   data() {
     return {
-      currentUserId: '1234',
-      menuActions: [
-        {
-          name: 'inviteUser',
-          title: 'Invite User',
-        },
-        {
-          name: 'removeUser',
-          title: 'Remove User',
-        },
-        {
-          name: 'deleteRoom',
-          title: 'Delete Room',
-        },
-      ],
-      messageActions: [
-        {
-          name: 'addMessageToFavorite',
-          title: 'Add To Favorite',
-        },
-        {
-          name: 'shareMessage',
-          title: 'Share Message',
-        },
-      ],
-      templatesText: [
-        {
-          tag: 'help',
-          text: 'This is the help',
-        },
-        {
-          tag: 'action',
-          text: 'This is the action',
-        },
-      ],
-      textMessages: {
-        ROOMS_EMPTY: 'Aucune conversation',
-        ROOM_EMPTY: 'Aucune conversation sélectionnée',
-        NEW_MESSAGES: 'Nouveaux messages',
-        MESSAGE_DELETED: 'Ce message a été supprimé',
-        MESSAGES_EMPTY: 'Aucun message',
-        CONVERSATION_STARTED: 'La conversation a commencée le :',
-        TYPE_MESSAGE: 'Tapez votre message',
-        SEARCH: 'Rechercher',
-        IS_ONLINE: 'est en ligne',
-        LAST_SEEN: 'dernière connexion ',
-        IS_TYPING: 'est en train de taper...',
-        CANCEL_SELECT_MESSAGE: 'Annuler Sélection',
-      },
-      roomActions: [
-        {
-          name: 'archiveRoom',
-          title: 'Archive Room',
-        },
-        { name: 'inviteUser', title: 'Invite User' },
-        { name: 'removeUser', title: 'Remove User' },
-        { name: 'deleteRoom', title: 'Delete Room' },
-      ],
-      rooms: [
-        // {
-        //   roomId: '1',
-        //   roomName: 'John Snow',
-        //   avatar: 'https://66.media.tumblr.com/avatar_c6a8eae4303e_512.pnj',
-        //   users: [
-        //     { _id: '1234', username: 'John Doe' },
-        //     { _id: '4321', username: 'John Snow' },
-        //   ],
-        // },
-        // {
-        //   roomId: '2',
-        //   roomName: 'Max J. Mustermann',
-        //   avatar:
-        //     'https://64.media.tumblr.com/8889b6e26370f4e3837584c1c59721a6/f4f76ed6b0249d08-4b/s1280x1920/810e9e5fa724366d26c10c0fa22ba97dad8778d1.pnj',
-        //   users: [
-        //     { _id: '1234', username: 'Johnx Doe' },
-        //     { _id: '43210', username: 'Max J. Mustermann' },
-        //   ],
-        // },
-      ],
-      messages: [],
-      messagesLoaded: false,
-      showDemoOptions: true,
-      isDevice: true,
       theme: 'light',
     }
   },
-
-  methods: {
-    fetchMessages({ room, options = {} }) {
-      console.log(room, options)
-      this.messagesLoaded = false
-      setTimeout(async () => {
-        if (options.reset) {
-          console.log('reset messages')
-          this.messages = [] // this.addMessages(true)
-        } else {
-          try {
-            const {
-          data: { Message },
-        } = await this.$apollo.query({
-              query: messageQuery(),
-              variables: {
-                roomId: room.id,
-              }
-            })
-            console.log('Messages', Message)
-                this.messages = Message
-          } catch (error) {
-            console.log('Error', error)
-            this.messages = [] //this.addMessages(true)
-            this.$toast.error(error.message)
-          }
-        }
-        this.messagesLoaded = true
-      })
-    },
-
-    /* addMessages(reset) {
-      const messages = []
-
-      for (let i = 0; i < 30; i++) {
-        messages.push({
-          _id: reset ? i : this.messages.length + i,
-          content: `${reset ? '' : 'paginated'} message ${i + 1}`,
-          senderId: '4321',
-          username: 'John Doe',
-          date: '13 November',
-          timestamp: '10:20',
-        })
-      }
-      messages.push({
-        _id: '31',
-        content: `Hallo Welt`,
-        senderId: '1234',
-        username: 'John Doe',
-        date: '13 November',
-        timestamp: '10:20',
-      })
-
-      return messages
-    }, */
-
-    sendMessage(message) {
-      this.messages = [
-        ...this.messages,
-        {
-          _id: this.messages.length,
-          content: message.content,
-          senderId: this.currentUserId,
-          timestamp: new Date().toString().substring(16, 21),
-          date: new Date().toDateString(),
-        },
-      ]
-    },
-
-    addNewMessage() {
-      setTimeout(() => {
-        this.messages = [
-          ...this.messages,
-          {
-            _id: this.messages.length,
-            content: 'NEW MESSAGE',
-            senderId: '1234',
-            timestamp: new Date().toString().substring(16, 21),
-            date: new Date().toDateString(),
-          },
-        ]
-      }, 2000)
-    },
-  },
-  apollo: {
-    Rooms: {
-      query() {
-        return roomQuery()
-      },
-      update({ Room }) {
-        console.log('Rooms', Room)
-        if (!Room) {
-          this.rooms = []
-          return
-        }  
-    
-        this.rooms = Room
-       
-      },
-      error(error) {
-        this.rooms = []
-        this.$toast.error(error.message)
-      },
-      fetchPolicy: 'cache-and-network',
-    },
-  },
 }
 </script>
 <style lang="scss">