diff --git a/_guide-pages/2FA.html b/_guide-pages/2FA.html
new file mode 100644
index 0000000000..f8b859dc51
--- /dev/null
+++ b/_guide-pages/2FA.html
@@ -0,0 +1,227 @@
+---
+title: 2FA Guide
+description: <p>Hack for LA requires two-factor authentication (2FA) in GitHub for all project contributors.
+        </p>
+in-this-guide: 
+  - name: To Enable 2FA
+    link: '#To-Enable-2FA'
+  - name: FAQ
+    link: '#FAQ'
+  
+---
+
+<div class='content-section'>
+
+    <a class='anchor' id='To-Enable-2FA'></a>
+    <div class='section-container'>
+        <div>
+            <h3 class="title-left"><b>To Enable 2FA:</b></h3>
+            <h5 class="title-left"><b>Visit and follow </b><b><a href="https://docs.github.com/en/github/authenticating-to-github/configuring-two-factor-authentication" target="blank">Github's Guide to Setting Up 2FA</a></b></h5>
+        </div>
+
+        <div>
+            <br><p>If you already have a 2FA application on your mobile phone, you can use that.  If you do not already have a 2FA application you will be instructed to download your mobile app of choice (we have had good luck with Authy) and follow the detailed instructions to complete configuration in GitHub.</p><br>
+        </div>
+
+        <div class="screenshot-2FA">
+            <img src="../assets/images/guides/2FA/2FA-Screenshot.png" alt="">
+        </div>
+    </div>
+
+
+    <div class='section-container'>
+        <a class='anchor' id='FAQ'></a>
+        <div class="step-header">
+            <h3>Frequently Asked Questions</h3>
+        </div>
+        <div class=''>
+
+
+            <p class="accordion">What is 2FA? </p>
+            
+            <div class="panel">
+                <p>Two-factor authentication, or 2FA, is an extra layer of security used when logging into websites or apps. With 2FA, you have to log in with your username and password, and then provide another form of authentication that only you know or have access to.</p>
+                <a href="">Read more information about 2FA at GitHub</a>
+
+            </div>
+
+            <p class="accordion">Why set up 2FA now? </p>
+            <div class="panel">
+                <ul>
+                    <li>We are in the process of establishing best practices on Hack for LA projects and in the HfLA  organization’s GitHub account.</li>
+                    <li>There have been recent news items about hackers attempting to hold open source  repositories for ransom. Although these attempts have mostly been unsuccessful, it is still a  good reminder that we should use security best practices.</li>
+                </ul>
+
+            </div>
+            <p class="accordion">Encountering challenges using Git CLI after setting up 2FA? (Developers) </p>
+            <div class="panel">
+                
+                <p>You might encounter a challenge using the Git CLI after enabling 2-Factor Authentication if you have not used the ssh link for the repo URL.</p><br>
+                
+                <p class="indent">If you clone via the ssh URL for a repo, e.g.</p>
+                <p class="indent"><mark class="highlight"><code>git@github.com:hackforla/governance.git</code></mark></p>
+                <p class="indent">instead of the <mark class="highlight">https</mark> URL, e.g.</p>
+                <p class="indent"><mark class="highlight"><code>https://github.com/hackforla/governance.git</code></mark></p>
+                <p class="indent">then you probably won't run into any issues after enabling 2FA, as you already use an SSH key.</p><br>
+
+                <p>Read more about <a href="https://docs.github.com/en/github/authenticating-to-github/connecting-to-github-with-ssh" target="blank">connecting to GitHub with SSH.</a></p>
+                <p>Also, these steps might help you get the CLI auth working again:</p>
+                <ol>
+                    <li><p>Try pushing code from the CLI, if you get rejected unexpectedly it’s 2FA (if you enabled it)</p></li>
+                    <li><p><a href="https://devconnected.com/how-to-clear-git-cache/#:~:text=The%20easiest%20way%20to%20clear,remove%20an%20entire%20working%20directory." target="blank">Clear your cached GH credentials</a></p></li>
+                    <li><p><a href="https://docs.github.com/en/github/authenticating-to-github/creating-a-personal-access-token" target="blank">Create a token at GH.com, which you’ll use as your CLI password</a></p></li>
+                </ol><br>
+                <p>If you are still having issues using 2FA with your CLI, please reach out to the <a href="https://app.slack.com/client/T04502KQX/CV7QGL66B" target="blank">#ops</a> channel on the Hack for LA Slack.</p>
+            </div>
+        </div>
+    </div>
+
+    <div class='section-container' style="display: none;">
+        <a class='anchor' id='Member-Analytics'></a>
+        <div class="step-header">
+            <h3>Member Analytics</h3>
+        </div>
+        <div class='getting-started-guide-content-section'>
+            <div>
+                <div class="donut-chart">
+                    <canvas id="myCanvas" class="step-header"></canvas>
+                    <script>
+                        let myCanvas = document.getElementById("myCanvas");
+                        myCanvas.width = 300;
+                        myCanvas.height = 300;
+                        
+                        let ctx = myCanvas.getContext("2d");
+
+                        let userData = {
+                            "New Members that have 2FA": 20,
+                            "New Members that have never used 2FA": 30
+                        }
+
+                        function drawLine(ctx, startX, startY, endX, endY){
+                            ctx.beginPath();
+                            ctx.moveTo(startX,startY);
+                            ctx.lineTo(endX,endY);
+                            ctx.stroke();
+                        }
+                        function drawArc(ctx, centerX, centerY, radius, startAngle, endAngle){
+                            ctx.beginPath();
+                            ctx.arc(centerX, centerY, radius, startAngle, endAngle);
+                            ctx.stroke();
+                        }
+                        function drawPieSlice(ctx,centerX, centerY, radius, startAngle, endAngle, color ){
+                            ctx.fillStyle = color;
+                            ctx.beginPath();
+                            ctx.moveTo(centerX,centerY);
+                            ctx.arc(centerX, centerY, radius, startAngle, endAngle);
+                            ctx.closePath();
+                            ctx.fill();
+                        }
+
+                        let Piechart = function(options){
+                        this.options = options;
+                        this.canvas = options.canvas;
+                        this.ctx = this.canvas.getContext("2d");
+                        this.colors = options.colors;
+                    
+                        this.draw = function(){
+                            let total_value = 0;
+                            let color_index = 0;
+                            for (let categ in this.options.data){
+                                let val = this.options.data[categ];
+                                total_value += val;
+                            }
+                    
+                            let start_angle = 0;
+                            for (let categ in this.options.data){
+                                let val = this.options.data[categ];
+                                let slice_angle = 2 * Math.PI * val / total_value;
+                    
+                                drawPieSlice(
+                                    this.ctx,
+                                    this.canvas.width/2,
+                                    this.canvas.height/2,
+                                    Math.min(this.canvas.width/2,this.canvas.height/2),
+                                    start_angle,
+                                    start_angle+slice_angle,
+                                    this.colors[color_index%this.colors.length]
+                                );
+                    
+                                start_angle += slice_angle;
+                                color_index++;
+                                }
+
+                                // for the donut hole
+                                if (this.options.doughnutHoleSize){
+                                    drawPieSlice(
+                                        this.ctx,
+                                        this.canvas.width/2,
+                                        this.canvas.height/2,
+                                        this.options.doughnutHoleSize * Math.min(this.canvas.width/2,this.canvas.height/2),
+                                        0,
+                                        2 * Math.PI,
+                                        "#FFFFFF"
+                                    );
+                                }
+
+                                start_angle = 0;
+                                for (categ in this.options.data){
+                                    val = this.options.data[categ];
+                                    slice_angle = 2 * Math.PI * val / total_value;
+                                    let pieRadius = Math.min(this.canvas.width/2,this.canvas.height/2);
+                                    let labelX = this.canvas.width/2 + (pieRadius / 2) * Math.cos(start_angle + slice_angle/2);
+                                    let labelY = this.canvas.height/2 + (pieRadius / 2) * Math.sin(start_angle + slice_angle/2);
+                                
+                                    if (this.options.doughnutHoleSize){
+                                        let offset = (pieRadius * this.options.doughnutHoleSize ) / 2;
+                                        labelX = this.canvas.width/2 + (offset + pieRadius / 2) * Math.cos(start_angle + slice_angle/2);
+                                        labelY = this.canvas.height/2 + (offset + pieRadius / 2) * Math.sin(start_angle + slice_angle/2);               
+                                    }
+                                
+                                    let labelText = Math.round(100 * val / total_value);
+                                    this.ctx.fillStyle = "white";
+                                    this.ctx.font = "bold 20px Arial";
+                                    this.ctx.fillText(labelText+"%", labelX,labelY);
+                                    start_angle += slice_angle;
+                                }
+                    
+                            }
+                        }
+
+                        let myPiechart = new Piechart(
+                            {
+                                canvas:myCanvas,
+                                data:userData,
+                                colors:["#89cff0", "#0000ff"],
+                                doughnutHoleSize:0.4
+                            }
+                        );
+myPiechart.draw();
+                    </script>
+                </div>
+                <ul class="donut-list">
+                    <li><span class="dot used"></span>New Members that have 2FA.</li>
+                    <li><span class="dot never-used"></span>New Members that have never used 2FA.</li>
+                </ul>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- //script for FAQ dropdown -->
+<script>
+    let showAnswer = document.getElementsByClassName('accordion');
+
+    for (let i = 0; i < showAnswer.length; i++) {
+        showAnswer[i].addEventListener("click", function () {
+
+            this.classList.toggle("active");
+            let panel = this.nextElementSibling;
+            if (panel.style.display === "block") {
+                panel.style.display = "none"
+            } else {
+                panel.style.display = "block"
+            }
+        })
+
+    }
+</script>
\ No newline at end of file
diff --git a/_guide-pages/github-issues.md b/_guide-pages/github-issues..html
similarity index 100%
rename from _guide-pages/github-issues.md
rename to _guide-pages/github-issues..html
diff --git a/_guide-pages/github-issues.html b/_guide-pages/github-issues.html
new file mode 100644
index 0000000000..16ef426af0
--- /dev/null
+++ b/_guide-pages/github-issues.html
@@ -0,0 +1,257 @@
+---
+title: Getting the Most Out of GitHub Issues
+description: Each of Hack for LA’s GitHub project repositories (repos) use <a href="https://guides.github.com/features/issues/">issues</a> to track and organize ideas, enhancements, and tasks. All team members will use GitHub issues to communicate in our multifunctional teams. <br><br> When creating a new GitHub issue, the following tips will help you provide consistent formatting, a clear and concise overview, actionable tasks, explanatory resources, and resumé items to add value for all volunteers. <br><br>        <em>All GitHub Issues use <strong>markdown</strong> for formatting. View GitHub’s <a href="https://guides.github.com/features/mastering-markdown/">Mastering Markdown</a> for a simple guide.</em>
+in-this-guide: 
+  - name: Example of a Good End-to-End Issue
+    link: '#example-issue'
+  - name: Issue Sections - Description and Tips
+    link: '#issue-sections'
+  - name: Issue Template
+    link: '#issue-template'
+  - name: Member Analytics
+    link: '#member-analytics'
+---
+
+
+
+<div class="section-container link-section">
+    <h3 id="example-issue">Example of a Good End-to-End Issue</h3>
+    <h5>An effective Hack for LA Github issue includes the following components:</h5>
+    <p><em>Click any section link below to jump down to its description</em></p> <br>
+
+    <div class="overlay-links">
+        <img class="screenshot" src="../assets/images/guides/github-issue/good-issue-example.svg" >
+        <!-- Arrows and Overlay Text Links -->
+        <!-- RIGHT SIDE LINKS -->
+        <img class="assignees" src="../assets/images/guides/pink-pointer.svg">
+        <h4><a href="#assignees-section" class="assignees">ASSIGNEES</a></h4>
+
+        <img class="labels" src="../assets/images/guides/pink-pointer.svg">
+        <h4><a href="#labels-section" class="labels">LABELS</a></h4>
+
+        <img class="project-board" src="../assets/images/guides/pink-pointer.svg">
+        <h4><a href="#project-board-section" class="project-board">PROJECTS</a></h4>
+
+        <img class="milestones" src="../assets/images/guides/pink-pointer.svg">
+        <h4><a href="#milestones-section" class="milestones">MILESTONES</a></h4>
+
+        <!-- LEFT SIDE LINKS -->
+        <img class="title left-pointer" src="../assets/images/guides/pink-pointer.svg">
+        <h4><a href="#title-section" class="title">TITLE</a></h4>
+
+        <img class="overview left-pointer" src="../assets/images/guides/pink-pointer.svg">
+        <h4><a href="#overview-section" class="overview">OVERVIEW</a></h4>
+
+        <img class="dependency left-pointer" src="../assets/images/guides/pink-pointer.svg">
+        <h4><a href="#dependency-section" class="dependency">DEPENDENCY</a></h4>
+
+        <img class="action-items left-pointer" src="../assets/images/guides/pink-pointer.svg">
+        <h4><a href="#action-items-section" class="action-items">ACTION ITEMS</a></h4>
+
+        <img class="resources left-pointer" src="../assets/images/guides/pink-pointer.svg">
+        <h4><a href="#resources-section" class="resources">RESOURCES/ INSTRUCTIONS</a></h4>
+
+        <img class="resume left-pointer" src="../assets/images/guides/pink-pointer.svg">
+        <h4><a href="#resume-section" class="resume">RESUME</a></h4>
+    </div>
+    <p><em>This issue is shown in Preview mode</em></p>
+</div>  
+
+
+
+<div class="section-container">
+    <h3 id="issue-sections">Issue Sections: Descriptions and Tips</h3>
+    <h5>Follow the recommendations below to create a useful end-to-end GitHub issue</h5>
+    <p class="subheading"><em>You can either format with <a href="https://guides.github.com/features/mastering-markdown/">markdown</a> text manually or using the text box toolbar</em></p><br>
+
+    <h4 id="title-section">TITLE</h4> 
+    <p>
+        Describe what you’re working on — <br><br>
+        For a start-to-finish issue, as in this case, choose a title that is generic enough to allow for all phases (research, ideation, design, development). <br><br>
+        For an issue taking on only part of the workflow, be more declarative in what it covers (e.g. a research issue might be called “Determine Best Testing Library for Code Base”).
+    </p><br>
+    <img src="../assets/images/guides/github-issue/issue-sections-1.png"><br>
+    <img src="../assets/images/guides/gray-arrow.svg" class="grayarrow"><br>
+    <img src="../assets/images/guides/github-issue/issue-sections-2.png"><br><br><br><br>
+
+
+    <h4 id="overview-section">OVERVIEW</h4> 
+    <p>Clearly state the purpose of this issue in 2 lines or less.</p>
+    <div class="img-and-caption">
+        <img src="../assets/images/guides/github-issue/issue-sections-3.png">
+        <p class="img-caption">Markdown draft: ### formats header</p>
+    </div><br>
+    <img src="../assets/images/guides/gray-arrow.svg" class="grayarrow"><br>
+    <div class="img-and-caption">
+        <img src="../assets/images/guides/github-issue/issue-sections-4.png"><br>
+        <p class="img-caption">Final post</p>
+    </div><br><br><br>
+
+
+    <div class="inline-text-with-title"><h4 id="dependency-section">DEPENDENCY </h4>
+    <span> (if applicable)</span></div>
+    <p>If your issue relies on another issue’s completion first, link to the issue it is dependent on.</p>
+    <div class="img-and-caption">
+        <img src="../assets/images/guides/github-issue/issue-sections-5.png">
+        <p class="img-caption">Markdown draft: [title](url) formats links</p>
+    </div><br>
+    <img src="../assets/images/guides/gray-arrow.svg" class="grayarrow"><br>
+    <div class="img-and-caption">
+        <img src="../assets/images/guides/github-issue/issue-sections-6.png">
+        <p class="img-caption">Final post</p>
+    </div><br><br><br>
+
+
+    <h4 id="action-items-section">ACTION ITEMS</h4> 
+    <p>
+        Formatted as a clickable checklist. <br><br>
+        If this is the beginning of the task, this is most likely something to be researched and documented. <br><br>
+        When the research is complete, what will happen next? Describe the steps in your checklist (broadly, if the research will change the details). <br><br>
+        If the steps can be divided into tasks for more than one person, we recommend dividing it up into separate sections.
+    </p><br>
+    <div class="img-and-caption">
+        <img src="../assets/images/guides/github-issue/issue-sections-7.png">
+        <p class="img-caption">Markdown draft: - [ ] formats checklist</p>
+    </div><br>
+    <img src="../assets/images/guides/gray-arrow.svg" class="grayarrow"><br>
+    <div class="img-and-caption">
+        <img src="../assets/images/guides/github-issue/issue-sections-8.png">
+        <p class="img-caption">Final post</p><br>
+    </div><br>
+    <img src="../assets/images/guides/gray-arrow.svg" class="grayarrow"><br>
+    <div class="img-and-caption">
+        <img src="../assets/images/guides/github-issue/issue-sections-9.png">
+        <p class="img-caption">Final post with checkmarks</p>
+    </div><br><br><br>
+
+
+    <h4 id="resources-section">RESOURCES / INSTRUCTIONS</h4> 
+    <p>
+        If there is a link with documentation that helps with this issue, provide the link(s) here.
+    </p><br>
+    <div class="img-and-caption">
+        <img src="../assets/images/guides/github-issue/issue-sections-10.png">
+        <p class="img-caption">Markdown draft</p>
+    </div><br>
+    <img src="../assets/images/guides/gray-arrow.svg" class="grayarrow"><br>
+    <div class="img-and-caption">
+        <img src="../assets/images/guides/github-issue/issue-sections-11.png">
+        <p class="img-caption">Final post</p>
+    </div><br><br><br>
+    
+
+    <h4 id="resume-section">RESUME</h4> 
+    <p>
+        Specify how tasks can be listed in all assignees’ resumés to provide value for project volunteers, divided by roles.
+    </p><br>
+    <div class="img-and-caption">
+        <img src="../assets/images/guides/github-issue/issue-sections-12.png">
+        <p class="img-caption">Markdown draft</p>
+    </div><br>
+    <img src="../assets/images/guides/gray-arrow.svg" class="grayarrow"><br>
+    <div class="img-and-caption">
+        <img src="../assets/images/guides/github-issue/issue-sections-13.png">
+        <p class="img-caption">Final post</p>
+    </div><br><br><br>
+
+
+    <h4 id="assignees-section">ASSIGNEES</h4> 
+    <p>
+        Select assignees to clarify who is working on specific issues and pull requests.<br><br>
+        In the upper-right corner, click Assignees. To assign a user (including yourself), start typing their username and click their name when it appears. <br><br>
+        Assign the issue to only one person at a time, by order of their tasks.
+    </p><br>
+    <span><img src="../assets/images/guides/github-issue/issue-sections-14.png">
+    <img src="../assets/images/guides/github-issue/issue-sections-15.png"></span><br><br><br>
+
+
+    <h4 id="labels-section">LABELS</h4> 
+    <p>
+        Select all relevant labels. See GitHub’s <a href="https://help.github.com/en/github/managing-your-work-on-github/about-labels">About Labels</a> guide for more details.
+    </p><br>
+    <span><img src="../assets/images/guides/github-issue/issue-sections-16.png">
+    <img src="../assets/images/guides/github-issue/issue-sections-17.png"></span><br><br><br>
+
+
+    <h4 id="project-board-section">PROJECT BOARD</h4> 
+    <p>
+        Make sure your issue is added to your team’s Project Board, and properly triaged. Click <a href="https://help.github.com/en/github/managing-your-work-on-github/adding-issues-and-pull-requests-to-a-project-board#adding-issues-and-pull-requests-to-a-project-board-from-the-sidebar">here</a> to learn more. <br><br>
+        If the issue has been created but is not ready to assign, it should be set in the <strong>ice box.</strong><br><br>
+        If the issue has been created and is ready but not yet assigned to someone, it should be set in <strong>prioritized backlog.</strong><br><br>
+        When someone has been assigned to the issue, this should be set to <strong>in progress.</strong>
+    </p><br>
+    <img src="../assets/images/guides/github-issue/issue-sections-18.png"><br><br><br>
+
+
+    <h4 id="milestones-section">MILESTONES</h4> 
+    <p>
+        You can use milestones to track the progress of groups of issues or pull requests in a repository. Read more at GitHub’s <a href="https://help.github.com/en/github/managing-your-work-on-github/about-milestones">About Milestones</a> guide.
+    </p><br>
+    <img src="../assets/images/guides/github-issue/issue-sections-19.png"><br><br><br>
+
+    <div class="inline-text-with-title"><h4 class="black-font ">TIP: </h4><h4> PREVIEW</h4></div>
+    <p>
+        Don’t forget to preview your new issue before posting to make sure it’s formatted correctly.
+    </p><br>
+    <img src="../assets/images/guides/github-issue/issue-sections-20.png"><br><br><br>
+</div>
+
+
+<div class="section-container">
+    <h3 id="issue-template">Issue Template</h3>
+    <p>Copy/paste the following <a href="https://guides.github.com/features/mastering-markdown/">markdown</a> template text into your new GitHub issue and fill out using the guidelines above.</p><br>
+    
+    <div class="issue-template-container" >
+        <button class="copy-button"><img src="../assets/images/guides/clipboard.png" class="clipboard">Copy</button>
+
+        <div class="issue-template-code" contenteditable="true" spellcheck="false">
+            <code class="template-code">            
+                ### Overview <br>
+                <br>
+                ### Action Items <br>
+                - [ ] <br>
+                - [ ] <br>
+                    - [ ] <br>
+                <br>
+                ### Resources/Instructions <br>
+                <span class="blue-text">[link title](link URL)</span><br>
+                <br>
+                ### Resume <br>
+                <br>
+                <span class="green-text">UX Writing: </span><br>
+                - <br>
+                - <br>
+                <span class="green-text">UI Mockup: </span><br>
+                - <br>
+                - <br>
+                <span class="green-text"></span>Developers: </span><br>
+                - <br>
+                - <br>
+            </code>
+        </div>
+    </div>
+</div>
+
+
+<!-- <div class="section-container">
+    <h3 id="member-analytics">Member Analytics</h3>
+</div> -->
+
+
+<script>
+ 
+    const issueTemplate = document.querySelector('.issue-template-code');
+    const code = document.querySelector('.template-code');
+    const copyButton = document.querySelector('.copy-button');
+
+    copyButton.addEventListener("click", copyText);
+
+    function copyText() {
+        issueTemplate.focus();
+        document.execCommand("selectAll");
+        const text = code.value;
+        document.execCommand("copy");
+        copyButton.style.border = "0.5px solid #7A7A7A";
+        copyButton.style.boxShadow = "inset 0px 0px 6px rgba(0, 0, 0, 0.39)";
+    }
+</script>
diff --git a/_sass/_main.scss b/_sass/_main.scss
index daaa6fa691..dc703c0975 100644
--- a/_sass/_main.scss
+++ b/_sass/_main.scss
@@ -45,6 +45,7 @@
 @import 'components/getting-started-page.scss';
 @import 'components/project-meetings.scss';
 @import 'components/guide-pages.scss';
+@import 'components/guide-pages/2FA.scss';
 
 //Guide Pages (Within Components)
 @import 'components/guide-pages/github-issue-guide.scss';
diff --git a/_sass/components/_footer.scss b/_sass/components/_footer.scss
index d651d3bf5c..0b3286aff8 100644
--- a/_sass/components/_footer.scss
+++ b/_sass/components/_footer.scss
@@ -34,6 +34,7 @@
   }
 
   .social-header {
-    position: relative
+    position: relative;
+    color: #fa114f;
   }
 }
diff --git a/_sass/components/guide-pages/2FA.scss b/_sass/components/guide-pages/2FA.scss
new file mode 100644
index 0000000000..8880bfdfb0
--- /dev/null
+++ b/_sass/components/guide-pages/2FA.scss
@@ -0,0 +1,102 @@
+.accordion {
+    padding: 0.2rem;
+    
+}
+
+#myCanvas {
+    justify-content: center;
+    text-align: center;
+    // width: 100%;
+    // height: 100%;
+    margin: auto;
+}
+
+.donut-list li {
+    list-style: none;
+    margin: auto;
+    text-align: center;
+    padding: 1rem;
+}
+
+.dot {
+    height: 2rem;
+    width: 2rem;
+    padding-right: 1rem;
+    margin-right: 1rem;
+    margin-top: 1rem;
+    border-radius: 50%;
+    display: inline-block;
+}
+
+.used {
+    background-color: #89cff0;
+}
+
+.never-used {
+    background-color: #0000ff;
+}
+
+.indent {
+    padding-left: 2rem;
+}
+
+.highlight {
+    background-color: #EDEDED;
+    word-wrap: break-word;
+}
+
+.screenshot {
+    text-align: center;
+}
+
+.screenshot-2FA img {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    min-width: 200px;
+}
+
+.title-left {
+    text-align: left;
+}
+
+@media #{$bp-tablet-up} {
+    .accordion {
+        min-width: 400px;
+    }
+    .screenshot-2FA img {
+        width: 100%;
+    }
+}
+
+@media #{$bp-below-tablet} {
+    .screenshot-2FA img {
+        width: 100%;
+    }
+
+    #myCanvas {
+        width: 80%;
+    }
+
+    .donut-list li {
+        padding-left: 0.1rem;
+        text-align: left;
+    }
+}
+
+@media #{$bp-below-desktop} {
+    .accordion {
+        min-width: 150px;
+    }
+
+    .screenshot-2FA img {
+        min-width: 200px;
+        width: 100%;
+    }
+}
+
+@media #{$bp-desktop-up} {
+    .screenshot-2FA img {
+        width: 50%;
+    }
+}
\ No newline at end of file
diff --git a/assets/images/guides/2FA/2FA-Screenshot.png b/assets/images/guides/2FA/2FA-Screenshot.png
new file mode 100644
index 0000000000..7821270597
Binary files /dev/null and b/assets/images/guides/2FA/2FA-Screenshot.png differ