diff --git a/css/component.css b/css/component.css
index e67bf6b..7caaf06 100755
--- a/css/component.css
+++ b/css/component.css
@@ -2598,6 +2598,120 @@
 /* (Please copy these two lines and insert after your custom styles) */
 
 
+/* Mercutio (by @bm12) */
+
+.menu--mercutio .menu__item{
+    position: relative;
+    margin: 1em;
+}
+
+.menu--mercutio .menu__item:before,
+.menu--mercutio .menu__item:after,
+.menu--mercutio .menu__link:before,
+.menu--mercutio .menu__link:after{
+	content: '';
+	position: absolute;
+	background: #b5b5b5;
+	-webkit-transition: all 0.45s cubic-bezier(0.68, 0.37, 0.1, 1.24);
+	transition: all 0.45s cubic-bezier(0.68, 0.37, 0.1, 1.24);
+}
+
+/* top line */
+.menu--mercutio .menu__item:before{
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 2px;
+	-webkit-transform: scale3d(0, 1, 1);
+	transform: scale3d(0, 1, 1);
+	-webkit-transform-origin: 0 50%;
+	transform-origin: 0 50%;
+}
+
+/* left line */
+.menu--mercutio .menu__item:after{
+	top: 0;
+	left: 0;
+	height: 100%;
+	width: 2px;
+	-webkit-transform: scale3d(1, 0, 1);
+	transform: scale3d(1, 0, 1);
+	-webkit-transform-origin: 0% 0%;
+	transform-origin: 0% 0%;
+	-webkit-transition-duration: 0.3s;
+	transition-duration: 0.3s;
+	-webkit-transition-timing-function: ease-out;
+	transition-timing-function: ease-out;
+}
+
+/* right line */
+.menu--mercutio .menu__link:before{
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 2px;
+}
+
+/* bottom line  */
+.menu--mercutio .menu__link:after{
+	top: 0;
+	left: 0;
+	height: 100%;
+	width: 2px;
+}
+
+.menu--mercutio .menu__link:before,
+.menu--mercutio .menu__link:after{
+	opacity: 0;
+	background: #d94f5c;
+}
+
+.menu--mercutio .menu__item:hover:before,
+.menu--mercutio .menu__item--current:before{
+	-webkit-transform: scale3d(1, 1, 1);
+	transform: scale3d(1, 1, 1);
+}
+
+.menu--mercutio .menu__item--current:after{
+	-webkit-transform: scale3d(1, 1, 1);
+	transform: scale3d(1, 1, 1);
+}
+
+.menu--mercutio .menu__item--current:before,
+.menu--mercutio .menu__item--current:after{
+	background: #d94f5c;
+}
+
+.menu--mercutio .menu__item--current .menu__link:before,
+.menu--mercutio .menu__item--current .menu__link:after{
+	opacity: 1;
+}
+
+.menu--mercutio .menu__item--current .menu__link:before{
+	top: 100%;
+	left: 0;
+	-webkit-transform: translate3d(0, -2px, 0);
+	transform: translate3d(0, -2px, 0);
+}
+
+.menu--mercutio .menu__item--current .menu__link:after{
+	left: 100%;
+	top: 0;
+	-webkit-transform: translate3d(-2px, 0, 0);
+	transform: translate3d(-2px, 0, 0);
+}
+
+.menu--mercutio .menu__item--current .menu__link,
+.menu--mercutio .menu__link:hover{
+	color: #d94f5c;
+}
+
+/* End: Mercutio Styles */
+
+/* YOUR STYLE (Shakespeare character name) see README.md for details */
+/* (Please copy these two lines and insert after your custom styles) */
+
+
 /* Name (by @you) */
 
 /* [Your styles here]*/
diff --git a/index.html b/index.html
index a92377e..b86d00b 100755
--- a/index.html
+++ b/index.html
@@ -416,6 +416,20 @@ <h2 class="section__title">tantalid</h2>
 				</nav>
 				<p class="info">Style created by <a href="https://ua.linkedin.com/in/andrii-polishchuk-4177904a">tantalid</a></p>
 			</section>
+			<section class="section section--menu" id="mercutio">
+				<h2 class="section__title">Mercutio</h2>
+				<span class="link-copy"></span>
+				<nav class="menu menu--mercutio">
+					<ul class="menu__list">
+						<li class="menu__item menu__item--current"><a href="#" class="menu__link">Home</a></li>
+						<li class="menu__item"><a href="#" class="menu__link">Gallery</a></li>
+						<li class="menu__item"><a href="#" class="menu__link">Clients</a></li>
+						<li class="menu__item"><a href="#" class="menu__link">Shop</a></li>
+						<li class="menu__item"><a href="#" class="menu__link">Contact</a></li>
+					</ul>
+				</nav>
+				<p class="info">Style created by <a href="https://github.com/bm12">Babaev Mahmud</a></p>
+			</section>
 			<!-- Check out the README.md for details on how to contribute -->
 			<!-- copy this section -->
 			<section class="section section--menu" id="Yourstyle">