diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
index e2726b79..08c9fda2 100644
--- a/src/locales/en/translation.json
+++ b/src/locales/en/translation.json
@@ -270,6 +270,7 @@
     "pending": "Pending",
     "no_pending_invites": "You have no pending invites",
     "no_blocked_users": "You have no blocked users",
-    "friend_code_copied": "Friend code copied"
+    "friend_code_copied": "Friend code copied",
+    "undo_friendship_modal_text": "This will undo your friendship with {{displayName}}"
   }
 }
diff --git a/src/locales/pt/translation.json b/src/locales/pt/translation.json
index 36d38c96..a97a81cf 100644
--- a/src/locales/pt/translation.json
+++ b/src/locales/pt/translation.json
@@ -273,6 +273,7 @@
     "pending": "Pendentes",
     "no_pending_invites": "Você não possui convites de amizade pendentes",
     "no_blocked_users": "Você não tem nenhum usuário bloqueado",
-    "friend_code_copied": "Código de amigo copiado"
+    "friend_code_copied": "Código de amigo copiado",
+    "undo_friendship_modal_text": "Isso irá remover sua amizade com {{displayName}}"
   }
 }
diff --git a/src/main/index.ts b/src/main/index.ts
index e288302b..11eb479d 100644
--- a/src/main/index.ts
+++ b/src/main/index.ts
@@ -86,10 +86,15 @@ app.on("browser-window-created", (_, window) => {
 
 const handleDeepLinkPath = (uri?: string) => {
   if (!uri) return;
-  const url = new URL(uri);
 
-  if (url.host === "install-source") {
-    WindowManager.redirect(`settings${url.search}`);
+  try {
+    const url = new URL(uri);
+
+    if (url.host === "install-source") {
+      WindowManager.redirect(`settings${url.search}`);
+    }
+  } catch (error) {
+    logger.error("Error handling deep link", uri, error);
   }
 };
 
diff --git a/src/renderer/src/components/header/header.css.ts b/src/renderer/src/components/header/header.css.ts
index 0e82aaef..12855986 100644
--- a/src/renderer/src/components/header/header.css.ts
+++ b/src/renderer/src/components/header/header.css.ts
@@ -104,6 +104,7 @@ export const section = style({
   alignItems: "center",
   gap: `${SPACING_UNIT * 2}px`,
   height: "100%",
+  overflow: "hidden",
 });
 
 export const backButton = recipe({
@@ -136,11 +137,15 @@ export const backButton = recipe({
 export const title = recipe({
   base: {
     transition: "all ease 0.2s",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    width: "100%",
   },
   variants: {
     hasBackButton: {
       true: {
         transform: "translateX(28px)",
+        width: "calc(100% - 28px)",
       },
     },
   },
diff --git a/src/renderer/src/components/header/header.tsx b/src/renderer/src/components/header/header.tsx
index d3315098..c37e4b44 100644
--- a/src/renderer/src/components/header/header.tsx
+++ b/src/renderer/src/components/header/header.tsx
@@ -72,7 +72,7 @@ export function Header({ onSearch, onClear, search }: HeaderProps) {
           isWindows: window.electron.platform === "win32",
         })}
       >
-        <section className={styles.section}>
+        <section className={styles.section} style={{ flex: 1 }}>
           <button
             type="button"
             className={styles.backButton({
diff --git a/src/renderer/src/components/sidebar/sidebar-profile.css.ts b/src/renderer/src/components/sidebar/sidebar-profile.css.ts
index ba29c850..d97b0c44 100644
--- a/src/renderer/src/components/sidebar/sidebar-profile.css.ts
+++ b/src/renderer/src/components/sidebar/sidebar-profile.css.ts
@@ -7,22 +7,24 @@ export const profileContainerBackground = createVar();
 export const profileContainer = style({
   background: profileContainerBackground,
   position: "relative",
+  display: "flex",
+  gap: `${SPACING_UNIT}px`,
   cursor: "pointer",
   ":hover": {
     backgroundColor: "rgba(255, 255, 255, 0.15)",
   },
+  borderBottom: `solid 1px ${vars.color.border}`,
+  boxShadow: "0px 0px 15px 0px rgb(0 0 0 / 70%)",
+  padding: `${SPACING_UNIT * 2}px ${SPACING_UNIT * 2}px`,
 });
 
 export const profileButton = style({
   display: "flex",
   cursor: "pointer",
   transition: "all ease 0.1s",
-  padding: `${SPACING_UNIT * 2}px ${SPACING_UNIT * 2}px`,
   color: vars.color.muted,
-  borderBottom: `solid 1px ${vars.color.border}`,
-  boxShadow: "0px 0px 15px 0px rgb(0 0 0 / 70%)",
   width: "100%",
-  zIndex: "10",
+  overflow: "hidden",
 });
 
 export const profileButtonContent = style({
@@ -75,16 +77,6 @@ export const profileButtonTitle = style({
   whiteSpace: "nowrap",
 });
 
-export const friendRequestContainer = style({
-  position: "absolute",
-  padding: "8px",
-  right: `${SPACING_UNIT}px`,
-  display: "flex",
-  top: 0,
-  bottom: 0,
-  alignItems: "center",
-});
-
 export const friendRequestButton = style({
   color: vars.color.success,
   cursor: "pointer",
diff --git a/src/renderer/src/components/sidebar/sidebar-profile.tsx b/src/renderer/src/components/sidebar/sidebar-profile.tsx
index 069831cb..6b2c990e 100644
--- a/src/renderer/src/components/sidebar/sidebar-profile.tsx
+++ b/src/renderer/src/components/sidebar/sidebar-profile.tsx
@@ -41,6 +41,9 @@ export function SidebarProfile() {
     return undefined;
   }, [profileBackground]);
 
+  const showPendingRequests =
+    userDetails && receivedRequests.length > 0 && !gameRunning;
+
   return (
     <div
       className={styles.profileContainer}
@@ -88,19 +91,17 @@ export function SidebarProfile() {
           )}
         </div>
       </button>
-      {userDetails && receivedRequests.length > 0 && !gameRunning && (
-        <div className={styles.friendRequestContainer}>
-          <button
-            type="button"
-            className={styles.friendRequestButton}
-            onClick={() =>
-              showFriendsModal(UserFriendModalTab.AddFriend, userDetails.id)
-            }
-          >
-            <PersonAddIcon size={24} />
-            {receivedRequests.length}
-          </button>
-        </div>
+      {showPendingRequests && (
+        <button
+          type="button"
+          className={styles.friendRequestButton}
+          onClick={() =>
+            showFriendsModal(UserFriendModalTab.AddFriend, userDetails.id)
+          }
+        >
+          <PersonAddIcon size={24} />
+          {receivedRequests.length}
+        </button>
       )}
     </div>
   );
diff --git a/src/renderer/src/pages/user/user-confirm-undo-friendship-modal.tsx b/src/renderer/src/pages/user/user-confirm-undo-friendship-modal.tsx
new file mode 100644
index 00000000..cfdb5d06
--- /dev/null
+++ b/src/renderer/src/pages/user/user-confirm-undo-friendship-modal.tsx
@@ -0,0 +1,40 @@
+import { Button, Modal } from "@renderer/components";
+import * as styles from "./user.css";
+import { useTranslation } from "react-i18next";
+
+export interface UserConfirmUndoFriendshipModalProps {
+  visible: boolean;
+  displayName: string;
+  onConfirm: () => void;
+  onClose: () => void;
+}
+
+export function UserConfirmUndoFriendshipModal({
+  visible,
+  displayName,
+  onConfirm,
+  onClose,
+}: UserConfirmUndoFriendshipModalProps) {
+  const { t } = useTranslation("user_profile");
+
+  return (
+    <Modal
+      visible={visible}
+      title={t("sign_out_modal_title")}
+      onClose={onClose}
+    >
+      <div className={styles.signOutModalContent}>
+        <p>{t("undo_friendship_modal_text", { displayName })}</p>
+        <div className={styles.signOutModalButtonsContainer}>
+          <Button onClick={onConfirm} theme="danger">
+            {t("undo_friendship")}
+          </Button>
+
+          <Button onClick={onClose} theme="primary">
+            {t("cancel")}
+          </Button>
+        </div>
+      </div>
+    </Modal>
+  );
+}
diff --git a/src/renderer/src/pages/user/user-content.tsx b/src/renderer/src/pages/user/user-content.tsx
index c334389e..f4a46ccd 100644
--- a/src/renderer/src/pages/user/user-content.tsx
+++ b/src/renderer/src/pages/user/user-content.tsx
@@ -34,6 +34,7 @@ import { UserProfileSettingsModal } from "./user-profile-settings-modal";
 import { UserSignOutModal } from "./user-sign-out-modal";
 import { UserFriendModalTab } from "../shared-modals/user-friend-modal";
 import { UserBlockModal } from "./user-block-modal";
+import { UserConfirmUndoFriendshipModal } from "./user-confirm-undo-friendship-modal";
 
 const MAX_MINUTES_TO_SHOW_IN_PLAYTIME = 120;
 
@@ -68,6 +69,7 @@ export function UserContent({
     useState(false);
   const [showSignOutModal, setShowSignOutModal] = useState(false);
   const [showUserBlockModal, setShowUserBlockModal] = useState(false);
+  const [showUndoFriendshipModal, setShowUndoFriendshipModal] = useState(false);
   const [currentGame, setCurrentGame] = useState<GameRunning | null>(null);
 
   const { gameRunning } = useAppSelector((state) => state.gameRunning);
@@ -213,17 +215,12 @@ export function UserContent({
     }
 
     if (userProfile.relation.status === "ACCEPTED") {
-      const userId =
-        userProfile.relation.AId === userDetails?.id
-          ? userProfile.relation.BId
-          : userProfile.relation.AId;
-
       return (
         <>
           <Button
             theme="outline"
             className={styles.cancelRequestButton}
-            onClick={() => handleFriendAction(userId, "UNDO")}
+            onClick={() => setShowUndoFriendshipModal(true)}
           >
             <XCircleIcon size={28} /> {t("undo_friendship")}
           </Button>
@@ -291,6 +288,13 @@ export function UserContent({
         displayName={userProfile.displayName}
       />
 
+      <UserConfirmUndoFriendshipModal
+        visible={showUndoFriendshipModal}
+        onClose={() => setShowUndoFriendshipModal(false)}
+        onConfirm={() => handleFriendAction(userProfile.id, "UNDO")}
+        displayName={userProfile.displayName}
+      />
+
       <section
         className={styles.profileContentBox}
         style={{
@@ -328,7 +332,9 @@ export function UserContent({
         </div>
 
         <div className={styles.profileInformation}>
-          <h2 style={{ fontWeight: "bold" }}>{userProfile.displayName}</h2>
+          <h2 className={styles.profileDisplayName}>
+            {userProfile.displayName}
+          </h2>
           {currentGame && (
             <div
               style={{
diff --git a/src/renderer/src/pages/user/user-profile-settings-modal/user-edit-profile.tsx b/src/renderer/src/pages/user/user-profile-settings-modal/user-edit-profile.tsx
index f6a430ba..6ecdb8a1 100644
--- a/src/renderer/src/pages/user/user-profile-settings-modal/user-edit-profile.tsx
+++ b/src/renderer/src/pages/user/user-profile-settings-modal/user-edit-profile.tsx
@@ -126,6 +126,7 @@ export const UserEditProfile = ({
         value={form.displayName}
         required
         minLength={3}
+        maxLength={50}
         containerProps={{ style: { width: "100%" } }}
         onChange={(e) => setForm({ ...form, displayName: e.target.value })}
       />
diff --git a/src/renderer/src/pages/user/user.css.ts b/src/renderer/src/pages/user/user.css.ts
index 4e1c2139..6bcb30b0 100644
--- a/src/renderer/src/pages/user/user.css.ts
+++ b/src/renderer/src/pages/user/user.css.ts
@@ -23,6 +23,7 @@ export const profileContentBox = style({
 
 export const profileAvatarContainer = style({
   width: "96px",
+  minWidth: "96px",
   height: "96px",
   borderRadius: "50%",
   display: "flex",
@@ -100,6 +101,14 @@ export const profileInformation = style({
   alignItems: "flex-start",
   color: "#c0c1c7",
   zIndex: 1,
+  overflow: "hidden",
+});
+
+export const profileDisplayName = style({
+  fontWeight: "bold",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  width: "100%",
 });
 
 export const profileContent = style({