diff --git a/package.json b/package.json
index 2edc88965..45363e073 100755
--- a/package.json
+++ b/package.json
@@ -18,9 +18,11 @@
     "@emotion/styled": "^11.10.4",
     "@hot-loader/react-dom": "^17.0.2",
     "framer-motion": "6.2.4",
+    "js-cookie": "^3.0.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-hot-loader": "^4.13.0"
+    "react-hot-loader": "^4.13.0",
+    "react-select": "^5.6.1"
   },
   "devDependencies": {
     "@babel/core": "^7.17.0",
@@ -28,6 +30,7 @@
     "@babel/preset-env": "^7.16.11",
     "@babel/preset-react": "^7.16.7",
     "@types/chrome": "^0.0.177",
+    "@types/js-cookie": "^3.0.2",
     "@types/react": "^17.0.39",
     "@types/react-dom": "^17.0.11",
     "babel-eslint": "^10.1.0",
@@ -57,4 +60,4 @@
     "webpack-cli": "^4.9.2",
     "webpack-dev-server": "^4.7.4"
   }
-}
\ No newline at end of file
+}
diff --git a/src/manifest.json b/src/manifest.json
index 730ffeec2..cb96cb365 100755
--- a/src/manifest.json
+++ b/src/manifest.json
@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
-  "name": "Takeoff",
-  "description": "A chrome extension that will help you to takeoff from your current tab to a new tab.",
+  "name": "Happy Tabs",
+  "description": "A chrome extension that will turn that frown upside down! :)",
   "options_page": "options.html",
   "background": {
     "service_worker": "background.bundle.js"
@@ -16,6 +16,10 @@
   "icons": {
     "128": "icon-128.png"
   },
+  "permissions": [
+    "identity",
+    "identity.email"
+  ],
   "content_scripts": [
     {
       "matches": [
diff --git a/src/pages/Components/user-selection.tsx b/src/pages/Components/user-selection.tsx
new file mode 100644
index 000000000..8a667640c
--- /dev/null
+++ b/src/pages/Components/user-selection.tsx
@@ -0,0 +1,94 @@
+import { Flex, Text } from "@chakra-ui/react";
+import React, { useEffect, useState } from "react";
+import Select from 'react-select';
+import { getItem, setItem } from "../Utils/storage";
+
+const options = [
+    { value: 'chocolate', label: 'Chocolate' },
+    { value: 'strawberry', label: 'Strawberry' },
+    { value: 'mint', label: 'Mint' },
+    { value: 'peach', label: 'Peach' },
+    { value: 'vanilla', label: 'Vanilla' },
+    { value: 'caramel', label: 'Caramel' },
+    { value: 'coffee', label: 'Coffee' },
+    { value: 'raspberry', label: 'Raspberry' },
+    { value: 'lemon', label: 'Lemon' },
+    { value: 'lime', label: 'Lime' },
+    { value: 'orange', label: 'Orange' },
+    { value: 'watermelon', label: 'Watermelon' },
+    { value: 'grape', label: 'Grape' },
+];
+
+type Option = {
+    value: string;
+    label: string;
+}
+
+export const UserSelection = ({ width, email, userId, isLoading, selections }: { width: number; email?: string; userId: string; selections?: Option[]; isLoading?: boolean; }) => {
+    const [selected, setSelected] = useState<Option[]>((selections || []) as Option[]);
+    const [loading, setLoading] = useState(true);
+
+    const text = `Hello${email ? `, ${email.split('@')[0]}` : ' Sexy'}!`;
+
+    useEffect(() => {
+        const setItems = async () => {
+            if (selected.length > 0) {
+                await setItem('user-selection', JSON.stringify({ [userId]: selected.map((e) => e.value) }));
+            }
+        }
+        setItems();
+    }, [selected, userId]);
+
+    useEffect(() => {
+        if (!userId) return;
+        const getItems = async () => {
+            const results = await getItem('user-selection');
+            if (results) {
+                const parsed = JSON.parse(results as unknown as string);
+                Object.keys(parsed)?.includes(userId) ? setSelected(parsed[userId].map((e: string) => ({ value: e, label: e }))) : setSelected([]);
+
+            }
+            setLoading(false)
+        }
+        getItems();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [userId]);
+
+    if (loading || isLoading) {
+        return (
+            <Flex w={width} h={width} bg="white" justify="center" align="center">
+                <Text>Loading...</Text>
+            </Flex>
+        )
+    }
+
+    return (
+        <Flex flex={1} direction="column">
+            <Flex justify="center" pt={20} w="100%">
+                <Text m={0}>{text}</Text>
+            </Flex>
+            <Select
+                styles={{
+                    control: (baseStyles, state) => {
+                        return {
+                            ...baseStyles,
+                            width: `${width}px`,
+                            // can customise styles to be like theme!
+                            //borderColor: state.isFocused ? 'grey' : 'red',
+                        }
+                    },
+                }}
+                isMulti
+                name="colors"
+                options={options}
+                value={selected}
+                onChange={(val) => {
+                    setSelected([...val] as Option[])
+                }}
+                className="basic-multi-select"
+                classNamePrefix="select"
+            />
+        </Flex>
+    );
+};
+
diff --git a/src/pages/Newtab/Newtab.jsx b/src/pages/Newtab/Newtab.jsx
index 02da1245b..20c99da2d 100644
--- a/src/pages/Newtab/Newtab.jsx
+++ b/src/pages/Newtab/Newtab.jsx
@@ -1,29 +1,116 @@
 import React from 'react';
-import logo from '../../assets/img/logo.svg';
-import './Newtab.css';
-import './Newtab.scss';
-import { Text } from '@chakra-ui/react'
-const Newtab = () => {
+import { ChakraProvider, Flex, Text, Box, Image } from '@chakra-ui/react';
+
+const pageData = {
+  name: 'Eddie',
+  news: {
+    headline: 'Pink dolphins repopulate Hong Kong waters',
+    story:
+      'The coronavirus pandemic has had a major impact on cruise and ferry industries worldwide. In Hong Kong, high-speed ferries were temporarily shut down since the start of the pandemic. Shortly after the waters settled in lockdown, large populations of dolphins returned to Hong Kong waters due to the quieter environment.',
+  },
+  backgroundImage:
+    'https://blog.padi.com/wp-content/uploads/2017/02/shutterstock_164233874.jpg',
+  factOrTip: {
+    title: 'Top tip: Reduce, reuse, and recycle',
+    text: 'Cut down on what you throw away. Follow the three Rs to conserve natural resources and landfill space.',
+  },
+  helpfulSite: {
+    link: 'https://www.websitecarbon.com/',
+    title: 'You might also like...',
+    text: 'Website Carbon Calculator',
+  },
+};
+
+const Card = ({ cardHeader, cardText, link, marginLeft }) => {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <Text fontSize='20px' color='white'>
-          Edit <code>src/pages/Newtab/Newtab.js</code> and save to reload.
+    <Flex
+      direction="column"
+      w={{ base: '100%', md: '250px', lg: '310px' }}
+      height={{ base: 'auto', md: '300px' }}
+      bg="white"
+      opacity="0.6"
+      borderRadius="2xl"
+      padding={6}
+      marginLeft={{ base: 0, md: marginLeft }}
+      marginBottom={{ base: 4, md: 0 }}
+    >
+      <Box opacity="1">
+        <Text
+          fontSize="24px"
+          fontWeight="bold"
+          color="blue.900"
+          lineHeight="30px"
+          pb={4}
+        >
+          {cardHeader}
         </Text>
-        <Text fontSize='50px' color='tomato'>
-          PLANES
+
+        {link ? (
+          <a href={link}>
+            <Text fontSize="16px" color="blue.900" textDecoration="underline">
+              {cardText}
+            </Text>
+          </a>
+        ) : (
+          <Text fontSize="16px" color="blue.900">
+            {cardText}
+          </Text>
+        )}
+      </Box>
+    </Flex>
+  );
+};
+
+const Newtab = () => {
+  const [email, setEmail] = React.useState('');
+  chrome.identity.getProfileUserInfo({ accountStatus: 'ANY' }, function (info) {
+    console.log('ppppp', info)
+    if (info.email) {
+      setEmail(info.email)
+    }
+  });
+
+  const text = `Hello${email ? `, ${email}` : ''}!`;
+  return (
+    <ChakraProvider>
+      <Box className="App" position="relative">
+        <Text
+          fontSize="40px"
+          color="blue.900"
+          position="absolute"
+          top={8}
+          left={16}
+        >
+          Hello {pageData.name}
         </Text>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
+        <Flex bgColor="blue.50" flex={1} width="100vw" height="100vh">
+          <Image src={pageData.backgroundImage} alt="background" />
+        </Flex>
+        <Flex
+          position="absolute"
+          bottom={0}
+          px={16}
+          py={8}
+          direction={{ base: 'column', md: 'row' }}
         >
-          Learn React!
-        </a>
-      </header>
-    </div>
+          <Card
+            cardHeader={pageData.news.headline}
+            cardText={pageData.news.story}
+          />
+          <Card
+            marginLeft={4}
+            cardHeader={pageData.factOrTip.title}
+            cardText={pageData.factOrTip.text}
+          />
+          <Card
+            marginLeft={4}
+            cardHeader={pageData.helpfulSite.title}
+            cardText={pageData.helpfulSite.text}
+            link={pageData.helpfulSite.link}
+          />
+        </Flex>
+      </Box>
+    </ChakraProvider>
   );
 };
 
diff --git a/src/pages/Popup/Popup.css b/src/pages/Popup/Popup.css
deleted file mode 100644
index e7ce47687..000000000
--- a/src/pages/Popup/Popup.css
+++ /dev/null
@@ -1,45 +0,0 @@
-.App {
-  position: absolute;
-  top: 0px;
-  bottom: 0px;
-  left: 0px;
-  right: 0px;
-  text-align: center;
-  height: 100%;
-  padding: 10px;
-  background-color: #282c34;
-}
-
-.App-logo {
-  height: 30vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
diff --git a/src/pages/Popup/Popup.jsx b/src/pages/Popup/Popup.jsx
deleted file mode 100644
index df1684b13..000000000
--- a/src/pages/Popup/Popup.jsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import React from 'react';
-import logo from '../../assets/img/logo.svg';
-import './Popup.css';
-import { Text } from '@chakra-ui/react'
-
-const Popup = () => {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <Text fontSize='10px' color='white'>
-          Edit <code>src/pages/Popup/Popup.js</code> and save to reload.
-        </Text>
-        <Text fontSize='20px' color='tomato'>
-          PLANES
-        </Text>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React!
-        </a>
-      </header>
-    </div>
-  );
-};
-
-export default Popup;
diff --git a/src/pages/Popup/Popup.tsx b/src/pages/Popup/Popup.tsx
new file mode 100644
index 000000000..f073c4edf
--- /dev/null
+++ b/src/pages/Popup/Popup.tsx
@@ -0,0 +1,37 @@
+import React, { useEffect } from 'react';
+
+
+import { Flex } from '@chakra-ui/react'
+import { UserSelection } from '../Components/user-selection';
+
+const Newtab = () => {
+  const [user, setUser] = React.useState<{ id: string, email: string } | undefined>(undefined);
+
+  useEffect(() => {
+    chrome.identity.getProfileUserInfo({ accountStatus: 'ANY' as any }, function (info) {
+      if (info.email) {
+        setUser(info)
+      }
+    });
+  }, []);
+  // TODO add to theme!
+  const popUpDimensions = 300;
+
+  return (
+    <Flex maxWidth={popUpDimensions} maxHeight={popUpDimensions} overflow="scroll">
+      <Flex justify="center" direction="column" flex={1}>
+        <Flex justify="center" direction="row">
+          <Flex w={popUpDimensions} h={popUpDimensions} bg="red" justify="center">
+
+            <Flex bg="white" flex={1} p={20}>
+
+              <UserSelection email={user?.email} width={popUpDimensions * 0.8} userId={user?.id || 'logged-out-user'} />
+            </Flex>
+          </Flex>
+        </Flex>
+      </Flex>
+    </Flex>
+  );
+};
+
+export default Newtab;
diff --git a/src/pages/Utils/storage.ts b/src/pages/Utils/storage.ts
new file mode 100644
index 000000000..a16f3c404
--- /dev/null
+++ b/src/pages/Utils/storage.ts
@@ -0,0 +1,29 @@
+import Cookies from 'js-cookie';
+
+const path = '/';
+
+const set = (name: string, value: string) => {
+    // if expires === undefined the cookie will delete on closing window
+    Cookies.set(name, value, { expires: 365, path });
+};
+const get = (name: string) => {
+    const allCookies = Cookies.get();
+    console.log('allCookies', Object.keys(allCookies))
+    if (allCookies[name]) return allCookies[name];
+    return null;
+};
+const del = (name: string) => {
+    Cookies.remove(name, { path });
+};
+const setItem = async (key: string, value: string | null) => {
+    if (!value) {
+        del(key);
+        return;
+    }
+    set(key, value);
+};
+
+const getItem = async (key: string) => {
+    return get(key);
+};
+export { getItem, setItem };
diff --git a/src/theme/theme.tsx b/src/theme/theme.tsx
new file mode 100644
index 000000000..56843dfe2
--- /dev/null
+++ b/src/theme/theme.tsx
@@ -0,0 +1,20 @@
+import { extendTheme } from '@chakra-ui/react';
+
+export const theme = extendTheme({
+  colors: {
+    blue: {
+      50: '#5fccff',
+      900: '#454d66',
+    },
+    purple: {
+      50: '#d09cff',
+    },
+    green: {
+      50: '#9ae270',
+    },
+    yellow: {
+      50: '#ffe770',
+    },
+    transparentWhite: 'rgba(255,0,0,0.1)',
+  },
+});
diff --git a/yarn.lock b/yarn.lock
index 2effd9900..55a8ccd01 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1008,6 +1008,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.12.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.7":
+  version "7.20.6"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.20.6.tgz#facf4879bfed9b5326326273a64220f099b0fce3"
+  integrity sha512-Q+8MqP7TiHMWzSfwiJwXCjyf4GYA4Dgw3emg/7xmwsdLJOZUp+nMqcOwOzzYheuM1rhDu8FSj2l0aoMygEuXuA==
+  dependencies:
+    regenerator-runtime "^0.13.11"
+
 "@babel/template@^7.18.10":
   version "7.18.10"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.18.10.tgz#6f9134835970d1dbf0835c0d100c9f38de0c5e71"
@@ -1620,6 +1627,24 @@
     source-map "^0.5.7"
     stylis "4.0.13"
 
+"@emotion/babel-plugin@^11.10.5":
+  version "11.10.5"
+  resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.10.5.tgz#65fa6e1790ddc9e23cc22658a4c5dea423c55c3c"
+  integrity sha512-xE7/hyLHJac7D2Ve9dKroBBZqBT7WuPQmWcq7HSGb84sUuP4mlOWoB8dvVfD9yk5DHkU1m6RW7xSoDtnQHNQeA==
+  dependencies:
+    "@babel/helper-module-imports" "^7.16.7"
+    "@babel/plugin-syntax-jsx" "^7.17.12"
+    "@babel/runtime" "^7.18.3"
+    "@emotion/hash" "^0.9.0"
+    "@emotion/memoize" "^0.8.0"
+    "@emotion/serialize" "^1.1.1"
+    babel-plugin-macros "^3.1.0"
+    convert-source-map "^1.5.0"
+    escape-string-regexp "^4.0.0"
+    find-root "^1.1.0"
+    source-map "^0.5.7"
+    stylis "4.1.3"
+
 "@emotion/cache@^11.10.0":
   version "11.10.3"
   resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.10.3.tgz#c4f67904fad10c945fea5165c3a5a0583c164b87"
@@ -1631,6 +1656,17 @@
     "@emotion/weak-memoize" "^0.3.0"
     stylis "4.0.13"
 
+"@emotion/cache@^11.10.5", "@emotion/cache@^11.4.0":
+  version "11.10.5"
+  resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.10.5.tgz#c142da9351f94e47527ed458f7bbbbe40bb13c12"
+  integrity sha512-dGYHWyzTdmK+f2+EnIGBpkz1lKc4Zbj2KHd4cX3Wi8/OWr5pKslNjc3yABKH4adRGCvSX4VDC0i04mrrq0aiRA==
+  dependencies:
+    "@emotion/memoize" "^0.8.0"
+    "@emotion/sheet" "^1.2.1"
+    "@emotion/utils" "^1.2.0"
+    "@emotion/weak-memoize" "^0.3.0"
+    stylis "4.1.3"
+
 "@emotion/hash@^0.9.0":
   version "0.9.0"
   resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.9.0.tgz#c5153d50401ee3c027a57a177bc269b16d889cb7"
@@ -1674,6 +1710,20 @@
     "@emotion/weak-memoize" "^0.3.0"
     hoist-non-react-statics "^3.3.1"
 
+"@emotion/react@^11.8.1":
+  version "11.10.5"
+  resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.10.5.tgz#95fff612a5de1efa9c0d535384d3cfa115fe175d"
+  integrity sha512-TZs6235tCJ/7iF6/rvTaOH4oxQg2gMAcdHemjwLKIjKz4rRuYe1HJ2TQJKnAcRAfOUDdU8XoDadCe1rl72iv8A==
+  dependencies:
+    "@babel/runtime" "^7.18.3"
+    "@emotion/babel-plugin" "^11.10.5"
+    "@emotion/cache" "^11.10.5"
+    "@emotion/serialize" "^1.1.1"
+    "@emotion/use-insertion-effect-with-fallbacks" "^1.0.0"
+    "@emotion/utils" "^1.2.0"
+    "@emotion/weak-memoize" "^0.3.0"
+    hoist-non-react-statics "^3.3.1"
+
 "@emotion/serialize@^1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.1.0.tgz#b1f97b1011b09346a40e9796c37a3397b4ea8ea8"
@@ -1685,11 +1735,27 @@
     "@emotion/utils" "^1.2.0"
     csstype "^3.0.2"
 
+"@emotion/serialize@^1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.1.1.tgz#0595701b1902feded8a96d293b26be3f5c1a5cf0"
+  integrity sha512-Zl/0LFggN7+L1liljxXdsVSVlg6E/Z/olVWpfxUTxOAmi8NU7YoeWeLfi1RmnB2TATHoaWwIBRoL+FvAJiTUQA==
+  dependencies:
+    "@emotion/hash" "^0.9.0"
+    "@emotion/memoize" "^0.8.0"
+    "@emotion/unitless" "^0.8.0"
+    "@emotion/utils" "^1.2.0"
+    csstype "^3.0.2"
+
 "@emotion/sheet@^1.2.0":
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.2.0.tgz#771b1987855839e214fc1741bde43089397f7be5"
   integrity sha512-OiTkRgpxescko+M51tZsMq7Puu/KP55wMT8BgpcXVG2hqXc0Vo0mfymJ/Uj24Hp0i083ji/o0aLddh08UEjq8w==
 
+"@emotion/sheet@^1.2.1":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.2.1.tgz#0767e0305230e894897cadb6c8df2c51e61a6c2c"
+  integrity sha512-zxRBwl93sHMsOj4zs+OslQKg/uhF38MB+OMKoCrVuS0nyTkqnau+BM3WGEoOptg9Oz45T/aIGs1qbVAsEFo3nA==
+
 "@emotion/styled@^11.10.4":
   version "11.10.4"
   resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-11.10.4.tgz#e93f84a4d54003c2acbde178c3f97b421fce1cd4"
@@ -1737,6 +1803,18 @@
     minimatch "^3.1.2"
     strip-json-comments "^3.1.1"
 
+"@floating-ui/core@^1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.0.2.tgz#d06a66d3ad8214186eda2432ac8b8d81868a571f"
+  integrity sha512-Skfy0YS3NJ5nV9us0uuPN0HDk1Q4edljaOhRBJGDWs9EBa7ZVMYBHRFlhLvvmwEoaIM9BlH6QJFn9/uZg0bACg==
+
+"@floating-ui/dom@^1.0.1":
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.0.7.tgz#9e8e6615ce03e5ebc6a4ae879640a199a366f86d"
+  integrity sha512-6RsqvCYe0AYWtsGvuWqCm7mZytnXAZCjWtsWu1Kg8dI3INvj/DbKlDsZO+mKSaQdPT12uxIW9W2dAWJkPx4Y5g==
+  dependencies:
+    "@floating-ui/core" "^1.0.2"
+
 "@hot-loader/react-dom@^17.0.2":
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/@hot-loader/react-dom/-/react-dom-17.0.2.tgz#0b24e484093e8f97eb5c72bebdda44fc20bc8400"
@@ -2003,6 +2081,11 @@
   dependencies:
     "@types/node" "*"
 
+"@types/js-cookie@^3.0.2":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@types/js-cookie/-/js-cookie-3.0.2.tgz#451eaeece64c6bdac8b2dde0caab23b085899e0d"
+  integrity sha512-6+0ekgfusHftJNYpihfkMu8BWdeHs9EOJuGcSofErjstGPfPGEu9yTu4t460lTzzAMl2cM5zngQJqPMHbbnvYA==
+
 "@types/json-schema@*", "@types/json-schema@^7.0.5", "@types/json-schema@^7.0.8", "@types/json-schema@^7.0.9":
   version "7.0.11"
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.11.tgz#d421b6c527a3037f7c84433fd2c4229e016863d3"
@@ -2067,6 +2150,22 @@
   dependencies:
     "@types/react" "^17"
 
+"@types/react-transition-group@^4.4.0":
+  version "4.4.5"
+  resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.5.tgz#aae20dcf773c5aa275d5b9f7cdbca638abc5e416"
+  integrity sha512-juKD/eiSM3/xZYzjuzH6ZwpP+/lejltmiS3QEzV/vmb/Q8+HfDmxu+Baga8UEMGBqV88Nbg4l2hY/K2DkyaLLA==
+  dependencies:
+    "@types/react" "*"
+
+"@types/react@*":
+  version "18.0.25"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.25.tgz#8b1dcd7e56fe7315535a4af25435e0bb55c8ae44"
+  integrity sha512-xD6c0KDT4m7n9uD4ZHi02lzskaiqcBxf4zi+tXZY98a04wvc0hi/TcCPC2FOESZi51Nd7tlUeOJY8RofL799/g==
+  dependencies:
+    "@types/prop-types" "*"
+    "@types/scheduler" "*"
+    csstype "^3.0.2"
+
 "@types/react@^17", "@types/react@^17.0.39":
   version "17.0.50"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.50.tgz#39abb4f7098f546cfcd6b51207c90c4295ee81fc"
@@ -3171,6 +3270,14 @@ dom-converter@^0.2.0:
   dependencies:
     utila "~0.4"
 
+dom-helpers@^5.0.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902"
+  integrity sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==
+  dependencies:
+    "@babel/runtime" "^7.8.7"
+    csstype "^3.0.2"
+
 dom-serializer@^1.0.1:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-1.4.1.tgz#de5d41b1aea290215dc45a6dae8adcf1d32e2d30"
@@ -4427,6 +4534,11 @@ jest-worker@^27.4.5:
     merge-stream "^2.0.0"
     supports-color "^8.0.0"
 
+js-cookie@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/js-cookie/-/js-cookie-3.0.1.tgz#9e39b4c6c2f56563708d7d31f6f5f21873a92414"
+  integrity sha512-+0rgsUXZu4ncpPxRL+lNEptWMOWl9etvPHc/koSRp6MPwpRYAhmk0dUG00J4bxVV3r9uUzfo24wW0knS07SKSw==
+
 js-sdsl@^4.1.4:
   version "4.1.5"
   resolved "https://registry.yarnpkg.com/js-sdsl/-/js-sdsl-4.1.5.tgz#1ff1645e6b4d1b028cd3f862db88c9d887f26e2a"
@@ -4630,6 +4742,11 @@ memfs@^3.4.3:
   dependencies:
     fs-monkey "^1.0.3"
 
+memoize-one@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-6.0.0.tgz#b2591b871ed82948aee4727dc6abceeeac8c1045"
+  integrity sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==
+
 merge-descriptors@1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-1.0.1.tgz#b00aaa556dd8b44568150ec9d1b953f3f90cbb61"
@@ -5147,7 +5264,7 @@ process@^0.11.10:
   resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
   integrity sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==
 
-prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
+prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -5279,6 +5396,21 @@ react-remove-scroll@2.4.1:
     use-callback-ref "^1.2.3"
     use-sidecar "^1.0.1"
 
+react-select@^5.6.1:
+  version "5.6.1"
+  resolved "https://registry.yarnpkg.com/react-select/-/react-select-5.6.1.tgz#22f3d3f763ab24ac250739254f0191d46a2f1064"
+  integrity sha512-dYNRswtxUHW+F1Sc0HnxO5ryecPIAsG0+Cwyq5EIXZJBxCxUG2hFfQz41tc++30/2ISuuPglDikc4hEb4NsiuA==
+  dependencies:
+    "@babel/runtime" "^7.12.0"
+    "@emotion/cache" "^11.4.0"
+    "@emotion/react" "^11.8.1"
+    "@floating-ui/dom" "^1.0.1"
+    "@types/react-transition-group" "^4.4.0"
+    memoize-one "^6.0.0"
+    prop-types "^15.6.0"
+    react-transition-group "^4.3.0"
+    use-isomorphic-layout-effect "^1.1.2"
+
 react-style-singleton@^2.1.0, react-style-singleton@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/react-style-singleton/-/react-style-singleton-2.2.1.tgz#f99e420492b2d8f34d38308ff660b60d0b1205b4"
@@ -5288,6 +5420,16 @@ react-style-singleton@^2.1.0, react-style-singleton@^2.2.1:
     invariant "^2.2.4"
     tslib "^2.0.0"
 
+react-transition-group@^4.3.0:
+  version "4.4.5"
+  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1"
+  integrity sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+    dom-helpers "^5.0.1"
+    loose-envify "^1.4.0"
+    prop-types "^15.6.2"
+
 react@^17.0.2:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
@@ -5344,6 +5486,11 @@ regenerate@^1.4.2:
   resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.2.tgz#b9346d8827e8f5a32f7ba29637d398b69014848a"
   integrity sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==
 
+regenerator-runtime@^0.13.11:
+  version "0.13.11"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz#f6dca3e7ceec20590d07ada785636a90cdca17f9"
+  integrity sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==
+
 regenerator-runtime@^0.13.4:
   version "0.13.9"
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz#8925742a98ffd90814988d7566ad30ca3b263b52"
@@ -5849,6 +5996,11 @@ stylis@4.0.13:
   resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.0.13.tgz#f5db332e376d13cc84ecfe5dace9a2a51d954c91"
   integrity sha512-xGPXiFVl4YED9Jh7Euv2V220mriG9u4B2TA6Ybjc1catrstKD2PpIdU3U0RKpkVBC2EhmL/F0sPCr9vrFTNRag==
 
+stylis@4.1.3:
+  version "4.1.3"
+  resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.1.3.tgz#fd2fbe79f5fed17c55269e16ed8da14c84d069f7"
+  integrity sha512-GP6WDNWf+o403jrEp9c5jibKavrtLW+/qYGhFxFrG8maXhwTBI7gLLhiBb0o7uFccWN+EOS9aMO6cGHWAO07OA==
+
 supports-color@^5.3.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
@@ -6065,6 +6217,11 @@ use-callback-ref@^1.2.3, use-callback-ref@^1.2.5:
   dependencies:
     tslib "^2.0.0"
 
+use-isomorphic-layout-effect@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz#497cefb13d863d687b08477d9e5a164ad8c1a6fb"
+  integrity sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==
+
 use-sidecar@^1.0.1, use-sidecar@^1.0.5:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/use-sidecar/-/use-sidecar-1.1.2.tgz#2f43126ba2d7d7e117aa5855e5d8f0276dfe73c2"