diff --git a/public/index.html b/public/index.html
index c459c11..8958a5d 100644
--- a/public/index.html
+++ b/public/index.html
@@ -2,15 +2,29 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="apple-touch-icon" sizes="180x180" href="%PUBLIC_URL%/apple-touch-icon.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="%PUBLIC_URL%/favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="%PUBLIC_URL%/favicon-16x16.png">
-    <meta name="theme-color" content="#ffffff">
-    
+    <link
+      rel="apple-touch-icon"
+      sizes="180x180"
+      href="%PUBLIC_URL%/apple-touch-icon.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="32x32"
+      href="%PUBLIC_URL%/favicon-32x32.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="16x16"
+      href="%PUBLIC_URL%/favicon-16x16.png"
+    />
+    <meta name="theme-color" content="#ffffff" />
+
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta
-    name="description"
-    content="Web site created using create-react-app"
+      name="description"
+      content="Web site created using create-react-app"
     />
     <!--
       manifest.json provides metadata used when your web app is installed on a
diff --git a/public/manifest.json b/public/manifest.json
index 07fdced..7fa5dde 100644
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -17,4 +17,4 @@
   "display": "standalone",
   "theme_color": "#ffffff",
   "background_color": "#ffffff"
-}
\ No newline at end of file
+}
diff --git a/src/api/auth.js b/src/api/auth.js
index dae81dc..3c8a4e3 100644
--- a/src/api/auth.js
+++ b/src/api/auth.js
@@ -2,19 +2,19 @@ import { axiosInstance } from "./axiosInstance";
 import { authHealthCheckURL, authRefreshURL } from "./paths";
 
 export const apiAuthCheck = async () => {
-	try {
-		const response = await axiosInstance.get(authHealthCheckURL);
-		return response;
-	} catch (error) {
-		return error.response;
-	}
+  try {
+    const response = await axiosInstance.get(authHealthCheckURL);
+    return response;
+  } catch (error) {
+    return error.response;
+  }
 }
 
 export const apiAuthRefresh = async () => {
-	try {
-		const response = await axiosInstance.get(authRefreshURL);
-		return response;
-	} catch (error) {
-		return error.response;
-	}
-}
\ No newline at end of file
+  try {
+    const response = await axiosInstance.get(authRefreshURL);
+    return response;
+  } catch (error) {
+    return error.response;
+  }
+}
diff --git a/src/api/axiosInstance.js b/src/api/axiosInstance.js
index dd5428d..02711af 100644
--- a/src/api/axiosInstance.js
+++ b/src/api/axiosInstance.js
@@ -2,10 +2,10 @@ import axios from "axios";
 import { backendDomain } from "./paths";
 
 export const axiosInstance = axios.create({
-	baseURL: backendDomain,
-	withCredentials: true,
-	timeout: 20000,
-	headers: {
-		"Content-Type": "application/json"
-	},
+  baseURL: backendDomain,
+  withCredentials: true,
+  timeout: 20000,
+  headers: {
+    "Content-Type": "application/json"
+  },
 });
diff --git a/src/boilerplates/apiResp.js b/src/boilerplates/apiResp.js
index 2fd0e04..6ac97de 100644
--- a/src/boilerplates/apiResp.js
+++ b/src/boilerplates/apiResp.js
@@ -6,21 +6,21 @@ import LocalStorage from "../utils/localStorageHelper";
 const refreshAuth = useContext(RefreshAuthContext);
 
 if (resp === undefined) {
-	showErrorToastNotification("Please try again after sometime");
-	return;
+  showErrorToastNotification("Please try again after sometime");
+  return;
 } else {
-	if (resp.status === 200) {
-		showSuccessToastNotification(resp.data.message);
-		// proceed with data
-	} else if (resp.status >= 400 && resp.status < 500) {
-		if (resp.data.auth === false) {
-			LocalStorage.clear();
-			refreshAuth();
-		}
-		showErrorToastNotification(resp.data.message);
-		return;
-	} else if (resp.status >= 500 && resp.status < 600) {
-		showErrorToastNotification(resp.data.message);
-		return;
-	}
-}
\ No newline at end of file
+  if (resp.status === 200) {
+    showSuccessToastNotification(resp.data.message);
+    // proceed with data
+  } else if (resp.status >= 400 && resp.status < 500) {
+    if (resp.data.auth === false) {
+      LocalStorage.clear();
+      refreshAuth();
+    }
+    showErrorToastNotification(resp.data.message);
+    return;
+  } else if (resp.status >= 500 && resp.status < 600) {
+    showErrorToastNotification(resp.data.message);
+    return;
+  }
+}
diff --git a/src/boilerplates/media_query.css b/src/boilerplates/media_query.css
index 05d2357..938ed56 100644
--- a/src/boilerplates/media_query.css
+++ b/src/boilerplates/media_query.css
@@ -21,4 +21,4 @@
 }
 
 @media (prefers-color-scheme: light) {
-}
\ No newline at end of file
+}
diff --git a/src/components/Navbar/index.jsx b/src/components/Navbar/index.jsx
index 1794041..60603e0 100644
--- a/src/components/Navbar/index.jsx
+++ b/src/components/Navbar/index.jsx
@@ -11,13 +11,13 @@ const Navbar = () => {
   return (
     <nav className={styles.navbar_wrapper}>
       <StyledNavLink path="/" text="Home" />
+      <StyledNavLink path="/graph" text="Graph" />
+      <StyledNavLink path="/about" text="About" />
       {
         auth === true ?
           <StyledNavLink path="/logout" text="Logout" /> :
           <StyledNavLink path="/login" text="Login" />
       }
-      <StyledNavLink path="/graph" text="Graph" />
-      <StyledNavLink path="/about" text="About" />
     </nav>
   )
 }
diff --git a/src/components/ToastNotification/index.jsx b/src/components/ToastNotification/index.jsx
index da1e049..8d43245 100644
--- a/src/components/ToastNotification/index.jsx
+++ b/src/components/ToastNotification/index.jsx
@@ -1,17 +1,17 @@
 import { toast } from "react-toastify";
 
 export const showErrorToastNotification = (message) => {
-	toast.error(message || "Server Error");
+  toast.error(message || "Server Error");
 };
 
 export const showSuccessToastNotification = (message) => {
-	toast.success(message || "Success");
+  toast.success(message || "Success");
 };
 
 export const showWarnToastNotification = (message) => {
-	toast.warn(message || "Warning");
+  toast.warn(message || "Warning");
 };
 
 export const showInfoToastNotification = (message) => {
-	toast.info(message || "Info");
-};
\ No newline at end of file
+  toast.info(message || "Info");
+};
diff --git a/src/index.css b/src/index.css
index e32d596..d2adae1 100644
--- a/src/index.css
+++ b/src/index.css
@@ -92,9 +92,9 @@ img {
 }
 
 body {
-  font-family: var(--primaryFont),-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
-    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
-    sans-serif;
+  font-family: var(--primaryFont), -apple-system, BlinkMacSystemFont, "Segoe UI",
+    "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
+    "Helvetica Neue", sans-serif;
   font-size: var(--normalFontSize);
   color: var(--text);
   background-color: var(--bgBlue);
diff --git a/src/pages/Graph/Graph.module.css b/src/pages/Graph/Graph.module.css
index db5ac9e..2ad9080 100644
--- a/src/pages/Graph/Graph.module.css
+++ b/src/pages/Graph/Graph.module.css
@@ -1,5 +1,5 @@
 .graph_wrapper {
-	display: flex;
-	width: 100%;
-	height: 100vh;
-}
\ No newline at end of file
+  display: flex;
+  width: 100%;
+  height: 100vh;
+}
diff --git a/src/pages/Graph/index.jsx b/src/pages/Graph/index.jsx
index 0502158..9657e5a 100644
--- a/src/pages/Graph/index.jsx
+++ b/src/pages/Graph/index.jsx
@@ -1,11 +1,11 @@
 import React, { useCallback } from 'react';
 import {
-	ReactFlow,
-	Controls,
-	Background,
-	useNodesState,
-	useEdgesState,
-	addEdge,
+  ReactFlow,
+  Controls,
+  Background,
+  useNodesState,
+  useEdgesState,
+  addEdge,
 } from '@xyflow/react';
 
 import '@xyflow/react/dist/style.css';
@@ -13,35 +13,35 @@ import styles from './Graph.module.css';
 
 // const initialNodes = [];
 const initialNodes = [
-	{ id: '1', position: { x: 0, y: 0 }, data: { label: '1' } },
-	{ id: '2', position: { x: 0, y: 100 }, data: { label: '2' } },
+  { id: '1', position: { x: 0, y: 0 }, data: { label: '1' } },
+  { id: '2', position: { x: 0, y: 100 }, data: { label: '2' } },
 ];
 // const initialEdges = [];
 const initialEdges = [
-	{ id: 'e1-2', source: '1', target: '2' }
+  { id: 'e1-2', source: '1', target: '2' }
 ];
 const Graph = () => {
-	const [playlistNodes, setNodes, onNodesChange] = useNodesState(initialNodes);
-	const [linkEdges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
+  const [playlistNodes, setNodes, onNodesChange] = useNodesState(initialNodes);
+  const [linkEdges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
 
-	const onConnect = useCallback((params) => {
-		setEdges((eds) => addEdge(params, eds));
-	}, [setEdges]);
+  const onConnect = useCallback((params) => {
+    setEdges((eds) => addEdge(params, eds));
+  }, [setEdges]);
 
-	return (
-		<div className={styles.graph_wrapper}>
-			<ReactFlow
-				nodes={playlistNodes}
-				edges={linkEdges}
-				onNodesChange={onNodesChange}
-				onEdgesChange={onEdgesChange}
-				onConnect={onConnect}
-			>
-				<Controls />
-				<Background variant='dots' gap={36} size={3} />
-			</ReactFlow>
-		</div>
-	)
+  return (
+    <div className={styles.graph_wrapper}>
+      <ReactFlow
+        nodes={playlistNodes}
+        edges={linkEdges}
+        onNodesChange={onNodesChange}
+        onEdgesChange={onEdgesChange}
+        onConnect={onConnect}
+      >
+        <Controls />
+        <Background variant='dots' gap={36} size={3} />
+      </ReactFlow>
+    </div>
+  )
 }
 
-export default Graph;
\ No newline at end of file
+export default Graph;
diff --git a/src/pages/Login/index.jsx b/src/pages/Login/index.jsx
index 3933c81..d4b13c3 100644
--- a/src/pages/Login/index.jsx
+++ b/src/pages/Login/index.jsx
@@ -4,18 +4,18 @@ import { authLoginURL } from '../../api/paths';
 
 // auth through backend
 const Login = () => {
-	useEffect(() => {
-		const timeoutID = setTimeout(() => {
-			window.open(authLoginURL, "_self")
-		}, 1000);
+  useEffect(() => {
+    const timeoutID = setTimeout(() => {
+      window.open(authLoginURL, "_self")
+    }, 1000);
 
-		return () => clearTimeout(timeoutID);
-	}, []);
-	return (
-		<div className={styles.login_wrapper}>
-			Redirecting to Spotify...
-		</div>
-	)
+    return () => clearTimeout(timeoutID);
+  }, []);
+  return (
+    <div className={styles.login_wrapper}>
+      Redirecting to Spotify...
+    </div>
+  )
 }
 
-export default Login;
\ No newline at end of file
+export default Login;
diff --git a/src/pages/Logout/index.jsx b/src/pages/Logout/index.jsx
index 7e5df57..4f2be16 100644
--- a/src/pages/Logout/index.jsx
+++ b/src/pages/Logout/index.jsx
@@ -3,18 +3,18 @@ import styles from './Logout.module.css';
 import { authLogoutURL } from '../../api/paths';
 
 const Logout = () => {
-	useEffect(() => {
-		const timeoutID = setTimeout(() => {
-			window.open(authLogoutURL, "_self")
-		}, 1000);
+  useEffect(() => {
+    const timeoutID = setTimeout(() => {
+      window.open(authLogoutURL, "_self")
+    }, 1000);
 
-		return () => clearTimeout(timeoutID);
-	}, []);
-	return (
-		<div className={styles.logout_wrapper}>
-			See you soon!
-		</div>
-	)
+    return () => clearTimeout(timeoutID);
+  }, []);
+  return (
+    <div className={styles.logout_wrapper}>
+      See you soon!
+    </div>
+  )
 }
 
-export default Logout;
\ No newline at end of file
+export default Logout;
diff --git a/src/pages/PageNotFound/index.jsx b/src/pages/PageNotFound/index.jsx
index 7df756e..57fb0b2 100644
--- a/src/pages/PageNotFound/index.jsx
+++ b/src/pages/PageNotFound/index.jsx
@@ -3,15 +3,15 @@ import styles from "./PageNotFound.module.css";
 import { showWarnToastNotification } from '../../components/ToastNotification';
 
 const PageNotFound = () => {
-	useEffect(() => {
-		showWarnToastNotification("Oops!")
-	}, []);
+  useEffect(() => {
+    showWarnToastNotification("Oops!")
+  }, []);
 
-	return (
-		<div className={styles.pnf_wrapper}>
-			PageNotFound
-		</div>
-	)
+  return (
+    <div className={styles.pnf_wrapper}>
+      PageNotFound
+    </div>
+  )
 }
 
-export default PageNotFound
\ No newline at end of file
+export default PageNotFound
diff --git a/src/routes/AllRoutes.jsx b/src/routes/AllRoutes.jsx
index b3cab28..1571321 100644
--- a/src/routes/AllRoutes.jsx
+++ b/src/routes/AllRoutes.jsx
@@ -10,28 +10,28 @@ import Login from "../pages/Login";
 import Logout from "../pages/Logout";
 
 const AllRoutes = () => {
-	return (
-		<Routes>
-			{/* Routes that require user to be logged in */}
-			<Route element={<AuthOnlyRoutes />}>
-				<Route path="/logout" element={<Logout />} />
-				<Route path="/graph" element={<Graph />} />
-				{/* <Route path="/playlists" element={<Playlists />} /> */}
-			</Route>
+  return (
+    <Routes>
+      {/* Routes that require user to be logged in */}
+      <Route element={<AuthOnlyRoutes />}>
+        <Route path="/logout" element={<Logout />} />
+        <Route path="/graph" element={<Graph />} />
+        {/* <Route path="/playlists" element={<Playlists />} /> */}
+      </Route>
 
-			{/* Routes that require user to be logged *out* */}
-			<Route element={<UnAuthOnlyRoutes />}>
-				<Route path="/login" element={<Login />} />
-			</Route>
+      {/* Routes that require user to be logged *out* */}
+      <Route element={<UnAuthOnlyRoutes />}>
+        <Route path="/login" element={<Login />} />
+      </Route>
 
-			{/* Common routes */}
-			<Route path="/" element={<Landing />} />
+      {/* Common routes */}
+      <Route path="/" element={<Landing />} />
 
-			{/* 404 */}
-			<Route path="/page-not-found" element={<PageNotFound />} />
-			<Route path="*" element={<PageNotFound />} />
-		</Routes>
-	);
+      {/* 404 */}
+      <Route path="/page-not-found" element={<PageNotFound />} />
+      <Route path="*" element={<PageNotFound />} />
+    </Routes>
+  );
 };
 
-export default AllRoutes;
\ No newline at end of file
+export default AllRoutes;
diff --git a/src/routes/AuthOnlyRoutes.jsx b/src/routes/AuthOnlyRoutes.jsx
index a1218bb..a89dfb3 100644
--- a/src/routes/AuthOnlyRoutes.jsx
+++ b/src/routes/AuthOnlyRoutes.jsx
@@ -5,19 +5,19 @@ import { AuthContext } from "../App";
 import { showWarnToastNotification } from "../components/ToastNotification";
 
 function AuthOnlyRoutes() {
-	let location = useLocation();
-	const auth = useContext(AuthContext);
+  let location = useLocation();
+  const auth = useContext(AuthContext);
 
-	const handleRouteRender = () => {
-		if (auth !== true) {
-			showWarnToastNotification(<p>Sign in, please!</p>);
-			return <Navigate to={"/login"} state={{ from: location }} />;
-		} else {
-			return <Outlet />;
-		}
-	};
+  const handleRouteRender = () => {
+    if (auth !== true) {
+      showWarnToastNotification(<p>Sign in, please!</p>);
+      return <Navigate to={"/login"} state={{ from: location }} />;
+    } else {
+      return <Outlet />;
+    }
+  };
 
-	return handleRouteRender();
+  return handleRouteRender();
 }
 
-export default AuthOnlyRoutes;
\ No newline at end of file
+export default AuthOnlyRoutes;
diff --git a/src/routes/UnAuthOnlyRoutes.jsx b/src/routes/UnAuthOnlyRoutes.jsx
index 1a00301..969c608 100644
--- a/src/routes/UnAuthOnlyRoutes.jsx
+++ b/src/routes/UnAuthOnlyRoutes.jsx
@@ -5,19 +5,19 @@ import { AuthContext } from "../App";
 import { showWarnToastNotification } from "../components/ToastNotification";
 
 function UnAuthOnlyRoutes() {
-	let location = useLocation();
-	const auth = useContext(AuthContext);
+  let location = useLocation();
+  const auth = useContext(AuthContext);
 
-	const handleRouteRender = () => {
-		if (auth !== true) {
-			return <Outlet />;
-		} else {
-			showWarnToastNotification(<p>Already logged in!</p>);
-			return <Navigate to={"/graph"} state={{ from: location }} />;
-		}
-	};
+  const handleRouteRender = () => {
+    if (auth !== true) {
+      return <Outlet />;
+    } else {
+      showWarnToastNotification(<p>Already logged in!</p>);
+      return <Navigate to={"/graph"} state={{ from: location }} />;
+    }
+  };
 
-	return handleRouteRender();
+  return handleRouteRender();
 }
 
-export default UnAuthOnlyRoutes;
\ No newline at end of file
+export default UnAuthOnlyRoutes;
diff --git a/src/utils/numFormatter.js b/src/utils/numFormatter.js
index 6d05483..48e34f9 100644
--- a/src/utils/numFormatter.js
+++ b/src/utils/numFormatter.js
@@ -1,16 +1,16 @@
 /**
  * Returns a string with zero padding of the number
- * 
+ *
  * @param {number} num Input number (positive integer only, for now)
  * @param {number} places Number of zeroes to pad
  * @param {"before" | "after"} position Position of zeroes
  * @returns {string} Zero-padded string
  */
 export const zeroPaddedString = (num, places, position) => {
-	if (num < 0) throw new Error("negative number");
-	if (places < 0) throw new Error("invalid number of zeroes");
-	if (position !== "before" && position !== "after") throw new Error("invalid position (before or after only)");
+  if (num < 0) throw new Error("negative number");
+  if (places < 0) throw new Error("invalid number of zeroes");
+  if (position !== "before" && position !== "after") throw new Error("invalid position (before or after only)");
 
-	const zeroes = "0".repeat(places);
-	return position === "before" ? '' + zeroes + num : '' + num + zeroes;
-}
\ No newline at end of file
+  const zeroes = "0".repeat(places);
+  return position === "before" ? '' + zeroes + num : '' + num + zeroes;
+}
