diff --git a/src/components/ProblemViewLayout.tsx b/src/components/ProblemViewLayout.tsx
index 46866b7..c495479 100644
--- a/src/components/ProblemViewLayout.tsx
+++ b/src/components/ProblemViewLayout.tsx
@@ -14,7 +14,7 @@ import TestcasesGradingIndicator from "./TestcasesGradingIndicator";
 import { Button } from "./shadcn/Button";
 import { Combobox } from "./shadcn/Combobox";
 import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "./shadcn/Resizable";
-import DifficultyBadge from "./DifficultyBadge";
+import { Separator } from "./shadcn/Seperator";
 
 export type OnSubmitProblemViewLayoutCallback = {
     setGrading: React.Dispatch<React.SetStateAction<boolean>>
@@ -115,14 +115,17 @@ const ProblemViewLayout = ({
 							</p>
 						</div>
 
-						<div className="flex">
+						{/* <div className="flex">
 							<b className="mr-2">Difficulty</b>
 							<p className="">
 								<DifficultyBadge level={problem?.difficulty}/>
 							</p>
-						</div>
+						</div> */}
 					</div>
 				</div>
+                <div className="mt-[8px] mb-[16px]">
+                    <Separator orientation="horizontal"/>
+                </div>
 				<div>
 					{problem && (
 						<ReadOnlyPlate
@@ -131,7 +134,7 @@ const ProblemViewLayout = ({
 									String(problem.description)
 								)
 							)}
-							className="h-[70vh] xl:h-[80vh]"
+							className="h-[65vh] xl:h-[75vh]"
 						/>
 					)}
 				</div>
diff --git a/src/components/Tables/ProblemTables/MyProblemsTable.tsx b/src/components/Tables/ProblemTables/MyProblemsTable.tsx
index 862ecf9..c460852 100644
--- a/src/components/Tables/ProblemTables/MyProblemsTable.tsx
+++ b/src/components/Tables/ProblemTables/MyProblemsTable.tsx
@@ -1,12 +1,12 @@
 import { ColumnDef } from "@tanstack/react-table";
 import {
-    Check,
-    FileSpreadsheet,
-    MoreHorizontal,
-    Tally4,
-    Tally5,
-    Timer,
-    X
+	Check,
+	FileSpreadsheet,
+	MoreHorizontal,
+	Tally4,
+	Tally5,
+	Timer,
+	X,
 } from "lucide-react";
 import { Link } from "react-router-dom";
 import { ProgrammingLanguageOptions } from "../../../constants/ProgrammingLanguage";
@@ -16,12 +16,18 @@ import { readableDateFormat } from "../../../utilities/ReadableDateFormat";
 import MyProblemDropdown from "../../Dropdowns/MyProblemDropdown";
 import { DataTable } from "../Prototype/DataTable";
 import DataTableSortableLayout from "../Prototype/DataTableSortableLayout";
+import { HoverCard, HoverCardContent, HoverCardTrigger } from "../../shadcn/HoverCard";
+import { Badge } from "../../shadcn/Badge";
 
 const columns: ColumnDef<ProblemPopulateTestcases>[] = [
 	{
 		accessorKey: "title",
-		header: ({column})=>(
-			<DataTableSortableLayout onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}>
+		header: ({ column }) => (
+			<DataTableSortableLayout
+				onClick={() =>
+					column.toggleSorting(column.getIsSorted() === "asc")
+				}
+			>
 				Title
 			</DataTableSortableLayout>
 		),
@@ -39,15 +45,19 @@ const columns: ColumnDef<ProblemPopulateTestcases>[] = [
 
 	{
 		accessorKey: "creator",
-		header: ({column})=>(
-			<DataTableSortableLayout onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}>
+		header: ({ column }) => (
+			<DataTableSortableLayout
+				onClick={() =>
+					column.toggleSorting(column.getIsSorted() === "asc")
+				}
+			>
 				Author
 			</DataTableSortableLayout>
 		),
 		cell: ({ row }) => {
 			return (
 				<div className="font-medium">
-						{row.original.creator.username}
+					{row.original.creator.username}
 				</div>
 			);
 		},
@@ -75,10 +85,7 @@ const columns: ColumnDef<ProblemPopulateTestcases>[] = [
 	},
 	{
 		accessorKey: "source_code",
-		header: () => <div className="text-center">
-			
-			Source Code
-			</div>,
+		header: () => <div className="text-center">Source Code</div>,
 		cell: ({ row }) => {
 			return (
 				<div className="flex justify-center">
@@ -123,19 +130,57 @@ const columns: ColumnDef<ProblemPopulateTestcases>[] = [
 		header: () => <div className="text-center">Allowed Languages</div>,
 		cell: ({ row }) => (
 			<div className="font-medium flex justify-center">
-				{row.original.allowed_languages.split(",").map((lang) => (
-					<span className="mx-0.5">
-						{
-							ProgrammingLanguageOptions.find(
-								(option) => option.value === lang
-							)?.badge
-						}
-					</span>
-				))}
+				<div className="font-medium">
+					{row.original.allowed_languages
+						.split(",")
+						.slice(0, 2)
+						.map((lang) => (
+							<span className="mx-0.5">
+								{
+									ProgrammingLanguageOptions.find(
+										(option) => option.value === lang
+									)?.badge
+								}
+							</span>
+						))}
+
+					{row.original.allowed_languages.split(",").length > 2 && (
+						<span className="mx-0.5">
+							<HoverCard>
+								<HoverCardTrigger>
+									<Badge className="bg-neutral-200 text-black cursor-pointer">
+										...{" "}
+										{row.original.allowed_languages.split(
+											","
+										).length - 2}{" "}
+										more
+									</Badge>
+								</HoverCardTrigger>
+								<HoverCardContent>
+									<div className="flex gap-0.5">
+										{row.original.allowed_languages
+											.split(",")
+											.map((lang) => (
+												<div>
+													{
+														ProgrammingLanguageOptions.find(
+															(option) =>
+																option.value ===
+																lang
+														)?.badge
+													}
+												</div>
+											))}
+									</div>
+								</HoverCardContent>
+							</HoverCard>
+						</span>
+					)}
+				</div>
 			</div>
 		),
 	},
-    // Temporary hide this column
+	// Temporary hide this column
 	// {
 	// 	accessorKey: "difficulty",
 	// 	header: ({ column }) => (
@@ -152,10 +197,13 @@ const columns: ColumnDef<ProblemPopulateTestcases>[] = [
 	{
 		accessorKey: "updated_date",
 		header: ({ column }) => (
-			<DataTableSortableLayout onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}>
+			<DataTableSortableLayout
+				onClick={() =>
+					column.toggleSorting(column.getIsSorted() === "asc")
+				}
+			>
 				Updated Date
 			</DataTableSortableLayout>
-
 		),
 		cell: ({ row }) => (
 			<div className="font-mono">
@@ -179,11 +227,7 @@ const columns: ColumnDef<ProblemPopulateTestcases>[] = [
 	// },
 	{
 		accessorKey: "action",
-		header: () => (
-			<div className="text-center">
-				Action
-			</div>
-		),
+		header: () => <div className="text-center">Action</div>,
 		cell: ({ row }) => (
 			<div className=" flex items-center justify-center">
 				<MyProblemDropdown problem={row.original}>
diff --git a/src/components/Tables/ProblemTables/PublicProblemsTable.tsx b/src/components/Tables/ProblemTables/PublicProblemsTable.tsx
index a5668ef..c05eb35 100644
--- a/src/components/Tables/ProblemTables/PublicProblemsTable.tsx
+++ b/src/components/Tables/ProblemTables/PublicProblemsTable.tsx
@@ -1,132 +1,192 @@
 import { ColumnDef } from "@tanstack/react-table";
-import {
-	FileSpreadsheet,
-	Puzzle
-} from "lucide-react";
+import { FileSpreadsheet, Puzzle } from "lucide-react";
 import { Link, useParams } from "react-router-dom";
 import { ProgrammingLanguageOptions } from "../../../constants/ProgrammingLanguage";
-import {
-	ProblemPopulateAccountAndSubmissionPopulateSubmissionTestcasesSecureModel
-} from "../../../types/models/Problem.model";
-import { readableDateFormat } from "../../../utilities/ReadableDateFormat";
-import { DataTable } from "../Prototype/DataTable";
+import { ProblemPopulateAccountAndSubmissionPopulateSubmissionTestcasesSecureModel } from "../../../types/models/Problem.model";
 import TestcasesGradingIndicator from "../../TestcasesGradingIndicator";
+import { Badge } from "../../shadcn/Badge";
 import { Button } from "../../shadcn/Button";
-import DifficultyBadge from "../../DifficultyBadge";
-
-
+import {
+    HoverCard,
+    HoverCardContent,
+    HoverCardTrigger,
+} from "../../shadcn/HoverCard";
+import { DataTable } from "../Prototype/DataTable";
 
 const PublicProblemsTable = ({
 	problems,
 }: {
 	problems: ProblemPopulateAccountAndSubmissionPopulateSubmissionTestcasesSecureModel[];
 }) => {
-
-	const {courseId} = useParams()
+	const { courseId } = useParams();
 
 	const columns: ColumnDef<ProblemPopulateAccountAndSubmissionPopulateSubmissionTestcasesSecureModel>[] =
-	[
-		{
-			accessorKey: "title",
-			header: "Title",
-			cell: ({ row }) => {
-				console.log(row.original.allowed_languages);
+		[
+			{
+				accessorKey: "title",
+				header: "Title",
+				cell: ({ row }) => {
+					console.log(row.original.allowed_languages);
 
-				return (
-					<div className="font-mono flex items-center">
-						<FileSpreadsheet
-							className="mr-2 text-blue-400"
-							size={20}
-						/>
-						<Link to={`/problems/${row.original.problem_id}`}>
-							{row.original.title}
-						</Link>
-					</div>
-				);
+					return (
+						<div className="font-mono flex items-center">
+							<FileSpreadsheet
+								className="mr-2 text-blue-400"
+								size={20}
+							/>
+							<Link to={`/problems/${row.original.problem_id}`}>
+								{row.original.title}
+							</Link>
+						</div>
+					);
+				},
 			},
-		},
 
-		{
-			accessorKey: "author",
-			header: "Author",
-			cell: ({ row }) => (
-				<div className="font-medium">
-					{row.original.creator.username}
-				</div>
-			),
-		},
-		{
-			accessorKey: "allowed_languages",
-			header: "Allowed Languages",
-			cell: ({ row }) => (
-				<div className="font-medium">
-					{row.original.allowed_languages.split(",").map((lang) => (
-						<span className="mx-0.5">
-							{
-								ProgrammingLanguageOptions.find(
-									(option) => option.value === lang
-								)?.badge
+			{
+				accessorKey: "allowed_languages",
+				header: () => (
+					<div className="text-center">Allowed Languages</div>
+				),
+				cell: ({ row }) => (
+					<div className="font-medium flex justify-center">
+						<div className="font-medium">
+							{row.original.allowed_languages
+								.split(",")
+								.slice(0, 2)
+								.map((lang) => (
+									<span className="mx-0.5">
+										{
+											ProgrammingLanguageOptions.find(
+												(option) =>
+													option.value === lang
+											)?.badge
+										}
+									</span>
+								))}
+
+							{row.original.allowed_languages.split(",")
+								.length === 3 && (
+								<span className="mx-0.5">
+									{
+										ProgrammingLanguageOptions.find(
+											(option) =>
+												option.value ===
+												row.original.allowed_languages.split(
+													","
+												)[2]
+										)?.badge
+									}
+								</span>
+							)}
+
+							{row.original.allowed_languages.split(",").length >
+								3 && (
+								<span className="mx-0.5">
+									<HoverCard>
+										<HoverCardTrigger>
+											<Badge className="bg-neutral-200 text-black cursor-pointer">
+												...{" "}
+												{row.original.allowed_languages.split(
+													","
+												).length - 2}{" "}
+												more
+											</Badge>
+										</HoverCardTrigger>
+										<HoverCardContent>
+											<div className="flex gap-0.5">
+												{row.original.allowed_languages
+													.split(",")
+													.map((lang) => (
+														<div>
+															{
+																ProgrammingLanguageOptions.find(
+																	(option) =>
+																		option.value ===
+																		lang
+																)?.badge
+															}
+														</div>
+													))}
+											</div>
+										</HoverCardContent>
+									</HoverCard>
+								</span>
+							)}
+						</div>
+					</div>
+				),
+			},
+			{
+				accessorKey: "best_submissions",
+				header: "Best Submissions",
+				cell: ({ row }) => (
+					<div className="">
+						<TestcasesGradingIndicator
+							submissionTestcases={
+								row.original.best_submission?.runtime_output
 							}
-						</span>
-					))}
-				</div>
-			),
-		},
-		{
-			accessorKey: "best_submissions",
-			header: "Best Submissions",
-			cell: ({ row }) => (
-				<div className="">
-					<TestcasesGradingIndicator
-						submissionTestcases={
-							row.original.best_submission?.runtime_output
-						}
-						sizeX={1.5}
-						sizeY={3}
-					/>
-				</div>
-			),
-		},
+							sizeX={1.5}
+							sizeY={3}
+						/>
+					</div>
+				),
+			},
 
-		{
-			accessorKey: "difficulty",
-			header: "Difficulty",
-			cell: ({ row }) => (
-				<DifficultyBadge level={row.original.difficulty}/>
-			),
-		},
+            {
+				accessorKey: "author",
+				header: "Author",
+				cell: ({ row }) => (
+					<div className="font-medium">
+						{row.original.creator.username}
+					</div>
+				),
+			},
 
-		{
-			accessorKey: "updated_date",
-			header: "Updated Date",
-			cell: ({ row }) => (
-				<div className="font-mono">
-					{readableDateFormat(row.original.updated_date)}
-				</div>
-			),
-		},
+			// {
+			// 	accessorKey: "difficulty",
+			// 	header: "Difficulty",
+			// 	cell: ({ row }) => (
+			// 		<DifficultyBadge level={row.original.difficulty}/>
+			// 	),
+			// },
 
-		{
-			accessorKey: "action",
-			header: "",
-			cell: ({ row }) => (
-				<div className="flex items-center">
-					<Link to={courseId ? `/courses/${courseId}/problems/${row.original.problem_id}` : `/problems/${row.original.problem_id}`}>
-						<Button
+			// {
+			// 	accessorKey: "updated_date",
+			// 	header: "Updated Date",
+			// 	cell: ({ row }) => (
+			// 		<div className="font-mono">
+			// 			{readableDateFormat(row.original.updated_date)}
+			// 		</div>
+			// 	),
+			// },
 
-						// onClick={() =>
-						// 	navigate(`/problems/${problem.problem_id}`)
-						// }
-						// className="bg-white border-green-500 border-2 text-green-500 hover:bg-green-500 hover:text-white"
+			{
+				accessorKey: "action",
+				header: "",
+				cell: ({ row }) => (
+					<div className="flex items-center">
+						<Link
+							to={
+								courseId
+									? `/courses/${courseId}/problems/${row.original.problem_id}`
+									: `/problems/${row.original.problem_id}`
+							}
 						>
-							<Puzzle className="mr-2" />
-							Solve This Problem
-						</Button>
-					</Link>
-				</div>
-			),
-		},
-	];
+							<Button
+
+							// onClick={() =>
+							// 	navigate(`/problems/${problem.problem_id}`)
+							// }
+							// className="bg-white border-green-500 border-2 text-green-500 hover:bg-green-500 hover:text-white"
+							>
+								<Puzzle className="mr-2" />
+								Solve This Problem
+							</Button>
+						</Link>
+					</div>
+				),
+			},
+		];
 
 	return (
 		<div>
diff --git a/src/views/ExploreProblems.tsx b/src/views/ExploreProblems.tsx
index fdcda80..f0d1bb5 100644
--- a/src/views/ExploreProblems.tsx
+++ b/src/views/ExploreProblems.tsx
@@ -20,12 +20,12 @@ const ExploreProblems = () => {
       console.log('prob',response.data.problems)
 			setProblems(response.data.problems);
 		});
-	}, []);
+	}, [accountId]);
 
 	return (
 		<NavbarMenuLayout>
 			<div className="mx-auto w-[90%] mt-10">
-				<h1 className="text-3xl font-bold">Explore Public Problems</h1>
+				<h1 className="text-3xl font-bold">Explore Problems</h1>
 				<div>
 					<CardContainer className="w-4/4">
 						{/* {problems.map((problem) => (