diff --git a/QuizExperiment.Admin/Client/Pages/Tests/Client/AnswerSummary.razor b/QuizExperiment.Admin/Client/Pages/Tests/Client/AnswerSummary.razor
new file mode 100644
index 0000000..9e60b56
--- /dev/null
+++ b/QuizExperiment.Admin/Client/Pages/Tests/Client/AnswerSummary.razor
@@ -0,0 +1,37 @@
+@page "/test/client/answersummary"  
+@using QuizModels = QuizExperiment.Models.Client
+@layout QuizExperiment.Admin.Client.Shared.Client.Layout
+
+<QuizExperiment.Admin.Client.Shared.Client.AnswerSummary   MyAnswer="@myAnswer"
+                                                                Question="@question"
+                                                                IsLastQuestion="false"
+                                                                CorrectAnswer="@correctAnswer"
+                                                                CurrentScore="0"
+                                                                Position="1"
+/>
+
+@code {  
+    QuizModels.ClientMultipleChoiceAnswer myAnswer = new QuizModels.ClientMultipleChoiceAnswer
+    {
+        AnswerIndex = 1
+    };
+
+    QuizModels.ClientMultipleChoiceQuestion question = new QuizModels.ClientMultipleChoiceQuestion
+    {
+        Title = "This is a test Question, it goes on a bit, in fact it goes on for ages and ages and ages",
+        ImageUrl = "https://imgur.com/NkMONh3",
+        Options = new List<string>
+        {
+            "Option 1",
+            "Option 2 - This option is really long and will wrap to the next line",
+            "Option 3",
+            "Option 4"
+        },
+    };
+
+    QuizModels.ClientMultipleChoiceAnswer correctAnswer = new QuizModels.ClientMultipleChoiceAnswer
+    {
+        AnswerIndex = 0
+    };
+
+}
\ No newline at end of file
diff --git a/QuizExperiment.Admin/Client/Pages/Tests/Client/JoinQuiz.razor b/QuizExperiment.Admin/Client/Pages/Tests/Client/JoinQuiz.razor
new file mode 100644
index 0000000..b33b8b7
--- /dev/null
+++ b/QuizExperiment.Admin/Client/Pages/Tests/Client/JoinQuiz.razor
@@ -0,0 +1,13 @@
+@page "/test/client/joinquiz"  
+@layout QuizExperiment.Admin.Client.Shared.Client.Layout
+
+<QuizExperiment.Admin.Client.Shared.Client.JoinQuiz OnQuizIdSubmit="@HandleQuizIdSubmit"  />
+
+@code {  
+    private void HandleQuizIdSubmit(string quizId)
+    {
+        // Handle the submitted quiz ID
+        Console.WriteLine($"Quiz ID submitted: {quizId}");
+        // Potentially invoke a method to initiate the quiz based on the quiz ID
+    }
+}
\ No newline at end of file
diff --git a/QuizExperiment.Admin/Client/Pages/Tests/Client/MultipleChoiceQuestion.razor b/QuizExperiment.Admin/Client/Pages/Tests/Client/MultipleChoiceQuestion.razor
new file mode 100644
index 0000000..012b0e2
--- /dev/null
+++ b/QuizExperiment.Admin/Client/Pages/Tests/Client/MultipleChoiceQuestion.razor
@@ -0,0 +1,26 @@
+@page "/test/client/multiplechoice"  
+@using QuizModels = QuizExperiment.Models.Client  
+@layout QuizExperiment.Admin.Client.Shared.Client.Layout
+
+<QuizExperiment.Admin.Client.Shared.Client.SingleAnswerMultiSelectQuestion Question="@_currentQuestion"  
+OnAnswerSubmit="@AnswerQuestion" />  
+
+@code {  
+    private QuizModels.ClientMultipleChoiceQuestion _currentQuestion = new QuizModels.ClientMultipleChoiceQuestion
+    {  
+        Title = "This is a test Question, it goes on a bit, in fact it goes on for ages and ages and ages",  
+        Options = new List<string>
+        {  
+            "Option 1",  
+            "Option 2 - This option is really long and will wrap to the next line",  
+            "Option 3",  
+            "Option 4"  
+        },  
+        ImageUrl = "https://imgur.com/NkMONh3"  
+    };  
+
+    private void AnswerQuestion(QuizModels.ClientAnswer answerIndex)
+    {
+        Console.WriteLine($"User answered: {answerIndex}");  
+    }  
+}
\ No newline at end of file
diff --git a/QuizExperiment.Admin/Client/Pages/Tests/PlayerPositionTest.razor b/QuizExperiment.Admin/Client/Pages/Tests/Client/PlayerPosition.razor
similarity index 70%
rename from QuizExperiment.Admin/Client/Pages/Tests/PlayerPositionTest.razor
rename to QuizExperiment.Admin/Client/Pages/Tests/Client/PlayerPosition.razor
index 10a3a8f..5f872ca 100644
--- a/QuizExperiment.Admin/Client/Pages/Tests/PlayerPositionTest.razor
+++ b/QuizExperiment.Admin/Client/Pages/Tests/Client/PlayerPosition.razor
@@ -1,5 +1,6 @@
-@page "/test/playerposition"
-<PlayerPosition Position="@Position" Score="@Score" />
+@page "/test/client/playerposition"
+@layout QuizExperiment.Admin.Client.Shared.Client.Layout
+<QuizExperiment.Admin.Client.Shared.Client.PlayerPosition Position="@Position" Score="@Score" />
 
 @code {
 
diff --git a/QuizExperiment.Admin/Client/Pages/Tests/Client/TrueFalseQuestion.razor b/QuizExperiment.Admin/Client/Pages/Tests/Client/TrueFalseQuestion.razor
new file mode 100644
index 0000000..79e3513
--- /dev/null
+++ b/QuizExperiment.Admin/Client/Pages/Tests/Client/TrueFalseQuestion.razor
@@ -0,0 +1,19 @@
+@page "/test/client/truefalse"  
+@using QuizModels = QuizExperiment.Models.Client  
+@layout QuizExperiment.Admin.Client.Shared.Client.Layout
+
+<QuizExperiment.Admin.Client.Shared.Client.TrueFalseQuestion Question="@_currentQuestion"  
+OnAnswerSubmit="@AnswerQuestion" />  
+
+@code {  
+    private QuizModels.ClientTrueFalseQuestion _currentQuestion = new QuizModels.ClientTrueFalseQuestion
+    {  
+        Title = "This is a test Question, it goes on a bit, in fact it goes on for ages and ages and ages",    
+        ImageUrl = "https://imgur.com/NkMONh3"  
+    };  
+
+    private void AnswerQuestion(QuizModels.ClientAnswer answerIndex)
+    {
+        Console.WriteLine($"User answered: {answerIndex}");  
+    }  
+}
\ No newline at end of file
diff --git a/QuizExperiment.Admin/Client/Pages/Tests/Client/UserName.razor b/QuizExperiment.Admin/Client/Pages/Tests/Client/UserName.razor
new file mode 100644
index 0000000..4276edd
--- /dev/null
+++ b/QuizExperiment.Admin/Client/Pages/Tests/Client/UserName.razor
@@ -0,0 +1,13 @@
+@page "/test/client/username"  
+@layout QuizExperiment.Admin.Client.Shared.Client.Layout
+
+<QuizExperiment.Admin.Client.Shared.Client.UserName OnUserNameSubmit="HandleUserNameSubmit"  />
+
+@code {  
+    private void HandleUserNameSubmit(string userName)
+    {
+        // Handle the submitted username
+        // Potentially invoke a method to set the username in a service or state
+        Console.WriteLine($"Username submitted: {userName}");
+    }
+}
\ No newline at end of file
diff --git a/QuizExperiment.Admin/Client/Pages/Tests/Client/WaitingForAnswerCheck.razor b/QuizExperiment.Admin/Client/Pages/Tests/Client/WaitingForAnswerCheck.razor
new file mode 100644
index 0000000..b5085e7
--- /dev/null
+++ b/QuizExperiment.Admin/Client/Pages/Tests/Client/WaitingForAnswerCheck.razor
@@ -0,0 +1,7 @@
+@page "/test/client/waitingforanswer"  
+@layout QuizExperiment.Admin.Client.Shared.Client.Layout
+
+<QuizExperiment.Admin.Client.Shared.Client.WaitingForAnswerCheck />
+
+@code {  
+}
\ No newline at end of file
diff --git a/QuizExperiment.Admin/Client/Pages/Tests/Client/WaitingForQuestion.razor b/QuizExperiment.Admin/Client/Pages/Tests/Client/WaitingForQuestion.razor
new file mode 100644
index 0000000..b693b31
--- /dev/null
+++ b/QuizExperiment.Admin/Client/Pages/Tests/Client/WaitingForQuestion.razor
@@ -0,0 +1,7 @@
+@page "/test/client/waitingforquestion"  
+@layout QuizExperiment.Admin.Client.Shared.Client.Layout
+
+<QuizExperiment.Admin.Client.Shared.Client.WaitingForQuestions UserName="Bob" />  
+
+@code {  
+}
\ No newline at end of file
diff --git a/QuizExperiment.Admin/Client/Pages/Tests/SingleAnswerQuestionTest.razor b/QuizExperiment.Admin/Client/Pages/Tests/SingleAnswerQuestionTest.razor
deleted file mode 100644
index b13f46b..0000000
--- a/QuizExperiment.Admin/Client/Pages/Tests/SingleAnswerQuestionTest.razor
+++ /dev/null
@@ -1,26 +0,0 @@
-@* @page "/test/singleanswerquestion"  
-@using QuizExperiment.Models  
-@layout AdminLayout  
-
-<SingleAnswerMultiSelectQuestion Question="@_currentQuestion.Title"  
-PossibleAnswers="@_currentQuestion.Options"   
-OnAnswerSubmit="@AnswerQuestion" />  
-
-@code {  
-    private Question _currentQuestion = new MultipleChoiceQuestion  
-    {  
-        Title = "This is a test Question",  
-        Options = new[]  
-        {  
-            "Option 1",  
-            "Option 2 - This option is really long and will wrap to the next line",  
-            "Option 3",  
-            "Option 4"  
-        },  
-        ImageUrl = "https://imgur.com/NkMONh3"  
-    };  
-
-    private void AnswerQuestion(int answerIndex){  
-        Console.WriteLine($"User answered: {answerIndex}");  
-    }  
-} *@
\ No newline at end of file
diff --git a/QuizExperiment.Admin/Client/Shared/Client/AnswerSummary.razor b/QuizExperiment.Admin/Client/Shared/Client/AnswerSummary.razor
index 631f954..eeaf2aa 100644
--- a/QuizExperiment.Admin/Client/Shared/Client/AnswerSummary.razor
+++ b/QuizExperiment.Admin/Client/Shared/Client/AnswerSummary.razor
@@ -9,28 +9,28 @@
     
     @if (MyAnswer == CorrectAnswer)
     {
-        <div class="my-3 fs-2 fw-bold">Correct!</div>
+        <div class="my-3 fs-2 fw-bold px-3 text-center">Correct!</div>
         <div class="answer-icon answer-correct">
             <span class="oi oi-check" title="icon name" aria-hidden="true"></span>
         </div>
     }
     else
     {
-        
-        <div class="my-3 fs-2 fw-bold">Better luck next time!</div>
-        <div class="my-3 fs-4">The correct answer was @correctAnswerText.</div>
+
+        <div class="my-3 fs-2 fw-bold px-3 text-center">Better luck next time!</div>
+        <div class="my-3 fs-4 px-3 text-center">The correct answer was <strong>@correctAnswerText</strong>.</div>
         <div class="answer-icon answer-wrong">
             <span class="oi oi-x" title="icon name" aria-hidden="true"></span>
         </div>
     }
     @if (!IsLastQuestion)
     {
-        <div class="my-3 fs-4">You are in @Position@(Position.GetSuffix()) place with @CurrentScore points</div>
-        <div class="my-3 fs-4">Another question is on its way!</div>
+        <div class="my-3 fs-4 px-3 text-center">You are in @Position@(Position.GetSuffix()) place with @CurrentScore points</div>
+        <div class="my-3 fs-4 px-3 text-center">Another question is on its way!</div>
     }
     else
     {
-        <div class="my-3 fs-4">That was the last question, check the presenters screen to see how you did!</div>
+        <div class="my-3 fs-4 px-3 text-center">That was the last question, check the presenters screen to see how you did!</div>
     }
 </div>
 
diff --git a/QuizExperiment.Admin/Client/Shared/Client/JoinQuiz.razor b/QuizExperiment.Admin/Client/Shared/Client/JoinQuiz.razor
index bcb82fa..64f6e59 100644
--- a/QuizExperiment.Admin/Client/Shared/Client/JoinQuiz.razor
+++ b/QuizExperiment.Admin/Client/Shared/Client/JoinQuiz.razor
@@ -1,6 +1,6 @@
  <div class="d-flex flex-column min-vh-100 justify-content-center align-items-center">
-     <div class="my-3 fs-2 fw-bold">Join our quiz!</div>
-     <div class="my-3 fs-4">Enter the quiz code below</div>
+    <div class="my-3 fs-2 fw-bold px-3 text-center">Join our quiz!</div>
+    <div class="my-3 fs-4 px-3 text-center">Enter the quiz code below</div>
      <div class="my-3">
         <input class="form-control text-center fs-5 input-text-field" 
         @bind="clientQuizId" @bind:event="oninput" @onkeydown="@Enter" placeholder="Enter the quiz id" />
diff --git a/QuizExperiment.Admin/Client/Shared/Client/PlayerPosition.razor b/QuizExperiment.Admin/Client/Shared/Client/PlayerPosition.razor
index 090343c..951a404 100644
--- a/QuizExperiment.Admin/Client/Shared/Client/PlayerPosition.razor
+++ b/QuizExperiment.Admin/Client/Shared/Client/PlayerPosition.razor
@@ -1,11 +1,11 @@
 @using QuizExperiment.Models
 <div class="d-flex flex-column min-vh-100 justify-content-center align-items-center quiz-page">
-    <div class="my-3 fs-2 fw-bold">Well done!</div>
-    <div class="my-3 fs-4">You came @Position@(Position.GetSuffix()) with a score of @Score</div>
+    <div class="my-3 fs-2 fw-bold px-3 text-center">Well done!</div>
+    <div class="my-3 fs-4 px-3 text-center">You came @Position@(Position.GetSuffix()) with a score of @Score</div>
     <div class="player-position-icon-container">
         <p class="player-icon text-center">@Icon</p>
     </div>
-    <div class="my-3 fs-4">Thanks for playing</div>
+    <div class="my-3 fs-4 px-3 text-center">Thanks for playing</div>
 </div>
 
 @code {
diff --git a/QuizExperiment.Admin/Client/Shared/Client/SingleAnswerMultiSelectQuestion.razor b/QuizExperiment.Admin/Client/Shared/Client/SingleAnswerMultiSelectQuestion.razor
index 9137684..466c61b 100644
--- a/QuizExperiment.Admin/Client/Shared/Client/SingleAnswerMultiSelectQuestion.razor
+++ b/QuizExperiment.Admin/Client/Shared/Client/SingleAnswerMultiSelectQuestion.razor
@@ -5,13 +5,13 @@
     {
 
         <div class="d-flex flex-column min-vh-100 justify-content-center align-items-center quiz-page">
-            <h1 class="h1 text-center">@Question.Title</h1>
+            <h1 class="h1 text-center quiz-client-title px-3">@Question.Title</h1>
             <div class="quiz-button-container">
                 @for (var i = 0; i < Question.Options?.Count; i++)
                 {
                     var answer = Question.Options[i];
                     var index = i;
-                    <button class="btn btn-client-quiz btn-quiz-@i" @onclick="@(e => SubmitAnswer(index))" value="@index"><span>@(index.GetButtonNameFromIndex())</span></button>
+                    <button class="btn btn-client-quiz btn-quiz-@i" @onclick="@(e => SubmitAnswer(index))" value="@index"><span>@(index.GetButtonNameFromIndex())</span><span class="multiple-choice-answer-text">@answer</span></button>
                 }
 
             </div>
diff --git a/QuizExperiment.Admin/Client/Shared/Client/TrueFalseQuestion.razor b/QuizExperiment.Admin/Client/Shared/Client/TrueFalseQuestion.razor
index a173ba5..92da7da 100644
--- a/QuizExperiment.Admin/Client/Shared/Client/TrueFalseQuestion.razor
+++ b/QuizExperiment.Admin/Client/Shared/Client/TrueFalseQuestion.razor
@@ -4,10 +4,10 @@
     if(Question != null)
     {
         <div class="d-flex flex-column min-vh-100 justify-content-center align-items-center quiz-page">
-            <h1 class="h1 text-center">@Question.Title</h1>
+            <h1 class="h1 text-center quiz-client-title px-3">@Question.Title</h1>
             <div class="quiz-button-container">
-                <button class="btn-client-quiz-true-false btn-quiz-true" @onclick="@(e => SubmitAnswer(true))" value="1"><span>True</span></button>
-                <button class="btn-client-quiz-true-false btn-quiz-false" @onclick="@(e => SubmitAnswer(false))" value="2"><span>False</span></button>
+                <button class="btn btn-client-quiz-true-false btn-quiz-true" @onclick="@(e => SubmitAnswer(true))" value="1"><span>True</span></button>
+                <button class="btn btn-client-quiz-true-false btn-quiz-false" @onclick="@(e => SubmitAnswer(false))" value="2"><span>False</span></button>
 
             </div>
         </div>
diff --git a/QuizExperiment.Admin/Client/Shared/Client/UserName.razor b/QuizExperiment.Admin/Client/Shared/Client/UserName.razor
index 55800fd..b55743e 100644
--- a/QuizExperiment.Admin/Client/Shared/Client/UserName.razor
+++ b/QuizExperiment.Admin/Client/Shared/Client/UserName.razor
@@ -1,6 +1,6 @@
 <div class="d-flex flex-column min-vh-100 justify-content-center align-items-center">
-    <div class="my-3 fs-2 fw-bold">How would you like to be known?</div>
-    <div class="my-3 fs-4">Enter your username below</div>
+    <div class="my-3 fs-2 fw-bold px-3 text-center">How would you like to be known?</div>
+    <div class="my-3 fs-4 px-3 text-center">Enter your username below</div>
     <div class="my-3">
         <input class="form-control text-center fs-5 input-text-field"
                @bind="userName" @bind:event="oninput" placeholder="Username" maxlength="20" @onkeydown="@Enter" />
diff --git a/QuizExperiment.Admin/Client/Shared/Client/WaitingForAnswerCheck.razor b/QuizExperiment.Admin/Client/Shared/Client/WaitingForAnswerCheck.razor
index 15794b0..822a85c 100644
--- a/QuizExperiment.Admin/Client/Shared/Client/WaitingForAnswerCheck.razor
+++ b/QuizExperiment.Admin/Client/Shared/Client/WaitingForAnswerCheck.razor
@@ -1,5 +1,5 @@
 <div class="d-flex flex-column min-vh-100 justify-content-center align-items-center">
-    <div class="my-3 fs-4">Just waiting for everyone to answer.</div>
+    <div class="my-3 fs-4 px-3 text-center">Just waiting for everyone to answer.</div>
     <div class="my-3 loading-animation">
         <span class="loading-animation-item loading-animation-item-1"></span>
         <span class="loading-animation-item loading-animation-item-2"></span>
diff --git a/QuizExperiment.Admin/Client/Shared/Client/WaitingForQuestions.razor b/QuizExperiment.Admin/Client/Shared/Client/WaitingForQuestions.razor
index 22823a9..b875957 100644
--- a/QuizExperiment.Admin/Client/Shared/Client/WaitingForQuestions.razor
+++ b/QuizExperiment.Admin/Client/Shared/Client/WaitingForQuestions.razor
@@ -1,7 +1,7 @@
 <div class="d-flex flex-column min-vh-100 justify-content-center align-items-center">
-    <div class="my-3 fs-2 fw-bold">Hello @UserName</div>
-    <div class="my-3 fs-4">Just waiting for players to join</div>
-    <div class="my-3 fs-4">Your host will start the quiz shortly.</div>
+    <div class="my-3 fs-2 fw-bold px-3 text-center">Hello @UserName</div>
+    <div class="my-3 fs-4 px-3 text-center">Just waiting for players to join</div>
+    <div class="my-3 fs-4 px-3 text-center">Your host will start the quiz shortly.</div>
     <div class="my-3 loading-animation">
         <span class="loading-animation-item loading-animation-item-1"></span>
         <span class="loading-animation-item loading-animation-item-2"></span>
diff --git a/QuizExperiment.Admin/Client/Shared/Components/NavBar.razor b/QuizExperiment.Admin/Client/Shared/Components/NavBar.razor
index 61aab25..c58e3ac 100644
--- a/QuizExperiment.Admin/Client/Shared/Components/NavBar.razor
+++ b/QuizExperiment.Admin/Client/Shared/Components/NavBar.razor
@@ -2,14 +2,14 @@
 
 <nav class="navbar navbar-dark bg-dark fixed-top">
     <div class="container-fluid">
-        <a class="navbar-brand ms-4" href="#">
+        <a class="navbar-brand ms-1" href="#">
             <svg width="40" height="40" class="clear">
                 <circle cx="20" cy="7" r="7" stroke="white" stroke-width="0" fill="#ECDB33" />
                 <circle cx="20" cy="33" r="7" stroke="white" stroke-width="0" fill="#3CDB4E" />
                 <circle cx="7" cy="20" r="7" stroke="white" stroke-width="0" fill="#1F75FE" />
                 <circle cx="33" cy="20" r="7" stroke="white" stroke-width="0" fill="#D04242" />
             </svg>
-            <span class="ms-4 fs-4">QuizzR</span>
+            <span class="ms-1 fs-4">QuizzR</span>
         </a>
         @if (ShowLogin)
         {
diff --git a/QuizExperiment.Admin/Client/wwwroot/css/app.css b/QuizExperiment.Admin/Client/wwwroot/css/app.css
index d24fee5..293761f 100644
--- a/QuizExperiment.Admin/Client/wwwroot/css/app.css
+++ b/QuizExperiment.Admin/Client/wwwroot/css/app.css
@@ -149,12 +149,12 @@ nav.title-bar {
 }
 
 .btn-client-quiz {
-    position:relative;
+    position: relative;
     width: 200px;
     height: 200px;
-    border-radius:100px;
+    border-radius: 100px;
     font-size: 64pt;
-    font-weight:bolder;
+    font-weight: bolder;
 }
 
 .btn-client-quiz-true-false {
@@ -164,6 +164,7 @@ nav.title-bar {
     border-radius: 100px;
     font-size: 56pt;
     font-weight: bolder;
+    border:none;
 }
 
 .btn-quiz-true {
@@ -977,4 +978,80 @@ nav.title-bar {
     background-color: lightgray;
     color: black;
     font-weight: bold;
+}
+
+.multiple-choice-answer-text {
+    font-size: small;
+    display: block;
+    margin-top: -20px;
+    height: 20px;
+    overflow-wrap: break-word;
+    overflow: auto;
+    text-overflow: ellipsis;
+}
+
+@media (max-width: 560px), (max-height: 800px) {
+    .btn-client-quiz {
+        width: 120px;
+        height: 120px;
+        border-radius: 60px;
+        font-size: 48pt;
+    }
+
+    .btn-quiz-0 {
+        background-color: #ECDB33;
+        left: 190px;
+    }
+
+    .btn-quiz-1 {
+        background-color: #1F75FE;
+        top: 100px;
+        left: -20px;
+    }
+
+    .btn-quiz-2 {
+        background-color: #D04242;
+        top: 98px;
+        left: 40px;
+    }
+
+    .btn-quiz-3 {
+        background-color: #3CDB4E;
+        top: 200px;
+        left: -170px;
+    }
+
+    .btn-client-quiz-true-false {
+        position: relative;
+        width: 280px;
+        height: 100px;
+        border-radius: 100px;
+        font-size: 36pt;
+        font-weight: bolder;
+        border: none;
+    }
+
+    .btn-quiz-true {
+        background-color: #3CDB4E;
+        left: 110px;
+    }
+
+    .btn-quiz-false {
+        background-color: #D04242;
+        top: 30px;
+        left: 110px;
+    }
+
+    .quiz-client-title {
+        margin-top: -90px;
+    }
+
+    .quiz-button-container {
+        margin-top:75px;
+    }
+
+    .multiple-choice-answer-text {
+        font-size: x-small;
+        height: 18px;
+    }
 }
\ No newline at end of file