diff --git a/packages/web/src/javascripts/Components/SmartViewBuilder/AddSmartViewModal.tsx b/packages/web/src/javascripts/Components/SmartViewBuilder/AddSmartViewModal.tsx
index fe6cc6271..691536345 100644
--- a/packages/web/src/javascripts/Components/SmartViewBuilder/AddSmartViewModal.tsx
+++ b/packages/web/src/javascripts/Components/SmartViewBuilder/AddSmartViewModal.tsx
@@ -147,7 +147,7 @@ const AddSmartViewModal = ({ controller, platform }: Props) => {
           <div className="flex items-center gap-2.5">
             <div className="text-sm font-semibold">Title:</div>
             <input
-              className="rounded border border-border bg-default px-2 py-1"
+              className="rounded border border-border bg-default md:translucent-ui:bg-transparent px-2 py-1"
               value={title}
               onChange={(event) => {
                 setTitle(event.target.value)
diff --git a/packages/web/src/javascripts/Components/Tabs/Tab.tsx b/packages/web/src/javascripts/Components/Tabs/Tab.tsx
index 8062a8a90..89d568f5e 100644
--- a/packages/web/src/javascripts/Components/Tabs/Tab.tsx
+++ b/packages/web/src/javascripts/Components/Tabs/Tab.tsx
@@ -20,7 +20,7 @@ const Tab = ({ id, className, children, ...props }: Props) => {
       aria-selected={isActive}
       aria-controls={`tab-panel-${id}`}
       className={classNames(
-        'relative cursor-pointer border-0 bg-default px-3 py-2.5 text-sm focus:shadow-inner',
+        'relative cursor-pointer border-0 bg-default md:translucent-ui:bg-transparent px-3 py-2.5 text-sm focus:shadow-inner',
         isActive ? 'font-medium text-info' : 'text-text',
         isActive && 'after:absolute after:bottom-0 after:left-0 after:h-[2px] after:w-full after:bg-info',
         className,