diff --git a/app/(app)/[username]/_usernameClient.tsx b/app/(app)/[username]/_usernameClient.tsx
index bfe9cda7..d570cb9d 100644
--- a/app/(app)/[username]/_usernameClient.tsx
+++ b/app/(app)/[username]/_usernameClient.tsx
@@ -211,7 +211,7 @@ const Profile = ({ profile, isOwner, session }: Props) => {
                   rows={4}
                   name="note"
                   id="note"
-                  className="block w-full rounded-md border-0 py-1.5  shadow-sm ring-1 ring-inset ring-gray-900 placeholder:text-gray-400 focus:ring-2 focus:ring-inset dark:ring-gray-300  sm:text-sm sm:leading-6"
+                  className="block w-full rounded-md border-0 py-1.5 shadow-sm ring-1 ring-inset ring-gray-900 placeholder:text-gray-400 focus:ring-2 focus:ring-inset dark:ring-gray-300 sm:text-sm sm:leading-6"
                   defaultValue={""}
                 />
               </div>
diff --git a/app/(app)/alpha/additional-details/_client.tsx b/app/(app)/alpha/additional-details/_client.tsx
index 731e27c9..bdef3860 100644
--- a/app/(app)/alpha/additional-details/_client.tsx
+++ b/app/(app)/alpha/additional-details/_client.tsx
@@ -154,7 +154,7 @@ function SlideOne({ details }: { details: UserDetails }) {
           </Field>
         </div>
 
-        <div className="mx-4 mt-4 ">
+        <div className="mx-4 mt-4">
           <Field>
             <Label>Surname</Label>
             <Input
@@ -301,9 +301,9 @@ function SlideTwo({ details }: { details: UserDetails }) {
   };
 
   return (
-    <form className="mx-auto  max-w-sm" onSubmit={handleSubmit(onFormSubmit)}>
+    <form className="mx-auto max-w-sm" onSubmit={handleSubmit(onFormSubmit)}>
       <div className="min-h-[32rem]">
-        <div className="mx-4 ">
+        <div className="mx-4">
           <Heading className="mt-16">Demographic</Heading>
           <Subheading>
             This information is private, but helps us improve
@@ -311,7 +311,7 @@ function SlideTwo({ details }: { details: UserDetails }) {
         </div>
         <Divider className="my-4 mt-4" />
 
-        <div className="mx-4 mt-4 ">
+        <div className="mx-4 mt-4">
           <Field>
             <Label>Gender</Label>
             <Select {...register("gender")} defaultValue="" id="gender">
@@ -333,8 +333,8 @@ function SlideTwo({ details }: { details: UserDetails }) {
         <Divider className="my-4 mt-4" />
 
         <Fieldset>
-          <Legend className="mx-4 ">Date of Birth</Legend>
-          <div className="mx-4 flex justify-between ">
+          <Legend className="mx-4">Date of Birth</Legend>
+          <div className="mx-4 flex justify-between">
             <Field>
               <Select
                 id="year"
@@ -471,7 +471,7 @@ function SlideThree({ details }: { details: UserDetails }) {
   return (
     <form className="mx-auto max-w-sm" onSubmit={handleSubmit(onFormSubmit)}>
       <div className="min-h-[32rem]">
-        <div className="mx-4 ">
+        <div className="mx-4">
           <Heading className="mt-16"> Work and education</Heading>
           <Subheading>
             This information is private but helpful to tailor our events and
@@ -480,7 +480,7 @@ function SlideThree({ details }: { details: UserDetails }) {
         </div>
         <Divider className="my-4 mt-4" />
         <Fieldset>
-          <Field className="mx-4 my-4 ">
+          <Field className="mx-4 my-4">
             <Label>Which best describes you?</Label>
 
             <Select
@@ -504,7 +504,7 @@ function SlideThree({ details }: { details: UserDetails }) {
 
           {getValues("professionalOrStudent") === "Working professional" && (
             <>
-              <Field className="mx-4 my-4 ">
+              <Field className="mx-4 my-4">
                 <Label>Where are you working?</Label>
                 <Input
                   id="workplace"
@@ -518,7 +518,7 @@ function SlideThree({ details }: { details: UserDetails }) {
                 )}
               </Field>
 
-              <Field className="mx-4 my-4 ">
+              <Field className="mx-4 my-4">
                 <Label>What is your job title?</Label>
                 <Input
                   id="job-title"
@@ -536,7 +536,7 @@ function SlideThree({ details }: { details: UserDetails }) {
 
           {getValues("professionalOrStudent") === "Current student" && (
             <>
-              <Field className="mx-4 my-4 ">
+              <Field className="mx-4 my-4">
                 <Label> What is your current level of study?</Label>
                 <Select id="level-of-study" {...register("levelOfStudy")}>
                   <option value="" disabled>
@@ -554,7 +554,7 @@ function SlideThree({ details }: { details: UserDetails }) {
                 )}
               </Field>
 
-              <Field className="mx-4 my-4 ">
+              <Field className="mx-4 my-4">
                 <Label>What are you studying?</Label>
                 <Input
                   id="course"
diff --git a/app/(app)/alpha/new/[[...postIdArr]]/_client.tsx b/app/(app)/alpha/new/[[...postIdArr]]/_client.tsx
index bd24c4a5..3dc3bbaf 100644
--- a/app/(app)/alpha/new/[[...postIdArr]]/_client.tsx
+++ b/app/(app)/alpha/new/[[...postIdArr]]/_client.tsx
@@ -129,7 +129,7 @@ const Create = () => {
                       to find and know what your story is about.
                     </p>
                   </div>
-                  <div className="col-span-12  border-b border-neutral-300 pb-4">
+                  <div className="col-span-12 border-b border-neutral-300 pb-4">
                     <Disclosure>
                       {({ open }) => (
                         <>
@@ -199,7 +199,7 @@ const Create = () => {
           </div>
         </Transition>
         {dataStatus === "loading" && postId && (
-          <div className="bg-gray fixed left-0 top-0 z-40 flex h-screen w-screen items-center justify-center ">
+          <div className="bg-gray fixed left-0 top-0 z-40 flex h-screen w-screen items-center justify-center">
             <div className="z-50 flex flex-col items-center border-2 border-black bg-white px-5 py-2 opacity-100">
               <div className="loader-dots relative mt-2 block h-5 w-20">
                 <div className="absolute top-0 mt-1 h-3 w-3 rounded-full bg-gradient-to-r from-orange-400 to-pink-600 shadow-sm"></div>
@@ -222,7 +222,7 @@ const Create = () => {
                 <div className="h-full min-h-[40rem] px-4 py-0 sm:px-6 lg:px-4 lg:py-6">
                   {/* Start main area*/}
                   <div className="relative h-full">
-                    <div className="bg-neutral-900 text-white  shadow-xl">
+                    <div className="bg-neutral-900 text-white shadow-xl">
                       <div className="bg-neutral-900 px-4 py-6 sm:p-6 lg:pb-8">
                         {!body && (
                           <Controller
diff --git a/app/(app)/alpha/sponsorship/page.tsx b/app/(app)/alpha/sponsorship/page.tsx
index aea0a5d5..82e4d0f3 100644
--- a/app/(app)/alpha/sponsorship/page.tsx
+++ b/app/(app)/alpha/sponsorship/page.tsx
@@ -72,7 +72,7 @@ const Sponsorship = () => {
             Reach thousands of developers every month!
           </h3>
         </header>
-        <section className="relative bottom-12 flex items-center justify-center gap-8 overflow-hidden sm:bottom-20 sm:gap-20 md:bottom-24  md:gap-36 lg:gap-44">
+        <section className="relative bottom-12 flex items-center justify-center gap-8 overflow-hidden sm:bottom-20 sm:gap-20 md:bottom-24 md:gap-36 lg:gap-44">
           {images.map((image) => (
             <div
               key={image.alt}
diff --git a/app/(app)/articles/_client.tsx b/app/(app)/articles/_client.tsx
index 62f762aa..25b83e2e 100644
--- a/app/(app)/articles/_client.tsx
+++ b/app/(app)/articles/_client.tsx
@@ -62,7 +62,7 @@ const ArticlesPage = () => {
     <>
       <div className="mx-2">
         <div className="mt-8 flex max-w-5xl items-center justify-between border-b border-b-neutral-300 pb-2 dark:border-b-neutral-600 sm:mx-auto sm:max-w-2xl lg:max-w-5xl">
-          <h1 className="text-3xl font-bold tracking-tight text-neutral-800 dark:text-neutral-50 sm:text-4xl ">
+          <h1 className="text-3xl font-bold tracking-tight text-neutral-800 dark:text-neutral-50 sm:text-4xl">
             {typeof tag === "string" ? (
               <div className="flex items-center justify-center">
                 <TagIcon className="mr-3 h-6 w-6 text-neutral-800 dark:text-neutral-200" />
diff --git a/app/(app)/code-of-conduct/page.tsx b/app/(app)/code-of-conduct/page.tsx
index 0e7cb658..d8f9560e 100644
--- a/app/(app)/code-of-conduct/page.tsx
+++ b/app/(app)/code-of-conduct/page.tsx
@@ -8,9 +8,9 @@ const CodeOfConduct = () => {
   return (
     <div>
       <main className="relative bg-white p-4 shadow-lg dark:border-neutral-600 dark:border-l-pink-600 dark:bg-neutral-900">
-        <div className="lg:max-w-8xl relative px-4 pb-16 pt-12 sm:px-6 sm:pt-16 lg:mx-auto lg:px-8 ">
+        <div className="lg:max-w-8xl relative px-4 pb-16 pt-12 sm:px-6 sm:pt-16 lg:mx-auto lg:px-8">
           <div className="lg:pl-8">
-            <div className="mx-auto max-w-prose text-base  ">
+            <div className="mx-auto max-w-prose text-base">
               <h1 className="mt-2 border-b-2 pb-8 text-3xl font-extrabold leading-8 tracking-tight text-black dark:text-white sm:text-6xl">
                 Code Of Conduct
               </h1>
diff --git a/app/(app)/create/[[...paramsArr]]/_client.tsx b/app/(app)/create/[[...paramsArr]]/_client.tsx
index 0258e75d..e98654be 100644
--- a/app/(app)/create/[[...paramsArr]]/_client.tsx
+++ b/app/(app)/create/[[...paramsArr]]/_client.tsx
@@ -485,7 +485,7 @@ const Create = ({ session }: { session: Session }) => {
                         </div>
                       )}
 
-                    <div className="col-span-12  border-b border-neutral-300 pb-4">
+                    <div className="col-span-12 border-b border-neutral-300 pb-4">
                       <Disclosure>
                         {({ open }) => (
                           <>
@@ -588,7 +588,7 @@ const Create = ({ session }: { session: Session }) => {
           </div>
         </Transition>
         {dataStatus === "loading" && postId && (
-          <div className="bg-gray fixed left-0 top-0 z-40 flex h-screen w-screen items-center justify-center ">
+          <div className="bg-gray fixed left-0 top-0 z-40 flex h-screen w-screen items-center justify-center">
             <div className="z-50 flex flex-col items-center border-2 border-black bg-white px-5 py-2 opacity-100">
               <div className="loader-dots relative mt-2 block h-5 w-20">
                 <div className="absolute top-0 mt-1 h-3 w-3 rounded-full bg-gradient-to-r from-orange-400 to-pink-600 shadow-sm"></div>
@@ -607,7 +607,7 @@ const Create = ({ session }: { session: Session }) => {
           <div className="mx-auto w-full max-w-7xl flex-grow lg:flex xl:px-8">
             {/* Left sidebar & main wrapper */}
             <div className="min-w-0 flex-1 xl:flex">
-              <div className="xl:w-64 xl:flex-shrink-0 ">
+              <div className="xl:w-64 xl:flex-shrink-0">
                 <div className="h-full py-6 pl-4 pr-6 sm:pl-6 lg:px-4 xl:pl-0">
                   {/* Start left column area */}
                   <div className="relative h-full">
@@ -635,7 +635,7 @@ const Create = ({ session }: { session: Session }) => {
                 </div>
               </div>
               <div className="lg:min-w-0 lg:flex-1">
-                <div className="h-full px-4 py-0 sm:px-6 lg:px-4 lg:py-6 ">
+                <div className="h-full px-4 py-0 sm:px-6 lg:px-4 lg:py-6">
                   {/* Start main area*/}
                   <div className="relative h-full">
                     <div className="bg-white text-black shadow dark:bg-neutral-900 dark:text-white">
@@ -663,7 +663,7 @@ const Create = ({ session }: { session: Session }) => {
                           <div className="mb-4 ml-2 flex items-center gap-2">
                             <label
                               htmlFor="file-input"
-                              className={`flex flex-row items-center gap-1 rounded-md border p-2 text-sm ${uploadStatus === "loading" ? "border-neutral-600 font-medium text-neutral-600 hover:cursor-not-allowed dark:border-neutral-500 dark:text-neutral-500" : "border-neutral-500  font-medium text-neutral-500 hover:bg-neutral-200 dark:border-neutral-600 dark:text-neutral-600 hover:dark:bg-neutral-800 hover:dark:text-neutral-400"}  `}
+                              className={`flex flex-row items-center gap-1 rounded-md border p-2 text-sm ${uploadStatus === "loading" ? "border-neutral-600 font-medium text-neutral-600 hover:cursor-not-allowed dark:border-neutral-500 dark:text-neutral-500" : "border-neutral-500 font-medium text-neutral-500 hover:bg-neutral-200 dark:border-neutral-600 dark:text-neutral-600 hover:dark:bg-neutral-800 hover:dark:text-neutral-400"} `}
                             >
                               {uploadStatus === "loading" ? (
                                 <LoaderCircle
diff --git a/app/(app)/error.tsx b/app/(app)/error.tsx
index 6c392bb4..c12c1d9e 100644
--- a/app/(app)/error.tsx
+++ b/app/(app)/error.tsx
@@ -37,9 +37,8 @@ export default function NotFound() {
             </Link>
           </div>
           <div className="mt-6 text-base text-neutral-500">
-            Or{" "}
-            <span className=" font-semibold">if you are feeling helpful</span>,
-            send us more details by opening an issue{" "}
+            Or <span className="font-semibold">if you are feeling helpful</span>
+            , send us more details by opening an issue{" "}
             <a
               className="bg-gradient-to-r from-orange-400 to-pink-600 bg-clip-text text-base font-semibold tracking-wide text-transparent"
               target="_blank"
diff --git a/app/(app)/get-started/_client.tsx b/app/(app)/get-started/_client.tsx
index 2d6efa31..ac68a332 100644
--- a/app/(app)/get-started/_client.tsx
+++ b/app/(app)/get-started/_client.tsx
@@ -48,7 +48,7 @@ const GetStarted: NextPage = () => {
           <>
             <div>
               <input
-                className="w-full flex-auto appearance-none rounded-md border-neutral-200 bg-white pl-6 text-base font-medium text-neutral-950 ring-offset-0 placeholder:text-base placeholder:text-neutral-500 focus:outline-none focus:ring-2 focus:ring-pink-300 focus:ring-transparent focus:ring-offset-2 dark:border-neutral-600 dark:bg-neutral-900 dark:text-white  [&::-webkit-search-cancel-button]:hidden [&::-webkit-search-decoration]:hidden [&::-webkit-search-results-button]:hidden [&::-webkit-search-results-decoration]:hidden"
+                className="w-full flex-auto appearance-none rounded-md border-neutral-200 bg-white pl-6 text-base font-medium text-neutral-950 ring-offset-0 placeholder:text-base placeholder:text-neutral-500 focus:outline-none focus:ring-2 focus:ring-pink-300 focus:ring-transparent focus:ring-offset-2 dark:border-neutral-600 dark:bg-neutral-900 dark:text-white [&::-webkit-search-cancel-button]:hidden [&::-webkit-search-decoration]:hidden [&::-webkit-search-results-button]:hidden [&::-webkit-search-results-decoration]:hidden"
                 placeholder="Enter your email"
                 type="email"
                 onChange={(event) => {
@@ -77,8 +77,8 @@ const GetStarted: NextPage = () => {
               >
                 <div className="w-full border-t border-neutral-400 dark:border-gray-600" />
               </div>
-              <div className="relative flex justify-center text-sm font-medium ">
-                <span className="bg-neutral-100 px-6 text-base uppercase text-neutral-600 dark:bg-black  dark:text-neutral-400">
+              <div className="relative flex justify-center text-sm font-medium">
+                <span className="bg-neutral-100 px-6 text-base uppercase text-neutral-600 dark:bg-black dark:text-neutral-400">
                   Or
                 </span>
               </div>
diff --git a/app/(app)/my-posts/_client.tsx b/app/(app)/my-posts/_client.tsx
index 0f50593d..ad429ce0 100644
--- a/app/(app)/my-posts/_client.tsx
+++ b/app/(app)/my-posts/_client.tsx
@@ -148,7 +148,7 @@ const MyPosts = () => {
                         </h2>
                       </Link>
                     ) : (
-                      <h2 className=" mb-2 text-2xl font-semibold">{title}</h2>
+                      <h2 className="mb-2 text-2xl font-semibold">{title}</h2>
                     )}
                     <p className="break-words">
                       {excerpt || "No excerpt yet... Write more to see one."}
diff --git a/app/(app)/notifications/_client.tsx b/app/(app)/notifications/_client.tsx
index 92c8a9fd..7cc8ca4e 100644
--- a/app/(app)/notifications/_client.tsx
+++ b/app/(app)/notifications/_client.tsx
@@ -146,7 +146,7 @@ const Notifications = () => {
                             <div className="flex gap-3 sm:gap-5">
                               <div>
                                 {image && (
-                                  <Link className="flex " href={`/${username}`}>
+                                  <Link className="flex" href={`/${username}`}>
                                     <img
                                       className="h-10 w-10 rounded-full"
                                       src={image}
@@ -185,7 +185,7 @@ const Notifications = () => {
                           <div className="ml-2 flex w-10 flex-col justify-center border-l border-neutral-300 pl-3 dark:border-neutral-700">
                             <button
                               title="Mark as read"
-                              className="h-8 w-8 fill-neutral-600  hover:fill-neutral-500 dark:text-white"
+                              className="h-8 w-8 fill-neutral-600 hover:fill-neutral-500 dark:text-white"
                               onClick={() => mutate({ id })}
                             >
                               <CheckCircleIcon
diff --git a/app/(app)/page.tsx b/app/(app)/page.tsx
index b08160e0..3f75ff48 100644
--- a/app/(app)/page.tsx
+++ b/app/(app)/page.tsx
@@ -43,7 +43,7 @@ const Home = async () => {
 
       <div className="mx-2">
         <div className="mt-6 flex max-w-5xl items-center justify-between border-b border-b-neutral-300 pb-2 dark:border-b-neutral-600 sm:mx-auto sm:max-w-2xl lg:max-w-5xl">
-          <h3 className="text-3xl font-bold tracking-tight text-neutral-800 dark:text-neutral-50 sm:text-4xl ">
+          <h3 className="text-3xl font-bold tracking-tight text-neutral-800 dark:text-neutral-50 sm:text-4xl">
             Trending
           </h3>
         </div>
diff --git a/app/(app)/settings/_client.tsx b/app/(app)/settings/_client.tsx
index 216bec8f..3e6ee2ad 100644
--- a/app/(app)/settings/_client.tsx
+++ b/app/(app)/settings/_client.tsx
@@ -133,7 +133,7 @@ const Settings = ({ profile }: { profile: User }) => {
         <div className="text-neutral-700">
           <form onSubmit={handleSubmit(onSubmit)}>
             {/* Profile section */}
-            <div className="px-4 py-6 sm:p-6 lg:pb-8 ">
+            <div className="px-4 py-6 sm:p-6 lg:pb-8">
               <div>
                 <h2 className="text-3xl font-extrabold tracking-tight text-neutral-800 dark:text-white">
                   Profile Settings
@@ -166,7 +166,7 @@ const Settings = ({ profile }: { profile: User }) => {
                       <div>
                         <label htmlFor="username">Username</label>
                         <div className="mt-1 flex shadow-sm">
-                          <span className="mt-1  flex items-center bg-neutral-800 px-3 text-sm font-semibold text-white dark:bg-white dark:text-black">
+                          <span className="mt-1 flex items-center bg-neutral-800 px-3 text-sm font-semibold text-white dark:bg-white dark:text-black">
                             codu.co/
                           </span>
                           <input
@@ -196,7 +196,7 @@ const Settings = ({ profile }: { profile: User }) => {
                       <div className="mt-1 lg:hidden">
                         <div className="flex items-center">
                           <div
-                            className="relative h-16 w-16 flex-shrink-0 overflow-hidden rounded-full "
+                            className="relative h-16 w-16 flex-shrink-0 overflow-hidden rounded-full"
                             aria-hidden="true"
                           >
                             {profilePhoto.status === "error" ||
@@ -256,7 +256,7 @@ const Settings = ({ profile }: { profile: User }) => {
                           htmlFor="desktop-user-photo"
                           className="absolute inset-0 flex h-full w-full items-center justify-center bg-black bg-opacity-75 text-sm font-medium text-white opacity-0 focus-within:opacity-100 hover:opacity-100"
                         >
-                          <div className=" text-center text-xs">
+                          <div className="text-center text-xs">
                             Change Photo
                           </div>
                           <span className="sr-only"> user photo</span>
diff --git a/app/(app)/sponsorship/page.tsx b/app/(app)/sponsorship/page.tsx
index ddc8cbdb..f88d581c 100644
--- a/app/(app)/sponsorship/page.tsx
+++ b/app/(app)/sponsorship/page.tsx
@@ -8,7 +8,7 @@ const Sponsorship = () => {
   return (
     <>
       <main className="relative bg-white lg:bg-transparent">
-        <div className="relative px-4 pb-16 pt-12 sm:px-6 sm:pt-16 lg:mx-auto lg:grid lg:max-w-7xl lg:grid-cols-2 lg:px-8 ">
+        <div className="relative px-4 pb-16 pt-12 sm:px-6 sm:pt-16 lg:mx-auto lg:grid lg:max-w-7xl lg:grid-cols-2 lg:px-8">
           <div className="lg:pl-8">
             <div className="mx-auto max-w-prose text-base lg:ml-0 lg:mr-16 lg:max-w-lg">
               <h2 className="bg-gradient-to-r from-orange-400 to-pink-600 bg-clip-text text-xl font-semibold uppercase leading-6 tracking-wide text-transparent">
diff --git a/components/ArticleMenu/ArticleMenu.tsx b/components/ArticleMenu/ArticleMenu.tsx
index 2e4a1448..faa034fb 100644
--- a/components/ArticleMenu/ArticleMenu.tsx
+++ b/components/ArticleMenu/ArticleMenu.tsx
@@ -141,8 +141,8 @@ const ArticleMenu = ({
               <HeartIcon
                 className={`w-6 h-6${
                   data?.currentUserLiked
-                    ? " fill-red-400"
-                    : " fill-neutral-400 dark:fill-neutral-600"
+                    ? "fill-red-400"
+                    : "fill-neutral-400 dark:fill-neutral-600"
                 }`}
               />
             </button>
@@ -164,8 +164,8 @@ const ArticleMenu = ({
             <BookmarkIcon
               className={`w-6 h-6${
                 data?.currentUserBookmarked
-                  ? " fill-blue-400"
-                  : " fill-neutral-400 dark:fill-neutral-600"
+                  ? "fill-blue-400"
+                  : "fill-neutral-400 dark:fill-neutral-600"
               }`}
             />
           </button>
@@ -189,8 +189,7 @@ const ArticleMenu = ({
               leaveTo="transform opacity-0 scale-95"
             >
               <PopoverPanel
-                className={`absolute bottom-14 right-0 mt-2 w-48 origin-top-right rounded-md bg-white px-1 py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-white lg:bottom-0 lg:left-16 
-                ${isPopoverPanelOpen ? "" : "hidden"}`}
+                className={`absolute bottom-14 right-0 mt-2 w-48 origin-top-right rounded-md bg-white px-1 py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-white lg:bottom-0 lg:left-16 ${isPopoverPanelOpen ? "" : "hidden"}`}
               >
                 <div>
                   <ul>
diff --git a/components/ArticlePreview/ArticlePreview.tsx b/components/ArticlePreview/ArticlePreview.tsx
index 766df4af..65f59525 100644
--- a/components/ArticlePreview/ArticlePreview.tsx
+++ b/components/ArticlePreview/ArticlePreview.tsx
@@ -157,8 +157,8 @@ const ArticlePreview: NextPage<Props> = ({
                 <BookmarkIcon
                   className={`w-6 h-6${
                     bookmarked
-                      ? " fill-blue-400"
-                      : " fill-neutral-400 dark:fill-neutral-600"
+                      ? "fill-blue-400"
+                      : "fill-neutral-400 dark:fill-neutral-600"
                   }`}
                 />
               </button>
diff --git a/components/Comments/CommentsArea.tsx b/components/Comments/CommentsArea.tsx
index e98c7e4c..b21fa286 100644
--- a/components/Comments/CommentsArea.tsx
+++ b/components/Comments/CommentsArea.tsx
@@ -317,8 +317,8 @@ const CommentsArea = ({ postId, postOwnerId }: Props) => {
                       <HeartIcon
                         className={`w-6 h-6${
                           youLikedThis
-                            ? " fill-red-400"
-                            : " fill-neutral-400 dark:fill-neutral-600"
+                            ? "fill-red-400"
+                            : "fill-neutral-400 dark:fill-neutral-600"
                         }`}
                       />
                     </button>
diff --git a/components/Course/CircularProgressBar.tsx b/components/Course/CircularProgressBar.tsx
index b2303dc5..6657d994 100644
--- a/components/Course/CircularProgressBar.tsx
+++ b/components/Course/CircularProgressBar.tsx
@@ -4,7 +4,7 @@ export const CircularProgressBar = ({ progress }: { progress: number }) => {
   const circumference = 2 * Math.PI * radius;
 
   return (
-    <div className="flex items-center justify-center overflow-hidden ">
+    <div className="flex items-center justify-center overflow-hidden">
       <svg
         className="h-32 w-32 translate-x-1 translate-y-1 transform"
         aria-hidden="true"
diff --git a/components/Hero/Hero.tsx b/components/Hero/Hero.tsx
index 12b2e002..06c834a6 100644
--- a/components/Hero/Hero.tsx
+++ b/components/Hero/Hero.tsx
@@ -44,7 +44,7 @@ export default function Hero() {
           }}
         />
 
-        <div className="absolute -bottom-28  left-0 right-0 -z-10 mx-auto max-h-[480px] max-w-[480px] sm:-bottom-60 sm:max-h-[800px] sm:max-w-[600px] md:-bottom-96 md:max-h-[800px] md:max-w-[800px]">
+        <div className="absolute -bottom-28 left-0 right-0 -z-10 mx-auto max-h-[480px] max-w-[480px] sm:-bottom-60 sm:max-h-[800px] sm:max-w-[600px] md:-bottom-96 md:max-h-[800px] md:max-w-[800px]">
           <div className="relative mx-auto brightness-75">
             <Image
               src={moon}
diff --git a/components/Nav/AnimatedHamburger.tsx b/components/Nav/AnimatedHamburger.tsx
index 63690fa6..e12926d2 100644
--- a/components/Nav/AnimatedHamburger.tsx
+++ b/components/Nav/AnimatedHamburger.tsx
@@ -8,10 +8,7 @@ const AnimatedHamburger: FunctionComponent<AnimatedHamburgerProps> = ({
   open,
 }) => {
   return (
-    <div
-      className="relative h-6 w-6 text-neutral-500   
-    hover:text-neutral-600 focus:outline-none group-hover:text-neutral-700 group-focus:text-neutral-900 dark:text-neutral-400 dark:group-hover:text-white dark:group-focus:text-white"
-    >
+    <div className="relative h-6 w-6 text-neutral-500 hover:text-neutral-600 focus:outline-none group-hover:text-neutral-700 group-focus:text-neutral-900 dark:text-neutral-400 dark:group-hover:text-white dark:group-focus:text-white">
       <div className="absolute left-1/2 top-1/2 block w-5 -translate-x-1/2 -translate-y-1/2 transform">
         <span
           aria-hidden="true"
@@ -21,13 +18,13 @@ const AnimatedHamburger: FunctionComponent<AnimatedHamburgerProps> = ({
         ></span>
         <span
           aria-hidden="true"
-          className={`absolute block h-0.5 w-5 transform   bg-current transition ease-in-out ${
+          className={`absolute block h-0.5 w-5 transform bg-current transition ease-in-out ${
             open && "opacity-0"
           }`}
         ></span>
         <span
           aria-hidden="true"
-          className={`absolute block h-0.5 w-5 transform bg-current  transition ease-in-out ${
+          className={`absolute block h-0.5 w-5 transform bg-current transition ease-in-out ${
             open && "-rotate-45"
           } ${!open && "translate-y-1.5"}`}
         ></span>
diff --git a/components/Nav/MobileNav.tsx b/components/Nav/MobileNav.tsx
index a3251562..6a7d6163 100644
--- a/components/Nav/MobileNav.tsx
+++ b/components/Nav/MobileNav.tsx
@@ -60,7 +60,7 @@ const MobileNav: FunctionComponent<MobileNavProps> = ({
                 {userNavigation.map((item) =>
                   item.onClick ? (
                     <button
-                      className="nav-button w-full "
+                      className="nav-button w-full"
                       key={item.name}
                       onClick={item.onClick}
                     >
diff --git a/components/Nav/Nav.tsx b/components/Nav/Nav.tsx
index e376b641..8f653969 100644
--- a/components/Nav/Nav.tsx
+++ b/components/Nav/Nav.tsx
@@ -137,7 +137,7 @@ const Nav = ({
                     <>
                       <Link
                         to="/notifications"
-                        className="focus-style relative flex-shrink-0 rounded-md  p-2 text-neutral-500 hover:bg-neutral-200 hover:text-neutral-600 dark:text-neutral-400 dark:hover:bg-neutral-900 dark:hover:text-white"
+                        className="focus-style relative flex-shrink-0 rounded-md p-2 text-neutral-500 hover:bg-neutral-200 hover:text-neutral-600 dark:text-neutral-400 dark:hover:bg-neutral-900 dark:hover:text-white"
                       >
                         <span className="sr-only">View notifications</span>
                         {hasNotifications && (
@@ -206,11 +206,11 @@ const Nav = ({
                 {session && (
                   <Link
                     to="/notifications"
-                    className="focus-style relative flex-shrink-0 rounded-md  p-2 text-neutral-500 hover:bg-neutral-200 hover:text-neutral-600 dark:text-neutral-400 dark:hover:bg-neutral-900 dark:hover:text-white"
+                    className="focus-style relative flex-shrink-0 rounded-md p-2 text-neutral-500 hover:bg-neutral-200 hover:text-neutral-600 dark:text-neutral-400 dark:hover:bg-neutral-900 dark:hover:text-white"
                   >
                     <span className="sr-only">View notifications</span>
                     {hasNotifications && (
-                      <div className="absolute right-1 top-1 h-2 w-2 animate-pulse rounded-full bg-pink-500 " />
+                      <div className="absolute right-1 top-1 h-2 w-2 animate-pulse rounded-full bg-pink-500" />
                     )}
                     <BellIcon className="h-6 w-6" aria-hidden="true" />
                   </Link>
diff --git a/components/PopularTags/PopularTagsLoading.tsx b/components/PopularTags/PopularTagsLoading.tsx
index 9520e4bd..f270cd47 100644
--- a/components/PopularTags/PopularTagsLoading.tsx
+++ b/components/PopularTags/PopularTagsLoading.tsx
@@ -2,7 +2,7 @@
 
 function PopularTagsLoading() {
   return (
-    <div className=" w-full shadow dark:bg-black">
+    <div className="w-full shadow dark:bg-black">
       <div>
         <div className="my-2 flex h-10">
           <div className="h-10 w-1/2 animate-pulse rounded-md bg-neutral-300 dark:bg-neutral-800" />
diff --git a/components/PromptService/PromptDialog.tsx b/components/PromptService/PromptDialog.tsx
index ea4d3d70..20c95ae2 100644
--- a/components/PromptService/PromptDialog.tsx
+++ b/components/PromptService/PromptDialog.tsx
@@ -37,7 +37,7 @@ export const PromptDialog = ({
       <div className="sm:flex sm:items-start">
         <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-gradient-to-r from-orange-400 to-pink-600 sm:mx-0 sm:h-10 sm:w-10">
           <ExclamationCircleIcon
-            className="text-white-600 h-6 w-6 "
+            className="text-white-600 h-6 w-6"
             aria-hidden="true"
           />
         </div>
diff --git a/components/ReportModal/ReportModal.tsx b/components/ReportModal/ReportModal.tsx
index bb956e4f..7077787b 100644
--- a/components/ReportModal/ReportModal.tsx
+++ b/components/ReportModal/ReportModal.tsx
@@ -114,7 +114,7 @@ export const ReportModal = (props: Props) => {
       >
         <div className="fixed inset-0 bg-gray-700/90" aria-hidden="true" />
         <div className="fixed inset-0 flex w-screen items-center justify-center">
-          <DialogPanel className="relative max-w-lg rounded-lg border border-neutral-900 bg-neutral-100 p-0 text-neutral-900 dark:border-neutral-50 dark:bg-neutral-900 dark:text-neutral-50 ">
+          <DialogPanel className="relative max-w-lg rounded-lg border border-neutral-900 bg-neutral-100 p-0 text-neutral-900 dark:border-neutral-50 dark:bg-neutral-900 dark:text-neutral-50">
             <div className="m-8">
               <DialogTitle className="text-center text-2xl font-bold tracking-tight text-neutral-900 dark:text-neutral-50">
                 Submit a report
diff --git a/components/SideBar/SideBarSavedArticlePreview.tsx b/components/SideBar/SideBarSavedArticlePreview.tsx
index b06c984c..de4cb42a 100644
--- a/components/SideBar/SideBarSavedArticlePreview.tsx
+++ b/components/SideBar/SideBarSavedArticlePreview.tsx
@@ -41,7 +41,7 @@ const SideBarSavedArticlePreview: NextPage<Props> = ({
       <div className="flex grow items-center">
         <span className="sr-only">{name}</span>
 
-        <div className="flex flex-col justify-center text-[12px] text-neutral-500 ">
+        <div className="flex flex-col justify-center text-[12px] text-neutral-500">
           <p className="font-medium text-neutral-500">
             Written by{" "}
             <Link
diff --git a/components/SideBar/SideBarSavedPosts.tsx b/components/SideBar/SideBarSavedPosts.tsx
index 7d342e29..43969bfd 100644
--- a/components/SideBar/SideBarSavedPosts.tsx
+++ b/components/SideBar/SideBarSavedPosts.tsx
@@ -76,7 +76,7 @@ export default React.memo(function SideBarSavedPosts() {
 
 function LoadingSkeleton() {
   return (
-    <div className="my-4 flex h-32 w-full animate-pulse flex-col bg-white p-4 shadow dark:bg-neutral-900 ">
+    <div className="my-4 flex h-32 w-full animate-pulse flex-col bg-white p-4 shadow dark:bg-neutral-900">
       <div className="flex grow items-center">
         <div className="h-5 w-full rounded bg-neutral-300 dark:bg-neutral-800"></div>
       </div>
diff --git a/components/Switch/Switch.tsx b/components/Switch/Switch.tsx
index 81b97ada..349c8718 100644
--- a/components/Switch/Switch.tsx
+++ b/components/Switch/Switch.tsx
@@ -8,9 +8,7 @@ const Switch = React.forwardRef<
   React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
 >(({ className, ...props }, ref) => (
   <SwitchPrimitives.Root
-    className={`peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-transparent from-orange-400 to-pink-600 transition-colors disabled:cursor-not-allowed disabled:opacity-50 data-[state=unchecked]:bg-neutral-300 data-[state=checked]:bg-gradient-to-r dark:data-[state=unchecked]:bg-neutral-700
-      ${className}
-    `}
+    className={`peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-transparent from-orange-400 to-pink-600 transition-colors disabled:cursor-not-allowed disabled:opacity-50 data-[state=unchecked]:bg-neutral-300 data-[state=checked]:bg-gradient-to-r dark:data-[state=unchecked]:bg-neutral-700 ${className} `}
     {...props}
     ref={ref}
   >
diff --git a/components/markdocNodes/Code/Code.tsx b/components/markdocNodes/Code/Code.tsx
index 2d495593..9981acf3 100644
--- a/components/markdocNodes/Code/Code.tsx
+++ b/components/markdocNodes/Code/Code.tsx
@@ -71,7 +71,7 @@ export default function Code({ children, language }: Props) {
         {children}
       </pre>
       <button
-        className=" absolute flex h-8 w-8 items-center justify-center rounded-lg border border-gray-400 bg-gray-300 opacity-100 shadow-md transition-all ease-in-out group-hover:scale-100 group-hover:opacity-100 dark:border-gray-500 dark:bg-gray-700 md:scale-0 md:opacity-0"
+        className="absolute flex h-8 w-8 items-center justify-center rounded-lg border border-gray-400 bg-gray-300 opacity-100 shadow-md transition-all ease-in-out group-hover:scale-100 group-hover:opacity-100 dark:border-gray-500 dark:bg-gray-700 md:scale-0 md:opacity-0"
         type="button"
         onClick={() => setCopied(true)}
       >
diff --git a/components/ui/Search.tsx b/components/ui/Search.tsx
index 35498c7a..e202ed12 100644
--- a/components/ui/Search.tsx
+++ b/components/ui/Search.tsx
@@ -542,7 +542,7 @@ export function MobileSearch({
     <div className="contents lg:hidden">
       <button
         type="button"
-        className="focus-style relative flex-shrink-0 rounded-md  p-2 text-neutral-500 hover:bg-neutral-200 hover:text-neutral-600 dark:text-neutral-400 dark:hover:bg-neutral-900 dark:hover:text-white"
+        className="focus-style relative flex-shrink-0 rounded-md p-2 text-neutral-500 hover:bg-neutral-200 hover:text-neutral-600 dark:text-neutral-400 dark:hover:bg-neutral-900 dark:hover:text-white"
         aria-label="Search the site"
         {...buttonProps}
       >
diff --git a/styles/globals.css b/styles/globals.css
index 0421fa80..9369387b 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -50,19 +50,19 @@ body {
 }
 
 .nav-button {
-  @apply focus-style rounded-md  px-2 py-2 text-neutral-900 hover:bg-neutral-200 hover:text-black focus:text-neutral-900 dark:text-neutral-300 dark:hover:bg-neutral-900 dark:hover:text-white dark:focus:text-white;
+  @apply focus-style rounded-md px-2 py-2 text-neutral-900 hover:bg-neutral-200 hover:text-black focus:text-neutral-900 dark:text-neutral-300 dark:hover:bg-neutral-900 dark:hover:text-white dark:focus:text-white;
 }
 
 .focus-style {
-  @apply rounded-md focus:outline-none focus:ring-white focus-visible:ring-2  focus-visible:ring-pink-600 focus-visible:ring-offset-pink-600;
+  @apply rounded-md focus:outline-none focus:ring-white focus-visible:ring-2 focus-visible:ring-pink-600 focus-visible:ring-offset-pink-600;
 }
 
 .focus-style-rounded {
-  @apply rounded-full focus:outline-none focus:ring-white focus-visible:ring-2  focus-visible:ring-pink-600 focus-visible:ring-offset-pink-600;
+  @apply rounded-full focus:outline-none focus:ring-white focus-visible:ring-2 focus-visible:ring-pink-600 focus-visible:ring-offset-pink-600;
 }
 
 .primary-button {
-  @apply inline-flex justify-center rounded-md bg-gradient-to-r from-orange-400 to-pink-600 px-4 py-2 font-medium text-white shadow-sm hover:from-orange-300 hover:to-pink-500 focus:outline-none focus:ring-2 focus:ring-pink-600 focus:ring-offset-2 focus-visible:ring-2 focus-visible:ring-pink-600 focus-visible:ring-offset-white disabled:border-neutral-300 disabled:from-neutral-500 disabled:to-neutral-700 disabled:text-neutral-300  disabled:hover:text-neutral-300;
+  @apply inline-flex justify-center rounded-md bg-gradient-to-r from-orange-400 to-pink-600 px-4 py-2 font-medium text-white shadow-sm hover:from-orange-300 hover:to-pink-500 focus:outline-none focus:ring-2 focus:ring-pink-600 focus:ring-offset-2 focus-visible:ring-2 focus-visible:ring-pink-600 focus-visible:ring-offset-white disabled:border-neutral-300 disabled:from-neutral-500 disabled:to-neutral-700 disabled:text-neutral-300 disabled:hover:text-neutral-300;
 }
 
 .secondary-button {