diff --git a/17th Website/src/forms/formsHome.vue b/17th Website/src/forms/formsHome.vue
index 7c0c264..c3ee8a2 100644
--- a/17th Website/src/forms/formsHome.vue	
+++ b/17th Website/src/forms/formsHome.vue	
@@ -15,7 +15,7 @@ export default {
         <clickableCard title="Transfer" description="Assign a member to a new unit." link="/forms/transfer"
             icon="carbon:collaborate">
         </clickableCard>
-        <clickableCard title="Promotion" description="Assign new ranks to members." link="#" icon="carbon:report">
+        <clickableCard title="Promotion" description="Assign new ranks to members." link="/forms/promotion" icon="carbon:report">
         </clickableCard>
         <clickableCard title="LOA" description="Assign a Leave of Absence to a member." link="#" icon="carbon:collaborate">
         </clickableCard>
diff --git a/17th Website/src/forms/promotionForm.vue b/17th Website/src/forms/promotionForm.vue
new file mode 100644
index 0000000..91aa004
--- /dev/null
+++ b/17th Website/src/forms/promotionForm.vue	
@@ -0,0 +1,117 @@
+<script>
+import QueryApolloGraphQL from '../api/request';
+import pingableTextBox from '../components/inputs/pingableTextBox.vue';
+import Dropdown from '../components/dropdown/Dropdown.vue';
+
+export default {
+    components: {
+        pingableTextBox,
+        Dropdown,
+    },
+    data() {
+        return {
+            members: [],
+            statusList: [],
+            rankList: [],
+
+            status: '',
+            rank: '',
+            member: '',
+            validMember: false,
+        }
+    },
+    beforeMount() {
+        QueryApolloGraphQL("getPageMembers", "query Items {getPageMembers {items {  id name  }}}")
+            .then(value => {
+                value.forEach(element => {
+                    this.members.push(element.member_name)
+                });
+            })
+        // THIS IS THE NEW QUERY TO USE WHICH GIVES THE NAME AND ID
+        // QueryApolloGraphQL("getPageMembers", `query Items {
+        // getPageMembers {
+        //     items {
+        //           id 
+        //           name  
+        //         }}}`)
+        // .then(value => {
+        //     value.forEach(element => {
+        //         this.members.push(element.member_name)
+        //     });
+        // })
+
+        //get all of the ranks to change a person to
+        QueryApolloGraphQL("getPageRanks", `query GetRanks {
+            getPageRanks {
+                items {
+                id
+                short_name
+                }
+            }
+            }`).then(value => { this.rankList = value; });
+
+    },
+    methods: {
+        submit() {
+            console.log(this.status, this.rank, this.member, this.validMember)
+        },
+        inputCheck() {
+
+        }
+    }
+}
+</script>
+
+<template>
+    <div class="bg-gray-dark rounded-xl max-w-4xl min-w-formWidth px-5 h-80">
+        <h1 class="m-0">Change Rank</h1>
+
+        <div id="container" class="w-full h-full">
+            <div class="flex flex-col justify-center mx-auto items-center">
+
+                <div class="flex justify-center">
+                    <p class="text-white text-2xl">Member: </p>
+                    <pingableTextBox :items="Object.values(this.members)"
+                        @input="(search, valid) => { this.member = search, this.validMember = valid }" class="mx-5" />
+
+                </div>
+
+                <div class="flex justify-center pt-5">
+                    <p class="text-white text-2xl">Select New Rank: </p>
+                    <select v-model="this.rank">
+                        <option v-for="option in rankList" :value="option">
+                            {{ option.short_name }}
+                        </option>
+                    </select>
+                </div>
+
+            </div>
+            <!-- buttons -->
+            <div class="flex justify-between p-5">
+                <button class="bg-gray-light text-white px-7 py-3 rounded-lg"
+                    @click="$router.push({ path: `/forms` })">Cancel</button>
+                <button class="bg-blue text-white px-7 py-3 rounded-lg" @click="submit()">Confirm</button>
+            </div>
+        </div>
+
+
+    </div>
+</template>
+
+<style scoped>
+.lbButton {
+    background-color: var(--background-secondary);
+    border: none;
+    border-radius: 5px;
+}
+
+.lbOptions {
+    background-color: var(--background-secondary);
+    display: block;
+    position: absolute;
+}
+
+.clicked {
+    filter: brightness(85%)
+}
+</style>
\ No newline at end of file
diff --git a/17th Website/src/router.js b/17th Website/src/router.js
index 118d37b..b46bd12 100644
--- a/17th Website/src/router.js	
+++ b/17th Website/src/router.js	
@@ -49,6 +49,11 @@ export default createRouter({
           path: 'transfer',
           name: 'transfer',
           component: () => import('./forms/transferForm.vue')
+        },        
+        {
+          path: 'promotion',
+          name: 'promotion',
+          component: () => import('./forms/promotionForm.vue')
         },
       ]
     },
diff --git a/17th Website/src/views/home.vue b/17th Website/src/views/home.vue
index a6ab9ed..588a9b8 100644
--- a/17th Website/src/views/home.vue	
+++ b/17th Website/src/views/home.vue	
@@ -19,7 +19,7 @@ export default {
     <div id="QuickLinks" class="mt-10 grid sm:grid-cols-2 lg:grid-cols-4 place-items-center grid-rows-2 w-full min-w-fit max-w-6xl">
       <clickableCard title="Transfer" description="Assign a member to a new unit." link="forms/transfer" icon="carbon:collaborate">
       </clickableCard>
-      <clickableCard title="Promotion" description="Assign new ranks to members." link="#" icon="carbon:report">
+      <clickableCard title="Promotion" description="Assign new ranks to members." link="/forms/promotion" icon="carbon:report">
       </clickableCard>
       <clickableCard title="LOA" description="Assign a Leave of Absence to a member." link="#" icon="carbon:collaborate">
       </clickableCard>