diff --git a/components/auth/ForgotPassword.tsx b/components/auth/ForgotPassword.tsx
index c7d507701..083a86649 100644
--- a/components/auth/ForgotPassword.tsx
+++ b/components/auth/ForgotPassword.tsx
@@ -1,6 +1,6 @@
 import { FC, useEffect, useState, useCallback } from 'react'
 import { validate } from 'email-validator'
-import { Info } from '@components/icon'
+import { Info } from'@components/icons'
 import { useUI } from '@components/ui/context'
 import { Logo, Button, Input } from '@components/ui'
 import useSignup from '@lib/bigcommerce/use-signup'
diff --git a/components/auth/LoginView.tsx b/components/auth/LoginView.tsx
index 6ef767ce1..b9cb4cb63 100644
--- a/components/auth/LoginView.tsx
+++ b/components/auth/LoginView.tsx
@@ -60,11 +60,19 @@ const LoginView: FC<Props> = () => {
       </div>
       <div className="flex flex-col space-y-3">
         {message && (
-          <div className="text-red border border-red p-3">{message}</div>
+          <div className="text-red border border-red p-3">
+            {message}. Did you {` `}
+            <a
+              className="text-accent-9 inline font-bold hover:underline cursor-pointer"
+              onClick={() => setModalView('FORGOT_VIEW')}
+            >
+              forgot your password?
+            </a>
+          </div>
         )}
-
         <Input placeholder="Email" onChange={setEmail} />
         <Input placeholder="Password" onChange={setPassword} />
+
         <Button
           variant="slim"
           onClick={() => handleLogin()}
@@ -73,7 +81,7 @@ const LoginView: FC<Props> = () => {
         >
           Log In
         </Button>
-        <span className="pt-3 text-center text-sm">
+        <div className="pt-1 text-center text-sm">
           <span className="text-accents-7">Don't have an account?</span>
           {` `}
           <a
@@ -82,7 +90,7 @@ const LoginView: FC<Props> = () => {
           >
             Sign Up
           </a>
-        </span>
+        </div>
       </div>
     </div>
   )
diff --git a/components/auth/SignUpView.tsx b/components/auth/SignUpView.tsx
index a574cc963..f79ec5eb9 100644
--- a/components/auth/SignUpView.tsx
+++ b/components/auth/SignUpView.tsx
@@ -1,6 +1,6 @@
 import { FC, useEffect, useState, useCallback } from 'react'
 import { validate } from 'email-validator'
-import { Info } from '@components/icon'
+import { Info } from '@components/icons'
 import { useUI } from '@components/ui/context'
 import { Logo, Button, Input } from '@components/ui'
 import useSignup from '@lib/bigcommerce/use-signup'
@@ -59,7 +59,7 @@ const SignUpView: FC<Props> = () => {
   }, [handleValidation])
 
   return (
-    <div className="w-80 flex flex-col justify-between p-3">
+    <div className="w-96 flex flex-col justify-between p-3">
       <div className="flex justify-center pb-12 ">
         <Logo width="64px" height="64px" />
       </div>
@@ -72,13 +72,13 @@ const SignUpView: FC<Props> = () => {
         <Input placeholder="Email" onChange={setEmail} />
         <Input placeholder="Password" onChange={setPassword} />
         <span className="text-accents-8">
-          <Info
-            width="20"
-            height="20"
-            className="inline-block mr-1 text-accents-8"
-          />
-          <strong>Info</strong>: Password must be longer than 7 chars and
-          include numbers.
+          <span className="inline-block align-middle ">
+            <Info width="15" height="15" />
+          </span>{' '}
+          <span className="leading-6 text-sm">
+            <strong>Info</strong>: Passwords must be longer than 7 chars and
+            include numbers.{' '}
+          </span>
         </span>
         <div className="pt-2 w-full flex flex-col">
           <Button
@@ -91,7 +91,7 @@ const SignUpView: FC<Props> = () => {
           </Button>
         </div>
 
-        <span className="pt-3 text-center text-sm">
+        <span className="pt-1 text-center text-sm">
           <span className="text-accents-7">Do you have an account?</span>
           {` `}
           <a
diff --git a/components/auth/index.ts b/components/auth/index.ts
index e0f739bc5..11571fac7 100644
--- a/components/auth/index.ts
+++ b/components/auth/index.ts
@@ -1,2 +1,3 @@
 export { default as LoginView } from './LoginView'
 export { default as SignUpView } from './SignUpView'
+export { default as ForgotPassword } from './ForgotPassword'
diff --git a/components/cart/CartItem/CartItem.tsx b/components/cart/CartItem/CartItem.tsx
index 15b0f9d81..04089fa9b 100644
--- a/components/cart/CartItem/CartItem.tsx
+++ b/components/cart/CartItem/CartItem.tsx
@@ -2,7 +2,7 @@ import s from './CartItem.module.css'
 import Image from 'next/image'
 import Link from 'next/link'
 import { ChangeEvent, useEffect, useState } from 'react'
-import { Trash, Plus, Minus } from '@components/icon'
+import { Trash, Plus, Minus } from '@components/icons'
 import usePrice from '@lib/bigcommerce/use-price'
 import useUpdateItem from '@lib/bigcommerce/cart/use-update-item'
 import useRemoveItem from '@lib/bigcommerce/cart/use-remove-item'
diff --git a/components/cart/CartSidebarView/CartSidebarView.tsx b/components/cart/CartSidebarView/CartSidebarView.tsx
index 23ead0008..9f5421519 100644
--- a/components/cart/CartSidebarView/CartSidebarView.tsx
+++ b/components/cart/CartSidebarView/CartSidebarView.tsx
@@ -2,7 +2,7 @@ import { FC } from 'react'
 import cn from 'classnames'
 import { UserNav } from '@components/core'
 import { Button } from '@components/ui'
-import { ArrowLeft, Bag, Cross, Check } from '@components/icon'
+import { ArrowLeft, Bag, Cross, Check } from '@components/icons'
 import { useUI } from '@components/ui/context'
 import useCart from '@lib/bigcommerce/cart/use-cart'
 import usePrice from '@lib/bigcommerce/use-price'
diff --git a/components/core/Footer/Footer.tsx b/components/core/Footer/Footer.tsx
index d97c67afa..7d2348653 100644
--- a/components/core/Footer/Footer.tsx
+++ b/components/core/Footer/Footer.tsx
@@ -4,7 +4,7 @@ import Link from 'next/link'
 import { useRouter } from 'next/router'
 import type { Page } from '@lib/bigcommerce/api/operations/get-all-pages'
 import getSlug from '@utils/get-slug'
-import { Github } from '@components/icon'
+import { Github } from '@components/icons'
 import { Logo, Container } from '@components/ui'
 import { I18nWidget } from '@components/core'
 
diff --git a/components/core/I18nWidget/I18nWidget.tsx b/components/core/I18nWidget/I18nWidget.tsx
index 89c2acd3e..698317a80 100644
--- a/components/core/I18nWidget/I18nWidget.tsx
+++ b/components/core/I18nWidget/I18nWidget.tsx
@@ -3,7 +3,7 @@ import cn from 'classnames'
 import { useRouter } from 'next/router'
 import Link from 'next/link'
 import { Menu } from '@headlessui/react'
-import { DoubleChevron } from '@components/icon'
+import { DoubleChevron } from '@components/icons'
 import s from './I18nWidget.module.css'
 
 const LOCALES_MAP: Record<string, string> = {
diff --git a/components/core/Layout/Layout.tsx b/components/core/Layout/Layout.tsx
index 0c65b7b29..d409d5958 100644
--- a/components/core/Layout/Layout.tsx
+++ b/components/core/Layout/Layout.tsx
@@ -6,7 +6,7 @@ import { CommerceProvider } from '@lib/bigcommerce'
 import { CartSidebarView } from '@components/cart'
 import { Container, Sidebar, Button, Modal, Toast } from '@components/ui'
 import { Navbar, Featurebar, Footer } from '@components/core'
-import { LoginView, SignUpView } from '@components/auth'
+import { LoginView, SignUpView, ForgotPassword } from '@components/auth'
 import { useUI } from '@components/ui/context'
 import { usePreventScroll } from '@react-aria/overlays'
 import s from './Layout.module.css'
@@ -74,6 +74,7 @@ const Layout: FC<Props> = ({ children, pageProps }) => {
         <Modal open={displayModal} onClose={closeModal}>
           {modalView === 'LOGIN_VIEW' && <LoginView />}
           {modalView === 'SIGNUP_VIEW' && <SignUpView />}
+          {modalView === 'FORGOT_VIEW' && <ForgotPassword />}
         </Modal>
         <Featurebar
           title="This site uses cookies to improve your experience."
diff --git a/components/core/Toggle/Toggle.tsx b/components/core/Toggle/Toggle.tsx
index 7e43202ce..9bf6001ac 100644
--- a/components/core/Toggle/Toggle.tsx
+++ b/components/core/Toggle/Toggle.tsx
@@ -1,6 +1,6 @@
 import React, { FC } from 'react'
 import { Switch } from '@headlessui/react'
-import { Moon, Sun } from '@components/icon'
+import { Moon, Sun } from '@components/icons'
 interface Props {
   className?: string
   checked: boolean
diff --git a/components/core/UserNav/DropdownMenu.tsx b/components/core/UserNav/DropdownMenu.tsx
index bbf632d20..dbdf960da 100644
--- a/components/core/UserNav/DropdownMenu.tsx
+++ b/components/core/UserNav/DropdownMenu.tsx
@@ -3,7 +3,7 @@ import Link from 'next/link'
 import { useTheme } from 'next-themes'
 import cn from 'classnames'
 import s from './DropdownMenu.module.css'
-import { Moon, Sun } from '@components/icon'
+import { Moon, Sun } from '@components/icons'
 import { Menu, Transition } from '@headlessui/react'
 import useLogout from '@lib/bigcommerce/use-logout'
 interface DropdownMenuProps {
diff --git a/components/core/UserNav/UserNav.tsx b/components/core/UserNav/UserNav.tsx
index d7e2adf28..b9ab4eb67 100644
--- a/components/core/UserNav/UserNav.tsx
+++ b/components/core/UserNav/UserNav.tsx
@@ -2,7 +2,7 @@ import Link from 'next/link'
 import cn from 'classnames'
 import s from './UserNav.module.css'
 import { FC } from 'react'
-import { Heart, Bag } from '@components/icon'
+import { Heart, Bag } from '@components/icons'
 import { Avatar } from '@components/core'
 import { useUI } from '@components/ui/context'
 import { LoginView } from '@components/auth'
diff --git a/components/icon/Cross.tsx b/components/icon/Cross.tsx
deleted file mode 100644
index f6c709312..000000000
--- a/components/icon/Cross.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-const Cross = ({ ...props }) => {
-  return (
-    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" {...props}>
-      <path
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth="2"
-        d="M6 18L18 6M6 6l12 12"
-      />
-    </svg>
-  )
-}
-
-export default Cross
diff --git a/components/icon/ArrowLeft.tsx b/components/icons/ArrowLeft.tsx
similarity index 100%
rename from components/icon/ArrowLeft.tsx
rename to components/icons/ArrowLeft.tsx
diff --git a/components/icon/Bag.tsx b/components/icons/Bag.tsx
similarity index 100%
rename from components/icon/Bag.tsx
rename to components/icons/Bag.tsx
diff --git a/components/icon/Check.tsx b/components/icons/Check.tsx
similarity index 100%
rename from components/icon/Check.tsx
rename to components/icons/Check.tsx
diff --git a/components/icons/Cross.tsx b/components/icons/Cross.tsx
new file mode 100644
index 000000000..27eaf54d6
--- /dev/null
+++ b/components/icons/Cross.tsx
@@ -0,0 +1,21 @@
+const Cross = ({ ...props }) => {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      width="24"
+      height="24"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      fill="none"
+      shape-rendering="geometricPrecision"
+      {...props}
+    >
+      <path d="M18 6L6 18" />
+      <path d="M6 6l12 12" />
+    </svg>
+  )
+}
+
+export default Cross
diff --git a/components/icon/DoubleChevron.tsx b/components/icons/DoubleChevron.tsx
similarity index 100%
rename from components/icon/DoubleChevron.tsx
rename to components/icons/DoubleChevron.tsx
diff --git a/components/icon/Github.tsx b/components/icons/Github.tsx
similarity index 100%
rename from components/icon/Github.tsx
rename to components/icons/Github.tsx
diff --git a/components/icon/Heart.tsx b/components/icons/Heart.tsx
similarity index 100%
rename from components/icon/Heart.tsx
rename to components/icons/Heart.tsx
diff --git a/components/icon/Info.tsx b/components/icons/Info.tsx
similarity index 100%
rename from components/icon/Info.tsx
rename to components/icons/Info.tsx
diff --git a/components/icon/Minus.tsx b/components/icons/Minus.tsx
similarity index 100%
rename from components/icon/Minus.tsx
rename to components/icons/Minus.tsx
diff --git a/components/icon/Moon.tsx b/components/icons/Moon.tsx
similarity index 100%
rename from components/icon/Moon.tsx
rename to components/icons/Moon.tsx
diff --git a/components/icon/Plus.tsx b/components/icons/Plus.tsx
similarity index 100%
rename from components/icon/Plus.tsx
rename to components/icons/Plus.tsx
diff --git a/components/icon/RightArrow.tsx b/components/icons/RightArrow.tsx
similarity index 100%
rename from components/icon/RightArrow.tsx
rename to components/icons/RightArrow.tsx
diff --git a/components/icon/Sun.tsx b/components/icons/Sun.tsx
similarity index 100%
rename from components/icon/Sun.tsx
rename to components/icons/Sun.tsx
diff --git a/components/icon/Trash.tsx b/components/icons/Trash.tsx
similarity index 100%
rename from components/icon/Trash.tsx
rename to components/icons/Trash.tsx
diff --git a/components/icon/index.ts b/components/icons/index.ts
similarity index 100%
rename from components/icon/index.ts
rename to components/icons/index.ts
diff --git a/components/product/ProductCard/ProductCard.tsx b/components/product/ProductCard/ProductCard.tsx
index c7b2c7aa2..60ebe5d03 100644
--- a/components/product/ProductCard/ProductCard.tsx
+++ b/components/product/ProductCard/ProductCard.tsx
@@ -3,7 +3,7 @@ import cn from 'classnames'
 import Link from 'next/link'
 import type { ProductNode } from '@lib/bigcommerce/api/operations/get-all-products'
 import usePrice from '@lib/bigcommerce/use-price'
-import { Heart } from '@components/icon'
+import { Heart } from '@components/icons'
 import { EnhancedImage } from '@components/core'
 import s from './ProductCard.module.css'
 
diff --git a/components/product/ProductView/ProductView.tsx b/components/product/ProductView/ProductView.tsx
index ae3f15d04..0c5caea80 100644
--- a/components/product/ProductView/ProductView.tsx
+++ b/components/product/ProductView/ProductView.tsx
@@ -4,7 +4,7 @@ import Image from 'next/image'
 import { NextSeo } from 'next-seo'
 
 import s from './ProductView.module.css'
-import { Heart } from '@components/icon'
+import { Heart } from '@components/icons'
 import { useUI } from '@components/ui/context'
 import { Swatch, ProductSlider } from '@components/product'
 import { Button, Container } from '@components/ui'
diff --git a/components/product/Swatch/Swatch.tsx b/components/product/Swatch/Swatch.tsx
index e12421c41..30c9be7c3 100644
--- a/components/product/Swatch/Swatch.tsx
+++ b/components/product/Swatch/Swatch.tsx
@@ -1,7 +1,7 @@
 import cn from 'classnames'
 import { FC } from 'react'
 import s from './Swatch.module.css'
-import { Check } from '@components/icon'
+import { Check } from '@components/icons'
 import Button, { ButtonProps } from '@components/ui/Button'
 import { isDark } from '@lib/colors'
 interface Props {
diff --git a/components/ui/Hero/Hero.tsx b/components/ui/Hero/Hero.tsx
index cb45350bc..2e1f124ae 100644
--- a/components/ui/Hero/Hero.tsx
+++ b/components/ui/Hero/Hero.tsx
@@ -1,6 +1,6 @@
 import React, { FC } from 'react'
 import { Container } from '@components/ui'
-import { RightArrow } from '@components/icon'
+import { RightArrow } from '@components/icons'
 import s from './Hero.module.css'
 import Link from 'next/link'
 interface Props {
diff --git a/components/ui/Modal/Modal.tsx b/components/ui/Modal/Modal.tsx
index 623592039..e31e32e91 100644
--- a/components/ui/Modal/Modal.tsx
+++ b/components/ui/Modal/Modal.tsx
@@ -5,11 +5,12 @@ import { useDialog } from '@react-aria/dialog'
 import { FocusScope } from '@react-aria/focus'
 import { Transition } from '@headlessui/react'
 import { useOverlay, useModal, OverlayContainer } from '@react-aria/overlays'
+import { Cross } from '@components/icons'
 interface Props {
   className?: string
   children?: any
   open?: boolean
-  onClose?: () => void
+  onClose: () => void
 }
 
 const Modal: FC<Props> = ({
@@ -26,7 +27,7 @@ const Modal: FC<Props> = ({
   let { overlayProps } = useOverlay(
     {
       isOpen: open,
-      isDismissable: true,
+      isDismissable: false,
       onClose: onClose,
       ...props,
     },
@@ -53,6 +54,16 @@ const Modal: FC<Props> = ({
                 {...modalProps}
                 ref={ref}
               >
+                <div className="h-7 flex items-center justify-end w-full">
+                  <button
+                    onClick={() => onClose()}
+                    aria-label="Close panel"
+                    className="hover:text-gray-500 transition ease-in-out duration-150 focus:outline-none"
+                  >
+                    <Cross className="h-6 w-6" />
+                  </button>
+                </div>
+
                 {children}
               </div>
             </Transition.Child>
diff --git a/components/ui/context.tsx b/components/ui/context.tsx
index 8110bf1e0..1c84b9de9 100644
--- a/components/ui/context.tsx
+++ b/components/ui/context.tsx
@@ -58,7 +58,7 @@ type Action =
       view: 'SIGNUP_VIEW'
     }
 
-type MODAL_VIEWS = 'SIGNUP_VIEW' | 'LOGIN_VIEW'
+type MODAL_VIEWS = 'SIGNUP_VIEW' | 'LOGIN_VIEW' | 'FORGOT_VIEW'
 type ToastText = string
 
 export const UIContext = React.createContext<State | any>(initialState)
diff --git a/components/wishlist/WishlistCard/WishlistCard.tsx b/components/wishlist/WishlistCard/WishlistCard.tsx
index f257c2a8e..eeacfa779 100644
--- a/components/wishlist/WishlistCard/WishlistCard.tsx
+++ b/components/wishlist/WishlistCard/WishlistCard.tsx
@@ -1,5 +1,5 @@
 import { FC } from 'react'
-import { Trash } from '@components/icon'
+import { Trash } from '@components/icons'
 import s from './WishlistCard.module.css'
 
 interface Props {
diff --git a/pages/cart.tsx b/pages/cart.tsx
index 4f62cc063..d9d669ab7 100644
--- a/pages/cart.tsx
+++ b/pages/cart.tsx
@@ -2,7 +2,7 @@ import { GetStaticPropsContext, InferGetStaticPropsType } from 'next'
 import getAllPages from '@lib/bigcommerce/api/operations/get-all-pages'
 import { Layout } from '@components/core'
 import { Button } from '@components/ui'
-import { Bag, Cross, Check } from '@components/icon'
+import { Bag, Cross, Check } from '@components/icons'
 import useCart from '@lib/bigcommerce/cart/use-cart'
 import usePrice from '@lib/bigcommerce/use-price'
 import { CartItem } from '@components/cart'