diff --git a/dev/script/generate-config/service-config.js b/dev/script/generate-config/service-config.js
index e1debb5679..e44f0bae0c 100644
--- a/dev/script/generate-config/service-config.js
+++ b/dev/script/generate-config/service-config.js
@@ -94,6 +94,11 @@ function getKahunaConfig(config){
         |  }
         |]`;
 
+    const permissionsConfig = stripMargin`
+      |usePermissionsFilter=true
+      |permissionsDefault="allPermissions"
+      `;
+
     return stripMargin`${getCommonConfig(config)}
         |aws.region="${config.AWS_DEFAULT_REGION}"
         |origin.full="images.media.${config.DOMAIN}"
@@ -110,6 +115,7 @@ function getKahunaConfig(config){
         |security.imageSources=["https://*.newslabs.co/"]
         |metrics.request.enabled=false
         |usageRightsSummary=true
+        |${permissionsConfig}
         |${pinboardConfig}
         |`;
 }
diff --git a/kahuna/app/controllers/KahunaController.scala b/kahuna/app/controllers/KahunaController.scala
index a9d447ae16..93ef2bfbe3 100644
--- a/kahuna/app/controllers/KahunaController.scala
+++ b/kahuna/app/controllers/KahunaController.scala
@@ -54,6 +54,7 @@ class KahunaController(
     val fieldAliases: String = Json.toJson(config.fieldAliasConfigs).toString()
     val metadataTemplates: String = Json.toJson(config.metadataTemplates).toString()
     val announcements: String = Json.toJson(config.announcements).toString()
+    val interimFilterOptions: String = Json.toJson(config.interimFilterOptions).toString()
     val returnUri = config.rootUri + okPath
     val costFilterLabel = config.costFilterLabel.getOrElse("Free to use only")
     val costFilterChargeable = config.costFilterChargeable.getOrElse(false)
@@ -70,6 +71,7 @@ class KahunaController(
       domainMetadataSpecs,
       metadataTemplates,
       announcements,
+      interimFilterOptions,
       additionalNavigationLinks,
       costFilterLabel,
       costFilterChargeable,
diff --git a/kahuna/app/lib/InterimFilterOptionsConfig.scala b/kahuna/app/lib/InterimFilterOptionsConfig.scala
new file mode 100644
index 0000000000..265ecace3c
--- /dev/null
+++ b/kahuna/app/lib/InterimFilterOptionsConfig.scala
@@ -0,0 +1,30 @@
+package lib
+
+import play.api.ConfigLoader
+import play.api.libs.json._
+import scala.collection.JavaConverters._
+
+case class InterimFilterOption(
+        id: String,
+        label: String,
+        mapping: String,
+        payable: String
+)
+
+object InterimFilterOption {
+
+  implicit val writes: Writes[InterimFilterOption] = Json.writes[InterimFilterOption]
+
+  implicit val configLoader: ConfigLoader[Seq[InterimFilterOption]] = {
+    ConfigLoader(_.getConfigList).map(
+      _.asScala.map(config => {
+        InterimFilterOption(
+          id = config.getString("id"),
+          label = config.getString("label"),
+          mapping = config.getString("mapping"),
+          payable = config.getString("payable")
+        )
+      }))
+  }
+
+}
diff --git a/kahuna/app/lib/KahunaConfig.scala b/kahuna/app/lib/KahunaConfig.scala
index 3cbfdc1277..4fa846b421 100644
--- a/kahuna/app/lib/KahunaConfig.scala
+++ b/kahuna/app/lib/KahunaConfig.scala
@@ -3,6 +3,7 @@ package lib
 import com.gu.mediaservice.lib.auth.Permissions.Pinboard
 import com.gu.mediaservice.lib.auth.SimplePermission
 import com.gu.mediaservice.lib.config.{CommonConfig, GridConfigResources}
+import play.api.libs.json._
 
 case class ScriptToLoad(
   host: String,
@@ -39,7 +40,11 @@ class KahunaConfig(resources: GridConfigResources) extends CommonConfig(resource
   val restrictDownload: Option[Boolean] = booleanOpt("restrictDownload")
   val useReaper: Option[Boolean] = booleanOpt("useReaper")
 
+  // interim permissions filter configuration settings
+  val usePermissionsFilter: Option[Boolean] = booleanOpt("usePermissionsFilter")
   val usageRightsSummary: Option[Boolean] = booleanOpt("usageRightsSummary")
+  val permissionsDefault: Option[String] = stringOpt("permissionsDefault").filterNot(_.isEmpty)
+  val interimFilterOptions: Seq[InterimFilterOption] = configuration.getOptional[Seq[InterimFilterOption]]("interimFilterOptions").getOrElse(Seq.empty)
 
   val showDenySyndicationWarning: Option[Boolean] = booleanOpt("showDenySyndicationWarning")
 
diff --git a/kahuna/app/views/main.scala.html b/kahuna/app/views/main.scala.html
index 60b26d67ff..b974bcf1d0 100644
--- a/kahuna/app/views/main.scala.html
+++ b/kahuna/app/views/main.scala.html
@@ -8,6 +8,7 @@
   domainMetadataSpecs: String,
   metadataTemplates: String,
   announcements: String,
+  interimFilterOptions: String,
   additionalNavigationLinks: String,
   costFilterLabel: String,
   costFilterChargeable: Boolean,
@@ -76,7 +77,10 @@
           useReaper: @kahunaConfig.useReaper.getOrElse(false),
           featureSwitches: @Html(featureSwitches),
           telemetryUri: '@kahunaConfig.telemetryUri.getOrElse("")',
+          usePermissionsFilter: @kahunaConfig.usePermissionsFilter.getOrElse(false),
           usageRightsSummary: @kahunaConfig.usageRightsSummary.getOrElse(false),
+          interimFilterOptions: @Html(interimFilterOptions),
+          permissionsDefault: "@kahunaConfig.permissionsDefault",
           defaultShouldBlurGraphicImages: @kahunaConfig.defaultShouldBlurGraphicImages,
           shouldUploadStraightToBucket: @kahunaConfig.shouldUploadStraightToBucket,
           announcements: @Html(announcements),
diff --git a/kahuna/public/js/components/gr-my-uploads/gr-my-uploads.css b/kahuna/public/js/components/gr-my-uploads/gr-my-uploads.css
new file mode 100644
index 0000000000..efda79eb51
--- /dev/null
+++ b/kahuna/public/js/components/gr-my-uploads/gr-my-uploads.css
@@ -0,0 +1,60 @@
+.my-uploads-container {
+  display: flex;
+  align-items: center;
+  height: 50px;
+  padding-left: 12px;
+  padding-right: 12px;
+  fill: #ccc;
+}
+
+.my-uploads-container:hover {
+  color: white;
+}
+
+.custom-checkbox {
+  cursor: pointer;
+}
+
+.label-wrapper {
+  display: flex;
+  align-items: center;
+  padding-bottom: 22px;
+}
+
+.custom-checkbox input {
+  visibility: hidden;
+  width: 0;
+  height: 0;
+  margin: 0;
+  padding: 0;
+}
+
+.custom-checkbox .label-wrapper .custom-span {
+  height: 14px;
+  width: 14px;
+  border: 1px solid grey;
+  display: inline-block;
+  background: white;
+  margin-right: 7px;
+}
+
+.custom-label-short {
+  display: none;
+}
+
+[type=checkbox]:checked + .label-wrapper .custom-span {
+  background: #4eaae8;
+  content: url('data:image/svg+xml,<svg width="18px" height="18px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="white" stroke-width="3"/></svg>');
+}
+
+@media screen and (max-width: 880px) {
+  .custom-label {
+    display: none;
+  }
+
+  .custom-label-short {
+    display: inline;
+  }
+}
+
+
diff --git a/kahuna/public/js/components/gr-my-uploads/gr-my-uploads.tsx b/kahuna/public/js/components/gr-my-uploads/gr-my-uploads.tsx
new file mode 100644
index 0000000000..ca7c503929
--- /dev/null
+++ b/kahuna/public/js/components/gr-my-uploads/gr-my-uploads.tsx
@@ -0,0 +1,53 @@
+import * as React from "react";
+import * as angular from "angular";
+import { react2angular } from "react2angular";
+import { useState, KeyboardEvent } from "react";
+
+import "./gr-my-uploads.css";
+
+const MY_UPLOADS = "My uploads";
+const MY_UPLOADS_SHORT = "My uploads";
+
+export interface MyUploadsProps {
+  onChange: (selected: boolean) => void;
+}
+
+export interface MyUploadsWrapperProps {
+  props: MyUploadsProps;
+}
+
+const MyUploads: React.FC<MyUploadsWrapperProps> = ({ props }) => {
+
+  const [myUploads, setMyUploads] = useState(false);
+
+  const handleCheckboxClick = () => {
+    setMyUploads(prevChkd => {
+      props.onChange(!prevChkd);
+      return !prevChkd;
+      });
+  };
+
+  const handleKeyboard = (event:KeyboardEvent<HTMLDivElement>) => {
+    if (event.code === 'Space') {
+      event.preventDefault();
+      event.stopPropagation();
+      handleCheckboxClick();
+    }
+  };
+
+  return (
+    <div className="my-uploads-container" tabIndex={0} aria-label={MY_UPLOADS} onKeyDown={handleKeyboard}>
+      <label className="custom-checkbox">
+        <input type="checkbox" checked={myUploads} onChange={handleCheckboxClick}/>
+        <div className="label-wrapper" >
+          <span className="custom-span"></span>
+          <span className="custom-label no-select">{MY_UPLOADS}</span>
+          <span className="custom-label-short no-select">{MY_UPLOADS_SHORT}</span>
+        </div>
+      </label>
+    </div>
+  );
+};
+
+export const myUploads = angular.module('gr.myUploads', [])
+  .component('myUploads', react2angular(MyUploads, ["props"]));
diff --git a/kahuna/public/js/components/gr-permissions-filter/gr-permissions-filter-config.ts b/kahuna/public/js/components/gr-permissions-filter/gr-permissions-filter-config.ts
new file mode 100644
index 0000000000..051fde3fbb
--- /dev/null
+++ b/kahuna/public/js/components/gr-permissions-filter/gr-permissions-filter-config.ts
@@ -0,0 +1,101 @@
+//***permissions constants***
+
+//-chip query content-
+const CHARGEABLE_QUERY = " category:chargeable";
+
+//-permissions options-
+const CHARGEABLE_OPT = "chargeable";
+const ALL_PERMISSIONS_OPT = "allPermissions";
+
+//-permissions labels-
+const CHARGEABLE_LABEL = "Chargeable";
+const ALL_PERMISSIONS_LABEL = "All Permissions";
+
+export type PermissionOption = {
+  id: string,
+  label: string,
+  mapping: string,
+  payable: string
+}
+
+function getPermissionsOptions():Array<PermissionOption> {
+  try {
+    if (window._clientConfig.interimFilterOptions) {
+      return window._clientConfig.interimFilterOptions;
+    } else {
+      return [];
+    }
+  } catch (e) {
+    console.log("Error Parsing Permissions Options");
+    console.log("Options String: " + JSON.stringify(window._clientConfig.interimFilterOptions));
+    console.log("Error: " + e);
+    return [];
+  }
+}
+
+const pOpts = getPermissionsOptions();
+
+export function permissionsDefaultOpt():string{
+  if (window._clientConfig.permissionsDefault && pOpts.length > 0) {
+    return window._clientConfig.permissionsDefault;
+  } else {
+    return ALL_PERMISSIONS_OPT;
+  }
+}
+
+export function permissionsQueries():string[]  {
+  if (pOpts.length > 0) {
+    return pOpts.map(c => c.mapping.split(',')).flatMap(c => c);
+  } else {
+      return [
+          CHARGEABLE_QUERY
+      ];
+  }
+}
+
+export function permissionsPayable():{opt:string, payable:string}[] {
+  if (pOpts.length > 0) {
+    return pOpts.map(c => { return {opt: c.id, payable: c.payable};});
+  } else {
+    const pPayable: { opt: string, payable: string }[] = [
+      {opt: CHARGEABLE_OPT, payable: 'none'},
+      {opt: ALL_PERMISSIONS_OPT, payable: 'none'}
+    ];
+    return pPayable;
+  }
+}
+
+//-options and labels-
+export function permissionsOptions():{label:string, value:string}[] {
+   if (pOpts.length > 0) {
+     return pOpts.map(c => {
+       return {
+         label: c.label,
+         value: c.id
+       };
+     });
+   } else {
+     const permOpts: { label: string, value: string }[] = [
+       {label: ALL_PERMISSIONS_LABEL, value: ALL_PERMISSIONS_OPT},
+       {label: CHARGEABLE_LABEL, value: CHARGEABLE_OPT}
+     ];
+     return permOpts;
+   }
+}
+
+export function permissionsMappings():{opt:string, query:string[]}[] {
+  if (pOpts.length > 0) {
+    return pOpts.map(c => {
+      return  {
+        opt: c.id,
+        query: c.mapping.split(",").map(q => " " + q).filter(q => q.trim() != "")
+      };
+    });
+  } else {
+    const permMappings: { opt: string, query: string[] }[] = [
+      {opt: CHARGEABLE_OPT, query: [CHARGEABLE_QUERY]},
+      {opt: ALL_PERMISSIONS_OPT, query: []}
+    ];
+    return permMappings;
+  }
+}
diff --git a/kahuna/public/js/components/gr-permissions-filter/gr-permissions-filter-util.ts b/kahuna/public/js/components/gr-permissions-filter/gr-permissions-filter-util.ts
new file mode 100644
index 0000000000..7fcd93b711
--- /dev/null
+++ b/kahuna/public/js/components/gr-permissions-filter/gr-permissions-filter-util.ts
@@ -0,0 +1,16 @@
+import * as PermissionsConf from "./gr-permissions-filter-config";
+import {PermissionsDropdownOption} from "./gr-permissions-filter";
+
+//-update chips based on permissions filter-
+export function updateFilterChips(permissionsSel: PermissionsDropdownOption, query: string) : string {
+  let workingQuery = ' ' + (query ? query : '');
+  PermissionsConf.permissionsQueries().forEach((pfQ) => {
+    workingQuery = workingQuery.replace(pfQ, '');
+  });
+  const permMappings = PermissionsConf.permissionsMappings().filter((opt) => permissionsSel.value == opt.opt)[0];
+  permMappings.query.forEach((q) => {
+    workingQuery = workingQuery + q;
+  });
+  if (workingQuery[0] == ' ') { workingQuery = workingQuery.trimStart(); }
+  return workingQuery;
+}
diff --git a/kahuna/public/js/components/gr-permissions-filter/gr-permissions-filter.css b/kahuna/public/js/components/gr-permissions-filter/gr-permissions-filter.css
new file mode 100644
index 0000000000..3e720b7bbb
--- /dev/null
+++ b/kahuna/public/js/components/gr-permissions-filter/gr-permissions-filter.css
@@ -0,0 +1,93 @@
+.outer-permissions-filters {
+  display: flex;
+  align-items: center;
+  fill: #ccc;
+}
+
+.no-select {
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+}
+
+.permissions-dropdown {
+  padding-right: 0px;
+  cursor: pointer;
+}
+
+.permissions-selection {
+  display: flex;
+  align-items: center;
+  fill: #ccc;
+}
+
+.permissions-selection:hover {
+  color: white;
+  fill: #fff;
+}
+
+.permissions-selection-label-short {
+  display: none;
+}
+
+.permissions-selection-icon {
+  padding-top: 3px;
+  transition: fill 0.3s;
+}
+
+.permissions-dropdown-menu {
+  width: 250px;
+  border: 1px solid #ccc;
+  border-collapse: collapse;
+  background-color: #333;
+  position: absolute;
+}
+
+.permissions-dropdown-item {
+  border: 1px solid #ccc;
+}
+
+.permissions-dropdown-highlight {
+  background-color: #008fc5;
+  color: white;
+  fill: #fff;
+  cursor: pointer;
+}
+
+.permissions-dropdown-item:hover {
+  background-color: #008fc5;
+  color: white;
+  fill: #fff;
+  cursor: pointer;
+}
+
+.permissions-dropdown-cell {
+  border: 0px;
+}
+
+.permissions-dropdown-cell-tick {
+  border: 0px;
+  stroke: #ccc;
+  transition: stroke 0.3ms;
+}
+
+.permissions-dropdown-cell-tick:hover {
+  stroke: #fff;
+}
+
+@media screen and (max-width: 1200px) {
+  .permissions-selection-label {
+    display: none;
+  }
+
+  .permissions-selection-label-short {
+    display: inline;
+  }
+}
+
+@media screen and (max-width: 880px) {
+  .permissions-selection-label-short {
+    display: none;
+  }
+}
diff --git a/kahuna/public/js/components/gr-permissions-filter/gr-permissions-filter.tsx b/kahuna/public/js/components/gr-permissions-filter/gr-permissions-filter.tsx
new file mode 100644
index 0000000000..b77cf58330
--- /dev/null
+++ b/kahuna/public/js/components/gr-permissions-filter/gr-permissions-filter.tsx
@@ -0,0 +1,236 @@
+import * as React from "react";
+import * as angular from "angular";
+import { react2angular } from "react2angular";
+import { useEffect, useRef, useState, KeyboardEvent } from "react";
+import * as PermissionsConf from "./gr-permissions-filter-config";
+
+import "./gr-permissions-filter.css";
+import "./gr-toggle-switch.css";
+
+const SHOW_CHARGEABLE = "Show payable images";
+const SHOW_CHARGEABLE_SHORT = "Payable";
+const SELECT_OPTION = "Select an option";
+const CONTROL_TITLE = "Permissions Selector";
+const SELECTED = "Selected";
+const NOT_SELECTED = " Not Selected";
+const PERMISSIONS = "Permissions";
+
+const chevronIcon = () =>
+  <svg fill="inherit" width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+    <path d="M16.003 18.626l7.081-7.081L25 13.46l-8.997 8.998-9.003-9 1.917-1.916z"/>
+  </svg>;
+
+const emptyIcon = () =>
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <rect width="100%" height="100%" fill="none" stroke="none" />
+  </svg>;
+
+const tickIcon = () =>
+  <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <polyline fill="none" stroke="inherit" points="3.7 14.3 9.6 19 20.3 5" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2"/>
+  </svg>;
+
+export interface PermissionsDropdownOption {
+  value: string;
+  label: string;
+}
+
+export interface PermissionsDropdownProps {
+  options: PermissionsDropdownOption[];
+  selectedOption?: PermissionsDropdownOption | null;
+  onSelect: (option: PermissionsDropdownOption, showPayable: boolean) => void;
+  onChargeable: (showChargeable: boolean) => void;
+  chargeable: boolean;
+  query?: string | "";
+}
+
+export interface PermissionsWrapperProps {
+  props: PermissionsDropdownProps;
+}
+
+const hasClassInSelfOrParent = (node: Element | null, className: string): boolean => {
+  if (node !== null && node.classList && node.classList.contains(className)) {
+    return true;
+  }
+
+  while (node && node.parentNode && node.parentNode !== document) {
+    node = node.parentNode as Element;
+    if (node.classList && node.classList.contains(className)) {
+      return true;
+    }
+  }
+
+  return false;
+};
+
+const PermissionsFilter: React.FC<PermissionsWrapperProps> = ({ props }) => {
+  const options:PermissionsDropdownOption[] = props.options;
+  const defOptVal:string = PermissionsConf.permissionsDefaultOpt();
+  const payableDefaults = PermissionsConf.permissionsPayable();
+  const defPerms:PermissionsDropdownOption = options.filter(opt => opt.value == defOptVal)[0];
+  const propsRef = useRef(props);
+
+  const [isOpen, setIsOpen] = useState(false);
+  const [isChargeable, setIsChargeable] = useState(props.chargeable);
+  const [selectedOption, setSelection] = useState(defPerms);
+  const [currentIndex, setCurrentIndex] = useState(-1);
+
+  const autoHideListener = (event: any) => {
+    if (event.type === "keydown" && event.key === "Escape") {
+      setIsOpen(false);
+    } else if (event.type !== "keydown") {
+      if (!hasClassInSelfOrParent(event.target, "outer-permissions-filters")) {
+        setIsOpen(false);
+      }
+    }
+  };
+
+  const handleQueryChange = (e: any ) => {
+    const newQuery = e.detail.query ? (" " + e.detail.query) : "";
+
+    //-check chargeable-
+    const logoClick = window.sessionStorage.getItem("logoClick") ? window.sessionStorage.getItem("logoClick") : "";
+    if (logoClick.includes("logoClick")) {
+      setIsChargeable(false);
+      window.sessionStorage.setItem("logoClick", "");
+    }
+
+    if (propsRef.current.query !== newQuery) {
+      propsRef.current.query = newQuery;
+      const permMaps = PermissionsConf.permissionsMappings();
+      for (let i = 0; i < permMaps.length; i++) {
+        if (permMaps[i].query.length > 0 && permMaps[i].query.filter(q => newQuery.includes(q)).length == permMaps[i].query.length) {
+          const sel = options.filter(opt => opt.value == permMaps[i].opt)[0];
+          setSelection(sel);
+          return;
+        }
+      }
+
+      //-default-
+      const lDefOptVal:string = PermissionsConf.permissionsDefaultOpt();
+      const lDefPerms:PermissionsDropdownOption = props.options.filter(opt => opt.value == lDefOptVal)[0];
+      setSelection(options.filter(opt => opt.value == lDefPerms.value)[0]);
+    }
+  };
+
+  useEffect(() => {
+    window.addEventListener('queryChangeEvent', handleQueryChange);
+    window.addEventListener("mouseup", autoHideListener);
+    window.addEventListener("scroll", autoHideListener);
+    window.addEventListener("keydown", autoHideListener);
+    setSelection(defPerms);
+
+    // Clean up the event listener when the component unmounts
+    return () => {
+      setCurrentIndex(-1);
+      window.removeEventListener('queryChangeEvent', handleQueryChange);
+      window.removeEventListener("mouseup", autoHideListener);
+      window.removeEventListener("scroll", autoHideListener);
+      window.removeEventListener("keydown", autoHideListener);
+    };
+  }, []);
+
+  const handleOptionClick = (option: PermissionsDropdownOption) => {
+    const payableDef = payableDefaults.filter(pd => pd.opt === option.value)[0];
+    if (payableDef.payable === 'false' || payableDef.payable === 'true') {
+        const payableOn = payableDef.payable === 'false' ? false : true;
+        setIsChargeable(payableOn);
+        props.onSelect(option, payableOn);
+    } else {
+      props.onSelect(option, isChargeable);
+    }
+    setSelection(option);
+    setIsOpen(false);
+  };
+
+  useEffect(() => {
+    props.onChargeable(isChargeable);
+  }, [isChargeable]);
+
+  const handleToggle = () => {
+    setIsChargeable(prevState => !prevState);
+  };
+
+  const handleKeyToggle = (event:KeyboardEvent<HTMLDivElement>) => {
+    if (event.code === 'Space') {
+      event.preventDefault();
+      event.stopPropagation();
+      handleToggle();
+    }
+  };
+
+  const handleKeyboard = (event:KeyboardEvent<HTMLDivElement>) => {
+    if (event.key === 'ArrowDown' ||
+        event.key === 'ArrowUp' ||
+        event.key === 'Enter' ||
+        event.code === 'Space') {
+      event.preventDefault();
+      event.stopPropagation();
+      const rowCount = options.length;
+      if (event.key === 'ArrowDown') {
+        setCurrentIndex((prevIndex) => (prevIndex + 1) % rowCount);
+      } else if (event.key === 'ArrowUp') {
+        setCurrentIndex((prevIndex) => (prevIndex - 1 + rowCount) % rowCount);
+      } else if (event.key === 'Enter' || event.code === 'Space') {
+        if (!isOpen) {
+          setCurrentIndex(options.findIndex(opt => opt.value === selectedOption.value));
+          setIsOpen(true);
+        } else {
+          handleOptionClick(options[currentIndex]);
+        }
+      }
+    }
+  };
+
+  return (
+      <div className="outer-permissions-filters">
+        <div className="dropdown permissions-dropdown" tabIndex={0} aria-label={CONTROL_TITLE} onKeyDown={handleKeyboard}>
+          <div className="dropdown-toggle" onClick={() => setIsOpen(!isOpen)}>
+            <div className="permissions-selection">
+              <div className="permissions-selection-label no-select">{(selectedOption ? selectedOption.label : SELECT_OPTION)}</div>
+              <div className="permissions-selection-label-short no-select">{PERMISSIONS}</div>
+              <div className="permissions-selection-icon">{chevronIcon()}</div>
+            </div>
+          </div>
+          {isOpen && (
+            <table className="permissions-dropdown-menu">
+              <tbody>
+              {options.map((option) => (
+                <tr className={(currentIndex > -1 && options[currentIndex].value) === option.value ? "permissions-dropdown-item permissions-dropdown-highlight" : "permissions-dropdown-item"}
+                    key={option.value + "row"}
+                    aria-label={option.label}
+                    onClick={() => handleOptionClick(option)}>
+                  <td className="permissions-dropdown-cell-tick" key={option.value + "tick"}>
+                    {(selectedOption.value == option.value) ? tickIcon() : emptyIcon()}
+                  </td>
+                  <td className="permissions-dropdown-cell no-select" key={option.value}>
+                    {option.label}
+                  </td>
+                </tr>
+              ))}
+              </tbody>
+             </table>
+          )}
+        </div>
+        <div className="ts-toggle-container" tabIndex={0} aria-label={SHOW_CHARGEABLE + " " + (isChargeable ? SELECTED : NOT_SELECTED)} onKeyDown={handleKeyToggle} onClick={handleToggle}>
+          <div className="ts-toggle-label no-select">{SHOW_CHARGEABLE}</div>
+          <label className="ts-toggle-switch">
+            <input type="checkbox" checked={isChargeable} onChange={handleToggle}/>
+            <span className="ts-slider"></span>
+          </label>
+        </div>
+        <div className="ts-toggle-container-short" tabIndex={0} aria-label={SHOW_CHARGEABLE + " " + (isChargeable ? SELECTED : NOT_SELECTED)} onKeyDown={handleToggle}>
+          <label className="chargeable-checkbox">
+            <input type="checkbox" checked={isChargeable} onChange={handleToggle}/>
+            <div className="chargeable-label-wrapper" >
+              <span className="chargeable-span"></span>
+              <span className="chargeable-label no-select">{SHOW_CHARGEABLE_SHORT}</span>
+            </div>
+          </label>
+        </div>
+      </div>
+  );
+};
+
+export const permissionsFilter = angular.module('gr.permissionsFilter', [])
+  .component('permissionsFilter', react2angular(PermissionsFilter, ["props"]));
diff --git a/kahuna/public/js/components/gr-permissions-filter/gr-toggle-switch.css b/kahuna/public/js/components/gr-permissions-filter/gr-toggle-switch.css
new file mode 100644
index 0000000000..e5d992a778
--- /dev/null
+++ b/kahuna/public/js/components/gr-permissions-filter/gr-toggle-switch.css
@@ -0,0 +1,113 @@
+.ts-toggle-container {
+  display: flex;
+  align-items: center;
+  fill: #666;
+  height:50px;
+  cursor: pointer;
+}
+
+.ts-toggle-switch {
+  position: relative;
+  display: inline-block;
+  width: 38px;
+  height: 24px;
+}
+
+.ts-toggle-switch input {
+  display: none;
+}
+
+.ts-slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #666;
+  transition: 0.4s;
+}
+
+.ts-slider:before {
+  position: absolute;
+  content: url('data:image/svg+xml,<svg width="18px" height="18px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7 17L16.8995 7.10051" stroke="%23000"  stroke-width="2"/><path d="M7 7.00001L16.8995 16.8995" stroke="%23000" stroke-width="2"/></svg>');
+  height: 18px;
+  width: 18px;
+  left: 3px;
+  bottom: 3px;
+  background-color: white;
+  transition: 0.4s;
+}
+
+.ts-toggle-label {
+  padding-left: 8px;
+  padding-right: 8px;
+}
+
+.ts-toggle-container:hover {
+  color: white;
+}
+
+input:checked + .ts-slider {
+  background-color: #4eaae8;
+}
+
+input:checked + .ts-slider:before {
+  transform: translateX(14px);
+  content: url('data:image/svg+xml,<svg width="18px" height="18px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="%23000" stroke-width="2"/></svg>');
+}
+
+.ts-toggle-container-short {
+  display: none;
+}
+
+.chargeable-checkbox {
+  cursor: pointer;
+}
+
+.chargeable-label-wrapper {
+  display: flex;
+  align-items: center;
+  padding-bottom: 22px;
+}
+
+.chargeable-checkbox input {
+  visibility: hidden;
+  width: 0;
+  height: 0;
+  margin: 0;
+  padding: 0;
+}
+
+.chargeable-checkbox .chargeable-label-wrapper .chargeable-span {
+  height: 14px;
+  width: 14px;
+  border: 1px solid grey;
+  display: inline-block;
+  background: white;
+  margin-right: 7px;
+}
+
+[type=checkbox]:checked + .chargeable-label-wrapper .chargeable-span {
+  background: #4eaae8;
+  content: url('data:image/svg+xml,<svg width="18px" height="18px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="white" stroke-width="3"/></svg>');
+}
+
+@media screen and (max-width: 1200px) {
+  .ts-toggle-container {
+    display: none;
+  }
+
+  .ts-toggle-container-short {
+    display: flex;
+    align-items: center;
+    height: 50px;
+    padding-left: 12px;
+    padding-right: 12px;
+    fill: #ccc;
+  }
+
+  .ts-toggle-container-short:hover {
+    color:white;
+  }
+}
diff --git a/kahuna/public/js/components/gr-search-wrapper/gr-search-wrapper.css b/kahuna/public/js/components/gr-search-wrapper/gr-search-wrapper.css
new file mode 100644
index 0000000000..777c4beff4
--- /dev/null
+++ b/kahuna/public/js/components/gr-search-wrapper/gr-search-wrapper.css
@@ -0,0 +1,9 @@
+.gr-search-wrapper {
+  width: 100%;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.gr-search-wrapper-modifier {
+  top: 40px;
+}
diff --git a/kahuna/public/js/components/gr-search-wrapper/gr-search-wrapper.html b/kahuna/public/js/components/gr-search-wrapper/gr-search-wrapper.html
new file mode 100644
index 0000000000..4e8e3238f3
--- /dev/null
+++ b/kahuna/public/js/components/gr-search-wrapper/gr-search-wrapper.html
@@ -0,0 +1,31 @@
+<div class="gr-search-wrapper" ng-controller="SearchQueryCtrl as searchQuery">
+
+    <permissions-filter class="permissions-filter" props="searchQuery.permissionsProps"></permissions-filter>
+
+    <div class="search__modifier-container">
+        <button class="search__modifier-toggle"
+                type="button"
+                ng-click="filtersShown = !filtersShown ">
+            <gr-icon class="search__modifier-toggle__icon">filter_list</gr-icon>
+            <span class="search__modifier-toggle__text">Search filters</span>
+        </button>
+        <ul class="search__modifier search__filter gr-search-wrapper-modifier" ng-class="filtersShown ? 'search__filter--show' : 'search__filter--hide'">
+            <li class="search__modifier-item">
+                <gu-date-range class="search__date"
+                               gu:start-date="searchQuery.dateFilter.since"
+                               gu:end-date="searchQuery.dateFilter.until"
+                               gu:preset-dates="searchQuery.sinceOptions"
+                               gu:selected-field="searchQuery.dateFilter.field"
+                               gu:fields="searchQuery.filterDateFieldsOptions"
+                               gu:show-extras="true"
+                               gu:first-day="1">
+                </gu-date-range>
+            </li>
+        </ul>
+    </div>
+
+    <my-uploads class="my-uploads" props="searchQuery.myUploadsProps"></my-uploads>
+
+    <sort-control class="sort-control" props="searchQuery.sortProps"></sort-control>
+
+</div>
diff --git a/kahuna/public/js/components/gr-search-wrapper/gr-search-wrapper.js b/kahuna/public/js/components/gr-search-wrapper/gr-search-wrapper.js
new file mode 100644
index 0000000000..4666d87751
--- /dev/null
+++ b/kahuna/public/js/components/gr-search-wrapper/gr-search-wrapper.js
@@ -0,0 +1,13 @@
+import angular from 'angular';
+import '../../search/query';
+import template from './gr-search-wrapper.html';
+import './gr-search-wrapper.css';
+
+export var grSearchWrapper = angular.module('gr-searchWrapper', ['kahuna.search.query']);
+
+grSearchWrapper.directive('grSearchWrapper', [function() {
+  return {
+    replace: true,
+    template: template
+  };
+}]);
diff --git a/kahuna/public/js/components/gr-sort-control/gr-sort-control-config.ts b/kahuna/public/js/components/gr-sort-control/gr-sort-control-config.ts
index cb0392c687..771163675c 100644
--- a/kahuna/public/js/components/gr-sort-control/gr-sort-control-config.ts
+++ b/kahuna/public/js/components/gr-sort-control/gr-sort-control-config.ts
@@ -32,7 +32,7 @@ export const SortOptions: SortDropdownOption[] = [
   },
   {
     value: "dateAddedToCollection",
-    label: "Added to Collection (new to old)",
+    label: "Added to collection (new to old)",
     isCollection: true
   }
 ];
diff --git a/kahuna/public/js/components/gr-sort-control/gr-sort-control.css b/kahuna/public/js/components/gr-sort-control/gr-sort-control.css
index 27190010d1..772c620b52 100644
--- a/kahuna/public/js/components/gr-sort-control/gr-sort-control.css
+++ b/kahuna/public/js/components/gr-sort-control/gr-sort-control.css
@@ -13,14 +13,12 @@
 }
 
 .sort-dropdown {
-  display: inline-block;
-  padding-right: 0px;
   padding-bottom: 10px;
 }
 
 .sort-dropdown-toggle-advanced {
   display: block;
-  padding-top: 10px;
+  padding-top: 7px;
 }
 
 .sort-dropdown-toggle-basic {
@@ -36,6 +34,10 @@
   border: 1px solid #999;
 }
 
+.gr-search-wrapper .sort-selection {
+  padding: 2px 3px 2px 2px;
+}
+
 .sort-selection:hover {
   color: white;
   fill: #fff;
@@ -67,6 +69,14 @@
   padding-left: 3px;
 }
 
+.gr-search-wrapper .sort-selection-title {
+  padding-top: 1px;
+}
+
+.gr-search-wrapper .sort-dropdown {
+  padding-top: 3px;
+}
+
 .sort-selection-icon {
   padding-top: 3px;
   padding-left: 6px;
@@ -132,6 +142,11 @@
     padding-top: 10px;
   }
 
+  .gr-search-wrapper .sort-dropdown-toggle-basic {
+    display: block;
+    padding-top: 6px;
+  }
+
   .sort-dropdown-toggle-advanced {
     display: none;
   }
diff --git a/kahuna/public/js/components/gr-sort-control/gr-sort-control.tsx b/kahuna/public/js/components/gr-sort-control/gr-sort-control.tsx
index 31cd6ccd78..5366bf67b4 100644
--- a/kahuna/public/js/components/gr-sort-control/gr-sort-control.tsx
+++ b/kahuna/public/js/components/gr-sort-control/gr-sort-control.tsx
@@ -174,7 +174,7 @@ const SortControl: React.FC<SortWrapperProps> = ({ props }) => {
 
   return (
     <div className="outer-sort-container">
-      <span className="sort-selection-title no-select">{CONTROL_TITLE}</span>
+      <div className="sort-selection-title no-select">{CONTROL_TITLE}</div>
       <div className="sort-dropdown" tabIndex={0} aria-label={CONTROL_TITLE} onKeyDown={handleArrowKeys}>
         <div className="sort-dropdown-toggle-advanced" onClick={() => setIsOpen(!isOpen)}>
           <div className="sort-selection">
diff --git a/kahuna/public/js/components/gr-top-bar/gr-top-bar.css b/kahuna/public/js/components/gr-top-bar/gr-top-bar.css
index b93d6166c6..c6ca76cad1 100644
--- a/kahuna/public/js/components/gr-top-bar/gr-top-bar.css
+++ b/kahuna/public/js/components/gr-top-bar/gr-top-bar.css
@@ -3,7 +3,7 @@ gr-top-bar {
     height: 50px; /* faking we're in the flow */
     position: relative;
     /* We do this as it should always be over `results-toolbar` */
-    z-index: 31;
+    z-index: 30;
 }
 
 gr-top-bar-nav {
diff --git a/kahuna/public/js/search/index.js b/kahuna/public/js/search/index.js
index 912629c50a..bcd249630a 100644
--- a/kahuna/public/js/search/index.js
+++ b/kahuna/public/js/search/index.js
@@ -15,6 +15,9 @@ import '../components/gr-info-panel/gr-info-panel';
 import '../components/gr-collections-panel/gr-collections-panel';
 import '../components/gr-keyboard-shortcut/gr-keyboard-shortcut';
 import '../components/gr-sort-control/gr-sort-control';
+import '../components/gr-permissions-filter/gr-permissions-filter';
+import '../components/gr-my-uploads/gr-my-uploads';
+import '../components/gr-search-wrapper/gr-search-wrapper';
 import '../util/storage';
 
 import '../components/gr-panels/gr-panels';
@@ -38,6 +41,9 @@ export var search = angular.module('kahuna.search', [
     'gr.panels',
     'gr.keyboardShortcut',
     'gr.sortControl',
+    'gr.permissionsFilter',
+    'gr.myUploads',
+    'gr-searchWrapper',
     'grInfoPanel',
     'grCollectionsPanel',
     'ui.router',
@@ -87,6 +93,7 @@ search.config(['$stateProvider', '$urlMatcherFactoryProvider',
             const ctrl = this;
 
             ctrl.canUpload = false;
+            ctrl.usePermissionsFilter = window._clientConfig.usePermissionsFilter;
             ctrl.hasNotifications = window._clientConfig.announcements.length > 0;
 
             mediaApi.canUserUpload().then(canUpload => {
@@ -103,6 +110,7 @@ search.config(['$stateProvider', '$urlMatcherFactoryProvider',
                   isNonFree: showPaid ? showPaid : false
                 };
                 storage.setJs("defaultNonFreeFilter", defaultNonFreeFilter, true);
+                storage.setJs("logoClick","logoClick", true);
                 $state.go('search.results', {nonFree: defaultNonFreeFilter.isNonFree});
                 window.dispatchEvent(new CustomEvent("logoClick", {
                   detail: "logoClick",
diff --git a/kahuna/public/js/search/query.html b/kahuna/public/js/search/query.html
index 3a1218ea9a..33108efb37 100644
--- a/kahuna/public/js/search/query.html
+++ b/kahuna/public/js/search/query.html
@@ -14,7 +14,7 @@
         </button>
     </span>
 
-    <button class="search__advanced-toggle"
+    <button class="search__advanced-toggle" ng-class="searchQuery.usePermissionsFilter ? 'search__advanced-toggle-lbl' : ''"
             type="button"
             ng-click="searchInfo = !searchInfo"
             gr-tooltip="Display advanced search information"
@@ -22,7 +22,7 @@
         <gr-icon>info_outline</gr-icon>
     </button>
 
-    <div class="search__modifier-container">
+    <div ng-if="!searchQuery.usePermissionsFilter" class="search__modifier-container">
         <button class="search__modifier-toggle"
                 type="button"
                 ng-click="filtersShown = !filtersShown ">
@@ -84,7 +84,7 @@
         </ul>
     </div>
 
-    <div class="search__modifier-container">
+    <div ng-if="!searchQuery.usePermissionsFilter" class="search__modifier-container">
         <div class="search__modifier-sort">
             <sort-control class="sort-control" props="searchQuery.sortProps"></sort-control>
         </div>
diff --git a/kahuna/public/js/search/query.js b/kahuna/public/js/search/query.js
index 9498c5c9d0..cff817f465 100644
--- a/kahuna/public/js/search/query.js
+++ b/kahuna/public/js/search/query.js
@@ -12,8 +12,12 @@ import template from './query.html';
 import {syntax} from './syntax/syntax';
 import {grStructuredQuery} from './structured-query/structured-query';
 import '../components/gr-sort-control/gr-sort-control';
+import '../components/gr-permissions-filter/gr-permissions-filter';
+import '../components/gr-my-uploads/gr-my-uploads';
 import { sendTelemetryForQuery } from '../services/telemetry';
 import { renderQuery, structureQuery } from './structured-query/syntax';
+import * as PermissionsConf from '../components/gr-permissions-filter/gr-permissions-filter-config';
+import {updateFilterChips} from "../components/gr-permissions-filter/gr-permissions-filter-util";
 import {
   manageSortSelection,
   DefaultSortOption,
@@ -28,7 +32,9 @@ export var query = angular.module('kahuna.search.query', [
     syntax.name,
     grStructuredQuery.name,
     'util.storage',
-    'gr.sortControl'
+    'gr.sortControl',
+    'gr.permissionsFilter',
+    'gr.myUploads'
 ]);
 
 query.controller('SearchQueryCtrl', [
@@ -66,17 +72,27 @@ query.controller('SearchQueryCtrl', [
         // filled in by the watcher below
     };
 
-    function watchUploadedBy(filter) {
+    ctrl.usePermissionsFilter = window._clientConfig.usePermissionsFilter;
+    ctrl.filterMyUploads = false;
+
+    function watchUploadedBy(filter, sender) {
       // Users should be able to follow URLs with uploadedBy set to another user's name, so only
       // overwrite if:
       //   - uploadedBy is unset, or
       //   - uploadedBy is set to their email (to allow unchecking the 'My uploads' checkbox), or
       //   - 'My uploads' checkbox is checked (overwrite other user's email with theirs).
-      const myUploadsCheckbox = filter.uploadedByMe;
-      const shouldOverwriteUploadedBy =
-        !filter.uploadedBy || filter.uploadedBy === ctrl.user.email || myUploadsCheckbox;
-      if (shouldOverwriteUploadedBy) {
-        filter.uploadedBy = filter.uploadedByMe ? ctrl.user.email : undefined;
+      if (!ctrl.usePermissionsFilter) {
+        const myUploadsCheckbox = filter.uploadedByMe;
+        const shouldOverwriteUploadedBy =
+          !filter.uploadedBy || filter.uploadedBy === ctrl.user.email || myUploadsCheckbox;
+        if (shouldOverwriteUploadedBy) {
+          filter.uploadedBy = filter.uploadedByMe ? ctrl.user.email : undefined;
+        }
+      } else {
+        if (typeof sender === "string") {
+          filter.uploadedBy = (ctrl.user && ctrl.filterMyUploads) ? ctrl.user.email : undefined;
+          ctrl.filter.uploadedByMe = ctrl.filterMyUploads;
+        }
       }
       storage.setJs("isUploadedByMe", ctrl.filter.uploadedByMe, true);
     }
@@ -89,12 +105,12 @@ query.controller('SearchQueryCtrl', [
       window.dispatchEvent(customEvent);
     }
 
-    function watchSearchChange(filter) {
+    function watchSearchChange(filter, sender) {
       const showPaid = ctrl.filter.nonFree ? ctrl.filter.nonFree : false;
       storage.setJs("isNonFree", showPaid, true);
 
       ctrl.collectionSearch = ctrl.filter.query ? ctrl.filter.query.indexOf('~') === 0 : false;
-      watchUploadedBy(filter);
+      watchUploadedBy(filter, sender);
       raiseQueryChangeEvent(ctrl.filter.query);
 
       const defaultNonFreeFilter = storage.getJs("defaultNonFreeFilter", true);
@@ -124,7 +140,7 @@ query.controller('SearchQueryCtrl', [
           ...structuredQuery,
           orgOwnedChip
         ]);
-      } else if (!filter.orgOwned && queryHasOrgOwned) {
+      } else if (!filter.orgOwned && queryHasOrgOwned && !ctrl.usePermissionsFilter) {
         // If the checkbox is unticked, ensure chip is no longer in the search bar
         structuredQuery.splice(orgOwnedIndexInQuery, 1);
         ctrl.filter.query = renderQuery(structuredQuery);
@@ -137,6 +153,17 @@ query.controller('SearchQueryCtrl', [
       $state.go('search.results', filter);
     }
 
+    //-my uploads-
+    function selectMyUploads(myUploadsChecked) {
+      ctrl.filterMyUploads = myUploadsChecked;
+      watchSearchChange(ctrl.filter, "selectMyUploads");
+    }
+
+    ctrl.myUploadsProps = {
+      onChange: selectMyUploads
+    };
+    //-end my uploads
+
     //-sort control-
     function updateSortChips (sortSel) {
       ctrl.sortProps.selectedOption = sortSel;
@@ -153,6 +180,31 @@ query.controller('SearchQueryCtrl', [
     };
     //-end sort control-
 
+    //-permissions filter-
+    function updatePermissionsChips (permissionsSel, showChargeable) {
+      ctrl.permissionsProps.selectedOption = permissionsSel;
+      ctrl.filter.query = updateFilterChips(permissionsSel, ctrl.filter.query);
+      ctrl.filter.nonFree = showChargeable;
+      watchSearchChange(ctrl.filter, "updatePermissionsChips");
+    }
+
+    function chargeableChange (showChargeable) {
+      ctrl.filter.nonFree = showChargeable;
+      watchSearchChange(ctrl.filter, "chargeableChange");
+    }
+
+    let pfOpts = PermissionsConf.permissionsOptions();
+    let defOptVal = PermissionsConf.permissionsDefaultOpt();
+    let pfDefPerm = pfOpts.filter(opt => opt.value == defOptVal)[0];
+    ctrl.permissionsProps = { options: pfOpts,
+                              selectedOption: pfDefPerm,
+                              onSelect: updatePermissionsChips,
+                              onChargeable: chargeableChange,
+                              chargeable: ctrl.filter.nonFree ? ctrl.filter.nonFree : ($stateParams.nonFree == "true"),
+                              query: ctrl.filter.query
+                            };
+    //-end permissions filter-
+
     ctrl.resetQuery = resetQuery;
 
     // Note that this correctly uses local datetime and returns
diff --git a/kahuna/public/js/search/view.html b/kahuna/public/js/search/view.html
index 97ba42e57e..9479c76f65 100644
--- a/kahuna/public/js/search/view.html
+++ b/kahuna/public/js/search/view.html
@@ -20,6 +20,10 @@
     </gr-top-bar-actions>
 </gr-top-bar>
 
+<gr-top-bar ng-if="ctrl.usePermissionsFilter" fixed="true" role="banner" aria-label="Second top bar" style="z-index: 28;">
+    <gr-search-wrapper aria-label="Continued navigation and image search"></gr-search-wrapper>
+</gr-top-bar>
+
 <gr-panels class="search-panels" role="main" aria-label="Image search results">
     <gr-panel gr-left="true" gr-panel="ctrl.collectionsPanel" gr-icon="collections"
               gr-remember-scroll="true" role="region" aria-label="Collections">
diff --git a/kahuna/public/js/window.ts b/kahuna/public/js/window.ts
index f015022300..a4c7b0d94f 100644
--- a/kahuna/public/js/window.ts
+++ b/kahuna/public/js/window.ts
@@ -1,4 +1,5 @@
 import { FeatureSwitchData } from "./components/gr-feature-switch-panel/gr-feature-switch-panel";
+import { PermissionOption } from "./components/gr-permissions-filter/gr-permissions-filter-config";
 import { Notification } from "./components/gr-notifications-banner/gr-notifications-banner";
 
 declare global {
@@ -7,8 +8,11 @@ declare global {
         rootUri: string;
         telemetryUri: string;
         featureSwitches: Array<FeatureSwitchData>;
+        interimFilterOptions: Array<PermissionOption>;
         maybeOrgOwnedValue: string | undefined;
         announcements: Array<Notification>;
+        usePermissionsFilter: boolean;
+        permissionsDefault?: string | undefined;
       }
     }
   }
diff --git a/kahuna/public/stylesheets/main.css b/kahuna/public/stylesheets/main.css
index aedcbe8a1b..4c483effb6 100644
--- a/kahuna/public/stylesheets/main.css
+++ b/kahuna/public/stylesheets/main.css
@@ -1015,6 +1015,9 @@ textarea.ng-invalid {
     cursor: pointer;
 }
 
+.search__advanced-toggle-lbl {
+  margin-right: 6px;
+}
 
 @media screen and (max-width: 850px) {
     .search__advanced-toggle {
@@ -1392,7 +1395,7 @@ textarea.ng-invalid {
     width: 100%;
     border-bottom: 1px solid #565656;
     position: fixed;
-    z-index: 30;
+    z-index: 20;
     left: 0;
 }