diff --git a/frontend/.env.example b/frontend/.env.example
new file mode 100644
index 00000000..2606d3a8
--- /dev/null
+++ b/frontend/.env.example
@@ -0,0 +1 @@
+REACT_APP_API=
\ No newline at end of file
diff --git a/frontend/.gitignore b/frontend/.gitignore
new file mode 100644
index 00000000..0563835d
--- /dev/null
+++ b/frontend/.gitignore
@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
\ No newline at end of file
diff --git a/frontend/src/App.js b/frontend/src/App.js
index a1f29590..12636704 100644
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -1,10 +1,10 @@
 import './App.css';
 import { BrowserRouter, Route, Routes } from "react-router-dom";
-import Navbar from "./component/Navbar";
+import Navbar from "./components/Navbar";
 import Home from "./pages/Home";
 import Search from './pages/Search';
 import { DataProvider } from './context/DataContext';
-import ImageTree from './pages/ImageTree';
+import ImageTree from './pages/3DTree';
 import React, { useEffect, useState } from 'react';
 import axios from 'axios';
 import { ToastContainer, toast } from 'react-toastify';
diff --git a/frontend/src/Style/home.css b/frontend/src/assets/Style/home.css
similarity index 100%
rename from frontend/src/Style/home.css
rename to frontend/src/assets/Style/home.css
diff --git a/frontend/src/Style/navbar.css b/frontend/src/assets/Style/navbar.css
similarity index 100%
rename from frontend/src/Style/navbar.css
rename to frontend/src/assets/Style/navbar.css
diff --git a/frontend/src/Style/profile.css b/frontend/src/assets/Style/profile.css
similarity index 100%
rename from frontend/src/Style/profile.css
rename to frontend/src/assets/Style/profile.css
diff --git a/frontend/src/Style/team.css b/frontend/src/assets/Style/team.css
similarity index 100%
rename from frontend/src/Style/team.css
rename to frontend/src/assets/Style/team.css
diff --git a/frontend/src/Style/tree.css b/frontend/src/assets/Style/tree.css
similarity index 100%
rename from frontend/src/Style/tree.css
rename to frontend/src/assets/Style/tree.css
diff --git a/frontend/src/image/b1.jpg b/frontend/src/assets/image/b1.jpg
similarity index 100%
rename from frontend/src/image/b1.jpg
rename to frontend/src/assets/image/b1.jpg
diff --git a/frontend/src/image/download.jpeg b/frontend/src/assets/image/download.jpeg
similarity index 100%
rename from frontend/src/image/download.jpeg
rename to frontend/src/assets/image/download.jpeg
diff --git a/frontend/src/image/logo.png b/frontend/src/assets/image/logo.png
similarity index 100%
rename from frontend/src/image/logo.png
rename to frontend/src/assets/image/logo.png
diff --git a/frontend/src/image/logo.svg b/frontend/src/assets/image/logo.svg
similarity index 100%
rename from frontend/src/image/logo.svg
rename to frontend/src/assets/image/logo.svg
diff --git a/frontend/src/pages/DTree.jsx b/frontend/src/components/2DTree.jsx
similarity index 95%
rename from frontend/src/pages/DTree.jsx
rename to frontend/src/components/2DTree.jsx
index 65c86345..5ea4dd9b 100644
--- a/frontend/src/pages/DTree.jsx
+++ b/frontend/src/components/2DTree.jsx
@@ -1,11 +1,11 @@
 import React, { useState } from 'react';
 import Tree from 'react-d3-tree';
-import '../Style/home.css'
+import '../assets/Style/home.css'
 import { CircularProgressbar } from 'react-circular-progressbar';
 import 'react-circular-progressbar/dist/styles.css';
-import Profile from '../component/Profile';
+import Profile from './Profile';
 
-const DTree = ({ data }) => {
+const TwoDTree = ({ data }) => {
   const [roll, setroll] = useState()
   const [showModal, setShowModal] = useState(false);
   const value = 0.5;
@@ -104,4 +104,4 @@ const DTree = ({ data }) => {
   )
 }
 
-export default DTree
+export default TwoDTree
diff --git a/frontend/src/pages/IitjTree.jsx b/frontend/src/components/Family.jsx
similarity index 88%
rename from frontend/src/pages/IitjTree.jsx
rename to frontend/src/components/Family.jsx
index 7c153274..d677a15c 100644
--- a/frontend/src/pages/IitjTree.jsx
+++ b/frontend/src/components/Family.jsx
@@ -1,7 +1,7 @@
-import '../Style/tree.css'
+import '../assets/Style/tree.css'
 import React, { useState } from 'react'
-import Profile from "../component/Profile";
-import profileimg from '../image/download.jpeg'
+import Profile from "./Profile";
+import profileimg from '../assets/image/download.jpeg'
 
 const IitjTree = ({ data }) => {
   const studentid = data.student
@@ -60,12 +60,12 @@ const IitjTree = ({ data }) => {
         <ul>
           {treeDatas.map((item, index) =>
             <li className={item.name + index} key={index}>
-              <div className={item.rollNo == 'B22AI063' ? "container_JYOTIN  " : "container"}
+              <div className={item.rollNo === 'B22AI063' ? "container_JYOTIN  " : "container"}
               // "container ${item.rollNo}" 
               >
                 <div 
                 // className="container_info"
-                className={item.rollNo == 'B22AI063' ? "container_info_JYOTIN  " : "container_info"}
+                className={item.rollNo === 'B22AI063' ? "container_info_JYOTIN  " : "container_info"}
                 >
                   <div className="hovertext" onClick={() => toggleModal(item.rollNo)}>{item.name.slice(0,15) + ''}</div>
                   <div className="info">
diff --git a/frontend/src/component/Navbar.jsx b/frontend/src/components/Navbar.jsx
similarity index 98%
rename from frontend/src/component/Navbar.jsx
rename to frontend/src/components/Navbar.jsx
index e3911d56..19b9f1b8 100644
--- a/frontend/src/component/Navbar.jsx
+++ b/frontend/src/components/Navbar.jsx
@@ -1,6 +1,6 @@
-import "../Style/navbar.css";
+import "../assets/Style/navbar.css";
 import { Link } from "react-router-dom";
-import logo from "../image/logo.png";
+import logo from "../assets/image/logo.png";
 import React, { useState } from "react";
 import { useQuery, gql } from "@apollo/client";
 import { useNavigate } from 'react-router-dom';
diff --git a/frontend/src/component/Profile.jsx b/frontend/src/components/Profile.jsx
similarity index 93%
rename from frontend/src/component/Profile.jsx
rename to frontend/src/components/Profile.jsx
index fd3d0733..048d6176 100644
--- a/frontend/src/component/Profile.jsx
+++ b/frontend/src/components/Profile.jsx
@@ -1,11 +1,10 @@
 import React from 'react'
-import '../Style/profile.css'
+import '../assets/Style/profile.css'
 import { Link } from "react-router-dom";
-import { AiOutlineCloseCircle } from 'react-icons/ai';
 import { FaLinkedin } from 'react-icons/fa';
 import { useQuery, gql } from "@apollo/client";
 import { FaChevronRight } from 'react-icons/fa';
-import demo from '../image/download.jpeg'
+import demo from '../assets/image/download.jpeg'
 function Profile({ toggleModal, rollNo }) {
   const FILMS_QUERY = gql`
     query Query($rollNo: String!) {
diff --git a/frontend/src/pages/Team.jsx b/frontend/src/components/Team.jsx
similarity index 85%
rename from frontend/src/pages/Team.jsx
rename to frontend/src/components/Team.jsx
index 70c4b2c8..63795524 100644
--- a/frontend/src/pages/Team.jsx
+++ b/frontend/src/components/Team.jsx
@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react'
-import '../Style/team.css'
+import '../assets/Style/team.css'
 import { FaLinkedin, FaGithub} from 'react-icons/fa';
 import { AiOutlineCloseCircle } from 'react-icons/ai';
 
@@ -16,10 +16,10 @@ const Team = ({ team, teamshow }) => {
         <AiOutlineCloseCircle style={{ fontSize: '2rem', }} onClick={team} className='closeshomepro' />
         <p>Ashutosh kumar (B22CS015)</p>
         <div className='iconsocialmedia'>
-          <a href='https://www.linkedin.com/in/ashutosh-kumar-5aa3b3259/' target='_blank'>
+          <a href='https://www.linkedin.com/in/ashutosh-kumar-5aa3b3259/' target='_blank' rel="noreferrer">
             <FaLinkedin style={{ fontSize: '2rem', color: 'white' }} onClick={team} />
           </a>
-          <a href='https://github.com/a19hu/' target='_blank'>
+          <a href='https://github.com/a19hu/' target='_blank' rel="noreferrer">
             <FaGithub style={{ fontSize: '2rem', color: 'white' }} onClick={team} />
           </a>
         </div>
diff --git a/frontend/src/hooks/useData.ts b/frontend/src/hooks/useData.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/frontend/src/hooks/useSearch.ts b/frontend/src/hooks/useSearch.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/frontend/src/pages/ImageTree.jsx b/frontend/src/pages/3DTree.jsx
similarity index 94%
rename from frontend/src/pages/ImageTree.jsx
rename to frontend/src/pages/3DTree.jsx
index b111da8a..9c6e0a25 100644
--- a/frontend/src/pages/ImageTree.jsx
+++ b/frontend/src/pages/3DTree.jsx
@@ -1,9 +1,9 @@
 import { ForceGraph3D } from 'react-force-graph';
 import React from 'react';
 import * as THREE from 'three';
-import defaultimage from '../image/download.jpeg'
-import logo from '../image/logo.png'
-import background from '../image/b1.jpg'
+import defaultimage from '../assets/image/download.jpeg'
+import logo from '../assets/image/logo.png'
+import background from '../assets/image/b1.jpg'
 
 const ImageTree = ({ data }) => {
   const nodes = [{
@@ -13,10 +13,8 @@ const ImageTree = ({ data }) => {
     img: logo
   }];
   const links = [];
-  var image;
   if (data[0]) {
 
-    image = data[0].picture.replace('open', 'thumbnail')
   }
 
   const processNode = (node, parentId) => {
diff --git a/frontend/src/pages/Home.jsx b/frontend/src/pages/Home.jsx
index 7aedaa05..c519a5c6 100644
--- a/frontend/src/pages/Home.jsx
+++ b/frontend/src/pages/Home.jsx
@@ -1,8 +1,8 @@
 import React, {useState} from 'react'
-import '../Style/home.css'
-import DTree from './DTree';
-import Team from './Team';
-import background from '../image/b1.jpg'
+import '../assets/Style/home.css'
+import TwoDTree from '../components/2DTree';
+import Team from '../components/Team';
+import background from '../assets/image/b1.jpg'
 const Home = ({data}) => {
   const [teamshow,setteamshow] = useState(false)
   const team=()=>{
@@ -26,7 +26,7 @@ const Home = ({data}) => {
        {teamshow && (
         <Team team={team} teamshow={teamshow}/>
        )}    
-        <DTree data={data}/>
+        <TwoDTree data={data}/>
 
 
     </div>
diff --git a/frontend/src/pages/Search.jsx b/frontend/src/pages/Search.jsx
index 001ec71c..cf5e2ecc 100644
--- a/frontend/src/pages/Search.jsx
+++ b/frontend/src/pages/Search.jsx
@@ -1,10 +1,10 @@
 import React from 'react';
 import { useQuery, gql, } from "@apollo/client";
-import IitjTree from './IitjTree';
+import IitjTree from '../components/Family';
 import { useNavigate,useParams } from 'react-router-dom';
 import { ToastContainer, toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
-import background from '../image/b1.jpg'
+import background from '../assets/image/b1.jpg'
 
 const Search = () => {
   const navigate = useNavigate();
diff --git a/frontend/src/types/index.ts b/frontend/src/types/index.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/frontend/src/utils/helpers.ts b/frontend/src/utils/helpers.ts
new file mode 100644
index 00000000..e69de29b