diff --git a/code/modules/economy/ATM.dm b/code/modules/economy/ATM.dm
index d2991112b0f..c9ebce5e6b2 100644
--- a/code/modules/economy/ATM.dm
+++ b/code/modules/economy/ATM.dm
@@ -7,7 +7,7 @@ log transactions
 
 */
 
-#define NO_SCREEN 0
+#define DEFAULT_SCREEN 0
 #define CHANGE_SECURITY_LEVEL 1
 #define TRANSFER_FUNDS 2
 #define VIEW_TRANSACTION_LOGS 3
@@ -31,7 +31,7 @@ log transactions
 	var/machine_id = ""
 	var/obj/item/card/held_card
 	var/editing_security_level = 0
-	var/view_screen = NO_SCREEN
+	var/view_screen = DEFAULT_SCREEN
 	var/lastprint = 0 // Printer needs time to cooldown
 
 /obj/machinery/atm/New()
@@ -124,7 +124,7 @@ log transactions
 	user.set_machine(src)
 	ui = SStgui.try_update_ui(user, src, ui_key, ui, force_open)
 	if (!ui)
-		ui = new(user, src, ui_key, "atm.tmpl", name, 550, 650)
+		ui = new(user, src, ui_key, "ATM", name, 550, 650)
 		ui.open()
 
 /obj/machinery/atm/tgui_data(mob/user)
@@ -174,7 +174,7 @@ log transactions
 				to_chat(usr, "[bicon(src)]<span class='warning'>You don't have enough funds to do that!</span>")
 
 		if("view_screen")
-			view_screen = text2num(params("view_screen"))
+			view_screen = text2num(params["view_screen"])
 
 		if("change_security_level")
 			if(authenticated_account)
@@ -218,7 +218,7 @@ log transactions
 					else
 						playsound(src, 'sound/machines/twobeep.ogg', 50, 1)
 						ticks_left_timeout = 120
-						view_screen = NO_SCREEN
+						view_screen = DEFAULT_SCREEN
 
 						//create a transaction log entry
 						var/datum/transaction/T = new()
diff --git a/code/modules/economy/Accounts.dm b/code/modules/economy/Accounts.dm
index 19e2bcafe0b..67a6f117465 100644
--- a/code/modules/economy/Accounts.dm
+++ b/code/modules/economy/Accounts.dm
@@ -19,7 +19,7 @@ GLOBAL_LIST_EMPTY(all_money_accounts)
 		GLOB.station_account = new()
 		GLOB.station_account.owner_name = "[station_name()] Station Account"
 		GLOB.station_account.account_number = rand(111111, 999999)
-		GLOB.station_account.remote_access_pin = rand(1111, 111111)
+		GLOB.station_account.remote_access_pin = rand(111111, 999999)
 		GLOB.station_account.money = STATION_START_CASH
 
 		//create an entry in the account transaction log for when it was created
@@ -35,7 +35,7 @@ GLOBAL_LIST_EMPTY(all_money_accounts)
 	var/datum/money_account/department_account = new()
 	department_account.owner_name = "[department] Account"
 	department_account.account_number = rand(111111, 999999)
-	department_account.remote_access_pin = rand(1111, 111111)
+	department_account.remote_access_pin = rand(111111, 999999)
 	department_account.money = DEPARTMENT_START_CASH
 
 	//create an entry in the account transaction log for when it was created
@@ -55,7 +55,7 @@ GLOBAL_LIST_EMPTY(all_money_accounts)
 	//create a new account
 	var/datum/money_account/M = new()
 	M.owner_name = new_owner_name
-	M.remote_access_pin = rand(1111, 111111)
+	M.remote_access_pin = rand(111111, 999999)
 	M.money = starting_funds
 
 	//create an entry in the account transaction log for when it was created
diff --git a/tgui/packages/tgui/interfaces/ATM.js b/tgui/packages/tgui/interfaces/ATM.js
index 22fc80fff14..addebbc9efa 100644
--- a/tgui/packages/tgui/interfaces/ATM.js
+++ b/tgui/packages/tgui/interfaces/ATM.js
@@ -1,33 +1,157 @@
-import { useBackend } from '../backend';
-import { Button, LabeledList, Section } from '../components';
+import { useBackend, useLocalState } from '../backend';
+import { Button, Flex, Icon, Input, Divider, Box, LabeledList, Section } from '../components';
 import { Window } from '../layouts';
 
+/*
+#define NO_SCREEN 0
+#define CHANGE_SECURITY_LEVEL 1
+#define TRANSFER_FUNDS 2
+#define VIEW_TRANSACTION_LOGS 3
+*/
+
 export const ATM = (props, context) => {
   const { act, data } = useBackend(context);
   const {
-    machine_id,
-    held_card_name,
+    view_screen,
+    authenticated_account,
     ticks_left_locked_down,
+    linked_db,
   } = data;
+  let body;
+  if (ticks_left_locked_down > 0){
+    body =
+    <Box bold color="bad">
+      <Icon name = "exclamation-triangle"></Icon> Maximum number of pin attempts exceeded! Access to this ATM has been temporarily disabled.
+    </Box>
+  } else if (!linked_db){
+    body =
+    <Box bold color="bad">
+      <Icon name = "exclamation-triangle"></Icon> Unable to connect to accounts database, please retry and if the issue persists contact Nanotrasen IT support.
+    </Box>
+  } else if (authenticated_account){
+    switch(view_screen){
+      case 1: // CHANGE_SECURITY_LEVEL
+        body = <ChangeSecurityLevel/>
+        break;
+      case 2: // TRANSFER_FUNDS
+        body = <TransferFunds/>
+        break;
+      case 3: // VIEW_TRANSACTION_LOGS
+        body = <ViewTransactionLogs/>
+        break;
+      default:
+        body = <DefaultScreen/>
+    }
+  }
+  else {
+    body = <LoginScreen />;
+   }
   return (
     <Window resizable>
       <Window.Content scrollable>
-        <Section title="Health status">
-          <LabeledList>
-            <LabeledList.Item label="Health">
-              {health}
-            </LabeledList.Item>
-            <LabeledList.Item label="Color">
-              {color}
-            </LabeledList.Item>
-            <LabeledList.Item label="Button">
-              <Button
-                content="Dispatch a 'test' action"
-                onClick={() => act('test')} />
-            </LabeledList.Item>
-          </LabeledList>
+        <IntroductionAndCard/>
+        <Section>
+        {body}
         </Section>
       </Window.Content>
     </Window>
   );
 };
+
+const IntroductionAndCard = (props, context) => {
+  const {act, data } = useBackend(context);
+  const {
+    machine_id,
+    held_card_name,
+  } = data;
+  return (<Section title="Nanotrasen Automatic Teller Machine" >
+    <Box>For all your monetary need!
+    </Box>
+    <Divider/>
+    <Box>
+      <Icon name = "info-circle"></Icon> This terminal is <i>{machine_id}</i>, report this code when contacting Nanotrasen IT Support.
+    </Box>
+    <Divider/>
+    <LabeledList>
+      <LabeledList.Item label = "Card">
+        <Button
+          content={held_card_name}
+          icon='eject'
+          onClick={
+            () => act('insert_card')}
+        />
+      </LabeledList.Item>
+    </LabeledList>
+  </Section>
+  );
+};
+
+const DefaultScreen = (props, context) => {
+  const {act, data } = useBackend(context);
+  const {
+    owner_name,
+    money,
+  } = data;
+  return (
+    <Flex>
+      <Box>
+        Welcome, {owner_name}
+      </Box>
+      <Box>
+        Account balance: {money}
+      </Box>
+      <Divider />
+      <Box>
+      <Button
+            content="Logout"
+            icon='sign-out-alt'
+            onClick={
+              () => act('logout')}
+          />
+      </Box>
+    </Flex>
+  );
+};
+
+const LoginScreen = (props, context) => {
+  const {act, data } = useBackend(context);
+  const [accountID, setAccountID] = useLocalState(context, "accountID", null)
+  const [accountPin, setAccountPin] = useLocalState(context, "accountPin", null)
+  const {
+    machine_id,
+    held_card_name,
+  } = data;
+  return (
+  <Flex>
+    <LabeledList>
+      <LabeledList.Item>
+      Insert card or enter ID and pin to login
+      </LabeledList.Item>
+      <LabeledList.Item label = "Account ID">
+        <Input
+        placeholder="6 Digit Number"
+        onInput={(e, value) => setAccountID(value)}
+        />
+      </LabeledList.Item>
+      <LabeledList.Item label = "Pin">
+        <Input
+        placeholder= "6 Digit Number"
+        onInput={(e, value) => setAccountPin(value)}
+        />
+      </LabeledList.Item>
+      <LabeledList.Item>
+        <Button
+            content="Login"
+            icon='sign-in-alt'
+            onClick={
+              () => act('attempt_auth', {account_num: accountID, account_pin: accountPin})}
+          />
+      </LabeledList.Item>
+    </LabeledList>
+  </Flex>
+  );
+};
+
+
+
+