diff --git a/daily-thought-frontend/src/components/navigation/NavBar.tsx b/daily-thought-frontend/src/components/navigation/NavBar.tsx
index 839bc5b028df11f69309d3f857c9c3731ca11f69..2671067820139ea3d2be70bc3431e4b95b03e882 100644
--- a/daily-thought-frontend/src/components/navigation/NavBar.tsx
+++ b/daily-thought-frontend/src/components/navigation/NavBar.tsx
@@ -50,8 +50,8 @@ const NavBar: FC<PropsWithChildren<NavBarProps>> = ({
                               href={item.href}
                               className={classNames(
                                 item.current
-                                  ? 'bg-pink-400 text-white'
-                                  : 'text-pink-400 hover:bg-pink-400 hover:text-white',
+                                  ? 'bg-c-pink text-white'
+                                  : 'text-c-pink hover:bg-c-pink hover:text-white',
                                 'rounded-md px-3 py-2 text-sm font-medium'
                               )}
                               aria-current={item.current ? 'page' : undefined}
@@ -72,7 +72,7 @@ const NavBar: FC<PropsWithChildren<NavBarProps>> = ({
                       <div className="ml-4 flex items-center md:ml-6">
                         <button
                           type="button"
-                          className="rounded-full bg-pink-400 p-1 text-white hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-pink-400"
+                          className="rounded-full bg-c-pink p-1 text-white hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-c-pink"
                         >
                           <span className="sr-only">View notifications</span>
                           <BellIcon className="h-6 w-6" aria-hidden="true" />
@@ -81,7 +81,7 @@ const NavBar: FC<PropsWithChildren<NavBarProps>> = ({
                         {/* Profile dropdown */}
                         <Menu as="div" className="relative ml-3">
                           <div>
-                            <Menu.Button className="flex max-w-xs items-center rounded-full bg-green-400 text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-pink-400">
+                            <Menu.Button className="flex max-w-xs items-center rounded-full bg-green-400 text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-c-pink">
                               <span className="sr-only">Open user menu</span>
                               <img className="h-8 w-8 rounded-full" src={user.Avatar} alt="" />
                             </Menu.Button>
@@ -121,7 +121,7 @@ const NavBar: FC<PropsWithChildren<NavBarProps>> = ({
                   {user !== null && 
                     <div className="-mr-2 flex md:hidden">
                       {/* Mobile menu button */}
-                      <Disclosure.Button className="inline-flex items-center justify-center rounded-md bg-white p-2 text-pink-400 hover:bg-pink-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-pink-400">
+                      <Disclosure.Button className="inline-flex items-center justify-center rounded-md bg-white p-2 text-c-pink hover:bg-c-pink hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-c-pink">
                         <span className="sr-only">Open main menu</span>
                         {open ? (
                           <XMarkIcon className="block h-6 w-6" aria-hidden="true" />
@@ -142,7 +142,7 @@ const NavBar: FC<PropsWithChildren<NavBarProps>> = ({
                       as="a"
                       href={item.href}
                       className={classNames(
-                        item.current ? 'bg-pink-400 text-white' : 'text-gray-300 hover:bg-gray-700 hover:text-white',
+                        item.current ? 'bg-c-pink text-white' : 'text-gray-300 hover:bg-gray-700 hover:text-white',
                         'block rounded-md px-3 py-2 text-base font-medium'
                       )}
                       aria-current={item.current ? 'page' : undefined}
@@ -162,7 +162,7 @@ const NavBar: FC<PropsWithChildren<NavBarProps>> = ({
                     </div>
                     <button
                       type="button"
-                      className="ml-auto flex-shrink-0 rounded-full bg-pink-400 p-1 text-white hover:text-pink-400 hover:bg-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-pink-400"
+                      className="ml-auto flex-shrink-0 rounded-full bg-c-pink p-1 text-white hover:text-c-pink hover:bg-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-c-pink"
                     >
                       <span className="sr-only">View notifications</span>
                       <BellIcon className="h-6 w-6" aria-hidden="true" />
@@ -186,7 +186,7 @@ const NavBar: FC<PropsWithChildren<NavBarProps>> = ({
           )}
         </Disclosure>
         <main>
-          <div className="mx-auto max-w-7xl p-3 sm:px-6 lg:px-8">{children}</div>
+          <div className="mx-auto">{children}</div>
         </main>
       </div>
     </>