diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 528f84a6..d7a66422 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -21,6 +21,8 @@
         "axios": "^1.5.1",
         "dotenv": "^16.3.1",
         "firebase": "^10.4.0",
+        "html-entities": "^2.4.0",
+        "htmr": "^1.0.2",
         "https-browserify": "^1.0.0",
         "js-sha256": "^0.10.1",
         "monaco-editor": "^0.44.0",
@@ -10440,6 +10442,18 @@
         "entities": "^2.0.0"
       }
     },
+    "node_modules/htmr": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/htmr/-/htmr-1.0.2.tgz",
+      "integrity": "sha512-7T9babEHZwECQ2/ouxNPow1uGcKbj/BcbslPGPRxBKIOLNiIrFKq6ELzor7mc4HiexZzdb3izQQLl16bhPR9jw==",
+      "dependencies": {
+        "html-entities": "^2.1.0",
+        "htmlparser2": "^6.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=15.6.1"
+      }
+    },
     "node_modules/http-deceiver": {
       "version": "1.2.7",
       "resolved": "https://registry.npmjs.org/http-deceiver/-/http-deceiver-1.2.7.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index de9663ae..11b43bcb 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -16,6 +16,8 @@
     "axios": "^1.5.1",
     "dotenv": "^16.3.1",
     "firebase": "^10.4.0",
+    "html-entities": "^2.4.0",
+    "htmr": "^1.0.2",
     "https-browserify": "^1.0.0",
     "js-sha256": "^0.10.1",
     "monaco-editor": "^0.44.0",
diff --git a/frontend/src/components/CollabProblemSolverLeft.tsx b/frontend/src/components/CollabProblemSolverLeft.tsx
index 49cfc81e..689dda99 100644
--- a/frontend/src/components/CollabProblemSolverLeft.tsx
+++ b/frontend/src/components/CollabProblemSolverLeft.tsx
@@ -1,6 +1,7 @@
 import { useEffect } from "react";
 import { Paper, Typography, Divider, CardMedia } from "@mui/material";
 import { useData } from "../data/data.context";
+import {parseHtmlDescription} from "../utils/utils";
 
 function CollabProblemSolverLeft({
   questionNumber,
@@ -43,10 +44,8 @@ function CollabProblemSolverLeft({
         {question.title}
       </Typography>
       <Divider sx={{ marginBottom: 2, marginTop: 5 }} />
-      <Typography variant="body1" sx={{ marginBottom: 2, fontSize: "18px" }}>
-        {question.description.split("\\n").map((s, key) => {
-          return <p key={key}>{s}</p>;
-        })}
+      <Typography variant="body1" sx={{ marginBottom: 2, fontSize: "18px", overflowX: 'auto' }}>
+        {parseHtmlDescription(question.description)}
       </Typography>
       <Divider sx={{ marginBottom: 10 }} />
       <Typography variant="h6" gutterBottom sx={{ fontSize: "18px" }}>
diff --git a/frontend/src/components/ProblemSolverLeft.tsx b/frontend/src/components/ProblemSolverLeft.tsx
index 6efb5768..fd5859dc 100644
--- a/frontend/src/components/ProblemSolverLeft.tsx
+++ b/frontend/src/components/ProblemSolverLeft.tsx
@@ -8,6 +8,7 @@ import {
   CardMedia,
 } from '@mui/material';
 import { useData } from '../data/data.context';
+import {parseHtmlDescription} from "../utils/utils";
 // import { ClosedCaptionDisabledSharp } from '@mui/icons-material';
 
 const ProblemSolverLeft = () => {
@@ -45,10 +46,8 @@ const ProblemSolverLeft = () => {
         {question.title}
       </Typography>
       <Divider sx={{ marginBottom: 2, marginTop: 5 }} />
-      <Typography variant="body1" sx={{ marginBottom: 2, fontSize: '18px' }}>
-        {question.description.split("\\n").map((s, key) => {
-          return <p key={key}>{s}</p>;
-        })}
+      <Typography variant="body1" sx={{ marginBottom: 2, fontSize: '18px', overflowX: 'auto' }}>
+        {parseHtmlDescription(question.description)}
       </Typography>
       <Divider sx={{ marginBottom: 10 }} />
       <Typography variant="h6" gutterBottom sx={{ fontSize: '18px' }}>
diff --git a/frontend/src/components/Questions/EditQuestionTab.tsx b/frontend/src/components/Questions/EditQuestionTab.tsx
index 26b99c1c..3712e4eb 100644
--- a/frontend/src/components/Questions/EditQuestionTab.tsx
+++ b/frontend/src/components/Questions/EditQuestionTab.tsx
@@ -5,6 +5,7 @@ import Grid from '@mui/material/Grid';
 import Button from '@mui/material/Button';
 import {Box} from "@mui/material";
 import QuestionForm from "./QuestionForm";
+import {parseHtmlDescription} from "../../utils/utils";
 
 interface EditQuestionPreviewProps {
     question: Question;
@@ -47,10 +48,8 @@ const EditQuestionTab: React.FC<EditQuestionPreviewProps> = ({question, onEdit,
                         <Typography variant="h5" gutterBottom component="div">
                             {question.title}
                         </Typography>
-                        <Typography variant="body2" gutterBottom component="div" sx={{ whiteSpace: 'pre-line'}}>
-                            {question.description.split("\\n").map((s, key) => {
-                                return <p key={key}>{s}</p>;
-                            })}
+                        <Typography variant="body2" gutterBottom component="div">
+                            {parseHtmlDescription(question.description)}
                         </Typography>
                         <br />
                         {question.constraints.length > 0 &&
diff --git a/frontend/src/components/Questions/QuestionsTable.tsx b/frontend/src/components/Questions/QuestionsTable.tsx
index 092c7567..87a79d6d 100644
--- a/frontend/src/components/Questions/QuestionsTable.tsx
+++ b/frontend/src/components/Questions/QuestionsTable.tsx
@@ -20,6 +20,7 @@ import {
   Typography,
 } from "@mui/material";
 import { useData } from "../../data/data.context";
+import {parseHtmlDescription} from "../../utils/utils";
 
 interface Question {
   id: string;
@@ -122,7 +123,7 @@ const InterviewQuestionsTable: React.FC = () => {
           </MenuItem>
         ))}
       </Select>
-      <div style={{ maxHeight: "300px", overflowY: "auto", width: "80%" }}>
+      <div style={{ maxHeight: "800px", overflowY: "auto", width: "80%" , display: "flex"}}>
         <TableContainer
           component={Paper}
           style={{ margin: "10px", padding: "10px" }}
@@ -148,6 +149,7 @@ const InterviewQuestionsTable: React.FC = () => {
                         fontSize: "16px",
                         fontWeight: "bold",
                         textTransform: "initial",
+                        textAlign: "left",
                       }}
                     >
                       {question.title}
@@ -201,7 +203,7 @@ const InterviewQuestionsTable: React.FC = () => {
                 <b>Difficulty:</b> {selectedQuestion.difficulty}
               </Typography>
               <Typography variant="body2" style={{ padding: "5px" }}>
-                <b>Description</b>: {selectedQuestion.description}
+                <b>Description</b>: {parseHtmlDescription(selectedQuestion.description)}
               </Typography>
             </DialogContent>
             <DialogActions>
diff --git a/frontend/src/utils/utils.tsx b/frontend/src/utils/utils.tsx
new file mode 100644
index 00000000..961534b5
--- /dev/null
+++ b/frontend/src/utils/utils.tsx
@@ -0,0 +1,10 @@
+import {decode} from "html-entities";
+import htmr from "htmr";
+import {ReactNode} from "react";
+
+export function parseHtmlDescription(description: string): ReactNode {
+  // Decode escaped HTML characters and add text wrap to pre tags in the question description
+  let decodedDescription = decode(description)
+    .replace(/<pre>/g, "<pre style=\"white-space: pre-wrap;\">");
+  return htmr(decodedDescription);
+}
\ No newline at end of file