diff --git a/home/toph/common/optional/hyprland/ags/.gitignore b/home/toph/common/optional/hyprland/ags/.gitignore
new file mode 100644
index 0000000..298eb4d
--- /dev/null
+++ b/home/toph/common/optional/hyprland/ags/.gitignore
@@ -0,0 +1,2 @@
+node_modules/
+@girs/
diff --git a/home/toph/common/optional/hyprland/ags/app.ts b/home/toph/common/optional/hyprland/ags/app.ts
new file mode 100644
index 0000000..7e8cc7c
--- /dev/null
+++ b/home/toph/common/optional/hyprland/ags/app.ts
@@ -0,0 +1,10 @@
+import { App } from "astal/gtk4"
+import style from "./style.scss"
+import Bar from "./widget/Bar"
+
+App.start({
+    css: style,
+    main() {
+        App.get_monitors().map(Bar)
+    },
+})
diff --git a/home/toph/common/optional/hyprland/ags/default.nix b/home/toph/common/optional/hyprland/ags/default.nix
new file mode 100644
index 0000000..3f4f2eb
--- /dev/null
+++ b/home/toph/common/optional/hyprland/ags/default.nix
@@ -0,0 +1,32 @@
+{ inputs, pkgs, ... }:
+let
+  extraPkgs = with pkgs; [
+    fzf
+  ];
+
+  agsPkgs = with inputs.ags.packages.${pkgs.system}; [
+    apps
+    bluetooth
+    greet
+    hyprland
+    mpris
+    network
+    notifd
+    tray
+    wireplumber
+  ];
+in
+{
+  imports = [ inputs.ags.homeManagerModules.default ];
+
+  home.packages = [ inputs.astal.packages.${pkgs.system}.default ] ++ extraPkgs;
+
+  programs.ags = {
+    enable = true;
+
+    configDir = ../ags;
+
+    # additional packages to add to gjs's runtime
+    extraPackages = extraPkgs ++ agsPkgs;
+  };
+}
diff --git a/home/toph/common/optional/hyprland/ags/env.d.ts b/home/toph/common/optional/hyprland/ags/env.d.ts
new file mode 100644
index 0000000..467c0a4
--- /dev/null
+++ b/home/toph/common/optional/hyprland/ags/env.d.ts
@@ -0,0 +1,21 @@
+declare const SRC: string
+
+declare module "inline:*" {
+    const content: string
+    export default content
+}
+
+declare module "*.scss" {
+    const content: string
+    export default content
+}
+
+declare module "*.blp" {
+    const content: string
+    export default content
+}
+
+declare module "*.css" {
+    const content: string
+    export default content
+}
diff --git a/home/toph/common/optional/hyprland/ags/package.json b/home/toph/common/optional/hyprland/ags/package.json
new file mode 100644
index 0000000..10c87ff
--- /dev/null
+++ b/home/toph/common/optional/hyprland/ags/package.json
@@ -0,0 +1,6 @@
+{
+    "name": "astal-shell",
+    "dependencies": {
+        "astal": "/home/toph/.local/share/ags"
+    }
+}
diff --git a/home/toph/common/optional/hyprland/ags/style.scss b/home/toph/common/optional/hyprland/ags/style.scss
new file mode 100644
index 0000000..1d0d3a9
--- /dev/null
+++ b/home/toph/common/optional/hyprland/ags/style.scss
@@ -0,0 +1,20 @@
+// https://gitlab.gnome.org/GNOME/gtk/-/blob/gtk-3-24/gtk/theme/Adwaita/_colors-public.scss
+$fg-color: #{"@theme_fg_color"};
+$bg-color: #{"@theme_bg_color"};
+
+window.Bar {
+    background: transparent;
+    color: $fg-color;
+    font-weight: bold;
+
+    >centerbox {
+        background: $bg-color;
+        border-radius: 10px;
+        margin: 8px;
+    }
+
+    button {
+        border-radius: 8px;
+        margin: 2px;
+    }
+}
diff --git a/home/toph/common/optional/hyprland/ags/tsconfig.json b/home/toph/common/optional/hyprland/ags/tsconfig.json
new file mode 100644
index 0000000..a92bc43
--- /dev/null
+++ b/home/toph/common/optional/hyprland/ags/tsconfig.json
@@ -0,0 +1,14 @@
+{
+    "$schema": "https://json.schemastore.org/tsconfig",
+    "compilerOptions": {
+        "experimentalDecorators": true,
+        "strict": true,
+        "target": "ES2022",
+        "module": "ES2022",
+        "moduleResolution": "Bundler",
+        // "checkJs": true,
+        // "allowJs": true,
+        "jsx": "react-jsx",
+        "jsxImportSource": "astal/gtk4",
+    }
+}
diff --git a/home/toph/common/optional/hyprland/ags/widget/Bar.tsx b/home/toph/common/optional/hyprland/ags/widget/Bar.tsx
new file mode 100644
index 0000000..e3a8aca
--- /dev/null
+++ b/home/toph/common/optional/hyprland/ags/widget/Bar.tsx
@@ -0,0 +1,25 @@
+import { App, Astal, Gtk, Gdk } from "astal/gtk4";
+import { Variable } from "astal";
+
+const time = Variable("").poll(1000, "date");
+
+export default function Bar(gdkmonitor: Gdk.Monitor) {
+    const { TOP, LEFT, RIGHT } = Astal.WindowAnchor;
+
+    return (
+        <window visible cssClasses={["Bar"]} gdkmonitor={gdkmonitor} exclusivity={Astal.Exclusivity.EXCLUSIVE} anchor={TOP | LEFT | RIGHT} application={App}>
+            <centerbox cssName="centerbox">
+                <button onClicked="echo hello" hexpand halign={Gtk.Align.CENTER}>
+                    Welcome to AGS!
+                </button>
+                <box />
+                <menubutton hexpand halign={Gtk.Align.CENTER}>
+                    <label label={time()} />
+                    <popover>
+                        <Gtk.Calendar />
+                    </popover>
+                </menubutton>
+            </centerbox>
+        </window>
+    );
+}