diff --git a/compass/components/Button.tsx b/compass/components/Button.tsx
new file mode 100644
index 0000000..bf6dd55
--- /dev/null
+++ b/compass/components/Button.tsx
@@ -0,0 +1,24 @@
+import { FunctionComponent, ReactNode } from 'react';
+
+type ButtonProps = {
+    children: ReactNode;
+    onClick?: () => void; // make the onClick handler optional
+    type?: "button" | "submit" | "reset"; // specify possible values for type
+    disabled?: boolean;
+};
+
+const Button: FunctionComponent<ButtonProps> = ({ children, type, disabled, onClick }) => {
+    const buttonClassName = `inline-block rounded border ${disabled ? 'bg-gray-400 text-gray-600 cursor-not-allowed' : 'border-purple-600 bg-purple-600 text-white hover:bg-transparent hover:text-purple-600 focus:outline-none focus:ring active:text-purple-500'} px-12 py-3 text-sm font-semibold`;
+    return (
+        <button
+            className={buttonClassName}
+            onClick={onClick}
+            type={type}
+            disabled={disabled}
+        >
+            {children}
+        </button>
+    );
+};
+
+export default Button;
diff --git a/compass/components/Input.tsx b/compass/components/Input.tsx
new file mode 100644
index 0000000..0517a01
--- /dev/null
+++ b/compass/components/Input.tsx
@@ -0,0 +1,34 @@
+import React, { FunctionComponent, InputHTMLAttributes, ReactNode, ChangeEvent } from 'react';
+
+type InputProps = InputHTMLAttributes<HTMLInputElement> & {
+  icon?: ReactNode;
+  title?: ReactNode;
+  type?:ReactNode;
+  placeholder?:ReactNode
+  valid?:boolean;
+  onChange: (event: ChangeEvent<HTMLInputElement>) => void; 
+};
+
+const Input: FunctionComponent<InputProps> = ({ icon, type, title, placeholder, onChange, valid, ...rest }) => {
+  return (
+    <div>
+      <label
+  htmlFor={title}
+  // this class name should be simplified, was just having problems with it
+  className={valid ? "block overflow-hidden rounded-md border border-gray-200 px-3 py-2 shadow-sm focus-within:border-purple-600 focus-within:ring-1 focus-within:ring-purple-600" : "block overflow-hidden rounded-md border border-gray-200 px-3 py-2 shadow-sm focus-within:border-red-600 focus-within:ring-1 focus-within:ring-red-600"}
+>
+  <span className="text-xs font-semibold text-gray-700"> {title} </span>
+
+  <input
+    type={type}
+    id={title}
+    placeholder={placeholder}
+    onChange={onChange}
+    className="mt-1 w-full border-none p-0 focus:border-transparent focus:outline-none focus:ring-0 sm:text-sm"
+  />
+</label>
+</div>
+  );
+};
+
+export default Input;