diff --git a/components/BottomMenu.tsx b/components/BottomMenu.tsx
index 49cf9e1..286cf5d 100644
--- a/components/BottomMenu.tsx
+++ b/components/BottomMenu.tsx
@@ -57,7 +57,7 @@ const BottomMenu: FC<Props> = ({ className }) => {
       {pathname !== '/dashboard' && (
         <button
           disabled={isWelcoming}
-          className="bg-purple-400 p-1 h-12 rounded hover:bg-purple-400 disabled:hover:bg-purple-400 shadow-lg disabled:cursor-default"
+          className="h-12 p-1 bg-purple-400 rounded shadow-lg hover:bg-purple-400 disabled:hover:bg-purple-400 disabled:cursor-default"
           onClick={() => push('/dashboard')}
         >
           <HomeIcon className="h-full text-purple-50 dark:text-gray-900" />
@@ -74,7 +74,7 @@ const BottomMenu: FC<Props> = ({ className }) => {
           {'share' in navigator ? (
             <button
               disabled={isWelcoming}
-              className="p-1 h-16 w-10 rounded shadow-lg bg-purple-400 hover:bg-purple-400 disabled:hover:bg-purple-400 disabled:cursor-default"
+              className="w-10 h-16 p-1 bg-purple-400 rounded shadow-lg hover:bg-purple-400 disabled:hover:bg-purple-400 disabled:cursor-default"
               onClick={onShare}
             >
               <ShareIcon className="text-purple-50 dark:text-gray-900" />
@@ -113,7 +113,7 @@ const BottomMenu: FC<Props> = ({ className }) => {
                 }
               />
             </button>
-            <div className="border-purple-400 border-t-2 border-b-2 p-1 h-16 shadow-lg">
+            <div className="h-16 p-1 border-t-2 border-b-2 border-purple-400 shadow-lg">
               <QrcodeIcon className="h-full text-gray-900 dark:text-purple-100" />
             </div>
             <button
diff --git a/components/Layout.tsx b/components/Layout.tsx
index 6b0bd39..2241ba4 100644
--- a/components/Layout.tsx
+++ b/components/Layout.tsx
@@ -20,17 +20,17 @@ const Layout: FC<Props> = ({ children }) => {
   useListenToColorMedia()
 
   return (
-    <div className="dark:text-purple-50 bg-purple-50 dark:bg-gray-900 relative w-screen h-screen pt-4 pb-4 px-5 flex flex-col gap-4">
+    <div className="relative flex flex-col w-screen h-screen px-5 pt-4 pb-4 gap-4 dark:text-purple-50 bg-purple-50 dark:bg-gray-900">
       <header
         className={clsx('flex justify-between items-center', {
           'flex-row-reverse': leftHanded,
         })}
       >
         <div className="flex items-start">
-          <h1 className="font-extrabold text-2xl text-gray-900 dark:text-purple-100">
+          <h1 className="text-2xl font-extrabold text-gray-900 dark:text-purple-100">
             zep
           </h1>
-          <LightningBoltIcon className="text-gray-900 dark:text-purple-100 h-4" />
+          <LightningBoltIcon className="h-4 text-gray-900 dark:text-purple-100" />
         </div>
         <TopMenu />
       </header>
diff --git a/components/PinPad.tsx b/components/PinPad.tsx
index 7f15677..90eba8f 100644
--- a/components/PinPad.tsx
+++ b/components/PinPad.tsx
@@ -49,7 +49,7 @@ const PinPad: FC<Props> = ({}) => {
   }
 
   return (
-    <div className="flex flex-col items-center gap-10 w-full h-72 px-16 max-w-sm">
+    <div className="flex flex-col items-center w-full max-w-sm px-16 gap-10 h-72">
       <div
         ref={pinCirclesWrapRef}
         className={clsx({ 'animate-denied': denied })}
diff --git a/components/RecentTransactions.tsx b/components/RecentTransactions.tsx
index 589ba02..aef31ea 100644
--- a/components/RecentTransactions.tsx
+++ b/components/RecentTransactions.tsx
@@ -27,13 +27,13 @@ const RecentTransactions: FC<Props> = ({ className }) => {
   return (
     <>
       {hasReceivable && (
-        <section className="flex flex-col gap-3 w-full">
-          <div className="flex justify-between items-center gap-1">
-            <h2 className="text-2xl font-semibold text-purple-50 flex-1">
+        <section className="flex flex-col w-full gap-3">
+          <div className="flex items-center justify-between gap-1">
+            <h2 className="flex-1 text-2xl font-semibold text-purple-50">
               incoming
             </h2>
 
-            <span className="rounded-full w-6 text-center dark:bg-purple-50 text-gray-900 text-base">
+            <span className="w-6 text-base text-center text-gray-900 rounded-full dark:bg-purple-50">
               {receivableBlocks.length}
             </span>
             <ChevronUpIcon
@@ -55,7 +55,7 @@ const RecentTransactions: FC<Props> = ({ className }) => {
             {receivableBlocks.map(receivable => (
               <li
                 key={receivable.hash}
-                className="bg-purple-50 dark:hover:bg-gray-700 dark:bg-gray-800 dark:text-purple-50 shadow rounded px-3 py-3 flex items-center justify-between gap-2 text-black border-r-4 border-blue-400"
+                className="flex items-center justify-between px-3 py-3 text-black border-r-4 border-blue-400 rounded shadow bg-purple-50 dark:hover:bg-gray-700 dark:bg-gray-800 dark:text-purple-50 gap-2"
               >
                 <button
                   className="contents"
@@ -64,9 +64,9 @@ const RecentTransactions: FC<Props> = ({ className }) => {
                     onBlockReceived(receivable.hash)
                   }}
                 >
-                  <ClockIcon className="w-6 flex-shrink-0 text-blue-400" />
+                  <ClockIcon className="flex-shrink-0 w-6 text-blue-400" />
 
-                  <div className="overflow-hidden overflow-ellipsis text-left whitespace-nowrap">
+                  <div className="overflow-hidden text-left overflow-ellipsis whitespace-nowrap">
                     {Intl.DateTimeFormat([], {
                       day: '2-digit',
                       month: '2-digit',
@@ -94,11 +94,11 @@ const RecentTransactions: FC<Props> = ({ className }) => {
         </section>
       )}
       {accountHistory !== undefined && accountHistory.history !== '' && (
-        <section className="flex flex-col gap-3 w-full min-h-0 flex-1">
+        <section className="flex flex-col flex-1 w-full min-h-0 gap-3">
           <h2 className="text-2xl font-semibold text-purple-50">
             recent transactions
           </h2>
-          <ol className="flex flex-col gap-3 w-full overflow-auto">
+          <ol className="flex flex-col w-full overflow-auto gap-3">
             {accountHistory.history.map(txn => (
               <li
                 key={txn.hash}
@@ -109,13 +109,13 @@ const RecentTransactions: FC<Props> = ({ className }) => {
               >
                 <button className="contents" onClick={() => {}}>
                   {txn.type === 'send' ? (
-                    <UploadIcon className="w-6 text-yellow-300 flex-shrink-0" />
+                    <UploadIcon className="flex-shrink-0 w-6 text-yellow-300" />
                   ) : (
                     <DownloadIcon
                       className={clsx('w-6 flex-shrink-0 text-green-300')}
                     />
                   )}
-                  <div className="overflow-hidden overflow-ellipsis text-left flex-1 whitespace-nowrap">
+                  <div className="flex-1 overflow-hidden text-left overflow-ellipsis whitespace-nowrap">
                     {Intl.DateTimeFormat([], {
                       day: '2-digit',
                       month: '2-digit',
@@ -144,7 +144,7 @@ const RecentTransactions: FC<Props> = ({ className }) => {
       )}
       {!hasReceivable &&
         (accountHistory === undefined || accountHistory.history === '') && (
-          <div className="text-center pt-8 text-purple-50">
+          <div className="pt-8 text-center text-purple-50">
             <p className="pb-4">no transactions yet...</p>
             <p>
               get your first nano
@@ -155,7 +155,7 @@ const RecentTransactions: FC<Props> = ({ className }) => {
         )}
       {false && (
         <button
-          className="bg-purple-200 py-2 px-4 rounded dark:text-gray-900 font-bold shadow"
+          className="px-4 py-2 font-bold bg-purple-200 rounded shadow dark:text-gray-900"
           onClick={() => {}}
         >
           load more
diff --git a/lib/hooks/useReadQrFromVideo.ts b/lib/hooks/useReadQrFromVideo.ts
index 9205cc6..4d5ada6 100644
--- a/lib/hooks/useReadQrFromVideo.ts
+++ b/lib/hooks/useReadQrFromVideo.ts
@@ -48,7 +48,11 @@ const useReadQrFromVideo = (onQrCodeRead: (content: string) => void) => {
     start()
 
     return () => {
-      stream?.getTracks().forEach(track => track.stop())
+      console.log(stream, video, stream?.getTracks())
+      if (stream !== undefined) {
+        stream.getTracks().forEach(track => track.stop())
+        stream.addEventListener('addtrack', track => track.track.stop())
+      }
       stopTick = true
     }
   }, [onQrCodeRead])
diff --git a/pages/index.tsx b/pages/index.tsx
index 8def5c9..7afec71 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -21,7 +21,7 @@ const Landing = () => {
   }, [push])
 
   return (
-    <main className="flex flex-col items-center justify-evenly h-full w-full">
+    <main className="flex flex-col items-center w-full h-full justify-evenly">
       <header className="flex flex-col justify-center h-24">
         <h1 className="text-4xl">welcome</h1>
       </header>
diff --git a/pages/receive/qr.tsx b/pages/receive/qr.tsx
index 7c3e5f3..b311290 100644
--- a/pages/receive/qr.tsx
+++ b/pages/receive/qr.tsx
@@ -8,7 +8,7 @@ const MyQrCode: NextPage = () => {
   const canvasRef = useDrawQrCode({ address: account?.address ?? '' })
 
   return (
-    <div className="grid gap-6 place-content-center h-full w-full">
+    <div className="w-full h-full grid gap-6 place-content-center">
       <h1 className="text-3xl font-extrabold text-center text-purple-100 dark:text-gray-900">
         get scanned!
       </h1>
diff --git a/pages/send/qr.tsx b/pages/send/qr.tsx
index 032cf66..d69615f 100644
--- a/pages/send/qr.tsx
+++ b/pages/send/qr.tsx
@@ -21,7 +21,7 @@ const ReadQrCode: NextPage = () => {
   const { videoLive, videoRef } = useReadQrFromVideo(onQrCodeRead)
 
   return (
-    <div className="flex flex-col gap-4 items-center justify-center w-full h-full">
+    <div className="flex flex-col items-center justify-center w-full h-full gap-4">
       <h1 className="text-3xl font-semibold text-center text-purple-50">
         scan!
       </h1>
@@ -30,7 +30,7 @@ const ReadQrCode: NextPage = () => {
         ref={videoRef}
       />
       {!videoLive && (
-        <div className="w-full h-64 rounded bg-purple-400 animate-pulse"></div>
+        <div className="w-full h-64 bg-purple-400 rounded animate-pulse"></div>
       )}
     </div>
   )
diff --git a/pages/welcome/index.tsx b/pages/welcome/index.tsx
index 6c07fd8..4fc5479 100644
--- a/pages/welcome/index.tsx
+++ b/pages/welcome/index.tsx
@@ -4,15 +4,15 @@ import { useRouter } from 'next/router'
 const Welcome: NextPage = () => {
   const { push } = useRouter()
   return (
-    <div className="w-full text-center flex flex-col justify-center h-full text-purple-50">
-      <h1 className="text-4xl mb-3 font-bold">hey!</h1>
-      <p className="text-xl font-medium mb-2">
+    <div className="flex flex-col justify-center w-full h-full text-center text-purple-50">
+      <h1 className="mb-3 text-4xl font-bold">hey!</h1>
+      <p className="mb-2 text-xl font-medium">
         do you already have
         <br />a <b>nano</b> passphrase
         <br />
         you wanna use?
       </p>
-      <aside className="text-xs mb-3">
+      <aside className="mb-3 text-xs">
         your passphrase will{' '}
         <b className="font-extrabold">
           <em>never</em>
@@ -21,12 +21,12 @@ const Welcome: NextPage = () => {
         <br />
         and will only be decrypted for a few moments to send nano
       </aside>
-      <div className="flex flex-col gap-3 justify-center w-full mb-6">
-        <button className="dark:bg-gray-900 bg-purple-50 dark:hover:bg-gray-800 py-2 px-5 rounded text-lg font-bold shadow-lg hover:shadow-md active:shadow transition-all duration-100 text-gray-900 dark:text-purple-50">
+      <div className="flex flex-col justify-center w-full mb-6 gap-3">
+        <button className="px-5 py-2 text-lg font-bold text-gray-900 rounded shadow-lg dark:bg-gray-900 bg-purple-50 dark:hover:bg-gray-800 hover:shadow-md active:shadow transition-all duration-100 dark:text-purple-50">
           i have a passphrase/seed
         </button>
         <button
-          className="dark:bg-gray-900 bg-purple-50 dark:hover:bg-gray-800 py-2 px-5 rounded text-lg font-bold shadow-lg hover:shadow-md active:shadow transition-all duration-100 text-gray-900 dark:text-purple-50"
+          className="px-5 py-2 text-lg font-bold text-gray-900 rounded shadow-lg dark:bg-gray-900 bg-purple-50 dark:hover:bg-gray-800 hover:shadow-md active:shadow transition-all duration-100 dark:text-purple-50"
           onClick={() => push('/welcome/new')}
         >
           what&apos;s a passphrase?
diff --git a/pages/welcome/new/done.tsx b/pages/welcome/new/done.tsx
index a0b7264..e05d811 100644
--- a/pages/welcome/new/done.tsx
+++ b/pages/welcome/new/done.tsx
@@ -4,15 +4,15 @@ import { useRouter } from 'next/router'
 const Done: NextPage = () => {
   const { push } = useRouter()
   return (
-    <div className="flex flex-col h-full justify-start items-center text-center px-4 gap-2 text-purple-50">
-      <h1 className="text-9xl font-extrabold">3</h1>
+    <div className="flex flex-col items-center justify-start h-full px-4 text-center gap-2 text-purple-50">
+      <h1 className="font-extrabold text-9xl">3</h1>
       <p className="text-3xl">you&apos;re done!</p>
-      <p className="text-xl mb-5">
+      <p className="mb-5 text-xl">
         all the buttons are now enabled and you can start using <b>zep</b> and{' '}
         <b>nano</b>!
       </p>
       <button
-        className="dark:bg-gray-900 dark:text-purple-100 py-2 px-5 rounded text-xl bg-purple-50 font-bold text-gray-900"
+        className="px-5 py-2 text-xl font-bold text-gray-900 rounded dark:bg-gray-900 dark:text-purple-100 bg-purple-50"
         onClick={() => push('/dashboard')}
       >
         go!
diff --git a/pages/welcome/new/index.tsx b/pages/welcome/new/index.tsx
index 2b1474b..fcfa1a1 100644
--- a/pages/welcome/new/index.tsx
+++ b/pages/welcome/new/index.tsx
@@ -24,15 +24,15 @@ const New: NextPage = () => {
   }
 
   return (
-    <div className="flex flex-col h-full justify-start items-center text-center px-4 gap-2 text-purple-50">
-      <h1 className="text-9xl font-extrabold">{!storing ? 1 : 2}</h1>
+    <div className="flex flex-col items-center justify-start h-full px-4 text-center gap-2 text-purple-50">
+      <h1 className="font-extrabold text-9xl">{!storing ? 1 : 2}</h1>
       {!storing ? (
         <>
           <p className="text-lg">
             generate a <b>passphrase</b> and copy it to your clipboard
           </p>
           <button
-            className="dark:bg-gray-900 dark:text-purple-100 py-2 px-5 rounded text-xl bg-purple-50 font-bold text-gray-900"
+            className="px-5 py-2 text-xl font-bold text-gray-900 rounded dark:bg-gray-900 dark:text-purple-100 bg-purple-50"
             onClick={lazy}
           >
             generate passphrase
@@ -50,7 +50,7 @@ const New: NextPage = () => {
             store the <b>passphrase</b> securely in zep
           </p>
           <button
-            className="dark:bg-gray-900 dark:text-purple-100 py-2 px-5 rounded text-xl bg-purple-50 font-bold text-gray-900"
+            className="px-5 py-2 text-xl font-bold text-gray-900 rounded dark:bg-gray-900 dark:text-purple-100 bg-purple-50"
             onClick={onStoreClick}
           >
             store passphrase