diff --git a/geografia-vue/src/components/keyboard/Keyboard.vue b/geografia-vue/src/components/keyboard/Keyboard.vue
index 29a8c41..e9fd4a1 100644
--- a/geografia-vue/src/components/keyboard/Keyboard.vue
+++ b/geografia-vue/src/components/keyboard/Keyboard.vue
@@ -1,5 +1,16 @@
 <template>
-  <div class="msg-composition"><p>I'm writing hereee</p></div>
+  <div class="keyboard" @click="selectWord">
+    <p>I'm writing hereee</p>
+  </div>
 </template>
 
+<script>
+export default {
+  methods: {
+    selectedWord() {
+      this.$emit("selectedWord", "a");
+    },
+  },
+};
+</script>
 <style scoped></style>
\ No newline at end of file
diff --git a/geografia-vue/src/components/keyboard/KeyboardWord.vue b/geografia-vue/src/components/keyboard/KeyboardWord.vue
index c20b598..cf75232 100644
--- a/geografia-vue/src/components/keyboard/KeyboardWord.vue
+++ b/geografia-vue/src/components/keyboard/KeyboardWord.vue
@@ -1,14 +1,12 @@
 <template>
-  <div class="msg-composition">
-   <KeyboardWord />
+  <div class="keyboard-word">
+    <p>placeholder word</p>
   </div>
 </template>
 
 <script>
-import KeyboardWord from "./KeyboardWord.vue";
 export default {
-   components: { KeyboardWord },
-  setup() {},
+  props: {},
 };
 </script>
 
diff --git a/geografia-vue/src/components/keyboard/MessageComposition.vue b/geografia-vue/src/components/keyboard/MessageComposition.vue
index b9a2739..63c8e68 100644
--- a/geografia-vue/src/components/keyboard/MessageComposition.vue
+++ b/geografia-vue/src/components/keyboard/MessageComposition.vue
@@ -5,14 +5,26 @@ import KeyboardWord from "./KeyboardWord.vue";
 
 <template>
   <div>
-    <KeyboardWord />
-    <Keyboard />
+    <KeyboardWord :key="soggetto" @click="test" />
+    <KeyboardWord :key="oggetto" @click="test" />
+    <KeyboardWord :key="verbo" @click="test" />
+    <Keyboard @selectedWord="selectedWord" />
   </div>
 </template>
 
 <script>
 export default {
-  setup() {},
+  data() {
+    return { focus: "" };
+  },
+  methods: {
+    test(e) {
+      console.log(e);
+    },
+    selectedWord() {
+      console.log("selectedWord");
+    },
+  },
 };
 </script>
 
diff --git a/geografia-vue/src/components/single_chat/ChatView.vue b/geografia-vue/src/components/single_chat/ChatView.vue
index ab20601..3156901 100644
--- a/geografia-vue/src/components/single_chat/ChatView.vue
+++ b/geografia-vue/src/components/single_chat/ChatView.vue
@@ -1,30 +1,34 @@
 <script setup>
-import Keyboard from "../keyboard/Keyboard.vue";
+import MessageComposition from "../keyboard/MessageComposition.vue";
 import ChatHistory from "./ChatHistory.vue";
 </script>
 
 <template>
   <div>
     <!-- Move this button in the header -->
-    <button alt="Back" name="Back" @click="this.$emit('hideChat')">←</button>
-    <ChatHistory :chat-id="chatId" />
-    <button
-      alt="write message"
-      name="write-message"
-      @click="$options.writeMessage = true"
-    >
-      +
-    </button>
-    <Keyboard v-if="writeMessage" :chat-id="chatId" />
+    <div id="chat-view" v-show="!writeMessage">
+      <button alt="Back" name="Back" @click="this.$emit('hideChat')">←</button>
+      <ChatHistory :chat-id="chatId" />
+      <button
+        alt="write message"
+        name="write-message"
+        @click="this.writeMessage = true"
+      >
+        +
+      </button>
+    </div>
+    <MessageComposition
+      v-if="writeMessage"
+      :chat-id="chatId"
+      @hideMessageHistory="this.writeMessage = false"
+    />
   </div>
 </template>
 
 <script>
 export default {
-  writeMessage: Boolean,
-  setup() {
-    this.writeMessage = false;
-    console.log(this.writeMessage);
+  data() {
+    return { writeMessage: false };
   },
   props: { chatId: Number },
 };