diff --git a/package.json b/package.json
index c165fc5c..7c856207 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,7 @@
   "dependencies": {
     "@aws-sdk/client-s3": "^3.216.0",
     "@aws-sdk/s3-presigned-post": "^3.216.0",
+    "@solid-primitives/upload": "^0.0.105",
     "mailgun.js": "^8.0.2"
   },
   "devDependencies": {
diff --git a/src/components/Pages/profile/ProfileSettingsPage.tsx b/src/components/Pages/profile/ProfileSettingsPage.tsx
index a6b87051..0d0d2334 100644
--- a/src/components/Pages/profile/ProfileSettingsPage.tsx
+++ b/src/components/Pages/profile/ProfileSettingsPage.tsx
@@ -7,6 +7,7 @@ import { For, createSignal, Show } from 'solid-js'
 import { clsx } from 'clsx'
 import styles from './Settings.module.scss'
 import { useProfileForm } from '../../../context/profile'
+import { createFileUploader } from '@solid-primitives/upload'
 
 export const ProfileSettingsPage = (props: PageProps) => {
   const [addLinkForm, setAddLinkForm] = createSignal<boolean>(false)
@@ -19,6 +20,19 @@ export const ProfileSettingsPage = (props: PageProps) => {
     event.preventDefault()
     submit(form)
   }
+  const { selectFiles: selectFilesAsync } = createFileUploader({ accept: 'image/*' })
+
+  const handleUpload = () => {
+    selectFilesAsync(async ([{ source, name, size, file }]) => {
+      try {
+        console.log({ source, name, size, file })
+        // DO UPLOAD STUFF HERE AND RETURN URL
+      } catch (error) {
+        console.log(error)
+      }
+    })
+  }
+
   return (
     <PageWrap>
       <Show when={form}>
@@ -38,12 +52,7 @@ export const ProfileSettingsPage = (props: PageProps) => {
                   <div class="pretty-form__item">
                     <div class={styles.avatarContainer}>
                       <img class={styles.avatar} src={form.userpic} alt={form.name} />
-                      <input
-                        type="file"
-                        name="avatar"
-                        class={styles.avatarInput}
-                        accept="image/jpeg,image/png,image/gif,image/webp"
-                      />
+                      <button type="button" class={styles.avatarInput} onClick={handleUpload} />
                     </div>
                   </div>
                   <h4>{t('Name')}</h4>
diff --git a/src/components/types.ts b/src/components/types.ts
index b0d5489a..4016a693 100644
--- a/src/components/types.ts
+++ b/src/components/types.ts
@@ -22,3 +22,10 @@ export type RootSearchParams = {
   modal: string
   lang: string
 }
+
+export type UploadFile = {
+  source: string
+  name: string
+  size: number
+  file: File
+}
diff --git a/yarn.lock b/yarn.lock
index 518bd29f..aa48c6c7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2818,6 +2818,13 @@
   dependencies:
     "@solid-primitives/rootless" "^1.2.0"
 
+"@solid-primitives/upload@^0.0.105":
+  version "0.0.105"
+  resolved "https://registry.yarnpkg.com/@solid-primitives/upload/-/upload-0.0.105.tgz#cf415667c0fae842dbf2470554dc0c28e8ba4fac"
+  integrity sha512-991xLetzr25NIeuAtWpYmJSA7lJ0HSOJT9sl3sRtgpR4+QJEDIsM4lw2iYYpw7XUFGBqqX2CHI5TitvYzy/Maw==
+  dependencies:
+    "@solid-primitives/utils" "^4.0.0"
+
 "@solid-primitives/utils@^3.1.0":
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/@solid-primitives/utils/-/utils-3.1.0.tgz#52edf36dabe62eba94f8356c3b9b788234d088a8"