diff --git a/pages/_app.js b/pages/_app.js
index ba33b1d..f5823ce 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -60,8 +60,10 @@ import ThemeLocalization from '@/components/ThemeLocalization';
 import MotionLazyContainer from '@/components/animate/MotionLazyContainer';
 
 //vidstack
-import 'vidstack/styles/base.css';
-import '@/public/css/video.css';
+//import 'vidstack/styles/base.css';
+//import '@/public/css/video.css';
+import '@vidstack/react/player/styles/default/theme.css';
+import '@vidstack/react/player/styles/default/layouts/video.css';
 
 // ----------------------------------------------------------------------
 
diff --git a/pages/api/episode/[id].js b/pages/api/episode/[id].js
index b453207..1d8d4ba 100644
--- a/pages/api/episode/[id].js
+++ b/pages/api/episode/[id].js
@@ -49,7 +49,8 @@ export default async function handler(req, res) {
 
       videoResult.subtitles = sources.data.subtitle.map((s) => ({
         url: s.file?s.file:s,
-        lang: s.label ? s.label : 'Default',
+        lang: s.label ? s.label : s,
+        default:!!(s.default && s.default === true)
       }));
       movie.sources = videoResult.sources;
       movie.subtitles=videoResult.subtitles
diff --git a/pages/api/movie/[id].js b/pages/api/movie/[id].js
index 8c94aff..0e1cce8 100644
--- a/pages/api/movie/[id].js
+++ b/pages/api/movie/[id].js
@@ -44,6 +44,7 @@ export default async function handler(req, res) {
     videoResult.subtitles = sources.data.subtitle.map((s) => ({
       url: s.file?s.file:s,
       lang: s.label ? s.label : s,
+      default:!!(s.default && s.default === true)
     }));
     movie.sources = videoResult.sources;
     movie.subtitles=videoResult.subtitles
diff --git a/pages/api/series/[id].js b/pages/api/series/[id].js
index 8e914b4..5145464 100644
--- a/pages/api/series/[id].js
+++ b/pages/api/series/[id].js
@@ -44,6 +44,7 @@ export default async function handler(req, res) {
     videoResult.subtitles = sources.data.subtitle.map((s) => ({
       url: s.file?s.file:s,
       lang: s.label ? s.label : s,
+      default:!!(s.default && s.default === true)
     }));
     movie.sources = videoResult.sources;
     movie.subtitles=videoResult.subtitles
diff --git a/pages/api/sources/upcloud.js b/pages/api/sources/upcloud.js
index b200449..58be3a6 100644
--- a/pages/api/sources/upcloud.js
+++ b/pages/api/sources/upcloud.js
@@ -73,17 +73,26 @@ export default async function handler(req, res) {
     await (async () => {
       logger.push(interceptedRequest.url());
       if (interceptedRequest.url().includes('.m3u8')) finalResponse.source = interceptedRequest.url();
-      if (interceptedRequest.url().includes('.vtt')) finalResponse.subtitle.push(interceptedRequest.url());
       interceptedRequest.continue();
     })();
   });
 
+  page.on('response', async (interceptedResponse) => {
+    if (interceptedResponse.url().includes('getSources')) {
+      const text = await interceptedResponse.json();
+      const sources = JSON.parse(JSON.stringify(text));
+      finalResponse.subtitle.push(...sources.tracks);
+
+    }
+  });
+
   try {
     const [req] = await Promise.all([
       page.waitForRequest(req => req.url().includes('.m3u8'), { timeout: 20000 }),
       page.goto(`https://rabbitstream.net/v2/embed-4/${id}?z=&_debug=true`, { waitUntil: 'domcontentloaded' }),
     ]);
   } catch (error) {
+    await browser.close();
     return res.status(500).end(`Server Error,check the params.`)
   }
   await browser.close();
@@ -100,6 +109,5 @@ export default async function handler(req, res) {
     'Access-Control-Allow-Headers',
     'X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version'
   )
-  console.log(finalResponse);
   res.json(finalResponse);
 };
diff --git a/pages/api/sources/vidcloud.js b/pages/api/sources/vidcloud.js
index 6c1ba32..b6b55a7 100644
--- a/pages/api/sources/vidcloud.js
+++ b/pages/api/sources/vidcloud.js
@@ -75,10 +75,17 @@ export default async function handler (req, res)  {
     await (async () => {
       logger.push(interceptedRequest.url());
       if (interceptedRequest.url().includes('.m3u8')) finalResponse.source = interceptedRequest.url();
-      if (interceptedRequest.url().includes('.vtt')) finalResponse.subtitle.push(interceptedRequest.url());
       interceptedRequest.continue();
     })();
   });
+  page.on('response', async (interceptedResponse) => {
+    if (interceptedResponse.url().includes('getSources')) {
+      const text = await interceptedResponse.json();
+      const sources = JSON.parse(JSON.stringify(text));
+      finalResponse.subtitle.push(...sources.tracks);
+
+    }
+  });
 
   try {
     const [req] = await Promise.all([
@@ -86,6 +93,7 @@ export default async function handler (req, res)  {
       page.goto(`https://rabbitstream.net/v2/embed-4/${id}?z=&_debug=true`, { waitUntil: 'domcontentloaded' }),
     ]);
   } catch (error) {
+    await browser.close();
     return res.status(500).end(`Server Error,check the params.`)
   }
   await browser.close();
@@ -100,6 +108,5 @@ export default async function handler (req, res)  {
     'Access-Control-Allow-Headers',
     'X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version'
   )
-  console.log(finalResponse);
   res.json(finalResponse);
 };
diff --git a/pages/movie/[id].js b/pages/movie/[id].js
index da585d0..e6ecba9 100644
--- a/pages/movie/[id].js
+++ b/pages/movie/[id].js
@@ -21,7 +21,7 @@ import Page from '@/components/Page';
 import HeaderBreadcrumbs from '@/components/HeaderBreadcrumbs';
 import { SkeletonPost } from '@/components/skeleton';
 // sections
-import { VideoPostHero, VideoPostTags, VideoPostRecent } from '@/sections/movies';
+import { VideoPostHero, VideoPostTags, VideoPostRecent,VidstackPlayer } from '@/sections/movies';
 import Iconify from '@/components/Iconify';
 import { useSnackbar } from 'notistack';
 
@@ -117,7 +117,7 @@ export default function BlogPost({ data }) {
 
           {!loading && (
             <Card>
-              <VideoPostHero post={movie} setStreamingServer={setStreamingServer} streamingServer={streamingServer}/>
+              <VidstackPlayer post={movie} setStreamingServer={setStreamingServer} streamingServer={streamingServer}/>
 
               <Box sx={{ p: { xs: 3, md: 5 } }}>
                 <Stack flexWrap="wrap" direction="row" justifyContent="space-between">
@@ -205,7 +205,9 @@ export async function getServerSideProps(context) {
     videoResult.subtitles = sources.data.subtitle.map((s) => ({
       url: s.file?s.file:s,
       lang: s.label ? s.label : s,
+      default:!!(s.default && s.default === true)
     }));
+    console.log(videoResult.subtitles)
     movie.sources = videoResult.sources;
     movie.subtitles=videoResult.subtitles
     return {
diff --git a/pages/tv/[id].js b/pages/tv/[id].js
index c676453..7a116c5 100644
--- a/pages/tv/[id].js
+++ b/pages/tv/[id].js
@@ -22,7 +22,7 @@ import Markdown from '@/components/Markdown';
 import HeaderBreadcrumbs from '@/components/HeaderBreadcrumbs';
 import { SkeletonPost } from '@/components/skeleton';
 // sections
-import { VideoPostHero, VideoPostTags, VideoPostRecent } from '@/sections/movies';
+import { VideoPostHero, VideoPostTags, VideoPostRecent,VidstackPlayer } from '@/sections/movies';
 import Iconify from '@/components/Iconify';
 import { useSnackbar } from 'notistack';
 
@@ -118,7 +118,7 @@ export default function BlogPost({ data }) {
 
           {!loading && (
             <Card>
-              <VideoPostHero post={movie} setStreamingServer={setStreamingServer} streamingServer={streamingServer}/>
+              <VidstackPlayer post={movie} setStreamingServer={setStreamingServer} streamingServer={streamingServer}/>
 
               <Box sx={{ p: { xs: 3, md: 5 } }}>
                 <Stack flexWrap="wrap" direction="row" justifyContent="space-between">
@@ -206,6 +206,7 @@ export async function getServerSideProps(context) {
     videoResult.subtitles = sources.data.subtitle.map((s) => ({
       url: s.file?s.file:s,
       lang: s.label ? s.label : s,
+      default:!!(s.default && s.default === true)
     }));
     movie.sources = videoResult.sources;
     movie.subtitles=videoResult.subtitles
diff --git a/sections/movies/VideoPostHero.js b/sections/movies/VideoPostHero.js
index a949a47..a72d753 100644
--- a/sections/movies/VideoPostHero.js
+++ b/sections/movies/VideoPostHero.js
@@ -345,7 +345,7 @@ export default function VideoPostHero({ post,setStreamingServer,streamingServer
           className={'media'}
           storage="youplex-player"
           load={'eager'}
-          autoplay={true}
+          autoplay={false}
           googleCast={{
             autoJoinPolicy: 'origin_scoped',
             language: 'en-US',
@@ -353,7 +353,7 @@ export default function VideoPostHero({ post,setStreamingServer,streamingServer
         >
           <MediaProvider>
             {subtitles&&subtitles.map((subtitle,index)=>(
-              <Track id={index} src={subtitle.url} kind="subtitles" label={subtitle.lang} lang="en-US" default={!!subtitle.lang.includes('English')} />
+              <Track id={index} src={subtitle.url} kind="subtitles" label={subtitle.lang} lang="en-US" default={subtitle.default} />
             ))}
           </MediaProvider>
           <Subtitles>
diff --git a/sections/movies/VideoPostTags.js b/sections/movies/VideoPostTags.js
index c904262..11b2d8a 100644
--- a/sections/movies/VideoPostTags.js
+++ b/sections/movies/VideoPostTags.js
@@ -4,7 +4,6 @@ import { Box, Chip, Typography,LinearProgress } from '@mui/material';
 import { useSnackbar } from 'notistack';
 // next
 import { useRouter } from 'next/router';
-import useIsMountedRef from "@/hooks/useIsMountedRef";
 import axios from 'axios';
 import { useState } from 'react';
 // components
diff --git a/sections/movies/VidstackPlayer.js b/sections/movies/VidstackPlayer.js
new file mode 100644
index 0000000..76af824
--- /dev/null
+++ b/sections/movies/VidstackPlayer.js
@@ -0,0 +1,182 @@
+import { MediaPlayer, MediaProvider,Poster,Track } from '@vidstack/react';
+import {styled, useTheme } from '@mui/material/styles';
+import { defaultLayoutIcons, DefaultVideoLayout } from '@vidstack/react/player/layouts/default';
+import Avatar from "@/components/Avatar";
+import createAvatar from "@/utils/createAvatar";
+import { fDate } from "@/utils/formatTime";
+import Iconify from "@/components/Iconify";
+import Select from '@mui/material/Select';
+import { useRouter } from 'next/router';
+import FormControl from '@mui/material/FormControl';
+import InputLabel from '@mui/material/InputLabel';
+import {
+  Box,
+  SpeedDial,
+  Typography,
+  SpeedDialAction,
+  MenuItem
+} from '@mui/material';
+import useResponsive from "@/hooks/useResponsive";
+
+export default function VidstackPlayer({ post,setStreamingServer,streamingServer }) {
+  const {
+    id,
+    title,
+    url,
+    cover,
+    image,
+    description,
+    releaseDate,
+    genres,
+    casts,
+    tags,
+    production,
+    country,
+    rating,
+    recommendations,
+    episodes,
+    sources,
+    subtitles
+  } = post;
+  const theme = useTheme();
+  const isDesktop = useResponsive('up', 'sm');
+  const { pathname } = useRouter();
+  const handleChangeStreamingServer = (event) => {
+    setStreamingServer({
+      isChanging:true,
+      server:event.target.value,
+    });
+  };
+
+  const SOCIALS = [
+    {
+      name: 'Facebook',
+      icon: <Iconify icon="eva:facebook-fill" width={20} height={20} color="#1877F2" />,
+    },
+    {
+      name: 'Instagram',
+      icon: <Iconify icon="ant-design:instagram-filled" width={20} height={20} color="#D7336D" />,
+    },
+    {
+      name: 'Linkedin',
+      icon: <Iconify icon="eva:linkedin-fill" width={20} height={20} color="#006097" />,
+    },
+    {
+      name: 'Twitter',
+      icon: <Iconify icon="eva:twitter-fill" width={20} height={20} color="#1C9CEA" />,
+    },
+  ];
+  const FooterStyle = styled('div')(({ theme }) => ({
+    width: '100%',
+    display: 'flex',
+    position: 'relative',
+    alignItems: 'flex-end',
+    paddingLeft: theme.spacing(3),
+    paddingRight: theme.spacing(3),
+    justifyContent: 'space-between',
+    [theme.breakpoints.down('sm')]: {
+      top: 50,
+      height: 10,
+      marginBottom: 50,
+    },
+    [theme.breakpoints.up('lg')]: {
+      bottom: 0,
+    },
+  }));
+  //const stream = sources.find((source) => source.quality&&source.quality.includes('auto'))||sources[0];
+  console.log(sources)
+  const streams=sources.map((source) => {
+    source.src = source.url
+    return source
+  });
+  return (
+    <>
+    <Box
+      component="span"
+      sx={{
+        'width': 1,
+        'display': 'block',
+        'overflow': 'hidden',
+        'position': 'relative',
+        'borderRadius': 1,
+        '& .wrapper': {
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          lineHeight: 0,
+          position: 'absolute',
+          backgroundSize: 'cover !important',
+        },
+      }}
+    >
+    <MediaPlayer
+      title={title}
+      src={streams}
+      crossorigin={true}
+      storage="youplex-player"
+      load={'eager'}
+    >
+      <MediaProvider />
+      <Poster
+        className="vds-poster"
+        src={cover}
+        alt={description}
+      />
+      {subtitles&&subtitles.map((subtitle,index)=>(
+        <Track id={index} src={subtitle.url} kind="subtitles" label={subtitle.lang} lang="en-US" default={subtitle.default} />
+      ))}
+      <DefaultVideoLayout icons={defaultLayoutIcons} />
+    </MediaPlayer>
+    </Box>
+  <FooterStyle>
+    <Box sx={{ display: 'flex', alignItems: 'center' }}>
+      <Avatar
+        alt={title}
+        src={image}
+        color={image ? 'default' : createAvatar(title).color}
+        sx={{ width: 48, height: 48 }}
+      />
+      <Box sx={{ ml: 2 }}>
+        <Typography variant="subtitle1">{title}</Typography>
+        <Typography variant="body2" sx={{ color: 'grey.500' }}>
+          {releaseDate&&fDate(releaseDate)}
+        </Typography>
+      </Box>
+    </Box>
+
+    <SpeedDial
+      direction={isDesktop ? 'left' : 'up'}
+      ariaLabel="Share post"
+      icon={<Iconify icon="eva:share-fill" sx={{ width: 20, height: 20 }} />}
+      sx={{ '& .MuiSpeedDial-fab': { width: 48, height: 48 } }}
+    >
+      {SOCIALS.map((action) => (
+        <SpeedDialAction
+          key={action.name}
+          icon={action.icon}
+          tooltipTitle={action.name}
+          tooltipPlacement="top"
+          FabProps={{ color: 'default' }}
+        />
+      ))}
+    </SpeedDial>
+  </FooterStyle>
+
+  {!pathname.includes('anime')&&(
+    <Box sx={{ display: 'flex', alignItems: 'center',mt:4,p:2 }}>
+      <FormControl fullWidth>
+        <InputLabel id="demo-simple-select-label">Server</InputLabel>
+        <Select
+          value={streamingServer.server}
+          label="Server"
+          onChange={handleChangeStreamingServer}
+        >
+          <MenuItem value={'UpCloud'}>upcloud</MenuItem>
+          <MenuItem value={'VidCloud'}>vidcloud</MenuItem>
+        </Select>
+      </FormControl>
+    </Box>)}
+</>
+  )
+}
diff --git a/sections/movies/index.js b/sections/movies/index.js
index ca95523..65b2b4e 100644
--- a/sections/movies/index.js
+++ b/sections/movies/index.js
@@ -4,3 +4,4 @@ export { default as VideoPostsSort } from '@/sections/movies/VideoPostsSort';
 export { default as VideoPostsSearch } from '@/sections/movies/VideoPostsSearch';
 export { default as VideoPostHero } from '@/sections/movies/VideoPostHero';
 export { default as VideoPostRecent } from '@/sections/movies/VideoPostRecent';
+export { default as VidstackPlayer } from '@/sections/movies/VidstackPlayer';