diff --git a/src/modules/chatbot/components/chat-button.vue b/src/modules/chatbot/components/chat-button.vue
index 49d6ac9..56994c6 100644
--- a/src/modules/chatbot/components/chat-button.vue
+++ b/src/modules/chatbot/components/chat-button.vue
@@ -1,24 +1,24 @@
-<script setup lang="ts">
-import { isChatVisible } from "src/stores/dialogue-box";
+<script
+    setup
+    lang="ts"
+>
+import { useChatbotStore } from 'src/stores/chatbot-store';
 
-const toggleChat = () => {
-  isChatVisible.value = !isChatVisible.value;
-};
+    const chatbot_store = useChatbotStore();
 </script>
 
 <template>
-  <div
-    style="z-index: 3; margin-right: 20px"
-    class="display: flex"
-  >
-    <q-btn
-      flat
-      color="transparant"
-      size="20px"
-      icon="smart_toy"
-      @click="toggleChat"
-      style="--q-icon-size: 28px; min-width: auto;"
-    />
-  </div>
-
+    <div
+        style="z-index: 3; margin-right: 20px"
+        class="display: flex"
+    >
+        <q-btn
+            flat
+            color="transparant"
+            size="20px"
+            icon="smart_toy"
+            @click="chatbot_store.is_showing_chatbot = !chatbot_store.is_showing_chatbot"
+            style="--q-icon-size: 28px; min-width: auto;"
+        />
+    </div>
 </template>
\ No newline at end of file
diff --git a/src/modules/chatbot/components/conversation-box.vue b/src/modules/chatbot/components/conversation-box.vue
index 8f19d43..930311c 100644
--- a/src/modules/chatbot/components/conversation-box.vue
+++ b/src/modules/chatbot/components/conversation-box.vue
@@ -1,181 +1,182 @@
-<script setup lang="ts">
-import { isChatVisible } from "src/stores/dialogue-box";
-import DialogueContent from "./dialogue-content.vue";
-import { computed, onMounted, ref } from "vue";
-import { useChatApi } from "../composables/chat-api";
-import { useChatStore } from "src/stores/message-store";
-import { useRoute } from "vue-router";
-import { watch } from "vue";
-import { chatbotService } from "../services/messageService";
-import { pageContexts } from "src/page-contexts";
-import type { contextObject } from "src/page-contexts/pages/types/context-object";
+<script
+    setup
+    lang="ts"
+>
+    import DialogueContent from "./dialogue-content.vue";
 
-// Block to enable editing the width of the drawer
-const drawerWidth = ref(370);
-let dragging = false
-const startDrag = (e: MouseEvent) => {
-  dragging = true
-  e.preventDefault()
-}
-const onDrag = (e: MouseEvent) => {
-  if (!dragging) return
-  // calculate new width
-  const newWidth = window.innerWidth - e.clientX
-  drawerWidth.value = Math.max(350, Math.min(1000, newWidth)) // min/max width
-}
-const stopDrag = () => {
-  dragging = false
-}
-window.addEventListener('mousemove', onDrag)
-window.addEventListener('mouseup', stopDrag)
+    import { computed, onMounted, ref, watch } from "vue";
+    import { useChatbotApi } from "src/modules/chatbot/composables/chatbot-api";
+    import { chatbotService } from "src/modules/chatbot/services/messages.service";
+    import { pageContexts } from "src/page-contexts";
+    import type { contextObject } from "src/page-contexts/pages/types/context-object";
+import { useChatbotStore } from "src/stores/chatbot-store";
 
-
-// Block to handle the incomming and sending of the messages from the user and the ai
-const text = ref('');
-const { messages } = useChatStore();
-const { sendMessage } = useChatApi();
-const chatStore = useChatStore();
-onMounted(() => {
-  chatStore.showInstructionsOnce();
-})
-
-const isSessionReady = ref(false);
-const handleSend = async () => {
-  const userMessage = text.value.trim();
-
-
-  text.value = '';
-  messages.push({
-    text: userMessage,
-    sent: true,
-    isThinking: false,
-  })
-
-  const thinkingMessage = {
-    text: "Thinking...",
-    sent: false,
-    isThinking: true
-  }
-  messages.push(thinkingMessage)
-
-  try {
-    const aiResponse = await sendMessage(userMessage);
-
-    const index = messages.indexOf(thinkingMessage);
-    if (index !== -1) {
-      messages.splice(index, 1, {
-        text: aiResponse.text,
-        sent: false,
-        isThinking: false,
-      })
+    // Block to enable editing the width of the drawer
+    const drawerWidth = ref(370);
+    let dragging = false
+    const startDrag = (e: MouseEvent) => {
+        dragging = true
+        e.preventDefault()
     }
-  }
-  catch (error) {
-    const index = messages.indexOf(thinkingMessage);
-    if (index !== -1) {
-      messages.splice(index, 1, {
-        text: "Sorry, Message wasn't able to sent.",
-        sent: false,
-        isThinking: false,
-      });
+    const onDrag = (e: MouseEvent) => {
+        if (!dragging) return
+        // calculate new width
+        const newWidth = window.innerWidth - e.clientX
+        drawerWidth.value = Math.max(350, Math.min(1000, newWidth)) // min/max width
     }
-    throw error;
-  }
-};
+    const stopDrag = () => {
+        dragging = false
+    }
+    window.addEventListener('mousemove', onDrag)
+    window.addEventListener('mouseup', stopDrag)
+
+
+    // Block to handle the incomming and sending of the messages from the user and the ai
+    const text = ref('');
+    const chatbot_store = useChatbotStore();
+    const chatbot_api = useChatApi();
+    const chatStore = useChatStore();
+    onMounted(() => {
+        chatStore.showInstructionsOnce();
+    })
+
+    const isSessionReady = ref(false);
+    const handleSend = async () => {
+        const userMessage = text.value.trim();
+
+
+        text.value = '';
+        messages.push({
+            text: userMessage,
+            sent: true,
+            isThinking: false,
+        })
+
+        const thinkingMessage = {
+            text: "Thinking...",
+            sent: false,
+            isThinking: true
+        }
+        messages.push(thinkingMessage)
+
+        try {
+            const aiResponse = await sendMessage(userMessage);
+
+            const index = messages.indexOf(thinkingMessage);
+            if (index !== -1) {
+                messages.splice(index, 1, {
+                    text: aiResponse.text,
+                    sent: false,
+                    isThinking: false,
+                })
+            }
+        }
+        catch (error) {
+            const index = messages.indexOf(thinkingMessage);
+            if (index !== -1) {
+                messages.splice(index, 1, {
+                    text: "Sorry, Message wasn't able to sent.",
+                    sent: false,
+                    isThinking: false,
+                });
+            }
+            throw error;
+        }
+    };
 
 
 
-// Block to receive user from child
-const userEmail = ref('')
-const userRole = ref('')
+    // Block to receive user from child
+    const userEmail = ref('')
+    const userRole = ref('')
 
-const HandleEmail = (email: string) => {
-  userEmail.value = email;
-}
+    const HandleEmail = (email: string) => {
+        userEmail.value = email;
+    }
 
-const HandleRole = (role: string) => {
-  userRole.value = role;
-}
+    const HandleRole = (role: string) => {
+        userRole.value = role;
+    }
 
-// Block to handle sending the url to n8n
-const route = useRoute()
-const sendPageContext = chatbotService.sendPageContext;
-// Capture and send page context to n8n
-const currentContext = computed(() =>
-  pageContexts.find(ctx => ctx.path === route.fullPath.replace('/', ''))
-)
+    // Block to handle sending the url to n8n
+    const route = useRoute()
+    const sendPageContext = chatbotService.sendPageContext;
+    // Capture and send page context to n8n
+    const currentContext = computed(() =>
+        pageContexts.find(ctx => ctx.path === route.fullPath.replace('/', ''))
+    )
 
-// Function that sends the page context to n8n
-watch([currentContext, userEmail, userRole], async ([ctx, email, role]) => {
-  if (!ctx || !email || !role) return;
+    // Function that sends the page context to n8n
+    watch([currentContext, userEmail, userRole], async ([ctx, email, role]) => {
+        if (!ctx || !email || !role) return;
 
-  const contextPayload: contextObject = {
-    name: ctx.name,
-    description: ctx.description,
-    features: ctx.features,
-    path: ctx.path
-  }
+        const contextPayload: contextObject = {
+            name: ctx.name,
+            description: ctx.description,
+            features: ctx.features,
+            path: ctx.path
+        }
 
-  try {
-    await Promise.all([chatbotService.sendUserCredentials(email, role),
-    sendPageContext(contextPayload),
-    ]);
-    isSessionReady.value = true;
-  } catch (err) {
-    console.error("Error", err)
-  }
-},
-  { immediate: true }
-);
+        try {
+            await Promise.all([chatbotService.sendUserCredentials(email, role),
+            sendPageContext(contextPayload),
+            ]);
+            isSessionReady.value = true;
+        } catch (err) {
+            console.error("Error", err)
+        }
+    },
+        { immediate: true }
+    );
 
 
-// const custId = ref('')
-// const handleCustomerId = async () => {
-//   const cId = custId.value;
-//   custId.value = '';
-//   await chatbotService.retrieveCustomerDiagnostics(cId);
-// }
+    // const custId = ref('')
+    // const handleCustomerId = async () => {
+    //   const cId = custId.value;
+    //   custId.value = '';
+    //   await chatbotService.retrieveCustomerDiagnostics(cId);
+    // }
 
 
 
 </script>
 
 <template>
-  <q-drawer
-    side="right"
-    v-model="isChatVisible"
-    class="chat-drawer"
-    style="box-shadow: -4px 0 12px rgba(0,0,0,0.15);"
-    :width="drawerWidth"
-  >
-    <div
-      class="chat-header"
-      style="text-align:start; padding: 10px 10px 0px;"
-    >{{ $t('chatbot.chat_header') }}</div>
-    <div class="line-separator"></div>
-
-    <div class="chat-body">
-      <DialogueContent
-        @sendRole="HandleRole"
-        @sendEmail="HandleEmail"
-        :messages="messages"
-      />
-    </div>
-
-    <div class="line-separator"></div>
-    <q-form
-      submit="handleSend"
-      class="chat-footer row"
+    <q-drawer
+        side="right"
+        v-model="isChatVisible"
+        class="chat-drawer"
+        style="box-shadow: -4px 0 12px rgba(0,0,0,0.15);"
+        :width="drawerWidth"
     >
-      <q-input
-        v-model="text"
-        :label="$t('chatbot.chat_placeholder')"
-        :autogrow="false"
-        class="col"
-        style="margin-left: 8px;"
-        @keyup.enter="handleSend"
-      />
-      <!-- <q-input
+        <div
+            class="chat-header"
+            style="text-align:start; padding: 10px 10px 0px;"
+        >{{ $t('chatbot.chat_header') }}</div>
+        <div class="line-separator"></div>
+
+        <div class="chat-body">
+            <DialogueContent
+                @sendRole="HandleRole"
+                @sendEmail="HandleEmail"
+                :messages="messages"
+            />
+        </div>
+
+        <div class="line-separator"></div>
+        <q-form
+            submit="handleSend"
+            class="chat-footer row"
+        >
+            <q-input
+                v-model="text"
+                :label="$t('chatbot.chat_placeholder')"
+                :autogrow="false"
+                class="col"
+                style="margin-left: 8px;"
+                @keyup.enter="handleSend"
+            />
+            <!-- <q-input
         v-model="custId"
         :label="'Customer Id'"
         :autogrow="false"
@@ -183,51 +184,51 @@ watch([currentContext, userEmail, userRole], async ([ctx, email, role]) => {
         style="margin-left: 8px;"
         @keyup.enter="handleCustomerId"
       /> -->
-    </q-form>
-    <div
-      class="drag-handle"
-      @mousedown.prevent="startDrag"
-    ></div>
-  </q-drawer>
+        </q-form>
+        <div
+            class="drag-handle"
+            @mousedown.prevent="startDrag"
+        ></div>
+    </q-drawer>
 </template>
 
 <style scoped>
 .drag-handle {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 8px;
-  height: 100%;
-  cursor: ew-resize;
-  z-index: 1000;
-  background-color: rgba(0, 0, 0, 0);
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 8px;
+    height: 100%;
+    cursor: ew-resize;
+    z-index: 1000;
+    background-color: rgba(0, 0, 0, 0);
 }
 
 .line-separator {
-  height: 1px;
-  background-color: #ccc;
-  margin: 10px 0;
+    height: 1px;
+    background-color: #ccc;
+    margin: 10px 0;
 }
 
 .chat-drawer {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
 }
 
 /* Header at the top */
 .chat-header {
-  color: #019547;
-  padding: 10px;
-  font-weight: bold;
-  flex-shrink: 0;
+    color: #019547;
+    padding: 10px;
+    font-weight: bold;
+    flex-shrink: 0;
 }
 
 /* Scrollable middle */
 .chat-body {
-  flex: 1;
-  padding: 10px;
-  overflow-y: auto;
-  height: 81%;
+    flex: 1;
+    padding: 10px;
+    overflow-y: auto;
+    height: 81%;
 }
 </style>
diff --git a/src/modules/chatbot/composables/chat-api.ts b/src/modules/chatbot/composables/chat-api.ts
deleted file mode 100644
index 2f5ba6c..0000000
--- a/src/modules/chatbot/composables/chat-api.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-// composables/chat-api.ts
-import { useChatStore } from "src/stores/message-store";
-import type { Message } from "../types/dialogue-message";
-
-export const useChatApi = () => {
-  const chatStore = useChatStore();
-
-  const sendMessage = async (text: string): Promise<Message> => {
-    return await chatStore.sendMessage(text);
-  };
-
-  return { sendMessage };
-};
diff --git a/src/modules/chatbot/composables/chatbot-api.ts b/src/modules/chatbot/composables/chatbot-api.ts
new file mode 100644
index 0000000..d399f2f
--- /dev/null
+++ b/src/modules/chatbot/composables/chatbot-api.ts
@@ -0,0 +1,13 @@
+// composables/chat-api.ts
+import { useChatbotStore } from "src/stores/chatbot-store";
+import type { Message } from "src/modules/chatbot/models/dialogue-message.model";
+
+export const useChatbotApi = () => {
+  const chatStore = useChatbotStore();
+
+  const sendMessage = async (text: string): Promise<Message> => {
+    return await chatStore.sendMessage(text);
+  };
+
+  return { sendMessage };
+};
diff --git a/src/modules/chatbot/types/dialogue-message.ts b/src/modules/chatbot/models/dialogue-message.model.ts
similarity index 100%
rename from src/modules/chatbot/types/dialogue-message.ts
rename to src/modules/chatbot/models/dialogue-message.model.ts
diff --git a/src/modules/chatbot/services/messageService.ts b/src/modules/chatbot/services/messages.service.ts
similarity index 100%
rename from src/modules/chatbot/services/messageService.ts
rename to src/modules/chatbot/services/messages.service.ts
diff --git a/src/stores/message-store.ts b/src/stores/chatbot-store.ts
similarity index 62%
rename from src/stores/message-store.ts
rename to src/stores/chatbot-store.ts
index b7dd045..cc69f1e 100644
--- a/src/stores/message-store.ts
+++ b/src/stores/chatbot-store.ts
@@ -1,12 +1,13 @@
-import type { Message } from "src/modules/chatbot/types/dialogue-message";
+import type { Message } from "src/modules/chatbot/models/dialogue-message.model";
 import { defineStore } from "pinia";
-import { chatbotService } from "src/modules/chatbot/services/messageService";
+import { chatbotService } from "src/modules/chatbot/services/messages.service";
 import { ref } from "vue";
 import { useI18n } from "vue-i18n";
 
-export const useChatStore = defineStore("chat", () => {
+export const useChatbotStore = defineStore("chatbot", () => {
   const messages = ref<Message[]>([]);
-  const hasShownInstructions = ref(false);
+  const has_shown_instructions = ref(false);
+  const is_showing_chatbot = ref(false);
   const { t } = useI18n();
 
   const sendMessage = async (userInput: string) => {
@@ -15,18 +16,20 @@ export const useChatStore = defineStore("chat", () => {
   };
 
   const showInstructionsOnce = () => {
-    if (!hasShownInstructions.value) {
+    if (!has_shown_instructions.value) {
       messages.value.push({
         text: t("chatbot.chat_initial_message"),
         sent: false,
         isThinking: false,
       });
-      hasShownInstructions.value = true;
+      has_shown_instructions.value = true;
     }
   };
 
   return {
     messages,
+    has_shown_instructions,
+    is_showing_chatbot,
     sendMessage,
     showInstructionsOnce,
   };
diff --git a/src/stores/dialogue-box.ts b/src/stores/dialogue-box.ts
deleted file mode 100644
index cb332e3..0000000
--- a/src/stores/dialogue-box.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { ref } from "vue";
-
-export const isChatVisible = ref(false);