diff --git a/frontend/src/components/image/index.tsx b/frontend/src/components/image/index.tsx
index 3a80e31..7a58b4e 100644
--- a/frontend/src/components/image/index.tsx
+++ b/frontend/src/components/image/index.tsx
@@ -6,7 +6,7 @@ export const ImageComponent: Component<{ ID: string }> = (props) => {
 	return (
 		<A href={`/image/${props.ID}`} class="w-full h-full">
 			<img
-				class="w-full h-full object-contain"
+				class="w-full object-contain rounded-xl"
 				src={`${base}/image/${props.ID}`}
 			/>
 		</A>
diff --git a/frontend/src/pages/front/page.tsx b/frontend/src/pages/front/page.tsx
index 49405b3..486364a 100644
--- a/frontend/src/pages/front/page.tsx
+++ b/frontend/src/pages/front/page.tsx
@@ -1,5 +1,5 @@
 import { Categories } from "./gallery";
-import { Recent } from "./Recent";
+import { Recent } from "./recent";
 
 export const FrontPage = () => {
 	return (
diff --git a/frontend/src/pages/front/Recent.tsx b/frontend/src/pages/front/recent.tsx
similarity index 92%
rename from frontend/src/pages/front/Recent.tsx
rename to frontend/src/pages/front/recent.tsx
index cbc1ba9..b22954c 100644
--- a/frontend/src/pages/front/Recent.tsx
+++ b/frontend/src/pages/front/recent.tsx
@@ -18,7 +18,7 @@ export const Recent: Component = () => {
 	return (
 		<div class="rounded-xl bg-white p-4 flex flex-col gap-2">
 			<h2 class="text-xl font-bold">Recent Screenshots</h2>
-			<div class="grid grid-cols-3 place-items-center">
+			<div class="grid grid-cols-3 gap-4 place-items-center">
 				<For each={latestImages()}>
 					{(image) => <ImageComponent ID={image.ImageID} />}
 				</For>