diff --git a/backend/tsconfig.json b/backend/tsconfig.json
index 0557b5b..eeebc72 100644
--- a/backend/tsconfig.json
+++ b/backend/tsconfig.json
@@ -1,18 +1,16 @@
 {
-    "compilerOptions": {
-       "lib": [
-          "es6"
-       ],
-       "target": "es6",
-       "module": "ESNext",
-       "moduleResolution": "node",
-       "outDir": "dist",
-       "resolveJsonModule": true,
-       "emitDecoratorMetadata": true,
-       "esModuleInterop": true,
-       "experimentalDecorators": true,
-       "sourceMap": true
-    },
-    "include": ["**/*.ts"],
-    "exclude": ["node_modules", "**/*.spec.ts"]
- }
\ No newline at end of file
+  "compilerOptions": {
+    "lib": ["es6"],
+    "target": "es6",
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "outDir": "dist",
+    "resolveJsonModule": true,
+    "emitDecoratorMetadata": true,
+    "esModuleInterop": true,
+    "experimentalDecorators": true,
+    "sourceMap": true
+  },
+  "include": ["**/*.ts"],
+  "exclude": ["node_modules", "**/*.spec.ts"]
+}
diff --git a/frontend/lib/edits.tsx b/frontend/lib/edits.tsx
index 38c2097..4399a0b 100644
--- a/frontend/lib/edits.tsx
+++ b/frontend/lib/edits.tsx
@@ -124,7 +124,7 @@ export const moveItem = async (
           body: JSON.stringify({
             items: newBasketsItems,
           }),
-        }
+        },
       );
       if (removeItemFromBasket.ok) {
         console.log("Item removed from basket successfully");
diff --git a/frontend/lib/fetches.tsx b/frontend/lib/fetches.tsx
index 19e64ba..b35beb7 100644
--- a/frontend/lib/fetches.tsx
+++ b/frontend/lib/fetches.tsx
@@ -30,7 +30,6 @@ export const fetchGroupById = async (groupId: string) => {
         Authorization: `Bearer ${localStorage.getItem("token")}`,
       },
     });
-
     if (res.ok) {
       return res.json();
     } else {
@@ -72,7 +71,6 @@ export const fetchUserGroupsByUser = async (user: IUser) => {
         Authorization: `Bearer ${localStorage.getItem("token")}`,
       },
     });
-
     if (res.status === 200) {
       const data = await res.json();
       return data;
@@ -90,7 +88,6 @@ export const fetchUserFriendsByUser = async (user: IUser) => {
         Authorization: `Bearer ${localStorage.getItem("token")}`,
       },
     });
-
     if (res.status === 200) {
       const data = await res.json();
       return data;
@@ -148,7 +145,6 @@ export const fetchGroupBaskets = async (group: IGroup) => {
         Authorization: `Bearer ${localStorage.getItem("token")}`,
       },
     });
-
     if (res.status === 200) {
       const data = await res.json();
       return data;
@@ -171,7 +167,6 @@ export const fetchBasketItems = async (basket: IBasket) => {
         Authorization: `Bearer ${localStorage.getItem("token")}`,
       },
     });
-
     if (res.status === 200) {
       const data = await res.json();
       return data;
@@ -188,7 +183,6 @@ export const fetchUserBaskets = async (userId: string) => {
       Authorization: `Bearer ${localStorage.getItem("token")}`,
     },
   });
-
   if (res.status === 200) {
     const allBaskets = await res.json();
     const userBaskets = [] as IBasket[];
@@ -209,7 +203,6 @@ export const fetchGroups = async (userGroups: ObjectId[]) => {
         Authorization: `Bearer ${localStorage.getItem("token")}`,
       },
     });
-
     if (res.status === 200) {
       const data = await res.json();
       return data;
@@ -229,7 +222,6 @@ export const fetchMembers = async (memberIds: ObjectId[]) => {
             Authorization: `Bearer ${localStorage.getItem("token")}`,
           },
         });
-
         if (res.ok) {
           return res.json();
         } else {
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 56da0d4..10fe446 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -72,7 +72,7 @@ function App() {
               updateState={{ setUser, setToken }}
             />
           ) : (
-            <NavbarSignedOut/>
+            <NavbarSignedOut />
           )}
           <Routes>
             <Route path="/" element={<MoveLetters />} />
@@ -92,9 +92,7 @@ function App() {
             <Route
               path="/profile"
               element={
-                <ProfilePage
-                  LoggedInUser={user ? user._id.toString() : ""}
-                />
+                <ProfilePage LoggedInUser={user ? user._id.toString() : ""} />
               }
             />
             <Route
@@ -116,7 +114,6 @@ function App() {
                 <IndividualGroupPage LoggedInUser={user} setUser={setUser} />
               }
             />
-
           </Routes>
         </Box>
       </Router>
diff --git a/frontend/src/components/ItemGroup.tsx b/frontend/src/components/ItemGroup.tsx
index 677a9d3..083d109 100644
--- a/frontend/src/components/ItemGroup.tsx
+++ b/frontend/src/components/ItemGroup.tsx
@@ -144,47 +144,51 @@ const ItemGroup: React.FC<Props> = ({
           </Thead>
           <Tbody>
             {!loading && items.length > 0 ? (
-              items.map((item, index) => (
-                console.log(item),
-                <Tr key={index}>
-                  <Td width="25%">{item.name}</Td>
-                  <Td width="50%">{item.notes}</Td>
-                  <Td width="8%">
-                    <EditItem itemId={item._id.toString()} />
-                  </Td>
-                  <Td width="8%">
-                    <Menu>
-                      <MenuButton as={Button} rightIcon={<FaChevronDown />}>
-                        Select Basket
-                      </MenuButton>
-                      <MenuList>
-                        {userBaskets.length > 0 ? (
-                          (console.log(userBaskets),
-                          userBaskets.map((basket) => (
-                            <MenuItem
-                              key={basket._id.toString()}
-                              onClick={() => handleMove(basket, item)}
-                              _hover={{ textColor: "black" }}
-                            >
-                              {basket.basketName}
-                            </MenuItem>
-                          )))
-                        ) : (
-                          <MenuItem disabled>No baskets available</MenuItem>
-                        )}
-                      </MenuList>
-                    </Menu>
-                  </Td>
-                  <Td width="9%">
-                    <IconButton
-                      aria-label="Delete"
-                      icon={<DeleteIcon />}
-                      colorScheme="red"
-                      onClick={() => removeItem(item)}
-                    />
-                  </Td>
-                </Tr>
-              ))
+              items.map(
+                (item, index) => (
+                  console.log(item),
+                  (
+                    <Tr key={index}>
+                      <Td width="25%">{item.name}</Td>
+                      <Td width="50%">{item.notes}</Td>
+                      <Td width="8%">
+                        <EditItem itemId={item._id.toString()} />
+                      </Td>
+                      <Td width="8%">
+                        <Menu>
+                          <MenuButton as={Button} rightIcon={<FaChevronDown />}>
+                            Select Basket
+                          </MenuButton>
+                          <MenuList>
+                            {userBaskets.length > 0 ? (
+                              (console.log(userBaskets),
+                              userBaskets.map((basket) => (
+                                <MenuItem
+                                  key={basket._id.toString()}
+                                  onClick={() => handleMove(basket, item)}
+                                  _hover={{ textColor: "black" }}
+                                >
+                                  {basket.basketName}
+                                </MenuItem>
+                              )))
+                            ) : (
+                              <MenuItem disabled>No baskets available</MenuItem>
+                            )}
+                          </MenuList>
+                        </Menu>
+                      </Td>
+                      <Td width="9%">
+                        <IconButton
+                          aria-label="Delete"
+                          icon={<DeleteIcon />}
+                          colorScheme="red"
+                          onClick={() => removeItem(item)}
+                        />
+                      </Td>
+                    </Tr>
+                  )
+                ),
+              )
             ) : (
               <Tr>
                 <Td colSpan={5}>No items found.</Td>
diff --git a/frontend/src/pages/MyGroupsPage.tsx b/frontend/src/pages/MyGroupsPage.tsx
index a1d4f55..3d34ef8 100644
--- a/frontend/src/pages/MyGroupsPage.tsx
+++ b/frontend/src/pages/MyGroupsPage.tsx
@@ -162,7 +162,8 @@ const GroupPage: React.FC<Props> = ({
         justifyContent="center"
         alignItems="center"
       >
-        {stateVariable.user?.groups.length !== 0 && filteredGroups.length === 0  ? (
+        {stateVariable.user?.groups.length !== 0 &&
+        filteredGroups.length === 0 ? (
           skelIds.map((id) => {
             return (
               <GridItem w="100%" h="100%" key={`skelly${id}`}>
@@ -198,9 +199,7 @@ const GroupPage: React.FC<Props> = ({
           })
         ) : (
           <GridItem key="default">
-            <Box>
-              No groups found! Do you want to add one?
-            </Box>
+            <Box>No groups found! Do you want to add one?</Box>
           </GridItem>
         )}
       </Grid>
diff --git a/frontend/src/pages/ProfilePage.tsx b/frontend/src/pages/ProfilePage.tsx
index a7c3551..c293fbc 100644
--- a/frontend/src/pages/ProfilePage.tsx
+++ b/frontend/src/pages/ProfilePage.tsx
@@ -8,16 +8,13 @@ interface ProfilePageProps {
   LoggedInUser: string;
 }
 
-const ProfilePage: React.FC<ProfilePageProps> = ({
-  LoggedInUser,
-}) => {
+const ProfilePage: React.FC<ProfilePageProps> = ({ LoggedInUser }) => {
   const navigate = useNavigate();
   useEffect(() => {
     if (!localStorage.getItem("token")) {
       navigate("/login");
     }
-  }
-  );
+  });
 
   return (
     <Box bg="gray.100" color="gray.800" minH="93vh" p={4} overflowY={"auto"}>
@@ -27,7 +24,7 @@ const ProfilePage: React.FC<ProfilePageProps> = ({
         justifyContent={"space-between"}
       >
         <GridItem p={4} height="auto" width={{ base: "90vw", md: "45vw" }}>
-          <UserProfile userId={LoggedInUser}/>
+          <UserProfile userId={LoggedInUser} />
         </GridItem>
         <GridItem p={4} width={{ base: "90vw", md: "52vw" }}>
           <Box
diff --git a/frontend/src/styles/moveLetters.css b/frontend/src/styles/moveLetters.css
index 8f9b48a..8b06855 100644
--- a/frontend/src/styles/moveLetters.css
+++ b/frontend/src/styles/moveLetters.css
@@ -1,5 +1,6 @@
 /* Resetting margins, padding, and overflow behavior on the entire document */
-html, body {
+html,
+body {
   margin: 0;
   padding: 0px;
   height: 100%; /* or 100vh */
diff --git a/frontend/staticwebapp.config.json b/frontend/staticwebapp.config.json
new file mode 100644
index 0000000..e094983
--- /dev/null
+++ b/frontend/staticwebapp.config.json
@@ -0,0 +1,5 @@
+{
+  "navigationFallback": {
+    "rewrite": "/index.html"
+  }
+}