3 files changed, 69 insertions, 1 deletions
diff --git a/frontend/src/styles/dashboard.css b/frontend/src/styles/dashboard.css
new file mode 100644
index 0000000..c24deae
--- /dev/null
+++ b/frontend/src/styles/dashboard.css
@@ -0,0 +1,11 @@
+.dashboard-page {
+    position: relative;
+    width: 100vw;
+    height: 100vh;
+    overflow: hidden;
+}
+
+#map {
+    position: absolute;
+    inset: 0; /* = top,right,bottom,left: 0 */
+}
diff --git a/frontend/src/styles/header.css b/frontend/src/styles/header.css
new file mode 100644
index 0000000..42c429f
--- /dev/null
+++ b/frontend/src/styles/header.css
@@ -0,0 +1,57 @@
+.header {
+    background: var(--card-bg);
+    backdrop-filter: blur(8px);
+    border-radius: var(--border-radius);
+    box-shadow: var(--box-shadow-dark);
+
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    height: 60px;
+    padding: 8px 16px;
+
+    position: absolute;
+    top: 16px;
+    left: 16px;
+    right: 16px;
+
+    max-width: 960px;
+    margin: 0 auto;
+    z-index: 10;
+}
+
+.header-user {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 20px;
+}
+
+.header-user-info {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 18px;
+
+    & > p {
+        font-weight: bold;
+    }
+}
+
+/* Mobile View */
+@media screen and (max-width: 768px) {
+    .header {
+        flex-direction: column;
+        height: fit-content;
+        max-width: 360px;
+    }
+
+    .header-user {
+        gap: var(--gap-normal);
+    }
+
+    .header-user-info {
+        gap: var(--gap-small);
+    }
+}
diff --git a/frontend/src/styles/index.css b/frontend/src/styles/index.css
index 23807a5..dcc2590 100644
--- a/frontend/src/styles/index.css
+++ b/frontend/src/styles/index.css
@@ -14,8 +14,8 @@
     --color-stop: #ed6c02;
     --color-stop-dark: #e65100;
     /* Spacing vars */
-    --gap-small: 8px;
     --gap-normal: 12px;
+    --gap-small: 8px;
     /* Text vars */
     --text-small: 0.9rem;