diff --git a/src/Components/Case/CaseTypePage.js b/src/Components/Case/CaseTypePage.js
index a6e92e4..c8a2db0 100644
--- a/src/Components/Case/CaseTypePage.js
+++ b/src/Components/Case/CaseTypePage.js
@@ -1,318 +1,32 @@
-import { useEffect, useContext, useState, useRef } from "react";
-import { useNavigate } from "react-router-dom";
-import Button from "../../pageElements/Button";
-import Form from "react-bootstrap/Form";
-import Col from "react-bootstrap/Col";
-import Row from "react-bootstrap/Row";
-import TextInput from "../../pageElements/TextInput";
-import Radiogroup from "../../pageElements/Radiogroup";
-import {
-  getFormDataDefaults,
-  getValidatedFormData,
-  handleFormDataChange,
-  isFormDataHasErrors,
-} from "../../Utils/Form";
-import { db } from "../../firebase";
-import * as dJSON from "dirty-json";
-import { useParams } from "react-router-dom";
-import { AppContext } from "../../Hooks/useContext/appContext.js";
-import LoadingSpinner from "../../pageElements/LoadingSpinner";
-import { doc, onSnapshot } from "firebase/firestore";
-import { createCaseAdditionalFields as fields } from "../../Constants/Fields/CreateCaseFields.js";
-import { objectMap } from "../../Utils/Object";
-import { Typeahead } from "react-bootstrap-typeahead";
-import { caseTags } from "../../Constants/Tags/CaseTags";
+import { useState } from "react";
 import "../../styles/casetype-page.scss";
-
-const CaseTypePage = ({ caseData }) => {
-  const { caseId } = useParams();
-  const navigate = useNavigate();
-  const { appState } = useContext(AppContext);
-  const { group } = appState;
-  const [isEditing, setFsEditing] = useState(false);
-  const [subCase, setSubCase] = useState(null);
-  const [isLoading, setIsLoading] = useState(false);
-  const [selectedCaseTags, setSelectedCaseTags] = useState([]);
-  const typeaheadRef = useRef();
-  const appUserId = group ? group.appUserId : null;
-  const [data, setData] = useState(
-    getFormDataDefaults(fields, isEditing ? caseData : undefined)
-  );
-  const [isBusy, setIsBusy] = useState(false);
-
-  const parsedTags = dJSON.parse(JSON.stringify(caseTags));
-
-  const handleNavigate = () => {
-    navigate("/documents");
-  };
-
-  const handleBack = () => {
-    navigate("/cases");
-  };
-
-  function getCase() {
-    const docRef = doc(db, "cases", caseId);
-    const unsub = onSnapshot(docRef, (snapshot) => {
-      if (snapshot.exists() && snapshot.data().ownerId === appUserId) {
-        setSubCase({ ...snapshot.data(), id: snapshot.id });
-      } else {
-        setSubCase(null);
-      }
-    });
-    return unsub;
-  }
-
-  useEffect(getCase, [caseId, appUserId]);
-
-  const handleChangeInput = (e, name) => {
-    const newData = handleFormDataChange(e, name, data, fields);
-    if (newData !== null) {
-      setData(newData);
-    }
-  };
-
-  const setSelectedTag = (item) => {
-    const temp = [...selectedCaseTags, item.tagName];
-    setSelectedCaseTags(temp);
-    console.log("selectedCaseTags", selectedCaseTags);
-  };
-
-  const validateData = () => {
-    const newData = getValidatedFormData(data, fields);
-    const hasErrors = isFormDataHasErrors(newData);
-    setData(newData);
-    return hasErrors ? null : objectMap(({ value }) => value, newData);
-  };
-
-  const handleTagClick = (clickedTag) => {
-    console.log("handleTagClick tag", clickedTag);
-    console.log("selectedCaseTags", selectedCaseTags);
-    const temp = selectedCaseTags;
-    const foo = temp.filter((tag) => {
-      if (tag != clickedTag) return tag;
-    });
-    setSelectedCaseTags(foo);
-  };
-
-  const ButtonContent = () => {
-    return (
-      <div className="details-button-container">
-        <div className="details-button-box">
-          <Button
-            className="secondary-button back-button"
-            labelText="Somewhere"
-          />
-          <div className="upload-button-box">
-            <Button className="p-2 mr-2 primary-button" labelText="Something" />
-          </div>
-        </div>
-      </div>
-    );
-  };
-
-  const radioOptions = [
-    { name: "Plaintiff", label: "Plaintiff", value: "Plaintiff" },
-    { name: "Defendant", label: "Defendant", value: "Defendant" },
-  ];
-
-  if (!group) {
-    return null;
-  }
-
+const CaseTypePage = () => {
+  const [email, setEmail] = useState("");
+  const [contactName, setContactName] = useState("");
   return (
-    <div className="casetype-container">
-      <Form style={{ width: "100%" }}>
-        <Row>
-          <Col className="mb-3">
-            {isEditing ? (
-              <div className="edit-modal-label">Case Type</div>
-            ) : (
-              <></>
-            )}
-            <Typeahead
-              className="flex-grow-1 create-case-taginput"
-              id="case-type-search"
-              labelKey="tagName"
-              options={parsedTags}
-              minLength={1}
-              ref={typeaheadRef}
-              placeholder="Case Type - start typing"
-              onChange={(selected) => {
-                let item = null;
-                for (const currentItem of selected) {
-                  item = { ...currentItem };
-                }
-                setSelectedTag(item);
-                typeaheadRef.current.clear();
-              }}
-            />
-            <div className="case-tag-container">
-              {selectedCaseTags.map((tag, i) => (
-                <div className="tag-container">
-                  <div className="tag-box">
-                    <div
-                      className="tag-ex-box"
-                      onClick={() => handleTagClick(tag)}
-                    >
-                      <div className="tag-ex"> x</div>
-                    </div>
-                    <div className="casetag-name">{tag}</div>
-                  </div>
-                </div>
-              ))}
-            </div>
-          </Col>
-          <Col className="mb-3">
-            {isEditing ? (
-              <div className="edit-modal-label">Position</div>
-            ) : (
-              <></>
-            )}
-          </Col>
-        </Row>
-        <Row>
-          <Col className="mb-3">
-            {isEditing ? (
-              <div className="edit-modal-label">Lead Attorney</div>
-            ) : (
-              <></>
-            )}
-            <TextInput
-              key={"leadAttorneys"}
-              name={"leadAttorneys"}
-              value={data.leadAttorneys.value}
-              error={data.leadAttorneys.error}
-              message={data.leadAttorneys.message}
-              disabled={isBusy}
-              onChange={(e) => handleChangeInput(e, "leadAttorneys")}
-              label={
-                data.leadAttorneys.value.length === 0
-                  ? isEditing
-                    ? caseData.leadAttorneys
-                    : "Lead Attornery(s)"
-                  : ""
-              }
-            />
-          </Col>
-          <Col className="mb-3">
-            {isEditing ? (
-              <div className="edit-modal-label">Billing code</div>
-            ) : (
-              <></>
-            )}
-            <TextInput
-              key={"billingCode"}
-              name={"billingCode"}
-              value={data.billingCode.value}
-              error={data.billingCode.error}
-              message={data.billingCode.message}
-              disabled={isBusy}
-              onChange={(e) => handleChangeInput(e, "billingCode")}
-              label={
-                data.billingCode.value.length === 0
-                  ? isEditing
-                    ? caseData.billingCode
-                    : "Billing Code"
-                  : ""
-              }
-            />
-          </Col>
-        </Row>
-        <Row>
-          <Col className="mb-3">
-            {isEditing ? (
-              <div className="edit-modal-label">Contact Name</div>
-            ) : (
-              <></>
-            )}
-            <TextInput
-              key={"contactName"}
-              name={"contactName"}
-              value={data.contactName.value}
-              error={data.contactName.error}
-              message={data.contactName.message}
-              disabled={isBusy}
-              onChange={(e) => handleChangeInput(e, "contactLastName")}
-              label={
-                data.contactName.value.length === 0
-                  ? isEditing
-                    ? caseData.contactName
-                    : "Contact Name"
-                  : ""
-              }
-            />
-          </Col>
-          <Col className="mb-3">
-            {isEditing ? (
-              <div className="edit-modal-label">Contact email</div>
-            ) : (
-              <></>
-            )}
-            <TextInput
-              key={"contactEmail"}
-              name={"contactEmail"}
-              value={data.contactEmail.value}
-              error={data.contactEmail.error}
-              message={data.contactEmail.message}
-              disabled={isBusy}
-              onChange={(e) => handleChangeInput(e, "contactEmail")}
-              label={
-                data.contactEmail.value.length === 0
-                  ? isEditing
-                    ? caseData.contactEmail
-                    : "Contact Email"
-                  : ""
-              }
-            />
-          </Col>
-        </Row>
-      </Form>
-      <ButtonContent />
+    <div className="type-row">
+      <div className="type-col">
+        <input
+          type="email"
+          className="form-control"
+          id="emailInput"
+          placeholder="Contact Name"
+          value={email}
+          onChange={(e) => setContactName(e.target.value)}
+        ></input>
+      </div>
+      <div className="type-col">
+        <input
+          type="email"
+          className="form-control"
+          id="emailInput"
+          placeholder="Contact Email"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+        ></input>
+      </div>
     </div>
   );
 };
 
 export default CaseTypePage;
-
-/*
-              <Typeahead
-                className="flex-grow-1 create-case-taginput"
-                id="case-type-search"
-                labelKey="tagName"
-                options={parsedTags}
-                minLength={1}
-                ref={typeaheadRef}
-                placeholder="Case Type - start typing"
-                onChange={(selected) => {
-                  let item = null;
-                  for (const currentItem of selected) {
-                    item = { ...currentItem };
-                  }
-                  setSelectedTag(item);
-                  typeaheadRef.current.clear();
-                }}
-              />
-              <div className="case-tag-container">
-                {selectedCaseTags.map((tag, i) => (
-                  <div className="tag-container">
-                    <div className="tag-box">
-                      <div className="tag-ex-box">
-                        <div className="tag-ex"> x</div>
-                      </div>
-                      <div className="casetag-name">{tag}</div>
-                    </div>
-                  </div>
-                ))}
-              </div>
-
-
-
-                               <Radiogroup
-                    title="Client position"
-                    options={radioOptions}
-                    value={data.clientPosition.value}
-                    disabled={isBusy}
-                    onClick={(e) => handleChangeInput(e, "clientPosition")}
-                  />
-  
-              */
diff --git a/src/pageElements/TagSelector.js b/src/pageElements/TagSelector.js
new file mode 100644
index 0000000..79f5751
--- /dev/null
+++ b/src/pageElements/TagSelector.js
@@ -0,0 +1,43 @@
+/*
+              <Typeahead
+                className="flex-grow-1 create-case-taginput"
+                id="case-type-search"
+                labelKey="tagName"
+                options={parsedTags}
+                minLength={1}
+                ref={typeaheadRef}
+                placeholder="Case Type - start typing"
+                onChange={(selected) => {
+                  let item = null;
+                  for (const currentItem of selected) {
+                    item = { ...currentItem };
+                  }
+                  setSelectedTag(item);
+                  typeaheadRef.current.clear();
+                }}
+              />
+              <div className="case-tag-container">
+                {selectedCaseTags.map((tag, i) => (
+                  <div className="tag-container">
+                    <div className="tag-box">
+                      <div className="tag-ex-box">
+                        <div className="tag-ex"> x</div>
+                      </div>
+                      <div className="casetag-name">{tag}</div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+
+
+
+                               <Radiogroup
+                    title="Client position"
+                    options={radioOptions}
+                    value={data.clientPosition.value}
+                    disabled={isBusy}
+                    onClick={(e) => handleChangeInput(e, "clientPosition")}
+                  />
+  
+              */
+             */
\ No newline at end of file
diff --git a/src/styles/casetype-page.scss b/src/styles/casetype-page.scss
index 4386b39..59c2d81 100644
--- a/src/styles/casetype-page.scss
+++ b/src/styles/casetype-page.scss
@@ -1,14 +1,14 @@
-.casetype-container {
-  width: 920px;
+.type-row {
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
+  justify-content: center;
   margin-left: auto;
   margin-right: auto;
-  align-items: center;
 }
 
-.casetype-form {
-  width: 100%;
+.type-col {
+  display: flex;
+  flex-direction: column;
 }
 
 .case-tag-container {