diff --git a/website/src/components/LeaderBoardItem.tsx b/website/src/components/LeaderBoardItem.tsx
new file mode 100644
index 00000000..cef63ca1
--- /dev/null
+++ b/website/src/components/LeaderBoardItem.tsx
@@ -0,0 +1,18 @@
+export function RankItem({username,score}){
+
+    return(
+            <div className="flex flex-row justify-between p-6 border-2 border-slate-100 text-left font-semibold hover:bg-sky-50">
+                <div>1</div>
+                <div>@username</div>
+                <div>20.5</div>
+                <div>gold</div>
+            </div>
+            
+    )
+}
+
+
+
+
+
+
diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx
index 5c7b6acf..eca0f0a6 100644
--- a/website/src/pages/index.tsx
+++ b/website/src/pages/index.tsx
@@ -51,6 +51,7 @@ export default function Home() {
         <p>You are logged in</p>
 
         <Link href="/grading/grade-output">~Rate a prompt and output now~</Link>
+        <Link href="/leaderboard/score-leaderboard">~view the score leaderboard~</Link>
       </main>
       <Footer />
     </>
diff --git a/website/src/pages/leaderboard/score-leaderboard.tsx b/website/src/pages/leaderboard/score-leaderboard.tsx
new file mode 100644
index 00000000..6b7768e4
--- /dev/null
+++ b/website/src/pages/leaderboard/score-leaderboard.tsx
@@ -0,0 +1,70 @@
+import { RankItem } from "@/components/LeaderBoardItem";
+import { BarsArrowUpIcon,BarsArrowDownIcon } from '@heroicons/react/24/solid'
+import Image from "next/image";
+const LeaderBoard = () => {
+    return ( 
+        <div className=" p-6 h-full mx-auto bg-slate-100 text-gray-800">
+            <div className="flex flex-col">
+                <div className="rounded-lg shadow-lg h-full block bg-white">
+                        <div className="p-8">
+                            <h5 className="text-2xl font-bold">LeaderBoard</h5>
+                        </div>
+                         <div className="flex flex-row justify-between px-6 py-3 font-semibold text-md">
+                            <div className="flex flex-row items-center justify-center space-x-2">
+                                
+                                <div>
+                                <p>Rank</p>
+                                </div>
+                                <div className="mt-2  text-slate-400 hover:text-sky-400 hover:cursor-pointer">
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6 text-inherit">
+                                <path strokeLinecap="round" strokeLinejoin="round" d="M3 4.5h14.25M3 9h9.75M3 13.5h9.75m4.5-4.5v12m0 0l-3.75-3.75M17.25 21L21 17.25" />
+                                </svg>
+
+                            </div>
+                            </div>
+                             <div className="flex flex-row items-center justify-center space-x-2">
+                                
+                                <div>
+
+                                <p>User</p>
+                                </div>
+                                <div className="mt-2 text-slate-400 hover:text-sky-400 hover:cursor-pointer">
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6 text-inherit">
+                                <path strokeLinecap="round" strokeLinejoin="round" d="M3 4.5h14.25M3 9h9.75M3 13.5h9.75m4.5-4.5v12m0 0l-3.75-3.75M17.25 21L21 17.25" />
+                                </svg>
+
+                            </div>
+                            </div>
+                              <div className="flex flex-row items-center justify-center space-x-2">
+                                
+                                <div>
+                                <p>Score</p>
+                                </div>
+                                <div className="mt-2  text-slate-400 hover:text-sky-400 hover:cursor-pointer">
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6 text-inherit">
+                                <path strokeLinecap="round" strokeLinejoin="round" d="M3 4.5h14.25M3 9h9.75M3 13.5h9.75m4.5-4.5v12m0 0l-3.75-3.75M17.25 21L21 17.25" />
+                                </svg>
+
+                            </div>
+                            </div>
+                              <div className="flex flex-row items-center justify-center space-x-2">
+                                
+                                <div>
+                                <p>Medal</p>
+                                </div>
+                            </div>
+                        </div>
+                        {/* leaderboard items */}
+                        <RankItem></RankItem>
+
+
+
+                </div>
+
+            </div>
+
+        </div>
+     );
+}
+ 
+export default LeaderBoard;
\ No newline at end of file