diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index b4a52ef..90b8be2 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -5,14 +5,13 @@ import { injectDispatch, injectSelector } from "@reduxjs/angular-redux";
 import { Event, listen } from "@tauri-apps/api/event";
 import { setPosition, musicSync, Duration } from "./store/tauri";
 import { AppDispatch, RootState } from "./store";
-import { UnderTitlebar } from "./components/under-titlebar.component";
 import { Metadata } from "./injectables/metadata";
 import { injectQuery } from "@tanstack/angular-query-experimental";
 import { getMenu } from "./utils/menu";
 
 @Component({
   selector: "app-root",
-  imports: [RouterOutlet, UnderTitlebar],
+  imports: [RouterOutlet],
   providers: [Metadata],
   template: `
     <router-outlet></router-outlet>
diff --git a/src/app/components/light-glass-outlined.ts b/src/app/components/light-glass-outlined.ts
new file mode 100644
index 0000000..af2b987
--- /dev/null
+++ b/src/app/components/light-glass-outlined.ts
@@ -0,0 +1,37 @@
+import { Component } from "@angular/core";
+
+@Component({
+  selector: "light-glass-outlined",
+  template: `
+    <div class="innerContentsContainer">
+      <ng-content></ng-content>
+    </div>
+  `,
+  styles: [
+    `
+      :host {
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        padding: 2px;
+        border-radius: 48px;
+        background: linear-gradient(
+          160deg,
+          rgba(255, 255, 255, 0.2) 0%,
+          rgba(255, 255, 255, 0) 41%,
+          rgba(255, 255, 255, 0) 57%,
+          rgba(255, 255, 255, 0.1) 100%
+        );
+      }
+
+      .innerContentsContainer {
+        flex-grow: 1;
+        height: 1px;
+        /* rgba(255,255,255,0.03) on top of #060606 */
+        background: #131316;
+        border-radius: calc(48px - 2px);
+      }
+    `,
+  ],
+})
+export class LightGlassOutlined {}
diff --git a/src/app/views/settings.component.ts b/src/app/views/settings.component.ts
index 468837b..51ff7d1 100644
--- a/src/app/views/settings.component.ts
+++ b/src/app/views/settings.component.ts
@@ -1,18 +1,43 @@
 import { Component } from "@angular/core";
+import { LightGlassOutlined } from "../components/light-glass-outlined";
 
 @Component({
   selector: "app-settings",
   template: `
     <div class="container">
-      <p>This is a placeholder for Moonsound settings</p>
+      <light-glass-outlined>
+        <div class="innerContents">
+          <p>This is a placeholder for Moonsound settings</p>
+        </div>
+      </light-glass-outlined>
     </div>
   `,
   styles: [
     `
       .container {
-        color: black;
+        min-height: 100vh;
+        /* TODO: Change to CSS variable */
+        background: #060606;
+        display: flex;
+        flex-direction: column;
+        box-sizing: border-box;
+        padding: 2rem;
+      }
+
+      .container > light-glass-outlined {
+        flex-grow: 1;
+        height: 1px;
+      }
+
+      .innerContents {
+        padding: 2rem;
+      }
+
+      p {
+        margin: 0;
       }
     `,
   ],
+  imports: [LightGlassOutlined],
 })
 export class Settings {}