diff --git a/src/app/components/popup/popup.html b/src/app/components/popup/popup.html
new file mode 100644
index 0000000..37d6140
--- /dev/null
+++ b/src/app/components/popup/popup.html
@@ -0,0 +1,13 @@
+<header class="popup-header">
+  <div class="header-left">
+    <ng-content select="[header-left]"></ng-content>
+  </div>
+
+  <div class="header-right">
+    <button class="material-symbols-outlined icon-24 chevron" (click)="onClose()">close</button>
+  </div>
+</header>
+
+<div class="popup-body">
+  <ng-content></ng-content>
+</div>
diff --git a/src/app/components/popup/popup.scss b/src/app/components/popup/popup.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/components/popup/popup.ts b/src/app/components/popup/popup.ts
new file mode 100644
index 0000000..dff6d64
--- /dev/null
+++ b/src/app/components/popup/popup.ts
@@ -0,0 +1,16 @@
+import { Component, input, model, output } from '@angular/core';
+import { Dropdown } from '../../components/dropdown/dropdown';
+import { Switch } from '../../components/switch/switch';
+
+@Component({
+  selector: 'popup',
+  templateUrl: './popup.html',
+  styleUrl: './popup.scss',
+})
+export class PopupComponent {
+  close = output<void>();
+
+  onClose() {
+    this.close.emit()
+  }
+}
diff --git a/src/app/ui/settings/popup.html b/src/app/ui/settings/popup.html
new file mode 100644
index 0000000..cd30928
--- /dev/null
+++ b/src/app/ui/settings/popup.html
@@ -0,0 +1,16 @@
+<!--<popup (close)="handleClose()">
+  <div header-left class="profile-section">
+    <img [src]="userProfileImg" alt="profile" class="avatar">
+    <span>{{ userName }}</span>
+  </div>
+
+  <div class="settings-content">
+    <label>Language</label>
+    <dropdown [options]="languages"
+              placeholder="Choose Language"></dropdown>
+    <switch></switch>
+
+    <label>Appearance</label>
+
+  </div>
+</popup>-->
diff --git a/src/app/ui/settings/popup.scss b/src/app/ui/settings/popup.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/ui/settings/settings.ts b/src/app/ui/settings/settings.ts
new file mode 100644
index 0000000..71e5b8c
--- /dev/null
+++ b/src/app/ui/settings/settings.ts
@@ -0,0 +1,12 @@
+import { Component, input, model, output } from '@angular/core';
+import { Dropdown } from '../../components/dropdown/dropdown';
+import { Switch } from '../../components/switch/switch';
+import { PopupComponent } from '../../components/popup/popup';
+
+@Component({
+  selector: 'settings-popup',
+  imports: [PopupComponent, Dropdown, Switch],
+  templateUrl: './popup.html',
+  styleUrl: './popup.scss',
+})
+export class SettingsPopup {}
diff --git a/src/styles.scss b/src/styles.scss
index da724a8..56208ef 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -8,5 +8,6 @@ body {
   margin: 0;
 
   overscroll-behavior-x: none;
+  background-color: white;
 }