diff --git a/frontend/src/components/Pages/AssetSelectionPage/AssetSelectionPage.tsx b/frontend/src/components/Pages/AssetSelectionPage/AssetSelectionPage.tsx
index f780bf110..8e785bd8d 100644
--- a/frontend/src/components/Pages/AssetSelectionPage/AssetSelectionPage.tsx
+++ b/frontend/src/components/Pages/AssetSelectionPage/AssetSelectionPage.tsx
@@ -14,12 +14,13 @@ import { config } from 'config'
import { AlertType, useAlertContext } from 'components/Contexts/AlertContext'
import { FailedRequestAlertContent, FailedRequestAlertListContent } from 'components/Alerts/FailedRequestAlert'
import { AlertCategory } from 'components/Alerts/AlertsBanner'
+import assetImage from 'mediaAssets/assetPage.jpg'
const Centered = styled.div`
display: flex;
flex-direction: column;
align-items: center;
- margin-top: 5rem;
+ padding-top: 10px;
`
const StyledAssetSelection = styled.div`
display: flex;
@@ -32,6 +33,22 @@ const StyledCheckbox = styled(Checkbox)`
const StyledButton = styled(Button)`
justify-content: center;
`
+const StyledImage = styled.img`
+ width: 100vw;
+ object-fit: cover;
+ height: 500px;
+
+ @media (max-width: 500px) {
+ height: 400px;
+ }
+`
+const StyledContent = styled.div`
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding-top: 80px;
+ gap: 80px;
+`
const handleLogin = (instance: IPublicClientApplication) => {
instance.loginRedirect(loginRequest).catch((e) => {
@@ -54,10 +71,10 @@ export const AssetSelectionPage = () => {
{isAuthenticated ? (
<>
-
+
- {/* TODO! ADD image here*/}
-
+
+
>
) : (
diff --git a/frontend/src/mediaAssets/assetPage.jpg b/frontend/src/mediaAssets/assetPage.jpg
new file mode 100644
index 000000000..142211f6e
Binary files /dev/null and b/frontend/src/mediaAssets/assetPage.jpg differ