diff --git a/packages/extension-ui/src/components/InputFileWithLabel.tsx b/packages/extension-ui/src/components/InputFileWithLabel.tsx
index 53a6771e..d04f04aa 100644
--- a/packages/extension-ui/src/components/InputFileWithLabel.tsx
+++ b/packages/extension-ui/src/components/InputFileWithLabel.tsx
@@ -2,6 +2,8 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
+import { ThemeProps } from '../types';
+
 import React, { useCallback, useState, createRef } from 'react';
 import Dropzone, { DropzoneRef } from 'react-dropzone';
 import styled from 'styled-components';
@@ -15,7 +17,7 @@ function classes (...classNames: (boolean | null | string | undefined)[]): strin
     .join(' ');
 }
 
-export interface InputFileProps {
+export interface InputFileProps extends ThemeProps {
   // Reference Example Usage: https://github.com/react-dropzone/react-dropzone/tree/master/examples/Accept
   // i.e. MIME types: 'application/json, text/plain', or '.json, .txt'
   className?: string;
@@ -121,21 +123,17 @@ function InputFile ({ accept, className = '', clearContent, convertHex, isDisabl
     : dropZone;
 }
 
-export default React.memo(styled(InputFile)`
-  border: 1px solid rgb(67, 68, 75);
-  background: rgb(17, 18, 24);
-  border-radius: 0.28571429rem;
+export default React.memo(styled(InputFile)(({ isError, theme }: InputFileProps) => `
+  border: 1px solid ${isError ? theme.errorBorderColor : theme.inputBorderColor};
+  background: ${theme.inputBackground};
+  border-radius: ${theme.borderRadius};
+  color: ${isError ? theme.errorBorderColor : theme.textColor};
   font-size: 1rem;
   margin: 0.25rem 0;
-  color: rgb(255, 255, 255);
-  padding: 0.5rem 0.75rem;
   overflow-wrap: anywhere;
-
-  &.error {
-    border-color: rgb(126, 53, 48);
-  }
+  padding: 0.5rem 0.75rem;
 
   &:hover {
     cursor: pointer;
   }
-`);
+`));
diff --git a/packages/extension-ui/src/components/TextInputs.ts b/packages/extension-ui/src/components/TextInputs.ts
index 29d27004..669f53e4 100644
--- a/packages/extension-ui/src/components/TextInputs.ts
+++ b/packages/extension-ui/src/components/TextInputs.ts
@@ -6,43 +6,33 @@ import { ThemeProps } from '../types';
 
 import styled, { css } from 'styled-components';
 
-interface Props {
+interface Props extends ThemeProps {
   withError?: boolean;
 }
 
-const DefaultTextInputColors = css`
-  background: ${({ theme }: ThemeProps): string => theme.inputBackground};
-  border-color: ${({ theme }: ThemeProps): string => theme.inputBorderColor};
-  color: ${({ theme }: ThemeProps): string => theme.textColor};
-`;
-
-const ErroredTextInputColors = css`
-  background: ${({ theme }: ThemeProps): string => theme.inputBackground};
-  border-color: ${({ theme }: ThemeProps): string => theme.errorBorderColor};
-  color: ${({ theme }: ThemeProps): string => theme.errorColor};
-`;
-
-const TextInput = css<Props>`
-  border-radius: ${({ theme }: ThemeProps): string => theme.borderRadius};
-  border: ${({ theme }: ThemeProps): string => `1px solid ${theme.inputBorderColor}`};
-  outline: none;
+const TextInput = css(({ theme, withError }: Props) => `
+  background: ${theme.inputBackground};
+  border-color: ${withError ? theme.errorBorderColor : theme.inputBorderColor};
+  border-radius: ${theme.borderRadius};
+  border: 1px solid ${theme.inputBorderColor};
   box-sizing: border-box;
+  color: ${withError ? theme.errorColor : theme.textColor};
   display: block;
-  font-family: ${({ theme }: ThemeProps): string => theme.fontFamily};
-  font-size: ${({ theme }: ThemeProps): string => theme.fontSize};
+  font-family: ${theme.fontFamily};
+  font-size: ${theme.fontSize};
   font-weight: 600;
   height: 40px;
+  outline: none;
   padding: 0.5rem 0.75rem;
   resize: none;
   width: 100%;
-  ${({ withError }): typeof ErroredTextInputColors => (withError ? ErroredTextInputColors : DefaultTextInputColors)};
 
   &:read-only {
-    background: ${({ theme }: ThemeProps): string => theme.readonlyInputBackground};
+    background: ${theme.readonlyInputBackground};
     box-shadow: none;
     outline: none;
   }
-`;
+`);
 
 export const TextArea = styled.textarea<Props>`${TextInput}`;
 export const Input = styled.input<Props>`${TextInput}`;