diff --git a/src/content/metadata.json b/src/content/metadata.json
index 6110d98..c330d5a 100644
--- a/src/content/metadata.json
+++ b/src/content/metadata.json
@@ -3,7 +3,7 @@
 	"blogName": "Cirno's Blog",
 	"frontDescription": "This is a very long description.",
 	"frontCover": "/favicon.svg",
-	"avatar": "/favicon.svg",
+	"picture": "/favicon.svg",
 	"links": {
 		"github": "https://github.com",
 		"email": "cirno@gensokyo.jp",
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 791c97b..bc0e454 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -16,8 +16,6 @@
 	const { name, Content } = data;
 
 	import metadata from '$content/metadata.json';
-	const pathFrontCover = metadata.frontCover;
-	const pathAvatar = metadata.avatar;
 	const iconMap: Map<string, string> = {
 		"bitbucket": "fa-brands fa-bitbucket",
 		"discord": "fa-brands fa-discord",
@@ -39,7 +37,7 @@
 
 <div
 	id="background"
-	style="opacity: {1 - progress}; background-image: url('{pathFrontCover}')"
+	style="opacity: {1 - progress}; background-image: url('{metadata.frontCover}')"
 >
 </div>
 
@@ -80,8 +78,7 @@
 					</div>
 				</div>
 				<div id="avatar">
-
-					<img id="avatar-img" src={pathAvatar} alt={metadata.name} />
+					<img id="avatar-img" src={metadata.picture} alt={metadata.name} />
 				</div>
 			</div>
 		</div>
@@ -152,14 +149,17 @@
 		line-height: 0;
 		display: inline-block;
 		margin: 5px;
-		border: 4px solid rgba(100,100,100,0.4);
-		border-radius: 50%;
 		margin-right: auto;
+		border: 4px solid theme('colors.eucalyptus.500');
+		border-radius: 50%;
+		aspect-ratio: 1;
+		width: 20vh;
 		@apply ml-auto mr-0;
 	}
 	#avatar-img {
-		width: 20vh;
-		height: 20vh;
+		min-height: 100%;
+		min-width: 100%;
+		object-fit: cover;
 		border-radius: 50%;
 	}
 	#bio-core {