diff --git a/package.json b/package.json
index e3c51d3..5fbcb00 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@tesseract-design/react-common": "^0.3.0",
+		"@theoryofnekomata/viewfinder": "0.2.4",
     "next": "10.1.3",
     "react": "17.0.2",
     "react-dom": "17.0.2",
diff --git a/src/components/templates/BasicLayout/index.tsx b/src/components/templates/BasicLayout/index.tsx
index 1f667e9..aa7048f 100644
--- a/src/components/templates/BasicLayout/index.tsx
+++ b/src/components/templates/BasicLayout/index.tsx
@@ -1,10 +1,35 @@
 import * as React from 'react'
+import styled from 'styled-components'
 import * as T from '@tesseract-design/react-common'
-import { Basic } from '@tesseract-design/viewfinder'
+import { Basic } from '@theoryofnekomata/viewfinder'
 import Link from '../../molecules/Link'
 import DummyContent from '../../molecules/DummyContent'
 import Brand from '../../molecules/Brand'
 
+const TopBarComponent = styled('div')({
+	backgroundColor: 'var(--color-bg, white)',
+	'::before': {
+		content: "''",
+		width: '100%',
+		height: '100%',
+		position: 'absolute',
+		top: 0,
+		left: 0,
+		pointerEvents: 'none',
+	},
+	'::after': {
+		backgroundColor: 'black',
+		opacity: 0.5,
+		content: "''",
+		width: '100%',
+		height: '100%',
+		position: 'absolute',
+		top: 0,
+		left: 0,
+		pointerEvents: 'none',
+	},
+})
+
 type Props = {
 	query: string,
 	userLinkLabel: string,
@@ -26,6 +51,7 @@ const BasicLayoutTemplate: React.FC<Props> = ({
 }) => {
 	return (
 		<Basic.Layout
+			topBarComponent={TopBarComponent}
 			brand={
 				<Brand />
 			}
diff --git a/src/components/templates/Index/index.tsx b/src/components/templates/Index/index.tsx
index 2bda991..a877ab3 100644
--- a/src/components/templates/Index/index.tsx
+++ b/src/components/templates/Index/index.tsx
@@ -1,10 +1,34 @@
 import * as React from 'react'
 import styled from 'styled-components'
 import * as T from '@tesseract-design/react-common'
-import { Basic } from '@tesseract-design/viewfinder'
+import { Basic } from '@theoryofnekomata/viewfinder'
 import Link from '../../molecules/Link'
 import Brand from '../../molecules/Brand'
 
+const TopBarComponent = styled('div')({
+	backgroundColor: 'var(--color-bg, white)',
+	'::before': {
+		content: "''",
+		width: '100%',
+		height: '100%',
+		position: 'absolute',
+		top: 0,
+		left: 0,
+		pointerEvents: 'none',
+	},
+	'::after': {
+		backgroundColor: 'black',
+		opacity: 0.5,
+		content: "''",
+		width: '100%',
+		height: '100%',
+		position: 'absolute',
+		top: 0,
+		left: 0,
+		pointerEvents: 'none',
+	},
+})
+
 const LinkContainer = styled('nav')({
 	margin: '1rem 0',
 	display: 'grid',
@@ -85,6 +109,7 @@ const IndexTemplate: React.FC<Props> = ({
 			brand={
 				<Brand />
 			}
+			topBarComponent={TopBarComponent}
 			topBarCenter={
 				<form>
 					<T.TextInput
diff --git a/src/components/templates/LeftSidebarLayout/index.tsx b/src/components/templates/LeftSidebarLayout/index.tsx
index c5df405..0f8c226 100644
--- a/src/components/templates/LeftSidebarLayout/index.tsx
+++ b/src/components/templates/LeftSidebarLayout/index.tsx
@@ -1,10 +1,51 @@
 import * as React from 'react'
+import styled from 'styled-components'
 import * as T from '@tesseract-design/react-common'
-import { LeftSidebar } from '@tesseract-design/viewfinder'
+import { LeftSidebar } from '@theoryofnekomata/viewfinder'
 import DummyContent from '../../molecules/DummyContent'
 import Link from '../../molecules/Link'
 import Brand from '../../molecules/Brand'
 
+const TopBarComponent = styled('div')({
+	backgroundColor: 'var(--color-bg, white)',
+	'::before': {
+		content: "''",
+		width: '100%',
+		height: '100%',
+		position: 'absolute',
+		top: 0,
+		left: 0,
+		pointerEvents: 'none',
+	},
+	'::after': {
+		backgroundColor: 'black',
+		opacity: 0.5,
+		content: "''",
+		width: '100%',
+		height: '100%',
+		position: 'absolute',
+		top: 0,
+		left: 0,
+		pointerEvents: 'none',
+	},
+})
+
+const SidebarMainComponent = styled('div')({
+	backgroundColor: 'var(--color-bg, white)',
+	zIndex: 2,
+	'::after': {
+		backgroundColor: 'black',
+		opacity: 0.25,
+		content: "''",
+		width: '100%',
+		height: '100%',
+		position: 'absolute',
+		top: 0,
+		left: 0,
+		pointerEvents: 'none',
+	},
+})
+
 type Props = {
 	query: string,
 	menuLinkLabel: string,
@@ -37,6 +78,8 @@ const LeftSidebarLayoutTemplate: React.FC<Props> = ({
 			brand={
 				<Brand />
 			}
+			topBarComponent={TopBarComponent}
+			sidebarMainComponent={SidebarMainComponent}
 			sidebarMainOpen={subpage === sidebarSubpageQueryValue}
 			topBarCenter={
 				<form>
@@ -79,9 +122,9 @@ const LeftSidebarLayoutTemplate: React.FC<Props> = ({
 				</Link>
 			}
 			sidebarMain={
-				<LeftSidebar.SidebarContainer>
+				<LeftSidebar.SidebarMainContainer>
 					<DummyContent />
-				</LeftSidebar.SidebarContainer>
+				</LeftSidebar.SidebarMainContainer>
 			}
 		>
 			<LeftSidebar.ContentContainer>
diff --git a/src/components/templates/LeftSidebarWithMenuLayout/index.tsx b/src/components/templates/LeftSidebarWithMenuLayout/index.tsx
index ffa8ab3..a4bb757 100644
--- a/src/components/templates/LeftSidebarWithMenuLayout/index.tsx
+++ b/src/components/templates/LeftSidebarWithMenuLayout/index.tsx
@@ -1,10 +1,66 @@
 import * as React from 'react'
+import styled from 'styled-components'
 import * as T from '@tesseract-design/react-common'
-import { LeftSidebarWithMenu } from '@tesseract-design/viewfinder'
+import { LeftSidebarWithMenu } from '@theoryofnekomata/viewfinder'
 import DummyContent from '../../molecules/DummyContent'
 import Link from '../../molecules/Link'
 import Brand from '../../molecules/Brand'
 
+const TopBarComponent = styled('div')({
+	backgroundColor: 'var(--color-bg, white)',
+	'::before': {
+		content: "''",
+		width: '100%',
+		height: '100%',
+		position: 'absolute',
+		top: 0,
+		left: 0,
+		pointerEvents: 'none',
+	},
+	'::after': {
+		backgroundColor: 'black',
+		opacity: 0.5,
+		content: "''",
+		width: '100%',
+		height: '100%',
+		position: 'absolute',
+		top: 0,
+		left: 0,
+		pointerEvents: 'none',
+	},
+})
+
+const SidebarMainComponent = styled('div')({
+	backgroundColor: 'var(--color-bg, white)',
+	zIndex: 2,
+	'::after': {
+		backgroundColor: 'black',
+		opacity: 0.25,
+		content: "''",
+		width: '100%',
+		height: '100%',
+		position: 'absolute',
+		top: 0,
+		left: 0,
+		pointerEvents: 'none',
+	},
+})
+
+const SidebarMenuComponent = styled('div')({
+	backgroundColor: 'var(--color-bg, white)',
+	'::after': {
+		backgroundColor: 'black',
+		opacity: 0.4,
+		content: "''",
+		width: '100%',
+		height: '100%',
+		position: 'absolute',
+		top: 0,
+		left: 0,
+		pointerEvents: 'none',
+	},
+})
+
 type Props = {
 	query: string,
 	menuLinkLabel: string,
@@ -43,6 +99,9 @@ const LeftSidebarLayoutTemplate: React.FC<Props> = ({
 			brand={
 				<Brand />
 			}
+			sidebarMainComponent={SidebarMainComponent}
+			sidebarMenuComponent={SidebarMenuComponent}
+			topBarComponent={TopBarComponent}
 			topBarCenter={
 				<form>
 					<T.TextInput
diff --git a/src/components/templates/RightSidebarLayout/index.tsx b/src/components/templates/RightSidebarLayout/index.tsx
index 3fd36fb..da8df77 100644
--- a/src/components/templates/RightSidebarLayout/index.tsx
+++ b/src/components/templates/RightSidebarLayout/index.tsx
@@ -1,10 +1,40 @@
 import * as React from 'react'
+import styled from 'styled-components'
 import * as T from '@tesseract-design/react-common'
-import { RightSidebarStatic } from '@tesseract-design/viewfinder'
+import { RightSidebarStatic } from '@theoryofnekomata/viewfinder'
 import DummyContent from '../../molecules/DummyContent'
 import Link from '../../molecules/Link'
 import Brand from '../../molecules/Brand'
 
+const TopBarComponent = styled('div')({
+	backgroundColor: 'var(--color-bg, white)',
+	'::before': {
+		content: "''",
+		width: '100%',
+		height: '100%',
+		position: 'absolute',
+		top: 0,
+		left: 0,
+		pointerEvents: 'none',
+	},
+	'::after': {
+		backgroundColor: 'black',
+		opacity: 0.5,
+		content: "''",
+		width: '100%',
+		height: '100%',
+		position: 'absolute',
+		top: 0,
+		left: 0,
+		pointerEvents: 'none',
+	},
+})
+
+const SidebarMainComponent = styled('div')({
+	backgroundColor: 'var(--color-bg, white)',
+	zIndex: 2,
+})
+
 type Props = {
 	query: string,
 	userLinkLabel: string,
@@ -29,6 +59,8 @@ const RightSidebarLayoutTemplate: React.FC<Props> = ({
 			brand={
 				<Brand />
 			}
+			topBarComponent={TopBarComponent}
+			sidebarMainComponent={SidebarMainComponent}
 			topBarCenter={
 				<form>
 					<T.TextInput
@@ -56,9 +88,9 @@ const RightSidebarLayoutTemplate: React.FC<Props> = ({
 				</Link>
 			}
 			sidebarMain={
-				<RightSidebarStatic.SidebarContainer>
+				<RightSidebarStatic.SidebarMainContainer>
 					<DummyContent />
-				</RightSidebarStatic.SidebarContainer>
+				</RightSidebarStatic.SidebarMainContainer>
 			}
 		>
 			<RightSidebarStatic.ContentContainer>
diff --git a/yarn.lock b/yarn.lock
index 35ddd2b..b384d5f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -250,6 +250,11 @@
     pascal-case "3.1.1"
     react-feather "2.0.3"
 
+"@theoryofnekomata/viewfinder@0.2.4":
+  version "0.2.4"
+  resolved "https://js.pack.modal.sh/@theoryofnekomata%2fviewfinder/-/viewfinder-0.2.4.tgz#771ec79029ae60b4a355de44709842818ac0fb9c"
+  integrity sha512-XeIxmeh3XTnLF5HlQYMY3bEKVyAWS3Ulg4JCbEJMpjgzH+++JNn4hm0Bc7gZYzlJRFOmPaV0uK8BbpoYQcz+tQ==
+
 "@types/hast@^2.0.0":
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/@types/hast/-/hast-2.3.1.tgz#b16872f2a6144c7025f296fb9636a667ebb79cd9"