diff --git a/src/components/PairHeader.tsx b/src/components/PairHeader.tsx
new file mode 100644
index 0000000..dad21ee
--- /dev/null
+++ b/src/components/PairHeader.tsx
@@ -0,0 +1,46 @@
+import React, { useState } from "react";
+import type Pair from "~/interfaces/Pair";
+
+
+interface PairHeaderProps {
+    pair:Pair
+}
+
+const PairHeader = (props:PairHeaderProps) => {
+    const [showPairs, setShowPairs] = useState(false);
+
+    function togglePairs() {
+        setShowPairs(prevShowPairs => !prevShowPairs);
+        console.log(showPairs);
+    }
+
+    return (
+        <div className="container mx-auto p-5 w-full flex space-x-4 text-white">
+            <div className="static">
+                <button className="font-bold shadow hover:shadow-xl static flex"
+                        onClick={togglePairs}>
+                    <div className="h-full text-xl">{props.pair.name}</div> 
+                    <div className="h-full align-bottom mt-2 mb-0 pl-3">&#65088;</div>
+                </button>
+
+                <div className={"absolute bottom-0 left-0 " + showPairs?"":"collapse"}>
+                    This is the list of pairs.
+                </div>
+            </div>
+            <div>
+                Price
+            </div>
+            <div>
+                24h Change
+            </div>
+            <div>
+                24h High
+            </div>
+            <div>
+                24h Low
+            </div>
+        </div>
+    );
+};
+
+export default PairHeader;
diff --git a/src/interfaces/Pair.tsx b/src/interfaces/Pair.tsx
new file mode 100644
index 0000000..189f42d
--- /dev/null
+++ b/src/interfaces/Pair.tsx
@@ -0,0 +1,10 @@
+interface Pair {
+    name: string,
+    price: number,
+    change: number,
+    high: number,
+    low: number
+  };
+
+
+export default Pair;
\ No newline at end of file
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 1ef4381..df1d9f9 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,5 +1,16 @@
+import PairHeader from "~/components/PairHeader";
+import type Pair from "~/interfaces/Pair";
+
+
 export default function Home() {
   // const hello = api.post.hello.useQuery({ text: "from tRPC" });
+  const pair: Pair = {
+    name: "XDCPerp/USDC",
+    price: 0,
+    change: 0,
+    high: 0,
+    low: 0
+  };
 
   return (
     <main className="container mx-auto mb-8 mt-4 grid w-full grow grid-cols-4 gap-4">