diff --git a/package-lock.json b/package-lock.json
index d8f51b0..0b6959f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,7 @@
         "bootstrap": "^5.1.2",
         "dotenv": "^16.4.5",
         "lodash": "^4.17.21",
+        "lucide-react": "^0.525.0",
         "react": "^17.0.2",
         "react-bootstrap": "^1.6.4",
         "react-collapse": "^5.1.0",
@@ -10971,6 +10972,15 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/lucide-react": {
+      "version": "0.525.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.525.0.tgz",
+      "integrity": "sha512-Tm1txJ2OkymCGkvwoHt33Y2JpN5xucVq1slHcgE6Lk0WjDfjgKWor5CdVER8U6DvcfMwh4M8XxmpTiyzfmfDYQ==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/lz-string": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",
diff --git a/package.json b/package.json
index 4bf2567..1f36acc 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
     "bootstrap": "^5.1.2",
     "dotenv": "^16.4.5",
     "lodash": "^4.17.21",
+    "lucide-react": "^0.525.0",
     "react": "^17.0.2",
     "react-bootstrap": "^1.6.4",
     "react-collapse": "^5.1.0",
diff --git a/src/components/Navigation.js b/src/components/Navigation.js
index b03cf9a..d120e58 100644
--- a/src/components/Navigation.js
+++ b/src/components/Navigation.js
@@ -1,5 +1,5 @@
 import React, { useContext, useState } from "react";
-import { Container, Pagination } from "react-bootstrap";
+import { Container } from "react-bootstrap";
 
 import Filter from "./Buttons/Filter";
 import Sort from "./Buttons/Sort";
@@ -7,6 +7,7 @@ import Sort from "./Buttons/Sort";
 import { ThemeContext } from "../Context/themeContext";
 import "./Navigation.css";
 import Darkmode from "./Buttons/Darkmode";
+import {ChevronRight, ChevronLeft} from "lucide-react";
 
 const Navigation = ({
   setPageNumber,
@@ -66,11 +67,8 @@ const Navigation = ({
                   theme.mode === "light" ? "bg-black" : "bg-white"
                 } rounded-full flex justify-center items-center`}
               >
-                <div
-                  className={`w-5 h-5 border-r-4 border-b-4  rotate-[130deg] ${
-                    theme.mode === "light" ? "border-white" : "border-black"
-                  } `}
-                ></div>
+                <ChevronLeft style={{color: "white"}} />
+                
               </div>
 
               {paginationItems}
@@ -83,11 +81,7 @@ const Navigation = ({
                   theme.mode === "light" ? "bg-black" : "bg-white"
                 } rounded-full flex justify-center items-center`}
               >
-                <div
-                  className={`w-5 h-5 border-l-4 border-t-4 rotate-[130deg] ${
-                    theme.mode === "light" ? "border-white" : "border-black"
-                  }`}
-                ></div>
+               <ChevronRight style={{color: "white"}} />
               </div>
             </div>
           </>
diff --git a/src/components/SingleCard.js b/src/components/SingleCard.js
index 89df0e6..ded8986 100644
--- a/src/components/SingleCard.js
+++ b/src/components/SingleCard.js
@@ -1,15 +1,11 @@
-import { Card, Button } from "react-bootstrap";
 import { useState, useEffect, useContext } from "react";
 import Avatar from "@material-ui/core/Avatar";
-import Emoji from "react-emoji-render";
-import backg from "../git9.jpg";
 import axios from "axios";
 import { isEmpty } from "lodash";
 import iconButton from "./../button_icon.png";
 import Loading from "./Loading";
 import { ThemeContext } from "../Context/themeContext";
 
-
 const SingleCard = (props) => {
   // console.log(props.repo)
   const [repo, setRepo] = useState(null);