diff --git a/src/components/FluxNote.vue b/src/components/FluxNote.vue
index 44e89aa..79f2ce9 100644
--- a/src/components/FluxNote.vue
+++ b/src/components/FluxNote.vue
@@ -212,16 +212,14 @@ $header-height: 40px;
     flex-direction: column;
     overflow-y: auto;
 
-    &:not(:first-child) {
-      border-top: 1px solid rgba(18, 19, 58, 0.2);
-    }
-
     .title {
       text-align: left;
     }
   }
 
   @media screen and (min-width: 769px) {
+    background-color: var(--note-canvas-bg);
+
     .repo-title-breadcrumb {
       padding: 0.5rem 1rem 0;
       transform-origin: 0 0;
@@ -238,6 +236,11 @@ $header-height: 40px;
     .note {
       min-width: var(--note-width);
       max-width: var(--note-width);
+      background-color: var(--color-base-100);
+    }
+
+    .readme {
+      box-shadow: var(--note-sheet-shadow);
     }
   }
 }
diff --git a/src/styles/app.css b/src/styles/app.css
index 3d5c8ff..22c5ceb 100644
--- a/src/styles/app.css
+++ b/src/styles/app.css
@@ -13,6 +13,8 @@
   --light-link: lighten(#445fb9, 45%);
   --background-color: #ffffff;
   --note-width: 500px;
+  --note-canvas-bg: color-mix(in oklch, var(--color-base-100) 60%, var(--color-base-200));
+  --note-sheet-shadow: 1px 0 8px rgb(0 0 0 / 6%);
   --color-contrast-content: var(--color-success);
   --notyf-margin: 0.5rem;
 }
diff --git a/src/views/PublicNoteView.vue b/src/views/PublicNoteView.vue
index f621a82..b92dd6d 100644
--- a/src/views/PublicNoteView.vue
+++ b/src/views/PublicNoteView.vue
@@ -248,6 +248,8 @@ watch(
   }
 
   @media screen and (min-width: 769px) {
+    background-color: var(--note-canvas-bg);
+
     .repo-title-breadcrumb {
       padding: 0.5rem 1rem 0;
       transform-origin: 0 0;
@@ -265,6 +267,11 @@ watch(
     .note {
       min-width: var(--note-width);
       max-width: var(--note-width);
+      background-color: var(--color-base-100);
+    }
+
+    .article {
+      box-shadow: var(--note-sheet-shadow);
     }
   }