diff --git a/app/components/live-panel.hbs b/app/components/live-panel.hbs
index f0fccf8e9..3fc6ed266 100644
--- a/app/components/live-panel.hbs
+++ b/app/components/live-panel.hbs
@@ -1,4 +1,15 @@
 <div class='live-panel' data-test-live-panel>
+  <Reusables::IconButton
+    @id='toggle-panel'
+    @class='icon-button--md icon__sidebar__toggle'
+    @title='toggle sidebar panel'
+    @onClick={{@sidebarDisplayToggle}}
+    @icon={{if
+      @isExpanded
+      'material-symbols:fullscreen-exit'
+      'material-symbols:fullscreen'
+    }}
+  />
   {{#if (eq @role this.ROLES.host)}}
     <Reusables::IconButton
       @id='screen-share'
diff --git a/app/components/live-sidebar.hbs b/app/components/live-sidebar.hbs
index 03ec1852a..e217fc8df 100644
--- a/app/components/live-sidebar.hbs
+++ b/app/components/live-sidebar.hbs
@@ -1,6 +1,18 @@
-<div data-test-sidebar class='sidebar {{if this.isSideBarOpen "open" "close"}}'>
-  <div data-test-sidebar-participants class='sidebar__participants'>
-    <h4>Participants</h4>
+<div
+  data-test-sidebar
+  class='sidebar
+    {{if this.isSideBarOpen "open" "close"}}
+    {{if @isExpanded "sidebar--closes" "sidebar--opens"}}'
+>
+
+  <div
+    data-test-sidebar-participants
+    class='sidebar__participants
+      {{if @isExpanded "sidebar__participants--hide"}}'
+  >
+    <h4
+      class='{{if @isExpanded "participants__heading--hide" ""}}'
+    >Participants</h4>
     <button
       data-test-sidebar-button
       class='sidebar__accordian-button'
diff --git a/app/controllers/live.js b/app/controllers/live.js
index eb3bb1e0b..2ab3524ae 100644
--- a/app/controllers/live.js
+++ b/app/controllers/live.js
@@ -31,6 +31,8 @@ export default class LiveController extends Controller {
   @tracked newRoomCode = '';
   @tracked isActiveEventFound;
   @tracked buttonText = '';
+  @tracked isExpanded = false;
+
   @globalRef('videoEl') videoEl;
   get liveService() {
     return getOwner(this).lookup('service:live');
@@ -43,6 +45,10 @@ export default class LiveController extends Controller {
     }, 4000);
   }
 
+  @action sidebarDisplayToggle() {
+    this.isExpanded = !this.isExpanded;
+  }
+
   @action inputHandler(type, event) {
     const updatedValue = event.target.value;
     switch (type) {
diff --git a/app/styles/icon-button.module.css b/app/styles/icon-button.module.css
index 76e04d1a0..708791808 100644
--- a/app/styles/icon-button.module.css
+++ b/app/styles/icon-button.module.css
@@ -1,34 +1,49 @@
 .icon-button {
-    all: unset;
-    background-color: var(--color-lightgrey);
-    cursor: pointer;
-    display: inline-block;
+  all: unset;
+  background-color: var(--color-lightgrey);
+  cursor: pointer;
+  display: inline-block;
 }
 
 .icon-button--pink-bg {
-    background-color: var(--color-pink);
-    color: var(--color-white)
+  background-color: var(--color-pink);
+  color: var(--color-white);
 }
 
 .icon-button--md {
-    border-radius: 50%;
-    height: 54px;
-    width: 54px;
-    margin-right: 2rem;
-    position: relative;
+  border-radius: 50%;
+  height: 54px;
+  width: 54px;
+  margin-right: 2rem;
+  position: relative;
+}
+
+.icon-button--md .icon__sidebar__toggle {
+  height: 50%;
+  width: 50%;
+  position: absolute;
+  bottom: 50%;
+  right: 50%;
+  transform: translate(50%, 50%);
 }
 
 .icon-button--md .iconify.iconify--material-symbols {
-    height: 50%;
-    width: 50%;
-    position: absolute;
-    bottom: 50%;
-    right: 50%;
-    transform: translate(50%, 50%);
+  height: 50%;
+  width: 50%;
+  position: absolute;
+  bottom: 50%;
+  right: 50%;
+  transform: translate(50%, 50%);
 }
 
 @media (max-width: 425px) {
-    .icon-button--md {
-        margin-right: 1rem;
-    }
-}
\ No newline at end of file
+  .icon-button--md {
+    margin-right: 1rem;
+  }
+}
+
+@media (max-width: 768px) {
+  .icon__sidebar__toggle {
+    display: none;
+  }
+}
diff --git a/app/styles/live-sidebar.module.css b/app/styles/live-sidebar.module.css
index d578583f4..e7beff3ca 100644
--- a/app/styles/live-sidebar.module.css
+++ b/app/styles/live-sidebar.module.css
@@ -1,6 +1,6 @@
 .sidebar {
   padding: 1rem 0;
-  width: 100%;
+  width: 0%;
   background-color: var(--color-sidebar);
   height: 100%;
   z-index: 2;
@@ -11,6 +11,14 @@
   box-sizing: border-box;
 }
 
+.sidebar--opens {
+  width: 90%;
+}
+
+.sidebar--closes {
+  width: 0%;
+}
+
 .sidebar__accordian-button {
   all: unset;
   display: none;
@@ -31,6 +39,10 @@
   border-radius: 10px;
 }
 
+.participants__heading--hide {
+  display: none;
+}
+
 .sidebar__participants {
   width: 90%;
   display: flex;
@@ -49,6 +61,10 @@
   box-sizing: border-box;
 }
 
+.sidebar__participants--hide {
+  display: none;
+}
+
 .sidebar__participants--mobile {
   display: none;
   width: 100%;
@@ -151,6 +167,60 @@
   cursor: pointer;
 }
 
+@media only screen and (max-width: 768px) {
+  .sidebar {
+    height: 70px;
+    width: 100%;
+  }
+
+  .participantsHeadingHide {
+    display: block;
+  }
+
+  .sidebar__accordian-button {
+    display: block;
+  }
+  .sidebar__participants {
+    background: var(--color-sidebar-participants);
+    text-align: initial;
+    padding-left: 1rem;
+  }
+
+  .sidebar.open {
+    height: fit-content;
+  }
+  .sidebar__body {
+    overflow: hidden;
+  }
+  .sidebar__body.open {
+    animation: opensidebar 2s;
+    transition: height 2s;
+    animation-fill-mode: forwards;
+    overflow: auto;
+  }
+  .sidebar__body.close {
+    animation: closesidebar 2s;
+    transition: height 2s;
+    animation-fill-mode: forwards;
+  }
+  @keyframes opensidebar {
+    0% {
+      height: 0px;
+    }
+    100% {
+      height: 300px;
+    }
+  }
+
+  @keyframes closesidebar {
+    0% {
+      height: 300px;
+    }
+    100% {
+      height: 0px;
+    }
+  }
+}
 .loading span {
   width: 0.5rem;
   height: 0.5rem;
@@ -192,6 +262,10 @@
     padding-top: 1rem;
   }
 
+  .participantsHeadingHide {
+    display: block;
+  }
+
   .sidebar__accordian-button {
     display: block;
   }
@@ -244,10 +318,8 @@
     }
   }
 }
-
 /* utility classes */
-
 .self {
   border: 3px solid var(--color-pink);
   background: var(--color-pink-low-opacity);
-}
\ No newline at end of file
+}
diff --git a/app/styles/live.module.css b/app/styles/live.module.css
index 77f308891..1701358d0 100644
--- a/app/styles/live.module.css
+++ b/app/styles/live.module.css
@@ -1,69 +1,101 @@
 #live {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	max-width: 1024px;
-	margin: 1rem auto;
-	padding: 1rem;
-	min-height: 80vh;
-	position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  max-width: 1024px;
+  margin: 1rem auto;
+  padding: 1rem;
+  min-height: 80vh;
+  position: relative;
 }
 
 .live__loader-container {
-	display: grid;
-	place-items: center;
-	min-height: 60vh;
+  display: grid;
+  place-items: center;
+  min-height: 60vh;
 }
 
 .live__section {
-	min-height: 60vh;
+  min-height: 60vh;
 }
 
 .live__container {
-	display: flex;
-	justify-content: space-between;
-	width: 100%;
-	margin-top: 3.75rem;
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  margin-top: 3.75rem;
 }
 
 .live__video-container {
-	width: 70%;
-	aspect-ratio: 16/9;
+  width: 70%;
+  aspect-ratio: 16/9;
+}
+
+.live__video-container--show {
+  width: 100%;
+  aspect-ratio: 16/9;
 }
 
 .container__sidebar {
-	display: flex;
-	width: 28%;
+  display: flex;
+  width: 0%;
+}
+
+.container__sidebar--show {
+  width: 28%;
+}
+
+.container__sidebar--hide {
+  width: 0%;
 }
 
 .live__panel-container {
-	width: 100%;
-	height: 100px;
-	margin-top: 1rem;
+  width: 100%;
+  height: 100px;
+  margin-top: 1rem;
 }
 
-@media only screen and (max-width: 1025px) {
-	.live__video-container {
-		width: 100%;
-	}
+@media only screen and (max-width: 768px) {
+  .live__video-container {
+    width: 100%;
+  }
 
-	.container__sidebar {
-		width: 100%;
-		margin-top: 1rem;
-		display: flex;
-		justify-content: center;
-	}
+  .container__sidebar {
+    width: 100%;
+    margin-top: 1rem;
+    display: flex;
+    justify-content: center;
+  }
 
-	.live__container {
-		height: initial;
-		flex-direction: column;
-		align-items: center;
-		justify-content: space-between;
-	}
-}
+  .live__container {
+    height: initial;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+  }
+  @media only screen and (max-width: 1025px) {
+    .live__video-container {
+      width: 100%;
+    }
+
+    .container__sidebar {
+      width: 100%;
+      margin-top: 1rem;
+      display: flex;
+      justify-content: center;
+    }
 
-/* utils */
-.bg-black {
-	background-color: black;
-}
\ No newline at end of file
+    .live__container {
+      height: initial;
+      flex-direction: column;
+      align-items: center;
+      justify-content: space-between;
+    }
+  }
+
+  /* utils */
+  .bg-black {
+    background-color: black;
+  }
+}
diff --git a/app/templates/live.hbs b/app/templates/live.hbs
index 8bcbf865a..b20d85425 100644
--- a/app/templates/live.hbs
+++ b/app/templates/live.hbs
@@ -62,6 +62,7 @@
         <div class='live__container'>
           <div
             class='live__video-container
+              {{if this.isExpanded "live__video-container--show" ""}}
               {{if this.liveService.isScreenShareOn "bg-black" ""}}'
             data-test-video-container
           >
@@ -72,13 +73,24 @@
               <VideoScreen @src='/assets/starting-soon.mp4' />
             {{/if}}
           </div>
-          <div class='container__sidebar'>
+          <div
+            class='container__sidebar
+              {{if
+                this.isExpanded
+                "container__sidebar--hide"
+                "container__sidebar--show"
+              }}
+              '
+          >
             {{#if this.isLoading}}
               <Reusables::Skeleton />
             {{else}}
               <LiveSidebar
                 @openKickoutModal={{this.openKickoutModal}}
                 @peers={{this.liveService.peers}}
+                @hostProfilePicture={{this.login.userData.picture.url}}
+                @sidebarDisplayToggle={{this.sidebarDisplayToggle}}
+                @isExpanded={{this.isExpanded}}
               />
             {{/if}}
           </div>
@@ -93,6 +105,8 @@
               @role={{this.role}}
               @buttonClickHandler={{this.buttonClickHandler}}
               @openRoomCodeModal={{this.toggleRoomCodeModal}}
+              @sidebarDisplayToggle={{this.sidebarDisplayToggle}}
+              @isExpanded={{this.isExpanded}}
               @openWarningModal={{this.toggleWarningModal}}
             />
           {{/if}}