diff --git a/src/modules/chatbot/components/chat-button.vue b/src/modules/chatbot/components/chat-button.vue
new file mode 100644
index 0000000..0ebdede
--- /dev/null
+++ b/src/modules/chatbot/components/chat-button.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { isChatVisible } from "src/stores/dialogue-box";
+
+const toggleChat = () => {
+  isChatVisible.value = !isChatVisible.value;
+};
+</script>
+
+<template>
+  <div class="accessBot">
+    <q-btn round color="primary" size="20px" class="glossy" icon="chat" @click="toggleChat">
+    </q-btn>
+  </div>
+</template>
+
+<style>
+.accessBot {
+  position: fixed;
+  bottom: 75px;
+  right: 75px;
+  z-index: 9999;
+}
+</style>
diff --git a/src/modules/chatbot/components/conversation-box.vue b/src/modules/chatbot/components/conversation-box.vue
new file mode 100644
index 0000000..33625b9
--- /dev/null
+++ b/src/modules/chatbot/components/conversation-box.vue
@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import { isChatVisible } from "src/stores/dialogue-box";
+import { provide, ref } from "vue";
+import DialogueContent from "./dialogue-content.vue";
+import { Message } from "../types/dialogue-message";
+
+const text = ref("");
+const messages = ref<Message[]>([]);
+
+const sendMessage = () => {
+  if (!text.value.trim()) return;
+
+  messages.value.push({
+    text: text.value,
+    sender: 'user',
+    timestamp: new Date()
+  });
+
+  setTimeout(() => {
+    messages.value.push({
+      text: 'Let me check that for you!',
+      sender: 'assistant',
+      timestamp: new Date()
+    });
+  }, 500);
+
+  provide('message', messages);
+  provide('sendMessage', sendMessage);
+  provide('text', text);
+}
+
+</script>
+
+<template>
+  <transition name="fade-slide">
+    <div v-if="isChatVisible" class="dialogue">
+      <div class="chat-header">AI Assistant</div>
+      <div class="chat-body">
+        <DialogueContent></DialogueContent>
+      </div>
+      <div class="row chat-footer">
+        <q-input v-model="text" label="Enter a Message" class="col" />
+        <q-btn :ripple="{ center: true }" color="primary" glossy label="Send"
+          style="width:60px; height:45px; margin-top: 8px; font-size: 14px;" class="col-2">
+        </q-btn>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<style>
+.dialogue {
+  position: fixed;
+  bottom: 150px;
+  right: 30px;
+  width: 300px;
+  height: 400px;
+  background: white;
+  border-radius: 6px;
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.chat-header {
+  background: #019547;
+  color: white;
+  padding: 10px;
+  font-weight: bold;
+}
+
+.chat-body {
+  flex: 1;
+  padding: 10px;
+  overflow-y: auto;
+}
+
+.chat-footer {
+  padding: 10px;
+  border-top: 0.1px solid #ccc;
+}
+
+.input-wrapper {
+  display: flex;
+  align-items: center;
+}
+
+.full-width {
+  flex: 1;
+}
+
+
+.fade-slide-enter-active,
+.fade-slide-leave-active {
+  transition: all 0.2s ease;
+}
+
+.fade-slide-enter-from,
+.fade-slide-leave-to {
+  opacity: 0;
+  transform: translateY(20px);
+}
+</style>
diff --git a/src/modules/chatbot/components/dialogue-content.vue b/src/modules/chatbot/components/dialogue-content.vue
new file mode 100644
index 0000000..cf79d69
--- /dev/null
+++ b/src/modules/chatbot/components/dialogue-content.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import DialoguePhrase from './dialogue-phrase.vue';
+
+</script>
+
+<template>
+    <q-infinite-scroll>
+        <DialoguePhrase />
+    </q-infinite-scroll>
+</template>
\ No newline at end of file
diff --git a/src/modules/chatbot/components/dialogue-phrase.vue b/src/modules/chatbot/components/dialogue-phrase.vue
new file mode 100644
index 0000000..2df47b1
--- /dev/null
+++ b/src/modules/chatbot/components/dialogue-phrase.vue
@@ -0,0 +1,8 @@
+<script setup lang="ts">
+</script>
+
+<template>
+    <q-chat-message sent :text="['What\'s the temperature outside?']">
+
+    </q-chat-message>
+</template>
\ No newline at end of file
diff --git a/src/modules/chatbot/pages/chatbot-page.vue b/src/modules/chatbot/pages/chatbot-page.vue
index 8130778..8c96832 100644
--- a/src/modules/chatbot/pages/chatbot-page.vue
+++ b/src/modules/chatbot/pages/chatbot-page.vue
@@ -1,23 +1,17 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import Chatbutton from "src/modules/chatbot/components/chat-button.vue";
+import ConversationBox from "../components/conversation-box.vue";
+</script>
 
 <template>
-  <div class="accessBot">
-    <q-btn
-      round
-      color="primary"
-      size="20px"
-      class="glossy"
-      icon="chat"
-    >
-    </q-btn>
+  <div>
+    <ConversationBox></ConversationBox>
+    <Chatbutton></Chatbutton>
   </div>
 </template>
 
 <style scoped>
-.accessBot {
-  position: fixed;
-  bottom: 75px;
-  right: 20px;
-  z-index: 9999;
+.box-settings {
+  position: relative;
 }
 </style>
diff --git a/src/modules/chatbot/types/dialogue-message.ts b/src/modules/chatbot/types/dialogue-message.ts
new file mode 100644
index 0000000..f6f614c
--- /dev/null
+++ b/src/modules/chatbot/types/dialogue-message.ts
@@ -0,0 +1,5 @@
+export interface Message{
+    text:string;
+    sender: 'user' | 'assistant';
+    timestamp: Date;
+};
\ No newline at end of file
diff --git a/src/stores/dialogue-box.ts b/src/stores/dialogue-box.ts
new file mode 100644
index 0000000..cb332e3
--- /dev/null
+++ b/src/stores/dialogue-box.ts
@@ -0,0 +1,3 @@
+import { ref } from "vue";
+
+export const isChatVisible = ref(false);