diff --git a/frontend/.env.example b/frontend/.env.example
index 40e5294d..5705a99f 100644
--- a/frontend/.env.example
+++ b/frontend/.env.example
@@ -1 +1,2 @@
-VITE_BACKEND_URL=http://localhost:3000/
\ No newline at end of file
+VITE_BACKEND_URL=http://localhost:3000/
+VITE_AUTHOR_NAME_MAX_LENGTH=12
diff --git a/frontend/src/components/avatar/Avatar.scss b/frontend/src/components/avatar/Avatar.scss
new file mode 100644
index 00000000..c87b1b74
--- /dev/null
+++ b/frontend/src/components/avatar/Avatar.scss
@@ -0,0 +1,8 @@
+.avatar {
+	border-radius: 50%;
+	filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.5));
+	height: 40px !important;
+	object-fit: cover;
+	pointer-events: none;
+	width: 40px !important;
+}
diff --git a/frontend/src/components/avatar/Avatar.tsx b/frontend/src/components/avatar/Avatar.tsx
new file mode 100644
index 00000000..96647770
--- /dev/null
+++ b/frontend/src/components/avatar/Avatar.tsx
@@ -0,0 +1,12 @@
+import "./Avatar.scss";
+import React from "react";
+
+export default function Avatar(props: { userId?: string }) {
+	return <img className={ "avatar" }
+				src={ "" }
+				alt={ "Avatar" }
+				onError={ ({ currentTarget }) => {
+					currentTarget.onerror = null; // prevents looping
+					currentTarget.src = "https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50";
+				} }/>
+}
diff --git a/frontend/src/components/button/Button.scss b/frontend/src/components/button/Button.scss
index e13ffa54..6de3423f 100644
--- a/frontend/src/components/button/Button.scss
+++ b/frontend/src/components/button/Button.scss
@@ -23,10 +23,6 @@
 		overflow: hidden;
 		position: relative;
 
-		* {
-			z-index: 10;
-		}
-
 		&::before {
 			animation: rotate 2s infinite linear;
 			background-color: transparent;
diff --git a/frontend/src/components/button/Button.tsx b/frontend/src/components/button/Button.tsx
index 11121e79..7e2257dd 100644
--- a/frontend/src/components/button/Button.tsx
+++ b/frontend/src/components/button/Button.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import "./Button.scss";
+import { animateBlob } from "../../def/cool-blobs";
 
 interface Props {
 	buttonStyle?: "primary" | "glass",
@@ -7,7 +8,8 @@ interface Props {
 	onClick?: () => Promise<void>,
 	children?: React.ReactNode,
 	disabled?: boolean,
-	placeIconRight?: boolean
+	placeIconRight?: boolean,
+	type?: "button" | "reset" | "submit"
 }
 
 /**
@@ -24,8 +26,11 @@ export default function Button(props: Props) {
 	
 	return (
 		<button className={ "btn btn-" + (props.buttonStyle ?? "glass") }
+				type={ props.type }
 				disabled={ props.disabled || isLoading }
-				onClick={ async () => {
+				onClick={ async (e) => {
+					animateBlob(e);
+					
 					if (!props.onClick) return;
 					if (isLoading) return;
 					
@@ -39,6 +44,8 @@ export default function Button(props: Props) {
 			<span>{ props.children }</span>
 			{ props.icon && props.placeIconRight && <i className={ isLoading ? "fi fi-rr-spinner spin" : props.icon }
                                                        style={ { marginLeft: "var(--spacing)" } }/> }
+			
+			<span className={ "button-blob" }/>
 		</button>
 	);
 }
diff --git a/frontend/src/components/dropdown/Dropdown.scss b/frontend/src/components/dropdown/Dropdown.scss
index d0ae8a2e..8dd26581 100644
--- a/frontend/src/components/dropdown/Dropdown.scss
+++ b/frontend/src/components/dropdown/Dropdown.scss
@@ -98,6 +98,7 @@
 			border: none;
 			cursor: pointer;
 			display: flex;
+			gap: var(--spacing);
 			padding: var(--spacing);
 			width: 100%;
 
@@ -113,18 +114,12 @@
 			}
 
 			> i:first-child {
-				margin-inline-end: var(--spacing);
 				text-align: center;
 				width: 20px;
 			}
 
-			> i:last-child {
-				margin-inline-start: var(--spacing);
-			}
-
 			> span:first-of-type {
 				flex: 1;
-				padding-inline-end: calc(var(--spacing) * 2);
 			}
 
 			.shortcut {
diff --git a/frontend/src/components/dropdown/Dropdown.tsx b/frontend/src/components/dropdown/Dropdown.tsx
index 97c93fcb..88b9799f 100644
--- a/frontend/src/components/dropdown/Dropdown.tsx
+++ b/frontend/src/components/dropdown/Dropdown.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import "./Dropdown.scss";
+import { animateBlob } from "../../def/cool-blobs";
 
 interface Item {
 	label: string,
@@ -60,7 +61,9 @@ export default function Dropdown(props: {
 				{ item.header && <div className={ "dropdown-menu-header" }>{ item.header }</div> }
 				
 				<button className={ "dropdown-menu-item" }
-						onClick={ () => {
+						onClick={ (e) => {
+							animateBlob(e);
+							
 							setItems(items.map(i => {
 								return {
 									...i,
@@ -79,6 +82,8 @@ export default function Dropdown(props: {
 					
 					{ (item.items && item.items.length > 0) &&
                         <i className={ "fi fi-rr-angle-down" + (item.expanded ? " expanded" : "") }/> }
+					
+					<span className={ "button-blob" }/>
 				</button>
 				
 				{ item.expanded && item.items && item.items.length > 0 && renderItems(item.items, level + 1,
diff --git a/frontend/src/components/questionpreview/QuestionAnswer.tsx b/frontend/src/components/questionpreview/QuestionAnswer.tsx
new file mode 100644
index 00000000..7a1b0407
--- /dev/null
+++ b/frontend/src/components/questionpreview/QuestionAnswer.tsx
@@ -0,0 +1,68 @@
+import { Answer } from "../../def/Question";
+import React from "react";
+import Avatar from "../avatar/Avatar";
+import { useTranslation } from "react-i18next";
+
+/**
+ * Renders an answer to be displayed in QuestionView
+ * @param props holds the answer and an index
+ */
+export default function QuestionAnswer(props: { answer: Answer, index: number }) {
+	const { t } = useTranslation();
+	
+	return <div key={ props.index } className={ "container transparent question-answer" }>
+		<div className={ "question-answer-author" }
+			 style={ {
+				 paddingTop: props.answer.author.type === "ai" ? "var(--spacing)" : 0,
+				 paddingInline: props.answer.author.type === "ai" ? "var(--spacing)" : 0
+			 } }>
+			{ props.answer.author.type === "ai"
+				? <i className={ "fi fi-sr-brain" }
+					 style={ {
+						 fontSize: "2em",
+						 height: "auto",
+						 color: "var(--primary-color)",
+						 filter: "drop-shadow(0 0 5px rgba(0, 0, 0, 0.2))"
+					 } }/>
+				: <Avatar userId={ props.answer.author.id }/> }
+			
+			<p>
+				<span>{ props.answer.author.name }</span>
+				<span className={ "badge" }>{ props.answer.author.type.toUpperCase() }</span>
+			</p>
+			
+			<span className={ "caption" }>
+				{ t('dashboard.questionView.answer.creationDate', { answerCreationDate: props.answer.created }) }
+			</span>
+		</div>
+		
+		<div className={ "question-answer-text" }>
+			<div className={ "glass" + (props.answer.author.type === "ai" ? " glass-simp" : "") }>
+				<p>{ props.answer.content }</p>
+			</div>
+			
+			<div className={ "question-answer-actions" }>
+				<div
+					className={ "question-answer-actions-rate" + (props.answer.opinion === "like" ? " rating" : "") }>
+					<i className={ "fi fi-rr-social-network primary-icon" } tabIndex={ 0 }/>
+					<span className={ "question-figure" }>{ props.answer.likes }</span>
+					<span className={ "question-unit" }>{ t('dashboard.questionView.answer.likes') }</span>
+				</div>
+				
+				<div
+					className={ "question-answer-actions-rate" + (props.answer.opinion === "dislike" ? " rating" : "") }>
+					<i className={ "fi fi-rr-social-network flipY primary-icon" } tabIndex={ 0 }/>
+					<span className={ "question-figure" }>{ props.answer.dislikes }</span>
+					<span className={ "question-unit" }>{ t('dashboard.questionView.answer.dislikes') }</span>
+				</div>
+				
+				<div style={ { flex: 1 } }/>
+				
+				<button className={ "question-report" }>
+					<i className={ "fi fi-rr-flag" }/>
+					{ t('dashboard.questionView.answer.report') }
+				</button>
+			</div>
+		</div>
+	</div>
+}
diff --git a/frontend/src/components/questionpreview/QuestionPreview.tsx b/frontend/src/components/questionpreview/QuestionPreview.tsx
index 86331294..0ef13421 100644
--- a/frontend/src/components/questionpreview/QuestionPreview.tsx
+++ b/frontend/src/components/questionpreview/QuestionPreview.tsx
@@ -2,6 +2,7 @@ import "./QuestionPreview.scss";
 import React from "react";
 import { useNavigate } from "react-router-dom";
 import { Question } from "../../def/Question";
+import Avatar from "../avatar/Avatar";
 
 interface Props {
 	question: Question;
@@ -63,7 +64,7 @@ export default function QuestionPreview(props: Props) {
 		<div className={ "question-details-wrapper" }>
 			<div className={ "question-stats" }>
 				<div
-					className={ "question-stat" + (props.question.rating === "like" ? " rating" : "") }>
+					className={ "question-stat" + (props.question.opinion === "like" ? " rating" : "") }>
 					<i className={ "fi fi-rr-social-network primary-icon" }/>
 					<span
 						className={ "question-figure" }>{ props.question.likes.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") }</span>
@@ -71,7 +72,7 @@ export default function QuestionPreview(props: Props) {
 				</div>
 				
 				<div
-					className={ "question-stat" + (props.question.rating === "dislike" ? " rating" : "") }>
+					className={ "question-stat" + (props.question.opinion === "dislike" ? " rating" : "") }>
 					<i className={ "fi fi-rr-social-network primary-icon flipY" }/>
 					<span
 						className={ "question-figure" }>{ props.question.dislikes.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") }</span>
@@ -96,10 +97,10 @@ export default function QuestionPreview(props: Props) {
 			</div>
 			
 			<div className={ "author" }>
-				<img className={ "avatar" } src={ "https://www.w3schools.com/w3images/avatar2.png" } alt={ "Avatar" }/>
+				<Avatar userId={ props.question.author.id }/>
 				<p style={ { margin: 0, display: "flex", flexDirection: "column" } }>
 					<span className={ "caption" }>Asked by</span>
-					<span>{ props.question.author.name }</span>
+					<span>{ props.question.author.name.substring(0, import.meta.env.VITE_AUTHOR_NAME_MAX_LENGTH) }</span>
 				</p>
 			</div>
 		</div>
diff --git a/frontend/src/components/questionpreview/QuestionPreviewSkeleton.tsx b/frontend/src/components/questionpreview/QuestionPreviewSkeleton.tsx
index 23a6fb81..bd1a6001 100644
--- a/frontend/src/components/questionpreview/QuestionPreviewSkeleton.tsx
+++ b/frontend/src/components/questionpreview/QuestionPreviewSkeleton.tsx
@@ -5,47 +5,52 @@ import React from "react";
 /**
  * Renders a skeleton, based on QuestionPreview
  */
-export default function QuestionPreviewSkeleton() {
-	return <div className={ "container questions-question" } style={ { cursor: "auto" } }>
-		<div className={ "question" }>
-			<Skeleton containerClassName={ "tags" }/>
-			
-			<h2>
-				<Skeleton width={ 400 }/>
-			</h2>
-			
-			<Skeleton containerClassName={ "caption" } width={ 300 }/>
-		</div>
-		
-		<div className={ "question-details-wrapper" }>
-			<div className={ "question-stats" }>
-				<div className={ "question-stat" }>
-					<Skeleton width={ 80 } height={ 24 }/>
-				</div>
+export default function QuestionPreviewSkeleton(props: { count?: number }) {
+	const { count = 1 } = props;
+	const skeletonArray = Array.from({ length: count });
+	
+	return skeletonArray.map((_, i) => {
+		return <div className={ "container questions-question" } style={ { cursor: "auto" } } key={ i }>
+			<div className={ "question" }>
+				<Skeleton containerClassName={ "tags" }/>
 				
-				<div className={ "question-stat" }>
-					<Skeleton width={ 80 } height={ 24 }/>
-				</div>
+				<h2>
+					<Skeleton width={ 400 }/>
+				</h2>
+				
+				<Skeleton containerClassName={ "caption" } width={ 300 }/>
 			</div>
 			
-			<div className={ "question-stats" }>
-				<div className={ "question-stat" }>
-					<Skeleton width={ 80 } height={ 24 }/>
+			<div className={ "question-details-wrapper" }>
+				<div className={ "question-stats" }>
+					<div className={ "question-stat" }>
+						<Skeleton width={ 80 } height={ 24 }/>
+					</div>
+					
+					<div className={ "question-stat" }>
+						<Skeleton width={ 80 } height={ 24 }/>
+					</div>
 				</div>
 				
-				<div className={ "question-stat" }>
-					<Skeleton width={ 80 } height={ 24 }/>
+				<div className={ "question-stats" }>
+					<div className={ "question-stat" }>
+						<Skeleton width={ 80 } height={ 24 }/>
+					</div>
+					
+					<div className={ "question-stat" }>
+						<Skeleton width={ 80 } height={ 24 }/>
+					</div>
 				</div>
-			</div>
-			
-			<div className={ "author" }>
-				<Skeleton circle width={ 40 } height={ 40 }/>
 				
-				<p style={ { margin: 0, display: "flex", flexDirection: "column" } }>
-					<Skeleton width={ 80 } height={ 12 }/>
-					<Skeleton width={ 80 } height={ 20 }/>
-				</p>
+				<div className={ "author" }>
+					<Skeleton circle width={ 40 } height={ 40 }/>
+					
+					<p style={ { margin: 0, display: "flex", flexDirection: "column" } }>
+						<Skeleton width={ 80 } height={ 12 }/>
+						<Skeleton width={ 80 } height={ 20 }/>
+					</p>
+				</div>
 			</div>
 		</div>
-	</div>
+	})
 }
diff --git a/frontend/src/def/Question.d.ts b/frontend/src/def/Question.d.ts
index a59395c8..136bfd63 100644
--- a/frontend/src/def/Question.d.ts
+++ b/frontend/src/def/Question.d.ts
@@ -6,7 +6,7 @@ export interface Question {
 	tags: string[];
 	likes: number;
 	dislikes: number;
-	rating: "like" | "dislike" | "none";
+	opinion: "like" | "dislike" | "none";
 	answers: number;
 	created: string;
 	updated: string;
@@ -19,12 +19,12 @@ export interface Answer {
 	created: string;
 	likes: number;
 	dislikes: number;
-	rating: "like" | "dislike" | "none";
+	opinion: "like" | "dislike" | "none";
 	author: Author;
 }
 
 interface Author {
 	id: string;
 	name: string;
-	type: "user" | "pro" | "ai";
+	type: "guest" | "user" | "pro" | "admin" | "ai";
 }
diff --git a/frontend/src/def/cool-blobs.ts b/frontend/src/def/cool-blobs.ts
new file mode 100644
index 00000000..4d023e96
--- /dev/null
+++ b/frontend/src/def/cool-blobs.ts
@@ -0,0 +1,30 @@
+import React from "react";
+
+export const animateBlob = (e: React.MouseEvent) => {
+	const _blob = e.currentTarget.querySelector("span.button-blob");
+	if (!_blob) return;
+	let blob = _blob as HTMLElement;
+	
+	let buttonRect = e.currentTarget.getBoundingClientRect();
+	let docEl = document.documentElement;
+	let left = buttonRect.left + (window.pageXOffset || docEl.scrollLeft || 0);
+	
+	let x = e.clientX - left;
+	
+	const fromLeftLimit = 30;
+	const fromRightLimit = (buttonRect.width - fromLeftLimit);
+	let fromX = x < fromLeftLimit ? fromLeftLimit : x > fromRightLimit ? fromRightLimit : x;
+	
+	const toLeftLimit = 60;
+	const toRightLimit = (buttonRect.width - toLeftLimit);
+	let toX = x < toLeftLimit ? toLeftLimit : x > toRightLimit ? toRightLimit : x;
+	
+	if (blob.animate) blob.animate([
+		{ opacity: 1, width: "60px", height: "80%", top: "10%", transform: "translateX(calc(" + fromX + "px - 50%))" },
+		{ opacity: 0, width: "120px", height: "100%", top: 0, transform: "translateX(calc(" + toX + "px - 50%))" }
+	], {
+		duration: 400,
+		fill: "forwards",
+		easing: "ease"
+	});
+}
diff --git a/frontend/src/index.scss b/frontend/src/index.scss
index 8f153808..c0cb036c 100644
--- a/frontend/src/index.scss
+++ b/frontend/src/index.scss
@@ -95,15 +95,6 @@ code {
 	}
 }
 
-.avatar {
-	border-radius: 50%;
-	filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.5));
-	height: 40px !important;
-	object-fit: cover;
-	pointer-events: none;
-	width: 40px !important;
-}
-
 ::selection {
 	background-color: var(--primary-color);
 	color: var(--primary-color-contrast);
@@ -259,3 +250,23 @@ hr {
 		color: var(--primary-color-contrast);
 	}
 }
+
+*:has(> span.button-blob) {
+	position: relative;
+
+	* {
+		z-index: 10;
+	}
+
+	span.button-blob {
+		position: absolute;
+		height: 100%;
+		width: 60px;
+		top: 0;
+		left: 0;
+		border-radius: var(--border-radius);
+		background: var(--border-color);
+		z-index: 1;
+		opacity: 0;
+	}
+}
diff --git a/frontend/src/locales/en/translation.json b/frontend/src/locales/en/translation.json
index dfd8db2d..1a0eb7c9 100644
--- a/frontend/src/locales/en/translation.json
+++ b/frontend/src/locales/en/translation.json
@@ -90,6 +90,14 @@
 				}
 			},
 			"submit": "Post your Question"
+		},
+		"questionView": {
+			"answer": {
+				"creationDate": "replied {{answerCreationDate}}",
+				"likes": "likes",
+				"dislikes": "dislikes",
+				"report": "Report answer"
+			}
 		}
 	}
 }
diff --git a/frontend/src/pages/dashboard/Dashboard.scss b/frontend/src/pages/dashboard/Dashboard.scss
index defc6a4e..e6550a17 100644
--- a/frontend/src/pages/dashboard/Dashboard.scss
+++ b/frontend/src/pages/dashboard/Dashboard.scss
@@ -30,7 +30,7 @@
 			justify-content: center;
 		}
 
-		a {
+		a.navigate {
 			align-items: center;
 			border-radius: var(--border-radius) 0 0 var(--border-radius);
 			color: inherit;
diff --git a/frontend/src/pages/dashboard/Dashboard.tsx b/frontend/src/pages/dashboard/Dashboard.tsx
index 5900e40b..28b3c513 100644
--- a/frontend/src/pages/dashboard/Dashboard.tsx
+++ b/frontend/src/pages/dashboard/Dashboard.tsx
@@ -14,6 +14,8 @@ import Skeleton from "react-loading-skeleton";
 import Search from "../../components/search/Search";
 import { axiosError } from "../../def/axios-error";
 import { useAlert } from "react-alert";
+import Avatar from "../../components/avatar/Avatar";
+import { animateBlob } from "../../def/cool-blobs";
 
 // ory setup
 const basePath = "http://localhost:4000"
@@ -56,7 +58,7 @@ export default function Dashboard(props: Props) {
 			if (window.location.pathname.includes("/question")) {
 				let questionId = window.location.pathname.split("/question/")[1].substring(0, 36);
 				global.axios.get("question/" + questionId + "/title")
-					  .then(res => console.log(res))
+					  .then(res => setActiveQuestionName(res.data.title))
 					  .catch(err => axiosError(err, alert));
 			}
 		}
@@ -168,13 +170,7 @@ export default function Dashboard(props: Props) {
 			boxShadow: "var(--box-shadow)"
 		} }
 									   tabIndex={ 0 }>
-			<img className={ "avatar" }
-				 src={ session !== undefined ? "https://benniloidl.de/static/media/me.6c5597f7d72f68a1e83c.jpeg" : "" }
-				 alt={ "Avatar" }
-				 onError={ ({ currentTarget }) => {
-					 currentTarget.onerror = null; // prevents looping
-					 currentTarget.src = "https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50";
-				 } }/>
+			<Avatar userId={ session?.identity?.id }/>
 		</div> }
 						 items={ [
 							 {
@@ -261,14 +257,21 @@ export default function Dashboard(props: Props) {
 	
 	return <div className={ "dashboard" }>
 		<nav>
-			<div style={ { position: "relative" } }>
-				<button className={ "btn btn-primary" }
-						style={ { outlineColor: "var(--primary-color-contrast)" } }
-						onClick={ () => navigate("/") }>
+			<div style={ { position: "relative", overflow: "hidden" } }>
+				<NavLink to={ "/" }
+						 style={ {
+							 maxHeight: "80%",
+							 maxWidth: "80%",
+							 outlineColor: "var(--primary-color-contrast)",
+							 borderRadius: "var(--border-radius)",
+							 display: "grid",
+							 placeItems: "center"
+						 } }>
 					<img src={ logoTodoMakeStatic } alt={ "Logo" }
-						 height={ "100%" } width={ "100%" }
+						 height={ "80%" } width={ "80%" }
 						 style={ { objectFit: "contain" } }/>
-				</button>
+				</NavLink>
+				
 				<i className={ "fi fi-rr-circle-xmark toggle-nav" }
 				   style={ {
 					   fontSize: "1.5em",
@@ -294,12 +297,14 @@ export default function Dashboard(props: Props) {
 			</div>
 			
 			{ window.location.pathname.includes("/question") && <>
-                <NavLink to={ "question/1" }>
+                <NavLink to={ window.location.pathname } className={ "active navigate" }
+                         onClick={ (e) => animateBlob(e) }>
                     <i className={ "fi fi-sr-question-square" }/>
                     <p style={ { display: "flex", flexDirection: "column" } }>
                         <span className={ "caption" }>{ t('dashboard.nav.question.browsing') }</span>
                         <span>{ activeQuestionName ?? <Skeleton/> }</span>
                     </p>
+                    <span className={ "button-blob" }/>
                 </NavLink>
                 
                 <div style={ { paddingInline: "var(--spacing)" } }>
@@ -307,46 +312,53 @@ export default function Dashboard(props: Props) {
                 </div>
             </> }
 			
-			<NavLink to={ "trending" }>
+			<NavLink to={ "trending" } className={ "navigate" } onClick={ (e) => animateBlob(e) }>
 				{ ({ isActive }) => <>
 					<i className={ "fi fi-" + (isActive ? "s" : "r") + "r-file-chart-line" }/>
-					{ t('dashboard.nav.trending') }
+					<span>{ t('dashboard.nav.trending') }</span>
+					<span className={ "button-blob" }/>
 				</> }
 			</NavLink>
-			<NavLink to={ "new" }>
+			<NavLink to={ "new" } className={ "navigate" } onClick={ (e) => animateBlob(e) }>
 				{ ({ isActive }) => <>
 					<i className={ "fi fi-" + (isActive ? "s" : "r") + "r-edit" }/>
-					{ t('dashboard.nav.question.create') }
+					<span>{ t('dashboard.nav.question.create') }</span>
+					<span className={ "button-blob" }/>
 				</> }
 			</NavLink>
-			<NavLink to={ "activity" }>
+			<NavLink to={ "activity" } className={ "navigate" } onClick={ (e) => animateBlob(e) }>
 				{ ({ isActive }) => <>
 					<i className={ "fi fi-" + (isActive ? "s" : "r") + "r-rectangle-vertical-history" }/>
-					{ t('dashboard.nav.activity') }
+					<span>{ t('dashboard.nav.activity') }</span>
+					<span className={ "button-blob" }/>
 				</> }
 			</NavLink>
-			<NavLink to={ "my" }>
+			<NavLink to={ "my" } className={ "navigate" } onClick={ (e) => animateBlob(e) }>
 				{ ({ isActive }) => <>
 					<i className={ "fi fi-" + (isActive ? "s" : "r") + "r-rectangle-list" }/>
-					{ t('dashboard.nav.my') }
+					<span>{ t('dashboard.nav.my') }</span>
+					<span className={ "button-blob" }/>
 				</> }
 			</NavLink>
-			<NavLink to={ "b" }>
+			<NavLink to={ "b" } className={ "navigate" } onClick={ (e) => animateBlob(e) }>
 				{ ({ isActive }) => <>
 					<i className={ "fi fi-" + (isActive ? "s" : "r") + "r-star" }/>
-					{ t('dashboard.nav.favorites') }
+					<span>{ t('dashboard.nav.favorites') }</span>
+					<span className={ "button-blob" }/>
 				</> }
 			</NavLink>
-			<NavLink to={ "quests" }>
+			<NavLink to={ "quests" } className={ "navigate" } onClick={ (e) => animateBlob(e) }>
 				{ ({ isActive }) => <>
 					<i className={ "fi fi-" + (isActive ? "s" : "r") + "r-treasure-chest" }/>
-					{ t('dashboard.nav.quests') }
+					<span>{ t('dashboard.nav.quests') }</span>
+					<span className={ "button-blob" }/>
 				</> }
 			</NavLink>
-			<NavLink to={ "d" }>
+			<NavLink to={ "d" } className={ "navigate" } onClick={ (e) => animateBlob(e) }>
 				{ ({ isActive }) => <>
 					<i className={ "fi fi-" + (isActive ? "s" : "r") + "r-envelope" }/>
-					{ t('dashboard.nav.inbox') }
+					<span>{ t('dashboard.nav.inbox') }</span>
+					<span className={ "button-blob" }/>
 					<span className={ "badge" }>3</span>
 				</> }
 			</NavLink>
diff --git a/frontend/src/pages/dashboard/editor/Editor.tsx b/frontend/src/pages/dashboard/editor/Editor.tsx
index 49d1b43e..89bdc50e 100644
--- a/frontend/src/pages/dashboard/editor/Editor.tsx
+++ b/frontend/src/pages/dashboard/editor/Editor.tsx
@@ -195,6 +195,8 @@ export default function Editor(props: {}) {
 							tags: tags,
 							content: description,
 							useAI: questionType === "simp"
+						}, {
+							withCredentials: true
 						})
 									.then(res => {
 										alert.info(res.status);
diff --git a/frontend/src/pages/dashboard/question/Question.scss b/frontend/src/pages/dashboard/question/Question.scss
index 5270e9b6..3ef43135 100644
--- a/frontend/src/pages/dashboard/question/Question.scss
+++ b/frontend/src/pages/dashboard/question/Question.scss
@@ -70,16 +70,6 @@
 			flex-direction: column;
 			padding: 0 0 var(--spacing) 0;
 
-			.question-answer-author-user {
-				align-items: center;
-				border-radius: var(--border-radius);
-				cursor: pointer;
-				display: flex;
-				flex-direction: column;
-				padding: var(--spacing) var(--spacing) 0 var(--spacing);
-				user-select: none;
-			}
-
 			p {
 				margin-bottom: calc(var(--spacing) / 2);
 				padding-top: calc(var(--spacing) / 2);
diff --git a/frontend/src/pages/dashboard/question/QuestionAnswerSkeleton.tsx b/frontend/src/pages/dashboard/question/QuestionAnswerSkeleton.tsx
new file mode 100644
index 00000000..7d41aed4
--- /dev/null
+++ b/frontend/src/pages/dashboard/question/QuestionAnswerSkeleton.tsx
@@ -0,0 +1,42 @@
+import Skeleton from "react-loading-skeleton";
+import React from "react";
+
+/**
+ * Displays the skeleton for QuestionAnswer while the data is being fetched
+ * @param props optional count of how many skeletons should be displayed
+ */
+export default function QuestionAnswerSkeleton(props: { count?: number }) {
+	const { count = 1 } = props;
+	const skeletonArray = Array.from({ length: count });
+	
+	return skeletonArray.map((_, i) => {
+		return <div className={ "container transparent question-answer" } key={ i }>
+			<div className={ "question-answer-author" }>
+				<Skeleton height={ 40 } width={ 40 }/>
+				
+				<p>
+					<Skeleton height={ 20 } width={ 100 }/>
+				</p>
+				
+				<span className={ "caption" }><Skeleton width={ 60 }/></span>
+			</div>
+			
+			<div className={ "question-answer-text" }>
+				<div className={ "glass" }>
+					<p>
+						<Skeleton count={ 3 }/>
+					</p>
+				</div>
+				
+				<div className={ "question-answer-actions" }>
+					<Skeleton height={ 20 } width={ 100 }/>
+					<Skeleton height={ 20 } width={ 100 }/>
+					
+					<div style={ { flex: 1 } }/>
+					
+					<Skeleton height={ 20 } width={ 200 }/>
+				</div>
+			</div>
+		</div>
+	})
+}
diff --git a/frontend/src/pages/dashboard/question/QuestionStats.tsx b/frontend/src/pages/dashboard/question/QuestionStats.tsx
new file mode 100644
index 00000000..ef5d3c61
--- /dev/null
+++ b/frontend/src/pages/dashboard/question/QuestionStats.tsx
@@ -0,0 +1,47 @@
+import Skeleton from "react-loading-skeleton";
+import React from "react";
+import { Question } from "../../../def/Question";
+
+export default function QuestionStats(props: {question?: Question}) {
+	return <>
+		<span className={ "caption" }>Question Stats</span>
+		<div className={ "question-stats" }>
+			{ props.question ? <>
+				<div className={ "question-stat" }>
+					<i className={ "fi fi-rr-eye primary-icon" }/>
+					<span
+						className={ "question-figure" }>{ "0".replace(/\B(?=(\d{3})+(?!\d))/g, ",") }</span>
+					<span className={ "question-unit" }>views</span>
+				</div>
+				
+				<div
+					className={ "question-stat" + (props.question.opinion === "like" ? " rating" : "") }>
+					<i className={ "fi fi-rr-social-network primary-icon" } tabIndex={ 0 }/>
+					<span
+						className={ "question-figure" }>{ props.question.likes.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") }</span>
+					<span className={ "question-unit" }>likes</span>
+				</div>
+				
+				<div
+					className={ "question-stat" + (props.question.opinion === "dislike" ? " rating" : "") }>
+					<i className={ "fi fi-rr-social-network flipY primary-icon" } tabIndex={ 0 }/>
+					<span
+						className={ "question-figure" }>{ props.question.dislikes.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") }</span>
+					<span className={ "question-unit" }>dislikes</span>
+				</div>
+				
+				<div className={ "question-stat" }>
+					<i className={ "fi fi-rr-comment-dots primary-icon" }/>
+					<span
+						className={ "question-figure" }>{ props.question.answers.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") }</span>
+					<span className={ "question-unit" }>answers</span>
+				</div>
+			</> : <>
+				<Skeleton containerClassName={ "question-stat" } width={ 80 }/>
+				<Skeleton containerClassName={ "question-stat" } width={ 80 }/>
+				<Skeleton containerClassName={ "question-stat" } width={ 80 }/>
+				<Skeleton containerClassName={ "question-stat" } width={ 80 }/>
+			</> }
+		</div>
+	</>
+}
diff --git a/frontend/src/pages/dashboard/question/QuestionView.tsx b/frontend/src/pages/dashboard/question/QuestionView.tsx
index 61dc3edd..133ea8db 100644
--- a/frontend/src/pages/dashboard/question/QuestionView.tsx
+++ b/frontend/src/pages/dashboard/question/QuestionView.tsx
@@ -12,6 +12,10 @@ import { formatDate } from "../../../def/converter";
 import { useAlert } from "react-alert";
 import { axiosError } from "../../../def/axios-error";
 import NoContent from "../../../components/NoContent";
+import QuestionStats from "./QuestionStats";
+import QuestionAnswerSkeleton from "./QuestionAnswerSkeleton";
+import QuestionAnswer from "../../../components/questionpreview/QuestionAnswer";
+import Avatar from "../../../components/avatar/Avatar";
 
 /**
  * Renders the question page
@@ -43,7 +47,7 @@ export default function QuestionView() {
 					  id: id ?? "",
 					  isDiscussion: res.data.isDiscussion ?? false,
 					  likes: res.data.likes ?? 0,
-					  rating: res.data.rating ?? "none",
+					  opinion: res.data.opinion ?? "none",
 					  tags: res.data.tags ?? [],
 					  title: res.data.title ?? "",
 					  updated: formatDate(res.data.updated ?? "")
@@ -84,99 +88,6 @@ export default function QuestionView() {
 		}
 	}
 	
-	const renderAnswer = (answer: Answer, index: number) => {
-		return <div key={ index } className={ "container transparent question-answer" }>
-			<div className={ "question-answer-author" }
-				 style={ {
-					 paddingTop: answer.author.type === "ai" ? "var(--spacing)" : 0,
-					 paddingInline: answer.author.type === "ai" ? "var(--spacing)" : 0
-				 } }>
-				{ answer.author.type === "ai" ? <>
-					<i className={ "fi fi-sr-brain" }
-					   style={ {
-						   fontSize: "2em",
-						   height: "auto",
-						   color: "var(--primary-color)",
-						   filter: "drop-shadow(0 0 5px rgba(0, 0, 0, 0.2))"
-					   } }/>
-					
-					<p style={ { paddingTop: "calc(var(--spacing) * 0.5)" } }>
-						<span>Simp</span>
-					</p>
-				</> : <div className={ "question-answer-author-user" } tabIndex={ 0 }>
-					<img className={ "avatar" } src={ answer.author.id } alt={ "Answer Author" }/>
-					
-					<p>
-						<span>{ answer.author.name }</span>
-						<span className={ "badge" }>{ answer.author.type.toUpperCase() }</span>
-					</p>
-				</div> }
-				
-				<span className={ "caption" }>replied { answer.created }</span>
-			</div>
-			
-			<div className={ "question-answer-text" }>
-				<div className={ "glass" + (answer.author.type === "ai" ? " glass-simp" : "") }>
-					<p>{ answer.content }</p>
-				</div>
-				
-				<div className={ "question-answer-actions" }>
-					<div
-						className={ "question-answer-actions-rate" + (answer.rating === "like" ? " rating" : "") }>
-						<i className={ "fi fi-rr-social-network primary-icon" } tabIndex={ 0 }/>
-						<span className={ "question-figure" }>{ answer.likes }</span>
-						<span className={ "question-unit" }>likes</span>
-					</div>
-					
-					<div
-						className={ "question-answer-actions-rate" + (answer.rating === "dislike" ? " rating" : "") }>
-						<i className={ "fi fi-rr-social-network flipY primary-icon" } tabIndex={ 0 }/>
-						<span className={ "question-figure" }>{ answer.dislikes }</span>
-						<span className={ "question-unit" }>dislikes</span>
-					</div>
-					
-					<div style={ { flex: 1 } }/>
-					
-					<button className={ "question-report" }>
-						<i className={ "fi fi-rr-flag" }/>
-						Report answer
-					</button>
-				</div>
-			</div>
-		</div>
-	}
-	
-	const renderAnswerSkeleton = () => {
-		return <div className={ "container transparent question-answer" }>
-			<div className={ "question-answer-author" }>
-				<Skeleton height={ 40 } width={ 40 }/>
-				
-				<p>
-					<Skeleton height={ 20 } width={ 100 }/>
-				</p>
-				
-				<span className={ "caption" }><Skeleton width={ 60 }/></span>
-			</div>
-			
-			<div className={ "question-answer-text" }>
-				<div className={ "glass" }>
-					<p>
-						<Skeleton count={ 3 }/>
-					</p>
-				</div>
-				
-				<div className={ "question-answer-actions" }>
-					<Skeleton height={ 20 } width={ 100 }/>
-					<Skeleton height={ 20 } width={ 100 }/>
-					
-					<div style={ { flex: 1 } }/>
-					
-					<Skeleton height={ 20 } width={ 200 }/>
-				</div>
-			</div>
-		</div>
-	}
-	
 	return <SplitSection className={ "question-main" }>
 		<div style={ { display: "flex", flexDirection: "column", gap: "var(--spacing)", flexGrow: 1 } }>
 			<section className={ "glass question-content" }>
@@ -209,12 +120,9 @@ export default function QuestionView() {
 			
 			{ !answersLoading
 				? answers.length > 0
-					? answers.map((answer, index) => renderAnswer(answer, index))
+					? answers.map((answer, index) => <QuestionAnswer answer={ answer } index={ index }/>)
 					: <NoContent/>
-				: <>
-					{ renderAnswerSkeleton() }
-					{ renderAnswerSkeleton() }
-				</> }
+				: <QuestionAnswerSkeleton count={ 2 }/> }
 			
 			<div style={ {
 				display: "flex",
@@ -240,7 +148,7 @@ export default function QuestionView() {
 			<section className={ "glass" }>
 				<div className={ "question-author" } tabIndex={ 0 }>
 					{ question
-						? <img className={ "avatar" } src={ question.author.id } alt={ "Question Author" }/>
+						? <Avatar userId={ question.author.id }/>
 						: <Skeleton height={ 40 } width={ 40 }/> }
 					
 					<div className={ "question-author-info" }>
@@ -248,8 +156,12 @@ export default function QuestionView() {
 						
 						<p>
 							{ question ? <>
-								<span>{ question.author.name }</span>
-								<span className={ "badge" }>{ question.author.type.toUpperCase() }</span>
+								<span>
+									{ question.author.name.substring(0, import.meta.env.VITE_AUTHOR_NAME_MAX_LENGTH) }
+								</span>
+								
+								{ question.author.type !== "user" &&
+                                    <span className={ "badge" }>{ question.author.type.toUpperCase() }</span> }
 							</> : <Skeleton width={ 120 }/> }
 						</p>
 					</div>
@@ -257,45 +169,7 @@ export default function QuestionView() {
 				
 				<hr style={ { marginBlock: "calc(var(--spacing) / 2)" } }/>
 				
-				<span className={ "caption" }>Question Stats</span>
-				<div className={ "question-stats" }>
-					{ question ? <>
-						<div className={ "question-stat" }>
-							<i className={ "fi fi-rr-eye primary-icon" }/>
-							<span
-								className={ "question-figure" }>{ "0".replace(/\B(?=(\d{3})+(?!\d))/g, ",") }</span>
-							<span className={ "question-unit" }>views</span>
-						</div>
-						
-						<div
-							className={ "question-stat" /* + (question.stats.rating === "like" ? " rating" : "") */ }>
-							<i className={ "fi fi-rr-social-network primary-icon" } tabIndex={ 0 }/>
-							<span
-								className={ "question-figure" }>{ question.likes.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") }</span>
-							<span className={ "question-unit" }>likes</span>
-						</div>
-						
-						<div
-							className={ "question-stat" /* + (question.stats.rating === "dislike" ? " rating" : "") */ }>
-							<i className={ "fi fi-rr-social-network flipY primary-icon" } tabIndex={ 0 }/>
-							<span
-								className={ "question-figure" }>{ question.dislikes.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") }</span>
-							<span className={ "question-unit" }>dislikes</span>
-						</div>
-						
-						<div className={ "question-stat" }>
-							<i className={ "fi fi-rr-comment-dots primary-icon" }/>
-							<span
-								className={ "question-figure" }>{ question.answers.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") }</span>
-							<span className={ "question-unit" }>answers</span>
-						</div>
-					</> : <>
-						<Skeleton containerClassName={ "question-stat" } width={ 80 }/>
-						<Skeleton containerClassName={ "question-stat" } width={ 80 }/>
-						<Skeleton containerClassName={ "question-stat" } width={ 80 }/>
-						<Skeleton containerClassName={ "question-stat" } width={ 80 }/>
-					</> }
-				</div>
+				<QuestionStats question={ question }/>
 				
 				<hr style={ { marginBottom: "calc(var(--spacing) / 2)" } }/>
 				
diff --git a/frontend/src/pages/dashboard/trending/Trending.tsx b/frontend/src/pages/dashboard/trending/Trending.tsx
index 96764404..9db356b3 100644
--- a/frontend/src/pages/dashboard/trending/Trending.tsx
+++ b/frontend/src/pages/dashboard/trending/Trending.tsx
@@ -38,7 +38,7 @@ export default function Trending(props: {}) {
 						  id: _question.id,
 						  isDiscussion: _question.isDiscussion ?? false,
 						  likes: _question.likes ?? 0,
-						  rating: _question.rating ?? "none",
+						  opinion: _question.opinion ?? "none",
 						  tags: _question.tags ?? [],
 						  title: _question.title ?? "",
 						  updated: formatDate(_question.updated ?? "")
@@ -126,11 +126,7 @@ export default function Trending(props: {}) {
 				? questions.map((question, index) =>
 					<QuestionPreview question={ question } index={ index } key={ index }/>)
 				: <NoContent/>
-			: <>
-				<QuestionPreviewSkeleton/>
-				<QuestionPreviewSkeleton/>
-				<QuestionPreviewSkeleton/>
-			</>
+			: <QuestionPreviewSkeleton count={ 2 }/>
 		}
 	</>;
 }
diff --git a/frontend/src/pages/home/Home.tsx b/frontend/src/pages/home/Home.tsx
index ca59b810..dbb13076 100644
--- a/frontend/src/pages/home/Home.tsx
+++ b/frontend/src/pages/home/Home.tsx
@@ -140,9 +140,9 @@ export default function Home(props: { updateTheme: (theme: "system" | "dark" | "
 					<p className={ "page-summary fade-in" }>
 						We offer a wide range of features to help you with your daily tasks.
 					</p>
-					<button className={ "btn btn-primary fade-in" }>
-						<span>Try Yourself!</span>
-					</button>
+					<Button buttonStyle={ "primary" }>
+						Try Yourself!
+					</Button>
 					
 					<div className={ "cards" }>
 						<div className={ "card fade-in" }>
diff --git a/frontend/src/pages/home/Login.scss b/frontend/src/pages/home/Login.scss
index 7226265b..0aa98486 100644
--- a/frontend/src/pages/home/Login.scss
+++ b/frontend/src/pages/home/Login.scss
@@ -48,7 +48,7 @@
 			z-index: 0;
 		}
 
-		* {
+		> * {
 			z-index: 1;
 		}
 
diff --git a/frontend/src/pages/home/Login.tsx b/frontend/src/pages/home/Login.tsx
index d9b03256..afea684f 100644
--- a/frontend/src/pages/home/Login.tsx
+++ b/frontend/src/pages/home/Login.tsx
@@ -1,6 +1,7 @@
 import { Component } from "react";
 import "./Login.scss";
 import MacbookMockup from "../../images/macbook-mockup.png";
+import Button from "../../components/button/Button";
 
 export default class Login extends Component<{}, {}> {
 	render() {
@@ -28,7 +29,7 @@ export default class Login extends Component<{}, {}> {
 				<form>
 					<input type={ "email" } placeholder={ "john.doe@mail.com" } className={ "form-input" } required/>
 					
-					<button type={ "submit" } className={ "btn btn-primary" }><span>Continue</span></button>
+					<Button buttonStyle={ "primary" } type={ "submit" }>Continue</Button>
 				</form>
 				
 				<div className={ "form-divider" }>
@@ -38,14 +39,8 @@ export default class Login extends Component<{}, {}> {
 				</div>
 				
 				<div className={ "login-social" }>
-					<button className={ "btn btn-secondary" }>
-						<i className={ "fi fi-brands-apple" }/>
-						<span>Apple</span>
-					</button>
-					<button className={ "btn btn-secondary" }>
-						<i className={ "fi fi-brands-google" }/>
-						<span>Google</span>
-					</button>
+					<Button icon={ "fi fi-brands-apple" }>Apple</Button>
+					<Button icon={ "fi fi-brands-google" }>Google</Button>
 				</div>
 			</main>
 		</div>
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index da1425af..5bdaed1d 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -21,7 +21,7 @@ export default defineConfig(() => {
 		},
 		server: {
 			port: 3006,
-			open: true
+			open: false
 		}
 	};
 });