diff --git a/components/CropPopup.vue b/components/CropPopup.vue
index 744b963..12c3a0b 100644
--- a/components/CropPopup.vue
+++ b/components/CropPopup.vue
@@ -1,15 +1,14 @@
 <template>
   <div id="fullscreen-container">
     <div id="crop-preview">
-      <img ref="image" :src="imageSrc" style="min-height: 500px;">
-      <Button class="button" text="Crop" :callback="cropImage"></Button>
-      <Button class="button" text="Cancel" :callback="closePopup"></Button>
+      <img ref="image" :src="imageSrc" style="min-height: 35dvh;">
+      <Button text="Crop" :callback="cropImage"></Button>
+      <Button text="Cancel" :callback="closePopup"></Button>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { ref, watch } from 'vue';
 import Cropper from 'cropperjs';
 
 const props = defineProps({
@@ -82,7 +81,7 @@ function closePopup() {
   width: 100%;
   height: 100%;
   z-index: 10;
-  background: rgba(0,0,0,0.5);
+  background: rgba(0, 0, 0, 0.5);
 }
 
 #crop-preview {
diff --git a/components/Settings/UserSettings/Profile.vue b/components/Settings/UserSettings/Profile.vue
index b3d9f20..8d79a9a 100644
--- a/components/Settings/UserSettings/Profile.vue
+++ b/components/Settings/UserSettings/Profile.vue
@@ -33,22 +33,19 @@
 </template>
 
 <script lang="ts" setup>
-import Button from '~/components/Button.vue';
-import CropPopup from '~/components/CropPopup.vue';
 import type { UserResponse } from '~/types/interfaces';
 
+let newPfpFile: File;
+const isCropPopupVisible = ref(false);
+const cropImageSrc = ref("")
+;
 const { fetchUser } = useAuth();
 
-
 const user: UserResponse | undefined = await fetchUser()
 if (!user) {
   alert("could not fetch user info, aborting :(")
 }
 
-let newPfpFile: File;
-const isCropPopupVisible = ref(false);
-const cropImageSrc = ref('');
-
 async function saveChanges() {
   if (!user) return;