diff --git a/src/App.vue b/src/App.vue
index 8c7546a..ee1fcb5 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -40,8 +40,42 @@ export default {
+
+.input {
+ background-color: $input-background
+ border-radius: $input-border-radius
+ border-color: $input-border-colour
+ border-width: $input-border-width
+ border-style: solid
+ text-align: center
+ padding: 10px 15px
+ color: $input-text
+ outline: none
+}
+
+input[type="text"] {
+ @extend .input
+}
+
+button {
+ @extend .input
+ font-family: $fonts
+ letter-spacing: $input-letter-spacing
+ font-size: 17px
+}
+
\ No newline at end of file
diff --git a/src/components/WebsocketURL.vue b/src/components/WebsocketURL.vue
index 6d0b49d..11e4484 100644
--- a/src/components/WebsocketURL.vue
+++ b/src/components/WebsocketURL.vue
@@ -38,14 +38,32 @@ export default {
+
\ No newline at end of file
diff --git a/src/theme.styl b/src/theme.styl
new file mode 100644
index 0000000..455a6c8
--- /dev/null
+++ b/src/theme.styl
@@ -0,0 +1,23 @@
+/* Import all the fonts and whatnot */
+@import url('https://fonts.googleapis.com/css2?family=Germania+One&display=swap');
+$fonts = 'Germania One', sans-serif
+
+$title-letter-spacing = 2px
+$body-letter-spacing = 1px
+
+$main-background-colour = #23272A
+$main-text-colour = #99AAB5
+
+/* Styling for inputs (not all input types use all values) */
+$input-background = #2C2F33
+$input-background-hover = $input-background
+$input-background-active = $input-background
+$input-text = $main-text-colour
+$input-text-hover = $input-text
+$input-text-active = $input-text
+$input-letter-spacing = 1px
+$input-border-width = 2px
+$input-border-radius = 7px
+$input-border-colour = transparent
+$input-border-colour-hover = transparent
+$input-border-colour-active = transparent
\ No newline at end of file