diff --git a/src/App.jsx b/src/App.jsx
index 8945ac6..bc46127 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -16,9 +16,11 @@ import UpdateDoc from './update-doc.jsx';
 // Import React styling
 import './App.css';
 
+const basename = process.env === 'production' ? "/~alpt22/editor" : "";
+
 export default function App() {
     return (
-        <Router basename="/~alpt22/editor">
+        <Router basename={basename}>
 
             <div className="App">
                 <Header />
diff --git a/src/__tests__/App.test.js b/src/__tests__/App.test.js
index 7c2281b..5b16c3f 100644
--- a/src/__tests__/App.test.js
+++ b/src/__tests__/App.test.js
@@ -2,6 +2,7 @@ import React from 'react';
 import { getByRole, render, screen, act, getByText } from '@testing-library/react';
 import App from '../App';
 import { getAll } from '../models/fetch';
+import { BrowserRouter } from "react-router-dom";
 
 jest.mock("../models/fetch", () => ({
     getAll: jest.fn(),
diff --git a/src/__tests__/new-doc.test.js b/src/__tests__/new-doc.test.js
index 1a5ab1a..7786aa8 100644
--- a/src/__tests__/new-doc.test.js
+++ b/src/__tests__/new-doc.test.js
@@ -40,6 +40,7 @@ describe('Tests the new document component', () => {
     });
 
     test('submits form and navigates', async () => {
+        // Setup
         const mockNavigate = jest.fn();
         useNavigate.mockReturnValue(mockNavigate);
         const mockResponse = '123';
@@ -47,15 +48,16 @@ describe('Tests the new document component', () => {
             json: jest.fn().mockResolvedValueOnce(mockResponse),
         });
 
+        // Act
         render(<NewDoc />);
         
-        fireEvent.change(screen.getByLabelText(/title/i), { target: { value: 'My Document' } });
-        // For some reason there needs to be a space after, or else it cut's of the whole word.
+        userEvent.type(screen.getByLabelText(/title/i), 'My Document');
+        // For some reason there needs to be a space after, or else it cuts of the whole word.
         userEvent.type(document.getElementsByClassName('ql-editor')[0], "This is the content ");
 
         fireEvent.click(screen.getByRole('button', { name: /create document/i }));
 
-        
+        // Assert
         await waitFor(() => {
             expect(addOne).toHaveBeenCalledWith({
                 title: 'My Document',
@@ -63,6 +65,5 @@ describe('Tests the new document component', () => {
             });
             expect(mockNavigate).toHaveBeenCalledWith('/id/123');
         });
-        
     });
 });
diff --git a/src/__tests__/update-doc.test.js b/src/__tests__/update-doc.test.js
index 4a3861f..0e66729 100644
--- a/src/__tests__/update-doc.test.js
+++ b/src/__tests__/update-doc.test.js
@@ -5,8 +5,6 @@ import { useParams, useNavigate } from 'react-router-dom';
 import UpdateDoc from '../update-doc.jsx';
 import { Quill } from 'react-quill';
 
-
-
 // Mock the navigate function for delete function
 jest.mock('react-router-dom', () => ({
     useNavigate: jest.fn(),
diff --git a/src/forms/new-form.jsx b/src/forms/new-form.jsx
index 16559ae..26e53e4 100644
--- a/src/forms/new-form.jsx
+++ b/src/forms/new-form.jsx
@@ -36,7 +36,7 @@ export function NewForm() {
                 aria-invalid={errors.name ? "true" : "false"} 
                 type="text" 
                 name="title" 
-                required="true"
+                required={true}
                 {...register("title")} 
                 onInvalid={e => {
                     e.currentTarget.setCustomValidity("A document title is required");