2 files changed, 6 insertions, 1 deletions
diff --git a/src/client/views/StyleProvider.scss b/src/client/views/StyleProvider.scss
index 00bf503f5..30a026dbc 100644
--- a/src/client/views/StyleProvider.scss
+++ b/src/client/views/StyleProvider.scss
@@ -1,6 +1,7 @@
 .styleProvider-filter,
 .styleProvider-audio,
 .styleProvider-paint,
+.styleProvider-paint-selected,
 .styleProvider-lock {
     font-size: 10;
     width: 15;
@@ -29,9 +30,13 @@
 .styleProvider-audio {
     right: 30;
 }
+.styleProvider-paint-selected,
 .styleProvider-paint {
     top: 15;
 }
+.styleProvider-paint-selected {
+    right: -30;
+}
 .styleProvider-lock:hover,
 .styleProvider-audio:hover,
 .styleProvider-filter:hover {
diff --git a/src/client/views/StyleProvider.tsx b/src/client/views/StyleProvider.tsx
index d3d13988f..fa0be225e 100644
--- a/src/client/views/StyleProvider.tsx
+++ b/src/client/views/StyleProvider.tsx
@@ -278,7 +278,7 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<FieldViewProps &
                         </div>
                     );
             const paint = () => !doc?.onPaint ? null : (
-                        <div className="styleProvider-paint" onClick={e => togglePaintView(e, doc, props)}>
+                        <div className={`styleProvider-paint${props?.DocumentView?.().IsSelected ? "-selected":""}`} onClick={e => togglePaintView(e, doc, props)}>
                             <FontAwesomeIcon icon='pen' size="lg" />
                         </div>
                     );