diff --git a/src/interface/package-lock.json b/src/interface/package-lock.json
index 07eaf9808..7e9c38f61 100644
--- a/src/interface/package-lock.json
+++ b/src/interface/package-lock.json
@@ -75,6 +75,7 @@
         "@types/jasmine": "~4.0.0",
         "@types/leaflet": "^1.9.0",
         "@types/leaflet-draw": "^1.0.4",
+        "@types/leaflet.vectorgrid": "^1.3.5",
         "@types/shpjs": "^3.4.2",
         "@typescript-eslint/eslint-plugin": "7.2.0",
         "@typescript-eslint/parser": "7.2.0",
@@ -8376,6 +8377,17 @@
         "@types/leaflet": "*"
       }
     },
+    "node_modules/@types/leaflet.vectorgrid": {
+      "version": "1.3.5",
+      "resolved": "https://registry.npmjs.org/@types/leaflet.vectorgrid/-/leaflet.vectorgrid-1.3.5.tgz",
+      "integrity": "sha512-LtHmagxhE4kGzQQ+OB3giNPW8YM6t0WPrdsThe7AAqiUQo3gFTcSWGOv7KvPn3VaGIPoH/8G1s8Twka56dnE4w==",
+      "dev": true,
+      "dependencies": {
+        "@types/geojson": "*",
+        "@types/geojson-vt": "*",
+        "@types/leaflet": "*"
+      }
+    },
     "node_modules/@types/lodash": {
       "version": "4.17.0",
       "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.0.tgz",
@@ -31351,6 +31363,17 @@
         "@types/leaflet": "*"
       }
     },
+    "@types/leaflet.vectorgrid": {
+      "version": "1.3.5",
+      "resolved": "https://registry.npmjs.org/@types/leaflet.vectorgrid/-/leaflet.vectorgrid-1.3.5.tgz",
+      "integrity": "sha512-LtHmagxhE4kGzQQ+OB3giNPW8YM6t0WPrdsThe7AAqiUQo3gFTcSWGOv7KvPn3VaGIPoH/8G1s8Twka56dnE4w==",
+      "dev": true,
+      "requires": {
+        "@types/geojson": "*",
+        "@types/geojson-vt": "*",
+        "@types/leaflet": "*"
+      }
+    },
     "@types/lodash": {
       "version": "4.17.0",
       "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.0.tgz",
diff --git a/src/interface/package.json b/src/interface/package.json
index d7cff6708..53e40ecaf 100644
--- a/src/interface/package.json
+++ b/src/interface/package.json
@@ -87,6 +87,7 @@
     "@types/jasmine": "~4.0.0",
     "@types/leaflet": "^1.9.0",
     "@types/leaflet-draw": "^1.0.4",
+    "@types/leaflet.vectorgrid": "^1.3.5",
     "@types/shpjs": "^3.4.2",
     "@typescript-eslint/eslint-plugin": "7.2.0",
     "@typescript-eslint/parser": "7.2.0",
diff --git a/src/interface/src/styleguide/notes-sidebar/notes-sidebar.component.ts b/src/interface/src/styleguide/notes-sidebar/notes-sidebar.component.ts
index e513c513f..6a6ee345b 100644
--- a/src/interface/src/styleguide/notes-sidebar/notes-sidebar.component.ts
+++ b/src/interface/src/styleguide/notes-sidebar/notes-sidebar.component.ts
@@ -35,6 +35,7 @@ export class NotesSidebarComponent implements OnInit {
     private snackbar: MatSnackBar
   ) {}
   @Input() showHeader = false;
+  @Input() notes: Note[] = [];
   @Input() notesModel!: NotesModelName;
   @Input() objectId!: number;
   @Input() noNotesTitleText = 'No Notes Yet';
@@ -42,7 +43,6 @@ export class NotesSidebarComponent implements OnInit {
     'Start adding notes to help your team learn more about this section.';
 
   @Output() handleNoteResponse = new EventEmitter<boolean>();
-  notes: Note[] = [];
   note = '';
 
   ngOnInit() {
@@ -63,6 +63,8 @@ export class NotesSidebarComponent implements OnInit {
 
   saving = false;
 
+  // TODO: decouple the notesService from this component?
+
   openDeleteNoteDialog(note: Note) {
     const dialogRef = this.dialog.open(DeleteNoteDialogComponent, {});
     dialogRef
diff --git a/src/interface/src/styleguide/notes-sidebar/notes-sidebar.stories.ts b/src/interface/src/styleguide/notes-sidebar/notes-sidebar.stories.ts
new file mode 100644
index 000000000..d90f7f66e
--- /dev/null
+++ b/src/interface/src/styleguide/notes-sidebar/notes-sidebar.stories.ts
@@ -0,0 +1,106 @@
+import {
+  Meta,
+  StoryObj,
+  moduleMetadata,
+  argsToTemplate,
+} from '@storybook/angular';
+import { NotesSidebarComponent } from './notes-sidebar.component';
+import {
+  MatDialogModule,
+  MAT_DIALOG_DATA,
+  MatDialogRef,
+} from '@angular/material/dialog';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { HttpClientModule } from '@angular/common/http'; // Add this import
+import { BaseNotesService, ProjectAreaNotesService } from '@services';
+
+const meta: Meta<NotesSidebarComponent> = {
+  title: 'Components/Notes Sidebar',
+  component: NotesSidebarComponent,
+  tags: ['autodocs'],
+  decorators: [
+    moduleMetadata({
+      imports: [
+        HttpClientModule,
+        MatDialogModule,
+        BrowserAnimationsModule,
+        MatProgressSpinnerModule,
+        NotesSidebarComponent,
+        MatSnackBarModule,
+      ],
+      providers: [
+        { provide: MAT_DIALOG_DATA, useValue: {} },
+        { provide: MatDialogRef, useValue: {} },
+        { provide: BaseNotesService, useValue: ProjectAreaNotesService },
+      ],
+    }),
+  ],
+  render: ({ ...args }) => ({
+    props: args,
+    template: `<div style="width:300px;border:1px black solid;"><sg-notes-sidebar ${argsToTemplate(args)}>
+          </sg-notes-sidebar></div>`,
+  }),
+};
+
+export default meta;
+
+const exampleNotes = [
+  {
+    id: 1,
+    user_id: 10,
+    user_name: 'Larry Larrington',
+    content: 'Here is some content',
+    created_at: '2024-01-01',
+    can_delete: true,
+  },
+  {
+    id: 2,
+    user_id: 11,
+    user_name: 'Someone Else',
+    content: 'Here is some content',
+    created_at: '2024-02-01',
+    can_delete: false,
+  },
+
+  {
+    id: 3,
+    user_id: 10,
+    user_name: 'Larry Larrington',
+    content:
+      'Here is some additional content.' +
+      ' Here is some additional content. Here is some additional content. ' +
+      'Here is some additional content. Here is some additional content. ' +
+      'Here is some additional content. ',
+    created_at: '2024-05-01',
+    can_delete: true,
+  },
+];
+
+type Story = StoryObj<NotesSidebarComponent>;
+
+export const Default: Story = {
+  args: {
+    showHeader: false,
+    notesModel: 'planning_area',
+    objectId: 1,
+    notes: exampleNotes,
+    noNotesTitleText: 'No Notes Yet',
+    noNotesDetailText:
+      'Start adding notes to help your team learn more about this section.',
+  },
+};
+
+export const NoNotes: Story = {
+  args: {
+    showHeader: false,
+    notesModel: 'planning_area',
+    objectId: 1,
+    notes: [],
+    noNotesTitleText: 'No Notes Yet',
+    noNotesDetailText:
+      'Start adding notes to help your team learn more about this section.',
+  },
+};