diff --git a/package.json b/package.json
index 4e0ed86c..7c03acfc 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
     "react": "18.3.1",
     "react-app-polyfill": "3.0.0",
     "react-dom": "18.3.1",
+    "react-flip-move": "^3.0.5",
     "react-redux": "^9.1.2",
     "react-router-dom": "6.24.1",
     "react-spinners": "0.14.1",
diff --git a/src/api/question.ts b/src/api/question.ts
index 56706e2e..0fcea036 100644
--- a/src/api/question.ts
+++ b/src/api/question.ts
@@ -8,6 +8,7 @@ export enum QuestionType {
     Range = "range",
     Section = "section",
     TimeZone = "timezone",
+    Vote = "vote"
 }
 
 export interface Question {
diff --git a/src/components/InputTypes/Vote.tsx b/src/components/InputTypes/Vote.tsx
new file mode 100644
index 00000000..c630d8c0
--- /dev/null
+++ b/src/components/InputTypes/Vote.tsx
@@ -0,0 +1,241 @@
+/** @jsx jsx */
+import { jsx, css } from "@emotion/react";
+
+import React, { useEffect, useState } from "react";
+import RenderedQuestion from "../Question";
+import { slugify, humanize } from "../../utils";
+import colors from "../../colors";
+import { useDispatch, useSelector } from "react-redux";
+import { registerVote, changeVote, VoteSliceState } from "../../slices/votes";
+import FlipMove from "react-flip-move";
+
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faCaretUp, faCaretDown } from "@fortawesome/free-solid-svg-icons";
+
+interface VoteProps {
+    options: Array<string>;
+    valid: boolean;
+    question: React.RefObject<RenderedQuestion>;
+    questionId: string;
+    handler: (event: Record<string, number | null>) => void;
+}
+
+const baseCardStyles = css`
+    display: flex;
+    align-items: center;
+    background-color: ${colors.darkerGreyple};
+    padding: 10px;
+    border-radius: 5px;
+    margin-bottom: 10px;
+`;
+
+const buttonStyles = css`
+    border: none;
+    background: ${colors.greyple};
+    cursor: pointer;
+    margin-right: 20px;
+    margin-left: 20px;
+    border-radius: 5px;
+    transition: transform 0.1s ease;
+    transform: none;
+
+    :hover {
+        transform: scale(1.1);
+    }
+`;
+
+const iconStyles = css`
+    font-size: 2em;
+    color: white;
+`;
+
+const markerStyles = css`
+    border-radius: 5px;
+    padding: 5px;
+    margin-right: 10px;
+`;
+
+const votingStyles = css`
+    button {
+        background-color: ${colors.darkerBlurple};
+    }
+`;
+
+const Buttons = (base: { questionId: string; optionId: string }) => {
+    const dispatch = useDispatch();
+
+    return (
+        <div>
+            <button
+                type="button"
+                css={buttonStyles}
+                onClick={() => dispatch(changeVote({ ...base, change: -1 }))}
+            >
+                <FontAwesomeIcon css={iconStyles} icon={faCaretUp} />
+            </button>
+            <button
+                type="button"
+                css={buttonStyles}
+                onClick={() => dispatch(changeVote({ ...base, change: +1 }))}
+            >
+                <FontAwesomeIcon css={iconStyles} icon={faCaretDown} />
+            </button>
+        </div>
+    );
+};
+
+const Card = ({
+    id,
+    content,
+    questionId,
+}: {
+    id: string;
+    content: string;
+    questionId: string;
+}) => {
+    const foundIndex = useSelector<{ vote: VoteSliceState }, number | null>(
+        (state) => {
+            const votes = state.vote?.votes;
+            const questionVotes = votes?.[questionId];
+            return questionVotes ? questionVotes[id] : null;
+        },
+    );
+
+    const indexMarker =
+        foundIndex === null ? (
+            <div
+                css={css`
+                    ${markerStyles}
+                    background-color: ${colors.greyple};
+                `}
+            >
+                No preference
+            </div>
+        ) : (
+            <div
+                css={css`
+                    ${markerStyles}
+                    background-color: ${colors.darkerBlurple};
+                    padding-left: 10px;
+                    padding-right: 10px;
+                `}
+            >
+                {humanize(foundIndex)}
+            </div>
+        );
+
+    return (
+        <div
+            css={css`
+                ${baseCardStyles}
+                ${foundIndex ? votingStyles : null}
+        background-color: ${foundIndex === null
+            ? colors.darkerGreyple
+            : colors.blurple};
+            `}
+        >
+            {indexMarker}
+            <p>{content}</p>
+            <div css={{ flexGrow: 1 }} />
+            <Buttons questionId={questionId} optionId={id} />
+        </div>
+    );
+};
+
+const CardList = React.memo(function CardList({
+    cards,
+    questionId,
+    handler,
+    reverseMap
+}: {
+    cards: string[];
+    questionId: string;
+    handler: VoteProps["handler"];
+    reverseMap: Record<string, string>;
+}) {
+    const votes = useSelector<
+        { vote: VoteSliceState },
+        Record<string, number | null>
+    >((state) => {
+        const votes = state.vote?.votes;
+        const questionVotes = votes?.[questionId];
+        return questionVotes;
+    });
+
+    useEffect(() => {
+        if (!votes) {
+            return;
+        }
+
+        const updated = Object.fromEntries(
+            Object.entries(votes).map(([slug, vote]) => [reverseMap[slug], vote])
+        );
+
+        handler(updated);
+    }, [votes]);
+
+    if (votes) {
+        cards = cards.sort((a, b) => {
+            if (!votes[slugify(a)]) {
+                return 1;
+            }
+
+            if (!votes[slugify(b)]) {
+                return -1;
+            }
+            return votes[slugify(a)] - votes[slugify(b)];
+        });
+    }
+
+    return (
+        <FlipMove duration={500}>
+            {cards.map((cardContent: string) => (
+                <div key={slugify(cardContent)}>
+                    <Card
+                        content={cardContent}
+                        questionId={questionId}
+                        id={slugify(cardContent)}
+                    />
+                </div>
+            ))}
+        </FlipMove>
+    );
+});
+
+export default function Vote(props: VoteProps): JSX.Element {
+    const [state,] = useState({
+        cards: props.options
+            .map((value) => ({ value, sort: Math.random() }))
+            .sort((a, b) => a.sort - b.sort)
+            .map(({ value }) => value),
+    });
+
+    const dispatch = useDispatch();
+
+    useEffect(() => {
+        dispatch(
+            registerVote({
+                questionId: props.questionId,
+                questionSlugs: state.cards.map((value) => slugify(value)),
+            }),
+        );
+    }, [props.questionId]);
+
+    const reverseMap = Object.fromEntries(props.options.map(value => {
+        return [slugify(value), value];
+    }));
+
+    const COPY = "Use the buttons to organise options into your preferred order. You can have multiple options with the same ranking. Additionally, you can leave some or all options as \"No preference\" if you do not wish to order them.";
+
+    return (
+        <div>
+            <p>{COPY}</p>
+            <CardList
+                questionId={props.questionId}
+                handler={props.handler}
+                cards={state.cards}
+                reverseMap={reverseMap}
+            />
+        </div>
+    );
+}
diff --git a/src/components/InputTypes/index.tsx b/src/components/InputTypes/index.tsx
index ee92ef18..1880bcd6 100644
--- a/src/components/InputTypes/index.tsx
+++ b/src/components/InputTypes/index.tsx
@@ -11,6 +11,7 @@ import {QuestionType} from "../../api/question";
 import RenderedQuestion from "../Question";
 import Code from "./Code";
 import TimeZone from "./TimeZone";
+import Vote from "./Vote";
 
 export default function create_input(
     {props: renderedQuestionProps, realState}: RenderedQuestion,
@@ -67,6 +68,10 @@ export default function create_input(
             result = <TimeZone question={renderedQuestionProps.selfRef} valid={valid} onBlurHandler={onBlurHandler}/>;
             break;
 
+        case QuestionType.Vote:
+            result = <Vote question={renderedQuestionProps.selfRef} handler={handler} questionId={question.id} valid={valid} options={options}/>;
+            break;
+
         default:
             result = <TextArea handler={handler} valid={valid} onBlurHandler={onBlurHandler} focus_ref={focus_ref}/>;
     }
diff --git a/src/components/Question.tsx b/src/components/Question.tsx
index fb5c419b..66784d01 100644
--- a/src/components/Question.tsx
+++ b/src/components/Question.tsx
@@ -13,12 +13,13 @@ const skip_normal_state: Array<QuestionType> = [
     QuestionType.Select,
     QuestionType.TimeZone,
     QuestionType.Section,
-    QuestionType.Range
+    QuestionType.Range,
+    QuestionType.Vote
 ];
 
 export interface QuestionState {
     // Common keys
-    value: string | null | Map<string, boolean>
+    value: string | null | Map<string, boolean> | Record<string, number | null>
 
     // Validation
     valid: boolean
@@ -56,6 +57,8 @@ class RenderedQuestion extends React.Component<QuestionProp> {
             this.handler = this.text_area_handler.bind(this);
         } else if (props.question.type === QuestionType.Code) {
             this.handler = this.code_field_handler.bind(this);
+        } else if (props.question.type === QuestionType.Vote) {
+            this.handler = this.vote_handler.bind(this);
         } else {
             this.handler = this.normal_handler.bind(this);
         }
@@ -74,7 +77,7 @@ class RenderedQuestion extends React.Component<QuestionProp> {
     }
 
     // This is here to allow dynamic selection between the general handler, textarea, and code field handlers.
-    handler(_: ChangeEvent<HTMLInputElement | HTMLTextAreaElement> | string): void {} // eslint-disable-line
+    handler(_: ChangeEvent<HTMLInputElement | HTMLTextAreaElement> | string | Record<string, number | null>): void {} // eslint-disable-line
 
     blurHandler(): void {
         if (this.props.question.required) {
@@ -150,6 +153,14 @@ class RenderedQuestion extends React.Component<QuestionProp> {
         }
     }
 
+    vote_handler(event: Record<string, number | null>) {
+        this.setState({
+            value: event,
+            valid: true,
+            error: ""
+        });
+    }
+
     text_area_handler(event: ChangeEvent<HTMLTextAreaElement>): void {
         // We will validate again when focusing out.
         this.setState({
@@ -194,6 +205,7 @@ class RenderedQuestion extends React.Component<QuestionProp> {
             case QuestionType.Select:
             case QuestionType.Range:
             case QuestionType.TimeZone:
+            case QuestionType.Vote:
             case QuestionType.Radio:
                 if (!this.realState.value) {
                     valid = false;
diff --git a/src/index.tsx b/src/index.tsx
index a7fdd2ac..a63c9e1c 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -62,23 +62,21 @@ const rootDocument = document.getElementById("root");
 
 const root = createRoot(rootDocument!);
 root.render(
-    <React.StrictMode>
-        <Sentry.ErrorBoundary
-            fallback={<p>An error has occurred with Python Discord Forms. Please let us know in the Discord server at <a href="https://discord.gg/python">discord.gg/python</a></p>}
-            showDialog={true}
-            dialogOptions={{
-                title: "You've found a bug in PyDis forms!"
-            }}
-            onError={(err) => {
-                if(process.env.NODE_ENV === "development")
-                    console.log(err);
-            }}
-        >
-            <Provider store={formsStore}>
-                <App/>
-            </Provider>
-        </Sentry.ErrorBoundary>
-    </React.StrictMode>
+    <Sentry.ErrorBoundary
+        fallback={<p>An error has occurred with Python Discord Forms. Please let us know in the Discord server at <a href="https://discord.gg/python">discord.gg/python</a></p>}
+        showDialog={true}
+        dialogOptions={{
+            title: "You've found a bug in PyDis forms!"
+        }}
+        onError={(err) => {
+            if(process.env.NODE_ENV === "development")
+                console.log(err);
+        }}
+    >
+        <Provider store={formsStore}>
+            <App/>
+        </Provider>
+    </Sentry.ErrorBoundary>
 );
 
 serviceWorker.unregister();
diff --git a/src/slices/votes.ts b/src/slices/votes.ts
new file mode 100644
index 00000000..87d84e84
--- /dev/null
+++ b/src/slices/votes.ts
@@ -0,0 +1,73 @@
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+
+export interface VoteSliceState {
+    votes: Record<string, Record<string, number | null>>;
+}
+
+interface VoteChange {
+    questionId: string;
+    optionId: string;
+    change: 1 | -1;
+}
+
+interface VoteRegister {
+    questionId: string;
+    questionSlugs: string[];
+}
+
+const voteSlice = createSlice({
+    name: "vote",
+    initialState: {
+        votes: {},
+    },
+    reducers: {
+        registerVote: (
+            state: VoteSliceState,
+            action: PayloadAction<VoteRegister>,
+        ) => {
+            state.votes[action.payload.questionId] = {};
+            action.payload.questionSlugs.forEach((value) => {
+                state.votes[action.payload.questionId][value] = null;
+            });
+        },
+        changeVote: (
+            state: VoteSliceState,
+            action: PayloadAction<VoteChange>,
+        ) => {
+            const foundVote =
+                state.votes[action.payload.questionId][action.payload.optionId];
+
+            if (foundVote !== null) {
+                if (foundVote === 1 && action.payload.change <= 0) {
+                    return;
+                }
+                if (
+                    foundVote >=
+                        Object.keys(state.votes[action.payload.questionId])
+                            .length &&
+                    action.payload.change >= 0
+                ) {
+                    state.votes[action.payload.questionId][
+                        action.payload.optionId
+                    ] = null;
+                    return;
+                }
+                state.votes[action.payload.questionId][
+                    action.payload.optionId
+                ] += action.payload.change;
+            } else {
+                if (action.payload.change <= 0) {
+                    state.votes[action.payload.questionId][
+                        action.payload.optionId
+                    ] = Object.keys(
+                        state.votes[action.payload.questionId],
+                    ).length;
+                }
+            }
+        },
+    },
+});
+
+export const { registerVote, changeVote } = voteSlice.actions;
+
+export default voteSlice.reducer;
diff --git a/src/store.ts b/src/store.ts
index 1b9807b9..e516bbab 100644
--- a/src/store.ts
+++ b/src/store.ts
@@ -1,9 +1,11 @@
 import { combineReducers, configureStore } from "@reduxjs/toolkit";
 
 import authorizationReducer from "./slices/authorization";
+import voteReducer from "./slices/votes";
 
 const rootReducer = combineReducers({
-    authorization: authorizationReducer
+    authorization: authorizationReducer,
+    vote: voteReducer
 });
 
 export const setupStore = (preloadedState?: Partial<RootState>) => {
diff --git a/src/utils.ts b/src/utils.ts
new file mode 100644
index 00000000..80670452
--- /dev/null
+++ b/src/utils.ts
@@ -0,0 +1,24 @@
+export function slugify(str: string) {
+    str = str.replace(/^\s+|\s+$/g, "");
+    str = str.toLowerCase();
+    str = str
+        .replace(/[^a-z0-9 -]/g, "")
+        .replace(/\s+/g, "-")
+        .replace(/-+/g, "-");
+    return str;
+}
+
+export function humanize(num: number) {
+    if (num % 100 >= 11 && num % 100 <= 13) return num + "th";
+
+    switch (num % 10) {
+        case 1:
+            return num + "st";
+        case 2:
+            return num + "nd";
+        case 3:
+            return num + "rd";
+    }
+
+    return num + "th";
+}
diff --git a/yarn.lock b/yarn.lock
index 84e1c7ed..f526c4d1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6749,6 +6749,11 @@ react-dom@18.3.1:
     loose-envify "^1.1.0"
     scheduler "^0.23.2"
 
+react-flip-move@^3.0.5:
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/react-flip-move/-/react-flip-move-3.0.5.tgz#8b87510ad32ebef01ebca94902b445f456bbc0f7"
+  integrity sha512-Mf4XpbkUNZy9eu80iXXFIjToDvw+bnHxmKHVoositbMpV87O/EQswnXUqVovRHoTx/F+4dE+p//PyJnAT7OtPA==
+
 react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"