diff --git a/src/renderer/src/i18n/locales/en-us.json b/src/renderer/src/i18n/locales/en-us.json
index 1054f199b2..b78ea22cf2 100644
--- a/src/renderer/src/i18n/locales/en-us.json
+++ b/src/renderer/src/i18n/locales/en-us.json
@@ -4646,7 +4646,14 @@
     "title": "Update"
   },
   "video": {
-    "title": "Video"
+    "error": {
+      "invalid": "Invalid video"
+    },
+    "prompt": {
+      "placeholder": "describes the video to generate"
+    },
+    "title": "Video",
+    "undefined": "No available video"
   },
   "warning": {
     "missing_provider": "The supplier does not exist; reverted to the default supplier {{provider}}. This may cause issues."
diff --git a/src/renderer/src/pages/video/Video.tsx b/src/renderer/src/pages/video/Video.tsx
new file mode 100644
index 0000000000..e005454de1
--- /dev/null
+++ b/src/renderer/src/pages/video/Video.tsx
@@ -0,0 +1,22 @@
+import { CircleXIcon } from 'lucide-react'
+import { useTranslation } from 'react-i18next'
+
+export interface VideoProps {
+  video: null | undefined
+}
+
+export const Video = ({ video }: VideoProps) => {
+  const { t } = useTranslation()
+  return (
+    <div className="flex h-full w-full items-center justify-center rounded-2xl bg-foreground-200">
+      {video && <video></video>}
+      {video === undefined && t('video.undefined')}
+      {video === null && (
+        <div className="flex h-full w-full flex-col items-center justify-center rounded-2xl bg-danger-100">
+          <CircleXIcon size={64} className="fill-danger text-danger-100" />
+          <span className="font-bold text-2xl">{t('video.error.invalid')}</span>
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/src/renderer/src/pages/video/VideoPage.tsx b/src/renderer/src/pages/video/VideoPage.tsx
index 128436a279..89bf125067 100644
--- a/src/renderer/src/pages/video/VideoPage.tsx
+++ b/src/renderer/src/pages/video/VideoPage.tsx
@@ -7,6 +7,7 @@ import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import { ProviderSetting } from './settings/ProviderSetting'
+import { VideoPanel } from './VideoPanel'
 
 export const VideoPage = () => {
   const { t } = useTranslation()
@@ -21,9 +22,9 @@ export const VideoPage = () => {
           <ProviderSetting providerId={providerId} setProviderId={setProviderId} />
         </div>
         <Divider orientation="vertical" />
-        <div className="flex-1 p-2"></div>
+        <VideoPanel />
         <Divider orientation="vertical" />
-        <div className="w-25"></div>
+        <div className="w-40"></div>
       </div>
     </div>
   )
diff --git a/src/renderer/src/pages/video/VideoPanel.tsx b/src/renderer/src/pages/video/VideoPanel.tsx
new file mode 100644
index 0000000000..42d5553797
--- /dev/null
+++ b/src/renderer/src/pages/video/VideoPanel.tsx
@@ -0,0 +1,39 @@
+import { Button, Skeleton, Textarea } from '@heroui/react'
+import { ArrowUp } from 'lucide-react'
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import { Video } from './Video'
+
+export const VideoPanel = () => {
+  const { t } = useTranslation()
+  const [prompt, setPrompt] = useState('')
+  // TODO: get video job from api
+  const video = { success: false, data: undefined }
+  return (
+    <div className="flex flex-1 flex-col p-2">
+      <div className="m-8 flex-1">
+        <Skeleton className="h-full w-full rounded-2xl" classNames={{ content: 'h-full w-full' }} isLoaded={true}>
+          <Video video={video.data} />
+        </Skeleton>
+      </div>
+      <div className="relative">
+        <Textarea
+          label={t('common.prompt')}
+          placeholder={t('video.prompt.placeholder')}
+          value={prompt}
+          onValueChange={setPrompt}
+          isClearable
+          classNames={{ inputWrapper: 'pb-8' }}
+        />
+        <Button
+          color="primary"
+          radius="full"
+          startContent={<ArrowUp size={16} className="text-primary-foreground" />}
+          isIconOnly
+          className="absolute right-1 bottom-1 h-6 w-6 min-w-0"
+        />
+      </div>
+    </div>
+  )
+}