diff --git a/App.tsx b/App.tsx
index 4ed5edfe521924c7ccc13078c2550bf9d660c8c3..20dbe372f13db78ee1b31490b49d781ecfc1d65f 100644
--- a/App.tsx
+++ b/App.tsx
@@ -2,6 +2,14 @@ import React from 'react';
 import { SafeAreaView, SafeAreaViewBase, ScrollView, StyleSheet, Text, View } from 'react-native';
 import PokemonsContainer from './containers/PokemonsContainer';
 import {ApolloClient, ApolloProvider, InMemoryCache} from "@apollo/client";
+import { Header } from './containers/Header';
+import {
+  RecoilRoot,
+  atom,
+  selector,
+  useRecoilState,
+  useRecoilValue,
+} from 'recoil';
 
 const App = () => {
 
@@ -11,19 +19,18 @@ const App = () => {
 });
 
   return (
-    <ApolloProvider client={client}>
-        <SafeAreaView style={{flex:1 , backgroundColor: "#1E90FFFF"}}>
-          <ScrollView>
-          <View style={styles.pokemonDiv}>
-              <PokemonsContainer />
-          </View> 
-        </ScrollView>
-        </SafeAreaView>
-      
-    </ApolloProvider>
-   
-    
-      
+    <RecoilRoot>
+      <ApolloProvider client={client}>
+          <SafeAreaView style={{flex:1 , backgroundColor: "#1E90FFFF"}}>
+            <ScrollView>
+            <View style={styles.pokemonDiv}>
+                <Header />
+                <PokemonsContainer />
+            </View> 
+          </ScrollView>
+          </SafeAreaView> 
+      </ApolloProvider>
+    </RecoilRoot>
   );
 }
 
diff --git a/atoms/atoms.ts b/atoms/atoms.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3b3aaaf568db23abbe35c5f9bfb96b5d1b44d74d
--- /dev/null
+++ b/atoms/atoms.ts
@@ -0,0 +1,16 @@
+import {atom} from "recoil";
+
+export const searchState = atom({
+    key: 'searchState', // unique ID (with respect to other atoms/selectors)
+    default: '', // default value (aka initial value)
+});
+
+export const typeState = atom({
+    key: 'typeState', // unique ID (with respect to other atoms/selectors)
+    default: '', // default value (aka initial value)
+})
+
+export const capturedFilterState = atom<boolean | null>( {
+    key: 'capturedFilterState',
+    default: null
+})
\ No newline at end of file
diff --git a/containers/Header.tsx b/containers/Header.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..6c0fa972e4caca86f5c8e383cf9d1c2098135c95
--- /dev/null
+++ b/containers/Header.tsx
@@ -0,0 +1,135 @@
+import { Select } from '@mui/material';
+import React, { useEffect } from 'react';
+import { Image, Text, StyleSheet, View, TouchableOpacity } from "react-native";
+import SelectDropdown from 'react-native-select-dropdown'
+import {SearchBar} from "./SearchBar"
+import {useRecoilState} from 'recoil'
+import { capturedFilterState, typeState } from "../atoms/atoms";
+import { maxHeight, maxWidth } from '@mui/system';
+
+export const Header = () => {
+
+    const [capturedSorting, setCapturedSorting] = useRecoilState(capturedFilterState)
+    const [type, setType] = useRecoilState(typeState)
+
+    const filterTypes = ["All", "Bug", "Dark", "Dragon", "Electric", "Fairy", "Fighting", "Fire", "Flying", "Ghost", "Grass", "Ground", "Ice", "Normal", "Poison", "Psychic", "Rock", "Steel", "Water"];
+
+    useEffect(() => {
+        console.log(capturedSorting)
+    }, [capturedSorting])
+
+    useEffect(() => {
+        console.log(type)
+    }, [type])
+
+
+    const handleCapturedChange  = (value: React.SetStateAction<string | boolean | null>) => {
+        console.log(value)
+        if (value === "All") {
+            setCapturedSorting(null);
+        } else if (value === "Captured") {
+            setCapturedSorting(true)
+        } else {
+            setCapturedSorting(false)
+        }
+    };
+
+
+    const handleTypeChange = ( value: React.SetStateAction<string>) => {
+        if (value === "All") {
+            setType("");
+        } else {
+            setType(value);
+        }
+    };
+
+    return (
+<View>
+
+{/* Image Container */}
+    <View style={styles.imgContainer}>
+        <Image style = {styles.pokemonImg} source={require("../resources/pokemonLogo.png")} />
+    </View>
+
+    {/* Search, Filtering and Sorting Container */}
+    <View style={styles.filteringSortingContainer}>
+        <Text>Types</Text>
+    <SelectDropdown
+                buttonStyle={styles.DropdownFilter}
+                defaultValue={"All"}
+                data={filterTypes}
+                onSelect={(selectedItem, index) => {
+                    handleTypeChange(selectedItem)
+                }}
+                buttonTextAfterSelection={(selectedItem, index) => {
+                    // text represented after item is selected
+                    return selectedItem
+                }}
+                rowTextForSelection={(item, index) => {
+                    // text represented for each item in dropdown
+                    return item
+                }}
+
+            />
+            <Text>Status</Text>
+            <SelectDropdown
+                buttonStyle={styles.DropdownFilter}
+                defaultValue={"All"}
+                data={["All", "Captured", "Not captured"]}
+                onSelect={(selectedItem, index) => {
+                    handleCapturedChange(selectedItem)
+                }}
+                buttonTextAfterSelection={(selectedItem, index) => {
+                    // text represented after item is selected
+                    return selectedItem
+                }}
+                rowTextForSelection={(item, index) => {
+                    // text represented for each item in dropdown
+                    return item
+                }}
+
+             />
+             <SearchBar />
+    </View>
+
+</View>
+    )
+    
+}
+
+const styles = StyleSheet.create ({
+    
+    imgContainer: {
+        flex: 1,
+        alignItems: "center",
+        paddingBottom: 15,
+        paddingTop: 5
+
+    },
+    pokemonImg: {
+        flex: 1,
+        width: 250,
+        height: 110
+
+    },
+    filteringSortingContainer: {
+        backgroundColor: "#1E90FFFF",
+        maxWidth: "100%",
+        minWidth: "85%",
+        flex: 1,
+        flexDirection: 'column',
+        alignItems: 'center'
+    },
+    DropdownFilter: {
+        marginBottom: 5,
+        borderColor: "gray",
+        borderWidth: 0.3,
+        borderRadius: 10,
+        width: 300
+    }
+})
+export default Header
+
+function typeFilter(arg0: () => void, typeFilter: any) {
+    throw new Error('Function not implemented.');
+}
diff --git a/containers/PokemonsContainer.tsx b/containers/PokemonsContainer.tsx
index 0bb903ff1a9920781f4e8f8419ea6a51dd837fe2..fba5d0ef079c824964c5744189f4a496c005f6a2 100644
--- a/containers/PokemonsContainer.tsx
+++ b/containers/PokemonsContainer.tsx
@@ -1,15 +1,20 @@
 import React, { useState } from 'react';
-import { ScrollView, StyleSheet, Text, View } from 'react-native';
+import { Alert, Button, NativeSyntheticEvent, NativeTouchEvent, ScrollView, StyleSheet, Text, View } from 'react-native';
 import PokemonCard from '../components/PokemonCard';
 import {SEARCH_POKEMONS} from '../graphql/get-pokemons';
 import {useQuery} from '@apollo/react-hooks';
 import {Pokemon} from "../types/types";
+import { useRecoilValue } from "recoil";
+import { capturedFilterState, searchState, typeState } from '../atoms/atoms';
+import { borderColor, borders } from '@mui/system';
+
 
 const PokemonsContainer = () => {
 
-    const searchText = ""
-    const typeText = ""
-    const capturedState = null
+    
+    const searchText = useRecoilValue(searchState)
+    const typeText = useRecoilValue(typeState)
+    const capturedState = useRecoilValue(capturedFilterState)
 
     const [limit, setLimit] = useState(15)
     const [skip, setSkip] = useState(0)
@@ -38,6 +43,7 @@ const PokemonsContainer = () => {
             {data.searchPokemon && data.searchPokemon.map((pokemon: Pokemon) =>
                 <PokemonCard key={pokemon.id} pokemon={pokemon}/>)
             }
+            
         </View>
  
         )
@@ -57,6 +63,7 @@ const styles = StyleSheet.create({
        
 
     },
+
 });
 
 export default PokemonsContainer
\ No newline at end of file
diff --git a/containers/SearchBar.tsx b/containers/SearchBar.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..899975ecaccffedff78902c4aaf590c66ef03079
--- /dev/null
+++ b/containers/SearchBar.tsx
@@ -0,0 +1,46 @@
+import React, { useEffect } from "react"
+import { StyleSheet, TextInput } from "react-native";
+import { useRecoilState } from "recoil";
+import { searchState } from "../atoms/atoms";
+
+export const SearchBar = () => {
+
+    
+    const [searchText, setSearchText] = useRecoilState(searchState)
+
+    const handleSearchChange = (value: React.SetStateAction<string>) => {
+        setSearchText(value)
+    };
+
+  
+
+
+    return (
+        <TextInput
+        style={styles.searchBar}
+        placeholder={"Search Pokemons"}
+        textAlign={'center'}
+        value={searchText}
+        onChangeText={(value) => handleSearchChange(value)}
+        ></TextInput>
+    )
+
+
+}
+
+const styles = StyleSheet.create({
+    searchBar: {
+        borderColor: "gray",
+        width: "50%",
+        borderWidth: 0.3,
+        borderRadius: 10,
+        padding: 10,
+        marginTop: 10,
+        marginBottom: 10,
+        backgroundColor: "#FFE",
+        height: 50
+
+    }
+})
+
+export default SearchBar
\ No newline at end of file
diff --git a/img/amund ig pb.jpg b/img/amund ig pb.jpg
deleted file mode 100644
index 7f2e3a195f6a2e78111260e3e396361b1b358efb..0000000000000000000000000000000000000000
Binary files a/img/amund ig pb.jpg and /dev/null differ
diff --git a/img/kris.PNG b/img/kris.PNG
deleted file mode 100644
index 54e4df74382b32557a408e98912e34616755dd3f..0000000000000000000000000000000000000000
Binary files a/img/kris.PNG and /dev/null differ
diff --git a/package-lock.json b/package-lock.json
index 8b912776ac3a5eb9fb46b18a8949ca08b87550e2..799caabf679a41a6255aeb48954994a458d2d091 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3979,6 +3979,11 @@
         "tslib": "^2.1.0"
       }
     },
+    "hamt_plus": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/hamt_plus/-/hamt_plus-1.0.2.tgz",
+      "integrity": "sha1-4hwlKWjH4zsg9qGwlM2FeHomVgE="
+    },
     "has": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
@@ -6019,6 +6024,11 @@
         "nullthrows": "^1.1.1"
       }
     },
+    "react-native-select-dropdown": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/react-native-select-dropdown/-/react-native-select-dropdown-1.4.0.tgz",
+      "integrity": "sha512-CeiFQ8F3lI7SAB9l/uMbGUeJmslUkyz9Vv8DHutOjO1bJpP1/Kfu9lH6QYjJ41DXFGQzT1bw8EGHe8rz/eTC/A=="
+    },
     "react-native-web": {
       "version": "0.17.1",
       "resolved": "https://registry.npmjs.org/react-native-web/-/react-native-web-0.17.1.tgz",
@@ -6089,6 +6099,14 @@
         "resolve": "^1.1.6"
       }
     },
+    "recoil": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/recoil/-/recoil-0.5.2.tgz",
+      "integrity": "sha512-Edibzpu3dbUMLy6QRg73WL8dvMl9Xqhp+kU+f2sJtXxsaXvAlxU/GcnDE8HXPkprXrhHF2e6SZozptNvjNF5fw==",
+      "requires": {
+        "hamt_plus": "1.0.2"
+      }
+    },
     "regenerate": {
       "version": "1.4.2",
       "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
diff --git a/package.json b/package.json
index b05c6a18bb4ca89360f18f9efcf499d90f3ef1a6..eb8c7f5d8a9b12b369455fc982745d78dc2a3b8f 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,8 @@
     "react": "17.0.1",
     "react-dom": "17.0.1",
     "react-native": "0.64.3",
+    "react-native-select-dropdown": "^1.4.0",
+    "recoil": "^0.5.2",
     "react-native-web": "0.17.1"
   },
   "devDependencies": {
diff --git a/resources/button.png b/resources/button.png
new file mode 100644
index 0000000000000000000000000000000000000000..6f16ee6ec71df393333bfa1efd71f1f50aacdcbe
Binary files /dev/null and b/resources/button.png differ
diff --git a/resources/pokemonLogo.png b/resources/pokemonLogo.png
new file mode 100644
index 0000000000000000000000000000000000000000..3473d17d18a72b22090a0c93d84a92ede26f34ff
Binary files /dev/null and b/resources/pokemonLogo.png differ