diff --git a/header.html b/header.html
index 4467776..4c7f23e 100644
--- a/header.html
+++ b/header.html
@@ -1,3 +1,39 @@
-<div class="header">
-    <img src="/assets/SplatNetLogo.png" class="logo" alt="SplatNet Logo" />
-</div>
\ No newline at end of file
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <title>sidebar</title>
+  <link rel="stylesheet" href="style.css" />
+</head>
+<body>
+
+<aside class="splatnet-sidebar">
+
+  <div class="menu-item friend">
+    <img class="bg" src="assets/default.png">
+    <img class="icon" src="assets/svg/ui/ico_friendlist-320cb666486606280b494d4d4427451b2de2c9ad01f3332c286433c6f536db0a.svg">
+    <img class="label" src="assets/svg/text/menu/tx_friendlist-c96280213f50b1bc3c6380aa2bf191f6aaf4fd2da44a111bcbb1495444f23868.svg">
+  </div>
+
+  <div class="menu-item rank">
+    <img class="bg" src="assets/default.png">
+    <img class="icon" src="assets/svg/ui/ico_ranking-c89e570ab4d08a764d285e453423188b1976895b3feacf031e3f231b1506b441.svg">
+    <img class="label" src="assets/svg/text/menu/tx_ranking-8d97ac01b5b5c5b9244c8a4960bce79d33349175d141b06da0d835c71c8298e2.svg">
+  </div>
+
+  <div class="menu-item equipment">
+    <img class="bg" src="assets/default.png">
+    <img class="icon" src="assets/svg/ui/ico_equipment-40943361040a3d62c745a21d1a1fa95794c851f378e11334f2dc6c1cc81b4984.svg">
+    <img class="label" src="assets/svg/text/menu/tx_equipment-8d59c4296bdafb1746824229dc9300ef6b140d4bda0bb0284a662903f20afe45.svg">
+  </div>
+
+  <div class="menu-item stage">
+    <img class="bg" src="assets/default.png">
+    <img class="icon" src="assets/svg/ui/ico_stage-8dbc9e30d2dd9f99f4d1678fe53c4aaada7f7ff43929880a0c9f4e49f148f540.svg">
+    <img class="label" src="assets/svg/text/menu/tx_stageinfo-5e7f00d4a18387e2ee3065e97a475e23002554c3facc1dc6816cdb157c5985c4.svg">
+  </div>
+
+</aside>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..3967894
--- /dev/null
+++ b/style.css
@@ -0,0 +1,57 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  background: black;
+}
+
+.splatnet-sidebar {
+  width: 400px;
+  padding: 30px 20px;
+}
+
+.menu-item {
+  position: relative;
+  height: 72px; 
+  margin-bottom: 20px;
+
+  display: flex;
+  align-items: center;
+  gap: 18px;
+
+  padding-left: 36px; 
+}
+
+.menu-item .bg {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: contain; 
+  object-position: center;
+  z-index: 0;
+}
+
+.menu-item .icon {
+  width: 42px;
+  height: 42px;
+  z-index: 1;
+  object-fit: contain;
+}
+
+.menu-item .label {
+  height: 32px; 
+  z-index: 1;
+}
+
+/* this text renders smaller for some reason, hardcode fix!!!*/
+.menu-item.equipment .label {
+  height: 70px;
+  margin-top: 0px;
+}
+
+.menu-item.friend .label { margin-top: 1px; }
+.menu-item.rank { margin-top: 3px; }
+.menu-item.stage .label { margin-top: 3px; }
\ No newline at end of file
