diff --git a/db/forms.js b/db/forms.js
new file mode 100644
index 0000000..e69de29
diff --git a/server/index.html b/server/index.html
index 17d8b68..eb0c305 100644
--- a/server/index.html
+++ b/server/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>Downloads</title>
+    <title>Parchment</title>
     <link rel="icon" href="Quill.png">
     <style>
         body {
@@ -25,6 +25,6 @@
 </head>
 <body>
     <div class="draggable"></div>
-    <webview src="http://localhost:3020" style="width:100vw; height:100vh;"></webview>
+    <webview src="http://localhost:80" style="width:100vw; height:100vh;"></webview>
 </body>
 </html>
diff --git a/server/index.js b/server/index.js
index 62659f9..673cb4d 100644
--- a/server/index.js
+++ b/server/index.js
@@ -19,13 +19,15 @@ class Server {
     UIPath = path.join(__dirname, '../ui')
 
     registerRoutes(router) {
-        router.get('/', this.index)
         router.get('/*', this.get)
         return router
     }
 
     index = async (req, res) => {
         let filePath = path.join(this.UIPath, "index.html");
+        res.sendFile(filePath)
+        return
+        
         let html = await fs.readFile(filePath, 'utf-8');
 
         let downloads = await getAllDownloadsFiles()
@@ -42,15 +44,16 @@ class Server {
 
     get = async (req, res) => {
         let url = req.url
+        let filePath;
+        if(url.startsWith("/_")) {
+            filePath = path.join(this.UIPath, url);
+        } else if(url.includes("75820185")) {
+            filePath = path.join(this.UIPath, url.split("75820185")[1]);
+        } else {
+            filePath = path.join(this.UIPath, "index.html");
+        }
 
-        let filePath = path.join(this.UIPath, url);
-
-        res.sendFile(filePath, (err) => {
-            if (err) {
-                console.error(`Error serving ${filePath}:`, err);
-                res.status(err.status || 500).send('File not found or error serving file.');
-            }
-        });
+        res.sendFile(filePath);
     }
 
     logRequest(req, res, next) {
@@ -93,7 +96,7 @@ class Server {
 
         const server = http.createServer(app);
         initWebSocket(server);
-        const PORT = 3020;
+        const PORT = 80;
         server.listen(PORT, () => {
             console.log("\n")
             console.log(chalk.yellow("**************Downloads****************"))
diff --git a/ui/_/code/quill.js b/ui/_/code/quill.js
index 8236048..568f78e 100644
--- a/ui/_/code/quill.js
+++ b/ui/_/code/quill.js
@@ -1,6 +1,18 @@
 /*
     Sam Russell
     Captured Sun
+    12.17.25 - [Hyperia] - adding width, height functions. adding "e" to onClick. adding the non-window $$ funcs.
+    12.16.25 - [comalyr] - State
+    11.25.25.1 - Added minHeight and minWidth to be counted as numerical styles
+    11.25.25 - Added onChange for check boxes, added setQuery / onQueryChanged for easy filtering
+    11.24.25 - Fixing onClick because it was reversed, adding event to onHover params
+    11.23.25 - Added onSubmit() event for form submission, added marginHorizontal() and marginVertical()
+    11.20.25 - Added "pct" style unit, added alignVertical and alignHorizontal for flex boxes
+    11.19.25 - Allowing for "auto" values in otherwise numeric styles, adding vmin and vmax units
+    11.17.25.3 - Adding styles() and fixing dynamic function from earlier
+    11.17.25.2 - Fixing onNavigate() and onAppear()
+    11.17.25 - Added dynamic function to have units in style func parameters.
+    11.14.25 - Added onTouch, onTap. Changed style setters to work with Safari. Added center() funcs.
     11.13.25 - changed onFocus() to be a boolean event, added onInput()
     11.9.25 - changed p(innerText) to p(innerHTML), adjusted onNavigate to work for multiple elements and with correct "this" scope
     11.7.25 - changed registerShadow() to register(), changed onClick() to be like onHover()
@@ -20,6 +32,23 @@ history.pushState = function pushState() {
 window.addEventListener('popstate', () => {
     window.dispatchEvent(new Event('navigate'));
 });
+
+window.setQuery = function(key, value) {
+    const url = new URL(window.location.href);
+    const params = url.searchParams;
+
+    if (value === null || value === undefined) {
+        params.delete(key);
+    } else {
+        params.set(key, value);
+    }
+
+    const newUrl = url.toString();
+    history.replaceState(null, "", newUrl);
+    window.dispatchEvent(new Event('query-changed'));
+
+    return newUrl;
+};
   
 window.navigateTo = function(url) {
     window.dispatchEvent(new Event('navigate'));
@@ -41,6 +70,12 @@ window.$ = function(selector, el = document) {
 window.$$ = function(selector, el = document) {
     return Array.from(el.querySelectorAll(selector))
 }
+HTMLElement.prototype.$$ = function(selector) {
+    return window.$$(selector, this)
+}
+DocumentFragment.prototype.$$ = function(selector) {
+    return window.$$(selector, this)
+}
 
 /* CONSOLE */
 
@@ -136,6 +171,7 @@ Object.defineProperty(Array.prototype, 'last', {
 
 window.quill = {
     rendering: [],
+    lastState: null,
 
     render: (el) => {
         if(el instanceof Shadow) {
@@ -166,19 +202,6 @@ window.quill = {
         quill.rendering.pop()
     },
 
-    loadPage: () => {
-        let URL = window.location.pathname
-        if(!window.routes[URL]) {
-            throw new Error("No URL for this route: ", URL)
-        }
-
-        let pageClass = window[routes[URL]]
-        document.title = pageClass.title ?? document.title
-        document.body.innerHTML = ""
-        let page = new pageClass()
-        quill.render(page)
-    },
-
     isStack: (el) => {
         return el.classList.contains("HStack") || el.classList.contains("ZStack") || el.classList.contains("VStack")
     },
@@ -189,6 +212,7 @@ window.Shadow = class extends HTMLElement {
         super()
     }
 }
+
 window.register = (el, tagname) => {
     if (typeof el.prototype.render !== 'function') {
         throw new Error("Element must have a render: " + el.prototype.constructor.name)
@@ -203,6 +227,42 @@ window.register = (el, tagname) => {
 
     window[el.prototype.constructor.name] = function (...params) {
         let instance = new el(...params)
+        if(instance.state) {
+            let proxy = new Proxy(instance.state, {
+                get(target, prop, receiver) {
+                    if (typeof prop === "symbol") { // Ignore internal / symbol accesses
+                        return Reflect.get(target, prop, receiver);
+                    }
+
+                    quill.lastLastState = quill.lastState
+                    quill.lastState = prop;
+                    return Reflect.get(target, prop, receiver);
+                },
+                set(target, prop, value, receiver) {
+                    const oldValue = target[prop];
+                    if (oldValue === value) return true;
+
+                    const result = Reflect.set(target, prop, value, receiver);
+                    instance.stateWatchers[prop].forEach((cb) => cb())
+                    return result;
+                }
+            });
+            Object.defineProperty(instance, "state", {
+                value: proxy,
+                writable: false,
+                configurable: false,
+                enumerable: true
+            });
+
+            let stateWatchers = {}
+            Object.keys(instance.state).forEach((key) => stateWatchers[key] = [])
+            Object.defineProperty(instance, "stateWatchers", {
+                value: stateWatchers,
+                writable: false,
+                configurable: false,
+                enumerable: true
+            });
+        }
         quill.render(instance)
         return instance
     }
@@ -214,6 +274,9 @@ HTMLElement.prototype.rerender = function() {
 
 /* Styling */
 
+window.pct = "%"
+window.vmin = "vmin"
+window.vmax = "vmax"
 window.vh = "vh"
 window.vw = "vw"
 window.px = "px"
@@ -249,170 +312,168 @@ window.css = function css(cssString) {
 }
 
 function extendHTMLElementWithStyleSetters() {
-    let allStyleProps = Object.keys(document.createElement("div").style)
+    
+    function cssValueType(prop) {
+        const div = document.createElement("div");
+        const style = div.style;
+        if (!(prop in style)) return "invalid";
+
+        switch(prop) {
+
+            case "gap":
+            case "borderRadius":
+            case "width":
+            case "height":
+            case "maxWidth":
+            case "maxHeight":
+            case "minWidth":
+            case "minHeight":
+
+            case "left":
+            case "top":
+            case "bottom":
+            case "right":
+
+            case "padding":
+            case "paddingLeft":
+            case "paddingTop":
+            case "paddingBottom":
+            case "paddingRight":
+
+            case "margin":
+            case "marginLeft":
+            case "marginTop":
+            case "marginBottom":
+            case "marginRight":
+
+            case "textUnderlineOffset":
+
+                return "unit-number"
+
+            default:
+
+                return "string"
+        }
+
+    }
+
+    let allStyleProps = ["accentColor", "additiveSymbols", "alignContent", "alignItems", "alignSelf", "alignmentBaseline", "all", "anchorName", "anchorScope", "animation", "animationComposition", "animationDelay", "animationDirection", "animationDuration", "animationFillMode", "animationIterationCount", "animationName", "animationPlayState", "animationRange", "animationRangeEnd", "animationRangeStart", "animationTimeline", "animationTimingFunction", "appRegion", "appearance", "ascentOverride", "aspectRatio", "backdropFilter", "backfaceVisibility", "background", "backgroundAttachment", "backgroundBlendMode", "backgroundClip", "backgroundColor", "backgroundImage", "backgroundOrigin", "backgroundPosition", "backgroundPositionX", "backgroundPositionY", "backgroundRepeat", "backgroundSize", "basePalette", "baselineShift", "baselineSource", "blockSize", "border", "borderBlock", "borderBlockColor", "borderBlockEnd", "borderBlockEndColor", "borderBlockEndStyle", "borderBlockEndWidth", "borderBlockStart", "borderBlockStartColor", "borderBlockStartStyle", "borderBlockStartWidth", "borderBlockStyle", "borderBlockWidth", "borderBottom", "borderBottomColor", "borderBottomLeftRadius", "borderBottomRightRadius", "borderBottomStyle", "borderBottomWidth", "borderCollapse", "borderColor", "borderEndEndRadius", "borderEndStartRadius", "borderImage", "borderImageOutset", "borderImageRepeat", "borderImageSlice", "borderImageSource", "borderImageWidth", "borderInline", "borderInlineColor", "borderInlineEnd", "borderInlineEndColor", "borderInlineEndStyle", "borderInlineEndWidth", "borderInlineStart", "borderInlineStartColor", "borderInlineStartStyle", "borderInlineStartWidth", "borderInlineStyle", "borderInlineWidth", "borderLeft", "borderLeftColor", "borderLeftStyle", "borderLeftWidth", "borderRadius", "borderRight", "borderRightColor", "borderRightStyle", "borderRightWidth", "borderSpacing", "borderStartEndRadius", "borderStartStartRadius", "borderStyle", "borderTop", "borderTopColor", "borderTopLeftRadius", "borderTopRightRadius", "borderTopStyle", "borderTopWidth", "borderWidth", "bottom", "boxDecorationBreak", "boxShadow", "boxSizing", "breakAfter", "breakBefore", "breakInside", "bufferedRendering", "captionSide", "caretAnimation", "caretColor", "clear", "clip", "clipPath", "clipRule", "color", "colorInterpolation", "colorInterpolationFilters", "colorRendering", "colorScheme", "columnCount", "columnFill", "columnGap", "columnRule", "columnRuleColor", "columnRuleStyle", "columnRuleWidth", "columnSpan", "columnWidth", "columns", "contain", "containIntrinsicBlockSize", "containIntrinsicHeight", "containIntrinsicInlineSize", "containIntrinsicSize", "containIntrinsicWidth", "container", "containerName", "containerType", "content", "contentVisibility", "cornerBlockEndShape", "cornerBlockStartShape", "cornerBottomLeftShape", "cornerBottomRightShape", "cornerBottomShape", "cornerEndEndShape", "cornerEndStartShape", "cornerInlineEndShape", "cornerInlineStartShape", "cornerLeftShape", "cornerRightShape", "cornerShape", "cornerStartEndShape", "cornerStartStartShape", "cornerTopLeftShape", "cornerTopRightShape", "cornerTopShape", "counterIncrement", "counterReset", "counterSet", "cursor", "cx", "cy", "d", "descentOverride", "direction", "display", "dominantBaseline", "dynamicRangeLimit", "emptyCells", "fallback", "fieldSizing", "fill", "fillOpacity", "fillRule", "filter", "flex", "flexBasis", "flexDirection", "flexFlow", "flexGrow", "flexShrink", "flexWrap", "float", "floodColor", "floodOpacity", "font", "fontDisplay", "fontFamily", "fontFeatureSettings", "fontKerning", "fontOpticalSizing", "fontPalette", "fontSize", "fontSizeAdjust", "fontStretch", "fontStyle", "fontSynthesis", "fontSynthesisSmallCaps", "fontSynthesisStyle", "fontSynthesisWeight", "fontVariant", "fontVariantAlternates", "fontVariantCaps", "fontVariantEastAsian", "fontVariantEmoji", "fontVariantLigatures", "fontVariantNumeric", "fontVariantPosition", "fontVariationSettings", "fontWeight", "forcedColorAdjust", "gap", "grid", "gridArea", "gridAutoColumns", "gridAutoFlow", "gridAutoRows", "gridColumn", "gridColumnEnd", "gridColumnGap", "gridColumnStart", "gridGap", "gridRow", "gridRowEnd", "gridRowGap", "gridRowStart", "gridTemplate", "gridTemplateAreas", "gridTemplateColumns", "gridTemplateRows", "height", "hyphenateCharacter", "hyphenateLimitChars", "hyphens", "imageOrientation", "imageRendering", "inherits", "initialLetter", "initialValue", "inlineSize", "inset", "insetBlock", "insetBlockEnd", "insetBlockStart", "insetInline", "insetInlineEnd", "insetInlineStart", "interactivity", "interpolateSize", "isolation", "justifyContent", "justifyItems", "justifySelf", "left", "letterSpacing", "lightingColor", "lineBreak", "lineGapOverride", "lineHeight", "listStyle", "listStyleImage", "listStylePosition", "listStyleType", "margin", "marginBlock", "marginBlockEnd", "marginBlockStart", "marginBottom", "marginInline", "marginInlineEnd", "marginInlineStart", "marginLeft", "marginRight", "marginTop", "marker", "markerEnd", "markerMid", "markerStart", "mask", "maskClip", "maskComposite", "maskImage", "maskMode", "maskOrigin", "maskPosition", "maskRepeat", "maskSize", "maskType", "mathDepth", "mathShift", "mathStyle", "maxBlockSize", "maxHeight", "maxInlineSize", "maxWidth", "minBlockSize", "minHeight", "minInlineSize", "minWidth", "mixBlendMode", "navigation", "negative", "objectFit", "objectPosition", "objectViewBox", "offset", "offsetAnchor", "offsetDistance", "offsetPath", "offsetPosition", "offsetRotate", "opacity", "order", "orphans", "outline", "outlineColor", "outlineOffset", "outlineStyle", "outlineWidth", "overflow", "overflowAnchor", "overflowBlock", "overflowClipMargin", "overflowInline", "overflowWrap", "overflowX", "overflowY", "overlay", "overrideColors", "overscrollBehavior", "overscrollBehaviorBlock", "overscrollBehaviorInline", "overscrollBehaviorX", "overscrollBehaviorY", "pad", "padding", "paddingBlock", "paddingBlockEnd", "paddingBlockStart", "paddingBottom", "paddingInline", "paddingInlineEnd", "paddingInlineStart", "paddingLeft", "paddingRight", "paddingTop", "page", "pageBreakAfter", "pageBreakBefore", "pageBreakInside", "pageOrientation", "paintOrder", "perspective", "perspectiveOrigin", "placeContent", "placeItems", "placeSelf", "pointerEvents", "position", "positionAnchor", "positionArea", "positionTry", "positionTryFallbacks", "positionTryOrder", "positionVisibility", "prefix", "printColorAdjust", "quotes", "r", "range", "readingFlow", "readingOrder", "resize", "result", "right", "rotate", "rowGap", "rubyAlign", "rubyPosition", "rx", "ry", "scale", "scrollBehavior", "scrollInitialTarget", "scrollMargin", "scrollMarginBlock", "scrollMarginBlockEnd", "scrollMarginBlockStart", "scrollMarginBottom", "scrollMarginInline", "scrollMarginInlineEnd", "scrollMarginInlineStart", "scrollMarginLeft", "scrollMarginRight", "scrollMarginTop", "scrollMarkerGroup", "scrollPadding", "scrollPaddingBlock", "scrollPaddingBlockEnd", "scrollPaddingBlockStart", "scrollPaddingBottom", "scrollPaddingInline", "scrollPaddingInlineEnd", "scrollPaddingInlineStart", "scrollPaddingLeft", "scrollPaddingRight", "scrollPaddingTop", "scrollSnapAlign", "scrollSnapStop", "scrollSnapType", "scrollTargetGroup", "scrollTimeline", "scrollTimelineAxis", "scrollTimelineName", "scrollbarColor", "scrollbarGutter", "scrollbarWidth", "shapeImageThreshold", "shapeMargin", "shapeOutside", "shapeRendering", "size", "sizeAdjust", "speak", "speakAs", "src", "stopColor", "stopOpacity", "stroke", "strokeDasharray", "strokeDashoffset", "strokeLinecap", "strokeLinejoin", "strokeMiterlimit", "strokeOpacity", "strokeWidth", "suffix", "symbols", "syntax", "system", "tabSize", "tableLayout", "textAlign", "textAlignLast", "textAnchor", "textAutospace", "textBox", "textBoxEdge", "textBoxTrim", "textCombineUpright", "textDecoration", "textDecorationColor", "textDecorationLine", "textDecorationSkipInk", "textDecorationStyle", "textDecorationThickness", "textEmphasis", "textEmphasisColor", "textEmphasisPosition", "textEmphasisStyle", "textIndent", "textOrientation", "textOverflow", "textRendering", "textShadow", "textSizeAdjust", "textSpacingTrim", "textTransform", "textUnderlineOffset", "textUnderlinePosition", "textWrap", "textWrapMode", "textWrapStyle", "timelineScope", "top", "touchAction", "transform", "transformBox", "transformOrigin", "transformStyle", "transition", "transitionBehavior", "transitionDelay", "transitionDuration", "transitionProperty", "transitionTimingFunction", "translate", "types", "unicodeBidi", "unicodeRange", "userSelect", "vectorEffect", "verticalAlign", "viewTimeline", "viewTimelineAxis", "viewTimelineInset", "viewTimelineName", "viewTransitionClass", "viewTransitionGroup", "viewTransitionName", "visibility", "webkitAlignContent", "webkitAlignItems", "webkitAlignSelf", "webkitAnimation", "webkitAnimationDelay", "webkitAnimationDirection", "webkitAnimationDuration", "webkitAnimationFillMode", "webkitAnimationIterationCount", "webkitAnimationName", "webkitAnimationPlayState", "webkitAnimationTimingFunction", "webkitAppRegion", "webkitAppearance", "webkitBackfaceVisibility", "webkitBackgroundClip", "webkitBackgroundOrigin", "webkitBackgroundSize", "webkitBorderAfter", "webkitBorderAfterColor", "webkitBorderAfterStyle", "webkitBorderAfterWidth", "webkitBorderBefore", "webkitBorderBeforeColor", "webkitBorderBeforeStyle", "webkitBorderBeforeWidth", "webkitBorderBottomLeftRadius", "webkitBorderBottomRightRadius", "webkitBorderEnd", "webkitBorderEndColor", "webkitBorderEndStyle", "webkitBorderEndWidth", "webkitBorderHorizontalSpacing", "webkitBorderImage", "webkitBorderRadius", "webkitBorderStart", "webkitBorderStartColor", "webkitBorderStartStyle", "webkitBorderStartWidth", "webkitBorderTopLeftRadius", "webkitBorderTopRightRadius", "webkitBorderVerticalSpacing", "webkitBoxAlign", "webkitBoxDecorationBreak", "webkitBoxDirection", "webkitBoxFlex", "webkitBoxOrdinalGroup", "webkitBoxOrient", "webkitBoxPack", "webkitBoxReflect", "webkitBoxShadow", "webkitBoxSizing", "webkitClipPath", "webkitColumnBreakAfter", "webkitColumnBreakBefore", "webkitColumnBreakInside", "webkitColumnCount", "webkitColumnGap", "webkitColumnRule", "webkitColumnRuleColor", "webkitColumnRuleStyle", "webkitColumnRuleWidth", "webkitColumnSpan", "webkitColumnWidth", "webkitColumns", "webkitFilter", "webkitFlex", "webkitFlexBasis", "webkitFlexDirection", "webkitFlexFlow", "webkitFlexGrow", "webkitFlexShrink", "webkitFlexWrap", "webkitFontFeatureSettings", "webkitFontSmoothing", "webkitHyphenateCharacter", "webkitJustifyContent", "webkitLineBreak", "webkitLineClamp", "webkitLocale", "webkitLogicalHeight", "webkitLogicalWidth", "webkitMarginAfter", "webkitMarginBefore", "webkitMarginEnd", "webkitMarginStart", "webkitMask", "webkitMaskBoxImage", "webkitMaskBoxImageOutset", "webkitMaskBoxImageRepeat", "webkitMaskBoxImageSlice", "webkitMaskBoxImageSource", "webkitMaskBoxImageWidth", "webkitMaskClip", "webkitMaskComposite", "webkitMaskImage", "webkitMaskOrigin", "webkitMaskPosition", "webkitMaskPositionX", "webkitMaskPositionY", "webkitMaskRepeat", "webkitMaskSize", "webkitMaxLogicalHeight", "webkitMaxLogicalWidth", "webkitMinLogicalHeight", "webkitMinLogicalWidth", "webkitOpacity", "webkitOrder", "webkitPaddingAfter", "webkitPaddingBefore", "webkitPaddingEnd", "webkitPaddingStart", "webkitPerspective", "webkitPerspectiveOrigin", "webkitPerspectiveOriginX", "webkitPerspectiveOriginY", "webkitPrintColorAdjust", "webkitRtlOrdering", "webkitRubyPosition", "webkitShapeImageThreshold", "webkitShapeMargin", "webkitShapeOutside", "webkitTapHighlightColor", "webkitTextCombine", "webkitTextDecorationsInEffect", "webkitTextEmphasis", "webkitTextEmphasisColor", "webkitTextEmphasisPosition", "webkitTextEmphasisStyle", "webkitTextFillColor", "webkitTextOrientation", "webkitTextSecurity", "webkitTextSizeAdjust", "webkitTextStroke", "webkitTextStrokeColor", "webkitTextStrokeWidth", "webkitTransform", "webkitTransformOrigin", "webkitTransformOriginX", "webkitTransformOriginY", "webkitTransformOriginZ", "webkitTransformStyle", "webkitTransition", "webkitTransitionDelay", "webkitTransitionDuration", "webkitTransitionProperty", "webkitTransitionTimingFunction", "webkitUserDrag", "webkitUserModify", "webkitUserSelect", "webkitWritingMode", "whiteSpace", "whiteSpaceCollapse", "widows", "width", "willChange", "wordBreak", "wordSpacing", "wordWrap", "writingMode", "x", "y", "zIndex", "zoom"]
+
     allStyleProps.forEach(prop => {
-        if(prop === "translate") return
-        HTMLElement.prototype[prop] = function(value) {
-            this.style[prop] = value;
-            return this;
-        };
+        if (prop === "translate") return;
+
+        const type = cssValueType(prop);
+
+        switch (type) {
+            case "unit-number":
+                HTMLElement.prototype[prop] = StyleFunction(function(value, unit = "px") {
+                    if(value === "auto") {
+                        this.style[prop] = value
+                        return this
+                    }
+                    this.style[prop] = value + unit;
+                    if (value !== "" && this.style[prop] === "") {
+                        throw new Error(`Invalid CSS value for ${prop}: ` + value + unit);
+                    }
+                    return this;
+                });
+                break;
+
+            case "string":
+                HTMLElement.prototype[prop] = StyleFunction(function(value) {
+                    this.style[prop] = value;
+                    if (value !== "" && this.style[prop] === "") {
+                        throw new Error(`Invalid CSS value for ${prop}: ` + value);
+                    }
+                    return this;
+                });
+                break;
+        }
     });
 }
+
 extendHTMLElementWithStyleSetters();
 
-HTMLElement.prototype.padding = function(one, two, three = "px") {
+HTMLElement.prototype.addStateWatcher = function(field, cb) {
+    let parent = this
+    while(!(parent instanceof Shadow)) {
+        parent = parent.parentNode
+    }
+    parent.stateWatchers[field].push(cb)
+}
 
-    const setPadding = (side, val) => {
-        const directionName = `padding${side.charAt(0).toUpperCase()}${side.slice(1)}`;
-        this.style[directionName] = (typeof val === 'number') ? `${val}${three}` : val;
-    };
+// Currently only works for one state variable in the function
+// Could probably be fixed by just making lastState an array and clearing it out every function call?
+HTMLElement.prototype.setUpState = function(styleFunc, cb) {
+    let format = (value) => {return Array.isArray(value) ? value :  [value]}
 
-    if(one === "horizontal" || one === "vertical") { // is one a direction
-        if (one === "horizontal") {
-            setPadding("left", two);
-            setPadding("right", two);
-        } else if (one === "vertical") {
-            setPadding("top", two);
-            setPadding("bottom", two);
-        }
-    } else { // is two a value
-        if(typeof one !== 'number' || isNaN(one)) {
-            this.style.padding = one
+    // 1. Run the callback to get the style argument and also update lastState
+    let styleArgs = format(cb())
+
+    // 2. Check if lastState has really been updated. If not, the user-provided cb did not access valid state
+    if(!quill.lastState) {
+        throw new Error("Quill: style state function does not access valid state")
+    }
+
+    // 3. Construct function to run when state changes
+    let onStateChange = () => {
+        styleFunc.call(this, ...format(cb()))
+    }
+
+    // 4. Now listen for the state to change
+    this.addStateWatcher(quill.lastState, onStateChange)
+
+    // 5. Run the original function again, this time with the actual arguments
+    quill.lastState = null
+    styleFunc.call(this, ...styleArgs)
+}
+
+function StyleFunction(func) {
+    let styleFunction = function(value, unit = "px") {
+        if(typeof value === 'function') {
+            this.setUpState(styleFunction, value)
+            return this
         } else {
-            this.style.padding = one + two
+            func.call(this, value, unit); // ".call" ensures that "this" is correct
+            return this
         }
     }
-    
-    return this;
-};
 
-    HTMLElement.prototype.paddingTop = function(value, unit = "px") {
-        if ((typeof value !== 'number' && value !== "auto") || Number.isNaN(value))
-            throw new Error(`Invalid value: ${value}. Expected a number.`);
-        this.style.paddingTop = value + unit
-        return this
-    }
+    return styleFunction
+}
 
-    HTMLElement.prototype.paddingLeft = function(value, unit = "px") {
-        if ((typeof value !== 'number' && value !== "auto") || Number.isNaN(value))
-            throw new Error(`Invalid value: ${value}. Expected a number.`);
-        this.style.paddingLeft = value + unit
-        return this
-    }
-
-    HTMLElement.prototype.paddingBottom = function(value, unit = "px") {
-        if ((typeof value !== 'number' && value !== "auto") || Number.isNaN(value))
-            throw new Error(`Invalid value: ${value}. Expected a number.`);
-        this.style.paddingBottom = value + unit
-        return this
-    }
-
-    HTMLElement.prototype.paddingRight = function(value, unit = "px") {
-        if ((typeof value !== 'number' && value !== "auto") || Number.isNaN(value))
-            throw new Error(`Invalid value: ${value}. Expected a number.`);
-        this.style.paddingRight = value + unit
-        return this
-    }
-
-    HTMLElement.prototype.paddingVertical = function(value, unit = "px") {
-        if ((typeof value !== 'number' && value !== "auto") || Number.isNaN(value))
-            throw new Error(`Invalid value: ${value}. Expected a number.`);
-        this.style.paddingTop = value + unit
-        this.style.paddingBottom = value + unit
-        return this
-    }
-
-    HTMLElement.prototype.paddingHorizontal = function(value, unit = "px") {
-        if ((typeof value !== 'number' && value !== "auto") || Number.isNaN(value))
-            throw new Error(`Invalid value: ${value}. Expected a number.`);
-        this.style.paddingRight = value + unit
-        this.style.paddingLeft = value + unit
-        return this
-    }
-
-HTMLElement.prototype.margin = function(direction, value, unit = "px") {
-    if (!value) {
-        this.style.margin = direction;
-        return this;
-    }
-
-    const setMargin = (side, val) => {
-        const directionName = `margin${side.charAt(0).toUpperCase()}${side.slice(1)}`;
-        this.style[directionName] = (typeof val === 'number') ? `${val}${unit}` : val;
-    };
-
-    if (direction === "horizontal") {
-        setMargin("left", value);
-        setMargin("right", value);
-    } else if (direction === "vertical") {
-        setMargin("top", value);
-        setMargin("bottom", value);
-    } else {
-        setMargin(direction, value);
-    }
-
-    return this;
-};
-
-    HTMLElement.prototype.marginTop = function(value, unit = "px") {
-        if ((typeof value !== 'number' && value !== "auto") || Number.isNaN(value))
-            throw new Error(`Invalid value: ${value}. Expected a number.`);
-        this.style.marginTop = value + unit
-        return this
-    }
-
-    HTMLElement.prototype.marginLeft = function(value, unit = "px") {
-        if ((typeof value !== 'number' && value !== "auto") || Number.isNaN(value))
-            throw new Error(`Invalid value: ${value}. Expected a number.`);
-        this.style.marginLeft = value + unit
-        return this
-    }
-
-    HTMLElement.prototype.marginBottom = function(value, unit = "px") {
-        if ((typeof value !== 'number' && value !== "auto") || Number.isNaN(value))
-            throw new Error(`Invalid value: ${value}. Expected a number.`);
-        this.style.marginBottom = value + unit
-        return this
-    }
-
-    HTMLElement.prototype.marginRight = function(value, unit = "px") {
-        if ((typeof value !== 'number' && value !== "auto") || Number.isNaN(value))
-            throw new Error(`Invalid value: ${value}. Expected a number.`);
-        this.style.marginRight = value + unit
-        return this
-    }
-
-HTMLElement.prototype.width = function(value, unit = "px") {
-    if ((typeof value !== 'number' && value !== "auto") || Number.isNaN(value))
-        throw new Error(`Invalid value: ${value}. Expected a number.`);
-    this.style.width = value + unit
+HTMLElement.prototype.styles = function(cb) {
+    cb.call(this, this)
     return this
 }
 
-HTMLElement.prototype.minWidth = function(value, unit = "px") {
-    if ((typeof value !== 'number' && value !== "auto") || Number.isNaN(value))
-        throw new Error(`Invalid value: ${value}. Expected a number.`);
-    this.style.minWidth = value + unit
-    return this
-}
+/* Type 1 */
 
-HTMLElement.prototype.height = function(value, unit = "px") {
-    if ((typeof value !== 'number' && value !== "auto") || Number.isNaN(value))
-        throw new Error(`Invalid value: ${value}. Expected a number.`);
-    this.style.height = value + unit
+HTMLElement.prototype.paddingVertical = StyleFunction(function(value, unit = "px") {
+    this.style.paddingTop = value + unit
+    this.style.paddingBottom = value + unit
     return this
-}
+})
 
-HTMLElement.prototype.minHeight = function(value, unit = "px") {
-    if ((typeof value !== 'number' && value !== "auto") || Number.isNaN(value))
-        throw new Error(`Invalid value: ${value}. Expected a number.`);
-    this.style.minHeight = value + unit
+HTMLElement.prototype.paddingHorizontal = StyleFunction(function(value, unit = "px") {
+    this.style.paddingRight = value + unit
+    this.style.paddingLeft = value + unit
     return this
-}
+})
 
-HTMLElement.prototype.fontSize = function(value, unit = "px") {
-    if ((typeof value !== 'number' && value !== "auto") || Number.isNaN(value))
-        throw new Error(`Invalid value: ${value}. Expected a number.`);
+HTMLElement.prototype.marginVertical = StyleFunction(function(value, unit = "px") {
+    this.style.marginTop = value + unit
+    this.style.marginBottom = value + unit
+    return this
+})
+
+HTMLElement.prototype.marginHorizontal = StyleFunction(function(value, unit = "px") {
+    this.style.marginRight = value + unit
+    this.style.marginLeft = value + unit
+    return this
+})
+
+HTMLElement.prototype.fontSize = StyleFunction(function(value, unit = "px") {
     
     switch(value) {
         case "6xl": 
@@ -456,7 +517,7 @@ HTMLElement.prototype.fontSize = function(value, unit = "px") {
     }
     this.style.fontSize = value + unit
     return this
-}
+})
 
 function checkPositionType(el) {
     let computed = window.getComputedStyle(el).position
@@ -465,6 +526,26 @@ function checkPositionType(el) {
     }
 }
 
+HTMLElement.prototype.width = function(value, unit = "px") {
+    if ((typeof value !== 'number' && value !== "auto") || Number.isNaN(value))
+        throw new Error(`Invalid value: ${value}. Expected a number.`);
+    this.style.width = value + unit
+    if(window.getComputedStyle(this).display === "inline") {
+        this.style.display = "block"
+    }
+    return this
+}
+
+HTMLElement.prototype.height = function(value, unit = "px") {
+    if ((typeof value !== 'number' && value !== "auto") || Number.isNaN(value))
+        throw new Error(`Invalid value: ${value}. Expected a number.`);
+    this.style.height = value + unit
+    if(window.getComputedStyle(this).display === "inline") {
+        this.style.display = "block"
+    }
+    return this
+}
+
 HTMLElement.prototype.x = function(value, unit = "px") {
     if (typeof value !== 'number' || isNaN(value))
         throw new Error(`Invalid value: ${value}. Expected a number.`);
@@ -497,29 +578,6 @@ HTMLElement.prototype.yBottom = function(value, unit = "px") {
     return this
 }
 
-HTMLElement.prototype.borderRadius = function(value, unit = "px") {
-    if (typeof value !== 'number' || isNaN(value))
-        throw new Error(`Invalid value: ${value}. Expected a number.`);
-    this.style.borderRadius = value + unit
-    return this
-}
-
-HTMLElement.prototype.positionType = function (value) {
-    if(!(value === "absolute" || value === "relative" || value === "static" || value === "fixed" || value === "sticky")) {
-        console.error("HTMLElement.overlflow: must have valid overflow value!")
-        return;
-    }
-    this.style.position = value
-    return this
-}
-
-HTMLElement.prototype.gap = function(value, unit = "px") {
-    if (typeof value !== 'number' || Number.isNaN(value))
-        throw new Error(`Invalid value: ${value}. Expected a number.`);
-    this.style.gap = value + unit
-    return this
-}
-
 HTMLElement.prototype.backgroundImage = function (...values) {
     const formatted = values
         .map(v => {
@@ -534,6 +592,50 @@ HTMLElement.prototype.backgroundImage = function (...values) {
     return this;
 };
 
+HTMLElement.prototype.center = function () {
+    this.style.transform = "translate(-50%, -50%)"
+    return this;
+};
+
+HTMLElement.prototype.centerX = function () {
+    this.style.transform = "translateX(-50%)"
+    return this;
+};
+
+HTMLElement.prototype.centerY = function () {
+    this.style.transform = "translateY(-50%)"
+    return this;
+};
+
+HTMLElement.prototype.alignVertical = function (value) {
+    const direction = getComputedStyle(this).flexDirection;
+    if(!direction) {
+        throw new Error("alignVertical can be only be used on HStacks or VStacks!")
+    }
+
+    if (direction === "column" || direction === "column-reverse") {
+        this.style.justifyContent = value;
+    } else {
+        this.style.alignItems = value;
+    }
+    return this
+}
+
+HTMLElement.prototype.alignHorizontal = function (value) {
+    const direction = getComputedStyle(this).flexDirection;
+    if(!direction) {
+        throw new Error("alignHorizontal can be only be used on HStacks or VStacks!")
+    }
+
+    if (direction === "column" || direction === "column-reverse") {
+        this.style.alignItems = value;
+    } else {
+        this.style.justifyContent = value;
+    }
+    return this
+}
+
+
 /* Elements */
 
 quill.setChildren = function(el, innerContent) {
@@ -655,7 +757,7 @@ window.form = function(cb) {
     return el
 }
 
-window.input = function(placeholder, width, height) {
+window.input = function(placeholder = "", width, height) {
     let el = document.createElement("input")
     el.placeholder = placeholder
     el.style.width = width
@@ -664,14 +766,18 @@ window.input = function(placeholder, width, height) {
     return el
 }
 
-window.label = function(text) {
+window.label = function(inside) {
     let el = document.createElement("label")
-    el.innerText = text
+    if(typeof inside === "string") {
+        el.innerText = inside
+    } else {
+        el.render = inside
+    }
     quill.render(el)
     return el
 }
 
-window.textarea = function(placeholder) {
+window.textarea = function(placeholder = "") {
     let el = document.createElement("textarea")
     el.placeholder = placeholder
     quill.render(el)
@@ -738,16 +844,109 @@ window.ZStack = function (cb = () => {}) {
     return div;
 };
 
+/* SHAPES */
+
+window.svgMethods = function(svg) {
+    svg.pulse = function (duration = 600) {
+        this.style.transition = `transform ${duration}ms ease-in-out`
+        this.style.transform = "scale(1.2)"
+        setTimeout(() => {
+            this.style.transform = "scale(1)"
+        }, duration / 2)
+        return this
+    }
+
+    // Rotate (e.g. loading spinner)
+    svg.rotate = function (degrees = 360, duration = 1000) {
+        this.style.transition = `transform ${duration}ms linear`
+        this.style.transform = `rotate(${degrees}deg)`
+        return this
+    }
+
+    // Change color
+    svg.fill = function (color) {
+        this.setAttribute("fill", color)
+        return this
+    }
+
+    svg.height = function (height) {
+        this.setAttribute("height", height)
+        return this
+    }
+
+    svg.width = function (width) {
+        this.setAttribute("width", width)
+        return this
+    }
+
+    svg.stroke = function (width, color) {
+        this.setAttribute("stroke", color)
+        this.setAttribute("stroke-width", width)
+        return this
+    }
+
+    // Toggle visibility
+    svg.toggle = function () {
+        this.style.display = this.style.display === "none" ? "" : "none"
+        return this
+    }
+}
+
+window.Rectangle = function (width = "40px", height = "40px") {
+    const svgNS = "http://www.w3.org/2000/svg";
+    const svgEl = document.createElementNS(svgNS, "svg");
+    const rectEl = document.createElementNS(svgNS, "rect");
+
+    // SVG size
+    svgEl.setAttribute("width", width);
+    svgEl.setAttribute("height", height);
+    svgEl.setAttribute("viewBox", "0 0 100 100");
+    svgEl.setAttribute("preserveAspectRatio", "xMidYMid meet");
+
+    // Rectangle: full size, slightly rounded corners
+    rectEl.setAttribute("x", "15");      // 15% margin from edges
+    rectEl.setAttribute("y", "15");
+    rectEl.setAttribute("width", "70");  // 70% of viewBox
+    rectEl.setAttribute("height", "70");
+    // rectEl.setAttribute("rx", "8");      // rounded corners (optional)
+    // rectEl.setAttribute("ry", "8");
+
+    svgEl.appendChild(rectEl);
+    svgMethods(svgEl);  // assuming you have this
+    quill.render(svgEl);
+    return svgEl;
+}
+
+window.Triangle = function (width = "40px", height = "40px") {
+    const svgNS = "http://www.w3.org/2000/svg"
+    const svgEl = document.createElementNS(svgNS, "svg")
+    const pathEl = document.createElementNS(svgNS, "path")
+
+    // SVG size
+    svgEl.setAttribute("width", width)
+    svgEl.setAttribute("height", height)
+    svgEl.setAttribute("viewBox", "0 0 100 100")
+    svgEl.setAttribute("preserveAspectRatio", "xMidYMid meet")
+    // Right-pointing triangle (Play icon)
+    pathEl.setAttribute("d", "M 25 15 L 90 50 L 25 85 Z") // ◄ adjust points if needed
+
+    svgEl.appendChild(pathEl)
+    svgMethods(svgEl)
+    quill.render(svgEl)
+    return svgEl
+}
+
+
 /* EVENTS */
 
 HTMLElement.prototype.onAppear = function(func) {
-    func(this);
+    func.call(this);
     return this;
 };
 
 HTMLElement.prototype.onClick = function(func) {
-    const onMouseDown = () => func.call(this, true);
-    const onMouseUp = () => func.call(this, false);
+    const onMouseDown = (e) => func.call(this, false, e);
+    const onMouseUp = (e) => func.call(this, true, e);
     this._storeListener("mousedown", onMouseDown);
     this._storeListener("mouseup", onMouseUp);
     return this;
@@ -769,8 +968,8 @@ HTMLElement.prototype.onRightClick = function(func) {
 };
 
 HTMLElement.prototype.onHover = function(cb) {
-    const onEnter = () => cb.call(this, true);
-    const onLeave = () => cb.call(this, false);
+    const onEnter = (e) => cb.call(this, true, e);
+    const onLeave = (e) => cb.call(this, false, e);
     this._storeListener("mouseover", onEnter);
     this._storeListener("mouseleave", onLeave);
     return this;
@@ -799,18 +998,97 @@ HTMLElement.prototype.onInput = function(cb) {
     return this;
 };
 
-/* WHY THIS LISTENER IS THE WAY IT IS: 
-- If we dispatch the "navigate" event on the window (as one would expect for a "navigate" event), a listener placed on the element will not pick it up.
-- However, if we add the event as a window event, it won't have the "this" scope that a callback normally would.
-- Then, if we try to add that scope using bind(), it makes the function.toString() unreadable, which means we will get false positives for duplicate listeners.
-- Therefore, we just have to attach the navigate event to the element, and manually trigger that when the window listener fires.
-*/
-HTMLElement.prototype.onNavigate = function(cb) {
-    this._storeListener("navigate", cb);
-    window.addEventListener("navigate", () => this.dispatchEvent(new CustomEvent("navigate")))
+HTMLElement.prototype.onChange = function(cb) {
+    if(!this.matches('input, textarea, [contenteditable=""], [contenteditable="true"]'))
+        throw new Error("Can't put input event on non-input element!")
+    this._storeListener("change", cb);
     return this;
 };
 
+
+HTMLElement.prototype.onSubmit = function(cb) {
+    if(!this.matches('form'))
+        throw new Error("Can't put form event on non-form element!")
+    this._storeListener("submit", cb);
+    return this;
+};
+
+HTMLElement.prototype.onTouch = function(cb) {
+    const onStart = () => cb.call(this, true);
+    const onEnd = () => cb.call(this, false);
+    const onCancel = () => cb.call(this, null);
+    this._storeListener("touchstart", onStart);
+    this._storeListener("touchend", onEnd);
+    this._storeListener("touchcancel", onCancel);
+    return this;
+};
+
+HTMLElement.prototype.onTap = function(cb) {
+    this._storeListener("touchend", cb);
+    return this;
+};
+
+/* WHY THIS LISTENER IS THE WAY IT IS: 
+- We can't just put a listener on the element, because a window "navigate" event won't trigger it
+- We can't just put a listener on the window, because the "this" variable will only refer to the window
+- And, if we try to re-add that scope using bind(), it makes the return value of .toString() unreadable, which means we cannot detect duplicate listeners.
+- Therefore, we attach a global navigate event to the window, and each navigate event in this array, and manually trigger each event when the global one fires.
+*/
+navigateListeners = []
+window.addEventListener("navigate", () => {
+    for(entry of navigateListeners) {
+        entry.el.dispatchEvent(new CustomEvent("navigate"))
+    }
+})
+HTMLElement.prototype.onNavigate = function(cb) {
+    this._storeListener("navigate", cb);
+
+    let found = false
+    let elementIndex = Array.from(this.parentNode.children).indexOf(this)
+    for(entry of navigateListeners) {
+        if(
+            entry.cb.toString() === cb.toString() 
+            && entry.index === elementIndex 
+            && this.nodeName === entry.el.nodeName
+        ) {
+            found = true
+            break;
+        }
+    }
+    if(found === false) {
+        navigateListeners.push({el: this, cb: cb, index: elementIndex})
+    }
+
+    return this;
+};
+
+/* 
+Same principle applies
+*/
+queryListeners = []
+HTMLElement.prototype.onQueryChanged = function(cb) {
+    this._storeListener("query-changed", cb);
+
+    let found = false
+    for(entry of queryListeners) {
+        if(entry.cb.toString() === cb.toString() &&
+            this.nodeName === entry.el.nodeName) {
+            found = true
+            break;
+        }
+    }
+    if(found === false) {
+        queryListeners.push({el: this, cb: cb})
+    }
+
+    return this;
+};
+window.addEventListener("query-changed", () => {
+    for(entry of queryListeners) {
+        entry.el.dispatchEvent(new CustomEvent("query-changed"))
+    }
+})
+
 HTMLElement.prototype.onEvent = function(name, cb) {
     window._storeListener(window, name, cb);
     return this;
diff --git a/ui/_/code/shared.css b/ui/_/code/shared.css
index 82248ac..86ae125 100644
--- a/ui/_/code/shared.css
+++ b/ui/_/code/shared.css
@@ -10,6 +10,7 @@
     --brown: #c6a476;
     --darkbrown: #60320c;
     --darkred: #7f0b09;
+    --darkorange: #b15900;
     --orange: #FE9201;
     --periwinkle: #655BAF;
 
diff --git a/ui/components/DownloadsPanel.js b/ui/components/DownloadsPanel.js
new file mode 100644
index 0000000..302ab29
--- /dev/null
+++ b/ui/components/DownloadsPanel.js
@@ -0,0 +1,94 @@
+class DownloadsPanel extends Shadow {
+    render() {
+        ZStack(() => {
+            input("", "60vw")
+                .backgroundColor("var(--accent3)")
+                .color("var(--accent)")
+                .border("none")
+                .borderTop("1px solid var(--accent)")
+                .borderBottom("1px solid var(--accent)")
+                .outline("0.5px solid black")
+                .borderRadius(7, px)
+                .transition("padding .2s")
+                .padding(0.5, em)
+                .position("absolute")
+                .x(50, vw).y(7, em)
+                .transform("translate(-50%, -50%)")
+                .onInput(() => {
+                    console.log('typing')
+                })
+                .onFocus(function (focusing) {
+                    if(focusing) {
+                        this.style.padding = "1em"
+                        this.style.borderColor = "var(--darkred)"
+                    } else {
+                        this.style.padding = "0.5em"
+                        this.style.borderColor = "var(--accent)"
+                    }
+                })
+            
+            // VStack(() => {
+            //     const json = this.getJSONData()
+
+            //     p(json.length + " Entries")
+            //         .marginBottom(2, em)
+
+            //     // Split into two alternating columns
+            //     const left = []
+            //     const right = []
+                
+            //     for (let i = 0; i < 200; i++) {
+            //         if (i % 2 === 0) {
+            //             left.push(json[i])
+            //         } else {
+            //             right.push(json[i])
+            //         }
+            //     }
+                
+            //     console.log(left)
+            //     HStack(() => {
+            //         // LEFT COLUMN
+            //         VStack(() => {
+            //             for (let item of left) {
+            //                 p(item.name)
+            //                     .marginLeft(0, em)
+            //                     .marginBottom(0.1, em)
+            //             }
+            //         })
+
+            //         // RIGHT COLUMN
+            //         VStack(() => {
+            //             for (let item of right) {
+            //                 p(item.name)
+            //                     .marginLeft(0, em)
+            //                     .marginBottom(0.1, em)
+            //             }
+            //         })
+            //         .marginLeft(3, em) // spacing between columns
+            //     })
+            // })
+            // .paddingLeft(5, em)
+            // .paddingTop(10, em)
+        })
+    }
+
+    getJSONData() {
+        const script = document.getElementById('jsonData');
+        if (!script) {
+            console.warn('initial-data script not found');
+            return null;
+        }
+
+        try {
+            // script.textContent is the raw JSON string
+            const data = JSON.parse(script.textContent);
+            console.log(data)
+            return data;
+        } catch (err) {
+            console.error('Failed to parse initial-data JSON:', err);
+            return null;
+        }
+    }
+}
+
+register(DownloadsPanel)
\ No newline at end of file
diff --git a/ui/components/Home.js b/ui/components/Home.js
index 0a4efba..b88af4b 100644
--- a/ui/components/Home.js
+++ b/ui/components/Home.js
@@ -1,48 +1,22 @@
+import "./NavMenu.js"
+import "./HomePanel.js"
+import "./DownloadsPanel.js"
+
 class Home extends Shadow {
 
-
-
     render() {
         ZStack(() => {
-            input("", "60vw")
-                .backgroundColor("var(--accent3)")
-                .color("var(--accent)")
-                .border("none")
-                .borderTop("1px solid var(--accent)")
-                .borderBottom("1px solid var(--accent)")
-                .outline("0.5px solid black")
-                .borderRadius(7, px)
-                .transition("padding .2s")
-                .padding(0.5, em)
-                .position("absolute")
-                .x(50, vw).y(7, em)
-                .transform("translate(-50%, -50%)")
-                .onInput(() => {
-                    console.log('typing')
-                })
-                .onFocus(function (focusing) {
-                    if(focusing) {
-                        this.style.padding = "1em"
-                        this.style.borderColor = "var(--darkred)"
-                    } else {
-                        this.style.padding = "0.5em"
-                        this.style.borderColor = "var(--accent)"
-                    }
-                })
-            
-            VStack(() => {
-                let json = this.getJSONData()
-                p(json.length + " Entries")
-                .marginBottom(2, em)
 
-                for(let i=0; i<100; i++) {
-                    p(json[i].name)
-                    .marginLeft(0, em)
-                    .marginBottom(0.1, em)
-                }
-            })
-            .paddingLeft(5, em)
-            .paddingTop(10, em)
+            NavMenu()
+
+            switch(window.location.pathname) {
+                case "/":
+                    HomePanel()
+                    break;
+                case "/downloads":
+                    DownloadsPanel()
+                    break;
+            }
         })
         .backgroundColor("var(--main)")
         .display("block")
@@ -52,24 +26,10 @@ class Home extends Shadow {
         .onAppear(() => {
             document.body.style.backgroundColor = "var(--main)"
         })
-    }
-
-    getJSONData() {
-        const script = document.getElementById('jsonData');
-        if (!script) {
-            console.warn('initial-data script not found');
-            return null;
-        }
-
-        try {
-            // script.textContent is the raw JSON string
-            const data = JSON.parse(script.textContent);
-            console.log(data)
-            return data;
-        } catch (err) {
-            console.error('Failed to parse initial-data JSON:', err);
-            return null;
-        }
+        .onNavigate(() => {
+            console.log("navved")
+            this.rerender()
+        })
     }
 }
 
diff --git a/ui/components/HomePanel.js b/ui/components/HomePanel.js
new file mode 100644
index 0000000..5e08913
--- /dev/null
+++ b/ui/components/HomePanel.js
@@ -0,0 +1,7 @@
+class HomePanel extends Shadow {
+    render() {
+
+    }
+}
+
+register(HomePanel)
\ No newline at end of file
diff --git a/ui/components/NavMenu.js b/ui/components/NavMenu.js
new file mode 100644
index 0000000..82b14c5
--- /dev/null
+++ b/ui/components/NavMenu.js
@@ -0,0 +1,37 @@
+class NavMenu extends Shadow {
+
+    NavButton(text) {
+        return p(text)
+            .cursor("default")
+            .onAppear(function () {
+                console.log(window.location.pathname, "/" + this.innerText.toLowerCase())
+                if(window.location.pathname === ("/" + this.innerText.toLowerCase())) {
+                    this.style.textDecoration = "underline"
+                }
+            })
+            .onHover(function (hovering) {
+                if(hovering) {
+                    this.style.textDecoration = "underline"
+                } else {
+                    this.style.textDecoration = ""
+                }
+            })
+            .onClick(function (done) {
+                if(done) {
+                    window.navigateTo(this.innerText === "Home" ? "/" : this.innerText.toLowerCase())
+                }
+            })
+    }
+
+    render() {
+        HStack(() => {
+            this.NavButton("Home")
+            this.NavButton("Downloads")
+        })
+        .gap(2, em)
+        .x(50, vw).y(5, vh)
+        .center()
+    }
+}
+
+register(NavMenu)
\ No newline at end of file
diff --git a/ui/index.html b/ui/index.html
index 705db67..d5c9356 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -1,12 +1,12 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <title>Downloads</title>
+    <title>Parchment</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="icon" href="/_/icons/logo.png">
     <link rel="stylesheet" href="/_/code/shared.css"></script>
     <script src="/_/code/quill.js"></script>
-    <script type="module" src="/index.js"></script>
+    <script type="module" src="/75820185/index.js"></script>
 </head>
 <body style="margin: 0px;">
 </body>
