diff --git a/web/src/App.tsx b/web/src/App.tsx
index f1f01501..e3a6befe 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -1,6 +1,6 @@
 import { Outlet } from "react-router-dom";
 import Footer from "./components/Footer";
-import Home from './screens/HomeScreen';
+import Home from "./screens/HomeScreen";
 
 const App = () => {
   return (
diff --git a/web/src/components/SomePhotos.tsx b/web/src/components/SomePhotos.tsx
index 1492377f..5b2a1782 100644
--- a/web/src/components/SomePhotos.tsx
+++ b/web/src/components/SomePhotos.tsx
@@ -6,119 +6,118 @@ import { Mapper } from "../utils/Mapper";
 import { useState, useEffect } from "react";
 
 function SomePhotos() {
-	const {
-		loading: photosLoading,
-		data: photosData,
-		error: photosError,
-	} = useQuery(GET_SOME_PHOTOS);
+  const {
+    loading: photosLoading,
+    data: photosData,
+    error: photosError,
+  } = useQuery(GET_SOME_PHOTOS);
 
-	const [photos, setPhotos] = useState<SomePhoto[]>([]);
-	const [loading, setLoading] = useState(true);
-	const [noPhotos, setNoPhotos] = useState(false);
+  const [photos, setPhotos] = useState<SomePhoto[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [noPhotos, setNoPhotos] = useState(false);
 
-	useEffect(() => {
-		if (photosData) {
-			try {
-				const mappedPhotos = Mapper.mapToSomePhotos(photosData);
-				setPhotos(mappedPhotos);
-				setLoading(false);
-			} catch (error) {
-				setNoPhotos(true);
-			}
-		}
-	}, [photosData]);
+  useEffect(() => {
+    if (photosData) {
+      try {
+        const mappedPhotos = Mapper.mapToSomePhotos(photosData);
+        setPhotos(mappedPhotos);
+        setLoading(false);
+      } catch (error) {
+        setNoPhotos(true);
+      }
+    }
+  }, [photosData]);
 
-	useEffect(() => {
-		if (!photosLoading) {
-			setLoading(false);
-		}
-	}, [photosLoading]);
+  useEffect(() => {
+    if (!photosLoading) {
+      setLoading(false);
+    }
+  }, [photosLoading]);
 
-	if (photosError) {
-		return <div>CMS Offline</div>;
-	}
+  if (photosError) {
+    return <div>CMS Offline</div>;
+  }
 
-	return (
-		<>
-			{loading ? (
-				<LoadingSpinner />
-			) : (
-				<div className=" bg-white">
-					<h1 className="mx-3 py-12 text-center text-5xl font-bold text-white">
-						Our Upcoming Events!
-					</h1>
-					<div className="mt-20 flex flex-col justify-center w-full">
-						<div className="flex flex-col lg:flex-row justify-center">
-							{noPhotos ? (
-								<div>There are no photos to display</div>
-							) : (
-								<div className="relative flex lg:flex-row flex-col items-center space-x-4">
-							
-									<div className="bg-white p-4 rounded-lg shadow-lg transform -rotate-3 hover:rotate-0 transition-transform z-10">
-										<img
-											src={`${photos[0].image}`}
-											alt="event pic"
-											className="w-48 h-60 object-cover mb-4 border-b-2 border-gray-200"
-										/>
-										<p className="text-center font-sans text-black">
-                    {`${photos[0].title}`}
-										</p>
-									</div>
-						
-									<div className="bg-white p-4 rounded-lg shadow-lg transform rotate-3 hover:rotate-0 transition-transform z-20">
-										<img
-											src={`${photos[0].image}`}
-											alt="event pic"
-											className="w-48 h-60 object-cover mb-4 border-b-2 border-gray-200"
-										/>
-										<p className="text-center font-sans text-black">
-                    {`${photos[0].title}`}
-										</p>
-									</div>
-								
-									<div className="bg-white p-4 rounded-lg shadow-lg transform -rotate-3 hover:rotate-0 transition-transform z-30">
-										<img
-											src={`${photos[0].image}`}
-											alt="event pic"
-											className="w-48 h-60 object-cover mb-4 border-b-2 border-gray-200"
-										/>
-										<p className="text-center font-sans text-black">
+  return (
+    <>
+      {loading ? (
+        <LoadingSpinner />
+      ) : (
+        <div className="bg-white">
+          <h1 className="mx-3 py-12 text-center text-5xl font-bold text-white">
+            Our Upcoming Events!
+          </h1>
+          <div className="mt-20 flex w-full flex-col justify-center">
+            <div className="flex flex-col justify-center lg:flex-row">
+              {noPhotos ? (
+                <div>There are no photos to display</div>
+              ) : (
+                <div className="relative flex flex-col items-center space-x-4 lg:flex-row">
+                  <div className="z-10 -rotate-3 transform rounded-lg bg-white p-4 shadow-lg transition-transform hover:rotate-0">
+                    <img
+                      src={`${photos[0].image}`}
+                      alt="event pic"
+                      className="mb-4 h-60 w-48 border-b-2 border-gray-200 object-cover"
+                    />
+                    <p className="text-center font-sans text-black">
                       {`${photos[0].title}`}
-										</p>
-									</div>
-			
-									<div className="bg-white p-4 rounded-lg shadow-lg transform rotate-3 hover:rotate-0 transition-transform z-40">
-										<img
-											src={`${photos[0].image}`}
-											alt="event pic"
-											className="w-48 h-60 object-cover mb-4 border-b-2 border-gray-200"
-										/>
-										<p className="text-center font-sans text-black">
-                    {`${photos[0].title}`}
-										</p>
-									</div>
-								</div>
-							)}
-						</div>
-					</div>
-					<div className="bg-white py-12 flex flex-col items-center">
-						<h2 className="text-4xl text-black font-bold text-center mb-8">
-							Some Photos!
-						</h2>
+                    </p>
+                  </div>
 
-						<div className="text-center mt-8">
-							<button
-								type="button"
-								className="bg-orange-500 text-white py-2 px-6 rounded-full text-xl hover:bg-orange-600 transition-colors"
-							>
-								Photo Gallery!
-							</button>
-						</div>
-					</div>
-				</div>
-			)}
-		</>
-	);
+                  <div className="z-20 rotate-3 transform rounded-lg bg-white p-4 shadow-lg transition-transform hover:rotate-0">
+                    <img
+                      src={`${photos[0].image}`}
+                      alt="event pic"
+                      className="mb-4 h-60 w-48 border-b-2 border-gray-200 object-cover"
+                    />
+                    <p className="text-center font-sans text-black">
+                      {`${photos[0].title}`}
+                    </p>
+                  </div>
+
+                  <div className="z-30 -rotate-3 transform rounded-lg bg-white p-4 shadow-lg transition-transform hover:rotate-0">
+                    <img
+                      src={`${photos[0].image}`}
+                      alt="event pic"
+                      className="mb-4 h-60 w-48 border-b-2 border-gray-200 object-cover"
+                    />
+                    <p className="text-center font-sans text-black">
+                      {`${photos[0].title}`}
+                    </p>
+                  </div>
+
+                  <div className="z-40 rotate-3 transform rounded-lg bg-white p-4 shadow-lg transition-transform hover:rotate-0">
+                    <img
+                      src={`${photos[0].image}`}
+                      alt="event pic"
+                      className="mb-4 h-60 w-48 border-b-2 border-gray-200 object-cover"
+                    />
+                    <p className="text-center font-sans text-black">
+                      {`${photos[0].title}`}
+                    </p>
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+          <div className="flex flex-col items-center bg-white py-12">
+            <h2 className="mb-8 text-center text-4xl font-bold text-black">
+              Some Photos!
+            </h2>
+
+            <div className="mt-8 text-center">
+              <button
+                type="button"
+                className="rounded-full bg-orange-500 px-6 py-2 text-xl text-white transition-colors hover:bg-orange-600"
+              >
+                Photo Gallery!
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
 }
 
 export default SomePhotos;
diff --git a/web/src/main.tsx b/web/src/main.tsx
index d15648ae..c75d3039 100644
--- a/web/src/main.tsx
+++ b/web/src/main.tsx
@@ -39,7 +39,7 @@ const router = createBrowserRouter(
       <Route path="/about-us" element={<AboutUsScreen />} />
       <Route path="/events" element={<EventScreen />} />
       <Route path="/photos" element={<PhotosScreen />} />
-      <Route path="/about-us" element={<AboutUsSCreen/>}/>
+      <Route path="/about-us" element={<AboutUsSCreen />} />
     </Route>
   )
 );