diff --git a/src/Components/DataPoints/DataPoints.css b/src/Components/DataPoints/DataPoints.css
index 996fb7f..05a5389 100644
--- a/src/Components/DataPoints/DataPoints.css
+++ b/src/Components/DataPoints/DataPoints.css
@@ -6,6 +6,7 @@
     height: calc(100% - 2rem);
     display: flex;
     flex-direction: column;
+    position: relative;
 }
 
 .DataTableStyle {
@@ -37,7 +38,7 @@
 
 .DataTableStyle .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead,
 .p-filter-column {
-    height: 60px;
+    height: 50px;
 }
 
 .p-column-filter-row-items,
diff --git a/src/Components/DataPoints/DataPoints.jsx b/src/Components/DataPoints/DataPoints.jsx
index 9aa24e9..c5fe5aa 100644
--- a/src/Components/DataPoints/DataPoints.jsx
+++ b/src/Components/DataPoints/DataPoints.jsx
@@ -5,12 +5,11 @@ import {getPrograms} from "../../Data/ProgramData";
 import {getRecordByRecordIDs} from "../../Data/RecordData";
 import {Form, Outlet, redirect, useLoaderData, useNavigate, useParams} from "react-router-dom";
 import './DataPoints.css';
-import React, {useEffect, useState} from "react";
+import React, {useEffect, useRef, useState} from "react";
 import {
-    Accordion, AccordionDetails, AccordionSummary,
-    ButtonGroup,
+    Accordion, AccordionDetails, AccordionSummary, Box,
     Chip, Dialog, DialogActions,
-    DialogContent,
+    DialogContent, Fab,
     IconButton, Paper, Tooltip, useTheme,
 } from "@mui/material";
 import {Check, Close, Explore, FilterAltOff, OpenInFull, Refresh} from "@mui/icons-material";
@@ -22,6 +21,7 @@ import {InlineTypography} from "../common";
 import {ThemeSwitcherProvider} from 'react-css-theme-switcher';
 import {TriStateCheckbox} from 'primereact/tristatecheckbox';
 import {Dropdown} from "primereact/dropdown";
+import Draggable from "react-draggable";
 
 export async function loader() {
     // console.time("DataPointsLoader")
@@ -29,18 +29,9 @@ export async function loader() {
     programs = Object.values(programs).flat().filter(program => program.Applicants.length > 0);
     const recordIDs = programs.map(program => program.Applicants.map(applicant => applicant + "|" + program.ProgramID)).flat();
     let records = Object.values(await getRecordByRecordIDs(recordIDs));
-    records = records.map(record => {
-        record['Season'] = record.ProgramYear + " " + record.Semester;
-        return record;
-    });
+    programs = programs.map(program => program.ProgramID);
     records = records.sort((a, b) => {
-        if (programs.indexOf(a.ProgramID) > programs.indexOf(b.ProgramID)) {
-            return -1;
-        } else if (programs.indexOf(a.ProgramID) < programs.indexOf(b.ProgramID)) {
-            return 1;
-        } else {
-            return 0;
-        }
+        return programs.indexOf(a.ProgramID) - programs.indexOf(b.ProgramID);
     });
 
     // console.timeEnd("DataPointsLoader")
@@ -100,9 +91,14 @@ export function ProgramContentInDataPoints() {
     )
 }
 
-export default function DataPoints() {
-    const {records} = useLoaderData();
+export function DataGrid({records, insideProgramPage, style = {}}) {
     const navigate = useNavigate();
+    const theme = useTheme();
+    const themeMap = {
+        light: "/TableLight.css",
+        dark: "/TableDark.css"
+    };
+
     const [filters, setFilters] = useState(null);
     useEffect(() => {
         initFilters();
@@ -118,16 +114,6 @@ export default function DataPoints() {
             Final: {value: null, matchMode: FilterMatchMode.EQUALS}
         });
     };
-
-    const clearFilter = () => {
-        initFilters();
-    };
-
-    const theme = useTheme();
-    const themeMap = {
-        light: "./TableLight.css",
-        dark: "./TableDark.css"
-    }
     const getStatusColor = (status) => {
         switch (status) {
             case 'Reject':
@@ -216,7 +202,7 @@ export default function DataPoints() {
     const programBodyTemplate = (rowData) => {
         return <div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'center'}}>
             <Tooltip title={rowData.ProgramID} arrow>
-                <Chip label={rowData.ProgramID} sx={{maxWidth: "10rem"}}/>
+                <Chip label={rowData.ProgramID} sx={{maxWidth: "9rem"}}/>
             </Tooltip>
             <Tooltip title='查看项目描述' arrow>
                 <IconButton onClick={() => navigate(`/datapoints/program/${rowData.ProgramID}`)}>
@@ -240,130 +226,105 @@ export default function DataPoints() {
         return value.includes(filters);
     })
 
-    const renderHeader = () => {
-        return (
-            <div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'center'}}>
-                <ButtonGroup>
-                    <Tooltip title="重置所有筛选" arrow>
-                        <IconButton onClick={clearFilter}>
-                            <FilterAltOff/>
-                        </IconButton>
-                    </Tooltip>
-                    <Tooltip title="刷新数据" arrow>
-                        <Form method='post'>
-                            <IconButton type='submit'>
-                                <Refresh/>
-                            </IconButton>
-                        </Form>
-                    </Tooltip>
-                </ButtonGroup>
-            </div>
-        );
-    };
-
     return (
         <ThemeSwitcherProvider defaultTheme={theme.palette.mode} themeMap={themeMap}>
-            <Paper className="DataPointsContent">
-                <UsageGuidance/>
-                <DataTable
-                    value={records}
-                    dataKey='RecordID'
-                    rowGroupMode="subheader"
-                    groupRowsBy="ProgramID"
-                    sortMode='multiple'
-                    multiSortMeta={[{field: 'ProgramID', order: 0}, {field: 'Season', order: -1}]}
-                    size='small'
-                    scrollable
-                    scrollHeight="100%"
-                    rowGroupHeaderTemplate={groupSubheaderTemplate}
-                    rowHover
-                    showGridlines
-                    filters={filters}
-                    filterDisplay='row'
-                    emptyMessage="未找到任何匹配内容"
-                    header={renderHeader}
-                    className='DataTableStyle'
-                >
-                    <Column
-                        field='ApplicantID'
-                        header='申请人'
-                        body={applicantBodyTemplate}
-                        filter
-                        align='center'
-                        filterPlaceholder="搜索申请人"
-                        className="ApplicantIDColumn"
-                        style={{width: '10rem'}}
-                    />
-                    <Column
-                        field='ProgramID'
-                        header='申请项目'
-                        body={programBodyTemplate}
-                        align='center'
-                        filter
-                        filterPlaceholder="搜索项目"
-                        className="ProgramIDColumn"
-                        style={{width: '12rem'}}
-                    />
-                    <Column
-                        field='Status'
-                        header='申请结果'
-                        body={statusBodyTemplate}
-                        align='center'
-                        filter
-                        filterElement={statusFilterTemplate}
-                        className="StatusColumn"
-                        style={{width: '6rem'}}
-                    />
-                    <Column
-                        field='Final'
-                        header='最终去向'
-                        body={finalBodyTemplate}
-                        dataType="boolean"
-                        filter
-                        align='center'
-                        filterElement={FinalRowFilterTemplate}
-                        className="FinalColumn"
-                        style={{minWidth: '6rem'}}
-                    />
-                    <Column
-                        field='Season'
-                        header='申请季'
-                        filter
-                        align='center'
-                        filterPlaceholder="搜索申请季"
-                        body={programPeriodBodyTemplate}
-                        className="SeasonColumn"
-                        style={{minWidth: '8rem'}}
-                    />
-                    <Column
-                        field='TimeLine.Decision'
-                        header='结果通知时间'
-                        align='center'
-                        body={timelineBodyTemplate}
-                        style={{minWidth: '9rem'}}
-                    />
-                    <Column
-                        field='TimeLine.Interview'
-                        header='面试时间'
-                        align='center'
-                        body={timelineBodyTemplate}
-                        style={{minWidth: '8rem'}}
-                    />
-                    <Column
-                        field='TimeLine.Submit'
-                        header='网申提交时间'
-                        align='center'
-                        body={timelineBodyTemplate}
-                        style={{minWidth: '9rem'}}
-                    />
-                    <Column
-                        field='Detail'
-                        header='备注、补充说明'
-                        style={{width: '25rem', minWidth: '15rem'}}
-                    />
-                </DataTable>
-                <Outlet/>
-            </Paper>
+            <DataTable
+                value={records}
+                dataKey='RecordID'
+                rowGroupMode={insideProgramPage ? null : "subheader"}
+                groupRowsBy={insideProgramPage ? null : "ProgramID"}
+                sortMode={insideProgramPage ? 'single' : 'multiple'}
+                multiSortMeta={insideProgramPage ? null : [{field: 'ProgramID', order: 0}, {field: 'Season', order: -1}]}
+                size='small'
+                scrollable
+                scrollHeight="100%"
+                rowGroupHeaderTemplate={groupSubheaderTemplate}
+                rowHover
+                showGridlines
+                filters={insideProgramPage ? null : filters}
+                filterDisplay={insideProgramPage ? null : 'row'}
+                emptyMessage={insideProgramPage ? "该项目暂无申请记录" : "未找到任何匹配内容"}
+                className='DataTableStyle'
+                style={{...style}}
+            >
+                <Column
+                    field='ApplicantID'
+                    header='申请人'
+                    body={applicantBodyTemplate}
+                    filter={!insideProgramPage}
+                    align='center'
+                    filterPlaceholder="搜索申请人"
+                    className="ApplicantIDColumn"
+                    style={{width: '10rem'}}
+                />
+                {insideProgramPage ? null : <Column
+                    field='ProgramID'
+                    header='申请项目'
+                    body={programBodyTemplate}
+                    align='center'
+                    filter={!insideProgramPage}
+                    filterPlaceholder="搜索项目"
+                    className="ProgramIDColumn"
+                    style={{width: '12rem'}}
+                />}
+                <Column
+                    field='Status'
+                    header='申请结果'
+                    body={statusBodyTemplate}
+                    align='center'
+                    filter={!insideProgramPage}
+                    filterElement={statusFilterTemplate}
+                    className="StatusColumn"
+                    style={{minWidth: '6rem'}}
+                />
+                <Column
+                    field='Final'
+                    header='最终去向'
+                    body={finalBodyTemplate}
+                    dataType="boolean"
+                    filter={!insideProgramPage}
+                    align='center'
+                    filterElement={FinalRowFilterTemplate}
+                    className="FinalColumn"
+                    style={{minWidth: '6rem'}}
+                />
+                <Column
+                    field='Season'
+                    header='申请季'
+                    filter={!insideProgramPage}
+                    align='center'
+                    filterPlaceholder="搜索申请季"
+                    body={programPeriodBodyTemplate}
+                    className="SeasonColumn"
+                    style={{minWidth: '8rem'}}
+                />
+                <Column
+                    field='TimeLine.Decision'
+                    header='结果通知时间'
+                    align='center'
+                    body={timelineBodyTemplate}
+                    style={{minWidth: '9rem'}}
+                />
+                <Column
+                    field='TimeLine.Interview'
+                    header='面试时间'
+                    align='center'
+                    body={timelineBodyTemplate}
+                    style={{minWidth: '8rem'}}
+                />
+                <Column
+                    field='TimeLine.Submit'
+                    header='网申提交时间'
+                    align='center'
+                    body={timelineBodyTemplate}
+                    style={{minWidth: '9rem'}}
+                />
+                <Column
+                    field='Detail'
+                    header='备注、补充说明等'
+                    style={{width: '25rem', minWidth: '15rem'}}
+                />
+            </DataTable>
         </ThemeSwitcherProvider>
     )
 }
@@ -382,7 +343,8 @@ function UsageGuidance() {
                 <ol>
                     <li>
                         <InlineTypography>
-                            对于<b>申请人</b>和<b>申请项目</b>这两列，可点击单元格右侧<OpenInFull sx={{fontSize: "1rem"}}/>按钮查看申请人或项目的详细信息。
+                            对于<b>申请人</b>和<b>申请项目</b>这两列，可点击单元格右侧<OpenInFull
+                            sx={{fontSize: "1rem"}}/>按钮查看申请人或项目的详细信息。
                         </InlineTypography>
                     </li>
                     <li>本页面为只读模式，想要编辑自己的申请人信息或添加/删除/修改所申请的项目，请点击右上角头像下拉菜单中Profile页面编辑相应信息。</li>
@@ -400,4 +362,50 @@ function UsageGuidance() {
             </AccordionDetails>
         </Accordion>
     );
-}
\ No newline at end of file
+}
+
+export default function DataPoints() {
+    const loaderRecords = useLoaderData();
+    const records = loaderRecords.records.map(record => {
+        record['Season'] = record.ProgramYear + " " + record.Semester;
+        return record;
+    });
+
+    const nodeRef = useRef(null);
+
+    const dragStartPositionXYRef = useRef({x: 0, y: 0});
+
+    return (
+        <>
+            <Paper className="DataPointsContent">
+                <UsageGuidance/>
+                <DataGrid records={records} insideProgramPage={false}/>
+                <Outlet/>
+            </Paper>
+            <Box method='post' style={{position: 'absolute', bottom: '20%', right: "1rem"}}>
+                <Draggable
+                    nodeRef={nodeRef}
+                    onStart={(event, data) => {
+                        dragStartPositionXYRef.current = {x: data.x, y: data.y};
+                    }}
+                    onStop={(event, data) => {
+                        const THRESHOLD = 2;
+                        const {x, y} = dragStartPositionXYRef.current ?? {x: 0, y: 0};
+                        const wasDragged = Math.abs(data.x - x) > THRESHOLD || Math.abs(data.y - y) > THRESHOLD;
+                        if (!wasDragged) {
+                            event.preventDefault();
+                            document.querySelector(".HiddenRefreshButton").click()
+                        }
+                    }}
+                >
+                    <Fab color='primary' ref={nodeRef}>
+                        <Refresh/>
+                    </Fab>
+                </Draggable>
+            </Box>
+            <Form method='post'>
+                <button type="submit" style={{display: "none"}} className="HiddenRefreshButton"/>
+            </Form>
+        </>
+    )
+}
diff --git a/src/Components/HowToUse/HowToUse.jsx b/src/Components/HowToUse/HowToUse.jsx
index 5b31c6d..7d90984 100644
--- a/src/Components/HowToUse/HowToUse.jsx
+++ b/src/Components/HowToUse/HowToUse.jsx
@@ -37,17 +37,17 @@ function Graduated({loaderData}) {
             <AccordionSummary
                 expandIcon={<ArrowDropDownIcon/>}
             >
-                <h3 style={{margin: 0}}><b>毕业生或毕业年级请阅读：</b></h3>
+                <h3 style={{margin: 0}}><b>毕业生或大四研三请阅读：</b></h3>
             </AccordionSummary>
             <AccordionDetails>
-                <h4><b>我来这个网站应该干啥？</b></h4>
-                <h5><b>为了给SIST学弟学妹们提供更多海外申请的信息，我们希望你能做三件事情：</b></h5>
+                <h4><b>我来这个网站应该干什么？</b></h4>
+                <h5><b>为了给SIST学弟学妹们提供更多海外申请的信息，我们希望你能抽出宝贵的15分钟，做三件事情：</b></h5>
                 <ol>
                     <li>
                         <b>贡献自己申请时的背景（可选匿名）</b>。考虑到有的人也许会有多于一年的申请经历，因此每个用户可添加多个申请人，以申请年份作区分。
                     </li>
                     <li>
-                        <b>贡献自己的申请记录</b>，也就是你申请的各个项目的admit/reject的结果，最终呈现出来的就像在一亩三分地或opencs上浏览申请结果一样。
+                        <b>尽可能多地贡献自己的申请记录</b>，也就是你申请的各个项目的admit/reject的结果，最终呈现出来的就像在一亩三分地或opencs上浏览申请结果一样。
                     </li>
                     <li>
                         <b>贡献海外高校graduate program信息</b>，如果你对某些项目有着很深入的了解，我们希望你把你了解到的给写上，这样能为学弟学妹们提供更多insight。
@@ -67,7 +67,7 @@ function Graduated({loaderData}) {
                 <Dialog open={open} onClose={() => {
                     setOpen(false);
                 }}>
-                    <DialogTitle>请选择要为哪位申请人添加申请记录？</DialogTitle>
+                    <DialogTitle>请选择要添加记录的申请人</DialogTitle>
                     <DialogContent>
                         {applicantIDs.length > 0 ? applicantIDs.map((applicantID, index) => {
                             return (
@@ -125,7 +125,23 @@ function Current() {
                 <h3 style={{margin: 0}}><b>非毕业年级本硕同学请阅读：</b></h3>
             </AccordionSummary>
             <AccordionDetails>
-                先别看，还没做完
+                <h4><b>这个网站是干什么的？</b></h4>
+                <h5>这是一个面向上科大信息学院的出国申请信息共享平台，收集了往届学长学姐海外硕博项目的申请案例，以及各个项目的介绍。</h5>
+                <h4><b>我该如何使用这个网站？</b></h4>
+                <h5><b>该网站分为两大版块：申请季数据汇总与项目信息表。下面将会为你详细介绍两个板块的功能。</b></h5>
+                <h4><b>申请季数据汇总表</b></h4>
+                <h6>可点击顶部导航栏的<MuiLink href='/datapoints'>申请季数据汇总</MuiLink>按钮跳转到该页面。</h6>
+                <ol>
+                    <li>
+                        该表详细展示了每个项目下面都有谁申请、申请结果如何、申请时间线如何等信息。
+                    </li>
+                    <li>
+                        你可以通过点击申请人和申请项目单元格右侧的扩展按钮，查看当前申请人或项目的信息。
+                    </li>
+                    <li>
+                        表格上方有筛选栏，你可以筛选出你感兴趣的项目或申请人。
+                    </li>
+                </ol>
             </AccordionDetails>
         </Accordion>
     )
diff --git a/src/Components/Profile/ProfileApplicant/ProfileApplicantPage.jsx b/src/Components/Profile/ProfileApplicant/ProfileApplicantPage.jsx
index 257aa7a..b03d37b 100644
--- a/src/Components/Profile/ProfileApplicant/ProfileApplicantPage.jsx
+++ b/src/Components/Profile/ProfileApplicant/ProfileApplicantPage.jsx
@@ -44,7 +44,7 @@ import {getAvatar, getDisplayName, getMetaData} from "../../../Data/UserData";
 import {grey} from "@mui/material/colors";
 
 import {faQq, faWeixin} from "@fortawesome/free-brands-svg-icons";
-import {HomeRounded, LinkedIn, Link as LinkIcon} from "@mui/icons-material";
+import {HomeRounded, LinkedIn, Link as LinkIcon, Mail} from "@mui/icons-material";
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import {getPrograms} from "../../../Data/ProgramData";
 
@@ -53,7 +53,8 @@ const contactIcons = {
     "WeChat": faWeixin,
     "LinkedIn": LinkedIn,
     "HomePage": HomeRounded,
-    "OtherLink": LinkIcon
+    "OtherLink": LinkIcon,
+    "Email": Mail
 }
 
 export async function loader({params}) {
@@ -358,8 +359,8 @@ function BasicInfoBlock({avatarUrl, contact, applicant, records, editable}) {
                                             alert(`已复制${value}到剪贴板！`)
                                         }}
                                     >
-                                        {["QQ", "WeChat"].includes(key) ? <FontAwesomeIcon icon={Icon}/> :
-                                            <Icon fontSize="large"/>}
+                                        {["QQ", "WeChat"].includes(key) ? <FontAwesomeIcon icon={Icon} fontSize='medium'/> :
+                                            <Icon/>}
                                     </IconButton>
                                 </Tooltip>
                             )
diff --git a/src/Components/Profile/UserInfo/ProfileHeader.jsx b/src/Components/Profile/UserInfo/ProfileHeader.jsx
index 225cd13..55bd847 100644
--- a/src/Components/Profile/UserInfo/ProfileHeader.jsx
+++ b/src/Components/Profile/UserInfo/ProfileHeader.jsx
@@ -23,7 +23,7 @@ import "./ProfileHeader.css";
 import {Form, Link} from "react-router-dom";
 import PersonOutlineIcon from '@mui/icons-material/PersonOutline';
 import PersonAddAltIcon from '@mui/icons-material/PersonAddAlt';
-import {ConnectWithoutContact, Edit, Refresh, HomeRounded, LinkedIn, Link as LinkIcon} from "@mui/icons-material";
+import {ConnectWithoutContact, Edit, Refresh, HomeRounded, LinkedIn, Link as LinkIcon, Mail} from "@mui/icons-material";
 import {blue, grey} from "@mui/material/colors";
 import {CollapseSideBar} from "../../common";
 import React, {useState} from "react";
@@ -182,6 +182,8 @@ export function ProfileHeader({loaderData}) {
                             <Grid2 container xs={12}>
                                 <ContactField field='HomePage' label='个人主页' icon={<HomeRounded/>} contact={contact}
                                               setContact={setContact}/>
+                                <ContactField field='Email' label='邮箱' icon={<Mail/>} contact={contact}
+                                              setContact={setContact}/>
                                 <ContactField label='LinkedIn' field='LinkedIn' icon={<LinkedIn/>} contact={contact}
                                               setContact={setContact}/>
                                 <ContactField label='QQ' field='QQ' icon={<FontAwesomeIcon icon={faQq}/>} contact={contact}
diff --git a/src/Components/ProgramPage/ProgramContent/ProgramContent.jsx b/src/Components/ProgramPage/ProgramContent/ProgramContent.jsx
index 7a360c2..c1423b3 100644
--- a/src/Components/ProgramPage/ProgramContent/ProgramContent.jsx
+++ b/src/Components/ProgramPage/ProgramContent/ProgramContent.jsx
@@ -1,19 +1,24 @@
 import React from 'react';
 import ReactMarkdown from 'react-markdown';
 import './ProgramContent.css'
-import {Form, Link, useLoaderData} from "react-router-dom";
+import {Form, Link, redirect, useLoaderData} from "react-router-dom";
 import {getProgramContent, getProgramDesc} from "../../../Data/ProgramData";
-import {IconButton, Typography} from "@mui/material";
+import {IconButton, Paper, Typography} from "@mui/material";
 import {Edit, Refresh} from "@mui/icons-material";
 import remarkGfm from 'remark-gfm'
+import {getRecordByProgram} from "../../../Data/RecordData";
+import {DataGrid} from "../../DataPoints/DataPoints";
+import {useSmallPage} from "../../common";
 
 export async function loader({params}) {
     // console.time("ProgramContentLoader")
     const programId = params.programId;
+    let records = await getRecordByProgram(programId);
+    records = Object.values(records);
     try {
         const programContent = await getProgramContent(programId);
         // console.timeEnd("ProgramContentLoader")
-        return {programContent};
+        return {programContent, records};
     } catch (e) {
         throw e;
     }
@@ -21,15 +26,17 @@ export async function loader({params}) {
 
 export async function action({params}) {
     const programId = params.programId;
-    return await getProgramDesc(programId, true);
+    await getProgramDesc(programId, true);
+    return await getRecordByProgram(programId, true);
 }
 
 function ProgramContent({editable = true}) {
-    const {programContent} = useLoaderData();
+    const {programContent, records} = useLoaderData();
+    const smallPage = useSmallPage();
     return (
         <>
             <div className="ProgramHeader">
-                <Typography variant='h3' sx={{display: 'flex', position: 'relative'}}>
+                <Typography variant={smallPage ? 'h4' : 'h3'} sx={{display: 'flex', position: 'relative'}}>
                     {programContent.ProgramID}
                 </Typography>
                 {editable ? <div className='ReviseRefreshButtonGroup'>
@@ -43,12 +50,15 @@ function ProgramContent({editable = true}) {
                     </Form>
                 </div> : null}
             </div>
-            <ReactMarkdown
-                remarkPlugins={[remarkGfm]}
-                className='ProgramDescription'
-            >
-                {programContent.description}
-            </ReactMarkdown>
+            <Paper sx={{p: '1.5rem', height: '100%', overflowY: 'auto'}}>
+                <ReactMarkdown
+                    remarkPlugins={[remarkGfm]}
+                    className='ProgramDescription'
+                >
+                    {programContent.description}
+                </ReactMarkdown>
+            </Paper>
+            <DataGrid records={records} style={{padding: '1rem 0 1rem 0', height: '100%'}} insideProgramPage={true}/>
         </>
     );
 }
diff --git a/src/Components/TopBar/StatusBlock/StatusBlock.jsx b/src/Components/TopBar/StatusBlock/StatusBlock.jsx
index 0f49acd..905e3d5 100644
--- a/src/Components/TopBar/StatusBlock/StatusBlock.jsx
+++ b/src/Components/TopBar/StatusBlock/StatusBlock.jsx
@@ -11,11 +11,9 @@ import Brightness4Icon from '@mui/icons-material/Brightness4';
 import Brightness7Icon from '@mui/icons-material/Brightness7';
 
 export async function loader() {
-    // console.time("HomeLoader")
     const displayName = await getDisplayName();
-    const metaData = await getMetaData();
-    const avatarUrl = await getAvatar(metaData?.Avatar);
-    // console.timeEnd("HomeLoader")
+    const metaData = await getMetaData(displayName);
+    const avatarUrl = await getAvatar(metaData?.Avatar, displayName);
     return {displayName, avatarUrl};
 }
 
diff --git a/src/Data/UserData.js b/src/Data/UserData.js
index 90bb052..df3c5f2 100644
--- a/src/Data/UserData.js
+++ b/src/Data/UserData.js
@@ -38,7 +38,6 @@ export async function login(email, password) {
             expireAt: data.expireAt,
         }
         await setUserInfo(user_info);
-        await getDisplayName();
         return redirect("/");
     }
 }
diff --git a/src/index.css b/src/index.css
index 508db03..5613be8 100644
--- a/src/index.css
+++ b/src/index.css
@@ -12,7 +12,7 @@ body,html {
 
 /* Works on Chrome/Edge/Safari */
 *::-webkit-scrollbar {
-    width: 12px;
+    width: 5px;
 }
 *::-webkit-scrollbar-track {
     background: transparent;