diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
index 78519ac..228a445 100644
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -30,6 +30,6 @@ jobs:
           cache: "yarn"
           cache-dependency-path: react/yarn.lock
       - run: yarn
-      - run: npx prettier . --check
       - run: yarn build --if-present
       - run: yarn test
+      - run: yarn prettier . --check
diff --git a/react/.prettierignore b/react/.prettierignore
new file mode 100644
index 0000000..e665aa0
--- /dev/null
+++ b/react/.prettierignore
@@ -0,0 +1,4 @@
+# Ignore yarn.lock and other Yarn-specific files
+yarn.lock
+package.json
+**/node_modules/*
\ No newline at end of file
diff --git a/react/.prettierrc b/react/.prettierrc
new file mode 100644
index 0000000..a598fca
--- /dev/null
+++ b/react/.prettierrc
@@ -0,0 +1,3 @@
+{
+  "endOfLine": "lf"
+}
diff --git a/react/package.json b/react/package.json
index 21e739c..ff63405 100644
--- a/react/package.json
+++ b/react/package.json
@@ -19,7 +19,8 @@
     "web-vitals": "^2.1.0"
   },
   "devDependencies": {
-    "@babel/plugin-proposal-private-property-in-object": "^7.21.11"
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "prettier": "^3.3.3"
   },
   "scripts": {
     "start": "react-scripts start",
diff --git a/react/src/components/WebSocketContext.tsx b/react/src/components/WebSocketContext.tsx
index 386a177..ab1f89a 100644
--- a/react/src/components/WebSocketContext.tsx
+++ b/react/src/components/WebSocketContext.tsx
@@ -13,7 +13,7 @@ import {
 } from "types/websocket";
 
 const WebSocketContext = createContext<WebSocketContextType | undefined>(
-  undefined
+  undefined,
 );
 
 export function WebSocketProvider({ children }: { children: React.ReactNode }) {
diff --git a/react/src/index.tsx b/react/src/index.tsx
index 2f3b8e9..e23932a 100644
--- a/react/src/index.tsx
+++ b/react/src/index.tsx
@@ -5,12 +5,12 @@ import App from "./components/App";
 import reportWebVitals from "./reportWebVitals";
 
 const root = ReactDOM.createRoot(
-  document.getElementById("root") as HTMLElement
+  document.getElementById("root") as HTMLElement,
 );
 root.render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>
+  </React.StrictMode>,
 );
 
 // If you want to start measuring performance in your app, pass a function
diff --git a/react/yarn.lock b/react/yarn.lock
index 467d046..ea9771c 100644
--- a/react/yarn.lock
+++ b/react/yarn.lock
@@ -7727,6 +7727,11 @@ prelude-ls@~1.1.2:
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
   integrity sha512-ESF23V4SKG6lVSGZgYNpbsiaAkdab6ZgOxe52p7+Kid3W3u3bxR4Vfd/o21dmN7jSt0IwgZ4v5MUd26FEtXE9w==
 
+prettier@^3.3.3:
+  version "3.3.3"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.3.3.tgz#30c54fe0be0d8d12e6ae61dbb10109ea00d53105"
+  integrity sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==
+
 pretty-bytes@^5.3.0, pretty-bytes@^5.4.1:
   version "5.6.0"
   resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.6.0.tgz#356256f643804773c82f64723fe78c92c62beaeb"