diff --git a/package-lock.json b/package-lock.json
index c03411e..995dcd2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,13 +8,13 @@
       "name": "tensorblock-studio",
       "version": "0.0.1",
       "dependencies": {
-        "@ai-sdk/fireworks": "^0.2.5",
-        "@ai-sdk/google": "^1.2.5",
-        "@ai-sdk/openai": "^1.3.6",
-        "@ai-sdk/togetherai": "^0.2.5",
-        "@anthropic-ai/sdk": "^0.39.0",
+        "@ai-sdk/fireworks": "^0.2.13",
+        "@ai-sdk/google": "^1.2.13",
+        "@ai-sdk/openai": "^1.3.20",
+        "@ai-sdk/togetherai": "^0.2.13",
+        "@anthropic-ai/sdk": "^0.40.0",
         "@openrouter/ai-sdk-provider": "^0.4.5",
-        "ai": "^4.2.10",
+        "ai": "^4.3.10",
         "axios": "^1.8.4",
         "dotenv": "^16.4.7",
         "electron-builder": "26.0.12",
@@ -63,13 +63,13 @@
       }
     },
     "node_modules/@ai-sdk/fireworks": {
-      "version": "0.2.6",
-      "resolved": "https://registry.npmjs.org/@ai-sdk/fireworks/-/fireworks-0.2.6.tgz",
-      "integrity": "sha512-2aqKIJ9A6ioRcANxxI6CpxWSS7kYUJDwHyxQiQNw3Ng/rz4u6oa0bOEUWHistP8uKzalveXjooLPZxa/Ie2iFg==",
+      "version": "0.2.13",
+      "resolved": "https://registry.npmjs.org/@ai-sdk/fireworks/-/fireworks-0.2.13.tgz",
+      "integrity": "sha512-LYS0gof7dgJ2sfOU8WmKobHVV8gHfoFtLmiKfhNJjhOnF0a8EA5mX6uWmN///j8mtst7lBLqOw4Q3DNJFoqS3g==",
       "dependencies": {
-        "@ai-sdk/openai-compatible": "0.2.6",
-        "@ai-sdk/provider": "1.1.0",
-        "@ai-sdk/provider-utils": "2.2.4"
+        "@ai-sdk/openai-compatible": "0.2.13",
+        "@ai-sdk/provider": "1.1.3",
+        "@ai-sdk/provider-utils": "2.2.7"
       },
       "engines": {
         "node": ">=18"
@@ -79,12 +79,12 @@
       }
     },
     "node_modules/@ai-sdk/google": {
-      "version": "1.2.7",
-      "resolved": "https://registry.npmjs.org/@ai-sdk/google/-/google-1.2.7.tgz",
-      "integrity": "sha512-swGJ4nPRB83ZQgR9W5fF7usvZmZsBN61+dm03Hz/dRVVLLLTVZq/0YtpFZ8Yj0utNs9K+NvY0456e7cN3Ff8TQ==",
+      "version": "1.2.13",
+      "resolved": "https://registry.npmjs.org/@ai-sdk/google/-/google-1.2.13.tgz",
+      "integrity": "sha512-nnHDzbX1Zst28AjP3718xSWsEqx++qmFuqmnDc2Htelc02HyO6WkWOXMH+YVK3W8zdIyZEKpHL9KKlql7pa10A==",
       "dependencies": {
-        "@ai-sdk/provider": "1.1.0",
-        "@ai-sdk/provider-utils": "2.2.4"
+        "@ai-sdk/provider": "1.1.3",
+        "@ai-sdk/provider-utils": "2.2.7"
       },
       "engines": {
         "node": ">=18"
@@ -94,12 +94,12 @@
       }
     },
     "node_modules/@ai-sdk/openai": {
-      "version": "1.3.7",
-      "resolved": "https://registry.npmjs.org/@ai-sdk/openai/-/openai-1.3.7.tgz",
-      "integrity": "sha512-JjjEulfMgH5kGyCWKdyhxNLSIs2qBkUr6LtzNJtYlV23e5RbOHA5qgbbxn6IbGxeZs4xpPhpGmOnUVzh7GZwcg==",
+      "version": "1.3.20",
+      "resolved": "https://registry.npmjs.org/@ai-sdk/openai/-/openai-1.3.20.tgz",
+      "integrity": "sha512-/DflUy7ROG9k6n6YTXMBFPbujBKnbGY58f3CwvicLvDar9nDAloVnUWd3LUoOxpSVnX8vtQ7ngxF52SLWO6RwQ==",
       "dependencies": {
-        "@ai-sdk/provider": "1.1.0",
-        "@ai-sdk/provider-utils": "2.2.4"
+        "@ai-sdk/provider": "1.1.3",
+        "@ai-sdk/provider-utils": "2.2.7"
       },
       "engines": {
         "node": ">=18"
@@ -109,12 +109,12 @@
       }
     },
     "node_modules/@ai-sdk/openai-compatible": {
-      "version": "0.2.6",
-      "resolved": "https://registry.npmjs.org/@ai-sdk/openai-compatible/-/openai-compatible-0.2.6.tgz",
-      "integrity": "sha512-UOPEWIqG3l5K9O+p7gqiCOWzx66JtmG9v9Mab+S4E7WE34EN6u1QS1pX+RDlRDhZ0/8gNJif0r4Xlc+Ti03yNA==",
+      "version": "0.2.13",
+      "resolved": "https://registry.npmjs.org/@ai-sdk/openai-compatible/-/openai-compatible-0.2.13.tgz",
+      "integrity": "sha512-tB+lL8Z3j0qDod/mvxwjrPhbLUHp/aQW+NvMoJaqeTtP+Vmv5qR800pncGczxn5WN0pllQm+7aIRDnm69XeSbg==",
       "dependencies": {
-        "@ai-sdk/provider": "1.1.0",
-        "@ai-sdk/provider-utils": "2.2.4"
+        "@ai-sdk/provider": "1.1.3",
+        "@ai-sdk/provider-utils": "2.2.7"
       },
       "engines": {
         "node": ">=18"
@@ -124,9 +124,9 @@
       }
     },
     "node_modules/@ai-sdk/provider": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@ai-sdk/provider/-/provider-1.1.0.tgz",
-      "integrity": "sha512-0M+qjp+clUD0R1E5eWQFhxEvWLNaOtGQRUaBn8CUABnSKredagq92hUS9VjOzGsTm37xLfpaxl97AVtbeOsHew==",
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@ai-sdk/provider/-/provider-1.1.3.tgz",
+      "integrity": "sha512-qZMxYJ0qqX/RfnuIaab+zp8UAeJn/ygXXAffR5I4N0n1IrvA6qBsjc8hXLmBiMV2zoXlifkacF7sEFnYnjBcqg==",
       "dependencies": {
         "json-schema": "^0.4.0"
       },
@@ -135,11 +135,11 @@
       }
     },
     "node_modules/@ai-sdk/provider-utils": {
-      "version": "2.2.4",
-      "resolved": "https://registry.npmjs.org/@ai-sdk/provider-utils/-/provider-utils-2.2.4.tgz",
-      "integrity": "sha512-13sEGBxB6kgaMPGOgCLYibF6r8iv8mgjhuToFrOTU09bBxbFQd8ZoARarCfJN6VomCUbUvMKwjTBLb1vQnN+WA==",
+      "version": "2.2.7",
+      "resolved": "https://registry.npmjs.org/@ai-sdk/provider-utils/-/provider-utils-2.2.7.tgz",
+      "integrity": "sha512-kM0xS3GWg3aMChh9zfeM+80vEZfXzR3JEUBdycZLtbRZ2TRT8xOj3WodGHPb06sUK5yD7pAXC/P7ctsi2fvUGQ==",
       "dependencies": {
-        "@ai-sdk/provider": "1.1.0",
+        "@ai-sdk/provider": "1.1.3",
         "nanoid": "^3.3.8",
         "secure-json-parse": "^2.7.0"
       },
@@ -151,12 +151,12 @@
       }
     },
     "node_modules/@ai-sdk/react": {
-      "version": "1.2.6",
-      "resolved": "https://registry.npmjs.org/@ai-sdk/react/-/react-1.2.6.tgz",
-      "integrity": "sha512-5BFChNbcYtcY9MBStcDev7WZRHf0NpTrk8yfSoedWctB3jfWkFd1HECBvdc8w3mUQshF2MumLHtAhRO7IFtGGQ==",
+      "version": "1.2.9",
+      "resolved": "https://registry.npmjs.org/@ai-sdk/react/-/react-1.2.9.tgz",
+      "integrity": "sha512-/VYm8xifyngaqFDLXACk/1czDRCefNCdALUyp+kIX6DUIYUWTM93ISoZ+qJ8+3E+FiJAKBQz61o8lIIl+vYtzg==",
       "dependencies": {
-        "@ai-sdk/provider-utils": "2.2.4",
-        "@ai-sdk/ui-utils": "1.2.5",
+        "@ai-sdk/provider-utils": "2.2.7",
+        "@ai-sdk/ui-utils": "1.2.8",
         "swr": "^2.2.5",
         "throttleit": "2.1.0"
       },
@@ -174,13 +174,13 @@
       }
     },
     "node_modules/@ai-sdk/togetherai": {
-      "version": "0.2.6",
-      "resolved": "https://registry.npmjs.org/@ai-sdk/togetherai/-/togetherai-0.2.6.tgz",
-      "integrity": "sha512-AV3CABMKlIniCe5owr6H/kSirfk3Y/MeBAetrNJxRDhmrxa5VXzbWeMxS5xeS8crqFXWJPPLcwPiwOuFtpQMrA==",
+      "version": "0.2.13",
+      "resolved": "https://registry.npmjs.org/@ai-sdk/togetherai/-/togetherai-0.2.13.tgz",
+      "integrity": "sha512-DmcH+5aeLPpVCQYZgmM1nnKNMkqvJR8lWStFze5+PbKJsUHGqli8zdGEEOJ7iGWGOFONo7EpdW/tJeGP1xNXdw==",
       "dependencies": {
-        "@ai-sdk/openai-compatible": "0.2.6",
-        "@ai-sdk/provider": "1.1.0",
-        "@ai-sdk/provider-utils": "2.2.4"
+        "@ai-sdk/openai-compatible": "0.2.13",
+        "@ai-sdk/provider": "1.1.3",
+        "@ai-sdk/provider-utils": "2.2.7"
       },
       "engines": {
         "node": ">=18"
@@ -190,12 +190,12 @@
       }
     },
     "node_modules/@ai-sdk/ui-utils": {
-      "version": "1.2.5",
-      "resolved": "https://registry.npmjs.org/@ai-sdk/ui-utils/-/ui-utils-1.2.5.tgz",
-      "integrity": "sha512-XDgqnJcaCkDez7qolvk+PDbs/ceJvgkNkxkOlc9uDWqxfDJxtvCZ+14MP/1qr4IBwGIgKVHzMDYDXvqVhSWLzg==",
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@ai-sdk/ui-utils/-/ui-utils-1.2.8.tgz",
+      "integrity": "sha512-nls/IJCY+ks3Uj6G/agNhXqQeLVqhNfoJbuNgCny+nX2veY5ADB91EcZUqVeQ/ionul2SeUswPY6Q/DxteY29Q==",
       "dependencies": {
-        "@ai-sdk/provider": "1.1.0",
-        "@ai-sdk/provider-utils": "2.2.4",
+        "@ai-sdk/provider": "1.1.3",
+        "@ai-sdk/provider-utils": "2.2.7",
         "zod-to-json-schema": "^3.24.1"
       },
       "engines": {
@@ -231,9 +231,9 @@
       }
     },
     "node_modules/@anthropic-ai/sdk": {
-      "version": "0.39.0",
-      "resolved": "https://registry.npmjs.org/@anthropic-ai/sdk/-/sdk-0.39.0.tgz",
-      "integrity": "sha512-eMyDIPRZbt1CCLErRCi3exlAvNkBtRe+kW5vvJyef93PmNr/clstYgHhtvmkxN82nlKgzyGPCyGxrm0JQ1ZIdg==",
+      "version": "0.40.0",
+      "resolved": "https://registry.npmjs.org/@anthropic-ai/sdk/-/sdk-0.40.0.tgz",
+      "integrity": "sha512-NkIgtZxa4nWBzXtDuYe6Wumu1+cgEuEQtol8b1bVSjtS7Dvqex6iNdxaddV8PkRC8Z8mhbNw2m7j+9AD9uRRKw==",
       "dependencies": {
         "@types/node": "^18.11.18",
         "@types/node-fetch": "^2.6.4",
@@ -2926,14 +2926,14 @@
       }
     },
     "node_modules/ai": {
-      "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/ai/-/ai-4.3.1.tgz",
-      "integrity": "sha512-6RSRE0x0FAUZxWpLOq6yrh1IFXakvvJgHs8xPHtt8VmsTqhgjP5GClguaGs+KCpVbVfdygwgji7YJjOwq80suQ==",
-      "dependencies": {
-        "@ai-sdk/provider": "1.1.0",
-        "@ai-sdk/provider-utils": "2.2.4",
-        "@ai-sdk/react": "1.2.6",
-        "@ai-sdk/ui-utils": "1.2.5",
+      "version": "4.3.10",
+      "resolved": "https://registry.npmjs.org/ai/-/ai-4.3.10.tgz",
+      "integrity": "sha512-jw+ahNu+T4SHj9gtraIKtYhanJI6gj2IZ5BFcfEHgoyQVMln5a5beGjzl/nQSX6FxyLqJ/UBpClRa279EEKK/Q==",
+      "dependencies": {
+        "@ai-sdk/provider": "1.1.3",
+        "@ai-sdk/provider-utils": "2.2.7",
+        "@ai-sdk/react": "1.2.9",
+        "@ai-sdk/ui-utils": "1.2.8",
         "@opentelemetry/api": "1.9.0",
         "jsondiffpatch": "0.6.0"
       },
diff --git a/package.json b/package.json
index b6cc7fe..e8783c0 100644
--- a/package.json
+++ b/package.json
@@ -16,13 +16,13 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@ai-sdk/fireworks": "^0.2.5",
-    "@ai-sdk/google": "^1.2.5",
-    "@ai-sdk/openai": "^1.3.6",
-    "@ai-sdk/togetherai": "^0.2.5",
-    "@anthropic-ai/sdk": "^0.39.0",
+    "@ai-sdk/fireworks": "^0.2.13",
+    "@ai-sdk/google": "^1.2.13",
+    "@ai-sdk/openai": "^1.3.20",
+    "@ai-sdk/togetherai": "^0.2.13",
+    "@anthropic-ai/sdk": "^0.40.0",
     "@openrouter/ai-sdk-provider": "^0.4.5",
-    "ai": "^4.2.10",
+    "ai": "^4.3.10",
     "axios": "^1.8.4",
     "dotenv": "^16.4.7",
     "electron-builder": "26.0.12",
diff --git a/src/App.tsx b/src/App.tsx
index 15404fe..8532843 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,9 +1,13 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { ChatPage } from './components/pages/ChatPage';
+import { ImageGenerationPage } from './components/pages/ImageGenerationPage';
+import { TranslationPage } from './components/pages/TranslationPage';
 import MainLayout from './components/layout/MainLayout';
 import DatabaseInitializer from './components/core/DatabaseInitializer';
 
 function App() {
+  const [activePage, setActivePage] = useState('chat');
+  const [showSettings, setShowSettings] = useState(false);
 
   // Handle link clicks
   useEffect(() => {
@@ -22,11 +26,16 @@ function App() {
     };
   }, []);
   
+  const handlePageChange = (page: string) => {
+    setActivePage(page);
+  };
   
   return (
     <DatabaseInitializer>
-      <MainLayout>
-        <ChatPage/>
+      <MainLayout activePage={activePage} onChangePage={handlePageChange} showSettings={showSettings} setShowSettings={setShowSettings}>
+        {activePage === 'chat' && <ChatPage />}
+        {activePage === 'image' && <ImageGenerationPage />}
+        {activePage === 'translation' && <TranslationPage />}
       </MainLayout>
     </DatabaseInitializer>
   );
diff --git a/src/components/chat/ChatMessageArea.tsx b/src/components/chat/ChatMessageArea.tsx
index f090cb0..043d407 100644
--- a/src/components/chat/ChatMessageArea.tsx
+++ b/src/components/chat/ChatMessageArea.tsx
@@ -12,6 +12,7 @@ import ProviderIcon from '../ui/ProviderIcon';
 import { useTranslation } from '../../hooks/useTranslation';
 import FileUploadButton from './FileUploadButton';
 import FileAttachmentDisplay from './FileAttachmentDisplay';
+import ImageGenerationButton from './ImageGenerationButton';
 
 interface ChatMessageAreaProps {
   activeConversation: Conversation | null;
@@ -319,7 +320,7 @@ export const ChatMessageArea: React.FC<ChatMessageAreaProps> = ({
   :<></>;
 
   return (
-    <div className="flex flex-col w-full h-full max-w-full">
+    <div className="flex flex-col w-full h-full">
       {/* Messages area */}
       <div className="flex-1 p-4 space-y-4 overflow-y-auto">
         {getMessagesList().map((message) => {
@@ -527,11 +528,16 @@ export const ChatMessageArea: React.FC<ChatMessageAreaProps> = ({
           <div className='flex flex-row items-center h-full gap-2'>
             {/* File upload button */}
             {onSendMessageWithFiles && (
-                  <FileUploadButton 
-                    onFilesSelected={handleFilesSelected}
-                    disabled={isLoading || isCurrentlyStreaming}
-                  />
-                )}
+              <FileUploadButton
+                onFilesSelected={handleFilesSelected}
+                disabled={isLoading || isCurrentlyStreaming}
+              />
+            )}
+            
+            {/* Image generation button */}
+            <ImageGenerationButton 
+              disabled={isLoading || isCurrentlyStreaming}
+            />
           </div>
 
           {/* Web search element */}
diff --git a/src/components/chat/ImageGenerationButton.tsx b/src/components/chat/ImageGenerationButton.tsx
new file mode 100644
index 0000000..276f562
--- /dev/null
+++ b/src/components/chat/ImageGenerationButton.tsx
@@ -0,0 +1,158 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { Image } from 'lucide-react';
+import { SettingsService } from '../../services/settings-service';
+import { AIServiceCapability } from '../../types/capabilities';
+import ProviderIcon from '../ui/ProviderIcon';
+import { useTranslation } from '../../hooks/useTranslation';
+
+interface ImageGenerationButtonProps {
+  onImageGenerate?: (prompt: string, provider: string, model: string) => void;
+  disabled?: boolean;
+}
+
+interface ProviderModel {
+  providerName: string;
+  modelId: string;
+  modelName: string;
+}
+
+const ImageGenerationButton: React.FC<ImageGenerationButtonProps> = ({ 
+  disabled = false 
+}) => {
+  const { t } = useTranslation();
+  const [isPopupOpen, setIsPopupOpen] = useState(false);
+  const [providers, setProviders] = useState<ProviderModel[]>([]);
+  const [selectedProvider, setSelectedProvider] = useState<string | null>(null);
+  const [selectedModel, setSelectedModel] = useState<string | null>(null);
+  const popupRef = useRef<HTMLDivElement>(null);
+  const buttonRef = useRef<HTMLButtonElement>(null);
+
+  // Load available image generation providers and models
+  useEffect(() => {
+    const loadProviders = () => {
+      const settingsService = SettingsService.getInstance();
+      const availableProviders: ProviderModel[] = [];
+
+      // Get all providers from settings
+      const settings = settingsService.getSettings();
+      const providerIds = Object.keys(settings.providers);
+      
+      for (const providerId of providerIds) {
+        // Get the provider's settings
+        const providerSettings = settingsService.getProviderSettings(providerId);
+        
+        if (providerSettings.models) {
+          // For now, just assume all models have image generation capability
+          // This would need to be updated once proper capability detection is implemented
+          for (const model of providerSettings.models) {
+            // Check if model has image generation capability
+            if (model.modelCapabilities?.includes(AIServiceCapability.ImageGeneration)) {
+              availableProviders.push({
+                providerName: providerId,
+                modelId: model.modelId,
+                modelName: model.modelName
+              });
+            }
+          }
+        }
+      }
+
+      setProviders(availableProviders);
+      
+      // Set default selected provider and model if available
+      if (availableProviders.length > 0) {
+        setSelectedProvider(availableProviders[0].providerName);
+        setSelectedModel(availableProviders[0].modelId);
+      }
+    };
+
+    loadProviders();
+  }, []);
+
+  // Handle click outside to close popup
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        popupRef.current && 
+        !popupRef.current.contains(event.target as Node) &&
+        buttonRef.current && 
+        !buttonRef.current.contains(event.target as Node)
+      ) {
+        setIsPopupOpen(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+
+  const togglePopup = () => {
+    setIsPopupOpen(!isPopupOpen);
+  };
+
+  const handleProviderModelSelect = (providerName: string, modelId: string) => {
+    setSelectedProvider(providerName);
+    setSelectedModel(modelId);
+    setIsPopupOpen(false);
+  };
+
+  const isButtonEnabled = !disabled && providers.length > 0;
+
+  return (
+    <div className="relative">
+      <button
+        ref={buttonRef}
+        type="button"
+        onClick={togglePopup}
+        disabled={!isButtonEnabled}
+        className="flex items-center justify-center w-8 h-8 rounded-full image-generation-button focus:outline-none"
+        title={isButtonEnabled ? t('chat.generateImage') : t('chat.imageGenerationNotAvailable')}
+      >
+        <Image size={20} />
+      </button>
+      
+      {isPopupOpen && (
+        <div 
+          ref={popupRef}
+          className="absolute z-10 mt-2 image-generation-popup"
+          style={{ bottom: '100%', left: 0, minWidth: '220px' }}
+        >
+          <div className="p-2">
+            <div className="mb-2 text-sm font-medium text-gray-700">
+              {t('chat.selectImageProvider')}
+            </div>
+            <div className="overflow-y-auto max-h-60">
+              {providers.map((provider) => (
+                <div
+                  key={`${provider.providerName}-${provider.modelId}`}
+                  className={`flex items-center px-3 py-2 cursor-pointer rounded-md ${
+                    selectedProvider === provider.providerName && selectedModel === provider.modelId
+                      ? 'image-generation-provider-selected'
+                      : 'image-generation-provider-item'
+                  }`}
+                  onClick={() => handleProviderModelSelect(provider.providerName, provider.modelId)}
+                >
+                  <ProviderIcon providerName={provider.providerName} className="w-5 h-5 mr-2" />
+                  <div className="flex flex-col">
+                    <span className="text-sm font-medium">{provider.providerName}</span>
+                    <span className="text-xs text-gray-500">{provider.modelName}</span>
+                  </div>
+                </div>
+              ))}
+              
+              {providers.length === 0 && (
+                <div className="px-3 py-2 text-sm text-gray-500">
+                  {t('chat.noImageProvidersAvailable')}
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ImageGenerationButton; 
\ No newline at end of file
diff --git a/src/components/layout/MainLayout.tsx b/src/components/layout/MainLayout.tsx
index 1d82268..1ea8f53 100644
--- a/src/components/layout/MainLayout.tsx
+++ b/src/components/layout/MainLayout.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode, useState } from 'react';
+import React, { ReactNode } from 'react';
 import Sidebar from './Sidebar';
 import SettingsPage from '../pages/SettingsPage';
 import TopBar from './TopBar';
@@ -6,32 +6,35 @@ import { SettingsService } from '../../services/settings-service';
 
 interface MainLayoutProps {
   children: ReactNode;
+  activePage: string;
+  onChangePage: (page: string) => void;
+  showSettings: boolean;
+  setShowSettings: (showSettings: boolean) => void;
 }
 
-const MainLayout: React.FC<MainLayoutProps> = ({ children }) => {
-  const [activePage, setActivePage] = useState('chat');
-  const [showSettings, setShowSettings] = useState(false);
+const MainLayout: React.FC<MainLayoutProps> = ({ 
+  children, 
+  activePage, 
+  onChangePage, 
+  showSettings, 
+  setShowSettings
+}) => {
+  
+  // Handle settings dialog
+  const handleOpenSettingsDialog = () => {
+    setShowSettings(true);
+  };
 
   // Handle page changes
   const handlePageChange = (page: string) => {
-    if(activePage === 'settings' && page !== activePage){
-      // Save settings
-    }
-
     if (page === 'settings') {
       setShowSettings(true);
-      setActivePage('settings');
     } else {
       setShowSettings(false);
-      setActivePage(page);
+      onChangePage(page);
     }
   };
 
-  // Handle page changes
-  const handleOpenSettingsDialog = () => {
-    handlePageChange('settings');
-  };
-
   // Handle selecting a model
   const handleSelectModel = (modelId: string, provider: string) => {
     SettingsService.getInstance().setSelectedModel(modelId);
@@ -46,17 +49,19 @@ const MainLayout: React.FC<MainLayoutProps> = ({ children }) => {
         onOpenSettingsDialog={handleOpenSettingsDialog}
       />
 
-      <div className="flex flex-1 w-full overflow-hidden">
+      <div className="flex w-full h-full overflow-hidden">
         <Sidebar 
           activePage={activePage}
           onChangePage={handlePageChange}
+          showSettings={showSettings}
+          setShowSettings={setShowSettings}
         />
 
-        <div className="flex flex-col flex-1 w-[calc(100%-68px)] bg-main-background-color">
+        <div className="flex flex-col h-full w-[calc(100%-68px)] bg-main-background-color">
           {/* Main content */}
 
-          <div className='relative flex flex-col flex-1 w-full overflow-hidden major-area-border major-area-bg-color'>
-            <div className="flex-1 w-full overflow-auto">
+          <div className='relative flex flex-col w-full h-full overflow-hidden major-area-border major-area-bg-color'>
+            <div className="w-full h-full overflow-auto">
               {children}
             </div>
             
diff --git a/src/components/layout/Sidebar.tsx b/src/components/layout/Sidebar.tsx
index 76e5e8b..a77016c 100644
--- a/src/components/layout/Sidebar.tsx
+++ b/src/components/layout/Sidebar.tsx
@@ -1,20 +1,45 @@
 import React from 'react';
-import { MessageSquare, Settings } from 'lucide-react';
+import { MessageSquare, Settings, Image, Languages } from 'lucide-react';
 
 interface SidebarProps {
   activePage: string;
   onChangePage: (page: string) => void;
+  showSettings: boolean;
+  setShowSettings: (showSettings: boolean) => void;
 }
 
-export const Sidebar: React.FC<SidebarProps> = ({ activePage, onChangePage }) => {
+export const Sidebar: React.FC<SidebarProps> = ({
+  activePage, 
+  onChangePage, 
+  showSettings, 
+  setShowSettings
+}) => {
+
+  const getActivePage = () => {
+    if(showSettings){
+      return 'settings';
+    }
+    else if(activePage === 'chat'){
+      return 'chat';
+    }
+    else if(activePage === 'image'){
+      return 'image';
+    }
+    else if(activePage === 'translation'){
+      return 'translation';
+    }
+
+    return '';
+  }
+
   return (
     <div className="w-[68px] h-full bg-main-background-color flex flex-col">
  
       {/* Navigation buttons */}
-      <div className="flex flex-col items-center flex-1 pt-2">
+      <div className="flex flex-col items-center flex-1 gap-1 pt-2">
         <button 
           className={`w-12 h-12 rounded-lg flex items-center justify-center transition-all duration-200 ${
-            activePage === 'chat' 
+            getActivePage() === 'chat' 
               ? 'navigation-item-selected navigation-item-text' 
               : 'navigation-item navigation-item-text'
           }`}
@@ -24,18 +49,40 @@ export const Sidebar: React.FC<SidebarProps> = ({ activePage, onChangePage }) =>
           <MessageSquare size={22} />
         </button>
         
-        {/* Add more navigation buttons here as needed */}
+        <button 
+          className={`w-12 h-12 rounded-lg flex items-center justify-center transition-all duration-200 ${
+            getActivePage() === 'image' 
+              ? 'navigation-item-selected navigation-item-text' 
+              : 'navigation-item navigation-item-text'
+          }`}
+          onClick={() => onChangePage('image')}
+          aria-label="Image Generation"
+        >
+          <Image size={22} />
+        </button>
+        
+        <button 
+          className={`w-12 h-12 rounded-lg flex items-center justify-center transition-all duration-200 ${
+            getActivePage() === 'translation' 
+              ? 'navigation-item-selected navigation-item-text' 
+              : 'navigation-item navigation-item-text'
+          }`}
+          onClick={() => onChangePage('translation')}
+          aria-label="Translation"
+        >
+          <Languages size={22} />
+        </button>
       </div>
 
       {/* Settings button at bottom */}
       <div className="flex justify-center mb-4">
         <button 
           className={`flex items-center justify-center w-12 h-12 rounded-lg transition-all duration-200 ${
-            activePage === 'settings' 
+            getActivePage() === 'settings' 
               ? 'navigation-item-selected navigation-item-text' 
               : 'navigation-item navigation-item-text'
           }`}
-          onClick={() => onChangePage('settings')}
+          onClick={() => setShowSettings(true)}
           aria-label="Settings"
         >
           <Settings size={22} />
diff --git a/src/components/pages/ChatPage.tsx b/src/components/pages/ChatPage.tsx
index 2dd278d..15a4151 100644
--- a/src/components/pages/ChatPage.tsx
+++ b/src/components/pages/ChatPage.tsx
@@ -372,7 +372,7 @@ export const ChatPage = () => {
     <div className="flex flex-col w-full h-full bg-white">
 
       {/* Main content with chat history and messages */}
-      <div className="flex flex-1 w-full overflow-hidden">
+      <div className="flex w-full h-full overflow-hidden">
         <ChatHistoryList 
           conversations={conversations}
           folders={folders}
@@ -387,7 +387,7 @@ export const ChatPage = () => {
           onMoveConversation={handleMoveConversation}
         />
         
-        <div className="flex flex-col flex-1 w-full min-w-0 overflow-hidden">
+        <div className="flex flex-col w-full h-full overflow-hidden">
           {isApiKeyMissing && (
             <div className="p-2 text-sm text-center text-yellow-800 bg-yellow-100">
               Please set your API key for the selected provider in the settings.
diff --git a/src/components/pages/ImageGenerationPage.tsx b/src/components/pages/ImageGenerationPage.tsx
new file mode 100644
index 0000000..91058dd
--- /dev/null
+++ b/src/components/pages/ImageGenerationPage.tsx
@@ -0,0 +1,354 @@
+import { useState, useEffect } from "react";
+import {
+  SettingsService,
+  SETTINGS_CHANGE_EVENT,
+} from "../../services/settings-service";
+import { ChevronDown, RefreshCw } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import { AIService } from "../../services/ai-service";
+import { OPENAI_PROVIDER_NAME } from "../../services/providers/openai-service";
+
+export const ImageGenerationPage = () => {
+  const { t } = useTranslation();
+  const [prompt, setPrompt] = useState("");
+  const [isGenerating, setIsGenerating] = useState(false);
+  const [imageResult, setImageResult] = useState<string | null>(null);
+  const [error, setError] = useState<Error | null>(null);
+  const [isApiKeyMissing, setIsApiKeyMissing] = useState(true);
+  const [aspectRatio, setAspectRatio] = useState("1:1");
+  const [imageCount, setImageCount] = useState(1);
+  const [randomSeed, setRandomSeed] = useState(
+    Math.floor(Math.random() * 1000000).toString()
+  );
+
+  // Check if API key is available
+  useEffect(() => {
+    setIsApiKeyMissing(!SettingsService.getInstance().getApiKey());
+
+    const handleSettingsChange = () => {
+      setIsApiKeyMissing(!SettingsService.getInstance().getApiKey());
+    };
+
+    window.addEventListener(SETTINGS_CHANGE_EVENT, handleSettingsChange);
+
+    return () => {
+      window.removeEventListener(SETTINGS_CHANGE_EVENT, handleSettingsChange);
+    };
+  }, []);
+
+  // Handle generating an image using OpenAI's DALL-E 3
+  const handleGenerateImage = async () => {
+    if (!prompt.trim()) return;
+
+    setIsGenerating(true);
+    setError(null);
+
+    try {
+      // Get the OpenAI service from AIService
+      const openaiService = AIService.getInstance().getProvider(OPENAI_PROVIDER_NAME);
+      
+      if (!openaiService) {
+        throw new Error("OpenAI service not available");
+      }
+
+      // Map aspect ratio to size dimensions
+      const sizeMap: Record<string, `${number}x${number}`> = {
+        "1:1": "1024x1024",
+        "1:2": "512x1024",
+        "3:2": "1024x768",
+        "3:4": "768x1024",
+        "16:9": "1792x1024",
+        "9:16": "1024x1792"
+      };
+      
+      // Generate the image
+      const images = await openaiService.getImageGeneration(prompt, {
+        size: sizeMap[aspectRatio] || "1024x1024",
+        aspectRatio: aspectRatio as `${number}:${number}`,
+        style: "vivid"
+      });
+      
+      // Set the result image
+      if (images && images.length > 0) {
+        // Check if the image is already a full data URL
+        const base64Data = images[0] as string;
+        if (base64Data.startsWith('data:image')) {
+          setImageResult(base64Data);
+        } else {
+          // If it's just a base64 string without the data URI prefix, add it
+          setImageResult(`data:image/png;base64,${base64Data}`);
+        }
+      } else {
+        throw new Error("No images generated");
+      }
+    } catch (err) {
+      setError(err as Error);
+    } finally {
+      setIsGenerating(false);
+    }
+  };
+
+  // Generate new random seed
+  const generateNewSeed = () => {
+    setRandomSeed(Math.floor(Math.random() * 1000000).toString());
+  };
+
+  return (
+    <div className="flex flex-col w-full h-full bg-white">
+      {isApiKeyMissing && (
+        <div className="p-2 text-sm text-center text-yellow-800 bg-yellow-100">
+          {t("imageGeneration.apiKeyMissing")}
+        </div>
+      )}
+
+      <div className="flex flex-row h-full">
+        {/* Left side - Controls */}
+        <div className="flex-1 p-6 overflow-y-auto frame-right-border">
+          <h1 className="mb-6 text-2xl font-semibold">
+            {t("imageGeneration.title")}
+          </h1>
+
+          {/* Prompt input */}
+          <div className="mb-6">
+            <label className="block mb-2 text-sm font-medium text-gray-700">
+              {t("imageGeneration.prompt")}
+            </label>
+            <textarea
+              value={prompt}
+              onChange={(e) => setPrompt(e.target.value)}
+              placeholder={t("imageGeneration.promptPlaceholder")}
+              className="w-full p-3 input-box min-h-14"
+              rows={4}
+            />
+          </div>
+
+          {/* Generation button */}
+          <div className="flex justify-center mb-6">
+            <button
+              onClick={handleGenerateImage}
+              disabled={isGenerating || !prompt.trim() || isApiKeyMissing}
+              className="px-8 py-2.5 text-white confirm-btn"
+            >
+              {isGenerating
+                ? t("imageGeneration.generating")
+                : t("imageGeneration.generateButton")}
+            </button>
+          </div>
+
+          <div className="flex items-center mb-4">
+            <h2 className="text-xl font-medium">
+              {t("imageGeneration.results")}
+            </h2>
+          </div>
+
+          {/* Error message */}
+          {error && (
+            <div className="p-3 mb-4 text-red-700 bg-red-100 rounded-lg">
+              {t("common.error")}: {error.message}
+            </div>
+          )}
+
+          {/* Loading indicator */}
+          {isGenerating && (
+            <div className="flex items-center justify-center h-64 rounded-lg bg-gray-50">
+              <div className="flex flex-col items-center">
+                <div className="w-10 h-10 border-4 rounded-full border-primary-300 border-t-primary-600 animate-spin"></div>
+                <p className="mt-4 text-gray-600">
+                  {t("imageGeneration.generating")}
+                </p>
+              </div>
+            </div>
+          )}
+
+          {/* Results display */}
+          {imageResult && !isGenerating && (
+            <div className="grid grid-cols-1 gap-4">
+              <div className="overflow-hidden border rounded-lg image-result-area">
+                <img
+                  src={imageResult}
+                  alt="Generated from AI"
+                  className="object-contain w-full"
+                />
+              </div>
+            </div>
+          )}
+
+          {/* Placeholder when no results */}
+          {!imageResult && !isGenerating && (
+            <div className="flex items-center justify-center h-64 rounded-lg image-generation-result-placeholder">
+              <div className="text-center">
+                <p className="text-gray-500">
+                  {t("imageGeneration.placeholderText")}
+                </p>
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Right side - Results */}
+        <div className="w-[420px] h-full p-6 overflow-y-auto">
+          {/* Provider selection */}
+          <div className="mb-6">
+            <label className="block mb-2 text-sm font-medium text-gray-700">
+              {t("imageGeneration.provider")}
+            </label>
+            <div className="relative">
+              <button
+                className="flex items-center justify-between w-full p-3 text-left input-box"
+                disabled={true}
+              >
+                <span>OpenAI</span>
+                <ChevronDown size={18} className="text-gray-500" />
+              </button>
+            </div>
+          </div>
+
+          {/* Model selection */}
+          <div className="mb-6">
+            <label className="block mb-2 text-sm font-medium text-gray-700">
+              {t("imageGeneration.model")}
+            </label>
+            <div className="relative">
+              <button
+                className="flex items-center justify-between w-full p-3 text-left input-box"
+                disabled={true}
+              >
+                <span>DALL-E 3</span>
+                <ChevronDown size={18} className="text-gray-500" />
+              </button>
+            </div>
+          </div>
+
+          {/* Aspect ratio selection */}
+          <div className="mb-6">
+            <label className="block mb-2 text-sm font-medium text-gray-700">
+              {t("imageGeneration.imageSize")}
+            </label>
+            <div className="grid grid-cols-6 gap-1">
+              <button
+                onClick={() => setAspectRatio("1:1")}
+                className={`p-2 text-center border rounded-lg aspect-ratio-button ${
+                  aspectRatio === "1:1" ? "active" : ""
+                }`}
+              >
+                <div className="flex justify-center mb-1">
+                  <div className="w-6 h-6 border border-gray-500 rounded-sm"></div>
+                </div>
+                <span className="text-xs">1:1</span>
+              </button>
+              <button
+                onClick={() => setAspectRatio("1:2")}
+                className={`p-2 text-center border rounded-lg aspect-ratio-button ${
+                  aspectRatio === "1:2" ? "active" : ""
+                }`}
+              >
+                <div className="flex justify-center mb-1">
+                  <div className="w-4 h-6 border border-gray-500 rounded-sm"></div>
+                </div>
+                <span className="text-xs">1:2</span>
+              </button>
+              <button
+                onClick={() => setAspectRatio("3:2")}
+                className={`p-2 text-center border rounded-lg aspect-ratio-button ${
+                  aspectRatio === "3:2" ? "active" : ""
+                }`}
+              >
+                <div className="flex justify-center mb-1">
+                  <div className="w-6 h-4 border border-gray-500 rounded-sm"></div>
+                </div>
+                <span className="text-xs">3:2</span>
+              </button>
+              <button
+                onClick={() => setAspectRatio("3:4")}
+                className={`p-2 text-center border rounded-lg aspect-ratio-button ${
+                  aspectRatio === "3:4" ? "active" : ""
+                }`}
+              >
+                <div className="flex justify-center mb-1">
+                  <div className="w-[1rem] h-[1.5rem] border border-gray-500 rounded-sm"></div>
+                </div>
+                <span className="text-xs">3:4</span>
+              </button>
+              <button
+                onClick={() => setAspectRatio("16:9")}
+                className={`p-2 text-center border rounded-lg aspect-ratio-button ${
+                  aspectRatio === "16:9" ? "active" : ""
+                }`}
+              >
+                <div className="flex justify-center mb-1">
+                  <div className="w-6 h-3.5 border border-gray-500 rounded-sm"></div>
+                </div>
+                <span className="text-xs">16:9</span>
+              </button>
+              <button
+                onClick={() => setAspectRatio("9:16")}
+                className={`p-2 text-center border rounded-lg aspect-ratio-button ${
+                  aspectRatio === "9:16" ? "active" : ""
+                }`}
+              >
+                <div className="flex justify-center mb-1">
+                  <div className="w-3.5 h-6 border border-gray-500 rounded-sm"></div>
+                </div>
+                <span className="text-xs">9:16</span>
+              </button>
+            </div>
+          </div>
+
+          {/* Image count */}
+          <div className="mb-6">
+            <label className="flex items-center block mb-2 text-sm font-medium text-gray-700">
+              {t("imageGeneration.generationCount")}
+              <div
+                className="flex items-center justify-center w-4 h-4 ml-1 text-xs text-gray-500 bg-gray-200 rounded-full cursor-help"
+                title={t("imageGeneration.generationCount")}
+              >
+                ?
+              </div>
+            </label>
+            <input
+              type="number"
+              value={imageCount}
+              onChange={(e) => setImageCount(parseInt(e.target.value) || 1)}
+              min="1"
+              max="4"
+              className="w-full p-3 input-box"
+              disabled={true}
+            />
+          </div>
+
+          {/* Random seed */}
+          <div className="mb-6">
+            <label className="flex items-center block mb-2 text-sm font-medium text-gray-700">
+              {t("imageGeneration.randomSeed")}
+              <div
+                className="flex items-center justify-center w-4 h-4 ml-1 text-xs text-gray-500 bg-gray-200 rounded-full cursor-help"
+                title={t("imageGeneration.seedHelp")}
+              >
+                ?
+              </div>
+            </label>
+            <div className="flex">
+              <input
+                type="text"
+                value={randomSeed}
+                onChange={(e) => setRandomSeed(e.target.value)}
+                className="flex-grow p-3 mr-2 input-box"
+                disabled={true}
+              />
+              <button
+                onClick={generateNewSeed}
+                className="p-2 rounded-lg image-generation-refresh-button"
+                title={t("imageGeneration.randomSeed")}
+                disabled={true}
+              >
+                <RefreshCw size={20} />
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ImageGenerationPage;
diff --git a/src/components/pages/TranslationPage.tsx b/src/components/pages/TranslationPage.tsx
new file mode 100644
index 0000000..ecd249c
--- /dev/null
+++ b/src/components/pages/TranslationPage.tsx
@@ -0,0 +1,299 @@
+import React, { useState, useEffect } from 'react';
+import { SettingsService, SETTINGS_CHANGE_EVENT } from '../../services/settings-service';
+import { Orbit, Languages, ArrowRight } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { v4 as uuidv4 } from 'uuid';
+import { Message, MessageRole } from '../../types/chat';
+import { AIService } from '../../services/ai-service';
+import { StreamControlHandler } from '../../services/streaming-control';
+import { MessageHelper } from '../../services/message-helper';
+
+export const TranslationPage: React.FC = () => {
+  const { t } = useTranslation();
+  const [sourceText, setSourceText] = useState('');
+  const [translatedText, setTranslatedText] = useState('');
+  const [isTranslating, setIsTranslating] = useState(false);
+  const [targetLanguage, setTargetLanguage] = useState('en');
+  const [error, setError] = useState<Error | null>(null);
+  const [isApiKeyMissing, setIsApiKeyMissing] = useState(true);
+
+  // Check if API key is available
+  useEffect(() => {
+    setIsApiKeyMissing(!SettingsService.getInstance().getApiKey());
+
+    const handleSettingsChange = () => {
+      setIsApiKeyMissing(!SettingsService.getInstance().getApiKey());
+    };
+
+    window.addEventListener(SETTINGS_CHANGE_EVENT, handleSettingsChange);
+
+    return () => {
+      window.removeEventListener(SETTINGS_CHANGE_EVENT, handleSettingsChange);
+    };
+  }, []);
+
+  // Handle translation
+  const handleTranslate = async () => {
+    if (!sourceText.trim()) return;
+
+    setIsTranslating(true);
+    setError(null);
+
+    try {
+      const settingsService = SettingsService.getInstance();
+      const provider = settingsService.getSelectedProvider();
+      const model = settingsService.getSelectedModel();
+      
+      // Create conversation ID (just for streaming handler, won't be stored)
+      const tempConversationId = uuidv4();
+
+      // Create messages for translation
+      const messages = createTranslationMessages(tempConversationId, sourceText, targetLanguage);
+
+      // Create placeholder message for streaming
+      const placeholderMessage = MessageHelper.getPlaceholderMessage(model, provider, tempConversationId);
+      placeholderMessage.fatherMessageId = messages[0].messageId;
+
+      // Create stream controller for handling the response
+      const streamController = new StreamControlHandler(
+        // We create a minimal conversation object just for the StreamControlHandler
+        {
+          conversationId: tempConversationId,
+          folderId: '',
+          title: 'Translation',
+          firstMessageId: messages[0].messageId,
+          messages: new Map([[placeholderMessage.messageId, placeholderMessage]]),
+          createdAt: new Date(),
+          updatedAt: new Date(),
+          messageInput: ''
+        },
+        placeholderMessage,
+        // On chunk callback
+        (updatedConversation) => {
+          const updatedMessage = updatedConversation.messages.get(placeholderMessage.messageId);
+          if (updatedMessage) {
+            setTranslatedText(MessageHelper.MessageContentToText(updatedMessage.content));
+          }
+        },
+        // On finish callback
+        (aiResponse) => {
+          setIsTranslating(false);
+          if (aiResponse) {
+            setTranslatedText(MessageHelper.MessageContentToText(aiResponse.content));
+          }
+        }
+      );
+
+      // Send to AI service
+      await AIService.getInstance().getChatCompletion(
+        messages,
+        {
+          model,
+          provider,
+          stream: true
+        },
+        streamController
+      );
+    } catch (err) {
+      setError(err as Error);
+      setIsTranslating(false);
+    }
+  };
+
+  // Create messages for translation
+  const createTranslationMessages = (conversationId: string, text: string, targetLang: string): Message[] => {
+    // Create a system message with translation instructions
+    const systemMessage: Message = {
+      messageId: uuidv4(),
+      conversationId,
+      role: 'system' as MessageRole,
+      content: MessageHelper.pureTextMessage(
+        `You are a translation assistant. Detect the source language of the text and translate it to ${getLanguageName(targetLang)}. 
+         Only return the translated text without any explanations, notes, or decorations.
+         Do not include any text that is not in the original input.`
+      ),
+      timestamp: new Date(),
+      provider: SettingsService.getInstance().getSelectedProvider(),
+      model: SettingsService.getInstance().getSelectedModel(),
+      tokens: 0,
+      fatherMessageId: null,
+      childrenMessageIds: [],
+      preferIndex: -1
+    };
+
+    // Create the user message with text to translate
+    const userMessage: Message = {
+      messageId: uuidv4(),
+      conversationId,
+      role: 'user' as MessageRole,
+      content: MessageHelper.pureTextMessage(text),
+      timestamp: new Date(),
+      provider: 'user',
+      model: 'user',
+      tokens: 0,
+      fatherMessageId: systemMessage.messageId,
+      childrenMessageIds: [],
+      preferIndex: -1
+    };
+
+    // Link messages
+    systemMessage.childrenMessageIds.push(userMessage.messageId);
+    systemMessage.preferIndex = 0;
+
+    return [systemMessage, userMessage];
+  };
+
+  // Get language name from code
+  const getLanguageName = (code: string): string => {
+    const language = languages.find(lang => lang.code === code);
+    return language ? language.name : code;
+  };
+
+  // Languages for dropdown
+  const languages = [
+    { code: 'auto', name: t('translation.autoDetect') },
+    { code: 'en', name: t('translation.english') },
+    { code: 'es', name: t('translation.spanish') },
+    { code: 'fr', name: t('translation.french') },
+    { code: 'de', name: t('translation.german') },
+    { code: 'it', name: t('translation.italian') },
+    { code: 'pt', name: t('translation.portuguese') },
+    { code: 'ru', name: t('translation.russian') },
+    { code: 'zh', name: t('translation.chinese') },
+    { code: 'ja', name: t('translation.japanese') },
+    { code: 'ko', name: t('translation.korean') },
+  ];
+
+  return (
+    <div className="flex flex-col w-full h-full bg-white">
+      {isApiKeyMissing && (
+        <div className="p-2 text-sm text-center text-yellow-800 bg-yellow-100">
+          {t('translation.apiKeyMissing')}
+        </div>
+      )}
+
+      <div className="flex flex-row h-full">
+        {/* Left side - Source */}
+        <div className="flex-1 p-6 overflow-hidden frame-right-border">
+          <div className="flex flex-col h-full">
+            <div className="flex items-center justify-between gap-4 mb-4">
+                
+              {/* Language selector */}
+              <div className="relative flex items-center gap-4">
+                <h1 className="text-2xl font-semibold">
+                    {t('translation.title')}
+                </h1>
+                
+                <span className="text-sm text-light-hint">
+                  {t('translation.sourceLanguageWithAutoSelected')}
+                </span>
+              </div>
+
+              <button
+                onClick={handleTranslate}
+                disabled={isTranslating || !sourceText.trim() || isApiKeyMissing}
+                className="px-8 py-2.5 text-white confirm-btn flex items-center"
+              >
+                {isTranslating ? (
+                  <>
+                    <Orbit size={18} className="mr-2 animate-spin" />
+                    {t('translation.translating')}
+                  </>
+                ) : (
+                  <>
+                    <Languages size={18} className="mr-2" />
+                    {t('translation.translateButton')}
+                  </>
+                )}
+              </button>
+            </div>
+            
+            {/* Source text input */}
+            <textarea
+              value={sourceText}
+              onChange={(e) => setSourceText(e.target.value)}
+              placeholder={t('translation.inputPlaceholder')}
+              className="flex-1 w-full p-3 mb-4 form-textarea-border input-box"
+              style={{ minHeight: '200px', resize: 'none' }}
+            />
+
+            {/* Translation button */}
+            {/* <div className="flex justify-center">
+              <button
+                onClick={handleTranslate}
+                disabled={isTranslating || !sourceText.trim() || isApiKeyMissing}
+                className="px-8 py-2.5 text-white confirm-btn flex items-center"
+              >
+                {isTranslating ? (
+                  <>
+                    <Orbit size={18} className="mr-2 animate-spin" />
+                    {t('translation.translating')}
+                  </>
+                ) : (
+                  <>
+                    <Languages size={18} className="mr-2" />
+                    {t('translation.translateButton')}
+                  </>
+                )}
+              </button>
+            </div> */}
+          </div>
+        </div>
+
+        {/* Right side - Translation result */}
+        <div className="flex-1 p-6 overflow-hidden">
+          <div className="flex flex-col h-full">
+            <div className="flex items-center gap-4 mb-4">
+              <h2 className="flex items-center text-xl font-medium">
+                <ArrowRight size={24} />
+              </h2>
+
+              {/* Target language selector */}
+              <div className="relative">
+                <select
+                  value={targetLanguage}
+                  onChange={(e) => setTargetLanguage(e.target.value)}
+                  className="px-4 py-2 input-box"
+                >
+                  {languages.filter(lang => lang.code !== 'auto').map((lang) => (
+                    <option key={`target-${lang.code}`} value={lang.code}>
+                      {lang.name}
+                    </option>
+                  ))}
+                </select>
+              </div>
+            </div>
+
+            {/* Error message */}
+            {error && (
+              <div className="p-3 mb-4 text-red-700 bg-red-100 rounded-lg">
+                {t('common.error')}: {error.message}
+              </div>
+            )}
+
+            {/* Translation result */}
+            <div className="flex-1 p-3 overflow-auto form-textarea-border major-area-bg-color">
+              {isTranslating ? (
+                <div className="flex items-center justify-center h-full">
+                  <div className="w-8 h-8 border-4 rounded-full border-primary-300 border-t-primary-600 animate-spin"></div>
+                </div>
+              ) : (
+                <div className="h-full">
+                  {translatedText ? (
+                    <p className="text-primary-800">{translatedText}</p>
+                  ) : (
+                    <div className="flex items-center justify-center h-full">
+                      <p className="text-surface-400">{t('translation.resultPlaceholder')}</p>
+                    </div>
+                  )}
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default TranslationPage; 
\ No newline at end of file
diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
index 38090b7..a3a3624 100644
--- a/src/locales/en/translation.json
+++ b/src/locales/en/translation.json
@@ -32,11 +32,48 @@
     "stopResponse": "Stop Response",
     "pressShiftEnterToChangeLines": "Press Shift+Enter to change lines"
   },
+  "translation": {
+    "title": "Translation",
+    "sourceLanguageWithAutoSelected": "Source Language will be auto detected",
+    "result": "Translation Result",
+    "translateButton": "Translate",
+    "translating": "Translating...",
+    "inputPlaceholder": "Enter text to translate...",
+    "resultPlaceholder": "Translation will appear here",
+    "apiKeyMissing": "Please set your API key for the selected provider in the settings.",
+    "autoDetect": "Auto-detect",
+    "english": "English",
+    "spanish": "Spanish",
+    "french": "French",
+    "german": "German",
+    "italian": "Italian",
+    "portuguese": "Portuguese",
+    "russian": "Russian",
+    "chinese": "Chinese",
+    "japanese": "Japanese",
+    "korean": "Korean"
+  },
   "selectModel": {
     "selectModel_title": "Select Model",
     "selectModel_close": "Close",
     "selectModel_search_placeholder": "Search models..."
   },
+  "imageGeneration": {
+    "title": "Image Generation",
+    "provider": "Provider",
+    "model": "Model",
+    "imageSize": "Image Size",
+    "generationCount": "Generation Count",
+    "randomSeed": "Random Seed",
+    "generateButton": "Generate",
+    "generating": "Generating...",
+    "prompt": "Prompt",
+    "promptPlaceholder": "Describe the image you want to create, e.g.: a peaceful lake at sunset with mountains in the background",
+    "results": "Generated Results",
+    "placeholderText": "Enter a prompt and click generate to create images",
+    "apiKeyMissing": "Please set your API key for the selected provider in the settings.",
+    "seedHelp": "Seed for reproducible results"
+  },
   "settings": {
     "language": "Language",
     "apiKey": "API Key",
diff --git a/src/locales/es/translation.json b/src/locales/es/translation.json
index a8118e0..7401a7a 100644
--- a/src/locales/es/translation.json
+++ b/src/locales/es/translation.json
@@ -32,11 +32,48 @@
     "stopResponse": "Detener Respuesta",
     "pressShiftEnterToChangeLines": "Presiona Shift+Enter para cambiar de línea"
   },
+  "translation": {
+    "title": "Traducción",
+    "sourceLanguageWithAutoSelected": "El idioma de origen se detectará automáticamente",
+    "result": "Resultado de la Traducción",
+    "translateButton": "Traducir",
+    "translating": "Traduciendo...",
+    "inputPlaceholder": "Introduce el texto a traducir...",
+    "resultPlaceholder": "La traducción aparecerá aquí",
+    "apiKeyMissing": "Por favor, configura tu clave API para el proveedor seleccionado en la configuración.",
+    "autoDetect": "Detección automática",
+    "english": "Inglés",
+    "spanish": "Español",
+    "french": "Francés",
+    "german": "Alemán",
+    "italian": "Italiano",
+    "portuguese": "Portugués",
+    "russian": "Ruso",
+    "chinese": "Chino",
+    "japanese": "Japonés",
+    "korean": "Coreano"
+  },
   "selectModel": {
     "selectModel_title": "Seleccionar Modelo",
     "selectModel_close": "Cerrar",
     "selectModel_search_placeholder": "Buscar modelos..."
   },
+  "imageGeneration": {
+    "title": "Imagen Generación",
+    "provider": "Proveedor",
+    "model": "Modelo",
+    "imageSize": "Tamaño de Imagen",
+    "generationCount": "Cantidad de Generaciones",
+    "randomSeed": "Semilla Aleatoria",
+    "generateButton": "Generar",
+    "generating": "Generando...",
+    "prompt": "Prompt",
+    "promptPlaceholder": "Describe la imagen que quieres crear, ej.: un lago tranquilo al atardecer con montañas en el fondo",
+    "results": "Resultados Generados",
+    "placeholderText": "Ingresa un prompt y haz clic en generar para crear imágenes",
+    "apiKeyMissing": "Por favor, configura tu clave API para el proveedor seleccionado en la configuración.",
+    "seedHelp": "Semilla para resultados reproducibles"
+  },
   "settings": {
     "language": "Idioma",
     "apiKey": "Clave API",
diff --git a/src/locales/ja/translation.json b/src/locales/ja/translation.json
index 48c92ad..fea5ab3 100644
--- a/src/locales/ja/translation.json
+++ b/src/locales/ja/translation.json
@@ -32,11 +32,48 @@
     "stopResponse": "応答を停止",
     "pressShiftEnterToChangeLines": "Shift+Enterを押して行を変更"
   },
+  "translation": {
+    "title": "翻訳",
+    "sourceLanguageWithAutoSelected": "ソース言語は自動で検出されます",
+    "result": "翻訳結果",
+    "translateButton": "翻訳",
+    "translating": "翻訳中...",
+    "inputPlaceholder": "翻訳するテキストを入力...",
+    "resultPlaceholder": "翻訳結果がここに表示されます",
+    "apiKeyMissing": "選択したプロバイダーのAPIキーを設定で設定してください。",
+    "autoDetect": "自動検出",
+    "english": "英語",
+    "spanish": "スペイン語",
+    "french": "フランス語",
+    "german": "ドイツ語",
+    "italian": "イタリア語",
+    "portuguese": "ポルトガル語",
+    "russian": "ロシア語",
+    "chinese": "中国語",
+    "japanese": "日本語",
+    "korean": "韓国語"
+  },
   "selectModel": {
     "selectModel_title": "モデルを選択",
     "selectModel_close": "閉じる",
     "selectModel_search_placeholder": "モデルを検索..."
   },
+  "imageGeneration": {
+    "title": "画像生成",
+    "provider": "プロバイダー",
+    "model": "モデル",
+    "imageSize": "画像サイズ",
+    "generationCount": "生成数",
+    "randomSeed": "ランダムシード",
+    "generateButton": "生成",
+    "generating": "生成中...",
+    "prompt": "プロンプト",
+    "promptPlaceholder": "作成したい画像を説明してください。例：夕日が沈む静かな湖、背景には山々",
+    "results": "生成結果",
+    "placeholderText": "プロンプトを入力して生成ボタンをクリックして画像を作成",
+    "apiKeyMissing": "選択したプロバイダーのAPIキーを設定で設定してください。",
+    "seedHelp": "再現可能な結果のためのシード値"
+  },
   "settings": {
     "language": "言語",
     "apiKey": "APIキー",
diff --git a/src/locales/ko/translation.json b/src/locales/ko/translation.json
index 2e65f61..783bacf 100644
--- a/src/locales/ko/translation.json
+++ b/src/locales/ko/translation.json
@@ -32,11 +32,48 @@
     "stopResponse": "응답 중지",
     "pressShiftEnterToChangeLines": "줄을 바꾸려면 Shift+Enter를 누르세요"
   },
+  "translation": {
+    "title": "번역",
+    "sourceLanguageWithAutoSelected": "원본 언어는 자동으로 감지됩니다",
+    "result": "번역 결과",
+    "translateButton": "번역",
+    "translating": "번역 중...",
+    "inputPlaceholder": "번역할 텍스트를 입력하세요...",
+    "resultPlaceholder": "번역 결과가 여기에 표시됩니다",
+    "apiKeyMissing": "선택한 제공자의 API 키를 설정에서 설정하세요.",
+    "autoDetect": "자동 감지",
+    "english": "영어",
+    "spanish": "스페인어",
+    "french": "프랑스어",
+    "german": "독일어",
+    "italian": "이탈리아어",
+    "portuguese": "포르투갈어",
+    "russian": "러시아어",
+    "chinese": "중국어",
+    "japanese": "일본어",
+    "korean": "한국어"
+  },
   "selectModel": {
     "selectModel_title": "모델 선택",
     "selectModel_close": "닫기",
     "selectModel_search_placeholder": "모델 검색..."
   },
+  "imageGeneration": {
+    "title": "이미지 생성",
+    "provider": "제공자",
+    "model": "모델",
+    "imageSize": "이미지 크기",
+    "generationCount": "생성 수량",
+    "randomSeed": "랜덤 시드",
+    "generateButton": "생성",
+    "generating": "생성 중...",
+    "prompt": "프롬프트",
+    "promptPlaceholder": "만들고 싶은 이미지를 설명하세요. 예: 석양이 지는 고요한 호수, 배경에는 산맥",
+    "results": "생성 결과",
+    "placeholderText": "프롬프트를 입력하고 생성 버튼을 클릭하여 이미지 생성",
+    "apiKeyMissing": "선택한 제공자의 API 키를 설정에서 설정하세요.",
+    "seedHelp": "재현 가능한 결과를 위한 시드"
+  },
   "settings": {
     "language": "언어",
     "apiKey": "API 키",
diff --git a/src/locales/zh-CN/translation.json b/src/locales/zh-CN/translation.json
index a831fa5..63306d6 100644
--- a/src/locales/zh-CN/translation.json
+++ b/src/locales/zh-CN/translation.json
@@ -32,11 +32,48 @@
     "stopResponse": "停止响应",
     "pressShiftEnterToChangeLines": "按 Shift+Enter 换行"
   },
+  "translation": {
+    "title": "翻译",
+    "sourceLanguageWithAutoSelected": "源语言将会自动识别",
+    "result": "翻译结果",
+    "translateButton": "翻译",
+    "translating": "翻译中...",
+    "inputPlaceholder": "输入要翻译的文本...",
+    "resultPlaceholder": "翻译结果将显示在这里",
+    "apiKeyMissing": "请在设置中为所选提供商设置您的 API 密钥。",
+    "autoDetect": "自动检测",
+    "english": "英语",
+    "spanish": "西班牙语",
+    "french": "法语",
+    "german": "德语",
+    "italian": "意大利语",
+    "portuguese": "葡萄牙语",
+    "russian": "俄语",
+    "chinese": "中文",
+    "japanese": "日语",
+    "korean": "韩语"
+  },
   "selectModel": {
     "selectModel_title": "选择模型",
     "selectModel_close": "关闭",
     "selectModel_search_placeholder": "搜索模型..."
   },
+  "imageGeneration": {
+    "title": "图片生成",
+    "provider": "提供商",
+    "model": "模型",
+    "imageSize": "图片尺寸",
+    "generationCount": "生成数量",
+    "randomSeed": "随机种子",
+    "generateButton": "生成",
+    "generating": "生成中...",
+    "prompt": "提示词",
+    "promptPlaceholder": "描述你想创建的图片，例如：一个宁静的湖泊，夕阳西下，远处是群山",
+    "results": "生成结果",
+    "placeholderText": "输入提示词并点击生成按钮来创建图片",
+    "apiKeyMissing": "请在设置中为所选提供商设置您的 API 密钥。",
+    "seedHelp": "用于可重现结果的种子"
+  },
   "settings": {
     "language": "语言",
     "apiKey": "API 密钥",
diff --git a/src/locales/zh-TW/translation.json b/src/locales/zh-TW/translation.json
index 07f02a0..a41b528 100644
--- a/src/locales/zh-TW/translation.json
+++ b/src/locales/zh-TW/translation.json
@@ -32,11 +32,48 @@
     "stopResponse": "停止回應",
     "pressShiftEnterToChangeLines": "按 Shift+Enter 換行"
   },
+  "translation": {
+    "title": "翻譯",
+    "sourceLanguageWithAutoSelected": "源語言將會自動偵測",
+    "result": "翻譯結果",
+    "translateButton": "翻譯",
+    "translating": "翻譯中...",
+    "inputPlaceholder": "輸入要翻譯的文字...",
+    "resultPlaceholder": "翻譯結果將顯示在這裡",
+    "apiKeyMissing": "請在設定中為所選提供商設置您的 API 金鑰。",
+    "autoDetect": "自動偵測",
+    "english": "英文",
+    "spanish": "西班牙文",
+    "french": "法文",
+    "german": "德文",
+    "italian": "義大利文",
+    "portuguese": "葡萄牙文",
+    "russian": "俄文",
+    "chinese": "中文",
+    "japanese": "日文",
+    "korean": "韓文"
+  },
   "selectModel": {
     "selectModel_title": "選擇模型",
     "selectModel_close": "關閉",
     "selectModel_search_placeholder": "搜尋模型..."
   },
+  "imageGeneration": {
+    "title": "圖片生成",
+    "provider": "提供商",
+    "model": "模型",
+    "imageSize": "圖片尺寸",
+    "generationCount": "生成數量",
+    "randomSeed": "隨機種子",
+    "generateButton": "生成",
+    "generating": "生成中...",
+    "prompt": "提示詞",
+    "promptPlaceholder": "描述你想創建的圖片，例如：一個寧靜的湖泊，夕陽西下，遠處是群山",
+    "results": "生成結果",
+    "placeholderText": "輸入提示詞並點擊生成按鈕來創建圖片",
+    "apiKeyMissing": "請在設定中為所選提供商設置您的 API 金鑰。",
+    "seedHelp": "用於可重現結果的種子"
+  },
   "settings": {
     "language": "語言",
     "apiKey": "API 金鑰",
diff --git a/src/services/core/ai-service-provider.ts b/src/services/core/ai-service-provider.ts
index 5facf99..b0b0e3f 100644
--- a/src/services/core/ai-service-provider.ts
+++ b/src/services/core/ai-service-provider.ts
@@ -83,12 +83,13 @@ export interface AiServiceProvider {
   /**
    * Generate an image
    */
-  getImageGeneration?(
+  getImageGeneration(
     prompt: string,
-    options?: {
-      size?: string;
+    options: {
+      size?: `${number}x${number}`;
+      aspectRatio?: `${number}:${number}`;
       style?: string;
       quality?: string;
     }
-  ): Promise<string[]>;
+  ): Promise<string[] | Uint8Array<ArrayBufferLike>[]>;
 }
\ No newline at end of file
diff --git a/src/services/message-helper.ts b/src/services/message-helper.ts
index 772900a..a2ef912 100644
--- a/src/services/message-helper.ts
+++ b/src/services/message-helper.ts
@@ -346,7 +346,7 @@ export class MessageHelper {
                             const fileContent: FilePart = {
                                 type: 'file',
                                 data: content.content,
-                                mimeType: 'application/pdf',
+                                mimeType: 'application/pdf', // SDK requires pdf mime type, but it supports all mime types
                                 filename: dataJson.name
                             }
                             return fileContent;
diff --git a/src/services/providers/openai-service.ts b/src/services/providers/openai-service.ts
index 7613aa8..5feca5b 100644
--- a/src/services/providers/openai-service.ts
+++ b/src/services/providers/openai-service.ts
@@ -154,13 +154,29 @@ export class OpenAIService implements AiServiceProvider {
    */
   public async getImageGeneration(
     prompt: string,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     options: {
       size?: `${number}x${number}`;
+      aspectRatio?: `${number}:${number}`;
       style?: string;
       quality?: string;
-    } = {}
-  ): Promise<string[]> {
-    throw new Error('Not implemented');
+    }
+  ): Promise<string[] | Uint8Array<ArrayBufferLike>[]> {
+
+    const imageModel = this.commonProviderHelper.ProviderInstance.imageModel('dall-e-3');
+
+    const result = await imageModel.doGenerate({
+      prompt: prompt,
+      n: 1,
+      size: options.size || '1024x1024',
+      aspectRatio: options.aspectRatio || '1:1',
+      seed: 42,
+      providerOptions: {
+        "openai": {
+          "style": options.style || 'vivid'
+        }
+      }
+    });
+
+    return result.images;
   }
 } 
\ No newline at end of file
diff --git a/src/services/settings-service.ts b/src/services/settings-service.ts
index 03b233d..69386eb 100644
--- a/src/services/settings-service.ts
+++ b/src/services/settings-service.ts
@@ -319,7 +319,7 @@ export class SettingsService {
   /**
    * Save settings to database
    */
-  private async saveSettings(): Promise<void> {
+  public async saveSettings(): Promise<void> {
     try {
       await this.dbService.saveSettings(this.settings);
       
diff --git a/src/styles/tensorblock-light.css b/src/styles/tensorblock-light.css
index a3b9f94..2ebe548 100644
--- a/src/styles/tensorblock-light.css
+++ b/src/styles/tensorblock-light.css
@@ -555,4 +555,86 @@
         background-color: var(--primary-300);
     }
     
+    /* Image Generation Page */
+    .aspect-ratio-button {
+        transition: all 0.2s;
+        background-color: var(--surface-0);
+    }
+    
+    .aspect-ratio-button.active {
+        background-color: var(--primary-100);
+        border-color: var(--primary-500);
+    }
+    
+    .aspect-ratio-button:hover:not(.active) {
+        background-color: var(--primary-50);
+        border-color: var(--primary-400);
+    }
+    
+    .image-generation-refresh-button {
+        background-color: var(--primary-50);
+        color: var(--primary-600);
+        transition: all 0.2s;
+    }
+    
+    .image-generation-refresh-button:hover {
+        background-color: var(--primary-200);
+        color: var(--primary-700);
+    }
+    
+    .image-generation-result-placeholder {
+        background-color: var(--primary-50);
+        border: 2px dashed var(--primary-200);
+        color: var(--surface-500);
+    }
+    
+    .image-result-area {
+        background-color: var(--surface-0);
+        border-radius: 0.5rem;
+        border: 1px solid var(--primary-100);
+        transition: all 0.2s;
+    }
+    
+    .image-result-area:hover {
+        border-color: var(--primary-300);
+    }
+
+    .text-light-hint{
+        color: var(--surface-400);
+    }
+
+    .image-generation-button {
+        background-color: transparent;
+        color: var(--primary-500);
+    }
+
+    .image-generation-button:hover {
+        background-color: var(--primary-100);
+        color: var(--primary-600);
+    }
+
+    .image-generation-button:disabled {
+        background-color: transparent;
+        color: var(--surface-400);
+        cursor: not-allowed;
+    }
+
+    .image-generation-popup {
+        background-color: var(--surface-0);
+        border: 1px solid var(--primary-200);
+        border-radius: 0.5rem;
+        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    }
+
+    .image-generation-provider-item {
+        background-color: transparent;
+    }
+
+    .image-generation-provider-item:hover {
+        background-color: var(--primary-100);
+    }
+
+    .image-generation-provider-selected {
+        background-color: var(--primary-200);
+    }
 }
\ No newline at end of file
diff --git a/src/types/chat.ts b/src/types/chat.ts
index 3b0f94f..ca592d7 100644
--- a/src/types/chat.ts
+++ b/src/types/chat.ts
@@ -43,6 +43,7 @@ export interface Conversation {
   messages: Map<string, Message>;
   createdAt: Date;
   updatedAt: Date;
+  messageInput: string;
 }
 
 export interface ConversationFolder{
@@ -51,4 +52,17 @@ export interface ConversationFolder{
   createdAt: Date;
   updatedAt: Date;
   colorFlag: string;
-}
\ No newline at end of file
+}
+
+export interface ImageGenerationResult {
+  id: string;
+  prompt: string;
+  negativePrompt: string;
+  seed: string;
+  number: number;
+  status: string;
+  aspectRatio: string;
+  provider: string;
+  model: string;
+  images: MessageContent[];
+}
diff --git a/src/types/chatTypes.md b/src/types/chatTypes.md
new file mode 100644
index 0000000..dfb2298
--- /dev/null
+++ b/src/types/chatTypes.md
@@ -0,0 +1,40 @@
+- Message Content:
+
+    - Text:
+        - cotent: string text content
+        - dataJson: none
+
+    - File:
+        - content: string file reference id
+        - dataJson:
+            - name: string file name
+            - type: string file mime type
+            - size: string file size in bytes
+
+    - Image:
+        - content: string file reference id
+        - dataJson:
+            - name: string file name
+            - type: string file mime type
+            - size: string file size in bytes
+
+
+- File Data:
+
+    - file id: string file reference id
+    - file type: Document/Image/Audio/Others
+    - data: ArrayBuffer data
+
+
+- Image generation result:
+
+    - prompt: string prompt text
+    - negative prompt: string negative prompt text
+    - seed: string seed
+    - number: numbers of generation
+    - status: string none/success/error/running
+    - aspect ratio: string
+    - provider: string provider id
+    - model: string model id
+    - images: MessageContent[]
+
diff --git a/src/types/file.ts b/src/types/file.ts
new file mode 100644
index 0000000..ccfb647
--- /dev/null
+++ b/src/types/file.ts
@@ -0,0 +1,7 @@
+export interface File {
+  fileId: string;
+  name: string;
+  type: string;
+  size: number;
+  data: ArrayBuffer;
+}
\ No newline at end of file