diff --git a/frontend/src/app/navigation-bar/navigation-bar.component.html b/frontend/src/app/navigation-bar/navigation-bar.component.html
index d5a8a174a2..9261df7948 100644
--- a/frontend/src/app/navigation-bar/navigation-bar.component.html
+++ b/frontend/src/app/navigation-bar/navigation-bar.component.html
@@ -7,7 +7,7 @@
     </ng-template>
     <ng-template pTemplate="end">
         @if (user) {
-            <p-menu #menu [model]="items" [popup]="true"></p-menu>
+            <p-menu #menu [model]="items" [popup]="true" appendTo="body"></p-menu>
             <p-button
                 [label]="user.username"
                 (onClick)="menu.toggle($event)"
diff --git a/frontend/src/app/questions/questions.component.css b/frontend/src/app/questions/questions.component.css
index 265e2872fb..cdb140922b 100644
--- a/frontend/src/app/questions/questions.component.css
+++ b/frontend/src/app/questions/questions.component.css
@@ -40,4 +40,8 @@
 
 .panel-content p {
     margin-bottom: 1rem; /* Add margin to paragraphs for spacing */
+}
+
+tr:hover {
+    background-color: rgba(0, 0, 0, 0.1);
 }
\ No newline at end of file
diff --git a/frontend/src/app/questions/questions.component.html b/frontend/src/app/questions/questions.component.html
index c7a65cae86..6277aa47da 100644
--- a/frontend/src/app/questions/questions.component.html
+++ b/frontend/src/app/questions/questions.component.html
@@ -1,80 +1,99 @@
 <div class="card mx-8">
-    <p-progressSpinner
-        class="flex align-items-center justify-content-center h-screen"
-        *ngIf="loading"
-        styleClass="w-4rem h-4rem"
-        strokeWidth="8"
-        animationDuration=".5s" />
-    <p-toast />
-    <ng-container *ngIf="!loading">
-        <p-toolbar *ngIf="isAdmin" styleClass="mt-4 mb-2 gap-2">
-            <div class="p-justify-end">
-                <p-button
-                    icon="pi pi-plus"
-                    severity="primary"
-                    [outlined]="true"
-                    label="New"
-                    class="mr-2"
-                    (onClick)="openNewQuestion()" />
-                <p-button
-                    icon="pi pi-trash"
-                    severity="danger"
-                    label="Delete"
-                    (onClick)="deleteSelectedQuestions()"
-                    [disabled]="!selectedQuestions || !selectedQuestions.length" />
-            </div>
-        </p-toolbar>
-        <div class="table-container" style="max-width: 1000px; margin: 0 auto">
-            <p-table
-                sortField="id"
-                [sortOrder]="1"
-                [columns]="cols"
-                [value]="questions"
-                [(selection)]="selectedQuestions"
-                datakey="id"
-                [tableStyle]="{ 'table-layout': 'fixed', width: '100%', 'text-align': 'center' }"
-                [paginator]="true"
-                [rows]="10"
-                [rowsPerPageOptions]="[10, 25, 50]"
-                styleClass="p-datatable-gridlines-striped">
-                <ng-template pTemplate="caption">
-                    <div class="flex">
-                        <h3 class="m-0">Questions</h3>
-                    </div>
-                </ng-template>
-                <ng-template pTemplate="header" let-columns>
-                    <tr>
-                        <th *ngIf="isAdmin" style="width: 5%"><p-tableHeaderCheckbox /></th>
-                        <th pSortableColumn="id" style="width: 5%">Id <p-sortIcon field="id" /></th>
-                        <th style="width: 20%">Title</th>
-                        <th style="width: 20%">Topics</th>
-                        <th style="width: 7%">Difficulty</th>
-                        <th *ngIf="isAdmin" style="width: 6%"></th>
-                    </tr>
-                </ng-template>
-                <ng-template pTemplate="body" let-question>
-                    <tr (click)="onRowSelect(question)">
-                        <td *ngIf="isAdmin">
-                            <p-tableCheckbox [value]="question" />
-                        </td>
-                        <td>{{ question.id }}</td>
-                        <td>{{ question.title }}</td>
-                        <td>{{ question.topics.join(', ') }}</td>
-                        <td>{{ question.difficulty }}</td>
-                        <td *ngIf="isAdmin">
+    @if (loading) {
+        <p-progressSpinner
+            class="flex align-items-center justify-content-center h-screen"
+            styleClass="w-4rem h-4rem"
+            strokeWidth="8"
+            animationDuration=".5s" />
+        <p-toast />
+    } @else {
+        <ng-container>
+            <div [ngStyle]="isAdmin ? {'max-width': '1150px', 'margin': '0 auto'} : {'max-width': '900px', 'margin': '0 auto'}">
+                @if (isAdmin) {
+                    <p-toolbar styleClass="mt-4 mb-2 gap-2">
+                        <div class="p-justify-end">
                             <p-button
-                                label="Edit"
+                                icon="pi pi-plus"
                                 severity="primary"
-                                icon="pi pi-file-edit"
+                                [outlined]="true"
+                                label="New"
                                 class="mr-2"
-                                [text]="true"
-                                (onClick)="editQuestion(question)" />
-                        </td>
-                    </tr>
-                </ng-template>
-            </p-table>
-        </div>
-    </ng-container>
+                                (onClick)="openNewQuestion()"/>
+                            <p-button
+                                icon="pi pi-trash"
+                                severity="danger"
+                                label="Delete"
+                                (onClick)="deleteSelectedQuestions()"
+                                [disabled]="!selectedQuestions || !selectedQuestions.length" />
+                        </div>
+                    </p-toolbar>
+                } @else {
+                    <div style="height: 50px;"></div>
+                }
+                <div class="table-container">
+                    <p-table
+                        sortField="id"
+                        [sortOrder]="1"
+                        [columns]="cols"
+                        [value]="questions"
+                        [(selection)]="selectedQuestions"
+                        datakey="id"
+                        [tableStyle]="{ 'table-layout': 'fixed', width: '100%', 'text-align': 'center' }"
+                        [paginator]="true"
+                        [rows]="10"
+                        [rowsPerPageOptions]="[10, 25, 50]"
+                        styleClass="p-datatable-gridlines-striped">
+                        <ng-template pTemplate="caption">
+                            <div class="flex">
+                                <h3 class="m-0">Questions</h3>
+                            </div>
+                        </ng-template>
+                        <ng-template pTemplate="header" let-columns>
+                            <tr>
+                                @if (isAdmin) {
+                                    <th style="width: 10%"><p-tableHeaderCheckbox /></th>
+                                    <th pSortableColumn="id" style="width: 13%">Id<p-sortIcon field="id" /></th>
+                                    <th style="width: 27%">Title</th>
+                                    <th style="width: 30%">Topics</th>
+                                    <th style="width: 10%">Difficulty</th>
+                                    <th style="width: 10%"></th>
+                                } @else {
+                                    <th style="width: 15%">Id</th>
+                                    <th style="width: 35%">Title</th>
+                                    <th style="width: 37%">Topics</th>
+                                    <th style="width: 13%">Difficulty</th>
+                                }
+                            </tr>
+                        </ng-template>
+                        <ng-template pTemplate="body" let-question>
+                            <tr (click)="onRowSelect(question)">
+                                @ if (isAdmin) {
+                                    <td><p-tableCheckbox [value]="question" /></td>
+                                    <td>{{ question.id }}</td>
+                                    <td>{{ question.title }}</td>
+                                    <td>{{ question.topics.join(', ') }}</td>
+                                    <td>{{ question.difficulty }}</td>
+                                    <td><p-button
+                                            label="Edit"
+                                            severity="primary"
+                                            icon="pi pi-file-edit"
+                                            class="mr-2"
+                                            [text]="true"
+                                            (onClick)="editQuestion(question)" />
+                                    </td>
+                                } @else {
+                                    <td>{{ question.id }}</td>
+                                    <td>{{ question.title }}</td>
+                                    <td>{{ question.topics.join(', ') }}</td>
+                                    <td>{{ question.difficulty }}</td>
+                                }
+                            </tr>
+                        </ng-template>
+                    </p-table>
+                </div>
+            </div>
+        </ng-container>
+    }
     <app-question-dialog
         [isDialogVisible]="isDialogVisible"
         [question]="question"
@@ -99,4 +118,4 @@ <h4>{{ clickedOnQuestion?.title }}</h4>
             <p style="white-space: pre-wrap">{{ clickedOnQuestion?.description }}</p>
         </div>
     </div>
-</div>
+</div>
\ No newline at end of file
diff --git a/frontend/src/app/questions/questions.component.ts b/frontend/src/app/questions/questions.component.ts
index 8b411d8a41..7ab25bbe20 100644
--- a/frontend/src/app/questions/questions.component.ts
+++ b/frontend/src/app/questions/questions.component.ts
@@ -81,6 +81,7 @@ export class QuestionsComponent implements OnInit {
     editQuestion(question: Question) {
         this.question = question;
         this.isDialogVisible = true;
+        this.isPanelVisible = false;
     }
 
     deleteSelectedQuestions() {
@@ -135,7 +136,9 @@ export class QuestionsComponent implements OnInit {
 
     onRowSelect(question: Question) {
         this.clickedOnQuestion = question;
-        this.isPanelVisible = true;
+        if (!this.isDialogVisible) {
+            this.isPanelVisible = true;
+        }
     }
 
     closePanel() {