diff --git a/assets/navBarBtn.png b/assets/navBarBtn.png
new file mode 100644
index 0000000..351b968
Binary files /dev/null and b/assets/navBarBtn.png differ
diff --git a/globalStyle.css b/globalStyle.css
new file mode 100644
index 0000000..42b7045
--- /dev/null
+++ b/globalStyle.css
@@ -0,0 +1,7 @@
+:root {
+  --navBar_Inner: #43608D;
+  --navBar_Border: #2F3E56;
+  --navBarBtn_Inner: #474747;
+  --navBarBtn_Border: #232323;
+  --pxDensity: 1;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..70b1d98
--- /dev/null
+++ b/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Byte Dice</title>
+
+  <link rel="stylesheet" href="navBar.css">
+  <link rel="stylesheet" href="/globalStyle.css">
+</head>
+
+<body style="background-color: #323232; color: #ffffff;">
+  <p>asdasdasdasd</p>
+
+  <ul class="navBar">
+    <li>
+      <button class="navBtn">
+        <img class="navBtnImg" draggable="false" src="/assets/navBarBtn.png">
+      </button>
+    </li>
+    <li>
+      <button class="navBtn">
+        <img class="navBtnImg" draggable="false" src="/assets/navBarBtn.png">
+      </button>
+    </li>
+  </ul>
+
+  <script src="/pxDensity.js"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/navBar.css b/navBar.css
new file mode 100644
index 0000000..4cad375
--- /dev/null
+++ b/navBar.css
@@ -0,0 +1,41 @@
+li {
+  list-style-type: none;
+  display: inline;
+  margin: calc(1px * var(--pxDensity));
+}
+ul {
+  padding: calc(1px * var(--pxDensity)) 0px;
+}
+
+.navBar {
+  background-color: var(--navBar_Inner);
+  width: calc(128px * var(--pxDensity));
+  box-shadow: calc(1px * var(--pxDensity)) 0px var(--navBar_Border),
+              calc(-1px * var(--pxDensity)) 0px var(--navBar_Border),
+              0px calc(1px * var(--pxDensity)) var(--navBar_Border),
+              0px calc(-1px * var(--pxDensity)) var(--navBar_Border),
+              0px calc(2px * var(--pxDensity)) 0px calc(1px * var(--pxDensity)) rgba(0, 0, 0, 0.5);
+}
+.navBtn {
+  background-color: transparent;
+  width: calc(12px * var(--pxDensity));
+  height: calc(12px * var(--pxDensity));
+  display: inline-block;
+  padding: 0%;
+  border: none;
+}
+.navBtnImg {
+  width: 100%;
+  height: 100%;
+  image-rendering: pixelated;
+  margin: 0%;
+  filter: drop-shadow(0px calc(1px * var(--pxDensity)) rgba(0, 0, 0, 0.5));
+}
+.navBtnImg:hover {
+  filter: brightness(1.35)  drop-shadow(0px calc(1px * var(--pxDensity)) rgba(0, 0, 0, 0.5));
+  cursor: pointer;
+}
+.navBtnImg:active {
+  filter: brightness(0.75);
+  transform: translateY(calc(1px * var(--pxDensity)));
+}
\ No newline at end of file
diff --git a/pxDensity.js b/pxDensity.js
new file mode 100644
index 0000000..700e09d
--- /dev/null
+++ b/pxDensity.js
@@ -0,0 +1,8 @@
+document.addEventListener('DOMContentLoaded', function() {
+  let densityWidth =  document.documentElement.clientWidth / 256
+  let densityHeight = document.documentElement.clientHeight / 164
+
+
+  document.documentElement.style.setProperty("--pxDensity", Math.max(densityWidth, densityHeight))
+  console.log(getComputedStyle(document.body).getPropertyValue("--pxDensity"))
+}, false)
\ No newline at end of file
