tried to add search icon

src/App.tsx

@@ -3,7 +3,7 @@ import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import CheckENVRoute from "./CheckENVRoute";
 import Home from "./components/home/Home";
 import Login from "./components/Login";
-import NotFound from "./components/NotFound";
+import NotFound from "./components/UtilityComponents/NotFound";
 import RepositoryInfo from "./components/repositoryInfo/RepositoryInfo";
 import ProtectedRoute from "./ProtectedRoute";
 

src/CheckENVRoute.tsx

@@ -1,5 +1,5 @@
 import { Outlet } from "react-router-dom";
-import ErrorENV from "./components/ErrorENV"
+import ErrorENV from "./components/UtilityComponents/ErrorENV"
 import React from "react";
 
 const CheckENVRoute: React.FC = () => {

src/components/UtilityComponents/IconTextField.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { TextField, InputAdornment } from "@mui/material";
+
+interface Props {
+    iconStart:  React.ReactNode;
+    iconEnd:  React.ReactNode;
+    others: any[]
+}
+
+const IconTextField: React.FC<Props> = (props) => {
+    // cosnt { iconStart, iconEnd, ...others } = props;
+    return (
+        <TextField
+        // {...props}
+        // InputProps={{
+        //     ...InputProps,
+        //     startAdornment: iconStart ? (
+        //     <InputAdornment position="start">{iconStart}</InputAdornment>
+        //     ) : null,
+        //     endAdornment: iconEnd ? (
+        //     <InputAdornment position="end">{iconEnd}</InputAdornment>
+        //     ) : null
+        // }}
+        />
+    );
+};
+
+export default IconTextField;

src/components/home/Home.tsx

@@ -3,7 +3,7 @@ import { List } from "@mui/material";
 import RepositoryItem from "./RepositoryEntry";
 import useRepositories from "../../hooks/useRepositories";
 import Repository from "../../interfaces/Repositoriy";
-import Loading from "../Loading";
+import Loading from "../UtilityComponents/Loading";
 
 const Home: React.FC = () => {
     const  { isFetched, repositories } = useRepositories();

src/components/repositoryInfo/RepositoryInfo.tsx

@@ -1,15 +1,38 @@
 import React from "react";
 import { useLocation, Link } from "react-router-dom";
-import { ListItemButton, Button, Box, Card, CardContent, Typography, CardActions, Grid, List, ListItemText, Snackbar, Alert, Tooltip, Collapse, FormGroup, FormControlLabel, Checkbox } from "@mui/material";
+import { 
+    ListItemButton,
+    Button,
+    Box,
+    Card,
+    CardContent,
+    Typography,
+    CardActions,
+    Grid,
+    List,
+    ListItemText,
+    Snackbar,
+    Alert,
+    Tooltip,
+    Collapse,
+    FormGroup,
+    FormControlLabel,
+    Checkbox,
+    FormControl,
+    InputLabel,
+    Select,
+    MenuItem,
+    TextField
+} from "@mui/material";
 import AccessTimeIcon from '@mui/icons-material/AccessTime';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import ExpandLessIcon from '@mui/icons-material/ExpandLess';
+import SearchIcon from '@mui/icons-material/Search';
 import useRepositories from "../../hooks/useRepositories";
 import Tag from "../../interfaces/Tag";
-import Repository from "../../interfaces/Repositoriy";
 import { getHostNameFromURL, printSize, printTimePassed, PrintOSIcon, toUpperFirst, printMonth } from "../../utils";
 import RepoNotFound from "./RepoNotFound"
-import Loading from "../Loading";
+import Loading from "../UtilityComponents/Loading";
 import { digestDisplay } from "../../interfaces/Utils";
 
 const RepositoryInfo: React.FC = () => {
@@ -56,6 +79,10 @@ const RepositoryInfo: React.FC = () => {
     const toggleCollapse = () => {
         setShowDetails((prev) => !prev);
     };
+
+    const handleSortTags = () => {
+
+    }
     
     return (isFetched ? (
         repository ? (
@@ -198,16 +225,29 @@ const RepositoryInfo: React.FC = () => {
                             <div className="wrapperCollapsed">  
                                 <Card className="tagSearchCard" variant="outlined">
                                     <CardContent>
-                                        <Grid container>
+                                        <Grid container style={{display:'flex', justifyContent:'space-between'}}>
-                                            <Grid item md={4}>
+                                            <Grid item md={2}>
-                                                <Typography className="lines" variant="h5" component="div" color="#94a1aa">
+                                                <FormControl fullWidth>
-                                                    Sort
+                                                    <InputLabel id="tag-sort-label">Sort By </InputLabel>
-                                                </Typography>
+                                                    <Select
+                                                        labelId="tag-sort-label"
+                                                        id="tag-sort-select"
+                                                        value="Newest"
+                                                        label="Sort By"
+                                                        onChange={handleSortTags}
+                                                    >
+                                                        <MenuItem value="Newest">Newest</MenuItem>
+                                                        <MenuItem value="Oldest">Oldest</MenuItem>
+                                                        <MenuItem value="A-Z">A-Z"</MenuItem>
+                                                        <MenuItem value="Z-A">Z-A</MenuItem>
+                                                    </Select>
+                                                </FormControl>
                                             </Grid>
-                                            <Grid item md={8}>
+                                            <Grid item md={6}>
-                                                <Typography className="lines" variant="h5" component="div" color="#94a1aa">
+                                                <TextField id="outlined-search-tags" label="Search" variant="outlined" style={{display:'flex', justifyContent:'space-between'}} />
-                                                    Search
+                                            </Grid>
-                                                </Typography>
+                                            <Grid item md={2} style={{display:'flex', justifyContent:'flex-end'}}>
+                                                <Button>Delete</Button>
                                             </Grid>
                                         </Grid>
                                     </CardContent>