diff --git a/frontend/src/app/history/history.component.html b/frontend/src/app/history/history.component.html
index 9087e6a91a..b445bc2e8d 100644
--- a/frontend/src/app/history/history.component.html
+++ b/frontend/src/app/history/history.component.html
@@ -63,21 +63,21 @@ <h3 class="">Matching History</h3>
             </ng-template>
         </p-table>
     </div>
-    <div class="sliding-panel" [class.open]="isPanelVisible">
-        <div class="panel-header">
+    <p-sidebar
+        [(visible)]="isPanelVisible"
+        position="right"
+        [blockScroll]="true"
+        styleClass="w-10 md:w-4"
+        transitionOptions="200ms cubic-bezier(0, 0, 0.2, 1)"
+        (onHide)="closePanel()">
+        <ng-template pTemplate="header">
             <h3>{{ panelHistory?.question?.title }}</h3>
-            <p-button
-                icon="pi pi-times"
-                severity="secondary"
-                label="Close"
-                (onClick)="closePanel()"
-                class="p-button-text" />
-        </div>
+        </ng-template>
         <div class="panel-content">
             <p style="white-space: pre-wrap">{{ panelHistory?.question?.description }}</p>
             <h4>Submitted Solution</h4>
             <div #editor class="editor-content text-lg"></div>
         </div>
-    </div>
+    </p-sidebar>
     <p-toast position="bottom-right" [breakpoints]="{ '920px': { width: '90%' } }" />
 </div>
diff --git a/frontend/src/app/history/history.component.ts b/frontend/src/app/history/history.component.ts
index 50b36e54f6..ce4c496af7 100644
--- a/frontend/src/app/history/history.component.ts
+++ b/frontend/src/app/history/history.component.ts
@@ -13,11 +13,12 @@ import { EditorState, Extension } from '@codemirror/state';
 import { EditorView, basicSetup } from 'codemirror';
 import { languageMap } from '../collaboration/editor/languages';
 import { ToastModule } from 'primeng/toast';
+import { SidebarModule } from 'primeng/sidebar';
 import { Router } from '@angular/router';
 
 @Component({
     standalone: true,
-    imports: [TableModule, CommonModule, InputTextModule, ButtonModule, IconFieldModule, InputIconModule, ToastModule],
+    imports: [SidebarModule, TableModule, CommonModule, InputTextModule, ButtonModule, IconFieldModule, InputIconModule, ToastModule],
     providers: [MessageService, DatePipe],
     templateUrl: './history.component.html',
     styleUrl: './history.component.css',