diff --git a/apps/admin-x-settings/src/admin-x-ds/global/form/TextField.tsx b/apps/admin-x-settings/src/admin-x-ds/global/form/TextField.tsx
index ee8d6f30e5..e640721441 100644
--- a/apps/admin-x-settings/src/admin-x-ds/global/form/TextField.tsx
+++ b/apps/admin-x-settings/src/admin-x-ds/global/form/TextField.tsx
@@ -68,7 +68,7 @@ const TextField: React.FC<TextFieldProps> = ({
         (title && !hideTitle) && `mt-1.5`
     );
 
-    const bgClasses = clsx(
+    const bgClasses = !unstyled && clsx(
         'absolute inset-0 rounded-md border text-grey-300 transition-all peer-hover:bg-grey-100 peer-focus:border-green peer-focus:bg-white peer-focus:shadow-[0_0_0_1px_rgba(48,207,67,1)] dark:peer-hover:bg-grey-925 dark:peer-focus:bg-grey-925',
         error ? `border-red bg-white dark:bg-grey-925` : 'border-transparent bg-grey-150 dark:bg-grey-900',
         disabled && 'bg-grey-100 dark:bg-grey-925'
@@ -107,7 +107,7 @@ const TextField: React.FC<TextFieldProps> = ({
     field = (
         <div className={fieldContainerClasses}>
             {inputField}
-            {!clearBg && <div className={bgClasses}></div>}
+            {!unstyled && !clearBg && <div className={bgClasses ? bgClasses : ''}></div>}
             {rightPlaceholder && <span className={rightPlaceholderClasses || ''}>{rightPlaceholder}</span>}
         </div>
     );
diff --git a/apps/admin-x-settings/src/components/settings/membership/portal/PortalLinks.tsx b/apps/admin-x-settings/src/components/settings/membership/portal/PortalLinks.tsx
index d32b62a60f..91da26f143 100644
--- a/apps/admin-x-settings/src/components/settings/membership/portal/PortalLinks.tsx
+++ b/apps/admin-x-settings/src/components/settings/membership/portal/PortalLinks.tsx
@@ -27,12 +27,11 @@ const PortalLink: React.FC<PortalLinkPrefs> = ({name, value}) => {
                     button.innerText = 'Copy';
                 }, 1000);
             }}/>}
-            hideActions
             separator
         >
-            <div className='flex w-full grow items-center gap-5 py-3'>
-                <label className='inline-block w-[240px] whitespace-nowrap' htmlFor={id}>{name}</label>
-                <TextField className='border-b-500 grow bg-transparent p-1 text-grey-700' id={id} value={value} disabled unstyled />
+            <div className='flex w-full grow flex-col py-3 lg:flex-row lg:items-center lg:gap-2'>
+                <label className='inline-block whitespace-nowrap lg:w-[180px] lg:min-w-[180px]' htmlFor={id}>{name}:</label>
+                <TextField className='border-b-500 grow bg-transparent py-1 text-grey-700 lg:p-1' id={id} value={value} disabled unstyled />
             </div>
         </ListItem>
     );
@@ -79,8 +78,8 @@ const PortalLinks: React.FC = () => {
                     hideActions
                     separator
                 >
-                    <div className='flex w-full items-center gap-5 py-2 pr-6'>
-                        <span className='inline-block w-[240px] shrink-0'>Tier</span>
+                    <div className='flex w-full items-center gap-2 py-2'>
+                        <span className='inline-block w-[180px] min-w-[180px] shrink-0'>Tier:</span>
                         <Select
                             options={tierOptions}
                             selectedOption={tierOptions.find(option => option.value === selectedTier)}