diff --git a/package.json b/package.json
index 6ebdebb4..1d082777 100644
--- a/package.json
+++ b/package.json
@@ -11,17 +11,17 @@
     "@rooks/use-raf": "^4.11.0",
     "clsx": "^1.1.1",
     "date-fns": "^2.21.1",
-    "framer-motion": "^4.1.4",
+    "framer-motion": "^4.1.8",
     "immer": "^9.0.1",
-    "jotai": "^0.16.0",
+    "jotai": "^0.16.2",
     "preact": "^10.5.13",
     "react-rnd": "^10.2.4"
   },
   "devDependencies": {
-    "@preact/preset-vite": "^2.0.1",
+    "@preact/preset-vite": "^2.1.0",
     "@types/react": "^17.0.3",
     "autoprefixer": "^10.2.5",
-    "sass": "^1.32.8",
+    "sass": "^1.32.11",
     "typescript": "^4.2.4",
     "typescript-plugin-css-modules": "^3.2.0",
     "vite": "^2.2.1",
diff --git a/src/components/apps/Calculator/CalculatorButtonsArea/CalculatorButtonsArea.tsx b/src/components/apps/Calculator/CalculatorButtonsArea/CalculatorButtonsArea.tsx
index ca973528..7ac876a5 100644
--- a/src/components/apps/Calculator/CalculatorButtonsArea/CalculatorButtonsArea.tsx
+++ b/src/components/apps/Calculator/CalculatorButtonsArea/CalculatorButtonsArea.tsx
@@ -1,4 +1,4 @@
-import { mdiClose, mdiDivision, mdiMinus, mdiPercentOutline, mdiPlusMinusVariant } from '@mdi/js';
+import { mdiClose, mdiDivision, mdiEqual, mdiMinus, mdiPlus, mdiPlusMinusVariant } from '@mdi/js';
 import clsx from 'clsx';
 import { AppIcon } from '__/components/utils/AppIcon';
 import { ButtonBase } from '__/components/utils/ButtonBase';
@@ -11,9 +11,7 @@ export const CalculatorButtonsArea = () => {
       <ButtonBase class={css.topRowButton}>
         <AppIcon path={mdiPlusMinusVariant} />
       </ButtonBase>
-      <ButtonBase class={css.topRowButton}>
-        <AppIcon path={mdiPercentOutline} />
-      </ButtonBase>
+      <ButtonBase class={css.topRowButton}>%</ButtonBase>
       <ButtonBase class={css.operationButton}>
         <AppIcon path={mdiDivision} />
       </ButtonBase>
@@ -35,7 +33,9 @@ export const CalculatorButtonsArea = () => {
       <ButtonBase class={css.numberButton}>1</ButtonBase>
       <ButtonBase class={css.numberButton}>2</ButtonBase>
       <ButtonBase class={css.numberButton}>3</ButtonBase>
-      <ButtonBase class={css.operationButton}>+</ButtonBase>
+      <ButtonBase class={css.operationButton}>
+        <AppIcon path={mdiPlus} />
+      </ButtonBase>
 
       <ButtonBase
         class={clsx(css.numberButton, css.curvedBottomLeftButton)}
@@ -44,7 +44,9 @@ export const CalculatorButtonsArea = () => {
         0
       </ButtonBase>
       <ButtonBase class={css.numberButton}>,</ButtonBase>
-      <ButtonBase class={clsx(css.operationButton, css.curvedBottomRightButton)}>=</ButtonBase>
+      <ButtonBase class={clsx(css.operationButton, css.curvedBottomRightButton)}>
+        <AppIcon path={mdiEqual} />
+      </ButtonBase>
     </section>
   );
 };
diff --git a/src/components/topbar/TopBarTime.tsx b/src/components/topbar/TopBarTime.tsx
index 3cd3ab34..a5cedc7f 100644
--- a/src/components/topbar/TopBarTime.tsx
+++ b/src/components/topbar/TopBarTime.tsx
@@ -7,9 +7,5 @@ export const TopBarTime = () => {
 
   useInterval(() => setTime(new Date()), 2000);
 
-  return (
-    <div style={{ margin: '0 0.5rem' }}>
-      {format(time, 'EEE MMM dd')}&nbsp; {format(time, 'h:mm aa')}
-    </div>
-  );
+  return <div style={{ margin: '0 0.5rem' }}>{format(time, 'EEE MMM dd  h:mm aa')}</div>;
 };
diff --git a/src/types.d.ts b/src/types.d.ts
index 568bd5aa..1ae3a7d0 100644
--- a/src/types.d.ts
+++ b/src/types.d.ts
@@ -6,20 +6,25 @@ type ObjectKeys<Obj> = Obj extends object
   ? string[]
   : never;
 
+/** Object.keys now infers the union types from the object rather than `string[] */
 interface ObjectConstructor {
   keys<ObjectType>(o: ObjectType): ObjectKeys<ObjectType>;
 }
 
+/** localstorage.getItem<Type>('') return the `Type` rather than string */
 interface Storage {
   getItem<T extends string>(key: string): T | null;
 }
 
+/** Retrieves element type from an array */
 type Unpacked<ArrayLike> = ArrayLike extends (infer RootType)[] ? RootType : ArrayLike;
 
+/** Retrieves Root type from a promise or a function returning a promise */
 type Unpromisify<PromiseLike> = PromiseLike extends Promise<infer RootType>
   ? RootType
   : PromiseLike;
 
+/** Override to use the beautiful `class` instead of `className` when preact and @types/react are both in the soup */
 declare namespace React {
   interface HTMLAttributes<T> {
     class?: string;