diff --git a/app/components/ActiveSubscription/index.tsx b/app/components/ActiveSubscription/index.tsx
index 0cd080d..0ffa892 100644
--- a/app/components/ActiveSubscription/index.tsx
+++ b/app/components/ActiveSubscription/index.tsx
@@ -2,8 +2,6 @@ import React from 'react';
 import BigNumber from 'bignumber.js';
 
 import { fromBaseToken } from '~/helpers/formatters';
-import Modal from '../Modal';
-import { PrimaryButton } from '~/components/common/Button';
 import EmptyState from '~/components/common/EmptyState';
 import { SubscriptionInfoProps } from './types';
 import { TOKEN, DEV_SHARE, Subscription } from '~/configs';
@@ -52,25 +50,6 @@ const ActiveSubscription = ({ data }: { data: Subscription | null }) => {
   return (
     <section className="component activeSubscription">
       <SubscriptionInfo data={data} />
-      <Modal className="subscriptionFooter">
-        <div className="wrapper">
-          <figure>
-            <img
-              className="svg"
-              src="/images/letter.svg"
-              alt="Letter icon"
-            />
-          </figure>
-          <header>
-            <h4>
-              Spread the word of Muzikie
-              <br />
-              let others enjoy free music too
-            </h4>
-          </header>
-          <PrimaryButton theme="white">Share link</PrimaryButton>
-        </div>
-      </Modal>
     </section>
   );
 };
diff --git a/app/components/CreateAudio/index.tsx b/app/components/CreateAudio/index.tsx
index 2616f4b..a172529 100644
--- a/app/components/CreateAudio/index.tsx
+++ b/app/components/CreateAudio/index.tsx
@@ -12,6 +12,7 @@ import { Link } from '~/components/common/Link';
 import Feedback from '~/components/Feedback';
 import { ROUTES } from '~/routes/routes';
 import { VALID_GENRES } from '~/configs';
+import { getFormErrorMessage } from '~/helpers/helpers';
 import { CollectionInfo } from './types';
 
 const CreateAudio = ({ CollectionInfo, creatorAddress }: CollectionInfo) => {
@@ -24,7 +25,7 @@ const CreateAudio = ({ CollectionInfo, creatorAddress }: CollectionInfo) => {
       name: '',
       releaseYear: '',
       collectionID: '',
-      genre: 0,
+      genre: '',
       files: null,
       owners: [{
         address: creatorAddress,
@@ -48,14 +49,14 @@ const CreateAudio = ({ CollectionInfo, creatorAddress }: CollectionInfo) => {
     await signAndBroadcast(data);
   };
 
-  const errorMessage = formState.errors && (Object.values(formState.errors)[0]?.message as string);
+  const errorMessage = getFormErrorMessage(formState);
   const formError = errorMessage
     ? {
       message: errorMessage,
       error: true,
     }
     : broadcastStatus;
-
+  
   return (
     <form onSubmit={handleSubmit(onSubmit)} className="component createAudio">
       <fieldset>
@@ -63,13 +64,15 @@ const CreateAudio = ({ CollectionInfo, creatorAddress }: CollectionInfo) => {
           {...register('name', { required: true })}
           placeholder="Enter name"
           type="text"
+          className={formState.errors.name ? 'error' : ''}
         />
         <Input
           {...register('releaseYear', { required: true })}
           placeholder="Release year"
           type="text"
+          className={formState.errors.releaseYear ? 'error' : ''}
         />
-        <div className="collectionRow">
+        <div className={`collectionRow ${formState.errors.collectionID ? 'error' : ''}`}>
           <Select
             {...register('collectionID', { required: true })}
             placeholder="Select a collection (Collection)"
@@ -84,7 +87,8 @@ const CreateAudio = ({ CollectionInfo, creatorAddress }: CollectionInfo) => {
         <Select
           {...register('genre', { required: true })}
           placeholder="Select a genre"
-          options={VALID_GENRES}
+          options={VALID_GENRES.sort((a, b) => a.label.localeCompare(b.label))}
+          className={formState.errors.releaseYear ? 'error' : ''}
         />
         <fieldset className="royaltyOwners">
           <legend>
@@ -99,13 +103,13 @@ const CreateAudio = ({ CollectionInfo, creatorAddress }: CollectionInfo) => {
             fields.map(({ address }, index: number) => (
               <fieldset key={address + index} className="ownerItem">
                 <Input
-                  className="input"
+                  className={`input ${formState.errors.owners && formState.errors.owners[index] ? 'error' : ''}`}
                   placeholder="Owner's wallet address"
                   type="text"
                   {...register(`owners.${index}.address`, { required: false })} 
                 />
                 <Input
-                  className="input"
+                  className={`input ${formState.errors.owners && formState.errors.owners[index] ? 'error' : ''}`}
                   placeholder="Owner's royalty shares (%)"
                   type="text"
                   {...register(`owners.${index}.shares`, { required: false })} 
@@ -125,9 +129,13 @@ const CreateAudio = ({ CollectionInfo, creatorAddress }: CollectionInfo) => {
           accept=".mp3,.wav"
           multiple={false}
           placeholder="Upload MP3"
+          className={formState.errors.files ? 'error' : ''}
         />
       </fieldset>
-      <PrimaryButton type="submit" disabled={formError.loading || formError.error}>
+      <PrimaryButton
+        type="submit"
+        disabled={formError.loading || formError.error}
+      >
         <span>{broadcastStatus.loading ? 'loading...' : 'Create'}</span>
       </PrimaryButton>
       <Feedback data={formError} />
diff --git a/app/components/CreateCollection/index.tsx b/app/components/CreateCollection/index.tsx
index c352828..2da7e2a 100644
--- a/app/components/CreateCollection/index.tsx
+++ b/app/components/CreateCollection/index.tsx
@@ -29,7 +29,7 @@ const CreateCollection = () => {
   const onSubmit = async (data: Record<string, any>) => {
     await signAndBroadcast(data);
   };
-  const errorMessage = formState.errors && (Object.values(formState.errors)[0]?.message as string);
+  const errorMessage = (Object.values(formState.errors)[0]?.message as string);
   const formError = errorMessage
     ? {
       message: errorMessage,
@@ -44,16 +44,19 @@ const CreateCollection = () => {
           {...register('name', { required: true })}
           placeholder="Enter name"
           type="text"
+          className={formState.errors.name ? 'error' : ''}
         />
         <Input
           {...register('releaseYear', { required: true })}
           placeholder="Release year"
           type="text"
+          className={formState.errors.releaseYear ? 'error' : ''}
         />
         <Select
           {...register('collectionType', { required: true })}
           placeholder="Select a collection type"
           options={VALID_COLLECTION_TYPES}
+          className={formState.errors.collectionType ? 'error' : ''}
         />
         <FileInput
           {...register('files', { required: true })}
@@ -61,10 +64,11 @@ const CreateCollection = () => {
           accept=".png,.jpg,.jpeg"
           multiple={false}
           placeholder="Upload cover image"
+          className={formState.errors.files ? 'error' : ''}
         />
       </fieldset>
-      <PrimaryButton type="submit">
-        <>{broadcastStatus.loading ? <span>loading...</span> : <span>Create</span>}</>
+      <PrimaryButton type="submit" disabled={formError.loading || formError.error}>
+        <span>{broadcastStatus.loading ? 'loading...' : 'Create'}</span>
       </PrimaryButton>
       <Feedback data={formError} />
     </form>
diff --git a/app/components/EditProfile/index.tsx b/app/components/EditProfile/index.tsx
index ec45ca4..1855d56 100644
--- a/app/components/EditProfile/index.tsx
+++ b/app/components/EditProfile/index.tsx
@@ -7,11 +7,25 @@ import { Input, FileInput, Textarea } from '~/components/common/Input';
 import { IconButton, PrimaryButton } from '~/components/common/Button';
 import Feedback from '~/components/Feedback';
 import { useCreateProfile } from '~/hooks/useCreateEntity';
-import { socialPlatformNames } from '~/configs';
+import {
+  socialPlatformNames,
+  SocialAccountPlatform,
+  SocialAccount,
+} from '~/configs';
 import { profileSchema } from '~/hooks/useCreateEntity/schemas';
 import { ProfileEditProps } from './types';
 import './profileDetails.css';
 
+const fillSocialMediaInputs = (values: SocialAccount[]) =>
+  [
+    SocialAccountPlatform.Instagram,
+    SocialAccountPlatform.Twitter,
+    SocialAccountPlatform.Youtube,
+  ].map((platform) => ({
+    platform,
+    username: values.find((value) => value.platform === platform)?.username ?? '',
+  }));
+
 const ProfileEdit = ({ data }: ProfileEditProps) => {
   const { signAndBroadcast, broadcastStatus } = useCreateProfile();
 
@@ -27,18 +41,20 @@ const ProfileEdit = ({ data }: ProfileEditProps) => {
     resolver: yupResolver(profileSchema),
     mode: 'onBlur', // validate on blur
     shouldFocusError: true, // focus on input with an error after submission
-    defaultValues,
+    defaultValues: {
+      ...defaultValues,
+      socialAccounts: fillSocialMediaInputs(defaultValues.socialAccounts),
+    },
   });
   const { fields, remove } = useFieldArray({
     control,
-    rules: { minLength: 3 },
     name: 'socialAccounts',
   });
 
   const onSubmit = async (formValues: Record<string, unknown>) => {
     await signAndBroadcast(formValues, data);
   };
-  const errorMessage = formState.errors && (Object.values(formState.errors)[0]?.message as string);
+  const errorMessage = (Object.values(formState.errors)[0]?.message as string);
   const formError = errorMessage
     ? {
       message: errorMessage,
@@ -53,7 +69,7 @@ const ProfileEdit = ({ data }: ProfileEditProps) => {
             accept=".png,.jpg,.jpeg"
             multiple={false}
             placeholder="Click to update banner"
-            className="fileInput"
+            className={`fileInput ${formState.errors.banner ? 'error' : ''}`}
             {...register('banner', { required: false })}
           />
           <FileInput
@@ -61,25 +77,28 @@ const ProfileEdit = ({ data }: ProfileEditProps) => {
             accept=".png,.jpg,.jpeg"
             multiple={false}
             placeholder="Click to update Avatar"
-            className="fileInput"
+            className={`fileInput ${formState.errors.avatar ? 'error' : ''}`}
           />
           <Input
             {...register('name', { required: false })}
             name="name"
             placeholder="Enter name"
             type="text"
+            className={formState.errors.name ? 'error' : ''}
           />
           <Input
             {...register('nickName', { required: false })}
             name="nickName"
             placeholder="Enter nickname"
             type="text"
+            className={formState.errors.nickName ? 'error' : ''}
           />
           <Textarea
             {...register('description', { required: false })}
             name="description"
-            placeholder="Describe yourself"
-            className="descriptionInput"
+            placeholder="Describe yourself (255 characters max, make it short and sweet)"
+            className={`descriptionInput ${formState.errors.banner ? 'error' : ''}`}
+            maxLength={255}
           />
           {
             fields.map(({ platform }) => (
@@ -102,7 +121,7 @@ const ProfileEdit = ({ data }: ProfileEditProps) => {
         <PrimaryButton
           type="submit"
           className="button"
-          disabled={formError.error}
+          disabled={formError.loading || formError.error}
         >
           {broadcastStatus.loading ? 'loading...' : 'Save'}
         </PrimaryButton>
diff --git a/app/components/MainMenu/index.tsx b/app/components/MainMenu/index.tsx
index 293f1ca..0b76cd2 100644
--- a/app/components/MainMenu/index.tsx
+++ b/app/components/MainMenu/index.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { useLocation } from 'react-router-dom';
 
 /* Internal dependencies */
@@ -8,6 +8,7 @@ import { ROUTES } from '~/routes/routes';
 import { useAccount } from '~/hooks/useAccount/useAccount';
 
 const MainMenu = () => {
+  const menuRef = useRef<HTMLElement>(null);
   const [isActive, setIsActive] = useState(false);
   const { isLoggedIn } = useAccount();
   const location = useLocation();
@@ -20,8 +21,22 @@ const MainMenu = () => {
     setIsActive(false);
   }, [location.pathname]);
 
+  useEffect(() => {
+    const handleOutsideClick = (e: MouseEvent) => {
+      if (menuRef.current && !menuRef.current.contains(e.target)) {
+        setIsActive(false);
+      }
+    };
+
+    document.addEventListener('click', handleOutsideClick);
+
+    return () => {
+      document.removeEventListener('click', handleOutsideClick);
+    };
+  }, []);
+
   return (
-    <aside className="component mainMenu">
+    <aside className="component mainMenu" ref={menuRef}>
       <IconButton
         className="menuButton"
         icon={isActive ? 'cross' : 'menuCut'}
@@ -30,7 +45,7 @@ const MainMenu = () => {
       <section className={`menuContainer ${isActive ? 'active' : ''}`}>
         <div className="list">
           {
-            location.pathname !== '/agreement' && (
+            location.pathname !== ROUTES.AGREEMENT.location && (
               <>
                 <Link
                   icon="home"
@@ -50,7 +65,7 @@ const MainMenu = () => {
             )
           }
           {
-            location.pathname !== '/agreement' && !!isLoggedIn && (
+            location.pathname !== ROUTES.AGREEMENT.location && !!isLoggedIn && (
               <>
                 <Link
                   icon="user"
diff --git a/app/components/MainMenu/mainMenu.css b/app/components/MainMenu/mainMenu.css
index decb802..c2d06d1 100644
--- a/app/components/MainMenu/mainMenu.css
+++ b/app/components/MainMenu/mainMenu.css
@@ -2,6 +2,7 @@
   --menu-width: 200px;
   --menu-button: var(--box-size-xs);
 
+  position: relative;
   height: var(--menu-button);
   box-sizing: border-box;
   z-index: 5;
diff --git a/app/components/common/Input/File.tsx b/app/components/common/Input/File.tsx
index 0046a30..6b1b32c 100644
--- a/app/components/common/Input/File.tsx
+++ b/app/components/common/Input/File.tsx
@@ -1,5 +1,5 @@
 /* External dependencies */
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useState, ChangeEvent } from 'react';
 
 /* Internal dependencies */
 import Icon from '../Icon';
@@ -11,23 +11,36 @@ const FileInput = ({
   multiple = true,
   className = '',
   icon = 'file',
+  onChange,
   ...restProps
-}: FileInputProps, ref) => (
-  <label className={`component fileInput ${className}`}>
-    {
-      icon && (
-        <Icon name={restProps.name ? 'check' : icon} />
-      )
+}: FileInputProps, ref) => {
+  const [fileName, setFileName] = useState('');
+
+  const handleFileChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setFileName(e.target.files && e.target.files.length ? e.target.files[0].name : '');
+    if (typeof onChange === 'function') {
+      onChange(e);
     }
-    <input
-      type="file"
-      accept={accept}
-      multiple={multiple}
-      {...restProps}
-      ref={ref}
-    />
-    <span>{placeholder}</span>
-  </label>
-);
+  };
+
+  return (
+    <label className={`component fileInput ${className}`}>
+      {
+        icon && (
+          <Icon name={fileName ? 'check' : icon} />
+        )
+      }
+      <input
+        type="file"
+        accept={accept}
+        multiple={multiple}
+        onChange={handleFileChange}
+        {...restProps}
+        ref={ref}
+      />
+      <span>{fileName || `${placeholder} (${accept})`}</span>
+    </label>
+  );
+};
 
 export default forwardRef(FileInput);
diff --git a/app/components/common/Input/Textarea.tsx b/app/components/common/Input/Textarea.tsx
index bb503fb..05de993 100644
--- a/app/components/common/Input/Textarea.tsx
+++ b/app/components/common/Input/Textarea.tsx
@@ -11,6 +11,7 @@ const Textarea = ({
   icon = '',
   message = '',
   name = '',
+  maxLength,
 }: TextareaProps, ref) => (
   <div className="component textarea">
     {
@@ -26,6 +27,7 @@ const Textarea = ({
       placeholder={placeholder}
       className={`component input ${className}`}
       ref={ref}
+      maxLength={maxLength}
     />
     <span className="message">{message}</span>
   </div>
diff --git a/app/components/common/Input/input.css b/app/components/common/Input/input.css
index 8bd8ba2..d07a939 100644
--- a/app/components/common/Input/input.css
+++ b/app/components/common/Input/input.css
@@ -26,6 +26,10 @@
     border-radius: var(--border-radius-s);
     border: solid 1px var(--brightOutline);
 
+    &.error {
+      border-color: var(--color-error);
+    }
+
     &:focus {
       border-color: var(--color-primary);
       box-shadow: 0 0 0 1px var(--color-primary);
@@ -101,6 +105,24 @@
     opacity: 0;
     cursor: pointer;
     z-index: 1;
+
+    & ~ .iconCheck {
+      display: none;
+    }
+
+    & ~ .iconFile {
+      display: block;
+    }
+
+    &:valid {
+      & ~ .iconCheck {
+        display: block;
+      }
+
+      & ~ .iconFile {
+        display: none;
+      }
+    }
   }
 }
 
diff --git a/app/components/common/Input/types.ts b/app/components/common/Input/types.ts
index 23999e6..e896bf7 100644
--- a/app/components/common/Input/types.ts
+++ b/app/components/common/Input/types.ts
@@ -10,6 +10,7 @@ interface BaseInput {
   register?: UseFormRegister<any>;
   registerConfig?: Record<string, unknown>;
   placeholder?: string;
+  maxLength? : number;
 }
 
 export interface InputProps extends BaseInput {
diff --git a/app/components/common/Select/index.tsx b/app/components/common/Select/index.tsx
index 61914f6..062a020 100644
--- a/app/components/common/Select/index.tsx
+++ b/app/components/common/Select/index.tsx
@@ -5,9 +5,10 @@ import { SelectProps } from './types';
 const Select = <T extends string | number,>({
   options,
   placeholder,
+  className,
   ...restProps
 }: SelectProps<T>, ref) => (
-    <section className={`component select ${restProps.name  ? '' : 'notSelected'}`}>
+    <section className={`component select ${className} ${restProps.name  ? '' : 'notSelected'}`}>
       <select {...restProps} ref={ref}>
         {
           placeholder && <option value="">{placeholder}</option>
diff --git a/app/components/common/Select/select.css b/app/components/common/Select/select.css
index 762f2d9..5923f53 100644
--- a/app/components/common/Select/select.css
+++ b/app/components/common/Select/select.css
@@ -24,9 +24,8 @@
   }
 
   &.notSelected {
-
     & select {
-      color: #a499a2;
+      color: var(--gray);
     }
   }
 }
diff --git a/app/components/common/Select/types.ts b/app/components/common/Select/types.ts
index 7ecec5b..cd8850d 100644
--- a/app/components/common/Select/types.ts
+++ b/app/components/common/Select/types.ts
@@ -5,6 +5,7 @@ export interface SelectProps<T> {
   placeholder?: string;
   name: string;
   value?: T;
+  className?: string;
   onChange?: (value: ChangeEvent<HTMLSelectElement>) => void;
 }
 
diff --git a/app/configs/app.ts b/app/configs/app.ts
index ba2d7b2..2713267 100644
--- a/app/configs/app.ts
+++ b/app/configs/app.ts
@@ -31,6 +31,7 @@ export const VALID_GENRES = [
   { value: 22, label: 'Latin Music' },
   { value: 23, label: 'Grime' },
   { value: 24, label: 'Trap' },
+  { value: 25, label: 'Other' },
 ];
 
 export const VALID_COLLECTION_TYPES = [
diff --git a/app/helpers/helpers.ts b/app/helpers/helpers.ts
index 978ff4d..e10a65c 100644
--- a/app/helpers/helpers.ts
+++ b/app/helpers/helpers.ts
@@ -1,3 +1,4 @@
+import type { FormState } from 'react-hook-form';
 import type { KeyValue } from '~/configs/types';
 
 export const greet = (timestamp = 0) => {
@@ -76,3 +77,31 @@ export const removeNullValues = (obj: KeyValue): KeyValue => {
 
   return newObj;
 };
+
+export const getFormErrorMessage = (formState: FormState<Record<string, unknown>>): string => {
+  const firstErrorKey = Object.keys(formState.errors)[0];
+
+  // Check if there are any errors
+  if (!firstErrorKey) {
+    return '';
+  }
+
+  const firstError = formState.errors[firstErrorKey];
+
+  if (!firstError) {
+    return '';
+  }
+
+  // Check if the error is for a normal input (non-array input)
+  if (Array.isArray(firstError)) {
+    // If it's an array, it contains errors for array inputs
+    for (const item of firstError) {
+      const errorMessage = item && Object.values(item).length ? (Object.values(item)[0] as any).message : '';
+      if (errorMessage) {
+        return errorMessage;
+      }
+    }
+  }
+  // If it's not an array, it contains the error message for a normal input
+  return firstError.message as string;
+};
diff --git a/app/hooks/useCreateEntity/schemas.ts b/app/hooks/useCreateEntity/schemas.ts
index c9c7733..cfe509e 100644
--- a/app/hooks/useCreateEntity/schemas.ts
+++ b/app/hooks/useCreateEntity/schemas.ts
@@ -1,5 +1,4 @@
 import * as yup from 'yup';
-import { VALID_GENRES } from '~/configs';
 
 export const audioSchema = yup
   .object()
@@ -11,19 +10,39 @@ export const audioSchema = yup
       name: 'files',
       test: item => !!item?.[0]?.name,
     }),
-    genre: yup.number().min(0).max(VALID_GENRES.length - 1).min(0).max(2).required('Please select a genre'),
-    collectionID: yup.string().trim().matches(/([\w\d]+){10,}/, 'Please select a collection type'),
+    genre: yup.string().matches(/[\d]{1}/, 'Please select a genre'),
+    collectionID: yup.string().trim().matches(/([\w\d]+){10,}/, 'Please select a collection'),
     owners: yup.array().of(yup.object().shape({
       address: yup.string().matches(/lsk[\w\d]{38}/, 'Address must be a valid Lisk wallet address'),
       shares: yup.number().min(1).max(100),
     })).test(
       'sum-of-percentage',
       'The sum of the shares must be 100',
-      (owners) => {
-        const sum = owners?.reduce((acc, owner) => {
-          return acc + (owner?.shares ?? 0);
+      (items) => {
+        const sum = items?.reduce((acc, item) => {
+          return acc + (item?.shares ?? 0);
         }, 0) || 0;
-        return sum === 100;
+    
+        // Check if the sum of shares is 100
+        if (sum !== 100) {
+          return false;
+        }
+        return true;
+      }
+    ).test(
+      'unique-addresses',
+      'Owner addresses must be unique',
+      (items) => {
+        // Check if owner addresses are unique
+        const addressSet = new Set();
+        for (const item of items) {
+          if (addressSet.has(item.address)) {
+            return false;
+          }
+          addressSet.add(item.address);
+        }
+    
+        return true;
       }
     ),
   });
@@ -34,7 +53,7 @@ export const collectionSchema = yup
     name: yup.string().trim().min(3, 'Name is too short').max(20, 'Name is too long'),
     releaseYear: yup.string().trim().matches(/(\d+){4}/, 'Please enter the release year in YYYY format'),
     profileName: yup.string().trim().matches(/([\w.\-\s]+){3,20}/, 'Please enter your profileName and it should be more than 3 characters'),
-    collectionType: yup.number().min(1, 'Please select a collection type').max(2),
+    collectionType: yup.string().matches(/[\d]{1}/, 'Please select a collection type'),
     files: yup.mixed().test({
       message: 'Please enter an image',
       name: 'files',
diff --git a/app/hooks/useCreateEntity/useCreateAudio.ts b/app/hooks/useCreateEntity/useCreateAudio.ts
index 2b5d430..0d3074a 100644
--- a/app/hooks/useCreateEntity/useCreateAudio.ts
+++ b/app/hooks/useCreateEntity/useCreateAudio.ts
@@ -34,7 +34,7 @@ export const useCreateAudio = () => {
         name: formValues.name,
         releaseYear: formValues.releaseYear,
         fit: [],
-        genre: [formValues.genre],
+        genre: [Number(formValues.genre)],
         collectionID: bufferize(formValues.collectionID),
         owners: (formValues.owners as LoyaltyOwner[]).map((owner) => ({
           address: cryptography.address.getAddressFromLisk32Address(owner.address),
@@ -45,16 +45,12 @@ export const useCreateAudio = () => {
       account,
     });
 
-    const uploadResponse = await uploadFiles(result.entityID as string, files);
-    const uploadSuccess = uploadResponse.reduce((acc, curr) => {
-      if (curr.error === true || !acc) {
-        acc = false;
-      }
-      return acc;
-    }, true);
+    if (result.error) {
+      return setBroadcastStatus({ ...result, loading: false });
+    }
     // @todo React upon upload failure
-    console.log('uploadSuccess', uploadSuccess);
-    setBroadcastStatus({ ...result, loading: false });
+    await uploadFiles(result.entityID as string, files);
+    return setBroadcastStatus({ ...result, loading: false });
   };
 
   return {
diff --git a/app/hooks/useCreateEntity/useCreateCollection.ts b/app/hooks/useCreateEntity/useCreateCollection.ts
index a93d128..73258c3 100644
--- a/app/hooks/useCreateEntity/useCreateCollection.ts
+++ b/app/hooks/useCreateEntity/useCreateCollection.ts
@@ -31,22 +31,18 @@ export const useCreateCollection = () => {
       params: {
         name: formValues.name,
         releaseYear: formValues.releaseYear,
-        collectionType: formValues.collectionType,
+        collectionType: Number(formValues.collectionType),
         ...coverSignatureAndHash,
       },
       account,
     });
 
-    const uploadResponse = await uploadFiles(result.entityID as string, files);
-    const uploadSuccess = uploadResponse.reduce((acc, curr) => {
-      if (curr.error === true || !acc) {
-        acc = false;
-      }
-      return acc;
-    }, true);
+    if (result.error) {
+      return setBroadcastStatus({ ...result, loading: false });
+    }
     // @todo React upon upload failure
-    console.log('uploadSuccess', uploadSuccess);
-    setBroadcastStatus({ ...result, loading: false });
+    await uploadFiles(result.entityID as string, files);
+    return setBroadcastStatus({ ...result, loading: false });
   };
 
   return {
diff --git a/app/hooks/useCreateEntity/useCreateProfile.ts b/app/hooks/useCreateEntity/useCreateProfile.ts
index 3db9550..ac86372 100644
--- a/app/hooks/useCreateEntity/useCreateProfile.ts
+++ b/app/hooks/useCreateEntity/useCreateProfile.ts
@@ -57,22 +57,18 @@ export const useCreateProfile = () => {
       },
       account,
     });
- 
+
+    if (result.error) {
+      return setBroadcastStatus({ ...result, loading: false });
+    }
     // upload files
     const files = [
       { key: SUFFIXES.profile.primary, value: (formValues.avatar as File[])[0] },
       { key: SUFFIXES.profile.secondary, value: (formValues.banner as File[])[0] },
     ];
-    const uploadResponse = await uploadFiles(profile.profileID ?? result.entityID as string, files);
-    const uploadSuccess = uploadResponse.reduce((acc, curr) => {
-      if (curr.error === true || !acc) {
-        acc = false;
-      }
-      return acc;
-    }, true);
     // @todo React upon upload failure
-    console.log('uploadSuccess', uploadSuccess);
-    setBroadcastStatus({ ...result, loading: false });
+    await uploadFiles(profile.profileID ?? result.entityID as string, files);
+    return setBroadcastStatus({ ...result, loading: false });
   };
 
   return {
diff --git a/app/models/entity.client.ts b/app/models/entity.client.ts
index 58039d6..cc9d94a 100644
--- a/app/models/entity.client.ts
+++ b/app/models/entity.client.ts
@@ -52,15 +52,14 @@ export async function uploadFiles(id: string, files: Asset[]): Promise<string[]>
 }
 
 export async function search(query: string): Promise<SearchResultType> {
-  const promise1 = <Promise<Profile[]>> get(`${API_URLS.STREAMER}/api/${API_VERSION}/profiles?name=${query}`);
-  const promise2 = <Promise<Profile[]>> get(`${API_URLS.STREAMER}/api/${API_VERSION}/profiles?nickName=${query}`);
-  const promise3 = <Promise<Audio[]>> get(`${API_URLS.STREAMER}/api/${API_VERSION}/audios?name=${query}`);
-  const promise4 = <Promise<Collection[]>> get(`${API_URLS.STREAMER}/api/${API_VERSION}/collections?name=${query}`);
+  const promise1 = <Promise<Profile[]>> get(`${API_URLS.STREAMER}/api/${API_VERSION}/profiles?search=${query}`);
+  const promise3 = <Promise<Audio[]>> get(`${API_URLS.STREAMER}/api/${API_VERSION}/audios?search=${query}`);
+  const promise4 = <Promise<Collection[]>> get(`${API_URLS.STREAMER}/api/${API_VERSION}/collections?search=${query}`);
 
-  const [names, nickNames, audio, collection] = await Promise.all([promise1, promise2, promise3, promise4]);
+  const [profile, audio, collection] = await Promise.all([promise1, promise3, promise4]);
 
   return {
-    profile: [...names, ...nickNames],
+    profile,
     audio,
     collection,
   };
diff --git a/app/routes/__main/dashboard/index.tsx b/app/routes/__main/dashboard/index.tsx
index 610c341..2305cc6 100644
--- a/app/routes/__main/dashboard/index.tsx
+++ b/app/routes/__main/dashboard/index.tsx
@@ -51,6 +51,7 @@ export const loader = async ({ request }: LoaderBaseProps) => {
   const profile = profiles?.length > 0 ? profiles[0] : defaultProfile;
 
   return json<ProfileLoaderData>({
+    balances: [],
     profile,
     collections,
     audios,
diff --git a/app/routes/__main/upload/__main.tsx b/app/routes/__main/upload/__main.tsx
index f1658a6..7e30f5d 100644
--- a/app/routes/__main/upload/__main.tsx
+++ b/app/routes/__main/upload/__main.tsx
@@ -8,8 +8,9 @@ import styles from '~/css/routes/__main/upload.css';
 import { ROUTES } from '~/routes/routes';
 import { Tabs } from '~/components/common/Tabs';
 import ViewWallet from '~/components/ViewWallet';
-import { UploadLoaderProps, UploadLoaderData } from '../../types';
+import { UploadLoaderProps, UploadLoaderData } from '~/routes/types';
 import { getSession } from '~/hooks/useSession';
+import { extractCredentials } from '~/helpers/cryptography';
 import { useAccount } from '~/hooks/useAccount/useAccount';
 
 export function links() {
@@ -21,8 +22,11 @@ export const loader = async ({ request }: UploadLoaderProps) => {
     request.headers.get('Cookie')
   );
 
+  const passphrase = session.get('passphrase');
+  const { address } = await extractCredentials(passphrase);
+
   return json<UploadLoaderData>({
-    id: session.get('address')
+    id: address
   });
 };
 
diff --git a/app/routes/__main/upload/__main/audio/index.tsx b/app/routes/__main/upload/__main/audio/index.tsx
index 790b338..0186a47 100644
--- a/app/routes/__main/upload/__main/audio/index.tsx
+++ b/app/routes/__main/upload/__main/audio/index.tsx
@@ -7,15 +7,16 @@ import { useLoaderData } from '@remix-run/react';
 import CreateAudio from '~/components/CreateAudio';
 import { getCollections } from '~/models/entity.server';
 import { getSession } from '~/hooks/useSession';
+import { extractCredentials } from '~/helpers/cryptography';
 import { CollectionInfoLoaderData, collectionLoaderProps } from '~/routes/types';
 
 export const loader = async ({ request }: collectionLoaderProps) => {
   const session = await getSession(
     request.headers.get('Cookie')
   );
-  const address = session.get('address');
-  const { data:  collections } = await getCollections({ params: {} });
-  const CollectionInfo = collections.filter((items) => items.creatorAddress === address);
+  const passphrase = session.get('passphrase');
+  const { address } = await extractCredentials(passphrase);
+  const { data:  CollectionInfo } = await getCollections({ params: { creatorAddress: address } });
 
   return json<CollectionInfoLoaderData>({
     CollectionInfo,
diff --git a/package-lock.json b/package-lock.json
index 6f7e583..4485ebc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "muzikie",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "muzikie",
-      "version": "0.3.1",
+      "version": "0.3.2",
       "hasInstallScript": true,
       "license": "ISC",
       "dependencies": {
diff --git a/package.json b/package.json
index b01f467..1de1122 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "muzikie",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "description": "Web based music player of Muzikie",
   "sideEffects": false,
   "author": "Block Made GmbH",
diff --git a/pm2.config.json b/pm2.config.json
index 93e5450..d8e4a80 100644
--- a/pm2.config.json
+++ b/pm2.config.json
@@ -3,6 +3,7 @@
   "cwd": ".",
   "script": "node ./server.js",
   "env": {
-    "NODE_ENV": "production"
+    "NODE_ENV": "production",
+    "PORT": 3002
   }
 }
diff --git a/styles/routes/__main.css b/styles/routes/__main.css
index 23cef4f..8ac4859 100644
--- a/styles/routes/__main.css
+++ b/styles/routes/__main.css
@@ -1,5 +1,7 @@
 .component.layout {
   width: 100%;
+  max-width: var(--app-max-width);
+  margin: 0 auto;
 
   & .main {
     width: 100%;
diff --git a/styles/variables.css b/styles/variables.css
index 6e13ba9..43a04a3 100644
--- a/styles/variables.css
+++ b/styles/variables.css
@@ -38,7 +38,8 @@
   --font-weight-black: 700;
 
   /****  Sizes  ****/
-  --thumbnail:5.5rem;
+  --app-max-width: 1480px;
+  --thumbnail: 5.5rem;
   --left-sidebar: 8.75rem;
   --right-sidebar: 21.875rem;
   --player-height-s: 4.375rem;