diff --git a/package-lock.json b/package-lock.json
index 7d824ca..be19947 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10721,6 +10721,11 @@
       "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.0.tgz",
       "integrity": "sha512-IgmcegOSi5SNX+2Snh1vqmF0Vg/CbkycU9XZbOHJlZ6kMzTmi3yc254oB1WCkgA7OQtIAoLmcSFuHTc/tlcqXg=="
     },
+    "react-spinner-material": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/react-spinner-material/-/react-spinner-material-1.3.1.tgz",
+      "integrity": "sha512-UiCp5eRpRnhleE7ng1Pq4vqNKxbof+kG842JGekoSE0w+vUe7AbXTK1nebRaAloe3Lm0cRbLW621LKEAJMVT/Q=="
+    },
     "read-pkg": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-2.0.0.tgz",
diff --git a/package.json b/package.json
index c673d5a..d46e0ca 100644
--- a/package.json
+++ b/package.json
@@ -56,6 +56,7 @@
     "react-dom": "^16.13.1",
     "react-helmet": "^6.1.0",
     "react-icons": "^3.11.0",
+    "react-spinner-material": "^1.3.1",
     "styled-components": "^5.2.0"
   }
 }
diff --git a/src/components/EmptyPage/index.js b/src/components/EmptyPage/index.js
new file mode 100644
index 0000000..faca53d
--- /dev/null
+++ b/src/components/EmptyPage/index.js
@@ -0,0 +1,14 @@
+import React from 'react'
+import { Container } from './styles'
+import noFavoritesImage from '../../images/corgi-cute.png'
+
+export const EmptyPage = ({ text }) => {
+  return (
+    <>
+      <Container>
+        <img src={noFavoritesImage} alt='No Favorites Availables' width='200' />
+        <h3>{text}</h3>
+      </Container>
+    </>
+  )
+}
diff --git a/src/components/EmptyPage/styles.js b/src/components/EmptyPage/styles.js
new file mode 100644
index 0000000..0a00f5e
--- /dev/null
+++ b/src/components/EmptyPage/styles.js
@@ -0,0 +1,12 @@
+import styled from 'styled-components'
+
+export const Container = styled.div`
+  text-align: center;
+  & h3 {
+    color: gray;
+    margin: 20px 0;
+    text-align: center;
+    font-weight: 400;
+    letter-spacing: 3px;
+  }
+`
diff --git a/src/components/Layout/index.js b/src/components/Layout/index.js
index ce66724..a535c0e 100644
--- a/src/components/Layout/index.js
+++ b/src/components/Layout/index.js
@@ -8,11 +8,7 @@ export const Layout = ({ children, title = '', subtitle = '' }) => {
         <title>{`${title} | Petgram 🐕 `}</title>
         <meta name='description' content={subtitle} />
       </Helmet>
-      <Container>
-        <Title>{title}</Title>
-        <Subtitle>{subtitle}</Subtitle>
-        {children}
-      </Container>
+      <Container>{children}</Container>
     </>
   )
 }
diff --git a/src/components/ListOfCategories/styles.js b/src/components/ListOfCategories/styles.js
index f5be874..49d01b1 100644
--- a/src/components/ListOfCategories/styles.js
+++ b/src/components/ListOfCategories/styles.js
@@ -4,24 +4,29 @@ export const List = styled.ul`
   display: flex;
   overflow: scroll;
   width: 100%;
-  ${props => props.fixed && css`
-  {
-    background: #fff;
-    border-radius: 60px;
-    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
-    left: 0;
-    margin: 0 auto;
-    max-width: 400px;
-    padding: 5px;
-    position: fixed;
-    right: 0;
-    top: -20px;
-    transform: scale(.5);
-    z-index: 1;
+  &::-webkit-scrollbar {
+    display: none;
   }
-  `}
+  ${(props) =>
+    props.fixed &&
+    css`
+       {
+        background: #fff;
+        border-radius: 60px;
+        box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
+        left: 0;
+        margin: 0 auto;
+        max-width: 400px;
+        padding: 5px;
+        position: fixed;
+        right: 0;
+        top: -20px;
+        transform: scale(0.5);
+        z-index: 1;
+      }
+    `}
 `
 
 export const Item = styled.li`
-padding: 0 8px;
+  padding: 0 8px;
 `
diff --git a/src/components/ListOfFavorites/index.js b/src/components/ListOfFavorites/index.js
index a6125a2..1001cab 100644
--- a/src/components/ListOfFavorites/index.js
+++ b/src/components/ListOfFavorites/index.js
@@ -1,19 +1,24 @@
 import React from 'react'
 import { useGetFavoritesQuery } from '../../hooks/useGetFavoritesQuery'
-import { Link, Image, Container } from './styles'
+import { Link, Image, Container, NoFavorites } from './styles'
 import { PropTypes } from 'prop-types'
+import { Loading } from '../Loading'
+import { EmptyPage } from '../EmptyPage'
 
 export const ListOfFavorites = () => {
   const { data, loading, error, refetch } = useGetFavoritesQuery()
 
   if (loading) {
-    return <h1>Loading...</h1>
+    return <Loading />
   }
 
   if (error) {
     return <h1>{error.message}</h1>
   }
-
+  console.log(data.favs)
+  if (!Array.isArray(data.favs) || data.favs.length === 0) {
+    return <EmptyPage text='Nothing Here....' />
+  }
   return (
     <>
       <Container>
diff --git a/src/components/ListOfFavorites/styles.js b/src/components/ListOfFavorites/styles.js
index bd8af98..567b8d8 100644
--- a/src/components/ListOfFavorites/styles.js
+++ b/src/components/ListOfFavorites/styles.js
@@ -9,6 +9,7 @@ export const Link = styled(LinkRouter)`
 export const Image = styled.img`
   width: 100%;
   object-fit: cover;
+  border-radius: 5px;
 `
 
 export const Container = styled.div`
diff --git a/src/components/ListOfPhotoCard/index.js b/src/components/ListOfPhotoCard/index.js
index 7568b6b..3085681 100644
--- a/src/components/ListOfPhotoCard/index.js
+++ b/src/components/ListOfPhotoCard/index.js
@@ -3,30 +3,33 @@ import { PhotoCard } from '../PhotoCard'
 import { useGetPhotos } from '../../hooks/useGetPhotos.js'
 import { List, Item } from './style.js'
 import { PropTypes } from 'prop-types'
+import { Loading } from '../Loading'
 
 export const ListOfPhotoCard = ({ categoryID }) => {
   const { loading, error, data } = useGetPhotos(categoryID)
 
-  if (loading) {
-    return <h1>Loading</h1>
+  if (error) {
+    return <h1>Opps! something is wrong :(</h1>
   }
 
-  if (error) {
-    return <h1>{error.message}</h1>
+  if (loading) {
+    return <Loading />
   }
   return (
     <>
-      <List>
-        {data.photos.map((photoCard) => (
-          <Item key={photoCard.id}>
-            <PhotoCard {...photoCard} />
-          </Item>
-        ))}
-      </List>
+      {
+        <List>
+          {data.photos.map((photoCard) => (
+            <Item key={photoCard.id}>
+              <PhotoCard {...photoCard} />
+            </Item>
+          ))}
+        </List>
+      }
     </>
   )
 }
 
-ListOfPhotoCard.propTypes = {
-  categoryID: PropTypes.string
-}
+// ListOfPhotoCard.propTypes = {
+//   categoryID: PropTypes.string
+// }
diff --git a/src/components/ListOfPhotoCard/style.js b/src/components/ListOfPhotoCard/style.js
index bd42824..23e9fc8 100644
--- a/src/components/ListOfPhotoCard/style.js
+++ b/src/components/ListOfPhotoCard/style.js
@@ -1,8 +1,8 @@
 import styled from 'styled-components'
 
 export const List = styled.ul`
-list-style-type: none;
+  list-style-type: none;
 `
 export const Item = styled.li`
-
+  color: white;
 `
diff --git a/src/components/Loading/index.js b/src/components/Loading/index.js
new file mode 100644
index 0000000..c914e65
--- /dev/null
+++ b/src/components/Loading/index.js
@@ -0,0 +1,9 @@
+import React from 'react'
+import { Spinner, Container } from './style.js'
+export const Loading = () => {
+  return (
+    <Container>
+      <Spinner />
+    </Container>
+  )
+}
diff --git a/src/components/Loading/style.js b/src/components/Loading/style.js
new file mode 100644
index 0000000..6b38a36
--- /dev/null
+++ b/src/components/Loading/style.js
@@ -0,0 +1,30 @@
+import styled, { keyframes } from 'styled-components'
+
+const rotate360 = keyframes`
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+`
+
+export const Container = styled.div`
+  display: flex;
+  justify-content: center;
+  margin-top: 20px;
+`
+
+export const Spinner = styled.div`
+  animation: ${rotate360} 1s linear infinite;
+  transform: translateZ(0);
+
+  border-top: 2px solid #f3abbd;
+  border-right: 2px solid #f3abbd;
+  border-bottom: 2px solid #f3abbd;
+  border-left: 4px solid #ed59a3;
+  background: transparent;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+`
diff --git a/src/components/PhotoCard/index.js b/src/components/PhotoCard/index.js
index cfc541e..29020bd 100644
--- a/src/components/PhotoCard/index.js
+++ b/src/components/PhotoCard/index.js
@@ -44,9 +44,9 @@ export const PhotoCard = ({ id, liked, likes = 0, src = DEFAULT_IMAGE }) => {
   )
 }
 
-PhotoCard.propTypes = {
-  id: PropTypes.string.isRequired,
-  liked: PropTypes.bool.isRequired,
+/*PhotoCard.propTypes = {
+  id: PropTypes.string,
+  liked: PropTypes.bool,
   likes: function (props, propName, componentName) {
     const propValue = props[propName]
 
@@ -59,5 +59,5 @@ PhotoCard.propTypes = {
     }
   },
   onClick: PropTypes.func,
-  src: PropTypes.string.isRequired
-}
+  src: PropTypes.string
+}*/
diff --git a/src/components/PhotoCard/style.js b/src/components/PhotoCard/style.js
index 9521d7b..41f7e62 100644
--- a/src/components/PhotoCard/style.js
+++ b/src/components/PhotoCard/style.js
@@ -7,7 +7,7 @@ export const Image = styled.img`
   height: 100%;
   object-fit: cover;
   position: absolute;
-  border-radius: 10px;
+  border-radius: 5px;
   top: 0;
   width: 100%;
 `
@@ -16,7 +16,7 @@ export const ImgWrapper = styled.div`
   padding: 56.25% 0 0 0;
   height: 0;
   display: block;
-  border-radius: 10px;
+
   position: relative;
 `
 
diff --git a/src/components/PhotoDetail/index.js b/src/components/PhotoDetail/index.js
index a7ea752..e39902d 100644
--- a/src/components/PhotoDetail/index.js
+++ b/src/components/PhotoDetail/index.js
@@ -2,12 +2,13 @@ import React from 'react'
 import { PropTypes } from 'prop-types'
 import { PhotoCard } from '../PhotoCard/'
 import { useGetSinglePhoto } from '../../hooks/useGetSinglePhoto.js'
+import { Loading } from '../Loading'
 
 export const PhotoDetail = ({ id }) => {
   const { loading, error, data } = useGetSinglePhoto(id)
 
   if (loading) {
-    return 'loading'
+    return <Loading />
   }
 
   if (error) {
diff --git a/src/components/SubmitButton/styles.js b/src/components/SubmitButton/styles.js
index 700ff9b..1b323b2 100644
--- a/src/components/SubmitButton/styles.js
+++ b/src/components/SubmitButton/styles.js
@@ -3,7 +3,7 @@ import styled from 'styled-components'
 export const Button = styled.button`
   padding: 10px;
   width: 100%;
-  background-color: #0095f6;
+  background-color: #f9ae5c;
   color: white;
   outline: none;
   border: 1px solid transparent;
diff --git a/src/components/UserForm/index.js b/src/components/UserForm/index.js
index 487b83b..d41967a 100644
--- a/src/components/UserForm/index.js
+++ b/src/components/UserForm/index.js
@@ -47,7 +47,7 @@ export const UserForm = ({ onSubmit, action, error, disabled }) => {
         </SubmitButton>
         {error && <Error>{error}</Error>}
         <Small display={action}>
-          You don't have an account? <a href='#'>Register Here!</a>
+          You don't have an account? <a href='/register'>Register Here!</a>
         </Small>
       </Form>
     </>
diff --git a/src/components/UserForm/styles.js b/src/components/UserForm/styles.js
index cc1d6ae..2ec82b7 100644
--- a/src/components/UserForm/styles.js
+++ b/src/components/UserForm/styles.js
@@ -49,7 +49,7 @@ export const Small = styled.small`
   font-weight: 400;
   & a {
     text-decoration: none;
-    color: #0095f6;
+    color: #965726;
     font-weight: bold;
   }
   ${(props) =>
diff --git a/src/hooks/useCategoryData.js b/src/hooks/useCategoryData.js
index 8b675ef..9ad07c0 100644
--- a/src/hooks/useCategoryData.js
+++ b/src/hooks/useCategoryData.js
@@ -19,6 +19,7 @@ export const useCategoryData = () => {
         setLoading(false)
         setError(error.message)
       }
+      // Abort both fetches on unmount
     }
     getCategories()
   }, [])
diff --git a/src/images/corgi-cute.png b/src/images/corgi-cute.png
new file mode 100644
index 0000000..46fcd0f
Binary files /dev/null and b/src/images/corgi-cute.png differ
diff --git a/src/pages/AnonymousUser.js b/src/pages/AnonymousUser.js
index 410acf7..61e6166 100644
--- a/src/pages/AnonymousUser.js
+++ b/src/pages/AnonymousUser.js
@@ -1,20 +1,15 @@
 import React, { useContext } from 'react'
 import { Context } from '../Context'
 import { UserForm, userFormActions } from '../components/UserForm'
-import { useRegisterMutation } from '../hooks/useRegisterMutation'
+
 import { useLoginMutation } from '../hooks/useLoginMutation'
 import { Layout } from '../components/Layout/index'
 
 const AnonymousUser = () => {
   const { activateAuth } = useContext(Context)
-  const [register, { loadingRegister, errorRegister }] = useRegisterMutation()
+
   const [login, { loadingLogin, errorLogin }] = useLoginMutation()
-  const onSubmitRegister = ({ variables }) => {
-    register({ variables }).then(({ data }) => {
-      const { signup } = data
-      activateAuth(signup)
-    })
-  }
+
   const onSubmitLogin = ({ variables }) => {
     login({ variables }).then(({ data }) => {
       const { login } = data
@@ -24,13 +19,7 @@ const AnonymousUser = () => {
 
   return (
     <>
-      <Layout title='Sing In - Sing Up' subtitle='Welcome to petgram'>
-        <UserForm
-          onSubmit={onSubmitRegister}
-          action={userFormActions.REGISTER}
-          error={errorRegister && errorRegister.message}
-          disabled={loadingRegister}
-        />
+      <Layout title='Sing In' subtitle='Welcome to petgram'>
         <UserForm
           onSubmit={onSubmitLogin}
           action={userFormActions.LOGIN}
diff --git a/src/pages/Home.js b/src/pages/Home.js
index 6505c81..24b1e4a 100644
--- a/src/pages/Home.js
+++ b/src/pages/Home.js
@@ -17,10 +17,9 @@ const HomePage = ({ id }) => {
 }
 
 export const Home = React.memo(HomePage, (prevProps, props) => {
-  console.log('Render: Home Memo')
   return prevProps.id === props.id
 })
 
-HomePage.propTypes = {
+/*HomePage.propTypes = {
   id: PropTypes.string
-}
+}*/
diff --git a/src/pages/RegisterUser.js b/src/pages/RegisterUser.js
new file mode 100644
index 0000000..1bbbce1
--- /dev/null
+++ b/src/pages/RegisterUser.js
@@ -0,0 +1,32 @@
+import React, { useContext } from 'react'
+import { Context } from '../Context'
+import { UserForm, userFormActions } from '../components/UserForm'
+import { useRegisterMutation } from '../hooks/useRegisterMutation'
+import { Layout } from '../components/Layout/index'
+
+const RegisterUser = () => {
+  const { activateAuth } = useContext(Context)
+  const [register, { loadingRegister, errorRegister }] = useRegisterMutation()
+
+  const onSubmitRegister = ({ variables }) => {
+    register({ variables }).then(({ data }) => {
+      const { signup } = data
+      activateAuth(signup)
+    })
+  }
+
+  return (
+    <>
+      <Layout title='Sing Up' subtitle='Welcome to petgram'>
+        <UserForm
+          onSubmit={onSubmitRegister}
+          action={userFormActions.REGISTER}
+          error={errorRegister && errorRegister.message}
+          disabled={loadingRegister}
+        />
+      </Layout>
+    </>
+  )
+}
+
+export default RegisterUser
diff --git a/src/pages/User.js b/src/pages/User.js
index c61ec98..8f97612 100644
--- a/src/pages/User.js
+++ b/src/pages/User.js
@@ -2,12 +2,14 @@ import React, { useContext } from 'react'
 import { Context } from '../Context'
 import { SubmitButton } from '../components/SubmitButton'
 import { Layout } from '../components/Layout'
+import { EmptyPage } from '../components/EmptyPage/index'
 
 const User = () => {
   const { removeAuth } = useContext(Context)
   return (
     <>
       <Layout title='Account' subtitle='Your petgram account'>
+        <EmptyPage text='Hey you!' />
         <SubmitButton onClick={removeAuth}>Log Out</SubmitButton>
       </Layout>
     </>
diff --git a/src/router/Routes.js b/src/router/Routes.js
index 958aa47..34fd3bd 100644
--- a/src/router/Routes.js
+++ b/src/router/Routes.js
@@ -2,20 +2,23 @@ import React, { Suspense } from 'react'
 import { Redirect, Router } from '@reach/router'
 import { Home } from '../pages/Home'
 import { NotFound } from '../pages/NotFound'
+import { Loading } from '../components/Loading'
 const Favs = React.lazy(() => import('../pages/Favs'))
 const User = React.lazy(() => import('../pages/User'))
 const AnonymousUser = React.lazy(() => import('../pages/AnonymousUser'))
+const RegisterUser = React.lazy(() => import('../pages/RegisterUser'))
 const Detail = React.lazy(() => import('../pages/Detail'))
 
 export const Routes = ({ isAuth }) => {
   return (
     <>
-      <Suspense fallback={<div>HOLA</div>}>
+      <Suspense fallback={<Loading />}>
         <Router>
           <NotFound default />
           <Home path='/' />
           <Home path='/pet/:id' />
           <Detail path='/detail/:detailId' />
+          {!isAuth && <RegisterUser path='/register' />}
           {!isAuth && <AnonymousUser path='/login' />}
           {!isAuth && <Redirect noThrow from='/favorites' to='/login' />}
           {!isAuth && <Redirect noThrow from='/account' to='/login' />}
diff --git a/src/styles/GlobalStyles.js b/src/styles/GlobalStyles.js
index 31f96bd..fd76244 100644
--- a/src/styles/GlobalStyles.js
+++ b/src/styles/GlobalStyles.js
@@ -32,9 +32,12 @@ html {
     max-width: 500px;
     overscroll-behavior: none;
     width: 100%;
-    border: 1px solid red;
   }
-
+  #spinner-container {
+    display: flex;
+    justify-content: center;
+    margin-top: 20px;
+  }
   #app {
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
     overflow-x: hidden;
diff --git a/webpack.config.js b/webpack.config.js
index a6ef016..70749b7 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -45,8 +45,6 @@ module.exports = {
     }),
     new WorkboxPlugin.GenerateSW({
       swDest: 'service-worker.js',
-      clientsClaim: true,
-      skipWaiting: true,
       maximumFileSizeToCacheInBytes: 5000000,
       runtimeCaching: [
         {