diff --git a/src/components/Generic/FloatingDialog.tsx b/src/components/Generic/FloatingDialog.tsx
index 4144c16..dde1428 100644
--- a/src/components/Generic/FloatingDialog.tsx
+++ b/src/components/Generic/FloatingDialog.tsx
@@ -1,6 +1,7 @@
 import { Close, UnfoldLess, UnfoldMore } from "@mui/icons-material";
 import { Box, IconButton, Modal, Tooltip, Typography } from "@mui/material";
 import { FC, ReactNode } from "react";
+import { useSettings } from "../../contexts/SettingsContext";
 
 interface FloatingDialog {
   sx?: any;
diff --git a/src/components/HeaderBar/HeaderBar.tsx b/src/components/HeaderBar/HeaderBar.tsx
index 88f0f86..6033893 100644
--- a/src/components/HeaderBar/HeaderBar.tsx
+++ b/src/components/HeaderBar/HeaderBar.tsx
@@ -1,8 +1,11 @@
 import { Box, Button, IconButton, Typography } from "@mui/material";
 import { WindowButtons } from "./WindowButtons";
 import { BugReport } from "@mui/icons-material";
+import { useRouter } from "next/router";
 
 export const HeaderBar = () => {
+  const router = useRouter();
+
   return (
     <Box
       className="titlebar"
@@ -38,7 +41,11 @@ export const HeaderBar = () => {
           flexDirection: "row",
         }}
       >
-        <IconButton href="/testing">
+        <IconButton
+          onClick={() => {
+            router.push("/testing");
+          }}
+        >
           <BugReport />
         </IconButton>
         <WindowButtons />
diff --git a/src/pages/testing.tsx b/src/pages/testing.tsx
index 5dfe6c7..377f099 100644
--- a/src/pages/testing.tsx
+++ b/src/pages/testing.tsx
@@ -1,24 +1,41 @@
+"use client";
+
 import { BugReport } from "@mui/icons-material";
-import { Box, Button, IconButton } from "@mui/material";
-import { configDir } from "@tauri-apps/api/path";
+import { Box, Button, IconButton, Typography } from "@mui/material";
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
 
 export default function Testing() {
-  const testing = async () => {
-    console.log(await configDir());
+  const router = useRouter();
+
+  const [configDir, setConfigDir] = useState<string>("");
+
+  const initializeConfigDir = async () => {
+    const { appConfigDir } = await import("@tauri-apps/api/path");
+    setConfigDir(await appConfigDir());
   };
 
+  useEffect(() => {
+    initializeConfigDir();
+  });
+
   return (
     <Box>
-      <IconButton href="/">
+      <IconButton
+        onClick={() => {
+          router.push("/");
+        }}
+      >
         <BugReport />
       </IconButton>
       <Button
         onClick={() => {
-          testing();
+          console.log(configDir);
         }}
       >
         Button
       </Button>
+      <Typography>{configDir}</Typography>
     </Box>
   );
 }