diff --git a/src/components/olmap/HealthRiskAnalysis/Timeline.tsx b/src/components/olmap/HealthRiskAnalysis/Timeline.tsx
index 9d8742b..9f31964 100644
--- a/src/components/olmap/HealthRiskAnalysis/Timeline.tsx
+++ b/src/components/olmap/HealthRiskAnalysis/Timeline.tsx
@@ -59,6 +59,23 @@ interface TimelineProps {
   schemeName?: string;
 }
 
+const timelineIconButtonSx = {
+  width: 32,
+  height: 32,
+  borderRadius: "50%",
+  flexShrink: 0,
+  overflow: "hidden",
+  "&:hover": {
+    borderRadius: "50%",
+  },
+  "&.Mui-focusVisible": {
+    borderRadius: "50%",
+  },
+  "& .MuiTouchRipple-root": {
+    borderRadius: "50%",
+  },
+} as const;
+
 const Timeline: React.FC<TimelineProps> = ({
   disableDateSelection = false,
 }) => {
@@ -445,7 +462,7 @@ const Timeline: React.FC<TimelineProps> = ({
   };
 
   return (
-    <div className="absolute bottom-4 left-1/2 -translate-x-1/2 z-10 w-[920px] opacity-90 hover:opacity-100 transition-opacity duration-300">
+    <div className="absolute bottom-4 left-1/2 z-10 w-[950px] max-w-[calc(100vw-2rem)] -translate-x-1/2 opacity-90 transition-opacity duration-300 hover:opacity-100">
       <LocalizationProvider
         dateAdapter={AdapterDayjs}
         adapterLocale="zh-cn"
@@ -481,6 +498,7 @@ const Timeline: React.FC<TimelineProps> = ({
                     onClick={handleDayStepBackward}
                     size="small"
                     disabled={disableDateSelection}
+                    sx={timelineIconButtonSx}
                   >
                     <FiSkipBack />
                   </IconButton>
@@ -517,6 +535,7 @@ const Timeline: React.FC<TimelineProps> = ({
                       selectedDateTime.toDateString() ===
                         new Date().toDateString()
                     }
+                    sx={timelineIconButtonSx}
                   >
                     <FiSkipForward />
                   </IconButton>
@@ -545,6 +564,7 @@ const Timeline: React.FC<TimelineProps> = ({
                     color="primary"
                     onClick={handleStepBackward}
                     size="small"
+                    sx={timelineIconButtonSx}
                   >
                     <TbArrowBackUp />
                   </IconButton>
@@ -555,6 +575,7 @@ const Timeline: React.FC<TimelineProps> = ({
                     color="primary"
                     onClick={isPlaying ? handlePause : handlePlay}
                     size="small"
+                    sx={timelineIconButtonSx}
                   >
                     {isPlaying ? <Pause /> : <PlayArrow />}
                   </IconButton>
@@ -565,6 +586,7 @@ const Timeline: React.FC<TimelineProps> = ({
                     color="primary"
                     onClick={handleStepForward}
                     size="small"
+                    sx={timelineIconButtonSx}
                   >
                     <TbArrowForwardUp />
                   </IconButton>
@@ -575,6 +597,7 @@ const Timeline: React.FC<TimelineProps> = ({
                     color="secondary"
                     onClick={handleStop}
                     size="small"
+                    sx={timelineIconButtonSx}
                   >
                     <Stop />
                   </IconButton>
diff --git a/src/components/olmap/core/Controls/Timeline.tsx b/src/components/olmap/core/Controls/Timeline.tsx
index 3fe54da..6bfbfce 100644
--- a/src/components/olmap/core/Controls/Timeline.tsx
+++ b/src/components/olmap/core/Controls/Timeline.tsx
@@ -39,6 +39,23 @@ interface TimelineProps {
   schemeType?: string;
 }
 
+const timelineIconButtonSx = {
+  width: 32,
+  height: 32,
+  borderRadius: "50%",
+  flexShrink: 0,
+  overflow: "hidden",
+  "&:hover": {
+    borderRadius: "50%",
+  },
+  "&.Mui-focusVisible": {
+    borderRadius: "50%",
+  },
+  "& .MuiTouchRipple-root": {
+    borderRadius: "50%",
+  },
+} as const;
+
 const NOOP_SET_CURRENT_TIME = (_: any) => undefined;
 const NOOP_SET_SELECTED_DATE = (_: any) => undefined;
 
@@ -665,7 +682,7 @@ const Timeline: React.FC<TimelineProps> = ({
     <Draggable nodeRef={draggableRef} handle=".drag-handle">
       <div
         ref={draggableRef}
-        className="absolute bottom-4 left-1/2 -translate-x-1/2 z-10 w-[920px] opacity-90 hover:opacity-100 transition-opacity duration-300"
+        className="absolute bottom-4 left-1/2 z-10 w-[950px] max-w-[calc(100vw-2rem)] -translate-x-1/2 opacity-90 transition-opacity duration-300 hover:opacity-100"
       >
         <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale="zh-cn">
           <Paper
@@ -723,6 +740,7 @@ const Timeline: React.FC<TimelineProps> = ({
                       onClick={handleDayStepBackward}
                       size="small"
                       disabled={disableDateSelection}
+                      sx={timelineIconButtonSx}
                     >
                       <FiSkipBack />
                     </IconButton>
@@ -757,6 +775,7 @@ const Timeline: React.FC<TimelineProps> = ({
                         selectedDate.toDateString() ===
                           new Date().toDateString()
                       }
+                      sx={timelineIconButtonSx}
                     >
                       <FiSkipForward />
                     </IconButton>
@@ -785,6 +804,7 @@ const Timeline: React.FC<TimelineProps> = ({
                       color="primary"
                       onClick={handleStepBackward}
                       size="small"
+                      sx={timelineIconButtonSx}
                     >
                       <TbRewindBackward15 />
                     </IconButton>
@@ -795,6 +815,7 @@ const Timeline: React.FC<TimelineProps> = ({
                       color="primary"
                       onClick={isPlaying ? handlePause : handlePlay}
                       size="small"
+                      sx={timelineIconButtonSx}
                     >
                       {isPlaying ? <Pause /> : <PlayArrow />}
                     </IconButton>
@@ -805,6 +826,7 @@ const Timeline: React.FC<TimelineProps> = ({
                       color="primary"
                       onClick={handleStepForward}
                       size="small"
+                      sx={timelineIconButtonSx}
                     >
                       <TbRewindForward15 />
                     </IconButton>
@@ -815,6 +837,7 @@ const Timeline: React.FC<TimelineProps> = ({
                       color="secondary"
                       onClick={handleStop}
                       size="small"
+                      sx={timelineIconButtonSx}
                     >
                       <Stop />
                     </IconButton>