diff --git a/inji-web/src/__tests__/components/Common/__snapshots__/EmptyListContainer.test.tsx.snap b/inji-web/src/__tests__/components/Common/__snapshots__/EmptyListContainer.test.tsx.snap
index da9d326..eb7003f 100644
--- a/inji-web/src/__tests__/components/Common/__snapshots__/EmptyListContainer.test.tsx.snap
+++ b/inji-web/src/__tests__/components/Common/__snapshots__/EmptyListContainer.test.tsx.snap
@@ -3,8 +3,7 @@
 exports[`Testing the Layouts of EmptyListContainer Check if the layout is matching with the snapshots 1`] = `
 <DocumentFragment>
   <div
-    class="flex justify-center items-center w-full mx-auto bg-iw-background
- my-auto flex-col h-72 shadow-md shadow-iw-shadow border-t-iw-shadow px-10"
+    class="flex justify-center items-center w-full mx-auto bg-iw-background my-auto flex-col h-72 shadow-md shadow-iw-shadow border-t-iw-shadow px-10"
     data-testid="EmptyList-Outer-Container"
   >
     <p
diff --git a/inji-web/src/__tests__/components/Common/__snapshots__/ErrorSheildIcon.test.tsx.snap b/inji-web/src/__tests__/components/Common/__snapshots__/ErrorSheildIcon.test.tsx.snap
index f58ce68..568ed3c 100644
--- a/inji-web/src/__tests__/components/Common/__snapshots__/ErrorSheildIcon.test.tsx.snap
+++ b/inji-web/src/__tests__/components/Common/__snapshots__/ErrorSheildIcon.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Testing the Layout of ErrorSheildIcon Check if the layout is matching with the snapshots 1`] = `
 <DocumentFragment>
   <div
-    class="rounded-full p-2 shadow"
+    class="rounded-full p-2 shadow bg-white"
   >
     <div
       class="rounded-full p-8 bg-iw-shieldErrorShadow"
diff --git a/inji-web/src/__tests__/components/Common/__snapshots__/LandingPageWrapper.test.tsx.snap b/inji-web/src/__tests__/components/Common/__snapshots__/LandingPageWrapper.test.tsx.snap
index 8cf4358..a63a3b9 100644
--- a/inji-web/src/__tests__/components/Common/__snapshots__/LandingPageWrapper.test.tsx.snap
+++ b/inji-web/src/__tests__/components/Common/__snapshots__/LandingPageWrapper.test.tsx.snap
@@ -29,13 +29,19 @@ exports[`Testing the Layout of LandingPageWrapper Check if the layout is matchin
         Test SubTitle
       </p>
     </div>
-    <div>
-      <button
-        class="text-iw-primary font-bold py-2 px-4 rounded-lg border-2 border-iw-primary"
-        data-testid="DownloadResult-Home-Button"
+    <div
+      class="bg-gradient-to-r rounded-lg from-iw-primary to-iw-secondary p-0.5"
+    >
+      <div
+        class="py-2 px-4 rounded-lg bg-white"
       >
-        Go To Home
-      </button>
+        <button
+          class="text-iw-tertiary font-bold rounded-lg"
+          data-testid="DownloadResult-Home-Button"
+        >
+          Go To Home
+        </button>
+      </div>
     </div>
   </div>
 </DocumentFragment>
diff --git a/inji-web/src/__tests__/components/Common/__snapshots__/LanguageSelector.test.tsx.snap b/inji-web/src/__tests__/components/Common/__snapshots__/LanguageSelector.test.tsx.snap
index 8a1eb37..63355d9 100644
--- a/inji-web/src/__tests__/components/Common/__snapshots__/LanguageSelector.test.tsx.snap
+++ b/inji-web/src/__tests__/components/Common/__snapshots__/LanguageSelector.test.tsx.snap
@@ -8,6 +8,27 @@ exports[`Testing the Layout of Language Selector Check if the layout is matching
     role="button"
     tabindex="0"
   >
+    <svg
+      height="0"
+      width="0"
+    >
+      <lineargradient
+        id="blue-gradient"
+        x1="0%"
+        x2="100%"
+        y1="0%"
+        y2="100%"
+      >
+        <stop
+          offset="0%"
+          stop-color="var(--iw-color-primary)"
+        />
+        <stop
+          offset="100%"
+          stop-color="var(--iw-color-secondary)"
+        />
+      </lineargradient>
+    </svg>
     <svg
       color="var(--iw-color-languageGlobeIcon)"
       data-testid="Language-Selector-Icon"
@@ -15,6 +36,7 @@ exports[`Testing the Layout of Language Selector Check if the layout is matching
       height="30"
       stroke="currentColor"
       stroke-width="0"
+      style="fill: url(#blue-gradient);"
       viewBox="0 0 16 16"
       width="30"
       xmlns="http://www.w3.org/2000/svg"
@@ -38,12 +60,34 @@ exports[`Testing the Layout of Language Selector Check if the layout is matching
         >
           English
         </p>
+        <svg
+          height="0"
+          width="0"
+        >
+          <lineargradient
+            id="blue-gradient"
+            x1="0%"
+            x2="100%"
+            y1="0%"
+            y2="100%"
+          >
+            <stop
+              offset="0%"
+              stop-color="var(--iw-color-primary)"
+            />
+            <stop
+              offset="100%"
+              stop-color="var(--iw-color-secondary)"
+            />
+          </lineargradient>
+        </svg>
         <svg
           color="var(--iw-color-languageArrowIcon)"
           fill="currentColor"
           height="20"
           stroke="currentColor"
           stroke-width="0"
+          style="fill: url(#blue-gradient);"
           viewBox="0 0 24 24"
           width="20"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/inji-web/src/__tests__/components/Common/__snapshots__/NavBar.test.tsx.snap b/inji-web/src/__tests__/components/Common/__snapshots__/NavBar.test.tsx.snap
index f1adb47..a1104ee 100644
--- a/inji-web/src/__tests__/components/Common/__snapshots__/NavBar.test.tsx.snap
+++ b/inji-web/src/__tests__/components/Common/__snapshots__/NavBar.test.tsx.snap
@@ -3,12 +3,11 @@
 exports[`Testing the Layout of NavBar Check the presence of the navbar container 1`] = `
 <DocumentFragment>
   <div
-    class="bg-iw-navigationBar text-iw-title p-4 py-10"
+    class="bg-iw-navigationBar bg-gradient-to-r from-iw-lightPrimary to-iw-lightSecondary text-iw-title p-4 py-10"
     data-testid="NavBar-Outer-Container"
   >
     <nav
-      class=" mx-auto flex flex-col justify-start container items-start
- sm:flex-row sm:justify-start sm:items-center"
+      class=" mx-auto flex flex-col justify-start container items-start sm:flex-row sm:justify-start sm:items-center"
       data-testid="NavBar-Inner-Container"
     >
       <div
diff --git a/inji-web/src/__tests__/components/Common/__snapshots__/SuccessSheildIcon.test.tsx.snap b/inji-web/src/__tests__/components/Common/__snapshots__/SuccessSheildIcon.test.tsx.snap
index 82006b9..b77f8f8 100644
--- a/inji-web/src/__tests__/components/Common/__snapshots__/SuccessSheildIcon.test.tsx.snap
+++ b/inji-web/src/__tests__/components/Common/__snapshots__/SuccessSheildIcon.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Testing the Layout of SuccessSheildIcon Check if the layout is matching with the snapshots 1`] = `
 <DocumentFragment>
   <div
-    class="rounded-full p-2 shadow"
+    class="rounded-full p-2 shadow bg-white"
   >
     <div
       class="rounded-full p-8 bg-iw-shieldSuccessShadow "
diff --git a/inji-web/src/__tests__/components/Credentials/__snapshots__/CredentialList.test.tsx.snap b/inji-web/src/__tests__/components/Credentials/__snapshots__/CredentialList.test.tsx.snap
index 29c03c9..a274d3d 100644
--- a/inji-web/src/__tests__/components/Credentials/__snapshots__/CredentialList.test.tsx.snap
+++ b/inji-web/src/__tests__/components/Credentials/__snapshots__/CredentialList.test.tsx.snap
@@ -16,8 +16,7 @@ exports[`Testing the Layout of CredentialList Layouts Check if the layout is mat
       Choose a credential, and confirm your identity in the next step.
     </div>
     <div
-      class="flex justify-center items-center w-full mx-auto bg-iw-background
- my-auto flex-col h-72 shadow-md shadow-iw-shadow border-t-iw-shadow px-10"
+      class="flex justify-center items-center w-full mx-auto bg-iw-background my-auto flex-col h-72 shadow-md shadow-iw-shadow border-t-iw-shadow px-10"
       data-testid="EmptyList-Outer-Container"
     >
       <p
@@ -105,8 +104,7 @@ exports[`Testing the Layout of CredentialList Layouts Check if the layout is mat
       Choose a credential, and confirm your identity in the next step.
     </div>
     <div
-      class="flex justify-center items-center w-full mx-auto bg-iw-background
- my-auto flex-col h-72 shadow-md shadow-iw-shadow border-t-iw-shadow px-10"
+      class="flex justify-center items-center w-full mx-auto bg-iw-background my-auto flex-col h-72 shadow-md shadow-iw-shadow border-t-iw-shadow px-10"
       data-testid="EmptyList-Outer-Container"
     >
       <p
@@ -136,8 +134,7 @@ exports[`Testing the Layout of CredentialList Layouts Check if the layout is mat
       Choose a credential, and confirm your identity in the next step.
     </div>
     <div
-      class="flex justify-center items-center w-full mx-auto bg-iw-background
- my-auto flex-col h-72 shadow-md shadow-iw-shadow border-t-iw-shadow px-10"
+      class="flex justify-center items-center w-full mx-auto bg-iw-background my-auto flex-col h-72 shadow-md shadow-iw-shadow border-t-iw-shadow px-10"
       data-testid="EmptyList-Outer-Container"
     >
       <p
diff --git a/inji-web/src/__tests__/components/Help/__snapshots__/HelpAccordion.test.tsx.snap b/inji-web/src/__tests__/components/Help/__snapshots__/HelpAccordion.test.tsx.snap
index 9c1e4fb..98161c8 100644
--- a/inji-web/src/__tests__/components/Help/__snapshots__/HelpAccordion.test.tsx.snap
+++ b/inji-web/src/__tests__/components/Help/__snapshots__/HelpAccordion.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`Testing the layout of Help Accordion Check if the layout is matching wi
     data-testid="Help-Accordion-Container"
   >
     <div
-      class="rounded-md mb-2 shadow-sm shadow-iw-shadow"
+      class="rounded-md mb-2 shadow-md shadow-iw-shadow"
       data-testid="Help-Item-Container"
     >
       <button
@@ -39,7 +39,7 @@ exports[`Testing the layout of Help Accordion Check if the layout is matching wi
         </div>
       </button>
       <div
-        class="p-5 bg-iw-background border-t-2"
+        class="p-5 bg-iw-background border-t"
         data-testid="Help-Item-Content-Text"
       >
         <p
@@ -50,7 +50,7 @@ exports[`Testing the layout of Help Accordion Check if the layout is matching wi
       </div>
     </div>
     <div
-      class="rounded-md mb-2 shadow-sm shadow-iw-shadow"
+      class="rounded-md mb-2 shadow-md shadow-iw-shadow"
       data-testid="Help-Item-Container"
     >
       <button
@@ -84,7 +84,7 @@ exports[`Testing the layout of Help Accordion Check if the layout is matching wi
       </button>
     </div>
     <div
-      class="rounded-md mb-2 shadow-sm shadow-iw-shadow"
+      class="rounded-md mb-2 shadow-md shadow-iw-shadow"
       data-testid="Help-Item-Container"
     >
       <button
@@ -118,7 +118,7 @@ exports[`Testing the layout of Help Accordion Check if the layout is matching wi
       </button>
     </div>
     <div
-      class="rounded-md mb-2 shadow-sm shadow-iw-shadow"
+      class="rounded-md mb-2 shadow-md shadow-iw-shadow"
       data-testid="Help-Item-Container"
     >
       <button
@@ -152,7 +152,7 @@ exports[`Testing the layout of Help Accordion Check if the layout is matching wi
       </button>
     </div>
     <div
-      class="rounded-md mb-2 shadow-sm shadow-iw-shadow"
+      class="rounded-md mb-2 shadow-md shadow-iw-shadow"
       data-testid="Help-Item-Container"
     >
       <button
@@ -186,7 +186,7 @@ exports[`Testing the layout of Help Accordion Check if the layout is matching wi
       </button>
     </div>
     <div
-      class="rounded-md mb-2 shadow-sm shadow-iw-shadow"
+      class="rounded-md mb-2 shadow-md shadow-iw-shadow"
       data-testid="Help-Item-Container"
     >
       <button
@@ -220,7 +220,7 @@ exports[`Testing the layout of Help Accordion Check if the layout is matching wi
       </button>
     </div>
     <div
-      class="rounded-md mb-2 shadow-sm shadow-iw-shadow"
+      class="rounded-md mb-2 shadow-md shadow-iw-shadow"
       data-testid="Help-Item-Container"
     >
       <button
@@ -254,7 +254,7 @@ exports[`Testing the layout of Help Accordion Check if the layout is matching wi
       </button>
     </div>
     <div
-      class="rounded-md mb-2 shadow-sm shadow-iw-shadow"
+      class="rounded-md mb-2 shadow-md shadow-iw-shadow"
       data-testid="Help-Item-Container"
     >
       <button
@@ -288,7 +288,7 @@ exports[`Testing the layout of Help Accordion Check if the layout is matching wi
       </button>
     </div>
     <div
-      class="rounded-md mb-2 shadow-sm shadow-iw-shadow"
+      class="rounded-md mb-2 shadow-md shadow-iw-shadow"
       data-testid="Help-Item-Container"
     >
       <button
@@ -322,7 +322,7 @@ exports[`Testing the layout of Help Accordion Check if the layout is matching wi
       </button>
     </div>
     <div
-      class="rounded-md mb-2 shadow-sm shadow-iw-shadow"
+      class="rounded-md mb-2 shadow-md shadow-iw-shadow"
       data-testid="Help-Item-Container"
     >
       <button
@@ -356,7 +356,7 @@ exports[`Testing the layout of Help Accordion Check if the layout is matching wi
       </button>
     </div>
     <div
-      class="rounded-md mb-2 shadow-sm shadow-iw-shadow"
+      class="rounded-md mb-2 shadow-md shadow-iw-shadow"
       data-testid="Help-Item-Container"
     >
       <button
@@ -390,7 +390,7 @@ exports[`Testing the layout of Help Accordion Check if the layout is matching wi
       </button>
     </div>
     <div
-      class="rounded-md mb-2 shadow-sm shadow-iw-shadow"
+      class="rounded-md mb-2 shadow-md shadow-iw-shadow"
       data-testid="Help-Item-Container"
     >
       <button
@@ -424,7 +424,7 @@ exports[`Testing the layout of Help Accordion Check if the layout is matching wi
       </button>
     </div>
     <div
-      class="rounded-md mb-2 shadow-sm shadow-iw-shadow"
+      class="rounded-md mb-2 shadow-md shadow-iw-shadow"
       data-testid="Help-Item-Container"
     >
       <button
@@ -458,7 +458,7 @@ exports[`Testing the layout of Help Accordion Check if the layout is matching wi
       </button>
     </div>
     <div
-      class="rounded-md mb-2 shadow-sm shadow-iw-shadow"
+      class="rounded-md mb-2 shadow-md shadow-iw-shadow"
       data-testid="Help-Item-Container"
     >
       <button
@@ -492,7 +492,7 @@ exports[`Testing the layout of Help Accordion Check if the layout is matching wi
       </button>
     </div>
     <div
-      class="rounded-md mb-2 shadow-sm shadow-iw-shadow"
+      class="rounded-md mb-2 shadow-md shadow-iw-shadow"
       data-testid="Help-Item-Container"
     >
       <button
@@ -526,7 +526,7 @@ exports[`Testing the layout of Help Accordion Check if the layout is matching wi
       </button>
     </div>
     <div
-      class="rounded-md mb-2 shadow-sm shadow-iw-shadow"
+      class="rounded-md mb-2 shadow-md shadow-iw-shadow"
       data-testid="Help-Item-Container"
     >
       <button
@@ -560,7 +560,7 @@ exports[`Testing the layout of Help Accordion Check if the layout is matching wi
       </button>
     </div>
     <div
-      class="rounded-md mb-2 shadow-sm shadow-iw-shadow"
+      class="rounded-md mb-2 shadow-md shadow-iw-shadow"
       data-testid="Help-Item-Container"
     >
       <button
@@ -594,7 +594,7 @@ exports[`Testing the layout of Help Accordion Check if the layout is matching wi
       </button>
     </div>
     <div
-      class="rounded-md mb-2 shadow-sm shadow-iw-shadow"
+      class="rounded-md mb-2 shadow-md shadow-iw-shadow"
       data-testid="Help-Item-Container"
     >
       <button
@@ -628,7 +628,7 @@ exports[`Testing the layout of Help Accordion Check if the layout is matching wi
       </button>
     </div>
     <div
-      class="rounded-md mb-2 shadow-sm shadow-iw-shadow"
+      class="rounded-md mb-2 shadow-md shadow-iw-shadow"
       data-testid="Help-Item-Container"
     >
       <button
@@ -662,7 +662,7 @@ exports[`Testing the layout of Help Accordion Check if the layout is matching wi
       </button>
     </div>
     <div
-      class="rounded-md mb-2 shadow-sm shadow-iw-shadow"
+      class="rounded-md mb-2 shadow-md shadow-iw-shadow"
       data-testid="Help-Item-Container"
     >
       <button
@@ -696,7 +696,7 @@ exports[`Testing the layout of Help Accordion Check if the layout is matching wi
       </button>
     </div>
     <div
-      class="rounded-md mb-2 shadow-sm shadow-iw-shadow"
+      class="rounded-md mb-2 shadow-md shadow-iw-shadow"
       data-testid="Help-Item-Container"
     >
       <button
@@ -730,7 +730,7 @@ exports[`Testing the layout of Help Accordion Check if the layout is matching wi
       </button>
     </div>
     <div
-      class="rounded-md mb-2 shadow-sm shadow-iw-shadow"
+      class="rounded-md mb-2 shadow-md shadow-iw-shadow"
       data-testid="Help-Item-Container"
     >
       <button
@@ -764,7 +764,7 @@ exports[`Testing the layout of Help Accordion Check if the layout is matching wi
       </button>
     </div>
     <div
-      class="rounded-md mb-2 shadow-sm shadow-iw-shadow"
+      class="rounded-md mb-2 shadow-md shadow-iw-shadow"
       data-testid="Help-Item-Container"
     >
       <button
diff --git a/inji-web/src/__tests__/components/Help/__snapshots__/HelpAccordionItem.test.tsx.snap b/inji-web/src/__tests__/components/Help/__snapshots__/HelpAccordionItem.test.tsx.snap
index 2b145d7..7ae2f51 100644
--- a/inji-web/src/__tests__/components/Help/__snapshots__/HelpAccordionItem.test.tsx.snap
+++ b/inji-web/src/__tests__/components/Help/__snapshots__/HelpAccordionItem.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Testing the Layout of Help Accordion Check if the layout is matching with the snapshots 1`] = `
 <DocumentFragment>
   <div
-    class="rounded-md mb-2 shadow-sm shadow-iw-shadow"
+    class="rounded-md mb-2 shadow-md shadow-iw-shadow"
     data-testid="Help-Item-Container"
   >
     <button
@@ -36,7 +36,7 @@ exports[`Testing the Layout of Help Accordion Check if the layout is matching wi
       </div>
     </button>
     <div
-      class="p-5 bg-iw-background border-t-2"
+      class="p-5 bg-iw-background border-t"
       data-testid="Help-Item-Content-Text"
     >
       <p
diff --git a/inji-web/src/__tests__/components/Issuer/__snapshots__/IssuerList.test.tsx.snap b/inji-web/src/__tests__/components/Issuer/__snapshots__/IssuerList.test.tsx.snap
index 8d79990..c5e8c9f 100644
--- a/inji-web/src/__tests__/components/Issuer/__snapshots__/IssuerList.test.tsx.snap
+++ b/inji-web/src/__tests__/components/Issuer/__snapshots__/IssuerList.test.tsx.snap
@@ -19,8 +19,7 @@ exports[`Testing the Layout of IssuersList Check whether it renders empty issuer
       Search for your trusted issuer and choose a credential type in the next step.
     </div>
     <div
-      class="flex justify-center items-center w-full mx-auto bg-iw-background
- my-auto flex-col h-72 shadow-md shadow-iw-shadow border-t-iw-shadow px-10"
+      class="flex justify-center items-center w-full mx-auto bg-iw-background my-auto flex-col h-72 shadow-md shadow-iw-shadow border-t-iw-shadow px-10"
       data-testid="EmptyList-Outer-Container"
     >
       <p
@@ -53,8 +52,7 @@ exports[`Testing the Layout of IssuersList Check whether it renders error state
       Search for your trusted issuer and choose a credential type in the next step.
     </div>
     <div
-      class="flex justify-center items-center w-full mx-auto bg-iw-background
- my-auto flex-col h-72 shadow-md shadow-iw-shadow border-t-iw-shadow px-10"
+      class="flex justify-center items-center w-full mx-auto bg-iw-background my-auto flex-col h-72 shadow-md shadow-iw-shadow border-t-iw-shadow px-10"
       data-testid="EmptyList-Outer-Container"
     >
       <p
@@ -87,8 +85,7 @@ exports[`Testing the Layout of IssuersList Check whether it renders issuers list
       Search for your trusted issuer and choose a credential type in the next step.
     </div>
     <div
-      class="flex justify-center items-center w-full mx-auto bg-iw-background
- my-auto flex-col h-72 shadow-md shadow-iw-shadow border-t-iw-shadow px-10"
+      class="flex justify-center items-center w-full mx-auto bg-iw-background my-auto flex-col h-72 shadow-md shadow-iw-shadow border-t-iw-shadow px-10"
       data-testid="EmptyList-Outer-Container"
     >
       <p
@@ -104,6 +101,27 @@ exports[`Testing the Layout of IssuersList Check whether it renders issuers list
 
 exports[`Testing the Layout of IssuersList Check whether it renders loading state 1`] = `
 <DocumentFragment>
+  <svg
+    height="0"
+    width="0"
+  >
+    <lineargradient
+      id="blue-gradient"
+      x1="0%"
+      x2="100%"
+      y1="0%"
+      y2="100%"
+    >
+      <stop
+        offset="0%"
+        stop-color="var(--iw-color-primary)"
+      />
+      <stop
+        offset="100%"
+        stop-color="var(--iw-color-secondary)"
+      />
+    </lineargradient>
+  </svg>
   <div
     class="flex justify-center items-center"
     data-testid="SpinningLoader-Container"
diff --git a/inji-web/src/__tests__/components/PageTemplate/__snapshots__/Header.test.tsx.snap b/inji-web/src/__tests__/components/PageTemplate/__snapshots__/Header.test.tsx.snap
index 8f99d3b..760c0d7 100644
--- a/inji-web/src/__tests__/components/PageTemplate/__snapshots__/Header.test.tsx.snap
+++ b/inji-web/src/__tests__/components/PageTemplate/__snapshots__/Header.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`Header Container Layout Test Check if the layout is matching with the s
 <DocumentFragment>
   <header>
     <div
-      class="fixed top-0 left-0 right-0 bg-iw-background py-4 shadow-sm"
+      class="fixed top-0 left-0 right-0 bg-iw-background py-7 shadow-sm"
       data-testid="Header-Container"
     >
       <div
@@ -39,7 +39,7 @@ exports[`Header Container Layout Test Check if the layout is matching with the s
           >
             <img
               alt="Inji Web Logo"
-              class="h-13 w-28 cursor-pointer"
+              class="h-13 w-28 scale-150 cursor-pointer"
               data-testid="Header-InjiWeb-Logo"
               src="InjiWebLogo.png"
             />
@@ -83,6 +83,27 @@ exports[`Header Container Layout Test Check if the layout is matching with the s
                 role="button"
                 tabindex="0"
               >
+                <svg
+                  height="0"
+                  width="0"
+                >
+                  <lineargradient
+                    id="blue-gradient"
+                    x1="0%"
+                    x2="100%"
+                    y1="0%"
+                    y2="100%"
+                  >
+                    <stop
+                      offset="0%"
+                      stop-color="var(--iw-color-primary)"
+                    />
+                    <stop
+                      offset="100%"
+                      stop-color="var(--iw-color-secondary)"
+                    />
+                  </lineargradient>
+                </svg>
                 <svg
                   color="var(--iw-color-languageGlobeIcon)"
                   data-testid="Language-Selector-Icon"
@@ -90,6 +111,7 @@ exports[`Header Container Layout Test Check if the layout is matching with the s
                   height="30"
                   stroke="currentColor"
                   stroke-width="0"
+                  style="fill: url(#blue-gradient);"
                   viewBox="0 0 16 16"
                   width="30"
                   xmlns="http://www.w3.org/2000/svg"
@@ -113,12 +135,34 @@ exports[`Header Container Layout Test Check if the layout is matching with the s
                     >
                       English
                     </p>
+                    <svg
+                      height="0"
+                      width="0"
+                    >
+                      <lineargradient
+                        id="blue-gradient"
+                        x1="0%"
+                        x2="100%"
+                        y1="0%"
+                        y2="100%"
+                      >
+                        <stop
+                          offset="0%"
+                          stop-color="var(--iw-color-primary)"
+                        />
+                        <stop
+                          offset="100%"
+                          stop-color="var(--iw-color-secondary)"
+                        />
+                      </lineargradient>
+                    </svg>
                     <svg
                       color="var(--iw-color-languageArrowIcon)"
                       fill="currentColor"
                       height="20"
                       stroke="currentColor"
                       stroke-width="0"
+                      style="fill: url(#blue-gradient);"
                       viewBox="0 0 24 24"
                       width="20"
                       xmlns="http://www.w3.org/2000/svg"
diff --git a/inji-web/src/__tests__/components/Redirection/__snapshots__/DownloadResult.test.tsx.snap b/inji-web/src/__tests__/components/Redirection/__snapshots__/DownloadResult.test.tsx.snap
index 91f2915..793cf66 100644
--- a/inji-web/src/__tests__/components/Redirection/__snapshots__/DownloadResult.test.tsx.snap
+++ b/inji-web/src/__tests__/components/Redirection/__snapshots__/DownloadResult.test.tsx.snap
@@ -7,7 +7,7 @@ exports[`Testing the Layout of DownloadResult for Success Error and Loading Chec
     data-testid="DownloadResult-Outer-Container"
   >
     <div
-      class="rounded-full p-2 shadow"
+      class="rounded-full p-2 shadow bg-white"
     >
       <div
         class="rounded-full p-8 bg-iw-shieldErrorShadow"
@@ -47,13 +47,19 @@ exports[`Testing the Layout of DownloadResult for Success Error and Loading Chec
         SubTitle
       </p>
     </div>
-    <div>
-      <button
-        class="text-iw-primary font-bold py-2 px-4 rounded-lg border-2 border-iw-primary"
-        data-testid="DownloadResult-Home-Button"
+    <div
+      class="bg-gradient-to-r rounded-lg from-iw-primary to-iw-secondary p-0.5"
+    >
+      <div
+        class="py-2 px-4 rounded-lg bg-white"
       >
-        Go To Home
-      </button>
+        <button
+          class="text-iw-tertiary font-bold rounded-lg"
+          data-testid="DownloadResult-Home-Button"
+        >
+          Go To Home
+        </button>
+      </div>
     </div>
   </div>
 </DocumentFragment>
@@ -147,7 +153,7 @@ exports[`Testing the Layout of DownloadResult for Success Error and Loading Chec
     data-testid="DownloadResult-Outer-Container"
   >
     <div
-      class="rounded-full p-2 shadow"
+      class="rounded-full p-2 shadow bg-white"
     >
       <div
         class="rounded-full p-8 bg-iw-shieldSuccessShadow "
@@ -188,13 +194,19 @@ exports[`Testing the Layout of DownloadResult for Success Error and Loading Chec
         SubTitle
       </p>
     </div>
-    <div>
-      <button
-        class="text-iw-primary font-bold py-2 px-4 rounded-lg border-2 border-iw-primary"
-        data-testid="DownloadResult-Home-Button"
+    <div
+      class="bg-gradient-to-r rounded-lg from-iw-primary to-iw-secondary p-0.5"
+    >
+      <div
+        class="py-2 px-4 rounded-lg bg-white"
       >
-        Go To Home
-      </button>
+        <button
+          class="text-iw-tertiary font-bold rounded-lg"
+          data-testid="DownloadResult-Home-Button"
+        >
+          Go To Home
+        </button>
+      </div>
     </div>
   </div>
 </DocumentFragment>