diff --git a/eww/bars/hypr/bar/eww.css b/eww/bars/hypr/bar/eww.css
new file mode 100644
index 0000000..b3f48d7
--- /dev/null
+++ b/eww/bars/hypr/bar/eww.css
@@ -0,0 +1,91 @@
+.workspaces {
+  margin-left: 10px;
+  background-color: rgba(0, 0, 0, 0.4);
+  border-radius: 999px;
+}
+
+.workspace {
+  font-family: "Quicksand";
+  padding: 5px 15px;
+  font-weight: bold;
+  border-radius: 999px;
+}
+.workspace:hover {
+  color: #888;
+}
+
+.workspace.active {
+  color: #111;
+  background-color: rgb(116, 199, 236);
+  padding: 5px 20px;
+}
+
+.time {
+  padding: 5px 10px;
+  margin-right: 10px;
+  background-color: rgb(203, 166, 247);
+  font-family: "Iosevka Term";
+  font-weight: bold;
+  color: #111;
+  border-radius: 999px;
+}
+
+.battery {
+  padding: 5px 10px;
+  background-color: rgb(166, 227, 161);
+  font-family: "Iosevka Term";
+  font-weight: bold;
+  color: #111;
+  border-radius: 999px;
+}
+
+.brightness {
+  padding: 5px 10px;
+  background-color: rgb(249, 226, 175);
+  font-family: "Iosevka Term";
+  font-weight: bold;
+  color: #111;
+  border-radius: 999px;
+}
+
+.graphbox {
+  padding: 7px 10px;
+  font-family: "Jetbrains Mono";
+  font-weight: bold;
+  background-color: rgba(0, 0, 0, 0.4);
+  border-radius: 999px;
+}
+.cpu {
+  color: #74c7ec;
+}
+
+/* System tray styling */
+.systray {
+  background-color: rgba(0, 0, 0, 0.4);
+  padding: 5px 15px;
+  border-radius: 999px;
+}
+
+.background.popup {
+  background-color: #1e1e2e;
+  border: solid 2px rgba(255, 255, 255, 0.2);
+  border-radius: 8px;
+}
+
+.background.popup menuitem {
+  padding: 5px;
+  margin: 0px 2px;
+}
+
+.background.popup menuitem:hover {
+  background-color: rgba(255, 255, 255, 0.2);
+}
+
+.background.popup menuitem:disabled {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.background.popup separator {
+  margin: 0px 5px;
+  border-bottom: solid 1px rgba(255, 255, 255, 0.5);
+}
diff --git a/eww/bars/hypr/bar/eww.yuck b/eww/bars/hypr/bar/eww.yuck
new file mode 100644
index 0000000..3212b2e
--- /dev/null
+++ b/eww/bars/hypr/bar/eww.yuck
@@ -0,0 +1,106 @@
+(defwindow hyprbar
+  :monitor 0
+  :geometry (geometry :x "0px"
+                      :y "0px"
+                      :width "100%"
+                      :height "40px"
+                      :anchor "bottom center")
+  :stacking "fg"
+  :focusable false
+  :exclusive true
+  :hexpand false
+  (centerbox
+    (hyprworkspaces)
+    (empty)
+    (box
+      :space-evenly false
+      :spacing 10
+      :halign "end"
+      (cpu)
+      (brightness)
+      (battery)
+      (systray
+        :valign "center"
+        :spacing 5
+        :class "systray"
+        :icon-size 18
+        :space-evenly false
+        )
+      (time)
+      )
+  )
+)
+
+(defwidget cpu [] 
+  (box
+    :class "graphbox"
+    :valign "center"
+    (overlay
+      (label :text "   ${round(EWW_CPU.avg, 2)}%" )
+      (graph
+        :value {EWW_CPU.avg}
+        :time-range "60s"
+        )
+      )
+    )
+  )
+
+(defwidget battery [] 
+  (box
+    :class "battery"
+    :valign "center"
+    (label 
+      :class "icon"
+      :text {battery_icon}
+      )
+    (label 
+      :text {EWW_BATTERY["BAT0"].capacity}
+      )
+    )
+  )
+
+(defwidget brightness [] 
+  (box
+    :class "brightness"
+    :valign "center"
+    (label 
+      :class "icon"
+      :text " "
+      )
+    (label 
+      :text {brightness}
+      )
+    )
+  )
+
+(defwidget time [] 
+  (box
+    :orientation "v"
+    :valign "center"
+    :class "time"
+      (label :text {formattime(EWW_TIME, "%l:%M:%S %p")})
+    )
+  )
+
+(defwidget hyprworkspaces []
+  (box
+    :class "workspaces"
+    :valign "center"
+    :halign "start"
+    :space-evenly false
+      (label :visible false :text {hyprland-active-workspace} ) ; Keep hyprland-active-workspace variable loaded
+
+      (for ws in hyprland-workspaces
+        (eventbox 
+          :visible {ws.id > 0}
+          :cursor "pointer"
+          (button
+            :class "workspace ${ws.id == hyprland-active-workspace.id ? 'active' : ''}"
+            :onclick "hyprctl dispatch workspace ${ws.id}"
+            (label :text {ws.id})
+            )
+        )
+      )
+
+    )
+  )
diff --git a/eww/bars/hypr/border/eww.css b/eww/bars/hypr/border/eww.css
new file mode 100644
index 0000000..a36921c
--- /dev/null
+++ b/eww/bars/hypr/border/eww.css
@@ -0,0 +1,11 @@
+.border {
+  border: solid rgba(0, 0, 0, 0);
+  border-width: 10px 10px 50px 10px;
+}
+
+.shadow {
+  border-radius: 8px;
+  box-shadow:
+    0px 0px 0px 60px rgba(30, 30, 46, 0.7),
+    /* <--- Border Color */ 1px 1px 5px 5px rgba(0, 0, 0, 0.3);
+}
diff --git a/eww/bars/hypr/border/eww.yuck b/eww/bars/hypr/border/eww.yuck
new file mode 100644
index 0000000..b90bda3
--- /dev/null
+++ b/eww/bars/hypr/border/eww.yuck
@@ -0,0 +1,20 @@
+(defwindow monitor-border
+  :monitor 0
+  :geometry (geometry :x "0px"
+                      :y "0px"
+                      :width "100%"
+                      :height "100%"
+                      :anchor "top left")
+  :stacking "bottom"
+  :windowtype "dock"
+  :focusable false
+  :hexpand false
+  (box 
+    :class "border"
+    (box 
+      :class "shadow"
+      (empty)
+      )
+    )
+)
+
diff --git a/eww/bars/hypr/data.yuck b/eww/bars/hypr/data.yuck
new file mode 100644
index 0000000..dc319f2
--- /dev/null
+++ b/eww/bars/hypr/data.yuck
@@ -0,0 +1,7 @@
+(defpoll hyprland-workspaces
+  :interval '0.3s'
+  'hyprctl -j workspaces')
+
+(defpoll hyprland-active-workspace
+  :interval '0.3s'
+  'hyprctl -j activeworkspace')
diff --git a/eww/bars/hypr/eww.css b/eww/bars/hypr/eww.css
new file mode 100644
index 0000000..8861d0f
--- /dev/null
+++ b/eww/bars/hypr/eww.css
@@ -0,0 +1,2 @@
+@import "border/eww.css";
+@import "bar/eww.css";
diff --git a/eww/bars/hypr/eww.yuck b/eww/bars/hypr/eww.yuck
new file mode 100644
index 0000000..b93d8db
--- /dev/null
+++ b/eww/bars/hypr/eww.yuck
@@ -0,0 +1,4 @@
+(include "bars/hypr/data.yuck")
+
+(include "bars/hypr/border/eww.yuck")
+(include "bars/hypr/bar/eww.yuck")
diff --git a/eww/eww.css b/eww/eww.css
index cdd098f..6f4bafc 100755
--- a/eww/eww.css
+++ b/eww/eww.css
@@ -1,5 +1,6 @@
 /* @import "bars/i3/eww.css"; */
 /* @import "cards/eww.css"; */
+@import "bars/hypr/eww.css";
 /* @import "catppuccin.css"; */
 
 * {
diff --git a/eww/eww.yuck b/eww/eww.yuck
index bd2b8d4..43527c5 100755
--- a/eww/eww.yuck
+++ b/eww/eww.yuck
@@ -1,5 +1,8 @@
 ; (include 'bars/i3/eww.yuck')
 ; (include 'cards/eww.yuck')
+(include 'bars/hypr/eww.yuck')
+(include 'data/music.yuck')
+(include 'data/system.yuck')
 
 ; Placeholder widget for centerboxes
 (defwidget empty []