diff --git a/src/frontend/src/components/DropdownButtonComponent/index.tsx b/src/frontend/src/components/DropdownButtonComponent/index.tsx
index 1ddddb3c1..784a08528 100644
--- a/src/frontend/src/components/DropdownButtonComponent/index.tsx
+++ b/src/frontend/src/components/DropdownButtonComponent/index.tsx
@@ -39,9 +39,7 @@ export default function DropdownButton({
               }}
             >
               {!showOptions ? (
-                <IconComponent
-                  name="ChevronDown"
-                />
+                <IconComponent name="ChevronDown" />
               ) : (
                 <IconComponent name="ChevronUp" />
               )}
diff --git a/src/frontend/src/contexts/tabsContext.tsx b/src/frontend/src/contexts/tabsContext.tsx
index 339ad67b5..49de70974 100644
--- a/src/frontend/src/contexts/tabsContext.tsx
+++ b/src/frontend/src/contexts/tabsContext.tsx
@@ -315,9 +315,11 @@ export function TabsProvider({ children }: { children: ReactNode }) {
       input.type = "file";
       input.accept = ".json";
       // add a change event listener to the file input
-      id = await new Promise(resolve => {
+      id = await new Promise((resolve) => {
         input.onchange = async (e: Event) => {
-          if ((e.target as HTMLInputElement).files![0].type === "application/json") {
+          if (
+            (e.target as HTMLInputElement).files![0].type === "application/json"
+          ) {
             const currentfile = (e.target as HTMLInputElement).files![0];
             let text = await currentfile.text();
             let flow: FlowType = JSON.parse(text);
diff --git a/src/frontend/src/pages/MainPage/index.tsx b/src/frontend/src/pages/MainPage/index.tsx
index 364519ea8..9582d4c57 100644
--- a/src/frontend/src/pages/MainPage/index.tsx
+++ b/src/frontend/src/pages/MainPage/index.tsx
@@ -1,5 +1,6 @@
 import { useContext, useEffect } from "react";
 import { Link, useNavigate } from "react-router-dom";
+import DropdownButton from "../../components/DropdownButtonComponent";
 import { CardComponent } from "../../components/cardComponent";
 import IconComponent from "../../components/genericIconComponent";
 import Header from "../../components/headerComponent";
@@ -7,7 +8,6 @@ import { SkeletonCardComponent } from "../../components/skeletonCardComponent";
 import { Button } from "../../components/ui/button";
 import { USER_PROJECTS_HEADER } from "../../constants/constants";
 import { TabsContext } from "../../contexts/tabsContext";
-import DropdownButton from "../../components/DropdownButtonComponent";
 export default function HomePage(): JSX.Element {
   const {
     flows,
@@ -15,12 +15,19 @@ export default function HomePage(): JSX.Element {
     downloadFlows,
     uploadFlows,
     addFlow,
-    removeFlow, uploadFlow,
+    removeFlow,
+    uploadFlow,
     isLoading,
   } = useContext(TabsContext);
-  const dropdownOptions = [{name: "Import from JSON", onBtnClick: () => uploadFlow(true).then((id) => {
-    navigate("/flow/" + id);
-  })}]
+  const dropdownOptions = [
+    {
+      name: "Import from JSON",
+      onBtnClick: () =>
+        uploadFlow(true).then((id) => {
+          navigate("/flow/" + id);
+        }),
+    },
+  ];
 
   // Set a null id
   useEffect(() => {
@@ -73,7 +80,7 @@ export default function HomePage(): JSX.Element {
           </div>
         </div>
         <span className="main-page-description-text">
-          Manage your personal projects. Download or upload your collection. 
+          Manage your personal projects. Download or upload your collection.
         </span>
         <div className="main-page-flows-display">
           {isLoading && flows.length == 0 ? (