diff --git a/ts/components/session/SessionToggle.tsx b/ts/components/session/SessionToggle.tsx
index b9df7c319..54083e151 100644
--- a/ts/components/session/SessionToggle.tsx
+++ b/ts/components/session/SessionToggle.tsx
@@ -34,9 +34,17 @@ export class SessionToggle extends React.PureComponent<Props, State> {
     this.state = {
       active: active,
     };
+    console.log('it is the constructor runs the first')
   }
 
+  
+  
+
+
   public render() {
+
+    console.log(this.props, 'from Session Toggle')
+
     return (
       <div
         className={classNames(
@@ -63,6 +71,11 @@ export class SessionToggle extends React.PureComponent<Props, State> {
       }
     };
 
+
+    //what does the following piece of code do? //
+
+    //what is the window.comfirmationDialog doing in here?
+
     if (
       this.props.confirmationDialogParams &&
       this.props.confirmationDialogParams.shouldShowConfirm()
diff --git a/ts/components/session/settings/SessionSettings.tsx b/ts/components/session/settings/SessionSettings.tsx
index 8dfe17652..0d6d6c3b2 100644
--- a/ts/components/session/settings/SessionSettings.tsx
+++ b/ts/components/session/settings/SessionSettings.tsx
@@ -140,6 +140,10 @@ export class SettingsView extends React.Component<SettingsViewProps, State> {
                 this.updateSetting(setting);
               });
 
+              //define a bunch of function that will be used in the setting list.
+              //since setting elem itself is an array elem, this either becomes, onlick function
+              // or a function returned by others.
+
             return (
               <div key={setting.id}>
                 {shouldRenderSettings &&
@@ -235,24 +239,38 @@ export class SettingsView extends React.Component<SettingsViewProps, State> {
   }
 
   public render() {
+
+    console.log(this.props, 'From SessionSettings');
     const { category } = this.props;
     const shouldRenderPasswordLock =
       this.state.shouldLockSettings && this.state.hasPassword;
 
     return (
+
+      //this is the section where the actually setting group of components gets render!
       <div className="session-settings">
+        
+        {/* header is always rendered */}
         <SettingsHeader
           showLinkDeviceButton={!shouldRenderPasswordLock}
           category={category}
         />
+
+
         <div className="session-settings-view">
+
+          {/* some show lock logic is put in here to make sure that every time if you want to change the appearance  */}
           {shouldRenderPasswordLock ? (
             this.renderPasswordLock()
+            //
           ) : (
             <div ref={this.settingsViewRef} className="session-settings-list">
               {this.renderSettingInCategory()}
+              {/* what gets rendered back from calling renderSettingInCategory */}
             </div>
           )}
+
+          {/* session info is always shown in here  */}
           {this.renderSessionInfo()}
         </div>
       </div>
@@ -266,6 +284,7 @@ export class SettingsView extends React.Component<SettingsViewProps, State> {
     this.setState({
       scaleValue:scaleVal
     })
+    window.setSettingValue('')
   }