diff --git a/app/src/atoms/SoftwareKeyboard/CustomKeyboard.stories.tsx b/app/src/atoms/SoftwareKeyboard/CustomKeyboard/CustomKeyboard.stories.tsx
similarity index 86%
rename from app/src/atoms/SoftwareKeyboard/CustomKeyboard.stories.tsx
rename to app/src/atoms/SoftwareKeyboard/CustomKeyboard/CustomKeyboard.stories.tsx
index 17d48593cb9..87cbbcb1da9 100644
--- a/app/src/atoms/SoftwareKeyboard/CustomKeyboard.stories.tsx
+++ b/app/src/atoms/SoftwareKeyboard/CustomKeyboard/CustomKeyboard.stories.tsx
@@ -5,13 +5,14 @@ import {
   POSITION_ABSOLUTE,
   SPACING,
 } from '@opentrons/components'
-import { InputField } from '../InputField'
-import { CustomKeyboard } from './'
+import { InputField } from '../../InputField'
+import { CustomKeyboard } from '.'
+import '../../../styles.global.css'
 
 import type { Story, Meta } from '@storybook/react'
 
 export default {
-  title: 'Odd/Atoms/SoftwareKeyboard/CustomKeyboard',
+  title: 'ODD/Atoms/SoftwareKeyboard/CustomKeyboard',
   component: CustomKeyboard,
 } as Meta
 
diff --git a/app/src/atoms/SoftwareKeyboard/__tests__/CustomKeyboard.test.tsx b/app/src/atoms/SoftwareKeyboard/CustomKeyboard/__tests__/CustomKeyboard.test.tsx
similarity index 99%
rename from app/src/atoms/SoftwareKeyboard/__tests__/CustomKeyboard.test.tsx
rename to app/src/atoms/SoftwareKeyboard/CustomKeyboard/__tests__/CustomKeyboard.test.tsx
index fc8e8952506..245a091b3aa 100644
--- a/app/src/atoms/SoftwareKeyboard/__tests__/CustomKeyboard.test.tsx
+++ b/app/src/atoms/SoftwareKeyboard/CustomKeyboard/__tests__/CustomKeyboard.test.tsx
@@ -84,7 +84,7 @@ describe('CustomKeyboard', () => {
       'J',
       'K',
       'L',
-      'SHIFT',
+      'abc',
       'Z',
       'X',
       'C',
diff --git a/app/src/atoms/SoftwareKeyboard/CustomKeyboard/index.css b/app/src/atoms/SoftwareKeyboard/CustomKeyboard/index.css
new file mode 100644
index 00000000000..1a8090ed878
--- /dev/null
+++ b/app/src/atoms/SoftwareKeyboard/CustomKeyboard/index.css
@@ -0,0 +1,33 @@
+/* stylelint-disable */
+
+.simple-keyboard.oddTheme1.hg-theme-default {
+  width: 100%;
+  height: 100%;
+  background-color: #d0d0d0;
+  font-family: 'Public Sans', sans-serif;
+  padding: 8px;
+  font-size: 28px;
+}
+
+.simple-keyboard.oddTheme1
+  .hg-row:not(:last-child)
+  .hg-button:not(:last-child) {
+  margin-right: 8px;
+  margin-bottom: 3px;
+}
+
+.simple-keyboard.simple-keyboard.oddTheme1 .hg-button {
+  height: 48px;
+}
+
+.simple-keyboard .hg-button:active {
+  color: #16212d;
+  background-color: #e3e3e3;
+}
+
+/* Numeric keyboard in custom keyboard */
+.hg-layout-numbers button.hg-button.hg-button-backspace,
+.hg-layout-numbers button.hg-button.hg-button-abc,
+.hg-layout-numbers button.hg-button.hg-standardBtn {
+  flex: 1;
+}
diff --git a/app/src/atoms/SoftwareKeyboard/CustomKeyboard.tsx b/app/src/atoms/SoftwareKeyboard/CustomKeyboard/index.tsx
similarity index 94%
rename from app/src/atoms/SoftwareKeyboard/CustomKeyboard.tsx
rename to app/src/atoms/SoftwareKeyboard/CustomKeyboard/index.tsx
index 4e1885b6e11..ddf9215a874 100644
--- a/app/src/atoms/SoftwareKeyboard/CustomKeyboard.tsx
+++ b/app/src/atoms/SoftwareKeyboard/CustomKeyboard/index.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
 import Keyboard from 'react-simple-keyboard'
-import { customDisplay } from './constants'
+import { customDisplay } from '../constants'
 
 interface CustomKeyboardProps {
   onChange: (input: string) => void
@@ -17,7 +17,7 @@ const customLayout = {
   shift: [
     'Q W E R T Y U I O P',
     'A S D F G H J K L',
-    '{shift} Z X C V B N M {backspace}',
+    '{abc} Z X C V B N M {backspace}',
     '{numbers}',
   ],
   numbers: ['1 2 3', '4 5 6', '7 8 9', '{abc} 0 {backspace}'],
diff --git a/app/src/atoms/SoftwareKeyboard/NormalKeyboard.stories.tsx b/app/src/atoms/SoftwareKeyboard/NormalKeyboard/NormalKeyboard.stories.tsx
similarity index 86%
rename from app/src/atoms/SoftwareKeyboard/NormalKeyboard.stories.tsx
rename to app/src/atoms/SoftwareKeyboard/NormalKeyboard/NormalKeyboard.stories.tsx
index f2bb1a08a05..d7d62d87d7c 100644
--- a/app/src/atoms/SoftwareKeyboard/NormalKeyboard.stories.tsx
+++ b/app/src/atoms/SoftwareKeyboard/NormalKeyboard/NormalKeyboard.stories.tsx
@@ -5,14 +5,14 @@ import {
   POSITION_ABSOLUTE,
   SPACING,
 } from '@opentrons/components'
-import { InputField } from '../InputField'
-import { NormalKeyboard } from './'
-import '../../styles.global.css'
+import { InputField } from '../../InputField'
+import { NormalKeyboard } from '.'
+import '../../../styles.global.css'
 
 import type { Story, Meta } from '@storybook/react'
 
 export default {
-  title: 'Odd/Atoms/SoftwareKeyboard/NormalKeyboard',
+  title: 'ODD/Atoms/SoftwareKeyboard/NormalKeyboard',
   component: NormalKeyboard,
 } as Meta
 
diff --git a/app/src/atoms/SoftwareKeyboard/__tests__/NormalKeyboard.test.tsx b/app/src/atoms/SoftwareKeyboard/NormalKeyboard/__tests__/NormalKeyboard.test.tsx
similarity index 99%
rename from app/src/atoms/SoftwareKeyboard/__tests__/NormalKeyboard.test.tsx
rename to app/src/atoms/SoftwareKeyboard/NormalKeyboard/__tests__/NormalKeyboard.test.tsx
index 346d861b240..41cac3e2056 100644
--- a/app/src/atoms/SoftwareKeyboard/__tests__/NormalKeyboard.test.tsx
+++ b/app/src/atoms/SoftwareKeyboard/NormalKeyboard/__tests__/NormalKeyboard.test.tsx
@@ -87,7 +87,7 @@ describe('SoftwareKeyboard', () => {
       'J',
       'K',
       'L',
-      'SHIFT',
+      'abc',
       'Z',
       'X',
       'C',
diff --git a/app/src/atoms/SoftwareKeyboard/index.css b/app/src/atoms/SoftwareKeyboard/NormalKeyboard/index.css
similarity index 92%
rename from app/src/atoms/SoftwareKeyboard/index.css
rename to app/src/atoms/SoftwareKeyboard/NormalKeyboard/index.css
index 2b06d41f48b..4b5c8c256e5 100644
--- a/app/src/atoms/SoftwareKeyboard/index.css
+++ b/app/src/atoms/SoftwareKeyboard/NormalKeyboard/index.css
@@ -13,7 +13,7 @@
   .hg-row:not(:last-child)
   .hg-button:not(:last-child) {
   margin-right: 8px;
-  margin-bottom: 2px;
+  margin-bottom: 3px;
 }
 
 .simple-keyboard.simple-keyboard.oddTheme1 .hg-button {
@@ -21,6 +21,6 @@
 }
 
 .simple-keyboard .hg-button:active {
-  color: white;
+  color: #16212d;
   background-color: #e3e3e3;
 }
diff --git a/app/src/atoms/SoftwareKeyboard/NormalKeyboard.tsx b/app/src/atoms/SoftwareKeyboard/NormalKeyboard/index.tsx
similarity index 95%
rename from app/src/atoms/SoftwareKeyboard/NormalKeyboard.tsx
rename to app/src/atoms/SoftwareKeyboard/NormalKeyboard/index.tsx
index 76b79e99756..dcb02503f00 100644
--- a/app/src/atoms/SoftwareKeyboard/NormalKeyboard.tsx
+++ b/app/src/atoms/SoftwareKeyboard/NormalKeyboard/index.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
 import Keyboard from 'react-simple-keyboard'
-import { customDisplay } from './constants'
+import { customDisplay } from '../constants'
 
 interface NormalKeyboardProps {
   onChange: (input: string) => void
@@ -20,7 +20,7 @@ const customLayout = {
   shift: [
     'Q W E R T Y U I O P',
     '{numbers} A S D F G H J K L',
-    '{shift} Z X C V B N M {backspace}',
+    '{abc} Z X C V B N M {backspace}',
     '{space}',
   ],
   symbols: [
diff --git a/app/src/atoms/SoftwareKeyboard/Numpad.stories.tsx b/app/src/atoms/SoftwareKeyboard/Numpad/Numpad.stories.tsx
similarity index 87%
rename from app/src/atoms/SoftwareKeyboard/Numpad.stories.tsx
rename to app/src/atoms/SoftwareKeyboard/Numpad/Numpad.stories.tsx
index 2e1cd7b094b..576df0a66e4 100644
--- a/app/src/atoms/SoftwareKeyboard/Numpad.stories.tsx
+++ b/app/src/atoms/SoftwareKeyboard/Numpad/Numpad.stories.tsx
@@ -5,13 +5,14 @@ import {
   POSITION_ABSOLUTE,
   SPACING,
 } from '@opentrons/components'
-import { InputField } from '../InputField'
-import { Numpad } from './'
+import { InputField } from '../../InputField'
+import { Numpad } from '.'
+import '../../../styles.global.css'
 
 import type { Story, Meta } from '@storybook/react'
 
 export default {
-  title: 'Odd/Atoms/SoftwareKeyboard/Numpad',
+  title: 'ODD/Atoms/SoftwareKeyboard/Numpad',
   component: Numpad,
 } as Meta
 
diff --git a/app/src/atoms/SoftwareKeyboard/__tests__/Numpad.test.tsx b/app/src/atoms/SoftwareKeyboard/Numpad/__tests__/Numpad.test.tsx
similarity index 97%
rename from app/src/atoms/SoftwareKeyboard/__tests__/Numpad.test.tsx
rename to app/src/atoms/SoftwareKeyboard/Numpad/__tests__/Numpad.test.tsx
index 577ec7ae587..c9c19def25c 100644
--- a/app/src/atoms/SoftwareKeyboard/__tests__/Numpad.test.tsx
+++ b/app/src/atoms/SoftwareKeyboard/Numpad/__tests__/Numpad.test.tsx
@@ -2,7 +2,7 @@ import * as React from 'react'
 import { fireEvent } from '@testing-library/react'
 import { renderHook } from '@testing-library/react-hooks'
 import { renderWithProviders } from '@opentrons/components'
-import { Numpad } from '../'
+import { Numpad } from '..'
 
 const render = (props: React.ComponentProps<typeof Numpad>) => {
   return renderWithProviders(<Numpad {...props} />)[0]
diff --git a/app/src/atoms/SoftwareKeyboard/Numpad/index.css b/app/src/atoms/SoftwareKeyboard/Numpad/index.css
new file mode 100644
index 00000000000..7d832afeb2f
--- /dev/null
+++ b/app/src/atoms/SoftwareKeyboard/Numpad/index.css
@@ -0,0 +1,7 @@
+/* stylelint-disable */
+
+.numpad button.hg-button.hg-button-backspace,
+.numpad button.hg-button.hg-button-abc,
+.numpad button.hg-button.hg-standardBtn {
+  flex: 1;
+}
diff --git a/app/src/atoms/SoftwareKeyboard/Numpad.tsx b/app/src/atoms/SoftwareKeyboard/Numpad/index.tsx
similarity index 94%
rename from app/src/atoms/SoftwareKeyboard/Numpad.tsx
rename to app/src/atoms/SoftwareKeyboard/Numpad/index.tsx
index 64ed306f1b3..445ace45dba 100644
--- a/app/src/atoms/SoftwareKeyboard/Numpad.tsx
+++ b/app/src/atoms/SoftwareKeyboard/Numpad/index.tsx
@@ -22,7 +22,7 @@ export function Numpad({ onChange, keyboardRef }: NumpadProps): JSX.Element {
      */
     <Keyboard
       keyboardRef={r => (keyboardRef.current = r)}
-      theme={'hg-theme-default oddTheme1'}
+      theme={'hg-theme-default oddTheme1 numpad'}
       onChange={onChange}
       layoutName="default"
       display={customDisplay}
diff --git a/app/src/atoms/SoftwareKeyboard/index.ts b/app/src/atoms/SoftwareKeyboard/index.ts
index dc7b999db2d..93ae28749ac 100644
--- a/app/src/atoms/SoftwareKeyboard/index.ts
+++ b/app/src/atoms/SoftwareKeyboard/index.ts
@@ -1,3 +1,3 @@
+export { CustomKeyboard } from './CustomKeyboard'
 export { NormalKeyboard } from './NormalKeyboard'
 export { Numpad } from './Numpad'
-export { CustomKeyboard } from './CustomKeyboard'
diff --git a/app/src/styles.global.css b/app/src/styles.global.css
index 9701c68fa12..9cdcb703387 100644
--- a/app/src/styles.global.css
+++ b/app/src/styles.global.css
@@ -3,4 +3,6 @@
 */
 
 @import '../../node_modules/react-simple-keyboard/build/css/index.css';
-@import './atoms/SoftwareKeyboard/index.css';
+@import './atoms/SoftwareKeyboard/CustomKeyboard/index.css';
+@import './atoms/SoftwareKeyboard/NormalKeyboard/index.css';
+@import './atoms/SoftwareKeyboard/Numpad/index.css';