diff --git a/packages/primevue/src/imagecompare/style/ImageCompareStyle.js b/packages/primevue/src/imagecompare/style/ImageCompareStyle.js
index 5ceccd1b0..29191d5c9 100644
--- a/packages/primevue/src/imagecompare/style/ImageCompareStyle.js
+++ b/packages/primevue/src/imagecompare/style/ImageCompareStyle.js
@@ -33,11 +33,11 @@ const theme = ({ dt }) => `
     height: ${dt('imagecompare.handle.size')};
     width: ${dt('imagecompare.handle.size')};
     background: ${dt('imagecompare.handle.background')};
-    border: ${dt('imagecompare.handle.border.width')} ${dt('imagecompare.handle.border.style')} ${dt('imagecompare.handle.border.color')};
+    border: ${dt('imagecompare.handle.border.width')} solid ${dt('imagecompare.handle.border.color')};
     border-radius: ${dt('imagecompare.handle.border.radius')};
     background-size: contain;
     cursor: ew-resize;
-    transition: all ${dt('transition.duration')};
+    transition: all ${dt('imagecompare.handle.transition.duration')};
 }
 
 .p-imagecompare-slider::-moz-range-thumb {
@@ -55,6 +55,26 @@ const theme = ({ dt }) => `
     outline: ${dt('imagecompare.handle.focus.ring.width')} ${dt('imagecompare.handle.focus.ring.style')} ${dt('imagecompare.handle.focus.ring.color')};
     outline-offset: ${dt('imagecompare.handle.focus.ring.offset')};
 }
+
+.p-imagecompare-slider:focus-visible::-moz-range-thumb {
+    box-shadow: ${dt('imagecompare.handle.focus.ring.shadow')};
+    outline: ${dt('imagecompare.handle.focus.ring.width')} ${dt('imagecompare.handle.focus.ring.style')} ${dt('imagecompare.handle.focus.ring.color')};
+    outline-offset: ${dt('imagecompare.handle.focus.ring.offset')};
+}
+
+.p-imagecompare-slider:hover::-webkit-slider-thumb {
+    background: ${dt('imagecompare.handle.hover.background')};
+    border-color: ${dt('imagecompare.handle.hover.border.color')};
+    height: ${dt('imagecompare.handle.hover.size')};
+    width: ${dt('imagecompare.handle.hover.size')};
+}
+
+.p-imagecompare-slider:hover::-moz-range-thumb {
+    background: ${dt('imagecompare.handle.hover.background')};
+    border-color: ${dt('imagecompare.handle.hover.border.color')};
+    height: ${dt('imagecompare.handle.hover.size')};
+    width: ${dt('imagecompare.handle.hover.size')};
+}
 `;
 
 const classes = {
diff --git a/packages/themes/src/presets/aura/imagecompare/index.js b/packages/themes/src/presets/aura/imagecompare/index.js
index 3570e59e0..a23de8470 100644
--- a/packages/themes/src/presets/aura/imagecompare/index.js
+++ b/packages/themes/src/presets/aura/imagecompare/index.js
@@ -1,13 +1,13 @@
 export default {
     handle: {
-        size: '30px',
+        size: '15px',
+        hoverSize: '30px',
         background: 'rgba(255,255,255,0.3)',
-        border: {
-            width: '3px',
-            style: 'solid',
-            color: 'rgba(255,255,255,0.3)',
-            radius: '50%'
-        },
+        hoverBackground: 'rgba(255,255,255,0.3)',
+        borderColor: 'unset',
+        hoverBorderColor: 'unset',
+        borderWidth: '0',
+        borderRadius: '50%',
         transitionDuration: '{transition.duration}',
         focusRing: {
             width: '{focus.ring.width}',
diff --git a/packages/themes/src/presets/lara/imagecompare/index.js b/packages/themes/src/presets/lara/imagecompare/index.js
index 3570e59e0..b2d8b6f1c 100644
--- a/packages/themes/src/presets/lara/imagecompare/index.js
+++ b/packages/themes/src/presets/lara/imagecompare/index.js
@@ -1,13 +1,13 @@
 export default {
     handle: {
-        size: '30px',
+        size: '15px',
+        hoverSize: '30px',
         background: 'rgba(255,255,255,0.3)',
-        border: {
-            width: '3px',
-            style: 'solid',
-            color: 'rgba(255,255,255,0.3)',
-            radius: '50%'
-        },
+        hoverBackground: 'rgba(255,255,255,0.3)',
+        borderColor: 'rgba(255,255,255,0.3)',
+        hoverBorderColor: 'rgba(255,255,255,0.3)',
+        borderWidth: '3px',
+        borderRadius: '50%',
         transitionDuration: '{transition.duration}',
         focusRing: {
             width: '{focus.ring.width}',
diff --git a/packages/themes/src/presets/lara/index.js b/packages/themes/src/presets/lara/index.js
index ee1e9ff11..6095cd58b 100644
--- a/packages/themes/src/presets/lara/index.js
+++ b/packages/themes/src/presets/lara/index.js
@@ -1,4 +1,3 @@
-import imagecompare from '@primevue/themes/aura/imagecompare';
 import accordion from '@primevue/themes/lara/accordion';
 import autocomplete from '@primevue/themes/lara/autocomplete';
 import avatar from '@primevue/themes/lara/avatar';
@@ -31,6 +30,7 @@ import galleria from '@primevue/themes/lara/galleria';
 import iconfield from '@primevue/themes/lara/iconfield';
 import iftalabel from '@primevue/themes/lara/iftalabel';
 import image from '@primevue/themes/lara/image';
+import imagecompare from '@primevue/themes/lara/imagecompare';
 import inlinemessage from '@primevue/themes/lara/inlinemessage';
 import inplace from '@primevue/themes/lara/inplace';
 import inputchips from '@primevue/themes/lara/inputchips';
diff --git a/packages/themes/src/presets/material/imagecompare/index.js b/packages/themes/src/presets/material/imagecompare/index.js
index 3570e59e0..1c873f859 100644
--- a/packages/themes/src/presets/material/imagecompare/index.js
+++ b/packages/themes/src/presets/material/imagecompare/index.js
@@ -1,13 +1,13 @@
 export default {
     handle: {
-        size: '30px',
-        background: 'rgba(255,255,255,0.3)',
-        border: {
-            width: '3px',
-            style: 'solid',
-            color: 'rgba(255,255,255,0.3)',
-            radius: '50%'
-        },
+        size: '20px',
+        hoverSize: '40px',
+        background: 'rgba(255,255,255,0.4)',
+        hoverBackground: 'rgba(255,255,255,0.6)',
+        borderColor: 'unset',
+        hoverBorderColor: 'unset',
+        borderWidth: '0',
+        borderRadius: '50%',
         transitionDuration: '{transition.duration}',
         focusRing: {
             width: '{focus.ring.width}',
diff --git a/packages/themes/src/presets/material/index.js b/packages/themes/src/presets/material/index.js
index d85be0bef..7c662d374 100644
--- a/packages/themes/src/presets/material/index.js
+++ b/packages/themes/src/presets/material/index.js
@@ -1,4 +1,3 @@
-import imagecompare from '@primevue/themes/aura/imagecompare';
 import accordion from '@primevue/themes/material/accordion';
 import autocomplete from '@primevue/themes/material/autocomplete';
 import avatar from '@primevue/themes/material/avatar';
@@ -31,6 +30,7 @@ import galleria from '@primevue/themes/material/galleria';
 import iconfield from '@primevue/themes/material/iconfield';
 import iftalabel from '@primevue/themes/material/iftalabel';
 import image from '@primevue/themes/material/image';
+import imagecompare from '@primevue/themes/material/imagecompare';
 import inlinemessage from '@primevue/themes/material/inlinemessage';
 import inplace from '@primevue/themes/material/inplace';
 import inputchips from '@primevue/themes/material/inputchips';
diff --git a/packages/themes/src/presets/nora/imagecompare/index.js b/packages/themes/src/presets/nora/imagecompare/index.js
index 3570e59e0..4c5b25c7c 100644
--- a/packages/themes/src/presets/nora/imagecompare/index.js
+++ b/packages/themes/src/presets/nora/imagecompare/index.js
@@ -1,14 +1,14 @@
 export default {
     handle: {
-        size: '30px',
+        size: '15px',
+        hoverSize: '30px',
         background: 'rgba(255,255,255,0.3)',
-        border: {
-            width: '3px',
-            style: 'solid',
-            color: 'rgba(255,255,255,0.3)',
-            radius: '50%'
-        },
-        transitionDuration: '{transition.duration}',
+        hoverBackground: 'rgba(255,255,255,0.3)',
+        borderColor: 'rgba(255,255,255,0.3)',
+        hoverBorderColor: 'rgba(255,255,255,0.3)',
+        borderWidth: '3px',
+        borderRadius: '{content.border.radius}',
+        transitionDuration: '0.2s',
         focusRing: {
             width: '{focus.ring.width}',
             style: '{focus.ring.style}',
diff --git a/packages/themes/src/presets/nora/index.js b/packages/themes/src/presets/nora/index.js
index 4a242dce8..0b57b7b5a 100644
--- a/packages/themes/src/presets/nora/index.js
+++ b/packages/themes/src/presets/nora/index.js
@@ -1,4 +1,3 @@
-import imagecompare from '@primevue/themes/aura/imagecompare';
 import accordion from '@primevue/themes/nora/accordion';
 import autocomplete from '@primevue/themes/nora/autocomplete';
 import avatar from '@primevue/themes/nora/avatar';
@@ -31,6 +30,7 @@ import galleria from '@primevue/themes/nora/galleria';
 import iconfield from '@primevue/themes/nora/iconfield';
 import iftalabel from '@primevue/themes/nora/iftalabel';
 import image from '@primevue/themes/nora/image';
+import imagecompare from '@primevue/themes/nora/imagecompare';
 import inlinemessage from '@primevue/themes/nora/inlinemessage';
 import inplace from '@primevue/themes/nora/inplace';
 import inputchips from '@primevue/themes/nora/inputchips';