From bafcc47f78fb1cca7770b9baf7778d78578f5e5f Mon Sep 17 00:00:00 2001
From: Niall Maher <niall@codu.ie>
Date: Wed, 19 Apr 2023 09:23:57 +0100
Subject: [PATCH 1/4] Update Tailwind config with new black

---
 tailwind.config.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tailwind.config.js b/tailwind.config.js
index 4e5366a6..6d0ce590 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -6,7 +6,7 @@ module.exports = {
   theme: {
     extend: {
       colors: {
-        smoke: "#0d1117",
+        black: "#040404",
       },
     },
   },

From 0f98750832cd8e37efe797186d4233d4aebc11b3 Mon Sep 17 00:00:00 2001
From: Niall Maher <niall@codu.ie>
Date: Wed, 19 Apr 2023 09:24:55 +0100
Subject: [PATCH 2/4] Update globals to use neutral gray

---
 styles/globals.css | 27 +++++++++++++--------------
 1 file changed, 13 insertions(+), 14 deletions(-)

diff --git a/styles/globals.css b/styles/globals.css
index 728d1031..1de3feb3 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -1,8 +1,7 @@
 @tailwind base;
 
 body {
-  background-color: #000;
-  color: #fff;
+  @apply bg-black text-white;
 }
 
 #__next {
@@ -28,7 +27,7 @@ body {
   [multiple],
   textarea,
   select {
-    @apply mt-1 bg-black focus:outline-none focus:ring-2 focus:ring-gray-300 ring-offset-1 block w-full shadow-sm sm:text-sm border-white border-2 px-2 py-2 disabled:opacity-50 text-white;
+    @apply mt-1 bg-black focus:outline-none focus:ring-2 focus:ring-neutral-300 ring-offset-1 block w-full shadow-sm sm:text-sm border-white border-2 px-2 py-2 disabled:opacity-50 text-white;
   }
 
   label {
@@ -37,11 +36,11 @@ body {
 }
 
 .primary-button {
-  @apply items-center bg-gradient-to-r from-orange-400 to-pink-600 rounded-md shadow-sm py-2 px-4 inline-flex justify-center font-medium text-white hover:from-orange-300 hover:to-pink-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-300 disabled:from-slate-500 disabled:to-slate-700 disabled:border-slate-300 disabled:text-slate-300 disabled:hover:text-slate-300 transition-colors;
+  @apply items-center bg-gradient-to-r from-orange-400 to-pink-600 rounded-md shadow-sm py-2 px-4 inline-flex justify-center font-medium text-white hover:from-orange-300 hover:to-pink-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-300 disabled:from-neutral-500 disabled:to-neutral-700 disabled:border-neutral-300 disabled:text-neutral-300 disabled:hover:text-neutral-300 transition-colors;
 }
 
 .secondary-button {
-  @apply items-center border-2 hover:bg-slate-700 bg-gradient-to-r rounded-md shadow-sm py-2 px-4 inline-flex justify-center font-medium text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-300;
+  @apply items-center border-2 hover:bg-neutral-700 bg-gradient-to-r rounded-md shadow-sm py-2 px-4 inline-flex justify-center font-medium text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-300;
 }
 
 .fancy-link {
@@ -72,7 +71,7 @@ body {
 }
 
 .prose .anchor:after {
-  @apply text-gray-300 dark:text-gray-700;
+  @apply text-neutral-300 dark:text-neutral-700;
   content: "#";
 }
 
@@ -81,11 +80,11 @@ body {
 }
 
 .prose pre {
-  @apply border border-gray-200 bg-gray-100 dark:border-gray-700 dark:bg-smoke;
+  @apply border border-neutral-200 bg-neutral-100 dark:border-neutral-700 dark:bg-black;
 }
 
 .prose code {
-  @apply text-gray-800 dark:text-gray-200 px-1 py-0.5 border border-gray-100 dark:border-gray-800 rounded-lg bg-gray-100 dark:bg-smoke font-mono;
+  @apply text-neutral-800 dark:text-neutral-200 px-1 py-0.5 border border-neutral-100 dark:border-neutral-800 rounded-lg bg-neutral-100 dark:bg-black font-mono;
 }
 
 .prose code:after {
@@ -97,7 +96,7 @@ body {
 }
 
 .prose pre code {
-  @apply text-gray-800 dark:text-gray-200 p-0;
+  @apply text-neutral-800 dark:text-neutral-200 p-0;
   border: initial;
 }
 
@@ -116,11 +115,11 @@ body {
 .token.prolog,
 .token.doctype,
 .token.cdata {
-  @apply text-gray-700 dark:text-gray-300;
+  @apply text-neutral-700 dark:text-neutral-300;
 }
 
 .token.punctuation {
-  @apply text-gray-700 dark:text-gray-300;
+  @apply text-neutral-700 dark:text-neutral-300;
 }
 
 .token.property,
@@ -169,7 +168,7 @@ body {
 
 code[class*="language-"],
 pre[class*="language-"] {
-  @apply text-gray-800 dark:text-gray-50;
+  @apply text-neutral-800 dark:text-neutral-50;
 }
 
 pre::-webkit-scrollbar {
@@ -182,7 +181,7 @@ pre {
 }
 
 .rehype-code-title {
-  @apply px-5 py-3 font-mono text-sm font-bold text-gray-800 bg-gray-200 border border-b-0 border-gray-200 rounded-t-lg dark:text-gray-200 dark:border-gray-700 dark:bg-gray-800;
+  @apply px-5 py-3 font-mono text-sm font-bold text-neutral-800 bg-neutral-200 border border-b-0 border-neutral-200 rounded-t-lg dark:text-neutral-200 dark:border-neutral-700 dark:bg-neutral-800;
 }
 
 .rehype-code-title + pre {
@@ -190,7 +189,7 @@ pre {
 }
 
 .highlight-line {
-  @apply block px-4 -mx-4 bg-gray-100 border-l-4 border-blue-500 dark:bg-gray-800;
+  @apply block px-4 -mx-4 bg-neutral-100 border-l-4 border-blue-500 dark:bg-neutral-800;
 }
 
 /* Remove Safari input shadow on mobile */

From 7e17bf70cd9ba05936af9807fb57324216d81fdd Mon Sep 17 00:00:00 2001
From: Niall Maher <niall@codu.ie>
Date: Wed, 19 Apr 2023 09:27:00 +0100
Subject: [PATCH 3/4] Remove slate, gray and smoke colors

---
 components/ArticlePreview/ArticleLoading.tsx |  20 +--
 components/ArticlePreview/ArticlePreview.tsx |  16 +--
 components/BioBar/BioBar.tsx                 |   8 +-
 components/Comments/CommentsArea.tsx         |  34 ++---
 components/Footer/Footer.tsx                 |   8 +-
 components/Modal/Modal.tsx                   |   2 +-
 components/Nav/Nav.tsx                       |  42 +++---
 components/PageHeading/PageHeading.tsx       |   2 +-
 components/PromptService/PromptService.tsx   | 130 +++++++++---------
 pages/404.tsx                                |   2 +-
 pages/[username].tsx                         |   4 +-
 pages/alpha/create/[[...postIdArr]].tsx      | 103 ++++++++-------
 pages/articles/[slug].tsx                    |  24 ++--
 pages/articles/index.tsx                     |   6 +-
 pages/code-of-conduct/index.tsx              | 131 +++++++++++++------
 pages/create/[[...postIdArr]].tsx            | 111 +++++++++-------
 pages/get-started/index.tsx                  |   2 +-
 pages/index.tsx                              |  20 +--
 pages/my-posts/index.tsx                     |  36 ++---
 pages/notifications/index.tsx                |  12 +-
 pages/settings/index.tsx                     |  38 +++---
 pages/sponsorship/index.tsx                  |   8 +-
 22 files changed, 417 insertions(+), 342 deletions(-)

diff --git a/components/ArticlePreview/ArticleLoading.tsx b/components/ArticlePreview/ArticleLoading.tsx
index 0653d886..8edab94a 100644
--- a/components/ArticlePreview/ArticleLoading.tsx
+++ b/components/ArticlePreview/ArticleLoading.tsx
@@ -1,24 +1,24 @@
 const ArticleLoading = () => (
-  <div className="border-white border-2 shadow p-4 w-full my-4 bg-smoke">
+  <div className="border-l-4 border-l-pink-600 shadow p-4 w-full my-4 bg-neutral-900">
     <div className="animate-pulse">
       <div className="flex space-x-4">
-        <div className="rounded-full bg-gray-800 h-10 w-10"></div>
+        <div className="rounded-full bg-neutral-800 h-10 w-10"></div>
         <div className="flex-1 space-y-2 py-1">
           <div className="grid grid-cols-8 gap-2">
-            <div className="h-2 bg-gray-800 rounded col-span-2"></div>
+            <div className="h-2 bg-neutral-800 rounded col-span-2"></div>
             <div className="col-span-4" />
-            <div className="h-2 bg-gray-800 rounded col-span-3"></div>
+            <div className="h-2 bg-neutral-800 rounded col-span-3"></div>
           </div>
         </div>
       </div>
       <div className="grid gap-x-4 grid-cols-12 space-y-2 my-4">
-        <div className="h-5 col-span-8 bg-gray-800 rounded mb-4"></div>
-        <div className="h-2 col-span-12 bg-gray-800 rounded"></div>
-        <div className="h-2 col-span-6 bg-gray-800 rounded"></div>
-        <div className="h-2 col-span-6 bg-gray-800 rounded"></div>
-        <div className="h-2 col-span-12 bg-gray-800 rounded"></div>
+        <div className="h-5 col-span-8 bg-neutral-800 rounded mb-4"></div>
+        <div className="h-2 col-span-12 bg-neutral-800 rounded"></div>
+        <div className="h-2 col-span-6 bg-neutral-800 rounded"></div>
+        <div className="h-2 col-span-6 bg-neutral-800 rounded"></div>
+        <div className="h-2 col-span-12 bg-neutral-800 rounded"></div>
       </div>
-      <div className="h-5 col-span-5 bg-gray-800 rounded mt-6 w-40"></div>
+      <div className="h-5 col-span-5 bg-neutral-800 rounded mt-6 w-40"></div>
     </div>
   </div>
 );
diff --git a/components/ArticlePreview/ArticlePreview.tsx b/components/ArticlePreview/ArticlePreview.tsx
index 87370434..2ddcb285 100644
--- a/components/ArticlePreview/ArticlePreview.tsx
+++ b/components/ArticlePreview/ArticlePreview.tsx
@@ -73,7 +73,7 @@ const ArticlePreview: NextPage<Props> = ({
   };
 
   return (
-    <article className="p-4 my-4 shadow-lg border-2 border-white bg-smoke">
+    <article className="border-l-4 border-l-pink-600 p-4 my-4 shadow-lg bg-neutral-900">
       <div className="flex justify-between">
         <div className="flex items-center mb-4">
           <span className="sr-only">{name}</span>
@@ -84,12 +84,12 @@ const ArticlePreview: NextPage<Props> = ({
               alt={`${name}'s avatar`}
             />
           </Link>
-          <div className="flex text-xs text-gray-500 flex-col justify-center">
-            <p className="font-medium text-gray-500">
+          <div className="flex text-xs text-neutral-500 flex-col justify-center">
+            <p className="font-medium text-neutral-500">
               Written by{" "}
               <Link
                 href={`/${username}`}
-                className="text-gray-400 font-semibold"
+                className="text-neutral-400 font-semibold"
               >
                 {name}
               </Link>
@@ -129,7 +129,7 @@ const ArticlePreview: NextPage<Props> = ({
           <div className="flex gap-x-2">
             {showBookmark && (
               <button
-                className="lg:mx-auto p-1 rounded-full hover:bg-slate-800"
+                className="lg:mx-auto p-1 rounded-full hover:bg-neutral-800"
                 onClick={() => {
                   if (bookmarked) return bookmarkPost(id, false);
                   bookmarkPost(id);
@@ -146,7 +146,7 @@ const ArticlePreview: NextPage<Props> = ({
             {menuOptions && (
               <Menu as="div" className="relative">
                 <div>
-                  <Menu.Button className="p-1 rounded-full hover:bg-slate-800">
+                  <Menu.Button className="p-1 rounded-full hover:bg-neutral-800">
                     <span className="sr-only">Open user menu</span>
                     <DotsHorizontalIcon className="w-6 h-6" />
                   </Menu.Button>
@@ -165,7 +165,7 @@ const ArticlePreview: NextPage<Props> = ({
                       <Menu.Item key={item.label}>
                         {"href" in item ? (
                           <Link
-                            className="block px-4 py-2 text-gray-700 hover:bg-gray-200 rounded w-full text-left"
+                            className="block px-4 py-2 text-neutral-700 hover:bg-neutral-200 rounded w-full text-left"
                             key={item.label}
                             href={item.href}
                           >
@@ -173,7 +173,7 @@ const ArticlePreview: NextPage<Props> = ({
                           </Link>
                         ) : (
                           <button
-                            className="block px-4 py-2 text-gray-700 hover:bg-gray-200 rounded w-full text-left"
+                            className="block px-4 py-2 text-neutral-700 hover:bg-neutral-200 rounded w-full text-left"
                             onClick={item.onClick}
                           >
                             {item.label}
diff --git a/components/BioBar/BioBar.tsx b/components/BioBar/BioBar.tsx
index acce03e5..d5a7394b 100644
--- a/components/BioBar/BioBar.tsx
+++ b/components/BioBar/BioBar.tsx
@@ -14,11 +14,11 @@ const BioFooter = ({ author }: Props) => {
 
   const { name, image, bio, username } = author;
   return (
-    <div className="mx-auto pb-4 max-w-xl px-4 sm:px-0">
-      <div className="flex flex-col sm:flex-row md:mx-auto border-t-2 pt-6 border-gray-300 dark:border-gray-800">
+    <div className="mx-auto pb-4">
+      <div className="flex flex-col sm:flex-row md:mx-auto border-t-2 pt-6 border-neutral-300 dark:border-neutral-800">
         <Link href={`/${username}`} className="shrink-0">
           <img
-            className="mr-4 rounded-full object-cover bg-slate-700 h-20 w-20 sm:h-24 sm:w-24 sm:mb-0 mb-2"
+            className="mr-4 rounded-full object-cover bg-neutral-700 h-20 w-20 sm:h-24 sm:w-24 sm:mb-0 mb-2"
             alt={`Avatar for ${name}`}
             src={image}
           />
@@ -26,7 +26,7 @@ const BioFooter = ({ author }: Props) => {
 
         <div className="flex flex-col justify-center">
           {username && (
-            <h4 className="text-lg md:text-xl font-bold text-gray-200">
+            <h4 className="text-lg md:text-xl font-bold text-neutral-200">
               Written by{" "}
               <Link
                 className="underline font-bold text-white"
diff --git a/components/Comments/CommentsArea.tsx b/components/Comments/CommentsArea.tsx
index 8f47b2c1..0ff79db9 100644
--- a/components/Comments/CommentsArea.tsx
+++ b/components/Comments/CommentsArea.tsx
@@ -207,10 +207,10 @@ const CommentsArea = ({ postId, postOwnerId }: Props) => {
             {editCommentBoxId !== id ? (
               <>
                 <div className="flex items-center mb-2 justify-between">
-                  <div className="flex items-center space-x-2 text-sm text-slate-500">
+                  <div className="flex items-center space-x-2 text-sm text-neutral-500">
                     <Link href={`/${username}`}>
                       <img
-                        className="rounded-full object-cover bg-slate-700 h-8 w-8"
+                        className="rounded-full object-cover bg-neutral-700 h-8 w-8"
                         alt={`Avatar for ${name}`}
                         src={image}
                       />
@@ -244,7 +244,7 @@ const CommentsArea = ({ postId, postOwnerId }: Props) => {
                   {isCurrentUser ? (
                     <Menu as="div" className="relative">
                       <div>
-                        <Menu.Button className="p-1 rounded-full hover:bg-slate-800">
+                        <Menu.Button className="p-1 rounded-full hover:bg-neutral-800 bg-neutral-900">
                           <span className="sr-only">Open user menu</span>
                           <DotsHorizontalIcon className="w-6 h-6" />
                         </Menu.Button>
@@ -262,7 +262,7 @@ const CommentsArea = ({ postId, postOwnerId }: Props) => {
                           <>
                             <Menu.Item>
                               <button
-                                className="block px-4 py-2 text-gray-700 hover:bg-gray-200 rounded w-full text-left text-sm"
+                                className="block px-4 py-2 text-neutral-700 hover:bg-neutral-200 rounded w-full text-left text-sm"
                                 onClick={() => {
                                   if (id !== editCommentBoxId) {
                                     setValue("edit", body);
@@ -276,7 +276,7 @@ const CommentsArea = ({ postId, postOwnerId }: Props) => {
                             </Menu.Item>
                             <Menu.Item>
                               <button
-                                className="block px-4 py-2 text-gray-700 hover:bg-gray-200 rounded w-full text-left text-sm"
+                                className="block px-4 py-2 text-neutral-700 hover:bg-neutral-200 rounded w-full text-left text-sm"
                                 onClick={() => {
                                   deleteComment({ id });
                                 }}
@@ -291,7 +291,7 @@ const CommentsArea = ({ postId, postOwnerId }: Props) => {
                   ) : null}
                 </div>
 
-                <div className="border-l-2 border-slate-700 ml-4 pl-2 -mt-2">
+                <div className="border-l-2 border-neutral-700 ml-4 pl-2 -mt-2">
                   <div className="prose prose-invert text-sm overflow-x-scroll">
                     {Markdoc.renderers.react(content, React, {
                       components: markdocComponents,
@@ -300,7 +300,7 @@ const CommentsArea = ({ postId, postOwnerId }: Props) => {
 
                   <div className="flex items-center mt-2 mb-4">
                     <button
-                      className="p-1 mr-1 rounded-full hover:bg-slate-800"
+                      className="p-1 mr-1 rounded-full hover:bg-neutral-800"
                       onClick={() => likeComment(id)}
                     >
                       <HeartIcon
@@ -314,7 +314,7 @@ const CommentsArea = ({ postId, postOwnerId }: Props) => {
                     </span>
                     {depth < 6 && (
                       <button
-                        className="border border-white px-2 py-1 text-xs rounded hover:bg-slate-800"
+                        className="border border-white px-2 py-1 text-xs rounded hover:bg-neutral-800"
                         onClick={() => {
                           if (!session) return signIn();
                           if (showCommentBoxId !== id) {
@@ -391,14 +391,14 @@ const CommentsArea = ({ postId, postOwnerId }: Props) => {
         {loading && (
           <div className="top-0 bottom-0 left-0 right-0 absolute">
             <div className="flex justify-center items-center h-full">
-              <div className="border-4 border-slate-700 border-l-slate-500 animate-spin rounded-full h-8 w-8 opacity-100" />
+              <div className="border-4 border-neutral-700 border-l-neutral-500 animate-spin rounded-full h-8 w-8 opacity-100" />
             </div>
           </div>
         )}
         {session?.user?.image && (
           <div className="flex items-center mb-2">
             <img
-              className="mr-2 rounded-full object-cover bg-slate-700 h-8 w-8"
+              className="mr-2 rounded-full object-cover bg-neutral-700 h-8 w-8"
               alt={`Avatar for ${session.user.name}`}
               src={session.user.image}
             />
@@ -431,7 +431,7 @@ const CommentsArea = ({ postId, postOwnerId }: Props) => {
           <button
             disabled={createCommentStatus === "loading"}
             type="submit"
-            className=" text-gray-300 border-2 hover:text-white primary-button text-sm"
+            className=" text-neutral-300 border-2 hover:text-white primary-button text-sm"
           >
             {editMode ? "Update" : "Submit"}
           </button>
@@ -463,25 +463,25 @@ const CommentsArea = ({ postId, postOwnerId }: Props) => {
   };
 
   return (
-    <section className="w-full bg-smoke border sm:border-2 border-white z-10 relative">
+    <section className="w-full relative">
       {!initiallyLoaded && (
         <div className="top-0 bottom-0 left-0 right-0 absolute z-20">
           <div className="flex justify-center items-center h-full">
-            <div className="border-4 border-slate-700 border-l-slate-500 animate-spin rounded-full h-8 w-8 opacity-100" />
+            <div className="border-4 border-neutral-700 border-l-neutral-500 animate-spin rounded-full h-8 w-8 opacity-100" />
             <span className="sr-only">Loading</span>
           </div>
         </div>
       )}
-      <h2 className="mx-2 sm:mx-4 mt-4 pb-2 text-xl border-b border-gray-800">
+      <h2 className="mt-4 pb-2 text-xl border-b border-neutral-800">
         {initiallyLoaded
           ? `Discussion (${commentsResponse?.count || 0})`
           : "Fetching comments"}
       </h2>
-      <div className="mx-2 sm:mx-4 mt-4">
+      <div className="mt-4">
         {session ? (
           <CommentArea id={0} name="comment" />
         ) : (
-          <div className="mb-4 text-lg pb-4 border-b border-gray-800">
+          <div className="mb-4 text-lg pb-4 border-b border-neutral-800">
             <p className="mb-2">Hey! 👋</p>
             <p className="mb-2">Got something to say?</p>
             <p>
@@ -497,7 +497,7 @@ const CommentsArea = ({ postId, postOwnerId }: Props) => {
           </div>
         )}
       </div>
-      <div className="mx-2 sm:mx-4 mb-8">{generateComments(comments)}</div>
+      <div className="mb-8">{generateComments(comments)}</div>
       <Toaster
         toastOptions={{
           style: {
diff --git a/components/Footer/Footer.tsx b/components/Footer/Footer.tsx
index d8893466..dedff902 100644
--- a/components/Footer/Footer.tsx
+++ b/components/Footer/Footer.tsx
@@ -56,13 +56,13 @@ const Footer = () => {
                   href={item.href}
                   target="_blank"
                   rel="noopener noreferrer"
-                  className="text-base text-gray-500 hover:text-gray-400"
+                  className="text-base text-neutral-500 hover:text-neutral-400"
                 >
                   {item.name}
                 </a>
               ) : (
                 <Link
-                  className="text-base text-gray-500 hover:text-gray-400"
+                  className="text-base text-neutral-500 hover:text-neutral-400"
                   href={item.href}
                 >
                   {item.name}
@@ -78,14 +78,14 @@ const Footer = () => {
               href={item.href}
               target="_blank"
               rel="noopener noreferrer"
-              className="text-gray-500 hover:text-gray-400"
+              className="text-neutral-500 hover:text-neutral-400"
             >
               <span className="sr-only">{item.name}</span>
               <item.icon className="h-6 w-6" aria-hidden="true" />
             </a>
           ))}
         </div>
-        <p className="mt-8 text-center text-base text-gray-500">
+        <p className="mt-8 text-center text-base text-neutral-500">
           &copy; {Temporal.Now.plainDateISO().year} Codú Software Solutions,
           Ltd.
         </p>
diff --git a/components/Modal/Modal.tsx b/components/Modal/Modal.tsx
index a35f7e6c..b6c553cf 100644
--- a/components/Modal/Modal.tsx
+++ b/components/Modal/Modal.tsx
@@ -20,7 +20,7 @@ export function Modal({ open, onClose, children }: Props) {
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-gray-800 bg-opacity-75 transition-opacity" />
+          <div className="fixed inset-0 bg-neutral-800 bg-opacity-75 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed z-10 inset-0 overflow-y-auto">
diff --git a/components/Nav/Nav.tsx b/components/Nav/Nav.tsx
index 2391bc05..b1f68154 100644
--- a/components/Nav/Nav.tsx
+++ b/components/Nav/Nav.tsx
@@ -82,13 +82,13 @@ const Nav = () => {
                           href={item.href}
                           target="_blank"
                           rel="noopener noreferrer"
-                          className="text-gray-300 hover:bg-smoke hover:text-white px-3 py-2 rounded-md"
+                          className="text-neutral-300 hover:bg-neutral-900 hover:text-white px-3 py-2 rounded-md"
                         >
                           {item.name}
                         </a>
                       ) : (
                         <Link
-                          className="text-gray-300 hover:bg-smoke hover:text-white px-3 py-2 rounded-md"
+                          className="text-neutral-300 hover:bg-neutral-900 hover:text-white px-3 py-2 rounded-md"
                           key={item.name}
                           href={item.href}
                         >
@@ -104,7 +104,7 @@ const Nav = () => {
                   {session ? (
                     <>
                       <Link
-                        className="text-gray-300 hover:bg-smoke hover:text-white px-3 py-2 rounded-md"
+                        className="text-neutral-300 hover:bg-neutral-900 hover:text-white px-3 py-2 rounded-md"
                         href="/my-posts"
                       >
                         Your Posts
@@ -120,7 +120,7 @@ const Nav = () => {
                   ) : (
                     <>
                       <button
-                        className="text-gray-300 hover:bg-smoke hover:text-white px-3 py-2 rounded-md"
+                        className="text-neutral-300 hover:bg-neutral-900 hover:text-white px-3 py-2 rounded-md"
                         onClick={() => signIn()}
                       >
                         Sign in
@@ -139,7 +139,7 @@ const Nav = () => {
                       <Link
                         title="Notifications"
                         href="/notifications"
-                        className="relative ml-3 flex-shrink-0 rounded-full bg-black p-1 text-gray-400 hover:text-gray-300 focus:outline-none focus:ring-2 focus:ring-rose-500 focus:ring-offset-2"
+                        className="relative ml-3 flex-shrink-0 rounded-full bg-black p-1 text-neutral-400 hover:text-neutral-300 focus:outline-none focus:ring-2 focus:ring-rose-500 focus:ring-offset-2"
                       >
                         <span className="sr-only">View notifications</span>
                         {hasNotifications && (
@@ -149,16 +149,16 @@ const Nav = () => {
                       </Link>
                       <Menu as="div" className="ml-4 relative">
                         <div>
-                          <Menu.Button className="bg-smoke flex text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
+                          <Menu.Button className="bg-black flex text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-neutral-800 focus:ring-white">
                             <span className="sr-only">Open user menu</span>
                             {session.user?.image ? (
                               <img
-                                className="h-10 w-10 rounded-full bg-gray-300 object-cover"
+                                className="h-10 w-10 rounded-full bg-neutral-300 object-cover"
                                 src={session?.user?.image}
                                 alt={`${session.user?.name}'s avatar`}
                               />
                             ) : (
-                              <div className="h-10 w-10 rounded-full bg-smoke flex justify-center items-center">
+                              <div className="h-10 w-10 rounded-full bg-black flex justify-center items-center">
                                 {session.user?.name?.[0] || "C"}
                               </div>
                             )}
@@ -179,7 +179,7 @@ const Nav = () => {
                                 {item.onClick ? (
                                   <button
                                     className={
-                                      "flex text-left w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-200 rounded"
+                                      "flex text-left w-full px-4 py-2 text-sm text-neutral-700 hover:bg-neutral-200 rounded"
                                     }
                                     onClick={item.onClick}
                                   >
@@ -187,7 +187,7 @@ const Nav = () => {
                                   </button>
                                 ) : (
                                   <Link
-                                    className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-200 rounded"
+                                    className="block px-4 py-2 text-sm text-neutral-700 hover:bg-neutral-200 rounded"
                                     href={item.href || ""}
                                   >
                                     {item.name}
@@ -206,7 +206,7 @@ const Nav = () => {
                 <Link
                   title="Notifications"
                   href="/notifications"
-                  className="relative block mr-3 flex-shrink-0 rounded-md bg-black p-2 text-gray-400 hover:text-gray-300 hover:bg-smoke focus:outline-none focus:ring-2 focus:ring-white focus:ring-inset"
+                  className="relative block mr-3 flex-shrink-0 rounded-md bg-black p-2 text-neutral-400 hover:text-neutral-300 hover:bg-neutral-900 focus:outline-none focus:ring-2 focus:ring-white focus:ring-inset"
                 >
                   <span className="sr-only">View notifications</span>
                   {hasNotifications && (
@@ -215,7 +215,7 @@ const Nav = () => {
                   <BellIcon className="h-6 w-6" aria-hidden="true" />
                 </Link>
                 {/* Mobile menu button */}
-                <Disclosure.Button className="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-smoke focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white">
+                <Disclosure.Button className="inline-flex items-center justify-center p-2 rounded-md text-neutral-400 hover:text-white hover:bg-neutral-900 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white">
                   <span className="sr-only">Open main menu</span>
                   {open ? (
                     <XIcon className="block h-6 w-6" aria-hidden="true" />
@@ -237,7 +237,7 @@ const Nav = () => {
                     href={item.href}
                     target="_blank"
                     rel="noopener noreferrer"
-                    className="text-gray-300 hover:bg-smoke hover:text-white block px-3 py-2 rounded-md text-base font-medium"
+                    className="text-neutral-300 hover:bg-neutral-900 hover:text-white block px-3 py-2 rounded-md text-base font-medium"
                   >
                     {item.name}
                   </Disclosure.Button>
@@ -245,7 +245,7 @@ const Nav = () => {
                   <Link key={item.name} href={item.href}>
                     <Disclosure.Button
                       as="div"
-                      className="text-gray-300 hover:bg-smoke hover:text-white block px-3 py-2 rounded-md text-base font-medium"
+                      className="text-neutral-300 hover:bg-neutral-900 hover:text-white block px-3 py-2 rounded-md text-base font-medium"
                     >
                       {item.name}
                     </Disclosure.Button>
@@ -253,7 +253,7 @@ const Nav = () => {
                 )
               )}
 
-              <div className="pt-3 pb-3 border-t border-gray-700 flex  flex-col space-y-1">
+              <div className="pt-3 pb-3 border-t border-neutral-700 flex  flex-col space-y-1">
                 {session ? (
                   <>
                     {userSubNav.map((item) => (
@@ -261,7 +261,7 @@ const Nav = () => {
                         className={classNames(
                           item.fancy
                             ? "bg-gradient-to-r from-orange-400 to-pink-600 shadow-sm px-4 block justify-center text-white hover:from-orange-300 hover:to-pink-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-300"
-                            : "text-gray-300 hover:bg-smoke hover:text-white block px-3",
+                            : "text-neutral-300 hover:bg-neutral-900 hover:text-white block px-3",
                           "rounded-md text-base font-medium py-2 text-center"
                         )}
                         key={item.name}
@@ -278,7 +278,7 @@ const Nav = () => {
                         className={classNames(
                           item.fancy
                             ? "bg-gradient-to-r from-orange-400 to-pink-600 shadow-sm px-4 block justify-center text-white hover:from-orange-300 hover:to-pink-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-300"
-                            : "text-gray-300 hover:bg-smoke hover:text-white block px-3",
+                            : "text-neutral-300 hover:bg-neutral-900 hover:text-white block px-3",
                           "rounded-md text-base font-medium py-2"
                         )}
                         key={item.name}
@@ -294,7 +294,7 @@ const Nav = () => {
 
             {session && (
               <div className="px-2 pt-2 space-y-1">
-                <div className="pt-4 pb-3 border-t border-gray-700">
+                <div className="pt-4 pb-3 border-t border-neutral-700">
                   <div className="flex items-center px-5">
                     <div className="flex-shrink-0">
                       <img
@@ -307,7 +307,7 @@ const Nav = () => {
                       <div className="text-base font-medium text-white">
                         {session.user?.name}
                       </div>
-                      <div className="text-sm font-medium text-gray-400">
+                      <div className="text-sm font-medium text-neutral-400">
                         {session.user?.email}
                       </div>
                     </div>
@@ -319,7 +319,7 @@ const Nav = () => {
                           key={item.name}
                           as="button"
                           onClick={item.onClick}
-                          className="cursor-pointer block w-full text-left px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-smoke"
+                          className="cursor-pointer block w-full text-left px-3 py-2 rounded-md text-base font-medium text-neutral-400 hover:text-white hover:bg-neutral-900"
                         >
                           {item.name}
                         </Disclosure.Button>
@@ -327,7 +327,7 @@ const Nav = () => {
                         <Link key={item.name} href={item.href}>
                           <Disclosure.Button
                             as="div"
-                            className="cursor-pointer block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-smoke"
+                            className="cursor-pointer block px-3 py-2 rounded-md text-base font-medium text-neutral-400 hover:text-white hover:bg-neutral-900"
                           >
                             {item.name}
                           </Disclosure.Button>
diff --git a/components/PageHeading/PageHeading.tsx b/components/PageHeading/PageHeading.tsx
index 2193a83f..86847a57 100644
--- a/components/PageHeading/PageHeading.tsx
+++ b/components/PageHeading/PageHeading.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 
 const PageHeading = ({ children }: { children: React.ReactNode }) => (
-  <h1 className="text-3xl tracking-tight font-extrabold text-gray-50 sm:text-4xl my-8 border-b-2 pb-4">
+  <h1 className="text-3xl tracking-tight font-extrabold text-neutral-50 sm:text-4xl my-8 border-b-2 pb-4">
     {children}
   </h1>
 );
diff --git a/components/PromptService/PromptService.tsx b/components/PromptService/PromptService.tsx
index 575c75d8..c0ae6d59 100644
--- a/components/PromptService/PromptService.tsx
+++ b/components/PromptService/PromptService.tsx
@@ -1,15 +1,14 @@
-import { useRouter } from 'next/router';
-import React, {useState, useEffect, useCallback} from 'react';
-import { Modal } from '../Modal/Modal';
+import { useRouter } from "next/router";
+import React, { useState, useEffect, useCallback } from "react";
+import { Modal } from "../Modal/Modal";
 import { ExclamationIcon, XIcon } from "@heroicons/react/outline";
-import { Dialog } from '@headlessui/react';
+import { Dialog } from "@headlessui/react";
 
 export interface serviceProps {
   shouldConfirmLeave: boolean;
   updateParent: (...args: any[]) => any;
 }
 
-
 export const PromptDialog = ({
   updateParent,
   shouldConfirmLeave,
@@ -24,95 +23,92 @@ export const PromptDialog = ({
       if (!shouldConfirmLeave) {
         return;
       }
-      updateParent('initial')
+      updateParent("initial");
       setshowPromptDialog(true);
       setNextRouterPath(nextPath);
       // need to throw error to trick router
       // look for better solution in the future
-      router.events.emit('routeChangeError');
-      throw 'Aborting route change. Please ignore this error.';
+      router.events.emit("routeChangeError");
+      throw "Aborting route change. Please ignore this error.";
     },
     [shouldConfirmLeave]
   );
 
   const cancelRouteChange = () => {
-    updateParent('cancel')
+    updateParent("cancel");
     setNextRouterPath(null);
     setshowPromptDialog(false);
   };
 
   const confirmRouteChange = () => {
-    updateParent('confirm')
+    updateParent("confirm");
     setshowPromptDialog(false);
     removeListener();
     router.push(nextRouterPath);
   };
 
   const removeListener = () => {
-    router.events.off('routeChangeStart', routeChangeStart);
+    router.events.off("routeChangeStart", routeChangeStart);
   };
 
   useEffect(() => {
-    router.events.on('routeChangeStart', routeChangeStart);
+    router.events.on("routeChangeStart", routeChangeStart);
     return removeListener;
   }, [routeChangeStart]);
 
   return (
-    <Modal
-      open={showPromptDialog}
-      onClose={cancelRouteChange}
-    >
-        <div className="hidden sm:block absolute top-0 right-0 pt-4 pr-4">
-            <button
-              type="button"
-              className="bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
-              onClick={cancelRouteChange}
-            >
-              <span className="sr-only">Close</span>
-              <XIcon className="h-6 w-6" aria-hidden="true" />
-            </button>
-          </div>
-          <div className="sm:flex sm:items-start">
-            <div className="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
-              <ExclamationIcon
-                className="h-6 w-6 text-red-600"
-                aria-hidden="true"
-              />
-            </div>
-            <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
-              <Dialog.Title
-                as="h3"
-                className="text-lg leading-6 font-medium text-smoke"
-              >
-                Unsaved Changes
-              </Dialog.Title>
-              <div className="mt-2">
-                <p className="text-sm text-gray-500">
-                  You have unsaved changes.
-                </p>
-                <p className="text-sm text-gray-500 mt-2">
-                  Changes that you have made will be lost. 
-                </p>
-              </div>
-            </div>
-          </div>
-          <div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
-            <button
-              type="button"
-              disabled={false}
-              className="w-full inline-flex justify-center border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm"
-              onClick={confirmRouteChange}
-            >
-              Continue without saving
-            </button>
-            <button
-              type="button"
-              className="mt-3 w-full inline-flex justify-center border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:w-auto sm:text-sm"
-              onClick={cancelRouteChange}
-            >
-              keep editing
-            </button>
+    <Modal open={showPromptDialog} onClose={cancelRouteChange}>
+      <div className="hidden sm:block absolute top-0 right-0 pt-4 pr-4">
+        <button
+          type="button"
+          className="bg-white text-neutral-400 hover:text-neutral-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+          onClick={cancelRouteChange}
+        >
+          <span className="sr-only">Close</span>
+          <XIcon className="h-6 w-6" aria-hidden="true" />
+        </button>
+      </div>
+      <div className="sm:flex sm:items-start">
+        <div className="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
+          <ExclamationIcon
+            className="h-6 w-6 text-red-600"
+            aria-hidden="true"
+          />
+        </div>
+        <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+          <Dialog.Title
+            as="h3"
+            className="text-lg leading-6 font-medium text-black"
+          >
+            Unsaved Changes
+          </Dialog.Title>
+          <div className="mt-2">
+            <p className="text-sm text-neutral-500">
+              You have unsaved changes.
+            </p>
+            <p className="text-sm text-neutral-500 mt-2">
+              Changes that you have made will be lost.
+            </p>
           </div>
+        </div>
+      </div>
+      <div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
+        <button
+          type="button"
+          disabled={false}
+          className="w-full inline-flex justify-center border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm"
+          onClick={confirmRouteChange}
+        >
+          Continue without saving
+        </button>
+        <button
+          type="button"
+          className="mt-3 w-full inline-flex justify-center border border-neutral-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-neutral-700 hover:text-neutral-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:w-auto sm:text-sm"
+          onClick={cancelRouteChange}
+        >
+          keep editing
+        </button>
+      </div>
     </Modal>
   );
-};
\ No newline at end of file
+};
diff --git a/pages/404.tsx b/pages/404.tsx
index afc91a96..ab8cee43 100644
--- a/pages/404.tsx
+++ b/pages/404.tsx
@@ -26,7 +26,7 @@ const FourOhFour: NextPage = () => {
             <h1 className="mt-2 text-4xl font-extrabold text-black tracking-tight sm:text-5xl">
               Page not found.
             </h1>
-            <p className="mt-2 text-base text-gray-500">
+            <p className="mt-2 text-base text-neutral-500">
               Sorry, we couldn’t find the page you’re looking for.
             </p>
             <div className="mt-6">
diff --git a/pages/[username].tsx b/pages/[username].tsx
index 52aad86b..ab0b341b 100644
--- a/pages/[username].tsx
+++ b/pages/[username].tsx
@@ -57,7 +57,9 @@ const Profile: NextPage = ({
               </div>
               <div className="flex flex-col justify-center">
                 <h1 className="text-lg md:text-xl font-bold mb-0">{name}</h1>
-                <h2 className="text-gray-400 font-bold text-sm">@{username}</h2>
+                <h2 className="text-neutral-400 font-bold text-sm">
+                  @{username}
+                </h2>
                 <p className="mt-1">{bio}</p>
               </div>
             </main>
diff --git a/pages/alpha/create/[[...postIdArr]].tsx b/pages/alpha/create/[[...postIdArr]].tsx
index c15e9282..16f95be3 100644
--- a/pages/alpha/create/[[...postIdArr]].tsx
+++ b/pages/alpha/create/[[...postIdArr]].tsx
@@ -38,20 +38,26 @@ const Create: NextPage = () => {
   const [shouldRefetch, setShouldRefetch] = useState<boolean>(true);
   const [unsavedChanges, setUnsavedChanges] = useState<boolean>(false);
   const [delayDebounce, setDelayDebounce] = useState<boolean>(false);
-  const allowUpdate = unsavedChanges && !delayDebounce
+  const allowUpdate = unsavedChanges && !delayDebounce;
   const textareaRef = useRef<HTMLTextAreaElement>(null);
 
   useMarkdownHotkeys(textareaRef);
   useMarkdownShortcuts(textareaRef);
 
-  const { handleSubmit, register, watch, reset, getValues, formState: {isDirty} } =
-    useForm<SavePostInput>({
-      mode: "onSubmit",
-      defaultValues: {
-        title: "",
-        body: "",
-      },
-    });
+  const {
+    handleSubmit,
+    register,
+    watch,
+    reset,
+    getValues,
+    formState: { isDirty },
+  } = useForm<SavePostInput>({
+    mode: "onSubmit",
+    defaultValues: {
+      title: "",
+      body: "",
+    },
+  });
 
   const { title, body } = watch();
 
@@ -126,7 +132,7 @@ const Create: NextPage = () => {
     } else {
       save({ ...formData, id: postId });
     }
-    setUnsavedChanges(false)
+    setUnsavedChanges(false);
   };
 
   const hasLoadingState =
@@ -210,12 +216,12 @@ const Create: NextPage = () => {
     setTags(tags.map(({ tag }) => tag.title));
     reset({ body, excerpt, title, id });
   }, [data]);
-  
+
   useEffect(() => {
     if (published) return;
     if ((title + body).length < 5) return;
     if (debouncedValue === (data?.title || "") + data?.body) return;
-    if(allowUpdate)savePost();
+    if (allowUpdate) savePost();
   }, [debouncedValue]);
 
   useEffect(() => {
@@ -229,36 +235,39 @@ const Create: NextPage = () => {
 
   useEffect(() => {
     if ((title + body).length < 5) return;
-    if(isDirty)setUnsavedChanges(true)
-  }, [title, body])
+    if (isDirty) setUnsavedChanges(true);
+  }, [title, body]);
 
   const handleOpenDialog = (res: string) => {
-    switch(res) {
-      case 'initial':
+    switch (res) {
+      case "initial":
         setDelayDebounce(true);
         break;
-      case 'confirm':
+      case "confirm":
         setUnsavedChanges(false);
         setDelayDebounce(false);
         break;
-      case 'cancel':
+      case "cancel":
         setDelayDebounce(false);
-        !published && savePost()
+        !published && savePost();
         break;
       default:
         // setting allowUpdate in this case
         setDelayDebounce(false);
         setUnsavedChanges(true);
     }
-  }  
+  };
 
   return (
     <Layout>
       <Fragment>
-        <PromptDialog shouldConfirmLeave={unsavedChanges} updateParent={handleOpenDialog}/>
+        <PromptDialog
+          shouldConfirmLeave={unsavedChanges}
+          updateParent={handleOpenDialog}
+        />
         <form onSubmit={handleSubmit(onSubmit)}>
           <Transition.Root show={open} as={Fragment}>
-            <div className="fixed left-0 bottom-0 top-0 z-50 w-full h-screen bg-smoke">
+            <div className="fixed left-0 bottom-0 top-0 z-50 w-full h-screen bg-black">
               <button
                 type="button"
                 className="absolute right-8 top-8 underline cursor-pointer z-50"
@@ -278,7 +287,7 @@ const Create: NextPage = () => {
                         rows={3}
                         {...register("excerpt")}
                       />
-                      <p className="mt-2 text-sm text-gray-400">
+                      <p className="mt-2 text-sm text-neutral-400">
                         What readers will see before they click on your article.
                         Good SEO descriptions utilize keywords, summarize the
                         story and are between 140-156 characters long.
@@ -303,17 +312,17 @@ const Create: NextPage = () => {
                       {tags.map((tag) => (
                         <div
                           key={tag}
-                          className="bg-gray-300 inline-flex items-center text-sm mt-2 mr-1 overflow-hidden"
+                          className="bg-neutral-300 inline-flex items-center text-sm mt-2 mr-1 overflow-hidden"
                         >
                           <span
-                            className="ml-2 mr-1 leading-relaxed truncate max-w-xs px-1 text-xs text-smoke font-semibold"
+                            className="ml-2 mr-1 leading-relaxed truncate max-w-xs px-1 text-xs text-black font-semibold"
                             x-text="tag"
                           >
                             {tag}
                           </span>
                           <button
                             onClick={() => onDelete(tag)}
-                            className="w-6 h-6 inline-block align-middle text-white bg-gray-600 focus:outline-none"
+                            className="w-6 h-6 inline-block align-middle text-white bg-neutral-600 focus:outline-none"
                           >
                             <svg
                               className="w-6 h-6 fill-current mx-auto"
@@ -328,12 +337,12 @@ const Create: NextPage = () => {
                           </button>
                         </div>
                       ))}
-                      <p className="mt-2 text-sm text-gray-400">
-                        Tag with up to 5 topics. This makes it easier for readers
-                        to find and know what your story is about.
+                      <p className="mt-2 text-sm text-neutral-400">
+                        Tag with up to 5 topics. This makes it easier for
+                        readers to find and know what your story is about.
                       </p>
                     </div>
-                    <div className="col-span-12  border-b border-gray-300 pb-4">
+                    <div className="col-span-12  border-b border-neutral-300 pb-4">
                       <Disclosure>
                         {({ open }) => (
                           <>
@@ -342,11 +351,13 @@ const Create: NextPage = () => {
                               <ChevronUpIcon
                                 className={`${
                                   open ? "rotate-180 transform" : ""
-                                } h-5 w-5 text-gray-400`}
+                                } h-5 w-5 text-neutral-400`}
                               />
                             </Disclosure.Button>
                             <Disclosure.Panel className="pt-4 pb-2">
-                              <label htmlFor="canonicalUrl">Canonical URL</label>
+                              <label htmlFor="canonicalUrl">
+                                Canonical URL
+                              </label>
                               <input
                                 id="canonicalUrl"
                                 type="text"
@@ -354,7 +365,7 @@ const Create: NextPage = () => {
                                 defaultValue=""
                                 {...register("canonicalUrl")}
                               />
-                              <p className="mt-2 text-sm text-gray-400">
+                              <p className="mt-2 text-sm text-neutral-400">
                                 Add this if the post was originally published
                                 elsewhere and you want to link to it as the
                                 original source.
@@ -369,7 +380,7 @@ const Create: NextPage = () => {
                         <button
                           type="button"
                           disabled={isDisabled}
-                          className="bg-white border border-gray-300 shadow-sm py-2 px-4 inline-flex justify-center text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-300"
+                          className="bg-white border border-neutral-300 shadow-sm py-2 px-4 inline-flex justify-center text-sm font-medium text-neutral-700 hover:bg-neutral-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-300"
                           onClick={async () => {
                             if (isDisabled) return;
                             await savePost();
@@ -420,7 +431,7 @@ const Create: NextPage = () => {
                   <div className="absolute top-0 mt-1 w-3 h-3 rounded-full bg-gradient-to-r from-orange-400 to-pink-600 shadow-sm"></div>
                   <div className="absolute top-0 mt-1 w-3 h-3 rounded-full bg-gradient-to-r from-orange-400 to-pink-600 shadow-sm"></div>
                 </div>
-                <div className="text-gray-400 text-xs font-medium mt-2 text-center">
+                <div className="text-neutral-400 text-xs font-medium mt-2 text-center">
                   Fetching post data.
                 </div>
               </div>
@@ -435,11 +446,11 @@ const Create: NextPage = () => {
                   <div className="h-full pl-4 pr-6 py-6 sm:pl-6 xl:pl-0  lg:px-4">
                     {/* Start left column area */}
                     <div className="h-full relative">
-                      <div className="bg-smoke text-gray-800 border-2 border-white shadow-xl p-6">
+                      <div className="bg-black text-neutral-800 border-2 border-white shadow-xl p-6">
                         <h1 className="text-3xl tracking-tight font-extrabold text-white">
                           {viewPreview ? "Previewing" : "Editing"} your post
                         </h1>
-                        <p className="mt-1 text-gray-400">
+                        <p className="mt-1 text-neutral-400">
                           The body of your content can be edited using markdown.
                           Your post remains private until you
                           &#8220;publish&#8221; the article.
@@ -447,8 +458,10 @@ const Create: NextPage = () => {
                         <div className="flex">
                           <button
                             type="button"
-                            className="bg-white border border-gray-300 shadow-sm py-2 px-4 inline-flex justify-center text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-300 mt-4"
-                            onClick={() => setViewPreview((current) => !current)}
+                            className="bg-white border border-neutral-300 shadow-sm py-2 px-4 inline-flex justify-center text-sm font-medium text-neutral-700 hover:bg-neutral-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-300 mt-4"
+                            onClick={() =>
+                              setViewPreview((current) => !current)
+                            }
                           >
                             {viewPreview ? "Back to editing" : "View preview"}
                           </button>
@@ -462,7 +475,7 @@ const Create: NextPage = () => {
                   <div className="h-full py-0 lg:py-6 px-4 sm:px-6 lg:px-4 ">
                     {/* Start main area*/}
                     <div className="relative h-full">
-                      <div className="bg-smoke text-white border-2 border-white shadow-xl">
+                      <div className="bg-black text-white border-2 border-white shadow-xl">
                         {viewPreview ? (
                           <section className="mx-auto pb-4 max-w-xl py-6 px-4 sm:p-6 lg:pb-8">
                             <h2 className="pt-4 sm:my-5 text-3xl font-bold leading-tight">
@@ -488,7 +501,7 @@ const Create: NextPage = () => {
                           <div className="py-6 px-4 sm:p-6 lg:pb-8">
                             <input
                               autoFocus
-                              className="border-none text-2xl leading-5 outline-none bg-smoke focus:bg-black"
+                              className="border-none text-2xl leading-5 outline-none bg-black focus:bg-black"
                               placeholder="Article title"
                               type="text"
                               aria-label="Post Content"
@@ -497,7 +510,7 @@ const Create: NextPage = () => {
 
                             <CustomTextareaAutosize
                               placeholder="Enter your content here 💖"
-                              className="border-none text-lg outline-none shadow-none mb-8 bg-smoke focus:bg-black"
+                              className="border-none text-lg outline-none shadow-none mb-8 bg-black focus:bg-black"
                               minRows={25}
                               {...register("body")}
                               inputRef={textareaRef}
@@ -514,7 +527,7 @@ const Create: NextPage = () => {
                                   </p>
                                 )}
                                 {saveStatus === "success" && savedTime && (
-                                  <p className="text-gray-400 text-xs lg:text-sm">
+                                  <p className="text-neutral-400 text-xs lg:text-sm">
                                     {`Saved: ${savedTime.toString()}`}
                                   </p>
                                 )}
@@ -544,11 +557,11 @@ const Create: NextPage = () => {
               <div className="pr-4 sm:pr-6 lg:pr-8 lg:flex-shrink-0 xl:pr-0">
                 <div className="h-full sm:pl-6 xl:pl-4 py-6 lg:w-80 pl-4">
                   {/* Start right column area */}
-                  <div className="bg-smoke text-gray-800 border-2 border-white shadow-xl p-6">
+                  <div className="bg-black text-neutral-800 border-2 border-white shadow-xl p-6">
                     <h3 className="text-xl tracking-tight font-semibold text-white">
                       How to use the editor
                     </h3>
-                    <p className="mt-1 text-gray-400">
+                    <p className="mt-1 text-neutral-400">
                       You can edit and format the main content of your article
                       using Markdown. If you have never used Markdown, you can
                       check out{" "}
diff --git a/pages/articles/[slug].tsx b/pages/articles/[slug].tsx
index d501d793..8458687d 100644
--- a/pages/articles/[slug].tsx
+++ b/pages/articles/[slug].tsx
@@ -123,11 +123,11 @@ const ArticlePage: NextPage = ({
         enterFrom="transform opacity-0 scale-75"
         enterTo="transform opacity-100 scale-100"
       >
-        <div className="bg-smoke border-t-2 border-white fixed lg:w-20 lg:border-r-2 lg:border-b-2 bottom-0 w-full py-2 z-20 lg:rounded-r-lg lg:top-1/2 lg:-translate-y-1/2 lg:h-56 lg:px-2">
+        <div className="bg-neutral-900 border-t border-neutral-700 fixed lg:w-20 lg:border-r lg:border-b bottom-0 w-full py-2 z-20 lg:top-1/2 lg:-translate-y-1/2 lg:h-56 lg:px-2">
           <div className="flex justify-evenly lg:flex-col h-full">
             <div className="flex items-center lg:flex-col">
               <button
-                className="p-1 rounded-full hover:bg-slate-800"
+                className="p-1 rounded-full hover:bg-neutral-800"
                 onClick={() => {
                   if (data?.currentUserLiked) return likePost(post.id, false);
                   likePost(post.id);
@@ -146,7 +146,7 @@ const ArticlePage: NextPage = ({
             </div>
 
             <button
-              className="lg:mx-auto p-1 rounded-full hover:bg-slate-800"
+              className="lg:mx-auto p-1 rounded-full hover:bg-neutral-800"
               onClick={() => {
                 if (!session) {
                   signIn();
@@ -182,7 +182,7 @@ const ArticlePage: NextPage = ({
                   {optionsData.map((item) => (
                     <Menu.Item key={item.label}>
                       <a
-                        className="block px-4 py-2 text-gray-700 hover:bg-gray-200 rounded"
+                        className="block px-4 py-2 text-neutral-700 hover:bg-neutral-200 rounded"
                         target="blank"
                         rel="noopener noreferrer"
                         href={encodeURI(item.href)}
@@ -200,12 +200,9 @@ const ArticlePage: NextPage = ({
 
       <Layout>
         <div className="border-t-2">
-          <section className="mx-auto pb-4 max-w-xl px-4 sm:px-0 break-words">
-            <h2 className="pt-4 sm:my-5 text-3xl font-bold leading-tight">
-              {post.title}
-            </h2>
-
-            <article className="prose prose-invert">
+          <div className="mx-auto pb-4 max-w-3xl px-2 sm:px-4 break-words">
+            <article className="prose prose-invert lg:prose-lg">
+              <h1>{post.title}</h1>
               {Markdoc.renderers.react(content, React, {
                 components: markdocComponents,
               })}
@@ -223,10 +220,9 @@ const ArticlePage: NextPage = ({
                 ))}
               </section>
             )}
-          </section>
-
-          <BioBar author={post.user} />
-          <div className="mx-auto mt-8 pb-4 max-w-xl px-4 sm:px-0">
+          </div>
+          <div className="mx-auto pb-4 max-w-3xl px-2 sm:px-4">
+            <BioBar author={post.user} />
             <CommentsArea postId={post.id} postOwnerId={post.userId} />
           </div>
         </div>
diff --git a/pages/articles/index.tsx b/pages/articles/index.tsx
index e32d9d25..2019b10d 100644
--- a/pages/articles/index.tsx
+++ b/pages/articles/index.tsx
@@ -70,9 +70,9 @@ const ArticlesPage = () => {
       </Head>
       <Layout>
         <div className="border-t border-white">
-          <div className="relative sm:mx-auto max-w-2xl mx-4">
+          <div className="relative sm:mx-auto max-w-2xl mx-2">
             <div className="my-8 border-b-2 pb-4 flex justify-between items-center">
-              <h1 className="text-3xl tracking-tight font-extrabold text-gray-50 sm:text-4xl ">
+              <h1 className="text-3xl tracking-tight font-extrabold text-neutral-50 sm:text-4xl ">
                 {typeof tag === "string" ? (
                   <div className="flex justify-center items-center">
                     <TagIcon className="text-neutral-200 h-6 w-6 mr-3" />
@@ -89,7 +89,7 @@ const ArticlesPage = () => {
                 <select
                   id="filter"
                   name="filter"
-                  className="capitalize mt-2 block w-full rounded-md border-0 py-1.5 pl-3 pr-10  ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-pink-600 sm:text-sm sm:leading-6 "
+                  className="capitalize mt-2 block w-full rounded-md border-0 py-1.5 pl-3 pr-10  ring-1 ring-inset ring-neutral-300 focus:ring-2 focus:ring-pink-600 sm:text-sm sm:leading-6 "
                   onChange={(e) => {
                     router.push(
                       `/articles?filter=${e.target.value}${
diff --git a/pages/code-of-conduct/index.tsx b/pages/code-of-conduct/index.tsx
index 0de78592..b71a9b8c 100644
--- a/pages/code-of-conduct/index.tsx
+++ b/pages/code-of-conduct/index.tsx
@@ -14,64 +14,110 @@ const CodeOfConduct: NextPage = () => {
                   Code Of Conduct
                 </h1>
 
-                <h2 className="text-xl leading-6 font-semibold tracking-wide text-black mt-12 mb-4">Support us</h2>
-                <p className="mt-3 text-lg text-gray-500">
-                  We as members, contributors, and leaders pledge to make participation in our community a harassment-free experience for
-                  everyone, regardless of age, body size, visible or invisible disability, ethnicity, sex characteristics, gender identity
-                  and expression, level of experience, education, socio-economic status, nationality, personal appearance, race, caste,
-                  color, religion, or sexual identity and orientation.
+                <h2 className="text-xl leading-6 font-semibold tracking-wide text-black mt-12 mb-4">
+                  Support us
+                </h2>
+                <p className="mt-3 text-lg text-neutral-500">
+                  We as members, contributors, and leaders pledge to make
+                  participation in our community a harassment-free experience
+                  for everyone, regardless of age, body size, visible or
+                  invisible disability, ethnicity, sex characteristics, gender
+                  identity and expression, level of experience, education,
+                  socio-economic status, nationality, personal appearance, race,
+                  caste, color, religion, or sexual identity and orientation.
                 </p>
-                <p className="mt-3 text-lg text-gray-500">
-                  We pledge to act and interact in ways that contribute to an open, welcoming, diverse, inclusive, and healthy community.
+                <p className="mt-3 text-lg text-neutral-500">
+                  We pledge to act and interact in ways that contribute to an
+                  open, welcoming, diverse, inclusive, and healthy community.
                 </p>
 
-                <h2 className="text-xl leading-6 font-semibold tracking-wide text-black mt-12 mb-4">Our Standards</h2>
-                <p className="mt-3 text-lg text-gray-500">
-                  Examples of behavior that contributes to a positive environment for our community include:
+                <h2 className="text-xl leading-6 font-semibold tracking-wide text-black mt-12 mb-4">
+                  Our Standards
+                </h2>
+                <p className="mt-3 text-lg text-neutral-500">
+                  Examples of behavior that contributes to a positive
+                  environment for our community include:
                 </p>
-                <ul className="text-lg text-gray-500 list-disc mt-3 pl-8">
-                  <li className="my-4">Demonstrating empathy and kindness toward other people</li>
-                  <li className="my-4">Being respectful of differing opinions, viewpoints, and experiences</li>
-                  <li className="my-4">Giving and gracefully accepting constructive feedback</li>
+                <ul className="text-lg text-neutral-500 list-disc mt-3 pl-8">
                   <li className="my-4">
-                    Accepting responsibility and apologizing to those affected by our mistakes, and learning from the experience
+                    Demonstrating empathy and kindness toward other people
+                  </li>
+                  <li className="my-4">
+                    Being respectful of differing opinions, viewpoints, and
+                    experiences
+                  </li>
+                  <li className="my-4">
+                    Giving and gracefully accepting constructive feedback
+                  </li>
+                  <li className="my-4">
+                    Accepting responsibility and apologizing to those affected
+                    by our mistakes, and learning from the experience
+                  </li>
+                  <li className="my-4">
+                    Focusing on what is best not just for us as individuals, but
+                    for the overall community
                   </li>
-                  <li className="my-4">Focusing on what is best not just for us as individuals, but for the overall community</li>
                 </ul>
 
-                <p className="mt-3 text-lg text-gray-500">Examples of unacceptable behavior include:</p>
-                <ul className="text-lg text-gray-500 list-disc mt-3 pl-8">
-                  <li className="my-4">The use of sexualized language or imagery, and sexual attention or advances of any kind</li>
-                  <li className="my-4">Trolling, insulting or derogatory comments, and personal or political attacks</li>
+                <p className="mt-3 text-lg text-neutral-500">
+                  Examples of unacceptable behavior include:
+                </p>
+                <ul className="text-lg text-neutral-500 list-disc mt-3 pl-8">
+                  <li className="my-4">
+                    The use of sexualized language or imagery, and sexual
+                    attention or advances of any kind
+                  </li>
+                  <li className="my-4">
+                    Trolling, insulting or derogatory comments, and personal or
+                    political attacks
+                  </li>
                   <li className="my-4">Public or private harassment</li>
                   <li className="my-4">
-                    Publishing others’ private information, such as a physical or email address, without their explicit permission
+                    Publishing others’ private information, such as a physical
+                    or email address, without their explicit permission
+                  </li>
+                  <li className="my-4">
+                    Other conduct which could reasonably be considered
+                    inappropriate in a professional setting
                   </li>
-                  <li className="my-4">Other conduct which could reasonably be considered inappropriate in a professional setting</li>
                 </ul>
 
-                <h2 className="text-xl leading-6 font-semibold tracking-wide text-black mt-12 mb-4">Enforcement Responsibilities</h2>
-                <p className="mt-3 text-lg text-gray-500">
-                  Project maintainers are responsible for clarifying and enforcing our standards of acceptable behavior and will take
-                  appropriate and fair corrective action in response to any behavior that they deem inappropriate, threatening, offensive,
+                <h2 className="text-xl leading-6 font-semibold tracking-wide text-black mt-12 mb-4">
+                  Enforcement Responsibilities
+                </h2>
+                <p className="mt-3 text-lg text-neutral-500">
+                  Project maintainers are responsible for clarifying and
+                  enforcing our standards of acceptable behavior and will take
+                  appropriate and fair corrective action in response to any
+                  behavior that they deem inappropriate, threatening, offensive,
                   or harmful.
                 </p>
-                <p className="mt-3 text-lg text-gray-500">
-                  Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits,
-                  issues, and other contributions that are not aligned to this Code of Conduct, and will communicate reasons for moderation
+                <p className="mt-3 text-lg text-neutral-500">
+                  Project maintainers have the right and responsibility to
+                  remove, edit, or reject comments, commits, code, wiki edits,
+                  issues, and other contributions that are not aligned to this
+                  Code of Conduct, and will communicate reasons for moderation
                   decisions when appropriate.
                 </p>
 
-                <h2 className="text-xl leading-6 font-semibold tracking-wide text-black mt-12 mb-4">Scope</h2>
-                <p className="mt-3 text-lg text-gray-500">
-                  This Code of Conduct applies within all community spaces, and also applies when an individual is officially representing
-                  the community in public spaces. Examples of representing our community include using an official e-mail address, posting
-                  via an official social media account, or acting as an appointed representative at an online or offline event.
+                <h2 className="text-xl leading-6 font-semibold tracking-wide text-black mt-12 mb-4">
+                  Scope
+                </h2>
+                <p className="mt-3 text-lg text-neutral-500">
+                  This Code of Conduct applies within all community spaces, and
+                  also applies when an individual is officially representing the
+                  community in public spaces. Examples of representing our
+                  community include using an official e-mail address, posting
+                  via an official social media account, or acting as an
+                  appointed representative at an online or offline event.
                 </p>
 
-                <h2 className="text-xl leading-6 font-semibold tracking-wide text-black mt-12 mb-4">Enforcement</h2>
-                <p className="mt-3 text-lg text-gray-500">
-                  Instances of abusive, harassing, or otherwise unacceptable behavior may be reported to the project team responsible for
+                <h2 className="text-xl leading-6 font-semibold tracking-wide text-black mt-12 mb-4">
+                  Enforcement
+                </h2>
+                <p className="mt-3 text-lg text-neutral-500">
+                  Instances of abusive, harassing, or otherwise unacceptable
+                  behavior may be reported to the project team responsible for
                   enforcement at{" "}
                   <a
                     className="bg-clip-text text-transparent bg-gradient-to-r from-orange-400 to-pink-600 z-20 text-1xl font-bold"
@@ -79,11 +125,14 @@ const CodeOfConduct: NextPage = () => {
                   >
                     hi@codu.co
                   </a>
-                  . All complaints will be reviewed and investigated promptly and fairly.
+                  . All complaints will be reviewed and investigated promptly
+                  and fairly.
                 </p>
 
-                <h2 className="text-xl leading-6 font-semibold tracking-wide text-black mt-12 mb-4">Attribution</h2>
-                <p className="mt-3 text-lg text-gray-500">
+                <h2 className="text-xl leading-6 font-semibold tracking-wide text-black mt-12 mb-4">
+                  Attribution
+                </h2>
+                <p className="mt-3 text-lg text-neutral-500">
                   This Code of Conduct is adapted from the{" "}
                   <a
                     className="bg-clip-text text-transparent bg-gradient-to-r from-orange-400 to-pink-600 z-20 text-1xl font-bold"
diff --git a/pages/create/[[...postIdArr]].tsx b/pages/create/[[...postIdArr]].tsx
index e34ba1d6..4069e50b 100644
--- a/pages/create/[[...postIdArr]].tsx
+++ b/pages/create/[[...postIdArr]].tsx
@@ -37,20 +37,26 @@ const Create: NextPage = () => {
   const [shouldRefetch, setShouldRefetch] = useState<boolean>(true);
   const [unsavedChanges, setUnsavedChanges] = useState<boolean>(false);
   const [delayDebounce, setDelayDebounce] = useState<boolean>(false);
-  const allowUpdate = unsavedChanges && !delayDebounce
+  const allowUpdate = unsavedChanges && !delayDebounce;
   const textareaRef = useRef<HTMLTextAreaElement>(null);
 
   useMarkdownHotkeys(textareaRef);
   useMarkdownShortcuts(textareaRef);
 
-  const { handleSubmit, register, watch, reset, getValues, formState: {isDirty} } =
-    useForm<SavePostInput>({
-      mode: "onSubmit",
-      defaultValues: {
-        title: "",
-        body: "",
-      },
-    });
+  const {
+    handleSubmit,
+    register,
+    watch,
+    reset,
+    getValues,
+    formState: { isDirty },
+  } = useForm<SavePostInput>({
+    mode: "onSubmit",
+    defaultValues: {
+      title: "",
+      body: "",
+    },
+  });
 
   const { title, body } = watch();
 
@@ -125,7 +131,7 @@ const Create: NextPage = () => {
     } else {
       save({ ...formData, id: postId });
     }
-    setUnsavedChanges(false)
+    setUnsavedChanges(false);
   };
 
   const hasLoadingState =
@@ -209,12 +215,12 @@ const Create: NextPage = () => {
     setTags(tags.map(({ tag }) => tag.title));
     reset({ body, excerpt, title, id });
   }, [data]);
-  
+
   useEffect(() => {
     if (published) return;
     if ((title + body).length < 5) return;
     if (debouncedValue === (data?.title || "") + data?.body) return;
-    if(allowUpdate)savePost();
+    if (allowUpdate) savePost();
   }, [debouncedValue]);
 
   useEffect(() => {
@@ -228,36 +234,39 @@ const Create: NextPage = () => {
 
   useEffect(() => {
     if ((title + body).length < 5) return;
-    if(isDirty)setUnsavedChanges(true)
-  }, [title, body])
+    if (isDirty) setUnsavedChanges(true);
+  }, [title, body]);
 
   const handleOpenDialog = (res: string) => {
-    switch(res) {
-      case 'initial':
+    switch (res) {
+      case "initial":
         setDelayDebounce(true);
         break;
-      case 'confirm':
+      case "confirm":
         setUnsavedChanges(false);
         setDelayDebounce(false);
         break;
-      case 'cancel':
+      case "cancel":
         setDelayDebounce(false);
-        !published && savePost()
+        !published && savePost();
         break;
       default:
         // setting allowUpdate in this case
         setDelayDebounce(false);
         setUnsavedChanges(true);
     }
-  }  
+  };
 
   return (
     <Layout>
       <Fragment>
-        <PromptDialog shouldConfirmLeave={unsavedChanges} updateParent={handleOpenDialog}/>
+        <PromptDialog
+          shouldConfirmLeave={unsavedChanges}
+          updateParent={handleOpenDialog}
+        />
         <form onSubmit={handleSubmit(onSubmit)}>
           <Transition.Root show={open} as={Fragment}>
-            <div className="fixed left-0 bottom-0 top-0 z-50 w-full h-screen bg-smoke">
+            <div className="fixed left-0 bottom-0 top-0 z-50 w-full h-screen bg-black">
               <button
                 type="button"
                 className="absolute right-8 top-8 underline cursor-pointer z-50"
@@ -277,7 +286,7 @@ const Create: NextPage = () => {
                         rows={3}
                         {...register("excerpt")}
                       />
-                      <p className="mt-2 text-sm text-gray-400">
+                      <p className="mt-2 text-sm text-neutral-400">
                         What readers will see before they click on your article.
                         Good SEO descriptions utilize keywords, summarize the
                         story and are between 140-156 characters long.
@@ -302,17 +311,17 @@ const Create: NextPage = () => {
                       {tags.map((tag) => (
                         <div
                           key={tag}
-                          className="bg-gray-300 inline-flex items-center text-sm mt-2 mr-1 overflow-hidden"
+                          className="bg-neutral-300 inline-flex items-center text-sm mt-2 mr-1 overflow-hidden"
                         >
                           <span
-                            className="ml-2 mr-1 leading-relaxed truncate max-w-xs px-1 text-xs text-smoke font-semibold"
+                            className="ml-2 mr-1 leading-relaxed truncate max-w-xs px-1 text-xs text-black font-semibold"
                             x-text="tag"
                           >
                             {tag}
                           </span>
                           <button
                             onClick={() => onDelete(tag)}
-                            className="w-6 h-6 inline-block align-middle text-white bg-gray-600 focus:outline-none"
+                            className="w-6 h-6 inline-block align-middle text-white bg-neutral-600 focus:outline-none"
                           >
                             <svg
                               className="w-6 h-6 fill-current mx-auto"
@@ -327,12 +336,12 @@ const Create: NextPage = () => {
                           </button>
                         </div>
                       ))}
-                      <p className="mt-2 text-sm text-gray-400">
-                        Tag with up to 5 topics. This makes it easier for readers
-                        to find and know what your story is about.
+                      <p className="mt-2 text-sm text-neutral-400">
+                        Tag with up to 5 topics. This makes it easier for
+                        readers to find and know what your story is about.
                       </p>
                     </div>
-                    <div className="col-span-12  border-b border-gray-300 pb-4">
+                    <div className="col-span-12  border-b border-neutral-300 pb-4">
                       <Disclosure>
                         {({ open }) => (
                           <>
@@ -341,11 +350,13 @@ const Create: NextPage = () => {
                               <ChevronUpIcon
                                 className={`${
                                   open ? "rotate-180 transform" : ""
-                                } h-5 w-5 text-gray-400`}
+                                } h-5 w-5 text-neutral-400`}
                               />
                             </Disclosure.Button>
                             <Disclosure.Panel className="pt-4 pb-2">
-                              <label htmlFor="canonicalUrl">Canonical URL</label>
+                              <label htmlFor="canonicalUrl">
+                                Canonical URL
+                              </label>
                               <input
                                 id="canonicalUrl"
                                 type="text"
@@ -353,7 +364,7 @@ const Create: NextPage = () => {
                                 defaultValue=""
                                 {...register("canonicalUrl")}
                               />
-                              <p className="mt-2 text-sm text-gray-400">
+                              <p className="mt-2 text-sm text-neutral-400">
                                 Add this if the post was originally published
                                 elsewhere and you want to link to it as the
                                 original source.
@@ -368,7 +379,7 @@ const Create: NextPage = () => {
                         <button
                           type="button"
                           disabled={isDisabled}
-                          className="bg-white border border-gray-300 shadow-sm py-2 px-4 inline-flex justify-center text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-300"
+                          className="bg-white border border-neutral-300 shadow-sm py-2 px-4 inline-flex justify-center text-sm font-medium text-neutral-600 hover:bg-neutral-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-300"
                           onClick={async () => {
                             if (isDisabled) return;
                             await savePost();
@@ -385,7 +396,7 @@ const Create: NextPage = () => {
                       >
                         {hasLoadingState ? (
                           <>
-                            <div className="mr-2 animate-spin h-5 w-5 border-2 border-orange-700 border-t-white rounded-full" />
+                            <div className="mr-2 animate-spin h-5 w-5 border-2 border-orange-600 border-t-white rounded-full" />
                             {"Saving"}
                           </>
                         ) : (
@@ -419,7 +430,7 @@ const Create: NextPage = () => {
                   <div className="absolute top-0 mt-1 w-3 h-3 rounded-full bg-gradient-to-r from-orange-400 to-pink-600 shadow-sm"></div>
                   <div className="absolute top-0 mt-1 w-3 h-3 rounded-full bg-gradient-to-r from-orange-400 to-pink-600 shadow-sm"></div>
                 </div>
-                <div className="text-gray-400 text-xs font-medium mt-2 text-center">
+                <div className="text-neutral-400 text-xs font-medium mt-2 text-center">
                   Fetching post data.
                 </div>
               </div>
@@ -434,11 +445,11 @@ const Create: NextPage = () => {
                   <div className="h-full pl-4 pr-6 py-6 sm:pl-6 xl:pl-0  lg:px-4">
                     {/* Start left column area */}
                     <div className="h-full relative">
-                      <div className="bg-smoke text-gray-800 border-2 border-white shadow-xl p-6">
+                      <div className="bg-neutral-900 text-neutral-600 shadow-xl p-6">
                         <h1 className="text-3xl tracking-tight font-extrabold text-white">
                           {viewPreview ? "Previewing" : "Editing"} your post
                         </h1>
-                        <p className="mt-1 text-gray-400">
+                        <p className="mt-1 text-neutral-400">
                           The body of your content can be edited using markdown.
                           Your post remains private until you
                           &#8220;publish&#8221; the article.
@@ -446,8 +457,10 @@ const Create: NextPage = () => {
                         <div className="flex">
                           <button
                             type="button"
-                            className="bg-white border border-gray-300 shadow-sm py-2 px-4 inline-flex justify-center text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-300 mt-4"
-                            onClick={() => setViewPreview((current) => !current)}
+                            className="bg-white border border-neutral-300 shadow-sm py-2 px-4 inline-flex justify-center text-sm font-medium text-neutral-600 hover:bg-neutral-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-300 mt-4"
+                            onClick={() =>
+                              setViewPreview((current) => !current)
+                            }
                           >
                             {viewPreview ? "Back to editing" : "View preview"}
                           </button>
@@ -461,19 +474,17 @@ const Create: NextPage = () => {
                   <div className="h-full py-0 lg:py-6 px-4 sm:px-6 lg:px-4 ">
                     {/* Start main area*/}
                     <div className="relative h-full">
-                      <div className="bg-smoke text-white border-2 border-white shadow-xl">
+                      <div className="bg-neutral-900 text-white  shadow-xl">
                         {viewPreview ? (
                           <section className="mx-auto pb-4 max-w-xl py-6 px-4 sm:p-6 lg:pb-8">
-                            <h2 className="pt-4 sm:my-5 text-3xl font-bold leading-tight">
-                              {title}
-                            </h2>
                             <article
-                              className="prose prose-invert"
+                              className="prose prose-invert lg:prose-lg"
                               style={{
                                 whiteSpace: "pre-wrap",
                                 overflowWrap: "anywhere",
                               }}
                             >
+                              <h1>{title}</h1>
                               {Markdoc.renderers.react(
                                 Markdoc.transform(Markdoc.parse(body), config),
                                 React,
@@ -487,7 +498,7 @@ const Create: NextPage = () => {
                           <div className="py-6 px-4 sm:p-6 lg:pb-8">
                             <input
                               autoFocus
-                              className="border-none text-2xl leading-5 outline-none bg-smoke focus:bg-black"
+                              className="border-none text-2xl leading-5 outline-none bg-neutral-900 focus:bg-black"
                               placeholder="Article title"
                               type="text"
                               aria-label="Post Content"
@@ -496,7 +507,7 @@ const Create: NextPage = () => {
 
                             <CustomTextareaAutosize
                               placeholder="Enter your content here 💖"
-                              className="border-none text-lg outline-none shadow-none mb-8 bg-smoke focus:bg-black"
+                              className="border-none text-lg outline-none shadow-none mb-8 bg-neutral-900 focus:bg-black"
                               minRows={25}
                               {...register("body")}
                               inputRef={textareaRef}
@@ -513,7 +524,7 @@ const Create: NextPage = () => {
                                   </p>
                                 )}
                                 {saveStatus === "success" && savedTime && (
-                                  <p className="text-gray-400 text-xs lg:text-sm">
+                                  <p className="text-neutral-400 text-xs lg:text-sm">
                                     {`Saved: ${savedTime.toString()}`}
                                   </p>
                                 )}
@@ -543,11 +554,11 @@ const Create: NextPage = () => {
               <div className="pr-4 sm:pr-6 lg:pr-8 lg:flex-shrink-0 xl:pr-0">
                 <div className="h-full sm:pl-6 xl:pl-4 py-6 lg:w-80 pl-4">
                   {/* Start right column area */}
-                  <div className="bg-smoke text-gray-800 border-2 border-white shadow-xl p-6">
+                  <div className="bg-neutral-900 text-neutral-600 shadow-xl p-6">
                     <h3 className="text-xl tracking-tight font-semibold text-white">
                       How to use the editor
                     </h3>
-                    <p className="mt-1 text-gray-400">
+                    <p className="mt-1 text-neutral-400">
                       You can edit and format the main content of your article
                       using Markdown. If you have never used Markdown, you can
                       check out{" "}
diff --git a/pages/get-started/index.tsx b/pages/get-started/index.tsx
index f6458002..f392b241 100644
--- a/pages/get-started/index.tsx
+++ b/pages/get-started/index.tsx
@@ -31,7 +31,7 @@ const GetStarted: NextPage = () => {
           <h2 className="mt-6 text-center text-3xl font-extrabold text-white">
             Sign in or create your account
           </h2>
-          <p className="mt-2 text-center text-base text-gray-500">
+          <p className="mt-2 text-center text-base text-neutral-500">
             Or{" "}
             <Link className="font-medium fancy-link" href="/">
               return home
diff --git a/pages/index.tsx b/pages/index.tsx
index fab00e55..87245191 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -77,7 +77,7 @@ const Home: NextPage = () => {
                         </span>
                         .
                       </h1>
-                      <p className="pt-2 text-base text-gray-300 sm:text-xl lg:text-lg xl:text-xl">
+                      <p className="pt-2 text-base text-neutral-300 sm:text-xl lg:text-lg xl:text-xl">
                         Join the Codú community today and become part of the
                         most supportive community of developers out there!
                       </p>
@@ -149,19 +149,19 @@ const Home: NextPage = () => {
                   <h3 className="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-black sm:text-6xl pb-8 border-b-2">
                     Why Codú?
                   </h3>
-                  <p className="mt-8 text-lg text-gray-500">
+                  <p className="mt-8 text-lg text-neutral-500">
                     Developers, rejoice! Codú is the ultimate community for web
                     developers. Here you can learn from your peers, get support
                     when you need it, and collaborate on projects big and small.
                   </p>
-                  <p className="mt-3 text-lg text-gray-500">
+                  <p className="mt-3 text-lg text-neutral-500">
                     {`Codú is the perfect place to sharpen your skills and build
                     your portfolio. With Codú, there's no such thing as a stupid
                     question - we're all here to help each other grow as
                     developers. Plus, our community makes it easy to find
                     collaborators for your next big project.`}
                   </p>
-                  <p className="mt-3 text-lg text-gray-500">
+                  <p className="mt-3 text-lg text-neutral-500">
                     So what are you waiting for? Join Codú today and become part
                     of the most supportive community of developers out there!
                   </p>
@@ -182,7 +182,7 @@ const Home: NextPage = () => {
             <div className="lg:grid grid-cols-2 gap-16 py-4">
               {rules.map(({ title, body }, i) => (
                 <div className="flex flex-col mb-8 lg:mb-0" key={title}>
-                  <div className="text-lg text-gray-400">{`${i + 1}/${
+                  <div className="text-lg text-neutral-400">{`${i + 1}/${
                     rules.length
                   }`}</div>
                   <h4 className="text-3xl leading-8 font-extrabold tracking-tight sm:text-4xl mt-2">
@@ -200,7 +200,7 @@ const Home: NextPage = () => {
                   <h2 className="text-3xl font-extrabold text-black tracking-tight sm:text-4xl">
                     Highlighted members
                   </h2>
-                  <p className="text-xl text-gray-500">
+                  <p className="text-xl text-neutral-500">
                     Our members are better than yours. 😉 This is where we give
                     a little spotlight to some of our awesome members.
                   </p>
@@ -230,7 +230,7 @@ const Home: NextPage = () => {
                                 </span>
                               )}
                             </h3>
-                            <p className="text-gray-500 font-light">
+                            <p className="text-neutral-500 font-light">
                               {person.role}
                             </p>
                           </div>
@@ -243,7 +243,7 @@ const Home: NextPage = () => {
                               <li>
                                 <a
                                   href={person.twitterUrl}
-                                  className="text-gray-500 hover:text-gray-400"
+                                  className="text-neutral-500 hover:text-neutral-400"
                                   target="_blank"
                                   rel="noopener noreferrer"
                                 >
@@ -263,7 +263,7 @@ const Home: NextPage = () => {
                               <li>
                                 <a
                                   href={person.linkedinUrl}
-                                  className="text-gray-500 hover:text-gray-400"
+                                  className="text-neutral-500 hover:text-neutral-400"
                                   target="_blank"
                                   rel="noopener noreferrer"
                                 >
@@ -287,7 +287,7 @@ const Home: NextPage = () => {
                               <li>
                                 <a
                                   href={person.githubUrl}
-                                  className="text-gray-500 hover:text-gray-400"
+                                  className="text-neutral-500 hover:text-neutral-400"
                                   target="_blank"
                                   rel="noopener noreferrer"
                                 >
diff --git a/pages/my-posts/index.tsx b/pages/my-posts/index.tsx
index 26c42af2..0b5efb63 100644
--- a/pages/my-posts/index.tsx
+++ b/pages/my-posts/index.tsx
@@ -75,7 +75,7 @@ const MyPosts: NextPage = ({
           <div className="hidden sm:block absolute top-0 right-0 pt-4 pr-4">
             <button
               type="button"
-              className="bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+              className="bg-white text-neutral-400 hover:text-neutral-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
               onClick={() => setSelectedArticleToDelete(undefined)}
             >
               <span className="sr-only">Close</span>
@@ -92,15 +92,15 @@ const MyPosts: NextPage = ({
             <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
               <Dialog.Title
                 as="h3"
-                className="text-lg leading-6 font-medium text-smoke"
+                className="text-lg leading-6 font-medium text-black"
               >
                 Delete article
               </Dialog.Title>
               <div className="mt-2">
-                <p className="text-sm text-gray-500">
+                <p className="text-sm text-neutral-500">
                   Are you sure you want to delete this article?
                 </p>
-                <p className="text-sm text-gray-500 mt-2">
+                <p className="text-sm text-neutral-500 mt-2">
                   All of the data will be permanently removed from our servers
                   forever. This action cannot be undone.
                 </p>
@@ -121,7 +121,7 @@ const MyPosts: NextPage = ({
             </button>
             <button
               type="button"
-              className="mt-3 w-full inline-flex justify-center border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:w-auto sm:text-sm"
+              className="mt-3 w-full inline-flex justify-center border border-neutral-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-neutral-700 hover:text-neutral-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:w-auto sm:text-sm"
               onClick={() => setSelectedArticleToDelete(undefined)}
             >
               Cancel
@@ -129,7 +129,7 @@ const MyPosts: NextPage = ({
           </div>
         </Modal>
         <div className="relative sm:mx-auto max-w-2xl mx-4">
-          <div className="border-b border-gray-200 mt-8 mb-4">
+          <div className="border-b border-neutral-200 mt-8 mb-4">
             <div className="sm:hidden">
               <label htmlFor="tabs" className="sr-only">
                 Select a tab
@@ -158,8 +158,8 @@ const MyPosts: NextPage = ({
                   <Link
                     className={classNames(
                       tab.current
-                        ? "bg-gray-100 text-gray-700"
-                        : "text-gray-200 hover:text-gray-400",
+                        ? "bg-neutral-100 text-neutral-700"
+                        : "text-neutral-200 hover:text-neutral-400",
                       "px-4 py-2 font-medium text-base rounded-t-md"
                     )}
                     aria-current={tab.current ? "page" : undefined}
@@ -186,7 +186,7 @@ const MyPosts: NextPage = ({
             {selectedTabData.status === "success" &&
               selectedTabData.data?.map(
                 ({ id, title, excerpt, readTimeMins, slug }) => (
-                  <article className="border-2 p-4 mb-4 bg-smoke" key={id}>
+                  <article className="border-2 p-4 mb-4 bg-black" key={id}>
                     {tab === "published" ? (
                       <Link href={`articles/${slug}`}>
                         <h2 className="text-2xl font-semibold mb-2 hover:underline">
@@ -199,7 +199,7 @@ const MyPosts: NextPage = ({
                     <p>
                       {excerpt || "No excerpt yet... Write more to see one."}
                     </p>
-                    <p className="mt-2 font-light text-sm text-gray-400">
+                    <p className="mt-2 font-light text-sm text-neutral-400">
                       Read time so far: {readTimeMins} mins
                     </p>
                     <div className="flex justify-end">
@@ -208,7 +208,7 @@ const MyPosts: NextPage = ({
                         className="relative inline-block text-left"
                       >
                         <div>
-                          <Menu.Button className="inline-flex justify-center w-full border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-indigo-500">
+                          <Menu.Button className="inline-flex justify-center w-full border border-neutral-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-neutral-700 hover:bg-neutral-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-neutral-100 focus:ring-indigo-500">
                             Options
                             <ChevronDownIcon
                               className="-mr-1 ml-2 h-5 w-5"
@@ -226,21 +226,21 @@ const MyPosts: NextPage = ({
                           leaveFrom="transform opacity-100 scale-100"
                           leaveTo="transform opacity-0 scale-95"
                         >
-                          <Menu.Items className="origin-top-right absolute right-0 mt-2 w-40 shadow-lg bg-white ring-1 ring-black ring-opacity-5 divide-y divide-gray-100 focus:outline-none">
+                          <Menu.Items className="origin-top-right absolute right-0 mt-2 w-40 shadow-lg bg-white ring-1 ring-black ring-opacity-5 divide-y divide-neutral-100 focus:outline-none">
                             <div className="py-1">
                               <Menu.Item>
                                 {({ active }) => (
                                   <Link
                                     className={classNames(
                                       active
-                                        ? "bg-gray-100 text-smoke"
-                                        : "text-gray-700",
+                                        ? "bg-neutral-100 text-black"
+                                        : "text-neutral-700",
                                       "group flex items-center px-4 py-2 text-sm"
                                     )}
                                     href={`/create/${id}`}
                                   >
                                     <PencilAltIcon
-                                      className="mr-3 h-5 w-5 text-gray-400 group-hover:text-gray-500"
+                                      className="mr-3 h-5 w-5 text-neutral-400 group-hover:text-neutral-500"
                                       aria-hidden="true"
                                     />
                                     Edit
@@ -256,13 +256,13 @@ const MyPosts: NextPage = ({
                                     }
                                     className={classNames(
                                       active
-                                        ? "bg-gray-100 text-smoke"
-                                        : "text-gray-700",
+                                        ? "bg-neutral-100 text-black"
+                                        : "text-neutral-700",
                                       "group flex items-center px-4 py-2 text-sm w-full"
                                     )}
                                   >
                                     <TrashIcon
-                                      className="mr-3 h-5 w-5 text-gray-400 group-hover:text-gray-500"
+                                      className="mr-3 h-5 w-5 text-neutral-400 group-hover:text-neutral-500"
                                       aria-hidden="true"
                                     />
                                     Delete
diff --git a/pages/notifications/index.tsx b/pages/notifications/index.tsx
index 104f5505..c99d6174 100644
--- a/pages/notifications/index.tsx
+++ b/pages/notifications/index.tsx
@@ -58,14 +58,14 @@ const Notifications = () => {
   const noNotifications = !data?.pages[0].data.length;
 
   const Placeholder = () => (
-    <div className="border-white border-2 border-l-8 shadow p-4 w-full my-4 bg-smoke">
+    <div className="border-white border-2 border-l-8 shadow p-4 w-full my-4 bg-black">
       <div className="animate-pulse">
         <div className="flex space-x-4">
-          <div className="rounded-full bg-gray-800 h-10 w-10"></div>
+          <div className="rounded-full bg-neutral-800 h-10 w-10"></div>
           <div className="flex-1 space-y-2 py-1">
             <div className="grid grid-cols-8 gap-4">
-              <div className="h-4 bg-gray-800 rounded col-span-6"></div>
-              <div className="h-2 bg-gray-800 rounded col-span-3"></div>
+              <div className="h-4 bg-neutral-800 rounded col-span-6"></div>
+              <div className="h-2 bg-neutral-800 rounded col-span-3"></div>
             </div>
           </div>
         </div>
@@ -159,7 +159,7 @@ const Notifications = () => {
                             return null;
                           return (
                             <div key={id}>
-                              <div className="p-4 my-2 border-white border-2 bg-smoke border-l-8 shadow-xl flex justify-between">
+                              <div className="p-4 my-2 border-white border-2 bg-black border-l-8 shadow-xl flex justify-between">
                                 <div>
                                   <div className="flex gap-3 sm:gap-5">
                                     {image && (
@@ -194,7 +194,7 @@ const Notifications = () => {
                                         </Link>
                                         .
                                       </p>
-                                      <time className="text-gray-500 text-sm">
+                                      <time className="text-neutral-500 text-sm">
                                         {readableDate}
                                       </time>
                                     </div>
diff --git a/pages/settings/index.tsx b/pages/settings/index.tsx
index 86944fce..9e552c25 100644
--- a/pages/settings/index.tsx
+++ b/pages/settings/index.tsx
@@ -138,15 +138,18 @@ const Settings: NextPage = ({
           }}
         />
         <div className="mx-auto lg:col-span-9 max-w-2xl flex-grow flex flex-col justify-center w-full px-4 sm:px-6">
-          <div className="bg-smoke text-gray-800 border-2 border-white shadow shadow-slate-50">
-            <form onSubmit={handleSubmit(onSubmit)}>
+          <div className="bg-neutral-900 text-neutral-700 shadow-xl">
+            <form
+              onSubmit={handleSubmit(onSubmit)}
+              className="border border-neutral-900"
+            >
               {/* Profile section */}
-              <div className="py-6 px-4 sm:p-6 lg:pb-8">
+              <div className="py-6 px-4 sm:p-6 lg:pb-8 ">
                 <div>
                   <h2 className="text-3xl tracking-tight font-extrabold text-white">
                     Profile Settings
                   </h2>
-                  <p className="mt-1 text-gray-400">
+                  <p className="mt-1 text-neutral-400">
                     This information will be displayed publicly so be careful
                     what you share.
                   </p>
@@ -229,7 +232,7 @@ const Settings: NextPage = ({
                                   type="file"
                                   accept="image/png, image/gif, image/jpeg, image/webp"
                                   onChange={imageChange}
-                                  className="absolute h-full w-full cursor-pointer rounded-md border-gray-300 opacity-0"
+                                  className="absolute h-full w-full cursor-pointer rounded-md border-neutral-300 opacity-0"
                                 />
                               </div>
                             </div>
@@ -263,7 +266,7 @@ const Settings: NextPage = ({
                               id="desktop-user-photo"
                               name="user-photo"
                               onChange={imageChange}
-                              className="absolute inset-0 h-full w-full cursor-pointer rounded-md border-gray-300 opacity-0"
+                              className="absolute inset-0 h-full w-full cursor-pointer rounded-md border-neutral-300 opacity-0"
                             />
                           </label>
                         </div>
@@ -282,7 +285,7 @@ const Settings: NextPage = ({
                           maxLength={200}
                         />
                       </div>
-                      <div className="mt-2 text-sm text-gray-400 flex justify-between">
+                      <div className="mt-2 text-sm text-neutral-400 flex justify-between">
                         {errors.bio ? (
                           <p className="mt-1 text-sm text-red-600">
                             {`${errors.bio.message || "Required"}`}
@@ -333,17 +336,20 @@ const Settings: NextPage = ({
                       </div>
                     </div>
                   </div>
-                  <div className="pt-6 divide-y divide-gray-200">
+                  <div className="pt-6 divide-y divide-neutral-200">
                     <div>
                       <div>
                         <h2 className="text-xl tracking-tight font-bold text-white">
                           Privacy
                         </h2>
-                        <p className="mt-1 text-sm text-gray-400">
+                        <p className="mt-1 text-sm text-neutral-400">
                           We respect your privacy, change your settings here.
                         </p>
                       </div>
-                      <ul role="list" className="mt-2 divide-y divide-gray-200">
+                      <ul
+                        role="list"
+                        className="mt-2 divide-y divide-neutral-200"
+                      >
                         <Switch.Group
                           as="li"
                           className="py-4 flex items-center justify-between"
@@ -352,7 +358,7 @@ const Settings: NextPage = ({
                             <Switch.Label as="p" className="sr-only" passive>
                               Email notifications
                             </Switch.Label>
-                            <Switch.Description className="text-sm text-gray-400">
+                            <Switch.Description className="text-sm text-neutral-400">
                               Occasional email notifications from the platform.
                             </Switch.Description>
                           </div>
@@ -362,7 +368,7 @@ const Settings: NextPage = ({
                             className={classNames(
                               emailNotifications
                                 ? "bg-green-600"
-                                : "bg-gray-400",
+                                : "bg-neutral-400",
                               "ml-4 relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-300"
                             )}
                           >
@@ -385,7 +391,7 @@ const Settings: NextPage = ({
                             <Switch.Label as="p" className="sr-only" passive>
                               Weekly newsletter
                             </Switch.Label>
-                            <Switch.Description className="text-sm text-gray-400">
+                            <Switch.Description className="text-sm text-neutral-400">
                               Opt-in to our weekly newsletter.
                             </Switch.Description>
                           </div>
@@ -393,7 +399,9 @@ const Settings: NextPage = ({
                             checked={weeklyNewsletter}
                             onChange={setWeeklyNewsletter}
                             className={classNames(
-                              weeklyNewsletter ? "bg-green-600" : "bg-gray-400",
+                              weeklyNewsletter
+                                ? "bg-green-600"
+                                : "bg-neutral-400",
                               "ml-4 relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-300"
                             )}
                           >
@@ -413,7 +421,7 @@ const Settings: NextPage = ({
                     <div className="mt-2 py-4 flex justify-end">
                       <button
                         type="button"
-                        className="bg-white border border-gray-300 shadow-sm py-2 px-4 inline-flex justify-center text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-300"
+                        className="bg-white border border-neutral-300 shadow-sm py-2 px-4 inline-flex justify-center text-sm font-medium text-neutral-700 hover:bg-neutral-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-300"
                       >
                         Cancel
                       </button>
diff --git a/pages/sponsorship/index.tsx b/pages/sponsorship/index.tsx
index 7c204d68..644065e9 100644
--- a/pages/sponsorship/index.tsx
+++ b/pages/sponsorship/index.tsx
@@ -16,17 +16,17 @@ const Sponsorship: NextPage = () => {
                 <h3 className="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-black sm:text-6xl pb-8 border-b-2">
                   Sponsor Codú
                 </h3>
-                <p className="mt-8 text-lg text-gray-500">
+                <p className="mt-8 text-lg text-neutral-500">
                   Our work and events would not be possible without the support
                   of our partners.
                 </p>
-                <p className="mt-3 text-lg text-gray-500">
+                <p className="mt-3 text-lg text-neutral-500">
                   {`Codú is the perfect place to show your company's support of open source software, find new developers and fund the next generation of avid learners.`}
                 </p>
-                <p className="mt-3 text-lg text-gray-500">
+                <p className="mt-3 text-lg text-neutral-500">
                   {`Sponsors can post jobs to our network of thousands of developers (and growing), brand at our events, and advertise in our newsletter.`}
                 </p>
-                <p className="mt-3 text-lg text-gray-500"></p>
+                <p className="mt-3 text-lg text-neutral-500"></p>
                 <div className="relative">
                   <p className="text-black mt-8 text-lg font-semibold">
                     For more info contact us:

From f6e136d066d153d28fdb398cce11273fdd74c974 Mon Sep 17 00:00:00 2001
From: Niall Maher <niall@codu.ie>
Date: Wed, 19 Apr 2023 09:42:46 +0100
Subject: [PATCH 4/4] Remove quotes from blockquote

---
 styles/globals.css | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/styles/globals.css b/styles/globals.css
index 1de3feb3..5153ff3a 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -69,6 +69,9 @@ body {
 .prose a {
   @apply transition-all;
 }
+.prose blockquote p::before {
+  content: none;
+}
 
 .prose .anchor:after {
   @apply text-neutral-300 dark:text-neutral-700;