diff --git a/package-lock.json b/package-lock.json
index 21979367..9f2ce7bb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3103,9 +3103,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.22",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.22.tgz",
-      "integrity": "sha512-XseknLAfRHzVWjCEtdviapiBtfLdgyzExD50Rg2ePaucEesyh8Wv4VPdW0nbyDa1ydbrAxV19jvMT4+LFmcNUA==",
+      "version": "8.4.31",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
+      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
       "funding": [
         {
           "type": "opencollective",
diff --git a/src/Components/Profile/Settings.tsx b/src/Components/Profile/Settings.tsx
index cd212ed8..c68a51f9 100644
--- a/src/Components/Profile/Settings.tsx
+++ b/src/Components/Profile/Settings.tsx
@@ -1,9 +1,9 @@
 import { useEffect, useState } from 'react'
-import {TitleCard} from '../Templates/TitleCard'
-import {TextInput} from '../Input/TextInput'
-import {TextAreaInput} from '../Input/TextAreaInput'
+import { TitleCard } from '../Templates/TitleCard'
+import { TextInput } from '../Input/TextInput'
+import { TextAreaInput } from '../Input/TextAreaInput'
 import { toast } from 'react-toastify';
-import {useNavigate} from 'react-router-dom'
+import { useNavigate } from 'react-router-dom'
 import { useAuth } from '../Auth';
 import * as React from 'react'
 
@@ -12,7 +12,7 @@ import { UserItem } from '../../types';
 
 export function Settings() {
 
-  const { user, updateUser, loading } = useAuth();
+  const { user, updateUser, loading, token } = useAuth();
 
   const [id, setId] = useState<string>("");
   const [name, setName] = useState<string>("");
@@ -38,8 +38,8 @@ export function Settings() {
 
   const onUpdateUser = () => {
     let changedUser = {} as UserItem;
-  
-    if(passwordChanged) {
+
+    if (passwordChanged) {
       changedUser = { id: id, first_name: name, description: text, email: email, password: password };
     }
     else {
@@ -61,23 +61,26 @@ export function Settings() {
     <main className="tw-flex-1 tw-overflow-y-auto tw-overflow-x-hidden tw-pt-8 tw-px-6 tw-bg-base-200 tw-min-w-80 tw-flex tw-justify-center" >
       <div className='tw-w-full xl:tw-max-w-6xl'>
         <TitleCard title="Profile Settings" topMargin="tw-mt-2">
-
-
-          <div className="tw-grid tw-grid-cols-1 tw-md:grid-cols-2 tw-gap-6">
-            <TextInput placeholder="Name" defaultValue={user?.first_name ? user.first_name : ""} updateFormValue={(v) => setName(v)} />
+          <div className="tw-flex">
+              <img src={"https://api.utopia-lab.org/assets/" + user?.avatar + "?access_token=" + token} className='tw-w-20 tw-rounded-full' />
+              <TextInput placeholder="Name" defaultValue={user?.first_name ? user.first_name : ""} updateFormValue={(v) => setName(v)} containerStyle='tw-grow tw-ml-6 tw-my-auto '/>
+          </div>
+          <div className="tw-flex tw-mt-2">
+            <button className='tw-btn tw-w-20'>Upload</button>
+            <TextInput placeholder="Color" defaultValue="#4f5532" containerStyle='tw-grow tw-ml-6'/>
           </div>
           <div className="tw-grid tw-grid-cols-1 tw-md:grid-cols-1 tw-gap-6 tw-pt-6 tw-pb-6">
-            <TextAreaInput placeholder="About me, Contact, #Tags, ..." defaultValue={user?.description ? user.description : ""} updateFormValue={(v) => setText(v)} inputStyle='tw-h-64'/>
+            <TextAreaInput placeholder="About me, Contact, #Tags, ..." defaultValue={user?.description ? user.description : ""} updateFormValue={(v) => setText(v)} inputStyle='tw-h-64' />
           </div>
           <div className="tw-divider" ></div>
 
 
           <div className="tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6">
-          <TextInput type='email' placeholder="E-Mail" defaultValue={user?.email ? user.email : ""} updateFormValue={(v) => setEmail(v)} />
-          <TextInput type='password' placeholder="new Password" defaultValue={user?.password ? user.password : ""} updateFormValue={(v) => {
-            setPassword(v);
-            setPasswordChanged(true);
-          }} />
+            <TextInput type='email' placeholder="E-Mail" defaultValue={user?.email ? user.email : ""} updateFormValue={(v) => setEmail(v)} />
+            <TextInput type='password' placeholder="new Password" defaultValue={user?.password ? user.password : ""} updateFormValue={(v) => {
+              setPassword(v);
+              setPasswordChanged(true);
+            }} />
             {/* <ToogleInput updateType="syncData" labelTitle="Sync Data" defaultValue={true} updateFormValue={updateFormValue}/> */}
           </div>