diff --git a/src/Analysim.Web/ClientApp/src/app/projects/project-file-explorer/csvdata-browser/csvdata-browser.component.html b/src/Analysim.Web/ClientApp/src/app/projects/project-file-explorer/csvdata-browser/csvdata-browser.component.html
index 3340961..b0fa151 100644
--- a/src/Analysim.Web/ClientApp/src/app/projects/project-file-explorer/csvdata-browser/csvdata-browser.component.html
+++ b/src/Analysim.Web/ClientApp/src/app/projects/project-file-explorer/csvdata-browser/csvdata-browser.component.html
@@ -1,81 +1,114 @@
-<div class="card">
-    <p-table #table
-             [value]="loadedData"
-             [(selection)]="selectedData"
-             [tableStyle]="{'min-width': '100%'}"
-             [resizableColumns]="true"
-             styleClass="p-datatable-gridlines"
-             [scrollable]="true"
-             scrollHeight="100%"
-             [rows]="50"
-             [paginator]="true"
-             [loading]="loading"
-             [rowsPerPageOptions]="[10, 25, 50]"
-             [showCurrentPageReport]="true"
-             currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
-             [filterDelay]="0"
-             [globalFilterFields]="selectedColumns"
-             [columns]="selectedColumns"
-             [reorderableColumns]="true"
-             (onSort)="resetSelectedData($event)"
-             (onFilter)="resetSelectedData($event)"
-             >
-        <ng-template pTemplate="caption">
-            <div class="table-header" style="margin-bottom: 10px;">
-                <button pButton label="Clear" class="p-button-outlined" icon="pi pi-filter-slash" (click)="clear(table)"></button>
-                <span class="p-input-icon-left" style="float:right">
-                    <i class="pi pi-search"></i>
-                    <input #searchFilter pInputText type="text" placeholder="Global Search" (input)="applyFilterGlobal($event, 'contains')" />
-                </span>
-            </div>
-            <div>
-            <p-multiSelect [options]="cols" [(ngModel)]="selectedColumns"
-                           selectedItemsLabel="{0} columns selected" [style]="{'min-width': '200px'}" placeholder="Choose Columns">
-                <ng-template let-item pTemplate="selectedItem">
-                    {{item}}
-                </ng-template>
-                <ng-template let-item pTemplate="item">
-                    {{item}}
-                </ng-template>
-            </p-multiSelect>
-            <p-button label="Visualize Data" style="float: right;" (onClick)="toggleModalVisualizeData()"></p-button>
-            </div>
-        </ng-template>
-        <ng-template pTemplate="header" let-columns>
-            <tr>
-                <th style="width: 4rem" pResizableColumn>
-                    <p-checkbox
-                    [(ngModel)]="checked"
-                    [binary]="true"
-                    (onChange)="onCheckboxClick($event)">
-                  </p-checkbox>
-                </th>
-                <th *ngFor="let column of columns" [pSortableColumn]="column" pResizableColumn pReorderableColumn>
-                    <div class="flex justify-content-between align-items-center">
-                        {{column}}
-                        <p-sortIcon field={{column}}></p-sortIcon>
-                        <p-columnFilter [type]="columnDataTypes[column]" [field]="column" display="menu" class="ml-auto"></p-columnFilter>
-                    </div>
-                </th>
-            </tr>
-        </ng-template>
-        <ng-template pTemplate="body" let-item let-columns="columns">
-            <tr>
-                <td>
-                    <p-tableCheckbox [value]="item"></p-tableCheckbox>
-                </td>
-                <td *ngFor="let col of columns">{{ item[col] }}</td>
-            </tr>
-        </ng-template>
-    </p-table>
-    <div style="display: flex;width: 100%; align-items: center;justify-content: center;margin: 10px;">
-        <p-button  label="Export Data"  (onClick)="seeSelectedData()"></p-button>
-        </div>
+<div class="card data-table-card">
+  <p-table #table
+           [value]="loadedData"
+           [(selection)]="selectedData"
+           [tableStyle]="{'min-width': '100%'}"
+           [resizableColumns]="true"
+           styleClass="p-datatable-gridlines"
+           [scrollable]="true"
+           scrollHeight="100%"
+           [rows]="50"
+           [paginator]="true"
+           [loading]="loading"
+           [rowsPerPageOptions]="[10, 25, 50]"
+           [showCurrentPageReport]="true"
+           currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
+           [filterDelay]="0"
+           [globalFilterFields]="selectedColumns"
+           [columns]="selectedColumns"
+           [reorderableColumns]="true"
+           (onSort)="resetSelectedData($event)"
+           (onFilter)="resetSelectedData($event)">
+
+    <ng-template pTemplate="caption">
+      <div class="table-header">
+        <!-- Clear -->
+        <button type="button"
+                class="btn btn-outline-primary"
+                (click)="clear(table)">
+          <i class="pi pi-filter-slash" aria-hidden="true"></i>
+          <span>Clear</span>
+        </button>
+
+        <!-- Search -->
+        <span class="p-input-icon-left table-search">
+          <i class="pi pi-search"></i>
+          <input #searchFilter
+                 pInputText
+                 type="text"
+                 placeholder="Global Search"
+                 (input)="applyFilterGlobal($event, 'contains')" />
+        </span>
+      </div>
+
+      <div class="table-tools">
+        <p-multiSelect [options]="cols"
+                       [(ngModel)]="selectedColumns"
+                       selectedItemsLabel="{0} columns selected"
+                       [style]="{'min-width': '200px'}"
+                       placeholder="Choose Columns">
+          <ng-template let-item pTemplate="selectedItem">{{item}}</ng-template>
+          <ng-template let-item pTemplate="item">{{item}}</ng-template>
+        </p-multiSelect>
+
+        <button type="button"
+                class="btn btn-primary"
+                (click)="toggleModalVisualizeData()">
+          Visualize Data
+        </button>
+      </div>
+    </ng-template>
+
+    <ng-template pTemplate="header" let-columns>
+      <tr>
+        <th style="width: 4rem" pResizableColumn>
+          <p-checkbox [(ngModel)]="checked"
+                      [binary]="true"
+                      (onChange)="onCheckboxClick($event)">
+          </p-checkbox>
+        </th>
+
+        <th *ngFor="let column of columns"
+            [pSortableColumn]="column"
+            pResizableColumn
+            pReorderableColumn>
+          <div class="flex justify-content-between align-items-center">
+            {{column}}
+            <p-sortIcon field="{{column}}"></p-sortIcon>
+            <p-columnFilter [type]="columnDataTypes[column]"
+                            [field]="column"
+                            display="menu"
+                            class="ml-auto">
+            </p-columnFilter>
+          </div>
+        </th>
+      </tr>
+    </ng-template>
+
+    <ng-template pTemplate="body" let-item let-columns="columns">
+      <tr>
+        <td>
+          <p-tableCheckbox [value]="item"></p-tableCheckbox>
+        </td>
+        <td *ngFor="let col of columns">{{ item[col] }}</td>
+      </tr>
+    </ng-template>
+
+  </p-table>
+
+  <div class="export-row">
+    <button type="button"
+            class="btn btn-primary"
+            (click)="seeSelectedData()">
+      Export Data
+    </button>
+  </div>
 </div>
 
 <ng-template #visualizeDataModal>
-    <app-visualize-data [cols]="selectedColumns" 
-    (closeModalEvent)="closeModalVisualizeData()" 
-    [data]="(!selectedData || selectedData.length===0)  ? tableData : selectedData"
-    [columnDataTypes]="columnDataTypes"></app-visualize-data>
-</ng-template>
+  <app-visualize-data [cols]="selectedColumns"
+                      (closeModalEvent)="closeModalVisualizeData()"
+                      [data]="(!selectedData || selectedData.length===0) ? tableData : selectedData"
+                      [columnDataTypes]="columnDataTypes">
+  </app-visualize-data>
+</ng-template>
\ No newline at end of file
diff --git a/src/Analysim.Web/ClientApp/src/app/projects/project-file-explorer/csvdata-browser/csvdata-browser.component.scss b/src/Analysim.Web/ClientApp/src/app/projects/project-file-explorer/csvdata-browser/csvdata-browser.component.scss
index e69de29..7976b6e 100644
--- a/src/Analysim.Web/ClientApp/src/app/projects/project-file-explorer/csvdata-browser/csvdata-browser.component.scss
+++ b/src/Analysim.Web/ClientApp/src/app/projects/project-file-explorer/csvdata-browser/csvdata-browser.component.scss
@@ -0,0 +1,65 @@
+:host {
+  display: block;
+  height: 100%;
+}
+
+.data-table-card {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Caption rows */
+.table-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-2);
+  margin-bottom: var(--space-3);
+}
+
+.table-tools {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-2);
+}
+
+/* Make the search input behave */
+.table-search {
+  width: min(380px, 100%);
+}
+
+.table-search input {
+  width: 100%;
+}
+
+/* Icon spacing inside our Bootstrap button */
+.table-header .btn i {
+  margin-right: var(--space-1);
+}
+
+/* Footer export row */
+.export-row {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  padding: var(--space-3);
+}
+
+/* Responsive stacking */
+@media (max-width: 768px) {
+  .table-header,
+  .table-tools {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .table-search {
+    width: 100%;
+  }
+
+  .table-tools .btn {
+    width: 100%;
+  }
+}
diff --git a/src/Analysim.Web/ClientApp/src/app/projects/project-file-explorer/project-file-explorer-item/project-file-explorer-item.component.html b/src/Analysim.Web/ClientApp/src/app/projects/project-file-explorer/project-file-explorer-item/project-file-explorer-item.component.html
index 97c0ee7..6922a88 100644
--- a/src/Analysim.Web/ClientApp/src/app/projects/project-file-explorer/project-file-explorer-item/project-file-explorer-item.component.html
+++ b/src/Analysim.Web/ClientApp/src/app/projects/project-file-explorer/project-file-explorer-item/project-file-explorer-item.component.html
@@ -1,15 +1,50 @@
-<li class="list-group-item d-flex h-100" [class.active]="isSelected" (click)="selectItem()" (dblclick)="navigate()">
-    <div class="mr-auto" style="width: 100%">
-        <i class="fa fa-file mr-1" *ngIf="blobFileItem.type == 'file'"></i>
-        <i class="fa fa-folder mr-1" *ngIf='blobFileItem.type === "folder"'></i>
+<li
+  class="list-group-item file-item"
+  [class.is-selected]="isSelected"
+  (click)="selectItem()"
+  (dblclick)="navigate()"
+>
+  <div class="file-row">
+    <div class="file-left">
+      <i
+        class="fa file-icon"
+        [ngClass]="
+          blobFileItem.type === 'folder'
+            ? 'fa-folder'
+            : blobFileItem.type === 'none'
+              ? 'fa-arrow-left'
+              : 'fa-file'
+        "
+        aria-hidden="true"
+      ></i>
 
-        <a (click)="navigate()">{{blobFileItem.name}}</a>
-        <div class="ml-auto" *ngIf="blobFileItem.type == 'file'" style="float: right">
-            <button type="button" class="btn btn-secondary" title="Get Shareable Link" (click)="displayShareableLink()">
-                <i class="fa fa-link mr-1"></i>
-            </button>
-            {{timeSince}}
-        </div>
+      <a
+        class="file-link"
+        (click)="navigate(); $event.stopPropagation()"
+        [attr.title]="
+          blobFileItem.type === 'none'
+            ? 'Back'
+            : blobFileItem.type === 'folder'
+              ? 'Open folder'
+              : 'Open file'
+        "
+      >
+        {{ blobFileItem.type === "none" ? "Back" : blobFileItem.name }}
+      </a>
+    </div>
+
+    <div class="file-right" *ngIf="blobFileItem.type === 'file'">
+      <span class="file-meta" aria-label="Last updated">{{ timeSince }}</span>
 
+      <button
+        type="button"
+        class="btn btn-primary"
+        title="Get Shareable Link"
+        aria-label="Get Shareable Link"
+        (click)="displayShareableLink(); $event.stopPropagation()"
+      >
+        <i class="fa fa-link" aria-hidden="true"></i>
+      </button>
     </div>
-</li>
\ No newline at end of file
+  </div>
+</li>
diff --git a/src/Analysim.Web/ClientApp/src/app/projects/project-file-explorer/project-file-explorer-item/project-file-explorer-item.component.scss b/src/Analysim.Web/ClientApp/src/app/projects/project-file-explorer/project-file-explorer-item/project-file-explorer-item.component.scss
index 6eb0442..1df8a4f 100644
--- a/src/Analysim.Web/ClientApp/src/app/projects/project-file-explorer/project-file-explorer-item/project-file-explorer-item.component.scss
+++ b/src/Analysim.Web/ClientApp/src/app/projects/project-file-explorer/project-file-explorer-item/project-file-explorer-item.component.scss
@@ -1,6 +1,92 @@
-.list-group-item{
-    border-top-right-radius: 0 !important;
-    border-top-left-radius: 0 !important;
-    border-bottom-right-radius: 0 !important;
-    border-bottom-left-radius: 0 !important;
-}
\ No newline at end of file
+.file-item {
+  border: var(--border-w-1) var(--border-style) var(--border-color);
+  border-radius: var(--radius-1);
+  padding: var(--space-3) var(--space-4);
+  background: var(--surface-0);
+
+  transition: background-color var(--motion-fast), border-color var(--motion-fast);
+}
+
+/* Selected state */
+.file-item.is-selected {
+  background: var(--background-color-tertiary);
+  border-color: var(--c-accent-600);
+}
+
+.file-row {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+}
+
+.file-left {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.file-icon {
+  color: var(--c-accent-600);
+  font-size: var(--fs-16);
+  flex: 0 0 auto;
+}
+
+.file-link {
+  cursor: pointer;
+  font-size: var(--fs-16);
+  font-weight: 500;
+
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  color: var(--link-on-light);
+  text-decoration: none;
+}
+
+.file-link:hover {
+  color: var(--link-hover-color);
+  text-decoration: underline;
+}
+
+.file-right {
+  margin-left: auto;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  flex: 0 0 auto;
+}
+
+.file-meta {
+  font-size: var(--fs-12);
+  opacity: 0.75;
+  color: var(--text-on-light);
+  white-space: nowrap;
+}
+
+.file-item:hover {
+  border-color: var(--c-accent-600);
+}
+
+.file-icon.fa-level-up-alt {
+  color: var(--c-accent-600);
+}
+
+.file-link {
+  cursor: pointer;
+  font-size: var(--fs-16);
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--link-on-light);
+  text-decoration: none;
+}
+
+.file-link:hover {
+  color: var(--link-hover-color);
+  text-decoration: underline;
+}
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 ff8e655..37c8da4 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
@@ -1,116 +1,282 @@
 <!-- Card Start -->
 
-<div class="card" *ngIf="project != null">
-
-    <!-- Card Header Start -->
-    <div class="d-flex card-header flex-row align-items-center">
-
-        <!-- File Route Start -->
-
-        <span class="mr-2">{{folders}}</span>
-        <!--<span>{{currentDirectory}}</span>-->
-        <!-- File Explorer Button Start -->
-        <div class="d-inline-flex ml-auto">
-            <!-- Private Button Group Start -->
-            <div class="btn-group mr-3" role="group" *ngIf="isMember">
-                <button type="button" class="btn" title="Create Folder" (click)="toggleModalFolder()">
-                    <i class="fa fa-folder-plus"></i>
-                </button>
-                <button type="button" class="btn disabled" title="Rename" (click)="edit()">
-                    <i class="fa fa-edit"></i>
-                </button>
-                <button type="button" class="btn disabled" title="Move">
-                    <i class="fa fa-arrows-alt"></i>
-                </button>
-                <button type="button" class="btn disabled" title="Copy">
-                    <i class="fa fa-copy"></i>
-                </button>
-                <button type="button" class="btn" title="Delete" data-toggle="modal" data-target="#deleteModal">
-                    <i class="fa fa-trash"></i>
-                </button>
-                <button type="button" class="btn">
-                    <i class="fa fa-upload"></i>
-                    <input type="file" title="Upload" *ngIf="isValidDirectory" (change)=fileEvent($event) multiple>
-                </button>
-            </div> <!-- Private Button Group End -->
-            <!-- Public Button Group Start -->
-            <div class="btn-group" role="group">
-                <button type="button" class="btn" title="Refresh" (click)="setDirectoryFile(currentDirectory)">
-                    <i class="fa fa-sync"></i>
-                </button>
-                <button type="button" class="btn" title="Download" (click)="saveFile()">
-                    <i class="fa fa-download"></i>
-                </button>
-            </div> <!-- Public Button Group End -->
-        </div> <!-- File Explorer Button End -->
-    </div> <!-- Card Header End -->
-    <!-- File Explorer Content Start -->
-    <ul class="list-group">
-        <li class="list-group-item" *ngIf="project.blobFiles.length == 0"> No File Found </li>
-        <app-project-file-explorer-item *ngFor="let blobFileItem of blobFileItemList" [blobFileItem]="blobFileItem"
-            [isSelected]="blobFileItem.order == selectedItem" [currentDirectory]="currentDirectory"
-            (changeDirectory)="setDirectoryFile($event)"
-            (selectedItem)="setSelectedItem($event)"></app-project-file-explorer-item>
-    </ul> <!-- File Explorer Content End -->
-    <div class="card-footer">
-        <span><i class="fa fa-user mr-2"></i>{{ project | role:"member" }}</span>
-        <span class="float-right">Last Updated {{ project.lastUpdated | timeElapsed}} Ago</span>
+<div class="card file-explorer-card" *ngIf="project != null">
+  <!-- Card Header Start -->
+  <div class="d-flex card-header align-items-center file-explorer-card__header">
+    <div class="file-explorer-card__title">
+      <span class="file-explorer-card__label">Current folder</span>
+
+      <span class="file-explorer-card__path">
+        <i class="fa fa-folder-open mr-1" aria-hidden="true"></i>
+        {{ folders }}
+      </span>
+    </div>
+
+    <div class="ml-auto d-inline-flex">
+      <div
+        class="btn-toolbar file-explorer-card__toolbar"
+        role="toolbar"
+        aria-label="File explorer actions"
+      >
+        <!-- Member actions -->
+        <div
+          class="btn-group file-explorer-card__actions"
+          role="group"
+          *ngIf="isMember"
+          aria-label="Member actions"
+        >
+          <!-- Primary -->
+          <button
+            type="button"
+            class="btn btn-primary file-explorer-card__upload-btn"
+            title="Upload"
+            aria-label="Upload"
+          >
+            <i class="fa fa-upload" aria-hidden="true"></i>
+            <input
+              class="file-explorer-card__file-input"
+              type="file"
+              title="Upload"
+              *ngIf="isValidDirectory"
+              (change)="fileEvent($event)"
+              multiple
+            />
+          </button>
+
+          <!-- Secondary -->
+          <button
+            type="button"
+            class="btn btn-outline-primary"
+            title="Create Folder"
+            aria-label="Create Folder"
+            (click)="toggleModalFolder()"
+          >
+            <i class="fa fa-folder-plus" aria-hidden="true"></i>
+          </button>
+
+          <!-- Disabled secondary -->
+          <button
+            type="button"
+            class="btn btn-outline-primary"
+            title="Rename"
+            aria-label="Rename"
+            (click)="edit()"
+            disabled
+          >
+            <i class="fa fa-edit" aria-hidden="true"></i>
+          </button>
+
+          <button
+            type="button"
+            class="btn btn-outline-primary"
+            title="Move"
+            aria-label="Move"
+            disabled
+          >
+            <i class="fa fa-arrows-alt" aria-hidden="true"></i>
+          </button>
+
+          <button
+            type="button"
+            class="btn btn-outline-primary"
+            title="Copy"
+            aria-label="Copy"
+            disabled
+          >
+            <i class="fa fa-copy" aria-hidden="true"></i>
+          </button>
+
+          <!-- Destructive -->
+          <button
+            type="button"
+            class="btn btn-danger"
+            title="Delete"
+            aria-label="Delete"
+            data-toggle="modal"
+            data-target="#deleteModal"
+          >
+            <i class="fa fa-trash" aria-hidden="true"></i>
+          </button>
+        </div>
+
+        <!-- Public actions -->
+        <div
+          class="btn-group file-explorer-card__actions"
+          role="group"
+          aria-label="Public actions"
+        >
+          <!-- Primary FIRST -->
+          <button
+            type="button"
+            class="btn btn-primary"
+            title="Download"
+            aria-label="Download"
+            (click)="saveFile()"
+          >
+            <i class="fa fa-download" aria-hidden="true"></i>
+          </button>
+
+          <!-- Secondary -->
+          <button
+            type="button"
+            class="btn btn-outline-primary"
+            title="Refresh"
+            aria-label="Refresh"
+            (click)="setDirectoryFile(currentDirectory)"
+          >
+            <i class="fa fa-sync" aria-hidden="true"></i>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- File Explorer Content Start -->
+  <ul class="list-group file-explorer-card__list">
+    <li
+      class="list-group-item file-explorer-card__empty"
+      *ngIf="project.blobFiles.length == 0"
+    >
+      No File Found
+    </li>
+    <app-project-file-explorer-item
+      *ngFor="let blobFileItem of blobFileItemList"
+      [blobFileItem]="blobFileItem"
+      [isSelected]="blobFileItem.order == selectedItem"
+      [currentDirectory]="currentDirectory"
+      (changeDirectory)="setDirectoryFile($event)"
+      (selectedItem)="setSelectedItem($event)"
+    ></app-project-file-explorer-item>
+  </ul>
+  <!-- File Explorer Content End -->
+
+  <!-- Footer -->
+  <div class="card-footer file-explorer-card__footer">
+    <div class="file-explorer-card__footer-left">
+      <i class="fa fa-user" aria-hidden="true"></i>
+      <span>{{ project | role: "member" }}</span>
     </div>
-    <app-project-file-preview *ngIf="filePreview" [blobFile]="blobFileItemList[1].file"></app-project-file-preview>
-
-    <ng-template #uploadModal>
-        <app-modal-upload [uploadFileList]="uploadFileList" [uploadModalRef]="uploadModalRef"
-            (updatedFileListEvent)="updateFileList($event)" (uploadedFileEvent)="addNewFile($event)"></app-modal-upload>
-    </ng-template>
-    <ng-template #folderModal>
-        <app-modal-folder [folderModalRef]="folderModalRef" [blobList]="blobFileItemList"
-            [currentDirectory]="currentDirectory" [projectID]="project.projectID"
-            (newFolderEvent)="addNewFile($event)"></app-modal-folder>
-    </ng-template>
-    <ng-template #renameModal>
-        <app-modal-edit [renameModalRef]="renameModalRef" [blobList]="blobFileItemList"
-            [currentDirectory]="currentDirectory" [projectID]="project.projectID"
-            (newFolderEvent)="addNewFile($event)"></app-modal-edit>
-    </ng-template>
-
-    <div class="m-3" *ngIf="fileType === 'file'">
-        <app-csvdata-browser *ngIf="csvFile !== null" [csvFile]="csvFile"></app-csvdata-browser>
+
+    <div class="file-explorer-card__meta">
+      Last Updated {{ project.lastUpdated | timeElapsed }} Ago
     </div>
+  </div>
+
+  <app-project-file-preview
+    *ngIf="filePreview"
+    [blobFile]="blobFileItemList[1].file"
+  ></app-project-file-preview>
+
+  <!-- Modals / templates unchanged -->
+  <ng-template #uploadModal>
+    <app-modal-upload
+      [uploadFileList]="uploadFileList"
+      [uploadModalRef]="uploadModalRef"
+      (updatedFileListEvent)="updateFileList($event)"
+      (uploadedFileEvent)="addNewFile($event)"
+    ></app-modal-upload>
+  </ng-template>
 
-    <!--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">
-                <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" data-dismiss="modal">Close</button>
-                    <button type="button" class="btn" (click)="delete()">Delete</button>
-                </div>
-            </div>
+  <ng-template #folderModal>
+    <app-modal-folder
+      [folderModalRef]="folderModalRef"
+      [blobList]="blobFileItemList"
+      [currentDirectory]="currentDirectory"
+      [projectID]="project.projectID"
+      (newFolderEvent)="addNewFile($event)"
+    ></app-modal-folder>
+  </ng-template>
+
+  <ng-template #renameModal>
+    <app-modal-edit
+      [renameModalRef]="renameModalRef"
+      [blobList]="blobFileItemList"
+      [currentDirectory]="currentDirectory"
+      [projectID]="project.projectID"
+      (newFolderEvent)="addNewFile($event)"
+    ></app-modal-edit>
+  </ng-template>
+
+  <div class="m-3" *ngIf="fileType === 'file'">
+    <app-csvdata-browser
+      *ngIf="fileType === 'file' && csvFile"
+      [csvFile]="csvFile"
+    ></app-csvdata-browser>
+  </div>
+
+  <!--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>
         </div>
+      </div>
     </div>
+  </div>
+</div>
 
-    <ng-template #uploadModal>
-        <app-modal-upload [uploadFileList]="uploadFileList" [uploadModalRef]="uploadModalRef"
-            (updatedFileListEvent)="updateFileList($event)" (uploadedFileEvent)="addNewFile($event)"></app-modal-upload>
-    </ng-template>
-    <ng-template #folderModal>
-        <app-modal-folder [folderModalRef]="folderModalRef" [blobList]="blobFileItemList"
-            [currentDirectory]="currentDirectory" [projectID]="project.projectID"
-            (newFolderEvent)="addNewFile($event)"></app-modal-folder>
-    </ng-template>
-    <ng-template #renameModal>
-        <app-modal-edit [renameModalRef]="renameModalRef" [blobList]="blobFileItemList"
-            [currentDirectory]="currentDirectory" [projectID]="project.projectID"
-            (newFolderEvent)="addNewFile($event)"></app-modal-edit>
-    </ng-template>
\ No newline at end of file
+<ng-template #uploadModal>
+  <app-modal-upload
+    [uploadFileList]="uploadFileList"
+    [uploadModalRef]="uploadModalRef"
+    (updatedFileListEvent)="updateFileList($event)"
+    (uploadedFileEvent)="addNewFile($event)"
+  ></app-modal-upload>
+</ng-template>
+<ng-template #folderModal>
+  <app-modal-folder
+    [folderModalRef]="folderModalRef"
+    [blobList]="blobFileItemList"
+    [currentDirectory]="currentDirectory"
+    [projectID]="project.projectID"
+    (newFolderEvent)="addNewFile($event)"
+  ></app-modal-folder>
+</ng-template>
+<ng-template #renameModal>
+  <app-modal-edit
+    [renameModalRef]="renameModalRef"
+    [blobList]="blobFileItemList"
+    [currentDirectory]="currentDirectory"
+    [projectID]="project.projectID"
+    (newFolderEvent)="addNewFile($event)"
+  ></app-modal-edit>
+</ng-template>
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 dc3368e..48b9bf2 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
@@ -1,72 +1,249 @@
-.card-header {
-  background-color: var(--primary-color);
-  font-size: 18px;
+/* Card shell */
+.file-explorer-card {
+  border: var(--border-w-1) var(--border-style) var(--border-color);
+  border-radius: var(--radius-1);
+  overflow: hidden;
+}
+
+.file-explorer-card__header {
+  background: var(--surface-0);
+  color: var(--text-on-light);
+  padding: var(--space-3) var(--space-4);
+  border-bottom: var(--border-w-1) var(--border-style) var(--border-color);
+}
+
+.file-explorer-card__path {
+  font-size: var(--fs-18);
   font-weight: 500;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.card-footer {
-  background-color: var(--primary-color);
+/* List */
+.file-explorer-card__list {
+  margin: 0;
 }
 
-.btn {
-  background-color: var(--button-background-color);
-  color: var(--primary-color);
+.file-explorer-card__empty {
+  border-left: 0;
+  border-right: 0;
 }
 
-.btn-sq-lg {
-  width: 100px !important;
-  height: 100px !important;
+/* Footer */
+.file-explorer-card__footer {
+  background: var(--surface-0);
+  border-top: var(--border-w-1) var(--border-style) var(--border-color);
 }
 
-.btn-sq {
-  width: 75px !important;
-  height: 75px !important;
-  font-size: 10px;
+.file-explorer-card__meta {
+  font-size: var(--fs-12);
+  opacity: 0.75;
 }
 
-.btn-sq-sm {
-  width: 50px !important;
-  height: 50px !important;
-  font-size: 10px;
+/* Toolbar layout */
+.file-explorer-card__toolbar {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-3);
 }
 
-.btn-sq-xs {
-  width: 25px !important;
-  height: 25px !important;
-  padding: 2px;
+/* Segmented button group */
+.file-explorer-card__actions {
+  display: inline-flex;
+  align-items: stretch;
 }
 
-.square:before {
-  content: "";
-  display: block;
-  padding-top: 100%;
-  /* initial ratio of 1:1*/
+.file-explorer-card__actions .btn {
+  padding: var(--space-2) var(--space-3) !important;
+  min-height: 36px;
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  font-size: var(--fs-16);
+  line-height: 1;
+
+  border-radius: 0 !important;
+}
+
+/* Stitch borders */
+.file-explorer-card__actions .btn + .btn {
+  margin-left: calc(var(--border-w-1) * -1);
+}
+
+.file-explorer-card__actions .btn:first-child {
+  border-top-left-radius: var(--radius-1) !important;
+  border-bottom-left-radius: var(--radius-1) !important;
+}
+
+.file-explorer-card__actions .btn:last-child {
+  border-top-right-radius: var(--radius-1) !important;
+  border-bottom-right-radius: var(--radius-1) !important;
+}
+
+.file-explorer-card__actions .btn i {
+  font-size: 18px;
+  color: currentColor;
 }
 
-.btn {
+/* Upload button: file input overlay */
+.file-explorer-card__upload-btn {
   position: relative;
   overflow: hidden;
-  display: inline-block;
 }
 
-.btn input[type=file] {
-  font-size: 100px;
+.file-explorer-card__file-input {
   position: absolute;
-  left: 0;
-  top: 0;
+  inset: 0;
+  width: 100%;
+  height: 100%;
   opacity: 0;
+  cursor: pointer;
+  font-size: 100px;
 }
 
-#delete-modal {
-  background-color: var(--background-color-tertiary) !important;
+/* Modal surface */
+.file-explorer-card__modal {
+  background: var(--background-color-tertiary);
 }
 
-.modal-content {
-  background-color: var(--background-color-tertiary);
+.note {
+  font-size: var(--fs-12);
+  opacity: 0.8;
+}
+
+.file-explorer-card__footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  background: var(--surface-0);
+  border-top: var(--border-w-1) var(--border-style) var(--border-color);
+
+  padding: var(--space-3) var(--space-4);
+}
+
+/* Left side (blue) */
+.file-explorer-card__footer-left {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+
+  color: var(--c-accent-600);
+  font-weight: 500;
+}
+
+/* Right side (quiet/meta) */
+.file-explorer-card__meta {
+  font-size: var(--fs-12);
+  opacity: 0.75;
+  color: var(--text-on-light);
+}
+
+.file-explorer-card__title {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  min-width: 0;
+}
+
+.file-explorer-card__path {
+  font-size: var(--fs-18);
+  font-weight: 500;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.file-explorer-card__selection {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+
+  font-size: var(--fs-12);
+  opacity: 0.85;
+  color: var(--text-on-light);
+
+  min-width: 0;
+}
+
+.file-explorer-card__selection i {
+  color: var(--c-accent-600);
+}
+
+.file-explorer-card__selection-label {
+  opacity: 0.75;
+}
+
+.file-explorer-card__selection-name {
+  font-weight: 500;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.file-explorer-card__title {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.file-explorer-card__label {
+  font-size: var(--fs-12);
+  opacity: 0.7;
+}
+
+.file-explorer-card__path {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+
+  font-size: var(--fs-16);
+  font-weight: 500;
+
+  color: var(--text-on-light);
+}
+
+.file-explorer-card__label {
+  font-size: var(--fs-12);
+  opacity: 0.8;
+  color: var(--c-accent-600);
+}
+
+/* Path row */
+.file-explorer-card__path {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+
+  font-size: var(--fs-16);
+  font-weight: 500;
+
+  color: var(--c-accent-600);
+}
+
+/* Folder icon */
+.file-explorer-card__path i {
+  color: var(--c-accent-600);
+}
+
+/* Selected row */
+.file-explorer-card__selection {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+
+  font-size: var(--fs-14);
+  color: var(--c-accent-600);
+}
+
+.file-explorer-card__selection i {
+  color: var(--c-accent-600);
 }
 
-.note {
-  font-size: 12px;
-  color: var(--text-color-secondary);
 
-}
\ No newline at end of file
diff --git a/src/Analysim.Web/ClientApp/src/app/projects/project-file-explorer/project-file-explorer.component.ts b/src/Analysim.Web/ClientApp/src/app/projects/project-file-explorer/project-file-explorer.component.ts
index 3674a31..a9cc109 100644
--- a/src/Analysim.Web/ClientApp/src/app/projects/project-file-explorer/project-file-explorer.component.ts
+++ b/src/Analysim.Web/ClientApp/src/app/projects/project-file-explorer/project-file-explorer.component.ts
@@ -30,7 +30,7 @@ export class ProjectFileExplorerComponent implements OnInit {
   @ViewChild('renameModal') renameModal: TemplateRef<any>;
   @ViewChild('closeDeleteModalbutton') closeDeleteModalbutton;
 
-  @ViewChild('observablehqPanel', { read: ElementRef }) observablehqPanel;
+  // @ViewChild('observablehqPanel', { read: ElementRef }) observablehqPanel;
 
   uploadModalRef: BsModalRef;
   folderModalRef: BsModalRef;
@@ -57,14 +57,15 @@ export class ProjectFileExplorerComponent implements OnInit {
 
   async ngOnInit() {
     this.dataBrowserURL = 'https://observablehq.com/embed/@sfsu/untitled?cell=*&dataset=';
-    this.currentDirectory = this.extractDirectory(this.router.url).slice(5);
+    const raw = this.extractDirectory(this.router.url);
+    this.currentDirectory = this.normalizeFileRoute(raw);
     this.setDirectoryFile(this.currentDirectory);
     let directory = this.currentDirectory.endsWith('.csv') ? this.currentDirectory.split('/').slice(0, -1).join('/') : this.currentDirectory;
     directory = directory.endsWith('/') ? directory.slice(0,-1) : directory;
     this.folders = "/ " + directory.split("/").join(" / ");
     this.router.events.subscribe((ev) => {
       if (ev instanceof NavigationEnd) {
-        this.currentDirectory = this.extractDirectory(this.router.url);
+        this.currentDirectory = this.normalizeFileRoute(this.extractDirectory(this.router.url));
         this.setDirectoryFile(this.currentDirectory)
         directory = this.currentDirectory.endsWith('.csv') ? this.currentDirectory.split('/').slice(0, -1).join('/') : this.currentDirectory;
         directory = directory.endsWith('/') ? directory.slice(0,-1) : directory;
@@ -78,7 +79,7 @@ export class ProjectFileExplorerComponent implements OnInit {
     let script = this._renderer2.createElement('script');
     script.type = `module`;
     script.text = this.generateScript;
-    this._renderer2.appendChild(this.observablehqPanel.nativeElement, script);
+    // this._renderer2.appendChild(this.observablehqPanel.nativeElement, script); // issue here
   }
 
   extractDirectory(url) {
@@ -89,6 +90,25 @@ export class ProjectFileExplorerComponent implements OnInit {
     return route + '/';
   }
 
+  normalizeFileRoute(route: string): string {
+    let r = route || "";
+
+    // remove trailing slash for parsing
+    const hadTrailing = r.endsWith("/");
+    if (hadTrailing) r = r.slice(0, -1);
+
+    // split into segments
+    const parts = r.split("/").filter(Boolean);
+
+    // if first segment is "file", drop it
+    if (parts[0] === "file") parts.shift();
+
+    // rebuild
+    let rebuilt = parts.join("/");
+    if (rebuilt.length > 0) rebuilt += "/";
+    return rebuilt;
+  }
+
 
   public fileEvent($event) {
     for (let file of $event.target.files) {
diff --git a/src/Analysim.Web/ClientApp/src/app/projects/project-file-preview/project-file-preview.component.html b/src/Analysim.Web/ClientApp/src/app/projects/project-file-preview/project-file-preview.component.html
index 26cea3e..5663094 100644
--- a/src/Analysim.Web/ClientApp/src/app/projects/project-file-preview/project-file-preview.component.html
+++ b/src/Analysim.Web/ClientApp/src/app/projects/project-file-preview/project-file-preview.component.html
@@ -1,24 +1,40 @@
-<div class="card">
-    <!-- Card Header Start -->
-    <div class="d-flex card-header flex-row align-items-center">
-        <!-- File Route Start -->
-        <span class="mr-2">File Preview</span>
+<div class="card file-preview-card">
+  <div class="d-flex card-header align-items-center file-preview-card__header">
+    <div class="file-preview-card__title">
+      <span class="file-preview-card__heading">Previewing</span>
+      <span class="file-preview-card__filename">
+        {{ blobFile?.name }}{{ blobFile?.extension }}
+      </span>
+    </div>
 
-        <!-- File Explorer Button Start -->
-        <div class="d-inline-flex ml-auto">
-            <!-- Private Button Group Start -->
-            <div class="btn-group" role="group">
-                <button type="button" class="btn" title="Load Notebook" (click)="toggleModalObservablehq()">
-                    <span class="icon-observablehq bl-1"></span>
-                </button>
-            </div> <!-- Private Button Group End -->
-        </div> <!-- File Explorer Button End -->
-    </div> <!-- Card Header End -->
-    <app-observablehq *ngIf="showNotebook == true" [blobUri]="blobFile.uri"
-        [observableNotebookLink]="notebookLink"></app-observablehq>
+    <div class="ml-auto d-inline-flex">
+      <div class="btn-group" role="group" aria-label="File preview actions">
+        <button
+          type="button"
+          class="btn btn-primary"
+          (click)="toggleModalObservablehq()"
+          title="Analyze in Notebook"
+          aria-label="Analyze in Notebook"
+        >
+          <i class="fa fa-play mr-1" aria-hidden="true"></i>
+          Analyze in Notebook
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <div class="file-preview-card__body">
+    <app-observablehq
+      *ngIf="showNotebook"
+      [blobUri]="blobFile.uri"
+      [observableNotebookLink]="notebookLink"
+    ></app-observablehq>
+  </div>
 </div>
 
 <ng-template #observablehqModal>
-    <app-modal-observablehq [observablehqModalRef]="observablehqModalRef"
-        (loadNotebookEvent)="loadNotebook($event)"></app-modal-observablehq>
-</ng-template>
\ No newline at end of file
+  <app-modal-observablehq
+    [observablehqModalRef]="observablehqModalRef"
+    (loadNotebookEvent)="loadNotebook($event)"
+  ></app-modal-observablehq>
+</ng-template>
diff --git a/src/Analysim.Web/ClientApp/src/app/projects/project-file-preview/project-file-preview.component.scss b/src/Analysim.Web/ClientApp/src/app/projects/project-file-preview/project-file-preview.component.scss
index 557b4e3..59c974c 100644
--- a/src/Analysim.Web/ClientApp/src/app/projects/project-file-preview/project-file-preview.component.scss
+++ b/src/Analysim.Web/ClientApp/src/app/projects/project-file-preview/project-file-preview.component.scss
@@ -1,4 +1,54 @@
-.btn {
-  background-color: var(--button-background-color);
-  color:var(--primary-color);
+.file-preview-card {
+  border: var(--border-w-1) var(--border-style) var(--border-color);
+  border-radius: var(--radius-1);
+  overflow: hidden;
 }
+
+.file-preview-card__header {
+  background: var(--background-color-tertiary);
+  color: var(--text-on-light);
+  font-size: var(--fs-16);
+
+  padding: var(--space-3) var(--space-4);
+  border-bottom: var(--border-w-1) var(--border-style) var(--border-color);
+}
+
+.file-preview-card {
+  border: var(--border-w-1) var(--border-style) var(--border-color);
+  border-radius: var(--radius-1);
+  overflow: hidden;
+  background: var(--background-color-tertiary);
+}
+
+.file-preview-card__header {
+  background: transparent;
+  color: var(--text-on-light);
+  padding: var(--space-3) var(--space-4);
+  border-bottom: var(--border-w-1) var(--border-style) var(--border-color);
+}
+
+.file-preview-card__title {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.file-preview-card__heading {
+  font-size: var(--fs-12);
+  opacity: 0.75;
+}
+
+.file-preview-card__filename {
+  font-size: var(--fs-16);
+  font-weight: 600;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.file-preview-card__body {
+  padding: var(--space-3);
+}
+
diff --git a/src/Analysim.Web/ClientApp/src/app/projects/project-overview/project-overview-view/project-content/project-content.component.html b/src/Analysim.Web/ClientApp/src/app/projects/project-overview/project-overview-view/project-content/project-content.component.html
index 3ba6aee..6ad2088 100644
--- a/src/Analysim.Web/ClientApp/src/app/projects/project-overview/project-overview-view/project-content/project-content.component.html
+++ b/src/Analysim.Web/ClientApp/src/app/projects/project-overview/project-overview-view/project-content/project-content.component.html
@@ -1,22 +1,22 @@
-<div class="card">
-    <div class="d-flex card-header flex-row align-items-center">
+<div class="card notebooks-card">
+    <div class="d-flex card-header flex-row align-items-center notebooks-card__header">
         <span class="mr-2">Notebooks</span>
         <div class="d-inline-flex ml-auto" *ngIf="!isCurrentDirNotebook">
             <!-- Private Button Group Start -->
-            <div class="btn-group mr-3" role="group" *ngIf="isMember">
-                <button type="button" class="btn" title="Upload Notebook" (click)="toggleModalUpload()">
-                    <i class="fa fa-plus"></i>
+            <div class="btn-group notebooks-card__actions" role="group" *ngIf="isMember" aria-label="Notebook creation actions">
+                <button type="button" class="btn btn-primary" title="Upload Notebook" aria-label="Upload Notebook" (click)="toggleModalUpload()">
+                    <i class="fa fa-plus" aria-hidden="true"></i>
                 </button>
-                <button type="button" class="btn" title="Create Folder" (click)="openFolderModal()">
-                    <i class="fa fa-folder-plus"></i>
+                <button type="button" class="btn btn-outline-primary" title="Create Folder" aria-label="Create Folder" (click)="openFolderModal()">
+                    <i class="fa fa-folder-plus" aria-hidden="true"></i>
                 </button>
             </div>
         </div>
     </div>
-    <ul class="list-group">
-        <li class="list-group-item" *ngIf="currentDirectory.split('/').length>2"
+    <ul class="list-group notebooks-card__list">
+        <li class="list-group-item notebooks-card__list-item notebooks-card__nav-up" *ngIf="currentDirectory.split('/').length>2"
             (click)="navigateToPreviousComponent()"> . . . </li>
-        <li class="list-group-item" *ngIf="notebooks.length === 0 && !isCurrentDirNotebook "> No Notebooks Found </li>
+        <li class="list-group-item notebooks-card__list-item" *ngIf="notebooks.length === 0 && !isCurrentDirNotebook "> No Notebooks Found </li>
         <app-project-notebook-item *ngFor="let notebook of notebooks" [project]="project" [notebook]="notebook"
             [currentDirectory]="currentDirectory" (navigateToNewDirectory)="navigate($event)"
             (getNotebooks)="getNotebooks($event)" (setCurrentNotebook)="displayNotebook($event)"
diff --git a/src/Analysim.Web/ClientApp/src/app/projects/project-overview/project-overview-view/project-content/project-content.component.scss b/src/Analysim.Web/ClientApp/src/app/projects/project-overview/project-overview-view/project-content/project-content.component.scss
index f378ddc..fb03e95 100644
--- a/src/Analysim.Web/ClientApp/src/app/projects/project-overview/project-overview-view/project-content/project-content.component.scss
+++ b/src/Analysim.Web/ClientApp/src/app/projects/project-overview/project-overview-view/project-content/project-content.component.scss
@@ -1,9 +1,63 @@
-.btn {
-  background-color: var(--button-background-color);
-  color: var(--primary-color);
+.notebooks-card {
+  border: var(--border-w-1) var(--border-style) var(--border-color);
+  border-radius: var(--radius-1);
+  overflow: hidden;
 }
-.card-header {
-  background-color: var(--primary-color);
+
+.notebooks-card__header {
+  background: var(--surface-0);
+  color: var(--text-on-light);
+  font-size: var(--fs-18);
+
+  padding: var(--space-3) var(--space-4);
+  border-bottom: var(--border-w-1) var(--border-style) var(--border-color);
+}
+
+.notebooks-card__list {
+  margin: 0;
+}
+
+.notebooks-card__list-item {
+  border-left: 0;
+  border-right: 0;
+}
+
+.notebooks-card__nav-up {
+  cursor: pointer;
+}
+
+.notebooks-card__actions {
+  display: inline-flex;
+  align-items: stretch;
+}
+
+.notebooks-card__actions .btn {
+  padding: var(--space-2) var(--space-3) !important;
+  min-height: 36px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  border-radius: 0 !important;
+  font-size: var(--fs-16);
+  line-height: 1;
+}
+
+.notebooks-card__actions .btn + .btn {
+  margin-left: calc(var(--border-w-1) * -1);
+}
+
+.notebooks-card__actions .btn:first-child {
+  border-top-left-radius: var(--radius-1) !important;
+  border-bottom-left-radius: var(--radius-1) !important;
+}
+
+.notebooks-card__actions .btn:last-child {
+  border-top-right-radius: var(--radius-1) !important;
+  border-bottom-right-radius: var(--radius-1) !important;
+}
+
+.notebooks-card__actions .btn i {
   font-size: 18px;
-  font-weight: 500;
+  color: currentColor;
 }
\ 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 fe0cac3..58a1578 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
@@ -1,43 +1,135 @@
-<li class="list-group-item d-flex h-100">
-  <div class="mr-auto" *ngIf="notebook.type!=='folder'" style="width: 100%">
-    <i class="fa fa-file mr-1"></i>
-    <a style="margin-right: 5px; cursor: pointer;"
-      (click)="navigateToNotebook()">{{notebook.name+notebook.extension}}</a>
-    <select [(ngModel)]="selectedVersion" (ngModelChange)="onVersionChange($event)"
-      *ngIf="notebook.type!=='observable'">
-      <option *ngFor="let version of versions" [value]="version">v{{ version }}</option>
-    </select>
-    <div class="btn-group mr-3" role="group" style="float: right">
-      <button title="Datasets" type="button" class="btn" (click)="showDatasetsModal()"
-        *ngIf="isMember && notebook.type!=='observable'">
-        <i class="fa fa-database mr-1"></i>
+<li class="list-group-item notebook-item d-flex h-100">
+  <!-- FILE / NOTEBOOK -->
+  <div class="mr-auto notebook-row" *ngIf="notebook.type !== 'folder'">
+    <div class="notebook-left">
+      <i class="fa fa-file notebook-icon" aria-hidden="true"></i>
+
+      <a
+        class="notebook-link"
+        title="Open notebook"
+        (click)="navigateToNotebook()"
+      >
+        {{ notebook.name + notebook.extension }}
+      </a>
+
+      <select
+        class="notebook-version"
+        [(ngModel)]="selectedVersion"
+        (ngModelChange)="onVersionChange($event)"
+        *ngIf="notebook.type !== 'observable'"
+        title="Select version"
+        aria-label="Select notebook version"
+      >
+        <option *ngFor="let version of versions" [value]="version">
+          v{{ version }}
+        </option>
+      </select>
+    </div>
+
+    <!-- Actions (ordered by hierarchy) -->
+    <div
+      class="btn-group notebook-actions"
+      role="group"
+      aria-label="Notebook actions"
+    >
+      <!-- Observable: primary action is "Open link" -->
+      <button
+        *ngIf="notebook.type === 'observable'"
+        type="button"
+        class="btn btn-primary"
+        (click)="openObservableNotebook()"
+        title="Open link"
+        aria-label="Open link"
+      >
+        <i class="fa fa-link" aria-hidden="true"></i>
       </button>
-      <button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#exampleModalLong">
-        <i class="fa fa-comment mr-1"></i>
+
+      <!-- Normal notebook: primary action is Download -->
+      <button
+        *ngIf="notebook.type !== 'observable'"
+        type="button"
+        class="btn btn-primary"
+        (click)="downloadNotebook()"
+        title="Download"
+        aria-label="Download notebook"
+      >
+        <i class="fa fa-arrow-down" aria-hidden="true"></i>
       </button>
-      <button type="button" class="btn btn-secondary" *ngIf="isMember" data-toggle="modal"
-        [attr.data-target]="'#deleteModal' + notebook.notebookID">
-        <i class="fa fa-trash mr-1"></i>
+
+      <!-- Secondary actions: outline style -->
+      <button
+        *ngIf="isMember && notebook.type !== 'observable'"
+        type="button"
+        class="btn btn-outline-primary"
+        (click)="showDatasetsModal()"
+        title="Datasets"
+        aria-label="Datasets"
+      >
+        <i class="fa fa-database" aria-hidden="true"></i>
       </button>
-      <button type="button" class="btn btn-secondary" (click)="downloadNotebook()" *ngIf="notebook.type!=='observable'">
-        <i class="fa fa-arrow-down mr-1"></i>
+
+      <button
+        type="button"
+        class="btn btn-outline-primary"
+        data-toggle="modal"
+        data-target="#exampleModalLong"
+        title="Comments"
+        aria-label="Comments"
+      >
+        <i class="fa fa-comment" aria-hidden="true"></i>
       </button>
-      <button type="button" class="btn btn-secondary" (click)="openObservableNotebook()"
-        *ngIf="notebook.type==='observable'">
-        <i class="fa fa-link mr-1"></i>
+
+      <button
+        *ngIf="isMember"
+        type="button"
+        class="btn btn-outline-primary"
+        (click)="showRenameNotebookModal()"
+        title="Rename"
+        aria-label="Rename notebook"
+      >
+        <i class="fa fa-edit" aria-hidden="true"></i>
       </button>
-      <button type="button" class="btn btn-secondary" (click)="showRenameNotebookModal()" *ngIf="isMember">
-        <i class="fa fa-edit mr-1"></i>
+
+      <!-- Destructive: danger last -->
+      <button
+        *ngIf="isMember"
+        type="button"
+        class="btn btn-danger"
+        data-toggle="modal"
+        [attr.data-target]="'#deleteModal' + notebook.notebookID"
+        title="Delete"
+        aria-label="Delete notebook"
+      >
+        <i class="fa fa-trash" aria-hidden="true"></i>
       </button>
     </div>
   </div>
-  <div class="mr-auto" *ngIf="notebook.type==='folder'" style="width: 100%">
-    <i class="fa fa-folder mr-1"></i>
-    <a style="cursor: pointer;" (click)="navigate()">{{notebook.name}}</a>
-    <div class="btn-group mr-3" role="group" style="float: right">
-      <button type="button" class="btn btn-secondary" *ngIf="isMember" data-toggle="modal"
-        [attr.data-target]="'#deleteModal' + notebook.notebookID">
-        <i class="fa fa-trash mr-1"></i>
+
+  <!-- FOLDER -->
+  <div class="mr-auto notebook-row" *ngIf="notebook.type === 'folder'">
+    <div class="notebook-left">
+      <i class="fa fa-folder notebook-icon" aria-hidden="true"></i>
+
+      <a class="notebook-link" title="Open folder" (click)="navigate()">
+        {{ notebook.name }}
+      </a>
+    </div>
+
+    <div
+      class="btn-group notebook-actions"
+      role="group"
+      aria-label="Folder actions"
+    >
+      <button
+        *ngIf="isMember"
+        type="button"
+        class="btn btn-danger"
+        data-toggle="modal"
+        [attr.data-target]="'#deleteModal' + notebook.notebookID"
+        title="Delete folder"
+        aria-label="Delete folder"
+      >
+        <i class="fa fa-trash" aria-hidden="true"></i>
       </button>
     </div>
   </div>
@@ -45,20 +137,38 @@
 
 <!-- NoteBook Comment Model -->
 
-<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle"
-  aria-hidden="true">
+<div
+  class="modal fade"
+  id="exampleModalLong"
+  tabindex="-1"
+  role="dialog"
+  aria-labelledby="exampleModalLongTitle"
+  aria-hidden="true"
+>
   <div class="modal-dialog" role="document">
     <div class="modal-content">
       <div class="modal-header">
-        <h5 class="modal-title" id="exampleModalLongTitle">NoteBook Comments</h5>
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+        <h5 class="modal-title" id="exampleModalLongTitle">
+          NoteBook Comments
+        </h5>
+        <button
+          type="button"
+          class="close"
+          data-dismiss="modal"
+          aria-label="Close"
+        >
           <span aria-hidden="true">&times;</span>
         </button>
       </div>
       <div class="modal-body">
         <form>
           <div class="row form-group">
-            <span class="col-9"><input type="text" class="form-control" placeholder="Add your Comment"></span>
+            <span class="col-9"
+              ><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>
           </div>
@@ -74,7 +184,13 @@ <h5 class="modal-title" id="exampleModalLongTitle">NoteBook Comments</h5>
             <div class="d-flex flex-row">
               Tammie Smith - 02/23/2023
               <div class="d-inline-flex ml-auto">
-                <button type="button" class="btn ml-3" title="Delete" data-toggle="modal" data-target="#exampleModal">
+                <button
+                  type="button"
+                  class="btn ml-3"
+                  title="Delete"
+                  data-toggle="modal"
+                  data-target="#exampleModal"
+                >
                   <i class="fa fa-trash"></i>
                 </button>
               </div>
@@ -84,7 +200,13 @@ <h5 class="modal-title" id="exampleModalLongTitle">NoteBook Comments</h5>
             <div class="d-flex flex-row">
               Oneal Smith - 02/23/2023
               <div class="d-inline-flex ml-auto">
-                <button type="button" class="btn ml-3" title="Delete" data-toggle="modal" data-target="#exampleModal">
+                <button
+                  type="button"
+                  class="btn ml-3"
+                  title="Delete"
+                  data-toggle="modal"
+                  data-target="#exampleModal"
+                >
                   <i class="fa fa-trash"></i>
                 </button>
               </div>
@@ -100,43 +222,77 @@ <h5 class="modal-title" id="exampleModalLongTitle">NoteBook Comments</h5>
 </div>
 
 <!--Delete NoteBook Modal-->
-<div class="modal fade" [id]="'deleteModal' + notebook.notebookID" tabindex="-1" role="dialog"
-  aria-labelledby="exampleModalLabel" aria-hidden="true">
+<div
+  class="modal fade"
+  [id]="'deleteModal' + notebook.notebookID"
+  tabindex="-1"
+  role="dialog"
+  aria-labelledby="exampleModalLabel"
+  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>
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+        <button
+          type="button"
+          class="close"
+          data-dismiss="modal"
+          aria-label="Close"
+        >
           <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 *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>
+          <span *ngIf="notebook.type == 'observable'"
+            >{{ notebook.name }}{{ notebook.extension }}</span
+          >
+          <span *ngIf="notebook.type == 'folder'"
+            >{{ notebook.name }} folder</span
+          >
         </div>
       </div>
       <div class="modal-footer">
         <button type="button" class="btn" data-dismiss="modal">Close</button>
-        <button type="button" class="btn" (click)="deleteNotebook()" data-dismiss="modal">Delete</button>
+        <button
+          type="button"
+          class="btn"
+          (click)="deleteNotebook()"
+          data-dismiss="modal"
+        >
+          Delete
+        </button>
       </div>
     </div>
   </div>
 </div>
 
 <ng-template #displayNotebookModal>
-  <app-project-notebook-item-display [notebook]="notebook"
-    [version]="selectedVersion"></app-project-notebook-item-display>
+  <app-project-notebook-item-display
+    [notebook]="notebook"
+    [version]="selectedVersion"
+  ></app-project-notebook-item-display>
 </ng-template>
 
 <ng-template #displayRenameNotebookModal>
-  <app-modal-rename-notebook [notebook]="notebook" (closeModal)="closeRenameNotebookModal()"
-    (renameNotebookEvent)="changeNotebookName($event)"></app-modal-rename-notebook>
+  <app-modal-rename-notebook
+    [notebook]="notebook"
+    (closeModal)="closeRenameNotebookModal()"
+    (renameNotebookEvent)="changeNotebookName($event)"
+  ></app-modal-rename-notebook>
 </ng-template>
 
 <ng-template #displayDatasetsModal>
-  <app-modal-datasets [notebook]="notebook" [project]="project" (closeModal)="closeDatasetModal()"></app-modal-datasets>
-</ng-template>
\ No newline at end of file
+  <app-modal-datasets
+    [notebook]="notebook"
+    [project]="project"
+    (closeModal)="closeDatasetModal()"
+  ></app-modal-datasets>
+</ng-template>
diff --git a/src/Analysim.Web/ClientApp/src/app/projects/project-overview/project-overview-view/project-content/project-notebook-item/project-notebook-item.component.scss b/src/Analysim.Web/ClientApp/src/app/projects/project-overview/project-overview-view/project-content/project-notebook-item/project-notebook-item.component.scss
index 7691350..a886fbd 100644
--- a/src/Analysim.Web/ClientApp/src/app/projects/project-overview/project-overview-view/project-content/project-notebook-item/project-notebook-item.component.scss
+++ b/src/Analysim.Web/ClientApp/src/app/projects/project-overview/project-overview-view/project-content/project-notebook-item/project-notebook-item.component.scss
@@ -1,7 +1,95 @@
-.btn {
-  background-color: var(--button-background-color);
-  color: var(--primary-color);
+.notebook-item {
+  border: var(--border-w-1) var(--border-style) var(--border-color);
+  border-radius: var(--radius-1);
+  padding: var(--space-3) var(--space-4);
+  background: var(--surface-0);
 }
-.modal-content {
-  background-color: var(--background-color-tertiary);
+
+.notebook-row {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+}
+
+.notebook-left {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.notebook-icon {
+  color: var(--c-accent-600);
+  font-size: var(--fs-16);
+}
+
+.notebook-link {
+  cursor: pointer;
+  font-size: var(--fs-16);
+  font-weight: 500;
+
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.notebook-version {
+  margin-left: var(--space-2);
+
+  border-radius: var(--radius-1);
+  border: var(--border-w-1) var(--border-style) var(--border-color);
+
+  padding: var(--space-1) var(--space-2);
+
+  font-size: var(--fs-12);
+  opacity: 0.85;
+
+  background: var(--surface-0);
+  color: var(--text-on-light);
+}
+
+/* ACTION BUTTON GROUP */
+
+.notebook-actions {
+  margin-left: auto;
+  display: inline-flex;
+  align-items: stretch;
+}
+
+.notebook-actions .btn {
+  padding: var(--space-2) var(--space-3) !important; 
+  min-height: 36px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  font-size: var(--fs-16);
+  line-height: 1;
+  border-radius: 0 !important;
+}
+
+.notebook-actions .btn + .btn {
+  margin-left: calc(var(--border-w-1) * -1);
+}
+
+.notebook-actions .btn:first-child {
+  border-top-left-radius: var(--radius-1) !important;
+  border-bottom-left-radius: var(--radius-1) !important;
+}
+
+.notebook-actions .btn:last-child {
+  border-top-right-radius: var(--radius-1) !important;
+  border-bottom-right-radius: var(--radius-1) !important;
+}
+
+.notebook-actions .btn i {
+  font-size: 18px;
+  color: currentColor;
+}
+
+.notebook-item:hover {
+  border-color: var(--c-accent-600);
+  transition: border-color var(--motion-fast);
 }
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 851596c..d21832b 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,5 +1,5 @@
 <!-- Modal -->
-<div class="modal-content">
+<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">
@@ -8,22 +8,24 @@ <h5 class="modal-title">Fork {{project.name}}</h5>
     </div>
     <!-- Body -->
     <div class="modal-body" *ngIf="currentUser!=null && !isExisted">
-        <p>This project will be forked into your dashboard as {{currentUser.userName}}/{{project.name}}.</p>
+        <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">
+    <div class="modal-body fork-modal__body fork-modal__body--success" *ngIf="newProject != null">
         <p>Project successfully foked</p>
-        <button type="button" class="btn btn-link" (click)="onNavigateToNewProject()">{{ newProject.route }}</button>
+        <strong><a role="button" class="link-basic" (click)="onNavigateToNewProject()">{{ newProject.route }}</a></strong>
     </div>
+
     <!-- 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-secondary" *ngIf="newProject == null" (click)="closeModal()">Cancel</button>
-        <button type="button" class="btn btn-secondary" *ngIf="newProject != null" (click)="closeModal()">Close</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>
 </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 e69de29..cccf9b3 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
@@ -0,0 +1,27 @@
+.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;
+  }
+}
\ 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 4837429..eab2f86 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
@@ -2,6 +2,13 @@
   <div class="row justify-content-center">
     <div class="col-md-10 mb-3 d-flex">
       <div class="container project-overview-container">
+        <!-- Owner Actions -->
+        <div class="owner-tools surface-soft" *ngIf="isOwner">
+          <div class="owner-tools-actions">
+            <button type="button" class="btn btn-primary" (click)="editProject()">Edit Project</button>
+            <button type="button" class="btn btn-outline-primary">Post Update</button>
+          </div>
+        </div>
         <div class="row project-detail-row">
           <div class="project-description">
             <h3 class="project-title" *ngIf="(project.route | route:'projectname') as projectname">
@@ -95,33 +102,54 @@ <h3 class="project-title" *ngIf="(project.route | route:'projectname') as projec
           {{ projectname }}
       </h3> -->
             <ul class="project-content-header-option">
-              <li>Share</li>
-              <li>Comment</li>
+              <li class="header-link" role="button" tabindex="0">Share</li>
+              <li class="header-link" role="button" tabindex="0">Comment</li>
             </ul>
           </div>
         </div>
-        <div class="row project-notebook-row" *ngIf='toggleNotebookExpand'>
-          <div [innerHtml]="notebookContent" [ngClass]="isFull ? 'notebook-readme-full' : 'notebook-readme'"></div>
-        </div>
-        <div class="buttons" *ngIf='toggleNotebookExpand'>
-          <div class="readme-button" (click)="toggleNotebook()">{{isFull ? 'Read Less..' : 'Read More..'}}</div>
-          <div class="readme-button" (click)="NavigateToNotebook()">Run Notebook</div>
-        </div>
-        <div class="row project-option-row">
 
-          <!-- <div *ngIf="activeView === 'Content'" class="project-content-footer">
-            <input type="button" value="Go back to Content" 
-            [routerLink]='["/project/" +  (project.route | route:"owner") + "/" + (project.route | route:"projectname")]'
-            [ngClass]='{"active": toggleView == "File"}' (click)="showFile()">
-          </div> -->
+        <!-- README AREA -->
+        <div class="readme-area" *ngIf="readmeNotebook">
+          <div class="readme-header">
+            <div class="readme-title">README</div>
+
+            <button
+              type="button"
+              class="readme-toggle"
+              *ngIf="toggleNotebookExpand"
+              (click)="toggleNotebookExpand = false">
+              Hide Readme
+            </button>
+
+            <button
+              type="button"
+              class="readme-toggle"
+              *ngIf="!toggleNotebookExpand"
+              (click)="toggleNotebookExpand = true">
+              Show Readme
+            </button>
+          </div>
+
+          <!-- Readme content -->
+          <div class="project-notebook-row" *ngIf="toggleNotebookExpand">
+            <div
+              class="readme-content"
+              [innerHtml]="notebookContent"
+              [ngClass]="isFull ? 'notebook-readme-full' : 'notebook-readme'">
+            </div>
 
-          <input type="button" value="Expand Notebook" *ngIf="!toggleNotebookExpand"
-            (click)="toggleNotebookExpand = true;">
-          <input type="button" value="Close Notebook" *ngIf="toggleNotebookExpand"
-            (click)="toggleNotebookExpand = false;">
-          <input type="button" value="Edit Project" *ngIf="isOwner">
-          <input type="button" value="Post Update" *ngIf="isOwner">
+            <div class="readme-actions">
+              <button type="button" class="btn btn-primary" (click)="toggleNotebook()">
+                {{isFull ? 'Read Less..' : 'Read More..'}}
+              </button>
+
+              <button type="button" class="btn btn-outline-primary" (click)="NavigateToNotebook()">
+                Open Notebook
+              </button>
+            </div>
+          </div>
         </div>
+
         <div class="row project-view-option-row">
           <div class="project-view-toggle">
             <input type="button" value="Datasets"
@@ -141,20 +169,28 @@ <h3 class="project-title" *ngIf="(project.route | route:'projectname') as projec
               [ngClass]='{"active": toggleView == "Publications"}' (click)="showPublication()">
           </div>
           <div class="project-view-interaction">
-            <button class="btn-primary" (click)="forkProject()">Fork Project</button>
-            <button type="button" *ngIf="!toggleMoreOption" (click)="toggleMoreOption = true;">
-              More <i class="fa-solid fa-arrow-down"></i>
-            </button>
-            <button type="button" *ngIf="toggleMoreOption" (click)="toggleMoreOption = false;">
-              Less <i class="fa-solid fa-arrow-up"></i>
-            </button>
-            <div class="project-view-extra-interaction" *ngIf="toggleMoreOption">
-              <input type="button" value="Share">
-              <input type="button" value="Recommend">
-              <input type="button" value="Join" *ngIf="!isMember && !isOwner">
-              <input type="button" value="Leave" *ngIf="isMember && !isOwner">
-              <input type="button" value="Follow" *ngIf="!isFollowing">
-              <input type="button" value="Unfollow" *ngIf="isFollowing">
+            <button type="button" class="btn btn-primary" (click)="forkProject()">Fork Project</button>
+            <div class="more-block" [class.is-open]="toggleMoreOption">
+              <div class="more-actions" [class.is-open]="toggleMoreOption">
+                <a class="more-link" role="button" tabindex="0">Share</a>
+                <a class="more-link" role="button" tabindex="0">Recommend</a>
+                <a class="more-link" role="button" tabindex="0" *ngIf="!isMember && !isOwner">Join</a>
+                <a class="more-link" role="button" tabindex="0" *ngIf="isMember && !isOwner">Leave</a>
+                <a class="more-link" role="button" tabindex="0" *ngIf="!isFollowing">Follow</a>
+                <a class="more-link" role="button" tabindex="0" *ngIf="isFollowing">Unfollow</a>
+              </div>
+
+              <button type="button"
+                      class="more-toggle"
+                      (click)="toggleMoreOption = !toggleMoreOption"
+                      [attr.aria-expanded]="toggleMoreOption">
+                <span class="more-toggle__label" [class.is-hidden]="toggleMoreOption">
+                  More <i class="fa-solid fa-arrow-down" aria-hidden="true"></i>
+                </span>
+                <span class="more-toggle__label" [class.is-hidden]="!toggleMoreOption">
+                  Less <i class="fa-solid fa-arrow-up" aria-hidden="true"></i>
+                </span>
+              </button>
             </div>
           </div>
         </div>
diff --git a/src/Analysim.Web/ClientApp/src/app/projects/project/project.component.scss b/src/Analysim.Web/ClientApp/src/app/projects/project/project.component.scss
index 03ee2de..99978e0 100644
--- a/src/Analysim.Web/ClientApp/src/app/projects/project/project.component.scss
+++ b/src/Analysim.Web/ClientApp/src/app/projects/project/project.component.scss
@@ -1,101 +1,148 @@
-// :host {
-//     height : 100%
-// }
-
-// .test {
-//     background-color: aqua;
-// }
-
-// .test2 {
-//     background-color: rebeccapurple;
-// }
-
-// .test3 {
-//     background-color:black;
-// }
-
-// .list-group-item{
-//     color: rgba(255,255,255,.5);
-//     background-color: white !important;
-// }
-
-// .membersList{
-//     padding-top: 120px;
-//     float: left;
-//     height: 500px;
-//     width: fit-content;
-//     padding-right: 50px;
-// }
-
-// .btn-primary{
-//     color: rgb(112, 41, 41);
-//     background-color: #0069d9;
-//     border-color: #0062cc;
-// }
-
-
 :host ::ng-deep .project-overview-container {
   border: 1px solid rgba(0,0,0,.125);
   padding-top: 20px;
 
+  .owner-tools{
+    border: 1px solid rgba(0,0,0,.125);
+    border-radius: 8px;
+    padding: 8px;
+    box-sizing: border-box;
+    margin-bottom: 10px;
+    display: flex;
+    justify-content: end;
+  }
+
+  .owner-tools-actions{
+    display: flex;
+    gap: var(--space-3);
+    flex-wrap: wrap;
+  }
+
   .row {
     padding: 0px 20px;
   }
 
+  .project-view-option-row {
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+  }
+
+  .readme-area{
+    border: 1px solid rgba(0,0,0,.125);
+    border-radius: 8px;
+    background: white;
+    padding: 14px 16px 16px;
+    box-sizing: border-box;
+    margin: 10px 0 14px;
+
+    .readme-header{
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding-bottom: 10px;
+      margin-bottom: 12px;
+      border-bottom: 1px solid rgba(0,0,0,.08);
+
+      .readme-title{
+        font-weight: 600;
+        color: rgba(0,0,0,.75);
+        letter-spacing: .02em;
+      }
+    }
+
+    .project-notebook-row{
+      padding: 0;
+    }
+
+    .readme-actions{
+      display: flex;
+      gap: var(--space-3);
+      justify-content: center;
+      flex-wrap: wrap;
+      margin-top: 1rem;
+      padding-top: 1rem;
+
+      border-top: 1px solid rgba(0,0,0,.1);
+    }
+  }
+
   .project-notebook-row{
-    /* Jupyter Notebook-like styling */
-    .notebook-readme{
-      max-height: 100vh;
+    .notebook-readme,
+    .notebook-readme-full {
+      transition:
+        max-height 350ms ease,
+        -webkit-mask-image 350ms ease,
+        mask-image 350ms ease,
+        opacity 250ms ease;
+      will-change: max-height;
+      box-sizing: border-box;
+    }
+
+    /* COLLAPSED */
+    .notebook-readme {
+      max-height: 60vh;
       overflow: hidden;
-      -webkit-mask-image: linear-gradient(rgb(0, 0, 0) 70%, transparent);
-      mask-image: linear-gradient(rgb(0, 0, 0) 70%, transparent);
+
+      -webkit-mask-image: linear-gradient(rgb(0,0,0) 70%, transparent);
+      mask-image: linear-gradient(rgb(0,0,0) 70%, transparent);
     }
 
-    .notebook-readme-full{
-      margin-bottom: 4px;
-      overflow-x: scroll;
+    /* EXPANDED */
+    .notebook-readme-full {
+      max-height: 2000px;
+      overflow-x: auto;
+
+      -webkit-mask-image: none;
+      mask-image: none;
     }
-    
-.notebook-cell pre code div {
-  background: #cfc8c8;
-  padding: 10px;
-}
-.notebook-cell pre{
-  padding: 10px;
-}
-.notebook-cell img {
-  max-width: 100%;
-  height: auto;
-}
 
-pre code.hljs{display:block;overflow-x:auto;padding:1em}
-code.hljs{padding:3px 5px}
-.hljs{background:#f3f3f3;color:#444}
-.hljs-comment{color:#697070}
-.hljs-punctuation,.hljs-tag{color:#444a}
-.hljs-tag .hljs-attr,.hljs-tag .hljs-name{color:#444}
-.hljs-attribute,.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-name,.hljs-selector-tag{font-weight:700}.hljs-deletion,.hljs-number,.hljs-quote,.hljs-selector-class,.hljs-selector-id,.hljs-string,.hljs-template-tag,.hljs-type{color:#800}.hljs-section,.hljs-title{color:#800;font-weight:700}.hljs-link,.hljs-operator,.hljs-regexp,.hljs-selector-attr,.hljs-selector-pseudo,.hljs-symbol,.hljs-template-variable,.hljs-variable{color:#ab5656}.hljs-literal{color:#695}.hljs-addition,.hljs-built_in,.hljs-bullet,.hljs-code{color:#397300}.hljs-meta{color:#1f7199}.hljs-meta .hljs-string{color:#38a}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}
-  }
-    
-  .buttons{
-  display: flex;
-  gap: 20px;
-  width: max-content;
-  margin: auto;
+    .notebook-cell pre code div {
+      background: #cfc8c8;
+      padding: 10px;
+    }
+    .notebook-cell pre{
+      padding: 10px;
+    }
+    .notebook-cell img {
+      max-width: 100%;
+      height: auto;
+    }
+
+    pre code.hljs{display:block;overflow-x:auto;padding:1em}
+    code.hljs{padding:3px 5px}
+    .hljs{background:#f3f3f3;color:#444}
+    .hljs-comment{color:#697070}
+    .hljs-punctuation,.hljs-tag{color:#444a}
+    .hljs-tag .hljs-attr,.hljs-tag .hljs-name{color:#444}
+    .hljs-attribute,.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-name,.hljs-selector-tag{font-weight:700}
+    .hljs-deletion,.hljs-number,.hljs-quote,.hljs-selector-class,.hljs-selector-id,.hljs-string,.hljs-template-tag,.hljs-type{color:#800}
+    .hljs-section,.hljs-title{color:#800;font-weight:700}
+    .hljs-link,.hljs-operator,.hljs-regexp,.hljs-selector-attr,.hljs-selector-pseudo,.hljs-symbol,.hljs-template-variable,.hljs-variable{color:#ab5656}
+    .hljs-literal{color:#695}
+    .hljs-addition,.hljs-built_in,.hljs-bullet,.hljs-code{color:#397300}
+    .hljs-meta{color:#1f7199}
+    .hljs-meta .hljs-string{color:#38a}
+    .hljs-emphasis{font-style:italic}
+    .hljs-strong{font-weight:700}
   }
-  .readme-button{
-    margin: auto;
-    width: max-content;
-    padding: 8px;
-    color: white;
-    background-color: var(--button-background-color) !important;
-    border-radius: 5px;
-    // margin-top:-20px;
-    margin-bottom: 30px;
+
+  .readme-toggle{
+    margin-left: auto;
+    border: none;
+    background: transparent;
+    padding: 0;
+    color: var(--link-on-light);
     cursor: pointer;
+
+    &:hover{
+      color: var(--link-hover-color);
+      text-decoration: underline;
+    }
   }
 
+
   .project-detail-row {
+    margin-bottom: 1rem;
     .project-description {
       width: 70%;
 
@@ -112,7 +159,7 @@ code.hljs{padding:3px 5px}
 
           &:hover {
             .project-author-name {
-              color: #0056b3;
+              color: var(--link-hover-color);
               text-decoration: underline;
             }
           }
@@ -146,9 +193,8 @@ code.hljs{padding:3px 5px}
         align-items: center;
         margin-bottom: 5px;
 
-
         .project-statistics-header {
-          color: #007bff;
+          color: var(--link-on-light);
           cursor: pointer;
         }
 
@@ -162,15 +208,15 @@ code.hljs{padding:3px 5px}
 
         .project-statistics-pill {
           padding: 1px 5px;
-          border: 1px solid gray;
+          border: 1px solid var(--border-color);
           border-radius: 20px;
           margin-right: 10px;
           font-size: 12px;
-          color: #007bff;
+          color: var(--link-on-light);
         }
 
         .project-statistics-current {
-          color: green;
+          color: var(--color-success);
         }
       }
     }
@@ -197,10 +243,10 @@ code.hljs{padding:3px 5px}
 
         li {
           margin-left: 10px;
-          color: #007bff;
+          color: var(--link-on-light);
 
           &:hover {
-            color: #0056b3;
+            color: var(--link-hover-color);
             text-decoration: underline;
           }
         }
@@ -215,13 +261,13 @@ code.hljs{padding:3px 5px}
       input, button {
         border: none;
         background-color: unset;
-        color: #007bff;
+        color: var(--link-on-light);
         display: flex;
         margin-left: auto;
         margin-right: auto;
 
         &:hover {
-          color: #0056b3;
+          color: var(--link-hover-color);
           text-decoration: underline;
         }
       }
@@ -235,69 +281,146 @@ code.hljs{padding:3px 5px}
     input, button {
       border: none;
       background-color: unset;
-      color: #007bff;
+      color: var(--link-on-light);
 
       &:hover {
-        color: #0056b3;
+        color: var(--link-hover-color);
         text-decoration: underline;
       }
     }
   }
 
   .project-view-option-row {
-    padding: 0px;
     border-top: 1px solid rgba(0,0,0,.125);
     align-items: center;
 
     .project-view-toggle {
-
       & > input {
         padding: 10px 20px;
         background: transparent;
         border: none;
-        //border-right: 1px solid rgba(0,0,0,.125);
 
         &.active {
-          background-color: #edfffb;
+          background-color: var(--background-color-tertiary);
         }
       }
     }
 
     .project-view-interaction {
       margin-left: auto;
-      margin-right: 10px;
+      margin-right: 0;
       display: flex;
+      align-items: center;
+      gap: var(--space-2);
+      margin-top: 2px;
+      margin-bottom: 2px;
 
-      input, button {
-        padding: 0px 10px;
-        background-color: unset;
-        border: none;
-        color: #007bff;
+      .project-view-extra-interaction {
+        display: flex;
+        gap: var(--space-2);
+        flex-wrap: wrap;
+      }
+
+      /* === More / Less pill === */
+      .more-block {
+        margin-right: 20px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: flex-end;
+
+        height: 38px;
+        box-sizing: border-box;
+
+        border: var(--border-w-1) var(--border-style) var(--border-color);
+        border-radius: var(--nav-link-radius);
+
+        padding-left: var(--space-2);
+        padding-right: var(--space-2);
+
+        white-space: nowrap;
+      }
+
+      /* The actions expand LEFT from the right edge */
+      .more-actions {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--space-2);
+
+        max-width: 0;
+        opacity: 0;
+        transform: translateX(8px);
+        overflow: hidden;
+        pointer-events: none;
+
+        transition:
+          max-width 240ms ease,
+          opacity 180ms ease,
+          transform 240ms ease;
+      }
+
+      .more-actions.is-open {
+        max-width: 520px;
+        opacity: 1;
+        transform: translateX(0);
+        pointer-events: auto;
+      }
+
+      /* Links inside “More” */
+      .more-link {
+        display: inline-flex;
+        align-items: center;
+        height: 100%;
+
+        padding: 0 var(--space-1);
+        border-radius: var(--nav-link-radius);
+
+        color: var(--link-on-light);
+        cursor: pointer;
+        text-decoration: none;
+
+        transition: var(--motion-nav);
 
         &:hover {
-          color: #0056b3;
+          color: var(--link-hover-color);
           text-decoration: underline;
         }
       }
 
-      .fork {
-        margin-right: 10px;
-        padding: 5px 10px;
-        min-width: 90px;
-        color: var(--button-font-color);
-        background-color: var(--button-background-color);
+      .more-toggle {
+        display: inline-flex;
+        align-items: center;
+        justify-content: flex-end;
+
+        height: 100%;
+        padding: 0;
+
         border: none;
+        background: transparent;
+
+        color: var(--link-on-light);
+        cursor: pointer;
+        
+        min-width: 74px;
+        text-align: right;
+
+        transition: color var(--motion-fast);
 
         &:hover {
-          color: var(--button-font-color-secondary-hov);
-          background-color: var(--button-background-color-secondary-hov);
-          border: var(--button-border-width) var(--button-border-style) var(--button-border-color-secondary-hov);
-          text-decoration: none;
+          color: var(--link-hover-color);
+          text-decoration: underline;
         }
       }
 
-      .project-view-extra-interaction {
-        display: flex;
+      .more-toggle__label {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--space-1);
+        line-height: 1;
+        padding-right: var(--space-2);
+      }
+
+      .is-hidden {
+        display: none;
       }
     }
   }
@@ -308,13 +431,12 @@ code.hljs{padding:3px 5px}
     .project-view-container {
       width: 100%;
       padding: 20px;
-      border-top: 1px solid #edfffb;
-      background-color: #edfffb;
+      border-top: 1px solid var(--background-color-tertiary);
+      background-color: var(--background-color-tertiary);
     }
   }
 }
 
-
 .badge {
   color: #212529;
   background-color: #f8f9fa;
@@ -345,7 +467,6 @@ code.hljs{padding:3px 5px}
 }
 
 .project-comment-container {
-
   .project-comment-header {
     display: flex;
     justify-content: center;
@@ -377,5 +498,4 @@ code.hljs{padding:3px 5px}
       }
     }
   }
-}
-
+}
\ No newline at end of file
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 4df6a7e..9763e8f 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
@@ -49,3 +49,36 @@
     var(--button-border-color-secondary-hov) !important;
   color: var(--button-font-color-secondary-hov) !important;
 }
+
+/* Outline primary button (secondary actions) */
+.btn-outline-primary {
+  background: transparent !important;
+  border: var(--button-border-width) var(--button-border-style)
+    var(--button-border-color) !important;
+  color: var(--button-border-color) !important;
+}
+
+.btn-outline-primary:hover:not(:disabled):not(.disabled),
+.btn-outline-primary:focus:not(:disabled):not(.disabled) {
+  background: var(--button-background-color) !important;
+  border: var(--button-border-width) var(--button-border-style)
+    var(--button-border-color) !important;
+  color: var(--button-font-color) !important;
+}
+
+/* Quiet danger button */
+.btn-danger {
+  background: transparent !important;
+  border: var(--button-border-width) var(--button-border-style)
+    var(--color-danger) !important;
+  color: var(--color-danger) !important;
+}
+
+/* Hover = full danger */
+.btn-danger:hover:not(:disabled):not(.disabled),
+.btn-danger:focus:not(:disabled):not(.disabled) {
+  background: var(--color-danger) !important;
+  border: var(--button-border-width) var(--button-border-style)
+    var(--color-danger) !important;
+  color: var(--c-text-inverse) !important;
+}
diff --git a/src/Analysim.Web/Controllers/ProjectController.cs b/src/Analysim.Web/Controllers/ProjectController.cs
index ee3908b..bd317d3 100644
--- a/src/Analysim.Web/Controllers/ProjectController.cs
+++ b/src/Analysim.Web/Controllers/ProjectController.cs
@@ -355,81 +355,158 @@ public async Task<IActionResult> ForkProject([FromForm] ProjectForkVM formdata)
             var project = await _dbContext.Projects.FindAsync(formdata.ProjectID);
             if (project == null) return NotFound(new { message = "Project Not Found" });
 
-            
             // Check if the project already exists
             bool projectExists = await _dbContext.Projects
                 .AnyAsync(p => p.ProjectUsers.Any(aup =>
-                    aup.User.Id == formdata.UserID &&
+                    aup.User.Id == userId &&
                     aup.Project.Name == project.Name &&
                     aup.UserRole == "owner"));
 
-            // If the project exists, return a conflict response
-            if (projectExists)   return Conflict(new { message = "Project Already Exists" });
-            
-            // Create Project
-            var newProject = new Project
+            if (projectExists) return Conflict(new { message = "Project Already Exists" });
+
+            await using var tx = await _dbContext.Database.BeginTransactionAsync();
+
+            try
             {
-                Name = project.Name,
-                Visibility = project.Visibility,
-                Description = project.Description,
-                DateCreated = DateTimeOffset.UtcNow,
-                LastUpdated = DateTimeOffset.UtcNow,
-                Route = user.UserName + "/" + project.Name,
-                ForkedFromProjectID = project.ProjectID,
-            };
+                // 1) Create Project
+                var newProject = new Project
+                {
+                    Name = project.Name,
+                    Visibility = project.Visibility,
+                    Description = project.Description,
+                    DateCreated = DateTimeOffset.UtcNow,
+                    LastUpdated = DateTimeOffset.UtcNow,
+                    Route = user.UserName + "/" + project.Name,
+                    ForkedFromProjectID = project.ProjectID,
+                };
 
-            // Add Project And Save Change
-            await _dbContext.Projects.AddAsync(newProject);
-            await _dbContext.SaveChangesAsync();
+                await _dbContext.Projects.AddAsync(newProject);
+                await _dbContext.SaveChangesAsync();
 
-            // Add ProjectUser And Save Change
-            await _dbContext.AddAsync(
-                new ProjectUser
+                // 2) Add ProjectUser (owner)
+                await _dbContext.AddAsync(new ProjectUser
                 {
                     UserID = user.Id,
                     ProjectID = newProject.ProjectID,
                     UserRole = "owner",
                     IsFollowing = true
+                });
+                await _dbContext.SaveChangesAsync();
+
+                // 3) Add BlobFiles 
+                if (formdata.BlobFilesID != null && formdata.BlobFilesID.Length > 0)
+                {
+                    for (int i = 0; i < formdata.BlobFilesID.Length; i++)
+                    {
+                        var file = await _dbContext.BlobFiles.FindAsync(formdata.BlobFilesID[i]);
+                        if (file == null) continue; 
+
+                        await _dbContext.BlobFiles.AddAsync(new BlobFile
+                        {
+                            Container = file.Container,
+                            Directory = file.Directory,
+                            Name = file.Name,
+                            Extension = file.Extension,
+                            Size = file.Size,
+                            Uri = file.Uri,
+                            DateCreated = DateTimeOffset.UtcNow,
+                            LastModified = DateTimeOffset.UtcNow,
+                            User = user,
+                            UserID = user.Id,
+                            Project = newProject,
+                            ProjectID = newProject.ProjectID,
+                        });
+
+                        await _dbContext.SaveChangesAsync();
+                    }
                 }
-            );
-            await _dbContext.SaveChangesAsync();
 
-            // Add BlobFiles 
-            for (int i = 0; i < formdata.BlobFilesID.Length; i++)
-            {
-                // Find File
-                var file = await _dbContext.BlobFiles.FindAsync(formdata.BlobFilesID[i]);
-
-                // Create new file
-                await _dbContext.BlobFiles.AddAsync(
-                 new BlobFile
-                 {
-                     Container = file.Container,
-                     Directory = file.Directory,
-                     Name = file.Name,
-                     Extension = file.Extension,
-                     Size = file.Size,
-                     Uri = file.Uri,
-                     DateCreated = DateTimeOffset.UtcNow,
-                     LastModified = DateTimeOffset.UtcNow,
-                     User = user,
-                     UserID = user.Id,
-                     Project = newProject,
-                     ProjectID = newProject.ProjectID,
-                 }
-                 );
-
-                //Save Change
-                await _dbContext.SaveChangesAsync();
-            }
+                // 4) Clone Notebooks + Contents + ObservableNotebookDataset 
+                var sourceNotebooks = await _dbContext.Notebook
+                    .Where(n => n.ProjectID == project.ProjectID)
+                    .Include(n => n.NotebookContents)
+                    .Include(n => n.observableNotebookDatasets)
+                    .ToListAsync();
 
-            // Return Ok Request
-            return Ok(new
-            {
-                result = newProject,
-                message = "Project Successfully Forked"
-            });
+                foreach (var oldNotebook in sourceNotebooks)
+                {
+                    var newNotebook = new Notebook
+                    {
+                        ProjectID = newProject.ProjectID,
+                        Project = newProject,
+
+                        Name = oldNotebook.Name,
+                        Directory = oldNotebook.Directory,
+                        Extension = oldNotebook.Extension,
+
+                        Container = "notebook-" + newProject.Name.ToLower(),
+                        Route = user.UserName + "/" + newProject.Name,
+
+                        Uri = oldNotebook.Uri,
+                        Size = oldNotebook.Size,
+
+                        DateCreated = DateTimeOffset.UtcNow,
+                        LastModified = DateTimeOffset.UtcNow,
+
+                        type = oldNotebook.type
+                    };
+
+                    await _dbContext.Notebook.AddAsync(newNotebook);
+                    await _dbContext.SaveChangesAsync();
 
+                    // Copy versions
+                    if (oldNotebook.NotebookContents != null && oldNotebook.NotebookContents.Count > 0)
+                    {
+                        foreach (var oldContent in oldNotebook.NotebookContents)
+                        {
+                            await _dbContext.NotebookContent.AddAsync(new NotebookContent
+                            {
+                                NotebookID = newNotebook.NotebookID,
+                                Version = oldContent.Version,
+                                Content = oldContent.Content,
+                                Author = oldContent.Author,
+                                Size = oldContent.Size,
+                                DateCreated = oldContent.DateCreated
+                            });
+                        }
+                    }
+
+                    // Copy observable dataset links
+                    if (oldNotebook.observableNotebookDatasets != null && oldNotebook.observableNotebookDatasets.Count > 0)
+                    {
+                        foreach (var oldObs in oldNotebook.observableNotebookDatasets)
+                        {
+                            await _dbContext.ObservableNotebookDataset.AddAsync(new ObservableNotebookDataset
+                            {
+                                NotebookID = newNotebook.NotebookID,
+                                datasetName = oldObs.datasetName,
+                                datasetURL = oldObs.datasetURL,
+                                BlobFileID = oldObs.BlobFileID
+                            });
+                        }
+                    }
+
+                    await _dbContext.SaveChangesAsync();
+                }
+
+                await tx.CommitAsync();
+
+                return Ok(new
+                {
+                    result = newProject,
+                    message = "Project Successfully Forked"
+                });
+            }
+            catch (Exception ex)
+            {
+                await tx.RollbackAsync();
+                Console.WriteLine(ex);
+                return BadRequest(new
+                {
+                    message = "Fork failed",
+                    detail = ex.Message
+                });
+            }
         }
 
         /*
@@ -464,43 +541,124 @@ public async Task<IActionResult> ForkProjectWithoutBlob([FromForm] ProjectForkVM
                     aup.UserRole == "owner"));
 
             // If the project exists, return a conflict response
-            if (projectExists)   return Conflict(new { message = "Project Already Exists" });
-            
-            // Create Project
-            var newProject = new Project
+            if (projectExists) return Conflict(new { message = "Project Already Exists" });
+
+            await using var tx = await _dbContext.Database.BeginTransactionAsync();
+
+            try
             {
-                Name = project.Name,
-                Visibility = project.Visibility,
-                Description = project.Description,
-                DateCreated = DateTimeOffset.UtcNow,
-                LastUpdated = DateTimeOffset.UtcNow,
-                Route = user.UserName + "/" + project.Name,
-                ForkedFromProjectID = project.ProjectID,
-            };
+                // 1) Create forked Project
+                var newProject = new Project
+                {
+                    Name = project.Name,
+                    Visibility = project.Visibility,
+                    Description = project.Description,
+                    DateCreated = DateTimeOffset.UtcNow,
+                    LastUpdated = DateTimeOffset.UtcNow,
+                    Route = user.UserName + "/" + project.Name,
+                    ForkedFromProjectID = project.ProjectID,
+                };
 
-            // Add Project And Save Change
-            await _dbContext.Projects.AddAsync(newProject);
-            await _dbContext.SaveChangesAsync();
+                // Add Project And Save Change
+                await _dbContext.Projects.AddAsync(newProject);
+                await _dbContext.SaveChangesAsync();
 
-            // Add ProjectUser And Save Change
-            await _dbContext.AddAsync(
-                new ProjectUser
+                // 2) Add owner
+                await _dbContext.AddAsync(new ProjectUser
                 {
                     UserID = user.Id,
                     ProjectID = newProject.ProjectID,
                     UserRole = "owner",
                     IsFollowing = true
+                });
+                await _dbContext.SaveChangesAsync();
+
+                // 3) Clone Notebooks + Contents + ObservableNotebookDataset
+                var sourceNotebooks = await _dbContext.Notebook
+                    .Where(n => n.ProjectID == project.ProjectID)
+                    .Include(n => n.NotebookContents)
+                    .Include(n => n.observableNotebookDatasets)
+                    .ToListAsync();
+
+                foreach (var oldNotebook in sourceNotebooks)
+                {
+                    var newNotebook = new Notebook
+                    {
+                        ProjectID = newProject.ProjectID,
+                        Project = newProject,
+
+                        Name = oldNotebook.Name,
+                        Directory = oldNotebook.Directory,
+                        Extension = oldNotebook.Extension,
+
+                        Container = "notebook-" + newProject.Name.ToLower(),
+                        Route = user.UserName + "/" + newProject.Name,
+
+                        Uri = oldNotebook.Uri,
+                        Size = oldNotebook.Size,
+
+                        DateCreated = DateTimeOffset.UtcNow,
+                        LastModified = DateTimeOffset.UtcNow,
+
+                        type = oldNotebook.type
+                    };
+
+                    await _dbContext.Notebook.AddAsync(newNotebook);
+                    await _dbContext.SaveChangesAsync();
+
+                    // Copy versions
+                    if (oldNotebook.NotebookContents != null && oldNotebook.NotebookContents.Count > 0)
+                    {
+                        foreach (var oldContent in oldNotebook.NotebookContents)
+                        {
+                            await _dbContext.NotebookContent.AddAsync(new NotebookContent
+                            {
+                                NotebookID = newNotebook.NotebookID,
+                                Version = oldContent.Version,
+                                Content = oldContent.Content,
+                                Author = oldContent.Author,
+                                Size = oldContent.Size,
+                                DateCreated = oldContent.DateCreated
+                            });
+                        }
+                    }
+
+                    // Copy observable dataset links
+                    if (oldNotebook.observableNotebookDatasets != null && oldNotebook.observableNotebookDatasets.Count > 0)
+                    {
+                        foreach (var oldObs in oldNotebook.observableNotebookDatasets)
+                        {
+                            await _dbContext.ObservableNotebookDataset.AddAsync(new ObservableNotebookDataset
+                            {
+                                NotebookID = newNotebook.NotebookID,
+                                datasetName = oldObs.datasetName,
+                                datasetURL = oldObs.datasetURL,
+                                BlobFileID = oldObs.BlobFileID
+                            });
+                        }
+                    }
+
+                    await _dbContext.SaveChangesAsync();
                 }
-            );
-            await _dbContext.SaveChangesAsync();
 
-            // Return Ok Request
-            return Ok(new
-            {
-                result = newProject,
-                message = "Project Successfully Forked"
-            });
+                await tx.CommitAsync();
 
+                return Ok(new
+                {
+                    result = newProject,
+                    message = "Project Successfully Forked"
+                });
+            }
+            catch (Exception ex)
+            {
+                await tx.RollbackAsync();
+                Console.WriteLine(ex);
+                return BadRequest(new
+                {
+                    message = "Fork failed",
+                    detail = ex.Message
+                });
+            }
         }
 
         /*