diff --git a/src/app/srt-player/components/AppCard.tsx b/src/app/srt-player/components/AppCard.tsx
index 5e58f72..341ae0b 100644
--- a/src/app/srt-player/components/AppCard.tsx
+++ b/src/app/srt-player/components/AppCard.tsx
@@ -11,7 +11,7 @@ export default function AppCard() {
     const [srtUrl, setSrtUrl] = useState<string | null>(null);
 
     return (
-        <div className="min-w-[410px] max-h-[1000px] max-w-[1400px] flex items-center flex-col bg-gray-200 rounded shadow-2xl w-8/12 py-12">
+        <div className="min-w-[410px] max-w-[1000px] w-10/12 flex items-center flex-col bg-gray-200 rounded shadow-2xl py-12">
             <p className="text-4xl font-extrabold">SRT Video Player</p>
             <VideoPanel
                 videoUrl={videoUrl}
diff --git a/src/app/srt-player/components/VideoPlayer/VideoPanel.tsx b/src/app/srt-player/components/VideoPlayer/VideoPanel.tsx
index 1cebb14..64a2c06 100644
--- a/src/app/srt-player/components/VideoPlayer/VideoPanel.tsx
+++ b/src/app/srt-player/components/VideoPlayer/VideoPanel.tsx
@@ -155,16 +155,14 @@ const VideoPanel = forwardRef<HTMLVideoElement, VideoPanelProps>((
 
     return (
         <div className="flex flex-col w-9/12" onKeyDown={handleKeyDownEvent}>
-            <video className="max-h-80" ref={videoRef} onTimeUpdate={timeUpdate}></video>
+            <video className="w-12/12" ref={videoRef} onTimeUpdate={timeUpdate}></video>
             <SubtitleDisplay subtitle={subtitle}></SubtitleDisplay>
-            <div className="buttons">
-                <ul className="">
-                    <Button label={isPlaying ? 'PAUSE' : 'PLAY'} onClick={togglePlayPause}></Button>
-                    <Button label="NEXT" onClick={next}></Button>
-                    <Button label="PREVIOUS" onClick={previous}></Button>
-                    <Button label="RESTART" onClick={restart}></Button>
-                    <Button label={`AUTOPAUSE(${autoPause ? 'Y' : 'N'})`} onClick={handleAutoPauseToggle}></Button>
-                </ul>
+            <div className="buttons flex mt-2 gap-2 flex-wrap">
+                <Button label={isPlaying ? 'PAUSE' : 'PLAY'} onClick={togglePlayPause}></Button>
+                <Button label="NEXT" onClick={next}></Button>
+                <Button label="PREVIOUS" onClick={previous}></Button>
+                <Button label="RESTART" onClick={restart}></Button>
+                <Button label={`AUTOPAUSE(${autoPause ? 'Y' : 'N'})`} onClick={handleAutoPauseToggle}></Button>
             </div>
             <input className="seekbar" type="range" min={0} max={srtLength} onChange={handleSeek} step={1} value={progress}></input>
             <span>{spanText}</span>
diff --git a/src/app/word-board/page.tsx b/src/app/word-board/page.tsx
index 2d89fe1..76789c4 100644
--- a/src/app/word-board/page.tsx
+++ b/src/app/word-board/page.tsx
@@ -139,19 +139,21 @@ export default function Home() {
   //   inputRef.current.value = '';
   // }
   return (
-    <div onKeyDown={handleKeyDown} className="p-5 my-10 mx-auto bg-gray-200 rounded shadow-2xl w-[1050px]">
-      <WordBoard selectWord={selectWord} words={words as [Word]} setWords={setWords} />
-      <div className="flex justify-center rounded mt-3 w-[1000px]">
-        <input ref={inputRef} placeholder="word to operate" type="text" className="focus:outline-none border-b-2 border-black" />
-        <Button label="插入" onClick={insertWord}></Button>
-        <Button label="删除" onClick={deleteWord}></Button>
-        <Button label="搜索" onClick={searchWord}></Button>
-        <Button label="导入" onClick={importWords}></Button>
-        <Button label="导出" onClick={exportWords}></Button>
-        <Button label="删光" onClick={deleteAll}></Button>
-        {/* <Button label="朗读" onClick={readWordAloud}></Button> */}
+    <div className="flex w-screen h-screen justify-center items-center">
+      <div onKeyDown={handleKeyDown} className="p-5 bg-gray-200 rounded shadow-2xl">
+        <WordBoard selectWord={selectWord} words={words as [Word]} setWords={setWords} />
+        <div className="flex justify-center rounded mt-3">
+          <input ref={inputRef} placeholder="word to operate" type="text" className="focus:outline-none border-b-2 border-black" />
+          <Button label="插入" onClick={insertWord}></Button>
+          <Button label="删除" onClick={deleteWord}></Button>
+          <Button label="搜索" onClick={searchWord}></Button>
+          <Button label="导入" onClick={importWords}></Button>
+          <Button label="导出" onClick={exportWords}></Button>
+          <Button label="删光" onClick={deleteAll}></Button>
+          {/* <Button label="朗读" onClick={readWordAloud}></Button> */}
+        </div>
+        <input type="file" ref={inputFileRef} className="hidden" accept="application/json" onChange={handleFileChange}></input>
       </div>
-      <input type="file" ref={inputFileRef} className="hidden" accept="application/json" onChange={handleFileChange}></input>
     </div>
   );
 }
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 74f88fb..6939b6b 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -1,6 +1,6 @@
 export default function Button({ label, onClick }: { label: string, onClick?: () => void }) {
   return (
-    <button onClick={onClick} className="m-1 px-2 py-1 rounded bg-white shadow-2xs font-bold hover:bg-gray-300">
+    <button onClick={onClick} className="px-2 py-1 rounded bg-white shadow-2xs font-bold hover:bg-gray-300">
       {label}
     </button>
   );
diff --git a/src/constants.ts b/src/constants.ts
index a01d175..dcd9811 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -1,4 +1,4 @@
-export const BOARD_WIDTH = 1000;
-export const BOARD_HEIGHT = 600;
+export const BOARD_WIDTH = 800;
+export const BOARD_HEIGHT = 500;
 export const TEXT_SIZE = 30;
 export const TEXT_WIDTH = TEXT_SIZE * 0.6;
\ No newline at end of file