diff --git a/src/components/organisms/GanttChart.tsx b/src/components/organisms/GanttChart.tsx
index abf929e0..1deb39b4 100644
--- a/src/components/organisms/GanttChart.tsx
+++ b/src/components/organisms/GanttChart.tsx
@@ -8,7 +8,7 @@ import {
   format,
 } from 'date-fns'
 import { times } from 'ramda'
-import React, { useMemo, MouseEventHandler } from 'react'
+import React, { useMemo, MouseEventHandler, useEffect } from 'react'
 
 export interface GanttChartItem {
   id: string
@@ -23,6 +23,7 @@ interface GanttChartProps {
   endDate: string
   today: Date | null
   items: GanttChartItem[]
+  scrollTo?: (to: number) => void
 }
 
 const widthOfDay = 20
@@ -35,6 +36,7 @@ const GanttChart = ({
   endDate: endDateString,
   today,
   items,
+  scrollTo,
 }: GanttChartProps) => {
   const startDate = new Date(startDateString)
   const endDate = new Date(endDateString)
@@ -57,6 +59,19 @@ const GanttChart = ({
     }, 1)
   }, [items])
 
+  useEffect(() => {
+    if (today == null || scrollTo == null) {
+      return
+    }
+
+    const target =
+      differenceInCalendarDays(today, firstDateToRender) * widthOfDay -
+      widthOfWeek -
+      widthOfDay / 2
+
+    scrollTo(target > 0 ? target : 0)
+  }, [firstDateToRender, scrollTo, today])
+
   return (
     <Box sx={{ width: weeksToRender * widthOfWeek + 70 }}>
       <WeekLabelRow
@@ -171,8 +186,8 @@ const GanttChart = ({
                 borderWidth: 1,
                 borderStyle: 'solid',
                 backgroundColor: 'background',
-                width: length,
-                left: offset,
+                width: length + 'px',
+                left: offset + 'px',
                 top: (item.row - 1) * (itemHeight + 10) + 30,
                 overflow: 'hidden',
                 textOverflow: 'ellipsis',
diff --git a/src/pages/honkai3rd/index.tsx b/src/pages/honkai3rd/index.tsx
index 7e6c2df9..21cc46c5 100644
--- a/src/pages/honkai3rd/index.tsx
+++ b/src/pages/honkai3rd/index.tsx
@@ -25,7 +25,7 @@ import { assetsBucketBaseUrl } from '../../lib/consts'
 import Honkai3rdLayout from '../../components/layouts/Honkai3rdLayout'
 import WeaponCard from '../../components/molecules/WeaponCard'
 import BattlesuitCard from '../../components/molecules/BattlesuitCard'
-import { useEffect, useState } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import BossTable from '../../components/organisms/BossTable'
 import { getStigmataSetBySetId } from '../../server/data/honkai3rd/stigmata'
 import { StigmataSet } from '../../lib/honkai3rd/stigmata'
@@ -48,10 +48,18 @@ const VersionIndexPage = ({
 }: VersionIndexPageProps) => {
   const { t } = useTranslation()
   const [today, setToday] = useState<Date | null>(null)
+  const supplyGanttChartScrollContainerRef = useRef<HTMLElement>(null)
   useEffect(() => {
     setToday(new Date(getDateString(new Date())))
   }, [])
 
+  const scrollSupplyGanttChart = useCallback((to: number) => {
+    if (supplyGanttChartScrollContainerRef.current == null) {
+      return null
+    }
+    supplyGanttChartScrollContainerRef.current.scrollTo(to, 0)
+  }, [])
+
   return (
     <Honkai3rdLayout>
       <Head
@@ -149,8 +157,12 @@ const VersionIndexPage = ({
             {t('versions.supply-events')}
           </Heading>
           <Box mb={2}>
-            <ScrollContainer vertical={false}>
+            <ScrollContainer
+              vertical={false}
+              innerRef={supplyGanttChartScrollContainerRef}
+            >
               <GanttChart
+                scrollTo={scrollSupplyGanttChart}
                 items={currentVersionData.supplyEvents.map(
                   (supplyEventData) => {
                     const imgSrc = getIconSrcFromItem(
