diff --git a/package.json b/package.json
index e614b8e..7f768df 100644
--- a/package.json
+++ b/package.json
@@ -6,13 +6,13 @@
 	"author": "",
 	"license": "ISC",
 	"scripts": {
-		"start:development": "NODE_ENV=development webpack serve --port 3001",
-		"start:production": "NODE_ENV=production webpack serve --port 3001",
+		"start:development": "NODE_ENV=development webpack serve --port 3000",
+		"start:staging": "NODE_ENV=staging webpack serve --port 3000",
 		"format": "eslint --fix . && npx prettier --write .",
 		"test": "npm test",
 		"test:verbose": "npm test -- --verbose",
 		"test:coverage": "CI=true npm test -- --env=jsdom --coverage",
-		"build:staging": "NODE_ENV=development webpack",
+		"build:staging": "NODE_ENV=staging webpack",
 		"build:production": "NODE_ENV=production webpack",
 		"deploy:main": "npm run build:production && permaweb-deploy --ant-process Y_0sEnzlPZGmbhknubMBhFmkK9AAylOnx4Tl3Mz_uQM",
 		"deploy:staging": "npm run build:staging && permaweb-deploy --ant-process Y_0sEnzlPZGmbhknubMBhFmkK9AAylOnx4Tl3Mz_uQM --undername staging",
diff --git a/src/app/styles.ts b/src/app/styles.ts
index 5516abd..a588b99 100644
--- a/src/app/styles.ts
+++ b/src/app/styles.ts
@@ -177,7 +177,7 @@ export const GlobalStyle = createGlobalStyle`
 
   .border-wrapper-alt2 {
     background: ${(props) => props.theme.colors.container.primary.background};
-    box-shadow: 0 5px 15px 2.5px ${(props) => props.theme.colors.shadow.primary};
+    box-shadow: 0 1px 2px 0.5px ${(props) => props.theme.colors.shadow.primary};
     border: 1px solid ${(props) => props.theme.colors.border.alt4};
     border-radius: ${STYLING.dimensions.radius.primary};
   }
diff --git a/src/components/atoms/FormField/styles.ts b/src/components/atoms/FormField/styles.ts
index 5f002ea..f9e90bf 100644
--- a/src/components/atoms/FormField/styles.ts
+++ b/src/components/atoms/FormField/styles.ts
@@ -61,9 +61,11 @@ export const Input = styled.input<{
 		outline: 0;
 		border: 1px solid
 			${(props) => (props.invalid ? props.theme.colors.form.invalid.outline : props.theme.colors.form.valid.outline)};
-		box-shadow: 0 0 2.5px
+		outline: 0.5px solid
+			${(props) => (props.invalid ? props.theme.colors.form.invalid.outline : props.theme.colors.form.valid.outline)};
+		box-shadow: 0 0 0.5px
 			${(props) => (props.invalid ? props.theme.colors.form.invalid.shadow : props.theme.colors.form.valid.shadow)};
-		transition: box-shadow, border 225ms ease-in-out;
+		transition: box-shadow, border, outline 225ms ease-in-out;
 	}
 	&:disabled {
 		background: ${(props) => props.theme.colors.form.disabled.background};
diff --git a/src/components/atoms/TextArea/styles.ts b/src/components/atoms/TextArea/styles.ts
index b6a1237..a0d4942 100644
--- a/src/components/atoms/TextArea/styles.ts
+++ b/src/components/atoms/TextArea/styles.ts
@@ -39,7 +39,11 @@ export const TextArea = styled.textarea<{
 		outline: 0;
 		border: 1px solid
 			${(props) => (props.invalid ? props.theme.colors.form.invalid.outline : props.theme.colors.form.valid.outline)};
-		transition: box-shadow, border 225ms ease-in-out;
+		outline: 0.5px solid
+			${(props) => (props.invalid ? props.theme.colors.form.invalid.outline : props.theme.colors.form.valid.outline)};
+		box-shadow: 0 0 0.5px
+			${(props) => (props.invalid ? props.theme.colors.form.invalid.shadow : props.theme.colors.form.valid.shadow)};
+		transition: box-shadow, border, outline 225ms ease-in-out;
 	}
 	&:disabled {
 		background: ${(props) => props.theme.colors.form.disabled.background};
diff --git a/src/components/organisms/AssetsTable/styles.ts b/src/components/organisms/AssetsTable/styles.ts
index e7f106e..bbfe595 100644
--- a/src/components/organisms/AssetsTable/styles.ts
+++ b/src/components/organisms/AssetsTable/styles.ts
@@ -68,7 +68,7 @@ export const EmptyContainer = styled.div`
 	justify-content: center;
 	gap: 25px;
 	padding: 30px 20px;
-	margin: 40px 0 20px 0;
+	margin: 41.5px 0 20px 0;
 	p {
 		color: ${(props) => props.theme.colors.font.primary};
 		font-weight: ${(props) => props.theme.typography.weight.bold};
diff --git a/src/components/organisms/CollectionsTable/styles.ts b/src/components/organisms/CollectionsTable/styles.ts
index 1b6fcba..98662ad 100644
--- a/src/components/organisms/CollectionsTable/styles.ts
+++ b/src/components/organisms/CollectionsTable/styles.ts
@@ -156,7 +156,7 @@ export const EmptyContainer = styled.div`
 	justify-content: center;
 	gap: 25px;
 	padding: 30px 20px;
-	margin: 40px 0 20px 0;
+	margin: 41.5px 0 20px 0;
 	p {
 		color: ${(props) => props.theme.colors.font.primary};
 		font-weight: ${(props) => props.theme.typography.weight.bold};
diff --git a/src/helpers/config.ts b/src/helpers/config.ts
index aface98..8da5be3 100644
--- a/src/helpers/config.ts
+++ b/src/helpers/config.ts
@@ -346,11 +346,13 @@ export const MAX_THUMBNAIL_IMAGE_SIZE = 100000;
 export const RENDERERS = {
 	'3d': {
 		label: '3D',
+		description: '3D models (.glb)',
 		domain: 'view_3d-pst',
 		contentType: CONTENT_TYPES.model,
 	},
 	audio: {
 		label: 'Audio',
+		description: 'Audio files (.mp4)',
 		domain: 'audio-renderer',
 		contentType: CONTENT_TYPES.audio,
 	},
diff --git a/src/helpers/language.ts b/src/helpers/language.ts
index 09ca3bc..b377988 100644
--- a/src/helpers/language.ts
+++ b/src/helpers/language.ts
@@ -205,6 +205,7 @@ export const language = {
 		profileUpdatedInfo: `Your profile has been updated.`,
 		readDocs: `Read docs`,
 		recipient: `Recipient`,
+		remove: `Remove`,
 		removeAvatar: `Remove avatar`,
 		removeBanner: `Remove banner`,
 		removeFile: `Remove file`,
diff --git a/src/helpers/themes.ts b/src/helpers/themes.ts
index de7ac82..702e4cc 100644
--- a/src/helpers/themes.ts
+++ b/src/helpers/themes.ts
@@ -26,7 +26,7 @@ export const lightTheme = {
 	semiTransparent2: 'rgba(0, 0, 0, 0.45)',
 	semiTransparent3: 'rgba(0, 0, 0, 0.65)',
 	semiTransparent4: '#AEAEAE45',
-	semiTransparent5: 'rgba(0, 0, 0, 0.15)',
+	semiTransparent5: 'rgba(215, 215, 215, 0.5)',
 	scheme: 'light',
 	light1: '#FFFFFF',
 	dark1: '#151515',
@@ -184,8 +184,8 @@ export const theme = (currentTheme: any): DefaultTheme => ({
 				shadow: currentTheme.negative2,
 			},
 			valid: {
-				outline: currentTheme.neutralA4,
-				shadow: currentTheme.neutral3,
+				outline: currentTheme.primary1,
+				shadow: currentTheme.primary2,
 			},
 			disabled: {
 				background: currentTheme.neutral2,
diff --git a/src/views/Upload/UploadBanner/UploadBanner.tsx b/src/views/Upload/UploadBanner/UploadBanner.tsx
index c7baae7..9bffafb 100644
--- a/src/views/Upload/UploadBanner/UploadBanner.tsx
+++ b/src/views/Upload/UploadBanner/UploadBanner.tsx
@@ -31,7 +31,7 @@ export default function UploadBanner() {
 		}
 	}, [activeBannerIndex, banners]);
 
-	const handleThumbnailClick = (index: number) => {
+	const handleBannerClick = (index: number) => {
 		setActiveBannerIndex(index);
 	};
 
@@ -43,9 +43,9 @@ export default function UploadBanner() {
 
 				reader.onload = (event: ProgressEvent<FileReader>) => {
 					if (event.target?.result) {
-						const updatedThumbnails = [...banners, event.target.result];
-						setBanners(updatedThumbnails);
-						setActiveBannerIndex(updatedThumbnails.length - 1);
+						const updatedBanners = [...banners, event.target.result];
+						setBanners(updatedBanners);
+						setActiveBannerIndex(updatedBanners.length - 1);
 					}
 				};
 
@@ -54,6 +54,12 @@ export default function UploadBanner() {
 		}
 	}
 
+	const handleRemoveBanner = (index: number) => {
+		const updatedBanners = banners.filter((_, i) => i !== index);
+		setBanners(updatedBanners);
+		setActiveBannerIndex(updatedBanners.length - 1);
+	};
+
 	return (
 		<>
 			<S.Wrapper>
@@ -79,10 +85,21 @@ export default function UploadBanner() {
 									<S.TWrapper
 										key={index}
 										active={index === activeBannerIndex}
-										onClick={() => handleThumbnailClick(index)}
+										onClick={(e: any) => {
+											e.stopPropagation();
+											handleBannerClick(index);
+										}}
 										disabled={uploadReducer.uploadActive}
 									>
 										<img src={banner} />
+										<S.TAction>
+											<IconButton
+												type={'primary'}
+												src={ASSETS.close}
+												handlePress={() => handleRemoveBanner(index)}
+												dimensions={{ wrapper: 21.5, icon: 8.5 }}
+											/>
+										</S.TAction>
 									</S.TWrapper>
 								);
 							})}
diff --git a/src/views/Upload/UploadBanner/styles.ts b/src/views/Upload/UploadBanner/styles.ts
index c40921b..3e71c0d 100644
--- a/src/views/Upload/UploadBanner/styles.ts
+++ b/src/views/Upload/UploadBanner/styles.ts
@@ -18,7 +18,7 @@ export const Header = styled.div`
 	}
 	p {
 		color: ${(props) => props.theme.colors.font.primary};
-		font-size: ${(props) => props.theme.typography.size.base};
+		font-size: ${(props) => props.theme.typography.size.small};
 		font-weight: ${(props) => props.theme.typography.weight.bold};
 		margin: 0 5px 5px 0;
 	}
@@ -30,7 +30,7 @@ export const Header = styled.div`
 		max-width: 600px;
 	}
 	button {
-		margin 0 0 6.5px 0;
+		margin: 0 0 6.5px 0;
 	}
 `;
 
@@ -96,6 +96,24 @@ export const Select = styled.button`
 	}
 `;
 
+export const TAction = styled.div`
+	position: absolute;
+	top: 7.5px;
+	right: 7.5px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	display: none;
+
+	button {
+		background: ${(props) => props.theme.colors.container.primary.background};
+		border: 1px solid ${(props) => props.theme.colors.border.primary};
+		svg {
+			margin: 0px 0px 2.15px 0;
+		}
+	}
+`;
+
 export const TWrapper = styled.button<{ active: boolean }>`
 	height: 150px;
 	width: 100%;
@@ -104,6 +122,7 @@ export const TWrapper = styled.button<{ active: boolean }>`
 	outline: 2.25px solid ${(props) => (props.active ? props.theme.colors.border.alt1 : 'transparent')};
 	border: 2.25px solid transparent;
 	opacity: ${(props) => (props.active ? '1' : '0.5')};
+	position: relative;
 	img {
 		height: 100%;
 		width: 100%;
@@ -113,6 +132,9 @@ export const TWrapper = styled.button<{ active: boolean }>`
 	}
 	&:hover {
 		opacity: 0.85;
+		${TAction} {
+			display: block;
+		}
 	}
 	&:disabled {
 		opacity: 0.5;
diff --git a/src/views/Upload/UploadSteps/UploadStepsDetails/UploadStepsDetails.tsx b/src/views/Upload/UploadSteps/UploadStepsDetails/UploadStepsDetails.tsx
index ddc0941..041147b 100644
--- a/src/views/Upload/UploadSteps/UploadStepsDetails/UploadStepsDetails.tsx
+++ b/src/views/Upload/UploadSteps/UploadStepsDetails/UploadStepsDetails.tsx
@@ -202,109 +202,113 @@ export default function UploadStepsDetails() {
 
 	return (
 		<>
-			<S.Wrapper className={'border-wrapper-alt2'}>
+			<S.Wrapper>
 				{uploadReducer.uploadType === 'collection' && (
 					<>
-						<h4>{language.collectionDetails}</h4>
-						<FormField
-							label={language.title}
-							value={uploadReducer.data.title}
-							onChange={(e: any) => handleInputChange(e, 'title')}
-							disabled={false}
-							invalid={invalidTitle}
-							required
-						/>
-						<TextArea
-							label={language.description}
-							value={uploadReducer.data.description}
-							onChange={(e: any) => handleInputChange(e, 'description')}
-							disabled={false}
-							invalid={getInvalidDescription()}
-							required
-						/>
+						<S.CollectionWrapper>
+							<h4>{language.collectionDetails}</h4>
+							<FormField
+								label={language.title}
+								value={uploadReducer.data.title}
+								onChange={(e: any) => handleInputChange(e, 'title')}
+								disabled={false}
+								invalid={invalidTitle}
+								required
+							/>
+							<TextArea
+								label={language.description}
+								value={uploadReducer.data.description}
+								onChange={(e: any) => handleInputChange(e, 'description')}
+								disabled={false}
+								invalid={getInvalidDescription()}
+								required
+							/>
+						</S.CollectionWrapper>
 						<S.IWrapper>
 							<span>{language.assetInfoNote}</span>
 						</S.IWrapper>
 					</>
 				)}
-				<h4>{language.assetDetails}</h4>
-				<S.COWrapper className={'border-wrapper-alt1'}>
-					<S.CWrapper>
-						<span>{language.contentTokensCheckInfo}</span>
+				<S.SectionWrapper className={'border-wrapper-alt2'}>
+					<h4>{language.assetDetails}</h4>
+					<S.COWrapper className={'border-wrapper-alt1'}>
+						<S.CWrapper>
+							<span>{language.contentTokensCheckInfo}</span>
+							<Checkbox
+								checked={uploadReducer.data.useFractionalTokens}
+								handleSelect={handleUseFractionalChange}
+								disabled={false}
+							/>
+						</S.CWrapper>
+						{uploadReducer.data.useFractionalTokens && (
+							<FormField
+								type={'number'}
+								label={language.contentTokens}
+								value={uploadReducer.data.useFractionalTokens ? uploadReducer.data.contentTokens : 1}
+								onChange={(e: any) => handleInputChange(e, 'contentTokens')}
+								disabled={!uploadReducer.data.useFractionalTokens}
+								invalid={getInvalidContentTokens()}
+								tooltip={language.contentTokensInfo}
+								required
+								hideErrorMessage
+							/>
+						)}
+					</S.COWrapper>
+					<S.TWrapper>
+						<S.THeader>
+							<span>{formatRequiredField(language.assetTopics)}</span>
+							<Button type={'alt2'} label={language.addTopic} handlePress={() => setShowTopicAdd(true)} />
+						</S.THeader>
+						<S.TInfo>
+							<span>{language.topicInfo}</span>
+						</S.TInfo>
+						<S.TBody>
+							{topicOptions.map((topic: string, index: number) => {
+								return (
+									<S.TAction
+										key={index}
+										active={uploadReducer.data.topics.includes(topic)}
+										onClick={() => handleTopicChange(topic)}
+									>
+										<span>{topic.toUpperCase()}</span>
+										<ReactSVG src={ASSETS.add} />
+									</S.TAction>
+								);
+							})}
+						</S.TBody>
+					</S.TWrapper>
+					<S.RWrapper>
+						<S.RHeader>
+							<span>{language.assetRenderer}</span>
+						</S.RHeader>
+						<S.RInfo>
+							<span>{language.rendererInfo}</span>
+						</S.RInfo>
+						<S.ROptionsWrapper>
+							{Object.keys(rendererOptions).map((id: string, index: number) => {
+								return (
+									<S.ROption
+										key={index}
+										active={renderer?.label === rendererOptions[id].label}
+										disabled={false}
+										onClick={() => handleRendererChange(rendererOptions[id])}
+									>
+										<span>{rendererOptions[id].label}</span>
+										<p>{rendererOptions[id].description}</p>
+									</S.ROption>
+								);
+							})}
+						</S.ROptionsWrapper>
+					</S.RWrapper>
+					<S.TRWrapper>
+						<span>{language.transferableTokensCheckInfo}</span>
 						<Checkbox
-							checked={uploadReducer.data.useFractionalTokens}
-							handleSelect={handleUseFractionalChange}
+							checked={uploadReducer.data.transferableTokens}
+							handleSelect={handleTransferableChange}
 							disabled={false}
 						/>
-					</S.CWrapper>
-					{uploadReducer.data.useFractionalTokens && (
-						<FormField
-							type={'number'}
-							label={language.contentTokens}
-							value={uploadReducer.data.useFractionalTokens ? uploadReducer.data.contentTokens : 1}
-							onChange={(e: any) => handleInputChange(e, 'contentTokens')}
-							disabled={!uploadReducer.data.useFractionalTokens}
-							invalid={getInvalidContentTokens()}
-							tooltip={language.contentTokensInfo}
-							required
-							hideErrorMessage
-						/>
-					)}
-				</S.COWrapper>
-				<S.TWrapper>
-					<S.THeader>
-						<span>{formatRequiredField(language.assetTopics)}</span>
-						<Button type={'alt2'} label={language.addTopic} handlePress={() => setShowTopicAdd(true)} />
-					</S.THeader>
-					<S.TInfo>
-						<span>{language.topicInfo}</span>
-					</S.TInfo>
-					<S.TBody>
-						{topicOptions.map((topic: string, index: number) => {
-							return (
-								<S.TAction
-									key={index}
-									active={uploadReducer.data.topics.includes(topic)}
-									onClick={() => handleTopicChange(topic)}
-								>
-									<span>{topic.toUpperCase()}</span>
-									<ReactSVG src={ASSETS.add} />
-								</S.TAction>
-							);
-						})}
-					</S.TBody>
-				</S.TWrapper>
-				<S.RWrapper>
-					<S.RHeader>
-						<span>{language.assetRenderer}</span>
-					</S.RHeader>
-					<S.RInfo>
-						<span>{language.rendererInfo}</span>
-					</S.RInfo>
-					<S.ROptionsWrapper>
-						{Object.keys(rendererOptions).map((id: string, index: number) => {
-							return (
-								<S.ROption
-									key={index}
-									active={renderer?.label === rendererOptions[id].label}
-									disabled={false}
-									onClick={() => handleRendererChange(rendererOptions[id])}
-								>
-									<span>{rendererOptions[id].label}</span>
-									<p>{rendererOptions[id].domain}</p>
-								</S.ROption>
-							);
-						})}
-					</S.ROptionsWrapper>
-				</S.RWrapper>
-				<S.TRWrapper>
-					<span>{language.transferableTokensCheckInfo}</span>
-					<Checkbox
-						checked={uploadReducer.data.transferableTokens}
-						handleSelect={handleTransferableChange}
-						disabled={false}
-					/>
-				</S.TRWrapper>
+					</S.TRWrapper>
+				</S.SectionWrapper>
 			</S.Wrapper>
 			{showTopicAdd && (
 				<Modal header={language.addTopic} handleClose={() => setShowTopicAdd(false)}>
diff --git a/src/views/Upload/UploadSteps/UploadStepsDetails/styles.ts b/src/views/Upload/UploadSteps/UploadStepsDetails/styles.ts
index 1a448e4..4c8b79c 100644
--- a/src/views/Upload/UploadSteps/UploadStepsDetails/styles.ts
+++ b/src/views/Upload/UploadSteps/UploadStepsDetails/styles.ts
@@ -3,13 +3,23 @@ import styled from 'styled-components';
 import { STYLING } from 'helpers/config';
 
 export const Wrapper = styled.div`
-	padding: 15px 20px 20px 20px;
 	h4 {
 		color: ${(props) => props.theme.colors.font.alt2};
 		font-size: ${(props) => props.theme.typography.size.lg};
 		font-weight: ${(props) => props.theme.typography.weight.bold};
 		line-height: 1.5;
-		margin: 0 0 25px 0;
+		margin: 0 0 15px 0;
+	}
+`;
+
+export const SectionWrapper = styled.div`
+	padding: 15px 20px 20px 20px;
+`;
+
+export const CollectionWrapper = styled(SectionWrapper)`
+	padding: 0;
+	h4 {
+		margin: 0 0 20px 0;
 	}
 `;
 
@@ -35,7 +45,7 @@ export const TRWrapper = styled(CWrapper)`
 `;
 
 export const TWrapper = styled.div`
-	margin: 20px 0 0 0;
+	margin: 60px 0 0 0;
 `;
 
 export const THeader = styled.div`
@@ -56,7 +66,7 @@ export const THeader = styled.div`
 `;
 
 export const TInfo = styled.div`
-	margin: 2.5px 0 20px 0;
+	margin: 2.5px 0 10px 0;
 	span {
 		color: ${(props) => props.theme.colors.font.alt1};
 		font-size: ${(props) => props.theme.typography.size.xxSmall};
@@ -65,7 +75,7 @@ export const TInfo = styled.div`
 `;
 
 export const TBody = styled.div`
-	margin: 10px 0 0 0;
+	margin: 5px 0 0 0;
 	display: flex;
 	flex-wrap: wrap;
 	gap: 10px;
@@ -141,7 +151,7 @@ export const IWrapper = styled.div`
 `;
 
 export const RWrapper = styled.div`
-	margin: 20px 0 0 0;
+	margin: 60px 0 0 0;
 `;
 
 export const RHeader = styled.div`
@@ -162,7 +172,7 @@ export const RHeader = styled.div`
 `;
 
 export const RInfo = styled.div`
-	margin: 2.5px 0 20px 0;
+	margin: 2.5px 0 10px 0;
 	span {
 		color: ${(props) => props.theme.colors.font.alt1};
 		font-size: ${(props) => props.theme.typography.size.xxSmall};
diff --git a/src/views/Upload/UploadThumbnail/UploadThumbnail.tsx b/src/views/Upload/UploadThumbnail/UploadThumbnail.tsx
index 7c02955..485099b 100644
--- a/src/views/Upload/UploadThumbnail/UploadThumbnail.tsx
+++ b/src/views/Upload/UploadThumbnail/UploadThumbnail.tsx
@@ -135,6 +135,12 @@ export default function UploadThumbnail() {
 		}
 	};
 
+	const handleRemoveThumbnail = (index: number) => {
+		const updatedThumbnails = thumbnails.filter((_, i) => i !== index);
+		setThumbnails(updatedThumbnails);
+		setActiveThumbnailIndex(updatedThumbnails.length - 1);
+	};
+
 	return (
 		<>
 			<S.Wrapper>
@@ -169,10 +175,21 @@ export default function UploadThumbnail() {
 									<S.TWrapper
 										key={index}
 										active={index === activeThumbnailIndex}
-										onClick={() => handleThumbnailClick(index)}
+										onClick={(e: any) => {
+											e.stopPropagation();
+											handleThumbnailClick(index);
+										}}
 										disabled={uploadReducer.uploadActive}
 									>
 										<img src={thumbnail} />
+										<S.TAction>
+											<IconButton
+												type={'primary'}
+												src={ASSETS.close}
+												handlePress={() => handleRemoveThumbnail(index)}
+												dimensions={{ wrapper: 21.5, icon: 8.5 }}
+											/>
+										</S.TAction>
 									</S.TWrapper>
 								);
 							})}
diff --git a/src/views/Upload/UploadThumbnail/styles.ts b/src/views/Upload/UploadThumbnail/styles.ts
index 49fcb16..9d071a3 100644
--- a/src/views/Upload/UploadThumbnail/styles.ts
+++ b/src/views/Upload/UploadThumbnail/styles.ts
@@ -18,7 +18,7 @@ export const Header = styled.div`
 	}
 	p {
 		color: ${(props) => props.theme.colors.font.primary};
-		font-size: ${(props) => props.theme.typography.size.base};
+		font-size: ${(props) => props.theme.typography.size.small};
 		font-weight: ${(props) => props.theme.typography.weight.bold};
 		margin: 0 5px 5px 0;
 	}
@@ -30,7 +30,7 @@ export const Header = styled.div`
 		max-width: 600px;
 	}
 	button {
-		margin 0 0 6.5px 0;
+		margin: 0 0 6.5px 0;
 	}
 `;
 
@@ -96,6 +96,24 @@ export const Select = styled.button`
 	}
 `;
 
+export const TAction = styled.div`
+	position: absolute;
+	top: 7.5px;
+	right: 7.5px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	display: none;
+
+	button {
+		background: ${(props) => props.theme.colors.container.primary.background};
+		border: 1px solid ${(props) => props.theme.colors.border.primary};
+		svg {
+			margin: 0px 0px 2.15px 0;
+		}
+	}
+`;
+
 export const TWrapper = styled.button<{ active: boolean }>`
 	height: 95px;
 	width: 170px;
@@ -104,6 +122,7 @@ export const TWrapper = styled.button<{ active: boolean }>`
 	outline: 2.25px solid ${(props) => (props.active ? props.theme.colors.border.alt1 : 'transparent')};
 	border: 2.25px solid transparent;
 	opacity: ${(props) => (props.active ? '1' : '0.5')};
+	position: relative;
 	img {
 		height: 100%;
 		width: 100%;
@@ -113,6 +132,9 @@ export const TWrapper = styled.button<{ active: boolean }>`
 	}
 	&:hover {
 		opacity: 0.85;
+		${TAction} {
+			display: block;
+		}
 	}
 	&:disabled {
 		opacity: 0.5;
diff --git a/src/views/Upload/index.tsx b/src/views/Upload/index.tsx
index 0987122..00c5ff6 100644
--- a/src/views/Upload/index.tsx
+++ b/src/views/Upload/index.tsx
@@ -64,6 +64,7 @@ export default function Upload() {
 
 	React.useEffect(() => {
 		const handleBeforeUnload = (e: any) => {
+			if (process.env.NODE_ENV === 'development') return;
 			e.preventDefault();
 			e.returnValue = '';
 		};
diff --git a/webpack.config.js b/webpack.config.js
index 36818f3..76cd7a4 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -5,6 +5,36 @@ const CopyWebpackPlugin = require('copy-webpack-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 
+const productionAddresses = {
+	MODULE: 'Pq2Zftrqut0hdisH_MC2pDOT6S4eQFoxGsFUzR6r350',
+	SCHEDULER: '_GQ33BkPtZrqxA84vM8Zk-N2aO0toNNu_C-l-rawrBA',
+	DEFAULT_TOKEN: 'xU9zFkq3X2ZQ6olwNVvr1vUWIjc3kXTWr7xKQD6dh10',
+	UCM: 'U3TjJAZWJjlWBB4KAXSHKzuky81jtyh0zqH8rUL4Wd0',
+	UCM_ACTIVITY: 'SNDvAf2RF-jhPmRrGUcs_b1nKlzU6vamN9zl0e9Zi4c',
+	PIXL: 'DM3FoZUq_yebASPhgd8pEIRIzDW6muXEhxz5-JwbZwo',
+	PROFILE_REGISTRY: 'SNy4m-DrqxWl01YqGM4sxI8qCni-58re8uuJLvZPypY',
+	PROFILE_SRC: '_R2XYWDPUXVvQrQKFaQRvDTDcDwnQNbqlTd_qvCRSpQ',
+	COLLECTIONS_REGISTRY: 'TFWDmf8a3_nw43GCm_CuYlYoylHAjCcFGbgHfDaGcsg',
+};
+
+const nonProductionAddresses = {
+	MODULE: 'Pq2Zftrqut0hdisH_MC2pDOT6S4eQFoxGsFUzR6r350',
+	SCHEDULER: '_GQ33BkPtZrqxA84vM8Zk-N2aO0toNNu_C-l-rawrBA',
+	DEFAULT_TOKEN: 'xU9zFkq3X2ZQ6olwNVvr1vUWIjc3kXTWr7xKQD6dh10',
+	UCM: 'qtDwylCwyhhsGPKIYAi2Ao342mdhvFUPqdbDOudzaiM',
+	UCM_ACTIVITY: 'GC9M776w8UEZVkvAGcLqhrH10uumkbQUYrnIo1AiWHo',
+	PIXL: 'DM3FoZUq_yebASPhgd8pEIRIzDW6muXEhxz5-JwbZwo',
+	PROFILE_REGISTRY: 'jndJ0phxOaJJU6CHZVX7zo2Wl5vI2KQ1z4i3VnV4DrM',
+	PROFILE_SRC: '9Tpz5_ZT4RRkF-6JUTdaaTMg0ARfkNuuM5zahXyCqZ4',
+	COLLECTIONS_REGISTRY: 'q0QVp2rPXOuqIj6mbRObaC-HMweexSv1Y_Nm9_t1brc',
+};
+
+const env = process.env.NODE_ENV || 'development';
+const isProduction = env === 'production';
+const isStaging = env === 'staging';
+
+const addresses = isProduction ? productionAddresses : isStaging ? nonProductionAddresses : productionAddresses;
+
 module.exports = {
 	entry: './src/index.tsx',
 	output: {
@@ -12,14 +42,14 @@ module.exports = {
 		filename: 'bundle.js',
 	},
 	devtool: 'eval',
-	mode: process.env.NODE_ENV || 'development',
+	mode: isProduction || isStaging ? 'production' : 'development',
 	devServer: {
 		static: {
 			directory: path.join(__dirname, 'dist'),
 		},
 		hot: true,
 		historyApiFallback: true,
-		port: 3001,
+		port: 3000,
 		open: false,
 		compress: true,
 		client: {
@@ -27,7 +57,7 @@ module.exports = {
 		},
 	},
 	optimization:
-		process.env.NODE_ENV === 'production'
+		isProduction || isStaging
 			? {
 					minimize: true,
 					minimizer: [
@@ -138,56 +168,15 @@ module.exports = {
 		}),
 		new webpack.NoEmitOnErrorsPlugin(),
 		new webpack.DefinePlugin({
-			'process.env.MODULE': JSON.stringify(
-				process.env.NODE_ENV === 'production'
-					? 'Pq2Zftrqut0hdisH_MC2pDOT6S4eQFoxGsFUzR6r350'
-					: 'Pq2Zftrqut0hdisH_MC2pDOT6S4eQFoxGsFUzR6r350'
-			),
-			'process.env.SCHEDULER': JSON.stringify(
-				process.env.NODE_ENV === 'production'
-					? '_GQ33BkPtZrqxA84vM8Zk-N2aO0toNNu_C-l-rawrBA'
-					: '_GQ33BkPtZrqxA84vM8Zk-N2aO0toNNu_C-l-rawrBA'
-			),
-			'process.env.ASSET_SRC': JSON.stringify(
-				process.env.NODE_ENV === 'production'
-					? 'Fmtgzy1Chs-5ZuUwHpQjQrQ7H7v1fjsP0Bi8jVaDIKA'
-					: 'Fmtgzy1Chs-5ZuUwHpQjQrQ7H7v1fjsP0Bi8jVaDIKA'
-			),
-			'process.env.DEFAULT_TOKEN': JSON.stringify(
-				process.env.NODE_ENV === 'production'
-					? 'xU9zFkq3X2ZQ6olwNVvr1vUWIjc3kXTWr7xKQD6dh10'
-					: 'xU9zFkq3X2ZQ6olwNVvr1vUWIjc3kXTWr7xKQD6dh10'
-			),
-			'process.env.UCM': JSON.stringify(
-				process.env.NODE_ENV === 'production'
-					? 'U3TjJAZWJjlWBB4KAXSHKzuky81jtyh0zqH8rUL4Wd0'
-					: 'qtDwylCwyhhsGPKIYAi2Ao342mdhvFUPqdbDOudzaiM'
-			),
-			'process.env.PIXL': JSON.stringify(
-				process.env.NODE_ENV === 'production'
-					? 'DM3FoZUq_yebASPhgd8pEIRIzDW6muXEhxz5-JwbZwo'
-					: 'DM3FoZUq_yebASPhgd8pEIRIzDW6muXEhxz5-JwbZwo'
-			),
-			'process.env.PROFILE_REGISTRY': JSON.stringify(
-				process.env.NODE_ENV === 'production'
-					? 'SNy4m-DrqxWl01YqGM4sxI8qCni-58re8uuJLvZPypY'
-					: 'jndJ0phxOaJJU6CHZVX7zo2Wl5vI2KQ1z4i3VnV4DrM'
-			),
-			'process.env.PROFILE_SRC': JSON.stringify(
-				process.env.NODE_ENV === 'production'
-					? '_R2XYWDPUXVvQrQKFaQRvDTDcDwnQNbqlTd_qvCRSpQ'
-					: '9Tpz5_ZT4RRkF-6JUTdaaTMg0ARfkNuuM5zahXyCqZ4'
-			),
-			'process.env.COLLECTIONS_REGISTRY': JSON.stringify(
-				process.env.NODE_ENV === 'production'
-					? 'TFWDmf8a3_nw43GCm_CuYlYoylHAjCcFGbgHfDaGcsg'
-					: 'q0QVp2rPXOuqIj6mbRObaC-HMweexSv1Y_Nm9_t1brc'
-			),
-			'process.env.COLLECTION_SRC': JSON.stringify(
-				process.env.NODE_ENV === 'production'
-					? '2ZDuM2VUCN8WHoAKOOjiH4_7Apq0ZHKnTWdLppxCdGY'
-					: '2ZDuM2VUCN8WHoAKOOjiH4_7Apq0ZHKnTWdLppxCdGY'
-			),
+			'process.env.MODULE': JSON.stringify(addresses.MODULE),
+			'process.env.SCHEDULER': JSON.stringify(addresses.SCHEDULER),
+			'process.env.DEFAULT_TOKEN': JSON.stringify(addresses.DEFAULT_TOKEN),
+			'process.env.UCM': JSON.stringify(addresses.UCM),
+			'process.env.UCM_ACTIVITY': JSON.stringify(addresses.UCM_ACTIVITY),
+			'process.env.PIXL': JSON.stringify(addresses.PIXL),
+			'process.env.PROFILE_REGISTRY': JSON.stringify(addresses.PROFILE_REGISTRY),
+			'process.env.PROFILE_SRC': JSON.stringify(addresses.PROFILE_SRC),
+			'process.env.COLLECTIONS_REGISTRY': JSON.stringify(addresses.COLLECTIONS_REGISTRY),
 		}),
 	],
 	resolve: {
@@ -240,8 +229,6 @@ module.exports = {
 			wrappers: path.resolve(__dirname, 'src/wrappers/'),
 			'asn1.js': path.resolve(__dirname, 'node_modules/asn1.js'),
 			elliptic: path.resolve(__dirname, 'node_modules/elliptic'),
-			'@bundlr-network/client': '@bundlr-network/client/build/cjs/web/bundlr',
-			arweave: path.resolve(__dirname, 'node_modules/arweave'),
 		},
 	},
 	output: {