diff --git a/Dockerfile b/Dockerfile
index d5c7802..b793d84 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -1,4 +1,4 @@
-FROM node:25-alpine AS build
+FROM node:22-alpine AS build
 WORKDIR /app
 COPY package*.json ./
 RUN npm ci
diff --git a/cypress/e2e/events/events.cy.ts b/cypress/e2e/events/events.cy.ts
index 1b0f756..b44ce9d 100644
--- a/cypress/e2e/events/events.cy.ts
+++ b/cypress/e2e/events/events.cy.ts
@@ -1,7 +1,7 @@
 describe('Event Page', () => {
     it('displays the correct main title', () => {
-        cy.visit('localhost:5173/events');
+        cy.visit('localhost:5173/app/events');
 
-        cy.contains('my events');
+        cy.contains('events');
     });
 });
diff --git a/cypress/e2e/home/home.cy.ts b/cypress/e2e/home/home.cy.ts
index 22426e3..52ef016 100644
--- a/cypress/e2e/home/home.cy.ts
+++ b/cypress/e2e/home/home.cy.ts
@@ -1,6 +1,6 @@
 describe('Home Page', () => {
     it('displays the correct main title', () => {
-        cy.visit('localhost:5173');
+        cy.visit('localhost:5173/app/');
 
         cy.contains('UserId:');
     });
diff --git a/cypress/e2e/organizations/organizations.cy.ts b/cypress/e2e/organizations/organizations.cy.ts
index 61e4f53..9e4ed0c 100644
--- a/cypress/e2e/organizations/organizations.cy.ts
+++ b/cypress/e2e/organizations/organizations.cy.ts
@@ -1,7 +1,7 @@
 describe('Organizations Page', () => {
     it('displays the correct main title', () => {
-        cy.visit('localhost:5173/organizations');
+        cy.visit('localhost:5173/app/organizations');
 
-        cy.contains('my orgs');
+        cy.contains('orgs');
     });
 });
diff --git a/cypress/e2e/profile/profile.cy.ts b/cypress/e2e/profile/profile.cy.ts
index 7f34955..75bdcba 100644
--- a/cypress/e2e/profile/profile.cy.ts
+++ b/cypress/e2e/profile/profile.cy.ts
@@ -1,6 +1,6 @@
 describe('Profile Page', () => {
     it('displays the correct main title', () => {
-        cy.visit('localhost:5173profile');
+        cy.visit('localhost:5173/app/profile');
 
         cy.get('h1').should('contain', 'Profile');
     });
diff --git a/nginx.conf b/nginx.conf
index 7a15d41..460e67a 100644
--- a/nginx.conf
+++ b/nginx.conf
@@ -1,9 +1,14 @@
 server {
   listen 80;
 
-  location / {
-    root   /usr/share/nginx/html;
-    index  index.html;
-    try_files $uri /index.html;
+  root /usr/share/nginx/html;
+
+  location = /app {
+    return 301 /app/;
+  }
+
+  location /app/ {
+    rewrite ^/app/(.*)$ /$1 break;
+    try_files $uri $uri/ /index.html;
   }
 }
\ No newline at end of file
diff --git a/src/App.tsx b/src/App.tsx
index 9bbc7ad..6938df3 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -8,12 +8,12 @@ import Testing from './pages/Testing.tsx'; // temp page
 import Profile from './pages/Profile.tsx';
 import { AuthProvider } from './contexts/AuthContext.tsx';
 
-function App() {
+export default function App() {
     return (
         <>
             <AuthProvider>
                 <ThemeProvider>
-                    <BrowserRouter>
+                    <BrowserRouter basename="/app">
                         <Routes>
                             <Route element={<AppLayout />}>
                                 <Route path="/profile" element={<Profile />} />
@@ -29,5 +29,3 @@ function App() {
         </>
     );
 }
-
-export default App;
diff --git a/src/components/Carousel.tsx b/src/components/Carousel.tsx
index 22020f6..f978603 100644
--- a/src/components/Carousel.tsx
+++ b/src/components/Carousel.tsx
@@ -12,7 +12,6 @@ type CarouselProps =
     | { type: 'organization'; title: string; data: Organization[] };
 
 export default function Carousel({ type, title, data }: CarouselProps) {
-    console.log(data);
     const [active, setActive] = useState(0);
 
     const moveLeft = () => {
@@ -40,7 +39,7 @@ export default function Carousel({ type, title, data }: CarouselProps) {
                               return (
                                   <EventPanel
                                       event={event}
-                                      className={`carousel-item offset-${offset}`}
+                                      className={`carousel-item ${type}-offset-${offset}`}
                                       onClick={() => setActive(index)}
                                   />
                               );
@@ -51,7 +50,7 @@ export default function Carousel({ type, title, data }: CarouselProps) {
                               return (
                                   <OrganizationPanel
                                       organization={org}
-                                      className={`carousel-item offset-${offset}`}
+                                      className={`carousel-item ${type}-offset-${offset}`}
                                       onClick={() => setActive(index)}
                                   />
                               );
diff --git a/src/components/EventCarouselPanel.tsx b/src/components/EventCarouselPanel.tsx
index f8e73ec..f124312 100644
--- a/src/components/EventCarouselPanel.tsx
+++ b/src/components/EventCarouselPanel.tsx
@@ -1,4 +1,4 @@
-import '../css/organizations.css';
+import '../css/events.css';
 import '../css/carousel.css';
 
 import type { Event } from '../types/Event.ts';
@@ -11,16 +11,11 @@ type EventCarouselPanelProps = {
 
 export default function EventCarouselPanel({ event, className, onClick }: EventCarouselPanelProps) {
     return (
-        <div className={`org ${className}`} onClick={onClick}>
-            <div className="org-metadata">
-                <div className="image-placeholder"></div>
-                <span className="org-title">{event.title}</span>
+        <div className={`event ${className}`} onClick={onClick}>
+            <div className="event-metadata">
+                <span className="event-title">{event.title}</span>
                 <span>{event.description}</span>
             </div>
-            <div className="org-btns">
-                <button className="events-btn">Events</button>
-                <button className="manage-btn">Manage</button>
-            </div>
         </div>
     );
 }
diff --git a/src/css/carousel.css b/src/css/carousel.css
index 57d33bb..a79a336 100644
--- a/src/css/carousel.css
+++ b/src/css/carousel.css
@@ -49,25 +49,53 @@
     will-change: transform;
 }
 
+/* arrow buttons */
+.carousel-arrow {
+    z-index: 10;
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: 50%;
+    border: none;
+    background: transparent;
+    cursor: pointer;
+    font-size: 2.5rem;
+    color: black;
+    transition: var(--site-transition);
+}
+
+.carousel-arrow:hover {
+    scale: 1.1;
+}
+
+/* left arrow */
+.carousel-arrow.left {
+    margin-left: 0.5rem;
+}
+
+/* right arrow */
+.carousel-arrow.right {
+    margin-right: 0.5rem;
+}
+
 /* ===================================================== */
 
 /* OFFSETS                                               */
 
 /* ===================================================== */
 
-.offset-2 {
+.organization-offset-2 {
     transform: translate(90%, -50%) scale(0.75);
     opacity: 0.8;
     z-index: 1;
 }
 
-.offset-1 {
+.organization-offset-1 {
     transform: translate(50%, -50%) scale(0.9);
     opacity: 1;
     z-index: 2;
 }
 
-.offset-0 {
+.organization-offset-0 {
     transform: translate(-50%, -50%) scale(1);
     opacity: 1;
     z-index: 3;
@@ -75,51 +103,98 @@
 }
 
 /* stylelint-disable-next-line selector-class-pattern */
-.offset--1 {
+.organization-offset--1 {
     transform: translate(-150%, -50%) scale(0.9);
     opacity: 1;
     z-index: 2;
 }
 
 /* stylelint-disable-next-line selector-class-pattern */
-.offset--2 {
+.organization-offset--2 {
     transform: translate(-190%, -50%) scale(0.75);
     opacity: 0.8;
     z-index: 1;
 }
 
 /* hide far cards */
-[class*='offset-3'],
-[class*='offset--3'] {
+[class*='organization-offset-3'],
+[class*='organization-offset--3'] {
     opacity: 0;
     pointer-events: none;
     z-index: 0;
 }
 
-/* arrow buttons */
-.carousel-arrow {
-    z-index: 10;
-    width: 2.5rem;
-    height: 2.5rem;
-    border-radius: 50%;
-    border: none;
-    background: transparent;
-    cursor: pointer;
-    font-size: 2.5rem;
-    color: black;
-    transition: var(--site-transition);
+.event-offset-4 {
+    transform: translate(160%, -50%) scale(0.6);
+    filter: saturate(0.2);
+    opacity: 0.8;
+    z-index: 1;
 }
 
-.carousel-arrow:hover {
-    scale: 1.1;
+.event-offset-3 {
+    transform: translate(140%, -50%) scale(0.76);
+    filter: saturate(0.4);
+    opacity: 1;
+    z-index: 2;
 }
 
-/* left arrow */
-.carousel-arrow.left {
-    margin-left: 0.5rem;
+.event-offset-2 {
+    transform: translate(105%, -50%) scale(0.88);
+    filter: saturate(0.6);
+    opacity: 1;
+    z-index: 3;
 }
 
-/* right arrow */
-.carousel-arrow.right {
-    margin-right: 0.5rem;
+.event-offset-1 {
+    transform: translate(45%, -50%) scale(0.96);
+    filter: saturate(0.8);
+    opacity: 1;
+    z-index: 4;
+}
+
+.event-offset-0 {
+    transform: translate(-50%, -50%) scale(1);
+    opacity: 1;
+    z-index: 5;
+    box-shadow: 0 0 0.75rem gray;
+}
+
+/* stylelint-disable-next-line selector-class-pattern */
+.event-offset--1 {
+    transform: translate(-145%, -50%) scale(0.96);
+    filter: saturate(0.8);
+    opacity: 1;
+    z-index: 4;
+}
+
+/* stylelint-disable-next-line selector-class-pattern */
+.event-offset--2 {
+    transform: translate(-205%, -50%) scale(0.88);
+    filter: saturate(0.6);
+    opacity: 1;
+    z-index: 3;
+}
+
+/* stylelint-disable-next-line selector-class-pattern */
+.event-offset--3 {
+    transform: translate(-240%, -50%) scale(0.76);
+    filter: saturate(0.4);
+    opacity: 1;
+    z-index: 2;
+}
+
+/* stylelint-disable-next-line selector-class-pattern */
+.event-offset--4 {
+    transform: translate(-260%, -50%) scale(0.6);
+    filter: saturate(0.2);
+    opacity: 0.8;
+    z-index: 1;
+}
+
+/* hide far cards */
+[class*='event-offset-5'],
+[class*='eventoffset--5'] {
+    opacity: 0;
+    pointer-events: none;
+    z-index: 0;
 }
diff --git a/src/css/events.css b/src/css/events.css
new file mode 100644
index 0000000..3144417
--- /dev/null
+++ b/src/css/events.css
@@ -0,0 +1,57 @@
+.event {
+    height: 16rem;
+    width: 14rem;
+    border-radius: 2rem;
+    background: var(--org-bg);
+    padding: 1.25rem;
+    color: var(--standard-bw-text);
+    cursor: pointer;
+    display: flex;
+    flex-direction: column;
+}
+
+.event-metadata {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+.event-title {
+    font-size: 1.1rem;
+}
+
+.event-btns {
+    margin: auto 0 0.5rem;
+    display: flex;
+    flex-direction: row;
+}
+
+.events-btn,
+.join-btn,
+.manage-btn,
+.home-btn {
+    font-size: 1rem;
+    padding: 0.25rem 2rem;
+    border-radius: 2rem;
+    border: none;
+    cursor: pointer;
+    color: var(--standard-bw-text);
+}
+
+.events-btn {
+    background: var(--general-org-btn-bg);
+}
+
+.join-btn {
+    margin-left: auto;
+    background: var(--general-org-btn-bg);
+}
+
+.manage-btn {
+    margin-left: auto;
+    background: var(--manage-org-btn-bg);
+}
+
+.home-btn {
+    background: var(--general-org-btn-bg);
+}
diff --git a/src/pages/Events.tsx b/src/pages/Events.tsx
index 479e047..33ad043 100644
--- a/src/pages/Events.tsx
+++ b/src/pages/Events.tsx
@@ -6,7 +6,6 @@ export default function Events() {
     // 1. Fetch my_events and rec_events
     // 2. Parse date/time types from string to date/time
     // 3. Make it into variables below:
-    // 4. Propogate to carousel with type
 
     /* Current API response:
         {
@@ -18,7 +17,7 @@ export default function Events() {
             "location": "string"
         }
     
-    Need:
+    Still Need:
         - description
         - organization
     */
@@ -75,6 +74,56 @@ export default function Events() {
             organization: 'AGT',
             title: 'America Got Talent',
         },
+        {
+            date_created: new Date(),
+            date_modified: new Date(),
+            description: 'This is event 6 This is event 6 This is event 6 This is event 6',
+            eid: '6',
+            event_time: new Date(),
+            location: 'Sage Dining Hall',
+            organization: 'CCPD',
+            title: 'Networking Session',
+        },
+        {
+            date_created: new Date(),
+            date_modified: new Date(),
+            description: 'This is event 7 This is event 7 This is event 7 This is event 7',
+            eid: '7',
+            event_time: new Date(),
+            location: 'EMPAC',
+            organization: 'AGT',
+            title: 'America Got Talent',
+        },
+        {
+            date_created: new Date(),
+            date_modified: new Date(),
+            description: 'This is event 8 This is event 8 This is event 8 This is event 8',
+            eid: '8',
+            event_time: new Date(),
+            location: 'Carnegie',
+            organization: 'Math Club',
+            title: 'Math Competition',
+        },
+        {
+            date_created: new Date(),
+            date_modified: new Date(),
+            description: 'This is event 9 This is event 9 This is event 9 This is event 9',
+            eid: '9',
+            event_time: new Date(),
+            location: 'MRC',
+            organization: 'Materials Research',
+            title: 'Guest Speaker',
+        },
+        {
+            date_created: new Date(),
+            date_modified: new Date(),
+            description: 'This is event 10 This is event 10 This is event 10 This is event 10',
+            eid: '10',
+            event_time: new Date(),
+            location: 'DCC 308',
+            organization: 'CCPD',
+            title: 'Pitch Competition',
+        },
     ];
 
     return (
diff --git a/src/pages/Organizations.tsx b/src/pages/Organizations.tsx
index 371931a..1cb9c9f 100644
--- a/src/pages/Organizations.tsx
+++ b/src/pages/Organizations.tsx
@@ -13,7 +13,7 @@ export default function Organizations() {
             "location": "string"
         }
     
-    Need:
+    Still Need:
         - description
         - organization
     */
diff --git a/vite.config.ts b/vite.config.ts
index 7182207..687f6b7 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -4,6 +4,7 @@ import react from '@vitejs/plugin-react'
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [react()],
+  base: '/app/',
   server: {
     port: 5173
   }