diff --git a/.prettierrc b/.prettierrc
deleted file mode 100644
index 0967ef4..0000000
--- a/.prettierrc
+++ /dev/null
@@ -1 +0,0 @@
-{}
diff --git a/app/leaderboard/page.tsx b/app/leaderboard/page.tsx
index 2d6521b..d8a4c10 100644
--- a/app/leaderboard/page.tsx
+++ b/app/leaderboard/page.tsx
@@ -65,10 +65,10 @@ const LeaderBoard = () => {
   );
 
   return (
-    <div className="container mx-auto min-h-screen py-12 pb-24 gap-8">
-      <h1 className="text-center text-3xl font-semibold mb-6">Leaderboard</h1>
+    <div className="container mx-auto min-h-screen gap-8 py-12 pb-24">
+      <h1 className="mb-6 text-center text-3xl font-bold">Leaderboard</h1>
 
-      <Tabs defaultValue="global" className="">
+      <Tabs defaultValue="global">
         <TabsList>
           <TabsTrigger value="global">Global Rankings</TabsTrigger>
           <TabsTrigger value="level">Map based Rankings</TabsTrigger>
diff --git a/app/maps/page.tsx b/app/maps/page.tsx
index 57ff0b5..215fd4b 100644
--- a/app/maps/page.tsx
+++ b/app/maps/page.tsx
@@ -64,12 +64,12 @@ export default function AddMapPage() {
     setMap(newMap);
   };
   return (
-    <div className="container mx-auto min-h-screen py-12 pb-24 gap-8">
-      <h1 className="text-center text-3xl font-semibold mb-6">Submit Map</h1>
+    <div className="container mx-auto min-h-screen gap-8 py-12 pb-24">
+      <h1 className="mb-6 text-center text-3xl font-bold">Submit Map</h1>
 
       {isSubmitted ? (
         <div>
-          <div className="flex justify-center m-5">
+          <div className="m-5 flex justify-center">
             <Button
               className="mx-2"
               variant={isZombie ? "default" : "outline"}
@@ -85,13 +85,13 @@ export default function AddMapPage() {
               Place Rock
             </Button>
           </div>
-          <div className="justify-center m-5">
+          <div className="m-5 justify-center">
             {map.map((row, y) => (
               <div key={y} className="flex justify-center">
                 {row.map((cell, x) => (
                   <div
                     key={x}
-                    className={`size-8 border flex items-center justify-center text-2xl p-5`}
+                    className={`flex size-8 items-center justify-center border p-5 text-2xl`}
                   >
                     <Button
                       className="m-5"
@@ -126,13 +126,13 @@ export default function AddMapPage() {
               setWidth(+e.target.value);
             }}
           />
-          <div className="justify-center m-5">
+          <div className="m-5 justify-center">
             {map.map((row, y) => (
               <div key={y} className="flex justify-center">
                 {row.map((cell, x) => (
                   <div
                     key={x}
-                    className={`size-8 border flex items-center justify-center text-2xl`}
+                    className={`flex size-8 items-center justify-center border text-2xl`}
                   >
                     {cell}
                   </div>
@@ -142,7 +142,7 @@ export default function AddMapPage() {
           </div>
         </div>
       )}
-      <div className="flex justify-center m-5">
+      <div className="m-5 flex justify-center">
         {isSubmitted ? (
           <div>
             <Button className="mx-2" type="submit" onClick={checkValidMap}>
diff --git a/app/maps/review/page.tsx b/app/maps/review/page.tsx
index 5192350..02af57e 100644
--- a/app/maps/review/page.tsx
+++ b/app/maps/review/page.tsx
@@ -19,9 +19,9 @@ const Page = () => {
 
   if (isAdmin == true) {
     return (
-      <div className="py-6">
-        <h1 className="text-center font-semibold mb-4">Review Maps</h1>
-        <div className="flex items-center justify-around">
+      <div className="container mx-auto min-h-screen gap-8 py-12 pb-24">
+        <h1 className="mb-6 text-center text-3xl font-bold">Review Maps</h1>
+        <div className="flex flex-col items-center justify-around gap-4">
           {maps?.map((map) => (
             <Card key={map._id}>
               <CardHeader>
diff --git a/app/play/[level]/page.tsx b/app/play/[level]/page.tsx
index 2078ce4..f9a0420 100644
--- a/app/play/[level]/page.tsx
+++ b/app/play/[level]/page.tsx
@@ -49,9 +49,9 @@ export default function PlayLevelPage({
 
   if (!map) {
     return (
-      <div className="container mx-auto min-h-screen flex flex-col items-center py-12 pb-24 gap-8">
-        <div className="w-full flex justify-between items-center">
-          <Button variant="outline" asChild className="flex gap-2 items-center">
+      <div className="container mx-auto flex min-h-screen flex-col items-center gap-8 py-12 pb-24">
+        <div className="flex w-full items-center justify-between">
+          <Button variant="outline" asChild className="flex items-center gap-2">
             <Link href="/play" passHref>
               <ChevronLeftIcon /> Play Different Night
             </Link>
@@ -68,7 +68,7 @@ export default function PlayLevelPage({
             </Tabs>
           )}
         </div>
-        <h1 className="text-3xl font-bold text-center">Night #{level}</h1>
+        <h1 className="mb-6 text-center text-3xl font-bold">Night #{level}</h1>
 
         <p>Loading...</p>
       </div>
@@ -153,9 +153,9 @@ export default function PlayLevelPage({
   };
 
   return (
-    <div className="container mx-auto min-h-screen flex flex-col items-center py-12 pb-24 gap-8">
-      <div className="w-full flex justify-between items-center">
-        <Button variant="outline" asChild className="flex gap-2 items-center">
+    <div className="container mx-auto flex min-h-screen flex-col items-center gap-8 py-12 pb-24">
+      <div className="flex w-full items-center justify-between">
+        <Button variant="outline" asChild className="flex items-center gap-2">
           <Link href="/play" passHref>
             <ChevronLeftIcon /> Play Different Night
           </Link>
@@ -172,7 +172,7 @@ export default function PlayLevelPage({
           </Tabs>
         )}
       </div>
-      <h1 className="text-3xl font-bold text-center">Night #{level}</h1>
+      <h1 className="text-center text-3xl font-bold">Night #{level}</h1>
 
       {mode === "play" ? (
         <>
@@ -193,7 +193,7 @@ export default function PlayLevelPage({
             </Button>
           </div>
           <div className="mb-8 flex flex-col items-center">
-            <h2 className="text-xl font-semibold mb-4">
+            <h2 className="mb-4 text-xl font-semibold">
               {isSimulating ? "Simulation Result" : "Place Your Player"}
             </h2>
             {isSimulating ? (
@@ -226,10 +226,7 @@ export default function PlayLevelPage({
                     row.map((cell, x) => (
                       <div
                         key={`${x}-${y}`}
-                        className={`
-                          ${cell === " " || cell === "B" ? "cursor-pointer hover:border-2 z-10 hover:border-dashed hover:border-slate-300" : ""}
-                          border border-transparent
-                        `}
+                        className={` ${cell === " " || cell === "B" ? "z-10 cursor-pointer hover:border-2 hover:border-dashed hover:border-slate-300" : ""} border border-transparent`}
                         onClick={() => handleCellClick(x, y)}
                       />
                     )),
@@ -280,12 +277,12 @@ export default function PlayLevelPage({
           <Authenticated>
             {tries && tries.attempts && tries.attempts.length > 0 && (
               <>
-                <div className="font-semibold text-2xl mt-4">Tries</div>
-                <div className="flex flex-wrap items-center justify-around w-full">
+                <div className="mt-4 text-2xl font-semibold">Tries</div>
+                <div className="flex w-full flex-wrap items-center justify-around">
                   {tries.attempts.map((attempt) => (
                     <div
                       key={attempt?._id}
-                      className="flex flex-col gap-y-2 items-center"
+                      className="flex flex-col items-center gap-y-2"
                     >
                       {attempt?.grid && <Map map={attempt.grid} />}
                       <div
diff --git a/app/play/page.tsx b/app/play/page.tsx
index cd020a4..0e52bf3 100644
--- a/app/play/page.tsx
+++ b/app/play/page.tsx
@@ -69,8 +69,8 @@ export default function PlayPage() {
 
   if (!filteredMaps) {
     return (
-      <div className="container mx-auto min-h-screen py-12 pb-24 gap-8">
-        <h1 className="text-3xl font-bold mb-6 text-center">Choose a Night</h1>
+      <div className="container mx-auto min-h-screen gap-8 py-12 pb-24">
+        <h1 className="mb-6 text-center text-3xl font-bold">Choose a Night</h1>
 
         <Authenticated>
           <ToggleGroup
@@ -87,7 +87,7 @@ export default function PlayPage() {
           </ToggleGroup>
         </Authenticated>
 
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+        <div className="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
           {Array.from({ length: 6 }).map((_, index) => (
             <Skeleton key={index} className="h-96" />
           ))}
@@ -97,8 +97,8 @@ export default function PlayPage() {
   }
 
   return (
-    <div className="container mx-auto min-h-screen py-12 pb-24 gap-8">
-      <h1 className="text-3xl font-bold mb-6 text-center">Choose a Night</h1>
+    <div className="container mx-auto min-h-screen gap-8 py-12 pb-24">
+      <h1 className="mb-6 text-center text-3xl font-bold">Choose a Night</h1>
 
       <Authenticated>
         <ToggleGroup
@@ -115,12 +115,12 @@ export default function PlayPage() {
         </ToggleGroup>
       </Authenticated>
 
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+      <div className="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
         {filteredMaps.map((map) => (
           <Card
             key={map._id}
             className={cn(
-              "flex flex-col h-full relative",
+              "relative flex h-full flex-col",
               resMap.get(map._id)
                 ? "border-green-500"
                 : resMap.has(map._id)
@@ -129,11 +129,11 @@ export default function PlayPage() {
             )}
           >
             <CardHeader>
-              <CardTitle className="text-xl font-semibold text-center">
+              <CardTitle className="text-center text-xl font-semibold">
                 Night #{map.level}
               </CardTitle>
             </CardHeader>
-            <CardContent className="flex-grow flex items-center justify-center">
+            <CardContent className="flex flex-grow items-center justify-center">
               <GameMap map={map.grid} size={52} />
             </CardContent>
             <CardFooter className="flex justify-around px-3">
diff --git a/app/playground/page.tsx b/app/playground/page.tsx
index 8cdabdb..6e1efca 100644
--- a/app/playground/page.tsx
+++ b/app/playground/page.tsx
@@ -157,11 +157,11 @@ export default function PlaygroundPage() {
   const visualizing = solution !== null || visualizingUserSolution;
 
   return (
-    <div className="container mx-auto min-h-screen flex flex-col items-center py-12 gap-8">
-      <h1 className="text-4xl font-bold">Playground</h1>
+    <div className="container mx-auto min-h-screen gap-8 py-12 pb-24">
+      <h1 className="mb-6 text-center text-3xl font-bold">Playground</h1>
 
       <div className="flex w-full gap-8">
-        <div className="flex flex-col gap-2 grow w-full">
+        <div className="flex w-full grow flex-col gap-2">
           <div className="flex justify-between">
             <div className="flex flex-col gap-0">
               <div className="flex gap-2">
@@ -171,7 +171,7 @@ export default function PlaygroundPage() {
                 </p>
                 <CopyMapButton map={map} />
                 <button
-                  className="hover:scale-125 transition"
+                  className="transition hover:scale-125"
                   onClick={handleReset}
                 >
                   <EraserIcon size={16} />
@@ -213,8 +213,8 @@ export default function PlaygroundPage() {
             )}
           </div>
         </div>
-        <div className="flex flex-col gap-4 shrink-0 w-[400px]">
-          <div className="flex flex-col gap-2 w-fit">
+        <div className="flex w-[400px] shrink-0 flex-col gap-4">
+          <div className="flex w-fit flex-col gap-2">
             {isAdmin && (
               <>
                 <p>Model (~$0.002)</p>
diff --git a/package.json b/package.json
index 64ff3ef..91eebdc 100644
--- a/package.json
+++ b/package.json
@@ -2,6 +2,7 @@
   "name": "survive-the-night-sim",
   "version": "0.1.0",
   "private": true,
+  "type": "module",
   "scripts": {
     "dev": "npm-run-all dev:init --parallel dev:frontend dev:backend",
     "dev:frontend": "next dev",
@@ -53,6 +54,7 @@
     "npm-run-all": "^4.1.5",
     "postcss": "^8",
     "prettier": "3.3.2",
+    "prettier-plugin-tailwindcss": "^0.6.8",
     "tailwindcss": "^3.4.1",
     "typescript": "^5",
     "vitest": "^2.1.3"
diff --git a/prettier.config.js b/prettier.config.js
new file mode 100644
index 0000000..b2d59b4
--- /dev/null
+++ b/prettier.config.js
@@ -0,0 +1,6 @@
+/** @type {import('prettier').Config & import('prettier-plugin-tailwindcss').PluginOptions} */
+const config = {
+  plugins: ["prettier-plugin-tailwindcss"],
+};
+
+export default config;