diff --git a/frontend/src/components/editor/ComposeCanvas.tsx b/frontend/src/components/editor/ComposeCanvas.tsx
index 6284ce5..52e6efc 100644
--- a/frontend/src/components/editor/ComposeCanvas.tsx
+++ b/frontend/src/components/editor/ComposeCanvas.tsx
@@ -307,7 +307,9 @@ export function ComposeCanvas({
         lastWidth = nextWidth;
         syncViewport();
       });
-      resizeObserver.observe(wrapperRef.current!);
+      if (wrapperRef.current) {
+        resizeObserver.observe(wrapperRef.current);
+      }
     };
 
     initCanvas().then();
diff --git a/frontend/src/components/editor/ToolBar.tsx b/frontend/src/components/editor/ToolBar.tsx
index 776d715..ef16a4a 100644
--- a/frontend/src/components/editor/ToolBar.tsx
+++ b/frontend/src/components/editor/ToolBar.tsx
@@ -11,7 +11,7 @@ import {
   XCircleIcon,
 } from "@phosphor-icons/react";
 import { Modal } from "../ui/Modal";
-import type { CanvasStyle } from "./ComposeCanvas.tsx";
+import type { CanvasStyle } from "./ComposeCanvas";
 
 interface ToolBarProps {
   onAddImage: () => void;
diff --git a/frontend/src/components/login/WelcomeModal.tsx b/frontend/src/components/login/WelcomeModal.tsx
index 54fb678..97dd30d 100644
--- a/frontend/src/components/login/WelcomeModal.tsx
+++ b/frontend/src/components/login/WelcomeModal.tsx
@@ -3,9 +3,9 @@ import {
   ShieldCheckIcon,
   WarningIcon,
 } from "@phosphor-icons/react";
-import Logo from "../Logo.tsx";
+import Logo from "../Logo";
 import { Modal } from "../ui/Modal";
-import Saajan from "../ui/Saajan.tsx";
+import Saajan from "../ui/Saajan";
 
 export default function WelcomeModal({
   setShowWelcome,
@@ -53,7 +53,7 @@ export default function WelcomeModal({
                   href="https://www.privacyguides.org/en/passwords/"
                   target="_blank"
                   className="link link-primary-content"
-                  rel="noopener"
+                  rel="noopener noreferrer"
                 >
                   password manager
                 </a>{" "}
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
index 56bbadc..90e6f0e 100644
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -7,7 +7,7 @@ import "@fontsource-variable/playwrite-hr-lijeva/wght.css";
 import "@fontsource-variable/jost/wght.css";
 import "@fontsource-variable/playfair-display/wght.css";
 
-import App from "./App.tsx";
+import App from "./App";
 
 const root = document.getElementById("root");
 if (root) {
diff --git a/frontend/src/pages/About.tsx b/frontend/src/pages/About.tsx
index b4412d1..3449f3f 100644
--- a/frontend/src/pages/About.tsx
+++ b/frontend/src/pages/About.tsx
@@ -25,7 +25,7 @@ import { ReactLenis } from "lenis/react";
 import { AnimatePresence, motion, useScroll, useTransform } from "motion/react";
 import { useEffect, useRef, useState } from "react";
 import stamp from "../assets/envelope/stamp.png";
-import Logo from "../components/Logo.tsx";
+import Logo from "../components/Logo";
 import { Modal } from "../components/ui/Modal";
 
 import "@fontsource/kavivanar/index.css";
@@ -35,7 +35,7 @@ import "@fontsource/architects-daughter/index.css";
 import { useNavigate } from "react-router-dom";
 
 function HorizontalScroll({ children }: { children: React.ReactNode }) {
-  const ref = useRef(null);
+  const ref = useRef<HTMLDivElement>(null);
   const { scrollYProgress } = useScroll({ target: ref });
   const x = useTransform(scrollYProgress, [0, 1], ["0%", "-50%"]);
 
@@ -257,7 +257,7 @@ function SpecsSection() {
           </a>{" "}
           for the <span className="font-hand text-primary">keys</span>.
         </h2>
-        <p className="text-sm md:text-xl leading-relaxed">
+        <div className="text-sm md:text-xl leading-relaxed">
           This means, both the{" "}
           <span className="font-display text-info">encryption</span> and{" "}
           <span className="font-display text-info">decryption</span> runs on
@@ -288,8 +288,8 @@ function SpecsSection() {
           <span className="italic">only you</span>&mdash;hold the very thing
           that opens that box,{" "}
           <span className="font-mono text-accent">your password</span>.
-        </p>
-        <p className="text-xs md:text-lg text-right w-full flex items-center justify-end gap-4 leading-relaxed text-neutral-content/80">
+        </div>
+        <div className="text-xs md:text-lg text-right w-full flex items-center justify-end gap-4 leading-relaxed text-neutral-content/80">
           <span>
             Nothing on the server is readable without your actual password.
             <br />
@@ -304,14 +304,14 @@ function SpecsSection() {
               (unless this happens)
             </a>
           </span>
-          <div className="w-18 h-18 flex shrink-0 items-center justify-center bg-success/20 rounded-full p-0 ">
+          <div className="w-18 h-18 flex shrink-0 items-center justify-end bg-success/20 rounded-full p-0 ">
             <VaultIcon
               size={36}
               weight="duotone"
               className="text-neutral-content"
             />
           </div>
-        </p>
+        </div>
 
         <button
           type={"button"}
diff --git a/frontend/src/pages/Drawer.tsx b/frontend/src/pages/Drawer.tsx
index 0a61541..0be1e0c 100644
--- a/frontend/src/pages/Drawer.tsx
+++ b/frontend/src/pages/Drawer.tsx
@@ -7,19 +7,19 @@ import {
 } from "@phosphor-icons/react";
 import { useState } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
-import { DrawerSection } from "../components/drawer/DrawerSection.tsx";
-import { LetterItem } from "../components/drawer/LetterItem.tsx";
-import { PasskeyModal } from "../components/drawer/PasskeyModal.tsx";
-import { WelcomeLetterOverlay } from "../components/drawer/WelcomeLetterOverlay.tsx";
+import { DrawerSection } from "../components/drawer/DrawerSection";
+import { LetterItem } from "../components/drawer/LetterItem";
+import { PasskeyModal } from "../components/drawer/PasskeyModal";
+import { WelcomeLetterOverlay } from "../components/drawer/WelcomeLetterOverlay";
 import Logo from "../components/Logo";
-import Saajan from "../components/ui/Saajan.tsx";
+import Saajan from "../components/ui/Saajan";
 import { PATHS } from "../config/routes";
 import { useAuth } from "../hooks/useAuth";
 import { useLetters } from "../hooks/useLetters";
 import {
   formatRelativeDate,
   formatRelativeDateWithoutTime,
-} from "../utils/dateFormat.ts";
+} from "../utils/dateFormat";
 
 export default function Drawer() {
   const { user, logout } = useAuth();
diff --git a/frontend/src/pages/Home.tsx b/frontend/src/pages/Home.tsx
index 8164748..73b7195 100644
--- a/frontend/src/pages/Home.tsx
+++ b/frontend/src/pages/Home.tsx
@@ -10,9 +10,9 @@ import { useRef, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import Logo from "../components/Logo";
 import { EnvelopeReveal } from "../components/reader/EnvelopeReveal";
-import Saajan from "../components/ui/Saajan.tsx";
-import { ROUTES } from "../config/routes.ts";
-import { formatDate } from "../utils/dateFormat.ts";
+import Saajan from "../components/ui/Saajan";
+import { ROUTES } from "../config/routes";
+import { formatDate } from "../utils/dateFormat";
 
 import "@fontsource/space-mono/index.css";
 import "@fontsource/architects-daughter/index.css";