diff --git a/assets/styles/meapcomponents.scss b/assets/styles/meapcomponents.scss
new file mode 100644
index 000000000..f87abc2ec
--- /dev/null
+++ b/assets/styles/meapcomponents.scss
@@ -0,0 +1,13 @@
+.meap {
+
+  // all rules inside an id selector will be more specific than rules with only class selectors
+  #main {
+    .category {
+      color: red; // make categories red on MEAP pages
+    }
+
+    .divider-way-finder>.dotted {
+      border-bottom: 2px solid red; //make solid red dividers instead of dotted on MEAP pages
+    }
+  }
+}
\ No newline at end of file
diff --git a/layouts/default.vue b/layouts/default.vue
index 65fb65fba..9c1f53dfb 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -20,6 +20,7 @@ const classes = computed(() => {
     'layout-default',
     { 'has-scrolled': globalStore.sTop },
     { 'has-scrolled-past-header': globalStore.sTop >= 150 },
+    'meap' // add a theme class for all components inside MEAP
   ]
 })
 
diff --git a/nuxt.config.ts b/nuxt.config.ts
index b0a6205e0..bd8f0ab7a 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -139,6 +139,7 @@ export default defineNuxtConfig({
     // 'ucla-library-design-tokens/scss/fonts.scss',
     'ucla-library-design-tokens/scss/app-global.scss',
     '~/assets/styles/global.scss',
+    '~/assets/styles/meapcomponents.scss',
 
     // use the following line when using pnpm link --global ucla-library-website-components-vue
     'ucla-library-website-components/dist/style.css',