diff --git a/app/(auth)/login/page.tsx b/app/(auth)/login/page.tsx
index b2032f1..5e4c1ef 100644
--- a/app/(auth)/login/page.tsx
+++ b/app/(auth)/login/page.tsx
@@ -3,7 +3,29 @@
 import { Button, Checkbox, Label, Popover, TextInput } from "flowbite-react";
 import {  DarkThemeToggle } from "flowbite-react";
 
+import {useState} from "react";
+import instance from "@/app/services/Axios/AxiosOrder";
+
 export default function Home() {
+
+    const [loginEmail, setLoginEmail] = useState('')
+    const [loginPassword, setLoginPassword] = useState('')
+    const loginHandleClick = () => {
+        instance.post('/admin/login', {
+            email: loginEmail,
+            password: loginPassword
+        })
+            .then(function (response) {
+                console.log(response.data.token);
+                localStorage.setItem('stToken',response.data.token)
+                window.location.reload();
+            })
+            .catch(function (error) {
+                console.log(error);
+            });
+
+    }
+
   return (
 
     <main className="flex flex-col min-h-screen items-center justify-center gap-5 dark:bg-gray-800 ">
@@ -19,7 +41,9 @@ export default function Home() {
                     <div className="mb-2 block">
                         <Label htmlFor="email1" value="Your email" />
                     </div>
-                    <TextInput id="email1" type="email" placeholder="name@flowbite.com" required />
+                    <TextInput
+                        onChange={(e) => setLoginEmail(e.target.value)}
+                        id="email1" type="email" placeholder="name@flowbite.com" required />
                 </div>
                 <div>
                     <div className="mb-2 block">
@@ -96,14 +120,18 @@ export default function Home() {
                             </div>
                         }
                     >
-                        <TextInput id="password1" type="password" required />
+                        <TextInput
+                            onChange={(e) => setLoginPassword(e.target.value)}
+                            id="password1" type="password" required />
                     </Popover>
                 </div>
                 <div className="flex items-center gap-2">
                     <Checkbox id="remember" />
                     <Label htmlFor="remember">Remember me</Label>
                 </div>
-                <Button type="submit">Submit</Button>
+                <Button
+                    onclick={() => loginHandleClick()}
+                    type="submit">Submit</Button>
             </form>
         </div>
         <DarkThemeToggle />
diff --git a/app/(auth)/register/page.tsx b/app/(auth)/register/page.tsx
index 3e939e0..21563e9 100644
--- a/app/(auth)/register/page.tsx
+++ b/app/(auth)/register/page.tsx
@@ -3,9 +3,48 @@
 import { Button, Checkbox, Label, TextInput } from "flowbite-react";
 import Link from "next/link";
 import {  DarkThemeToggle } from "flowbite-react";
+import instance from "@/app/services/Axios/AxiosOrder";
+import {useState} from "react";
+
 
 export default function Home() {
-  return (
+
+    const [email, setEmail] = useState('')
+    const [firstName, setFirstName] = useState('')
+    const [secName, setSecName] = useState('')
+    const [password, setPassword] = useState('')
+
+
+    const registerHandle = () =>{
+        if(firstName !== '' && secName !== '' && password !== '' && email !== ''){
+            instance.post('/admin/register', {
+                firstName: firstName,
+                secName: secName,
+                email: email,
+                password:password,
+            })
+                .then(function (response) {
+                    console.log(firstName);
+                    console.log(secName);
+                    console.log(email);
+                    console.log(password);
+                })
+                .catch(function (error) {
+                    console.log(error);
+                });
+
+        }else {
+            alert("Please input all info")
+        }
+
+        setEmail("");
+        setPassword("");
+        setFirstName("");
+        setSecName("");
+    }
+
+
+    return (
     <main className="flex flex-col min-h-screen items-center justify-center gap-5 dark:bg-gray-800 ">
         <div className="flex flex-col">
             <h1 className="text-4xl font-bold">Register</h1>
@@ -17,25 +56,33 @@ export default function Home() {
                     <div className="mb-2 block">
                         <Label htmlFor="small" value="First Name" />
                     </div>
-                    <TextInput id="small" type="text" sizing="sm" />
+                    <TextInput
+                        onChange={(e) => setFirstName(e.target.value)}
+                        id="small" type="text" sizing="sm" />
                 </div>
                 <div>
                     <div className="mb-2 block">
                         <Label htmlFor="small" value="Last Name" />
                     </div>
-                    <TextInput id="small" type="text" sizing="sm" />
+                    <TextInput
+                        onChange={(e) => setSecName(e.target.value)}
+                        id="small" type="text" sizing="sm" />
                 </div>
                 <div>
                     <div className="mb-2 block">
                         <Label htmlFor="email2" value="Your email" />
                     </div>
-                    <TextInput id="email2" type="email" placeholder="name@flowbite.com" required shadow />
+                    <TextInput
+                        onChange={(e) => setEmail(e.target.value)}
+                        id="email2" type="email" placeholder="name@flowbite.com" required shadow />
                 </div>
                 <div>
                     <div className="mb-2 block">
                         <Label htmlFor="password2" value="Your password" />
                     </div>
-                    <TextInput id="password2" type="password" required shadow />
+                    <TextInput
+                        onChange={(e) => setPassword(e.target.value)}
+                        id="password2" type="password" required shadow />
                 </div>
                 <div>
                     <div className="mb-2 block">
@@ -52,7 +99,9 @@ export default function Home() {
                         </Link>
                     </Label>
                 </div>
-                <Button type="submit">Register new account</Button>
+                <Button
+                    onclick={() => registerHandle()}
+                    type="submit">Register new account</Button>
             </form>
         </div>
 
diff --git a/app/communities/communityinfo/page.tsx b/app/communities/communityinfo/page.tsx
new file mode 100644
index 0000000..80a0950
--- /dev/null
+++ b/app/communities/communityinfo/page.tsx
@@ -0,0 +1,117 @@
+'use client';
+import { useState } from 'react';
+import { Breadcrumb, ButtonGroup, Button, Card } from 'flowbite-react';
+import InitiativeCard from "@/components/organization/Components/Card4/InitiativeCard";
+import ProjectCard from "@/components/organization/Components/Card5/ProjectCard";
+import UserProfile from "@/components/organization/Components/UserProfile/UserProfile";
+
+const CommunityInfo = () => {
+  const [activeTab, setActiveTab] = useState('about'); // Default active tab is 'about'
+
+  const handleTabChange = (tabName: string) => {
+    setActiveTab(tabName);
+  };
+
+  return (
+    <div className="container">
+      <Breadcrumb aria-label="Solid background breadcrumb example" className="bg-gray-50 px-5 py-3 dark:bg-gray-800">
+        <Breadcrumb.Item href="/communities">
+          Communities
+        </Breadcrumb.Item>
+        <Breadcrumb.Item>Community Name</Breadcrumb.Item>
+      </Breadcrumb>
+
+      <div className="text-center"> 
+        <Button.Group>
+          <Button color="gray" onClick={() => handleTabChange('about')}>About</Button>
+          <Button color="gray" onClick={() => handleTabChange('projects')}>Projects</Button>
+          <Button color="gray" onClick={() => handleTabChange('members')}>Members</Button>
+        </Button.Group>
+      </div>
+      <br></br>
+
+
+          {activeTab === 'about' && (
+                  <div className="bg-image relative h-96">
+                  {/* Background Image */}
+                  <img src="/images/image-3.jpg" alt="Background Image" className="absolute inset-0 w-full h-full object-cover z-0" />
+          
+                  {/* Conditional rendering based on activeTab */}
+                  <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-10">
+            <Card className="bg-white rounded-lg shadow-lg p-8 max-w-4xl overflow-auto">
+                <div className="flex gap-8">
+                  <div className="flex flex-col justify-start items-start gap-5">
+                    <div className="badge bg-green-100 rounded-full px-3 py-0.5">
+                      <span className="text-emerald-900 text-sm font-semibold">Habitat Restoration</span>
+                    </div>
+                    <p className="text-gray-700 text-base font-normal w-60 leading-normal">Volunteer to restore and rehabilitate natural habitats such as forests, wetlands, and coastal areas to promote biodiversity and ecosystem health.</p>
+                  </div>
+                  <div className="flex flex-col justify-start items-start gap-5">
+                    <div className="badge bg-sky-100 rounded-full px-3 py-0.5">
+                      <span className="text-blue-800 text-sm font-medium">Tree Planting</span>
+                    </div>
+                    <p className="text-gray-700 text-base font-normal w-60 leading-normal">Participate in tree planting initiatives to combat deforestation, improve air quality, and enhance carbon sequestration.</p>
+                  </div>
+                  <div className="flex flex-col justify-start items-start gap-5">
+                    <div className="badge bg-rose-100 rounded-full px-3 py-0.5">
+                      <span className="text-red-800 text-sm font-medium">Wildlife Conservation</span>
+                    </div>
+                    <p className="text-gray-700 text-base font-normal w-60 leading-normal">Volunteer for projects focused on protecting and monitoring wildlife species, including endangered animals, to prevent habitat loss and extinction.</p>
+                  </div>
+                </div>
+              </Card>
+              </div>
+          </div>
+          )}
+          
+
+          {activeTab === 'projects' && (
+                        <div className="grid grid-cols-2 md:grid-cols-3 gap-4 ">
+                          <InitiativeCard />
+                          <InitiativeCard />
+                          <InitiativeCard />
+                          <ProjectCard />
+                          <ProjectCard />
+                          <ProjectCard />
+                        </div>
+          )}
+          {activeTab === 'members' && (
+            <div className="grid grid-cols-2 md:grid-cols-3 gap-4 ">
+              <UserProfile userName="John Doe" profilePicture="/images/image-4.jpg" />
+              <UserProfile userName="Jane Smith" profilePicture="/images/image-4.jpg" />
+              <UserProfile userName="Michael Johnson" profilePicture="/images/image-4.jpg" />
+              <UserProfile userName="Emily Brown" profilePicture="/images/image-4.jpg" />
+              <UserProfile userName="David Williams" profilePicture="/images/image-4.jpg" />
+              <UserProfile userName="Sarah Miller" profilePicture="/images/image-4.jpg" />
+              <UserProfile userName="Daniel Davis" profilePicture="/images/image-4.jpg" />
+              <UserProfile userName="Olivia Wilson" profilePicture="/images/image-4.jpg" />
+              <UserProfile userName="William Martinez" profilePicture="/images/image-4.jpg" />
+              <UserProfile userName="Emma Thompson" profilePicture="/images/image-4.jpg" />
+              <UserProfile userName="Noah Anderson" profilePicture="/images/image-4.jpg" />
+              <UserProfile userName="Ava White" profilePicture="/images/image-4.jpg" />
+              <UserProfile userName="Liam Harris" profilePicture="/images/image-4.jpg" />
+              <UserProfile userName="Sophia Clark" profilePicture="/images/image-4.jpg" />
+              <UserProfile userName="Mason Walker" profilePicture="/images/image-4.jpg" />
+              <UserProfile userName="Isabella Turner" profilePicture="/images/image-4.jpg" />
+              <UserProfile userName="Lucas King" profilePicture="/images/image-4.jpg" />
+              <UserProfile userName="Mia Cooper" profilePicture="/images/image-4.jpg" />
+              <UserProfile userName="Oliver Jackson" profilePicture="/images/image-4.jpg" />
+              <UserProfile userName="Amelia Hill" profilePicture="/images/image-4.jpg" />
+              <UserProfile userName="Ethan Wright" profilePicture="/images/image-4.jpg" />
+              <UserProfile userName="Harper Scott" profilePicture="/images/image-4.jpg" />
+              <UserProfile userName="Logan Green" profilePicture="/images/image-4.jpg" />
+              <UserProfile userName="Aria Adams" profilePicture="/images/image-4.jpg" />
+              <UserProfile userName="James Baker" profilePicture="/images/image-4.jpg" />
+              <UserProfile userName="Avery Nelson" profilePicture="/images/image-4.jpg" />
+              <UserProfile userName="Benjamin Carter" profilePicture="/images/image-4.jpg" />
+              <UserProfile userName="Sofia Evans" profilePicture="/images/image-4.jpg" />
+              <UserProfile userName="William Garcia" profilePicture="/images/image-4.jpg" />
+            </div>
+
+          )}
+        </div>
+
+  );
+};
+
+export default CommunityInfo;
diff --git a/app/communities/page.tsx b/app/communities/page.tsx
index be9839c..604dd65 100644
--- a/app/communities/page.tsx
+++ b/app/communities/page.tsx
@@ -1,38 +1,50 @@
-
-import React, { useRef } from "react";
-import Link from "next/link";
+import React from "react";
 import { Carousel } from "flowbite-react";
-import CardNA from "@/components/organization/Components/Card/CardNA";
 import ComCard from "@/components/organization/Components/Card2/ComCard";
 
-
 export default function FindCommunitiesAndJoin(props: any) {
-    return (
-
-        <div >
-            <br/>
-            <form className="max-w-5xl mx-auto relative w-full rounded-full overflow-hidden bg-white shadow-lg">
-                <label htmlFor="default-search" className="sr-only">Search</label>
-                <div className="flex items-center pl-2">
-                    <svg className="w-6 h-6 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
-                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"/>
-                    </svg>
-                    <input type="search" id="default-search" className="block w-full px-4 py-2 text-sm text-gray-900 bg-transparent border-none focus:outline-none dark:text-white" placeholder="Search Communities..." required />
-                </div>
-            </form>
-
-            <br/>
-            <div className="p-4 border-2 border-gray-200 grid grid-cols-1 md:grid-cols-3 gap-4 justify-center">
-                <ComCard />
-                <ComCard />
-                <ComCard />
-                <ComCard />
-                <ComCard />
-                <ComCard />
-            </div>
-
-
+  return (
+    <div>
+      <br />
+      <form className="max-w-5xl mx-auto relative w-full rounded-full overflow-hidden bg-white shadow-lg">
+        <label htmlFor="default-search" className="sr-only">
+          Search
+        </label>
+        <div className="flex items-center pl-2">
+          <svg
+            className="w-6 h-6 text-gray-500 dark:text-gray-400"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 20 20"
+          >
+            <path
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="2"
+              d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"
+            />
+          </svg>
+          <input
+            type="search"
+            id="default-search"
+            className="block w-full px-4 py-2 text-sm text-gray-900 bg-transparent border-none focus:outline-none dark:text-white"
+            placeholder="Search Communities..."
+            required
+          />
         </div>
-
-    );
+      </form>
+
+      <br />
+      <div className="grid grid-cols-3 gap-4">
+        <ComCard />
+        <ComCard />
+        <ComCard />
+        <ComCard />
+        <ComCard />
+        <ComCard />
+      </div>
+    </div>
+  );
 }
diff --git a/app/firebase/storage.tsx b/app/firebase/storage.tsx
index 6d76a0e..854c1e4 100644
--- a/app/firebase/storage.tsx
+++ b/app/firebase/storage.tsx
@@ -49,7 +49,7 @@
     /**
      * Storage module from Firebase SDK.
      */
-    const storage = getStorage();
+    export const storage = getStorage();
 
     /**
      * Class representing Firebase Storage operations.
diff --git a/app/news/page.tsx b/app/news/page.tsx
index befe4e1..a069859 100644
--- a/app/news/page.tsx
+++ b/app/news/page.tsx
@@ -7,6 +7,9 @@ import { useState } from "react";
 export default function NewsArt(props: any) {
 
     const [openModal, setOpenModal] = useState(false);
+    const [Img, setImg] = useState('');
+
+
 
 
     return (
@@ -56,7 +59,7 @@ export default function NewsArt(props: any) {
                                     </p>
                                     <p className="text-xs text-gray-500 dark:text-gray-400">SVG, PNG, JPG or GIF (MAX. 800x400px)</p>
                                 </div>
-                                <FileInput id="dropzone-file" className="hidden" />
+                                <input type="file" onChange={(e) => setImg(e.target.files[0])} id="dropzone-file" className="hidden" />
                             </Label>
                         </div>
                     </Modal.Body>
@@ -64,9 +67,9 @@ export default function NewsArt(props: any) {
 
                         <div className="flex justify-center gap-4">
                             <Button color="failure" onClick={() => setOpenModal(false)}>
-                                Yes, I'm sure
+                                Yes,I'm sure
                             </Button>
-                            <Button color="gray" onClick={() => setOpenModal(false)}>
+                            <Button color="gray" >
                                 No, cancel
                             </Button>
                         </div>
diff --git a/app/services/Axios/AxiosOrder.tsx b/app/services/Axios/AxiosOrder.tsx
new file mode 100644
index 0000000..9d055e7
--- /dev/null
+++ b/app/services/Axios/AxiosOrder.tsx
@@ -0,0 +1,12 @@
+import axios from "axios";
+
+
+const token = localStorage.getItem('stToken')
+
+const instance = axios.create({
+    baseURL: 'http://localhost:8080',
+    // timeout: 1000,
+    headers: {Authorization: `Bearer ${token}`}
+});
+
+export default instance;
diff --git a/components/organization/Components/Breadcrumb/breadcrumb.tsx b/components/organization/Components/Breadcrumb/breadcrumb.tsx
new file mode 100644
index 0000000..7ce561a
--- /dev/null
+++ b/components/organization/Components/Breadcrumb/breadcrumb.tsx
@@ -0,0 +1,29 @@
+import React from "react";
+import Link from "next/link";
+
+interface BreadcrumbProps {
+  items: string[];
+}
+
+const Breadcrumb: React.FC<BreadcrumbProps> = ({ items }) => {
+  return (
+    <nav className="text-sm font-medium mb-4" aria-label="Breadcrumb">
+      <ol className="list-none p-0 inline-flex">
+        {items.map((item, index) => (
+          <li key={index} className="flex items-center">
+            {index > 0 && <span className="mx-2">/</span>}
+            {index === items.length - 1 ? (
+              <span className="text-gray-500 dark:text-gray-400">{item}</span>
+            ) : (
+              <Link href="#">
+                <a className="text-blue-500 hover:underline">{item}</a>
+              </Link>
+            )}
+          </li>
+        ))}
+      </ol>
+    </nav>
+  );
+};
+
+export default Breadcrumb;
diff --git a/components/organization/Components/UserProfile/UserProfile.tsx b/components/organization/Components/UserProfile/UserProfile.tsx
new file mode 100644
index 0000000..bfe4875
--- /dev/null
+++ b/components/organization/Components/UserProfile/UserProfile.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+
+interface UserProfileProps {
+  userName: string;
+  profilePicture: string;
+}
+
+const UserProfile: React.FC<UserProfileProps> = ({ userName, profilePicture }) => {
+  return (
+    <div className="flex items-center space-x-4">
+      <img
+        src={profilePicture}
+        alt={`${userName}'s Profile`}
+        className="w-10 h-10 rounded-full"
+      />
+      <span className="text-lg font-medium">{userName}</span>
+    </div>
+  );
+};
+
+export default UserProfile;
diff --git a/package-lock.json b/package-lock.json
index 15c3e94..f02a137 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "flowbite-react-template-nextjs",
       "version": "0.1.0",
       "dependencies": {
+        "axios": "^1.6.8",
         "firebase": "^10.11.0",
         "firebase-admin": "^12.1.0",
         "firebase-storage": "^1.1.4",
@@ -16,7 +17,8 @@
         "react": "^18",
         "react-dom": "^18",
         "react-slick": "^0.30.2",
-        "slick-carousel": "^1.8.1"
+        "slick-carousel": "^1.8.1",
+        "uuid": "^9.0.1"
       },
       "devDependencies": {
         "@types/node": "^20",
@@ -1794,8 +1796,7 @@
     "node_modules/asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
-      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
-      "optional": true
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
     },
     "node_modules/autoprefixer": {
       "version": "10.4.19",
@@ -1858,6 +1859,29 @@
         "node": ">=4"
       }
     },
+    "node_modules/axios": {
+      "version": "1.6.8",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.8.tgz",
+      "integrity": "sha512-v/ZHtJDU39mDpyBoFVkETcd/uNdxrWRrg3bKpOKzXFA6Bvqopts6ALSMU3y6ijYxbw2B+wPrIv46egTzJXCLGQ==",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
+    "node_modules/axios/node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/axobject-query": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.2.1.tgz",
@@ -2197,7 +2221,6 @@
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
       "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
-      "optional": true,
       "dependencies": {
         "delayed-stream": "~1.0.0"
       },
@@ -2348,7 +2371,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
       "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
-      "optional": true,
       "engines": {
         "node": ">=0.4.0"
       }
@@ -3352,6 +3374,25 @@
         "tailwindcss": "^3"
       }
     },
+    "node_modules/follow-redirects": {
+      "version": "1.15.6",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
+      "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/for-each": {
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
@@ -4752,7 +4793,6 @@
       "version": "1.52.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
       "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
-      "optional": true,
       "engines": {
         "node": ">= 0.6"
       }
@@ -4761,7 +4801,6 @@
       "version": "2.1.35",
       "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
       "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
-      "optional": true,
       "dependencies": {
         "mime-db": "1.52.0"
       },
@@ -5601,6 +5640,11 @@
         "node": ">=12.0.0"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "node_modules/pseudomap": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz",
diff --git a/package.json b/package.json
index 5d04cc5..fc4e472 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
+    "axios": "^1.6.8",
     "firebase": "^10.11.0",
     "firebase-admin": "^12.1.0",
     "firebase-storage": "^1.1.4",
@@ -19,7 +20,8 @@
     "react": "^18",
     "react-dom": "^18",
     "react-slick": "^0.30.2",
-    "slick-carousel": "^1.8.1"
+    "slick-carousel": "^1.8.1",
+    "uuid": "^9.0.1"
   },
   "devDependencies": {
     "@types/node": "^20",
diff --git a/public/images/image-3.jpg b/public/images/image-3.jpg
new file mode 100644
index 0000000..41dae20
Binary files /dev/null and b/public/images/image-3.jpg differ
diff --git a/public/images/image-4.jpg b/public/images/image-4.jpg
new file mode 100644
index 0000000..4f50a76
Binary files /dev/null and b/public/images/image-4.jpg differ