diff --git a/public/assets/login-background.svg b/public/assets/login-background.svg
deleted file mode 100644
index 2e48616c6..000000000
--- a/public/assets/login-background.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/src/modules/OAuth2/views/login.tsx b/src/modules/OAuth2/views/login.tsx
index b5c99fc5b..64bb4ff27 100644
--- a/src/modules/OAuth2/views/login.tsx
+++ b/src/modules/OAuth2/views/login.tsx
@@ -12,6 +12,7 @@ import { getSSOUserNameWithClientID } from "../utils"
import { RawDqlResult } from "utils/questdb/types"
import { LoadingSpinner } from "../../../components/LoadingSpinner"
import { Box } from "../../../components/Box"
+import { LoginBackground } from "./loginBackground"
const LoginContainer = styled.div`
width: 100%;
@@ -23,18 +24,6 @@ const LoginContainer = styled.div`
overflow-y: auto;
`
-const LoginBackground = styled.img`
- position: absolute;
- top: 1%;
- left: 0;
- width: 100%;
- max-height: 100vh;
- object-fit: cover;
- z-index: 0;
- pointer-events: none;
- user-select: none;
-`
-
const LogoContainer = styled.div`
padding: 2.4rem 4.8rem;
display: flex;
@@ -397,11 +386,7 @@ export const Login = ({
return settings["acl.basic.auth.realm.enabled"] ? null : (
<>
-
+
{(redirectErrorTitle || redirectErrorMessage) && (
diff --git a/src/modules/OAuth2/views/loginBackground.tsx b/src/modules/OAuth2/views/loginBackground.tsx
new file mode 100644
index 000000000..cef874391
--- /dev/null
+++ b/src/modules/OAuth2/views/loginBackground.tsx
@@ -0,0 +1,81 @@
+import React from "react"
+import styled from "styled-components"
+
+type Segment = string | { sql: string }
+
+const SEGMENTS: Segment[] = [
+ "0101001010001010100110001000101010000110101010000100000011101 000110100101101101011001010111001101110100011000010110110101110000001011000010000001100010 011\n01100100 01010010100010101001100010001010100001 ",
+ { sql: "SELECT * FROM trades" },
+ " 00000011101 ",
+ { sql: "WHERE symbol in ('AAPL', 'NVDA')" },
+ " 010101000 ",
+ { sql: "LATEST ON timestamp PARTITION BY symbol" },
+ " 0010 01101001 01100100 0101001010001010100110 001000101010000110101010000100000011101 000110100101101101011001 101010000110101010000100000011101 00100000011101 000110100101101101011001010111001101110100011000010110110101110000001011000010000001100010 01101001 01100100 0101001010001010100110001000101 0100001 10101010000100000011101 00011010010110110101100101011100110111010001100 00101101101011100000010110000100000011000100 SELECT 011000100110 01100100 0101001010001010100110001000101010000110101010000100000011101 10101010000100000011101 0001101 00100110 timestamp, symbol, 01000000110001000 0010110110101110000001011000010000001100010 01101001 01100100 0101001010001010100110 0010001010100001101010100001000 first(price) AS open, 11001 010111001101110100011000010110110101110000001011000010000001100010 01101001 01100100 01010010100010101 last(price) AS close, 00110001000100 0001100010 01101001 01100100 01010010100010101001100010001010100001 10101010000100000011101 000110100101101101011001010111001100110010010 ",
+ { sql: "min(price) AS low," },
+ " 011001 010111001101110100011000010110110101110000001011000010000001100010 01101001 01100100 01100010001010100 ",
+ { sql: "max(price) AS high," },
+ " 0011 010101000 0100000011101 01000000111010 011010010110110101100101011100110111010001100 01101001 01100100 01010010100010101001100010001010100001101010100001 ",
+ { sql: "sum(amount) AS volume" },
+ " \n01101 101011001010111001101110100011000010110110101110000001011000010000001100010 01101001 01100100 010100101000101 010011010101000010 0000011101 0000001 1101010000001 110100011010010110110101100101011100110111010001100 0101001010001010100110 001000101010000110101010000100000011101 00011010010110 1101011001 010111001101110100011000010110110101110000001011000010000001100010 01101001 01100100 010100101000101010011000100010101000011010101000010 ",
+ { sql: "FROM trades" },
+ "\n0000011101 0001100010 01101001 01100100 01010010100010101001100010001010100001 10101010000100000011101 00011010010110110101100101011100110111010001100 0010110110101110000001011000010000001100010 01101001 01100100 000110100101101101011001 01011 ",
+ { sql: "WHERE symbol = 'MSFT' AND timestamp IN today()" },
+ " 0000 1011000010000001100010 01101001 011001000101001010001010100110001000101010000110101010000100000011101 01 SAMPLE BY 15m 0110 001000101010000110101010000100000011101 000110100101101101011001 010111001101110100011000010110110101110000001011000010000001100010 01101001 01100100 011011010111000000 1011000010000001100010 01101001 01100100 01010010100010101001100010001010100001 10101010000100000011101 00011010010110110101100101011100110111010001100 0101001010001010100110 volume,001000101010000110101010000100000011101 000110100101101101011001 010111001101110100011000010110110101110000001011000010000001100010 01101001 01100100 0101001010001010100110001000101010000110101010000100000011101 0010110110101110000001011000010000001100010 01101001 01100100 0101001010001010100110 01000101010000110101SELECT timestamp00000011101 000110100101101101011001 010111001101110100011000010110110101110000001011000010000001100010 01101001 01100100 0101001010001010100110001000101010000110101010000100000011101 0101001010001010100110 001000101010000110101010000100000011101 000110100101101101011001 15m0101001010001010100110 001000101010000110101010000100000011101 000110100101101101011001 010010000001100010 ",
+ { sql: "SELECT timestamp time, symbol, price as priceAAPL," },
+ " 01101001 ",
+ {
+ sql: "avg(price) over (PARTITION BY symbol ORDER BY timestamp RANGE between 30 days PRECEDING AND CURRENT ROW) moving_avg_30_days",
+ },
+ " 00001 10101010000100000011101\n010111001101110100011000010110110101110000001011000010000001100010 01101001 01100100 0101001010001010100110001000 101010000110101010000100000011101 01000101010000110101010000100000011101 00011010010110110101100 00100010101000011 FROM trades 00100000011101 00011010000 01 10110110101 1100 11001 0101110011011101000110000011010010110110101100101011100110111010001100001011 001011000010000001100001 001000101010000110101010000100000011 001010 \n01100100 01010010100010101001100010001010100001 10101010000100000011101 ",
+ { sql: "WHERE timestamp > dateadd('M', -1, now())" },
+ " 100110111010001100 0101110000001011000010 000000101100\n000001100010 01101001 01100100 0101001010001010100110001000101010000110101010000100000011101 001100010 01101001 01100100 ",
+ { sql: "AND symbol = 'AMZN';" },
+ " 1100010001010100001 101010100001 00000011101 00011010010110110101100101011100110111010001100 0010110110101110000001011000010000001100010 01101001 01100100 01101001 01100100 01101001 01100100 \n0101001010001010100110 001000101010000110101010000100000011101 000110100101101101011001 010111001101110100011000010110110101110000001011000010000001100010 01101001 01100100 \n0101001010001010100110001000101010000110101010000100000011101 000110100101101101011001010111001101110100011000010110110101110000001011000010000001100010 01101001 01100100 01010010100010101001100010001010100001 10101010000100000011101 00011010010110110101100101011100110111010001100 0010110110101110000001011000010000001100010 01101001 01100100 \n0101001010001010100110 001000101010000110101010000100000011101 000110100101101101011001 010111001101110100011000010110110101110000001011000010000001100010 01101001 01100100 ",
+]
+
+const designPx = (value: number) => `calc(${value} * 100vw / 1920)`
+
+const Backdrop = styled.div`
+ position: absolute;
+ top: 1%;
+ left: 0;
+ width: 100%;
+ aspect-ratio: 2 / 1;
+ max-height: 100vh;
+ overflow: hidden;
+ opacity: 0.4;
+ mask-image: linear-gradient(black 11.6%, transparent 63.8%);
+ z-index: 0;
+ pointer-events: none;
+ user-select: none;
+`
+
+const Noise = styled.div`
+ margin: ${designPx(-22)} ${designPx(-125)} 0 ${designPx(-127)};
+ font-family: ${({ theme }) => theme.fontMonospace};
+ font-size: ${designPx(19)};
+ font-weight: 400;
+ letter-spacing: ${designPx(1.674)};
+ line-height: 1.475;
+ color: rgba(144, 137, 252, 0.64);
+ white-space: pre-wrap;
+ word-break: break-word;
+`
+
+const Query = styled.span`
+ color: #9089fc;
+`
+
+export const LoginBackground = () => (
+
+
+ {SEGMENTS.map((segment) =>
+ typeof segment === "string" ? (
+ segment
+ ) : (
+ {segment.sql}
+ ),
+ )}
+
+
+)