diff --git a/src/app.rs b/src/app.rs
index f6eb0c2..a9e3785 100644
--- a/src/app.rs
+++ b/src/app.rs
@@ -5,7 +5,11 @@ use leptos_router::{
     StaticSegment,
 };
 
-use crate::pages::{AboutPage, HomePage, ProviderEntry};
+use crate::pages::{
+    AboutPage,
+    HomePage,
+    ProviderEntry
+};
 
 pub fn shell(options: LeptosOptions) -> impl IntoView {
     view! {
diff --git a/src/common/loaner_user.rs b/src/common/loaner_user.rs
new file mode 100644
index 0000000..ce5cd0b
--- /dev/null
+++ b/src/common/loaner_user.rs
@@ -0,0 +1,19 @@
+
+#[derive(Clone)]
+pub struct LoanerUser {
+    pub first_name: String,
+    pub last_name: String,
+    pub email: String,
+    pub has_loan: bool
+}
+
+impl LoanerUser {
+    pub fn new() -> Self {
+        LoanerUser {
+            first_name: "".to_string(),
+            last_name: "".to_string(),
+            email: "".to_string(),
+            has_loan: false
+        }
+    }
+}
diff --git a/src/common/mod.rs b/src/common/mod.rs
new file mode 100644
index 0000000..5fafe7c
--- /dev/null
+++ b/src/common/mod.rs
@@ -0,0 +1,7 @@
+mod loaner_user;
+mod student_info;
+
+pub use self::{
+    loaner_user::*,
+    student_info::*
+};
diff --git a/src/common/student_info.rs b/src/common/student_info.rs
new file mode 100644
index 0000000..a61e51a
--- /dev/null
+++ b/src/common/student_info.rs
@@ -0,0 +1,7 @@
+use serde::{Deserialize, Serialize};
+
+#[derive(Serialize, Deserialize, Debug, Clone)]
+pub struct StudentInfo {
+    pub first_name: String,
+    pub last_name: String,
+}
diff --git a/src/components/text_field.rs b/src/components/text_field.rs
index a0caf3b..ef35c20 100644
--- a/src/components/text_field.rs
+++ b/src/components/text_field.rs
@@ -12,7 +12,7 @@ pub fn OutlinedTextField(
         <label>
             { label }
             <input
-                class="flex-row border-2 m-1.5 p-1.5 rounded-md bg-transparent mt-6 relative transition-all duration-400"
+                class="border-2 m-1.5 p-1.5 rounded-md bg-transparent mt-6 relative transition-all duration-400"
                 class=(["border-red-700"], move || !disabled.get())
                 class=(["border-gray-600", "pointer-events-none"], move || disabled.get())
                 r#type="text"
diff --git a/src/lib.rs b/src/lib.rs
index b630625..7b40348 100644
--- a/src/lib.rs
+++ b/src/lib.rs
@@ -1,6 +1,7 @@
 pub mod app;
 mod components;
 mod pages;
+mod common;
 
 #[cfg(feature = "hydrate")]
 #[wasm_bindgen::prelude::wasm_bindgen]
diff --git a/src/pages/home_page.rs b/src/pages/home_page.rs
index fbfdbcd..aa6b171 100644
--- a/src/pages/home_page.rs
+++ b/src/pages/home_page.rs
@@ -1,17 +1,11 @@
 use crate::components::{ActionButton, OutlinedTextField};
+use crate::common::StudentInfo;
 use leptos::leptos_dom::logging::console_log;
 use leptos::prelude::*;
-use serde::{Deserialize, Serialize};
 
 #[cfg(feature = "ssr")]
 use aws_sdk_dynamodb::{error::ProvideErrorMetadata, types::AttributeValue, Client};
 
-#[derive(Serialize, Deserialize, Debug, Clone)]
-pub struct StudentInfo {
-    first_name: String,
-    last_name: String,
-}
-
 #[server(GetSubmission, endpoint = "/get-submission")]
 pub async fn get_submission(id: String) -> Result<StudentInfo, ServerFnError> {
     let config = aws_config::load_defaults(aws_config::BehaviorVersion::latest()).await;
diff --git a/src/pages/loaner_kiosk/action_selection.rs b/src/pages/loaner_kiosk/action_selection.rs
new file mode 100644
index 0000000..e410575
--- /dev/null
+++ b/src/pages/loaner_kiosk/action_selection.rs
@@ -0,0 +1,8 @@
+//! Contains the action selection component.
+
+use leptos::prelude::*;
+
+#[component]
+pub fn ActionSelection() -> impl IntoView {
+    view! {}
+}
diff --git a/src/pages/loaner_kiosk/loaner_kiosk.rs b/src/pages/loaner_kiosk/loaner_kiosk.rs
new file mode 100644
index 0000000..6bdfdac
--- /dev/null
+++ b/src/pages/loaner_kiosk/loaner_kiosk.rs
@@ -0,0 +1,42 @@
+//! This defines the base component of the Chromebook loaner kiosk application.
+//! There are going to be 3 definitive screens that the users are able to see and use:
+//!  - The username entry screen: users will enter their name and email.
+//!  - The action selection screen: users will be given a choice regarding their loaner status.
+//!  - The completion screen: users will be given a success message should their information save.
+//! Refer to each component's file for more information about how they work.
+
+use leptos::prelude::*;
+use crate::common::LoanerUser;
+use super::{
+    user_entry::UserEntry,
+    action_selection::ActionSelection
+};
+
+/// Used to keep track of the currently displayed controls.
+#[derive(Clone, Copy, PartialEq)]
+pub enum LoanerKioskState {
+    UserEntry,
+    ActionSelection,
+    Complete
+}
+
+/// The base Chromebook loaner kiosk component.
+///
+/// Controls the state of the loaner application and gives a space for the subcomponents to display.
+#[component]
+pub fn LoanerKiosk() -> impl IntoView {
+    let current_state = RwSignal::new(LoanerKioskState::UserEntry);
+    let user = RwSignal::new(LoanerUser::new());
+    
+    view! {
+        <div class="flex w-screen h-screen justify-center items-center">
+            <UserEntry
+                on_submit={move || { current_state.set(LoanerKioskState::ActionSelection); }}
+                user={user}
+                shown={current_state.get() == LoanerKioskState::UserEntry}
+            />
+            <ActionSelection
+            />
+        </div>
+    }
+}
diff --git a/src/pages/loaner_kiosk/mod.rs b/src/pages/loaner_kiosk/mod.rs
new file mode 100644
index 0000000..c599967
--- /dev/null
+++ b/src/pages/loaner_kiosk/mod.rs
@@ -0,0 +1,9 @@
+mod loaner_kiosk;
+mod user_entry;
+mod action_selection;
+
+pub use self::{
+    loaner_kiosk::LoanerKiosk,
+    user_entry::UserEntry,
+    action_selection::ActionSelection,
+};
\ No newline at end of file
diff --git a/src/pages/loaner_kiosk/user_entry.rs b/src/pages/loaner_kiosk/user_entry.rs
new file mode 100644
index 0000000..3771c6e
--- /dev/null
+++ b/src/pages/loaner_kiosk/user_entry.rs
@@ -0,0 +1,66 @@
+//! Contains the user entry component.
+//! It would be preferred if the user was restricted to a real user account. This is the URL:
+//! https://admin.googleapis.com/admin/directory/v1/users?domain=region15.org&projection=BASIC&query=isArchived=false%20isAdmin=false
+//! Once they select this, they can then check in/out the loaners under their account.
+//! That means that the Leptos server will now REQUIRE a user token of some sort, probably
+//! a service account. That's going to be a pain to set up.
+//! For example's sake here, we're just going to take a first name, last name, and email address.
+
+use leptos::leptos_dom::logging::console_log;
+use leptos::prelude::*;
+use crate::common::LoanerUser;
+use crate::components::{ActionButton, OutlinedTextField};
+
+/// The user entry component for the loaner kiosk.
+///
+/// Users are able to input their first name, last name, and email address. In the future, this
+/// component should call out to a server function that allows the application to check if the
+/// information provided is correct. This may be by creating storing a series of user records
+/// or simply querying Google's Admin API to check if the user is valid.
+#[component]
+pub fn UserEntry(
+    /// A callback function used when the control has determined this stage is finished.
+    #[prop()] mut on_submit: impl FnMut() + 'static,
+    /// The global user record.
+    #[prop()] mut user: RwSignal<LoanerUser>,
+    /// Whether this control is shown. Required for use with CSS animations.
+    #[prop()] shown: bool
+) -> impl IntoView {
+    let disabled = RwSignal::new(false);
+    let on_click = move |_| {
+        disabled.set(true);
+        on_submit();
+        console_log("Clicked!");
+        disabled.set(false);
+    };
+
+    view! {
+        <div
+            class="transition-all duration-300 flex flex-col"
+            class=(["opacity-100 delay-300"], shown)
+            class=(["opacity-0"], !shown)
+        >
+            <OutlinedTextField
+                label="First Name".into()
+                placeholder="John".into()
+                disabled={disabled}
+            />
+            <OutlinedTextField
+                label="Last Name".into()
+                placeholder="Smith".into()
+                disabled={disabled}
+            />
+            <OutlinedTextField
+                label="Region 15 Email".into()
+                placeholder="jsmith@region15.org".into()
+                disabled={disabled}
+            />
+            <ActionButton
+                on:click=on_click
+                disabled={disabled}
+            >
+                "Submit"
+            </ActionButton>
+        </div>
+    }
+}
diff --git a/src/pages/mod.rs b/src/pages/mod.rs
index 47a8092..a90f462 100644
--- a/src/pages/mod.rs
+++ b/src/pages/mod.rs
@@ -1,5 +1,6 @@
 mod about_page;
 mod home_page;
 mod provider_entry;
+mod loaner_kiosk;
 
-pub use self::{about_page::*, home_page::*, provider_entry::*};
+pub use self::{about_page::*, home_page::*, provider_entry::*, loaner_kiosk::*};
diff --git a/src/pages/provider_entry.rs b/src/pages/provider_entry.rs
index fa444ab..00b2761 100644
--- a/src/pages/provider_entry.rs
+++ b/src/pages/provider_entry.rs
@@ -1,9 +1,17 @@
 use leptos::prelude::*;
+use crate::components::OutlinedTextField;
 
 #[component]
 pub fn ProviderEntry() -> impl IntoView {
     view! (
         <h1>This is the provider entry page</h1>
         <h2>It would usually have a series of questions that we ask the providers</h2>
+        <div>
+            <OutlinedTextField
+                placeholder = "Testing information...".into()
+                name = "testing_input".into()
+                label = "This is a testing question.".into()
+            />
+        </div>
     )
 }