diff --git a/_includes/css/main.css b/_includes/css/main.css
index b5797f22..e0fbba5e 100644
--- a/_includes/css/main.css
+++ b/_includes/css/main.css
@@ -65,7 +65,8 @@ a {
 }
 
 .navbar-nav .nav-link,
-footer a {
+footer a,
+.dropdown-item {
     color: #fff;
 }
 
@@ -92,12 +93,19 @@ a.active,
 #research a:hover h3,
 #news a:hover h3,
 .navbar-nav .nav-link:hover,
-.navbar-nav .nav-link:focus {
+.navbar-nav .nav-link:focus,
+.dropdown-item:hover,
+.dropdown-item:focus {
     color: #{{ site.color.accent }};
     text-decoration: none;
     transition: all ease .7s;
 }
 
+.dropdown-item:hover,
+.dropdown-item:focus {
+    background-color: transparent;
+}
+
 header img:hover,
 .navbar-nav .nav-link.active,
 .navbar-nav .nav-link.active:hover,
@@ -347,7 +355,8 @@ header .intro-text .owner {
     outline: 0;
 }
 
-.navbar {
+.navbar,
+.dropdown-menu {
     background-color: #{{ site.color.secondary }};
     border: 0;
     transition: all ease .3s;
@@ -360,8 +369,8 @@ header .intro-text .owner {
 }
 
 .navbar-brand {
-    min-width: 488px;
-    width: 488px;
+    min-width: 476px;
+    width: 476px;
     height: 128px;
     transition: all ease .3s;
     background: url("{{ site.logo3 }}") no-repeat;
@@ -375,10 +384,23 @@ header .intro-text .owner {
     background-image: url("{{ site.logo2 }}");
 }
 
+.dropdown-menu {
+    border-radius: 0px;
+    font-size: 16px;
+}
+
+.dropdown-item {
+    border-image-width: 0px;
+}
+
+.dropdown-divider {
+    margin: .5rem 1rem;
+}
+
 @media(max-width: 1430px) {
     .navbar-brand {
-        min-width: 366px;
-        width: 366px;
+        min-width: 364px;
+        width: 364px;
         height: 96px;
     }
 
diff --git a/_includes/header.html b/_includes/header.html
index a56e257f..28cda56e 100644
--- a/_includes/header.html
+++ b/_includes/header.html
@@ -36,7 +36,7 @@
                 </li>
                 {% endif %}
 
-                {% if page.type == "research" %}
+                <!-- {% if page.type == "research" %}
                 <li class="nav-item page-scroll">
                     <a class="nav-link" href="#research">research</a>
                 </li>
@@ -44,7 +44,18 @@
                 <li class="nav-item page-scroll">
                     <a class="nav-link" href="/research.html">research</a>
                 </li>
-                {% endif %}
+                {% endif %} -->
+
+                <li class="nav-item dropdown">
+                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">research</a>
+                    <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
+                        <a class="dropdown-item" href="/research.html">research</a>
+                        <div class="dropdown-divider"></div>
+                        <a class="dropdown-item" href="/subteam/algorithmic-social-hri.html">algorithmic and social hri</a>
+                        <a class="dropdown-item" href="/subteam/control-artificial-skin.html">control and artificial skin</a>
+                        <a class="dropdown-item" href="/subteam/learning-modeling-robotics">learning, modeling, and robotics</a>
+                    </div>
+                </li>
 
                 {% if page.type == "publications" %}
                 <li class="nav-item page-scroll">