diff --git a/package-lock.json b/package-lock.json
index 2ec8776e..6aa6318e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -62,6 +62,7 @@
         "prettier": "3.1.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-dropzone": "^14.2.10",
         "react-markdown": "^9.0.1",
         "react-syntax-highlighter": "^15.5.0",
         "redux-persist": "^6.0.0",
@@ -10422,6 +10423,15 @@
       "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
       "dev": true
     },
+    "node_modules/attr-accept": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/attr-accept/-/attr-accept-2.2.4.tgz",
+      "integrity": "sha512-2pA6xFIbdTUDCAwjN8nQwI+842VwzbDUXO2IYlpPXQIORgKnavorcr4Ce3rwh+zsNg9zK7QPsdvDj3Lum4WX4w==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/available-typed-arrays": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz",
@@ -13175,6 +13185,18 @@
         "node": "^10.12.0 || >=12.0.0"
       }
     },
+    "node_modules/file-selector": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/file-selector/-/file-selector-0.6.0.tgz",
+      "integrity": "sha512-QlZ5yJC0VxHxQQsQhXvBaC7VRJ2uaxTf+Tfpu4Z/OcVQJVpZO+DGU0rkoVW5ce2SccxugvpBJoMvUs59iILYdw==",
+      "dev": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      },
+      "engines": {
+        "node": ">= 12"
+      }
+    },
     "node_modules/file-system-cache": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/file-system-cache/-/file-system-cache-2.3.0.tgz",
@@ -19477,6 +19499,23 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-dropzone": {
+      "version": "14.2.10",
+      "resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-14.2.10.tgz",
+      "integrity": "sha512-Y98LOCYxGO2jOFWREeKJlL7gbrHcOlTBp+9DCM1dh9XQ8+P/8ThhZT7kFb05C+bPcTXq/rixpU+5+LzwYrFLUw==",
+      "dev": true,
+      "dependencies": {
+        "attr-accept": "^2.2.2",
+        "file-selector": "^0.6.0",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">= 10.13"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8 || 18.0.0"
+      }
+    },
     "node_modules/react-element-to-jsx-string": {
       "version": "15.0.0",
       "resolved": "https://registry.npmjs.org/react-element-to-jsx-string/-/react-element-to-jsx-string-15.0.0.tgz",
diff --git a/package.json b/package.json
index dcf8ace7..f7906163 100644
--- a/package.json
+++ b/package.json
@@ -100,6 +100,7 @@
     "prettier": "3.1.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-dropzone": "^14.2.10",
     "react-markdown": "^9.0.1",
     "react-syntax-highlighter": "^15.5.0",
     "redux-persist": "^6.0.0",
diff --git a/src/app/middleware.ts b/src/app/middleware.ts
index 8622f42f..c12a4561 100644
--- a/src/app/middleware.ts
+++ b/src/app/middleware.ts
@@ -5,8 +5,9 @@ import {
   isRejected,
 } from "@reduxjs/toolkit";
 import {
-  chatAskQuestionThunk,
+  doneStreaming,
   newChatAction,
+  chatAskQuestionThunk,
   restoreChat,
 } from "../features/Chat/Thread";
 import { statisticsApi } from "../services/refact/statistics";
@@ -18,6 +19,7 @@ import { diffApi } from "../services/refact/diffs";
 import { pingApi } from "../services/refact/ping";
 import { clearError, setError } from "../features/Errors/errorsSlice";
 import { updateConfig } from "../features/Config/configSlice";
+import { resetAttachedImagesSlice } from "../features/AttachedImages";
 
 export const listenerMiddleware = createListenerMiddleware();
 const startListening = listenerMiddleware.startListening.withTypes<
@@ -34,13 +36,14 @@ startListening({
   ),
   effect: (_action, listenerApi) => {
     [
+      pingApi.util.resetApiState(),
       statisticsApi.util.resetApiState(),
       capsApi.util.resetApiState(),
       promptsApi.util.resetApiState(),
       toolsApi.util.resetApiState(),
       commandsApi.util.resetApiState(),
       diffApi.util.resetApiState(),
-      pingApi.util.resetApiState(),
+      resetAttachedImagesSlice(),
     ].forEach((api) => listenerApi.dispatch(api));
 
     listenerApi.dispatch(clearError());
@@ -104,3 +107,13 @@ startListening({
     }
   },
 });
+
+startListening({
+  actionCreator: doneStreaming,
+  effect: (action, listenerApi) => {
+    const state = listenerApi.getState();
+    if (action.payload.id === state.chat.thread.id) {
+      listenerApi.dispatch(resetAttachedImagesSlice());
+    }
+  },
+});
diff --git a/src/app/store.ts b/src/app/store.ts
index cc7fa97f..bb4e85f2 100644
--- a/src/app/store.ts
+++ b/src/app/store.ts
@@ -38,6 +38,7 @@ import { pagesSlice } from "../features/Pages/pagesSlice";
 import mergeInitialState from "redux-persist/lib/stateReconciler/autoMergeLevel2";
 import { listenerMiddleware } from "./middleware";
 import { informationSlice } from "../features/Errors/informationSlice";
+import { attachedImagesSlice } from "../features/AttachedImages";
 
 const tipOfTheDayPersistConfig = {
   key: "totd",
@@ -75,6 +76,7 @@ const rootReducer = combineSlices(
   errorSlice,
   informationSlice,
   pagesSlice,
+  attachedImagesSlice,
 );
 
 const rootPersistConfig = {
diff --git a/src/components/Chat/Chat.tsx b/src/components/Chat/Chat.tsx
index 52fb3f8d..a5a7213b 100644
--- a/src/components/Chat/Chat.tsx
+++ b/src/components/Chat/Chat.tsx
@@ -24,6 +24,7 @@ import {
 } from "../../features/Chat/Thread";
 import { ThreadHistoryButton } from "../Buttons";
 import { push } from "../../features/Pages/pagesSlice";
+import { DropzoneProvider } from "../Dropzone";
 import { SystemPrompts } from "../../services/refact";
 
 export type ChatProps = {
@@ -113,72 +114,73 @@ export const Chat: React.FC<ChatProps> = ({
   }, [isWaiting, isStreaming, focusTextarea]);
 
   return (
-    <Flex
-      style={style}
-      direction="column"
-      flexGrow="1"
-      width="100%"
-      overflowY="auto"
-      justify="between"
-      px="1"
-    >
-      <ChatContent
-        key={`chat-content-${chatId}`}
-        ref={chatContentRef}
-        onRetry={retryFromIndex}
-      />
-      {!isStreaming && preventSend && unCalledTools && (
-        <Container py="4" bottom="0" style={{ justifyContent: "flex-end" }}>
-          <Card>
-            <Flex direction="column" align="center" gap="2">
-              Chat was interrupted with uncalled tools calls.
-              <Button onClick={onEnableSend}>Resume</Button>
-            </Flex>
-          </Card>
-        </Container>
-      )}
-
-      <ChatForm
-        key={chatId} // TODO: think of how can we not trigger re-render on chatId change (checkboxes)
-        chatId={chatId}
-        isStreaming={isStreaming}
-        showControls={messages.length === 0 && !isStreaming}
-        onSubmit={handleSummit}
-        model={chatModel}
-        onSetChatModel={onSetChatModel}
-        caps={caps}
-        onStopStreaming={abort}
-        onClose={maybeSendToSidebar}
-        onTextAreaHeightChange={onTextAreaHeightChange}
-        prompts={promptsRequest.data ?? {}}
-        onSetSystemPrompt={onSetSelectedSystemPrompt}
-        selectedSystemPrompt={selectedSystemPrompt}
-      />
-      <Flex justify="between" pl="1" pr="1" pt="1">
-        {/* Two flexboxes are left for the future UI element on the right side */}
-        {messages.length > 0 && (
-          <Flex align="center" justify="between" width="100%">
-            <Flex align="center" gap="1">
-              <Text size="1">model: {chatModel || caps.default_cap} </Text> •{" "}
-              <Text
-                size="1"
-                onClick={() => setIsDebugChatHistoryVisible((prev) => !prev)}
-              >
-                mode: {chatToolUse}{" "}
-              </Text>
-            </Flex>
-            {messages.length !== 0 &&
-              !isStreaming &&
-              isDebugChatHistoryVisible && (
-                <ThreadHistoryButton
-                  title="View history of current thread"
-                  size="1"
-                  onClick={handleThreadHistoryPage}
-                />
-              )}
-          </Flex>
+    <DropzoneProvider asChild>
+      <Flex
+        style={style}
+        direction="column"
+        flexGrow="1"
+        width="100%"
+        overflowY="auto"
+        justify="between"
+        px="1"
+      >
+        <ChatContent
+          key={`chat-content-${chatId}`}
+          ref={chatContentRef}
+          onRetry={retryFromIndex}
+        />
+        {!isStreaming && preventSend && unCalledTools && (
+          <Container py="4" bottom="0" style={{ justifyContent: "flex-end" }}>
+            <Card>
+              <Flex direction="column" align="center" gap="2">
+                Chat was interrupted with uncalled tools calls.
+                <Button onClick={onEnableSend}>Resume</Button>
+              </Flex>
+            </Card>
+          </Container>
         )}
+        <ChatForm
+          key={chatId} // TODO: think of how can we not trigger re-render on chatId change (checkboxes)
+          chatId={chatId}
+          isStreaming={isStreaming}
+          showControls={messages.length === 0 && !isStreaming}
+          onSubmit={handleSummit}
+          model={chatModel}
+          onSetChatModel={onSetChatModel}
+          caps={caps}
+          onStopStreaming={abort}
+          onClose={maybeSendToSidebar}
+          onTextAreaHeightChange={onTextAreaHeightChange}
+          prompts={promptsRequest.data ?? {}}
+          onSetSystemPrompt={onSetSelectedSystemPrompt}
+          selectedSystemPrompt={selectedSystemPrompt}
+        />
+        <Flex justify="between" pl="1" pr="1" pt="1">
+          {/* Two flexboxes are left for the future UI element on the right side */}
+          {messages.length > 0 && (
+            <Flex align="center" justify="between" width="100%">
+              <Flex align="center" gap="1">
+                <Text size="1">model: {chatModel || caps.default_cap} </Text> •{" "}
+                <Text
+                  size="1"
+                  onClick={() => setIsDebugChatHistoryVisible((prev) => !prev)}
+                >
+                  mode: {chatToolUse}{" "}
+                </Text>
+              </Flex>
+              {messages.length !== 0 &&
+                !isStreaming &&
+                isDebugChatHistoryVisible && (
+                  <ThreadHistoryButton
+                    title="View history of current thread"
+                    size="1"
+                    onClick={handleThreadHistoryPage}
+                  />
+                )}
+            </Flex>
+          )}
+        </Flex>
       </Flex>
-    </Flex>
+    </DropzoneProvider>
   );
 };
diff --git a/src/components/ChatContent/ChatContent.tsx b/src/components/ChatContent/ChatContent.tsx
index b2d4aa8c..5346066a 100644
--- a/src/components/ChatContent/ChatContent.tsx
+++ b/src/components/ChatContent/ChatContent.tsx
@@ -4,6 +4,7 @@ import {
   isChatContextFileMessage,
   isDiffMessage,
   isToolMessage,
+  UserMessage,
 } from "../../services/refact";
 import { UserInput } from "./UserInput";
 import { ScrollArea } from "../ScrollArea";
@@ -110,7 +111,7 @@ const PlaceHolderText: React.FC = () => {
 };
 
 export type ChatContentProps = {
-  onRetry: (index: number, question: string) => void;
+  onRetry: (index: number, question: UserMessage["content"]) => void;
 };
 
 export const ChatContent = React.forwardRef<HTMLDivElement, ChatContentProps>(
@@ -131,7 +132,10 @@ export const ChatContent = React.forwardRef<HTMLDivElement, ChatContentProps>(
       isStreaming,
     });
 
-    const onRetryWrapper = (index: number, question: string) => {
+    const onRetryWrapper = (
+      index: number,
+      question: UserMessage["content"],
+    ) => {
       props.onRetry(index, question);
       handleScrollButtonClick();
     };
@@ -165,7 +169,7 @@ ChatContent.displayName = "ChatContent";
 
 function renderMessages(
   messages: ChatMessages,
-  onRetry: (index: number, question: string) => void,
+  onRetry: (index: number, question: UserMessage["content"]) => void,
   memo: React.ReactNode[] = [],
   index = 0,
 ) {
@@ -197,6 +201,7 @@ function renderMessages(
 
   if (head.role === "user") {
     const key = "user-input-" + index;
+
     const nextMemo = [
       ...memo,
       <UserInput onRetry={onRetry} key={key} messageIndex={index}>
diff --git a/src/components/ChatContent/UserInput.tsx b/src/components/ChatContent/UserInput.tsx
index b76d0dd4..8067f21a 100644
--- a/src/components/ChatContent/UserInput.tsx
+++ b/src/components/ChatContent/UserInput.tsx
@@ -1,50 +1,28 @@
 import React, { useCallback, useState } from "react";
-import { Text, Container, Button, Flex, IconButton } from "@radix-ui/themes";
+import {
+  Text,
+  Container,
+  Button,
+  Flex,
+  IconButton,
+  Avatar,
+} from "@radix-ui/themes";
 import { Markdown } from "../Markdown";
 import { RetryForm } from "../ChatForm";
 import styles from "./ChatContent.module.css";
-import { Pencil2Icon } from "@radix-ui/react-icons";
-
-function processLines(
-  lines: string[],
-  processedLinesMemo: JSX.Element[] = [],
-): JSX.Element[] {
-  if (lines.length === 0) return processedLinesMemo;
-
-  const [head, ...tail] = lines;
-  const nextBackTicksIndex = tail.findIndex((l) => l.startsWith("```"));
-  const key = `line-${processedLinesMemo.length + 1}`;
-
-  if (!head.startsWith("```") || nextBackTicksIndex === -1) {
-    const processedLines = processedLinesMemo.concat(
-      <Text
-        size="2"
-        as="div"
-        key={key}
-        wrap="balance"
-        className={styles.break_word}
-      >
-        {head}
-      </Text>,
-    );
-    return processLines(tail, processedLines);
-  }
-
-  const endIndex = nextBackTicksIndex + 1;
-
-  const code = [head].concat(tail.slice(0, endIndex)).join("\n");
-  const processedLines = processedLinesMemo.concat(
-    <Markdown key={key}>{code}</Markdown>,
-  );
-
-  const next = tail.slice(endIndex);
-  return processLines(next, processedLines);
-}
+import { Pencil2Icon, ImageIcon } from "@radix-ui/react-icons";
+import {
+  ProcessedUserMessageContentWithImages,
+  UserMessageContentWithImage,
+  type UserMessage,
+} from "../../services/refact";
+import { takeWhile } from "../../utils";
 
 export type UserInputProps = {
-  children: string;
+  children: UserMessage["content"];
   messageIndex: number;
-  onRetry: (index: number, question: string) => void;
+  // maybe add images argument ?
+  onRetry: (index: number, question: UserMessage["content"]) => void;
   // disableRetry?: boolean;
 };
 
@@ -56,9 +34,10 @@ export const UserInput: React.FC<UserInputProps> = ({
   // const { retryFromIndex } = useSendChatRequest();
   const [showTextArea, setShowTextArea] = useState(false);
   const [isEditButtonVisible, setIsEditButtonVisible] = useState(false);
-  const ref = React.useRef<HTMLButtonElement>(null);
+  // const ref = React.useRef<HTMLButtonElement>(null);
+
   const handleSubmit = useCallback(
-    (value: string) => {
+    (value: UserMessage["content"]) => {
       onRetry(messageIndex, value);
       setShowTextArea(false);
     },
@@ -75,14 +54,18 @@ export const UserInput: React.FC<UserInputProps> = ({
     [isEditButtonVisible],
   );
 
-  const lines = children.split("\n");
-  const elements = processLines(lines);
+  // const lines = children.split("\n"); // won't work if it's an array
+  const elements = process(children);
+  const isString = typeof children === "string";
+  const linesLength = isString ? children.split("\n").length : Infinity;
 
   return (
     <Container position="relative" pt="1">
       {showTextArea ? (
         <RetryForm
           onSubmit={handleSubmit}
+          // TODO
+          // value={children}
           value={children}
           onClose={() => handleShowTextArea(false)}
         />
@@ -90,17 +73,20 @@ export const UserInput: React.FC<UserInputProps> = ({
         <Flex
           direction="row"
           // checking for the length of the lines to determine the position of the edit button
-          gap={lines.length <= 2 ? "2" : "1"}
-          align={lines.length <= 2 ? "center" : "end"}
+          gap={linesLength <= 2 ? "2" : "1"}
+          // TODO: what is it's a really long sentence or word with out new lines?
+          align={linesLength <= 2 ? "center" : "end"}
           my="1"
           onMouseEnter={() => setIsEditButtonVisible(true)}
           onMouseLeave={() => setIsEditButtonVisible(false)}
         >
           <Button
-            ref={ref}
+            // ref={ref}
             variant="soft"
             size="4"
             className={styles.userInput}
+            // TODO: should this work?
+            // onClick={() => handleShowTextArea(true)}
             asChild
           >
             <div>{elements}</div>
@@ -123,3 +109,120 @@ export const UserInput: React.FC<UserInputProps> = ({
     </Container>
   );
 };
+
+function process(items: UserInputProps["children"]) {
+  if (typeof items !== "string") {
+    return processUserInputArray(items);
+  }
+
+  return processLines(items.split("\n"));
+}
+
+function processLines(
+  lines: string[],
+  processedLinesMemo: JSX.Element[] = [],
+): JSX.Element[] {
+  if (lines.length === 0) return processedLinesMemo;
+
+  const [head, ...tail] = lines;
+  const nextBackTicksIndex = tail.findIndex((l) => l.startsWith("```"));
+  const key = `line-${processedLinesMemo.length + 1}`;
+
+  if (!head.startsWith("```") || nextBackTicksIndex === -1) {
+    const processedLines = processedLinesMemo.concat(
+      <Text
+        size="2"
+        as="div"
+        key={key}
+        wrap="balance"
+        className={styles.break_word}
+      >
+        {head}
+      </Text>,
+    );
+    return processLines(tail, processedLines);
+  }
+
+  const endIndex = nextBackTicksIndex + 1;
+
+  const code = [head].concat(tail.slice(0, endIndex)).join("\n");
+  const processedLines = processedLinesMemo.concat(
+    <Markdown key={key}>{code}</Markdown>,
+  );
+
+  const next = tail.slice(endIndex);
+  return processLines(next, processedLines);
+}
+
+function isUserContentImage(
+  item: UserMessageContentWithImage | ProcessedUserMessageContentWithImages,
+) {
+  return (
+    ("m_type" in item && item.m_type.startsWith("image/")) ||
+    ("type" in item && item.type === "image_url")
+  );
+}
+
+function processUserInputArray(
+  items: (
+    | UserMessageContentWithImage
+    | ProcessedUserMessageContentWithImages
+  )[],
+  memo: JSX.Element[] = [],
+) {
+  if (items.length === 0) return memo;
+  const [head, ...tail] = items;
+
+  if ("type" in head && head.type === "text") {
+    const processedLines = processLines(head.text.split("\n"));
+    return processUserInputArray(tail, memo.concat(processedLines));
+  }
+
+  if ("m_type" in head && head.m_type === "text") {
+    const processedLines = processLines(head.m_content.split("\n"));
+    return processUserInputArray(tail, memo.concat(processedLines));
+  }
+
+  const isImage = isUserContentImage(head);
+
+  if (!isImage) return processUserInputArray(tail, memo);
+
+  const imagesInTail = takeWhile(tail, isUserContentImage);
+  const nextTail = tail.slice(imagesInTail.length);
+  const images = [head, ...imagesInTail];
+  const elem = (
+    <Flex key={`user-image-images-${memo.length}`} gap="2" wrap="wrap" my="2">
+      {images.map((image, index) => {
+        if ("type" in image && image.type === "image_url") {
+          const key = `user-input${memo.length}-${image.type}-${index}`;
+          const content = image.image_url.url;
+          return (
+            <Avatar
+              radius="small"
+              key={key}
+              src={content}
+              size="8"
+              fallback={<ImageIcon />}
+            />
+          );
+        }
+        if ("m_type" in image && image.m_type.startsWith("image/")) {
+          const key = `user-input${memo.length}-${image.m_type}-${index}`;
+          const content = `data:${image.m_type};base64,${image.m_content}`;
+          return (
+            <Avatar
+              radius="small"
+              key={key}
+              src={content}
+              size="8"
+              fallback={<ImageIcon />}
+            />
+          );
+        }
+        return null;
+      })}
+    </Flex>
+  );
+
+  return processUserInputArray(nextTail, memo.concat(elem));
+}
diff --git a/src/components/ChatForm/ChatForm.tsx b/src/components/ChatForm/ChatForm.tsx
index 5f5f9329..32123ba6 100644
--- a/src/components/ChatForm/ChatForm.tsx
+++ b/src/components/ChatForm/ChatForm.tsx
@@ -25,6 +25,7 @@ import {
   getInformationMessage,
 } from "../../features/Errors/informationSlice";
 import { InformationCallout } from "../Callout/Callout";
+import { AttachFileButton, FileList } from "../Dropzone";
 
 export type ChatFormProps = {
   onSubmit: (str: string) => void;
@@ -261,6 +262,7 @@ export const ChatForm: React.FC<ChatFormProps> = ({
                 onClick={onClose}
               />
             )}
+            <AttachFileButton />
             {/* TODO: Reserved space for microphone button coming later on */}
             <PaperPlaneButton
               disabled={isStreaming || !isOnline}
@@ -271,7 +273,7 @@ export const ChatForm: React.FC<ChatFormProps> = ({
           </Flex>
         </Form>
       </Flex>
-
+      <FileList />
       <ChatControls
         host={config.host}
         checkboxes={checkboxes}
diff --git a/src/components/ChatForm/RetryForm.tsx b/src/components/ChatForm/RetryForm.tsx
index 0faaadc3..1a93dff5 100644
--- a/src/components/ChatForm/RetryForm.tsx
+++ b/src/components/ChatForm/RetryForm.tsx
@@ -1,45 +1,112 @@
 import React, { useCallback, useState } from "react";
-import { Button, Flex } from "@radix-ui/themes";
-
+import { Avatar, Button, Flex, Box } from "@radix-ui/themes";
+import { FileRejection, useDropzone } from "react-dropzone";
 import { TextArea } from "../TextArea";
 import { useOnPressedEnter } from "../../hooks/useOnPressedEnter";
 import { Form } from "./Form";
 
 import { useAppSelector } from "../../hooks";
 import { selectSubmitOption } from "../../features/Config/configSlice";
+import {
+  ProcessedUserMessageContentWithImages,
+  UserImage,
+  UserMessage,
+} from "../../services/refact";
+import { ImageIcon, CrossCircledIcon } from "@radix-ui/react-icons";
+import { useAttachedImages } from "../../hooks/useAttachedImages";
+
+function getTextFromUserMessage(messages: UserMessage["content"]): string {
+  if (typeof messages === "string") return messages;
+  return messages.reduce<string>((acc, message) => {
+    if ("m_type" in message && message.m_type === "text")
+      return acc + message.m_content;
+    if ("type" in message && message.type === "text") return acc + message.text;
+    return acc;
+  }, "");
+}
+
+function getImageFromUserMessage(
+  messages: UserMessage["content"],
+): (UserImage | ProcessedUserMessageContentWithImages)[] {
+  if (typeof messages === "string") return [];
+
+  const images = messages.reduce<
+    (UserImage | ProcessedUserMessageContentWithImages)[]
+  >((acc, message) => {
+    if ("m_type" in message && message.m_type.startsWith("image/"))
+      return [...acc, message];
+    if ("type" in message && message.type === "image_url")
+      return [...acc, message];
+    return acc;
+  }, []);
+
+  return images;
+}
+
+function getImageContent(
+  image: UserImage | ProcessedUserMessageContentWithImages,
+) {
+  if ("type" in image) return image.image_url.url;
+  const base64 = `data:${image.m_type};base64,${image.m_content}`;
+  return base64;
+}
 
 export const RetryForm: React.FC<{
-  value: string;
-  onSubmit: (value: string) => void;
+  // value: string;
+  value: UserMessage["content"];
+  onSubmit: (value: UserMessage["content"]) => void;
   onClose: () => void;
 }> = (props) => {
   const shiftEnterToSubmit = useAppSelector(selectSubmitOption);
-  const [value, onChange] = useState(props.value);
+  const inputText = getTextFromUserMessage(props.value);
+  const inputImages = getImageFromUserMessage(props.value);
+  const [textValue, onChangeTextValue] = useState(inputText);
+  const [imageValue, onChangeImageValue] = useState(inputImages);
+
+  const addImage = useCallback((image: UserImage) => {
+    onChangeImageValue((prev) => {
+      return [...prev, image];
+    });
+  }, []);
+
   const closeAndReset = () => {
-    onChange(props.value);
+    onChangeImageValue(inputImages);
+    onChangeTextValue(inputText);
     props.onClose();
   };
 
   const handleRetry = () => {
-    const trimmedValue = value.trim();
-    if (trimmedValue.length > 0) {
-      props.onSubmit(trimmedValue);
+    const trimmedText = textValue.trim();
+    if (imageValue.length === 0 && trimmedText.length > 0) {
+      props.onSubmit(trimmedText);
+    } else if (trimmedText.length > 0) {
+      const text = {
+        type: "text" as const,
+        text: textValue.trim(),
+      };
+      props.onSubmit([text, ...imageValue]);
     }
   };
 
   const onPressedEnter = useOnPressedEnter(handleRetry);
 
-  const handleOnKeyUp = useCallback(
+  const handleOnKeyDown = useCallback(
     (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
       if (shiftEnterToSubmit && !event.shiftKey && event.key === "Enter") {
-        onChange(value + "\n");
+        onChangeTextValue(textValue + "\n");
         return;
       }
       onPressedEnter(event);
     },
-    [onPressedEnter, shiftEnterToSubmit, value],
+    [onPressedEnter, shiftEnterToSubmit, textValue],
   );
 
+  const handleRemove = useCallback((index: number) => {
+    onChangeImageValue((prev) => {
+      return prev.filter((_, i) => i !== index);
+    });
+  }, []);
+
   return (
     <Form
       onSubmit={(event) => {
@@ -48,16 +115,42 @@ export const RetryForm: React.FC<{
       }}
     >
       <TextArea
-        value={value}
-        onChange={(event) => onChange(event.target.value)}
-        onKeyUp={handleOnKeyUp}
+        value={textValue}
+        onChange={(event) => onChangeTextValue(event.target.value)}
+        onKeyDown={handleOnKeyDown}
       />
+
+      {imageValue.length > 0 && (
+        <Flex
+          px="2"
+          py="4"
+          wrap="wrap"
+          direction="row"
+          align="center"
+          justify="center"
+          style={{
+            backgroundColor: "var(--color-surface)",
+          }}
+        >
+          {imageValue.map((image, index) => {
+            return (
+              <MyImage
+                key={`retry-user-image-${index}`}
+                image={getImageContent(image)}
+                onRemove={() => handleRemove(index)}
+              />
+            );
+          })}
+        </Flex>
+      )}
+
       <Flex
         align="center"
         justify="center"
         gap="1"
         direction="row"
         p="2"
+        wrap="wrap"
         style={{
           backgroundColor: "var(--color-surface)",
         }}
@@ -73,7 +166,104 @@ export const RetryForm: React.FC<{
         >
           Cancel
         </Button>
+
+        <MyDropzone addImage={addImage} />
       </Flex>
     </Form>
   );
 };
+
+const MyDropzone: React.FC<{
+  addImage: (image: UserImage) => void;
+}> = ({ addImage }) => {
+  const { setError, setWarning } = useAttachedImages();
+
+  const onDrop = useCallback(
+    (acceptedFiles: File[], fileRejections: FileRejection[]) => {
+      acceptedFiles.forEach((file) => {
+        const reader = new FileReader();
+        reader.onabort = () =>
+          setWarning(`file ${file.name} reading was aborted`);
+        reader.onerror = () => setError(`file ${file.name} reading has failed`);
+        reader.onload = () => {
+          if (typeof reader.result === "string") {
+            const image: UserImage = {
+              type: "image_url",
+              image_url: { url: reader.result },
+            };
+            addImage(image);
+          }
+        };
+        reader.readAsDataURL(file);
+      });
+
+      if (fileRejections.length) {
+        const rejectedFileMessage = fileRejections.map((file) => {
+          const err = file.errors.reduce<string>((acc, cur) => {
+            return acc + `${cur.code} ${cur.message}\n`;
+          }, "");
+          return `Could not attach ${file.file.name}: ${err}`;
+        });
+        setError(rejectedFileMessage.join("\n"));
+      }
+    },
+    [addImage, setError, setWarning],
+  );
+
+  const { getRootProps, getInputProps, open } = useDropzone({
+    onDrop,
+    disabled: false,
+    noClick: true,
+    noKeyboard: true,
+    accept: {
+      "image/*": [],
+    },
+  });
+
+  return (
+    <div {...getRootProps()}>
+      <input {...getInputProps()} style={{ display: "none" }} />
+      <Button
+        size="1"
+        variant="surface"
+        color="gray"
+        onClick={(event) => {
+          event.preventDefault();
+          event.stopPropagation();
+          open();
+        }}
+      >
+        Add images
+      </Button>
+    </div>
+  );
+};
+
+const MyImage: React.FC<{ image: string; onRemove: () => void }> = ({
+  image,
+  onRemove,
+}) => {
+  return (
+    <Box position="relative">
+      <Button
+        variant="ghost"
+        onClick={(event) => {
+          event.preventDefault();
+          event.stopPropagation();
+          onRemove();
+        }}
+      >
+        <CrossCircledIcon
+          width="16"
+          color="gray"
+          style={{
+            position: "absolute",
+            right: "calc(var(--space-2) * -1)",
+            top: "calc(var(--space-2) * -1)",
+          }}
+        />
+        <Avatar src={image} size="4" fallback={<ImageIcon />} />
+      </Button>
+    </Box>
+  );
+};
diff --git a/src/components/Dropzone/Dropzone.tsx b/src/components/Dropzone/Dropzone.tsx
new file mode 100644
index 00000000..60e98d78
--- /dev/null
+++ b/src/components/Dropzone/Dropzone.tsx
@@ -0,0 +1,135 @@
+import React, { createContext, useCallback } from "react";
+import { Button, Slot, IconButton, Flex } from "@radix-ui/themes";
+import { Cross1Icon, ImageIcon } from "@radix-ui/react-icons";
+import { DropzoneInputProps, FileRejection, useDropzone } from "react-dropzone";
+import { useAttachedImages } from "../../hooks/useAttachedImages";
+import { TruncateLeft } from "../Text";
+
+export const FileUploadContext = createContext<{
+  open: () => void;
+
+  getInputProps: (props?: DropzoneInputProps) => DropzoneInputProps;
+}>({
+  open: () => ({}),
+  getInputProps: () => ({}),
+});
+
+export const DropzoneProvider: React.FC<
+  React.PropsWithChildren<{ asChild?: boolean }>
+> = ({ asChild, ...props }) => {
+  const { insertImage, setError, setWarning } = useAttachedImages();
+
+  const onDrop = useCallback(
+    (acceptedFiles: File[], fileRejections: FileRejection[]) => {
+      acceptedFiles.forEach((file) => {
+        const reader = new FileReader();
+        reader.onabort = () =>
+          setWarning(`file ${file.name} reading was aborted`);
+
+        reader.onerror = () => setError(`file ${file.name} reading has failed`);
+
+        reader.onload = () => {
+          const fileForChat = {
+            name: file.name,
+            content: reader.result,
+            type: file.type,
+          };
+          insertImage(fileForChat);
+        };
+        reader.readAsDataURL(file);
+      });
+
+      if (fileRejections.length) {
+        const rejectedFileMessage = fileRejections.map((file) => {
+          const err = file.errors.reduce<string>((acc, cur) => {
+            return acc + `${cur.code} ${cur.message}\n`;
+          }, "");
+          return `could not attach ${file.file.name}: ${err}`;
+        });
+        setError(rejectedFileMessage.join("\n"));
+      }
+    },
+    [insertImage, setError, setWarning],
+  );
+
+  // TODO: disable when chat is busy
+  const dropzone = useDropzone({
+    disabled: false,
+    noClick: true,
+    noKeyboard: true,
+    accept: {
+      "image/*": [],
+    },
+    onDrop,
+  });
+
+  const Comp = asChild ? Slot : "div";
+
+  return (
+    <FileUploadContext.Provider
+      value={{
+        open: dropzone.open,
+        getInputProps: dropzone.getInputProps,
+      }}
+    >
+      <Comp {...dropzone.getRootProps()} {...props} />
+    </FileUploadContext.Provider>
+  );
+};
+
+export const DropzoneConsumer = FileUploadContext.Consumer;
+
+export const AttachFileButton = () => {
+  return (
+    <DropzoneConsumer>
+      {({ open, getInputProps }) => {
+        const inputProps = getInputProps();
+        return (
+          <>
+            <input {...inputProps} style={{ display: "none" }} />
+            <IconButton
+              variant="ghost"
+              size="1"
+              title="add image"
+              disabled={inputProps.disabled}
+              onClick={(event) => {
+                event.preventDefault();
+                event.stopPropagation();
+                open();
+              }}
+            >
+              <ImageIcon />
+            </IconButton>
+          </>
+        );
+      }}
+    </DropzoneConsumer>
+  );
+};
+
+export const FileList = () => {
+  const { images, removeImage } = useAttachedImages();
+  if (images.length === 0) return null;
+  return (
+    <Flex wrap="wrap" gap="1" py="2">
+      {images.map((file, index) => {
+        const key = `image-${file.name}-${index}`;
+        return (
+          <Button
+            // variant="surface"
+            // variant="outline"
+            variant="soft"
+            radius="full"
+            key={key}
+            size="1"
+            onClick={() => removeImage(index)}
+            style={{ maxWidth: "100%" }}
+          >
+            <TruncateLeft wrap="wrap">{file.name}</TruncateLeft>{" "}
+            <Cross1Icon width="10" style={{ flexShrink: 0 }} />
+          </Button>
+        );
+      })}
+    </Flex>
+  );
+};
diff --git a/src/components/Dropzone/index.tsx b/src/components/Dropzone/index.tsx
new file mode 100644
index 00000000..164bf09b
--- /dev/null
+++ b/src/components/Dropzone/index.tsx
@@ -0,0 +1,7 @@
+export {
+  DropzoneProvider,
+  DropzoneConsumer,
+  FileUploadContext,
+  AttachFileButton,
+  FileList,
+} from "./Dropzone";
diff --git a/src/features/AttachedImages/imagesSlice.ts b/src/features/AttachedImages/imagesSlice.ts
new file mode 100644
index 00000000..d01b8635
--- /dev/null
+++ b/src/features/AttachedImages/imagesSlice.ts
@@ -0,0 +1,38 @@
+import { createSlice, type PayloadAction } from "@reduxjs/toolkit";
+
+export type ImageFile = {
+  name: string;
+  content: string | ArrayBuffer | null;
+  type: string;
+};
+
+const initialState: {
+  images: ImageFile[];
+} = {
+  images: [],
+};
+
+export const attachedImagesSlice = createSlice({
+  name: "attachedImages",
+  initialState: initialState,
+  reducers: {
+    addImage: (state, action: PayloadAction<ImageFile>) => {
+      state.images = state.images.concat(action.payload);
+    },
+    removeImageByIndex: (state, action: PayloadAction<number>) => {
+      state.images = state.images.filter(
+        (_image, index) => index !== action.payload,
+      );
+    },
+    resetAttachedImagesSlice: () => {
+      return initialState;
+    },
+  },
+  selectors: {
+    selectAllImages: (state) => state.images,
+  },
+});
+
+export const { selectAllImages } = attachedImagesSlice.selectors;
+export const { addImage, removeImageByIndex, resetAttachedImagesSlice } =
+  attachedImagesSlice.actions;
diff --git a/src/features/AttachedImages/index.ts b/src/features/AttachedImages/index.ts
new file mode 100644
index 00000000..338444c6
--- /dev/null
+++ b/src/features/AttachedImages/index.ts
@@ -0,0 +1 @@
+export * from "./imagesSlice";
diff --git a/src/features/Chat/Thread/utils.ts b/src/features/Chat/Thread/utils.ts
index 94491efb..e26ef596 100644
--- a/src/features/Chat/Thread/utils.ts
+++ b/src/features/Chat/Thread/utils.ts
@@ -336,6 +336,10 @@ function finishToolCallInMessages(
 
 export function formatMessagesForLsp(messages: ChatMessages): LspChatMessage[] {
   return messages.reduce<LspChatMessage[]>((acc, message) => {
+    if (isUserMessage(message)) {
+      return acc.concat([message]);
+    }
+
     if (isAssistantMessage(message)) {
       return acc.concat([
         {
diff --git a/src/features/History/historySlice.ts b/src/features/History/historySlice.ts
index 688db5db..9b0e7caa 100644
--- a/src/features/History/historySlice.ts
+++ b/src/features/History/historySlice.ts
@@ -35,6 +35,33 @@ export type HistoryState = Record<string, ChatHistoryItem>;
 
 const initialState: HistoryState = {};
 
+function getFirstUserContentFromChat(messages: ChatThread["messages"]): string {
+  const message = messages.find(isUserMessage);
+  if (!message) return "New Chat";
+  if (typeof message.content === "string") {
+    return message.content.replace(/^\s+/, "");
+  }
+
+  const firstUserInput = message.content.find((message) => {
+    if ("m_type" in message && message.m_type === "text") {
+      return true;
+    }
+    if ("type" in message && message.type === "text") {
+      return true;
+    }
+    return false;
+  });
+  if (!firstUserInput) return "New Chat";
+  const text =
+    "m_content" in firstUserInput
+      ? firstUserInput.m_content
+      : "text" in firstUserInput
+        ? firstUserInput.text
+        : "New Chat";
+
+  return text.replace(/^\s+/, "");
+}
+
 export const historySlice = createSlice({
   name: "history",
   initialState,
@@ -47,9 +74,7 @@ export const historySlice = createSlice({
         ...action.payload,
         title: action.payload.title
           ? action.payload.title
-          : action.payload.messages
-              .find(isUserMessage)
-              ?.content.replace(/^\s+/, "") ?? "New Chat",
+          : getFirstUserContentFromChat(action.payload.messages),
         createdAt: action.payload.createdAt ?? now,
         updatedAt: now,
         isTitleGenerated: action.payload.isTitleGenerated,
@@ -173,10 +198,11 @@ startHistoryListening({
             })
             .catch(() => {
               // TODO: handle error in case if not generated, now returning user message as a title
+              const title = getFirstUserContentFromChat([firstUserMessage]);
               listenerApi.dispatch(
                 saveChat({
                   ...thread,
-                  title: firstUserMessage.content,
+                  title: title,
                 }),
               );
             });
diff --git a/src/hooks/useAttachedImages.ts b/src/hooks/useAttachedImages.ts
new file mode 100644
index 00000000..57ebe8cf
--- /dev/null
+++ b/src/hooks/useAttachedImages.ts
@@ -0,0 +1,56 @@
+import { useCallback } from "react";
+import { useAppSelector } from "./useAppSelector";
+import { useAppDispatch } from "./useAppDispatch";
+import {
+  selectAllImages,
+  removeImageByIndex,
+  addImage,
+  type ImageFile,
+} from "../features/AttachedImages";
+import { setError } from "../features/Errors/errorsSlice";
+import { setInformation } from "../features/Errors/informationSlice";
+
+export function useAttachedImages() {
+  const images = useAppSelector(selectAllImages);
+  const dispatch = useAppDispatch();
+
+  const removeImage = useCallback(
+    (index: number) => {
+      const action = removeImageByIndex(index);
+      dispatch(action);
+    },
+    [dispatch],
+  );
+
+  const insertImage = useCallback(
+    (file: ImageFile) => {
+      const action = addImage(file);
+      dispatch(action);
+    },
+    [dispatch],
+  );
+
+  const handleError = useCallback(
+    (error: string) => {
+      const action = setError(error);
+      dispatch(action);
+    },
+    [dispatch],
+  );
+
+  const handleWarning = useCallback(
+    (warning: string) => {
+      const action = setInformation(warning);
+      dispatch(action);
+    },
+    [dispatch],
+  );
+
+  return {
+    images,
+    setError: handleError,
+    setWarning: handleWarning,
+    insertImage,
+    removeImage,
+  };
+}
diff --git a/src/hooks/useSendChatRequest.ts b/src/hooks/useSendChatRequest.ts
index eab9fc75..790d0f4d 100644
--- a/src/hooks/useSendChatRequest.ts
+++ b/src/hooks/useSendChatRequest.ts
@@ -16,6 +16,8 @@ import {
   ChatMessage,
   ChatMessages,
   isAssistantMessage,
+  UserMessage,
+  UserMessageContentWithImage,
 } from "../services/refact/types";
 import {
   backUpMessages,
@@ -25,6 +27,7 @@ import {
 } from "../features/Chat/Thread/actions";
 import { isToolUse } from "../features/Chat";
 import { useAbortControllers } from "./useAbortControllers";
+import { selectAllImages } from "../features/AttachedImages";
 
 export const useSendChatRequest = () => {
   const dispatch = useAppDispatch();
@@ -44,6 +47,7 @@ export const useSendChatRequest = () => {
   const systemPrompt = useAppSelector(getSelectedSystemPrompt);
   const sendImmediately = useAppSelector(selectSendImmediately);
   const toolUse = useAppSelector(selectToolUse);
+  const attachedImages = useAppSelector(selectAllImages);
 
   const messagesWithSystemPrompt = useMemo(() => {
     const prompts = Object.entries(systemPrompt);
@@ -87,13 +91,40 @@ export const useSendChatRequest = () => {
     [triggerGetTools, toolUse, dispatch, chatId, abortControllers],
   );
 
+  const maybeAddImagesToQuestion = useCallback(
+    (question: string): UserMessage => {
+      if (attachedImages.length === 0)
+        return { role: "user" as const, content: question };
+
+      const images = attachedImages.reduce<UserMessageContentWithImage[]>(
+        (acc, image) => {
+          if (typeof image.content !== "string") return acc;
+          return acc.concat({
+            type: "image_url",
+            image_url: { url: image.content },
+          });
+        },
+        [],
+      );
+
+      if (images.length === 0) return { role: "user", content: question };
+
+      return {
+        role: "user",
+        content: [...images, { type: "text", text: question }],
+      };
+    },
+    [attachedImages],
+  );
+
   const submit = useCallback(
     (question: string) => {
-      const message: ChatMessage = { role: "user", content: question };
+      // const message: ChatMessage = { role: "user", content: question };
+      const message: UserMessage = maybeAddImagesToQuestion(question);
       const messages = messagesWithSystemPrompt.concat(message);
       void sendMessages(messages);
     },
-    [messagesWithSystemPrompt, sendMessages],
+    [maybeAddImagesToQuestion, messagesWithSystemPrompt, sendMessages],
   );
 
   useEffect(() => {
@@ -129,7 +160,7 @@ export const useSendChatRequest = () => {
   );
 
   const retryFromIndex = useCallback(
-    (index: number, question: string) => {
+    (index: number, question: UserMessage["content"]) => {
       const messagesToKeep = currentMessages.slice(0, index);
       const messagesToSend = messagesToKeep.concat([
         { role: "user", content: question },
diff --git a/src/services/refact/chat.ts b/src/services/refact/chat.ts
index bcc8c582..32ea7cd0 100644
--- a/src/services/refact/chat.ts
+++ b/src/services/refact/chat.ts
@@ -1,13 +1,16 @@
 import { CHAT_URL } from "./consts";
 import { ToolCommand } from "./tools";
-import { ChatRole, ToolCall } from "./types";
+import { ChatRole, ToolCall, UserMessage } from "./types";
 
-export type LspChatMessage = {
-  role: ChatRole;
-  content: string | null;
-  tool_calls?: Omit<ToolCall, "index">[];
-  tool_call_id?: string;
-};
+export type LspChatMessage =
+  | {
+      role: ChatRole;
+      // TODO make this a union type for usermessage
+      content: string | null;
+      tool_calls?: Omit<ToolCall, "index">[];
+      tool_call_id?: string;
+    }
+  | UserMessage;
 
 type StreamArgs =
   | {
diff --git a/src/services/refact/types.ts b/src/services/refact/types.ts
index 4bb105f6..15ecf4d5 100644
--- a/src/services/refact/types.ts
+++ b/src/services/refact/types.ts
@@ -53,7 +53,13 @@ export type ToolResult = {
 
 interface BaseMessage {
   role: ChatRole;
-  content: string | ChatContextFile[] | ToolResult | DiffChunk[] | null;
+  content:
+    | string
+    | ChatContextFile[]
+    | ToolResult
+    | DiffChunk[]
+    | null
+    | (UserMessageContentWithImage | ProcessedUserMessageContentWithImages)[];
 }
 
 export interface ChatContextFileMessage extends BaseMessage {
@@ -61,11 +67,28 @@ export interface ChatContextFileMessage extends BaseMessage {
   content: ChatContextFile[];
 }
 
+export type UserImage = {
+  type: "image_url";
+  image_url: { url: string };
+};
+
+export type UserMessageContentWithImage =
+  | {
+      type: "text";
+      text: string;
+    }
+  | UserImage;
 export interface UserMessage extends BaseMessage {
   role: "user";
-  content: string;
+  content:
+    | string
+    | (UserMessageContentWithImage | ProcessedUserMessageContentWithImages)[];
 }
 
+export type ProcessedUserMessageContentWithImages = {
+  m_type: string;
+  m_content: string;
+};
 export interface AssistantMessage extends BaseMessage {
   role: "assistant";
   content: string | null;
@@ -241,11 +264,22 @@ export type ChatChoice = {
   index: number;
 };
 
-export type ChatUserMessageResponse = {
-  id: string;
-  role: "user" | "context_file" | "context_memory";
-  content: string;
-};
+export type ChatUserMessageResponse =
+  | {
+      id: string;
+      role: "user" | "context_file" | "context_memory";
+      content: string;
+    }
+  | {
+      id: string;
+      role: "user";
+      content:
+        | string
+        | (
+            | UserMessageContentWithImage
+            | ProcessedUserMessageContentWithImages
+          )[];
+    };
 
 export type ToolResponse = {
   id: string;
@@ -279,7 +313,7 @@ export function isChatGetTitleResponse(
   const requiredKeys = [
     "id",
     "choices",
-    "metering_balance",
+    // "metering_balance", // not in BYOK
     "model",
     "object",
     "system_fingerprint",