Why Two Devices Instead of One?
When we first released Agency Phone, it quickly became the go-to in-game phone for hundreds of FiveM servers. But as server owners started building more complex roleplay ecosystems, a recurring request kept coming up: players wanted a larger screen for tasks like browsing the MDT, managing businesses, or reviewing documents during roleplay. That is exactly why we built Agency Pad. Rather than cramming every feature into a single phone interface, we split the experience across two purpose-built devices. The phone handles quick, on-the-go interactions like calls, texts, and notifications, while the pad provides a full tablet experience for data-heavy tasks. This article breaks down exactly when you should use each device and how they complement each other on your server.
Screen Real Estate and UI Layout
The most obvious difference between Agency Phone and Agency Pad is the screen size. Agency Phone uses a compact mobile-style viewport of roughly 360x640 pixels, designed to sit in the corner of the player's screen without blocking gameplay. Agency Pad, on the other hand, opens a tablet-sized viewport of approximately 800x600 pixels that takes up more of the screen but provides dramatically more usable space. This matters when you are building apps that display tables, forms, or maps. A phone-sized contacts app works perfectly, but try fitting a full police MDT with suspect records, warrants, and evidence photos on a 360-pixel-wide screen and things get cramped fast. Here is how you would detect which device your app is running on and adjust the layout accordingly:
-- client.lua: Detecting active device
local activeDevice = nil
RegisterNetEvent('agency:phone:opened', function()
activeDevice = 'phone'
SendNUIMessage({ action = 'setDevice', device = 'phone' })
end)
RegisterNetEvent('agency:pad:opened', function()
activeDevice = 'pad'
SendNUIMessage({ action = 'setDevice', device = 'pad' })
end)
-- In your NUI JavaScript
window.addEventListener('message', (e) => {
if (e.data.action === 'setDevice') {
document.body.classList.toggle('device-phone', e.data.device === 'phone')
document.body.classList.toggle('device-pad', e.data.device === 'pad')
}
})
Feature Comparison at a Glance
Both devices share a common app framework, which means any app you build can technically run on either device. However, certain features are optimized for one or the other. Agency Phone excels at calls and voice chat integration, SMS and messaging, quick notifications, camera and photo gallery, contacts management, and GPS navigation. Agency Pad shines with MDT and police records, business management dashboards, document viewing and editing, map overlays with multiple markers, inventory management grids, and admin panels. The key distinction is interaction frequency versus information density. If a player needs to glance at something quickly during gameplay, it belongs on the phone. If they need to sit down and work through data, the pad is the right choice.
Performance Considerations
Running two NUI devices simultaneously is a common concern for server owners worried about client performance. The good news is that both Agency Phone and Agency Pad are built on the same optimized rendering engine. When a device is closed, its NUI frame is completely destroyed rather than just hidden, which frees up memory and GPU resources. On average, having either device open costs roughly 0.01ms of client frame time, which is negligible. The important thing is to avoid having both devices open at the same time. Our built-in device manager handles this automatically by closing the phone when the pad opens and vice versa. If you are building custom integrations, make sure to respect this pattern:
-- Ensure only one device is active at a time
local function openPad()
if GetResourceState('agency-phone') == 'started' then
TriggerEvent('agency:phone:close')
end
Wait(100) -- Allow phone NUI to clean up
SetNuiFocus(true, true)
SendNUIMessage({ action = 'openPad' })
end
local function openPhone()
if GetResourceState('agency-pad') == 'started' then
TriggerEvent('agency:pad:close')
end
Wait(100)
SetNuiFocus(true, true)
SendNUIMessage({ action = 'openPhone' })
end
Use Case: Police and EMS Servers
Law enforcement and emergency service roleplay is where the phone-plus-pad combo truly shines. Officers on patrol use Agency Phone for radio communications, running quick plate checks via a simple command, and receiving dispatch notifications. When they arrive at the station or need to do detailed work, they pull out Agency Pad to access the full MDT with suspect profiles, case files, warrant management, and evidence tracking. EMS players use the phone for incoming emergency calls and the pad for patient records and hospital management. This split mirrors how real-world first responders operate: a radio and phone for field communication, a laptop or tablet for detailed data entry. The workflow feels natural and keeps roleplay immersive because players physically switch between devices depending on their current task.
Use Case: Business and Economy Servers
For servers with deep economy systems, the pad becomes an essential business management tool. Restaurant owners use Agency Phone to take customer orders via quick text messages and receive delivery notifications, while Agency Pad serves as their point-of-sale system, inventory tracker, and financial dashboard. Car dealership operators browse their vehicle inventory on the pad's large grid view, complete with photos, pricing, and stock levels, then switch to the phone to call potential buyers. Real estate agents check property listings on the pad's map interface and schedule viewings through the phone's calendar. The pattern is consistent: the phone handles communication and quick lookups, while the pad handles anything that benefits from a larger viewport and more complex UI elements.
Building Apps That Work on Both Devices
If you are developing custom apps, the best approach is a responsive design that adapts to whichever device loads it. Use CSS container queries or simple class-based styling to adjust layouts based on the active device. Keep your core logic in shared JavaScript modules and only branch the UI layer. Here is a practical example of a responsive app component that adjusts its grid layout based on the device context:
/* styles.css - Responsive app layout */
.app-grid {
display: grid;
gap: 0.75rem;
padding: 1rem;
}
.device-phone .app-grid {
grid-template-columns: 1fr;
font-size: 0.875rem;
}
.device-pad .app-grid {
grid-template-columns: repeat(3, 1fr);
font-size: 1rem;
}
.device-phone .detail-panel {
display: none; /* Hide detail panel on phone */
}
.device-pad .detail-panel {
display: block;
border-left: 1px solid rgba(255,255,255,0.1);
padding-left: 1rem;
}
/* Phone: stack navigation vertically */
.device-phone .app-nav {
display: flex;
overflow-x: auto;
white-space: nowrap;
}
/* Pad: sidebar navigation */
.device-pad .app-nav {
display: flex;
flex-direction: column;
width: 200px;
}
Which One Should You Buy for Your Server?
If you are running a general-purpose roleplay server and can only pick one, start with Agency Phone. It covers the most common player interactions and every server needs a solid phone system. Add Agency Pad later when your server grows into more complex systems like MDTs, business management, or admin tools. If you are building a serious law enforcement or economy-focused server from the start, get both. The combined experience is significantly more immersive than trying to force everything into a single device. Both products receive regular updates and share the same plugin API, so any investment you make in custom app development carries over seamlessly between the two devices. Check our store for bundle pricing if you decide to grab both.