diff --git a/ui/src/assets/base.css b/ui/src/assets/base.css
index f17bed7..3f67ca8 100644
--- a/ui/src/assets/base.css
+++ b/ui/src/assets/base.css
@@ -6,7 +6,7 @@
 :root {
   --background: oklch(0.2046 0 0);
   --foreground: oklch(0.9219 0 0);
-  --card: oklch(0.2686 0 0);
+  --card: oklch(23.075% 0.00003 271.152);
   --card-foreground: oklch(0.9219 0 0);
   --popover: oklch(0.2686 0 0);
   --popover-foreground: oklch(0.9219 0 0);
@@ -55,7 +55,7 @@
 .dark {
   --background: oklch(0.2046 0 0);
   --foreground: oklch(0.9219 0 0);
-  --card: oklch(0.2686 0 0);
+  --card: oklch(23.075% 0.00003 271.152);
   --card-foreground: oklch(0.9219 0 0);
   --popover: oklch(0.2686 0 0);
   --popover-foreground: oklch(0.9219 0 0);
diff --git a/ui/src/components/ui/card/Card.vue b/ui/src/components/ui/card/Card.vue
new file mode 100644
index 0000000..16920e4
--- /dev/null
+++ b/ui/src/components/ui/card/Card.vue
@@ -0,0 +1,21 @@
+<script setup>
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  class: { type: null, required: false },
+});
+</script>
+
+<template>
+  <div
+    data-slot="card"
+    :class="
+      cn(
+        'bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>
diff --git a/ui/src/components/ui/card/CardAction.vue b/ui/src/components/ui/card/CardAction.vue
new file mode 100644
index 0000000..4c13362
--- /dev/null
+++ b/ui/src/components/ui/card/CardAction.vue
@@ -0,0 +1,21 @@
+<script setup>
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  class: { type: null, required: false },
+});
+</script>
+
+<template>
+  <div
+    data-slot="card-action"
+    :class="
+      cn(
+        'col-start-2 row-span-2 row-start-1 self-start justify-self-end',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>
diff --git a/ui/src/components/ui/card/CardContent.vue b/ui/src/components/ui/card/CardContent.vue
new file mode 100644
index 0000000..f54f541
--- /dev/null
+++ b/ui/src/components/ui/card/CardContent.vue
@@ -0,0 +1,13 @@
+<script setup>
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  class: { type: null, required: false },
+});
+</script>
+
+<template>
+  <div data-slot="card-content" :class="cn('px-6', props.class)">
+    <slot />
+  </div>
+</template>
diff --git a/ui/src/components/ui/card/CardDescription.vue b/ui/src/components/ui/card/CardDescription.vue
new file mode 100644
index 0000000..199875d
--- /dev/null
+++ b/ui/src/components/ui/card/CardDescription.vue
@@ -0,0 +1,16 @@
+<script setup>
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  class: { type: null, required: false },
+});
+</script>
+
+<template>
+  <p
+    data-slot="card-description"
+    :class="cn('text-muted-foreground text-sm', props.class)"
+  >
+    <slot />
+  </p>
+</template>
diff --git a/ui/src/components/ui/card/CardFooter.vue b/ui/src/components/ui/card/CardFooter.vue
new file mode 100644
index 0000000..a28c159
--- /dev/null
+++ b/ui/src/components/ui/card/CardFooter.vue
@@ -0,0 +1,16 @@
+<script setup>
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  class: { type: null, required: false },
+});
+</script>
+
+<template>
+  <div
+    data-slot="card-footer"
+    :class="cn('flex items-center px-6 [.border-t]:pt-6', props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/ui/src/components/ui/card/CardHeader.vue b/ui/src/components/ui/card/CardHeader.vue
new file mode 100644
index 0000000..cc387d1
--- /dev/null
+++ b/ui/src/components/ui/card/CardHeader.vue
@@ -0,0 +1,21 @@
+<script setup>
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  class: { type: null, required: false },
+});
+</script>
+
+<template>
+  <div
+    data-slot="card-header"
+    :class="
+      cn(
+        '@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>
diff --git a/ui/src/components/ui/card/CardTitle.vue b/ui/src/components/ui/card/CardTitle.vue
new file mode 100644
index 0000000..bb88bf0
--- /dev/null
+++ b/ui/src/components/ui/card/CardTitle.vue
@@ -0,0 +1,16 @@
+<script setup>
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  class: { type: null, required: false },
+});
+</script>
+
+<template>
+  <h3
+    data-slot="card-title"
+    :class="cn('leading-none font-semibold', props.class)"
+  >
+    <slot />
+  </h3>
+</template>
diff --git a/ui/src/components/ui/card/index.js b/ui/src/components/ui/card/index.js
new file mode 100644
index 0000000..409685b
--- /dev/null
+++ b/ui/src/components/ui/card/index.js
@@ -0,0 +1,7 @@
+export { default as Card } from "./Card.vue";
+export { default as CardAction } from "./CardAction.vue";
+export { default as CardContent } from "./CardContent.vue";
+export { default as CardDescription } from "./CardDescription.vue";
+export { default as CardFooter } from "./CardFooter.vue";
+export { default as CardHeader } from "./CardHeader.vue";
+export { default as CardTitle } from "./CardTitle.vue";
diff --git a/ui/src/pages/ManageTransfers.vue b/ui/src/pages/ManageTransfers.vue
new file mode 100644
index 0000000..b40f70c
--- /dev/null
+++ b/ui/src/pages/ManageTransfers.vue
@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import Badge from '@/components/ui/badge/Badge.vue';
+import Button from '@/components/ui/button/Button.vue';
+import {
+    Card,
+    CardContent,
+    CardDescription,
+    CardFooter,
+    CardHeader,
+    CardTitle,
+} from '@/components/ui/card'
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+    DialogTrigger,
+} from '@/components/ui/dialog'
+import { Combobox, ComboboxAnchor, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxList } from "@/components/ui/combobox"
+
+import { onMounted, ref } from 'vue';
+import { getRanks } from '@/api/rank';
+
+const setRankDialog = ref(false);
+const rankOnTransfer = ref();
+const ranks = ref(null);
+
+onMounted(async () => {
+    ranks.value = await getRanks();
+});
+</script>
+<template>
+    <Dialog :open="setRankDialog" @update:open="setRankDialog = false">
+        <DialogContent>
+            <DialogHeader>
+                <DialogTitle>Set Rank on Transfer</DialogTitle>
+                <DialogDescription>
+                    Assign MEMBER a rank on transfer completion.
+                </DialogDescription>
+            </DialogHeader>
+            <!-- Rank Combobox -->
+            <Combobox v-model="rankOnTransfer">
+                <ComboboxAnchor class="w-[300px]">
+                    <ComboboxInput placeholder="Search ranks..." class="w-full pl-9"
+                        :display-value="(v) => v ? v.short_name : ''" />
+                </ComboboxAnchor>
+                <ComboboxList class="w-[300px]">
+                    <ComboboxEmpty class="text-muted-foreground">No results</ComboboxEmpty>
+                    <ComboboxGroup>
+                        <template v-for="rank in ranks" :key="rank.id">
+                            <ComboboxItem :value="rank"
+                                class="data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative cursor-pointer select-none px-2 py-1.5">
+                                {{ rank.short_name }}
+                                <ComboboxItemIndicator class="absolute left-2 inline-flex items-center">
+                                    <Check class="h-4 w-4" />
+                                </ComboboxItemIndicator>
+                            </ComboboxItem>
+                        </template>
+                    </ComboboxGroup>
+                </ComboboxList>
+            </Combobox>
+            <DialogFooter>
+                <Button variant="outline" @click="setRankDialog = false">Cancel</Button>
+                <Button>Confirm</Button>
+            </DialogFooter>
+        </DialogContent>
+    </Dialog>
+
+    <div class="max-w-5xl mx-auto">
+        Active
+        <div>
+            <Card>
+                <CardHeader>
+                    <CardTitle class="flex justify-between">
+                        <div class="flex items-center gap-3">
+                            <Badge class="">Pending</Badge>
+                            <p>Name</p>
+                        </div>
+                        <div class="text-muted-foreground font-normal flex gap-2">
+                            Transfer To: <p class="text-white">Company</p>
+                        </div>
+                    </CardTitle>
+                    <CardDescription class="flex gap-2">Approved by: <p class="text-white">Someone, Someone?</p>
+                    </CardDescription>
+                    <CardDescription class="flex gap-2">Rank on transfer: <p class="text-white">Rank</p>
+                    </CardDescription>
+                </CardHeader>
+                <!-- <CardContent>
+                    Card Content
+                </CardContent> -->
+                <CardFooter class="flex justify-between">
+                    <p class="text-muted-foreground">Request Date:</p>
+                    <div class="flex gap-4">
+                        <Button variant="success">Approve</Button>
+                        <Button variant="destructive">Deny</Button>
+                    </div>
+                </CardFooter>
+            </Card>
+        </div>
+        <div>
+            Inactive
+        </div>
+    </div>
+</template>
\ No newline at end of file
diff --git a/ui/src/router/index.js b/ui/src/router/index.js
index 28678a6..6e80ddb 100644
--- a/ui/src/router/index.js
+++ b/ui/src/router/index.js
@@ -25,8 +25,8 @@ const router = createRouter({
           component: () => import('@/pages/Application.vue')
         },
         {
-          path: 'transfer-requests',
-          component: () => import('@/pages/RankChange.vue')
+          path: 'transfer',
+          component: () => import('@/pages/ManageTransfers.vue')
         },
         {
           path: 'loa',