diff --git a/packages/react-wavify/.prettierrc b/packages/react-wavify/.prettierrc
new file mode 100644
index 0000000..404c152
--- /dev/null
+++ b/packages/react-wavify/.prettierrc
@@ -0,0 +1,6 @@
+{
+  "arrowParens": "avoid",
+  "singleQuote": true,
+  "semi": false,
+  "trailingComma" : "none"
+}
diff --git a/packages/react-wavify/src/index.d.ts b/packages/react-wavify/src/index.d.ts
index 2dfbf74..4a781e0 100644
--- a/packages/react-wavify/src/index.d.ts
+++ b/packages/react-wavify/src/index.d.ts
@@ -1,27 +1,27 @@
-import React from "react";
+import React from 'react'
 
 type WaveOptions = {
-  height?: number;
-  amplitude?: number;
-  speed?: number;
-  points?: number;
-};
+  height?: number
+  amplitude?: number
+  speed?: number
+  points?: number
+}
 
 type BaseProps = Omit<
   React.SVGProps<SVGPathElement>,
-  "ref" | "height" | "width" | "points"
->;
+  'ref' | 'height' | 'width' | 'points'
+>
 
 type WaveProps = BaseProps &
   WaveOptions & {
-    paused?: boolean;
-    fill?: string;
-    options?: WaveOptions;
-    ref?: string;
-    svgId?: string;
-    svgPathId?: string;
-  };
+    paused?: boolean
+    fill?: string
+    options?: WaveOptions
+    ref?: string
+    svgId?: string
+    svgPathId?: string
+  }
 
-declare const Wave: React.FC<WaveProps>;
+declare const Wave: React.FC<WaveProps>
 
-export = Wave;
+export = Wave
diff --git a/packages/react-wavify/src/index.js b/packages/react-wavify/src/index.js
index 0346c77..4528227 100644
--- a/packages/react-wavify/src/index.js
+++ b/packages/react-wavify/src/index.js
@@ -1,21 +1,21 @@
-import React from "react";
-import WaveBase from "./wave";
+import React from 'react'
+import WaveBase from './wave'
 
 const defaults = {
-  fill: "#fff",
+  fill: '#fff',
   paused: false,
   height: 20,
   amplitude: 20,
   speed: 0.15,
-  points: 3,
-};
+  points: 3
+}
 
 const Wave = ({ options, ...rest }) => (
   <WaveBase {...Object.assign({}, defaults, options, rest)} />
-);
+)
 
 if (__isDev__) {
-  Wave.displayName = "Wave";
+  Wave.displayName = 'Wave'
 }
 
-export default Wave;
+export default Wave
diff --git a/packages/react-wavify/src/wave.js b/packages/react-wavify/src/wave.js
index ebc2e36..110dca0 100644
--- a/packages/react-wavify/src/wave.js
+++ b/packages/react-wavify/src/wave.js
@@ -1,92 +1,92 @@
-import React, { Component } from "react";
+import React, { Component } from 'react'
 
 class Wave extends Component {
   constructor(props) {
-    super(props);
-    this._container = React.createRef();
-    this.state = { path: "" };
-    this._lastUpdate = 0;
-    this._elapsed = 0;
-    this._step = 0;
-    this._update = this._update.bind(this);
+    super(props)
+    this._container = React.createRef()
+    this.state = { path: '' }
+    this._lastUpdate = 0
+    this._elapsed = 0
+    this._step = 0
+    this._update = this._update.bind(this)
   }
 
   _calculateWavePoints() {
-    const points = [];
+    const points = []
     for (let i = 0; i <= Math.max(this.props.points, 1); i++) {
-      const scale = 100;
-      const x = (i / this.props.points) * this._width();
+      const scale = 100
+      const x = (i / this.props.points) * this._width()
       const seed =
-        (this._step + (i + (i % this.props.points))) * this.props.speed * scale;
-      const height = Math.sin(seed / scale) * this.props.amplitude;
-      const y = Math.sin(seed / scale) * height + this.props.height;
-      points.push({ x, y });
+        (this._step + (i + (i % this.props.points))) * this.props.speed * scale
+      const height = Math.sin(seed / scale) * this.props.amplitude
+      const y = Math.sin(seed / scale) * height + this.props.height
+      points.push({ x, y })
     }
-    return points;
+    return points
   }
 
   _buildPath(points) {
-    let svg = `M ${points[0].x} ${points[0].y}`;
+    let svg = `M ${points[0].x} ${points[0].y}`
     const initial = {
       x: (points[1].x - points[0].x) / 2,
-      y: points[1].y - points[0].y + points[0].y + (points[1].y - points[0].y),
-    };
-    const cubic = (a, b) => ` C ${a.x} ${a.y} ${a.x} ${a.y} ${b.x} ${b.y}`;
-    svg += cubic(initial, points[1]);
-    let point = initial;
+      y: points[1].y - points[0].y + points[0].y + (points[1].y - points[0].y)
+    }
+    const cubic = (a, b) => ` C ${a.x} ${a.y} ${a.x} ${a.y} ${b.x} ${b.y}`
+    svg += cubic(initial, points[1])
+    let point = initial
     for (let i = 1; i < points.length - 1; i++) {
       point = {
         x: points[i].x - point.x + points[i].x,
-        y: points[i].y - point.y + points[i].y,
-      };
-      svg += cubic(point, points[i + 1]);
+        y: points[i].y - point.y + points[i].y
+      }
+      svg += cubic(point, points[i + 1])
     }
-    svg += ` L ${this._width()} ${this._height()}`;
-    svg += ` L 0 ${this._height()} Z`;
-    return svg;
+    svg += ` L ${this._width()} ${this._height()}`
+    svg += ` L 0 ${this._height()} Z`
+    return svg
   }
 
-  _width = () => this._container.current.offsetWidth;
-  _height = () => this._container.current.offsetHeight;
+  _width = () => this._container.current.offsetWidth
+  _height = () => this._container.current.offsetHeight
 
   _redraw() {
     this.setState({
-      path: this._buildPath(this._calculateWavePoints()),
-    });
+      path: this._buildPath(this._calculateWavePoints())
+    })
   }
 
   _draw() {
     if (!this.props.paused) {
-      const now = new Date();
-      this._elapsed += now - this._lastUpdate;
-      this._lastUpdate = now;
+      const now = new Date()
+      this._elapsed += now - this._lastUpdate
+      this._lastUpdate = now
     }
-    const scale = 1000;
-    this._step = (this._elapsed * Math.PI) / scale;
-    this._redraw();
+    const scale = 1000
+    this._step = (this._elapsed * Math.PI) / scale
+    this._redraw()
   }
 
   _update() {
-    this._draw();
+    this._draw()
     if (this._frameId) {
-      this._resume();
+      this._resume()
     }
   }
 
   _resume() {
-    this._frameId = window.requestAnimationFrame(this._update);
-    this._lastUpdate = new Date();
+    this._frameId = window.requestAnimationFrame(this._update)
+    this._lastUpdate = new Date()
   }
 
   componentDidMount() {
     if (!this._frameId) {
-      this._resume();
+      this._resume()
     }
   }
 
   componentWillUnmount() {
-    window.cancelAnimationFrame(this._frameId);
-    this._frameId = 0;
+    window.cancelAnimationFrame(this._frameId)
+    this._frameId = 0
   }
 
   render() {
@@ -106,10 +106,10 @@ class Wave extends Component {
       speed,
       points,
       ...rest
-    } = this.props;
+    } = this.props
     return (
       <div
-        style={{ width: "100%", display: "inline-block", ...style }}
+        style={{ width: '100%', display: 'inline-block', ...style }}
         className={className}
         id={id}
         ref={this._container}
@@ -126,13 +126,13 @@ class Wave extends Component {
             {...Object.assign(
               {},
               { d: this.state.path, fill, id: svgPathId },
-              rest,
+              rest
             )}
           />
         </svg>
       </div>
-    );
+    )
   }
 }
 
-export default Wave;
+export default Wave
diff --git a/packages/website/src/app/layout.tsx b/packages/website/src/app/layout.tsx
index 867cf22..15aa426 100644
--- a/packages/website/src/app/layout.tsx
+++ b/packages/website/src/app/layout.tsx
@@ -1,7 +1,6 @@
 import './global.css'
 import { Quicksand } from 'next/font/google'
 
-
 const quicksand = Quicksand({
   subsets: ['latin'],
   weight: ['700'],
diff --git a/packages/website/src/components/pause.tsx b/packages/website/src/components/pause.tsx
index bc7f7ad..2bf6174 100644
--- a/packages/website/src/components/pause.tsx
+++ b/packages/website/src/components/pause.tsx
@@ -9,7 +9,12 @@ type PauseProps = {
   className?: string
 }
 
-const Pause: React.FC<PauseProps> = ({ paused, onClick, className, ...rest }) => {
+const Pause: React.FC<PauseProps> = ({
+  paused,
+  onClick,
+  className,
+  ...rest
+}) => {
   const handleClick = () => {
     onClick()
   }
@@ -26,13 +31,19 @@ const Pause: React.FC<PauseProps> = ({ paused, onClick, className, ...rest }) =>
       onMouseUp={handleClick}
       title={label}
       aria-label={label}
-      className={clsx("text-[75px] border-0 text-[var(--color-primary)] bg-transparent [-webkit-tap-highlight-color:rgba(0,0,0,0)] hover:text-[var(--color-primaryHover)]", className)}
+      className={clsx(
+        'text-[75px] border-0 text-[var(--color-primary)] bg-transparent [-webkit-tap-highlight-color:rgba(0,0,0,0)] hover:text-[var(--color-primaryHover)]',
+        className
+      )}
       {...rest}
     >
-      {paused ? <PlayIcon className="w-[66px]" /> : <PauseIcon className="w-[66px]" />}
+      {paused ? (
+        <PlayIcon className="w-[66px]" />
+      ) : (
+        <PauseIcon className="w-[66px]" />
+      )}
     </button>
   )
 }
 
 export default Pause
-
diff --git a/packages/website/src/components/root.tsx b/packages/website/src/components/root.tsx
index e2c8e24..5572c15 100644
--- a/packages/website/src/components/root.tsx
+++ b/packages/website/src/components/root.tsx
@@ -2,7 +2,6 @@ import React from 'react'
 import Wave from 'components/wave'
 import clsx from 'clsx'
 
-
 const Center: React.FC<React.ComponentProps<'div'>> = ({
   className,
   ...rest