diff --git a/src/Components/VoteButton/VoteButton.tsx b/src/Components/VoteButton/VoteButton.tsx
index aae357e..8880e0f 100644
--- a/src/Components/VoteButton/VoteButton.tsx
+++ b/src/Components/VoteButton/VoteButton.tsx
@@ -19,11 +19,18 @@ interface Particle {
 }
 
 type Props = {
-    initVotes: number
-    onVote: (Vote: number) => void
+    initVotes: number,
+    onVote: (Vote: number) => void,
+    fillType: 'leftRight' | 'upDown' | "background"
+    disableCounter?: boolean
 } & Omit<ComponentProps<typeof Button>, 'children'>
 
-export default function VoteButton({ initVotes, onVote = () => { }, ...props }: Props) {
+export default function VoteButton({
+    disableCounter = false,
+    fillType = 'leftRight',
+    initVotes,
+    onVote = () => { },
+    ...props }: Props) {
     const [voteCnt, setVoteCnt] = useState(0)
     const voteCntRef = useRef(0);
     const [sparks, setSparks] = useState<Particle[]>([]);
@@ -48,13 +55,14 @@ export default function VoteButton({ initVotes, onVote = () => { }, ...props }:
         incrementsCountRef.current += 1;
         setIncrementsCount(v => incrementsCountRef.current);
 
-        setIncrements(v => {
-            const genId = Math.random().toString();
-            setTimeout(() => {
-                setIncrements(v => v.filter(e => e.id !== genId))
-            }, 500)
-            return [...v, { id: genId, value: _incStep }]
-        });
+        if (!disableCounter)
+            setIncrements(v => {
+                const genId = Math.random().toString();
+                setTimeout(() => {
+                    setIncrements(v => v.filter(e => e.id !== genId))
+                }, 500)
+                return [...v, { id: genId, value: _incStep }]
+            });
 
         setVoteCnt(s => {
             const newValue = s + _incStep;
@@ -70,7 +78,7 @@ export default function VoteButton({ initVotes, onVote = () => { }, ...props }:
                 animation: randomItem(styles.fly_spark_1, styles.fly_spark_1),
                 animationSpeed: randomItem(1, 1.5, 2),
                 color: `hsl(0deg 86% ${random(50, 63)}%)`,
-                scale: random(1.2, 1.8)
+                scale: random(1, 1.5)
             }))
 
             // if on mobile screen, reduce number of sparks particles to 60%
@@ -108,22 +116,31 @@ export default function VoteButton({ initVotes, onVote = () => { }, ...props }:
     }
 
     return (
-        <Button
+        <button
             onMouseDown={handlePressDown}
             onMouseUp={handlePressUp}
             onMouseLeave={handlePressUp}
             onTouchStart={handlePressDown}
             onTouchEnd={handlePressUp}
-            size='md'
+
             color='none'
-            className={`text-gray-600 !border-0 bg-gray-25 hover:bg-gray-50  relative  noselect`}
+            className={`p-10 rounded-lg text-gray-600 !border-0 bg-white hover:bg-gray-50  relative  noselect active:scale-95`}
             {...props}
         >
             <div
-                className={styles.color_overlay}
+                className={`
+                ${styles.color_overlay}
+                ${fillType === 'upDown' && styles.color_overlay__upDown}
+                ${fillType === 'leftRight' && styles.color_overlay__leftRight}
+                ${fillType === 'background' && styles.color_overlay__background}
+                `}
                 style={{
                     "--increments": incrementsCount,
-                    "--offset": `${(incrementsCount ? (incrementsCount % 5 === 0 ? 5 : incrementsCount % 5) : 0) * 20}%`
+                    "--offset": `${(incrementsCount ? (incrementsCount % 5 === 0 ? 5 : incrementsCount % 5) : 0) * 20}%`,
+                    "--bg-color": fillType !== 'background' ?
+                        'hsl(0deg 86% max(calc((93 - var(--increments) / 3) * 1%), 68%))'
+                        :
+                        "hsl(0deg 86% max(calc((100 - var(--increments) / 2) * 1%), 68%))",
                 } as any}
             >
             </div>
@@ -148,7 +165,7 @@ export default function VoteButton({ initVotes, onVote = () => { }, ...props }:
                     } as any}
                 ><MdLocalFireDepartment className='' /></div>)
             }
-        </Button>
+        </button>
 
     )
 }
diff --git a/src/Components/VoteButton/styles.module.css b/src/Components/VoteButton/styles.module.css
index e2c7297..5bf9509 100644
--- a/src/Components/VoteButton/styles.module.css
+++ b/src/Components/VoteButton/styles.module.css
@@ -33,11 +33,25 @@
   width: 100%;
   height: 100%;
   position: absolute;
+}
+
+.color_overlay__background::before {
+  top: 0;
+  right: 0;
+}
+
+.color_overlay__leftRight::before {
   top: 0;
   right: 100%;
   transform: translateX(var(--offset));
 }
 
+.color_overlay__upDown::before {
+  top: 100%;
+  right: 0;
+  transform: translateY(calc(-1 * var(--offset)));
+}
+
 @keyframes fly_value {
   0% {
     transform: translate(-50%, 0) scale(0.5);
@@ -45,12 +59,12 @@
   }
 
   66% {
-    transform: translate(-50%, -36px) scale(1.2);
+    transform: translate(-50%, -26px) scale(1.2);
     opacity: 0.6;
   }
 
   100% {
-    transform: translate(-50%, -48px) scale(0.8);
+    transform: translate(-50%, -38px) scale(0.8);
     opacity: 0;
   }
 }