diff --git a/lazy-timer-be/app.py b/lazy-timer-be/app.py
index b316107..d07a984 100644
--- a/lazy-timer-be/app.py
+++ b/lazy-timer-be/app.py
@@ -77,4 +77,11 @@ def getDayScreenUseTime():
         getScreenTimeSpanM, getScreenTimeSpanS = divmod(screenTimeSpan, 60)  # 每日屏幕使用时长, 分时秒
         getScreenTimeSpanH, getScreenTimeSpanM = divmod(getScreenTimeSpanM, 60)
         sendJson = {'getDayScreenUseTimeH': getDayScreenUseTimeH, 'getDayScreenUseTimeM': getDayScreenUseTimeM, 'getDayScreenUseTimeS': getDayScreenUseTimeS, 'firstScreenTime': firstScreenTime, 'lastScreenTime': lastScreenTime, 'getScreenTimeSpanH': getScreenTimeSpanH, 'getScreenTimeSpanM': getScreenTimeSpanM, 'getScreenTimeSpanS': getScreenTimeSpanS }
-    return json.dumps(sendJson, indent=4)
\ No newline at end of file
+    return json.dumps(sendJson, indent=4)
+
+# @app.route('/getDayScreenUseTime', methods=['POST'])
+# @cross_origin()
+# def getDayScreenUseTime():
+#     datetimeStr1 = json.loads(request.data)
+#     datetimeStr = datetimeStr1['datetimeStr']
+#     struct_time = datetime.strptime(datetimeStr, "%Y-%m-%d").date()    # 获取请求日期, struct_time数据类型为dateTime
\ No newline at end of file
diff --git a/lazy-timer-fe/src/components/Navbar.jsx b/lazy-timer-fe/src/components/Navbar.jsx
index 1e23d14..70f33a9 100644
--- a/lazy-timer-fe/src/components/Navbar.jsx
+++ b/lazy-timer-fe/src/components/Navbar.jsx
@@ -69,9 +69,9 @@ const Navbar = () => {
               alt="user-profile"
             />
             <p>
-              <span className="text-gray-400 text-14">Hi,</span>{' '}
+              <span className="text-gray-400 text-14">嗨,</span>{' '}
               <span className="text-gray-400 font-bold ml-1 text-14">
-                Michael
+                在隐身
               </span>
             </p>
             <MdKeyboardArrowDown className="text-gray-400 text-14" />
diff --git a/lazy-timer-fe/src/components/Sidebar.jsx b/lazy-timer-fe/src/components/Sidebar.jsx
index a60c3dc..49618e9 100644
--- a/lazy-timer-fe/src/components/Sidebar.jsx
+++ b/lazy-timer-fe/src/components/Sidebar.jsx
@@ -25,7 +25,8 @@ const Sidebar = () => {
         <>
           <div className="flex justify-between items-center">
             <Link to="/" onClick={handleCloseSideBar} className="items-center gap-3 ml-3 mt-4 flex text-xl font-extrabold tracking-tight dark:text-white text-slate-900">
-              <SiShopware /> <span>Shoppy</span>
+            <img src={require('../images/logo-modified.png')} alt="Logo" width="20%"/>
+            <span>懒人记时</span>
             </Link>
             <TooltipComponent content="Menu" position="BottomCenter">
               <button
diff --git a/lazy-timer-fe/src/data/avatar.jpg b/lazy-timer-fe/src/data/avatar.jpg
index e6a4470..3119f40 100644
Binary files a/lazy-timer-fe/src/data/avatar.jpg and b/lazy-timer-fe/src/data/avatar.jpg differ
diff --git a/lazy-timer-fe/src/pages/Charts/Bar.jsx b/lazy-timer-fe/src/pages/Charts/Bar.jsx
index e29351a..d90852a 100644
--- a/lazy-timer-fe/src/pages/Charts/Bar.jsx
+++ b/lazy-timer-fe/src/pages/Charts/Bar.jsx
@@ -1,9 +1,6 @@
 import React, { useEffect, useState } from 'react'
 import ReactECharts from 'echarts-for-react'
-import moment from 'moment'
-import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, ColumnSeries, DataLabel } from '@syncfusion/ej2-react-charts'
 
-import { barCustomSeries, barPrimaryXAxis, barPrimaryYAxis } from '../../data/dummy'
 import { ChartsHeader } from '../../components'
 import { useStateContext } from '../../contexts/ContextProvider'
 import { getDayScreenUseTime } from '../../service/getDayScreenUseTime/index'
@@ -17,7 +14,7 @@ const Bar = () => {
         // 格式化日期
         var yyyy = date.getFullYear().toString()
         var mm = (date.getMonth() + 1).toString()
-        var dd = date.getDate().toString()
+        var dd = (date.getDate() + 1).toString()
 
         var mmChars = mm.split('')
         var ddChars = dd.split('')
@@ -201,7 +198,7 @@ const Bar = () => {
               }
           }
       })
-    })
+    }, [])
 
     return (
         <div className="m-4 md:m-10 mt-24 p-10 bg-white dark:bg-secondary-dark-bg rounded-3xl">
diff --git a/lazy-timer-fe/src/pages/Charts/Line.jsx b/lazy-timer-fe/src/pages/Charts/Line.jsx
index 66e2b8b..eaca36f 100644
--- a/lazy-timer-fe/src/pages/Charts/Line.jsx
+++ b/lazy-timer-fe/src/pages/Charts/Line.jsx
@@ -1,14 +1,239 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react'
+import ReactECharts from 'echarts-for-react'
 
-import { ChartsHeader, LineChart } from '../../components';
+import { ChartsHeader } from '../../components'
+import { useStateContext } from '../../contexts/ContextProvider'
+import { getDayScreenUseTime } from '../../service/getDayScreenUseTime/index'
 
-const Line = () => (
-  <div className="m-4 md:m-10 mt-24 p-10 bg-white dark:bg-secondary-dark-bg rounded-3xl">
-    <ChartsHeader category="Line" title="Inflation Rate" />
-    <div className="w-full">
-      <LineChart />
-    </div>
-  </div>
-);
+const Line = () => {
+    const { currentColor, currentMode } = useStateContext()
+    let [option, setOption] = useState({})
 
-export default Line;
+    /* 生成本周日期, 格式为 MM-DD */
+    function convertDate(date) {
+        // 格式化日期
+        var yyyy = date.getFullYear().toString()
+        var mm = (date.getMonth() + 1).toString()
+        var dd = (date.getDate() + 1).toString()
+
+        var mmChars = mm.split('')
+        var ddChars = dd.split('')
+
+        return (mmChars[1] ? mm : '0' + mmChars[0]) + '-' + (ddChars[1] ? dd : '0' + ddChars[0])
+    }
+
+    let currentWeekDates = new Array(7)
+    for (let i = 0; i < 7; i++) {
+        const curr = new Date()
+        currentWeekDates[i] = convertDate(new Date(curr.setDate(curr.getDate() - curr.getDay() + i)))
+    }
+
+    let currentWeekFirstScreenTime = new Array(7)
+    let bgColor = '#fff'
+    let color = ['#0090FF', '#36CE9E', '#FFC005', '#FF515A', '#8B5CFF', '#00CA69']
+    let echartData = [
+        {
+            name: '周一',
+            value1: 100
+        },
+        {
+            name: '周二',
+            value1: 138
+        },
+        {
+            name: '周三',
+            value1: 350
+        },
+        {
+            name: '周四',
+            value1: 173
+        },
+        {
+            name: '周五',
+            value1: 180
+        },
+        {
+            name: '周六',
+            value1: 150
+        },
+        {
+            name: '周日',
+            value1: 180
+        }
+    ]
+    let xAxisData = echartData.map(v => v.name)
+    for (let i = 0; i < 7; i++) {
+        xAxisData[i] = xAxisData[i] + ' ' + currentWeekDates[i]
+    }
+
+    const hexToRgba = (hex, opacity) => {
+        let rgbaColor = ''
+        let reg = /^#[\da-f]{6}$/i
+        if (reg.test(hex)) {
+            rgbaColor = `rgba(${parseInt('0x' + hex.slice(1, 3))},${parseInt('0x' + hex.slice(3, 5))},${parseInt('0x' + hex.slice(5, 7))},${opacity})`
+        }
+        return rgbaColor
+    }
+
+    useEffect(async () => {
+        for (let i = 0; i < 7; i++) {
+            let receivedJson = await getDayScreenUseTime('2022-' + currentWeekDates[i])
+            let firstScreenTimeH = parseInt(receivedJson.data.firstScreenTime.substring(0, 2))
+            let firstScreenTimeM = parseInt(receivedJson.data.firstScreenTime.substring(3, 5))
+            let firstScreenTimeS = parseInt(receivedJson.data.firstScreenTime.substring(6, 8))
+            if (firstScreenTimeH !== NaN && firstScreenTimeM !== NaN && firstScreenTimeS !== NaN) {
+                currentWeekFirstScreenTime[i] = 3600 * firstScreenTimeH + 60 * firstScreenTimeM + firstScreenTimeS
+            } else {
+                currentWeekFirstScreenTime[i] = NaN
+            }
+        }
+
+        setOption({
+            backgroundColor: bgColor,
+            color: color,
+            legend: {
+                right: 10,
+                top: 10
+            },
+            tooltip: {
+                trigger: 'axis',
+                formatter: function (params) {
+                    let html = ''
+                    params.forEach(v => {
+                        if (!isNaN(v.value)) {
+                            html += `<div style="color: #666;font-size: 14px;line-height: 24px">
+                            <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${color[v.componentIndex]};"></span>
+                            ${v.seriesName}
+                            <span style="color:${color[v.componentIndex]};font-weight:700;font-size: 18px">${Math.floor(v.value / 3600) + '时' + Math.floor((v.value % 3600) / 60) + '分钟' + Math.floor(v.value % 60) + '秒'}</span>
+                            `
+                        } else {
+                            html = `<div style="color: #666;font-size: 14px;line-height: 24px">
+                    <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${color[v.componentIndex]};"></span>
+                    ${v.seriesName}
+                    <span style="color:${color[v.componentIndex]};font-weight:700;font-size: 18px">该天还尚未开始</span>
+                    `
+                        }
+                    })
+                    return html
+                },
+                extraCssText: 'background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;',
+                axisPointer: {
+                    type: 'shadow',
+                    shadowStyle: {
+                        color: '#ffffff',
+                        shadowColor: 'rgba(225,225,225,1)',
+                        shadowBlur: 5
+                    }
+                }
+            },
+            grid: {
+                top: 100,
+                containLabel: true
+            },
+            xAxis: [
+                {
+                    type: 'category',
+                    boundaryGap: false,
+                    axisLabel: {
+                        formatter: '{value}',
+                        textStyle: {
+                            color: '#333'
+                        }
+                    },
+                    axisLine: {
+                        lineStyle: {
+                            color: '#D9D9D9'
+                        }
+                    },
+                    data: xAxisData.map(function (str) {
+                        return str.replace(' ', '\n')
+                    })
+                }
+            ],
+            yAxis: [
+                {
+                    type: 'value',
+                    // name: '单位：万千瓦时',
+                    axisLabel: {
+                        textStyle: {
+                            color: '#666'
+                        },
+                        formatter: (value, index, format) => {
+                            return Math.floor(value / 3600) + '时'
+                        }
+                    },
+                    max: 86400,
+                    nameTextStyle: {
+                        color: '#666',
+                        fontSize: 12,
+                        lineHeight: 40
+                    },
+                    splitLine: {
+                        lineStyle: {
+                            type: 'dashed',
+                            color: '#E9E9E9'
+                        }
+                    },
+                    axisLine: {
+                        show: false
+                    },
+                    axisTick: {
+                        show: false
+                    }
+                }
+            ],
+            series: [
+                {
+                    name: '第一次屏幕使用时刻',
+                    type: 'line',
+                    smooth: true,
+                    // showSymbol: false,/
+                    symbolSize: 8,
+                    zlevel: 3,
+                    lineStyle: {
+                        normal: {
+                            color: color[0],
+                            shadowBlur: 3,
+                            shadowColor: hexToRgba(color[0], 0.5),
+                            shadowOffsetY: 8
+                        }
+                    },
+                    areaStyle: {
+                        // normal: {
+                        //     color: new echarts.graphic.LinearGradient(
+                        //         0,
+                        //         0,
+                        //         0,
+                        //         1,
+                        //         [
+                        //             {
+                        //                 offset: 0,
+                        //                 color: hexToRgba(color[0], 0.3)
+                        //             },
+                        //             {
+                        //                 offset: 1,
+                        //                 color: hexToRgba(color[0], 0.1)
+                        //             }
+                        //         ],
+                        //         false
+                        //     ),
+                        shadowColor: hexToRgba(color[0], 0.1),
+                        shadowBlur: 10
+                    },
+                    data: currentWeekFirstScreenTime
+                }
+            ]
+        })
+    }, [])
+
+    return (
+        <div className="m-4 md:m-10 mt-24 p-10 bg-white dark:bg-secondary-dark-bg rounded-3xl">
+            <ChartsHeader category="Line" title="第一次屏幕使用时刻" />
+            <div className="w-full">
+                <ReactECharts option={option} style={{ height: '600px' }}></ReactECharts>
+            </div>
+        </div>
+    )
+}
+
+export default Line
diff --git a/lazy-timer-fe/src/pages/Customers.jsx b/lazy-timer-fe/src/pages/Customers.jsx
index 599e895..825243f 100644
--- a/lazy-timer-fe/src/pages/Customers.jsx
+++ b/lazy-timer-fe/src/pages/Customers.jsx
@@ -11,7 +11,7 @@ const Customers = () => {
 
   return (
     <div className="m-2 md:m-10 mt-24 p-2 md:p-10 bg-white rounded-3xl">
-      <Header category="Page" title="Customers" />
+      <Header category="Page" title="屏幕使用记录" />
       <GridComponent
         dataSource={customersData}
         enableHover={false}
diff --git a/lazy-timer-fe/src/service/getDayActivity/index.js b/lazy-timer-fe/src/service/getDayActivity/index.js
new file mode 100644
index 0000000..1d51bee
--- /dev/null
+++ b/lazy-timer-fe/src/service/getDayActivity/index.js
@@ -0,0 +1,7 @@
+import { post } from '../index'
+
+export const getDayScreenUseTime = (datetimeStr) => {
+    return post('/getDayActivity', {
+        dateTimeStr
+    })
+}
\ No newline at end of file