diff --git a/resources/views/livewire/pages/profile.blade.php b/resources/views/livewire/pages/profile.blade.php
index 84527cb..4c092eb 100644
--- a/resources/views/livewire/pages/profile.blade.php
+++ b/resources/views/livewire/pages/profile.blade.php
@@ -84,88 +84,424 @@ $cancelEditingSubmission = function () {
 
 <div>
     @if($participant)
-        You are...
-        {{ $participant->id }}
         @if($userData)
-            <img src="{{ $userData['data']['profile_image_url'] ?? '' }}">
-            <h1> {{ $userData['data']['username'] ?? 'Unknown' }}</h1>
+            <div class="user-profile">
+                <div class="avatar-container">
+                    <img src="{{ $userData['data']['profile_image_url'] ?? '' }}" alt="Profile Avatar">
+                </div>
+                <div class="username-container">
+                    You are... <h1 style="margin-bottom:0;padding:0"> &commat;{{ $userData['data']['username'] ?? 'Unknown' }}</h1>
+                    <small style="color:rgba(255,255,255,0.5);">your password is {{$token}}</small>
+                </div>
+
+            </div>
+
         @endif
-        <hr>
 
         @if($isEditingPrompt)
-            <form wire:submit="saveEditingPrompt">
-                <input type="text" id="prompt" wire:model="prompt">
+                <div class="other-content">
+                    <div style="margin-bottom: 15pt;">
+                        Your prompt is...
+                        <br>
+                    </div>
+                    <div>
+                        <form wire:submit="saveEditingPrompt">
+                            <input type="text" id="prompt" wire:model="prompt">
 
-                @error('prompt')
-                <span class="error">{{ $message }}</span>
-                @enderror
-
-                <button type="submit">Save</button>
-
-                <button type="button" wire:click="cancelEditingPrompt">Cancel</button>
-            </form>
+                            @error('prompt')
+                            <span class="error">{{ $message }}</span>
+                            @enderror
+                            <br><br>
+                            <button type="submit">Save</button>
+                            <button type="button" wire:click="cancelEditingPrompt">Cancel</button>
+                        </form>
+                    </div>
+                </div>
         @else
-            <div class="prompt-display">
-                <p>
-                    Your prompt is: {{ $prompt ?: 'No prompt set yet.' }}
-                </p>
+            <div class="other-content">
+                <div>
+                    Your prompt is...
+                </div>
+                <div>
+                    <h2>
+                        "{{ $prompt ?: 'No prompt set yet.' }}"
+                    </h2>
+                </div>
 
                 <button wire:click="$set('isEditingPrompt', true)">
                     {{ $prompt ? 'Edit Prompt' : 'Add Prompt' }}
                 </button>
+                <div>
+                    <br>
+                    <small style="color:rgba(255,255,255,0.5)">this is what others will draw for you!</small>
+                </div>
             </div>
         @endif
 
-        <hr>
+        <div class="other-content">
+            @if($participant->giving_id)
+                You are giving to...
+                @if($receiverUserData)
+                    <div class="user-profile">
+                        <div class="avatar-container">
+                            <img src="{{ $receiverUserData['data']['profile_image_url'] ?? '' }}" alt="Profile Avatar">
+                        </div>
+                        <div class="username-container">
+                            <h1> &commat;{{ $receiverUserData['data']['username'] ?? 'Unknown' }}</h1>
+                        </div>
+                    </div>
+                @endif
+                <small style="color:rgba(255,255,255,0.5)">want to roll for a different person e.g. you blocked this person? you can dm @username</small>
+                <br><br>Their prompt is...
+                <div class="other-content">
+                 {{$receiverPrompt}} Nothing yet, probably!
+                </div>
+        </div>
+        <div class="other-content">
+                <h2> Are you done? </h2>
+            <p>You will be able to link to your gift below once submissions are accepted on 22nd December.</p>
+            <small style="color:rgba(255,255,255,0.5)">submissions will be accepted up until 10th of january</small>
 
-        @if($participant->giving_id)
-            You are giving to <p>{{ $participant->giving_id }}</p>
-            @if($receiverUserData)
-                <img src="{{ $receiverUserData['data']['profile_image_url'] ?? '' }}">
-                <h1> {{ $receiverUserData['data']['username'] ?? 'Unknown' }}</h1>
-            @endif
-            Their prompt is... {{$receiverPrompt}}
+            {{--                @if($isEditingSubmission)--}}
+{{--                    <form wire:submit="saveEditingSubmission">--}}
+{{--                        <input type="text" id="submissionUrl" wire:model="submissionUrl">--}}
 
-            <p> Are you done? Link to your post below </p>
-            @if($isEditingSubmission)
-                <form wire:submit="saveEditingSubmission">
-                    <input type="text" id="submissionUrl" wire:model="submissionUrl">
+{{--                        @error('submissionUrl')--}}
+{{--                        <span class="error">{{ $message }}</span>--}}
+{{--                        @enderror--}}
 
-                    @error('submissionUrl')
-                    <span class="error">{{ $message }}</span>
-                    @enderror
+{{--                        <button type="submit">Save</button>--}}
 
-                    <button type="submit">Save</button>
+{{--                        <button type="button" wire:click="cancelEditingSubmission">Cancel</button>--}}
+{{--                    </form>--}}
+{{--                @else--}}
+{{--                    <div class="submissionUrl-display">--}}
+{{--                        <p>--}}
+{{--                            Your submission URL is: <span--}}
+{{--                                id="submissionUrl">{{ $submissionUrl ?: 'No submission sent yet.' }}</span>--}}
+{{--                        </p>--}}
 
-                    <button type="button" wire:click="cancelEditingSubmission">Cancel</button>
-                </form>
+{{--                        <button wire:click="$set('isEditingSubmission', true)">--}}
+{{--                            {{ $submissionUrl ? 'Edit Submission URL' : 'Add Submission URL' }}--}}
+{{--                        </button>--}}
+{{--                    </div>--}}
+{{--                @endif--}}
+{{--                @if($submissionData)--}}
+{{--                    <h1>Your submission:</h1>--}}
+{{--                    <div id="postView">--}}
+{{--                        <a href="{{$submissionUrl}}">--}}
+{{--                            <h1>{{$submissionData['post']['title']}}</h1>--}}
+{{--                            <img src="{{$submissionData['post']['resource_url']}}">--}}
+{{--                        </a>--}}
+{{--                    </div>--}}
+{{--                @endif--}}
+            @elseif($participant->desperate)
+                <p>You're in a bind!</p>
             @else
-                <div class="submissionUrl-display">
-                    <p>
-                        Your submission URL is: <span
-                            id="submissionUrl">{{ $submissionUrl ?: 'No submission sent yet.' }}</span>
-                    </p>
-
-                    <button wire:click="$set('isEditingSubmission', true)">
-                        {{ $submissionUrl ? 'Edit Submission URL' : 'Add Submission URL' }}
-                    </button>
-                </div>
+                <p>You haven't been assigned anyone.</p>
             @endif
-            <hr>
-            @if($submissionData)
-                <h1>Your submission:</h1>
-                <div id="postView">
-                    <a href="{{$submissionUrl}}">
-                        <h1>{{$submissionData['post']['title']}}</h1>
-                        <img src="{{$submissionData['post']['resource_url']}}">
-                    </a>
-                </div>
-            @endif
-        @elseif($participant->desperate)
-            <p>You're in a bind!</p>
-        @else
-            <p>You haven't been assigned anyone.</p>
-        @endif
-
+        </div>
+            <a
+                href="/withdraw"
+                >
+                Withdraw from Secret Sketchers...
+            </a>
     @endif
+
+    <style>
+        .user-profile {
+            display: flex;
+            align-items: center;
+            padding: 15px;
+            background-color: rgba(0,0,0,0.3);
+            border-radius: 12px;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+            max-width: 100%;
+            margin: 15px;
+        }
+
+        .other-content {
+            display: block;
+            padding: 15px;
+            background-color: rgba(0,0,0,0.3);
+            border-radius: 12px;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+            max-width: 100%;
+            margin: 15px;
+        }
+
+        /* Add spacing below the main prompt text */
+        .prompt-content {
+            margin-bottom: 10px;
+        }
+
+        /* Reset H2 margin for better spacing */
+        .prompt-content h2 {
+            margin-top: 5px;
+            margin-bottom: 5px;
+        }
+
+        .avatar-container {
+            width: 60px;
+            height: 60px;
+            border-radius: 50%;
+            overflow: hidden;
+            margin-right: 15px;
+            background-color: #ccc;
+            flex-shrink: 0;
+        }
+
+        .avatar-container img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+
+        .username-container {
+            flex-grow: 1;
+            min-width: 0;
+        }
+
+        .username-container h1 {
+            margin: 0;
+            font-size: 1.2em;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        body {
+            background-color: #222;
+            margin: 10pt;
+            font-family: sans-serif;
+            color: white;
+            overflow: hidden;
+        }
+
+        #viewer {
+            width: 100vw;
+            height: 100vh;
+            background-color: #222;
+            background-image: url("image/su.png");
+            background-repeat: no-repeat;
+            background-size: 400px;
+            background-position: center;
+            image-rendering: pixelated;
+        }
+
+        .r6o-editor {
+            z-index: 3;
+            height: auto;
+        }
+
+        .r6o-widget.comment {
+            font-size: 1.5em;
+            background-color: #333
+        }
+
+        .r6o-editor .r6o-arrow:after {
+            background-color: #333;
+            border: 3px white solid;
+        }
+
+        .r6o-editor .r6o-editor-inner .r6o-widget {
+            border: 3px white solid;
+        }
+
+        .r6o-editor .r6o-editor-inner {
+            background-color: transparent !important;
+        }
+
+        .r6o-footer {
+            display: none;
+        }
+
+        div {
+            color: white;
+        }
+
+        a {
+            color: white;
+            font-weight: bold;
+        }
+
+        #here-now {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            font-size: 1.5vh;
+            color: white;
+            padding: 15px;
+            z-index: 2;
+            background-color:#333;
+            border-radius: 1rem;
+            border: 3px solid white;
+            margin: 5pt;
+        }
+
+        #question {
+            font-size: 3vh;
+            width: 3vh;
+            height: 3vh;
+            position: fixed;
+            bottom: 0;
+            right: 0;
+            background-color: #333;
+            color: #fff;
+            border: 3px solid white;
+            border-radius: 50%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding: 15px;
+            margin: 10px;
+        }
+
+        #question img {
+            max-width: 100%;
+            height: auto;
+            display: block;
+        }
+
+        #modal-overlay {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.5);
+            z-index: 3;
+        }
+
+        #banner {
+            max-width: 100%;
+        }
+        #modal {
+            display: none;
+            font-size: 18pt;
+            position: fixed;
+            top: 50%;
+            opacity: 0;
+            transition: opacity 0.3s ease-in-out;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            justify-content: center;
+            border-radius: 1rem;
+            box-shadow: 0 0 10px 10px #000;
+            background-color: #333;
+            align-items: center;
+            z-index: 4;
+            width: 80%;
+            height: 80%;
+            overflow-y: auto;
+        }
+
+        #modal-content {
+            position: relative;
+            padding: 33px;
+            text-align: center;
+            max-height: 100%;
+            font-size: 15pt;
+        }
+
+        @keyframes animateBg {
+            0% {
+                background-position: 0 0;
+            }
+            100% {
+                background-position: 100% 0;
+            }
+        }
+
+        .rainbow {
+            background: linear-gradient(90deg, #f1672b, #fea419, #efd515, #89d842, #35c2f9, #9b5fe0, #ff68cf, #f1672b, #fea419, #efd515, #89d842, #35c2f9, #9b5fe0, #ff68cf, #f1672b, #fea419, #efd515, #89d842, #35c2f9, #9b5fe0, #ff68cf, #f1672b);
+            background-size: 300% 100%;
+            -webkit-background-clip: text;
+            animation: animateBg 5s infinite linear;
+            background-clip: text;
+            color: transparent;
+        }
+
+        .profile-container {
+            display:flex;
+            align-items: center;
+        }
+
+        .profileimg {
+            flex: 0 0 20%; /* 10% of the container's width, not flexible, not growing, not shrinking */
+            max-height: 100%;
+        }
+
+        .profileimg img {
+            width: 100%; /* Make sure the image fills its container */
+            height: auto; /* Maintain aspect ratio */
+            border-radius: 50%;
+        }
+
+        .profile {
+            flex: 1; /* Take up remaining space */
+            padding-left: 1rem; /* Add some space between image and text */
+        }
+
+        #close-button {
+            position: absolute;
+            font-size: 3rem;
+            top: 15px;
+            right: 30px;
+            cursor: pointer;
+            width: 3vh;
+            height: 3vh;
+            background-color: #333;
+            color: #fff;
+            border: 3px solid white;
+            border-radius: 50%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding: 15px;
+            margin: 10px;
+        }
+
+        #open-button {
+            cursor: pointer;
+        }
+
+        #mobile-banner {
+            display:none;
+        }
+
+        @media screen and (max-width: 1081px) and (-webkit-min-device-pixel-ratio: 2) {
+            #viewer {
+                width: 100vw;
+                height: 66vh;
+                border-bottom: 3px white solid;
+            }
+            #modal-content {
+                font-size: 20pt;
+            }
+
+            #container {
+                display: flex;
+                height: 100vh;
+                align-items: center;
+                justify-content: center;
+            }
+
+            #mobile-banner {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                box-sizing: border-box;
+                height: 27vh;
+                overflow: hidden;
+                background-color: #444;
+            }
+
+            #mobile-banner img {
+                max-width: 90%;
+                max-height: 100%;
+            }
+
+        }</style>
 </div>