diff --git a/my-blog/static/css/pds.css b/my-blog/static/css/pds.css
new file mode 100644
index 0000000..3fab203
--- /dev/null
+++ b/my-blog/static/css/pds.css
@@ -0,0 +1,337 @@
+.pds-container {
+}
+
+.pds-header {
+    text-align: center;
+    margin-bottom: 40px;
+}
+
+.pds-header h1 {
+    font-size: 2.5em;
+    margin-bottom: 10px;
+    color: #333;
+}
+
+.pds-search-section {
+    border-radius: 8px;
+}
+
+.pds-search-form {
+    display: flex;
+    justify-content: center;
+				margin: 0px 20px;
+}
+
+.form-group {
+    display: flex;
+    align-items: center;
+}
+
+.form-group input {
+    padding: 10px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+				font-size: 14px;
+    width: 600px;
+}
+
+.form-group button {
+    padding: 10px 15px;
+    background: #1976d2;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+				font-size: 14px;
+}
+
+.form-group button:hover {
+    background: #1565c0;
+}
+
+/*
+.user-info {
+    background: white;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+*/
+
+.user-profile {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+}
+
+.user-details h3 {
+    margin: 0 0 5px 0;
+    color: #333;
+}
+
+.user-details p {
+    margin: 0;
+    color: #666;
+}
+
+.user-did-section {
+    margin: 20px 0;
+}
+
+.did-display {
+    padding: 10px;
+    background: #f5f5f5;
+    border-radius: 4px;
+    font-family: monospace;
+    font-size: 14px;
+    color: #666;
+    word-break: break-all;
+    margin-bottom: 10px;
+}
+
+.handle-display {
+    padding: 8px 10px;
+    background: #f0f9f0;
+    border-radius: 4px;
+    font-size: 13px;
+    color: #555;
+    margin-bottom: 8px;
+}
+
+.handle-display strong {
+    color: #2e7d32;
+}
+
+.handle-display span {
+    font-family: monospace;
+    font-size: 12px;
+    color: #666;
+    word-break: break-all;
+}
+
+
+.pds-display {
+    padding: 8px 10px;
+    background: #e8f4f8;
+    border-radius: 4px;
+    font-size: 13px;
+    color: #555;
+}
+
+.pds-display strong {
+    color: #1976d2;
+}
+
+.pds-display span {
+    font-family: monospace;
+    font-size: 12px;
+    color: #666;
+    word-break: break-all;
+}
+
+.collections-section,
+.records-section {
+    margin: 20px 0;
+}
+
+.collections-section h3,
+.records-section h3 {
+    font-size: 1.2em;
+    margin-bottom: 15px;
+    color: #333;
+    font-weight: bold;
+}
+
+.collections-list,
+.records-list {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.at-uri-link {
+    display: block;
+    padding: 8px 12px;
+    background: #f9f9f9;
+    border-radius: 4px;
+    border: 1px solid #e0e0e0;
+    color: #1976d2;
+    text-decoration: none;
+    font-family: monospace;
+    font-size: 14px;
+    word-break: break-all;
+    transition: all 0.2s;
+}
+
+.at-uri-link:hover {
+    background: #e8f4f8;
+    border-color: #1976d2;
+    text-decoration: none;
+}
+
+.pds-info {
+    padding: 8px 12px;
+    background: #f0f9ff;
+    border-radius: 4px;
+    border: 1px solid #b3e5fc;
+    margin-bottom: 8px;
+    color: #1976d2;
+    font-size: 12px;
+}
+
+.collection-info {
+    padding: 8px 12px;
+    background: #f0f9f0;
+    border-radius: 4px;
+    border: 1px solid #b3e5b3;
+    margin-bottom: 8px;
+    color: #2e7d32;
+    font-size: 12px;
+}
+
+.collections-header {
+    margin-bottom: 10px;
+}
+
+.collections-toggle {
+    background: #f5f5f5;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    padding: 8px 12px;
+    cursor: pointer;
+    font-size: 14px;
+    color: #333;
+    transition: background-color 0.2s;
+}
+
+.collections-toggle:hover {
+    background: #e8f4f8;
+    border-color: #1976d2;
+}
+
+
+.pds-test-section,
+.pds-about-section {
+    margin-bottom: 40px;
+}
+
+.pds-test-section h2,
+.pds-about-section h2 {
+    font-size: 1.8em;
+    margin-bottom: 20px;
+    color: #333;
+    border-bottom: 2px solid #1976d2;
+    padding-bottom: 10px;
+}
+
+.test-uris {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.at-uri {
+    background: #f5f5f5;
+    padding: 15px;
+    border-radius: 8px;
+    font-family: monospace;
+    font-size: 14px;
+    word-break: break-all;
+    cursor: pointer;
+    transition: background-color 0.2s;
+    border: 1px solid #e0e0e0;
+}
+
+.at-uri:hover {
+    background: #e8f4f8;
+    border-color: #1976d2;
+}
+
+.pds-about-section ul {
+    list-style-type: none;
+    padding: 0;
+}
+
+.pds-about-section li {
+    padding: 5px 0;
+    color: #666;
+}
+
+
+/* AT URI Modal Styles */
+.at-uri-modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+}
+
+.at-uri-modal-content {
+    background-color: white;
+    border-radius: 8px;
+    max-width: 800px;
+    max-height: 600px;
+    width: 90%;
+    height: 80%;
+    overflow: auto;
+    position: relative;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.at-uri-modal-close {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    background: none;
+    border: none;
+    font-size: 20px;
+    cursor: pointer;
+    z-index: 1001;
+    padding: 5px 10px;
+}
+
+/* Loading states */
+.loading {
+    text-align: center;
+    padding: 20px;
+    color: #666;
+}
+
+.error {
+    text-align: center;
+    padding: 20px;
+    color: #d32f2f;
+    background: #ffeaea;
+    border-radius: 4px;
+    margin: 10px 0;
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+	.pds-search-section {
+		display: none;
+	}
+    .pds-search-form {
+        flex-direction: column;
+        align-items: stretch;
+    }
+    
+    .form-group {
+        align-items: stretch;
+    }
+    
+    .form-group input {
+        width: 100%;
+        margin-bottom: 10px;
+    }
+}
+
diff --git a/my-blog/static/css/style.css b/my-blog/static/css/style.css
index 551993f..b259ab3 100644
--- a/my-blog/static/css/style.css
+++ b/my-blog/static/css/style.css
@@ -951,9 +951,11 @@ article.article-content {
         max-width: 100% !important;
     }
     
+				/*
     .form-group {
         margin-bottom: 15px !important;
     }
+				*/
     
     .form-input, .form-textarea {
         width: 100% !important;
@@ -1838,3 +1840,17 @@ article.article-content {
     font-weight: 600;
 }
 
+
+button.ask-at-btn {
+  margin: 10px;
+  background: var(--theme-color);
+  padding: 8px 16px;
+}
+
+button.ask-at-btn a {
+  color: var(--ai-color);
+}
+
+button#searchButton.pds-btn {
+	background: var(--theme-color);
+}
diff --git a/my-blog/templates/pds.html b/my-blog/static/js/pds.js
similarity index 63%
rename from my-blog/templates/pds.html
rename to my-blog/static/js/pds.js
index 571f247..c8a064b 100644
--- a/my-blog/templates/pds.html
+++ b/my-blog/static/js/pds.js
@@ -1,407 +1,3 @@
-{% extends "base.html" %}
-
-{% block title %}AT URI Browser - {{ config.title }}{% endblock %}
-
-{% block content %}
-<div class="pds-container">
-    <div class="pds-header">
-    </div>
-    
-    <!-- User Handle Input Form -->
-    <div class="pds-search-section">
-        <form class="pds-search-form" onsubmit="searchUser(); return false;">
-            <div class="form-group">
-                <input type="text" id="handleInput" placeholder="ai.syui.ai" value="at://ai.syui.ai" />
-                <button type="submit" id="searchButton">
-                    <i class="fab fa-bluesky"></i>
-                </button>
-            </div>
-        </form>
-    </div>
-    
-    <!-- Current User DID -->
-    <div id="userDidSection" class="user-did-section" style="display: none;">
-        <div class="pds-display">
-            <strong>PDS:</strong> <span id="userPdsText"></span>
-        </div>
-        <div class="handle-display">
-            <strong>Handle:</strong> <span id="userHandleText"></span>
-        </div>
-        <div class="did-display">
-            <span id="userDidText"></span>
-        </div>
-    </div>
-    
-    <!-- Collection List -->
-    <div id="collectionsSection" class="collections-section" style="display: none;">
-        <div class="collections-header">
-            <button id="collectionsToggle" class="collections-toggle" onclick="toggleCollections()">[+] Collections</button>
-        </div>
-        <div id="collectionsList" class="collections-list" style="display: none;">
-            <!-- Collections will be populated here -->
-        </div>
-    </div>
-    
-    <!-- AT URI Records -->
-    <div id="recordsSection" class="records-section" style="display: none;">
-        <div id="recordsList" class="records-list">
-            <!-- Records will be populated here -->
-        </div>
-    </div>
-    
-    
-</div>
-
-<!-- AT URI Modal -->
-<div id="atUriModal" class="at-uri-modal-overlay" style="display: none;" onclick="closeAtUriModal(event)">
-    <div class="at-uri-modal-content">
-        <button class="at-uri-modal-close" onclick="closeAtUriModal()">&times;</button>
-        <div id="atUriContent"></div>
-    </div>
-</div>
-
-<style>
-.pds-container {
-    max-width: 1200px;
-    margin: 0 auto;
-    padding: 20px;
-}
-
-.pds-header {
-    text-align: center;
-    margin-bottom: 40px;
-}
-
-.pds-header h1 {
-    font-size: 2.5em;
-    margin-bottom: 10px;
-    color: #333;
-}
-
-.pds-search-section {
-    border-radius: 8px;
-}
-
-.pds-search-form {
-    display: flex;
-    justify-content: center;
-    margin-bottom: 20px;
-}
-
-.form-group {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-}
-
-
-.form-group input {
-    padding: 10px;
-    border: 1px solid #ddd;
-    border-radius: 4px;
-    font-size: 16px;
-    width: 300px;
-}
-
-.form-group button {
-    padding: 10px 15px;
-    background: #1976d2;
-    color: white;
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
-    font-size: 18px;
-    min-width: 50px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.form-group button:hover {
-    background: #1565c0;
-}
-
-.user-info {
-    background: white;
-    padding: 20px;
-    border-radius: 8px;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-}
-
-.user-profile {
-    display: flex;
-    align-items: center;
-    gap: 15px;
-}
-
-.user-details h3 {
-    margin: 0 0 5px 0;
-    color: #333;
-}
-
-.user-details p {
-    margin: 0;
-    color: #666;
-}
-
-.user-did-section {
-    margin: 20px 0;
-}
-
-.did-display {
-    padding: 10px;
-    background: #f5f5f5;
-    border-radius: 4px;
-    font-family: monospace;
-    font-size: 14px;
-    color: #666;
-    word-break: break-all;
-    margin-bottom: 10px;
-}
-
-.handle-display {
-    padding: 8px 10px;
-    background: #f0f9f0;
-    border-radius: 4px;
-    font-size: 13px;
-    color: #555;
-    margin-bottom: 8px;
-}
-
-.handle-display strong {
-    color: #2e7d32;
-}
-
-.handle-display span {
-    font-family: monospace;
-    font-size: 12px;
-    color: #666;
-    word-break: break-all;
-}
-
-
-.pds-display {
-    padding: 8px 10px;
-    background: #e8f4f8;
-    border-radius: 4px;
-    font-size: 13px;
-    color: #555;
-}
-
-.pds-display strong {
-    color: #1976d2;
-}
-
-.pds-display span {
-    font-family: monospace;
-    font-size: 12px;
-    color: #666;
-    word-break: break-all;
-}
-
-.collections-section,
-.records-section {
-    margin: 20px 0;
-}
-
-.collections-section h3,
-.records-section h3 {
-    font-size: 1.2em;
-    margin-bottom: 15px;
-    color: #333;
-    font-weight: bold;
-}
-
-.collections-list,
-.records-list {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-}
-
-.at-uri-link {
-    display: block;
-    padding: 8px 12px;
-    background: #f9f9f9;
-    border-radius: 4px;
-    border: 1px solid #e0e0e0;
-    color: #1976d2;
-    text-decoration: none;
-    font-family: monospace;
-    font-size: 14px;
-    word-break: break-all;
-    transition: all 0.2s;
-}
-
-.at-uri-link:hover {
-    background: #e8f4f8;
-    border-color: #1976d2;
-    text-decoration: none;
-}
-
-.pds-info {
-    padding: 8px 12px;
-    background: #f0f9ff;
-    border-radius: 4px;
-    border: 1px solid #b3e5fc;
-    margin-bottom: 8px;
-    color: #1976d2;
-    font-size: 12px;
-}
-
-.collection-info {
-    padding: 8px 12px;
-    background: #f0f9f0;
-    border-radius: 4px;
-    border: 1px solid #b3e5b3;
-    margin-bottom: 8px;
-    color: #2e7d32;
-    font-size: 12px;
-}
-
-.collections-header {
-    margin-bottom: 10px;
-}
-
-.collections-toggle {
-    background: #f5f5f5;
-    border: 1px solid #ddd;
-    border-radius: 4px;
-    padding: 8px 12px;
-    cursor: pointer;
-    font-size: 14px;
-    color: #333;
-    transition: background-color 0.2s;
-}
-
-.collections-toggle:hover {
-    background: #e8f4f8;
-    border-color: #1976d2;
-}
-
-
-.pds-test-section,
-.pds-about-section {
-    margin-bottom: 40px;
-}
-
-.pds-test-section h2,
-.pds-about-section h2 {
-    font-size: 1.8em;
-    margin-bottom: 20px;
-    color: #333;
-    border-bottom: 2px solid #1976d2;
-    padding-bottom: 10px;
-}
-
-.test-uris {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-}
-
-.at-uri {
-    background: #f5f5f5;
-    padding: 15px;
-    border-radius: 8px;
-    font-family: monospace;
-    font-size: 14px;
-    word-break: break-all;
-    cursor: pointer;
-    transition: background-color 0.2s;
-    border: 1px solid #e0e0e0;
-}
-
-.at-uri:hover {
-    background: #e8f4f8;
-    border-color: #1976d2;
-}
-
-.pds-about-section ul {
-    list-style-type: none;
-    padding: 0;
-}
-
-.pds-about-section li {
-    padding: 5px 0;
-    color: #666;
-}
-
-
-/* AT URI Modal Styles */
-.at-uri-modal-overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: rgba(0, 0, 0, 0.5);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 1000;
-}
-
-.at-uri-modal-content {
-    background-color: white;
-    border-radius: 8px;
-    max-width: 800px;
-    max-height: 600px;
-    width: 90%;
-    height: 80%;
-    overflow: auto;
-    position: relative;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-}
-
-.at-uri-modal-close {
-    position: absolute;
-    top: 10px;
-    right: 10px;
-    background: none;
-    border: none;
-    font-size: 20px;
-    cursor: pointer;
-    z-index: 1001;
-    padding: 5px 10px;
-}
-
-/* Loading states */
-.loading {
-    text-align: center;
-    padding: 20px;
-    color: #666;
-}
-
-.error {
-    text-align: center;
-    padding: 20px;
-    color: #d32f2f;
-    background: #ffeaea;
-    border-radius: 4px;
-    margin: 10px 0;
-}
-
-/* Responsive design */
-@media (max-width: 768px) {
-    .pds-search-form {
-        flex-direction: column;
-        align-items: stretch;
-    }
-    
-    .form-group {
-        flex-direction: column;
-        align-items: stretch;
-    }
-    
-    .form-group input {
-        width: 100%;
-        margin-bottom: 10px;
-    }
-}
-</style>
-
-<script>
 // AT Protocol API functions
 const AT_PROTOCOL_CONFIG = {
     primary: {
@@ -433,7 +29,8 @@ async function searchUser() {
     }
     
     searchButton.disabled = true;
-    searchButton.innerHTML = '<i class="fab fa-bluesky"></i>';
+    searchButton.innerHTML = '@';
+    //searchButton.innerHTML = '<i class="fab fa-bluesky"></i>';
     
     try {
         // Clear previous results
@@ -497,7 +94,8 @@ async function searchUser() {
         alert('エラーが発生しました: ' + error.message);
     } finally {
         searchButton.disabled = false;
-        searchButton.innerHTML = '<i class="fab fa-bluesky"></i>';
+        searchButton.innerHTML = '@';
+        //searchButton.innerHTML = '<i class="fab fa-bluesky"></i>';
     }
 }
 
@@ -770,5 +368,3 @@ function toggleCollections() {
         toggleButton.textContent = '[+] Collections';
     }
 }
-</script>
-{% endblock %}
\ No newline at end of file
diff --git a/my-blog/templates/base.html b/my-blog/templates/base.html
index bbc497a..82b8523 100644
--- a/my-blog/templates/base.html
+++ b/my-blog/templates/base.html
@@ -12,6 +12,7 @@
     <!-- Stylesheets -->
     <link rel="stylesheet" href="/css/style.css">
     <link rel="stylesheet" href="/css/svg-animation-package.css">
+    <link rel="stylesheet" href="/css/pds.css">
     <link rel="stylesheet" href="/pkg/icomoon/style.css">
     <link rel="stylesheet" href="/pkg/font-awesome/css/all.min.css">
     
@@ -48,7 +49,18 @@
                         </svg>
                     </a>
                 </div>
-                <div class="header-actions">
+																<div class="header-actions">
+																	<!-- User Handle Input Form -->
+																	<div class="pds-search-section">
+																		<form class="pds-search-form" onsubmit="searchUser(); return false;">
+																			<div class="form-group">
+																				<input type="text" id="handleInput" placeholder="at://syui.ai" value="syui.ai" />
+																				<button type="submit" id="searchButton" class="pds-btn">
+																				@
+																				</button>
+																			</div>
+																		</form>
+																	</div>
                     <button class="ask-ai-btn" onclick="toggleAskAI()" id="askAiButton">
                         <span class="ai-icon icon-ai"></span>
                         ai
@@ -75,8 +87,11 @@
                 <div id="chatHistory" class="chat-history" style="display: none;"></div>
             </div>
         </div>
-        
+
         <main class="main-content">
+								<!-- Pds Panel -->
+								{% include "pds-header.html" %}
+
             {% block content %}{% endblock %}
         </main>
 
@@ -113,6 +128,7 @@
         };
     </script>
     <script src="/js/ask-ai.js"></script>
+    <script src="/js/pds.js"></script>
     <script src="/js/theme.js"></script>
     <script src="/js/image-comparison.js"></script>
     
diff --git a/my-blog/templates/pds-header.html b/my-blog/templates/pds-header.html
new file mode 100644
index 0000000..df001a0
--- /dev/null
+++ b/my-blog/templates/pds-header.html
@@ -0,0 +1,48 @@
+<div class="pds-container">
+    <div class="pds-header">
+    </div>
+    
+
+    
+    <!-- Current User DID -->
+    <div id="userDidSection" class="user-did-section" style="display: none;">
+        <div class="pds-display">
+            <strong>PDS:</strong> <span id="userPdsText"></span>
+        </div>
+        <div class="handle-display">
+            <strong>Handle:</strong> <span id="userHandleText"></span>
+        </div>
+        <div class="did-display">
+            <span id="userDidText"></span>
+        </div>
+    </div>
+    
+    <!-- Collection List -->
+    <div id="collectionsSection" class="collections-section" style="display: none;">
+        <div class="collections-header">
+            <button id="collectionsToggle" class="collections-toggle" onclick="toggleCollections()">[+] Collections</button>
+        </div>
+        <div id="collectionsList" class="collections-list" style="display: none;">
+            <!-- Collections will be populated here -->
+        </div>
+    </div>
+    
+    <!-- AT URI Records -->
+    <div id="recordsSection" class="records-section" style="display: none;">
+        <div id="recordsList" class="records-list">
+            <!-- Records will be populated here -->
+        </div>
+    </div>
+    
+    
+</div>
+
+<!-- AT URI Modal -->
+<div id="atUriModal" class="at-uri-modal-overlay" style="display: none;" onclick="closeAtUriModal(event)">
+    <div class="at-uri-modal-content">
+        <button class="at-uri-modal-close" onclick="closeAtUriModal()">&times;</button>
+        <div id="atUriContent"></div>
+    </div>
+</div>
+
+
diff --git a/oauth/src/App.css b/oauth/src/App.css
index a9d85e5..3bfee41 100644
--- a/oauth/src/App.css
+++ b/oauth/src/App.css
@@ -422,10 +422,6 @@ body {
   margin-bottom: 16px;
 }
 
-.form-group {
-  margin-bottom: 16px;
-}
-
 .form-group label {
   display: block;
   font-weight: 700;
@@ -919,10 +915,6 @@ body {
     max-width: 100% !important;
   }
   
-  .form-group {
-    margin-bottom: 15px !important;
-  }
-  
   .form-input, .form-textarea {
     width: 100% !important;
     max-width: 100% !important;