diff --git a/packages/app/src/App.jsx b/packages/app/src/App.jsx
index 1c754090..d89825a6 100644
--- a/packages/app/src/App.jsx
+++ b/packages/app/src/App.jsx
@@ -417,6 +417,7 @@ class App extends React.Component {
 				<title>{config.app.siteName}</title>
 			</Helmet>
 			<antd.ConfigProvider>
+				<div className="backgroundDecorator" />
 				<Layout
 					user={this.state.user}
 					staticRenders={App.staticRenders}
diff --git a/packages/app/src/layout/header/index.less b/packages/app/src/layout/header/index.less
index 733f105e..24b2e0b1 100644
--- a/packages/app/src/layout/header/index.less
+++ b/packages/app/src/layout/header/index.less
@@ -14,8 +14,8 @@
 
 	transition: all ease-in-out 150ms;
 
-	background: var(--background-color-primary) !important;
-	background-color: var(--background-color-primary) !important;
+	background-color: transparent;
+	background: transparent !important;
 
 	border-bottom: 1px var(--border-color) solid;
 
diff --git a/packages/app/src/layout/sidedrawer/index.less b/packages/app/src/layout/sidedrawer/index.less
index 64f0f4a5..5ccd4057 100644
--- a/packages/app/src/layout/sidedrawer/index.less
+++ b/packages/app/src/layout/sidedrawer/index.less
@@ -4,6 +4,10 @@
     display: flex;
     flex-direction: row;
 
+    > div {
+        transform: translate(-50px, 0);
+    }
+
     .sidedrawer {
         position: relative;
 
@@ -28,6 +32,9 @@
         word-break: break-all;
         transition: all 150ms ease-in-out;
 
+        // create shadow on the right side
+        box-shadow   : 0 0 5px 4px rgba(0, 0, 0, 0.1) !important;
+
         &.hided {
             width: 0;
             min-width: 0;
diff --git a/packages/app/src/theme/index.less b/packages/app/src/theme/index.less
index 5ac93342..ea77b4d8 100644
--- a/packages/app/src/theme/index.less
+++ b/packages/app/src/theme/index.less
@@ -74,7 +74,7 @@ body {
 	width: 100%;
 	height: 100%;
 
-	background-color: var(--background-color-primary) !important;
+	background-color: var(--layoutBackgroundColor) !important;
 }
 
 #nprogress {
@@ -89,10 +89,17 @@ body {
 }
 
 .ant-layout,
-.content_layout,
+.content_layout {
+	width: 100%;
+	height: 100%;
+	max-height: 100vh;
+
+	background-color: transparent;
+}
+
 .app_layout {
-	background: var(--background-color-primary) !important;
-	background-color: var(--background-color-primary) !important;
+	background-color: rgba(var(--layoutBackgroundColor), var(--backgroundColorTransparency)) !important;
+	backdrop-filter: blur(var(--backgroundBlur));
 
 	position: relative;
 	-webkit-overflow-scrolling: touch;
@@ -126,6 +133,23 @@ body {
 	}
 }
 
+.backgroundDecorator {
+	background-image: var(--backgroundImage);
+	background-size: cover;
+	background-position: center;
+	background-repeat: no-repeat;
+	background-attachment: fixed;
+
+	position: absolute;
+	top: 0;
+	left: 0;
+
+	width: 100vw;
+	height: 100vh;
+
+	transition: all 150ms ease-in-out;
+}
+
 .layout_page {
 	position: relative;
 	-webkit-overflow-scrolling: touch;