diff --git a/app/components/nav-bar.js b/app/components/nav-bar.js
index be195e96e5d..4d0f1c8f2b2 100644
--- a/app/components/nav-bar.js
+++ b/app/components/nav-bar.js
@@ -9,6 +9,24 @@ export default class NavBar extends Component {
     return !(String(this.session.currentRouteName).includes('public'));
   }
 
+  @computed('session.currentRouteName')
+  get isNotExplorePageRoute() {
+    return !(String(this.session.currentRouteName).includes('explore'));
+  }
+
+  @action
+  handleKeyPress() {
+    if (event.code === 'Enter') {
+      this.sendAction('search');
+      document.querySelector('#mobile-bar').classList.remove('show-bar');
+    }
+  }
+
+  @action
+  toggleSearchBar() {
+    document.querySelector('#mobile-bar').classList.toggle('show-bar');
+  }
+
   @action
   logout() {
     this.authManager.logout();
diff --git a/app/components/side-bar.js b/app/components/side-bar.js
index 7ab7710c0d3..346d1240f42 100644
--- a/app/components/side-bar.js
+++ b/app/components/side-bar.js
@@ -1,6 +1,7 @@
 import classic from 'ember-classic-decorator';
 import $ from 'jquery';
 import Component from '@ember/component';
+import { action } from '@ember/object';
 
 @classic
 export default class SideBar extends Component {
@@ -14,6 +15,14 @@ export default class SideBar extends Component {
     this.set('sidebarVisible', false);
   }
 
+  @action
+  handleKeyPress() {
+    if (event.code === 'Enter') {
+      this.set('sidebarVisible', false);
+      this.sendAction('search');
+    }
+  }
+
   didInsertElement() {
     super.didInsertElement(...arguments);
 
diff --git a/app/controllers/application.js b/app/controllers/application.js
index f91a71507fe..bb3d9c6d9a2 100644
--- a/app/controllers/application.js
+++ b/app/controllers/application.js
@@ -4,6 +4,7 @@ import { inject as service } from '@ember/service';
 import { filterBy } from '@ember/object/computed';
 import Controller from '@ember/controller';
 import moment from 'moment';
+import { tracked } from '@glimmer/tracking';
 
 
 @classic
@@ -17,6 +18,8 @@ export default class ApplicationController extends Controller {
   @service
   fastboot;
 
+  @tracked event_name = null;
+
   @filterBy('model.notifications', 'isRead', false)
   unreadNotifications;
 
@@ -47,4 +50,10 @@ export default class ApplicationController extends Controller {
     this.getCookieSeen(true);
     this.showCookie = false;
   }
+
+  @action
+  search() {
+    this.transitionToRoute('explore', { queryParams: { event_name: this.event_name } });
+    this.event_name = null;
+  }
 }
diff --git a/app/styles/libs/_helpers.scss b/app/styles/libs/_helpers.scss
index 53bb7adbfad..502bed7728c 100644
--- a/app/styles/libs/_helpers.scss
+++ b/app/styles/libs/_helpers.scss
@@ -84,7 +84,7 @@ $spacer-heights: 50 100 200 300 400 500 600 700 800 900;
 }
 
 .space-between {
-  justify-content: space-between;
+  justify-content: space-between !important;
 }
 
 .flex-1 {
diff --git a/app/styles/pages/events.scss b/app/styles/pages/events.scss
index 0ffe2c2dee3..c1c4c6a801e 100644
--- a/app/styles/pages/events.scss
+++ b/app/styles/pages/events.scss
@@ -13,3 +13,51 @@
     width: 100%;
   }
 }
+
+.search-bar {
+
+  background-color: #fafafa;
+  border-radius: .5rem;
+  color: #808080;
+
+
+  input[type='text'] {
+    background-color: #fafafa;
+    border: 0;
+    outline: 0;
+    transition: width .2s ease-in-out;
+    width: 140px;
+
+    &:focus {
+      width: 200px;
+    }
+
+  }
+
+  i {
+    margin-bottom: .5rem;
+  }
+
+  &-mobile {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-52%);
+    z-index: -1;
+    width: 20%;
+    transition: all .2s ease-in-out;
+
+    input[type='text'] {
+      width: 100%;
+
+      &:focus {
+        width: 100%;
+      }
+    }
+
+  }
+}
+
+.show-bar {
+  z-index: 1;
+  width: 80%;
+}
diff --git a/app/styles/partials/utils.scss b/app/styles/partials/utils.scss
index bd97ba889f0..99a3706e830 100644
--- a/app/styles/partials/utils.scss
+++ b/app/styles/partials/utils.scss
@@ -49,6 +49,10 @@
   padding: .25rem !important;
 }
 
+.p-2 {
+  padding: .5rem !important;
+}
+
 .pt-1 {
   padding-top: .25rem !important;
 }
diff --git a/app/templates/application.hbs b/app/templates/application.hbs
index 0d030b7488a..c5845a5e5a1 100644
--- a/app/templates/application.hbs
+++ b/app/templates/application.hbs
@@ -9,11 +9,12 @@
     {{/if}}
   </div>
 {{/if}}
-<SideBar>
+<SideBar @search={{action 'search'}} @event_name={{this.event_name}}>
   <div class="footer-pusher">
-    <NavBar />
+    <NavBar @search={{action 'search'}} @event_name={{this.event_name}}/>
+
     {{#if (eq this.routing.currentRouteName 'index')}}
-      <WelcomeHeader />
+      <WelcomeHeader @class={{'mb-4'}}/>
     {{/if}}
     <div id="main-container"
          class="ui fluid container main-container {{unless this.device.isInternetExplorer 'flexed-container' ''}}">
diff --git a/app/templates/components/nav-bar.hbs b/app/templates/components/nav-bar.hbs
index 9d2ae293e33..180ec679639 100644
--- a/app/templates/components/nav-bar.hbs
+++ b/app/templates/components/nav-bar.hbs
@@ -5,15 +5,16 @@
       <h3>{{this.settings.appName}}</h3>
     </LinkTo>
     <div class="right menu nav-bar">
+    {{#if (and this.isNotEventPageRoute this.isNotExplorePageRoute)}}
+      <div class="search-bar d-flex items-center space-between m-2 p-2">
+        <Input @class="prompt" @type="text" @key-up={{"handleKeyPress"}} @value={{this.event_name}} placeholder="Search Events" />
+        <i class="search icon"></i>
+      </div>
+    {{/if}}
     {{#if (and (not this.session.isAuthenticated) this.isNotEventPageRoute)}}
       <LinkTo
         @route="pricing" class="item"
         @activeClass="">{{t 'Pricing'}}</LinkTo>
-    {{/if}}
-    {{#if this.isNotEventPageRoute}}
-      <LinkTo
-        @route="explore" class="item"
-        @activeClass="">{{t 'Browse Events'}}</LinkTo>
     {{/if}}
       {{#if this.session.isAuthenticated}}
         <NotificationDropdown />
@@ -67,7 +68,19 @@
       @route="index" class="item" @activeClass="">
       <div class="ui header small text">{{this.settings.appName}}</div>
     </LinkTo>
+    <div id="mobile-bar" class="search-bar search-bar-mobile d-flex items-center space-between m-1 p-2">
+      <i class="search icon" style="cursor: auto;"></i>
+      <Input @class="prompt" @type="text" @key-up={{"handleKeyPress"}} @value={{this.event_name}} placeholder="Search Events" />
+      <div role="button" {{action "toggleSearchBar"}}>
+        <i class="close icon" ></i>
+      </div>
+    </div>
     <div class="right menu nav-bar">
+      {{#if (and this.isNotEventPageRoute this.isNotExplorePageRoute)}}
+        <div role="button" class="item ui" {{action "toggleSearchBar"}}>
+          <i class="search icon"></i>
+        </div>
+      {{/if}}
       {{#if this.session.isAuthenticated}}
         <NotificationDropdown
           @notifications={{this.notifications}} />
diff --git a/app/templates/components/side-bar.hbs b/app/templates/components/side-bar.hbs
index c1ee688e308..b4f892df603 100644
--- a/app/templates/components/side-bar.hbs
+++ b/app/templates/components/side-bar.hbs
@@ -1,7 +1,8 @@
 <div class="ui left inverted vertical menu sidebar {{if this.sidebarVisible 'visible'}}">
-  <LinkTo
-    @route="explore" class="item"
-    @activeClass="">{{t 'Browse Events'}}</LinkTo>
+    <div class="search-bar d-flex items-center space-between m-2 p-2">
+      <Input @class="prompt" @type="text" @key-up={{"handleKeyPress"}} @value={{this.event_name}} placeholder="Search Events" />
+      <i class="search icon"></i>
+    </div>
   {{#if this.session.isAuthenticated}}
     <div class="item">
       <a href="{{href-to 'account.profile'}}">
diff --git a/app/templates/index.hbs b/app/templates/index.hbs
index b7cc0ea2d4c..96c42b3a44c 100644
--- a/app/templates/index.hbs
+++ b/app/templates/index.hbs
@@ -1,15 +1,6 @@
 <div class="ui container">
-  <div class="ui input fluid">
-    <Input
-      @type="text"
-      @key-up={{action "handleKeyPress"}}
-      placeholder={{t "Search for events"}}
-      @value={{this.event_name}} />
-    <button class="ui blue button large" type="button" {{action 'search'}}>{{t 'Search'}}</button>
-  </div>
-
   {{#if this.featuredEvents}}
-    <h2 class="main-heading">{{t 'Featured Events'}}</h2>
+    <h2 class="main-heading mb-4">{{t 'Featured Events'}}</h2>
     <div class="ui stackable three column grid">
       {{#each this.featuredEvents as |event|}}
         <EventCard @event={{event}} @shareEvent={{action "shareEvent"}} />
@@ -17,7 +8,7 @@
     </div>
   {{/if}}
   {{#if this.filteredEvents}}
-    <h2 class="main-heading">{{t 'Upcoming Events'}}</h2>
+    <h2 class="main-heading mb-4">{{t 'Upcoming Events'}}</h2>
     <div class="ui stackable three column grid">
       {{#each this.promotedEvents as |event|}}
         <EventCard @event={{event}} @shareEvent={{action "shareEvent"}} />
@@ -27,10 +18,10 @@
       {{/each}}
     </div>
   {{else}}
-    <h2 class="main-heading">{{t 'No Upcoming Events Found'}}</h2>
+    <h2 class="main-heading mb-4">{{t 'No Upcoming Events Found'}}</h2>
   {{/if}}
   {{#if this.model.callForSpeakersEvents}}
-    <h2 class="main-heading">{{t 'Call for speakers'}}</h2>
+    <h2 class="main-heading mb-4">{{t 'Call for speakers'}}</h2>
     <div class="ui stackable three column grid">
       {{#each this.model.callForSpeakersEvents as |event|}}
         <EventCard @event={{event}} @isCFS={{true}} @shareEvent={{action "shareEvent"}} />
diff --git a/tests/integration/components/nav-bar-test.js b/tests/integration/components/nav-bar-test.js
index 7f1deaa872d..dea9bd3d528 100644
--- a/tests/integration/components/nav-bar-test.js
+++ b/tests/integration/components/nav-bar-test.js
@@ -8,6 +8,6 @@ module('Integration | Component | nav bar', function(hooks) {
 
   test('it renders', async function(assert) {
     await render(hbs`{{nav-bar}}`);
-    assert.ok(this.element.innerHTML.trim().includes('Browse Events'));
+    assert.ok(this.element.innerHTML.trim().includes('Search Events'));
   });
 });
diff --git a/tests/integration/components/side-bar-test.js b/tests/integration/components/side-bar-test.js
index 3d9653a89f1..aafdda7936e 100644
--- a/tests/integration/components/side-bar-test.js
+++ b/tests/integration/components/side-bar-test.js
@@ -16,6 +16,6 @@ module('Integration | Component | side bar', function(hooks) {
         <div class="main-container">Search text</div>
       {{/side-bar}}
     `);
-    assert.ok(this.element.textContent.trim().includes('Browse Events'));
+    assert.ok(this.element.textContent.trim().includes('Search text'));
   });
 });