diff --git a/package-lock.json b/package-lock.json
index 7ac7499..1b4af85 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,6 +17,7 @@
         "lucide-react": "^0.344.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-icons": "^5.0.1",
         "react-router-dom": "^6.22.2",
         "tailwind-merge": "^2.2.1"
       },
@@ -6398,6 +6399,14 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-icons": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.0.1.tgz",
+      "integrity": "sha512-WqLZJ4bLzlhmsvme6iFdgO8gfZP17rfjYEJ2m9RsZjZ+cc4k1hTzknEz63YS1MeT50kVzoa1Nz36f4BEx+Wigw==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
diff --git a/package.json b/package.json
index 2afd899..423d921 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
     "lucide-react": "^0.344.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^5.0.1",
     "react-router-dom": "^6.22.2",
     "tailwind-merge": "^2.2.1"
   },
diff --git a/src/App.jsx b/src/App.jsx
index 55fd24f..37ae72b 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -7,6 +7,7 @@ import Home from "@/pages/Home";
 import NotFound from "@/pages/404";
 import Accordion from "@/pages/accordion/accordion";
 import RandomColor from "@/pages/RandomColor"
+import StarRating from "@/pages/starRating";
 
 function App() {
   return (
@@ -19,6 +20,8 @@ function App() {
           <Route path="accordion" element={<Accordion />} />
           {/* Random color generator */} 
           <Route path="color-generator" element={<RandomColor />} />
+          {/* Star Rating */}
+          <Route path="star-rating" element={<StarRating />} />
 
           {/* Error Page */}
           <Route path="*" element={<NotFound />} />
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
index bff30af..32e3a8f 100644
--- a/src/pages/Home.jsx
+++ b/src/pages/Home.jsx
@@ -7,6 +7,7 @@ function Home() {
       <p className="text-neutral-500 text-xs">I&apos;ll start on it when add the first componenet (project)</p>
       <Link to='accordion'>accordion</Link>
       <Link to='color-generator'>random Color Generator</Link>
+      <Link to='star-rating'>star rating</Link>
     </div>
   );
 }
diff --git a/src/pages/starRating.jsx b/src/pages/starRating.jsx
new file mode 100644
index 0000000..49774d8
--- /dev/null
+++ b/src/pages/starRating.jsx
@@ -0,0 +1,9 @@
+export default function StarRating() {
+  return (
+    <div
+      className={`container flex flex-1 flex-col items-center justify-start gap-8 my-10 w-full h-screen`}
+    >
+
+    </div>
+  );
+}