diff --git a/client/views/clients/Detail.jsx b/client/views/clients/Detail.jsx
index 1f4787d..abc85e5 100644
--- a/client/views/clients/Detail.jsx
+++ b/client/views/clients/Detail.jsx
@@ -9,7 +9,7 @@ export default function Detail(props = { client, user }) {
     .slice(0, 2)
     .map((event) => {
       return (
-        <div className="col-sm-5">
+        <div className="col-sm-5 my-1">
           <div className="card h-100">
             <div className="card-body">
               <h5 className="card-title text-capitalize">
@@ -30,11 +30,11 @@ export default function Detail(props = { client, user }) {
     <Layout user={props.user}>
       <ClientDetailHeader {...props} />
 
-      <div className="jumbotron jumbotron-fluid row mt-4 py-3 mx-0">
+      <div className="jumbotron jumbotron-fluid row mt-4 py-1 mx-0">
         {timelineComponent}
         <div className="col-sm-2 d-flex align-items-center">
           <a
-            className="btn btn-light"
+            className="btn btn-light my-2"
             href={`/clients/${props.client._id}/timeline`}
           >
             View Full Timeline
diff --git a/client/views/components/ClientDetailHeader.jsx b/client/views/components/ClientDetailHeader.jsx
index 522270b..4272013 100644
--- a/client/views/components/ClientDetailHeader.jsx
+++ b/client/views/components/ClientDetailHeader.jsx
@@ -8,11 +8,11 @@ const frontendBasePath = process.env.FRONTEND_BASE_PATH;
 export default function ClientDetailHeader({ client, user }) {
   return (
     <div className="row">
-      <div className="col col-8">
+      <div className="col col-md-8">
         <h4 className="display-4">{client.name}</h4>
         <h4 className="lead text-muted">{client.email}</h4>
       </div>
-      <div className="col col-4">
+      <div className="col col-md-4">
         <div class="card border-dark">
           <div class="card-body d-flex flex-column">
             <div className="d-flex justify-content-between">