diff --git a/components/LeaderboardPage/LeaderboardAddress.tsx b/components/LeaderboardPage/LeaderboardAddress.tsx
deleted file mode 100644
index c939e208..00000000
--- a/components/LeaderboardPage/LeaderboardAddress.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import { useEffect, useState } from "react"
-
-import retryGetEns from "../../lib/retryGetEns"
-import truncateEthAddress from "../../lib/truncateEthAddress"
-import getLensHandle from "../../lib/lens/getLensHandle"
-
-const LeaderboardAddress = ({ address }) => {
-  const [ensName, setEnsName] = useState(null as string)
-
-  const handleClick = () => {
-    if (ensName?.includes?.(".lens")) {
-      window.open(`https://hey.xyz/u/${ensName}`, "_blank")
-      return
-    }
-    window.open(`https://zora.co/${ensName || address}`, "_blank")
-  }
-
-  useEffect(() => {
-    const init = async () => {
-      const lensHandle = await getLensHandle(address)
-      if (lensHandle) {
-        setEnsName(lensHandle)
-        return
-      }
-      const ensRecord = await retryGetEns(address)
-      if (!ensRecord?.title) return
-      setEnsName(ensRecord?.title)
-    }
-
-    if (!address) return
-    init()
-  }, [address])
-
-  return (
-    <td
-      className="flex md:items-center justify-center gap-[2px] md:gap-3 
-        w-full
-        text-[8px] text-[11px] md:text-[16px]
-        p-[5px] md:px-4 md:py-2 border-r-2 border-black"
-    >
-      <button type="button" onClick={handleClick}>
-        {ensName || truncateEthAddress(address)}
-      </button>
-    </td>
-  )
-}
-
-export default LeaderboardAddress
diff --git a/components/LeaderboardPage/LeaderboardHeader.tsx b/components/LeaderboardPage/LeaderboardHeader.tsx
deleted file mode 100644
index 7c0990c7..00000000
--- a/components/LeaderboardPage/LeaderboardHeader.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-const LeaderboardHeader = () => (
-  <thead className="border-b-[2px] border-black border-solid">
-    <tr>
-      <th
-        className="p-[5px] md:p-4 
-                    text-left border-r-[2px] 
-                    border-black text-center
-                    uppercase 
-                    text-[8px] xs:text-[11px] md:text-[18px]
-                    md:min-w-[100px]"
-      >
-        Rank
-      </th>
-      <th
-        className="p-[5px] md:p-4 
-                    text-left border-r-[2px] 
-                    border-black text-center 
-                    uppercase 
-                    text-[8px] xs:text-[11px] md:text-[18px]
-                    w-[100px] xs:!w-[130px] md:!w-[200px]"
-      >
-        Score
-      </th>
-      <th
-        className="p-[5px] md:p-4 
-                    text-left border-r-[2px] 
-                    border-black text-center 
-                    uppercase 
-                    text-[8px] xs:text-[11px] md:text-[18px]"
-      >
-        Name
-      </th>
-      <th
-        className="p-[5px] md:p-4 
-                    text-left border-r-[2px] 
-                    border-black text-center 
-                    uppercase 
-                    text-[8px] xs:text-[11px] md:text-[18px]"
-      >
-        Address
-      </th>
-    </tr>
-  </thead>
-)
-
-export default LeaderboardHeader
diff --git a/components/LeaderboardPage/LeaderboardPage.tsx b/components/LeaderboardPage/LeaderboardPage.tsx
deleted file mode 100644
index a38c9958..00000000
--- a/components/LeaderboardPage/LeaderboardPage.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import { useEffect, useState } from "react"
-import LeaderboardRow from "./LeaderboardRow"
-import SkeletonTableBody from "./SkeletonTableBody"
-import SeoHead from "../SeoHead"
-import { getLeaderboard } from "../../lib/firebase/firebase"
-import LeaderboardHeader from "./LeaderboardHeader"
-import { ARTIST, TITLE } from "../../lib/consts"
-
-const LeaderboardPage = () => {
-  const [scores, setScores] = useState([])
-
-  useEffect(() => {
-    const init = async () => {
-      const response = await getLeaderboard()
-      setScores(response)
-    }
-    init()
-  }, [])
-
-  return (
-    <div className="w-full  mx-auto font-dresden ">
-      <SeoHead title="Leaderboard" />
-      <div
-        className="
-          text-white text-center 
-          text-[40px] md:text-[100px] 
-          font-bold
-        "
-      >
-        Leaderboard
-      </div>
-      <div className="w-full flex justify-center pb-4">
-        <div
-          className="font-quicksand 
-            text-white text-center 
-            w-[300px] xs:w-[350px] md:w-[430px] 
-            text-[13px] xs:text-[15px] md:text-[18px] 
-            drop-shadow-[0_2px_2px_rgba(0,0,0,0.45)] 
-            font-[500]"
-        >
-          {TITLE} by {ARTIST}
-        </div>
-      </div>
-      <div className="w-full flex justify-center pb-4" />
-      <div className="md:px-4 w-full flex justify-center">
-        <div
-          className="w-[310px] xs:w-[370px] md:w-full 
-            border-[2px] border-[black] border-solid
-            h-[470px] rounded-lg 
-            overflow-auto 
-            shadow-[4px_4px_4px_rgb(0,0,0,0.25)] dark:shadow-[4px_4px_4px_rgb(255,255,255,0.25)]
-            scrollbar scrollbar-thumb-[black] 
-            scrollbar-track-white 
-            scrollbar-thumb-rounded-full"
-        >
-          <table className="w-full font-quicksand bg-white">
-            <LeaderboardHeader />
-            {scores.length > 0 ? (
-              <tbody>
-                {scores.map((collector, index) => (
-                  <LeaderboardRow
-                    key={collector.wallet}
-                    address={collector.wallet}
-                    name={collector.name}
-                    numberOwned={collector.score}
-                    rank={index + 1}
-                  />
-                ))}
-              </tbody>
-            ) : (
-              <SkeletonTableBody />
-            )}
-          </table>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export default LeaderboardPage
diff --git a/components/LeaderboardPage/LeaderboardRow.tsx b/components/LeaderboardPage/LeaderboardRow.tsx
deleted file mode 100644
index 4a616f91..00000000
--- a/components/LeaderboardPage/LeaderboardRow.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import LeaderboardAddress from "./LeaderboardAddress"
-
-const LeaderboardRow = ({ address, numberOwned, rank, name }) => (
-  <tr key={address} className="text-center bg-white hover:bg-blue-300">
-    <td
-      className="text-[8px] xs:text-[11px] md:text-[16px]
-        p-[5px] md:px-4 md:py-2 border-r-2 border-black"
-    >
-      #{rank}
-    </td>
-    <td
-      className="text-[8px] text-[11px] md:text-[16px]
-        p-[5px] md:px-4 md:py-2 border-r-2 border-black"
-    >
-      {numberOwned}
-    </td>
-    <td
-      className="text-[8px] text-[11px] md:text-[16px]
-        p-[5px] md:px-4 md:py-2 border-r-2 border-black"
-    >
-      {name}
-    </td>
-    <LeaderboardAddress address={address} />
-  </tr>
-)
-
-export default LeaderboardRow
diff --git a/components/LeaderboardPage/SkeletonTableBody.tsx b/components/LeaderboardPage/SkeletonTableBody.tsx
deleted file mode 100644
index 106dbd89..00000000
--- a/components/LeaderboardPage/SkeletonTableBody.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-/* eslint-disable react/no-array-index-key, jsx-a11y/control-has-associated-label */
-const SkeletonTableBody = () => (
-  <tbody>
-    {Array(10)
-      .fill(null)
-      .map((_, index) => (
-        <tr key={index} className="bg-gray-100">
-          <td className="px-4 py-4">
-            <div className="w-6 h-3 bg-gray-200 animate-pulse rounded-2xl" />
-          </td>
-          <td className="px-4 py-4">
-            <div className="w-16 h-3 bg-gray-200 animate-pulse rounded-2xl" />
-          </td>
-          <td className="px-4 py-4">
-            <div className="w-32 h-3 bg-gray-200 animate-pulse rounded-2xl" />
-          </td>
-          <td className="px-4 py-4">
-            <div className="w-32 h-3 bg-gray-200 animate-pulse rounded-2xl" />
-          </td>
-        </tr>
-      ))}
-  </tbody>
-)
-
-export default SkeletonTableBody
diff --git a/components/Pages/LeaderboardPage/LeaderboardPage.tsx b/components/Pages/LeaderboardPage/LeaderboardPage.tsx
new file mode 100644
index 00000000..c05a34e1
--- /dev/null
+++ b/components/Pages/LeaderboardPage/LeaderboardPage.tsx
@@ -0,0 +1,41 @@
+import useIsMobile from "@/hooks/useIsMobile"
+import Layout from "@/components/Layout"
+import SeoHead from "@/components/SeoHead"
+import RecBar from "@/components/RecBar"
+import BackPortalButton from "@/components/BackPortalButton"
+
+const LeaderboardPage = () => {
+  const isMobile = useIsMobile()
+
+  return (
+    <Layout type={isMobile ? "mobile" : "full"}>
+      <SeoHead title="HENO. Employee" image="/images/Landing/web3.jpeg" />
+      <div className="p-[5px] md:p-[10px] border-[2px] border-gray_1 h-full w-full">
+        <div
+          className="border-[1px] border-darkgray text-gray_1 font-dresden 
+                    py-[25px] text-center relative h-full
+                    flex flex-col items-center justify-center gap-3"
+        >
+          <iframe
+            src="https://www.stack.so/leaderboard/leaderboard-40a3-78225-2471/embed?excludeHeader=true"
+            className="mx-auto"
+            width="704px"
+            height="400px"
+            allow="clipboard-write"
+            title="leaderboard"
+          />
+          <RecBar cctvNumber={6} />
+          <BackPortalButton />
+          <p
+            className="uppercase text-white mx-auto absolute right-2 md:right-10 bottom-10 border border-white px-3 py-1
+          text-[12px] md:text-[14px]"
+          >
+            Leaderboard
+          </p>
+        </div>
+      </div>
+    </Layout>
+  )
+}
+
+export default LeaderboardPage
diff --git a/components/LeaderboardPage/index.ts b/components/Pages/LeaderboardPage/index.ts
similarity index 100%
rename from components/LeaderboardPage/index.ts
rename to components/Pages/LeaderboardPage/index.ts
diff --git a/pages/leaderboard/index.tsx b/pages/leaderboard/index.tsx
index fa0f1e21..6e60fb59 100644
--- a/pages/leaderboard/index.tsx
+++ b/pages/leaderboard/index.tsx
@@ -1,4 +1,4 @@
-import LeaderboardPage from "../../components/LeaderboardPage"
+import LeaderboardPage from "@/components/Pages/LeaderboardPage"
 
 const Leaderboard = () => <LeaderboardPage />