slight touchups

apps/web/src/app/settings/layout.tsx

@@ -35,7 +35,6 @@ export default async function ({ children }: { children: ReactNode }) {
 					</div>
 				</div>
 				<aside className="sticky top-20 hidden h-screen md:block">
-					{/* <SettingsSection name="Settings" path="/settings" /> */}
 					<SettingsSection name="Account" path="/settings#account" />
 					<SettingsSection name="Profile" path="/settings#profile" />
 					<SettingsSection

apps/web/src/app/settings/page.tsx

@@ -11,25 +11,22 @@ export default async function Page() {
 	const user = await getUser(userId);
 	if (!user) return redirect("/sign-in");
 
-	function Header({ tag }: { tag: string }) {
-		return (
-			<h1
-				id={tag.toLowerCase()}
-				className="mt-10 pb-5 text-4xl font-bold"
-			>
-				{tag}
-			</h1>
-		);
-	}
-
 	return (
-		<div>
+		<main>
 			<Header tag="Account" />
 			<AccountSettings user={user} />
 			<Header tag="Profile" />
 			<ProfileSettings profile={user} />
 			<Header tag={"Registration"} />
 			<RegistrationSettings />
-		</div>
+		</main>
 	);
 }
+
+function Header({ tag }: { tag: string }) {
+	return (
+		<h1 id={tag.toLowerCase()} className="mt-10 pb-5 text-4xl font-bold">
+			{tag}
+		</h1>
+	);
+}

apps/web/src/components/settings/SettingsSection.tsx

@@ -10,6 +10,7 @@ interface ToggleItemProps {
 
 export default function SettingsSection({ name, path }: ToggleItemProps) {
 	const currPath = usePathname();
+	// NOTE: usepathname hook does not include the fragment part such as #registration or #account so we will need to use the window to access this later 
 	return (
 		<Link href={path}>
 			<div