diff --git a/samples/musicfestival-frontend-react/src/App.css b/samples/musicfestival-frontend-react/src/App.css
index 08e241e..b4ae768 100644
--- a/samples/musicfestival-frontend-react/src/App.css
+++ b/samples/musicfestival-frontend-react/src/App.css
@@ -4008,6 +4008,14 @@ input.search-input::placeholder {
   cursor: pointer;
 }
 
+.facet-item{
+  margin-bottom: 5px;
+}
+
+.facet-item b{
+  float: right;
+}
+
 .search-zone{
   display: inline-block;
   width: 55%;
diff --git a/samples/musicfestival-frontend-react/src/components/SearchButton.tsx b/samples/musicfestival-frontend-react/src/components/SearchButton.tsx
index ac318a5..2f800a6 100644
--- a/samples/musicfestival-frontend-react/src/components/SearchButton.tsx
+++ b/samples/musicfestival-frontend-react/src/components/SearchButton.tsx
@@ -4,27 +4,26 @@ import { ArtistAutocompleteQuery, useArtistAutocompleteQuery } from "../generate
 import { generateGQLSearchQueryVars } from "../helpers/queryCacheHelper";
 import { isEditOrPreviewMode } from "../helpers/urlHelper";
 
-const singleKeyUrl = process.env.REACT_APP_CONTENT_GRAPH_GATEWAY_URL as string
-
 type CustomString = string | number | readonly string[] | undefined
 
-function SearchButton(): JSX.Element {
+function SearchButton({filterValue}: any): JSX.Element {
+    const singleKeyUrl = process.env.REACT_APP_CONTENT_GRAPH_GATEWAY_URL as string
+    const ARTIST = "Artist"
     const [searchParams] = useSearchParams()
     const [token, setToken] = useState("")
     const [isShown, setIsShown] = useState(false)
-    const [searchValue, setSearchValue] = useState<CustomString>(searchParams.get("q")?.toString())
-    const [orderBy, setOrderBy] = useState("ASC")
-    let variables: any = generateGQLSearchQueryVars(token, window.location.pathname, searchValue as string | null, orderBy);
-    const modeEdit = isEditOrPreviewMode()
-    let stringArr: (string | null)[] = []
-
+    const [searchValue, setSearchValue] = useState<CustomString>(searchParams.get("q")?.toString() ?? "")
+    const [orderBy] = useState("ASC")
     let autocompleteData : ArtistAutocompleteQuery | undefined = undefined
+    
+    let modeEdit = isEditOrPreviewMode()
+    let variables = generateGQLSearchQueryVars(token, window.location.pathname, searchValue as string | null, orderBy);
     const { data : artistAutocompleteData } = useArtistAutocompleteQuery({ endpoint: singleKeyUrl }, variables, { staleTime: 2000, enabled: !modeEdit || !!token })
     autocompleteData = artistAutocompleteData
     
     function search(event: any, action: string){
         if ((action == "keypress" && event.charCode === 13) || action == "buttonclick") {
-            window.location.href = `${window.location.origin}/search?q=${searchValue}`
+            window.location.href = `${window.location.origin}/search?q=${searchValue}&f=${filterValue ?? ARTIST}`
         }
     }
 
@@ -35,7 +34,7 @@ function SearchButton(): JSX.Element {
 
     function onAutoClick(event: any){
         setSearchValue(event.target.textContent);
-        window.location.href = `${window.location.origin}/search?q=${event.target.textContent}`
+        window.location.href = `${window.location.origin}/search?q=${event.target.textContent}&f=${filterValue ?? ARTIST}`
     }
 
     return (
@@ -59,16 +58,16 @@ function SearchButton(): JSX.Element {
                     </a>
                 <div className="autocomplete-block" style={isShown ? {display: "inherit"}: {display: "none"}}>
                     {
-                        autocompleteData?.ArtistDetailsPage?.autocomplete?.ArtistName?.map((name) => {
+                        autocompleteData?.ArtistDetailsPage?.autocomplete?.ArtistName?.map((name, idx) => {
                             return(
-                                <div key={name} onClick={(event) => onAutoClick(event)}>{name}</div>
+                                <div key={idx} onClick={(event) => onAutoClick(event)}>{name}</div>
                             )
                         })                    
                     }
                     {
-                        autocompleteData?.ArtistDetailsPage?.autocomplete?.StageName?.map((name) => {
+                        autocompleteData?.ArtistDetailsPage?.autocomplete?.StageName?.map((name, idx) => {
                             return(
-                                <div key={name} onClick={(event) => onAutoClick(event)}>{name}</div>
+                                <div key={idx} onClick={(event) => onAutoClick(event)}>{name}</div>
                             )
                         })
                     }
diff --git a/samples/musicfestival-frontend-react/src/pages/SearchPage.tsx b/samples/musicfestival-frontend-react/src/pages/SearchPage.tsx
index 511b946..255e603 100644
--- a/samples/musicfestival-frontend-react/src/pages/SearchPage.tsx
+++ b/samples/musicfestival-frontend-react/src/pages/SearchPage.tsx
@@ -8,51 +8,43 @@ import { generateGQLSearchQueryVars } from "../helpers/queryCacheHelper";
 import { getImageUrl, isEditOrPreviewMode } from "../helpers/urlHelper";
 import ReactPaginate from 'react-paginate';
 
-const singleKeyUrl = process.env.REACT_APP_CONTENT_GRAPH_GATEWAY_URL as string
-
 function SearchPage() {
+    const singleKeyUrl = process.env.REACT_APP_CONTENT_GRAPH_GATEWAY_URL as string
+    const ARTIST = "Artist"
+    const OTHERCONTENT = "OtherContent"
+    const options: string[] = ["ASC", "DESC"]
+    const itemsPerPageOptions: number[] = [10, 15]
+    const filterByOption: {value: string; key: string}[] = [
+        {value: "Artists", key: ARTIST},
+        {value: "Other Content", key: OTHERCONTENT}
+    ]
+
     const [token, setToken] = useState("")
     const [itemOffset, setItemOffset] = useState(0)
     const [otherItemOffset, setOtherItemOffset] = useState(0)
     const [itemsPerPage, setItemsPerPage] = useState(10)
     const [otherItemsPerPage, setOtherItemsPerPage] = useState(10)
-    const [filterBy, setFilterBy] = useState("Artist")
     const [orderBy, setOrderBy] = useState("ASC")
     const [searchParams] = useSearchParams()
-    const endOffset = itemOffset + itemsPerPage;
-    const endOffsetOther = otherItemOffset + otherItemsPerPage;
-    const modeEdit = isEditOrPreviewMode()
-    let data: ArtistSearchQuery | undefined = undefined
+    let queryString = searchParams.get("q") ?? ""
+    let filterQueryString = searchParams.get("f") ?? ""
+    const [filterBy, setFilterBy] = useState(filterQueryString ?? ARTIST)
+    
+    let artistData: ArtistSearchQuery | undefined = undefined
     let otherData: OtherContentSearchQuery | undefined = undefined
     let autocompleteData : ArtistAutocompleteQuery | undefined = undefined
-    let queryString: string | null
     let resultNumber : number
     let otherResultNumber : number
-    let variables: any
-    let options: {value: string; key: string}[] = [
-        {value: "ASC", key: "ASC"},
-        {value: "DESC", key: "DESC"}
-    ]
-    let itemsPerPageOptions: {value: number; key: string}[] = [
-        {value: 10, key: "10"},
-        {value: 15, key: "15"}
-    ]
-    let filterByOption: {value: string; key: string}[] = [
-        {value: "Artists", key: "Artist"},
-        {value: "Other Content", key: "OtherContent"}
-    ]
-
-    queryString = searchParams.get("q")
-    if(queryString === undefined || queryString == 'undefined'){
-        queryString = ""
-    }
-
-    variables = generateGQLSearchQueryVars(token, window.location.pathname, queryString, orderBy);
+    
+    let modeEdit = isEditOrPreviewMode()
+    let variables = generateGQLSearchQueryVars(token, window.location.pathname, queryString, orderBy);
+    let endOffset = itemOffset + itemsPerPage
+    let endOffsetOther = otherItemOffset + otherItemsPerPage
 
     const { data : searchQueryData } = useArtistSearchQuery({ endpoint: singleKeyUrl }, variables, { staleTime: 2000, enabled: !modeEdit || !!token });
-    data = searchQueryData
-    resultNumber = data?.ArtistDetailsPage?.items?.length ?? 0
-    const currentItems = data?.ArtistDetailsPage?.items?.slice(itemOffset, endOffset);
+    artistData = searchQueryData
+    resultNumber = artistData?.ArtistDetailsPage?.items?.length ?? 0
+    const currentItems = artistData?.ArtistDetailsPage?.items?.slice(itemOffset, endOffset);
     const pageCount = Math.ceil(resultNumber / itemsPerPage);
 
     const { data : otherContentSearchQueryData } = useOtherContentSearchQuery({ endpoint: singleKeyUrl }, variables, { staleTime: 2000, enabled: !modeEdit || !!token });
@@ -82,8 +74,8 @@ function SearchPage() {
         setOtherItemsPerPage(event.target.value);
     };
 
-    const handleFilterByChange = (event: any) => {
-        setFilterBy(event.target.value);
+    const handleFilterByChange = (event : any) => {
+        setFilterBy(event.target.value)
     };
 
     const handleChange = (event: any) => {
@@ -91,7 +83,7 @@ function SearchPage() {
     }
 
     const handleFacetClick = (event: any) => {
-        window.location.href = `${window.location.origin}/search?q=${event.target.innerText}`
+        window.location.href = `${window.location.origin}/search?q=${event.target.innerText}&f=${filterBy}`
     }
 
     return (
@@ -105,11 +97,11 @@ function SearchPage() {
                 </div>
                 <div className="search-zone">
                     <div style={{float: "left"}}>
-                        <SearchButton />
+                        <SearchButton filterValue={filterBy}/>
                     </div>
                     <div style={{float: "right"}}>
                         <span>Search by: </span>
-                        <select className="Button" onChange={handleFilterByChange}>
+                        <select value={filterBy} className="Button" onChange={handleFilterByChange}>
                             {
                                 filterByOption.map((option) => {
                                     return (
@@ -123,49 +115,46 @@ function SearchPage() {
                 <div className="search-panel">
                     <div className="left-panel">
                         <b>Filter by: </b>
-                        <div className="facets" style={filterBy == "Artist" ? {display: "inherit"}: {display: "none"}}>
+                        <div className="facets" style={filterBy == ARTIST ? {display: "inherit"}: {display: "none"}}>
                             <b>Artist Name: </b>
                             {
-                                data?.ArtistDetailsPage?.facets?.ArtistName?.map((artist) => {
+                                artistData?.ArtistDetailsPage?.facets?.ArtistName?.map((artist, idx) => {
                                     return (
-                                        <div>
+                                        <div key={idx} className="facet-item">
                                             <a key={artist?.name} onClick={(event) => handleFacetClick(event)}>
-                                                <span>{artist?.name}</span>
-                                                &nbsp;
-                                                <b>({artist?.count})</b>
+                                                <span>{artist?.name}</span>                                                                         
                                             </a>
+                                            <b>{artist?.count}</b>
                                         </div>
                                     )
                                 })
                             }
                         </div>
-                        <div className="facets" style={filterBy == "Artist" ? {display: "inherit"}: {display: "none"}}>
+                        <div className="facets" style={filterBy == ARTIST ? {display: "inherit"}: {display: "none"}}>
                             <b>Stage Name: </b>
                             {
-                                data?.ArtistDetailsPage?.facets?.StageName?.map((artist) => {
+                                artistData?.ArtistDetailsPage?.facets?.StageName?.map((artist, idx) => {
                                     return (
-                                        <div>
+                                        <div key={idx} className="facet-item">
                                             <a key={artist?.name} onClick={(event) => handleFacetClick(event)}>
-                                                <span>{artist?.name}</span>
-                                                &nbsp;
-                                                <b>({artist?.count})</b>
+                                                <span>{artist?.name}</span>                                            
                                             </a>
+                                            <b>{artist?.count}</b>
                                         </div>
                                     )
                                 })
                             }
                         </div>
-                        <div className="facets" style={filterBy == "OtherContent" ? {display: "inherit"}: {display: "none"}}>
+                        <div className="facets" style={filterBy == OTHERCONTENT ? {display: "inherit"}: {display: "none"}}>
                             <b>Content: </b>
                             {
-                                otherData?.Content?.facets?.Name?.map((content) => {
+                                otherData?.Content?.facets?.Name?.map((content, idx) => {
                                     return (
-                                        <div>
+                                        <div key={idx} className="facet-item">
                                             <a key={content?.name} onClick={(event) => handleFacetClick(event)}>
                                                 <span>{content?.name}</span>
-                                                &nbsp;
-                                                <b>({content?.count})</b>
                                             </a>
+                                            <b>{content?.count}</b>
                                         </div>
                                     )
                                 })
@@ -174,22 +163,22 @@ function SearchPage() {
                     </div>
                     <div className="right-panel">
                         <div className="search-description">
-                            <h6>Your search for <span className="search-term">{queryString}</span> resulted in <span className="search-term">{filterBy == "Artist" ? resultNumber : otherResultNumber}</span> hits</h6>                            
+                            <h6>Your search for <span className="search-term">{queryString}</span> resulted in <span className="search-term">{filterBy == ARTIST ? resultNumber : otherResultNumber}</span> hits</h6>                            
                         </div>
                         <div className="search-sorting">
                             <span>Sort: </span>
                             <select onChange={e => handleChange(e)} className="Button">
                                 {
-                                    options.map((option) => {
+                                    options.map((value, idx) => {
                                         return (
-                                            <option key={option.key} value={option.key}>{option.value}</option>
+                                            <option key={idx} value={value}>{value}</option>
                                         )
                                     })
                                 }
                             </select>
                         </div>
                         <div className="result-block">
-                            <div style={filterBy == "Artist" ? {display: "initial"}: {display: "none"}}>
+                            <div style={filterBy == ARTIST ? {display: "initial"}: {display: "none"}}>
                                 <div className="search-results">
                                     {
                                         currentItems?.map((content, idx) => {
@@ -249,9 +238,9 @@ function SearchPage() {
                                                 <span>Items per page: </span>
                                                 <select className="Button" onChange={handleItemsChange}>
                                                     {
-                                                        itemsPerPageOptions.map((option) => {
+                                                        itemsPerPageOptions.map((option, idx) => {
                                                             return (
-                                                                <option key={option.key} value={option.key}>{option.value}</option>
+                                                                <option key={idx} value={option}>{option}</option>
                                                             )
                                                         })
                                                     }
@@ -273,7 +262,7 @@ function SearchPage() {
                                     </table>
                                 </div>
                             </div>
-                            <div style={filterBy == "OtherContent" ? {display: "initial"}: {display: "none"}}>
+                            <div style={filterBy == OTHERCONTENT ? {display: "initial"}: {display: "none"}}>
                                 <div className="search-results">
                                     {
                                         currentOtherItems?.map((content, idx) => {
@@ -304,9 +293,9 @@ function SearchPage() {
                                                 <span>Items per page: </span>
                                                 <select className="Button" onChange={handleOtherItemsChange}>
                                                     {
-                                                        itemsPerPageOptions.map((option) => {
+                                                        itemsPerPageOptions.map((option, idx) => {
                                                             return (
-                                                                <option key={option.key} value={option.key}>{option.value}</option>
+                                                                <option key={idx} value={option}>{option}</option>
                                                             )
                                                         })
                                                     }