diff --git a/frontends/nextjs/src/components/ui/atoms/display/Avatar.module.scss b/frontends/nextjs/src/components/ui/atoms/display/Avatar.module.scss
new file mode 100644
index 000000000..45766cb50
--- /dev/null
+++ b/frontends/nextjs/src/components/ui/atoms/display/Avatar.module.scss
@@ -0,0 +1,26 @@
+.avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--action-hover, #f5f5f5);
+  color: var(--text-primary, #333);
+  font-weight: 500;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
+
+// Dark mode support
+[data-theme='dark'] {
+  .avatar {
+    background-color: var(--action-hover-dark, #2c2c2c);
+    color: var(--text-primary-dark, #fff);
+  }
+}
diff --git a/frontends/nextjs/src/components/ui/atoms/display/Badge.module.scss b/frontends/nextjs/src/components/ui/atoms/display/Badge.module.scss
new file mode 100644
index 000000000..31fd5fdaf
--- /dev/null
+++ b/frontends/nextjs/src/components/ui/atoms/display/Badge.module.scss
@@ -0,0 +1,39 @@
+.badge {
+  height: auto;
+  padding: 2px 6px;
+  font-size: 0.75rem;
+  font-weight: 500;
+  border-radius: 9999px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.default {
+  background-color: var(--primary-main, #1976d2);
+  color: var(--primary-contrast-text, #fff);
+}
+
+.secondary {
+  background-color: var(--secondary-main, #9c27b0);
+  color: var(--secondary-contrast-text, #fff);
+}
+
+.destructive {
+  background-color: var(--error-main, #d32f2f);
+  color: var(--error-contrast-text, #fff);
+}
+
+.outline {
+  background-color: transparent;
+  border: 1px solid var(--border-color, #e0e0e0);
+  color: var(--text-primary, #333);
+}
+
+// Dark mode support
+[data-theme='dark'] {
+  .outline {
+    border-color: var(--border-color-dark, #424242);
+    color: var(--text-primary-dark, #fff);
+  }
+}
diff --git a/frontends/nextjs/src/components/ui/atoms/display/Label.module.scss b/frontends/nextjs/src/components/ui/atoms/display/Label.module.scss
new file mode 100644
index 000000000..70b679581
--- /dev/null
+++ b/frontends/nextjs/src/components/ui/atoms/display/Label.module.scss
@@ -0,0 +1,20 @@
+.label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--text-primary, #333);
+
+  &.disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}
+
+// Dark mode support
+[data-theme='dark'] {
+  .label {
+    color: var(--text-primary-dark, #fff);
+  }
+}
diff --git a/frontends/nextjs/src/components/ui/atoms/feedback/Separator.module.scss b/frontends/nextjs/src/components/ui/atoms/feedback/Separator.module.scss
new file mode 100644
index 000000000..7b2eebc64
--- /dev/null
+++ b/frontends/nextjs/src/components/ui/atoms/feedback/Separator.module.scss
@@ -0,0 +1,23 @@
+.separator {
+  border: none;
+  background-color: var(--divider, #e0e0e0);
+}
+
+.horizontal {
+  width: 100%;
+  height: 1px;
+  margin: 16px 0;
+}
+
+.vertical {
+  width: 1px;
+  height: 100%;
+  margin: 0 16px;
+}
+
+// Dark mode support
+[data-theme='dark'] {
+  .separator {
+    background-color: var(--divider-dark, #424242);
+  }
+}
diff --git a/frontends/nextjs/src/components/ui/atoms/feedback/Skeleton.module.scss b/frontends/nextjs/src/components/ui/atoms/feedback/Skeleton.module.scss
new file mode 100644
index 000000000..264426bf5
--- /dev/null
+++ b/frontends/nextjs/src/components/ui/atoms/feedback/Skeleton.module.scss
@@ -0,0 +1,11 @@
+.skeleton {
+  background-color: var(--action-hover, rgba(0, 0, 0, 0.08));
+  border-radius: 4px;
+}
+
+// Dark mode support
+[data-theme='dark'] {
+  .skeleton {
+    background-color: var(--action-hover-dark, rgba(255, 255, 255, 0.08));
+  }
+}
diff --git a/frontends/nextjs/src/components/ui/atoms/inputs/Input.module.scss b/frontends/nextjs/src/components/ui/atoms/inputs/Input.module.scss
new file mode 100644
index 000000000..8cc3b808b
--- /dev/null
+++ b/frontends/nextjs/src/components/ui/atoms/inputs/Input.module.scss
@@ -0,0 +1,69 @@
+.input {
+  width: 100%;
+
+  :global(.fakemui-input-base) {
+    padding: 8px 12px;
+    font-size: 0.875rem;
+    border: 1px solid var(--border-color, #e0e0e0);
+    border-radius: 4px;
+    background-color: var(--background-paper, #fff);
+    transition: border-color 0.2s, box-shadow 0.2s;
+  }
+
+  :global(.fakemui-input-base:hover) {
+    border-color: var(--text-primary, #333);
+  }
+
+  :global(.fakemui-input-base-input:focus) {
+    outline: none;
+  }
+
+  :global(.fakemui-input-base:focus-within) {
+    border-color: var(--primary-main, #1976d2);
+    box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.15);
+  }
+
+  :global(.fakemui-input-base-disabled) {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  :global(.fakemui-input-base-input) {
+    padding: 0;
+    border: none;
+    background: transparent;
+    font-family: inherit;
+    font-size: inherit;
+    width: 100%;
+  }
+
+  &.error {
+    :global(.fakemui-input-base) {
+      border-color: var(--error-main, #d32f2f);
+    }
+
+    :global(.fakemui-input-base:hover) {
+      border-color: var(--error-main, #d32f2f);
+    }
+
+    :global(.fakemui-input-base:focus-within) {
+      border-color: var(--error-main, #d32f2f);
+      box-shadow: 0 0 0 2px rgba(211, 47, 47, 0.15);
+    }
+  }
+}
+
+// Dark mode support
+[data-theme='dark'] {
+  .input {
+    :global(.fakemui-input-base) {
+      background-color: var(--background-paper-dark, #1e1e1e);
+      border-color: var(--border-color-dark, #424242);
+      color: var(--text-primary-dark, #fff);
+    }
+
+    :global(.fakemui-input-base:hover) {
+      border-color: var(--text-primary-dark, #fff);
+    }
+  }
+}
diff --git a/frontends/nextjs/src/components/ui/atoms/inputs/Textarea.module.scss b/frontends/nextjs/src/components/ui/atoms/inputs/Textarea.module.scss
new file mode 100644
index 000000000..8c04e363f
--- /dev/null
+++ b/frontends/nextjs/src/components/ui/atoms/inputs/Textarea.module.scss
@@ -0,0 +1,52 @@
+.textarea {
+  width: 100%;
+  padding: 8px 12px;
+  font-size: 0.875rem;
+  border: 1px solid var(--border-color, #e0e0e0);
+  border-radius: 4px;
+  background-color: var(--background-paper, #fff);
+  font-family: inherit;
+  resize: vertical;
+  transition: border-color 0.2s, box-shadow 0.2s;
+
+  &:hover {
+    border-color: var(--text-primary, #333);
+  }
+
+  &:focus {
+    outline: none;
+    border-color: var(--primary-main, #1976d2);
+    box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.15);
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  &.error {
+    border-color: var(--error-main, #d32f2f);
+
+    &:hover {
+      border-color: var(--error-main, #d32f2f);
+    }
+
+    &:focus {
+      border-color: var(--error-main, #d32f2f);
+      box-shadow: 0 0 0 2px rgba(211, 47, 47, 0.15);
+    }
+  }
+}
+
+// Dark mode support
+[data-theme='dark'] {
+  .textarea {
+    background-color: var(--background-paper-dark, #1e1e1e);
+    border-color: var(--border-color-dark, #424242);
+    color: var(--text-primary-dark, #fff);
+
+    &:hover {
+      border-color: var(--text-primary-dark, #fff);
+    }
+  }
+}