diff --git a/docs/docs/developers/guides/log-in-with-audius.mdx b/docs/docs/developers/guides/log-in-with-audius.mdx
index 037c6e3f3f1..8e65ffe7645 100644
--- a/docs/docs/developers/guides/log-in-with-audius.mdx
+++ b/docs/docs/developers/guides/log-in-with-audius.mdx
@@ -348,6 +348,8 @@ You must open this page with the required URL parameters, described below.
   whether the auth flow response parameters will be encoded in the query string or the fragment
   component of the redirect_uri when redirecting back to your app. Default behavior is equivalent to
   "fragment". We recommend NOT changing this if possible.
+- `display` _optional_ `"popup" | "fullScreen"` - determines whether the auth flow expects to be
+  rendered in a popup or a full screen view. Defaulted to `"popup"` if unspecified.
 
 **Example**
 
diff --git a/packages/ddex/webapp/client/src/pages/Login/Login.tsx b/packages/ddex/webapp/client/src/pages/Login/Login.tsx
index 9cb70ee7cc4..22cf2150515 100644
--- a/packages/ddex/webapp/client/src/pages/Login/Login.tsx
+++ b/packages/ddex/webapp/client/src/pages/Login/Login.tsx
@@ -20,7 +20,8 @@ const Login = () => {
     if (audiusSdk && auto) {
       audiusSdk.oauth!.login({
         scope: 'write',
-        redirectUri: new URL(window.location.href).origin
+        redirectUri: new URL(window.location.href).origin,
+        display: 'fullScreen'
       })
     }
   }, [audiusSdk, auto])
diff --git a/packages/libs/src/sdk/oauth/OAuth.ts b/packages/libs/src/sdk/oauth/OAuth.ts
index 8a66635f0fd..251b50e35b9 100644
--- a/packages/libs/src/sdk/oauth/OAuth.ts
+++ b/packages/libs/src/sdk/oauth/OAuth.ts
@@ -191,11 +191,13 @@ export class OAuth {
   login({
     scope = 'read',
     params,
-    redirectUri = 'postMessage'
+    redirectUri = 'postMessage',
+    display = 'popup'
   }: {
     scope?: OAuthScope
     params?: WriteOnceParams
     redirectUri?: string
+    display?: 'popup' | 'fullScreen'
   }) {
     const scopeFormatted = typeof scope === 'string' ? [scope] : scope
     if (!this.config.appName && !this.apiKey) {
@@ -249,7 +251,8 @@ export class OAuth {
 
     const fullOauthUrl = `${
       OAUTH_URL[this.env]
-    }?scope=${effectiveScope}&state=${csrfToken}&redirect_uri=${redirectUri}&origin=${originURISafe}&${appIdURIParam}${writeOnceParams}`
+    }?scope=${effectiveScope}&state=${csrfToken}&redirect_uri=${redirectUri}&origin=${originURISafe}&${appIdURIParam}${writeOnceParams}&display=${display}`
+
     if (redirectUri === 'postMessage') {
       this.activePopupWindow = window.open(fullOauthUrl, '', windowOptions)
       this._clearPopupCheckInterval()
diff --git a/packages/web/src/pages/oauth-login-page/OAuthLoginPage.module.css b/packages/web/src/pages/oauth-login-page/OAuthLoginPage.module.css
index 374e458d0b0..5e52f814ffa 100644
--- a/packages/web/src/pages/oauth-login-page/OAuthLoginPage.module.css
+++ b/packages/web/src/pages/oauth-login-page/OAuthLoginPage.module.css
@@ -1,12 +1,16 @@
-.bgWhite {
-  background-color: var(--harmony-static-white);
-}
-
 .wrapper {
-  margin: 0 auto;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
   justify-content: center;
-  width: 375px;
   display: flex;
+  overflow: scroll;
+}
+
+.popup {
+  background-color: var(--harmony-static-white);
 }
 
 .centeredContent {
@@ -29,7 +33,7 @@
   text-overflow: ellipsis;
 }
 
-.loadingStateContainer {
+.popup .loadingStateContainer {
   margin-top: 200px;
 }
 
diff --git a/packages/web/src/pages/oauth-login-page/OAuthLoginPage.tsx b/packages/web/src/pages/oauth-login-page/OAuthLoginPage.tsx
index 1cfef988140..8cc24a229f7 100644
--- a/packages/web/src/pages/oauth-login-page/OAuthLoginPage.tsx
+++ b/packages/web/src/pages/oauth-login-page/OAuthLoginPage.tsx
@@ -1,4 +1,4 @@
-import { FormEvent, useLayoutEffect, useState } from 'react'
+import { FormEvent, useState } from 'react'
 
 import { Name, ErrorLevel } from '@audius/common/models'
 import { accountSelectors, signOutActions } from '@audius/common/store'
@@ -35,12 +35,6 @@ const { signOut } = signOutActions
 const { getAccountUser } = accountSelectors
 
 export const OAuthLoginPage = () => {
-  useLayoutEffect(() => {
-    document.body.classList.add(styles.bgWhite)
-    return () => {
-      document.body.classList.remove(styles.bgWhite)
-    }
-  }, [])
   const record = useRecord()
   const account = useSelector(getAccountUser)
   const isLoggedIn = Boolean(account)
@@ -156,7 +150,8 @@ export const OAuthLoginPage = () => {
     appImage,
     userEmail,
     authorize,
-    txParams
+    txParams,
+    display
   } = useOAuthSetup({
     onError: handleAuthError,
     onPendingTransactionApproval: handlePendingTransactionApproval,
@@ -247,7 +242,7 @@ export const OAuthLoginPage = () => {
 
   if (queryParamsError) {
     return (
-      <ContentWrapper>
+      <ContentWrapper display={display}>
         <div className={cn(styles.centeredContent, styles.titleContainer)}>
           <span className={styles.errorText}>{queryParamsError}</span>
         </div>
@@ -256,7 +251,7 @@ export const OAuthLoginPage = () => {
   }
   if (loading) {
     return (
-      <ContentWrapper>
+      <ContentWrapper display={display}>
         <div
           className={cn(styles.centeredContent, styles.loadingStateContainer)}
         >
@@ -271,7 +266,7 @@ export const OAuthLoginPage = () => {
   }
 
   return (
-    <ContentWrapper>
+    <ContentWrapper display={display}>
       <Flex alignItems='center' direction='column'>
         <Flex gap='l' alignItems='center' mb='l'>
           <Flex h='88px' w='88px'>
diff --git a/packages/web/src/pages/oauth-login-page/components/ContentWrapper.tsx b/packages/web/src/pages/oauth-login-page/components/ContentWrapper.tsx
index 1491f08710a..294a34c36d9 100644
--- a/packages/web/src/pages/oauth-login-page/components/ContentWrapper.tsx
+++ b/packages/web/src/pages/oauth-login-page/components/ContentWrapper.tsx
@@ -1,9 +1,34 @@
 import { ReactNode } from 'react'
 
+import { Paper } from '@audius/harmony'
+import cn from 'classnames'
+
 import styles from '../OAuthLoginPage.module.css'
+import { Display } from '../types'
 
-export const ContentWrapper = ({ children }: { children: ReactNode }) => (
-  <div className={styles.wrapper}>
-    <div className={styles.container}>{children}</div>
+export const ContentWrapper = ({
+  display,
+  children
+}: {
+  display: Display
+  children: ReactNode
+}) => (
+  <div className={cn(styles.wrapper, { [styles.popup]: display === 'popup' })}>
+    {display === 'popup' ? (
+      <div className={styles.container}>{children}</div>
+    ) : (
+      <Paper
+        shadow='mid'
+        w='375px'
+        direction='column'
+        pv='3xl'
+        ph='xl'
+        mv='3xl'
+        alignSelf='flex-start'
+        borderRadius='xl'
+      >
+        {children}
+      </Paper>
+    )}
   </div>
 )
diff --git a/packages/web/src/pages/oauth-login-page/hooks.ts b/packages/web/src/pages/oauth-login-page/hooks.ts
index 70587e3ea86..40e75e27e73 100644
--- a/packages/web/src/pages/oauth-login-page/hooks.ts
+++ b/packages/web/src/pages/oauth-login-page/hooks.ts
@@ -19,6 +19,7 @@ import * as errorActions from 'store/errors/actions'
 import { reportToSentry } from 'store/errors/reportToSentry'
 
 import { messages } from './messages'
+import { Display } from './types'
 import {
   authWrite,
   formOAuthResponse,
@@ -47,6 +48,7 @@ export const useParsedQueryParams = () => {
     api_key: apiKey,
     origin,
     tx,
+    display: displayQueryParam,
     ...rest
   } = queryString.parse(search)
 
@@ -130,6 +132,9 @@ export const useParsedQueryParams = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isRedirectValid, parsedOrigin, parsedRedirectUri, search])
 
+  const display: Display =
+    displayQueryParam === 'fullScreen' ? 'fullScreen' : 'popup'
+
   return {
     apiKey,
     appName,
@@ -143,7 +148,8 @@ export const useParsedQueryParams = () => {
     parsedOrigin,
     error,
     tx,
-    txParams
+    txParams,
+    display
   }
 }
 
@@ -181,6 +187,7 @@ export const useOAuthSetup = ({
     parsedOrigin,
     txParams,
     tx,
+    display,
     error: initError
   } = useParsedQueryParams()
   const accountIsLoading = useSelector((state: CommonState) => {
@@ -518,6 +525,7 @@ export const useOAuthSetup = ({
     userEmail,
     authorize,
     tx,
-    txParams: txParams as WriteOnceParams
+    txParams: txParams as WriteOnceParams,
+    display
   }
 }
diff --git a/packages/web/src/pages/oauth-login-page/types.ts b/packages/web/src/pages/oauth-login-page/types.ts
new file mode 100644
index 00000000000..64e431f65ad
--- /dev/null
+++ b/packages/web/src/pages/oauth-login-page/types.ts
@@ -0,0 +1 @@
+export type Display = 'popup' | 'fullScreen'