diff --git a/components/cart/CartSidebarView/CartSidebarView.tsx b/components/cart/CartSidebarView/CartSidebarView.tsx
index 9f5421519..7440a8d81 100644
--- a/components/cart/CartSidebarView/CartSidebarView.tsx
+++ b/components/cart/CartSidebarView/CartSidebarView.tsx
@@ -33,7 +33,7 @@ const CartSidebarView: FC = () => {
   return (
     <div
       className={cn('h-full flex flex-col', {
-        'bg-white text-black': isEmpty,
+        'bg-secondary text-secondary': isEmpty,
         'bg-red text-white': error,
         'bg-green text-white': success,
       })}
@@ -57,7 +57,7 @@ const CartSidebarView: FC = () => {
 
       {isEmpty ? (
         <div className="flex-1 px-4 flex flex-col justify-center items-center ">
-          <span className="border border-dashed border-white rounded-full flex items-center justify-center w-16 h-16 bg-black p-12 rounded-lg text-white">
+          <span className="border border-dashed border-primary rounded-full flex items-center justify-center w-16 h-16 p-12 bg-secondary text-secondary">
             <Bag className="absolute" />
           </span>
           <h2 className="pt-6 text-2xl font-bold tracking-wide text-center">
@@ -116,7 +116,7 @@ const CartSidebarView: FC = () => {
                 </li>
                 <li className="flex justify-between py-1">
                   <span>Estimated Shipping</span>
-                  <span>FREE</span>
+                  <span className="font-bold tracking-wide">FREE</span>
                 </li>
               </ul>
               <div className="flex justify-between border-t border-accents-3 py-3 font-bold mb-10">
diff --git a/components/core/Avatar/Avatar.tsx b/components/core/Avatar/Avatar.tsx
index 3797f8073..b7928d4f2 100644
--- a/components/core/Avatar/Avatar.tsx
+++ b/components/core/Avatar/Avatar.tsx
@@ -12,7 +12,7 @@ const Avatar: FC<Props> = ({}) => {
 
   return (
     <div
-      className="inline-block h-8 w-8 rounded-full border-2 border-primary hover:border-secondary transition linear-out duration-150"
+      className="inline-block h-8 w-8 rounded-full border-2 border-primary hover:border-secondary focus:border-secondary transition linear-out duration-150"
       style={{
         backgroundImage: `linear-gradient(140deg, ${bg[0]}, ${bg[1]} 100%)`,
       }}
diff --git a/components/core/Navbar/Navbar.module.css b/components/core/Navbar/Navbar.module.css
index f24ae8df6..f42672365 100644
--- a/components/core/Navbar/Navbar.module.css
+++ b/components/core/Navbar/Navbar.module.css
@@ -1,11 +1,20 @@
 .link {
-  @apply inline-flex items-center text-primary leading-6 font-medium transition ease-in-out duration-150 cursor-pointer;
+  @apply inline-flex items-center text-primary leading-6 font-medium transition ease-in-out duration-75 cursor-pointer text-accents-6;
 }
 
 .link:hover {
-  @apply text-accents-8;
+  @apply text-accents-9;
 }
 
 .link:focus {
   @apply outline-none text-accents-8;
 }
+
+.logo {
+  @apply cursor-pointer rounded-full border transform duration-100 ease-in-out;
+
+  &:hover {
+    @apply shadow-md;
+    transform: scale(1.05);
+  }
+}
diff --git a/components/core/Navbar/Navbar.tsx b/components/core/Navbar/Navbar.tsx
index f9c726f40..25dca71cd 100644
--- a/components/core/Navbar/Navbar.tsx
+++ b/components/core/Navbar/Navbar.tsx
@@ -15,7 +15,7 @@ const Navbar: FC<Props> = ({ className }) => {
       <div className="flex justify-between align-center flex-row py-4 md:py-6 relative">
         <div className="flex flex-1 items-center">
           <Link href="/">
-            <a className="cursor-pointer" aria-label="Logo">
+            <a className={s.logo} aria-label="Logo">
               <Logo />
             </a>
           </Link>
diff --git a/components/core/UserNav/DropdownMenu.module.css b/components/core/UserNav/DropdownMenu.module.css
index 755d34974..f81b920ef 100644
--- a/components/core/UserNav/DropdownMenu.module.css
+++ b/components/core/UserNav/DropdownMenu.module.css
@@ -15,6 +15,10 @@
   @apply bg-accents-1;
 }
 
+.link.active {
+  @apply font-bold bg-accents-2;
+}
+
 .off {
   @apply hidden;
 }
diff --git a/components/core/UserNav/DropdownMenu.tsx b/components/core/UserNav/DropdownMenu.tsx
index dbdf960da..82121605e 100644
--- a/components/core/UserNav/DropdownMenu.tsx
+++ b/components/core/UserNav/DropdownMenu.tsx
@@ -6,6 +6,8 @@ import s from './DropdownMenu.module.css'
 import { Moon, Sun } from '@components/icons'
 import { Menu, Transition } from '@headlessui/react'
 import useLogout from '@lib/bigcommerce/use-logout'
+import { useRouter } from 'next/router'
+
 interface DropdownMenuProps {
   open: boolean
 }
@@ -20,7 +22,7 @@ const LINKS = [
     href: '/profile',
   },
   {
-    name: 'Cart',
+    name: 'My Cart',
     href: '/cart',
   },
 ]
@@ -28,6 +30,8 @@ const LINKS = [
 const DropdownMenu: FC<DropdownMenuProps> = ({ open = false }) => {
   const { theme, setTheme } = useTheme()
   const logout = useLogout()
+  const { pathname } = useRouter()
+
   return (
     <Transition
       show={open}
@@ -41,11 +45,17 @@ const DropdownMenu: FC<DropdownMenuProps> = ({ open = false }) => {
       <Menu.Items className={s.dropdownMenu}>
         {LINKS.map(({ name, href }) => (
           <Menu.Item key={href}>
-            {({ active }) => (
+            <div>
               <Link href={href}>
-                <a className={cn(s.link, { [s.active]: active })}>{name}</a>
+                <a
+                  className={cn(s.link, {
+                    [s.active]: pathname === href,
+                  })}
+                >
+                  {name}
+                </a>
               </Link>
-            )}
+            </div>
           </Menu.Item>
         ))}
         <Menu.Item>
diff --git a/components/core/UserNav/UserNav.module.css b/components/core/UserNav/UserNav.module.css
index 4f30f5fe4..8b8fa8c14 100644
--- a/components/core/UserNav/UserNav.module.css
+++ b/components/core/UserNav/UserNav.module.css
@@ -7,10 +7,10 @@
 }
 
 .item {
-  @apply mr-6 cursor-pointer relative transition ease-in-out duration-100 text-primary flex items-center outline-none;
+  @apply mr-6 cursor-pointer relative transition ease-in-out duration-100 text-primary flex items-center outline-none text-primary;
 
   &:hover {
-    @apply text-accents-8 transition scale-110 duration-100;
+    @apply text-accents-6 transition scale-110 duration-100;
   }
 
   &:last-child {
diff --git a/pages/cart.tsx b/pages/cart.tsx
index 7fee8176d..62fd618b4 100644
--- a/pages/cart.tsx
+++ b/pages/cart.tsx
@@ -41,14 +41,14 @@ export default function Cart({}: InferGetStaticPropsType<
     <div className="grid lg:grid-cols-12">
       <div className="lg:col-span-8">
         {isEmpty ? (
-          <div className="flex-1 px-4 flex flex-col justify-center items-center ">
-            <span className="border border-dashed border-white rounded-full flex items-center justify-center w-16 h-16 bg-black p-12 rounded-lg text-white">
+          <div className="flex-1 px-12 py-24 flex flex-col justify-center items-center ">
+            <span className="border border-dashed border-secondary rounded-full flex items-center justify-center w-16 h-16 bg-primary p-12 rounded-lg text-primary">
               <Bag className="absolute" />
             </span>
             <h2 className="pt-6 text-2xl font-bold tracking-wide text-center">
               Your cart is empty
             </h2>
-            <p className="text-accents-2 px-10 text-center pt-2">
+            <p className="text-accents-6 px-10 text-center pt-2">
               Biscuit oat cake wafer icing ice cream tiramisu pudding cupcake.
             </p>
           </div>
diff --git a/pages/orders.tsx b/pages/orders.tsx
index 87c74ac8e..37ba013a8 100644
--- a/pages/orders.tsx
+++ b/pages/orders.tsx
@@ -1,10 +1,21 @@
 import { Layout } from '@components/core'
 import { Container, Text } from '@components/ui'
-
+import { Bag } from '@components/icons'
 export default function Orders() {
   return (
     <Container>
       <Text variant="pageHeading">My Orders</Text>
+      <div className="flex-1 p-24 flex flex-col justify-center items-center ">
+        <span className="border border-dashed border-secondary rounded-full flex items-center justify-center w-16 h-16 p-12 bg-primary text-primary">
+          <Bag className="absolute" />
+        </span>
+        <h2 className="pt-6 text-2xl font-bold tracking-wide text-center">
+          No orders found
+        </h2>
+        <p className="text-accents-6 px-10 text-center pt-2">
+          Biscuit oat cake wafer icing ice cream tiramisu pudding cupcake.
+        </p>
+      </div>
     </Container>
   )
 }