diff --git a/.envrc b/.envrc
new file mode 100644
index 0000000..a5dbbcb
--- /dev/null
+++ b/.envrc
@@ -0,0 +1 @@
+use flake .
diff --git a/.gitignore b/.gitignore
index 891437f..2783a77 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,7 @@
 /node_modules
 /dist
 .DS_Store
+
+# Nix/NixOS/direnv
+.direnv/
+result
diff --git a/flake.lock b/flake.lock
new file mode 100644
index 0000000..f6b4c77
--- /dev/null
+++ b/flake.lock
@@ -0,0 +1,61 @@
+{
+  "nodes": {
+    "flake-utils": {
+      "inputs": {
+        "systems": "systems"
+      },
+      "locked": {
+        "lastModified": 1710146030,
+        "narHash": "sha256-SZ5L6eA7HJ/nmkzGG7/ISclqe6oZdOZTNoesiInkXPQ=",
+        "owner": "numtide",
+        "repo": "flake-utils",
+        "rev": "b1d9ab70662946ef0850d488da1c9019f3a9752a",
+        "type": "github"
+      },
+      "original": {
+        "owner": "numtide",
+        "repo": "flake-utils",
+        "type": "github"
+      }
+    },
+    "nixpkgs": {
+      "locked": {
+        "lastModified": 1714253743,
+        "narHash": "sha256-mdTQw2XlariysyScCv2tTE45QSU9v/ezLcHJ22f0Nxc=",
+        "owner": "NixOS",
+        "repo": "nixpkgs",
+        "rev": "58a1abdbae3217ca6b702f03d3b35125d88a2994",
+        "type": "github"
+      },
+      "original": {
+        "owner": "NixOS",
+        "ref": "nixos-unstable",
+        "repo": "nixpkgs",
+        "type": "github"
+      }
+    },
+    "root": {
+      "inputs": {
+        "flake-utils": "flake-utils",
+        "nixpkgs": "nixpkgs"
+      }
+    },
+    "systems": {
+      "locked": {
+        "lastModified": 1681028828,
+        "narHash": "sha256-Vy1rq5AaRuLzOxct8nz4T6wlgyUR7zLU309k9mBC768=",
+        "owner": "nix-systems",
+        "repo": "default",
+        "rev": "da67096a3b9bf56a91d16901293e51ba5b49a27e",
+        "type": "github"
+      },
+      "original": {
+        "owner": "nix-systems",
+        "repo": "default",
+        "type": "github"
+      }
+    }
+  },
+  "root": "root",
+  "version": 7
+}
diff --git a/flake.nix b/flake.nix
new file mode 100644
index 0000000..c1fd36b
--- /dev/null
+++ b/flake.nix
@@ -0,0 +1,25 @@
+{
+    inputs = {
+        nixpkgs.url = "github:NixOS/nixpkgs/nixos-unstable";
+        flake-utils.url = "github:numtide/flake-utils";
+    };
+
+    outputs = inputs@{ self, nixpkgs, flake-utils, ... }: 
+    flake-utils.lib.eachDefaultSystem (system:
+    let
+        pkgs = nixpkgs.legacyPackages.${system};
+        nodePkgs = pkgs.nodejs_18.pkgs;
+        nativeBuildInputs = [
+          pkgs.nodejs_18
+        ];
+    in {
+        devShells.default = pkgs.mkShell {
+            inherit nativeBuildInputs;
+
+            shellHook = ''
+              echo "node `node --version`"
+              echo "npm `npm --version`"
+            '';
+        };
+    });
+}
diff --git a/lib/VSCode/navigation/TabBar.js b/lib/VSCode/navigation/TabBar.js
new file mode 100644
index 0000000..c6cd0d5
--- /dev/null
+++ b/lib/VSCode/navigation/TabBar.js
@@ -0,0 +1,31 @@
+import React from 'react';
+
+import pythonIcon from '../images/python.png';
+
+export const TabBar = ({ view }) => {
+  // border-b-0, border-l-0 does not work when border-600 is set
+  const borderStyle = {
+    borderBottom: 'none',
+    borderLeft: 'none',
+    borderWidth: '1px'
+  };
+
+  // TODO: Maybe adjust layout via `display`,
+  // currently hardcoding margin values
+  // use flex and change flex direction to float around the Navbar component?
+  return (
+    <header className="flex mb-8">
+      <div className="flex fixed w-screen background-400 mb-4 lg:ml-80 lg:pt-0 pt-24">
+        <h1
+          className="flex items-center background-700 py-1 px-5 gap-2 text-md text-100 font-400 border-600"
+          style={borderStyle}
+        >
+          <img className="w-4 opacity-80 h-4" src={pythonIcon} />
+          {view}
+        </h1>
+      </div>
+    </header>
+  );
+};
+
+export default TabBar;
diff --git a/lib/VSCode/navigation/index.js b/lib/VSCode/navigation/index.js
index 68283a7..f606f7b 100644
--- a/lib/VSCode/navigation/index.js
+++ b/lib/VSCode/navigation/index.js
@@ -1,3 +1,4 @@
 export * from './Navbar.js';
+export * from './TabBar.js';
 export * from './ThreeLines.js';
 export * from './X.js';
diff --git a/src/App.js b/src/App.js
index e15fb41..8464a0c 100644
--- a/src/App.js
+++ b/src/App.js
@@ -5,20 +5,17 @@ import './App.css';
 import { VSCodeGuide } from './pages/VSCodeGuide';
 
 function App() {
-  const [view, setView] = useState('');
-
-  useEffect(() => {
-    const searchParams = new URLSearchParams(window.location.search);
-
-    if (searchParams.has('view')) {
-      setView(searchParams.get('view'));
-    }
-  }, []);
+  const searchParams = new URLSearchParams(window.location.search);
+  let view = 'home.py';
+  if (searchParams.has('view')) {
+    view = `${searchParams.get('view')}.py`;
+  }
 
   return (
     <div className="app">
       <VSCode.Navbar />
       {/* can route using the view string with more pages */}
+      <VSCode.TabBar view={view} />
       <VSCodeGuide />
     </div>
   );