Tabs in Chakra UI

IT18021080/Telemedicine-Chat-App/frontend/src/Pages/Homepage.js

 import React from "react";
-import {Container ,Box, Text} from "@chakra-ui/react";
+import {
+    Container,
+    Box,
+    Text,
+    Tab,
+    TabList,
+    TabPanel,
+    TabPanels,
+    Tabs,
+} from "@chakra-ui/react";
+import Login from "../components/Authentication/Login";
+import Signup from "../components/Authentication/Signup";
 
 const Homepage = () => {
     return (
@@ -19,8 +30,27 @@ const Homepage = () => {
                     Miner-Doc
                 </Text>
             </Box>
-            <Box>
+            <Box
+                bg="white" w="100%"
+                p={4} borderRadius="lg"
+                color="black"
+                borderWidth="1px"
+            >
 
+        <Tabs variant='soft-rounded' colorScheme='green'>
+            <TabList mb="1em">
+                <Tab width="50%">Login</Tab>
+                <Tab width="50%">Sign Up</Tab>
+            </TabList>
+             <TabPanels>
+                        <TabPanel>
+                            <Login />
+                        </TabPanel>
+                        <TabPanel>
+                            <Signup />
+                        </TabPanel>
+            </TabPanels>
+        </Tabs>
             </Box>
         </Container>
     );

IT18021080/Telemedicine-Chat-App/frontend/src/components/Authentication/Login.js

+import React from "react";
+
+const Login = () => {
+    return (
+        <div>
+            Login
+        </div>
+    );
+}
+
+export default Login;
\ No newline at end of file

IT18021080/Telemedicine-Chat-App/frontend/src/components/Authentication/Signup.js

+import React from "react";
+
+const Signup = () => {
+    return (
+        <div>
+          Signup
+        </div>
+    );
+}
+
+export default Signup;
\ No newline at end of file