From 8150e7b86ee40c9d5f731425da40ad0380e91541 Mon Sep 17 00:00:00 2001
From: Sam <samuelgkeller@gmail.com>
Date: Thu, 19 Mar 2026 17:43:54 -0400
Subject: [PATCH] style: Update modal styles within project page

---
 .../modal-folder/modal-folder.component.html  |  93 +++---
 .../modal-folder/modal-folder.component.scss  |  17 --
 .../modal-upload/modal-upload.component.html  |  45 ++-
 .../project-file-explorer.component.html      |  91 +++---
 .../project-file-explorer.component.scss      |   4 +-
 .../modal-observablehq.component.html         |  86 ++++--
 .../modal-observablehq.component.scss         |  34 ++-
 .../modal-datasets.component.html             |  41 +--
 .../modal-datasets.component.scss             |  16 +-
 .../modal-notebook-folder.component.html      |  81 +++---
 .../modal-rename-notebook.component.html      |  73 +++--
 .../modal-rename-notebook.component.scss      |   8 -
 .../modal-upload-notebook.component.html      | 270 ++++++++++++------
 .../modal-upload-notebook.component.scss      |  74 ++++-
 .../project-notebook-item.component.html      | 106 ++++---
 .../modal-fork/modal-fork.component.html      |  84 ++++--
 .../modal-fork/modal-fork.component.scss      |  23 +-
 .../projects/project/project.component.html   |   2 +-
 .../styles/base/_bootstrap-overrides.scss     |  92 ++++++
 19 files changed, 802 insertions(+), 438 deletions(-)

diff --git a/src/Analysim.Web/ClientApp/src/app/projects/project-file-explorer/modal-folder/modal-folder.component.html b/src/Analysim.Web/ClientApp/src/app/projects/project-file-explorer/modal-folder/modal-folder.component.html
index ccc84b06..ad1ed176 100644
--- a/src/Analysim.Web/ClientApp/src/app/projects/project-file-explorer/modal-folder/modal-folder.component.html
+++ b/src/Analysim.Web/ClientApp/src/app/projects/project-file-explorer/modal-folder/modal-folder.component.html
@@ -1,37 +1,64 @@
 <!-- Modal -->
 <div class="modal-content">
-    <div class="modal-header justify-content-center">
-        <h5 class="modal-title">Create Folder</h5>
-    </div>
+  <div class="modal-header modal-header--center">
+    <h5 class="modal-title">Create Folder</h5>
 
-    <!-- Register Form Start -->
-    <form class="form" [formGroup]="folderForm" (ngSubmit)="onSubmit()">
-        <div class="modal-body">
-            <!-- Form Group Username -->
-            <div class="form-group">
-                <label for="folderName">Folder Name:</label>
-                <input formControlName="folderName" type="text" class="form-control" placeholder="" [class.invalid]="folderName.touched && folderName.invalid" [class.valid]="folderName.valid" [readOnly]="isLoading" required>
-                <div *ngIf="folderName.touched && folderName.errors" class="text-danger">
-                    <span [hidden]="!folderName.errors?.['minlength']">Minimum 1 character</span>
-                    <span [hidden]="!folderName.errors?.['maxlength']">Maximum 20 character</span>
-                    <span [hidden]="!folderName.errors?.['noMatch']">Folder Already Exist</span>
-                    <span [hidden]="!folderName.errors?.['noSpaceSpecial']">No Space or Special Character</span>
-                </div>
-            </div>
-        </div>
-        <div class="modal-footer justify-content-center">
-            <!-- Form Group Register -->
-            <div class="form-group">
-                <button type="submit" class="btn" value="Submit" [disabled]="folderName.invalid">
-                    <div *ngIf="!isLoading">
-                        <span>Create</span>
-                    </div>
-                    <div *ngIf="isLoading" class="spinner-border" role="status">
-                        <span class="sr-only"></span>
-                    </div>
-                </button>
-            </div>
-            <button type="button" class="btn" (click)="closeModal()">Close</button>
+    <button type="button" class="close" (click)="closeModal()" aria-label="Close">
+      <span aria-hidden="true">&times;</span>
+    </button>
+  </div>
+
+  <form [formGroup]="folderForm" (ngSubmit)="onSubmit()">
+    <div class="modal-body">
+      <div class="form-group">
+        <label for="folderName">Folder Name:</label>
+
+        <input
+          id="folderName"
+          formControlName="folderName"
+          type="text"
+          class="form-control"
+          [class.invalid]="folderName.touched && folderName.invalid"
+          [class.valid]="folderName.touched && folderName.valid"
+          [readOnly]="isLoading"
+          required
+        />
+
+        <div *ngIf="folderName.touched && folderName.errors" class="text-danger">
+          <span [hidden]="!folderName.errors?.['minlength']">Minimum 1 character</span>
+          <span [hidden]="!folderName.errors?.['maxlength']">Maximum 20 characters</span>
+          <span [hidden]="!folderName.errors?.['noMatch']">Folder already exists</span>
+          <span [hidden]="!folderName.errors?.['noSpaceSpecial']">No spaces or special characters</span>
         </div>
-    </form> <!-- Register Form End -->
-</div>
+      </div>
+    </div>
+
+    <div class="modal-footer">
+      <!-- Secondary -->
+      <button
+        type="button"
+        class="btn btn-outline-primary"
+        (click)="closeModal()"
+        [disabled]="isLoading"
+      >
+        Close
+      </button>
+
+      <!-- Primary -->
+      <button
+        type="submit"
+        class="btn btn-primary"
+        [disabled]="folderName.invalid || isLoading"
+      >
+        <span *ngIf="!isLoading">Create</span>
+
+        <span
+          *ngIf="isLoading"
+          class="spinner-border spinner-border-sm"
+          role="status"
+          aria-hidden="true"
+        ></span>
+      </button>
+    </div>
+  </form>
+</div>
\ No newline at end of file
diff --git a/src/Analysim.Web/ClientApp/src/app/projects/project-file-explorer/modal-folder/modal-folder.component.scss b/src/Analysim.Web/ClientApp/src/app/projects/project-file-explorer/modal-folder/modal-folder.component.scss
index b9e3f44f..e69de29b 100644
--- a/src/Analysim.Web/ClientApp/src/app/projects/project-file-explorer/modal-folder/modal-folder.component.scss
+++ b/src/Analysim.Web/ClientApp/src/app/projects/project-file-explorer/modal-folder/modal-folder.component.scss
@@ -1,17 +0,0 @@
-/* You can add global styles to this file, and also import other style files */
-.modal-content {
-  background-color: var(--background-color-tertiary);
-}
-
-.btn {
-  color:var(--primary-color);
-  background-color: var(--button-background-color);
-}
-
-.invalid {
-  border-color: #dc3545 !important;
-}
-
-.valid{
-    border-color: #28a745 !important;
-}
diff --git a/src/Analysim.Web/ClientApp/src/app/projects/project-file-explorer/modal-upload/modal-upload.component.html b/src/Analysim.Web/ClientApp/src/app/projects/project-file-explorer/modal-upload/modal-upload.component.html
index a97331b0..f80d17b8 100644
--- a/src/Analysim.Web/ClientApp/src/app/projects/project-file-explorer/modal-upload/modal-upload.component.html
+++ b/src/Analysim.Web/ClientApp/src/app/projects/project-file-explorer/modal-upload/modal-upload.component.html
@@ -1,16 +1,33 @@
 <!-- Modal -->
-<div class="modal-content">
-    <div class="modal-header justify-content-center">
-        <h5 class="modal-title">Upload Progress</h5>
+<div class="modal-content fork-modal">
+  <div class="modal-header modal-header--center">
+    <h5 class="modal-title">Upload Progress</h5>
+
+    <button type="button" class="close" (click)="uploadModalRef.hide()" aria-label="Close">
+      <span aria-hidden="true">&times;</span>
+    </button>
+  </div>
+
+  <div class="modal-body p-0">
+    <table class="table mb-0" *ngIf="uploadFileList.length > 0">
+      <tr *ngFor="let fileItem of uploadFileList">
+        <app-modal-upload-item
+          [uploadFileItem]="fileItem"
+          (uploadedFile)="uploadedFile($event)"
+          (updatedFile)="updateFileUpload($event)"
+          (removedFile)="removeFileUpload($event)"
+        ></app-modal-upload-item>
+      </tr>
+    </table>
+
+    <div class="p-4 text-center" *ngIf="uploadFileList.length === 0">
+      <p class="mb-0">No uploads in progress.</p>
     </div>
-    <div class="modal-body p-0">
-        <table class="table mb-0" *ngIf="uploadFileList.length > 0 ? true : uploadModalRef.hide();">
-            <tr *ngFor="let fileItem of uploadFileList">
-                <app-modal-upload-item [uploadFileItem]="fileItem" (uploadedFile)="uploadedFile($event)" (updatedFile)="updateFileUpload($event)" (removedFile)="removeFileUpload($event)"></app-modal-upload-item>
-            </tr>
-        </table>
-    </div>
-    <div class="modal-footer justify-content-center">
-        <button type="button" class="btn btn-secondary" (click)="uploadModalRef.hide()">Close</button>
-    </div>
-</div>
+  </div>
+
+  <div class="modal-footer">
+    <button type="button" class="btn btn-outline-primary" (click)="uploadModalRef.hide()">
+      Close
+    </button>
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/Analysim.Web/ClientApp/src/app/projects/project-file-explorer/project-file-explorer.component.html b/src/Analysim.Web/ClientApp/src/app/projects/project-file-explorer/project-file-explorer.component.html
index 37c8da48..1a6b9d80 100644
--- a/src/Analysim.Web/ClientApp/src/app/projects/project-file-explorer/project-file-explorer.component.html
+++ b/src/Analysim.Web/ClientApp/src/app/projects/project-file-explorer/project-file-explorer.component.html
@@ -205,54 +205,59 @@
 
   <!--Delete Modal-->
   <div
-    class="modal fade"
-    id="deleteModal"
-    tabindex="-1"
-    role="dialog"
-    aria-labelledby="exampleModalLabel"
-    aria-hidden="true"
-  >
-    <div class="modal-dialog" role="document">
-      <div class="modal-content file-explorer-card__modal">
-        <div class="modal-header">
-          <h5 class="modal-title" id="exampleModalLabel">Delete Window</h5>
-          <button
-            type="button"
-            class="close"
-            #closeDeleteModalbutton
-            data-dismiss="modal"
-            aria-label="Close"
-          >
-            <span aria-hidden="true">&times;</span>
-          </button>
-        </div>
-        <div class="modal-body">
-          Are you sure you want to delete this file ?
-          <div class="note">
-            * It will detach all the notebooks attached to it !!
-          </div>
-        </div>
-        <div class="modal-footer">
-          <button
-            type="button"
-            class="btn btn-outline-primary"
-            data-dismiss="modal"
-          >
-            Close
-          </button>
-          <button
-            type="button"
-            class="btn btn-danger"
-            (click)="delete()"
-            data-dismiss="modal"
-          >
-            Delete
-          </button>
+  class="modal fade"
+  id="deleteModal"
+  tabindex="-1"
+  role="dialog"
+  aria-labelledby="deleteModalLabel"
+  aria-hidden="true"
+>
+  <div class="modal-dialog" role="document">
+    <div class="modal-content file-explorer-card__modal">
+      <div class="modal-header modal-header--center">
+        <h5 class="modal-title" id="deleteModalLabel">Delete</h5>
+
+        <button
+          type="button"
+          class="close"
+          #closeDeleteModalbutton
+          data-dismiss="modal"
+          aria-label="Close"
+        >
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+
+      <div class="modal-body">
+        <p>Are you sure you want to delete this file?</p>
+
+        <div class="file-explorer-card__note">
+          * It will detach all notebooks attached to it.
         </div>
       </div>
+
+      <div class="modal-footer">
+        <button
+          type="button"
+          class="btn btn-outline-primary"
+          data-dismiss="modal"
+        >
+          Close
+        </button>
+
+        <button
+          type="button"
+          class="btn btn-danger"
+          (click)="delete()"
+          data-dismiss="modal"
+        >
+          Delete
+        </button>
+      </div>
     </div>
   </div>
 </div>
+</div>
 
 <ng-template #uploadModal>
   <app-modal-upload
diff --git a/src/Analysim.Web/ClientApp/src/app/projects/project-file-explorer/project-file-explorer.component.scss b/src/Analysim.Web/ClientApp/src/app/projects/project-file-explorer/project-file-explorer.component.scss
index 48b9bf2c..a9909b4b 100644
--- a/src/Analysim.Web/ClientApp/src/app/projects/project-file-explorer/project-file-explorer.component.scss
+++ b/src/Analysim.Web/ClientApp/src/app/projects/project-file-explorer/project-file-explorer.component.scss
@@ -106,9 +106,7 @@
 }
 
 /* Modal surface */
-.file-explorer-card__modal {
-  background: var(--background-color-tertiary);
-}
+
 
 .note {
   font-size: var(--fs-12);
diff --git a/src/Analysim.Web/ClientApp/src/app/projects/project-file-preview/modal-observablehq/modal-observablehq.component.html b/src/Analysim.Web/ClientApp/src/app/projects/project-file-preview/modal-observablehq/modal-observablehq.component.html
index 2fe68011..2dfcf129 100644
--- a/src/Analysim.Web/ClientApp/src/app/projects/project-file-preview/modal-observablehq/modal-observablehq.component.html
+++ b/src/Analysim.Web/ClientApp/src/app/projects/project-file-preview/modal-observablehq/modal-observablehq.component.html
@@ -1,31 +1,59 @@
-<!-- Modal -->
-<div class="modal-content">
-    <div class="modal-header justify-content-center">
-        <h5 class="modal-title">Load Observable Notebook</h5>
-    </div>
+<div class="modal-content load-notebook-modal surface-soft">
+  <div class="modal-header modal-header--center">
+    <h5 class="modal-title">Load Observable Notebook</h5>
+  </div>
 
-    <!-- Register Form Start -->
-    <form class="form" [formGroup]="notebookForm" (ngSubmit)="onSubmit()">
-        <div class="modal-body">
-            <!-- Form Group Username -->
-            <div class="form-group">
-                <label for="notebookLink">Notebook Link:</label>
-                <input formControlName="notebookLink" type="text" class="form-control" placeholder=""[class.invalid]="notebookLink.touched && notebookLink.invalid" [class.valid]="notebookLink.valid" [readOnly]="isLoading" required>
-                <div *ngIf="notebookLink.touched && notebookLink.errors" class="text-danger">
-                    <span [hidden]="!notebookLink.errors?.['fromObservable']">URL must be from domain ObservableHQ</span>
-                    <span [hidden]="!notebookLink.errors?.['isValidURL']">Not a valid URL</span>
-                </div>
-            </div>
-        </div>
-        <div class="modal-footer justify-content-center">
-            <!-- Form Group Register -->
-            <div class="form-group">
-                <button type="submit" class="btn" value="Submit" [disabled]="notebookLink.invalid">
-                    <span>Load Notebook</span>
-                </button>
-            </div>
-            <button type="button" class="btn" (click)="usePreset()">Use Preset</button>
-            <button type="button" class="btn" (click)="closeModal()">Close</button>
+  <form class="form" [formGroup]="notebookForm" (ngSubmit)="onSubmit()">
+    <div class="modal-body">
+      <div class="form-group">
+        <label for="notebookLink">Notebook Link</label>
+
+        <input
+          id="notebookLink"
+          formControlName="notebookLink"
+          type="text"
+          class="form-control"
+          [class.invalid]="notebookLink.touched && notebookLink.invalid"
+          [class.valid]="notebookLink.valid"
+          [readOnly]="isLoading"
+          required
+        />
+
+        <div *ngIf="notebookLink.touched && notebookLink.errors" class="text-danger">
+          <span [hidden]="!notebookLink.errors?.['fromObservable']">
+            URL must be from ObservableHQ
+          </span>
+          <span [hidden]="!notebookLink.errors?.['isValidURL']">
+            Not a valid URL
+          </span>
         </div>
-    </form> <!-- Register Form End -->
-</div>
+      </div>
+    </div>
+
+    <div class="modal-footer">
+      <button
+        type="button"
+        class="btn btn-outline-primary"
+        (click)="closeModal()"
+      >
+        Close
+      </button>
+
+      <button
+        type="button"
+        class="btn btn-primary"
+        (click)="usePreset()"
+      >
+        Use Preset
+      </button>
+
+      <button
+        type="submit"
+        class="btn btn-primary"
+        [disabled]="notebookLink.invalid || isLoading"
+      >
+        <span>Load Notebook</span>
+      </button>
+    </div>
+  </form>
+</div>
\ No newline at end of file
diff --git a/src/Analysim.Web/ClientApp/src/app/projects/project-file-preview/modal-observablehq/modal-observablehq.component.scss b/src/Analysim.Web/ClientApp/src/app/projects/project-file-preview/modal-observablehq/modal-observablehq.component.scss
index a0eae38b..aff0c69c 100644
--- a/src/Analysim.Web/ClientApp/src/app/projects/project-file-preview/modal-observablehq/modal-observablehq.component.scss
+++ b/src/Analysim.Web/ClientApp/src/app/projects/project-file-preview/modal-observablehq/modal-observablehq.component.scss
@@ -1,8 +1,26 @@
-.modal-content {
-  background-color: var(--background-color-tertiary);
-}
-
-.btn {
-  background-color: var(--button-background-color);
-  color: var(--primary-color);
-}
+.load-notebook-modal {
+  .modal-body {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3);
+  }
+
+  .form-group {
+    margin-bottom: 0;
+  }
+
+  .form-group label {
+    display: inline-block;
+    margin-bottom: var(--space-2);
+    font-weight: 600;
+  }
+
+  .text-danger {
+    margin-top: var(--space-1);
+    font-size: var(--fs-14);
+  }
+
+  .text-danger span {
+    display: block;
+  }
+}
\ No newline at end of file
diff --git a/src/Analysim.Web/ClientApp/src/app/projects/project-overview/project-overview-view/project-content/modal-datasets/modal-datasets.component.html b/src/Analysim.Web/ClientApp/src/app/projects/project-overview/project-overview-view/project-content/modal-datasets/modal-datasets.component.html
index bd72434f..bda00e12 100644
--- a/src/Analysim.Web/ClientApp/src/app/projects/project-overview/project-overview-view/project-content/modal-datasets/modal-datasets.component.html
+++ b/src/Analysim.Web/ClientApp/src/app/projects/project-overview/project-overview-view/project-content/modal-datasets/modal-datasets.component.html
@@ -5,22 +5,27 @@ <h5 class="modal-title">Add or remove datasets from the notebook</h5>
     <button type="button" class="btn btn-secondary" (click)="closeModal.emit()">Close</button>
 </div> -->
 
-<div class="modal-dialog" role="document">
-    <div class="modal-content">
-        <div class="modal-header">
-            <h5 class="modal-title">Add or remove datasets</h5>
-            <button type="button" class="close" (click)="closeModal.emit()" aria-label="Close">
-                <span aria-hidden="true">&times;</span>
-            </button>
-        </div>
-        <div class="modal-body">
-            <app-dataset-folder-view [folder]="fileTree" [notebook]="notebook"></app-dataset-folder-view>
-        </div>
-        <div class="note">
-            * you can add more datasets in the datasets section of the project.
-        </div>
-        <div class="modal-footer">
-            <button type="button" class="btn btn-secondary" (click)="closeModal.emit()">Close</button>
-        </div>
-    </div>
+<div class="modal-header">
+  <h5 class="modal-title">Add or remove datasets</h5>
+
+  <button type="button" class="close" (click)="closeModal.emit()" aria-label="Close">
+    <span aria-hidden="true">&times;</span>
+  </button>
+</div>
+
+<div class="modal-body">
+  <app-dataset-folder-view
+    [folder]="fileTree"
+    [notebook]="notebook">
+  </app-dataset-folder-view>
+
+  <div class="dataset-modal__note">
+    * You can add more datasets in the datasets section of the project.
+  </div>
+</div>
+
+<div class="modal-footer">
+  <button type="button" class="btn btn-primary" (click)="closeModal.emit()">
+    Close
+  </button>
 </div>
\ No newline at end of file
diff --git a/src/Analysim.Web/ClientApp/src/app/projects/project-overview/project-overview-view/project-content/modal-datasets/modal-datasets.component.scss b/src/Analysim.Web/ClientApp/src/app/projects/project-overview/project-overview-view/project-content/modal-datasets/modal-datasets.component.scss
index da44af0e..bd7f5875 100644
--- a/src/Analysim.Web/ClientApp/src/app/projects/project-overview/project-overview-view/project-content/modal-datasets/modal-datasets.component.scss
+++ b/src/Analysim.Web/ClientApp/src/app/projects/project-overview/project-overview-view/project-content/modal-datasets/modal-datasets.component.scss
@@ -1,12 +1,6 @@
-.btn {
-    width: 30%;
-    min-width: 80px;
-    margin: 5px auto;
-}
-
-.note {
-    margin: 5px auto;
-    text-align: center;
-    font-size: 12px;
-    color: #6c757d;
+.dataset-modal__note {
+  margin-top: var(--space-3);
+  text-align: center;
+  font-size: var(--fs-12);
+  color: var(--text-muted);
 }
\ No newline at end of file
diff --git a/src/Analysim.Web/ClientApp/src/app/projects/project-overview/project-overview-view/project-content/modal-notebook-folder/modal-notebook-folder.component.html b/src/Analysim.Web/ClientApp/src/app/projects/project-overview/project-overview-view/project-content/modal-notebook-folder/modal-notebook-folder.component.html
index 39dbd3cc..09c5f9f2 100644
--- a/src/Analysim.Web/ClientApp/src/app/projects/project-overview/project-overview-view/project-content/modal-notebook-folder/modal-notebook-folder.component.html
+++ b/src/Analysim.Web/ClientApp/src/app/projects/project-overview/project-overview-view/project-content/modal-notebook-folder/modal-notebook-folder.component.html
@@ -1,37 +1,48 @@
-<!-- Modal -->
-<div class="modal-content">
-    <div class="modal-header justify-content-center">
-        <h5 class="modal-title">Create Folder</h5>
+<div class="modal-header modal-header--center">
+  <h5 class="modal-title">Create Folder</h5>
+
+  <button type="button" class="close" (click)="closeModal.emit()" aria-label="Close">
+    <span aria-hidden="true">&times;</span>
+  </button>
+</div>
+
+<form [formGroup]="folderForm" (ngSubmit)="onSubmit()">
+  <div class="modal-body">
+    <div class="form-group">
+      <label for="folderName">Folder Name:</label>
+
+      <input
+        id="folderName"
+        formControlName="folderName"
+        type="text"
+        class="form-control"
+        [class.invalid]="folderName.touched && folderName.invalid"
+        [class.valid]="folderName.touched && folderName.valid"
+        [readOnly]="isLoading"
+        required
+      />
+
+      <div *ngIf="folderName.touched && folderName.errors" class="text-danger">
+        <span *ngIf="folderName.errors?.['minlength']">Minimum 1 character</span>
+        <span *ngIf="folderName.errors?.['maxlength']">Maximum 20 characters</span>
+        <span *ngIf="folderName.errors?.['noMatch']">Folder already exists</span>
+        <span *ngIf="folderName.errors?.['noSpaceSpecial']">No spaces or special characters</span>
+      </div>
     </div>
+  </div>
+
+  <div class="modal-footer">
+    <!-- Secondary first -->
+    <button type="button" class="btn btn-outline-primary" (click)="closeModal.emit()" [disabled]="isLoading">
+      Close
+    </button>
+
+    <!-- Primary last -->
+    <button type="submit" class="btn btn-primary" [disabled]="folderName.invalid || isLoading">
+      <span *ngIf="!isLoading">Create</span>
 
-    <!-- Register Form Start -->
-    <form class="form" [formGroup]="folderForm" (ngSubmit)="onSubmit()">
-        <div class="modal-body">
-            <!-- Form Group Username -->
-            <div class="form-group">
-                <label for="folderName">Folder Name:</label>
-                <input formControlName="folderName" type="text" class="form-control" placeholder="" [class.invalid]="folderName.touched && folderName.invalid" [class.valid]="folderName.valid" [readOnly]="isLoading" required>
-                <div *ngIf="folderName.touched && folderName.errors" class="text-danger">
-                    <span [hidden]="!folderName.errors?.['minlength']">Minimum 1 character</span>
-                    <span [hidden]="!folderName.errors?.['maxlength']">Maximum 20 characters</span>
-                    <span [hidden]="!folderName.errors?.['noMatch']">Folder Already Exists</span>
-                    <span [hidden]="!folderName.errors?.['noSpaceSpecial']">No Spaces or Special Characters</span>
-                </div>
-            </div>
-        </div>
-        <div class="modal-footer justify-content-center">
-            <!-- Form Group Register -->
-            <div class="form-group">
-                <button type="submit" class="btn btn-success" value="Submit" [disabled]="folderName.invalid">
-                    <div *ngIf="!isLoading">
-                        <span>Create</span>
-                    </div>
-                    <div *ngIf="isLoading" class="spinner-border" role="status">
-                        <span class="sr-only"></span>
-                    </div>
-                </button>
-            </div>
-            <button type="button" class="btn btn-secondary" (click)="closeModal.emit()">Close</button>
-        </div>
-    </form> <!-- Register Form End -->
-</div>
\ No newline at end of file
+      <span *ngIf="isLoading" class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
+      <span *ngIf="isLoading" class="sr-only">Loading...</span>
+    </button>
+  </div>
+</form>
\ No newline at end of file
diff --git a/src/Analysim.Web/ClientApp/src/app/projects/project-overview/project-overview-view/project-content/modal-rename-notebook/modal-rename-notebook.component.html b/src/Analysim.Web/ClientApp/src/app/projects/project-overview/project-overview-view/project-content/modal-rename-notebook/modal-rename-notebook.component.html
index b4fc62a2..b3d390a3 100644
--- a/src/Analysim.Web/ClientApp/src/app/projects/project-overview/project-overview-view/project-content/modal-rename-notebook/modal-rename-notebook.component.html
+++ b/src/Analysim.Web/ClientApp/src/app/projects/project-overview/project-overview-view/project-content/modal-rename-notebook/modal-rename-notebook.component.html
@@ -1,32 +1,45 @@
-<div class="modal-content">
-    <div class="modal-header justify-content-center">
-        <h5 class="modal-title">Rename Notebook</h5>
+<div class="modal-header modal-header--center">
+  <h5 class="modal-title">Rename Notebook</h5>
+
+  <button type="button" class="close" (click)="closeModal.emit()" aria-label="Close">
+    <span aria-hidden="true">&times;</span>
+  </button>
+</div>
+
+<form [formGroup]="renameNotebookForm" (ngSubmit)="renameNotebook()">
+  <div class="modal-body">
+    <div class="form-group">
+      <label for="notebookName">Notebook Name</label>
+
+      <input
+        id="notebookName"
+        formControlName="notebookName"
+        type="text"
+        class="form-control"
+        [class.invalid]="notebookName.touched && notebookName.invalid"
+        [class.valid]="notebookName.touched && notebookName.valid"
+        [readOnly]="isLoading"
+        required
+      />
+
+      <div *ngIf="notebookName.touched && notebookName.errors" class="text-danger">
+        <span *ngIf="notebookName.errors?.['minlength']">Minimum 1 character</span>
+        <span *ngIf="notebookName.errors?.['maxlength']">Maximum 20 characters</span>
+        <span *ngIf="notebookName.errors?.['noMatch']">Notebook name already exists</span>
+        <span *ngIf="notebookName.errors?.['noSpaceSpecial']">No spaces or special characters</span>
+      </div>
     </div>
+  </div>
+
+  <div class="modal-footer">
+    <!-- Secondary -->
+    <button type="button" class="btn btn-outline-primary" (click)="closeModal.emit()" [disabled]="isLoading">
+      Close
+    </button>
 
-    <form class="form" [formGroup]="renameNotebookForm">
-        <div class="modal-body">
-            <!-- Form Group Username -->
-            <div class="form-group">
-                <label for="notebookName">Notebook Name</label>
-                <input formControlName="notebookName" type="text" class="form-control" placeholder="" [class.invalid]="notebookName.touched && notebookName.invalid" [readOnly]="isLoading" required>
-                <div *ngIf="notebookName.touched && notebookName.errors" class="text-danger">
-                    <span [hidden]="!notebookName.errors?.['minlength']">Minimum 1 character</span>
-                    <span [hidden]="!notebookName.errors?.['maxlength']">Maximum 20 character</span>
-                    <span [hidden]="!notebookName.errors?.['noMatch']">Folder Already Exist</span>
-                    <span [hidden]="!notebookName.errors?.['noSpaceSpecial']">No Space or Special Character</span>
-                </div>
-            </div>
-        </div>
-        <div class="modal-footer justify-content-center">
-            <!-- Form Group Register -->
-            <div class="form-group">
-                <button type="submit" class="btn" [disabled]="notebookName.invalid" (click)="renameNotebook()">
-                    <div>
-                        <span>Rename Notebook</span>
-                    </div>
-                </button>
-            </div>
-            <button type="button" class="btn btn-secondary" (click)="closeModal.emit()">Close</button>
-        </div>
-    </form>
-</div>
\ No newline at end of file
+    <!-- Primary -->
+    <button type="submit" class="btn btn-primary" [disabled]="notebookName.invalid || isLoading">
+      Rename Notebook
+    </button>
+  </div>
+</form>
\ No newline at end of file
diff --git a/src/Analysim.Web/ClientApp/src/app/projects/project-overview/project-overview-view/project-content/modal-rename-notebook/modal-rename-notebook.component.scss b/src/Analysim.Web/ClientApp/src/app/projects/project-overview/project-overview-view/project-content/modal-rename-notebook/modal-rename-notebook.component.scss
index 94f74386..e69de29b 100644
--- a/src/Analysim.Web/ClientApp/src/app/projects/project-overview/project-overview-view/project-content/modal-rename-notebook/modal-rename-notebook.component.scss
+++ b/src/Analysim.Web/ClientApp/src/app/projects/project-overview/project-overview-view/project-content/modal-rename-notebook/modal-rename-notebook.component.scss
@@ -1,8 +0,0 @@
-.modal-content {
-    background-color: var(--background-color-tertiary);
-  }
-  
-  .btn {
-    color: var(--primary-color);
-    background-color: var(--button-background-color);
-  }
\ No newline at end of file
diff --git a/src/Analysim.Web/ClientApp/src/app/projects/project-overview/project-overview-view/project-content/modal-upload-notebook/modal-upload-notebook.component.html b/src/Analysim.Web/ClientApp/src/app/projects/project-overview/project-overview-view/project-content/modal-upload-notebook/modal-upload-notebook.component.html
index 0a0f8b88..7da29dfb 100644
--- a/src/Analysim.Web/ClientApp/src/app/projects/project-overview/project-overview-view/project-content/modal-upload-notebook/modal-upload-notebook.component.html
+++ b/src/Analysim.Web/ClientApp/src/app/projects/project-overview/project-overview-view/project-content/modal-upload-notebook/modal-upload-notebook.component.html
@@ -1,97 +1,181 @@
-<div class="modal-content">
-    <div class="modal-header justify-content-center">
-        <h5 class="modal-title">Add Notebook</h5>
-    </div>
+<div class="modal-content add-notebook-modal surface-soft">
+  <div class="modal-header modal-header--center">
+    <h5 class="modal-title">Add Notebook</h5>
+  </div>
+
+  <form class="form" [formGroup]="uploadNotebookForm">
+    <div class="modal-body">
+      <div class="form-group">
+        <label for="notebookName">Notebook Name</label>
+        <input
+          id="notebookName"
+          formControlName="notebookName"
+          type="text"
+          class="form-control"
+          [class.invalid]="notebookName.touched && notebookName.invalid"
+          [readOnly]="isLoading"
+          required
+        />
 
-    <form class="form" [formGroup]="uploadNotebookForm">
-        <div class="modal-body">
-            <!-- Form Group Username -->
-            <div class="form-group">
-                <label for="notebookName">Notebook Name</label>
-                <input formControlName="notebookName" type="text" class="form-control" placeholder=""
-                    [class.invalid]="notebookName.touched && notebookName.invalid" [readOnly]="isLoading" required>
-                <div *ngIf="notebookName.touched && notebookName.errors" class="text-danger">
-                    <span [hidden]="!notebookName.errors?.['minlength']">Minimum 1 character</span>
-                    <span [hidden]="!notebookName.errors?.['maxlength']">Maximum 20 character</span>
-                    <span [hidden]="!notebookName.errors?.['noMatch']">Folder Already Exist</span>
-                    <span [hidden]="!notebookName.errors?.['noSpaceSpecial']">No Space or Special Character</span>
-                </div>
-            </div>
-
-            <div class="form-group">
-                <label>Do you want to add a new notebook or create one from an existing URL?</label>
-                <select #types class="form-control" aria-label="Default select example"
-                    (change)="onChange(types.value)">
-                    <option selected value="file">Create a new one from a file</option>
-                    <option value="url">Add an existing one from URL</option>
-                    <option value="blank">Create a blank notebook</option>
-                </select>
-            </div>
-
-            <div class="form-group" *ngIf="showCreateNotebook">
-                <label>Create Notebook</label>
-                <input type="file" class="form-control p-1" placeholder="" (change)="fileEvent($event)" formControlName="notebookFile" required/>
-                <div *ngIf="uploadNotebookForm.get('notebookFile')?.touched && uploadNotebookForm.get('notebookFile')?.errors"
-                    class="text-danger">
-                    <span *ngIf="uploadNotebookForm.get('notebookFile')?.errors?.['required']">File is required</span>
-                </div>
-            </div>
-
-            <div class="form-group" *ngIf="showAddExistingNotebook">
-                <label for="notebookURL">Notebook Type</label>
-                <select #notebookTypes class="form-control" aria-label="Default select example"
-                    (change)="onChangeNotebookType(notebookTypes.value)">
-                    <option selected value="colab">Google Colab</option>
-                    <option value="observablehq">ObservableHQ</option>
-                </select>
-            </div>
-
-            <div class="form-group" *ngIf="showAddExistingNotebook">
-                <label for="notebookURL">Add Existing Notebook (URL)</label>
-                <input formControlName="notebookURL" type="text" class="form-control" placeholder=""
-                    (change)="urlEvent($event)" [readOnly]="isLoading" />
-                <div *ngIf="uploadNotebookForm.get('notebookURL')?.touched && uploadNotebookForm.get('notebookURL')?.errors"
-                    class="text-danger">
-                    <span *ngIf="uploadNotebookForm.get('notebookURL')?.errors?.['required']">URL is required</span>
-                    <span *ngIf="uploadNotebookForm.get('notebookURL')?.errors?.['pattern']">Enter a valid URL</span>
-                </div>
-            </div>
-
-            <div class="form-group" *ngIf="showAddExistingNotebook && notebookType==='observablehq'">
-                <label for="notebookURL">Add Datasets</label>
-                <div style="display: flex; margin-top: 10px;" *ngFor="let dataset of datasets;let i = index">
-                    <input type="text" class="form-control" placeholder="Dataset Name"
-                        (change)="changeDatasetName(i,$event)" [readOnly]="isLoading" style="margin-right: 10px;" />
-                    <input type="text" class="form-control" placeholder="Dataset URL"
-                        (change)="changeDatasetURL(i,$event)" [readOnly]="isLoading" style="margin-right: 10px;" />
-                    <button type="button" class="btn btn-secondary" (click)="removeDataset(i)">
-                        <i class="fa fa-minus"></i>
-                    </button>
-                </div>
-                <div style="display: flex; align-items: center; width: 100%; justify-content: center;margin-top: 10px;">
-                    <button type="button" class="btn btn-primary" (click)="addDataset()">
-                        <i class="fa fa-plus"></i>
-                    </button>
-                </div>
-            </div>
-
-            <div class="form-group" *ngIf="showBlankNotebook">
-                <label>Create Blank Notebook</label>
-                <p class="text-muted mb-0">
-                    A minimal Jupyter notebook (<code>.ipynb</code>) will be generated.
-                </p>
-            </div>
+        <div *ngIf="notebookName.touched && notebookName.errors" class="text-danger">
+          <span [hidden]="!notebookName.errors?.['minlength']">Minimum 1 character</span>
+          <span [hidden]="!notebookName.errors?.['maxlength']">Maximum 20 character</span>
+          <span [hidden]="!notebookName.errors?.['noMatch']">Folder already exists</span>
+          <span [hidden]="!notebookName.errors?.['noSpaceSpecial']">
+            No spaces or special characters
+          </span>
         </div>
-        <div class="modal-footer justify-content-center">
-            <!-- Form Group Register -->
-            <div class="form-group">
-                <button type="submit" class="btn" [disabled]="uploadNotebookForm.invalid" (click)="addNotebook()">
-                    <div>
-                        <span>Add Notebook</span>
-                    </div>
-                </button>
-            </div>
-            <button type="button" class="btn btn-secondary" (click)="closeModal.emit()">Close</button>
+      </div>
+
+      <div class="form-group">
+        <label for="notebookSourceType">
+          Do you want to add a new notebook or create one from an existing URL?
+        </label>
+        <select
+          id="notebookSourceType"
+          #types
+          class="form-control"
+          (change)="onChange(types.value)"
+        >
+          <option selected value="file">Create a new one from a file</option>
+          <option value="url">Add an existing one from URL</option>
+          <option value="blank">Create a blank notebook</option>
+        </select>
+      </div>
+
+      <div class="form-group" *ngIf="showCreateNotebook">
+        <label for="notebookFile">Create Notebook</label>
+        <input
+          id="notebookFile"
+          type="file"
+          class="form-control p-1"
+          (change)="fileEvent($event)"
+          formControlName="notebookFile"
+          required
+        />
+
+        <div
+          *ngIf="uploadNotebookForm.get('notebookFile')?.touched && uploadNotebookForm.get('notebookFile')?.errors"
+          class="text-danger"
+        >
+          <span *ngIf="uploadNotebookForm.get('notebookFile')?.errors?.['required']">
+            File is required
+          </span>
         </div>
-    </form>
+      </div>
+
+      <div class="form-group" *ngIf="showAddExistingNotebook">
+        <label for="notebookType">Notebook Type</label>
+        <select
+          id="notebookType"
+          #notebookTypes
+          class="form-control"
+          (change)="onChangeNotebookType(notebookTypes.value)"
+        >
+          <option selected value="colab">Google Colab</option>
+          <option value="observablehq">ObservableHQ</option>
+        </select>
+      </div>
+
+      <div class="form-group" *ngIf="showAddExistingNotebook">
+        <label for="notebookURL">Add Existing Notebook (URL)</label>
+        <input
+          id="notebookURL"
+          formControlName="notebookURL"
+          type="text"
+          class="form-control"
+          (change)="urlEvent($event)"
+          [readOnly]="isLoading"
+        />
+
+        <div
+          *ngIf="uploadNotebookForm.get('notebookURL')?.touched && uploadNotebookForm.get('notebookURL')?.errors"
+          class="text-danger"
+        >
+          <span *ngIf="uploadNotebookForm.get('notebookURL')?.errors?.['required']">
+            URL is required
+          </span>
+          <span *ngIf="uploadNotebookForm.get('notebookURL')?.errors?.['pattern']">
+            Enter a valid URL
+          </span>
+        </div>
+      </div>
+
+      <div
+        class="form-group"
+        *ngIf="showAddExistingNotebook && notebookType === 'observablehq'"
+      >
+        <label>Add Datasets</label>
+
+        <div
+          class="dataset-row"
+          *ngFor="let dataset of datasets; let i = index"
+        >
+          <input
+            type="text"
+            class="form-control"
+            placeholder="Dataset Name"
+            (change)="changeDatasetName(i, $event)"
+            [readOnly]="isLoading"
+          />
+
+          <input
+            type="text"
+            class="form-control"
+            placeholder="Dataset URL"
+            (change)="changeDatasetURL(i, $event)"
+            [readOnly]="isLoading"
+          />
+
+          <button
+            type="button"
+            class="btn btn-danger dataset-action-btn"
+            (click)="removeDataset(i)"
+            [disabled]="isLoading"
+            aria-label="Remove dataset"
+          >
+            <i class="fa fa-minus"></i>
+          </button>
+        </div>
+
+        <div class="dataset-add-row">
+          <button
+            type="button"
+            class="btn btn-outline-primary"
+            (click)="addDataset()"
+            [disabled]="isLoading"
+          >
+            <i class="fa fa-plus"></i>
+            <span>Add Dataset</span>
+          </button>
+        </div>
+      </div>
+
+      <div class="form-group" *ngIf="showBlankNotebook">
+        <label>Create Blank Notebook</label>
+        <p class="mb-0">
+          A minimal Jupyter notebook (<code>.ipynb</code>) will be generated.
+        </p>
+      </div>
+    </div>
+
+    <div class="modal-footer">
+      <button
+        type="button"
+        class="btn btn-outline-primary"
+        (click)="closeModal.emit()"
+      >
+        Close
+      </button>
+
+      <button
+        type="submit"
+        class="btn btn-primary"
+        [disabled]="uploadNotebookForm.invalid || isLoading"
+        (click)="addNotebook()"
+      >
+        <span>Add Notebook</span>
+      </button>
+    </div>
+  </form>
 </div>
\ No newline at end of file
diff --git a/src/Analysim.Web/ClientApp/src/app/projects/project-overview/project-overview-view/project-content/modal-upload-notebook/modal-upload-notebook.component.scss b/src/Analysim.Web/ClientApp/src/app/projects/project-overview/project-overview-view/project-content/modal-upload-notebook/modal-upload-notebook.component.scss
index 2800e7c1..0df1dade 100644
--- a/src/Analysim.Web/ClientApp/src/app/projects/project-overview/project-overview-view/project-content/modal-upload-notebook/modal-upload-notebook.component.scss
+++ b/src/Analysim.Web/ClientApp/src/app/projects/project-overview/project-overview-view/project-content/modal-upload-notebook/modal-upload-notebook.component.scss
@@ -1,8 +1,66 @@
-.modal-content {
-  background-color: var(--background-color-tertiary);
-}
-
-.btn {
-  color: var(--primary-color);
-  background-color: var(--button-background-color);
-}
+.add-notebook-modal {
+  .modal-body {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3);
+  }
+
+  .form-group {
+    margin-bottom: 0;
+  }
+
+  .form-group label {
+    display: inline-block;
+    margin-bottom: var(--space-2);
+    font-weight: 600;
+  }
+
+  .text-danger {
+    margin-top: var(--space-1);
+    font-size: var(--fs-14);
+  }
+
+  .text-danger span {
+    display: block;
+  }
+
+  .dataset-row {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    margin-top: var(--space-2);
+  }
+
+  .dataset-row .form-control {
+    flex: 1 1 0;
+  }
+
+  .dataset-action-btn {
+    flex: 0 0 auto;
+    min-width: 40px;
+    padding-inline: var(--space-3) !important;
+  }
+
+  .dataset-add-row {
+    display: flex;
+    justify-content: center;
+    margin-top: var(--space-3);
+  }
+
+  .dataset-add-row .btn {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-1);
+  }
+
+  @media (max-width: var(--bp-md)) {
+    .dataset-row {
+      flex-direction: column;
+      align-items: stretch;
+    }
+
+    .dataset-action-btn {
+      width: 100%;
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/Analysim.Web/ClientApp/src/app/projects/project-overview/project-overview-view/project-content/project-notebook-item/project-notebook-item.component.html b/src/Analysim.Web/ClientApp/src/app/projects/project-overview/project-overview-view/project-content/project-notebook-item/project-notebook-item.component.html
index 58a15782..9380a313 100644
--- a/src/Analysim.Web/ClientApp/src/app/projects/project-overview/project-overview-view/project-content/project-notebook-item/project-notebook-item.component.html
+++ b/src/Analysim.Web/ClientApp/src/app/projects/project-overview/project-overview-view/project-content/project-notebook-item/project-notebook-item.component.html
@@ -147,10 +147,11 @@
 >
   <div class="modal-dialog" role="document">
     <div class="modal-content">
-      <div class="modal-header">
+      <div class="modal-header modal-header--center">
         <h5 class="modal-title" id="exampleModalLongTitle">
-          NoteBook Comments
+          Notebook Comments
         </h5>
+
         <button
           type="button"
           class="close"
@@ -160,33 +161,40 @@ <h5 class="modal-title" id="exampleModalLongTitle">
           <span aria-hidden="true">&times;</span>
         </button>
       </div>
+
       <div class="modal-body">
+        <!-- Add Comment -->
         <form>
-          <div class="row form-group">
-            <span class="col-9"
-              ><input
+          <div class="form-row align-items-center">
+            <div class="col">
+              <input
                 type="text"
                 class="form-control"
-                placeholder="Add your Comment"
-            /></span>
-            <span class="col-2"><input type="submit" class="btn" /></span>
-            <span class="col-1"></span>
+                placeholder="Add your comment"
+              />
+            </div>
+
+            <div class="col-auto">
+              <input type="submit" class="btn btn-primary" value="Post" />
+            </div>
           </div>
         </form>
-        <div class="d-flex card-header flex-row align-items-center">
-          <span class="mr-2">Comments</span>
-          <div class="d-inline-flex ml-auto">
-            <!-- Private Button Group Start -->
-          </div>
+
+        <!-- Section Header -->
+        <div class="d-flex card-header flex-row align-items-center mt-3">
+          <span>Comments</span>
         </div>
+
+        <!-- Temp Comments -->
         <ul class="list-group">
           <li class="list-group-item">
-            <div class="d-flex flex-row">
-              Tammie Smith - 02/23/2023
+            <div class="d-flex flex-row align-items-center">
+              <span>Tammie Smith - 02/23/2023</span>
+
               <div class="d-inline-flex ml-auto">
                 <button
                   type="button"
-                  class="btn ml-3"
+                  class="btn btn-danger"
                   title="Delete"
                   data-toggle="modal"
                   data-target="#exampleModal"
@@ -196,13 +204,15 @@ <h5 class="modal-title" id="exampleModalLongTitle">
               </div>
             </div>
           </li>
+
           <li class="list-group-item">
-            <div class="d-flex flex-row">
-              Oneal Smith - 02/23/2023
+            <div class="d-flex flex-row align-items-center">
+              <span>Oneal Smith - 02/23/2023</span>
+
               <div class="d-inline-flex ml-auto">
                 <button
                   type="button"
-                  class="btn ml-3"
+                  class="btn btn-danger"
                   title="Delete"
                   data-toggle="modal"
                   data-target="#exampleModal"
@@ -214,8 +224,11 @@ <h5 class="modal-title" id="exampleModalLongTitle">
           </li>
         </ul>
       </div>
+
       <div class="modal-footer">
-        <button type="button" class="btn" data-dismiss="modal">Close</button>
+        <button type="button" class="btn btn-outline-primary" data-dismiss="modal">
+          Close
+        </button>
       </div>
     </div>
   </div>
@@ -227,13 +240,16 @@ <h5 class="modal-title" id="exampleModalLongTitle">
   [id]="'deleteModal' + notebook.notebookID"
   tabindex="-1"
   role="dialog"
-  aria-labelledby="exampleModalLabel"
+  aria-labelledby="'deleteModalLabel' + notebook.notebookID"
   aria-hidden="true"
 >
   <div class="modal-dialog" role="document">
     <div class="modal-content">
-      <div class="modal-header">
-        <h5 class="modal-title" id="exampleModalLabel">Delete Window</h5>
+      <div class="modal-header modal-header--center">
+        <h5 class="modal-title" [id]="'deleteModalLabel' + notebook.notebookID">
+          Delete
+        </h5>
+
         <button
           type="button"
           class="close"
@@ -243,27 +259,37 @@ <h5 class="modal-title" id="exampleModalLabel">Delete Window</h5>
           <span aria-hidden="true">&times;</span>
         </button>
       </div>
+
       <div class="modal-body">
-        <div>Are you sure you want to delete this item ?</div>
-        <div>
-          <span *ngIf="notebook.type == 'new'"
-            >{{ notebook.name }}{{ notebook.extension }} version v{{
-              selectedVersion
-            }}
-          </span>
-          <span *ngIf="notebook.type == 'observable'"
-            >{{ notebook.name }}{{ notebook.extension }}</span
-          >
-          <span *ngIf="notebook.type == 'folder'"
-            >{{ notebook.name }} folder</span
-          >
-        </div>
+        <p>Are you sure you want to delete this item?</p>
+
+        <p>
+          <strong>
+            <span *ngIf="notebook.type == 'new'">
+              {{ notebook.name }}{{ notebook.extension }} version v{{ selectedVersion }}
+            </span>
+
+            <span *ngIf="notebook.type == 'observable'">
+              {{ notebook.name }}{{ notebook.extension }}
+            </span>
+
+            <span *ngIf="notebook.type == 'folder'">
+              {{ notebook.name }} folder
+            </span>
+          </strong>
+        </p>
       </div>
+
       <div class="modal-footer">
-        <button type="button" class="btn" data-dismiss="modal">Close</button>
+        <!-- Secondary -->
+        <button type="button" class="btn btn-outline-primary" data-dismiss="modal">
+          Close
+        </button>
+
+        <!-- Destructive -->
         <button
           type="button"
-          class="btn"
+          class="btn btn-danger"
           (click)="deleteNotebook()"
           data-dismiss="modal"
         >
diff --git a/src/Analysim.Web/ClientApp/src/app/projects/project/modal-fork/modal-fork.component.html b/src/Analysim.Web/ClientApp/src/app/projects/project/modal-fork/modal-fork.component.html
index d21832b0..85f10ed4 100644
--- a/src/Analysim.Web/ClientApp/src/app/projects/project/modal-fork/modal-fork.component.html
+++ b/src/Analysim.Web/ClientApp/src/app/projects/project/modal-fork/modal-fork.component.html
@@ -1,31 +1,61 @@
-<!-- Modal -->
-<div class="modal-content fork-modal">
-    <div class="modal-header justify-content-center">
-        <h5 class="modal-title">Fork {{project.name}}</h5>
-        <button type="button" class="close" (click)="closeModal()" aria-label="Close">
-            <span aria-hidden="true">&times;</span>
-        </button>
-    </div>
-    <!-- Body -->
-    <div class="modal-body" *ngIf="currentUser!=null && !isExisted">
-        <p>This project will be forked into your dashboard as 
-            <strong>{{currentUser.userName}}/{{project.name}}.</strong>
-        </p>
-    </div>
+<div class="modal-header">
+  <h5 class="modal-title">Add or remove datasets</h5>
 
-    <div class="modal-body" *ngIf="isExisted && newProject == null">
-        <p>You've already forked {{project.name}}.</p>
-    </div>
+  <button type="button" class="close" (click)="closeModal()" aria-label="Close">
+    <span aria-hidden="true">&times;</span>
+  </button>
+</div>
+
+<div
+  class="modal-body"
+  *ngIf="currentUser != null && !isExisted && newProject == null"
+>
+  <p>
+    This project will be forked into your dashboard as
+    <strong>{{ currentUser.userName }}/{{ project.name }}.</strong>
+  </p>
+</div>
+
+<div class="modal-body" *ngIf="isExisted && newProject == null">
+  <p>You've already forked {{ project.name }}.</p>
+</div>
+
+<div class="modal-body" *ngIf="newProject != null">
+  <p>Project successfully forked</p>
+  <strong>
+    <a role="button" class="link-basic" (click)="onNavigateToNewProject()">
+      {{ newProject.route }}
+    </a>
+  </strong>
+</div>
+
+<div class="modal-footer">
+  <!-- Secondary -->
+  <button
+    type="button"
+    class="btn btn-outline-primary"
+    *ngIf="newProject == null && !isExisted"
+    (click)="closeModal()"
+  >
+    Cancel
+  </button>
 
-    <div class="modal-body fork-modal__body fork-modal__body--success" *ngIf="newProject != null">
-        <p>Project successfully foked</p>
-        <strong><a role="button" class="link-basic" (click)="onNavigateToNewProject()">{{ newProject.route }}</a></strong>
-    </div>
+  <!-- Primary -->
+  <button
+    type="button"
+    class="btn btn-primary"
+    *ngIf="!isExisted && newProject == null"
+    (click)="forkProjectClick()"
+  >
+    Fork Project
+  </button>
 
-    <!-- Footer -->
-    <div class="modal-footer">
-        <button type="button" class="btn btn-primary" *ngIf="!isExisted" (click)="forkProjectClick()">Fork Project</button>
-        <button type="button" class="btn btn-outline-primary" *ngIf="newProject == null && !isExisted" (click)="closeModal()">Cancel</button>
-        <button type="button" class="btn btn-primary" *ngIf="newProject != null || isExisted" (click)="closeModal()">Close</button>
-    </div>
+  <button
+    type="button"
+    class="btn btn-primary"
+    *ngIf="newProject != null || isExisted"
+    (click)="closeModal()"
+  >
+    Close
+  </button>
 </div>
diff --git a/src/Analysim.Web/ClientApp/src/app/projects/project/modal-fork/modal-fork.component.scss b/src/Analysim.Web/ClientApp/src/app/projects/project/modal-fork/modal-fork.component.scss
index cccf9b3b..b481ccda 100644
--- a/src/Analysim.Web/ClientApp/src/app/projects/project/modal-fork/modal-fork.component.scss
+++ b/src/Analysim.Web/ClientApp/src/app/projects/project/modal-fork/modal-fork.component.scss
@@ -1,27 +1,10 @@
 .fork-modal {
-
   .modal-body {
-    padding: var(--space-4);
     text-align: center;
   }
 
-  .modal-body p {
-    margin: 0 !important;
-    font-size: var(--fs-18) !important;
-    line-height: 1.4;
-  }
-
-  .modal-body {
-    display: block;
-    margin-top: var(--space-3);
-    font-size: var(--fs-18);
-  }
-
-  .modal-footer {
-    gap: var(--space-2);
-  }
-
-  .a{
-    padding-bottom: 1em;
+  .modal-body strong {
+    display: inline-block;
+    margin-top: var(--space-2);
   }
 }
\ No newline at end of file
diff --git a/src/Analysim.Web/ClientApp/src/app/projects/project/project.component.html b/src/Analysim.Web/ClientApp/src/app/projects/project/project.component.html
index eab2f86f..703380cf 100644
--- a/src/Analysim.Web/ClientApp/src/app/projects/project/project.component.html
+++ b/src/Analysim.Web/ClientApp/src/app/projects/project/project.component.html
@@ -140,7 +140,7 @@ <h3 class="project-title" *ngIf="(project.route | route:'projectname') as projec
 
             <div class="readme-actions">
               <button type="button" class="btn btn-primary" (click)="toggleNotebook()">
-                {{isFull ? 'Read Less..' : 'Read More..'}}
+                {{isFull ? 'Read Less' : 'Read More'}}
               </button>
 
               <button type="button" class="btn btn-outline-primary" (click)="NavigateToNotebook()">
diff --git a/src/Analysim.Web/ClientApp/src/assets/styles/base/_bootstrap-overrides.scss b/src/Analysim.Web/ClientApp/src/assets/styles/base/_bootstrap-overrides.scss
index 9763e8fb..39bb02c1 100644
--- a/src/Analysim.Web/ClientApp/src/assets/styles/base/_bootstrap-overrides.scss
+++ b/src/Analysim.Web/ClientApp/src/assets/styles/base/_bootstrap-overrides.scss
@@ -82,3 +82,95 @@
     var(--color-danger) !important;
   color: var(--c-text-inverse) !important;
 }
+
+
+/* Modal tokens */
+:root {
+  --modal-radius: 12px;
+  --modal-border: var(--border-w-1) var(--border-style) var(--border-color);
+  --modal-header-padding-y: var(--space-3);
+  --modal-header-padding-x: var(--space-4);
+  --modal-body-padding: var(--space-4);
+  --modal-footer-padding-y: var(--space-2);
+  --modal-footer-padding-x: var(--space-2);
+  --modal-gap: var(--space-2);
+
+  /* Subtle shadow */
+  --modal-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
+}
+
+.modal-backdrop.show {
+  opacity: 0.6;
+}
+
+/* Container */
+.modal-content {
+  border-radius: var(--modal-radius);
+  border: var(--modal-border);
+  box-shadow: var(--modal-shadow);
+  overflow: hidden;
+  background: var(--surface-0);
+  color: var(--text-on-light);
+}
+
+/* Header */
+.modal-header {
+  padding: var(--modal-header-padding-y) var(--modal-header-padding-x);
+  border-bottom: var(--modal-border);
+  align-items: center;
+}
+
+.modal-title {
+  margin: 0;
+  font-size: var(--fs-20);
+  font-weight: 600;
+  line-height: 1.2;
+}
+
+/* Body */
+.modal-body {
+  padding: var(--modal-body-padding);
+}
+
+.modal-body p {
+  margin: 0;
+  font-size: var(--fs-18);
+  line-height: 1.45;
+}
+
+/* Footer */
+.modal-footer {
+  padding: var(--modal-footer-padding-y) var(--modal-footer-padding-x);
+  border-top: var(--modal-border);
+
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--modal-gap);
+}
+
+.modal-footer .btn {
+  min-height: 40px;
+  padding: var(--space-2) var(--space-4) !important;
+}
+
+@media (max-width: var(--bp-md)) {
+  .modal-footer {
+    flex-direction: column-reverse;
+    align-items: stretch;
+  }
+
+  .modal-footer .btn {
+    width: 100%;
+  }
+}
+
+.modal-header--center {
+  position: relative;
+  justify-content: center;
+  text-align: center;
+}
+
+.modal-header--center .modal-title {
+  width: 100%;
+}
\ No newline at end of file