diff --git a/theme/assets/css/src/material-components.css b/theme/assets/css/src/material-components.css
index 3c18a22c..71b7e8dd 100644
--- a/theme/assets/css/src/material-components.css
+++ b/theme/assets/css/src/material-components.css
@@ -17,13 +17,13 @@
 @import "@material/icon-button/dist/mdc.icon-button.css";
 @import "@material/checkbox/dist/mdc.checkbox.css";
 @import "@material/layout-grid/dist/mdc.layout-grid.css";
-@import "@material/ripple/dist/mdc.ripple.css";
 @import "@material/tab-bar/dist/mdc.tab-bar.css";
 @import "@material/tab-scroller/dist/mdc.tab-scroller.css";
 @import "@material/tab/dist/mdc.tab.css";
 @import "./components/material.css";
 @import "./material/drawer.css";
 @import "./material/top-app-bar.css";
+@import "./material/ripple.css";
 
 /**
   Todo: Add style from plugin for material card and image card.
diff --git a/theme/assets/css/src/material/ripple.css b/theme/assets/css/src/material/ripple.css
new file mode 100644
index 00000000..3f591094
--- /dev/null
+++ b/theme/assets/css/src/material/ripple.css
@@ -0,0 +1,282 @@
+/*
+ *  Copyright 2022 Google LLC
+ *
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *   Unless required by applicable law or agreed to in writing, software
+ *   distributed under the License is distributed on an "AS IS" BASIS,
+ *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+@-webkit-keyframes mdc-ripple-fg-radius-in {
+
+	from {
+		-webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+		animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+		-webkit-transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);
+		transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);
+	}
+
+	to {
+		-webkit-transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
+		transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
+	}
+}
+
+@keyframes mdc-ripple-fg-radius-in {
+
+	from {
+		-webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+		animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+		-webkit-transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);
+		transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);
+	}
+
+	to {
+		-webkit-transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
+		transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
+	}
+}
+
+@-webkit-keyframes mdc-ripple-fg-opacity-in {
+
+	from {
+		-webkit-animation-timing-function: linear;
+		animation-timing-function: linear;
+		opacity: 0;
+	}
+
+	to {
+		opacity: var(--mdc-ripple-fg-opacity, 0);
+	}
+}
+
+@keyframes mdc-ripple-fg-opacity-in {
+
+	from {
+		-webkit-animation-timing-function: linear;
+		animation-timing-function: linear;
+		opacity: 0;
+	}
+
+	to {
+		opacity: var(--mdc-ripple-fg-opacity, 0);
+	}
+}
+
+@-webkit-keyframes mdc-ripple-fg-opacity-out {
+
+	from {
+		-webkit-animation-timing-function: linear;
+		animation-timing-function: linear;
+		opacity: var(--mdc-ripple-fg-opacity, 0);
+	}
+
+	to {
+		opacity: 0;
+	}
+}
+
+@keyframes mdc-ripple-fg-opacity-out {
+
+	from {
+		-webkit-animation-timing-function: linear;
+		animation-timing-function: linear;
+		opacity: var(--mdc-ripple-fg-opacity, 0);
+	}
+
+	to {
+		opacity: 0;
+	}
+}
+
+.mdc-ripple-surface {
+	--mdc-ripple-fg-size: 0;
+	--mdc-ripple-left: 0;
+	--mdc-ripple-top: 0;
+	--mdc-ripple-fg-scale: 1;
+	--mdc-ripple-fg-translate-end: 0;
+	--mdc-ripple-fg-translate-start: 0;
+	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+	position: relative;
+	outline: none;
+	overflow: hidden;
+}
+
+.mdc-ripple-surface::before,
+.mdc-ripple-surface::after {
+	position: absolute;
+	border-radius: 50%;
+	opacity: 0;
+	pointer-events: none;
+	content: "";
+}
+
+.mdc-ripple-surface::before {
+	transition: opacity 15ms linear, background-color 15ms linear;
+	z-index: 1;
+}
+
+.mdc-ripple-surface.mdc-ripple-upgraded::before {
+	-webkit-transform: scale(var(--mdc-ripple-fg-scale, 1));
+	transform: scale(var(--mdc-ripple-fg-scale, 1));
+}
+
+.mdc-ripple-surface.mdc-ripple-upgraded::after {
+	top: 0;
+
+	/* @noflip */
+	left: 0;
+	-webkit-transform: scale(0);
+	transform: scale(0);
+	-webkit-transform-origin: center center;
+	transform-origin: center center;
+}
+
+.mdc-ripple-surface.mdc-ripple-upgraded--unbounded::after {
+	top: var(--mdc-ripple-top, 0);
+
+	/* @noflip */
+	left: var(--mdc-ripple-left, 0);
+}
+
+.mdc-ripple-surface.mdc-ripple-upgraded--foreground-activation::after {
+	-webkit-animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards;
+	animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards;
+}
+
+.mdc-ripple-surface.mdc-ripple-upgraded--foreground-deactivation::after {
+	-webkit-animation: mdc-ripple-fg-opacity-out 150ms;
+	animation: mdc-ripple-fg-opacity-out 150ms;
+	-webkit-transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
+	transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
+}
+
+.mdc-ripple-surface::before,
+.mdc-ripple-surface::after {
+	background-color: #000;
+}
+
+.mdc-ripple-surface:hover::before {
+	opacity: 0.04;
+}
+
+.mdc-ripple-surface.mdc-ripple-upgraded--background-focused::before,
+.mdc-ripple-surface:not(.mdc-ripple-upgraded):focus::before {
+	transition-duration: 75ms;
+	opacity: 0.12;
+}
+
+.mdc-ripple-surface:not(.mdc-ripple-upgraded)::after {
+	transition: opacity 150ms linear;
+}
+
+.mdc-ripple-surface:not(.mdc-ripple-upgraded):active::after {
+	transition-duration: 75ms;
+	opacity: 0.12;
+}
+
+.mdc-ripple-surface.mdc-ripple-upgraded {
+	--mdc-ripple-fg-opacity: 0.12;
+}
+
+.mdc-ripple-surface::before,
+.mdc-ripple-surface::after {
+	top: calc(50% - 100%);
+
+	/* @noflip */
+	left: calc(50% - 100%);
+	width: 200%;
+	height: 200%;
+}
+
+.mdc-ripple-surface.mdc-ripple-upgraded::after {
+	width: var(--mdc-ripple-fg-size, 100%);
+	height: var(--mdc-ripple-fg-size, 100%);
+}
+
+.mdc-ripple-surface[data-mdc-ripple-is-unbounded] {
+	overflow: visible;
+}
+
+.mdc-ripple-surface[data-mdc-ripple-is-unbounded]::before,
+.mdc-ripple-surface[data-mdc-ripple-is-unbounded]::after {
+	top: calc(50% - 50%);
+	left: calc(50% - 50%);
+	width: 100%;
+	height: 100%;
+}
+
+.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::before,
+.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::after {
+	top: var(--mdc-ripple-top, calc(50% - 50%));
+	left: var(--mdc-ripple-left, calc(50% - 50%));
+	width: var(--mdc-ripple-fg-size, 100%);
+	height: var(--mdc-ripple-fg-size, 100%);
+}
+
+.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::after {
+	width: var(--mdc-ripple-fg-size, 100%);
+	height: var(--mdc-ripple-fg-size, 100%);
+}
+
+.mdc-ripple-surface--primary::before,
+.mdc-ripple-surface--primary::after {
+	background-color: var(--md-sys-color-primary, #6200ee);
+}
+
+.mdc-ripple-surface--primary:hover::before {
+	opacity: 0.04;
+}
+
+.mdc-ripple-surface--primary.mdc-ripple-upgraded--background-focused::before,
+.mdc-ripple-surface--primary:not(.mdc-ripple-upgraded):focus::before {
+	transition-duration: 75ms;
+	opacity: 0.12;
+}
+
+.mdc-ripple-surface--primary:not(.mdc-ripple-upgraded)::after {
+	transition: opacity 150ms linear;
+}
+
+.mdc-ripple-surface--primary:not(.mdc-ripple-upgraded):active::after {
+	transition-duration: 75ms;
+	opacity: 0.12;
+}
+
+.mdc-ripple-surface--primary.mdc-ripple-upgraded {
+	--mdc-ripple-fg-opacity: 0.12;
+}
+
+.mdc-ripple-surface--accent::before,
+.mdc-ripple-surface--accent::after {
+	background-color: var(--md-sys-color-secondary, #018786);
+}
+
+.mdc-ripple-surface--accent:hover::before {
+	opacity: 0.04;
+}
+
+.mdc-ripple-surface--accent.mdc-ripple-upgraded--background-focused::before,
+.mdc-ripple-surface--accent:not(.mdc-ripple-upgraded):focus::before {
+	transition-duration: 75ms;
+	opacity: 0.12;
+}
+
+.mdc-ripple-surface--accent:not(.mdc-ripple-upgraded)::after {
+	transition: opacity 150ms linear;
+}
+
+.mdc-ripple-surface--accent:not(.mdc-ripple-upgraded):active::after {
+	transition-duration: 75ms;
+	opacity: 0.12;
+}
+
+.mdc-ripple-surface--accent.mdc-ripple-upgraded {
+	--mdc-ripple-fg-opacity: 0.12;
+}