diff --git a/src/assets/images/icon-date.svg b/src/assets/images/icon-date.svg
new file mode 100644
index 0000000..0c319b9
--- /dev/null
+++ b/src/assets/images/icon-date.svg
@@ -0,0 +1,3 @@
+<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7 3V5H12V3H13V5H16C17.1046 5 18 5.89543 18 7V20C18 21.1046 17.1046 22 16 22H2C0.89543 22 0 21.1046 0 20V7C0 5.89543 0.895431 5 2 5H6V3H7ZM12 6V7H13V6H16C16.5523 6 17 6.44772 17 7V20C17 20.5523 16.5523 21 16 21H2C1.44772 21 1 20.5523 1 20V7C1 6.44772 1.44772 6 2 6H6V7H7V6H12ZM4 10H6V12H4V10ZM8 10H10V12H8V10ZM14 12V10H12V12H14ZM4 16H6V18H4V16ZM10 16H8V18H10V16ZM12 18V16H14V18H12Z" fill="#AAAAAA"/>
+</svg>
diff --git a/src/assets/images/icon-time.svg b/src/assets/images/icon-time.svg
new file mode 100644
index 0000000..641272f
--- /dev/null
+++ b/src/assets/images/icon-time.svg
@@ -0,0 +1,4 @@
+<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path opacity="0.3" fill-rule="evenodd" clip-rule="evenodd" d="M8.5 20C12.6421 20 16 16.6421 16 12.5C16 8.35786 12.6421 5 8.5 5C4.35786 5 1 8.35786 1 12.5C1 16.6421 4.35786 20 8.5 20ZM8.5 21C13.1944 21 17 17.1944 17 12.5C17 7.80558 13.1944 4 8.5 4C3.80558 4 0 7.80558 0 12.5C0 17.1944 3.80558 21 8.5 21Z" fill="black"/>
+<path opacity="0.4" fill-rule="evenodd" clip-rule="evenodd" d="M8.5 7.78571C8.89449 7.78571 9.21428 8.10551 9.21428 8.5V12.6759L12.9704 15.9624C13.2672 16.2222 13.2973 16.6735 13.0376 16.9704C12.7778 17.2672 12.3265 17.2973 12.0296 17.0376L7.78571 13.3241V8.5C7.78571 8.10551 8.10551 7.78571 8.5 7.78571Z" fill="black"/>
+</svg>
diff --git a/src/pages/components/CertificateInputFields.js b/src/pages/components/CertificateInputFields.js
index ec113ce..431a2df 100644
--- a/src/pages/components/CertificateInputFields.js
+++ b/src/pages/components/CertificateInputFields.js
@@ -1,9 +1,24 @@
-import React from 'react'
+import React, { useState } from 'react'
 import styled from 'styled-components'
 
 import CertificateTimeInterval from './CertificateTimeInterval'
+import InputFieldDate from './InputFieldDate'
+import InputFieldTime from './InputFieldTime'
+// TODO: Import energy usage and bash size
 
 export default function CertificateInputFields() {
+  const [sdVal, setSdVal] = useState('2024-01-01')
+  const [stVal, setStVal] = useState('00:00')
+  const [edVal, setEdVal] = useState('2024-01-01')
+  const [etVal, setEtVal] = useState('23:55')
+  // TODO: Add: enVal, setEnVal & szVal, setSzVal
+
+  const handleSdChgeVal = (e) => setSdVal(e.target.value)
+  const handleStChgeVal = (e) => setStVal(e.target.value)
+  const handleEdChgeVal = (e) => setEdVal(e.target.value)
+  const handleEtChgeVal = (e) => setEtVal(e.target.value)
+  // TODO: Add handleEnChgeVal & handleSzChgeVal
+
   return (
     <>
       <MarginedDiv>
@@ -13,19 +28,48 @@ export default function CertificateInputFields() {
               <GrowingDiv>
                 <InputHeadingDiv>Start timestamp of energy use</InputHeadingDiv>
                 <InputWrapLeftDiv>
-                  <InputHalfWrap>StartDate</InputHalfWrap>
-                  <InputHalfWrap>StartTime</InputHalfWrap>
+                  <InputHalfWrap>
+                    <InputFieldDate
+                      val={sdVal}
+                      onChangeVal={handleSdChgeVal}
+                      name="sd"
+                      id="sd"
+                    />
+                  </InputHalfWrap>
+                  <InputHalfWrap>
+                    <InputFieldTime
+                      val={stVal}
+                      onChangeVal={handleStChgeVal}
+                      name="st"
+                      id="st"
+                    />
+                  </InputHalfWrap>
                 </InputWrapLeftDiv>
               </GrowingDiv>
               <CertificateTimeInterval
-                sTimestamp={'2024-01-01 00:00:00'}
-                eTimestamp={'2024-01-01 23:59:59'}
+                // sTimestamp={'2024-01-01 00:00:00'} eTimestamp={'2024-02-01 23:59:59'}
+                sTimestamp={`${sdVal} ${stVal}`}
+                eTimestamp={`${edVal} ${etVal}`}
               />
               <GrowingDiv>
                 <InputHeadingDiv>End timestamp of energy use</InputHeadingDiv>
                 <InputWrapRightDiv>
-                  <InputHalfWrap>EndDate</InputHalfWrap>
-                  <InputHalfWrap>EndTime</InputHalfWrap>
+                  <InputHalfWrap>
+                    <InputFieldDate
+                      val={edVal}
+                      onChangeVal={handleEdChgeVal}
+                      name="ed"
+                      id="ed"
+                    />
+                  </InputHalfWrap>
+                  <InputHalfWrap>
+                    <InputFieldTime
+                      val={etVal}
+                      onChangeVal={handleEtChgeVal}
+                      name="et"
+                      id="et"
+                    />
+                  </InputHalfWrap>
                 </InputWrapRightDiv>
               </GrowingDiv>
             </ContainerFlexNoWrapDiv>
@@ -35,7 +79,7 @@ export default function CertificateInputFields() {
               <InputHeadingDiv>Electric energy use</InputHeadingDiv>
               <InputWrapDiv>
                 <InputWrap>
-                  Lore ipsum dolores est sit amen test lore ipsum
+                  InputFieldEnergy ( &lt;InputFieldEnergy /&gt; )
                 </InputWrap>
               </InputWrapDiv>
             </ContainerFullWidthWrapDiv>
@@ -45,7 +89,7 @@ export default function CertificateInputFields() {
               <InputHeadingDiv>H2 batch size</InputHeadingDiv>
               <InputWrapDiv>
                 <InputWrap>
-                  Lore ipsum dolores est sit amen test lore ipsum
+                  InputFieldSize ( &lt;InputFieldSize /&gt; )
                 </InputWrap>
               </InputWrapDiv>
             </ContainerFullWidthWrapDiv>
@@ -130,6 +174,7 @@ const InputWrap = styled.div`
   display: block;
   height: 52px;
   line-height: 52px;
+  // padding-left: 15px;
 
   background: rgba(200, 200, 200, 0.5);
 `
@@ -140,6 +185,7 @@ const InputHalfWrap = styled.div`
   height: 52px;
   line-height: 52px;
   float: left;
+  // padding-left: 15px;
 
   background: rgba(200, 200, 200, 0.5);
 `
diff --git a/src/pages/components/InputFieldDate.js b/src/pages/components/InputFieldDate.js
new file mode 100644
index 0000000..74a3eeb
--- /dev/null
+++ b/src/pages/components/InputFieldDate.js
@@ -0,0 +1,78 @@
+import React from 'react'
+import styled from 'styled-components'
+
+import BgIconDateSVG from '../../assets/images/icon-date.svg'
+
+export default function InputFieldDate({ val, onChangeVal, name, id }) {
+  return (
+    <>
+      <Label htmlFor={id}>
+        <BgDateSpan>&nbsp;</BgDateSpan>Date
+      </Label>
+      {/* <Input defaultValue={defaultVal} type="date" /> */}
+      <Input
+        name={name}
+        id={id}
+        value={val}
+        onChange={(e) => onChangeVal(e)}
+        placeholder="01/01/2024"
+      />
+    </>
+  )
+}
+
+const Label = styled.label`
+  display: flex;
+  width: calc(100% - 15px);
+  height: 26px;
+  line-height: 26px;
+  margin-left: 15px;
+  color: #7b9390;
+  font: 500 14px/26px Roboto;
+`
+
+const BgDateSpan = styled.span`
+  width: 26px;
+  height: 26px;
+  background: transparent url(${BgIconDateSVG}) no-repeat;
+`
+
+const Input = styled.input.attrs({ type: 'date' })`
+  display: flex;
+  width: calc(100% - 15px);
+  height: 26px;
+  font: 500 18px/26px Roboto;
+  color: #aebcbb;
+  margin-left: 15px;
+  background: transparent;
+  outline: 0;
+  border: none;
+  position: relative;
+  &::-webkit-calendar-picker-indicator {
+    position: absolute;
+    top: unset;
+    left: unset;
+    width: 100%;
+    height: 100%;
+    background: transparent;
+    color: transparent;
+  }
+  &::-webkit-inner-spin-button {
+    z-index: 1;
+  }
+  &::-webkit-clear-button {
+    z-index: 1;
+  }
+  &::-webkit-input-placeholder {
+    color: #aebcbb;
+  }
+  &::placeholder {
+    color: #aebcbb;
+  }
+  &:active {
+    color: #000000;
+  }
+  &:hover {
+    color: #000000;
+  }
+`
diff --git a/src/pages/components/InputFieldEnergy.js b/src/pages/components/InputFieldEnergy.js
new file mode 100644
index 0000000..43af07f
--- /dev/null
+++ b/src/pages/components/InputFieldEnergy.js
@@ -0,0 +1,62 @@
+import React from 'react'
+import styled from 'styled-components'
+
+export default function InputFieldEnergy({ val, onChangeVal, name, id }) {
+  return (
+    <>
+      <Label htmlFor={id}>Energy use</Label>
+      {/* <Input defaultValue="0.0 kWh" type="text" /> */}
+
+      <Input
+        name={name}
+        id={id}
+        value={val}
+        onChange={(e) => onChangeVal(e)}
+        placeholder="0.0 kWh"
+        list={`${id}-list`}
+      />
+      <datalist id={`${id}-list`}>
+        {Array.from(Array(2 * 20).keys()).map((e) => {
+          const r = (e + 1) / 2
+          return <option key={e} value={`${r.toFixed(1)} MWh`} />
+        })}
+      </datalist>
+      {/* Styling: https://www.npmjs.com/package/datalist-css */}
+    </>
+  )
+}
+
+const Label = styled.label`
+  display: flex;
+  width: calc(100% - 15px);
+  height: 26px;
+  line-height: 26px;
+  margin-left: 15px;
+  color: #7b9390;
+  font: 500 14px/26px Roboto;
+`
+
+const Input = styled.input`
+  display: flex;
+  width: calc(100% - 15px);
+  height: 26px;
+  font: 500 18px/26px Roboto;
+  color: #aebcbb;
+  margin-left: 15px;
+  background: transparent;
+  outline: 0;
+  border: none;
+  position: relative;
+  &::-webkit-input-placeholder {
+    color: #aebcbb;
+  }
+  &::placeholder {
+    color: #aebcbb;
+  }
+  &:active {
+    color: #000000;
+  }
+  &:hover {
+    color: #000000;
+  }
+`
diff --git a/src/pages/components/InputFieldSize.js b/src/pages/components/InputFieldSize.js
new file mode 100644
index 0000000..f38e9e9
--- /dev/null
+++ b/src/pages/components/InputFieldSize.js
@@ -0,0 +1,62 @@
+import React from 'react'
+import styled from 'styled-components'
+
+export default function InputFieldEnergy({ val, onChangeVal, name, id }) {
+  return (
+    <>
+      <Label htmlFor={id}>H2 batch</Label>
+      {/* <Input defaultValue="0.0 kWh" type="text" /> */}
+
+      <Input
+        name={name}
+        id={id}
+        value={val}
+        onChange={(e) => onChangeVal(e)}
+        placeholder="0.0 kWh"
+        list={`${id}-list`}
+      />
+      <datalist id={`${id}-list`}>
+        {Array.from(Array(2 * 20).keys()).map((e) => {
+          const r = (e + 1) / 2
+          return <option key={e} value={`${r.toFixed(1)} MWh`} />
+        })}
+      </datalist>
+      {/* Styling: https://www.npmjs.com/package/datalist-css */}
+    </>
+  )
+}
+
+const Label = styled.label`
+  display: flex;
+  width: calc(100% - 15px);
+  height: 26px;
+  line-height: 26px;
+  margin-left: 15px;
+  color: #7b9390;
+  font: 500 14px/26px Roboto;
+`
+
+const Input = styled.input`
+  display: flex;
+  width: calc(100% - 15px);
+  height: 26px;
+  font: 500 18px/26px Roboto;
+  color: #aebcbb;
+  margin-left: 15px;
+  background: transparent;
+  outline: 0;
+  border: none;
+  position: relative;
+  &::-webkit-input-placeholder {
+    color: #aebcbb;
+  }
+  &::placeholder {
+    color: #aebcbb;
+  }
+  &:active {
+    color: #000000;
+  }
+  &:hover {
+    color: #000000;
+  }
+`
diff --git a/src/pages/components/InputFieldTime.js b/src/pages/components/InputFieldTime.js
new file mode 100644
index 0000000..49de9f7
--- /dev/null
+++ b/src/pages/components/InputFieldTime.js
@@ -0,0 +1,78 @@
+import React from 'react'
+import styled from 'styled-components'
+
+import BgIconTimeSVG from '../../assets/images/icon-time.svg'
+
+export default function InputFieldTime({ val, onChangeVal, name, id }) {
+  return (
+    <>
+      <Label htmlFor={id}>
+        <BgTimeSpan>&nbsp;</BgTimeSpan>Time
+      </Label>
+      {/* <Input defaultValue="00:00" type="time" /> */}
+      <Input
+        name={name}
+        id={id}
+        value={val}
+        onChange={(e) => onChangeVal(e)}
+        placeholder="00:00"
+      />
+    </>
+  )
+}
+
+const Label = styled.label`
+  display: flex;
+  width: calc(100% - 15px);
+  height: 26px;
+  line-height: 26px;
+  margin-left: 15px;
+  color: #7b9390;
+  font: 500 14px/26px Roboto;
+`
+
+const BgTimeSpan = styled.span`
+  width: 26px;
+  height: 26px;
+  background: transparent url(${BgIconTimeSVG}) no-repeat;
+`
+
+const Input = styled.input.attrs({ type: 'time' })`
+  display: flex;
+  width: calc(100% - 15px);
+  height: 26px;
+  font: 500 18px/26px Roboto;
+  color: #aebcbb;
+  margin-left: 15px;
+  background: transparent;
+  outline: 0;
+  border: none;
+  position: relative;
+  &::-webkit-calendar-picker-indicator {
+    position: absolute;
+    top: unset;
+    left: unset;
+    width: 100%;
+    height: 100%;
+    background: transparent;
+    color: transparent;
+  }
+  &::-webkit-inner-spin-button {
+    z-index: 1;
+  }
+  &::-webkit-clear-button {
+    z-index: 1;
+  }
+  &::-webkit-input-placeholder {
+    color: #aebcbb;
+  }
+  &::placeholder {
+    color: #aebcbb;
+  }
+  &:active {
+    color: #000000;
+  }
+  &:hover {
+    color: #000000;
+  }
+`