diff --git a/src/App.css b/src/App.css
index 4ef874266..58401a036 100644
--- a/src/App.css
+++ b/src/App.css
@@ -21,10 +21,11 @@
   padding-left: .5rem !important;
 }
 .navbar {
-  padding: 0 3rem !important;
+  padding: 0 1rem !important;
   line-height: 2 !important;
   height: 4.8%;
   font-size: 77%;
+  background-color: rgba(0, 0, 0, 0.856) !important;
 }
 
 @media only screen and (max-width: 992px) {
diff --git a/src/components/Navbar.js b/src/components/Navbar.js
index cb712d1c5..bf638b895 100644
--- a/src/components/Navbar.js
+++ b/src/components/Navbar.js
@@ -40,65 +40,64 @@ export class Navbar extends Component {
     return (
       <div>
         <Notification options={{ zIndex: 10000, top: '200px' }} />
-        <nav className="navbar navbar-expand-lg fixed-top navbar-light bg-light nav">
+        <nav className="navbar navbar-expand-lg navbar-light bg-dark">
           <strong>
             <a className="navbar-brand" href="/">
               OCL for OpenMRS
             </a>
           </strong>
-          {this.props.loggedIn && (
-          <GeneralSearch
-            onSearch={this.onSearch}
-            onSubmit={this.onSubmit}
-            searchValue={searchInput}
-          />
+          <button
+            className="navbar-toggler"
+            type="button"
+            data-toggle="collapse"
+            data-target="#navbarA"
+            aria-controls="navbarNavDropdown"
+            aria-expanded="false"
+            aria-label="Toggle navigation"
+          >
+            <span className="navbar-toggler-icon" />
+          </button>
+          <div className="collapse navbar-collapse " id="navbarA">
+            {this.props.loggedIn && (
+            <GeneralSearch
+              onSearch={this.onSearch}
+              onSubmit={this.onSubmit}
+              searchValue={searchInput}
+            />
           )}
-          <div className="collapse navbar-collapse " id="navbarNav">
             {this.props.loggedIn && (
               <ul className="navbar-nav ml-auto" id="navList">
-                <div className="navBarItems">
-                  <li className="nav-item nav-link dropdown" id="navbarDropdown">
-                    <a
-                      className="nav-link text-white"
-                      href="/dashboard/dictionaries"
-                      id="navbarDropdown"
-                      role="button"
-                      aria-haspopup="true"
-                      aria-expanded="false"
-                    >
-                      <strong>
-                        Dictionaries
-                      </strong>
-                    </a>
-                  </li>
-                  <li className="nav-item nav-link dropdown" id="navbarItemSource">
-                    <a
-                      className="nav-link text-white"
-                      href="/dashboard/sources"
-                      role="button"
-                      aria-haspopup="true"
-                      aria-expanded="false"
-                    >
-                      <strong>
-                        Sources
-                      </strong>
-                    </a>
-                  </li>
-                  <li className="nav-item nav-link dropdown" id="navbarDropdown">
-                    <a
-                      className="nav-link text-white"
-                      href="/dashboard/concepts"
-                      role="button"
-                      aria-haspopup="true"
-                      aria-expanded="false"
-                    >
-                      <strong>
-                      Concepts
-                      </strong>
-                    </a>
-                  </li>
-                </div>
-                <li className="nav-item nav-link dropdown" id="navbarUser">
+                <li className="nav-item nav-link" >
+                  <a
+                    className="nav-link text-white"
+                    href="/dashboard/dictionaries"
+                  >
+                    <strong>
+                      Dictionaries
+                    </strong>
+                  </a>
+                </li>
+                <li className="nav-item nav-link" >
+                  <a
+                    className="nav-link text-white"
+                    href="/dashboard/sources"
+                  >
+                    <strong>
+                      Sources
+                    </strong>
+                  </a>
+                </li>
+                <li className="nav-item nav-link">
+                  <a
+                    className="nav-link text-white"
+                    href="/dashboard/concepts"
+                  >
+                    <strong>
+                    Concepts
+                    </strong>
+                  </a>
+                </li>
+                <li className="nav-item nav-link dropdown">
                   <a
                     className="nav-link dropdown-toggle text-white"
                     href="!#"
diff --git a/src/components/dashboard/styles/index.css b/src/components/dashboard/styles/index.css
index 430627293..ca630ed43 100644
--- a/src/components/dashboard/styles/index.css
+++ b/src/components/dashboard/styles/index.css
@@ -459,8 +459,9 @@ nav {
 }
 
 #generalSearchForm{
-  width: 39%;
-  padding-left: 5%;
+  width: 62%;
+  padding-left: 14%;
+  margin-left: -16%;
 }
 
 #navbarDropdown{
@@ -471,13 +472,10 @@ nav {
 .navBarItems{
   display: flex;
 }
-#navList{
-  margin-right: -13%;
-  width: 100%;
-}
 
-#navbarUser{
-  margin-left: 31%;
+
+#navbarA{
+  padding-left: 9%;
 }
 #navbarItemSource{
   margin-left: 5%;