diff --git a/package.json b/package.json
index 11ca01556..3c5143397 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "skye",
-  "version": "6.0.4-nightly.3",
+  "version": "6.0.4-nightly.4",
   "sideEffects": false,
   "description": "Extensible, fast and innovative web browser with material UI.",
   "keywords": [
diff --git a/src/renderer/views/app/components/AddressBar/style.ts b/src/renderer/views/app/components/AddressBar/style.ts
index 07437ad29..e491da1cb 100644
--- a/src/renderer/views/app/components/AddressBar/style.ts
+++ b/src/renderer/views/app/components/AddressBar/style.ts
@@ -101,6 +101,8 @@ export const StyledAddressBar = styled.div<AddressBarProps>`
       }
     `}
   `};
+
+  transition: background-color 0.25s, color 0.25s;
 `;
 
 export const InputContainer = styled.div`
diff --git a/src/renderer/views/app/components/Tab/style.ts b/src/renderer/views/app/components/Tab/style.ts
index 484fd4e96..1922505a5 100644
--- a/src/renderer/views/app/components/Tab/style.ts
+++ b/src/renderer/views/app/components/Tab/style.ts
@@ -249,5 +249,6 @@ export const TabContainer = styled.div<TabContainerProps>`
     height: ${theme.tabHeight}px;
     border-radius: ${theme.isCompact && !hasTabGroup ? '8px' : 'auto'};
     border-radius: 8px;
+    transition: background-color 0.25s, color 0.25s;
   `};
 `;
diff --git a/src/renderer/views/app/components/Tabbar/style.ts b/src/renderer/views/app/components/Tabbar/style.ts
index 282f393b4..4123f21b1 100644
--- a/src/renderer/views/app/components/Tabbar/style.ts
+++ b/src/renderer/views/app/components/Tabbar/style.ts
@@ -25,6 +25,8 @@ export const StyledTabbar = styled.div<{
   ${({ color, theme }) => css`
     background-color: ${color ? color : theme['titlebar.backgroundColor']};
   `};
+
+  transition: background-color 0.25s, color 0.25s;
 `;
 
 /* &:hover {
diff --git a/src/renderer/views/app/components/Titlebar/style.ts b/src/renderer/views/app/components/Titlebar/style.ts
index 77c0fb96f..34ade8a1d 100644
--- a/src/renderer/views/app/components/Titlebar/style.ts
+++ b/src/renderer/views/app/components/Titlebar/style.ts
@@ -36,6 +36,8 @@ export const StyledTitlebar = styled.div<TitlebarProps>`
       -webkit-app-region: ${isFullscreen ? 'no-drag' : 'drag'};
     }
   `};
+
+  transition: background-color 0.25s, color 0.25s;
 `;
 
 interface FullscreenExistButtonProps {
diff --git a/src/renderer/views/app/components/Toolbar/style.ts b/src/renderer/views/app/components/Toolbar/style.ts
index a3a21ed85..b303586d7 100644
--- a/src/renderer/views/app/components/Toolbar/style.ts
+++ b/src/renderer/views/app/components/Toolbar/style.ts
@@ -29,4 +29,6 @@ export const StyledToolbar = styled.div<ToolbarProps>`
       -webkit-app-region: ${isFullscreen ? 'no-drag' : 'drag'};
     }
   `};
+
+  transition: background-color 0.25s, color 0.25s;
 `;