diff --git a/package-lock.json b/package-lock.json
index d5a7bb6..ac6bf8e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -38,6 +38,7 @@
 				"net": "^1.0.2",
 				"next": "^15.0.3",
 				"next-seo": "^6.6.0",
+				"nextjs-toploader": "^3.7.15",
 				"node-cron": "^3.0.3",
 				"nodemailer": "^6.9.16",
 				"promise-socket": "^8.0.0",
@@ -9427,6 +9428,23 @@
 				"tslib": "^2.4.0"
 			}
 		},
+		"node_modules/nextjs-toploader": {
+			"version": "3.7.15",
+			"resolved": "https://registry.npmjs.org/nextjs-toploader/-/nextjs-toploader-3.7.15.tgz",
+			"integrity": "sha512-DvvXEJVRPfE2j1HVXgFhmPl8pRcLb/4mvyVBDuYdMdkbEY7KJghp0fG5iOZ002cV6awbBw9j/Di7vQL8LRazxQ==",
+			"dependencies": {
+				"nprogress": "^0.2.0",
+				"prop-types": "^15.8.1"
+			},
+			"funding": {
+				"url": "https://buymeacoffee.com/thesgj"
+			},
+			"peerDependencies": {
+				"next": ">= 6.0.0",
+				"react": ">= 16.0.0",
+				"react-dom": ">= 16.0.0"
+			}
+		},
 		"node_modules/node-cron": {
 			"version": "3.0.3",
 			"resolved": "https://registry.npmjs.org/node-cron/-/node-cron-3.0.3.tgz",
@@ -9529,6 +9547,11 @@
 				"node": ">=8"
 			}
 		},
+		"node_modules/nprogress": {
+			"version": "0.2.0",
+			"resolved": "https://registry.npmjs.org/nprogress/-/nprogress-0.2.0.tgz",
+			"integrity": "sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA=="
+		},
 		"node_modules/nwsapi": {
 			"version": "2.2.7",
 			"resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.7.tgz",
diff --git a/package.json b/package.json
index 97af63c..5c8292f 100644
--- a/package.json
+++ b/package.json
@@ -48,6 +48,7 @@
 		"net": "^1.0.2",
 		"next": "^15.0.3",
 		"next-seo": "^6.6.0",
+		"nextjs-toploader": "^3.7.15",
 		"node-cron": "^3.0.3",
 		"nodemailer": "^6.9.16",
 		"promise-socket": "^8.0.0",
diff --git a/src/components/Panel.tsx b/src/components/Panel.tsx
index 46074eb..2a614da 100644
--- a/src/components/Panel.tsx
+++ b/src/components/Panel.tsx
@@ -1,19 +1,16 @@
 import React, { ReactNode } from "react";
 import Loader from "./Loader";
-import { Flex, Box, Text, Grid, FlexProps, useColorModeValue } from "@chakra-ui/react";
-import { IoMdTime } from "react-icons/io";
-import { formatDate } from "@lib/.";
+import { Flex, Box, Text, Grid, FlexProps } from "@chakra-ui/react";
 import { useColors } from "@hook/useColors";
 
 export interface PanelProps extends FlexProps {
 	header?: string;
-	date?: string | null;
 	identifier?: string | null;
 	children?: ReactNode;
 	isLoading?: boolean;
 }
 
-const Panel = ({ header, date, identifier, children, isLoading = false, borderRadius = "none", padding = "10px", ...props }: PanelProps) => {
+const Panel = ({ header, identifier, children, isLoading = false, borderRadius = "none", padding = "10px", ...props }: PanelProps) => {
 	const { bgColor, textColor } = useColors();
 
 	return (
@@ -31,16 +28,9 @@ const Panel = ({ header, date, identifier, children, isLoading = false, borderRa
 			{...props}
 		>
 			{header && (
-				<Flex border="1px" borderColor="#ddd" color="black" borderRadius={borderRadius}>
-					<Grid margin="10px" width="100%" templateColumns="1fr auto">
+				<Flex color="black" borderRadius={borderRadius}>
+					<Grid marginBottom="10px" width="100%" templateColumns="1fr auto">
 						<Text color={textColor}>{header}</Text>
-						{date && (
-							<Box display="flex" justifyContent="flex-end">
-								<Text display="flex" alignItems="center">
-									<IoMdTime /> {formatDate(date)}
-								</Text>
-							</Box>
-						)}
 					</Grid>
 				</Flex>
 			)}
diff --git a/src/layout/TopBar/index.tsx b/src/layout/TopBar/index.tsx
index c615f1a..dc242b6 100644
--- a/src/layout/TopBar/index.tsx
+++ b/src/layout/TopBar/index.tsx
@@ -40,7 +40,7 @@ export const navigationItems: NavigationItems[] = [
 ];
 
 export const TopBar = () => {
-	const user = trpc.me.me.useQuery().data;
+	const account = trpc.me.me.useQuery().data;
 	const status = trpc.status.status.useQuery().data;
 	const router = useRouter();
 
@@ -79,9 +79,9 @@ export const TopBar = () => {
 					</TopBarItem>
 				))}
 				<TopBarItem padding={0}>
-					{user ? (
+					{account ? (
 						<DropdownButton
-							text={user.account?.name ?? "unknown"}
+							text={account.account?.name ?? "unknown"}
 							hasMenu={true}
 							list={[
 								{ text: "Account Management", url: "/account" },
diff --git a/src/layout/index.tsx b/src/layout/index.tsx
index c2cb247..c4a6a6a 100644
--- a/src/layout/index.tsx
+++ b/src/layout/index.tsx
@@ -4,6 +4,7 @@ import { Flex, Text, useBreakpointValue } from "@chakra-ui/react";
 import { TopBar } from "./TopBar";
 import { useColors } from "@hook/useColors";
 import { MobileTopBar } from "./TopBar/Mobile";
+import NextTopLoader from "nextjs-toploader";
 
 const Layout = ({ children }: PropsWithChildren) => {
 	const { bgColor } = useColors();
@@ -12,6 +13,7 @@ const Layout = ({ children }: PropsWithChildren) => {
 	return (
 		<>
 			<Head title="News" />
+			<NextTopLoader color="#c3a6d9" />
 			{TopBarComponent && <TopBarComponent />}
 			<Flex as="main" w={{ lg: "1050px", base: "100%" }} bgColor={bgColor} mt="2em" marginX={"auto"} padding="1em" rounded="md">
 				{children}
diff --git a/src/lib/session.ts b/src/lib/session.ts
index 646f153..08b0792 100644
--- a/src/lib/session.ts
+++ b/src/lib/session.ts
@@ -2,13 +2,11 @@ import { IronSessionOptions } from "iron-session";
 import { withIronSessionApiRoute, withIronSessionSsr } from "iron-session/next";
 import { GetServerSidePropsContext, GetServerSidePropsResult, NextApiHandler } from "next";
 import { dev } from "./config";
-import type { accounts } from "@prisma/client";
-
-export interface User extends accounts {}
+import { AccountWithPlayers } from "@shared/types/PrismaAccount";
 
 declare module "iron-session" {
 	interface IronSessionData {
-		user?: User;
+		account?: AccountWithPlayers;
 	}
 }
 
diff --git a/src/pages/account/changeemail.tsx b/src/pages/account/changeemail.tsx
index 1d32f83..bb1d32a 100644
--- a/src/pages/account/changeemail.tsx
+++ b/src/pages/account/changeemail.tsx
@@ -72,8 +72,8 @@ export default function ChangeEmail() {
 }
 
 export const getServerSideProps = withSessionSsr(async function ({ req }) {
-	const { user } = req.session;
-	if (!user) {
+	const { account } = req.session;
+	if (!account) {
 		return {
 			redirect: {
 				destination: `/account/login?redirect=${encodeURIComponent(req.url!)}`,
diff --git a/src/pages/account/changepassword.tsx b/src/pages/account/changepassword.tsx
index 1432a89..8a89bd6 100644
--- a/src/pages/account/changepassword.tsx
+++ b/src/pages/account/changepassword.tsx
@@ -92,8 +92,8 @@ export default function ChangePassword() {
 }
 
 export const getServerSideProps = withSessionSsr(function ({ req }) {
-	const { user } = req.session;
-	if (!user) {
+	const { account } = req.session;
+	if (!account) {
 		return {
 			redirect: {
 				destination: `/account/login?redirect=${encodeURIComponent(req.url!)}`,
diff --git a/src/pages/account/createcharacter.tsx b/src/pages/account/createcharacter.tsx
index 77ade82..0c86723 100644
--- a/src/pages/account/createcharacter.tsx
+++ b/src/pages/account/createcharacter.tsx
@@ -116,8 +116,8 @@ export default function CreateCharacter() {
 }
 
 export const getServerSideProps = withSessionSsr(async function ({ req }) {
-	const { user } = req.session;
-	if (!user) {
+	const { account } = req.session;
+	if (!account) {
 		return {
 			redirect: {
 				destination: `/account/login?redirect=${encodeURIComponent(req.url!)}`,
diff --git a/src/pages/account/deletecharacter.tsx b/src/pages/account/deletecharacter.tsx
index 97f11dd..4e9fdff 100644
--- a/src/pages/account/deletecharacter.tsx
+++ b/src/pages/account/deletecharacter.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import Panel from "@component/Panel";
-import { User, withSessionSsr } from "@lib/session";
+import { withSessionSsr } from "@lib/session";
 import { Select, Text, Container, VStack, Wrap } from "@chakra-ui/react";
 import { trpc } from "@util/trpc";
 import { useFormFeedback } from "@hook/useFormFeedback";
@@ -10,6 +10,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import TextInput from "@component/TextInput";
 import Button from "@component/Button";
 import { FormField } from "@component/FormField";
+import type { AccountWithPlayers } from "@shared/types/PrismaAccount";
 
 const schema = z.object({
 	name: z.string(),
@@ -17,10 +18,10 @@ const schema = z.object({
 });
 
 export interface DeleteCharacterProps {
-	user: User;
+	account: AccountWithPlayers;
 }
 
-export default function DeleteCharacter({ user }: DeleteCharacterProps) {
+export default function DeleteCharacter({ account }: DeleteCharacterProps) {
 	const {
 		register,
 		handleSubmit,
@@ -29,14 +30,10 @@ export default function DeleteCharacter({ user }: DeleteCharacterProps) {
 	} = useForm<z.infer<typeof schema>>({
 		resolver: zodResolver(schema),
 	});
-	const account = trpc.account.singleById.useQuery({ id: user.id });
+
 	const deleteCharacter = trpc.account.deleteCharacter.useMutation();
 	const { showResponse, handleResponse } = useFormFeedback();
 
-	if (account.isLoading) {
-		return <Panel isLoading={true} />;
-	}
-
 	const onSubmit: SubmitHandler<z.infer<typeof schema>> = async ({ name, password }) => {
 		handleResponse(async () => {
 			await deleteCharacter.mutateAsync({ name, password });
@@ -57,7 +54,7 @@ export default function DeleteCharacter({ user }: DeleteCharacterProps) {
 					<VStack spacing={5}>
 						<FormField key={"name"} error={errors.name?.message} name={"name"} label="Character Name">
 							<Select {...register("name")}>
-								{account.data?.players.map((character) => (
+								{account.players.map((character) => (
 									<option key={character.name} value={character.name}>
 										{character.name}
 									</option>
@@ -79,8 +76,8 @@ export default function DeleteCharacter({ user }: DeleteCharacterProps) {
 }
 
 export const getServerSideProps = withSessionSsr(async function ({ req }) {
-	const { user } = req.session;
-	if (!user) {
+	const { account } = req.session;
+	if (!account) {
 		return {
 			redirect: {
 				destination: `/account/login?redirect=${encodeURIComponent(req.url!)}`,
@@ -90,6 +87,6 @@ export const getServerSideProps = withSessionSsr(async function ({ req }) {
 	}
 
 	return {
-		props: { user },
+		props: { account },
 	};
 });
diff --git a/src/pages/account/index.tsx b/src/pages/account/index.tsx
index 808ff63..522fa4c 100644
--- a/src/pages/account/index.tsx
+++ b/src/pages/account/index.tsx
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react";
 import Panel from "@component/Panel";
 import Head from "@layout/Head";
 import { fetchApi } from "@lib/request";
-import { User, withSessionSsr } from "@lib/session";
+import { withSessionSsr } from "@lib/session";
 import Button from "@component/Button";
 import StripedTable from "@component/StrippedTable";
 import {
@@ -25,75 +25,23 @@ import {
 } from "@chakra-ui/react";
 import { timestampToDate, vocationIdToName } from "../../lib";
 import { Toggle } from "../../components/Toggle";
-import { trpc } from "@util/trpc";
+import { appRouter } from "src/server/routers/_app";
+import { createCallerFactory } from "src/server/trpc";
+import type { AccountWithPlayers } from "@shared/types/PrismaAccount";
 
 // TODO: use proper types
 
 export interface AccountProps {
-	user: User;
+	account: AccountWithPlayers;
 }
 
 // TODO: move qrcode to separate view
 
-export default function Account({ user }: AccountProps) {
-	const account = trpc.account.singleById.useQuery({ id: user.id });
-
-	const [is2FAEnabled, setIs2FAEnabled] = useState(false);
-	const [qrCodeDataURL, setQRCodeDataURL] = useState(null);
-	const [isOpenModal, setIsOpenModal] = useState(false);
-	const [error, setError] = useState<string | null>(null);
-	const [isLoading, setIsLoading] = useState(false);
-
-	useEffect(() => {
-		if (!account.data) {
-			return;
-		}
-		setIs2FAEnabled(account.data.twoFAEnabled);
-	}, [account]);
-
-	const handleToggle = async () => {
-		try {
-			setIsLoading(true);
-
-			const response = await fetchApi("POST", "/api/account/two-factor/enable-2fa", {
-				data: {
-					isTwoFA: !is2FAEnabled,
-				},
-			});
-
-			if (response.success) {
-				setIs2FAEnabled((prevState) => !prevState);
-
-				if (response.dataURL) {
-					showQRCode(response.dataURL);
-					setIsOpenModal(true);
-				} else {
-					console.error("QR code data is missing");
-				}
-			}
-		} catch (error) {
-			setError("Failed to toggle 2FA");
-			console.error("Failed to toggle 2FA", error);
-		} finally {
-			setIsLoading(false);
-		}
-	};
-
-	const showQRCode = (dataURL: any) => {
-		setQRCodeDataURL(dataURL);
-	};
-
-	if (account.isLoading) {
-		return (
-			<>
-				<Head title="Account Management" />
-				<Panel header="Account Management" isLoading={true}></Panel>
-			</>
-		);
+export default function Account({ account }: AccountProps) {
+	if (!account) {
+		return null;
 	}
 
-	const info = account.data!;
-
 	return (
 		<>
 			<Head title="Account Management" />
@@ -101,16 +49,16 @@ export default function Account({ user }: AccountProps) {
 				<Panel header="Informations">
 					<StripedTable
 						body={[
-							[{ text: "Account Name" }, { component: <Text>{info.name}</Text> }],
-							[{ text: "E-mail Address" }, { text: info.email }],
+							[{ text: "Account Name" }, { component: <Text>{account.name}</Text> }],
+							[{ text: "E-mail Address" }, { text: account.email }],
 							[
 								{ text: "Creation Date" },
 								{
-									text: info.creation > 0 ? timestampToDate(info.creation) : "Unknown",
+									text: account.creation > 0 ? timestampToDate(account.creation) : "Unknown",
 								},
 							],
 							//{ name: 'Last Login', value: '11/02/2021' },
-							[{ text: "Shop Coins" }, { text: info.coins }],
+							[{ text: "Shop Coins" }, { text: account.coins }],
 						]}
 					>
 						{/* '.(!$rec_key ? '
@@ -126,43 +74,11 @@ export default function Account({ user }: AccountProps) {
 				</Panel>
 
 				<Panel header="Actions">
-					{error && (
-						<Alert status="error" mt={4} mb={2}>
-							<AlertIcon />
-							{error}
-						</Alert>
-					)}
-
 					<Wrap>
 						<Button size="sm" value="Change Password" btnColorType="primary" href="/account/changepassword" />
 						<Button size="sm" value="Change Email" btnColorType="primary" href="/account/changeemail" />
 						<Button size="sm" value="Create Character" btnColorType="primary" href="/account/createcharacter" />
 						<Button size="sm" value="Delete Character" btnColorType="primary" href="/account/deletecharacter" />
-						{isLoading && <Spinner />}
-
-						<Box display="flex" alignItems="center" my={4}>
-							<Text mr={4}>Enable 2FA:</Text>
-							<Toggle isToggled={is2FAEnabled} onToggle={handleToggle} />
-						</Box>
-						{is2FAEnabled && qrCodeDataURL && (
-							<Modal isOpen={isOpenModal} onClose={() => setIsOpenModal(false)}>
-								<ModalOverlay />
-								<ModalContent>
-									<ModalHeader>Scan QR Code to enable 2FA</ModalHeader>
-									<ModalCloseButton />
-									<ModalBody>
-										<Center>
-											<Image src={qrCodeDataURL} alt="QR Code" boxSize="100px" />
-										</Center>
-									</ModalBody>
-									<ModalFooter>
-										<ChakraButton variant="ghost" onClick={() => setIsOpenModal(false)}>
-											Close
-										</ChakraButton>
-									</ModalFooter>
-								</ModalContent>
-							</Modal>
-						)}
 
 						{/* <Button
               value="Generate recovery key"
@@ -194,7 +110,7 @@ export default function Account({ user }: AccountProps) {
 							{ text: "Profession" },
 							// { text: 'Edit' }
 						]}
-						body={info.players.map((player: any) => [
+						body={account.players.map((player: any) => [
 							{ href: `/character/${player.name}`, text: player.name },
 							{ text: player.level },
 							{ text: vocationIdToName[player.vocation] },
@@ -205,16 +121,16 @@ export default function Account({ user }: AccountProps) {
 							//   href: `/account/editcharacter/${player.name}`,
 							// },
 						])}
-					></StripedTable>
+					/>
 				</Panel>
 			</Panel>
 		</>
 	);
 }
 
-export const getServerSideProps = withSessionSsr(async function ({ req }) {
-	const { user } = req.session;
-	if (!user) {
+export const getServerSideProps = withSessionSsr(async function ({ req, res }) {
+	const { account: sessionAcc } = req.session;
+	if (!sessionAcc) {
 		return {
 			redirect: {
 				destination: `/account/login?redirect=${encodeURIComponent(req.url!)}`,
@@ -223,7 +139,19 @@ export const getServerSideProps = withSessionSsr(async function ({ req }) {
 		};
 	}
 
+	const trpc = createCallerFactory(appRouter)({ req: req as any, res: res as any, session: req.session });
+
+	const account = await trpc.account.singleById({ id: sessionAcc.id });
+	if (!account) {
+		return {
+			redirect: {
+				destination: `/account/logout`,
+				permanent: false,
+			},
+		};
+	}
+
 	return {
-		props: { user },
+		props: { account },
 	};
 });
diff --git a/src/pages/account/login.tsx b/src/pages/account/login.tsx
index efa040d..85dd15e 100644
--- a/src/pages/account/login.tsx
+++ b/src/pages/account/login.tsx
@@ -92,8 +92,8 @@ export default function Login() {
 }
 
 export const getServerSideProps = withSessionSsr(async function ({ req }) {
-	const { user } = req.session;
-	if (user) {
+	const { account } = req.session;
+	if (account) {
 		return {
 			redirect: {
 				destination: "/account",
diff --git a/src/pages/account/register.tsx b/src/pages/account/register.tsx
index 46782e1..fb46a4e 100644
--- a/src/pages/account/register.tsx
+++ b/src/pages/account/register.tsx
@@ -105,8 +105,8 @@ export default function Register() {
 }
 
 export const getServerSideProps = withSessionSsr(async function ({ req }) {
-	const { user } = req.session;
-	if (user) {
+	const { account } = req.session;
+	if (account) {
 		return {
 			redirect: {
 				destination: "/account",
diff --git a/src/pages/admin/createnews.tsx b/src/pages/admin/createnews.tsx
index e0730a4..3c1f5ad 100644
--- a/src/pages/admin/createnews.tsx
+++ b/src/pages/admin/createnews.tsx
@@ -104,8 +104,8 @@ export default function CreateNews({ user }: any) {
 }
 
 export const getServerSideProps = withSessionSsr(async function ({ req }) {
-	const { user } = req.session;
-	if (!user) {
+	const { account } = req.session;
+	if (!account) {
 		return {
 			redirect: {
 				destination: "/account/login",
@@ -115,6 +115,6 @@ export const getServerSideProps = withSessionSsr(async function ({ req }) {
 	}
 
 	return {
-		props: { user },
+		props: { account },
 	};
 });
diff --git a/src/pages/admin/editNews/[id].tsx b/src/pages/admin/editNews/[id].tsx
index 2a8ab26..2b8e407 100644
--- a/src/pages/admin/editNews/[id].tsx
+++ b/src/pages/admin/editNews/[id].tsx
@@ -81,8 +81,8 @@ function EditNews() {
 }
 
 export const getServerSideProps = withSessionSsr(async function ({ req }) {
-	const { user } = req.session;
-	if (!user) {
+	const { account } = req.session;
+	if (!account) {
 		return {
 			redirect: {
 				destination: "/account/login",
@@ -92,7 +92,7 @@ export const getServerSideProps = withSessionSsr(async function ({ req }) {
 	}
 
 	return {
-		props: { user },
+		props: { account },
 	};
 });
 
diff --git a/src/pages/admin/index.tsx b/src/pages/admin/index.tsx
index 255d3fd..77717aa 100644
--- a/src/pages/admin/index.tsx
+++ b/src/pages/admin/index.tsx
@@ -65,8 +65,8 @@ function AdminPanel() {
 }
 
 export const getServerSideProps = withSessionSsr(async function ({ req }) {
-	const { user } = req.session;
-	if (!user) {
+	const { account } = req.session;
+	if (!account) {
 		return {
 			redirect: {
 				destination: "/account/login",
diff --git a/src/pages/community/guilds.tsx b/src/pages/community/guilds.tsx
index 6ee8d64..3ca2ad3 100644
--- a/src/pages/community/guilds.tsx
+++ b/src/pages/community/guilds.tsx
@@ -215,8 +215,8 @@ export default function Guilds({ user }: any) {
 }
 
 export const getServerSideProps = withSessionSsr(async function ({ req }) {
-	const { user } = req.session;
-	if (!user) {
+	const { account } = req.session;
+	if (!account) {
 		return {
 			redirect: {
 				destination: "/account/login",
@@ -226,6 +226,6 @@ export const getServerSideProps = withSessionSsr(async function ({ req }) {
 	}
 
 	return {
-		props: { user },
+		props: { account },
 	};
 });
diff --git a/src/pages/community/guilds/[name].tsx b/src/pages/community/guilds/[name].tsx
index 923eea8..d1c9b13 100644
--- a/src/pages/community/guilds/[name].tsx
+++ b/src/pages/community/guilds/[name].tsx
@@ -528,8 +528,8 @@ export default function Guild({ user }: any) {
 }
 
 export const getServerSideProps = withSessionSsr(async function ({ req }) {
-	const { user } = req.session;
-	if (!user) {
+	const { account } = req.session;
+	if (!account) {
 		return {
 			redirect: {
 				destination: "/account/login",
@@ -539,6 +539,6 @@ export const getServerSideProps = withSessionSsr(async function ({ req }) {
 	}
 
 	return {
-		props: { user },
+		props: { account },
 	};
 });
diff --git a/src/pages/community/houses.tsx b/src/pages/community/houses.tsx
index 8ad0080..4c89cf3 100644
--- a/src/pages/community/houses.tsx
+++ b/src/pages/community/houses.tsx
@@ -169,8 +169,8 @@ export default function HousePage({ user }: any) {
 }
 
 export const getServerSideProps = withSessionSsr(async function ({ req }) {
-	const { user } = req.session;
-	if (!user) {
+	const { account } = req.session;
+	if (!account) {
 		return {
 			redirect: {
 				destination: "/account/login",
@@ -180,6 +180,6 @@ export const getServerSideProps = withSessionSsr(async function ({ req }) {
 	}
 
 	return {
-		props: { user },
+		props: { account },
 	};
 });
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index f9155ba..1bdfb39 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -10,7 +10,7 @@ export default function Index() {
 	// TODO: paginate?
 
 	return (
-		<Panel padding={0} flexDir="column" gap="10px">
+		<Panel header="News" padding={0} flexDir="column" borderWidth={0}>
 			{news.data?.map((post) => (
 				<NewsPanel borderRadius="none" key={`news-${post.id}`} header={post.title} date={post.createdAt}>
 					<div dangerouslySetInnerHTML={{ __html: sanitize(post.content) }} />
diff --git a/src/prisma/schema.prisma b/src/prisma/schema.prisma
index e49d0f1..9b97ea1 100644
--- a/src/prisma/schema.prisma
+++ b/src/prisma/schema.prisma
@@ -1,5 +1,6 @@
 generator client {
-    provider = "prisma-client-js"
+    provider        = "prisma-client-js"
+    previewFeatures = ["omitApi"]
 }
 
 datasource db {
diff --git a/src/server/routers/account.ts b/src/server/routers/account.ts
index 2e467fb..5cbe4fb 100644
--- a/src/server/routers/account.ts
+++ b/src/server/routers/account.ts
@@ -3,23 +3,12 @@ import { procedure, authProcedure, router } from "../trpc";
 import prisma from "../../prisma";
 import { sha1Encrypt } from "@lib/crypt";
 import { TRPCError } from "@trpc/server";
+import { accountWithPlayers } from "@shared/types/PrismaAccount";
 
 //TODO: accept query parameters to pull only required data
 //TODO: guard some these endpoints with authentication
 
 export const accountRouter = router({
-	singleById: procedure.input(z.object({ id: z.number() })).query(async ({ input }) => {
-		const account = await prisma.accounts.findFirst({
-			where: {
-				id: input.id,
-			},
-			include: {
-				players: { select: { id: true, name: true, level: true, vocation: true } },
-			},
-		});
-
-		return account;
-	}),
 	create: procedure
 		.input(
 			z.object({
@@ -59,10 +48,11 @@ export const accountRouter = router({
 			return account;
 		}),
 	login: procedure.input(z.object({ name: z.string(), password: z.string(), twoFAToken: z.string().optional() })).mutation(async ({ input, ctx }) => {
-		const { name, password, twoFAToken } = input;
+		const { name, password } = input;
 		const { session, req } = ctx;
 
 		const account = await prisma.accounts.findFirst({
+			...accountWithPlayers,
 			where: {
 				name,
 				password: await sha1Encrypt(password),
@@ -73,25 +63,35 @@ export const accountRouter = router({
 			throw new Error("Wrong credentials.");
 		}
 
-		// if (account.twoFAEnabled) {
-		// 	const verified = speakeasy.totp.verify({
-		// 		secret: String(account.twoFASecret),
-		// 		encoding: "base32",
-		// 		token: twoFAToken,
-		// 		window: 2,
-		// 	});
+		session.account = account;
+		await req.session.save();
 
-		// 	if (!verified) {
-		// 		return { success: false, message: "Wrong 2FA token." };
-		// 	}
-		// }
+		return account;
+	}),
+	singleById: authProcedure.input(z.object({ id: z.number() })).query(async ({ ctx, input }) => {
+		if (ctx.session.account?.id !== input.id) {
+			throw new TRPCError({ code: "FORBIDDEN", message: "Forbidden" });
+		}
 
-		session.user = account;
-		await req.session.save();
+		const account = await prisma.accounts.findFirst({
+			select: {
+				id: true,
+				name: true,
+				email: true,
+				type: true,
+				coins: true,
+				premium_ends_at: true,
+				creation: true,
+				players: { select: { id: true, name: true, level: true, vocation: true } },
+			},
+			where: {
+				id: input.id,
+			},
+		});
 
 		return account;
 	}),
-	logout: procedure.mutation(async ({ ctx }) => {
+	logout: authProcedure.mutation(async ({ ctx }) => {
 		ctx.session.destroy();
 	}),
 	deleteCharacter: authProcedure.input(z.object({ name: z.string(), password: z.string() })).mutation(async ({ input, ctx }) => {
@@ -100,7 +100,7 @@ export const accountRouter = router({
 
 		const account = await prisma.accounts.findFirst({
 			where: {
-				id: session.user!.id,
+				id: session.account!.id,
 				password: await sha1Encrypt(password),
 			},
 			include: {
@@ -146,7 +146,7 @@ export const accountRouter = router({
 			player = await prisma.players.create({
 				data: {
 					name,
-					account_id: ctx.session.user!.id,
+					account_id: ctx.session.account!.id,
 					vocation,
 					sex,
 				},
@@ -167,7 +167,7 @@ export const accountRouter = router({
 
 			const account = await prisma.accounts.findFirst({
 				where: {
-					id: session.user!.id,
+					id: session.account!.id,
 					password: await sha1Encrypt(password),
 				},
 			});
@@ -198,7 +198,7 @@ export const accountRouter = router({
 
 			const account = await prisma.accounts.findFirst({
 				where: {
-					id: session.user!.id,
+					id: session.account!.id,
 					password: await sha1Encrypt(password),
 				},
 			});
diff --git a/src/server/routers/me.ts b/src/server/routers/me.ts
index 0d6589e..08813dd 100644
--- a/src/server/routers/me.ts
+++ b/src/server/routers/me.ts
@@ -5,8 +5,8 @@ export const meRouter = router({
 		const { session } = ctx;
 
 		return {
-			isLoggedIn: !!session.user,
-			account: session.user,
+			isLoggedIn: !!session.account,
+			account: session.account,
 		};
 	}),
 });
diff --git a/src/server/trpc.ts b/src/server/trpc.ts
index e1ef0d6..b8a6ef7 100644
--- a/src/server/trpc.ts
+++ b/src/server/trpc.ts
@@ -5,16 +5,26 @@ import { Context } from "./context";
 // For instance, the use of a t variable
 // is common in i18n libraries.
 const t = initTRPC.context<Context>().create();
+
 // Base router and procedure helpers
 export const router = t.router;
 export const procedure = t.procedure;
 export const middleware = t.middleware;
+export const createCallerFactory = t.createCallerFactory;
 
 export const authProcedure = t.procedure.use(
 	middleware(async ({ ctx, next }) => {
-		if (!ctx.session.user) {
+		if (!ctx.session.account) {
 			throw new TRPCError({ code: "UNAUTHORIZED", message: "Unauthorized" });
 		}
 		return next();
 	}),
 );
+export const adminProcedure = t.procedure.use(
+	middleware(async ({ ctx, next }) => {
+		if (!ctx.session.account || ctx.session.account.type !== 5) {
+			throw new TRPCError({ code: "FORBIDDEN", message: "Forbidden" });
+		}
+		return next();
+	}),
+);
diff --git a/src/shared/types/PrismaAccount.ts b/src/shared/types/PrismaAccount.ts
new file mode 100644
index 0000000..2108ad6
--- /dev/null
+++ b/src/shared/types/PrismaAccount.ts
@@ -0,0 +1,16 @@
+import { Prisma } from "@prisma/client";
+
+export const accountWithPlayers = Prisma.validator<Prisma.accountsDefaultArgs>()({
+	select: {
+		id: true,
+		name: true,
+		email: true,
+		type: true,
+		coins: true,
+		premium_ends_at: true,
+		creation: true,
+		players: { select: { id: true, name: true, level: true, vocation: true } },
+	},
+});
+
+export type AccountWithPlayers = Prisma.accountsGetPayload<typeof accountWithPlayers>;
diff --git a/src/utils/trpc.ts b/src/utils/trpc.ts
index e1c902a..e265131 100644
--- a/src/utils/trpc.ts
+++ b/src/utils/trpc.ts
@@ -17,27 +17,41 @@ function getBaseUrl() {
 }
 
 export const trpc = createTRPCNext<AppRouter>({
+	ssr: true,
 	config(opts) {
+		const { ctx } = opts;
+		if (typeof window !== "undefined") {
+			// during client requests
+			return {
+				links: [
+					httpBatchLink({
+						url: "/api/trpc",
+					}),
+				],
+			};
+		}
+
 		return {
 			links: [
 				httpBatchLink({
-					/**
-					 * If you want to use SSR, you need to use the server's full URL
-					 * @see https://trpc.io/docs/v11/ssr
-					 **/
+					// The server needs to know your app's full url
 					url: `${getBaseUrl()}/api/trpc`,
-					// You can pass any HTTP headers you wish here
-					async headers() {
+					/**
+					 * Set custom request headers on every request from tRPC
+					 * @see https://trpc.io/docs/v10/header
+					 */
+					headers() {
+						if (!ctx?.req?.headers) {
+							return {};
+						}
+						// To use SSR properly, you need to forward client headers to the server
+						// This is so you can pass through things like cookies when we're server-side rendering
 						return {
-							// authorization: getAuthCookie(),
+							cookie: ctx.req.headers.cookie,
 						};
 					},
 				}),
 			],
 		};
 	},
-	/**
-	 * @see https://trpc.io/docs/v11/ssr
-	 **/
-	ssr: false,
 });