diff --git a/app/routes/profile.tsx b/app/routes/profile.tsx
index e284299..2199f9d 100644
--- a/app/routes/profile.tsx
+++ b/app/routes/profile.tsx
@@ -1,7 +1,7 @@
 import { useContext, useState, useEffect } from "react";
 import { toast } from "react-hot-toast";
 import { useLocalStorage } from "~/hooks/useLocalStorage";
-import { isValidPlayerStats } from "~/utils/utils";
+import { idToColor, isValidPlayerStats } from "~/utils/utils";
 import { AuthContext } from "../components/AuthProvider/AuthProvider";
 import {
   updateUsername,
@@ -9,8 +9,11 @@ import {
   importStatsFromLocalStorage,
 } from "../firebase/utils";
 
+import { EnvelopeIcon } from "@heroicons/react/20/solid";
+
 export default function Profile() {
   const { user, updateUser } = useContext(AuthContext);
+
   const [newUsername, setNewUsername] = useState("");
   const [changing, setChanging] = useState(false);
   const [message, setMessage] = useState("");
@@ -115,67 +118,86 @@ export default function Profile() {
     }
   };
 
+  const profile = user
+    ? {
+        name: user.username,
+        email: user.email,
+        avatar: `https://ui-avatars.com/api/?name=${
+          user.username
+        }&size=20&background=${idToColor(user.uid)}`, // replace with user avatar link if any
+        backgroundImage: "https://via.placeholder.com/1920x1080", // replace with a user background link if any
+      }
+    : null;
+
   if (user) {
     return (
-      <div className="flex justify-center items-center">
-        <div className="mt-4 w-full max-w-md p-8 m-4 shadow-md rounded">
-          <h1 className="text-2xl font-bold mb-5 text-center">
-            Welcome, {user.username}!
-          </h1>
-
-          <div className="mb-6 space-y-4">
-            <div className="flex items-center space-x-2">
-              <span className="label-text">Username:</span>
-              <span>{user.username}</span>
+      <div>
+        <div>
+          <img
+            className="h-32 w-full object-cover lg:h-48"
+            src={profile.backgroundImage}
+            alt=""
+          />
+        </div>
+        <div className="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
+          <div className="-mt-12 sm:-mt-16 sm:flex sm:items-end sm:space-x-5">
+            <div className="flex">
+              <img
+                className="h-24 w-24 rounded-full ring-4 ring-white sm:h-32 sm:w-32"
+                src={profile.avatar}
+                alt=""
+              />
             </div>
-            <div className="flex items-center space-x-2">
-              <span className="label-text">Email:</span>
-              <span>{user.email}</span>
+            <div className="mt-6 min-w-0 flex-1 sm:pb-1">
+              <h1 className="truncate text-2xl font-bold text-gray-900">
+                {profile.name}
+              </h1>
+              <div className="flex flex-row items-center space-x-2 mt-4">
+                <EnvelopeIcon
+                  className="h-5 w-5 text-gray-400"
+                  aria-hidden="true"
+                />
+                <span className="text-sm text-gray-600">{profile.email}</span>
+              </div>
             </div>
           </div>
 
-          <hr className="mb-6" />
-
-          <div className="space-y-4">
-            {!importedDate && localStats && (
-              <div>
-                <h2 className="text-xl font-bold mb-4">
-                  Import your game stats
-                </h2>
-                <p>
-                  If you've been playing Chessguessr, your stats are saved in
-                  your browser. By importing them, you can keep them safe on
-                  your account and access them on any device. Please note, stats
-                  can be imported only once.
-                </p>
-
-                <div className="mt-4">
-                  <h3 className="font-semibold mb-2">Your Local Stats:</h3>
-                  <ul className="list-disc ml-4">
-                    <li>Games Played: {localStats.gamesPlayed}</li>
-                    <li>Current Streak: {localStats.currentStreak}</li>
-                    <li>Guess distribution:</li>
-                    <ul className="list-disc ml-6">
-                      <li>1: {localStats.guesses["1"]}</li>
-                      <li>2: {localStats.guesses["2"]}</li>
-                      <li>3: {localStats.guesses["3"]}</li>
-                      <li>4: {localStats.guesses["4"]}</li>
-                      <li>5: {localStats.guesses["5"]}</li>
-                    </ul>
+          {!importedDate && localStats && (
+            <div className="mt-8">
+              <h2 className="text-xl font-bold mb-4">Import your game stats</h2>
+              <p>
+                If you've been playing Chessguessr, your stats are saved in your
+                browser. By importing them, you can keep them safe on your
+                account and access them on any device. Please note, stats can be
+                imported only once.
+              </p>
+
+              <div className="mt-4">
+                <h3 className="font-semibold mb-2">Your Local Stats:</h3>
+                <ul className="list-disc ml-4">
+                  <li>Games Played: {localStats.gamesPlayed}</li>
+                  <li>Current Streak: {localStats.currentStreak}</li>
+                  <li>Guess distribution:</li>
+                  <ul className="list-disc ml-6">
+                    <li>1: {localStats.guesses["1"]}</li>
+                    <li>2: {localStats.guesses["2"]}</li>
+                    <li>3: {localStats.guesses["3"]}</li>
+                    <li>4: {localStats.guesses["4"]}</li>
+                    <li>5: {localStats.guesses["5"]}</li>
                   </ul>
-                </div>
-
-                <div className="form-control w-full max-w-xs mt-4">
-                  <button
-                    className="btn btn-primary"
-                    onClick={importLocalStorageStats}
-                  >
-                    Import Stats to Account
-                  </button>
-                </div>
+                </ul>
               </div>
-            )}
-          </div>
+
+              <div className="form-control w-full max-w-xs mt-4">
+                <button
+                  className="inline-flex justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
+                  onClick={importLocalStorageStats}
+                >
+                  <span>Import Stats to Account</span>
+                </button>
+              </div>
+            </div>
+          )}
 
           {message && (
             <div className="mt-4 text-center font-semibold text-red-500 mb-4">
diff --git a/package-lock.json b/package-lock.json
index c2cb275..886c659 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,6 +7,7 @@
       "dependencies": {
         "@firebase/auth": "^1.1.0",
         "@firebase/storage": "^0.11.2",
+        "@heroicons/react": "^2.0.18",
         "@react-chess/chessground": "^1.2.4",
         "@remix-run/node": "^1.5.1",
         "@remix-run/react": "^1.5.1",
@@ -3383,6 +3384,14 @@
         "@hapi/hoek": "^9.0.0"
       }
     },
+    "node_modules/@heroicons/react": {
+      "version": "2.0.18",
+      "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-2.0.18.tgz",
+      "integrity": "sha512-7TyMjRrZZMBPa+/5Y8lN0iyvUU/01PeMGX2+RE7cQWpEUIcb4QotzUObFkJDejj/HUH4qjP/eQ0gzzKs2f+6Yw==",
+      "peerDependencies": {
+        "react": ">= 16"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.8",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.8.tgz",
diff --git a/package.json b/package.json
index ed613fb..790e7d0 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
   "dependencies": {
     "@firebase/auth": "^1.1.0",
     "@firebase/storage": "^0.11.2",
+    "@heroicons/react": "^2.0.18",
     "@react-chess/chessground": "^1.2.4",
     "@remix-run/node": "^1.5.1",
     "@remix-run/react": "^1.5.1",