diff --git a/src/components/Assets.jsx b/src/components/Assets.jsx
index b507ba2..422e523 100644
--- a/src/components/Assets.jsx
+++ b/src/components/Assets.jsx
@@ -1,8 +1,10 @@
 import React, { useState, useEffect } from 'react';
 import firebase from 'firebase/app';
 import 'firebase/storage';
-import { Stack } from './Stack';
+import { HStack, Stack, VStack } from './Stack';
 import { copyToClipboard } from '../utils';
+import { Trans } from '@lingui/macro';
+import { ProBadge } from './ProBadge';
 
 const Assets = () => {
 	const [files, setFiles] = useState([]);
@@ -142,6 +144,13 @@ const Assets = () => {
 			onDragOver={handleDragDropEvent}
 			onDrop={handleDrop}
 		>
+			<HStack gap={1} align="center">
+				<h1>
+					<Trans>Assets</Trans>
+				</h1>
+				<ProBadge />
+			</HStack>
+
 			<div
 				class="asset-manager__upload-box"
 				style={{
@@ -161,40 +170,42 @@ const Assets = () => {
 				</div>
 			</div>
 			{isFetchingFiles && <p>Fetching your files...</p>}
-			{files.length ? (
-				<Stack>
-					<input
-						type="text"
-						placeholder="Search files"
-						value={searchTerm}
-						onChange={handleSearchChange}
-						style={{ width: '100%' }}
-					/>
-					<button onClick={() => setListType('list')}>List</button>
-					<button onClick={() => setListType('grid')}>Grid</button>
-				</Stack>
-			) : null}
-			<div
-				class={`asset-manager__file-container ${
-					listType === 'grid' ? 'asset-manager__file-container--grid' : ''
-				}`}
-			>
-				{filteredFiles.map((file, index) => (
-					<button
-						type="button"
-						key={index}
-						onClick={() => copyFileUrl(file.url)}
-						class={`asset-manager__file ${
-							listType === 'grid' ? 'asset-manager__file--grid' : ''
-						}`}
-					>
-						{/* <a href={file.url} target="_blank" rel="noopener noreferrer"> */}
-						<img src={file.url} />{' '}
-						<span class="asset-manager__file-name">{file.name}</span>
-						{/* </a> */}
-					</button>
-				))}
-			</div>
+			<VStack align="stretch" gap={1}>
+				{files.length ? (
+					<Stack>
+						<input
+							type="text"
+							placeholder="Search files"
+							value={searchTerm}
+							onChange={handleSearchChange}
+							style={{ width: '100%' }}
+						/>
+						<button onClick={() => setListType('list')}>List</button>
+						<button onClick={() => setListType('grid')}>Grid</button>
+					</Stack>
+				) : null}
+				<div
+					class={`asset-manager__file-container ${
+						listType === 'grid' ? 'asset-manager__file-container--grid' : ''
+					}`}
+				>
+					{filteredFiles.map((file, index) => (
+						<button
+							type="button"
+							key={index}
+							onClick={() => copyFileUrl(file.url)}
+							class={`asset-manager__file ${
+								listType === 'grid' ? 'asset-manager__file--grid' : ''
+							}`}
+						>
+							{/* <a href={file.url} target="_blank" rel="noopener noreferrer"> */}
+							<img src={file.url} />{' '}
+							<span class="asset-manager__file-name">{file.name}</span>
+							{/* </a> */}
+						</button>
+					))}
+				</div>
+			</VStack>
 		</div>
 	);
 };
diff --git a/src/components/MainHeader.jsx b/src/components/MainHeader.jsx
index c6fcc07..324ceeb 100644
--- a/src/components/MainHeader.jsx
+++ b/src/components/MainHeader.jsx
@@ -48,9 +48,7 @@ export function MainHeader(props) {
 							class="btn btn--dark hint--rounded hint--bottom-left"
 							aria-label={i18n._(t`Upload/Use assets`)}
 						>
-							<Stack gap={1}>
-								<Trans>Assets</Trans> <ProBadge />
-							</Stack>
+							<Trans>Assets</Trans>
 						</Button>
 
 						{!props.isFileMode && (
diff --git a/src/style.css b/src/style.css
index 244a55a..c8976d0 100644
--- a/src/style.css
+++ b/src/style.css
@@ -946,6 +946,11 @@ body > #demo-frame {
 	position: absolute;
 	border: none;
 	background: var(--color-close-btn);
+	background: linear-gradient(
+		to bottom,
+		var(--color-close-btn),
+		color-mix(in lch, var(--color-close-btn), black)
+	);
 	color: white;
 	border-radius: 0.3rem;
 	padding: 0.4rem 0.5rem;
@@ -994,7 +999,7 @@ body > #demo-frame {
 	background: var(--color-popup);
 
 	/* fix me */
-	background: linear-gradient(45deg, #2d063c, #3a2b63);
+	background: linear-gradient(45deg, #2d063cad, #3a2b63);
 	box-shadow:
 		inset 1px -1px 0 0 #ffffff17,
 		0 20px 31px 0 #0000008a;
@@ -1038,6 +1043,7 @@ body > #demo-frame {
 	/* transition-duration: 0.3s; */
 	/* transform: translateY(0px) scale(1); */
 	/* opacity: 1; */
+	backdrop-filter: (3px);
 }
 
 .modal-overlay {
@@ -1050,7 +1056,8 @@ body > #demo-frame {
 	z-index: 5;
 	opacity: 0;
 	will-change: opacity;
-	background: var(--color-overlay);
+	/* background: var(--color-overlay); */
+	backdrop-filter: blur(5px) grayscale(1);
 	transition: opacity var(--duration-modal-overlay-show);
 }