diff --git a/Public API/Client/Pages/Graph.razor b/Public API/Client/Pages/Graph.razor
new file mode 100644
index 0000000000000000000000000000000000000000..c6b4fd0ccae4cc1a12bf01ebfa92a87b49bc62e8
--- /dev/null
+++ b/Public API/Client/Pages/Graph.razor	
@@ -0,0 +1,48 @@
+@page "/graph"
+@using Public_API.Shared.Models
+@inject HttpClient http
+
+<h3>Graph</h3>
+
+<!-- TODO : List of sensors here-->
+<label for="sensor">Sensor: </label>
+@if (sensors == null)
+{
+    <p><em>Loading...</em></p>
+}
+else
+{
+
+    <select name="sensor" @onchange="@OnSensorSelectChange">
+        <option disabled>Select...</option>
+        @foreach (Sensor s in sensors)
+        {
+            <option value="@s.sensorID">@s.friendlyName</option>
+        }
+    </select>
+}
+
+
+<!-- TODO : Show data for each sensor here -->
+@if (targetSensor != null) {
+    <h3>Sensor Selected: @targetSensor.friendlyName</h3>
+
+    <!-- TODO Graphs here! -->
+
+
+}
+
+@code {
+    private Sensor[] sensors;
+    private Sensor targetSensor;
+
+    protected override async Task OnInitializedAsync()
+    {
+        sensors = await http.GetFromJsonAsync<Sensor[]>("api/GetSensorList");
+    }
+
+    public async Task OnSensorSelectChange(ChangeEventArgs e)
+    {
+        targetSensor = await http.GetFromJsonAsync<Sensor>("api/GetSensorByID/" + e.Value.ToString());
+    }
+}
\ No newline at end of file
diff --git a/Public API/Client/Program.cs b/Public API/Client/Program.cs
index debf15172e81a22e2560c4dfcca7024998b7bd93..2feb57ac1f78026724d12857aa94fa757234c5c8 100644
--- a/Public API/Client/Program.cs	
+++ b/Public API/Client/Program.cs	
@@ -7,6 +7,9 @@ using System.Collections.Generic;
 using System.Net.Http;
 using System.Text;
 using System.Threading.Tasks;
+using Blazorise;
+using Blazorise.Bootstrap;
+using Blazorise.Icons.FontAwesome;
 
 namespace Public_API.Client
 {
@@ -15,6 +18,19 @@ namespace Public_API.Client
         public static async Task Main(string[] args)
         {
             var builder = WebAssemblyHostBuilder.CreateDefault(args);
+            builder.Services
+                .AddBlazorise(options =>
+                {
+                    options.ChangeTextOnKeyPress = true;
+                })
+                .AddBootstrapProviders()
+                .AddFontAwesomeIcons();
+
+            builder.Services.AddSingleton(new HttpClient
+            {
+                BaseAddress = new Uri(builder.HostEnvironment.BaseAddress)
+            });
+
             builder.RootComponents.Add<App>("app");
 
             builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
diff --git a/Public API/Client/Shared/NavMenu.razor b/Public API/Client/Shared/NavMenu.razor
index 66bb2c34e9342ad7d2883b916be4e0915fe54a65..9a3226a26e09f3b3495345acb429d0d4557dd03f 100644
--- a/Public API/Client/Shared/NavMenu.razor	
+++ b/Public API/Client/Shared/NavMenu.razor	
@@ -12,7 +12,7 @@
                 <span class="oi oi-home" aria-hidden="true"></span> Home
             </NavLink>
         </li>
-        <li class="nav-item px-3">
+        @*        <li class="nav-item px-3">
             <NavLink class="nav-link" href="counter">
                 <span class="oi oi-plus" aria-hidden="true"></span> Counter
             </NavLink>
@@ -21,12 +21,17 @@
             <NavLink class="nav-link" href="fetchdata">
                 <span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
             </NavLink>
-        </li>
+        </li>*@
         <li class="nav-item px-3">
             <NavLink class="nav-link" href="latestdata">
                 <span class="oi oi-list-rich" aria-hidden="true"></span> Latest Data
             </NavLink>
         </li>
+        <li class="nav-item px-3">
+            <NavLink class="nav-link" href="graph">
+                <span class="oi oi-list-rich" aria-hidden="true"></span> Graphs
+            </NavLink>
+        </li>
     </ul>
 </div>
 
diff --git a/Public API/Client/_Imports.razor b/Public API/Client/_Imports.razor
index da845e21f24f6c594369ac4b2d0d121b70ba42a5..4248b66a8f14db41de6f61987c31beb587ef94d0 100644
--- a/Public API/Client/_Imports.razor	
+++ b/Public API/Client/_Imports.razor	
@@ -6,4 +6,4 @@
 @using Microsoft.AspNetCore.Components.WebAssembly.Http
 @using Microsoft.JSInterop
 @using Public_API.Client
-@using Public_API.Client.Shared
+@using Public_API.Client.Shared
\ No newline at end of file
diff --git a/Public API/Client/wwwroot/index.html b/Public API/Client/wwwroot/index.html
index 2f123e54646b00372c2d96d6a62be8fbd8b11a80..8188970755603f7c89f931c1902cb89a32fa2c3c 100644
--- a/Public API/Client/wwwroot/index.html	
+++ b/Public API/Client/wwwroot/index.html	
@@ -6,6 +6,10 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
     <title>Public API</title>
     <base href="/" />
+
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css">
+
     <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
     <link href="css/app.css" rel="stylesheet" />
 </head>
@@ -13,6 +17,10 @@
 <body>
     <app>Loading...</app>
 
+    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
+
     <div id="blazor-error-ui">
         An unhandled error has occurred.
         <a href="" class="reload">Reload</a>
diff --git a/Public API/Client/wwwroot/js/app.js b/Public API/Client/wwwroot/js/app.js
new file mode 100644
index 0000000000000000000000000000000000000000..e4d8cb626e8e1c04aa54607c8eb5019ee024afc6
--- /dev/null
+++ b/Public API/Client/wwwroot/js/app.js	
@@ -0,0 +1,9 @@
+// Form Submit Post AJAX
+$(function () {
+    $('#submit').on('click', function (evt) {
+        evt.preventDefault();
+        $.post('', $('form').serialize(), function () {
+            alert('Posted using jQuery');
+        });
+    });
+});
\ No newline at end of file
diff --git a/Public API/Server/Controllers/APIController.cs b/Public API/Server/Controllers/APIController.cs
index b10ddc880de40c26a4f8149f4a48d2cf543363a5..b74137aad0ffd09c02b9a69fd5fae028d463f097 100644
--- a/Public API/Server/Controllers/APIController.cs	
+++ b/Public API/Server/Controllers/APIController.cs	
@@ -17,13 +17,19 @@ namespace Public_API.Server.Controllers
     public class APIController : ControllerBase
     {
 
-        ApiContext db = new ApiContext();
+        private ApiContext db = new ApiContext();
 
         public Sensor? getSensorByUID(string sensorUID)
         {
             return db.Sensor.Where(s => s.sensorUID.Equals(sensorUID)).FirstOrDefault();
         }
 
+        [HttpGet("GetSensorByID/{sensorID}")]
+        public Sensor? getSensorByID(int sensorID)
+        {
+            return db.Sensor.Where(s => s.sensorID.Equals(sensorID)).FirstOrDefault();
+        }
+
         // TODO Post
         // TODO Auth required
         // GET api/sensor/logValue/...
@@ -68,6 +74,24 @@ namespace Public_API.Server.Controllers
             return new HttpResponseMessage(HttpStatusCode.OK);
         }
 
+        [HttpGet("LatestData")]
+        public IEnumerable<vw_SensorData> GetLatestSensorData()
+        {
+            return db.vw_SensorData.OrderByDescending(d => d.dateTime).Take(100).ToArray();
+        }
+
+        [HttpGet("GetSensorList")]
+        public IEnumerable<Sensor> GetSensors()
+        {
+            return db.Sensor.OrderBy(d => d.friendlyName).ToArray();
+        }
+
+/*        [HttpPost("G")]
+        public ActionResult onGraphPost(String sensor)
+        {
+            //return new RedirectToPageResult("graph", getSensorByID(sensor));
+        }*/
+
 
 
         // DELETE api/<APIController>/5
diff --git a/Public API/Server/Controllers/FrontendController.cs b/Public API/Server/Controllers/FrontendController.cs
index e430fd3584a72ce77c5b4c22e29edd23bebc365c..efc2b7375d648ca8c118cecb1de18cb7c5504cb1 100644
--- a/Public API/Server/Controllers/FrontendController.cs	
+++ b/Public API/Server/Controllers/FrontendController.cs	
@@ -9,16 +9,8 @@ using System.Threading.Tasks;
 
 namespace Public_API.Server.Controllers
 {
-    [ApiController]
     [Route("[controller]")]
-    public class FrontendController : Controller
-    {
-        private ApiContext db = new ApiContext();
-
-        [HttpGet("LatestData")]
-        public IEnumerable<vw_SensorData> Get()
-        {
-            return db.vw_SensorData.OrderByDescending(d => d.dateTime).Take(100).ToArray();
-        }
-    }
+    [ApiController]
+    public class FrontendController : ControllerBase
+    {    }
 }
diff --git a/Public API/Server/Public_API.Server.csproj b/Public API/Server/Public_API.Server.csproj
index de0ea30ad305541f9a9fdf403d82f4a74354fbed..2f5b2c877493b84f080a70ced2e72f3767570635 100644
--- a/Public API/Server/Public_API.Server.csproj	
+++ b/Public API/Server/Public_API.Server.csproj	
@@ -7,6 +7,7 @@
   </PropertyGroup>
 
   <ItemGroup>
+    <PackageReference Include="Blazorise.Bootstrap" Version="0.9.5.4" />
     <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.Server" Version="3.2.1" />
     <PackageReference Include="Microsoft.Bcl.AsyncInterfaces" Version="5.0.0" />
     <PackageReference Include="Microsoft.EntityFrameworkCore" Version="3.1.20" />