diff --git a/browser-extension/package-lock.json b/browser-extension/package-lock.json
index 973f5e57..1a3304f9 100644
--- a/browser-extension/package-lock.json
+++ b/browser-extension/package-lock.json
@@ -7587,11 +7587,10 @@
       }
     },
     "node_modules/cross-spawn": {
-      "version": "7.0.3",
-      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
-      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
+      "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "path-key": "^3.1.0",
         "shebang-command": "^2.0.0",
diff --git a/docs/DEVELOPMENT.md b/docs/DEVELOPMENT.md
index 704a8c33..445efc40 100644
--- a/docs/DEVELOPMENT.md
+++ b/docs/DEVELOPMENT.md
@@ -42,7 +42,6 @@ export VITE_APP_AGENT_ENABLED=<Bedrock Agent Flag>
 export VITE_APP_SELF_SIGN_UP_ENABLED=<Self Signup Flag>
 export VITE_APP_MODEL_REGION=<Bedrock/SageMakerモデルのリージョン>
 export VITE_APP_MODEL_IDS=<Bedrock モデルの JSON Array>
-export VITE_APP_MULTI_MODAL_MODEL_IDS=<Bedrock モデルの JSON Array>
 export VITE_APP_IMAGE_MODEL_IDS=<Bedrock 画像生成モデルの JSON Array>
 export VITE_APP_ENDPOINT_NAMES=<SageMaker モデルの JSON Array>
 export VITE_APP_SAMLAUTH_ENABLED=<SAML 認証 Flag>
@@ -67,7 +66,6 @@ export VITE_APP_AGENT_ENABLED=true
 export VITE_APP_SELF_SIGN_UP_ENABLED=true
 export VITE_APP_MODEL_REGION=us-west-2
 export VITE_APP_MODEL_IDS=["anthropic.claude-instant-v1","anthropic.claude-v2"]
-export VITE_APP_MULTI_MODAL_MODEL_IDS=["anthropic.claude-3-sonnet-20240229-v1:0"]
 export VITE_APP_IMAGE_MODEL_IDS=["stability.stable-diffusion-xl-v1","amazon.titan-image-generator-v1"]
 export VITE_APP_ENDPOINT_NAMES=[]
 export VITE_APP_SAMLAUTH_ENABLED=true
diff --git a/package-lock.json b/package-lock.json
index be48480f..e5157781 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7608,6 +7608,10 @@
         "react-dom": ">=16.8.0"
       }
     },
+    "node_modules/@generative-ai-use-cases-jp/common": {
+      "resolved": "packages/common",
+      "link": true
+    },
     "node_modules/@headlessui/react": {
       "version": "1.7.19",
       "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-1.7.19.tgz",
@@ -21230,6 +21234,10 @@
         "typescript": "~5.4.5"
       }
     },
+    "packages/common": {
+      "name": "@generative-ai-use-cases-jp/common",
+      "version": "1.0.0"
+    },
     "packages/types": {
       "name": "@types/generative-ai-use-cases-jp",
       "dependencies": {
diff --git a/packages/cdk/lib/construct/api.ts b/packages/cdk/lib/construct/api.ts
index 58e73f1f..e08e7a31 100644
--- a/packages/cdk/lib/construct/api.ts
+++ b/packages/cdk/lib/construct/api.ts
@@ -21,6 +21,7 @@ import {
   HttpMethods,
 } from 'aws-cdk-lib/aws-s3';
 import { Agent, AgentMap } from 'generative-ai-use-cases-jp';
+import { modelFeatureFlags } from '@generative-ai-use-cases-jp/common';
 
 export interface BackendApiProps {
   userPool: UserPool;
@@ -38,7 +39,6 @@ export class Api extends Construct {
   readonly optimizePromptFunction: NodejsFunction;
   readonly modelRegion: string;
   readonly modelIds: string[];
-  readonly multiModalModelIds: string[];
   readonly imageGenerationModelIds: string[];
   readonly endpointNames: string[];
   readonly agentNames: string[];
@@ -71,85 +71,7 @@ export class Api extends Construct {
     ];
 
     // Validate Model Names
-    const supportedModelIds = [
-      'anthropic.claude-3-5-sonnet-20241022-v2:0',
-      'anthropic.claude-3-5-haiku-20241022-v1:0',
-      'anthropic.claude-3-5-sonnet-20240620-v1:0',
-      'anthropic.claude-3-opus-20240229-v1:0',
-      'anthropic.claude-3-sonnet-20240229-v1:0',
-      'anthropic.claude-3-haiku-20240307-v1:0',
-      'us.anthropic.claude-3-5-sonnet-20241022-v2:0',
-      'us.anthropic.claude-3-5-haiku-20241022-v1:0',
-      'us.anthropic.claude-3-5-sonnet-20240620-v1:0',
-      'us.anthropic.claude-3-opus-20240229-v1:0',
-      'us.anthropic.claude-3-sonnet-20240229-v1:0',
-      'us.anthropic.claude-3-haiku-20240307-v1:0',
-      'eu.anthropic.claude-3-5-sonnet-20240620-v1:0',
-      'eu.anthropic.claude-3-sonnet-20240229-v1:0',
-      'eu.anthropic.claude-3-haiku-20240307-v1:0',
-      'apac.anthropic.claude-3-5-sonnet-20240620-v1:0',
-      'apac.anthropic.claude-3-sonnet-20240229-v1:0',
-      'apac.anthropic.claude-3-haiku-20240307-v1:0',
-      'anthropic.claude-v2:1',
-      'anthropic.claude-v2',
-      'anthropic.claude-instant-v1',
-      // Titan Express は日本語文字化けのため未対応
-      // 'amazon.titan-text-express-v1',
-      'amazon.titan-text-premier-v1:0',
-      'stability.stable-diffusion-xl-v1',
-      'stability.sd3-large-v1:0',
-      'stability.stable-image-core-v1:0',
-      'stability.stable-image-ultra-v1:0',
-      'amazon.titan-image-generator-v2:0',
-      'amazon.titan-image-generator-v1',
-      'amazon.nova-canvas-v1:0',
-      'meta.llama3-8b-instruct-v1:0',
-      'meta.llama3-70b-instruct-v1:0',
-      'meta.llama3-1-8b-instruct-v1:0',
-      'meta.llama3-1-70b-instruct-v1:0',
-      'meta.llama3-1-405b-instruct-v1:0',
-      'us.meta.llama3-2-1b-instruct-v1:0',
-      'us.meta.llama3-2-3b-instruct-v1:0',
-      'us.meta.llama3-2-11b-instruct-v1:0',
-      'us.meta.llama3-2-90b-instruct-v1:0',
-      'mistral.mistral-7b-instruct-v0:2',
-      'mistral.mixtral-8x7b-instruct-v0:1',
-      'mistral.mistral-small-2402-v1:0',
-      'mistral.mistral-large-2402-v1:0',
-      'mistral.mistral-large-2407-v1:0',
-      'cohere.command-r-v1:0',
-      'cohere.command-r-plus-v1:0',
-      'amazon.nova-pro-v1:0',
-      'amazon.nova-lite-v1:0',
-      'amazon.nova-micro-v1:0',
-      'us.amazon.nova-pro-v1:0',
-      'us.amazon.nova-lite-v1:0',
-      'us.amazon.nova-micro-v1:0',
-    ];
-    const multiModalModelIds = [
-      'anthropic.claude-3-5-sonnet-20241022-v2:0',
-      'anthropic.claude-3-5-sonnet-20240620-v1:0',
-      'anthropic.claude-3-opus-20240229-v1:0',
-      'anthropic.claude-3-sonnet-20240229-v1:0',
-      'anthropic.claude-3-haiku-20240307-v1:0',
-      'us.anthropic.claude-3-5-sonnet-20241022-v2:0',
-      'us.anthropic.claude-3-5-sonnet-20240620-v1:0',
-      'us.anthropic.claude-3-opus-20240229-v1:0',
-      'us.anthropic.claude-3-sonnet-20240229-v1:0',
-      'us.anthropic.claude-3-haiku-20240307-v1:0',
-      'eu.anthropic.claude-3-5-sonnet-20240620-v1:0',
-      'eu.anthropic.claude-3-sonnet-20240229-v1:0',
-      'eu.anthropic.claude-3-haiku-20240307-v1:0',
-      'apac.anthropic.claude-3-5-sonnet-20240620-v1:0',
-      'apac.anthropic.claude-3-sonnet-20240229-v1:0',
-      'apac.anthropic.claude-3-haiku-20240307-v1:0',
-      'us.meta.llama3-2-11b-instruct-v1:0',
-      'us.meta.llama3-2-90b-instruct-v1:0',
-      'amazon.nova-pro-v1:0',
-      'amazon.nova-lite-v1:0',
-      'us.amazon.nova-pro-v1:0',
-      'us.amazon.nova-lite-v1:0',
-    ];
+    const supportedModelIds = Object.keys(modelFeatureFlags);
     for (const modelId of modelIds) {
       if (!supportedModelIds.includes(modelId)) {
         throw new Error(`Unsupported Model Name: ${modelId}`);
@@ -829,7 +751,6 @@ export class Api extends Construct {
     this.optimizePromptFunction = optimizePromptFunction;
     this.modelRegion = modelRegion;
     this.modelIds = modelIds;
-    this.multiModalModelIds = multiModalModelIds;
     this.imageGenerationModelIds = imageGenerationModelIds;
     this.endpointNames = endpointNames;
     this.agentNames = Object.keys(agentMap);
diff --git a/packages/cdk/lib/construct/web.ts b/packages/cdk/lib/construct/web.ts
index aca43e09..bb6a5101 100644
--- a/packages/cdk/lib/construct/web.ts
+++ b/packages/cdk/lib/construct/web.ts
@@ -28,7 +28,6 @@ export interface WebProps {
   webAclId?: string;
   modelRegion: string;
   modelIds: string[];
-  multiModalModelIds: string[];
   imageGenerationModelIds: string[];
   endpointNames: string[];
   samlAuthEnabled: boolean;
@@ -178,9 +177,6 @@ export class Web extends Construct {
         VITE_APP_SELF_SIGN_UP_ENABLED: props.selfSignUpEnabled.toString(),
         VITE_APP_MODEL_REGION: props.modelRegion,
         VITE_APP_MODEL_IDS: JSON.stringify(props.modelIds),
-        VITE_APP_MULTI_MODAL_MODEL_IDS: JSON.stringify(
-          props.multiModalModelIds
-        ),
         VITE_APP_IMAGE_MODEL_IDS: JSON.stringify(props.imageGenerationModelIds),
         VITE_APP_ENDPOINT_NAMES: JSON.stringify(props.endpointNames),
         VITE_APP_SAMLAUTH_ENABLED: props.samlAuthEnabled.toString(),
diff --git a/packages/cdk/lib/generative-ai-use-cases-stack.ts b/packages/cdk/lib/generative-ai-use-cases-stack.ts
index 97cf606c..c36e9e13 100644
--- a/packages/cdk/lib/generative-ai-use-cases-stack.ts
+++ b/packages/cdk/lib/generative-ai-use-cases-stack.ts
@@ -158,7 +158,6 @@ export class GenerativeAiUseCasesStack extends Stack {
       webAclId: props.webAclId,
       modelRegion: api.modelRegion,
       modelIds: api.modelIds,
-      multiModalModelIds: api.multiModalModelIds,
       imageGenerationModelIds: api.imageGenerationModelIds,
       endpointNames: api.endpointNames,
       samlAuthEnabled,
@@ -277,10 +276,6 @@ export class GenerativeAiUseCasesStack extends Stack {
       value: JSON.stringify(api.modelIds),
     });
 
-    new CfnOutput(this, 'MultiModalModelIds', {
-      value: JSON.stringify(api.multiModalModelIds),
-    });
-
     new CfnOutput(this, 'ImageGenerateModelIds', {
       value: JSON.stringify(api.imageGenerationModelIds),
     });
diff --git a/packages/cdk/tsconfig.json b/packages/cdk/tsconfig.json
index be82b593..ea143d04 100644
--- a/packages/cdk/tsconfig.json
+++ b/packages/cdk/tsconfig.json
@@ -21,7 +21,7 @@
     "experimentalDecorators": true,
     "strictPropertyInitialization": false,
     "typeRoots": [
-      "./node_modules/@types"
+      "../../node_modules/@types"
     ],
     "types": [
       "node"
diff --git a/packages/common/package.json b/packages/common/package.json
new file mode 100644
index 00000000..43752db3
--- /dev/null
+++ b/packages/common/package.json
@@ -0,0 +1,5 @@
+{
+    "name": "@generative-ai-use-cases-jp/common",
+    "private": true,
+    "main": "src/index.ts"
+}
\ No newline at end of file
diff --git a/packages/common/src/index.ts b/packages/common/src/index.ts
new file mode 100644
index 00000000..9f8ccadd
--- /dev/null
+++ b/packages/common/src/index.ts
@@ -0,0 +1 @@
+export * from './model';
diff --git a/packages/common/src/model.ts b/packages/common/src/model.ts
new file mode 100644
index 00000000..d1e328c6
--- /dev/null
+++ b/packages/common/src/model.ts
@@ -0,0 +1,75 @@
+import { FeatureFlags } from 'generative-ai-use-cases-jp';
+
+// Manage Model Feature
+// https://docs.aws.amazon.com/bedrock/latest/userguide/conversation-inference-supported-models-features.html
+const MODEL_FEATURE: Record<string, FeatureFlags> = {
+  TEXT_ONLY: { text: true, doc: false, image: false, video: false },
+  TEXT_DOC: { text: true, doc: true, image: false, video: false },
+  TEXT_DOC_IMAGE: { text: true, doc: true, image: true, video: false },
+  TEXT_DOC_IMAGE_VIDEO: { text: true, doc: true, image: true, video: true },
+  IMAGE_GEN: { image_gen: true },
+  VIDEO_GEN: { video_gen: true },
+};
+export const modelFeatureFlags: Record<string, FeatureFlags> = {
+  // Anthropic
+  'anthropic.claude-3-5-sonnet-20241022-v2:0': MODEL_FEATURE.TEXT_DOC_IMAGE,
+  'anthropic.claude-3-5-haiku-20241022-v1:0': MODEL_FEATURE.TEXT_DOC_IMAGE,
+  'anthropic.claude-3-5-sonnet-20240620-v1:0': MODEL_FEATURE.TEXT_DOC_IMAGE,
+  'anthropic.claude-3-opus-20240229-v1:0': MODEL_FEATURE.TEXT_DOC_IMAGE,
+  'anthropic.claude-3-sonnet-20240229-v1:0': MODEL_FEATURE.TEXT_DOC_IMAGE,
+  'anthropic.claude-3-haiku-20240307-v1:0': MODEL_FEATURE.TEXT_DOC_IMAGE,
+  'us.anthropic.claude-3-5-sonnet-20241022-v2:0': MODEL_FEATURE.TEXT_DOC_IMAGE,
+  'us.anthropic.claude-3-5-haiku-20241022-v1:0': MODEL_FEATURE.TEXT_DOC_IMAGE,
+  'us.anthropic.claude-3-5-sonnet-20240620-v1:0': MODEL_FEATURE.TEXT_DOC_IMAGE,
+  'us.anthropic.claude-3-opus-20240229-v1:0': MODEL_FEATURE.TEXT_DOC_IMAGE,
+  'us.anthropic.claude-3-sonnet-20240229-v1:0': MODEL_FEATURE.TEXT_DOC_IMAGE,
+  'us.anthropic.claude-3-haiku-20240307-v1:0': MODEL_FEATURE.TEXT_DOC_IMAGE,
+  'eu.anthropic.claude-3-5-sonnet-20240620-v1:0': MODEL_FEATURE.TEXT_DOC_IMAGE,
+  'eu.anthropic.claude-3-sonnet-20240229-v1:0': MODEL_FEATURE.TEXT_DOC_IMAGE,
+  'eu.anthropic.claude-3-haiku-20240307-v1:0': MODEL_FEATURE.TEXT_DOC_IMAGE,
+  'apac.anthropic.claude-3-5-sonnet-20240620-v1:0':
+    MODEL_FEATURE.TEXT_DOC_IMAGE,
+  'apac.anthropic.claude-3-sonnet-20240229-v1:0': MODEL_FEATURE.TEXT_DOC_IMAGE,
+  'apac.anthropic.claude-3-haiku-20240307-v1:0': MODEL_FEATURE.TEXT_DOC_IMAGE,
+  'anthropic.claude-v2:1': MODEL_FEATURE.TEXT_DOC,
+  'anthropic.claude-v2': MODEL_FEATURE.TEXT_DOC,
+  'anthropic.claude-instant-v1': MODEL_FEATURE.TEXT_DOC,
+  // Amazon Titan
+  'amazon.titan-text-express-v1': MODEL_FEATURE.TEXT_DOC,
+  'amazon.titan-text-premier-v1:0': MODEL_FEATURE.TEXT_ONLY,
+  // Meta
+  'meta.llama3-8b-instruct-v1:0': MODEL_FEATURE.TEXT_DOC,
+  'meta.llama3-70b-instruct-v1:0': MODEL_FEATURE.TEXT_DOC,
+  'meta.llama3-1-8b-instruct-v1:0': MODEL_FEATURE.TEXT_DOC,
+  'meta.llama3-1-70b-instruct-v1:0': MODEL_FEATURE.TEXT_DOC,
+  'meta.llama3-1-405b-instruct-v1:0': MODEL_FEATURE.TEXT_DOC,
+  'us.meta.llama3-2-1b-instruct-v1:0': MODEL_FEATURE.TEXT_DOC,
+  'us.meta.llama3-2-3b-instruct-v1:0': MODEL_FEATURE.TEXT_DOC,
+  'us.meta.llama3-2-11b-instruct-v1:0': MODEL_FEATURE.TEXT_DOC_IMAGE,
+  'us.meta.llama3-2-90b-instruct-v1:0': MODEL_FEATURE.TEXT_DOC_IMAGE,
+  // Mistral
+  'mistral.mistral-7b-instruct-v0:2': MODEL_FEATURE.TEXT_DOC,
+  'mistral.mixtral-8x7b-instruct-v0:1': MODEL_FEATURE.TEXT_DOC,
+  'mistral.mistral-small-2402-v1:0': MODEL_FEATURE.TEXT_ONLY,
+  'mistral.mistral-large-2402-v1:0': MODEL_FEATURE.TEXT_DOC,
+  'mistral.mistral-large-2407-v1:0': MODEL_FEATURE.TEXT_DOC,
+  // Cohere
+  'cohere.command-r-v1:0': MODEL_FEATURE.TEXT_DOC,
+  'cohere.command-r-plus-v1:0': MODEL_FEATURE.TEXT_DOC,
+  // Amazon Nova
+  'amazon.nova-pro-v1:0': MODEL_FEATURE.TEXT_DOC_IMAGE_VIDEO,
+  'amazon.nova-lite-v1:0': MODEL_FEATURE.TEXT_DOC_IMAGE_VIDEO,
+  'amazon.nova-micro-v1:0': MODEL_FEATURE.TEXT_ONLY,
+  'us.amazon.nova-pro-v1:0': MODEL_FEATURE.TEXT_DOC_IMAGE_VIDEO,
+  'us.amazon.nova-lite-v1:0': MODEL_FEATURE.TEXT_DOC_IMAGE_VIDEO,
+  'us.amazon.nova-micro-v1:0': MODEL_FEATURE.TEXT_ONLY,
+  // Stability AI Image Gen
+  'stability.stable-diffusion-xl-v1': MODEL_FEATURE.IMAGE_GEN,
+  'stability.sd3-large-v1:0': MODEL_FEATURE.IMAGE_GEN,
+  'stability.stable-image-core-v1:0': MODEL_FEATURE.IMAGE_GEN,
+  'stability.stable-image-ultra-v1:0': MODEL_FEATURE.IMAGE_GEN,
+  // Amazon Image Gen
+  'amazon.titan-image-generator-v2:0': MODEL_FEATURE.IMAGE_GEN,
+  'amazon.titan-image-generator-v1': MODEL_FEATURE.IMAGE_GEN,
+  'amazon.nova-canvas-v1:0': MODEL_FEATURE.IMAGE_GEN,
+};
diff --git a/packages/common/tsconfig.json b/packages/common/tsconfig.json
new file mode 100644
index 00000000..ccd5c10e
--- /dev/null
+++ b/packages/common/tsconfig.json
@@ -0,0 +1,12 @@
+{
+    "compilerOptions": {
+      "rootDir": "src",
+      "composite": true,
+      "declaration": true,
+      "declarationMap": true,
+      "esModuleInterop": true,
+      "skipLibCheck": true
+    },
+    "include": ["src"],
+    "exclude": ["node_modules", "dist"]
+}
\ No newline at end of file
diff --git a/packages/types/src/index.d.ts b/packages/types/src/index.d.ts
index 04d3f6f6..4d19be6a 100644
--- a/packages/types/src/index.d.ts
+++ b/packages/types/src/index.d.ts
@@ -10,3 +10,4 @@ export * from './utils';
 export * from './systemContext';
 export * from './useCaseBuilder';
 export * from './protocolUseCaseBuilder';
+export * from './model';
diff --git a/packages/types/src/message.d.ts b/packages/types/src/message.d.ts
index 5ce48455..571de00e 100644
--- a/packages/types/src/message.d.ts
+++ b/packages/types/src/message.d.ts
@@ -58,10 +58,15 @@ export type UploadedFileType = {
   s3Url?: string;
   uploading: boolean;
   deleting?: boolean;
+  errorMessages: string[];
 };
 
 export type FileLimit = {
-  accept: string[];
+  accept: {
+    doc: string[];
+    image: string[];
+    video: string[];
+  };
   maxFileCount: number;
   maxFileSizeMB: number;
   maxImageFileCount: number;
diff --git a/packages/types/src/model.d.ts b/packages/types/src/model.d.ts
new file mode 100644
index 00000000..a3b08e3d
--- /dev/null
+++ b/packages/types/src/model.d.ts
@@ -0,0 +1,9 @@
+// Feature Flag の型を定義
+export type FeatureFlags = {
+  text?: boolean;
+  doc?: boolean;
+  image?: boolean;
+  video?: boolean;
+  image_gen?: boolean;
+  video_gen?: boolean;
+};
diff --git a/packages/web/src/App.tsx b/packages/web/src/App.tsx
index b3aeb4bc..40df7900 100644
--- a/packages/web/src/App.tsx
+++ b/packages/web/src/App.tsx
@@ -36,8 +36,7 @@ const ragEnabled: boolean = import.meta.env.VITE_APP_RAG_ENABLED === 'true';
 const ragKnowledgeBaseEnabled: boolean =
   import.meta.env.VITE_APP_RAG_KNOWLEDGE_BASE_ENABLED === 'true';
 const agentEnabled: boolean = import.meta.env.VITE_APP_AGENT_ENABLED === 'true';
-const { multiModalModelIds } = MODELS;
-const multiModalEnabled: boolean = multiModalModelIds.length > 0;
+const { visionEnabled } = MODELS;
 const getPromptFlows = () => {
   try {
     return JSON.parse(import.meta.env.VITE_APP_PROMPT_FLOWS);
@@ -137,7 +136,7 @@ const items: ItemProps[] = [
     icon: <PiImages />,
     display: 'usecase' as const,
   },
-  multiModalEnabled
+  visionEnabled
     ? {
         label: '映像分析',
         to: '/video',
diff --git a/packages/web/src/components/FileCard.tsx b/packages/web/src/components/FileCard.tsx
index bc7dce30..a1b90761 100644
--- a/packages/web/src/components/FileCard.tsx
+++ b/packages/web/src/components/FileCard.tsx
@@ -7,7 +7,9 @@ type Props = BaseProps & {
   filename?: string;
   url?: string;
   loading?: boolean;
+  deleting?: boolean;
   size: 's' | 'm';
+  error?: boolean;
   onDelete?: () => void;
 };
 
@@ -16,7 +18,11 @@ const FileCard: React.FC<Props> = (props) => {
     <div className={props.className}>
       <div className="group relative cursor-pointer">
         <div
-          className={`border-aws-squid-ink/50 max-w-36 break-all rounded border object-cover object-center p-1 ${props.size === 's' ? 'max-h-24' : 'max-h-32'}`}>
+          className={`${
+            props.error ? 'border-red-500' : 'border-aws-squid-ink/50'
+          } max-w-36 break-all rounded border object-cover object-center p-1 ${
+            props.size === 's' ? 'max-h-24' : 'max-h-32'
+          }`}>
           <PiFile className="mb-1 mr-1 inline size-4" />
           {props.url ? (
             <a href={props.url}>{props.filename}</a>
@@ -24,7 +30,7 @@ const FileCard: React.FC<Props> = (props) => {
             props.filename
           )}
         </div>
-        {props.loading && (
+        {(props.loading || props.deleting) && (
           <div className="bg-aws-squid-ink/20 absolute top-0 flex h-full w-full items-center justify-center rounded">
             <PiSpinnerGap className="animate-spin text-4xl text-white" />
           </div>
diff --git a/packages/web/src/components/InputChatContent.tsx b/packages/web/src/components/InputChatContent.tsx
index 88db067c..fd383ccf 100644
--- a/packages/web/src/components/InputChatContent.tsx
+++ b/packages/web/src/components/InputChatContent.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback, useEffect, useMemo } from 'react';
 import ButtonSend from './ButtonSend';
 import Textarea from './Textarea';
 import ZoomUpImage from './ZoomUpImage';
@@ -30,6 +30,7 @@ type Props = {
   disableMarginBottom?: boolean;
   fileUpload?: boolean;
   fileLimit?: FileLimit;
+  accept?: string[];
 } & (
   | {
       hideReset?: false;
@@ -46,33 +47,43 @@ const InputChatContent: React.FC<Props> = (props) => {
   const {
     uploadedFiles,
     uploadFiles,
+    checkFiles,
     deleteUploadedFile,
     uploading,
     errorMessages,
   } = useFiles();
 
+  // Model 変更等で accept が変更された際にエラーメッセージを表示 (自動でファイル削除は行わない)
+  useEffect(() => {
+    if (props.fileLimit && props.accept) {
+      checkFiles(props.fileLimit, props.accept);
+    }
+  }, [checkFiles, props.fileLimit, props.accept]);
+
   const onChangeFiles = async (e: React.ChangeEvent<HTMLInputElement>) => {
     const files = e.target.files;
-    if (files) {
+    if (files && props.fileLimit && props.accept) {
       // ファイルを反映しアップロード
-      uploadFiles(Array.from(files), props?.fileLimit);
+      uploadFiles(Array.from(files), props.fileLimit, props.accept);
     }
   };
 
   const deleteFile = useCallback(
     (fileUrl: string) => {
-      deleteUploadedFile(fileUrl);
+      if (props.fileLimit && props.accept) {
+        deleteUploadedFile(fileUrl, props.fileLimit, props.accept);
+      }
     },
-    [deleteUploadedFile]
+    [deleteUploadedFile, props.fileLimit, props.accept]
   );
   const handlePaste = async (pasteEvent: React.ClipboardEvent) => {
     const fileList = pasteEvent.clipboardData.items || [];
     const files = Array.from(fileList)
       .filter((file) => file.kind === 'file')
       .map((file) => file.getAsFile() as File);
-    if (files.length > 0) {
+    if (files.length > 0 && props.fileLimit && props.accept) {
       // ファイルをアップロード
-      uploadFiles(Array.from(files), props.fileLimit);
+      uploadFiles(Array.from(files), props.fileLimit, props.accept);
       // ファイルの場合ファイル名もペーストされるためデフォルトの挙動を止める
       pasteEvent.preventDefault();
     }
@@ -84,8 +95,13 @@ const InputChatContent: React.FC<Props> = (props) => {
   }, [chatLoading, props.loading]);
 
   const disabledSend = useMemo(() => {
-    return props.content === '' || props.disabled || uploading;
-  }, [props.content, props.disabled, uploading]);
+    return (
+      props.content === '' ||
+      props.disabled ||
+      uploading ||
+      errorMessages.length > 0
+    );
+  }, [props.content, props.disabled, uploading, errorMessages]);
 
   return (
     <div
@@ -102,7 +118,7 @@ const InputChatContent: React.FC<Props> = (props) => {
           props.disableMarginBottom ? '' : 'mb-7'
         }`}>
         <div className="flex w-full flex-col">
-          {props.fileUpload && uploadedFiles.length > 0 && (
+          {uploadedFiles.length > 0 && (
             <div className="m-2 flex flex-wrap gap-2">
               {uploadedFiles.map((uploadedFile, idx) => {
                 if (uploadedFile.type === 'image') {
@@ -111,7 +127,9 @@ const InputChatContent: React.FC<Props> = (props) => {
                       key={idx}
                       src={uploadedFile.base64EncodedData}
                       loading={uploadedFile.uploading}
+                      deleting={uploadedFile.deleting}
                       size="s"
+                      error={uploadedFile.errorMessages.length > 0}
                       onDelete={() => {
                         deleteFile(uploadedFile.s3Url ?? '');
                       }}
@@ -123,7 +141,9 @@ const InputChatContent: React.FC<Props> = (props) => {
                       key={idx}
                       src={uploadedFile.base64EncodedData}
                       loading={uploadedFile.uploading}
+                      deleting={uploadedFile.deleting}
                       size="s"
+                      error={uploadedFile.errorMessages.length > 0}
                       onDelete={() => {
                         deleteFile(uploadedFile.s3Url ?? '');
                       }}
@@ -135,7 +155,9 @@ const InputChatContent: React.FC<Props> = (props) => {
                       key={idx}
                       filename={uploadedFile.name}
                       loading={uploadedFile.uploading}
+                      deleting={uploadedFile.deleting}
                       size="s"
+                      error={uploadedFile.errorMessages.length > 0}
                       onDelete={() => {
                         deleteFile(uploadedFile.s3Url ?? '');
                       }}
@@ -172,7 +194,7 @@ const InputChatContent: React.FC<Props> = (props) => {
                 hidden
                 onChange={onChangeFiles}
                 type="file"
-                accept={props.fileLimit?.accept?.join(',')}
+                accept={props.accept?.join(',')}
                 multiple
                 value={[]}
               />
diff --git a/packages/web/src/components/ZoomUpImage.tsx b/packages/web/src/components/ZoomUpImage.tsx
index bcace9ff..6c7f3d33 100644
--- a/packages/web/src/components/ZoomUpImage.tsx
+++ b/packages/web/src/components/ZoomUpImage.tsx
@@ -6,7 +6,9 @@ import { PiSpinnerGap, PiX } from 'react-icons/pi';
 type Props = BaseProps & {
   src?: string;
   loading?: boolean;
+  deleting?: boolean;
   size: 's' | 'm';
+  error?: boolean;
   onDelete?: () => void;
 };
 
@@ -17,13 +19,17 @@ const ZoomUpImage: React.FC<Props> = (props) => {
     <div className={props.className}>
       <div className="group relative cursor-pointer">
         <img
-          className={`border-aws-squid-ink/50 bg-aws-squid-ink/20 rounded border object-cover object-center ${props.size === 's' ? 'size-24' : 'size-32'}`}
+          className={`${
+            props.error ? 'border-red-500' : 'border-aws-squid-ink/50'
+          } bg-aws-squid-ink/20 rounded border object-cover object-center ${
+            props.size === 's' ? 'size-24' : 'size-32'
+          }`}
           src={props.src}
           onClick={() => {
             setZoom(true);
           }}
         />
-        {props.loading && (
+        {(props.loading || props.deleting) && (
           <div className="bg-aws-squid-ink/20 absolute top-0 flex h-full w-full items-center justify-center rounded">
             <PiSpinnerGap className="animate-spin text-4xl text-white" />
           </div>
diff --git a/packages/web/src/components/ZoomUpVideo.tsx b/packages/web/src/components/ZoomUpVideo.tsx
index 455c3f7e..3113180d 100644
--- a/packages/web/src/components/ZoomUpVideo.tsx
+++ b/packages/web/src/components/ZoomUpVideo.tsx
@@ -6,7 +6,9 @@ import { PiSpinnerGap, PiX } from 'react-icons/pi';
 type Props = BaseProps & {
   src?: string;
   loading?: boolean;
+  deleting?: boolean;
   size: 's' | 'm';
+  error?: boolean;
   onDelete?: () => void;
 };
 
@@ -17,14 +19,18 @@ const ZoomUpVideo: React.FC<Props> = (props) => {
     <div className={props.className}>
       <div className="group relative cursor-pointer">
         <video
-          className={`border-aws-squid-ink/50 bg-aws-squid-ink/20 rounded border object-cover object-center ${props.size === 's' ? 'size-24' : 'size-32'}`}
+          className={`${
+            props.error ? 'border-red-500' : 'border-aws-squid-ink/50'
+          } bg-aws-squid-ink/20 rounded border object-cover object-center ${
+            props.size === 's' ? 'size-24' : 'size-32'
+          }`}
           src={props.src}
           controls
           onClick={() => {
             setZoom(true);
           }}
         />
-        {props.loading && (
+        {(props.loading || props.deleting) && (
           <div className="bg-aws-squid-ink/20 absolute top-0 flex h-full w-full items-center justify-center rounded">
             <PiSpinnerGap className="animate-spin text-4xl text-white" />
           </div>
diff --git a/packages/web/src/hooks/useFiles.ts b/packages/web/src/hooks/useFiles.ts
index f80d71e3..67239baa 100644
--- a/packages/web/src/hooks/useFiles.ts
+++ b/packages/web/src/hooks/useFiles.ts
@@ -8,10 +8,19 @@ export const extractBaseURL = (url: string) => {
   return url.split(/[?#]/)[0];
 };
 const useFilesState = create<{
-  uploadFiles: (files: File[], fileLimit?: FileLimit) => Promise<void>;
+  uploadFiles: (
+    files: File[],
+    fileLimit: FileLimit,
+    accept: string[]
+  ) => Promise<void>;
+  checkFiles: (fileLimit: FileLimit, accept: string[]) => Promise<void>;
   uploadedFiles: UploadedFileType[];
   errorMessages: string[];
-  deleteUploadedFile: (fileUrl: string) => Promise<boolean>;
+  deleteUploadedFile: (
+    fileUrl: string,
+    fileLimit: FileLimit,
+    accept: string[]
+  ) => Promise<boolean>;
   clear: () => void;
 }>((set, get) => {
   const api = useFileApi();
@@ -23,125 +32,183 @@ const useFilesState = create<{
     }));
   };
 
-  const uploadFiles = async (files: File[], fileLimit?: FileLimit) => {
-    // 現在のファイル数を取得
-    const currentUploadedFiles = get().uploadedFiles;
-    let fileCount = currentUploadedFiles.filter(
-      (file) => file.type === 'file'
-    ).length;
-    let imageFileCount = currentUploadedFiles.filter(
-      (file) => file.type === 'image'
-    ).length;
-    let videoFileCount = currentUploadedFiles.filter(
-      (file) => file.type === 'video'
-    ).length;
+  // Convert JS File Object to UploadedFileType to handle file upload status
+  const convertFile2UploadedFileType = (file: File): UploadedFileType => {
+    const getFileType = (fileType: string) => {
+      if (fileType.includes('image')) return 'image';
+      if (fileType.includes('video')) return 'video';
+      return 'file';
+    };
+    return {
+      file,
+      name: file.name,
+      type: getFileType(file.type),
+      uploading: true,
+      errorMessages: [],
+    } as UploadedFileType;
+  };
 
-    // アップロードされたファイルの検証
-    const errorMessages: string[] = [];
+  // Validated given uploadedFiles, return updated uploadedFiles (no side effect) and errorMessages
+  const validateUploadedFiles = async (
+    uploadedFiles: UploadedFileType[],
+    fileLimit: FileLimit,
+    accept: string[]
+  ) => {
+    let fileCount = 0;
+    let imageFileCount = 0;
+    let videoFileCount = 0;
+
+    // filter は非同期関数が利用できないため先に評価を行う
     const isMimeSpoofedResults = await Promise.all(
-      files.map(async (file) => {
-        // filter は非同期関数が利用できないため先に評価を行う
+      uploadedFiles.map(async (uploadedFile) => {
         // file.type は拡張子ベースで MIME を取得する一方、fileTypeFromStream はファイルヘッダの Signature を確認する
-        const realMimeType = (await fileTypeFromStream(file.stream()))?.mime;
+        const realMimeType = (
+          await fileTypeFromStream(uploadedFile.file.stream())
+        )?.mime;
         // exception when file is doc or xls
         const isDocOrXls =
           ['application/msword', 'application/vnd.ms-excel'].includes(
-            file.type || ''
+            uploadedFile.file.type || ''
           ) && realMimeType === 'application/x-cfb';
         const isMimeSpoofed =
-          file.type && realMimeType && file.type != realMimeType && !isDocOrXls;
+          uploadedFile.file.type &&
+          realMimeType &&
+          uploadedFile.file.type != realMimeType &&
+          !isDocOrXls;
         return isMimeSpoofed;
       })
     );
-    const uploadedFiles: UploadedFileType[] = files
-      .filter((file, idx) => {
+
+    // アップロードされたファイルの検証
+    const updatedFiles: UploadedFileType[] = uploadedFiles.map(
+      (uploadedFile, idx) => {
+        const errorMessages: string[] = [];
+
         // ファイルの拡張子が間違っている場合はフィルタリング
         if (isMimeSpoofedResults[idx]) {
           errorMessages.push(
-            `${file.name} はファイルタイプと拡張子が合致しないファイルです。`
+            `${uploadedFile.file.name} はファイルタイプと拡張子が合致しないファイルです。`
           );
         }
-        return !isMimeSpoofedResults[idx];
-      })
-      .filter((file) => {
+
         // 許可されたファイルタイプをフィルタリング
-        const mediaFormat = ('.' + file.name.split('.').pop()) as string;
-        const isFileAllowed = fileLimit?.accept.includes(mediaFormat);
-        if (!isFileAllowed) {
+        const mediaFormat = ('.' +
+          uploadedFile.file.name.split('.').pop()) as string;
+        const isFileTypeAllowed = accept.includes(mediaFormat);
+        if (accept && accept.length === 0) {
+          errorMessages.push(`このモデルはファイルに対応していません。`);
+        } else if (!isFileTypeAllowed) {
           errorMessages.push(
-            `${file.name} は許可されていない拡張子です。利用できる拡張子は ${fileLimit?.accept.join(', ')} です`
+            `${uploadedFile.file.name} は許可されていない拡張子です。利用できる拡張子は ${accept.join(', ')} です`
           );
         }
-        return isFileAllowed;
-      })
-      .filter((file) => {
+
         // ファイルサイズによるフィルタリング
         const getMaxFileSizeMB = (fileType: string) => {
-          if (fileType.includes('image')) return fileLimit?.maxImageFileSizeMB;
-          if (fileType.includes('video')) return fileLimit?.maxVideoFileSizeMB;
-          return fileLimit?.maxFileSizeMB;
+          if (fileType.includes('image')) return fileLimit.maxImageFileSizeMB;
+          if (fileType.includes('video')) return fileLimit.maxVideoFileSizeMB;
+          return fileLimit.maxFileSizeMB;
         };
-        const maxSizeMB = getMaxFileSizeMB(file.type) || 0;
-        const isFileAllowed = file.size <= maxSizeMB * 1e6;
-        if (!isFileAllowed) {
+        const maxSizeMB = getMaxFileSizeMB(uploadedFile.file.type) || 0;
+        const isFileSizeAllowed = uploadedFile.file.size <= maxSizeMB * 1e6;
+        if (!isFileSizeAllowed) {
           errorMessages.push(
-            `${file.name} は最大ファイルサイズ ${maxSizeMB} MB を超えています。`
+            `${uploadedFile.file.name} は最大ファイルサイズ ${maxSizeMB} MB を超えています。`
           );
         }
-        return isFileAllowed;
-      })
-      .filter((file) => {
+
         // ファイル数によるフィルタリング
-        let isFileAllowed = false;
-        if (file.type.includes('image')) {
+        let isFileNumberAllowed = false;
+        if (uploadedFile.file.type.includes('image')) {
           imageFileCount += 1;
-          isFileAllowed = imageFileCount <= (fileLimit?.maxImageFileCount || 0);
-          if (!isFileAllowed) {
+          isFileNumberAllowed =
+            imageFileCount <= (fileLimit.maxImageFileCount || 0);
+          if (!isFileNumberAllowed) {
             errorMessages.push(
-              `画像ファイルは ${fileLimit?.maxImageFileCount} 個以下にしてください`
+              `画像ファイルは ${fileLimit.maxImageFileCount} 個以下にしてください`
             );
           }
-        } else if (file.type.includes('video')) {
+        } else if (uploadedFile.file.type.includes('video')) {
           videoFileCount += 1;
-          isFileAllowed = videoFileCount <= (fileLimit?.maxVideoFileCount || 0);
-          if (!isFileAllowed) {
+          isFileNumberAllowed =
+            videoFileCount <= (fileLimit.maxVideoFileCount || 0);
+          if (!isFileNumberAllowed) {
             errorMessages.push(
-              `動画ファイルは ${fileLimit?.maxVideoFileCount} 個以下にしてください`
+              `動画ファイルは ${fileLimit.maxVideoFileCount} 個以下にしてください`
             );
           }
         } else {
           fileCount += 1;
-          isFileAllowed = fileCount <= (fileLimit?.maxFileCount || 0);
-          if (!isFileAllowed) {
+          isFileNumberAllowed = fileCount <= (fileLimit.maxFileCount || 0);
+          if (!isFileNumberAllowed) {
             errorMessages.push(
-              `ファイルは ${fileLimit?.maxFileCount} 個以下にしてください`
+              `ファイルは ${fileLimit.maxFileCount} 個以下にしてください`
             );
           }
         }
-        return isFileAllowed;
-      })
-      .map((file) => {
-        const getFileType = (fileType: string) => {
-          if (fileType.includes('image')) return 'image';
-          if (fileType.includes('video')) return 'video';
-          return 'file';
-        };
+
         return {
-          file,
-          name: file.name,
-          type: getFileType(file.type),
-          uploading: true,
-        };
-      });
+          ...uploadedFile,
+          errorMessages: errorMessages,
+        } as UploadedFileType;
+      }
+    );
+
+    return {
+      uploadedFiles: updatedFiles,
+      errorMessages: [
+        ...new Set(
+          updatedFiles.flatMap((uploadedFile) => uploadedFile.errorMessages)
+        ),
+      ],
+    };
+  };
+
+  // Refresh error messages
+  const checkFiles = async (fileLimit: FileLimit, accept: string[]) => {
+    // Get current files
+    const currentUploadedFiles = get().uploadedFiles;
+
+    // Get updated error messages
+    const { uploadedFiles: newUploadedFiles, errorMessages } =
+      await validateUploadedFiles(currentUploadedFiles, fileLimit, accept);
+
+    // Update Files using immer
+    set((state) =>
+      produce(state, (draft) => {
+        draft.uploadedFiles = newUploadedFiles;
+        draft.errorMessages = errorMessages;
+      })
+    );
+  };
+
+  // Handle File Uploads
+  const uploadFiles = async (
+    files: File[],
+    fileLimit: FileLimit,
+    accept: string[]
+  ) => {
+    // Get File
+    const currentUploadedFiles = get().uploadedFiles;
+    const newUploadedFiles: UploadedFileType[] = [
+      ...currentUploadedFiles,
+      ...files.map(convertFile2UploadedFileType),
+    ];
+
+    // Validate File
+    const { uploadedFiles: validatedFiles, errorMessages } =
+      await validateUploadedFiles(newUploadedFiles, fileLimit, accept);
 
+    // Update zustand to reflect current status to UI
     set(() => ({
-      uploadedFiles: produce(get().uploadedFiles, (draft) => {
-        draft.push(...uploadedFiles);
-      }),
-      errorMessages: [...new Set(errorMessages)],
+      uploadedFiles: validatedFiles,
+      errorMessages: errorMessages,
     }));
 
+    // Upload File
     get().uploadedFiles.forEach((uploadedFile, idx) => {
+      if (!uploadedFile.uploading) return;
+
       // 「画像アップロード => 署名付きURL取得 => 画像ダウンロード」だと、画像が画面に表示されるまでに時間がかかるため、
       // 選択した画像をローカルでBASE64エンコーディングし、そのまま画面に表示する（UX改善のため）
       const reader = new FileReader();
@@ -178,12 +245,17 @@ const useFilesState = create<{
     });
   };
 
-  const deleteUploadedFile = async (fileUrl: string) => {
+  // Delete Uploaded File
+  const deleteUploadedFile = async (
+    fileUrl: string,
+    fileLimit: FileLimit,
+    accept: string[]
+  ) => {
     const baseUrl = extractBaseURL(fileUrl);
     const findTargetIndex = () =>
       get().uploadedFiles.findIndex((file) => file.s3Url === baseUrl);
-    let targetIndex = findTargetIndex();
 
+    let targetIndex = findTargetIndex();
     if (targetIndex > -1) {
       // "https://BUCKET_NAME.s3.REGION.amazonaws.com/FILENAME"の形式で設定されている
       const result = /https:\/\/.+\/(?<fileName>.+)/.exec(
@@ -192,22 +264,26 @@ const useFilesState = create<{
       const fileName = result?.groups?.fileName;
 
       if (fileName) {
-        set({
-          uploadedFiles: produce(get().uploadedFiles, (draft) => {
-            draft[targetIndex].deleting = true;
-          }),
-        });
+        // Set deleting state
+        set((state) =>
+          produce(state, (draft) => {
+            draft.uploadedFiles[targetIndex].deleting = true;
+          })
+        );
 
         await api.deleteUploadedFile(fileName);
 
         // 削除処理中に他の画像も削除された場合に、Indexがズレるため再取得する
         targetIndex = findTargetIndex();
+        set((state) =>
+          produce(state, (draft) => {
+            draft.uploadedFiles.splice(targetIndex, 1);
+          })
+        );
+
+        // Refresh error messages
+        await checkFiles(fileLimit, accept);
 
-        set({
-          uploadedFiles: produce(get().uploadedFiles, (draft) => {
-            draft.splice(targetIndex, 1);
-          }),
-        });
         return true;
       }
     }
@@ -219,6 +295,7 @@ const useFilesState = create<{
     uploadedFiles: [],
     errorMessages: [],
     uploadFiles,
+    checkFiles,
     deleteUploadedFile,
   };
 });
@@ -226,6 +303,7 @@ const useFilesState = create<{
 const useFiles = () => {
   const {
     uploadFiles,
+    checkFiles,
     clear,
     uploadedFiles,
     deleteUploadedFile,
@@ -233,9 +311,10 @@ const useFiles = () => {
   } = useFilesState();
   return {
     uploadFiles,
+    checkFiles,
     errorMessages,
     clear,
-    uploadedFiles: uploadedFiles.filter((file) => !file.deleting),
+    uploadedFiles: uploadedFiles,
     deleteUploadedFile,
     uploading: uploadedFiles.some((uploadedFile) => uploadedFile.uploading),
   };
diff --git a/packages/web/src/hooks/useModel.ts b/packages/web/src/hooks/useModel.ts
index bc854c03..ab244d89 100644
--- a/packages/web/src/hooks/useModel.ts
+++ b/packages/web/src/hooks/useModel.ts
@@ -1,4 +1,5 @@
 import { Model } from 'generative-ai-use-cases-jp';
+import { modelFeatureFlags } from '@generative-ai-use-cases-jp/common';
 
 const modelRegion = import.meta.env.VITE_APP_MODEL_REGION;
 
@@ -6,12 +7,10 @@ const modelRegion = import.meta.env.VITE_APP_MODEL_REGION;
 const bedrockModelIds: string[] = JSON.parse(import.meta.env.VITE_APP_MODEL_IDS)
   .map((name: string) => name.trim())
   .filter((name: string) => name);
-
-const multiModalModelIds: string[] = JSON.parse(
-  import.meta.env.VITE_APP_MULTI_MODAL_MODEL_IDS
-)
-  .map((name: string) => name.trim())
-  .filter((name: string) => name);
+const visionModelIds: string[] = bedrockModelIds.filter(
+  (modelId) => modelFeatureFlags[modelId].image
+);
+const visionEnabled: boolean = visionModelIds.length > 0;
 
 const endpointNames: string[] = JSON.parse(
   import.meta.env.VITE_APP_ENDPOINT_NAMES
@@ -68,7 +67,9 @@ export const findModelByModelId = (modelId: string) => {
 export const MODELS = {
   modelRegion: modelRegion,
   modelIds: [...bedrockModelIds, ...endpointNames],
-  multiModalModelIds: multiModalModelIds,
+  modelFeatureFlags: modelFeatureFlags,
+  visionModelIds: visionModelIds,
+  visionEnabled: visionEnabled,
   imageGenModelIds: imageGenModelIds,
   agentNames: agentNames,
   textModels: textModels,
diff --git a/packages/web/src/main.tsx b/packages/web/src/main.tsx
index d522aa42..1fb48cee 100644
--- a/packages/web/src/main.tsx
+++ b/packages/web/src/main.tsx
@@ -43,8 +43,7 @@ const ragKnowledgeBaseEnabled: boolean =
 const samlAuthEnabled: boolean =
   import.meta.env.VITE_APP_SAMLAUTH_ENABLED === 'true';
 const agentEnabled: boolean = import.meta.env.VITE_APP_AGENT_ENABLED === 'true';
-const { multiModalModelIds } = MODELS;
-const multiModalEnabled: boolean = multiModalModelIds.length > 0;
+const { visionEnabled } = MODELS;
 const useCaseBuilderEnabled: boolean =
   import.meta.env.VITE_APP_USE_CASE_BUILDER_ENABLED === 'true';
 
@@ -107,7 +106,7 @@ const routes: RouteObject[] = [
     path: '/prompt-flow-chat',
     element: <PromptFlowChatPage />,
   },
-  multiModalEnabled
+  visionEnabled
     ? {
         path: '/video',
         element: <VideoAnalyzerPage />,
diff --git a/packages/web/src/pages/AgentChatPage.tsx b/packages/web/src/pages/AgentChatPage.tsx
index 62900d97..bddbeac6 100644
--- a/packages/web/src/pages/AgentChatPage.tsx
+++ b/packages/web/src/pages/AgentChatPage.tsx
@@ -18,19 +18,23 @@ import useFiles from '../hooks/useFiles';
 import { FileLimit } from 'generative-ai-use-cases-jp';
 
 const fileLimit: FileLimit = {
-  accept: [
-    '.csv',
-    '.doc',
-    '.docx',
-    '.html',
-    '.md',
-    '.pdf',
-    '.txt',
-    '.xls',
-    '.xlsx',
-    '.yaml',
-    '.json',
-  ],
+  accept: {
+    doc: [
+      '.csv',
+      '.doc',
+      '.docx',
+      '.html',
+      '.md',
+      '.pdf',
+      '.txt',
+      '.xls',
+      '.xlsx',
+      '.yaml',
+      '.json',
+    ],
+    image: [],
+    video: [],
+  },
   maxFileCount: 5,
   maxFileSizeMB: 10,
   maxImageFileCount: 0,
@@ -156,7 +160,11 @@ const AgentChatPage: React.FC = () => {
     setIsOver(false);
     if (event.dataTransfer.files) {
       // ファイルを反映しアップロード
-      uploadFiles(Array.from(event.dataTransfer.files), fileLimit);
+      uploadFiles(
+        Array.from(event.dataTransfer.files),
+        fileLimit,
+        fileLimit.accept.doc
+      );
     }
   };
 
@@ -235,6 +243,7 @@ const AgentChatPage: React.FC = () => {
             onReset={onReset}
             fileUpload={true}
             fileLimit={fileLimit}
+            accept={fileLimit.accept.doc}
           />
         </div>
       </div>
diff --git a/packages/web/src/pages/ChatPage.tsx b/packages/web/src/pages/ChatPage.tsx
index 59b4e5f1..c613438d 100644
--- a/packages/web/src/pages/ChatPage.tsx
+++ b/packages/web/src/pages/ChatPage.tsx
@@ -27,26 +27,22 @@ import useFiles from '../hooks/useFiles';
 import { FileLimit, SystemContext } from 'generative-ai-use-cases-jp';
 
 const fileLimit: FileLimit = {
-  accept: [
-    '.csv',
-    '.doc',
-    '.docx',
-    '.html',
-    '.md',
-    '.pdf',
-    '.txt',
-    '.xls',
-    '.xlsx',
-    '.gif',
-    '.jpg',
-    '.jpeg',
-    '.png',
-    '.webp',
-    '.mkv',
-    '.mov',
-    '.mp4',
-    '.webm',
-  ],
+  accept: {
+    doc: [
+      '.csv',
+      '.doc',
+      '.docx',
+      '.html',
+      '.md',
+      '.pdf',
+      '.txt',
+      '.xls',
+      '.xlsx',
+      '.gif',
+    ],
+    image: ['.jpg', '.jpeg', '.png', '.webp'],
+    video: ['.mkv', '.mov', '.mp4', '.webm'],
+  },
   maxFileCount: 5,
   maxFileSizeMB: 4.5,
   maxImageFileCount: 20,
@@ -161,9 +157,18 @@ const ChatPage: React.FC = () => {
     }
   }, [chatId, getChatTitle]);
 
-  const fileUpload = useMemo(() => {
-    return MODELS.multiModalModelIds.includes(modelId);
+  const accept = useMemo(() => {
+    if (!modelId) return [];
+    const feature = MODELS.modelFeatureFlags[modelId];
+    return [
+      ...(feature.doc ? fileLimit.accept.doc : []),
+      ...(feature.image ? fileLimit.accept.image : []),
+      ...(feature.video ? fileLimit.accept.video : []),
+    ];
   }, [modelId]);
+  const fileUpload = useMemo(() => {
+    return accept.length > 0;
+  }, [accept]);
 
   useEffect(() => {
     const _modelId = !modelId ? availableModels[0] : modelId;
@@ -354,7 +359,7 @@ const ChatPage: React.FC = () => {
     setIsOver(false);
     if (event.dataTransfer.files) {
       // ファイルを反映しアップロード
-      uploadFiles(Array.from(event.dataTransfer.files), fileLimit);
+      uploadFiles(Array.from(event.dataTransfer.files), fileLimit, accept);
     }
   };
 
@@ -498,6 +503,7 @@ const ChatPage: React.FC = () => {
             onReset={onReset}
             fileUpload={fileUpload}
             fileLimit={fileLimit}
+            accept={accept}
           />
         </div>
       </div>
diff --git a/packages/web/src/pages/LandingPage.tsx b/packages/web/src/pages/LandingPage.tsx
index 80e37217..29b0b4ad 100644
--- a/packages/web/src/pages/LandingPage.tsx
+++ b/packages/web/src/pages/LandingPage.tsx
@@ -39,8 +39,7 @@ const ragEnabled: boolean = import.meta.env.VITE_APP_RAG_ENABLED === 'true';
 const ragKnowledgeBaseEnabled: boolean =
   import.meta.env.VITE_APP_RAG_KNOWLEDGE_BASE_ENABLED === 'true';
 const agentEnabled: boolean = import.meta.env.VITE_APP_AGENT_ENABLED === 'true';
-const { multiModalModelIds } = MODELS;
-const multiModalEnabled: boolean = multiModalModelIds.length > 0;
+const { visionEnabled } = MODELS;
 const getPromptFlows = () => {
   try {
     return JSON.parse(import.meta.env.VITE_APP_PROMPT_FLOWS);
@@ -360,7 +359,7 @@ const LandingPage: React.FC = () => {
           icon={<PiImages />}
           description="画像生成 AI は、テキストや画像を元に新しい画像を生成できます。アイデアを即座に可視化することができ、デザイン作業などの効率化を期待できます。こちらの機能では、プロンプトの作成を LLM に支援してもらうことができます。"
         />
-        {multiModalEnabled && (
+        {visionEnabled && (
           <CardDemo
             label="映像分析"
             onClickDemo={demoVideoAnalyzer}
diff --git a/packages/web/src/pages/VideoAnalyzerPage.tsx b/packages/web/src/pages/VideoAnalyzerPage.tsx
index d7688d22..b6e54750 100644
--- a/packages/web/src/pages/VideoAnalyzerPage.tsx
+++ b/packages/web/src/pages/VideoAnalyzerPage.tsx
@@ -76,24 +76,19 @@ const VideoAnalyzerPage: React.FC = () => {
     clear: clearChat,
   } = useChat(pathname);
   const { setTypingTextInput, typingTextOutput } = useTyping(loading);
-  const { modelIds: availableModels } = MODELS;
-  const availableMultiModalModels = useMemo(() => {
-    return availableModels.filter((modelId) =>
-      MODELS.multiModalModelIds.includes(modelId)
-    );
-  }, [availableModels]);
+  const { visionModelIds } = MODELS;
   const modelId = getModelId();
   const prompter = useMemo(() => {
     return getPrompter(modelId);
   }, [modelId]);
 
   useEffect(() => {
-    const _modelId = !modelId ? availableMultiModalModels[0] : modelId;
+    const _modelId = !modelId ? visionModelIds[0] : modelId;
     if (search !== '') {
       const params = queryString.parse(search) as VideoAnalyzerPageQueryParams;
       setContent(params.content);
       setModelId(
-        availableMultiModalModels.includes(params.modelId ?? '')
+        visionModelIds.includes(params.modelId ?? '')
           ? params.modelId!
           : _modelId
       );
@@ -101,7 +96,7 @@ const VideoAnalyzerPage: React.FC = () => {
       setModelId(_modelId);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [setContent, modelId, availableMultiModalModels, search]);
+  }, [setContent, modelId, visionModelIds, search]);
 
   useEffect(() => {
     setTypingTextInput(analysis);
@@ -183,6 +178,7 @@ const VideoAnalyzerPage: React.FC = () => {
           s3Url: baseUrl,
           base64EncodedData: imageBase64,
           uploading: false,
+          errorMessages: [],
         },
       ];
 
@@ -293,7 +289,7 @@ const VideoAnalyzerPage: React.FC = () => {
               <Select
                 value={modelId}
                 onChange={setModelId}
-                options={availableMultiModalModels.map((m) => {
+                options={visionModelIds.map((m) => {
                   return { value: m, label: m };
                 })}
                 label="モデル"
diff --git a/packages/web/src/pages/useCaseBuilder/UseCaseBuilderEditPage.tsx b/packages/web/src/pages/useCaseBuilder/UseCaseBuilderEditPage.tsx
index d51f2aef..11604f6c 100644
--- a/packages/web/src/pages/useCaseBuilder/UseCaseBuilderEditPage.tsx
+++ b/packages/web/src/pages/useCaseBuilder/UseCaseBuilderEditPage.tsx
@@ -362,7 +362,7 @@ const UseCaseBuilderEditPage: React.FC = () => {
                   setIsDisabledUpdate(false);
                 }}
                 placeholder="プロントテンプレートの書き方については、「ヘルプ」か「サンプル集」をご覧ください。"
-                hint="可変項目(例：{{text:見出し}})が未設定の場合は、作成できません。"
+                hint="Placeholder (例：{{text:ラベル}}) が未設定の場合は、作成できません。"
               />
             </RowItem>
             <RowItem>
diff --git a/packages/web/src/vite-env.d.ts b/packages/web/src/vite-env.d.ts
index 03910e40..fa4e85f9 100644
--- a/packages/web/src/vite-env.d.ts
+++ b/packages/web/src/vite-env.d.ts
@@ -16,7 +16,6 @@ interface ImportMetaEnv {
   readonly VITE_APP_VERSION: string;
   readonly VITE_APP_MODEL_REGION: string;
   readonly VITE_APP_MODEL_IDS: string;
-  readonly VITE_APP_MULTI_MODAL_MODEL_IDS: string;
   readonly VITE_APP_IMAGE_MODEL_IDS: string;
   readonly VITE_APP_ENDPOINT_NAMES: string;
   readonly VITE_APP_SAMLAUTH_ENABLED: string;
diff --git a/setup-env.sh b/setup-env.sh
index 807b1553..ac82ad7f 100644
--- a/setup-env.sh
+++ b/setup-env.sh
@@ -24,7 +24,6 @@ export VITE_APP_AGENT_ENABLED=`extract_value "$stack_output" AgentEnabled`
 export VITE_APP_SELF_SIGN_UP_ENABLED=`extract_value "$stack_output" SelfSignUpEnabled`
 export VITE_APP_MODEL_REGION=`extract_value "$stack_output" ModelRegion`
 export VITE_APP_MODEL_IDS=`extract_value "$stack_output" ModelIds`
-export VITE_APP_MULTI_MODAL_MODEL_IDS=`extract_value "$stack_output" MultiModalModelIds`
 export VITE_APP_IMAGE_MODEL_IDS=`extract_value "$stack_output" ImageGenerateModelIds`
 export VITE_APP_ENDPOINT_NAMES=`extract_value "$stack_output" EndpointNames`
 export VITE_APP_SAMLAUTH_ENABLED=`extract_value "$stack_output" SamlAuthEnabled`