diff --git a/.gitignore b/.gitignore
index 5cfb456..52b1619 100644
--- a/.gitignore
+++ b/.gitignore
@@ -4,3 +4,4 @@ node_modules
 .vscode-test/
 *.vsix
 .env
+.DS_Store
diff --git a/CHANGELOG.md b/CHANGELOG.md
index c94e65d..139d625 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,17 @@ All notable changes to the "gcp-switch-configuration" extension will be document
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [2.1.0] - 2024-01-06
+
+### Added
+
+- Add GCP config webview to activity bar & panel
+- Enhance UI responsive when using activity bar
+
+### Changed
+
+- Change GCP Switch Config LOGO
+
 ## [2.0.3] - 2024-01-05
 
 ### Fixed
diff --git a/README.md b/README.md
index d888e8a..1e9a92b 100644
--- a/README.md
+++ b/README.md
@@ -1,18 +1,28 @@
-# GCP Switch Configuration
+<div align="center">
+    <img src="assets/logo-256.png" alt="gcp form" style="width:150px;" />
+</div>
 
-Simplify your Google Cloud Platform (GCP) experience with the "GCP Switch Configuration" VSCode extension.
+<div align="center">
+    <h1>GCP Switch Configuration</h1>
+</div>
 
-Seamlessly switch between different GCP configurations with just a few clicks!
+<div align="center">
 
-![image](assets/screenshots/dashboard.png)
+![Visual Studio Marketplace Last Updated](https://img.shields.io/visual-studio-marketplace/last-updated/tikou-web.gcp-switch-config?style=for-the-badge)
+![Visual Studio Marketplace Downloads](https://img.shields.io/visual-studio-marketplace/d/tikou-web.gcp-switch-config?style=for-the-badge)
+![Visual Studio Marketplace Installs](https://img.shields.io/visual-studio-marketplace/i/tikou-web.gcp-switch-config?style=for-the-badge)
+![GitHub License](https://img.shields.io/github/license/TikouWeb/gcp-switch-configuration?style=for-the-badge)
+
+</div>
 
-## Features
+### Features
 
 - **Easy Switching**: Quickly toggle between GCP configurations directly from VSCode.
+- **Manage GCP Configurations**: Add, edit and delete configurations.
 - **Convenient Access**: Use commands or a handy status bar button to open the extension's webview.
 - **User-Friendly Interface**: Intuitive webview layout for hassle-free navigation.
 
-## Installation
+### Install
 
 Go to Extensions and Search for `GCP Switch Configuration` and install.
 
@@ -20,7 +30,11 @@ OR:
 
 Visit VScode Marketplace [GCP Switch Configuration](https://marketplace.visualstudio.com/items?itemName=tikou-web.gcp-switch-config)
 
-## Usage
+### Quickstart
+
+Simplify your Google Cloud Platform (GCP) experience with the "GCP Switch Configuration" VSCode extension. Seamlessly switch between different GCP configurations with just a few clicks!
+
+![image](assets/screenshots/dashboard.png)
 
 - **Open via Command**: `Ctrl+Shift+P` and type "GCP Switch"
 
@@ -56,7 +70,6 @@ Search for project to attach to you configuration with autocomplete input in the
 
 <img src="assets/screenshots/responsive.png" alt="gcp form" style="width:600px;" />
 
-
 Enjoy streamlined GCP project management right within VSCode!
 
 ## Feedback
diff --git a/assets/gcp-logo.png b/assets/gcp-logo.png
deleted file mode 100644
index f5d2ca5..0000000
Binary files a/assets/gcp-logo.png and /dev/null differ
diff --git a/assets/logo-256.png b/assets/logo-256.png
new file mode 100644
index 0000000..751b3be
Binary files /dev/null and b/assets/logo-256.png differ
diff --git a/assets/logo-32.png b/assets/logo-32.png
new file mode 100644
index 0000000..8051d88
Binary files /dev/null and b/assets/logo-32.png differ
diff --git a/assets/logo-64.png b/assets/logo-64.png
new file mode 100644
index 0000000..e4445aa
Binary files /dev/null and b/assets/logo-64.png differ
diff --git a/assets/screenshots/form.png b/assets/screenshots/form.png
index df4c744..efda076 100644
Binary files a/assets/screenshots/form.png and b/assets/screenshots/form.png differ
diff --git a/assets/styles.css b/assets/styles.css
index 7021f2b..6ffe828 100644
--- a/assets/styles.css
+++ b/assets/styles.css
@@ -63,6 +63,8 @@ body.vscode-dark {
 
 .button-base {
   display: flex;
+  line-height: 1.3;
+  align-items: center;
   padding: 10px;
   gap: 0.5rem;
   border: none;
@@ -135,6 +137,14 @@ body.vscode-dark {
   justify-content: space-between;
   align-items: center;
   gap: 1.5em;
+
+  .header-notification {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    gap: 2em;
+    flex: 1;
+  }
 }
 
 .gcp-config-card {
@@ -162,7 +172,9 @@ body.vscode-dark {
   }
 
   .gcp-config-title {
-    font-weight: bold;
+    font-size: 15px;
+    font-weight: 400;
+    line-height: 1.3;
     margin: 0;
     display: flex;
     align-items: center;
@@ -245,6 +257,7 @@ body.vscode-dark {
 
   > h2 {
     margin: 0;
+    color: var(--text-primary-color);
   }
 
   > p {
@@ -309,6 +322,7 @@ body.vscode-dark {
 
 .gcp-notification {
   position: relative;
+  display: flex;
 }
 
 .gcp-notification-spinner {
@@ -375,6 +389,10 @@ input[type="radio"]:focus {
   padding: 24px;
 }
 
+.gcp-main {
+  padding: 0 24px;
+}
+
 .gcp-configurations-container {
   width: 100%;
   display: grid;
@@ -407,6 +425,55 @@ input[type="radio"]:focus {
   animation: spin 2s linear infinite;
 }
 
+@media (max-width: 450px) {
+  .header {
+    padding: 8px 12px;
+    gap: 1rem;
+
+    .header-searchbar {
+      display: none;
+    }
+    .header-notification {
+      width: 100%;
+    }
+  }
+  .gcp-toolbar {
+    padding: 12px 12px 8px 12px;
+
+    & button {
+      padding: 6px;
+      & span {
+        display: none;
+      }
+    }
+  }
+  .gcp-main {
+    padding: 8px 12px;
+  }
+  .gcp-configurations-container {
+    gap: 0.5rem;
+  }
+  .gcp-config-card {
+    padding: 8px;
+
+    .gcp-config-info {
+      display: none;
+    }
+
+    .gcp-config-badge {
+      top: 9px;
+    }
+
+    & input[type="radio"] {
+      width: 18px;
+      height: 18px;
+    }
+    & input[type="radio"]::before {
+      font: normal normal normal 20px/1 codicon;
+    }
+  }
+}
+
 @media (min-width: 450px) {
   .gcp-configurations-container {
     grid-template-columns: repeat(1, 1fr);
diff --git a/package.json b/package.json
index baf7316..731b3b2 100644
--- a/package.json
+++ b/package.json
@@ -2,14 +2,14 @@
   "name": "gcp-switch-config",
   "displayName": "GCP Switch Configuration",
   "description": "Switch gcp configuration with one click just like magic ✨",
-  "version": "2.0.3",
+  "version": "2.1.0",
   "private": false,
   "repository": {
     "type": "git",
     "url": "https://github.com/TikouWeb/gcp-switch-configuration.git"
   },
   "publisher": "tikou-web",
-  "icon": "assets/gcp-logo.png",
+  "icon": "assets/logo-256.png",
   "engines": {
     "vscode": "^1.85.0"
   },
@@ -24,10 +24,28 @@
   "contributes": {
     "commands": [
       {
-        "command": "gcp-switch-config.open-gcp-switch-config",
-        "title": "GCP Switch"
+        "command": "gcp-switch-config.open-dashboard-webview-panel",
+        "title": "GCP Switch Configuration"
       }
-    ]
+    ],
+    "viewsContainers": {
+      "activitybar": [
+        {
+          "id": "gcp-switch-config-activitybar-container-id",
+          "title": "GCP Switch Config",
+          "icon": "$(cloud)"
+        }
+      ]
+    },
+    "views": {
+      "gcp-switch-config-activitybar-container-id": [
+        {
+          "type": "webview",
+          "id": "gcp-switch-config-webview-id",
+          "name": "GCP Switch Config"
+        }
+      ]
+    }
   },
   "scripts": {
     "compile": "tsc -p ./",
diff --git a/src/views/components/gcp-config-card.ts b/src/components/config-card.template.ts
similarity index 95%
rename from src/views/components/gcp-config-card.ts
rename to src/components/config-card.template.ts
index a813f5d..cf846ea 100644
--- a/src/views/components/gcp-config-card.ts
+++ b/src/components/config-card.template.ts
@@ -1,4 +1,4 @@
-import { GCP_CONFIGURATION } from "../../types";
+import { GCP_CONFIGURATION } from "../types";
 
 type GcpConfigCardProps = {
   gcpConfig: GCP_CONFIGURATION;
@@ -18,7 +18,7 @@ export const gcpConfigCard = ({
             value="${gcpConfigIndex}" 
             ${gcpConfig.is_active ? "checked" : ""}
           />
-          <h3 class="gcp-config-title">
+          <h4 class="gcp-config-title">
             ${gcpConfig.name}
             <div class="gcp-config-edit-action">
               <button class="button-icon button-text"  onclick="handleEditConfigClick(${gcpConfigIndex});">
@@ -28,7 +28,7 @@ export const gcpConfigCard = ({
                 <i class='codicon codicon-trash'></i>
               </button>
             </div>
-          </h3>
+          </h4>
           <div class="gcp-config-info">
               <div class="gcp-config-info-item">
                   <small class="title">Project</small>
diff --git a/src/components/html-head.template.ts b/src/components/html-head.template.ts
new file mode 100644
index 0000000..90989cd
--- /dev/null
+++ b/src/components/html-head.template.ts
@@ -0,0 +1,31 @@
+import vscode from "vscode";
+
+export const htmlHeadTemplate = (
+  extensionContext: vscode.ExtensionContext,
+  webview: vscode.Webview
+) => {
+  const codiconsUri = webview.asWebviewUri(
+    vscode.Uri.joinPath(
+      extensionContext.extensionUri,
+      "node_modules",
+      "@vscode/codicons",
+      "dist",
+      "codicon.css"
+    )
+  );
+
+  const stylesUri = webview.asWebviewUri(
+    vscode.Uri.joinPath(extensionContext.extensionUri, "assets", "styles.css")
+  );
+
+  return `
+      <head>
+        <meta charset="UTF-8">
+        <meta http-equiv="Content-Security-Policy" font-src ${webview.cspSource}; style-src ${webview.cspSource};">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>GCP Switch Configuration</title>
+        <link href="${stylesUri}" rel="stylesheet"/>
+        <link href="${codiconsUri}" rel="stylesheet" />
+      </head>
+    `;
+};
diff --git a/src/views/components/gcp-loading-page.ts b/src/components/loading-page.template.ts
similarity index 69%
rename from src/views/components/gcp-loading-page.ts
rename to src/components/loading-page.template.ts
index c5773b6..ee123dc 100644
--- a/src/views/components/gcp-loading-page.ts
+++ b/src/components/loading-page.template.ts
@@ -1,17 +1,20 @@
 import vscode from "vscode";
-import { createHtmlHead } from "../../helpers";
-import { loadingSpinner } from "./loading-spinner";
+import { loadingSpinner } from "./loading-spinner.template";
+import { htmlHeadTemplate } from "./html-head.template";
 
 type LoadingPageProps = {
   extensionContext: vscode.ExtensionContext;
-  panel: vscode.WebviewPanel;
+  webview: vscode.Webview;
 };
 
-export const loadingPage = ({ extensionContext, panel }: LoadingPageProps) => {
+export const loadingPage = ({
+  extensionContext,
+  webview,
+}: LoadingPageProps) => {
   return `
           <!DOCTYPE html>
           <html lang="en">
-            ${createHtmlHead(extensionContext, panel)}
+            ${htmlHeadTemplate(extensionContext, webview)}
             <style>
                 .loading-container {
                     display: flex;
diff --git a/src/views/components/loading-spinner.ts b/src/components/loading-spinner.template.ts
similarity index 100%
rename from src/views/components/loading-spinner.ts
rename to src/components/loading-spinner.template.ts
diff --git a/src/views/components/gcp-topbar.ts b/src/components/topbar.template.ts
similarity index 56%
rename from src/views/components/gcp-topbar.ts
rename to src/components/topbar.template.ts
index 2c4b1f4..7ba841f 100644
--- a/src/views/components/gcp-topbar.ts
+++ b/src/components/topbar.template.ts
@@ -1,4 +1,4 @@
-import { GCP_CONFIGURATION } from "../../types";
+import { GCP_CONFIGURATION } from "../types";
 
 export const gcpTopbar = (gcpConfigurations: GCP_CONFIGURATION[]) => {
   const gcpActiveConfig = gcpConfigurations.find(
@@ -13,20 +13,20 @@ export const gcpTopbar = (gcpConfigurations: GCP_CONFIGURATION[]) => {
                 <h2>${gcpActiveConfig?.name}</h2>
             </div>
             </div>
-            <div style="flex: 1;">
+            <div class="header-searchbar" style="flex: 1;">
                 <input class="search-input" id="search-input" autocomplete="off" type="search" spellcheck="false" aria-label="Search for configurations" placeholder="Search for configurations">
             </div>
-            <div style="display: flex; justify-content: flex-end; align-items: center; gap: 2em; flex: 1;">
-            <div class="gcp-notification">
-                <i class='codicon codicon-bell' style="font-size: 24px;"></i>
-                <div class="gcp-notification-spinner"></div>
-            </div>
-            <div class="gcp-current-adc">
-                <i class='codicon codicon-key'></i>
-                <a href="#" onclick="handleADCJsonClick()">
-                ADC.json
-                </a>
-            </div>
+            <div class="header-notification">
+                <div class="gcp-notification">
+                    <i class='codicon codicon-bell' style="font-size: 24px;"></i>
+                    <div class="gcp-notification-spinner"></div>
+                </div>
+                <div class="gcp-current-adc">
+                    <i class='codicon codicon-key'></i>
+                    <a href="#" onclick="handleADCJsonClick()">
+                    ADC.json
+                    </a>
+                </div>
             </div>
         </div>
     `;
diff --git a/src/constants.ts b/src/constants.ts
index f75ef50..adcf8dc 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -1,5 +1,10 @@
 export const APP_NAME = "gcp-switch-config";
-export const GCP_SWITCH_COMMAND = `${APP_NAME}.open-gcp-switch-config`;
+
+// `GCP_SWITCH_COMMAND` should be the same in package.json
+export const OPEN_DASHBOARD_WEBVIEW_PANEL_COMMAND = `${APP_NAME}.open-dashboard-webview-panel`;
+
+// `webviewId` should be the same in package.json
+export const WEBVIEW_ID = `${APP_NAME}-webview-id`;
 
 export const ADC_FILE_PATH =
   ".config/gcloud/application_default_credentials.json";
diff --git a/src/extension.ts b/src/extension.ts
index dda142f..993144f 100644
--- a/src/extension.ts
+++ b/src/extension.ts
@@ -1,383 +1,57 @@
 import vscode from "vscode";
 
-import {
-  getGcpConfigurations,
-  activateConfig,
-  setGcpConfigAccount,
-  setGcpConfigADC,
-  updateJsonFile,
-  createOsAbsolutePath,
-  createWebViewPanel,
-  createGcpConfig,
-  getGcpProjects,
-  updateGcpConfig,
-  setGcpConfigProject,
-  deleteGcpConfig,
-} from "./helpers";
+import { createWebViewPanel } from "./helpers";
 import {
   APP_NAME,
-  GCP_SWITCH_COMMAND,
-  ADC_FILE_PATH,
-  CACHE_VERSION,
-  WEBVIEW_COMMAND,
+  OPEN_DASHBOARD_WEBVIEW_PANEL_COMMAND,
+  WEBVIEW_ID,
 } from "./constants";
-import {
-  ACTIVITY,
-  APPLICATION_DEFAULT_CREDENTIAL,
-  GCP_CONFIGURATION,
-  GCP_PROJECT,
-  GLOBAL_CACHE,
-  GCP_CONFIG_FORM,
-} from "./types";
 
-import { dashboardView } from "./views/dashboard";
-import { gcpConfigFormView } from "./views/gcp-config-form";
-import { loadingPage } from "./views/components/gcp-loading-page";
+import { globalCache, refreshGcpConfigurations } from "./global-cache";
+import { renderDashbordWebview } from "./webview/dashboard";
 
 export const activate = async (extensionContext: vscode.ExtensionContext) => {
   await refreshGcpConfigurations(extensionContext);
   globalCache(extensionContext).clearUnusedCache();
 
-  let disposable = vscode.commands.registerCommand(GCP_SWITCH_COMMAND, () =>
-    openDashboardPanel(extensionContext)
+  // Create and Register dashboard webview panel command
+  extensionContext.subscriptions.push(
+    vscode.commands.registerCommand(
+      OPEN_DASHBOARD_WEBVIEW_PANEL_COMMAND,
+      () => {
+        const dashboardPanel = createWebViewPanel(extensionContext);
+        return renderDashbordWebview(extensionContext, dashboardPanel.webview);
+      }
+    )
   );
-  extensionContext.subscriptions.push(disposable);
-
-  addStatusBarItem(extensionContext);
-};
 
-export const deactivate = async () => {};
-
-const addStatusBarItem = (extensionContext: vscode.ExtensionContext) => {
-  const gcpSwitchStatusBarItem = vscode.window.createStatusBarItem(
+  // Create and Register dashboard webview status bar item
+  const statusBarItem = vscode.window.createStatusBarItem(
     vscode.StatusBarAlignment.Left,
     0
   );
-  gcpSwitchStatusBarItem.command = GCP_SWITCH_COMMAND;
-  gcpSwitchStatusBarItem.text = `$(cloud) ${APP_NAME}`;
-  gcpSwitchStatusBarItem.tooltip = "Switch to another GCP project";
-  gcpSwitchStatusBarItem.show();
-  extensionContext.subscriptions.push(gcpSwitchStatusBarItem);
-};
-
-const openDashboardPanel = (extensionContext: vscode.ExtensionContext) => {
-  const dashboardPanel = createWebViewPanel(extensionContext);
-  dashboardPanel.webview.html = dashboardView({
-    extensionContext,
-    panel: dashboardPanel,
-    gcpConfigurations: globalCache(extensionContext).get("GCP_CONFIGURATIONS"),
-  });
-
-  dashboardPanel.webview.onDidReceiveMessage(
-    async ({ gcpConfigIndex, command }) => {
-      if (command === WEBVIEW_COMMAND.switch_config) {
-        const gcpConfig =
-          globalCache(extensionContext).get("GCP_CONFIGURATIONS")[
-            gcpConfigIndex
-          ];
-
-        if (gcpConfig.is_active) {
-          return;
-        }
-
-        dashboardPanel.webview.postMessage({ command: "start_loading" });
-
-        switchGcpConfig(
-          extensionContext,
-          dashboardPanel,
-          {
-            name: gcpConfig.name,
-            account: gcpConfig.properties.core.account,
-            project: gcpConfig.properties.core.project,
-          },
-          false
-        );
-
-        return;
-      }
-
-      if (command === WEBVIEW_COMMAND.open_adc_file) {
-        openADCFile();
-        return;
-      }
-
-      if (command === WEBVIEW_COMMAND.open_add_config_panel) {
-        openConfigFormPanel(extensionContext, dashboardPanel);
-        return;
-      }
-
-      if (command === WEBVIEW_COMMAND.edit_config) {
-        const gcpConfig =
-          globalCache(extensionContext).get("GCP_CONFIGURATIONS")[
-            gcpConfigIndex
-          ];
-        openConfigFormPanel(extensionContext, dashboardPanel, gcpConfig);
-        return;
-      }
-
-      if (command === WEBVIEW_COMMAND.delete_config) {
-        const gcpConfig =
-          globalCache(extensionContext).get("GCP_CONFIGURATIONS")[
-            gcpConfigIndex
-          ];
-
-        if (gcpConfig.is_active) {
-          vscode.window.showErrorMessage(
-            `Can not delete [${gcpConfig.name}] because is set as active. Switch to another configuration and retry`
-          );
-          return;
-        }
-
-        vscode.window
-          .showInformationMessage(
-            `Are you sure you want to delete \n [${gcpConfig.name}] ?`,
-            { modal: true, detail: "This action is irreversible !" },
-            "Yes",
-            "No"
-          )
-          .then(async (answer) => {
-            if (answer === "Yes") {
-              dashboardPanel.webview.postMessage({ command: "start_loading" });
-
-              await deleteGcpConfig(gcpConfig.name);
-              globalCache(extensionContext).removeGcpConfigADC(gcpConfig.name);
-
-              const gcpConfigurations = await refreshGcpConfigurations(
-                extensionContext
-              );
-              dashboardPanel.webview.html = dashboardView({
-                extensionContext,
-                panel: dashboardPanel,
-                gcpConfigurations,
-              });
-              vscode.window.showInformationMessage(
-                `Successfully deleted [${gcpConfig.name}]`
-              );
-            }
-          });
-        return;
-      }
-    },
-    undefined,
-    extensionContext.subscriptions
+  statusBarItem.command = OPEN_DASHBOARD_WEBVIEW_PANEL_COMMAND;
+  statusBarItem.text = `$(cloud) ${APP_NAME}`;
+  statusBarItem.tooltip = "Switch to another GCP project";
+  statusBarItem.show();
+  extensionContext.subscriptions.push(statusBarItem);
+
+  // Create and Register dashboard webview provider for the activity bar
+  extensionContext.subscriptions.push(
+    vscode.window.registerWebviewViewProvider(WEBVIEW_ID, {
+      resolveWebviewView(webviewView: vscode.WebviewView) {
+        renderDashbordWebview(extensionContext, webviewView.webview);
+        webviewView.webview.options = {
+          enableScripts: true,
+          enableCommandUris: true,
+          localResourceRoots: [
+            vscode.Uri.joinPath(extensionContext.extensionUri, "assets"),
+            vscode.Uri.joinPath(extensionContext.extensionUri, "node_modules"),
+          ],
+        };
+      },
+    })
   );
 };
 
-const switchGcpConfig = async (
-  extensionContext: vscode.ExtensionContext,
-  panel: vscode.WebviewPanel,
-  gcpConfig: {
-    name: GCP_CONFIGURATION["name"];
-    account: GCP_CONFIGURATION["properties"]["core"]["account"];
-    project: GCP_CONFIGURATION["properties"]["core"]["project"];
-  },
-  shouldUpdateGcpConfigProperties = true
-) => {
-  try {
-    await activateConfig(gcpConfig.name);
-    if (shouldUpdateGcpConfigProperties) {
-      await setGcpConfigAccount(gcpConfig.account);
-      await setGcpConfigProject(gcpConfig.project);
-    }
-
-    const message = `GCP config switched successfully to [${gcpConfig.name}]`;
-
-    const gcpConfigADC = globalCache(extensionContext).getGcpConfigADC(
-      gcpConfig.name
-    );
-
-    if (gcpConfigADC) {
-      updateJsonFile(ADC_FILE_PATH, gcpConfigADC);
-      const gcpConfigurations = await refreshGcpConfigurations(
-        extensionContext
-      );
-      panel.webview.html = dashboardView({
-        extensionContext,
-        panel,
-        gcpConfigurations,
-      });
-      vscode.window.showInformationMessage(message);
-      return;
-    }
-
-    const newGcpConfigADC = await setGcpConfigADC();
-
-    const gcpConfigurations = await refreshGcpConfigurations(extensionContext);
-    panel.webview.html = dashboardView({
-      extensionContext,
-      panel,
-      gcpConfigurations,
-    });
-
-    vscode.window.showInformationMessage(message);
-    globalCache(extensionContext).addGcpConfigADC(
-      gcpConfig.name,
-      newGcpConfigADC
-    );
-  } catch (error: any) {
-    vscode.window.showErrorMessage(error);
-    const gcpConfigurations = await refreshGcpConfigurations(extensionContext);
-    panel.webview.html = dashboardView({
-      extensionContext,
-      panel,
-      gcpConfigurations,
-    });
-  }
-};
-
-const openADCFile = () => {
-  const uri = vscode.Uri.parse(createOsAbsolutePath(ADC_FILE_PATH));
-  vscode.window.showTextDocument(uri);
-};
-
-const openConfigFormPanel = async (
-  extensionContext: vscode.ExtensionContext,
-  dashboardPanel: vscode.WebviewPanel,
-  gcpConfig?: GCP_CONFIGURATION
-) => {
-  const editMode = Boolean(gcpConfig);
-
-  const configFormPanel = createWebViewPanel(
-    extensionContext,
-    vscode.ViewColumn.Beside
-  );
-
-  configFormPanel.webview.html = loadingPage({
-    extensionContext,
-    panel: configFormPanel,
-  });
-
-  await refreshGcpProjects(extensionContext);
-
-  configFormPanel.webview.html = gcpConfigFormView({
-    extensionContext,
-    panel: configFormPanel,
-    gcpConfig,
-    gcpConfigurations: globalCache(extensionContext).get("GCP_CONFIGURATIONS"),
-    gcpProjects: globalCache(extensionContext).get("GCP_PROJECTS"),
-  });
-
-  configFormPanel.webview.onDidReceiveMessage(
-    async ({ command, ...rest }) => {
-      dashboardPanel.webview.postMessage({ command: "start_loading" });
-      configFormPanel.dispose();
-
-      const gcpConfigForm: GCP_CONFIG_FORM = { ...rest };
-      if (
-        command === WEBVIEW_COMMAND.create_config ||
-        command === WEBVIEW_COMMAND.update_config
-      ) {
-        try {
-          if (editMode) {
-            await updateGcpConfig(gcpConfig!, gcpConfigForm as GCP_CONFIG_FORM);
-          } else {
-            await createGcpConfig(gcpConfigForm as GCP_CONFIG_FORM);
-          }
-          const gcpConfigurations = await refreshGcpConfigurations(
-            extensionContext
-          );
-          const newGcpConfig = gcpConfigurations.find(
-            (gcpConfig) => gcpConfig.name === gcpConfigForm.configName
-          );
-
-          if (newGcpConfig) {
-            switchGcpConfig(extensionContext, dashboardPanel, {
-              name: gcpConfigForm.configName,
-              account: gcpConfigForm.account,
-              project: gcpConfigForm.project,
-            });
-          }
-        } catch (error) {
-          vscode.window.showErrorMessage(`Error on submit form: ${error}`);
-        }
-
-        return;
-      }
-    },
-    undefined,
-    extensionContext.subscriptions
-  );
-};
-
-const refreshGcpConfigurations = async (
-  extensionContext: vscode.ExtensionContext
-) => {
-  const gcpConfigurations = await getGcpConfigurations();
-
-  if (!gcpConfigurations) {
-    return [];
-  }
-
-  globalCache(extensionContext).setGcpConfigurations(gcpConfigurations);
-
-  return gcpConfigurations;
-};
-
-const refreshGcpProjects = async (
-  extensionContext: vscode.ExtensionContext
-) => {
-  const gcpProjects = await getGcpProjects();
-
-  if (!gcpProjects) {
-    return [];
-  }
-
-  globalCache(extensionContext).setGcpProjects(gcpProjects);
-
-  return gcpProjects;
-};
-
-const globalCache = (extensionContext: vscode.ExtensionContext) => {
-  const cache = extensionContext.globalState.get<GLOBAL_CACHE>(CACHE_VERSION, {
-    ADCs: {},
-    GCP_CONFIGURATIONS: [],
-    GCP_PROJECTS: [],
-    ACTIVITIES: [],
-  });
-
-  return {
-    get: <TKey extends keyof GLOBAL_CACHE>(key: TKey): GLOBAL_CACHE[TKey] => {
-      return cache[key] as GLOBAL_CACHE[TKey];
-    },
-
-    getGcpConfigADC: (gcpConfigName: string) => {
-      return cache["ADCs"][gcpConfigName];
-    },
-    addGcpConfigADC: (
-      gcpConfigName: string,
-      ADC: APPLICATION_DEFAULT_CREDENTIAL
-    ) => {
-      cache["ADCs"][gcpConfigName] = ADC;
-      extensionContext.globalState.update(CACHE_VERSION, cache);
-    },
-    removeGcpConfigADC: (gcpConfigName: string) => {
-      delete cache["ADCs"][gcpConfigName];
-      extensionContext.globalState.update(CACHE_VERSION, cache);
-    },
-
-    setGcpConfigurations: (gcpConfigurations: GCP_CONFIGURATION[]) => {
-      cache["GCP_CONFIGURATIONS"] = gcpConfigurations;
-      extensionContext.globalState.update(CACHE_VERSION, cache);
-    },
-
-    setGcpProjects: (gcpProjects: GCP_PROJECT[]) => {
-      cache["GCP_PROJECTS"] = gcpProjects;
-      extensionContext.globalState.update(CACHE_VERSION, cache);
-    },
-
-    addActivity: (activity: ACTIVITY) => {
-      cache["ACTIVITIES"].push(activity);
-      extensionContext.globalState.update(CACHE_VERSION, cache);
-    },
-
-    clearUnusedCache: () => {
-      const newADCs: GLOBAL_CACHE["ADCs"] = {};
-      cache["GCP_CONFIGURATIONS"].forEach((gcpConfig) => {
-        newADCs[gcpConfig.name] = cache["ADCs"][gcpConfig.name];
-      });
-
-      cache["ADCs"] = newADCs;
-      extensionContext.globalState.update(CACHE_VERSION, cache);
-    },
-  };
-};
+export const deactivate = async () => {};
diff --git a/src/global-cache.ts b/src/global-cache.ts
new file mode 100644
index 0000000..fa48dea
--- /dev/null
+++ b/src/global-cache.ts
@@ -0,0 +1,100 @@
+import vscode from "vscode";
+
+import {
+  ACTIVITY,
+  APPLICATION_DEFAULT_CREDENTIAL,
+  GCP_CONFIGURATION,
+  GCP_PROJECT,
+  GLOBAL_CACHE,
+} from "./types";
+import { CACHE_VERSION } from "./constants";
+
+import {
+  getGcpConfigurations,
+  getGcpProjects,
+} from "./services/gcloud-services";
+
+const globalCache = (extensionContext: vscode.ExtensionContext) => {
+  const cache = extensionContext.globalState.get<GLOBAL_CACHE>(CACHE_VERSION, {
+    ADCs: {},
+    GCP_CONFIGURATIONS: [],
+    GCP_PROJECTS: [],
+    ACTIVITIES: [],
+  });
+
+  return {
+    get: <TKey extends keyof GLOBAL_CACHE>(key: TKey): GLOBAL_CACHE[TKey] => {
+      return cache[key] as GLOBAL_CACHE[TKey];
+    },
+
+    getGcpConfigADC: (gcpConfigName: string) => {
+      return cache["ADCs"][gcpConfigName];
+    },
+    addGcpConfigADC: (
+      gcpConfigName: string,
+      ADC: APPLICATION_DEFAULT_CREDENTIAL
+    ) => {
+      cache["ADCs"][gcpConfigName] = ADC;
+      extensionContext.globalState.update(CACHE_VERSION, cache);
+    },
+    removeGcpConfigADC: (gcpConfigName: string) => {
+      delete cache["ADCs"][gcpConfigName];
+      extensionContext.globalState.update(CACHE_VERSION, cache);
+    },
+
+    setGcpConfigurations: (gcpConfigurations: GCP_CONFIGURATION[]) => {
+      cache["GCP_CONFIGURATIONS"] = gcpConfigurations;
+      extensionContext.globalState.update(CACHE_VERSION, cache);
+    },
+
+    setGcpProjects: (gcpProjects: GCP_PROJECT[]) => {
+      cache["GCP_PROJECTS"] = gcpProjects;
+      extensionContext.globalState.update(CACHE_VERSION, cache);
+    },
+
+    addActivity: (activity: ACTIVITY) => {
+      cache["ACTIVITIES"].push(activity);
+      extensionContext.globalState.update(CACHE_VERSION, cache);
+    },
+
+    clearUnusedCache: () => {
+      const newADCs: GLOBAL_CACHE["ADCs"] = {};
+      cache["GCP_CONFIGURATIONS"].forEach((gcpConfig) => {
+        newADCs[gcpConfig.name] = cache["ADCs"][gcpConfig.name];
+      });
+
+      cache["ADCs"] = newADCs;
+      extensionContext.globalState.update(CACHE_VERSION, cache);
+    },
+  };
+};
+
+const refreshGcpConfigurations = async (
+  extensionContext: vscode.ExtensionContext
+) => {
+  const gcpConfigurations = await getGcpConfigurations();
+
+  if (!gcpConfigurations) {
+    return [];
+  }
+
+  globalCache(extensionContext).setGcpConfigurations(gcpConfigurations);
+
+  return gcpConfigurations;
+};
+
+const refreshGcpProjects = async (
+  extensionContext: vscode.ExtensionContext
+) => {
+  const gcpProjects = await getGcpProjects();
+
+  if (!gcpProjects) {
+    return [];
+  }
+
+  globalCache(extensionContext).setGcpProjects(gcpProjects);
+
+  return gcpProjects;
+};
+
+export { globalCache, refreshGcpProjects, refreshGcpConfigurations };
diff --git a/src/helpers.ts b/src/helpers.ts
index 7677060..c7f1fa2 100644
--- a/src/helpers.ts
+++ b/src/helpers.ts
@@ -1,180 +1,10 @@
 import vscode from "vscode";
-import { exec } from "child_process";
+
+import { APP_NAME } from "./constants";
+
 import fs from "fs";
 import os from "os";
 import path from "path";
-import {
-  APPLICATION_DEFAULT_CREDENTIAL,
-  GCP_CONFIGURATION,
-  GCP_PROJECT,
-  GCP_CONFIG_FORM,
-} from "./types";
-import { ADC_FILE_PATH, APP_NAME } from "./constants";
-
-export const createGcpConfig = async (newConfig: GCP_CONFIG_FORM) => {
-  return new Promise<GCP_CONFIG_FORM>((resolve, reject) => {
-    exec(
-      `gcloud config configurations create ${newConfig.configName}`,
-      (error, _, stderr) => {
-        if (error) {
-          reject(error);
-          return;
-        }
-        if (stderr && !stderr.includes(newConfig.configName)) {
-          reject(false);
-          return;
-        }
-
-        resolve(newConfig);
-      }
-    );
-  });
-};
-
-export const updateGcpConfig = async (
-  oldGcpConfig: GCP_CONFIGURATION,
-  gcpConfigForm: GCP_CONFIG_FORM
-) => {
-  return new Promise<GCP_CONFIG_FORM>((resolve, reject) => {
-    if (oldGcpConfig.name === gcpConfigForm.configName) {
-      resolve(gcpConfigForm);
-      return;
-    }
-
-    exec(
-      `gcloud config configurations rename ${oldGcpConfig.name} --new-name=${gcpConfigForm.configName}`,
-      (error, _, stderr) => {
-        if (error) {
-          reject(error);
-          return;
-        }
-        if (stderr && !stderr.includes(gcpConfigForm.configName)) {
-          reject(false);
-          return;
-        }
-
-        resolve(gcpConfigForm);
-      }
-    );
-  });
-};
-
-export const deleteGcpConfig = async (gcpConfigName: string) => {
-  return new Promise<boolean>((resolve, reject) => {
-    exec(
-      `gcloud config configurations delete ${gcpConfigName} --quiet`,
-      (error, _, stderr) => {
-        if (error) {
-          reject(error);
-          return;
-        }
-        if (stderr && !stderr.includes(`Deleted [${gcpConfigName}]`)) {
-          reject(false);
-          return;
-        }
-
-        resolve(true);
-      }
-    );
-  });
-};
-
-export const activateConfig = async (gcpConfigName: string) => {
-  return new Promise((resolve, reject) => {
-    exec(
-      `gcloud config configurations activate ${gcpConfigName}`,
-      (error, _, stderr) => {
-        if (error) {
-          reject(error);
-          return;
-        }
-        if (stderr && !stderr.includes(gcpConfigName)) {
-          reject(false);
-          return;
-        }
-
-        resolve(stderr);
-      }
-    );
-  });
-};
-
-export const setGcpConfigAccount = async (gcpConfigAccount: string) => {
-  return new Promise((resolve, reject) => {
-    exec(
-      `gcloud config set account ${gcpConfigAccount}`,
-      (error, _, stderr) => {
-        if (error) {
-          reject(error);
-          return;
-        }
-        if (stderr && !stderr.includes("Updated property [core/account]")) {
-          reject(stderr);
-          return;
-        }
-
-        resolve(stderr);
-      }
-    );
-  });
-};
-
-export const setGcpConfigProject = async (gcpConfigProject: string) => {
-  return new Promise((resolve, reject) => {
-    exec(
-      `gcloud config set project ${gcpConfigProject}`,
-      (error, _, stderr) => {
-        if (error) {
-          reject(error);
-          return;
-        }
-        if (stderr && !stderr.includes("Updated property [core/project]")) {
-          reject(stderr);
-          return;
-        }
-
-        resolve(stderr);
-      }
-    );
-  });
-};
-
-export const setGcpConfigADC = async () => {
-  return new Promise<APPLICATION_DEFAULT_CREDENTIAL>((resolve, reject) => {
-    const execInstance = exec(
-      `gcloud auth application-default login`,
-      (error, _, stderr) => {
-        if (error) {
-          reject(false);
-          return;
-        }
-
-        if (stderr) {
-          const jsonData: APPLICATION_DEFAULT_CREDENTIAL =
-            readJsonFile(ADC_FILE_PATH);
-          if (jsonData) {
-            resolve(jsonData);
-            return;
-          }
-
-          reject(stderr);
-          return;
-        }
-
-        reject(stderr);
-      }
-    );
-
-    const timeout = setTimeout(() => {
-      execInstance.kill("SIGTERM");
-      reject("Authentication process terminated due to timeout");
-    }, 60000);
-
-    execInstance.on("close", () => {
-      clearTimeout(timeout);
-    });
-  });
-};
 
 export const readJsonFile = (filePath: string) => {
   const absoluteFilePath = path.join(os.homedir(), filePath);
@@ -206,71 +36,6 @@ export const updateJsonFile = (
 export const createOsAbsolutePath = (relativePath: string) =>
   path.join(os.homedir(), relativePath);
 
-export const createExtensionAbsolutePath = (relativePath: string) =>
-  path.join(os.homedir(), relativePath);
-
-export const getGcpConfigurations = async () => {
-  return new Promise<GCP_CONFIGURATION[]>(async (resolve, reject) => {
-    try {
-      const gcpConfigurationsOutput = await executeCommand(
-        `gcloud config configurations list --sort-by=name --format=json`
-      );
-      const gcpConfigurations = JSON.parse(
-        gcpConfigurationsOutput
-      ) as GCP_CONFIGURATION[];
-      resolve(gcpConfigurations);
-    } catch (error) {
-      console.error("Error in getGcpConfigurations:", error);
-      reject(error);
-    }
-  });
-};
-
-export const getGcpProjects = async () => {
-  return new Promise<GCP_PROJECT[]>(async (resolve, reject) => {
-    try {
-      const gcpProjectsOutput = await executeCommand(
-        `gcloud projects list --sort-by=projectId --format=json`
-      );
-      const gcpProjects = JSON.parse(gcpProjectsOutput) as GCP_PROJECT[];
-      resolve(gcpProjects);
-    } catch (error) {
-      console.error("Error in getGcpProjects:", error);
-      reject(error);
-    }
-  });
-};
-
-export const createHtmlHead = (
-  extensionContext: vscode.ExtensionContext,
-  panel: vscode.WebviewPanel
-) => {
-  const codiconsUri = panel.webview.asWebviewUri(
-    vscode.Uri.joinPath(
-      extensionContext.extensionUri,
-      "node_modules",
-      "@vscode/codicons",
-      "dist",
-      "codicon.css"
-    )
-  );
-
-  const stylesUri = panel.webview.asWebviewUri(
-    vscode.Uri.joinPath(extensionContext.extensionUri, "assets", "styles.css")
-  );
-
-  return `
-    <head>
-      <meta charset="UTF-8">
-      <meta http-equiv="Content-Security-Policy" font-src ${panel.webview.cspSource}; style-src ${panel.webview.cspSource};">
-      <meta name="viewport" content="width=device-width, initial-scale=1.0">
-      <title>GCP Switch Configuration</title>
-      <link href="${stylesUri}" rel="stylesheet"/>
-      <link href="${codiconsUri}" rel="stylesheet" />
-    </head>
-  `;
-};
-
 export const createWebViewPanel = (
   extensionContext: vscode.ExtensionContext,
   viewColumn: vscode.ViewColumn = vscode.ViewColumn.One
@@ -293,26 +58,10 @@ export const createWebViewPanel = (
   const iconPath = vscode.Uri.joinPath(
     extensionContext.extensionUri,
     "assets",
-    "gcp-logo.png"
+    "logo-256.png"
   );
 
   panel.iconPath = { dark: iconPath, light: iconPath };
 
   return panel;
 };
-
-const executeCommand = (command: string) => {
-  return new Promise<string>((resolve, reject) => {
-    exec(command, (error, stdout, stderr) => {
-      if (error) {
-        reject(`error: ${error.message}`);
-        return;
-      }
-      if (stderr) {
-        reject(`stderr: ${stderr}`);
-        return;
-      }
-      resolve(stdout);
-    });
-  });
-};
diff --git a/src/services/gcloud-services.ts b/src/services/gcloud-services.ts
new file mode 100644
index 0000000..b621ce7
--- /dev/null
+++ b/src/services/gcloud-services.ts
@@ -0,0 +1,222 @@
+import { exec } from "child_process";
+import {
+  APPLICATION_DEFAULT_CREDENTIAL,
+  GCP_CONFIGURATION,
+  GCP_CONFIG_FORM,
+  GCP_PROJECT,
+} from "../types";
+import { ADC_FILE_PATH } from "../constants";
+import { readJsonFile } from "../helpers";
+
+export const createGcpConfig = async (newConfig: GCP_CONFIG_FORM) => {
+  return new Promise<GCP_CONFIG_FORM>((resolve, reject) => {
+    exec(
+      `gcloud config configurations create ${newConfig.configName}`,
+      (error, _, stderr) => {
+        if (error) {
+          reject(error);
+          return;
+        }
+        if (stderr && !stderr.includes(newConfig.configName)) {
+          reject(false);
+          return;
+        }
+
+        resolve(newConfig);
+      }
+    );
+  });
+};
+
+export const updateGcpConfig = async (
+  oldGcpConfig: GCP_CONFIGURATION,
+  gcpConfigForm: GCP_CONFIG_FORM
+) => {
+  return new Promise<GCP_CONFIG_FORM>((resolve, reject) => {
+    if (oldGcpConfig.name === gcpConfigForm.configName) {
+      resolve(gcpConfigForm);
+      return;
+    }
+
+    exec(
+      `gcloud config configurations rename ${oldGcpConfig.name} --new-name=${gcpConfigForm.configName}`,
+      (error, _, stderr) => {
+        if (error) {
+          reject(error);
+          return;
+        }
+        if (stderr && !stderr.includes(gcpConfigForm.configName)) {
+          reject(false);
+          return;
+        }
+
+        resolve(gcpConfigForm);
+      }
+    );
+  });
+};
+
+export const deleteGcpConfig = async (gcpConfigName: string) => {
+  return new Promise<boolean>((resolve, reject) => {
+    exec(
+      `gcloud config configurations delete ${gcpConfigName} --quiet`,
+      (error, _, stderr) => {
+        if (error) {
+          reject(error);
+          return;
+        }
+        if (stderr && !stderr.includes(`Deleted [${gcpConfigName}]`)) {
+          reject(false);
+          return;
+        }
+
+        resolve(true);
+      }
+    );
+  });
+};
+
+export const activateConfig = async (gcpConfigName: string) => {
+  return new Promise((resolve, reject) => {
+    exec(
+      `gcloud config configurations activate ${gcpConfigName}`,
+      (error, _, stderr) => {
+        if (error) {
+          reject(error);
+          return;
+        }
+        if (stderr && !stderr.includes(gcpConfigName)) {
+          reject(false);
+          return;
+        }
+
+        resolve(stderr);
+      }
+    );
+  });
+};
+
+export const setGcpConfigAccount = async (gcpConfigAccount: string) => {
+  return new Promise((resolve, reject) => {
+    exec(
+      `gcloud config set account ${gcpConfigAccount}`,
+      (error, _, stderr) => {
+        if (error) {
+          reject(error);
+          return;
+        }
+        if (stderr && !stderr.includes("Updated property [core/account]")) {
+          reject(stderr);
+          return;
+        }
+
+        resolve(stderr);
+      }
+    );
+  });
+};
+
+export const setGcpConfigProject = async (gcpConfigProject: string) => {
+  return new Promise((resolve, reject) => {
+    exec(
+      `gcloud config set project ${gcpConfigProject}`,
+      (error, _, stderr) => {
+        if (error) {
+          reject(error);
+          return;
+        }
+        if (stderr && !stderr.includes("Updated property [core/project]")) {
+          reject(stderr);
+          return;
+        }
+
+        resolve(stderr);
+      }
+    );
+  });
+};
+
+export const setGcpConfigADC = async () => {
+  return new Promise<APPLICATION_DEFAULT_CREDENTIAL>((resolve, reject) => {
+    const execInstance = exec(
+      `gcloud auth application-default login`,
+      (error, _, stderr) => {
+        if (error) {
+          reject(false);
+          return;
+        }
+
+        if (stderr) {
+          const jsonData: APPLICATION_DEFAULT_CREDENTIAL =
+            readJsonFile(ADC_FILE_PATH);
+          if (jsonData) {
+            resolve(jsonData);
+            return;
+          }
+
+          reject(stderr);
+          return;
+        }
+
+        reject(stderr);
+      }
+    );
+
+    const timeout = setTimeout(() => {
+      execInstance.kill("SIGTERM");
+      reject("Authentication process terminated due to timeout");
+    }, 60000);
+
+    execInstance.on("close", () => {
+      clearTimeout(timeout);
+    });
+  });
+};
+
+export const getGcpConfigurations = async () => {
+  return new Promise<GCP_CONFIGURATION[]>(async (resolve, reject) => {
+    try {
+      const gcpConfigurationsOutput = await executeCommand(
+        `gcloud config configurations list --sort-by=name --format=json`
+      );
+      const gcpConfigurations = JSON.parse(
+        gcpConfigurationsOutput
+      ) as GCP_CONFIGURATION[];
+      resolve(gcpConfigurations);
+    } catch (error) {
+      console.error("Error in getGcpConfigurations:", error);
+      reject(error);
+    }
+  });
+};
+
+export const getGcpProjects = async () => {
+  return new Promise<GCP_PROJECT[]>(async (resolve, reject) => {
+    try {
+      const gcpProjectsOutput = await executeCommand(
+        `gcloud projects list --sort-by=projectId --format=json`
+      );
+      const gcpProjects = JSON.parse(gcpProjectsOutput) as GCP_PROJECT[];
+      resolve(gcpProjects);
+    } catch (error) {
+      console.error("Error in getGcpProjects:", error);
+      reject(error);
+    }
+  });
+};
+
+const executeCommand = (command: string) => {
+  return new Promise<string>((resolve, reject) => {
+    exec(command, (error, stdout, stderr) => {
+      if (error) {
+        reject(`error: ${error.message}`);
+        return;
+      }
+      if (stderr) {
+        reject(`stderr: ${stderr}`);
+        return;
+      }
+      resolve(stdout);
+    });
+  });
+};
diff --git a/src/test/extension.test.ts b/src/test/extension.test.ts
deleted file mode 100644
index 4ca0ab4..0000000
--- a/src/test/extension.test.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import * as assert from 'assert';
-
-// You can import and use all API from the 'vscode' module
-// as well as import your extension to test it
-import * as vscode from 'vscode';
-// import * as myExtension from '../../extension';
-
-suite('Extension Test Suite', () => {
-	vscode.window.showInformationMessage('Start all tests.');
-
-	test('Sample test', () => {
-		assert.strictEqual(-1, [1, 2, 3].indexOf(5));
-		assert.strictEqual(-1, [1, 2, 3].indexOf(0));
-	});
-});
diff --git a/src/views/gcp-config-form.ts b/src/webview/dashboard/config-form.template.ts
similarity index 96%
rename from src/views/gcp-config-form.ts
rename to src/webview/dashboard/config-form.template.ts
index 9142456..5bd4ba6 100644
--- a/src/views/gcp-config-form.ts
+++ b/src/webview/dashboard/config-form.template.ts
@@ -1,22 +1,22 @@
 import vscode from "vscode";
-import { GCP_CONFIGURATION, GCP_PROJECT } from "../types";
-import { createHtmlHead } from "../helpers";
+import { GCP_CONFIGURATION, GCP_PROJECT } from "../../types";
+import { htmlHeadTemplate } from "../../components/html-head.template";
 
-type GcpConfigFormViewProps = {
+type configFormTemplateProps = {
   extensionContext: vscode.ExtensionContext;
   gcpConfigurations: GCP_CONFIGURATION[];
   gcpProjects: GCP_PROJECT[];
   gcpConfig?: GCP_CONFIGURATION;
-  panel: vscode.WebviewPanel;
+  webview: vscode.Webview;
 };
 
-export const gcpConfigFormView = ({
+export const configFormTemplate = ({
   extensionContext,
   gcpConfigurations,
   gcpProjects,
   gcpConfig,
-  panel,
-}: GcpConfigFormViewProps) => {
+  webview,
+}: configFormTemplateProps) => {
   const editMode = Boolean(gcpConfig);
 
   let submitButtonText = "Submit new config";
@@ -31,7 +31,7 @@ export const gcpConfigFormView = ({
   return `
     <!DOCTYPE html>
     <html lang="en">
-        ${createHtmlHead(extensionContext, panel)}
+        ${htmlHeadTemplate(extensionContext, webview)}
         <style>
           .form-container {
             width: 420px;
diff --git a/src/views/dashboard.ts b/src/webview/dashboard/dashboard.template.ts
similarity index 87%
rename from src/views/dashboard.ts
rename to src/webview/dashboard/dashboard.template.ts
index f36be91..c401153 100644
--- a/src/views/dashboard.ts
+++ b/src/webview/dashboard/dashboard.template.ts
@@ -1,36 +1,37 @@
 import vscode from "vscode";
-import { GCP_CONFIGURATION } from "../types";
-import { createHtmlHead } from "../helpers";
-import { gcpConfigCard } from "./components/gcp-config-card";
-import { loadingSpinner } from "./components/loading-spinner";
-import { gcpTopbar } from "./components/gcp-topbar";
+import { GCP_CONFIGURATION } from "../../types";
 
-type DashboardProps = {
+import { gcpConfigCard } from "../../components/config-card.template";
+import { loadingSpinner } from "../../components/loading-spinner.template";
+import { gcpTopbar } from "../../components/topbar.template";
+import { htmlHeadTemplate } from "../../components/html-head.template";
+
+type DashboardTemplateProps = {
   extensionContext: vscode.ExtensionContext;
   gcpConfigurations: GCP_CONFIGURATION[];
-  panel: vscode.WebviewPanel;
+  webview: vscode.Webview;
 };
 
-export const dashboardView = ({
+export const dashboardTemplate = ({
   extensionContext,
   gcpConfigurations,
-  panel,
-}: DashboardProps) => {
+  webview,
+}: DashboardTemplateProps) => {
   return `
           <!DOCTYPE html>
           <html lang="en">
-            ${createHtmlHead(extensionContext, panel)}
+            ${htmlHeadTemplate(extensionContext, webview)}
               <body>
                   ${gcpTopbar(gcpConfigurations)}
                   <div class="gcp-toolbar">
                     <div>
                       <button class="button-base button-contained-secondary" onclick="handleOpenAddConfigPanelClick()">
-                        <i class='codicon codicon-add'></i> Configuration
+                        <i class='codicon codicon-add'></i> <span>Configuration</span>
                       </button>
                     </div>
                   </div>
                   
-                  <div style="padding: 0 24px;">
+                  <div class="gcp-main">
                     <div class="gcp-configurations-container" id="gcp-configurations-list">
                         ${gcpConfigurations
                           .map((gcpConfig, gcpConfigIndex) => {
diff --git a/src/webview/dashboard/index.ts b/src/webview/dashboard/index.ts
new file mode 100644
index 0000000..b17adc2
--- /dev/null
+++ b/src/webview/dashboard/index.ts
@@ -0,0 +1,279 @@
+import vscode from "vscode";
+
+import { ADC_FILE_PATH, WEBVIEW_COMMAND } from "../../constants";
+import { GCP_CONFIGURATION, GCP_CONFIG_FORM } from "../../types";
+
+import {
+  globalCache,
+  refreshGcpConfigurations,
+  refreshGcpProjects,
+} from "../../global-cache";
+
+import {
+  updateJsonFile,
+  createWebViewPanel,
+  createOsAbsolutePath,
+} from "../../helpers";
+
+import {
+  setGcpConfigADC,
+  activateConfig,
+  setGcpConfigAccount,
+  createGcpConfig,
+  updateGcpConfig,
+  setGcpConfigProject,
+  deleteGcpConfig,
+} from "../../services/gcloud-services";
+
+import { configFormTemplate } from "./config-form.template";
+import { dashboardTemplate } from "./dashboard.template";
+
+import { loadingPage } from "../../components/loading-page.template";
+
+export const openADCFile = () => {
+  const uri = vscode.Uri.parse(createOsAbsolutePath(ADC_FILE_PATH));
+  vscode.window.showTextDocument(uri);
+};
+
+const renderDashbordWebview = (
+  extensionContext: vscode.ExtensionContext,
+  webview: vscode.Webview
+) => {
+  webview.html = dashboardTemplate({
+    extensionContext,
+    webview,
+    gcpConfigurations: globalCache(extensionContext).get("GCP_CONFIGURATIONS"),
+  });
+
+  webview.onDidReceiveMessage(
+    async ({ gcpConfigIndex, command }) => {
+      if (command === WEBVIEW_COMMAND.switch_config) {
+        const gcpConfig =
+          globalCache(extensionContext).get("GCP_CONFIGURATIONS")[
+            gcpConfigIndex
+          ];
+
+        if (gcpConfig.is_active) {
+          return;
+        }
+
+        webview.postMessage({ command: "start_loading" });
+
+        switchGcpConfig(
+          extensionContext,
+          webview,
+          {
+            name: gcpConfig.name,
+            account: gcpConfig.properties.core.account,
+            project: gcpConfig.properties.core.project,
+          },
+          false
+        );
+
+        return;
+      }
+
+      if (command === WEBVIEW_COMMAND.open_adc_file) {
+        openADCFile();
+        return;
+      }
+
+      if (command === WEBVIEW_COMMAND.open_add_config_panel) {
+        openConfigFormPanel(extensionContext, webview);
+        return;
+      }
+
+      if (command === WEBVIEW_COMMAND.edit_config) {
+        const gcpConfig =
+          globalCache(extensionContext).get("GCP_CONFIGURATIONS")[
+            gcpConfigIndex
+          ];
+        openConfigFormPanel(extensionContext, webview, gcpConfig);
+        return;
+      }
+
+      if (command === WEBVIEW_COMMAND.delete_config) {
+        const gcpConfig =
+          globalCache(extensionContext).get("GCP_CONFIGURATIONS")[
+            gcpConfigIndex
+          ];
+
+        if (gcpConfig.is_active) {
+          vscode.window.showErrorMessage(
+            `Can not delete [${gcpConfig.name}] because is set as active. Switch to another configuration and retry`
+          );
+          return;
+        }
+
+        vscode.window
+          .showInformationMessage(
+            `Are you sure you want to delete \n [${gcpConfig.name}] ?`,
+            { modal: true, detail: "This action is irreversible !" },
+            "Yes",
+            "No"
+          )
+          .then(async (answer) => {
+            if (answer === "Yes") {
+              webview.postMessage({ command: "start_loading" });
+
+              await deleteGcpConfig(gcpConfig.name);
+              globalCache(extensionContext).removeGcpConfigADC(gcpConfig.name);
+
+              const gcpConfigurations = await refreshGcpConfigurations(
+                extensionContext
+              );
+              webview.html = dashboardTemplate({
+                extensionContext,
+                webview,
+                gcpConfigurations,
+              });
+              vscode.window.showInformationMessage(
+                `Successfully deleted [${gcpConfig.name}]`
+              );
+            }
+          });
+        return;
+      }
+    },
+    undefined,
+    extensionContext.subscriptions
+  );
+};
+
+const switchGcpConfig = async (
+  extensionContext: vscode.ExtensionContext,
+  webview: vscode.Webview,
+  gcpConfig: {
+    name: GCP_CONFIGURATION["name"];
+    account: GCP_CONFIGURATION["properties"]["core"]["account"];
+    project: GCP_CONFIGURATION["properties"]["core"]["project"];
+  },
+  shouldUpdateGcpConfigProperties = true
+) => {
+  const message = `GCP config switched successfully to [${gcpConfig.name}]`;
+
+  try {
+    await activateConfig(gcpConfig.name);
+
+    if (shouldUpdateGcpConfigProperties) {
+      await setGcpConfigAccount(gcpConfig.account);
+      await setGcpConfigProject(gcpConfig.project);
+    }
+
+    // check if current gcpConfig ADC exist in globalCache
+    const gcpConfigADC = globalCache(extensionContext).getGcpConfigADC(
+      gcpConfig.name
+    );
+
+    if (shouldUpdateGcpConfigProperties || !gcpConfigADC) {
+      const newGcpConfigADC = await setGcpConfigADC();
+
+      const gcpConfigurations = await refreshGcpConfigurations(
+        extensionContext
+      );
+      webview.html = dashboardTemplate({
+        extensionContext,
+        webview,
+        gcpConfigurations,
+      });
+
+      vscode.window.showInformationMessage(message);
+      globalCache(extensionContext).addGcpConfigADC(
+        gcpConfig.name,
+        newGcpConfigADC
+      );
+
+      return;
+    }
+
+    // get ADC of current gcpConfig from cache
+    updateJsonFile(ADC_FILE_PATH, gcpConfigADC);
+    const gcpConfigurations = await refreshGcpConfigurations(extensionContext);
+    webview.html = dashboardTemplate({
+      extensionContext,
+      webview,
+      gcpConfigurations,
+    });
+    vscode.window.showInformationMessage(message);
+    return;
+  } catch (error: any) {
+    vscode.window.showErrorMessage(error);
+    const gcpConfigurations = await refreshGcpConfigurations(extensionContext);
+    webview.html = dashboardTemplate({
+      extensionContext,
+      webview,
+      gcpConfigurations,
+    });
+  }
+};
+
+const openConfigFormPanel = async (
+  extensionContext: vscode.ExtensionContext,
+  webview: vscode.Webview,
+  gcpConfig?: GCP_CONFIGURATION
+) => {
+  const editMode = Boolean(gcpConfig);
+
+  const configFormPanel = createWebViewPanel(
+    extensionContext,
+    vscode.ViewColumn.Beside
+  );
+
+  configFormPanel.webview.html = loadingPage({
+    extensionContext,
+    webview: configFormPanel.webview,
+  });
+
+  await refreshGcpProjects(extensionContext);
+
+  configFormPanel.webview.html = configFormTemplate({
+    extensionContext,
+    webview: configFormPanel.webview,
+    gcpConfig,
+    gcpConfigurations: globalCache(extensionContext).get("GCP_CONFIGURATIONS"),
+    gcpProjects: globalCache(extensionContext).get("GCP_PROJECTS"),
+  });
+
+  configFormPanel.webview.onDidReceiveMessage(
+    async ({ command, ...rest }) => {
+      webview.postMessage({ command: "start_loading" });
+      configFormPanel.dispose();
+
+      const gcpConfigForm: GCP_CONFIG_FORM = { ...rest };
+      if (
+        command === WEBVIEW_COMMAND.create_config ||
+        command === WEBVIEW_COMMAND.update_config
+      ) {
+        try {
+          if (editMode) {
+            await updateGcpConfig(gcpConfig!, gcpConfigForm as GCP_CONFIG_FORM);
+          } else {
+            await createGcpConfig(gcpConfigForm as GCP_CONFIG_FORM);
+          }
+          const gcpConfigurations = await refreshGcpConfigurations(
+            extensionContext
+          );
+          const newGcpConfig = gcpConfigurations.find(
+            (gcpConfig) => gcpConfig.name === gcpConfigForm.configName
+          );
+
+          if (newGcpConfig) {
+            switchGcpConfig(extensionContext, webview, {
+              name: gcpConfigForm.configName,
+              account: gcpConfigForm.account,
+              project: gcpConfigForm.project,
+            });
+          }
+        } catch (error) {
+          vscode.window.showErrorMessage(`Error on submit form: ${error}`);
+        }
+
+        return;
+      }
+    },
+    undefined,
+    extensionContext.subscriptions
+  );
+};
+
+export { renderDashbordWebview };