diff --git a/package.json b/package.json
index cc80374..4fb0101 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@giveth/ui-design-system",
-	"version": "1.11.26",
+	"version": "1.11.27",
 	"files": [
 		"/lib"
 	],
diff --git a/src/components/buttonLinks/ButtonLink.tsx b/src/components/buttonLinks/ButtonLink.tsx
index 7adb066..11ddb10 100644
--- a/src/components/buttonLinks/ButtonLink.tsx
+++ b/src/components/buttonLinks/ButtonLink.tsx
@@ -22,33 +22,33 @@ const ButtonLinkContainer = styled.span<IButtonLinkContainerProps>`
 					? css`
 							color: ${brandColors.giv[400]};
 							background-color: ${brandColors.giv[500]};
-						`
+					  `
 					: css`
 							color: ${neutralColors.gray[100]};
 							background-color: ${brandColors.pinky[500]};
-						`;
+					  `;
 			case 'secondary':
 				return props.disabled
 					? css`
 							color: ${brandColors.giv[400]};
 							background-color: ${brandColors.giv[500]};
-						`
+					  `
 					: css`
 							color: ${neutralColors.gray[100]};
 							background-color: ${brandColors.giv[500]};
-						`;
+					  `;
 			case 'texty':
 				return props.disabled
 					? css`
 							color: ${brandColors.giv[500]};
 							background-color: unset;
 							padding: 8px 24px;
-						`
+					  `
 					: css`
 							color: ${brandColors.deep[100]};
 							background-color: unset;
 							padding: 8px 24px;
-						`;
+					  `;
 			case 'texty-gray':
 				return props.disabled
 					? css`
@@ -56,12 +56,12 @@ const ButtonLinkContainer = styled.span<IButtonLinkContainerProps>`
 							background-color: unset;
 							padding: 8px 24px;
 							opacity: 0.5;
-						`
+					  `
 					: css`
 							color: ${neutralColors.gray[500]};
 							background-color: unset;
 							padding: 8px 24px;
-						`;
+					  `;
 			case 'texty-primary':
 				return props.disabled
 					? css`
@@ -69,12 +69,12 @@ const ButtonLinkContainer = styled.span<IButtonLinkContainerProps>`
 							background-color: unset;
 							padding: 8px 24px;
 							opacity: 0.5;
-						`
+					  `
 					: css`
 							color: ${brandColors.pinky[500]};
 							background-color: unset;
 							padding: 8px 24px;
-						`;
+					  `;
 			case 'texty-secondary':
 				return props.disabled
 					? css`
@@ -82,23 +82,23 @@ const ButtonLinkContainer = styled.span<IButtonLinkContainerProps>`
 							background-color: unset;
 							padding: 8px 24px;
 							opacity: 0.5;
-						`
+					  `
 					: css`
 							color: ${brandColors.giv[500]};
 							background-color: unset;
 							padding: 8px 24px;
-						`;
+					  `;
 
 			default:
 				return props.disabled
 					? css`
 							color: ${brandColors.giv[400]};
 							background-color: ${brandColors.giv[500]};
-						`
+					  `
 					: css`
 							color: ${neutralColors.gray[100]};
 							background-color: ${brandColors.pinky[500]};
-						`;
+					  `;
 		}
 	}}
 	${props =>
@@ -106,8 +106,8 @@ const ButtonLinkContainer = styled.span<IButtonLinkContainerProps>`
 			? ''
 			: css`
 					cursor: pointer;
-				`}
-  :hover {
+			  `}
+  &:hover {
 		${props => {
 			if (props.disabled) return '';
 			switch (props.$linkType) {
diff --git a/src/components/buttonLinks/OutlineButtonLink.tsx b/src/components/buttonLinks/OutlineButtonLink.tsx
index 3fc5f2d..be9ba78 100644
--- a/src/components/buttonLinks/OutlineButtonLink.tsx
+++ b/src/components/buttonLinks/OutlineButtonLink.tsx
@@ -9,9 +9,7 @@ const ButtonLinkContainer = styled.span<IButtonLinkContainerProps>`
 	border: 2px solid;
 	border-radius: 48px;
 	padding: ${props => (props.size === 'large' ? '22px' : '14px')} 24px;
-	transition:
-		color 0.3s ease,
-		border-color 0.3s ease,
+	transition: color 0.3s ease, border-color 0.3s ease,
 		background-color 0.3s ease;
 	background-color: unset;
 	display: flex;
@@ -26,35 +24,35 @@ const ButtonLinkContainer = styled.span<IButtonLinkContainerProps>`
 					? css`
 							color: ${brandColors.giv[500]};
 							border-color: ${brandColors.giv[500]};
-						`
+					  `
 					: css`
 							color: ${brandColors.pinky[400]};
 							border-color: ${brandColors.pinky[400]};
-						`;
+					  `;
 			case 'secondary':
 				return props.disabled
 					? css`
 							color: ${brandColors.giv[500]};
 							border-color: ${brandColors.giv[500]};
-						`
+					  `
 					: css`
 							color: ${brandColors.giv['000']};
 							border-color: ${brandColors.giv['000']};
-						`;
+					  `;
 			default:
 				return props.disabled
 					? css`
 							color: ${brandColors.giv[500]};
 							border-color: ${brandColors.giv[500]};
-						`
+					  `
 					: css`
 							color: ${brandColors.pinky[400]};
 							border-color: ${brandColors.pinky[400]};
-						`;
+					  `;
 		}
 	}}
 	${props => (props.disabled ? '' : 'cursor: pointer;')}
-  :hover {
+  &:hover {
 		${props => {
 			if (props.disabled) return '';
 			switch (props.$linkType) {
diff --git a/src/components/buttons/Button.tsx b/src/components/buttons/Button.tsx
index 572bf18..ad8accd 100644
--- a/src/components/buttons/Button.tsx
+++ b/src/components/buttons/Button.tsx
@@ -10,10 +10,7 @@ const ButtonContainer = styled.button<IButtonContainerProps>`
 	border: 0 solid;
 	border-radius: 48px;
 	padding: ${props => (props.size === 'large' ? '24px' : '16px')} 24px;
-	transition:
-		background-color 0.3s ease,
-		color 0.3s ease,
-		opacity 0.3s ease;
+	transition: background-color 0.3s ease, color 0.3s ease, opacity 0.3s ease;
 	display: flex;
 	justify-content: center;
 	align-items: center;
@@ -109,7 +106,7 @@ const ButtonContainer = styled.button<IButtonContainerProps>`
 		}
 	}}
 	${props => (props.disabled ? '' : 'cursor: pointer;')}
-  :hover {
+  &:hover {
 		${props => {
 			if (props.disabled) return '';
 			switch (props.$buttonType) {
diff --git a/src/components/buttons/OutlineButton.tsx b/src/components/buttons/OutlineButton.tsx
index 1892374..123e98b 100644
--- a/src/components/buttons/OutlineButton.tsx
+++ b/src/components/buttons/OutlineButton.tsx
@@ -10,9 +10,7 @@ const ButtonContainer = styled.button<IButtonContainerProps>`
 	border: 2px solid;
 	border-radius: 48px;
 	padding: ${props => (props.size === 'large' ? '22px' : '14px')} 24px;
-	transition:
-		color 0.3s ease,
-		border-color 0.3s ease,
+	transition: color 0.3s ease, border-color 0.3s ease,
 		background-color 0.3s ease;
 	background: unset;
 	display: flex;
@@ -28,33 +26,33 @@ const ButtonContainer = styled.button<IButtonContainerProps>`
 					? css`
 							color: ${brandColors.pinky[300]};
 							border-color: ${brandColors.pinky[300]};
-						`
+					  `
 					: css`
 							color: ${brandColors.pinky[400]};
 							border-color: ${brandColors.pinky[400]};
-						`;
+					  `;
 			case 'secondary':
 				return props.disabled
 					? css`
 							color: ${brandColors.giv[500]};
 							border-color: ${brandColors.giv[500]};
 							opacity: 0.4;
-						`
+					  `
 					: css`
 							color: ${brandColors.giv['000']};
 							border-color: ${brandColors.giv['000']};
-						`;
+					  `;
 			default:
 				return props.disabled
 					? css`
 							color: ${brandColors.giv[500]};
 							border-color: ${brandColors.giv[500]};
 							opacity: 0.4;
-						`
+					  `
 					: css`
 							color: ${brandColors.pinky[400]};
 							border-color: ${brandColors.pinky[400]};
-						`;
+					  `;
 		}
 	}}
 	${props =>
@@ -62,8 +60,8 @@ const ButtonContainer = styled.button<IButtonContainerProps>`
 			? ''
 			: css`
 					cursor: pointer;
-				`}
-  :hover {
+			  `}
+  &:hover {
 		${props => {
 			if (props.disabled) return '';
 			switch (props.$buttonType) {