diff --git a/src/App.tsx b/src/App.tsx
index 1866048..98be01a 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,8 +1,8 @@
-import Header from '@/components/Header'
-import Footer from '@/components/Footer'
-import Main from '@/components/Main'
-import AppButton from '@/components/AppButton'
-import AppContainer from '@/components/AppContainer'
+import Header from '@/views/Header'
+import Footer from '@/views/Footer'
+import Main from '@/views/Main'
+import AppButton from '@/views/AppButton'
+import AppContainer from '@/views/AppContainer'
 
 export default function App() {
   return (
diff --git a/src/components/Main/LikeButton.tsx b/src/components/LikeButton.tsx
similarity index 100%
rename from src/components/Main/LikeButton.tsx
rename to src/components/LikeButton.tsx
diff --git a/src/components/Main/Message.tsx b/src/components/Message.tsx
similarity index 97%
rename from src/components/Main/Message.tsx
rename to src/components/Message.tsx
index 131f144..53edb67 100644
--- a/src/components/Main/Message.tsx
+++ b/src/components/Message.tsx
@@ -2,8 +2,9 @@ import { type FC, useState } from 'react'
 import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/Avatar'
 import { format } from 'date-fns'
 
-import LikeButton from './LikeButton'
+import LikeButton from '@/components/LikeButton'
 import { FrownIcon, ThumbsUpIcon } from 'lucide-react'
+
 export interface MessageProps {
   data: {
     id: string
diff --git a/src/components/Footer/MessageInput.tsx b/src/components/MessageInput.tsx
similarity index 100%
rename from src/components/Footer/MessageInput.tsx
rename to src/components/MessageInput.tsx
diff --git a/src/domain/MessageInput.ts b/src/domain/MessageInput.ts
index 4c2dbfb..eca27e9 100644
--- a/src/domain/MessageInput.ts
+++ b/src/domain/MessageInput.ts
@@ -9,35 +9,42 @@ const MessageInputDomain = Remesh.domain({
     })
 
     const PreviewState = domain.state({
-      name: 'PreviewState',
+      name: 'MessageInput.PreviewState',
       default: false
     })
 
     const PreviewQuery = domain.query({
-      name: 'PreviewQuery',
+      name: 'MessageInput.PreviewQuery',
       impl: ({ get }) => {
         return get(PreviewState())
       }
     })
 
     const PreviewCommand = domain.command({
-      name: 'PreviewCommand',
+      name: 'MessageInput.PreviewCommand',
       impl: (_, value: boolean) => {
         return PreviewState().new(value)
       }
     })
 
     const EnterEvent = domain.event({
-      name: 'EnterEvent'
+      name: 'MessageInput.EnterEvent'
     })
 
     const EnterCommand = domain.command({
-      name: 'EnterCommand',
+      name: 'MessageInput.EnterCommand',
       impl: () => {
         return EnterEvent()
       }
     })
 
+    const ClearCommand = domain.command({
+      name: 'MessageInput.ClearCommand',
+      impl: () => {
+        return inputModule.command.InputCommand('')
+      }
+    })
+
     return {
       query: {
         ...inputModule.query,
@@ -46,6 +53,7 @@ const MessageInputDomain = Remesh.domain({
       command: {
         ...inputModule.command,
         EnterCommand,
+        ClearCommand,
         PreviewCommand
       },
       event: {
diff --git a/src/components/AppButton/index.tsx b/src/views/AppButton/index.tsx
similarity index 100%
rename from src/components/AppButton/index.tsx
rename to src/views/AppButton/index.tsx
diff --git a/src/components/AppContainer/index.tsx b/src/views/AppContainer/index.tsx
similarity index 100%
rename from src/components/AppContainer/index.tsx
rename to src/views/AppContainer/index.tsx
diff --git a/src/components/Footer/index.tsx b/src/views/Footer/index.tsx
similarity index 65%
rename from src/components/Footer/index.tsx
rename to src/views/Footer/index.tsx
index 0c5dc23..7edd6c0 100644
--- a/src/components/Footer/index.tsx
+++ b/src/views/Footer/index.tsx
@@ -1,10 +1,18 @@
 import { type FC } from 'react'
 import { Button } from '@/components/ui/Button'
 import { SmileIcon, CornerDownLeftIcon, ImageIcon } from 'lucide-react'
-import MessageInput from './MessageInput'
+import MessageInput from '@/components/MessageInput'
+import { useRemeshDomain, useRemeshEvent, useRemeshSend } from 'remesh-react'
+import MessageInputDomain from '@/domain/MessageInput'
 
 const Footer: FC = () => {
-  const handleSend = () => {}
+  const send = useRemeshSend()
+  const messageInputDomain = useRemeshDomain(MessageInputDomain())
+
+  const handleSend = () => {
+    send(messageInputDomain.command.ClearCommand())
+  }
+  useRemeshEvent(messageInputDomain.event.EnterEvent, handleSend)
 
   return (
     <div className="grid gap-y-2 p-4">
diff --git a/src/components/Header/index.tsx b/src/views/Header/index.tsx
similarity index 100%
rename from src/components/Header/index.tsx
rename to src/views/Header/index.tsx
diff --git a/src/components/Main/index.tsx b/src/views/Main/index.tsx
similarity index 96%
rename from src/components/Main/index.tsx
rename to src/views/Main/index.tsx
index b6b82b3..e7fa80a 100644
--- a/src/components/Main/index.tsx
+++ b/src/views/Main/index.tsx
@@ -1,5 +1,5 @@
 import { type FC } from 'react'
-import Message from './Message'
+import Message from '@/components/Message'
 
 const Main: FC = () => {
   const messages = [
diff --git a/tsconfig.json b/tsconfig.json
index 0465fa1..11af4f9 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -13,7 +13,7 @@
     "resolveJsonModule": true,
     "noUnusedLocals": true,
     "forceConsistentCasingInFileNames": true,
-    "types": ["vite/client", "unplugin-icons/types/react"],
+    "types": ["vite/client"],
     "paths": {
       "@/*": ["src/*"]
     }