diff --git a/frontend/src/css/_theme-colors.scss b/frontend/src/css/_theme-colors.scss
new file mode 100644
index 0000000..9268301
--- /dev/null
+++ b/frontend/src/css/_theme-colors.scss
@@ -0,0 +1,84 @@
+$theme-light: (
+  background: #f8f9fa,
+  surface: #f8f9fa,
+  surface-bright: #ffffff,
+  surface-container: #edeeef,
+  surface-container-low: #f3f4f5,
+  surface-container-lowest: #ffffff,
+  surface-container-high: #e4e6e7,
+  surface-container-highest: #dde0e1,
+  primary: #006a6a,
+  primary-container: #2ee5e5,
+  primary-dim: #17dcdc,
+  on-primary: #ffffff,
+  secondary: #4a6363,
+  secondary-container: #cde8e7,
+  on-secondary-container: #102020,
+  tertiary: #2f628b,
+  tertiary-container: #d1e4ff,
+  on-tertiary-container: #001d33,
+  error: #ba1a1a,
+  error-container: #ffdad6,
+  on-error-container: #410002,
+  on-background: #191c1d,
+  on-surface: #191c1d,
+  on-surface-variant: #434748,
+  outline: #737878,
+  outline-variant: #bacac9,
+  scrim: rgba(#000000, 0.12),
+);
+
+$theme-dark: (
+  background: #0e0e0f,
+  surface: #0e0e0f,
+  surface-bright: #2c2c2d,
+  surface-container: #19191b,
+  surface-container-low: #141416,
+  surface-container-lowest: #000000,
+  surface-container-high: #1f1f21,
+  surface-container-highest: #262627,
+  primary: #47f3f3,
+  primary-dim: #2ee5e5,
+  primary-container: #27e2e2,
+  secondary: #d8e3fa,
+  secondary-container: #3e4759,
+  tertiary: #64baff,
+  tertiary-container: #0f4d7a,
+  outline: #8f9091,
+  outline-variant: #484849,
+  error: #ffb4ab,
+  error-container: #9f0519,
+  on-primary: #005858,
+  on-secondary-container: #edf1ff,
+  on-tertiary-container: #d5ecff,
+  on-error-container: #ffa8a3,
+  on-background: #ffffff,
+  on-surface: #ffffff,
+  on-surface-variant: #acaaab,
+  scrim: rgba(#000000, 0.4),
+);
+
+$radius-sm: 0.25rem;
+$radius-md: 0.375rem;
+$radius-lg: 0.5rem;
+$radius-xl: 0.75rem;
+
+$spacing-1: 0.25rem;
+$spacing-2: 0.5rem;
+$spacing-3: 0.75rem;
+$spacing-4: 1rem;
+$spacing-6: 1.5rem;
+$spacing-8: 2rem;
+
+$transition-fast: 150ms ease;
+$transition-base: 180ms ease;
+
+@function theme-token($theme, $token) {
+  @return map-get($theme, $token);
+}
+
+@mixin emit-theme($theme) {
+  @each $token, $value in $theme {
+    --my-#{$token}: #{$value};
+  }
+}
diff --git a/frontend/src/css/app.scss b/frontend/src/css/app.scss
index ecac98f..352b7c0 100644
--- a/frontend/src/css/app.scss
+++ b/frontend/src/css/app.scss
@@ -1 +1,120 @@
+@use './theme-colors.scss' as *;
+
 // app global css in SCSS form
+
+:root {
+  --my-radius-sm: #{$radius-sm};
+  --my-radius-md: #{$radius-md};
+  --my-radius-lg: #{$radius-lg};
+  --my-radius-xl: #{$radius-xl};
+  --my-transition: #{$transition-base};
+}
+
+@mixin meta-label {
+  font-size: 0.625rem;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Manrope', sans-serif;
+}
+
+img {
+  display: block;
+  max-width: 100%;
+}
+
+button,
+input,
+select {
+  font: inherit;
+}
+
+button {
+  border: 0;
+  background: none;
+  color: inherit;
+  cursor: pointer;
+}
+
+.material-symbols-outlined {
+  font-variation-settings:
+    'FILL' 0,
+    'wght' 400,
+    'GRAD' 0,
+    'opsz' 24;
+}
+
+::-webkit-scrollbar {
+  width: 4px;
+  height: 4px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--my-outline-variant);
+  border-radius: 10px;
+}
+
+.no-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+
+.no-scrollbar {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+@keyframes pulse-soft {
+  0%,
+  100% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0.65;
+  }
+}
+
+body.body--light {
+  @include emit-theme($theme-light);
+  background: var(--my-color-bg-surface, var(--my-surface));
+  //   --q-primary: var(--my-color-accent-strong);
+  //   --q-secondary: var(--my-color-info);
+  //   --q-accent: var(--my-color-accent);
+  //   --q-dark: var(--my-color-bg-surface);
+  //   --q-dark-page: var(--my-color-bg-app);
+  //   --q-positive: var(--my-color-accent-strong);
+  //   --q-negative: var(--my-color-danger);
+  //   --q-info: var(--my-color-info);
+  //   --q-warning: #f2c037;
+}
+
+body.body--dark {
+  @include emit-theme($theme-dark);
+  background: var(--my-color-bg-surface, var(--my-surface));
+  //   --q-primary: var(--my-color-accent-strong);
+  //   --q-secondary: var(--my-color-info);
+  //   --q-accent: var(--my-color-accent);
+  //   --q-dark: var(--my-color-bg-surface);
+  //   --q-dark-page: var(--my-color-bg-app);
+  //   --q-positive: var(--my-color-accent-strong);
+  //   --q-negative: var(--my-color-danger);
+  //   --q-info: var(--my-color-info);
+  //   --q-warning: #f2c037;
+}