diff --git a/frontend/package.json b/frontend/package.json
index af93702..a99d4b3 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -10,7 +10,10 @@
   },
   "dependencies": {
     "autoprefixer": "^10.4.13",
+    "eslint-config-prettier": "^8.6.0",
+    "eslint-plugin-prettier": "^4.2.1",
     "postcss": "^8.4.21",
+    "prettier": "^2.8.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "tailwindcss": "^3.2.4"
@@ -19,6 +22,7 @@
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.9",
     "@vitejs/plugin-react": "^3.0.0",
+    "eslint": "^8.32.0",
     "vite": "^4.0.0"
   }
 }
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 0831da0..6abeeac 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -1,42 +1,20 @@
-import { useState } from 'react'
-import './App.css'
+import { useState } from "react";
+import "./App.css";
+import Nav from "./components/Nav";
 
 function App() {
-  const [count, setCount] = useState(0)
+  const [count, setCount] = useState(0);
 
   return (
     <>
-    <div className="dark:bg-gray-800 min-h-screen">
-            <nav className="mb-4 bg-white dark:bg-gray-900 border-gray-200 rounded">
-                <div className="container flex flex-wrap items-center justify-between mx-auto">
-                    <a href="{% url 'index' %}" className="flex items-center">
-                        <span className="text-4xl">⌚</span>
-                        <span className="self-center text-xl font-semibold whitespace-nowrap text-white">Timetracker</span>
-                    </a>
-                    <div className="w-full md:block md:w-auto">
-                        <ul
-                            className="flex flex-col md:flex-row p-4 mt-4 dark:text-white">
-                            <li><a className="block py-2 pl-3 pr-4 hover:underline" href="{% url 'add_game' %}">New Game</a></li>
-                            <li><a className="block py-2 pl-3 pr-4 hover:underline" href="{% url 'add_platform' %}">New Platform</a></li>
-                            {/* {% if game_available and platform_available %} */}
-                                <li><a className="block py-2 pl-3 pr-4 hover:underline" href="{% url 'add_purchase' %}">New Purchase</a></li>
-                            {/* {% endif %} */}
-                            {/* {% if purchase_available %} */}
-                                <li><a className="block py-2 pl-3 pr-4 hover:underline" href="{% url 'add_session' %}">New Session</a></li>
-                            {/* {% endif %} */}
-                            {/* {% if session_count > 0 %} */}
-                                <li><a className="block py-2 pl-3 pr-4 hover:underline" href="{% url 'list_sessions' %}">All Sessions</a></li>
-                            {/* {% endif %} */}
-                        </ul>
-                    </div>
-                </div>
-            </nav>
-            {/* {% block content %}No content here.{% endblock content %} */}
-        </div>
-        {/* {% load version %} */}
-        {/* <span className="fixed left-2 bottom-2 text-xs text-slate-300 dark:text-slate-600">{% version %} ({% version_date %})</span> */}
-        </>
-  )
+      <div className="dark:bg-gray-800 min-h-screen">
+        <Nav />
+        {/* {% block content %}No content here.{% endblock content %} */}
+      </div>
+      {/* {% load version %} */}
+      {/* <span className="fixed left-2 bottom-2 text-xs text-slate-300 dark:text-slate-600">{% version %} ({% version_date %})</span> */}
+    </>
+  );
 }
 
-export default App
+export default App;
diff --git a/frontend/src/components/Nav.jsx b/frontend/src/components/Nav.jsx
new file mode 100644
index 0000000..90fc858
--- /dev/null
+++ b/frontend/src/components/Nav.jsx
@@ -0,0 +1,66 @@
+function Nav() {
+  return (
+    <nav className="mb-4 bg-white dark:bg-gray-900 border-gray-200 rounded">
+      <div className="container flex flex-wrap items-center justify-between mx-auto">
+        <a href="{% url 'index' %}" className="flex items-center">
+          <span className="text-4xl">⌚</span>
+          <span className="self-center text-xl font-semibold whitespace-nowrap text-white">
+            Timetracker
+          </span>
+        </a>
+        <div className="w-full md:block md:w-auto">
+          <ul className="flex flex-col md:flex-row p-4 mt-4 dark:text-white">
+            <li>
+              <a
+                className="block py-2 pl-3 pr-4 hover:underline"
+                href="{% url 'add_game' %}"
+              >
+                New Game
+              </a>
+            </li>
+            <li>
+              <a
+                className="block py-2 pl-3 pr-4 hover:underline"
+                href="{% url 'add_platform' %}"
+              >
+                New Platform
+              </a>
+            </li>
+            {/* {% if game_available and platform_available %} */}
+            <li>
+              <a
+                className="block py-2 pl-3 pr-4 hover:underline"
+                href="{% url 'add_purchase' %}"
+              >
+                New Purchase
+              </a>
+            </li>
+            {/* {% endif %} */}
+            {/* {% if purchase_available %} */}
+            <li>
+              <a
+                className="block py-2 pl-3 pr-4 hover:underline"
+                href="{% url 'add_session' %}"
+              >
+                New Session
+              </a>
+            </li>
+            {/* {% endif %} */}
+            {/* {% if session_count > 0 %} */}
+            <li>
+              <a
+                className="block py-2 pl-3 pr-4 hover:underline"
+                href="{% url 'list_sessions' %}"
+              >
+                All Sessions
+              </a>
+            </li>
+            {/* {% endif %} */}
+          </ul>
+        </div>
+      </div>
+    </nav>
+  );
+}
+
+export default Nav