diff --git a/src/app/cache/index.js b/src/app/cache/index.js
index 621e7ba1..ded8c2be 100644
--- a/src/app/cache/index.js
+++ b/src/app/cache/index.js
@@ -34,6 +34,10 @@ const tables = [
     storeName: "server",
     description: "store server data",
   },
+  {
+    storeName: "ui",
+    description: "store UI state",
+  },
   // {
   //   storeName: "message",
   //   description: "store message with key-val full data",
diff --git a/src/app/cache/useRehydrate.js b/src/app/cache/useRehydrate.js
index 0118bd55..3bb9bd43 100644
--- a/src/app/cache/useRehydrate.js
+++ b/src/app/cache/useRehydrate.js
@@ -9,6 +9,7 @@ import { fullfillUserMsg } from "../slices/message.user";
 import { fullfillChannels } from "../slices/channels";
 import { fullfillContacts } from "../slices/contacts";
 import { fullfillFootprint } from "../slices/footprint";
+import { fullfillUI } from "../slices/ui";
 const useRehydrate = () => {
   const [iterated, setIterated] = useState(false);
   const dispatch = useDispatch();
@@ -21,6 +22,7 @@ const useRehydrate = () => {
       reactionMessage: {},
       message: { replying: {} },
       footprint: {},
+      ui: {},
       server: {},
     };
     const tables = Object.keys(window.CACHE);
@@ -42,6 +44,9 @@ const useRehydrate = () => {
             case "footprint":
               rehydrateData.footprint[key] = data;
               break;
+            case "ui":
+              rehydrateData.ui[key] = data;
+              break;
             case "messageChannel":
               rehydrateData.channelMessage[key] = data;
               break;
@@ -73,6 +78,7 @@ const useRehydrate = () => {
       dispatch(fullfillUserMsg(rehydrateData.userMessage));
       dispatch(fullfillMessage(rehydrateData.message));
       dispatch(fullfillFootprint(rehydrateData.footprint));
+      dispatch(fullfillUI(rehydrateData.ui));
       dispatch(fullfillReactionMessage(rehydrateData.reactionMessage));
     });
 
diff --git a/src/app/listener.middleware/handler.ui.js b/src/app/listener.middleware/handler.ui.js
new file mode 100644
index 00000000..6678ea69
--- /dev/null
+++ b/src/app/listener.middleware/handler.ui.js
@@ -0,0 +1,23 @@
+import clearTable from "./clear.handler";
+export default async function handler({ operation, data = {} }) {
+  const table = window.CACHE["ui"];
+  if (operation.startsWith("reset")) {
+    clearTable("ui");
+    return;
+  }
+  switch (operation) {
+    case "toggleMenuExpand":
+      {
+        console.log("cache the toggleMenuExpand");
+        await table.setItem("menuExpand", data.menuExpand);
+      }
+      break;
+    case "updateInputMode":
+      {
+        await table.setItem("inputMode", data.inputMode);
+      }
+      break;
+    default:
+      break;
+  }
+}
diff --git a/src/app/listener.middleware/index.js b/src/app/listener.middleware/index.js
index e717c9c6..2c4717f3 100644
--- a/src/app/listener.middleware/index.js
+++ b/src/app/listener.middleware/index.js
@@ -7,6 +7,7 @@ import dmMsgHandler from "./handler.dm.msg";
 import serverHandler from "./handler.server";
 import messageHandler from "./handler.message";
 import reactionHandler from "./handler.reaction";
+import UIHandler from "./handler.ui";
 import footprintHandler from "./handler.footprint";
 const operations = [
   "__rtkq",
@@ -16,6 +17,7 @@ const operations = [
   "userMessage",
   "reactionMessage",
   "message",
+  "ui",
   "footprint",
   "server",
 ];
@@ -114,6 +116,15 @@ listenerMiddleware.startListening({
           });
         }
         break;
+      case "ui":
+        {
+          await UIHandler({
+            operation,
+            payload,
+            data: state,
+          });
+        }
+        break;
       case "server":
         {
           await serverHandler({
diff --git a/src/app/services/handlers.js b/src/app/services/handlers.js
index 3dc9add3..0db71588 100644
--- a/src/app/services/handlers.js
+++ b/src/app/services/handlers.js
@@ -18,6 +18,18 @@ export const onMessageSendStarted = async (
 ) => {
   // id: who send to ,from_uid: who sent
   const ts = properties.local_id || new Date().getTime();
+  // let imageData = null;
+  // if (type == "image") {
+  //   if (typeof content == "string" && content.startsWith("data:image")) {
+  //     // base64
+  //     // const resp = await fetch(content);
+  //     // const blob = await resp.blob();
+  //     // imageData = new File([blob], "tmp.png", { type: "image/png" });
+  //     imageData = content;
+  //   } else {
+  //     imageData = URL.createObjectURL(content);
+  //   }
+  // }
   const tmpMsg = {
     content: type == "image" ? URL.createObjectURL(content) : content,
     content_type: ContentTypes[type],
diff --git a/src/app/services/message.js b/src/app/services/message.js
index 55737629..df654a5b 100644
--- a/src/app/services/message.js
+++ b/src/app/services/message.js
@@ -38,6 +38,26 @@ export const messageApi = createApi({
         method: "DELETE",
       }),
     }),
+    prepareUploadFile: builder.mutation({
+      query: () => ({
+        url: `/resource/file/prepare`,
+        method: "POST",
+      }),
+    }),
+    uploadFile: builder.mutation({
+      query: (formData) => ({
+        // headers: {
+        //   "content-type": ContentTypes.formData,
+        // },
+        url: `/resource/file/upload`,
+        method: "POST",
+        body: formData,
+      }),
+      transformResponse: (data) => {
+        console.log("upload file response", data);
+        return data ? data : {};
+      },
+    }),
     uploadImage: builder.mutation({
       query: (image) => ({
         headers: {
@@ -102,6 +122,8 @@ export const messageApi = createApi({
 });
 
 export const {
+  usePrepareUploadFileMutation,
+  useUploadFileMutation,
   useUploadImageMutation,
   useEditMessageMutation,
   useReactMessageMutation,
diff --git a/src/app/slices/ui.js b/src/app/slices/ui.js
index 25d0ae1a..faa2b92d 100644
--- a/src/app/slices/ui.js
+++ b/src/app/slices/ui.js
@@ -3,6 +3,7 @@ import { createSlice } from "@reduxjs/toolkit";
 const initialState = {
   online: true,
   ready: false,
+  inputMode: "text",
   menuExpand: false,
   setting: false,
   channelSetting: null,
@@ -11,6 +12,9 @@ const uiSlice = createSlice({
   name: "ui",
   initialState,
   reducers: {
+    fullfillUI(state, action) {
+      return { ...initialState, ...action.payload };
+    },
     setReady(state) {
       state.ready = true;
     },
@@ -20,6 +24,9 @@ const uiSlice = createSlice({
     toggleMenuExpand(state) {
       state.menuExpand = !state.menuExpand;
     },
+    updateInputMode(state, action) {
+      state.inputMode = action.payload;
+    },
     toggleSetting(state) {
       state.setting = !state.setting;
     },
@@ -31,8 +38,10 @@ const uiSlice = createSlice({
   },
 });
 export const {
+  fullfillUI,
   setReady,
   updateOnline,
+  updateInputMode,
   toggleSetting,
   toggleMenuExpand,
   toggleChannelSetting,