diff --git a/components/CropPopup.vue b/components/CropPopup.vue
deleted file mode 100644
index 2e1a6b1..0000000
--- a/components/CropPopup.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<template>
-  <div class="crop-popup">
-    <div class="crop-container">
-      <img ref="image" :src="imageSrc" alt="Picture">
-    </div>
-    <div class="image-preview"></div>
-    <Button text="Crop" :callback="cropImage"></Button>
-    <Button text="Cancel" :callback="closePopup"></Button>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { ref, watch } from 'vue';
-import Cropper from 'cropperjs';
-
-const props = defineProps({
-  imageSrc: String,
-  onCrop: Function,
-  onClose: Function,
-});
-
-const image = ref<HTMLImageElement | null>(null);
-const cropper = ref<Cropper | null>(null);
-
-watch(image, (newValue) => {
-  if (newValue) {
-    cropper.value = new Cropper(newValue)
-    const selection = cropper.value.getCropperSelection()
-    if (selection) {
-      selection.precise = true
-      selection.aspectRatio = 1
-      selection.initialCoverage = 1
-    }
-  }
-});
-
-async function cropImage() {
-  if (cropper) {
-    cropper.value?.element
-    const selection = cropper.value?.getCropperSelection();
-    if (selection) {
-      const canvas = await selection.$toCanvas({width: 256, height: 256})
-      console.log(canvas)
-      canvas.toBlob((blob) => {
-        if (blob && props.onCrop) {
-          props.onCrop(blob);
-        }
-      });
-    }
-  }
-}
-
-function closePopup() {
-  if (props.onClose) {
-    props.onClose();
-  }
-}
-</script>
-
-<style scoped>
-</style>
diff --git a/components/MemberEntry.vue b/components/MemberEntry.vue
index c77c429..3eed3c5 100644
--- a/components/MemberEntry.vue
+++ b/components/MemberEntry.vue
@@ -3,7 +3,7 @@
         <img v-if="props.member.user.avatar" class="member-avatar" :src="props.member.user.avatar" :alt="props.member.user.display_name ?? props.member.user.username" />
         <Icon v-else class="member-avatar" name="lucide:user" />
         <span class="member-display-name">{{ props.member.user.display_name ?? props.member.user.username }}</span>
-        <UserPopup v-if="isPopupVisible" :user="props.member.user" id="profile-popup" />
+        <UserPopup v-if="isPopupVisible" :user="props.member.user" class="profile-popup" />
     </div>
 </template>
 
@@ -32,4 +32,9 @@ const hidePopup = () => {
 .member-item {
     position: relative; /* Set the position to relative for absolute positioning of the popup */
 }
+
+.profile-popup {
+    position: absolute; /* Use absolute positioning */
+    left: -100px; /* Adjust this value to position the popup to the left */
+}
 </style>
diff --git a/components/Settings/UserSettings/Account.vue b/components/Settings/UserSettings/Account.vue
index ffbb9d7..85589e7 100644
--- a/components/Settings/UserSettings/Account.vue
+++ b/components/Settings/UserSettings/Account.vue
@@ -93,4 +93,8 @@ async function deleteAccount() {
   color: var(--text-color);
   background-color: var(--accent-color);
 }
+
+.profile-popup {
+  margin-left: 2dvw;
+}
 </style>
\ No newline at end of file
diff --git a/components/Settings/UserSettings/Profile.vue b/components/Settings/UserSettings/Profile.vue
index 1df8c44..13a717a 100644
--- a/components/Settings/UserSettings/Profile.vue
+++ b/components/Settings/UserSettings/Profile.vue
@@ -20,24 +20,13 @@
         <Button style="margin-top: 2dvh" text="Save Changes" :callback="saveChanges"></Button>
       </div>
 
-      <UserPopup v-if="user" :user="user" id="profile-popup"></UserPopup>
-
-      <CropPopup 
-        v-if="isCropPopupVisible" 
-        :imageSrc="cropImageSrc" 
-        :onCrop="handleCrop" 
-        :onClose="closeCropPopup" 
-      />
+      <UserPopup v-if="user" :user="user" class="profile-popup"></UserPopup>
     </div>
   </div>
-
-  <div id="crop-container">
-  </div>
 </template>
 
 <script lang="ts" setup>
 import Button from '~/components/Button.vue';
-import CropPopup from '~/components/CropPopup.vue';
 import type { UserResponse } from '~/types/interfaces';
 
 const { fetchUser } = useAuth();
@@ -49,8 +38,6 @@ if (!user) {
 }
 
 let newPfpFile: File;
-const isCropPopupVisible = ref(false); // State to manage the visibility of the CropPopup
-const cropImageSrc = ref(''); // State to hold the image source for cropping
 
 async function saveChanges() {
   if (!user) return;
@@ -106,8 +93,7 @@ async function changeAvatar() {
       const reader = new FileReader();
       reader.addEventListener("load", () => {
         if (reader.result && typeof reader.result === 'string') {
-          cropImageSrc.value = reader.result;
-          isCropPopupVisible.value = true;
+          user.avatar = reader.result;
         }
       });
       reader.readAsDataURL(file);
@@ -116,27 +102,6 @@ async function changeAvatar() {
 
   input.click()
 }
-
-
-function handleCrop(blob: Blob) {
-  if (!user) return;
-
-  newPfpFile = new File([blob], 'avatar.png', { type: 'image/png' })
-
-  const reader = new FileReader();
-  reader.addEventListener("load", () => {
-    if (reader.result && typeof reader.result === 'string') {
-      user.avatar = reader.result;
-    }
-  });
-  reader.readAsDataURL(newPfpFile)
-
-  closeCropPopup()
-}
-
-function closeCropPopup() {
-  isCropPopupVisible.value = false
-}
 </script>
 
 <style scoped>
@@ -168,7 +133,7 @@ function closeCropPopup() {
   background-color: var(--accent-color);
 }
 
-#profile-popup {
+.profile-popup {
   margin-left: 2dvw;
 }
 </style>
\ No newline at end of file
diff --git a/package.json b/package.json
index 5d7d19e..b67a598 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,6 @@
     "@nuxt/icon": "1.13.0",
     "@nuxt/image": "1.10.0",
     "@pinia/nuxt": "0.11.0",
-    "cropperjs": "^2.0.0",
     "dompurify": "^3.2.6",
     "marked": "^15.0.12",
     "nuxt": "^3.17.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6a8cf2c..07816d4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -20,9 +20,6 @@ importers:
       '@pinia/nuxt':
         specifier: 0.11.0
         version: 0.11.0(magicast@0.3.5)(pinia@3.0.2(typescript@5.8.3)(vue@3.5.13(typescript@5.8.3)))
-      cropperjs:
-        specifier: ^2.0.0
-        version: 2.0.0
       dompurify:
         specifier: ^3.2.6
         version: 3.2.6
@@ -208,39 +205,6 @@ packages:
     resolution: {integrity: sha512-Ir+AOibqzrIsL6ajt3Rz3LskB7OiMVHqltZmspbW/TJuTVuyOMirVqAkjfY6JISiLHgyNqicAC8AyHHGzNd/dA==}
     engines: {node: '>=0.1.90'}
 
-  '@cropper/element-canvas@2.0.0':
-    resolution: {integrity: sha512-GPtGJgSm92crJhhhwUsaMw3rz2KfJWWSz7kRAlufFEV/EHTP5+6r6/Z1BCGRna830i+Avqbm435XLOtA7PVJwA==}
-
-  '@cropper/element-crosshair@2.0.0':
-    resolution: {integrity: sha512-KfPfyrdeFvUC31Ws7ATtcalWWSaMtrC6bMoCipZhqbUOE7wZoL4ecDSL6BUOZxPa74awZUqfzirCDjHvheBfyw==}
-
-  '@cropper/element-grid@2.0.0':
-    resolution: {integrity: sha512-i78SQ0IJTLFveKX6P7svkfMYVdgHrQ8ZmmEw8keFy9n1ZVbK+SK0UHK5FNMRNI/gtVhKJOGEnK/zeyjUdj4Iyw==}
-
-  '@cropper/element-handle@2.0.0':
-    resolution: {integrity: sha512-ZJvW+0MkK9E8xYymGdoruaQn2kwjSHFpNSWinjyq6csuVQiCPxlX5ovAEDldmZ9MWePPtWEi3vLKQOo2Yb0T8g==}
-
-  '@cropper/element-image@2.0.0':
-    resolution: {integrity: sha512-9BxiTS/aHRmrjopaFQb9mQQXmx4ruhYHGkDZMVz24AXpMFjUY6OpqrWse/WjzD9tfhMFvEdu17b3VAekcAgpeg==}
-
-  '@cropper/element-selection@2.0.0':
-    resolution: {integrity: sha512-ensNnbIfJsJ8bhbJTH/RXtk2URFvTOO4TvfRk461n2FPEC588D7rwBmUJxQg74IiTi4y1JbCI+6j+4LyzYBLCQ==}
-
-  '@cropper/element-shade@2.0.0':
-    resolution: {integrity: sha512-jv/2bbNZnhU4W+T4G0c8ADocLIZvQFTXgCf2RFDNhI5UVxurzWBnDdb8Mx8LnVplnkTqO+xUmHZYve0CwgWo+Q==}
-
-  '@cropper/element-viewer@2.0.0':
-    resolution: {integrity: sha512-zY+3VRN5TvpM8twlphYtXw0tzJL2VgzeK7ufhL1BixVqOdRxwP13TprYIhqwGt9EW/SyJZUiaIu396T89kRX8A==}
-
-  '@cropper/element@2.0.0':
-    resolution: {integrity: sha512-lsthn0nQq73GExUE7Mg/ss6Q3RXADGDv055hxoLFwvl/wGHgy6ZkYlfLZ/VmgBHC6jDK5IgPBFnqrPqlXWSGBA==}
-
-  '@cropper/elements@2.0.0':
-    resolution: {integrity: sha512-PQkPo1nUjxLFUQuHYu+6atfHxpX9B41Xribao6wpvmvmNIFML6LQdNqqWYb6LyM7ujsu71CZdBiMT5oetjJVoQ==}
-
-  '@cropper/utils@2.0.0':
-    resolution: {integrity: sha512-cprLYr+7kK3faGgoOsTW9gIn5sefDr2KwOmgyjzIXk+8PLpW8FgFKEg5FoWfRD5zMAmkCBuX6rGKDK3VdUEGrg==}
-
   '@dabh/diagnostics@2.0.3':
     resolution: {integrity: sha512-hrlQOIi7hAfzsMqlGSFyVucrx38O+j6wiGOf//H2ecvIEqYN4ADBSS2iLMh5UFyDunCNniUIPk/q3riFv45xRA==}
 
@@ -1936,9 +1900,6 @@ packages:
     resolution: {integrity: sha512-onMB0OkDjkXunhdW9htFjEhqrD54+M94i6ackoUkjHKbRnXdyEyKRelp4nJ1kAz32+s27jP1FsebpJCVl0BsvA==}
     engines: {node: '>=18.0'}
 
-  cropperjs@2.0.0:
-    resolution: {integrity: sha512-TO2j0Qre01kPHbow4FuTrbdEB4jTmGRySxW49jyEIqlJZuEBfrvCTT0vC3eRB2WBXudDfKi1Onako6DKWKxeAQ==}
-
   cross-spawn@7.0.6:
     resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
     engines: {node: '>= 8'}
@@ -5004,72 +4965,6 @@ snapshots:
 
   '@colors/colors@1.6.0': {}
 
-  '@cropper/element-canvas@2.0.0':
-    dependencies:
-      '@cropper/element': 2.0.0
-      '@cropper/utils': 2.0.0
-
-  '@cropper/element-crosshair@2.0.0':
-    dependencies:
-      '@cropper/element': 2.0.0
-      '@cropper/utils': 2.0.0
-
-  '@cropper/element-grid@2.0.0':
-    dependencies:
-      '@cropper/element': 2.0.0
-      '@cropper/utils': 2.0.0
-
-  '@cropper/element-handle@2.0.0':
-    dependencies:
-      '@cropper/element': 2.0.0
-      '@cropper/utils': 2.0.0
-
-  '@cropper/element-image@2.0.0':
-    dependencies:
-      '@cropper/element': 2.0.0
-      '@cropper/element-canvas': 2.0.0
-      '@cropper/utils': 2.0.0
-
-  '@cropper/element-selection@2.0.0':
-    dependencies:
-      '@cropper/element': 2.0.0
-      '@cropper/element-canvas': 2.0.0
-      '@cropper/element-image': 2.0.0
-      '@cropper/utils': 2.0.0
-
-  '@cropper/element-shade@2.0.0':
-    dependencies:
-      '@cropper/element': 2.0.0
-      '@cropper/element-canvas': 2.0.0
-      '@cropper/element-selection': 2.0.0
-      '@cropper/utils': 2.0.0
-
-  '@cropper/element-viewer@2.0.0':
-    dependencies:
-      '@cropper/element': 2.0.0
-      '@cropper/element-canvas': 2.0.0
-      '@cropper/element-image': 2.0.0
-      '@cropper/element-selection': 2.0.0
-      '@cropper/utils': 2.0.0
-
-  '@cropper/element@2.0.0':
-    dependencies:
-      '@cropper/utils': 2.0.0
-
-  '@cropper/elements@2.0.0':
-    dependencies:
-      '@cropper/element': 2.0.0
-      '@cropper/element-canvas': 2.0.0
-      '@cropper/element-crosshair': 2.0.0
-      '@cropper/element-grid': 2.0.0
-      '@cropper/element-handle': 2.0.0
-      '@cropper/element-image': 2.0.0
-      '@cropper/element-selection': 2.0.0
-      '@cropper/element-shade': 2.0.0
-      '@cropper/element-viewer': 2.0.0
-
-  '@cropper/utils@2.0.0': {}
-
   '@dabh/diagnostics@2.0.3':
     dependencies:
       colorspace: 1.1.4
@@ -7000,11 +6895,6 @@ snapshots:
 
   croner@9.0.0: {}
 
-  cropperjs@2.0.0:
-    dependencies:
-      '@cropper/elements': 2.0.0
-      '@cropper/utils': 2.0.0
-
   cross-spawn@7.0.6:
     dependencies:
       path-key: 3.1.1