diff --git a/src/components/ui/Stopwatch/Stopwatch.tsx b/src/components/ui/Stopwatch/Stopwatch.tsx
new file mode 100644
index 0000000..e183ad6
--- /dev/null
+++ b/src/components/ui/Stopwatch/Stopwatch.tsx
@@ -0,0 +1,23 @@
+// src/components/ui/Stopwatch/Stopwatch.tsx
+
+import { useEffect, useState } from 'react';
+
+const Stopwatch = () => {
+  const [seconds, setSeconds] = useState(0);
+  
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setSeconds(seconds => seconds + 1);
+    }, 1000);
+    
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <div>
+      Seconds: {seconds}
+    </div>
+  );
+};
+
+export default Stopwatch;
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index b426627..013b151 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -2,6 +2,7 @@
 
 import { type AppType } from "next/app";
 import ThemeProvider from "@components/ui/Theme/ThemeProvider";
+import Stopwatch from "@components/ui/Stopwatch/Stopwatch"; // New import
 import "../styles/globals.css";
 import { QueryClient, QueryClientProvider } from "react-query";
 import { v4 as uuid } from "uuid";
@@ -17,6 +18,7 @@ const MyApp: AppType = ({ Component, pageProps: { ...pageProps } }) => {
     // Provide the client to your App
     <ThemeProvider>
       <QueryClientProvider client={queryClient}>
+        <Stopwatch /> {/* New utilization */}
         <Component {...pageProps} />
       </QueryClientProvider>
     </ThemeProvider>
@@ -24,3 +26,4 @@ const MyApp: AppType = ({ Component, pageProps: { ...pageProps } }) => {
 };
 
 export default MyApp;
+