diff --git a/apps/web/package.json b/apps/web/package.json
index 1ccb5cd..89dc198 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -11,6 +11,7 @@
   "dependencies": {
     "@conform-to/react": "^1.1.5",
     "@conform-to/zod": "^1.1.5",
+    "@icons-pack/react-simple-icons": "^10.0.0",
     "@peace-net/shared": "workspace:*",
     "@peace-net/ui": "workspace:*",
     "@squircle-js/react": "^1.2.0",
diff --git a/apps/web/src/app/(main)/dashboard/(palygroud)/components/playground-form.tsx b/apps/web/src/app/(main)/dashboard/(palygroud)/components/playground-form.tsx
index 6615b9f..7caec1d 100644
--- a/apps/web/src/app/(main)/dashboard/(palygroud)/components/playground-form.tsx
+++ b/apps/web/src/app/(main)/dashboard/(palygroud)/components/playground-form.tsx
@@ -2,6 +2,7 @@
 
 import { getFormProps, useForm } from '@conform-to/react'
 import { getZodConstraint, parseWithZod } from '@conform-to/zod'
+import { SiAnthropic, SiGoogle, SiOpenai } from '@icons-pack/react-simple-icons'
 import { Button } from '@peace-net/ui/components/ui/button'
 import { Label } from '@peace-net/ui/components/ui/label'
 import { Loader2Icon, PlayIcon } from 'lucide-react'
@@ -9,6 +10,7 @@ import { useActionState } from 'react'
 
 import { Field, FieldError } from '~/components/common/field'
 import { RadioGroupConform } from '~/components/conform/radio-group'
+import { SelectConform } from '~/components/conform/select'
 import { SliderConform } from '~/components/conform/slider'
 import { TextareaConform } from '~/components/conform/textarea'
 
@@ -41,6 +43,9 @@ export function PlaygroundForm() {
       score_threshold: isSuccessResult(lastResult)
         ? lastResult.value.score_threshold
         : 0.5,
+      model: isSuccessResult(lastResult)
+        ? lastResult.value.model
+        : 'gpt-4o-mini',
       result: isSuccessResult(lastResult) ? lastResult.value.result : '',
     },
   })
@@ -95,6 +100,29 @@ export function PlaygroundForm() {
             )}
           </Field>
         )}
+        <Field>
+          <Label htmlFor={fields.model.id}>使用するAIモデル</Label>
+          <SelectConform
+            placeholder="AIモデルを選択"
+            meta={fields.model}
+            items={[
+              { value: 'gpt-4o-mini', name: 'GPT-4o mini', Icon: SiOpenai },
+              {
+                value: 'claude-3-haiku',
+                name: 'Claude 3 Haiku',
+                Icon: SiAnthropic,
+              },
+              {
+                value: 'gemini-1.5-flash',
+                name: 'Gemini 1.5 Flash',
+                Icon: SiGoogle,
+              },
+            ]}
+          />
+          {fields.model.errors && (
+            <FieldError>{fields.model.errors}</FieldError>
+          )}
+        </Field>
         <Field>
           <Label htmlFor={fields.text.id}>テキスト</Label>
           <TextareaConform
diff --git a/apps/web/src/app/(main)/dashboard/(palygroud)/schemas/index.ts b/apps/web/src/app/(main)/dashboard/(palygroud)/schemas/index.ts
index befbd0f..e7a0f9c 100644
--- a/apps/web/src/app/(main)/dashboard/(palygroud)/schemas/index.ts
+++ b/apps/web/src/app/(main)/dashboard/(palygroud)/schemas/index.ts
@@ -1,3 +1,4 @@
+import { modelsSchema } from '@peace-net/shared/schemas/model'
 import { z } from 'zod'
 
 export const playgroundSchema = z.object({
@@ -9,6 +10,7 @@ export const playgroundSchema = z.object({
     .min(1, { message: 'テキストは1文字以上で入力してください' })
     .max(500, { message: 'テキストは500文字以下で入力してください' }),
   score_threshold: z.number().max(1).min(0.1).optional().default(0.5),
+  model: modelsSchema.optional().default('gpt-4o-mini'),
   result: z.any().optional(),
   isLimitReached: z.boolean().optional(),
 })
diff --git a/apps/web/src/components/conform/select.tsx b/apps/web/src/components/conform/select.tsx
new file mode 100644
index 0000000..3fe0bdd
--- /dev/null
+++ b/apps/web/src/components/conform/select.tsx
@@ -0,0 +1,77 @@
+import {
+  type FieldMetadata,
+  unstable_useControl as useControl,
+} from '@conform-to/react'
+import type { IconType} from '@icons-pack/react-simple-icons';
+import { SiReact } from '@icons-pack/react-simple-icons'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@peace-net/ui/components/ui/select'
+import type { ComponentProps, ElementRef } from 'react'
+import { useRef } from 'react'
+
+export const SelectConform = ({
+  meta,
+  items,
+  placeholder,
+  ...props
+}: {
+  meta: FieldMetadata<string>
+  items: Array<{ name: string; value: string; Icon?: IconType }>
+  placeholder: string
+} & ComponentProps<typeof Select>) => {
+  const selectRef = useRef<ElementRef<typeof SelectTrigger>>(null)
+  const control = useControl(meta)
+
+  return (
+    <>
+      <select
+        name={meta.name}
+        defaultValue={meta.initialValue ?? ''}
+        className="sr-only"
+        ref={control.register}
+        aria-hidden
+        tabIndex={-1}
+        onFocus={() => {
+          selectRef.current?.focus()
+        }}
+      >
+        <option value="" />
+        {items.map((option) => (
+          <option key={option.value} value={option.value} />
+        ))}
+      </select>
+
+      <Select
+        {...props}
+        value={control.value ?? ''}
+        onValueChange={control.change}
+        onOpenChange={(open) => {
+          if (!open) {
+            control.blur()
+          }
+        }}
+      >
+        <SelectTrigger>
+          <SelectValue placeholder={placeholder} />
+        </SelectTrigger>
+        <SelectContent>
+          {items.map((item) => {
+            return (
+              <SelectItem key={item.value} value={item.value}>
+                <div className="flex items-center gap-1.5">
+                  {item.Icon && <item.Icon size={16} />}
+                  {item.name}
+                </div>
+              </SelectItem>
+            )
+          })}
+        </SelectContent>
+      </Select>
+    </>
+  )
+}
diff --git a/packages/ui/src/components/ui/select.tsx b/packages/ui/src/components/ui/select.tsx
index a608c73..ff41a07 100644
--- a/packages/ui/src/components/ui/select.tsx
+++ b/packages/ui/src/components/ui/select.tsx
@@ -125,7 +125,7 @@ const SelectItem = React.forwardRef<
   >
     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <SelectPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
+        <Check className="h-4 w-4 text-teal-500" />
       </SelectPrimitive.ItemIndicator>
     </span>
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6d381ad..5ea74bf 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -124,6 +124,9 @@ importers:
       '@conform-to/zod':
         specifier: ^1.1.5
         version: 1.1.5(zod@3.23.8)
+      '@icons-pack/react-simple-icons':
+        specifier: ^10.0.0
+        version: 10.0.0(react@19.0.0-rc-8269d55d-20240802)
       '@peace-net/shared':
         specifier: workspace:*
         version: link:../../packages/shared
@@ -1694,6 +1697,11 @@ packages:
     resolution: {integrity: sha512-6EwiSjwWYP7pTckG6I5eyFANjPhmPjUX9JRLUSfNPC7FX7zK9gyZAfUEaECL6ALTpGX5AjnBq3C9XmVWPitNpw==}
     deprecated: Use @eslint/object-schema instead
 
+  '@icons-pack/react-simple-icons@10.0.0':
+    resolution: {integrity: sha512-oU0PVDx9sbNQjRxJN555dsHbRApYN+aBq/O9+wo3JgNkEfvBMgAEtsSGtXWWXQsLAxJcYiFOCzBWege/Xj/JFQ==}
+    peerDependencies:
+      react: ^16.13 || ^17 || ^18
+
   '@img/sharp-darwin-arm64@0.33.4':
     resolution: {integrity: sha512-p0suNqXufJs9t3RqLBO6vvrgr5OhgbWp76s5gTRvdmxmuv9E1rcaqGUsl3l4mKVmXPkTkTErXediAui4x+8PSA==}
     engines: {glibc: '>=2.26', node: ^18.17.0 || ^20.3.0 || >=21.0.0, npm: '>=9.6.5', pnpm: '>=7.1.0', yarn: '>=3.2.0'}
@@ -10581,6 +10589,10 @@ snapshots:
 
   '@humanwhocodes/object-schema@2.0.2': {}
 
+  '@icons-pack/react-simple-icons@10.0.0(react@19.0.0-rc-8269d55d-20240802)':
+    dependencies:
+      react: 19.0.0-rc-8269d55d-20240802
+
   '@img/sharp-darwin-arm64@0.33.4':
     optionalDependencies:
       '@img/sharp-libvips-darwin-arm64': 1.0.2