diff --git a/config b/config
new file mode 100644
index 0000000..130ce82
--- /dev/null
+++ b/config
@@ -0,0 +1,213 @@
+# Example configuration.
+# Everything after '#' is ignored
+# Format of the variables:
+#    [variable]: [value]
+# Whitespaces are ignored in the following locations:
+# - Before the variable
+# - After the ':'
+# - After the value
+#
+# String variables can be escaped ([Notation in config] -> "Result"):
+# - foo\\bar -> "foo<backlash>bar"
+# - foo\nbar -> "foo<newline>bar"
+# - foo\sbar -> "foo bar"
+
+# If true, gBar ignores *.scss files and only tries to load *.css files.
+# This is useful, if you don't want to SCSS, or if you want to use newer SCSS features,
+# that libsass (the backend gBar uses) doesn't support.
+ForceCSS: false
+
+# The following three options control the ordering of the widgets.
+# Reordering can cause slight margin inconsistencies,
+# so it is recommend to only make minor adjustments to the default layout.
+# Adding the same widget multiple times to the layout is *not* supported and will cause issues.
+
+# Widgets to show on the left side
+WidgetsLeft: [Workspaces]
+# Widgets to center
+WidgetsCenter: [Time]
+# Widgets to display on the right side
+WidgetsRight: [Tray, Packages, Audio, Bluetooth, Network, Disk, VRAM, GPU, RAM, CPU, Battery, Power]
+
+# The CPU sensor to use
+CPUThermalZone: /sys/devices/pci0000:00/0000:00:18.3/hwmon/hwmon2/temp1_input
+
+# The card to poll when using AMDGPU. If you don't have an AMD card, you can skip this config.
+# Possible values can be found by querying /sys/class/drm
+DrmAmdCard: card0
+
+# Relative path to AMD gpu thermal sensor, appended after /sys/class/drm/<DrmAmdCard>
+AmdGPUThermalZone: /device/hwmon/hwmon1/temp1_input
+
+# The command to execute on suspend
+SuspendCommand: ~/.config/scripts/sys.sh suspend
+
+# The command to execute on lock
+LockCommand: ~/.config/scripts/sys.sh lock
+
+# The command to execute on exit
+ExitCommand: killall Hyprland
+
+# The folder, where the battery sensors reside
+BatteryFolder: /sys/class/power_supply/BAT1
+
+# Threshold, when the battery is considered low and a different color (as specified by the 'battery-warning' CSS property) is applied
+BatteryWarnThreshold: 20
+
+# The partition to monitor with disk sensor
+DiskPartition: /
+
+# Overrides the icon of the nth (in this case the first) workspace.
+# Please note the missing space between "," and the symbol. Adding a space here adds it to the bar too!
+#WorkspaceSymbol: 1,
+
+# The default symbol for the workspaces
+DefaultWorkspaceSymbol: 
+
+# All of the icons that can be modified.
+# Please note that some icons require a space ("\s") (e.g. default ShutdownIcon)
+ShutdownIcon: \s
+RebootIcon: 󰑐
+SleepIcon: 󰏤
+LockIcon: 
+ExitIcon: 󰗼
+BTOffIcon: 󰂲
+BTOnIcon: 󰂯
+BTConnectedIcon: 󰂱
+DevKeyboardIcon: 󰌌\s
+DevMouseIcon: 󰍽\s
+DevHeadsetIcon: 󰋋\s
+DevControllerIcon: 󰖺\s
+DevUnknownIcon: \s
+SpeakerMutedIcon: 󰝟
+SpeakerHighIcon: 󰕾
+MicMutedIcon: 󰍭
+MicHighIcon: 󰍬
+PackageOutOfDateIcon: 󰏔\s
+
+# Scroll through the workspaces of the current monitor instead of all workspaces
+WorkspaceScrollOnMonitor: true
+
+# When true: Scroll up -> Next workspace instead of previous workspace. Analogous with scroll down
+WorkspaceScrollInvert: false
+
+# Number of workspaces to display. Displayed workspace IDs are 1-n (Default: 1-9)
+NumWorkspaces: 9
+
+# Hide trailing unused workspaces (by ID). A workspace is considered unused, if it has no window on it
+WorkspaceHideUnused: true
+
+# Use Hyprland IPC instead of the ext_workspace protocol for workspace polling.
+# Hyprland IPC is *slightly* less performant (+0.1% one core), but way less bug prone,
+# since the protocol is not as feature complete as Hyprland IPC.
+# NOTE: Hyprland no longer supports ext-workspace-unstable-v1 as of commit bb09334.
+# Hyprland IPC is thus *required* for workspace support under Hyprland >=v0.30.0!
+UseHyprlandIPC: true
+
+# The location of the bar
+# Needs to be capitalized!!
+# Values are: L (Left), R (Right), T (Top), B (bottom)
+Location: T
+
+# When the location is set to side, this option forces everything (even text) to be right-side up.
+# *Always* make sure to enable SensorTooltips when enabling this option. Failure to do so *will* cause graphical issues.
+IconsAlwaysUp: false
+
+# Forces the widgets in the center to be centered.
+# This can cause the right widget to clip outside, if there is not enough space on screen (e.g. when opening the text)
+# Setting this to false will definitely fix this issue, but it won't look very good, since the widgets will be off-center.
+# So try to decrease "CenterSpace" first, before setting this configuration to false.
+# Legacy name: CenterTime
+CenterWidgets: true
+
+# How much space should be reserved for the center widgets. Setting this too high can cause the right widgets to clip outside.
+# Therefore try to set it as low as possible if you experience clipping.
+# Although keep in mind, that a value that is too low can cause the widget to be be off-center,
+# which can also cause clipping.
+# If you can't find an optimal value, consider setting 'CenterWidgets' to false
+# Legacy name: TimeSpace
+CenterSpace: 300
+
+# Set datetime style
+DateTimeStyle: %a %D - %H:%M:%S %Z
+
+# Set datetime locale (defaults to system locale if not set or set to empty string)
+#DateTimeLocale: de_DE.utf8
+
+# How many characters of the title can be displayed. Note that higher values *will* cause styling issues, especially when it is in the center.
+# If you have the title in the center, consider also increasing "CenterSpace"
+MaxTitleLength: 30
+
+# Adds a audio input(aka. microphone) widget
+AudioInput: false
+
+# Sets the audio slider to be on reveal (Just like the sensors) when true. Only affects the bar.
+AudioRevealer: false
+
+# Sets the rate of change of the slider on each scroll. In Percent
+AudioScrollSpeed: 5
+
+# Display numbers instead of a slider for the two audio widgets. Doesn't affect the audio flyin
+AudioNumbers: false
+
+# Command that is run to check if there are out-of-date packages.
+# The script should return *ONLY* a number. If it doesn't output a number, updates are no longer checked.
+# Default value is applicable for Arch Linux. (See data/update.sh for a human-readable version)
+CheckPackagesCommand: p="$(checkupdates)"; e=$?; if [ $e -eq 127 ] ; then exit 127; fi; if [ $e -eq 2 ] ; then echo "0" && exit 0; fi; echo "$p" | wc -l
+
+
+# How often to check for updates. In seconds
+CheckUpdateInterval: 300
+
+# Limits the range of the audio slider. Only works for audio output.
+# Slider "empty" is AudioMinVolume, Slider "full" is AudioMaxVolume
+# AudioMinVolume: 30 # Audio can't get below 30%
+# AudioMaxVolume: 120 # Audio can't get above 120%
+
+# The network adapter to use. You can query /sys/class/net for all possible values
+NetworkAdapter: eno1
+
+# Disables the network widget when set to false
+NetworkWidget: true
+
+# Use tooltips instead of sliders for the sensors
+SensorTooltips: false
+
+# The size of the of the circular sensors
+SensorSize: 24
+
+# The size of the network icon
+NetworkIconSize: 24
+
+# Enables tray icons
+EnableSNI: true
+
+# SNIIconSize sets the icon size for a SNI icon.
+# SNIPaddingTop Can be used to push the Icon down. Negative values are allowed
+# SNIIconName overrides what icon from an icon theme to display.
+# SNIDisabled prevents an icon from being registered.
+# For all SNI properties: The first parameter is a filter of the tooltip(The text that pops up, when the icon is hovered) of the icon.
+# The wildcard filter '*' does not work for SNIIconName and SNIDisabled
+
+# Scale everything down to 25 pixels ('*' as filter means everything)
+#SNIIconSize: *, 25
+# Explicitly make OBS a bit smaller than default
+#SNIIconSize: OBS, 23
+# Nudges the Discord icon a bit down
+#SNIPaddingTop: Discord, 5
+# Override the default icon given to gBar by discord to an icon theme supplied one (Example is from papirus theme)
+#SNIIconName: Discord, discord-tray
+# Prevents steam from displaying. Note: Steam doesn't have a tooltip, which means the object path is filtered instead.
+#SNIDisabled: steam, true
+
+# These set the range for the network widget. The widget changes colors at six intervals:
+#    - Below Min...Bytes ("under")
+#    - Between ]0%;25%]. 0% = Min...Bytes; 100% = Max...Bytes ("low")
+#    - Between ]25%;50%]. 0% = Min...Bytes; 100% = Max...Bytes ("mid-low")
+#    - Between ]50%;75%]. 0% = Min...Bytes; 100% = Max...Bytes ("mid-high")
+#    - Between ]75%;100%]. 0% = Min...Bytes; 100% = Max...Bytes ("high")
+#    - Above Max...Bytes ("over")
+MinDownloadBytes: 0
+MaxDownloadBytes: 10485760 # 10 * 1024 * 1024 = 10 MiB
+MinUploadBytes:   0
+MaxUploadBytes:   5242880    # 5 * 1024 * 1024 = 5 MiB
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..c8d2224
--- /dev/null
+++ b/style.css
@@ -0,0 +1,399 @@
+* {
+  all: unset;
+  font-family: "JetBrainsMono Nerd Font";
+}
+
+.popup {
+  background-color: #282a36;
+  color: #50fa7b;
+  border-radius: 16px;
+}
+
+menu {
+  padding: 8px 8px 8px 8px;
+}
+
+.bar, tooltip {
+  background-color: #282a36;
+  border-radius: 16px;
+  margin: 2px 1rem 0;
+}
+
+.right {
+  border-radius: 16px;
+}
+
+.time-text {
+  font-size: 16px;
+}
+
+.title-text {
+  font-size: 16px;
+}
+
+.reboot-button {
+  font-size: 28px;
+  color: #6272a4;
+}
+
+.sleep-button {
+  font-size: 28px;
+  color: #6272a4;
+}
+
+.lock-button {
+  font-size: 22px;
+  color: #6272a4;
+}
+
+.exit-button {
+  font-size: 28px;
+  color: #6272a4;
+}
+
+.power-button {
+  font-size: 25px;
+  color: #ff5555;
+}
+
+.system-confirm {
+  color: #50fa7b;
+}
+
+trough {
+  border-radius: 3px;
+  border-width: 1px;
+  border-style: none;
+  background-color: #44475a;
+  min-width: 4px;
+  min-height: 4px;
+}
+
+slider {
+  border-radius: 0%;
+  border-width: 1px;
+  border-style: none;
+  margin: -9px -9px -9px -9px;
+  min-width: 16px;
+  min-height: 16px;
+  background-color: transparent;
+}
+
+highlight {
+  border-radius: 3px;
+  border-width: 1px;
+  border-style: none;
+  min-width: 6px;
+  min-height: 6px;
+}
+
+.audio-icon {
+  font-size: 24px;
+  color: #ffb86c;
+}
+
+.audio-volume {
+  font-size: 16px;
+  color: #ffb86c;
+}
+.audio-volume trough {
+  background-color: #44475a;
+}
+.audio-volume slider {
+  background-color: transparent;
+}
+.audio-volume highlight {
+  background-color: #ffb86c;
+}
+
+.mic-icon {
+  font-size: 24px;
+  color: #bd93f9;
+}
+
+.mic-volume {
+  font-size: 16px;
+  color: #bd93f9;
+}
+.mic-volume trough {
+  background-color: #44475a;
+}
+.mic-volume slider {
+  background-color: transparent;
+}
+.mic-volume highlight {
+  background-color: #bd93f9;
+}
+
+.package-outofdate {
+  margin: -5px -5px -5px -5px;
+  font-size: 24px;
+  color: #ff5555;
+}
+
+.bt-num {
+  font-size: 16px;
+  color: #1793D1;
+}
+
+.bt-label-on {
+  font-size: 20px;
+  color: #1793D1;
+}
+
+.bt-label-off {
+  font-size: 24px;
+  color: #1793D1;
+}
+
+.bt-label-connected {
+  font-size: 28px;
+  color: #1793D1;
+}
+
+.disk-widget * {
+  color: #bd93f9;
+  font-size: 16px;
+}
+
+.disk-util-progress {
+  background-color: #44475a;
+}
+
+.vram-widget * {
+  color: #ffb86c;
+  font-size: 16px;
+}
+
+.vram-util-progress {
+  background-color: #44475a;
+}
+
+.ram-widget * {
+  color: #f1fa8c;
+  font-size: 16px;
+}
+
+.ram-util-progress {
+  background-color: #44475a;
+}
+
+.gpu-widget * {
+  color: #8be9fd;
+  font-size: 16px;
+}
+
+.gpu-util-progress {
+  background-color: #44475a;
+}
+
+.cpu-widget * {
+  color: #50fa7b;
+  font-size: 16px;
+}
+
+.cpu-util-progress {
+  background-color: #44475a;
+}
+
+.battery-widget * {
+  color: #ff79c6;
+  font-size: 16px;
+}
+
+.battery-util-progress {
+  background-color: #44475a;
+}
+
+.battery-charging {
+  color: #ffb86c;
+}
+
+.battery-warning {
+  color: #ff5555;
+}
+
+.network-data-text {
+  color: #50fa7b;
+  font-size: 16px;
+}
+
+.network-up-under {
+  color: #44475a;
+}
+
+.network-up-low {
+  color: #50fa7b;
+}
+
+.network-up-mid-low {
+  color: #f1fa8c;
+}
+
+.network-up-mid-high {
+  color: #ffb86c;
+}
+
+.network-up-high {
+  color: #bd93f9;
+}
+
+.network-up-over {
+  color: #ff5555;
+}
+
+.network-down-under {
+  color: #44475a;
+}
+
+.network-down-low {
+  color: #50fa7b;
+}
+
+.network-down-mid-low {
+  color: #f1fa8c;
+}
+
+.network-down-mid-high {
+  color: #ffb86c;
+}
+
+.network-down-high {
+  color: #bd93f9;
+}
+
+.network-down-over {
+  color: #ff5555;
+}
+
+.ws-dead {
+  color: #44475a;
+  font-size: 14px;
+}
+
+.ws-inactive {
+  color: #6272a4;
+  font-size: 14px;
+}
+
+.ws-visible {
+  color: #8be9fd;
+  font-size: 14px;
+}
+
+.ws-current {
+  color: #f1fa8c;
+  font-size: 14px;
+}
+
+.ws-active {
+  color: #50fa7b;
+  font-size: 14px;
+}
+
+@keyframes connectanim {
+  from {
+    background-image: radial-gradient(circle farthest-side at center, #1793D1 0%, transparent 0%, transparent 100%);
+  }
+  to {
+    background-image: radial-gradient(circle farthest-side at center, #1793D1 0%, #1793D1 100%, transparent 100%);
+  }
+}
+@keyframes disconnectanim {
+  from {
+    background-image: radial-gradient(circle farthest-side at center, transparent 0%, #1793D1 0%, #1793D1 100%);
+  }
+  to {
+    background-image: radial-gradient(circle farthest-side at center, transparent 0%, transparent 100%, #1793D1 100%);
+  }
+}
+@keyframes scanonanim {
+  from {
+    color: #f1fa8c;
+  }
+  to {
+    color: #50fa7b;
+  }
+}
+@keyframes scanoffanim {
+  from {
+    color: #50fa7b;
+  }
+  to {
+    color: #f1fa8c;
+  }
+}
+.bt-bg {
+  background-color: #282a36;
+  border-radius: 16px;
+}
+
+.bt-header-box {
+  margin-top: 4px;
+  margin-right: 8px;
+  margin-left: 8px;
+  font-size: 24px;
+  color: #1793D1;
+}
+
+.bt-body-box {
+  margin-right: 8px;
+  margin-left: 8px;
+}
+
+.bt-button {
+  border-radius: 16px;
+  padding-left: 8px;
+  padding-right: 8px;
+  padding-top: 4px;
+  padding-bottom: 4px;
+  margin-bottom: 4px;
+  margin-top: 4px;
+  font-size: 16px;
+}
+.bt-button.active {
+  animation-name: connectanim;
+  animation-duration: 50ms;
+  animation-timing-function: linear;
+  animation-fill-mode: forwards;
+}
+.bt-button.inactive {
+  animation-name: disconnectanim;
+  animation-duration: 50ms;
+  animation-timing-function: linear;
+  animation-fill-mode: forwards;
+}
+.bt-button.failed {
+  color: #ff5555;
+}
+
+.bt-close {
+  color: #ff5555;
+  background-color: #44475a;
+  border-radius: 16px;
+  padding: 0px 8px 0px 7px;
+  margin: 0px 0px 0px 8px;
+}
+
+.bt-scan {
+  color: #f1fa8c;
+  background-color: #44475a;
+  border-radius: 16px;
+  padding: 2px 11px 0px 7px;
+  margin: 0px 0px 0px 10px;
+  font-size: 18px;
+}
+.bt-scan.active {
+  animation-name: scanonanim;
+  animation-duration: 50ms;
+  animation-timing-function: linear;
+  animation-fill-mode: forwards;
+}
+.bt-scan.inactive {
+  animation-name: scanoffanim;
+  animation-duration: 50ms;
+  animation-timing-function: linear;
+  animation-fill-mode: forwards;
+}
+
+/*# sourceMappingURL=style.css.map */
diff --git a/style.scss b/style.scss
new file mode 100644
index 0000000..3500d98
--- /dev/null
+++ b/style.scss
@@ -0,0 +1,434 @@
+// colorscheme(dracula)
+// See https://github.com/dracula/dracula-theme/blob/master/LICENSE or dracula/LICENSE for the license
+$bg: #26272a;
+$fg: #f8f8f2;
+$inactive: #44475a;
+$darkblue: #6272a4;
+$cyan: #8be9fd;
+$green: #85dd5f;
+$orange: #eb895f;
+$pink: #ff79c6;
+$purple: #c98fe8;
+$red: #ff5555;
+$update: #e62c57;
+$yellow: #e6d62c;
+
+
+$btblue: #146dad;
+
+$textsize: 1rem;
+
+*{
+  all: unset;
+  font-family: "MartianMono Nerd Font";
+  font-weight: 600;
+}
+
+.popup {
+    background-color: $bg;
+    color: #50fa7b;
+    border-radius: 16px;
+}
+
+menu {
+    padding: 8px 8px 8px 8px;
+}
+
+// debug
+.cpu-box{
+    // background-color: #00cc00
+  font-weight: 600;
+}
+
+.bar,tooltip{
+  background-color: $bg;
+  border-radius: 16px;
+  margin: 2px 0.5rem 0;
+}
+
+.right {
+    border-radius: 16px;
+}
+
+.time-text {
+    font-size: $textsize;
+}
+
+.title-text {
+    font-size: $textsize;
+}
+
+.reboot-button {
+    font-size: 28px;
+    
+    color: $darkblue;
+}
+.sleep-button {
+    font-size: 28px;
+
+    color: $darkblue;
+}
+.lock-button {
+    font-size: 22px;
+
+    color: $darkblue;
+}
+.exit-button {
+    font-size: 28px;
+
+    color: $darkblue;
+}
+
+.power-button {
+    font-size: 25px;
+
+    color: $red;
+}
+
+.power-box {
+}
+
+.power-box-expand {
+}
+
+.system-confirm {
+    color: $green;
+}
+
+// Common slider settings
+trough {
+    border-radius: 3px;
+    border-width: 1px;
+    border-style: none;
+    background-color: $inactive;
+    // margin-top: 2px;
+    min-width: 4px;
+    min-height: 4px;
+}
+
+slider {
+    // Controls the size of the control area (set border-style to solid to see)
+    border-radius: 0%;
+    border-width: 1px;
+    border-style: none;
+    margin: -9px -9px -9px -9px;
+    min-width: 16px;
+    min-height: 16px;
+    background-color: transparent;
+}
+
+highlight {
+    border-radius: 3px;
+    border-width: 1px;
+    border-style: none;
+    // For vertical we need width, for horizontal we need height
+    // Both can coexist though
+    min-width: 6px;
+    min-height: 6px;
+}
+
+.audio-icon {
+    font-size: 24px;
+    color: $orange;
+}
+
+.audio-volume {
+    trough {
+        background-color: $inactive;
+    }
+
+    slider {
+        background-color: transparent;
+    }
+
+    highlight {
+        background-color: $orange;
+    }
+
+    font-size: 16px;
+    color: $orange;
+}
+
+.mic-icon {
+    font-size: 24px;
+    color: $purple;
+    // margin-right: 0px;
+}
+
+.mic-volume {
+    trough {
+        background-color: $inactive;
+    }
+
+    slider {
+        background-color: transparent;
+    }
+
+    highlight {
+        background-color: $purple;
+    }
+
+    font-size: 16px;
+    color: $purple;
+}
+
+.package-outofdate {
+    margin: -5px -5px -5px -5px;
+    font-size: 24px;
+    color: $update;
+}
+
+.bt-num {
+    font-size: $textsize;
+    color: $btblue;
+}
+.bt-label-on {
+    font-size: 20px;
+    color: $btblue;
+}
+.bt-label-off {
+    font-size: 24px;
+    color: $btblue;
+}
+.bt-label-connected {
+    font-size: 28px;
+    color: $btblue;
+}
+
+.disk-widget * {
+    color: $purple;
+    font-size: $textsize;
+}
+.disk-util-progress {
+    background-color: $inactive;
+}
+
+.vram-widget * {
+    color: $orange;
+    font-size: $textsize;
+}
+.vram-util-progress {
+    background-color: $inactive;
+}
+
+.ram-widget * {
+  color: $yellow;
+  font-size: $textsize;
+}
+.ram-util-progress {
+    background-color: $inactive;
+}
+
+.gpu-widget * {
+    color: $cyan;
+    font-size: $textsize;
+}
+.gpu-util-progress {
+    background-color: $inactive;
+}
+
+.cpu-widget * {
+    color: $green;
+    font-size: $textsize;
+}
+.cpu-util-progress {
+    background-color: $inactive;
+}
+
+.battery-widget * {
+    color: $pink;
+    font-size: $textsize;
+}
+.battery-util-progress {
+    background-color: $inactive;
+}
+
+.battery-charging {
+    color: $orange;
+}
+
+.battery-warning {
+    color: $red;
+}
+
+.network-data-text {
+    color: $green;
+    font-size: $textsize;
+}
+
+// <= 0% (Below MinUploadBytes)
+.network-up-under {
+    color: $inactive;
+}
+// <= 25%
+.network-up-low {
+    color: $green;
+}
+// <= 50%
+.network-up-mid-low {
+    color: $yellow;
+}
+// <= 75%
+.network-up-mid-high {
+    color: $orange;
+}
+// <= 100%
+.network-up-high {
+    color: $purple;
+}
+// > 100% (Above MaxUploadBytes)
+.network-up-over {
+    color: $red;
+}
+
+// <= 0% (Below MinDownloadBytes)
+.network-down-under {
+    color: $inactive;
+}
+// <= 25%
+.network-down-low {
+    color: $green;
+}
+// <= 50%
+.network-down-mid-low {
+    color: $yellow;
+}
+// <= 75%
+.network-down-mid-high {
+    color: $orange;
+}
+// <= 100%
+.network-down-high {
+    color: $purple;
+}
+// > 100% (Above MaxDownloadBytes)
+.network-down-over {
+    color: $red;
+}
+
+.ws-dead {
+    color: $inactive;
+    font-size: 14px;
+}
+.ws-inactive {
+    color: $darkblue;
+    font-size: 14px;
+}
+.ws-visible {
+    color: $cyan;
+    font-size: 14px;
+}
+.ws-current {
+    color: $yellow;
+    font-size: 14px;
+}
+.ws-active {
+    color: $green;
+    font-size: 14px;
+}
+
+// Bluetooth Widget
+@keyframes connectanim {
+    from {
+        background-image: radial-gradient(circle farthest-side at center, $btblue 0%, transparent 0%, transparent 100%)
+    }
+    to {
+        background-image: radial-gradient(circle farthest-side at center, $btblue 0%, $btblue 100%, transparent 100%)
+    }
+}
+@keyframes disconnectanim {
+    from {
+        background-image: radial-gradient(circle farthest-side at center, transparent 0%, $btblue 0%, $btblue 100%)
+    }
+    to {
+        background-image: radial-gradient(circle farthest-side at center, transparent 0%, transparent 100%, $btblue 100%)
+    }
+}
+
+@keyframes scanonanim {
+    from {
+        color: $yellow;
+    }
+    to {
+        color: $green;
+    }
+}
+@keyframes scanoffanim {
+    from {
+        color: $green;
+    }
+    to {
+        color: $yellow;
+    }
+}
+
+.bt-bg {
+    background-color: $bg;
+    border-radius: 16px;
+}
+.bt-header-box {
+    margin-top: 4px;
+    margin-right: 8px;
+    margin-left: 8px;
+    font-size: 24px;
+    color: $btblue;
+}
+.bt-body-box {
+    margin-right: 8px;
+    margin-left: 8px;
+}
+.bt-button {
+    &.active {
+        animation-name: connectanim;
+        animation-duration: 50ms;
+        animation-timing-function: linear;
+        animation-fill-mode: forwards;
+    }
+    &.inactive {
+        animation-name: disconnectanim;
+        animation-duration: 50ms;
+        animation-timing-function: linear;
+        animation-fill-mode: forwards;
+    }
+    &.failed {
+        color: $red;
+    }
+    border-radius: 16px;
+    padding-left: 8px;
+    padding-right: 8px;
+    padding-top: 4px;
+    padding-bottom: 4px;
+
+    margin-bottom: 4px;
+    margin-top: 4px;
+
+    font-size: 16px;
+    // color: $green;
+}
+.bt-close {
+    color: $red;
+    background-color: $inactive;
+    border-radius: 16px;
+	padding: 0px 8px 0px 7px;
+	margin: 0px 0px 0px 8px;
+}
+.bt-scan {
+    &.active {
+        animation-name: scanonanim;
+        animation-duration: 50ms;
+        animation-timing-function: linear;
+        animation-fill-mode: forwards;
+    }
+    &.inactive {
+        animation-name: scanoffanim;
+        animation-duration: 50ms;
+        animation-timing-function: linear;
+        animation-fill-mode: forwards;
+    }
+    color: $yellow;
+    background-color: $inactive;
+    border-radius: 16px;
+    padding: 2px 11px 0px 7px;
+	margin: 0px 0px 0px 10px;
+    font-size: 18px;
+}