diff --git a/packages/web/src/components/common/bar-graph/BarGraph.styles.ts b/packages/web/src/components/common/bar-graph/BarGraph.styles.ts
index a2cc9db62..235b9f926 100644
--- a/packages/web/src/components/common/bar-graph/BarGraph.styles.ts
+++ b/packages/web/src/components/common/bar-graph/BarGraph.styles.ts
@@ -11,14 +11,14 @@ export const BarGraphWrapper = styled.div<BarGraphWrapperProps>`
   display: flex;
   flex-direction: column;
   width: 100%;
-  height: auto;
+  height: 180px;
   overflow: visible;
 
   & svg {
     display: flex;
     flex-direction: column;
     width: 100%;
-    height: auto;
+    height: 180px;
     overflow: visible;
 
     line {
diff --git a/packages/web/src/components/common/line-graph/LineGraph.styles.ts b/packages/web/src/components/common/line-graph/LineGraph.styles.ts
index e125635a8..7f1671089 100644
--- a/packages/web/src/components/common/line-graph/LineGraph.styles.ts
+++ b/packages/web/src/components/common/line-graph/LineGraph.styles.ts
@@ -6,14 +6,14 @@ export const LineGraphWrapper = styled.div`
   display: flex;
   flex-direction: column;
   width: 100%;
-  height: auto;
+  height: 180px;
   overflow: visible;
 
   & svg {
     display: flex;
     flex-direction: column;
     width: 100%;
-    height: auto;
+    height: 180px;
     overflow: visible;
   }
 `;
diff --git a/packages/web/src/components/dashboard/activity-list-header/ActivityListHeader.styles.ts b/packages/web/src/components/dashboard/activity-list-header/ActivityListHeader.styles.ts
index 6a677c17a..813448f94 100644
--- a/packages/web/src/components/dashboard/activity-list-header/ActivityListHeader.styles.ts
+++ b/packages/web/src/components/dashboard/activity-list-header/ActivityListHeader.styles.ts
@@ -1,7 +1,7 @@
 import { fonts } from "@constants/font.constant";
 import styled from "@emotion/styled";
 import mixins from "@styles/mixins";
-import { media } from "@styles/media";
+import { ContainerWidth, media } from "@styles/media";
 
 export const ActivityListHeaderwrapper = styled.div`
   ${mixins.flexbox("row", "center", "flex-start")};
@@ -22,7 +22,7 @@ export const ActivityListHeaderwrapper = styled.div`
   }
   .overflow-tab {
     ${media.mobile} {
-      max-width: 324px;
+      max-width: ${ContainerWidth.MOBILE_CONTAINER};
       width: 100%;
       overflow-x: auto;
     }
diff --git a/packages/web/src/components/dashboard/activity-list-table/ActivityListTable.spec.tsx b/packages/web/src/components/dashboard/activity-list-table/ActivityListTable.spec.tsx
index db9d41baa..9ffb38cb9 100644
--- a/packages/web/src/components/dashboard/activity-list-table/ActivityListTable.spec.tsx
+++ b/packages/web/src/components/dashboard/activity-list-table/ActivityListTable.spec.tsx
@@ -3,6 +3,7 @@ import { Provider as JotaiProvider } from "jotai";
 import GnoswapThemeProvider from "@providers/gnoswap-theme-provider/GnoswapThemeProvider";
 import ActivityListTable from "./ActivityListTable";
 import { dummyTokenList } from "@containers/dashboard-activities-container/DashboardActivitiesContainer";
+import { DEVICE_TYPE } from "@styles/media";
 
 describe("ActivityListTable Component", () => {
   it("ActivityListTable render", () => {
@@ -10,6 +11,7 @@ describe("ActivityListTable Component", () => {
       activities: dummyTokenList,
       isFetched: true,
       isSortOption: () => true,
+      breakpoint: DEVICE_TYPE.WEB,
       sort: () => {
         return;
       },
diff --git a/packages/web/src/components/dashboard/activity-list-table/ActivityListTable.stories.tsx b/packages/web/src/components/dashboard/activity-list-table/ActivityListTable.stories.tsx
index afedd1623..db5ec4d21 100644
--- a/packages/web/src/components/dashboard/activity-list-table/ActivityListTable.stories.tsx
+++ b/packages/web/src/components/dashboard/activity-list-table/ActivityListTable.stories.tsx
@@ -3,6 +3,7 @@ import { ComponentStory, ComponentMeta } from "@storybook/react";
 import { action } from "@storybook/addon-actions";
 import { dummyTokenList } from "@containers/dashboard-activities-container/DashboardActivitiesContainer";
 import ActivityListTable from "./ActivityListTable";
+import { DEVICE_TYPE } from "@styles/media";
 
 export default {
   title: "dashboard/ActivityListTable",
@@ -19,6 +20,7 @@ Default.args = {
   isFetched: true,
   isSortOption: () => true,
   sort: action("sort"),
+  breakpoint: DEVICE_TYPE.WEB,
 };
 
 export const Skeleton = Template.bind({});
@@ -27,6 +29,7 @@ Skeleton.args = {
   isFetched: false,
   isSortOption: () => true,
   sort: action("sort"),
+  breakpoint: DEVICE_TYPE.WEB,
 };
 
 export const NotFount = Template.bind({});
@@ -35,4 +38,5 @@ NotFount.args = {
   isFetched: true,
   isSortOption: () => true,
   sort: action("sort"),
+  breakpoint: DEVICE_TYPE.WEB,
 };
diff --git a/packages/web/src/components/dashboard/activity-list-table/ActivityListTable.tsx b/packages/web/src/components/dashboard/activity-list-table/ActivityListTable.tsx
index f988fb3c6..ae3239cec 100644
--- a/packages/web/src/components/dashboard/activity-list-table/ActivityListTable.tsx
+++ b/packages/web/src/components/dashboard/activity-list-table/ActivityListTable.tsx
@@ -23,7 +23,7 @@ import {
 } from "@constants/skeleton.constant";
 import IconTriangleArrowDown from "@components/common/icons/IconTriangleArrowDown";
 import IconTriangleArrowUp from "@components/common/icons/IconTriangleArrowUp";
-import { DeviceSize } from "@styles/media";
+import { DEVICE_TYPE } from "@styles/media";
 
 interface ActivityListTableProps {
   activities: Activity[];
@@ -31,7 +31,7 @@ interface ActivityListTableProps {
   isSortOption: (head: TABLE_HEAD) => boolean;
   sortOption?: SortOption;
   sort: (head: TABLE_HEAD) => void;
-  windowSize: number;
+  breakpoint: DEVICE_TYPE;
 }
 
 const ActivityListTable: React.FC<ActivityListTableProps> = ({
@@ -40,7 +40,7 @@ const ActivityListTable: React.FC<ActivityListTableProps> = ({
   isSortOption,
   sort,
   isFetched,
-  windowSize,
+  breakpoint,
 }) => {
   const isAscendingOption = useCallback(
     (head: TABLE_HEAD) => {
@@ -67,7 +67,7 @@ const ActivityListTable: React.FC<ActivityListTableProps> = ({
     return TABLE_HEAD.ACTION === head;
   };
 
-  return windowSize > DeviceSize.mobile ? (
+  return breakpoint !== DEVICE_TYPE.MOBILE ? (
     <TableWrapper>
       <div className="scroll-wrapper">
         <div className="activity-list-head">
diff --git a/packages/web/src/components/dashboard/activity-list/ActivityList.spec.tsx b/packages/web/src/components/dashboard/activity-list/ActivityList.spec.tsx
index a95a5066a..72bb570a5 100644
--- a/packages/web/src/components/dashboard/activity-list/ActivityList.spec.tsx
+++ b/packages/web/src/components/dashboard/activity-list/ActivityList.spec.tsx
@@ -6,6 +6,7 @@ import {
   ACTIVITY_TYPE,
   dummyTokenList,
 } from "@containers/dashboard-activities-container/DashboardActivitiesContainer";
+import { DEVICE_TYPE } from "@styles/media";
 
 describe("ActivityList Component", () => {
   it("ActivityList render", () => {
@@ -19,6 +20,7 @@ describe("ActivityList Component", () => {
       totalPage: 10,
       movePage: () => {},
       isSortOption: () => true,
+      breakpoint: DEVICE_TYPE.WEB,
       sort: () => {
         return;
       },
diff --git a/packages/web/src/components/dashboard/activity-list/ActivityList.stories.tsx b/packages/web/src/components/dashboard/activity-list/ActivityList.stories.tsx
index ae34ef334..4fc0eeb26 100644
--- a/packages/web/src/components/dashboard/activity-list/ActivityList.stories.tsx
+++ b/packages/web/src/components/dashboard/activity-list/ActivityList.stories.tsx
@@ -4,6 +4,7 @@ import ActivityList from "./ActivityList";
 import { css, Theme } from "@emotion/react";
 import { action } from "@storybook/addon-actions";
 import { dummyTokenList } from "@containers/dashboard-activities-container/DashboardActivitiesContainer";
+import { DEVICE_TYPE } from "@styles/media";
 
 export default {
   title: "dashboard/ActivityList",
@@ -28,6 +29,7 @@ Default.args = {
   movePage: action("movePage"),
   isSortOption: () => true,
   sort: action("sort"),
+  breakpoint: DEVICE_TYPE.WEB,
 };
 
 const wrapper = (theme: Theme) => css`
diff --git a/packages/web/src/components/dashboard/activity-list/ActivityList.tsx b/packages/web/src/components/dashboard/activity-list/ActivityList.tsx
index 325bf7d73..dbc70f428 100644
--- a/packages/web/src/components/dashboard/activity-list/ActivityList.tsx
+++ b/packages/web/src/components/dashboard/activity-list/ActivityList.tsx
@@ -11,7 +11,7 @@ import ActivityListHeader from "@components/dashboard/activity-list-header/Activ
 import ActivityListTable from "@components/dashboard/activity-list-table/ActivityListTable";
 import Pagination from "@components/common/pagination/Pagination";
 import { ActivityListWrapper } from "./ActivityList.styles";
-import { DeviceSize } from "@styles/media";
+import { DeviceSize, DEVICE_TYPE } from "@styles/media";
 interface ActivityItem {
   activities: Activity[];
   isFetched: boolean;
@@ -24,7 +24,7 @@ interface ActivityItem {
   movePage: (page: number) => void;
   isSortOption: (item: TABLE_HEAD) => boolean;
   sort: (item: TABLE_HEAD) => void;
-  windowSize: number;
+  breakpoint: DEVICE_TYPE;
 }
 
 const ActivityList: React.FC<ActivityItem> = ({
@@ -39,7 +39,7 @@ const ActivityList: React.FC<ActivityItem> = ({
   movePage,
   isSortOption,
   sort,
-  windowSize,
+  breakpoint,
 }) => {
   return (
     <ActivityListWrapper>
@@ -53,13 +53,13 @@ const ActivityList: React.FC<ActivityItem> = ({
         sortOption={sortOption}
         isSortOption={isSortOption}
         sort={sort}
-        windowSize={windowSize}
+        breakpoint={breakpoint}
       />
       <Pagination
         currentPage={currentPage}
         totalPage={totalPage}
         onPageChange={movePage}
-        siblingCount={windowSize > DeviceSize.mobile ? 2 : 1}
+        siblingCount={breakpoint !== DEVICE_TYPE.MOBILE ? 2 : 1}
       />
     </ActivityListWrapper>
   );
diff --git a/packages/web/src/components/dashboard/dashboard-info-title/DashboardInfoTitle.spec.tsx b/packages/web/src/components/dashboard/dashboard-info-title/DashboardInfoTitle.spec.tsx
index b6e20dd34..731907d6b 100644
--- a/packages/web/src/components/dashboard/dashboard-info-title/DashboardInfoTitle.spec.tsx
+++ b/packages/web/src/components/dashboard/dashboard-info-title/DashboardInfoTitle.spec.tsx
@@ -2,6 +2,7 @@ import { render } from "@testing-library/react";
 import { Provider as JotaiProvider } from "jotai";
 import GnoswapThemeProvider from "@providers/gnoswap-theme-provider/GnoswapThemeProvider";
 import DashboardInfoTitle from "./DashboardInfoTitle";
+import { DEVICE_TYPE } from "@styles/media";
 
 describe("DashboardInfoTitle Component", () => {
   it("DashboardInfoTitle render", () => {
@@ -10,6 +11,7 @@ describe("DashboardInfoTitle Component", () => {
         gnosAmount: "$0.7425",
         gnotAmount: "$1.8852",
       },
+      breakpoint: DEVICE_TYPE.WEB,
     };
 
     render(
diff --git a/packages/web/src/components/dashboard/dashboard-info-title/DashboardInfoTitle.stories.tsx b/packages/web/src/components/dashboard/dashboard-info-title/DashboardInfoTitle.stories.tsx
index 134630432..fe106adc6 100644
--- a/packages/web/src/components/dashboard/dashboard-info-title/DashboardInfoTitle.stories.tsx
+++ b/packages/web/src/components/dashboard/dashboard-info-title/DashboardInfoTitle.stories.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import { ComponentStory, ComponentMeta } from "@storybook/react";
 import DashboardInfoTitle from "./DashboardInfoTitle";
 import { css, Theme } from "@emotion/react";
+import { DEVICE_TYPE } from "@styles/media";
 
 export default {
   title: "dashboard/DashboardInfoTitle",
@@ -20,6 +21,7 @@ Default.args = {
     gnosAmount: "$0.7425",
     gnotAmount: "$1.8852",
   },
+  breakpoint: DEVICE_TYPE.WEB,
 };
 
 const wrapper = (theme: Theme) => css`
diff --git a/packages/web/src/components/dashboard/dashboard-info-title/DashboardInfoTitle.tsx b/packages/web/src/components/dashboard/dashboard-info-title/DashboardInfoTitle.tsx
index 41167af6b..c00d72de7 100644
--- a/packages/web/src/components/dashboard/dashboard-info-title/DashboardInfoTitle.tsx
+++ b/packages/web/src/components/dashboard/dashboard-info-title/DashboardInfoTitle.tsx
@@ -7,16 +7,16 @@ import {
 } from "./DashboardInfoTitle.styles";
 import IconLogoWhite from "../../common/icons/IconLogoWhite";
 import { DashboardTokenInfo } from "@containers/dashboard-info-container/DashboardInfoContainer";
-import { DeviceSize } from "@styles/media";
+import { DEVICE_TYPE } from "@styles/media";
 
 interface DashboardInfoTitleProps {
   dashboardTokenInfo: DashboardTokenInfo;
-  windowSize: number;
+  breakpoint: DEVICE_TYPE;
 }
 
 const DashboardInfoTitle: React.FC<DashboardInfoTitleProps> = ({
   dashboardTokenInfo,
-  windowSize,
+  breakpoint,
 }) => (
   <DashboardInfoTitleWrapper>
     <TokenWrapper>
@@ -28,7 +28,7 @@ const DashboardInfoTitle: React.FC<DashboardInfoTitleProps> = ({
       </GnosLogoWrapper>
       <div>{dashboardTokenInfo.gnosAmount}</div>
     </TokenWrapper>
-    {windowSize > DeviceSize.mobile && <TitleDivider />}
+    {breakpoint !== DEVICE_TYPE.MOBILE && <TitleDivider />}
     <TokenWrapper>
       <GnotLogoWrapper>
         <div className="gnot-image-wrapper">
diff --git a/packages/web/src/components/dashboard/dashboard-info/DashboardInfo.spec.tsx b/packages/web/src/components/dashboard/dashboard-info/DashboardInfo.spec.tsx
index bc0cb02b7..dee6968c2 100644
--- a/packages/web/src/components/dashboard/dashboard-info/DashboardInfo.spec.tsx
+++ b/packages/web/src/components/dashboard/dashboard-info/DashboardInfo.spec.tsx
@@ -2,6 +2,7 @@ import { render } from "@testing-library/react";
 import { Provider as JotaiProvider } from "jotai";
 import GnoswapThemeProvider from "@providers/gnoswap-theme-provider/GnoswapThemeProvider";
 import DashboardInfo from "./DashboardInfo";
+import { DEVICE_TYPE } from "@styles/media";
 
 describe("DashboardInfo Component", () => {
   it("DashboardInfo render", () => {
@@ -25,6 +26,7 @@ describe("DashboardInfo Component", () => {
         activeProposals: "2",
         communityPool: "2,412,148 GNOS",
       },
+      breakpoint: DEVICE_TYPE.WEB,
     };
 
     render(
diff --git a/packages/web/src/components/dashboard/dashboard-info/DashboardInfo.stories.tsx b/packages/web/src/components/dashboard/dashboard-info/DashboardInfo.stories.tsx
index e3c5db190..18ed80432 100644
--- a/packages/web/src/components/dashboard/dashboard-info/DashboardInfo.stories.tsx
+++ b/packages/web/src/components/dashboard/dashboard-info/DashboardInfo.stories.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import { ComponentStory, ComponentMeta } from "@storybook/react";
 import DashboardInfo from "./DashboardInfo";
 import { css, Theme } from "@emotion/react";
+import { DEVICE_TYPE } from "@styles/media";
 
 export default {
   title: "dashboard/DashboardInfo",
@@ -35,6 +36,7 @@ Default.args = {
     activeProposals: "2",
     communityPool: "2,412,148 GNOS",
   },
+  breakpoint: DEVICE_TYPE.WEB,
 };
 
 const wrapper = (theme: Theme) => css`
diff --git a/packages/web/src/components/dashboard/dashboard-info/DashboardInfo.styles.ts b/packages/web/src/components/dashboard/dashboard-info/DashboardInfo.styles.ts
index 2dced6122..797b09ca9 100644
--- a/packages/web/src/components/dashboard/dashboard-info/DashboardInfo.styles.ts
+++ b/packages/web/src/components/dashboard/dashboard-info/DashboardInfo.styles.ts
@@ -1,11 +1,11 @@
 import styled from "@emotion/styled";
-import { media } from "@styles/media";
+import { ContainerWidth, media } from "@styles/media";
 
 import mixins from "@styles/mixins";
 
 export const DashboardInfoWrapper = styled.div`
   ${mixins.flexbox("column", "flex-start", "flex-start")};
-  max-width: 1360px;
+  max-width: ${ContainerWidth.WEB_CONTAINER};
   width: 100%;
   padding: 24px;
   gap: 24px;
@@ -14,10 +14,10 @@ export const DashboardInfoWrapper = styled.div`
   border-radius: 10px;
   box-shadow: 8px 8px 20px 0px rgba(0, 0, 0, 0.08);
   ${media.tablet} {
-    max-width: 1100px;
+    max-width: ${ContainerWidth.TABLET_CONTAINER};
   }
   ${media.mobile} {
-    max-width: 328px;
+    max-width: ${ContainerWidth.MOBILE_CONTAINER};
     padding: 0px;
     gap: 0px;
   }
diff --git a/packages/web/src/components/dashboard/dashboard-info/DashboardInfo.tsx b/packages/web/src/components/dashboard/dashboard-info/DashboardInfo.tsx
index 6a0e98691..630e7a00c 100644
--- a/packages/web/src/components/dashboard/dashboard-info/DashboardInfo.tsx
+++ b/packages/web/src/components/dashboard/dashboard-info/DashboardInfo.tsx
@@ -6,29 +6,30 @@ import {
   GovernenceOverviewInfo,
   SupplyOverviewInfo,
 } from "@containers/dashboard-info-container/DashboardInfoContainer";
+import { DEVICE_TYPE } from "@styles/media";
 
 interface DashboardInfoProps {
   dashboardTokenInfo: DashboardTokenInfo;
   supplyOverviewInfo: SupplyOverviewInfo;
   governenceOverviewInfo: GovernenceOverviewInfo;
-  windowSize: number;
+  breakpoint: DEVICE_TYPE;
 }
 
 const DashboardInfo: React.FC<DashboardInfoProps> = ({
   dashboardTokenInfo,
   supplyOverviewInfo,
   governenceOverviewInfo,
-  windowSize,
+  breakpoint,
 }) => (
   <DashboardInfoWrapper>
     <DashboardInfoTitle
       dashboardTokenInfo={dashboardTokenInfo}
-      windowSize={windowSize}
+      breakpoint={breakpoint}
     />
     <DashboardOverview
       supplyOverviewInfo={supplyOverviewInfo}
       governenceOverviewInfo={governenceOverviewInfo}
-      windowSize={windowSize}
+      breakpoint={breakpoint}
     />
   </DashboardInfoWrapper>
 );
diff --git a/packages/web/src/components/dashboard/dashboard-overview/DashboardOverview.spec.tsx b/packages/web/src/components/dashboard/dashboard-overview/DashboardOverview.spec.tsx
index ef8219b8a..418d375a2 100644
--- a/packages/web/src/components/dashboard/dashboard-overview/DashboardOverview.spec.tsx
+++ b/packages/web/src/components/dashboard/dashboard-overview/DashboardOverview.spec.tsx
@@ -2,6 +2,7 @@ import { render } from "@testing-library/react";
 import { Provider as JotaiProvider } from "jotai";
 import GnoswapThemeProvider from "@providers/gnoswap-theme-provider/GnoswapThemeProvider";
 import DashboardOverview from "./DashboardOverview";
+import { DEVICE_TYPE } from "@styles/media";
 
 describe("DashboardOverview Component", () => {
   it("DashboardOverview render", () => {
@@ -21,6 +22,7 @@ describe("DashboardOverview Component", () => {
         activeProposals: "2",
         communityPool: "2,412,148 GNOS",
       },
+      breakpoint: DEVICE_TYPE.WEB,
     };
 
     render(
diff --git a/packages/web/src/components/dashboard/dashboard-overview/DashboardOverview.stories.tsx b/packages/web/src/components/dashboard/dashboard-overview/DashboardOverview.stories.tsx
index 23df4aec0..746e3bd00 100644
--- a/packages/web/src/components/dashboard/dashboard-overview/DashboardOverview.stories.tsx
+++ b/packages/web/src/components/dashboard/dashboard-overview/DashboardOverview.stories.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import { ComponentStory, ComponentMeta } from "@storybook/react";
 import DashboardOverview from "./DashboardOverview";
 import { css, Theme } from "@emotion/react";
+import { DEVICE_TYPE } from "@styles/media";
 
 export default {
   title: "dashboard/DashboardOverview",
@@ -16,6 +17,7 @@ const Template: ComponentStory<typeof DashboardOverview> = args => (
 
 export const Default = Template.bind({});
 Default.args = {
+  breakpoint: DEVICE_TYPE.WEB,
   supplyOverviewInfo: {
     totalSupply: "1,000,000,000 GNOS",
     circulatingSupply: "218,184,885 GNOS",
diff --git a/packages/web/src/components/dashboard/dashboard-overview/DashboardOverview.styles.ts b/packages/web/src/components/dashboard/dashboard-overview/DashboardOverview.styles.ts
index c9e5bb2be..bce3581cd 100644
--- a/packages/web/src/components/dashboard/dashboard-overview/DashboardOverview.styles.ts
+++ b/packages/web/src/components/dashboard/dashboard-overview/DashboardOverview.styles.ts
@@ -9,7 +9,6 @@ export const DashboardOverviewWrapper = styled.div`
   border-radius: 8px;
   gap: 8px;
   ${media.mobile} {
-    max-width: 328px;
     border: 0px;
     flex-direction: column;
     justify-content: flex-start;
@@ -17,16 +16,17 @@ export const DashboardOverviewWrapper = styled.div`
 `;
 
 export const OverviewDivider = styled.div`
+  ${mixins.flexbox("column", "flex-start", "flex-start")};
   width: 1px;
-  height: 290px;
+  height: auto;
+  align-self: stretch;
   background: ${({ theme }) => theme.color.border02};
 `;
 
 export const MobileDivider = styled.div`
   ${mixins.flexbox("column", "flex-start", "flex-start")};
-  .divider {
-    width: 328px;
-    height: 1px;
-    background: ${({ theme }) => theme.color.border02};
-  }
+  width: 100%;
+  height: 1px;
+  align-self: stretch;
+  background: ${({ theme }) => theme.color.border02};
 `;
diff --git a/packages/web/src/components/dashboard/dashboard-overview/DashboardOverview.tsx b/packages/web/src/components/dashboard/dashboard-overview/DashboardOverview.tsx
index 43ce34ea5..bb3d8ad89 100644
--- a/packages/web/src/components/dashboard/dashboard-overview/DashboardOverview.tsx
+++ b/packages/web/src/components/dashboard/dashboard-overview/DashboardOverview.tsx
@@ -2,7 +2,7 @@ import {
   GovernenceOverviewInfo,
   SupplyOverviewInfo,
 } from "@containers/dashboard-info-container/DashboardInfoContainer";
-import { DeviceSize } from "@styles/media";
+import { DEVICE_TYPE } from "@styles/media";
 import GovernanceOverview from "../governance-overview/GovernanceOverview";
 import SupplyOverview from "../supply-overview/SupplyOverview";
 import {
@@ -14,27 +14,21 @@ import {
 interface DashboardOverviewProps {
   supplyOverviewInfo: SupplyOverviewInfo;
   governenceOverviewInfo: GovernenceOverviewInfo;
-  windowSize: number;
+  breakpoint: DEVICE_TYPE;
 }
 
 const DashboardOverview: React.FC<DashboardOverviewProps> = ({
   supplyOverviewInfo,
   governenceOverviewInfo,
-  windowSize,
+  breakpoint,
 }) => (
   <DashboardOverviewWrapper>
-    {windowSize <= DeviceSize.mobile && (
-      <MobileDivider>
-        <div className="divider" />
-      </MobileDivider>
-    )}
+    {breakpoint === DEVICE_TYPE.MOBILE && <MobileDivider />}
     <SupplyOverview supplyOverviewInfo={supplyOverviewInfo} />
-    {windowSize > DeviceSize.mobile ? (
+    {breakpoint !== DEVICE_TYPE.MOBILE ? (
       <OverviewDivider />
     ) : (
-      <MobileDivider>
-        <div className="divider" />
-      </MobileDivider>
+      <MobileDivider />
     )}
     <GovernanceOverview governenceOverviewInfo={governenceOverviewInfo} />
   </DashboardOverviewWrapper>
diff --git a/packages/web/src/components/dashboard/governance-overview/GovernanceOverview.styles.ts b/packages/web/src/components/dashboard/governance-overview/GovernanceOverview.styles.ts
index 10a7d2771..057730ad8 100644
--- a/packages/web/src/components/dashboard/governance-overview/GovernanceOverview.styles.ts
+++ b/packages/web/src/components/dashboard/governance-overview/GovernanceOverview.styles.ts
@@ -10,7 +10,6 @@ export const GovernanceOverviewWrapper = styled.div`
   padding: 24px;
   gap: 24px;
   ${media.mobile} {
-    max-width: 328px;
     padding: 12px 12px 16px 12px;
     gap: 16px;
   }
@@ -87,7 +86,7 @@ export const GovernanceWrapper = styled.div`
   .total-issued {
     ${mixins.flexbox("row", "center", "space-between")};
     width: 100%;
-    ${media.mobile} {
+    ${media.tabletMiddle} {
       flex-direction: column;
       align-items: flex-start;
       gap: 6px;
@@ -96,7 +95,7 @@ export const GovernanceWrapper = styled.div`
   .holders {
     ${mixins.flexbox("row", "center", "space-between")};
     width: 100%;
-    ${media.mobile} {
+    ${media.tabletMiddle} {
       flex-direction: column;
       align-items: flex-start;
       gap: 6px;
@@ -105,7 +104,7 @@ export const GovernanceWrapper = styled.div`
   .passed-proposals {
     ${mixins.flexbox("row", "center", "space-between")};
     width: 100%;
-    ${media.mobile} {
+    ${media.tabletMiddle} {
       flex-direction: column;
       align-items: flex-start;
       gap: 6px;
@@ -114,7 +113,7 @@ export const GovernanceWrapper = styled.div`
   .active-proposals {
     ${mixins.flexbox("row", "center", "space-between")};
     width: 100%;
-    ${media.mobile} {
+    ${media.tabletMiddle} {
       flex-direction: column;
       align-items: flex-start;
       gap: 6px;
@@ -123,7 +122,7 @@ export const GovernanceWrapper = styled.div`
   .community-pool {
     ${mixins.flexbox("row", "center", "space-between")};
     width: 100%;
-    ${media.mobile} {
+    ${media.tabletMiddle} {
       flex-direction: column;
       align-items: flex-start;
       gap: 6px;
diff --git a/packages/web/src/components/dashboard/supply-overview/SupplyOverview.styles.ts b/packages/web/src/components/dashboard/supply-overview/SupplyOverview.styles.ts
index e98c287ec..d49a441a5 100644
--- a/packages/web/src/components/dashboard/supply-overview/SupplyOverview.styles.ts
+++ b/packages/web/src/components/dashboard/supply-overview/SupplyOverview.styles.ts
@@ -16,7 +16,6 @@ export const SupplyOverviewWrapper = styled.div`
     }
   }
   ${media.mobile} {
-    max-width: 328px;
     padding: 12px;
     gap: 16px;
   }
@@ -36,6 +35,7 @@ export const SupplyInfoWrapper = styled.div`
     ${fonts.body10};
     color: ${({ theme }) => theme.color.text04};
     gap: 4px;
+    flex-shrink: 0;
 
     ${media.mobile} {
       ${fonts.body12}
@@ -54,7 +54,7 @@ export const SupplyInfoWrapper = styled.div`
   .total-supply {
     ${mixins.flexbox("row", "center", "space-between")};
     width: 100%;
-    ${media.mobile} {
+    ${media.tabletMiddle} {
       flex-direction: column;
       align-items: flex-start;
       gap: 6px;
@@ -71,7 +71,7 @@ export const SupplyInfoWrapper = styled.div`
     .circulating-info {
       ${mixins.flexbox("row", "center", "space-between")};
       width: 100%;
-      ${media.mobile} {
+      ${media.tabletMiddle} {
         flex-direction: column;
         align-items: flex-start;
         gap: 6px;
@@ -82,7 +82,7 @@ export const SupplyInfoWrapper = styled.div`
   .daily-block-emissions {
     ${mixins.flexbox("row", "center", "space-between")};
     width: 100%;
-    ${media.mobile} {
+    ${media.tabletMiddle} {
       flex-direction: column;
       align-items: flex-start;
       gap: 6px;
@@ -92,7 +92,7 @@ export const SupplyInfoWrapper = styled.div`
   .total-staked {
     ${mixins.flexbox("row", "flex-start", "space-between")};
     width: 100%;
-    ${media.mobile} {
+    ${media.tabletMiddle} {
       flex-direction: column;
       align-items: flex-start;
       gap: 6px;
@@ -101,11 +101,10 @@ export const SupplyInfoWrapper = styled.div`
       ${mixins.flexbox("column", "flex-end", "center")};
       width: 100%;
       gap: 4px;
-      ${media.mobile} {
-        flex-direction: row;
-        justify-content: space-between;
-        align-items: center;
-        gap: 6px;
+      ${media.tabletMiddle} {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 4px;
       }
     }
     .staked-ratio-title {
diff --git a/packages/web/src/components/dashboard/tvl-chart-graph/TvlChartGraph.styles.ts b/packages/web/src/components/dashboard/tvl-chart-graph/TvlChartGraph.styles.ts
index 8ff5e4838..cbe1875dd 100644
--- a/packages/web/src/components/dashboard/tvl-chart-graph/TvlChartGraph.styles.ts
+++ b/packages/web/src/components/dashboard/tvl-chart-graph/TvlChartGraph.styles.ts
@@ -1,40 +1,41 @@
 import styled from "@emotion/styled";
 import { fonts } from "@constants/font.constant";
 import { media } from "@styles/media";
+import mixins from "@styles/mixins";
 
 export const TvlChartGraphWrapper = styled.div`
-  display: flex;
-  flex-direction: row;
+  ${mixins.flexbox("column", "flex-start", "flex-start")};
   width: 100%;
   background-color: ${({ theme }) => theme.color.background01};
   border-radius: 8px;
-  justify-content: space-between;
   padding: 24px 24px 23px 24px;
   ${media.mobile} {
-    flex-direction: column;
-    padding: 24px 0px 0px 13px;
+    padding: 24px 13px 27px 13px;
   }
 
   .data-wrapper {
-    display: flex;
-    flex-direction: column;
-    max-width: 755px;
     width: 100%;
+    .graph-wrap {
+      ${mixins.flexbox("column", "flex-start", "flex-start")};
+      width: 100%;
+    }
 
     .graph {
       border: 1px solid ${({ theme }) => theme.color.border02};
     }
 
     .xaxis-wrapper {
-      display: flex;
-      flex-direction: row;
+      ${mixins.flexbox("row", "center", "space-between")};
       width: 100%;
       height: 17px;
+      flex-shrink: 0;
       margin-top: 16px;
-      justify-content: space-between;
+      ${media.mobile} {
+        height: 13px;
+      }
       ${fonts.body12};
       color: ${({ theme }) => theme.color.text04};
-
+      text-align: center;
       span {
         ${fonts.body12};
         ${media.mobile} {
diff --git a/packages/web/src/components/dashboard/tvl-chart-graph/TvlChartGraph.tsx b/packages/web/src/components/dashboard/tvl-chart-graph/TvlChartGraph.tsx
index f2d0e9dfa..293b612d4 100644
--- a/packages/web/src/components/dashboard/tvl-chart-graph/TvlChartGraph.tsx
+++ b/packages/web/src/components/dashboard/tvl-chart-graph/TvlChartGraph.tsx
@@ -1,5 +1,6 @@
 import LineGraph from "@components/common/line-graph/LineGraph";
 import { useTheme } from "@emotion/react";
+import useComponentSize from "@hooks/common/use-component-size";
 import React, { useCallback } from "react";
 import { TvlChartGraphWrapper } from "./TvlChartGraph.styles";
 
@@ -20,6 +21,7 @@ const TvlChartGraph: React.FC<TvlChartGraphProps> = ({
   xAxisLabels,
 }) => {
   const theme = useTheme();
+  const [componentRef, size] = useComponentSize();
 
   const getDatas = useCallback(() => {
     return datas.map(data => ({
@@ -31,20 +33,20 @@ const TvlChartGraph: React.FC<TvlChartGraphProps> = ({
   return (
     <TvlChartGraphWrapper>
       <div className="data-wrapper">
-        <LineGraph
-          cursor
-          className="graph"
-          width={570}
-          height={180}
-          color={theme.color.point}
-          strokeWidth={1}
-          datas={getDatas()}
-        />
+        <div className="graph-wrap" ref={componentRef}>
+          <LineGraph
+            cursor
+            className="graph"
+            width={size.width}
+            height={size.height}
+            color={theme.color.point}
+            strokeWidth={1}
+            datas={getDatas()}
+          />
+        </div>
         <div className="xaxis-wrapper">
           {xAxisLabels.map((label, index) => (
-            <span key={index} className="label">
-              {label}
-            </span>
+            <span key={index}>{label}</span>
           ))}
         </div>
       </div>
diff --git a/packages/web/src/components/dashboard/volume-chart-graph/VolumeChartGraph.styles.ts b/packages/web/src/components/dashboard/volume-chart-graph/VolumeChartGraph.styles.ts
index a9ce17c88..76c7b49d5 100644
--- a/packages/web/src/components/dashboard/volume-chart-graph/VolumeChartGraph.styles.ts
+++ b/packages/web/src/components/dashboard/volume-chart-graph/VolumeChartGraph.styles.ts
@@ -1,37 +1,38 @@
 import styled from "@emotion/styled";
 import { fonts } from "@constants/font.constant";
 import { media } from "@styles/media";
+import mixins from "@styles/mixins";
 
 export const VolumeChartGraphWrapper = styled.div`
-  display: flex;
-  flex-direction: row;
+  ${mixins.flexbox("column", "flex-start", "flex-start")};
   width: 100%;
   background-color: ${({ theme }) => theme.color.background01};
   border-radius: 8px;
-  justify-content: space-between;
   padding: 24px 24px 23px 24px;
   ${media.mobile} {
-    flex-direction: column;
-    padding: 24px 0px 0px 13px;
+    padding: 24px 13px 27px 13px;
   }
 
   .data-wrapper {
-    display: flex;
-    flex-direction: column;
-    max-width: 755px;
     width: 100%;
+    .graph-wrap {
+      ${mixins.flexbox("column", "flex-start", "flex-start")};
+      width: 100%;
+    }
 
     .graph {
       border: 1px solid ${({ theme }) => theme.color.border02};
     }
 
     .xaxis-wrapper {
-      display: flex;
-      flex-direction: row;
+      ${mixins.flexbox("row", "center", "space-between")};
       width: 100%;
       height: 17px;
+      flex-shrink: 0;
       margin-top: 16px;
-      justify-content: space-between;
+      ${media.mobile} {
+        height: 13px;
+      }
       ${fonts.body12};
       color: ${({ theme }) => theme.color.text04};
 
diff --git a/packages/web/src/components/dashboard/volume-chart-graph/VolumeChartGraph.tsx b/packages/web/src/components/dashboard/volume-chart-graph/VolumeChartGraph.tsx
index 585d226b1..2457d2cbb 100644
--- a/packages/web/src/components/dashboard/volume-chart-graph/VolumeChartGraph.tsx
+++ b/packages/web/src/components/dashboard/volume-chart-graph/VolumeChartGraph.tsx
@@ -1,5 +1,6 @@
 import BarGraph from "@components/common/bar-graph/BarGraph";
 import { useTheme } from "@emotion/react";
+import useComponentSize from "@hooks/common/use-component-size";
 import React from "react";
 import { VolumeChartGraphWrapper } from "./VolumeChartGraph.styles";
 
@@ -10,25 +11,31 @@ export interface VolumeChartGraphProps {
 
 const VolumeChartGraph: React.FC<VolumeChartGraphProps> = ({
   datas,
-  xAxisLabels
+  xAxisLabels,
 }) => {
   const theme = useTheme();
+  const [componentRef, size] = useComponentSize();
 
   return (
     <VolumeChartGraphWrapper>
       <div className="data-wrapper">
-        <BarGraph
-          className="graph"
-          width={570}
-          height={180}
-          color={theme.color.background04Hover}
-          hoverColor={theme.color.point}
-          strokeWidth={12.5}
-          datas={datas}
-        />
+        <div className="graph-wrap" ref={componentRef}>
+          <BarGraph
+            className="graph"
+            width={size.width}
+            height={size.height}
+            color={theme.color.background04Hover}
+            hoverColor={theme.color.point}
+            strokeWidth={12.5}
+            datas={datas}
+          />
+        </div>
         <div className="xaxis-wrapper">
-          {xAxisLabels.map((label, index) =>
-            <span key={index} className="label">{label}</span>)}
+          {xAxisLabels.map((label, index) => (
+            <span key={index} className="label">
+              {label}
+            </span>
+          ))}
         </div>
       </div>
     </VolumeChartGraphWrapper>
diff --git a/packages/web/src/containers/dashboard-activities-container/DashboardActivitiesContainer.tsx b/packages/web/src/containers/dashboard-activities-container/DashboardActivitiesContainer.tsx
index cc6ac4ccb..b4ae34255 100644
--- a/packages/web/src/containers/dashboard-activities-container/DashboardActivitiesContainer.tsx
+++ b/packages/web/src/containers/dashboard-activities-container/DashboardActivitiesContainer.tsx
@@ -1,7 +1,9 @@
-import React, { useCallback, useState, useEffect } from "react";
+import React, { useCallback, useState } from "react";
 import { useQuery } from "@tanstack/react-query";
 import { ValuesType } from "utility-types";
 import ActivityList from "@components/dashboard/activity-list/ActivityList";
+import { CommonState } from "@states/index";
+import { useAtom } from "jotai";
 
 export interface Activity {
   action: string;
@@ -87,18 +89,7 @@ const DashboardActivitiesContainer: React.FC = () => {
   );
   const [page, setPage] = useState(0);
   const [sortOption, setSortOption] = useState<SortOption>();
-  const [width, setWidth] = useState(Number);
-  const handleResize = () => {
-    setWidth(window.innerWidth);
-  };
-
-  useEffect(() => {
-    handleResize();
-    window.addEventListener("resize", handleResize);
-    return () => {
-      window.removeEventListener("resize", handleResize);
-    };
-  }, []);
+  const [breakpoint] = useAtom(CommonState.breakpoint);
 
   const {
     isFetched,
@@ -175,7 +166,7 @@ const DashboardActivitiesContainer: React.FC = () => {
       movePage={movePage}
       isSortOption={isSortOption}
       sort={sort}
-      windowSize={width}
+      breakpoint={breakpoint}
     />
   );
 };
diff --git a/packages/web/src/containers/dashboard-info-container/DashboardInfoContainer.tsx b/packages/web/src/containers/dashboard-info-container/DashboardInfoContainer.tsx
index ffa391f17..d328e24b6 100644
--- a/packages/web/src/containers/dashboard-info-container/DashboardInfoContainer.tsx
+++ b/packages/web/src/containers/dashboard-info-container/DashboardInfoContainer.tsx
@@ -1,5 +1,7 @@
-import React, { useEffect, useState } from "react";
+import React from "react";
 import DashboardInfo from "@components/dashboard/dashboard-info/DashboardInfo";
+import { CommonState } from "@states/index";
+import { useAtom } from "jotai";
 
 export interface DashboardTokenInfo {
   gnosAmount: string;
@@ -46,25 +48,14 @@ const initialGovernenceOverviewInfo: GovernenceOverviewInfo = {
 };
 
 const DashboardInfoContainer: React.FC = () => {
-  const [width, setWidth] = useState(Number);
-  const handleResize = () => {
-    setWidth(window.innerWidth);
-  };
-
-  useEffect(() => {
-    handleResize();
-    window.addEventListener("resize", handleResize);
-    return () => {
-      window.removeEventListener("resize", handleResize);
-    };
-  }, []);
+  const [breakpoint] = useAtom(CommonState.breakpoint);
 
   return (
     <DashboardInfo
       dashboardTokenInfo={initialDashboardTokenInfo}
       supplyOverviewInfo={initialSupplyOverviewInfo}
       governenceOverviewInfo={initialGovernenceOverviewInfo}
-      windowSize={width}
+      breakpoint={breakpoint}
     />
   );
 };
diff --git a/packages/web/src/hooks/common/use-component-size.tsx b/packages/web/src/hooks/common/use-component-size.tsx
new file mode 100644
index 000000000..4c2d35438
--- /dev/null
+++ b/packages/web/src/hooks/common/use-component-size.tsx
@@ -0,0 +1,32 @@
+import { useState, useEffect, useRef } from "react";
+
+interface ComponentSize {
+  width: number;
+  height: number;
+}
+
+function useComponentSize(): [React.RefObject<HTMLDivElement>, ComponentSize] {
+  const [size, setSize] = useState<ComponentSize>({ width: 0, height: 0 });
+  const componentRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleResize = () => {
+      const { width, height } =
+        componentRef.current?.getBoundingClientRect() ?? {
+          width: 0,
+          height: 0,
+        };
+      setSize({ width, height });
+    };
+
+    handleResize();
+
+    window.addEventListener("resize", handleResize);
+
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
+  return [componentRef, size];
+}
+
+export default useComponentSize;
diff --git a/packages/web/src/hooks/common/use-window-size.tsx b/packages/web/src/hooks/common/use-window-size.tsx
index e3dcfa438..8ae0604f2 100644
--- a/packages/web/src/hooks/common/use-window-size.tsx
+++ b/packages/web/src/hooks/common/use-window-size.tsx
@@ -6,10 +6,18 @@ export const useWindowSize = () => {
   const [breakpoint, setBreakpoint] = useAtom(CommonState.breakpoint);
 
   const findDeviceType = (width: number) => {
-    return width > DeviceSize.tablet
+    return width > DeviceSize.webLarge
       ? DEVICE_TYPE.WEB
-      : width > DeviceSize.mobile
+      : width > DeviceSize.webMiddle
+      ? DEVICE_TYPE.WEB_L
+      : width > DeviceSize.tablet
+      ? DEVICE_TYPE.WEB_M
+      : width > DeviceSize.tabletLarge
       ? DEVICE_TYPE.TABLET
+      : width > DeviceSize.tabletMiddle
+      ? DEVICE_TYPE.TABLET_L
+      : width > DeviceSize.mobile
+      ? DEVICE_TYPE.TABLET_M
       : DEVICE_TYPE.MOBILE;
   };
 
diff --git a/packages/web/src/layouts/dashboard-layout/DashboardLayout.styles.ts b/packages/web/src/layouts/dashboard-layout/DashboardLayout.styles.ts
index 7be068380..d7af88608 100644
--- a/packages/web/src/layouts/dashboard-layout/DashboardLayout.styles.ts
+++ b/packages/web/src/layouts/dashboard-layout/DashboardLayout.styles.ts
@@ -1,7 +1,7 @@
 import mixins from "@styles/mixins";
 import styled from "@emotion/styled";
 import { fonts } from "@constants/font.constant";
-import { media } from "@styles/media";
+import { ContainerWidth, media } from "@styles/media";
 
 export const DashboardLayoutWrapper = styled.div`
   ${mixins.flexbox("column", "center", "flex-start")};
@@ -10,17 +10,18 @@ export const DashboardLayoutWrapper = styled.div`
 
   .dashboard-section {
     ${mixins.flexbox("column", "center", "flex-start")};
-    max-width: 1920px;
+    max-width: ${ContainerWidth.WEB_SECTION_CONTAINER};
     width: 100%;
     padding: 100px 0px 100px 0px;
     gap: 36px;
     ${media.tablet} {
-      max-width: 1180px;
+      max-width: ${ContainerWidth.TABLET_CONTAINER};
       padding: 60px 0px 60px 0px;
       gap: 24px;
     }
     ${media.mobile} {
-      max-width: 360px;
+      max-width: ${ContainerWidth.MOBILE_CONTAINER};
+      width: 90%;
       padding: 24px 0px 48px 0px;
       gap: 24px;
     }
@@ -28,16 +29,14 @@ export const DashboardLayoutWrapper = styled.div`
 
   .title-container {
     ${mixins.flexbox("column", "flex-start", "flex-start")};
-    max-width: 1440px;
+    max-width: ${ContainerWidth.WEB_CONTAINER};
     width: 100%;
     padding: 0px 40px 0px 40px;
     gap: 16px;
     ${media.tablet} {
-      max-width: 1180px;
       gap: 16px;
     }
     ${media.mobile} {
-      max-width: 328px;
       padding: 0px 0px 0px 0px;
       gap: 24px;
     }
@@ -55,17 +54,17 @@ export const DashboardLayoutWrapper = styled.div`
   .charts-container {
     display: grid;
     width: 100%;
-    max-width: 1440px;
+    max-width: ${ContainerWidth.WEB_CONTAINER};
     column-gap: 24px;
     grid-template-columns: repeat(2, 1fr);
     padding: 0px 40px;
     ${media.tablet} {
-      max-width: 1180px;
+      max-width: ${ContainerWidth.TABLET_CONTAINER};
       grid-template-columns: repeat(2, 1fr);
     }
     ${media.mobile} {
       grid-template-columns: repeat(1, auto);
-      max-width: 328px;
+      max-width: ${ContainerWidth.MOBILE_CONTAINER};
       padding: 0px 0px 0px 0px;
       row-gap: 8px;
       column-gap: 24px;
@@ -74,29 +73,31 @@ export const DashboardLayoutWrapper = styled.div`
 
   .dashboard-info-container {
     ${mixins.flexbox("column", "flex-start", "flex-start")};
-    max-width: 1440px;
+    max-width: ${ContainerWidth.WEB_CONTAINER};
     width: 100%;
     padding: 0px 40px;
     ${media.tablet} {
-      max-width: 1180px;
+      max-width: ${ContainerWidth.TABLET_CONTAINER};
     }
     ${media.mobile} {
-      max-width: 328px;
+      max-width: ${ContainerWidth.MOBILE_CONTAINER};
+      align-items: center;
       padding: 0px 0px 0px 0px;
     }
   }
 
   .activities-section {
     ${mixins.flexbox("column", "center", "flex-start")};
-    max-width: 1920px;
+    max-width: ${ContainerWidth.WEB_SECTION_CONTAINER};
     width: 100%;
     padding: 100px 0px 100px 0px;
     ${media.tablet} {
-      max-width: 1180px;
+      max-width: ${ContainerWidth.TABLET_CONTAINER};
       padding: 60px 0px 60px 0px;
     }
     ${media.mobile} {
-      max-width: 360px;
+      max-width: ${ContainerWidth.MOBILE_CONTAINER};
+      width: 90%;
       padding: 48px 0px 48px 0px;
     }
   }
@@ -105,15 +106,15 @@ export const DashboardLayoutWrapper = styled.div`
     position: relative;
     .activities-container {
       ${mixins.flexbox("column", "center", "center")};
-      max-width: 1440px;
+      max-width: ${ContainerWidth.WEB_CONTAINER};
       width: 100%;
       padding: 0px 40px;
       gap: 24px;
       ${media.tablet} {
-        max-width: 1180px;
+        max-width: ${ContainerWidth.TABLET_CONTAINER};
       }
       ${media.mobile} {
-        max-width: 360px;
+        max-width: ${ContainerWidth.MOBILE_CONTAINER};
         padding: 0px 16px;
         gap: 24px;
       }
diff --git a/packages/web/src/styles/media.ts b/packages/web/src/styles/media.ts
index 060925b9c..3a0e61880 100644
--- a/packages/web/src/styles/media.ts
+++ b/packages/web/src/styles/media.ts
@@ -6,14 +6,22 @@ interface MediaProps {
 
 export const DEVICE_TYPE = {
   WEB: "web",
+  WEB_L: "webLarge",
+  WEB_M: "webMiddle",
   TABLET: "tablet",
+  TABLET_L: "tabletLarge",
+  TABLET_M: "tabletMiddle",
   MOBILE: "mobile",
 } as const;
 export type DEVICE_TYPE = ValuesType<typeof DEVICE_TYPE>;
 
 export const DeviceSize: MediaProps = {
   web: 2160,
+  webLarge: 1680,
+  webMiddle: 1520,
   tablet: 1280,
+  tabletLarge: 1000,
+  tabletMiddle: 920,
   mobile: 768,
 };
 
@@ -30,5 +38,6 @@ const customMediaQuery = (maxWidth: number) =>
 export const media = {
   web: customMediaQuery(DeviceSize.web),
   tablet: customMediaQuery(DeviceSize.tablet),
+  tabletMiddle: customMediaQuery(DeviceSize.tabletMiddle),
   mobile: customMediaQuery(DeviceSize.mobile),
 };