diff --git a/app/assets/stylesheets/application.css.scss b/app/assets/stylesheets/application.css.scss
index e59ed27c..b1035bad 100644
--- a/app/assets/stylesheets/application.css.scss
+++ b/app/assets/stylesheets/application.css.scss
@@ -4,7 +4,9 @@
 
 @import "libraries-main";
 @import "partials/_variables";
+@import "partials/_typography";
 @import "partials/_alerts";
+@import "partials/_buttons";
 @import "partials/_effects";
 @import "partials/_filters";
 @import "partials/_global_alerts";
@@ -19,5 +21,4 @@
 @import "partials/_shared";
 @import "partials/_results";
 @import "partials/_loading_spinner";
-@import "partials/_typography";
-@import "partials/_suggestion-panel";
+@import "partials/_suggestion-panel";
\ No newline at end of file
diff --git a/app/assets/stylesheets/partials/_buttons.scss b/app/assets/stylesheets/partials/_buttons.scss
new file mode 100644
index 00000000..709481d6
--- /dev/null
+++ b/app/assets/stylesheets/partials/_buttons.scss
@@ -0,0 +1,13 @@
+  @mixin buttonSecondary {
+    border: 1px solid $color-blue-500;
+    border-radius: 0;
+    display: inline-block;
+    padding: 6px 12px;
+    text-decoration: none;
+    font-size: 1.6rem;
+    font-weight: $fw-medium;
+
+    &:hover {
+      background-color: $color-blue-25;
+    }
+  }
\ No newline at end of file
diff --git a/app/assets/stylesheets/partials/_pagination.scss b/app/assets/stylesheets/partials/_pagination.scss
index e7b8c423..f504739b 100644
--- a/app/assets/stylesheets/partials/_pagination.scss
+++ b/app/assets/stylesheets/partials/_pagination.scss
@@ -3,23 +3,54 @@
   display: flex;
   flex-flow: row nowrap;
   justify-content: center;
-  margin-top: 3em;
+  padding-top: 1em;
+  border-top: 1px solid $color-border-default;
+  gap: 24px;
 
-  .first {
-    border-right: 1px solid black;
-    margin-right: 0.5em;
-    padding-right: 0.5em;
+  .center-elements {
+    display: flex;
+    flex-grow: 1;
+    gap: 24px;
+    justify-content: center;
   }
 
-  .previous {
-    border-right: 1px solid black;
-    margin-right: 0.5em;
-    padding-right: 0.5em;
+  span {
+    display: inline-block;
+    padding: 6px 12px;
+    border: 1px solid $color-border-default;
+    color: $color-text-disabled;
   }
 
-  .next {
-    border-left: 1px solid black;
-    margin-left: 0.5em;
-    padding-left: 0.5em;
+  div.current span {
+    border: none;
+    padding: 6px 0;
+    color: $color-text-primary;
   }
-}
+
+  a {
+    @include buttonSecondary;
+  }
+
+  .first a, .first span {
+    border: none;
+    text-decoration: underline;
+    text-decoration-color: $color-blue-500;
+    text-underline-offset: 0.5rem;
+    padding: 6px 0;
+
+    &:hover {
+      background-color: $color-white;
+    }    
+  }
+
+  .first span {
+    text-decoration-color: $color-border-default;
+  }
+
+  // Hide the first link and count on smaller screens
+  @media (max-width: $bp-screen-md) {
+    justify-content: space-between;
+
+    .center-elements {display: none;}
+  }  
+}
\ No newline at end of file
diff --git a/app/assets/stylesheets/partials/_results.scss b/app/assets/stylesheets/partials/_results.scss
index bbab4212..c0bc8c31 100644
--- a/app/assets/stylesheets/partials/_results.scss
+++ b/app/assets/stylesheets/partials/_results.scss
@@ -121,8 +121,10 @@
 }
 
 /* USE Specific Overrides */
+/* Layout of results and sidebar columns */
 #content-wrapper {
   padding-top: 12px;
+  padding-bottom: 44px;
 
   .results-context {
     padding-left: 0;
@@ -135,8 +137,94 @@
     margin-bottom: 32px;
   }
 
-  #results {
+  #results-section {
     padding: 16px 0 0 0;
   }
 
+  #results-layout-wrapper {
+    display: flex;
+    gap: 64px;
+
+    #results {
+      padding: 0;
+      flex-grow: 1;
+    }
+
+    #results-sidebar {
+      flex: 0 0 360px;
+
+      display: flex;
+      flex-direction: column;
+      gap: 32px;
+
+      @media (max-width: 1140px) {
+        flex-basis: 280px;
+      }
+
+      p {
+        line-height: 1.4;
+      }
+
+      a {
+        @include underlinedLinks;
+      }
+    }
+
+    // Put the sidebar below the results when the screen is narrower than 1024px
+    @media (max-width: $bp-screen-lg) {
+        flex-direction: column;
+        gap: 32px;
+
+        // Put the sidebar items side by side when space is available
+        #results-sidebar {
+          flex-direction: row;
+          padding-bottom: 40px;
+          gap: 12px;
+          flex-basis: auto;
+
+          > div {
+            padding-right: 24px;
+          }
+        }
+
+        #callout-wrapper {
+          margin-bottom: 0;
+        }
+    }
+
+    // Put sidebar items in a column below 768px
+    @media (max-width: $bp-screen-md) {
+    
+      #results-sidebar {
+        flex-direction: column;
+        gap: 32px;
+      }
+      
+    }
+  }
+
+}
+
+/* Callouts below results */
+#callout-wrapper {
+  display: flex;
+  gap: 12px;
+  margin-bottom: 32px;
+
+  aside {
+    border: 3px solid $color-border-default;
+    padding: 20px 24px;
+
+    p {
+      line-height: 1.4;
+    }
+
+    a {
+      @include buttonSecondary;
+    }
+  }
+
+  @media (max-width: $bp-screen-md) {
+    flex-direction: column;
+  }
 }
\ No newline at end of file
diff --git a/app/assets/stylesheets/partials/_typography.scss b/app/assets/stylesheets/partials/_typography.scss
index fcea9769..03d4a7dc 100644
--- a/app/assets/stylesheets/partials/_typography.scss
+++ b/app/assets/stylesheets/partials/_typography.scss
@@ -1,3 +1,16 @@
+// Mixing for underlined links
+@mixin underlinedLinks {
+  color: inherit;
+  font-weight: $fw-medium;
+  text-decoration: underline;
+  text-decoration-color: $color-blue-500;
+  text-underline-offset: 0.5rem;  
+
+  &:hover {
+    color: $color-blue-500;
+  }
+}
+
 // Override fonts from the theme gem, done temporarily for USE UI
 body {
   font-family: $base-font;
diff --git a/app/assets/stylesheets/partials/_variables.scss b/app/assets/stylesheets/partials/_variables.scss
index 00a95e82..74b9b844 100644
--- a/app/assets/stylesheets/partials/_variables.scss
+++ b/app/assets/stylesheets/partials/_variables.scss
@@ -26,6 +26,7 @@ $color-cyan-500: #00C8FF;
 $color-cyan-700: #00A0CC;
 
 // BLUE
+$color-blue-25: #F0F0FF;
 $color-blue-500: #0000FF;
 
 // PURPLE
@@ -45,6 +46,9 @@ $color-text-placeholder: $color-gray-500;
 $color-text-disabled: $color-gray-400;
 $color-text-oncolor: $color-white;
 
+// BORDERS
+$color-border-default: $color-gray-400;
+
 // FOCUS
 $color-focus: $color-cyan-700;
 $color-focus-dark: $color-cyan-500;
diff --git a/app/views/search/_pagination.html.erb b/app/views/search/_pagination.html.erb
index 0b6d8878..c35ddd9f 100644
--- a/app/views/search/_pagination.html.erb
+++ b/app/views/search/_pagination.html.erb
@@ -1,14 +1,17 @@
 <% return if @pagination.nil? %>
-
-<nav class="pagination-container" aria-label="Pagination">
-  <div class="first">
-    <%= first_url(@enhanced_query) %>
-  </div>
-  <div class="previous">
-    <%= prev_url(@enhanced_query) %>
-  </div>
-  <div class="current"><%= @pagination[:start] %> - <%= @pagination[:end] %> of <%= number_with_delimiter(@pagination[:hits]) %></div>
-  <div class="next">
-    <%= next_url(@enhanced_query) %>
-  </div>
-</nav>
+<div id="pagination">
+  <nav class="pagination-container" aria-label="Pagination">
+    <div class="previous">
+      <%= prev_url(@enhanced_query) %>
+    </div>
+    <div class="center-elements">
+      <div class="first">
+        <%= first_url(@enhanced_query) %>
+      </div>  
+      <div class="current"><span><%= @pagination[:start] %> - <%= @pagination[:end] %> of <%= number_with_delimiter(@pagination[:hits]) %></span></div>
+    </div>
+    <div class="next">
+      <%= next_url(@enhanced_query) %>
+    </div>
+  </nav>
+</div>
diff --git a/app/views/search/_results_callouts.html.erb b/app/views/search/_results_callouts.html.erb
new file mode 100644
index 00000000..9d2e0992
--- /dev/null
+++ b/app/views/search/_results_callouts.html.erb
@@ -0,0 +1,18 @@
+<div id="callout-wrapper">
+  <aside class="result-callout">
+    <i></i>
+    <div>
+      <h4>Refine your search</h4>
+      <p>Use advanced search features to expand or filter your search.</p>
+      <a href="#">Search Primo</a>
+    </div>
+  </aside>
+  <aside class="result-callout">
+    <i></i>
+    <div>
+      <h4>Can’t find a book?</h4>
+      <p>If we don’t own it you can often request it from another library.</p>
+      <a href="#">Search WorldCat</a>
+    </div>
+  </aside>
+</div>
\ No newline at end of file
diff --git a/app/views/search/_results_sidebar.html.erb b/app/views/search/_results_sidebar.html.erb
new file mode 100644
index 00000000..688b0287
--- /dev/null
+++ b/app/views/search/_results_sidebar.html.erb
@@ -0,0 +1,18 @@
+<aside id="results-sidebar">
+  <div>
+    <i></i>
+    <div>
+      <h4>Were these results useful?</h4>
+      <p>Your feedback can help shape the quality and relevance of our search results.</p>
+      <a href="#">Send feedback</a>
+    </div>
+  </div>
+  <div>
+    <i></i>
+    <div>
+      <h4>Get help from expert librarians</h4>
+      <p>From thesis research to course reserves, we can help you find what you need.</p>
+      <a href="#">Ask us</a>
+    </div>
+  </div>
+</aside>
\ No newline at end of file
diff --git a/app/views/search/results.html.erb b/app/views/search/results.html.erb
index a2da6c4d..eee01f2e 100644
--- a/app/views/search/results.html.erb
+++ b/app/views/search/results.html.erb
@@ -10,46 +10,56 @@
   <%= render(partial: 'trigger_tacos') if tacos_enabled? %>
 
   <%= turbo_frame_tag "search-results", data: { turbo_action: "advance" } do %>
-    <div class="layout-3q1q layout-band">
-      <main id="results" class="col3q wrap-results">
-        <% if @show_primo_continuation %>
-          <%= render partial: 'search/primo_continuation' %>
-        <% elsif @results.present? && @errors.blank? %>
-          <h2 class="results-context"><%= results_summary(@pagination[:hits]) %></h2>
-          <p class="results-context-description">From all MIT Libraries sources</p>
-          <ol class="results-list" start="<%= @pagination[:start] %>">
-            <% case @active_tab %>
-            <% when 'primo' %>
-              <%= render(partial: 'search/result_primo', collection: @results, as: :result) %>
-            <% when 'timdex' %>
-              <%= render(partial: 'search/result', collection: @results, as: :result) %>
-            <% when 'all' %>
-              <% @results.each do |result| %>
-                <% if result[:source] == 'Primo' %>
-                  <%= render(partial: 'search/result_primo', locals: { result: result }) %>
-                <% else %>
-                  <%= render(partial: 'search/result', locals: { result: result }) %>
+    <div id="results-section">
+      
+      <% if @show_primo_continuation %>
+
+        <%= render partial: 'search/primo_continuation' %>
+
+      <% elsif @results.present? && @errors.blank? %>
+
+        <h2 class="results-context"><%= results_summary(@pagination[:hits]) %></h2>
+        <p class="results-context-description">From all MIT Libraries sources</p>    
+        <div id="results-layout-wrapper">  
+          <main id="results">
+            <ol class="results-list" start="<%= @pagination[:start] %>">
+              <% case @active_tab %>
+              <% when 'primo' %>
+                <%= render(partial: 'search/result_primo', collection: @results, as: :result) %>
+              <% when 'timdex' %>
+                <%= render(partial: 'search/result', collection: @results, as: :result) %>
+              <% when 'all' %>
+                <% @results.each do |result| %>
+                  <% if result[:source] == 'Primo' %>
+                    <%= render(partial: 'search/result_primo', locals: { result: result }) %>
+                  <% else %>
+                    <%= render(partial: 'search/result', locals: { result: result }) %>
+                  <% end %>
                 <% end %>
               <% end %>
-            <% end %>
-          </ol>
-        <% elsif @errors.blank? %>
-          <div class="no-results">
-            <p class="hd-2">No results found for your search</p>
-          </div>
-        <% end %>
-      </main>
+            </ol>
+            <%= render partial: "results_callouts" %>
+          </main>
+          <%= render partial: "results_sidebar" %>
+        </div>
+        <%= render partial: "pagination" %>
+
+      <% elsif @errors.blank? %>
+
+        <div id="results-layout-wrapper">
+          <main id="results">
+            <div class="no-results">
+              <p class="hd-2">No results found for your search</p>
+            </div>
+          </main>
+        </div>
+
+      <% end %>
+
     </div>
 
-    <% if @results.present? %>
-      <div id="pagination">  
-        <%= render partial: "pagination" %>
-      </div>
-      <%= render partial: 'shared/ask', locals: { display: 'view-md' } %>
-    <% end %>
   <% end %>
 
-  <%= render partial: 'shared/ask', locals: { display: 'aside' } if @results.blank? %>
 </div>
 
 <%= javascript_include_tag "filters" %>