diff --git a/projects/ngx-pinch-zoom/src/lib/components/presentational/brightness-controls/brightness-controls.component.ts b/projects/ngx-pinch-zoom/src/lib/components/presentational/brightness-controls/brightness-controls.component.ts
index 07e1480..ca3ef4e 100644
--- a/projects/ngx-pinch-zoom/src/lib/components/presentational/brightness-controls/brightness-controls.component.ts
+++ b/projects/ngx-pinch-zoom/src/lib/components/presentational/brightness-controls/brightness-controls.component.ts
@@ -31,7 +31,49 @@ import { Component, input, output } from '@angular/core';
             ></div>
         </div>
     `,
-    styles: [],
+    styles: [`
+        .pz-brightness-controls {
+            display: flex;
+            gap: 8px;
+            align-items: center;
+        }
+
+        .pz-brightness-button {
+            position: relative;
+            width: 48px;
+            height: 48px;
+            background-color: rgba(0, 0, 0, .8);
+            background-position: center;
+            background-repeat: no-repeat;
+            background-size: 24px;
+            border-radius: 4px;
+            opacity: 0.5;
+            cursor: pointer;
+            transition: opacity .1s;
+            user-select: none;
+        }
+
+        .pz-brightness-button:hover {
+            opacity: 0.7;
+        }
+
+        .pz-brightness-button-disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+        }
+
+        .pz-brightness-button-disabled:hover {
+            opacity: 0.3;
+        }
+
+        .pz-brightness-increase {
+            background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCI+PHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPjxwYXRoIGQ9Ik0yMCA4LjY5VjRoLTQuNjlMMTIgLjY5IDguNjkgNEg0djQuNjlMLjY5IDEyIDQgMTUuMzFWMjBoNC42OUwxMiAyMy4zMSAxNS4zMSAyMEgyMHYtNC42OUwyMy4zMSAxMiAyMCA4LjY5ek0xMiAxOGMtMy4zMSAwLTYtMi42OS02LTZzMi42OS02IDYtNiA2IDIuNjkgNiA2LTIuNjkgNi02IDZ6bTAtMTBjLTIuMjEgMC00IDEuNzktNCA0czEuNzkgNCA0IDQgNC0xLjc5IDQtNC0xLjc5LTQtNC00eiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==);
+        }
+
+        .pz-brightness-decrease {
+            background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCI+PHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPjxwYXRoIGQ9Ik0yMCA4LjY5VjRoLTQuNjlMMTIgLjY5IDguNjkgNEg0djQuNjlMLjY5IDEyIDQgMTUuMzFWMjBoNC42OUwxMiAyMy4zMSAxNS4zMSAyMEgyMHYtNC42OUwyMy4zMSAxMiAyMCA4LjY5ek0xMiAxOGMtMy4zMSAwLTYtMi42OS02LTZzMi42OS02IDYtNiA2IDIuNjkgNiA2LTIuNjkgNi02IDZ6IiBmaWxsPSIjZmZmIi8+PC9zdmc+);
+        }
+    `],
 })
 export class BrightnessControlsComponent {
     // Inputs
diff --git a/projects/ngx-pinch-zoom/src/lib/components/presentational/zoom-controls/zoom-controls.component.ts b/projects/ngx-pinch-zoom/src/lib/components/presentational/zoom-controls/zoom-controls.component.ts
index d608783..24d100c 100644
--- a/projects/ngx-pinch-zoom/src/lib/components/presentational/zoom-controls/zoom-controls.component.ts
+++ b/projects/ngx-pinch-zoom/src/lib/components/presentational/zoom-controls/zoom-controls.component.ts
@@ -19,7 +19,31 @@ import { Component, input, output } from '@angular/core';
             tabindex="0"
         ></div>
     `,
-    styles: [],
+    styles: [`
+        .pz-zoom-button {
+            color: #fff;
+            background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgc3R5bGU9IiI+PHJlY3QgaWQ9ImJhY2tncm91bmRyZWN0IiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB4PSIwIiB5PSIwIiBmaWxsPSJub25lIiBzdHJva2U9Im5vbmUiLz48ZyBjbGFzcz0iY3VycmVudExheWVyIiBzdHlsZT0iIj48dGl0bGU+TGF5ZXIgMTwvdGl0bGU+PHBhdGggZD0iTTE1LjUgMTRoLS43OWwtLjI4LS4yN0MxNS40MSAxMi41OSAxNiAxMS4xMSAxNiA5LjUgMTYgNS45MSAxMy4wOSAzIDkuNSAzUzMgNS45MSAzIDkuNSA1LjkxIDE2IDkuNSAxNmMxLjYxIDAgMy4wOS0uNTkgNC4yMy0xLjU3bC4yNy4yOHYuNzlsNSA0Ljk5TDIwLjQ5IDE5bC00Ljk5LTV6bS02IDBDNy4wMSAxNCA1IDExLjk5IDUgOS41UzcuMDEgNSA5LjUgNSAxNCA3LjAxIDE0IDkuNSAxMS45OSAxNCA5LjUgMTR6IiBpZD0ic3ZnXzEiIGNsYXNzPSIiIGZpbGw9IiNmZmZmZmYiIGZpbGwtb3BhY2l0eT0iMSIvPjxwYXRoIGQ9Ik0xMiAxMGgtMnYySDl2LTJIN1Y5aDJWN2gxdjJoMnYxeiIgaWQ9InN2Z18zIiBjbGFzcz0iIiBmaWxsPSIjZmZmZmZmIiBmaWxsLW9wYWNpdHk9IjEiLz48L2c+PC9zdmc+), url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCI+PHJlY3QgaWQ9ImJhY2tncm91bmRyZWN0IiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB4PSIwIiB5PSIwIiBmaWxsPSJub25lIiBzdHJva2U9Im5vbmUiLz48ZyBjbGFzcz0iY3VycmVudExheWVyIiBzdHlsZT0iIj48dGl0bGU+TGF5ZXIgMTwvdGl0bGU+PHBhdGggZD0iTTE1LjUgMTRoLS43OWwtLjI4LS4yN0MxNS40MSAxMi41OSAxNiAxMS4xMSAxNiA5LjUgMTYgNS45MSAxMy4wOSAzIDkuNSAzUzMgNS45MSAzIDkuNSA1LjkxIDE2IDkuNSAxNmMxLjYxIDAgMy4wOS0uNTkgNC4yMy0xLjU3bC4yNy4yOHYuNzlsNSA0Ljk5TDIwLjQ5IDE5bC00Ljk5LTV6bS02IDBDNy4wMSAxNCA1IDExLjk5IDUgOS41UzcuMDEgNSA5LjUgNSAxNCA3LjAxIDE0IDkuNSAxMS45OSAxNCA5LjUgMTR6TTcgOWg1djFIN3oiIGlkPSJzdmdfMiIgY2xhc3M9IiIgZmlsbD0iI2ZmZmZmZiIgZmlsbC1vcGFjaXR5PSIxIi8+PC9nPjwvc3ZnPg==);
+            background-color: rgba(0, 0, 0, .8);
+            background-position: center, -1000px;
+            background-repeat: no-repeat, no-repeat;
+            background-size: 40px;
+            width: 56px;
+            height: 56px;
+            border-radius: 4px;
+            opacity: 0.5;
+            cursor: pointer;
+            transition: opacity .1s;
+            user-select: none;
+        }
+
+        .pz-zoom-button-out {
+            background-position: -1000px, center;
+        }
+
+        .pz-zoom-button:hover {
+            opacity: 0.7;
+        }
+    `],
 })
 export class ZoomControlsComponent {
     // Inputs
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index a9d9512..ade9eaf 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,5 +1,5 @@
 import { Component, signal } from '@angular/core';
-import { PinchZoomComponent } from 'ngx-pinch-zoom';
+import { PinchZoomComponent } from '@brianpooe/ngx-pinch-zoom';
 
 /**
  * Example app demonstrating all ngx-pinch-zoom features.
diff --git a/tsconfig.json b/tsconfig.json
index 6068c79..58670e7 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -14,7 +14,8 @@
         "strict": true,
         "strictNullChecks": true,
         "paths": {
-            "ngx-pinch-zoom": ["dist/ngx-pinch-zoom/ngx-pinch-zoom", "dist/ngx-pinch-zoom"]
+            "ngx-pinch-zoom": ["dist/ngx-pinch-zoom/ngx-pinch-zoom", "dist/ngx-pinch-zoom"],
+            "@brianpooe/ngx-pinch-zoom": ["dist/ngx-pinch-zoom/ngx-pinch-zoom", "dist/ngx-pinch-zoom"]
         },
         "target": "ES2022",
         "module": "ES2022",