diff --git a/frontend/src/Login.jsx b/frontend/src/Login.jsx
new file mode 100644
index 0000000..c7c16fc
--- /dev/null
+++ b/frontend/src/Login.jsx
@@ -0,0 +1,49 @@
+import ApiCalendar from "react-google-calendar-api";
+import React from 'react';
+import {} from 'react-router-dom'
+
+const config = {
+  clientId: process.env.GOOGLE_CLIENT_ID,
+  apiKey: process.env.GOOGLE_API_KEY,
+  scope: "https://www.googleapis.com/auth/calendar",
+  discoveryDocs: [
+    "https://www.googleapis.com/discovery/v1/apis/calendar/v3/rest",
+  ],
+};
+
+
+
+const apiCalendar = new ApiCalendar(config);
+export default class Login extends React.Component {
+  constructor(props) {
+    super(props);
+    this.handleItemClick = this.handleItemClick.bind(this);
+  }
+  handleItemClick(event, name) {
+    if (name === 'sign-in') {
+    console.log( apiCalendar.handleAuthClick())
+
+    } else if (name === 'sign-out') {
+      apiCalendar.handleSignoutClick();     }
+  }
+
+  
+  render() {
+    return (
+      <div>
+          <button
+              onClick={(e) => this.handleItemClick(e, 'sign-in')}
+              
+          >
+            sign-in
+          </button>
+          <button
+              onClick={(e) => this.handleItemClick(e, 'sign-out')}
+          >
+            sign-out
+          </button>
+       </div>
+      );
+  }
+}
+
diff --git a/frontend/src/components/Time.js b/frontend/src/components/Time.js
deleted file mode 100644
index 56ca01a..0000000
--- a/frontend/src/components/Time.js
+++ /dev/null
@@ -1,24 +0,0 @@
-// components/Time.js
-//import React from 'react';
-//import PropTypes from 'prop-types';
-
-const Time = ({ nome }) => {
-  // Função para mostrar o escudo quando o botão é clicado
-  const showLogo = () => {
-    alert(`Você selecionou o escudo do ${nome}`);
-    // Lógica para exibir o escudo
-  }
-
-  return (
-    <button onClick={showLogo}>
-      {nome}
-    </button>
-  );
-}
-
-Time.propTypes = {
-  nome: PropTypes.string.isRequired,
-  escudo: PropTypes.string.isRequired
-}
-
-export default Time;
diff --git a/frontend/src/index.jsx b/frontend/src/index.jsx
index 54b39dd..2a82937 100644
--- a/frontend/src/index.jsx
+++ b/frontend/src/index.jsx
@@ -1,10 +1,35 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App.jsx'
+import {
+  createBrowserRouter,
+  RouterProvider,
+} from "react-router-dom";
+import Time from "./routes/Time.jsx";
 import './index.css'
 
+const router = createBrowserRouter([
+
+  {
+      path:"/",
+      element: <App/>,
+
+  },
+  {
+    path: "/hello",
+    element: <div> hello</div>,
+  },
+  {
+    path: "/Time",
+    element: <Time />,
+  },
+
+
+]);
+
 ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>
-    <App />
+    <RouterProvider router={router} />
+  
   </React.StrictMode>,
 )
diff --git a/frontend/src/routes/Time.jsx b/frontend/src/routes/Time.jsx
new file mode 100644
index 0000000..ed55588
--- /dev/null
+++ b/frontend/src/routes/Time.jsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import BahiaLogo from '../assets/bahia.png'; // Corrigindo o caminho para os arquivos de imagem
+import flamengologo from '../assets/flamengo.png';
+import palmeiraslogo from '../assets/palmeiras.png';
+
+class Time extends React.Component {
+  // Função para mostrar o escudo quando o botão é clicado
+  showLogo = (teamName) => {
+    alert(`Você selecionou o ${teamName}`);
+    // Aqui você pode adicionar lógica para exibir o escudo
+  }
+
+  render() {
+    return (
+      <div>
+        <h1>Escolha seu time favorito para Acompanhar:</h1>
+        <button onClick={() => this.showLogo('Bahia')}> {/* Alterando para this.showLogo */}
+          <img src={BahiaLogo} alt="Bahia" style={{ width: '50px', height: '50px' }} /> Bahia
+        </button>
+        <button onClick={() => this.showLogo('Flamengo')}> {/* Alterando para this.showLogo e corrigindo o nome do time */}
+          <img src={flamengologo} alt="Flamengo" style={{ width: '50px', height: '50px' }} /> Flamengo 
+        </button>
+        <button onClick={() => this.showLogo('Palmeiras')}> {/* Alterando para this.showLogo e corrigindo o nome do time */}
+          <img src={palmeiraslogo} alt="Palmeiras" style={{ width: '50px', height: '50px' }} /> Palmeiras 
+        </button>
+        {/* Adicione mais botões conforme necessário */}
+      </div>
+    );
+  }
+}
+
+export default Time;
diff --git a/frontend/src/routes/root.jsx b/frontend/src/routes/root.jsx
new file mode 100644
index 0000000..50a0a28
--- /dev/null
+++ b/frontend/src/routes/root.jsx
@@ -0,0 +1,43 @@
+export default function Root() {
+    return (
+      <>
+        <div id="sidebar">
+          <h1>React Router Contacts</h1>
+          <div>
+            <form id="search-form" role="search">
+              <input
+                id="q"
+                aria-label="Search contacts"
+                placeholder="Search"
+                type="search"
+                name="q"
+              />
+              <div
+                id="search-spinner"
+                aria-hidden
+                hidden={true}
+              />
+              <div
+                className="sr-only"
+                aria-live="polite"
+              ></div>
+            </form>
+            <form method="post">
+              <button type="submit">New</button>
+            </form>
+          </div>
+          <nav>
+            <ul>
+              <li>
+                <a href={`/contacts/1`}>Your Name</a>
+              </li>
+              <li>
+                <a href={`/contacts/2`}>Your Friend</a>
+              </li>
+            </ul>
+          </nav>
+        </div>
+        <div id="detail"></div>
+      </>
+    );
+  }
\ No newline at end of file