diff --git a/grid_form.scss b/grid_form.scss
new file mode 100644
index 0000000..ec48f79
--- /dev/null
+++ b/grid_form.scss
@@ -0,0 +1,108 @@
+// form component as a grid
+.form_grid {
+  display: grid;
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+  row-gap: 1.5rem;
+  column-gap: 1rem;
+}
+
+// size up to 12 columns on small or bigger devices
+@media (min-width: 640px) {
+  .form_grid {
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+  }
+}
+
+.form_heading {
+  font-size: 1.875rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  text-align: center;
+  font-weight: bold;
+  color: #374151;
+  border-bottom: 2px solid #374151;
+  margin-bottom: 2rem;
+  grid-column: span 12;
+}
+
+.form_label {
+		font-family: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    text-align: left;
+    color: #4a5568;
+    font-size: 1rem;
+    font-weight: bold;
+    margin-left: 0.5rem;
+    margin-bottom: 0.25rem;
+    display: inline;
+}
+
+.form_input {
+    display: block;
+    width: 100%;
+    background-color: #f7fafc;
+    border-width: 2px;
+    border-color: #e2e8f0;
+    border-style: solid;
+    color: #4a5568;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    border-radius: 0.375rem;
+    line-height: 1.25;
+    outline: none;
+}
+.form_input:focus {
+    background-color: #ffffff;
+    border-color: #90cdf4;
+}
+.form_input_invalid {
+    border: 2px solid #EF4444;
+    background-color: #ffd4d4;
+}
+
+.form_submit {
+    display: block;
+		outline: none;
+		border: none;
+    /* width: 100%; */
+    border-radius: 1rem;
+    background-color: #0477d6;
+    color: #fff;
+    font-weight: bold;
+    cursor: pointer;
+		margin: 0 auto;
+    padding: 0.75rem 1.25rem;
+		font-size: 1rem;
+    appearance: none;
+		min-height: 40px;
+}
+.form_submit:hover {
+    background-color: #005fb3;
+}
+
+
+// column widths
+.w-full {
+		grid-column: 1 / -1;
+} 
+.w-12 {
+		grid-column: span 12 / span 12;
+}
+.w-6 {
+	  grid-column: span 6 / span 6;
+}
+.w-4 {
+	  grid-column: span 4 / span 4;
+}
+.w-3 {
+	  grid-column: span 3 / span 3;
+}
+.w-2 {
+	  grid-column: span 2 / span 2;
+}
+.w-1 {
+	  grid-column: span 1 / span 1;
+}
diff --git a/src/styles/tw_grid.rs b/src/styles/grid_form.rs
similarity index 76%
rename from src/styles/tw_grid.rs
rename to src/styles/grid_form.rs
index afadf76..5f6a747 100644
--- a/src/styles/tw_grid.rs
+++ b/src/styles/grid_form.rs
@@ -6,20 +6,20 @@ use crate::controls::{
 use leptos::*;
 use leptos_router::Form;
 
-pub enum TailwindGridStylingAttributes {
+pub enum GridFormStylingAttributes {
     Width(u32),
 }
 
 #[derive(Clone, Copy, Debug, Default, Hash, PartialEq, Eq, PartialOrd, Ord)]
-pub struct TailwindGridFormStyle;
+pub struct GridFormStyle;
 
-impl FormStyle for TailwindGridFormStyle {
-    type StylingAttributes = TailwindGridStylingAttributes;
+impl FormStyle for GridFormStyle {
+    type StylingAttributes = GridFormStylingAttributes;
 
     // TODO: something about an on-submit thing
     fn form_frame(&self, children: View) -> View {
         view! {
-            <Form action="">
+            <Form action="" class="form_grid">
                 {children}
             </Form>
         }
@@ -28,7 +28,7 @@ impl FormStyle for TailwindGridFormStyle {
 
     fn heading(&self, control: ControlRenderData<Self, HeadingData>) -> View {
         view! {
-            <h2 class="text-xl py-2 text-center font-bold text-gray-700 border-b-2 border-gray-800/60 mb-8">
+            <h2 class="form_heading">
                 {&control.data.title}
             </h2>
         }
@@ -45,16 +45,13 @@ impl FormStyle for TailwindGridFormStyle {
         view! {
             <div>
                 <div>
-                <label
-                    for={&control.data.name}
-                    class="block uppercase tracking-wide text-left text-gray-700 text-md font-bold ml-2 mb-1 inline"
-                >
+                <label for={&control.data.name} class="form_label">
                     {control.data.label.as_ref()}
                 </label>
                 <span class="inline pl-2 text-red-600">
                     {move || format!("{}", validation_state.get().err().unwrap_or_default())}
                 </span>
-                </div> 
+                </div>
             <input
                 // TODO:
                 type=control.data.input_type
@@ -65,10 +62,12 @@ impl FormStyle for TailwindGridFormStyle {
                 on:change=move |ev| {
                     value_setter(event_target_value(&ev));
                 }
-                class="block w-full bg-gray-100 border-2 border-gray-300 text-gray-700 py-2 px-4 rounded-lg leading-tight focus:outline-none focus:bg-white focus:border-sky-400"
+                class="form_input"
+                class=("form_input_invalid", move || validation_state.get().is_err())
             />
             </div>
-        }.into_view()
+        }
+        .into_view()
     }
 
     fn select(
@@ -102,7 +101,7 @@ impl FormStyle for TailwindGridFormStyle {
             <select
                 id=&control.data.name
                 name=control.data.name
-                class="block w-full bg-gray-100 border-2 border-gray-300 text-gray-700 py-2 px-4 rounded-lg leading-tight focus:outline-none focus:bg-white focus:border-sky-400"
+                class="form_input"
                 on:change=move |ev| {
                     value_setter(event_target_value(&ev));
                 }
@@ -110,7 +109,8 @@ impl FormStyle for TailwindGridFormStyle {
                 {options_view}
             </select>
             </div>
-        }.into_view()
+        }
+        .into_view()
     }
 
     fn submit(&self, control: ControlRenderData<Self, SubmitData>) -> View {
@@ -118,7 +118,7 @@ impl FormStyle for TailwindGridFormStyle {
             <input
                 type="submit"
                 value=control.data.text
-                class="col-span-full rounded-2xl bg-sky-700 text-white font-bold hover:cursor-pointer hover:bg-sky-600 px-5 py-3 mx-auto mt-4"
+                class="w-full form_submit"
             />
         }
         .into_view()
@@ -138,14 +138,15 @@ impl FormStyle for TailwindGridFormStyle {
                 id=&control.data.name
                 name=control.data.name
                 placeholder=control.data.placeholder
-                class="block w-full bg-gray-100 border-2 border-gray-300 text-gray-700 py-2 px-4 rounded-lg leading-tight focus:outline-none focus:bg-white focus:border-sky-400"
+                class="form_input"
                 prop:value=move || value_getter.get()
                 on:change=move |ev| {
                     value_setter(event_target_value(&ev));
                 }
             />
             </div>
-        }.into_view()
+        }
+        .into_view()
     }
 
     fn custom_component(&self, view: View) -> View {
diff --git a/src/styles/mod.rs b/src/styles/mod.rs
index dda4d0e..8fbeadb 100644
--- a/src/styles/mod.rs
+++ b/src/styles/mod.rs
@@ -1,6 +1,5 @@
-mod tw_grid;
-
-pub use tw_grid::{TailwindGridFormStyle, TailwindGridStylingAttributes};
+mod grid_form;
+pub use grid_form::{GridFormStyle, GridFormStylingAttributes};
 
 use crate::controls::{
     heading::HeadingData, select::SelectData, submit::SubmitData, text_area::TextAreaData,