diff --git a/RPS.Web/Pages/Backlog/Details.cshtml b/RPS.Web/Pages/Backlog/Details.cshtml
index 65d396d..aeac119 100644
--- a/RPS.Web/Pages/Backlog/Details.cshtml
+++ b/RPS.Web/Pages/Backlog/Details.cshtml
@@ -1,8 +1,37 @@
-@page "/{id:int}/Details"
+@page "/{id:int}/{screen}"
+
+@using RPS.Web.Models.Routing;
 @model RPS.Web.Pages.Backlog.DetailsModel
+
+
+<div>
+    <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3">
+        <h1 class="h2" id="itemTitle">@Model.Item.Title</h1>
+        <div class="btn-toolbar mb-2 mb-md-0">
+            <div class="btn-group mr-2">
+                <a asp-page="Details" asp-route-id="@Model.Item.Id" asp-route-screen="Details" class="btn btn-outline-secondary">Details</a>
+                <a asp-page="Details" asp-route-id="@Model.Item.Id" asp-route-screen="Tasks" class="btn btn-outline-secondary">Tasks</a>
+                <a asp-page="Details" asp-route-id="@Model.Item.Id" asp-route-screen="Chitchat" class="btn btn-outline-secondary">Chitchat</a>
+            </div>
+        </div>
+    </div>
+</div>
+
 @{
-    ViewData["Title"] = "Details";
+    switch (Model.Screen)
+    {
+        case DetailScreenEnum.Details:
+            <partial name="_Details" />
+            break;
+        case DetailScreenEnum.Tasks:
+            <partial name="_Tasks" />
+            break;
+        case DetailScreenEnum.Chitchat:
+            <partial name="_Chitchat" />
+            break;
+    }
 }
 
-<h2>Details</h2>
-
+@section styles {
+    <link href="~/css/detail.css" rel="stylesheet" />
+}
diff --git a/RPS.Web/Pages/Backlog/Details.cshtml.cs b/RPS.Web/Pages/Backlog/Details.cshtml.cs
index 017ef15..4f88842 100644
--- a/RPS.Web/Pages/Backlog/Details.cshtml.cs
+++ b/RPS.Web/Pages/Backlog/Details.cshtml.cs
@@ -6,6 +6,7 @@ using Microsoft.AspNetCore.Mvc;
 using Microsoft.AspNetCore.Mvc.RazorPages;
 using RPS.Core.Models;
 using RPS.Data;
+using RPS.Web.Models.Routing;
 
 namespace RPS.Web.Pages.Backlog
 {
@@ -20,6 +21,9 @@ namespace RPS.Web.Pages.Backlog
 
         public PtItem Item { get; set; }
 
+        [BindProperty(SupportsGet = true)]
+        public DetailScreenEnum Screen { get; set; }
+
 
         public DetailsModel(
             IPtUserRepository rpsUserData,
@@ -39,7 +43,7 @@ namespace RPS.Web.Pages.Backlog
             var users = rpsUserRepo.GetAll();
             var currentUser = users.Single(u => u.Id == CURRENT_USER_ID);
 
-            //ViewBag.screen = DetailScreenEnum.Details;
+            //ViewData.Add("screen", DetailScreenEnum.Details);
             //ViewBag.users = users;
             //ViewBag.currentUser = currentUser;
 
diff --git a/RPS.Web/Pages/Backlog/_Chitchat.cshtml b/RPS.Web/Pages/Backlog/_Chitchat.cshtml
new file mode 100644
index 0000000..2952fb3
--- /dev/null
+++ b/RPS.Web/Pages/Backlog/_Chitchat.cshtml
@@ -0,0 +1 @@
+<h1>Chitchat</h1>
\ No newline at end of file
diff --git a/RPS.Web/Pages/Backlog/_Chitchat.cshtml.cs b/RPS.Web/Pages/Backlog/_Chitchat.cshtml.cs
new file mode 100644
index 0000000..4f46298
--- /dev/null
+++ b/RPS.Web/Pages/Backlog/_Chitchat.cshtml.cs
@@ -0,0 +1,17 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+using Microsoft.AspNetCore.Mvc;
+using Microsoft.AspNetCore.Mvc.RazorPages;
+
+namespace RPS.Web.Pages.Backlog
+{
+    public class _ChitchatModel : PageModel
+    {
+        public void OnGet()
+        {
+
+        }
+    }
+}
\ No newline at end of file
diff --git a/RPS.Web/Pages/Backlog/_Details.cshtml b/RPS.Web/Pages/Backlog/_Details.cshtml
new file mode 100644
index 0000000..b80f771
--- /dev/null
+++ b/RPS.Web/Pages/Backlog/_Details.cshtml
@@ -0,0 +1,2 @@
+
+<h1>Details form</h1>
\ No newline at end of file
diff --git a/RPS.Web/Pages/Backlog/_Details.cshtml.cs b/RPS.Web/Pages/Backlog/_Details.cshtml.cs
new file mode 100644
index 0000000..c1054b8
--- /dev/null
+++ b/RPS.Web/Pages/Backlog/_Details.cshtml.cs
@@ -0,0 +1,17 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+using Microsoft.AspNetCore.Mvc;
+using Microsoft.AspNetCore.Mvc.RazorPages;
+
+namespace RPS.Web.Pages.Backlog
+{
+    public class _DetailsModel : PageModel
+    {
+        public void OnGet()
+        {
+
+        }
+    }
+}
\ No newline at end of file
diff --git a/RPS.Web/Pages/Backlog/_Tasks.cshtml b/RPS.Web/Pages/Backlog/_Tasks.cshtml
new file mode 100644
index 0000000..7ef7b46
--- /dev/null
+++ b/RPS.Web/Pages/Backlog/_Tasks.cshtml
@@ -0,0 +1 @@
+<h1>Tasks</h1>
\ No newline at end of file
diff --git a/RPS.Web/Pages/Backlog/_Tasks.cshtml.cs b/RPS.Web/Pages/Backlog/_Tasks.cshtml.cs
new file mode 100644
index 0000000..71a6ce3
--- /dev/null
+++ b/RPS.Web/Pages/Backlog/_Tasks.cshtml.cs
@@ -0,0 +1,17 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+using Microsoft.AspNetCore.Mvc;
+using Microsoft.AspNetCore.Mvc.RazorPages;
+
+namespace RPS.Web.Pages.Backlog
+{
+    public class _TasksModel : PageModel
+    {
+        public void OnGet()
+        {
+
+        }
+    }
+}
\ No newline at end of file