diff --git a/app/components/navbar/index.tsx b/app/components/navbar/index.tsx
index ec7f0156..82070ee8 100644
--- a/app/components/navbar/index.tsx
+++ b/app/components/navbar/index.tsx
@@ -65,7 +65,7 @@ const Navbar = () => {
                 src="/reservoirLogo.svg"
                 width={34}
                 height={39}
-                alt="Reservoir"
+                alt="ZOO"
               />
             </Box>
           </Link>
@@ -103,7 +103,7 @@ const Navbar = () => {
               {theme == 'dark' ? (
                 <Image
                   src="/reservoirMarketLogo.svg"
-                  width={112}
+                  width={69}
                   height={36}
                   alt="Reservoir"
                 />
@@ -112,7 +112,7 @@ const Navbar = () => {
                   src="/reservoirMarketLogoLight.svg"
                   width={112}
                   height={36}
-                  alt="Reservoir"
+                  alt="ZOO"
                 />
               )}
             </Box>
@@ -134,7 +134,7 @@ const Navbar = () => {
             <Link href="/portfolio">
               <NavItem active={router.pathname == '/portfolio'}>Sell</NavItem>
             </Link>
-            <Link href="https://docs.reservoir.tools/docs">
+            <Link href="https://docs.zoolabs.io">
               <NavItem active={false}>Docs</NavItem>
             </Link>
           </Flex>
diff --git a/app/stitches.config.ts b/app/stitches.config.ts
index 3718c213..57c6bcab 100644
--- a/app/stitches.config.ts
+++ b/app/stitches.config.ts
@@ -2,18 +2,17 @@ import {
   crimson,
   slate,
   crimsonDark,
-  violetDark,
+  indigoDark,
   slateDark,
   greenDark,
   green,
-  violetDarkA,
+  indigoDarkA,
   whiteA,
   redDark,
   red,
   blackA,
-  violet,
-  violetA,
   indigo,
+  indigoA,
 } from '@radix-ui/colors'
 import { createStitches } from '@stitches/react'
 import type * as Stitches from '@stitches/react'
@@ -35,8 +34,8 @@ export const { createTheme, keyframes, styled, globalCss, getCssText } =
     theme: {
       colors: {
         ...crimson,
-        ...violet,
-        ...violetA,
+        ...indigo,
+        ...indigoA,
         ...slate,
         ...red,
         ...whiteA,
@@ -47,32 +46,32 @@ export const { createTheme, keyframes, styled, globalCss, getCssText } =
         //Aliases
 
         //Primary
-        primary1: '$violet1',
-        primary2: '$violet2',
-        primary3: '$violet3',
-        primary4: '$violet4',
-        primary5: '$violet5',
-        primary6: '$violet6',
-        primary7: '$violet7',
-        primary8: '$violet8',
-        primary9: '$violet9',
-        primary10: '$violet10',
-        primary11: '$violet11',
-        primary12: '$violet12',
+        primary1: '$indigo1',
+        primary2: '$indigo2',
+        primary3: '$indigo3',
+        primary4: '$indigo4',
+        primary5: '$indigo5',
+        primary6: '$indigo6',
+        primary7: '$indigo7',
+        primary8: '$indigo8',
+        primary9: '$indigo9',
+        primary10: '$indigo10',
+        primary11: '$indigo11',
+        primary12: '$indigo12',
 
         //Secondary
-        secondary1: '$violetA1',
-        secondary2: '$violetA2',
-        secondary3: '$violetA3',
-        secondary4: '$violetA4',
-        secondary5: '$violetA5',
-        secondary6: '$violetA6',
-        secondary7: '$violetA7',
-        secondary8: '$violetA8',
-        secondary9: '$violetA9',
-        secondary10: '$violetA10',
-        secondary11: '$violetA11',
-        secondary12: '$violetA12',
+        secondary1: '$indigoA1',
+        secondary2: '$indigoA2',
+        secondary3: '$indigoA3',
+        secondary4: '$indigoA4',
+        secondary5: '$indigoA5',
+        secondary6: '$indigoA6',
+        secondary7: '$indigoA7',
+        secondary8: '$indigoA8',
+        secondary9: '$indigoA9',
+        secondary10: '$indigoA10',
+        secondary11: '$indigoA11',
+        secondary12: '$indigoA12',
 
         //Gray
         gray1: '$slate1',
@@ -237,8 +236,8 @@ export const globalReset = globalCss(reset)
 export const darkTheme = createTheme({
   colors: {
     ...crimsonDark,
-    ...violetDark,
-    ...violetDarkA,
+    ...indigoDark,
+    ...indigoDarkA,
     ...slateDark,
     ...greenDark,
     ...whiteA,
@@ -248,32 +247,32 @@ export const darkTheme = createTheme({
     //Aliases
 
     //Primary
-    primary1: '$violet1',
-    primary2: '$violet2',
-    primary3: '$violet3',
-    primary4: '$violet4',
-    primary5: '$violet5',
-    primary6: '$violet6',
-    primary7: '$violet7',
-    primary8: '$violet8',
-    primary9: '$violet9',
-    primary10: '$violet10',
-    primary11: '$violet11',
-    primary12: '$violet12',
+    primary1: '$indigo1',
+    primary2: '$indigo2',
+    primary3: '$indigo3',
+    primary4: '$indigo4',
+    primary5: '$indigo5',
+    primary6: '$indigo6',
+    primary7: '$indigo7',
+    primary8: '$indigo8',
+    primary9: '$indigo9',
+    primary10: '$indigo10',
+    primary11: '$indigo11',
+    primary12: '$indigo12',
 
     //Secondary
-    secondary1: '$violetA1',
-    secondary2: '$violetA2',
-    secondary3: '$violetA3',
-    secondary4: '$violetA4',
-    secondary5: '$violetA5',
-    secondary6: '$violetA6',
-    secondary7: '$violetA7',
-    secondary8: '$violetA8',
-    secondary9: '$violetA9',
-    secondary10: '$violetA10',
-    secondary11: '$violetA11',
-    secondary12: '$violetA12',
+    secondary1: '$indigoA1',
+    secondary2: '$indigoA2',
+    secondary3: '$indigoA3',
+    secondary4: '$indigoA4',
+    secondary5: '$indigoA5',
+    secondary6: '$indigoA6',
+    secondary7: '$indigoA7',
+    secondary8: '$indigoA8',
+    secondary9: '$indigoA9',
+    secondary10: '$indigoA10',
+    secondary11: '$indigoA11',
+    secondary12: '$indigoA12',
 
     //Gray
     gray1: '$slate1',