diff --git a/src/pages/account/createcharacter.tsx b/src/pages/account/createcharacter.tsx
index 0c86723..5befccd 100644
--- a/src/pages/account/createcharacter.tsx
+++ b/src/pages/account/createcharacter.tsx
@@ -1,18 +1,17 @@
-import React from "react";
-import Panel from "../../components/Panel";
-import { withSessionSsr } from "../../lib/session";
-import { Select, Text, Container, VStack, Wrap } from "@chakra-ui/react";
+import { withSessionSsr } from "@lib/session";
+import { Select, Text, VStack } from "@chakra-ui/react";
 import TextInput from "@component/TextInput";
 import Button from "@component/Button";
 import { FormField } from "@component/FormField";
 import { z } from "zod";
-import { useForm } from "react-hook-form";
+import { useForm, SubmitHandler } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { SubmitHandler } from "react-hook-form";
-import { Vocation } from "@shared/enums/Vocation";
+import { getVocationNames, getVocationByName } from "@shared/enums/Vocation";
 import { trpc } from "@util/trpc";
 import { useFormFeedback } from "@hook/useFormFeedback";
-import { Sex } from "@shared/enums/Sex";
+import { getSexNames, getSexByName } from "@shared/enums/Sex";
+import { Content } from "@component/Content";
+import { useRouter } from "next/router";
 
 const bannedSequences = ["tutor", "cancer", "suck", "sux", "fuck"];
 const bannedWords = ["gm", "cm", "god"];
@@ -49,8 +48,8 @@ const schema = z.object({
 			},
 			{ message: "Contains illegal words" },
 		),
-	vocation: z.nativeEnum(Vocation),
-	sex: z.nativeEnum(Sex),
+	vocation: z.enum(getVocationNames() as any).transform((val) => getVocationByName(val)),
+	sex: z.enum(getSexNames() as any).transform((val) => getSexByName(val)),
 });
 
 export default function CreateCharacter() {
@@ -64,32 +63,35 @@ export default function CreateCharacter() {
 	});
 	const createCharacter = trpc.account.createCharacter.useMutation();
 	const { handleResponse, showResponse } = useFormFeedback();
+	const router = useRouter();
 
 	const onSubmit: SubmitHandler<z.infer<typeof schema>> = async ({ name, vocation, sex }) => {
 		handleResponse(async () => {
 			await createCharacter.mutateAsync({ name, vocation, sex });
 			showResponse("Character created.", "success");
+			router.push("/account");
 		});
 
 		reset();
 	};
 
 	return (
-		<Panel header="Create Character">
-			<Text align="center" margin="10px">
-				Please choose a name, vocation and sex for your character. <br />
-				In any case the name must not violate the naming conventions stated in the Rules or your character might get deleted or name locked.
-			</Text>
-			<form onSubmit={handleSubmit(onSubmit)}>
-				<Container alignContent={"center"} padding={2}>
-					<VStack spacing={5}>
+		<Content>
+			<Content.Header>Create Character</Content.Header>
+			<Content.Body>
+				<Text align="center">
+					Please choose a name, vocation and sex for your character. <br />
+					In any case the name must not violate the naming conventions stated in the Rules or your character might get deleted or name locked.
+				</Text>
+				<form onSubmit={handleSubmit(onSubmit)}>
+					<VStack spacing={10}>
 						<FormField key={"name"} error={errors.name?.message} name={"name"} label={"Name"}>
 							<TextInput type="name" {...register("name")} />
 						</FormField>
 						<FormField key={"vocation"} error={errors.vocation?.message} name={"vocation"} label="Vocation">
 							<Select {...register("vocation")}>
-								{Object.entries(Vocation).map(([key, value]) => (
-									<option key={key} value={value}>
+								{getVocationNames().map((key) => (
+									<option key={key} value={key}>
 										{key}
 									</option>
 								))}
@@ -97,21 +99,27 @@ export default function CreateCharacter() {
 						</FormField>
 						<FormField key={"sex"} error={errors.sex?.message} name={"sex"} label="Sex">
 							<Select {...register("sex")}>
-								{Object.entries(Sex).map(([key, value]) => (
-									<option key={key} value={value}>
+								{getSexNames().map((key) => (
+									<option key={key} value={key}>
 										{key}
 									</option>
 								))}
 							</Select>
 						</FormField>
-						<Wrap spacing={2} padding="10px">
-							<Button isLoading={isSubmitting} isActive={!isValid} loadingText="Submitting" type="submit" value="Submit" btnColorType="primary" />
-							<Button value="Back" btnColorType="danger" href="/account" />
-						</Wrap>
+						<Button
+							width="100%"
+							isLoading={isSubmitting}
+							isActive={!isValid}
+							loadingText="Submitting"
+							type="submit"
+							value="Submit"
+							btnColorType="primary"
+						/>
+						<Button width="100%" value="Back" btnColorType="danger" href="/account" />
 					</VStack>
-				</Container>
-			</form>
-		</Panel>
+				</form>
+			</Content.Body>
+		</Content>
 	);
 }
 
diff --git a/src/pages/account/index.tsx b/src/pages/account/index.tsx
index 2f5a5b6..a57d492 100644
--- a/src/pages/account/index.tsx
+++ b/src/pages/account/index.tsx
@@ -8,13 +8,14 @@ import { timestampToDate, vocationIdToName } from "../../lib";
 import { appRouter } from "src/server/routers/_app";
 import { createCallerFactory } from "src/server/trpc";
 import type { AccountWithPlayers } from "@shared/types/PrismaAccount";
-
-// TODO: use proper types
+import { Content } from "@component/Content";
 
 export interface AccountProps {
 	account: AccountWithPlayers;
 }
 
+// TODO: refactor this view, because its really ugly
+
 // TODO: move qrcode to separate view
 
 export default function Account({ account }: AccountProps) {
@@ -25,23 +26,25 @@ export default function Account({ account }: AccountProps) {
 	return (
 		<>
 			<Head title="Account Management" />
-			<Panel header="Account Management">
-				<Panel header="Informations">
-					<StripedTable
-						body={[
-							[{ text: "Account Name" }, { component: <Text>{account.name}</Text> }],
-							[{ text: "E-mail Address" }, { text: account.email }],
-							[
-								{ text: "Creation Date" },
-								{
-									text: account.creation > 0 ? timestampToDate(account.creation) : "Unknown",
-								},
-							],
-							//{ name: 'Last Login', value: '11/02/2021' },
-							[{ text: "Shop Coins" }, { text: account.coins }],
-						]}
-					>
-						{/* '.(!$rec_key ? '
+			<Content>
+				<Content.Header>Account Management</Content.Header>
+				<Content.Body maxW="100%">
+					<Panel header="Informations">
+						<StripedTable
+							body={[
+								[{ text: "Account Name" }, { component: <Text>{account.name}</Text> }],
+								[{ text: "E-mail Address" }, { text: account.email }],
+								[
+									{ text: "Creation Date" },
+									{
+										text: account.creation > 0 ? timestampToDate(account.creation) : "Unknown",
+									},
+								],
+								//{ name: 'Last Login', value: '11/02/2021' },
+								[{ text: "Shop Coins" }, { text: account.coins }],
+							]}
+						>
+							{/* '.(!$rec_key ? '
                 <a
                   href="?view=account&action=generatekey"
                   className="btn btn-primary btn-sm"
@@ -49,27 +52,27 @@ export default function Account({ account }: AccountProps) {
                   <i className="fa fa-key"></i> Generate Recovery Key
                 </a>
                 ' : '').' */}
-						{/* </td> */}
-					</StripedTable>
-				</Panel>
+							{/* </td> */}
+						</StripedTable>
+					</Panel>
 
-				<Panel header="Actions">
-					<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" />
+					<Panel header="Actions">
+						<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" />
 
-						{/* <Button
+							{/* <Button
               value="Generate recovery key"
               btnType="primary"
               href="/account/deletecharacter"
             /> */}
-					</Wrap>
-				</Panel>
+						</Wrap>
+					</Panel>
 
-				<Panel header="Characters">
-					{/* <div className="pull-right">
+					<Panel header="Characters">
+						{/* <div className="pull-right">
                       <Link
                         href={`/account/editcharacter/${player.name}`}
                         passHref
@@ -83,27 +86,28 @@ export default function Account({ account }: AccountProps) {
                       </Link>
                     </div> */}
 
-					<StripedTable
-						head={[
-							{ text: "Name" },
-							{ text: "Level" },
-							{ text: "Profession" },
-							// { text: 'Edit' }
-						]}
-						body={account.players.map((player: any) => [
-							{ href: `/character/${player.name}`, text: player.name },
-							{ text: player.level },
-							{ text: vocationIdToName[player.vocation] },
+						<StripedTable
+							head={[
+								{ text: "Name" },
+								{ text: "Level" },
+								{ text: "Profession" },
+								// { text: 'Edit' }
+							]}
+							body={account.players.map((player: any) => [
+								{ href: `/character/${player.name}`, text: player.name },
+								{ text: player.level },
+								{ text: vocationIdToName[player.vocation] },
 
-							// {
-							//   type: 'button',
-							//   text: 'Edit',
-							//   href: `/account/editcharacter/${player.name}`,
-							// },
-						])}
-					/>
-				</Panel>
-			</Panel>
+								// {
+								//   type: 'button',
+								//   text: 'Edit',
+								//   href: `/account/editcharacter/${player.name}`,
+								// },
+							])}
+						/>
+					</Panel>
+				</Content.Body>
+			</Content>
 		</>
 	);
 }
diff --git a/src/pages/character/[name].tsx b/src/pages/character/[name].tsx
index d3e5d84..4cae501 100644
--- a/src/pages/character/[name].tsx
+++ b/src/pages/character/[name].tsx
@@ -5,111 +5,124 @@ import { useRouter } from "next/router";
 import StrippedTable from "src/components/StrippedTable";
 import Label from "src/components/Label";
 import { trpc } from "../../utils/trpc";
+import { Content } from "@component/Content";
+import Loader from "@component/Loader";
+
+// TODO: refactor this view, because its really ugly
 
 export default function Character() {
 	const router = useRouter();
 	const { name } = router.query;
 
-	const player = trpc.player.singleByName.useQuery({ name: String(name) });
-	const townId = player.data?.town_id;
-	const town = trpc.town.singleById.useQuery(
-		{ id: townId as number },
-		{
-			enabled: !!townId,
-		},
-	);
+	const characterData = trpc.player.singleByName.useQuery({ name: String(name) });
 
-	if (!player.isFetched || !town.isFetched) {
-		return <Panel header="Character Information" isLoading={true} />;
+	if (characterData.isLoading) {
+		return (
+			<Content>
+				<Content.Header>Character</Content.Header>
+				<Content.Body>
+					<Loader />
+				</Content.Body>
+			</Content>
+		);
 	}
 
-	if (!player.data) {
+	if (characterData.error) {
 		return (
-			<Panel header="Character Info">
-				<Label colorScheme="red">Character not found.</Label>
-			</Panel>
+			<Content>
+				<Content.Header>Character</Content.Header>
+				<Content.Body>
+					<Label colorScheme="red">{characterData.error.message}</Label>
+				</Content.Body>
+			</Content>
 		);
 	}
 
-	const lastLoginDate = player.data.lastlogin > 0 ? timestampToDate(player.data.lastlogin) : "Never logged in";
-	const isPremium = player.data.accounts.premium_ends_at >= Date.now();
+	const playerData = characterData.data.player;
+	const townData = characterData.data.town;
 
-	return (
-		<>
-			<Panel header="Character Information">
-				<StrippedTable
-					body={[
-						[{ text: "Name" }, { text: player.data.name }],
-						[{ text: "Level" }, { text: player.data.level }],
-						[{ text: "Sex" }, { text: player.data.sex == 1 ? "Male" : "Female" }],
-						[{ text: "Profession" }, { text: vocationIdToName[player.data.vocation] }],
-						...(town.data ? [[{ text: "Town" }, { text: town.data.name }]] : []),
-						// ...(player.data.guilds.length > 0
-						// 	? [
-						// 			{
-						// 				text: "Guild",
-						// 			},
-						// 			{
-						// 				text: player.data.guilds[0].name,
-						// 			},
-						// 		]
-						// 	: []),
-						[{ text: "Last Login" }, { text: lastLoginDate }],
-						// [
-						// 	{ text: "Online Time" },
-						// 	{
-						// 		text: player.data.onlinetime > 0 ? secondsToTime(player.data.onlinetime) : "Never logged in",
-						// 	},
-						// ],
-					]}
-				/>
-			</Panel>
+	const lastLoginDate = playerData.lastlogin > 0 ? timestampToDate(playerData.lastlogin) : "Never logged in";
+	const isPremium = playerData.accounts.premium_ends_at >= Date.now();
 
-			<Panel header="Account Information">
-				<StrippedTable
-					body={[
-						...(player.data.group_id > 1 ? [[{ text: "Position" }, { text: groupToName[player.data.group_id] }]] : []),
-						// [
-						// 	{ text: "Created" },
-						// 	{
-						// 		text: player.data.creation > 0 ? timestampToDate(player.data.creation) : "Unknown",
-						// 	},
-						// ],
-						[
-							{ text: "Account Status" },
-							{
-								text: `${isPremium ? "Premium" : "Free"} Account`,
-							},
-						],
-					]}
-				/>
-			</Panel>
+	return (
+		<Content>
+			<Content.Header>Character</Content.Header>
+			<Content.Body maxW="100%">
+				<Panel header="Character Information">
+					<StrippedTable
+						body={[
+							[{ text: "Name" }, { text: playerData.name }],
+							[{ text: "Level" }, { text: playerData.level }],
+							[{ text: "Sex" }, { text: playerData.sex == 1 ? "Male" : "Female" }],
+							[{ text: "Profession" }, { text: vocationIdToName[playerData.vocation] }],
+							...(townData ? [[{ text: "Town" }, { text: townData.name }]] : []),
+							// ...(playerData.guilds.length > 0
+							// 	? [
+							// 			{
+							// 				text: "Guild",
+							// 			},
+							// 			{
+							// 				text: playerData.guilds[0].name,
+							// 			},
+							// 		]
+							// 	: []),
+							[{ text: "Last Login" }, { text: lastLoginDate }],
+							// [
+							// 	{ text: "Online Time" },
+							// 	{
+							// 		text: playerData.onlinetime > 0 ? secondsToTime(playerData.onlinetime) : "Never logged in",
+							// 	},
+							// ],
+						]}
+					/>
+				</Panel>
 
-			{player.data.player_deaths.length > 0 && (
-				<Panel header="Deaths">
+				<Panel header="Account Information">
 					<StrippedTable
-						head={[{ text: "Date" }, { text: "Message" }]}
-						body={player.data.player_deaths.map((death) => [
-							{ text: timestampToDate(death.time) },
-							{ text: `Died at level ${death.level} by ${death.killed_by}` },
-						])}
+						body={[
+							...(playerData.group_id > 1 ? [[{ text: "Position" }, { text: groupToName[playerData.group_id] }]] : []),
+							// [
+							// 	{ text: "Created" },
+							// 	{
+							// 		text: playerData.creation > 0 ? timestampToDate(playerData.creation) : "Unknown",
+							// 	},
+							// ],
+							[
+								{ text: "Account Status" },
+								{
+									text: `${isPremium ? "Premium" : "Free"} Account`,
+								},
+							],
+						]}
 					/>
 				</Panel>
-			)}
 
-			{/* <span className="label label-danger">Deleted</span>  */}
+				{playerData.player_deaths.length > 0 && (
+					<Panel header="Deaths">
+						<StrippedTable
+							head={[{ text: "Date" }, { text: "Message" }]}
+							body={playerData.player_deaths.map((death) => [
+								{ text: timestampToDate(death.time) },
+								{ text: `Died at level ${death.level} by ${death.killed_by}` },
+							])}
+						/>
+					</Panel>
+				)}
 
-			<Panel header="Characters">
-				<StrippedTable
-					head={[{ text: "Name" }, { text: "Level" }, { text: "Profession" }, { text: "Status" }]}
-					body={player.data.accounts.players.map((player) => [
-						{ href: `/character/${player.name}`, text: player.name },
-						{ text: player.level },
-						{ text: vocationIdToName[player.vocation] },
-						// { text: player.players_online ? "Online" : "Offline" },
-					])}
-				/>
-			</Panel>
-		</>
+				{/* <span className="label label-danger">Deleted</span>  */}
+
+				<Panel header="Characters">
+					<StrippedTable
+						head={[{ text: "Name" }, { text: "Level" }, { text: "Profession" }, { text: "Status" }]}
+						body={playerData.accounts.players.map((player) => [
+							{ href: `/character/${player.name}`, text: player.name },
+							{ text: player.level },
+							{ text: vocationIdToName[player.vocation] },
+							// { text: player.players_online ? "Online" : "Offline" },
+						])}
+					/>
+				</Panel>
+			</Content.Body>
+		</Content>
 	);
 }
diff --git a/src/pages/character/index.tsx b/src/pages/character/index.tsx
index 5024f30..6473cc5 100644
--- a/src/pages/character/index.tsx
+++ b/src/pages/character/index.tsx
@@ -1,11 +1,12 @@
-import Panel from "src/components/Panel";
 import { useRouter } from "next/router";
 import { SubmitHandler, useForm } from "react-hook-form";
 import { z } from "zod";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { Container, VStack } from "@chakra-ui/react";
+import { VStack } from "@chakra-ui/react";
 import TextInput from "@component/TextInput";
 import { FormField } from "@component/FormField";
+import { Content } from "@component/Content";
+import Button from "@component/Button";
 
 const schema = z.object({
 	name: z.string(),
@@ -15,7 +16,8 @@ export default function Character() {
 	const {
 		register,
 		handleSubmit,
-		formState: { errors },
+
+		formState: { errors, isValid, isSubmitting },
 	} = useForm<z.infer<typeof schema>>({
 		resolver: zodResolver(schema),
 	});
@@ -26,16 +28,26 @@ export default function Character() {
 	};
 
 	return (
-		<Panel header="Search Character">
-			<form onSubmit={handleSubmit(onSubmit)}>
-				<Container alignContent={"center"} padding={2}>
-					<VStack spacing={5}>
-						<FormField key={"name"} error={errors.name?.message} name="name" label="name">
-							<TextInput type="submit" {...register("name")} />
+		<Content>
+			<Content.Header>Find Character</Content.Header>
+			<Content.Body maxW="25em">
+				<form onSubmit={handleSubmit(onSubmit)}>
+					<VStack spacing={10}>
+						<FormField key="name" error={errors.name?.message} name="name" label="Name">
+							<TextInput type="text" {...register("name")} />
 						</FormField>
+						<Button
+							isLoading={isSubmitting}
+							width="100%"
+							isActive={!isValid}
+							loadingText="Submitting"
+							type="submit"
+							value="Search"
+							btnColorType="primary"
+						/>
 					</VStack>
-				</Container>
-			</form>
-		</Panel>
+				</form>
+			</Content.Body>
+		</Content>
 	);
 }
diff --git a/src/server/routers/player.ts b/src/server/routers/player.ts
index ae6fbc9..e538a74 100644
--- a/src/server/routers/player.ts
+++ b/src/server/routers/player.ts
@@ -1,6 +1,7 @@
 import { z } from "zod";
 import { procedure, router } from "../trpc";
 import prisma from "../../prisma";
+import { TRPCError } from "@trpc/server";
 
 export const playerRouter = router({
 	singleByName: procedure.input(z.object({ name: z.string() })).query(async ({ input }) => {
@@ -27,7 +28,19 @@ export const playerRouter = router({
 			},
 		});
 
-		return player;
+		if (!player) {
+			throw new TRPCError({ code: "NOT_FOUND", message: "Character not found" });
+		}
+
+		const town = await prisma.towns.findFirst({
+			where: { id: player.town_id },
+			select: { name: true },
+		});
+
+		return {
+			player,
+			town,
+		};
 	}),
 	online: procedure.query(async () => {
 		const players = await prisma.players_online.findMany({
diff --git a/src/shared/enums/Sex.ts b/src/shared/enums/Sex.ts
index d5c998d..4eacced 100644
--- a/src/shared/enums/Sex.ts
+++ b/src/shared/enums/Sex.ts
@@ -3,4 +3,12 @@ export enum Sex {
 	Male = 1,
 }
 
+export const getSexNames = () => {
+	return Object.keys(Sex).filter(([key]) => Number.isNaN(Number(key)));
+};
+
+export const getSexByName = (name: keyof typeof Sex) => {
+	return Sex[name] || Sex.Female;
+};
+
 export type SexType = keyof typeof Sex;
diff --git a/src/shared/enums/Vocation.ts b/src/shared/enums/Vocation.ts
index b737d3b..dd15928 100644
--- a/src/shared/enums/Vocation.ts
+++ b/src/shared/enums/Vocation.ts
@@ -6,6 +6,10 @@ export enum Vocation {
 	Knight = 4,
 }
 
+export const getVocationNames = () => {
+	return Object.keys(Vocation).filter(([key]) => Number.isNaN(Number(key)));
+};
+
 export type VocationType = keyof typeof Vocation;
 
 export const getVocationByName = (name: keyof typeof Vocation): Vocation => {