diff --git a/ui/src/album/AlbumList.js b/ui/src/album/AlbumList.js
index 9a9bdd79c..f35d9d210 100644
--- a/ui/src/album/AlbumList.js
+++ b/ui/src/album/AlbumList.js
@@ -25,7 +25,7 @@ import albumLists, { defaultAlbumList } from './albumLists'
 const AlbumFilter = (props) => {
   const translate = useTranslate()
   return (
-    <Filter {...props}>
+    <Filter {...props} variant={'outlined'}>
       <SearchInput source="name" alwaysOn />
       <ReferenceInput
         label={translate('resources.album.fields.artist')}
diff --git a/ui/src/artist/ArtistList.js b/ui/src/artist/ArtistList.js
index 1b753005a..0d5c7c1df 100644
--- a/ui/src/artist/ArtistList.js
+++ b/ui/src/artist/ArtistList.js
@@ -30,7 +30,7 @@ const useStyles = makeStyles({
 })
 
 const ArtistFilter = (props) => (
-  <Filter {...props}>
+  <Filter {...props} variant={'outlined'}>
     <SearchInput source="name" alwaysOn />
     <QuickFilter
       source="starred"
diff --git a/ui/src/dialogs/SelectPlaylistInput.js b/ui/src/dialogs/SelectPlaylistInput.js
index f69238af8..2e4e53129 100644
--- a/ui/src/dialogs/SelectPlaylistInput.js
+++ b/ui/src/dialogs/SelectPlaylistInput.js
@@ -82,6 +82,7 @@ const SelectPlaylistInput = ({ onChange }) => {
       renderInput={(params) => (
         <TextField
           autoFocus
+          variant={'outlined'}
           {...params}
           label={translate('resources.playlist.fields.name')}
         />
diff --git a/ui/src/personal/Personal.js b/ui/src/personal/Personal.js
index ab7f9bae4..303c808b3 100644
--- a/ui/src/personal/Personal.js
+++ b/ui/src/personal/Personal.js
@@ -126,7 +126,7 @@ const Personal = () => {
   return (
     <Card className={classes.root}>
       <Title title={'Navidrome - ' + translate('menu.personal.name')} />
-      <SimpleForm toolbar={null}>
+      <SimpleForm toolbar={null} variant={'outlined'}>
         <SelectTheme />
         <SelectLanguage />
         <SelectDefaultView />
diff --git a/ui/src/player/PlayerEdit.js b/ui/src/player/PlayerEdit.js
index 009b1c137..0da820204 100644
--- a/ui/src/player/PlayerEdit.js
+++ b/ui/src/player/PlayerEdit.js
@@ -19,7 +19,7 @@ const PlayerTitle = ({ record }) => {
 
 const PlayerEdit = (props) => (
   <Edit title={<PlayerTitle />} {...props}>
-    <SimpleForm>
+    <SimpleForm variant={'outlined'}>
       <TextInput source="name" validate={[required()]} />
       <ReferenceInput
         source="transcodingId"
diff --git a/ui/src/player/PlayerList.js b/ui/src/player/PlayerList.js
index 26c5e21f2..c27fcfd3d 100644
--- a/ui/src/player/PlayerList.js
+++ b/ui/src/player/PlayerList.js
@@ -12,7 +12,7 @@ import { useMediaQuery } from '@material-ui/core'
 import { SimpleList, List } from '../common'
 
 const PlayerFilter = (props) => (
-  <Filter {...props}>
+  <Filter {...props} variant={'outlined'}>
     <SearchInput source="name" alwaysOn />
   </Filter>
 )
diff --git a/ui/src/playlist/PlaylistCreate.js b/ui/src/playlist/PlaylistCreate.js
index 45a36b768..a6d525b9a 100644
--- a/ui/src/playlist/PlaylistCreate.js
+++ b/ui/src/playlist/PlaylistCreate.js
@@ -9,7 +9,7 @@ import {
 
 const PlaylistCreate = (props) => (
   <Create {...props}>
-    <SimpleForm redirect="list">
+    <SimpleForm redirect="list" variant={'outlined'}>
       <TextInput source="name" validate={required()} />
       <TextInput multiline source="comment" />
       <BooleanInput source="public" initialValue={true} />
diff --git a/ui/src/playlist/PlaylistEdit.js b/ui/src/playlist/PlaylistEdit.js
index 90324c26f..d05d96e60 100644
--- a/ui/src/playlist/PlaylistEdit.js
+++ b/ui/src/playlist/PlaylistEdit.js
@@ -21,7 +21,7 @@ const SyncFragment = ({ formData, ...rest }) => {
 
 const PlaylistEdit = (props) => (
   <Edit {...props}>
-    <SimpleForm redirect="list">
+    <SimpleForm redirect="list" variant={'outlined'}>
       <TextInput source="name" validate={required()} />
       <TextInput multiline source="comment" />
       <BooleanInput source="public" />
diff --git a/ui/src/playlist/PlaylistList.js b/ui/src/playlist/PlaylistList.js
index 2d292ecc7..375d101a5 100644
--- a/ui/src/playlist/PlaylistList.js
+++ b/ui/src/playlist/PlaylistList.js
@@ -15,7 +15,7 @@ import { DurationField, List } from '../common'
 import Writable, { isWritable } from '../common/Writable'
 
 const PlaylistFilter = (props) => (
-  <Filter {...props}>
+  <Filter {...props} variant={'outlined'}>
     <SearchInput source="name" alwaysOn />
   </Filter>
 )
diff --git a/ui/src/song/SongList.js b/ui/src/song/SongList.js
index dfcbfbb07..4b0b36439 100644
--- a/ui/src/song/SongList.js
+++ b/ui/src/song/SongList.js
@@ -36,7 +36,7 @@ const useStyles = makeStyles({
 })
 
 const SongFilter = (props) => (
-  <Filter {...props}>
+  <Filter {...props} variant={'outlined'}>
     <SearchInput source="title" alwaysOn />
     <QuickFilter
       source="starred"
diff --git a/ui/src/transcoding/TranscodingCreate.js b/ui/src/transcoding/TranscodingCreate.js
index 3f85a87f2..949c0a6da 100644
--- a/ui/src/transcoding/TranscodingCreate.js
+++ b/ui/src/transcoding/TranscodingCreate.js
@@ -22,7 +22,7 @@ const TranscodingTitle = () => {
 
 const TranscodingCreate = (props) => (
   <Create title={<TranscodingTitle />} {...props}>
-    <SimpleForm>
+    <SimpleForm variant={'outlined'}>
       <TextInput source="name" validate={[required()]} />
       <TextInput source="targetFormat" validate={[required()]} />
       <SelectInput
diff --git a/ui/src/transcoding/TranscodingEdit.js b/ui/src/transcoding/TranscodingEdit.js
index 1a6debbac..69a0bb784 100644
--- a/ui/src/transcoding/TranscodingEdit.js
+++ b/ui/src/transcoding/TranscodingEdit.js
@@ -24,7 +24,7 @@ const TranscodingEdit = (props) => {
       <TranscodingNote message={'message.transcodingEnabled'} />
 
       <Edit title={<TranscodingTitle />} {...props}>
-        <SimpleForm>
+        <SimpleForm variant={'outlined'}>
           <TextInput source="name" validate={[required()]} />
           <TextInput source="targetFormat" validate={[required()]} />
           <SelectInput
diff --git a/ui/src/user/UserCreate.js b/ui/src/user/UserCreate.js
index 5ccf922a7..ab50c5fe8 100644
--- a/ui/src/user/UserCreate.js
+++ b/ui/src/user/UserCreate.js
@@ -19,7 +19,7 @@ const UserCreate = (props) => {
   })
   return (
     <Create title={<Title subTitle={title} />} {...props}>
-      <SimpleForm redirect="list">
+      <SimpleForm redirect="list" variant={'outlined'}>
         <TextInput source="userName" validate={[required()]} />
         <TextInput source="name" validate={[required()]} />
         <TextInput source="email" validate={[required(), email()]} />
diff --git a/ui/src/user/UserEdit.js b/ui/src/user/UserEdit.js
index 3940f8292..8f2a4679a 100644
--- a/ui/src/user/UserEdit.js
+++ b/ui/src/user/UserEdit.js
@@ -38,7 +38,7 @@ const UserToolbar = (props) => (
 
 const UserEdit = (props) => (
   <Edit title={<UserTitle />} {...props}>
-    <SimpleForm toolbar={<UserToolbar />}>
+    <SimpleForm variant={'outlined'} toolbar={<UserToolbar />}>
       <TextInput source="userName" validate={[required()]} />
       <TextInput source="name" validate={[required()]} />
       <TextInput source="email" validate={[email()]} />
diff --git a/ui/src/user/UserList.js b/ui/src/user/UserList.js
index 33bb291b2..f2dd33d78 100644
--- a/ui/src/user/UserList.js
+++ b/ui/src/user/UserList.js
@@ -12,7 +12,7 @@ import { useMediaQuery } from '@material-ui/core'
 import { List } from '../common'
 
 const UserFilter = (props) => (
-  <Filter {...props}>
+  <Filter {...props} variant={'outlined'}>
     <SearchInput source="name" alwaysOn />
   </Filter>
 )