diff --git a/src/renderer/src/hooks/use-date.ts b/src/renderer/src/hooks/use-date.ts
index 21ed1b34..9486400c 100644
--- a/src/renderer/src/hooks/use-date.ts
+++ b/src/renderer/src/hooks/use-date.ts
@@ -72,7 +72,7 @@ export function useDate() {
       const locale = getDateLocale();
       return format(
         date,
-        locale == enUS ? "MM/dd/yyyy - HH:mm" : "dd/MM/yyyy - HH:mm"
+        locale == enUS ? "MM/dd/yyyy - HH:mm" : "dd/MM/yyyy HH:mm"
       );
     },
 
diff --git a/src/renderer/src/pages/achievements/achievements-content.tsx b/src/renderer/src/pages/achievements/achievements-content.tsx
index 874368a8..c41f376a 100644
--- a/src/renderer/src/pages/achievements/achievements-content.tsx
+++ b/src/renderer/src/pages/achievements/achievements-content.tsx
@@ -10,7 +10,6 @@ import {
   LockIcon,
   PersonIcon,
   TrophyIcon,
-  UnlockIcon,
 } from "@primer/octicons-react";
 import { SPACING_UNIT, vars } from "@renderer/theme.css";
 import { gameDetailsContext } from "@renderer/context";
@@ -192,49 +191,55 @@ function AchievementList({ user, otherUser }: AchievementListProps) {
             </div>
           </div>
 
-          <div
-            title={
-              otherUserAchievement.unlockTime
-                ? formatDateTime(otherUserAchievement.unlockTime)
-                : undefined
-            }
-          >
-            {otherUserAchievement.unlockTime ? (
-              <div
-                style={{
-                  whiteSpace: "nowrap",
-                  display: "flex",
-                  flexDirection: "column",
-                }}
-              >
-                <CheckCircleIcon />
-                <small>{formatDateTime(otherUserAchievement.unlockTime)}</small>
-              </div>
-            ) : (
-              <div>
-                <LockIcon />
-              </div>
-            )}
-          </div>
+          {otherUserAchievement.unlocked ? (
+            <div
+              style={{
+                whiteSpace: "nowrap",
+                display: "flex",
+                flexDirection: "row",
+                gap: `${SPACING_UNIT}px`,
+                justifyContent: "center",
+              }}
+            >
+              <CheckCircleIcon />
+              <small>{formatDateTime(otherUserAchievement.unlockTime!)}</small>
+            </div>
+          ) : (
+            <div
+              style={{
+                display: "flex",
+                padding: `${SPACING_UNIT}px`,
+                justifyContent: "center",
+              }}
+            >
+              <LockIcon />
+            </div>
+          )}
 
-          <div
-            title={
-              userDetails?.subscription && achievements[index].unlockTime
-                ? formatDateTime(achievements[index].unlockTime)
-                : undefined
-            }
-          >
-            {userDetails?.subscription && achievements[index].unlockTime ? (
-              <div style={{ whiteSpace: "nowrap" }}>
-                <UnlockIcon />
-                <p>{formatDateTime(achievements[index].unlockTime)}</p>
-              </div>
-            ) : (
-              <div>
-                <LockIcon />
-              </div>
-            )}
-          </div>
+          {userDetails?.subscription && achievements[index].unlocked ? (
+            <div
+              style={{
+                whiteSpace: "nowrap",
+                display: "flex",
+                flexDirection: "row",
+                gap: `${SPACING_UNIT}px`,
+                justifyContent: "center",
+              }}
+            >
+              <CheckCircleIcon />
+              <small>{formatDateTime(achievements[index].unlockTime!)}</small>
+            </div>
+          ) : (
+            <div
+              style={{
+                display: "flex",
+                padding: `${SPACING_UNIT}px`,
+                justifyContent: "center",
+              }}
+            >
+              <LockIcon />
+            </div>
+          )}
         </li>
       ))}
     </ul>
@@ -371,17 +376,20 @@ export function AchievementsContent({ otherUser }: AchievementsContentProps) {
         </div>
 
         {otherUser && (
-          <div className={styles.panel({ stuck: isHeaderStuck })}>
+          <div className={styles.tableHeader({ stuck: isHeaderStuck })}>
             <div
               style={{
                 display: "grid",
                 gridTemplateColumns: "3fr 1fr 1fr",
-                padding: `${SPACING_UNIT}px`,
+                gap: `${SPACING_UNIT * 2}px`,
+                padding: `${SPACING_UNIT}px ${SPACING_UNIT * 3}px`,
               }}
             >
               <div></div>
-              <div>{getProfileImage(otherUser)}</div>
-              <div>
+              <div style={{ display: "flex", justifyContent: "center" }}>
+                {getProfileImage(otherUser)}
+              </div>
+              <div style={{ display: "flex", justifyContent: "center" }}>
                 {getProfileImage({
                   ...userDetails,
                   userId: userDetails.id,
diff --git a/src/renderer/src/pages/achievements/achievements.css.ts b/src/renderer/src/pages/achievements/achievements.css.ts
index 77013ba8..84daa165 100644
--- a/src/renderer/src/pages/achievements/achievements.css.ts
+++ b/src/renderer/src/pages/achievements/achievements.css.ts
@@ -4,6 +4,7 @@ import { recipe } from "@vanilla-extract/recipes";
 
 export const HERO_HEIGHT = 150;
 export const LOGO_HEIGHT = 100;
+export const LOGO_MAX_WIDTH = 200;
 
 export const wrapper = style({
   display: "flex",
@@ -59,7 +60,9 @@ export const heroContent = style({
 });
 
 export const gameLogo = style({
+  width: LOGO_MAX_WIDTH,
   height: LOGO_HEIGHT,
+  objectFit: "contain",
 });
 
 export const container = style({
@@ -71,7 +74,7 @@ export const container = style({
   zIndex: "1",
 });
 
-export const panel = recipe({
+export const tableHeader = recipe({
   base: {
     width: "100%",
     backgroundColor: vars.color.darkBackground,