diff --git a/src/renderer/src/pages/video/VideoList.tsx b/src/renderer/src/pages/video/VideoList.tsx
new file mode 100644
index 0000000000..3ade2e6dac
--- /dev/null
+++ b/src/renderer/src/pages/video/VideoList.tsx
@@ -0,0 +1,20 @@
+import { useVideos } from '@renderer/hooks/video/useVideos'
+import { Video } from '@renderer/types/video'
+
+export type VideoListProps = { providerId: string }
+
+export const VideoList = ({ providerId }: VideoListProps) => {
+  const { videos } = useVideos(providerId)
+  return (
+    <div className="w-40">
+      {videos.map((video) => (
+        <VideoListItem key={video.id} video={video} />
+      ))}
+    </div>
+  )
+}
+
+const VideoListItem = ({ video }: { video: Video }) => {
+  // TODO: get thumbnail from video
+  return <div>{video.metadata.id}</div>
+}
diff --git a/src/renderer/src/pages/video/VideoPage.tsx b/src/renderer/src/pages/video/VideoPage.tsx
index deef59d076..46b9b72d13 100644
--- a/src/renderer/src/pages/video/VideoPage.tsx
+++ b/src/renderer/src/pages/video/VideoPage.tsx
@@ -9,6 +9,7 @@ import { useTranslation } from 'react-i18next'
 
 import { ModelSetting } from './settings/ModelSetting'
 import { ProviderSetting } from './settings/ProviderSetting'
+import { VideoList } from './VideoList'
 import { VideoPanel } from './VideoPanel'
 
 export const VideoPage = () => {
@@ -31,7 +32,7 @@ export const VideoPage = () => {
         <VideoPanel provider={provider} />
         <Divider orientation="vertical" />
         {/* Video list */}
-        <div className="w-40"></div>
+        <VideoList providerId={providerId} />
       </div>
     </div>
   )