diff --git a/srcs/requirements/nestjs/api_back/src/friendship/friendship.service.ts b/srcs/requirements/nestjs/api_back/src/friendship/friendship.service.ts
index d0aba0ab..3d763f05 100644
--- a/srcs/requirements/nestjs/api_back/src/friendship/friendship.service.ts
+++ b/srcs/requirements/nestjs/api_back/src/friendship/friendship.service.ts
@@ -334,6 +334,24 @@ export class FriendshipService {
 		return this.friendshipRepository.remove(friendship);
 	}
 
+	async deleteAllFriendships(user : User) {
+		let friendships = await this.friendshipRepository
+			.createQueryBuilder('friendship')
+			.leftJoinAndSelect('friendship.sender', 'sender')
+			.leftJoinAndSelect('friendship.receiver', 'receiver')
+			.where('friendship.sender = :sender', { sender: user })
+			.orWhere('friendship.receiver = :receiver', { receiver: user})
+			.getMany()
+
+		// return this.friendshipRepository.remove(friendships);
+		// return this.friendshipRepository.delete(friendships);
+
+		for (const friendship of friendships) {
+			this.friendshipRepository.remove(friendship);
+		}
+		return true;
+	}
+
 	async findIfUserIsBlockedOrHasBlocked(userConnectedId: number, userToFindId: number) {
 		// console.log("finding if user is blocked")
 		// console.log('user connected: ' + userConnectedId)
diff --git a/srcs/requirements/nestjs/api_back/src/users/entities/user.entity.ts b/srcs/requirements/nestjs/api_back/src/users/entities/user.entity.ts
index c25401cf..b1f1934c 100644
--- a/srcs/requirements/nestjs/api_back/src/users/entities/user.entity.ts
+++ b/srcs/requirements/nestjs/api_back/src/users/entities/user.entity.ts
@@ -43,14 +43,14 @@ export class User {
 	@Column({ nullable: true })
 	secretTwoFactorAuth: string;
 
-	@OneToMany(type => Friendship , (friendship) => friendship.sender)
+	@OneToMany(type => Friendship , (friendship) => friendship.sender, { onDelete: 'CASCADE' })
 	sentFriendRequest: Friendship[];
 
-	@OneToMany(type => Friendship , (friendship) => friendship.receiver)
+	@OneToMany(type => Friendship , (friendship) => friendship.receiver, { onDelete: 'CASCADE' })
 	receivedFriendRequest: Friendship[];
 
 	@JoinColumn()
-	@OneToOne(() => UserStats, { cascade: true })
+	@OneToOne(() => UserStats, { cascade: true, onDelete: 'CASCADE' })
 	stats: UserStats;
 
 	// ROOMS :
diff --git a/srcs/requirements/nestjs/api_back/src/users/users.controller.ts b/srcs/requirements/nestjs/api_back/src/users/users.controller.ts
index 0db08095..163a0d90 100644
--- a/srcs/requirements/nestjs/api_back/src/users/users.controller.ts
+++ b/srcs/requirements/nestjs/api_back/src/users/users.controller.ts
@@ -1,5 +1,5 @@
 import {
-	Body, Controller, Delete, Get, NotFoundException,HttpStatus, Param, Patch, Post, Query, Redirect, Req, Res, UploadedFile, UseGuards, UseInterceptors
+	Body, Controller, Delete, Get, NotFoundException,HttpStatus, Param, Patch, Post, Query, Redirect, Req, Res, UploadedFile, UseGuards, UseInterceptors, Next,
 } from '@nestjs/common';
 import { FileInterceptor } from '@nestjs/platform-express';
 import { Response } from 'express';
@@ -73,8 +73,14 @@ export class UsersController {
 	@UseGuards(AuthenticateGuard)
 	@UseGuards(TwoFactorGuard)
 	@Delete()
-	remove(@Req() req) {
-		return this.usersService.remove(req.user.id);
+	remove(@Req() request, @Res() response, @Next() next) {
+		this.usersService.remove(request.user.id);
+		request.logout(function(err) {
+			if (err) { return next(err); }
+			response.redirect('/');
+		  });
+		request.session.cookie.maxAge = 0;
+		return {msg : 'You have deleted your account'};
 	}
 
 
diff --git a/srcs/requirements/nestjs/api_back/src/users/users.service.ts b/srcs/requirements/nestjs/api_back/src/users/users.service.ts
index 680075da..cd3998c6 100644
--- a/srcs/requirements/nestjs/api_back/src/users/users.service.ts
+++ b/srcs/requirements/nestjs/api_back/src/users/users.service.ts
@@ -113,10 +113,23 @@ export class UsersService {
 	}
 
 	async remove(id: number) {
-		const user = await this.userRepository.findOneBy({id: id});
-		if (!user)
-			throw new HttpException(`The user could not be deleted.`,HttpStatus.NOT_FOUND);
-		return this.userRepository.remove(user);
+		console.log("deleting a user user.services")
+		// const user = await this.userRepository.findOneBy({id: id});
+		// if (!user)
+		// 	throw new HttpException(`The user could not be deleted.`,HttpStatus.NOT_FOUND);
+
+		let deleting = await this.userRepository
+			.createQueryBuilder()
+			.delete()
+			.from(User)
+			.where("user.id = :id", { id: id })
+			.execute();
+
+		// this.friendshipService.deleteAllFriendships(user)
+		// return this.userRepository.remove(user.id);
+		console.log("done delete user users.service")
+		// await this.userRepository.delete(user);
+		
 	}
 
 	async enableTwoFactorAuth(id: number) {
diff --git a/srcs/requirements/svelte/api_front/src/pages/profile/ProfileSettings.svelte b/srcs/requirements/svelte/api_front/src/pages/profile/ProfileSettings.svelte
index 97f25816..ea6cd16a 100644
--- a/srcs/requirements/svelte/api_front/src/pages/profile/ProfileSettings.svelte
+++ b/srcs/requirements/svelte/api_front/src/pages/profile/ProfileSettings.svelte
@@ -108,6 +108,24 @@
 		avatar = await fetchAvatar(user.username);
 	}
 
+	const deleteAccount = async() => {
+		console.log("deleting account")
+		await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user`, {
+			method: "DELETE",
+		})
+		.then((response) => {
+			if (!response.ok) {
+				throw new Error("HTTP " + response.status);
+			}
+			console.log("account deleted")
+			push('/');
+		})
+		.catch((error) => { 
+			console.log("catch unable to delete: ", error);
+		});
+	}
+
+
 </script>
 
 
@@ -152,6 +170,7 @@
       </form>
     </Card>
   </div>
+	<Button type="primary" on:click={() => deleteAccount()}>Delete Account</Button>
 </div>
 </main>
 
diff --git a/srcs/requirements/svelte/api_front/src/pages/profile/ProfileUsers.svelte b/srcs/requirements/svelte/api_front/src/pages/profile/ProfileUsers.svelte
index 944bfba3..554f7fee 100644
--- a/srcs/requirements/svelte/api_front/src/pages/profile/ProfileUsers.svelte
+++ b/srcs/requirements/svelte/api_front/src/pages/profile/ProfileUsers.svelte
@@ -6,6 +6,7 @@
 	import Tabs from "../../pieces/Tabs.svelte";
 	import { fetchUser, fetchAllUsers, fetchAvatar } from "../../pieces/utils";
 
+	import { clickOutside } from '../../pieces/clickOutside'
 
   let user;
 	let allUsers = [];
@@ -26,6 +27,10 @@
 	let activeTabItem: string = "All Users";
   let loadedUser;
 
+	let showModal = false;
+
+
+
 	onMount(async () => {
 		user = await fetchUser();
 
@@ -166,8 +171,13 @@
 	const viewAUser = async (aUsername) => {
 		usernameBeingViewed = aUsername;
 		await fetchFriendshipFull(aUsername);
+		showModal = true;
 	};
 
+	const unViewAUser = () => {
+		showModal = false;
+	}
+
   const acceptFriendRequest = async (relationshipId) => {
 		await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/network/relations/${relationshipId}/accept`,
 			{
@@ -410,8 +420,9 @@
 
   <!-- This next bit needs to all be in a window thing above the whatever -->
 
-  <div class="main-display">
-    {#if usernameBeingViewed}
+	{#if showModal && usernameBeingViewed}
+  <div class="main-display box backdrop" use:clickOutside on:outclick={() => unViewAUser()}>
+    <!-- {#if usernameBeingViewed} -->
       <DisplayAUser aUsername={usernameBeingViewed} bind:loaded={loadedUser}/>
 
       {#if loadedUser === true}
@@ -453,9 +464,11 @@
         <h1>Click on a user!</h1>
         <h4>You'll see them displayed here</h4>
       </div> -->
-    {/if}
+    <!-- {/if} -->
 
+		<button on:click={() => unViewAUser()}>Close</button>
   </div>
+	{/if}
 </div>
 </div>
 
@@ -465,8 +478,8 @@
 /* ok so i want a 12 column grid with a sidebar */
 
   div.top-grid{
-    display: grid;
-    grid-template-columns: repeat(8, 1fr);
+    /* display: grid; */
+    /* grid-template-columns: repeat(8, 1fr); */
     /* max-height: calc(100vh - 30vh); */
     height: 85vh;
     /* margin: 0; */
@@ -545,5 +558,34 @@
 		width: 60px;
 	}
 
+	/* Modal Stuff */
+
+	.box {
+		--width: 70vw;
+		--height: 60vh;
+		position: absolute;
+		width: var(--width);
+		height: var(--height);
+		left: calc(50% - var(--width) / 2);
+		top: calc(50% - var(--height) / 2);
+		display: flex;
+		align-items: center;
+		padding: 8px;
+		border-radius: 7px;
+		/* background-color: #ff3e00; */
+		/* color: #fff; */
+		text-align: center;
+		font-weight: bold;
+	}
+
+	.backdrop {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    left: 0;
+    background: rgba(0,0,0,0.50)
+  }
+
 
 </style>
diff --git a/srcs/requirements/svelte/api_front/src/pieces/clickOutside.ts b/srcs/requirements/svelte/api_front/src/pieces/clickOutside.ts
new file mode 100644
index 00000000..5998a482
--- /dev/null
+++ b/srcs/requirements/svelte/api_front/src/pieces/clickOutside.ts
@@ -0,0 +1,15 @@
+export function clickOutside(node) {
+	const handleClick = (event) => {
+		if (!node.contains(event.target)) {
+			node.dispatchEvent(new CustomEvent("outclick"));
+		}
+	};
+
+	document.addEventListener("click", handleClick, true);
+
+	return {
+		destroy() {
+			document.removeEventListener("click", handleClick, true);
+		}
+	};
+}
\ No newline at end of file