diff --git a/src/Vegasco-Web/src/app/modules/entries/entries/components/fraction/fraction.component.scss b/src/Vegasco-Web/src/app/modules/entries/entries/components/fraction/fraction.component.scss
new file mode 100644
index 0000000..a8afa0b
--- /dev/null
+++ b/src/Vegasco-Web/src/app/modules/entries/entries/components/fraction/fraction.component.scss
@@ -0,0 +1,11 @@
+.separator {
+ border-bottom-width: 1px;
+ width: 100%
+}
+
+.text-half-size {
+ // Specifically use em here to allow the parent to control the font size
+ // The font size here should be smaller because it is a fraction and would
+ // otherwise look too large
+ font-size: 0.75em;
+}
diff --git a/src/Vegasco-Web/src/app/modules/entries/entries/components/fraction/fraction.component.ts b/src/Vegasco-Web/src/app/modules/entries/entries/components/fraction/fraction.component.ts
new file mode 100644
index 0000000..73fc12f
--- /dev/null
+++ b/src/Vegasco-Web/src/app/modules/entries/entries/components/fraction/fraction.component.ts
@@ -0,0 +1,12 @@
+import { Component, input } from '@angular/core';
+
+@Component({
+ selector: 'app-fraction',
+ imports: [],
+ templateUrl: './fraction.component.html',
+ styleUrl: './fraction.component.scss'
+})
+export class FractionComponent {
+ readonly numerator = input.required();
+ readonly denominator = input.required();
+}
diff --git a/src/Vegasco-Web/src/app/modules/entries/entries/entries.component.html b/src/Vegasco-Web/src/app/modules/entries/entries/entries.component.html
new file mode 100644
index 0000000..2a359cc
--- /dev/null
+++ b/src/Vegasco-Web/src/app/modules/entries/entries/entries.component.html
@@ -0,0 +1,43 @@
+
+
+