diff --git a/src/components/CouncilCard.svelte b/src/components/CouncilCard.svelte
index de6b321..0959cf1 100644
--- a/src/components/CouncilCard.svelte
+++ b/src/components/CouncilCard.svelte
@@ -1,50 +1,49 @@
 <script>
-	/**
-	 * Schemas for Council Members:
-	 * {
-	 *   email,
-	 *   name,
-	 *   position,
-	 *   positionDescription,
-	 *   yearProgram,
-	 * 	 image // CDN URL from Sanity CMS
-	 * }
-	 */
-	let { name, position, email, positionDescription, yearProgram, image } = $props();
-	import placeholder from 'assets/placeholderAvatar.png';
+  let { onViewProfile, name, position, image } = $props();
+  import placeholder from 'assets/placeholderAvatar.png';
+	import Button from 'components/Button.svelte';
+
 </script>
 
 <style lang="postcss">
 	@reference '../app.css';
 
-	.card {
-		@apply flex items-center gap-4 bg-transparent rounded-2xl p-6 text-ecsess-800 border-transparent max-w-[450px] h-[250px];
-		background-image: linear-gradient(to bottom right, #E8FFD9, #97C583);
-	}
+  .card {
+    @apply flex items-center gap-4 bg-transparent p-6 rounded-lg text-ecsess-200 max-w-[400px];
+  }
 
-	.profile-img {
-		@apply w-32 h-32 shadow-md overflow-hidden rounded-lg;
-	}
+  .profile-img {
+    @apply size-[100px] rounded-full overflow-hidden; 
+  }
 
-	.profile-img :global(img) {
-		@apply w-full h-full object-cover;
-	}
+  .profile-img :global(img) {
+    @apply object-cover size-full;
+  }
 
+  .info {
+    @apply flex-1;
+  }
+
+  .name {
+    @apply text-xl font-bold;
+  }
+
+  .role {
+    @apply text-ecsess-200 mb-2;
+  }
 </style>
 
 <div class="card">
-	<!-- <img class="size-4/5" src={placeholder} alt="Placeholder"> -->
-	<!-- <Avatar src={placeholder} {name} /> -->
-	<div class="avatar-container justify-left">
-		<div class="profile-img justify-center">
-			<img src={image || placeholder} alt={name} />
-		</div>	
-	<span class="yearProgram text-sm justify-center"> {yearProgram} </span>
-	</div>
-	<div class="content">
-		<p class="pb-2 text-xl font-bold">{name} </p>
-		<p class="py-2 text-base">{position}</p>
-		<p class="pb-2 text-xs">{positionDescription}</p>
-		<a href="mailto:{email}" class="py-2 text-sm underline">{email}</a>
+	<div class="profile-img">
+		<img src={image || placeholder} alt={name} />
 	</div>
+  <div class="info">
+    <div class="name">{name}</div>
+    <div class="role">{position}</div>
+    <!-- <button class="button" onclick={onViewProfile}>View Profile</button> -->
+    <Button onclick={onViewProfile}>View Profile</Button>
+  </div>
 </div>
+
+
+
diff --git a/src/components/CouncilCardBase.svelte b/src/components/CouncilCardBase.svelte
deleted file mode 100644
index 0959cf1..0000000
--- a/src/components/CouncilCardBase.svelte
+++ /dev/null
@@ -1,49 +0,0 @@
-<script>
-  let { onViewProfile, name, position, image } = $props();
-  import placeholder from 'assets/placeholderAvatar.png';
-	import Button from 'components/Button.svelte';
-
-</script>
-
-<style lang="postcss">
-	@reference '../app.css';
-
-  .card {
-    @apply flex items-center gap-4 bg-transparent p-6 rounded-lg text-ecsess-200 max-w-[400px];
-  }
-
-  .profile-img {
-    @apply size-[100px] rounded-full overflow-hidden; 
-  }
-
-  .profile-img :global(img) {
-    @apply object-cover size-full;
-  }
-
-  .info {
-    @apply flex-1;
-  }
-
-  .name {
-    @apply text-xl font-bold;
-  }
-
-  .role {
-    @apply text-ecsess-200 mb-2;
-  }
-</style>
-
-<div class="card">
-	<div class="profile-img">
-		<img src={image || placeholder} alt={name} />
-	</div>
-  <div class="info">
-    <div class="name">{name}</div>
-    <div class="role">{position}</div>
-    <!-- <button class="button" onclick={onViewProfile}>View Profile</button> -->
-    <Button onclick={onViewProfile}>View Profile</Button>
-  </div>
-</div>
-
-
-
diff --git a/src/components/CouncilCardPopUp.svelte b/src/components/CouncilCardPopUp.svelte
new file mode 100644
index 0000000..27d39cd
--- /dev/null
+++ b/src/components/CouncilCardPopUp.svelte
@@ -0,0 +1,54 @@
+<script>
+	/**
+	 * Schemas for Council Members:
+	 * {
+	 *   email,
+	 *   name,
+	 *   position,
+	 *   positionDescription,
+	 *   yearProgram,
+	 * 	 image // CDN URL from Sanity CMS
+	 * }
+	 */
+	let { name, position, email, positionDescription, yearProgram, image } = $props();
+	import placeholder from 'assets/placeholderAvatar.png';
+</script>
+
+<style lang="postcss">
+	@reference '../app.css';
+
+	.card {
+		@apply flex items-center gap-4 bg-transparent rounded-2xl p-6 text-ecsess-800 border-transparent max-w-[450px] h-[250px];
+		background-image: linear-gradient(to bottom right, #E8FFD9, #97C583);
+	}
+
+	.profile-img {
+		@apply w-32 h-32 shadow-md overflow-hidden rounded-lg;
+	}
+
+	.profile-img :global(img) {
+		@apply w-full h-full object-cover;
+	}
+
+	.name {
+    @apply text-xl font-bold;
+  	}
+
+</style>
+
+<div class="card">
+	<!-- <img class="size-4/5" src={placeholder} alt="Placeholder"> -->
+	<!-- <Avatar src={placeholder} {name} /> -->
+	<div class="avatar-container justify-left">
+		<div class="profile-img justify-center">
+			<img src={image || placeholder} alt={name} />
+		</div>	
+	<span class="yearProgram text-sm justify-center"> {yearProgram} </span>
+	</div>
+	<div class="content">
+		<p class="name">{name} </p>
+		<p class="py-2 text-base">{position}</p>
+		<p class="pb-2 text-xs">{positionDescription}</p>
+		<a href="mailto:{email}" class="py-2 text-sm underline">{email}</a>
+	</div>
+</div>
diff --git a/src/routes/council/+page.svelte b/src/routes/council/+page.svelte
index 16224fc..069abec 100644
--- a/src/routes/council/+page.svelte
+++ b/src/routes/council/+page.svelte
@@ -1,8 +1,7 @@
 <script lang="ts">
-	import CouncilCard from 'components/CouncilCard.svelte';
+	import CouncilCardPopUp from 'components/CouncilCardPopUp.svelte';
 	import Section from 'components/Section.svelte';
-	import CardCouncilBase from 'components/CouncilCardBase.svelte';
-	import CouncilCardBase from 'components/CouncilCardBase.svelte';
+	import CardCouncil from 'components/CouncilCard.svelte';
 	import type CouncilMember from 'utils/schemas';
 
 	let { data } = $props();
@@ -52,31 +51,31 @@
 <Section>
 	<div class="president">
 		{#if president}
-			<CouncilCardBase
+			<CardCouncil
 				name={president.name}
 				position={president.position}
 				image={president.image}
 				onViewProfile={() => handleViewProfile(president!)}
-			></CouncilCardBase>
+			/>
 		{/if}
 	</div>
 	<div class="flex justify-center">
 		<div class="flex flex-row flex-wrap justify-center gap-10 p-4 align-middle">
 			{#each vps as councilMember}
-				<CardCouncilBase
+				<CardCouncil
 					name={councilMember.name}
 					position={councilMember.position}
 					image={councilMember.image}
 					onViewProfile={() => handleViewProfile(councilMember)}
-				></CardCouncilBase>
+				/>
 			{/each}
 			{#each ureps as councilMember}
-				<CardCouncilBase
+				<CardCouncil
 					name={councilMember.name}
 					position={councilMember.position}
 					image={councilMember.image}
 					onViewProfile={() => handleViewProfile(councilMember)}
-				></CardCouncilBase>
+				/>
 			{/each}
 		</div>
 		<!-- svelte-ignore a11y_no_static_element_interactions -->
@@ -86,7 +85,7 @@
 				class="fixed inset-0 z-50 flex items-center justify-center bg-black/60"
 				onclick={() => (selectedMember = null)}
 			>
-				<CouncilCard
+				<CouncilCardPopUp
 					name={selectedMember.name}
 					position={selectedMember.position}
 					email={selectedMember.email}