diff --git a/frontend/components.json b/frontend/components.json
index e24d4934..57039a23 100644
--- a/frontend/components.json
+++ b/frontend/components.json
@@ -13,4 +13,4 @@
     "components": "@/components",
     "utils": "@/lib/utils"
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/src/components/blog-feed.tsx b/frontend/src/components/blog-feed.tsx
index f09bad8c..6bf45131 100644
--- a/frontend/src/components/blog-feed.tsx
+++ b/frontend/src/components/blog-feed.tsx
@@ -2,10 +2,10 @@ import axios from 'axios';
 import { useEffect, useState } from 'react';
 import FeaturedPostCard from '@/components/featured-post-card';
 import LatestPostCard from '@/components/latest-post-card';
-import { CATEGORIES } from '@/constants/categories';
-import { categoryProps } from '@/utils/category-props';
 import { FeaturedPostCardSkeleton } from '@/components/skeletons/featured-post-card-skeleton';
 import { LatestPostCardSkeleton } from '@/components/skeletons/latest-post-card-skeleton';
+import CategoryPill from '@/components/category-pill';
+import { categories } from '@/utils/category-colors';
 
 export default function BlogFeed() {
   const [selectedCategory, setSelectedCategory] = useState('featured');
@@ -40,15 +40,18 @@ export default function BlogFeed() {
   }, []);
 
   return (
-    <div className="container mx-auto py-6">
+    <div className="mx-auto my-6">
       <div className="-mx-4 flex flex-wrap">
         <div className="w-full p-4 md:w-2/3">
-          <h1 className="mb-4 text-2xl font-semibold dark:text-white">
+          <div className="-mb-1 tracking-wide text-slate-500 dark:text-dark-tertiary">
+            What's hot?
+          </div>
+          <h1 className="mb-2 text-2xl font-semibold dark:text-dark-primary">
             {selectedCategory === 'featured'
               ? 'Featured Posts'
               : `Posts related to "${selectedCategory}"`}
           </h1>
-          <div className="flex flex-col gap-4">
+          <div className="flex flex-col gap-6">
             {posts.length === 0
               ? Array(5)
                   .fill(0)
@@ -60,30 +63,29 @@ export default function BlogFeed() {
         </div>
         <div className="w-full p-4 md:w-1/3">
           <div className="mb-6">
-            <div className="text-gray-500 dark:text-white">Discover by topic</div>
-            <h2 className="mb-4 text-2xl font-semibold dark:text-white">Categories</h2>
-            <div className="flex flex-wrap gap-2">
-              {CATEGORIES.map((category) => (
+            <div className="-mb-1 tracking-wide text-light-tertiary dark:text-dark-tertiary">
+              Discover by topic
+            </div>
+            <h2 className="mb-2 text-2xl font-semibold dark:text-dark-primary">Categories</h2>
+            <div className="flex flex-wrap gap-3 dark:rounded-lg dark:bg-dark-card dark:p-3">
+              {categories.map((category) => (
                 <button
                   key={category}
                   onClick={() =>
                     setSelectedCategory(selectedCategory === category ? 'featured' : category)
                   }
-                  className={
-                    selectedCategory === category
-                      ? categoryProps(category, true)
-                      : categoryProps(category)
-                  }
                 >
-                  {category}
+                  <CategoryPill category={category} selected={selectedCategory === category} />
                 </button>
               ))}
             </div>
           </div>
           <div>
-            <div className="text-gray-500 dark:text-white">What's new ?</div>
-            <h2 className="mb-4 text-2xl font-semibold dark:text-white">Latest Posts</h2>
-            <div className="flex flex-col gap-2">
+            <div className="-mb-1 tracking-wide text-slate-500 dark:text-dark-tertiary">
+              What's new?
+            </div>
+            <h2 className="mb-2 text-2xl font-semibold dark:text-dark-primary">Latest Posts</h2>
+            <div className="flex flex-col gap-4">
               {latestPosts.length === 0
                 ? Array(5)
                     .fill(0)
diff --git a/frontend/src/components/category-pill.tsx b/frontend/src/components/category-pill.tsx
new file mode 100644
index 00000000..69ab7af7
--- /dev/null
+++ b/frontend/src/components/category-pill.tsx
@@ -0,0 +1,22 @@
+import { getCategoryColors } from '@/utils/category-colors';
+import { twMerge } from 'tailwind-merge';
+
+interface CategoryPillProps extends React.HTMLAttributes<HTMLSpanElement> {
+  category: string;
+  selected?: boolean;
+}
+
+export default function CategoryPill({ category, selected = false }: CategoryPillProps) {
+  const [defaultColor, selectedColor]: [string, string] = getCategoryColors(category);
+
+  return (
+    <span
+      className={twMerge(
+        'cursor-pointer rounded-3xl px-3 py-1 text-xs font-medium text-light-primary/80 dark:text-dark-primary/80',
+        selected ? selectedColor : defaultColor
+      )}
+    >
+      {category}
+    </span>
+  );
+}
diff --git a/frontend/src/components/featured-post-card.tsx b/frontend/src/components/featured-post-card.tsx
index caaf8407..c75f3c30 100644
--- a/frontend/src/components/featured-post-card.tsx
+++ b/frontend/src/components/featured-post-card.tsx
@@ -1,35 +1,37 @@
 import { useNavigate } from 'react-router-dom';
 import Post from '@/types/post-type';
 import formatPostTime from '@/utils/format-post-time';
-import { categoryProps } from '@/utils/category-props';
+import CategoryPill from '@/components/category-pill';
 
 export default function FeaturedPostCard({ post }: { post: Post }) {
   const navigate = useNavigate();
   return (
     <div
-      className="flex h-48 cursor-pointer gap-4 rounded-lg bg-white p-2 dark:bg-dark-textfield"
+      className="flex h-48 cursor-pointer gap-2 rounded-lg bg-light dark:bg-dark-card"
       onClick={() => navigate('/details-page', { state: { post } })}
     >
       <div className="w-1/3">
         <img
           src={post.imageLink}
           alt={post.title}
-          className="h-full w-full rounded-lg object-cover"
+          className="h-full w-full rounded-lg object-cover shadow-lg"
         />
       </div>
-      <div className="flex h-full w-2/3 flex-col gap-2">
-        <div className="text-xl font-semibold dark:text-white">{post.title}</div>
+      <div className="flex h-full w-2/3 flex-col gap-2 p-2">
+        <div className="text-xl font-semibold text-light-title dark:text-dark-title">
+          {post.title}
+        </div>
         <div className="flex flex-wrap gap-2">
           {post.categories.map((category, index) => (
-            <span key={index} className={categoryProps(category)}>
-              {category}
-            </span>
+            <CategoryPill key={`${category}-${index}`} category={category} />
           ))}
         </div>
-        <div className="line-clamp-2 text-gray-600">
-          <p className="overflow-ellipsis dark:text-white">{post.description}</p>
+        <div className="line-clamp-2">
+          <p className="overflow-ellipsis text-light-description dark:text-dark-description">
+            {post.description}
+          </p>
         </div>
-        <div className="mb-1 flex flex-1 items-end text-xs text-gray-500 dark:text-white">
+        <div className="flex flex-1 items-end text-xs text-light-info dark:text-dark-info">
           {post.authorName} • {formatPostTime(post.timeOfPost)}
         </div>
       </div>
diff --git a/frontend/src/components/latest-post-card.tsx b/frontend/src/components/latest-post-card.tsx
index 934048a8..e6b0dc3c 100644
--- a/frontend/src/components/latest-post-card.tsx
+++ b/frontend/src/components/latest-post-card.tsx
@@ -1,27 +1,27 @@
 import { useNavigate } from 'react-router-dom';
 import linkIcon from '@/assets/svg/link.svg';
 import Post from '@/types/post-type';
-import { categoryProps } from '@/utils/category-props';
 import formatPostTime from '@/utils/format-post-time';
+import CategoryPill from '@/components/category-pill';
 export default function LatestPostCard({ post }: { post: Post }) {
   const navigate = useNavigate();
   return (
     <div
-      className="cursor-pointer rounded-lg bg-white p-2 py-2 shadow-sm dark:bg-dark-textfield"
+      className="cursor-pointer rounded-lg border border-slate-200 bg-slate-50 p-3 dark:border-none dark:bg-dark-card"
       onClick={() => navigate('/details-page', { state: { post } })}
     >
       <div className="flex">
-        <div className="mb-2 flex flex-1 flex-wrap gap-2 ">
+        <div className="mb-2 flex flex-1 flex-wrap gap-2">
           {post.categories.map((category, index) => (
-            <span key={index} className={categoryProps(category)}>
-              {category}
-            </span>
+            <CategoryPill key={`${category}-${index}`} category={category} />
           ))}
         </div>
         <img src={linkIcon} className="h-3 w-3" onClick={() => navigate(-1)} />
       </div>
-      <div className="mb-2 line-clamp-2 text-xl font-semibold dark:text-white">{post.title}</div>
-      <div className="text-xs text-gray-500 dark:text-white">
+      <div className="mb-2 line-clamp-2 font-semibold text-light-title dark:text-dark-title">
+        {post.title}
+      </div>
+      <div className="text-xs text-light-info dark:text-dark-info">
         {post.authorName} • {formatPostTime(post.timeOfPost)}
       </div>
     </div>
diff --git a/frontend/src/components/modal.tsx b/frontend/src/components/modal.tsx
index 18e38e7b..8ab05028 100644
--- a/frontend/src/components/modal.tsx
+++ b/frontend/src/components/modal.tsx
@@ -24,27 +24,29 @@ const ModalComponent: React.FC<ModalProps> = ({
           role="dialog"
           aria-modal="false"
         >
-          <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"></div>
+          <div className="fixed inset-0 bg-slate-800/50 bg-opacity-75 transition-opacity"></div>
 
           <div className="fixed inset-0 z-10 w-screen overflow-y-auto">
             <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
-              <div className="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">
-                <div className="bg-white px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
+              <div className="relative transform overflow-hidden rounded-lg bg-light text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">
+                <div className="bg-light px-4 pb-4 pt-5 dark:bg-dark sm:p-6 sm:pb-4">
                   <div className="sm:flex sm:items-start">
-                    <div className="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
+                    <div className="mt-3 text-center sm:text-left">
                       <h3
-                        className="text-base font-semibold leading-6 text-gray-900"
+                        className="text-base font-semibold leading-6 text-light-primary dark:text-dark-primary"
                         id="modal-title"
                       >
-                        Select Post Image
+                        Choose a post cover image
                       </h3>
                       <div className="mt-2">
                         <div className="grid grid-cols-3 gap-4">
                           {imageUrls.map((imageUrl) => (
                             <div
                               key={imageUrl}
-                              className={`cursor-pointer border p-2 ${
-                                selectedImage === imageUrl ? 'border-blue-500' : 'border-gray-300'
+                              className={`aspect-square cursor-pointer overflow-clip border ${
+                                selectedImage === imageUrl
+                                  ? 'border-4 border-blue-300'
+                                  : 'border-slate-300'
                               } rounded-md`}
                               onClick={() => handleImageSelect(imageUrl)}
                             >
@@ -60,18 +62,18 @@ const ModalComponent: React.FC<ModalProps> = ({
                     </div>
                   </div>
                 </div>
-                <div className="bg-gray-50 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6">
+                <div className="bg-light px-4 py-3 dark:bg-dark sm:flex sm:flex-row-reverse sm:px-6">
                   <button
                     type="button"
                     name="imageLink"
-                    className="inline-flex w-full justify-center rounded-md bg-green-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-green-500 sm:ml-3 sm:w-auto"
+                    className="inline-flex w-full justify-center rounded-md bg-light-primary px-3 py-2 text-sm font-semibold text-light shadow-sm hover:bg-light-secondary dark:bg-dark-primary dark:text-dark dark:hover:bg-dark-secondary sm:ml-3 sm:w-auto"
                     onClick={handleSelector}
                   >
                     Select
                   </button>
                   <button
                     type="button"
-                    className="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:mt-0 sm:w-auto"
+                    className="mt-3 inline-flex w-full justify-center rounded-md bg-light px-3 py-2 text-sm font-semibold text-light-primary shadow-sm ring-1 ring-inset ring-slate-300 hover:bg-slate-200 dark:bg-dark dark:text-dark-primary dark:hover:bg-dark-secondary/25 sm:mt-0 sm:w-auto"
                     onClick={() => {
                       setModal(false);
                     }}
diff --git a/frontend/src/components/post-card.tsx b/frontend/src/components/post-card.tsx
index b7864c9a..6141087a 100644
--- a/frontend/src/components/post-card.tsx
+++ b/frontend/src/components/post-card.tsx
@@ -1,32 +1,34 @@
 import { useNavigate } from 'react-router-dom';
 import Post from '@/types/post-type';
 import formatPostTime from '@/utils/format-post-time';
-import { categoryProps } from '@/utils/category-props';
+import CategoryPill from '@/components/category-pill';
 
 export default function PostCard({ post }: { post: Post }) {
   const navigate = useNavigate();
   return (
-    <div
-      className="w-full cursor-pointer p-4 md:w-1/2 lg:w-1/3 xl:w-1/4"
-      onClick={() => navigate('/details-page', { state: { post } })}
-    >
-      <div className="rounded-lg bg-white shadow-md dark:bg-dark-textfield">
+    <div className="w-full md:w-1/2 lg:w-1/3 xl:w-1/4">
+      <div
+        className="m-4 cursor-pointer rounded-lg bg-light shadow-md dark:bg-dark-card"
+        onClick={() => navigate('/details-page', { state: { post } })}
+      >
         <img
           src={post.imageLink}
           alt={post.title}
-          className="h-48 w-full rounded-lg object-cover"
+          className="h-48 w-full rounded-t-lg object-cover"
         />
         <div className="p-4">
-          <div className="mb-2 text-xs text-gray-500 dark:text-white">
+          <div className="mb-1 text-xs text-light-info dark:text-dark-info">
             {post.authorName} • {formatPostTime(post.timeOfPost)}
           </div>
-          <h2 className="mb-2 line-clamp-1 text-xl font-semibold dark:text-white">{post.title}</h2>
-          <p className="line-clamp-2 text-gray-600 dark:text-white">{post.description}</p>
-          <div className="mt-4 flex flex-wrap gap-2 dark:text-black">
+          <h2 className="mb-2 line-clamp-1 text-lg font-semibold text-light-title dark:text-dark-title">
+            {post.title}
+          </h2>
+          <p className="line-clamp-2 text-sm text-light-description dark:text-dark-description">
+            {post.description}
+          </p>
+          <div className="mt-4 flex flex-wrap gap-2">
             {post.categories.map((category, index) => (
-              <span key={index} className={categoryProps(category)}>
-                {category}
-              </span>
+              <CategoryPill key={`${category}-${index}`} category={category} />
             ))}
           </div>
         </div>
diff --git a/frontend/src/components/skeletons/featured-post-card-skeleton.tsx b/frontend/src/components/skeletons/featured-post-card-skeleton.tsx
index 64400da1..bfd177e0 100644
--- a/frontend/src/components/skeletons/featured-post-card-skeleton.tsx
+++ b/frontend/src/components/skeletons/featured-post-card-skeleton.tsx
@@ -2,26 +2,33 @@ import { Skeleton } from '@/components/ui/skeleton';
 
 export const FeaturedPostCardSkeleton = () => {
   return (
-    <div className="flex h-48 gap-4 rounded-lg bg-white">
+    <div className="flex rounded-lg bg-light dark:bg-dark-card">
+      {/* for image */}
       <div className="w-1/3">
-        {/* for image */}
-        <Skeleton className="h-full w-full rounded-lg bg-gray-200" />
+        <Skeleton className="h-full w-full rounded-lg bg-slate-200 dark:bg-slate-700" />
       </div>
-      <div className="flex h-full w-2/3 flex-col gap-2">
-        {/* for title */}
-        <Skeleton className="h-6 w-full bg-gray-200 text-xl" />
-        <Skeleton className="h-6 w-2/3 bg-gray-200 text-xl" />
-        <div className="flex flex-wrap gap-2">
-          {/* for categories */}
-          <Skeleton className="h-6 w-16 rounded-3xl bg-gray-200" />
-          <Skeleton className="h-6 w-16 rounded-3xl bg-gray-200" />
-          <Skeleton className="h-6 w-16 rounded-3xl bg-gray-200" />
-        </div>
-        {/* for description */}
-        <Skeleton className="line-clamp-2 h-12 w-full bg-gray-200" />
-        <div className="mb-1 flex flex-1 items-end">
-          {/* for author and time */}
-          <Skeleton className="h-5 w-1/3 bg-gray-200" />
+      <div className="flex h-48 w-2/3 gap-4 rounded-lg p-3">
+        <div className="flex w-full flex-col gap-3">
+          {/* for title */}
+          <Skeleton className="h-6 w-11/12 bg-slate-200 dark:bg-slate-700" />
+          <Skeleton className="h-6 w-2/3 bg-slate-200 dark:bg-slate-700" />
+          <div className="flex flex-wrap gap-2">
+            {/* for categories */}
+            {Array(3)
+              .fill(0)
+              .map((_, index) => (
+                <Skeleton
+                  key={index}
+                  className="h-6 w-16 rounded-full bg-slate-200 dark:bg-slate-700"
+                />
+              ))}
+          </div>
+          {/* for description */}
+          <Skeleton className="line-clamp-2 h-12 w-10/12 bg-slate-200 dark:bg-slate-700" />
+          <div className="mb-1 flex flex-1 items-end">
+            {/* for author and time */}
+            <Skeleton className="h-3 w-1/3 bg-slate-200 dark:bg-slate-700" />
+          </div>
         </div>
       </div>
     </div>
diff --git a/frontend/src/components/skeletons/latest-post-card-skeleton.tsx b/frontend/src/components/skeletons/latest-post-card-skeleton.tsx
index 1e4b1095..bc7fba6d 100644
--- a/frontend/src/components/skeletons/latest-post-card-skeleton.tsx
+++ b/frontend/src/components/skeletons/latest-post-card-skeleton.tsx
@@ -2,22 +2,24 @@ import { Skeleton } from '@/components/ui/skeleton';
 
 export const LatestPostCardSkeleton = () => {
   return (
-    <div className="rounded-lg bg-white py-2 shadow-sm">
+    <div className="rounded-lg bg-light p-3 dark:bg-dark-card">
       <div className="flex">
         <div className="mb-2 flex flex-1 flex-wrap gap-2">
-          <Skeleton className="h-6 w-16 rounded-3xl bg-gray-200" />
-          <Skeleton className="h-6 w-16 rounded-3xl bg-gray-200" />
-          <Skeleton className="h-6 w-16 rounded-3xl bg-gray-200" />
+          {Array(3)
+            .fill(0)
+            .map((_, index) => (
+              <Skeleton
+                key={index}
+                className="h-6 w-16 rounded-full bg-slate-200 dark:bg-slate-700"
+              />
+            ))}
         </div>
-        <Skeleton className="h-4 w-4 bg-gray-200" style={{ height: 12, width: 12 }} />
       </div>
-      <div className="mb-2 line-clamp-2 text-xl font-semibold">
-        <Skeleton className="h-6 w-full bg-gray-200" />
-        <Skeleton className="mt-2 h-6 w-2/3 bg-gray-200" />
-      </div>
-      <div className="flex text-xs text-gray-500">
-        <Skeleton className="h-4 w-1/3 bg-gray-200" />
+      <div className="mb-2">
+        <Skeleton className="h-6 w-11/12 bg-slate-200 dark:bg-slate-700" />
+        <Skeleton className="mt-2 h-4 w-2/3 bg-slate-200 dark:bg-slate-700" />
       </div>
+      <Skeleton className="h-3 w-1/3 bg-slate-200 dark:bg-slate-700" />
     </div>
   );
 };
diff --git a/frontend/src/components/skeletons/post-card-skeleton.tsx b/frontend/src/components/skeletons/post-card-skeleton.tsx
index 1ef9a362..d6cbc1bd 100644
--- a/frontend/src/components/skeletons/post-card-skeleton.tsx
+++ b/frontend/src/components/skeletons/post-card-skeleton.tsx
@@ -2,18 +2,16 @@ import { Skeleton } from '@/components/ui/skeleton';
 
 export const PostCardSkeleton = () => {
   return (
-    <div className="w-full p-4 md:w-1/2 lg:w-1/3 xl:w-1/4">
-      <div className="rounded-lg bg-white shadow-md">
-        <Skeleton className="h-48 w-full rounded-lg" />
+    <div className="w-full md:w-1/2 lg:w-1/3 xl:w-1/4">
+      <div className="m-4 rounded-lg bg-light shadow-md dark:bg-dark-card">
+        <Skeleton className="h-48 w-full rounded-lg bg-slate-200 dark:bg-slate-700" />
         <div className="p-4">
-          <div className="mb-2 flex text-xs text-gray-500">
-            <Skeleton className="mr-2 h-4 w-2/3 bg-gray-200" />
-          </div>
-          <Skeleton className="mb-2 h-6 w-4/5 bg-gray-200" />
-          <Skeleton className="line-clamp-2 h-14 w-full bg-gray-200 text-gray-600" />
-          <div className="mt-4 flex flex-wrap gap-2">
-            <Skeleton className="h-6 w-16 rounded-3xl bg-gray-200" />
-            <Skeleton className="h-6 w-16 rounded-3xl bg-gray-200" />
+          <Skeleton className="mb-2 h-3 w-2/3 bg-slate-200 dark:bg-slate-700" />
+          <Skeleton className="mb-2 h-6 w-4/5 bg-slate-200 dark:bg-slate-700" />
+          <Skeleton className="h-16 w-11/12 bg-slate-200 dark:bg-slate-700" />
+          <div className="mt-2 flex flex-wrap gap-2">
+            <Skeleton className="h-6 w-16 rounded-full bg-slate-200 dark:bg-slate-700" />
+            <Skeleton className="h-6 w-16 rounded-full bg-slate-200 dark:bg-slate-700" />
           </div>
         </div>
       </div>
diff --git a/frontend/src/constants/categories.ts b/frontend/src/constants/categories.ts
deleted file mode 100644
index 2031888b..00000000
--- a/frontend/src/constants/categories.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export const CATEGORIES: string[] = [
-  'Travel',
-  'Nature',
-  'City',
-  'Adventure',
-  'Beaches',
-  'Landmarks',
-  'Mountains',
-];
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 2acee128..b5c61c95 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -1,10 +1,3 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-@layer base {
-  :root {
-    --color-dark-background: #10172a;
-    --color-dark-textfield-card: #1d293c;
-  }
-}
diff --git a/frontend/src/lib/utils.ts b/frontend/src/lib/utils.ts
index ec79801f..9ad0df42 100644
--- a/frontend/src/lib/utils.ts
+++ b/frontend/src/lib/utils.ts
@@ -1,6 +1,6 @@
-import { type ClassValue, clsx } from "clsx"
-import { twMerge } from "tailwind-merge"
- 
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
 export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
+  return twMerge(clsx(inputs));
 }
diff --git a/frontend/src/pages/add-blog.tsx b/frontend/src/pages/add-blog.tsx
index c87105d5..882c943f 100644
--- a/frontend/src/pages/add-blog.tsx
+++ b/frontend/src/pages/add-blog.tsx
@@ -5,9 +5,9 @@ import { toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 import navigateBackBlackIcon from '@/assets/svg/navigate-back-black.svg';
 import navigateBackWhiteIcon from '@/assets/svg/navigate-back-white.svg';
-import { CATEGORIES } from '@/constants/categories';
-import { categoryProps } from '@/utils/category-props';
 import ModalComponent from '@/components/modal';
+import CategoryPill from '@/components/category-pill';
+import { categories } from '@/utils/category-colors';
 
 type FormData = {
   title: string;
@@ -122,125 +122,145 @@ function AddBlog() {
     };
   }, []);
 
+  function Asterisk() {
+    return <span className="dark:text-dark-tertiary">*</span>;
+  }
+
   return (
-    <div className="min-h-screen bg-white p-4 px-16 font-[Poppins] dark:bg-dark">
-      <div className="mb-4 flex items-center justify-start">
-        <div className="w-fit cursor-pointer text-base text-black  md:text-lg lg:text-2xl">
-          <img
-            src={isDarkMode ? navigateBackWhiteIcon : navigateBackBlackIcon}
-            onClick={() => navigate(-1)}
-            className="h-5 w-10"
-          />
+    <div className="min-h-screen cursor-default bg-slate-50 px-6 py-8 dark:bg-dark">
+      <div className="mb-4 flex justify-center">
+        <div className="w-[32rem] md:w-5/6 lg:w-4/6 flex items-center justify-start space-x-4 ">
+          <div className="w-fit cursor-pointer">
+            <img
+              src={isDarkMode ? navigateBackWhiteIcon : navigateBackBlackIcon}
+              onClick={() => navigate(-1)}
+              className="h-5 w-10"
+            />
+          </div>
+          <h2 className="text-lg font-semibold text-light-primary dark:text-dark-primary md:text-xl lg:text-2xl">
+            Create Blog
+          </h2>
         </div>
-        <h2 className="ml-4 text-sm font-bold dark:text-white md:text-lg lg:text-2xl">
-          Create Post
-        </h2>
       </div>
+      <div className="flex justify-center ">
+        <form onSubmit={handleSubmit} className="md:w-5/6 lg:w-2/3">
+          <div className="mb-2 flex items-center">
+            <label className="flex items-center">
+              <span className="px-2 text-base font-medium text-light-secondary dark:text-dark-secondary">
+                Is this a featured blog?
+              </span>
+              <input
+                type="checkbox"
+                name="isFeaturedPost"
+                className="ml-2 h-5 w-5 rounded-full accent-purple-400 "
+                checked={formData.isFeaturedPost}
+                onChange={handleCheckboxChange}
+              />
+            </label>
+          </div>
 
-      <form onSubmit={handleSubmit}>
-        <div className="mb-4">
-          <input
-            type="text"
-            name="title"
-            placeholder="Title"
-            className="w-full rounded-lg bg-gray-50 p-2 placeholder:text-gray-800 dark:bg-dark-textfield dark:text-white dark:placeholder:text-white"
-            value={formData.title}
-            onChange={handleInputChange}
-          />
-        </div>
-        <div className="mb-4">
-          <input
-            type="text"
-            name="authorName"
-            placeholder="Author Name"
-            className="w-full rounded-lg bg-gray-50 p-2 placeholder:text-gray-800 dark:bg-dark-textfield dark:text-white dark:placeholder:text-white"
-            value={formData.authorName}
-            onChange={handleInputChange}
-          />
-        </div>
-        <div className="flex justify-between">
-          <div className="flex w-8/12">
+          <div className="mb-2">
+            <div className="px-2 py-1 font-medium text-light-secondary dark:text-dark-secondary">
+              Blog title <Asterisk />
+            </div>
             <input
               type="text"
-              id="imgtext"
-              name="imageLink"
-              placeholder="Image URL"
-              className="w-full rounded-lg bg-gray-50 p-2 placeholder:text-gray-800 dark:bg-dark-textfield dark:text-white dark:placeholder:text-white"
-              value={formData.imageLink}
+              name="title"
+              placeholder="Travel Bucket List for this Year"
+              autoComplete="off"
+              className="w-full rounded-lg bg-slate-200 p-3 placeholder:text-sm placeholder:text-light-tertiary dark:bg-dark-card dark:text-slate-50 dark:placeholder:text-dark-tertiary"
+              value={formData.title}
               onChange={handleInputChange}
             />
           </div>
-          <button
-            type="button"
-            className="rounded-lg bg-black px-3 text-white hover:bg-gray-800 dark:bg-white dark:text-black"
-            onClick={() => {
-              setmodal(true);
-            }}
-          >
-            Pick Image
-          </button>
-        </div>
-        <div className="mb-4 mt-4">
-          <textarea
-            name="description"
-            placeholder="Description"
-            className="w-full rounded-lg bg-gray-50 p-2 placeholder:text-gray-800 dark:bg-dark-textfield dark:text-white dark:placeholder:text-white"
-            value={formData.description}
-            onChange={handleInputChange}
-          />
-        </div>
 
-        <div className="mb-4 flex flex-col items-center md:flex-row">
-          <label className="mb-2 block w-full font-semibold dark:text-white md:mr-8 md:w-fit">
-            Categories
-          </label>
-          <div className="flex flex-wrap gap-2">
-            {CATEGORIES.map((category) => (
-              <span
-                key={category}
-                className={`cursor-pointer
-									${
-                    formData.categories.includes(category)
-                      ? categoryProps(category, true)
-                      : categoryProps(category, false)
-                  }`}
-                onClick={() => handleCategoryClick(category)}
-              >
-                {category}
-              </span>
-            ))}
+          <div className="mb-1">
+            <div className="px-2 py-1 font-medium text-light-secondary dark:text-dark-secondary">
+              Blog content <Asterisk />
+            </div>
+            <textarea
+              name="description"
+              placeholder="Start writing here&hellip;"
+              rows={5}
+              className="w-full rounded-lg bg-slate-200 p-3 placeholder:text-sm placeholder:text-light-tertiary dark:bg-dark-card dark:text-slate-50 dark:placeholder:text-dark-tertiary"
+              value={formData.description}
+              onChange={handleInputChange}
+            />
           </div>
-        </div>
 
-        <div className="mb-4 flex items-center">
-          <label className="flex items-center">
-            <span className="text-base font-medium text-gray-800 dark:text-white">
-              Featured Post
+          <div className="mb-2">
+            <div className="px-2 py-1 font-medium text-light-secondary dark:text-dark-secondary">
+              Author name <Asterisk />
+            </div>
+            <input
+              type="text"
+              name="authorName"
+              placeholder="Shree Sharma"
+              className="w-full rounded-lg bg-slate-200 p-3 placeholder:text-sm placeholder:text-light-tertiary dark:bg-dark-card dark:text-slate-50 dark:placeholder:text-dark-tertiary"
+              value={formData.authorName}
+              onChange={handleInputChange}
+            />
+          </div>
+
+          <div className="px-2 py-1 font-medium text-light-secondary dark:text-dark-secondary">
+            Blog cover image
+            <span className="text-xs tracking-wide text-dark-tertiary">
+              &nbsp;(jpg/png/webp)&nbsp;
             </span>
+            <Asterisk />
+          </div>
+          <div className="mb-4 flex justify-between gap-2 md:gap-4">
             <input
-              type="checkbox"
-              name="isFeaturedPost"
-              className="ml-2 h-5 w-5 rounded border text-indigo-600 focus:ring-indigo-400"
-              checked={formData.isFeaturedPost}
-              onChange={handleCheckboxChange}
+              type="url"
+              id="imagelink"
+              name="imageLink"
+              placeholder="https://&hellip;"
+              autoComplete="off"
+              className="w-3/4 rounded-lg bg-slate-200 p-3 placeholder:text-sm placeholder:text-light-tertiary dark:bg-dark-card dark:text-slate-50 dark:placeholder:text-dark-tertiary lg:w-10/12"
+              value={formData.imageLink}
+              onChange={handleInputChange}
             />
-          </label>
-        </div>
+            <button
+              type="button"
+              className="lg:text-md w-1/4 rounded-lg bg-light-primary text-xs text-slate-50 hover:bg-light-primary/80 dark:bg-dark-primary dark:text-dark-card dark:hover:bg-dark-secondary/80 md:text-sm lg:w-2/12 lg:px-4 lg:py-3"
+              onClick={() => {
+                setmodal(true);
+              }}
+            >
+              Pick image
+            </button>
+          </div>
+          <div className="mb-4 flex flex-col">
+            <label className="px-2 pb-1 font-medium text-light-secondary dark:text-dark-secondary md:mr-4 md:w-fit">
+              Categories <Asterisk />
+            </label>
+            <div className="flex flex-wrap gap-3 rounded-lg p-2 dark:bg-dark-card dark:p-3">
+              {categories.map((category, index) => (
+                <span key={`${category}-${index}`} onClick={() => handleCategoryClick(category)}>
+                  <CategoryPill
+                    category={category}
+                    selected={formData.categories.includes(category)}
+                  />
+                </span>
+              ))}
+            </div>
+          </div>
 
-        <button
-          type="submit"
-          className="flex w-full items-center justify-center rounded-lg bg-black p-2 text-base text-white hover:bg-gray-800 dark:bg-white dark:text-black md:w-fit"
-        >
-          Create Blog
-        </button>
-      </form>
-      <ModalComponent
-        selectedImage={selectedImage}
-        handleImageSelect={handleImageSelect}
-        handleSelector={handleselector}
-        setModal={setmodal}
-        modal={modal}
-      />
+          <button
+            type="submit"
+            className="flex w-full items-center justify-center rounded-lg bg-light-primary px-12 py-3 text-base font-semibold text-light hover:bg-light-primary/80 dark:bg-dark-primary dark:text-dark-card dark:hover:bg-dark-secondary/80 md:mx-1 md:w-fit"
+          >
+            Post blog
+          </button>
+        </form>
+        <ModalComponent
+          selectedImage={selectedImage}
+          handleImageSelect={handleImageSelect}
+          handleSelector={handleselector}
+          setModal={setmodal}
+          modal={modal}
+        />
+      </div>
     </div>
   );
 }
diff --git a/frontend/src/pages/details-page.tsx b/frontend/src/pages/details-page.tsx
index ceba0db0..42a81f66 100644
--- a/frontend/src/pages/details-page.tsx
+++ b/frontend/src/pages/details-page.tsx
@@ -2,44 +2,40 @@ import { useLocation, useNavigate } from 'react-router-dom';
 import navigateBackWhiteIcon from '@/assets/svg/navigate-back-white.svg';
 import Post from '@/types/post-type';
 import formatPostTime from '@/utils/format-post-time';
+import CategoryPill from '@/components/category-pill';
 
-const DetailsPage = () => {
+export default function DetailsPage() {
   const { state } = useLocation();
   const post: Post = state?.post;
   const navigate = useNavigate();
   return (
-    <div className="min-h-screen dark:bg-dark">
-      <div className="min-h-min w-full font-[Poppins] dark:bg-dark">
-        <div className="relative flex flex-col">
-          <img src={post.imageLink} alt={post.title} className="h-80 w-full object-cover md:h-96" />
-
-          <div className="absolute left-0 top-0 h-full w-full bg-black opacity-50"></div>
-          <div className="absolute top-16 w-full cursor-pointer justify-start px-4 text-lg text-white md:top-24 md:px-8 md:text-xl lg:px-16 lg:text-2xl">
-            <img src={navigateBackWhiteIcon} className="h-5 w-10" onClick={() => navigate(-1)} />
-          </div>
-          <div className="absolute bottom-4 w-full px-4 text-white md:bottom-8 md:px-8 lg:bottom-16 lg:px-16">
-            <div className="mb-6 flex space-x-2">
-              {post.categories.map((category, index) => (
-                <div key={index} className="rounded-full bg-gray-500 px-3 py-1 text-sm text-white">
-                  {category}
-                </div>
-              ))}
-            </div>
-            <h1 className="text-lg font-semibold md:text-2xl lg:text-4xl">{post.title}</h1>
-          </div>
+    <div className="min-h-screen bg-light dark:bg-dark">
+      <div className="relative flex flex-col">
+        <img src={post.imageLink} alt={post.title} className="h-80 w-full object-cover md:h-96" />
+        <div className="absolute left-0 top-0 h-full w-full bg-slate-950/60"></div>
+        <div className="absolute top-12 w-full px-2 cursor-pointer justify-start text-lg text-slate-50 md:top-20 md:px-8 md:text-xl lg:px-12 lg:text-2xl">
+          <img src={navigateBackWhiteIcon} className="h-5 w-10" onClick={() => navigate(-1)} />
         </div>
-        <div className="flex w-full flex-col gap-y-4 px-4 pt-4 text-left dark:text-white md:px-8 md:pt-8 lg:px-16 lg:pt-16">
-          <div>
-            <p className="text-gray-700 dark:text-white">{post.description}</p>
-          </div>
-          <div className="">
-            <p className="font-semibold text-gray-600 dark:text-white">By {post.authorName}</p>
-            <p className="text-sm">{formatPostTime(post.timeOfPost)}</p>
+        <div className="absolute bottom-6 w-full max-w-xl px-4 text-slate-50 md:bottom-8 md:max-w-3xl md:px-8 lg:bottom-12 lg:max-w-5xl lg:px-12">
+          <div className="mb-4 flex space-x-2">
+            {post.categories.map((category) => (
+              <CategoryPill category={category} />
+            ))}
           </div>
+          <h1 className="mb-4 text-xl font-semibold md:text-2xl lg:text-3xl">{post.title}</h1>
+          <p className="text-xs font-semibold text-dark-secondary md:text-sm">{post.authorName}</p>
+          <p className="text-xs text-dark-secondary/80 md:text-sm">
+            {formatPostTime(post.timeOfPost)}
+          </p>
+        </div>
+      </div>
+      <div className="mx-auto flex max-w-4xl flex-col items-center gap-y-4 px-8 py-10">
+        <div>
+          <p className="leading-7 text-light-secondary dark:text-dark-secondary md:text-lg">
+            {post.description}
+          </p>
         </div>
       </div>
     </div>
   );
-};
-
-export default DetailsPage;
+}
diff --git a/frontend/src/pages/home-page.tsx b/frontend/src/pages/home-page.tsx
index a467f01c..c246e2b0 100644
--- a/frontend/src/pages/home-page.tsx
+++ b/frontend/src/pages/home-page.tsx
@@ -7,6 +7,7 @@ import PostCard from '@/components/post-card';
 import Post from '@/types/post-type';
 import { PostCardSkeleton } from '@/components/skeletons/post-card-skeleton';
 function HomePage() {
+  const navigate = useNavigate();
   const [posts, setPosts] = useState<Post[]>([]);
 
   useEffect(() => {
@@ -19,19 +20,19 @@ function HomePage() {
         console.error(error);
       });
   }, []);
-  const navigate = useNavigate();
+
   return (
-    <div className="w-full font-[Poppins] dark:bg-dark">
+    <div className="w-full cursor-default bg-light dark:bg-dark">
       <div
         style={{ backgroundImage: `url(${bg})` }}
-        className="relative mt-[-8px] h-[460px] bg-cover bg-fixed bg-center"
+        className="relative -mt-2 h-[460px] bg-cover bg-fixed bg-center"
       >
         <div className="absolute inset-0 bg-black opacity-50"></div>
-        <div className="absolute inset-0 flex flex-col px-16 py-8 text-white">
+        <div className="absolute inset-0 flex flex-col px-8 py-8 text-slate-50 md:px-16">
           <div className="flex w-full justify-between">
             <div className="text-2xl font-semibold">WanderLust</div>
             <button
-              className="rounded border border-white px-4 py-2"
+              className="rounded border border-slate-50 px-4 py-2 hover:bg-slate-500/25"
               onClick={() => {
                 navigate('/add-blog');
               }}
@@ -39,20 +40,20 @@ function HomePage() {
               Create post
             </button>
           </div>
-          <div className="flex max-w-5xl flex-1 flex-col justify-end pb-8 dark:text-white">
-            <h1 className="text-4xl font-bold">Journey Beyond Horizons</h1>
-            <p className="my-4 text-xl">
-              Dive into the World of Travel with Stories That Transport You to Far-Off Lands.
+          <div className="mb-8 flex max-w-3xl flex-1 flex-col justify-end text-slate-50">
+            <h1 className="text-2xl font-bold md:text-4xl">Journey Beyond Horizons</h1>
+            <p className="my-4 md:text-xl">
+              Dive into the world of travel with stories that transport you to far-off lands.
               Adventure awaits around every corner. It's time to explore the world!
             </p>
-            <div className="text-xl font-semibold">Let's Go !!!</div>
+            <div className="text-xl font-semibold">Let's go!</div>
           </div>
         </div>
       </div>
-      <div className="px-16">
+      <div className="mx-4 md:mx-8 lg:mx-16">
         <BlogFeed />
-        <h1 className="text-2xl font-semibold dark:text-white">All Blog Posts</h1>
-        <div className="-mx-4 flex flex-wrap">
+        <h1 className="text-2xl font-semibold dark:text-dark-primary">All Posts</h1>
+        <div className="flex flex-wrap">
           {posts.length === 0
             ? Array(8)
                 .fill(0)
diff --git a/frontend/src/utils/category-colors.ts b/frontend/src/utils/category-colors.ts
new file mode 100644
index 00000000..92fda076
--- /dev/null
+++ b/frontend/src/utils/category-colors.ts
@@ -0,0 +1,17 @@
+type CategoryColors = Map<string, [string, string]>;
+
+const categoryColors: CategoryColors = new Map([
+  ['Travel', ['bg-pink-200 dark:bg-pink-900', 'bg-pink-500/80']],
+  ['Nature', ['bg-green-200 dark:bg-green-900', 'bg-green-500/80']],
+  ['City', ['bg-yellow-200 dark:bg-yellow-900', 'bg-yellow-500/80']],
+  ['Adventure', ['bg-blue-200 dark:bg-blue-900', 'bg-blue-500/80']],
+  ['Beaches', ['bg-purple-200 dark:bg-purple-900', 'bg-purple-500/80']],
+  ['Landmarks', ['bg-red-200 dark:bg-red-900', 'bg-red-500/80']],
+]);
+
+export const categories: string[] = Array.from(categoryColors.keys());
+
+export function getCategoryColors(category: string): [string, string] {
+  const colorTuple: [string, string] | undefined = categoryColors.get(category);
+  return colorTuple ?? ['bg-cyan-200 dark:bg-cyan-900', 'bg-cyan-500/80'];
+}
diff --git a/frontend/src/utils/category-props.tsx b/frontend/src/utils/category-props.tsx
deleted file mode 100644
index bc4d7272..00000000
--- a/frontend/src/utils/category-props.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-let commonProps: string = 'px-3 py-1 rounded-3xl font-normal text-sm';
-export const categoryProps = (category: string, selected: boolean = false) => {
-  switch (category) {
-    case 'Travel':
-      return `${commonProps} ${selected ? `bg-pink-500` : `bg-pink-100`}`;
-
-    case 'Nature':
-      return `${commonProps} ${selected ? `bg-green-500` : `bg-green-100`}`;
-
-    case 'City':
-      return `${commonProps} ${selected ? `bg-yellow-500` : `bg-yellow-100`}`;
-
-    case 'Adventure':
-      return `${commonProps} ${selected ? `bg-blue-500` : `bg-blue-100`}`;
-
-    case 'Beaches':
-      return `${commonProps} ${selected ? `bg-purple-500` : `bg-purple-100`}`;
-
-    case 'Landmarks':
-      return `${commonProps} ${selected ? `bg-red-500` : `bg-red-100`}`;
-
-    default:
-      return `${commonProps} ${selected ? `bg-orange-500` : `bg-orange-100`}`;
-  }
-};
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index c47db360..c483bb89 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -1,4 +1,7 @@
 /** @type {import('tailwindcss').Config} */
+const colors = require('tailwindcss/colors');
+const defaultTheme = require('tailwindcss/defaultTheme');
+
 export default {
   content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
   darkMode: 'media',
@@ -6,9 +9,27 @@ export default {
     extend: {
       colors: {
         dark: {
-          DEFAULT: 'var(--color-dark-background)',
-          textfield: 'var(--color-dark-textfield-card)',
+          DEFAULT: colors.slate[900],
+          primary: colors.slate[50],
+          secondary: colors.slate[300],
+          tertiary: colors.slate[400],
+          card: colors.slate[800],
+          title: colors.slate[50],
+          description: colors.slate[400],
+          info: colors.slate[500],
         },
+        light: {
+          DEFAULT: colors.slate[50],
+          primary: colors.slate[900],
+          secondary: colors.slate[600],
+          tertiary: colors.slate[500],
+          title: colors.slate[900],
+          description: colors.slate[700],
+          info: colors.slate[500],
+        },
+      },
+      fontFamily: {
+        sans: ['Poppins', ...defaultTheme.fontFamily.sans],
       },
     },
   },
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
index 52dd6bf6..a527a08a 100644
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -2,9 +2,7 @@
   "compilerOptions": {
     "baseUrl": ".",
     "paths": {
-      "@/*": [
-        "./src/*"
-      ]
+      "@/*": ["./src/*"]
     },
     "target": "ES2020",
     "useDefineForClassFields": true,