diff --git a/package-lock.json b/package-lock.json
index c6462a4..c5a68eb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,6 +22,7 @@
         "i18next-browser-languagedetector": "^8.0.4",
         "katex": "^0.16.21",
         "lucide-react": "^0.344.0",
+        "mime": "^4.0.7",
         "prism-themes": "^1.9.0",
         "prismjs": "^1.30.0",
         "react": "^18.3.1",
@@ -4546,6 +4547,17 @@
         "graceful-fs": "^4.1.6"
       }
     },
+    "node_modules/electron-publish/node_modules/mime": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-2.6.0.tgz",
+      "integrity": "sha512-USPkMeET31rOMiarsBNIHZKLGgvKc/LrjofAnBlOttf5ajRvqiRA8QsenbcooctK6d6Ts6aqZXBA+XbkKthiQg==",
+      "bin": {
+        "mime": "cli.js"
+      },
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
     "node_modules/electron-publish/node_modules/universalify": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
@@ -7765,14 +7777,17 @@
       }
     },
     "node_modules/mime": {
-      "version": "2.6.0",
-      "resolved": "https://registry.npmjs.org/mime/-/mime-2.6.0.tgz",
-      "integrity": "sha512-USPkMeET31rOMiarsBNIHZKLGgvKc/LrjofAnBlOttf5ajRvqiRA8QsenbcooctK6d6Ts6aqZXBA+XbkKthiQg==",
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-4.0.7.tgz",
+      "integrity": "sha512-2OfDPL+e03E0LrXaGYOtTFIYhiuzep94NSsuhrNULq+stylcJedcHdzHtz0atMUuGwJfFYs0YL5xeC/Ca2x0eQ==",
+      "funding": [
+        "https://github.com/sponsors/broofa"
+      ],
       "bin": {
-        "mime": "cli.js"
+        "mime": "bin/cli.js"
       },
       "engines": {
-        "node": ">=4.0.0"
+        "node": ">=16"
       }
     },
     "node_modules/mime-db": {
diff --git a/package.json b/package.json
index 93ef7b7..a1f6cd7 100644
--- a/package.json
+++ b/package.json
@@ -30,6 +30,7 @@
     "i18next-browser-languagedetector": "^8.0.4",
     "katex": "^0.16.21",
     "lucide-react": "^0.344.0",
+    "mime": "^4.0.7",
     "prism-themes": "^1.9.0",
     "prismjs": "^1.30.0",
     "react": "^18.3.1",
diff --git a/src/components/chat/ChatMessageArea.tsx b/src/components/chat/ChatMessageArea.tsx
index eed379f..f090cb0 100644
--- a/src/components/chat/ChatMessageArea.tsx
+++ b/src/components/chat/ChatMessageArea.tsx
@@ -10,12 +10,15 @@ import { ChatService } from '../../services/chat-service';
 import { AIServiceCapability } from '../../types/capabilities';
 import ProviderIcon from '../ui/ProviderIcon';
 import { useTranslation } from '../../hooks/useTranslation';
+import FileUploadButton from './FileUploadButton';
+import FileAttachmentDisplay from './FileAttachmentDisplay';
 
 interface ChatMessageAreaProps {
   activeConversation: Conversation | null;
   isLoading: boolean;
   error: string | null;
   onSendMessage: (content: string) => void;
+  onSendMessageWithFiles?: (content: string, files: File[]) => void;
   onStopStreaming?: () => void;
   onRegenerateResponse?: (messageId: string) => void;
   onEditMessage?: (messageId: string, newContent: string) => void;
@@ -29,6 +32,7 @@ export const ChatMessageArea: React.FC<ChatMessageAreaProps> = ({
   isLoading,
   error,
   onSendMessage,
+  onSendMessageWithFiles,
   onStopStreaming,
   onRegenerateResponse,
   onEditMessage,
@@ -48,6 +52,7 @@ export const ChatMessageArea: React.FC<ChatMessageAreaProps> = ({
   const [ableToWebSearch, setAbleToWebSearch] = useState(false);
   const [webSearchActive, setWebSearchActive] = useState(false);
   const [isWebSearchPreviewEnabled, setIsWebSearchPreviewEnabled] = useState(false);
+  const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
   
   // Scroll to bottom when messages change
   useEffect(() => {
@@ -93,28 +98,31 @@ export const ChatMessageArea: React.FC<ChatMessageAreaProps> = ({
     }
   }, [isCurrentlyStreaming]);
 
-  const handleSubmit = (e: FormEvent) => {
-    e.preventDefault();
-    
-    if (!inputValue.trim() || isLoading || isCurrentlyStreaming) return;
-    
-    onSendMessage(inputValue);
-    
-    setInput('');
-
-    const textarea = inputRef.current;
-    if(!textarea) return;
-    // Calculate new height based on scrollHeight, with min and max constraints
-    const minHeight = 36; // Approx height for 1 row
+  // Handle file selection
+  const handleFilesSelected = (files: File[]) => {
+    setSelectedFiles([...selectedFiles, ...files]);
+  };
 
-    textarea.style.height = `${minHeight}px`;
+  // Remove a selected file
+  const handleRemoveFile = (index: number) => {
+    const newFiles = [...selectedFiles];
+    newFiles.splice(index, 1);
+    setSelectedFiles(newFiles);
   };
 
-  const handleStopStreaming = () => {
-    if (onStopStreaming) {
-      onStopStreaming();
-      isCurrentlyStreaming = false;
+  // Handle form submission with files
+  const handleFormSubmit = (e: FormEvent) => {
+    e.preventDefault();
+    if (isLoading || isCurrentlyStreaming || !inputValue.trim()) return;
+
+    if (selectedFiles.length > 0 && onSendMessageWithFiles) {
+      onSendMessageWithFiles(inputValue, selectedFiles);
+      setSelectedFiles([]);
+    } else {
+      onSendMessage(inputValue);
     }
+
+    setInput('');
   };
 
   // Handle regenerate response
@@ -161,6 +169,12 @@ export const ChatMessageArea: React.FC<ChatMessageAreaProps> = ({
       });
   };
 
+  const handleStopStreaming = () => {
+    if (onStopStreaming) {
+      onStopStreaming();
+    }
+  };
+
   // Placeholder error handler for other actions
   // const handleActionError = (action: string) => {
   //   console.error(`Function not implemented yet: ${action}`);
@@ -275,6 +289,35 @@ export const ChatMessageArea: React.FC<ChatMessageAreaProps> = ({
   // Check if there's a streaming message
   const hasStreamingMessage = Array.from(activeConversation.messages.values()).some(m => m.messageId.startsWith('streaming-'));
   
+  const webSearchElement = isWebSearchPreviewEnabled ? (
+    ableToWebSearch ? (
+      <button
+        type="button"
+        onClick={handleToggleWebSearch}
+        className={`flex items-center justify-center w-fit h-8 p-2 transition-all duration-200 rounded-full outline outline-2 hover:outline
+          ${webSearchActive ? 'bg-blue-50 outline-blue-300 hover:bg-blue-200 hover:outline hover:outline-blue-500' : 'bg-white outline-gray-100 hover:bg-blue-50 hover:outline hover:outline-blue-300'}`}
+        aria-label="Toggle Web Search"
+        title="Toggle Web Search"
+      >
+        <Globe className={`mr-1 ${webSearchActive ? 'text-blue-500' : 'text-gray-400'} transition-all duration-200`} size={20} />
+        <span className={`text-sm font-light ${webSearchActive ? 'text-blue-500' : 'text-gray-400'} transition-all duration-200`}>Web Search</span>
+      </button>
+    )
+    :
+    (
+      <button
+        type="button"
+        className={`flex items-center justify-center bg-gray-100 w-fit h-8 p-2 ml-2 transition-all duration-200 rounded-full cursor-not-allowed`}
+        aria-label="Toggle Web Search"
+        title="Toggle Web Search"
+      >
+        <Globe className={`mr-1 text-gray-400 transition-all duration-200`} size={20} />
+        <span className={`text-sm font-light text-gray-400 transition-all duration-200`}>Web Search (Not available)</span>
+      </button>
+    )
+  )
+  :<></>;
+
   return (
     <div className="flex flex-col w-full h-full max-w-full">
       {/* Messages area */}
@@ -325,7 +368,7 @@ export const ChatMessageArea: React.FC<ChatMessageAreaProps> = ({
           return (
             <div 
               key={message.messageId}
-              className={`flex flex-col ${isUserMessage ? 'items-end' : 'items-start'}`}
+              className={`flex flex-col h-fit ${isUserMessage ? 'items-end' : 'items-start'}`}
               onMouseEnter={() => setHoveredMessageId(message.messageId)}
               onMouseLeave={() => setHoveredMessageId(null)}
             >
@@ -388,12 +431,12 @@ export const ChatMessageArea: React.FC<ChatMessageAreaProps> = ({
                     }`}
                   >
                     {isUserMessage ? (
-                      <MarkdownContent content={message.content} />
+                      <MarkdownContent content={message.content} isUserMessage={true} />
                     ) : (
                       (message.content.length === 0 || MessageHelper.MessageContentToText(message.content).length === 0) ? (
                         <div className="w-4 h-4 bg-blue-600 rounded-full animate-bounce"></div>
                       ) : (
-                        <MarkdownContent content={message.content} />
+                        <MarkdownContent content={message.content} isUserMessage={false} />
                       )
                     )}
                   </div>
@@ -438,15 +481,30 @@ export const ChatMessageArea: React.FC<ChatMessageAreaProps> = ({
       </div>
       
       {/* Input form */}
-      <form onSubmit={handleSubmit}
+      <form onSubmit={handleFormSubmit}
         onClick={() => {
           inputRef.current?.focus();
         }}
         onFocus={() => {
           inputRef.current?.focus();
         }}
-        className={`relative flex ${isWebSearchPreviewEnabled ? 'flex-col' : 'flex-row justify-stretch items-center'} gap-2 px-4 pt-3 pb-2 m-2 mb-4 transition-all duration-200 rounded-lg form-textarea-border cursor-text`}
+        className={`relative flex flex-col gap-2 h-fit px-4 pt-3 pb-2 m-2 mb-4 transition-all duration-200 rounded-lg form-textarea-border cursor-text`}
       >
+        {/* Selected Files Display */}
+        {selectedFiles.length > 0 && (
+          <div className="flex flex-row w-full gap-1 mb-2">
+            {selectedFiles.map((file, index) => (
+              <FileAttachmentDisplay 
+                key={`${file.name}-${index}`}
+                file={file}
+                isUser={true}
+                showRemoveButton={true}
+                onRemove={() => handleRemoveFile(index)}
+              />
+            ))}
+          </div>
+        )}
+
         <textarea
             ref={inputRef}
             value={inputValue}
@@ -454,51 +512,35 @@ export const ChatMessageArea: React.FC<ChatMessageAreaProps> = ({
             onKeyDown={(e) => {
               if(e.key === 'Enter' && !e.shiftKey) {
                 e.preventDefault();
-                handleSubmit(e);
+                handleFormSubmit(e);
               }
             }}
             placeholder={t('chat.typeMessage')}
-            className="flex-1 w-[100%] px-2 pt-1 pb-2 resize-none focus:outline-none"
+            className="w-[100%] resize-none focus:outline-none"
             disabled={isLoading}
             inputMode='text'
             rows={1}
             style={{ minHeight: '36px', maxHeight: '108px', height: '36px', overflow: 'auto' }}
           ></textarea>
 
-        <div className="flex flex-row items-end justify-between h-full px-1">
+        <div className="flex flex-row items-center justify-between flex-1 h-full gap-2 px-1">
+          <div className='flex flex-row items-center h-full gap-2'>
+            {/* File upload button */}
+            {onSendMessageWithFiles && (
+                  <FileUploadButton 
+                    onFilesSelected={handleFilesSelected}
+                    disabled={isLoading || isCurrentlyStreaming}
+                  />
+                )}
+          </div>
+
+          {/* Web search element */}
           {
-            isWebSearchPreviewEnabled ? (
-              ableToWebSearch ? (
-                <button
-                  type="button"
-                  onClick={handleToggleWebSearch}
-                  className={`flex items-center justify-center w-fit h-8 p-2 transition-all duration-200 rounded-full outline outline-2 hover:outline
-                    ${webSearchActive ? 'bg-blue-50 outline-blue-300 hover:bg-blue-200 hover:outline hover:outline-blue-500' : 'bg-white outline-gray-100 hover:bg-blue-50 hover:outline hover:outline-blue-300'}`}
-                  aria-label="Toggle Web Search"
-                  title="Toggle Web Search"
-                >
-                  <Globe className={`mr-1 ${webSearchActive ? 'text-blue-500' : 'text-gray-400'} transition-all duration-200`} size={20} />
-                  <span className={`text-sm font-light ${webSearchActive ? 'text-blue-500' : 'text-gray-400'} transition-all duration-200`}>Web Search</span>
-                </button>
-              )
-              :
-              (
-                <button
-                  type="button"
-                  className={`flex items-center justify-center bg-gray-100 w-fit h-8 p-2 ml-2 transition-all duration-200 rounded-full cursor-not-allowed`}
-                  aria-label="Toggle Web Search"
-                  title="Toggle Web Search"
-                >
-                  <Globe className={`mr-1 text-gray-400 transition-all duration-200`} size={20} />
-                  <span className={`text-sm font-light text-gray-400 transition-all duration-200`}>Web Search (Not available)</span>
-                </button>
-              )
-            )
-            :<></>
+            webSearchElement
           }
 
-          <span className={`flex-1 hidden text-xs text-center pt-4 text-gray-300 md:block truncate ${isWebSearchPreviewEnabled ? 'pr-6 lg:pr-12' : ''}`}>
-            {isWebSearchPreviewEnabled ? t('chat.pressShiftEnterToChangeLines') : ''}
+          <span className={`flex-1 hidden text-xs text-center pt-4 text-gray-300 md:block truncate pr-6 lg:pr-12`}>
+            {t('chat.pressShiftEnterToChangeLines')}
           </span>
 
           {isCurrentlyStreaming || hasStreamingMessage ? (
diff --git a/src/components/chat/FileAttachmentDisplay.tsx b/src/components/chat/FileAttachmentDisplay.tsx
new file mode 100644
index 0000000..b1fc426
--- /dev/null
+++ b/src/components/chat/FileAttachmentDisplay.tsx
@@ -0,0 +1,144 @@
+import React from 'react';
+import { MessageContent, MessageContentType, FileJsonData } from '../../types/chat';
+import { X } from 'lucide-react';
+
+interface FileAttachmentDisplayProps {
+  content?: MessageContent;
+  file?: File;
+  isUser?: boolean;
+  onRemove?: () => void;
+  showRemoveButton?: boolean;
+}
+
+const FileAttachmentDisplay: React.FC<FileAttachmentDisplayProps> = ({ 
+  content,
+  file,
+  isUser = false,
+  onRemove,
+  showRemoveButton = false
+}) => {
+  let fileData: FileJsonData = {
+    name: 'File',
+    type: '',
+    size: 0
+  };
+
+  // Handle MessageContent objects
+  if (content && content.type === MessageContentType.File) {
+    try {
+      fileData = JSON.parse(content.dataJson) as FileJsonData;
+    } catch (e) {
+      console.error('Error parsing file data:', e);
+      return null;
+      // Use defaults if JSON parsing fails
+    }
+  }
+  // Handle File objects
+  else if (file) {
+    fileData = {
+      name: file.name,
+      type: file.type,
+      size: file.size
+    };
+  }
+  // Return null if no valid input is provided
+  else {
+    return null;
+  }
+
+  const fileSize = fileData.size ? formatFileSize(fileData.size) : '';
+  const fileName = fileData.name || 'File';
+  
+  // Detect file type to show appropriate icon
+  const fileExtension = fileName.split('.').pop()?.toLowerCase() || '';
+  const fileType = getFileType(fileExtension);
+  
+  return (
+    <div className={`flex items-center px-3 py-2 rounded-md mb-2 ${isUser ? 'bg-blue-50' : 'bg-gray-50'}`}>
+      <div className="flex-shrink-0 mr-3">
+        {getFileIcon(fileType)}
+      </div>
+      <div className="flex-grow min-w-0">
+        <div className="text-sm font-medium truncate">{fileName}</div>
+        <div className="text-xs text-gray-500">{fileSize}</div>
+      </div>
+      {showRemoveButton && onRemove && (
+        <button 
+          onClick={onRemove}
+          className="p-1 ml-2 text-gray-400 rounded-full hover:text-red-500 hover:bg-gray-100"
+          aria-label="Remove file"
+          title="Remove file"
+        >
+          <X size={16} />
+        </button>
+      )}
+    </div>
+  );
+};
+
+// Helper functions
+function formatFileSize(bytes: number): string {
+  if (bytes === 0) return '0 Bytes';
+  
+  const k = 1024;
+  const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+}
+
+function getFileType(extension: string): 'document' | 'image' | 'code' | 'archive' | 'other' {
+  const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'];
+  const documentExtensions = ['pdf', 'doc', 'docx', 'txt', 'rtf', 'md', 'ppt', 'pptx', 'xls', 'xlsx'];
+  const codeExtensions = ['js', 'jsx', 'ts', 'tsx', 'html', 'css', 'py', 'java', 'c', 'cpp', 'cs', 'php', 'rb', 'go', 'json'];
+  const archiveExtensions = ['zip', 'rar', 'tar', 'gz', '7z'];
+  
+  if (imageExtensions.includes(extension)) return 'image';
+  if (documentExtensions.includes(extension)) return 'document';
+  if (codeExtensions.includes(extension)) return 'code';
+  if (archiveExtensions.includes(extension)) return 'archive';
+  
+  return 'other';
+}
+
+function getFileIcon(fileType: 'document' | 'image' | 'code' | 'archive' | 'other'): JSX.Element {
+  const iconClass = "w-8 h-8";
+  
+  switch (fileType) {
+    case 'document':
+      return (
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className={`${iconClass} text-blue-500`}>
+          <path d="M5.625 1.5c-1.036 0-1.875.84-1.875 1.875v17.25c0 1.035.84 1.875 1.875 1.875h12.75c1.035 0 1.875-.84 1.875-1.875V12.75A3.75 3.75 0 0016.5 9h-1.875a1.875 1.875 0 01-1.875-1.875V5.25A3.75 3.75 0 009 1.5H5.625z" />
+          <path d="M12.971 1.816A5.23 5.23 0 0114.25 5.25v1.875c0 .207.168.375.375.375H16.5a5.23 5.23 0 013.434 1.279 9.768 9.768 0 00-6.963-6.963z" />
+        </svg>
+      );
+    case 'image':
+      return (
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className={`${iconClass} text-green-500`}>
+          <path fillRule="evenodd" d="M1.5 6a2.25 2.25 0 012.25-2.25h16.5A2.25 2.25 0 0122.5 6v12a2.25 2.25 0 01-2.25 2.25H3.75A2.25 2.25 0 011.5 18V6zM3 16.06V18c0 .414.336.75.75.75h16.5A.75.75 0 0021 18v-1.94l-2.69-2.689a1.5 1.5 0 00-2.12 0l-.88.879.97.97a.75.75 0 11-1.06 1.06l-5.16-5.159a1.5 1.5 0 00-2.12 0L3 16.061zm10.125-7.81a1.125 1.125 0 112.25 0 1.125 1.125 0 01-2.25 0z" clipRule="evenodd" />
+        </svg>
+      );
+    case 'code':
+      return (
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className={`${iconClass} text-purple-500`}>
+          <path fillRule="evenodd" d="M14.447 3.027a.75.75 0 01.527.92l-4.5 16.5a.75.75 0 01-1.448-.394l4.5-16.5a.75.75 0 01.921-.526zM16.72 6.22a.75.75 0 011.06 0l5.25 5.25a.75.75 0 010 1.06l-5.25 5.25a.75.75 0 11-1.06-1.06L21.44 12l-4.72-4.72a.75.75 0 010-1.06zm-9.44 0a.75.75 0 010 1.06L2.56 12l4.72 4.72a.75.75 0 11-1.06 1.06L.97 12.53a.75.75 0 010-1.06l5.25-5.25a.75.75 0 011.06 0z" clipRule="evenodd" />
+        </svg>
+      );
+    case 'archive':
+      return (
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className={`${iconClass} text-amber-500`}>
+          <path d="M3.375 3C2.339 3 1.5 3.84 1.5 4.875v.75c0 1.036.84 1.875 1.875 1.875h17.25c1.035 0 1.875-.84 1.875-1.875v-.75C22.5 3.839 21.66 3 20.625 3H3.375z" />
+          <path fillRule="evenodd" d="M3.087 9l.54 9.176A3 3 0 006.62 21h10.757a3 3 0 002.995-2.824L20.913 9H3.087zm6.163 3.75A.75.75 0 0110 12h4a.75.75 0 010 1.5h-4a.75.75 0 01-.75-.75z" clipRule="evenodd" />
+        </svg>
+      );
+    default:
+      return (
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className={`${iconClass} text-gray-500`}>
+          <path fillRule="evenodd" d="M5.625 1.5H9a3.75 3.75 0 013.75 3.75v1.875c0 1.036.84 1.875 1.875 1.875H16.5a3.75 3.75 0 013.75 3.75v7.875c0 1.035-.84 1.875-1.875 1.875H5.625a1.875 1.875 0 01-1.875-1.875V3.375c0-1.036.84-1.875 1.875-1.875zm6.905 9.97a.75.75 0 00-1.06 0l-3 3a.75.75 0 101.06 1.06l1.72-1.72V18a.75.75 0 001.5 0v-4.19l1.72 1.72a.75.75 0 101.06-1.06l-3-3z" clipRule="evenodd" />
+          <path d="M14.25 5.25a5.23 5.23 0 00-1.279-3.434 9.768 9.768 0 016.963 6.963A5.23 5.23 0 0016.5 7.5h-1.875a.375.375 0 01-.375-.375V5.25z" />
+        </svg>
+      );
+  }
+}
+
+export default FileAttachmentDisplay; 
\ No newline at end of file
diff --git a/src/components/chat/FileUploadButton.tsx b/src/components/chat/FileUploadButton.tsx
new file mode 100644
index 0000000..3e2623b
--- /dev/null
+++ b/src/components/chat/FileUploadButton.tsx
@@ -0,0 +1,90 @@
+import React, { useRef, useState } from 'react';
+import { FileUploadService } from '../../services/file-upload-service';
+import { SettingsService } from '../../services/settings-service';
+
+interface FileUploadButtonProps {
+  onFilesSelected: (files: File[]) => void;
+  disabled?: boolean;
+}
+
+const FileUploadButton: React.FC<FileUploadButtonProps> = ({ 
+  onFilesSelected,
+  disabled = false
+}) => {
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleClick = () => {
+    if (fileInputRef.current) {
+      fileInputRef.current.click();
+    }
+  };
+
+  const handleFileChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    const files = Array.from(event.target.files || []);
+    if (files.length === 0) return;
+
+    // Reset file input value to allow selecting the same file again
+    if (fileInputRef.current) {
+      fileInputRef.current.value = '';
+    }
+
+    try {
+      // Validate files against provider limits
+      const fileUploadService = FileUploadService.getInstance();
+      const provider = SettingsService.getInstance().getSelectedProvider();
+      const limits = fileUploadService.getProviderFileLimits(provider);
+      
+      // Check file size and type
+      for (const file of files) {
+        if (!fileUploadService.isFileValidForProvider(file, provider)) {
+          throw new Error(
+            `File "${file.name}" exceeds size limit (${Math.round(limits.maxFileSizeBytes / (1024 * 1024))}MB) or has unsupported file type.`
+          );
+        }
+      }
+
+      setError(null);
+      onFilesSelected(files);
+    } catch (error) {
+      if (error instanceof Error) {
+        setError(error.message);
+        setTimeout(() => setError(null), 5000); // Clear error after 5 seconds
+      }
+    }
+  };
+
+  return (
+    <div className="relative">
+      <button
+        type="button"
+        onClick={handleClick}
+        disabled={disabled}
+        className="flex items-center justify-center w-8 h-8 text-gray-500 rounded-full hover:text-gray-700 hover:bg-gray-100 focus:outline-none"
+        title="Upload file"
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" className="w-5 h-5">
+          <path 
+            fillRule="evenodd" 
+            d="M5.5 17a4.5 4.5 0 01-1.44-8.765 4.5 4.5 0 018.302-3.046 3.5 3.5 0 014.504 4.272A4 4 0 0115 17H5.5zm3.75-2.75a.75.75 0 001.5 0V9.66l1.95 2.1a.75.75 0 101.1-1.02l-3.25-3.5a.75.75 0 00-1.1 0l-3.25 3.5a.75.75 0 101.1 1.02l1.95-2.1v4.59z" 
+            clipRule="evenodd" 
+          />
+        </svg>
+      </button>
+      <input
+        ref={fileInputRef}
+        type="file"
+        onChange={handleFileChange}
+        multiple={true}
+        className="hidden"
+      />
+      {error && (
+        <div className="absolute left-0 p-2 mb-2 text-xs text-red-800 bg-red-100 rounded shadow-md bottom-full whitespace-nowrap">
+          {error}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default FileUploadButton; 
\ No newline at end of file
diff --git a/src/components/chat/MarkdownContent.tsx b/src/components/chat/MarkdownContent.tsx
index 4aee099..c18854f 100644
--- a/src/components/chat/MarkdownContent.tsx
+++ b/src/components/chat/MarkdownContent.tsx
@@ -8,11 +8,13 @@ import 'katex/dist/katex.min.css';
 import 'prism-themes/themes/prism-vsc-dark-plus.css';
 import type { Components } from 'react-markdown'
 import type { HTMLProps } from 'react';
-import { MessageContent } from '../../types/chat';
+import { MessageContent, MessageContentType } from '../../types/chat';
 import { MessageHelper } from '../../services/message-helper';
+import FileAttachmentDisplay from './FileAttachmentDisplay';
 
 interface MarkdownContentProps {
   content: MessageContent[];
+  isUserMessage?: boolean;
 }
 
 type CodeProps = React.ClassAttributes<HTMLElement> & 
@@ -20,13 +22,29 @@ type CodeProps = React.ClassAttributes<HTMLElement> &
     inline?: boolean;
   };
 
-export const MarkdownContent: React.FC<MarkdownContentProps> = ({ content }) => {
+export const MarkdownContent: React.FC<MarkdownContentProps> = ({ content, isUserMessage = false }) => {
   const [processedContent, setProcessedContent] = useState('');
   const [thinkContent, setThinkContent] = useState<string | null>(null);
   const [isThinkExpanded, setIsThinkExpanded] = useState(true);
+  const [fileContents, setFileContents] = useState<MessageContent[]>([]);
   
-  // Process content and check for thinking blocks
+  // Process content and check for thinking blocks and files
   useEffect(() => {
+    // Extract text and file contents
+    const textContents: MessageContent[] = [];
+    const files: MessageContent[] = [];
+    
+    content.forEach(item => {
+      if (item.type === MessageContentType.Text) {
+        textContents.push(item);
+      } else if (item.type === MessageContentType.File) {
+        files.push(item);
+      }
+    });
+    
+    // Save file contents for rendering
+    setFileContents(files);
+    
     // Create a function for a safer replacement
     function safeReplace(str: string, search: string, replace: string): string {
       // Split the string by the search term
@@ -35,7 +53,7 @@ export const MarkdownContent: React.FC<MarkdownContentProps> = ({ content }) =>
       return parts.join(replace);
     }
     
-    let processed = MessageHelper.MessageContentToText(content);
+    let processed = MessageHelper.MessageContentToText(textContents);
     
     // Check if content contains thinking block
     const thinkMatch = processed.match(/<think>([\s\S]*?)<\/think>([\s\S]*)/);
@@ -103,6 +121,19 @@ export const MarkdownContent: React.FC<MarkdownContentProps> = ({ content }) =>
 
   return (
     <div className="prose-sm prose max-w-none dark:prose-invert">
+      {/* File attachments */}
+      {fileContents.length > 0 && (
+        <div className="mb-3">
+          {fileContents.map((file, index) => (
+            <FileAttachmentDisplay 
+              key={index} 
+              content={file} 
+              isUser={isUserMessage} 
+            />
+          ))}
+        </div>
+      )}
+      
       {thinkContent && (
         <div className="mb-4">
           <div 
@@ -146,24 +177,26 @@ export const MarkdownContent: React.FC<MarkdownContentProps> = ({ content }) =>
         </div>
       )}
 
-      <ReactMarkdown
-        remarkPlugins={[remarkMath, remarkGfm]}
-        rehypePlugins={[
-          [rehypePrism, { 
-            showLineNumbers: true,
-            ignoreMissing: true 
-          }],
-          [rehypeKatex, { 
-            throwOnError: false,
-            strict: false,
-            output: 'html', 
-            trust: true
-          }]
-        ]}
-        components={components}
-      >
-        {processedContent}
-      </ReactMarkdown>
+      {processedContent && (
+        <ReactMarkdown
+          remarkPlugins={[remarkMath, remarkGfm]}
+          rehypePlugins={[
+            [rehypePrism, { 
+              showLineNumbers: true,
+              ignoreMissing: true 
+            }],
+            [rehypeKatex, { 
+              throwOnError: false,
+              strict: false,
+              output: 'html', 
+              trust: true
+            }]
+          ]}
+          components={components}
+        >
+          {processedContent}
+        </ReactMarkdown>
+      )}
     </div>
   );
 };
diff --git a/src/components/pages/ChatPage.tsx b/src/components/pages/ChatPage.tsx
index 53427e1..2dd278d 100644
--- a/src/components/pages/ChatPage.tsx
+++ b/src/components/pages/ChatPage.tsx
@@ -345,6 +345,29 @@ export const ChatPage = () => {
     }
   };
 
+  // Handle sending a message with files
+  const handleSendMessageWithFiles = async (content: string, files: File[]) => {
+    if (!activeConversationId || !isServiceInitialized || !chatServiceRef.current) return;
+    
+    try {
+      const chatService = chatServiceRef.current;
+
+      // Send user message with files
+      await chatService.sendMessageWithFiles(
+        content, 
+        files,
+        activeConversationId,
+        true,
+        (updatedConversation) => {
+          setConversations(updatedConversation);
+        }
+      );
+      
+    } catch (err) {
+      console.error('Error sending message with files:', err);
+    }
+  };
+
   return (
     <div className="flex flex-col w-full h-full bg-white">
 
@@ -376,6 +399,7 @@ export const ChatPage = () => {
             isLoading={isLoading}
             error={error ? error.message : null}
             onSendMessage={handleSendMessage}
+            onSendMessageWithFiles={handleSendMessageWithFiles}
             onStopStreaming={handleStopStreaming}
             onRegenerateResponse={handleRegenerateResponse}
             onEditMessage={handleEditMessage}
diff --git a/src/services/chat-service.ts b/src/services/chat-service.ts
index 3cb1e15..2e22062 100644
--- a/src/services/chat-service.ts
+++ b/src/services/chat-service.ts
@@ -5,6 +5,7 @@ import { SettingsService } from './settings-service';
 import { StreamControlHandler } from './streaming-control';
 import { MessageHelper } from './message-helper';
 import { AIServiceCapability } from '../types/capabilities';
+import { FileUploadService } from './file-upload-service';
 
 /**
  * Service for managing chat conversations
@@ -260,6 +261,134 @@ export class ChatService {
     }
   }
 
+  /**
+   * Send a message with files in the active conversation
+   */
+  public async sendMessageWithFiles(
+    content: string,
+    files: File[],
+    conversationId: string,
+    isStreaming: boolean,
+    conversationUpdate: (conversations: Conversation[]) => void
+  ): Promise<void> {
+    if (!this.dbService) {
+      throw new Error('Database service not initialized');
+    }
+
+    const currentConversation = this.conversations.find(c => c.conversationId === conversationId);
+    if (currentConversation === undefined) {
+      throw new Error('Active conversation not found');
+    }
+    
+    try {
+      const settingsService = SettingsService.getInstance();
+      const provider = settingsService.getSelectedProvider();
+      const model = settingsService.getSelectedModel();
+
+      // Process uploaded files
+      const fileUploadService = FileUploadService.getInstance();
+      const fileContents = await fileUploadService.processUploadedFiles(files);
+
+      //#region Save user message with files to database and update title
+      // eslint-disable-next-line prefer-const
+      let {conversation: updatedConversation, message: userMessage} = await MessageHelper.addUserMessageWithFilesToConversation(
+        content, 
+        fileContents,
+        currentConversation
+      );
+      
+      // Update in memory
+      this.conversations = this.conversations.map(c => 
+        c.conversationId === conversationId ? updatedConversation : c
+      );
+
+      conversationUpdate(this.conversations);
+      //#endregion
+
+      // Map messages to messages array
+      const messages = MessageHelper.mapMessagesTreeToList(updatedConversation, false);
+
+      //#region Streaming Special Message Handling
+      // Create a placeholder for the streaming message
+      const placeholderMessage: Message = MessageHelper.getPlaceholderMessage(model, provider, conversationId);
+
+      userMessage.childrenMessageIds.push(placeholderMessage.messageId);
+      userMessage.preferIndex = userMessage.childrenMessageIds.length - 1;
+
+      // Add placeholder to conversation and update UI
+      const messagesWithPlaceholder = new Map(updatedConversation.messages);
+      messagesWithPlaceholder.set(placeholderMessage.messageId, placeholderMessage);
+
+      updatedConversation = {
+        ...updatedConversation,
+        messages: messagesWithPlaceholder,
+        updatedAt: new Date()
+      };
+
+      this.conversations = this.conversations.map(c => 
+        c.conversationId === conversationId ? updatedConversation : c
+      );
+
+      conversationUpdate(this.conversations);
+      //#endregion
+
+      //#region Send Chat Message to AI with streaming
+
+      // Create a new abort controller for this request
+      const streamController = new StreamControlHandler(
+        updatedConversation, 
+        placeholderMessage,
+        // ---- On chunk callback ----
+        (updated: Conversation) => {  
+          this.conversations = this.conversations.map(c => 
+            c.conversationId === conversationId ? updated : c
+          );
+          conversationUpdate(this.conversations);
+        }, 
+        // ---- On finish callback ----
+        async (aiResponse: Message | null) => { 
+
+          console.log(aiResponse);
+
+          if (aiResponse === null) return;
+
+          const finalConversation = await MessageHelper.insertAssistantMessageToConversation(userMessage, aiResponse, updatedConversation);
+
+          // Update in memory
+          this.conversations = this.conversations.map(c => 
+            c.conversationId === conversationId ? finalConversation : c
+          );
+
+          conversationUpdate(this.conversations);
+
+          this.streamControllerMap.delete(conversationId);
+        }
+      );
+
+      this.streamControllerMap.set(conversationId, streamController);
+
+      console.log('Messages:', messages);
+
+      // Send Chat Message to AI with streaming
+      await this.aiService.getChatCompletion(
+        messages, 
+        {
+          model: model,
+          provider: provider,
+          stream: isStreaming
+        },
+        streamController
+      );
+
+      conversationUpdate(this.conversations);
+      
+      //#endregion
+    } catch (error) {
+      console.error('Failed to send message with files:', error);
+      throw error;
+    }
+  }
+
   /**
    * Edit a message in a conversation
    */
diff --git a/src/services/file-upload-service.ts b/src/services/file-upload-service.ts
new file mode 100644
index 0000000..1a2fa07
--- /dev/null
+++ b/src/services/file-upload-service.ts
@@ -0,0 +1,158 @@
+import { SettingsService } from './settings-service';
+import { FileJsonData, MessageContent, MessageContentType } from '../types/chat';
+
+// Define provider-specific file size limits
+export interface ProviderFileLimits {
+  maxFileSizeBytes: number;
+  supportedFileTypes: string[];
+}
+
+const DEFAULT_FILE_LIMITS: ProviderFileLimits = {
+  maxFileSizeBytes: 20 * 1024 * 1024, // 20MB default
+  supportedFileTypes: ['*'] // All file types by default
+};
+
+// Provider-specific file limits
+const PROVIDER_FILE_LIMITS: Record<string, ProviderFileLimits> = {
+  'OpenAI': {
+    maxFileSizeBytes: 25 * 1024 * 1024, // 25MB limit for OpenAI
+    supportedFileTypes: [
+      '.c', '.cpp', '.csv', '.docx', '.html', '.java', '.json', '.md', '.pdf', 
+      '.php', '.pptx', '.py', '.rb', '.tex', '.txt', '.css', '.jpeg', '.jpg', 
+      '.js', '.gif', '.png', '.tar', '.ts', '.xlsx', '.xml', '.zip'
+    ]
+  }
+  // Other providers can be added here
+};
+
+/**
+ * Service for handling file uploads to various AI providers
+ */
+export class FileUploadService {
+  private static instance: FileUploadService;
+  
+  private constructor() { }
+  
+  /**
+   * Get the singleton instance
+   */
+  public static getInstance(): FileUploadService {
+    if (!FileUploadService.instance) {
+      FileUploadService.instance = new FileUploadService();
+    }
+    return FileUploadService.instance;
+  }
+  
+  /**
+   * Get file limits for a specific provider
+   */
+  public getProviderFileLimits(providerName: string): ProviderFileLimits {
+    return PROVIDER_FILE_LIMITS[providerName] || DEFAULT_FILE_LIMITS;
+  }
+  
+  /**
+   * Check if a file is valid for a specific provider
+   */
+  public isFileValidForProvider(file: File, providerName: string): boolean {
+    const limits = this.getProviderFileLimits(providerName);
+    
+    // Check file size
+    if (file.size > limits.maxFileSizeBytes) {
+      return false;
+    }
+    
+    // Check file type if specific types are provided
+    if (limits.supportedFileTypes.length > 0 && limits.supportedFileTypes[0] !== '*') {
+      const fileExtension = this.getFileExtension(file.name).toLowerCase();
+      return limits.supportedFileTypes.includes(fileExtension);
+    }
+    
+    return true;
+  }
+  
+  /**
+   * Get the file extension from a filename
+   */
+  private getFileExtension(filename: string): string {
+    const extension = filename.split('.').pop();
+    return extension ? `.${extension}` : '';
+  }
+  
+  /**
+   * Read a file and convert it to a base64 string (if needed)
+   */
+  public async readFile(file: File): Promise<ArrayBuffer> {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      
+      reader.onload = () => {
+        if (reader.result instanceof ArrayBuffer) {
+          resolve(reader.result);
+        } else {
+          reject(new Error('Failed to read file as text'));
+        }
+      };
+      
+      reader.onerror = () => {
+        reject(new Error('Error reading file'));
+      };
+      
+      reader.readAsArrayBuffer(file);
+    });
+  }
+  
+  /**
+   * Process uploaded files for a specific provider
+   * Returns message contents to be added to the message
+   */
+  public async processUploadedFiles(files: File[]): Promise<MessageContent[]> {
+    const provider = SettingsService.getInstance().getSelectedProvider();
+    const results: MessageContent[] = [];
+    
+    for (const file of files) {
+      if (!this.isFileValidForProvider(file, provider)) {
+        throw new Error(`File ${file.name} exceeds size limit or is not supported by ${provider}`);
+      }
+      
+      const arrayBuffer = await this.readFile(file);
+      const base64 = FileUploadService.bufferToBase64(arrayBuffer);
+
+      const fileData: FileJsonData = {
+        name: file.name,
+        type: file.type,
+        size: file.size
+      };
+
+      // Create a message content object for this file
+      const fileContent: MessageContent = {
+        type: MessageContentType.File,
+        content: base64, // Store the file path
+        dataJson: JSON.stringify(fileData)
+      };
+      
+      results.push(fileContent);
+    }
+    
+    return results;
+  }
+
+  public static bufferToBase64(buffer: ArrayBuffer): string {
+    const bytes = new Uint8Array(buffer);
+    let binary = '';
+    for (let i = 0; i < bytes.byteLength; i++) {
+        binary += String.fromCharCode(bytes[i]);
+    }
+    return btoa(binary);
+  }
+
+  public static base64ToBuffer(base64: string): ArrayBuffer {
+    const binary = atob(base64);
+    const buffer = new ArrayBuffer(binary.length);
+    const bytes = new Uint8Array(buffer);
+    for (let i = 0; i < binary.length; i++) {
+      bytes[i] = binary.charCodeAt(i);
+    }
+    return buffer;
+  }
+  
+}
\ No newline at end of file
diff --git a/src/services/message-helper.ts b/src/services/message-helper.ts
index 05fe691..772900a 100644
--- a/src/services/message-helper.ts
+++ b/src/services/message-helper.ts
@@ -1,6 +1,7 @@
-import { Conversation, Message, MessageContent, MessageContentType } from "../types/chat";
+import { Conversation, FileJsonData, Message, MessageContent, MessageContentType } from "../types/chat";
 import { DatabaseIntegrationService } from "./database-integration";
 import { v4 as uuidv4 } from 'uuid';
+import { FilePart, CoreMessage, TextPart, CoreUserMessage, CoreAssistantMessage, CoreSystemMessage } from "ai";
 
 export class MessageHelper {
   
@@ -226,6 +227,69 @@ export class MessageHelper {
         return lastMessage;
     }
 
+    public static async addUserMessageWithFilesToConversation(
+        textContent: string, 
+        fileContents: MessageContent[],
+        conversation: Conversation
+    ): Promise<{conversation: Conversation, message: Message}> {
+        let latestMessage = MessageHelper.getLastMessage(conversation);
+
+        const dbService = DatabaseIntegrationService.getInstance();
+
+        // Combine text and file contents
+        const combinedContent: MessageContent[] = [
+            ...MessageHelper.pureTextMessage(textContent),
+            ...fileContents
+        ];
+
+        const userMessage = await dbService.saveChatMessage(
+            uuidv4(),
+            conversation.conversationId,
+            'user',
+            combinedContent,
+            'provider: user',
+            'model: user',
+            0,
+            latestMessage ? latestMessage.messageId : null,
+            [],
+            -1
+        );
+
+        if (latestMessage) {
+            latestMessage = MessageHelper.insertMessageIdToFathterMessage(latestMessage, userMessage.messageId);
+
+            console.log('Updated latest message:', latestMessage);
+
+            await dbService.updateChatMessage(latestMessage.messageId, latestMessage, conversation.conversationId);
+        }
+        
+        const shouldUpdateTitle = conversation.messages.size === 1 && Array.from(conversation.messages.values())[0].role === 'system';
+
+        const title = shouldUpdateTitle 
+            ? textContent.substring(0, 30) + (textContent.length > 30 ? '...' : '') 
+            : conversation.title;
+
+        const messages = new Map(conversation.messages);
+        messages.set(userMessage.messageId, userMessage);
+        if(latestMessage) {
+            messages.set(latestMessage.messageId, latestMessage);
+        }
+
+        const updatedConversation = {
+            ...conversation,
+            title,
+            messages,
+            updatedAt: new Date()
+        };
+
+        await dbService.updateConversation(updatedConversation);
+
+        return {
+            conversation: updatedConversation,
+            message: userMessage
+        };
+    }
+
     public static pureTextMessage(contentText: string): MessageContent[] {
         return [
             {
@@ -236,7 +300,16 @@ export class MessageHelper {
         ]
     }
 
+    /**
+     * Convert a message content array to a text string (Only text content)
+     * @param messageContent - The message content array to convert
+     * @returns The text string
+     */
     public static MessageContentToText(messageContent: MessageContent[]): string {
+        if (!messageContent || messageContent.length === 0) {
+            return '';
+        }
+        
         return messageContent.map(content => { 
             if(content.type === MessageContentType.Text) {
                 return content.content;
@@ -245,6 +318,88 @@ export class MessageHelper {
         }).join('');
     }
 
+    public static MessagesContentToOpenAIFormat(msgs: Message[]): CoreMessage[] {
+        if (!msgs || msgs.length === 0) {
+            return [];
+        }
+
+        console.log('before msgs: ', msgs);
+        
+        const results = msgs.map((msg) => {
+            
+            if(msg.role === 'user') {
+                const userMsg: CoreUserMessage = {
+                    role: 'user',
+                    content: msg.content.map((content) => {
+                        if(content.type === MessageContentType.Text) {
+                            const textContent: TextPart = {
+                                type: 'text',
+                                text: content.content
+                            };
+                            return textContent;
+                        }
+                        else if(content.type === MessageContentType.File) {
+                            const dataJson: FileJsonData = JSON.parse(content.dataJson) as FileJsonData;
+
+                            console.log('Processing file: ', dataJson.name);
+
+                            const fileContent: FilePart = {
+                                type: 'file',
+                                data: content.content,
+                                mimeType: 'application/pdf',
+                                filename: dataJson.name
+                            }
+                            return fileContent;
+                        }
+                        
+                        const emptyText: TextPart = {
+                            type: 'text',
+                            text: ''
+                        };
+                        return emptyText;
+                    })
+                }
+
+                return userMsg;
+            }
+            else if(msg.role === 'assistant') {
+                let stringContent: string = '';
+
+                for(const content of msg.content) {
+                    if(content.type === MessageContentType.Text) {
+                        stringContent += content.content;
+                    }
+                }
+
+                const assistantMsg: CoreAssistantMessage = {
+                    role: 'assistant',
+                    content: stringContent
+                }
+
+                return assistantMsg;
+            }
+            else if(msg.role === 'system') {
+                let stringContent: string = '';
+
+                for(const content of msg.content) {
+                    if(content.type === MessageContentType.Text) {
+                        stringContent += content.content;
+                    }
+                }
+
+                const systemMsg: CoreSystemMessage = {
+                    role: 'system',
+                    content: stringContent
+                }
+
+                return systemMsg;
+            }
+            
+        });
+
+        return results.filter((result) => result !== undefined) as CoreMessage[];
+    }
+
     public static insertMessageIdToFathterMessage(fatherMessage: Message, messageId: string): Message {
         if(fatherMessage.childrenMessageIds.length === 0) {
             fatherMessage.childrenMessageIds.push(messageId);
diff --git a/src/services/providers/common-provider-service.ts b/src/services/providers/common-provider-service.ts
index 6ec63d4..d13537c 100644
--- a/src/services/providers/common-provider-service.ts
+++ b/src/services/providers/common-provider-service.ts
@@ -146,10 +146,9 @@ export class CommonProviderHelper implements AiServiceProvider {
     toolChoice: ToolChoice<ToolSet> | undefined = undefined
   ): Promise<Message> {
     try {
-      const formattedMessages = messages.map(msg => ({
-        role: msg.role,
-        content: MessageHelper.MessageContentToText(msg.content)
-      }));
+      const formattedMessages = MessageHelper.MessagesContentToOpenAIFormat(messages);
+
+      console.log('formattedMessages: ', formattedMessages);
 
       let fullText = '';
 
diff --git a/src/services/providers/openai-service.ts b/src/services/providers/openai-service.ts
index 25509e1..7613aa8 100644
--- a/src/services/providers/openai-service.ts
+++ b/src/services/providers/openai-service.ts
@@ -109,8 +109,9 @@ export class OpenAIService implements AiServiceProvider {
     options: CompletionOptions,
     streamController: StreamControlHandler
   ): Promise<Message> {
-    const isWebSearchActive = SettingsService.getInstance().getWebSearchActive();
 
+    const isWebSearchActive = SettingsService.getInstance().getWebSearchActive();
+    
     if (isWebSearchActive) {
       return this.getChatCompletionWithWebSearch(messages, options, streamController);
     }
diff --git a/src/types/chat.ts b/src/types/chat.ts
index 7ead12f..3b0f94f 100644
--- a/src/types/chat.ts
+++ b/src/types/chat.ts
@@ -9,6 +9,12 @@ export enum MessageContentType {
   SystemMessage = 'systemMessage',
 }
 
+export interface FileJsonData{
+  name: string;
+  type: string;
+  size: number;
+}
+
 export interface MessageContent {
   type: MessageContentType;
   content: string;