diff --git a/src/css/searchpage.css b/src/css/searchpage.css
index e69de29..4266c30 100644
--- a/src/css/searchpage.css
+++ b/src/css/searchpage.css
@@ -0,0 +1,72 @@
+.searchinput.MuiTextField-root {
+    background-color: var(--secondary-component-color);
+    border-color: var(--secondary-background-color);
+    display: flex;
+    width: min(30rem, calc(100% - 5rem));
+    margin: 0;
+}
+
+.searchinput .MuiOutlinedInput-root {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+}
+
+.searchinput .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline,
+.searchinput .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline,
+.searchinput .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
+    border-color: var(--secondary-background-color);
+}
+
+.searchbar {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0;
+}
+
+.filterbutton {
+    background-color: var(--primary-component-color);
+    border: 1px solid var(--secondary-background-color);
+    border-left: 0;
+    border-radius: 0 4px 4px 0;
+    height: 56px;
+    padding: 0 1rem;
+}
+
+.filterbutton.is-active,
+.filterbutton:active {
+    background-color: var(--secondary-background-color);
+}
+
+.filtersection {
+    box-sizing: border-box;
+    display: flex;
+    flex-wrap: wrap;
+    border: 1px;
+    align-self: center;
+    justify-content: center;
+    gap: 0.5rem;
+    border-top: 0;
+    border-color: var(--secondary-background-color);
+    border-style: solid;
+    width: min(30rem, calc(100% - 5rem));
+    padding: 1rem;
+}
+
+.filtersection .MuiButtonGroup-root {
+    gap: 0.5rem;
+}
+
+.filtersection .MuiButtonGroup-root .MuiButtonGroup-grouped {
+    border: 1px solid var(--secondary-background-color);
+    border-radius: 4px;
+}
+
+.filtersection .MuiButtonGroup-root .MuiButtonGroup-grouped:not(:last-of-type) {
+    border-right: 1px solid var(--secondary-background-color);
+}
+
+.filtersection .MuiButton-root.is-active {
+    background-color: var(--secondary-background-color);
+    color: var(--primary-background-color);
+}
\ No newline at end of file
diff --git a/src/pages/searchpage.tsx b/src/pages/searchpage.tsx
index 67315d2..9ebe771 100644
--- a/src/pages/searchpage.tsx
+++ b/src/pages/searchpage.tsx
@@ -1,9 +1,78 @@
 import '../css/searchpage.css'
+import Header from "../components/header";
+import Footer from "../components/footer";
+import { TextField, Button, ButtonGroup } from '@mui/material';
+import { Funnel } from 'lucide-react';
+import { useState } from 'react';
+
 
 export function SearchPage() {
+    const [isFilterActive, setIsFilterActive] = useState(false)
+    const [activeSortingButton, setActiveSortingButton] = useState<number | null>(null)
+    const [activeFilterButton, setActiveFilterButton] = useState<number | null>(null)
+
+    const sortingbuttons = ["Sorting", "Sorting", "Sorting"]
+    const filterbuttons = ["Filter", "Filter", "Filter"]
+
+    const toggleActive = () => setIsFilterActive((isActive) => !isActive)
+    const toggleSortingButton = (index: number) => {
+        setActiveSortingButton((activeIndex) => activeIndex === index ? null : index)
+    }
+    const toggleFilterButton = (index: number) => {
+        setActiveFilterButton((activeIndex) => activeIndex === index ? null : index)
+    }
+
     return (
-        <div>
+        <div className='page-shell'>
+            <Header />
+
             <h1>Searchpage</h1>
+
+            <div className='searchbar'>
+                <TextField className="searchinput" placeholder='Search here or use filter' />
+                <button
+                    type="button"
+                    className={`filterbutton${isFilterActive ? ' is-active' : ''}`}
+                    aria-label="Toggle filters"
+                    aria-pressed={isFilterActive}
+                    onClick={toggleActive}
+                >
+                    <Funnel aria-hidden="true" />
+                </button>
+            </div>
+
+            {isFilterActive && (
+                <div className='filtersection'>
+                    <ButtonGroup>
+                        <p>Sort by: </p>
+                        {sortingbuttons.map((button, index) => (
+                            <Button
+                                key={`${button}-${index}`}
+                                className={activeSortingButton === index ? 'is-active' : ''}
+                                aria-pressed={activeSortingButton === index}
+                                onClick={() => toggleSortingButton(index)}
+                            >
+                                {button}
+                            </Button>
+                        ))}
+                    </ButtonGroup>
+
+                    <ButtonGroup>
+                        <p>Filter by: </p>
+                        {filterbuttons.map((button, index) => (
+                            <Button
+                                key={`${button}-${index}`}
+                                className={activeFilterButton === index ? 'is-active' : ''}
+                                aria-pressed={activeFilterButton === index}
+                                onClick={() => toggleFilterButton(index)}
+                            >
+                                {button}
+                            </Button>
+                        ))}
+                    </ButtonGroup>
+                </div>
+            )}
+            <Footer />
         </div>
     )
 }