diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..86a9642
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,13 @@
+{
+  "importOrder": [
+    "^react$",
+    "<THIRD_PARTY_MODULES>",
+    "^(@|.)/(.*)(?<!.s?css)$",
+    ".s?css$"
+  ],
+  "importOrderSortSpecifiers": true,
+  "plugins": [
+    "@trivago/prettier-plugin-sort-imports",
+    "prettier-plugin-tailwindcss"
+  ]
+}
diff --git a/app/games/[gameId]/page.tsx b/app/games/[gameId]/page.tsx
index 5045d85..269b97a 100644
--- a/app/games/[gameId]/page.tsx
+++ b/app/games/[gameId]/page.tsx
@@ -1,9 +1,9 @@
 "use client";
 
-import { api } from "@/convex/_generated/api";
-import { Id } from "@/convex/_generated/dataModel";
 import { useQuery } from "convex/react";
 import { Result } from "./result";
+import { api } from "@/convex/_generated/api";
+import { Id } from "@/convex/_generated/dataModel";
 
 export default function GamePage({ params }: { params: { gameId: string } }) {
   const game = useQuery(api.games.getGame, {
@@ -14,14 +14,14 @@ export default function GamePage({ params }: { params: { gameId: string } }) {
   });
 
   return (
-    <div className="container mx-auto max-w-5xl min-h-screen flex flex-col items-center py-12 pb-24 gap-8">
+    <div className="container mx-auto flex min-h-screen max-w-5xl flex-col items-center gap-8 py-12 pb-24">
       <h1>Game {params.gameId}</h1>
       <h2>Model: {game?.modelId}</h2>
 
       <div className="flex flex-col gap-12">
         {results === undefined || results.length === 0 ? (
-          <div className="flex flex-col justify-center items-center gap-8">
-            <div className="animate-spin rounded-full h-16 w-16 border-b-2 border-gray-900"></div>
+          <div className="flex flex-col items-center justify-center gap-8">
+            <div className="h-16 w-16 animate-spin rounded-full border-b-2 border-gray-900"></div>
             <p className="ml-4">Game starting...</p>
           </div>
         ) : (
diff --git a/app/games/[gameId]/result.tsx b/app/games/[gameId]/result.tsx
index 9e70015..db7478e 100644
--- a/app/games/[gameId]/result.tsx
+++ b/app/games/[gameId]/result.tsx
@@ -1,11 +1,11 @@
 "use client";
 
-import { Doc } from "@/convex/_generated/dataModel";
-import { api } from "@/convex/_generated/api";
 import { useQuery } from "convex/react";
+import Link from "next/link";
 import { MapStatus } from "@/components/MapStatus";
 import { Visualizer } from "@/components/Visualizer";
-import Link from "next/link";
+import { api } from "@/convex/_generated/api";
+import { Doc } from "@/convex/_generated/dataModel";
 
 export const Result = ({ result }: { result: Doc<"results"> }) => {
   const map = useQuery(api.maps.getMapByLevel, {
@@ -24,13 +24,13 @@ export const Result = ({ result }: { result: Doc<"results"> }) => {
     <div className="flex items-center gap-8">
       <Link
         href={`/play/${map.level}`}
-        className="whitespace-nowrap hover:underline cursor-pointer"
+        className="cursor-pointer whitespace-nowrap hover:underline"
       >
         Level {map.level}
       </Link>
 
       {result.status === "failed" ? (
-        <div className="text-red-500 w-[200px] flex-shrink-0">
+        <div className="w-[200px] flex-shrink-0 text-red-500">
           {result.error}
         </div>
       ) : (
diff --git a/app/header.tsx b/app/header.tsx
index 9df5b7c..62516af 100644
--- a/app/header.tsx
+++ b/app/header.tsx
@@ -1,11 +1,11 @@
 "use client";
 
+import { useAuthActions } from "@convex-dev/auth/react";
 import { GitHubLogoIcon } from "@radix-ui/react-icons";
+import { useConvexAuth, useQuery } from "convex/react";
+import dynamic from "next/dynamic";
 import Image from "next/image";
 import Link from "next/link";
-import dynamic from "next/dynamic";
-import { useAuthActions } from "@convex-dev/auth/react";
-import { useConvexAuth, useQuery } from "convex/react";
 import { Button } from "@/components/ui/button";
 import { api } from "@/convex/_generated/api";
 
@@ -36,7 +36,7 @@ export default function Header() {
   const isAdminQuery = useQuery(api.users.isAdmin);
 
   return (
-    <header className="flex justify-between items-center py-4 px-6 shadow-sm border-b">
+    <header className="flex items-center justify-between border-b px-6 py-4 shadow-sm">
       <Link href="/" className="flex items-center">
         <Image src="/logo.png" alt="Logo" width={32} height={32} />
         <span className="ml-2 text-xl font-bold">SurviveTheNight</span>
@@ -89,12 +89,12 @@ export default function Header() {
           <ThemeToggle />
         </div>
         <Button
-          className="shrink-0 w-9"
+          className="w-9 shrink-0"
           variant="outline"
           size="icon"
           type="button"
         >
-          <GitHubLogoIcon className="w-4 h-4" />
+          <GitHubLogoIcon className="h-4 w-4" />
         </Button>
         {!isAuthenticated ? (
           <SignInWithGitHub />
diff --git a/app/layout.tsx b/app/layout.tsx
index bddcd60..0faf2f2 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,9 +1,9 @@
-import type { Metadata } from "next";
-import { Inter } from "next/font/google";
-import "./globals.css";
 import { ConvexAuthNextjsServerProvider } from "@convex-dev/auth/nextjs/server";
+import { type Metadata } from "next";
+import { Inter } from "next/font/google";
 import Header from "./header";
 import { Providers } from "./provider";
+import "./globals.css";
 
 const inter = Inter({ subsets: ["latin"] });
 
diff --git a/app/leaderboard/page.tsx b/app/leaderboard/page.tsx
index d8a4c10..02daa17 100644
--- a/app/leaderboard/page.tsx
+++ b/app/leaderboard/page.tsx
@@ -1,8 +1,6 @@
 "use client";
 
-import { api } from "@/convex/_generated/api";
 import { useQuery } from "convex/react";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import {
   Table,
   TableBody,
@@ -12,6 +10,8 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { api } from "@/convex/_generated/api";
 
 // Define the types for the data
 interface Ranking {
diff --git a/app/maps/page.tsx b/app/maps/page.tsx
index 215fd4b..442c6ff 100644
--- a/app/maps/page.tsx
+++ b/app/maps/page.tsx
@@ -1,9 +1,9 @@
 "use client";
 
-import { Input } from "@/components/ui/input";
-import React, { useEffect, useState } from "react";
-import { Button } from "@/components/ui/button";
+import { useEffect, useState } from "react";
 import { useMutation } from "convex/react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
 import { api } from "@/convex/_generated/api";
 
 export default function AddMapPage() {
diff --git a/app/maps/review/page.tsx b/app/maps/review/page.tsx
index 02af57e..2071686 100644
--- a/app/maps/review/page.tsx
+++ b/app/maps/review/page.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { useMutation, useQuery } from "convex/react";
 import { Map } from "@/components/Map";
 import { Button } from "@/components/ui/button";
 import {
@@ -10,7 +11,6 @@ import {
   CardTitle,
 } from "@/components/ui/card";
 import { api } from "@/convex/_generated/api";
-import { useMutation, useQuery } from "convex/react";
 
 const Page = () => {
   const isAdmin = useQuery(api.users.isAdmin);
diff --git a/app/page.tsx b/app/page.tsx
index 9d0a7ef..2335124 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,18 +1,18 @@
 "use client";
 
 import { useQuery } from "convex/react";
-import { api } from "@/convex/_generated/api";
+import Link from "next/link";
+import Result from "./result";
+import { Button } from "@/components/ui/button";
 import {
   Table,
   TableBody,
   TableCell,
   TableHead,
+  TableHeader,
   TableRow,
 } from "@/components/ui/table";
-import { TableHeader } from "@/components/ui/table";
-import Link from "next/link";
-import { Button } from "@/components/ui/button";
-import Result from "./result";
+import { api } from "@/convex/_generated/api";
 
 export default function GamePage() {
   const results = useQuery(api.results.getLastCompletedResults);
@@ -20,7 +20,7 @@ export default function GamePage() {
 
   if (results === undefined) {
     return (
-      <div className="min-h-screen container mx-auto pt-12 pb-24 space-y-8">
+      <div className="container mx-auto min-h-screen space-y-8 pb-24 pt-12">
         <h1 className="text-2xl font-bold">Recent Games</h1>
         <p>Loading...</p>
       </div>
@@ -29,7 +29,7 @@ export default function GamePage() {
 
   if (results.length === 0) {
     return (
-      <div className="min-h-screen container mx-auto pt-12 pb-24 space-y-8">
+      <div className="container mx-auto min-h-screen space-y-8 pb-24 pt-12">
         <h1 className="text-2xl font-bold">Recent Games</h1>
         <p>No results yet</p>
       </div>
@@ -37,10 +37,10 @@ export default function GamePage() {
   }
 
   return (
-    <div className="container mx-auto pt-12 flex gap-12">
-      <div className="space-y-8 flex-grow">
+    <div className="container mx-auto flex gap-12 pt-12">
+      <div className="flex-grow space-y-8">
         <h1 className="text-2xl font-bold">Recent Games</h1>
-        <div className="h-[calc(100vh_-_185px)] overflow-y-auto flex flex-col gap-4">
+        <div className="flex h-[calc(100vh_-_185px)] flex-col gap-4 overflow-y-auto">
           {results.map((result) => (
             <Result key={result._id} result={result} />
           ))}
@@ -48,7 +48,7 @@ export default function GamePage() {
       </div>
 
       <div className="space-y-8">
-        <div className="flex justify-between items-center">
+        <div className="flex items-center justify-between">
           <h2 className="text-2xl font-bold">LLM Leaderboard</h2>
           <Button asChild>
             <Link href="/leaderboard">View Full Leaderboard</Link>
diff --git a/app/play/[level]/page.tsx b/app/play/[level]/page.tsx
index f9a0420..cdc2d82 100644
--- a/app/play/[level]/page.tsx
+++ b/app/play/[level]/page.tsx
@@ -1,16 +1,16 @@
 "use client";
 
 import { useEffect, useState } from "react";
-import { useMutation, useQuery, Authenticated } from "convex/react";
-import { api } from "@/convex/_generated/api";
-import { Button } from "@/components/ui/button";
-import { Visualizer } from "@/components/Visualizer";
-import { Map } from "@/components/Map";
-import Link from "next/link";
 import { ChevronLeftIcon } from "@radix-ui/react-icons";
-import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import TestMode from "./test-mode";
+import { Authenticated, useMutation, useQuery } from "convex/react";
+import Link from "next/link";
 import { useRouter } from "next/navigation";
+import TestMode from "./test-mode";
+import { Map } from "@/components/Map";
+import { Visualizer } from "@/components/Visualizer";
+import { Button } from "@/components/ui/button";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { api } from "@/convex/_generated/api";
 import { ZombieSurvival } from "@/simulators/zombie-survival";
 
 export default function PlayLevelPage({
diff --git a/app/play/[level]/test-mode.tsx b/app/play/[level]/test-mode.tsx
index 3686354..d86ac59 100644
--- a/app/play/[level]/test-mode.tsx
+++ b/app/play/[level]/test-mode.tsx
@@ -1,10 +1,9 @@
 import { useState } from "react";
+import { ReloadIcon } from "@radix-ui/react-icons";
 import { useAction } from "convex/react";
-import { api } from "@/convex/_generated/api";
-import { Button } from "@/components/ui/button";
-import { Visualizer } from "@/components/Visualizer";
 import { Map } from "@/components/Map";
-import { ReloadIcon } from "@radix-ui/react-icons";
+import { Visualizer } from "@/components/Visualizer";
+import { Button } from "@/components/ui/button";
 import {
   Select,
   SelectContent,
@@ -12,6 +11,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
+import { api } from "@/convex/_generated/api";
 import { AI_MODELS } from "@/convex/constants";
 import { errorMessage } from "@/lib/utils";
 
@@ -67,13 +67,13 @@ export default function TestMode({ level, map }: TestModeProps) {
   };
 
   return (
-    <div className="flex flex-col items-center gap-4 w-full">
+    <div className="flex w-full flex-col items-center gap-4">
       {showOriginalMap && (
         <div className="mb-8">
           <Map map={map} />
         </div>
       )}
-      <div className="flex gap-4 mb-4">
+      <div className="mb-4 flex gap-4">
         <Select value={selectedModel} onValueChange={setSelectedModel}>
           <SelectTrigger className="w-[180px]">
             <SelectValue placeholder="Select AI model" />
@@ -102,11 +102,11 @@ export default function TestMode({ level, map }: TestModeProps) {
           </Button>
         )}
       </div>
-      {aiError && <div className="text-red-500 mt-4">{aiError}</div>}
+      {aiError && <div className="mt-4 text-red-500">{aiError}</div>}
       {gameResult && (
-        <div className="mt-4 flex flex-col items-center gap-8 max-w-4xl mx-auto">
+        <div className="mx-auto mt-4 flex max-w-4xl flex-col items-center gap-8">
           <Visualizer map={playerMap} autoStart={true} onReset={handleReset} />
-          <div className="flex flex-col gap-4 flex-1">
+          <div className="flex flex-1 flex-col gap-4">
             <div
               className={`text-2xl font-bold ${
                 gameResult === "WON" ? "text-green-500" : "text-red-500"
@@ -116,7 +116,7 @@ export default function TestMode({ level, map }: TestModeProps) {
             </div>
             {aiReasoning && (
               <div className="p-4">
-                <h3 className="font-semibold mb-2">AI Reasoning:</h3>
+                <h3 className="mb-2 font-semibold">AI Reasoning:</h3>
                 <p>{aiReasoning}</p>
               </div>
             )}
diff --git a/app/play/page.tsx b/app/play/page.tsx
index 0e52bf3..332da1e 100644
--- a/app/play/page.tsx
+++ b/app/play/page.tsx
@@ -1,10 +1,10 @@
 "use client";
 
+import { useEffect, useState } from "react";
 import { Authenticated, Unauthenticated, useQuery } from "convex/react";
-import { api } from "@/convex/_generated/api";
+import Link from "next/link";
 import { Map as GameMap } from "@/components/Map";
 import { Button } from "@/components/ui/button";
-import Link from "next/link";
 import {
   Card,
   CardContent,
@@ -12,11 +12,10 @@ import {
   CardHeader,
   CardTitle,
 } from "@/components/ui/card";
-import { useEffect, useState } from "react";
 import { Skeleton } from "@/components/ui/skeleton";
 import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
+import { api } from "@/convex/_generated/api";
 import { cn } from "@/lib/utils";
-import { StarFilledIcon } from "@radix-ui/react-icons";
 
 export default function PlayPage() {
   const maps = useQuery(api.maps.getMaps, {});
diff --git a/app/playground/page.tsx b/app/playground/page.tsx
index 6e1efca..6f57ad7 100644
--- a/app/playground/page.tsx
+++ b/app/playground/page.tsx
@@ -1,18 +1,18 @@
 "use client";
 
-import React from "react";
-import { CircleAlertIcon, EraserIcon } from "lucide-react";
+import * as React from "react";
 import { useAction, useMutation, useQuery } from "convex/react";
-import { Button } from "@/components/ui/button";
+import { CircleAlertIcon, EraserIcon } from "lucide-react";
 import { CopyMapButton } from "@/components/CopyMapButton";
 import { MapBuilder } from "@/components/MapBuilder";
 import { MapStatus } from "@/components/MapStatus";
 import { ModelSelector } from "@/components/ModelSelector";
 import { Visualizer } from "@/components/Visualizer";
-import { ZombieSurvival } from "@/simulators/zombie-survival";
+import { Button } from "@/components/ui/button";
+import { useToast } from "@/components/ui/use-toast";
 import { api } from "@/convex/_generated/api";
 import { errorMessage } from "@/lib/utils";
-import { useToast } from "@/components/ui/use-toast";
+import { ZombieSurvival } from "@/simulators/zombie-survival";
 
 const STORAGE_MAP_KEY = "playground-map";
 
diff --git a/app/prompts/[promptId]/page.tsx b/app/prompts/[promptId]/page.tsx
index 1764719..daf0f94 100644
--- a/app/prompts/[promptId]/page.tsx
+++ b/app/prompts/[promptId]/page.tsx
@@ -1,12 +1,12 @@
 "use client";
 
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { api } from "@/convex/_generated/api";
+import { useEffect, useState } from "react";
 import { useMutation, useQuery } from "convex/react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
-import { useEffect, useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { api } from "@/convex/_generated/api";
 
 export default function editPromtPage({
   params,
@@ -54,10 +54,10 @@ export default function editPromtPage({
   }
 
   return (
-    <div className="container mx-auto min-h-screen pb-24 py-12 gap-8">
-      <form className="py-6 px-6 h-full" onSubmit={handleSubmit}>
-        <div className="flex justify-between mb-4">
-          <h1 className="font-semibold mb-4">Edit your prompt</h1>
+    <div className="container mx-auto min-h-screen gap-8 py-12 pb-24">
+      <form className="h-full px-6 py-6" onSubmit={handleSubmit}>
+        <div className="mb-4 flex justify-between">
+          <h1 className="mb-4 font-semibold">Edit your prompt</h1>
           <div className="flex space-x-4">
             <Button variant="default">Save</Button>
             <Link href="/prompts">
@@ -65,7 +65,7 @@ export default function editPromtPage({
             </Link>
           </div>
         </div>
-        <div className="flex flex-col items-start space-y-4 min-h-screen h-screen">
+        <div className="flex h-screen min-h-screen flex-col items-start space-y-4">
           <Input
             placeholder="Prompt Name"
             value={promptName}
@@ -73,7 +73,7 @@ export default function editPromtPage({
           />
           <textarea
             placeholder="Prompt"
-            className=" h-full w-full rounded-md border border-input bg-transparent px-3 py-1"
+            className="h-full w-full rounded-md border border-input bg-transparent px-3 py-1"
             value={promptText}
             onChange={handlePromptTextChange}
           />
diff --git a/app/prompts/page.tsx b/app/prompts/page.tsx
index 2b011c5..91b4dc3 100644
--- a/app/prompts/page.tsx
+++ b/app/prompts/page.tsx
@@ -1,5 +1,8 @@
 "use client";
 
+import { useMutation, useQuery } from "convex/react";
+import Link from "next/link";
+import { redirect, useRouter } from "next/navigation";
 import { Button } from "@/components/ui/button";
 import {
   Table,
@@ -10,9 +13,6 @@ import {
   TableRow,
 } from "@/components/ui/table";
 import { api } from "@/convex/_generated/api";
-import { useMutation, useQuery } from "convex/react";
-import Link from "next/link";
-import { useRouter, redirect } from "next/navigation";
 
 const Page = () => {
   const prompts = useQuery(api.prompts.getAllPrompts);
@@ -37,9 +37,9 @@ const Page = () => {
   }
 
   return (
-    <div className="container mx-auto min-h-screen py-12 pb-24 gap-8">
-      <div className="flex justify-between mb-4">
-        <h1 className="font-semibold mb-4">Review Prompts</h1>
+    <div className="container mx-auto min-h-screen gap-8 py-12 pb-24">
+      <div className="mb-4 flex justify-between">
+        <h1 className="mb-4 font-semibold">Review Prompts</h1>
         <Button variant="default" onClick={handleCreatePrompt}>
           Create Prompt
         </Button>
@@ -60,7 +60,7 @@ const Page = () => {
                 <TableCell>{row.promptName}</TableCell>
                 <TableCell>{row._id}</TableCell>
                 <TableCell>{row.isActive ? "Yes" : "No"}</TableCell>
-                <TableCell className="space-x-4 flex">
+                <TableCell className="flex space-x-4">
                   <Button
                     variant="default"
                     onClick={async () => {
diff --git a/app/provider.tsx b/app/provider.tsx
index 3d19e55..ee09093 100644
--- a/app/provider.tsx
+++ b/app/provider.tsx
@@ -2,8 +2,8 @@
 
 import { ConvexAuthNextjsProvider } from "@convex-dev/auth/nextjs";
 import { ConvexReactClient } from "convex/react";
-import { ThemeProvider } from "next-themes";
 import PlausibleProvider from "next-plausible";
+import { ThemeProvider } from "next-themes";
 import { Toaster } from "@/components/ui/toaster";
 
 const convex = new ConvexReactClient(process.env.NEXT_PUBLIC_CONVEX_URL!);
diff --git a/app/result.tsx b/app/result.tsx
index 714f1f4..a77c608 100644
--- a/app/result.tsx
+++ b/app/result.tsx
@@ -1,15 +1,15 @@
 "use client";
 
-import { MapStatus } from "@/components/MapStatus";
-import { type ResultWithGame } from "@/convex/results";
-import { Visualizer } from "@/components/Visualizer";
 import { format } from "date-fns";
 import Link from "next/link";
+import { MapStatus } from "@/components/MapStatus";
+import { Visualizer } from "@/components/Visualizer";
 import { Card } from "@/components/ui/card";
+import { type ResultWithGame } from "@/convex/results";
 
 export default function Result({ result }: { result: ResultWithGame }) {
   return (
-    <Card className="flex border rounded-xl p-4 gap-8">
+    <Card className="flex gap-8 rounded-xl border p-4">
       {result.status === "completed" && (
         <Visualizer
           cellSize="32"
@@ -20,29 +20,29 @@ export default function Result({ result }: { result: ResultWithGame }) {
         />
       )}
       {result.status === "failed" && (
-        <div className="text-red-500 max-w-[200px]">
+        <div className="max-w-[200px] text-red-500">
           Game failed: {result.error}
         </div>
       )}
       {result.status === "inProgress" && (
         <div className="flex items-center">
           <p className="mr-2">Game is playing...</p>
-          <div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-gray-300"></div>
+          <div className="h-8 w-8 animate-spin rounded-full border-b-2 border-t-2 border-gray-300"></div>
         </div>
       )}
 
       {result.game !== null && (
         <div className="flex flex-col gap-2">
-          <div className="flex flex-col gap-2 h-full justify-center">
+          <div className="flex h-full flex-col justify-center gap-2">
             <Link
               href={`/play/${result.level}`}
-              className="whitespace-nowrap hover:underline cursor-pointer text-xl"
+              className="cursor-pointer whitespace-nowrap text-xl hover:underline"
             >
               Night #{result.level}
             </Link>{" "}
             <Link
               href={`/games/${result.game._id}`}
-              className="whitespace-nowrap hover:underline cursor-pointer"
+              className="cursor-pointer whitespace-nowrap hover:underline"
             >
               Game {result.game._id.substring(0, 8)}...
             </Link>
diff --git a/app/test/page.tsx b/app/test/page.tsx
index 681f3a8..aa8c50e 100644
--- a/app/test/page.tsx
+++ b/app/test/page.tsx
@@ -1,10 +1,10 @@
 "use client";
 
-import React from "react";
+import * as React from "react";
 import { useMutation } from "convex/react";
 import { useRouter } from "next/navigation";
-import { Button } from "@/components/ui/button";
 import { ModelSelector } from "@/components/ModelSelector";
+import { Button } from "@/components/ui/button";
 import { api } from "@/convex/_generated/api";
 
 export default function TestPage() {
@@ -21,8 +21,8 @@ export default function TestPage() {
   };
 
   return (
-    <div className="container mx-auto min-h-screen flex flex-col items-center pt-12 gap-8">
-      <h1 className="text-4xl font-bold mb-8">Zombie Map Simulator</h1>
+    <div className="container mx-auto flex min-h-screen flex-col items-center gap-8 pt-12">
+      <h1 className="mb-8 text-4xl font-bold">Zombie Map Simulator</h1>
 
       <div className="flex justify-center gap-4">
         <ModelSelector onChange={setModel} value={model} />
diff --git a/components/ConvexClientProvider.tsx b/components/ConvexClientProvider.tsx
index 134eb4c..b04d39f 100644
--- a/components/ConvexClientProvider.tsx
+++ b/components/ConvexClientProvider.tsx
@@ -1,8 +1,8 @@
 "use client";
 
+import { ReactNode } from "react";
 import { ConvexAuthNextjsProvider } from "@convex-dev/auth/nextjs";
 import { ConvexReactClient } from "convex/react";
-import { ReactNode } from "react";
 
 const convex = new ConvexReactClient(process.env.NEXT_PUBLIC_CONVEX_URL!, {
   verbose: true,
diff --git a/components/CopyMapButton.tsx b/components/CopyMapButton.tsx
index fc44c40..2062333 100644
--- a/components/CopyMapButton.tsx
+++ b/components/CopyMapButton.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import React from "react";
+import * as React from "react";
 import { ClipboardCopyIcon, SmileIcon } from "lucide-react";
 
 export function CopyMapButton({ map }: { map: string[][] }) {
@@ -30,7 +30,7 @@ export function CopyMapButton({ map }: { map: string[][] }) {
       className={
         copied
           ? "cursor-default"
-          : "enabled:hover:scale-125 transition disabled:opacity-50"
+          : "transition enabled:hover:scale-125 disabled:opacity-50"
       }
       onClick={copied ? undefined : handleClick}
       type="button"
diff --git a/components/Map.tsx b/components/Map.tsx
index 5bba138..6c385af 100644
--- a/components/Map.tsx
+++ b/components/Map.tsx
@@ -6,7 +6,7 @@ export function getCellImage(cell: string) {
       <img
         src="/entities/zombie_alive_1.svg"
         alt="Zombie"
-        className="w-full h-full"
+        className="h-full w-full"
         style={{
           width: "100%",
           height: "100%",
@@ -22,7 +22,7 @@ export function getCellImage(cell: string) {
       <img
         src="/entities/player_alive_1.svg"
         alt="Player"
-        className="w-full h-full"
+        className="h-full w-full"
         style={{
           position: "relative",
           top: "-20px",
@@ -33,7 +33,7 @@ export function getCellImage(cell: string) {
   }
   if (cell === "R") {
     return (
-      <img src="/entities/rocks.svg" alt="Block" className="w-full h-full" />
+      <img src="/entities/rocks.svg" alt="Block" className="h-full w-full" />
     );
   }
   if (cell === "B") {
@@ -41,7 +41,7 @@ export function getCellImage(cell: string) {
       <img
         src="/entities/block.svg"
         alt="Block"
-        className="w-full h-full"
+        className="h-full w-full"
         style={{
           position: "relative",
           top: "0px",
@@ -59,9 +59,9 @@ export function Map({ map, size = 64 }: { map: string[][]; size?: number }) {
       <img
         src="/map.png"
         alt="Background Map"
-        className="absolute inset-0 w-full h-full object-cover opacity-50"
+        className="absolute inset-0 h-full w-full object-cover opacity-50"
       />
-      <div className="relative z-10 test">
+      <div className="test relative z-10">
         {map.map((row, y) => (
           <div key={y} className="flex">
             {row.map((cell, x) => (
@@ -71,7 +71,7 @@ export function Map({ map, size = 64 }: { map: string[][]; size?: number }) {
                   width: `${size}px`,
                   height: `${size}px`,
                 }}
-                className={`border dark:border-gray-300 border-gray-700 flex items-center justify-center text-2xl bg-transparent`}
+                className={`flex items-center justify-center border border-gray-700 bg-transparent text-2xl dark:border-gray-300`}
               >
                 {getCellImage(cell)}
               </div>
diff --git a/components/MapBuilder.tsx b/components/MapBuilder.tsx
index 6c50471..0df2351 100644
--- a/components/MapBuilder.tsx
+++ b/components/MapBuilder.tsx
@@ -1,12 +1,12 @@
-import React from "react";
+import * as React from "react";
 import {
   ChevronDownIcon,
   ChevronLeftIcon,
   ChevronRightIcon,
   ChevronUpIcon,
 } from "lucide-react";
-import { ZombieSurvival } from "@/simulators/zombie-survival";
 import { cn } from "@/lib/utils";
+import { ZombieSurvival } from "@/simulators/zombie-survival";
 
 export function MapBuilder({
   disabled,
@@ -91,13 +91,13 @@ export function MapBuilder({
   );
 
   return (
-    <div className="relative inline-flex flex-col p-7 w-fit">
+    <div className="relative inline-flex w-fit flex-col p-7">
       {!play && (
         <>
           <button
             className={cn(
               controlClassName,
-              "top-0 left-1/2 translate-x-[-100%]",
+              "left-1/2 top-0 translate-x-[-100%]",
             )}
             disabled={disabled}
             type="button"
@@ -107,7 +107,7 @@ export function MapBuilder({
           </button>
           {moreThanOneRow && (
             <button
-              className={cn(controlClassName, "top-0 left-1/2")}
+              className={cn(controlClassName, "left-1/2 top-0")}
               disabled={disabled}
               type="button"
               onClick={handleDecreaseUp}
@@ -118,7 +118,7 @@ export function MapBuilder({
           <button
             className={cn(
               controlClassName,
-              "top-1/2 left-0 translate-y-[-100%]",
+              "left-0 top-1/2 translate-y-[-100%]",
             )}
             disabled={disabled}
             type="button"
@@ -128,7 +128,7 @@ export function MapBuilder({
           </button>
           {moreThanOneCell && (
             <button
-              className={cn(controlClassName, "top-1/2 left-0")}
+              className={cn(controlClassName, "left-0 top-1/2")}
               disabled={disabled}
               type="button"
               onClick={handleDecreaseLeft}
@@ -160,7 +160,7 @@ export function MapBuilder({
           <button
             className={cn(
               controlClassName,
-              "top-1/2 right-0 translate-y-[-100%]",
+              "right-0 top-1/2 translate-y-[-100%]",
             )}
             disabled={disabled}
             type="button"
@@ -170,7 +170,7 @@ export function MapBuilder({
           </button>
           {moreThanOneCell && (
             <button
-              className={cn(controlClassName, "top-1/2 right-0")}
+              className={cn(controlClassName, "right-0 top-1/2")}
               disabled={disabled}
               type="button"
               onClick={handleDecreaseRight}
diff --git a/components/ModelSelector.tsx b/components/ModelSelector.tsx
index d400c9e..06b9a04 100644
--- a/components/ModelSelector.tsx
+++ b/components/ModelSelector.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import { useQuery } from "convex/react";
 import {
   Select,
diff --git a/components/ThemeToggle.tsx b/components/ThemeToggle.tsx
index 51db0c6..e2baa94 100644
--- a/components/ThemeToggle.tsx
+++ b/components/ThemeToggle.tsx
@@ -1,8 +1,8 @@
 "use client";
 
-import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
 import { DesktopIcon, MoonIcon, SunIcon } from "@radix-ui/react-icons";
 import { useTheme } from "next-themes";
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
 
 export function ThemeToggle() {
   const { theme, setTheme } = useTheme();
@@ -19,7 +19,7 @@ export function ThemeToggle() {
           setTheme(newTheme);
         }
       }}
-      className="flex px-1 py-1 rounded-md bg-blue-200 dark:bg-slate-700"
+      className="flex rounded-md bg-blue-200 px-1 py-1 dark:bg-slate-700"
     >
       {theme === "light" || (theme === "system" && darkMode === "light") ? (
         <ToggleGroupItem value="dark" aria-label="Dark">
diff --git a/components/UserMenu.tsx b/components/UserMenu.tsx
index 2138f72..8bdc518 100644
--- a/components/UserMenu.tsx
+++ b/components/UserMenu.tsx
@@ -1,5 +1,8 @@
 "use client";
 
+import { ReactNode } from "react";
+import { useAuthActions } from "@convex-dev/auth/react";
+import { PersonIcon } from "@radix-ui/react-icons";
 import { ThemeToggle } from "@/components/ThemeToggle";
 import { Button } from "@/components/ui/button";
 import {
@@ -10,9 +13,6 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { useAuthActions } from "@convex-dev/auth/react";
-import { PersonIcon } from "@radix-ui/react-icons";
-import { ReactNode } from "react";
 
 export function UserMenu({ children }: { children: ReactNode }) {
   return (
diff --git a/components/Visualizer.tsx b/components/Visualizer.tsx
index 0058b20..8af250a 100644
--- a/components/Visualizer.tsx
+++ b/components/Visualizer.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import { Button } from "@/components/ui/button";
 import { Renderer } from "@/renderer";
 import { ZombieSurvival } from "@/simulators/zombie-survival";
@@ -115,7 +115,7 @@ export function Visualizer({
     <div className="flex flex-col gap-1">
       <canvas ref={canvas} />
       {controls && (
-        <div className="flex gap-2 justify-center py-2">
+        <div className="flex justify-center gap-2 py-2">
           <Button disabled={running} onClick={startSimulation}>
             Replay
           </Button>
diff --git a/convex/games.ts b/convex/games.ts
index 21ebf6c..835c835 100644
--- a/convex/games.ts
+++ b/convex/games.ts
@@ -1,8 +1,8 @@
 import { v } from "convex/values";
-import { internalMutation, mutation, query } from "./_generated/server";
 import { api, internal } from "./_generated/api";
-import { AI_MODEL_IDS } from "./constants";
 import { Id } from "./_generated/dataModel";
+import { internalMutation, mutation, query } from "./_generated/server";
+import { AI_MODEL_IDS } from "./constants";
 
 export const testModel = mutation({
   args: {
diff --git a/convex/leaderboard.ts b/convex/leaderboard.ts
index 1c6239f..bf05ace 100644
--- a/convex/leaderboard.ts
+++ b/convex/leaderboard.ts
@@ -1,6 +1,6 @@
 import { v } from "convex/values";
-import { internalMutation, query } from "./_generated/server";
 import { api } from "./_generated/api";
+import { internalMutation, query } from "./_generated/server";
 
 export const getGlobalRankings = query({
   handler: async ({ db }) => {
diff --git a/convex/maps.ts b/convex/maps.ts
index 78eb4f2..eb8a42d 100644
--- a/convex/maps.ts
+++ b/convex/maps.ts
@@ -1,17 +1,17 @@
+import { runModel } from "../models";
+import { ZombieSurvival } from "../simulators/zombie-survival";
+import { getAuthUserId } from "@convex-dev/auth/server";
+import { v } from "convex/values";
+import { api, internal } from "./_generated/api";
 import {
+  action,
   internalAction,
   internalMutation,
   mutation,
   query,
-  action,
 } from "./_generated/server";
-import { v } from "convex/values";
-import { ZombieSurvival } from "../simulators/zombie-survival";
-import { api, internal } from "./_generated/api";
-import { runModel } from "../models";
-import { getAuthUserId } from "@convex-dev/auth/server";
-import { adminMutationBuilder } from "./users";
 import { Prompt } from "./prompts";
+import { adminMutationBuilder } from "./users";
 
 const LEVELS = [
   {
@@ -331,8 +331,9 @@ export const testMap = action({
   },
   handler: async (ctx, args) => {
     const isAdmin = await ctx.runQuery(api.users.isAdmin);
-    const activePrompt: Prompt  = await ctx.runQuery(api.prompts.getActivePrompt);
-    
+    const activePrompt: Prompt = await ctx.runQuery(
+      api.prompts.getActivePrompt,
+    );
 
     if (!isAdmin) {
       throw new Error("Test map is available only for admin");
@@ -342,11 +343,7 @@ export const testMap = action({
       throw new Error("Active prompt not found");
     }
 
-    return await runModel(
-      args.modelId,
-      args.map,
-      activePrompt.prompt,
-    );
+    return await runModel(args.modelId, args.map, activePrompt.prompt);
   },
 });
 
@@ -369,7 +366,9 @@ export const testAIModel = action({
       throw new Error("Map not found");
     }
 
-    const activePrompt: Prompt  = await ctx.runQuery(api.prompts.getActivePrompt);
+    const activePrompt: Prompt = await ctx.runQuery(
+      api.prompts.getActivePrompt,
+    );
 
     if (!activePrompt) {
       throw new Error("Active prompt not found");
diff --git a/convex/models.ts b/convex/models.ts
index e1cbf70..094ea4f 100644
--- a/convex/models.ts
+++ b/convex/models.ts
@@ -1,6 +1,6 @@
-import { AI_MODELS } from "./constants";
 import { api, internal } from "./_generated/api";
 import { internalMutation, query } from "./_generated/server";
+import { AI_MODELS } from "./constants";
 
 export const runActiveModelsGames = internalMutation({
   handler: async (ctx) => {
diff --git a/convex/playerresults.ts b/convex/playerresults.ts
index 1b700e0..639a4a9 100644
--- a/convex/playerresults.ts
+++ b/convex/playerresults.ts
@@ -1,6 +1,6 @@
+import { getAuthUserId } from "@convex-dev/auth/server";
 import { v } from "convex/values";
 import { mutation, query } from "./_generated/server";
-import { getAuthUserId } from "@convex-dev/auth/server";
 
 export const getUserMapStatus = query({
   handler: async (ctx) => {
diff --git a/convex/prompts.ts b/convex/prompts.ts
index 3f5d9e8..bba5244 100644
--- a/convex/prompts.ts
+++ b/convex/prompts.ts
@@ -1,6 +1,6 @@
 import { v } from "convex/values";
-import { internalMutation, mutation, query } from "./_generated/server";
 import { Id } from "./_generated/dataModel";
+import { internalMutation, mutation, query } from "./_generated/server";
 import { adminMutationBuilder } from "./users";
 
 const defaultPrompt = `
@@ -91,7 +91,10 @@ export const getPromptById = query({
     promptId: v.string(),
   },
   handler: async (ctx, args): Promise<Prompt | null> => {
-    const prompt = await ctx.db.query("prompts").filter(q => q.eq(q.field("_id"), args.promptId)).first();
+    const prompt = await ctx.db
+      .query("prompts")
+      .filter((q) => q.eq(q.field("_id"), args.promptId))
+      .first();
     return prompt;
   },
 });
diff --git a/convex/results.ts b/convex/results.ts
index b916f08..402aa73 100644
--- a/convex/results.ts
+++ b/convex/results.ts
@@ -1,6 +1,6 @@
 import { v } from "convex/values";
-import { internalMutation, query } from "./_generated/server";
 import { api, internal } from "./_generated/api";
+import { internalMutation, query } from "./_generated/server";
 import { PLAY_DELAY } from "./constants";
 
 export type ResultWithGame = Awaited<
diff --git a/convex/scores.ts b/convex/scores.ts
index 0d98d1f..a328f59 100644
--- a/convex/scores.ts
+++ b/convex/scores.ts
@@ -1,6 +1,6 @@
 import { v } from "convex/values";
-import { internalMutation } from "./_generated/server";
 import { api } from "./_generated/api";
+import { internalMutation } from "./_generated/server";
 
 export const incrementScore = internalMutation({
   args: {
diff --git a/convex/users.ts b/convex/users.ts
index b3c02ea..a14c505 100644
--- a/convex/users.ts
+++ b/convex/users.ts
@@ -1,10 +1,10 @@
 import { getAuthUserId } from "@convex-dev/auth/server";
-import { mutation, query } from "./_generated/server";
 import {
-  customQuery,
   customCtx,
   customMutation,
+  customQuery,
 } from "convex-helpers/server/customFunctions";
+import { mutation, query } from "./_generated/server";
 
 export const viewer = query({
   args: {},
diff --git a/lib/utils.ts b/lib/utils.ts
index e871d5a..5a7b05a 100644
--- a/lib/utils.ts
+++ b/lib/utils.ts
@@ -12,17 +12,3 @@ export function errorMessage(error: unknown) {
       ? error
       : "An unexpected error occurred";
 }
-
-export function isElementInViewport(el: HTMLElement) {
-  const rect = el.getBoundingClientRect();
-
-  const windowHeight =
-    window.innerHeight || document.documentElement.clientHeight;
-
-  const windowWidth = window.innerWidth || document.documentElement.clientWidth;
-
-  const isVerticallyInView = rect.top < windowHeight && rect.bottom > 0;
-  const isHorizontallyInView = rect.left < windowWidth && rect.right > 0;
-
-  return isVerticallyInView && isHorizontallyInView;
-}
diff --git a/models/claude-3-5-sonnet.ts b/models/claude-3-5-sonnet.ts
index 7f2b124..d41ed6d 100644
--- a/models/claude-3-5-sonnet.ts
+++ b/models/claude-3-5-sonnet.ts
@@ -1,5 +1,5 @@
-import { Anthropic } from "@anthropic-ai/sdk";
 import { type ModelHandler } from ".";
+import { Anthropic } from "@anthropic-ai/sdk";
 
 export const claude35sonnet: ModelHandler = async (prompt, map) => {
   const anthropic = new Anthropic({
diff --git a/models/gemini-1.5-pro.ts b/models/gemini-1.5-pro.ts
index 0d6bba1..0a43bca 100644
--- a/models/gemini-1.5-pro.ts
+++ b/models/gemini-1.5-pro.ts
@@ -1,5 +1,5 @@
-import { GoogleGenerativeAI, SchemaType } from "@google/generative-ai";
 import { type ModelHandler } from ".";
+import { GoogleGenerativeAI, SchemaType } from "@google/generative-ai";
 
 const schema = {
   description: "Game Round Results",
diff --git a/models/gpt-4o.ts b/models/gpt-4o.ts
index 4acda3a..f836c25 100644
--- a/models/gpt-4o.ts
+++ b/models/gpt-4o.ts
@@ -1,7 +1,7 @@
+import { type ModelHandler } from ".";
 import OpenAI from "openai";
-import { z } from "zod";
 import { zodResponseFormat } from "openai/helpers/zod";
-import { type ModelHandler } from ".";
+import { z } from "zod";
 
 const ResponseSchema = z.object({
   reasoning: z.string(),
diff --git a/models/index.ts b/models/index.ts
index 8727a9f..4ddb93e 100644
--- a/models/index.ts
+++ b/models/index.ts
@@ -1,9 +1,9 @@
+import { errorMessage } from "../lib/utils";
 import { ZombieSurvival } from "../simulators/zombie-survival";
+import { claude35sonnet } from "./claude-3-5-sonnet";
 import { gemini15pro } from "./gemini-1.5-pro";
 import { gpt4o } from "./gpt-4o";
-import { claude35sonnet } from "./claude-3-5-sonnet";
 import { perplexityModel } from "./perplexity-llama";
-import { errorMessage } from "../lib/utils";
 
 export type ModelHandler = (
   prompt: string,
diff --git a/package.json b/package.json
index 91eebdc..c335391 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,6 @@
   "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",
@@ -44,6 +43,7 @@
     "zod": "^3.23.8"
   },
   "devDependencies": {
+    "@trivago/prettier-plugin-sort-imports": "^4.3.0",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
@@ -53,7 +53,7 @@
     "eslint-config-next": "14.2.5",
     "npm-run-all": "^4.1.5",
     "postcss": "^8",
-    "prettier": "3.3.2",
+    "prettier": "^3.3.2",
     "prettier-plugin-tailwindcss": "^0.6.8",
     "tailwindcss": "^3.4.1",
     "typescript": "^5",
diff --git a/prettier.config.js b/prettier.config.js
deleted file mode 100644
index b2d59b4..0000000
--- a/prettier.config.js
+++ /dev/null
@@ -1,6 +0,0 @@
-/** @type {import('prettier').Config & import('prettier-plugin-tailwindcss').PluginOptions} */
-const config = {
-  plugins: ["prettier-plugin-tailwindcss"],
-};
-
-export default config;
diff --git a/simulators/zombie-survival/ZombieSurvival.ts b/simulators/zombie-survival/ZombieSurvival.ts
index c5b44de..cb9329a 100644
--- a/simulators/zombie-survival/ZombieSurvival.ts
+++ b/simulators/zombie-survival/ZombieSurvival.ts
@@ -1,10 +1,10 @@
+import { Position } from "./Position";
 import { Box } from "./entities/Box";
 import { Entity } from "./entities/Entity";
 import { Player } from "./entities/Player";
 import { Rock } from "./entities/Rock";
 import { Zombie } from "./entities/Zombie";
 import { entityAt } from "./lib/entityAt";
-import { Position } from "./Position";
 
 export class ZombieSurvival {
   public readonly boardHeight: number;
diff --git a/simulators/zombie-survival/entities/Box.ts b/simulators/zombie-survival/entities/Box.ts
index dd51fb1..ca2f027 100644
--- a/simulators/zombie-survival/entities/Box.ts
+++ b/simulators/zombie-survival/entities/Box.ts
@@ -1,5 +1,5 @@
-import { Entity, EntityType } from "./Entity";
 import { Position } from "../Position";
+import { Entity, EntityType } from "./Entity";
 
 export class Box extends Entity {
   public static Destructible = true;
diff --git a/simulators/zombie-survival/entities/Player.ts b/simulators/zombie-survival/entities/Player.ts
index f50982b..586a21f 100644
--- a/simulators/zombie-survival/entities/Player.ts
+++ b/simulators/zombie-survival/entities/Player.ts
@@ -1,7 +1,7 @@
-import { Entity, EntityType } from "./Entity";
 import { Position } from "../Position";
 import { ZombieSurvival } from "../ZombieSurvival";
 import { closestEntity } from "../lib/closestEntity";
+import { Entity, EntityType } from "./Entity";
 
 export class Player extends Entity {
   public static Destructible = true;
diff --git a/simulators/zombie-survival/entities/Rock.ts b/simulators/zombie-survival/entities/Rock.ts
index 7a42afc..a6d8fa1 100644
--- a/simulators/zombie-survival/entities/Rock.ts
+++ b/simulators/zombie-survival/entities/Rock.ts
@@ -1,5 +1,5 @@
-import { Entity, EntityType } from "./Entity";
 import { Position } from "../Position";
+import { Entity, EntityType } from "./Entity";
 
 export class Rock extends Entity {
   public static Destructible = false;
diff --git a/simulators/zombie-survival/entities/Zombie.ts b/simulators/zombie-survival/entities/Zombie.ts
index dab009f..1b5888a 100644
--- a/simulators/zombie-survival/entities/Zombie.ts
+++ b/simulators/zombie-survival/entities/Zombie.ts
@@ -1,9 +1,9 @@
 import { Direction, allDirections, move } from "../Direction";
-import { Entity, EntityType } from "./Entity";
 import { Position } from "../Position";
 import { ZombieSurvival } from "../ZombieSurvival";
 import { entityAt } from "../lib/entityAt";
 import { pathfinder } from "../lib/pathfinder";
+import { Entity, EntityType } from "./Entity";
 
 export class Zombie extends Entity {
   public static Destructible = true;
diff --git a/simulators/zombie-survival/lib/entityAt.ts b/simulators/zombie-survival/lib/entityAt.ts
index 5296f56..76ea62a 100644
--- a/simulators/zombie-survival/lib/entityAt.ts
+++ b/simulators/zombie-survival/lib/entityAt.ts
@@ -1,5 +1,5 @@
-import { Entity } from "../entities/Entity";
 import { Position } from "../Position";
+import { Entity } from "../entities/Entity";
 
 export function entityAt(
   entities: Entity[],
diff --git a/simulators/zombie-survival/lib/pathfinder.ts b/simulators/zombie-survival/lib/pathfinder.ts
index 83bfdad..3a81627 100644
--- a/simulators/zombie-survival/lib/pathfinder.ts
+++ b/simulators/zombie-survival/lib/pathfinder.ts
@@ -1,6 +1,6 @@
-import { allDirections, Direction, move } from "../Direction";
-import { Zombie } from "../entities/Zombie";
+import { Direction, allDirections, move } from "../Direction";
 import { ZombieSurvival } from "../ZombieSurvival";
+import { Zombie } from "../entities/Zombie";
 import { entityAt } from "./entityAt";
 
 export function pathfinder(
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 8eaaee2..10ec17a 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,4 +1,4 @@
-import type { Config } from "tailwindcss";
+import { type Config } from "tailwindcss";
 
 const config: Config = {
   darkMode: "class", // Use 'class' strategy for toggling dark mode