diff --git a/frontend/app/src/main/java/dk/scheduling/schedulingfrontend/device/CreateDevicePage.kt b/frontend/app/src/main/java/dk/scheduling/schedulingfrontend/device/CreateDevicePage.kt
new file mode 100644
index 00000000..5d12eb69
--- /dev/null
+++ b/frontend/app/src/main/java/dk/scheduling/schedulingfrontend/device/CreateDevicePage.kt
@@ -0,0 +1,128 @@
+package dk.scheduling.schedulingfrontend.device
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.text.KeyboardOptions
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.input.KeyboardType
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.em
+import dk.scheduling.schedulingfrontend.sharedcomponents.FilledButton
+import dk.scheduling.schedulingfrontend.sharedcomponents.OutlinedButton
+import dk.scheduling.schedulingfrontend.sharedcomponents.StandardTextField
+
+@Composable
+fun CreateDevicePage(
+    modifier: Modifier = Modifier,
+    navigateOnValidCreation: () -> Unit,
+    navigateOnCancelCreation: () -> Unit,
+) {
+    var device by remember {
+        mutableStateOf(Device(-1, "", null))
+    }
+
+    var isEffectSet by remember {
+        mutableStateOf(true)
+    }
+    Column(
+        modifier =
+            modifier
+                .fillMaxSize()
+                .padding(all = 50.dp),
+        horizontalAlignment = Alignment.CenterHorizontally,
+        verticalArrangement = Arrangement.Top,
+    ) {
+        Spacer(modifier = Modifier.height(90.dp))
+        Text(
+            text = "Create a Device",
+            fontSize = 7.em,
+            textAlign = TextAlign.Center,
+            color = MaterialTheme.colorScheme.primary,
+            fontWeight = FontWeight(700),
+        )
+    }
+
+    Column(
+        modifier =
+            modifier
+                .fillMaxSize()
+                .padding(all = 50.dp),
+        horizontalAlignment = Alignment.CenterHorizontally,
+        verticalArrangement = Arrangement.Center,
+    ) {
+        StandardTextField(
+            label = "Device Name",
+            value = device.name,
+            onValueChange = { device = Device(device.id, it, device.effect) },
+        )
+
+        Spacer(modifier = Modifier.height(20.dp))
+
+        StandardTextField(
+            label = "Effect (W)",
+            value = if (device.effect != null) device.effect.toString() else "",
+            onValueChange = {
+                var effect: Int? = null
+                if (it == "") {
+                    isEffectSet = false
+                } else {
+                    effect = it.toInt()
+                    isEffectSet = true
+                }
+
+                device = Device(device.id, device.name, effect)
+            },
+            keyboardOptions =
+                KeyboardOptions(
+                    keyboardType = KeyboardType.Number,
+                ),
+            isError = !isEffectSet,
+        )
+
+        Spacer(modifier = Modifier.height(30.dp))
+
+        FilledButton(
+            onClick = {
+                if (createDevice(device)) {
+                    navigateOnValidCreation()
+                }
+            },
+            text = "Create Device",
+        )
+
+        Spacer(modifier = Modifier.height(10.dp))
+
+        OutlinedButton(
+            onClick = {
+                navigateOnCancelCreation()
+            },
+            text = "Cancel",
+        )
+    }
+}
+
+fun createDevice(device: Device): Boolean {
+    // Send info to the server and if all goes well return true otherwise false
+    return false
+}
+
+@Preview(showBackground = true, device = "spec:id=reference_phone,shape=Normal,width=411,height=891,unit=dp,dpi=420")
+@Composable
+fun CreateDevicePagePreview() {
+    CreateDevicePage(navigateOnValidCreation = {}, navigateOnCancelCreation = {})
+}
diff --git a/frontend/app/src/main/java/dk/scheduling/schedulingfrontend/device/Device.kt b/frontend/app/src/main/java/dk/scheduling/schedulingfrontend/device/Device.kt
new file mode 100644
index 00000000..8d3ab185
--- /dev/null
+++ b/frontend/app/src/main/java/dk/scheduling/schedulingfrontend/device/Device.kt
@@ -0,0 +1,7 @@
+package dk.scheduling.schedulingfrontend.device
+
+data class Device(
+    var id: Int,
+    var name: String,
+    var effect: Int?,
+)
diff --git a/frontend/app/src/main/java/dk/scheduling/schedulingfrontend/sharedcomponents/Buttons.kt b/frontend/app/src/main/java/dk/scheduling/schedulingfrontend/sharedcomponents/Buttons.kt
new file mode 100644
index 00000000..e6c61e15
--- /dev/null
+++ b/frontend/app/src/main/java/dk/scheduling/schedulingfrontend/sharedcomponents/Buttons.kt
@@ -0,0 +1,40 @@
+package dk.scheduling.schedulingfrontend.sharedcomponents
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.material3.Button
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+
+@Composable
+fun FilledButton(
+    modifier: Modifier = Modifier,
+    onClick: () -> Unit,
+    text: String,
+) {
+    Column {
+        Button(
+            onClick = onClick,
+            modifier = modifier.fillMaxWidth(),
+        ) {
+            Text(text = text)
+        }
+    }
+}
+
+@Composable
+fun OutlinedButton(
+    modifier: Modifier = Modifier,
+    onClick: () -> Unit,
+    text: String,
+) {
+    Column {
+        androidx.compose.material3.OutlinedButton(
+            onClick = onClick,
+            modifier = modifier.fillMaxWidth(),
+        ) {
+            Text(text = text)
+        }
+    }
+}
diff --git a/frontend/app/src/main/java/dk/scheduling/schedulingfrontend/sharedcomponents/TextFields.kt b/frontend/app/src/main/java/dk/scheduling/schedulingfrontend/sharedcomponents/TextFields.kt
new file mode 100644
index 00000000..62f1e6eb
--- /dev/null
+++ b/frontend/app/src/main/java/dk/scheduling/schedulingfrontend/sharedcomponents/TextFields.kt
@@ -0,0 +1,30 @@
+package dk.scheduling.schedulingfrontend.sharedcomponents
+
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.text.KeyboardOptions
+import androidx.compose.material3.OutlinedTextField
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+
+@Composable
+fun StandardTextField(
+    modifier: Modifier = Modifier,
+    label: String,
+    value: String,
+    onValueChange: (String) -> Unit,
+    keyboardOptions: KeyboardOptions = KeyboardOptions.Default,
+    isError: Boolean = false,
+) {
+    OutlinedTextField(
+        label = { Text(label) },
+        value = value,
+        onValueChange = onValueChange,
+        modifier =
+            modifier
+                .fillMaxWidth(),
+        singleLine = true,
+        keyboardOptions = keyboardOptions,
+        isError = isError,
+    )
+}
diff --git a/frontend/app/src/main/java/dk/scheduling/schedulingfrontend/signuppage/SignUpPage.kt b/frontend/app/src/main/java/dk/scheduling/schedulingfrontend/signuppage/SignUpPage.kt
index 36140af3..3675a06a 100644
--- a/frontend/app/src/main/java/dk/scheduling/schedulingfrontend/signuppage/SignUpPage.kt
+++ b/frontend/app/src/main/java/dk/scheduling/schedulingfrontend/signuppage/SignUpPage.kt
@@ -227,7 +227,7 @@ fun SignUpPagePreviewLightMode() {
 @Preview(showBackground = true, device = "spec:id=reference_phone,shape=Normal,width=411,height=891,unit=dp,dpi=420")
 @Composable
 fun SignUpPagePreviewDarkMode() {
-    SchedulingFrontendTheme(darkTheme = true) {
+    SchedulingFrontendTheme(darkTheme = true, dynamicColor = false) {
         SignUpPage(navigateOnValidSignUp = {}, navigateToLoginPage = {})
     }
 }