diff --git a/app/(app)/get-started/_client.tsx b/app/(app)/get-started/_client.tsx
index 0ceb9b56..630c53a6 100644
--- a/app/(app)/get-started/_client.tsx
+++ b/app/(app)/get-started/_client.tsx
@@ -39,7 +39,10 @@ const GetStarted: NextPage = () => {
           </h2>
           <p className="mt-2 text-center text-base text-neutral-500">
             Or{" "}
-            <Link className="fancy-link font-medium" href="/">
+            <Link
+              className="cursor-pointer bg-gradient-to-r from-orange-400 to-pink-600 bg-clip-text font-medium tracking-wide text-transparent hover:from-orange-300 hover:to-pink-500"
+              href="/"
+            >
               return home
             </Link>
           </p>
diff --git a/app/(editor)/create/[[...paramsArr]]/_client.tsx b/app/(editor)/create/[[...paramsArr]]/_client.tsx
index 40118161..5b1852f9 100644
--- a/app/(editor)/create/[[...paramsArr]]/_client.tsx
+++ b/app/(editor)/create/[[...paramsArr]]/_client.tsx
@@ -794,7 +794,7 @@ const Create = ({ session }: { session: Session | null }) => {
                       href="https://www.markdownguide.org/"
                       target="_blank"
                       rel="noopener noreferrer"
-                      className="fancy-link"
+                      className="cursor-pointer bg-gradient-to-r from-orange-400 to-pink-600 bg-clip-text tracking-wide text-transparent hover:from-orange-300 hover:to-pink-500"
                     >
                       this
                     </a>{" "}
@@ -803,7 +803,7 @@ const Create = ({ session }: { session: Session | null }) => {
                       href="https://www.markdownguide.org/"
                       target="_blank"
                       rel="noopener noreferrer"
-                      className="fancy-link"
+                      className="cursor-pointer bg-gradient-to-r from-orange-400 to-pink-600 bg-clip-text tracking-wide text-transparent hover:from-orange-300 hover:to-pink-500"
                     >
                       markdownguide
                     </a>
diff --git a/components/ArticlePreview/ArticlePreview.tsx b/components/ArticlePreview/ArticlePreview.tsx
index 930a49f3..6b4a8635 100644
--- a/components/ArticlePreview/ArticlePreview.tsx
+++ b/components/ArticlePreview/ArticlePreview.tsx
@@ -158,7 +158,7 @@ const ArticlePreview: NextPage<Props> = ({
       <div className="flex w-full content-center justify-between">
         <div className="flex w-full items-center justify-between">
           <Link
-            className="fancy-link semibold text-lg"
+            className="semibold cursor-pointer bg-gradient-to-r from-orange-400 to-pink-600 bg-clip-text text-lg tracking-wide text-transparent hover:from-orange-300 hover:to-pink-500"
             href={`/articles/${slug}`}
           >
             Read full article
diff --git a/components/Comments/CommentsArea.tsx b/components/Comments/CommentsArea.tsx
index b21fa286..6e9e621e 100644
--- a/components/Comments/CommentsArea.tsx
+++ b/components/Comments/CommentsArea.tsx
@@ -505,11 +505,17 @@ const CommentsArea = ({ postId, postOwnerId }: Props) => {
             <p className="mb-2">Hey! 👋</p>
             <p className="mb-2">Got something to say?</p>
             <p>
-              <button onClick={() => signIn()} className="fancy-link">
+              <button
+                onClick={() => signIn()}
+                className="cursor-pointer bg-gradient-to-r from-orange-400 to-pink-600 bg-clip-text tracking-wide text-transparent hover:from-orange-300 hover:to-pink-500"
+              >
                 Sign in
               </button>{" "}
               or{" "}
-              <button onClick={() => signIn()} className="fancy-link">
+              <button
+                onClick={() => signIn()}
+                className="cursor-pointer bg-gradient-to-r from-orange-400 to-pink-600 bg-clip-text tracking-wide text-transparent hover:from-orange-300 hover:to-pink-500"
+              >
                 sign up
               </button>{" "}
               to leave a comment.
diff --git a/components/EditorHints/EditorHints.tsx b/components/EditorHints/EditorHints.tsx
index 12eeb952..3452f92a 100644
--- a/components/EditorHints/EditorHints.tsx
+++ b/components/EditorHints/EditorHints.tsx
@@ -29,7 +29,7 @@ const EditorHints = () => {
                 href="https://www.markdownguide.org/"
                 target="_blank"
                 rel="noopener noreferrer"
-                className="fancy-link"
+                className="cursor-pointer bg-gradient-to-r from-orange-400 to-pink-600 bg-clip-text tracking-wide text-transparent hover:from-orange-300 hover:to-pink-500"
               >
                 this
               </a>{" "}
@@ -38,7 +38,7 @@ const EditorHints = () => {
                 href="https://www.markdownguide.org/"
                 target="_blank"
                 rel="noopener noreferrer"
-                className="fancy-link"
+                className="cursor-pointer bg-gradient-to-r from-orange-400 to-pink-600 bg-clip-text tracking-wide text-transparent hover:from-orange-300 hover:to-pink-500"
               >
                 markdownguide
               </a>
diff --git a/styles/globals.css b/styles/globals.css
index 9369387b..ac5849a9 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -81,14 +81,6 @@ body {
   @apply bg-white bg-gradient-to-r text-neutral-800 dark:bg-neutral-900 dark:text-white;
 }
 
-.fancy-link {
-  @apply cursor-pointer bg-gradient-to-r from-orange-400 to-pink-600 bg-clip-text tracking-wide text-transparent;
-}
-
-.fancy-link:hover {
-  @apply from-orange-300 to-pink-500;
-}
-
 .prose {
   @apply prose-neutral dark:prose-invert lg:prose-lg;