diff --git a/README.md b/README.md
index 01c5ef1..9b3ecb2 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1,3 @@
 # support_uwuzu_net
-ゆずねっとのサポートページです
+ゆずねっとのサポートページです！
+簡易的なものなので今後アプデしていきます。
diff --git a/contents.json b/contents.json
new file mode 100644
index 0000000..edb2409
--- /dev/null
+++ b/contents.json
@@ -0,0 +1,40 @@
+{
+    "articles": [
+        {
+            "title": "ユーズで使用できる装飾について",
+            "id": "use_markdown",
+            "date": "2024-08-30",
+            "description": "uwuzuで使用できる装飾一覧です。",
+            "content": "ユーズで使用できる装飾(一部Markdown)は以下のものです。  \n```  \n# [ここにテキスト] (h1サイズで文字を表示)  \n## [ここにテキスト] (h2サイズで文字を表示)  \n## [ここにテキスト] (h3サイズで文字を表示)  \n[[buruburu [ここにテキスト]]] (文字をブルブルさせて表示)  \n`[ここにテキスト]` (インラインコードとして表示)  \n***[ここにテキスト]*** (斜体と太字を適用して表示)  \n**[ここにテキスト]** (太字を適用して表示)  \n*[ここにテキスト]* (斜体を適用して表示)  \n~~[ここにテキスト]~~ (文字に取り消し線を入れて表示)  \n>>> [ここにテキスト] (引用として表示)  \n||[ここにテキスト]|| (カーソルをのせて文字を表示)  \n- [ここにテキスト] (箇条書きとして左に点を表示)  \n```  \nまた、以下の場合に自動的にユーズに装飾が加わることがあります  \n```  \n@[userid] (ユーザー名のリンクで表示)  \n:[emojiname]: (カスタム絵文字で表示)  \n#[hashtag] (ハッシュタグで表示)  \n  \nhttps://youtube.com/watch?v=XXXXXXXXXXX (YouTubeの動画埋め込み(youtu.beなども対応))  \nhttps://nicovideo.jp/watch/smXXXXXXX (ニコニコ動画の埋め込み(nico.msなども対応))  \n  \nその他URL (URLとして装飾)  \n```  \nこれらの装飾を組み合わせて是非面白いユーズを作ってみてください！"
+        },
+        {
+            "title": "TLにご飯の画像が多すぎる",
+            "id": "meshitero_timeline",
+            "date": "2024-08-29",
+            "description": "ゆずねっとで飯テロが横行している件についてです",
+            "content": "ご飯の画像が多すぎることに関してですが、これはこれで私(daichimarukana)は良いと思っていますので大丈夫でしょう  \nもし深夜時間帯に閲覧してしまい猛烈な食欲に駆り立てられてしまったのであれば申し訳ございません。  \n  \nご飯の画像が多すぎることを解消するにはユーザー数を増やすことや様々なトピックのユーズをすることが重要だと考えていますので、是非新規さんを連れてきたりじゃんじゃんユーズしてみてください🤗(利用規約の範囲内でね！)  \n"
+        },
+        {
+            "title": "パスワードを忘れた",
+            "id": "forgot_password",
+            "date": "2024-08-29",
+            "description": "パスワードの復元(変更)方法について書きました",
+            "content": "パスワードを忘れた場合、ゆずねっとでは二通りの方法でパスワードの復元が行えます。  \n**なお、パスワードの復元にはメールアドレスの設定が必要です。**  \n**メールアドレスの設定をされたいない方はパスワードの復元はできません。**  \n  \n## 1. ユーザーIDとメールアドレスの入力  \nゆずねっとの未ログイン時トップページより、ログインボタンを押し、下部にあるパスワード復元ボタンを押してください。  \nパスワードの復元ページに進みますと、ユーザーIDとメールアドレスの入力ができるので設定したユーザーIDとメールアドレスを入力して次へ進んでください。  \n  \n## 2. パスワードの再設定  \n二段階認証を設定しているアカウントでしたら、二段階認証コードと新しいパスワードを入力して次へ進んでください。  \nもし二段階認証を設定していないアカウントでしたら、メールで認証するボタンを押してください。  \nこれによりメールで二段階認証ができるようになります。  \nメールの送信には少々時間がかかりますのでページの読み込みが終るまでお待ち下さい。  \nメールを受信できたら、メールに記載されている二段階認証コードと新しいパスワードを入力して次へ進んでください。  \n  \n## 3. ログイン  \nこれでパスワードの復元(パスワードリセット)は完了です！  \n通常のログインページより新しいパスワードでログインをしてください。"
+        },
+        {
+            "title": "ユーザーIDを変更したい",
+            "id": "change_userid",
+            "date": "2024-08-29",
+            "description": "結論から申し上げますとユーザーIDの変更はできません。",
+            "content": "残念ながらuwuzuの仕様上ユーザーIDの変更はできません。"
+        },
+        {
+            "title": "サポートサイトを開設しました！",
+            "id": "open_uwuzu_net_support",
+            "date": "2024-08-29",
+            "description": "ゆずねっとのサポートサイトを開設しました！",
+            "content": "ゆずねっとのサポートサイトを開設しました！  \n是非このサポートサイトをご活用ください！  \n  \n## 使い方  \nサイトを開くとトップページに記事一覧が表示されます。  \nお求めの記事をタップすると記事が表示されます！  \n  \nまた、サイト上部の検索欄より検索も可能です！"
+        }
+    ]
+}
+  
\ No newline at end of file
diff --git a/css/style.css b/css/style.css
new file mode 100644
index 0000000..233a164
--- /dev/null
+++ b/css/style.css
@@ -0,0 +1,218 @@
+@import url('https://fonts.googleapis.com/css2?family=BIZ+UDGothic:wght@400;700&family=BIZ+UDPGothic:wght@400;700&family=Inter:wght@100..900&display=swap');
+body{
+    margin: 0px;
+    width: 100%;
+    height: fit-content;
+    background-color: #F7F7F7;
+}
+.top{
+    width: 100%;
+    margin: 0px;
+    height: 64px;
+    display: flex;
+    justify-content: space-between;
+    background-color: #FFC832;
+    border-radius: 0px 0px 15px 15px;
+}
+.top .left{
+    margin-left: 0px;
+    display: flex;
+}
+.top .left img{
+    width: 48px;
+    height: 48px;
+    margin: 8px;
+    object-fit: cover;
+    border-radius: 8px;
+}
+.top .left a{
+    display: block;
+    text-decoration: none;
+    font-size: 32px;
+    font-weight: bold;
+    line-height: 48px;
+    height: fit-content;
+    width: fit-content;
+    font-family: "Inter", "BIZ UDPGothic", sans-serif;
+    margin: 8px 0px;
+    color: #FFFFFF;
+}
+.top .right{
+    margin-right: 0px;
+    display: flex;
+}
+.top .right .searchbox{
+    width: 200px;
+    height: 28px;
+    margin: 16px;
+    border-radius: 25px;
+    padding-left: 8px;
+    border: solid 1px #FFFFFF;
+    outline: none;
+}
+main{
+    margin: 0px auto;
+    width: 1080px;
+}
+main h1{
+    font-family: "Inter", "BIZ UDPGothic", sans-serif;
+    font-weight: bold;
+    color: #252525;
+    font-size: 48px;
+}
+main p{
+    font-family: "Inter", "BIZ UDPGothic", sans-serif;
+    font-weight: normal;
+    color: #252525;
+    font-size: 16px;
+}
+main .contents{
+    margin-top: 32px;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    height: fit-content;
+    flex-wrap: wrap;
+}
+main .contents .items{
+    cursor: pointer;
+    width: calc(50% - 40px);
+    height: fit-content;
+    background-color: #FFFFFF;
+    border-radius: 10px;
+    padding: 16px;
+    margin-bottom: 16px;
+    transition: all 250ms ease-out;
+}
+main .contents .items:hover{
+    box-shadow: 0 0px 48px 0 rgba(0, 0, 0, .05);
+}
+main .contents .items h1{
+    font-family: "Inter", "BIZ UDPGothic", sans-serif;
+    font-weight: bold;
+    color: #252525;
+    font-size: 24px;
+    margin: 4px 0px;
+}
+main .contents .items p{
+    font-family: "Inter", "BIZ UDPGothic", sans-serif;
+    font-weight: normal;
+    color: #252525;
+    font-size: 14px;
+    margin: 4px 0px;
+}
+main .contents .items .date{
+    font-family: "Inter", "BIZ UDPGothic", sans-serif;
+    font-weight: bold;
+    color: #252525;
+    font-size: 12px;
+}
+main .article{
+    width: 100%;
+    height: fit-content;
+}
+main .article .date{
+    font-family: "Inter", "BIZ UDPGothic", sans-serif;
+    font-weight: bold;
+    color: #252525;
+    font-size: 16px;
+}
+main .article h1{
+    font-family: "Inter", "BIZ UDPGothic", sans-serif;
+    font-weight: bold;
+    color: #252525;
+    font-size: 48px;
+}
+main .article h2{
+    font-family: "Inter", "BIZ UDPGothic", sans-serif;
+    font-weight: bold;
+    color: #252525;
+    font-size: 32px;
+}
+main .article h3{
+    font-family: "Inter", "BIZ UDPGothic", sans-serif;
+    font-weight: bold;
+    color: #252525;
+    font-size: 24px;
+}
+main .article p{
+    font-family: "Inter", "BIZ UDPGothic", sans-serif;
+    font-weight: normal;
+    color: #252525;
+    font-size: 16px;
+}
+main .article table{
+    margin: 16px 0px;
+    width: calc(fit-content + 128px);
+    border: none;
+    border-collapse: collapse;
+}
+main .article td, th {
+    padding: 4px 16px;
+    border: solid 1px #252525;
+}
+main .article pre{
+    width: 100%;
+    height: fit-content;
+    background-color: #252525;
+    padding: 16px;
+    border-radius: 15px;
+    color: #F7F7F7;
+    font-family: "BIZ UDGothic", sans-serif;
+}
+
+.error {
+    position: absolute;
+    animation: slideDown 5.0s ease-in-out forwards;
+    margin-top: 32px;
+    margin-right: auto;
+    margin-left: auto;
+    right: 0;
+    left: 0;
+    width: fit-content;
+    height: 32px;
+    z-index: 9999;
+    background-color: #FF4848;
+    border-radius: 20px;
+    box-shadow: 0 0px 48px 0 rgba(0, 0, 0, .15);
+    text-decoration: none;
+}
+.error p{
+    margin-top: 4px;
+    margin-bottom: 4px;
+    margin-left: 12px;
+    margin-right: 12px;
+    line-height: 24px;
+    font-family: "Inter", "BIZ UDPGothic", sans-serif;
+    font-size: 16px;
+    color: #F7F7F7;
+    color: transparent; 
+    text-shadow: 0 0 0 #F7F7F7;
+    text-align: center;
+}
+@keyframes slideDown {
+    0%, 100% { transform: translateY(-40dvh); }
+    20%, 90% { transform: translateY(0px); }
+}
+
+@media screen and (max-width: 1080px) {
+	.top .left a{
+        display: none;
+    }
+    main{
+        margin: 0px auto;
+        width: calc(100% - 32px);
+        overflow-wrap: normal;
+    }
+    main .contents{
+        display: block;
+        height: fit-content;
+    }
+    main .contents .items{
+        width: calc(100% - 32px);
+    }
+    main .article pre{
+        width: calc(100% - 32px);
+        overflow: scroll;
+    }
+}
\ No newline at end of file
diff --git a/img/uwuzu_net_icon.png b/img/uwuzu_net_icon.png
new file mode 100644
index 0000000..2e34f4b
Binary files /dev/null and b/img/uwuzu_net_icon.png differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..58edacf
--- /dev/null
+++ b/index.html
@@ -0,0 +1,159 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+    <meta charset="UTF-8">
+    <title>ゆずねっとサポート</title>
+    <link rel="stylesheet" href="css/style.css" type="text/css">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+</head>
+<body>
+    <div id="error" class="error" style="display:none;">
+        <p>Error</p>
+    </div>
+
+    <div class="top">
+        <div class="left">
+            <img src="img/uwuzu_net_icon.png">
+            <a href="index.html">ゆずねっとサポート</a>
+        </div>
+        <div class="right">
+            <input class="searchbox" type="text" id="searchbox" placeholder="検索">
+        </div>
+    </div>
+
+    <main>
+        <div id="top">
+            <h1>ゆずねっとサポート</h1>
+            <p>ゆずねっとのサポートサイトです。<br>
+                右上の検索欄から検索するか下から記事を選択すると閲覧ができます！</p>
+
+            <div id="contents" class="contents"></div>
+        </div>
+        <div id="docs" style="display: none;">
+
+        </div>
+    </main>
+</body>
+
+<script>
+    function showError(text){
+        $("#error").children("p").text(text);
+        $("#error").show();
+        setTimeout(function(){
+            $("#error").hide();
+        }, 5000);
+    }
+
+    $(document).ready(function() {
+        // グローバル変数としてJSONデータを保持
+        var articlesData;
+
+        // JSONを読み込み、ページにコンテンツを追加
+        $.getJSON('contents.json', function(data) {
+            articlesData = data.articles; // JSONデータを保持
+            $.each(articlesData, function(index, article) {
+                // 記事のHTML要素を作成して追加
+                $('#contents').append(
+                    `<div class="items" id="${article.id}">
+                        <div class="date">${article.date}</div>
+                        <h1>${article.title}</h1>
+                        <p>${article.description}</p>
+                    </div>`
+                );
+            });
+
+            var now_url = window.location.href;
+            var url = new URL(now_url);
+            var data = url.searchParams.get("article");
+
+            if(!(data === null)){
+                var article = articlesData.find(function(a) {
+                    return a.id === data;
+                });
+                if (article) {
+                    $('#docs').html(
+                        `<div class="article">
+                            <h1>${article.title}</h1>
+                            <div class="date">${article.date}</div>
+                            <div class="content">${marked.parse(article.content)}</div>
+                        </div>`
+                    ).show();
+                    $('#top').hide();
+                    history.pushState({ articleId: data }, article.title, `?article=${data}`);
+                } else {
+                    showError("記事が存在しませんでした");
+                }
+            }
+
+            $("#contents").on('click', '.items', function() {
+                var id = $(this).attr("id");
+
+                var article = articlesData.find(function(a) {
+                    return a.id === id;
+                });
+
+                if (article) {
+                    $('#docs').html(
+                        `<div class="article">
+                            <h1>${article.title}</h1>
+                            <div class="date">${article.date}</div>
+                            <div class="content">${marked.parse(article.content)}</div>
+                        </div>`
+                    ).show();
+                    $('#top').hide();
+
+                    history.pushState({ articleId: id }, article.title, `?article=${id}`);
+                } else {
+                    showError("記事が存在しませんでした");
+                }
+            });
+
+            window.addEventListener('popstate', function(event) {
+                if (event.state && event.state.articleId) {
+                    // 特定の記事の状態
+                    var id = event.state.articleId;
+                    var article = articlesData.find(function(a) {
+                        return a.id === id;
+                    });
+
+                    if (article) {
+                        $('#docs').html(
+                            `<div class="article">
+                                <h1>${article.title}</h1>
+                                <div class="date">${article.date}</div>
+                                <div class="content">${marked.parse(article.content)}</div>
+                            </div>`
+                        ).show();
+                        $('#top').hide();
+                    }
+                } else {
+                    $('#docs').hide();
+                    $('#top').show();
+                }
+            });
+
+            // 検索機能
+            $('#searchbox').on('input', function() {
+                var searchText = $(this).val().toLowerCase();
+
+                $('#contents .items').each(function() {
+                    var title = $(this).find('h1').text().toLowerCase();
+                    var description = $(this).find('p').text().toLowerCase();
+
+                    if (title.includes(searchText) || description.includes(searchText)) {
+                        $(this).show(); // マッチする場合は表示
+                    } else {
+                        $(this).hide(); // マッチしない場合は非表示
+                    }
+                });
+            });
+
+        }).fail(function() {
+            showError("記事一覧を取得できませんでした！");
+        });
+    });
+</script>
+
+</html>