diff --git a/app/page.module.css b/app/page.module.css
index be26250..20c3620 100644
--- a/app/page.module.css
+++ b/app/page.module.css
@@ -14,13 +14,3 @@
   src: url(https://fonts.gstatic.com/s/firacode/v22/uU9eCBsR6Z2vfE9aq3bL0fxyUs4tcw4W_D1sJVD7Ng.woff2) format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
-
-.main {
-  height: 100vh;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  align-items: center;
-  padding: 20px;
-  min-height: 100vh;
-}
diff --git a/app/page.tsx b/app/page.tsx
index ded3c6d..b94d52a 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -11,7 +11,7 @@ import ReactFlow, {
 import { useFilePicker } from "use-file-picker";
 import { transform, getNodesEdges } from "./lib";
 import DTNode from "./DTNode";
-import styles from "./page.module.css"
+import "./page.module.css"
 
 const nodeTypes = {
   custom: DTNode
@@ -80,23 +80,64 @@ export default function Home() {
   const pending = loading || inProgress;
 
   return (
-    <main className={styles.main}>
-      <h1>Device Tree Visualizer</h1>
-      <div style={{ width: 300, display: "flex", justifyContent: "space-between" }}>
-        File: {fileName}
-        <button disabled={pending} onClick={openFilePicker}>
-          {pending ? "..." : "load DTB"}
-        </button>
-      </div>
-      <div>
-        nodes: {nodes.length}
-      </div>
-      <div style={{ width: "100vw", height: "90%" }}>
+    <div className="layout">
+      <header>
+        <Image
+          alt="Device Tree logo"
+          src="/dtvis/devicetree-logo.svg"
+          width={50}
+          height={50}
+          style={{ background: "#b0b0b0" }}
+        />
+        <h1>dtvis</h1>
+        <menu>
+          <button disabled={pending} onClick={openFilePicker}>
+            {pending ? "..." : "Load DTB"}
+          </button>
+        </menu>
+        {fileName && <span>File: {fileName}</span>}
+        {nodes.length > 0 && <span>Nodes: {nodes.length}</span>}
+      </header>
+      <main>
         <ReactFlow
           {...{ nodes, edges, nodeTypes, onNodesChange, onEdgesChange, onConnect }}>
           <Controls />
         </ReactFlow>
-      </div>
-    </main>
+      </main>
+      <style jsx>{`
+        .layout {
+          height: 100vh;
+          display: flex;
+          flex-direction: column;
+          justify-content: space-between;
+          align-items: center;
+          padding: 20px;
+          min-height: 100vh;
+        }
+        header {
+          width: 100%;
+          height: 10vh;
+          display: flex;
+          justify-content: flex-start;
+          align-items: center;
+          gap: 15px;
+          padding: 0 20px;
+        }
+        button {
+          background-color: #101212;
+          border-radius: 7px;
+          border-width: 3px;
+          padding: 5px 25px;
+          display: flex;
+          align-items: center;
+          gap: 20px;
+          font-size: 22px;
+        }
+        main {
+          width: 100vw;
+          height: 90vh;
+        }
+      `}</style>
+    </div>
   )
 }
diff --git a/public/devicetree-logo.svg b/public/devicetree-logo.svg
new file mode 100644
index 0000000..56f30d1
--- /dev/null
+++ b/public/devicetree-logo.svg
@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 251.46 250.81">
+  <g transform="translate(-52.713 -357.557)">
+    <path fill="none" stroke="#000" stroke-width="4.5" d="M157.4 376.82l-.08-16.9M72.4 545.25l-17.3.07M301.57 545.48l-17.32.08M301.9 503.6l-17.2.07M301.7 461.87l-16.9.08M301.5 420.13l-16.92.08M240.73 376.88l-.08-16.9M198.85 376.82l-.08-16.9M115.63 377.2l-.07-17.36M71.9 420.36l-16.9.07M72.12 462.1l-16.9.07M72.3 503.82l-17.2.07M115.48 605.77l-.07-16.9M198.92 605.94l-.07-16.9M240.73 605.9l-.08-16.92M157.4 606.1l-.08-16.92M115.74 568.2H240.4" stroke-linecap="round"/>
+    <path fill="none" stroke="#000" stroke-width="4.4000001" d="M157.03 567.96v-36.2l-27.8-15.68"/>
+    <path fill="none" stroke="#000" stroke-width="5" d="M177.48 488.73l-33.36-19.04"/>
+    <path fill="none" stroke="#000" stroke-width="4.49999952" d="M178.48 566.8V450.97"/>
+    <path fill="none" stroke="#000" stroke-width="4.4000001" d="M199.03 567v-76.87l26.86-14.75"/>
+    <path fill="none" stroke="#000" stroke-width="4.7" d="M79.95 379.12h198.1c2.8 0 4.4 1.57 4.4 3.87l.06 200.16c0 2.13-2.03 3.66-4.38 3.66H81.98c-7.14 0-7.23 0-7.23-6.4V385.43c0-4.6 1.08-6.32 5.2-6.32z" stroke-linejoin="round"/>
+    <circle cx="128.28833" cy="458.41843" r="20.60775" fill="#8b63a9"/>
+    <circle cx="178.59291" cy="431.41653" r="20.60775" fill="#0cb2dd"/>
+    <circle cx="244.23465" cy="467.79355" r="20.60775" fill="#f48414"/>
+    <circle cx="112.6982" cy="507.95236" r="20.60775" fill="#009641"/>
+  </g>
+</svg>