diff --git a/backend/src/app.ts b/backend/src/app.ts
index efee999..a0b98cc 100644
--- a/backend/src/app.ts
+++ b/backend/src/app.ts
@@ -9,7 +9,6 @@ import path from "path";
 
 // Import routes
 import userRoutes from './modules/user/routes/user.routes';
-import commentRoutes from './modules/comment/routes/comment.routes';
 import contentRoutes from './modules/content/routes/content.routes';
 import subscriptionRoutes from './modules/subscription/routes/subscription.routes';
 import notificationRoutes from './modules/notification/routes/notification.routes';
@@ -53,7 +52,6 @@ app.get("/health", (req, res) => {
 
 // API routes
 app.use("/user", userRoutes);
-app.use("/comment", commentRoutes);
 app.use("/content", contentRoutes);
 app.use("/subscription", subscriptionRoutes);
 app.use("/notification", notificationRoutes);
diff --git a/backend/src/modules/comment/controllers/comment.controller.ts b/backend/src/modules/comment/controllers/comment.controller.ts
deleted file mode 100644
index b1d3cd7..0000000
--- a/backend/src/modules/comment/controllers/comment.controller.ts
+++ /dev/null
@@ -1,105 +0,0 @@
-import {
-	createComment,
-	deleteComment,
-	deletePost,
-	getAllComments,
-	getComment,
-	updateComment
-} from '../services/comment.service';
-import {ContentService} from '../../content/services/content.service'
-import {Request, Response} from 'express';
-import {getUser} from "../../user/services/user.service";
-
-export async function createCommentController(req: Request, res: Response): Promise<void> {
-	const { post_id } = req.params
-	const { owner_id, text } = req.body;
-	try {
-		const response = await getUser(owner_id);
-		const creation = await createComment(post_id, owner_id, text, response?.username);
-		res.status(201).json({ message: 'Comment created successfully', creation});
-	} catch (error) {
-		console.log(error)
-		console.log(post_id, owner_id, text)
-		res.status(500).json({ error: error });
-	}
-	}
-
-	export async function getCommentByIdController(req: Request, res: Response) {
-	const { post_id, comment_id } = req.params;
-	try {
-		const comment = await getComment(post_id, comment_id);
-		console.log(comment)
-		if (comment) res.status(200).json(comment);
-		else res.status(404).json(null);
-	} catch (error) {
-		res.status(500).json({ error: 'Failed to fetch comment' });
-		console.log(error)
-	}
-}
-
-export async function updateCommentController(req: Request, res: Response) {
-	const { post_id, comment_id, user_id} = req.params;
-	const comment = await getComment(post_id, comment_id)
-	if (comment?.owner_id == user_id){
-		const updatedComment = req.body;
-		try {
-			await updateComment(post_id, comment_id, updatedComment);
-			res.status(200).json({ message: 'Comment updated successfully' });
-		} catch (error) {
-			res.status(500).json({ error: 'Failed to update comment' });
-			console.log(error)
-		}
-	} else {
-		res.status(401).json({ error: 'You do not have permission to try this.'});
-	}
-}
-
-export async function deleteCommentController(req: Request, res: Response) {
-	const { post_id, comment_id, user_id} = req.params;
-	const comment = await getComment(post_id, comment_id)
-	if (comment?.owner_id == user_id){
-		try {
-			await deleteComment(post_id, comment_id);
-			res.status(200).json({ message: 'Comment deleted successfully' });
-		} catch (error) {
-			res.status(500).json({ error: error });
-			console.log(error)
-		}
-	} else {
-		res.status(401).json({ error: 'You do not have permission to try this.'});
-	}
-}
-
-export async function deletePostController(req: Request, res: Response) {
-	const { post_id, user_id } = req.params;
-	const post = await ContentService.getContent(post_id)
-	const creator_id = post?.creatorUID
-	if (creator_id == user_id){
-		try {
-			await deletePost(post_id);
-			res.status(200).json({ message: 'Post (entire comment tree) deleted successfully' });
-		} catch (error) {
-			res.status(500).json({ error: error + " " + post_id});
-			console.log(error)
-		}
-	} else {
-		res.status(401).json({ error: 'You do not have permission to try this.'});
-	}
-}
-
-export async function getCommentsByPostController(req: Request, res: Response): Promise<void> {
-	const { post_id } = req.params;
-	try {
-		const comments = await getAllComments(post_id);
-
-		if (Object.keys(comments).length > 0) {
-			res.status(200).json(comments);
-		} else {
-			res.status(200).json(null);
-		}
-	} catch (error) {
-		console.error('Error fetching comments:', error);
-		res.status(500).json({ error: 'Failed to fetch comments' });
-		console.log("GET ALL COMMENTS ERROR: ", error)
-	}
-}
diff --git a/backend/src/modules/comment/routes/comment.routes.ts b/backend/src/modules/comment/routes/comment.routes.ts
deleted file mode 100644
index 9314dfd..0000000
--- a/backend/src/modules/comment/routes/comment.routes.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { Router } from 'express';
-import {
-    updateCommentController,
-    createCommentController,
-    deleteCommentController,
-    getCommentsByPostController,
-    getCommentByIdController, deletePostController
-} from '../controllers/comment.controller';
-const router = Router();
-
-router.post('/comments/:post_id', createCommentController);
-router.get('/comments/:post_id/', getCommentsByPostController);
-router.get('/comments/:post_id/:comment_id', getCommentByIdController);
-router.put('/comments/:post_id/:comment_id/:user_id', updateCommentController);
-router.delete('/post/:post_id/:user_id', deletePostController);
-router.delete('/comments/:post_id/:comment_id/:user_id', deleteCommentController);
-
-export default router;
diff --git a/backend/src/modules/content/controllers/comment.controller.ts b/backend/src/modules/content/controllers/comment.controller.ts
new file mode 100644
index 0000000..e5509ab
--- /dev/null
+++ b/backend/src/modules/content/controllers/comment.controller.ts
@@ -0,0 +1,118 @@
+import {
+  createComment,
+  deleteComment,
+  deletePost,
+  getAllComments,
+  getComment,
+  updateComment,
+} from "../services/comment.service";
+import { ContentService } from "../services/content.service";
+import { Request, Response } from "express";
+import { getUser } from "../../user/services/user.service";
+
+export async function createCommentController(
+  req: Request,
+  res: Response
+): Promise<void> {
+  const { post_id } = req.params;
+  const { owner_id, text } = req.body;
+  try {
+    const response = await getUser(owner_id);
+    const creation = await createComment(
+      post_id,
+      owner_id,
+      text,
+      response?.username
+    );
+    res.status(201).json({ message: "Comment created successfully", creation });
+  } catch (error) {
+    console.log(error);
+    console.log(post_id, owner_id, text);
+    res.status(500).json({ error: error });
+  }
+}
+
+export async function getCommentByIdController(req: Request, res: Response) {
+  const { post_id, comment_id } = req.params;
+  try {
+    const comment = await getComment(post_id, comment_id);
+    console.log(comment);
+    if (comment) res.status(200).json(comment);
+    else res.status(404).json(null);
+  } catch (error) {
+    res.status(500).json({ error: "Failed to fetch comment" });
+    console.log(error);
+  }
+}
+
+export async function updateCommentController(req: Request, res: Response) {
+  const { post_id, comment_id, user_id } = req.params;
+  const comment = await getComment(post_id, comment_id);
+  if (comment?.owner_id == user_id) {
+    const updatedComment = req.body;
+    try {
+      await updateComment(post_id, comment_id, updatedComment);
+      res.status(200).json({ message: "Comment updated successfully" });
+    } catch (error) {
+      res.status(500).json({ error: "Failed to update comment" });
+      console.log(error);
+    }
+  } else {
+    res.status(401).json({ error: "You do not have permission to try this." });
+  }
+}
+
+export async function deleteCommentController(req: Request, res: Response) {
+  const { post_id, comment_id, user_id } = req.params;
+  const comment = await getComment(post_id, comment_id);
+  if (comment?.owner_id == user_id) {
+    try {
+      await deleteComment(post_id, comment_id);
+      res.status(200).json({ message: "Comment deleted successfully" });
+    } catch (error) {
+      res.status(500).json({ error: error });
+      console.log(error);
+    }
+  } else {
+    res.status(401).json({ error: "You do not have permission to try this." });
+  }
+}
+
+export async function deletePostController(req: Request, res: Response) {
+  const { post_id, user_id } = req.params;
+  const post = await ContentService.getContent(post_id);
+  const creator_id = post?.creatorUID;
+  if (creator_id == user_id) {
+    try {
+      await deletePost(post_id);
+      res
+        .status(200)
+        .json({ message: "Post (entire comment tree) deleted successfully" });
+    } catch (error) {
+      res.status(500).json({ error: error + " " + post_id });
+      console.log(error);
+    }
+  } else {
+    res.status(401).json({ error: "You do not have permission to try this." });
+  }
+}
+
+export async function getCommentsByPostController(
+  req: Request,
+  res: Response
+): Promise<void> {
+  const { post_id } = req.params;
+  try {
+    const comments = await getAllComments(post_id);
+
+    if (Object.keys(comments).length > 0) {
+      res.status(200).json(comments);
+    } else {
+      res.status(200).json(null);
+    }
+  } catch (error) {
+    console.error("Error fetching comments:", error);
+    res.status(500).json({ error: "Failed to fetch comments" });
+    console.log("GET ALL COMMENTS ERROR: ", error);
+  }
+}
diff --git a/backend/src/modules/comment/models/comment.model.ts b/backend/src/modules/content/models/comment.model.ts
similarity index 100%
rename from backend/src/modules/comment/models/comment.model.ts
rename to backend/src/modules/content/models/comment.model.ts
diff --git a/backend/src/modules/content/routes/comment.routes.ts b/backend/src/modules/content/routes/comment.routes.ts
new file mode 100644
index 0000000..6264754
--- /dev/null
+++ b/backend/src/modules/content/routes/comment.routes.ts
@@ -0,0 +1,46 @@
+import { Router } from "express";
+import {
+  updateCommentController,
+  createCommentController,
+  deleteCommentController,
+  getCommentsByPostController,
+  getCommentByIdController,
+} from "../controllers/comment.controller";
+import { authenticateToken } from "../../../shared/middleware/auth";
+
+const commentRouter = Router();
+
+// Post routes
+commentRouter.post(
+  "/:contentId/comment",
+  authenticateToken,
+  createCommentController
+);
+
+// Get routes
+commentRouter.get(
+  "/:contentId/comments",
+  authenticateToken,
+  getCommentsByPostController
+);
+commentRouter.get(
+  "/:contentId/comment/:commentId",
+  authenticateToken,
+  getCommentByIdController
+);
+
+// Put routes
+commentRouter.put(
+  "/:contentId/comment/:commentId",
+  authenticateToken,
+  updateCommentController
+);
+
+// Delete routes
+commentRouter.delete(
+  "/:contentId/comment/:commentId",
+  authenticateToken,
+  deleteCommentController
+);
+
+export default commentRouter;
diff --git a/backend/src/modules/content/routes/content.routes.ts b/backend/src/modules/content/routes/content.routes.ts
index ef65d6c..1105999 100644
--- a/backend/src/modules/content/routes/content.routes.ts
+++ b/backend/src/modules/content/routes/content.routes.ts
@@ -1,5 +1,6 @@
 import { Router } from "express";
 import { ContentController } from "../controllers/content.controller";
+import commentRouter from "./comment.routes";
 
 const contentRoutes = Router();
 
@@ -7,7 +8,10 @@ contentRoutes.post("/", ContentController.createContent); // Create new content
 contentRoutes.post("/uploadThumbnail", ContentController.uploadThumbnail); // Upload thumbnail
 
 contentRoutes.get("/feed/trending", ContentController.getTrendingContent); // Get trending content
-contentRoutes.get("/feed/creators/:userId", ContentController.getRelatedContentCreators); // Get related content creators
+contentRoutes.get(
+  "/feed/creators/:userId",
+  ContentController.getRelatedContentCreators
+); // Get related content creators
 contentRoutes.get("/feed/:userId", ContentController.getPersonalizedContent); // Get personalized content
 contentRoutes.get("/related/:contentId", ContentController.getRelatedContent); // Get related content
 
@@ -49,4 +53,6 @@ contentRoutes.post(
   ContentController.unshareContent
 ); // Unshare content
 
+contentRoutes.use("/", commentRouter);
+
 export default contentRoutes;
diff --git a/backend/src/modules/comment/services/comment.service.ts b/backend/src/modules/content/services/comment.service.ts
similarity index 98%
rename from backend/src/modules/comment/services/comment.service.ts
rename to backend/src/modules/content/services/comment.service.ts
index b7bf2fa..5b7cd4e 100644
--- a/backend/src/modules/comment/services/comment.service.ts
+++ b/backend/src/modules/content/services/comment.service.ts
@@ -3,7 +3,7 @@ import { ref, get, set, remove, update, child, push } from "firebase/database";
 import { Comment } from "../models/comment.model";
 import { pushNotification } from "../../notification/services/notification.service";
 import { Notification } from "../../notification/models/notification.model";
-import { ContentService } from "../../content/services/content.service";
+import { ContentService } from "./content.service";
 
 export async function createComment(
   post_id: string,
diff --git a/backend/src/modules/subscription/services/stripe.service.ts b/backend/src/modules/subscription/services/stripe.service.ts
index 15e6337..a9c3105 100644
--- a/backend/src/modules/subscription/services/stripe.service.ts
+++ b/backend/src/modules/subscription/services/stripe.service.ts
@@ -1,9 +1,10 @@
-import Stripe from 'stripe';
-import dotenv from 'dotenv';
+import Stripe from "stripe";
+import dotenv from "dotenv";
 
 dotenv.config();
-const stripe = new Stripe(process.env.STRIPE_SECRET_KEY || '', {
-  apiVersion: '2025-05-28.basil',
+
+const stripe = new Stripe(process.env.STRIPE_SECRET_KEY || "", {
+  apiVersion: "2025-05-28.basil",
 });
 
 /**
@@ -24,7 +25,7 @@ export class StripeService {
       });
       return customer;
     } catch (error) {
-      console.error('Error creating Stripe customer:', error);
+      console.error("Error creating Stripe customer:", error);
       throw error;
     }
   }
@@ -46,20 +47,20 @@ export class StripeService {
     try {
       const session = await stripe.checkout.sessions.create({
         customer: customerId,
-        payment_method_types: ['card'],
+        payment_method_types: ["card"],
         line_items: [
           {
             price: priceId,
             quantity: 1,
           },
         ],
-        mode: 'subscription',
+        mode: "subscription",
         success_url: successUrl,
         cancel_url: cancelUrl,
       });
       return session;
     } catch (error) {
-      console.error('Error creating checkout session:', error);
+      console.error("Error creating checkout session:", error);
       throw error;
     }
   }
@@ -74,7 +75,7 @@ export class StripeService {
       const subscription = await stripe.subscriptions.retrieve(subscriptionId);
       return subscription;
     } catch (error) {
-      console.error('Error retrieving subscription:', error);
+      console.error("Error retrieving subscription:", error);
       throw error;
     }
   }
@@ -95,7 +96,7 @@ export class StripeService {
       });
       return subscription;
     } catch (error) {
-      console.error('Error canceling subscription:', error);
+      console.error("Error canceling subscription:", error);
       throw error;
     }
   }
@@ -108,7 +109,7 @@ export class StripeService {
    */
   constructWebhookEvent(payload: string, signature: string): Stripe.Event {
     try {
-      const webhookSecret = process.env.STRIPE_WEBHOOK_SECRET || '';
+      const webhookSecret = process.env.STRIPE_WEBHOOK_SECRET || "";
       const event = stripe.webhooks.constructEvent(
         payload,
         signature,
@@ -116,7 +117,7 @@ export class StripeService {
       );
       return event;
     } catch (error) {
-      console.error('Error constructing webhook event:', error);
+      console.error("Error constructing webhook event:", error);
       throw error;
     }
   }
@@ -126,12 +127,16 @@ export class StripeService {
    * @param paymentIntentId Stripe payment intent ID
    * @returns Payment intent object
    */
-  async getPaymentIntent(paymentIntentId: string): Promise<Stripe.PaymentIntent> {
+  async getPaymentIntent(
+    paymentIntentId: string
+  ): Promise<Stripe.PaymentIntent> {
     try {
-      const paymentIntent = await stripe.paymentIntents.retrieve(paymentIntentId);
+      const paymentIntent = await stripe.paymentIntents.retrieve(
+        paymentIntentId
+      );
       return paymentIntent;
     } catch (error) {
-      console.error('Error retrieving payment intent:', error);
+      console.error("Error retrieving payment intent:", error);
       throw error;
     }
   }
@@ -152,7 +157,7 @@ export class StripeService {
       });
       return subscription;
     } catch (error) {
-      console.error('Error updating subscription payment method:', error);
+      console.error("Error updating subscription payment method:", error);
       throw error;
     }
   }
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 5cdfb21..7dfb9b9 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,6 +1,8 @@
 import { Route, BrowserRouter as Router, Routes } from "react-router-dom";
 import Footer from "./components/Footer";
-import AuthProvider from "./hooks/AuthProvider";
+import AuthProvider from "./hooks/AuthProvider/AuthProvider";
+import { ToastProvider } from "./hooks/ToastProvider/ToastProvider";
+
 import NavbarWrapper from "./components/NavbarWrapper";
 import Background from "./components/Background";
 import Feed from "./pages/Feed";
@@ -59,55 +61,59 @@ import NotFound from "./pages/error/404";
 export default function App() {
   return (
     <Router>
-      <AuthProvider>
-        <Background />
-        <NavbarWrapper />
-
-        {/* ROUTER */}
-        <Routes>
-          {/* HOME/FEED */}
-          <Route path='/' element={<Feed />} />
-
-          {/* AUTHENTICATION */}
-          <Route path='/authentication/login' element={<Login />} />
-          <Route path='/authentication/register' element={<Register />} />
-          <Route
-            path='/authentication/reset-password'
-            element={<ResetPassword />}
-          />
-          <Route path='/auth/callback' element={<CallbackAuthentication />} />
-          <Route path='/auth/popup-callback' element={<PopupCallback />} />
-
-          {/* PROFILE */}
-          <Route path='/profile/:id' element={<Profile />} />
-          <Route path='/profile/manage' element={<ManageProfile />} />
-
-          {/* CONTACT */}
-          <Route path='/about' element={<About />} />
-          <Route path='/contact' element={<Contact />} />
-
-          {/* LEGAL */}
-          <Route path='/legal/terms-of-service' element={<TermsOfService />} />
-          <Route path='/legal/privacy-policy' element={<PrivacyPolicy />} />
-          <Route path='/legal/cookie-policy' element={<CookiePolicy />} />
-          <Route path='/legal/ai-disclaimer' element={<AIDisclaimer />} />
-          <Route path='/legal/accessibility' element={<Accessibility />} />
-
-          {/* CONTENT */}
-          <Route path='/content/create' element={<ContentEditor isEditMode={false} />} />
-          <Route path='/content/edit/:id' element={<ContentEditor isEditMode={true} />} />
-          <Route path='/content/:id' element={<ContentView />} />
-
-          {/* PRO */}
-          <Route path='/pro' element={<ProDetails />} />
-          <Route path='/pro/manage' element={<ManageSubscription />} />
-          <Route path='/pro/subscribe' element={<SubscribePro />} />
-
-          {/* 404 */}
-          <Route path='*' element={<NotFound />} />
-        </Routes>
-        <Footer />
-      </AuthProvider>
+      <ToastProvider>
+        <AuthProvider>
+          <Background />
+          <NavbarWrapper />
+
+          {/* ROUTER */}
+          <Routes>
+            {/* HOME/FEED */}
+            <Route path='/' element={<Feed />} />
+
+            {/* AUTHENTICATION */}
+            <Route path='/authentication/login' element={<Login />} />
+            <Route path='/authentication/register' element={<Register />} />
+            <Route
+              path='/authentication/reset-password'
+              element={<ResetPassword />}
+            />
+            <Route path='/auth/callback' element={<CallbackAuthentication />} />
+            <Route path='/auth/popup-callback' element={<PopupCallback />} />
+
+            {/* PROFILE */}
+            <Route path='/profile/:id' element={<Profile />} />
+            <Route path='/profile/manage' element={<ManageProfile />} />
+
+            {/* CONTACT */}
+            <Route path='/about' element={<About />} />
+            <Route path='/contact' element={<Contact />} />
+
+            {/* LEGAL */}
+            <Route
+              path='/legal/terms-of-service'
+              element={<TermsOfService />}
+            />
+            <Route path='/legal/privacy-policy' element={<PrivacyPolicy />} />
+            <Route path='/legal/cookie-policy' element={<CookiePolicy />} />
+            <Route path='/legal/ai-disclaimer' element={<AIDisclaimer />} />
+            <Route path='/legal/accessibility' element={<Accessibility />} />
+
+            {/* CONTENT */}
+            <Route path='/content/create' element={<ContentEditor />} />
+            <Route path='/content/:id' element={<ContentView />} />
+
+            {/* PRO */}
+            <Route path='/pro' element={<ProDetails />} />
+            <Route path='/pro/manage' element={<ManageSubscription />} />
+            <Route path='/pro/subscribe' element={<SubscribePro />} />
+
+            {/* 404 */}
+            <Route path='*' element={<NotFound />} />
+          </Routes>
+          <Footer />
+        </AuthProvider>
+      </ToastProvider>
     </Router>
   );
 }
diff --git a/frontend/src/components/Navbar.tsx b/frontend/src/components/Navbar.tsx
index 230923a..5078769 100644
--- a/frontend/src/components/Navbar.tsx
+++ b/frontend/src/components/Navbar.tsx
@@ -3,7 +3,7 @@ import { useEffect, useState } from "react";
 import { User } from "../models/User";
 import { Content } from "../models/Content";
 import { Notification } from "../models/Notification";
-import { useAuth } from "../hooks/useAuth";
+import { useAuth } from "../hooks/AuthProvider/useAuth";
 import { useNavigate } from "react-router-dom";
 
 import Cookies from "js-cookie";
@@ -11,6 +11,7 @@ import NotificationList from "./notification/NotificationList";
 import { SubscriptionService } from "../services/SubscriptionService";
 import { SearchService } from "../services/SearchService";
 import SearchList from "./search/SearchListResults";
+import { useToast } from "../hooks/ToastProvider/useToast";
 import NotificationService from "../services/NotificationService";
 
 export default function Navbar() {
@@ -33,6 +34,7 @@ export default function Navbar() {
   const [isProUser, setIsProUser] = useState<boolean>(false);
 
   const auth = useAuth();
+  const toast = useToast();
   const navigate = useNavigate();
 
   // ---------------------------------------
@@ -132,16 +134,13 @@ export default function Navbar() {
 
     // Display Search Results
     if (userSearchResults instanceof Error) {
-      console.error("Error fetching user search results:", userSearchResults);
+      toast("An error occurred while searching users.", "error");
     } else {
       setUserSearchResults(userSearchResults.users);
     }
 
     if (contentSearchResults instanceof Error) {
-      console.error(
-        "Error fetching content search results:",
-        contentSearchResults
-      );
+      toast("An error occurred while searching contents.", "error");
     } else {
       setContentSearchResults(contentSearchResults.contents);
     }
@@ -190,7 +189,7 @@ export default function Navbar() {
       await SubscriptionService.getSubscriptionStatus();
 
     if (subscriptionStatus instanceof Error) {
-      console.error("Error fetching subscription status:", subscriptionStatus);
+      toast("Failed to fetch subscription status.", "error");
       setIsProUser(false);
     } else {
       setIsProUser(
diff --git a/frontend/src/components/content/CommentList.tsx b/frontend/src/components/content/CommentList.tsx
index 4032f90..198212b 100644
--- a/frontend/src/components/content/CommentList.tsx
+++ b/frontend/src/components/content/CommentList.tsx
@@ -7,15 +7,14 @@ import { XCircleIcon } from "@heroicons/react/24/outline";
 
 import { useEffect, useRef, useState } from "react";
 import { useNavigate, useParams } from "react-router-dom";
-import axios from "axios";
-import { apiURL } from "../../scripts/api";
 
 import { Content } from "../../models/Content";
 import { User } from "../../models/User";
 import { Comment } from "../../models/Comment";
+import CommentService from "../../services/CommentService";
+import { useToast } from "../../hooks/ToastProvider/useToast";
 
 export default function CommentList({
-  content,
   user,
 }: {
   content: Content;
@@ -23,110 +22,122 @@ export default function CommentList({
 }) {
   const [comments, setComments] = useState<Comment[]>([]);
   const [newComment, setNewComment] = useState("");
-  const [editingCommentId, setEditingCommentId] = useState<string | null>(null);
-  const [editingCommentText, setEditingCommentText] = useState("");
+
+  const [selectedCommentEdit, setSelectedCommentEdit] =
+    useState<Comment | null>(null);
+
   const [numComments, setNumComments] = useState(0);
   const [loading, setLoading] = useState(true);
 
-  const postId = useParams().id;
+  const contentId = useParams().id as string;
   const editTextareaRef = useRef<HTMLTextAreaElement>(null);
   const navigate = useNavigate();
 
-  async function refreshComments() {
-    setLoading(true);
-    try {
-      const response = await axios.get(`${apiURL}/comment/comments/${postId}`);
-
-      if (response.data) {
-        console.log("refresh response: ", response.data);
-
-        let commentArray: Comment[] = [];
-        if (Array.isArray(response.data)) {
-          console.log("is array: ", response.data);
-          const responseArray = response.data;
-          responseArray.forEach((c) => {
-            commentArray.push(Object.values(c) as unknown as Comment);
-          });
-        } else {
-          console.log("is NOT array: ", response.data);
-          commentArray = Object.values(response.data) as unknown as Comment[];
-        }
-
-        console.log("refreshComments Response.data: ", commentArray);
-        setComments(commentArray);
-        setNumComments(comments.length);
-        if (Array.isArray(commentArray)) {
-          setNumComments(commentArray.length);
-        } else if (commentArray) {
-          setNumComments(1);
-        } else {
-          setNumComments(0);
-        }
-      }
-    } catch (error) {
-      console.error("Error fetching comments:", error);
-    } finally {
-      setLoading(false);
-    }
-  }
+  const toast = useToast();
 
   useEffect(() => {
     refreshComments();
-  }, [postId]);
+  }, [contentId]);
 
   useEffect(() => {
     if (editTextareaRef.current) {
       editTextareaRef.current.style.height = "auto";
       editTextareaRef.current.style.height = `${editTextareaRef.current.scrollHeight}px`;
     }
-  }, [editingCommentText]);
+  }, [selectedCommentEdit]);
+
+  const refreshComments = async () => {
+    const commentsResult = await CommentService.getPostComments(contentId);
+
+    if (commentsResult instanceof Error) {
+      toast("An error occurred while fetching comments.", "error");
+      setLoading(false);
+      return;
+    }
+    setComments(commentsResult);
+    setNumComments(commentsResult.length);
+    setLoading(false);
+  };
 
   const handleAddComment = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     if (!newComment) return;
     if (!user.uid) navigate(`../authentication/login`);
-    try {
-      await axios.post(`${apiURL}/comment/comments/${postId}`, {
-        owner_id: user.uid,
-        text: newComment,
-      });
-
-      await refreshComments();
-      setNewComment("");
-    } catch (error) {
-      console.error("Error adding comment:", error);
+
+    // Add comment to the backend
+    const result = await CommentService.publishComment(
+      contentId,
+      newComment,
+      user.uid
+    );
+
+    // Check if the comment was added successfully
+    if (result instanceof Error) {
+      toast("An error occurred while adding the comment.", "error");
+      return;
     }
+
+    // Update comments list to reflect the new comment
+    setComments((prevComments) => [...prevComments, result.comment]);
+    setNumComments((prevNum) => prevNum + 1);
+
+    setNewComment("");
   };
 
   const handleEditComment = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-    if (!editingCommentText) return;
+    if (!selectedCommentEdit) return;
     if (!user.uid) navigate(`../authentication/login`);
-    try {
-      await axios.put(
-        `${apiURL}/comment/comments/${postId}/${editingCommentId}/${user.uid}`,
-        {
-          text: editingCommentText,
-        }
-      );
-      await refreshComments();
-      setEditingCommentId(null);
-      setEditingCommentText("");
-    } catch (error) {
-      console.error("Error editing comment:", error);
+
+    // If comment is empty, delete it
+    if (selectedCommentEdit.text === "") {
+      await handleDeleteComment(selectedCommentEdit.comment_id);
+      setSelectedCommentEdit(null);
+      return;
+    }
+
+    // Update comment in the backend
+    const result = await CommentService.updateComment(
+      selectedCommentEdit.comment_id,
+      selectedCommentEdit.text,
+      contentId
+    );
+
+    // Check if the comment was updated successfully
+    if (result instanceof Error) {
+      toast("An error occurred while updating the comment.", "error");
+      return;
     }
+
+    // Update comments list to reflect the changes
+    const updatedComments = comments.map((comment) =>
+      comment.comment_id === selectedCommentEdit.comment_id
+        ? { ...comment, text: selectedCommentEdit.text }
+        : comment
+    );
+    setComments(updatedComments);
+    setNumComments(updatedComments.length);
+    setNewComment("");
+    setSelectedCommentEdit(null);
   };
 
   const handleDeleteComment = async (id: string) => {
     if (!user.uid) navigate(`../authentication/login`);
-    try {
-      await axios.delete(
-        `${apiURL}/comment/comments/${postId}/${id}/${user.uid}`
-      );
-    } catch (error) {
-      console.error("Error deleting comment:", error);
+
+    // Delete comment from the backend
+    const result = await CommentService.deleteComment(id, contentId);
+
+    if (result instanceof Error) {
+      toast("An error occurred while deleting the comment.", "error");
+      return;
     }
-    await refreshComments();
+
+    // Update comments list to reflect the changes
+    const updatedComments = comments.filter(
+      (comment) => comment.comment_id !== id
+    );
+    setComments(updatedComments);
+    setNumComments(updatedComments.length);
   };
 
   // --------------------------------------
@@ -164,17 +175,17 @@ export default function CommentList({
       </div>
 
       {/************ EDIT COMMENT ************/}
-      {editingCommentId != null && (
+      {selectedCommentEdit != null && (
         <>
           <div
             className='overlay'
-            onClick={() => setEditingCommentId(null)}
+            onClick={() => setSelectedCommentEdit(null)}
           ></div>
 
           <form onSubmit={handleEditComment} className='edit-comment'>
             <div
               onClick={() => {
-                setEditingCommentId(null);
+                setSelectedCommentEdit(null);
               }}
               className='close-button'
               style={{ cursor: "pointer" }}
@@ -187,9 +198,12 @@ export default function CommentList({
             <textarea
               ref={editTextareaRef}
               className='comment-textarea'
-              value={editingCommentText}
+              value={selectedCommentEdit?.text || ""}
               onChange={(e) => {
-                setEditingCommentText(e.target.value);
+                setSelectedCommentEdit({
+                  ...selectedCommentEdit!,
+                  text: e.target.value,
+                });
                 e.target.style.height = "auto";
                 e.target.style.height = `${e.target.scrollHeight}px`;
               }}
@@ -223,8 +237,7 @@ export default function CommentList({
                         <button
                           className={"icon-button"}
                           onClick={() => {
-                            setEditingCommentId(comment.comment_id);
-                            setEditingCommentText(comment.text);
+                            setSelectedCommentEdit(comment);
                           }}
                         >
                           <PencilIcon className={"icon edit"} />
diff --git a/frontend/src/components/content/ContentPreviewPopup.tsx b/frontend/src/components/content/ContentPreviewPopup.tsx
index 543a63d..05b8c7d 100644
--- a/frontend/src/components/content/ContentPreviewPopup.tsx
+++ b/frontend/src/components/content/ContentPreviewPopup.tsx
@@ -1,7 +1,7 @@
 import { useNavigate } from "react-router-dom";
 import { Content } from "../../models/Content";
 import { User } from "../../models/User";
-import { useAuth } from "../../hooks/useAuth";
+import { useAuth } from "../../hooks/AuthProvider/useAuth";
 import { useEffect, useState } from "react";
 import { apiURL } from "../../scripts/api";
 import axios from "axios";
diff --git a/frontend/src/components/content/ContentTile.tsx b/frontend/src/components/content/ContentTile.tsx
index 904c616..6ecbcf7 100644
--- a/frontend/src/components/content/ContentTile.tsx
+++ b/frontend/src/components/content/ContentTile.tsx
@@ -1,6 +1,6 @@
 import { useNavigate } from "react-router-dom";
 import { Content } from "../../models/Content";
-import { useAuth } from "../../hooks/useAuth";
+import { useAuth } from "../../hooks/AuthProvider/useAuth";
 
 import {
   BookmarkIcon as BookmarkIconOutline,
diff --git a/frontend/src/components/feed/ContentList.tsx b/frontend/src/components/feed/ContentList.tsx
index f6f1fd3..4c370e0 100644
--- a/frontend/src/components/feed/ContentList.tsx
+++ b/frontend/src/components/feed/ContentList.tsx
@@ -4,7 +4,7 @@ import { Content } from "../../models/Content";
 import { apiURL } from "../../scripts/api";
 import axios from "axios";
 import { normalizeContentDates } from "../../utils/contentHelper";
-import { useAuth } from "../../hooks/useAuth";
+import { useAuth } from "../../hooks/AuthProvider/useAuth";
 import ContentPreviewPopup from "../content/ContentPreviewPopup";
 
 export default function ContentList({ tab }: { tab: string }) {
diff --git a/frontend/src/components/search/SearchListResults.tsx b/frontend/src/components/search/SearchListResults.tsx
index ac9da33..877f7ad 100644
--- a/frontend/src/components/search/SearchListResults.tsx
+++ b/frontend/src/components/search/SearchListResults.tsx
@@ -5,6 +5,7 @@ import { useSearchParams } from "react-router-dom";
 import ContentSearchResult from "./ContentSearchResult";
 import UserSearchResult from "./UserSearchResult";
 import { SearchService } from "../../services/SearchService";
+import { useToast } from "../../hooks/ToastProvider/useToast";
 
 function SearchListResults({
   userSearchResults,
@@ -34,6 +35,7 @@ function SearchListResults({
   >(null);
 
   const [fetching, setFetching] = useState(false);
+  const toast = useToast();
 
   // ---------------------------------------
   // -------------- Page INIT --------------
@@ -72,7 +74,7 @@ function SearchListResults({
     );
 
     if (userSearchResults instanceof Error) {
-      console.error("Error fetching user data:", userSearchResults);
+      toast("An error occurred while fetching user data.", "error");
       setFetching(false);
       return;
     }
@@ -120,7 +122,7 @@ function SearchListResults({
     );
 
     if (searchContentResults instanceof Error) {
-      console.error("Error fetching content data:", searchContentResults);
+      toast("An error occurred while fetching content data.", "error");
       setFetching(false);
       return;
     }
diff --git a/frontend/src/hooks/AuthContext.ts b/frontend/src/hooks/AuthProvider/AuthContext.ts
similarity index 88%
rename from frontend/src/hooks/AuthContext.ts
rename to frontend/src/hooks/AuthProvider/AuthContext.ts
index 68831f2..831c6e9 100644
--- a/frontend/src/hooks/AuthContext.ts
+++ b/frontend/src/hooks/AuthProvider/AuthContext.ts
@@ -1,5 +1,5 @@
 import { createContext } from "react";
-import { User } from "../models/User";
+import { User } from "../../models/User";
 
 export interface AuthContextType {
   user: User | null;
diff --git a/frontend/src/hooks/AuthProvider.tsx b/frontend/src/hooks/AuthProvider/AuthProvider.tsx
similarity index 61%
rename from frontend/src/hooks/AuthProvider.tsx
rename to frontend/src/hooks/AuthProvider/AuthProvider.tsx
index 16be613..b5f0c79 100644
--- a/frontend/src/hooks/AuthProvider.tsx
+++ b/frontend/src/hooks/AuthProvider/AuthProvider.tsx
@@ -1,11 +1,11 @@
 import React, { useState, useEffect } from "react";
 import { AuthContext } from "./AuthContext";
-import { User } from "../models/User";
-import LoadingPage from "../pages/loading/LoadingPage";
-import UserService from "../services/UserService";
-import { AuthenticationService } from "../services/AuthenticationService";
+import { User } from "../../models/User";
+import LoadingPage from "../../pages/loading/LoadingPage";
+import UserService from "../../services/UserService";
+import { AuthenticationService } from "../../services/AuthenticationService";
 import { useNavigate } from "react-router-dom";
-import ToastNotification from "../components/ToastNotification";
+import { useToast } from "../ToastProvider/useToast";
 
 export default function AuthProvider({
   children,
@@ -14,25 +14,16 @@ export default function AuthProvider({
   const [loading, setLoading] = useState(true);
 
   const navigate = useNavigate();
-  const [toast, setToast] = useState<{
-    message: string;
-    type: "error" | "feedback" | "success";
-  } | null>(null);
+  const toast = useToast();
 
   const login = async (userUID: string) => {
     await getUserData(userUID);
   };
 
   const logout = async () => {
-    setToast(null);
-
     const result = await AuthenticationService.logout();
     if (result instanceof Error) {
-      setToast({
-        message:
-          result.message || "An error to logout occurred. Please try again.",
-        type: "error",
-      });
+      toast("An error occurred while logging out. Please try again.", "error");
       return;
     }
 
@@ -42,18 +33,11 @@ export default function AuthProvider({
 
   useEffect(() => {
     const initializeUser = async () => {
-      setToast(null);
-
       // Check if we have cookies before attempting to refresh
       const response = await AuthenticationService.refreshToken();
 
       if (response instanceof Error) {
-        setToast({
-          message:
-            response.message ||
-            "An error occurred while refreshing the token. Please try again.",
-          type: "error",
-        });
+        toast("An error occurred while refreshing the token.", "error");
         setUser(null);
         setLoading(false);
         return;
@@ -71,15 +55,13 @@ export default function AuthProvider({
   }, []);
 
   async function getUserData(userUID: string) {
-    setToast(null);
     const userData = await UserService.fetchUserWithID(userUID);
 
     if (!(userData instanceof Error)) {
       if (userData === null) {
-        setToast({
-          message: "Issue to login. User not found.",
-          type: "error",
-        });
+        toast("User not found. Please log in again.", "error");
+        setUser(null);
+        navigate("/authentication/login");
         return;
       }
       setUser(userData || null);
@@ -98,13 +80,6 @@ export default function AuthProvider({
       value={{ user, setUser, login, logout, isAuthenticated: !!user }}
     >
       {children}
-      {toast && (
-        <ToastNotification
-          type={toast.type}
-          message={toast.message}
-          onClose={() => setToast(null)}
-        />
-      )}
     </AuthContext.Provider>
   );
 }
diff --git a/frontend/src/hooks/useAuth.ts b/frontend/src/hooks/AuthProvider/useAuth.ts
similarity index 100%
rename from frontend/src/hooks/useAuth.ts
rename to frontend/src/hooks/AuthProvider/useAuth.ts
diff --git a/frontend/src/hooks/ToastProvider/ToastContext.ts b/frontend/src/hooks/ToastProvider/ToastContext.ts
new file mode 100644
index 0000000..67f314b
--- /dev/null
+++ b/frontend/src/hooks/ToastProvider/ToastContext.ts
@@ -0,0 +1,10 @@
+import { createContext } from "react";
+import { ToastType } from "./ToastType";
+
+export type ToastContextType = {
+  notify: (message: string, type: ToastType) => void;
+};
+
+export const ToastContext = createContext<ToastContextType | undefined>(
+  undefined
+);
diff --git a/frontend/src/hooks/ToastProvider/ToastProvider.tsx b/frontend/src/hooks/ToastProvider/ToastProvider.tsx
new file mode 100644
index 0000000..7ab8e3b
--- /dev/null
+++ b/frontend/src/hooks/ToastProvider/ToastProvider.tsx
@@ -0,0 +1,31 @@
+import { useState, ReactNode } from "react";
+import ToastNotification from "../../components/ToastNotification";
+import { ToastType } from "./ToastType";
+import { ToastContext } from "./ToastContext";
+
+
+export function ToastProvider({ children }: { children: ReactNode }) {
+  const [toast, setToast] = useState<{
+    message: string;
+    type: ToastType;
+  } | null>(null);
+
+  const notify = (message: string, type: ToastType) => {
+    setToast({ message, type });
+  };
+
+  const handleClose = () => setToast(null);
+
+  return (
+    <ToastContext.Provider value={{ notify }}>
+      {children}
+      {toast && (
+        <ToastNotification
+          message={toast.message}
+          type={toast.type}
+          onClose={handleClose}
+        />
+      )}
+    </ToastContext.Provider>
+  );
+}
diff --git a/frontend/src/hooks/ToastProvider/ToastType.ts b/frontend/src/hooks/ToastProvider/ToastType.ts
new file mode 100644
index 0000000..733f05d
--- /dev/null
+++ b/frontend/src/hooks/ToastProvider/ToastType.ts
@@ -0,0 +1 @@
+export type ToastType = "error" | "feedback" | "success";
diff --git a/frontend/src/hooks/ToastProvider/useToast.ts b/frontend/src/hooks/ToastProvider/useToast.ts
new file mode 100644
index 0000000..feb2891
--- /dev/null
+++ b/frontend/src/hooks/ToastProvider/useToast.ts
@@ -0,0 +1,8 @@
+import { useContext } from "react";
+import { ToastContext } from "./ToastContext";
+
+export function useToast() {
+  const context = useContext(ToastContext);
+  if (!context) throw new Error("useToast must be used within a ToastProvider");
+  return context.notify;
+}
diff --git a/frontend/src/pages/Feed.tsx b/frontend/src/pages/Feed.tsx
index e852e53..57a77a2 100644
--- a/frontend/src/pages/Feed.tsx
+++ b/frontend/src/pages/Feed.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
-import { useAuth } from "../hooks/useAuth";
+import { useAuth } from "../hooks/AuthProvider/useAuth";
 import { User } from "../models/User";
 import ContentList from "../components/feed/ContentList";
 import UserService from "../services/UserService";
diff --git a/frontend/src/pages/authentication/CallbackAuthentication.tsx b/frontend/src/pages/authentication/CallbackAuthentication.tsx
index c2c3177..084d0f7 100644
--- a/frontend/src/pages/authentication/CallbackAuthentication.tsx
+++ b/frontend/src/pages/authentication/CallbackAuthentication.tsx
@@ -1,6 +1,6 @@
 import { Suspense, useEffect, useState } from "react";
 import { useNavigate, useSearchParams } from "react-router-dom";
-import { useAuth } from "../../hooks/useAuth";
+import { useAuth } from "../../hooks/AuthProvider/useAuth";
 import { AuthenticationService } from "../../services/AuthenticationService";
 
 function Callback() {
diff --git a/frontend/src/pages/authentication/Login.tsx b/frontend/src/pages/authentication/Login.tsx
index 467a010..799f6d6 100644
--- a/frontend/src/pages/authentication/Login.tsx
+++ b/frontend/src/pages/authentication/Login.tsx
@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { useNavigate } from "react-router-dom";
-import { useAuth } from "../../hooks/useAuth";
+import { useAuth } from "../../hooks/AuthProvider/useAuth";
 import { OAuthButtons } from "../../components/authentication/OAuthButtons";
 import { AuthenticationService } from "../../services/AuthenticationService";
 
diff --git a/frontend/src/pages/authentication/Register.tsx b/frontend/src/pages/authentication/Register.tsx
index 37330d7..5a46c40 100644
--- a/frontend/src/pages/authentication/Register.tsx
+++ b/frontend/src/pages/authentication/Register.tsx
@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { useNavigate } from "react-router-dom";
-import { useAuth } from "../../hooks/useAuth";
+import { useAuth } from "../../hooks/AuthProvider/useAuth";
 import { OAuthButtons } from "../../components/authentication/OAuthButtons";
 import UserService from "../../services/UserService";
 import { AuthenticationService } from "../../services/AuthenticationService";
diff --git a/frontend/src/pages/content/ContentEditor.tsx b/frontend/src/pages/content/ContentEditor.tsx
index c47e93f..40087e2 100644
--- a/frontend/src/pages/content/ContentEditor.tsx
+++ b/frontend/src/pages/content/ContentEditor.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { useAuth } from "../../hooks/useAuth";
+import { useAuth } from "../../hooks/AuthProvider/useAuth";
 import { useNavigate, useParams } from "react-router-dom";
 import Cookies from "js-cookie";
 
diff --git a/frontend/src/pages/content/ContentView.tsx b/frontend/src/pages/content/ContentView.tsx
index 22a3b36..ba7a8f6 100644
--- a/frontend/src/pages/content/ContentView.tsx
+++ b/frontend/src/pages/content/ContentView.tsx
@@ -1,5 +1,5 @@
 import { useNavigate, useParams } from "react-router-dom";
-import { useAuth } from "../../hooks/useAuth";
+import { useAuth } from "../../hooks/AuthProvider/useAuth";
 import { useEffect, useState } from "react";
 import type { Content } from "../../models/Content";
 import { User } from "../../models/User";
@@ -24,6 +24,7 @@ import CommentList from "../../components/content/CommentList";
 import UserService from "../../services/UserService";
 import FollowService from "../../services/FollowService";
 import { normalizeContentDates } from "../../utils/contentHelper";
+import { useToast } from "../../hooks/ToastProvider/useToast";
 
 /**
  * Page() -> JSX.Element
@@ -64,6 +65,7 @@ export default function ContentView() {
   const [firstRender, setFirstRender] = useState(true);
 
   const navigate = useNavigate();
+  const toast = useToast();
 
   // ---------------------------------------
   // -------------- useEffects -------------
@@ -104,7 +106,10 @@ export default function ContentView() {
           // Check if creator is an instance of Error
           // and handle accordingly.
           if (creator instanceof Error) {
-            console.error("Error fetching creator data:", creator.message);
+            toast(
+              "An error occurred while fetching the creator's data.",
+              "error"
+            );
             setCreator(null);
           } else if (creator) {
             setCreator(creator);
@@ -208,11 +213,8 @@ export default function ContentView() {
 
     if (localStorage.getItem("userUID") === content?.creatorUID) {
       try {
-        // Delete comments
-        const user_id = content?.creatorUID;
-        await axios.delete(`${apiURL}/comment/post/${content.uid}/${user_id}`);
-
         // Delete content
+        const user_id = auth.user?.uid;
         const content_id = content?.uid;
         await axios({
           method: "delete",
@@ -366,10 +368,11 @@ export default function ContentView() {
 
     // Check if the response is an error
     if (response instanceof Error) {
-      alert(
-        `Failed to ${
+      toast(
+        `An error occurred while trying to ${
           isFollowing ? "unfollow" : "follow"
-        } user. Please try again.`
+        } the creator.`,
+        "error"
       );
       return;
     }
diff --git a/frontend/src/pages/pro/ManageSubscription.tsx b/frontend/src/pages/pro/ManageSubscription.tsx
index 485fd30..bd36fc4 100644
--- a/frontend/src/pages/pro/ManageSubscription.tsx
+++ b/frontend/src/pages/pro/ManageSubscription.tsx
@@ -1,5 +1,5 @@
 import { useNavigate } from "react-router-dom";
-import { useAuth } from "../../hooks/useAuth";
+import { useAuth } from "../../hooks/AuthProvider/useAuth";
 import { useEffect, useState } from "react";
 import { SubscriptionStatus } from "../../models/SubscriptionStatus";
 import { SubscriptionService } from "../../services/SubscriptionService";
diff --git a/frontend/src/pages/pro/ProDetails.tsx b/frontend/src/pages/pro/ProDetails.tsx
index acfc2c3..42d2ccd 100644
--- a/frontend/src/pages/pro/ProDetails.tsx
+++ b/frontend/src/pages/pro/ProDetails.tsx
@@ -1,5 +1,5 @@
 import { useNavigate } from "react-router-dom";
-import { useAuth } from "../../hooks/useAuth";
+import { useAuth } from "../../hooks/AuthProvider/useAuth";
 import { useEffect, useState } from "react";
 import SummarizzPro from "../../components/SummarizzPro";
 import { SubscriptionService } from "../../services/SubscriptionService";
diff --git a/frontend/src/pages/pro/SubscribePro.tsx b/frontend/src/pages/pro/SubscribePro.tsx
index 8d6a52e..293dc83 100644
--- a/frontend/src/pages/pro/SubscribePro.tsx
+++ b/frontend/src/pages/pro/SubscribePro.tsx
@@ -1,5 +1,5 @@
 import { useNavigate } from "react-router-dom";
-import { useAuth } from "../../hooks/useAuth";
+import { useAuth } from "../../hooks/AuthProvider/useAuth";
 import { useEffect, useState } from "react";
 import { SubscriptionService } from "../../services/SubscriptionService";
 
diff --git a/frontend/src/pages/profile/ManageProfile.tsx b/frontend/src/pages/profile/ManageProfile.tsx
index ad373ba..977c7c3 100644
--- a/frontend/src/pages/profile/ManageProfile.tsx
+++ b/frontend/src/pages/profile/ManageProfile.tsx
@@ -1,5 +1,5 @@
 import { useParams } from "react-router-dom";
-import { useAuth } from "../../hooks/useAuth";
+import { useAuth } from "../../hooks/AuthProvider/useAuth";
 import { useEffect, useState } from "react";
 import { User } from "../../models/User";
 import UserService from "../../services/UserService";
diff --git a/frontend/src/pages/profile/Profile.tsx b/frontend/src/pages/profile/Profile.tsx
index 196b313..e9409ef 100644
--- a/frontend/src/pages/profile/Profile.tsx
+++ b/frontend/src/pages/profile/Profile.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
-import { useAuth } from "../../hooks/useAuth";
+import { useAuth } from "../../hooks/AuthProvider/useAuth";
 import { apiURL } from "../../scripts/api";
 import axios from "axios";
 
@@ -11,6 +11,7 @@ import ContentTile from "../../components/content/ContentTile";
 import { User } from "../../models/User";
 import UserService from "../../services/UserService";
 import FollowService from "../../services/FollowService";
+import { useToast } from "../../hooks/ToastProvider/useToast";
 
 export default function Profile() {
   const { id } = useParams();
@@ -28,6 +29,7 @@ export default function Profile() {
 
   const [user, setUser] = useState<User | null>(null);
   const auth = useAuth();
+  const toast = useToast();
 
   // ----------------------------------------
   // ------------ Event Handlers ------------
@@ -45,7 +47,10 @@ export default function Profile() {
       const user = await UserService.fetchUserWithID(id);
 
       if (user instanceof Error) {
-        console.error("Error fetching user data:", user.message);
+        toast(
+          "An error occurred while fetching user data. Please try again.",
+          "error"
+        );
         setIsLoading(false);
         return;
       }
@@ -97,6 +102,10 @@ export default function Profile() {
       );
 
       if (followRequestsResponse instanceof Error) {
+        toast(
+          "An error occurred while fetching follow requests. Please try again.",
+          "error"
+        );
         return;
       }
 
@@ -241,10 +250,11 @@ export default function Profile() {
 
     // Check if the response is an error
     if (response instanceof Error) {
-      alert(
-        `Failed to ${
+      toast(
+        `An error occurred while trying to ${
           isFollowing ? "unfollow" : "follow"
-        } user. Please try again.`
+        } the user.`,
+        "error"
       );
       return;
     }
@@ -302,7 +312,10 @@ export default function Profile() {
     );
 
     if (response instanceof Error) {
-      alert("Failed to approve follow request. Please try again.");
+      toast(
+        "Failed to approve follow request. Please try again.",
+        "error"
+      );
       return;
     }
   };
@@ -320,7 +333,10 @@ export default function Profile() {
     );
 
     if (response instanceof Error) {
-      alert("Failed to approve follow request. Please try again.");
+      toast(
+        "Failed to reject follow request. Please try again.",
+        "error"
+      );
       return;
     }
   };
diff --git a/frontend/src/services/CommentService.ts b/frontend/src/services/CommentService.ts
new file mode 100644
index 0000000..ad80cad
--- /dev/null
+++ b/frontend/src/services/CommentService.ts
@@ -0,0 +1,182 @@
+import axios from "axios";
+import { apiURL } from "../scripts/api";
+import { Comment } from "../models/Comment";
+
+/**
+ * CommentService class
+ *
+ * @description
+ * This class provides methods for managing comments, including publishing,
+ * fetching, updating, and deleting comments.
+ */
+export default class CommentService {
+  /**
+   * publishComment() -> Promise<{ message: string; comment: Comment } | Error>
+   * 
+   * Publishes a comment for a specific content ID.
+   *
+   * @param contentId - The ID of the content to comment on.
+   * @param commentText - The text of the comment.
+   * @param ownerId - The ID of the user who owns the comment.
+   * @returns A promise that resolves to a success message and the created comment or an error.
+   */
+  static async publishComment(
+    contentId: string,
+    commentText: string,
+    ownerId: string
+  ): Promise<{ message: string; comment: Comment } | Error> {
+    try {
+      const response = await axios.post(
+        `${apiURL}/content/${contentId}/comment`,
+        {
+          text: commentText,
+          ownerId: ownerId,
+        },
+        {
+          withCredentials: true,
+          timeout: 5000,
+        }
+      );
+
+      return response.data;
+    } catch (error) {
+      const message =
+        axios.isAxiosError(error) && error.response?.data?.error
+          ? error.response.data.error
+          : "Failed to publish comment";
+
+      return new Error(message);
+    }
+  }
+
+  /**
+   * getPostComments() -> Promise<Comment[] | Error>
+   * 
+   * Fetches all comments for a specific content ID.
+   *
+   * @param contentId - The ID of the content to fetch comments for.
+   * @returns A promise that resolves to an array of comments or an error.
+   */
+  static async getPostComments(contentId: string): Promise<Comment[] | Error> {
+    try {
+      const response = await axios.get(
+        `${apiURL}/content/${contentId}/comments`,
+        {
+          withCredentials: true,
+          timeout: 5000,
+        }
+      );
+
+      return response.data;
+    } catch (error) {
+      const message =
+        axios.isAxiosError(error) && error.response?.data?.error
+          ? error.response.data.error
+          : "Failed to get comments";
+
+      return new Error(message);
+    }
+  }
+
+  /**
+   * getComment() -> Promise<Comment | Error>
+   * 
+   * Fetches a specific comment by its ID and the content ID it belongs to.
+   *
+   * @param commentId - The ID of the comment to fetch.
+   * @param contentId - The ID of the content the comment belongs to.
+   * @returns A promise that resolves to the comment or an error.
+   */
+  static async getComment(
+    commentId: string,
+    contentId: string
+  ): Promise<Comment | Error> {
+    try {
+      const response = await axios.get(
+        `${apiURL}/content/${contentId}/comment/${commentId}`,
+        {
+          withCredentials: true,
+          timeout: 5000,
+        }
+      );
+
+      return response.data;
+    } catch (error) {
+      const message =
+        axios.isAxiosError(error) && error.response?.data?.error
+          ? error.response.data.error
+          : "Failed to get comment";
+
+      return new Error(message);
+    }
+  }
+
+  /**
+   * updateComment() -> Promise<{ message: string } | Error>
+   * 
+   * Updates a comment by its ID and the content ID it belongs to.
+   *
+   * @param commentId - The ID of the comment to update.
+   * @param commentText - The new text for the comment.
+   * @param contentId - The ID of the content the comment belongs to.
+   * @returns A promise that resolves to a success message or an error.
+   */
+  static async updateComment(
+    commentId: string,
+    commentText: string,
+    contentId: string
+  ): Promise<{ message: string } | Error> {
+    try {
+      const response = await axios.put(
+        `${apiURL}/content/${contentId}/comment/${commentId}`,
+        { text: commentText },
+        {
+          withCredentials: true,
+          timeout: 5000,
+        }
+      );
+
+      return response.data;
+    } catch (error) {
+      const message =
+        axios.isAxiosError(error) && error.response?.data?.error
+          ? error.response.data.error
+          : "Failed to update comment";
+
+      return new Error(message);
+    }
+  }
+
+  /**
+   * deleteComment() -> Promise<{ message: string } | Error>
+   * 
+   * Deletes a comment by its ID and the content ID it belongs to.
+   *
+   * @param commentId - The ID of the comment to delete.
+   * @param contentId - The ID of the content the comment belongs to.
+   * @returns A promise that resolves to a success message or an error.
+   */
+  static async deleteComment(
+    commentId: string,
+    contentId: string
+  ): Promise<{ message: string } | Error> {
+    try {
+      const response = await axios.delete(
+        `${apiURL}/content/${contentId}/comment/${commentId}`,
+        {
+          withCredentials: true,
+          timeout: 5000,
+        }
+      );
+
+      return response.data;
+    } catch (error) {
+      const message =
+        axios.isAxiosError(error) && error.response?.data?.error
+          ? error.response.data.error
+          : "Failed to delete comment";
+
+      return new Error(message);
+    }
+  }
+}