diff --git a/WebAdoption/.env b/WebAdoption/.env
new file mode 100644
index 0000000..b3bebac
--- /dev/null
+++ b/WebAdoption/.env
@@ -0,0 +1,4 @@
+VITE_CAT_API_URL =https://api.thecatapi.com/v1/images/search
+VITE_CAT_API_KEY =live_QArxJXyI8idb8DeOP04iowl5Iv6yTfSgd3PTbJUKw3WRyjs2V6lQxgvGc3DvQILw
+VITE_DOG_API_URL =https://api.thedogapi.com/v1/images/search
+VITE_DOG_API_KEY =llive_t6SIuI2zhBIqtpDO8jnuTDQ9Dksmi6XtrtiGjy5dMpK6wPr0nOpzSpscnJ6CEc3f
\ No newline at end of file
diff --git a/WebAdoption/package-lock.json b/WebAdoption/package-lock.json
index b1f1344..1d90c2a 100644
--- a/WebAdoption/package-lock.json
+++ b/WebAdoption/package-lock.json
@@ -8,8 +8,12 @@
       "name": "webadoption",
       "version": "0.0.0",
       "dependencies": {
+        "@reduxjs/toolkit": "^2.3.0",
         "react": "^18.3.1",
-        "react-dom": "^18.3.1"
+        "react-dom": "^18.3.1",
+        "react-icons": "^5.3.0",
+        "react-redux": "^9.1.2",
+        "react-router-dom": "^6.27.0"
       },
       "devDependencies": {
         "@eslint/js": "^9.11.1",
@@ -20,8 +24,7 @@
         "eslint-plugin-react": "^7.37.0",
         "eslint-plugin-react-hooks": "^5.1.0-rc.0",
         "eslint-plugin-react-refresh": "^0.4.12",
-        "globals": "^15.9.0",
-        "vite": "^5.4.8"
+        "globals": "^15.9.0"
       }
     },
     "node_modules/@ampproject/remapping": {
@@ -328,358 +331,6 @@
         "node": ">=6.9.0"
       }
     },
-    "node_modules/@esbuild/aix-ppc64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz",
-      "integrity": "sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==",
-      "cpu": [
-        "ppc64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "aix"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/android-arm": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.21.5.tgz",
-      "integrity": "sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/android-arm64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.21.5.tgz",
-      "integrity": "sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/android-x64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.21.5.tgz",
-      "integrity": "sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/darwin-arm64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.21.5.tgz",
-      "integrity": "sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/darwin-x64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.21.5.tgz",
-      "integrity": "sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/freebsd-arm64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.21.5.tgz",
-      "integrity": "sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "freebsd"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/freebsd-x64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.21.5.tgz",
-      "integrity": "sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "freebsd"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/linux-arm": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.21.5.tgz",
-      "integrity": "sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/linux-arm64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.21.5.tgz",
-      "integrity": "sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/linux-ia32": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.21.5.tgz",
-      "integrity": "sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==",
-      "cpu": [
-        "ia32"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/linux-loong64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.21.5.tgz",
-      "integrity": "sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg==",
-      "cpu": [
-        "loong64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/linux-mips64el": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.21.5.tgz",
-      "integrity": "sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg==",
-      "cpu": [
-        "mips64el"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/linux-ppc64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.21.5.tgz",
-      "integrity": "sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w==",
-      "cpu": [
-        "ppc64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/linux-riscv64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.21.5.tgz",
-      "integrity": "sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA==",
-      "cpu": [
-        "riscv64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/linux-s390x": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.21.5.tgz",
-      "integrity": "sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A==",
-      "cpu": [
-        "s390x"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/linux-x64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.21.5.tgz",
-      "integrity": "sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/netbsd-x64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.21.5.tgz",
-      "integrity": "sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "netbsd"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/openbsd-x64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.21.5.tgz",
-      "integrity": "sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "openbsd"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/sunos-x64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.21.5.tgz",
-      "integrity": "sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "sunos"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/win32-arm64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.21.5.tgz",
-      "integrity": "sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/win32-ia32": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.21.5.tgz",
-      "integrity": "sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA==",
-      "cpu": [
-        "ia32"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
     "node_modules/@esbuild/win32-x64": {
       "version": "0.21.5",
       "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.21.5.tgz",
@@ -692,6 +343,7 @@
       "os": [
         "win32"
       ],
+      "peer": true,
       "engines": {
         "node": ">=12"
       }
@@ -916,200 +568,36 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
-    "node_modules/@rollup/rollup-android-arm-eabi": {
-      "version": "4.24.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.24.0.tgz",
-      "integrity": "sha512-Q6HJd7Y6xdB48x8ZNVDOqsbh2uByBhgK8PiQgPhwkIw/HC/YX5Ghq2mQY5sRMZWHb3VsFkWooUVOZHKr7DmDIA==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "android"
-      ]
-    },
-    "node_modules/@rollup/rollup-android-arm64": {
-      "version": "4.24.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.24.0.tgz",
-      "integrity": "sha512-ijLnS1qFId8xhKjT81uBHuuJp2lU4x2yxa4ctFPtG+MqEE6+C5f/+X/bStmxapgmwLwiL3ih122xv8kVARNAZA==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "android"
-      ]
-    },
-    "node_modules/@rollup/rollup-darwin-arm64": {
-      "version": "4.24.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.24.0.tgz",
-      "integrity": "sha512-bIv+X9xeSs1XCk6DVvkO+S/z8/2AMt/2lMqdQbMrmVpgFvXlmde9mLcbQpztXm1tajC3raFDqegsH18HQPMYtA==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "darwin"
-      ]
-    },
-    "node_modules/@rollup/rollup-darwin-x64": {
-      "version": "4.24.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.24.0.tgz",
-      "integrity": "sha512-X6/nOwoFN7RT2svEQWUsW/5C/fYMBe4fnLK9DQk4SX4mgVBiTA9h64kjUYPvGQ0F/9xwJ5U5UfTbl6BEjaQdBQ==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "darwin"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
-      "version": "4.24.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.24.0.tgz",
-      "integrity": "sha512-0KXvIJQMOImLCVCz9uvvdPgfyWo93aHHp8ui3FrtOP57svqrF/roSSR5pjqL2hcMp0ljeGlU4q9o/rQaAQ3AYA==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-arm-musleabihf": {
-      "version": "4.24.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.24.0.tgz",
-      "integrity": "sha512-it2BW6kKFVh8xk/BnHfakEeoLPv8STIISekpoF+nBgWM4d55CZKc7T4Dx1pEbTnYm/xEKMgy1MNtYuoA8RFIWw==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-arm64-gnu": {
-      "version": "4.24.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.24.0.tgz",
-      "integrity": "sha512-i0xTLXjqap2eRfulFVlSnM5dEbTVque/3Pi4g2y7cxrs7+a9De42z4XxKLYJ7+OhE3IgxvfQM7vQc43bwTgPwA==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-arm64-musl": {
-      "version": "4.24.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.24.0.tgz",
-      "integrity": "sha512-9E6MKUJhDuDh604Qco5yP/3qn3y7SLXYuiC0Rpr89aMScS2UAmK1wHP2b7KAa1nSjWJc/f/Lc0Wl1L47qjiyQw==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-powerpc64le-gnu": {
-      "version": "4.24.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.24.0.tgz",
-      "integrity": "sha512-2XFFPJ2XMEiF5Zi2EBf4h73oR1V/lycirxZxHZNc93SqDN/IWhYYSYj8I9381ikUFXZrz2v7r2tOVk2NBwxrWw==",
-      "cpu": [
-        "ppc64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-riscv64-gnu": {
-      "version": "4.24.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.24.0.tgz",
-      "integrity": "sha512-M3Dg4hlwuntUCdzU7KjYqbbd+BLq3JMAOhCKdBE3TcMGMZbKkDdJ5ivNdehOssMCIokNHFOsv7DO4rlEOfyKpg==",
-      "cpu": [
-        "riscv64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-s390x-gnu": {
-      "version": "4.24.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.24.0.tgz",
-      "integrity": "sha512-mjBaoo4ocxJppTorZVKWFpy1bfFj9FeCMJqzlMQGjpNPY9JwQi7OuS1axzNIk0nMX6jSgy6ZURDZ2w0QW6D56g==",
-      "cpu": [
-        "s390x"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-x64-gnu": {
-      "version": "4.24.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.24.0.tgz",
-      "integrity": "sha512-ZXFk7M72R0YYFN5q13niV0B7G8/5dcQ9JDp8keJSfr3GoZeXEoMHP/HlvqROA3OMbMdfr19IjCeNAnPUG93b6A==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-x64-musl": {
-      "version": "4.24.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.24.0.tgz",
-      "integrity": "sha512-w1i+L7kAXZNdYl+vFvzSZy8Y1arS7vMgIy8wusXJzRrPyof5LAb02KGr1PD2EkRcl73kHulIID0M501lN+vobQ==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-win32-arm64-msvc": {
-      "version": "4.24.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.24.0.tgz",
-      "integrity": "sha512-VXBrnPWgBpVDCVY6XF3LEW0pOU51KbaHhccHw6AS6vBWIC60eqsH19DAeeObl+g8nKAz04QFdl/Cefta0xQtUQ==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "win32"
-      ]
+    "node_modules/@reduxjs/toolkit": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.3.0.tgz",
+      "integrity": "sha512-WC7Yd6cNGfHx8zf+iu+Q1UPTfEcXhQ+ATi7CV1hlrSAaQBdlPzg7Ww/wJHNQem7qG9rxmWoFCDCPubSvFObGzA==",
+      "dependencies": {
+        "immer": "^10.0.3",
+        "redux": "^5.0.1",
+        "redux-thunk": "^3.1.0",
+        "reselect": "^5.1.0"
+      },
+      "peerDependencies": {
+        "react": "^16.9.0 || ^17.0.0 || ^18",
+        "react-redux": "^7.2.1 || ^8.1.3 || ^9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-redux": {
+          "optional": true
+        }
+      }
     },
-    "node_modules/@rollup/rollup-win32-ia32-msvc": {
-      "version": "4.24.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.24.0.tgz",
-      "integrity": "sha512-xrNcGDU0OxVcPTH/8n/ShH4UevZxKIO6HJFK0e15XItZP2UcaiLFd5kiX7hJnqCbSztUF8Qot+JWBC/QXRPYWQ==",
-      "cpu": [
-        "ia32"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "win32"
-      ]
+    "node_modules/@remix-run/router": {
+      "version": "1.20.0",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.20.0.tgz",
+      "integrity": "sha512-mUnk8rPJBI9loFDZ+YzPGdeniYK+FTmRD1TMCz7ev2SNIozyKKpnGgsxO34u6Z4z/t0ITuu7voi/AshfsGsgFg==",
+      "engines": {
+        "node": ">=14.0.0"
+      }
     },
     "node_modules/@rollup/rollup-win32-x64-msvc": {
       "version": "4.24.0",
@@ -1122,7 +610,8 @@
       "optional": true,
       "os": [
         "win32"
-      ]
+      ],
+      "peer": true
     },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
@@ -1181,13 +670,13 @@
       "version": "15.7.13",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.13.tgz",
       "integrity": "sha512-hCZTSvwbzWGvhqxp/RqVqwU999pBf2vp7hzIjiYOsl8wqOmUxkQ6ddw1cV3l8811+kdUFus/q4d1Y3E3SyEifA==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/@types/react": {
       "version": "18.3.11",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.11.tgz",
       "integrity": "sha512-r6QZ069rFTjrEYgFdOck1gK7FLVsgJE7tTz0pQBczlBNUhBNk0MQH4UbnFSwjpQLMkLzgqvBBa+qGpLje16eTQ==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@types/prop-types": "*",
         "csstype": "^3.0.2"
@@ -1202,6 +691,11 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/use-sync-external-store": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz",
+      "integrity": "sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA=="
+    },
     "node_modules/@vitejs/plugin-react": {
       "version": "4.3.3",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.3.3.tgz",
@@ -1576,7 +1070,7 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/data-view-buffer": {
       "version": "1.0.1",
@@ -1868,6 +1362,7 @@
       "integrity": "sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==",
       "dev": true,
       "hasInstallScript": true,
+      "peer": true,
       "bin": {
         "esbuild": "bin/esbuild"
       },
@@ -2274,20 +1769,6 @@
         "is-callable": "^1.1.3"
       }
     },
-    "node_modules/fsevents": {
-      "version": "2.3.3",
-      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
-      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
-      "dev": true,
-      "hasInstallScript": true,
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
-      }
-    },
     "node_modules/function-bind": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
@@ -2511,6 +1992,15 @@
         "node": ">= 4"
       }
     },
+    "node_modules/immer": {
+      "version": "10.1.1",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-10.1.1.tgz",
+      "integrity": "sha512-s2MPrmjovJcoMaHtx6K11Ra7oD05NT97w1IC5zpMkT6Atjr7H8LjaDd81iIxUYpMKSRRNMJE703M1Fhr/TctHw==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/immer"
+      }
+    },
     "node_modules/import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -3075,6 +2565,7 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
+      "peer": true,
       "bin": {
         "nanoid": "bin/nanoid.cjs"
       },
@@ -3308,6 +2799,7 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
+      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.7",
         "picocolors": "^1.1.0",
@@ -3369,12 +2861,42 @@
         "react": "^18.3.1"
       }
     },
+    "node_modules/react-icons": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.3.0.tgz",
+      "integrity": "sha512-DnUk8aFbTyQPSkCfF8dbX6kQjXA9DktMeJqfjrg6cK9vwQVMxmcA3BfP4QoiztVmEHtwlTgLFsPuH2NskKT6eg==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
       "dev": true
     },
+    "node_modules/react-redux": {
+      "version": "9.1.2",
+      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.1.2.tgz",
+      "integrity": "sha512-0OA4dhM1W48l3uzmv6B7TXPCGmokUU4p1M44DGN2/D9a1FjVPukVjER1PcPX97jIg6aUeLq1XJo1IpfbgULn0w==",
+      "dependencies": {
+        "@types/use-sync-external-store": "^0.0.3",
+        "use-sync-external-store": "^1.0.0"
+      },
+      "peerDependencies": {
+        "@types/react": "^18.2.25",
+        "react": "^18.0",
+        "redux": "^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "redux": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.14.2",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.2.tgz",
@@ -3384,6 +2906,49 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "6.27.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.27.0.tgz",
+      "integrity": "sha512-YA+HGZXz4jaAkVoYBE98VQl+nVzI+cVI2Oj/06F5ZM+0u3TgedN9Y9kmMRo2mnkSK2nCpNQn0DVob4HCsY/WLw==",
+      "dependencies": {
+        "@remix-run/router": "1.20.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.27.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.27.0.tgz",
+      "integrity": "sha512-+bvtFWMC0DgAFrfKXKG9Fc+BcXWRUO1aJIihbB79xaeq0v5UzfvnM5houGUm1Y461WVRcgAQ+Clh5rdb1eCx4g==",
+      "dependencies": {
+        "@remix-run/router": "1.20.0",
+        "react-router": "6.27.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
+    "node_modules/redux": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
+      "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w=="
+    },
+    "node_modules/redux-thunk": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-3.1.0.tgz",
+      "integrity": "sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==",
+      "peerDependencies": {
+        "redux": "^5.0.0"
+      }
+    },
     "node_modules/reflect.getprototypeof": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.6.tgz",
@@ -3423,6 +2988,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/reselect": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/reselect/-/reselect-5.1.1.tgz",
+      "integrity": "sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w=="
+    },
     "node_modules/resolve": {
       "version": "2.0.0-next.5",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-2.0.0-next.5.tgz",
@@ -3454,6 +3024,7 @@
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.24.0.tgz",
       "integrity": "sha512-DOmrlGSXNk1DM0ljiQA+i+o0rSLhtii1je5wgk60j49d1jHT5YYttBv1iWOnYSTG+fZZESUOSNiAl89SIet+Cg==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@types/estree": "1.0.6"
       },
@@ -3612,6 +3183,7 @@
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
       "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
       "dev": true,
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -3891,11 +3463,20 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/use-sync-external-store": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.2.tgz",
+      "integrity": "sha512-PElTlVMwpblvbNqQ82d2n6RjStvdSoNe9FG28kNfz3WiXilJm4DdNkEzRhCZuIDwY8U08WVihhGR5iRqAwfDiw==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/vite": {
       "version": "5.4.9",
       "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.9.tgz",
       "integrity": "sha512-20OVpJHh0PAM0oSOELa5GaZNWeDjcAvQjGXy2Uyr+Tp+/D2/Hdz6NLgpJLsarPTA2QJ6v8mX2P1ZfbsSKvdMkg==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "esbuild": "^0.21.3",
         "postcss": "^8.4.43",
diff --git a/WebAdoption/package.json b/WebAdoption/package.json
index a7bbd58..1590632 100644
--- a/WebAdoption/package.json
+++ b/WebAdoption/package.json
@@ -4,14 +4,19 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
+    "start": "vite",
     "dev": "vite",
     "build": "vite build",
     "lint": "eslint .",
     "preview": "vite preview"
   },
   "dependencies": {
+    "@reduxjs/toolkit": "^2.3.0",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "react-icons": "^5.3.0",
+    "react-redux": "^9.1.2",
+    "react-router-dom": "^6.27.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.11.1",
@@ -22,7 +27,6 @@
     "eslint-plugin-react": "^7.37.0",
     "eslint-plugin-react-hooks": "^5.1.0-rc.0",
     "eslint-plugin-react-refresh": "^0.4.12",
-    "globals": "^15.9.0",
-    "vite": "^5.4.8"
+    "globals": "^15.9.0"
   }
 }
diff --git a/WebAdoption/src/App.css b/WebAdoption/src/App.css
deleted file mode 100644
index b9d355d..0000000
--- a/WebAdoption/src/App.css
+++ /dev/null
@@ -1,42 +0,0 @@
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}
diff --git a/WebAdoption/src/App.jsx b/WebAdoption/src/App.jsx
index b8b8473..4682f10 100644
--- a/WebAdoption/src/App.jsx
+++ b/WebAdoption/src/App.jsx
@@ -1,35 +1,39 @@
-import { useState } from 'react'
-import reactLogo from './assets/react.svg'
-import viteLogo from '/vite.svg'
-import './App.css'
 
-function App() {
-  const [count, setCount] = useState(0)
+import React from "react";
+import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
+import LandingPage from "./pages/LandingPage/LandingPage.jsx";
+import HowToAdopt from './pages/howToAdopt/howToAdopt.jsx';
+import './assets/styles/base/_app.css';
+<<<<<<< HEAD
+import AboutUs from './components/landingPage/aboutUs/aboutUs.jsx';
+=======
+import Dogs from './pages/dogs/dogs';
+import Cats from './pages/cats/cats';
+import Layout from "./components/layout.jsx";
+>>>>>>> d97510f07cb7eb238a17416b0a1bad38dce09ffc
+
 
+function App() {
   return (
-    <>
-      <div>
-        <a href="https://vitejs.dev" target="_blank">
-          <img src={viteLogo} className="logo" alt="Vite logo" />
-        </a>
-        <a href="https://react.dev" target="_blank">
-          <img src={reactLogo} className="logo react" alt="React logo" />
-        </a>
-      </div>
-      <h1>Vite + React</h1>
-      <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
-        </button>
-        <p>
-          Edit <code>src/App.jsx</code> and save to test HMR
-        </p>
-      </div>
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p>
-    </>
-  )
+      <Router>
+        <Layout>
+          <Routes>
+<<<<<<< HEAD
+          <Route path="/" element={<LandingPage />} />
+          <Route path="/how-to-adopt" element={<HowToAdopt />} />
+          <Route path="/about_us" element={<AboutUs />} />
+        </Routes>
+        </Router>
+=======
+            <Route path="/" element={<LandingPage />} />
+            <Route path="/how-to-adopt" element={<HowToAdopt />} />
+            <Route path="/dogs" element={<Dogs/>} />
+            <Route path="/cats" element={<Cats/>} />
+          </Routes>
+        </Layout>
+      </Router>
+>>>>>>> d97510f07cb7eb238a17416b0a1bad38dce09ffc
+  );
 }
 
-export default App
+export default App;
diff --git a/WebAdoption/src/assets/image/huella.png b/WebAdoption/src/assets/image/huella.png
new file mode 100644
index 0000000..4d33cc4
Binary files /dev/null and b/WebAdoption/src/assets/image/huella.png differ
diff --git a/WebAdoption/src/assets/images/adopta.png b/WebAdoption/src/assets/images/adopta.png
new file mode 100644
index 0000000..12a86ed
Binary files /dev/null and b/WebAdoption/src/assets/images/adopta.png differ
diff --git a/WebAdoption/src/assets/images/aipg.webp b/WebAdoption/src/assets/images/aipg.webp
new file mode 100644
index 0000000..5006e7c
Binary files /dev/null and b/WebAdoption/src/assets/images/aipg.webp differ
diff --git a/WebAdoption/src/assets/images/aww.jpg b/WebAdoption/src/assets/images/aww.jpg
new file mode 100644
index 0000000..50f7b7e
Binary files /dev/null and b/WebAdoption/src/assets/images/aww.jpg differ
diff --git a/WebAdoption/src/assets/images/banner.png b/WebAdoption/src/assets/images/banner.png
new file mode 100644
index 0000000..4c78408
Binary files /dev/null and b/WebAdoption/src/assets/images/banner.png differ
diff --git a/WebAdoption/src/assets/images/bella.jpg b/WebAdoption/src/assets/images/bella.jpg
new file mode 100644
index 0000000..1b6ef7f
Binary files /dev/null and b/WebAdoption/src/assets/images/bella.jpg differ
diff --git a/WebAdoption/src/assets/images/corazon.webp b/WebAdoption/src/assets/images/corazon.webp
new file mode 100644
index 0000000..a60775f
Binary files /dev/null and b/WebAdoption/src/assets/images/corazon.webp differ
diff --git a/WebAdoption/src/assets/images/duo.jpg b/WebAdoption/src/assets/images/duo.jpg
new file mode 100644
index 0000000..cb663ff
Binary files /dev/null and b/WebAdoption/src/assets/images/duo.jpg differ
diff --git a/WebAdoption/src/assets/images/felix.jpg b/WebAdoption/src/assets/images/felix.jpg
new file mode 100644
index 0000000..31faba7
Binary files /dev/null and b/WebAdoption/src/assets/images/felix.jpg differ
diff --git a/WebAdoption/src/assets/images/home.jpg b/WebAdoption/src/assets/images/home.jpg
new file mode 100644
index 0000000..112dfa4
Binary files /dev/null and b/WebAdoption/src/assets/images/home.jpg differ
diff --git a/WebAdoption/src/assets/images/perro-y-gato.jpg b/WebAdoption/src/assets/images/perro-y-gato.jpg
new file mode 100644
index 0000000..8d734a0
Binary files /dev/null and b/WebAdoption/src/assets/images/perro-y-gato.jpg differ
diff --git a/WebAdoption/src/assets/images/perro.webp b/WebAdoption/src/assets/images/perro.webp
new file mode 100644
index 0000000..d4464ff
Binary files /dev/null and b/WebAdoption/src/assets/images/perro.webp differ
diff --git a/WebAdoption/src/assets/images/raflex.jpg b/WebAdoption/src/assets/images/raflex.jpg
new file mode 100644
index 0000000..eef12b2
Binary files /dev/null and b/WebAdoption/src/assets/images/raflex.jpg differ
diff --git a/WebAdoption/src/assets/images/raqui.jpg b/WebAdoption/src/assets/images/raqui.jpg
new file mode 100644
index 0000000..0cba569
Binary files /dev/null and b/WebAdoption/src/assets/images/raqui.jpg differ
diff --git a/WebAdoption/src/assets/images/respet.png b/WebAdoption/src/assets/images/respet.png
new file mode 100644
index 0000000..05bd5df
Binary files /dev/null and b/WebAdoption/src/assets/images/respet.png differ
diff --git a/WebAdoption/src/assets/styles/base/_app.css b/WebAdoption/src/assets/styles/base/_app.css
new file mode 100644
index 0000000..5817e71
--- /dev/null
+++ b/WebAdoption/src/assets/styles/base/_app.css
@@ -0,0 +1,11 @@
+#root {
+  margin: 0 auto;
+  text-align: center;
+  min-width: 100%;
+}
+
+*{
+  margin: 0;
+  padding: 0;
+  box-shadow: none;
+}
diff --git a/WebAdoption/src/assets/styles/base/_index.css b/WebAdoption/src/assets/styles/base/_index.css
new file mode 100644
index 0000000..8ee1725
--- /dev/null
+++ b/WebAdoption/src/assets/styles/base/_index.css
@@ -0,0 +1,9 @@
+body {
+    background-color: #ffff96;
+    font-family: "DynaPuff", system-ui;
+    margin: 0;
+    display: flex;
+    place-items: center;
+    min-width: 320px;
+    min-height: 100vh;
+}
diff --git a/WebAdoption/src/assets/styles/components/_aboutUs.css b/WebAdoption/src/assets/styles/components/_aboutUs.css
new file mode 100644
index 0000000..e81fccd
--- /dev/null
+++ b/WebAdoption/src/assets/styles/components/_aboutUs.css
@@ -0,0 +1,22 @@
+.about-us {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    padding: 20px;
+  }
+  
+  .about-us__image {
+    width: 199%; 
+    max-width: 800px;
+    height: auto;
+    margin-bottom: 20px;
+  }
+  
+  .about-us__text {
+    font-size: 1.2rem;
+    max-width: 800px;
+    line-height: 1.5;
+    color: #bc7d17;
+  }
+  
diff --git a/WebAdoption/src/assets/styles/components/_howToAdopt.css b/WebAdoption/src/assets/styles/components/_howToAdopt.css
new file mode 100644
index 0000000..a8bdf21
--- /dev/null
+++ b/WebAdoption/src/assets/styles/components/_howToAdopt.css
@@ -0,0 +1,36 @@
+.how-to-adopt {
+  padding: 20px;
+}
+
+.how-to-adopt__back-button {
+  background-color: #9a2900;
+  color: #fdc725;
+  border: none;
+  padding: 10px 20px;
+  cursor: pointer;
+  margin-bottom: 20px;
+}
+
+.how-to-adopt__title {
+  font-size: 2rem;
+  text-align: center;
+  margin-bottom: 20px;
+}
+
+.how-to-adopt__steps {
+  display: flex;
+  flex-direction: column;
+  align-items: center; 
+  gap: 20px;
+}
+
+.mini-video {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  width: 80px;  
+  height: 80px; 
+  border-radius: 50%; 
+  box-shadow: 0 4px 8px rgba(255, 0, 0, 0.2);
+  z-index: 1000; 
+}
diff --git a/WebAdoption/src/assets/styles/components/button.css b/WebAdoption/src/assets/styles/components/button.css
new file mode 100644
index 0000000..6a68ba1
--- /dev/null
+++ b/WebAdoption/src/assets/styles/components/button.css
@@ -0,0 +1,19 @@
+.button__element {
+      font-style: italic;
+      padding: 10px 20px;
+      background-color: var(--color-sunset-yellow);
+      color: #fff;
+      border: none;
+      border-radius: 5px;
+      cursor: pointer;
+      font-size: 16px;
+  }
+
+.button__withIcon {
+  background-image: url('WebAdoption/src/assets/image/huella.png');
+  background-repeat: no-repeat;
+  background-position: left center;
+  padding-left: 30px;
+}
+
+  
\ No newline at end of file
diff --git a/WebAdoption/src/assets/styles/components/card.css b/WebAdoption/src/assets/styles/components/card.css
new file mode 100644
index 0000000..2ef37eb
--- /dev/null
+++ b/WebAdoption/src/assets/styles/components/card.css
@@ -0,0 +1,48 @@
+.card__container  {
+  
+      padding: 2em;
+      font-style: italic;
+      border: 1px solid #4e4524;
+      border-radius: 8px;
+      overflow: hidden;
+      width: 300px;
+      box-shadow: 0 4px 8px #f8f77a(241, 207, 13);
+      transition: transform 0.2s;
+      background-color: #ebe642;
+}
+
+.card__image {
+      width: 100%;
+      height: 200px;
+      object-fit: cover;
+  }
+
+.card__content {
+      padding: 16px;
+  }
+
+.card__title {
+      font-size: 1.5em;
+      margin-bottom: 8px;
+  }
+
+.card__description {
+      font-style: italic;
+      font-size: 1em;
+      color: #e6e261;
+      margin-bottom: 16px;
+  }
+
+.card__button {
+      font-style: italic;
+      background-color: #452f22;
+      color: #452f22(48, 48, 32);
+      border: none;
+      padding: 10px 16px;
+      cursor: pointer;
+      border-radius: 4px;
+      font-size: 1em;
+  }
+
+
+  
\ No newline at end of file
diff --git a/WebAdoption/src/assets/styles/components/modal.css b/WebAdoption/src/assets/styles/components/modal.css
new file mode 100644
index 0000000..64e1834
--- /dev/null
+++ b/WebAdoption/src/assets/styles/components/modal.css
@@ -0,0 +1,44 @@
+/* modal.css */
+.modal__overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+
+.modal__container {
+      padding: 2em;
+      font-style: italic;
+      border: 1px solid #4e4524;
+      border-radius: 8px;
+      overflow: hidden;
+      width: 300px;
+      box-shadow: 0 4px 8px #eeee76(241, 207, 13);
+      transition: transform 0.2s;
+      background-color: #e7e370;
+}
+
+.modal__pet-name h3 {
+  margin: 0;
+  font-size: 1.5em;
+}
+
+.modal__pet-info p {
+  margin: 0.5em 0;
+}
+
+.modal__close {
+  margin-top: 10px;
+  background-color: #e74c3c;
+  color: white;
+  border: none;
+  padding: 10px;
+  border-radius: 4px;
+  cursor: pointer;
+}
diff --git a/WebAdoption/src/assets/styles/components/navBar.css b/WebAdoption/src/assets/styles/components/navBar.css
new file mode 100644
index 0000000..c7009ae
--- /dev/null
+++ b/WebAdoption/src/assets/styles/components/navBar.css
@@ -0,0 +1,51 @@
+.nav-bar {
+  background-color: #fff;
+  padding: 1.5rem; 
+  position: fixed; 
+  top: 0;
+  left: 0;
+  width: 100%; 
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+  z-index: 1000; 
+}
+
+.nav-bar__list {
+  list-style: none;
+  display: flex;
+  gap: 20px;
+  align-items: center;
+  padding-left: 0;
+  margin: 0;
+  justify-content: space-evenly;
+}
+
+.nav-bar__item {
+  position: relative;
+  padding: 0.5em;
+}
+
+.nav-bar__link {
+  text-decoration: none;
+  padding: 0.5em;
+  color: #333;
+  font-size: 1.2em; 
+  font-weight: 500; 
+}
+
+.nav-bar__link:hover {
+  color: #f75427;
+  border-radius: 1em;
+}
+
+
+@media (max-width: 768px) {
+  .nav-bar {
+    padding: 15px; 
+  }
+
+  .nav-bar__list {
+    flex-direction: column; 
+    gap: 10px; 
+    align-items: flex-start; 
+  }
+}
diff --git a/WebAdoption/src/assets/styles/components/stepCard.css b/WebAdoption/src/assets/styles/components/stepCard.css
new file mode 100644
index 0000000..c6acdab
--- /dev/null
+++ b/WebAdoption/src/assets/styles/components/stepCard.css
@@ -0,0 +1,37 @@
+.step-card {
+  display: flex;
+  align-items: center;
+  background-color: #d5c516;
+  border-radius: 8px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  padding: 20px;
+  width: 350px; 
+  position: relative;
+  transition: transform 0.3s ease;
+  transform: translateX(var(--offset, 0px));
+  margin: 0 auto; 
+}
+
+.step-card__number {
+  font-size: 8rem; 
+  font-weight: bold;
+  color: #000000;
+  opacity: 0.2;
+  position: absolute;
+  left: -70px; 
+}
+
+.step-card__image {
+  width: 100px; 
+  height: 100px; 
+  object-fit: cover; 
+  border-radius: 8px;
+  margin-right: 20px;
+}
+
+.step-card__text {
+  font-size: 1.2rem;
+  text-align: left;
+  margin-left: 10px;
+  flex: 1;
+}
diff --git a/WebAdoption/src/assets/styles/pages/_landingpage.css b/WebAdoption/src/assets/styles/pages/_landingpage.css
new file mode 100644
index 0000000..0420741
--- /dev/null
+++ b/WebAdoption/src/assets/styles/pages/_landingpage.css
@@ -0,0 +1,82 @@
+/* Estilos para el contenedor principal */
+.landing-container {
+  font-family: 'Arial', sans-serif;
+  color: #333;
+}
+
+/* Encabezado */
+.landing-header {
+  background-color: #f0a500;
+  padding: 20px;
+  text-align: center;
+}
+
+.landing-header h1 {
+  color: #6b4226;
+  font-size: 2.5em;
+}
+
+.landing-header nav ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  justify-content: center;
+  gap: 15px;
+}
+
+.landing-header nav ul li {
+  display: inline;
+}
+
+.landing-header nav ul li a {
+  text-decoration: none;
+  color: #eee3e3;
+  font-weight: bold;
+  padding: 10px 20px;
+  background-color: #6b4226;
+  border-radius: 5px;
+}
+
+.landing-header nav ul li a:hover {
+  background-color: #333;
+}
+
+/* Sección de animales destacados */
+.featured-animal {
+  text-align: center;
+  margin: 30px 0;
+}
+
+.featured-animal img {
+  width: 60%;
+  border-radius: 15px;
+}
+
+.featured-animal h2 {
+  color: #f0a500;
+  font-size: 2em;
+  margin-top: 15px;
+}
+
+.adoptable-animals {
+  display: flex;
+  justify-content: space-around;
+  padding: 20px;
+  background-color: #f0a500;
+}
+
+.animal-card {
+  text-align: center;
+}
+
+.animal-card img {
+  width: 150px;
+  height: 150px;
+  border-radius: 50%;
+}
+
+.animal-card p {
+  color: #d3c7c7;
+  font-size: 1.2em;
+}
diff --git a/WebAdoption/src/assets/styles/pages/_pets.css b/WebAdoption/src/assets/styles/pages/_pets.css
new file mode 100644
index 0000000..e69de29
diff --git a/WebAdoption/src/assets/styles/utils/_banner.css b/WebAdoption/src/assets/styles/utils/_banner.css
new file mode 100644
index 0000000..ba14ad7
--- /dev/null
+++ b/WebAdoption/src/assets/styles/utils/_banner.css
@@ -0,0 +1,35 @@
+@import url('https://fonts.googleapis.com/css2?family=DynaPuff:wght@400;700&display=swap');
+
+.banner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background-size: cover; 
+  background-position: center; 
+  min-height: 500px; 
+  min-width: 100% !important; 
+}
+.banner__text {
+  font-family: "DynaPuff", system-ui;
+  max-width: 200%;
+  text-align: left !important;
+}
+.banner__text-paragraph {
+  color: rgb(81, 39, 39);
+  font-size: 80px;
+  font-weight: initial;
+  text-align: left;
+  justify-content: left;
+}
+@media (max-width: 768px) {
+  .banner--mobile {
+    min-height: 350px; 
+  }
+  .banner__text--mobile {
+    max-width: 80% !important;
+  }
+  .banner__text-paragraph--mobile {
+    font-size: 35px !important;
+  }
+}
diff --git a/WebAdoption/src/assets/styles/utils/_variables.css b/WebAdoption/src/assets/styles/utils/_variables.css
new file mode 100644
index 0000000..4155afd
--- /dev/null
+++ b/WebAdoption/src/assets/styles/utils/_variables.css
@@ -0,0 +1,12 @@
+@import url('https://fonts.googleapis.com/css2?family=DynaPuff:wght@400..700&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
+
+:root{
+    --color-sunset-yellow:#F8BC2F;
+    --color-yellow-ligth:#ffff96;
+    --color-mint-cream:#CBF3F0;
+    --color-turquoise-green:#2EC4B6;
+    --color-coffee-ligth:#5A4539;
+    --color-coffe-dark:#2d231d;
+
+    font-family:'DynaPuff', system-ui,'Segoe UI', 'Open Sans', 'Helvetica Neue', sans-serif;
+}
\ No newline at end of file
diff --git a/WebAdoption/src/assets/video/ubication.mp4 b/WebAdoption/src/assets/video/ubication.mp4
new file mode 100644
index 0000000..974f1fb
Binary files /dev/null and b/WebAdoption/src/assets/video/ubication.mp4 differ
diff --git a/WebAdoption/src/components/button.jsx b/WebAdoption/src/components/button.jsx
new file mode 100644
index 0000000..52d0ec6
--- /dev/null
+++ b/WebAdoption/src/components/button.jsx
@@ -0,0 +1,13 @@
+
+import '../assets/styles/components/button.css';  
+
+const Button = ({ label, onClick }) => {
+  return (
+    <button onClick={onClick} className="button__element button__withIcon">
+      {label}
+    </button>
+  );
+};
+
+export default Button;
+
diff --git a/WebAdoption/src/components/card.jsx b/WebAdoption/src/components/card.jsx
new file mode 100644
index 0000000..893f8da
--- /dev/null
+++ b/WebAdoption/src/components/card.jsx
@@ -0,0 +1,32 @@
+import React, { useState } from "react";
+import "../assets/styles/components/card.css";
+import Modal from "./modal";
+import Button from "./button";
+
+const Card = ({ title, description, imageUrl, buttonLabel }) => {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const handleOpenModal = () => {
+    setIsModalOpen(true);
+  };
+
+  const handleCloseModal = () => {
+    setIsModalOpen(false);
+  };
+
+  return (
+    <div className="card__container">
+      <img src={imageUrl} alt={title} className="card__image" />
+      <div className="card__content">
+        <h2 className="card__title">{title}</h2>
+        <p className="card__description">{description}</p>
+        <Button className="card__button" label={buttonLabel} onClick={handleOpenModal} />
+      </div>
+      {isModalOpen && <Modal onClose={handleCloseModal} />}
+    </div>
+  );
+};
+
+export default Card;
+
+
diff --git a/WebAdoption/src/components/landingPage/aboutUs/aboutUs.jsx b/WebAdoption/src/components/landingPage/aboutUs/aboutUs.jsx
new file mode 100644
index 0000000..aafb9a6
--- /dev/null
+++ b/WebAdoption/src/components/landingPage/aboutUs/aboutUs.jsx
@@ -0,0 +1,19 @@
+import React from "react";
+import respeto from '/src/assets/images/respet.png';
+import "/src/assets/styles/components/_aboutUs.css";
+
+const AboutUs = () => {
+  return (
+    <div className="about-us">
+      <img src={respeto} alt="Imagen de respeto" className="about-us__image" />
+      <p className="about-us__text">
+        Somos una organización sin fines de lucro, enfocada en la protección animal.
+        Hemos contactado a un equipo de desarrolladores para crear una plataforma
+        que fomente la adopción de perros y gatos en refugios locales. Contratamos
+        a desarrolladoras del SENA para satisfacer las necesidades de la organización.
+      </p>
+    </div>
+  );
+};
+
+export default AboutUs;
diff --git a/WebAdoption/src/components/landingPage/banner/banner.jsx b/WebAdoption/src/components/landingPage/banner/banner.jsx
new file mode 100644
index 0000000..bed1ed1
--- /dev/null
+++ b/WebAdoption/src/components/landingPage/banner/banner.jsx
@@ -0,0 +1,24 @@
+import PropTypes from 'prop-types';
+import '../../../assets/styles/utils/_banner.css';
+
+const Banner = ({ imageUrl }) => {
+  const bannerStyle = {
+    backgroundImage: imageUrl ? `url(${imageUrl})` : 'none', 
+  };
+
+  return (
+    <div className="banner" style={bannerStyle}>
+      <div className='banner__text-paragraph'>
+        <p className='banner__text'>No compres, </p>
+        <p className='banner__text'>!!Adopta!!</p>
+      </div>
+    </div>
+  );
+};
+
+Banner.propTypes = {
+  imageUrl: PropTypes.string,
+};
+
+
+export default Banner;
diff --git a/WebAdoption/src/components/landingPage/navBar/navBar.jsx b/WebAdoption/src/components/landingPage/navBar/navBar.jsx
new file mode 100644
index 0000000..8ac14cc
--- /dev/null
+++ b/WebAdoption/src/components/landingPage/navBar/navBar.jsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import '../../../assets/styles/components/navBar.css';
+import { SiDatadog } from "react-icons/si";
+
+
+const NavBar = () => {
+  return (
+    <nav className="nav-bar">
+      <ul className="nav-bar__list">
+        <li className="nav-bar__item"><Link to="/" className="nav-bar__link">Home</Link></li>
+<<<<<<< HEAD
+        <li className="nav-bar__item"><Link to="/how-to-adopt" className="nav-bar__link">¿Cómo Adoptar?</Link></li>
+        <li className="nav-bar__item"><a href="#dogs" className="nav-bar__link">Perros</a></li>
+        <li className="nav-bar__item"><a href="#cats" className="nav-bar__link">Gatos</a></li>
+        <li className="nav-bar__item"><Link to="/about_us" className="nav-bar__link"> Quienes Somos?</Link></li> 
+=======
+        <li className="nav-bar__item"><Link to="/how-to-adopt" className="nav-bar__link">How to adopt?</Link></li>
+        <li className="nav-bar__item"><Link to="/dogs" className="nav-bar__link">Dogs</Link></li>
+        <li className="nav-bar__item"><Link to="/cats" className="nav-bar__link">Cats</Link></li>
+        <li className='nav-bar__item' ><Link className='nav-bar__link' to="/adoption-list"><SiDatadog size={40} className='.nav-bar__adoption-list-icon'/></Link></li>
+>>>>>>> d97510f07cb7eb238a17416b0a1bad38dce09ffc
+      </ul>
+    </nav>
+  );
+};
+
+export default NavBar;
diff --git a/WebAdoption/src/components/landingPage/step_card/StepCard.jsx b/WebAdoption/src/components/landingPage/step_card/StepCard.jsx
new file mode 100644
index 0000000..a2cd9c3
--- /dev/null
+++ b/WebAdoption/src/components/landingPage/step_card/StepCard.jsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import '../../../assets/styles/components/stepCard.css';
+
+const StepCard = ({ image, text, stepNumber }) => {
+  return (
+    <div className="step-card" style={{ "--offset": `${stepNumber * 20}px` }}>
+      <div className="step-card__number">{stepNumber}</div>
+      <img src={image} alt={text} className="step-card__image" />
+      <p className="step-card__text">{text}</p>
+    </div>
+    
+  );
+};
+
+export default StepCard;
diff --git a/WebAdoption/src/components/layout.jsx b/WebAdoption/src/components/layout.jsx
new file mode 100644
index 0000000..889fe8b
--- /dev/null
+++ b/WebAdoption/src/components/layout.jsx
@@ -0,0 +1,17 @@
+import NavBar from "./landingPage/navBar/navBar"
+import Banner from "./landingPage/banner/banner"
+import banner from '../assets/images/banner.png';
+
+const Layout = ({children})=>{
+    return(
+        <>
+        <div className="layout">
+            <NavBar/>
+            <Banner imageUrl={banner}/>
+            <main>{children}</main>
+        </div>
+        </>
+    )
+}
+
+export default Layout;
\ No newline at end of file
diff --git a/WebAdoption/src/components/modal.jsx b/WebAdoption/src/components/modal.jsx
new file mode 100644
index 0000000..ddf9f1b
--- /dev/null
+++ b/WebAdoption/src/components/modal.jsx
@@ -0,0 +1,42 @@
+import "../assets/styles/components/modal.css";
+
+// Modal.js
+import React from "react";
+import "../assets/styles/components/modal.css";
+
+const Modal = ({ onClose }) => {
+  const handleClose = () => {
+    console.log("Cerrar modal");
+    onClose();
+  };
+  const name = "Gatito";
+  const breeds = "Gatito";
+  const temperament = "Gatito";
+  const origin = "Gatito";
+  const lifeSpan = "Gatito";
+  const moreInfo = "Gatito";
+
+  return (
+    <div className="modal__overlay" onClick={onClose}>
+      <div className="modal__container" onClick={(e) => e.stopPropagation()}>
+        <div className="modal__pet-name">
+          <h3>{name}</h3>
+        </div>
+        <div className="modal__pet-info">
+          <p>{breeds}</p>
+          <p>{temperament}</p>
+          <p>{origin}</p>
+          <p>{lifeSpan}</p>
+          <p>{moreInfo}</p>
+          <button onClick={handleClose} className="modal__close">
+            Cerrar
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Modal;
+
+
diff --git a/WebAdoption/src/contex/contex.js b/WebAdoption/src/contex/contex.js
new file mode 100644
index 0000000..8f15d3c
--- /dev/null
+++ b/WebAdoption/src/contex/contex.js
@@ -0,0 +1,3 @@
+import { createContext } from "react";
+const Context = createContext(null);
+export default Context;
diff --git a/WebAdoption/src/index.css b/WebAdoption/src/index.css
deleted file mode 100644
index 6119ad9..0000000
--- a/WebAdoption/src/index.css
+++ /dev/null
@@ -1,68 +0,0 @@
-:root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}
diff --git a/WebAdoption/src/main.jsx b/WebAdoption/src/main.jsx
index 89f91e5..7b3f199 100644
--- a/WebAdoption/src/main.jsx
+++ b/WebAdoption/src/main.jsx
@@ -1,10 +1,13 @@
-import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import App from './App.jsx'
-import './index.css'
+import './assets/styles/base/_index.css';
+import './assets/styles/utils/_variables.css';
+import { Provider } from 'react-redux'
+import store from './redux/store.js'
 
 createRoot(document.getElementById('root')).render(
-  <StrictMode>
+  <Provider store={store}>
     <App />
-  </StrictMode>,
+  </Provider>
+
 )
diff --git a/WebAdoption/src/pages/LandingPage.jsx b/WebAdoption/src/pages/LandingPage.jsx
new file mode 100644
index 0000000..1a651b0
--- /dev/null
+++ b/WebAdoption/src/pages/LandingPage.jsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import raqui from '../assets/images/raqui.jpg';
+import raflex from '../assets/images/raflex.jpg';
+import felix from '../assets/images/felix.jpg';
+import bella from '../assets/images/bella.jpg';
+import banner from '../assets/images/banner.png';
+import '../assets/styles/pages/_landingpage.css';
+import '../assets/styles/components/navBar.css';
+import "../assets/styles/components/_howToAdopt.css";
+import '../assets/styles/components/stepCard.css';
+import NavBar from '../components/landingPage/navBar/navBar';
+import HowToAdopt from "./howToAdopt.jsx";
+import Banner from '../components/landingPage/banner/banner.jsx';
+
+const LandingPage = () => {
+  return (
+    <div className="landing">
+      <div className="landing__navbar">
+        <NavBar />
+      </div>
+      <div className="landing__banner">
+        <Banner 
+          imageUrl={banner}
+        />
+      </div>
+      <div className="landing__content">
+        <HowToAdopt />
+      </div>
+    </div>
+  );
+};
+
+export default LandingPage;
diff --git a/WebAdoption/src/pages/LandingPage/LandingPage.jsx b/WebAdoption/src/pages/LandingPage/LandingPage.jsx
new file mode 100644
index 0000000..c3c7dbe
--- /dev/null
+++ b/WebAdoption/src/pages/LandingPage/LandingPage.jsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import '../../assets/styles/pages/_landingpage.css';
+import '../../assets/styles/components/navBar.css';
+import '../../assets/styles/components/howToAdopt.css';
+import '../../assets/styles/components/stepCard.css';
+import HowToAdopt from "../howToAdopt/howToAdopt.jsx";
+
+const LandingPage = () => {
+  return (
+    <div className="landing">
+      <div className="landing__content--howtoadopt">
+        <HowToAdopt />
+      </div>
+    </div>
+  );
+};
+
+export default LandingPage;
diff --git a/WebAdoption/src/pages/cats/cats.jsx b/WebAdoption/src/pages/cats/cats.jsx
new file mode 100644
index 0000000..f82bc12
--- /dev/null
+++ b/WebAdoption/src/pages/cats/cats.jsx
@@ -0,0 +1,41 @@
+import { useEffect } from "react";
+import { CatService } from "../../services/cat/catService";
+import { useSelector, useDispatch } from "react-redux";
+import { setCatById, setCats } from "../../redux/Slices/catSlice";
+import Card from "../../components/card";
+
+
+const Cats = ()=>{
+
+    const dispatch = useDispatch();
+    const cats = useSelector(state => state.cat.cats);
+    const catService = new CatService;
+
+    useEffect(()=>{
+        const fetchCats = async()=>{
+            try{
+                const data = await catService.getCats();
+                dispatch(setCats(data));
+            }catch(e){
+                console.error('Error fetching cats:', e);
+            }
+        };
+        fetchCats();
+    },[dispatch])
+    
+    console.log('cats:',cats)
+    return(
+        <>
+        <div>
+            {cats.map(cat =>(
+                <Card
+                key={cat.id}
+                imageUrl={cat.url}
+                />
+            ))}
+        </div>
+        </>
+    )
+};
+
+export default Cats;
\ No newline at end of file
diff --git a/WebAdoption/src/pages/dogs/dogs.jsx b/WebAdoption/src/pages/dogs/dogs.jsx
new file mode 100644
index 0000000..2ff3611
--- /dev/null
+++ b/WebAdoption/src/pages/dogs/dogs.jsx
@@ -0,0 +1,39 @@
+import { useEffect } from "react";
+import { DogService } from "../../services/dog/dogService";
+import { useSelector, useDispatch } from "react-redux";
+import { setDogById, setDogs } from "../../redux/Slices/dogSlice";
+import Card from "../../components/card";
+
+const Dogs = ()=>{
+
+    const dispatch = useDispatch();
+    const dogs = useSelector(state => state.dog.dogs);
+    const dogService = new DogService;
+
+    useEffect(()=>{
+        const fetchDogs = async()=>{
+            try{
+                const data = await dogService.getDogs();
+                dispatch(setDogs(data));
+            }catch(e){
+                console.error('Error fetching dogs:', e);
+            }
+        };
+        fetchDogs();
+    },[dispatch])
+    
+    console.log('dogs:',dogs)
+    return(
+        <>
+        <div>
+            {dogs.map(dog =>(
+                <Card
+                key={dog.id}
+                imageUrl={dog.url}/>
+            ))}
+        </div>
+        </>
+    )
+};
+
+export default Dogs;
\ No newline at end of file
diff --git a/WebAdoption/src/pages/howToAdopt/howToAdopt.jsx b/WebAdoption/src/pages/howToAdopt/howToAdopt.jsx
new file mode 100644
index 0000000..e6b9dd6
--- /dev/null
+++ b/WebAdoption/src/pages/howToAdopt/howToAdopt.jsx
@@ -0,0 +1,48 @@
+import React from 'react';
+<<<<<<< HEAD:WebAdoption/src/pages/howToAdopt.jsx
+import StepCard from "../components/landingPage/step_card/StepCard.jsx";
+import '../assets/styles/components/_howtoadopt.css';
+=======
+import StepCard from "../../components/landingPage/step_card/StepCard.jsx";
+import '../../assets/styles/components/howtoadopt.css';
+>>>>>>> d97510f07cb7eb238a17416b0a1bad38dce09ffc:WebAdoption/src/pages/howToAdopt/howToAdopt.jsx
+
+import awwImage from '../../assets/images/aww.jpg';
+import duoImage from '../../assets/images/duo.jpg';
+import formImage from '../../assets/images/adopta.png';
+import respetImage from '../../assets/images/respet.png';
+import homeImage from '../../assets/images/corazon.webp';
+import perro_y_gato from '../../assets/images/perro-y-gato.jpg';
+import pawVideo from '../../assets/video/ubication.mp4';
+
+const HowToAdopt = () => {
+
+  const steps = [
+    { image: awwImage, text: 'Encuentra un animal que te interese' },
+    { image: duoImage, text: 'Visita el refugio para conocerlo en persona' },
+    { image: formImage, text: 'Llena la solicitud de adopción' },
+    { image: respetImage, text: 'Realiza una entrevista breve' },
+    { image: homeImage, text: 'Completa el proceso y firma el contrato de adopción' },
+    { image: perro_y_gato, text: 'Lleva a casa a tu nuevo amigo' },
+  ];
+
+  return (
+    <div className="how-to-adopt">
+      <h1 className="how-to-adopt__title">¿Estás listo para adoptar?</h1>
+      <div className="how-to-adopt__steps">
+        {steps.map((step, index) => (
+          <StepCard 
+            key={index} 
+            image={step.image} 
+            text={step.text} 
+            stepNumber={index + 1} 
+          />
+        ))}
+      </div>
+      
+      <video className="mini-video" src={pawVideo} autoPlay loop muted />
+    </div>
+  );
+};
+
+export default HowToAdopt;
diff --git a/WebAdoption/src/redux/Slices/catSlice.js b/WebAdoption/src/redux/Slices/catSlice.js
new file mode 100644
index 0000000..68f0ce0
--- /dev/null
+++ b/WebAdoption/src/redux/Slices/catSlice.js
@@ -0,0 +1,30 @@
+import {createSlice} from "@reduxjs/toolkit";
+
+const initialState = {
+    cats:[],
+    loading:false,
+    error:null
+    
+};
+
+export const catSlice = createSlice({
+    name:'cat',
+    initialState,
+    reducers:{
+        setCats(state, action){
+            state.cats = action.payload;
+        },
+        setCatById(state, action){
+            state.cats.find(d => d.id === action.payload.id);
+        },
+        addToAdopted(state, action){
+            const cat = state.cats.find(d => d.id === action.payload.id);
+            if(cat){
+                cat.adopted = !cat.adopted;
+            }
+        },
+    },
+});
+
+export const {setCats, setCatById, addToAdopted} = catSlice.actions;
+export default catSlice.reducer;
\ No newline at end of file
diff --git a/WebAdoption/src/redux/Slices/dogSlice.js b/WebAdoption/src/redux/Slices/dogSlice.js
new file mode 100644
index 0000000..08717df
--- /dev/null
+++ b/WebAdoption/src/redux/Slices/dogSlice.js
@@ -0,0 +1,30 @@
+import {createSlice} from "@reduxjs/toolkit";
+
+const initialState = {
+    dogs:[],
+    loading:false,
+    error:null
+    
+};
+
+export const dogSlice = createSlice({
+    name:'dog',
+    initialState,
+    reducers:{
+        setDogs(state, action){
+            state.dogs = action.payload;
+        },
+        setDogById(state, action){
+            state.dogs.find(d => d.id === action.payload.id);
+        },
+        addToAdopted(state, action){
+            const dog = state.dogs.find(d => d.id === action.payload.id);
+            if(dog){
+                dog.adopted = !dog.adopted;
+            }
+        },
+    },
+});
+
+export const {setDogById, setDogs, addToAdopted} = dogSlice.actions;
+export default dogSlice.reducer;
\ No newline at end of file
diff --git a/WebAdoption/src/redux/store.js b/WebAdoption/src/redux/store.js
new file mode 100644
index 0000000..022f81f
--- /dev/null
+++ b/WebAdoption/src/redux/store.js
@@ -0,0 +1,12 @@
+import { configureStore } from "@reduxjs/toolkit";
+import dogReducer from "./Slices/dogSlice";
+import catReducer from "./Slices/catSlice";
+
+
+const store = configureStore({
+    reducer:{
+        dog: dogReducer, 
+        cat: catReducer
+    }
+})
+export default store;
\ No newline at end of file
diff --git a/WebAdoption/src/services/cat/catService.js b/WebAdoption/src/services/cat/catService.js
new file mode 100644
index 0000000..ee835cd
--- /dev/null
+++ b/WebAdoption/src/services/cat/catService.js
@@ -0,0 +1,41 @@
+export class CatService{
+    constructor(){
+        this.baseUrl = import.meta.env.VITE_CAT_API_URL;
+    }
+
+    async getCats(){
+        try{
+            const apiKey = import.meta.env.VITE_CAT_API_KEY;
+            const request = await fetch(`${this.baseUrl}?limit=10`,{
+                method : 'GET', headers :{ 'x-api-key': apiKey},
+            });
+
+            if(!request.ok){
+                throw new Error(`Error: ${response.statusText}`);
+            }
+            console.log(request);
+
+            const data = await  request.json();
+            console.log('Data: ',data);
+            return data;
+    } catch(e){
+        throw new Error(`Status Code ${e}`);
+    };
+}
+    async getCatById(id){
+        try{
+            const response = await fetch(`${this.baseUrl}${id}`)
+            .catch((e)=>{
+                console.log(`Error: ${e.message}`);
+            });
+            const data = await response.json;
+            return data;
+        }catch (e){
+            console.log(`Error:${e.message}`);
+            throw e;
+        } finally{
+            console.log(`Finalizado`);
+        }
+    }
+
+}
\ No newline at end of file
diff --git a/WebAdoption/src/services/dog/dogService.js b/WebAdoption/src/services/dog/dogService.js
new file mode 100644
index 0000000..46ca0fb
--- /dev/null
+++ b/WebAdoption/src/services/dog/dogService.js
@@ -0,0 +1,43 @@
+export class DogService {
+    constructor(){
+        this.baseUrl = import.meta.env.VITE_DOG_API_URL;
+    }
+
+    async getDogs(){
+        try{
+            const apiKey = import.meta.env.VITE_DOG_API_KEY;
+            const request = await fetch(`${this.baseUrl}?limit=10`,{method:'GET', headers:{
+                'x-api-key': apiKey,
+            },
+        });
+            
+            if(!request.ok){
+                throw new Error(`Error: ${response.statusText}`);
+            }
+            console.log(request);
+
+            const data = await  request.json();
+            console.log('Data: ',data);
+            return data;
+            
+        } catch(e){
+            throw new Error(`Status Code ${e}`);
+        };
+    }
+
+    async getDogById(id){
+        try{
+            const response = await fetch(`${this.baseUrl}${id}`)
+            .catch((e)=>{
+                console.log(`Error: ${e.message}`);
+            });
+            const data = await response.json;
+            return data;
+        }catch (e){
+            console.log(`Error:${e.message}`);
+            throw e;
+        } finally{
+            console.log(`Finalizado`);
+        }
+    }
+}
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 3ad22dd..1b37f79 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2,5 +2,127 @@
   "name": "WebAdoptionPets",
   "lockfileVersion": 3,
   "requires": true,
-  "packages": {}
+  "packages": {
+    "": {
+      "dependencies": {
+        "@reduxjs/toolkit": "^2.3.0",
+        "react-redux": "^9.1.2"
+      }
+    },
+    "node_modules/@reduxjs/toolkit": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.3.0.tgz",
+      "integrity": "sha512-WC7Yd6cNGfHx8zf+iu+Q1UPTfEcXhQ+ATi7CV1hlrSAaQBdlPzg7Ww/wJHNQem7qG9rxmWoFCDCPubSvFObGzA==",
+      "dependencies": {
+        "immer": "^10.0.3",
+        "redux": "^5.0.1",
+        "redux-thunk": "^3.1.0",
+        "reselect": "^5.1.0"
+      },
+      "peerDependencies": {
+        "react": "^16.9.0 || ^17.0.0 || ^18",
+        "react-redux": "^7.2.1 || ^8.1.3 || ^9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-redux": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@types/use-sync-external-store": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz",
+      "integrity": "sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA=="
+    },
+    "node_modules/immer": {
+      "version": "10.1.1",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-10.1.1.tgz",
+      "integrity": "sha512-s2MPrmjovJcoMaHtx6K11Ra7oD05NT97w1IC5zpMkT6Atjr7H8LjaDd81iIxUYpMKSRRNMJE703M1Fhr/TctHw==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/immer"
+      }
+    },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "peer": true
+    },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "peer": true,
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
+    "node_modules/react": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
+      "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
+      "peer": true,
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-redux": {
+      "version": "9.1.2",
+      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.1.2.tgz",
+      "integrity": "sha512-0OA4dhM1W48l3uzmv6B7TXPCGmokUU4p1M44DGN2/D9a1FjVPukVjER1PcPX97jIg6aUeLq1XJo1IpfbgULn0w==",
+      "dependencies": {
+        "@types/use-sync-external-store": "^0.0.3",
+        "use-sync-external-store": "^1.0.0"
+      },
+      "peerDependencies": {
+        "@types/react": "^18.2.25",
+        "react": "^18.0",
+        "redux": "^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "redux": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/redux": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
+      "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w=="
+    },
+    "node_modules/redux-thunk": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-3.1.0.tgz",
+      "integrity": "sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==",
+      "peerDependencies": {
+        "redux": "^5.0.0"
+      }
+    },
+    "node_modules/reselect": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/reselect/-/reselect-5.1.1.tgz",
+      "integrity": "sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w=="
+    },
+    "node_modules/use-sync-external-store": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.2.tgz",
+      "integrity": "sha512-PElTlVMwpblvbNqQ82d2n6RjStvdSoNe9FG28kNfz3WiXilJm4DdNkEzRhCZuIDwY8U08WVihhGR5iRqAwfDiw==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    }
+  }
 }
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..a1f68c2
--- /dev/null
+++ b/package.json
@@ -0,0 +1,6 @@
+{
+  "dependencies": {
+    "@reduxjs/toolkit": "^2.3.0",
+    "react-redux": "^9.1.2"
+  }
+}