diff --git a/.vscode/launch.json b/.vscode/launch.json
new file mode 100644
index 0000000..c1c2197
--- /dev/null
+++ b/.vscode/launch.json
@@ -0,0 +1,46 @@
+{
+   // Use IntelliSense to find out which attributes exist for C# debugging
+   // Use hover for the description of the existing attributes
+   // For further information visit https://github.com/OmniSharp/omnisharp-vscode/blob/master/debugger-launchjson.md
+   "version": "0.2.0",
+   "configurations": [
+        {
+            "name": ".NET Core Launch (web)",
+            "type": "coreclr",
+            "request": "launch",
+            "preLaunchTask": "build",
+            // If you have changed target frameworks, make sure to update the program path.
+            "program": "${workspaceFolder}/ServerlessLibraryAPI/bin/Debug/netcoreapp2.0/ServerlessLibraryAPI.dll",
+            "args": [],
+            "cwd": "${workspaceFolder}/ServerlessLibraryAPI",
+            "stopAtEntry": false,
+            "internalConsoleOptions": "openOnSessionStart",
+            "launchBrowser": {
+                "enabled": true,
+                "args": "${auto-detect-url}",
+                "windows": {
+                    "command": "cmd.exe",
+                    "args": "/C start ${auto-detect-url}"
+                },
+                "osx": {
+                    "command": "open"
+                },
+                "linux": {
+                    "command": "xdg-open"
+                }
+            },
+            "env": {
+                "ASPNETCORE_ENVIRONMENT": "Development"
+            },
+            "sourceFileMap": {
+                "/Views": "${workspaceFolder}/Views"
+            }
+        },
+        {
+            "name": ".NET Core Attach",
+            "type": "coreclr",
+            "request": "attach",
+            "processId": "${command:pickProcess}"
+        }
+    ,]
+}
\ No newline at end of file
diff --git a/.vscode/tasks.json b/.vscode/tasks.json
new file mode 100644
index 0000000..e1eb075
--- /dev/null
+++ b/.vscode/tasks.json
@@ -0,0 +1,15 @@
+{
+    "version": "2.0.0",
+    "tasks": [
+        {
+            "label": "build",
+            "command": "dotnet",
+            "type": "process",
+            "args": [
+                "build",
+                "${workspaceFolder}/ServerlessLibraryAPI/ServerlessLibraryAPI.csproj"
+            ],
+            "problemMatcher": "$msCompile"
+        }
+    ]
+}
\ No newline at end of file
diff --git a/ServerlessLibraryUI/src/App.vue b/ServerlessLibraryUI/src/App.vue
index 64ff134..a0d1947 100644
--- a/ServerlessLibraryUI/src/App.vue
+++ b/ServerlessLibraryUI/src/App.vue
@@ -1,51 +1,45 @@
 <template>
-  <div class="scootover">
-    <app-sidebar @updateFilters="updatedFilters = $event" :samples="samples" :filters="filters" />
+    <div>
+    <div class="headerbar">
 
-    <main id="mainContent" class="content">
-      <div data-grid="col-12" class="m-area-heading header"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
-          xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 -10 64 54" enable-background="new 0 -10 64 54"
-          xml:space="preserve" class="functionslogo">
-          <g>
-            <path fill="#3999C6" d="M63.6,32.4c0.6-0.6,0.5-1.7,0-2.3L60.5,27L46.7,13.6c-0.6-0.6-1.5-0.6-2.2,0l0,0c-0.6,0.6-0.8,1.7,0,2.3
-		L59,30.1c0.6,0.6,0.6,1.7,0,2.3L44.2,47.1c-0.6,0.6-0.6,1.7,0,2.3l0,0c0.6,0.6,1.7,0.5,2.2,0l13.7-13.6c0,0,0,0,0.1-0.1L63.6,32.4z
-		"></path>
-            <path fill="#3999C6" d="M0.4,32.4c-0.6-0.6-0.5-1.7,0-2.3L3.5,27l13.8-13.4c0.6-0.6,1.5-0.6,2.2,0l0,0c0.6,0.6,0.8,1.7,0,2.3
-		L5.3,30.1c-0.6,0.6-0.6,1.7,0,2.3l14.5,14.7c0.6,0.6,0.6,1.7,0,2.3l0,0c-0.6,0.6-1.7,0.5-2.2,0L3.6,36c0,0,0,0-0.1-0.1L0.4,32.4z"></path>
-            <polygon fill="#FCD116" points="47.6,2.5 28.1,2.5 17.6,32.1 30.4,32.2 20.4,61.5 48,22.4 34.6,22.4 	"></polygon>
-            <polygon opacity="0.3" fill="#FF8C00" enable-background="new    " points="34.6,22.4 47.6,2.5 37.4,2.5 26.6,27.1 39.4,27.2 
-		20.4,61.5 48,22.4 	"></polygon>
-          </g>
-        </svg><svg id="FxSymbol0-03c" xmlns="http://www.w3.org/2000/svg" viewBox="0 -12 50 51.8" class="logicappslogo">
-          <g>
-            <path d="M26 21.3v-5h-2.5v5c0 .9-.8 1.7-2.1 2.1l-3.4.7c-2.3.7-3.9 2.5-3.9 4.5v5.7h2.5v-5.7c0-.9.8-1.7 2.1-2.1l3.4-.8c2.3-.6 3.9-2.4 3.9-4.4z"
-              class="msportalfx-svg-c15"></path>
-            <path d="M19.6 36.9v-4.6c0-1.1-.9-2-2-2H13c-1.1 0-2 .9-2 2v4.6c0 1.1.9 2 2 2h4.6c1.1 0 2-.9 2-2z" class="msportalfx-svg-c14"></path>
-            <path d="M23.2 21.3v-5h2.5v5c0 .9.8 1.7 2.1 2.1l4.2.9c2.3.7 3.9 2.5 3.9 4.5v5.7h-2.5v-5.7c0-.9-.8-1.7-2.1-2.1l-4.2-.9c-2.3-.7-3.9-2.5-3.9-4.5z"
-              class="msportalfx-svg-c15"></path>
-            <path d="M30.4 37.1v-4.6c0-1.1.9-2 2-2H37c1.1 0 2 .9 2 2v4.6c0 1.1-.9 2-2 2h-4.6c-1.1 0-2-.9-2-2z" class="msportalfx-svg-c14"></path>
-            <path d="M23.2 16.3H26v4.8h-2.8z" class="msportalfx-svg-c15"></path>
-            <path d="M26.5 11.7v3.7h-3.7v-3.7h3.7m.8-2.8H22c-1.1 0-2 .9-2 2v5.3c0 1.1.9 2 2 2h5.3c1.1 0 2-.9 2-2v-5.3c0-1.1-.9-2-2-2z"
-              class="msportalfx-svg-c19"></path>
-            <path d="M7.9 44.4c-2.1 0-3.6-.4-4.5-1.1-.9-.8-1.3-2.1-1.3-4V28.9c0-1.7-.7-2.6-2.1-2.6v-2.6c1.4 0 2.1-.9 2.1-2.7V10.8c0-1.9.4-3.3 1.3-4.1s2.4-1.1 4.5-1.1v2.6c-1.5 0-2.3.8-2.3 2.5v10c0 2.3-.7 3.7-2.2 4.3 1.4.6 2.2 2 2.2 4.3v9.9c0 .9.2 1.6.5 2 .4.4.9.6 1.7.6l.1 2.6c-.1 0 0 0 0 0zM42.1 5.6c2.1 0 3.6.4 4.5 1.1.9.8 1.3 2.1 1.3 4v10.4c0 1.7.7 2.6 2.1 2.6v2.6c-1.4 0-2.1.9-2.1 2.7v10.1c0 1.9-.4 3.3-1.3 4.1-.9.8-2.4 1.2-4.5 1.2v-2.6c1.5 0 2.3-.8 2.3-2.5v-10c0-2.3.7-3.7 2.2-4.3-1.4-.6-2.2-2-2.2-4.3v-9.9c0-.9-.2-1.6-.5-2-.4-.4-.9-.6-1.7-.6l-.1-2.6z"
-              class="msportalfx-svg-c15"></path>
-          </g>
-        </svg>
-        <h2 class="c-heading">Azure Serverless Community Library<sup><sup class="previewtag"> (PREVIEW)</sup></sup></h2>
+  <div class="azurelogo" >
+    <a href="https://azure.microsoft.com/"  target="_blank" title="Microsoft Azure" >
+        <svg style="display:none;visibility:hidden;"><defs><symbol id="svg-msazure-logo" viewBox="0 0 506 72"> 
+          <path fill-rule="evenodd" clip-rule="evenodd" d="M20.244 8.014L13.857 26.209H26.811L20.455 8.014H20.244ZM24.702 0L40.97 43.201H32.716L28.89 32.476H11.869L8.194 43.201H0L16.267 0H24.702Z" transform="translate(350.999 14.3985)" fill="white"></path> <path fill-rule="evenodd" clip-rule="evenodd" d="M1.145 0H25.878V2.923L9.64 25.186H25.968V30.97H0V27.505L15.997 5.784H1.145V0Z" transform="translate(394.539 26.6293)" fill="white"></path> <path fill-rule="evenodd" clip-rule="evenodd" d="M27.806 0V30.97H20.455V26.902H20.335C19.371 28.309 18.08 29.408 16.464 30.201C14.847 30.994 13.035 31.392 11.027 31.392C7.431 31.392 4.695 30.372 2.817 28.333C0.939 26.295 0 23.127 0 18.829V0H7.381V17.955C7.381 20.566 7.898 22.529 8.933 23.845C9.967 25.16 11.528 25.818 13.618 25.818C15.686 25.818 17.342 25.09 18.588 23.634C19.833 22.178 20.455 20.274 20.455 17.925V0H27.806Z" transform="translate(424.786 26.6293)" fill="white"></path> <path fill-rule="evenodd" clip-rule="evenodd" d="M15.274 0C15.856 0 16.378 0.04 16.84 0.12C17.302 0.201 17.694 0.301 18.015 0.422V7.803C17.633 7.521 17.076 7.256 16.343 7.004C15.61 6.753 14.721 6.628 13.677 6.628C11.889 6.628 10.378 7.381 9.143 8.887C7.908 10.394 7.291 12.713 7.291 15.846V31.481H0V0.512H7.291V5.393H7.411C8.074 3.705 9.078 2.385 10.423 1.431C11.769 0.478 13.385 0 15.274 0Z" transform="translate(458.27 26.1176)" fill="white"></path> <path fill-rule="evenodd" clip-rule="evenodd" d="M21.238 12.983C21.238 10.573 20.68 8.736 19.566 7.47C18.451 6.205 16.88 5.573 14.851 5.573C13.104 5.573 11.538 6.201 10.152 7.456C8.76601 8.711 7.84201 10.553 7.38101 12.983H21.238ZM25.908 23.798V29.794C24.703 30.557 23.126 31.174 21.177 31.646C19.229 32.118 17.151 32.354 14.942 32.354C10.221 32.354 6.551 30.959 3.93 28.167C1.31 25.376 0 21.489 0 16.508C0 11.709 1.4 7.756 4.202 4.654C7.004 1.55 10.553 0 14.851 0C19.13 0 22.458 1.309 24.838 3.93C27.217 6.551 28.408 10.171 28.408 14.791V18.316H7.2C7.52 21.429 8.52 23.602 10.197 24.837C11.874 26.073 14.038 26.69 16.689 26.69C18.436 26.69 20.103 26.424 21.69 25.892C23.276 25.36 24.682 24.662 25.908 23.798Z" transform="translate(476.741 25.9979)" fill="white"></path> <path fill-rule="evenodd" clip-rule="evenodd" d="M229.35 21.39H218.492V46.394H211.112V21.39H205.93V15.425H211.112V11.117C211.112 7.863 212.17 5.197 214.29 3.119C216.408 1.039 219.124 0 222.438 0C223.322 0 224.105 0.045 224.788 0.136C225.471 0.227 226.074 0.362 226.596 0.542V6.839C226.354 6.699 225.933 6.528 225.33 6.327C224.728 6.126 224.035 6.026 223.252 6.026C221.725 6.026 220.551 6.502 219.727 7.456C218.903 8.411 218.492 9.822 218.492 11.689V15.425H229.35V8.465L236.67 6.237V15.425H244.052V21.39H236.67V35.879C236.67 37.788 237.017 39.134 237.71 39.916C238.403 40.7 239.492 41.091 240.978 41.091C241.4 41.091 241.907 40.992 242.5 40.79C243.092 40.59 243.609 40.349 244.052 40.068V46.092C243.589 46.354 242.821 46.594 241.746 46.816C240.672 47.036 239.613 47.147 238.568 47.147C235.495 47.147 233.191 46.329 231.655 44.692C230.118 43.055 229.35 40.59 229.35 37.295V21.39ZM180.943 31.12C180.943 34.354 181.676 36.824 183.142 38.532C184.607 40.239 186.706 41.091 189.438 41.091C192.089 41.091 194.108 40.239 195.493 38.532C196.879 36.824 197.572 34.293 197.572 30.939C197.572 27.606 196.854 25.09 195.418 23.393C193.982 21.696 191.968 20.848 189.378 20.848C186.706 20.848 184.633 21.736 183.157 23.514C181.68 25.29 180.943 27.827 180.943 31.12ZM173.351 31.361C173.351 26.24 174.797 22.183 177.689 19.19C180.581 16.198 184.598 14.702 189.739 14.702C194.579 14.702 198.36 16.143 201.082 19.025C203.803 21.908 205.163 25.798 205.163 30.699C205.163 35.72 203.717 39.716 200.826 42.688C197.933 45.661 193.997 47.147 189.016 47.147C184.216 47.147 180.405 45.737 177.584 42.914C174.762 40.093 173.351 36.242 173.351 31.361ZM156.933 23.559C156.933 24.603 157.265 25.421 157.928 26.014C158.59 26.606 160.056 27.354 162.326 28.258C165.238 29.423 167.282 30.734 168.456 32.19C169.631 33.646 170.219 35.408 170.219 37.477C170.219 40.389 169.099 42.729 166.86 44.495C164.62 46.264 161.593 47.147 157.777 47.147C156.492 47.147 155.07 46.992 153.514 46.68C151.957 46.369 150.637 45.972 149.552 45.49V38.321C150.878 39.244 152.304 39.977 153.83 40.519C155.357 41.062 156.742 41.333 157.988 41.333C159.634 41.333 160.85 41.102 161.633 40.64C162.416 40.178 162.808 39.405 162.808 38.321C162.808 37.316 162.401 36.467 161.588 35.775C160.775 35.081 159.233 34.283 156.963 33.379C154.272 32.255 152.365 30.99 151.24 29.584C150.115 28.178 149.552 26.391 149.552 24.221C149.552 21.43 150.662 19.135 152.881 17.337C155.1 15.54 157.978 14.642 161.513 14.642C162.597 14.642 163.812 14.762 165.158 15.002C166.503 15.244 167.628 15.556 168.532 15.937V22.866C167.568 22.223 166.443 21.671 165.158 21.208C163.872 20.746 162.597 20.516 161.332 20.516C159.946 20.516 158.866 20.787 158.093 21.329C157.32 21.871 156.933 22.615 156.933 23.559ZM121.868 31.12C121.868 34.354 122.6 36.824 124.067 38.532C125.533 40.239 127.632 41.091 130.363 41.091C133.015 41.091 135.033 40.239 136.418 38.532C137.804 36.824 138.497 34.293 138.497 30.939C138.497 27.606 137.779 25.09 136.343 23.393C134.907 21.696 132.893 20.848 130.303 20.848C127.632 20.848 125.558 21.736 124.082 23.514C122.605 25.29 121.868 27.827 121.868 31.12ZM114.276 31.361C114.276 26.24 115.722 22.183 118.614 19.19C121.506 16.198 125.523 14.702 130.664 14.702C135.505 14.702 139.285 16.143 142.007 19.025C144.728 21.908 146.089 25.798 146.089 30.699C146.089 35.72 144.642 39.716 141.751 42.688C138.859 45.661 134.922 47.147 129.941 47.147C125.141 47.147 121.33 45.737 118.509 42.914C115.687 40.093 114.276 36.242 114.276 31.361ZM111.14 14.912C111.722 14.912 112.245 14.953 112.706 15.034C113.168 15.114 113.56 15.213 113.882 15.334V22.715C113.5 22.434 112.942 22.168 112.21 21.917C111.476 21.665 110.587 21.54 109.544 21.54C107.756 21.54 106.245 22.293 105.01 23.799C103.775 25.306 103.157 27.625 103.157 30.758V46.394H95.866V15.425H103.157V20.305H103.277C103.94 18.618 104.944 17.298 106.29 16.343C107.635 15.39 109.252 14.912 111.14 14.912ZM83.184 41.091C84.268 41.091 85.463 40.841 86.768 40.339C88.074 39.836 89.279 39.174 90.384 38.35V45.128C89.219 45.791 87.898 46.293 86.422 46.634C84.947 46.976 83.324 47.147 81.557 47.147C76.997 47.147 73.292 45.706 70.441 42.824C67.588 39.942 66.163 36.262 66.163 31.784C66.163 26.802 67.619 22.701 70.531 19.476C73.443 16.253 77.57 14.642 82.913 14.642C84.279 14.642 85.659 14.818 87.055 15.169C88.451 15.52 89.56 15.926 90.384 16.388V23.378C89.259 22.554 88.109 21.917 86.934 21.464C85.76 21.013 84.559 20.787 83.334 20.787C80.462 20.787 78.143 21.721 76.375 23.589C74.608 25.456 73.724 27.977 73.724 31.15C73.724 34.283 74.572 36.724 76.27 38.471C77.967 40.218 80.272 41.091 83.184 41.091ZM53.781 46.394H61.071V15.425H53.781V46.394ZM53.028 6.478C53.028 5.273 53.465 4.263 54.339 3.45C55.212 2.636 56.251 2.23 57.456 2.23C58.741 2.23 59.807 2.647 60.65 3.48C61.494 4.313 61.915 5.313 61.915 6.478C61.915 7.662 61.483 8.657 60.62 9.459C59.756 10.263 58.702 10.664 57.456 10.664C56.211 10.664 55.162 10.258 54.309 9.445C53.454 8.631 53.028 7.642 53.028 6.478ZM46.755 3.194V46.394H39.254V12.533H39.133L25.727 46.394H20.757L7.019 12.533H6.929V46.394H0V3.194H10.755L23.167 35.217H23.347L36.452 3.194H46.755Z" transform="translate(93.5977 11.2052)" fill="white"></path> <path fill-rule="evenodd" clip-rule="evenodd" d="M0 34.219H34.219V0H0V34.219Z" transform="translate(0.00499725 0.00601196)" fill="#F25022"></path> <path fill-rule="evenodd" clip-rule="evenodd" d="M0 34.219H34.219V0H0V34.219Z" transform="translate(37.779)" fill="#7FBA00"></path> <path fill-rule="evenodd" clip-rule="evenodd" d="M0 34.219H34.219V0H0V34.219Z" transform="translate(0 37.779)" fill="#00A4EF"></path> <path fill-rule="evenodd" clip-rule="evenodd" d="M0 34.219H34.219V0H0V34.219Z" transform="translate(37.779 37.779)" fill="#FFB900"></path> </symbol> </defs></svg>
+          <svg aria-hidden="true" role="presentation" class="azurelogo">
+          <use xlink:href="#svg-msazure-logo"></use></svg>
+    </a>
+
+    </div>
+        <div class="contribute">
+    <a href="https://github.com/Azure/ServerlessLibrary"  target="_blank" title="How to Contribute" >
+        
+          <span>How to contribute </span>
+           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" class="contributelink" ><defs></defs><g transform="translate(-1337 -14)"><path class="contributelink" d="M4.279,8.416l6.873-6.85V5H12V0H7V.858h3.462L3.627,7.7Z" transform="translate(1337 14)"/><path  d="M11.137,11.169H.865V.881H5V0H0V12H12V7h-.863Z" transform="translate(1337 14)"/></g></svg>
+    </a>
+  </div>
+</div>
+  <div class="scootover">
+      <div data-grid="col-12" class="header">
+        <h2 class="headingtext">Azure Serverless Community Library</h2>
         <p>An open source set of common use cases for Azure Functions &amp; Logic Apps that are ready to deploy!</p>
       </div>
-      <AppItem :samples="list" />
+
+    <main id="mainContent" class="content">
+    <AppTopbar @updateFilters="updatedFilters = $event" :samples="samples" :filters="filters" />
+    <AppItem :samples="list" />
     </main>
   </div>
+  </div>
 </template>
 <script>
   import AppItem from './components/AppItem.vue'
-  import AppSidebar from './components/AppSidebar.vue'
+  import AppTopbar from './components/AppTopbar.vue'
 
   export default {
     components: {
       AppItem,
-      AppSidebar
+      AppTopbar
     },
 
     data() {
@@ -105,10 +99,49 @@
   body {
     background: lighten($base-color, 4%);
   }
+.headerbar{
+  background-color: #252525;
+  display: inline-block; 
+  width: 100%;
+padding:5px;
+}
 
+.contributelink{
+  color: #FFD800;
+  width: 16px;
+  margin-left:4px;
+  fill: #FFD800;
+}
+.azurelogo{
+  width:175px;
+  height:21px;
+  float:left;
+  padding-top:1px;
+}
+.contribute{
+  width:175px;
+  height:25px;
+  float:right;
+  padding-top:4px;
+  color: #FFD800;
+}
+
+  .scootover {
+    margin-left: 120px;
+        margin-right: 120px;
+
+  }
+.header{
+      text-align: center;
+      padding-bottom:20px;
+      float:unset;
+}
+.headingtext{
+  font-size: 34px;line-height: 40px;padding-top:50px;padding-bottom:20px; font-weight: 700;
+}
   .content {
     position: relative;
-    max-width: 950px;
+    max-width: 1250px;
     margin: 0 auto;
 
     &__list {
@@ -119,53 +152,9 @@
       backface-visibility: hidden;
     }
   }
-
-  .scootover {
-    margin-left: 280px;
-  }
-
   @media (max-width: 700px) {
     .scootover {
       margin-left: 0;
     }
   }
-
-  .m-area-heading {
-    margin-bottom: 30px;
-  }
-
-  .msportalfx-svg-c14 {
-    fill: #7fba00;
-  }
-
-  .msportalfx-svg-c15 {
-    fill: #59b4d9;
-  }
-
-  .msportalfx-svg-c19 {
-    fill: #0072c6;
-  }
-
-  .functionslogo {
-    width: 35px;
-    height: 40px;
-    margin-right: 10px;
-  }
-
-  .logicappslogo {
-    width: 40px;
-    height: 48px;
-    margin-left: 10px;
-  }
-
-  .header {
-    padding-top: 10px;
-  }
-
-  .previewtag {
-    color: gray;
-    font-weight: bold;
-    font-style: italic;
-    font-size: 10px;
-  }
 </style>
\ No newline at end of file
diff --git a/ServerlessLibraryUI/src/components/AppItem.vue b/ServerlessLibraryUI/src/components/AppItem.vue
index 1569a06..89cc679 100644
--- a/ServerlessLibraryUI/src/components/AppItem.vue
+++ b/ServerlessLibraryUI/src/components/AppItem.vue
@@ -1,5 +1,5 @@
 <template>
-  <transition-group name="sample" tag="ul" class="content__list">
+  <transition-group name="sample" tag="ul" class="contentlist">
     <li class="sample" v-for="item in samples" :key="item.title">
       <div class="sample__info">
         <span class="c-metadata-badge" :title= item.authortypedesc>{{ item.authortype }}</span>
@@ -64,6 +64,11 @@ export default {
 </script>
 
 <style lang="scss">
+.contentlist{
+    margin-top: 1rem;
+    padding-right: 1rem;
+    padding-bottom: 5rem;
+}
 .line-clamp2 {
   display: -webkit-box;
   -webkit-line-clamp: 2;
diff --git a/ServerlessLibraryUI/src/components/AppSidebar.vue b/ServerlessLibraryUI/src/components/AppSidebar.vue
deleted file mode 100644
index e5e3735..0000000
--- a/ServerlessLibraryUI/src/components/AppSidebar.vue
+++ /dev/null
@@ -1,366 +0,0 @@
-<template>
-  <aside class="theme-dark">
-    <h4>Find a function from a keyword</h4>
-
-    <form @submit.prevent="capturetext" class="c-search" autocomplete="off" name="form1">
-      <input 
-        v-model="searchtext" 
-        aria-label="Enter your search" 
-        type="search" 
-        name="search-field" 
-        role="searchbox" 
-        placeholder="Search"
-      />
-      <button class="c-glyph" name="search-button">
-          <span class="x-screen-reader">Search</span>
-      </button>
-    </form>
-    <p v-if="activeText">{{ activeFilters.filtertext }}</p>
-
-    <nav class="nav">
-      <menu>
-        <h4 v-for="(active, menu) in menus" 
-          @click="setMenu(menu, active)"
-          :key="menu"
-          :class="{
-            'nav__label--active' : active,
-            'nav__label--filter': activeFilters[menu].length
-          }">
-          {{ menu }} <span v-if="!active" class="carot">&#x25BC;</span>
-        </h4>
-        <li class="nav__label nav__label--clear" @click="clearAllFilters">Clear all</li>
-      </menu>
-    </nav>
-
-    <transition-group name="dropdown" tag="section" class="dropdown" :style="dropdown">
-      <menu v-for="(options, filter) in filters" class="filters"
-        v-show="menus[filter]" ref="menu" :key="filter">
-          <li @click="setFilter(filter, option)"
-            v-for="(active, option) in options" 
-            :key="option"
-            class="filters__item"
-            :class="{ 'filters__item--active': active }"
-            >
-            {{ option }}
-          </li>
-      </menu>
-    </transition-group>
-    <div class="bottomgroup" name="branding">
-    <div>
-    <a href="https://github.com/Azure/ServerlessLibrary"  target="_blank" title="How to Contribute" >
-            <strong 
-          class="c-badge f-small f-highlight"
-          style="text-transform:uppercase">
-          <span>How to Contribute <app-icon/></span>
-            </strong>
-    </a>
-  </div>
-  <div class="logopadding">
-    <a href="https://azure.microsoft.com/"  target="_blank" title="Microsoft Azure" >
-        <svg style="display:none;visibility:hidden;"><defs><symbol id="svg-msazure-logo" viewBox="0 0 506 72"> 
-          <path fill-rule="evenodd" clip-rule="evenodd" d="M20.244 8.014L13.857 26.209H26.811L20.455 8.014H20.244ZM24.702 0L40.97 43.201H32.716L28.89 32.476H11.869L8.194 43.201H0L16.267 0H24.702Z" transform="translate(350.999 14.3985)" fill="white"></path> <path fill-rule="evenodd" clip-rule="evenodd" d="M1.145 0H25.878V2.923L9.64 25.186H25.968V30.97H0V27.505L15.997 5.784H1.145V0Z" transform="translate(394.539 26.6293)" fill="white"></path> <path fill-rule="evenodd" clip-rule="evenodd" d="M27.806 0V30.97H20.455V26.902H20.335C19.371 28.309 18.08 29.408 16.464 30.201C14.847 30.994 13.035 31.392 11.027 31.392C7.431 31.392 4.695 30.372 2.817 28.333C0.939 26.295 0 23.127 0 18.829V0H7.381V17.955C7.381 20.566 7.898 22.529 8.933 23.845C9.967 25.16 11.528 25.818 13.618 25.818C15.686 25.818 17.342 25.09 18.588 23.634C19.833 22.178 20.455 20.274 20.455 17.925V0H27.806Z" transform="translate(424.786 26.6293)" fill="white"></path> <path fill-rule="evenodd" clip-rule="evenodd" d="M15.274 0C15.856 0 16.378 0.04 16.84 0.12C17.302 0.201 17.694 0.301 18.015 0.422V7.803C17.633 7.521 17.076 7.256 16.343 7.004C15.61 6.753 14.721 6.628 13.677 6.628C11.889 6.628 10.378 7.381 9.143 8.887C7.908 10.394 7.291 12.713 7.291 15.846V31.481H0V0.512H7.291V5.393H7.411C8.074 3.705 9.078 2.385 10.423 1.431C11.769 0.478 13.385 0 15.274 0Z" transform="translate(458.27 26.1176)" fill="white"></path> <path fill-rule="evenodd" clip-rule="evenodd" d="M21.238 12.983C21.238 10.573 20.68 8.736 19.566 7.47C18.451 6.205 16.88 5.573 14.851 5.573C13.104 5.573 11.538 6.201 10.152 7.456C8.76601 8.711 7.84201 10.553 7.38101 12.983H21.238ZM25.908 23.798V29.794C24.703 30.557 23.126 31.174 21.177 31.646C19.229 32.118 17.151 32.354 14.942 32.354C10.221 32.354 6.551 30.959 3.93 28.167C1.31 25.376 0 21.489 0 16.508C0 11.709 1.4 7.756 4.202 4.654C7.004 1.55 10.553 0 14.851 0C19.13 0 22.458 1.309 24.838 3.93C27.217 6.551 28.408 10.171 28.408 14.791V18.316H7.2C7.52 21.429 8.52 23.602 10.197 24.837C11.874 26.073 14.038 26.69 16.689 26.69C18.436 26.69 20.103 26.424 21.69 25.892C23.276 25.36 24.682 24.662 25.908 23.798Z" transform="translate(476.741 25.9979)" fill="white"></path> <path fill-rule="evenodd" clip-rule="evenodd" d="M229.35 21.39H218.492V46.394H211.112V21.39H205.93V15.425H211.112V11.117C211.112 7.863 212.17 5.197 214.29 3.119C216.408 1.039 219.124 0 222.438 0C223.322 0 224.105 0.045 224.788 0.136C225.471 0.227 226.074 0.362 226.596 0.542V6.839C226.354 6.699 225.933 6.528 225.33 6.327C224.728 6.126 224.035 6.026 223.252 6.026C221.725 6.026 220.551 6.502 219.727 7.456C218.903 8.411 218.492 9.822 218.492 11.689V15.425H229.35V8.465L236.67 6.237V15.425H244.052V21.39H236.67V35.879C236.67 37.788 237.017 39.134 237.71 39.916C238.403 40.7 239.492 41.091 240.978 41.091C241.4 41.091 241.907 40.992 242.5 40.79C243.092 40.59 243.609 40.349 244.052 40.068V46.092C243.589 46.354 242.821 46.594 241.746 46.816C240.672 47.036 239.613 47.147 238.568 47.147C235.495 47.147 233.191 46.329 231.655 44.692C230.118 43.055 229.35 40.59 229.35 37.295V21.39ZM180.943 31.12C180.943 34.354 181.676 36.824 183.142 38.532C184.607 40.239 186.706 41.091 189.438 41.091C192.089 41.091 194.108 40.239 195.493 38.532C196.879 36.824 197.572 34.293 197.572 30.939C197.572 27.606 196.854 25.09 195.418 23.393C193.982 21.696 191.968 20.848 189.378 20.848C186.706 20.848 184.633 21.736 183.157 23.514C181.68 25.29 180.943 27.827 180.943 31.12ZM173.351 31.361C173.351 26.24 174.797 22.183 177.689 19.19C180.581 16.198 184.598 14.702 189.739 14.702C194.579 14.702 198.36 16.143 201.082 19.025C203.803 21.908 205.163 25.798 205.163 30.699C205.163 35.72 203.717 39.716 200.826 42.688C197.933 45.661 193.997 47.147 189.016 47.147C184.216 47.147 180.405 45.737 177.584 42.914C174.762 40.093 173.351 36.242 173.351 31.361ZM156.933 23.559C156.933 24.603 157.265 25.421 157.928 26.014C158.59 26.606 160.056 27.354 162.326 28.258C165.238 29.423 167.282 30.734 168.456 32.19C169.631 33.646 170.219 35.408 170.219 37.477C170.219 40.389 169.099 42.729 166.86 44.495C164.62 46.264 161.593 47.147 157.777 47.147C156.492 47.147 155.07 46.992 153.514 46.68C151.957 46.369 150.637 45.972 149.552 45.49V38.321C150.878 39.244 152.304 39.977 153.83 40.519C155.357 41.062 156.742 41.333 157.988 41.333C159.634 41.333 160.85 41.102 161.633 40.64C162.416 40.178 162.808 39.405 162.808 38.321C162.808 37.316 162.401 36.467 161.588 35.775C160.775 35.081 159.233 34.283 156.963 33.379C154.272 32.255 152.365 30.99 151.24 29.584C150.115 28.178 149.552 26.391 149.552 24.221C149.552 21.43 150.662 19.135 152.881 17.337C155.1 15.54 157.978 14.642 161.513 14.642C162.597 14.642 163.812 14.762 165.158 15.002C166.503 15.244 167.628 15.556 168.532 15.937V22.866C167.568 22.223 166.443 21.671 165.158 21.208C163.872 20.746 162.597 20.516 161.332 20.516C159.946 20.516 158.866 20.787 158.093 21.329C157.32 21.871 156.933 22.615 156.933 23.559ZM121.868 31.12C121.868 34.354 122.6 36.824 124.067 38.532C125.533 40.239 127.632 41.091 130.363 41.091C133.015 41.091 135.033 40.239 136.418 38.532C137.804 36.824 138.497 34.293 138.497 30.939C138.497 27.606 137.779 25.09 136.343 23.393C134.907 21.696 132.893 20.848 130.303 20.848C127.632 20.848 125.558 21.736 124.082 23.514C122.605 25.29 121.868 27.827 121.868 31.12ZM114.276 31.361C114.276 26.24 115.722 22.183 118.614 19.19C121.506 16.198 125.523 14.702 130.664 14.702C135.505 14.702 139.285 16.143 142.007 19.025C144.728 21.908 146.089 25.798 146.089 30.699C146.089 35.72 144.642 39.716 141.751 42.688C138.859 45.661 134.922 47.147 129.941 47.147C125.141 47.147 121.33 45.737 118.509 42.914C115.687 40.093 114.276 36.242 114.276 31.361ZM111.14 14.912C111.722 14.912 112.245 14.953 112.706 15.034C113.168 15.114 113.56 15.213 113.882 15.334V22.715C113.5 22.434 112.942 22.168 112.21 21.917C111.476 21.665 110.587 21.54 109.544 21.54C107.756 21.54 106.245 22.293 105.01 23.799C103.775 25.306 103.157 27.625 103.157 30.758V46.394H95.866V15.425H103.157V20.305H103.277C103.94 18.618 104.944 17.298 106.29 16.343C107.635 15.39 109.252 14.912 111.14 14.912ZM83.184 41.091C84.268 41.091 85.463 40.841 86.768 40.339C88.074 39.836 89.279 39.174 90.384 38.35V45.128C89.219 45.791 87.898 46.293 86.422 46.634C84.947 46.976 83.324 47.147 81.557 47.147C76.997 47.147 73.292 45.706 70.441 42.824C67.588 39.942 66.163 36.262 66.163 31.784C66.163 26.802 67.619 22.701 70.531 19.476C73.443 16.253 77.57 14.642 82.913 14.642C84.279 14.642 85.659 14.818 87.055 15.169C88.451 15.52 89.56 15.926 90.384 16.388V23.378C89.259 22.554 88.109 21.917 86.934 21.464C85.76 21.013 84.559 20.787 83.334 20.787C80.462 20.787 78.143 21.721 76.375 23.589C74.608 25.456 73.724 27.977 73.724 31.15C73.724 34.283 74.572 36.724 76.27 38.471C77.967 40.218 80.272 41.091 83.184 41.091ZM53.781 46.394H61.071V15.425H53.781V46.394ZM53.028 6.478C53.028 5.273 53.465 4.263 54.339 3.45C55.212 2.636 56.251 2.23 57.456 2.23C58.741 2.23 59.807 2.647 60.65 3.48C61.494 4.313 61.915 5.313 61.915 6.478C61.915 7.662 61.483 8.657 60.62 9.459C59.756 10.263 58.702 10.664 57.456 10.664C56.211 10.664 55.162 10.258 54.309 9.445C53.454 8.631 53.028 7.642 53.028 6.478ZM46.755 3.194V46.394H39.254V12.533H39.133L25.727 46.394H20.757L7.019 12.533H6.929V46.394H0V3.194H10.755L23.167 35.217H23.347L36.452 3.194H46.755Z" transform="translate(93.5977 11.2052)" fill="white"></path> <path fill-rule="evenodd" clip-rule="evenodd" d="M0 34.219H34.219V0H0V34.219Z" transform="translate(0.00499725 0.00601196)" fill="#F25022"></path> <path fill-rule="evenodd" clip-rule="evenodd" d="M0 34.219H34.219V0H0V34.219Z" transform="translate(37.779)" fill="#7FBA00"></path> <path fill-rule="evenodd" clip-rule="evenodd" d="M0 34.219H34.219V0H0V34.219Z" transform="translate(0 37.779)" fill="#00A4EF"></path> <path fill-rule="evenodd" clip-rule="evenodd" d="M0 34.219H34.219V0H0V34.219Z" transform="translate(37.779 37.779)" fill="#FFB900"></path> </symbol> </defs></svg>
-          <svg aria-hidden="true" role="presentation" class="azurelogo">
-          <use xlink:href="#svg-msazure-logo"></use></svg>
-    </a>
-    </div>
-    </div>
-  </aside>
-</template>
-<script>
-import AppIcon from './AppIcon.vue'
-
-export default {
-  data() {
-    return {
-      searchtext: '',
-      dropdown: { height: 0 },
-      menus: { language: false, type: false },
-      activeText: false
-    }
-  },
-  components: {
-    AppIcon
-  },
-  props: {
-    samples: {
-      required: true
-    },
-    filters: {
-      type: Object,
-      required: true
-    }
-  },
-
-  computed: {
-    activeMenu() {
-      return Object.keys(this.menus).reduce(
-        ($$, set, i) => (this.menus[set] ? i : $$),
-        -1
-      )
-    },
-
-    activeFilters() {
-      let { language, type, filtertext } = this.filters
-
-      return {
-        language: Object.keys(language).filter(c => language[c]),
-        type: Object.keys(type).filter(c => type[c]),
-        filtertext: this.searchtext
-      }
-    }
-  },
-
-  methods: {
-    capturetext() {
-      this.activeText === true
-    },
-
-    setFilter(filter, option) {
-      if (filter === 'title') {
-        this.filters[filter][option] = !this.filters[filter][option]
-      } else {
-        setTimeout(() => {
-          this.clearFilter(filter, option, this.filters[filter][option])
-        }, 100)
-      }
-    },
-
-    clearFilter(filter, except, active) {
-      Object.keys(this.filters[filter]).forEach(option => {
-        this.filters[filter][option] = except === option && !active
-      })
-    },
-
-    clearAllFilters() {
-      Object.keys(this.filters).forEach(this.clearFilter)
-    },
-
-    setMenu(menu, active) {
-      Object.keys(this.menus).forEach(tab => {
-        this.menus[tab] = !active && tab === menu
-      })
-    }
-  },
-
-  watch: {
-    activeMenu(index, from) {
-      if (index === from) return
-
-      this.$nextTick(() => {
-        if (!this.$refs.menu || !this.$refs.menu[index]) {
-          this.dropdown.height = 0
-        } else {
-          this.dropdown.height = `${this.$refs.menu[index].clientHeight + 20}px`
-        }
-      })
-    },
-    activeFilters() {
-      this.$emit('updateFilters', this.activeFilters)
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.theme-dark .c-search input[type='search'] {
-  background: transparent;
-}
-
-.c-search input[type='search'] {
-  border-top: none;
-  border-right: none;
-  border-left: none;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
-}
-
-li {
-  list-style: none outside none;
-}
-
-h4 {
-  font-weight: normal;
-}
-
-menu {
-  padding-left: 0;
-  margin: 0;
-  display: flex;
-}
-
-.carot {
-  color: #81bdec;
-  font-size: 12px;
-  width: 14px;
-}
-</style>
-
-<style lang="scss">
-aside {
-  color: white;
-  width: 275px;
-  padding: 125px 1rem;
-  height: 100vh;
-  position: fixed;
-  top: 0;
-  left: 0;
-}
-
-@media (max-width: 700px) {
-  aside {
-    display: none;
-  }
-}
-
-.nav {
-  margin-top: 50px;
-
-  h4 {
-    text-transform: capitalize;
-    cursor: pointer;
-    margin-right: 15px;
-  }
-
-  &__controls {
-    display: flex;
-  }
-
-  &__label {
-    position: relative;
-    margin-left: 1rem;
-    text-transform: capitalize;
-    z-index: 1;
-    cursor: pointer;
-    padding: 2px;
-
-    &::after {
-      content: '\00d7';
-      display: inline-block;
-      color: transparent;
-      width: 0.5rem;
-      font-weight: 400;
-      transform: scale(0);
-      transition: transform 150ms ease-in-out;
-    }
-
-    &--clear {
-      color: #f68185;
-      opacity: 0;
-      transform: translate3d(-25%, 0, 0);
-      pointer-events: none;
-      transition: all 275ms ease-in-out;
-    }
-
-    &--filter ~ &--clear {
-      opacity: 1;
-      transform: translate3d(0, 0, 0);
-      pointer-events: auto;
-    }
-
-    &--filter::after,
-    &--active::after {
-      transform: scale(1);
-    }
-
-    &--active::after {
-      content: '\00d7';
-      color: #f68185;
-    }
-  }
-}
-.azurelogo{
-  width:175px;
-  height:30px;
-}
-.bottomgroup{
-  position: absolute;
-  bottom: -5px;
-  height: 85px;
-}
-.logopadding{
-  padding-top: 20px;
-}
-.dropdown {
-  position: relative;
-  height: 0;
-  overflow: hidden;
-  transition: height 350ms;
-
-  &-enter,
-  &-leave-to {
-    opacity: 0;
-  }
-
-  &-leave,
-  &-enter-to {
-    opacity: 1;
-  }
-
-  &-enter-active,
-  &-leave-active {
-    position: absolute;
-    width: 100%;
-    transition: opacity 200ms ease-in-out;
-  }
-
-  &-enter-active {
-    transition-delay: 100ms;
-  }
-}
-
-.filters {
-  padding: 1rem;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: flex-start;
-
-  &__item {
-    margin-right: 0.5rem;
-    border: 1px solid #888;
-    border-radius: 6px;
-    font-size: 0.8rem;
-    line-height: 1.35;
-    cursor: pointer;
-    transition: all 275ms;
-    padding: 0.25rem 0.5rem 0.45rem;
-    text-transform: uppercase;
-
-    &:hover {
-      border-color: #3393de;
-    }
-
-    &--active {
-      color: white;
-      border-color: #3393de;
-      background-color: #3393de;
-    }
-  }
-
-  &__rating {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding: 1.5rem 0;
-  }
-
-  &__range {
-    width: 200px;
-    margin-top: 1rem;
-    color: inherit;
-
-    &::-webkit-slider-thumb {
-      width: 0.8rem;
-      height: 0.8rem;
-      margin-top: calc(-0.4rem + 2px);
-      border-radius: 100%;
-      background-color: currentColor;
-    }
-
-    &::-webkit-slider-runnable-track {
-      width: 100%;
-      height: 4px;
-      background-image: linear-gradient(to right, white, #46d2c4);
-    }
-  }
-}
-</style>
\ No newline at end of file
diff --git a/ServerlessLibraryUI/src/components/AppTopbar.vue b/ServerlessLibraryUI/src/components/AppTopbar.vue
new file mode 100644
index 0000000..9aac748
--- /dev/null
+++ b/ServerlessLibraryUI/src/components/AppTopbar.vue
@@ -0,0 +1,318 @@
+<template>
+<div>
+<div data-grid="col-12">
+    <div data-grid="col-6">
+    <form @submit.prevent="capturetext" class="c-search" autocomplete="off" name="form1">
+      <input 
+        v-model="searchtext" 
+        aria-label="Enter your search" 
+        type="search" 
+        name="search-field" 
+        role="searchbox" 
+        placeholder="Search"
+      />
+      <button class="c-glyph" name="search-button">
+          <span class="x-screen-reader">Search</span>
+      </button>
+    </form>      <p v-if="activeText">{{ activeFilters.filtertext }}</p>
+    </div>
+    <div data-grid="col-3">
+    <select class="c-search dropdown2"  v-model="activeFilters.language">
+  <option value="" selected >Type: All</option>
+  <option value="javascript">Javascript</option>
+  <option value="csharp">CSharp</option>
+</select>
+</div>
+<div data-grid="col-3" >
+     <select class="c-search dropdown2"  v-model="activeFilters.type">
+  <option value="" selected>Language: All</option>
+  <option value="functionapp">Function App</option>
+  <option value="logicapp">Logic App</option>
+</select>
+    </div>
+
+  </div>
+</div>
+</template>
+<script>
+import AppIcon from './AppIcon.vue'
+
+export default {
+  data() {
+    return {
+      searchtext: '',
+      dropdown: { height: 0 },
+      menus: { language: false, type: false },
+      activeText: false
+    }
+  },
+  components: {
+    AppIcon
+  },
+  props: {
+    samples: {
+      required: true
+    },
+    filters: {
+      type: Object,
+      required: true
+    }
+  },
+
+  computed: {
+
+
+    activeFilters() {
+      let { language, type, filtertext } = this.filters
+      var filteredLangs = Object.keys(language).filter(c => language[c]);
+      var filteredTypes = Object.keys(type).filter(c => type[c]);
+      return {
+        language: filteredLangs.length ? filteredLangs: "",
+        type: filteredTypes.length ? filteredTypes: "",
+        filtertext: this.searchtext
+      }
+    }
+  },
+
+  methods: {
+    capturetext() {
+      this.activeText === true
+    },
+    setFilter(filter, option) {
+      if (filter === 'title') {
+        this.filters[filter][option] = !this.filters[filter][option]
+      } else {
+        setTimeout(() => {
+          this.clearFilter(filter, option, this.filters[filter][option])
+        }, 100)
+      }
+    },
+    setMenu(menu, active) {
+      Object.keys(this.menus).forEach(tab => {
+        this.menus[tab] = !active && tab === menu
+      })
+    }
+  },
+
+  watch: {
+    activeMenu(index, from) {
+      if (index === from) return
+
+      this.$nextTick(() => {
+        if (!this.$refs.menu || !this.$refs.menu[index]) {
+          this.dropdown.height = 0
+        } else {
+          this.dropdown.height = `${this.$refs.menu[index].clientHeight + 20}px`
+        }
+      })
+    },
+    activeFilters() {
+      this.$emit('updateFilters', this.activeFilters)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.theme-dark .c-search input[type='search'] {
+  background: transparent;
+}
+.c-search{
+  max-width:100%;
+  margin-left:1rem;
+  margin-top:1rem;
+}
+.c-search input[type='search'] {
+  border-top: none;
+  border-right: none;
+  border-left: none;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
+}
+.dropdown2{
+  width:90%;
+  border-top: none;
+  border-right: none;
+  border-left: none;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
+  overflow: hidden;
+  padding-left:15px;
+
+}
+select{
+  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAbCAYAAAAULC3gAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAGFSURBVFhH7dbPK8NxHMfxNy4OSv6LlZqdjIO1hBxYk6w44LJairLyo1xc1IrGYRdywmRSLmS1mZLI1FqUmaHJmLWSaS3Zvl7MPgdK+/6Yw9T3cfn2fX3r2/Pwre+nBJ+oiJSya9GQg/jIQXzkID7/M+gtcU+XkQhx7F60dJwC4TAlBbxAUNDDqZvMPSZacAXYIgKeaMUySubxRYqmBBRlfx38OASdNjRp2mH3xtgmjGOyD7ruYRw/ptiSn8CgnNi+DdWKRmyePbMlP4+1H3UtJhw+cGzhJyoo6+5gGjXKVmz4o2z5zTucc0YoVF24ZotQooOygs4ZaLQGrBzdsuW7JLZnB6Ft7oU/wyYRJAUBGZysW1Bfp4c7/PPb2LEOQNdhhDuUYIs4EoOyMghtTUGh1GP3JhflWx1Dbb0BrquXr3spCj6g+dZGaGg+Qm0NVbTsuCD7uYdUZeyhFF9ZBfIuTUCt7sRenA0F+JsjbIajxGuaKivK2SCdfKbmIwfxkYP4FFkQ0QcfqvTSn4DY8AAAAABJRU5ErkJggg==) no-repeat 98% 60%;
+  background-color:white;
+  -webkit-appearance: none;
+  color: #000;
+}
+
+li {
+  list-style: none outside none;
+}
+
+h4 {
+  font-weight: normal;
+}
+
+menu {
+  padding-left: 0;
+  margin: 0;
+  display: flex;
+}
+
+.carot {
+  color: #81bdec;
+  font-size: 12px;
+  width: 14px;
+}
+</style>
+
+<style lang="scss">
+
+@media (max-width: 700px) {
+  aside {
+    display: none;
+  }
+}
+
+.nav {
+  margin-top: 50px;
+
+  h4 {
+    text-transform: capitalize;
+    cursor: pointer;
+    margin-right: 15px;
+  }
+
+  &__controls {
+    display: flex;
+  }
+
+  &__label {
+    position: relative;
+    margin-left: 1rem;
+    text-transform: capitalize;
+    z-index: 1;
+    cursor: pointer;
+    padding: 2px;
+
+    &::after {
+      content: '\00d7';
+      display: inline-block;
+      color: transparent;
+      width: 0.5rem;
+      font-weight: 400;
+      transform: scale(0);
+      transition: transform 150ms ease-in-out;
+    }
+
+    &--clear {
+      color: #f68185;
+      opacity: 0;
+      transform: translate3d(-25%, 0, 0);
+      pointer-events: none;
+      transition: all 275ms ease-in-out;
+    }
+
+    &--filter ~ &--clear {
+      opacity: 1;
+      transform: translate3d(0, 0, 0);
+      pointer-events: auto;
+    }
+
+    &--filter::after,
+    &--active::after {
+      transform: scale(1);
+    }
+
+    &--active::after {
+      content: '\00d7';
+      color: #f68185;
+    }
+  }
+}
+
+.dropdown {
+  position: relative;
+  height: 0;
+  overflow: hidden;
+  transition: height 350ms;
+
+  &-enter,
+  &-leave-to {
+    opacity: 0;
+  }
+
+  &-leave,
+  &-enter-to {
+    opacity: 1;
+  }
+
+  &-enter-active,
+  &-leave-active {
+    position: absolute;
+    width: 100%;
+    transition: opacity 200ms ease-in-out;
+  }
+
+  &-enter-active {
+    transition-delay: 100ms;
+  }
+}
+
+.filters {
+  padding: 1rem;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+
+  &__item {
+    margin-right: 0.5rem;
+    border: 1px solid #888;
+    border-radius: 6px;
+    font-size: 0.8rem;
+    line-height: 1.35;
+    cursor: pointer;
+    transition: all 275ms;
+    padding: 0.25rem 0.5rem 0.45rem;
+    text-transform: uppercase;
+
+    &:hover {
+      border-color: #3393de;
+    }
+
+    &--active {
+      color: white;
+      border-color: #3393de;
+      background-color: #3393de;
+    }
+  }
+
+  &__rating {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 1.5rem 0;
+  }
+
+  &__range {
+    width: 200px;
+    margin-top: 1rem;
+    color: inherit;
+
+    &::-webkit-slider-thumb {
+      width: 0.8rem;
+      height: 0.8rem;
+      margin-top: calc(-0.4rem + 2px);
+      border-radius: 100%;
+      background-color: currentColor;
+    }
+
+    &::-webkit-slider-runnable-track {
+      width: 100%;
+      height: 4px;
+      background-image: linear-gradient(to right, white, #46d2c4);
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
new file mode 100644
index 0000000..fb57ccd
--- /dev/null
+++ b/yarn.lock
@@ -0,0 +1,4 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+