just init

site/src/pages/Overview/index.jsx

@@ -25,8 +25,13 @@ import { mdcss, smcss } from "@osn/common";
 import IncomeAndOutputPeriods from "./IncomeAndOutputPeriods";
 import TopBeneficiariesTable from "./TopBeneficiariesTable/index.jsx";
 import OutputPeriods from "./OutputPeriods";
-import { currentChainSettings, isCentrifuge } from "../../utils/chains";
+import {
+  currentChainSettings,
+  isCentrifuge,
+  isPolkadot,
+} from "../../utils/chains";
 import AssetHub from "./AssetHub";
+import OverviewPolkadot from "./polkadot";
 
 const DoughnutWrapper = styled.div`
   display: grid;
@@ -82,6 +87,10 @@ const Overview = () => {
   const overview = useSelector(overviewSelector);
   const symbol = useSelector(chainSymbolSelector);
 
+  if (isPolkadot) {
+    return <OverviewPolkadot />;
+  }
+
   const precision = getPrecision(symbol);
 
   const inflation = toPrecision(

site/src/pages/Overview/polkadot/assethub.jsx

@@ -0,0 +1,12 @@
+// site/src/pages/Overview/AssetHub.jsx
+
+import styled from "styled-components";
+import Card from "../../../components/Card";
+
+const Wrapper = styled(Card)`
+  padding: 24px;
+`;
+
+export default function OverviewAssethub() {
+  return <Wrapper>assethub</Wrapper>;
+}

site/src/pages/Overview/polkadot/index.jsx

@@ -0,0 +1,18 @@
+import styled from "styled-components";
+import OverviewAssethub from "./assethub";
+import OverviewTotalTreasury from "./totalTreasury";
+import { space_y } from "../../../styles/tailwindcss";
+
+const Wrapper = styled.div`
+  ${space_y(16)}
+`;
+
+export default function OverviewPolkadot() {
+  return (
+    <Wrapper>
+      <OverviewTotalTreasury />
+
+      <OverviewAssethub />
+    </Wrapper>
+  );
+}

site/src/pages/Overview/polkadot/totalTreasury.jsx

@@ -0,0 +1,34 @@
+import styled from "styled-components";
+import Card from "../../../components/Card";
+import { h4_16_semibold } from "../../../styles/text";
+
+const Wrapper = styled(Card)`
+  padding: 24px;
+`;
+
+const Title = styled.h4`
+  ${h4_16_semibold}
+`;
+
+const TokenGroup = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 8px;
+`;
+
+export default function OverviewTotalTreasury() {
+  return (
+    <Wrapper>
+      <div>
+        <Title>Total Treasury</Title>
+        <div>price</div>
+      </div>
+
+      <TokenGroup>
+        <div>item</div>
+      </TokenGroup>
+    </Wrapper>
+  );
+}