From: Marcin Haba <marcin.haba@bacula.pl>
Date: Tue, 16 Nov 2021 03:57:36 +0000 (+0100)
Subject: baculum: Improve wizards view and responsivity
X-Git-Tag: Release-11.3.2~120
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=dabdaa31c8336646cc5b9a1f06a4ab4e040d1be8;p=thirdparty%2Fbacula.git

baculum: Improve wizards view and responsivity
---

diff --git a/gui/baculum/protected/Common/Portlets/NewHost.tpl b/gui/baculum/protected/Common/Portlets/NewHost.tpl
index 8e9815b55..760dafc7a 100644
--- a/gui/baculum/protected/Common/Portlets/NewHost.tpl
+++ b/gui/baculum/protected/Common/Portlets/NewHost.tpl
@@ -3,7 +3,7 @@
 	<com:TActivePanel ID="NewHostAddError" Display="None" CssClass="w3-panel w3-red w3-padding-16" EnableViewState="false"><i class="fa fa-times"></i> &nbsp;<strong><%[ Problem during save to config file. Please check host config file permission. ]%></strong></com:TActivePanel>
 	<com:TActivePanel ID="NewHostAddExists" Display="None" CssClass="w3-panel w3-red w3-padding-16" EnableViewState="false"><i class="fa fa-times"></i> &nbsp;<strong><%[ Given host already exists in config file. ]%></strong></com:TActivePanel>
 </div>
-<div id="new_host" class="w3-container w3-margin w3-card-4" style="display: none">
+<div id="new_host" class="w3-container w3-margin" style="display: none">
 	<h2><%[ Add API host ]%></h2>
 	<div class="w3-row w3-section">
 		<div class="w3-col w3-third"><com:TLabel ForControl="APIProtocol" Text="<%[ Protocol: ]%>" /></div>
diff --git a/gui/baculum/protected/Web/Pages/NewBackupJobWizard.page b/gui/baculum/protected/Web/Pages/NewBackupJobWizard.page
index 2b1cce25e..178fc1a1b 100644
--- a/gui/baculum/protected/Web/Pages/NewBackupJobWizard.page
+++ b/gui/baculum/protected/Web/Pages/NewBackupJobWizard.page
@@ -2,8 +2,8 @@
 <com:TContent ID="Wizard">
 	<com:TWizard ID="NewJobWizard"
 		CssClass="wizard"
-		StepStyle.CssClass="steps"
-		HeaderStyle.CssClass="wizard-body"
+		StepStyle.CssClass="steps w3-container"
+		HeaderStyle.CssClass="wizard-body w3-container"
 		NavigationStyle.CssClass="navigation"
 		NavigationStyle.CustomStyle="margin-bottom: 55px"
 		UseDefaultLayout="false"
@@ -14,53 +14,53 @@
 		OnCompleteButtonClick="wizardCompleted"
 		>
 		<prop:HeaderTemplate>
-			<div class="w3-half">
+			<div class="w3-half w3-hide-small">
 				<div class="w3-third w3-padding-16">
 					<div class="step w3-padding w3-text-white w3-margin-right <%=($this->Parent->ActiveStepIndex === 0 ? 'w3-light-green' : 'w3-green')%>">
-						<div class="w3-left"><i class="fa fa-tasks w3-xxxlarge"></i></div>
+						<div class="w3-left"><i class="fa fa-tasks w3-xxlarge"></i></div>
 						<div class="w3-clear"></div>
 						<h4><com:TTranslate Text="General" /></h4>
 					</div>
 				</div>
 				<div class="w3-third w3-padding-16">
 					<div class="step w3-padding w3-text-white w3-margin-right <%=($this->Parent->ActiveStepIndex === 1 ? 'w3-light-green' : 'w3-green')%>">
-						<div class="w3-left"><i class="fa fa-upload w3-xxxlarge"></i></div>
+						<div class="w3-left"><i class="fa fa-upload w3-xxlarge"></i></div>
 						<div class="w3-clear"></div>
 						<h4><com:TTranslate Text="What" /></h4>
 					</div>
 				</div>
 				<div class="w3-third w3-padding-16">
 					<div class="step w3-padding w3-text-white w3-margin-right <%=($this->Parent->ActiveStepIndex === 2 ? 'w3-light-green' : 'w3-green')%>">
-						<div class="w3-left"><i class="fa fa-download w3-xxxlarge"></i></div>
+						<div class="w3-left"><i class="fa fa-download w3-xxlarge"></i></div>
 						<div class="w3-clear"></div>
 						<h4><com:TTranslate Text="Where" /></h4>
 					</div>
 				</div>
 			</div>
-			<div class="w3-half">
+			<div class="w3-half w3-hide-small">
 				<div class="w3-third w3-padding-16">
 					<div class="step w3-padding w3-text-white w3-margin-right <%=($this->Parent->ActiveStepIndex === 3  ? 'w3-light-green' : 'w3-green')%>">
-						<div class="w3-left"><i class="fa fa-question w3-xxxlarge"></i></div>
+						<div class="w3-left"><i class="fa fa-question w3-xxlarge"></i></div>
 						<div class="w3-clear"></div>
 						<h4><com:TTranslate Text="How" /></h4>
 					</div>
 				</div>
 				<div class="w3-third w3-padding-16">
 					<div class="step w3-padding w3-text-white w3-margin-right <%=($this->Parent->ActiveStepIndex === 4 ? 'w3-light-green' : 'w3-green')%>">
-						<div class="w3-left"><i class="fa fa-clock w3-xxxlarge"></i></div>
+						<div class="w3-left"><i class="fa fa-clock w3-xxlarge"></i></div>
 						<div class="w3-clear"></div>
 						<h4><com:TTranslate Text="When" /></h4>
 					</div>
 				</div>
 				<div class="w3-third w3-padding-16">
-					<div class="step w3-padding w3-text-white w3-margin-right <%=($this->Parent->ActiveStepIndex === 5 ? 'w3-light-green' : 'w3-green')%>">
-						<div class="w3-left"><i class="fa fa-paper-plane w3-xxxlarge"></i></div>
+					<div class="step w3-padding w3-text-white <%=($this->Parent->ActiveStepIndex === 5 ? 'w3-light-green' : 'w3-green')%>">
+						<div class="w3-left"><i class="fa fa-paper-plane w3-xxlarge"></i></div>
 						<div class="w3-clear"></div>
 						<h4><com:TTranslate Text="Summary" /></h4>
 					</div>
 				</div>
 			</div>
-			<div class="step_title w3-panel w3-green w3-margin-right"><h3><%=$this->Parent->ActiveStep->Title%></h3></div>
+			<div class="step_title w3-panel w3-green"><h4><%=$this->Parent->ActiveStep->Title%></h4></div>
 		</prop:HeaderTemplate>
 		<prop:StartNavigationTemplate>
 			<div class="w3-center w3-section">
@@ -133,12 +133,12 @@
 			</div>
 		</prop:FinishNavigationTemplate>
 		<com:TWizardStep ID="Step1" Title="<%[ Step 1 - basic information about new job ]%>" StepType="Auto">
-			<div class="w3-container">
-				<h2><%[ New backup job wizard ]%></h2>
-				<p><%[ This wizard enables you to create in easy way a new backup job. ]%></p>
-				<!--p><%[ To start please select job type that you wish to create. ]%></p-->
-			</div>
 			<div class="w3-half" style="float: none; margin: auto">
+				<div>
+					<h2><%[ New backup job wizard ]%></h2>
+					<p><%[ This wizard enables you to create in easy way a new backup job. ]%></p>
+					<!--p><%[ To start please select job type that you wish to create. ]%></p-->
+				</div>
 				<com:Application.Web.Portlets.DirectiveTextBox
 					ID="Name"
 					DirectiveName="Name"
@@ -170,12 +170,12 @@
 			</div>
 		</com:TWizardStep>
 		<com:TWizardStep ID="Step2" Title="<%[ Step 2 - what you want to backup ]%>" StepType="Auto">
-			<div class="w3-container">
-				<h2><%[ Client and FileSet ]%></h2>
-				<p><%[ Please select Client from which you want to backup data and please select FileSet with files/directories definition to backup. ]%></p>
-				<p><%[ If your FileSet for this backup does not exist yet, you can create it. ]%></p>
-			</div>
 			<div class="w3-half" style="float: none; margin: auto">
+				<div>
+					<h2><%[ Client and FileSet ]%></h2>
+					<p><%[ Please select Client from which you want to backup data and please select FileSet with files/directories definition to backup. ]%></p>
+					<p><%[ If your FileSet for this backup does not exist yet, you can create it. ]%></p>
+				</div>
 				<com:Application.Web.Portlets.DirectiveComboBox
 					ID="Client"
 					DirectiveName="Client"
@@ -224,11 +224,11 @@
 			</script>
 		</com:TWizardStep>
 		<com:TWizardStep ID="Step3" Title="<%[ Step 3 - where you want to backup ]%>" StepType="Auto">
-			<div class="w3-container">
-				<h2><%[ Storage and Pool ]%></h2>
-				<p><%[ Please select Storage where you want to backup data and please select Pool with volumes which Storage will use to store backup data. ]%></p>
-			</div>
 			<div class="w3-half" style="float: none; margin: auto">
+				<div>
+					<h2><%[ Storage and Pool ]%></h2>
+					<p><%[ Please select Storage where you want to backup data and please select Pool with volumes which Storage will use to store backup data. ]%></p>
+				</div>
 				<com:Application.Web.Portlets.DirectiveComboBox
 					ID="Storage"
 					DirectiveName="Storage"
diff --git a/gui/baculum/protected/Web/Pages/NewCopyJobWizard.page b/gui/baculum/protected/Web/Pages/NewCopyJobWizard.page
index 198760c39..a59c6d3c5 100644
--- a/gui/baculum/protected/Web/Pages/NewCopyJobWizard.page
+++ b/gui/baculum/protected/Web/Pages/NewCopyJobWizard.page
@@ -2,9 +2,8 @@
 <com:TContent ID="Wizard">
 	<com:TWizard ID="NewJobWizard"
 		CssClass="wizard"
-		StepStyle.CssClass="steps"
-		HeaderStyle.CssClass="wizard-body"
-		NavigationStyle.CssClass="w3-container"
+		StepStyle.CssClass="steps w3-container"
+		HeaderStyle.CssClass="wizard-body w3-container"
 		NavigationStyle.CustomStyle="margin-bottom: 55px"
 		UseDefaultLayout="false"
 		ShowSideBar="false"
@@ -14,53 +13,53 @@
 		OnCompleteButtonClick="wizardCompleted"
 		>
 		<prop:HeaderTemplate>
-			<div class="w3-half">
+			<div class="w3-half w3-hide-small">
 				<div class="w3-third w3-padding-16">
 					<div class="step w3-padding w3-text-white w3-margin-right <%=($this->Parent->ActiveStepIndex === 0 ? 'w3-light-green' : 'w3-green')%>">
-						<div class="w3-left"><i class="fa fa-tasks w3-xxxlarge"></i></div>
+						<div class="w3-left"><i class="fa fa-tasks w3-xxlarge"></i></div>
 						<div class="w3-clear"></div>
 						<h4><com:TTranslate Text="General" /></h4>
 					</div>
 				</div>
 				<div class="w3-third w3-padding-16">
 					<div class="step w3-padding w3-text-white w3-margin-right <%=($this->Parent->ActiveStepIndex === 1 ? 'w3-light-green' : 'w3-green')%>">
-						<div class="w3-left"><i class="fa fa-upload w3-xxxlarge"></i></div>
+						<div class="w3-left"><i class="fa fa-upload w3-xxlarge"></i></div>
 						<div class="w3-clear"></div>
 						<h4><com:TTranslate Text="What" /></h4>
 					</div>
 				</div>
 				<div class="w3-third w3-padding-16">
 					<div class="step w3-padding w3-text-white w3-margin-right <%=($this->Parent->ActiveStepIndex === 2 ? 'w3-light-green' : 'w3-green')%>">
-						<div class="w3-left"><i class="fa fa-question w3-xxxlarge"></i></div>
+						<div class="w3-left"><i class="fa fa-question w3-xxlarge"></i></div>
 						<div class="w3-clear"></div>
 						<h4><com:TTranslate Text="How" /></h4>
 					</div>
 				</div>
 			</div>
-			<div class="w3-half">
+			<div class="w3-half w3-hide-small">
 				<div class="w3-third w3-padding-16">
 					<div class="step w3-padding w3-text-white w3-margin-right <%=($this->Parent->ActiveStepIndex === 3  ? 'w3-light-green' : 'w3-green')%>">
-						<div class="w3-left"><i class="fa fa-download w3-xxxlarge"></i></div>
+						<div class="w3-left"><i class="fa fa-download w3-xxlarge"></i></div>
 						<div class="w3-clear"></div>
 						<h4><com:TTranslate Text="Where" /></h4>
 					</div>
 				</div>
 				<div class="w3-third w3-padding-16">
 					<div class="step w3-padding w3-text-white w3-margin-right <%=($this->Parent->ActiveStepIndex === 4 ? 'w3-light-green' : 'w3-green')%>">
-						<div class="w3-left"><i class="fa fa-clipboard-list w3-xxxlarge"></i></div>
+						<div class="w3-left"><i class="fa fa-clipboard-list w3-xxlarge"></i></div>
 						<div class="w3-clear"></div>
 						<h4><com:TTranslate Text="Options" /></h4>
 					</div>
 				</div>
 				<div class="w3-third w3-padding-16">
-					<div class="step w3-padding w3-text-white w3-margin-right <%=($this->Parent->ActiveStepIndex === 5 ? 'w3-light-green' : 'w3-green')%>">
-						<div class="w3-left"><i class="fa fa-paper-plane w3-xxxlarge"></i></div>
+					<div class="step w3-padding w3-text-white <%=($this->Parent->ActiveStepIndex === 5 ? 'w3-light-green' : 'w3-green')%>">
+						<div class="w3-left"><i class="fa fa-paper-plane w3-xxlarge"></i></div>
 						<div class="w3-clear"></div>
 						<h4><com:TTranslate Text="Summary" /></h4>
 					</div>
 				</div>
 			</div>
-			<div class="step_title w3-panel w3-green w3-margin-right"><h3><%=$this->Parent->ActiveStep->Title%></h3></div>
+			<div class="step_title w3-panel w3-green"><h4><%=$this->Parent->ActiveStep->Title%></h4></div>
 		</prop:HeaderTemplate>
 		<prop:StartNavigationTemplate>
 			<div class="w3-center w3-section">
@@ -133,11 +132,11 @@
 			</div>
 		</prop:FinishNavigationTemplate>
 		<com:TWizardStep ID="Step1" Title="<%[ Step 1 - basic information about new job ]%>" StepType="Auto">
-			<div class="w3-container">
-				<h2><%[ New copy job wizard ]%></h2>
-				<p><%[ Copy jobs run copying backup jobs data from one volume to another. It is done by reading the previously backed up data from volume and writing it to another volume in a different pool. All process runs without using file daemon. ]%></p>
-			</div>
 			<div class="w3-half" style="float: none; margin: auto">
+				<div>
+					<h2><%[ New copy job wizard ]%></h2>
+					<p><%[ Copy jobs run copying backup jobs data from one volume to another. It is done by reading the previously backed up data from volume and writing it to another volume in a different pool. All process runs without using file daemon. ]%></p>
+				</div>
 				<com:Application.Web.Portlets.DirectiveTextBox
 					ID="Name"
 					DirectiveName="Name"
@@ -169,12 +168,12 @@
 			</div>
 		</com:TWizardStep>
 		<com:TWizardStep ID="Step2" Title="<%[ Step 2 - what you want to copy ]%>" StepType="Auto">
-			<div class="w3-container">
-				<h2><%[ Source Pool ]%></h2>
-				<p><%[ Please select a pool from which you want to copy data. ]%></p>
-				<p><%[ The source pool will be examined for finding backup jobs to copy. ]%></p>
-			</div>
 			<div class="w3-half" style="float: none; margin: auto">
+				<div>
+					<h2><%[ Source Pool ]%></h2>
+					<p><%[ Please select a pool from which you want to copy data. ]%></p>
+					<p><%[ The source pool will be examined for finding backup jobs to copy. ]%></p>
+				</div>
 				<com:Application.Web.Portlets.DirectiveComboBox
 					ID="Pool"
 					DirectiveName="Pool"
@@ -187,12 +186,10 @@
 					Attributes.onchange="set_storage_from_pool(); oVolumeList.show_volumes_in_pool_btn(this.value);oVolumeList.show_volumes_in_pool_table(false);"
 					/>
 				<a id="volumes_in_pool_btn" href="javascript:void(0)" onclick="oVolumeList.load_data(document.getElementById('<%=$this->Pool->Directive->ClientID%>').value);" style="display: none; width: 300px; margin: 0 auto;"><%[ See volumes in selected pool ]%></a>
-			</div>
-			<div class="w3-container">
-				<h2><%[ Source Storage ]%></h2>
-				<p><%[ Please select a storage using which you want to read copy data. ]%></p>
-			</div>
-			<div class="w3-half" style="float: none; margin: auto">
+				<div>
+					<h2><%[ Source Storage ]%></h2>
+					<p><%[ Please select a storage using which you want to read copy data. ]%></p>
+				</div>
 				<com:Application.Web.Portlets.DirectiveComboBox
 					ID="SourceStorage"
 					DirectiveName="Storage"
@@ -203,6 +200,7 @@
 					ShowResetButton="false"
 					ShowRemoveButton="false"
 					/>
+			</div>
 				<com:TCallback ID="SetSourceStorageByPool" OnCallback="setSourceStorageByPool" />
 <script>
 function set_storage_from_pool() {
@@ -684,79 +682,79 @@ var oVolumeList = {
 </script>
 		</com:TWizardStep>
 		<com:TWizardStep ID="Step3" Title="<%[ Step 3 - how would you like to copy ]%>" StepType="Auto">
-			<div class="w3-container">
-				<h2><%[ Backup jobs selection criteria ]%></h2>
-				<p><%[ Please select the criteria that will be used for selecting backup jobs to copy. ]%></p>
-			</div>
 			<div class="w3-half" style="float: none; margin: auto">
-					<com:Application.Web.Portlets.DirectiveComboBox
-						ID="SelectionType"
-						DirectiveName="SelectionType"
-						Label="Selection Type"
-						Show="true"
-						ValidationGroup="NewCopyJobDirective"
-						Required="true"
-						ShowResetButton="false"
-						ShowRemoveButton="false"
-						Attributes.onchange="oSelectionType.show_opts(this.value);"
-						/>
-			</div>
-			<div id="selection_type_job" class="w3-half" style="float: none; display: none; margin: auto;">
-				<com:Application.Web.Portlets.DirectiveTextBox
-					ID="SelectionPatternJob"
-					DirectiveName="SelectionPattern"
-					Label="Selection Pattern Job"
-					Show="true"
-					ValidationGroup="NewCopyJobDirective"
-					Required="false"
-					ShowResetButton="false"
-					ShowRemoveButton="false"
-					/>
-				<a id="selection_type_jobs_btn" href="javascript:void(0)" onclick="oJobList.load_data();" style="display: block; width: 300px; margin: 0 auto;"><%[ See backup jobs ]%></a>
-			</div>
-			<div id="selection_type_client" class="w3-half" style="float: none; display: none; margin: auto;">
-				<com:Application.Web.Portlets.DirectiveTextBox
-					ID="SelectionPatternClient"
-					DirectiveName="SelectionPattern"
-					Label="Selection Pattern Client"
-					Show="true"
-					ValidationGroup="NewCopyJobDirective"
-					Required="false"
-					ShowResetButton="false"
-					ShowRemoveButton="false"
-					/>
-				<a id="selection_type_clients_btn" href="javascript:void(0)" onclick="oClientList.load_data();" style="display: block; width: 300px; margin: 0 auto;"><%[ See clients ]%></a>
-			</div>
-			<div id="selection_type_volume" class="w3-half" style="float: none; display: none; margin: auto;">
-				<com:Application.Web.Portlets.DirectiveTextBox
-					ID="SelectionPatternVolume"
-					DirectiveName="SelectionPattern"
-					Label="Selection Pattern Volume"
-					Show="true"
-					ValidationGroup="NewCopyJobDirective"
-					Required="false"
-					ShowResetButton="false"
-					ShowRemoveButton="false"
-					/>
-				<a id="selection_type_volumes_btn" href="javascript:void(0)" onclick="oVolumeList.load_data();" style="display: block; width: 300px; margin: 0 auto;"><%[ See volumes ]%></a>
-			</div>
-			<div id="selection_type_smallest_volume" style="display: none">
-			</div>
-			<div id="selection_type_oldest_volume" style="display: none">
-			</div>
-			<div id="selection_type_sql_query" class="w3-half" style="float: none; display: none; margin: auto;">
-				<com:Application.Web.Portlets.DirectiveTextBox
-					ID="SelectionPatternSQLQuery"
-					DirectiveName="SelectionPattern"
-					Label="Selection Pattern SQL Query"
+				<div>
+					<h2><%[ Backup jobs selection criteria ]%></h2>
+					<p><%[ Please select the criteria that will be used for selecting backup jobs to copy. ]%></p>
+				</div>
+				<com:Application.Web.Portlets.DirectiveComboBox
+					ID="SelectionType"
+					DirectiveName="SelectionType"
+					Label="Selection Type"
 					Show="true"
 					ValidationGroup="NewCopyJobDirective"
-					Required="false"
+					Required="true"
 					ShowResetButton="false"
 					ShowRemoveButton="false"
+					Attributes.onchange="oSelectionType.show_opts(this.value);"
 					/>
-			</div>
-			<div id="selection_type_uncopied_jobs" style="display: none">
+				<div id="selection_type_job" style="float: none; display: none; margin: auto;">
+					<com:Application.Web.Portlets.DirectiveTextBox
+						ID="SelectionPatternJob"
+						DirectiveName="SelectionPattern"
+						Label="Selection Pattern Job"
+						Show="true"
+						ValidationGroup="NewCopyJobDirective"
+						Required="false"
+						ShowResetButton="false"
+						ShowRemoveButton="false"
+						/>
+					<a id="selection_type_jobs_btn" href="javascript:void(0)" onclick="oJobList.load_data();" style="display: block; width: 300px; margin: 0 auto;"><%[ See backup jobs ]%></a>
+				</div>
+				<div id="selection_type_client" style="float: none; display: none; margin: auto;">
+					<com:Application.Web.Portlets.DirectiveTextBox
+						ID="SelectionPatternClient"
+						DirectiveName="SelectionPattern"
+						Label="Selection Pattern Client"
+						Show="true"
+						ValidationGroup="NewCopyJobDirective"
+						Required="false"
+						ShowResetButton="false"
+						ShowRemoveButton="false"
+						/>
+					<a id="selection_type_clients_btn" href="javascript:void(0)" onclick="oClientList.load_data();" style="display: block; width: 300px; margin: 0 auto;"><%[ See clients ]%></a>
+				</div>
+				<div id="selection_type_volume" style="float: none; display: none; margin: auto;">
+					<com:Application.Web.Portlets.DirectiveTextBox
+						ID="SelectionPatternVolume"
+						DirectiveName="SelectionPattern"
+						Label="Selection Pattern Volume"
+						Show="true"
+						ValidationGroup="NewCopyJobDirective"
+						Required="false"
+						ShowResetButton="false"
+						ShowRemoveButton="false"
+						/>
+					<a id="selection_type_volumes_btn" href="javascript:void(0)" onclick="oVolumeList.load_data();" style="display: block; width: 300px; margin: 0 auto;"><%[ See volumes ]%></a>
+				</div>
+				<div id="selection_type_smallest_volume" style="display: none">
+				</div>
+				<div id="selection_type_oldest_volume" style="display: none">
+				</div>
+				<div id="selection_type_sql_query" style="float: none; display: none; margin: auto;">
+					<com:Application.Web.Portlets.DirectiveTextBox
+						ID="SelectionPatternSQLQuery"
+						DirectiveName="SelectionPattern"
+						Label="Selection Pattern SQL Query"
+						Show="true"
+						ValidationGroup="NewCopyJobDirective"
+						Required="false"
+						ShowResetButton="false"
+						ShowRemoveButton="false"
+						/>
+				</div>
+				<div id="selection_type_uncopied_jobs" style="display: none">
+				</div>
 			</div>
 			<div id="selection_type_jobs_table" class="w3-container w3-margin" style="display: none">
 				<table id="job_list" class="w3-table w3-striped w3-hoverable w3-white w3-margin-bottom" style="width: 100%">
@@ -1600,22 +1598,23 @@ oSelectionType.init();
 </script>
 		</com:TWizardStep>
 		<com:TWizardStep ID="Step4" Title="<%[ Step 4 - where you like to copy ]%>" StepType="Auto">
-			<div class="w3-container">
-				<h2><%[ Destination Pool ]%></h2>
-				<p><%[ Please select destination pool to which will be stored data. ]%></p>
-			</div>
 			<div class="w3-half" style="float: none; margin: auto">
-				<com:Application.Web.Portlets.DirectiveComboBox
-					ID="NextPool"
-					DirectiveName="NextPool"
-					Label="Destination Pool (NextPool)"
-					Show="true"
-					ValidationGroup="NewCopyJobDirective"
-					Required="true"
-					ShowResetButton="false"
-					ShowRemoveButton="false"
-					Attributes.onchange="set_storage_from_nextpool();"
-					/>
+				<div>
+					<h2><%[ Destination Pool ]%></h2>
+					<p><%[ Please select destination pool to which will be stored data. ]%></p>
+				</div>
+				<div style="float: none; margin: auto">
+					<com:Application.Web.Portlets.DirectiveComboBox
+						ID="NextPool"
+						DirectiveName="NextPool"
+						Label="Destination Pool (NextPool)"
+						Show="true"
+						ValidationGroup="NewCopyJobDirective"
+						Required="true"
+						ShowResetButton="false"
+						ShowRemoveButton="false"
+						Attributes.onchange="set_storage_from_nextpool();"
+						/>
 			<com:TCallback ID="SetDestinationStorageByPool" OnCallback="setDestinationStorageByPool" />
 			<com:TCallback ID="GetJobsUsingPool" OnCallback="getJobsUsingPool" />
 <script>
@@ -1656,27 +1655,27 @@ function revert_storage() {
 	storage.value = previous_storage;
 }
 </script>
-			<div id="warning_message_box" class="w3-modal" style="display: none">
-				<div class="w3-modal-content w3-card-4 w3-animate-zoom" style="width:600px">
-					<header class="w3-container w3-orange">
-						<span onclick="revert_storage(); document.getElementById('warning_message_box').style.display='none'" class="w3-button w3-display-topright">×</span>
-						<h2><%[ Warning ]%></h2>
-					</header>
-					<div class="w3-panel w3-padding">
-						<p><strong><%[ Note. ]%></strong> <span id="warning_message_note"></span></p>
-					</div>
-					<div class="w3-container">
-						<a href="javascript:void(0)" onclick="$('#warning_message_job_list').slideToggle();"><%[ See all jobs that use the pool ]%></a>
-					</div>
-					<div id="warning_message_job_list" class="w3-panel w3-padding" style="display: none">
-						<ul id="warning_message_jobs"></ul>
+				<div id="warning_message_box" class="w3-modal" style="display: none">
+					<div class="w3-modal-content w3-card-4 w3-animate-zoom" style="width:600px">
+						<header class="w3-container w3-orange">
+							<span onclick="revert_storage(); document.getElementById('warning_message_box').style.display='none'" class="w3-button w3-display-topright">×</span>
+							<h2><%[ Warning ]%></h2>
+						</header>
+						<div class="w3-panel w3-padding">
+							<p><strong><%[ Note. ]%></strong> <span id="warning_message_note"></span></p>
+						</div>
+						<div class="w3-container">
+							<a href="javascript:void(0)" onclick="$('#warning_message_job_list').slideToggle();"><%[ See all jobs that use the pool ]%></a>
+						</div>
+						<div id="warning_message_job_list" class="w3-panel w3-padding" style="display: none">
+							<ul id="warning_message_jobs"></ul>
+						</div>
+						<footer class="w3-container w3-center">
+							<button type="button" class="w3-button w3-section w3-red" onclick="revert_storage(); document.getElementById('warning_message_box').style.display='none'"><i class="fa fa-times"></i> &nbsp;<%[ Cancel ]%></button>
+							<button type="button" class="w3-button w3-section w3-green" onclick="apply_storage(); document.getElementById('warning_message_box').style.display='none'"><i class="fa fa-check"></i> &nbsp;<%[ OK ]%></button>
+						</footer>
 					</div>
-					<footer class="w3-container w3-center">
-						<button type="button" class="w3-button w3-section w3-red" onclick="revert_storage(); document.getElementById('warning_message_box').style.display='none'"><i class="fa fa-times"></i> &nbsp;<%[ Cancel ]%></button>
-						<button type="button" class="w3-button w3-section w3-green" onclick="apply_storage(); document.getElementById('warning_message_box').style.display='none'"><i class="fa fa-check"></i> &nbsp;<%[ OK ]%></button>
-					</footer>
 				</div>
-			</div>
 <script>
 function show_storage_warning(storage, pool, jobs) {
 	if (jobs.length == 0) {
@@ -1699,30 +1698,31 @@ function show_storage_warning(storage, pool, jobs) {
 	warn_box.style.display = 'block';
 }
 </script>
-			</div>
-			<div class="w3-container">
-				<h2><%[ Destination Storage ]%></h2>
-				<p><%[ Please select a storage using which you want to write copied data. ]%></p>
-			</div>
-			<div class="w3-half" style="float: none; margin: auto">
-				<com:Application.Web.Portlets.DirectiveComboBox
-					ID="DestinationStorage"
-					DirectiveName="Storage"
-					Label="Destination Storage"
-					Show="true"
-					ValidationGroup="NewCopyJobDirective"
-					Required="true"
-					ShowResetButton="false"
-					ShowRemoveButton="false"
-					Attributes.onchange="set_storage(this.value);"
-					/>
+				</div>
+				<div>
+					<h2><%[ Destination Storage ]%></h2>
+					<p><%[ Please select a storage using which you want to write copied data. ]%></p>
+				</div>
+				<div style="float: none; margin: auto">
+					<com:Application.Web.Portlets.DirectiveComboBox
+						ID="DestinationStorage"
+						DirectiveName="Storage"
+						Label="Destination Storage"
+						Show="true"
+						ValidationGroup="NewCopyJobDirective"
+						Required="true"
+						ShowResetButton="false"
+						ShowRemoveButton="false"
+						Attributes.onchange="set_storage(this.value);"
+						/>
+				</div>
 			</div>
 		</com:TWizardStep>
 		<com:TWizardStep ID="Step5" Title="<%[ Step 5 - copy job options ]%>" StepType="Auto">
-			<div class="w3-container">
-				<h2><%[ Limits ]%></h2>
-			</div>
 			<div class="w3-half" style="float: none; margin: auto">
+				<div>
+					<h2><%[ Limits ]%></h2>
+				</div>
 				<com:Application.Web.Portlets.DirectiveTextBox
 					ID="MaximumSpawnedJobs"
 					DirectiveName="MaximumSpawnedJobs"
@@ -1732,11 +1732,9 @@ function show_storage_warning(storage, pool, jobs) {
 					ShowResetButton="false"
 					ShowRemoveButton="false"
 					/>
-			</div>
-			<div class="w3-container">
-				<h2><%[ Schedule ]%></h2>
-			</div>
-			<div class="w3-half" style="float: none; margin: auto">
+				<div>
+					<h2><%[ Schedule ]%></h2>
+				</div>
 				<com:Application.Web.Portlets.DirectiveComboBox
 					ID="Schedule"
 					DirectiveName="Schedule"
@@ -1745,11 +1743,9 @@ function show_storage_warning(storage, pool, jobs) {
 					ShowResetButton="false"
 					ShowRemoveButton="false"
 					/>
-			</div>
-			<div class="w3-container">
-				<h2><%[ Messages ]%></h2>
-			</div>
-			<div class="w3-half" style="float: none; margin: auto">
+				<div>
+					<h2><%[ Messages ]%></h2>
+				</div>
 				<com:Application.Web.Portlets.DirectiveComboBox
 					ID="Messages"
 					DirectiveName="Messages"
@@ -1760,42 +1756,42 @@ function show_storage_warning(storage, pool, jobs) {
 					ShowResetButton="false"
 					ShowRemoveButton="false"
 					/>
-			</div>
-			<div class="w3-half" style="float: none; margin: auto">
-				<a href="javascript:void(0)" onclick="$('#copy_job_wizard_other_options').slideToggle();"><%[ Other options ]%></a>
-			</div>
-			<div id="copy_job_wizard_other_options" class="w3-half" style="float: none; margin: auto; display: none;">
-				<p><%[ Level, Client and FileSet are not used during copy jobs running but they are required to define in copy job resource as the standard Job directives. ]%></p>
-				<com:Application.Web.Portlets.DirectiveComboBox
-					ID="Level"
-					DirectiveName="Level"
-					Label="Level"
-					Show="true"
-					ValidationGroup="NewCopyJobDirective"
-					Required="true"
-					ShowResetButton="false"
-					ShowRemoveButton="false"
-					/>
-				<com:Application.Web.Portlets.DirectiveComboBox
-					ID="Client"
-					DirectiveName="Client"
-					Label="Client"
-					Show="true"
-					ValidationGroup="NewCopyJobDirective"
-					Required="true"
-					ShowResetButton="false"
-					ShowRemoveButton="false"
-					/>
-				<com:Application.Web.Portlets.DirectiveComboBox
-					ID="FileSet"
-					DirectiveName="Fileset"
-					Label="FileSet"
-					Show="true"
-					ValidationGroup="NewCopyJobDirective"
-					Required="true"
-					ShowResetButton="false"
-					ShowRemoveButton="false"
-					/>
+				<div style="float: none; margin: auto">
+					<a href="javascript:void(0)" onclick="$('#copy_job_wizard_other_options').slideToggle();"><%[ Other options ]%></a>
+				</div>
+				<div id="copy_job_wizard_other_options" style="float: none; margin: auto; display: none;">
+					<p><%[ Level, Client and FileSet are not used during copy jobs running but they are required to define in copy job resource as the standard Job directives. ]%></p>
+					<com:Application.Web.Portlets.DirectiveComboBox
+						ID="Level"
+						DirectiveName="Level"
+						Label="Level"
+						Show="true"
+						ValidationGroup="NewCopyJobDirective"
+						Required="true"
+						ShowResetButton="false"
+						ShowRemoveButton="false"
+						/>
+					<com:Application.Web.Portlets.DirectiveComboBox
+						ID="Client"
+						DirectiveName="Client"
+						Label="Client"
+						Show="true"
+						ValidationGroup="NewCopyJobDirective"
+						Required="true"
+						ShowResetButton="false"
+						ShowRemoveButton="false"
+						/>
+					<com:Application.Web.Portlets.DirectiveComboBox
+						ID="FileSet"
+						DirectiveName="Fileset"
+						Label="FileSet"
+						Show="true"
+						ValidationGroup="NewCopyJobDirective"
+						Required="true"
+						ShowResetButton="false"
+						ShowRemoveButton="false"
+						/>
+				</div>
 			</div>
 		</com:TWizardStep>
 		<com:TWizardStep ID="Step6" Title="<%[ Step 6 - summary ]%>" StepType="Finish">
diff --git a/gui/baculum/protected/Web/Pages/NewMigrateJobWizard.page b/gui/baculum/protected/Web/Pages/NewMigrateJobWizard.page
index 2cbc4ee19..2930ff731 100644
--- a/gui/baculum/protected/Web/Pages/NewMigrateJobWizard.page
+++ b/gui/baculum/protected/Web/Pages/NewMigrateJobWizard.page
@@ -2,9 +2,8 @@
 <com:TContent ID="Wizard">
 	<com:TWizard ID="NewJobWizard"
 		CssClass="wizard"
-		StepStyle.CssClass="steps"
-		HeaderStyle.CssClass="wizard-body"
-		NavigationStyle.CssClass="w3-container"
+		StepStyle.CssClass="steps w3-container"
+		HeaderStyle.CssClass="wizard-body w3-container"
 		NavigationStyle.CustomStyle="margin-bottom: 55px"
 		UseDefaultLayout="false"
 		ShowSideBar="false"
@@ -14,53 +13,53 @@
 		OnCompleteButtonClick="wizardCompleted"
 		>
 		<prop:HeaderTemplate>
-			<div class="w3-half">
+			<div class="w3-half w3-hide-small">
 				<div class="w3-third w3-padding-16">
 					<div class="step w3-padding w3-text-white w3-margin-right <%=($this->Parent->ActiveStepIndex === 0 ? 'w3-light-green' : 'w3-green')%>">
-						<div class="w3-left"><i class="fa fa-tasks w3-xxxlarge"></i></div>
+						<div class="w3-left"><i class="fa fa-tasks w3-xxlarge"></i></div>
 						<div class="w3-clear"></div>
 						<h4><com:TTranslate Text="General" /></h4>
 					</div>
 				</div>
 				<div class="w3-third w3-padding-16">
 					<div class="step w3-padding w3-text-white w3-margin-right <%=($this->Parent->ActiveStepIndex === 1 ? 'w3-light-green' : 'w3-green')%>">
-						<div class="w3-left"><i class="fa fa-upload w3-xxxlarge"></i></div>
+						<div class="w3-left"><i class="fa fa-upload w3-xxlarge"></i></div>
 						<div class="w3-clear"></div>
 						<h4><com:TTranslate Text="What" /></h4>
 					</div>
 				</div>
 				<div class="w3-third w3-padding-16">
 					<div class="step w3-padding w3-text-white w3-margin-right <%=($this->Parent->ActiveStepIndex === 2 ? 'w3-light-green' : 'w3-green')%>">
-						<div class="w3-left"><i class="fa fa-question w3-xxxlarge"></i></div>
+						<div class="w3-left"><i class="fa fa-question w3-xxlarge"></i></div>
 						<div class="w3-clear"></div>
 						<h4><com:TTranslate Text="How" /></h4>
 					</div>
 				</div>
 			</div>
-			<div class="w3-half">
+			<div class="w3-half w3-hide-small">
 				<div class="w3-third w3-padding-16">
 					<div class="step w3-padding w3-text-white w3-margin-right <%=($this->Parent->ActiveStepIndex === 3  ? 'w3-light-green' : 'w3-green')%>">
-						<div class="w3-left"><i class="fa fa-download w3-xxxlarge"></i></div>
+						<div class="w3-left"><i class="fa fa-download w3-xxlarge"></i></div>
 						<div class="w3-clear"></div>
 						<h4><com:TTranslate Text="Where" /></h4>
 					</div>
 				</div>
 				<div class="w3-third w3-padding-16">
 					<div class="step w3-padding w3-text-white w3-margin-right <%=($this->Parent->ActiveStepIndex === 4 ? 'w3-light-green' : 'w3-green')%>">
-						<div class="w3-left"><i class="fa fa-clipboard-list w3-xxxlarge"></i></div>
+						<div class="w3-left"><i class="fa fa-clipboard-list w3-xxlarge"></i></div>
 						<div class="w3-clear"></div>
 						<h4><com:TTranslate Text="Options" /></h4>
 					</div>
 				</div>
 				<div class="w3-third w3-padding-16">
 					<div class="step w3-padding w3-text-white w3-margin-right <%=($this->Parent->ActiveStepIndex === 5 ? 'w3-light-green' : 'w3-green')%>">
-						<div class="w3-left"><i class="fa fa-paper-plane w3-xxxlarge"></i></div>
+						<div class="w3-left"><i class="fa fa-paper-plane w3-xxlarge"></i></div>
 						<div class="w3-clear"></div>
 						<h4><com:TTranslate Text="Summary" /></h4>
 					</div>
 				</div>
 			</div>
-			<div class="step_title w3-panel w3-green w3-margin-right"><h3><%=$this->Parent->ActiveStep->Title%></h3></div>
+			<div class="step_title w3-panel w3-green"><h4><%=$this->Parent->ActiveStep->Title%></h4></div>
 		</prop:HeaderTemplate>
 		<prop:StartNavigationTemplate>
 			<div class="w3-center w3-section">
@@ -133,11 +132,11 @@
 			</div>
 		</prop:FinishNavigationTemplate>
 		<com:TWizardStep ID="Step1" Title="<%[ Step 1 - basic information about new job ]%>" StepType="Auto">
-			<div class="w3-container">
-				<h2><%[ New migrate job wizard ]%></h2>
-				<p><%[ Migrate jobs run moving backup jobs data from one volume to another. It is done by reading the previously backed up data from volume and writing it to another volume in a different pool. The file catalog records associated with the original backup jobs are purged. All process runs without using file daemon. ]%></p>
-			</div>
 			<div class="w3-half" style="float: none; margin: auto">
+				<div>
+					<h2><%[ New migrate job wizard ]%></h2>
+					<p><%[ Migrate jobs run moving backup jobs data from one volume to another. It is done by reading the previously backed up data from volume and writing it to another volume in a different pool. The file catalog records associated with the original backup jobs are purged. All process runs without using file daemon. ]%></p>
+				</div>
 				<com:Application.Web.Portlets.DirectiveTextBox
 					ID="Name"
 					DirectiveName="Name"
@@ -169,12 +168,12 @@
 			</div>
 		</com:TWizardStep>
 		<com:TWizardStep ID="Step2" Title="<%[ Step 2 - what you want to migrate ]%>" StepType="Auto">
-			<div class="w3-container">
-				<h2><%[ Source Pool ]%></h2>
-				<p><%[ Please select a pool from which you want to migrate data. ]%></p>
-				<p><%[ The source pool will be examined for finding backup jobs to migrate. ]%></p>
-			</div>
 			<div class="w3-half" style="float: none; margin: auto">
+				<div>
+					<h2><%[ Source Pool ]%></h2>
+					<p><%[ Please select a pool from which you want to migrate data. ]%></p>
+					<p><%[ The source pool will be examined for finding backup jobs to migrate. ]%></p>
+				</div>
 				<com:Application.Web.Portlets.DirectiveComboBox
 					ID="Pool"
 					DirectiveName="Pool"
@@ -187,12 +186,10 @@
 					Attributes.onchange="set_storage_from_pool(); oVolumeList.show_volumes_in_pool_btn(this.value);oVolumeList.show_volumes_in_pool_table(false);"
 					/>
 				<a id="volumes_in_pool_btn" href="javascript:void(0)" onclick="oVolumeList.load_data(document.getElementById('<%=$this->Pool->Directive->ClientID%>').value);" style="display: none; width: 300px; margin: 0 auto;"><%[ See volumes in selected pool ]%></a>
-			</div>
-			<div class="w3-container">
-				<h2><%[ Source Storage ]%></h2>
-				<p><%[ Please select a storage using which you want to read migrate data. ]%></p>
-			</div>
-			<div class="w3-half" style="float: none; margin: auto">
+				<div>
+					<h2><%[ Source Storage ]%></h2>
+					<p><%[ Please select a storage using which you want to read migrate data. ]%></p>
+				</div>
 				<com:Application.Web.Portlets.DirectiveComboBox
 					ID="SourceStorage"
 					DirectiveName="Storage"
@@ -203,6 +200,7 @@
 					ShowResetButton="false"
 					ShowRemoveButton="false"
 					/>
+			</div>
 				<com:TCallback ID="SetSourceStorageByPool" OnCallback="setSourceStorageByPool" />
 <script>
 function set_storage_from_pool() {
@@ -684,11 +682,11 @@ var oVolumeList = {
 </script>
 		</com:TWizardStep>
 		<com:TWizardStep ID="Step3" Title="<%[ Step 3 - how would you like to migrate ]%>" StepType="Auto">
-			<div class="w3-container">
-				<h2><%[ Backup jobs selection criteria ]%></h2>
-				<p><%[ Please select the criteria that will be used for selecting backup jobs to migrate. ]%></p>
-			</div>
 			<div class="w3-half" style="float: none; margin: auto">
+				<div>
+					<h2><%[ Backup jobs selection criteria ]%></h2>
+					<p><%[ Please select the criteria that will be used for selecting backup jobs to migrate. ]%></p>
+				</div>
 				<com:Application.Web.Portlets.DirectiveComboBox
 					ID="SelectionType"
 					DirectiveName="SelectionType"
@@ -1674,11 +1672,11 @@ $(function() {
 </script>
 		</com:TWizardStep>
 		<com:TWizardStep ID="Step4" Title="<%[ Step 4 - where you like to migrate ]%>" StepType="Auto">
-			<div class="w3-container">
-				<h2><%[ Destination Pool ]%></h2>
-				<p><%[ Please select destination pool to which will be stored data. ]%></p>
-			</div>
 			<div class="w3-half" style="float: none; margin: auto">
+				<div>
+					<h2><%[ Destination Pool ]%></h2>
+					<p><%[ Please select destination pool to which will be stored data. ]%></p>
+				</div>
 				<com:Application.Web.Portlets.DirectiveComboBox
 					ID="NextPool"
 					DirectiveName="NextPool"
@@ -1731,27 +1729,27 @@ function revert_storage() {
 	storage.value = previous_storage;
 }
 </script>
-			<div id="warning_message_box" class="w3-modal" style="display: none">
-				<div class="w3-modal-content w3-card-4 w3-animate-zoom" style="width:600px">
-					<header class="w3-container w3-orange">
-						<span onclick="revert_storage(); document.getElementById('warning_message_box').style.display='none'" class="w3-button w3-display-topright">×</span>
-						<h2><%[ Warning ]%></h2>
-					</header>
-					<div class="w3-panel w3-padding">
-						<p><strong><%[ Note. ]%></strong> <span id="warning_message_note"></span></p>
-					</div>
-					<div class="w3-container">
-						<a href="javascript:void(0)" onclick="$('#warning_message_job_list').slideToggle();"><%[ See all jobs that use the pool ]%></a>
-					</div>
-					<div id="warning_message_job_list" class="w3-panel w3-padding" style="display: none">
-						<ul id="warning_message_jobs"></ul>
+				<div id="warning_message_box" class="w3-modal" style="display: none">
+					<div class="w3-modal-content w3-card-4 w3-animate-zoom" style="width:600px">
+						<header class="w3-container w3-orange">
+							<span onclick="revert_storage(); document.getElementById('warning_message_box').style.display='none'" class="w3-button w3-display-topright">×</span>
+							<h2><%[ Warning ]%></h2>
+						</header>
+						<div class="w3-panel w3-padding">
+							<p><strong><%[ Note. ]%></strong> <span id="warning_message_note"></span></p>
+						</div>
+						<div class="w3-container">
+							<a href="javascript:void(0)" onclick="$('#warning_message_job_list').slideToggle();"><%[ See all jobs that use the pool ]%></a>
+						</div>
+						<div id="warning_message_job_list" class="w3-panel w3-padding" style="display: none">
+							<ul id="warning_message_jobs"></ul>
+						</div>
+						<footer class="w3-container w3-center">
+							<button type="button" class="w3-button w3-section w3-red" onclick="revert_storage(); document.getElementById('warning_message_box').style.display='none'"><i class="fa fa-times"></i> &nbsp;<%[ Cancel ]%></button>
+							<button type="button" class="w3-button w3-section w3-green" onclick="apply_storage(); document.getElementById('warning_message_box').style.display='none'"><i class="fa fa-check"></i> &nbsp;<%[ OK ]%></button>
+						</footer>
 					</div>
-					<footer class="w3-container w3-center">
-						<button type="button" class="w3-button w3-section w3-red" onclick="revert_storage(); document.getElementById('warning_message_box').style.display='none'"><i class="fa fa-times"></i> &nbsp;<%[ Cancel ]%></button>
-						<button type="button" class="w3-button w3-section w3-green" onclick="apply_storage(); document.getElementById('warning_message_box').style.display='none'"><i class="fa fa-check"></i> &nbsp;<%[ OK ]%></button>
-					</footer>
 				</div>
-			</div>
 <script>
 function show_storage_warning(storage, pool, jobs) {
 	if (jobs.length == 0) {
@@ -1774,12 +1772,10 @@ function show_storage_warning(storage, pool, jobs) {
 	warn_box.style.display = 'block';
 }
 </script>
-			</div>
-			<div class="w3-container">
-				<h2><%[ Destination Storage ]%></h2>
-				<p><%[ Please select a storage using which you want to write migrated data. ]%></p>
-			</div>
-			<div class="w3-half" style="float: none; margin: auto">
+				<div>
+					<h2><%[ Destination Storage ]%></h2>
+					<p><%[ Please select a storage using which you want to write migrated data. ]%></p>
+				</div>
 				<com:Application.Web.Portlets.DirectiveComboBox
 					ID="DestinationStorage"
 					DirectiveName="Storage"
@@ -1794,10 +1790,10 @@ function show_storage_warning(storage, pool, jobs) {
 			</div>
 		</com:TWizardStep>
 		<com:TWizardStep ID="Step5" Title="<%[ Step 5 - migrate job options ]%>" StepType="Auto">
-			<div class="w3-container">
-				<h2><%[ Purge jobs ]%></h2>
-			</div>
 			<div class="w3-half" style="float: none; margin: auto">
+				<div>
+					<h2><%[ Purge jobs ]%></h2>
+				</div>
 				<com:Application.Web.Portlets.DirectiveCheckBox
 					ID="PurgeMigrationJob"
 					DirectiveName="PurgeMigrationJob"
@@ -1807,11 +1803,7 @@ function show_storage_warning(storage, pool, jobs) {
 					ShowResetButton="false"
 					ShowRemoveButton="false"
 					/>
-			</div>
-			<div class="w3-container">
 				<h2><%[ Limits ]%></h2>
-			</div>
-			<div class="w3-half" style="float: none; margin: auto">
 				<com:Application.Web.Portlets.DirectiveTextBox
 					ID="MaximumSpawnedJobs"
 					DirectiveName="MaximumSpawnedJobs"
@@ -1821,11 +1813,7 @@ function show_storage_warning(storage, pool, jobs) {
 					ShowResetButton="false"
 					ShowRemoveButton="false"
 					/>
-			</div>
-			<div class="w3-container">
 				<h2><%[ Schedule ]%></h2>
-			</div>
-			<div class="w3-half" style="float: none; margin: auto">
 				<com:Application.Web.Portlets.DirectiveComboBox
 					ID="Schedule"
 					DirectiveName="Schedule"
@@ -1834,11 +1822,9 @@ function show_storage_warning(storage, pool, jobs) {
 					ShowResetButton="false"
 					ShowRemoveButton="false"
 					/>
-			</div>
-			<div class="w3-container">
-				<h2><%[ Messages ]%></h2>
-			</div>
-			<div class="w3-half" style="float: none; margin: auto">
+				<div>
+					<h2><%[ Messages ]%></h2>
+				</div>
 				<com:Application.Web.Portlets.DirectiveComboBox
 					ID="Messages"
 					DirectiveName="Messages"
@@ -1849,42 +1835,40 @@ function show_storage_warning(storage, pool, jobs) {
 					ShowResetButton="false"
 					ShowRemoveButton="false"
 					/>
-			</div>
-			<div class="w3-half" style="float: none; margin: auto">
 				<a href="javascript:void(0)" onclick="$('#migrate_job_wizard_other_options').slideToggle();"><%[ Other options ]%></a>
-			</div>
-			<div id="migrate_job_wizard_other_options" class="w3-half" style="float: none; margin: auto; display: none;">
-				<p><%[ Level, Client and FileSet are not used during migrate jobs running but they are required to define in migrate job resource as the standard Job directives. ]%></p>
-				<com:Application.Web.Portlets.DirectiveComboBox
-					ID="Level"
-					DirectiveName="Level"
-					Label="Level"
-					Show="true"
-					ValidationGroup="NewMigrateJobDirective"
-					Required="true"
-					ShowResetButton="false"
-					ShowRemoveButton="false"
-					/>
-				<com:Application.Web.Portlets.DirectiveComboBox
-					ID="Client"
-					DirectiveName="Client"
-					Label="Client"
-					Show="true"
-					ValidationGroup="NewMigrateJobDirective"
-					Required="true"
-					ShowResetButton="false"
-					ShowRemoveButton="false"
-					/>
-				<com:Application.Web.Portlets.DirectiveComboBox
-					ID="FileSet"
-					DirectiveName="Fileset"
-					Label="FileSet"
-					Show="true"
-					ValidationGroup="NewMigrateJobDirective"
-					Required="true"
-					ShowResetButton="false"
-					ShowRemoveButton="false"
-					/>
+				<div id="migrate_job_wizard_other_options" style="float: none; margin: auto; display: none;">
+					<p><%[ Level, Client and FileSet are not used during migrate jobs running but they are required to define in migrate job resource as the standard Job directives. ]%></p>
+					<com:Application.Web.Portlets.DirectiveComboBox
+						ID="Level"
+						DirectiveName="Level"
+						Label="Level"
+						Show="true"
+						ValidationGroup="NewMigrateJobDirective"
+						Required="true"
+						ShowResetButton="false"
+						ShowRemoveButton="false"
+						/>
+					<com:Application.Web.Portlets.DirectiveComboBox
+						ID="Client"
+						DirectiveName="Client"
+						Label="Client"
+						Show="true"
+						ValidationGroup="NewMigrateJobDirective"
+						Required="true"
+						ShowResetButton="false"
+						ShowRemoveButton="false"
+						/>
+					<com:Application.Web.Portlets.DirectiveComboBox
+						ID="FileSet"
+						DirectiveName="Fileset"
+						Label="FileSet"
+						Show="true"
+						ValidationGroup="NewMigrateJobDirective"
+						Required="true"
+						ShowResetButton="false"
+						ShowRemoveButton="false"
+						/>
+				</div>
 			</div>
 		</com:TWizardStep>
 		<com:TWizardStep ID="Step6" Title="<%[ Step 6 - summary ]%>" StepType="Finish">
diff --git a/gui/baculum/protected/Web/Pages/RestoreWizard.page b/gui/baculum/protected/Web/Pages/RestoreWizard.page
index 954ea7089..6cd7217e4 100644
--- a/gui/baculum/protected/Web/Pages/RestoreWizard.page
+++ b/gui/baculum/protected/Web/Pages/RestoreWizard.page
@@ -14,53 +14,53 @@
 		OnCompleteButtonClick="wizardCompleted"
 		>
 		<prop:HeaderTemplate>
-			<div class="w3-half">
+			<div class="w3-half w3-hide-small">
 				<div class="w3-third w3-padding-16">
 					<div class="step w3-padding w3-text-white w3-margin-right <%=($this->Parent->ActiveStepIndex === 0 ? 'w3-light-green' : 'w3-green')%>">
-						<div class="w3-left"><i class="fa fa-desktop w3-xxxlarge"></i></div>
+						<div class="w3-left"><i class="fa fa-desktop w3-xxlarge"></i></div>
 						<div class="w3-clear"></div>
 						<h4><com:TTranslate Text="Client" /></h4>
 					</div>
 				</div>
 				<div class="w3-third w3-padding-16">
 					<div class="step w3-padding w3-text-white w3-margin-right <%=($this->Parent->ActiveStepIndex === 1 ? 'w3-light-green' : 'w3-green')%>">
-						<div class="w3-left"><i class="fa fa-tasks w3-xxxlarge"></i></div>
+						<div class="w3-left"><i class="fa fa-tasks w3-xxlarge"></i></div>
 						<div class="w3-clear"></div>
 						<h4><com:TTranslate Text="Backup" /></h4>
 					</div>
 				</div>
 				<div class="w3-third w3-padding-16">
 					<div class="step w3-padding w3-text-white w3-margin-right <%=($this->Parent->ActiveStepIndex === 2 ? 'w3-light-green' : 'w3-green')%>">
-						<div class="w3-left"><i class="fa fa-copy w3-xxxlarge"></i></div>
+						<div class="w3-left"><i class="fa fa-copy w3-xxlarge"></i></div>
 						<div class="w3-clear"></div>
 						<h4><com:TTranslate Text="Files" /></h4>
 					</div>
 				</div>
 			</div>
-			<div class="w3-half">
+			<div class="w3-half w3-hide-small">
 				<div class="w3-third w3-padding-16">
 					<div class="step w3-padding w3-text-white w3-margin-right <%=($this->Parent->ActiveStepIndex === 3  ? 'w3-light-green' : 'w3-green')%>">
-						<div class="w3-left"><i class="fa fa-download w3-xxxlarge"></i></div>
+						<div class="w3-left"><i class="fa fa-download w3-xxlarge"></i></div>
 						<div class="w3-clear"></div>
 						<h4><com:TTranslate Text="Where" /></h4>
 					</div>
 				</div>
 				<div class="w3-third w3-padding-16">
 					<div class="step w3-padding w3-text-white w3-margin-right <%=($this->Parent->ActiveStepIndex === 4 ? 'w3-light-green' : 'w3-green')%>">
-						<div class="w3-left"><i class="fa fa-clipboard-list w3-xxxlarge"></i></div>
+						<div class="w3-left"><i class="fa fa-clipboard-list w3-xxlarge"></i></div>
 						<div class="w3-clear"></div>
 						<h4><com:TTranslate Text="Options" /></h4>
 					</div>
 				</div>
 				<div class="w3-third w3-padding-16">
-					<div class="step w3-padding w3-text-white w3-margin-right <%=($this->Parent->ActiveStepIndex === 5 ? 'w3-light-green' : 'w3-green')%>">
-						<div class="w3-left"><i class="fa fa-paper-plane w3-xxxlarge"></i></div>
+					<div class="step w3-padding w3-text-white <%=($this->Parent->ActiveStepIndex === 5 ? 'w3-light-green' : 'w3-green')%>">
+						<div class="w3-left"><i class="fa fa-paper-plane w3-xxlarge"></i></div>
 						<div class="w3-clear"></div>
 						<h4><com:TTranslate Text="Run" /></h4>
 					</div>
 				</div>
 			</div>
-			<div class="step_title w3-panel w3-green w3-margin-right"><h3><%=$this->Parent->ActiveStep->Title%></h3></div>
+			<div class="step_title w3-panel w3-green"><h4><%=$this->Parent->ActiveStep->Title%></h4></div>
 		</prop:HeaderTemplate>
 		<prop:StartNavigationTemplate>
 			<div class="w3-center w3-section">
@@ -105,6 +105,9 @@
 		 
 		<prop:FinishNavigationTemplate>
 			<div class="w3-center w3-section">
+				<com:TLinkButton CommandName="Cancel" CssClass="w3-button w3-red">
+					<i class="fa fa-times"></i> &nbsp;<%[ Cancel ]%>
+				</com:TLinkButton>
 				<com:TLinkButton
 					CommandName="PreviousStep"
 					CausesValidation="false"
@@ -121,50 +124,57 @@
 			</div>
 		</prop:FinishNavigationTemplate>
 		<com:TWizardStep ID="Step1" Title="<%[ Step 1 - select source backup client ]%>" StepType="Auto">
-			<h2><%[ Restore wizard ]%></h2>
-			<p>
-				<%[ This wizard enables you to do in easy way restore files to destination Bacula Client. ]%>
-				<%[ To start, please select backup Client which data you want to restore. ]%>
-			</p>
-			<div class="w3-container">
-				<div class="w3-third"><com:TLabel ForControl="BackupClient" Text="<%[ Backup from client: ]%>" /></div>
-				<div class="w3-third">
-					<com:TDropDownList ID="BackupClient" CssClass="w3-select w3-border" CausesValidation="false" />
+			<div class="w3-half" style="margin: auto; float: none;">
+				<h2><%[ Restore wizard ]%></h2>
+				<p>
+					<%[ This wizard enables you to do in easy way restore files to destination Bacula Client. ]%>
+					<%[ To start, please select backup Client which data you want to restore. ]%>
+				</p>
+				<div class="w3-panel">
+					<div class="w3-third"><com:TLabel ForControl="BackupClient" Text="<%[ Backup from client: ]%>" /></div>
+					<div class="w3-third">
+						<com:TDropDownList ID="BackupClient" CssClass="w3-select w3-border" CausesValidation="false" />
+					</div>
 				</div>
-			</div>
-			<div class="w3-container w3-section">
-				<div class="w3-third"><com:TLabel ForControl="EnableCopyJobRestore" Text="<%[ Enable restore from copy jobs feature: ]%>" /></div>
-				<div class="w3-third">
-					<com:TCheckBox ID="EnableCopyJobRestore" CssClass="w3-check" CausesValidation="false" Checked="true" />
+				<div class="w3-section">
+					<div class="w3-third"><com:TLabel ForControl="EnableCopyJobRestore" Text="<%[ Enable restore from copy jobs feature: ]%>" /></div>
+					<div class="w3-third">
+						<com:TCheckBox ID="EnableCopyJobRestore" CssClass="w3-check" CausesValidation="false" Checked="true" />
+					</div>
 				</div>
 			</div>
 		</com:TWizardStep>
 		<com:TWizardStep ID="Step2" Title="<%[ Step 2 - select backup to restore ]%>" StepType="Auto">
-			<p>
-				<%[ There are two ways to select backup to restore. The selected backup way provides list of jobs from which there is possible to select a job. If you need the latest backups from the Client alternatively you can use Group most recent backups way which will select backups for you basing on backup job name and fileset resource. ]%>
-			</p>
-			<div class="w3-container w3-padding-16">
-				<div class="w3-col w3-third"><com:TLabel Text="<%[ Backup selection method: ]%>" /></div>
-				<div class="w3-col w3-third">
-					<com:TRadioButton
-						ID="OnlySelectedBackupSelection"
-						GroupName="BackupSelection"
-						CssClass="w3-radio"
-						Checked="true"
-						Attributes.onclick="$('#group_backup_to_restore_field').hide(); $('#backup_to_restore_field').show();"
-					/>
-					<com:TLabel ForControl="OnlySelectedBackupSelection" Text="<%[ Selected backup ]%>" /> &nbsp;
-					<com:TRadioButton
-						ID="GroupBackupSelection"
-						GroupName="BackupSelection"
-						CssClass="w3-radio"
-						Attributes.onclick="$('#backup_to_restore_field').hide(); $('#group_backup_to_restore_field').show();"
-					/>
-					<com:TLabel ForControl="GroupBackupSelection" Text="<%[ Group most recent backups ]%>" /></div>
+			<div class="w3-margin-bottom">
+				<div class="w3-threequarter w3-section" style="float: none; margin: auto">
+					<p class="w3-hide-small">
+						<%[ There are two ways to select backup to restore. The selected backup way provides list of jobs from which there is possible to select a job. If you need the latest backups from the Client alternatively you can use Group most recent backups way which will select backups for you basing on backup job name and fileset resource. ]%>
+					</p>
+					<div class="w3-third"><com:TLabel Text="<%[ Backup selection method: ]%>" /></div>
+					<div class="w3-third">
+						<com:TRadioButton
+							ID="OnlySelectedBackupSelection"
+							GroupName="BackupSelection"
+							CssClass="w3-radio"
+							Checked="true"
+							Attributes.onclick="$('#group_backup_to_restore_field').hide(); $('#backup_to_restore_field').show();"
+						/>
+						<com:TLabel ForControl="OnlySelectedBackupSelection" Text="<%[ Selected backup ]%>" />
+						<i class="fas fa-info-circle help_icon w3-text-green"style="margin-left: 0 !important;"  onclick="$('#backup_to_restore_info').slideToggle('fast');"></i> &nbsp;
+						<com:TRadioButton
+							ID="GroupBackupSelection"
+							GroupName="BackupSelection"
+							CssClass="w3-radio"
+							Attributes.onclick="$('#backup_to_restore_field').hide(); $('#group_backup_to_restore_field').show();"
+						/>
+						<com:TLabel ForControl="GroupBackupSelection" Text="<%[ Group most recent backups ]%>" />
+					</div>
+					<div class="w3-clear"></div>
+					<p id="backup_to_restore_info" class="w3-section" style="display: none"><strong><%[ Note: if you select incremental or differential backup, on the next step will be also loaded all directories and files from older backups required to do the job restore. In other words, the selected backup determines time point from which will be loaded the selected backup and other older backups (incremental, differential) backups up till closest full backup. ]%></strong></p>
+					<span id="no_backup_to_restore_msg" class="w3-text-red w3-section" style="display: none"><%[ There is no backup for restore. Please go to previous step and select another client for restore or proceed backups for the client selected in previous step. ]%></span>
+				</div>
 			</div>
-			<span id="no_backup_to_restore_msg" class="w3-text-red" style="display: none"><%[ There is no backup for restore. Please go to previous step and select another client for restore or proceed backups for the client selected in previous step. ]%></span>
 			<div id="backup_to_restore_field" style="display: <%=!$this->OnlySelectedBackupSelection->Checked ? 'none' : 'block'%>">
-				<p><strong><%[ Note: if you select incremental or differential backup, on the next step will be also loaded all directories and files from older backups required to do the job restore. In other words, the selected backup determines time point from which will be loaded the selected backup and other older backups (incremental, differential) backups up till closest full backup. ]%></strong></p>
 				<div id="table_filters_body">
 					<span class="text"><%[ Find job by filename (without path): ]%></span> <input type="text" class="w3-text" id="restore_wizard_find_job_by_filename" /> <i id="restore_wizard_find_job_by_filename_btn" class="fas fa-search" style="cursor: pointer; margin-right: 10px;"></i>
 					<span  title="<%[ With this option are searched files with names equal provided filename, otherwise there are searched files with names containing provided filename like *filename*. ]%>" style="margin-right: 10px"><input type="checkbox" class="w3-check" id="restore_wizard_find_strict" value="1" /> <span class="text"><%[ match exact filename ]%></span></span>
@@ -543,24 +553,27 @@ $(function() {
 </script>
 			</div>
 			<div id="group_backup_to_restore_field" style="display: <%=!$this->GroupBackupSelection->Checked ? 'none' : 'block'%>">
-				<div class="w3-section w3-row">
-					<div class="w3-col w3-third"><com:TLabel ForControl="GroupBackupToRestore" Text="<%[ Backup to restore: ]%>" /></div>
-					<div class="w3-col w3-third">
-						<com:TDropDownList
-							ID="GroupBackupToRestore"
-							CssClass="w3-select w3-border"
-							CausesValidation="false"
-						/>
+			<div class="w3-container w3-margin-bottom">
+				<div class="w3-threequarter" style="float: none; margin: auto">
+					<div class="w3-section w3-row">
+						<div class="w3-col w3-third"><com:TLabel ForControl="GroupBackupToRestore" Text="<%[ Backup to restore: ]%>" /></div>
+						<div class="w3-col w3-third">
+							<com:TDropDownList
+								ID="GroupBackupToRestore"
+								CssClass="w3-select w3-border"
+								CausesValidation="false"
+							/>
+						</div>
 					</div>
-				</div>
-				<div class="w3-section w3-row">
-					<div class="w3-col w3-third"><com:TLabel ForControl="GroupBackupFileSet" Text="<%[ FileSet resource: ]%>" /></div>
-					<div class="w3-col w3-third">
-						<com:TDropDownList
-							ID="GroupBackupFileSet"
-							CssClass="w3-select w3-border"
-							CausesValidation="false"
-						/>
+					<div class="w3-section w3-row">
+						<div class="w3-col w3-third"><com:TLabel ForControl="GroupBackupFileSet" Text="<%[ FileSet resource: ]%>" /></div>
+						<div class="w3-col w3-third">
+							<com:TDropDownList
+								ID="GroupBackupFileSet"
+								CssClass="w3-select w3-border"
+								CausesValidation="false"
+							/>
+						</div>
 					</div>
 				</div>
 			</div>
@@ -1268,90 +1281,94 @@ $(function() {
 			</script>
 		</com:TWizardStep>
 		<com:TWizardStep ID="Step4" Title="<%[ Step 4 - select destination for restore ]%>" StepType="Auto">
-			<div class="w3-section w3-row">
-				<div class="w3-col w3-third"><com:TLabel ForControl="RestoreClient" Text="<%[ Restore to client: ]%>" /></div>
-				<div class="w3-col w3-third">
-					<com:TDropDownList ID="RestoreClient" CssClass="w3-select w3-border" CausesValidation="false" />
+			<div class="w3-half" style="margin: auto; float: none">
+				<div class="w3-section w3-row">
+					<div class="w3-col w3-third"><com:TLabel ForControl="RestoreClient" Text="<%[ Restore to client: ]%>" /></div>
+					<div class="w3-col w3-third">
+						<com:TDropDownList ID="RestoreClient" CssClass="w3-select w3-border" CausesValidation="false" />
+					</div>
 				</div>
-			</div>
-			<div class="w3-section w3-row">
-				<div class="w3-col w3-third"><com:TLabel ForControl="RestorePath" Text="<%[ Restore to directory: ]%>" /></div>
-				<div class="w3-col w3-third"><com:TTextBox ID="RestorePath" CssClass="w3-input w3-border" Text="/tmp/restore" /></div>
-			</div>
-			<hr style="w3-margin" />
-			<p><%[ During restore there will be used following volumes: ]%></p>
-			<com:TRepeater ID="RestoreVolumes">
-				<prop:HeaderTemplate>
-					<table class="w3-table w3-striped w3-border w3-hoverable w3-white w3-margin-bottom" style="width: 50%">
-						<thead>
+				<div class="w3-section w3-row">
+					<div class="w3-col w3-third"><com:TLabel ForControl="RestorePath" Text="<%[ Restore to directory: ]%>" /></div>
+					<div class="w3-col w3-third"><com:TTextBox ID="RestorePath" CssClass="w3-input w3-border" Text="/tmp/restore" /></div>
+				</div>
+				<hr style="w3-margin" />
+				<p><%[ During restore there will be used following volumes: ]%></p>
+				<com:TRepeater ID="RestoreVolumes">
+					<prop:HeaderTemplate>
+						<table class="w3-table w3-striped w3-border w3-hoverable w3-white w3-margin-bottom" style="width: 100%">
+							<thead>
+								<tr>
+									<th><%[ In Changer ]%></th>
+									<th><%[ Volume ]%></th>
+								</tr>
+							</thead>
+					</prop:HeaderTemplate>
+					<prop:ItemTemplate>
 							<tr>
-								<th><%[ In Changer ]%></th>
-								<th><%[ Volume ]%></th>
+								<td class="center"><com:TLabel Text="<%#($this->Data['inchanger'] == 1 ? Prado::localize('Yes') : Prado::localize('No'))%>" /></td>
+								<td> <i class="fa fa-hdd w3-text-black"></i> <com:TLabel Text="<%#$this->Data['volume']%>" /></td>
 							</tr>
-						</thead>
-				</prop:HeaderTemplate>
-				<prop:ItemTemplate>
-						<tr>
-							<td class="center"><com:TLabel Text="<%#($this->Data['inchanger'] == 1 ? Prado::localize('Yes') : Prado::localize('No'))%>" /></td>
-							<td> <i class="fa fa-hdd w3-text-black"></i> <com:TLabel Text="<%#$this->Data['volume']%>" /></td>
-						</tr>
-				</prop:ItemTemplate>
-				<prop:FooterTemplate>
-					</table>
-				</prop:FooterTemplate>
-			</com:TRepeater>
+					</prop:ItemTemplate>
+					<prop:FooterTemplate>
+						</table>
+					</prop:FooterTemplate>
+				</com:TRepeater>
+			</div>
 		</com:TWizardStep>
 		<com:TWizardStep ID="Step5" Title="<%[ Step 5 - options for restore ]%>" StepType="Auto">
-			<div class="w3-section w3-row">
-				<div class="w3-col w3-third"><com:TLabel ForControl="RestoreJob" Text="<%[ Restore job: ]%>" /></div>
-				<div class="w3-col w3-third">
-					<com:TDropDownList ID="RestoreJob" CssClass="w3-select w3-border" CausesValidation="false" />
-				</div>
-			</div>
-			<div class="w3-section w3-row">
-				<div class="w3-col w3-third"><com:TLabel ForControl="ReplaceFiles" Text="<%[ Replace files: ]%>" /></div>
-				<div class="w3-col w3-third">
-					<com:TDropDownList ID="ReplaceFiles" CssClass="w3-select w3-border" CausesValidation="false">
-						<com:TListItem Value="never" Text="<%[ do not replace files ]%>" />
-						<com:TListItem Value="ifolder" Text="<%[ if files from restore are older]%>" />
-						<com:TListItem Value="ifnewer" Text="<%[ if files from restore are newer]%>" />
-						<com:TListItem Value="always" Text="<%[ always replace files ]%>" />
-					</com:TDropDownList>
-				</div>
-			</div>
-			<div class="w3-section w3-row w3-margin-bottom">
-				<div class="w3-col w3-third"><%[ File relocation option:  ]%></div>
-				<div class="w3-col w3-third">
-					<input type="radio" name="file_relocation" id="file_relocation_1" value="1" class="w3-radio" onclick="switch_file_relocation_mode(this.value)" /> <label for="file_relocation_1"><%[ Do not relocate files ]%></label><br />
-					<input type="radio" name="file_relocation" id="file_relocation_2" value="2" class="w3-radio" onclick="switch_file_relocation_mode(this.value)" /> <label for="file_relocation_2"><%[ Relocate files with prefix and/or suffix ]%></label><br />
-					<input type="radio" name="file_relocation" id="file_relocation_3" value="3" class="w3-radio" onclick="switch_file_relocation_mode(this.value)" /> <label for="file_relocation_3"><%[ Relocate files with regular expression ]%></label>
-				</div>
-			</div>
-			<div id="file_relocation_prefix_suffix" style="display: none">
+			<div class="w3-half" style="margin: auto; float: none">
 				<div class="w3-section w3-row">
-					<div class="w3-col w3-third"><com:TLabel ForControl="RestoreStripPrefix" Text="<%[ Strip prefix: ]%>" /></div>
+					<div class="w3-col w3-third"><com:TLabel ForControl="RestoreJob" Text="<%[ Restore job: ]%>" /></div>
 					<div class="w3-col w3-third">
-						<com:TTextBox ID="RestoreStripPrefix" CssClass="w3-input w3-border" CausesValidation="false" />
+						<com:TDropDownList ID="RestoreJob" CssClass="w3-select w3-border" CausesValidation="false" />
 					</div>
 				</div>
 				<div class="w3-section w3-row">
-					<div class="w3-col w3-third"><com:TLabel ForControl="RestoreAddPrefix" Text="<%[ Add prefix: ]%>" /></div>
+					<div class="w3-col w3-third"><com:TLabel ForControl="ReplaceFiles" Text="<%[ Replace files: ]%>" /></div>
 					<div class="w3-col w3-third">
-						<com:TTextBox ID="RestoreAddPrefix" CssClass="w3-input w3-border" CausesValidation="false" />
+						<com:TDropDownList ID="ReplaceFiles" CssClass="w3-select w3-border" CausesValidation="false">
+							<com:TListItem Value="never" Text="<%[ do not replace files ]%>" />
+							<com:TListItem Value="ifolder" Text="<%[ if files from restore are older]%>" />
+							<com:TListItem Value="ifnewer" Text="<%[ if files from restore are newer]%>" />
+							<com:TListItem Value="always" Text="<%[ always replace files ]%>" />
+						</com:TDropDownList>
 					</div>
 				</div>
-				<div class="w3-section w3-row">
-					<div class="w3-col w3-third"><com:TLabel ForControl="RestoreAddSuffix" Text="<%[ Add suffix: ]%>" /></div>
+				<div class="w3-section w3-row w3-margin-bottom">
+					<div class="w3-col w3-third"><%[ File relocation option:  ]%></div>
 					<div class="w3-col w3-third">
-						<com:TTextBox ID="RestoreAddSuffix" CssClass="w3-input w3-border" CausesValidation="false" />
+						<input type="radio" name="file_relocation" id="file_relocation_1" value="1" class="w3-radio" onclick="switch_file_relocation_mode(this.value)" /> <label for="file_relocation_1"><%[ Do not relocate files ]%></label><br />
+						<input type="radio" name="file_relocation" id="file_relocation_2" value="2" class="w3-radio" onclick="switch_file_relocation_mode(this.value)" /> <label for="file_relocation_2"><%[ Relocate files with prefix and/or suffix ]%></label><br />
+						<input type="radio" name="file_relocation" id="file_relocation_3" value="3" class="w3-radio" onclick="switch_file_relocation_mode(this.value)" /> <label for="file_relocation_3"><%[ Relocate files with regular expression ]%></label>
 					</div>
 				</div>
-			</div>
-			<div id="file_relocation_regex_where" style="display: none">
-				<div class="w3-section w3-row">
-					<div class="w3-col w3-third"><com:TLabel ForControl="RestoreRegexWhere" Text="<%[ RegexWhere: ]%>" /></div>
-					<div class="w3-col w3-third">
-						<com:TTextBox ID="RestoreRegexWhere" CssClass="w3-input w3-border" CausesValidation="false" />
+				<div id="file_relocation_prefix_suffix" style="display: none">
+					<div class="w3-section w3-row">
+						<div class="w3-col w3-third"><com:TLabel ForControl="RestoreStripPrefix" Text="<%[ Strip prefix: ]%>" /></div>
+						<div class="w3-col w3-third">
+							<com:TTextBox ID="RestoreStripPrefix" CssClass="w3-input w3-border" CausesValidation="false" />
+						</div>
+					</div>
+					<div class="w3-section w3-row">
+						<div class="w3-col w3-third"><com:TLabel ForControl="RestoreAddPrefix" Text="<%[ Add prefix: ]%>" /></div>
+						<div class="w3-col w3-third">
+							<com:TTextBox ID="RestoreAddPrefix" CssClass="w3-input w3-border" CausesValidation="false" />
+						</div>
+					</div>
+					<div class="w3-section w3-row">
+						<div class="w3-col w3-third"><com:TLabel ForControl="RestoreAddSuffix" Text="<%[ Add suffix: ]%>" /></div>
+						<div class="w3-col w3-third">
+							<com:TTextBox ID="RestoreAddSuffix" CssClass="w3-input w3-border" CausesValidation="false" />
+						</div>
+					</div>
+				</div>
+				<div id="file_relocation_regex_where" style="display: none">
+					<div class="w3-section w3-row">
+						<div class="w3-col w3-third"><com:TLabel ForControl="RestoreRegexWhere" Text="<%[ RegexWhere: ]%>" /></div>
+						<div class="w3-col w3-third">
+							<com:TTextBox ID="RestoreRegexWhere" CssClass="w3-input w3-border" CausesValidation="false" />
+						</div>
 					</div>
 				</div>
 			</div>
@@ -1383,105 +1400,107 @@ $(function() {
 			</script>
 		</com:TWizardStep>
 		<com:TWizardStep ID="Step6" Title="<%[ Step 6 - Finish ]%>" StepType="Finish">
-			<fieldset>
-				<legend><%[ Source parameters ]%></legend>
-				<div class="w3-section w3-row">
-					<div class="w3-col w3-third"><%[ Backup data from client: ]%></div>
-					<div class="w3-col w3-third bold"><%=$this->BackupClient->SelectedItem->Text%></div>
-				</div>
-				<div class="w3-section w3-row">
-					<div class="w3-col w3-third"><%[ Backup selection method: ]%></div>
-					<div class="w3-col w3-third bold">
-						<com:TLabel Text="<%[ Selected backup ]%>" Visible="<%=$this->OnlySelectedBackupSelection->Checked%>" />
-						<com:TLabel Text="<%[ Group most recent backups ]%>" Visible="<%=$this->GroupBackupSelection->Checked%>" />
+			<div class="w3-half" style="margin: auto; float: none">
+				<fieldset>
+					<legend><%[ Source parameters ]%></legend>
+					<div class="w3-section w3-row">
+						<div class="w3-col w3-third"><%[ Backup data from client: ]%></div>
+						<div class="w3-col w3-third bold"><%=$this->BackupClient->SelectedItem->Text%></div>
 					</div>
-				</div>
-				<com:TPanel Visible="<%=$this->GroupBackupSelection->Checked%>">
 					<div class="w3-section w3-row">
-						<div class="w3-col w3-third"><%[ Backup to restore: ]%></div>
-						<div class="w3-col w3-third bold"><%=$this->GroupBackupToRestore->SelectedValue%></div>
+						<div class="w3-col w3-third"><%[ Backup selection method: ]%></div>
+						<div class="w3-col w3-third bold">
+							<com:TLabel Text="<%[ Selected backup ]%>" Visible="<%=$this->OnlySelectedBackupSelection->Checked%>" />
+							<com:TLabel Text="<%[ Group most recent backups ]%>" Visible="<%=$this->GroupBackupSelection->Checked%>" />
+						</div>
 					</div>
+					<com:TPanel Visible="<%=$this->GroupBackupSelection->Checked%>">
+						<div class="w3-section w3-row">
+							<div class="w3-col w3-third"><%[ Backup to restore: ]%></div>
+							<div class="w3-col w3-third bold"><%=$this->GroupBackupToRestore->SelectedValue%></div>
+						</div>
+						<div class="w3-section w3-row">
+							<div class="w3-col w3-third"><%[ FileSet to restore: ]%></div>
+							<div class="w3-col w3-third bold"><%=$this->GroupBackupFileSet->SelectedItem->Text%></div>
+						</div>
+					</com:TPanel>
+				</fieldset>
+				<fieldset>
+					<legend><%[ Files for restore ]%></legend>
 					<div class="w3-section w3-row">
-						<div class="w3-col w3-third"><%[ FileSet to restore: ]%></div>
-						<div class="w3-col w3-third bold"><%=$this->GroupBackupFileSet->SelectedItem->Text%></div>
+						<div class="w3-col w3-third"><%[ Selected directories count: ]%></div>
+						<div class="w3-col w3-third bold"><%=isset($this->getRestoreElements(true)->dirid) ? count($this->getRestoreElements(true)->dirid) : '0'%></div>
 					</div>
-				</com:TPanel>
-			</fieldset>
-			<fieldset>
-				<legend><%[ Files for restore ]%></legend>
-				<div class="w3-section w3-row">
-					<div class="w3-col w3-third"><%[ Selected directories count: ]%></div>
-					<div class="w3-col w3-third bold"><%=isset($this->getRestoreElements(true)->dirid) ? count($this->getRestoreElements(true)->dirid) : '0'%></div>
-				</div>
-				<div class="w3-section w3-row">
-					<div class="w3-col w3-third"><%[ Selected files count: ]%></div>
-					<div class="w3-col w3-third bold"><%=isset($this->getRestoreElements(true)->fileid) ? count($this->getRestoreElements(true)->fileid) : '0'%></div>
-				</div>
-			</fieldset>
-			<fieldset>
-				<legend><%[ Destination parameters ]%></legend>
-				<div class="w3-section w3-row">
-					<div class="w3-col w3-third"><%[ Restore to client: ]%></div>
-					<div class="w3-col w3-third bold"><%=$this->RestoreClient->SelectedItem->Text%></div>
-				</div>
-				<div class="w3-section w3-row">
-					<div class="w3-col w3-third"><%[ Restore to path: ]%></div>
-					<div class="w3-col w3-third bold"><%=$this->RestorePath->Text%></div>
-				</div>
-			</fieldset>
-			<fieldset>
-				<legend><%[ Restore job options ]%></legend>
-				<div class="w3-section w3-row">
-					<div class="w3-col w3-third"><%[ Restore job: ]%></div>
-					<div class="w3-col w3-third bold"><%=$this->RestoreJob->Text%></div>
-				</div>
-				<div class="w3-section w3-row">
-					<div class="w3-col w3-third"><%[ Replace files: ]%></div>
-					<div class="w3-col w3-third bold">
-						<com:TLabel Visible="<%=$this->ReplaceFiles->SelectedValue == 'never'%>" Text="<%[ do not replace files ]%>"/>
-						<com:TLabel Visible="<%=$this->ReplaceFiles->SelectedValue == 'ifolder'%>" Text="<%[ if files from restore are older]%>"/>
-						<com:TLabel Visible="<%=$this->ReplaceFiles->SelectedValue == 'ifnewer'%>" Text="<%[ if files from restore are newer]%>"/>
-						<com:TLabel Visible="<%=$this->ReplaceFiles->SelectedValue == 'always'%>" Text="<%[ always replace files ]%>"/>
+					<div class="w3-section w3-row">
+						<div class="w3-col w3-third"><%[ Selected files count: ]%></div>
+						<div class="w3-col w3-third bold"><%=isset($this->getRestoreElements(true)->fileid) ? count($this->getRestoreElements(true)->fileid) : '0'%></div>
 					</div>
-				</div>
-				<div class="w3-section w3-row">
-					<div class="w3-col w3-third"><%[ File relocation option: ]%></div>
-					<div class="w3-col w3-third bold">
-						<com:TLabel Visible="<%=$this->file_relocation_opt == 1%>" Text="<%[ Do not relocate files ]%>"/>
-						<com:TLabel Visible="<%=$this->file_relocation_opt == 2%>" Text="<%[ Relocate files with prefix and/or suffix ]%>"/>
-						<com:TLabel Visible="<%=$this->file_relocation_opt == 3%>" Text="<%[ Relocate files with regular expression ]%>"/>
+				</fieldset>
+				<fieldset>
+					<legend><%[ Destination parameters ]%></legend>
+					<div class="w3-section w3-row">
+						<div class="w3-col w3-third"><%[ Restore to client: ]%></div>
+						<div class="w3-col w3-third bold"><%=$this->RestoreClient->SelectedItem->Text%></div>
 					</div>
-				</div>
-				<div style="display: <%=$this->file_relocation_opt == 2 ? 'block' : 'none'%>">
 					<div class="w3-section w3-row">
-						<div class="w3-col w3-third"><%[ Strip prefix: ]%></div>
-						<div class="w3-col w3-third bold"><%=$this->RestoreStripPrefix->Text%></div>
+						<div class="w3-col w3-third"><%[ Restore to path: ]%></div>
+						<div class="w3-col w3-third bold"><%=$this->RestorePath->Text%></div>
 					</div>
+				</fieldset>
+				<fieldset>
+					<legend><%[ Restore job options ]%></legend>
 					<div class="w3-section w3-row">
-						<div class="w3-col w3-third"><%[ Add prefix: ]%></div>
-						<div class="w3-col w3-third bold"><%=$this->RestoreAddPrefix->Text%></div>
+						<div class="w3-col w3-third"><%[ Restore job: ]%></div>
+						<div class="w3-col w3-third bold"><%=$this->RestoreJob->Text%></div>
 					</div>
 					<div class="w3-section w3-row">
-						<div class="w3-col w3-third"><%[ Add suffix: ]%></div>
-						<div class="w3-col w3-third bold"><%=$this->RestoreAddSuffix->Text%></div>
+						<div class="w3-col w3-third"><%[ Replace files: ]%></div>
+						<div class="w3-col w3-third bold">
+							<com:TLabel Visible="<%=$this->ReplaceFiles->SelectedValue == 'never'%>" Text="<%[ do not replace files ]%>"/>
+							<com:TLabel Visible="<%=$this->ReplaceFiles->SelectedValue == 'ifolder'%>" Text="<%[ if files from restore are older]%>"/>
+							<com:TLabel Visible="<%=$this->ReplaceFiles->SelectedValue == 'ifnewer'%>" Text="<%[ if files from restore are newer]%>"/>
+							<com:TLabel Visible="<%=$this->ReplaceFiles->SelectedValue == 'always'%>" Text="<%[ always replace files ]%>"/>
+						</div>
 					</div>
-				</div>
-				<div style="display: <%=$this->file_relocation_opt == 3 ? 'block' : 'none'%>">
 					<div class="w3-section w3-row">
-						<div class="w3-col w3-third"><%[ RegexWhere: ]%></div>
-						<div class="w3-col w3-third bold"><%=$this->RestoreRegexWhere->Text%></div>
+						<div class="w3-col w3-third"><%[ File relocation option: ]%></div>
+						<div class="w3-col w3-third bold">
+							<com:TLabel Visible="<%=$this->file_relocation_opt == 1%>" Text="<%[ Do not relocate files ]%>"/>
+							<com:TLabel Visible="<%=$this->file_relocation_opt == 2%>" Text="<%[ Relocate files with prefix and/or suffix ]%>"/>
+							<com:TLabel Visible="<%=$this->file_relocation_opt == 3%>" Text="<%[ Relocate files with regular expression ]%>"/>
+						</div>
 					</div>
-				</div>
-			</fieldset>
-			<div id="restore_error" class="w3-modal" style="display: <%=$this->getPage()->show_error ? 'block' : 'none'%>">
-				<div class="w3-modal-content w3-card-4 w3-animate-zoom w3-padding" style="max-width: 600px">
-					<h2>Error</h2>
-					<div><br />
-						<span onclick="document.getElementById('restore_error').style.display='none'" class="w3-button w3-xlarge w3-hover-red w3-display-topright" title="Close Modal">&times;</span>
-						<com:TLabel ID="RestoreError" CssClass="w3-text-red" />
+					<div style="display: <%=$this->file_relocation_opt == 2 ? 'block' : 'none'%>">
+						<div class="w3-section w3-row">
+							<div class="w3-col w3-third"><%[ Strip prefix: ]%></div>
+							<div class="w3-col w3-third bold"><%=$this->RestoreStripPrefix->Text%></div>
+						</div>
+						<div class="w3-section w3-row">
+							<div class="w3-col w3-third"><%[ Add prefix: ]%></div>
+							<div class="w3-col w3-third bold"><%=$this->RestoreAddPrefix->Text%></div>
+						</div>
+						<div class="w3-section w3-row">
+							<div class="w3-col w3-third"><%[ Add suffix: ]%></div>
+							<div class="w3-col w3-third bold"><%=$this->RestoreAddSuffix->Text%></div>
+						</div>
+					</div>
+					<div style="display: <%=$this->file_relocation_opt == 3 ? 'block' : 'none'%>">
+						<div class="w3-section w3-row">
+							<div class="w3-col w3-third"><%[ RegexWhere: ]%></div>
+							<div class="w3-col w3-third bold"><%=$this->RestoreRegexWhere->Text%></div>
+						</div>
 					</div>
-					<div class="w3-center">
-						<a class="w3-button w3-red w3-section" type="button" href="<%=$this->Service->constructUrl('Dashboard');%>"><i class="fa fa-times"></i> &nbsp;<%[ Exit wizard ]%></a>
+				</fieldset>
+				<div id="restore_error" class="w3-modal" style="display: <%=$this->getPage()->show_error ? 'block' : 'none'%>">
+					<div class="w3-modal-content w3-card-4 w3-animate-zoom w3-padding" style="max-width: 600px">
+						<h2>Error</h2>
+						<div><br />
+							<span onclick="document.getElementById('restore_error').style.display='none'" class="w3-button w3-xlarge w3-hover-red w3-display-topright" title="Close Modal">&times;</span>
+							<com:TLabel ID="RestoreError" CssClass="w3-text-red" />
+						</div>
+						<div class="w3-center">
+							<a class="w3-button w3-red w3-section" type="button" href="<%=$this->Service->constructUrl('Dashboard');%>"><i class="fa fa-times"></i> &nbsp;<%[ Exit wizard ]%></a>
+						</div>
 					</div>
 				</div>
 			</div>
diff --git a/gui/baculum/protected/Web/Pages/WebConfigWizard.page b/gui/baculum/protected/Web/Pages/WebConfigWizard.page
index 9dc63bce6..2bf114800 100644
--- a/gui/baculum/protected/Web/Pages/WebConfigWizard.page
+++ b/gui/baculum/protected/Web/Pages/WebConfigWizard.page
@@ -2,8 +2,8 @@
 <com:TContent ID="Wizard">
 	<com:TWizard ID="InstallWizard"
 		CssClass="wizard"
-		StepStyle.CssClass="steps"
-		HeaderStyle.CssClass="wizard-body"
+		StepStyle.CssClass="steps w3-container"
+		HeaderStyle.CssClass="wizard-body w3-container"
 		NavigationStyle.CssClass="navigation"
 		UseDefaultLayout="false"
 		ShowSideBar="false"
@@ -13,35 +13,35 @@
 		OnCompleteButtonClick="wizardCompleted"
 		>
 		<prop:HeaderTemplate>
-			<div class="<%=$this->SourceTemplateControl->first_run ? 'w3-quarter' : 'w3-third'%> w3-padding-16">
+			<div class="<%=$this->SourceTemplateControl->first_run ? 'w3-quarter' : 'w3-third'%> w3-padding-16 w3-hide-small">
 				<div class="step w3-padding w3-text-white w3-margin-right <%=($this->Parent->ActiveStepIndex === 0 ? 'w3-light-green' : 'w3-green')%>">
-					<div class="w3-left"><i class="fa fa-language w3-xxxlarge"></i></div>
+					<div class="w3-left"><i class="fa fa-language w3-xxlarge"></i></div>
 					<div class="w3-clear"></div>
 					<h4><com:TTranslate Text="Language" /></h4>
 				</div>
 			</div>
-			<div class="<%=$this->SourceTemplateControl->first_run ? 'w3-quarter' : 'w3-third'%> w3-padding-16">
+			<div class="<%=$this->SourceTemplateControl->first_run ? 'w3-quarter' : 'w3-third'%> w3-padding-16 w3-hide-small">
 				<div class="step w3-padding w3-text-white w3-margin-right <%=($this->Parent->ActiveStepIndex === 1 ? 'w3-light-green' : 'w3-green')%>">
-					<div class="w3-left"><i class="fa fa-plus-square w3-xxxlarge"></i></div>
+					<div class="w3-left"><i class="fa fa-plus-square w3-xxlarge"></i></div>
 					<div class="w3-clear"></div>
 					<h4><com:TTranslate Text="Add APIs" /></h4>
 				</div>
 			</div>
-			<div class="<%=$this->SourceTemplateControl->first_run ? 'w3-quarter' : 'w3-third'%> w3-padding-16"<%=!$this->SourceTemplateControl->first_run ? ' style="display: none"' : ''%>>
+			<div class="<%=$this->SourceTemplateControl->first_run ? 'w3-quarter' : 'w3-third'%> w3-padding-16 w3-hide-small"<%=!$this->SourceTemplateControl->first_run ? ' style="display: none"' : ''%>>
 				<div class="step w3-padding w3-text-white w3-margin-right <%=($this->Parent->ActiveStepIndex === 2 ? 'w3-light-green' : 'w3-green')%>">
-					<div class="w3-left"><i class="fa fa-key w3-xxxlarge"></i></div>
+					<div class="w3-left"><i class="fa fa-key w3-xxlarge"></i></div>
 					<div class="w3-clear"></div>
 					<h4><com:TTranslate Text="Authentication" /></h4>
 				</div>
 			</div>
-			<div class="<%=$this->SourceTemplateControl->first_run ? 'w3-quarter' : 'w3-third'%> w3-padding-16">
-				<div class="step w3-padding w3-text-white w3-margin-right <%=($this->Parent->ActiveStepIndex === 3 ? 'w3-light-green' : 'w3-green')%>">
-					<div class="w3-left"><i class="fa fa-check-square w3-xxxlarge"></i></div>
+			<div class="<%=$this->SourceTemplateControl->first_run ? 'w3-quarter' : 'w3-third'%> w3-padding-16 w3-hide-small">
+				<div class="step w3-padding w3-text-white <%=($this->Parent->ActiveStepIndex === 3 ? 'w3-light-green' : 'w3-green')%>">
+					<div class="w3-left"><i class="fa fa-check-square w3-xxlarge"></i></div>
 					<div class="w3-clear"></div>
 					<h4><com:TTranslate Text="Finish" /></h4>
 				</div>
 			</div>
-			<div class="step_title w3-panel w3-green w3-margin-right"><h3><%=$this->Parent->ActiveStep->Title%></h3></div>
+			<div class="step_title w3-panel w3-green"><h4><%=$this->Parent->ActiveStep->Title%></h4></div>
 		</prop:HeaderTemplate>
 		<prop:StartNavigationTemplate>
 			<div class="w3-center w3-section">
@@ -118,121 +118,133 @@
 			</div>
 		</prop:FinishNavigationTemplate>
 		<com:TWizardStep ID="Step1" Title="<%[ Step 1 - select language ]%>" StepType="Auto">
-			<div class="w3-container">
+			<div class="w3-half" style="float: none; margin: auto">
 				<div class="w3-third"><com:TLabel ForControl="Lang" Text="<%[ Language: ]%>" /></div>
 				<div class="w3-third">
-					<com:TActiveDropDownList ID="Lang" CssClass="w3-select w3-border" OnTextChanged="setLang" CausesValidation="false" ClientSide.OnComplete="location.reload();">
+					<com:TActiveDropDownList
+						ID="Lang"
+						CssClass="w3-select w3-border"
+						OnTextChanged="setLang"
+						CausesValidation="false"
+						ClientSide.OnComplete="location.reload();"
+						Width="150px"
+					>
 						<com:TListItem Value="en" Text="English" />
 						<com:TListItem Value="pl" Text="Polish" />
 						<com:TListItem Value="pt" Text="Portuguese" />
 						<com:TListItem Value="ja" Text="Japanese" />
 						<com:TListItem Value="ru" Text="Russian" />
 					</com:TActiveDropDownList>
-					<com:TCompareValidator CssClass="validator-block" Display="Dynamic" ControlToValidate="Lang" DataType="String" ValueToCompare="none" Operator="NotEqual" Text="<%[ Please select language. ]%>" />
 				</div>
 			</div>
 		</com:TWizardStep>
 		<com:TWizardStep ID="Step2" Title="<%[ Step 2 - add API instances ]%>" StepType="Auto">
-			<p class="w3-margin-left"><%[ Baculum web interface requires to add at least one Baculum API instance with shared Catalog access. Please add API instance. ]%></p>
-			<com:Application.Common.Portlets.NewHost
-				ID="AddNewHost"
-				ForceHostName="Main"
-				ShowButtons="false"
-				APIRequired="catalog"
-				ClientMode="true"
-			/>
+			<div class="w3-half" style="float: none; margin: auto">
+				<p><%[ Baculum web interface requires to add at least one Baculum API instance with shared Catalog access. Please add API instance. ]%></p>
+				<com:Application.Common.Portlets.NewHost
+					ID="AddNewHost"
+					ForceHostName="Main"
+					ShowButtons="false"
+					APIRequired="catalog"
+					ClientMode="true"
+				/>
+			</div>
 			<script type="text/javascript">document.getElementById('new_host').style.display = 'block';</script>
 		</com:TWizardStep>
 		<com:TWizardStep ID="Step3" Title="<%[ Step 3 - authentication params to Baculum Web panel ]%>" StepType="Auto">
-			<div class="w3-container w3-margin-bottom">
-				<div class="w3-third"><com:TLabel ForControl="WebLogin" Text="<%[ Administration login: ]%>" /></div>
-				<div class="w3-third">
-					<com:TTextBox ID="WebLogin" CssClass="w3-input w3-border" CausesValidation="false" />
-					<com:TRequiredFieldValidator CssClass="validator-block" Display="Dynamic" ControlCssClass="invalidate" ControlToValidate="WebLogin" Text="<%[ Please enter login. ]%>" />
-					<com:TRegularExpressionValidator CssClass="validator-block" Display="Dynamic" ControlCssClass="invalidate" ControlToValidate="WebLogin" RegularExpression="<%=BasicWebUserConfig::USER_PATTERN%>" Text="<%[ Invalid login value. Login may contain a-z A-Z 0-9 characters. ]%>" />
+			<div class="w3-half" style="float: none; margin: auto">
+				<div class="w3-container w3-margin-bottom">
+					<div class="w3-third"><com:TLabel ForControl="WebLogin" Text="<%[ Administration login: ]%>" /></div>
+					<div class="w3-third">
+						<com:TTextBox ID="WebLogin" CssClass="w3-input w3-border" CausesValidation="false" />
+						<com:TRequiredFieldValidator CssClass="validator-block" Display="Dynamic" ControlCssClass="invalidate" ControlToValidate="WebLogin" Text="<%[ Please enter login. ]%>" />
+						<com:TRegularExpressionValidator CssClass="validator-block" Display="Dynamic" ControlCssClass="invalidate" ControlToValidate="WebLogin" RegularExpression="<%=BasicWebUserConfig::USER_PATTERN%>" Text="<%[ Invalid login value. Login may contain a-z A-Z 0-9 characters. ]%>" />
+					</div>
 				</div>
-			</div>
-			<div class="w3-container w3-margin-bottom">
-				<div class="w3-third"><com:TLabel ForControl="WebPassword" Text="<%[ Administration password: ]%>" /></div>
-				<div class="w3-third">
-					<com:TTextBox ID="WebPassword" CssClass="w3-input w3-border" TextMode="Password" MaxLength="60" PersistPassword="true" />
-					<com:TRequiredFieldValidator CssClass="validator-block" Display="Dynamic" ControlCssClass="invalidate" ControlToValidate="WebPassword" Text="<%[ Please enter password. ]%>"/>
-					<com:TRegularExpressionValidator CssClass="validator-block" Display="Dynamic" ControlCssClass="invalidate" ControlToValidate="WebPassword" RegularExpression="[\S\s]{5,60}" Text="<%[ Password must be longer than 4 chars. ]%>" />
+				<div class="w3-container w3-margin-bottom">
+					<div class="w3-third"><com:TLabel ForControl="WebPassword" Text="<%[ Administration password: ]%>" /></div>
+					<div class="w3-third">
+						<com:TTextBox ID="WebPassword" CssClass="w3-input w3-border" TextMode="Password" MaxLength="60" PersistPassword="true" />
+						<com:TRequiredFieldValidator CssClass="validator-block" Display="Dynamic" ControlCssClass="invalidate" ControlToValidate="WebPassword" Text="<%[ Please enter password. ]%>"/>
+						<com:TRegularExpressionValidator CssClass="validator-block" Display="Dynamic" ControlCssClass="invalidate" ControlToValidate="WebPassword" RegularExpression="[\S\s]{5,60}" Text="<%[ Password must be longer than 4 chars. ]%>" />
+					</div>
 				</div>
-			</div>
-			<div class="w3-container w3-margin-bottom">
-				<div class="w3-third"><com:TLabel ForControl="RetypeWebPassword" Text="<%[ Retype administration password: ]%>" /></div>
-				<div class="w3-third">
-					<com:TTextBox ID="RetypeWebPassword" CssClass="w3-input w3-border" TextMode="Password" MaxLength="60" PersistPassword="true" />
-					<com:TRequiredFieldValidator ID="RetypeWebPasswordRequireValidator" CssClass="validator-block" Display="Dynamic" ControlCssClass="invalidate" ControlToValidate="RetypeWebPassword" Text="<%[ Please enter retype password. ]%>"/>
-					<com:TRegularExpressionValidator ID="RetypeWebPasswordRegexpValidator" CssClass="validator-block" Display="Dynamic" ControlCssClass="invalidate" ControlToValidate="RetypeWebPassword" RegularExpression="[\S\s]{5,60}" Text="<%[ Password must be longer than 4 chars. ]%>" />
-					<com:TCustomValidator ID="RetypeWebPasswordCustomValidator" CssClass="validator-block" Display="Dynamic" ControlCssClass="invalidate" ControlToValidate="RetypeWebPassword" OnServerValidate="validateAdministratorPassword" Text="<%[ Passwords must be the same. ]%>" />
+				<div class="w3-container w3-margin-bottom">
+					<div class="w3-third"><com:TLabel ForControl="RetypeWebPassword" Text="<%[ Retype administration password: ]%>" /></div>
+					<div class="w3-third">
+						<com:TTextBox ID="RetypeWebPassword" CssClass="w3-input w3-border" TextMode="Password" MaxLength="60" PersistPassword="true" />
+						<com:TRequiredFieldValidator ID="RetypeWebPasswordRequireValidator" CssClass="validator-block" Display="Dynamic" ControlCssClass="invalidate" ControlToValidate="RetypeWebPassword" Text="<%[ Please enter retype password. ]%>"/>
+						<com:TRegularExpressionValidator ID="RetypeWebPasswordRegexpValidator" CssClass="validator-block" Display="Dynamic" ControlCssClass="invalidate" ControlToValidate="RetypeWebPassword" RegularExpression="[\S\s]{5,60}" Text="<%[ Password must be longer than 4 chars. ]%>" />
+						<com:TCustomValidator ID="RetypeWebPasswordCustomValidator" CssClass="validator-block" Display="Dynamic" ControlCssClass="invalidate" ControlToValidate="RetypeWebPassword" OnServerValidate="validateAdministratorPassword" Text="<%[ Passwords must be the same. ]%>" />
+					</div>
 				</div>
 			</div>
 		</com:TWizardStep>
 		<com:TWizardStep ID="Step4" Title="<%[ Step 4 - Finish ]%>" StepType="Finish">
-			<fieldset>
-				<legend><%[ Access to Baculum API ]%></legend>
-				<div class="w3-container w3-section">
-					<div class="w3-third"><%[ Protocol: ]%></div>
-					<div class="w3-third bold"><%=$this->AddNewHost->APIProtocol->SelectedValue%></div>
-				</div>
-				<div class="w3-container w3-section">
-					<div class="w3-third"><%[ IP Address/Hostname: ]%></div>
-					<div class="w3-third bold"><%=$this->AddNewHost->APIAddress->Text%></div>
-				</div>
-				<div class="w3-container w3-section">
-					<div class="w3-third"><%[ Port: ]%></div>
-					<div class="w3-third bold"><%=$this->AddNewHost->APIPort->Text%></div>
-				</div>
-				<div style="display: <%=$this->AddNewHost->AuthBasic->Checked ? 'block' : 'none'%>">
+			<div class="w3-half" style="float: none; margin: auto">
+				<fieldset>
+					<legend><%[ Access to Baculum API ]%></legend>
 					<div class="w3-container w3-section">
-						<div class="w3-third"><%[ Auth Type: ]%></div>
-						<div class="w3-third bold">HTTP Basic</div>
+						<div class="w3-third"><%[ Protocol: ]%></div>
+						<div class="w3-third bold"><%=$this->AddNewHost->APIProtocol->SelectedValue%></div>
 					</div>
 					<div class="w3-container w3-section">
-						<div class="w3-third"><%[ API Login: ]%></div>
-						<div class="w3-third bold"><%=$this->AddNewHost->APIBasicLogin->Text%></div>
+						<div class="w3-third"><%[ IP Address/Hostname: ]%></div>
+						<div class="w3-third bold"><%=$this->AddNewHost->APIAddress->Text%></div>
 					</div>
 					<div class="w3-container w3-section">
-						<div class="w3-third"><%[ API Password: ]%></div>
-						<div class="w3-third bold"><%=preg_replace('/.{1}/', '*', $this->AddNewHost->APIBasicPassword->Text)%></div>
+						<div class="w3-third"><%[ Port: ]%></div>
+						<div class="w3-third bold"><%=$this->AddNewHost->APIPort->Text%></div>
 					</div>
-				</div>
-				<div style="display: <%=$this->AddNewHost->AuthOAuth2->Checked ? 'block' : 'none'%>">
-					<div class="w3-container w3-section">
-						<div class="w3-third"><%[ Auth Type: ]%></div>
-						<div class="w3-third bold">OAuth2</div>
+					<div style="display: <%=$this->AddNewHost->AuthBasic->Checked ? 'block' : 'none'%>">
+						<div class="w3-container w3-section">
+							<div class="w3-third"><%[ Auth Type: ]%></div>
+							<div class="w3-third bold">HTTP Basic</div>
+						</div>
+						<div class="w3-container w3-section">
+							<div class="w3-third"><%[ API Login: ]%></div>
+							<div class="w3-third bold"><%=$this->AddNewHost->APIBasicLogin->Text%></div>
+						</div>
+						<div class="w3-container w3-section">
+							<div class="w3-third"><%[ API Password: ]%></div>
+							<div class="w3-third bold"><%=preg_replace('/.{1}/', '*', $this->AddNewHost->APIBasicPassword->Text)%></div>
+						</div>
 					</div>
-					<div class="w3-container w3-section">
-						<div class="w3-third"><%[ OAuth2 Client ID: ]%></div>
-						<div class="w3-third bold"><%=$this->AddNewHost->APIOAuth2ClientId->Text%></div>
+					<div style="display: <%=$this->AddNewHost->AuthOAuth2->Checked ? 'block' : 'none'%>">
+						<div class="w3-container w3-section">
+							<div class="w3-third"><%[ Auth Type: ]%></div>
+							<div class="w3-third bold">OAuth2</div>
+						</div>
+						<div class="w3-container w3-section">
+							<div class="w3-third"><%[ OAuth2 Client ID: ]%></div>
+							<div class="w3-third bold"><%=$this->AddNewHost->APIOAuth2ClientId->Text%></div>
+						</div>
+						<div class="w3-container w3-section">
+							<div class="w3-third"><%[ OAuth2 Client Secret: ]%></div>
+							<div class="w3-third bold"><%=preg_replace('/.{1}/', '*', $this->AddNewHost->APIOAuth2ClientSecret->Text)%></div>
+						</div>
+						<div class="w3-container w3-section">
+							<div class="w3-third"><%[ OAuth2 Redirect URI: ]%></div>
+							<div class="w3-third bold"><%=$this->AddNewHost->APIOAuth2RedirectURI->Text%></div>
+						</div>
+						<div class="w3-container w3-section">
+							<div class="w3-third"><%[ OAuth2 Scope: ]%></div>
+							<div class="w3-third bold"><%=$this->AddNewHost->APIOAuth2Scope->Text%></div>
+						</div>
 					</div>
+				</fieldset>
+				<fieldset<%=!$this->SourceTemplateControl->first_run ? ' style="display: none"' : ''%>>
+					<legend><%[ Access to Baculum Web ]%></legend>
 					<div class="w3-container w3-section">
-						<div class="w3-third"><%[ OAuth2 Client Secret: ]%></div>
-						<div class="w3-third bold"><%=preg_replace('/.{1}/', '*', $this->AddNewHost->APIOAuth2ClientSecret->Text)%></div>
+						<div class="w3-third"><%[ Administration login: ]%></div>
+						<div class="w3-third bold"><%=$this->WebLogin->Text%></div>
 					</div>
 					<div class="w3-container w3-section">
-						<div class="w3-third"><%[ OAuth2 Redirect URI: ]%></div>
-						<div class="w3-third bold"><%=$this->AddNewHost->APIOAuth2RedirectURI->Text%></div>
+						<div class="w3-third"><%[ Administration password: ]%></div>
+						<div class="w3-third bold"><%=preg_replace('/.{1}/', '*', $this->WebPassword->Text)%></div>
 					</div>
-					<div class="w3-container w3-section">
-						<div class="w3-third"><%[ OAuth2 Scope: ]%></div>
-						<div class="w3-third bold"><%=$this->AddNewHost->APIOAuth2Scope->Text%></div>
-					</div>
-				</div>
-			</fieldset>
-			<fieldset<%=!$this->SourceTemplateControl->first_run ? ' style="display: none"' : ''%>>
-				<legend><%[ Access to Baculum Web ]%></legend>
-				<div class="w3-container w3-section">
-					<div class="w3-third"><%[ Administration login: ]%></div>
-					<div class="w3-third bold"><%=$this->WebLogin->Text%></div>
-				</div>
-				<div class="w3-container w3-section">
-					<div class="w3-third"><%[ Administration password: ]%></div>
-					<div class="w3-third bold"><%=preg_replace('/.{1}/', '*', $this->WebPassword->Text)%></div>
-				</div>
-			</fieldset>
+				</fieldset>
+			</div>
 		</com:TWizardStep>
 	</com:TWizard>
 </com:TContent>
diff --git a/gui/baculum/themes/Baculum-v2/css/baculum.css b/gui/baculum/themes/Baculum-v2/css/baculum.css
index 6b5d49f54..d87a97cc4 100644
--- a/gui/baculum/themes/Baculum-v2/css/baculum.css
+++ b/gui/baculum/themes/Baculum-v2/css/baculum.css
@@ -215,7 +215,7 @@ img.reset_btn, img.remove_btn {
 
 .step {
 	/*width: 30% !important;*/
-	min-height: 130px;
+	min-height: 100px;
 }
 
 .step_title {