diff --git a/resources/js/Components/Map/TaskPhoto.tsx b/resources/js/Components/Map/TaskPhoto.tsx
index 59e6d985..3c1f49a0 100644
--- a/resources/js/Components/Map/TaskPhoto.tsx
+++ b/resources/js/Components/Map/TaskPhoto.tsx
@@ -22,7 +22,9 @@ const TaskPhoto: any = ({ data, onClick }: any) => {
           </div>
           <div className={styles.marker_image}>
             {imageSrc && (
-              <img className={styles.marker_image_img} src={imageSrc}></img>
+              <img className={styles.marker_image_img} src={imageSrc}
+                style={{transform: `rotate(${photo?.angle}deg)`}}
+              ></img>
             )}
           </div>
           <img
diff --git a/resources/js/Components/Map/task_photo.module.css b/resources/js/Components/Map/task_photo.module.css
index 8d9ac651..d2139d19 100644
--- a/resources/js/Components/Map/task_photo.module.css
+++ b/resources/js/Components/Map/task_photo.module.css
@@ -7,6 +7,8 @@
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
+  justify-content: center;
+  align-items: center;
   left: 0;
   overflow: hidden;
   border-radius: 50%;
@@ -23,8 +25,8 @@
   position: absolute;
   -o-object-fit: scale-down;
   object-fit: scale-down;
-  left: 50%;
-  top: 50%;
+  /* left: 50%;
+  top: 50%; */
   mask-image: url(/public/icon_photo_mask.png);
   -webkit-transform: translate(-50%, 0);
   -ms-transform: translate(-50%, 0);
diff --git a/resources/js/Components/PhotoGallery/Filter.tsx b/resources/js/Components/PhotoGallery/Filter.tsx
new file mode 100644
index 00000000..94269d10
--- /dev/null
+++ b/resources/js/Components/PhotoGallery/Filter.tsx
@@ -0,0 +1,85 @@
+import React, {useState} from 'react';
+import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/react';
+import { Link } from '@inertiajs/react';
+interface FilterProps {
+    isMapVisible?: boolean;
+    setIsMapVisible?: () => void;
+    exportToPdf: () => void;
+    selectAll: () => void;
+    onDeleteHandler: () => void;
+    selectAllPdfHandler: () => void;
+    chooseTask: () => void;
+}
+
+const Filter: React.FC<FilterProps> = ({ isMapVisible, setIsMapVisible, exportToPdf, selectAll, onDeleteHandler, selectAllPdfHandler, chooseTask }) => {
+    //const [isPhotoMap, setPhotoMap] = useState(true);
+    return (
+        <div className={`photo-gallery-filter dark:bg-gray-800`}>
+            <div className={`photo-gallery-filter-container`}>
+                <div className={`photo-gallery-filter-heading`}>
+                    <h1 className='dark:text-white'>Photo Gallery</h1>
+                </div>
+                <div className={`photo-gallery-filter-actions`}>
+                    <Menu as="div" className={`relative inline-block text-left photo-gallery-filter-update-dropdown`}>
+                        <MenuButton className={`photo-gallery-filter-update-dropdown-toggle`}>
+                            <span>
+                                <svg width="24" height="17" viewBox="0 0 24 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                    <path d="M9.96484 10.4297L11.3359 8.77734L11.6523 9.16406V11.0273V14.7891C11.6523 15.5273 11.0547 16.125 10.3164 16.125C10.0352 16.125 9.75391 16.0547 9.50781 15.8789L6.625 13.6641C6.27344 13.3828 6.02734 12.9961 6.02734 12.5391V11.0273L1.35156 5.26172C0.964844 4.80469 0.859375 4.13672 1.14062 3.57422C1.38672 3.01172 1.98438 2.625 2.61719 2.625H6.69531C6.80078 3.04688 6.97656 3.39844 7.22266 3.71484L7.71484 4.3125H2.75781L7.71484 10.4297V12.1523L9.96484 14.1211V10.4297ZM23.3242 1.32422C23.6055 1.88672 23.5 2.55469 23.1133 3.01172L18.4023 8.77734V13.6641C18.4023 14.4023 17.8047 15 17.0664 15C16.7852 15 16.5039 14.9297 16.2578 14.7539L13.375 12.5391C13.0234 12.2578 12.7773 11.8711 12.7773 11.4141V8.77734L8.10156 3.01172C7.71484 2.55469 7.60938 1.88672 7.89062 1.32422C8.13672 0.761719 8.73438 0.375 9.36719 0.375H21.8477C22.4805 0.375 23.0781 0.761719 23.3242 1.32422ZM16.7148 8.17969L21.707 2.0625H9.50781L14.4648 8.17969V11.2383L16.7148 12.9961V8.17969Z" fill="white"/>
+                                </svg>
+                            </span>
+                            <span>Update Filter</span>
+                        </MenuButton>
+                        <MenuItems transition className={`photo-gallery-filter-update-dropdown-menu absolute right-0 z-10 origin-top-right transition focus:outline-hidden data-closed:scale-95 data-closed:transform data-closed:opacity-0 data-enter:duration-100 data-enter:ease-out data-leave:duration-75 data-leave:ease-in`}>
+                            <MenuItem>
+                                <button  onClick={exportToPdf} type={`button`}>Export To PDF</button>
+                            </MenuItem>
+                            <MenuItem>
+                                <button type={`button`} onClick={selectAllPdfHandler}>Export Selected To PDF</button>
+                            </MenuItem>
+                        </MenuItems>
+                    </Menu>
+                    <Menu as="div" className={`relative inline-block text-left photo-gallery-filter-dropdown`}>
+                        <MenuButton className={`photo-gallery-filter-dropdown-toggle`}>
+                            <span>
+                                <svg width="24" height="17" viewBox="0 0 24 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                    <path d="M9.96484 10.4297L11.3359 8.77734L11.6523 9.16406V11.0273V14.7891C11.6523 15.5273 11.0547 16.125 10.3164 16.125C10.0352 16.125 9.75391 16.0547 9.50781 15.8789L6.625 13.6641C6.27344 13.3828 6.02734 12.9961 6.02734 12.5391V11.0273L1.35156 5.26172C0.964844 4.80469 0.859375 4.13672 1.14062 3.57422C1.38672 3.01172 1.98438 2.625 2.61719 2.625H6.69531C6.80078 3.04688 6.97656 3.39844 7.22266 3.71484L7.71484 4.3125H2.75781L7.71484 10.4297V12.1523L9.96484 14.1211V10.4297ZM23.3242 1.32422C23.6055 1.88672 23.5 2.55469 23.1133 3.01172L18.4023 8.77734V13.6641C18.4023 14.4023 17.8047 15 17.0664 15C16.7852 15 16.5039 14.9297 16.2578 14.7539L13.375 12.5391C13.0234 12.2578 12.7773 11.8711 12.7773 11.4141V8.77734L8.10156 3.01172C7.71484 2.55469 7.60938 1.88672 7.89062 1.32422C8.13672 0.761719 8.73438 0.375 9.36719 0.375H21.8477C22.4805 0.375 23.0781 0.761719 23.3242 1.32422ZM16.7148 8.17969L21.707 2.0625H9.50781L14.4648 8.17969V11.2383L16.7148 12.9961V8.17969Z" fill="#4F46E5"/>
+                                </svg>
+                            </span>
+                            <span>Filter</span>
+                        </MenuButton>
+                        <MenuItems transition className={`photo-gallery-filter-dropdown-menu absolute right-0 z-10 origin-top-right transition focus:outline-hidden data-closed:scale-95 data-closed:transform data-closed:opacity-0 data-enter:duration-100 data-enter:ease-out data-leave:duration-75 data-leave:ease-in`}>
+                            <MenuItem>
+                                <button type={`button`} onClick={selectAll}>Select All</button>
+                            </MenuItem>
+                            <MenuItem>
+                                <button type={`button`}  onClick={selectAll}>Cancel Selection</button>
+                            </MenuItem>
+                            <MenuItem>
+                                <button className={`delete-item`} type={`button`} onClick={onDeleteHandler}>Delete Selected</button>
+                            </MenuItem>
+                            <MenuItem>
+                                <button type={`button`} onClick={chooseTask}>Choose Task</button>
+                            </MenuItem>
+                            <MenuItem>
+                                <button onClick={exportToPdf} type={`button`}>Export To PDF</button>
+                            </MenuItem>
+                            <MenuItem>
+                                <button type={`button`}  onClick={selectAllPdfHandler}>Export Selected To PDF</button>
+                            </MenuItem>
+                        </MenuItems>
+                    </Menu>
+                    {/* <button onClick={setIsMapVisible} className={`photo-gallery-filter-map-switch`} type={`button`}>
+                        <span>
+                            <svg width="16" height="13" viewBox="0 0 16 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path d="M15.1484 0.679688C15.4492 0.542969 15.75 0.789062 15.75 1.0625V10.5508C15.75 10.9062 15.5312 11.2344 15.1758 11.3438L11.0469 12.793C10.6914 12.9297 10.3086 12.9023 9.95312 12.793L5.25 11.125L0.601562 12.8477C0.273438 12.9844 0 12.7383 0 12.4375V2.97656C0 2.62109 0.21875 2.29297 0.546875 2.15625L4.70312 0.734375C4.86719 0.652344 5.05859 0.625 5.22266 0.625C5.41406 0.625 5.60547 0.679688 5.79688 0.734375L10.5 2.375L15.1484 0.679688ZM6.125 2.23828V10.0586L9.625 11.2891V3.46875L6.125 2.23828ZM1.3125 11.1797L4.78516 9.89453H4.8125V2.07422L1.3125 3.30469V11.1797ZM14.4375 10.2227V2.32031L10.9375 3.60547V3.63281V11.4531L14.4375 10.2227Z" fill="white"/>
+                            </svg>
+                        </span>
+                        <span>{isMapVisible ? 'Hide MAP' : 'Show MAP'}</span>
+                    </button> */}
+                </div>
+            </div>
+        </div>
+    )
+};
+
+export default Filter;
\ No newline at end of file
diff --git a/resources/js/Layouts/AuthenticatedLayout.tsx b/resources/js/Layouts/AuthenticatedLayout.tsx
index df89aa76..c1aceb84 100644
--- a/resources/js/Layouts/AuthenticatedLayout.tsx
+++ b/resources/js/Layouts/AuthenticatedLayout.tsx
@@ -56,7 +56,7 @@ export default function Authenticated({
     return (
         <div className="min-h-screen bg-gray-100 dark:bg-gray-900">
             <nav className="bg-white dark:bg-gray-800 border-b border-gray-100 dark:border-gray-700">
-                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+                <div className="max-w-7xl mx-auto px-2 sm:px-2 lg:px-2">
                     <div className="flex justify-between h-16">
                         <div className="flex">
                             <div className="shrink-0 flex items-center">
diff --git a/resources/js/Pages/Farmers/PhotoGallery.tsx b/resources/js/Pages/Farmers/PhotoGallery.tsx
index 31ceb846..38d93eeb 100644
--- a/resources/js/Pages/Farmers/PhotoGallery.tsx
+++ b/resources/js/Pages/Farmers/PhotoGallery.tsx
@@ -19,6 +19,7 @@ import axios from "axios";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faClose } from "@fortawesome/free-solid-svg-icons";
 import BackButton from "@/Components/BackButton";
+import Filter from "@/Components/PhotoGallery/Filter";
 
 export function PhotoGallery({ auth, photos, splitMode }: PageProps) {
     const [selectedTask, setSelectedTask] = useState("");     
@@ -37,9 +38,24 @@ export function PhotoGallery({ auth, photos, splitMode }: PageProps) {
         split: splitMode ? true : false,
         single: splitMode ? false : true,
     });
+
+
     useEffect(() => {
         loadData();
     }, []);
+    
+    useEffect(() => {
+        const tasks_photos_array: Array<TaskPhotos> = [];
+        for (let item of photo_) {
+            let tasks_photos_data = {
+                farmer_name: `${auth.user.name} ${auth.user.surname}`,
+                photo: item,
+                location: [item?.lng, item?.lat],
+            };
+            tasks_photos_array.push(tasks_photos_data);
+        }
+        set_filter_tasks_photos(tasks_photos_array);
+    }, [photo_]);
 
     function loadData() {
         const tasks_photos_array: Array<TaskPhotos> = [];
@@ -174,6 +190,14 @@ export function PhotoGallery({ auth, photos, splitMode }: PageProps) {
         }));
     };
 
+    const exportToPdf = () => {
+        const queryString = new URLSearchParams({
+            unassigned: 'true',
+            total: photos.length.toString()
+        }).toString();
+        const exportUrl = route("pdf_preview") + '?' + queryString;
+        window.open(exportUrl,'_blank')
+    }
 
     const LeftPane = useCallback (({
         photo_,
@@ -211,7 +235,7 @@ export function PhotoGallery({ auth, photos, splitMode }: PageProps) {
                 </div>
             </div>
         );
-    },[splitView.split]);
+    },[splitView.split, photo_]);
 
 
     const RightPane = useCallback(
@@ -238,7 +262,7 @@ export function PhotoGallery({ auth, photos, splitMode }: PageProps) {
                                 zoomFilter={handleZoomFilter}
                                 isUnassigned={true}
                             />
-                            <div className="flex pt-2 px-2">
+                            {/* <div className="flex pt-2 px-2">
                                 <div className="flex flex-wrap  items-center my-2 gap-y-2 dark:text-gray-300  text-lg font-medium">
                                     <button className="focus:outline-none  flex items-center border border-indigo-600 text-indigo-600 dark:text-indigo-400 px-4 py-2 rounded-md mr-3"
                                         onClick={selectAll}
@@ -284,7 +308,7 @@ export function PhotoGallery({ auth, photos, splitMode }: PageProps) {
                                         <span>Export Selected To PDF</span>
                                     </button>
                                 </div>
-                            </div>
+                            </div> */}
                         </div>
                     </div>
                 </div>
@@ -331,15 +355,16 @@ export function PhotoGallery({ auth, photos, splitMode }: PageProps) {
     return (
         <AuthenticatedLayout
             user={auth.user}
-            header={
-                <h2 className="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
-                    Photo Gallery
-                </h2>
-            }
+            // header={
+            //     <h2 className="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
+            //         Photo Gallery
+            //     </h2>
+            // }
             setSplitView={setSplitView}
             splitView={splitView}
         >
             <Head title="Photo gallery" />
+            <Filter exportToPdf={exportToPdf} selectAll={selectAll} onDeleteHandler={onDeleteHandler} selectAllPdfHandler={selectAllPdfHandler} chooseTask={chooseTask} />
             <BackButton label="Back" className="" />
             <div className="flex flex-wrap ">
                 {splitView.split ? (
diff --git a/resources/js/types/index.d.ts b/resources/js/types/index.d.ts
index e115a9ce..d724053f 100644
--- a/resources/js/types/index.d.ts
+++ b/resources/js/types/index.d.ts
@@ -185,6 +185,7 @@ export interface GalleryProps{
   setPhotos?:any
   destroy?:(id:string)=>void
   isSplitView?:boolean
+  setFilterPhotos?: void
 }
 
 export interface GalleryModalProps{
diff --git a/resources/scss/app.scss b/resources/scss/app.scss
new file mode 100644
index 00000000..446f9d28
--- /dev/null
+++ b/resources/scss/app.scss
@@ -0,0 +1,4 @@
+@use "include/common";
+@use "include/header";
+@use "include/photo_gallery";
+@use "include/footer";
diff --git a/resources/scss/include/_common.scss b/resources/scss/include/_common.scss
new file mode 100644
index 00000000..6dfafad6
--- /dev/null
+++ b/resources/scss/include/_common.scss
@@ -0,0 +1,5 @@
+.site-content{
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+}
diff --git a/resources/scss/include/_footer.scss b/resources/scss/include/_footer.scss
new file mode 100644
index 00000000..4ab285b5
--- /dev/null
+++ b/resources/scss/include/_footer.scss
@@ -0,0 +1,30 @@
+@use "mixin";
+.site-footer{
+    background-color: white;
+    margin-top: auto;
+    padding: 11.5px 16px;
+    bottom: 0;
+    position: fixed;
+    width: 100%;
+    .site-footer-container{
+        margin-left: auto;
+        margin-right: auto;
+        max-width: 1216px;
+        width: 100%;
+        p{
+            color: #6B7280;
+            font-size: 14px;
+            @include mixin.font-figtree-medium;
+            line-height: calc(17 / 14);
+        }
+    }
+    &.dark-footer{
+        background-color: #111827;
+        border-top: 1px solid #374151;
+        .site-footer-container{
+            p{
+                color: #9CA3AF;
+            }
+        }
+    }
+}
diff --git a/resources/scss/include/_header.scss b/resources/scss/include/_header.scss
new file mode 100644
index 00000000..5bd2ad01
--- /dev/null
+++ b/resources/scss/include/_header.scss
@@ -0,0 +1,4 @@
+.brand-image{
+    max-width: 39px;
+}
+
diff --git a/resources/scss/include/_mixin.scss b/resources/scss/include/_mixin.scss
new file mode 100644
index 00000000..b49e7a20
--- /dev/null
+++ b/resources/scss/include/_mixin.scss
@@ -0,0 +1,21 @@
+@mixin font-figtree-regular{
+    font-family: "Figtree", sans-serif;
+    font-weight: 400;
+}
+@mixin font-figtree-medium{
+    font-family: "Figtree", sans-serif;
+    font-weight: 500;
+}
+@mixin font-figtree-semibold{
+    font-family: "Figtree", sans-serif;
+    font-weight: 600;
+}
+@mixin font-figtree-bold{
+    font-family: "Figtree", sans-serif;
+    font-weight: 700;
+}
+@mixin font-figtree-black{
+    font-family: "Figtree", sans-serif;
+    font-weight: 900;
+}
+
diff --git a/resources/scss/include/_photo_gallery.scss b/resources/scss/include/_photo_gallery.scss
new file mode 100644
index 00000000..da309fa2
--- /dev/null
+++ b/resources/scss/include/_photo_gallery.scss
@@ -0,0 +1,687 @@
+@use "mixin";
+.photo-gallery-filter{
+    background-color: white;
+    padding: 10px 16px;
+    width: 100%;
+    .photo-gallery-filter-container{
+        align-items: center;
+        display: flex;
+        justify-content: space-between;
+        margin-left: auto;
+        margin-right: auto;
+        max-width: 1216px;
+        width: 100%;
+        .photo-gallery-filter-heading{
+            color: #111827;
+            @include mixin.font-figtree-semibold;
+            line-height: calc(24 / 20);
+        }
+        .photo-gallery-filter-actions{
+            align-items: center;
+            column-gap: 24px;
+            display: flex;
+            @media (max-width: 767.98px){
+                column-gap: 10px;
+            }
+            .photo-gallery-filter-update-dropdown{
+                @media (max-width: 767.98px){
+                    display: none;
+                }
+                .photo-gallery-filter-update-dropdown-toggle{
+                    align-items: center;
+                    background-color: #4F46E5;
+                    border: 1px solid #4F46E5;
+                    border-radius: 4px;
+                    color: white;
+                    display: flex;
+                    font-size: 18px;
+                    @include mixin.font-figtree-medium;
+                    gap: 10px;
+                    height: 40px;
+                    outline: none;
+                    padding: 8px 16px;
+                    text-decoration: none;
+                    &:hover,
+                    &:focus{
+                        outline: none;
+                        text-decoration: none;
+                    }
+                }
+                .photo-gallery-filter-update-dropdown-menu{
+                    background-color: white;
+                    border: 1px solid #818CF8;
+                    border-radius: 4px;
+                    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
+                    margin-top: 10px;
+                    min-width: 200px;
+                    outline: none;
+                    &:before{
+                        background-color: white;
+                        border-color: #818CF8;
+                        border-style: solid;
+                        border-width: 1px 1px 0 0;
+                        content: '';
+                        height: 15px;
+                        position: absolute;
+                        right: 20px;
+                        top: -8px;
+                        transform: rotate(-45deg);
+                        width: 15px;
+                    }
+                    button{
+                        align-items: center;
+                        color: #818CF8;
+                        display: flex;
+                        font-size: 14px;
+                        @include mixin.font-figtree-medium;
+                        height: 30px;
+                        padding: 0 16px;
+                        width: 100%;
+                        white-space: nowrap;
+                        &:not(:last-of-type){
+                            border-bottom: 1px solid #818CF8;
+                        }
+                    }
+                }
+            }
+            .photo-gallery-filter-dropdown{
+                .photo-gallery-filter-dropdown-toggle{
+                    align-items: center;
+                    background-color: white;
+                    border: 1px solid #4F46E5;
+                    border-radius: 4px;
+                    color: #4F46E5;
+                    display: flex;
+                    font-size: 18px;
+                    @include mixin.font-figtree-medium;
+                    gap: 10px;
+                    height: 40px;
+                    outline: none;
+                    padding: 8px 16px;
+                    text-decoration: none;
+                    @media (max-width: 767.98px){
+                        font-size: 14px;
+                        height: auto;
+                        padding: 5px 10px;
+                    }
+                    &:hover,
+                    &:focus{
+                        outline: none;
+                        text-decoration: none;
+                    }
+                }
+                .photo-gallery-filter-dropdown-menu{
+                    background-color: white;
+                    border: 1px solid #818CF8;
+                    border-radius: 4px;
+                    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
+                    margin-top: 10px;
+                    min-width: 200px;
+                    outline: none;
+                    &:before{
+                        background-color: white;
+                        border-color: #818CF8;
+                        border-style: solid;
+                        border-width: 1px 1px 0 0;
+                        content: '';
+                        height: 15px;
+                        position: absolute;
+                        right: 20px;
+                        top: -8px;
+                        transform: rotate(-45deg);
+                        width: 15px;
+                    }
+                    button{
+                        align-items: center;
+                        color: #818CF8;
+                        display: flex;
+                        font-size: 14px;
+                        @include mixin.font-figtree-medium;
+                        height: 30px;
+                        padding: 0 16px;
+                        width: 100%;
+                        white-space: nowrap;
+                        &:not(:last-of-type){
+                            border-bottom: 1px solid #818CF8;
+                        }
+                        &.delete-item{
+                            color: #DC2626;
+                        }
+                        &.md\:hidden{
+                            @media (min-width: 768px){
+                                display: none;
+                            }
+                        }
+                    }
+                }
+            }
+            .photo-gallery-filter-map-switch{
+                align-items: center;
+                background-color: #32ADE6;
+                border-radius: 4px;
+                color: white;
+                display: flex;
+                justify-content: center;
+                padding: 8px 16px;
+                gap: 10px;
+                height: 40px;
+                width: 136px;
+                @media (max-width: 767.98px){
+                    font-size: 14px;
+                    height: 33px;
+                    padding: 5px 10px;
+                    width: 115px;
+                }
+            }
+        }
+    }
+}
+.photo-card-item{
+    max-width: 238px;
+    width: 100%;
+    .photo-card-item-container{
+        background-color: white;
+        border-radius: 4px;
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 330px;
+        overflow: hidden;
+        position: relative;
+        cursor: pointer;
+        .photo-card-item-image{
+            position: relative;
+            width: 100%;
+            img{
+                // left: 0;
+                // position: absolute;
+                // top: 50%;
+                // transform: translateY(-50%);
+            }
+        }
+        .photo-card-item-mask{
+            align-items: center;
+            background-color: rgba(black, 0.6);
+            border: 2px solid transparent;
+            border-radius: 4px;
+            bottom: 0;
+            display: flex;
+            justify-content: center;
+            left: 0;
+            opacity: 0;
+            position: absolute;
+            right: 0;
+            top: 0;
+            transition: all 0.3s ease-in-out 0s;
+            visibility: hidden;
+            @media (max-width: 1199.98px){
+                opacity: 1;
+                visibility: visible;
+            }
+            .photo-card-item-mask-badge{
+                left: 10px;
+                opacity: 0;
+                position: absolute;
+                top: 10px;
+                transition: all 0.3s ease-in-out 0s;
+                visibility: hidden;
+                z-index: 1;
+            }
+            .photo-card-item-mask-container{
+                align-items: center;
+                background-color: white;
+                border-radius: 4px;
+                display: flex;
+                gap: 10px;
+                opacity: 1;
+                padding: 8px 16px;
+                transition: all 0.3s ease-in-out 0s;
+                visibility: visible;
+                button{
+                    outline: none;
+                    text-decoration: none;
+                    svg{
+                        path{
+                            transition: all 0.3s ease-in-out 0s;
+                        }
+                    }
+                    &:hover,
+                    &:focus{
+                        outline: none;
+                        text-decoration: none;
+                        svg{
+                            path{
+                                fill: #3B82F6;
+                            }
+                        }
+                    }
+                }
+            }
+            &.item-selected{
+                background-color: transparent;
+                border-color: #3B82F6;
+                opacity: 1;
+                visibility: visible;
+                @media (max-width: 1199.98px){
+                    background-color: rgba(black, 0.6);
+                }
+                .photo-card-item-mask-badge{
+                    opacity: 1;
+                    visibility: visible;
+                }
+                .photo-card-item-mask-container{
+                    opacity: 0;
+                    visibility: hidden;
+                    @media (max-width: 1199.98px){
+                        opacity: 1;
+                        visibility: visible;
+                    }
+                    button{
+                        &:first-of-type{
+                            svg{
+                                path{
+                                    fill: #3B82F6;
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        &:hover,
+        &:focus{
+            .photo-card-item-mask{
+                opacity: 1;
+                visibility: visible;
+                &.item-selected{
+                    background-color: rgba(black, 0.6);
+                    .photo-card-item-mask-container{
+                        opacity: 1;
+                        visibility: visible;
+                        button{
+                            &:first-of-type{
+                                svg{
+                                    path{
+                                        fill: #3B82F6;
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+.photo-card-item-popups{
+    //align-items: center;
+    background-color: rgba(black, 0.6);
+    bottom: 0;
+    //display: flex;
+    height: 100%;
+    //justify-content: center;
+    left: 0;
+    overflow-x: hidden;
+    overflow-y: auto;
+    position: fixed;
+    right: 0;
+    top: 0;
+    width: 100%;
+    z-index: 1020;
+    .photo-card-item-popups-container{
+        background-color: white;
+        border: 1px solid #EDEDED;
+        border-radius: 4px;
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
+        display: flex;
+        flex-direction: column;
+        margin: 30px auto;
+        max-width: 720px;
+        width: 100%;
+        @media (max-width: 1023.98px){
+            max-width: 600px;
+        }
+        .photo-card-item-popups-header{
+            border-bottom: 1px solid #EDEDED;
+            display: flex;
+            justify-content: space-between;
+            padding: 10px 16px;
+            .photo-card-item-popups-header-title{
+                align-items: center;
+                color: #6B7280;
+                display: flex;
+                font-size: 14px;
+                @include mixin.font-figtree-medium;
+                gap: 10px;
+                line-height: 20px;
+            }
+            button{
+                background-color: transparent;
+                border: none;
+                outline: none;
+                text-decoration: none;
+                &:hover,
+                &:focus{
+                    outline: none;
+                    text-decoration: none;
+                }
+            }
+        }
+        .photo-card-item-popups-body{
+            display: flex;
+            flex-direction: column;
+            gap: 16px;
+            padding: 16px;
+            .photo-card-item-popups-actions{
+                align-items: center;
+                display: flex;
+                gap: 10px;
+                justify-content: center;
+                button{
+                    align-items: center;
+                    background-color: white;
+                    border: 1px solid #3B82F6;
+                    border-radius: 4px;
+                    display: flex;
+                    justify-content: center;
+                    outline: none;
+                    padding: 5px 10px;
+                    text-decoration: none;
+                    &:hover,
+                    &:focus{
+                        outline: none;
+                        text-decoration: none;
+                    }
+                }
+            }
+            .photo-card-item-popups-image{
+                background-color: #F3F4F6;
+                border-radius: 4px;
+                display: flex;
+                justify-content: center;
+                min-height: 328px;
+                .photo-card-item-popups-image-container{
+                    max-width: 184px;
+                    width: 100%;
+                }
+            }
+            .photo-card-item-popups-details{
+                display: flex;
+                flex-direction: column;
+                .photo-card-item-popups-details-table{
+                    border: 1px solid #EDEDED;
+                    border-radius: 4px;
+                    display: flex;
+                    flex-direction: column;
+                    .photo-card-item-popups-details-table-row{
+                        display: grid;
+                        grid-template-columns: 160px 1fr;
+                        &:not(:last-of-type){
+                            border-bottom: 1px solid #EDEDED;
+                        }
+                        .photo-card-item-popups-details-table-item{
+                            color: #111827;
+                            font-size: 12px;
+                            @include mixin.font-figtree-regular;
+                            line-height: calc(14 / 12);
+                            padding: 5px 8px;
+                            &:not(:last-of-type){
+                                border-right: 1px solid #EDEDED;
+                            }
+                            &:first-of-type{
+                                color: #3B82F6;
+                                @include mixin.font-figtree-medium;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+.pb-pagination{
+    align-items: center;
+    display: flex;
+    //flex-direction: column;
+    justify-content: center;
+    width: 100%;
+    .pb-pagination-container{
+        align-items: center;
+        display: flex;
+        justify-content: center;
+        gap: 6px;
+        .pb-pagination-item{
+            align-items: center;
+            background-color: #E4E4E4;
+            border-radius: 2px;
+            color: black;
+            display: flex;
+            font-size: 12px;
+            @include mixin.font-figtree-regular;
+            height: 20px;
+            justify-content: center;
+            line-height: 1.2;
+            width: 20px;
+            &.active{
+                background-color: #4F46E5;
+                color: white;
+            }
+            &.more-items{
+                background-color: transparent;
+            }
+        }
+    }
+}
+.photo-gallery-card-view{
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    .photo-gallery-card-view-container{
+        display: flex;
+        flex-direction: column;
+        gap: 24px;
+        padding: 20px 16px;
+        .photo-gallery-cards{
+            display: flex;
+            flex-wrap: wrap;
+            gap: 1rem;
+            justify-content: center;
+        }
+    }
+}
+.photo_gallery_page{
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    .photo-gallery-map-view{
+        display: flex;
+        flex: 1;
+        .photo-gallery-map-view-container{
+            display: flex;
+            width: 100%;
+            .photo-gallery-map{
+                display: flex;
+                //.mapboxgl-canvas{
+                //    height: 100% !important;
+                //    width: 100% !important;
+                //}
+            }
+        }
+    }
+    &.photo_gallery_sidebar{
+        flex-direction: row;
+        .photo-gallery-card-view{
+            flex: 0 0 270px;
+            .photo-gallery-card-view-container{
+                height: calc(100vh - (60px + 65px + 40px));
+                padding-bottom: 0;
+                padding-right: 0;
+                .photo-gallery-cards{
+                    height: 100%;
+                    overflow-x: hidden;
+                    overflow-y: auto;
+                }
+                .pb-pagination{
+                    display: none;
+                }
+            }
+        }
+        .photo-gallery-map-view{
+            flex: 0 0 calc(100% - 270px);
+        }
+    }
+}
+.site-content{
+    &.dark-content{
+        .photo-gallery-filter{
+            background-color: #1F2937;
+            .photo-gallery-filter-container{
+                .photo-gallery-filter-heading{
+                    h1{
+                        color: white;
+                    }
+                }
+                .photo-gallery-filter-actions{
+                    .photo-gallery-filter-update-dropdown{
+                        .photo-gallery-filter-update-dropdown-menu{
+                            background-color: #1F2937;
+                            border-color: #374151;
+                            &:before{
+                                background-color: #1F2937;
+                                border-color: #374151;
+                            }
+                            button{
+                                color: white;
+                                &:not(:last-of-type){
+                                    border-color: #374151;
+                                }
+                            }
+                        }
+                    }
+                    .photo-gallery-filter-dropdown{
+                        .photo-gallery-filter-dropdown-toggle{
+                            background-color: transparent;
+                            border-color: white;
+                            color: white;
+                            span{
+                                svg{
+                                    path{
+                                        fill: white;
+                                    }
+                                }
+                            }
+                        }
+                        .photo-gallery-filter-dropdown-menu{
+                            background-color: #1F2937;
+                            border-color: #374151;
+                            &:before{
+                                background-color: #1F2937;
+                                border-color: #374151;
+                            }
+                            button{
+                                color: white;
+                                &.delete-item{
+                                    color: #DC2626;
+                                }
+                                &:not(:last-of-type){
+                                    border-color: #374151;
+                                }
+                            }
+                        }
+                    }
+                }
+                .photo-gallery-filter-mobile-toggle{
+                    background-color: transparent;
+                    border-color: white;
+                    color: white;
+                    span{
+                        svg{
+                            path{
+                                fill: white;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        .photo_gallery_page{
+            .photo-gallery-card-view{
+                .photo-gallery-card-view-container{
+                    .pb-pagination{
+                        .pb-pagination-container{
+                            .pb-pagination-item{
+                                &.more-items{
+                                    svg{
+                                        path{
+                                            fill: white;
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        .photo-card-item-popups{
+            .photo-card-item-popups-container{
+                background-color: #111827;
+                border: 1px solid #374151;
+                .photo-card-item-popups-header{
+                    border-bottom: 1px solid #374151;
+                    .photo-card-item-popups-header-title{
+                        color: white;
+                        svg{
+                            path{
+                                fill: white;
+                            }
+                        }
+                    }
+                    button{
+                        svg{
+                            path{
+                                fill: white;
+                            }
+                        }
+                    }
+                }
+                .photo-card-item-popups-body{
+                    .photo-card-item-popups-actions{
+                        button{
+                            background-color: transparent;
+                            border: 1px solid white;
+                            svg{
+                                path{
+                                    fill: white;
+                                }
+                            }
+                        }
+                    }
+                    .photo-card-item-popups-image{
+                        background-color: #1F2937;
+                    }
+                    .photo-card-item-popups-details{
+                        .photo-card-item-popups-details-table{
+                            border: 1px solid #374151;
+                            .photo-card-item-popups-details-table-row{
+                                &:not(:last-of-type){
+                                    border-bottom: 1px solid #374151;
+                                }
+                                .photo-card-item-popups-details-table-item{
+                                    color: #9CA3AF;
+                                    &:not(:last-of-type){
+                                        border-right: 1px solid #374151;
+                                    }
+                                    &:first-of-type{
+                                        color: white;
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/resources/views/app.blade.php b/resources/views/app.blade.php
index 212351c9..3b4b0631 100644
--- a/resources/views/app.blade.php
+++ b/resources/views/app.blade.php
@@ -14,7 +14,7 @@
         <!-- Scripts -->
         @routes
         @viteReactRefresh
-        @vite(['resources/js/app.tsx', "resources/js/Pages/{$page['component']}.tsx"])
+        @vite(['resources/js/app.tsx', "resources/js/Pages/{$page['component']}.tsx",'resources/scss/app.scss'])
         @inertiaHead
     </head>
     <body class="font-sans antialiased">
diff --git a/vite.config.js b/vite.config.js
index e36646e5..359e40be 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -5,7 +5,7 @@ import react from '@vitejs/plugin-react';
 export default defineConfig({
     plugins: [
         laravel({
-            input: 'resources/js/app.tsx',
+            input : ["resources/scss/app.scss", 'resources/js/app.tsx'],
             refresh: true,
         }),
         react(),