diff --git a/docs/dev_notes.md b/docs/dev_notes.md
index 90fb6beec..869350c03 100644
--- a/docs/dev_notes.md
+++ b/docs/dev_notes.md
@@ -16,14 +16,15 @@
 
 ## Highlights
 - [ ] pre-configured ban/warn reasons with new perm to lock admins to only use them?
-    - [ ] apply new ban scheme to the web player modal
-    - [ ] apply new ban scheme to the NUI
+    - [x] apply new ban scheme to the web player modal
+    - [x] apply new ban scheme to the NUI
     - [ ] checklist:
         - [x] light mode
         - [x] multiline
         - [x] mobile
-        - [ ] better random id (no random id? stable-hash?)
         - [ ] dialog input sanitization
+        - [ ] better random id (no random id? stable-hash?)
+        - [ ] settings enforce unique id
 - [ ] NEW PAGE: Dashboard
     - [ ] new performance chart
     - [ ] number callouts from legacy players page
diff --git a/nui/src/components/PlayerModal/Tabs/DialogBanView.tsx b/nui/src/components/PlayerModal/Tabs/DialogBanView.tsx
index 27d3c5690..612f90a0d 100644
--- a/nui/src/components/PlayerModal/Tabs/DialogBanView.tsx
+++ b/nui/src/components/PlayerModal/Tabs/DialogBanView.tsx
@@ -1,6 +1,6 @@
-import React, { useState } from "react";
+import React, { useMemo, useState } from "react";
 import {
-  Alert,
+  Autocomplete,
   Box,
   Button,
   DialogContent,
@@ -21,6 +21,36 @@ import { usePermissionsValue } from "../../../state/permissions.state";
 import { DialogLoadError } from "./DialogLoadError";
 import { GenericApiErrorResp, GenericApiResp } from "@shared/genericApiTypes";
 import { useSetPlayerModalVisibility } from "@nui/src/state/playerModal.state";
+import type { BanTemplatesDataType, BanDurationType } from "@shared/otherTypes";
+
+//Helpers - yoinked from the web ui code
+const maxReasonSize = 128;
+const defaultDurations = ['permanent', '2 hours', '8 hours', '1 day', '2 days', '1 week', '2 weeks'];
+const banDurationToString = (duration: BanDurationType) => {
+  if (duration === 'permanent') return 'permanent';
+  if (typeof duration === 'string') return duration;
+  const pluralizedString = duration.value === 1 ? duration.unit.slice(0, -1) : duration.unit;
+  return `${duration.value} ${pluralizedString}`;
+}
+const banDurationToShortString = (duration: BanDurationType) => {
+  if (typeof duration === 'string') {
+    return duration === 'permanent' ? 'PERM' : duration;
+  }
+
+  let suffix: string;
+  if (duration.unit === 'hours') {
+    suffix = 'h';
+  } else if (duration.unit === 'days') {
+    suffix = 'd';
+  } else if (duration.unit === 'weeks') {
+    suffix = 'w';
+  } else if (duration.unit === 'months') {
+    suffix = 'mo';
+  } else {
+    suffix = duration.unit;
+  }
+  return `${duration.value}${suffix}`;
+}
 
 const DialogBanView: React.FC = () => {
   const assocPlayer = useAssociatedPlayerValue();
@@ -51,8 +81,9 @@ const DialogBanView: React.FC = () => {
       return;
     }
 
-    const actualDuration =
-      duration === "custom" ? `${customDurLength} ${customDuration}` : duration;
+    const actualDuration = duration === "custom"
+      ? `${customDurLength} ${customDuration}`
+      : duration;
 
     fetchWebPipe<GenericApiResp>(
       `/player/ban?mutex=current&netid=${assocPlayer.id}`,
@@ -72,8 +103,7 @@ const DialogBanView: React.FC = () => {
           });
         } else {
           enqueueSnackbar(
-            (result as GenericApiErrorResp).error ??
-              t("nui_menu.misc.unknown_error"),
+            (result as GenericApiErrorResp).error ?? t("nui_menu.misc.unknown_error"),
             { variant: "error" }
           );
         }
@@ -137,23 +167,68 @@ const DialogBanView: React.FC = () => {
     },
   ];
 
+  //Handling ban templates
+  const banTemplates: BanTemplatesDataType[] = (playerDetails as any)?.banTemplates ?? [];
+  const processedTemplates = useMemo(() => {
+    return banTemplates.map((template, index) => ({
+      id: template.id,
+      label: template.reason,
+    }));
+  }, [banTemplates]);
+
+  const handleTemplateChange = (event: React.SyntheticEvent, value: any, reason: string, details?: any) => {
+    //reason = One of "createOption", "selectOption", "removeOption", "blur" or "clear".
+    if (reason !== 'selectOption' || value === null) return;
+    const template = banTemplates.find(template => template.id === value.id);
+    if (!template) return;
+
+    const processedDuration = banDurationToString(template.duration);
+    if (defaultDurations.includes(processedDuration)) {
+      setDuration(processedDuration);
+    } else if (typeof template.duration === 'object') {
+      setDuration('custom');
+      setCustomDurLength(template.duration.value.toString());
+      setCustomDuration(template.duration.unit);
+    }
+  }
+
+  const handleReasonInputChange = (event: React.SyntheticEvent, value: string, reason: string) => {
+    setReason(value);
+  }
+
   return (
     <DialogContent>
       <Typography variant="h6" sx={{ mb: 2 }}>
         {t("nui_menu.player_modal.ban.title")}
       </Typography>
       <form onSubmit={handleBan}>
-        <TextField
+        <Autocomplete
+          id="name"
           autoFocus
           size="small"
-          id="name"
-          label={t("nui_menu.player_modal.ban.reason_placeholder")}
-          required
-          type="text"
-          variant="outlined"
-          fullWidth
+          freeSolo
           value={reason}
-          onChange={(e) => setReason(e.currentTarget.value)}
+          onChange={handleTemplateChange}
+          onInputChange={handleReasonInputChange}
+          options={processedTemplates}
+          renderOption={(props, option, state) => {
+            const duration = banTemplates.find((t) => t.id === option.id)?.duration ?? '????';
+            const reason = option.label.length > maxReasonSize
+              ? option.label.slice(0, maxReasonSize - 3) + '...'
+              : option.label;
+            return <li {...props} key={option.id}>
+              <span
+                style={{
+                  display: "inline-block",
+                  paddingRight: "0.5rem",
+                  fontFamily: "monospace",
+                  opacity: "0.75",
+                  minWidth: "4ch"
+                }}
+              >{banDurationToShortString(duration as any)}</span> {reason}
+            </li>
+          }}
+          renderInput={(params) => <TextField {...params} label="Reason" />}
         />
         <TextField
           size="small"
@@ -174,33 +249,29 @@ const DialogBanView: React.FC = () => {
           ))}
         </TextField>
         {duration === "custom" && (
-          <Box display="flex" alignItems="center" justifyContent="center">
-            <Box>
-              <TextField
-                type="number"
-                placeholder="1"
-                variant="outlined"
-                size="small"
-                value={customDurLength}
-                onChange={(e) => setCustomDurLength(e.target.value)}
-              />
-            </Box>
-            <Box flexGrow={1}>
-              <TextField
-                select
-                size="small"
-                variant="outlined"
-                fullWidth
-                value={customDuration}
-                onChange={(e) => setCustomDuration(e.target.value)}
-              >
-                {customBanLength.map((option) => (
-                  <MenuItem key={option.value} value={option.value}>
-                    {option.label}
-                  </MenuItem>
-                ))}
-              </TextField>
-            </Box>
+          <Box display="flex" alignItems="stretch" gap={1}>
+            <TextField
+              type="number"
+              placeholder="1"
+              variant="outlined"
+              size="small"
+              value={customDurLength}
+              onChange={(e) => setCustomDurLength(e.target.value)}
+            />
+            <TextField
+              select
+              variant="outlined"
+              size="small"
+              fullWidth
+              value={customDuration}
+              onChange={(e) => setCustomDuration(e.target.value)}
+            >
+              {customBanLength.map((option) => (
+                <MenuItem key={option.value} value={option.value}>
+                  {option.label}
+                </MenuItem>
+              ))}
+            </TextField>
           </Box>
         )}
         <Button
diff --git a/nui/src/utils/constants.ts b/nui/src/utils/constants.ts
index 68f7720cb..79e91ef06 100644
--- a/nui/src/utils/constants.ts
+++ b/nui/src/utils/constants.ts
@@ -1,9 +1,43 @@
 import { PlayerModalSuccess } from "@shared/playerApiTypes";
 
-// export const MockedPlayerDetails: PlayerModalSuccess = {"meta":{"tmpPerms":{"message":true,"whitelist":true,"warn":true,"kick":true,"ban":true},"serverTime":1668030674},"player":{"displayName":"nobody","pureName":"nobody","isRegistered":false,"isConnected":true,"license":null,"ids":[],"actionHistory":[],"netid":101,"sessionTime":1}};
-
 export const MockedPlayerDetails: PlayerModalSuccess = {
-    "serverTime": 1667712061,
+    "serverTime": Math.floor(Date.now() / 1000),
+    "banTemplates": [
+        {
+            "id": "vocszy2sd1a",
+            "reason": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean condimentum, mi quis laoreet placerat, diam neque scelerisque tellus, at venenatis sem nunc vel enim. Etiam in erat posuere, blandit diam sollicitudin, tincidunt urna. In dolor lectus, facilisis in enim ac, varius ultrices libero. Vestibulum semper lobortis aliquam. Donec pharetra commodo tellus, non eleifend lacus dictum ut. Nunc rhoncus sem in lacinia sagittis. Mauris ut nisi ut dolor pretium finibus. Pellentesque eu tincidunt mauris.",
+            "duration": {
+                "value": 2,
+                "unit": "weeks"
+            }
+        },
+        {
+            "id": "q3u6jof67pd",
+            "reason": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+            "duration": {
+                "value": 1,
+                "unit": "days"
+            }
+        },
+        {
+            "id": "vcmorv3c11n",
+            "reason": "I don't know, some random reason example.",
+            "duration": "permanent"
+        },
+        {
+            "id": "fhtva57e4tq",
+            "reason": "Aiuhgi aiuHIHA huifhuidhsiuhIUHAUsh hUHAIUhs ihufdisahf",
+            "duration": "permanent"
+        },
+        {
+            "id": "kdmte4kjwg",
+            "reason": "Test long months",
+            "duration": {
+                "value": 99,
+                "unit": "months"
+            }
+        },
+    ],
     "player": {
         "displayName": "tabby",
         "pureName": "tabby",