diff --git a/src/core/components/layouts/base.jsx b/src/core/components/layouts/base.jsx
index 3e6c7139..f90dd848 100644
--- a/src/core/components/layouts/base.jsx
+++ b/src/core/components/layouts/base.jsx
@@ -13,8 +13,13 @@ export default class BaseLayout extends React.Component {
     getComponent: PropTypes.func.isRequired
   }
 
+  onFilterChange =(e) => {
+    let {target: {value}} = e
+    this.props.layoutActions.updateFilter(value)
+  }
+
   render() {
-    let { specSelectors, specActions, getComponent } = this.props
+    let { specSelectors, specActions, getComponent, layoutSelectors } = this.props
 
     let info = specSelectors.info()
     let url = specSelectors.url()
@@ -31,6 +36,15 @@ export default class BaseLayout extends React.Component {
     let Row = getComponent("Row")
     let Col = getComponent("Col")
     let Errors = getComponent("errors", true)
+
+    let isLoading = specSelectors.loadingStatus() === "loading"
+    let isFailed = specSelectors.loadingStatus() === "failed"
+    let filter = layoutSelectors.currentFilter()
+
+    let inputStyle = {}
+    if(isFailed) inputStyle.color = "red"
+    if(isLoading) inputStyle.color = "#aaa"
+
     const Schemes = getComponent("schemes")
 
     const isSpecEmpty = !specSelectors.specStr()
@@ -57,6 +71,7 @@ export default class BaseLayout extends React.Component {
                   { schemes && schemes.size ? (
                     <Schemes schemes={ schemes } specActions={ specActions } />
                   ) : null }
+
                   { securityDefinitions ? (
                     <AuthorizeBtn />
                   ) : null }
@@ -64,6 +79,15 @@ export default class BaseLayout extends React.Component {
               </div>
             ) : null }
 
+            {
+              filter === null || filter === false ? null :
+                <div className="filter-container">
+                  <Col className="filter wrapper" mobile={12}>
+                    <input className="operation-filter-input" placeholder="Filter Operations" type="text" onChange={this.onFilterChange} value={filter === true ? "" : filter} disabled={isLoading} style={inputStyle} />
+                  </Col>
+                </div>
+            }
+
             <Row>
               <Col mobile={12} desktop={12} >
                 <Operations/>
diff --git a/src/plugins/topbar/topbar.jsx b/src/plugins/topbar/topbar.jsx
index 314e1d4e..c764e54f 100644
--- a/src/plugins/topbar/topbar.jsx
+++ b/src/plugins/topbar/topbar.jsx
@@ -135,10 +135,6 @@ export default class Topbar extends React.Component {
               <img height="30" width="30" src={ Logo } alt="Swagger UX"/>
               <span>swagger</span>
             </Link>
-            {
-              filter === null || filter === false ? null :
-                <input className="operation-filter-input" placeholder="filter..." type="text" onChange={this.onFilterChange} value={filter === true ? "" : filter} disabled={isLoading} style={inputStyle} />
-            }
             <form className="download-url-wrapper" onSubmit={formOnSubmit}>
               {control}
             </form>
diff --git a/src/style/_layout.scss b/src/style/_layout.scss
index 78e09249..61efe855 100644
--- a/src/style/_layout.scss
+++ b/src/style/_layout.scss
@@ -327,6 +327,18 @@ body
     }
 }
 
+.filter
+{
+    .operation-filter-input
+    {
+        width: 100%;
+        margin: 20px 0;
+        padding: 10px 10px;
+
+        border: 2px solid #d8dde7;
+    }
+}
+
 
 .tab
 {