diff --git a/cypress/e2e/events/events.cy.ts b/cypress/e2e/events/events.cy.ts
index 46e8baf..1b0f756 100644
--- a/cypress/e2e/events/events.cy.ts
+++ b/cypress/e2e/events/events.cy.ts
@@ -2,6 +2,6 @@ describe('Event Page', () => {
     it('displays the correct main title', () => {
         cy.visit('localhost:5173/events');
 
-        cy.get('h1').should('contain', 'Events');
+        cy.contains('my events');
     });
 });
diff --git a/cypress/e2e/organizations/organizations.cy.ts b/cypress/e2e/organizations/organizations.cy.ts
index 6597df7..61e4f53 100644
--- a/cypress/e2e/organizations/organizations.cy.ts
+++ b/cypress/e2e/organizations/organizations.cy.ts
@@ -2,6 +2,6 @@ describe('Organizations Page', () => {
     it('displays the correct main title', () => {
         cy.visit('localhost:5173/organizations');
 
-        cy.get('h1').should('contain', 'Organizations');
+        cy.contains('my orgs');
     });
 });
diff --git a/src/components/Carousel.tsx b/src/components/Carousel.tsx
new file mode 100644
index 0000000..1b02341
--- /dev/null
+++ b/src/components/Carousel.tsx
@@ -0,0 +1,30 @@
+import '../css/carousel.css';
+import Organization from './Organization.tsx';
+
+type CarouselProps = {
+    type: string;
+};
+
+export default function Carousel({ type }: CarouselProps) {
+    return (
+        <>
+            <div>
+                <h2 className="carousel-title">{type}</h2>
+                <div className="carousel">
+                    <Organization
+                        title="Math Club"
+                        desc="The RPI Math Faculty approved and Union affiliated math club!"
+                    />
+                    <Organization
+                        title="Math Club"
+                        desc="The RPI Math Faculty approved and Union affiliated math club!"
+                    />
+                    <Organization
+                        title="Math Club"
+                        desc="The RPI Math Faculty approved and Union affiliated math club!"
+                    />
+                </div>
+            </div>
+        </>
+    );
+}
diff --git a/src/components/Event.tsx b/src/components/Event.tsx
new file mode 100644
index 0000000..32f538c
--- /dev/null
+++ b/src/components/Event.tsx
@@ -0,0 +1,3 @@
+export default function Event() {
+    return <div className="org"></div>;
+}
diff --git a/src/components/Organization.tsx b/src/components/Organization.tsx
new file mode 100644
index 0000000..2b213b7
--- /dev/null
+++ b/src/components/Organization.tsx
@@ -0,0 +1,22 @@
+import '../css/organizations.css';
+
+type OrganizationProps = {
+    title: string;
+    desc: string;
+};
+
+export default function Organization({ title, desc }: OrganizationProps) {
+    return (
+        <div className="org">
+            <div className="org-metadata">
+                <div className="image-placeholder"></div>
+                <span className="org-title">{title}</span>
+                <span>{desc}</span>
+            </div>
+            <div className="org-btns">
+                <button className="events-btn">Events</button>
+                <button className="manage-btn">Manage</button>
+            </div>
+        </div>
+    );
+}
diff --git a/src/components/navbar/Navbar.tsx b/src/components/navbar/Navbar.tsx
index 1a28a92..3e3f8bd 100644
--- a/src/components/navbar/Navbar.tsx
+++ b/src/components/navbar/Navbar.tsx
@@ -52,9 +52,9 @@ export default function Navbar() {
                     width: `${indicator.width}px`,
                 }}
             />
-            <NavbarLink label="profile" nav="/" />
-            <NavbarLink label="home" nav="/events" />
-            <NavbarLink label="events" nav="/insights" />
+            <NavbarLink label="profile" nav="/profile" />
+            <NavbarLink label="home" nav="/" />
+            <NavbarLink label="events" nav="/events" />
             <NavbarLink label="orgs" nav="/organizations" />
             <NavbarLink label="test" nav="/testing" />
         </div>
diff --git a/src/css/app-layout.css b/src/css/app-layout.css
index 2fc949e..9b489f3 100644
--- a/src/css/app-layout.css
+++ b/src/css/app-layout.css
@@ -8,5 +8,5 @@
 
 .app-content {
     padding: 3rem;
-    width: 100%;
+    width: 75%;
 }
diff --git a/src/css/carousel.css b/src/css/carousel.css
new file mode 100644
index 0000000..9cb6043
--- /dev/null
+++ b/src/css/carousel.css
@@ -0,0 +1,24 @@
+.carousel-page-container {
+    display: flex;
+    flex-direction: column;
+    gap: 4rem;
+}
+
+.carousel {
+    width: 100%;
+    background: var(--carousel-bg);
+    height: 18rem;
+    border-radius: 2rem;
+    padding: 1rem;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 2rem;
+}
+
+.carousel-title {
+    margin: 0;
+    font-size: 1rem;
+    color: var(--standard-bw-text);
+    font-weight: 600;
+}
diff --git a/src/css/colors.css b/src/css/colors.css
index 66f68f7..f3f0422 100644
--- a/src/css/colors.css
+++ b/src/css/colors.css
@@ -8,8 +8,8 @@ abstracted to a single file.
 HOW TO USE: All variables in the CAPY COLOR SUITE should be treated 
 as constants. These constants should NOT be found in other CSS files. 
 Instead, create variables in the COLOR VARIABLES section, and use those. 
-COLOR VARIABLES should be duplicated and properly adjusted in the dark 
-mode section as well.
+COLOR VARIABLES should be duplicated and adjusted in the dark mode 
+section as well.
 
 */
 
@@ -18,8 +18,6 @@ mode section as well.
     --site-transition: 0.25s;
     --site-font: 'Asap', sans-serif;
 
-    /* ========================================== */
-
     /* CAPY COLOR SUITE ========================= */
 
     /* All colors used on the site are found here */
@@ -32,7 +30,7 @@ mode section as well.
     --highlight: #f4f8f6;
     --off-black: #20201f;
 
-    /* ========================================== */
+    /* MISC DEV VARIABLES ======================= */
 
     /* COLOR VARIABLES ========================== */
 
@@ -41,11 +39,22 @@ mode section as well.
     --standard-white: var(--off-white);
     --standard-black: var(--off-black);
     --standard-text: var(--primary);
+    --standard-bw-text: var(--off-black);
+
+    /* Navbar */
+    --nav-bg: #e6e6e6;
+    --navlink-hover-bg: rgb(0 0 0 / 5%);
+    --navlink-color: #444;
+    --nav-indicator-bg: #d0d0d0;
 
-    /* Sidebar */
-    --sidebar-bg: var(--highlight);
-    --sidebar-link-hover-bg: var(--off-white);
-    --sidebar-active-link-bg: var(--primary-light);
+    /* Carousel */
+    --carousel-bg: #f2dede;
+
+    /* Organizations */
+    --org-bg: #d9d9d9;
+    --img-placeholder-bg: #b3807d;
+    --general-org-btn-bg: #b3807d;
+    --manage-org-btn-bg: #97bdc6;
 }
 
 [data-theme='dark'] {
@@ -56,9 +65,9 @@ mode section as well.
     --standard-white: var(--off-black);
     --standard-black: var(--off-white);
     --standard-text: var(--off-white);
+    --standard-bw-text: var(--off-white);
+
+    /* Navbar */
 
-    /* Sidebar */
-    --sidebar-bg: var(--primary-extra-dark);
-    --sidebar-link-hover-bg: var(--accent);
-    --sidebar-active-link-bg: var(--accent);
+    /* Carousel */
 }
diff --git a/src/css/navbar.css b/src/css/navbar.css
index db244f5..3f70d1c 100644
--- a/src/css/navbar.css
+++ b/src/css/navbar.css
@@ -2,10 +2,10 @@
     position: relative;
     display: inline-flex;
     gap: 0.5rem;
-    background: #e6e6e6;
+    background: var(--nav-bg);
     border-radius: 999px;
     width: fit-content;
-    margin: 40px auto 0;
+    margin: 6rem auto 0;
 }
 
 .navlink {
@@ -14,15 +14,15 @@
     padding: 0.5rem 1rem;
     border-radius: 999px;
     text-decoration: none;
-    color: #444;
+    color: var(--navlink-color);
 }
 
 .navlink:hover {
-    background: rgb(0 0 0 / 5%);
+    background: var(--navlink-hover-bg);
 }
 
 .active-navlink {
-    color: #111;
+    color: var(--standard-bw-text);
 }
 
 .nav-indicator {
@@ -31,7 +31,7 @@
     left: 0;
     height: 100%;
     border-radius: 999px;
-    background: #d0d0d0;
+    background: var(--nav-indicator-bg);
     transition:
         transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
         width 0.28s cubic-bezier(0.4, 0, 0.2, 1);
diff --git a/src/css/organizations.css b/src/css/organizations.css
new file mode 100644
index 0000000..c9b5613
--- /dev/null
+++ b/src/css/organizations.css
@@ -0,0 +1,61 @@
+.org {
+    height: 16rem;
+    width: 20rem;
+    border-radius: 2rem;
+    background: var(--org-bg);
+    padding: 1.25rem;
+    color: var(--standard-bw-text);
+}
+
+.org-metadata {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+.org-title {
+    font-size: 1.1rem;
+}
+
+.image-placeholder {
+    width: 3rem;
+    height: 3rem;
+    border-radius: 1rem;
+    background: var(--img-placeholder-bg);
+}
+
+.org-btns {
+    margin-top: 2rem;
+    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 d12f79d..f9cc039 100644
--- a/src/pages/Events.tsx
+++ b/src/pages/Events.tsx
@@ -1,8 +1,11 @@
+import Carousel from '../components/Carousel.tsx';
+
 export default function Events() {
     return (
         <>
-            <div>
-                <h1>Events</h1>
+            <div className={`carousel-page-container`}>
+                <Carousel type="my events" />
+                <Carousel type="recommended" />
             </div>
         </>
     );
diff --git a/src/pages/Organizations.tsx b/src/pages/Organizations.tsx
index 229f108..b2cf37a 100644
--- a/src/pages/Organizations.tsx
+++ b/src/pages/Organizations.tsx
@@ -1,8 +1,11 @@
+import Carousel from '../components/Carousel.tsx';
+
 export default function Organizations() {
     return (
         <>
-            <div>
-                <h1>Organizations</h1>
+            <div className={`carousel-page-container`}>
+                <Carousel type="my orgs" />
+                <Carousel type="recommended" />
             </div>
         </>
     );