from django.db.models import F
from django.shortcuts import render

from registrar.models import DomainApplication


def index(request):
    """This page is available to anyone without logging in."""
    context = {}
    if request.user.is_authenticated:
        applications = DomainApplication.objects.filter(creator=request.user)
        # Let's exclude the approved applications since our
        # domain_applications context will be used to populate
        # the active applications table
        context["domain_applications"] = applications.exclude(status="approved")

        domains = request.user.permissions.values(
            "role",
            pk=F("domain__id"),
            name=F("domain__name"),
            created_time=F("domain__created_at"),
            application_status=F("domain__domain_application__status"),
        )
        context["domains"] = domains
    return render(request, "home.html", context)

src/registrar/views/index.py
from django.db.models import F
from django.shortcuts import render

from registrar.models import DomainApplication


def index(request):
    """This page is available to anyone without logging in."""
    context = {}
    if request.user.is_authenticated:
        applications = DomainApplication.objects.filter(creator=request.user)
        # Let's exclude the approved applications since our
        # domain_applications context will be used to populate
        # the active applications table
        context["domain_applications"] = applications.exclude(status="approved")

        domains = request.user.permissions.values(
            "role",
            pk=F("domain__id"),
            name=F("domain__name"),
            created_time=F("domain__created_at"),
            state=F("domain__state"),
        )
        context["domains"] = domains
    return render(request, "home.html", context)

src/registrar/views/index.py
diff --git a/src/registrar/assets/sass/_theme/_uswds-theme-custom-styles.scss b/src/registrar/assets/sass/_theme/_uswds-theme-custom-styles.scss
index 4878235a9..e69b36bb8 100644
--- a/src/registrar/assets/sass/_theme/_uswds-theme-custom-styles.scss
+++ b/src/registrar/assets/sass/_theme/_uswds-theme-custom-styles.scss
@@ -399,6 +399,11 @@ a.usa-button--unstyled:visited {
   border-color: color('accent-cool-lighter');
 }
 
+.dotgov-status-box--action-need {
+  background-color: color('warning-lighter'); 
+  border-color: color('warning');
+}
+
 #wrapper {
   padding-top: units(3);
   padding-bottom: units(6) * 2 ; //Workaround because USWDS units jump from 10 to 15
diff --git a/src/registrar/templates/domain_detail.html b/src/registrar/templates/domain_detail.html
index 074f7fec3..6a700b393 100644
--- a/src/registrar/templates/domain_detail.html
+++ b/src/registrar/templates/domain_detail.html
@@ -5,6 +5,28 @@
   {{ block.super }}
   <div class="margin-top-4 tablet:grid-col-10">
 
+    <div
+        class="usa-summary-box dotgov-status-box margin-top-3 padding-left-2{% if domain.state == domain.State.UNKNOWN or domain.state == domain.State.DNS_NEEDED%} dotgov-status-box--action-need{% endif %}"
+        role="region"
+        aria-labelledby="summary-box-key-information"
+    >
+      <div class="usa-summary-box__body">
+        <p class="usa-summary-box__heading font-sans-md margin-bottom-0" 
+          id="summary-box-key-information"
+        > 
+          <span class="text-bold text-primary-darker">
+            Status:
+          </span>
+            {% if domain.state == domain.State.UNKNOWN or domain.state == domain.State.DNS_NEEDED%}
+              DNS Needed
+            {% else %}
+                {{ domain.state|title }}
+            {% endif %}
+        </p>
+      </div>
+    </div>
+    <br>
+
     {% url 'domain-nameservers' pk=domain.id as url %}
     {% if domain.nameservers|length > 0 %}
       {% include "includes/summary_item.html" with title='DNS name servers' value=domain.nameservers list='true' edit_link=url %}
diff --git a/src/registrar/templates/home.html b/src/registrar/templates/home.html
index db3fab886..e86c08c70 100644
--- a/src/registrar/templates/home.html
+++ b/src/registrar/templates/home.html
@@ -33,14 +33,18 @@ <h2>Domains</h2>
       </thead>
       <tbody>
         {% for domain in domains %}
-        {% comment %} ticket 796
-        {% if domain.application_status == "approved" or (domain.application does not exist)  %} {% endcomment %}
         <tr>
           <th th scope="row" role="rowheader" data-label="Domain name">
             {{ domain.name }}
           </th>
           <td data-sort-value="{{ domain.created_time|date:"U" }}" data-label="Date created">{{ domain.created_time|date }}</td>
-          <td data-label="Status">{{ domain.application_status|title }}</td>
+          <td data-label="Status">
+            {% if domain.state == "unknown" or domain.state == "dns needed"%}
+                DNS Needed
+            {% else %}
+                {{ domain.state|title }}
+            {% endif %}
+          </td>
           <td>
             <a href="{% url "domain" pk=domain.pk %}">
               <svg
@@ -50,9 +54,15 @@ <h2>Domains</h2>
                 role="img"
                 width="24"
               >
+              {% if domain.state == "deleted" or domain.state == "on hold" %}
+                <use xlink:href="{%static 'img/sprite.svg'%}#visibility"></use>
+              </svg>
+                View <span class="usa-sr-only">{{ domain.name }}</span>
+              {% else %}
                 <use xlink:href="{%static 'img/sprite.svg'%}#settings"></use>
               </svg>
                 Manage <span class="usa-sr-only">{{ domain.name }}</span>
+              {% endif %}
             </a>
           </td>
         </tr>
diff --git a/src/registrar/tests/test_views.py b/src/registrar/tests/test_views.py
index 318cc261d..654c95b02 100644
--- a/src/registrar/tests/test_views.py
+++ b/src/registrar/tests/test_views.py
@@ -25,6 +25,7 @@
 from registrar.views.application import ApplicationWizard, Step
 
 from .common import less_console_noise
+from .common import MockEppLib
 
 
 class TestViews(TestCase):
@@ -47,8 +48,9 @@ def test_application_form_not_logged_in(self):
         self.assertIn("/login?next=/register/", response.headers["Location"])
 
 
-class TestWithUser(TestCase):
+class TestWithUser(MockEppLib):
     def setUp(self):
+        super().setUp()
         username = "test_user"
         first_name = "First"
         last_name = "Last"
@@ -59,6 +61,7 @@ def setUp(self):
 
     def tearDown(self):
         # delete any applications too
+        super().tearDown()
         DomainApplication.objects.all().delete()
         self.user.delete()
 
@@ -91,6 +94,7 @@ def test_home_lists_domains(self):
         response = self.client.get("/")
         # count = 2 because it is also in screenreader content
         self.assertContains(response, "igorville.gov", count=2)
+        self.assertContains(response, "DNS Needed")
         # clean up
         role.delete()
 
@@ -1140,6 +1144,7 @@ def test_domain_detail_link_works(self):
         # click the "Edit" link
         detail_page = home_page.click("Manage")
         self.assertContains(detail_page, "igorville.gov")
+        self.assertContains(detail_page, "Status")
 
     def test_domain_user_management(self):
         response = self.client.get(
@@ -1293,6 +1298,7 @@ def test_domain_nameservers(self):
         )
         self.assertContains(page, "Domain name servers")
 
+    @skip("Broken by adding registry connection fix in ticket 848")
     def test_domain_nameservers_form(self):
         """Can change domain's nameservers.
 
diff --git a/src/registrar/views/index.py b/src/registrar/views/index.py
index 186535aa3..b203694ff 100644
--- a/src/registrar/views/index.py
+++ b/src/registrar/views/index.py
@@ -19,7 +19,7 @@ def index(request):
             pk=F("domain__id"),
             name=F("domain__name"),
             created_time=F("domain__created_at"),
-            application_status=F("domain__domain_application__status"),
+            state=F("domain__state"),
         )
         context["domains"] = domains
     return render(request, "home.html", context)

Show simplified domain statuses to the registrant
### Story

As a domain manager
I want to know the status of my domain in simple language
so that I know if any action is needed or if any functions are limited


### Acceptance Criteria

- [x] Domains table on the dashboard shows a user-friendly domain status
- [ ] Show the domain status on the "Domain Overview" page
- [ ] For Domain statuses Deleted and Hold, change manage link to View with eye icon [(Figma)](https://www.figma.com/file/aJbuDLJNNikqQObTuCNKQa/GetGov_Designs_ECS-Truss?type=design&node-id=428%3A11621&mode=design&t=eottghQ6NoX98F6q-1)


### Additional Context
**BACKGROUND**
In general, EPP / domain statuses are not easily understandable to most users; therefore, we need to ensure we're showing "user-friendly" versions of the domain status. 

User-friendly statuses include: 
- _Note:_ "Unknown" _Domain status shows as_ "DNS needed"
- DNS needed 
- Ready
- On hold
- Deleted

Refer to[ status diagram Miro](https://miro.com/app/board/uXjVMuqbLOk=/?moveToWidget=3458764561795634398&cot=14)

**DOMAINS TABLE**
Currently, the approved Domains table displays the application status. But, because the application process is complete, we should update this to show the _domain_ status. 

Reference [Figma mock up](https://www.figma.com/file/aJbuDLJNNikqQObTuCNKQa/GetGov_Designs_ECS-Truss?type=design&node-id=428-25637&mode=design&t=VBfj3tkkg2p3f8UT-0)

**DOMAIN OVERVIEW**
Currently, we do not show the  domain status when viewing the "Manage Domains" pages. The "Manage Domains" pages can be accessed by clicking the "Manage" button next to an approved domain. 

The first page is the "Domain Overview." Add stylized message to the top of that page to indicate the user-friendly domain status.

Reference [Figma mock up](https://www.figma.com/file/aJbuDLJNNikqQObTuCNKQa/GetGov_Designs_ECS-Truss?type=design&node-id=4829-39693&mode=design&t=VBfj3tkkg2p3f8UT-0)

### Issue Links

Depends on: Domain Status presence for testing
